/* ==========================================================================
   Wingsure — wingsure.css
   Single stylesheet for the whole site. Every design token lives in :root.
   Change a token here and the entire site follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --ws-ink-900: #0E1420;
  --ws-ink-800: #161E2B;
  --ws-ink-700: #1D2733;
  --ws-ink-500: #4B5566;
  --ws-ink-400: #6E7787;
  --ws-line: #DDE2E8;
  --ws-line-dk: #2A3442;
  --ws-signal-600: #0E9C8C;
  --ws-signal-500: #14B8A6;
  --ws-signal-400: #55D6C4;
  --ws-signal-300: #7FE3D4;
  --ws-signal-100: #A9ECE2;
  --ws-paper: #F4F6F8;
  --ws-white: #FFFFFF;
  --ws-cta-text: #08201C;

  /* Typography */
  --ws-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ws-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ws-h1: clamp(38px, 5.2vw, 60px);
  --ws-h2: clamp(28px, 3.4vw, 42px);
  --ws-h3: clamp(20px, 2vw, 26px);
  --ws-body-lg: 18px;
  --ws-body: 17px;
  --ws-small: 15px;
  --ws-ui: 15px;
  --ws-label: 12px;
  --ws-measure: 66ch;

  /* Geometry */
  --ws-radius: 0;
  --ws-radius-soft: 3px;
  --ws-border: 1px;
  --ws-max: 1320px;
  --ws-gutter: 32px;
  --ws-gap: 32px;
  --ws-section-y: clamp(88px, 11vh, 160px);
  --ws-nav-h: 72px;

  /* Motion */
  --ws-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ws-dur: 900ms;
  --ws-dur-ui: 200ms;

  /* Contextual (light) — remapped by .ws-bg-dark */
  --bg: var(--ws-paper);
  --surface: var(--ws-white);
  --fg: var(--ws-ink-900);
  --fg-body: var(--ws-ink-500);
  --fg-meta: var(--ws-ink-400);
  --rule: var(--ws-line);
  --accent: var(--ws-signal-600);
  --kicker: var(--ws-ink-500);
}

@media (max-width: 767.98px) {
  :root {
    --ws-gutter: 20px;
    --ws-gap: 20px;
    --ws-h1: 32px;
    --ws-h2: 29px;
    --ws-h3: 21px;
    --ws-body-lg: 17px;
    --ws-body: 16px;
    --ws-small: 16px;
    --ws-section-y: 72px;
    --ws-nav-h: 64px;
  }
}

@media (max-width: 379.98px) {
  :root {
    --ws-gutter: 16px;
    --ws-gap: 16px;
    --ws-h1: 30px;
    --ws-h2: 27px;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ws-font-sans);
  font-size: var(--ws-body);
  line-height: 1.65;
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

main, section, header, footer, figure, article, div, ul, ol, li {
  min-width: 0;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, pre { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; border-radius: var(--ws-radius-soft); }
picture { border-radius: var(--ws-radius-soft); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--ws-radius);
}
button { cursor: pointer; }

::selection { background: var(--ws-signal-500); color: var(--ws-cta-text); }

:focus-visible {
  outline: 2px solid var(--ws-signal-500);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, .ws-h1 {
  font-size: var(--ws-h1);
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--fg);
}
h2, .ws-h2 {
  font-size: var(--ws-h2);
  line-height: 1.18;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--fg);
}
h3, .ws-h3 {
  font-size: var(--ws-h3);
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--fg);
}
h4, .ws-h4 {
  font-size: var(--ws-body);
  line-height: 1.4;
  font-weight: 600;
  color: var(--fg);
}
p { max-width: var(--ws-measure); }
.ws-body-lg, .ws-lede { font-size: var(--ws-body-lg); line-height: 1.6; }
.ws-body { font-size: var(--ws-body); line-height: 1.65; }
.ws-small { font-size: var(--ws-small); line-height: 1.6; }
.ws-label, .ws-kicker, .ws-meta, .ws-chip {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ws-meta { color: var(--fg-meta); }
.ws-mono { font-family: var(--ws-font-mono); }
.ws-em { font-style: normal; color: var(--accent); }
.ws-fg { color: var(--fg); }
.ws-measure { max-width: var(--ws-measure); }

@media (max-width: 599.98px) {
  .ws-lede,
  .ws-body,
  p {
    max-width: 34ch;
  }
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.ws-container {
  width: 100%;
  max-width: calc(var(--ws-max) + 2 * var(--ws-gutter));
  margin-inline: auto;
  padding-inline: var(--ws-gutter);
}

@media (max-width: 599.98px) {
  .ws-container {
    padding-right: calc(var(--ws-gutter) + 16px);
  }
}

.ws-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ws-gap);
  row-gap: var(--ws-gap);
}
.ws-col-1 { grid-column-end: span 1; }
.ws-col-2 { grid-column-end: span 2; }
.ws-col-3 { grid-column-end: span 3; }
.ws-col-4 { grid-column-end: span 4; }
.ws-col-5 { grid-column-end: span 5; }
.ws-col-6 { grid-column-end: span 6; }
.ws-col-7 { grid-column-end: span 7; }
.ws-col-8 { grid-column-end: span 8; }
.ws-col-9 { grid-column-end: span 9; }
.ws-col-10 { grid-column-end: span 10; }
.ws-col-11 { grid-column-end: span 11; }
.ws-col-12 { grid-column-end: span 12; }
.ws-start-2 { grid-column-start: 2; }
.ws-start-3 { grid-column-start: 3; }
.ws-start-4 { grid-column-start: 4; }
.ws-start-5 { grid-column-start: 5; }
.ws-start-6 { grid-column-start: 6; }
.ws-start-7 { grid-column-start: 7; }
.ws-start-8 { grid-column-start: 8; }
.ws-start-9 { grid-column-start: 9; }

@media (max-width: 899.98px) {
  [class*="ws-col-"] { grid-column: auto / span 12; }
  .ws-grid > .ws-frame:first-child { order: 1; }
  [class*="ws-start-"] { grid-column-start: auto; }
  .ws-col-sm-6 { grid-column: span 6; }
  /* Media-first grids stack the image above the copy, so a section's CTA
     stays its last element (Applications). */
  .ws-grid.ws-grid--media-first > .ws-frame { order: -1; }
}
/* A section CTA moved to the end of its container below 900px
   (initCtaLast): full width, and after a leading photo (order 1 above). */
.ws-btn-group.is-last { grid-column: 1 / -1; order: 2; }

.ws-section { padding-block: var(--ws-section-y); }

/* Section backgrounds — four exist: paper, white, dark, photograph. */
.ws-bg-paper { background: var(--ws-paper); --bg: var(--ws-paper); --surface: var(--ws-white); }
.ws-bg-white { background: var(--ws-white); --bg: var(--ws-white); --surface: var(--ws-paper); }

.ws-bg-dark, .ws-bg-photo, .ws-cta-band, .ws-footer {
  --bg: var(--ws-ink-900);
  --surface: var(--ws-ink-800);
  --fg: var(--ws-white);
  --fg-body: color-mix(in srgb, var(--ws-white) 78%, var(--ws-ink-900));
  --fg-meta: color-mix(in srgb, var(--ws-white) 60%, var(--ws-ink-900));
  --rule: var(--ws-line-dk);
  --accent: var(--ws-signal-400);
  --kicker: var(--ws-signal-300);
  background: var(--ws-ink-900);
  color: var(--fg-body);
}

.ws-bg-photo {
  position: relative;
  isolation: isolate;
}
.ws-bg-photo > picture,
.ws-bg-photo > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-bg-photo > picture img { width: 100%; height: 100%; object-fit: cover; }
.ws-bg-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 20, 32, 0.88) 0%, rgba(14, 20, 32, 0.55) 60%, rgba(14, 20, 32, 0.3) 100%);
}

.ws-rule { border: 0; border-top: var(--ws-border) solid var(--rule); margin: 0; }
.ws-rule--accent { border-top-color: var(--ws-signal-500); }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* 5.1 Buttons ------------------------------------------------------------ */
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  font-family: var(--ws-font-sans);
  font-size: var(--ws-ui);
  font-weight: 500;
  line-height: 1.2;
  max-width: 100%;
  min-height: 46px;
  white-space: normal;
  text-align: center;
  border: var(--ws-border) solid transparent;
  border-radius: var(--ws-radius-soft);
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--ws-dur-ui) var(--ws-ease),
    border-color var(--ws-dur-ui) var(--ws-ease),
    color var(--ws-dur-ui) var(--ws-ease);
}
.ws-btn--primary {
  background: var(--ws-signal-500);
  border-color: var(--ws-signal-500);
  color: var(--ws-cta-text);
}
.ws-btn--primary:hover {
  background: var(--ws-signal-600);
  border-color: var(--ws-signal-600);
}
.ws-btn--secondary {
  color: var(--fg);
  border-color: currentColor;
}
/* The label and arrow take the accent with the border (--accent is the
   lighter signal tone on dark surfaces). */
.ws-btn--secondary:hover,
.ws-btn--secondary:focus-visible { border-color: var(--ws-signal-500); color: var(--accent); }
.ws-btn__arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 250ms var(--ws-ease);
}
.ws-btn:hover .ws-btn__arrow { transform: translateX(4px); }
.ws-btn-group { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

@media (max-width: 599.98px) {
  .ws-btn-group {
    width: 100%;
    align-items: stretch;
  }
  .ws-btn-group .ws-btn {
    flex: 1 1 100%;
  }
}

/* 5.2 Text link ---------------------------------------------------------- */
.ws-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.ws-btn-group > .ws-link::before {
  content: '';
  position: absolute;
  inset: -8px 0;
}
.ws-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ws-signal-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--ws-ease);
}
.ws-link:hover::after,
.ws-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.ws-link--muted { color: var(--fg-body); font-weight: 400; }

/* 5.3 Kicker ------------------------------------------------------------- */
.ws-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--kicker);
}
.ws-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  flex: none;
  background: var(--ws-signal-500);
}
.ws-kicker--bare::before { display: none; }

.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
  color: var(--fg);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ws-chip--signal { border-color: var(--ws-signal-500); color: var(--accent); }

/* 5.4 Section header ----------------------------------------------------- */
.ws-section-head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(40px, 6vh, 64px);
}
.ws-section-head h2 { max-width: 22ch; }
/* The kicker and heading keep their step at every width (split heads had it
   only from 900px, so on phones the kicker sat on the heading). */
.ws-section-head__title { display: grid; gap: 20px; }
/* A heading with no lede beside it: full width, two balanced lines on desktop. */
.ws-section-head--wide h2 { max-width: 44ch; text-wrap: balance; }
.ws-section-head .ws-lede { color: var(--fg-body); }
@media (min-width: 900px) {
  .ws-section-head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ws-gap);
    align-items: end;
  }
  .ws-section-head--split .ws-section-head__title { grid-column: 1 / span 6; }
  .ws-section-head--split .ws-lede { grid-column: 8 / span 5; }
  /* The lede starts level with the kicker, not the heading's last line.
     Its taller line box puts its capitals 3px below the kicker's; the
     nudge lines the two first lines up. */
  .ws-section-head--top { align-items: start; }
  .ws-section-head--top .ws-lede { margin-top: -3px; }
}

/* 5.5 Bordered rows & stats --------------------------------------------- */
.ws-rows { list-style: none; margin: 0; padding: 0; }
.ws-rows--closed { border-bottom: var(--ws-border) solid var(--rule); }
.ws-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  column-gap: var(--ws-gap);
  row-gap: 8px;
  align-items: baseline;
  padding: 24px 0;
  border-top: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
  transition: border-color var(--ws-dur-ui) var(--ws-ease);
}
.ws-row--link:hover { border-top-color: var(--ws-signal-500); }
.ws-row__label { color: var(--fg-meta); }
.ws-row__title { font-size: var(--ws-body-lg); font-weight: 500; line-height: 1.4; color: var(--fg); }
.ws-row__body { font-size: var(--ws-small); color: var(--fg-body); margin-top: 6px; }
.ws-row__meta { color: var(--fg-meta); text-align: right; }
@media (max-width: 767.98px) {
  .ws-row { grid-template-columns: 1fr; }
  .ws-row__meta { text-align: left; }
}

@media (max-width: 599.98px) {
  .ws-row {
    padding: 20px 0;
  }
  .ws-row__title {
    font-size: var(--ws-body);
  }
}

.ws-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ws-gap);
}
.ws-stat {
  padding-top: 20px;
  border-top: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
.ws-stat__value {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ws-stat__label { display: block; margin-top: 14px; color: var(--fg); }
.ws-stat__note { margin-top: 8px; font-size: var(--ws-small); color: var(--fg-meta); }

/* 5.6 Image frame -------------------------------------------------------- */
.ws-frame { display: grid; gap: 12px; margin: 0; }
.ws-frame__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 3 / 2);
  background: var(--surface);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius-soft);
}
.ws-frame__media > picture,
.ws-frame__media > img {
  width: 100%;
  height: 100%;
  border-radius: var(--ws-radius-soft);
}
.ws-frame__media > svg {
  width: 100%;
  height: 100%;
  border-radius: var(--ws-radius);
}
.ws-frame__media > picture img,
.ws-frame__media > img { object-fit: cover; height: 100%; }
.ws-frame__caption {
  font-size: var(--ws-small);
  line-height: 1.6;
  color: var(--fg-meta);
}

/* Placeholder state — visible until the manifest image is dropped in. */
.ws-frame--placeholder .ws-frame__media {
  display: grid;
  place-items: center;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 16px);
}
.ws-frame__placeholder {
  display: grid;
  gap: 8px;
  justify-items: center;
  max-width: 80%;
  padding: 16px 20px;
  text-align: center;
  background: var(--bg);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius-soft);
}
.ws-frame__placeholder .ws-chip--signal { background: var(--bg); }
.ws-frame__placeholder .ws-meta { text-transform: none; letter-spacing: 0.02em; }

/* 5.7 CTA band ----------------------------------------------------------- */
.ws-cta-band {
  border-top: var(--ws-border) solid var(--ws-signal-500);
  padding-block: clamp(72px, 9vh, 128px);
}
.ws-cta-band__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ws-gap);
  align-items: end;
}
.ws-cta-band__copy { grid-column: span 7; display: grid; gap: 20px; }
.ws-cta-band__copy h2 { max-width: 20ch; }
.ws-cta-band__copy p { color: var(--fg-body); }
.ws-cta-band__actions {
  grid-column: 9 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}
@media (max-width: 899.98px) {
  .ws-cta-band__copy, .ws-cta-band__actions { grid-column: span 12; }
  .ws-cta-band__actions { justify-content: flex-start; }
}
/* Primary first in source order, side by side; stacks below 768px only. */
@media (max-width: 767.98px) {
  .ws-cta-band__actions { flex-direction: column; align-items: stretch; }
  .ws-cta-band__actions .ws-btn { justify-content: center; }
}

/* 5.8 Navigation --------------------------------------------------------- */
.ws-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ws-paper);
  color: var(--ws-ink-900);
  border-bottom: var(--ws-border) solid var(--ws-line);
  border-radius: var(--ws-radius);
  transition:
    background-color var(--ws-dur-ui) var(--ws-ease),
    border-color var(--ws-dur-ui) var(--ws-ease),
    color var(--ws-dur-ui) var(--ws-ease);
}
.ws-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ws-gap);
  min-height: var(--ws-nav-h);
}
.ws-nav__brand {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: inherit;
}
.ws-nav__panel {
  display: flex;
  align-items: center;
  gap: 40px;
}
.ws-nav__links {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ws-nav__link {
  position: relative;
  display: inline-block;
  padding: 12px 0;
  font-size: var(--ws-small);
  font-weight: 500;
  color: inherit;
}
/* Hit area 4px wider each side, so short links ("Home") reach 44px wide
   without stretching the underline past the word. */
.ws-nav__link::before {
  content: '';
  position: absolute;
  inset: 0 -4px;
}
.ws-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background: var(--ws-signal-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ws-ease);
}
.ws-nav__link:hover::after,
.ws-nav__link:focus-visible::after,
.ws-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.ws-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  margin-right: -10px;
  background: transparent;
  border: var(--ws-border) solid transparent;
  border-radius: var(--ws-radius);
  color: inherit;
}
.ws-nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 250ms var(--ws-ease);
}
.ws-nav__toggle::before,
.ws-nav__toggle::after {
  content: none;
}
.ws-nav.is-open .ws-nav__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.ws-nav.is-open .ws-nav__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Wordmark: both files ship in the markup, CSS shows the right one. */
.ws-nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
.ws-nav__logo { width: min(140px, 46vw); height: auto; }
.ws-nav__logo--light { display: none; }

/* Transparent over a dark hero; solid after 80px of scroll.
   The modifier lives on <body data-nav="overlay"> so the nav include stays
   byte-identical on every page; .ws-nav--overlay is kept for standalone use. */
.ws-nav--overlay,
body[data-nav="overlay"] .ws-nav { margin-bottom: calc(-1 * var(--ws-nav-h)); }
.ws-nav--overlay:not(.is-scrolled):not(.is-open),
body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) {
  background: transparent;
  color: var(--ws-white);
  border-bottom-color: transparent;
}
.ws-nav--overlay:not(.is-scrolled):not(.is-open) .ws-btn--secondary,
body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-btn--secondary { color: var(--ws-white); }
.ws-nav--overlay:not(.is-scrolled):not(.is-open) .ws-btn--secondary:is(:hover, :focus-visible),
body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-btn--secondary:is(:hover, :focus-visible) { color: var(--ws-signal-300); }
.ws-nav--overlay:not(.is-scrolled):not(.is-open) .ws-nav__logo--dark,
body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-nav__logo--dark { display: none; }
.ws-nav--overlay:not(.is-scrolled):not(.is-open) .ws-nav__logo--light,
body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-nav__logo--light { display: block; }

/* Hidden at the page top, sliding in on the first scroll: the intro-film
   pages, where the film has the whole first screen. The negative margin (the
   nav's height plus its bottom border) lets the film start under the nav;
   the nav also shows while open or focused, so keyboard users can reach it
   from the top of the page. */
body[data-nav="reveal"] .ws-nav {
  margin-bottom: calc(-1 * (var(--ws-nav-h) + var(--ws-border)));
  transition:
    background-color var(--ws-dur-ui) var(--ws-ease),
    border-color var(--ws-dur-ui) var(--ws-ease),
    color var(--ws-dur-ui) var(--ws-ease),
    transform var(--ws-dur-ui) var(--ws-ease);
}
body[data-nav="reveal"] .ws-nav:not(.is-scrolled):not(.is-open):not(:focus-within) { transform: translateY(-100%); }

