/* Tint Bio — editorial layer. Extends tint.css + tint-shop.css.
   The product is colour. This layer is what puts colour on the page:
   drenched line blocks, full bleed pigment, scale contrast, staged motion.
   Still no shadows and no rounded corners; depth comes from colour and scale. */

/* ---------- Fluid display scale, wider steps ---------- */

.t-mega {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.038em;
  text-wrap: balance;
  margin: 0;
}

.t-statement {
  font-family: var(--display-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

h1, h2, h3 { text-wrap: balance; }
.prose p, .lede { text-wrap: pretty; }

/* ---------- Hero ---------- */

.hero-img > img { will-change: transform; }
.hero-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(0,31,63,.96));
  z-index: 1;
}
.scroll-cue {
  position: absolute; bottom: var(--s5); right: var(--margin); z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  display: flex; align-items: center; gap: var(--s3);
}
.scroll-cue i {
  display: block; width: 1px; height: 34px; background: rgba(255,255,255,.45);
  transform-origin: top; animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ---------- The pigment strip: colour as the product ---------- */

.pigments { display: grid; grid-template-columns: repeat(3, 1fr); }
.pigment {
  position: relative; overflow: hidden; min-height: 62vh;
  display: flex; align-items: flex-end;
  color: var(--paper); text-decoration: none;
}
.pigment img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.pigment::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.72) 100%);
}
.pigment:hover img { transform: scale(1.05); }
.pigment:hover { text-decoration: none; }
.pigment .pg-body { position: relative; z-index: 2; padding: var(--s6); width: 100%; }
.pigment .pg-name {
  font-weight: 800; font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em; line-height: 1; margin: 0;
}
.pigment .pg-mol { font-size: 14px; color: rgba(255,255,255,.78); margin: var(--s2) 0 0; }
.pigment .pg-swatch { height: 6px; width: 100%; margin-bottom: var(--s5); }
.pigment .pg-state {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; margin-top: var(--s4); display: block;
}

/* ---------- Drenched line blocks ---------- */

/* Text colour is set per block, because white fails contrast on the teal,
   rose and gold line colours. Dark blocks take .on-dark, the three light
   line colours take .on-light and carry navy type at 5:1 or better. */
.drench {
  position: relative;
  padding: clamp(48px, 6vw, 80px) 0;
  overflow: hidden;
}
.drench.on-dark  { color: var(--paper); }
.drench.on-light { color: var(--navy); }

.drench.on-dark .lede, .drench.on-dark .prose { color: rgba(255,255,255,.88); }
.drench.on-dark .caption { color: rgba(255,255,255,.7); }
.drench.on-dark .rule-hair { background: rgba(255,255,255,.26); }

.drench.on-light .lede, .drench.on-light .prose { color: rgba(0,31,63,.86); }
.drench.on-light .caption { color: rgba(0,31,63,.72); }
.drench.on-light .rule-hair { background: rgba(0,31,63,.22); }

.drench a.btn.onbrand {
  background: var(--paper); color: var(--navy); border-color: var(--paper);
}
.drench a.btn.onbrand:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.drench.on-light a.btn.onbrand {
  background: var(--navy); color: var(--paper); border-color: var(--navy);
}
.drench.on-light a.btn.onbrand:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }

/* The line number sits behind the content as a large ghost numeral */
.ghost-num {
  position: absolute; right: calc(var(--margin) * -.2); top: -.16em;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(180px, 30vw, 460px);
  line-height: .8; letter-spacing: -0.06em;
  pointer-events: none; user-select: none; z-index: 0;
}
.drench.on-dark  .ghost-num { color: rgba(255,255,255,.085); }
.drench.on-light .ghost-num { color: rgba(0,31,63,.09); }
.drench .wrap { position: relative; z-index: 1; }

/* ---------- Full bleed editorial band ---------- */

.band { position: relative; min-height: 82vh; display: flex; align-items: center; overflow: hidden; }
.band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,31,63,.94) 0%, rgba(0,31,63,.72) 46%, rgba(0,31,63,.12) 100%);
}
.band .wrap { position: relative; z-index: 2; color: var(--paper); width: 100%; }
.band .lede { color: rgba(255,255,255,.84); }

/* ---------- Stat counters ---------- */

.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s6); }
.figure { border-top: 2px solid currentColor; padding-top: var(--s4); }
.figure .fv {
  display: block; font-weight: 800; letter-spacing: -0.035em; line-height: .95;
  font-size: clamp(38px, 4.6vw, 68px);
  font-variant-numeric: tabular-nums;
}
.figure .fk {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; margin-top: var(--s4); opacity: .62;
}
.figure .fn { font-size: 13px; margin-top: var(--s2); opacity: .72; line-height: 1.45; }

