/* ============================================================================
   TURKMEN UREA — "PRILL TOWER"
   ----------------------------------------------------------------------------
   The site is built from the way the material is actually made. Molten urea
   is dropped down a prilling tower and lands as near-perfect white spheres.
   Two motifs carry that, and nothing else is decorative:

     THE PRILL      a circle. The brand mark, the media masks, the leader
                    dots in every spec row, the progress rings, the numerals
                    on the rail. Never a rounded rectangle pretending.

     THE DROP       a vertical hairline. Section indices hang on it, the load
                    reveal falls rather than rises, media parallax runs down.

   Ground is the field, not the product: a deep loam green-black. The product
   colour — prill white — is spent in one place, the full-bleed Specification
   wall, where the page inverts to paper and the assay sheet is laid out on it.
   Nitrogen chartreuse is the only accent, used at small area and high energy.

   Type   Instrument Serif   display >= 1.6rem. High contrast, dramatic italic.
          Manrope            body + UI. Geometric, low profile, quiet.
          IBM Plex Mono      indices, spec values, labels. Tabular figures.
   ========================================================================= */

/* ------------------------------------------------------------------ TOKENS */
/* The palette is the material's own: prilled urea is a WHITE crystalline
   solid, so the page ground is prill white and the ink is the colour of the
   field it feeds. Nitrogen chartreuse is the only accent.

   One inversion, and it is the Specification wall — the page drops to a deep
   loam plate there, so the assay sheet reads as the serious document in the
   middle of an otherwise open, papery site. The footer takes the same plate,
   which gives the page a base to stand on. */
:root{
  /* --- the material: ground ------------------------------------------ */
  --bone:      #F7F5EE;
  --paper:     #FFFFFF;
  --bone-2:    #F0EDE3;
  --bone-3:    #E7E3D5;

  /* --- the field: ink ------------------------------------------------- */
  --ink:       #101711;
  --ink-2:     #4A5348;
  --ink-3:     #767E73;
  --ink-4:     #A2A99E;
  --line-l:    #DEDACB;
  --line-ll:   #EBE8DB;

  /* --- the plate: loam ------------------------------------------------ */
  --loam:      #0C1310;
  --loam-1:    #101A15;
  --loam-2:    #16211B;
  --loam-3:    #1D2A23;
  --line-d:    #26332C;
  --line-dd:   #1C2721;
  --prill:     #F5F2E8;

  /* --- accent: nitrogen ----------------------------------------------- */
  --nitro:     #A8CF3A;
  --nitro-hi:  #C8E86E;
  --nitro-md:  #7FA229;
  --nitro-lo:  #41590F;
  --nitro-rgb: 168,207,58;

  /* --- tertiary: grain / harvest. Illustration and data only ---------- */
  --wheat:     #C79E4A;
  --wheat-lo:  #7A6330;

  /* --- SEMANTIC. Every component below is written once against these and
         re-skinned by its container. Nothing defines a variant of itself. -- */
  --bg:        var(--bone);
  --surface:   var(--paper);
  --surface-2: var(--bone-2);
  --fg:        var(--ink);
  --fg-2:      var(--ink-2);
  --fg-3:      var(--ink-3);
  --fg-4:      var(--ink-4);
  --rule:      var(--line-l);
  --rule-soft: var(--line-ll);
  --accent:    var(--nitro-md);     /* reads as a mark on bone           */
  --accent-tx: var(--nitro-lo);     /* accent as legible text            */
  --accent-on: #0A100D;             /* text laid on the accent           */
  --bad:       #B03A12;             /* validation, legible on paper      */

  /* Elevation is shallow on paper and deep on the plate, so it lives with
     the skin rather than with the component. */
  --e1: 0 1px 2px rgba(16,23,17,.05);
  --e2: 0 18px 40px -18px rgba(16,23,17,.17);
  --e3: 0 44px 92px -34px rgba(16,23,17,.24);
  --e-glow: 0 0 0 1px rgba(var(--nitro-rgb),.34), 0 30px 76px -30px rgba(var(--nitro-rgb),.34);

  /* --- type ---------------------------------------------------------- */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* fluid scale, ~1.28 minor third at the top, tuned optically */
  --t-mega: clamp(3.1rem, 9.5vw, 10.2rem);
  --t-xxl:  clamp(2.5rem, 6.1vw,  5.6rem);
  --t-xl:   clamp(2rem,   3.9vw,  3.5rem);
  --t-lg:   clamp(1.5rem, 2.3vw,  2.1rem);
  --t-md:   clamp(1.15rem,1.5vw,  1.4rem);
  --t-bd:   clamp(1rem,   .48vw,  1.075rem);
  --t-sm:   .875rem;
  --t-xs:   .78125rem;
  --t-mi:   .6875rem;

  /* --- rig ----------------------------------------------------------- */
  --wrap:  1480px;
  --gut:   clamp(1.25rem, 4.4vw, 5rem);
  --rail:  clamp(0px, 7vw, 128px);   /* the drop-line margin */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4.5rem; --s7:6.5rem; --s8:9rem; --s9:12.5rem;
  --sec-y: clamp(5.5rem, 11vw, 12.5rem);

  /* --- motion -------------------------------------------------------- */
  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.66,0,.34,1);
  --spring:  cubic-bezier(.34,1.46,.64,1);
  --t-fast: 170ms; --t-mid: 340ms; --t-slow: 760ms;
}

/* The plate. Applied to the Specification wall and to the footer — the two
   places the page is allowed to go dark. Chartreuse becomes legible here, so
   --accent-tx stops stepping down to the deep green. */
.section--loam,
.foot{
  --bg:        var(--loam);
  --surface:   var(--loam-2);
  --surface-2: var(--loam-1);
  --fg:        var(--prill);
  --fg-2:      #A6AC9E;
  --fg-3:      #7B8378;
  --fg-4:      #545C51;
  --rule:      var(--line-d);
  --rule-soft: var(--line-dd);
  --accent:    var(--nitro);
  --accent-tx: var(--nitro);
  --accent-on: #0A100D;
  --bad:       #E8734A;

  --e1: 0 1px 2px rgba(0,0,0,.45);
  --e2: 0 18px 44px -18px rgba(0,0,0,.66);
  --e3: 0 48px 110px -34px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-bd);font-weight:400;
  line-height:1.66;letter-spacing:.002em;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}
