/* ══════════════════════════════════════════════════════════════
   OM TUBES & FITTINGS INDUSTRIES
   Blueprint sheet — white ground, drafting grid, condensed
   headlines, mono labels. Hierarchy through scale and rule-work.
   Base spacing unit 6px.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --white:#FFFFFF;
  --ink:#2D3436;          /* secondary — type, filled buttons */
  --ink-2:#1E2426;        /* inverted */
  --indigo:#4834D4;       /* tertiary — accent */
  --indigo-soft:#EDEAFB;
  --indigo-light:#A79BFF;
  --neutral:#F1F2F6;      /* card ground */
  --neutral-2:#E6E8EF;
  --muted:#6E7679;
  --faint:#9AA1A4;
  --line:rgba(45,52,54,.14);
  --line-soft:rgba(45,52,54,.08);

  /* blueprint */
  --grid-fine:rgba(72,52,212,.045);
  --grid-bold:rgba(72,52,212,.075);

  /* spacing — 6px base */
  --s1:6px; --s2:12px; --s3:18px; --s4:24px; --s5:30px;
  --s6:36px; --s8:60px; --s10:96px; --s12:120px;

  --radius:24px;
  --radius-sm:12px;
  --wrap:1280px; --wrap-wide:min(95vw,1600px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* type */
  --display: clamp(3.4rem, 9.6vw, 8.25rem);
  --h-lg:    clamp(2.4rem, min(6.2vw, 8vh), 5.5rem);
  --h:       clamp(2.1rem, 4vw, 3.5rem);
  --h-sm:    clamp(1.9rem, 3.1vw, 2.9rem);
  --h-xs:    clamp(1.4rem, 2vw, 1.75rem);
}

/* registered so --ry can animate while --py is written every frame;
   both feed one transform, so parallax and reveal never fight over it */
@property --ry{syntax:"<length>";inherits:false;initial-value:0px}
@property --py{syntax:"<length>";inherits:false;initial-value:0px}
@property --hy{syntax:"<length>";inherits:false;initial-value:0px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;

  /* drafting sheet: 12px fine rule over a 96px major rule */
  background-color:var(--white);
  background-image:
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 12px 12px, 12px 12px;
  background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
  background-attachment:fixed;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,address{margin:0}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--indigo);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
@media (max-width:720px){ .wrap{padding-inline:var(--s4)} }

.skip{position:fixed;left:-9999px;top:12px;z-index:200;background:var(--indigo);color:#fff;padding:12px 18px;border-radius:var(--radius-sm)}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}

/* ── typography ───────────────────────────────────────────── */
.display,.heading-lg,.heading,.heading-sm,.heading-xs{
  font-family:"Barlow Condensed","Hanken Grotesk",system-ui,sans-serif;
  font-weight:600;line-height:.92;letter-spacing:-.005em;text-transform:none;
}
.display{font-size:var(--display)}
.heading-lg{font-size:var(--h-lg)}
.heading{font-size:var(--h);line-height:.98}
.heading-sm{font-size:var(--h-sm);line-height:1}
.heading-xs{font-size:var(--h-xs)}
.display em,.heading-lg em,.heading em{font-style:normal;color:var(--faint)}

.body{font-size:17px;font-weight:300;color:var(--muted);line-height:1.68;max-width:62ch}
.lead{font-size:clamp(17px,1.4vw,20px);font-weight:300;color:var(--muted);line-height:1.6;max-width:54ch}

.mono,.eyebrow,.micro,.spec dt,.step__n,.product__num,.mat__sym,.ind-list li span,.stage__index i{
  font-family:"Space Mono","SFMono-Regular",ui-monospace,monospace;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow--accent{color:var(--indigo)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);flex:none}
.micro{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s2)}
.mono{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
@media (max-width:720px){ body{font-size:17px} }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 24px;border-radius:var(--radius-sm);
  font-family:"Space Mono",monospace;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .5s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary{background:var(--ink);color:var(--white)}
.btn--primary:hover{background:var(--indigo);transform:translateY(-2px)}
.btn--secondary{background:var(--neutral);color:var(--ink)}
.btn--secondary:hover{background:var(--neutral-2);transform:translateY(-2px)}
.btn--outline{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-2px)}
.btn--lg{padding:19px 30px;font-size:13px}
.btn .arr{display:inline-block;transition:transform .5s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

.pills{display:flex;flex-wrap:wrap;gap:var(--s1) 8px}
.pills li{
  background:var(--neutral);border-radius:8px;
  padding:7px 12px;font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.pills li:hover{background:var(--indigo);color:#fff}

/* ── scroll progress + nav ────────────────────────────────── */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--indigo);transition:width .12s linear}

.nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:var(--s3) 0;border-bottom:1px solid transparent;
  transition:padding .5s var(--ease),background-color .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.nav.is-stuck{padding:var(--s2) 0;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border-bottom-color:var(--line-soft)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
@media (max-width:720px){ .nav__inner{padding-inline:var(--s4)} }

.lockup{display:inline-flex;align-items:center;gap:14px;flex:none}
.lockup__mark{width:auto;height:30px;flex:none;display:block}
.lockup__type{display:flex;flex-direction:column;line-height:1.06;white-space:nowrap}
.lockup__type b{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.lockup__type i{font-family:"Space Mono",monospace;font-style:normal;font-size:8.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* pill nav, per the component sheet */
.nav__links{display:flex;gap:2px;background:var(--neutral);border-radius:9999px;padding:4px}
.nav__links a{font-family:"Space Mono",monospace;font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:9px 12px;border-radius:9999px;transition:background-color .35s var(--ease),color .35s var(--ease)}
.nav__links a:hover{background:var(--white);color:var(--ink)}
.nav__links a.is-active{background:var(--white);color:var(--indigo)}
@media (max-width:1060px){ .nav__links,.nav__cta{display:none} }

.nav__burger{display:none;width:46px;height:46px;border-radius:var(--radius-sm);background:var(--neutral);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
@media (max-width:1060px){ .nav__burger{display:flex} }

.mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);padding:var(--s10) var(--s5)}
.mobile-menu[hidden]{display:none}
.mobile-menu a{font-family:"Barlow Condensed",sans-serif;font-size:clamp(2.2rem,11vw,3.4rem);font-weight:600;line-height:1;
  text-transform:uppercase;opacity:0;transform:translateY(16px);animation:mm .6s var(--ease-out) forwards}
.mobile-menu a:nth-child(1){animation-delay:.04s}.mobile-menu a:nth-child(2){animation-delay:.08s}
.mobile-menu a:nth-child(3){animation-delay:.12s}.mobile-menu a:nth-child(4){animation-delay:.16s}
.mobile-menu a:nth-child(5){animation-delay:.2s}.mobile-menu a:nth-child(6){animation-delay:.24s}
.mobile-menu__cta{color:var(--indigo)}
@keyframes mm{to{opacity:1;transform:none}}

/* nav goes light-on-image while the arrival owns the screen */
.nav.is-over{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom-color:transparent!important}
.nav.is-over .lockup__mark{filter:brightness(0) invert(1)}
.nav.is-over .lockup__type b{color:#fff}
.nav.is-over .lockup__type i{color:rgba(255,255,255,.72)}
.nav.is-over .nav__links{background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav.is-over .nav__links a{color:rgba(255,255,255,.88)}
.nav.is-over .nav__links a:hover,.nav.is-over .nav__links a.is-active{background:rgba(255,255,255,.92);color:var(--ink)}
.nav.is-over .btn--primary{background:#fff;color:var(--ink)}
.nav.is-over .nav__burger{background:rgba(255,255,255,.18)}
.nav.is-over .nav__burger span{background:#fff}

/* ── arrival: sheet → factory → film ──────────────────────
   A pinned stage in three beats. The drafting sheet holds the
   headline with only the roofline of the works showing; the works
   then rises and takes the screen; the still hands over to the
   film, which scrubs to the end. All scrubbed from --p.          */
/* ══ arrival: the works from the air, scrubbed on scroll ══════════ */
.arrival{position:relative;height:260svh}
.arrival__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#0b0d0e}
.arrival__film,.arrival__inside{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform,opacity;background:#0b0d0e}
.arrival__inside{z-index:0}
.arrival__film{z-index:1}
.arrival__grade{z-index:2}
.arrival .tourcut{z-index:3}
.arrival .mnlead{z-index:4}
.arrival .millnotes{z-index:5}
.arrival .millstage__cap{z-index:6}
.arrival__copy{z-index:7}
.arrival__hint{z-index:8}

/* the grade: enough weight top and bottom to carry white type over a dusk
   sky, without flattening the shot in the middle */
.arrival__grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom, rgba(6,8,9,.66) 0%, rgba(6,8,9,.3) 32%, rgba(6,8,9,.3) 58%, rgba(6,8,9,.74) 100%),
  radial-gradient(64% 52% at 50% 44%, rgba(6,8,9,.46) 0%, rgba(6,8,9,0) 76%)}

.arrival__copy{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  padding-bottom:6svh;color:#fff;will-change:transform,opacity}
.arrival__copy .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.arrival__copy .eyebrow{justify-content:center;color:rgba(255,255,255,.82)}
.arrival__copy .eyebrow .dot{background:var(--indigo-light)}
.arrival__title{margin:var(--s3) 0 var(--s4);color:#fff}
.arrival__copy .lead{margin-inline:auto;max-width:50ch;color:rgba(255,255,255,.78)}
.arrival__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--s5)}
.arrival__copy .btn--primary{background:#fff;color:var(--ink)}
.arrival__copy .btn--primary:hover{background:var(--indigo);color:#fff}
.arrival__copy .btn--outline{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.arrival__copy .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.arrival__hint{position:absolute;right:var(--s5);bottom:var(--s4);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);pointer-events:none}
.arrival__hint span{display:block;width:1px;height:34px;
  background:linear-gradient(to bottom,var(--indigo-light),transparent)}

/* ── envelope band ───────────────────────────────────────── */
.envelope{padding-block:var(--s8)}
.env__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);
  background:var(--neutral);border-radius:var(--radius);padding:var(--s5)}
@media (max-width:820px){ .env__grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s2)} }
.env__grid > div{padding-inline:var(--s3);border-left:1px solid var(--line-soft)}
.env__grid > div:first-child{border-left:0}
@media (max-width:820px){ .env__grid > div:nth-child(3){border-left:0} }
.env__grid dt{font-family:"Space Mono",monospace;font-size:10.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.env__grid dd{font-family:"Barlow Condensed",sans-serif;font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1}
.env__grid em{font-style:normal;font-family:"Hanken Grotesk",sans-serif;font-size:14px;font-weight:400;color:var(--faint);margin-left:4px}

/* ── marquee ──────────────────────────────────────────────── */
.marquee{border-block:1px solid var(--line-soft);overflow:hidden;padding:var(--s4) 0}
.marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:var(--s5);padding-right:var(--s5)}
.marquee__group span{font-family:"Barlow Condensed",sans-serif;font-size:clamp(18px,1.8vw,24px);font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.marquee__group i{color:var(--indigo);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── section rhythm ──────────────────────────────────────── */
section{position:relative}
.manifesto,.materials,.process,.industries,.quality,.cta{padding-block:var(--s12)}
.products{padding-block:var(--s12) var(--s10)}
@media (max-width:900px){ .manifesto,.materials,.process,.industries,.quality,.cta,.products{padding-block:var(--s10)} }

.section-head{margin-bottom:var(--s10)}
.section-head--wide{max-width:900px}
.section-head__note{margin-top:var(--s4)}
.section-head .eyebrow{margin-bottom:var(--s3)}
.section-head--split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:end}
@media (max-width:900px){ .section-head--split{grid-template-columns:1fr;gap:var(--s5)} .section-head{margin-bottom:var(--s8)} }

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:var(--s6)} }
.split__body{display:flex;flex-direction:column;gap:var(--s4)}

.ticks{display:flex;flex-direction:column;gap:10px;margin-top:var(--s3)}
.ticks li{position:relative;padding-left:var(--s4);font-size:16px;font-weight:400;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border:1.5px solid var(--indigo);border-radius:2px}

/* ── facility ─────────────────────────────────────────────── */
/* ── the mill stage ───────────────────────────────────────
   Two clips on one pinned screen: the exterior scrubs through,
   dissolves at the midpoint, then the interior scrubs through.
   Both are driven frame-by-frame from scroll position.        */
/* the tour runs straight out of the hero, so it carries no padding */
/* the mill furniture below now hangs inside the arrival pin */
/* the knocked-out type: a white sheet with the words cut out of it, so the
   footage behind shows only through the letterforms */
.tourcut{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:0;pointer-events:none;
  will-change:opacity}
.tourcut__t{fill:#000;text-anchor:middle;
  font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;font-weight:700;font-size:158px;
  letter-spacing:2px;text-transform:uppercase}
[data-tour-g]{will-change:transform}
@media (max-width:720px){ .tourcut__t{font-size:132px} }
.millstage__cap{position:absolute;left:0;right:0;bottom:var(--s5);z-index:2;color:#fff}
.millstage__cap .wrap{display:flex;align-items:center;gap:var(--s4)}
.millstage__cap .mono{color:rgba(255,255,255,.82);white-space:nowrap}
.millstage__bar{flex:1;height:1px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.millstage__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--indigo-light);display:block}
@media (max-width:720px){ .millstage__cap .mono{white-space:normal} }

/* ── products: sticky stage + stream ─────────────────────── */
.products__rail{display:block}

/* the traveller: fixed at page level, driven entirely by JS pursuit */
.floater{position:fixed;left:0;top:0;z-index:60;width:clamp(240px,34vw,520px);aspect-ratio:1;
  display:grid;place-items:center;pointer-events:none;opacity:0;
  will-change:transform,opacity;color:var(--indigo)}
.floater__ring{grid-area:1/1;width:100%;aspect-ratio:1;transform:rotate(var(--spin,0deg));opacity:.8}
/* selection frame, as on a drawing: corner and edge handles */
.floater__box{grid-area:1/1;width:112%;aspect-ratio:1;color:var(--indigo);opacity:.75}
.floater__handles rect{opacity:.9}
/* a glass edge so the lens reads as a loupe rather than a hole */
.floater__glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(72,52,212,.35), inset 0 14px 30px rgba(255,255,255,.55), inset 0 -12px 26px rgba(45,52,54,.10);
  background:linear-gradient(150deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 38%)}

/* the leader line: object → its specification */
.callout{position:fixed;inset:0;width:100%;height:100%;z-index:59;pointer-events:none;overflow:visible}
.callout__line{stroke:var(--indigo);stroke-width:1;opacity:.75;
  stroke-dasharray:var(--len,0);stroke-dashoffset:var(--off,0)}
.callout__tick{stroke:var(--indigo);stroke-width:1;opacity:.55}
.callout__dot{fill:var(--white);stroke:var(--indigo);stroke-width:1.4}
.callout__pulse{fill:none;stroke:var(--indigo);stroke-width:1;opacity:.45;transform-box:fill-box;transform-origin:center;
  animation:ping 2.6s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}
@media (max-width:900px){ .callout{display:none} }
/* the lens: the drafting ring becomes a loupe the part magnifies inside */
.floater__lens{position:relative;grid-area:1/1;width:86%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px) var(--white);
  background-size:12px 12px,12px 12px}
.floater__part{width:100%;height:100%;display:block}
.floater__tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;z-index:2;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--indigo);background:var(--white);border:1px solid rgba(72,52,212,.35);border-radius:9999px;
  padding:7px 14px;transition:opacity .25s var(--ease)}