/* Current page — 1px cyan underline, driven by <body data-page>. */
body[data-page="home"] .ws-nav__link[href="/"]::after,
body[data-page="farm-intelligence"] .ws-nav__link[href="/farm-intelligence"]::after,
body[data-page="applications"] .ws-nav__link[href="/applications"]::after,
body[data-page="in-the-field"] .ws-nav__link[href="/in-the-field"]::after,
body[data-page="company"] .ws-nav__link[href="/company"]::after,
body[data-page="media"] .ws-nav__link[href="/media"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Narrow desktop: six links, logo and CTA need ~1030px at the default
   spacing, so tighten it here to keep one row (no two-line links or CTA). */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .ws-nav__inner { gap: 24px; }
  .ws-nav__panel { gap: 20px; }
  .ws-nav__links { gap: 16px; }
  .ws-nav__logo { width: 120px; }
  .ws-nav__cta { padding-inline: 16px; }
}

@media (max-width: 899.98px) {
  .ws-nav__toggle { display: flex; }
  .ws-nav__inner {
    position: relative;
    padding-right: calc(var(--ws-gutter) + 44px);
  }
  .ws-nav__toggle {
    position: fixed;
    top: 12px;
    right: var(--ws-gutter);
    z-index: 110;
    transform: none;
    margin-right: 0;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border-color: color-mix(in srgb, currentColor 32%, transparent);
    backdrop-filter: blur(12px);
  }
  .ws-nav__toggle span {
    display: none;
  }
  .ws-nav__toggle::before,
  .ws-nav__toggle::after {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ws-ink-900);
    transition: transform 250ms var(--ws-ease);
  }
  .ws-nav.is-open .ws-nav__toggle::before { transform: translateY(3.5px) rotate(45deg); }
  .ws-nav.is-open .ws-nav__toggle::after { transform: translateY(-3.5px) rotate(-45deg); }
  .ws-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px var(--ws-gutter) 32px;
    max-height: calc(100vh - var(--ws-nav-h));
    max-height: calc(100svh - var(--ws-nav-h));
    overflow-y: auto;
    background: var(--ws-paper);
    color: var(--ws-ink-900);
    border-bottom: var(--ws-border) solid var(--ws-line);
    border-radius: var(--ws-radius);
  }
  .ws-nav.is-open .ws-nav__panel { display: flex; }
  .ws-nav__links { flex-direction: column; gap: 0; }
  .ws-nav__links li { border-top: var(--ws-border) solid var(--ws-line); }
  .ws-nav__link { display: block; padding: 16px 0; font-size: var(--ws-body-lg); }
  .ws-nav__link::after { display: none; }
  .ws-nav__cta { align-self: stretch; }
  body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-nav__toggle {
    background: rgba(14, 20, 32, 0.66);
    border-color: rgba(255, 255, 255, 0.28);
  }
  body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-nav__toggle::before,
  body[data-nav="overlay"] .ws-nav:not(.is-scrolled):not(.is-open) .ws-nav__toggle::after {
    background: var(--ws-white);
  }
}

@media (max-width: 379.98px) {
  .ws-nav__inner { gap: 12px; }
}

/* 5.9 Footer ------------------------------------------------------------- */
.ws-footer {
  border-top: var(--ws-border) solid var(--ws-line-dk);
  padding-top: clamp(64px, 8vh, 96px);
}
.ws-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ws-gap);
}
.ws-footer__brand { grid-column: span 4; display: grid; gap: 20px; align-content: start; }
.ws-footer__brand .ws-nav__brand { font-size: 22px; color: var(--fg); }
.ws-footer__logo { width: min(140px, 46vw); height: auto; }
.ws-footer__brand > a { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; margin-block: -11px; }
.ws-footer__brand p { font-size: var(--ws-small); max-width: 34ch; }
.ws-footer__col { grid-column: span 3; }
/* Desktop: the two link columns sit flush right, in columns 7–12. */
@media (min-width: 900px) { .ws-footer__brand + .ws-footer__col { grid-column: 7 / span 3; } }
.ws-footer__heading { display: block; margin-bottom: 8px; color: var(--kicker); }
.ws-footer__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ws-footer__links a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--ws-small);
  color: var(--fg-body);
  transition: color var(--ws-dur-ui) var(--ws-ease);
}
.ws-footer__links a:hover { color: var(--fg); }
.ws-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(48px, 6vh, 72px);
  /* The bottom padding leaves room for the back-to-top button (44px + 16px
     offset), so at the end of the page it never covers the email link. */
  padding: 24px 0 76px;
  border-top: var(--ws-border) solid var(--ws-line-dk);
  color: var(--fg-meta);
}
.ws-footer__bottom .ws-meta { text-transform: none; letter-spacing: 0.02em; }
/* 44px tap target without changing the row's height. */
.ws-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; }
@media (max-width: 899.98px) {
  .ws-footer__brand { grid-column: span 12; }
  .ws-footer__col { grid-column: span 6; }
}
@media (max-width: 479.98px) {
  .ws-footer__col { grid-column: span 12; }
  .ws-footer__bottom {
    display: grid;
    gap: 10px;
  }
}

/* 5.9a Back to top (GLB-05.1) -------------------------------------------- */
/* Fixed beside the scrollbar. Hidden (and out of the tab order) until
   initBackToTop() adds .is-visible after one viewport of scrolling. Sits
   under the nav (z-index 100), so the open mobile menu covers it. */
.ws-totop {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ws-white);
  background: var(--ws-ink-900);
  border: var(--ws-border) solid var(--ws-line-dk);
  border-radius: var(--ws-radius-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--ws-dur-ui) var(--ws-ease),
    transform var(--ws-dur-ui) var(--ws-ease),
    visibility 0s linear var(--ws-dur-ui),
    background-color var(--ws-dur-ui) var(--ws-ease),
    border-color var(--ws-dur-ui) var(--ws-ease),
    color var(--ws-dur-ui) var(--ws-ease);
}
.ws-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.ws-totop:hover {
  color: var(--ws-cta-text);
  background: var(--ws-signal-500);
  border-color: var(--ws-signal-500);
}
.ws-totop svg { width: 16px; height: 16px; }

/* 5.10 Skip link --------------------------------------------------------- */
.ws-skip {
  position: absolute;
  top: 0;
  left: var(--ws-gutter);
  z-index: 200;
  padding: 12px 20px;
  font-size: var(--ws-small);
  font-weight: 500;
  color: var(--ws-ink-900);
  background: var(--ws-white);
  border: var(--ws-border) solid var(--ws-signal-500);
  border-radius: var(--ws-radius);
  transform: translateY(-140%);
  transition: transform var(--ws-dur-ui) var(--ws-ease);
}
.ws-skip:focus { transform: translateY(0); }

/* Text for screen readers only, e.g. "(opens in a new tab)". */
.ws-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 5.11 Forms ------------------------------------------------------------- */
.ws-form { display: grid; gap: 28px; }
.ws-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ws-gap);
  row-gap: 28px;
}
@media (max-width: 599.98px) { .ws-form__grid { grid-template-columns: 1fr; } }

.ws-field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ws-field--full { grid-column: 1 / -1; }
.ws-field__label { font-size: var(--ws-small); font-weight: 500; color: var(--fg); }
.ws-field__optional { color: var(--fg-meta); font-weight: 400; }

.ws-input, .ws-select, .ws-textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--ws-font-sans);
  font-size: var(--ws-body);
  line-height: 1.5;
  color: var(--fg);
  background: var(--surface);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius-soft);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ws-dur-ui) var(--ws-ease);
}
.ws-input:hover, .ws-select:hover, .ws-textarea:hover { border-color: var(--ws-ink-400); }
.ws-textarea { min-height: 168px; resize: vertical; }
.ws-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234B5566' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

@media (max-width: 599.98px) {
  .ws-input, .ws-select, .ws-textarea {
    width: calc(100% - 16px);
  }
}

.ws-field__error {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.ws-field__error::before {
  content: '';
  width: 16px;
  height: 1px;
  flex: none;
  background: var(--ws-signal-500);
}
.ws-field.is-invalid .ws-field__error { display: flex; }
.ws-field.is-invalid .ws-input,
.ws-field.is-invalid .ws-select,
.ws-field.is-invalid .ws-textarea { border-color: var(--ws-ink-900); }

/* Plain text under the message field, on the fields' left edge (no box). */
.ws-form__note {
  font-size: var(--ws-small);
  color: var(--fg);
}
.ws-form__note p { max-width: none; }

.ws-form__status {
  padding: 18px 20px;
  font-size: var(--ws-small);
  color: var(--fg);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
.ws-form__status[hidden] { display: none; }
.ws-form__status--success { border-color: var(--ws-signal-500); }
.ws-form__status p { max-width: none; }

.ws-form__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* 5.12 Page head & contact layout ---------------------------------------- */
.ws-page-head { padding-top: clamp(56px, 8vh, 96px); }

.ws-contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ws-gap);
  row-gap: clamp(40px, 6vh, 64px);
  align-items: start;
}
.ws-contact__intro { grid-column: span 4; display: grid; gap: 24px; }
.ws-contact__intro h1 { max-width: 14ch; }
.ws-contact__form { grid-column: 6 / -1; min-width: 0; }
@media (min-width: 900px) {
  .ws-contact__intro { position: sticky; top: calc(var(--ws-nav-h) + 48px); }
}
@media (max-width: 899.98px) {
  .ws-contact__intro, .ws-contact__form { grid-column: span 12; }
}

/* 5.13 404 --------------------------------------------------------------- */
.ws-404 {
  display: grid;
  gap: 24px;
  align-content: center;
  min-height: 52vh;
  padding-block: var(--ws-section-y);
}
.ws-404 h1 { max-width: 18ch; }

/* 5.14 Home — hero ------------------------------------------------------- */
.ws-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  min-height: 85vh;
  min-height: 85svh;
}
.ws-hero__copy {
  display: grid;
  align-content: center;
  gap: 28px;
  padding-top: calc(var(--ws-nav-h) + clamp(48px, 8vh, 96px));
  padding-bottom: clamp(64px, 9vh, 120px);
  padding-left: max(var(--ws-gutter), calc((100vw - var(--ws-max)) / 2));
  padding-right: clamp(32px, 5vw, 96px);
}
.ws-hero__copy h1 { max-width: 17ch; }
.ws-hero__copy p { max-width: 58ch; color: var(--fg-body); }
.ws-hero__copy .ws-btn-group { margin-top: 8px; }
.ws-hero__media {
  position: relative;
  overflow: hidden;
  border-left: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
.ws-hero__slides { position: absolute; inset: 0; }
.ws-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
  transform-origin: 50% 50%;
  opacity: 0;
  transition: opacity 1200ms var(--ws-ease);
}
.ws-hero__img.is-active {
  opacity: 1;
  animation: ws-ambient 12s var(--ws-ease) forwards;
}
/* Single (non-carousel) hero image — visible by default */
.ws-hero__media > .ws-hero__img,
.ws-fieldhero > .ws-hero__img {
  opacity: 1;
  animation: ws-ambient 12s var(--ws-ease) forwards;
}
.ws-hero__dots {
  position: absolute;
  z-index: 3;
  right: calc(clamp(20px, 3vw, 40px) - 5px);
  bottom: calc(clamp(20px, 3vw, 36px) - 14px);
  display: flex;
  gap: 2px;
}
.ws-hero__dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--ws-radius);
  cursor: pointer;
}
.ws-hero__dot::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 300ms var(--ws-ease);
}
.ws-hero__dot:hover::before { background: rgba(255, 255, 255, 0.85); }
.ws-hero__dot.is-active::before { background: var(--ws-signal-500); }
.ws-hero__dot.is-active:hover::before { background: var(--ws-signal-400); }
.ws-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 32, 0.24);
  pointer-events: none;
}
/* Nav scrim: keeps the overlay nav legible over the photograph. */
.ws-hero__media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(var(--ws-nav-h) * 2.4);
  background: linear-gradient(180deg, rgba(14, 20, 32, 0.94) 0%, rgba(14, 20, 32, 0.7) 40%, rgba(14, 20, 32, 0) 100%);
  pointer-events: none;
}
@keyframes ws-ambient { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (max-width: 899.98px) {
  .ws-hero { grid-template-columns: 1fr; min-height: 0; }
  .ws-hero__copy {
    padding: calc(var(--ws-nav-h) + 48px) var(--ws-gutter) 56px;
  }
  .ws-hero__media {
    aspect-ratio: 4 / 3;
    border-left: 0;
    border-top: var(--ws-border) solid var(--rule);
  }
  .ws-hero__media::before { display: none; }
}

@media (max-width: 599.98px) {
  .ws-hero__copy {
    gap: 22px;
    width: 100%;
    max-width: 100vw;
    padding: calc(var(--ws-nav-h) + 32px) calc(var(--ws-gutter) + 16px) 44px var(--ws-gutter);
    overflow: hidden;
  }
  .ws-hero__copy h1,
  .ws-hero--split .ws-hero__copy h1,
  .ws-fieldhero__copy h1 {
    max-width: 100%;
  }
  .ws-hero__copy p,
  .ws-fieldhero__copy .ws-lede {
    width: 100%;
    max-width: 34ch;
    overflow-wrap: normal;
    word-break: normal;
  }
  .ws-hero__media {
    aspect-ratio: 1 / 1;
  }
  .ws-hero__dots {
    right: 11px;
    bottom: 2px;
  }
  .ws-js .ws-lines:not(.is-in) {
    visibility: visible;
  }
  /* The heading's own text is hidden at font-size 0 and its label drawn
     by ::before, so any ch-based max-width on the heading (26ch on
     .ws-why__h2) would collapse to 0 and break the label one word per line.
     The measure lives on ::before instead, in the label's real font size. */
  .ws-js .ws-lines[aria-label] {
    max-width: none;
    font-size: 0;
    line-height: 0;
  }
  .ws-js .ws-lines[aria-label]::before {
    content: attr(aria-label);
    display: block;
    width: 100%;
    max-width: 17ch;
    font-size: var(--ws-h1);
    line-height: 1.12;
    color: var(--fg);
    white-space: normal;
    overflow-wrap: normal;
  }
  h2.ws-lines[aria-label]::before {
    font-size: var(--ws-h2);
    line-height: 1.18;
    max-width: 20ch;
  }
  .ws-js .ws-lines[aria-label] .ws-line {
    display: none;
  }
}

/* 5.15 Home — The Big Idea: intro + Working Model, NEW-02 (Home §2) ------ */
/* The intro's section padding already separates it from the animation. */
.ws-idea__intro .ws-section-head { margin-bottom: 0; }

/* Self-contained block: .ws-wm, ported from `story-preview-wide-coffee-v4.html`.
   The prototype's class names are kept and scoped here. Renderings:
     .d-story  >= 900px. A static final composition by default (reduced motion,
               no GSAP); working-model.js adds .is-anim to pin and scrub it.
     .m-story  < 900px. A stacked reading, never pinned. */
.ws-wm {
  --wm-ink-500-dk: color-mix(in srgb, var(--ws-ink-500) 50%, var(--ws-white));
  --wm-mute: #5B6677;
  position: relative;
  background: var(--ws-ink-900);
  color: var(--ws-white);
}
.ws-wm p { max-width: none; }
.ws-wm img { max-width: none; border-radius: 0; }
.ws-wm svg { max-width: none; }

/* Type */
.ws-wm .label { margin: 0; font: 500 12px/1.3 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }
.ws-wm .label .n { color: var(--ws-white); margin-right: 1.1em; }
.ws-wm .headline {
  margin: 0; font-family: var(--ws-font-sans); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -.015em;
  color: var(--ws-white); text-wrap: balance;
}
.ws-wm .hl-line { display: block; }
/* Designed line breaks suit the pinned band only; elsewhere, let lines flow. */
.ws-wm:not(.is-anim) .copy:not(.copy--final) .hl-line { display: inline; }
@media (max-width: 899.98px) { .ws-wm .hl-line { display: inline; } }
.ws-wm .support { margin: 12px 0 0; font: 400 17px/1.6 var(--ws-font-sans); color: var(--wm-ink-500-dk); max-width: 62ch; text-wrap: pretty; }

/* Image frames (placeholders or treated photographs) */
.ws-wm .ph { background: var(--ws-ink-800); border: 1px solid var(--ws-line-dk); overflow: hidden; isolation: isolate; }
.ws-wm .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-wm .ph-x { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ws-line-dk); stroke-width: 1; }
.ws-wm .ph-focal { position: absolute; width: 15px; height: 15px; transform: translate(-50%, -50%); }
.ws-wm .ph-focal::before, .ws-wm .ph-focal::after { content: ""; position: absolute; background: var(--ws-signal-300); opacity: .75; }
.ws-wm .ph-focal::before { left: 7px; top: 0; width: 1px; height: 15px; }
.ws-wm .ph-focal::after { top: 7px; left: 0; width: 15px; height: 1px; }
.ws-wm .ph-meta {
  position: absolute; left: 10px; top: 9px; max-width: calc(100% - 20px);
  display: flex; flex-direction: column; gap: 3px;
  font: 500 11px/1.3 var(--ws-font-mono); letter-spacing: .04em; overflow-wrap: anywhere;
}
.ws-wm .ph[data-meta="br"] .ph-meta { top: auto; left: auto; right: 10px; bottom: 9px; align-items: flex-end; text-align: right; }
.ws-wm .ph[data-meta="tr"] .ph-meta { left: auto; right: 10px; align-items: flex-end; text-align: right; }
.ws-wm .ph-key { color: var(--ws-signal-300); }
.ws-wm .ph-dim { color: var(--wm-ink-500-dk); font-size: 10px; }
/* Palette treatment for photographs that arrive untreated (ASSETS treat: true). */
.ws-wm .ph.is-treated img { filter: grayscale(.34) saturate(.82) contrast(1.04) brightness(.70); }
.ws-wm .ph.is-treated::before, .ws-wm .ph.is-treated::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ws-wm .ph.is-treated::before { background: var(--ws-signal-500); mix-blend-mode: color; opacity: .12; }
.ws-wm .ph.is-treated::after { background: var(--ws-ink-900); opacity: .16; }
/* Keep agricultural and interface detail beneath the shared tint. */
.ws-wm .ph[data-asset="farmBackground"].is-treated img { filter: grayscale(.18) saturate(.90) contrast(1.03) brightness(.72); }
.ws-wm .ph[data-asset="farmBackground"].is-treated::before { opacity: .10; }
.ws-wm .ph[data-asset="farmBackground"].is-treated::after { opacity: .14; }
.ws-wm .ph[data-asset="enterpriseScreen"].is-treated img { filter: saturate(.84) contrast(1.04) brightness(.90); }
.ws-wm .ph[data-asset="enterpriseScreen"].is-treated::before { opacity: .05; }
.ws-wm .ph[data-asset="enterpriseScreen"].is-treated::after { opacity: .06; }