/* ---------- Cascade, structural ---------- */

.cascade-big { display: flex; width: 100%; height: clamp(90px, 13vw, 168px); }
.cascade-big span {
  position: relative; transition: flex .6s cubic-bezier(.16,1,.3,1);
  display: flex; align-items: flex-end; padding: var(--s4);
}
.cascade-big span:nth-child(1) { background: var(--color-line); flex: 44; }
.cascade-big span:nth-child(2) { background: var(--sups);       flex: 21; }
.cascade-big span:nth-child(3) { background: var(--beauty);     flex: 6; }
.cascade-big span:nth-child(4) { background: var(--agro);       flex: 166; }
.cascade-big span b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.92); font-weight: 500;
  white-space: nowrap; overflow: hidden;
}
.cascade-big:hover span { flex: 1; }

/* ---------- Offset / overlap composition ---------- */

.offset-up { margin-top: clamp(-96px, -7vw, -40px); }
.pull-left { margin-left: calc(var(--margin) * -1); }
@media (max-width: 1080px) { .pull-left { margin-left: 0; } .offset-up { margin-top: 0; } }

/* ---------- Link with animated rule ---------- */

.ulink {
  position: relative; display: inline-block; font-weight: 600;
  color: inherit; text-decoration: none; padding-bottom: 3px;
}
.ulink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.ulink:hover { text-decoration: none; }
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Staged motion ----------
   Content is visible by default. These classes only add movement on top,
   so a headless render or a failed observer still ships a readable page. */

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(18px); }
  .rise.shown {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--d, 0ms);
  }
  .wipe { clip-path: inset(0 100% 0 0); }
  .wipe.shown {
    clip-path: inset(0 0 0 0);
    transition: clip-path .9s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--d, 0ms);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pigments { grid-template-columns: 1fr; }
  .pigment { min-height: 46vh; }
  .band { min-height: 68vh; }
  .band::after { background: linear-gradient(180deg, rgba(0,31,63,.78) 0%, rgba(0,31,63,.94) 100%); }
  .ghost-num { font-size: clamp(140px, 44vw, 260px); right: -.06em; }
  .cascade-big { height: 84px; }
  .cascade-big span b { display: none; }
  .scroll-cue { display: none; }
}

/* ---------- Sample option cards ---------- */

.sample-opt {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  text-align: left; cursor: pointer;
  background: var(--paper); color: var(--navy);
  border: 1px solid var(--rule); border-radius: 0;
  padding: var(--s6);
  font-family: var(--sans);
  transition: border-color .18s ease, background .18s ease;
}
.sample-opt:hover { border-color: var(--graphite); }
.sample-opt[aria-pressed="true"] { border-color: var(--navy); border-width: 2px; padding: calc(var(--s6) - 1px); }

.so-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.so-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--graphite);
}
.sample-opt[aria-pressed="true"] .so-label { color: var(--blue); }
.so-price { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }

.so-size {
  display: block; font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1; margin-top: var(--s4);
}
.so-blurb { display: block; font-size: 15px; line-height: 1.55; margin-top: var(--s4); color: var(--navy); }

.so-list { display: block; margin-top: var(--s5); border-top: 1px solid var(--rule); }
.so-list span {
  display: block; font-size: 13px; color: var(--graphite);
  padding: 9px 0 9px var(--s5); border-bottom: 1px solid var(--rule);
  position: relative; line-height: 1.45;
}
.so-list span::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 8px; height: 1px; background: var(--graphite-soft);
}
.so-list span:last-child { border-bottom: none; }

/* ---------- Hero, marketing weight ---------- */

.hero-img.hero-tall { min-height: 92vh; }

.hero-lines { display: flex; width: 168px; margin-bottom: var(--s6); }
.hero-lines span { height: 5px; flex: 1; }

.hero-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  margin: 0 0 var(--s5);
}

