/* ==========================================================================
   WeAreBio — home page
   One stylesheet, no build step. Every selector is namespaced `wb-` so the
   sheet can be enqueued inside WordPress/Elementor without collisions.
   Derived from the "Organic" design system: cream ground, sage + clay accents.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground */
  --wb-cream:       #f5ead8;
  --wb-cream-deep:  #ecdfc8;
  --wb-paper:       #fbf7ee;
  --wb-ink:         #1d1c1a;
  --wb-ink-soft:    #5c5548;
  /* Was #8d8576 — only 3.07:1 on the cream ground, and it carries form labels,
     footer headings and the numbers' captions at ~13px. #6f6858 keeps the muted
     role and clears AA at 4.65:1 on cream, 5.17:1 on the card paper. */
  --wb-ink-faint:   #6f6858;

  /* Forest — the dark voice */
  --wb-forest:      #1e2a1c;
  --wb-forest-deep: #131b12;
  --wb-sage:        #56633f;
  --wb-sage-mid:    #728157;
  --wb-sage-soft:   #aebf92;
  --wb-sage-tint:   #e7efd8;

  /* Clay — the signal colour, used sparingly */
  --wb-clay:        #8c491a;
  --wb-clay-mid:    #b2622d;
  --wb-clay-tint:   #f7e8dc;

  --wb-rule:        color-mix(in srgb, var(--wb-ink) 13%, transparent);
  --wb-rule-strong: color-mix(in srgb, var(--wb-ink) 26%, transparent);
  --wb-rule-light:  color-mix(in srgb, #fff 22%, transparent);

  /* Type */
  --wb-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --wb-body:    "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wb-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Every ceiling here used to be reached around 1100-1400px, which froze the
     whole scale on anything wider. They now keep climbing to ~2400px, so the
     type grows with the display instead of stopping at a breakpoint nobody's
     window happens to cross. */
  --wb-fs-hero:  clamp(3.1rem, 1.1rem + 8.1vw, 10rem);
  --wb-fs-h2:    clamp(2.05rem, 1.1rem + 3.5vw, 4.6rem);
  --wb-fs-h3:    clamp(1.3rem, 1.08rem + 0.85vw, 2.2rem);
  --wb-fs-h4:    clamp(1.08rem, 1rem + 0.32vw, 1.45rem);
  --wb-fs-lead:  clamp(1.15rem, 0.95rem + 0.85vw, 2rem);
  --wb-fs-body:  clamp(1rem, 0.9375rem + 0.234vw, 1.32rem);
  --wb-fs-small: clamp(0.9rem, 0.825rem + 0.1875vw, 1.125rem);
  --wb-fs-mono:  clamp(0.72rem, 0.6625rem + 0.172vw, 0.94rem);

  --wb-track-tight: -0.028em;
  --wb-track-mono:  0.14em;

  /* Rhythm */
  --wb-pad-x:   clamp(1.25rem, 0.35rem + 3.6vw, 5.5rem);
  --wb-gutter:  max(var(--wb-pad-x), calc((100vw - var(--wb-maxw)) / 2));
  --wb-gap-sec: clamp(5.5rem, 3rem + 8.5vw, 11.5rem);
  --wb-maxw:    1280px;
  --wb-maxw-text: 60ch;

  --wb-r-sm:   10px;
  --wb-r-md:   18px;
  --wb-r-lg:   28px;
  --wb-r-xl:   clamp(22px, 2.6vw, 44px);
  --wb-r-pill: 999px;

  --wb-shadow-sm:  0 1px 2px rgba(29,28,26,.10), 0 4px 14px rgba(29,28,26,.05);
  --wb-shadow-md:  0 2px 6px rgba(29,28,26,.09), 0 14px 38px rgba(29,28,26,.10);
  --wb-shadow-lg:  0 4px 12px rgba(29,28,26,.10), 0 34px 80px rgba(29,28,26,.18);

  --wb-ease:     cubic-bezier(.16,1,.3,1);
  --wb-ease-io:  cubic-bezier(.65,0,.35,1);
  --wb-dur:      .45s;

  --wb-nav-h: clamp(80px, 48px + 4vw, 132px);

  --wb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
/* Lenis drives the scroll itself; native smooth scrolling fights it and wins,
   which silently kills every programmatic scroll. 1.1.x sets `lenis` on <html>,
   older builds set `lenis-smooth` — match both. */
html.lenis, html.lenis-smooth { scroll-behavior: auto !important; }

/* The UA rule for [hidden] is a plain `display: none`, so any author rule that
   sets a display value silently wins and the attribute stops working. That is
   how .wb-modal__done sat visible under the form while carrying `hidden`. */
[hidden] { display: none !important; }
html.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--wb-cream);
  color: var(--wb-ink);
  font-family: var(--wb-body);
  font-size: var(--wb-fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--wb-sage-soft); color: var(--wb-forest-deep); }

:focus-visible {
  outline: 2px solid var(--wb-clay);
  outline-offset: 3px;
  border-radius: 4px;
}
.wb-hero :focus-visible,
.wb-cta :focus-visible { outline-color: var(--wb-sage-soft); }

.wb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wb-skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  padding: .7rem 1.1rem; border-radius: var(--wb-r-sm);
  background: var(--wb-forest); color: var(--wb-cream);
  font-size: var(--wb-fs-small); font-weight: 600;
  transition: transform .25s var(--wb-ease);
}
.wb-skip:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   3. Type primitives
   -------------------------------------------------------------------------- */
.wb-kicker {
  margin: 0;
  font-family: var(--wb-mono);
  font-size: var(--wb-fs-mono);
  font-weight: 500;
  letter-spacing: var(--wb-track-mono);
  text-transform: uppercase;
  color: var(--wb-clay);
}
.wb-kicker--light { color: var(--wb-sage-soft); }

.wb-display {
  margin: 0;
  font-family: var(--wb-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 18, "WONK" 0;
  font-weight: 400;
  line-height: .96;
  letter-spacing: var(--wb-track-tight);
  text-wrap: balance;
}
.wb-h2 { font-size: var(--wb-fs-h2); }
.wb-h3 {
  margin: 0;
  font-family: var(--wb-body);
  font-size: var(--wb-fs-h3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.018em;
}
.wb-h4 {
  margin: 0;
  font-family: var(--wb-body);
  font-size: var(--wb-fs-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.wb-leadtext {
  margin: 0;
  font-size: var(--wb-fs-lead);
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.wb-body { margin: 0; max-width: var(--wb-maxw-text); text-wrap: pretty; }
.wb-body--soft { color: var(--wb-ink-soft); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.wb-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: clamp(50px, 44px + .55vw, 62px);
  padding: 0 clamp(1.5rem, 1.2rem + .6vw, 2.1rem);
  border: 1px solid transparent; border-radius: var(--wb-r-pill);
  background: none; cursor: pointer;
  font-size: clamp(.94rem, .88rem + .22vw, 1.14rem);
  font-weight: 600; letter-spacing: .005em;
  overflow: hidden; isolation: isolate;
  transition: color .35s var(--wb-ease), border-color .35s var(--wb-ease),
              background-color .35s var(--wb-ease), transform .35s var(--wb-ease);
}
.wb-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .5s var(--wb-ease);
}
.wb-btn:hover { transform: translateY(-2px); }
.wb-btn:active { transform: translateY(0); }
.wb-btn:hover::before { transform: none; }

.wb-btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.wb-btn__arrow { transition: transform .4s var(--wb-ease); }
.wb-btn:hover .wb-btn__arrow { transform: translateX(4px); }

/* Clay (#8c491a, the 700 step of the accent ramp) is the resting colour of
   every primary button — cream on it clears 5.7:1. Primaries then wipe to the
   other brand colour on hover; outlined buttons do the reverse and arrive at
   clay. Either way clay is what marks an action. */
.wb-btn--solid { background: var(--wb-clay); color: var(--wb-cream); border-color: var(--wb-clay); }
.wb-btn--solid::before { background: var(--wb-forest); }
.wb-btn--solid:hover { border-color: var(--wb-forest); }

.wb-btn--invert { background: var(--wb-clay); color: var(--wb-cream); border-color: var(--wb-clay); }
.wb-btn--invert::before { background: var(--wb-cream); }
.wb-btn--invert:hover { color: var(--wb-forest-deep); border-color: var(--wb-cream); }

.wb-btn--line { border-color: var(--wb-rule-strong); color: var(--wb-ink); }
.wb-btn--line::before { background: var(--wb-clay); }
.wb-btn--line:hover { color: var(--wb-cream); border-color: var(--wb-clay); }

.wb-btn--ghost { border-color: var(--wb-rule-light); color: #fff; }
.wb-btn--ghost::before { background: var(--wb-clay); }
.wb-btn--ghost:hover { color: var(--wb-cream); border-color: var(--wb-clay); }

/* Text link with a rule that wipes in */
.wb-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 0; border: 0; background: none; cursor: pointer;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink);
  background-image: linear-gradient(var(--wb-clay), var(--wb-clay));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .45s var(--wb-ease), color .3s var(--wb-ease);
}
.wb-link:hover { color: var(--wb-clay); background-size: 100% 1px; }
.wb-link span { transition: transform .4s var(--wb-ease); }
.wb-link:hover span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.wb-nav {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--wb-nav-h);
  padding: 0 var(--wb-gutter);
  color: #fff;
  transition: height .5s var(--wb-ease), color .5s var(--wb-ease);
}
.wb-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--wb-cream);
  border-bottom: 1px solid var(--wb-rule);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .5s var(--wb-ease), transform .5s var(--wb-ease);
}
.wb-nav.is-solid { color: var(--wb-ink); height: clamp(72px, 42px + 3.4vw, 112px); }
.wb-nav.is-solid::before { opacity: 1; transform: none; }

