/* =============================================================
   SEED — "The core, swapped" (Labs cinematic) + Labs components.
   Pinned scroll set piece: a SCIP wall panel explodes to its five
   layers, then its EPS core is swapped for SEED's light straw clay
   core (UNIDO GCIP finalist). Same engine + register as the
   Sustainability "Fifty years in one scroll" scene; maroon accent.
   Requires GSAP + ScrollTrigger; degrades to a static stacked
   layout without JS / with prefers-reduced-motion.
   ============================================================= */

.coreswap{ --sigb:#c0685a; background:var(--ink); color:var(--paper); border-top:1px solid var(--ink); }
.cs-viewport{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vh,56px) clamp(20px,5vw,64px); max-width:1280px; margin-inline:auto; box-sizing:border-box; }

.cs-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(18px,3vh,34px); }
.cs-head .eyebrow{ color:color-mix(in oklch, var(--paper) 66%, transparent); }
.cs-head .eyebrow::before{ background:var(--sigb); }
.cs-head h2{ color:var(--paper); font-size:clamp(24px,3vw,40px); margin-top:12px; }
.cs-count{ font:600 clamp(28px,3.4vw,46px)/1 var(--mono); letter-spacing:0.04em; color:var(--paper); font-variant-numeric:tabular-nums; text-align:right; }
.cs-count .cs-cap{ display:block; font-size:10.5px; letter-spacing:0.16em; margin-top:8px; color:color-mix(in oklch, var(--paper) 55%, transparent); text-transform:uppercase; }

.cs-body{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr); gap:clamp(20px,3vw,44px); align-items:stretch; }
.cs-scene-wrap{ border:1px solid color-mix(in oklch, var(--paper) 16%, transparent); background:color-mix(in oklch, var(--paper) 4%, transparent); position:relative; }
.cs-scene-wrap svg{ display:block; width:100%; height:auto; }

/* narrative panel */
.cs-panel{ position:relative; display:flex; flex-direction:column; justify-content:center; min-height:100%; }
.cs-step{ position:absolute; inset:auto 0; opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:none; }
.cs-step.is-active{ opacity:1; transform:none; pointer-events:auto; }
.cs-step .ch{ font:600 11px/1 var(--mono); letter-spacing:0.16em; text-transform:uppercase; color:var(--sigb); }
.cs-step h3{ margin:14px 0 12px; color:var(--paper); font-size:clamp(20px,2.2vw,27px); }
.cs-step p{ color:color-mix(in oklch, var(--paper) 72%, transparent); font-size:15px; line-height:1.65; }

/* progress scrubber */
.cs-scrub{ margin-top:clamp(18px,3vh,30px); }
.cs-track{ position:relative; height:34px; border-bottom:1px solid color-mix(in oklch, var(--paper) 22%, transparent);
  background-image:repeating-linear-gradient(to right, color-mix(in oklch, var(--paper) 26%, transparent) 0 1px, transparent 1px 10%);
  background-size:100% 9px; background-position:bottom; background-repeat:no-repeat; }
.cs-fill{ position:absolute; left:0; bottom:-1px; height:3px; width:0%; background:var(--sigb); }
.cs-chapters{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; margin-top:10px; }
.cs-chapters button{ background:none; border:0; cursor:pointer; font:600 10.5px/1 var(--mono); letter-spacing:0.14em; color:color-mix(in oklch, var(--paper) 50%, transparent); padding:6px 2px; transition:color .2s var(--ease); }
.cs-chapters button.is-active, .cs-chapters button:hover{ color:var(--paper); }

/* SVG drafting helpers (referenced from JS-built scene) */
.coreswap .mono-label{ font:600 10px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }

/* static fallback (no JS / reduced motion): everything visible, stacked */
.coreswap.is-static .cs-viewport{ min-height:0; }
.coreswap.is-static .cs-step{ position:static; opacity:1; transform:none; pointer-events:auto; margin-bottom:26px; }
.coreswap.is-static .cs-panel{ justify-content:flex-start; padding-top:6px; }
.coreswap.is-static .cs-fill{ width:100%; }

