/* Typefaces, served from this site. Latin subset: English, French and
   Spanish sit entirely inside it. Manrope and Plex Sans are variable files. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/plex-sans-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500-latin.woff2) format('woff2')}

/* ============================================================
   TOKENS
   Palette sampled from the hero footage: dawn light entering
   deep marine water. Accent is reserved for data, links, charts,
   status and interactive elements. Never decorative.
   ============================================================ */
:root{
  --brand-navy:#013576;    /* sampled from the logo */
  --canvas:#05101a;        /* the navy carried down to near-black */
  --canvas-deep:#030a12;
  --panel:#0a1a2b;
  --panel-2:#0f2438;
  --accent:#00aabd;        /* the logo's cyan trace node */
  --accent-hover:#3fd4e6;
  --accent-muted:#0a5a68;
  --text-primary:#e8f0f4;
  --text-secondary:#8fa6b5;
  --hairline:rgba(143,166,181,.14);
  --border-interactive:rgba(143,166,181,.62);

  --tshadow:0 1px 2px rgba(3,10,18,.95),0 3px 12px rgba(3,10,18,.78),0 10px 44px rgba(3,10,18,.8);

  --display:'Manrope',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --content:1320px;
  --gut:clamp(20px,4vw,56px);
  --radius:3px;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
button{font:inherit;color:inherit}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#02141c;padding:12px 18px;font-weight:700;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

.wrap{max-width:var(--content);margin:0 auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   THE FIXED ENVIRONMENT LAYER
   One slow-drifting body of water behind everything, so scrolling
   reads as descending through one place, not past stacked blocks.
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before,.env::after{content:"";position:absolute;inset:-25%;}
.env::before{
  background:
    radial-gradient(ellipse 55% 42% at 22% 18%,rgba(29,101,96,.30),transparent 62%),
    radial-gradient(ellipse 48% 38% at 82% 72%,rgba(20,74,92,.26),transparent 64%);
  animation:envdrift 96s var(--ease-soft) -18s infinite alternate;
}
.env::after{
  background:radial-gradient(ellipse 40% 30% at 50% 96%,rgba(0,170,189,.10),transparent 68%);
  animation:envdrift2 74s var(--ease-soft) -30s infinite alternate;
}
@keyframes envdrift{from{transform:translate3d(-2.5%,-1.6%,0) scale(1)}to{transform:translate3d(2.5%,1.8%,0) scale(1.10)}}
@keyframes envdrift2{from{transform:translate3d(2%,1%,0)}to{transform:translate3d(-2%,-2%,0)}}

.motes{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.motes span{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);opacity:.20;animation:mote linear infinite}
@keyframes mote{
  0%{transform:translate3d(0,12vh,0);opacity:0}
  12%{opacity:.22}
  88%{opacity:.18}
  100%{transform:translate3d(14px,-104vh,0);opacity:0}
}

body>*:not(.env):not(.motes):not(.consent){position:relative;z-index:1}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* a near-opaque band, no backdrop blur: blurring the page behind a fixed bar
   is re-rendered on every scrolled frame and was the single most expensive
   effect on the page. The brief asks for no glass anyway. */
.nav.solid{background:rgba(7,15,21,.94);border-bottom-color:var(--hairline)}
.nav__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);height:104px;max-width:var(--content);margin:0 auto;padding-inline:var(--gut)}
.brand{font-family:var(--display);font-weight:800;letter-spacing:.16em;font-size:15px;color:var(--text-primary)}
.nav__links{display:flex;gap:clamp(10px,1.5vw,22px);margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav__links a{
  font-size:13px;color:var(--text-secondary);letter-spacing:.02em;
  padding:6px 2px;position:relative;transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--text-primary)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--accent)}

.lang{display:flex;gap:2px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.lang button{
  background:none;border:1px solid transparent;padding:4px 7px;border-radius:var(--radius);
  color:var(--text-secondary);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lang button[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-muted)}
.lang button[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius);font-size:14px;font-weight:500;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease);
}
.btn--primary{background:var(--accent);color:#02141c;font-weight:700}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--accent-hover);transform:translateY(-1px)}
.btn--ghost{border-color:var(--border-interactive);color:var(--text-primary)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--accent);color:var(--accent)}
.nav .btn{padding:9px 16px;font-size:13px}

.menu-btn{display:none;background:none;border:1px solid var(--border-interactive);border-radius:var(--radius);padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;cursor:pointer}

/* ============================================================
   HERO · the scroll-scrubbed film
   ============================================================ */
.hero{height:1400vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-deep)}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--canvas-deep)}

/* the three-facility opening: stills that hand over to the film */
.pro{position:absolute;inset:0;pointer-events:none}
.pro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.pro img.on{opacity:1}

.lockup{display:block;width:min(760px,82vw);margin:0 auto 30px;height:auto}
.static-hero .lockup{width:min(420px,68vw);margin:0 0 18px}
.hero h1{margin:0}
.facility{
  font-family:var(--mono);font-size:clamp(10px,1vw,12px);letter-spacing:.24em;
  color:var(--accent);margin-bottom:26px;min-height:1.4em;
}
.strapline{
  font-family:var(--mono);font-size:clamp(10px,.95vw,12px);letter-spacing:.18em;
  color:var(--text-secondary);margin-top:26px;text-transform:uppercase;
}
.brand-img{height:60px;width:auto;display:block}
.foot .brand-img{height:58px;margin-bottom:20px}
@media (max-width:820px){.brand-img{height:34px}.foot .brand-img{height:44px}}