.floater__tag.is-swap{opacity:0}

.stage__title{position:relative;z-index:2;font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;line-height:1.05;
  margin-bottom:var(--s3);transition:opacity .3s var(--ease)}
.stage__title.is-swap{opacity:0}

.stage__nav{display:flex;flex-direction:column;gap:1px;border-top:1px dotted rgba(72,52,212,.4);padding-top:var(--s3)}
.stage__nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);padding:4px 0;transition:color .35s var(--ease)}
.stage__nav button i{display:block;width:12px;height:1.5px;background:currentColor;flex:none;transition:width .5s var(--ease-out),background-color .35s var(--ease)}
.stage__nav button:hover{color:var(--muted)}
.stage__nav li.is-active button{color:var(--ink)}
.stage__nav li.is-active button i{width:26px;background:var(--indigo)}

.products__stream{display:flex;flex-direction:column}
.product{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:var(--s8);align-items:center;
  padding-block:var(--s10);border-top:1px solid var(--line-soft)}
.product:first-child{border-top:0;padding-top:var(--s4)}
.product:last-child{padding-bottom:var(--s8)}
.product__berth{grid-column:1;grid-row:1;position:relative;align-self:stretch;min-height:380px}
.product__body{grid-column:2;grid-row:1;min-width:0}
/* every second family swaps sides: part right, specification left */
.product:nth-child(even) .product__berth{grid-column:2}
.product:nth-child(even) .product__body{grid-column:1}
@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:var(--s4);padding-block:var(--s8)}
  .product__berth,.product:nth-child(even) .product__berth{grid-column:1;grid-row:1;min-height:300px}
  .product__body,.product:nth-child(even) .product__body{grid-column:1;grid-row:2}
}

.product__num{display:none;font-size:11px;letter-spacing:.14em;color:var(--indigo)}
@media (max-width:900px){ .product__num{display:block;margin-bottom:var(--s2)} }
.product__head{max-width:58ch}
.product__head .heading-sm{margin-bottom:var(--s3)}

/* ── specification cards ──────────────────────────────────
   Each figure is its own frosted panel: a set label, the value at
   size, its unit held back, and a node in the corner where a
   leader would meet it.                                          */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:var(--s8)}
@media (max-width:640px){ .specs{grid-template-columns:1fr} }

.spec{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:16px 18px 15px;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.86), rgba(255,255,255,.55));
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(45,52,54,.05),
             0 12px 26px -18px rgba(45,52,54,.42);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),background-color .4s var(--ease)}
.spec::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(45,52,54,.09)}
/* the node, where a leader line would land */
.spec::after{content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;
  background:var(--indigo);opacity:.28;box-shadow:0 0 0 4px rgba(72,52,212,.1);
  transition:opacity .35s var(--ease),box-shadow .35s var(--ease);width:6px}
.spec:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(45,52,54,.06),
             0 20px 40px -20px rgba(72,52,212,.5)}
.spec:hover::after{opacity:1;box-shadow:0 0 0 5px rgba(72,52,212,.16)}

.spec dt{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding-right:18px}
.spec dd{font-family:"Barlow Condensed",sans-serif;font-size:clamp(24px,2.5vw,31px);font-weight:700;
  line-height:1;letter-spacing:-.01em;color:var(--ink);text-align:left;
  transition:color .3s var(--ease)}
.spec dd em{font-style:normal;font-family:"Hanken Grotesk",sans-serif;font-size:12.5px;font-weight:400;
  color:var(--muted);margin-left:5px;letter-spacing:0}
.spec:hover dd{color:var(--indigo)}

.product__foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s8);
  background:var(--neutral);border-radius:var(--radius);padding:var(--s5)}
@media (max-width:720px){ .product__foot{grid-template-columns:1fr;gap:var(--s5)} }
.grades{font-size:14px;font-weight:400;line-height:1.8;color:var(--muted)}

/* ── materials ────────────────────────────────────────────── */
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
@media (max-width:900px){ .mat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .mat-grid{grid-template-columns:1fr} }
.mat{background:var(--neutral);border-radius:var(--radius);padding:var(--s5);
  transform:translate3d(0,calc(var(--py) + var(--hy)),0);
  transition:background-color .45s var(--ease),--hy .55s var(--ease-out)}
.mat:hover{background:var(--indigo-soft);--hy:-4px}
.mat__sym{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);
  background:var(--white);border-radius:8px;padding:6px 12px;margin-bottom:var(--s6)}
.mat h3{font-family:"Barlow Condensed",sans-serif;font-size:28px;font-weight:600;line-height:1.05;margin-bottom:10px}
.mat p{font-size:14px;font-weight:400;line-height:1.75;color:var(--muted)}

/* ── process ──────────────────────────────────────────────── */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:80px minmax(0,280px) 1fr;gap:var(--s6);align-items:start;
  padding:var(--s5) var(--s3);border-bottom:1px solid var(--line-soft);border-radius:var(--radius-sm);
  transition:background-color .45s var(--ease)}
@media (max-width:900px){ .step{grid-template-columns:56px 1fr;gap:var(--s2) var(--s4)} .step p{grid-column:2} }
.step:hover{background:var(--neutral)}
.step__n{font-size:11px;letter-spacing:.14em;color:var(--indigo);padding-top:8px}
.step h3{font-family:"Barlow Condensed",sans-serif;font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:600;line-height:1.02}
.step p{font-size:15.5px;font-weight:300;color:var(--muted);line-height:1.65;max-width:54ch}

/* ── industries ───────────────────────────────────────────── */
.ind-list{border-top:1px solid var(--line)}
.ind-list li{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s4);align-items:baseline;
  padding:var(--s4) var(--s3);border-bottom:1px solid var(--line-soft);border-radius:var(--radius-sm);
  position:relative;z-index:0;overflow:hidden;
  font-family:"Barlow Condensed",sans-serif;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:600;line-height:1.05;
  transition:padding-left .55s var(--ease-out),color .4s var(--ease)}
/* each row's photograph, resolved relative to this stylesheet */
.ind-list li:nth-child(1){--img:url("../assets/img/ind/01-chemical.jpg");--img:image-set(url("../assets/img/opt/01-chemical.webp") type("image/webp"),url("../assets/img/ind/01-chemical.jpg") type("image/jpeg"))}
.ind-list li:nth-child(2){--img:url("../assets/img/ind/02-oilgas.jpg");--img:image-set(url("../assets/img/opt/02-oilgas.webp") type("image/webp"),url("../assets/img/ind/02-oilgas.jpg") type("image/jpeg"))}
.ind-list li:nth-child(3){--img:url("../assets/img/ind/03-power.jpg");--img:image-set(url("../assets/img/opt/03-power.webp") type("image/webp"),url("../assets/img/ind/03-power.jpg") type("image/jpeg"))}
.ind-list li:nth-child(4){--img:url("../assets/img/ind/04-petrochemical.jpg");--img:image-set(url("../assets/img/opt/04-petrochemical.webp") type("image/webp"),url("../assets/img/ind/04-petrochemical.jpg") type("image/jpeg"))}
.ind-list li:nth-child(5){--img:url("../assets/img/ind/05-mining.jpg");--img:image-set(url("../assets/img/opt/05-mining.webp") type("image/webp"),url("../assets/img/ind/05-mining.jpg") type("image/jpeg"))}
.ind-list li:nth-child(6){--img:url("../assets/img/ind/06-pharma.jpg");--img:image-set(url("../assets/img/opt/06-pharma.webp") type("image/webp"),url("../assets/img/ind/06-pharma.jpg") type("image/jpeg"))}
.ind-list li:nth-child(7){--img:url("../assets/img/ind/07-desalination.jpg");--img:image-set(url("../assets/img/opt/07-desalination.webp") type("image/webp"),url("../assets/img/ind/07-desalination.jpg") type("image/jpeg"))}
.ind-list li:nth-child(8){--img:url("../assets/img/ind/08-shipbuilding.jpg");--img:image-set(url("../assets/img/opt/08-shipbuilding.webp") type("image/webp"),url("../assets/img/ind/08-shipbuilding.jpg") type("image/jpeg"))}

/* the photo sleeps behind each row and wakes on hover */
.ind-list li::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background-image:linear-gradient(to right, rgba(18,23,25,.9), rgba(18,23,25,.42) 55%, rgba(18,23,25,.78)),var(--img);
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity .45s var(--ease),transform 1.4s var(--ease-out)}
.ind-list li:hover::after,.ind-list li.is-hover::after{opacity:1;transform:scale(1)}
.ind-list li:hover,.ind-list li.is-hover{padding:var(--s8) var(--s6);color:#fff}
.ind-list li span{font-size:11px;letter-spacing:.14em;color:var(--faint)}
.ind-list li i{font-style:normal;font-family:"Hanken Grotesk",sans-serif;font-size:13.5px;font-weight:400;color:var(--muted);text-align:right}
@media (max-width:720px){ .ind-list li{grid-template-columns:44px 1fr} .ind-list li i{grid-column:2;text-align:left} }

/* ── quality ──────────────────────────────────────────────── */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
@media (max-width:520px){ .certs{grid-template-columns:1fr} }
.cert{background:var(--neutral);border-radius:var(--radius-sm);padding:var(--s4);transition:background-color .4s var(--ease)}
.cert:hover{background:var(--indigo-soft)}
.cert b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;letter-spacing:.01em}
.cert span{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}

/* ── cta ──────────────────────────────────────────────────── */
.cta{border-top:1px solid var(--line-soft)}
.cta__head{margin:var(--s4) 0 var(--s5)}
.cta__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s10)}
@media (max-width:900px){ .cta__grid{grid-template-columns:1fr} }
.cta__grid > div{background:var(--neutral);border-radius:var(--radius);padding:var(--s5)}
.cta__grid address{font-size:16px;font-weight:400;line-height:1.7;color:var(--ink)}
.big-link{display:inline-block;font-family:"Barlow Condensed",sans-serif;font-size:clamp(1.4rem,2vw,1.8rem);font-weight:600;
  margin-bottom:var(--s5);border-bottom:1.5px solid var(--line);padding-bottom:2px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.big-link:hover{color:var(--indigo);border-color:var(--indigo)}
.big-link:last-child{margin-bottom:0}
.is-placeholder{color:var(--faint);border-color:var(--line-soft)}
.cta__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s8)}

/* ── footer ───────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:var(--s8)}
.foot__inner{display:flex;flex-direction:column;gap:var(--s5)}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--s4)}
.foot__links a{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease)}
.foot__links a:hover{color:var(--indigo)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--line-soft);padding-top:var(--s5);font-size:12.5px;color:var(--faint)}

/* ── scroll reveal ────────────────────────────────────────── */
/* every revealing element carries two offsets: --ry (the entrance) and
   --py (the parallax, rewritten each frame). transform reads both. */
.js .reveal{opacity:0;--ry:26px;transform:translate3d(0,calc(var(--ry) + var(--py)),0)}
.reveal.is-in{opacity:1;--ry:0px;
  transition:opacity .9s var(--ease-out) var(--d,0ms),--ry .9s var(--ease-out) var(--d,0ms)}
