/* ==========================================================================
   SEATBELTDISTRIBUTOR.IN
   Design system: "Restraint Engineering — Titanium & Ice"
   Palette : Petrol-graphite / warm titanium / signal ice
   Type    : Space Grotesk (display) · Manrope (text) · JetBrains Mono (data)
   Motif   : sash diagonals · stitch hairlines · reflective hatch
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Dark surfaces — petrol graphite (blue-green undertone) */
  --abyss:      #0B1417;
  --abyss-2:    #101C21;
  --abyss-3:    #16262C;
  --abyss-4:    #1F343B;
  --abyss-5:    #2A454E;

  /* Light surfaces — warm titanium */
  --titanium:   #F2F1ED;
  --titanium-2: #E8E6DF;
  --titanium-3: #DAD7CD;
  --white:      #FFFFFF;

  /* Ink on light */
  --ink:        #0B1417;
  --ink-2:      #46565B;
  --ink-3:      #576A6F;   /* AA (>=4.5:1) on titanium, titanium-2 and white */

  /* Ink on dark */
  --inv:        #EDEFEE;
  --inv-2:      #A3B4B8;
  --inv-3:      #7C9096;

  /* Signal — ice */
  --ice:        #1FBFD4;   /* interactive / accent on dark */
  --ice-hi:     #57DDEF;
  --ice-deep:   #0A6272;   /* accessible on light surfaces */
  --ice-ink:    #063D48;
  --ice-wash:   rgba(31,191,212,.12);
  --ice-line:   rgba(31,191,212,.34);

  /* Hairlines */
  --line-l:     rgba(11,20,23,.14);
  --line-l-2:   rgba(11,20,23,.26);
  --line-d:     rgba(237,239,238,.14);
  --line-d-2:   rgba(237,239,238,.28);

  /* Type */
  --f-display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:   "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-data:   "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Scale */
  --fs-mega:  clamp(2.9rem, 7.4vw, 6.1rem);
  --fs-h1:    clamp(2.25rem, 5.1vw, 4.15rem);
  --fs-h2:    clamp(1.8rem, 3.3vw, 2.95rem);
  --fs-h3:    clamp(1.22rem, 1.5vw, 1.6rem);
  --fs-h4:    clamp(1.06rem, .8vw, 1.19rem);
  --fs-lead:  clamp(1.05rem, .55vw + .92rem, 1.31rem);
  --fs-data:  clamp(.68rem, .28vw + .62rem, .78rem);

  /* Metrics */
  --wrap:       1240px;
  --wrap-wide:  1480px;
  --wrap-read:  790px;
  --gut:        clamp(20px, 4.6vw, 60px);
  --sec:        clamp(68px, 8.6vw, 138px);
  --sec-sm:     clamp(48px, 5.6vw, 88px);
  --r:          3px;
  --r-md:       6px;
  --r-lg:       14px;
  --hdr:        76px;

  /* Motion */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Motifs */
  --hatch: repeating-linear-gradient(115deg,
            rgba(31,191,212,.9) 0 6px, transparent 6px 14px);
  --hatch-ink: repeating-linear-gradient(115deg,
            rgba(11,20,23,.34) 0 6px, transparent 6px 14px);
  --sash-dark: repeating-linear-gradient(112deg,
            rgba(237,239,238,.045) 0 1px, transparent 1px 26px);
  --sash-light: repeating-linear-gradient(112deg,
            rgba(11,20,23,.05) 0 1px, transparent 1px 26px);
}
@media (max-width: 900px){ :root{ --hdr: 64px; } }

/* --------------------------------------------------------------------------
   02 · RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 20px);
}
body{
  margin:0;
  background:var(--titanium);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:clamp(15.5px,.4vw + 14.6px,17px);
  line-height:1.74;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{ margin:0; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--ice); color:var(--abyss); }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.024em;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.016em; }
h4{ font-size:var(--fs-h4); line-height:1.32; letter-spacing:-.01em; }
p{ text-wrap:pretty; }

/* --------------------------------------------------------------------------
   03 · A11Y HELPERS
   -------------------------------------------------------------------------- */
.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:10px; left:10px; z-index:1200;
  transform:translateY(-160%);
  background:var(--ice); color:var(--abyss);
  font-family:var(--f-data); font-size:.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:12px 18px; border-radius:var(--r);
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:translateY(0); }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ice);
  outline-offset:3px;
  border-radius:2px;
}
.on-light :where(a,button,input,textarea,select,summary):focus-visible{
  outline-color:var(--ice-deep);
}

/* --------------------------------------------------------------------------
   04 · LAYOUT
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:var(--gut); }
.wrap-read{ width:100%; max-width:var(--wrap-read); margin-inline:auto; padding-inline:var(--gut); }

.sec{ padding-block:var(--sec); position:relative; }
.sec-sm{ padding-block:var(--sec-sm); position:relative; }
.sec-top-0{ padding-top:0; }

.on-dark{ background:var(--abyss); color:var(--inv); }
.on-dark-2{ background:var(--abyss-2); color:var(--inv); }
.on-light{ background:var(--titanium); color:var(--ink); }
.on-light-2{ background:var(--titanium-2); color:var(--ink); }
.on-white{ background:var(--white); color:var(--ink); }

.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,
.on-dark-2 h1,.on-dark-2 h2,.on-dark-2 h3,.on-dark-2 h4{ color:var(--inv); }

/* --------------------------------------------------------------------------
   04b · DARK-CONTEXT TOKEN FLIP
   Any block painted on petrol graphite re-points the light-surface tokens at
   their dark-surface equivalents, so every component authored against
   --ink / --ice-deep / --line-l / --titanium stays legible without needing a
   parallel set of ".on-dark X" overrides.
   -------------------------------------------------------------------------- */