.hero-h1 {
  font-size: clamp(56px, 12vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  max-width: 11ch;
}

/* ---------- Trust strip ---------- */

.trust { background: var(--navy); padding: 0; }
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.trust li {
  padding: var(--s5) var(--s4) var(--s5) 0;
  font-size: 13px; color: rgba(255,255,255,.62);
  border-right: 1px solid rgba(255,255,255,.14);
  padding-left: var(--s4);
}
.trust li:first-child { padding-left: 0; }
.trust li:last-child { border-right: none; }
.trust b {
  display: block; color: var(--paper); font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; margin-bottom: 3px;
}

@media (max-width: 720px) {
  .hero-img.hero-tall { min-height: 84vh; }
  .hero-h1 { font-size: clamp(48px, 17vw, 84px); }
  .trust li { border-right: none; border-bottom: 1px solid rgba(255,255,255,.14); padding-left: 0; }
  .trust li:last-child { border-bottom: none; }
}

/* ---------- Volume invitation on the product page ---------- */
.volume-note {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 500;
}

/* ---------- Plain language block: bigger, fewer words per line ---------- */

.plain p {
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  font-weight: 400;
  max-width: 46ch;
  margin: 0 0 var(--s5);
}
.plain p:last-child { margin-bottom: 0; }
.on-dark .plain p { color: rgba(255,255,255,.86); }

/* ---------- Animated cascade: one biomass into four outputs ---------- */

.cascade-anim {
  display: flex; align-items: stretch; gap: var(--s5);
  padding: var(--s6) 0;
}
.ca-src {
  flex: none; width: 116px;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 3px solid currentColor;
  padding-left: var(--s4);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .72;
}
.ca-src b {
  display: block; font-family: var(--sans); font-weight: 800;
  font-size: 22px; letter-spacing: -0.02em; text-transform: none;
  margin-bottom: 4px; opacity: 1;
}
.ca-flow { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

.ca-bar {
  position: relative; display: flex; align-items: center; gap: var(--s4);
  font-style: normal; min-height: 30px;
}
/* The bar grows to a width proportional to its yield. Default is fully drawn,
   so a dead observer, a headless render or an above-the-fold placement all show
   the real chart. It only collapses once motion.js has opted the group in. */
.ca-bar::before {
  content: ""; display: block; height: 100%;
  min-height: 26px;
  background: var(--c);
  width: calc(var(--w) * 0.34%);
  min-width: 14px;
  transform-origin: left;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.rise .ca-bar::before { transform: scaleX(0); }
.rise.shown .ca-bar::before { transform: scaleX(1); }

.ca-bar b {
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; white-space: nowrap;
}
.ca-bar em {
  font-family: var(--mono); font-style: normal; font-size: 11px;
  letter-spacing: .12em; opacity: .6; white-space: nowrap;
}
.ca-bar:nth-child(1) { --i: 0; }
.ca-bar:nth-child(2) { --i: 1; }
.ca-bar:nth-child(3) { --i: 2; }
.ca-bar:nth-child(4) { --i: 3; }

@media (prefers-reduced-motion: reduce) {
  .rise .ca-bar::before, .ca-bar::before { transform: scaleX(1); transition: none; }
}
@media (max-width: 720px) {
  .cascade-anim { flex-direction: column; gap: var(--s5); }
  .ca-src { width: auto; border-left: none; border-top: 3px solid currentColor; padding: var(--s4) 0 0; }
}

/* ---------- Backer list, text only. No borrowed logos. ---------- */

.backers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
.backer {
  border-top: 1px solid var(--rule);
  padding: var(--s5) var(--s4) var(--s5) 0;
}
.backer b {
  display: block; font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--navy);
}
.backer span {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite); margin-top: 6px;
}
.backer:first-child { border-top-color: var(--navy); border-top-width: 3px; }
.backer:first-child b { color: var(--blue); }

/* ---------- Collection page: why we are better ---------- */

.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s6); }
.why-item { border-top: 3px solid currentColor; padding-top: var(--s5); }
.why-item h4 {
  margin: 0; font-weight: 700; font-size: 19px; letter-spacing: -0.02em;
  color: var(--navy);
}
.why-item p { margin: var(--s4) 0 0; font-size: 15px; line-height: 1.55; color: var(--navy); }
.on-dark .why-item h4, .on-dark .why-item p { color: var(--paper); }

/* ---------- PDP sections ---------- */

.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 15px; color: var(--navy);
}
.doclist li::before {
  content: ""; flex: none; width: 9px; height: 9px;
  border: 1px solid var(--graphite-soft); transform: translateY(1px);
}
.doclist li.nda::before { background: var(--caution); border-color: var(--caution); }
.doclist li:last-child { border-bottom: none; }

.proposed-flag {
  border-left: 3px solid var(--caution);
  background: var(--cloud);
  padding: var(--s5);
  font-size: 15px; line-height: 1.55;
}
.proposed-flag b { display: block; margin-bottom: var(--s2); }

/* ==========================================================================
   BRAND PATTERN
   The mark reduced to its four strokes, tiled as a wall treatment. The
   brandbook calls for the cascade as ornament rather than a flourish, so this
   is the only decorative texture in the system. It sits under content at low
   opacity and drifts slowly; it never competes with type.
   ========================================================================== */