::selection{background:var(--nitro);color:#0A100D}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.skip{
  position:fixed;left:1rem;top:-120px;z-index:9999;padding:.8rem 1.2rem;
  background:var(--nitro-md);color:#FFFFFF;font-weight:700;font-size:var(--t-sm);
  border-radius:999px;transition:top var(--t-mid) var(--ease);
}
.skip:focus{top:1rem}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------- FIXED OVERLAYS */
/* Tooth. Held under 5% so it reads as stock, never as a filter. */
.grain{
  position:fixed;inset:-140%;z-index:9000;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainDrift 8s steps(7) infinite;
}
@keyframes grainDrift{
  0%{transform:translate(0,0)}   14%{transform:translate(-3%,-4%)}
  28%{transform:translate(-7%,3%)} 42%{transform:translate(4%,-6%)}
  57%{transform:translate(-2%,6%)} 71%{transform:translate(6%,2%)}
  85%{transform:translate(-5%,-2%)} 100%{transform:translate(0,0)}
}

/* Ambient field. Three slow chlorophyll blooms — the only always-on motion
   on the page, and slow enough to read as light rather than as animation. */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field span{position:absolute;border-radius:50%;filter:blur(130px);will-change:transform}
.field span:nth-child(1){width:56vw;height:56vw;left:-16vw;top:-14vw;opacity:.16;
  background:radial-gradient(circle,rgba(168,207,58,.42),transparent 68%);
  animation:bloom1 30s var(--ease-io) infinite alternate}
.field span:nth-child(2){width:46vw;height:46vw;right:-14vw;top:38vh;opacity:.13;
  background:radial-gradient(circle,rgba(199,158,74,.36),transparent 70%);
  animation:bloom2 37s var(--ease-io) infinite alternate}
.field span:nth-child(3){width:40vw;height:40vw;left:28vw;bottom:-18vw;opacity:.14;
  background:radial-gradient(circle,rgba(127,162,41,.55),transparent 72%);
  animation:bloom3 33s var(--ease-io) infinite alternate}
@keyframes bloom1{to{transform:translate(11vw,9vh) scale(1.16)}}
@keyframes bloom2{to{transform:translate(-9vw,-11vh) scale(1.22)}}
@keyframes bloom3{to{transform:translate(7vw,-8vh) scale(1.1)}}

/* Scroll progress — a hairline that fills, plus a ring in the FAB. */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:8000;pointer-events:none;background:transparent}
.progress i{display:block;height:100%;width:0;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--nitro-lo),var(--nitro-md),var(--nitro));
  box-shadow:0 0 14px rgba(var(--nitro-rgb),.45)}

/* Custom cursor. Pointer devices only; it is a prill, and it swells on
   anything interactive rather than swapping to a different shape. */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity var(--t-mid)}
.cur{width:34px;height:34px;border:1px solid rgba(246,243,234,.65);
  transition:width var(--t-mid) var(--spring),height var(--t-mid) var(--spring),
             opacity var(--t-mid),background var(--t-mid),border-color var(--t-mid)}
.cur-dot{width:5px;height:5px;background:var(--prill)}
body.cur-on .cur,body.cur-on .cur-dot{opacity:1}
body.cur-hot .cur{width:70px;height:70px;background:rgba(168,207,58,.20);border-color:transparent}
body.cur-hot .cur-dot{opacity:0}
.cur__lbl{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--prill);opacity:0;transition:opacity var(--t-fast)}
body.cur-hot .cur__lbl{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none}}

/* ----------------------------------------------------------------- SPLASH */
.splash{position:fixed;inset:0;z-index:9600;background:var(--bone);
  display:grid;place-items:center;gap:0}
.splash__in{display:grid;justify-items:center;gap:1.6rem}
.splash__mark{width:88px;height:88px}
.splash__mark circle,.splash__mark path,.splash__mark line{
  fill:none;stroke:var(--nitro-md);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.splash__cap{font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.34em;
  text-transform:uppercase;color:var(--fg-3);opacity:0}
.splash__bar{width:132px;height:1px;background:var(--line-l);overflow:hidden}
.splash__bar i{display:block;height:100%;width:0;background:var(--nitro-md)}
.curtain{position:fixed;inset:0;z-index:9550;background:var(--paper);
  transform:translateY(0);will-change:transform}

/* ------------------------------------------------------------------- SHELL */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
main{position:relative;z-index:1}

.sec{position:relative;padding-block:var(--sec-y);background:var(--bg);color:var(--fg)}
.sec--flush{padding-block:0}
.sec--tight{padding-block:clamp(4rem,7vw,7rem)}

/* The drop line. A hairline running the height of a section with the index
   hung on it — the prilling tower, and the page's alignment spine. */
.drop{position:absolute;left:var(--gut);top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 8%,var(--rule) 92%,transparent);
  opacity:.9;pointer-events:none}
.drop::after{content:'';position:absolute;left:50%;top:0;width:7px;height:7px;
  margin-left:-3.5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
  animation:fall 5.5s var(--ease-io) infinite}
@keyframes fall{0%{top:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:96%;opacity:0}}
@media (max-width:960px){.drop{display:none}}

/* Section head — eyebrow on the rail, title in the wide column. */
.sec__head{display:grid;grid-template-columns:var(--rail) 1fr;gap:0 clamp(1.5rem,3vw,3.5rem);
  margin-bottom:clamp(2.6rem,5vw,5rem)}
.sec__head--split{grid-template-columns:var(--rail) minmax(0,1.15fr) minmax(0,.85fr);align-items:end}
@media (max-width:1040px){
  .sec__head,.sec__head--split{grid-template-columns:1fr;gap:1.1rem}
}

.eyebrow{display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:var(--t-mi);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.eyebrow .num{display:grid;place-items:center;width:2.05rem;height:2.05rem;flex:none;
  border:1px solid var(--rule);border-radius:50%;color:var(--accent-tx);
  font-size:var(--t-mi);letter-spacing:.02em}
.eyebrow--accent{color:var(--accent-tx)}

.sec-title{font-family:var(--f-display);font-weight:400;font-size:var(--t-xxl);
  line-height:.98;letter-spacing:-.018em;text-wrap:balance;color:var(--fg)}
.sec-title em{font-style:italic;color:var(--accent-tx)}
.sec-title .thin{color:var(--fg-3)}
.sec-lead{max-width:52ch;color:var(--fg-2);font-size:var(--t-md);line-height:1.6}
.sec-note{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-3);line-height:1.7}

.h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-lg);
  line-height:1.08;letter-spacing:-.012em;color:var(--fg)}
.h4{font-size:var(--t-md);font-weight:600;letter-spacing:-.008em;line-height:1.25;color:var(--fg)}
.body{color:var(--fg-2);line-height:1.72}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.cap{font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3)}