.js .spec{opacity:0;--ry:16px;transform:translate3d(0,calc(var(--ry) + var(--py)),0)}
.spec.is-in{opacity:1;--ry:0px;
  transition:opacity .65s var(--ease-out) var(--d,0ms),--ry .65s var(--ease-out) var(--d,0ms)}

/* non-revealing parallax passengers */
[data-para]{transform:translate3d(0,var(--py),0);will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.spec,[data-hero-el]{opacity:1!important;transform:none!important}
  .floater,.callout{display:none}
  .arrival{height:auto}
  .arrival__pin{position:static;height:100svh}
  /* the hero film holds on its first frame; the tour shows the floor with
     no title card sweeping over it */
  .tourcut{display:none}
  .exploded{height:auto}
  .exploded__pin{position:static;height:90svh}
  .hs__ping,.probe__scan{animation:none}
  .marquee__track{animation:none}
  /* industries: the bento is static already — just stop it hovering */
  .indcard,.indcard::before{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════
   POSTER PASS — surface rhythm and typographic weight.
   White sheet → indigo band → white → dark band → white → dark
   close. Hierarchy through scale, outline strokes and colour
   shifts; never through shadows.
   ══════════════════════════════════════════════════════════════ */

:root{--display:clamp(3.6rem,10.5vw,9.5rem)}
.display,.heading-lg{font-weight:700}
.display{text-transform:uppercase;letter-spacing:-.012em}
@supports (-webkit-text-stroke:1px #000){
  .display em{color:transparent;-webkit-text-stroke:1.8px var(--ink)}
  .cta .display em,
  .arrival .display em{-webkit-text-stroke-color:#fff}
}

/* envelope band goes full indigo */
.env__grid{background:var(--indigo)}
.env__grid > div{border-left-color:rgba(255,255,255,.22)}
.env__grid dt{color:rgba(255,255,255,.62)}
.env__grid dd{color:#fff}
.env__grid em{color:rgba(255,255,255,.55)}

/* marquee: bigger, alternating solid / outline, dotted rules */
.marquee{border-block:1px dotted rgba(72,52,212,.45);padding:var(--s5) 0}
.marquee__group span{font-size:clamp(26px,3.2vw,44px);font-weight:700}
@supports (-webkit-text-stroke:1px #000){
  .marquee__group span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.2px var(--ink)}
}

/* products: dotted separators + ghost numerals behind each family */
.product{border-top:1px dotted rgba(72,52,212,.35)}
.products__stream{counter-reset:prod}
.product{counter-increment:prod}
.product__berth::before{content:"0" counter(prod);position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(9rem,16vw,17rem);line-height:.8;color:rgba(72,52,212,.08);pointer-events:none}
@supports (-webkit-text-stroke:1px #000){
  .product__berth::before{color:transparent;-webkit-text-stroke:2px rgba(72,52,212,.25)}
}

/* process: the first dark band */
.process{background:var(--ink-2);color:#fff}
.process .heading-lg{color:#fff}
.process .eyebrow--accent{color:var(--indigo-light)}
.process .eyebrow .dot{background:var(--indigo-light)}
.process .body{color:rgba(255,255,255,.6)}
.steps{border-top-color:rgba(255,255,255,.18)}
.step{border-bottom-color:rgba(255,255,255,.08)}
.step:hover{background:rgba(255,255,255,.045)}
.step__n{color:var(--indigo-light)}
.step h3{color:#fff}
.step p{color:rgba(255,255,255,.55)}

/* industries: rows reveal their photograph on hover */
.ind-list li:hover span,.ind-list li.is-hover span{color:var(--indigo-light)}
.ind-list li:hover i,.ind-list li.is-hover i{color:rgba(255,255,255,.85)}

/* cta + footer: the dark close */
.cta{background:radial-gradient(90% 80% at 50% 0%, rgba(72,52,212,.22), transparent 60%) var(--ink-2);
  border-top:0;color:#fff}
.cta .display{color:#fff}
.cta .eyebrow--accent{color:var(--indigo-light)}
.cta .eyebrow .dot{background:var(--indigo-light)}
.cta .lead{color:rgba(255,255,255,.62)}
.cta .micro{color:rgba(255,255,255,.42)}
.cta__grid > div{background:rgba(255,255,255,.055)}
.cta__grid address{color:rgba(255,255,255,.85)}
.cta .big-link{color:#fff;border-color:rgba(255,255,255,.28)}
.cta .big-link:hover{color:var(--indigo-light);border-color:var(--indigo-light)}
.cta .is-placeholder{color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.12)}
.cta .btn--primary{background:#fff;color:var(--ink)}
.cta .btn--primary:hover{background:var(--indigo);color:#fff}
.cta .btn--outline{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cta .btn--outline:hover{border-color:var(--indigo-light);color:var(--indigo-light)}

.foot{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.6)}
.foot .lockup__mark{filter:brightness(0) invert(1)}
.foot .lockup__type b{color:#fff}
.foot .lockup__type i{color:rgba(255,255,255,.5)}
.foot__links a{color:rgba(255,255,255,.55)}
.foot__links a:hover{color:var(--indigo-light)}
.foot__legal{border-top-color:rgba(255,255,255,.09);color:rgba(255,255,255,.38)}


/* ══════════════════════════════════════════════════════════════
   SPECIFICATION TYPE — the annotation idiom: a set label, a short
   uppercase description, and an identity plate closing each block.
   ══════════════════════════════════════════════════════════════ */

.product__head .heading-sm{text-transform:uppercase;letter-spacing:.005em}

/* the callout description: short, uppercase, letter-spaced */
.callout-desc{font-family:"Space Mono",monospace;font-size:11px;font-weight:400;line-height:1.85;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);max-width:46ch}
@media (max-width:720px){ .callout-desc{font-size:10.5px;letter-spacing:.07em} }

/* "GOVERNING STANDARDS :" */
.micro--colon::after{content:" :";color:var(--indigo)}

/* identity plate — brand, part name, component number */
.plate-id{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--ink)}
.plate-id__left,.plate-id__right{display:flex;flex-direction:column}
.plate-id__right{text-align:right}
.plate-id__brand,.plate-id__label{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.plate-id__name,.plate-id__num{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.plate-id__num{color:var(--indigo)}
@media (max-width:520px){ .plate-id{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .plate-id__right{text-align:left} }

/* corner marks, set into the rules of the section */
.corner-mark{position:absolute;z-index:1;font-family:"Space Mono",monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);pointer-events:none}
.corner-mark--tl{top:var(--s5);left:var(--s5)}
.corner-mark--tr{top:var(--s5);right:var(--s5)}
.corner-mark--bl{bottom:var(--s5);left:var(--s5)}
.corner-mark--br{bottom:var(--s5);right:var(--s5)}
@media (max-width:900px){ .corner-mark{display:none} }

/* ══════════════════════════════════════════════════════════════
   EXPLODED VIEW — the fitting separates on scroll; each marker
   opens a probe that magnifies the live frame and reads it out.
   ══════════════════════════════════════════════════════════════ */

.exploded{position:relative;height:420svh}
.exploded__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--white)}
.exploded__sheet{position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,15px 15px,15px 15px;background-position:center;
  -webkit-mask-image:radial-gradient(80% 72% at 50% 50%, #000 30%, rgba(0,0,0,.3) 70%, transparent 100%);
  mask-image:radial-gradient(80% 72% at 50% 50%, #000 30%, rgba(0,0,0,.3) 70%, transparent 100%)}

/* contain, not cover: the clip's ground is pure white, so it sits on the
   sheet seamlessly and every marker maps to a known point in the frame */
/* the assembly is inset rather than filling the pin, so the parts read at a
   comfortable size with the sheet showing around them */
.exploded__video{position:absolute;left:52%;top:57%;transform:translate(-50%,-50%);
  width:68%;height:64%;object-fit:contain;mix-blend-mode:multiply;will-change:opacity}

.exploded__head{position:absolute;left:0;right:0;top:clamp(84px,11vh,130px);z-index:3;pointer-events:none}
.exploded__head .eyebrow{margin-bottom:var(--s2)}
.exploded__note{margin-top:var(--s3);max-width:38ch}

/* ── markers ─────────────────────────────────────────────── */
.hotspots{position:absolute;inset:0;z-index:4;opacity:0;transition:opacity .5s var(--ease)}
.hotspots.is-live{opacity:1}
.hs{position:absolute;transform:translate(-50%,-50%);width:auto;padding:0;
  display:flex;align-items:center;gap:10px;cursor:crosshair;background:none;border:0}
.hs__dot{position:relative;width:11px;height:11px;flex:none;border-radius:50%;
  background:var(--white);box-shadow:0 0 0 1.5px var(--indigo), 0 0 0 5px rgba(72,52,212,.14);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease)}
.hs__ping{position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  border:1.5px solid var(--indigo);opacity:.6;pointer-events:none;
  animation:hsping 2.8s var(--ease-out) infinite}
@keyframes hsping{0%{transform:scale(1);opacity:.55}70%{transform:scale(3.6);opacity:0}100%{opacity:0}}
.hs__tag{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.86);border:1px solid var(--line-soft);
  border-radius:9999px;padding:5px 11px;white-space:nowrap;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.hs:hover .hs__dot,.hs.is-open .hs__dot{transform:scale(1.35);box-shadow:0 0 0 1.5px var(--indigo),0 0 0 9px rgba(72,52,212,.2)}
.hs:hover .hs__tag,.hs.is-open .hs__tag{background:var(--indigo);border-color:var(--indigo);color:#fff}
.hs:focus-visible{outline:none}
.hs:focus-visible .hs__tag{background:var(--indigo);color:#fff}

/* ── the probe ───────────────────────────────────────────── */
.probe{position:absolute;z-index:6;pointer-events:none;display:flex;align-items:flex-start;gap:var(--s3);
  opacity:0;transform:translate3d(0,10px,0) scale(.94);transform-origin:0 0;
  transition:opacity .32s var(--ease-out),transform .42s var(--ease-out)}
.probe.is-live{opacity:1;transform:none}
.probe__lens{position:relative;width:180px;height:180px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--white);box-shadow:0 0 0 1.5px var(--indigo),0 18px 40px rgba(45,52,54,.18),
    inset 0 0 30px rgba(72,52,212,.1)}
.probe__lens canvas{width:100%;height:100%;display:block}
.probe__cross{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(72,52,212,.4) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(72,52,212,.4) 50%, transparent calc(50% + .5px))}
.probe__scan{position:absolute;left:0;right:0;height:34%;pointer-events:none;
  background:linear-gradient(to bottom, rgba(72,52,212,0), rgba(72,52,212,.16), rgba(72,52,212,0));
  animation:probescan 2.4s linear infinite}
@keyframes probescan{0%{transform:translateY(-120%)}100%{transform:translateY(320%)}}

.probe__read{border-radius:16px;padding:var(--s3) var(--s4);min-width:210px;max-width:270px;
  background:linear-gradient(150deg, rgba(255,255,255,.88), rgba(255,255,255,.6));
  border:1px solid rgba(45,52,54,.1);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -22px rgba(45,52,54,.55)}
.probe__name{font-family:"Barlow Condensed",sans-serif;font-size:23px;font-weight:700;line-height:1;
  text-transform:uppercase;margin-bottom:var(--s2)}
.probe__specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:6px 0;border-bottom:1px solid rgba(45,52,54,.07)}
.probe__specs > div:last-child{border-bottom:0}
.probe__specs dt{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.probe__specs dd{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:700;text-align:right;line-height:1.2}

@media (max-height:780px) and (min-width:901px){
  .exploded__head .heading-lg{font-size:clamp(2rem,3.6vw,2.9rem)}
  .exploded__head{top:76px;max-width:34ch}
  .exploded__note{display:none}
  .exploded__video{left:58%;top:56%;width:62%;height:70%}
}
@media (max-width:900px){
  .exploded{height:340svh}
  .hs__tag{display:none}
  .probe__lens{width:118px;height:118px}
  .probe__read{min-width:0;max-width:170px;padding:10px 12px}
  .exploded__video{width:94%;height:64%;top:60%}
}

/* ── facts over the factory footage ──────────────────────────
   The same card language as the specification panels, in its
   over-dark form: glass, a set label, the figure at size, its
   caption held back, and a small readout glyph alongside.       */
.millnotes{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1400px;perspective-origin:50% 45%}

/* the leader: a node in the scene, an elbow, then into the card */
.mnlead{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .45s var(--ease)}
.mnlead.is-on{opacity:1}
.mnlead__line{stroke:rgba(255,255,255,.72);stroke-width:1}
.mnlead__dot{fill:#fff;stroke:var(--indigo-light);stroke-width:1.6}
.mnlead__ping{fill:none;stroke:var(--indigo-light);stroke-width:1.2;opacity:.5;
  transform-box:fill-box;transform-origin:center;animation:ping 2.6s var(--ease-out) infinite}
.mn{position:absolute;left:var(--x);top:var(--y);margin:0;
  display:flex;align-items:center;gap:var(--s4);
  padding:15px 18px;border-radius:18px;min-width:186px;
  background:linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 22px 44px -24px rgba(0,0,0,.75);
  transform-style:preserve-3d;
  opacity:0;transform:translate3d(0,20px,-90px) rotateY(calc(var(--tilt, 0deg) * 2)) rotateX(9deg);
  transition:opacity .6s var(--ease-out),transform .9s var(--ease-out)}
.mn.is-on{opacity:1;transform:translate3d(0,0,0) rotateY(var(--tilt, 0deg)) rotateX(2.5deg)}
/* a lit edge along the leading side sells the tilt */
.mn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.26), rgba(255,255,255,0) 42%);
  mix-blend-mode:screen}
/* the node, where a leader would meet the card */
.mn::after{content:"";position:absolute;top:13px;right:13px;width:5px;height:5px;border-radius:50%;
  background:var(--indigo-light);box-shadow:0 0 0 4px rgba(143,123,255,.22)}

.mn__t{display:flex;flex-direction:column;gap:3px;min-width:0;transform:translateZ(12px)}
.mn__k{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);padding-right:14px}
.mn b{font-family:"Barlow Condensed",sans-serif;font-size:clamp(30px,3.2vw,42px);font-weight:700;
  line-height:.94;color:#fff;letter-spacing:-.01em}
.mn b i{font-style:normal;font-family:"Hanken Grotesk",sans-serif;font-size:.32em;font-weight:400;
  color:rgba(255,255,255,.7);margin-left:4px;letter-spacing:0}
.mn__c{font-family:"Hanken Grotesk",sans-serif;font-size:11.5px;font-weight:300;
  color:rgba(255,255,255,.62);white-space:nowrap}
.mn__g{width:38px;height:38px;flex:none;color:var(--indigo-light);opacity:.92;
  transform:translateZ(18px)}

@media (max-width:900px){
  .mn{min-width:0;padding:11px 13px;gap:var(--s3);border-radius:15px}
  .mn__g{width:28px;height:28px}
  .mn__c{font-size:10px}
}
@media (max-width:620px){ .mnlead{display:none} }

/* ══════════════════════════════════════════════════════════════
   MATERIAL BENCH — pick a grade and a finish, see it on the part
   ══════════════════════════════════════════════════════════════ */

.lab{display:grid;grid-template-columns:1.25fr .75fr;gap:0;
  background:var(--neutral);border-radius:var(--radius);overflow:hidden;margin-bottom:var(--s10)}
@media (max-width:900px){ .lab{grid-template-columns:1fr} }

.lab__stage{position:relative;min-height:clamp(400px,54vw,660px);cursor:grab;touch-action:pan-y;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size:auto, 15px 15px, 15px 15px;background-color:var(--white)}
.lab__stage.is-dragging{cursor:grabbing}
.lab__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.lab__stage::after{content:"";position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  width:46%;height:8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(45,52,54,.26), rgba(45,52,54,0) 78%);filter:blur(3px)}
.lab__hud{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s3);z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);pointer-events:none}
.lab__hud .mono{font-size:10px;letter-spacing:.14em;color:var(--ink)}
.lab__hint{color:var(--faint)}

.lab__panel{padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s2);
  background:var(--white);border-left:1px solid var(--line-soft)}
.lab__panel .micro{margin:var(--s2) 0 0}
.lab__panel .micro:first-child{margin-top:0}

.swatches,.finishes{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9999px;
  background:var(--white);border:1px solid var(--line-soft);
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.05em;color:var(--muted);
  cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)}
.chip:hover{border-color:var(--indigo);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip--swatch::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,#fff -10%,var(--sw) 55%,rgba(45,52,54,.5) 160%);
  box-shadow:inset 0 0 0 1px rgba(45,52,54,.24)}

.lab__specs{margin-top:var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lab__specs > div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border:1px solid rgba(45,52,54,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -18px rgba(45,52,54,.4)}
.lab__specs dt{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.lab__specs dd{font-family:"Barlow Condensed",sans-serif;font-size:22px;font-weight:700;line-height:1}
.lab__note{margin-top:var(--s4);grid-column:1 / -1;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--muted)}

.lab__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--s4)}
.lab__fine{margin-top:10px;font-size:9.5px;letter-spacing:.12em;color:var(--faint)}
.lab__below{margin-bottom:var(--s4)}


/* the materials page: the bench leads, the range follows */
.materials--page{padding-top:clamp(140px,17vh,200px)}
.materials--page .section-head{margin-bottom:var(--s8)}
.materials--page .display{margin:var(--s3) 0 var(--s4)}
@media (max-width:900px){ .lab{grid-template-columns:1fr} .lab__panel{border-left:0;border-top:1px solid var(--line-soft)} }

/* ══════════════════════════════════════════════════════════════
   MULTI-PAGE — sub-pages open under the fixed nav rather than
   behind a hero, and the landing page closes on a way onward.
   ══════════════════════════════════════════════════════════════ */

.page > section:first-of-type{padding-top:clamp(140px,17vh,205px)}
.page > .exploded:first-of-type,
.page > .products:first-of-type{padding-top:0}
.page > .exploded:first-of-type .exploded__head{top:clamp(120px,15vh,175px)}

/* the current page reads as current in the nav */
.nav__links a[aria-current="page"]{background:var(--white);color:var(--indigo)}

/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS — three filmed acts on one pinned screen. Each
   clip scrubs across its third and dissolves into the next.
   ══════════════════════════════════════════════════════════════ */

.acts{position:relative;height:1400svh}
.acts__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#0b0d0e}
.acts__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  will-change:opacity,transform;background:#0b0d0e}
.acts__video[data-act-video="0"]{opacity:1}
.acts__vignette{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right, rgba(6,8,9,.86) 0%, rgba(6,8,9,.52) 42%, rgba(6,8,9,.12) 70%, rgba(6,8,9,.3) 100%),
  linear-gradient(to bottom, rgba(6,8,9,.5) 0%, rgba(6,8,9,0) 26%, rgba(6,8,9,0) 68%, rgba(6,8,9,.62) 100%)}

.acts__copy{position:absolute;inset:0;z-index:2;display:grid;align-items:center;color:#fff}
.acts__copy .eyebrow{color:var(--indigo-light);margin-bottom:var(--s5)}
.acts__copy .eyebrow .dot{background:var(--indigo-light)}

.acts__slides{position:relative;min-height:clamp(230px,26vh,300px);max-width:52ch}
.act{position:absolute;inset:0;opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);pointer-events:none}
.act.is-on{opacity:1;transform:none;pointer-events:auto}
.act__num{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--indigo-light);margin-bottom:var(--s3)}
.act .heading-lg{color:#fff;margin-bottom:var(--s3)}
.act .callout-desc{color:rgba(255,255,255,.72);max-width:44ch}
.act .callout-desc b{color:var(--indigo-light);font-weight:700}
.acts__more{margin-top:var(--s4);background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.acts__more:hover{border-color:#fff;color:#fff}

.acts__rail{position:absolute;right:var(--s5);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:var(--s3)}
.acts__rail li{display:flex;align-items:center;gap:12px;justify-content:flex-end;
  font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:color .4s var(--ease)}
.acts__rail li i{display:block;width:2px;height:26px;background:rgba(255,255,255,.24);position:relative;overflow:hidden}
.acts__rail li i::after{content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--indigo-light);
  transition:height .2s linear}
.acts__rail li.is-on{color:#fff}
.acts__rail li.is-on i::after{height:100%}
.acts__rail li.is-done i::after{height:100%;background:rgba(255,255,255,.5)}

@media (max-width:900px){
  .acts{height:1190svh}
  .acts__rail{display:none}
  .acts__vignette{background:
    linear-gradient(to bottom, rgba(6,8,9,.8) 0%, rgba(6,8,9,.34) 40%, rgba(6,8,9,.5) 100%)}
  .acts__slides{min-height:clamp(240px,34vh,320px)}
}


/* ══════════════════════════════════════════════════════════════
   HEADER TOOLS
   Six links, a cross-reference field and a CTA share one bar, so
   every part is sized to land inside the 1280 grid at full width.
   ══════════════════════════════════════════════════════════════ */
.nav__tools{display:flex;align-items:center;gap:10px;flex:none}

/* the cross-reference field — a pill with the action nested inside it */
.xref{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 6px;
  background:var(--white);border:1px solid var(--line);border-radius:9999px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease)}
.xref:focus-within{border-color:var(--indigo);box-shadow:0 0 0 4px var(--indigo-soft)}
.xref__in{width:180px;min-width:0;border:0;background:transparent;outline:none;
  font-family:"Space Mono",monospace;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--ink);
  padding:9px 4px 9px 10px;transition:width .4s var(--ease-out)}
.xref__in::placeholder{color:var(--faint)}
.xref__in::-webkit-search-cancel-button{-webkit-appearance:none}
.xref:focus-within .xref__in{width:224px}
.xref__go{flex:none;border:0;cursor:pointer;border-radius:9999px;padding:9px 14px;
  background:var(--ink);color:var(--white);
  font-family:"Space Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .35s var(--ease),transform .35s var(--ease)}
.xref__go:hover{background:var(--indigo);transform:translateY(-1px)}
.btn--bom{background:var(--indigo);color:var(--white);white-space:nowrap;
  font-size:11px;letter-spacing:.04em;padding:13px 20px;border-radius:9999px}
.btn--bom:hover{background:var(--ink);transform:translateY(-2px)}

.nav.is-over .xref{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.nav.is-over .xref__in{color:#fff}
.nav.is-over .xref__in::placeholder{color:rgba(255,255,255,.62)}
.nav.is-over .xref__go{background:#fff;color:var(--ink)}
.nav.is-over .btn--bom{background:#fff;color:var(--ink)}

/* the field repeats inside the mobile sheet, where there is room for it */
.mobile-menu .xref{display:flex;width:min(420px,86vw);margin-top:var(--s4);
  animation:menuIn .5s var(--ease-out) both;animation-delay:.28s}
.mobile-menu .xref__in{width:100%}


/* ══════════════════════════════════════════════════════════════
   ELBOW CURSOR — the product-led sections hand the pointer a fitting.
   Interactive elements keep their own affordance, and anyone who has
   asked for less motion/decoration is left with the system cursor.
   ══════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .range, .indfeat, .om6-story{cursor:url("../assets/img/ui/cursor-elbow.png") 6 14, auto}
  .range a,.range button,
  .indfeat a,.indfeat button,
  .om6-story a,.om6-story button{cursor:url("../assets/img/ui/cursor-elbow.png") 6 14, pointer}
  .om6-story input,.om6-story textarea{cursor:text}
}

/* ══════════════════════════════════════════════════════════════
   RANGE — five product families as a tetris bento, sized so all
   five land inside one viewport: a wider wrap, shorter rows and
   trimmed padding rather than a different layout.
     ┌─────────┬────┐
     │         │ B  │
     │    A    ├──┬─┤
     │         │C │D│
     ├────┬────┴──┴─┤
     │    E         │  (E fills the same two columns as A)
     └────┴──────────┘
   ══════════════════════════════════════════════════════════════ */
.range{padding-block:clamp(36px,4.6vh,68px)}
.range > .wrap{max-width:var(--wrap-wide)}
@media (min-width:1101px){
  .range{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .range > .wrap{width:100%}
}
.range__head{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:end;
  margin-bottom:clamp(18px,2.6vh,34px)}
@media (max-width:820px){ .range__head{grid-template-columns:1fr} }
.range__head .heading-lg{margin-top:var(--s2)}

.range__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(clamp(130px,17vh,250px),auto));gap:var(--s2)}
.range__grid > *:nth-child(1){grid-column:1/3;grid-row:1/3}   /* A — big  */
.range__grid > *:nth-child(2){grid-column:3/5;grid-row:1/2}   /* B — wide */
.range__grid > *:nth-child(3){grid-column:3/4;grid-row:2/4}   /* C — tall */
.range__grid > *:nth-child(4){grid-column:4/5;grid-row:2/4}   /* D — tall */
.range__grid > *:nth-child(5){grid-column:1/3;grid-row:3/4}   /* E — wide */

@media (max-width:1100px){
  .range__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
  .range__grid > *{grid-column:auto!important;grid-row:auto!important}
  .rcard--tall{grid-column:span 1!important}
  .rcard__stage{flex:none;aspect-ratio:1/.92}
}
@media (max-width:600px){ .range__grid{grid-template-columns:1fr} }

.rcard{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--radius);background:var(--neutral);
  transition:background-color .5s var(--ease),transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.rcard:hover{transform:translateY(-6px);box-shadow:0 40px 60px -44px rgba(45,52,54,.5)}

/* the bar runs horizontally — plate on the left, copy on the right */
.rcard--wide{flex-direction:row;align-items:stretch}
.rcard--wide .rcard__stage{flex:0 0 38%;border-right:1px solid var(--line-soft)}
.rcard--wide .rcard__body{flex:1;border-top:0;justify-content:center}
@media (max-width:1100px){
  .rcard--wide{flex-direction:column}
  .rcard--wide .rcard__stage{flex:none;aspect-ratio:1/.86;border-right:0}
  .rcard--wide .rcard__body{border-top:1px solid var(--line-soft)}
}

/* the two thin verticals: stage on top, a compact body below, no room
   for tags or a note beyond one line */
.rcard--tall .rcard__stage{flex:1 1 52%}
.rcard--tall .rcard__body{padding:var(--s3);gap:4px}
.rcard--tall .rcard__name{font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.06}
.rcard--tall .rcard__note{font-size:11.5px;line-height:1.45;max-width:none}
.rcard--tall .rcard__go{font-size:9px;padding-top:var(--s2)}
@media (max-width:1100px){ .rcard--tall .rcard__stage{aspect-ratio:1/.92} }

/* the stage the part stands on: a drafting grid that brightens on hover */
.rcard__stage{position:relative;flex:1;min-height:0;display:block;padding:var(--s4);
  background-image:
    linear-gradient(var(--grid-bold) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px);
  background-size:24px 24px;
  transition:background-color .5s var(--ease)}
.rcard--tall .rcard__stage{padding:var(--s3)}
.rcard__stage img{position:absolute;inset:var(--s4);width:auto;height:auto;
  max-width:calc(100% - var(--s4)*2);max-height:calc(100% - var(--s4)*2);margin:auto;object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(45,52,54,.22));
  transition:transform .75s var(--ease-out)}
.rcard--tall .rcard__stage img{inset:var(--s3);max-width:calc(100% - var(--s3)*2);max-height:calc(100% - var(--s3)*2)}
.rcard:hover .rcard__stage img{transform:scale(1.07) rotate(-1.2deg)}
.rcard__num{position:absolute;top:var(--s2);left:var(--s3);z-index:1;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--indigo)}
.rcard--tall .rcard__num{top:var(--s2);left:var(--s2)}
.rcard__stage .rcard__count{position:absolute;top:var(--s2);right:var(--s3);z-index:1;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.1em;color:var(--faint)}
.rcard--tall .rcard__stage .rcard__count{top:var(--s2);right:var(--s2);font-size:8.5px}
.rcard--wide .rcard__body .rcard__count{display:block;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.1em;color:var(--indigo);margin-bottom:2px}

.rcard__body{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:6px;flex:none}
.rcard__name{font-family:"Barlow Condensed",sans-serif;font-size:clamp(1.35rem,1.75vw,1.7rem);
  font-weight:600;line-height:1.02;letter-spacing:.005em;transition:color .4s var(--ease)}
.rcard--big .rcard__name{font-size:clamp(1.55rem,2.1vw,2.05rem)}
.rcard__note{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--muted);max-width:36ch}
.rcard__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.rcard__tags span{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--white);border:1px solid var(--line-soft);border-radius:9999px;padding:3px 8px}
.rcard__go{margin-top:auto;padding-top:var(--s2);display:inline-flex;align-items:center;gap:8px;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.rcard__go i{font-style:normal;transition:transform .45s var(--ease-out)}
.rcard:hover .rcard__go i{transform:translateX(5px)}

/* short desktop screens: shed the optional tag pills and tighten the head so
   the five tiles still land on one screen without cropping any card */
@media (min-width:1101px) and (max-height:880px){
  .range__head{margin-bottom:var(--s3)}
  .rcard__tags{display:none}
  .rcard__body{padding:var(--s3) var(--s3) var(--s3)}
}


/* ══════════════════════════════════════════════════════════════
   QUALIFICATIONS — a bento. One feature system, four systems, a
   wide interchange cell and a note cell. Issuer tint runs through
   the seal on every cell: DNV slate, ABS stone, TÜV ink.
   ══════════════════════════════════════════════════════════════ */
.quals{padding-block:clamp(40px,5vh,76px)}
.quals > .wrap{max-width:var(--wrap-wide)}
@media (min-width:1101px){
  .quals{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .quals > .wrap{width:100%}
  .quals .section-head{margin-bottom:0}
}

/* five columns across the wider wrap: the feature holds two of them over
   two rows, six systems fill the rest, and the last row is the interchange
   note beside the certificate note — three rows, one screen */
.qbento{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:minmax(clamp(106px,16vh,220px),auto);
  gap:var(--s2);margin-top:clamp(18px,2.4vh,34px)}
.qcell--feature{grid-column:1/3;grid-row:1/3}
.qcell--wide{grid-column:span 3}
.qcell--note{grid-column:span 2}
@media (max-width:1100px){
  .qbento{grid-template-columns:repeat(3,1fr)}
  .qcell--feature{grid-column:1/3;grid-row:1/3}
  .qcell--wide{grid-column:span 3}
  .qcell--note{grid-column:span 3}
}
@media (max-width:900px){
  .qbento{grid-template-columns:repeat(2,1fr)}
  .qcell--feature{grid-column:1/3;grid-row:auto}
  .qcell--wide,.qcell--note{grid-column:1/3}
}
@media (max-width:560px){
  .qbento{grid-template-columns:1fr}
  .qcell--feature,.qcell--wide,.qcell--note{grid-column:auto}
}

.qcell{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--white);
  border:1px solid var(--line-soft);padding:var(--s4);display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease)}
.qcell:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 34px 54px -34px rgba(45,52,54,.45)}
.qcell__seal{width:28px;height:28px;flex:none;color:var(--indigo)}
.qcell__name{font-family:"Barlow Condensed",sans-serif;font-weight:600;line-height:1.06;
  font-size:clamp(1.35rem,1.8vw,1.7rem);color:var(--ink)}
.qcell__desc{font-size:12.5px;font-weight:300;line-height:1.55;color:var(--muted)}
.qcell__by{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
/* issuer logos in place of the issuer's name */
/* the marks are white artwork on nothing: a ruled rectangle, no card. On the
   light cells the rule and the logo take the ink colour instead. */
.qcell__by--logo{display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:8px;background:transparent;border:1px solid var(--line);
  width:fit-content;letter-spacing:0}
.qcell__by--logo img{display:block;height:clamp(28px,3.2vh,36px);width:auto;max-width:170px;object-fit:contain;
  /* the files are white artwork; on a light cell, flip them to ink */
  filter:invert(1);opacity:.82;
  transition:opacity .4s var(--ease)}
.qcell:hover .qcell__by--logo img{opacity:1}
.qcell--feature .qcell__by--logo{border-color:rgba(255,255,255,.34);padding:12px 18px}
.qcell--feature .qcell__by--logo img{height:clamp(38px,4.4vh,50px);max-width:230px;filter:none;opacity:.95}
.qcell--wide .qcell__by--logo{margin-left:auto;align-self:center}
.qcell__code{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--indigo)}

/* the four square systems: seal, then name, desc, issuer stacked */
.qcell--a,.qcell--b,.qcell--c{gap:10px}
.qcell--a>.qcell__by,.qcell--b>.qcell__by,.qcell--c>.qcell__by{margin-top:auto;padding-top:var(--s3)}

/* the feature: taller, darker, the seal floated big and faint behind */
.qcell--feature{justify-content:space-between;background:var(--ink-2);border-color:transparent;
  color:#fff;min-height:clamp(300px,34vw,420px);
  background-image:radial-gradient(90% 80% at 85% 0%, rgba(72,52,212,.4), transparent 62%)}
.qcell--feature .qcell__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  position:relative;z-index:1}
.qcell--feature .qcell__seal{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);color:var(--indigo-light)}
.qcell--feature .qcell__by{color:rgba(255,255,255,.6)}
.qcell--feature .qcell__foot{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.qcell--feature .qcell__code{color:var(--indigo-light)}
.qcell--feature .qcell__name{color:#fff;font-size:clamp(2.2rem,3.4vw,3.2rem)}
.qcell--feature .qcell__desc{color:rgba(255,255,255,.7);font-size:14.5px;max-width:40ch}

/* the wide interchange cell: seal left, copy right, issuer trailing */
.qcell--wide{flex-direction:row;align-items:center;gap:var(--s4)}
.qcell--wide .qcell__widebody{display:flex;flex-direction:column;gap:8px}
.qcell--wide .qcell__by{margin-left:auto;align-self:flex-start;white-space:nowrap}
@media (max-width:560px){ .qcell--wide{flex-direction:column;align-items:flex-start}
  .qcell--wide .qcell__by{margin-left:0} }

/* the note cell: no seal, a quieter accent ground */
.qcell--note{background:var(--neutral);border-color:transparent;gap:8px;justify-content:center;
  flex-direction:column;align-items:flex-start}
.qcell__name--sm{font-size:clamp(1.15rem,1.5vw,1.4rem)}

/* issuer tint on the seal */
.qcell--a .qcell__seal{color:var(--indigo)}
.qcell--b .qcell__seal{color:#9a7a4f}
.qcell--c .qcell__seal{color:var(--ink)}
.qcell--feature .qcell__seal{color:var(--indigo-light)}

@media (min-width:1101px) and (max-height:880px){
  .quals .section-head{margin-bottom:0}
  .qbento{margin-top:var(--s3)}
  .qcell{padding:var(--s3)}
  .qcell__desc{font-size:12px;line-height:1.5}
}


.quals__note{margin-top:var(--s5);max-width:76ch;font-size:12.5px;font-weight:300;
  line-height:1.65;color:var(--faint)}


/* ══════════════════════════════════════════════════════════════
   MATERIALS TEASER — solid indigo, a live WebGL swatch on the
   right that takes on whichever grade is under the cursor
   ══════════════════════════════════════════════════════════════ */
.matband{padding-block:var(--s12);background:var(--indigo);color:#fff;position:relative;overflow:hidden}
.matband::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:72px 72px}
.matband .eyebrow--accent{color:#fff}
.matband .eyebrow .dot{background:#fff}
.matband .heading-lg{color:#fff}
.matband__lead{color:rgba(255,255,255,.72);max-width:48ch}

.matband__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:center}
@media (max-width:900px){ .matband__grid{grid-template-columns:1fr;gap:var(--s6)} }
.matband__col{min-width:0}

.chiprow--lg{gap:10px;margin-top:var(--s6)}
.chiprow--lg span{display:inline-flex;align-items:baseline;gap:7px;cursor:default;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);border-radius:9999px;padding:11px 18px;
  transition:background-color .4s var(--ease),transform .4s var(--ease-out),border-color .4s var(--ease)}
.chiprow--lg span:hover,.chiprow--lg span.is-live{background:#fff;color:var(--indigo);transform:translateY(-2px);border-color:#fff}
.chiprow--lg span i{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#646C6F}
.chiprow--lg span:hover i,.chiprow--lg span.is-live i{color:var(--indigo);opacity:.6}
.matband__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s8)}
.matband .btn--primary{background:#fff;color:var(--indigo)}
.matband .btn--primary:hover{background:var(--ink);color:#fff}
.matband .btn--outline{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.matband .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}



/* ══════════════════════════════════════════════════════════════
   APPROVALS & CLIENT MATRIX — redesigned bento cards with 
   engraved drafting tiles, live status lights, and micro-interactions
   ══════════════════════════════════════════════════════════════ */
.approvals {
  padding-block: var(--s12);
  border-top: 1px solid var(--line-soft);
  position: relative;
}

.approvals__head {
  margin-bottom: var(--s8);
}

/* Bento Matrix Layout */
.appr-matrix {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s6);
  align-items: stretch;
}

@media (max-width: 900px) {
  .appr-matrix {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
}

/* Individual Bento Card Container */
.appr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease-out);
}

.appr-card:hover {
  border-color: rgba(72, 52, 212, 0.28);
  box-shadow: 0 12px 36px rgba(72, 52, 212, 0.06);
}

/* Top bar inside card */
.appr-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
  gap: var(--s2);
}

.appr-card__code {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--indigo);
  font-weight: 700;
  text-transform: uppercase;
}

/* Status Indicator Dot & Pill */
.appr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--neutral);
  border: 1px solid var(--line-soft);
  font-family: "Space Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.appr-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 8px rgba(72, 52, 212, 0.6);
  animation: apprPulse 2s infinite ease-in-out;
}