.on-dark, .on-dark-2, .hero, .phead, .cta, .ftr, .hdr, .drawer{
  --ink:        var(--inv);
  --ink-2:      var(--inv-2);
  --ink-3:      var(--inv-3);
  --ice-deep:   var(--ice);
  --ice-ink:    var(--ice-hi);
  --line-l:     var(--line-d);
  --line-l-2:   var(--line-d-2);
  --titanium:   var(--abyss);
  --titanium-2: var(--abyss-2);
  --titanium-3: var(--abyss-3);
  --white:      var(--abyss-2);
}

/* --------------------------------------------------------------------------
   05 · MOTIF PARTS
   -------------------------------------------------------------------------- */
/* mono micro-label with leading ice tick */
.tag{
  display:inline-flex; align-items:center; gap:.62em;
  font-family:var(--f-data); font-size:var(--fs-data); font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--ice-deep);
}
.tag::before{
  content:""; width:.72em; height:.72em; flex:none;
  background:var(--ice-deep);
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}
.on-dark .tag,.on-dark-2 .tag{ color:var(--ice); }
.on-dark .tag::before,.on-dark-2 .tag::before{ background:var(--ice); }

/* dashed twin hairline — "stitch" */
.stitch{
  height:5px; width:100%; border:0; margin:0;
  background:
    repeating-linear-gradient(90deg, var(--line-l-2) 0 7px, transparent 7px 14px) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-l-2) 0 7px, transparent 7px 14px) 0 100%/100% 1px no-repeat;
}
.on-dark .stitch,.on-dark-2 .stitch{
  background:
    repeating-linear-gradient(90deg, var(--line-d-2) 0 7px, transparent 7px 14px) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-d-2) 0 7px, transparent 7px 14px) 0 100%/100% 1px no-repeat;
}

/* retro-reflective hatch bar */
.hatch{ height:7px; width:100%; background-image:var(--hatch); opacity:.95; }
.hatch-sm{ height:4px; width:64px; background-image:var(--hatch); }

/* faint diagonal sash texture layer */
.sash-bg{ position:relative; isolation:isolate; }
.sash-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--sash-light);
}
.on-dark.sash-bg::before,.on-dark-2.sash-bg::before{ background-image:var(--sash-dark); }

/* index numeral */
.num{
  font-family:var(--f-data); font-size:var(--fs-data); font-weight:500;
  letter-spacing:.16em; color:var(--ice-deep);
}
.on-dark .num,.on-dark-2 .num{ color:var(--ice); }

/* --------------------------------------------------------------------------
   06 · TYPE HELPERS
   -------------------------------------------------------------------------- */
.lead{ font-size:var(--fs-lead); line-height:1.62; color:var(--ink-2); }
.on-dark .lead,.on-dark-2 .lead{ color:var(--inv-2); }
.muted{ color:var(--ink-2); }
.on-dark .muted,.on-dark-2 .muted{ color:var(--inv-2); }
.soft{ color:var(--ink-3); }
.on-dark .soft,.on-dark-2 .soft{ color:var(--inv-3); }
.prose > * + *{ margin-top:1.05em; }
.prose h3{ margin-top:1.7em; }
.prose h4{ margin-top:1.5em; }
.prose strong{ font-weight:700; color:var(--ink); }
.on-dark .prose strong,.on-dark-2 .prose strong{ color:var(--inv); }
.prose a:not(.btn){
  color:var(--ice-deep); font-weight:600;
  box-shadow:inset 0 -1px 0 var(--ice-line);
  transition:box-shadow .2s var(--ease), color .2s var(--ease);
}
.prose a:not(.btn):hover{ box-shadow:inset 0 -2px 0 var(--ice-deep); }
.on-dark .prose a:not(.btn),.on-dark-2 .prose a:not(.btn){ color:var(--ice-hi); }

.mega{ font-size:var(--fs-mega); line-height:.98; letter-spacing:-.035em; }

/* bulleted list with ice ticks */
.ticks{ display:grid; gap:.72em; }
.ticks li{ position:relative; padding-left:1.65em; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.62em; height:.62em; background:var(--ice-deep);
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}
.on-dark .ticks li::before,.on-dark-2 .ticks li::before{ background:var(--ice); }

/* --------------------------------------------------------------------------
   07 · BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--ice);
  --btn-fg:var(--abyss);
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--f-data); font-size:.79rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  padding:1.05em 1.7em; border:1px solid transparent; border-radius:var(--r);
  background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .24s var(--ease), color .24s var(--ease),
             border-color .24s var(--ease), transform .24s var(--ease);
}
.btn .ar{ transition:transform .3s var(--ease-out); flex:none; }
.btn:hover .ar{ transform:translateX(4px); }
.btn:hover{ --btn-bg:var(--ice-hi); }
.btn:active{ transform:translateY(1px); }

.btn-line{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--line-l-2);
}
.btn-line:hover{ --btn-bg:var(--ink); --btn-fg:var(--titanium); border-color:var(--ink); }
.on-dark .btn-line,.on-dark-2 .btn-line{ --btn-fg:var(--inv); border-color:var(--line-d-2); }
.on-dark .btn-line:hover,.on-dark-2 .btn-line:hover{ --btn-bg:var(--inv); --btn-fg:var(--abyss); border-color:var(--inv); }

.btn-solid-ink{ --btn-bg:var(--ink); --btn-fg:var(--titanium); }
.btn-solid-ink:hover{ --btn-bg:var(--ice-ink); --btn-fg:var(--white); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* text link with sliding rule */
.tlink{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-data); font-size:.78rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ice-deep); padding-bottom:.42em; position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform-origin:left;
  transform:scaleX(.34); transition:transform .38s var(--ease-out);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .ar{ transition:transform .3s var(--ease-out); }
.tlink:hover .ar{ transform:translateX(4px); }
.on-dark .tlink,.on-dark-2 .tlink{ color:var(--ice); }

/* --------------------------------------------------------------------------
   08 · MEDIA — native aspect ratios, never cropped
   -------------------------------------------------------------------------- */