/* Section separator — a hairline that carries a prill at its centre. */
.rule{position:relative;height:1px;background:var(--rule-soft);border:0;margin:0}
.rule::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;
  translate:-50% -50%;border-radius:50%;background:var(--accent);opacity:.85}

/* -------------------------------------------------------------- NAVIGATION */
.nav{position:fixed;inset:0 0 auto;z-index:7000;
  transition:background var(--t-mid) var(--ease),backdrop-filter var(--t-mid),
             border-color var(--t-mid),padding var(--t-mid) var(--ease);
  border-bottom:1px solid transparent;padding-block:clamp(.85rem,1.5vw,1.35rem)}
.nav.is-solid{background:color-mix(in srgb,var(--bone) 84%,transparent);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-l);padding-block:.7rem}
.nav__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}

.brand{display:inline-flex;align-items:center;gap:.72rem;flex:none}
.brand__mark{width:34px;height:34px;flex:none;transition:transform var(--t-mid) var(--spring)}
.brand:hover .brand__mark{transform:rotate(-16deg)}
.brand__mark circle,.brand__mark path{fill:none;stroke:var(--accent);stroke-width:1.5}
.brand__mark .fillp{fill:var(--accent);stroke:none}
.brand__tx{display:grid;line-height:1}
.brand__tx b{font-family:var(--f-display);font-weight:400;font-size:1.28rem;letter-spacing:-.01em;color:var(--fg)}
.brand__tx s{text-decoration:none;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3);margin-top:.24rem}

.nav__links{display:flex;align-items:center;gap:clamp(.4rem,1.3vw,1.35rem);margin-left:auto}
.nav__links a{position:relative;padding:.5rem .1rem;font-size:var(--t-xs);font-weight:500;
  letter-spacing:.014em;color:var(--fg-2);transition:color var(--t-fast)}
.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:.16rem;height:1px;
  background:var(--accent);transition:right var(--t-mid) var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--fg)}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}
@media (max-width:1120px){.nav__links{display:none}}

.burger{display:none;width:42px;height:42px;margin-left:auto;border:1px solid var(--rule);
  border-radius:50%;place-items:center;transition:border-color var(--t-fast),background var(--t-fast)}
.burger:hover{border-color:var(--accent);background:rgba(var(--nitro-rgb),.12)}
.burger i{display:block;width:15px;height:1.5px;background:var(--fg);border-radius:2px;
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast)}
.burger i+i{margin-top:4px}
body.menu-open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width:1120px){.burger{display:grid}}

/* Drawer — slides from the right, links stagger in behind their own masks. */
.drawer{position:fixed;inset:0 0 0 auto;width:min(440px,92vw);z-index:7500;
  background:var(--paper);border-left:1px solid var(--rule);
  transform:translateX(101%);transition:transform var(--t-slow) var(--ease);
  display:flex;flex-direction:column;padding:clamp(5.5rem,10vw,7rem) clamp(1.6rem,5vw,2.75rem) 2.5rem;
  overflow-y:auto}
body.menu-open .drawer{transform:translateX(0)}
.scrim{position:fixed;inset:0;z-index:7400;background:rgba(16,23,17,.46);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity var(--t-mid),visibility var(--t-mid)}
body.menu-open .scrim{opacity:1;visibility:visible}
.drawer__nav{display:grid;gap:.15rem}
.drawer__nav a{display:flex;align-items:baseline;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--f-display);font-size:1.9rem;line-height:1.1;color:var(--fg);
  opacity:0;transform:translateY(-16px);transition:color var(--t-fast)}
body.menu-open .drawer__nav a{animation:dropIn .5s var(--ease) forwards;
  animation-delay:calc(var(--i)*58ms + 130ms)}
@keyframes dropIn{to{opacity:1;transform:translateY(0)}}
.drawer__nav a:hover{color:var(--accent-tx)}
.drawer__nav em{font-family:var(--f-mono);font-style:normal;font-size:var(--t-mi);
  letter-spacing:.16em;color:var(--fg-4)}
.drawer__foot{margin-top:auto;padding-top:2.5rem;display:grid;gap:.5rem}
.drawer__foot a{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--fg-2)}
.drawer__foot a:hover{color:var(--accent-tx)}

/* ---------------------------------------------------------------- BUTTONS */
.btn{position:relative;display:inline-flex;align-items:center;gap:.72rem;
  padding:.94rem 1.6rem;border-radius:999px;overflow:hidden;
  font-size:var(--t-sm);font-weight:650;letter-spacing:.006em;white-space:nowrap;
  transition:transform var(--t-mid) var(--spring),background var(--t-mid),
             color var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid);
  will-change:transform}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--t-mid) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.966)}

/* Shine sweep — one pass on hover, never looping. */
.btn::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.34) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .78s var(--ease)}
.btn:hover::before{transform:translateX(130%)}

.btn--primary{background:var(--nitro);color:#0A100D;
  box-shadow:0 12px 34px -14px rgba(var(--nitro-rgb),.72)}
.btn--primary:hover{background:var(--nitro-hi);box-shadow:0 18px 46px -14px rgba(var(--nitro-rgb),.9)}

.btn--ghost{border:1px solid var(--rule);color:var(--fg)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-tx);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}

.btn--solid{background:var(--fg);color:var(--bg)}
.btn--solid:hover{background:var(--accent);color:var(--accent-on)}

/* Animated underline link. The rule draws from the left, the arrow nudges. */
.lnk{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-tx);padding-bottom:.3rem}
.lnk::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right var(--t-mid) var(--ease)}
.lnk:hover::after{right:0}
.lnk svg{width:12px;height:12px;transition:transform var(--t-mid) var(--ease)}
.lnk:hover svg{transform:translate(3px,-3px)}