.wb-nav__brand {
  display: flex; align-items: center; margin-right: auto;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.wb-nav__brand img {
  height: clamp(56px, 32px + 3vw, 98px); width: auto;
  filter: brightness(0) invert(1);
  transition: height .5s var(--wb-ease), filter .5s var(--wb-ease);
}
.wb-nav.is-solid .wb-nav__brand img { height: clamp(50px, 28px + 2.6vw, 84px); filter: none; }

.wb-nav__links {
  display: flex; align-items: center; gap: .2rem;
  padding: .3rem;
  border-radius: var(--wb-r-pill);
  background: rgba(19,27,18,.38);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  transition: background .5s var(--wb-ease), border-color .5s var(--wb-ease);
}
.wb-nav.is-solid .wb-nav__links {
  background: rgba(29,28,26,.05);
  border-color: var(--wb-rule);
}
.wb-nav__link {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 .95rem;
  border: 0; border-radius: var(--wb-r-pill);
  background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--wb-mono); font-weight: 500;
  font-size: clamp(.78rem, .72rem + .18vw, .95rem);
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .35s var(--wb-ease), color .35s var(--wb-ease);
}
.wb-nav__link:hover { background: rgba(255,255,255,.18); }
.wb-nav.is-solid .wb-nav__link:hover { background: rgba(29,28,26,.07); }
.wb-nav__link[aria-current="page"] { background: #fff; color: var(--wb-forest-deep); }
.wb-nav.is-solid .wb-nav__link[aria-current="page"] { background: var(--wb-forest); color: var(--wb-cream); }

.wb-nav__cta {
  margin-left: .55rem; min-height: clamp(46px, 3.2vw, 56px); padding: 0 1.35rem;
  font-size: clamp(.78rem, .72rem + .18vw, .95rem);
  background: rgba(19,27,18,.38);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.wb-nav.is-solid .wb-nav__cta {
  border-color: var(--wb-clay); background: var(--wb-clay); color: var(--wb-cream);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.wb-nav.is-solid .wb-nav__cta::before { background: var(--wb-forest); }
.wb-nav.is-solid .wb-nav__cta:hover { color: var(--wb-cream); border-color: var(--wb-forest); }
.wb-nav.is-solid .wb-nav__cta::before { background: var(--wb-forest); }

.wb-burger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -.7rem;
  border: 0; background: none; cursor: pointer;
}
.wb-burger__box { display: block; width: 27px; height: 14px; position: relative; }
.wb-burger__box i {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .45s var(--wb-ease), opacity .25s var(--wb-ease);
}
.wb-burger__box i:nth-child(1) { top: 0; }
.wb-burger__box i:nth-child(2) { bottom: 0; }
.wb-burger[aria-expanded="true"] .wb-burger__box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wb-burger[aria-expanded="true"] .wb-burger__box i:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.wb-drawer {
  position: fixed; inset: 0; z-index: 89;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: calc(var(--wb-nav-h) + 2rem) var(--wb-gutter) 2.5rem;
  background: var(--wb-forest);
  color: var(--wb-cream);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--wb-ease), visibility 0s linear .7s;
}
.wb-drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.wb-drawer__link {
  display: block; padding: .35rem 0; border: 0; background: none; cursor: pointer;
  text-align: left;
  font-family: var(--wb-display); font-size: clamp(2rem, 9vw, 3.2rem);
  font-variation-settings: "SOFT" 18; line-height: 1.08;
  letter-spacing: var(--wb-track-tight); color: var(--wb-cream);
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--wb-ease), transform .5s var(--wb-ease), color .3s var(--wb-ease);
  transition-delay: calc(.12s + var(--i, 0) * .055s);
}
.wb-drawer.is-open .wb-drawer__link { opacity: 1; transform: none; }
.wb-drawer__link:hover { color: var(--wb-sage-soft); }
/* Where you are, in the mobile menu. The desktop bar says it with a filled
   pill; at this size a pill on 3rem display type would be a slab, so it is a
   rule under the word instead. Same attribute drives both. */
.wb-drawer__link[aria-current="page"] {
  color: var(--wb-sage-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.wb-drawer__foot {
  margin-top: 2.2rem; padding-top: 1.6rem;
  border-top: 1px solid var(--wb-rule-light);
  display: flex; flex-direction: column; gap: .45rem;
  font-size: var(--wb-fs-small); color: var(--wb-sage-soft);
  opacity: 0; transition: opacity .5s var(--wb-ease) .45s;
}
.wb-drawer.is-open .wb-drawer__foot { opacity: 1; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.wb-hero {
  position: relative;
  /* svh everywhere, not vh: on a browser with a retracting toolbar vh grows
     mid-scroll and the scene's runway changes length under the reader. On a
     desktop the two are identical, so nothing is lost by being consistent. */
  height: 180svh;
  background: var(--wb-cream);
  --p: 0;
}
.wb-hero__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: stretch;
  padding: 0;
  overflow: clip;
}
.wb-hero__frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--wb-forest-deep);
}

/* The hero photograph lives in exactly two custom properties, and nowhere else.
   To change it, redefine this one rule — in WordPress, from Additional CSS.
   Paths here are relative to THIS file (assets/css/), hence the `../img/`;
   an override pasted elsewhere should use a full URL. Keep the pair together:
   --wb-hero-img is the sharp plate, --wb-hero-img-blur the 520px stand-in that
   fills the frame behind it while the large one is still arriving. */
.wb-hero {
  --wb-hero-img:      url('../img/hero-leaf.jpg');
  --wb-hero-img-blur: url('../img/hero-leaf-blur.jpg');
}
/* Prepared and ready to swap in — replace the pair above with any of these.
   Each has been checked at the real crop, against the real veil, with the
   headline over it. See wordpress/HERO-IMAGES.md for the WordPress route.

     hero-leaf         leaf, backlit          green    (in use)
     hero-kiwi         kiwi, backlit          green-gold
     hero-strawberry   strawberry macro       red
     hero-raspberry    raspberries, droplets  soft red
     hero-pomegranate  pomegranate arils      burgundy                       */

.wb-hero__media { position: absolute; inset: 0; overflow: hidden; }
.wb-hero__layer {
  position: absolute; inset: -8%;
  background-size: cover; background-position: 62% 48%;
  will-change: transform;
}
.wb-hero__layer--far {
  background-image: var(--wb-hero-img-blur);
  transform: scale(calc(1.45 + var(--p) * .4)) translate3d(0, calc(var(--p) * -1.5%), 0);
  filter: blur(28px) saturate(.8) brightness(.6);
  opacity: .9;
}
.wb-hero__layer--near {
  background-image: var(--wb-hero-img);
  transform: scale(calc(1.04 + var(--p) * .17)) translate3d(0, calc(var(--p) * -3%), 0);
  clip-path: inset(0 0 0 0);
}

.wb-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(19,27,18,.88) 0%, rgba(19,27,18,.42) 38%, rgba(19,27,18,.10) 70%, rgba(19,27,18,.38) 100%),
    linear-gradient(100deg, rgba(19,27,18,.80) 0%, rgba(19,27,18,.42) 46%, rgba(19,27,18,.06) 100%);
  opacity: calc(.92 + var(--p) * .08);
  /* Promoted up front. At rest these values are neutral, so the browser gives
     the element no layer of its own; the first scroll makes them non-neutral
     and the layer has to be built right then, which is felt as a hitch at the
     start of the scroll and again on the way back to the top. */
  will-change: opacity;
}
.wb-hero__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(46% 46% at 66% 34%, rgba(190,220,140,.42) 0%, rgba(190,220,140,0) 68%);
  mix-blend-mode: screen;
  animation: wb-breathe 18s var(--wb-ease-io) infinite;
  pointer-events: none;
}
@keyframes wb-breathe {
  0%, 100% { opacity: .40; transform: translate3d(-3%, 2%, 0) scale(1); }
  50%      { opacity: .85; transform: translate3d(3%, -2%, 0) scale(1.16); }
}
.wb-grain {
  position: absolute; inset: -50%;
  background-image: var(--wb-grain);
  opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  animation: wb-drift 24s linear infinite;
}
@keyframes wb-drift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-1.5%, 1.5%, 0); }
  100% { transform: translate3d(0,0,0); }
}