.pattern { position: relative; isolation: isolate; }
.pattern::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523001F3F%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%2014%2012%20C%2014%2058%2034%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2040%2030%20C%2040%2066%2054%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2064%2050%20C%2064%2076%2076%2098%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2086%2068%20C%2086%2086%2092%20100%20106%20104%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 190px 190px;
  opacity: .05;
  animation: drift 64s linear infinite;
}
.pattern.on-navy::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523FFFFFF%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%2014%2012%20C%2014%2058%2034%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2040%2030%20C%2040%2066%2054%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2064%2050%20C%2064%2076%2076%2098%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2086%2068%20C%2086%2086%2092%20100%20106%20104%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); opacity: .07; }
.pattern.dense::before { background-size: 120px 120px; }

@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 190px 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .pattern::before { animation: none; }
}

/* A single oversized mark used as a section watermark. */
.plume-mark {
  position: absolute; pointer-events: none; user-select: none; z-index: 0;
  width: clamp(280px, 34vw, 560px); aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523001F3F%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%2014%2012%20C%2014%2058%2034%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2040%2030%20C%2040%2066%2054%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2064%2050%20C%2064%2076%2076%2098%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2086%2068%20C%2086%2086%2092%20100%20106%20104%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain; background-repeat: no-repeat;
  opacity: .06;
}
.on-dark .plume-mark { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523FFFFFF%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%2014%2012%20C%2014%2058%2034%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2040%2030%20C%2040%2066%2054%2096%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2064%2050%20C%2064%2076%2076%2098%20106%20104%22%2F%3E%3Cpath%20d%3D%22M%2086%2068%20C%2086%2086%2092%20100%20106%20104%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); opacity: .09; }

/* ---------- The three act arc: the long term vision as a timeline ---------- */

.acts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.acts::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px;
  background: currentColor; opacity: .22;
}
.act { position: relative; padding-top: var(--s7); }
.act::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 11px; height: 11px; background: var(--c);
  transform: scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 160ms);
}
.acts.shown .act::before, .act.shown::before { transform: scale(1); }
.act .a-when {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c); margin-bottom: var(--s4);
}
.act h3 {
  margin: 0; font-weight: 800; font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.025em; line-height: 1.08;
}
.act p { margin: var(--s4) 0 0; font-size: 16px; line-height: 1.55; opacity: .8; max-width: 34ch; }
.act.now h3::after {
  content: "You are here";
  display: inline-block; margin-left: var(--s3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; vertical-align: middle;
  border: 1px solid currentColor; padding: 3px 6px; opacity: .7;
}

@media (max-width: 860px) {
  .acts { grid-template-columns: 1fr; gap: var(--s7); }
  .acts::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .act { padding-left: var(--s6); padding-top: 0; }
  .act::before { top: 4px; }
}

/* ---------- Full bleed luxury band with the image doing the work ---------- */

.lux {
  position: relative; min-height: 86vh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: #0A0E14;
}
.lux > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .92;
}
.lux::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,10,20,.55) 0%, rgba(0,10,20,.1) 45%, rgba(0,10,20,.92) 100%);
}
.lux .wrap { position: relative; z-index: 2; color: var(--paper); width: 100%; padding-bottom: var(--s8); }
.lux .lede { color: rgba(255,255,255,.84); }
.lux .eyebrow { color: #7FC0FF; }


/* ==========================================================================
   THE HOUSE ROW
   Four panels, one per line. The line colour is the resting state and the
   application photograph is the reward for hovering. On a touch screen there
   is no hover, so the colour sits lighter and the photograph is always partly
   visible.
   ========================================================================== */

.house-row { display: flex; width: 100%; }

.house-panel {
  position: relative;
  flex: 1 1 0;
  min-height: clamp(420px, 58vh, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--paper);
  text-decoration: none;
  transition: flex-grow .7s cubic-bezier(.16,1,.3,1);
}
.house-panel > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
/* the colour, sitting on top of the photograph */
.house-panel .tone {
  position: absolute; inset: 0;
  background: var(--c);
  opacity: .82;
  transition: opacity .6s ease;
}
/* a permanent foot scrim so the type clears on every line colour */
.house-panel .foot-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, transparent, rgba(0,14,28,.82));
}
.house-panel .hp-body { position: relative; z-index: 2; padding: var(--s6); width: 100%; }

.house-panel .hp-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}
.house-panel .hp-name {
  margin: var(--s4) 0 0;
  font-weight: 800; font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.025em; line-height: 1;
}
.house-panel .hp-what {
  margin: var(--s3) 0 0; font-size: 15px; color: rgba(255,255,255,.82);
}
.house-panel .hp-more {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .6s cubic-bezier(.16,1,.3,1), opacity .4s ease, margin .6s ease;
}
.house-panel .hp-more p {
  margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.9);
  max-width: 34ch;
}
.house-panel .hp-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.28); padding-top: var(--s4);
}
.house-panel .hp-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
.house-panel .hp-go {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
}