/* layer 1 of the legibility system: the global base scrim */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(3,10,18,0) 34%,rgba(3,10,18,.64) 100%);
}

.ring{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);width:40px;height:40px;color:var(--accent);opacity:.85;transition:opacity .5s var(--ease)}
.ring circle{transition:stroke-dashoffset .18s linear;transform:rotate(-90deg);transform-origin:24px 24px}
.stage.video-ready .ring{opacity:0}

.cue{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--text-secondary);pointer-events:none}
.cue i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,var(--accent),transparent);animation:cuepulse 3.2s var(--ease-soft) -.8s infinite}
@keyframes cuepulse{0%,100%{opacity:.35;transform:scaleY(.72);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* the caption bands */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset:0;opacity:0;
  display:flex;align-items:center;
  padding-inline:var(--gut);
  text-shadow:var(--tshadow);
}
/* layer 2: the per-band scrim, anchored on that band's own text column */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
.band[data-side="left"]::before{background:radial-gradient(ellipse 58% 64% at 27% 50%,rgba(3,10,18,.74) 0%,rgba(3,10,18,.52) 46%,rgba(3,10,18,0) 76%)}
.band[data-side="right"]::before{background:radial-gradient(ellipse 58% 64% at 73% 50%,rgba(3,10,18,.74) 0%,rgba(3,10,18,.52) 46%,rgba(3,10,18,0) 76%)}
.band[data-side="center"]::before{background:radial-gradient(ellipse 78% 62% at 50% 46%,rgba(3,10,18,.76) 0%,rgba(3,10,18,.54) 48%,rgba(3,10,18,0) 78%)}

.band__in{position:relative;max-width:var(--content);margin:0 auto;width:100%}
.band__col{max-width:min(640px,52vw)}
.band[data-side="right"] .band__col{margin-left:auto}
.band[data-side="center"] .band__col{margin-inline:auto;max-width:min(860px,84vw);text-align:center}

.eyebrow{font-family:var(--mono);font-size:clamp(10px,1vw,12px);letter-spacing:.24em;color:var(--accent);margin-bottom:22px}
.hero h1{font-size:clamp(52px,8.4vw,124px);letter-spacing:.02em;margin-bottom:14px}
.hero h2{font-size:clamp(23px,2.7vw,40px);font-weight:700;line-height:1.14;max-width:19ch}
.band p{font-size:clamp(15px,1.25vw,18px);color:var(--text-primary);max-width:46ch;margin-top:20px;opacity:.92}
.band .line{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.4vw,64px);line-height:1.06;letter-spacing:-.02em}
.band .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;pointer-events:auto}
.band[data-side="center"] .btnrow{justify-content:center}
.band .btn{text-shadow:none}

/* text splitting for the entrances */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) grid snap-align · band 1 */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
/* (f) drift-down · band 2 */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (d) word-punch with overshoot · band 3 */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (g) approach-from-depth · echoes the camera pushing in on one pond */
.e-depth .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:scale(calc(0.80 + 0.20*var(--kc)));
}
/* (h) halves parting · echoes the surface about to open */
.e-part .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
/* the wordmark sits on the horizon and grows as the camera drops toward the
   water, so the camera reads as passing through the name into the pond */
.band[data-pos="horizon"]{align-items:flex-start;padding-top:26vh}
.band[data-pos="horizon"] .band__in{
  transform:scale(calc(1 + var(--p,0)*0.62));
  transform-origin:50% 30%;
}
.band[data-pos="horizon"] .band__col{margin-inline:auto;text-align:center;max-width:min(1000px,92vw)}
.band[data-pos="horizon"] h1{letter-spacing:.16em;font-size:clamp(40px,7.2vw,104px)}
.band[data-pos="horizon"] h2{max-width:26ch;margin-inline:auto;font-size:clamp(18px,2.1vw,30px)}
.band[data-pos="horizon"]::before{background:radial-gradient(ellipse 70% 40% at 50% 34%,rgba(3,10,18,.72) 0%,rgba(3,10,18,.48) 48%,rgba(3,10,18,0) 78%)}

/* (e) word-by-word rise into a staged settle · the settle band */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .btnrow{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--hairline);border-radius:var(--radius)}
.strip figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--text-secondary);margin-top:7px}

/* the static hero, for phones, portrait tablets and reduced motion */
.static-hero{display:none;position:relative;min-height:100svh;align-items:flex-end;background-size:cover;background-position:center;background-color:var(--canvas-deep)}
.static-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(3,10,18,.42) 0%,rgba(3,10,18,.34) 38%,rgba(3,10,18,.93) 100%)}
.static-hero__in{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(48px,9vh,96px);max-width:var(--content);margin:0 auto;text-shadow:var(--tshadow)}
.static-hero h1{font-size:clamp(44px,13vw,78px);letter-spacing:.02em;margin-bottom:12px}
.static-hero h2{font-size:clamp(20px,5.4vw,30px);font-weight:700;line-height:1.16;margin-bottom:16px}
.static-hero p{color:var(--text-primary);opacity:.92;max-width:44ch}
.static-hero .btnrow{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:420px}
.static-hero .btn{min-height:48px;text-shadow:none}