.wb-hero__shade {
  position: absolute; inset: 0;
  background: var(--wb-forest-deep);
  opacity: 0; pointer-events: none;
}

.wb-hero__content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  gap: 1.05rem;
  width: 100%;
  padding: var(--wb-nav-h) var(--wb-gutter) clamp(4.5rem, 11vh, 8.5rem);
  color: #fff;
  /* Leaves upward while the page arrives upward — one movement, and still on
     screen as the page starts climbing, so the leaf is never left alone. */
  transform: translateY(calc(var(--p) * -17svh));
  opacity: calc(1 - var(--p) * 1.9);
  will-change: transform, opacity;
}
/* Bottom-aligned via an auto margin rather than justify-content: flex-end.
   Both look identical while the content fits; the difference is what happens
   when it does not. flex-end overflows upward THROUGH the padding, so on a
   short window the eyebrow climbed into the header and collided with the logo.
   An auto margin collapses to zero instead, and the top padding always holds. */
.wb-hero__content > :first-child { margin-top: auto; }

.wb-hero__eyebrow {
  color: var(--wb-sage-soft);
  font-size: clamp(.8rem, .7rem + .25vw, 1.06rem);
}
.wb-hero__title {
  font-size: var(--wb-fs-hero);
  max-width: 10ch;
  color: #fff;
}
.wb-hero__lead { max-width: 30ch; color: #fff; font-weight: 500; }
.wb-hero__note {
  max-width: 48ch; color: rgba(255,255,255,.86);
  font-size: var(--wb-fs-body); line-height: 1.6;
}

/* Narrow viewports compress the 100deg wash into a near-vertical one, so the
   copy ends up over the bright middle of the leaf. Darken from the bottom. */
@media (max-width: 760px) {
  /* A full-screen blur layer plus an animated overlay-blend grain is a lot of
     compositing for a phone, and the stronger veil hides both. Drop them. */
  .wb-hero__layer--far { display: none; }
  .wb-grain { inset: 0; animation: none; opacity: .10; }
  /* mix-blend-mode forces the whole hero to recomposite every frame, and this
     one also animates for ever. On a phone it sits on top of a layer that the
     scroll scene is already scaling. Keep the light, drop the work. */
  .wb-hero__glow { animation: none; mix-blend-mode: normal; opacity: .30; }

  .wb-hero__veil {
    background:
      linear-gradient(to top, rgba(19,27,18,.95) 0%, rgba(19,27,18,.80) 34%,
                              rgba(19,27,18,.52) 62%, rgba(19,27,18,.30) 82%,
                              rgba(19,27,18,.52) 100%);
  }
}
.wb-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .7rem; }

/* Hero side rail — quiet detail that reads as considered */
.wb-hero__rail {
  position: absolute; z-index: 2;
  right: var(--wb-gutter); bottom: clamp(4.5rem, 11vh, 8.5rem);
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: right;
  opacity: calc(1 - var(--p) * 2);
}
.wb-hero__rail .wb-enter { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.wb-hero__rail i { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.5), transparent); }

.wb-hero__cue {
  position: absolute; z-index: 2;
  left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: rgba(255,255,255,.62);
  opacity: calc(1 - var(--p) * 4);
  will-change: opacity;
  pointer-events: none;
}
.wb-hero__cue .wb-enter { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.wb-hero__cue b { display: block; width: 1px; height: 34px; background: rgba(255,255,255,.45); overflow: hidden; position: relative; }
.wb-hero__cue b::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  animation: wb-cue 2.4s var(--wb-ease-io) infinite;
}
@keyframes wb-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   7. Entrance choreography
   -------------------------------------------------------------------------- */
/* Masked line reveal, used for display headings */
.wb-line { display: block; overflow: hidden; }
.wb-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.wb-w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%);
  transition: transform 1.05s var(--wb-ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .075s);
}
.wb-reveal-words.is-in .wb-w > i { transform: none; }

/* Generic reveal */
.wb-rise {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--wb-ease), transform .9s var(--wb-ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .085s);
}
.wb-rise.is-in { opacity: 1; transform: none; }

/* Media that unmasks */
.wb-unmask { overflow: hidden; }
.wb-unmask img, .wb-unmask .wb-fill {
  transform: scale(1.16);
  transition: transform 1.4s var(--wb-ease), filter 1.4s var(--wb-ease);
  transition-delay: var(--d, 0s);
}
.wb-unmask::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--wb-cream);
  transform-origin: bottom;
  transition: transform 1.15s var(--wb-ease);
  transition-delay: var(--d, 0s);
}
.wb-unmask.is-in::after { transform: scaleY(0); }
.wb-unmask.is-in img, .wb-unmask.is-in .wb-fill { transform: scale(1); }

/* Rule that draws itself */
.wb-rule {
  height: 1px; border: 0; margin: 0;
  background: var(--wb-rule);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--wb-ease);
}
.wb-rule.is-in { transform: none; }

.wb-hero__intro .wb-hero__eyebrow,
.wb-hero__intro .wb-hero__lead,
.wb-hero__intro .wb-hero__note,
.wb-hero__intro .wb-hero__actions { opacity: 0; transform: translateY(22px); }
html.wb-ready .wb-hero__intro .wb-hero__eyebrow,
html.wb-ready .wb-hero__intro .wb-hero__lead,
html.wb-ready .wb-hero__intro .wb-hero__note,
html.wb-ready .wb-hero__intro .wb-hero__actions {
  opacity: 1; transform: none;
  transition: opacity 1s var(--wb-ease), transform 1s var(--wb-ease);
}
html.wb-ready .wb-hero__intro .wb-hero__eyebrow { transition-delay: .30s; }
html.wb-ready .wb-hero__intro .wb-hero__lead   { transition-delay: 1.00s; }
html.wb-ready .wb-hero__intro .wb-hero__note   { transition-delay: 1.12s; }
html.wb-ready .wb-hero__intro .wb-hero__actions{ transition-delay: 1.24s; }

.wb-hero__layer--near { clip-path: inset(14% 16% 14% 16% round 40px); transform: scale(1.26); }
html.wb-ready .wb-hero__layer--near {
  clip-path: inset(0 0 0 0 round 0px);
  transform: scale(calc(1.04 + var(--p) * .17)) translate3d(0, calc(var(--p) * -3%), 0);
  transition: clip-path 1.7s var(--wb-ease) .1s, transform 2.2s var(--wb-ease) .1s;
}
html.wb-js .wb-enter { opacity: 0; }
html.wb-ready .wb-enter { opacity: 1; transition: opacity 1s var(--wb-ease) 1.55s; }

html.wb-js .wb-nav { opacity: 0; transform: translateY(-14px); }
html.wb-ready .wb-nav {
  opacity: 1; transform: none;
  transition: opacity .9s var(--wb-ease) .15s, transform .9s var(--wb-ease) .15s,
              height .5s var(--wb-ease), color .5s var(--wb-ease);
}

/* --------------------------------------------------------------------------
   8. Page shell
   -------------------------------------------------------------------------- */
.wb-main {
  position: relative; z-index: 3;
  background: var(--wb-cream);
  border-radius: var(--wb-r-xl) var(--wb-r-xl) 0 0;
  /* Starts climbing at ~26% of the hero runway: the two phases overlap. */
  margin-top: -55vh;
  box-shadow: 0 -40px 90px rgba(19,27,18,.30);
}
.wb-section { padding: 0 var(--wb-gutter); }
.wb-section + .wb-section { margin-top: var(--wb-gap-sec); }
.wb-section:first-child { padding-top: clamp(4.5rem, 9vw, 9rem); }
.wb-shell { width: 100%; }

.wb-sechead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 2rem;
  margin-bottom: 1.6rem;
}
.wb-sechead__copy { display: flex; flex-direction: column; gap: .85rem; max-width: min(100%, 40rem); }

/* --------------------------------------------------------------------------
   9. Manifesto — the line that catches the hero
   -------------------------------------------------------------------------- */
