/* Auto Life v2 · dark stage, one signature colour, bold condensed voice (design-system.md) */
:root{
  --stage:#0E1114; --stage-warm:#15181C; --hair:rgba(255,255,255,.12);
  --steel-light:#DDE1E5; --steel-card:#F3F5F7;
  --fg:#F4F5F7; --fg-muted:#A9B0B8; --ink:#0E1114; --ink-muted:#4B545C;
  --red:#E3261B; --copper:#FFB27A; --wa:#25D366; --wa-ink:#07301A;
  --display:"Barlow Condensed",Impact,sans-serif; --body:"Barlow",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --radius:4px; --wrap:1360px; --pad:48px;
  --shadow:0 40px 80px -40px rgba(0,0,0,.9);
  --ms-accent:#10305C; --ms-bg:rgba(14,17,20,.85); --ms-fg:#f4f5f7; --ms-font:var(--body); --ms-on:#fff;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--stage);overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stage);color:var(--fg);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%} img{height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase;margin:0;letter-spacing:-.005em;line-height:.92}
h1{font-size:clamp(54px,6.2vw,88px)} h2{font-size:clamp(40px,5vw,68px)} h3{font-size:clamp(24px,2.1vw,30px);line-height:1}
.accent{color:var(--copper)}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin:0 0 22px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red)}
.band-light .eyebrow{color:var(--ink-muted)}
p{margin:0}
.lede{font:500 clamp(17px,1.4vw,20px)/1.45 var(--body);color:var(--fg-muted);max-width:50ch;margin-top:20px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:var(--radius);font:600 15px/1 var(--body);letter-spacing:.01em;text-transform:uppercase;transition:transform .35s var(--ease),background .3s,border-color .3s;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-1px)}
.btn-wa{background:var(--wa);color:var(--wa-ink)} .btn-wa:hover{background:#34e478}
.btn-ghost{border:2px solid var(--red);color:var(--fg)} .btn-ghost:hover{background:var(--red)}
.band-light .btn-ghost{color:var(--ink)}
.btn-sm{padding:10px 14px;font-size:13px} .btn-sm svg{width:15px;height:15px}
.btn-lg{padding:22px 30px;font-size:19px;margin-top:40px} .btn-lg svg{width:24px;height:24px}

/* header: a calm solid bar; the badge logo, caps nav, phone, WhatsApp */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;color:#0F1215;transition:background .35s,border-color .35s,color .35s}
.site-header.scrolled{background:rgba(220,224,228,.92);box-shadow:0 1px 0 rgba(15,18,21,.12);backdrop-filter:blur(12px)}
.site-header .bar{display:flex;align-items:center;height:108px;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);gap:52px}
.lockup{display:block;flex:none} .lockup img{height:84px;width:auto;display:block}
.nav{display:flex;gap:34px;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-left:16px}
.nav a{position:relative;padding:10px 0;color:#0F1215;opacity:.8}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:#10305C;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover{opacity:1} .nav a:hover::after{transform:scaleX(1)}
.phone{margin-left:auto;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font:500 14px/1 var(--mono);letter-spacing:.02em;color:#0F1215;padding-right:8px}
.phone span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5A636B}
html.over-light .site-header{color:#0F1215}

/* bands */
section{position:relative}
.band{padding:120px 0;background:var(--stage)}
.band-light{background:var(--steel-light);color:var(--ink)}
.band-light h2{color:var(--ink)}
.sec-head{max-width:820px;margin-bottom:64px}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:
  radial-gradient(70% 80% at 85% 30%,rgba(255,178,122,.16),transparent 60%),
  radial-gradient(60% 50% at 20% 90%,rgba(227,38,27,.10),transparent 60%),
  linear-gradient(180deg,#14181D 0%,#0E1114 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.07;mix-blend-mode:screen}
.hero-light{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(38% 55% at var(--lx,72%) var(--ly,40%),rgba(255,178,122,.28),rgba(255,178,122,0) 70%);mix-blend-mode:screen}
.hero-3d{position:absolute;inset:0;z-index:1} .hero-3d canvas{width:100%;height:100%}
.hero-grid{position:relative;z-index:2;padding-top:140px;padding-bottom:24px;flex:1;display:flex;align-items:center}
.hero-copy{max-width:640px;pointer-events:none} .hero-copy a{pointer-events:auto}
.status{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:9px 14px 9px 12px;border:1px solid rgba(15,18,21,.18);border-radius:999px;background:rgba(255,255,255,.55);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#0F1215;pointer-events:none}
.status .dot{position:relative;width:8px;height:8px;border-radius:50%;background:#8A929A;flex:none}
.status.is-open .dot{background:#1DB954} .status.is-open .dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(29,185,84,.65);animation:pulse 2.4s ease-out infinite}
.status.is-closed .dot{background:#D8291B}
.status-time{color:#4B545C;padding-left:10px;border-left:1px solid rgba(15,18,21,.18);font-variant-numeric:tabular-nums}
@keyframes pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-brands{display:flex;align-items:center;gap:28px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(15,18,21,.16);width:fit-content;pointer-events:none}
.hero-brands-label{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#4B545C;margin-right:6px}
.hero-brands img{height:34px;width:auto} .hero-brands .hb-takoma{height:27px}
.callout-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.callout-lines path{fill:none;stroke:#fff;stroke-width:1;opacity:.45} .callout-lines circle{fill:var(--red);stroke:#fff;stroke-width:1.5}
.callout{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;padding:9px 12px;background:rgba(21,24,28,.82);backdrop-filter:blur(8px);border:1px solid var(--hair);border-radius:4px;
  font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap;margin:-14px 0 0 -6px}
.callout b{display:block;font-weight:500;color:#fff}
.hero-foot{position:relative;z-index:2;padding-bottom:0}
.segments{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.segments a{display:flex;align-items:center;gap:12px;padding:18px 18px;border-left:1px solid var(--hair);font:600 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg);transition:background .3s,color .3s}
.segments a:first-child{border-left:0}
.segments a{animation:seg-in .9s var(--ease) both} .segments a:nth-child(2){animation-delay:.08s} .segments a:nth-child(3){animation-delay:.16s} .segments a:nth-child(4){animation-delay:.24s} .segments a:nth-child(5){animation-delay:.32s} .segments a:nth-child(6){animation-delay:.4s}
@keyframes seg-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.segments a{animation:none}}
.segments a i{font:500 11px/1 var(--mono);color:var(--fg-muted);font-style:normal} .segments a b{margin-left:auto;font-weight:400;color:var(--fg-muted);transition:transform .35s var(--ease),color .3s}
.segments a:hover{background:var(--red);color:#fff} .segments a:hover i,.segments a:hover b{color:#fff} .segments a:hover b{transform:translateX(4px)}

/* coverage */
.coverage{background:var(--stage-warm);border-bottom:1px solid var(--hair);padding:44px 0}
.coverage-grid{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center}
.coverage-copy .eyebrow{margin-bottom:10px}
.coverage-line{font:600 clamp(18px,1.5vw,22px)/1.3 var(--display);text-transform:uppercase;letter-spacing:.01em}
.make-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:flex-end}
.make-list img{height:46px;width:auto;opacity:.9;transition:opacity .3s} .make-list img.inv{filter:invert(1);height:32px} .make-list li:hover img{opacity:1}

/* brands */
.brand-panels{display:grid;grid-template-columns:1fr 1fr;gap:28px;perspective:1800px}
.panel{background:var(--stage-warm);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;transform-style:preserve-3d;will-change:transform}
.panel-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#1b1f24}
.panel-media .still{width:100%;height:100%;object-fit:cover}
.panel-media .sweep{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%);mix-blend-mode:lighten;opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.panel-media .sweep.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.panel-media .sweep{opacity:0}}
.panel-body{padding:34px 36px 40px}
.panel-body .logo{height:40px;width:auto;margin-bottom:28px} .panel-body .logo-thg{height:54px} .panel-body .logo-takoma{height:36px}
.panel-body h3{margin-bottom:20px}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.facts li{padding:14px 0 14px 26px;border-bottom:1px solid var(--hair);color:var(--fg-muted);position:relative;font-size:16px}
.facts li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;background:var(--red)}

/* range */
.range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1400px}
.part{margin:0;background:var(--steel-card);border:1px solid rgba(14,17,20,.08);border-radius:var(--radius);padding:26px 26px 24px;will-change:transform}
.part-img{aspect-ratio:3/2;display:grid;place-items:center;margin-bottom:18px}
.part-img img{max-height:100%;transition:transform .6s var(--ease)}
.part:hover .part-img img{transform:translateY(-6px) rotate(-2deg) scale(1.03)}
.part figcaption{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.part figcaption i{font:500 11px/1 var(--mono);color:var(--ink-muted);font-style:normal;grid-row:span 2;padding-top:6px}
.part figcaption b{font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.005em} .part figcaption span{font-size:14px;color:var(--ink-muted)}

/* why us */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;perspective:1800px}
.tile{background:var(--stage-warm);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-rows:auto 1fr;will-change:transform}
.tile-media{position:relative;aspect-ratio:16/8;overflow:hidden;background:#1b1f24}
.tile-media img{width:100%;height:100%;object-fit:cover;opacity:.9}
.tile-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,20,0) 50%,rgba(14,17,20,.75))}
.tile-body{padding:28px 32px 34px} .tile-body i{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-style:normal;margin-bottom:14px}
.tile-body h3{margin-bottom:12px} .tile-body p{color:var(--fg-muted);max-width:48ch}
.tile-text{background:linear-gradient(160deg,#1A1F25,#121519)} .tile-text .tile-body{padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:0;height:100%} .tile-text .btn{align-self:flex-start;margin-top:28px}
.routes{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.routes .hub{fill:var(--red)} .routes .node{fill:#fff} .routes .line{fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round;opacity:.9}
.routes text{font:500 var(--rf,11px) var(--mono);letter-spacing:.06em;fill:#fff;text-transform:uppercase}

/* contact */
.band-contact{border-top:1px solid var(--hair)}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
.details{margin:0;padding:0;display:grid;border-top:1px solid var(--hair)}
.details div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair)}
.details dt{font:500 11px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)} .details dd{margin:0;font-size:17px}
.details a:hover{color:var(--copper)}

/* footer */
.site-footer{background:var(--stage);color:var(--fg-muted);font-size:13px;padding:40px 0 84px;overflow:hidden;border-top:1px solid var(--hair)}
.wordmark{font:700 clamp(96px,18vw,280px)/.85 var(--display);text-transform:uppercase;color:var(--red);letter-spacing:-.02em;white-space:nowrap;margin:0 0 28px -4px;will-change:transform}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:20px}

/* motion helpers */
[data-m]{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){[data-m],.panel,.part,.tile{transform:none!important;opacity:1!important}}

@media (max-width:1100px){
  :root{--pad:28px}
  .segments{grid-template-columns:repeat(3,1fr)} .segments a:nth-child(4){border-left:0} .segments a:nth-child(n+4){border-top:1px solid var(--hair)}
  .coverage-grid{grid-template-columns:1fr;gap:24px} .make-list{justify-content:flex-start}
  .brand-panels,.range-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:760px){
  :root{--pad:20px}
  .nav,.phone{display:none} .site-header .bar{height:72px;gap:12px} .lockup img{height:52px} .site-header .btn{margin-left:auto;padding:10px 14px;font-size:13px}
  .hero-brands{gap:18px;margin-top:28px} .hero-brands img{height:24px} .hero-brands .hb-takoma{height:21px}
  .band{padding:72px 0}
  .hero{min-height:100svh} .hero-grid{padding-top:96px;align-items:flex-start;flex:0 0 auto;order:1} .hero-copy{max-width:100%}
  .hero-3d{position:relative;inset:auto;height:40vh;min-height:260px;margin-top:-30px;order:2} .hero-foot{order:3;padding-top:8px}
  .callout,.callout-lines{display:none}
  .lede{font-size:17px}
  .segments{grid-template-columns:1fr 1fr} .segments a{padding:16px 12px;font-size:12px} .segments a:nth-child(odd){border-left:0} .segments a:nth-child(n+3){border-top:1px solid var(--hair)} .segments a:nth-child(4){border-left:1px solid var(--hair)}
  .make-list{gap:14px 20px} .make-list img{height:32px} .make-list img.inv{height:22px}
  .brand-panels,.range-grid,.tiles{grid-template-columns:1fr}
  .panel-body{padding:26px 22px 30px} .tile-body{padding:22px 22px 28px}
  .details div{grid-template-columns:1fr;gap:6px}
  .wordmark{font-size:22vw}
}

/* ===== valve stem seals ===== */
.band-seals{background:#F4F5F7;color:#0F1215;padding:112px 0 120px}
.band-seals .eyebrow{color:#4B545C} .band-seals .eyebrow::before{background:#10305C}
.band-seals h2{color:#0F1215} .band-seals .accent{color:#10305C} .band-seals .lede{color:#4B545C}
.seals-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.spec{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px}
.spec th{text-align:left;font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:0 0 12px;border-bottom:2px solid #0F1215;vertical-align:bottom}
.spec th span{font:500 10px/1 var(--mono);letter-spacing:.1em;color:#6B737B;margin-left:6px}
.spec .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:1px} .sw-acm{background:#141618} .sw-fkm{background:#5e2d1f}
.spec td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(15,18,21,.12);vertical-align:top;color:#4B545C}
.spec td:first-child{font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6B737B;width:38%}
.spec td.hi{color:#0F1215;font-weight:600}
.seals-stage{position:relative}
.seal-3d{position:relative;aspect-ratio:4/3;background:#DCE0E4;border-radius:var(--radius);overflow:hidden}
.seal-3d::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.16;mix-blend-mode:multiply}
.seal-3d canvas{width:100%;height:100%;position:relative;z-index:1}
.seal-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.seal-lines path{fill:none;stroke:#10305C;stroke-width:1;opacity:.7} .seal-lines circle{fill:#10305C;stroke:#fff;stroke-width:1.5}
.seal-callout{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;padding:9px 12px;background:#10305C;border-radius:4px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#B9C6DA;white-space:nowrap;margin:-14px 0 0 -6px;transition:opacity .6s var(--ease)}
.seal-callout b{display:block;color:#fff;font-weight:500}
.stage-tags{position:absolute;top:18px;left:18px;z-index:3;display:flex;gap:8px}
.tag{font:500 11px/1 var(--mono);letter-spacing:.1em;padding:8px 10px;border-radius:4px;color:#fff} .tag-acm{background:#141618} .tag-fkm{background:#5e2d1f}
.heat{margin-top:22px;padding:18px 22px 10px;border:1px solid rgba(15,18,21,.12);border-radius:var(--radius);background:#fff}
.heat-head{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#4B545C;margin-bottom:10px}
.legend i{display:inline-block;width:14px;height:8px;margin:0 6px 0 14px;vertical-align:-1px} .legend .solid{background:#0F1215} .legend .hatch{background:repeating-linear-gradient(135deg,#0F1215 0 2px,transparent 2px 5px)}
.heat-rail{width:100%;height:auto;display:block}
.heat-rail text{font:500 10px var(--mono);fill:#6B737B;letter-spacing:.06em} .heat-rail .lab{fill:#0F1215;font-weight:500}
.heat-rail .tick{stroke:rgba(15,18,21,.18);stroke-width:1} .heat-rail .base{stroke:#0F1215;stroke-width:1}
@media (max-width:1100px){ .seals-grid{grid-template-columns:1fr;gap:40px} .seals-stage{order:-1} }
@media (max-width:760px){ .band-seals{padding:72px 0} .seal-callout{display:none} .seal-lines{display:none} .spec{font-size:14px} .spec td:first-child{width:34%} }
/* seals: photographic variant */
.stage-photo{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:#1b1f24;aspect-ratio:4/3;will-change:transform}
.stage-photo img{width:100%;height:100%;object-fit:cover;display:block}
.stage-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#C9CED4;background:rgba(14,17,20,.78)}
.pc{position:absolute;z-index:2;padding:9px 12px;background:#10305C;border-radius:4px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#B9C6DA;white-space:nowrap}
.pc b{display:block;color:#fff;font-weight:500} .pc::after{content:"";position:absolute;width:1px;background:#fff;opacity:.7}
.pc-seal{left:62%;top:14%} .pc-seal::after{left:-26px;top:50%;width:26px;height:1px}
.pc-valve{left:60%;top:70%} .pc-valve::after{left:-28px;top:50%;width:28px;height:1px}
.anatomy{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin:22px 0 0;padding:16px;border:1px solid rgba(15,18,21,.12);border-radius:var(--radius);background:#fff}
.anatomy img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.anatomy figcaption i{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6B737B;font-style:normal;margin-bottom:8px}
.anatomy figcaption b{font:500 16px/1.4 var(--body);color:#0F1215}
.col-seal{height:54px;width:auto;display:block;margin-bottom:10px}
@media (max-width:760px){ .anatomy{grid-template-columns:1fr} .pc{display:none} .col-seal{height:40px} }
/* ===== valve stem seals: cinematic ===== */
.band-cine{background:#0B0D10;color:#F4F5F7;padding:0 0 112px;overflow:hidden}
.cine-stage{position:relative;height:min(90vh,880px);overflow:hidden;background:#000}
.cine-still,.cine-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.cine-film{opacity:0;transition:opacity 1.2s var(--ease)} .cine-film.ready{opacity:1}
.cine-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,#0B0D10,rgba(11,13,16,0))}
.readout{position:absolute;right:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));top:132px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;padding:14px 18px;background:rgba(11,13,16,.72);border:1px solid rgba(255,255,255,.14);border-radius:4px;backdrop-filter:blur(6px)}
.readout-k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A9B0B8}
.readout-v{font:600 44px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums} .readout-v b{font-weight:600;color:#FFB27A}
.cine-tag{position:absolute;top:36%;padding:8px 11px;border-radius:4px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:#fff;border:1px solid rgba(255,255,255,.25);background:rgba(11,13,16,.55);backdrop-filter:blur(4px)}
.cine-tag-acm{left:22%} .cine-tag-fkm{left:62%}
.cine-copy{position:relative;margin-top:-120px;z-index:2}
.band-cine .eyebrow{color:#A9B0B8} .band-cine .eyebrow::before{background:#FFB27A}
.band-cine h2{color:#fff;max-width:900px} html[data-theme] .band-cine .accent{color:#FFB27A} .band-cine .lede{color:#A9B0B8}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;border-top:1px solid rgba(255,255,255,.14)}
.num{padding:28px 28px 0 0;border-right:1px solid rgba(255,255,255,.14)} .num:last-child{border-right:0}
.num b{display:block;font:600 clamp(56px,6vw,88px)/1 var(--display);letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.num i{display:block;margin:12px 0 10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FFB27A;font-style:normal}
.num > span{display:block;color:#A9B0B8;font-size:15px;max-width:30ch} .num b span{display:inline;font:inherit;color:inherit}
.spec-wrap{margin-top:48px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.spec-wrap summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.spec-wrap summary::after{content:"+";font:400 18px/1 var(--mono);color:#FFB27A} .spec-wrap[open] summary::after{content:"-"}
.spec-wrap summary::-webkit-details-marker{display:none}
.band-cine .spec{margin-top:22px;max-width:760px} .band-cine .spec th{border-bottom-color:#fff;color:#fff} .band-cine .spec td{color:#A9B0B8;border-bottom-color:rgba(255,255,255,.12)} .band-cine .spec td:first-child{color:#8A929A} .band-cine .spec td.hi{color:#fff}
@media (max-width:1100px){ .numbers{grid-template-columns:1fr} .num{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:24px 0} .num:last-child{border-bottom:0} }
@media (max-width:760px){ .cine-stage{height:66vh} .cine-still,.cine-film{object-position:50% 30%} .readout{top:86px;right:16px;padding:10px 12px} .readout-v{font-size:32px} .cine-copy{margin-top:-60px} .band-cine{padding-bottom:72px} .cine-tag{display:none} }
/* ===== seals: the heat cycle layer ===== */
.cine-cool,.cine-hot,.cine-limit{transition:none} .cine-hot,.cine-limit{opacity:0}
.thermo{position:absolute;left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));top:140px;bottom:200px;display:flex;gap:12px;z-index:3}
.thermo-track{position:relative;width:10px;border-radius:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);overflow:visible}
.thermo-fill{position:absolute;left:0;right:0;bottom:0;height:8%;border-radius:5px;background:#FFB27A;box-shadow:0 0 18px rgba(255,178,122,.55)}
.thermo-mark{position:absolute;left:18px;bottom:calc(var(--t) / 250 * 100%);transform:translateY(50%);white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#C9CED4;display:flex;align-items:center;gap:8px}
.thermo-mark i{width:14px;height:1px;background:#C9CED4;display:block;margin-left:-14px}
.thermo-mark.m-acm{color:#E9EDF1} .thermo-mark.m-fkm{color:#FFB27A} .thermo-mark.m-fkm i{background:#FFB27A}
.thermo-scale{display:flex;flex-direction:column;justify-content:space-between;font:500 10px/1 var(--mono);color:#8A929A;letter-spacing:.06em;padding:0 0 0 0;margin-left:-4px;position:absolute;left:-54px;top:0;bottom:0;text-align:right;width:44px}
.scard{position:absolute;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:12px 14px;background:rgba(11,13,16,.72);border:1px solid rgba(255,255,255,.14);border-radius:4px;backdrop-filter:blur(6px);min-width:220px}
.scard .dot{grid-row:span 2;width:12px;height:12px;border-radius:50%;background:#1DB954;box-shadow:0 0 0 0 rgba(29,185,84,.5);transition:background .4s,box-shadow .4s}
.scard b{font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.scard-state{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#A9B0B8;transition:color .4s}
.scard.is-limit .dot{background:#F2B705;box-shadow:0 0 14px rgba(242,183,5,.6)} .scard.is-limit .scard-state{color:#F2B705}
.scard.is-over .dot{background:#E3261B;box-shadow:0 0 14px rgba(227,38,27,.6)} .scard.is-over .scard-state{color:#FF5247}
.scard-acm{left:22%;top:56%} .scard-fkm{left:58%;top:56%}
@media (max-width:1100px){ .thermo{display:none} .scard{min-width:0;padding:10px 12px} .scard-acm{left:4%;top:60%} .scard-fkm{left:auto;right:4%;top:60%} }
@media (max-width:760px){ .scard b{font-size:11px} .scard-state{font-size:9.5px} .scard-acm,.scard-fkm{top:52%} }
/* ===== seals: the clear version (big labels, colour gauges) ===== */
.thermo{top:150px;bottom:220px;gap:16px;align-items:stretch}
.thermo-scale{position:static;width:auto;margin:0;display:flex;flex-direction:column;justify-content:space-between;text-align:right;font:600 13px/1 var(--mono);color:#E9EDF1;letter-spacing:.04em}
.thermo-track{width:18px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(to top,#1DB954 0%,#1DB954 44%,#F2B705 62%,#FF6A1F 76%,#E3261B 90%,#E3261B 100%);overflow:visible}
.thermo-cover{position:absolute;left:0;right:0;top:0;height:92%;background:rgba(11,13,16,.82);border-radius:9px 9px 0 0}
.thermo-fill{display:none}
.thermo-mark{left:28px;font:600 12px/1 var(--mono);letter-spacing:.08em;color:#fff;gap:10px}
.thermo-mark b{font:700 16px/1 var(--display);letter-spacing:.02em;color:#fff}
.thermo-mark i{width:18px;margin-left:-18px;background:#fff;height:2px}
.thermo-mark.m-fkm{color:#FFB27A} .thermo-mark.m-fkm i{background:#FFB27A} .thermo-mark.m-fkm b{color:#FFB27A}
.readout{padding:16px 20px;gap:10px}
.readout-k{font-size:12px;color:#C9CED4} .readout-v{font-size:64px}
.scard{display:block;min-width:300px;padding:16px 18px 14px;background:rgba(11,13,16,.8);border:1px solid rgba(255,255,255,.18)}
.scard-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.scard-head b{font:700 30px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff} .scard-head span{font:500 12px/1 var(--mono);letter-spacing:.12em;color:#A9B0B8}
.scard-state{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.scard-state .dot{width:14px;height:14px;border-radius:50%;background:#1DB954;box-shadow:0 0 12px rgba(29,185,84,.6);transition:background .4s,box-shadow .4s}
.state-word{font:700 17px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#1DB954;transition:color .4s}
.scard.is-limit .dot{background:#F2B705;box-shadow:0 0 14px rgba(242,183,5,.7)} .scard.is-limit .state-word{color:#F2B705}
.scard.is-over .dot{background:#E3261B;box-shadow:0 0 14px rgba(227,38,27,.7)} .scard.is-over .state-word{color:#FF5247}
.gauge{position:relative;height:12px;border-radius:6px;background:linear-gradient(to right,#1DB954 0%,#1DB954 var(--g1,55%),#F2B705 var(--g2,68%),#E3261B var(--g3,82%),#E3261B 100%);border:1px solid rgba(255,255,255,.2)}
.gauge-cover{position:absolute;top:0;bottom:0;right:0;width:100%;background:rgba(11,13,16,.85);border-radius:0 6px 6px 0}
.gauge-limit{position:absolute;top:-5px;bottom:-5px;width:2px;background:#fff;left:var(--lim,65%)}
.gauge-caption{display:flex;justify-content:space-between;margin-top:8px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A9B0B8}
.scard-acm{left:18%;top:54%} .scard-fkm{left:56%;top:54%}
@media (max-width:1100px){ .scard{min-width:0;width:44%;padding:12px 12px} .scard-head b{font-size:22px} .state-word{font-size:13px} .scard-acm{left:3%;top:58%} .scard-fkm{left:auto;right:3%;top:58%} .readout-v{font-size:40px} }
@media (max-width:760px){ .scard-acm,.scard-fkm{top:50%} .gauge-caption{font-size:9px} }
/* ===== seals: one-screen composition on A1 ===== */
.cine-stage{height:calc(100vh - 108px);min-height:640px;max-height:980px}
.cine-still,.cine-film{object-position:50% 50%}
.cine-stage::after{height:52%;background:linear-gradient(to top,rgba(11,13,16,.96) 0%,rgba(11,13,16,.75) 35%,rgba(11,13,16,0) 100%)}
.stage-copy{position:absolute;left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));right:var(--pad);bottom:40px;z-index:4;max-width:720px}
.stage-copy .eyebrow{margin-bottom:14px} .stage-copy h2{font-size:clamp(40px,4.6vw,64px)} .stage-copy .lede{margin-top:16px;font-size:17px;max-width:62ch}
.thermo{top:130px;bottom:auto;height:48%}
.readout{top:130px}
.scard-acm{left:14%;top:36%} .scard-fkm{left:58%;top:36%}
.cine-copy{margin-top:72px} .numbers-head .eyebrow{margin-bottom:0} .numbers{margin-top:24px}
@media (max-width:1100px){ .cine-stage{height:auto;aspect-ratio:4/3;min-height:0} .stage-copy{position:static;max-width:none;padding:28px var(--pad) 0} .cine-stage::after{height:30%} .scard-acm{left:3%;top:40%} .scard-fkm{left:auto;right:3%;top:40%} .readout{top:90px} }
@media (max-width:760px){ .cine-stage{aspect-ratio:3/4} .scard{width:46%} .scard-acm,.scard-fkm{top:34%} .stage-copy h2{font-size:38px} }
/* seals: one-screen composition, tuning */
.cine-still,.cine-film{object-position:50% 10%}
.cine-stage::after{height:46%;background:linear-gradient(to top,rgba(11,13,16,.94) 0%,rgba(11,13,16,.6) 40%,rgba(11,13,16,0) 100%)}
.scard-acm{left:23%;top:40%} .scard-fkm{left:61%;top:40%}
.thermo{height:46%}
@media (max-width:1100px){ .scard-acm{left:3%;top:42%} .scard-fkm{left:auto;right:3%;top:42%} }

/* seals: push-in stand-in (wide -> mid -> close) and cards that travel with it */
.cine-mid{opacity:0}
.scard{transition:none}

/* seals: the film and the code zoom before it */
.cine-zoom{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.cine-film{transition:none}

@media (max-width:760px){ .cine-stage{aspect-ratio:1/1} .cine-still,.cine-film,.cine-zoom{object-position:50% 50%} .scard{width:45%;min-width:0} .scard-head b{font-size:20px} .readout{top:16px} }

/* seals: the copy sits in a wrapper with the stage, so it overlays on desktop and flows below on phone */
.cine-top{position:relative}
@media (max-width:1100px){ .stage-copy{padding:28px var(--pad) 0} }
@media (max-width:760px){ .readout{top:80px} .stage-copy{padding-top:24px} .stage-copy h2{font-size:38px} }

/* ===== header, sticky state: minimal, no background. Name as text, nav labels, a small WhatsApp button. ===== */
.site-header .bar{transition:height .35s var(--ease)}
.site-header.scrolled{background:rgba(222,226,230,.9);box-shadow:none;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(15,18,21,.1)}
.site-header.scrolled .bar{height:64px;gap:40px}
.site-header.scrolled .lockup img{height:40px} .lockup .lk-dark{display:none}
.site-header.scrolled .phone{display:none}
.site-header.scrolled .btn{margin-left:auto;padding:9px 13px;font-size:12px;gap:8px} .site-header.scrolled .btn svg{width:15px;height:15px}
.site-header.scrolled .nav a{opacity:.9}
html.over-dark .site-header.scrolled{background:rgba(15,18,21,.84);border-bottom-color:rgba(255,255,255,.1);color:#fff} html.over-dark .site-header.scrolled .nav a{color:#fff} html.over-dark .site-header.scrolled .nav a::after{background:#fff}
html.over-dark .site-header.scrolled .lk-light{display:none} html.over-dark .site-header.scrolled .lk-dark{display:block}
@media (max-width:760px){ .site-header.scrolled .bar{height:56px} .site-header.scrolled .lockup img{height:34px} }

/* ===== valve stem seals v2: copy beside a framed panel, nothing laid over the image ===== */
.band-seals2{background:#0B0D10;color:#F4F5F7;padding:96px 0}
.band-seals2 .eyebrow{color:#A9B0B8} .band-seals2 .eyebrow::before{background:#FFB27A}
.band-seals2 h2{color:#fff;font-size:clamp(40px,4.4vw,62px)} html[data-theme] .band-seals2 .accent{color:#FFB27A}
.band-seals2 .lede{color:#A9B0B8;font-size:17px;margin-top:16px;max-width:46ch}
.seals2{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.mrows{margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.mrow{padding:18px 0 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.mrow-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.mrow-head b{font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.mrow-head span{font:500 11px/1 var(--mono);letter-spacing:.12em;color:#8A929A}
.mrow-head .state{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-style:normal}
.mrow-head .dot{width:11px;height:11px;border-radius:50%;background:#1DB954;box-shadow:0 0 10px rgba(29,185,84,.6);transition:background .4s,box-shadow .4s}
.mrow-head .state-word{font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#1DB954;transition:color .4s}
.mrow.is-limit .dot{background:#F2B705;box-shadow:0 0 12px rgba(242,183,5,.7)} .mrow.is-limit .state-word{color:#F2B705}
.mrow.is-over .dot{background:#E3261B;box-shadow:0 0 12px rgba(227,38,27,.7)} .mrow.is-over .state-word{color:#FF5247}
.mrow .gauge{height:10px}
.mrow p{margin:12px 0 0;font-size:14px;line-height:1.5;color:#A9B0B8}
.stock-line{margin-top:16px;font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C9CED4}
.band-seals2 .spec-wrap{margin-top:16px;padding-top:14px}
.band-seals2 .spec{max-width:100%;font-size:14px} .band-seals2 .spec td:first-child{width:40%}
.seals2-media{will-change:transform}
.seals2-media .cine-stage{position:relative;height:auto;min-height:0;max-height:none;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.seals2-media .cine-stage::after{display:none}
.seals2-media .cine-still,.seals2-media .cine-film{object-position:50% 50%}
.trail{margin-top:18px}
.trail-row{display:flex;align-items:center;gap:18px}
.trail-bar{position:relative;flex:1;height:12px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(to right,#1DB954 0 54%,#F2B705 62%,#FF6A1F 74%,#E3261B 84% 100%)}
.trail-mark{position:absolute;top:-7px;bottom:-7px;left:calc(var(--t) / 250 * 100%);width:2px;background:#fff}
.trail-mark b{position:absolute;bottom:calc(100% + 8px);left:0;transform:translateX(-50%);white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#E9EDF1}
.trail-mark.m2 b{color:#FFB27A} .trail-mark.m2{background:#FFB27A}
.trail-needle{position:absolute;top:-10px;left:0;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #fff;transform:translateX(-50%);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.trail-read{flex:none;width:118px;text-align:right;font:600 36px/1 var(--display);letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums} .trail-read b{font-weight:600;color:#FFB27A}
.trail-scale{display:flex;justify-content:space-between;margin-top:10px;padding-right:136px;font:500 10px/1 var(--mono);letter-spacing:.06em;color:#8A929A}
.trail{padding-top:26px}
@media (max-width:1100px){ .seals2{grid-template-columns:1fr;gap:36px} .seals2-media{order:-1} .band-seals2{padding:72px 0} }
@media (max-width:760px){ .trail-read{width:92px;font-size:28px} .trail-scale{padding-right:110px} .mrow-head b{font-size:24px} .trail-mark b{font-size:9px} }

/* rail labels: the Acryl label ends at its mark, the Viton label starts at its mark, so they never meet */
.trail-mark b{transform:translateX(calc(-100% - 6px))} .trail-mark.m2 b{transform:translateX(8px)}

/* ===== seals v3: the rows sit under the panel in the shot's left/right order, with tags in the panel and rubber swatches ===== */
.band-seals2{padding:80px 0}
.seals2{grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.seals2-media .cine-stage{aspect-ratio:16/10}
.seals2-media .cine-still,.seals2-media .cine-film{object-position:50% 42%}
.sw-rub{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);vertical-align:-1px}
.sw-acryl{background:#17191c} .sw-viton{background:#6a3421}
.ptag{position:absolute;top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:4px;background:rgba(11,13,16,.78);border:1px solid rgba(255,255,255,.18);font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;backdrop-filter:blur(4px)}
.ptag-l{left:14px} .ptag-r{right:14px}
.ptag b{position:absolute;top:100%;width:1px;height:26px;background:rgba(255,255,255,.7)} .ptag-l b{left:22px} .ptag-r b{right:22px}
.ptag b::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;border-radius:50%;background:#fff;transform:translateX(-50%)}
.mrows{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:14px;border-top:0}
.mrow{padding:14px 0 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:0}
.mrow-head{gap:10px;margin-bottom:10px} .mrow-head b{font-size:26px}
.mrow p{margin-top:10px;font-size:13.5px}
.trail{padding-top:24px;margin-top:10px}
.band-seals2 .lede{max-width:40ch}
.band-seals2 .spec-wrap{margin-top:22px}
@media (max-width:1100px){ .seals2{gap:36px} .seals2-media{order:-1} .mrows{gap:20px} }
@media (max-width:760px){ .seals2-media .cine-stage{aspect-ratio:4/3} .mrows{grid-template-columns:1fr 1fr;gap:14px} .mrow-head b{font-size:20px} .mrow-head span{display:none} .mrow p{font-size:12.5px} .ptag{padding:6px 8px;font-size:11px} }
/* seals v3, narrow screens: one column, panel first (restated after the v3 grid rule so it wins) */
@media (max-width:1100px){ .seals2{grid-template-columns:1fr} .seals2-media{order:-1} .band-seals2 .lede{max-width:none} }
@media (max-width:760px){ .trail-scale{padding-right:100px} .mrow-head .state-word{font-size:11px} }
@media (max-width:760px){ .mrow-head span{display:inline} .mrow-head > span{display:none} .mrow-head .state-word{display:inline;font-size:11px} }
/* ===== seals v4: deep navy band continuing the hero's bar; tighter, lower panel crop; a calmer palette ===== */
.band-seals2{background:#0F2140;color:#F4F6FA}
.band-seals2 .eyebrow{color:#AFC0D8} .band-seals2 .eyebrow::before{background:#E3B341}
html[data-theme] .band-seals2 .accent{color:#CFDCEE}
.band-seals2 .lede{color:#C3D0E2} .stock-line{color:#AFC0D8}
.mrows .mrow{border-top-color:rgba(255,255,255,.16)} .mrow p{color:#AFC0D8}
.band-seals2 .gauge{border-color:rgba(255,255,255,.22)} .band-seals2 .gauge-cover{background:rgba(15,33,64,.88)}
.trail-read b{color:#E3B341} .trail-scale{color:#8FA3C2} .trail-mark b{color:#E9EDF1} .trail-mark.m2 b{color:#E3B341} .trail-mark.m2{background:#E3B341}
.band-seals2 .spec th{border-bottom-color:#fff;color:#fff} .band-seals2 .spec td{color:#AFC0D8;border-bottom-color:rgba(255,255,255,.14)} .band-seals2 .spec td:first-child{color:#8FA3C2} .band-seals2 .spec td.hi{color:#fff}
.band-seals2 .spec-wrap{border-top-color:rgba(255,255,255,.16)} .band-seals2 .spec-wrap summary::after{color:#E3B341}
.seals2-media .cine-stage{background:#08142A;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.seals2-media .cine-still,.seals2-media .cine-film{object-position:50% 24%;transform:scale(1.3);transform-origin:50% 30%}
.ptag{background:rgba(8,20,42,.8);border-color:rgba(255,255,255,.22)}

/* ===== seals v5: game-style status. One gauge (temperature) with badge markers; status chips with icons; event toasts ===== */
.band-seals2 .lede{max-width:34ch;font-size:18px}
.trail-mark b{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:rgba(8,20,42,.85);border:1px solid rgba(255,255,255,.22);color:#fff;transform:translateX(calc(-100% - 6px))}
.trail-mark.m2 b{transform:translateX(8px);color:#fff} .trail-mark b em{width:9px;height:9px;border-width:1px}
.trail{padding-top:34px}
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.mcard{position:relative;padding:14px 16px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);transition:border-color .4s,background .4s}
.mcard-top{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.mcard-top b{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff} .mcard-top span{font:500 11px/1 var(--mono);letter-spacing:.12em;color:#8FA3C2}
.mcard-state{display:flex;align-items:center;gap:10px;color:#2EDB6C}
.mcard-state .ic{width:26px;height:26px;display:none;flex:none} .mcard-state .ic-ok{display:block}
.mcard-state .state-word{font:700 15px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:inherit}
.mcard p{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:#AFC0D8}
.mcard.is-limit{border-color:rgba(242,183,5,.7);background:rgba(242,183,5,.08)} .mcard.is-limit .mcard-state{color:#F2B705}
.mcard.is-limit .ic{display:none} .mcard.is-limit .ic-warn{display:block;animation:warn-pulse 1.4s ease-in-out infinite}
.mcard.is-over{border-color:rgba(227,38,27,.75);background:rgba(227,38,27,.1);animation:fail-flash .9s ease-out 1} .mcard.is-over .mcard-state{color:#FF5247}
.mcard.is-over .ic{display:none} .mcard.is-over .ic-fail{display:block}
@keyframes warn-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.75}}
@keyframes fail-flash{0%{background:rgba(227,38,27,.55)}100%{background:rgba(227,38,27,.1)}}
.toast{position:absolute;left:14px;bottom:14px;z-index:3;display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:4px;background:rgba(8,20,42,.86);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;max-width:70%}
.toast.show{opacity:1;transform:none}
.toast-t{font:700 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff} .toast-m{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C3D0E2}
.toast.warn .toast-t{color:#F2B705} .toast.fail .toast-t{color:#FF5247}
.mrows{display:none}
@media (max-width:760px){ .mcards{gap:10px} .mcard{padding:12px} .mcard-top b{font-size:20px} .mcard-top span{display:none} .mcard-state .ic{width:22px;height:22px} .mcard-state .state-word{font-size:12px} .mcard p{font-size:12px} .toast{max-width:88%} .trail-mark b{padding:4px 6px;font-size:9.5px} }
/* ===== seals band, graphite: the dark twin of the hero's brushed steel (variant A: faint dark-steel grain) ===== */
.band-seals2{background:#1B1E22;position:relative}
.band-seals2::before{content:"";position:absolute;inset:0;background:url(assets/steel_sheet_dark.jpg) center/cover;opacity:.14;mix-blend-mode:screen;pointer-events:none}
.band-seals2 .wrap{position:relative}
.band-seals2 .eyebrow{color:#B3B9C1} .band-seals2 .lede{color:#C9CED4} .stock-line{color:#B3B9C1}
html[data-theme] .band-seals2 .accent{color:#D9DEE4}
.seals2-media .cine-stage{background:#0F1113}
.trail-mark b{background:rgba(14,16,20,.88)} .toast{background:rgba(14,16,20,.88)} .ptag{background:rgba(14,16,20,.8)}
.trail-scale{color:#8A929A} .mcard-top span{color:#8A929A} .mcard p{color:#B3B9C1}
.band-seals2 .spec td{color:#B3B9C1} .band-seals2 .spec td:first-child{color:#8A929A}


/* ===== seals v6: on the hero's silver, the table always visible, the dark panel and the navy bar carry the contrast ===== */
.band-seals3{background:#DCE0E4;color:#0F1215;padding:88px 0;position:relative}
.band-seals3::before{content:"";position:absolute;inset:0;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.band-seals3 .wrap{position:relative}
.band-seals3 .eyebrow{color:#4B545C} .band-seals3 .eyebrow::before{background:#10305C}
.band-seals3 h2{color:#0F1215;font-size:clamp(40px,4.4vw,62px)} html[data-theme] .band-seals3 .accent{color:#10305C}
.band-seals3 .lede{color:#4B545C;font-size:17px;max-width:44ch;margin-top:16px}
.seals3{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.spec-light{width:100%;border-collapse:collapse;margin-top:28px;font-size:14.5px}
.spec-light th{text-align:left;font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:0 0 12px;border-bottom:2px solid #0F1215;vertical-align:bottom;color:#0F1215}
.spec-light th span{font:500 11.5px/1 var(--mono);letter-spacing:.1em;color:#5A636B;margin-left:6px}
.spec-light th .sw-rub{margin-right:7px;border-color:rgba(15,18,21,.35)}
.spec-light .col-seal{height:56px;width:auto;display:block;margin-bottom:10px}
.spec-light td{padding:10px 12px 10px 0;border-bottom:1px solid rgba(15,18,21,.14);vertical-align:top;color:#4B545C}
.spec-light td:first-child{font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6B737B;width:36%}
.spec-light td.hi{color:#0F1215;font-weight:600}
.seals3-media{will-change:transform}
.seals3-media .cine-stage{position:relative;height:auto;min-height:0;max-height:none;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0F1113;box-shadow:0 40px 80px -36px rgba(15,18,21,.6)}
.seals3-media .cine-stage::after{display:none}
.seals3-media .cine-still,.seals3-media .cine-film{object-position:50% 24%;transform:scale(1.3);transform-origin:50% 30%}
.band-seals3 .ptag{background:rgba(14,16,20,.8)}
.band-seals3 .toast{display:none}
.banner{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;background:rgba(14,16,20,.86);backdrop-filter:blur(4px);border-top:3px solid #2EDB6C;transition:border-color .4s}
.banner-dot{width:12px;height:12px;border-radius:50%;background:#2EDB6C;flex:none;transition:background .4s;box-shadow:0 0 12px rgba(46,219,108,.6)}
.banner-t{font:700 clamp(18px,1.8vw,26px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.banner.warn{border-top-color:#F2B705} .banner.warn .banner-dot{background:#F2B705;box-shadow:0 0 12px rgba(242,183,5,.7);animation:warn-pulse 1.2s ease-in-out infinite}
.banner.fail{border-top-color:#E3261B} .banner.fail .banner-dot{background:#E3261B;box-shadow:0 0 12px rgba(227,38,27,.7)}
.band-seals3 .trail{padding-top:34px;margin-top:8px}
.band-seals3 .trail-mark b{background:#0F1215;border-color:#0F1215;color:#fff} .band-seals3 .trail-mark.m2 b{color:#fff} .band-seals3 .trail-mark.m2{background:#10305C}
.band-seals3 .trail-bar{border-color:rgba(15,18,21,.25)}
.band-seals3 .trail-read{color:#0F1215} .band-seals3 .trail-read b{color:#10305C} .band-seals3 .trail-scale{color:#6B737B}
.band-seals3 .mcards{margin-top:16px;gap:16px}
.band-seals3 .mcard{background:#F6F7F8;border:1px solid rgba(15,18,21,.14);box-shadow:0 10px 30px -18px rgba(15,18,21,.4)}
.band-seals3 .mcard-top b{color:#0F1215} .band-seals3 .mcard-top span{color:#6B737B}
.band-seals3 .mcard-state{color:#189A4A} .band-seals3 .mcard-state .state-word{font-size:16px}
.band-seals3 .mcard.is-limit{border-color:#E3B341;background:#FFF6DC} .band-seals3 .mcard.is-limit .mcard-state{color:#B07D00}
.band-seals3 .mcard.is-over{border-color:#E3261B;background:#FDE9E7} .band-seals3 .mcard.is-over .mcard-state{color:#C8201A}
@keyframes fail-flash{0%{background:#F7B5AE}100%{background:#FDE9E7}}
@media (max-width:1100px){ .seals3{grid-template-columns:1fr;gap:36px} .seals3-media{order:-1} .band-seals3{padding:72px 0} }
@media (max-width:760px){ .seals3-media .cine-stage{aspect-ratio:4/3} .spec-light{font-size:13.5px} .spec-light td:first-child{width:34%} .spec-light .col-seal{height:42px} .banner-t{font-size:16px} .banner{padding:10px 12px} }

/* ===== seals v7: one wide cinematic panel, the HUD on the film, the comparison as a strip under it ===== */
.band-seals4{background:#DCE0E4;color:#0F1215;padding:84px 0 88px;position:relative}
.band-seals4::before{content:"";position:absolute;inset:0;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.band-seals4 .wrap{position:relative}
.seals4-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:28px}
.band-seals4 .eyebrow{color:#4B545C;margin-bottom:18px} .band-seals4 .eyebrow::before{background:#10305C}
.band-seals4 h2{color:#0F1215;font-size:clamp(40px,4.6vw,66px)} html[data-theme] .band-seals4 .accent{color:#10305C}
.band-seals4 .lede{color:#4B545C;font-size:17px;max-width:38ch;margin:0 0 6px}
/* the panel */
.band-seals4 .stage7{position:relative;height:auto;min-height:0;max-height:none;aspect-ratio:2/1;border-radius:6px;overflow:hidden;background:#0F1113;box-shadow:0 50px 90px -40px rgba(15,18,21,.65);will-change:transform;isolation:isolate}
.band-seals4 .stage7::after{display:none}
.stage7 .cine-still,.stage7 .cine-film{object-fit:cover;object-position:50% 0%;transform:none}
.stage7 .cine-film{transition:none}
.heat-veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;box-shadow:inset 0 0 160px rgba(255,96,20,.55)}
.hud-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hud-lines path{fill:none;stroke:#fff;stroke-width:1.2;opacity:.6} .hud-lines circle{fill:#10305C;stroke:#fff;stroke-width:1.5}
/* unit frames, one per seal, the hero's navy callout grown into a status card */
.uf{position:absolute;top:16px;z-index:4;width:232px;border-radius:5px;overflow:hidden;background:rgba(12,14,18,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 40px -20px rgba(0,0,0,.8);transition:border-color .5s}
.uf-l{left:16px} .uf-r{right:16px}
.uf-name{display:flex;align-items:baseline;gap:9px;padding:9px 12px 8px;background:#10305C;color:#fff}
.uf-name b{font:700 20px/1 var(--display);text-transform:uppercase;letter-spacing:.03em} .uf-name span{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:#B9C6DA}
.uf-name .sw-rub{align-self:center;border-color:rgba(255,255,255,.6)}
.uf-state{display:flex;align-items:center;gap:9px;padding:11px 12px 8px;color:#2EDB6C;transition:color .4s}
.uf-state .ic{width:24px;height:24px;display:none;flex:none} .uf-state .ic-ok{display:block}
.uf-state .state-word{font:700 15px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:inherit;white-space:nowrap}
.uf-bar{height:7px;margin:0 12px 12px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.uf-bar i{display:block;height:100%;width:100%;background:#2EDB6C;border-radius:4px;transition:background .4s}
.uf.is-limit{border-color:rgba(242,183,5,.7)} .uf.is-limit .uf-state{color:#F2B705} .uf.is-limit .uf-bar i{background:#F2B705}
.uf.is-limit .ic{display:none} .uf.is-limit .ic-warn{display:block;animation:warn-pulse 1.4s ease-in-out infinite}
.uf.is-over{border-color:rgba(255,82,71,.8);animation:uf-flash .8s ease-out 1} .uf.is-over .uf-state{color:#FF5247} .uf.is-over .uf-bar i{background:#FF5247}
.uf.is-over .ic{display:none} .uf.is-over .ic-fail{display:block}
@keyframes uf-flash{0%{background:rgba(227,38,27,.55)}100%{background:rgba(12,14,18,.78)}}
/* the toast: one line, big, top centre */
.toast7{position:absolute;top:16px;left:50%;z-index:5;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:13px 20px 13px 16px;border-radius:5px;background:rgba(12,14,18,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);border-left:4px solid #2EDB6C;white-space:nowrap;transition:border-color .4s;box-shadow:0 16px 40px -20px rgba(0,0,0,.8)}
.toast7-dot{width:12px;height:12px;border-radius:50%;background:#2EDB6C;box-shadow:0 0 12px rgba(46,219,108,.7);flex:none;transition:background .4s,box-shadow .4s}
.toast7-t{font:700 clamp(18px,1.6vw,24px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.toast7.warn{border-left-color:#F2B705} .toast7.warn .toast7-dot{background:#F2B705;box-shadow:0 0 12px rgba(242,183,5,.8);animation:warn-pulse 1.2s ease-in-out infinite}
.toast7.fail{border-left-color:#FF5247} .toast7.fail .toast7-dot{background:#FF5247;box-shadow:0 0 12px rgba(255,82,71,.8)}
.toast7.pop{animation:toast-pop .5s var(--ease) 1}
@keyframes toast-pop{0%{transform:translateX(-50%) scale(.88);opacity:.4}60%{transform:translateX(-50%) scale(1.04);opacity:1}100%{transform:translateX(-50%) scale(1)}}
/* the bottom bar: the one temperature, big, and the rail with both limits on it */
.hud-bot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:34px;padding:16px 24px 18px;background:rgba(10,12,15,.74);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12)}
.t-read{flex:none;display:flex;flex-direction:column;gap:6px;min-width:150px}
.t-num{display:flex;align-items:baseline;gap:4px;color:#fff;transition:color .4s} .t-num b{font:600 56px/.9 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;min-width:2ch} .t-num em{font:600 20px/1 var(--display);font-style:normal;color:#C9CED4}
.t-label{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#B9C0C8;font-style:normal}
.stage7.warn .t-num{color:#F2B705} .stage7.fail .t-num{color:#FF5247}
.rail7{flex:1;padding-top:30px}
.rail7-bar{position:relative;height:14px;border-radius:7px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(to right,#1DB954 0 54%,#F2B705 62%,#FF6A1F 74%,#E3261B 84% 100%)}
.rail7-mark{position:absolute;top:-6px;bottom:-6px;left:calc(var(--t) / 250 * 100%);width:2px;background:#fff}
.rail7-mark b{position:absolute;bottom:calc(100% + 7px);left:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 8px;border-radius:999px;background:#0F1215;border:1px solid rgba(255,255,255,.3);font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.rail7-mark.m2{background:#B9C6DA} .rail7-mark.m2 b{background:#10305C;border-color:#5B7BAA}
.rail7-mark b .sw-rub{width:9px;height:9px;border-color:rgba(255,255,255,.7)}
.rail7-needle{position:absolute;top:-12px;left:0;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:11px solid #fff;transform:translateX(-50%)}
.rail7-needle::after{content:"";position:absolute;left:-1px;top:0;width:2px;height:20px;background:#fff;transform:translateY(-1px)}
.rail7-scale{display:flex;justify-content:space-between;margin-top:9px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;color:#B9C0C8}
/* the spec strip: one row per material, the seal photo as the row head */
.spec-strip{margin-top:26px;border-top:2px solid #0F1215}
.sr{display:grid;grid-template-columns:1.25fr repeat(7,1fr);gap:0 14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(15,18,21,.16)}
.sr-head{padding:10px 0 8px;border-bottom:1px solid rgba(15,18,21,.3)}
.sr-head .sc i{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6B737B}
.sc i{display:none} .sc b{font:500 14.5px/1.35 var(--body);color:#4B545C} .sc.hi b{color:#0F1215;font-weight:600}
.sc-name{display:flex;align-items:center;gap:12px} .sc-name img{height:54px;width:auto;flex:none}
.sc-name b{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#0F1215;display:inline-flex;align-items:center;gap:8px}
.sc-name span{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:#6B737B;margin-left:-4px}
.sc-name .sw-rub{border-color:rgba(15,18,21,.35)}
@media (max-width:1100px){ .seals4-head{grid-template-columns:1fr;gap:16px;align-items:start} .band-seals4 .lede{max-width:52ch} .band-seals4 .stage7{aspect-ratio:16/9} .uf{width:200px} .uf-name b{font-size:18px} .t-num b{font-size:44px} .sr{grid-template-columns:1.4fr repeat(7,1fr);gap:0 10px} .sc b{font-size:13px} .sc-name img{height:44px} .sc-name b{font-size:20px} }
@media (max-width:760px){
  .band-seals4{padding:64px 0 72px} .band-seals4 h2{font-size:38px}
  .band-seals4 .stage7{aspect-ratio:1/1;border-radius:5px}
  .stage7 .cine-still,.stage7 .cine-film{object-fit:contain;object-position:50% 0%;background:#0F1113}
  .uf{width:calc(50% - 20px);top:12px} .uf-l{left:12px} .uf-r{right:12px} .uf-name{padding:7px 10px 6px} .uf-name b{font-size:16px} .uf-name span{display:none}
  .uf-state{padding:8px 10px 6px;gap:7px} .uf-state .ic{width:20px;height:20px} .uf-state .state-word{font-size:12px} .uf-bar{margin:0 10px 10px;height:6px}
  .toast7{top:auto;bottom:112px;padding:10px 14px 10px 12px;max-width:calc(100% - 24px)} .toast7-t{font-size:16px;white-space:normal;text-align:left}
  .hud-bot{gap:14px;padding:12px 14px 14px} .t-read{min-width:0;gap:4px} .t-num b{font-size:36px} .t-num em{font-size:14px} .t-label{font-size:9px;letter-spacing:.1em}
  .rail7{padding-top:26px} .rail7-bar{height:10px} .rail7-mark b{padding:4px 6px;font-size:9px;gap:4px} .rail7-scale{font-size:9px}
  .spec-strip{margin-top:20px;border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .sr-head{display:none} .sr{display:block;padding:14px;border:1px solid rgba(15,18,21,.14);border-radius:5px;background:rgba(255,255,255,.5)}
  .sc{display:block;padding:7px 0;border-top:1px solid rgba(15,18,21,.12)} .sc i{display:block;font:500 9.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6B737B;margin-bottom:3px} .sc b{font-size:13px}
  .sc-name{display:flex;border-top:0;padding:0 0 10px;gap:10px} .sc-name img{height:40px} .sc-name b{font-size:20px} .sc-name span{display:none}
}

/* v7b: phone = picture on top, HUD stacked under it inside the panel; nothing covers the seals */
.spec-strip .sr-head{display:grid}
@media (max-width:760px){
  .spec-strip .sr-head{display:none}
  .band-seals4 .stage7{aspect-ratio:7/10}
  .stage7 .cine-still,.stage7 .cine-film{height:52.5%;object-fit:cover;object-position:50% 0%}
  .uf{top:calc(52.5% + 10px);width:calc(50% - 16px)} .uf-l{left:10px} .uf-r{right:10px}
  .toast7{top:calc(52.5% + 98px);bottom:auto;left:10px;right:10px;transform:none;max-width:none;justify-content:center}
  .toast7.pop{animation:toast-pop-ph .5s var(--ease) 1}
  .hud-bot{padding:10px 12px 12px}
  .heat-veil{height:52.5%}
}
@keyframes toast-pop-ph{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}

/* v7c: a one-shot ring at the Acryl seal when it fails; HUD type a touch larger */
.hud-lines .ring{fill:none;stroke:#FF5247;stroke-width:2;opacity:0}
.stage7.fail .hud-lines .ring-l{animation:seal-ring 1.6s ease-out 1}
@keyframes seal-ring{0%{r:4;opacity:.95}100%{r:46;opacity:0}}
.uf{width:244px} .uf-state .state-word{font-size:16px} .uf-name b{font-size:21px}
.rail7-mark b{font-size:11px;padding:5px 9px}
@media (max-width:760px){ .uf{width:calc(50% - 16px)} .uf-state .state-word{font-size:12.5px} .uf-name b{font-size:16px} .rail7-mark b{font-size:9px;padding:4px 6px} }

/* ===== seals v8: table on the left (vertical), the larger 4:3 panel on the right with the HUD on the film ===== */
.band-seals5{background:#DCE0E4;color:#0F1215;padding:84px 0 88px;position:relative}
.band-seals5::before{content:"";position:absolute;inset:0;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.band-seals5 .wrap{position:relative}
.band-seals5 .eyebrow{color:#4B545C;margin-bottom:18px} .band-seals5 .eyebrow::before{background:#10305C}
.band-seals5 h2{color:#0F1215;font-size:clamp(36px,3.5vw,50px)} html[data-theme] .band-seals5 .accent{color:#10305C}
.band-seals5 .lede{color:#4B545C;font-size:16.5px;max-width:44ch;margin-top:14px}
.seals5{display:grid;grid-template-columns:4.2fr 7.8fr;gap:44px;align-items:start}
.band-seals5 .spec-light{margin-top:24px;font-size:14px}
.band-seals5 .spec-light td{padding:9px 10px 9px 0} .band-seals5 .spec-light td:first-child{width:35%;font-size:12px;color:#5A636B}
.band-seals5 .spec-light .col-seal{height:50px}
/* the panel */
.band-seals5 .stage8{position:relative;height:auto;min-height:0;max-height:none;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#0F1113;will-change:transform;isolation:isolate}
.band-seals5 .stage8::after{display:none}
.zoom8{position:absolute;inset:0;transform-origin:50% 35%;will-change:transform}
.zoom8 .cine-still,.zoom8 .cine-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:none}
.zoom8 .cine-film{transition:none}
.dark8{position:absolute;inset:0;z-index:2;background:#0F1113;opacity:0;pointer-events:none}
.stage8 .heat-veil{z-index:2}
.stage8.fail .hud-lines .ring-l{animation:seal-ring 1.6s ease-out 1}
/* unit frames: one row each, the hero's navy callout as the name block, state beside it, the seal bar along the bottom */
.uf8{position:absolute;top:14px;z-index:4;display:flex;align-items:stretch;border-radius:5px;overflow:hidden;background:rgba(12,14,18,.8);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);transition:border-color .5s,opacity .3s}
.uf8-l{left:14px} .uf8-r{right:14px}
.uf8-name{display:flex;align-items:center;gap:8px;padding:0 12px;background:#10305C;color:#fff;font:700 19px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.uf8-name .sw-rub{border-color:rgba(255,255,255,.6)}
.uf8-state{display:flex;align-items:center;gap:8px;padding:10px 14px 13px 12px;min-width:150px;color:#2EDB6C;transition:color .4s}
.uf8-state .ic{width:22px;height:22px;display:none;flex:none} .uf8-state .ic-ok{display:block}
.uf8-state .state-word{font:700 14px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.uf8-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.14)} .uf8-bar b{display:block;height:100%;width:100%;background:#2EDB6C;transition:background .4s}
.uf8.is-limit{border-color:rgba(242,183,5,.7)} .uf8.is-limit .uf8-state{color:#F2B705} .uf8.is-limit .uf8-bar b{background:#F2B705}
.uf8.is-limit .ic{display:none} .uf8.is-limit .ic-warn{display:block;animation:warn-pulse 1.4s ease-in-out infinite}
.uf8.is-over{border-color:rgba(255,82,71,.8);animation:uf-flash .8s ease-out 1} .uf8.is-over .uf8-state{color:#FF5247} .uf8.is-over .uf8-bar b{background:#FF5247}
.uf8.is-over .ic{display:none} .uf8.is-over .ic-fail{display:block}
/* the toast: top centre between the frames, two lines when it has to */
.toast8{position:absolute;top:14px;left:50%;z-index:5;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:11px 16px 11px 13px;border-radius:5px;background:rgba(12,14,18,.84);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);border-left:4px solid #2EDB6C;max-width:calc(100% - 556px);transition:border-color .4s,opacity .3s}
.toast8-dot{width:12px;height:12px;border-radius:50%;background:#2EDB6C;flex:none;transition:background .4s}
.toast8-t{font:700 clamp(18px,1.5vw,22px)/1.05 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:left}
.toast8.warn{border-left-color:#F2B705} .toast8.warn .toast8-dot{background:#F2B705;animation:warn-pulse 1.2s ease-in-out infinite}
.toast8.fail{border-left-color:#FF5247} .toast8.fail .toast8-dot{background:#FF5247}
.toast8.pop{animation:toast-pop .5s var(--ease) 1}
/* the bottom bar */
.hud8{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:26px;padding:12px 20px 14px;background:rgba(10,12,15,.76);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12)}
.hud8 .t-read{min-width:128px} .hud8 .t-num b{font-size:46px} .hud8 .t-num em{font-size:17px}
.stage8.warn .t-num{color:#F2B705} .stage8.fail .t-num{color:#FF5247}
@media (max-width:1360px){ .uf8-name{font-size:17px;padding:0 10px} .uf8-state{min-width:122px;padding:9px 11px 12px 10px} .uf8-state .ic{width:20px;height:20px} .uf8-state .state-word{font-size:13px} .toast8{max-width:calc(100% - 470px);padding:10px 13px 10px 11px} }
@media (max-width:1100px){ .seals5{grid-template-columns:1fr;gap:36px} .band-seals5 .stage8{order:-1} .band-seals5 .lede{max-width:56ch} .band-seals5 .spec-light{max-width:720px} .toast8{max-width:none} .band-seals5{padding:72px 0 80px} }
@media (max-width:760px){
  .band-seals5{padding:64px 0 72px} .band-seals5 h2{font-size:36px}
  .band-seals5 .stage8{aspect-ratio:7/10;border-radius:5px}
  .zoom8{height:52.5%;overflow:hidden} .dark8{height:52.5%} .stage8 .heat-veil{height:52.5%}
  .uf8{top:calc(52.5% + 10px);width:calc(50% - 15px);flex-direction:column} .uf8-l{left:10px} .uf8-r{right:10px}
  .uf8-name{padding:7px 10px;font-size:15px} .uf8-state{min-width:0;padding:8px 10px 11px;gap:7px} .uf8-state .ic{width:19px;height:19px} .uf8-state .state-word{font-size:11.5px;white-space:normal}
  .toast8{top:calc(52.5% + 94px);left:10px;right:10px;transform:none;max-width:none;justify-content:center;padding:10px 12px 10px 10px} .toast8-t{font-size:16px;text-align:center}
  .toast8.pop{animation:toast-pop-ph .5s var(--ease) 1}
  .hud8{gap:14px;padding:10px 12px 12px} .hud8 .t-read{min-width:0;gap:4px} .hud8 .t-num b{font-size:34px} .hud8 .t-num em{font-size:13px}
  .band-seals5 .spec-light{font-size:13px;max-width:none} .band-seals5 .spec-light td:first-child{width:33%} .band-seals5 .spec-light .col-seal{height:40px}
}

.toast8-t .tb{display:block;height:0;overflow:hidden}
@media (max-width:1100px){ .toast8-t .tb{display:inline;height:auto} }

@media (max-width:760px){ .hud8 .rail7{padding-top:48px} .hud8 .rail7-mark.m2 b{bottom:calc(100% + 29px)} .hud8 .rail7-mark.m2{top:-28px} }
/* v8d phone rail: the two limit badges on opposite sides of the rail, no scale numbers */
@media (max-width:760px){ .hud8 .rail7{padding-top:26px;padding-bottom:26px} .hud8 .rail7-scale{display:none} .hud8 .rail7-mark.m2{top:-6px} .hud8 .rail7-mark b{bottom:auto;top:calc(100% + 8px)} .hud8 .rail7-mark.m2 b{top:auto;bottom:calc(100% + 8px)} }

/* ===== page v3: the covers band (dark), the sets band, the stock band, the shared film cards and HUD chips ===== */
.covers-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:40px}
.covers-head .lede{max-width:40ch;margin:0 0 6px}
.band-covers{background:#0F1215;color:#F4F5F7;padding:96px 0 88px;position:relative;overflow:hidden}
.band-covers::before{content:"";position:absolute;inset:0;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.07;mix-blend-mode:screen;pointer-events:none}
.band-covers .wrap{position:relative}
.band-covers .eyebrow{color:#A9B0B8} .band-covers .eyebrow::before{background:#E3B341}
.band-covers h2{color:#fff;font-size:clamp(40px,4.4vw,62px)} html[data-theme] .band-covers .accent{color:#E3B341}
.band-covers .lede{color:#A9B0B8;font-size:17px}
/* the leak map */
.leak-wrap{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;margin-bottom:56px}
.leak-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.leak-list li{display:grid;grid-template-columns:34px 1fr 64px;gap:14px;align-items:center;padding:16px 0 16px 14px;border-bottom:1px solid rgba(255,255,255,.12);border-left:3px solid transparent;transition:border-color .5s,background .5s}
.leak-list li.is-on{border-left-color:#E3B341;background:rgba(227,179,65,.07)}
.leak-list li i{font:600 13px/1 var(--mono);letter-spacing:.08em;color:#E3B341;font-style:normal}
.leak-list li b{display:block;font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#C9CED4;transition:color .5s} .leak-list li.is-on b{color:#fff}
.leak-list li span{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:#A9B0B8}
.leak-list li img{width:64px;height:64px;object-fit:contain;opacity:.8;transition:transform .5s var(--ease),opacity .5s} .leak-list li.is-on img{opacity:1} .leak-list li.is-on img{transform:scale(1.12)}
.leakmap{position:relative;aspect-ratio:1258/981}
.leak-engine{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.85}
.spot{position:absolute;left:var(--x);top:var(--y);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#E3B341;opacity:.35;transition:opacity .4s}
.spot i{position:absolute;left:24px;top:-6px;font:600 12px/1 var(--mono);letter-spacing:.08em;color:#E3B341;font-style:normal;padding:6px 8px;background:rgba(15,18,21,.85);border:1px solid rgba(227,179,65,.5);border-radius:3px;opacity:0;transition:opacity .4s;white-space:nowrap}
.spot.is-on{opacity:1} .spot.is-on i{opacity:1}
.spot.is-on::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(227,179,65,.75);animation:spot-ring 1.6s ease-out infinite}
@keyframes spot-ring{0%{transform:scale(1);opacity:1}100%{transform:scale(3.4);opacity:0}}
/* film cards and the HUD chips (shared) */
.covers-films{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.film-card{position:relative;border-radius:6px;overflow:visible;background:#15181C;border:1px solid rgba(255,255,255,.12);will-change:transform}
.film-card .clip{border-radius:6px 6px 0 0}
.clip{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.clip .clip-poster,.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip video{opacity:0;transition:opacity .7s var(--ease)} .clip video.is-on{opacity:1}
.panel-hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.panel-hud .hud-lines{position:absolute;inset:0;width:100%;height:100%} .panel-hud .hud-lines path{fill:none;stroke:#fff;stroke-width:1.2;opacity:.6} .panel-hud .hud-lines circle{fill:#10305C;stroke:#fff;stroke-width:1.5}
.chip{position:absolute;display:block;padding:9px 12px 9px 11px;border-radius:4px;background:rgba(12,14,18,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);border-left:3px solid #E3B341;color:#fff;white-space:nowrap}
.chip b{display:block;font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase} .chip span{display:block;margin-top:4px;font:500 12px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#D6DBE0}
.film-body{padding:22px 24px 26px} .film-body i{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#E3B341;font-style:normal;margin-bottom:12px}
.film-body h3{font:600 clamp(22px,1.8vw,28px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em;color:#fff;margin:0} .film-body p{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:#A9B0B8}
.float-cut{position:absolute;z-index:1;right:-5%;top:-11%;width:40%;pointer-events:none}
.float-cut.float-seal{width:30%;right:-3%;top:-9%}
.offer-row{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.offer-row li{padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-left:3px solid #E3B341;border-radius:4px;background:rgba(255,255,255,.03)}
.offer-row b{display:block;font:700 18px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff} .offer-row span{display:block;margin-top:6px;font-size:13.5px;color:#A9B0B8}
/* the sets band */
.band-sets{background:#DCE0E4;color:#0F1215;padding:96px 0 88px;position:relative;overflow:hidden}
.band-sets::before{content:"";position:absolute;inset:0;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.band-sets .wrap{position:relative}
.band-sets .eyebrow{color:#4B545C} .band-sets .eyebrow::before{background:#10305C}
.band-sets h2{color:#0F1215;font-size:clamp(40px,4.4vw,62px)} html[data-theme] .band-sets .accent{color:#10305C}
.band-sets .lede{color:#4B545C;font-size:17px;max-width:44ch}
.sets-grid{display:grid;grid-template-columns:4.4fr 7.6fr;gap:48px;align-items:center}
.offer-list{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid #0F1215}
.offer-list li{padding:14px 0;border-bottom:1px solid rgba(15,18,21,.16)} .offer-list b{display:block;font:700 19px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#0F1215} .offer-list span{display:block;margin-top:5px;font-size:14px;color:#4B545C}
.band-sets .btn{margin-top:26px}
.kit{position:relative;aspect-ratio:1536/1024;width:100%}
.kit-part{position:absolute;display:block;height:auto;will-change:transform}
.kit-box{position:absolute;left:29%;top:26%;width:42%;height:52%;border:2px solid #10305C;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;transform-origin:50% 50%;pointer-events:none}
.kit-box span{font:700 14px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#10305C;background:#DCE0E4;padding:6px 10px}
.kit-legend{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4B545C}
.kit-legend li{display:flex;align-items:center;gap:8px} .kit-legend i{width:12px;height:2px;background:#10305C}
/* the stock band */
.band-stock{background:#DCE0E4;color:#0F1215;padding:96px 0 88px;position:relative}
.band-stock::before{content:"";position:absolute;inset:0;background:url(assets/texture_steel.jpg) center/900px repeat;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.band-stock .wrap{position:relative}
.band-stock .eyebrow{color:#4B545C} .band-stock .eyebrow::before{background:#10305C}
.band-stock h2{color:#0F1215;font-size:clamp(40px,4.2vw,60px)} html[data-theme] .band-stock .accent{color:#10305C}
.band-stock .lede{color:#4B545C;font-size:17px}
.stock-grid{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:auto auto;gap:28px}
.film-wide{grid-row:1 / span 2} .film-wide .clip{aspect-ratio:16/10;height:100%}
.band-stock .film-card{background:#0F1215;border-color:rgba(15,18,21,.2)}
.film-routes .clip{aspect-ratio:16/10}
.film-routes .routes{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.ocards{display:grid;grid-template-columns:1fr;gap:12px;align-self:stretch}
.ocard{padding:16px 18px;border-radius:4px;background:#F3F5F7;border:1px solid rgba(15,18,21,.12);border-left:3px solid #10305C}
.ocard i{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#10305C;font-style:normal;margin-bottom:8px} .ocard b{font:600 16px/1.3 var(--body);color:#0F1215}
.range-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
.range-strip .part{margin:0;background:#F3F5F7;border:1px solid rgba(15,18,21,.12);border-radius:4px;padding:12px}
.range-strip .part-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .range-strip .part-img img{max-width:88%;max-height:88%;object-fit:contain}
.range-strip figcaption{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin-top:8px} .range-strip figcaption i{font:500 12px/1 var(--mono);color:#5A636B;font-style:normal;grid-row:span 2;padding-top:4px} .range-strip figcaption b{font:600 15px/1.1 var(--display);text-transform:uppercase;color:#0F1215} .range-strip figcaption span{font-size:11.5px;color:#4B545C;line-height:1.3}
@media (max-width:1100px){
  .covers-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:32px} .covers-head .lede{max-width:56ch}
  .leak-wrap{grid-template-columns:1fr;gap:28px} .leakmap{order:-1}
  .covers-films{grid-template-columns:1fr;gap:40px} .float-cut{width:34%;top:-8%}
  .sets-grid{grid-template-columns:1fr;gap:36px} .kit-col{order:-1}
  .stock-grid{grid-template-columns:1fr} .film-wide{grid-row:auto} .ocards{grid-template-columns:repeat(3,1fr)}
  .range-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .band-covers,.band-sets,.band-stock{padding:64px 0 72px}
  .band-covers h2,.band-sets h2,.band-stock h2{font-size:38px}
  .leak-list li{grid-template-columns:28px 1fr 48px;gap:10px;padding:12px 0 12px 10px} .leak-list li b{font-size:17px} .leak-list li span{font-size:12.5px} .leak-list li img{width:48px;height:48px}
  .spot{width:14px;height:14px;margin:-7px 0 0 -7px} .spot i{display:none}
  .chip{padding:7px 9px 7px 8px} .chip b{font-size:11.5px} .chip span{font-size:10.5px}
  .film-body{padding:16px 16px 20px} .float-cut{width:36%;top:-6%;right:-4%}
  .offer-row{grid-template-columns:1fr;gap:10px;margin-top:24px} .offer-row b{font-size:16px}
  .kit-box span{font-size:11px;padding:5px 8px} .kit-legend{gap:6px 14px;font-size:11.5px}
  .ocards{grid-template-columns:1fr} .range-strip{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px} .range-strip figcaption b{font-size:13px} .range-strip figcaption span{font-size:10.5px}
}
/* v3 fix: the wide stock card fills its grid cell without widening the column */
.stock-grid > *{min-width:0}
.film-wide{display:flex;flex-direction:column} .film-wide .clip{flex:1;aspect-ratio:auto;min-height:380px;height:auto}
@media (max-width:1100px){ .film-wide{display:block} .film-wide .clip{aspect-ratio:16/10;min-height:0} }

/* v3 contact and footer */
.band-contact .status{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#F4F5F7;margin-bottom:18px}
.status-contact .status-text{white-space:nowrap} @media (max-width:520px){ .status-contact .status-time{display:none} }
.band-contact .lede{color:#A9B0B8;max-width:40ch;margin-top:16px}
.contact-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .band-contact .btn-ghost{border:2px solid rgba(255,255,255,.35);color:#fff} .band-contact .btn-ghost:hover{background:#fff;color:#0F1215}
.langs{display:flex;gap:18px;margin:22px 0 0;font:500 12px/1 var(--mono);letter-spacing:.08em;color:#A9B0B8} .langs span+span{padding-left:18px;border-left:1px solid rgba(255,255,255,.18)}
.site-footer .wordmark{color:rgba(244,245,247,.07)}
.foot-brand{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 22px;border-top:1px solid rgba(255,255,255,.12)}
.foot-logo{height:56px;width:auto} .foot-dist{display:inline-flex;align-items:center;gap:16px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#A9B0B8} .foot-dist img{height:22px;width:auto;opacity:.9}
@media (max-width:760px){ .foot-logo{height:44px} .foot-dist img{height:18px} .langs{gap:12px} .langs span+span{padding-left:12px} }
/* v3: anchors clear the sticky header; the brands band speaks the same language as the new sections */
section[id]{scroll-margin-top:72px}
#brands .eyebrow::before{background:#E3B341}
#brands .panel{border:1px solid rgba(255,255,255,.12);border-radius:6px;overflow:hidden}
#brands .panel-body h3{font:600 clamp(22px,1.8vw,28px)/1.05 var(--display);text-transform:uppercase}
#brands .facts li{border-left:3px solid #E3B341}

.contact-side{display:grid;gap:22px}
.contact-photo{margin:0;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/7;border:1px solid rgba(255,255,255,.12)}
.contact-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:rgba(10,12,15,.78);backdrop-filter:blur(6px);display:flex;align-items:baseline;gap:14px}
.contact-photo figcaption i{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#E3B341;font-style:normal} .contact-photo figcaption b{font:600 15px/1.3 var(--body);color:#fff}
@media (max-width:760px){ .contact-photo{aspect-ratio:16/9} .contact-photo figcaption{padding:10px 12px;flex-direction:column;gap:4px} }
#brands .facts li::before{display:none}

.kit-box span{display:inline-flex;align-items:center;gap:10px} .kit-box span img{height:22px;width:auto}

/* ===== review fixes (2026-10-16): the hero fallback, tablet layouts, reduced motion ===== */
.hero-3d{isolation:isolate}
.hero-fallback{position:absolute;right:2%;top:50%;width:52%;max-width:760px;transform:translateY(-46%) rotate(-14deg);opacity:0;animation:fb-in .5s 1.6s both;pointer-events:none}
.hero-3d.is-3d .hero-fallback{display:none}
@keyframes fb-in{to{opacity:.95}}
@media (max-width:1180px){ .hero-copy{max-width:min(640px,56%)} }
@media (max-width:1100px){
  .phone{display:none} .site-header .bar{height:88px;gap:28px} .lockup img{height:60px}
  .nav{gap:22px;margin-left:0;font-size:12.5px} .nav a{white-space:nowrap} .site-header .btn{margin-left:auto}
}
@media (max-width:900px){
  .hero{min-height:100svh} .hero-grid{padding-top:112px;align-items:flex-start;flex:0 0 auto;order:1} .hero-copy{max-width:100%}
  .hero-3d{position:relative;inset:auto;height:44vh;min-height:280px;margin-top:-24px;order:2} .hero-foot{order:3;padding-top:8px}
  .callout,.callout-lines{display:none}
  .hero-fallback{right:50%;top:50%;width:70%;transform:translate(50%,-50%) rotate(-14deg)}
}
@media (prefers-reduced-motion:reduce){
  .spot.is-on::after,.status.is-open .dot::after,.uf8 .ic-warn,.toast8 .toast8-dot,.hero-fallback{animation:none!important;opacity:1}
}
@media (max-width:900px){ .lockup img{height:48px} .site-header .bar{gap:18px} .nav{gap:16px;font-size:12px} }

/* ===== hero gaskets (2026-10-19): three constructions in one deck, a picker docked on the navy bar ===== */
.hero-foot{position:relative}
.gx-dock{position:absolute;left:0;right:0;bottom:100%;padding-bottom:22px;pointer-events:none;z-index:4}
.gx-dock .wrap{display:flex;justify-content:flex-end}
.hero:not(.has-3d) .gx-dock{display:none}
.gx{pointer-events:auto;display:grid;gap:10px;justify-items:start}
.gx-k{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#4B545C}
.gx-row{display:flex;gap:6px}
.gx button{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:11px;row-gap:5px;align-items:center;text-align:left;
  min-width:176px;padding:12px 16px 13px 12px;border:1px solid rgba(16,48,92,.22);border-radius:var(--radius);background:rgba(255,255,255,.62);color:#10305C;cursor:pointer;
  font:inherit;overflow:hidden;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.gx button:hover{border-color:#10305C;background:rgba(255,255,255,.9);transform:translateY(-1px)}
.gx button:focus-visible{outline:2px solid #E3B341;outline-offset:2px}
.gx button b{grid-column:2;font:600 15px/1 var(--body);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.gx button span{grid-column:2;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4B545C;white-space:nowrap;transition:color .35s}
.gx button[aria-pressed=true]{background:#10305C;border-color:#10305C;color:#fff;cursor:default;transform:none}
.gx button[aria-pressed=true] span{color:#B9C6DA}
/* swatch: a bore seen from above, the facing as fill and the ring as border */
.gx-sw{grid-row:1/3;width:26px;height:26px;border-radius:50%;box-sizing:border-box}
.gx [data-g=mls] .gx-sw{background:radial-gradient(circle at 50% 50%,transparent 5px,#c6ccd2 5.5px,#eef1f3 7px,#8e969e 9px,#d4d9de 10.5px,#a5adb4 13px);border:1px solid #7f878f}
.gx [data-g=graphite] .gx-sw{background:radial-gradient(circle at 50% 50%,transparent 5px,#e8ecef 5.5px,#9fa7af 7.5px,#3c3f43 8px,#2f3236 13px);border:1px solid #1d2023}
.gx [data-g=na] .gx-sw{background:radial-gradient(circle at 50% 50%,transparent 5px,#dde1e5 5.5px,#9aa1a8 7.5px,#22362c 8px,#22362c 9px,#938e82 9.5px,#857f73 13px);border:1px solid #5e594f}
.gx button[aria-pressed=true] .gx-sw{box-shadow:0 0 0 2px #10305C,0 0 0 3px rgba(255,255,255,.55)}
/* the slow cycle: a gold hairline fills along the active option */
.gx button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:#E3B341;transform-origin:0 50%;transform:scaleX(var(--gx-p,0));opacity:0;transition:opacity .3s}
.gx.is-auto button[aria-pressed=true]::after{opacity:1}
.hero.gx-hover{cursor:pointer}
@media (max-width:1180px){ .gx button{min-width:0;padding:11px 13px 12px 11px} .gx button b{font-size:14px} }
@media (max-width:900px){
  .gx-dock{position:relative;bottom:auto;padding:0 0 18px}
  .gx-dock .wrap{justify-content:stretch} .gx{width:100%} .gx-row{width:100%} .gx button{flex:1 1 0;min-width:0}
  .gx-k{display:none}
}
@media (max-width:600px){
  .gx-row{gap:4px} .gx button{grid-template-columns:1fr;justify-items:center;text-align:center;padding:10px 6px 11px;row-gap:6px}
  .gx-sw{grid-row:auto;width:22px;height:22px} .gx button b,.gx button span{grid-column:1} .gx button b{font-size:13px;white-space:normal;line-height:1.05}
  .gx button span{display:none}
}
@media (prefers-reduced-motion:reduce){ .gx button::after{display:none} }
.status-contact .status-text b{font-weight:inherit}