/* Desktop, static composition: everything the animation reveals is visible. */
.ws-wm .d-story { position: relative; overflow-x: clip; }
.ws-wm .stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 32px;
  /* Side padding puts the content on the site's .ws-container column. */
  padding: var(--ws-section-y) max(var(--ws-gutter), calc((100% - var(--ws-max)) / 2));
  background: var(--ws-ink-900);
}
.ws-wm .copy { border-top: 1px solid var(--ws-line-dk); padding-top: 16px; }
.ws-wm .copy .label { margin-bottom: 12px; }
.ws-wm .copy .headline { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
.ws-wm .copy .support { font-size: 15px; line-height: 1.55; margin-top: 8px; }
/* The markup order is the reading order: final copy, diagram, stages 00–06. */
.ws-wm .copy--final { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
.ws-wm .copy--final .headline { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -.015em; max-width: 40ch; }
.ws-wm .copy--final .support { font-size: 17px; line-height: 1.6; margin-top: 12px; }
.ws-wm .scene-wrap { grid-column: 1 / -1; position: relative; aspect-ratio: 1520 / 640; overflow: hidden; }

/* Desktop, pinned. The site nav stays in view, so the stage starts below it
   (as .ws-li .stage and .ws-cap-section do). Every copy shares the copy
   area, stacked; the timeline shows one at a time. */
.ws-wm.is-anim .stage {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 20%);
  grid-template-rows: minmax(176px, auto) auto minmax(0, 1fr);
  grid-template-areas: "copy ruler" "rule rule" "scene scene";
  gap: 0 clamp(28px, 4vw, 72px);
  height: 100vh;
  height: 100svh;
  padding: calc(var(--ws-nav-h) + clamp(16px, 2.8vh, 34px)) max(var(--ws-gutter), calc((100% - var(--ws-max)) / 2)) clamp(10px, 2vh, 22px);
}
/* The rule between the copy band and the scene. */
.ws-wm.is-anim .stage::before {
  content: "";
  grid-area: rule;
  margin-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid var(--ws-line-dk);
}
.ws-wm.is-anim .copy {
  grid-area: copy;
  align-self: start;
  display: grid;
  /* Minimums keep every stage's text on the same lines; a headline that
     wraps further grows its row instead of running into the support line. */
  grid-template-rows: 16px minmax(92px, auto) minmax(52px, auto);
  row-gap: 8px;
  border-top: 0;
  padding-top: 0;
}
.ws-wm.is-anim .copy .label { margin: 0; align-self: start; }
.ws-wm.is-anim .copy .headline { align-self: start; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.18; letter-spacing: -.015em; max-width: 44ch; }
.ws-wm.is-anim .copy .support { align-self: start; font-size: 17px; line-height: 1.5; margin: 0; max-width: 62ch; }
.ws-wm.is-anim .scene-wrap { grid-area: scene; aspect-ratio: auto; min-height: 0; margin-top: clamp(8px, 1.6vh, 18px); }
/* Short desktop viewports (laptops): the copy band yields height to the scene. */
@media (max-height: 820px) {
  .ws-wm.is-anim .copy .headline { font-size: clamp(26px, min(2.9vw, 4.4vh), 36px); }
  .ws-wm.is-anim .copy .support { font-size: 16px; line-height: 1.5; }
  .ws-wm.is-anim .copy { grid-template-rows: 16px auto auto; }
}

/* Progress ruler — a measurement scale, pinned story only */
.ws-wm .ruler { display: none; align-self: end; padding-bottom: 2px; }
.ws-wm.is-anim .ruler { grid-area: ruler; display: block; }
.ws-wm .ruler-cue { display: block; margin: 0 0 14px; text-align: right; }
.ws-wm .ruler-track { position: relative; height: 26px; }
.ws-wm .ruler-track::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ws-line-dk); }
.ws-wm .ruler-fill { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ws-signal-500); transform: scaleX(0); transform-origin: 0 50%; }
.ws-wm .ruler-tick { position: absolute; top: 0; color: var(--wm-mute); }
.ws-wm .ruler-tick::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 7px; background: currentColor; }
.ws-wm .ruler-tick b { position: absolute; left: 0; top: 11px; transform: translateX(-50%); font: 500 10px/1 var(--ws-font-mono); letter-spacing: .08em; }
.ws-wm .ruler-tick[data-i="0"] b { transform: none; }
.ws-wm .ruler-tick[data-last] b { transform: translateX(-100%); }

/* Scene: one 1520 × 640 design space. Frames are placed in percentages of
   it and the SVGs fill it, so in the static composition the scene simply
   fills its 1520 / 640 wrap, with or without script. The pinned story lays
   it out at 1520 × 640px, which the timeline's coordinates assume, and
   fitScene() scales it to the wrap. */
.ws-wm .scene { position: absolute; inset: 0; transform-origin: 0 0; }
.ws-wm.is-anim .scene { inset: auto; left: 0; top: 0; width: 1520px; height: 640px; }
.ws-wm .layer { position: absolute; inset: 0; }
.ws-wm .scene .ph { position: absolute; }
.ws-wm .lsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* SVG vocabulary: 1px line drawing, square corners */
.ws-wm .s { fill: none; stroke: var(--ws-white); stroke-width: 1; }
.ws-wm .s-dim { stroke-opacity: .5; }
.ws-wm .s-c { stroke: var(--ws-signal-500); }
.ws-wm .s-r { stroke: var(--ws-signal-300); }
.ws-wm .s-line { stroke: var(--ws-line-dk); }
.ws-wm .s-mute { stroke: var(--wm-mute); }
.ws-wm .fill-ink { fill: var(--ws-ink-900); }
.ws-wm .fill-w { fill: var(--ws-white); }
.ws-wm .t { font-family: var(--ws-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; fill: var(--ws-white); }
.ws-wm .t-c { fill: var(--ws-signal-300); }
.ws-wm .t-m { fill: var(--wm-ink-500-dk); }
.ws-wm .t-brand { font-family: var(--ws-font-sans); font-weight: 600; font-size: 15px; letter-spacing: .06em; fill: var(--ws-white); }
.ws-wm .world-head { font-family: var(--ws-font-sans); font-weight: 600; font-size: 17px; letter-spacing: .06em; fill: var(--ws-signal-300); }
.ws-wm .plate { fill: var(--ws-ink-900); stroke: var(--ws-line-dk); stroke-width: 1; }
.ws-wm .pt { fill: var(--ws-signal-500); }
.ws-wm .pt-r { fill: var(--ws-signal-300); }
.ws-wm .pt-w { fill: var(--ws-white); fill-opacity: .8; }

/* Mobile & tablet (< 900px): one connected world. Ported from
   `story-preview-wide-coffee-v4-mobile-v3.html`; working-model.js adds
   .is-m-anim when motion is allowed. The sticky stage sits below the site
   nav, so it is the viewport less the nav's height.
   ─────────────────────────────────────────────────────────────────────
   Farm, Wingsure, enterprise and ecosystem are laid out once, as a
   single vertical diagram, by layoutWorld(). A fixed window frames it.
   The camera travels down the diagram as evidence moves forward, back
   up it as value returns to the farmer, then gives way to the cycle's
   three parts. Without motion, the diagram is shown complete. */
.ws-wm .m-story { display: none; }
@media (max-width: 899.98px) {
  .ws-wm .d-story { display: none; }
  .ws-wm .m-story { display: block; }
}

.ws-wm .m-stage {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--ws-section-y) max(20px, env(safe-area-inset-right)) var(--ws-section-y) max(20px, env(safe-area-inset-left));
}
.ws-wm .m-cue {
  font: 500 9px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ws-signal-300); white-space: nowrap;
}
.ws-wm .m-copy { padding: 22px 0; border-bottom: 1px solid var(--ws-line-dk); }
.ws-wm .m-copy .label { margin: 0 0 10px; }
.ws-wm .m-copy .headline {
  font-size: clamp(25px, 7.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 17em;
}
/* Two-sentence headlines break between sentences, not inside them. */
.ws-wm .m-copy .hl-s { display: inline-block; }
.ws-wm .m-copy .support { margin: 9px 0 0; max-width: 36em; font-size: clamp(14px, 3.9vw, 16px); line-height: 1.45; }
.ws-wm .m-window {
  position: relative; height: var(--m-world-h, auto); margin-top: 28px;
  overflow: hidden; border: 1px solid var(--ws-line-dk); background: var(--ws-ink-900);
}
html:not(.ws-js) .ws-wm .m-window { display: none; }
.ws-wm .m-bottom, .ws-wm .m-cycle { display: none; }

/* The world: every position is set by layoutWorld() */
.ws-wm .m-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; --fs: 9.5px; }
.ws-wm .mw { position: absolute; z-index: 3; margin: 0; }
.ws-wm .mw-photo { z-index: 1; overflow: hidden; border: 1px solid var(--ws-line-dk); background: var(--ws-ink-800); }
.ws-wm .mw-photo > .ph { position: absolute; inset: 0; border: 0; }
.ws-wm .mw-lines { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.ws-wm .mw-lines path, .ws-wm .mw-lines rect { fill: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.ws-wm .ln-w { stroke: var(--ws-white); }
.ws-wm .ln-dim { stroke: var(--ws-white); stroke-opacity: .5; }
.ws-wm .ln-c { stroke: var(--ws-signal-500); }
.ws-wm .ln-r { stroke: var(--ws-signal-300); }

.ws-wm .mw-head {
  font: 600 13px/16px var(--ws-font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ws-signal-300); white-space: nowrap;
}
.ws-wm .mw-head--split { display: flex; justify-content: space-between; align-items: baseline; }
.ws-wm .mw-head--split span { font: 500 var(--fs)/16px var(--ws-font-mono); letter-spacing: .08em; }
.ws-wm .mw-cap, .ws-wm .mw-tag, .ws-wm .mw-rec, .ws-wm .mw-val, .ws-wm .mw-chk, .ws-wm .mw-int, .ws-wm .mw-fn, .ws-wm .mw-eco, .ws-wm .mw-card b, .ws-wm .mw-card em {
  font: 500 var(--fs)/12px var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ws-wm .mw-cap { color: var(--ws-signal-300); }
.ws-wm .mw-tag { height: 22px; padding: 4px 6px; border: 1px solid var(--ws-line-dk); background: var(--ws-ink-900); color: var(--ws-white); }

.ws-wm .mw-farmer { width: 18px; height: 18px; border: 1px solid var(--ws-signal-300); border-radius: 50%; background: var(--ws-ink-900); }
.ws-wm .mw-farmer::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ws-white); }
.ws-wm .mw-halo { width: 34px; height: 34px; border: 1px solid var(--ws-signal-300); border-radius: 50%; }
.ws-wm .mw-phone { border: 1px solid var(--ws-signal-500); }
.ws-wm .mw-plot-mk { width: 8px; height: 8px; border: 1px solid var(--ws-signal-500); background: var(--ws-ink-900); }
.ws-wm .mw-sensor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ws-wm .mw-sensor svg * { fill: none; stroke: var(--ws-white); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ws-wm .mw-sensor svg .g-body { fill: var(--ws-ink-900); }
.ws-wm .mw-sensor .mw-tag { position: absolute; top: 50%; margin-top: -11px; }
.ws-wm .mw-sensor[data-side="r"] .mw-tag { left: calc(100% + 8px); }
.ws-wm .mw-sensor[data-side="l"] .mw-tag { right: calc(100% + 8px); }
.ws-wm .mw-rec { height: 22px; padding: 4px 0; text-align: center; border: 1px solid var(--ws-white); background: var(--ws-ink-900); color: var(--ws-white); }
.ws-wm .mw-val { height: 22px; padding: 4px 0; text-align: center; border: 1px solid var(--ws-signal-300); background: var(--ws-ink-900); color: var(--ws-white); }

.ws-wm .mw-chk { display: flex; align-items: center; gap: 8px; height: 24px; border-bottom: 1px solid var(--ws-line-dk); color: var(--ws-white); }
.ws-wm .mw-box { position: relative; flex: none; width: 11px; height: 11px; border: 1px solid var(--ws-signal-500); }
.ws-wm .mw-tick {
  position: absolute; left: 2px; top: 1px; width: 6px; height: 4px;
  border-left: 1px solid var(--ws-signal-300); border-bottom: 1px solid var(--ws-signal-300);
  transform: rotate(-45deg);
}
.ws-wm .mw-card { display: grid; align-content: start; gap: 5px; padding: 9px 10px; }
.ws-wm .mw-card b { font-weight: 500; color: var(--ws-signal-300); }
.ws-wm .mw-card i { display: block; height: 1px; background: var(--ws-white); opacity: .46; }
.ws-wm .mw-card i:nth-of-type(2) { width: 72%; } .mw-card i:nth-of-type(3) { width: 88%; } .mw-card i:nth-of-type(4) { width: 60%; }
.ws-wm .mw-card em { font-style: normal; color: var(--ws-signal-300); }
.ws-wm .mw-int { display: grid; place-items: center; height: 24px; border: 1px solid rgba(20, 184, 166, .6); color: var(--ws-white); }
.ws-wm .mw-fn { height: 22px; padding: 4px 7px; border: 1px solid var(--ws-line-dk); background: rgba(14, 20, 32, .92); color: var(--ws-white); }
.ws-wm .mw-eco { height: 24px; padding: 6px 10px; color: var(--ws-white); }
.ws-wm .mw-frag { z-index: 4; width: 6px; height: 6px; background: var(--ws-white); }
.ws-wm:not(.is-m-anim) .mw-frag { display: none; }

/* ─── Mobile: animated (sticky) layout ─────────────────── */
.ws-wm.is-m-anim .m-story { position: relative; height: 880vh; height: 880svh; }
.ws-wm.is-m-anim .m-stage {
  position: sticky; top: var(--ws-nav-h);
  height: calc(100vh - var(--ws-nav-h)); height: calc(100svh - var(--ws-nav-h));
  max-width: none; margin: 0; padding: 0; overflow: hidden;
  --gl: max(20px, env(safe-area-inset-left), calc((100% - 680px) / 2));
  --gr: max(20px, env(safe-area-inset-right), calc((100% - 680px) / 2));
  --top: max(16px, env(safe-area-inset-top));
  --bot: max(14px, env(safe-area-inset-bottom));
}
.ws-wm.is-m-anim .m-copy-stack {
  position: absolute; z-index: 18; left: var(--gl); right: var(--gr);
  top: var(--top); height: var(--m-copy-h, 28svh);
}
.ws-wm.is-m-anim .m-copy { position: absolute; left: 0; right: 0; top: 0; padding: 0; border: 0; opacity: 0; }
.ws-wm.is-m-anim .m-copy:first-child { opacity: 1; }
.ws-wm.is-m-anim .m-window {
  position: absolute; z-index: 2; left: var(--gl); right: var(--gr);
  top: calc(var(--top) + var(--m-copy-h, 28svh) + 16px);
  bottom: calc(var(--bot) + 38px);
  height: auto; margin: 0;
}
.ws-wm.is-m-anim .m-world { will-change: transform; }

.ws-wm.is-m-anim .m-bottom {
  position: absolute; z-index: 20; left: var(--gl); right: var(--gr); bottom: var(--bot);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.ws-wm .m-ruler { position: relative; flex: 1; max-width: 300px; height: 20px; margin-right: 6px; }
.ws-wm .m-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ws-line-dk); }
.ws-wm .m-ruler-fill { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ws-signal-500); transform: scaleX(0); transform-origin: 0 50%; }
.ws-wm .m-tick { position: absolute; top: 0; color: var(--wm-mute); }
.ws-wm .m-tick::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 6px; background: currentColor; }
.ws-wm .m-tick b { position: absolute; left: 0; top: 10px; transform: translateX(-50%); font: 500 9px/1 var(--ws-font-mono); letter-spacing: .06em; }
.ws-wm .m-tick:first-child b { transform: none; }
.ws-wm .m-tick:last-child b { transform: translateX(-100%); }
.ws-wm .m-cue::after { content: "\2193"; margin-left: 7px; }

/* Final frame: the cycle's three parts, readable at phone size. Farmer,
   Wingsure and enterprise stack down the middle of the window; between
   each pair, evidence and intelligence run down (left, teal) and value runs
   back up (right, light teal), each line ending in its arrowhead. */
.ws-wm.is-m-anim .m-cycle {
  --node-h: clamp(76px, 12svh, 130px);
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px var(--ws-gutter); pointer-events: none;
}
/* Each part is a card: its photograph (the story's own frames) beside its
   name. Cards grow with the screen's height, and never narrow below 300px
   (the window's width at most), so the names always fit. */
.ws-wm .m-cycle__node {
  display: flex; flex: none; width: min(100%, max(300px, calc(var(--node-h) * 3.6))); height: var(--node-h);
  border: 1px solid var(--ws-line-dk); background: var(--ws-ink-900);
}
.ws-wm .m-cycle__media { position: relative; flex: 0 0 50%; border-right: 1px solid var(--ws-line-dk); }
.ws-wm .m-cycle__media .ph { position: absolute; inset: 0; border: 0; }
.ws-wm .m-cycle__name {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0;
  font: 600 15px/1.2 var(--ws-font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ws-white);
}
.ws-wm .m-cycle__node--farmer { border-color: var(--ws-signal-300); }
/* Wingsure is its logo alone, no card: it sits between the two cards as
   the layer the evidence passes through. */
.ws-wm .m-cycle__node--wing {
  align-items: center; justify-content: center;
  height: auto; padding-block: 6px; border: 0; background: none;
}
.ws-wm .m-cycle__logo { width: min(60%, 160px); height: auto; }
.ws-wm .m-cycle__dot {
  position: relative; flex: none; width: 14px; height: 14px;
  border: 1px solid var(--ws-signal-300); border-radius: 50%;
}
.ws-wm .m-cycle__dot::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ws-white); }
.ws-wm .m-cycle__link { position: relative; flex: 0 1 64px; min-height: 26px; width: 64px; }
.ws-wm .m-cycle__fwd, .ws-wm .m-cycle__ret { position: absolute; top: 3px; bottom: 3px; width: 2px; background: currentColor; }
.ws-wm .m-cycle__fwd { left: 16px; color: var(--ws-signal-500); }
.ws-wm .m-cycle__ret { right: 16px; color: var(--ws-signal-300); }
.ws-wm .m-cycle__fwd::after, .ws-wm .m-cycle__ret::after {
  content: ""; position: absolute; left: -3px; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.ws-wm .m-cycle__fwd::after { bottom: 0; transform: rotate(45deg); }
.ws-wm .m-cycle__ret::after { top: 0; transform: rotate(-135deg); }
.ws-wm .m-cycle__key {
  display: grid; gap: 8px; margin: 22px 0 0;
  font: 500 10px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--wm-ink-500-dk); white-space: nowrap;
}
.ws-wm .m-cycle__key span { display: flex; align-items: center; gap: 8px; }
.ws-wm .m-cycle__key span::before { content: ""; width: 20px; height: 2px; background: var(--ws-signal-500); }
.ws-wm .m-cycle__key .k-ret::before { background: var(--ws-signal-300); }