.wb-manifesto { padding-top: clamp(5rem, 10vw, 9.5rem); }
.wb-manifesto__inner { width: 100%; }
.wb-manifesto__meta {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  padding-bottom: 1.6rem;
}
.wb-manifesto__text {
  font-family: var(--wb-display);
  font-variation-settings: "SOFT" 20, "WONK" 0;
  font-size: clamp(1.7rem, .85rem + 3.1vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  max-width: 21ch;
  margin: 1.8rem 0 0;
  text-wrap: balance;
}
.wb-manifesto__text em { font-style: normal; color: var(--wb-clay); }
.wb-manifesto__aside {
  margin-top: 2.2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem 2.5rem;
}
.wb-manifesto__aside p { margin: 0; color: var(--wb-ink-soft); }

/* --------------------------------------------------------------------------
   10. Split (copy + media)
   -------------------------------------------------------------------------- */
.wb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.wb-split--flip { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.wb-split--flip .wb-split__copy { order: 2; }
.wb-split__copy { display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; }
.wb-split__copy .wb-btn { margin-top: .6rem; }

.wb-figure {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--wb-r-lg);
  overflow: hidden;
  background: var(--wb-cream-deep);
  --p: 0;
}
.wb-figure--tall { aspect-ratio: 4 / 5; }
.wb-figure img { width: 100%; height: 100%; object-fit: cover; }
.wb-figure__par {
  position: absolute; inset: -12% 0;
  height: 124%;
  transform: translate3d(0, calc((var(--p) - .5) * 16%), 0);
  will-change: transform;
}
.wb-figure__par img { height: 100%; }

.wb-figcap {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: .6rem;
  margin: 1rem;
  padding: .55rem 1rem;
  border-radius: var(--wb-r-pill);
  background: rgba(251,247,238,.9);
  backdrop-filter: blur(10px);
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-soft);
}
.wb-figcap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wb-clay); }

.wb-statement {
  margin: 0;
  font-family: var(--wb-display);
  font-variation-settings: "SOFT" 20;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem);
  line-height: 1.16; letter-spacing: -.022em;
  color: var(--wb-sage);
  padding-left: 1.15rem;
  border-left: 2px solid var(--wb-clay);
}

/* --------------------------------------------------------------------------
   11. Proof strip
   -------------------------------------------------------------------------- */
.wb-proof {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--wb-rule);
  border-bottom: 1px solid var(--wb-rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.wb-proof__item {
  padding: clamp(1.5rem, 3vw, 2.4rem) 1.2rem clamp(1.5rem, 3vw, 2.4rem) 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.wb-proof__item + .wb-proof__item { border-left: 1px solid var(--wb-rule); padding-left: clamp(1.2rem, 2.5vw, 2.2rem); }
.wb-proof__n {
  font-family: var(--wb-display);
  font-variation-settings: "SOFT" 22;
  font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.2rem);
  line-height: .95; letter-spacing: -.035em;
  color: var(--wb-sage);
  font-variant-numeric: tabular-nums;
}
.wb-proof__l {
  margin: 0;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}

/* --------------------------------------------------------------------------
   12. Portfolio
   -------------------------------------------------------------------------- */
.wb-leads {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.4rem;
}
.wb-lead {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(360px, 42vw, 520px);
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border: 0; border-radius: var(--wb-r-lg);
  background: var(--wb-forest-deep); color: #fff;
  overflow: hidden; cursor: pointer; text-align: left;
  isolation: isolate;
}
.wb-lead__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.wb-lead__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--wb-ease), filter 1.1s var(--wb-ease);
}
.wb-lead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(19,27,18,.90) 6%, rgba(19,27,18,.48) 42%, rgba(19,27,18,.10) 82%);
  transition: opacity .6s var(--wb-ease);
}
.wb-lead:hover .wb-lead__media img { transform: scale(1.08); }
.wb-lead__tag {
  align-self: flex-start;
  padding: .4rem .85rem; border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-rule-light);
  background: rgba(19,27,18,.3);
  backdrop-filter: blur(8px);
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: #fff;
}
.wb-lead__body { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
.wb-lead__title {
  font-family: var(--wb-display); font-variation-settings: "SOFT" 20;
  font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.7rem);
  line-height: 1.02; letter-spacing: -.03em; margin: 0;
}
.wb-lead__note { margin: 0; max-width: 38ch; color: rgba(255,255,255,.8); font-size: var(--wb-fs-small); line-height: 1.55; }
.wb-lead__cue {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-sage-soft);
}
.wb-lead__cue span { transition: transform .45s var(--wb-ease); }
.wb-lead:hover .wb-lead__cue span { transform: translateX(6px); }

.wb-cats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}
.wb-cat {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1rem 1rem 1.35rem;
  border: 1px solid var(--wb-rule);
  border-radius: var(--wb-r-md);
  background: var(--wb-paper);
  text-align: left;
  transition: transform .5s var(--wb-ease), box-shadow .5s var(--wb-ease), border-color .5s var(--wb-ease);
}
.wb-cat:hover { transform: translateY(-6px); box-shadow: var(--wb-shadow-md); border-color: transparent; }
.wb-cat__img {
  border-radius: var(--wb-r-sm); overflow: hidden; aspect-ratio: 16/10;
  background: var(--wb-cream-deep);
}
.wb-cat__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--wb-ease);
}
.wb-cat:hover .wb-cat__img img { transform: scale(1.07); }
/* A product shot on a white sweep: multiply drops its ground into the card's
   warm paper instead of leaving a cold grey patch on the cream page. */
.wb-cat__img--cutout { background: var(--wb-paper); }
.wb-cat__img--cutout img { mix-blend-mode: multiply; }
.wb-cat__code {
  margin: .2rem 0 0;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-clay);
}
.wb-cat__note { margin: 0; font-size: var(--wb-fs-small); line-height: 1.5; color: var(--wb-ink-soft); }

/* --------------------------------------------------------------------------
   13. Markets — the fan of slats
   -------------------------------------------------------------------------- */
.wb-markets { margin-top: 2.6rem; }
.wb-fan {
  display: flex; align-items: center; gap: 10px;
  padding: 2.5rem 0 1rem;
  perspective: 1400px;
}
.wb-slat {
  position: relative; flex: 1 1 0; min-width: 0;
  height: clamp(300px, 38vw, 440px);
  border: 0; padding: 0; cursor: pointer;
  border-radius: var(--wb-r-md);
  overflow: hidden;
  background: var(--wb-forest-deep);
  box-shadow: var(--wb-shadow-md);
  opacity: 0;
  transform: translateY(60px) rotate(0deg);
  transition:
    flex-grow .55s var(--wb-ease),
    transform .9s var(--wb-ease),
    opacity .9s var(--wb-ease),
    filter .5s var(--wb-ease),
    box-shadow .5s var(--wb-ease);
  transition-delay: calc(var(--i, 0) * .07s);
}
.wb-fan.is-in .wb-slat { opacity: 1; transform: translateY(var(--ty, 0px)) rotate(var(--rot, 0deg)); }
.wb-slat:nth-child(1) { --rot: -3.4deg; --ty: 14px; }
.wb-slat:nth-child(2) { --rot: -2.1deg; --ty: 6px; }
.wb-slat:nth-child(3) { --rot: -.7deg;  --ty: 0px; }
.wb-slat:nth-child(4) { --rot: .7deg;   --ty: 0px; }
.wb-slat:nth-child(5) { --rot: 2.1deg;  --ty: 6px; }
.wb-slat:nth-child(6) { --rot: 3.4deg;  --ty: 14px; }

.wb-slat__img { position: absolute; inset: 0; }
.wb-slat__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--wb-ease), filter .6s var(--wb-ease);
}
.wb-slat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,27,18,.92) 0%, rgba(19,27,18,.45) 45%, rgba(19,27,18,.08) 100%);
  transition: opacity .5s var(--wb-ease);
}
.wb-fan.is-in:hover .wb-slat:not(:hover),
.wb-fan.is-in:focus-within .wb-slat:not(:focus-visible):not(:hover) {
  filter: saturate(.55) brightness(.85);
  opacity: .78;
}
.wb-fan.is-in .wb-slat:hover,
.wb-fan.is-in .wb-slat:focus-visible {
  flex-grow: 2.3;
  transform: translateY(-10px) rotate(0deg);
  filter: none; opacity: 1;
  box-shadow: var(--wb-shadow-lg);
  z-index: 3; outline: none;
}
.wb-slat:hover .wb-slat__img img { transform: scale(1.06); }

.wb-slat__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.1rem 1.15rem;
  display: flex; flex-direction: column; gap: .35rem;
  text-align: left; color: #fff;
}
.wb-slat__label {
  margin: 0; font-family: var(--wb-body); font-weight: 700;
  font-size: clamp(.95rem, .88rem + .3vw, 1.18rem); line-height: 1.15;
  letter-spacing: -.012em;
}
.wb-slat__note {
  margin: 0; font-size: var(--wb-fs-small); line-height: 1.45;
  color: rgba(255,255,255,.8);
  max-width: 30ch;
  opacity: 0; max-height: 0; overflow: hidden;
  transform: translateY(8px);
  transition: opacity .45s var(--wb-ease), transform .45s var(--wb-ease), max-height .45s var(--wb-ease);
}
.wb-slat:hover .wb-slat__note,
.wb-slat:focus-visible .wb-slat__note { opacity: 1; max-height: 6rem; transform: none; }