/* ------------------------------------------------------------------ CHIPS */
.chip{display:inline-flex;align-items:center;gap:.44rem;padding:.36rem .78rem;
  border:1px solid var(--rule);border-radius:999px;
  font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.chip:hover{border-color:var(--accent);color:var(--accent-tx)}
.chip__dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.chip--solid{background:var(--accent-tx);border-color:var(--accent-tx);color:var(--bg);font-weight:600}
.chip--solid:hover{color:var(--bg)}

/* Pending. A dashed outline and a hollow prill: this figure is not published
   because it is not confirmed. It must never look like a value. */
.chip--pending{border-style:dashed;border-color:var(--fg-4);color:var(--fg-3);
  text-transform:none;letter-spacing:.04em;cursor:help}
.chip--pending:hover{border-color:var(--fg-3);color:var(--fg-2)}
.chip--pending .chip__dot{background:none;border:1px solid currentColor}

/* ------------------------------------------------------------------- HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:clamp(7rem,12.5vh,9.4rem) clamp(2.2rem,4.5vh,3.8rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,.66fr);
  gap:0 clamp(1.5rem,3.4vw,4rem);align-items:end;width:100%}
@media (max-width:1180px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
}

.hero__rail{align-self:stretch;position:relative;display:none}
@media (min-width:1181px){.hero__rail{display:block}}
.hero__rail::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 22%,var(--rule))}
.hero__rail span{position:absolute;left:0;top:0;transform-origin:0 0;
  transform:rotate(90deg) translateY(-1.15rem);white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.36em;
  text-transform:uppercase;color:var(--fg-4)}

.hero__eyebrow{margin-bottom:clamp(1.2rem,2.4vw,2rem);opacity:0}
.hero__eyebrow .num{border-color:var(--accent);color:var(--accent-tx)}

/* Display headline. Word masks so the load reveal can drop each word from
   behind its own edge — the prill falling out of the tower. */
.hero__h1{font-family:var(--f-display);font-weight:400;font-size:var(--t-mega);
  line-height:.86;letter-spacing:-.035em;color:var(--fg);margin:0}
.hero__h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero__h1 .wd{display:inline-block;will-change:transform}
.hero__h1 em{font-style:italic;color:var(--accent-tx)}

/* N46 set as a struck badge rather than as running text — it is the grade,
   and it is the single thing a buyer scans for. */
.grade{display:inline-flex;align-items:center;gap:.5rem;vertical-align:middle;
  margin-left:.28em;padding:.3em .62em .34em;border:1.5px solid var(--accent);
  border-radius:999px;font-family:var(--f-mono);font-size:.24em;font-weight:500;
  letter-spacing:.08em;color:var(--accent-tx);translate:0 -.28em}

.hero__sub{margin-top:clamp(1.2rem,2.2vw,1.85rem);max-width:56ch;
  font-size:var(--t-md);line-height:1.6;color:var(--fg-2);opacity:0}
.hero__acts{margin-top:clamp(1.5rem,2.5vw,2.15rem);display:flex;flex-wrap:wrap;gap:.85rem;opacity:0}

/* Hero ticks — the four figures a buyer reads first. */
.hero__ticks{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:clamp(1.6rem,2.8vw,2.4rem)}
.tick{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1rem;
  padding:.76rem 0;border-bottom:1px solid var(--rule-soft);opacity:0}
.tick s{text-decoration:none;font-family:var(--f-mono);font-size:var(--t-mi);
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.tick b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,2.2vw,2.05rem);
  line-height:1;color:var(--fg);letter-spacing:-.02em}
.tick b i{font-style:normal;font-family:var(--f-mono);font-size:.5em;color:var(--accent-tx);
  letter-spacing:.04em;margin-left:.22em}

/* Hero media — the prill pile, masked into a circle. The mask IS the motif:
   the material's own form, cut to its own shape. */
.hero__media{position:relative;align-self:center;justify-self:end;
  width:min(100%,clamp(280px,30vw,430px))}
@media (max-width:1180px){.hero__media{max-width:420px}}
.prillbox{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),
             inset 0 -30px 70px -30px rgba(16,23,17,.22),
             0 40px 90px -38px rgba(16,23,17,.34)}
.prillbox img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  filter:contrast(1.03) saturate(.55);will-change:transform}
/* Duotone wash, so the bone product plate sits in the loam palette. */
.prillbox::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.34),transparent 54%),
             radial-gradient(circle at 74% 82%,rgba(16,23,17,.20),transparent 62%)}
/* Ring caption — the grade, set on the circle's own edge. */
.prillbox__ring{position:absolute;inset:-22px;pointer-events:none;z-index:2}
.prillbox__ring circle{fill:none;stroke:var(--rule);stroke-width:1;
  stroke-dasharray:3 9;animation:spin 64s linear infinite}
/* One chartreuse arc on the rim — the accent touches the plate, not the
   product, so the material keeps its own colour. */
.prillbox__arc{position:absolute;inset:-22px;pointer-events:none;overflow:visible;z-index:2}
.prillbox__arc circle{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:78 532;transform:rotate(-124deg);transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.prillbox__ring{animation:none}
.prillbox__ring svg{width:100%;height:100%;overflow:visible}
.prillbox__ring text{font-family:var(--f-mono);font-size:7.4px;letter-spacing:.30em;
  fill:var(--fg-4);text-transform:uppercase}

.cue{position:absolute;left:var(--gut);bottom:1.6rem;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-4);opacity:0}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:cueFall 2.2s var(--ease-io) infinite}
@keyframes cueFall{0%{transform:scaleY(0);transform-origin:0 0}
  45%{transform:scaleY(1);transform-origin:0 0}
  55%{transform:scaleY(1);transform-origin:0 100%}
  100%{transform:scaleY(0);transform-origin:0 100%}}
@media (max-width:1180px){.cue{display:none}}

/* ------------------------------------------------------------ REVEAL BASE */
/* Everything falls. The page's motion grammar is downward, once. */
.rv{opacity:0;transform:translateY(-22px);will-change:transform,opacity}
.rv-up{opacity:0;transform:translateY(30px)}
.is-still .rv,.is-still .rv-up,.no-motion .rv,.no-motion .rv-up{opacity:1!important;transform:none!important}

/* ------------------------------------------------------ 01 · THE MATERIAL */
.matter{display:grid;grid-template-columns:var(--rail) minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,4.5rem)}
@media (max-width:1040px){.matter{grid-template-columns:1fr}}
.matter__body p+p{margin-top:1.15rem}
.matter__body .lead-p{font-family:var(--f-display);font-size:var(--t-lg);line-height:1.28;
  color:var(--fg);letter-spacing:-.008em}

/* Pull quote, placed low-left as a counterweight to the NPK column. */
.pq{position:relative;margin-top:clamp(2.2rem,4vw,3.4rem);padding-left:clamp(1.4rem,2.6vw,2.4rem);
  border-left:1px solid var(--accent)}
.pq p{font-family:var(--f-display);font-style:italic;font-size:var(--t-lg);
  line-height:1.24;color:var(--fg);letter-spacing:-.01em}