/* ============================================================
   THE THREAD · the signature element
   One continuous line running the whole page, drawing itself on
   scroll. Remove it and the page becomes stacked blocks instead
   of one unbroken production history.
   ============================================================ */
.threadwrap{position:absolute;left:0;top:0;bottom:0;width:100%;pointer-events:none;z-index:0}
.thread{
  position:absolute;top:0;bottom:0;left:max(calc((100vw - var(--content))/2 + 16px),16px);
  width:1px;background:var(--hairline);
}
/* No JavaScript touches these two. The drawn half of the line is a sticky
   block half a screen tall, so it always runs from the top of the viewport
   to its middle; the point is a sticky dot pinned at that middle. Both are
   placed by the compositor in the same frame as the scroll, and both stop
   at the end of the thread because sticky is bounded by its parent. */
.thread i{position:sticky;top:0;display:block;width:1px;height:50vh;background:linear-gradient(to bottom,var(--accent-muted),var(--accent))}
.thread b{position:sticky;top:calc(50vh - 3.5px);display:block;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 3px rgba(0,170,189,.5)}
@media (max-width:1100px){.thread{display:none}}

/* ============================================================
   SECTIONS · shared rhythm
   ============================================================ */
.sec{padding-block:clamp(84px,12vh,164px);position:relative}
.sec--tight{padding-block:clamp(56px,8vh,104px)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin-bottom:20px}
.sec h2{font-size:clamp(30px,4.1vw,60px);max-width:22ch;margin-bottom:22px}
.lede{color:var(--text-secondary);font-size:clamp(16px,1.3vw,19px);max-width:62ch}

/* entrances */
.js .rise{opacity:0;transform:translateY(20px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.js .stag>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0ms}
.stag.in>*:nth-child(2){transition-delay:70ms}
.stag.in>*:nth-child(3){transition-delay:140ms}
.stag.in>*:nth-child(4){transition-delay:210ms}
.stag.in>*:nth-child(5){transition-delay:280ms}
.stag.in>*:nth-child(6){transition-delay:350ms}
.stag.in>*:nth-child(7){transition-delay:420ms}
.stag.in>*:nth-child(8){transition-delay:490ms}
.stag.in>*:nth-child(9){transition-delay:560ms}
/* retire the stagger once the entrance is done, at matching specificity,
   or every later sibling's hover lags by its stagger forever */
.stag.done>*:nth-child(n){transition-delay:0ms!important}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border:1px solid var(--hairline);border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-secondary);
  background:rgba(13,27,35,.5);
  transition:border-color .34s var(--ease),color .34s var(--ease),background .34s var(--ease),transform .34s var(--ease);
}
.chip--accent{border-color:var(--accent-muted);color:var(--accent)}
.chiprow{display:flex;flex-wrap:wrap;gap:9px}
button.chip{cursor:pointer;border-color:var(--border-interactive)}
button.chip:hover,button.chip:focus-visible{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
button.chip[aria-pressed="true"],button.chip[aria-selected="true"]{border-color:var(--accent);color:var(--accent);background:rgba(0,170,189,.08)}

.card{
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);
  padding:22px;transition:border-color .38s var(--ease),transform .38s var(--ease),background .38s var(--ease);
}
.card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.card p{color:var(--text-secondary);font-size:14.5px;line-height:1.55}
.card:hover{border-color:var(--accent-muted);transform:translateY(-2px);background:var(--panel-2)}

/* 03 · the problem */
.problem{display:grid;grid-template-columns:1fr 150px 1fr;gap:34px;align-items:center;margin-top:56px}
.bigline{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.6vw,64px);line-height:1.04;letter-spacing:-.025em;margin-bottom:44px}
.bigline em{font-style:normal;color:var(--accent)}
.sources{display:flex;flex-wrap:wrap;gap:10px;min-height:210px;align-content:center}
.sources .chip{transition:transform .8s var(--ease),opacity .8s var(--ease),border-color .5s var(--ease)}
.converge{height:190px;width:100%}
.converge path{stroke:var(--accent-muted);stroke-width:1;fill:none;stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) - var(--len)*var(--cp,0))}
.tracebox{
  border:1px solid var(--accent-muted);border-radius:var(--radius);padding:26px 22px;text-align:center;
  background:linear-gradient(180deg,rgba(0,170,189,.07),rgba(0,170,189,.01));
}
.tracebox strong{font-family:var(--display);font-weight:800;letter-spacing:.16em;font-size:15px;display:block;margin-bottom:6px}
.tracebox span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}
.caption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary);margin-top:18px;opacity:.7}