.media{
  position:relative;
  aspect-ratio:var(--ar,3/2);
  overflow:hidden;
  background:var(--abyss-3);
  border-radius:var(--r-md);
}
.media img{
  width:100%; height:100%;
  object-fit:cover;           /* container ratio == image ratio → no crop */
  object-position:center;
}
.media-contain{ background:var(--titanium-2); }
.media-contain img{ object-fit:contain; }

/* frame with offset ice rule */
.framed{ position:relative; }
.framed::after{
  content:""; position:absolute; inset:auto -14px -14px auto;
  width:46%; height:46%; border-right:1px solid var(--ice-line); border-bottom:1px solid var(--ice-line);
  pointer-events:none; border-radius:0 0 var(--r-md) 0;
}
@media (max-width:700px){ .framed::after{ inset:auto -8px -8px auto; } }

figcaption{
  margin-top:.95em;
  font-family:var(--f-data); font-size:var(--fs-data);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.6;
}
.on-dark figcaption,.on-dark-2 figcaption{ color:var(--inv-3); }

/* --------------------------------------------------------------------------
   09 · HEADER + NAV
   -------------------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:900;
  background:var(--abyss);
  border-bottom:1px solid var(--line-d);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.hdr.is-stuck{ box-shadow:0 14px 40px rgba(0,0,0,.34); }
.hdr::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,var(--ice) 0,var(--ice) 14%,transparent 14%);
  opacity:.85;
}
.hdr-in{
  height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* wordmark */
.brand{ display:inline-flex; align-items:center; gap:12px; flex:none; }
.brand-mk{ width:34px; height:34px; flex:none; }
.brand-tx{ display:grid; line-height:1; }
.brand-tx b{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  letter-spacing:-.018em; color:var(--inv);
}
.brand-tx span{
  font-family:var(--f-data); font-size:.585rem; font-weight:500;
  letter-spacing:.235em; text-transform:uppercase; color:var(--ice);
  margin-top:5px;
}
@media (max-width:380px){ .brand-tx b{ font-size:.94rem; } .brand-tx span{ letter-spacing:.16em; } }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative;
  font-family:var(--f-text); font-size:.865rem; font-weight:500;
  letter-spacing:.002em; color:var(--inv-2);
  padding:10px 11px; border-radius:var(--r);
  transition:color .22s var(--ease);
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:4px; height:1px;
  background:var(--ice); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease-out);
}
.nav a:hover{ color:var(--inv); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--inv); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hdr-cta{ display:flex; align-items:center; gap:12px; flex:none; }
.hdr-tel{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-data); font-size:.79rem; font-weight:500;
  letter-spacing:.06em; color:var(--inv);
  padding:9px 4px;
  transition:color .22s var(--ease);
}
.hdr-tel:hover{ color:var(--ice); }
.hdr .btn{ padding:.88em 1.3em; font-size:.735rem; }

/* burger */
.burger{
  display:none; width:44px; height:44px; flex:none;
  background:transparent; border:1px solid var(--line-d-2); border-radius:var(--r);
  padding:0; cursor:pointer; position:relative;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.burger:hover{ border-color:var(--ice-line); }
.burger i{
  position:absolute; left:12px; right:12px; height:1.5px; background:var(--inv);
  transition:transform .34s var(--ease), opacity .2s linear;
}
.burger i:nth-child(1){ top:15px; }
.burger i:nth-child(2){ top:21px; }
.burger i:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:950;
  display:grid; grid-template-columns:1fr min(420px,88vw);
  visibility:hidden; pointer-events:none;
  overflow:hidden; /* keeps the off-canvas pane from ever creating page scroll */
}
.drawer.is-open{ visibility:visible; pointer-events:auto; }
.drawer-veil{
  background:rgba(6,12,14,.62); opacity:0;
  transition:opacity .38s var(--ease); border:0; padding:0; cursor:pointer;
}
.drawer.is-open .drawer-veil{ opacity:1; }
.drawer-pane{
  background:var(--abyss-2); border-left:1px solid var(--line-d);
  padding:calc(var(--hdr) + 26px) clamp(22px,6vw,38px) 34px;
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .44s var(--ease-out);
  display:flex; flex-direction:column; gap:26px;
}
.drawer.is-open .drawer-pane{ transform:translateX(0); }
.drawer-nav{ display:grid; }
.drawer-nav a{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.28rem,4.6vw,1.6rem); letter-spacing:-.02em;
  color:var(--inv); padding:15px 0;
  border-bottom:1px solid var(--line-d);
  opacity:0; transform:translateX(16px);
  transition:color .22s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.drawer.is-open .drawer-nav a{ opacity:1; transform:translateX(0); }
.drawer-nav a span{
  font-family:var(--f-data); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; color:var(--ice); flex:none;
}
.drawer-nav a:hover{ color:var(--ice); }
.drawer-nav a[aria-current="page"]{ color:var(--ice); }
.drawer-foot{ display:grid; gap:14px; margin-top:auto; }
/* :not(.btn) — an unscoped rule here outranks .btn and would repaint the
   enquiry button's label in muted grey on the ice fill (≈1:1 contrast). */
.drawer-foot a:not(.btn){
  font-family:var(--f-data); font-size:.82rem; letter-spacing:.05em; color:var(--inv-2);
  display:flex; align-items:center; gap:.6em;
}
.drawer-foot a:not(.btn):hover{ color:var(--ice); }

@media (max-width:1320px){ .hdr-tel{ display:none; } }
@media (max-width:1180px){
  .nav{ display:none; }
  .burger{ display:block; }
}
@media (max-width:560px){
  .hdr-cta .btn{ display:none; }
}

/* --------------------------------------------------------------------------
   10 · HERO (home) — offset panel composition
   -------------------------------------------------------------------------- */