@media (max-width:900px){
  .cs-body{ grid-template-columns:1fr; }
  .cs-panel{ min-height:170px; }
  .cs-step{ position:absolute; top:0; }
  .coreswap.is-static .cs-step{ position:static; }
  .cs-count{ font-size:24px; }
}

/* =============================================================
   LABS — formulation dial (interactive CLC density)
   ============================================================= */
.dial{ border:1px solid var(--neutral-200); background:color-mix(in oklch, var(--neutral-050) 55%, var(--paper)); padding:clamp(24px,3.4vw,40px); position:relative; }
.dial .dhead{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:30px; }
.dial .dval{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4.8vw,62px); color:var(--ink); line-height:1; white-space:nowrap; }
.dial .dval .u{ font-family:var(--mono); font-weight:500; font-size:0.30em; color:var(--neutral-600); letter-spacing:0.02em; margin-left:10px; vertical-align:0.7em; }
.dial .dapp{ font:600 12px/1.5 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--signal); text-align:right; max-width:26ch; }
.dial .dtrack{ position:relative; height:48px; border:1px solid var(--neutral-400); cursor:ew-resize; touch-action:none;
  background:repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), color-mix(in oklch, var(--neutral-400) 55%, transparent) calc(10% - 1px), color-mix(in oklch, var(--neutral-400) 55%, transparent) 10%); }
.dial .dfill{ position:absolute; left:0; top:0; bottom:0; width:22%; pointer-events:none;
  background:linear-gradient(to right, color-mix(in oklch, var(--signal) 9%, transparent), color-mix(in oklch, var(--signal) 26%, transparent)); }
.dial .dqual{ position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--ink); pointer-events:none; }
.dial .dqual .qtag{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); white-space:nowrap; font:600 9px/1 var(--mono); letter-spacing:0.12em; color:var(--ink); }
.dial .dhandle{ position:absolute; top:-8px; bottom:-8px; width:3px; background:var(--signal); left:22%; transform:translateX(-50%); cursor:ew-resize; }
.dial .dhandle::after{ content:''; position:absolute; left:50%; top:-9px; width:15px; height:15px; transform:translateX(-50%) rotate(45deg); background:var(--signal); }
.dial .dhandle:focus-visible{ outline:2px solid var(--signal); outline-offset:5px; }
.dial .dzones{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:14px; }
.dial .dzones .z{ font:500 10px/1.45 var(--mono); letter-spacing:0.05em; text-transform:uppercase; color:var(--neutral-400); padding:0 10px; border-left:1px solid var(--neutral-200); }
.dial .dzones .z:first-child{ border-left:0; padding-left:0; }
.dial .dzones .z .zr{ display:block; color:var(--neutral-600); margin-bottom:3px; }
.dial .dzones .z.is-on{ color:var(--signal); }
.dial .dzones .z.is-on .zr{ color:var(--signal); }
.dial .dnote{ margin-top:24px; padding-top:18px; border-top:1px solid var(--neutral-200); font-size:14.5px; line-height:1.62; color:var(--neutral-600); max-width:72ch; min-height:3.4em; }
.dial .dnote .qline{ display:block; margin-top:10px; font:500 12.5px/1.55 var(--mono); letter-spacing:0.01em; color:var(--signal-ink); }
@media (max-width:600px){ .dial .dzones{ grid-template-columns:1fr 1fr; gap:10px 0; } }

/* =============================================================
   LATTIX tile — finalised logo + brand colour, confined to this
   one tile (cobalt #1A3FAD, amber X #F59E1B). The maroon SEED
   signal never appears as a LATTIX colour; the only maroon here
   is the SEED endorsement on the CTA hover ("SEED endorses").
   ============================================================= */