.wb-slat__badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(251,247,238,.92);
  color: var(--wb-forest-deep);
  font-size: 15px; font-weight: 700; line-height: 1;
  transition: background .4s var(--wb-ease), color .4s var(--wb-ease), transform .5s var(--wb-ease);
}
.wb-slat:hover .wb-slat__badge,
.wb-slat:focus-visible .wb-slat__badge {
  background: var(--wb-sage); color: #fff; transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   15. Lab
   -------------------------------------------------------------------------- */
.wb-ticks {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .1rem 2rem;
}
.wb-ticks li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem 0;
  border-top: 1px solid var(--wb-rule);
  font-size: var(--wb-fs-small);
}
.wb-ticks li::before {
  content: ""; flex: none; margin-top: .42em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wb-clay);
}

/* --------------------------------------------------------------------------
   16. Research
   -------------------------------------------------------------------------- */
.wb-projects {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.2rem;
}
.wb-project {
  position: relative;
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--wb-r-lg);
  background: var(--wb-cream-deep);
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .5s var(--wb-ease), box-shadow .5s var(--wb-ease);
}
.wb-project:hover { transform: translateY(-5px); box-shadow: var(--wb-shadow-md); }
.wb-project__note { margin: 0; color: var(--wb-ink-soft); max-width: 42ch; }
.wb-project__foot { margin-top: auto; padding-top: 1.6rem; }
.wb-project__foot img { height: 40px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

/* Credential plates — the EU marks carry their own colour and their own
   backgrounds, so each sits on a paper plate instead of on the cream ground.
   They keep their real colours without the blue EU block fighting the page. */
.wb-creds {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.8rem, 3vw, 2.5rem);
  border-top: 1px solid var(--wb-rule);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.1rem clamp(1.5rem, 3vw, 2.8rem);
}
.wb-creds__label {
  margin: 0; flex: none;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}
.wb-creds__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.wb-plate {
  display: grid; place-items: center;
  height: clamp(64px, 4.6vw, 88px);
  padding: 0 clamp(.9rem, 1.5vw, 1.6rem);
  border: 1px solid var(--wb-rule);
  border-radius: var(--wb-r-md);
  background: var(--wb-paper);
  transition: transform .4s var(--wb-ease), box-shadow .4s var(--wb-ease),
              border-color .4s var(--wb-ease);
}
.wb-plate:hover { transform: translateY(-3px); box-shadow: var(--wb-shadow-md); border-color: transparent; }
.wb-plate img {
  height: clamp(30px, 2.1vw, 40px);
  width: auto; max-width: 100%; object-fit: contain;
}
/* A square mark reads smaller than a wordmark at the same height. */
.wb-plate--mark img { height: clamp(44px, 3.2vw, 60px); }

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */
.wb-cta {
  position: relative;
  margin: var(--wb-gap-sec) var(--wb-gutter) 0;
  border-radius: var(--wb-r-xl);
  overflow: hidden;
  background: var(--wb-forest);
  color: var(--wb-cream);
  isolation: isolate;
  --p: 0;
}
.wb-cta__bg { position: absolute; inset: -15% 0; z-index: -2; }
.wb-cta__bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* A different crop of the hero leaf: the page closes on the material it
     opened with, without reading as the same picture twice. */
  object-position: 18% 72%;
  transform: translate3d(0, calc((var(--p) - .5) * -12%), 0) scale(1.06);
  will-change: transform;
}
.wb-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(19,27,18,.94) 12%, rgba(19,27,18,.70) 58%, rgba(19,27,18,.42) 100%);
}
.wb-cta__inner {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 2rem 3rem;
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.6rem, 4.5vw, 4.5rem);
}
.wb-cta__copy { display: flex; flex-direction: column; gap: 1rem; max-width: min(100%, 42rem); }
.wb-cta__copy .wb-h2 { color: var(--wb-cream); }
.wb-cta__copy p { margin: 0; color: rgba(245,234,216,.72); max-width: 34ch; }
.wb-cta__side { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
/* Two buttons side by side, wrapping onto their own lines when the column is
   narrow. Contact stays the primary; the catalogue is the quieter of the two,
   the same pairing the hero uses. */
.wb-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.wb-cta__mail {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-sage-soft);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.wb-footer {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(3rem, 6vw, 5rem) var(--wb-gutter) 2rem;
  background: var(--wb-cream);
  border-top: 1px solid var(--wb-rule);
}
.wb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem clamp(2rem, 5vw, 4rem);
}
.wb-footer__brand { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.wb-footer__brand img { height: clamp(60px, 38px + 2.4vw, 88px); width: auto; }
.wb-footer__quote {
  margin: 0; max-width: 34ch;
  font-family: var(--wb-display); font-variation-settings: "SOFT" 22;
  font-size: 1.12rem; line-height: 1.32; letter-spacing: -.018em;
  color: var(--wb-ink-soft);
}
.wb-footer__quote b { display: block; margin-top: .5rem; font-family: var(--wb-mono); font-size: var(--wb-fs-mono); font-weight: 500; letter-spacing: var(--wb-track-mono); text-transform: uppercase; color: var(--wb-ink-faint); }
.wb-footer__col { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.wb-footer__title {
  margin: 0 0 .5rem;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}
.wb-footer__link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--wb-fs-small); color: var(--wb-ink-soft); text-align: left;
  transition: color .3s var(--wb-ease), transform .3s var(--wb-ease);
}
.wb-footer__link:hover { color: var(--wb-clay); transform: translateX(3px); }
.wb-footer__addr { margin: 0 0 .3rem; font-size: var(--wb-fs-small); color: var(--wb-ink-soft); line-height: 1.55; }

.wb-footer__legal {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: 1.4rem; border-top: 1px solid var(--wb-rule);
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: center;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}
.wb-footer__legal a:hover { color: var(--wb-clay); }
.wb-footer__legal .wb-spacer { margin-left: auto; }

/* Back to top */
.wb-totop {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--wb-rule-strong); border-radius: 50%;
  background: var(--wb-paper); color: var(--wb-ink);
  cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .45s var(--wb-ease), transform .45s var(--wb-ease), background .3s var(--wb-ease), color .3s var(--wb-ease);
}
.wb-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wb-totop:hover { background: var(--wb-clay); color: var(--wb-cream); border-color: var(--wb-clay); }

/* --------------------------------------------------------------------------
   19. Inner pages
   The home opens with a pinned, full-screen hero; that gesture is its alone.
   Inner pages get a shorter banner with the same materials, so they read as
   the same site without competing with the front door.
   -------------------------------------------------------------------------- */
.wb-phero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(400px, 58vh, 620px);
  overflow: hidden;
  background: var(--wb-forest-deep);
  color: #fff;
  --p: .5;
}
.wb-phero__media { position: absolute; inset: -10% 0; height: 120%; }
/* cover keeps a centred band of the image, which is only right when the subject
   is centred. Selected by filename so the rule travels with the picture, in the
   static build and in WordPress alike, where the src is a full URL. */
.wb-phero__media img[src$="grapefruit.jpg"]     { object-position: 72% 50%; }  /* slice sits right */
.wb-phero__media img[src$="origin-orchard.jpg"] { object-position: 66% 50%; }  /* tree, not the sun */
.wb-phero__media img[src$="application-lab.jpg"]{ object-position: 50% 38%; }  /* keep the face high */
.wb-phero__media img[src$="field.jpg"]          { object-position: 55% 45%; }  /* the handshake */

.wb-phero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0, calc((var(--p) - .5) * -14%), 0) scale(1.04);
  will-change: transform;
}
.wb-phero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(19,27,18,.92) 4%, rgba(19,27,18,.55) 45%, rgba(19,27,18,.22) 100%),
    linear-gradient(100deg, rgba(19,27,18,.72) 0%, rgba(19,27,18,.34) 55%, rgba(19,27,18,.04) 100%);
}
.wb-phero__inner {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; gap: 1rem;
  padding: calc(var(--wb-nav-h) + clamp(3.5rem, 9vh, 6rem)) var(--wb-gutter) clamp(2.6rem, 6vh, 4.5rem);
}
.wb-phero__title { font-size: clamp(2.6rem, 1.3rem + 5.2vw, 5.6rem); color: #fff; max-width: 15ch; }
.wb-phero__lead { max-width: 52ch; color: rgba(255,255,255,.84); }

.wb-main--page { margin-top: -3vh; box-shadow: 0 -24px 50px rgba(19,27,18,.16); }

/* Pills — a stated range, not a filter control. */
.wb-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.wb-pill {
  padding: .5rem 1rem; border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-rule); background: var(--wb-paper);
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-soft);
}
.wb-pill--accent { background: var(--wb-sage-tint); border-color: transparent; color: var(--wb-sage); }