.pq cite{display:block;margin-top:.9rem;font-family:var(--f-mono);font-style:normal;
  font-size:var(--t-mi);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* NPK split. Three columns filled to the nutrient value — the one chart on
   the page, and it draws its bars on entry. */
.npk{border:1px solid var(--rule);border-radius:20px;background:var(--surface);
  padding:clamp(1.5rem,2.6vw,2.2rem);box-shadow:var(--e2)}
.npk__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--rule-soft)}
.npk__hd b{font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.1em;color:var(--fg)}
.npk__bars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem);
  margin-top:1.6rem}
.npk__b{display:grid;justify-items:center;gap:.8rem}
.npk__b i{position:relative;display:block;width:100%;height:clamp(130px,17vw,190px);
  border:1px solid var(--rule);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 4%,transparent)}
.npk__b i::after{content:'';position:absolute;inset:auto 0 0;height:0;
  background:linear-gradient(180deg,var(--nitro),var(--nitro-md));
  box-shadow:0 0 18px rgba(var(--nitro-rgb),.4);
  transition:height 1.15s var(--ease)}
.is-in .npk__b i::after,.is-still .npk__b i::after{height:var(--v)}
.npk__b em{font-style:normal;font-family:var(--f-display);font-size:var(--t-lg);color:var(--fg)}
.npk__b s{text-decoration:none;font-family:var(--f-mono);font-size:var(--t-mi);
  letter-spacing:.2em;color:var(--fg-3)}
.npk__ft{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--rule-soft);
  font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.06em;color:var(--fg-3);line-height:1.7}

/* ---------------------------------------------------------- 02 · THE FORMS */
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1rem,1.7vw,1.5rem)}
.form-c{position:relative;display:flex;flex-direction:column;gap:1.3rem;
  padding:clamp(1.5rem,2.4vw,2rem);border:1px solid var(--rule);border-radius:22px;
  background:var(--surface);overflow:hidden;
  transition:transform var(--t-mid) var(--ease),border-color var(--t-mid),box-shadow var(--t-mid)}
.form-c::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
             rgba(var(--nitro-rgb),.16),transparent 62%);
  transition:opacity var(--t-mid)}
.form-c:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 46%,var(--rule));
  box-shadow:var(--e2)}
.form-c:hover::before{opacity:1}
.form-c__ix{font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.2em;color:var(--fg-4)}
.form-c__vis{flex:0 0 auto;height:112px;display:grid;place-items:center;overflow:hidden}
.form-c__vis svg{width:100%;height:100%;overflow:hidden}
.form-c__vis [stroke]{stroke:var(--accent);fill:none;stroke-width:1.2;
  vector-effect:non-scaling-stroke}
.form-c__vis .sld{fill:var(--accent);stroke:none;opacity:.16}
.form-c h3{font-family:var(--f-display);font-size:var(--t-lg);line-height:1;color:var(--fg)}
.form-c__spec{display:grid;gap:.05rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule-soft)}

/* Dot leader — the ledger device this catalogue is built on. Every spec row
   on the site uses it, on both grounds. */
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;padding:.5rem 0;
  font-family:var(--f-mono);font-size:var(--t-xs)}
.row s{text-decoration:none;color:var(--fg-3);white-space:nowrap;letter-spacing:.02em}
.row i{flex:1 1 2rem;height:1px;margin-bottom:.24em;
  background-image:radial-gradient(circle,var(--fg-4) .8px,transparent .9px);
  background-size:6px 1px;background-repeat:repeat-x;opacity:.7}
.row b{font-weight:500;color:var(--fg);letter-spacing:.01em;margin-left:auto;
  text-align:right;text-wrap:balance}
.row b.pending{font-weight:400;color:var(--fg-3);border-bottom:1px dashed var(--fg-4);cursor:help}

/* --------------------------------------------------- 03 · APPLICATIONS */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(1rem,1.7vw,1.5rem)}
.app{position:relative;padding:clamp(1.7rem,2.8vw,2.4rem);border-radius:24px;
  border:1px solid var(--rule);background:var(--surface);overflow:hidden;
  transition:transform var(--t-mid) var(--ease),border-color var(--t-mid),box-shadow var(--t-mid)}
.app:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--accent) 50%,var(--rule));
  box-shadow:var(--e3)}
/* Border glow on hover — a conic sweep clipped to the border box. */
.app::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;opacity:0;
  background:conic-gradient(from var(--a,0deg),transparent 0 62%,var(--accent) 78%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--t-mid);pointer-events:none}
.app:hover::after{opacity:1;animation:sweep 2.6s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sweep{to{--a:360deg}}
.app__n{font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.2em;color:var(--accent-tx)}
.app__ic{width:52px;height:52px;margin:1.4rem 0 1.6rem;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:50%;
  transition:border-color var(--t-mid),background var(--t-mid),transform var(--t-mid) var(--spring)}
.app:hover .app__ic{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  transform:rotate(-10deg) scale(1.06)}
.app__ic svg{width:24px;height:24px}
.app__ic [stroke]{stroke:var(--accent);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.app h3{margin-bottom:.7rem}
.app p{color:var(--fg-2);font-size:var(--t-sm);line-height:1.66}

/* --------------------------------------------------------- 04 · ORIGINS */
.orig{display:grid;grid-template-columns:var(--rail) minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:start}
@media (max-width:1040px){.orig{grid-template-columns:1fr}}

/* Origin marquee — three origins, running. Pauses on hover so it can be read. */
.ticker{position:relative;overflow:hidden;
  border-block:1px solid var(--rule);padding-block:clamp(1.1rem,2vw,1.6rem);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__t{display:flex;gap:0;width:max-content;animation:run 34s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.ticker__t span{display:inline-flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);
  padding-inline:clamp(.7rem,1.5vw,1.5rem);
  font-family:var(--f-display);font-size:clamp(1.6rem,3.4vw,3rem);line-height:1;
  color:var(--fg);letter-spacing:-.018em;white-space:nowrap}
.ticker__t span::after{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--accent);flex:none}
.ticker__t span:nth-child(even){color:var(--fg-3);font-style:italic}

/* Ports — a stacked ledger. The row expands its note on hover/focus. */
.ports{display:grid;border-top:1px solid var(--rule)}
.port{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:clamp(1rem,1.8vw,1.5rem) 0;border-bottom:1px solid var(--rule-soft);
  transition:padding-left var(--t-mid) var(--ease)}
.port:hover{padding-left:.85rem}
.port__ix{font-family:var(--f-mono);font-size:var(--t-mi);color:var(--fg-4);letter-spacing:.14em}
.port__nm{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.port__nm b{font-family:var(--f-display);font-size:var(--t-lg);font-weight:400;
  line-height:1.1;color:var(--fg);transition:color var(--t-fast)}
.port:hover .port__nm b{color:var(--accent-tx)}
.port__nm s{text-decoration:none;font-family:var(--f-mono);font-size:var(--t-mi);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.port__note{grid-column:2;font-size:var(--t-sm);color:var(--fg-2);line-height:1.6;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--t-mid) var(--ease),opacity var(--t-mid),margin var(--t-mid)}
.port:hover .port__note,.port:focus-within .port__note{max-height:6rem;opacity:1;margin-top:.5rem}
.port__sea{font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
@media (max-width:640px){
  .port{grid-template-columns:auto 1fr}
  .port__sea{grid-column:2;grid-row:2}
  .port__note{grid-column:1/-1}
}

/* ------------------------------------------------- 05 · SPECIFICATION WALL */
/* The inversion. Bone ground, assay sheets laid on it. The boldness is
   entirely spent here, so nothing else on the page needs to shout. */
.section--loam{background:var(--bg);color:var(--fg)}
.section--loam .drop{opacity:.9}

/* Chamfered top edge so the wall arrives as a plate rather than a band. */
.wall{position:relative}
.wall::before,.wall::after{content:'';position:absolute;left:0;right:0;height:clamp(30px,5vw,64px);
  background:var(--loam);pointer-events:none}
.wall::before{top:calc(-1 * clamp(30px,5vw,64px));
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.wall::after{bottom:calc(-1 * clamp(30px,5vw,64px));
  clip-path:polygon(0 0,100% 0,0 100%)}

.assays{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(1rem,1.8vw,1.6rem)}
.assay{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--rule);border-radius:20px;overflow:hidden;
  box-shadow:var(--e1);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid)}
.assay:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.assay__hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.assay__hd b{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg)}
.assay__bd{padding:.6rem 1.4rem 1.4rem}

/* Published analysis table. Sticky head, highlighted row for the one figure
   that is actually confirmed. */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:20px;background:var(--surface)}
.tbl{min-width:640px;font-size:var(--t-sm)}
.tbl thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);
  padding:.95rem 1.15rem;text-align:left;border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);font-weight:500;white-space:nowrap}