.hero{
  background:var(--abyss); color:var(--inv);
  position:relative; overflow:hidden;
  padding-block:clamp(52px,7vw,96px) clamp(52px,7vw,104px);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--sash-dark);
}
.hero::after{
  content:""; position:absolute; right:-14%; top:-32%;
  width:64vw; height:112%; pointer-events:none;
  background:radial-gradient(ellipse at 42% 46%, rgba(31,191,212,.14), transparent 62%);
}
.hero-in{ position:relative; z-index:2; display:grid; gap:clamp(34px,4.4vw,60px); }
@media (min-width:980px){
  .hero-in{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center; }
}
.hero-kicker{ display:flex; align-items:center; gap:16px; margin-bottom:clamp(20px,2.4vw,30px); }
.hero-kicker .hatch-sm{ opacity:.9; }
.hero h1{
  font-size:var(--fs-mega); line-height:.99; letter-spacing:-.035em;
  margin-bottom:clamp(20px,2.2vw,28px);
}
.hero h1 em{
  font-style:normal; color:var(--ice);
  position:relative; white-space:nowrap;
}
.hero-lead{ max-width:56ch; margin-bottom:clamp(26px,3vw,36px); }
.hero .btn-row{ margin-bottom:clamp(28px,3.4vw,42px); }

/* technical data strip under hero copy */
.hero-strip{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border-top:1px solid var(--line-d);
}
.hero-strip div{
  padding:18px 20px 0 0;
  border-right:1px solid var(--line-d);
}
.hero-strip div:last-child{ border-right:0; }
.hero-strip dt{
  font-family:var(--f-data); font-size:var(--fs-data); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ice);
  margin-bottom:.55em;
}
.hero-strip dd{
  margin:0; font-size:.93rem; line-height:1.5; color:var(--inv-2);
}
@media (max-width:520px){
  .hero-strip div{ border-right:0; border-bottom:1px solid var(--line-d); padding-bottom:16px; }
  .hero-strip div:last-child{ border-bottom:0; }
}

/* hero media — square latch plate panel, offset ice rails */
.hero-media{ position:relative; }
.hero-media .media{ border-radius:var(--r-lg); }
.hero-media::before{
  content:""; position:absolute; left:-18px; top:26px; bottom:26px; width:1px;
  background:linear-gradient(180deg,transparent,var(--ice) 30%,var(--ice) 70%,transparent);
  opacity:.6;
}
/* Sits below the media rather than over it, so no part of the product is
   ever obscured by the caption panel. */
.hero-badge{
  position:relative; margin-top:16px;
  background:var(--abyss-2); border:1px solid var(--line-d-2);
  border-left:2px solid var(--ice);
  padding:15px 19px; border-radius:0 var(--r) var(--r) 0;
  display:grid; gap:.15em;
}
.hero-badge b{
  display:block; font-family:var(--f-data); font-size:var(--fs-data); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ice); margin-bottom:.5em;
}
.hero-badge span{ font-size:.86rem; line-height:1.55; color:var(--inv-2); }
@media (max-width:700px){
  .hero-media::before{ display:none; }
}

/* --------------------------------------------------------------------------
   11 · PAGE HEAD (inner pages) — band with rule + breadcrumb
   -------------------------------------------------------------------------- */
.phead{
  background:var(--abyss); color:var(--inv);
  position:relative; overflow:hidden;
  padding-block:clamp(44px,5.6vw,84px) clamp(40px,5vw,72px);
}
.phead::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--sash-dark);
}
.phead::after{
  content:""; position:absolute; left:-10%; bottom:-46%;
  width:52vw; height:104%;
  background:radial-gradient(ellipse at 50% 50%, rgba(31,191,212,.13), transparent 64%);
  pointer-events:none;
}
.phead-in{ position:relative; z-index:2; }
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em;
  font-family:var(--f-data); font-size:var(--fs-data);
  letter-spacing:.14em; text-transform:uppercase; color:var(--inv-3);
  margin-bottom:clamp(22px,2.6vw,34px);
}
.crumb a{ color:var(--inv-2); transition:color .2s var(--ease); }
.crumb a:hover{ color:var(--ice); }
.crumb span[aria-hidden]{ color:rgba(237,239,238,.34); }
.crumb [aria-current]{ color:var(--ice); }

.phead-grid{ display:grid; gap:clamp(24px,3.2vw,52px); align-items:end; }
@media (min-width:900px){ .phead-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } }
.phead h1{ margin-bottom:.5em; }
.phead .lead{ max-width:60ch; }
.phead-note{
  border-left:1px solid var(--ice-line); padding-left:clamp(18px,2vw,26px);
}
.phead-note p{ font-size:.95rem; line-height:1.68; color:var(--inv-2); }

/* --------------------------------------------------------------------------
   12 · ARCHETYPE A — editorial split (sticky rail + wide lead)
   -------------------------------------------------------------------------- */
.s-editorial{ display:grid; gap:clamp(28px,3.6vw,60px); }
@media (min-width:960px){
  .s-editorial{ grid-template-columns:minmax(0,268px) minmax(0,1fr); }
}
.s-rail{ align-self:start; }
@media (min-width:960px){
  .s-rail{ position:sticky; top:calc(var(--hdr) + 40px); }
}
.s-rail h2{ margin:.7em 0 .6em; }
.s-rail-meta{
  margin-top:1.6em; padding-top:1.3em; border-top:1px solid var(--line-l);
  display:grid; gap:.85em;
}
.on-dark .s-rail-meta,.on-dark-2 .s-rail-meta{ border-top-color:var(--line-d); }
.s-rail-meta div{ display:grid; gap:.2em; }
.s-rail-meta dt{
  font-family:var(--f-data); font-size:var(--fs-data); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.on-dark .s-rail-meta dt,.on-dark-2 .s-rail-meta dt{ color:var(--inv-3); }
.s-rail-meta dd{ margin:0; font-size:.92rem; font-weight:600; }

.s-body{ max-width:74ch; }
.s-body .first{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.24rem,1.5vw,1.62rem); line-height:1.42;
  letter-spacing:-.018em; color:var(--ink);
}
.on-dark .s-body .first,.on-dark-2 .s-body .first{ color:var(--inv); }

