/* MycoDye narrative system. The established hero remains in styles.css. */

:root {
  --revamp-paper: #f2efe8;
  --revamp-white: #fff;
  --revamp-ink: #071323;
  --revamp-navy: #03142f;
  --revamp-blue: #0754bd;
  --revamp-blue-bright: #1266d2;
  --revamp-cyan: #72e5df;
  --revamp-line: rgba(7, 19, 35, .16);
  --revamp-line-light: rgba(255, 255, 255, .24);
  --revamp-gutter: clamp(24px, 5vw, 92px);
  --revamp-space: clamp(88px, 9vw, 154px);
}

main > section:not(.hero),
.site-footer {
  position: relative;
  z-index: 40;
}

.site-nav,
.linkedin-rail {
  font-size: 15px;
}

.hero-actions .button {
  font-size: 14px;
}

main > section:not(.hero) {
  scroll-margin-top: 66px;
}

main > section:not(.hero) h2,
main > section:not(.hero) h3,
main > section:not(.hero) p {
  text-wrap: balance;
}

main > section:not(.hero) h2,
main > section:not(.hero) h3 {
  margin: 0;
}

main > section:not(.hero) h2 {
  font-size: clamp(56px, 6.5vw, 112px);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .94;
}

main > section:not(.hero) p {
  font-size: 17px;
  line-height: 1.58;
}

main > section:not(.hero) .section-lead {
  font-size: clamp(22px, 1.75vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.34;
}

/* MycoDye — the image is duplicated so the copy can sit between depths. */

.company-section {
  display: grid;
  min-height: clamp(820px, 100svh, 1080px);
  align-items: center;
  overflow: hidden;
  padding: var(--revamp-space) var(--revamp-gutter);
  background:
    radial-gradient(circle at 74% 54%, rgba(15, 88, 176, .3), transparent 34%),
    linear-gradient(180deg, #020c1e 0%, var(--revamp-navy) 100%);
  color: white;
  isolation: isolate;
}

.depth-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.depth-image img {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: max(100%, min(118vw, 1880px));
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: none;
}

.depth-image-back {
  z-index: 1;
}

/* Each pixel is rendered once. Both halves use the same image-space boundary,
   dimensions and position, so transparency cannot double up at the join. */
.depth-image-back img {
  -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 45%);
  mask-image: linear-gradient(to right, transparent 45%, #000 45%);
}

.depth-image-front img {
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 45%);
  mask-image: linear-gradient(to right, #000 45%, transparent 45%);
}

.company-content {
  position: relative;
  z-index: 2;
  width: 60%;
  margin: 0 0 0 auto;
  padding: 0 0 14vh;
}

.company-content h2 {
  display: flex;
  flex-direction: column;
  max-width: none;
  font-size: clamp(48px, 5vw, 88px) !important;
  white-space: normal;
  color: white;
}

.company-line {
  display: block;
  width: auto;
}

.company-content .section-lead {
  width: 100%;
  max-width: 38ch;
  margin: clamp(30px, 3vw, 46px) 0 0;
  margin-left: 0;
  color: white;
}

.depth-image-front {
  z-index: 3;
  clip-path: none;
}

/* Xylindein */

.pigment-section {
  display: grid;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(780px, 92svh, 980px);
  grid-template-columns: 54% 46%;
  background: var(--revamp-paper);
  color: var(--revamp-ink);
}

.pigment-visual {
  position: relative;
  z-index: 2;
  min-height: inherit;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 56%, rgba(9, 85, 147, .46), transparent 38%),
    linear-gradient(145deg, #020b18, #041a3d 72%);
}

.pigment-fungus {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 116%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .4));
}

.pigment-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--revamp-space) clamp(42px, 6vw, 112px);
  background: var(--revamp-paper);
}

.pigment-copy h2 {
  max-width: 8ch;
}

.pigment-copy .section-lead {
  max-width: 31ch;
  margin: clamp(32px, 4vw, 56px) 0 0;
  color: var(--revamp-ink);
}

.pigment-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(38px, 4vw, 58px);
  padding-top: 24px;
  border-top: 1px solid var(--revamp-line);
}

.pigment-facts strong {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 10px 17px;
  border: 1px solid rgba(7, 19, 35, .3);
  border-radius: 999px;
  color: var(--revamp-ink);
  font-size: 16px;
}

/* Applications */

.applications-section {
  overflow: hidden;
  padding: 0;
  background: var(--revamp-navy);
  color: white;
}

.applications-feature {
  display: grid;
  min-height: clamp(820px, 100svh, 1040px);
  grid-template-columns: 58% 42%;
  background: var(--revamp-blue);
}

.applications-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  padding: var(--revamp-space) var(--revamp-gutter);
}

.applications-content h2 {
  max-width: 10ch;
  color: white;
}

.applications-content .section-lead {
  max-width: 31ch;
  margin: clamp(32px, 4vw, 56px) 0 0;
  color: white;
}

.applications-photo {
  position: relative;
  overflow: hidden;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

.applications-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.25);
  transform-origin: center bottom;
}

.applications-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, .18);
}

.application-card {
  position: relative;
  min-height: clamp(620px, 76svh, 820px);
  overflow: hidden;
  background: #020b18;
}

.application-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(3, 20, 47, .94) 0%, rgba(3, 20, 47, .18) 55%, transparent 74%);
}

.application-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.application-card:first-child img {
  object-position: center 32%;
}

.application-card:last-child img {
  object-position: center 48%;
}

.application-card:hover img {
  transform: scale(1.025);
}

.application-card h3 {
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(32px, 4vw, 64px);
  left: clamp(28px, 4vw, 64px);
  z-index: 2;
  max-width: 10ch;
  color: white;
  font-size: clamp(42px, 4.6vw, 78px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .98;
}

/* Process */

.workflow-section {
  overflow: hidden;
  padding: var(--revamp-space) var(--revamp-gutter) clamp(110px, 11vw, 190px);
  background: var(--revamp-navy);
  color: white;
}

.workflow-heading {
  max-width: 1240px;
}

.workflow-heading h2 {
  max-width: 11ch;
  color: white;
}

.workflow-heading > p {
  max-width: 760px;
  margin: 30px 0 0;
  color: white;
  font-size: clamp(21px, 1.55vw, 27px) !important;
  font-weight: 700;
  line-height: 1.4 !important;
}

.timeline-scroll {
  margin-top: clamp(72px, 8vw, 120px);
}

.workflow-timeline {
  position: relative;
  display: grid;
  min-width: 1160px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workflow-timeline::before,
.workflow-timeline::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 10%;
  width: 80%;
  height: 2px;
}

.workflow-timeline::before {
  background: rgba(255, 255, 255, .2);
}

.workflow-timeline::after {
  background: var(--revamp-cyan);
  transform: scaleX(0);
  transform-origin: left center;
}

.workflow-timeline.timeline-active::after {
  transform: scaleX(1);
  transition: transform .58s cubic-bezier(.45, 0, .22, 1);
}

.workflow-timeline:not(.timeline-active)::after {
  transition: none;
}

.workflow-step {
  position: relative;
  min-width: 0;
  padding: 0 14px;
}

.workflow-marker {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: 0 auto 34px;
  border: 2px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  background: var(--revamp-navy);
}

.workflow-marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--revamp-cyan);
  opacity: 0;
  transform: scale(.35);
}

.workflow-timeline.timeline-active .workflow-marker::after {
  opacity: 1;
  transform: scale(1);
  transition: opacity .2s ease calc(var(--step) * .07s), transform .24s var(--ease) calc(var(--step) * .07s);
}

.workflow-image,
.workflow-step .timeline-status,
.workflow-step h3,
.workflow-step > p {
  opacity: 0;
  transform: translateY(14px);
}

.workflow-timeline.timeline-active .workflow-image,
.workflow-timeline.timeline-active .timeline-status,
.workflow-timeline.timeline-active .workflow-step h3,
.workflow-timeline.timeline-active .workflow-step > p {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease calc(.08s + var(--step) * .07s), transform .34s var(--ease) calc(.08s + var(--step) * .07s);
}

.workflow-timeline:not(.timeline-active) .workflow-marker::after,
.workflow-timeline:not(.timeline-active) .workflow-image,
.workflow-timeline:not(.timeline-active) .timeline-status,
.workflow-timeline:not(.timeline-active) .workflow-step h3,
.workflow-timeline:not(.timeline-active) .workflow-step > p {
  transition: none;
}

.workflow-image {
  height: clamp(210px, 19vw, 310px);
  overflow: hidden;
  margin-bottom: 24px;
  background: #0b2348;
}

.workflow-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.workflow-step:hover .workflow-image img {
  transform: scale(1.035);
}

.workflow-step:first-child .workflow-image img,
.workflow-image-dna img {
  object-fit: contain;
  padding: 10px;
}

.workflow-image-tall img {
  object-position: center 62%;
}

.timeline-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  font-weight: 700;
}

.timeline-status.status-complete {
  border-color: rgba(114, 229, 223, .5);
  color: var(--revamp-cyan);
}

.timeline-status.status-active {
  border-color: var(--revamp-cyan);
  background: var(--revamp-cyan);
  color: var(--revamp-ink);
}

.workflow-step h3 {
  margin-top: 14px !important;
  color: white;
  font-size: clamp(30px, 2.5vw, 42px);
  letter-spacing: -.045em;
  line-height: 1;
}

.workflow-step > p {
  max-width: 28ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* People */

.people-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 36px clamp(28px, 3vw, 54px);
  padding: var(--revamp-space) var(--revamp-gutter);
  background: var(--revamp-paper);
  color: var(--revamp-ink);
}