/* 04 · the ecosystem */
.eco{display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:center;margin-top:52px}
.modlist{display:flex;flex-wrap:wrap;gap:8px}
.modlist button{cursor:pointer}
.radial{width:100%;height:auto;aspect-ratio:1}
.radial circle.sat{fill:#16304a;stroke:var(--border-interactive);stroke-width:1.1;transition:fill .35s var(--ease),stroke .35s var(--ease),r .35s var(--ease)}
.radial line{stroke:rgba(143,166,181,.42);transition:stroke .35s var(--ease),stroke-width .35s var(--ease)}
.radial .on circle.sat,.radial circle.sat.on{fill:var(--accent);stroke:var(--accent);r:6}
.radial line.on{stroke:var(--accent);stroke-width:1.8}
.radial .halo{fill:none;stroke:var(--accent-muted);opacity:.45}
.radial .core{fill:var(--canvas-deep);stroke:var(--accent);stroke-width:1.2}
.radial text{font-family:var(--mono);font-size:9px;fill:var(--text-secondary);letter-spacing:.06em}
.ecodesc{margin-top:22px;min-height:52px;font-size:15px;color:var(--text-secondary);border-left:1px solid var(--accent-muted);padding-left:16px}
.ecodesc strong{color:var(--accent);font-family:var(--mono);font-size:12px;letter-spacing:.1em;display:block;margin-bottom:4px;font-weight:500}

/* 05 · traceability */
.rail{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:46px}
.rail .stage-box{
  border:1px solid var(--hairline);border-radius:var(--radius);padding:13px 8px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--text-secondary);
  background:var(--panel);transition:all .42s var(--ease);
}
.rail .stage-box.on{border-color:var(--accent);color:var(--accent);background:rgba(0,170,189,.08)}
.rail .stage-box.past{border-color:var(--accent-muted);color:var(--text-primary)}
.progress{height:1px;background:var(--hairline);margin:22px 0 40px;position:relative}
.progress i{position:absolute;left:0;top:0;height:1px;background:var(--accent);width:var(--tp,0%);transition:width .5s var(--ease)}
.tracegrid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px}
.panel{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);padding:26px}
.panel__h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:24px}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px;margin-bottom:26px}
.dgrid dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-secondary);margin-bottom:6px}
.dgrid dd{margin:0;font-family:var(--mono);font-size:clamp(17px,1.7vw,22px);font-variant-numeric:tabular-nums}
.passport{border:1px solid var(--accent-muted);border-radius:var(--radius);background:linear-gradient(180deg,rgba(0,170,189,.06),transparent);padding:24px}
.qr{width:104px;height:104px;image-rendering:pixelated;margin-bottom:18px;background:#e9f2f3;padding:6px;border-radius:2px}
.events{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:11.5px}
.events li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--hairline);color:var(--text-secondary);transition:color .4s var(--ease),opacity .4s var(--ease);opacity:.35}
.events li.lit{color:var(--text-primary);opacity:1}
.events li.lit b{color:var(--accent);font-weight:500}
.hold{
  margin-top:30px;display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--border-interactive);border-radius:var(--radius);
  padding:13px 20px;background:var(--panel);cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  transition:border-color .35s var(--ease),color .35s var(--ease);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.hold::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(0,170,189,.14);transform:scaleX(var(--hp,0));transform-origin:left;pointer-events:none}
.hold span{position:relative}
.hold:hover,.hold:focus-visible{border-color:var(--accent);color:var(--accent)}
.hold.done{border-color:var(--accent);color:var(--accent)}

/* 06 · data becomes intelligence */
.leadin{display:grid;grid-template-columns:1fr 34px 1fr;gap:20px;align-items:center;margin:48px 0 60px}
.leadin .arrow{color:var(--accent);text-align:center;font-family:var(--mono)}
.browser{
  border:1px solid var(--hairline);border-radius:5px;background:var(--panel);overflow:hidden;
  transform:perspective(2200px) rotateX(3.2deg);transform-origin:top center;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.browser__bar{display:flex;align-items:center;gap:16px;padding:11px 16px;border-bottom:1px solid var(--hairline);background:var(--canvas-deep);flex-wrap:wrap}
.browser__bar .brand{font-size:12px;letter-spacing:.18em}
.tabs{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.tabs span:first-child{color:var(--accent)}
.site-sel{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.kpis{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--hairline)}
.kpi{padding:16px 12px;border-right:1px solid var(--hairline)}
.kpi:last-child{border-right:0}
.kpi dt{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:7px}
.kpi dd{margin:0;font-family:var(--mono);font-size:clamp(15px,1.5vw,20px);font-variant-numeric:tabular-nums}
.dashbody{display:grid;grid-template-columns:1.5fr 1fr 1fr}
.dashbody>div{padding:18px;border-right:1px solid var(--hairline)}
.dashbody>div:last-child{border-right:0}
.dash-h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-secondary);margin-bottom:16px}
.dash-h.alert{color:var(--accent)}
.chart{width:100%;height:150px}
.chart .grid{stroke:var(--hairline);stroke-width:1}
.chart .ln{fill:none;stroke-width:1.6;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.5s var(--ease)}
.chart.drawn .ln{stroke-dashoffset:0}
.chart .ln1{stroke:var(--accent)}
.chart .ln2{stroke:var(--text-secondary);stroke-dasharray:3 3;opacity:.6}
.sparks{display:grid;gap:11px}
.spark{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:var(--text-secondary)}
.spark svg{flex:1;height:22px}
.spark path{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.75}
.alerts{list-style:none;padding:0;margin:0 0 18px;font-family:var(--mono);font-size:11px}
.alerts li{padding:9px 0 9px 14px;border-bottom:1px solid var(--hairline);position:relative;color:var(--text-secondary)}
.alerts li::before{content:"";position:absolute;left:0;top:14px;width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* 07 · reporting */
.repgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:50px}
.flow{display:grid;gap:2px;margin-bottom:34px}
.flow div{
  border:1px solid var(--hairline);border-left:2px solid var(--accent-muted);border-radius:var(--radius);
  padding:14px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-secondary);
  background:var(--panel);transition:border-left-color .4s var(--ease),color .4s var(--ease)
}
.flow div:hover{border-left-color:var(--accent);color:var(--text-primary)}
.pages{position:relative;min-height:430px}
.page{
  position:absolute;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);
  padding:26px;width:88%;transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.page--1{top:0;left:0;z-index:2}