/* two-column reading flow for long passages */
.cols-2{ columns:2; column-gap:clamp(28px,3vw,52px); }
.cols-2 > p{ break-inside:avoid; margin-bottom:1.05em; }
@media (max-width:820px){ .cols-2{ columns:1; } }

/* --------------------------------------------------------------------------
   13 · ARCHETYPE B — load-path timeline (horizontal, numbered)
   -------------------------------------------------------------------------- */
.loadpath{ position:relative; margin-top:clamp(36px,4.4vw,64px); }
.loadpath-track{
  display:grid; gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.loadpath-step{
  position:relative; padding:clamp(28px,2.6vw,38px) clamp(18px,2vw,30px) 0 0;
  border-top:1px solid var(--line-d);
}
.loadpath-step::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px;
  background:var(--ice);
  transition:width 1s var(--ease-out);
  transition-delay:calc(var(--i,0) * 140ms);
}
.is-in .loadpath-step::before{ width:100%; }
.loadpath-step .num{ display:block; margin-bottom:1em; }
.loadpath-step h3{ margin-bottom:.62em; }
.loadpath-step p{ font-size:.94rem; line-height:1.68; color:var(--inv-2); }
@media (max-width:960px){
  .loadpath-track{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .loadpath-track{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   14 · ARCHETYPE C — product index (list ⇄ panel, tabs)
   -------------------------------------------------------------------------- */
.index-shell{ display:grid; gap:clamp(22px,2.6vw,44px); margin-top:clamp(34px,4vw,56px); }
@media (min-width:900px){
  .index-shell{ grid-template-columns:minmax(0,340px) minmax(0,1fr); align-items:start; }
}
.index-list{ display:grid; gap:0; border-top:1px solid var(--line-l); }
.on-dark .index-list,.on-dark-2 .index-list{ border-top-color:var(--line-d); }
.index-btn{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--line-l);
  padding:17px 4px 17px 0; cursor:pointer;
  transition:padding-left .3s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.on-dark .index-btn,.on-dark-2 .index-btn{ border-bottom-color:var(--line-d); }
.index-btn .num{ transition:color .2s var(--ease); }
.index-btn b{
  font-family:var(--f-display); font-weight:600; font-size:1.03rem;
  letter-spacing:-.014em; line-height:1.3;
}
.index-btn .ar{ opacity:0; transform:translateX(-6px); transition:all .3s var(--ease); }
.index-btn:hover{ padding-left:12px; }
.index-btn[aria-selected="true"]{ padding-left:14px; }
.index-btn[aria-selected="true"] .ar{ opacity:1; transform:translateX(0); }
.index-btn[aria-selected="true"]{ background:linear-gradient(90deg,var(--ice-wash),transparent 78%); }
.index-btn[aria-selected="true"] b{ color:var(--ice-deep); }
.on-dark .index-btn[aria-selected="true"] b,
.on-dark-2 .index-btn[aria-selected="true"] b{ color:var(--ice); }

.index-panel{ display:none; }
.index-panel.is-active{ display:grid; gap:clamp(20px,2.4vw,34px); }
@media (min-width:1080px){
  .index-panel.is-active{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); align-items:start; }
}
.index-panel h3{ margin-bottom:.7em; }
.index-panel .specs{
  margin-top:1.5em; border-top:1px solid var(--line-l); padding-top:1.2em;
  display:grid; gap:.9em;
}
.on-dark .index-panel .specs,.on-dark-2 .index-panel .specs{ border-top-color:var(--line-d); }
.specs div{ display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:14px; align-items:baseline; }
.specs dt{
  font-family:var(--f-data); font-size:var(--fs-data); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.on-dark .specs dt,.on-dark-2 .specs dt{ color:var(--inv-3); }
.specs dd{ margin:0; font-size:.93rem; line-height:1.6; }
@media (max-width:520px){ .specs div{ grid-template-columns:1fr; gap:2px; } }

/* --------------------------------------------------------------------------
   15 · ARCHETYPE D — offset rows (image + staggered text)
   -------------------------------------------------------------------------- */
.offset{ display:grid; gap:clamp(30px,3.6vw,58px); align-items:center; }
@media (min-width:900px){
  .offset{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .offset.flip > *:first-child{ order:2; }
}
.offset-copy{ max-width:60ch; }
.offset-copy h2{ margin-bottom:.62em; }
.offset + .offset{ margin-top:clamp(52px,6vw,96px); }

/* ruled rows list */
.rows{ margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--line-l); }
.on-dark .rows,.on-dark-2 .rows{ border-top-color:var(--line-d); }
.rows > li{
  display:grid; gap:6px 26px; padding:20px 0;
  border-bottom:1px solid var(--line-l);
}
.on-dark .rows > li,.on-dark-2 .rows > li{ border-bottom-color:var(--line-d); }
@media (min-width:760px){
  .rows > li{ grid-template-columns:minmax(0,58px) minmax(0,238px) minmax(0,1fr); align-items:baseline; }
}
.rows h3{ font-size:1.06rem; letter-spacing:-.012em; }
.rows p{ font-size:.94rem; line-height:1.68; color:var(--ink-2); }
.on-dark .rows p,.on-dark-2 .rows p{ color:var(--inv-2); }

/* --------------------------------------------------------------------------
   16 · ARCHETYPE E — anatomy (image + numbered callouts)
   -------------------------------------------------------------------------- */
.anatomy{ display:grid; gap:clamp(28px,3.4vw,54px); align-items:center; }
@media (min-width:940px){
  .anatomy{ grid-template-columns:minmax(0,.88fr) minmax(0,1fr); }
}
.anatomy-figure{ position:relative; }
.anatomy-figure .media{ border-radius:var(--r-lg); }
.anatomy-list{ display:grid; gap:0; counter-reset:an; }
.anatomy-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px;
  padding:20px 0; border-bottom:1px solid var(--line-l);
  transition:padding-left .3s var(--ease);
}
.on-dark .anatomy-item,.on-dark-2 .anatomy-item{ border-bottom-color:var(--line-d); }
.anatomy-item:first-child{ border-top:1px solid var(--line-l); }
.on-dark .anatomy-item:first-child,.on-dark-2 .anatomy-item:first-child{ border-top-color:var(--line-d); }
.anatomy-item:hover{ padding-left:10px; }
.anatomy-dot{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--ice-line); color:var(--ice-deep);
  font-family:var(--f-data); font-size:.74rem; font-weight:500;
  transition:background .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease);
}
.on-dark .anatomy-dot,.on-dark-2 .anatomy-dot{ color:var(--ice); }
.anatomy-item:hover .anatomy-dot{ background:var(--ice); color:var(--abyss); border-color:var(--ice); }
.anatomy-item h3{ font-size:1.04rem; margin-bottom:.4em; }
.anatomy-item p{ font-size:.93rem; line-height:1.66; color:var(--ink-2); }
.on-dark .anatomy-item p,.on-dark-2 .anatomy-item p{ color:var(--inv-2); }