.appr-status--verified .appr-status__dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

@keyframes apprPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* Card Headers */
.appr-card__hdr {
  margin-bottom: var(--s5);
}

.appr-card__title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.appr-card__sub {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* --- LOGO CARDS MATRIX GRID --- */
.appr-logo-grid {
  display: grid;
  gap: var(--s4);
  margin-top: auto;
}

.appr-logo-grid--reg {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.appr-logo-grid--supplied {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}

.appr-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s5) var(--s4);
  min-height: 115px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease);
}

.appr-logo-card:hover {
  border-color: rgba(72, 52, 212, 0.45);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(72, 52, 212, 0.1);
  background: #ffffff;
}

.appr-logo-img {
  width: 90%;
  max-width: 200px;
  height: auto;
  max-height: 74px;
  object-fit: contain;
  /* grey by default so no one client shouts over the others; colour
     returns on the card you are actually looking at */
  filter: grayscale(1) contrast(1.06);
  opacity: 0.82;
  transition: transform 0.35s var(--ease), filter 0.4s var(--ease), opacity 0.4s var(--ease);
}

.appr-logo-card:hover .appr-logo-img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1);
  opacity: 1;
}

.appr-logo-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(72, 52, 212, 0.08);
  color: var(--indigo);
  letter-spacing: 0.02em;
}