/* hover: the panel takes room, the colour steps back, the product appears */
@media (hover: hover) and (min-width: 861px) {
  .house-row:hover .house-panel { flex-grow: .82; }
  .house-row .house-panel:hover { flex-grow: 1.9; }
  .house-panel:hover .tone { opacity: .3; }
  .house-panel:hover > img { transform: scale(1); }
  .house-panel:hover .hp-more { max-height: 140px; opacity: 1; margin-top: var(--s4); }
}
.house-panel:focus-visible { outline: 3px solid var(--paper); outline-offset: -6px; }
.house-panel:focus-visible .tone { opacity: .3; }
.house-panel:focus-visible .hp-more { max-height: 140px; opacity: 1; margin-top: var(--s4); }

@media (max-width: 860px) {
  .house-row { flex-direction: column; }
  .house-panel { min-height: 340px; }
  .house-panel .tone { opacity: .62; }
  .house-panel .hp-more { max-height: 140px; opacity: 1; margin-top: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .house-panel, .house-panel > img, .house-panel .tone, .house-panel .hp-more { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO FILM
   The opening beat of the brand film, rebuilt as SVG and CSS so the landing
   carries no framework and no megabytes. The mark draws itself in four
   strokes, the words arrive under it, the cascade closes the section.

   It plays once and holds. A hero that loops forever competes with the copy
   the visitor is trying to read, and gives a reduced-motion user nowhere to
   rest. Everything here is transform, opacity or stroke-dashoffset.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-film {
  --ease-brand: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92svh, 900px);
  padding-block: var(--s9);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}

/* The four strokes of the mark, drawn in sequence rather than faded in.
   pathLength normalises every path to 1 so one keyframe drives all four
   regardless of their real arc length. */
.hf-mark {
  display: block;
  width: clamp(58px, 6.5vw, 96px);
  height: auto;
  overflow: visible;
  color: var(--paper);
}
.hf-mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hf-draw 820ms var(--ease-brand) forwards;
}
.hf-mark path:nth-child(1) { animation-delay: 100ms; }
.hf-mark path:nth-child(2) { animation-delay: 210ms; }
.hf-mark path:nth-child(3) { animation-delay: 320ms; }
.hf-mark path:nth-child(4) { animation-delay: 430ms; }
@keyframes hf-draw { to { stroke-dashoffset: 0; } }

/* Text arrives under the mark, staggered, never from nothing. */
.hf-rise {
  opacity: 0;
  transform: translateY(16px);
  animation: hf-rise 640ms var(--ease-brand) forwards;
}
@keyframes hf-rise { to { opacity: 1; transform: none; } }

.hf-kicker { animation-delay: 760ms; }
.hf-h1     { animation-delay: 900ms; }
.hf-lede   { animation-delay: 1080ms; }
.hf-cta    { animation-delay: 1200ms; }

.hf-kicker {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8FC1EE;
  margin-top: var(--s7);
}
.hf-h1 { margin-top: var(--s4); }
.hf-lede { max-width: 46ch; margin-top: var(--s6); color: rgba(244, 246, 250, 0.82); }
.hf-cta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

/* The cascade closes the hero and doubles as the rule into the next section.
   Left origin, staggered, same order as the four lines of the house. */
.hf-cascade {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  height: 10px;
}
.hf-cascade i {
  flex: 1;
  transform: scaleX(0);
  transform-origin: left;
  animation: hf-fill 560ms var(--ease-brand) forwards;
}
.hf-cascade i:nth-child(1) { background: var(--color-line); animation-delay: 1260ms; }
.hf-cascade i:nth-child(2) { background: var(--sups);       animation-delay: 1380ms; }
.hf-cascade i:nth-child(3) { background: var(--beauty);     animation-delay: 1500ms; }
.hf-cascade i:nth-child(4) { background: var(--agro);       animation-delay: 1620ms; }
@keyframes hf-fill { to { transform: none; } }

/* Reduced motion keeps the composition and drops the movement: the mark is
   already drawn, the words are already placed, the cascade is already full. */
@media (prefers-reduced-motion: reduce) {
  .hf-mark path,
  .hf-rise,
  .hf-cascade i { animation: none; }
  .hf-mark path { stroke-dashoffset: 0; }
  .hf-rise      { opacity: 1; transform: none; }
  .hf-cascade i { transform: none; }
}

/* The editorial layer bleeds decorative elements past the right edge on
   purpose: the ghost numerals and the plume mark. They were pushing the body
   36px wide, so the whole page scrolled sideways. `clip` rather than `hidden`
   because hidden on an ancestor silently kills position: sticky. */
html, body { overflow-x: clip; }


/* ══════════════════════════════════════════════════════════════════════════
   HERO SPLIT
   The mechanism scene of the brand film as SVG and CSS. One node, four
   channels, four bars. Sequence: copy rises, node lands, channels draw, bars
   fill from where the channel arrives, labels settle. Then two things keep
   moving, quietly, because this is a process and not a poster: light runs
   through each channel at constant speed, and the node breathes.
   Everything is transform, opacity or stroke-dashoffset.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-split {
  --ease-brand: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92svh, 900px);
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}
.hs-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hs-h1   { font-size: clamp(44px, 6.2vw, 92px); text-wrap: balance; }
.hs-lede { max-width: 42ch; margin-top: var(--s6); color: rgba(244, 246, 250, 0.84); }
.hs-cta  { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

.hs-rise { opacity: 0; transform: translateY(16px); animation: hf-rise 640ms var(--ease-brand) forwards; }
.hs-h1   { animation-delay: 120ms; }
.hs-lede { animation-delay: 260ms; }
.hs-cta  { animation-delay: 400ms; }

/* ---- the figure ---- */
.hs-figure { position: relative; margin: 0; padding-top: 28px; }
.hs-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-src {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #8FC1EE;
  opacity: 0; animation: hs-fade 500ms var(--ease-brand) 360ms forwards;
}
@keyframes hs-fade { to { opacity: 1; } }

/* The node lands, then breathes. The breathing starts once the scene has
   settled, and only touches transform, so the landing's opacity holds. */
.hs-node {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(0.9);
  animation: hs-node-in 520ms var(--ease-brand) 220ms forwards,
             hs-breathe 4200ms ease-in-out 2600ms infinite;
}
@keyframes hs-node-in  { to { opacity: 1; transform: scale(1); } }
@keyframes hs-breathe  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Channels draw from the node outward. pathLength normalises each to 1. */
.hs-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hf-draw 1100ms var(--ease-brand) forwards; }
.hs-path:nth-child(1) { animation-delay: 560ms; }
.hs-path:nth-child(2) { animation-delay: 680ms; }
.hs-path:nth-child(3) { animation-delay: 800ms; }
.hs-path:nth-child(4) { animation-delay: 920ms; }