/* Short phones: give the window more of the screen. */
@media (max-width: 899.98px) and (max-height: 720px) {
  .ws-wm .m-copy .headline { font-size: clamp(23px, 6.6vw, 29px); }
  .ws-wm .m-copy .support { font-size: 13.5px; line-height: 1.4; margin-top: 7px; }
  .ws-wm.is-m-anim .m-stage { --top: max(12px, env(safe-area-inset-top)); }
  .ws-wm.is-m-anim .m-window { top: calc(var(--top) + var(--m-copy-h, 28svh) + 12px); }
  .ws-wm.is-m-anim .m-cycle { --node-h: clamp(48px, 8.5svh, 60px); padding-block: 10px; }
  .ws-wm .m-cycle__link { min-height: 20px; }
  .ws-wm .m-cycle__key { margin-top: 14px; }
}
/* Phones held sideways: copy left, window right. */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 540px) {
  .ws-wm.is-m-anim .m-copy-stack { right: auto; width: 36%; height: auto; bottom: calc(var(--bot) + 38px); }
  .ws-wm.is-m-anim .m-copy .headline { font-size: clamp(20px, 3.3vw, 26px); }
  .ws-wm.is-m-anim .m-copy .support { font-size: 13px; }
  .ws-wm.is-m-anim .m-window { left: calc(var(--gl) + 36% + 24px); top: var(--top); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-wm .m-bottom, .ws-wm .m-cycle { display: none !important; }
}

/* 5.16 Home — capability rows, flow, tiles ------------------------------- */
.ws-copy { display: grid; gap: 24px; align-content: start; }
.ws-copy h2 { max-width: 20ch; }
.ws-copy .ws-btn-group { margin-top: 8px; }
.ws-copy--fill { grid-template-rows: auto auto auto 1fr; }
.ws-copy--fill > .ws-btn-group:last-child { align-self: end; }
@media (min-width: 900px) { .ws-copy--sticky { position: sticky; top: calc(var(--ws-nav-h) + 48px); } }
/* Image + copy read as one block (Applications pathways): the copy
   stretches to the row with its CTA at the foot, and the image keeps its
   ratio as a minimum and grows to the row, so the image's top meets the
   kicker and its bottom the CTA's lower edge. */
@media (min-width: 900px) {
  .ws-copy--end { align-self: stretch; display: flex; flex-direction: column; }
  .ws-copy--end > .ws-btn-group:last-child { margin-top: auto; }
  .ws-frame--fill { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  .ws-frame--fill > .ws-frame__media { min-height: 100%; }
}
/* Foot: from 900px the column fills its row, the kicker and heading at the
   top and the text and CTA at the foot, so the CTA ends level with the
   bottom of the content beside it (Home HOME-03). */
@media (min-width: 900px) {
  .ws-copy--foot { align-self: stretch; align-content: stretch; grid-template-rows: auto auto 1fr auto; }
  .ws-copy--foot > p { align-self: end; }
}

.ws-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.ws-flow li { display: inline-flex; align-items: center; gap: 12px; }
.ws-flow li + li::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ws-signal-500);
}

.ws-row--cap { grid-template-columns: 48px minmax(0, 3fr) minmax(0, 7fr); }
.ws-row--cap .ws-row__body { margin-top: 0; font-size: var(--ws-body); }
/* HOME-03.1: wherever rows have a number column, Farm in the
   Farm → Intelligence → Decision header is centred over the row numbers.
   From 768px, where number, title and description sit side by side, the
   header shares the rows' columns: Intelligence starts with the titles and
   Decision with the descriptions, and each connector stretches from one chip
   to the next. The number column widens to 80px so the Farm → Intelligence
   connector keeps a readable length, and the title column never narrows
   below the Intelligence chip plus a connector. Row text is left-aligned and
   vertically centred in the row. */
@media (min-width: 380px) {
  .ws-flow li:first-child { width: 48px; justify-content: center; }
  .ws-flow li:first-child .ws-chip { flex: none; }
  .ws-row--cap .ws-row__label { text-align: center; }
}
@media (min-width: 768px) {
  .ws-flow,
  .ws-row--cap { grid-template-columns: 80px minmax(148px, 3fr) minmax(0, 7fr); }
  .ws-flow { display: grid; column-gap: var(--ws-gap); }
  .ws-flow li { min-width: 0; }
  .ws-flow li + li::before { content: none; }
  .ws-flow li:first-child { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; width: auto; }
  .ws-flow li:first-child .ws-chip { grid-column: 2; }
  .ws-flow .ws-chip { flex: none; }
  /* Runs 10px past its chip and stops 10px short of the next one, across the column gap. */
  .ws-flow li:not(:last-child)::after {
    content: '';
    flex: 1;
    grid-column: 3;
    align-self: center;
    height: 1px;
    margin: 0 calc(10px - var(--ws-gap)) 0 10px;
    background: var(--ws-signal-500);
  }
  .ws-row--cap { align-items: center; }
}
@media (max-width: 767.98px) {
  .ws-row--cap { grid-template-columns: 48px minmax(0, 1fr); }
  .ws-row--cap .ws-row__body { grid-column: 2; }
}

@media (max-width: 379.98px) {
  .ws-row--cap {
    grid-template-columns: 1fr;
  }
  .ws-row--cap .ws-row__body {
    grid-column: auto;
  }
}

.ws-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
.ws-tile {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(24px, 2.4vw, 36px);
  background: var(--bg);
  transition: background-color var(--ws-dur-ui) var(--ws-ease);
}
.ws-tile:hover { background: var(--surface); }
.ws-tile__glyph { width: 32px; height: 32px; color: var(--ws-signal-600); }
.ws-tile h3 { font-size: var(--ws-body-lg); line-height: 1.35; }
.ws-tile p { font-size: var(--ws-small); }
@media (max-width: 599.98px) { .ws-tiles { grid-template-columns: 1fr; } }
.ws-tiles--raised .ws-tile { background: var(--surface); }
/* Steps: a small index beside each glyph; the glyph line-draws in as its
   tile enters, with the stagger (the capability band's stroke draw). */
.ws-tile__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ws-tile__n {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--fg-meta);
  transition: color var(--ws-dur-ui) var(--ws-ease);
}
.ws-tile:hover .ws-tile__n { color: var(--accent); }
.ws-js .ws-tiles--steps .ws-tile__glyph {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1100ms var(--ws-ease);
}
.ws-js .ws-tiles--steps .ws-tile.is-in .ws-tile__glyph { stroke-dashoffset: 0; }
.ws-tiles--steps .ws-tile:nth-child(1) .ws-tile__glyph { transition-delay: 300ms; }
.ws-tiles--steps .ws-tile:nth-child(2) .ws-tile__glyph { transition-delay: 420ms; }
.ws-tiles--steps .ws-tile:nth-child(3) .ws-tile__glyph { transition-delay: 540ms; }
.ws-tiles--steps .ws-tile:nth-child(4) .ws-tile__glyph { transition-delay: 660ms; }
/* Gapped: compact tiles, each bordered, 12px apart. */
.ws-tiles--gapped { gap: 12px; background: none; border: 0; }
.ws-tiles--gapped .ws-tile {
  gap: 18px;
  padding: clamp(18px, 1.6vw, 24px);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius-soft);
}
/* The glyph, title and index share one line. */
.ws-tiles--gapped .ws-tile__head { align-items: center; justify-content: flex-start; gap: 12px; }
.ws-tiles--gapped .ws-tile__glyph { flex: none; width: 24px; height: 24px; }
.ws-tiles--gapped .ws-tile h3 { font-size: var(--ws-body); line-height: 1.35; }
/* A heavier, larger index, set on the title's first line. */
.ws-tiles--gapped .ws-tile__n {
  margin-left: auto; align-self: flex-start;
  font-size: var(--ws-body-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0.06em;
  color: var(--fg-body);
}
.ws-stages { display: grid; gap: 20px; }

/* FI-07: the original section's feel with the content swapped. From 900px
   the heading column and the stages share one row: the tiles start level
   with the kicker and the lede and CTA sit at the foot of the heading column.
   The 2x2 grid keeps its own height rather than stretching to the heading
   column (which left the tiles mostly empty); every tile is the same size
   (equal rows), set by the fullest one. The tiles sit on the section
   background and lift to the surface on hover, as Home's Applications tiles
   do. Stacked in the same order below 900px. */
.ws-scale .ws-tiles { grid-auto-rows: 1fr; }
@media (min-width: 900px) {
  .ws-scale .ws-stages { align-self: start; }
}
.ws-scale__head { display: flex; flex-direction: column; gap: 32px; }
.ws-scale__title { display: grid; gap: 20px; }
.ws-scale__title h2 { max-width: 22ch; }
.ws-scale__body { margin-top: auto; }
.ws-scale__body .ws-lede { color: var(--fg-body); }
.ws-scale__body .ws-btn-group { margin-top: 24px; }
@media (max-width: 899.98px) { .ws-scale { row-gap: clamp(40px, 6vh, 64px); } }

/* Flush sections run their last band to the section edge. */
.ws-section--flush { padding-bottom: 0; }

/* 5.18 Pinned capability band (Farm Intelligence §5) --------------------- */
/* Self-contained block: .ws-cap. Five line glyphs are drawn once as
   <symbol>s in a 0x0 <defs> svg and instanced with <use>. The stage pins
   at >= 900px (motion allowed); the list is the stacked rendering. */
.ws-cap {
  --cap-line: color-mix(in srgb, var(--ws-white) 78%, var(--ws-ink-900));
  --cap-line-dim: color-mix(in srgb, var(--ws-white) 42%, var(--ws-ink-900));
  --cap-line-faint: color-mix(in srgb, var(--ws-white) 22%, var(--ws-ink-900));
  position: relative;
  margin-top: clamp(40px, 6vh, 64px);
  border-top: var(--ws-border) solid var(--ws-line-dk);
}
.ws-cap__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Glyph line work — 1px at every size */
.ws-cap__glyph { display: block; width: 100%; height: 100%; }
.ws-cap__glyph path, .ws-cap__glyph rect {
  fill: none;
  stroke-width: 1;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.ws-cap__g-line { stroke: var(--ws-signal-500); }
.ws-cap__g-dim { stroke: var(--cap-line-dim); }
.ws-cap__g-faint { stroke: var(--cap-line-faint); }

.ws-cap__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 20 / 13;
  border: var(--ws-border) solid var(--ws-line-dk);
  border-radius: var(--ws-radius);
}
.ws-cap__ticks { position: absolute; inset: -1px; pointer-events: none; }
.ws-cap__ticks::before, .ws-cap__ticks::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--ws-signal-500);
}
.ws-cap__ticks::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.ws-cap__ticks::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* Mono index numbers and labels */
.ws-cap__num {
  padding-top: 3px;
  font-family: var(--ws-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ws-signal-500);
}
.ws-cap__label {
  font-family: var(--ws-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--cap-line);
}
.ws-cap__kicker {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-signal-500);
}

/* Pinned stage (>= 900px, motion allowed) */
.ws-cap__stage { display: none; }
.ws-cap__index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--ws-border) solid var(--ws-line-dk);
}
.ws-cap__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  padding: 16px 0;
  border-top: var(--ws-border) solid var(--ws-line-dk);
  opacity: 0.4;
  transition: opacity 400ms var(--ws-ease), border-top-color 400ms var(--ws-ease);
}
.ws-cap__item.is-active { opacity: 1; border-top-color: var(--ws-signal-500); }

.ws-cap__panel { display: grid; row-gap: 32px; align-content: start; }
.ws-cap__progress {
  position: relative;
  height: 1px;
  margin-top: 28px;
  background: var(--ws-line-dk);
}
.ws-cap__fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0.2);
  transform-origin: left center;
  background: var(--ws-signal-500);
}
.ws-cap__readout {
  position: absolute;
  top: -28px;
  right: 0;
  font-family: var(--ws-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--cap-line-dim);
}
.ws-cap__readout span { color: var(--ws-signal-500); }

.ws-cap__states { display: grid; }
.ws-cap__state {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  column-gap: var(--ws-gap);
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ws-ease), visibility 0s linear 400ms;
}
.ws-cap__state.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.ws-cap__text { display: grid; gap: 16px; align-content: start; }
.ws-cap__text h3 { max-width: 20ch; }
.ws-cap__text p { max-width: 42ch; margin: 0; font-size: var(--ws-body); }

/* Stacked rows (< 900px), also the reduced-motion rendering */
.ws-cap__list {
  display: grid;
  margin: 0;
  padding: 0 var(--ws-gutter) clamp(48px, 7vh, 88px);
  list-style: none;
}
.ws-cap__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 24px;
  padding: 28px 0;
  border-top: var(--ws-border) solid var(--ws-line-dk);
}
.ws-cap__row:first-child { border-top: 0; }
.ws-cap__row:last-child { border-bottom: var(--ws-border) solid var(--ws-line-dk); }
.ws-cap__row-text { display: grid; gap: 12px; }
.ws-cap__row-text p { margin: 0; font-size: var(--ws-small); }
.ws-cap__row .ws-cap__figure { max-width: 280px; }

@media (min-width: 600px) {
  .ws-cap__row { grid-template-columns: minmax(0, 1fr) minmax(0, 200px); column-gap: var(--ws-gap); }
  .ws-cap__row .ws-cap__figure { grid-column: 2; grid-row: 1; max-width: none; }
}


@media (min-width: 900px) {
  .ws-cap-section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 620px;
    padding-block: calc(var(--ws-nav-h) + 40px) 0;
  }
  .ws-cap-section .ws-section-head { margin-bottom: 0; }
  .ws-cap-section .ws-cap { margin-top: clamp(28px, 4vh, 48px); min-height: 0; }
  .ws-cap__stage { display: block; height: 100%; }
  /* The pinned section fills the screen. The block starts a short step below
     the heading rule, and the index rows take the height (they scale with the
     viewport) rather than an empty gap above or below. */
  .ws-cap__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--ws-gap);
    align-items: start;
    height: 100%;
    padding-block: clamp(48px, 7vh, 72px) 24px;
  }
  .ws-cap__item { padding-block: clamp(18px, 3.4vh, 34px); }
  .ws-cap__label { font-size: 14px; }
  .ws-cap__state { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ws-cap__text h3 { font-size: clamp(26px, 2.4vw, 34px); }
  .ws-cap__list { display: none; }
}
/* Short desktop windows (laptops with browser chrome): tighter spacing so the
   index and panel stay above the pinned section's foot. */
@media (min-width: 900px) and (max-height: 690px) {
  .ws-cap__inner { padding-block: clamp(20px, 4vh, 28px) 16px; }
  .ws-cap__item { padding-block: 14px; }
}
/* Compact pinned stage (< 900px, motion allowed: .is-staged from wingsure.js).
   The index runs across the top as five steps, then the progress rule, then
   the active state, its glyph taking the height that is left. The stage
   sits in the pinned section below its heading (.is-cap-pinned, below). */
@media (max-width: 899.98px) {
  .ws-cap.is-staged .ws-cap__list { display: none; }
  .ws-cap.is-staged .ws-cap__stage {
    display: block;
    height: 100vh;
    height: 100svh;
  }
  .ws-cap.is-staged .ws-cap__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding-block: calc(var(--ws-nav-h) + 24px) 24px;
  }
  .ws-cap.is-staged .ws-cap__index {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 8px;
    border-bottom: 0;
  }
  .ws-cap.is-staged .ws-cap__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 10px 0 0;
  }
  .ws-cap.is-staged .ws-cap__num { padding-top: 0; }
  .ws-cap.is-staged .ws-cap__label { font-size: 10px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
  .ws-cap.is-staged .ws-cap__panel {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 24px;
  }
  .ws-cap.is-staged .ws-cap__states { min-height: 0; }
  .ws-cap.is-staged .ws-cap__state {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 24px;
    min-height: 0;
  }
  .ws-cap.is-staged .ws-cap__text { gap: 12px; }
  /* The figure keeps its 20:13 frame where the height allows, and gives up
     height (the glyph scales down inside) on short screens. */
  .ws-cap.is-staged .ws-cap__figure {
    align-self: start;
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    min-height: 0;
  }
}
/* Whole-section pin below 900px (.is-cap-pinned from wingsure.js): one
   screen tall below the nav, the heading compact at the top and the staged
   band filling the rest. On short screens the lede folds away (JS) as the
   section arrives. */
@media (max-width: 899.98px) {
  .ws-cap-section.is-cap-pinned {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    padding-block: calc(var(--ws-nav-h) + 20px) 0;
    overflow: hidden;
  }
  .ws-cap-section.is-cap-pinned .ws-section-head { gap: 12px; margin-bottom: 0; }
  .ws-cap-section.is-cap-pinned .ws-section-head__title { display: grid; gap: 12px; }
  .ws-cap-section.is-cap-pinned .ws-section-head h2 { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.15; }
  .ws-cap-section.is-cap-pinned .ws-section-head .ws-lede { overflow: hidden; font-size: var(--ws-small); line-height: 1.55; }
  .ws-cap-section.is-cap-pinned .ws-cap { flex: 1; min-height: 0; margin-top: 32px; }
  .ws-cap-section.is-cap-pinned .ws-cap.is-staged .ws-cap__stage { height: 100%; }
  .ws-cap-section.is-cap-pinned .ws-cap.is-staged .ws-cap__inner { gap: 16px; padding-block: 16px 20px; }
  .ws-cap-section.is-cap-pinned .ws-cap.is-staged .ws-cap__panel,
  .ws-cap-section.is-cap-pinned .ws-cap.is-staged .ws-cap__state { row-gap: 16px; }
  .ws-cap-section.is-cap-pinned .ws-cap.is-staged .ws-cap__text p { font-size: var(--ws-small); }
  /* Shortest screens (< 600px tall, .is-cap-tiny): the progress rule and
     readout carry the position, so the index row gives its height to the
     glyph. */
  .ws-cap-section.is-cap-tiny .ws-cap { margin-top: 20px; }
  .ws-cap-section.is-cap-tiny .ws-cap.is-staged .ws-cap__index { display: none; }
}
/* The phone's five columns are too narrow for the labels; the active one is
   the state's heading anyway. */
@media (max-width: 479.98px) {
  .ws-cap.is-staged .ws-cap__label { display: none; }
}
/* Pinned stage motion (every width; the stage only shows when motion is
   allowed): each state rises in, and its glyph draws in as it becomes
   active. */
.ws-cap__state {
  transform: translateY(16px);
  transition: opacity 400ms var(--ws-ease), transform 500ms var(--ws-ease), visibility 0s linear 400ms;
}
.ws-cap__state.is-active { transform: none; transition-delay: 0s; }
/* Linear, because every stroke is shorter than the 620 dash: an ease-out
   would finish the visible draw in its first ~150ms. */
.ws-cap__state .ws-cap__glyph {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transition: stroke-dashoffset 1400ms linear;
}
.ws-cap__state.is-active .ws-cap__glyph { stroke-dashoffset: 0; transition-delay: 150ms; }
.ws-cap__state .ws-cap__ticks::before,
.ws-cap__state .ws-cap__ticks::after { transform: scale(0); transition: transform var(--ws-dur) var(--ws-ease); }
.ws-cap__state .ws-cap__ticks::before { transform-origin: top left; }
.ws-cap__state .ws-cap__ticks::after { transform-origin: bottom right; }
.ws-cap__state.is-active .ws-cap__ticks::before,
.ws-cap__state.is-active .ws-cap__ticks::after { transform: scale(1); transition-delay: 200ms; }