/* --- FOOTER BANNER --- */
.appr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(241, 242, 246, 0.65);
}

@media (max-width: 768px) {
  .appr-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.appr-footer__left {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.appr-footer__seal {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--indigo);
}

.appr-footer__note {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
  max-width: 72ch;
}



/* ══════════════════════════════════════════════════════════════
   MATERIALS + APPROVALS merged — the same two designs, set side by
   side on a wider wrap with the padding pulled in so the grades and
   the client logos land on one screen together.
   ══════════════════════════════════════════════════════════════ */
.matappr{padding-block:clamp(40px,5vh,76px)}
.matappr > .wrap{max-width:var(--wrap-wide)}
@media (min-width:1181px){
  .matappr{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .matappr > .wrap{width:100%}
}

.matappr__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(24px,3vw,56px);align-items:center}
@media (max-width:900px){ .matappr__grid{grid-template-columns:1fr;gap:var(--s5)} }

/* no swatch object any more: the band itself carries the grade, so the
   colour is set on the section and everything over it stays legible */
.matband{transition:background-color .6s var(--ease)}

/* the materials column, trimmed to share the row */
.matappr .matband__lead{max-width:42ch;margin-top:var(--s3)}
.matappr .chiprow--lg{margin-top:var(--s4);gap:7px}
.matappr .chiprow--lg span{padding:8px 14px}
.matappr .matband__cta{margin-top:var(--s4);gap:8px}

/* the approvals column: the same cards, re-toned for the indigo band */
.matappr .appr-matrix{display:flex;flex-direction:column;gap:var(--s3)}
.appr-matrix__eyebrow{color:#fff;margin-bottom:2px}
.appr-matrix__eyebrow .dot{background:#fff}
.matappr .appr-card{padding:var(--s4);gap:0;background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:none}
.matappr .appr-card:hover{border-color:rgba(255,255,255,.4);box-shadow:0 18px 40px -24px rgba(0,0,0,.5)}
.matappr .appr-card__top{margin-bottom:var(--s3)}
.matappr .appr-card__code{color:#fff;opacity:.85}
.matappr .appr-status{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.matappr .appr-status__dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
.matappr .appr-card__hdr{margin-bottom:var(--s3)}
.matappr .appr-card__title{color:#fff;font-size:clamp(1.2rem,1.5vw,1.5rem)}
.matappr .appr-card__sub{color:rgba(255,255,255,.7);max-width:56ch}
.matappr .appr-logo-grid{gap:var(--s2)}
.matappr .appr-logo-grid--reg{grid-template-columns:repeat(2,minmax(0,1fr))}
.matappr .appr-logo-grid--supplied{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){ .matappr .appr-logo-grid--supplied{grid-template-columns:repeat(7,minmax(0,1fr))} }
@media (max-width:820px){
  .matappr .appr-logo-grid--supplied{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
.matappr .appr-logo-card{min-height:0;padding:var(--s3) var(--s2);
  background:transparent;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.matappr .appr-logo-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);
  transform:translateY(-3px);box-shadow:none}
.matappr .appr-logo-img{height:clamp(42px,4.6vh,56px);width:auto;max-width:94%;max-height:none;
  filter:none;opacity:.92;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.matappr .appr-logo-card:hover .appr-logo-img{opacity:1}
.matappr .appr-logo-badge{background:rgba(255,255,255,.16);color:#fff}
.matappr .appr-logo-badge{position:static;margin-top:6px;font-size:8.5px;padding:2px 6px;
  background:rgba(72,52,212,.1)}

@media (min-width:1181px) and (max-height:880px){
  .matappr .chiprow--lg{margin-top:var(--s3);gap:6px}
  .matappr .chiprow--lg span{padding:6px 11px}
  .matappr .matband__cta{margin-top:var(--s3)}
  .matappr .appr-card{padding:var(--s3)}
  .matappr .appr-card__top,.matappr .appr-card__hdr{margin-bottom:var(--s2)}
  .matappr .appr-logo-card{padding:var(--s2)}
}

/* ══════════════════════════════════════════════════════════════
   ANATOMY — a pinned five-scene walkthrough. The part travels and
   scales between four stops while the copy crossfades under it;
   the stage tone turns from paper to blueprint at the third scene,
   and the last two run a gauge and a closing card.
   ══════════════════════════════════════════════════════════════ */
.anatomy{position:relative}
.anatomy__track{position:relative;height:560svh}
.anatomy__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--white)}
/* an indigo cast that only arrives with the dark half, so the blueprint
   state reads as lit rather than as flat black */
.anatomy__stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(90% 70% at 78% 12%, rgba(72,52,212,.30), transparent 62%),
             radial-gradient(70% 60% at 10% 96%, rgba(72,52,212,.18), transparent 60%);
  transition:opacity .7s var(--ease)}
.anatomy__stage.is-dark::after{opacity:1}
.anatomy__inner{position:relative;width:100%;height:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--s5)}
.anatomy__scene{position:absolute;right:var(--s5);top:var(--s6);z-index:8;
  font-size:11px;letter-spacing:.22em;color:var(--faint);transition:color .5s var(--ease)}
.anatomy__stage.is-dark .anatomy__scene{color:rgba(255,255,255,.55)}

/* ── the copy column ─────────────────────────────────────── */
.ancopy{position:absolute;left:var(--s5);top:50%;width:min(38vw,520px);z-index:6;
  opacity:0;pointer-events:none;will-change:opacity,transform}
.ancopy.is-on{pointer-events:auto}
.ancopy .heading-lg{margin:var(--s3) 0 var(--s4);transition:color .5s var(--ease)}
.ancopy__p{font-size:16.5px;font-weight:300;line-height:1.6;color:var(--muted);max-width:40ch;
  transition:color .5s var(--ease)}
.anfig{margin-top:var(--s5);display:flex;align-items:center;gap:10px;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.anfig::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.anatomy__stage.is-dark .ancopy .heading-lg{color:#fff}
.anatomy__stage.is-dark .ancopy__p{color:rgba(255,255,255,.66)}
.anatomy__stage.is-dark .ancopy .eyebrow--accent{color:var(--indigo-light)}
.anatomy__stage.is-dark .ancopy .eyebrow .dot{background:var(--indigo-light)}
.anatomy__stage.is-dark .anfig{color:rgba(255,255,255,.5)}

/* the pressure readout on scene four */
.anreadout{margin-top:var(--s5);display:flex;align-items:baseline;gap:12px;color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-size:clamp(3rem,5.4vw,5rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.anreadout small{font-family:"Space Mono",monospace;font-size:13px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.anreadout b{font-family:"Space Mono",monospace;font-size:13px;font-weight:400;letter-spacing:.1em;
  color:rgba(255,255,255,.42)}

/* ── the visual column ───────────────────────────────────── */
.anvis{position:absolute;left:38%;right:var(--s5);top:clamp(92px,12vh,128px);bottom:var(--s6);z-index:4;pointer-events:none}

/* the explode is the annotated diagram: contained and centred in the visual
   column on the light stage, so the callout nodes land on the real parts.
   The bench, by contrast, is atmosphere — it covers the stage edge to edge. */
.anmedia--part{position:absolute;left:38%;right:var(--s5);top:clamp(92px,12vh,128px);bottom:var(--s6);
  z-index:1;will-change:transform,opacity;pointer-events:none}
.anmedia--part video{width:100%;height:100%;object-fit:contain;display:block}

.anmedia--bench{position:absolute;top:0;bottom:0;left:calc(var(--s5) * -1);right:calc(var(--s5) * -1);
  z-index:1;will-change:transform,opacity;pointer-events:none}
.anmedia--bench video{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.8) contrast(1.06) saturate(.9);
  -webkit-mask-image:
    linear-gradient(to right, transparent 2%, #000 36%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 2%, #000 36%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-composite:intersect}

/* ── callouts (client's annotation model): a node dot on the part, a leader
      to a card set beside it. Premium in our type — Barlow name, Space Mono
      tag, indigo node with a pulse ring. ── */
.ancallouts{position:absolute;inset:0;opacity:0;pointer-events:none}
.anleaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anleaders line{stroke:var(--indigo);stroke-width:1.1;opacity:0;transition:opacity .4s var(--ease)}
.anleaders line.is-on{opacity:.6}
.anco{position:absolute;width:230px;padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.92);border:1px solid var(--line-soft);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 22px 48px -28px rgba(45,52,54,.55);
  font-size:12.5px;font-weight:300;line-height:1.5;color:var(--muted);
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease-out)}
.anco.is-on{opacity:1;transform:none}
.anco b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:600;
  line-height:1.04;color:var(--ink);margin-bottom:6px}
.anco i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--indigo);
  box-shadow:0 0 0 4px rgba(72,52,212,.18)}
.anco i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--indigo);
  opacity:.5;animation:ping 2.4s var(--ease-out) infinite}

/* the test grid on scene three */
.angrid{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(100%,640px);
  opacity:0;will-change:opacity}
.ancells{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18)}
.ancell{background:var(--ink-2);padding:14px 14px 16px;min-height:116px;
  display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease-out)}
.ancell.is-on{opacity:1;transform:none}
.ancell b{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--indigo-light)}
.ancell span{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600;line-height:1.1;color:#fff}
.ancell em{font-style:normal;font-size:12px;font-weight:300;line-height:1.4;color:rgba(255,255,255,.55);margin-top:auto}
.ansupp{margin-top:12px;font-size:12.5px;font-weight:300;color:rgba(255,255,255,.55);
  opacity:0;transition:opacity .35s var(--ease)}
.ansupp.is-on{opacity:1}

/* the bench on scene four, given the same full-bleed treatment */
.anbench{margin:0;opacity:0}
.anbench__cap{position:absolute;left:26%;top:16%;display:flex;align-items:center;gap:8px;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.anbench__cap i{width:16px;height:1px;background:currentColor;opacity:.6}

/* the closing card */
.anresult{position:absolute;left:var(--s5);right:var(--s5);bottom:9vh;z-index:7;
  opacity:0;transform:translateY(28px);pointer-events:none;will-change:opacity,transform}
.anresult.is-on{pointer-events:auto}
.anresult__grid{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:var(--s5);
  border-top:1px solid rgba(255,255,255,.3);padding-top:var(--s4);color:#fff}
.anresult b{display:block;font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(2.2rem,4vw,3.8rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.anresult b small{font-family:"Space Mono",monospace;font-size:.28em;font-weight:400;
  letter-spacing:.1em;margin-left:5px;color:rgba(255,255,255,.6)}
.anresult span{display:block;margin-top:8px;font-size:12.5px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.6)}
.anresult p{margin:0;font-size:13.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.72)}
.anresult__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.anresult__cta .btn{padding:12px 16px;font-size:11px;letter-spacing:.05em}
.anresult .btn--primary{background:#fff;color:var(--ink)}
.anresult .btn--primary:hover{background:var(--indigo);color:#fff}
.anresult .btn--outline{background:transparent;border-color:rgba(255,255,255,.36);color:#fff}
.anresult .btn--outline:hover{border-color:#fff}

.anprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(45,52,54,.08);z-index:9;
  transition:background-color .5s var(--ease)}
.anatomy__stage.is-dark .anprog{background:rgba(255,255,255,.12)}
.anprog i{display:block;height:100%;width:0;background:var(--indigo)}
.anatomy__stage.is-dark .anprog i{background:var(--indigo-light)}

@media (max-width:900px){
  .anatomy__track{height:460svh}
  .ancopy{left:var(--s4);right:var(--s4);width:auto;top:auto;bottom:var(--s5);transform:none!important}
  .ancopy .heading-lg{font-size:clamp(2rem,9vw,2.8rem)}
  .ancopy__p{font-size:14px;max-width:none}
  .anfig{display:none}
  .anvis{left:0;right:0;top:clamp(76px,10vh,96px);bottom:40vh}
  /* no room for a side-by-side on a phone: the film takes the upper field
     and the copy sits under it, so the left-edge fade is not needed */
  .anmedia,.anmedia--bench{left:0;right:0;top:clamp(66px,9vh,88px);bottom:38vh}
  .anmedia video{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%)}
  .anbench__cap{left:var(--s4);top:var(--s4)}
  .anco i,.anleaders{display:none}
  /* one card at a time, parked under the part */
  .ancallouts{inset:auto var(--s4) var(--s3) var(--s4);top:auto;z-index:7;min-height:118px}
  .anco{position:absolute;left:0;right:0;bottom:0;width:auto;background:var(--white)}
  .angrid{width:92vw;top:50%}
  .ancell{min-height:0;padding:9px 10px 10px}
  .ancell span{font-size:14px}
  .ancell em{display:none}
  .anresult{left:var(--s4);right:var(--s4);bottom:var(--s4)}
  .anresult__grid{grid-template-columns:1fr 1fr;gap:var(--s3);padding-top:var(--s3)}
  .anresult b{font-size:1.8rem}
  .anresult p{font-size:12.5px}
}


/* ══════════════════════════════════════════════════════════════
   INDUSTRIES — a pinned stage. One industry card sits centred and
   grows in as its slice of the scroll opens, holds, then crossfades
   to the next. Eight cards, one scroll. JS sets --p on each card.
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   INDUSTRIES — a bento of five, all on one screen. The lead sector
   runs wide across the top; the other four share the row beneath.
   No pin, no scroll-swap: everything is in view at once.
   ══════════════════════════════════════════════════════════════ */
/* transparent ground: the body's drafting sheet reads straight through,
   with only a faint indigo wash over the top of the section */
.indfeat{position:relative;padding-block:clamp(40px,5vh,76px);color:var(--ink)}
.indfeat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, var(--grid-bold), transparent 65%)}
.indfeat__inner{position:relative;z-index:1;max-width:var(--wrap-wide)}
@media (min-width:1101px){
  .indfeat{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .indfeat__inner{width:100%}
}

.indfeat__head{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:end;
  margin-bottom:clamp(18px,2.6vh,34px)}
@media (max-width:900px){ .indfeat__head{grid-template-columns:1fr} }
.indfeat__head .eyebrow{color:var(--indigo);font-weight:700}
.indfeat__head .eyebrow .dot{background:var(--indigo)}
.indfeat__head .heading-lg{margin-top:var(--s2)}
.indfeat__note{max-width:44ch;color:var(--muted)}

.indfeat__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:var(--s2);height:clamp(320px,50vh,620px);
  transition:grid-template-columns .55s var(--ease-out),grid-template-rows .55s var(--ease-out)}
.indcard--lead{grid-column:1/3;grid-row:1/3}

/* a reactive collage: the card under the cursor takes the space, the rest
   give it up. The grid's own tracks carry the motion, so the cards genuinely
   resize and reflow rather than scaling over one another. */
@media (hover:hover) and (min-width:1101px){
  .indfeat__grid:has(.indcard:nth-child(1):hover){grid-template-columns:1.36fr 1.36fr .64fr .64fr}
  .indfeat__grid:has(.indcard:nth-child(2):hover){grid-template-columns:.76fr .76fr 1.76fr .72fr;
    grid-template-rows:1.3fr .7fr}
  .indfeat__grid:has(.indcard:nth-child(3):hover){grid-template-columns:.76fr .76fr .72fr 1.76fr;
    grid-template-rows:1.3fr .7fr}
  .indfeat__grid:has(.indcard:nth-child(4):hover){grid-template-columns:.76fr .76fr 1.76fr .72fr;
    grid-template-rows:.7fr 1.3fr}
  .indfeat__grid:has(.indcard:nth-child(5):hover){grid-template-columns:.76fr .76fr .72fr 1.76fr;
    grid-template-rows:.7fr 1.3fr}
  /* the ones you are not looking at recede */
  .indfeat__grid:has(.indcard:hover) .indcard:not(:hover){filter:brightness(.5) saturate(.7)}
  .indfeat__grid:has(.indcard:hover) .indcard:not(:hover) .indcard__body{opacity:.45}
}

@media (max-width:1100px){
  .indfeat__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;
    grid-auto-rows:clamp(180px,30vw,240px);height:auto}
  .indcard--lead{grid-column:1/-1;grid-row:auto}
}
@media (max-width:560px){
  .indfeat__grid{grid-template-columns:1fr;grid-auto-rows:clamp(190px,54vw,240px)}
}

.indcard{position:relative;overflow:hidden;min-width:0;min-height:0;border-radius:var(--radius-lg);
  transition:filter .55s var(--ease-out);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.07);
  transition:box-shadow .45s var(--ease),transform .55s var(--ease-out)}
.indcard:hover{transform:translateY(-5px);
  box-shadow:0 44px 90px -38px rgba(0,0,0,.5), 0 0 0 1px rgba(72,52,212,.3)}

.indcard::before{content:"";position:absolute;inset:0;background-image:var(--img);
  background-size:cover;background-position:center;
  transform:scale(1.04);transition:transform .9s var(--ease-out)}
.indcard:hover::before{transform:scale(1.1)}

.indcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,9,14,.94) 0%, rgba(8,9,14,.5) 46%, rgba(8,9,14,.08) 78%)}