/* --------------------------------------------------------------------------
   17 · ARCHETYPE F — sticky media split (scrolling copy)
   -------------------------------------------------------------------------- */
.sticky-split{ display:grid; gap:clamp(30px,3.6vw,60px); }
@media (min-width:980px){
  .sticky-split{ grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:start; }
  .sticky-split .stick{ position:sticky; top:calc(var(--hdr) + 44px); }
}
.split-blocks{ display:grid; gap:clamp(30px,3.4vw,50px); }
.split-block{ padding-left:clamp(18px,2vw,28px); border-left:1px solid var(--line-l); }
.on-dark .split-block,.on-dark-2 .split-block{ border-left-color:var(--line-d); }
.split-block h3{ margin-bottom:.6em; }
.split-block p{ color:var(--ink-2); }
.on-dark .split-block p,.on-dark-2 .split-block p{ color:var(--inv-2); }

/* --------------------------------------------------------------------------
   18 · ARCHETYPE G — matrix (application grid)
   -------------------------------------------------------------------------- */
/* Hairlines are drawn as a 1px ring on each cell rather than as a filled
   container showing through 1px gaps: with an odd item count the old approach
   painted empty grid tracks as a solid grey block. */
.matrix{
  margin-top:clamp(32px,3.8vw,56px);
  display:grid; gap:1px; background:transparent; border:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));
}
.matrix-cell{
  background:var(--titanium); box-shadow:0 0 0 1px var(--line-l);
  padding:clamp(24px,2.4vw,34px);
  display:grid; gap:.7em; align-content:start;
  position:relative; overflow:hidden;
  transition:background .3s var(--ease);
}
.matrix-cell::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--ice); transform:scaleX(0); transform-origin:left;
  transition:transform .44s var(--ease-out);
}
.matrix-cell:hover::before{ transform:scaleX(1); }
.matrix-cell:hover{ background:var(--white); }
.matrix-cell h3{ font-size:1.05rem; }
.matrix-cell p{ font-size:.93rem; line-height:1.66; color:var(--ink-2); }
.matrix-cell ul{ display:grid; gap:.4em; margin-top:.3em; }
.matrix-cell ul li{
  font-family:var(--f-data); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); padding-left:1.2em; position:relative;
}
.matrix-cell ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:.5em; height:1px; background:var(--ice);
}

/* --------------------------------------------------------------------------
   19 · ARCHETYPE H — numbered checklist (ruled, two column)
   -------------------------------------------------------------------------- */
.checklist{
  margin-top:clamp(30px,3.6vw,52px);
  display:grid; gap:0 clamp(30px,4vw,72px);
}
@media (min-width:840px){ .checklist{ grid-template-columns:1fr 1fr; } }
.checklist li{
  padding:22px 0; border-top:1px solid var(--line-l);
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
}
.on-dark .checklist li,.on-dark-2 .checklist li{ border-top-color:var(--line-d); }
.checklist li h3{ font-size:1.02rem; margin-bottom:.42em; }
.checklist li p{ font-size:.93rem; line-height:1.66; color:var(--ink-2); }
.on-dark .checklist li p,.on-dark-2 .checklist li p{ color:var(--inv-2); }

/* --------------------------------------------------------------------------
   20 · ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.acc{ border-top:1px solid var(--line-l); }
.on-dark .acc,.on-dark-2 .acc{ border-top-color:var(--line-d); }
.acc-item{ border-bottom:1px solid var(--line-l); }
.on-dark .acc-item,.on-dark-2 .acc-item{ border-bottom-color:var(--line-d); }
.acc-btn{
  width:100%; background:transparent; border:0; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start;
  text-align:left; padding:24px 0;
  transition:padding-left .3s var(--ease);
}
.acc-btn:hover{ padding-left:10px; }
.acc-btn h3{
  font-size:clamp(1.02rem,1.05vw,1.15rem); line-height:1.4;
  transition:color .22s var(--ease);
}
.acc-btn:hover h3{ color:var(--ice-deep); }
.on-dark .acc-btn:hover h3,.on-dark-2 .acc-btn:hover h3{ color:var(--ice); }
.acc-btn[aria-expanded="true"] h3{ color:var(--ice-deep); }
.on-dark .acc-btn[aria-expanded="true"] h3,
.on-dark-2 .acc-btn[aria-expanded="true"] h3{ color:var(--ice); }
.acc-sign{
  width:26px; height:26px; flex:none; position:relative; margin-top:3px;
  border:1px solid var(--line-l-2); border-radius:50%;
  transition:border-color .26s var(--ease), background .26s var(--ease), transform .34s var(--ease);
}
.on-dark .acc-sign,.on-dark-2 .acc-sign{ border-color:var(--line-d-2); }
.acc-sign::before,.acc-sign::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%);
}
.acc-sign::before{ width:10px; height:1.5px; }
.acc-sign::after{ width:1.5px; height:10px; transition:transform .34s var(--ease), opacity .2s linear; }
.acc-btn[aria-expanded="true"] .acc-sign{ background:var(--ice); color:var(--abyss); border-color:var(--ice); transform:rotate(180deg); }
.acc-btn[aria-expanded="true"] .acc-sign::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.acc-pane{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease-out);
}
.acc-pane.is-open{ grid-template-rows:1fr; }
.acc-pane > div{ overflow:hidden; }
.acc-pane .inner{
  padding:0 0 26px 42px; max-width:76ch;
  color:var(--ink-2);
}
.on-dark .acc-pane .inner,.on-dark-2 .acc-pane .inner{ color:var(--inv-2); }
.acc-pane .inner > * + *{ margin-top:.9em; }
@media (max-width:600px){ .acc-pane .inner{ padding-left:0; } }

/* --------------------------------------------------------------------------
   21 · NOTICE / DISCLAIMER PANEL
   -------------------------------------------------------------------------- */