.tbl tbody td{padding:.95rem 1.15rem;border-bottom:1px solid var(--rule-soft);color:var(--fg-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--t-fast)}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tbl td:first-child{color:var(--fg);font-weight:600}
.tbl .num{font-family:var(--f-mono);color:var(--fg);font-weight:500}
/* The confirmed row carries a nitrogen edge — the site's one published assay. */
.tbl tr.is-published td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tbl tr.is-published .num{color:var(--accent-tx);font-weight:600}

/* Incoterms matrix. Party cells are colour-coded by who bears the cost. */
.terms td.p{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em}
.terms td.p[data-p="Seller"]{color:var(--accent-tx);font-weight:600}
.terms td.p[data-p="Buyer"]{color:var(--fg-3)}
.terms td:first-child b{font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.08em}
.terms td:first-child s{display:block;text-decoration:none;font-size:var(--t-mi);
  color:var(--fg-3);font-weight:400;margin-top:.2rem}

.packs{display:flex;flex-wrap:wrap;gap:.6rem}

/* ------------------------------------------------------- 06 · LOGISTICS */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:24px;overflow:hidden}
.mode{padding:clamp(1.6rem,2.6vw,2.2rem);background:var(--bg);
  transition:background var(--t-mid)}
.mode:hover{background:var(--surface)}
.mode__ic{width:100%;height:74px;margin-bottom:1.4rem}
.mode__ic svg{width:100%;height:100%;overflow:visible}
.mode__ic [stroke],.mode__ic path{stroke:var(--fg-3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--t-mid),stroke-dashoffset .9s var(--ease)}
.mode:hover .mode__ic [stroke],.mode:hover .mode__ic path{stroke:var(--accent)}
.mode h3{margin-bottom:.6rem}
.mode p{font-size:var(--t-sm);color:var(--fg-2);line-height:1.66}

/* Documentation set — accordion. Real content, so it earns the component. */
.acc{border-top:1px solid var(--rule)}
.acc__i{border-bottom:1px solid var(--rule-soft)}
.acc__b{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem;
  padding:clamp(1.05rem,1.9vw,1.5rem) 0;text-align:left;
  transition:padding-left var(--t-mid) var(--ease)}
.acc__b:hover{padding-left:.8rem}
.acc__ix{font-family:var(--f-mono);font-size:var(--t-mi);color:var(--fg-4);letter-spacing:.14em}
.acc__t{font-family:var(--f-display);font-size:var(--t-lg);font-weight:400;line-height:1.15;
  color:var(--fg);transition:color var(--t-fast)}
.acc__b:hover .acc__t,.acc__i.is-open .acc__t{color:var(--accent-tx)}
/* Plus → minus. The vertical stroke retracts; the circle stays. */
.acc__ic{position:relative;width:34px;height:34px;flex:none;border:1px solid var(--rule);
  border-radius:50%;transition:border-color var(--t-mid),background var(--t-mid),transform var(--t-mid) var(--ease)}
.acc__i.is-open .acc__ic{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  transform:rotate(180deg)}
.acc__ic::before,.acc__ic::after{content:'';position:absolute;inset:50% 50%;translate:-50% -50%;
  background:var(--fg);transition:transform var(--t-mid) var(--ease),background var(--t-mid)}
.acc__ic::before{width:11px;height:1.5px}
.acc__ic::after{width:1.5px;height:11px}
.acc__i.is-open .acc__ic::after{transform:scaleY(0)}
.acc__i.is-open .acc__ic::before{background:var(--accent-tx)}
.acc__p{overflow:hidden;height:0;transition:height var(--t-mid) var(--ease)}
.acc__p div{padding:0 0 clamp(1.1rem,2vw,1.7rem) calc(1.1rem + 2.05rem);max-width:62ch;
  color:var(--fg-2);line-height:1.72}
@media (max-width:640px){.acc__p div{padding-left:0}}

/* ---------------------------------------------------------- 07 · ENQUIRY */
.enq{display:grid;grid-template-columns:var(--rail) minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:start}
@media (max-width:1040px){.enq{grid-template-columns:1fr}}

.reach{display:grid;gap:.15rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.reach a,.reach div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);
  transition:padding-left var(--t-mid) var(--ease)}
.reach a:hover{padding-left:.8rem}
.reach .ic{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--rule);
  border-radius:50%;transition:border-color var(--t-fast),background var(--t-fast)}