.page--2{top:14px;left:12%;z-index:1;opacity:.55}
.page .ptitle{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent);margin:0 0 16px;font-weight:500}
.page table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.page td{padding:7px 0;border-bottom:1px solid var(--hairline);color:var(--text-secondary)}
.page td:last-child{text-align:right;color:var(--text-primary)}
.skel{height:7px;background:var(--hairline);border-radius:1px;margin-bottom:9px}
.skel:nth-child(2n){width:74%}

/* 08 · operations */
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.op{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--panel);transition:border-color .4s var(--ease),transform .4s var(--ease)}
.op:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
.op__img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--canvas-deep)}
.op__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.op:hover .op__img img{transform:scale(1.035)}
.op__tag{position:absolute;left:11px;bottom:11px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--accent);background:rgba(3,10,18,.72);border:1px solid rgba(0,170,189,.28);border-radius:2px;padding:4px 8px;backdrop-filter:blur(8px)}
.op__b{padding:18px}
.op__b h3{font-size:16px;margin-bottom:6px}
.op__b p{color:var(--text-secondary);font-size:13.5px;line-height:1.5}
.op--close{display:flex;flex-direction:column;justify-content:center;padding:26px;border-style:dashed}

/* chapter images */
.chapter{position:relative;min-height:min(72vh,620px);overflow:hidden;display:flex;align-items:flex-end}
.chapter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chapter::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,10,18,.94),rgba(3,10,18,.30) 55%,rgba(3,10,18,.55))}
.chapter__t{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(34px,6vh,64px);max-width:var(--content);margin:0 auto}
.chapter__t h3{font-size:clamp(24px,3.4vw,44px);margin-bottom:10px;text-shadow:var(--tshadow)}
.chapter__t p{color:var(--text-primary);opacity:.88;max-width:48ch;text-shadow:var(--tshadow)}

/* 09 · biosecurity */
.bio{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.bio__img{position:relative;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.bio__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bio__img svg{position:absolute;inset:0;width:100%;height:100%}
.bio__img line{stroke:var(--accent);stroke-width:.8;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s var(--ease)}
.bio__img.drawn line{stroke-dashoffset:0}
.bio__img circle{fill:var(--accent);opacity:0;transition:opacity .6s var(--ease) .6s}
.bio__img.drawn circle{opacity:1}
.bio__img text{font-family:var(--mono);font-size:8.5px;fill:var(--accent);letter-spacing:.08em;opacity:0;transition:opacity .6s var(--ease) .9s}
.bio__img.drawn text{opacity:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}

/* 10 + 12 · card grids */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}

/* 11 · the digital farm sticky sequence */
.farm{height:520vh;position:relative}
.farm__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.farm__bg{position:absolute;inset:0}
.farm__bg img{width:100%;height:100%;object-fit:cover}
.farm__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(3,10,18,.90),rgba(3,10,18,.42) 58%,rgba(3,10,18,.72))}
.farm__in{position:relative;z-index:2;width:100%;max-width:var(--content);margin:0 auto;padding-inline:var(--gut)}
.farm__h{font-size:clamp(26px,3.6vw,50px);max-width:17ch;margin-bottom:34px;text-shadow:var(--tshadow)}
.layers{display:grid;gap:8px;max-width:520px}
.layer{
  border:1px solid var(--hairline);border-left:2px solid var(--accent-muted);border-radius:var(--radius);
  padding:12px 16px;background:rgba(7,15,21,.86);
  display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-left-color .55s var(--ease);
}
.layer.on{opacity:1;transform:none;border-left-color:var(--accent)}
.layer b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:500;min-width:22px}
.layer span{font-size:14px;color:var(--text-primary)}
.layer i{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-secondary);font-style:normal}
.farm__count{position:absolute;right:var(--gut);bottom:38px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--text-secondary);z-index:3}
.farm__fallback{display:none}

/* 13 · multi-site */
.msite{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;margin-top:50px}
.map{width:100%;height:auto;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--canvas-deep)}
.map path.land{fill:#0f2029;stroke:rgba(147,169,178,.20);stroke-width:.35}
.map .pin{fill:var(--accent);cursor:pointer;transition:r .35s var(--ease),opacity .35s var(--ease)}
.map .pin-h{fill:none;stroke:var(--accent);opacity:0;transition:opacity .4s var(--ease),r .4s var(--ease)}
.map .pin.on,.map .pin:hover{r:5}
.map g.on .pin-h{opacity:.85}
.sites{display:grid;gap:2px}
.site{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);
  padding:16px 18px;cursor:pointer;text-align:left;width:100%;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.site:hover,.site:focus-visible,.site.on{border-color:var(--accent);background:rgba(0,170,189,.06)}
.site b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:500}
.site span{font-family:var(--mono);font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.site.on span{color:var(--accent)}

/* FAQ */
.faq{max-width:900px;margin-top:44px}
.qa{border-bottom:1px solid var(--hairline)}
.qa button{
  width:100%;display:flex;justify-content:space-between;gap:20px;align-items:center;
  background:none;border:0;padding:22px 0;text-align:left;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.5vw,20px);color:var(--text-primary);
  transition:color .3s var(--ease);
}
.qa button:hover{color:var(--accent)}
.qa button i{flex:none;width:12px;height:12px;position:relative;font-style:normal}
.qa button i::before,.qa button i::after{content:"";position:absolute;background:var(--accent);transition:transform .38s var(--ease)}
.qa button i::before{left:0;top:5.5px;width:12px;height:1px}
.qa button i::after{left:5.5px;top:0;width:1px;height:12px}
.qa button[aria-expanded="true"] i::after{transform:scaleY(0)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease);opacity:0}
.qa__a p{padding-bottom:24px;color:var(--text-secondary);max-width:66ch}
.qa.open .qa__a{opacity:1}