/* The process running: short dashes of light travelling node to bar at a
   constant speed. Linear on purpose, this is motion with no start and no end. */
.hs-flowpath {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-dasharray: 0.03 0.12;
  opacity: 0;
  animation: hs-fade 600ms ease-out 1900ms forwards,
             hs-flow 2400ms linear 1900ms infinite;
}
@keyframes hs-flow { to { stroke-dashoffset: -0.15; } }

/* Bars fill downward from the point the channel reaches them. */
.hs-bar {
  transform-box: fill-box; transform-origin: 50% 0;
  transform: scaleY(0);
  animation: hs-fill 560ms var(--ease-brand) forwards;
}
.hs-bar:nth-child(1) { animation-delay: 1500ms; }
.hs-bar:nth-child(2) { animation-delay: 1620ms; }
.hs-bar:nth-child(3) { animation-delay: 1740ms; }
.hs-bar:nth-child(4) { animation-delay: 1860ms; }
@keyframes hs-fill { to { transform: scaleY(1); } }

/* Labels live in HTML so they keep their type size on a phone. The grid is
   the bar geometry of the SVG: 5% margin, 4 bars of 18.75%, 5% gaps. */
.hs-legend {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%;
  padding: var(--s4) 5% 0; margin: 0;
}
.hs-lab {
  display: block; color: var(--paper); text-decoration: none;
  opacity: 0; transform: translateY(8px);
  animation: hf-rise 520ms var(--ease-brand) forwards;
}
.hs-lab:hover { text-decoration: none; }
.hs-lab:hover b { color: #8FC1EE; }
.hs-lab b { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(14px, 1.5vw, 21px); letter-spacing: -0.02em; line-height: 1.1; transition: color 160ms ease; }
.hs-lab i { display: block; margin-top: 4px; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-soft); }
.hs-lab:nth-child(1) { animation-delay: 1780ms; }
.hs-lab:nth-child(2) { animation-delay: 1900ms; }
.hs-lab:nth-child(3) { animation-delay: 2020ms; }
.hs-lab:nth-child(4) { animation-delay: 2140ms; }

/* Stacks on a phone: copy first, the split below it, labels still aligned. */
@media (max-width: 900px) {
  .hs-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .hs-figure { padding-top: 24px; }
  .hs-lab i { font-size: 11px; letter-spacing: 0.05em; }
}