.indcard__body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,1.9vw,30px);display:flex;flex-direction:column;gap:8px;
  transition:opacity .45s var(--ease-out)}
.indcard--lead .indcard__body{padding:clamp(22px,2.4vw,40px);gap:10px}

.indcard__no{display:inline-flex;align-items:center;width:fit-content;padding:3px 10px;
  border-radius:100px;background:rgba(72,52,212,.34);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.16em}

.indcard__name{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,1.85vw,2.05rem);line-height:.98;letter-spacing:-.01em;color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.6)}
.indcard--lead .indcard__name{font-size:clamp(2.1rem,3.3vw,3.4rem)}

.indcard__note{font-size:12.5px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);
  max-width:46ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.indcard--lead .indcard__note{font-size:15px;line-height:1.55;-webkit-line-clamp:4}

/* ══════════════════════════════════════════════════════════════
   TUBING — the product page
   ══════════════════════════════════════════════════════════════ */
.tub-hero{padding-bottom:var(--s10)}
.tub-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
@media (max-width:960px){ .tub-hero__grid{grid-template-columns:1fr;gap:var(--s6)} }
.tub-hero .display{margin:var(--s4) 0 var(--s5);font-size:clamp(3rem,7vw,6rem)}
.tub-hero__lead{max-width:44ch;color:var(--muted);font-size:17px;font-weight:300}
.tub-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.tub-hero__plate{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--neutral);
  padding:var(--s6);display:block;aspect-ratio:1/.86;
  background-image:
    linear-gradient(var(--grid-bold) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px);
  background-size:28px 28px}