/* 14 · trust */
.trust{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:baseline}
.trust h2{margin:0;font-size:clamp(26px,3.2vw,44px)}

/* 15 · final CTA */
.final{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 80% at 50% 50%,rgba(3,10,18,.72),rgba(3,10,18,.90))}
.final__in{position:relative;z-index:2;padding-inline:var(--gut);max-width:900px;text-shadow:var(--tshadow)}
.final h2{font-size:clamp(30px,5vw,68px);margin-inline:auto;margin-bottom:18px}
.final p{color:var(--text-primary);opacity:.9;font-size:clamp(16px,1.4vw,19px);margin-bottom:32px}
.final .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final .btn{text-shadow:none}

/* the form */
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--text-secondary)}
.field input,.field textarea,.field select{
  background:var(--panel);border:1px solid var(--border-interactive);border-radius:var(--radius);
  padding:12px 14px;color:var(--text-primary);font-family:var(--body);font-size:15px;width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary);opacity:.55}
.field textarea{resize:vertical;min-height:92px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{margin-top:6px;justify-self:start;padding:14px 28px}
.formnote{font-size:12.5px;color:var(--text-secondary);margin-top:4px}
.thanks{display:none;border:1px solid var(--accent-muted);border-radius:var(--radius);background:rgba(0,170,189,.07);padding:26px}
.thanks.on{display:block}
.thanks p{color:var(--text-primary)}

/* footer */
.foot{border-top:1px solid var(--hairline);padding-block:clamp(52px,7vh,84px) 34px;margin-top:20px}
.foot__g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:38px}
.foot h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-secondary);margin:0 0 16px;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a{color:var(--text-secondary);font-size:14px;transition:color .3s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot .brand{display:block;margin-bottom:12px;font-size:16px}
.foot__tag{color:var(--text-secondary);font-size:13.5px;max-width:34ch;margin-bottom:18px}
.foot__end{margin-top:46px;padding-top:24px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .nav__links{display:none}
  .menu-btn{display:block;margin-left:auto}
  .nav .btn--primary{display:none}
  .eco,.tracegrid,.repgrid,.bio,.msite,.demo{grid-template-columns:1fr;gap:34px}
  .g4,.ops{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .dashbody{grid-template-columns:1fr}
  .dashbody>div{border-right:0;border-bottom:1px solid var(--hairline)}
  .trust{grid-template-columns:1fr;gap:26px}
}
@media (max-width:820px){
  .problem{grid-template-columns:1fr;gap:26px}
  .leadin{grid-template-columns:1fr;gap:14px}
  .leadin .arrow{transform:rotate(90deg)}
  .converge{height:120px}
  .rail{grid-template-columns:repeat(2,1fr)}
  .g3,.g4,.ops{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi{border-bottom:1px solid var(--hairline)}
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
  .foot__g{grid-template-columns:1fr 1fr}
  .browser{transform:none}
  .grid2{grid-template-columns:1fr}
}

/* the five static-hero gates. these five strings must match the JS exactly. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
  .farm{height:auto}
  .farm__stage{position:static;height:auto;padding-block:clamp(56px,9vh,110px)}
  .layer{opacity:1;transform:none;border-left-color:var(--accent)}
  .farm__count{display:none}
}

/* short scrub-capable windows have no room for the small overlays */
@media (max-height:560px){.cue{display:none}}

@media (pointer:coarse){
  .btn,button.chip,.hold,.site,.qa button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .railnav a{min-height:44px;display:inline-flex;align-items:center;gap:.4em}
  .railnav a i{margin:0}
  .lang button{min-height:44px;min-width:44px}
  .site,.qa button{display:grid;justify-content:stretch}
  .qa button{display:flex;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  html{scroll-behavior:auto}
  .js .rise,.js .stag>*{opacity:1;transform:none}
  .chart .ln,.bio__img line{stroke-dashoffset:0}
  .bio__img circle,.bio__img text{opacity:1}
  .motes,.env::before,.env::after{animation:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* while the film is on screen it covers the environment layer entirely, so
   its two drifting gradients and the motes are paused: three fewer layers to
   composite on every scrolled frame, all of the headroom going to the video */
body.film .env::before,body.film .env::after,body.film .motes span{animation-play-state:paused}

/* ============================================================
   INNER PAGES
   Platform and Traceability. Same tokens, same components, new
   arrangements. Nothing here is decorative: every panel below is
   a working specification for a screen the software will need.
   ============================================================ */

/* page header: short, not a second hero */
.phead{padding-block:clamp(112px,15vh,168px) clamp(40px,6vh,72px);border-bottom:1px solid var(--hairline)}
.phead h1{font-size:clamp(38px,6vw,86px);letter-spacing:-.02em;margin-bottom:20px}
.phead .lede{max-width:64ch}
.phead .chiprow{margin-top:28px}

/* the module index: sticky rail beside one block per module */
.modlayout{display:grid;grid-template-columns:170px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
/* grid items default to min-width:auto, so a nowrap table inside .screen__wrap or
   .tablewrap would widen the whole column past the phone. This is what lets
   overflow-x:auto actually scroll instead of pushing. */
.modlayout>*,.mod{min-width:0}
.railnav{position:sticky;top:126px;display:grid;gap:1px;max-height:calc(100vh - 140px);overflow:auto}
.railnav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-secondary);
  padding:7px 10px;border-left:1px solid var(--hairline);border-radius:0 var(--radius) var(--radius) 0;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.railnav a:hover,.railnav a:focus-visible{color:var(--text-primary);border-left-color:var(--border-interactive)}
.railnav a.on{color:var(--accent);border-left-color:var(--accent);background:rgba(0,170,189,.06)}
.railnav a i{font-style:normal;opacity:.7}

.mods{display:grid;gap:clamp(56px,8vh,104px)}
.mod{scroll-margin-top:124px}
.mod__n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);margin-bottom:14px}
.mod h2{font-size:clamp(24px,3vw,40px);margin-bottom:14px}
.mod p{color:var(--text-secondary);max-width:58ch;margin-bottom:22px}
.mod .chiprow{margin-top:20px}

/* the mock module screen, built rather than photographed */
.screen{border:1px solid var(--hairline);border-radius:5px;background:var(--panel);overflow:hidden}
.screen__bar{
  display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-bottom:1px solid var(--hairline);background:var(--canvas-deep);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-secondary);
}
.screen__bar b{color:var(--accent);font-weight:500}
.screen__bar i{margin-left:auto;font-style:normal}
.screen table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.screen th{
  text-align:left;font-weight:500;color:var(--text-secondary);letter-spacing:.1em;font-size:9.5px;
  padding:10px 14px;border-bottom:1px solid var(--hairline);white-space:nowrap;
}
.screen td{padding:11px 14px;border-bottom:1px solid var(--hairline);color:var(--text-primary);white-space:nowrap}
.screen tr:last-child td{border-bottom:0}
.screen td.acc{color:var(--accent)}
.screen__wrap{overflow-x:auto}

/* the data model */
.entity{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:44px}
.entity svg{width:100%;height:auto}
.entity rect{fill:var(--panel);stroke:var(--border-interactive)}
.entity path{stroke:var(--accent-muted);fill:none}
.entity text{font-family:var(--mono);font-size:10px;fill:var(--text-primary);letter-spacing:.08em}
.entity text.sub{fill:var(--text-secondary);font-size:8.5px}

/* the batch lookup, the Traceability page's one real interaction */
.lookup{
  display:flex;align-items:center;gap:14px;margin-top:40px;
  border:1px solid var(--border-interactive);border-radius:var(--radius);
  background:var(--panel);padding:14px 18px;
}
.lookup span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-secondary)}
.lookup b{font-family:var(--mono);font-size:clamp(15px,1.6vw,19px);color:var(--accent);font-weight:500}
.lookup i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text-secondary)}