/* Reduced motion keeps the finished composition and stops the two loops. */
@media (prefers-reduced-motion: reduce) {
  .hs-rise, .hs-src, .hs-node, .hs-path, .hs-flowpath, .hs-bar, .hs-lab { animation: none; }
  .hs-rise, .hs-src, .hs-node, .hs-lab { opacity: 1; transform: none; }
  .hs-path { stroke-dashoffset: 0; }
  .hs-bar  { transform: none; }
  .hs-flowpath { opacity: 0; }
}

/* The pigment grid is full bleed imagery. The generic section padding was
   leaving a white band above and below it. */
.pigments { padding: 0; }

/* Collection hero: copy left, the photograph right and whole. No crop box;
   the image keeps its own proportions, sits against the right edge, and is
   capped by viewport height so it never towers over 3 lines of copy. */
.line-head-fig img { display: block; width: auto; max-width: 100%; max-height: min(66vh, 600px); margin-left: auto; }
@media (max-width: 767px) { .line-head-fig img { margin: var(--s6) 0 0; max-height: 56vh; } }

/* Hero kicker: the one small label the landing allows itself. */
.hs-kicker { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8FC1EE; margin: 0 0 var(--s4); animation-delay: 40ms; }

/* Backer logos: one row, quiet, no captions under each mark. */
/* A logo wall only looks even when each mark is sized by eye. Matching them on
   height alone made the long wordmarks four times wider than the stacked ones,
   which is why ChemSPACE was shouting. Each mark gets its own ceiling on both
   axes instead, and the cells keep them on a grid. */
.backers-logos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center; justify-items: center; gap: var(--s7) var(--s6);
}
.backers-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 32px; }
.backers-logos .b-antler { max-height: 27px; max-width: 118px; }
.backers-logos .b-mass   { max-height: 42px; max-width: 92px; }
.backers-logos .b-tum    { max-height: 22px; max-width: 148px; }
.backers-logos .b-chem   { max-height: 17px; max-width: 136px; }
.backers-logos .b-start  { max-height: 30px; max-width: 104px; }
.backers-logos .b-ual    { max-height: 36px; max-width: 112px; }
@media (max-width: 560px) {
  .backers-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
}

/* ---- About page ---- */
/* Photo band under the hero: full bleed, wide, the people and the ponds. */
.story-band { margin: var(--s8) 0 0; aspect-ratio: 2 / 1; max-height: 640px; overflow: hidden; background: var(--cloud); }
.story-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .story-band { aspect-ratio: 4 / 3; } }

/* The story: a run of beats, each a bold lead and a short paragraph, a
   hairline between them. Not cards. */
.story { display: flex; flex-direction: column; }
.story-beat { padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.story-beat:first-child { border-top: none; padding-top: 0; }
.story-beat h3 { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.story-beat p { margin: var(--s3) 0 0; font-family: var(--editorial); font-size: 16px; line-height: 1.55; color: var(--navy); max-width: 52ch; }

/* Three photographs of the work, edge to edge, no captions. */
.story-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.story-row figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cloud); }
.story-row img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.story-row figure:hover img { transform: scale(1.03); }
@media (max-width: 767px) { .story-row { grid-template-columns: 1fr; } .story-row figure { aspect-ratio: 4 / 3; } }
/* ==== BACKGROUND LIGHT 2026-09-08 ==== */

/* Light through water. Every navy surface carries a layer of three soft
   radial glows in the line colours, under 20% opacity, drifting over 36 s and
   back. Transform only, one layer per surface, still under reduced motion.
   The content sits above it on its own stacking layer. */
.drench.on-dark, .hero-split, .site-foot, .trust { position: relative; overflow: hidden; }
.drench.on-dark::after, .hero-split::after, .site-foot::after {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(0, 116, 217, 0.26), transparent 68%),
    radial-gradient(32% 36% at 78% 18%, rgba(0, 183, 194, 0.16), transparent 68%),
    radial-gradient(44% 40% at 62% 86%, rgba(228, 90, 140, 0.11), transparent 70%);
  animation: bloom 36s ease-in-out infinite alternate;
}
.site-foot::after { opacity: 0.7; }
@keyframes bloom {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
.drench .wrap, .hero-split .hs-grid, .site-foot .wrap { position: relative; z-index: 1; }

/* The plume pattern on light and dark sections drifts, slowly enough that
   nobody can point at it moving. */
.pattern::before { animation: drift 140s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .drench.on-dark::after, .hero-split::after, .site-foot::after, .pattern::before { animation: none; }
}
/* ==== COLLECTION HERO FULL SECTION 2026-09-08 ==== */

/* The collection hero uses the whole section. Side tracks reproduce the
   .wrap arithmetic, so the copy starts exactly where every other section's
   content starts; the photograph takes the right half out to the viewport
   edge and the full row height. Background light sits behind both. */
#line-hero.drench { padding: 0; }
.line-head {
  position: relative; z-index: 1; display: grid; align-items: stretch;
  grid-template-columns:
    minmax(var(--margin), 1fr)
    minmax(0, calc(var(--maxw) / 2 - var(--margin)))
    minmax(0, calc(var(--maxw) / 2 - var(--margin)))
    minmax(var(--margin), 1fr);
  min-height: clamp(460px, 70vh, 760px);
}
.line-head-copy {
  grid-column: 2; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 72px) clamp(48px, 6vw, 88px) 0;
}
.line-head-fig { grid-column: 3 / 5; position: relative; min-height: 100%; }
.line-head-fig img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover; }
@media (max-width: 900px) {
  .line-head { grid-template-columns: 1fr; min-height: 0; }
  .line-head-copy { grid-column: 1; padding: clamp(40px, 8vw, 64px) var(--margin); }
  .line-head-fig { grid-column: 1; aspect-ratio: 4 / 3; min-height: 0; }
}
/* ==== HERO VESSELS 2026-09-08 ==== */