.tub-hero__plate img{position:absolute;inset:var(--s6);width:auto;height:auto;max-width:calc(100% - var(--s6)*2);max-height:calc(100% - var(--s6)*2);margin:auto;object-fit:contain;filter:drop-shadow(0 26px 34px rgba(45,52,54,.24))}
.tub-hero__stamp{position:absolute;left:var(--s4);bottom:var(--s4);
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* the envelope strip, reusing the band idiom but on the light ground */
.tub-env{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);
  border-block:1px solid var(--line-soft);padding-block:var(--s5);margin-top:var(--s8)}
@media (max-width:760px){ .tub-env{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s2)} }
.tub-env dt{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.tub-env dd{font-family:"Barlow Condensed",sans-serif;font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1}
.tub-env em{font-style:normal;font-family:"Hanken Grotesk",sans-serif;font-size:13px;color:var(--faint);margin-left:4px}

/* ── the series: an alternating berth, one row per family ──── */
.series{padding-block:var(--s12);border-top:1px solid var(--line-soft)}
.serie{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;
  padding-block:var(--s10);border-bottom:1px solid var(--line-soft)}
.serie:last-child{border-bottom:0}
@media (max-width:900px){ .serie{grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s8)} }
.serie:nth-child(even) .serie__plate{order:2}
@media (max-width:900px){ .serie:nth-child(even) .serie__plate{order:0} }
.serie__plate{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--neutral);
  aspect-ratio:4/3;display:block;padding:var(--s6);
  background-image:
    linear-gradient(var(--grid-bold) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px);
  background-size:24px 24px}
.serie__plate img{position:absolute;inset:var(--s6);width:auto;height:auto;max-width:calc(100% - var(--s6)*2);max-height:calc(100% - var(--s6)*2);margin:auto;object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(45,52,54,.2));
  transition:transform .8s var(--ease-out)}
.serie:hover .serie__plate img{transform:scale(1.05)}
/* the four bundles photograph almost identically — flip alternate rows so the
   berth reads as a sequence rather than a repeated asset */
.serie:nth-child(odd) .serie__plate img{transform:scaleX(-1)}
.serie:nth-child(odd):hover .serie__plate img{transform:scaleX(-1) scale(1.05)}
.serie__tag{position:absolute;top:var(--s3);left:var(--s4);
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--indigo)}
.serie__psi{position:absolute;right:var(--s4);bottom:var(--s4);
  font-family:"Barlow Condensed",sans-serif;font-size:clamp(28px,4vw,52px);font-weight:700;line-height:.9;
  color:rgba(45,52,54,.12)}
.serie h3{font-family:"Barlow Condensed",sans-serif;font-size:clamp(2rem,3.4vw,3.1rem);
  font-weight:600;line-height:1;margin:var(--s2) 0 var(--s3)}
.serie p{font-size:15.5px;font-weight:300;line-height:1.66;color:var(--muted);max-width:50ch}

.serie__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:var(--s5);
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden}
.serie__specs > div{background:var(--white);padding:var(--s3) var(--s4)}
.serie__specs dt{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin-bottom:4px}
.serie__specs dd{font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:600;line-height:1.1}

/* ── the size table ───────────────────────────────────────── */
.sizes{padding-block:var(--s12);border-top:1px solid var(--line-soft)}
.tablewrap{margin-top:var(--s8);overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
table.dims{width:100%;border-collapse:collapse;min-width:640px;background:var(--white)}
table.dims caption{caption-side:bottom;padding:var(--s3) var(--s4);text-align:left;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--faint)}
table.dims th,table.dims td{padding:13px var(--s4);text-align:left;border-bottom:1px solid var(--line-soft)}
table.dims thead th{font-family:"Space Mono",monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);background:var(--neutral);white-space:nowrap}
table.dims tbody th{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600}
table.dims td{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--muted)}
table.dims tbody tr{transition:background-color .3s var(--ease)}
table.dims tbody tr:hover{background:var(--indigo-soft)}
table.dims tbody tr:last-child th,table.dims tbody tr:last-child td{border-bottom:0}

/* ── grades + finishes strip ──────────────────────────────── */
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.chiprow span{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  color:var(--ink);background:var(--neutral);border-radius:9999px;padding:8px 14px;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.chiprow span:hover{background:var(--indigo);color:#fff}

/* ── accessories ──────────────────────────────────────────── */
.acc{padding-block:var(--s12);border-top:1px solid var(--line-soft)}
.acc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s8)}
@media (max-width:900px){ .acc__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .acc__grid{grid-template-columns:1fr} }
.acc__card{border-radius:var(--radius);overflow:hidden;background:var(--neutral);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.acc__card:hover{transform:translateY(-5px);box-shadow:0 36px 54px -42px rgba(45,52,54,.5)}
.acc__card figure{display:block;margin:0}
.acc__plate{position:relative;display:block;aspect-ratio:4/3;padding:var(--s5);
  background-image:
    linear-gradient(var(--grid-bold) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px);
  background-size:22px 22px}
.acc__plate img{position:absolute;inset:var(--s5);width:auto;height:auto;max-width:calc(100% - var(--s5)*2);max-height:calc(100% - var(--s5)*2);margin:auto;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(45,52,54,.2))}
.acc__card figcaption{padding:var(--s4);border-top:1px solid var(--line-soft)}
.acc__card b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:1.4rem;font-weight:600;line-height:1.05}
.acc__card span{display:block;margin-top:4px;font-size:13px;font-weight:300;color:var(--muted)}


/* ══════════════════════════════════════════════════════════════
   BOM — the enquiry drop, on the contact page
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   BOM — a dark, indigo-lit drop zone. The one section on the page
   that asks the visitor to hand something over, so it gets the
   same over-dark treatment as the enquiry CTA rather than sitting
   quietly in the white system.
   ══════════════════════════════════════════════════════════════ */
.bom{padding-block:var(--s12);position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 15% 0%, rgba(72,52,212,.42), transparent 58%),
             radial-gradient(90% 70% at 100% 100%, rgba(72,52,212,.24), transparent 55%) var(--ink-2)}
.bom::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:96px 96px}
.bom .wrap{position:relative;z-index:1}
.bom .eyebrow--accent{color:var(--indigo-light)}
.bom .eyebrow .dot{background:var(--indigo-light)}
.bom .heading-lg{color:#fff}
.bom .body{color:rgba(255,255,255,.6)}

.bom__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);margin-top:var(--s8);align-items:start}
@media (max-width:900px){ .bom__grid{grid-template-columns:1fr;gap:var(--s6)} }

/* the drop zone: a glass card, same language as the mill-floor fact
   cards — gradient wash, hairline border, blur, a lit top edge */
.drop{position:relative;display:block;overflow:hidden;border:1.5px dashed rgba(255,255,255,.3);border-radius:var(--radius);
  padding:var(--s10) var(--s5);text-align:center;cursor:pointer;
  background:linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:border-color .4s var(--ease),background-color .4s var(--ease),transform .4s var(--ease-out)}
.drop::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%)}
.drop:hover,.drop.is-over{border-color:var(--indigo-light);background:linear-gradient(150deg, rgba(72,52,212,.28), rgba(72,52,212,.08));transform:translateY(-2px)}
.drop b{position:relative;display:block;font-family:"Barlow Condensed",sans-serif;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:600;color:#fff}
.drop span{position:relative;display:block;margin-top:8px;font-size:13.5px;font-weight:300;color:rgba(255,255,255,.6)}
.drop input{display:none}
.droplist{margin-top:var(--s4);display:flex;flex-direction:column;gap:6px}
.droplist li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:10px var(--s3);
  font-family:"Space Mono",monospace;font-size:11px;color:rgba(255,255,255,.55)}