.people-heading {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 28px;
}

.people-heading h2 {
  max-width: 760px;
  font-size: clamp(56px, 5vw, 88px) !important;
}

.people-heading > p {
  max-width: 620px;
  margin: 0;
  color: var(--revamp-ink);
  font-size: clamp(20px, 1.45vw, 24px) !important;
  font-weight: 700;
  line-height: 1.46 !important;
}

.team-grid {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}

.team-card,
.team-brand-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.team-card {
  display: flex;
  flex-direction: column;
  background: white;
}

.team-photo {
  position: relative;
  flex: 1;
  min-height: 180px;
  overflow: hidden;
  background: #dfe5e4;
}

.team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(.88);
  transition: transform .7s var(--ease), filter .5s ease;
}

.team-card:hover .team-photo img {
  transform: scale(1.025);
  filter: saturate(1);
}

.team-info {
  min-height: 145px;
  padding: 18px 14px;
  border: 1px solid var(--revamp-line);
  border-top: 0;
}

.team-info h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.team-info p {
  margin: 9px 0 0;
  color: var(--revamp-ink);
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.team-brand-tile {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 70% 25%, rgba(114, 229, 223, .2), transparent 34%),
    var(--revamp-blue);
}

.team-brand-tile img {
  width: 100%;
  height: auto;
}

.people-network {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 30px);
  margin-top: 0;
}

.network-group {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--revamp-line);
  background: rgba(255, 255, 255, .72);
}

.network-group h3 {
  margin-bottom: 25px !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.network-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.network-logos a {
  display: grid;
  min-width: 0;
  min-height: 100px;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(7, 19, 35, .1);
  background: white;
  transition: border-color .25s ease, transform .25s var(--ease);
}

.network-logos a:hover {
  border-color: rgba(7, 84, 189, .5);
  transform: translateY(-2px);
}

.network-logos img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
}

.network-logo-aau { max-height: 52px !important; }
.network-logo-infinity { max-height: 56px !important; }
.network-logo-ffe { max-height: 50px !important; }
.network-logo-otto { max-height: 46px !important; }

.network-siemens { gap: 12px; }
.network-siemens span { color: var(--revamp-ink); font-size: 18px; font-weight: 700; }

/* Contact */

.contact-section {
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: clamp(54px, 8vw, 150px);
  overflow: hidden;
  padding: var(--revamp-space) var(--revamp-gutter);
  background: var(--revamp-blue);
  color: white;
}

.contact-section > *:not(.contact-pattern) {
  position: relative;
  z-index: 1;
}

.contact-pattern {
  inset: -20%;
  opacity: .11;
}

.contact-intro h2 {
  max-width: 820px;
  color: white;
}

.contact-intro > p {
  max-width: 580px;
  margin: 34px 0 0;
  color: white;
  font-size: clamp(19px, 1.35vw, 23px) !important;
  line-height: 1.5 !important;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  font-size: 17px;
  font-weight: 700;
}

.contact-form-v4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 24px;
  padding: clamp(34px, 4vw, 60px);
  border-radius: 6px;
  background: white;
  color: var(--revamp-ink);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .2);
}

.contact-form-v4 label {
  display: block;
  min-width: 0;
}

.contact-form-v4 label > span {
  display: block;
  margin-bottom: 11px;
  color: var(--revamp-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

.contact-form-v4 input,
.contact-form-v4 select,
.contact-form-v4 textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 2px 13px;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 35, .34);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--revamp-ink);
  font-size: 17px;
}

.contact-form-v4 textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form-v4 input:focus,
.contact-form-v4 select:focus,
.contact-form-v4 textarea:focus {
  border-color: var(--revamp-blue);
}

.contact-form-v4 .full-field {
  grid-column: 1 / -1;
}

.contact-form-v4 .form-bottom {
  display: flex;
  justify-content: flex-end;
}

.contact-form-v4 .button {
  min-width: 178px;
  padding: 16px 21px;
  font-size: 15px;
}

/* LinkedIn */

.updates-section {
  padding: var(--revamp-space) var(--revamp-gutter);
  background: var(--revamp-paper);
  color: var(--revamp-ink);
}

.updates-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
}

.updates-heading h2 {
  max-width: 900px;
}

.linkedin-follow-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 20px;
  border-radius: 999px;
  background: var(--revamp-blue);
  color: white;
  font-size: 15px;
  font-weight: 700;
  transition: background .25s ease, transform .25s var(--ease);
}

.linkedin-follow-button:hover {
  background: var(--revamp-blue-bright);
  transform: translateY(-2px);
}

.updates-section .linkedin-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 2vw, 30px);
  margin-top: clamp(54px, 6vw, 88px);
}

.updates-section .linkedin-post-card {
  display: flex;
  min-width: 0;
  height: auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--revamp-line);
  border-radius: 12px;
  background: white;
}

.updates-section .linkedin-post-body {
  padding: 22px 22px 18px;
}

.updates-section .linkedin-post-meta,
.linkedin-profile,
.linkedin-shared-head {
  display: flex;
  align-items: center;
}

.updates-section .linkedin-post-meta {
  justify-content: space-between;
}

.linkedin-profile {
  gap: 12px;
}

.linkedin-avatar,
.linkedin-shared-logo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  background: #e9eef7;
}

.linkedin-avatar img,
.linkedin-shared-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linkedin-profile strong,
.linkedin-profile span,
.linkedin-shared-head strong,
.linkedin-shared-head span {
  display: block;
}

.linkedin-profile strong,
.linkedin-shared-head strong {
  font-size: 16px;
}

.linkedin-profile span,
.linkedin-shared-head span {
  margin-top: 3px;
  color: rgba(7, 19, 35, .64);
  font-size: 14px;
}

.linkedin-more {
  color: rgba(7, 19, 35, .48);
}

.linkedin-post-copy {
  margin-top: 19px;
  color: var(--revamp-ink);
  font-size: 15px;
  line-height: 1.56;
}

.linkedin-post-copy p,
.linkedin-shared-copy p {
  margin: 0 0 13px;
  font-size: inherit !important;
}

.linkedin-hashtag {
  color: #0a66c2;
}

.linkedin-media-single,
.linkedin-media-mosaic {
  overflow: hidden;
  background: #e7ebef;
}

.linkedin-media-single {
  aspect-ratio: 16 / 10;
}

.linkedin-media-single img,
.linkedin-media-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linkedin-media-mosaic {
  display: grid;
  height: 310px;
  grid-template-columns: 1.3fr .7fr;
}

.linkedin-media-primary,
.linkedin-media-side,
.linkedin-media-side > div {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.linkedin-media-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  margin-left: 2px;
}

.linkedin-shared-post {
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 35, .16);
  border-radius: 8px;
  background: #f7f8fa;
}

.linkedin-shared-head {
  gap: 12px;
  padding: 16px;
}

.linkedin-shared-copy {
  padding: 0 16px 10px;
  color: rgba(7, 19, 35, .8);
  font-size: 14px;
  line-height: 1.53;
}

.updates-section .linkedin-post-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 17px 20px;
  border-top: 1px solid var(--revamp-line);
  color: #0a66c2;
  font-size: 15px;
  font-weight: 700;
}

/* Footer */

.site-footer-v4 {
  min-height: 220px;
  grid-template-columns: auto 1fr;
  background: var(--revamp-navy);
}

.site-footer-v4 > div {
  justify-content: flex-end;
  flex-wrap: wrap;
  font-size: 14px;
}

/* Responsive */

/* Continuous drift on text-led surfaces; photography supplies its own texture. */
:is(.pigment-copy, .people-section, .updates-section) {
  background-image: linear-gradient(rgba(242,239,232,.92), rgba(242,239,232,.92)), url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
}

:is(.applications-feature, .team-brand-tile) {
  background-image: linear-gradient(rgba(7,84,189,.87), rgba(7,84,189,.87)), url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
}

:is(.workflow-section, .site-footer-v4) {
  background-image: linear-gradient(rgba(3,20,47,.9), rgba(3,20,47,.9)), url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
}

:is(.pigment-copy, .people-section, .updates-section, .applications-feature, .team-brand-tile, .workflow-section, .site-footer-v4) {
  animation: surfacePatternDrift 32s linear infinite;
}

@keyframes surfacePatternDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, -700px 700px; }
}