.notice{
  border:1px solid var(--line-l); border-left:2px solid var(--ice-deep);
  background:var(--white); padding:clamp(22px,2.4vw,32px);
  border-radius:0 var(--r-md) var(--r-md) 0;
  display:grid; gap:.8em;
}
.on-dark .notice,.on-dark-2 .notice{
  background:var(--abyss-2); border-color:var(--line-d); border-left-color:var(--ice);
}
.notice p{ font-size:.94rem; line-height:1.7; color:var(--ink-2); }
.on-dark .notice p,.on-dark-2 .notice p{ color:var(--inv-2); }

/* pull quote / statement block */
.statement{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.4rem,2.9vw,2.35rem); line-height:1.26; letter-spacing:-.026em;
  max-width:22ch;
}
.statement em{ font-style:normal; color:var(--ice-deep); }
.on-dark .statement em,.on-dark-2 .statement em{ color:var(--ice); }

/* --------------------------------------------------------------------------
   22 · CTA BAND
   -------------------------------------------------------------------------- */
.cta{
  background:var(--abyss-2); color:var(--inv);
  position:relative; overflow:hidden;
  padding-block:clamp(58px,7vw,110px);
}
.cta::before{
  content:""; position:absolute; inset:0; background-image:var(--sash-dark); pointer-events:none;
}
.cta::after{
  content:""; position:absolute; right:-8%; top:-40%; width:56vw; height:120%;
  background:radial-gradient(ellipse at 50% 50%, rgba(31,191,212,.15), transparent 62%);
  pointer-events:none;
}
.cta-in{ position:relative; z-index:2; display:grid; gap:clamp(28px,3.4vw,56px); align-items:center; }
@media (min-width:900px){ .cta-in{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.cta h2{ margin:.55em 0 .55em; }
.cta-rails{ display:grid; gap:0; border-top:1px solid var(--line-d); }
.cta-rail{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line-d);
  transition:padding-left .3s var(--ease);
}
.cta-rail:hover{ padding-left:10px; }
.cta-rail .ic{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--ice-line); color:var(--ice);
  transition:background .28s var(--ease), color .28s var(--ease);
}
.cta-rail:hover .ic{ background:var(--ice); color:var(--abyss); }
.cta-rail-tx{ min-width:0; }
.cta-rail-tx b{ display:block; font-size:1.02rem; font-weight:600; letter-spacing:-.005em; word-break:break-word; }
.cta-rail-tx span{
  display:block; font-family:var(--f-data); font-size:var(--fs-data);
  letter-spacing:.14em; text-transform:uppercase; color:var(--inv-3); margin-bottom:.3em;
}

/* --------------------------------------------------------------------------
   23 · FORM
   -------------------------------------------------------------------------- */
.form-shell{ display:grid; gap:clamp(30px,3.6vw,60px); }
@media (min-width:960px){ .form-shell{ grid-template-columns:minmax(0,1fr) minmax(0,.72fr); align-items:start; } }

.form{ display:grid; gap:20px; }
.form-row{ display:grid; gap:20px; }
@media (min-width:640px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:.5em; }
.field label{
  font-family:var(--f-data); font-size:var(--fs-data); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.field label .req{ color:var(--ice-deep); }
.field input,.field select,.field textarea{
  width:100%; background:var(--white); color:var(--ink);
  border:1px solid var(--line-l-2); border-radius:var(--r);
  padding:.92em 1em; font-size:.97rem; line-height:1.5;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.field textarea{ min-height:148px; resize:vertical; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2346565B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center;
  padding-right:2.8em;
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--ink-3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--ice-deep);
  box-shadow:0 0 0 3px var(--ice-wash);
}
.field .hint{ font-size:.83rem; color:var(--ink-3); line-height:1.55; }
.field .err{
  font-family:var(--f-data); font-size:.74rem; letter-spacing:.06em;
  color:#B3301D; display:none;
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#B3301D; box-shadow:0 0 0 3px rgba(179,48,29,.1);
}
.field.is-bad .err{ display:block; }

.form-note{ font-size:.86rem; line-height:1.66; color:var(--ink-3); }
.form-ok{
  display:none; align-items:flex-start; gap:14px;
  border:1px solid var(--ice-line); border-left:2px solid var(--ice-deep);
  background:var(--ice-wash); padding:18px 20px; border-radius:0 var(--r-md) var(--r-md) 0;
}
.form-ok.is-on{ display:flex; }
.form-ok .ic{ color:var(--ice-deep); flex:none; margin-top:2px; }
.form-ok p{ font-size:.93rem; line-height:1.62; }

/* contact rail cards */
.contact-rails{ display:grid; gap:0; border-top:1px solid var(--line-l); }
.contact-rail{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line-l);
  transition:padding-left .3s var(--ease);
}
.contact-rail:hover{ padding-left:10px; }
.contact-rail .ic{
  width:40px; height:40px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-l-2); color:var(--ice-deep);
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.contact-rail:hover .ic{ background:var(--ice-deep); color:var(--white); border-color:var(--ice-deep); }
.contact-rail-tx{ min-width:0; }
.contact-rail-tx span{
  display:block; font-family:var(--f-data); font-size:var(--fs-data);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.3em;
}
.contact-rail-tx b{
  display:block; font-size:1.04rem; font-weight:600; letter-spacing:-.004em;
  word-break:break-word; transition:color .22s var(--ease);
}
.contact-rail:hover .contact-rail-tx b{ color:var(--ice-deep); }
.on-dark .contact-rail-tx span,.on-dark-2 .contact-rail-tx span{ color:var(--inv-3); }
.on-dark .contact-rail,.on-dark-2 .contact-rail{ border-bottom-color:var(--line-d); }
.on-dark .contact-rails,.on-dark-2 .contact-rails{ border-top-color:var(--line-d); }
.on-dark .contact-rail .ic,.on-dark-2 .contact-rail .ic{ border-color:var(--line-d-2); color:var(--ice); }
.on-dark .contact-rail:hover .ic,.on-dark-2 .contact-rail:hover .ic{ background:var(--ice); color:var(--abyss); border-color:var(--ice); }
.on-dark .contact-rail:hover .contact-rail-tx b,.on-dark-2 .contact-rail:hover .contact-rail-tx b{ color:var(--ice); }