.reach a:hover .ic{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.reach .ic svg{width:16px;height:16px}
.reach .ic [stroke]{stroke:var(--fg-2);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.reach a:hover .ic [stroke]{stroke:var(--accent)}
.reach .tx{display:grid;gap:.16rem}
.reach .tx s{text-decoration:none;font-family:var(--f-mono);font-size:var(--t-mi);
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.reach .tx b{font-weight:600;color:var(--fg);font-size:var(--t-sm)}

/* Form. Floating labels, focus glow, inline validation, one success state. */
.formcard{position:relative;padding:clamp(1.6rem,3vw,2.6rem);border:1px solid var(--rule);
  border-radius:26px;background:var(--surface);box-shadow:var(--e2);overflow:hidden}
.formcard::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px circle at 90% -10%,rgba(var(--nitro-rgb),.14),transparent 60%)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem;position:relative}
.fgrid .full{grid-column:1/-1}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}

.fld{position:relative}
.fld input,.fld textarea,.fld select{width:100%;padding:1.5rem .95rem .58rem;
  background:color-mix(in srgb,var(--fg) 3.5%,transparent);
  border:1px solid var(--rule);border-radius:12px;font-size:var(--t-sm);color:var(--fg);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.fld textarea{min-height:118px;resize:vertical;line-height:1.6}
.fld select{appearance:none;cursor:pointer;padding-right:2.4rem}
.fld .caret{position:absolute;right:1rem;top:1.45rem;width:9px;height:9px;pointer-events:none;
  border-right:1.4px solid var(--fg-3);border-bottom:1.4px solid var(--fg-3);
  transform:rotate(45deg);transition:transform var(--t-mid) var(--ease),border-color var(--t-fast)}
.fld select:focus~.caret{transform:rotate(-135deg);border-color:var(--accent)}
.fld label{position:absolute;left:1rem;top:1.06rem;pointer-events:none;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.02em;color:var(--fg-3);
  transform-origin:0 50%;
  transition:transform var(--t-mid) var(--ease),color var(--t-fast)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.fld input:focus~label,.fld textarea:focus~label,.fld select:focus~label,
.fld input:not(:placeholder-shown)~label,.fld textarea:not(:placeholder-shown)~label,
.fld select.has-val~label{transform:translateY(-.72rem) scale(.82);color:var(--accent-tx)}
.fld .err{display:block;margin-top:.4rem;font-family:var(--f-mono);font-size:var(--t-mi);
  letter-spacing:.03em;color:var(--bad);opacity:0;max-height:0;overflow:hidden;
  transition:opacity var(--t-fast),max-height var(--t-fast)}
.fld.is-bad input,.fld.is-bad textarea,.fld.is-bad select{border-color:var(--bad);
  box-shadow:0 0 0 3px rgba(176,58,18,.16)}
.fld.is-bad .err{opacity:1;max-height:2.5rem}
.fld.is-bad{animation:shake .38s var(--ease-io)}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-4px)}0%,100%{transform:translateX(0)}}

/* Consent — a real checkbox, drawn. */
.check{display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;
  font-size:var(--t-xs);color:var(--fg-3);line-height:1.6}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{position:relative;width:20px;height:20px;flex:none;margin-top:.1rem;
  border:1px solid var(--rule);border-radius:6px;
  transition:border-color var(--t-fast),background var(--t-fast)}
.check .box svg{position:absolute;inset:2px;width:14px;height:14px}
.check .box path{fill:none;stroke:var(--bg);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset var(--t-mid) var(--ease)}
.check input:checked~.box{background:var(--accent-tx);border-color:var(--accent-tx)}
.check input:checked~.box path{stroke-dashoffset:0}
.check input:focus-visible~.box{outline:2px solid var(--accent);outline-offset:3px}

/* Submit → success. The button becomes the confirmation rather than being
   replaced by a banner somewhere else on the page. */
.sendbtn{position:relative;min-width:190px;justify-content:center}
.sendbtn .lbl,.sendbtn .spin,.sendbtn .done{transition:opacity var(--t-fast),transform var(--t-mid) var(--ease)}
.sendbtn .spin,.sendbtn .done{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.sendbtn .spin i{width:16px;height:16px;border:2px solid rgba(10,16,13,.28);
  border-top-color:#0A100D;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.sendbtn.is-busy .lbl{opacity:0}.sendbtn.is-busy .spin{opacity:1}
.sendbtn.is-done .lbl{opacity:0}.sendbtn.is-done .done{opacity:1}
.sendbtn.is-done{background:var(--nitro-hi)}
.sendbtn .done svg{width:18px;height:18px}
.sendbtn .done path{fill:none;stroke:#0A100D;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26}
.sendbtn.is-done .done path{animation:draw .5s var(--ease) forwards .1s}
@keyframes draw{to{stroke-dashoffset:0}}

/* Toast. Slides up, holds, leaves. */
.toast{position:fixed;left:50%;bottom:2rem;z-index:8500;translate:-50% 0;
  display:flex;align-items:center;gap:.8rem;padding:.9rem 1.3rem;
  background:var(--loam-3);border:1px solid var(--line-d);border-radius:999px;
  box-shadow:0 24px 60px -24px rgba(16,23,17,.5);font-size:var(--t-sm);color:var(--prill);
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity var(--t-mid),transform var(--t-mid) var(--spring)}
.toast.is-on{opacity:1;transform:translateY(0)}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--nitro);flex:none;
  box-shadow:0 0 0 4px rgba(var(--nitro-rgb),.2)}

/* ----------------------------------------------------------------- FOOTER */
.foot{position:relative;background:var(--bg);border-top:1px solid var(--rule);
  padding-top:clamp(3.5rem,6vw,6rem);color:var(--fg);z-index:1}
.foot__top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.6fr));
  gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(3rem,5vw,4.5rem)}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__top{grid-template-columns:1fr}}
.foot h4{font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:1.1rem;font-weight:500}
.foot__col ul{display:grid;gap:.62rem}
.foot__col a{font-size:var(--t-sm);color:var(--fg-2);transition:color var(--t-fast)}
.foot__col a:hover{color:var(--accent-tx)}
.foot__blurb{max-width:38ch;color:var(--fg-2);font-size:var(--t-sm);margin-top:1.1rem;line-height:1.7}

/* Newsletter — inline, one field, one control. */
.sub{display:flex;gap:.5rem;margin-top:1.4rem;max-width:340px}
.sub input{flex:1;padding:.78rem 1rem;background:color-mix(in srgb,var(--fg) 6%,transparent);
  border:1px solid var(--rule);border-radius:999px;font-size:var(--t-xs);color:var(--fg);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.sub input::placeholder{color:var(--fg-4)}
.sub input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--nitro-rgb),.16)}
.sub button{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--accent-on);transition:transform var(--t-mid) var(--spring),background var(--t-mid)}
.sub button:hover{transform:translateX(3px);background:var(--nitro-hi)}
.sub button svg{width:15px;height:15px}