.lattix-tile .fk{ color:#1A3FAD; }
.lattix-tile .lattix-lockup{ line-height:0; margin:2px 0; }
.lattix-tile .lattix-lockup img{ display:block; height:auto; max-width:100%; }

/* corner brackets to match meter/featplate drafting register */
.dial::after{ content:''; position:absolute; inset:7px; pointer-events:none; opacity:.85;
  background:
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left top/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left top/1.5px 16px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right top/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right top/1.5px 16px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left bottom/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left bottom/1.5px 16px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right bottom/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right bottom/1.5px 16px; }

/* =============================================================
   LABS — testing bench (interactive test-method explorer)
   ============================================================= */
.testbench{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; border:1px solid var(--neutral-200); background:color-mix(in oklch, var(--neutral-050) 55%, var(--paper)); position:relative; }
.tb-rail{ display:flex; flex-direction:column; border-right:1px solid var(--neutral-200); }
.tb-tab{ text-align:left; background:none; border:0; border-bottom:1px solid var(--neutral-200); cursor:pointer; font-family:var(--body); font-weight:600; font-size:14.5px; color:var(--neutral-600); padding:16px 20px; display:flex; align-items:center; gap:12px; transition:color .18s var(--ease), background .18s var(--ease); }
.tb-tab::before{ content:''; width:7px; height:7px; background:var(--neutral-400); flex:none; transform:rotate(45deg); transition:background .18s var(--ease), transform .2s var(--ease); }
.tb-tab:last-child{ border-bottom:0; }
.tb-tab:hover{ color:var(--ink); background:var(--paper); }
.tb-tab.is-on{ color:var(--ink); background:var(--paper); }
.tb-tab.is-on::before{ background:var(--signal); transform:rotate(45deg) scale(1.15); }
.tb-readout{ padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:center; min-height:240px; }
.tb-std{ font:600 12px/1.4 var(--mono); letter-spacing:0.1em; color:var(--signal); margin-bottom:14px; }
.tb-readout h4{ font-size:clamp(20px,2.2vw,26px); margin-bottom:12px; }
.tb-readout p{ color:var(--neutral-600); font-size:15.5px; line-height:1.62; max-width:56ch; }
.tb-meta{ margin-top:22px; padding-top:16px; border-top:1px solid var(--neutral-200); display:flex; gap:14px; font:600 11px/1.5 var(--mono); letter-spacing:0.08em; text-transform:uppercase; }
.tb-meta .k{ color:var(--neutral-400); }
.tb-meta span:last-child{ color:var(--neutral-800); }
.testbench::after{ content:''; position:absolute; inset:7px; pointer-events:none; opacity:.85;
  background:
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left top/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left top/1.5px 16px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right top/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right top/1.5px 16px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left bottom/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat left bottom/1.5px 16px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right bottom/16px 1.5px,
    linear-gradient(var(--neutral-600),var(--neutral-600)) no-repeat right bottom/1.5px 16px; }
@media (max-width:720px){
  .testbench{ grid-template-columns:1fr; }
  .tb-rail{ border-right:0; border-bottom:1px solid var(--neutral-200); flex-direction:row; overflow-x:auto; }
  .tb-tab{ border-bottom:0; white-space:nowrap; border-right:1px solid var(--neutral-200); }
}

/* =============================================================
   LABS — hardened-structures gallery (model on dark panel)
   ============================================================= */
.hardened-gal{ align-items:start; }
.hardened-gal .ph{ display:block; aspect-ratio:auto; height:clamp(260px,24vw,320px); }
.hardened-gal .ph.model{ background:#23262b; }
.hardened-gal .ph.model img{ object-fit:contain; padding:6%; filter:grayscale(1) contrast(1.05) brightness(1.05); }
.cap-line{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; font:500 12px/1.4 var(--mono); letter-spacing:0.04em; color:var(--neutral-600); }
.cap-line span{ display:inline-flex; align-items:center; gap:8px; }
.cap-line span::before{ content:''; width:5px; height:5px; background:var(--signal); display:inline-block; flex:none; }