.ws-story { display: grid; gap: 20px; align-content: start; }
.ws-story__text { display: grid; gap: 12px; }
.ws-story__text h3 { max-width: 24ch; }
.ws-story__text p { font-size: var(--ws-small); }
/* Beside the lead story: the section lede, the two stories, then the CTA
   (HOME-07). The column stretches to the row, so the CTA's lower edge sits
   on the baseline of the lead story's last line, and the lede's capitals
   start level with the top of the lead image. */
.ws-stories-aside,
.ws-stories-aside__main { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.ws-stories-aside__main > .ws-lede { color: var(--fg-body); }
.ws-stories-aside > .ws-btn-group { margin-top: auto; }
@media (min-width: 900px) {
  .ws-stories-aside__main > .ws-lede { text-box: trim-start cap alphabetic; }
  .ws-story--lead .ws-story__text > p:last-child { text-box: trim-end cap alphabetic; }
}
.ws-story--lead .ws-story__text h3 { max-width: none; }
.ws-story--row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--ws-gap);
  align-items: start;
}
@media (max-width: 599.98px) { .ws-story--row { grid-template-columns: 1fr; } }
.ws-stories-aside__list { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 900px) {
  .ws-stories-aside,
  .ws-stories-aside__main { gap: 32px; }
  /* Narrower images give the story text more width and fewer lines, which
     leaves room for a clear gap between the two stories. */
  .ws-stories-aside__list { gap: 32px; }
  .ws-stories-aside__list > .ws-story--row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; }
}
/* Once .ws-container is at full width (the aside is then about 531px), the
   lede and stories span exactly the lead image's height: the second story's
   image ends level with its bottom. The lead is 7 of 12 columns at 5:3; the
   aside (5 columns) is the container, so its width gives the column width.
   Narrower, the stories' text wraps to more lines than fit beside the image,
   so they flow from the top. */
@media (min-width: 900px) {
  .ws-stories-aside { container-type: inline-size; }
}
@container (width >= 530px) {
  .ws-stories-aside__main { min-height: calc((1.4 * (100cqw - 4 * var(--ws-gap)) + 6 * var(--ws-gap)) * 0.6); }
  .ws-stories-aside__list { flex: 1; justify-content: space-between; }
}

.ws-proof {
  display: grid;
  gap: var(--ws-gap);
  align-content: center;
  align-self: stretch;
  min-height: clamp(220px, 24vw, 320px);
}
.ws-proof__metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}
/* HOME-08.3 KPIs: each figure and its label as one plain stack. */
.ws-proof__metrics .ws-stat {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  padding: 0;
  border: 0;
  color: var(--ws-white);
}
/* Under the In the Field hero copy the figures stay a step smaller. */
.ws-fieldhero__stats .ws-stat__value {
  font-size: clamp(34px, 3.1vw, 46px);
  line-height: 1;
}
.ws-proof__metrics .ws-stat__label {
  margin-top: 0;
  font-size: var(--ws-small);
  line-height: 1.3;
  color: var(--fg-body);
}
@media (max-width: 899.98px) {
  .ws-proof {
    min-height: auto;
    align-content: start;
  }
}

/* 5.18a Layered Intelligence — NEW-01 (Farm Intelligence §3) ------------- */
/* Self-contained block: .ws-li, ported from `layered-intelligence vf.html`.
   The prototype's class names are kept and scoped here. Two renderings:
   .d-story (pinned scroll story, shown when layered-intelligence.js adds
   .is-anim: >= 900px with motion allowed) and .flow (stacked reading:
   mobile, reduced motion, no GSAP). */
.ws-li {
  --li-ink-500-dk: color-mix(in srgb, var(--ws-ink-500) 50%, var(--ws-white));
  --li-mute: #5B6677;
  position: relative;
  background: var(--ws-ink-900);
  color: var(--ws-white);
}
.ws-li p { max-width: none; }
.ws-li img { border-radius: 0; }

/* Type */
.ws-li .wordmark { font: 600 15px/1 var(--ws-font-sans); letter-spacing: .05em; color: var(--ws-white); }
/* Section heading, inside the story so it stays with it: the top band of the
   pinned stage (as Home's copy band), the top of the flow, the phone bar.
   Two lines, one pair each, the answer line in signal teal; a narrow screen
   wraps between phrases, never inside one. */
.ws-li .li-head { padding-bottom: clamp(14px, 2.4vh, 24px); border-bottom: 1px solid var(--ws-line-dk); }
.ws-li .li-head__title {
  margin: 0; max-width: none; font-family: var(--ws-font-sans); font-weight: 600;
  font-size: clamp(26px, 4vw, 48px); line-height: 1.1; letter-spacing: -.02em; color: var(--ws-white);
}
.ws-li .li-head__line { display: block; }
.ws-li .li-head__line + .li-head__line { color: var(--ws-signal-300); }
.ws-li .li-head__line > span { white-space: nowrap; }
.ws-li .label { margin: 0; font: 500 12px/1.3 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }
.ws-li .label .n { color: var(--ws-white); margin-right: 1.1em; }
.ws-li .headline {
  margin: 0; max-width: none; font-family: var(--ws-font-sans); font-weight: 600;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.14; letter-spacing: -.018em;
  color: var(--ws-white); text-wrap: balance;
}
.ws-li .hl-line { display: block; }
.ws-li .support { margin: 14px 0 0; font: 400 17px/1.6 var(--ws-font-sans); color: var(--li-ink-500-dk); max-width: 46ch; text-wrap: pretty; }

/* Image frames */
.ws-li .ph { background: var(--ws-ink-800); overflow: hidden; }
.ws-li .ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; filter: brightness(.92); }
.ws-li .ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-li .ph-svg .grid { stroke: var(--ws-line-dk); stroke-width: 1; fill: none; }
.ws-li .ph-svg .x { stroke: var(--ws-line-dk); stroke-width: 1; fill: none; }
.ws-li .ph-focal { position: absolute; width: 15px; height: 15px; transform: translate(-50%, -50%); }
.ws-li .ph-focal::before, .ws-li .ph-focal::after { content: ""; position: absolute; background: var(--ws-signal-300); opacity: .75; }
.ws-li .ph-focal::before { left: 7px; top: 0; width: 1px; height: 15px; }
.ws-li .ph-focal::after { top: 7px; left: 0; width: 15px; height: 1px; }
.ws-li .ph-meta {
  position: absolute; right: 14px; bottom: 12px; max-width: calc(100% - 28px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right;
  font: 500 11px/1.3 var(--ws-font-mono); letter-spacing: .04em; overflow-wrap: anywhere;
}
.ws-li .ph-key { color: var(--ws-signal-300); }
.ws-li .ph-dim { color: var(--li-ink-500-dk); font-size: 10px; }

/* Level header — the large label on every image */
.ws-li .fhead {
  position: absolute; left: 16px; top: 16px; z-index: 3;
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; background: var(--ws-ink-900); border: 1px solid var(--ws-line-dk);
}
.ws-li .fh-level { font: 600 22px/1 var(--ws-font-sans); letter-spacing: -.01em; }
.ws-li .fh-src { font: 500 11px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }

/* Observation marks (positioned by script from image coordinates) */
.ws-li .marks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ws-li .mark { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ws-li .mark i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border: 1px solid var(--ws-signal-300); }
.ws-li .mark i::after { content: ""; position: absolute; left: 6px; top: 6px; width: 2px; height: 2px; background: var(--ws-white); }
.ws-li .mark em {
  position: absolute; top: 0; left: 30px; transform: translateY(-50%);
  font: normal 500 11px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ws-white); background: var(--ws-ink-900); border: 1px solid var(--ws-line-dk); padding: 5px 8px;
}
.ws-li .mark em::before { content: ""; position: absolute; right: 100%; top: 50%; width: 21px; height: 1px; background: var(--ws-signal-300); }
.ws-li .mark[data-side="l"] em { left: auto; right: 30px; }
.ws-li .mark[data-side="l"] em::before { right: auto; left: 100%; }

/* SVG vocabulary */
.ws-li svg { max-width: none; }
.ws-li .s { fill: none; stroke: var(--ws-white); stroke-width: 1; }
.ws-li .s-c { stroke: var(--ws-signal-500); }
.ws-li .s-r { stroke: var(--ws-signal-300); }
.ws-li .s-line { stroke: var(--ws-line-dk); }
/* Every-grower map: a crop of the Stage 1 satellite image, plots traced by hand */
.ws-li .gm-dim { fill: var(--ws-ink-900); opacity: .42; }
.ws-li .gplot { fill: none; stroke: var(--ws-signal-300); stroke-width: 1.5; stroke-linejoin: miter; }
.ws-li .gnode { fill: var(--ws-ink-900); stroke: var(--ws-signal-300); stroke-width: 1; }
.ws-li .fill-ink { fill: var(--ws-ink-900); }
.ws-li .t { font-family: var(--ws-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; fill: var(--ws-white); }
.ws-li .t-c { fill: var(--ws-signal-300); }
.ws-li .t-lg { font-size: 12px; }
.ws-li .t-sans { font-family: var(--ws-font-sans); font-weight: 400; font-size: 16px; letter-spacing: 0; fill: var(--ws-white); }
.ws-li .t-brand { font-family: var(--ws-font-sans); font-weight: 600; font-size: 24px; letter-spacing: .06em; fill: var(--ws-white); }

/* Desktop: pinned scroll story (only while the timeline is running) */
.ws-li .d-story { display: none; }
.ws-li.is-anim .d-story { display: block; }
.ws-li.is-anim .flow { display: none; }

/* The site nav stays in view, so the stage starts below it (as .ws-cap-section). */
.ws-li .stage {
  height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(320px, 32%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 3vh, 32px) clamp(32px, 4.4vw, 80px);
  /* Side padding puts the content on the site's .ws-container column. */
  padding: calc(var(--ws-nav-h) + clamp(16px, 3vh, 40px)) max(var(--ws-gutter), calc((100% - var(--ws-max)) / 2)) clamp(22px, 4vh, 48px);
  background: var(--ws-ink-900);
}
/* The heading spans the stage; its size also follows the height, so short
   screens keep room for the story. */
.ws-li .stage > .li-head { grid-column: 1 / -1; }
.ws-li .stage .li-head__title { font-size: clamp(28px, min(3.2vw, 5.2vh), 48px); }
/* The copy starts level with the photo frame's top (.frame is inset 10px) and
   the ladder ends level with its foot. */
.ws-li .rail { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding-block: 10px; }
.ws-li .copy-stack { display: grid; align-content: start; padding: 0 0 24px; }
.ws-li .copy { grid-area: 1 / 1; }
.ws-li .copy .label { margin-bottom: 16px; }
.ws-li .rail-bottom { padding-top: 14px; border-top: 1px solid var(--ws-line-dk); }

.ws-li .ladder { position: relative; list-style: none; margin: 0; padding: 0; }
.ws-li .ld-track { position: absolute; left: 4px; top: 23px; bottom: 23px; width: 1px; background: var(--ws-line-dk); }
.ws-li .ld-fill { position: absolute; inset: 0; background: var(--ws-signal-500); transform: scaleY(0); transform-origin: 50% 0; }
.ws-li .ld-row {
  position: relative; height: 46px;
  display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto; align-items: center;
  color: var(--li-mute);
}
.ws-li .ld-mk { position: relative; z-index: 1; display: block; width: 9px; height: 9px; border: 1px solid currentColor; background: var(--ws-ink-900); }
.ws-li .ld-n { font: 500 11px/1 var(--ws-font-mono); letter-spacing: .08em; }
.ws-li .ld-name { font: 500 18px/1.2 var(--ws-font-sans); }
.ws-li .ld-src { font: 500 11px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ws-li .cue { margin-top: 10px; color: var(--li-ink-500-dk); }

/* .frame is inset 10px for its corner ticks; the negative margin puts the
   photo's right edge (not the box's) on the container column. */
.ws-li .viz { position: relative; min-height: 0; margin-right: -10px; }
.ws-li .frame { position: absolute; inset: 10px; overflow: hidden; background: var(--ws-ink-800); transform-origin: 0 0; }
.ws-li .scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.ws-li .scene > .ph { position: absolute; inset: 0; }
.ws-li .frame-ticks { position: absolute; inset: 10px; pointer-events: none; }
.ws-li .frame-ticks i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ws-white); opacity: .5; }
.ws-li .frame-ticks i:nth-child(1) { left: -7px; top: -7px; border-top-width: 1px; border-left-width: 1px; }
.ws-li .frame-ticks i:nth-child(2) { right: -7px; top: -7px; border-top-width: 1px; border-right-width: 1px; }
.ws-li .frame-ticks i:nth-child(3) { left: -7px; bottom: -7px; border-bottom-width: 1px; border-left-width: 1px; }
.ws-li .frame-ticks i:nth-child(4) { right: -7px; bottom: -7px; border-bottom-width: 1px; border-right-width: 1px; }

/* Split Detail level: leaf pane above, cherry pane below */
.ws-li .pane { position: absolute; left: 0; right: 0; height: calc(50% - 4px); overflow: hidden; transform-origin: 0 0; will-change: transform; }
.ws-li .pane:first-child { top: 0; }
.ws-li .pane:last-child { bottom: 0; }
.ws-li .pane > .ph { position: absolute; inset: 0; }
.ws-li .pane-tag, .ws-li .f-pane-tag {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  font: 500 11px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ws-white); background: var(--ws-ink-900); border: 1px solid var(--ws-line-dk); padding: 6px 9px;
}
.ws-li .f-pair { display: grid; gap: 10px; }
.ws-li .reticle { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
/* The reticle sits on busy photographs, so its corners are drawn at 2px. */
.ws-li .rc { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 0 solid var(--ws-signal-300); }
.ws-li .rc.tl { border-top-width: 2px; border-left-width: 2px; }
.ws-li .rc.tr { border-top-width: 2px; border-right-width: 2px; }
.ws-li .rc.bl { border-bottom-width: 2px; border-left-width: 2px; }
.ws-li .rc.br { border-bottom-width: 2px; border-right-width: 2px; }
.ws-li .rc-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 11px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ws-white); background: var(--ws-ink-900); border: 1px solid var(--ws-signal-300); padding: 5px 8px;
}

/* Convergence composition — fixed 920×760 space, fitted by script */
.ws-li .conv { position: absolute; inset: 10px; pointer-events: none; }
.ws-li .conv-scene { position: absolute; left: 0; top: 0; width: 920px; height: 760px; transform-origin: 0 0; }
.ws-li .conv-svg { position: absolute; left: 0; top: 0; width: 920px; height: 760px; overflow: visible; }
.ws-li .tile { position: absolute; left: 0; width: 280px; height: 150px; border: 1px solid var(--ws-line-dk); }
.ws-li .tile > .ph { position: absolute; inset: 0; }
.ws-li .tile .ph-meta { display: none; }
/* Split Detail: leaf and cherry share one tile */
.ws-li .tile > .ph.half, .ws-li .f-tile > .ph.half { inset: 0 auto 0 0; width: calc(50% - 1px); }
.ws-li .tile > .ph.half + .ph.half, .ws-li .f-tile > .ph.half + .ph.half { inset: 0 0 0 auto; }
.ws-li .thead {
  position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; align-items: baseline; gap: 8px;
  padding: 6px 9px; background: var(--ws-ink-900); border: 1px solid var(--ws-line-dk);
}
.ws-li .thead b { font: 600 14px/1 var(--ws-font-sans); }
.ws-li .thead span { font: 500 10px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }

/* Short desktop viewports */
@media (max-height: 760px) {
  .ws-li .headline { font-size: clamp(26px, min(3vw, 4.6vh), 44px); }
  .ws-li .support { font-size: 16px; line-height: 1.5; }
  .ws-li .ld-row { height: 40px; }
  .ws-li .ld-track { top: 20px; bottom: 20px; }
  .ws-li .fh-level { font-size: 19px; }
}

/* Flow: mobile, reduced motion and no-GSAP reading */
.ws-li .flow { padding-block: var(--ws-section-y); overflow-x: clip; }
.ws-li .flow-head { margin-bottom: 40px; }
.ws-li .f-scene { display: grid; gap: 22px; }
.ws-li .f-copy .label { margin-bottom: 14px; }
.ws-li .f-fig { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ws-line-dk); }
.ws-li .f-fig > .ph { position: absolute; inset: 0; }
.ws-li .f-fig .fhead { left: 10px; top: 10px; padding: 8px 11px; }
.ws-li .f-fig .fh-level { font-size: 18px; }
.ws-li .f-link { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 30px; }
.ws-li .f-link i { position: relative; display: block; width: 1px; height: 44px; background: var(--ws-signal-500); }
.ws-li .f-link i::after {
  content: ""; position: absolute; left: -3px; bottom: 1px; width: 7px; height: 7px;
  border-right: 1px solid var(--ws-signal-500); border-bottom: 1px solid var(--ws-signal-500); transform: rotate(45deg);
}
.ws-li .f-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ws-li .f-tile { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--ws-line-dk); }
.ws-li .f-tile > .ph { position: absolute; inset: 0; }
.ws-li .f-tile .ph-meta { display: none; }
.ws-li .f-tile .thead { left: 6px; top: 6px; padding: 5px 7px; }
.ws-li .f-vline { width: 1px; height: 32px; margin: 0 auto; background: var(--ws-signal-500); }
.ws-li .f-panel { border: 1px solid var(--ws-white); padding: 20px 18px 22px; }
.ws-li .f-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ws-line-dk); }
.ws-li .f-panel-head .wordmark { font-size: 20px; }
.ws-li .f-sub { margin: 0 0 10px; font: 500 11px/1.3 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }
.ws-li .f-bands { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-li .f-bands li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .6); }
.ws-li .f-bands b { font: 500 10.5px/1.3 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ws-li .f-bands span { font: 400 15px/1.35 var(--ws-font-sans); }
.ws-li .f-map { display: block; width: 100%; height: auto; }
/* The map's closing label, set as the panel's other labels. */
.ws-li .f-sub--foot { margin: 12px 0 0; }

.ws-li .bracket { position: relative; }
.ws-li .bracket::before, .ws-li .bracket::after, .ws-li .bracket > .br::before, .ws-li .bracket > .br::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--ws-signal-500); pointer-events: none;
}
.ws-li .bracket::before { left: -6px; top: -6px; border-top-width: 1px; border-left-width: 1px; }
.ws-li .bracket::after { right: -6px; bottom: -6px; border-bottom-width: 1px; border-right-width: 1px; }
.ws-li .br { position: absolute; inset: 0; pointer-events: none; }
.ws-li .bracket > .br::before { right: -6px; top: -6px; border-top-width: 1px; border-right-width: 1px; }
.ws-li .bracket > .br::after { left: -6px; bottom: -6px; border-bottom-width: 1px; border-left-width: 1px; }