/* Product entry: image, copy, and the specification behind a disclosure. */
.wb-prod {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3.2rem);
}
.wb-prod + .wb-prod { margin-top: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--wb-rule); }

/* Deep links from the home cards land on a range, not at the top of the page.
   The offset clears the fixed header; the brief wash tells the reader which
   block the link meant, then fades so it does not read as a permanent state. */
.wb-prod[id] { scroll-margin-top: calc(var(--wb-nav-h) + clamp(.8rem, 2vw, 1.8rem)); }
.wb-prod[id]::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(clamp(1rem, 2vw, 1.6rem) * -1);
  border-radius: var(--wb-r-lg);
  background: var(--wb-sage-tint);
  opacity: 0; pointer-events: none;
}
.wb-prod[id] { position: relative; }
.wb-prod.is-targeted::before { animation: wb-target 2.6s var(--wb-ease) forwards; }
@keyframes wb-target {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.wb-prod--flip .wb-prod__media { order: 2; }
.wb-prod__media {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--wb-r-lg); overflow: hidden;
  background: var(--wb-cream-deep);
}
.wb-prod__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--wb-ease);
}
.wb-prod:hover .wb-prod__media img { transform: scale(1.04); }
.wb-prod__media--cutout { background: var(--wb-paper); }
.wb-prod__media--cutout img { mix-blend-mode: multiply; }
.wb-prod__copy { display: flex; flex-direction: column; gap: .75rem; }
.wb-prod__tags { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .2rem; }
.wb-prod__tag {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}

/* Specification disclosure — native <details>, no script. */
.wb-spec { margin-top: .9rem; border-top: 1px solid var(--wb-rule); }
.wb-spec > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-soft);
  transition: color .3s var(--wb-ease);
}
.wb-spec > summary::-webkit-details-marker { display: none; }
.wb-spec > summary:hover { color: var(--wb-clay); }
.wb-spec__sign {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--wb-rule-strong); border-radius: 50%;
  font-size: 14px; line-height: 1;
  transition: transform .45s var(--wb-ease), background .3s var(--wb-ease),
              color .3s var(--wb-ease), border-color .3s var(--wb-ease);
}
.wb-spec[open] .wb-spec__sign { background: var(--wb-forest); color: var(--wb-cream); border-color: var(--wb-forest); }
.wb-spec > summary:hover .wb-spec__sign { background: var(--wb-clay); color: var(--wb-cream); border-color: var(--wb-clay); }
.wb-spec[open] .wb-spec__sign { transform: rotate(135deg); }
.wb-spec__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem 2rem;
  margin: 0; padding: .2rem 0 1.5rem;
}
.wb-spec__body dt {
  margin-bottom: .3rem;
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-clay);
}
.wb-spec__body dd { margin: 0; font-size: var(--wb-fs-small); line-height: 1.55; color: var(--wb-ink-soft); }

/* Progressive: browsers that can interpolate to `auto` get a real open/close. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .wb-spec::details-content {
    height: 0; overflow: hidden;
    transition: height .45s var(--wb-ease), content-visibility .45s allow-discrete;
  }
  .wb-spec[open]::details-content { height: auto; }
}

/* Numbered set — only where the order carries meaning. */
.wb-numbered {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.8rem 2.2rem;
  margin-top: 2rem;
}
.wb-num {
  display: flex; flex-direction: column; gap: .55rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--wb-clay);
}
.wb-num__n {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); color: var(--wb-clay);
}
.wb-num p { margin: 0; font-size: var(--wb-fs-small); line-height: 1.55; color: var(--wb-ink-soft); }
.wb-num--light { border-top-color: var(--wb-sage-soft); }
.wb-num--light .wb-num__n { color: var(--wb-sage-soft); }
.wb-num--light h3 { color: var(--wb-cream); }
.wb-num--light p { color: rgba(245,234,216,.66); }

/* Capability cards */
.wb-caps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.2rem;
}
.wb-cap {
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--wb-rule); border-radius: var(--wb-r-lg);
  background: var(--wb-paper);
  transition: transform .5s var(--wb-ease), box-shadow .5s var(--wb-ease), border-color .5s var(--wb-ease);
}
.wb-cap:hover { transform: translateY(-5px); box-shadow: var(--wb-shadow-md); border-color: transparent; }
.wb-cap p { margin: 0; font-size: var(--wb-fs-small); line-height: 1.55; color: var(--wb-ink-soft); }

/* Project feature — the long-form R&D entries */
.wb-project-full {
  padding: clamp(2rem, 4vw, 3.4rem);
  border-radius: var(--wb-r-xl);
  background: var(--wb-cream-deep);
}
.wb-project-full--dark { background: var(--wb-forest); color: var(--wb-cream); }
.wb-project-full--dark .wb-h2, .wb-project-full--dark .wb-h3 { color: var(--wb-cream); }
.wb-project-full--dark .wb-body { color: rgba(245,234,216,.76); }
.wb-project-full__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: 1.4rem;
}
.wb-project-full__head img { height: 44px; width: auto; object-fit: contain; }
.wb-project-full:not(.wb-project-full--dark) .wb-project-full__head img { mix-blend-mode: multiply; }
.wb-project-full__body { display: grid; gap: 1rem; max-width: 78ch; }

.wb-funding {
  margin-top: 1.8rem; padding: 1rem 1.2rem;
  border-radius: var(--wb-r-sm);
  border: 1px solid rgba(255,255,255,.14);
  font-size: var(--wb-fs-small); line-height: 1.5;
  color: rgba(245,234,216,.62);
}

/* Form */
.wb-form { display: grid; gap: 1.15rem; max-width: 48rem; margin-top: 2rem; }
.wb-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.15rem; }
.wb-field { display: flex; flex-direction: column; gap: .45rem; }
.wb-field__label {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}
.wb-input {
  width: 100%; min-height: 52px; padding: .85rem 1rem;
  border: 1px solid var(--wb-rule-strong); border-radius: var(--wb-r-sm);
  background: var(--wb-paper); color: var(--wb-ink);
  font: inherit;
  transition: border-color .3s var(--wb-ease), background .3s var(--wb-ease);
}
.wb-input::placeholder { color: var(--wb-ink-faint); }
.wb-input:hover { border-color: var(--wb-ink-faint); }
.wb-input:focus-visible { outline: 2px solid var(--wb-sage); outline-offset: 1px; border-color: var(--wb-sage); }
textarea.wb-input { min-height: 150px; resize: vertical; }

.wb-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.wb-choice { position: relative; display: inline-flex; }
.wb-choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wb-choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem;
  border: 1px solid var(--wb-rule-strong); border-radius: var(--wb-r-pill);
  font-size: var(--wb-fs-small);
  transition: background .3s var(--wb-ease), color .3s var(--wb-ease), border-color .3s var(--wb-ease);
}
.wb-choice input:hover + span { border-color: var(--wb-ink-faint); }
.wb-choice input:checked + span { background: var(--wb-forest); color: var(--wb-cream); border-color: var(--wb-forest); }
.wb-choice input:focus-visible + span { outline: 2px solid var(--wb-clay); outline-offset: 2px; }

.wb-consent { display: flex; align-items: flex-start; gap: .8rem; }
.wb-consent input { flex: none; width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--wb-sage); }
.wb-consent span { font-size: var(--wb-fs-small); line-height: 1.55; color: var(--wb-ink-soft); }

.wb-note {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1.15rem;
  border-radius: var(--wb-r-sm);
  background: var(--wb-clay-tint);
  border: 1px solid color-mix(in srgb, var(--wb-clay) 20%, transparent);
  font-size: var(--wb-fs-small); line-height: 1.5;
  color: var(--wb-clay);
}
.wb-note::before { content: ""; flex: none; margin-top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--wb-clay); }

/* Contact details */
.wb-contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem clamp(2rem, 5vw, 4rem);
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wb-rule);
}
.wb-contact__block { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.wb-contact__block address { font-style: normal; color: var(--wb-ink-soft); line-height: 1.6; }
.wb-contact__mail { font-weight: 600; color: var(--wb-sage); }
.wb-contact__mail:hover { color: var(--wb-clay); }
.wb-contact__hint { margin: 0; font-size: var(--wb-fs-small); color: var(--wb-ink-faint); }

/* --------------------------------------------------------------------------
   19b. Range overview — families and facts
   A category-level picture of what the portfolio covers, without turning the
   page into a SKU list. Families carry their members as chips; the facts grid
   carries the axes a buyer actually specifies against.
   -------------------------------------------------------------------------- */
.wb-fams {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2rem;
}
.wb-fam {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.3rem 1.4rem 1.5rem;
  border-radius: var(--wb-r-md);
  background: var(--wb-paper);
  border-top: 3px solid var(--wb-sage);
  box-shadow: var(--wb-shadow-sm);
  transition: transform .5s var(--wb-ease), box-shadow .5s var(--wb-ease);
}
.wb-fam:nth-child(even) { border-top-color: var(--wb-clay); }
.wb-fam:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); }
.wb-fam__head { display: flex; flex-direction: column; gap: .3rem; }
.wb-fam__meta {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}
.wb-fam__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wb-fam__list li {
  padding: .4rem .8rem;
  border: 1px solid var(--wb-rule);
  border-radius: var(--wb-r-pill);
  background: var(--wb-cream);
  font-size: var(--wb-fs-small);
  color: var(--wb-ink-soft);
}
.wb-fam__note { margin: auto 0 0; font-size: var(--wb-fs-small); color: var(--wb-ink-faint); line-height: 1.45; }