.droplist li b{color:#fff;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.field label{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.field input,.field textarea{width:100%;font-family:inherit;font-size:15px;font-weight:300;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);padding:12px 14px;outline:none;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:var(--indigo-light);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(72,52,212,.28)}
.field--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:520px){ .field--pair{grid-template-columns:1fr} }
.bom .btn--primary{background:#fff;color:var(--ink)}
.bom .btn--primary:hover{background:var(--indigo);color:#fff}
.bom__note{margin-top:var(--s3);font-size:12.5px;font-weight:300;color:rgba(255,255,255,.4);max-width:52ch}
.range__note{max-width:38ch;color:var(--muted)}
.mobile-menu a:nth-child(7){animation-delay:.28s}
.mobile-menu a:nth-child(8){animation-delay:.32s}

/* ── header fit ────────────────────────────────────────────── */
.nav__inner{gap:var(--s3)}
.lockup{flex:none}
.nav__links{flex:none;margin-inline:auto}
.nav__tools{flex:none}

@media (max-width:1340px){
  .nav__links a{padding:8px 10px;font-size:10.5px;letter-spacing:.03em}
  .lockup{gap:10px}
  .lockup__mark{height:26px}
  .xref__in{width:172px;padding-left:8px}
  .xref:focus-within .xref__in{width:200px}
  .btn--bom{padding:14px 18px}
}
@media (max-width:1250px){
  .xref__in{width:128px}
  .xref:focus-within .xref__in{width:172px}
}
@media (max-width:1180px){ .xref{display:none} }
@media (max-width:1060px){ .nav__tools{display:none} }

/* ===== OM6 FERRULE & BURST SECTION STYLES — SITE UI DESIGN SYSTEM ===== */
.ferrule{position:relative;color:var(--ink)}
.ferrule .track{height:780vh;position:relative}
.ferrule .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:transparent;transition:none}
.ferrule .stage-inner{position:relative;width:100%;height:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
/* the plate the scene is drawn on: a rule frame with corner ticks, in the
   same drafting language as the rest of the sheet, fading out when the
   stage turns over to the dark bench */
.ferrule .stage-inner::before{content:"";position:absolute;
  inset:clamp(16px,2.4vh,32px) clamp(20px,4vw,56px);
  border:1px solid var(--grid-bold);pointer-events:none;z-index:0;
  transition:opacity .6s var(--ease)}
.ferrule .stage-inner::after{content:"OM6 · TWIN-FERRULE ASSEMBLY";position:absolute;
  left:clamp(28px,4vw,64px);bottom:clamp(22px,2.8vh,38px);z-index:0;pointer-events:none;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--faint);
  transition:opacity .6s var(--ease)}
.ferrule .stage.dark .stage-inner::before,
.ferrule .stage.dark .stage-inner::after{opacity:0}
@media (max-width:900px){ .ferrule .stage-inner::after{display:none} }
.ferrule .progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(45,52,54,.08);z-index:9}
.ferrule .progress i{display:block;height:100%;width:0;background:var(--indigo)}
.ferrule .scene-no{position:absolute;right:clamp(20px,4vw,56px);top:28px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);z-index:8}
.ferrule .dark .scene-no{color:rgba(255,255,255,.6)}

/* copy column */
.ferrule .copy{position:absolute;left:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);width:min(32vw,420px);opacity:0;will-change:opacity,transform;pointer-events:none;z-index:10}
.ferrule .copy.on{pointer-events:auto}
.ferrule .eyebrow{display:flex;width:fit-content;align-items:center;gap:10px;font-family:"Space Mono",monospace;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0}
.ferrule .eyebrow--accent{color:var(--indigo)}
.ferrule .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);flex:none}
.ferrule h2{font-family:"Barlow Condensed","Hanken Grotesk",system-ui,sans-serif;font-weight:700;font-size:var(--h);line-height:.98;letter-spacing:-.005em;margin:var(--s4) 0 0;padding-top:.06em;color:var(--ink)}
.ferrule .copy p:not(.eyebrow){margin:20px 0 0;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;font-weight:300;line-height:1.68;color:var(--muted);max-width:62ch}
.ferrule .fig{margin-top:24px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--faint);display:flex;gap:10px;align-items:center}
.ferrule .fig::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.ferrule .dark h2{color:#fff}
.ferrule .dark .copy p{color:rgba(255,255,255,.76)}
.ferrule .dark .eyebrow--accent{color:var(--indigo-light)}
.ferrule .dark .eyebrow .dot{background:var(--indigo-light)}
.ferrule .dark .fig{color:rgba(255,255,255,.55)}

/* readout counter */
.ferrule .readout{margin-top:26px;font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;font-size:clamp(48px,5.5vw,76px);font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff;display:flex;align-items:baseline;gap:12px}
.ferrule .readout small{font-family:"Space Mono",monospace;font-size:13px;font-weight:400;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em}
.ferrule .readout .bar{font-family:"Space Mono",monospace;font-size:13px;font-weight:400;color:rgba(255,255,255,.55);letter-spacing:.1em}

/* visual column */
.ferrule .visual{position:absolute;left:40%;right:clamp(20px,4vw,56px);top:0;bottom:0}
.ferrule .elbow{position:absolute;left:50%;top:50%;width:min(48vw,720px);transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;pointer-events:none}
.ferrule .elbow.front{opacity:1}
.ferrule .nut{position:absolute;left:50%;top:50%;width:min(28vw,400px);transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;pointer-events:none}

/* callouts over the nut image */
.ferrule .callouts{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:11}
.ferrule .co{position:absolute;width:240px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12.5px;font-weight:300;line-height:1.55;color:var(--muted);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;background:var(--white);padding:14px 16px 15px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);box-shadow:0 24px 48px -26px rgba(45,52,54,.5);z-index:12}
/* numbered header rule, the same mono index the product tiles carry */
.ferrule .co__no{display:block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--indigo);margin-bottom:9px;padding-bottom:9px;
  border-bottom:1px solid var(--line-soft)}
.ferrule .co.on{opacity:1;transform:none}
.ferrule .co b{display:block;font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;font-weight:700;font-size:1.25rem;line-height:.98;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px;text-transform:uppercase}
/* the free card states a part rather than pointing at one */
.ferrule .co--free i{display:none}
.ferrule .co--free{background:rgba(255,255,255,.9);border-style:dashed}
.ferrule .co i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 4px rgba(72,52,212,.2);pointer-events:none;z-index:13}
.ferrule .callouts svg.leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6}
.ferrule .callouts svg.leaders line{stroke:var(--indigo);stroke-width:1.5;opacity:0;transition:opacity .35s}
.ferrule .callouts svg.leaders line.on{opacity:.8}

/* ASTM F1387-23 — the nine standard tests, dealt out over the dark stage.
   Built in the site's own card language rather than the prototype's serif:
   mono clause index, condensed name, muted note. */
.ferrule .tgrid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100%,690px);opacity:0;will-change:opacity;z-index:5}

/* each test is its own card. The gap is a real gap, not a 1px rule showing
   through a container fill — that fill was what left a large empty slab on
   screen while the cells were still being dealt in. */
.ferrule .tcells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ferrule .tcell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);padding:14px 15px 15px;min-height:124px;
  display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.ferrule .tcell.on{opacity:1;transform:none}

/* the clause number sits over a hairline, the same header rule the nut
   callouts use, so the two card families read as one system */
.ferrule .tcell b{font-family:"Space Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--indigo-light);padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ferrule .tcell span{font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;font-weight:600;
  font-size:1.15rem;line-height:1.06;letter-spacing:.005em;color:#fff}
.ferrule .tcell em{font-style:normal;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12px;
  font-weight:300;line-height:1.45;color:rgba(255,255,255,.6);margin-top:auto}
.ferrule .tsupp{margin-top:14px;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);opacity:0;transition:opacity .35s var(--ease)}
.ferrule .tsupp.on{opacity:1}
@media (max-width:900px){
  .ferrule .tgrid{width:min(100%,520px)}
  .ferrule .tcells{gap:7px}
  .ferrule .tcell{min-height:0;padding:9px 10px 10px;gap:5px}
  .ferrule .tcell b{font-size:9px;letter-spacing:.14em;padding-bottom:6px}
  .ferrule .tcell span{font-size:.84rem;line-height:1.05}
  .ferrule .tcell em{font-size:10px;line-height:1.35}
  .ferrule .tsupp{font-size:9px;margin-top:9px}
}

/* bench + gauge */
.ferrule .bench{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%,64vh*1.11);aspect-ratio:956/860;opacity:0;will-change:opacity;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);overflow:hidden;background:#000}
.ferrule .bench video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ferrule .bench video{opacity:1}
.ferrule .bench .dim{position:absolute;inset:0;background:var(--ink-2);opacity:0}
.ferrule .bench .cam{position:absolute;left:16px;top:14px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.ferrule .bench .cam::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4757;box-shadow:0 0 8px #ff4757}
.ferrule .gauge{position:absolute;right:-2%;bottom:5%;width:min(44%,34vh);aspect-ratio:1;opacity:0;
  will-change:opacity;border-radius:50%;overflow:hidden;background:#F1F2F6;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.ferrule .gauge video{width:100%;height:100%;display:block;object-fit:cover}
.ferrule .marker{position:absolute;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.85);opacity:0;transition:opacity .3s}
.ferrule .marker.on{opacity:1}

/* result plate — a right-hand column beside the bench film, so the closing
   frame is two balanced halves rather than a narrow video stranded above a
   stats row stretched across the full stage */
.ferrule .result{position:absolute;left:auto;right:clamp(20px,4vw,56px);
  top:50%;bottom:auto;width:min(44%,560px);
  opacity:0;transform:translateY(-50%);will-change:opacity,transform;pointer-events:none;z-index:10}
.ferrule .result.on{pointer-events:auto}
.ferrule .result__kicker{color:var(--indigo-light);margin-bottom:var(--s3)}
.ferrule .result__kicker .dot{background:var(--indigo-light)}
.ferrule .result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
  border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.12);
  padding:var(--s4) 0;color:#fff}
.ferrule .result b{display:block;font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;font-weight:700;
  font-size:clamp(26px,2.3vw,40px);line-height:1;letter-spacing:-.02em}
.ferrule .result b small{font-family:"Space Mono",monospace;font-size:.4em;font-weight:400;font-style:normal;margin-left:3px;color:rgba(255,255,255,.7);text-transform:uppercase}
.ferrule .result span{display:block;margin-top:8px;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:rgba(255,255,255,.62)}
.ferrule .result__note{margin:var(--s4) 0 0;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:15px;font-weight:300;line-height:1.68;color:rgba(255,255,255,.85)}
.ferrule .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.ferrule .btn--primary{background:#fff;color:var(--ink);border-color:#fff}
.ferrule .btn--primary:hover{background:var(--indigo);color:#fff;border-color:var(--indigo);transform:translateY(-2px)}
.ferrule .btn--outline{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.ferrule .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}

/* dark state */
/* the dark half is the site's inverted surface — ink-2 under an indigo
   wash, the same treatment the BOM band uses. Script fades the ink-2 in
   over the sheet; this wash rides in with it. */
.ferrule .stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(72,52,212,.42), transparent 60%),
    radial-gradient(80% 70% at 85% 100%, rgba(72,52,212,.20), transparent 62%);
  transition:opacity .6s var(--ease)}
.ferrule .stage.dark::before{opacity:1}

/* mobile */
@media (max-width:900px){
  .ferrule .copy{left:16px;right:16px;width:auto;top:auto;bottom:18px;transform:none}
  .ferrule h2{font-size:clamp(28px,7vw,36px);margin-top:var(--s3)}
  .ferrule .copy p:not(.eyebrow){font-size:14px;margin-top:10px}
  .ferrule .visual{left:0;right:0;top:0;bottom:42vh}
  .ferrule .elbow{width:min(88vw,520px)}
  .ferrule .nut{width:min(60vw,320px)}
  .ferrule .callouts{inset:auto 16px calc(18px + 20vh) 16px;top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;pointer-events:none;z-index:7}
  .ferrule .co{position:static;width:auto;font-size:12px;background:#fff;padding:10px 12px;border:1px solid var(--line-soft)}
  .ferrule .co b{font-size:16px}
  .ferrule .co i,.ferrule .callouts svg.leaders{display:none}
  .ferrule .copy.c2 p{display:none}
  .ferrule .bench{width:92vw;top:6vh;transform:translate(-50%,0)}
  .ferrule .gauge{width:min(42%,26vh);right:-1%;bottom:4%}
  .ferrule .readout{font-size:40px;margin-top:12px}
  .ferrule .result{left:16px;right:16px;bottom:16px;top:auto;width:auto;transform:translateY(30px)}
  .ferrule .result__kicker{margin-bottom:10px}
  .ferrule .result-stats{grid-template-columns:1fr 1fr 1fr;gap:12px;padding:14px 0}
  .ferrule .result b{font-size:26px}
  .ferrule .result span{font-size:9px}
  .ferrule .result__note{font-size:13px;margin-top:14px}
  .ferrule .cta-row{margin-top:14px}
  .ferrule .scene-no{right:16px;top:14px}
}

/* static fallback (reduced motion / no JS): stack the scenes */
.ferrule.static .track{height:auto}
.ferrule.static .stage{position:static;height:auto;overflow:visible;padding:64px 0}
.ferrule.static .stage-inner{height:auto}
.ferrule.static .copy,.ferrule.static .visual,.ferrule.static .elbow,.ferrule.static .nut,.ferrule.static .bench,.ferrule.static .gauge,.ferrule.static .result,.ferrule.static .callouts,.ferrule.static .co{position:static;transform:none;opacity:1;width:auto;inset:auto;pointer-events:auto}
.ferrule.static .copy{margin:0 0 24px;max-width:640px}
.ferrule.static .elbow{max-width:640px;margin:0 auto 24px}
.ferrule.static .elbow.angle,.ferrule.static .elbow.ghost{display:none}
.ferrule.static .nut{max-width:520px;margin:0 auto 16px}
.ferrule.static .callouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0 0 48px}
.ferrule.static .co i,.ferrule.static .callouts svg.leaders{display:none}
.ferrule.static .tgrid{position:static;transform:none;opacity:1;width:auto;margin:0 0 48px}
.ferrule.static .tcell,.ferrule.static .tsupp{opacity:1;transform:none}
.ferrule.static .bench{max-width:720px;margin:0 auto 24px;aspect-ratio:956/860}
.ferrule.static .bench video{opacity:1;position:absolute}

.ferrule.static .gauge{max-width:320px;margin:0 auto 24px;display:block}
.ferrule.static .static-only{display:block}
.ferrule .static-only{display:none}