.tracelayout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3vw,44px);margin-top:32px;align-items:start}
.evlist{display:grid;gap:1px;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.evlist button{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;text-align:left;
  background:var(--panel);border:0;border-left:2px solid transparent;padding:14px 16px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;color:var(--text-secondary);
  transition:background .3s var(--ease),color .3s var(--ease),border-left-color .3s var(--ease);
}
.evlist button:hover,.evlist button:focus-visible{background:var(--panel-2);color:var(--text-primary)}
.evlist button[aria-current="true"]{
  background:rgba(0,170,189,.08);color:var(--accent);border-left-color:var(--accent);
}
.evlist button em{font-style:normal;color:inherit;opacity:.75}

.evdetail{display:grid;gap:22px}
.evdetail .panel__h{margin-bottom:18px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kv dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--text-secondary);margin-bottom:6px}
.kv dd{margin:0;font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}

/* genealogy: parents, the batch, then its splits */
.tree{display:grid;gap:14px}
.tree__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tree__n{
  font-family:var(--mono);font-size:11px;padding:9px 13px;border-radius:var(--radius);
  border:1px solid var(--hairline);background:var(--panel);color:var(--text-secondary);
}
.tree__n.self{border-color:var(--accent);color:var(--accent);background:rgba(0,170,189,.08)}
.tree__lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--text-secondary);min-width:76px}
.tree__link{width:1px;height:16px;background:var(--accent-muted);margin-left:38px}

@media (max-width:1100px){
  .modlayout{grid-template-columns:1fr}
  .railnav{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:6px;
    padding-bottom:22px;border-bottom:1px solid var(--hairline);margin-bottom:12px}
  .railnav a{border-left:0;border:1px solid var(--hairline);border-radius:var(--radius)}
  .railnav a.on{border-color:var(--accent)}
  .tracelayout,.entity{grid-template-columns:1fr}
}
@media (max-width:820px){
  .kv{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   LEGAL PAGES
   Long-form text, which the rest of the site does not have.
   Layout is the Platform one: sticky index on the left, content
   on the right, so nothing new has to be tested at 320px.
   The accent stays on links only. No decoration here.
   ============================================================ */

/* the draft strip: it disappears the day the client's text lands */
.draftbar{
  border:1px dashed var(--border-interactive);border-radius:var(--radius);
  background:var(--panel);padding:18px 20px;margin-bottom:34px;
}
.draftbar b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--text-primary);font-weight:500;margin-bottom:8px;
}
.draftbar p{color:var(--text-secondary);font-size:14px;line-height:1.6;max-width:70ch}