/* The four bars are vessels now: a bottle, a capsule, a dropper bottle and a
   drop, one per line. The outline is a faint white stroke; the colour rises
   inside the silhouette when its channel arrives, same timing as before. */
.hs-outline { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; }
.hs-fill {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: hs-fill 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hs-vessel:nth-of-type(1) .hs-fill { animation-delay: 1500ms; }
.hs-vessel:nth-of-type(2) .hs-fill { animation-delay: 1620ms; }
.hs-vessel:nth-of-type(3) .hs-fill { animation-delay: 1740ms; }
.hs-vessel:nth-of-type(4) .hs-fill { animation-delay: 1860ms; }

/* The legend can never push the page sideways: columns collapse to zero
   minimum and long words break. */
.hs-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-lab b { overflow-wrap: normal; white-space: nowrap; font-size: clamp(12px, 1.2vw, 17px); }
.hs-lab i { overflow-wrap: anywhere; letter-spacing: 0.05em; }
@media (max-width: 480px) {
  .hs-legend { gap: 2%; padding-inline: 2%; }
  .hs-lab b { font-size: 11px; letter-spacing: -0.02em; }
  .hs-lab i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-fill { animation: none; transform: none; }
}
/* ==== COLLECTION HERO LIGHT + WHO LIST 2026-09-08 ==== */

/* The same light through water that sits on navy, tuned for the three
   saturated line colours: white where the light falls, a navy shadow at the
   bottom, both under the type. */
.drench.on-light { position: relative; overflow: hidden; }
.drench.on-light::after {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(255, 255, 255, 0.30), transparent 68%),
    radial-gradient(34% 38% at 80% 20%, rgba(255, 255, 255, 0.17), transparent 68%),
    radial-gradient(44% 40% at 62% 86%, rgba(0, 31, 63, 0.16), transparent 70%);
  animation: bloom 36s ease-in-out infinite alternate;
}

/* Who it is for: the buyer, then the sentence that says what our own algae
   work gives that buyer. */
.who-list { display: grid; gap: var(--s5); }
.who-item + .who-item { border-top: 1px solid var(--rule); padding-top: var(--s5); }
.who-item h4 {
  margin: 0; font-family: var(--sans); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.02em; line-height: 1.25;
  color: var(--navy); text-wrap: balance;
}
.who-item p { margin: var(--s3) 0 0; font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 48ch; }

@media (prefers-reduced-motion: reduce) {
  .drench.on-light::after { animation: none; }
}
/* ==== ABOUT PORTFOLIO 2026-09-08 ==== */

/* The eight lines, four of them shipping. A row each with a hairline under it,
   so the list reads as a register rather than as a set of cards. */
.port { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.port span {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
  color: var(--navy);
}
.port span::after {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.port-live::after { content: "Live"; color: var(--confirm); }
.port-next { color: var(--graphite); }
.port-next::after { content: "Next"; color: var(--graphite); }
@media (max-width: 720px) {
  .port { grid-template-columns: 1fr; }
}


/* ==== FOUNDERS 2026-09-08 ==== */

/* One photograph each, with the role and the name under it on the same hard
   rule the rest of the page uses. */
.founder { margin: 0; }
.founder img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.founder figcaption { border-top: 3px solid var(--navy); padding-top: var(--s4); margin-top: var(--s4); }
.founder .f-role {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue);
}
.founder .f-name {
  display: block; margin-top: var(--s2); font-family: var(--sans); font-weight: 700;
  font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -0.02em; line-height: 1.15; color: var(--navy);
}