@media (max-width: 899.98px) {
  .ws-li .d-story { display: none !important; }
  .ws-li .flow { display: block !important; }
  .ws-li .mark em { font-size: 10px; padding: 4px 6px; left: 24px; }
  .ws-li .mark em::before { width: 15px; }
  .ws-li .mark[data-side="l"] em { left: auto; right: 24px; }
  .ws-li .f-tile .thead b { font-size: 12px; }
  .ws-li .f-tile .thead span { font-size: 9px; }
}
/* Smallest phones: tighter mark labels so edge marks stay inside their figure. */
@media (max-width: 379.98px) {
  .ws-li .mark em { font-size: 9px; padding: 3px 5px; left: 18px; }
  .ws-li .mark em::before { width: 9px; }
  .ws-li .mark[data-side="l"] em { left: auto; right: 18px; }
}
@media (min-width: 900px) {
  .ws-li .f-scene { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; }
  .ws-li .f-link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; justify-items: center; padding: 26px 0 34px; }
  .ws-li .f-link > * { grid-column: 2; }
  .ws-li .f-stack { display: grid; gap: 0; }
}

/* Mobile: pinned, connected zoom story (< 900px, motion allowed). Ported
   from `layered-intelligence-mobile.html`; layered-intelligence.js adds
   .is-mz and pins .mz-stage just below the site nav, so the stage is the
   viewport less the nav's height. Without motion or GSAP, .flow shows. */
.ws-li .mz-story, .ws-li .mz-head { display: none; }

@media (max-width: 899.98px) {
  .ws-li.is-mz .flow { display: none !important; }
  .ws-li.is-mz .mz-story { display: block; }
  /* The heading at the flow's size, on the story's side edges. */
  .ws-li.is-mz .mz-head {
    display: block;
    margin-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
    padding-top: var(--ws-section-y);
  }

  .ws-li .mz-story {
    position: relative; height: 720svh; min-height: 4200px;
    background: var(--ws-ink-900); overflow: clip;
  }
  .ws-li .mz-stage {
    position: relative; height: calc(100vh - var(--ws-nav-h)); height: calc(100svh - var(--ws-nav-h)); min-height: 496px;
    overflow: hidden; background: var(--ws-ink-900);
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  .ws-li .mz-top {
    position: absolute; z-index: 20; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right));
    top: max(17px, env(safe-area-inset-top));
    container-type: inline-size;
    padding-bottom: 10px; border-bottom: 1px solid var(--ws-line-dk);
  }
  /* The heading as a compact bar: two lines at every phone width, 12px at 320
     and 15px from about 390. */
  .ws-li .mz-top .li-head__title { font-size: clamp(12px, 4.3cqi, 15px); line-height: 1.25; letter-spacing: -.01em; }
  .ws-li .mz-copy-stack {
    position: absolute; z-index: 18; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right));
    top: max(80px, calc(env(safe-area-inset-top) + 68px)); height: 25svh; min-height: 158px;
  }
  .ws-li .mz-copy { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); }
  .ws-li .mz-copy:first-child { opacity: 1; transform: none; }
  .ws-li .mz-copy .label { margin-bottom: 10px; }
  .ws-li .mz-copy .headline { max-width: 12.5em; font-size: clamp(27px, 8vw, 35px); line-height: 1.08; letter-spacing: -.022em; }
  .ws-li .mz-copy .support { margin-top: 9px; max-width: 35em; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.42; }

  .ws-li .mz-viz {
    position: absolute; z-index: 2; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right));
    top: 36svh; bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px)); min-height: 260px;
  }
  .ws-li .mz-route { position: absolute; z-index: 12; left: 0; top: 3px; bottom: 3px; width: 25px; }
  .ws-li .mz-route-base, .ws-li .mz-route-fill { position: absolute; left: 6px; top: 5px; bottom: 5px; width: 1px; background: var(--ws-line-dk); }
  .ws-li .mz-route-fill { background: var(--ws-signal-500); transform: scaleY(0); transform-origin: 50% 0; }
  .ws-li .mz-route-arrow {
    position: absolute; z-index: 3; left: 3px; top: 4px; width: 7px; height: 7px;
    border-right: 2px solid var(--ws-signal-300); border-bottom: 2px solid var(--ws-signal-300);
    transform: rotate(45deg); transform-origin: 50% 50%;
  }
  .ws-li .mz-node {
    position: absolute; left: 2px; width: 9px; height: 9px; transform: translateY(-50%);
    border: 1px solid var(--li-mute); background: var(--ws-ink-900);
  }
  .ws-li .mz-node:nth-of-type(1) { top: 1%; }
  .ws-li .mz-node:nth-of-type(2) { top: 20%; }
  .ws-li .mz-node:nth-of-type(3) { top: 40%; }
  .ws-li .mz-node:nth-of-type(4) { top: 60%; }
  .ws-li .mz-node:nth-of-type(5) { top: 80%; }
  .ws-li .mz-node:nth-of-type(6) { top: 99%; }
  .ws-li .mz-node:first-of-type { border-color: var(--ws-signal-300); background: var(--ws-signal-500); }

  .ws-li .mz-window {
    position: absolute; left: 27px; right: 0; top: 0; bottom: 0;
    overflow: hidden; border: 1px solid var(--ws-line-dk); background: var(--ws-ink-800);
  }
  .ws-li .mz-window::after { content: ""; position: absolute; z-index: 11; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.06); }
  .ws-li .mz-scene { position: absolute; inset: 0; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
  .ws-li .mz-scene:first-child { opacity: 1; }
  .ws-li .mz-scene > .ph { position: absolute; inset: 0; }
  .ws-li .mz-scene > .ph::after, .ws-li .mz-pane .ph::after, .ws-li .mz-thumb .ph::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(14,20,32,.18);
  }
  .ws-li .mz-chip {
    position: absolute; z-index: 6; left: 10px; top: 10px; display: flex; gap: 8px; align-items: baseline;
    padding: 7px 9px; border: 1px solid var(--ws-line-dk); background: rgba(14,20,32,.94);
  }
  .ws-li .mz-chip b { font: 600 16px/1 var(--ws-font-sans); }
  .ws-li .mz-chip span { font: 500 9px/1 var(--ws-font-mono); color: var(--ws-signal-300); letter-spacing: .08em; text-transform: uppercase; }
  .ws-li .mz-scene .mark em { font-size: 9px; padding: 4px 5px; left: 22px; }
  .ws-li .mz-scene .mark em::before { width: 13px; }
  .ws-li .mz-scene .mark[data-side="l"] em { left: auto; right: 22px; }

  .ws-li .mz-focus { position: absolute; z-index: 8; opacity: 0; border: 1px solid rgba(127,227,212,.32); pointer-events: none; }
  .ws-li .mz-focus::before, .ws-li .mz-focus::after { content: ""; position: absolute; inset: -1px; }
  .ws-li .mz-focus::before { border-top: 2px solid var(--ws-signal-300); border-bottom: 2px solid var(--ws-signal-300); clip-path: polygon(0 0, 22% 0, 22% 2px, 78% 2px, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 2px), 22% calc(100% - 2px), 22% 100%, 0 100%); }
  .ws-li .mz-focus::after { border-left: 2px solid var(--ws-signal-300); border-right: 2px solid var(--ws-signal-300); clip-path: polygon(0 0, 100% 0, 100% 22%, calc(100% - 2px) 22%, calc(100% - 2px) 78%, 100% 78%, 100% 100%, 0 100%, 0 78%, 2px 78%, 2px 22%, 0 22%); }
  .ws-li .mz-focus-label {
    position: absolute; left: -1px; top: calc(100% + 7px); padding: 4px 6px; white-space: nowrap;
    border: 1px solid var(--ws-signal-300); background: var(--ws-ink-900);
    font: 500 9px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-white);
  }

  .ws-li .mz-detail { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; background: var(--ws-ink-900); }
  .ws-li .mz-pane { position: relative; overflow: hidden; border: 0 solid var(--ws-line-dk); }
  .ws-li .mz-pane .ph { position: absolute; inset: 0; }
  .ws-li .mz-pane-tag { position: absolute; z-index: 4; right: 9px; top: 9px; padding: 5px 7px; background: var(--ws-ink-900); border: 1px solid var(--ws-line-dk); font: 500 9px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; }

  .ws-li .mz-layered { padding: 12px; background: var(--ws-ink-900); }
  .ws-li .mz-tiles { position: absolute; left: 12px; right: 12px; top: 12px; height: 38%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .ws-li .mz-thumb { position: relative; overflow: hidden; border: 1px solid var(--ws-line-dk); }
  .ws-li .mz-thumb .ph { position: absolute; inset: 0; }
  .ws-li .mz-thumb .ph.half { right: 50%; }
  .ws-li .mz-thumb .ph.half + .ph.half { left: 50%; right: 0; }
  .ws-li .mz-thumb-label { position: absolute; z-index: 3; left: 5px; bottom: 5px; max-width: calc(100% - 10px); display: flex; align-items: baseline; gap: 5px; padding: 4px 5px; background: rgba(14,20,32,.94); white-space: nowrap; }
  .ws-li .mz-thumb-label b { font: 600 10px/1 var(--ws-font-sans); }
  .ws-li .mz-thumb-label span { font: 500 7px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }
  .ws-li .mz-join { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .ws-li .mz-join path { fill: none; stroke: var(--ws-signal-500); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .ws-li .mz-mini-panel { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; height: 43%; padding: 12px; border: 1px solid var(--ws-white); background: rgba(14,20,32,.96); }
  .ws-li .mz-mini-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ws-line-dk); }
  .ws-li .mz-mini-head b { font: 600 15px/1 var(--ws-font-sans); letter-spacing: .05em; }
  .ws-li .mz-mini-head span { font: 500 8px/1 var(--ws-font-mono); color: var(--ws-signal-300); letter-spacing: .08em; text-transform: uppercase; }
  .ws-li .mz-bands { display: grid; gap: 4px; }
  .ws-li .mz-band { display: grid; grid-template-columns: 52px 1fr; gap: 6px; padding: 5px 6px; border: 1px solid rgba(255,255,255,.4); color: var(--ws-white); }
  .ws-li .mz-band b { font: 500 8px/1.2 var(--ws-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ws-signal-300); }
  .ws-li .mz-band span { font: 400 10px/1.2 var(--ws-font-sans); }

  /* 06 PLATFORM: one panel, as on desktop. The bands take their own height
     and the growers map fills the rest, between its two labels. */
  .ws-li .mz-platform { display: flex; flex-direction: column; padding: 12px; background: var(--ws-ink-900); }
  .ws-li .mz-platform .mz-mini-panel { position: relative; inset: auto; flex: 1 1 auto; height: auto; min-height: 0; display: flex; flex-direction: column; }
  .ws-li .mz-sub { margin: 0 0 6px; font: 500 8px/1.2 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-signal-300); }
  .ws-li .mz-growers { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; }
  .ws-li .mz-sub--foot { margin: 6px 0 0; }
  .ws-li .mz-map { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 1px solid var(--ws-line-dk); }
  /* The map scales uniformly (meet) so outlines stay on their plots; the
     image runs past the viewBox and fills the rest of the box. In a box
     wider than the image (tablets), the SVG grows taller than the box
     (39.61cqw = 250 / 631.2 of its width) so the image still spans it; the
     box clips the excess. Strokes scale with the map (no
     non-scaling-stroke), so the draw-on dash lengths match. */
  .ws-li .mz-map { container-type: size; }
  .ws-li .mz-map-svg {
    position: absolute; left: 0; top: 50%;
    width: 100%; height: max(100cqh, 39.61cqw);
    transform: translateY(-50%);
    overflow: visible;
  }
  .ws-li .mz-map-svg .gplot { stroke-width: 2.4; }
  .ws-li .mz-map-svg .gnode { stroke-width: 1.6; }
  @media (min-width: 600px) {
    .ws-li .mz-map-svg .gplot { stroke-width: 1.5; }
    .ws-li .mz-map-svg .gnode { stroke-width: 1; }
  }

  .ws-li .mz-bottom {
    position: absolute; z-index: 20; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right));
    bottom: max(17px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center;
    padding-top: 10px; border-top: 1px solid var(--ws-line-dk); font: 500 9px/1 var(--ws-font-mono); letter-spacing: .08em; text-transform: uppercase;
  }
  .ws-li .mz-progress { color: var(--ws-signal-300); }
  .ws-li .mz-progress strong { color: var(--ws-white); font-weight: 500; }
  .ws-li .mz-scroll-cue { color: var(--li-ink-500-dk); }
  .ws-li .mz-scroll-cue::after { content: "↓"; margin-left: 7px; color: var(--ws-signal-300); }

}

@media (max-width: 899.98px) and (max-height: 690px) {
  .ws-li .mz-top .li-head__title { font-size: clamp(12px, 4.3cqi, 14px); }
  .ws-li .mz-copy-stack { top: max(76px, calc(env(safe-area-inset-top) + 66px)); height: 27svh; }
  .ws-li .mz-copy .headline { font-size: clamp(24px, 7vw, 30px); }
  .ws-li .mz-copy .support { font-size: 13px; line-height: 1.34; }
  .ws-li .mz-viz { top: 38svh; bottom: max(51px, calc(env(safe-area-inset-bottom) + 42px)); }
}
/* Short or narrow phones: tighter step 05/06 panels, so each band's
   description stays on one line and the panel clears the growers map. */
@media (max-width: 899.98px) and (max-height: 690px), (max-width: 379.98px) {
  .ws-li .mz-mini-panel { padding: 8px 10px; }
  .ws-li .mz-mini-head { padding-bottom: 5px; margin-bottom: 5px; }
  .ws-li .mz-bands { gap: 2px; }
  .ws-li .mz-band { grid-template-columns: 40px minmax(0, 1fr); gap: 4px; padding: 2px 5px; }
  .ws-li .mz-band span { font-size: 9px; }
  /* Both map labels share one row above the map, so it keeps its height. */
  .ws-li .mz-growers { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr); margin-top: 8px; }
  .ws-li .mz-map { grid-column: 1 / -1; }
  .ws-li .mz-sub { margin-bottom: 5px; }
  .ws-li .mz-sub--foot { grid-area: 1 / 2; margin: 0 0 5px; }
}
/* Phones held sideways: the pinned story needs more height than the screen
   has (its stage alone is 496px), so the stacked flow shows instead. */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 540px) {
  .ws-li.is-mz .mz-story, .ws-li.is-mz .mz-head { display: none !important; }
  .ws-li.is-mz .flow { display: block !important; }
}

/* 5.18 Intro film (Home, Farm Intelligence, Company): a muted loop above
   the hero, at the page top (the nav is hidden there: data-nav="reveal").
   Full width at the film's own 16:9, so the whole frame shows with no crop
   and no letterbox bars. ------------------------------------------------- */
.ws-film {
  overflow: hidden;
  background: var(--ws-ink-900);
}
.ws-film__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 5.18 Farm Intelligence — hero split, problem list, season band, Q&A,
   editorial break, collage, close pathways ------------------------------- */
.ws-hero--split .ws-hero__copy h1 { max-width: 15ch; }
@media (max-width: 599.98px) { .ws-hero--split .ws-hero__copy h1 { max-width: 100%; } }
/* --even (Home): the split's half-and-half columns without its narrower
   heading. Held back to 1200px: Home's longer headline wraps to six lines
   in a half-width column at laptop widths, so below that it keeps 6fr/4fr. */
@media (min-width: 1200px) { .ws-hero--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) {
  .ws-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* A hero with no buttons: the copy is centred, so the missing button row
     (46px button + 28px gap + 8px margin) is added to the bottom padding,
     keeping the heading where it sits on the heroes that have buttons. */
  .ws-hero--text-only .ws-hero__copy { padding-bottom: calc(clamp(64px, 9vh, 120px) + 82px); }
}
/* .ws-hero--overlay-sm (the heroes that follow an intro film): below 900px
   the copy sits over the photograph instead of above it — both share one
   grid cell, with a scrim on the photo for legibility. The hero follows the
   film, not the page top, so it drops the nav allowance from its top padding. */
@media (max-width: 899.98px) {
  .ws-hero--overlay-sm > .ws-hero__copy,
  .ws-hero--overlay-sm > .ws-hero__media { grid-area: 1 / 1; }
  .ws-hero--overlay-sm > .ws-hero__copy { position: relative; z-index: 1; padding-top: 56px; }
  .ws-hero--overlay-sm > .ws-hero__media {
    aspect-ratio: auto;
    border-top: 0;
    border-radius: 0;
  }
  .ws-hero--overlay-sm > .ws-hero__media::after {
    background: linear-gradient(180deg, rgba(14, 20, 32, 0.72) 0%, rgba(14, 20, 32, 0.58) 55%, rgba(14, 20, 32, 0.78) 100%);
  }
}
@media (max-width: 599.98px) { .ws-hero--overlay-sm > .ws-hero__copy { padding-top: 44px; } }

.ws-btn__arrow--down { transition: transform 250ms var(--ws-ease); }
.ws-btn:hover .ws-btn__arrow--down { transform: translateY(3px); }