.legal{max-width:74ch}
.legal section{margin-bottom:clamp(44px,6vh,72px);scroll-margin-top:124px}
.legal section:last-child{margin-bottom:0}
.legal h2{font-size:clamp(21px,2.4vw,30px);max-width:34ch;margin-bottom:16px}
.legal h3{font-size:16px;font-weight:700;margin:26px 0 10px}
.legal p{color:var(--text-secondary);font-size:15.5px;line-height:1.68;margin-bottom:16px}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal a:hover,.legal a:focus-visible{color:var(--accent-hover)}
.legal ul{margin:0 0 18px;padding-left:20px;display:grid;gap:9px}
.legal li{color:var(--text-secondary);font-size:15.5px;line-height:1.6}
.legal .kicker{margin-bottom:12px}

/* what the client has to supply, stated on the page itself rather
   than hidden in a document nobody opens */
.tofill{
  border:1px dashed var(--hairline);border-left:2px solid var(--border-interactive);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(15,36,56,.5);padding:16px 18px;margin-bottom:18px;
}
.tofill::before{
  content:attr(data-label);display:block;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--text-secondary);margin-bottom:10px;
}
.tofill ul{margin:0;padding-left:18px;gap:7px}
.tofill li,.tofill p{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text-secondary);margin:0}

/* the one table these pages need: who receives the data */
.legal table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;margin-bottom:18px}
.legal th{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--hairline);
  font-size:9.5px;letter-spacing:.12em;color:var(--text-secondary);font-weight:500;
}
.legal td{padding:10px 12px;border-bottom:1px solid var(--hairline);color:var(--text-primary);vertical-align:top}
.legal tr:last-child td{border-bottom:0}
.legal .tablewrap{overflow-x:auto;margin-bottom:18px}
.legal .tablewrap table{margin-bottom:0}

.updated{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary);margin-top:8px}

/* the way into the software: a round icon in the top band of every page,
   leading to portal.html, which hands over to app.aquatrace-software.com.
   Its word is read out and shown as a tooltip, not printed: the band has no
   room left for it in French or Spanish */
.nav__login{
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border:1px solid var(--border-interactive);border-radius:50%;
  color:var(--accent);transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav__login-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav__login-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav__login:hover,.nav__login:focus-visible,.nav__login[aria-current="page"]{border-color:var(--accent);background:rgba(0,170,189,.10)}
/* just above the menu breakpoint, French and Spanish need the band a little tighter */
@media (min-width:1181px) and (max-width:1299px){.nav__in{gap:18px}.nav__links{gap:12px}}
@media (max-width:1180px){.nav__login{margin-left:auto}.nav__login~.menu-btn{margin-left:0}}
@media (pointer:coarse){.nav__login{width:44px;height:44px}}
/* narrow phones: room for the icon without squeezing the logo. The language
   buttons keep their 44 px height and narrow to 34 px (WCAG 2.5.8 asks for 24) */
@media (max-width:430px){
  .nav__in{gap:10px}
  .nav .lang button{padding-inline:4px}
}
@media (max-width:430px) and (pointer:coarse){.nav .lang button{min-width:34px}}
@media (max-width:360px){.menu-btn{padding-inline:8px}}

/* ============================================================
   CLIENT PORTAL
   One card to sign in, the address to hand to a team, and two
   short notes: no account yet, and where a password may be typed.
   ============================================================ */
.portal{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,3vw,40px);align-items:start}
.portal__card{padding:clamp(26px,3.4vw,44px)}
.portal__card h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}
.portal__card>p{color:var(--text-secondary);max-width:54ch;margin:0}
.portal__go{margin-top:26px;padding:14px 28px}
.portal__link{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--hairline)}
.portal__label{flex-basis:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-secondary)}
.portal__url{font-family:var(--mono);font-size:14px;color:var(--text-primary);overflow-wrap:anywhere}
.portal__copy{background:none;font:inherit;padding:8px 14px;font-size:13px}
.portal__copied{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}
.portal__card>.portal__hint{font-size:13.5px;margin-top:14px}
.portal__side{display:grid;gap:clamp(18px,2vw,24px)}
.portal__side p{color:var(--text-secondary);font-size:14.5px;line-height:1.6;margin:0 0 18px}
.portal__side p:last-child{margin-bottom:0}
@media (max-width:1180px){.portal{grid-template-columns:1fr}}

/* the acknowledgement bar: one line, two links, one button, never blocking */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);border-top:1px solid var(--hairline);padding:12px 24px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:center;font-size:14px;line-height:1.5;color:var(--text-secondary)}
.consent[hidden]{display:none}
.consent p{margin:0;max-width:64ch}
.consent__act{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
.consent__act a{display:inline-block;padding:12px 0;line-height:20px;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.consent__act a:hover,.consent__act a:focus-visible{color:var(--accent-hover)}
.consent .btn{padding:10px 18px;min-height:44px}
@media (max-width:720px){.consent{padding:10px 16px;justify-content:flex-start}}