/* Specification axes, shown once for a whole range rather than per product. */
.wb-facts {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--wb-rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.3rem 2rem;
}
.wb-facts > div { display: flex; flex-direction: column; gap: .3rem; }
.wb-facts dt {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-clay);
}
.wb-facts dd { margin: 0; font-size: var(--wb-fs-small); line-height: 1.5; color: var(--wb-ink-soft); }

/* The ranges that are the reason to pick this portfolio over a commodity one. */
.wb-range {
  position: relative;
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--wb-r-lg);
  background: var(--wb-forest);
  color: var(--wb-cream);
  overflow: hidden;
}
.wb-range .wb-h3 { color: var(--wb-cream); }
.wb-range p { margin: 0; font-size: var(--wb-fs-small); line-height: 1.55; color: rgba(245,234,216,.72); }
.wb-range__badge {
  align-self: flex-start; margin-top: .2rem;
  padding: .35rem .8rem;
  border-radius: var(--wb-r-pill);
  background: var(--wb-clay); color: var(--wb-cream);
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   19b2. Disclosure list
   The compact form of a card grid: one row per entry, a thumbnail, and the
   detail behind a native <details>. Enough to place the range, not enough to
   replace the conversation.
   -------------------------------------------------------------------------- */
.wb-list { margin-top: 1.4rem; border-top: 1px solid var(--wb-rule); }
.wb-row { border-bottom: 1px solid var(--wb-rule); }
.wb-row > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.2rem);
  padding: .85rem .2rem;
  transition: background .3s var(--wb-ease);
}
.wb-row > summary::-webkit-details-marker { display: none; }
.wb-row > summary:hover { background: color-mix(in srgb, var(--wb-clay) 5%, transparent); }
.wb-row > summary:focus-visible { outline: 2px solid var(--wb-clay); outline-offset: -2px; border-radius: var(--wb-r-sm); }

.wb-row__thumb {
  flex: none; width: clamp(52px, 4.6vw, 74px); aspect-ratio: 1;
  border-radius: var(--wb-r-sm); overflow: hidden;
  background: var(--wb-cream-deep);
  display: grid; place-items: center;
}
.wb-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wb-row__thumb--mark {
  background: var(--wb-sage-tint); color: var(--wb-sage);
  font-family: var(--wb-display); font-variation-settings: "SOFT" 20;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1;
}
.wb-row:nth-child(even) .wb-row__thumb--mark { background: var(--wb-clay-tint); color: var(--wb-clay); }

.wb-row__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.wb-row__title {
  font-family: var(--wb-body); font-weight: 700;
  font-size: var(--wb-fs-h4); line-height: 1.2; letter-spacing: -.012em;
}
.wb-row__meta {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}
.wb-row__sign {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--wb-rule-strong); border-radius: 50%;
  font-size: 15px; line-height: 1;
  transition: transform .45s var(--wb-ease), background .3s var(--wb-ease),
              color .3s var(--wb-ease), border-color .3s var(--wb-ease);
}
.wb-row > summary:hover .wb-row__sign,
.wb-row[open] .wb-row__sign { background: var(--wb-clay); color: var(--wb-cream); border-color: var(--wb-clay); }
.wb-row[open] .wb-row__sign { transform: rotate(135deg); }

.wb-row__body {
  display: flex; flex-direction: column; gap: .8rem;
  padding: .2rem .2rem 1.4rem calc(clamp(52px, 4.6vw, 74px) + clamp(.8rem, 1.6vw, 1.2rem) + .2rem);
}
.wb-row__body p { margin: 0; max-width: 62ch; font-size: var(--wb-fs-small); line-height: 1.55; color: var(--wb-ink-soft); }

@supports (interpolate-size: allow-keywords) {
  .wb-row::details-content {
    height: 0; overflow: hidden;
    transition: height .42s var(--wb-ease), content-visibility .42s allow-discrete;
  }
  .wb-row[open]::details-content { height: auto; }
}

@media (max-width: 620px) {
  .wb-row__body { padding-left: .2rem; }
}

/* --------------------------------------------------------------------------
   19c. Catalogue modal
   Native <dialog>: focus trap, Esc, inert background and ::backdrop come free.
   Without JavaScript the trigger stays an ordinary link to the contact page.
   -------------------------------------------------------------------------- */
.wb-modal {
  width: min(100% - 2rem, 62rem);
  max-height: min(88dvh, 780px);
  padding: 0;
  border: 0;
  border-radius: var(--wb-r-xl);
  background: var(--wb-cream);
  color: var(--wb-ink);
  box-shadow: var(--wb-shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .4s var(--wb-ease), transform .4s var(--wb-ease),
              overlay .4s allow-discrete, display .4s allow-discrete;
}
.wb-modal[open] { opacity: 1; transform: none; }
@starting-style { .wb-modal[open] { opacity: 0; transform: translateY(18px) scale(.985); } }

.wb-modal::backdrop {
  background: rgba(19,27,18,0);
  transition: background .4s var(--wb-ease), overlay .4s allow-discrete, display .4s allow-discrete;
}
.wb-modal[open]::backdrop { background: rgba(19,27,18,.62); backdrop-filter: blur(6px); }
@starting-style { .wb-modal[open]::backdrop { background: rgba(19,27,18,0); } }

/* The grid row takes its height from the tallest column, so capping the
   dialog alone let the row overflow it. The ceiling belongs on the scrolling
   column: the image track then simply matches whatever height that resolves to. */
.wb-modal__grid { display: grid; grid-template-columns: 0.85fr 1fr; }
.wb-modal__aside { position: relative; overflow: hidden; min-height: 0; background: var(--wb-forest-deep); }
.wb-modal__aside img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.wb-modal__aside::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,27,18,.9) 5%, rgba(19,27,18,.25) 60%, rgba(19,27,18,.1) 100%);
}
.wb-modal__aside-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.2rem, 2vw, 1.9rem);
  display: flex; flex-direction: column; gap: .5rem;
  color: #fff;
}
.wb-modal__aside-copy ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .35rem; }
.wb-modal__aside-copy li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--wb-fs-small); color: rgba(255,255,255,.82); line-height: 1.4;
}
.wb-modal__aside-copy li::before {
  content: ""; flex: none; margin-top: .45em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--wb-sage-soft);
}

.wb-modal__body {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  max-height: min(86dvh, 760px); overflow-y: auto;
  display: flex; flex-direction: column; gap: .7rem;
}
.wb-modal__title { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); margin: 0; }
.wb-modal .wb-form { margin-top: .9rem; gap: .9rem; max-width: none; }
.wb-modal .wb-form__row { gap: .9rem; }

.wb-modal__close {
  position: absolute; top: .9rem; right: .9rem; z-index: 5;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--wb-rule); border-radius: 50%;
  background: var(--wb-paper); color: var(--wb-ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .3s var(--wb-ease), color .3s var(--wb-ease), border-color .3s var(--wb-ease);
}
.wb-modal__close:hover { background: var(--wb-clay); color: var(--wb-cream); border-color: var(--wb-clay); }

.wb-modal__done { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.wb-modal__done-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wb-sage-tint); color: var(--wb-sage);
  font-size: 24px; line-height: 1;
}

@media (max-width: 760px) {
  .wb-modal { width: min(100% - 1.5rem, 34rem); max-height: 90dvh; }
  .wb-modal__grid { grid-template-columns: 1fr; }
  .wb-modal__aside { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wb-modal, .wb-modal::backdrop { transition: none; }
}

/* --------------------------------------------------------------------------
   19d. Legal pages
   Long-form text, which nothing else on this site is. One measure, generous
   leading, and a clear hierarchy — a policy is read to find one clause, not
   front to back, so the headings have to be findable while skimming.
   -------------------------------------------------------------------------- */
.wb-legal { max-width: min(100%, 46rem); }
.wb-legal > * + * { margin-top: 1.1em; }

.wb-legal h2 {
  font-family: var(--wb-display); font-weight: 500;
  font-size: var(--wb-fs-h3); line-height: 1.15; letter-spacing: -.01em;
  margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: 1.4rem;
  border-top: 1px solid var(--wb-rule);
  text-wrap: balance;
}
.wb-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wb-legal h3 {
  font-family: var(--wb-body); font-weight: 600;
  font-size: var(--wb-fs-h4); line-height: 1.25;
  margin-top: 2rem;
}
.wb-legal p, .wb-legal li { color: var(--wb-ink-soft); text-wrap: pretty; }
.wb-legal strong { color: var(--wb-ink); font-weight: 600; }
.wb-legal a { color: var(--wb-clay); text-underline-offset: .18em; }

.wb-legal ul, .wb-legal ol { margin: 1.1em 0 0; padding-left: 1.3em; }
.wb-legal li + li { margin-top: .5em; }

.wb-legal__meta {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink-faint);
}