/* Staggered supporting statements — rules, not cards */
#fi-why { scroll-margin-top: var(--ws-nav-h); }
.ws-why__h2 { max-width: 26ch; }
.ws-problem { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-problem__item {
  display: grid;
  gap: 8px;
  padding: 22px 0;
  border-top: var(--ws-border) solid var(--rule);
}
.ws-problem__item:last-child { border-bottom: var(--ws-border) solid var(--rule); }
.ws-problem__label {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.ws-problem__item p { font-size: var(--ws-small); }
.ws-problem--lead .ws-problem__label {
  font-family: inherit;
  font-size: 16px; /* just above the 15px statement text beneath */
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--accent);
}
@media (min-width: 900px) {
  .ws-problem__item { margin-left: calc(var(--i, 0) * clamp(16px, 2.6vw, 40px)); }
}

/* Seasonal progression band */
.ws-season { margin-top: clamp(32px, 5vh, 56px); }
.ws-season__band { margin: 0; }
/* Never wider than the gutter: at 1281-1383px the percentage outgrew the
   32px gutter and caused a 2px sideways scroll. */
@media (min-width: 900px) { .ws-season__band { margin-inline: max(-2.6316%, calc(-1 * var(--ws-gutter))); } }
.ws-season__svg { display: block; width: 100%; height: auto; }
.ws-season__svg path, .ws-season__svg rect { fill: none; stroke-width: 1; }
.ws-season__rule, .ws-season__label-rule, .ws-season__stem { stroke: var(--rule); }
.ws-season__ticks path { stroke: var(--ws-signal-500); }
.ws-season__progress {
  stroke: var(--ws-signal-500);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ws-season-p, 1));
}
.ws-season__return path { stroke: var(--rule); }
.ws-season__return text {
  font-family: var(--ws-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--fg-meta);
}
.ws-season__node { opacity: 0.28; transition: opacity 520ms var(--ws-ease); }
.ws-season__node.is-on { opacity: 1; }
.ws-season__glyph { stroke: var(--fg); }
.ws-season__marker { stroke: var(--rule); }
.ws-season__node.is-on .ws-season__marker { stroke: var(--ws-signal-500); }
.ws-season__index {
  font-family: var(--ws-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-anchor: middle;
  fill: var(--ws-signal-600);
}
.ws-season__name {
  font-family: var(--ws-font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--fg);
}
.ws-season__track, .ws-season__note { display: none; }
@media (max-width: 899.98px) {
  .ws-season__band { display: none; }
  /* Vertical rail: the rail runs through the markers from the first row's
     centre to the last's, and its fill scales with --ws-season-p. The loop on
     the right returns from the last moment to the first. */
  .ws-season__track { --row: 68px; display: block; position: relative; padding-top: 12px; }
  .ws-season__rail, .ws-season__loop { position: absolute; top: calc(12px + var(--row) / 2); bottom: calc(var(--row) / 2); }
  .ws-season__rail { left: 6px; width: 1px; background: var(--rule); }
  .ws-season__rail-fill {
    position: absolute; inset: 0; background: var(--ws-signal-500);
    transform: scaleY(var(--ws-season-p, 1)); transform-origin: 50% 0;
  }
  .ws-season__loop { right: 0; width: 18px; border: 1px solid var(--rule); border-left: 0; }
  .ws-season__loop::before {
    content: ""; position: absolute; left: -1px; top: -4px; width: 7px; height: 7px;
    border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg);
  }
  .ws-season__list { display: grid; margin: 0; padding: 0; list-style: none; }
  .ws-season__row {
    display: grid;
    grid-template-columns: 13px 22px minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 12px;
    position: relative;
    height: var(--row);
    margin-right: 30px;
  }
  /* Each row's rule runs from its index to its glyph, clear of the rail. */
  .ws-season__row::after { content: ""; position: absolute; left: 25px; right: 0; bottom: 0; height: var(--ws-border); background: var(--rule); }
  .ws-season__row-marker {
    position: relative; z-index: 1; width: 13px; height: 13px;
    border: 1px solid var(--rule); background: var(--bg);
    transition: border-color 360ms var(--ws-ease);
  }
  .ws-season__row-index {
    font-family: var(--ws-font-mono);
    font-size: var(--ws-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--accent);
  }
  .ws-season__row-name {
    font-family: var(--ws-font-mono);
    font-size: min(var(--ws-small), 3.8vw);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
  }
  .ws-season__row-glyph { width: 48px; height: 28px; fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .ws-season__row-glyph path { vector-effect: non-scaling-stroke; }
  .ws-season__row-index, .ws-season__row-name, .ws-season__row-glyph { opacity: 0.28; transition: opacity 520ms var(--ws-ease); }
  .ws-season__row.is-on .ws-season__row-index, .ws-season__row.is-on .ws-season__row-name, .ws-season__row.is-on .ws-season__row-glyph { opacity: 1; }
  .ws-season__row.is-on .ws-season__row-marker { border-color: var(--ws-signal-500); }
  .ws-season__note { display: block; margin: 8px 0 0 25px; }
}
@media (max-width: 379.98px) {
  .ws-season__row { grid-template-columns: 13px 20px minmax(0, 1fr) 40px; column-gap: 10px; margin-right: 26px; }
  .ws-season__row::after { left: 23px; }
  .ws-season__row-glyph { width: 40px; }
  .ws-season__row-name { letter-spacing: 0.05em; }
  .ws-season__note { margin-left: 23px; }
}

/* Full-width editorial break */
.ws-editorial { padding-block: clamp(96px, 16vh, 192px); }
.ws-editorial__panel {
  display: grid;
  gap: 20px;
  max-width: 640px;
  padding: clamp(24px, 3vw, 44px);
  background: rgba(14, 20, 32, 0.86);
  border: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
.ws-editorial__panel h2 { max-width: 22ch; }
.ws-editorial__panel > * { min-width: 0; }
@media (max-width: 599.98px) {
  .ws-editorial__panel .ws-btn { white-space: normal; }
}
.ws-editorial__panel p { font-size: var(--ws-small); max-width: none; }
.ws-editorial__list { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-editorial__list li {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: var(--ws-border) solid var(--rule);
}
.ws-editorial__list li:last-child { border-bottom: var(--ws-border) solid var(--rule); }
.ws-editorial__label {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker);
}

/* Editorial collage of operating environments */
.ws-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ws-gap);
  align-items: start;
}
.ws-collage__stack { display: grid; gap: var(--ws-gap); align-content: start; }
@media (min-width: 900px) {
  .ws-collage__stack:not(.ws-collage__stack--lead) { margin-top: clamp(32px, 5vw, 88px); }
}
/* Side by side, the right stack is the taller one: the lead column
   stretches to it and its tall image grows (cropping more) to take up the
   difference, so both columns end on the same line. */
@media (min-width: 600px) {
  .ws-collage { align-self: start; }
  .ws-collage__stack--lead { align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; }
  .ws-collage__stack--lead > .ws-collage__tall { grid-template-rows: minmax(0, 1fr); }
  .ws-collage__stack--lead > .ws-collage__tall > .ws-frame__media { aspect-ratio: auto; min-height: 100%; }
  .ws-collage__stack--lead > .ws-collage__tall img { position: absolute; inset: 0; }
}
/* Phones: the tall image full width, the landscape images two by two. */
@media (max-width: 599.98px) {
  .ws-collage { gap: 12px; }
  .ws-collage__stack { display: contents; }
  .ws-collage__tall { grid-column: 1 / -1; }
}

/* Close — four pathways */
.ws-close__head { display: grid; gap: 20px; margin-bottom: clamp(32px, 5vh, 56px); }
.ws-close__head h2 { max-width: 28ch; }
.ws-paths { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-paths li { border-top: var(--ws-border) solid var(--rule); }
.ws-paths li:last-child { border-bottom: var(--ws-border) solid var(--rule); }
.ws-paths a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg);
  transition: color var(--ws-dur-ui) var(--ws-ease);
}
.ws-paths a svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--accent);
  transition: transform 250ms var(--ws-ease);
}
.ws-paths a:hover { color: var(--accent); }
.ws-paths a:hover svg { transform: translateX(6px); }
.ws-close__actions { margin-top: clamp(32px, 5vh, 56px); }

/* 5.19 Applications — hero decision landscape, crop editorial band,
   stakeholder sections, typographic close ------------------------------- */
.ws-hero__graphic {
  display: grid;
  align-content: center;
  gap: clamp(20px, 3vh, 32px);
  padding: calc(var(--ws-nav-h) + clamp(40px, 6vh, 80px)) clamp(24px, 3.5vw, 64px) clamp(48px, 7vh, 96px);
  background: var(--ws-ink-800);
  border-left: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
@media (max-width: 899.98px) {
  .ws-hero__graphic {
    padding: clamp(32px, 6vw, 48px) var(--ws-gutter);
    border-left: 0;
    border-top: var(--ws-border) solid var(--rule);
  }
}
.ws-decmap { display: grid; gap: clamp(20px, 3vh, 32px); }
.ws-decmap__farm {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--ws-ink-900);
  border: var(--ws-border) solid rgba(85, 214, 196, 0.5);
  border-radius: var(--ws-radius);
}
.ws-decmap__glyph {
  width: 72px;
  height: 45px;
  fill: none;
  stroke: var(--ws-signal-500);
  stroke-width: 1;
}
.ws-decmap__kicker {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-signal-300);
}
.ws-decmap__name { font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--ws-white); }
.ws-decmap__list {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0 0 0 clamp(20px, 2.4vw, 32px);
  list-style: none;
}
.ws-decmap__list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(85, 214, 196, 0.45);
}
.ws-decmap__item {
  position: relative;
  border-top: var(--ws-border) solid var(--rule);
}
.ws-decmap__link {
  display: flex;
  align-items: baseline;
  min-height: 44px;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
}
.ws-decmap__link:hover .ws-decmap__index,
.ws-decmap__link:hover .ws-decmap__label,
.ws-decmap__link:focus-visible .ws-decmap__label { color: var(--ws-signal-300); }
.ws-decmap__item:last-child { border-bottom: var(--ws-border) solid var(--rule); }
.ws-decmap__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: calc(clamp(20px, 2.4vw, 32px) * -1);
  width: clamp(20px, 2.4vw, 32px);
  height: 1px;
  background: rgba(85, 214, 196, 0.45);
}
.ws-decmap__index {
  flex: none;
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ws-signal-400);
}
.ws-decmap__label {
  font-family: var(--ws-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ws-white);
  transition: color 200ms var(--ws-ease);
}

/* Crop editorial break — copy over the photograph, four categories on one rule */
#coffee,
#sourcing-supply,
#sustainability-mrv,
#risk-insurance,
#agricultural-finance,
#government-programmes,
#producers-agribusinesses { scroll-margin-top: var(--ws-nav-h); }
.ws-crop { position: relative; padding-block: clamp(112px, 18vh, 216px); }
.ws-crop.ws-bg-photo::before {
  background:
    linear-gradient(180deg, rgba(14, 20, 32, 0.42) 0%, rgba(14, 20, 32, 0.64) 55%, rgba(14, 20, 32, 0.9) 100%),
    linear-gradient(90deg, rgba(14, 20, 32, 0.88) 0%, rgba(14, 20, 32, 0.5) 62%, rgba(14, 20, 32, 0.32) 100%);
}
.ws-crop__copy { display: grid; gap: 20px; max-width: 58ch; }
.ws-crop__copy h2 { max-width: 20ch; }
.ws-crop__copy p { color: var(--fg-body); }
.ws-crop__copy .ws-btn-group { margin-top: 8px; }
.ws-crop .ws-btn-group.is-last { margin-top: clamp(40px, 6vh, 64px); }
.ws-crop__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ws-gap);
  margin: clamp(48px, 8vh, 104px) 0 0;
  padding: 0;
  list-style: none;
}
.ws-crop__cat {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 16px;
  border-top: var(--ws-border) solid rgba(255, 255, 255, 0.34);
}
.ws-crop__cat-label {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-signal-300);
}
.ws-crop__cat p { margin: 0; font-size: var(--ws-small); max-width: 32ch; }
@media (max-width: 899.98px) {
  .ws-crop__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 519.98px) {
  .ws-crop__cats { grid-template-columns: 1fr; gap: 0; }
  .ws-crop__cat { padding-block: 16px 0; }
}

/* Stakeholder sections — "Relevant for:" on a 1px top border */
.ws-relevant {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: var(--ws-border) solid var(--rule);
}
.ws-relevant__label {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ws-relevant__list {
  font-family: var(--ws-font-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--fg-body);
}

/* Typographic close — four questions */
.ws-questions { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-questions li { border-top: var(--ws-border) solid var(--rule); }
.ws-questions li:last-child { border-bottom: var(--ws-border) solid var(--rule); }
.ws-questions p {
  max-width: 34ch;
  margin: 0;
  padding: clamp(16px, 2.2vw, 26px) 0;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fg);
}
.ws-close__note { margin-top: clamp(28px, 4vh, 44px); max-width: 52ch; }

/* 5.20 In the Field — editorial photo hero, featured stories, breadth ---- */
.ws-fieldhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  /* Text starts where the other heroes' does (.ws-hero__copy's top padding
     at each width), rather than centred in the taller photo. */
  align-content: start;
  min-height: 78vh;
  min-height: 78svh;
  padding-block: calc(var(--ws-nav-h) + clamp(48px, 8vh, 96px)) clamp(56px, 9vh, 112px);
}
@media (max-width: 899.98px) { .ws-fieldhero { padding-top: calc(var(--ws-nav-h) + 48px); } }
@media (max-width: 599.98px) { .ws-fieldhero { padding-top: calc(var(--ws-nav-h) + 32px); } }
/* The workers at the top of the photograph are its subject: anchor the
   crop (and the ambient zoom) to the top edge, so any trimming comes off
   the bottom. */
.ws-fieldhero .ws-hero__img { z-index: -2; object-position: 50% 0%; transform-origin: 50% 0%; }
.ws-fieldhero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 20, 32, 0.92) 0%, rgba(14, 20, 32, 0.4) 34%, rgba(14, 20, 32, 0.72) 72%, rgba(14, 20, 32, 0.94) 100%);
}
.ws-fieldhero__copy { display: grid; gap: 24px; justify-items: start; }
.ws-fieldhero__copy h1 { max-width: 20ch; }
@media (max-width: 599.98px) { .ws-fieldhero__copy h1 { max-width: 100%; } }
.ws-fieldhero__copy .ws-lede { max-width: 62ch; color: var(--fg-body); }
/* --plain (Media): the same hero with no photograph, so it takes only the
   height of its copy rather than most of the viewport. */
.ws-fieldhero--plain { min-height: 0; }
/* Home's KPIs under the hero copy, left-aligned, always side by side. */
.ws-fieldhero__stats { grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: clamp(40px, 6vw, 72px); margin-top: 8px; }
@media (max-width: 479.98px) {
  .ws-fieldhero__stats .ws-stat { gap: 6px; }
  .ws-fieldhero__stats .ws-stat__value { font-size: clamp(30px, 9vw, 36px); }
}

/* Featured story — four-part editorial structure */
.ws-frame--top { align-self: start; }
/* The copy's last line ends on its baseline, so an image beside it
   (.ws-frame--fill) ends level with the text rather than its line box. */
@media (min-width: 900px) { .ws-copy--baseline > p:last-child { text-box: trim-end cap alphabetic; } }
/* The column fills its row and drops its last paragraph to the foot, so it
   ends on the same baseline as a taller column beside it (Company, Why we
   exist). */
@media (min-width: 900px) {
  .ws-copy--last-end { align-self: stretch; grid-template-rows: auto auto 1fr; }
  .ws-copy--last-end > p:last-child { align-self: end; }
}
/* The copy beside it sets the row's height: the image takes no height of its
   own, fills the row and crops from the bottom, so its top meets the kicker
   and its bottom the text's last baseline (FI farmer participation). */
/* Below 900px the frame is wider than the 3:2 photo and anchored to its top,
   so any trimming comes off the foot (the grass), never the subject's head. */
@media (max-width: 899.98px) {
  .ws-frame--copy-height > .ws-frame__media { aspect-ratio: 16 / 9; }
  .ws-frame--copy-height img { object-position: 50% 0%; }
}
@media (min-width: 900px) {
  .ws-frame--copy-height { position: relative; align-self: stretch; }
  .ws-frame--copy-height > .ws-frame__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .ws-frame--copy-height img { object-position: 50% 0%; }
}
/* Company heritage: at 900-1199 the 4-column copy is so tall that the image
   beside it crops to a narrow portrait (up to 1.6:1); halves keep it sensible. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .ws-heritage > .ws-copy { grid-column: 1 / span 6; }
  .ws-heritage > .ws-frame { grid-column: 7 / span 6; }
}
@media (min-width: 900px) {
  .ws-frame--fill { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  .ws-frame--fill .ws-frame__media { aspect-ratio: auto; height: 100%; min-height: 360px; }
}
.ws-case { display: grid; gap: 0; margin: 4px 0 0; }
.ws-case__part {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: var(--ws-border) solid var(--rule);
}
.ws-case__label {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ws-case__part dd { margin: 0; font-size: var(--ws-small); color: var(--fg-body); }
.ws-case ~ .ws-btn-group .ws-btn { white-space: normal; }

/* Company locations map — line-drawn world outline with four office markers.
   Labels and markers are in SVG user units (1600-wide outline), so they are
   enlarged on phones where the map renders at roughly a fifth of that. */
.ws-worldmap { margin: 0; }
.ws-worldmap__frame {
  position: relative;
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--ws-ink-900);
  border: var(--ws-border) solid var(--ws-line-dk);
  border-radius: var(--ws-radius);
}
.ws-worldmap__svg { display: block; width: 100%; height: auto; }
.ws-worldmap__land {
  fill: none;
  stroke: var(--ws-signal-500);
  stroke-width: 1;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}
.ws-worldmap__loc rect {
  fill: var(--ws-signal-400);
  transform-box: fill-box;
  transform-origin: center;
}
.ws-worldmap__loc text {
  font-family: var(--ws-font-mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ws-white);
}
@media (max-width: 599.98px) {
  .ws-worldmap__loc rect { transform: scale(2); }
  .ws-worldmap__loc text { font-size: 64px; }
  /* At phone label sizes MALAYSIA would run past the right edge of the
     viewBox, so it moves to the marker's left like the other three. */
  .ws-worldmap__loc[data-location="malaysia"] text { text-anchor: end; transform: translateX(-44px); }
}
@media (max-width: 379.98px) { .ws-worldmap__loc text { font-size: 72px; } }
@media (min-width: 900px) and (max-width: 1199.98px) { .ws-worldmap__loc text { font-size: 44px; } }

/* Office addresses beside the map (CO-05.4). Hovering an address or a marker
   marks both with .is-active (initLocations in wingsure.js). */
.ws-worldmap__loc rect,
.ws-worldmap__loc text { transition: fill var(--ws-dur-ui) var(--ws-ease), transform var(--ws-dur-ui) var(--ws-ease); }
/* A wider hover target: each marker's invisible box covers the marker, its
   label and about 40 units round them (roughly 17px on desktop), so the
   pointer need only come near. (A transparent stroke would not do: text is
   hit-tested on its glyphs only.) */
.ws-worldmap__hit { fill: transparent; }
.ws-worldmap__loc.is-active rect { fill: var(--ws-white); transform: scale(1.75); }
.ws-worldmap__loc.is-active text { fill: var(--ws-signal-300); font-weight: 600; }
@media (max-width: 599.98px) { .ws-worldmap__loc.is-active rect { transform: scale(2.75); } }

.ws-offices {
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--ws-border) solid var(--rule);
}
.ws-office {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: var(--ws-border) solid var(--rule);
  transition: border-color var(--ws-dur-ui) var(--ws-ease);
}
/* The active office is marked on its country name, not its rule: a signal
   highlight and a heavier weight. The padding and matching negative margin
   keep the name where it sits when the highlight appears. */
.ws-office__country {
  justify-self: start;
  margin: -2px -6px; padding: 2px 6px;
  border-radius: var(--ws-radius);
  font-weight: 500; color: var(--accent);
  transition: color var(--ws-dur-ui) var(--ws-ease), background-color var(--ws-dur-ui) var(--ws-ease);
}
.ws-office address { font-style: normal; font-size: var(--ws-small); line-height: 1.6; color: var(--fg-body); transition: color var(--ws-dur-ui) var(--ws-ease); }
.ws-office.is-active .ws-office__country { font-weight: 600; color: var(--ws-ink-900); background: var(--ws-signal-300); }
.ws-office.is-active address { color: var(--fg); }

/* 5.21 Company — mission band, heritage plate, principles, news ---------- */
#co-mission,
#media { scroll-margin-top: var(--ws-nav-h); }
#sri { scroll-margin-top: calc(var(--ws-nav-h) + 32px); }
.ws-mission { padding-block: clamp(56px, 8vh, 112px); }
.ws-mission__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  width: min(100% - (var(--ws-gutter) * 2), 1760px);
  margin-inline: auto;
  min-height: min(82vh, 820px);
  padding: clamp(20px, 3vw, 56px);
  border-radius: var(--ws-radius);
}
.ws-mission__band img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 60%;
}
.ws-mission__band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 20, 32, 0.22) 0%, rgba(14, 20, 32, 0.16) 42%, rgba(14, 20, 32, 0.72) 100%),
    linear-gradient(90deg, rgba(14, 20, 32, 0.08) 0%, rgba(14, 20, 32, 0.52) 100%);
}
.ws-mission__panel {
  display: grid;
  gap: 18px;
  justify-self: end;
  width: min(100%, 48rem);
  padding: clamp(24px, 3vw, 44px);
  background: color-mix(in srgb, var(--ws-ink-900) 82%, transparent);
  border: var(--ws-border) solid var(--ws-line-dk);
  border-radius: var(--ws-radius);
  backdrop-filter: blur(14px);
}
.ws-mission__panel h2 { max-width: 22ch; }
.ws-mission__panel p { font-size: var(--ws-small); color: var(--fg-body); }
@media (max-width: 767.98px) {
  .ws-mission__band { min-height: 0; padding: 0; }
  .ws-mission__band img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .ws-mission__band::before { display: none; }
  .ws-mission__panel { width: 100%; border-top: 0; }
}