@media (max-width: 1300px) {
  .people-section { grid-template-columns: 1fr; }
  .people-heading { grid-column: 1; grid-row: 1; }
  .team-grid { grid-column: 1; grid-row: 2; }
  .team-photo { min-height: 240px; }
  .people-network { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1220px) {
  .company-content {
    width: 60%;
  }

  .company-content .section-lead {
    width: 100%;
    margin-left: 0;
  }

  .pigment-section {
    grid-template-columns: 49% 51%;
  }

  .applications-feature {
    grid-template-columns: 55% 45%;
  }

  .updates-section .linkedin-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .site-nav {
    font-size: 18px;
  }

  .company-section {
    min-height: 920px;
    align-items: start;
    padding-top: 120px;
  }

  .company-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .company-content h2 {
    max-width: none;
    font-size: clamp(48px, 8vw, 72px) !important;
  }

  .company-content .section-lead {
    width: 100%;
    max-width: 36ch;
    margin-left: 0;
  }

  .depth-image img {
    left: 48%;
    width: 205vw;
  }

  .depth-image-front {
    clip-path: none;
  }

  .pigment-section {
    grid-template-columns: 1fr;
  }

  .pigment-visual,
  .pigment-copy {
    min-height: 680px;
  }

  .pigment-fungus {
    width: min(150%, 1080px);
  }

  .pigment-visual {
    overflow: hidden;
  }

  .applications-feature {
    grid-template-columns: 1fr;
  }

  .applications-photo {
    min-height: 640px;
    grid-column: 1;
    grid-row: 1;
  }

  .applications-content {
    position: relative;
    z-index: 2;
    min-height: 740px;
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-end;
    background: linear-gradient(0deg, rgba(3, 20, 47, .96) 0%, rgba(3, 20, 47, .58) 56%, rgba(3, 20, 47, .08) 100%);
  }

  .applications-content h2 {
    max-width: 9ch;
  }

  .application-card {
    min-height: 620px;
  }

  .timeline-scroll {
    overflow-x: auto;
    padding-bottom: 18px;
    scrollbar-color: var(--revamp-cyan) rgba(255, 255, 255, .12);
  }

  .people-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
  }

  .people-section {
    grid-template-columns: 1fr;
  }

  .people-network {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-heading > p {
    max-width: 680px;
  }

  .contact-section {
    grid-template-columns: 1fr;
  }

  .contact-intro {
    max-width: 760px;
  }

  .updates-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  main > section:not(.hero) h2 {
    font-size: clamp(48px, 14vw, 74px);
  }

  main > section:not(.hero) .section-lead {
    font-size: 20px;
  }

  .hero-actions .button {
    font-size: 14px !important;
  }

  .linkedin-rail {
    display: none;
  }

  .company-section {
    min-height: 860px;
    padding: 100px 22px 70px;
  }

  .company-content h2 {
    font-size: clamp(49px, 13vw, 68px) !important;
    white-space: normal;
  }

  .company-line {
    width: auto;
    margin-left: 0;
  }

  .company-content .section-lead {
    width: auto;
    max-width: 26ch;
    margin-left: 0;
    font-size: 20px;
  }

  .depth-image img {
    left: 45%;
    width: 238vw;
  }

  .depth-image-front {
    clip-path: none;
  }

  .pigment-visual {
    min-height: 540px;
  }

  .pigment-fungus {
    left: 45%;
    width: 176%;
  }

  .pigment-copy {
    min-height: 620px;
    padding: 84px 22px;
  }

  .pigment-facts strong {
    font-size: 15px;
  }

  .applications-photo,
  .applications-content {
    min-height: 760px;
  }

  .applications-content {
    padding: 80px 22px;
  }

  .applications-grid {
    grid-template-columns: 1fr;
  }

  .application-card {
    min-height: 570px;
  }

  .application-card h3 {
    right: 24px;
    bottom: 30px;
    left: 24px;
    font-size: clamp(40px, 12vw, 62px);
  }

  .workflow-section,
  .people-section,
  .contact-section,
  .updates-section {
    padding-right: 22px;
    padding-left: 22px;
  }

  .workflow-heading > p {
    font-size: 20px !important;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .team-photo { min-height: 200px; }

  .team-info {
    min-height: 112px;
    padding: 18px 14px 20px;
  }

  .team-info h3 {
    font-size: 21px;
  }

  .team-brand-tile {
    min-height: 320px;
  }

  .people-network,
  .network-logos,
  .updates-section .linkedin-post-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-v4 {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px;
  }

  .contact-form-v4 .full-field {
    grid-column: auto;
  }

  .linkedin-follow-button {
    width: 100%;
  }

  .linkedin-media-mosaic {
    height: 300px;
  }

  .site-footer-v4 {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-footer-v4 > div {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.pigment-copy, .people-section, .updates-section, .applications-feature, .team-brand-tile, .workflow-section, .site-footer-v4) {
    animation: none;
  }
  .application-card img,
  .team-photo img,
  .workflow-image img,
  .workflow-timeline::after,
  .workflow-marker::after,
  .workflow-image,
  .workflow-step .timeline-status,
  .workflow-step h3,
  .workflow-step > p {
    transition: none !important;
  }
}

/* Requested narrative/layout refinements — corrected 2026-09-15 */
.company-content {
  width: 68%;
}

.company-content h2 {
  display: block;
  max-width: none;
  font-size: clamp(32px, 3.85vw, 62px) !important;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.company-content .section-lead {
  max-width: 44ch;
}

.pigment-section {
  grid-template-columns: 44% 56%;
}

.pigment-visual {
  overflow: hidden;
}

.pigment-copy {
  z-index: 3;
  padding-right: clamp(46px, 5vw, 92px);
  padding-left: clamp(70px, 7vw, 132px);
}

.pigment-copy h2 {
  max-width: none;
  font-size: clamp(46px, 4vw, 66px) !important;
  white-space: nowrap;
}

.pigment-copy .section-lead {
  max-width: 36ch;
}

/* One integrated applications composition: copy, dominant solar image, and two stacked use-case images. */
.applications-section {
  display: grid;
  min-height: clamp(780px, 100svh, 980px);
  grid-template-columns: minmax(0, 34fr) minmax(0, 42fr) minmax(270px, 24fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
}

.applications-feature,
.applications-grid {
  display: contents;
}

.applications-content {
  min-height: 0;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-content: center;
  padding: clamp(70px, 7vw, 120px) clamp(42px, 5vw, 86px);
  background: var(--revamp-blue);
}

.applications-photo {
  min-height: 0;
  grid-column: 2;
  grid-row: 1 / 3;
}

.applications-image {
  transform: scale(1.08);
  transform-origin: center center;
}

.applications-content h2 {
  max-width: 9ch;
  font-size: clamp(52px, 5.35vw, 90px) !important;
}

.applications-content .section-lead {
  max-width: 29ch;
}

.application-card {
  min-height: 0;
  background: #020b18;
}

.application-card:first-child {
  grid-column: 3;
  grid-row: 1;
}

.application-card:last-child {
  grid-column: 3;
  grid-row: 2;
}

.application-card h3 {
  right: clamp(22px, 2.3vw, 42px);
  bottom: clamp(24px, 2.6vw, 46px);
  left: clamp(22px, 2.3vw, 42px);
  max-width: 9ch;
  font-size: clamp(31px, 2.55vw, 48px);
}

/* Timeline: transparent artwork, one DNA strand, and readable supporting copy. */
.workflow-heading {
  max-width: none;
}

.workflow-heading h2 {
  max-width: none;
  font-size: clamp(48px, 4.9vw, 78px) !important;
  white-space: nowrap;
}

.workflow-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 0;
  box-shadow: none;
  background: transparent !important;
}

.workflow-image img,
.workflow-step:first-child .workflow-image img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

.workflow-image-dna {
  justify-content: flex-start;
  overflow: hidden;
  background: transparent !important;
}

.workflow-image-dna img {
  width: 210%;
  max-width: none;
  height: auto;
  max-height: 100%;
  padding: 0;
  flex: 0 0 auto;
  object-fit: unset;
  transform: none;
}

.workflow-image-tall img {
  object-position: center;
}

.workflow-step > p {
  max-width: 23ch;
  margin-top: 18px;
  color: #fff;
  font-size: clamp(20px, 1.35vw, 24px) !important;
  font-weight: 700;
  line-height: 1.38 !important;
}

@media (max-width: 1220px) {
  .company-content { width: 72%; }
  .pigment-section { grid-template-columns: 42% 58%; }
  .pigment-copy { padding-left: clamp(54px, 6vw, 88px); }
  .pigment-copy h2 { font-size: clamp(42px, 4.3vw, 58px) !important; }

  .applications-section {
    grid-template-columns: minmax(0, 35fr) minmax(0, 41fr) minmax(240px, 24fr);
  }
  .application-card h3 {
    font-size: clamp(28px, 2.7vw, 42px);
  }
}

@media (max-width: 980px) {
  .company-content { width: 100%; }
  .company-content h2 {
    font-size: clamp(30px, 5.9vw, 48px) !important;
  }

  .pigment-section { grid-template-columns: 1fr; }
  .pigment-copy { padding: 88px clamp(34px, 7vw, 64px); }
  .pigment-copy h2 {
    font-size: clamp(42px, 7vw, 58px) !important;
  }

  .applications-section {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(720px, 88svh) minmax(430px, 52svh);
  }
  .applications-feature,
  .applications-grid {
    display: contents;
  }
  .applications-photo,
  .applications-content {
    min-height: 0;
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .applications-content {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    background: linear-gradient(0deg, rgba(3, 20, 47, .96) 0%, rgba(3, 20, 47, .58) 56%, rgba(3, 20, 47, .08) 100%);
  }
  .applications-content h2 {
    max-width: 9ch;
    font-size: clamp(50px, 9vw, 76px) !important;
  }
  .application-card:first-child {
    grid-column: 1;
    grid-row: 2;
  }
  .application-card:last-child {
    grid-column: 2;
    grid-row: 2;
  }
  .application-card h3 {
    font-size: clamp(34px, 5vw, 52px);
  }
}

@media (max-width: 680px) {
  .company-content h2 {
    font-size: clamp(23px, 6.35vw, 38px) !important;
    letter-spacing: -.045em;
  }

  .pigment-copy { padding: 82px 22px; }
  .pigment-copy h2 {
    font-size: clamp(27px, 7.4vw, 42px) !important;
  }

  .applications-section {
    display: block;
  }
  .applications-feature {
    display: grid;
  }
  .applications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .applications-photo,
  .applications-content {
    min-height: 760px;
    grid-column: 1;
    grid-row: 1;
  }
  .application-card:first-child,
  .application-card:last-child {
    min-height: 500px;
    grid-column: auto;
    grid-row: auto;
  }
  .application-card h3 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .workflow-heading h2 {
    font-size: clamp(27px, 7.4vw, 42px) !important;
  }
  .workflow-step > p {
    font-size: 20px !important;
  }
}


/* Requested refinement pass — 2026-09-15 follow-up */
.company-section {
  --company-safe-shift: 0px;
}

.company-content {
  width: min(60%, 860px);
  margin-inline: auto 0;
  padding-right: clamp(16px, 2.8vw, 42px);
}

.company-content h2 {
  font-size: clamp(62px, 6.15vw, 106px) !important;
  line-height: .92;
}

.company-content .section-lead {
  max-width: 31ch;
  margin-top: clamp(24px, 2.6vw, 42px);
  margin-left: var(--company-safe-shift);
  position: relative;
  z-index: 4;
}

/* Restore the fungus spill into the copy panel. */
.pigment-section {
  grid-template-columns: 41% 59%;
  overflow: visible;
}

.pigment-visual {
  overflow: visible;
  z-index: 3;
}

.pigment-copy {
  z-index: 1;
  padding-left: clamp(82px, 7vw, 140px);
}

.pigment-fungus {
  left: 63%;
  width: 132%;
}

/* Applications: patterned background, text on the left, stacked use-cases in the middle, main solar photo on the right. */
.applications-section {
  display: grid;
  min-height: clamp(780px, 100svh, 980px);
  grid-template-columns: minmax(0, 31fr) minmax(260px, 23fr) minmax(0, 46fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background-image: linear-gradient(rgba(7,84,189,.82), rgba(7,84,189,.82)), url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
  animation: surfacePatternDrift 32s linear infinite;
}

.applications-content {
  grid-column: 1;
  grid-row: 1 / 3;
  background-image: linear-gradient(rgba(7,84,189,.89), rgba(7,84,189,.89)), url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
}

.applications-photo {
  grid-column: 3;
  grid-row: 1 / 3;
}

.application-card:first-child {
  grid-column: 2;
  grid-row: 1;
}

.application-card:last-child {
  grid-column: 2;
  grid-row: 2;
}

.application-card h3 {
  max-width: 8.5ch;
}

/* Timeline: circular frames with bright pads and shadowed artwork. */
.workflow-timeline {
  align-items: start;
  gap: 0;
}

.workflow-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 16px;
}

.workflow-image {
  width: clamp(184px, 14.8vw, 238px);
  height: clamp(184px, 14.8vw, 238px);
  margin: 0 auto 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #ecfeff 46%, #b2eef4 100%) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .82);
  overflow: hidden;
}

.workflow-image img,
.workflow-step:first-child .workflow-image img {
  width: auto;
  max-width: 78%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 22px rgba(3, 20, 47, .34));
}

.workflow-image-dna {
  justify-content: center;
}

.workflow-image-dna img {
  width: auto;
  max-width: 62%;
  height: auto;
  max-height: 84%;
  object-fit: contain;
}

.workflow-image-tall img {
  max-width: 56%;
  max-height: 84%;
}

.workflow-step h3 {
  width: 100%;
  margin-top: 6px !important;
}

.workflow-step > p {
  max-width: 18ch;
  margin-top: 12px;
}

@media (max-width: 1280px) {
  .company-content {
    width: min(63%, 820px);
  }

  .pigment-section {
    grid-template-columns: 40% 60%;
  }

  .pigment-copy {
    padding-left: clamp(66px, 6vw, 104px);
  }

  .pigment-fungus {
    left: 61%;
    width: 138%;
  }

  .applications-section {
    grid-template-columns: minmax(0, 32fr) minmax(230px, 23fr) minmax(0, 45fr);
  }
}

@media (max-width: 1100px) {
  .company-content {
    width: min(66%, 760px);
  }

  .company-content h2 {
    font-size: clamp(54px, 5.8vw, 84px) !important;
  }

  .pigment-section {
    grid-template-columns: 1fr;
  }

  .pigment-visual {
    min-height: 560px;
    overflow: hidden;
  }

  .pigment-fungus {
    left: 52%;
    width: min(144%, 1120px);
  }

  .pigment-copy {
    padding: 84px clamp(30px, 6vw, 60px);
  }

  .applications-section {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(700px, 84svh) minmax(310px, 38svh) minmax(310px, 38svh);
  }

  .applications-photo,
  .applications-content {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .applications-content {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    background-image: linear-gradient(0deg, rgba(3, 20, 47, .95) 0%, rgba(3, 20, 47, .55) 56%, rgba(3, 20, 47, .08) 100%), url("assets/mycelium-pattern.png");
    background-size: auto, 700px;
  }

  .application-card:first-child {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .application-card:last-child {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .workflow-image {
    width: clamp(168px, 16vw, 220px);
    height: clamp(168px, 16vw, 220px);
  }
}

@media (max-width: 900px) {
  .company-content {
    width: 100%;
  }

  .company-content h2 {
    font-size: clamp(50px, 7.6vw, 74px) !important;
    white-space: normal;
  }

  .company-content .section-lead {
    max-width: 27ch;
  }

  .pigment-copy {
    padding: 82px clamp(24px, 6vw, 40px);
  }

  .pigment-copy h2 {
    white-space: normal;
  }

  .workflow-step {
    padding: 0 12px;
  }
}

@media (max-width: 680px) {
  .company-content h2 {
    font-size: clamp(42px, 11vw, 58px) !important;
    white-space: normal;
  }

  .company-content .section-lead {
    max-width: 24ch;
    margin-left: 0;
  }

  .applications-section {
    display: block;
  }

  .applications-feature {
    display: grid;
  }

  .applications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .application-card:first-child,
  .application-card:last-child {
    min-height: 500px;
    grid-column: auto;
    grid-row: auto;
  }
}


/* First section positioning refinement — 2026-09-15 */
.company-content {
  width: min(53%, 780px);
  margin: 0 auto;
  transform: translateX(clamp(20px, 2.6vw, 42px));
}

.company-content .section-lead {
  margin-left: calc(var(--company-safe-shift) * .45);
}

@media (max-width: 1280px) {
  .company-content {
    width: min(56%, 760px);
    transform: translateX(clamp(14px, 2.1vw, 28px));
  }
}

@media (max-width: 1100px) {
  .company-content {
    width: min(62%, 720px);
    transform: translateX(clamp(10px, 1.7vw, 18px));
  }
}

@media (max-width: 900px) {
  .company-content {
    width: 100%;
    margin: 0;
    transform: none;
  }

  .company-content .section-lead {
    margin-left: 0;
  }
}


/* First section fine-tune — 2026-09-15 */
.company-section .depth-image img {
  width: max(94%, min(110vw, 1740px));
}

.company-content {
  width: min(50%, 740px);
  transform: translateX(clamp(54px, 4.8vw, 84px));
}

.company-content .section-lead {
  margin-left: calc(var(--company-safe-shift) * .32);
}

@media (max-width: 1280px) {
  .company-section .depth-image img {
    width: max(98%, min(116vw, 1720px));
  }

  .company-content {
    width: min(54%, 730px);
    transform: translateX(clamp(38px, 3.8vw, 58px));
  }
}

@media (max-width: 1100px) {
  .company-content {
    width: min(58%, 700px);
    transform: translateX(clamp(24px, 2.4vw, 34px));
  }
}

@media (max-width: 900px) {
  .company-section .depth-image img {
    width: 205vw;
  }

  .company-content {
    width: 100%;
    transform: none;
  }

  .company-content .section-lead {
    margin-left: 0;
  }
}


/* First section single-line heading refinement — 2026-09-15 */
.company-section .depth-image img {
  left: 43%;
  width: max(88%, min(102vw, 1580px));
}

.company-content {
  width: min(72%, 1120px);
  margin: 0 auto;
  padding-right: 0;
  transform: translateX(clamp(52px, 4vw, 92px));
}

.company-content h2 {
  font-size: clamp(40px, 4.35vw, 82px) !important;
  white-space: nowrap;
  line-height: .94;
}

.company-content .section-lead {
  max-width: 22ch;
  margin-top: clamp(18px, 2.2vw, 34px);
  margin-left: 0;
}

@media (max-width: 1280px) {
  .company-section .depth-image img {
    left: 44%;
    width: max(92%, min(108vw, 1600px));
  }

  .company-content {
    width: min(76%, 1060px);
    transform: translateX(clamp(34px, 3vw, 58px));
  }

  .company-content h2 {
    font-size: clamp(34px, 4vw, 66px) !important;
  }
}

@media (max-width: 1050px) {
  .company-content {
    width: min(82%, 980px);
    transform: translateX(clamp(18px, 1.8vw, 28px));
  }

  .company-content h2 {
    font-size: clamp(30px, 3.6vw, 52px) !important;
  }
}

@media (max-width: 900px) {
  .company-section .depth-image img {
    left: 48%;
    width: 205vw;
  }

  .company-content {
    width: 100%;
    margin: 0;
    transform: none;
  }

  .company-content h2 {
    white-space: normal;
  }
}


/* Company section acceptance pass — keep all copy above the fungal artwork. */
.company-section {
  --company-safe-shift: 0px !important;
}

.company-section .depth-image img {
  left: 50%;
  width: 126vw;
  min-width: 100%;
  max-width: none;
  transform: translateX(-50%);
}

.company-section .depth-image-back img {
  -webkit-mask-image: none;
  mask-image: none;
}

.company-section .depth-image-front {
  display: none;
}

.company-content {
  position: relative;
  z-index: 4;
  width: fit-content;
  max-width: calc(100vw - (2 * var(--revamp-gutter)));
  margin: 0 auto;
  padding: 0;
  transform: translateX(clamp(36px, 4.5vw, 86px));
}

.company-content h2 {
  display: block;
  max-width: none;
  font-size: clamp(36px, 3.8vw, 74px) !important;
  line-height: .94;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.company-content .section-lead {
  max-width: 34ch;
  margin: clamp(24px, 2.5vw, 40px) 0 0;
  position: relative;
  z-index: 5;
}

@media (max-width: 900px) {
  .company-section {
    min-height: 900px;
    align-items: center;
    padding-top: var(--revamp-space);
  }

  .company-section .depth-image img {
    left: 50%;
    width: 126vw;
  }

  .company-content {
    width: fit-content;
    max-width: calc(100vw - 48px);
    margin: 0 auto;
    transform: translateX(clamp(20px, 4vw, 36px));
  }

  .company-content h2 {
    font-size: clamp(34px, 3.8vw, 44px) !important;
    white-space: nowrap;
  }

  .company-content .section-lead {
    max-width: 31ch;
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .company-section {
    min-height: 780px;
    padding-right: 22px;
    padding-left: 22px;
  }

  .company-content {
    max-width: calc(100vw - 44px);
    transform: none;
  }

  .company-content h2 {
    font-size: clamp(16px, 4.4vw, 30px) !important;
    white-space: nowrap;
  }

  .company-content .section-lead {
    max-width: 27ch;
  }
}

/* v8 — company image quality correction */
.company-section .depth-image img {
  left: 50%;
  width: 100.5vw;
  min-width: 100%;
  max-width: none;
  transform: translateX(-50%);
}

.company-content {
  z-index: 4;
}

@media (max-width: 900px) {
  .company-section .depth-image img {
    left: 50%;
    width: 112vw;
  }
}

/* v8 — restore the xylindein composition from the supplied reference site */
.pigment-section {
  display: grid;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(780px, 92svh, 980px);
  grid-template-columns: 54% 46%;
  background: var(--revamp-paper);
  color: var(--revamp-ink);
}

.pigment-visual {
  position: relative;
  z-index: 2;
  min-height: inherit;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 56%, rgba(9, 85, 147, .46), transparent 38%),
    linear-gradient(145deg, #020b18, #041a3d 72%);
}

.pigment-fungus {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 116%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .4));
}

.pigment-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  justify-content: center;
  padding: var(--revamp-space) clamp(42px, 6vw, 112px);
  background-image: linear-gradient(rgba(242,239,232,.92), rgba(242,239,232,.92)), url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
}

.pigment-copy h2 {
  max-width: 8ch;
  font-size: clamp(56px, 6.5vw, 112px) !important;
  white-space: normal;
}

.pigment-copy .section-lead {
  max-width: 31ch;
  margin: clamp(32px, 4vw, 56px) 0 0;
  color: var(--revamp-ink);
}

@media (max-width: 1220px) {
  .pigment-section {
    grid-template-columns: 49% 51%;
  }
}

@media (max-width: 900px) {
  .pigment-section {
    grid-template-columns: 1fr;
  }

  .pigment-visual,
  .pigment-copy {
    min-height: 680px;
  }

  .pigment-fungus {
    left: 50%;
    width: min(150%, 1080px);
  }

  .pigment-visual {
    overflow: hidden;
  }

  .pigment-copy {
    padding: var(--revamp-space) clamp(42px, 6vw, 112px);
  }
}

@media (max-width: 680px) {
  .pigment-visual {
    min-height: 540px;
  }

  .pigment-fungus {
    left: 45%;
    width: 176%;
  }

  .pigment-copy {
    min-height: 620px;
    padding: 84px 22px;
  }

  .pigment-copy h2 {
    font-size: clamp(48px, 14vw, 74px) !important;
  }
}

/* v8 — integrated solar applications layout */
.applications-section {
  display: grid;
  min-height: clamp(780px, 100svh, 980px);
  grid-template-columns: minmax(0, 31fr) minmax(250px, 23fr) minmax(0, 46fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--revamp-blue);
  color: white;
}

.applications-feature,
.applications-grid {
  display: contents;
}

.applications-content {
  min-height: 0;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-content: center;
  padding: clamp(70px, 7vw, 120px) clamp(42px, 5vw, 86px);
  background-image:
    linear-gradient(rgba(7,84,189,.88), rgba(7,84,189,.88)),
    url("assets/mycelium-pattern.png");
  background-size: auto, 700px;
  background-position: 0 0, 0 0;
  animation: applicationsPatternDrift 30s linear infinite;
}

@keyframes applicationsPatternDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, -700px 700px; }
}

.applications-photo {
  min-height: 0;
  grid-column: 3;
  grid-row: 1 / 3;
}

.applications-image {
  transform: scale(1.08);
  transform-origin: center center;
}

.application-card {
  position: relative;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.application-card:first-child {
  grid-column: 2;
  grid-row: 1;
}

.application-card:last-child {
  grid-column: 2;
  grid-row: 2;
}

.application-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.application-card:first-child img {
  object-position: center 46%;
}

.application-card:last-child img {
  object-position: center 30%;
}

.application-card::after {
  background: linear-gradient(0deg, rgba(3, 20, 47, .78) 0%, rgba(3, 20, 47, .16) 42%, transparent 72%);
}

.application-card h3 {
  right: clamp(22px, 2.3vw, 42px);
  bottom: clamp(24px, 2.6vw, 46px);
  left: clamp(22px, 2.3vw, 42px);
  max-width: 9ch;
  font-size: clamp(31px, 2.55vw, 48px);
}

@media (max-width: 1100px) {
  .applications-section {
    grid-template-columns: minmax(0, 32fr) minmax(220px, 25fr) minmax(0, 43fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .applications-photo {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .applications-content {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-content: center;
  }

  .application-card:first-child {
    grid-column: 2;
    grid-row: 1;
  }

  .application-card:last-child {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .applications-section {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(720px, 88svh) minmax(440px, 52svh) minmax(440px, 52svh);
  }

  .applications-photo,
  .applications-content {
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .applications-content {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    background-image:
      linear-gradient(0deg, rgba(3, 20, 47, .95) 0%, rgba(3, 20, 47, .56) 56%, rgba(3, 20, 47, .08) 100%),
      url("assets/mycelium-pattern.png");
  }

  .application-card:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .application-card:last-child {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 680px) {
  .applications-section {
    display: grid;
  }

  .applications-feature,
  .applications-grid {
    display: contents;
  }
}

@media (prefers-reduced-motion: reduce) {
  .applications-content {
    animation: none;
  }
}

/* v8 — timeline alignment and final artwork */
.workflow-step {
  align-items: center;
  text-align: center;
}

.workflow-image {
  margin-right: auto;
  margin-left: auto;
}

.workflow-step .timeline-status {
  align-self: center;
}

.workflow-step h3 {
  width: 100%;
  text-align: center;
}

.workflow-step > p {
  width: 100%;
  max-width: 22ch;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.workflow-image-dna img {
  width: auto;
  max-width: 68%;
  height: auto;
  max-height: 84%;
  object-fit: contain;
  transform: none;
}

.workflow-image-solar img {
  width: auto;
  max-width: 92%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  transform: none;
}


/* v9 — focused refinements requested 2026-09-15 */

/* Company / fungal pigments: use the supplied transparent artwork smaller,
   while keeping the copy dominant and centered above it. */
.company-section {
  min-height: clamp(820px, 100svh, 1040px);
  align-items: center;
}

.company-section .depth-image img {
  left: 50%;
  bottom: -1px;
  width: min(64vw, 1220px);
  min-width: 0;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

.company-content {
  width: min(94vw, 1580px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  transform: none;
  text-align: center;
}

.company-content h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(58px, 5.15vw, 102px) !important;
  line-height: .9;
  letter-spacing: -.06em;
  white-space: nowrap;
  text-align: center;
}

.company-content .section-lead {
  max-width: 40ch;
  margin: clamp(26px, 2.6vw, 42px) auto 0;
  color: #fff;
  font-size: clamp(25px, 1.75vw, 34px) !important;
  font-weight: 700;
  line-height: 1.34 !important;
  text-align: center;
}

@media (max-width: 1280px) {
  .company-section .depth-image img {
    width: min(66vw, 1040px);
  }

  .company-content h2 {
    font-size: clamp(50px, 4.7vw, 72px) !important;
  }

  .company-content .section-lead {
    font-size: clamp(23px, 1.9vw, 29px) !important;
  }
}

@media (max-width: 1000px) {
  .company-section .depth-image img {
    width: min(74vw, 820px);
  }

  .company-content {
    width: calc(100vw - 48px);
  }

  .company-content h2 {
    font-size: clamp(39px, 4.5vw, 52px) !important;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .company-section .depth-image img {
    width: 96vw;
  }

  .company-content h2 {
    font-size: clamp(28px, 6.25vw, 46px) !important;
    white-space: normal;
  }

  .company-content .section-lead {
    max-width: 28ch;
    font-size: 21px !important;
  }
}

/* Timeline artwork scale-up inside unchanged circular frames. */
.workflow-step:first-child .workflow-image img {
  width: 118%;
  max-width: none;
  height: auto;
  max-height: none;
  transform: translateY(5%);
}

.workflow-image-dna img {
  width: 102%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: none;
}

.workflow-image-tall img {
  width: 80%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: translateY(1%);
}

/* Team cards: photo crop touches the info panel, and both columns share one bottom edge. */
.people-section {
  align-items: stretch;
}

.team-grid {
  align-self: stretch;
  height: 100%;
}

.team-card {
  gap: 0;
}

.team-photo {
  margin: 0;
  padding: 0;
}

.team-photo img {
  bottom: 0;
  display: block;
}

.team-info {
  position: relative;
  z-index: 2;
  margin: 0;
}

.people-network {
  align-self: stretch;
  margin-bottom: 0;
}

.people-network .network-group:last-child {
  margin-bottom: 0;
}


/* v10 — requested refinements 2026-09-15 */

/* Company section: push copy higher, enlarge headline and subheadline, enlarge supplied fungus image. */
.company-section {
  padding-top: clamp(92px, 10vh, 134px);
  align-items: start;
}

.company-content {
  width: min(96vw, 1680px);
  transform: translateY(clamp(24px, 2vh, 38px));
}

.company-content h2 {
  font-size: clamp(74px, 6.35vw, 128px) !important;
  line-height: .9;
}

.company-content .section-lead {
  max-width: 31ch;
  margin-top: clamp(18px, 1.8vw, 30px);
  font-size: clamp(31px, 2.15vw, 42px) !important;
  line-height: 1.28 !important;
}

.company-section .depth-image img {
  width: min(108vw, 2050px);
}

@media (max-width: 1280px) {
  .company-content h2 {
    font-size: clamp(58px, 5.7vw, 96px) !important;
  }

  .company-content .section-lead {
    font-size: clamp(25px, 2.05vw, 34px) !important;
  }

  .company-section .depth-image img {
    width: min(114vw, 1720px);
  }
}

@media (max-width: 1000px) {
  .company-section {
    padding-top: 108px;
  }

  .company-content {
    transform: translateY(8px);
  }

  .company-content h2 {
    font-size: clamp(42px, 5.4vw, 68px) !important;
  }

  .company-content .section-lead {
    font-size: clamp(22px, 2.2vw, 28px) !important;
  }

  .company-section .depth-image img {
    width: min(126vw, 1400px);
  }
}

/* Timeline: tune individual artwork scales inside the same circular frames. */
.workflow-step:first-child .workflow-image img {
  width: 104%;
  transform: translateY(5%);
}

.workflow-image-dna img {
  width: 54%;
  max-width: none;
  max-height: none;
}

.workflow-step:nth-child(3) .workflow-image img {
  width: 88%;
  max-width: none;
  max-height: none;
}

.workflow-image-tall img {
  width: 94%;
  max-width: none;
  max-height: none;
  transform: translateY(1%);
}

/* People section: make portraits touch the info cards and align the full team block height with the left-side panels. */
.people-section {
  grid-template-rows: auto 1fr;
}

.team-grid {
  align-self: stretch;
  align-content: stretch;
  grid-auto-rows: 1fr;
  height: 100%;
}

.team-card,
.team-brand-tile {
  height: 100%;
}

.team-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.team-photo {
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 0;
  background: transparent;
}

.team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.team-info {
  margin-top: 0;
}

.people-network {
  align-self: stretch;
  height: 100%;
}

.network-group {
  display: flex;
  flex-direction: column;
}


/* v11 — final requested refinements 2026-09-15 */

/* Company section: give the description more horizontal room and let the front fungus overlap the text again. */
.company-content {
  z-index: 2;
  width: min(98vw, 1760px);
}

.depth-image-front {
  z-index: 3;
}

.company-content .section-lead {
  width: min(90vw, 1120px);
  max-width: 44ch;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1280px) {
  .company-content .section-lead {
    width: min(92vw, 980px);
    max-width: 42ch;
  }
}

@media (max-width: 1000px) {
  .company-content .section-lead {
    width: min(94vw, 880px);
    max-width: 40ch;
  }
}

/* Timeline: rebalance the four requested image scales. */
.workflow-step:first-child .workflow-image img {
  width: 88%;
  max-width: none;
  max-height: none;
  transform: translateY(4%);
}

.workflow-image-dna img {
  width: 62%;
  max-width: none;
  max-height: none;
  transform: none;
}

.workflow-step:nth-child(3) .workflow-image img {
  width: 97%;
  max-width: none;
  max-height: none;
}

.workflow-image-tall img {
  width: 56%;
  max-width: none;
  max-height: none;
  transform: translateY(1%);
}

/* Team cards: remove any space between portrait bottoms and the name/title frames. */
.team-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.team-photo {
  flex: 0 0 auto;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
}

.team-photo img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  margin: 0;
}

.team-info {
  margin-top: 0;
}


/* v12 — targeted layering + team-geometry correction */

/* Company depth stack: restore the masked front copy of the fungus above the text. */
.company-section .depth-image-back {
  display: block;
  z-index: 1;
}

.company-section .depth-image-back img {
  -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 45%);
  mask-image: linear-gradient(to right, transparent 45%, #000 45%);
}

.company-section .company-content {
  position: relative;
  z-index: 2;
}

.company-section .depth-image-front {
  display: block;
  z-index: 3;
}

.company-section .depth-image-front img {
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 45%);
  mask-image: linear-gradient(to right, #000 45%, transparent 45%);
}

/* Team geometry: restore the successful v9 outer layout exactly; only portrait cropping is internal. */
.people-section {
  grid-template-rows: auto auto;
}

.team-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: normal;
  align-self: stretch;
  height: 100%;
}

.team-card,
.team-brand-tile {
  height: auto;
}

.team-card {
  display: flex;
  flex-direction: column;
  justify-content: normal;
  gap: 0;
}

.team-photo {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 180px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: normal;
  background: #dfe5e4;
}

.team-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center bottom;
}

.team-info {
  flex: 0 0 auto;
  margin: 0;
}

.people-network {
  align-self: stretch;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
}

.network-group {
  display: block;
}

/* v12 visual verification adjustment: raise both depth copies so the foreground fungus intersects the copy. */
.company-section .depth-image img {
  bottom: clamp(145px, 15vh, 190px);
}

/* Portrait artwork slightly overfills its crop so opaque pixels meet the info frame edge. */
.team-photo img {
  bottom: -2px;
  top: auto;
  height: calc(100% + 2px);
}

/* Replace the temporary vertical lift with bottom-anchored scale so the photograph still reaches the section edge. */
.company-section .depth-image img {
  bottom: -1px;
  width: min(132vw, 2280px);
}

/* Final depth composition: keep copy centered and move the fungus composition under it so the front mask can visibly overlap the description. */
.company-section .depth-image img {
  left: 64%;
}


/* v13 — surgical corrections: centered fungal image + restored v9 team geometry. */

/* Keep the established depth stack, center the photograph, and reduce the v12 over-scale. */
.company-section .depth-image img {
  left: 50%;
  bottom: -1px;
  width: min(108vw, 1900px);
  transform: translateX(-50%);
}

.company-section .depth-image-back { z-index: 1; }
.company-section .company-content { z-index: 2; }
.company-section .depth-image-front { z-index: 3; }

/* Restore the successful v9 outer team geometry exactly. */
.people-section {
  grid-template-rows: none;
  align-items: stretch;
}

.team-grid {
  grid-column: 2;
  grid-row: 1 / 3;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-self: auto;
  align-content: normal;
  height: auto;
  gap: 14px;
  margin-top: 0;
}

.people-network {
  grid-column: 1;
  grid-row: 2;
  align-self: auto;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
}

.team-card,
.team-brand-tile {
  height: auto;
}

/* Internal portrait treatment only: trimmed PNGs remove transparent bottom padding. */
.team-card {
  display: flex;
  flex-direction: column;
  justify-content: normal;
  gap: 0;
}

.team-photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: #dfe5e4;
}

.team-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center bottom;
  transform: none;
}

.team-card:hover .team-photo img {
  transform: scale(1.025);
  transform-origin: center bottom;
}

.team-info {
  flex: 0 0 auto;
  margin: 0;
}

/* v13 final company overlap: widen the centered description so the centered foreground fungus crosses it naturally. */
.company-content .section-lead {
  width: min(94vw, 1320px);
  max-width: 54ch;
}

@media (max-width: 1280px) {
  .company-content .section-lead {
    width: min(94vw, 1120px);
    max-width: 50ch;
  }
}


/* v15 — lift the complete left side of Meet the team without conflicting with data-reveal transforms. */
.people-heading,
.people-network {
  position: relative;
  top: -25px;
}


/* v17 — exact desktop bottom-edge correction for the team name/title frames. */
@media (min-width: 1750px) {
  .team-info {
    min-height: 143px;
  }
}


/* v18 — visual bottom-edge alignment of the second-row team name plates. */
@media (min-width: 1301px) {
  .team-card:nth-child(5) .team-info,
  .team-card:nth-child(6) .team-info,
  .team-card:nth-child(7) .team-info {
    min-height: 160px;
    margin-bottom: -17px;
  }


.team-brand-tile {
  min-height: 0 !important;
  height: calc(100%) !important;
  align-self: end;
  position: relative;
  top: -25px;
}
/* LinkedIn cards: use the native system UI font stack, matching LinkedIn's platform-native feel. */
.updates-section .linkedin-post-card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

}

/* Mobile portrait refinement — desktop rules above remain untouched. */
@media (max-width: 767px) {
  :root {
    --mobile-pad: 20px;
  }

  html, body {
    overflow-x: hidden;
  }

  main > section:not(.hero) {
    scroll-margin-top: 68px;
  }

  main > section:not(.hero) h2 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
  }

  main > section:not(.hero) .section-lead {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }

  .site-header {
    height: 68px;
    padding-inline: 18px;
  }

  .brand-logo-header {
    width: 120px;
  }

  .menu-toggle {
    right: 18px;
  }

  .site-nav {
    padding: 94px 22px 60px;
    gap: 18px;
  }

  .site-nav a {
    font-size: clamp(28px, 8vw, 40px);
  }

  .linkedin-rail {
    display: none !important;
  }

  /* Hero */
  .hero,
  .hero-stage,
  .hero-identity {
    height: 680px !important;
    min-height: 680px !important;
  }

  .hero-identity .hero-brand {
    top: 92px !important;
    left: 20px !important;
    width: 72vw !important;
  }

  .hero-identity .hero-statement {
    top: 28% !important;
    left: 20px !important;
    width: 82vw !important;
  }

  .hero-identity .hero-statement span {
    font-size: clamp(42px, 12vw, 60px) !important;
    line-height: .96 !important;
  }

  .hero-fungus-half img {
    width: 138% !important;
    right: -40% !important;
    bottom: -1px !important;
  }

  .hero-copy {
    left: 20px !important;
    right: 20px !important;
    bottom: 28px !important;
    width: auto !important;
  }

  .hero-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .hero-actions .button {
    padding: 12px 14px !important;
    font-size: 12px !important;
  }

  /* Fungal pigments */
  .company-section {
    min-height: 720px !important;
    padding: 92px 20px 48px !important;
    align-items: start !important;
  }

  .company-content {
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
  }

  .company-content h2 {
    max-width: 10ch !important;
    margin-inline: auto !important;
    font-size: clamp(44px, 12.5vw, 58px) !important;
    white-space: normal !important;
  }

  .company-content .section-lead {
    width: auto !important;
    max-width: 28ch !important;
    margin: 20px auto 0 !important;
    font-size: 20px !important;
    text-align: center !important;
  }

  .company-section .depth-image img {
    left: 50% !important;
    bottom: -1px !important;
    width: 165vw !important;
    transform: translateX(-50%) !important;
  }

  /* Xylindein */
  .pigment-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .pigment-visual {
    min-height: 430px !important;
    overflow: visible !important;
  }

  .pigment-fungus {
    left: 50% !important;
    width: 138% !important;
    bottom: -1px !important;
  }

  .pigment-copy {
    min-height: 0 !important;
    padding: 64px 20px 70px !important;
  }

  .pigment-copy h2 {
    max-width: none !important;
    white-space: normal !important;
  }

  .pigment-copy .section-lead {
    max-width: 31ch !important;
    margin-top: 26px !important;
  }

  .pigment-facts {
    gap: 8px !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
  }

  .pigment-facts strong {
    min-height: 40px !important;
    padding: 8px 13px !important;
    font-size: 13px !important;
  }

  /* Applications */
  .applications-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  .applications-feature {
    display: grid !important;
    min-height: 650px !important;
    grid-template-columns: 1fr !important;
  }

  .applications-photo,
  .applications-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 650px !important;
  }

  .applications-image {
    transform: none !important;
    object-position: 62% center !important;
  }

  .applications-content {
    position: relative !important;
    z-index: 2 !important;
    justify-content: flex-end !important;
    padding: 64px 20px 48px !important;
    background-image:
      linear-gradient(0deg, rgba(3,20,47,.96) 0%, rgba(3,20,47,.72) 45%, rgba(3,20,47,.12) 78%),
      url("assets/mycelium-pattern.png") !important;
    background-size: auto, 700px !important;
  }

  .applications-content h2 {
    max-width: 8ch !important;
  }

  .applications-content .section-lead {
    max-width: 29ch !important;
    margin-top: 24px !important;
  }

  .applications-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .application-card,
  .application-card:first-child,
  .application-card:last-child {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 420px !important;
  }

  .application-card h3 {
    right: 20px !important;
    bottom: 26px !important;
    left: 20px !important;
    max-width: 9ch !important;
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  /* Workflow: vertical mobile story instead of a horizontal desktop timeline. */
  .workflow-section {
    padding: 72px 20px 84px !important;
  }

  .workflow-heading h2 {
    max-width: 11ch !important;
    white-space: normal !important;
  }

  .workflow-heading > p {
    max-width: 30ch !important;
    margin-top: 22px !important;
    font-size: 19px !important;
  }

  .timeline-scroll {
    margin-top: 56px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .workflow-timeline {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 54px !important;
  }

  .workflow-timeline::before,
  .workflow-timeline::after,
  .workflow-marker {
    display: none !important;
  }

  .workflow-step {
    padding: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .workflow-image {
    width: 190px !important;
    height: 190px !important;
    margin: 0 auto 20px !important;
  }

  .workflow-step .timeline-status {
    align-self: center !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .workflow-step h3 {
    margin-top: 12px !important;
    font-size: 32px !important;
  }

  .workflow-step > p {
    max-width: 26ch !important;
    margin-top: 12px !important;
    font-size: 18px !important;
    line-height: 1.42 !important;
  }

  .workflow-step:first-child .workflow-image img {
    width: 88% !important;
  }

  .workflow-image-dna img {
    width: 62% !important;
  }

  .workflow-step:nth-child(3) .workflow-image img {
    width: 97% !important;
  }

  .workflow-image-tall img {
    width: 56% !important;
  }

  /* Team */
  .people-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
    padding: 76px 20px 82px !important;
  }

  .people-heading {
    position: static !important;
    top: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    gap: 20px !important;
  }

  .people-heading > p {
    max-width: 31ch !important;
    font-size: 18px !important;
    line-height: 1.48 !important;
  }

  .team-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    height: auto !important;
  }

  .team-card,
  .team-brand-tile {
    height: auto !important;
    min-height: 0 !important;
  }

  .team-photo {
    flex: none !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1.05 !important;
  }

  .team-info,
  .team-card:nth-child(5) .team-info,
  .team-card:nth-child(6) .team-info,
  .team-card:nth-child(7) .team-info {
    min-height: 112px !important;
    margin: 0 !important;
    padding: 13px 11px 15px !important;
  }

  .team-info h3 {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  .team-info p {
    margin-top: 7px !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  .team-brand-tile {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  .team-brand-tile img {
    width: 88% !important;
  }

  .people-network {
    position: static !important;
    top: auto !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    height: auto !important;
  }

  .network-group {
    padding: 18px !important;
  }

  .network-group h3 {
    margin-bottom: 16px !important;
    font-size: 17px !important;
  }

  .network-logos {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .network-logos a {
    min-height: 82px !important;
    padding: 12px !important;
  }

  .network-logos img {
    max-height: 44px !important;
  }

  .network-siemens span {
    font-size: 13px !important;
  }

  /* Contact */
  .contact-section {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
    padding: 76px 20px 82px !important;
  }

  .contact-intro > p {
    margin-top: 24px !important;
    font-size: 18px !important;
  }

  .contact-email {
    margin-top: 26px !important;
    font-size: 16px !important;
  }

  .contact-form-v4 {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 26px 20px !important;
  }

  .contact-form-v4 .full-field {
    grid-column: auto !important;
  }

  /* LinkedIn */
  .updates-section {
    padding: 72px 20px 76px !important;
  }

  .updates-heading {
    gap: 22px !important;
  }

  .updates-heading h2 {
    max-width: 9ch !important;
  }

  .linkedin-follow-button {
    width: auto !important;
    max-width: 100% !important;
  }

  .updates-section .linkedin-post-grid {
    grid-auto-columns: min(88vw, 390px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
  }

  /* Footer */
  .site-footer-v4 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 38px 20px !important;
  }

  .site-footer-v4 > div {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
}

@media (max-width: 420px) {
  .hero,
  .hero-stage,
  .hero-identity {
    height: 650px !important;
    min-height: 650px !important;
  }

  .hero-fungus-half img {
    width: 145% !important;
    right: -46% !important;
  }

  .company-section {
    min-height: 690px !important;
  }

  .company-section .depth-image img {
    width: 176vw !important;
  }

  .team-grid {
    gap: 8px !important;
  }

  .team-info,
  .team-card:nth-child(5) .team-info,
  .team-card:nth-child(6) .team-info,
  .team-card:nth-child(7) .team-info {
    min-height: 106px !important;
    padding: 12px 9px 13px !important;
  }

  .team-info h3 {
    font-size: 15px !important;
  }

  .team-info p {
    font-size: 12px !important;
  }
}

/* Mobile portrait polish after visual audit. */
@media (max-width: 767px) {
  .hero {
    padding: 0 !important;
  }

  .hero-stage {
    width: 100% !important;
    padding: 0 !important;
  }

  .hero-identity .hero-brand {
    top: 88px !important;
    width: 68vw !important;
  }

  .hero-identity .hero-statement {
    top: 31% !important;
    right: 20px !important;
    width: auto !important;
  }

  .hero-identity .hero-statement span {
    white-space: nowrap !important;
    font-size: clamp(30px, 8.5vw, 38px) !important;
  }

  .hero-fungus-half img {
    width: 126% !important;
    right: -31% !important;
  }

  .hero-copy {
    bottom: 24px !important;
  }

  .company-content h2 {
    max-width: none !important;
    font-size: clamp(38px, 10.5vw, 48px) !important;
  }

  .applications-content {
    background-image: linear-gradient(0deg, rgba(3,20,47,.97) 0%, rgba(3,20,47,.72) 46%, rgba(3,20,47,.12) 80%) !important;
  }
}

@media (max-width: 420px) {
  .hero,
  .hero-stage,
  .hero-identity {
    height: 640px !important;
    min-height: 640px !important;
  }

  .hero-fungus-half img {
    width: 132% !important;
    right: -35% !important;
  }
}


@media (max-width: 767px) {
  .updates-section .linkedin-post-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  }
}


/* Company section desktop zoom-safety refinement — 2026-09-20 */
.company-lead-break {
  display: inline;
}

@media (min-width: 901px) {
  .company-section .depth-image img {
    left: 43%;
    bottom: -58px;
    width: min(88vw, 1540px);
  }

  .company-content .section-lead {
    max-width: 30ch;
    line-height: 1.22;
    position: relative;
    z-index: 5;
  }
}

/* At browser zoom levels around 110%, the effective viewport becomes narrower.
   Reduce and lower the fungus further so it never enters the description area. */
@media (min-width: 901px) and (max-width: 1700px) {
  .company-section .depth-image img {
    left: 42%;
    bottom: -76px;
    width: min(84vw, 1420px);
  }

  .company-content {
    width: min(76%, 1080px);
    transform: translateX(clamp(42px, 3.4vw, 64px));
  }

  .company-content h2 {
    font-size: clamp(38px, 4vw, 68px) !important;
  }

  .company-content .section-lead {
    max-width: 29ch;
  }
}

@media (max-width: 900px) {
  .company-lead-break {
    display: none;
  }
}

/* Company section viewport-safe scaling — 2026-09-21 */
.company-lead-break {
  display: inline !important;
}

@media (min-width: 768px) {
  .company-section {
    min-height: clamp(640px, 100svh, 920px) !important;
    padding: clamp(58px, 8svh, 95px) var(--revamp-gutter) 0 !important;
    align-items: start !important;
  }

  .company-content {
    width: min(94vw, 1500px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  .company-content h2 {
    margin: 0 auto !important;
    font-size: clamp(54px, 5.7vw, 112px) !important;
    line-height: .92 !important;
    white-space: nowrap !important;
  }

  .company-content .section-lead {
    width: auto !important;
    max-width: 30ch !important;
    margin: clamp(16px, 2.2svh, 28px) auto 0 !important;
    font-size: clamp(22px, 2vw, 36px) !important;
    line-height: 1.25 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  .company-section .depth-image img {
    left: 50% !important;
    bottom: -5px !important;
    width: min(92vw, 1540px) !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
  }
}

/* Windowed desktop / laptop browsers: keep the same composition.
   The fungus stays large, while its lower anchor protects the copy. */
@media (min-width: 768px) and (max-width: 1280px) {
  .company-section {
    min-height: clamp(640px, 100svh, 860px) !important;
    padding-top: clamp(54px, 8svh, 80px) !important;
  }

  .company-content {
    width: min(94vw, 1120px) !important;
  }

  .company-content h2 {
    font-size: clamp(44px, 5.4vw, 72px) !important;
  }

  .company-content .section-lead {
    max-width: 29ch !important;
    font-size: clamp(20px, 2.05vw, 28px) !important;
  }

  .company-section .depth-image img {
    bottom: -70px !important;
    width: min(112vw, 184svh, 1300px) !important;
  }
}


/* Team card links + desktop vertical alignment — 2026-09-27 */
.team-card-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.team-card-link:visited {
  color: inherit;
}

.team-card-link:focus-visible {
  outline: 3px solid rgba(0, 91, 211, .65);
  outline-offset: 4px;
}

/* Lower the complete right-side team panel so the first-row name
   boxes visually align with the top of the Collaborating with panel. */
@media (min-width: 768px) {
  .team-grid {
    position: relative;
    top: clamp(18px, 1.6vw, 32px);
  }
}


/* MycoDye logo in the primary nav — 2026-09-27 */
.site-nav .nav-mycodye-logo {
  display: inline-flex;
  align-items: center;
  padding-block: 0;
}

.site-nav .nav-mycodye-logo img {
  display: block;
  width: clamp(82px, 6.2vw, 112px);
  height: auto;
  max-height: 30px;
  object-fit: contain;
}


/* =========================================================
   Large-screen hero + Team row alignment — 2026-09-27
   ========================================================= */

/* Keep the hero fungus clear of the navigation on wide, relatively
   short browser viewports. The image keeps the familiar 68vw scale
   until its height would enter the header's safe zone, then scales
   down proportionally while remaining bottom-right anchored. */
@media (min-width: 821px) {
  .hero-fungus-half img {
    width: auto !important;
    height: min(33.4vw, calc(100svh - 118px)) !important;
    max-width: none !important;
    max-height: none !important;
    right: -3% !important;
    bottom: -6px !important;
    object-fit: contain !important;
    object-position: right bottom !important;
  }
}

/* Very wide displays need a little more breathing room around the
   top navigation because their width can otherwise make the 2:1
   fungus artwork disproportionately tall. */
@media (min-width: 2200px) and (min-width: 821px) {
  .hero-fungus-half img {
    height: min(31.8vw, calc(100svh - 132px)) !important;
    right: -2% !important;
  }
}

/* Keep the first Team row exactly where it is. Move only the second
   row down so the bottom of Jon's info card visually meets the bottom
   edge of the Funded by panel. The logo tile moves with that row. */
@media (min-width: 768px) {
  .team-grid > :nth-child(5),
  .team-grid > :nth-child(6),
  .team-grid > :nth-child(7),
  .team-grid > :nth-child(8) {
    transform: translateY(clamp(26px, 2.1vw, 44px));
  }
}

/* Do not carry the desktop row offset into the mobile grid. */
@media (max-width: 767px) {
  .team-grid > :nth-child(5),
  .team-grid > :nth-child(6),
  .team-grid > :nth-child(7),
  .team-grid > :nth-child(8) {
    transform: none !important;
  }
}


/* =========================================================
   Team order + inline logo + extra-wide hero clearance
   2026-09-27
   ========================================================= */

/* Inline MycoDye logo inside the Meet the team introduction. */
.team-inline-mycodye-logo {
  display: inline-block;
  width: clamp(72px, 5vw, 94px);
  height: auto;
  max-height: 38px;
  margin: 0 .12em;
  vertical-align: -.34em;
  object-fit: contain;
}

/* Keep normal 1920-class layouts unchanged. Extra-wide screens use a
   slightly smaller, lower fungus so the cup clears the right-side nav. */
@media (min-width: 2200px) and (min-width: 821px) {
  .hero-fungus-half img {
    width: 56vw !important;
    height: auto !important;
    max-width: none !important;
    right: -1.5% !important;
    bottom: -18px !important;
  }
}

/* Extra-wide + short browser windows need more clearance still. */
@media (min-width: 2200px) and (min-width: 821px) and (max-height: 900px) {
  .hero-fungus-half img {
    width: 52vw !important;
    right: -1% !important;
    bottom: -24px !important;
  }
}

@media (max-width: 767px) {
  .team-inline-mycodye-logo {
    width: 72px;
    max-height: 32px;
    vertical-align: -.28em;
  }
}


/* =========================================================
   Correct inline MycoDye logo + larger company lead
   2026-09-27
   ========================================================= */

/* Treat the MycoDye mark as part of the sentence: it inherits the
   paragraph scale visually and sits slightly lower on the baseline. */
.team-inline-mycodye-logo {
  display: inline-block !important;
  width: auto !important;
  height: 1.28em !important;
  max-height: none !important;
  margin: 0 .08em !important;
  vertical-align: -.38em !important;
  object-fit: contain !important;
}

/* Increase the second-section description by 50% from the current
   responsive scale while preserving its deliberate line wrapping. */
@media (min-width: 768px) {
  .company-content .section-lead {
    font-size: clamp(33px, 3vw, 54px) !important;
    max-width: 30ch !important;
    line-height: 1.18 !important;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .company-content .section-lead {
    font-size: clamp(30px, 3.075vw, 42px) !important;
    max-width: 29ch !important;
  }
}

@media (max-width: 767px) {
  .company-content .section-lead {
    font-size: 1.5em !important;
  }

  .team-inline-mycodye-logo {
    height: 1.22em !important;
    vertical-align: -.35em !important;
  }
}


/* =========================================================
   Solar-image replacement + hero space + correct inline logo
   2026-09-27
   ========================================================= */

/* Give the first section a little more space. */
@media (min-width: 821px) {
  .hero-section {
    min-height: calc(100svh + 56px) !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 820px) {
  .hero-section {
    min-height: calc(100svh + 36px) !important;
    padding-bottom: 36px !important;
  }
}

/* Make the new many-solar-panels image compose well in the right-side panel. */
.applications-feature .applications-feature-image {
  object-position: left center !important;
}

/* Guarantee the inline MycoDye logo reads as part of the sentence. */
.team-inline-mycodye-logo {
  display: inline-block !important;
  width: auto !important;
  height: 1.2em !important;
  max-height: none !important;
  margin: 0 .08em !important;
  vertical-align: -.28em !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .team-inline-mycodye-logo {
    height: 1.14em !important;
    vertical-align: -.24em !important;
  }
}


/* =========================================================
   LinkedIn mobile portrait stack — 2026-09-27
   In portrait only, posts become a normal vertical page flow.
   Landscape/tablet/desktop layouts remain unchanged.
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait) {
  .updates-section .linkedin-post-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;
    grid-auto-flow: row !important;
    gap: 18px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 34px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .updates-section .linkedin-post-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }
}