/* Oversized wordmark. The page signs off at display scale — the only place
   the type runs edge to edge. */
.foot__mark{container-type:inline-size;border-top:1px solid var(--rule-soft);padding-top:clamp(1.5rem,3vw,2.5rem)}
.foot__wordmark{display:block;font-family:var(--f-display);font-weight:400;
  font-size:19.2cqw;line-height:.82;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px var(--rule);
  transition:-webkit-text-stroke-color var(--t-slow) var(--ease),color var(--t-slow) var(--ease)}
.foot__mark:hover .foot__wordmark{-webkit-text-stroke-color:var(--accent);
  color:rgba(168,207,58,.045)}
.foot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:clamp(1.4rem,2.5vw,2rem);
  font-family:var(--f-mono);font-size:var(--t-mi);letter-spacing:.09em;color:var(--fg-4)}
.foot__bar a:hover{color:var(--accent-tx)}
.foot__bar nav{display:flex;flex-wrap:wrap;gap:1.3rem}

/* Back to top — a progress ring that fills as the page is read. */
.totop{position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:6500;
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-l);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--t-mid),visibility var(--t-mid),transform var(--t-mid) var(--spring),
             border-color var(--t-fast)}
.totop.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{border-color:var(--nitro-md)}
.totop svg.ring{position:absolute;inset:-1px;width:56px;height:56px;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke-width:1.5}
.totop .ring .bg{stroke:transparent}
.totop .ring .fg{stroke:var(--nitro-md);stroke-linecap:round;
  stroke-dasharray:169;stroke-dashoffset:169}
.totop .arw{width:15px;height:15px;transition:transform var(--t-mid) var(--ease)}
.totop:hover .arw{transform:translateY(-3px)}
.totop .arw path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- UTILITIES */
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}
.mt4{margin-top:2rem}.mt5{margin-top:3rem}.mt6{margin-top:4rem}
.stack-sm{display:grid;gap:.8rem}
.stack{display:grid;gap:1.4rem}
.flexrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.dim{color:var(--fg-3)}

/* An empty index circle becomes the prill itself — used where a numeral would
   only repeat the label beside it. */
.eyebrow .num:empty{position:relative}
.eyebrow .num:empty::after{content:'';position:absolute;inset:50% 50%;translate:-50% -50%;
  width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ------------------------------------------------- DROP-LINE ALIGNMENT FIX */
/* The drop line runs down the wrap's own left edge, so anything that starts
   flush there collides with it. Rail content hangs to the RIGHT of the line;
   the index prill is the one thing allowed to sit ON it. */
@media (min-width:961px){
  .sec__head .eyebrow,
  .matter  > div:first-child .eyebrow,
  .orig    > div:first-child .eyebrow,
  .enq     > div:first-child .eyebrow{ padding-left:1.5rem }

  .sec__head .eyebrow .num,
  .matter  .eyebrow .num,
  .orig    .eyebrow .num,
  .enq     .eyebrow .num{ margin-left:-2.53rem }

  /* The document indices sat under the line and read "0/01". */
  .acc__b{ padding-left:1.5rem }
  .acc__b:hover{ padding-left:2.3rem }
}

/* The wall's exit chamfer is painted below its own section, so the following
   section — also positioned — was covering it. Lift the wall one layer. */
.wall{ z-index:2 }

/* A pending value is a pending value wherever it appears, not only in a spec
   row — it must never be mistaken for a confirmed figure. */
b.pending,.pending{font-weight:400;color:var(--fg-3);
  border-bottom:1px dashed var(--fg-4);cursor:help}

/* Watchdog state — see the inline failsafe in <head>. Whatever went wrong,
   the page must end up readable. */
html.force-ready .splash,
html.force-ready .curtain{display:none!important}
html.force-ready .rv,
html.force-ready .rv-up{opacity:1!important;transform:none!important}

/* ============================================================ RESPONSIVE FIX
   Grid children default to min-width:auto, so a long line of body copy or a
   wide figure can push a "1fr" column past the viewport. Every grid on the
   page is content-bearing, so they all get an explicit floor. */
.hero__grid > *,
.matter > *,
.orig > *,
.enq > *,
.sec__head > *,
.forms > *,
.apps > *,
.assays > *,
.modes > *,
.foot__top > *{ min-width:0 }

/* Below the drawer breakpoint the header carries the brand and the burger
   only — the quotation CTA moves into the drawer, where it has room. */
@media (max-width:1120px){
  .nav__in > .btn{ display:none }
  .burger{ margin-left:auto }
}
.drawer__cta{ display:none }
@media (max-width:1120px){
  .drawer__cta{ display:inline-flex; margin-top:2rem; justify-content:center }
}

@media (max-width:760px){
  :root{
    --t-mega: clamp(2.9rem, 15vw, 4.4rem);
    --sec-y:  clamp(4rem, 13vw, 5.5rem);
  }
  .hero{ min-height:auto; padding-block:7.5rem 3.5rem }
  .hero__sub{ font-size:1.02rem }
  .hero__media{ width:min(100%,320px); justify-self:start; margin-top:.5rem }
  .tick b{ font-size:1.45rem }
  .sec-title{ letter-spacing:-.012em }
  .pq{ padding-left:1.1rem }
  .npk__b i{ height:112px }
  /* The card grids are single-column here, so the tilt transform only
     introduces jitter on touch. */
  .form-c:hover,.app:hover,.assay:hover{ transform:none }
}

@media (max-width:420px){
  .brand__tx b{ font-size:1.12rem }
  .brand__tx s{ font-size:8px; letter-spacing:.2em }
  .btn{ padding:.85rem 1.25rem; font-size:.82rem }
  .foot__bar{ justify-content:flex-start }
}

/* The eyebrow and the spec-row values are set nowrap so they read as single
   typographic units on desktop. On a narrow viewport that turns into real
   horizontal overflow — which drags the whole page's scroll width with it —
   so below the tablet breakpoint they are allowed to break. */
@media (max-width:760px){
  .eyebrow{ white-space:normal; letter-spacing:.18em; row-gap:.35rem; flex-wrap:wrap }
  .hero__eyebrow{ align-items:flex-start }
  .row s{ white-space:normal }
  .port__nm{ row-gap:.2rem }
}