/* A clause that still needs a real value before this page goes live. Loud on
   purpose: it must be impossible to publish these by accident. */
.wb-todo {
  display: block; margin-top: 1.1em;
  border-left: 3px solid var(--wb-clay);
  background: var(--wb-clay-tint);
  border-radius: 0 var(--wb-r-sm) var(--wb-r-sm) 0;
  padding: .85rem 1rem;
  color: var(--wb-clay);
  font-size: var(--wb-fs-small);
}
.wb-todo b {
  display: block; font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase; margin-bottom: .25rem;
}

/* Retention and recipients read as tables; keep them scrollable on a phone. */
.wb-legal__table { overflow-x: auto; margin-top: 1.4em; }
.wb-legal__table table { border-collapse: collapse; width: 100%; min-width: 30rem; }
.wb-legal__table th, .wb-legal__table td {
  text-align: left; vertical-align: top;
  padding: .7rem .9rem .7rem 0;
  border-bottom: 1px solid var(--wb-rule);
  font-size: var(--wb-fs-small); color: var(--wb-ink-soft);
}
.wb-legal__table th {
  font-family: var(--wb-mono); font-size: var(--wb-fs-mono);
  letter-spacing: var(--wb-track-mono); text-transform: uppercase;
  color: var(--wb-ink); font-weight: 400; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .wb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-proof { grid-template-columns: repeat(2, 1fr); }
  .wb-proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .wb-proof__item:nth-child(odd) { padding-left: 0; }
  .wb-proof__item:nth-child(n+3) { border-top: 1px solid var(--wb-rule); }
}

@media (max-width: 1040px) {
  .wb-nav__links, .wb-nav__cta { display: none; }
  .wb-burger { display: inline-flex; }
}

@media (max-width: 960px) {
  /* svh, not vh: on iOS the toolbar hides as you scroll, vh grows with it, and
     the hero's runway would change length mid-gesture — which moves --p under
     your finger and reads as stutter. svh is measured with the toolbar out. */
  .wb-hero { height: 165svh; }
  /* Only the home page's main climbs over the pinned hero. Without :not() this
     also hit .wb-main--page, whose own -3vh sits earlier in the file and lost —
     so on a phone the cream card covered 390 of the 471px header and the page
     title was never visible at all. */
  .wb-main:not(.wb-main--page) { margin-top: -48vh; }
  .wb-hero__rail { display: none; }
  .wb-hero__title { max-width: 12ch; }

  /* A landscape photograph cropped to a tall phone box loses more than half its
     width. A shorter header keeps more of the picture and gets the reader to
     the words sooner. */
  .wb-phero { min-height: clamp(300px, 40svh, 420px); }

  .wb-split, .wb-split--flip { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .wb-split--flip .wb-split__copy { order: 0; }
  .wb-figure, .wb-figure--tall { aspect-ratio: 3 / 2; }

  .wb-leads { grid-template-columns: minmax(0, 1fr); }
  .wb-prod, .wb-prod--flip { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .wb-prod--flip .wb-prod__media { order: 0; }
  .wb-prod__media { aspect-ratio: 3 / 2; }
  .wb-projects { grid-template-columns: minmax(0, 1fr); }
  .wb-footer__grid { grid-template-columns: 1fr 1fr; }
  .wb-footer__brand { grid-column: 1 / -1; }

  /* Markets become a snap rail */
  .wb-fan {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1.5rem var(--wb-gutter) 1.5rem;
    margin: 0 calc(var(--wb-gutter) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wb-fan::-webkit-scrollbar { display: none; }
  /* Two classes, so this beats the :nth-child fan angles above. */
  .wb-fan .wb-slat { --rot: 0deg; --ty: 0px; }
  .wb-slat { scroll-snap-align: center; height: clamp(320px, 62vw, 420px); }
  .wb-fan.is-in .wb-slat:hover { flex-grow: 0; transform: none; }
  .wb-fan.is-in:hover .wb-slat:not(:hover) { filter: none; opacity: 1; }
  .wb-slat__note { opacity: 1; max-height: 6rem; transform: none; }

  .wb-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .wb-cats { grid-template-columns: minmax(0, 1fr); }
  .wb-proof { grid-template-columns: 1fr; }
  .wb-proof__item { border-left: 0 !important; padding-left: 0 !important; }
  .wb-proof__item + .wb-proof__item { border-top: 1px solid var(--wb-rule); }
  .wb-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-sechead { flex-direction: column; align-items: flex-start; }
  .wb-hero__actions .wb-btn { flex: 1 1 100%; }
  .wb-footer__legal .wb-spacer { margin-left: 0; flex-basis: 100%; height: 0; }
}

/* Short viewports — keep the pinned scenes usable */
@media (max-height: 560px) and (min-width: 961px) {
  .wb-hero__content { padding-bottom: 3rem; gap: .7rem; }
  .wb-hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   20b. Short windows
   The hero type is sized from the viewport WIDTH, which says nothing about how
   much vertical room there is. A laptop screen — or any window that is not
   full height — is wide enough for the big display size and too short to hold
   it. Buy the headroom back from the spacing before touching the type.
   -------------------------------------------------------------------------- */
@media (min-width: 961px) and (max-height: 860px) {
  .wb-hero__content {
    padding-bottom: clamp(2.4rem, 6vh, 4.5rem);
    gap: .72rem;
  }
  .wb-hero__note { max-width: 46ch; }
}

/* Shorter still: the display size has to give way too. */
@media (min-width: 961px) and (max-height: 760px) {
  :root { --wb-fs-hero: clamp(2.8rem, 1rem + 6.4vw, 7rem); }
  .wb-hero__content { padding-bottom: 2rem; gap: .6rem; }
  .wb-hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   21. Large displays (27" and up)
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  :root {
    --wb-maxw: 1440px;
    --wb-gap-sec: clamp(5.5rem, 3rem + 8.5vw, 13rem);
  }
  .wb-phero { min-height: clamp(400px, 52vh, 700px); }

  /* Equal columns, and a ceiling on the portrait crop: at this width a 4:5
     figure grows past 950px tall and dwarfs the copy beside it. */
  .wb-split, .wb-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wb-figure--tall { max-height: min(76vh, 880px); }
  .wb-prod { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   22. Touch targets
   Text links are fine at 23px under a mouse and too small under a thumb.
   On touch pointers (any width) and on narrow windows, give every standalone
   link a 44px box without changing how it looks.
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 760px) {
  .wb-footer__link,
  .wb-footer__legal a,
  .wb-cta__mail,
  .wb-contact__mail,
  .wb-drawer__foot a,
  .wb-link {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .wb-footer__col { gap: 0; }
  .wb-contact__block { gap: .1rem; }
  .wb-consent { padding: .35rem 0; }
  .wb-consent input { width: 24px; height: 24px; margin-top: .05rem; }
}

/* --------------------------------------------------------------------------
   23. Reduced motion — everything still lands, nothing moves
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wb-phero__media img { transform: scale(1.02); }
  .wb-main--page { margin-top: 0; }
  html { scroll-behavior: auto; }
  /* The wash would flash and vanish under the blanket duration override.
     Hold it steady instead — the cue matters most where motion is off. */
  .wb-prod.is-targeted::before { animation: none !important; opacity: .8; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wb-hero { height: auto; }
  .wb-hero__stage { position: static; height: 100svh; }
  .wb-hero__layer--near { clip-path: none; transform: scale(1.05); }
  .wb-hero__shade { opacity: 0 !important; }
  .wb-hero__content { transform: none; opacity: 1; }
  .wb-hero__rail, .wb-hero__cue { opacity: 1; }
  .wb-main { margin-top: 0; border-radius: 0; box-shadow: none; }
  .wb-figure__par { transform: none; }
  .wb-cta__bg img { transform: scale(1.02); }
  .wb-rise, .wb-w > i, .wb-rule { opacity: 1 !important; transform: none !important; }
  .wb-unmask::after { display: none; }
  .wb-unmask img { transform: none !important; }
  .wb-slat { opacity: 1 !important; transform: none !important; }
}