/* How we think — five-row editorial list with oversized numerals */
/* From 900px the heading stays under the nav while the rows rise into view
   and pass beneath it; it leaves with the section. The padding and matching
   negative margin keep its resting position, and give it room below the nav
   once pinned; the gradient lets rows fade out under it. */
@media (min-width: 900px) {
  .ws-section-head--pinned {
    position: sticky; top: var(--ws-nav-h); z-index: 2;
    margin-top: -24px; padding-block: 24px;
    background: var(--bg);
  }
  .ws-section-head--pinned::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px;
    background: linear-gradient(var(--bg), transparent); pointer-events: none;
  }
}
.ws-principles { display: grid; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; list-style: none; }
/* Pinned (wingsure.js): the section holds while the rows arrive and the
   list rises under the heading, which stays in place above it. */
.ws-layers-pinned { overflow: hidden; }
.ws-layers-pinned .ws-section-head { position: relative; z-index: 2; top: auto; padding-bottom: 20px; background: var(--bg); }
.ws-layers-pinned .ws-principles { margin-top: clamp(40px, 5vh, 52px); }
.ws-layers-pinned .ws-section-head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--bg);
}
.ws-layers-pinned .ws-section-head::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px;
  background: linear-gradient(var(--bg), transparent); pointer-events: none;
}
/* The heading runs on one line where it fits, and never leaves a lone word. */
[data-testid="co-think"] .ws-section-head h2 { max-width: none; text-wrap: balance; }
.ws-principle {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 6fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(18px, 2.2vw, 30px) 0;
  border-top: var(--ws-border) solid var(--rule);
}
.ws-principles .ws-principle:last-child { border-bottom: var(--ws-border) solid var(--rule); }
/* Layered reveal: the top rule draws left to right as its row scrubs in. */
.ws-js .ws-layers > .ws-principle { position: relative; border-top-color: transparent; }
.ws-js .ws-layers > .ws-principle::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ws-border)) 0 auto;
  height: var(--ws-border);
  background: var(--rule);
  transform: scaleX(var(--ws-layer-rule, 1));
  transform-origin: 0 50%;
}
.ws-principle__num {
  display: block;
  font-family: var(--ws-font-mono);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--accent);
}
.ws-principle__body { display: grid; gap: 10px; }
.ws-principle__title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; line-height: 1.25; color: var(--fg); }
.ws-principle__body p { margin: 0; font-size: var(--ws-small); color: var(--fg-body); max-width: 62ch; }
@media (max-width: 599.98px) {
  .ws-principle { grid-template-columns: 1fr; gap: 14px; }
}

/* From Wingsure — media: a featured item across the full width; the rest sit in
   the In the News section below, in rows (4 across from 1200px, 2 from 600px),
   each under a hairline rule. The .ws-media__side column
   rules remain for a featured-plus-column layout, which /media no longer uses. */
.ws-media { display: grid; gap: clamp(24px, 3.5vh, 36px); }
/* A section that opens with its content, not a heading block (the Media page's
   featured item): about half the usual top padding. */
.ws-section--lead { padding-top: clamp(48px, 6vh, 80px); }
@media (max-width: 767.98px) { .ws-section--lead { padding-top: 44px; } }
.ws-media__top { display: grid; gap: 24px var(--ws-gap); }
.ws-media__side,
.ws-media__list { display: grid; gap: 24px var(--ws-gap); align-content: start; margin: 0; padding: 0; list-style: none; }
.ws-media__item {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 18px;
  border-top: var(--ws-border) solid var(--rule);
}
/* The featured item opens the section (the Media page has no separate
   heading): no rule above it, the accent rule beneath it. The right
   column's first item drops its top rule too, so the row starts level. */
.ws-media__item--featured { gap: 18px; padding-top: 0; border-top: 0; }
/* The accent rule under the featured item is its own element, so it can draw
   in from the left once the copy above has risen (it is the stagger's last
   child). Without JS or with reduced motion it is simply there. */
.ws-media__rule { display: block; height: 2px; margin-top: 6px; background: var(--accent); }
.ws-js .ws-media__rule.ws-reveal {
  opacity: 1; transform: scaleX(0); transform-origin: 0 50%;
  transition-property: transform; transition-duration: 900ms;
}
.ws-js .ws-media__rule.ws-reveal.is-in { transform: scaleX(1); }
.ws-media__side > .ws-media__item:first-child { padding-top: 0; border-top: 0; }
.ws-media__flag,
.ws-media__meta {
  margin: 0;
  font-family: var(--ws-font-mono); font-size: var(--ws-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* One byline per item — date · source — in the meta grey; only "Featured"
   is in the accent. Dates and outlet names stay whole, so a narrow column
   breaks at a dot. */
.ws-media__meta { max-width: none; line-height: 1.7; color: var(--fg-meta); }
.ws-media__flag { margin-right: 1em; color: var(--accent); }
/* "Featured" leads with the kicker's green dash, in a deeper teal (the
   accent mixed with the ink). It stays inline at the byline's size, so it
   shares the date's baseline; the dash sits at mid-height. */
.ws-media__item--featured .ws-media__flag { color: color-mix(in srgb, var(--ws-signal-600) 78%, var(--ws-ink-900)); }
.ws-media__item--featured .ws-media__flag::before {
  content: ''; display: inline-block; width: 24px; height: 1px; margin-right: 12px;
  vertical-align: middle; background: var(--ws-signal-500);
}
.ws-media__meta time,
.ws-media__source > span { white-space: nowrap; }
.ws-media__title { margin: 0; max-width: 36ch; font-size: clamp(17px, 1.35vw, 20px); font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--fg); }
/* The featured title is the section's heading (600), on one line from 900px.
   The featured item is a size container and the title is sized in its units,
   so it scales with the slot, capped at 34px. Phones wrap it, balanced. The
   optional .ws-media__lead line above it is unused at present. */
.ws-media__lead { margin: 0 0 -6px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.3; color: var(--fg); }
.ws-media__item--featured .ws-media__title { max-width: none; font-size: clamp(24px, 3.2cqi, 34px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
@media (min-width: 900px) { .ws-media__item--featured .ws-media__title { white-space: nowrap; } }
/* The featured byline reads a step up: larger, heavier and in the body ink. */
.ws-media__item--featured .ws-media__meta { font-size: 15px; font-weight: 600; color: var(--fg-body); }
.ws-media__note { margin: 0; font-size: var(--ws-small); color: var(--fg-body); }
/* Under the featured title: the note as a subheading, the summary as body
   text, then the CTA. */
/* Three voices: the ink headline, a subheading in the deep teal at 500, then
   the grey body. A hairline rule separates the
   headline pair from the body and CTA, which share a row from 900px: body on
   the left, CTA at the foot on the right. */
.ws-media__item--featured .ws-media__note {
  max-width: none; font-size: clamp(20px, 1.85vw, 26px); font-weight: 500; line-height: 1.35;
  color: color-mix(in srgb, var(--ws-signal-600) 78%, var(--ws-ink-900));
  text-wrap: pretty; /* no lone word on the second line where it wraps */
}
.ws-media__summary { margin: 0; max-width: 62ch; font-size: var(--ws-body); line-height: 1.6; color: var(--fg-body); }
.ws-media__item--featured .ws-media__summary { margin-top: 8px; padding-top: 22px; border-top: var(--ws-border) solid var(--rule); }
.ws-media__cta { position: relative; z-index: 1; margin-top: 8px; }
@media (min-width: 900px) {
  .ws-media__item--featured { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; }
  .ws-media__item--featured > * { grid-column: 1 / -1; }
  /* The cell (and its rule) spans to the CTA; the padding keeps the text to a
     readable 62ch, with at least a clear gap before the CTA. */
  .ws-media__item--featured > .ws-media__summary {
    grid-column: 1; max-width: none; text-wrap: pretty;
    padding-right: max(clamp(32px, 6vw, 120px), calc(100% - 62ch));
  }
  .ws-media__item--featured > .ws-media__cta {
    grid-column: 2; align-self: stretch; display: flex; align-items: flex-end;
    margin-top: 8px; padding-top: 22px; border-top: var(--ws-border) solid var(--rule);
  }
}
@media (min-width: 600px) { .ws-media__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .ws-media__top { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .ws-media__item--featured { grid-column: 1 / -1; }
  .ws-media__side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 0; }
  .ws-media__side > .ws-media__item { padding-block: 18px; }
  .ws-media__side > .ws-media__item:last-child { flex-grow: 1; border-bottom: var(--ws-border) solid var(--rule); }
}
/* In the News (.ws-media__list--flow): the plain list (a hairline over each
   item), flowed into balanced columns rather than grid rows, so each item sits
   directly under the one above and no row is held open by its tallest item.
   Newest first, reading down each column: 3 columns from 1200px, 2 from 600px. */
.ws-media__go { display: none; }
.ws-media__list.ws-media__list--flow { display: block; column-gap: var(--ws-gap); }
.ws-media__list--flow > .ws-media__item { break-inside: avoid; margin-bottom: 32px; }
@media (min-width: 600px) { .ws-media__list.ws-media__list--flow { column-count: 2; } }
@media (min-width: 1200px) { .ws-media__list.ws-media__list--flow { column-count: 3; } }
/* Linked items (Media page): the title's link stretches over the whole item,
   so the item is one target; hover and focus underline the title in the
   accent. External links carry a small arrow. */
.ws-media__link { color: inherit; text-decoration: none; }
.ws-media__link::after { content: ''; position: absolute; inset: 0; }
.ws-media__link:hover,
.ws-media__link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--ws-signal-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.ws-media__link:focus-visible { outline: none; }
.ws-media__link:focus-visible::after { outline: 2px solid var(--ws-signal-500); outline-offset: 4px; }
.ws-media__ext { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.3em; vertical-align: 0.08em; color: var(--accent); }

/* Media article (/media/{slug}) — one template: byline, title, image,
   standfirst between two rules, body. A single reading column. */
.ws-article { display: grid; gap: clamp(28px, 4vh, 44px); max-width: 760px; margin-inline: auto; }
.ws-article__image { justify-self: center; width: 100%; }
.ws-article__head { display: grid; gap: 18px; justify-items: center; text-align: center; }
/* A standalone link: at least a 44px tap target. */
.ws-article__back { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--ws-small); }
.ws-article__back::before { content: '\2190\00a0'; }
.ws-article__head h1 { max-width: 28ch; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.18; overflow-wrap: anywhere; text-wrap: balance; }
.ws-article__standfirst {
  max-width: none;
  padding-block: 20px;
  font-size: var(--ws-body-lg);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
  border-block: var(--ws-border) solid var(--rule);
}
.ws-article__body { display: grid; gap: 1.1em; }
.ws-article__body p { max-width: none; }
.ws-article__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.18em; }
.ws-article__dateline { color: var(--fg); font-weight: 600; }
/* Quotes set off by an accent rule; a subheading ("About Wingsure") opens a
   new part of the body, so it takes extra room above. */
.ws-article__quote { margin: 0; padding-left: clamp(16px, 2vw, 24px); border-left: 2px solid var(--accent); }
.ws-article__quote p { color: var(--fg); }
.ws-article__subhead { margin-top: 0.8em; font-size: var(--ws-h3); }
/* Coverage links under "Also view on": one per line, divided by rules. */
.ws-article__links { margin: 0; padding: 0; list-style: none; border-top: var(--ws-border) solid var(--rule); }
.ws-article__links li { border-bottom: var(--ws-border) solid var(--rule); }
.ws-article__links a { display: block; padding-block: 12px; font-weight: 500; text-decoration: none; }
.ws-article__links a:hover,
.ws-article__links a:focus-visible { text-decoration: underline; text-decoration-color: var(--ws-signal-500); text-underline-offset: 0.18em; }
@media (max-width: 599.98px) {
  .ws-article__head { justify-items: start; text-align: left; }
  .ws-article__back { justify-self: start; }
}

/* Keeps its original measure inside .ws-copy (which caps h2 at 20ch). */
.ws-copy .ws-why__title { max-width: none; }
.ws-why__lede { max-width: 26ch; color: var(--fg); }

/* --------------------------------------------------------------------------
   6. Motion primitives
   -------------------------------------------------------------------------- */
.ws-js .ws-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--ws-dur) var(--ws-ease),
    transform var(--ws-dur) var(--ws-ease);
}
.ws-js .ws-reveal.is-in { opacity: 1; transform: none; }

.ws-js .ws-lines:not(.is-split):not(.is-in) { visibility: hidden; }
.ws-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.ws-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform var(--ws-dur) var(--ws-ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.ws-lines.is-in .ws-line__inner { transform: none; }
.ws-word--br { display: block; height: 0; }

/* Mobile motion: capability glyph draws in on reveal.
   Active at every width; the pinned desktop stages use their own glyphs. */
.ws-js .ws-cap__row .ws-cap__glyph {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transition: stroke-dashoffset 1100ms var(--ws-ease);
}
.ws-js .ws-cap__row.is-in .ws-cap__glyph { stroke-dashoffset: 0; transition-delay: 150ms; }
.ws-js .ws-cap__row .ws-cap__ticks::before,
.ws-js .ws-cap__row .ws-cap__ticks::after {
  transform: scale(0);
  transition: transform var(--ws-dur) var(--ws-ease);
}
.ws-js .ws-cap__row .ws-cap__ticks::before { transform-origin: top left; }
.ws-js .ws-cap__row .ws-cap__ticks::after { transform-origin: bottom right; }
.ws-js .ws-cap__row.is-in .ws-cap__ticks::before,
.ws-js .ws-cap__row.is-in .ws-cap__ticks::after {
  transform: scale(1);
  transition-delay: 200ms;
}

.ws-marquee {
  overflow: hidden;
  border-top: var(--ws-border) solid var(--rule);
  border-bottom: var(--ws-border) solid var(--rule);
  border-radius: var(--ws-radius);
}
.ws-marquee__track {
  display: flex;
  width: max-content;
  padding-block: 16px;
  animation: ws-marquee 40s linear infinite;
}
.ws-marquee:hover .ws-marquee__track { animation-play-state: paused; }
.ws-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  white-space: nowrap;
  color: var(--fg);
}
.ws-marquee__item::after {
  content: '';
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--ws-signal-500);
  border-radius: var(--ws-radius);
}
@keyframes ws-marquee {
  to { transform: translateX(-50%); }
}
/* --banner (Home): the announcement strip. Fixed just under the nav and shown
   only while the nav is (the reveal nav comes in on the first scroll), so it
   slides in and out with it. Hidden while the mobile menu is open; below the
   nav's z-index so the nav always sits on top. */
.ws-marquee--banner {
  position: fixed;
  top: calc(var(--ws-nav-h) + var(--ws-border));
  left: 0;
  right: 0;
  z-index: 99;
  border: 0;
  background: var(--bg);
  visibility: hidden;
  transform: translateY(calc(-100% - var(--ws-nav-h) - var(--ws-border)));
  transition:
    transform var(--ws-dur-ui) var(--ws-ease),
    visibility 0s linear var(--ws-dur-ui);
}
.ws-nav.is-scrolled:not(.is-open) ~ main .ws-marquee--banner {
  visibility: visible;
  transform: none;
  transition: transform var(--ws-dur-ui) var(--ws-ease), visibility 0s;
}
.ws-marquee--banner .ws-marquee__track { padding-block: 16px; }
.ws-marquee--banner .ws-marquee__item {
  font-size: 14px;
  color: var(--kicker);
  transition: color var(--ws-dur-ui) var(--ws-ease);
}
/* The product name in the heaviest loaded mono weight, same colour as the line. */
.ws-marquee--banner .ws-marquee__item strong { font-weight: 600; }
/* The whole strip is one link. Its focus ring is drawn inside: the marquee
   clips anything outside it. */
.ws-marquee__link { display: block; text-decoration: none; }
.ws-marquee__link:focus-visible { outline-offset: -2px; }
.ws-marquee__link:is(:hover, :focus-visible) .ws-marquee__item { color: var(--fg); }
/* A megaphone in place of the dot separator, masked so it takes the accent. */
.ws-marquee--banner .ws-marquee__item::after {
  width: 18px;
  height: 18px;
  background: var(--ws-signal-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ws-no-transition, .ws-no-transition * { transition: none !important; }

/* Single reduced-motion query: Lenis is skipped in JS; everything else
   renders in its final state here. */
@media (prefers-reduced-motion: reduce) {
  .ws-js .ws-reveal,
  .ws-js .ws-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .ws-js .ws-lines:not(.is-split):not(.is-in) { visibility: visible; }
  .ws-line__inner { transform: none; transition: none; }
  .ws-marquee__track { animation: none; }
  .ws-hero__img { animation: none; transition: none; }
  body[data-nav="reveal"] .ws-nav { transition: none; }
  .ws-marquee--banner,
  .ws-nav.is-scrolled:not(.is-open) ~ main .ws-marquee--banner,
  .ws-marquee--banner .ws-marquee__item { transition: none; }
  .ws-js .ws-cap__row .ws-cap__ticks::before,
  .ws-js .ws-cap__row .ws-cap__ticks::after { transform: none; transition: none; }
  .ws-js .ws-cap__row .ws-cap__glyph { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .ws-js .ws-tiles--steps .ws-tile__glyph { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .ws-tile__n { transition: none; }
  .ws-js .ws-media__rule.ws-reveal { transform: none; transition: none; }
  .ws-cap-section { display: block; height: auto; min-height: 0; padding-block: var(--ws-section-y) 0; }
  .ws-cap-section .ws-section-head { margin-bottom: clamp(40px, 6vh, 64px); }
  .ws-cap-section .ws-cap { margin-top: clamp(40px, 6vh, 64px); }
  .ws-cap__stage { display: none; }
  .ws-cap__list { display: grid; }
  .ws-season__progress { stroke-dashoffset: 0; }
  .ws-season__node { opacity: 1; transition: none; }
  .ws-season__row-index, .ws-season__row-name, .ws-season__row-glyph { opacity: 1; transition: none; }
  .ws-season__rail-fill { transform: none; }
  .ws-btn, .ws-btn__arrow, .ws-link::after, .ws-nav, .ws-nav__link::after,
  .ws-nav__toggle span, .ws-row, .ws-footer__links a, .ws-totop,
  .ws-office, .ws-office__country, .ws-office address, .ws-worldmap__loc rect, .ws-worldmap__loc text { transition: none; }
  .ws-totop { transform: none; }
}