/* --------------------------------------------------------------------------
   24 · FOOTER
   -------------------------------------------------------------------------- */
.ftr{ background:var(--abyss); color:var(--inv); position:relative; overflow:hidden; }
.ftr::before{ content:""; position:absolute; inset:0; background-image:var(--sash-dark); pointer-events:none; }
.ftr-top{ position:relative; z-index:2; padding-block:clamp(48px,5.6vw,84px) clamp(34px,3.6vw,54px); }
.ftr-grid{ display:grid; gap:clamp(32px,3.4vw,52px); }
@media (min-width:880px){
  .ftr-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); }
}
.ftr-brand .brand{ margin-bottom:20px; }
.ftr-brand p{ font-size:.94rem; line-height:1.72; color:var(--inv-2); max-width:44ch; }
.ftr h2, .ftr-col h3{
  font-family:var(--f-data); font-size:var(--fs-data); font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ice);
  margin-bottom:1.35em;
}
.ftr-col ul{ display:grid; gap:.72em; }
.ftr-col a{
  font-size:.94rem; color:var(--inv-2);
  display:inline-flex; align-items:center; gap:.6em;
  transition:color .2s var(--ease), transform .26s var(--ease);
}
.ftr-col a:hover{ color:var(--ice); transform:translateX(3px); }
.ftr-contact{ display:grid; gap:1.05em; }
.ftr-contact div{ display:grid; gap:.22em; }
.ftr-contact dt{
  font-family:var(--f-data); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--inv-3);
}
.ftr-contact dd{ margin:0; font-size:.98rem; font-weight:600; word-break:break-word; }
.ftr-contact dd a{ color:var(--inv); transition:color .2s var(--ease); }
.ftr-contact dd a:hover{ color:var(--ice); }

/* social icons — presentational only, no fabricated profile links */
.social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.4em; }
.social li{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-d-2); color:var(--inv-2);
}
.social svg{ width:16px; height:16px; }
.social-note{
  margin-top:.9em; font-family:var(--f-data); font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--inv-3); line-height:1.7;
}

.ftr-bar{
  position:relative; z-index:2;
  border-top:1px solid var(--line-d);
  padding-block:22px 26px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
}
.ftr-bar p{ font-size:.85rem; color:var(--inv-3); }
.ftr-bar a{ color:var(--inv-2); transition:color .2s var(--ease); }
.ftr-bar a:hover{ color:var(--ice); }
.ftr-bar .credit a{ color:var(--ice); font-weight:600; }
.ftr-bar .credit a:hover{ color:var(--ice-hi); }

/* --------------------------------------------------------------------------
   25 · REVEAL MOTION
   -------------------------------------------------------------------------- */
/* Reveal styles are scoped to .js so that, if JavaScript fails to run, every
   section renders normally instead of staying permanently hidden. */
.js .rv{ opacity:0; transform:translateY(22px); }
.rv.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* Media reveal. Two rules matter here:
   1. The effect is applied to the CHILDREN, never to the observed element —
      a transform/clip that collapses an element's box also collapses its
      IntersectionObserver rect, so it would never be revealed at all.
   2. It uses opacity + transform rather than an animated clip-path, which
      interacts badly with the overflow/border-radius on .media and can leave
      the image unpainted. */
.js .rv-img > *{ opacity:0; transform:translateY(20px) scale(.988); }
.rv-img.is-in > *{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .rv,.rv-img,.rv-img > *{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .loadpath-step::before{ width:100%!important; }
  .drawer-nav a{ opacity:1!important; transform:none!important; }
}

/* --------------------------------------------------------------------------
   26 · UTILITIES
   -------------------------------------------------------------------------- */
.mt-s{ margin-top:clamp(16px,1.8vw,26px); }
.mt-m{ margin-top:clamp(26px,3vw,44px); }
.mt-l{ margin-top:clamp(38px,4.6vw,70px); }
.mb-m{ margin-bottom:clamp(26px,3vw,44px); }
.max-read{ max-width:70ch; }
.grid-2{ display:grid; gap:clamp(24px,3vw,48px); }
@media (min-width:820px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.sec-head{ display:grid; gap:.75em; max-width:64ch; }
.sec-head .lead{ margin-top:.3em; }
.center{ text-align:center; margin-inline:auto; }

/* 404 */
.err-page{ min-height:56vh; display:grid; place-items:center; text-align:center; }
.err-page .code{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(4.5rem,14vw,10rem); line-height:1; letter-spacing:-.05em;
  color:var(--ice);
}