/* ============================================================
   Keyless Solutions
   Dark brand surfaces, light documentation surfaces.

   Palette research 5 August 2026. Every pair below was measured.

   The brand accent is #44DBBD. It scores 1.73:1 on white, so it is
   never body text and never carries white text on top of it. As a
   fill under near-black text it is 10.93:1; as an accent on the ink
   ramp it runs 7.81:1 to 10.56:1.

   Surfaces are a cool ink ramp at hue 195-204. The client's brand
   grey #2F2E2E sits at hue 0 with 1.1% saturation, so it is NOT a
   step in that ramp: mixed in, it reads visibly brown against its
   neighbours. It appears only as a discrete full-bleed band, where
   the hue shift reads as a deliberate change of material.

   Documentation (FAQs, troubleshooting, how-to, downloads) renders
   light. Dark polarity is read reliably slower (CHI 2023, n=459),
   and those are the pages Colin asked for to reduce phone calls.
   Print teal is #0E7A66, which passes on white paper.
   ============================================================ */

:root{
  --ink-950:#101416;
  --ink-900:#181D20;
  --ink-800:#212729;
  --ink-700:#232729;
  --ink-600:#2C3134;
  --ink-500:#343A3C;
  --hair:#333B3F;
  --edge:#49545A;
  --steel:#7A868C;
  --steel-2:#535F66;

  --brand-grey:#2F2E2E;

  --teal:#44DBBD;
  --teal-hover:#35C4A7;
  --teal-fill:#2FA894;
  --teal-print:#0E7A66;

  --txt:#F2F4F5;
  --txt-2:#C2CACD;
  --txt-3:#939DA1;

  --amber:#F0B429;
  --red:#FF6B5A;
  --green:#4ED9A4;

  --paper:#FFFFFF;
  --paper-2:#F4F6F6;
  --paper-line:#DDE2E2;
  --paper-ink:#191C1D;
  --paper-muted:#586063;

  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --wrap:min(1620px, 92vw);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-900);color:var(--txt);
  font-family:var(--body);font-size:18px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--teal-hover);text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type: their Avenir Light 35 / Heavy 85 pairing, in Figtree ---------- */
h1, h2, h3, h4{font-family:var(--display);margin:0 0 16px;letter-spacing:-.03em}
h1{font-size:clamp(48px,6.9vw,94px);line-height:.95;font-weight:700}
h1 b, h1 strong{font-weight:800;font-style:normal}
h2{font-size:clamp(34px,4.3vw,60px);line-height:1.01;font-weight:700}
h2 b, h2 strong{font-weight:800;font-style:normal}
h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
h4{font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
p{margin:0 0 16px}
.lede{font-size:21px;line-height:1.55;color:var(--txt-2);max-width:56ch;font-weight:400}

/* the fading teal hairline: the signature device */
.eyebrow{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin:0 0 14px;display:block}
hr.rule{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,var(--teal),rgba(68,219,189,0) 190px)}

/* ---------- buttons ---------- */
.btn{font-family:var(--body);font-size:15.5px;font-weight:600;padding:15px 26px;border-radius:9px;
  background:var(--teal);color:var(--ink-950);border:1px solid var(--teal);
  display:inline-block;cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.btn:hover{background:var(--teal-hover);border-color:var(--teal-hover);color:var(--ink-950);text-decoration:none}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--edge)}
.btn.ghost:hover{background:var(--ink-700);border-color:var(--txt-3);color:var(--txt)}
.btn.big{font-size:17px;padding:18px 34px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:80;background:rgba(20,24,26,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;gap:6px;padding:15px 0}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
  font-size:16px;letter-spacing:-.02em;color:var(--txt);margin-right:22px}
.brand:hover{text-decoration:none;color:var(--txt)}
.brand svg{width:28px;height:28px;flex:none}
.nav .links{display:flex;gap:2px;flex-wrap:wrap}
.nav a.n{font-size:15px;font-weight:500;color:var(--txt-2);padding:9px 13px;border-radius:7px}
.nav a.n:hover{color:var(--txt);background:var(--ink-700);text-decoration:none}
.nav a.n[aria-current=page]{color:var(--teal)}
.nav .sp{margin-left:auto}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--edge);
  color:var(--txt);border-radius:8px;padding:9px 12px;cursor:pointer;font-size:14px}

/* ---------- sections ---------- */




main > .wrap:first-of-type{padding-top:52px}

/* ---------- hero ---------- */
.hero .lede{max-width:47ch}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}

/* ---------- grid + cards ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4, .g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.g2, .g3, .g4{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg,#2B3134,#1F2427);border:1px solid var(--hair);border-radius:15px;padding:22px;
  display:block;color:inherit;transition:border-color .16s,transform .16s,background .16s}
a.card:hover{border-color:rgba(68,219,189,.55);background:linear-gradient(180deg,#2B3235,#212629);transform:translateY(-3px);text-decoration:none;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.card h3{color:var(--txt)}
.card .desc{font-size:16px;color:var(--txt-2);line-height:1.55;display:block}
.card .nm{display:block;font-family:var(--display);font-size:21px;font-weight:700;
  letter-spacing:-.025em;color:var(--txt);margin-bottom:2px}
.card .dim{display:block;font-size:14px;color:var(--txt-3);margin:3px 0 11px;font-family:var(--mono)}
.card .price{display:block;font-size:13.5px;font-weight:600;color:var(--teal);margin-top:14px}

/* the lit edge: product on an ink plinth with a teal base rim */




/* ---------- tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--hair);border-radius:13px;background:var(--ink-700)}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:640px}
th, td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--hair)}
thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700;background:var(--ink-800)}
tbody tr:last-child td{border-bottom:none}
td.mono, .mono{font-family:var(--mono);font-size:13px}
.yes{color:var(--teal);font-weight:600} .no{color:var(--txt-3)}

/* ---------- callouts ---------- */
.call{border:1px solid var(--hair);border-left:3px solid var(--edge);background:var(--ink-700);
  border-radius:0 12px 12px 0;padding:20px 22px;margin:22px 0}
.call .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);display:block;margin-bottom:9px}
.call p{margin-bottom:10px;color:var(--txt-2)}
.call p:last-child{margin-bottom:0}
.call.warn{border-left-color:#8A5B00} .call.warn .lbl{color:var(--amber)}
.call.bad{border-left-color:#B0231E} .call.bad .lbl{color:var(--red)}
.call.ok{border-left-color:#177F4E} .call.ok .lbl{color:var(--green)}

/* ---------- scale diagram ---------- */
.scale{background:linear-gradient(180deg,#2B3134,#1E2427);border:1px solid var(--hair);border-radius:15px;padding:26px}
.srow{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.sl{width:96px;font-size:15px;font-weight:600;color:var(--txt);flex:none}
.sbar{height:15px;border-radius:4px;background:linear-gradient(90deg,var(--steel),var(--steel-2));flex:none}
.sbar.win{background:linear-gradient(90deg,var(--teal-fill),var(--teal));box-shadow:0 0 18px rgba(68,219,189,.38)}
.sbar.card-ref{background:rgba(240,180,41,.14);box-shadow:inset 0 0 0 1.5px #8A5B00}
.sv{font-size:15px;font-weight:600;color:var(--txt-2);font-family:var(--mono)}
.srow:has(.win) .sv{color:var(--teal);font-weight:700}

/* ---------- install band ---------- */
.installband .pts{list-style:none;padding:0;margin:0;font-size:14.5px;color:var(--txt-2)}
.installband .pts li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.installband .pts li:last-child{border-bottom:none}
@media(max-width:900px){}

/* ---------- forms + fit tool ---------- */
.fl{display:block;margin-bottom:15px;font-size:13px;font-weight:700;color:var(--txt-2);letter-spacing:.02em}
.fl input, .fl textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--edge);
  border-radius:9px;padding:12px 13px;font-family:var(--body);font-size:15.5px;font-weight:400;
  background:var(--ink-800);color:var(--txt)}
.fl textarea{resize:vertical;min-height:110px}
.fl input:focus, .fl textarea:focus{outline:3px solid var(--teal);outline-offset:2px}
.fitcard{background:var(--ink-700);border:1px solid var(--hair);border-radius:16px;padding:30px}
.choices{display:grid;gap:11px}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice > span{display:block;border:1px solid var(--edge);border-radius:12px;padding:17px 19px;
  cursor:pointer;transition:border-color .15s,background .15s}
.choice:hover > span{border-color:var(--teal-fill)}
.choice input:checked + span{border-color:var(--teal);background:rgba(68,219,189,.09)}
.choice input:focus-visible + span{outline:3px solid var(--teal);outline-offset:2px}
.choice .t{display:block;font-weight:700;margin-bottom:3px;color:var(--txt)}
.choice .d{display:block;font-size:14px;color:var(--txt-2)}
.opts{display:flex;flex-wrap:wrap;gap:9px}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);padding:0;margin-bottom:11px}
.qhead{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0 0 7px}
.qsub{font-size:14.5px;color:var(--txt-2);margin-bottom:20px}
.steps{display:flex;gap:9px;margin-bottom:26px;flex-wrap:wrap}
.steps span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--txt-3);
  border:1px solid var(--hair);border-radius:999px;padding:7px 14px}
.steps span.on{border-color:var(--teal);color:var(--teal)}
.steps span.done{color:var(--txt-2)}
.cand{border:1px solid var(--teal);border-radius:15px;background:var(--ink-700);padding:22px;margin-bottom:13px}
.ruled{border:1px solid var(--hair);border-radius:13px;background:var(--ink-800);
  padding:17px 19px;margin-bottom:11px;color:var(--txt-2)}
.ruled strong{color:var(--txt)}

/* ---------- pdp ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding-bottom:30px}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:26px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- footer ---------- */
main{padding-bottom:30px}
footer.site{background:var(--ink-950);border-top:1px solid var(--hair);padding:60px 0 34px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
footer.site h4{color:var(--txt-3);margin-bottom:14px}
footer.site a{display:block;color:var(--txt-2);font-size:14.5px;padding:5px 0}
footer.site a:hover{color:var(--teal);text-decoration:none}
footer.site p{color:var(--txt-3);font-size:14.5px}
.fbot{margin-top:34px;padding-top:22px;border-top:1px solid var(--hair);font-family:var(--body);
  font-size:11.5px;color:var(--txt-3);display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* ============================================================
   DOCUMENTATION THEME
   ============================================================ */
body.docs{background:var(--paper);color:var(--paper-ink)}
body.docs a{color:var(--teal-print)}
body.docs a:hover{color:#0a5c4d}
body.docs .lede{color:var(--paper-muted)}
body.docs .eyebrow{color:var(--teal-print)}
body.docs .eyebrow::after{background:linear-gradient(90deg,var(--teal-print),rgba(14,122,102,0))}
body.docs h1, body.docs h2, body.docs h3{color:var(--paper-ink)}
body.docs 
body.docs .card{background:var(--paper);border-color:var(--paper-line)}
body.docs .card h3, body.docs .card .nm{color:var(--paper-ink)}
body.docs .card .desc{color:var(--paper-muted)}
body.docs .card .dim, body.docs .card .price{color:var(--teal-print)}
body.docs a.card:hover{background:var(--paper-2);border-color:var(--teal-print)}
body.docs .call{background:var(--paper-2);border-left-color:var(--teal-print)}
body.docs .call .lbl{color:var(--teal-print)}
body.docs .call p{color:var(--paper-muted)}
body.docs .call.warn{border-left-color:#8A5B00} body.docs .call.warn .lbl{color:#8A5B00}
body.docs .call.bad{border-left-color:#B0231E} body.docs .call.bad .lbl{color:#B0231E}
body.docs .call.ok{border-left-color:#177F4E} body.docs .call.ok .lbl{color:#177F4E}
body.docs .btn{background:var(--teal-print);color:#fff;border-color:var(--teal-print)}
body.docs .btn:hover{background:#0a5c4d;border-color:#0a5c4d;color:#fff}
body.docs .btn.ghost{background:transparent;color:var(--teal-print);border-color:var(--paper-line)}
body.docs .btn.ghost:hover{background:var(--paper-2);color:var(--teal-print)}
body.docs .tw{background:var(--paper);border-color:var(--paper-line)}
body.docs th, body.docs td{border-bottom-color:var(--paper-line)}
body.docs thead th{background:var(--paper-2);color:var(--paper-muted)}
body.docs .yes{color:#177F4E} body.docs .no{color:var(--paper-muted)}
body.docs header.site{background:rgba(255,255,255,.92);border-bottom-color:var(--paper-line)}
body.docs .brand{color:var(--paper-ink)}
body.docs .nav a.n{color:var(--paper-muted)}
body.docs .nav a.n:hover{background:var(--paper-2);color:var(--paper-ink)}
body.docs .nav a.n[aria-current=page]{color:var(--teal-print)}
body.docs .burger{color:var(--paper-ink);border-color:var(--paper-line)}
body.docs footer.site{background:var(--paper-2);border-top-color:var(--paper-line)}
body.docs footer.site a{color:var(--paper-muted)}
body.docs footer.site a:hover{color:var(--teal-print)}
body.docs footer.site h4, body.docs footer.site p, body.docs .fbot{color:var(--paper-muted)}
body.docs .fbot{border-top-color:var(--paper-line)}
body.docs :focus-visible{outline-color:var(--teal-print)}

.qa{border-bottom:1px solid var(--paper-line);padding:24px 0}
.qa:last-of-type{border-bottom:none}
.qa h3{font-size:19px;margin:0 0 10px}
.qa p{margin:0 0 11px;color:var(--paper-muted)}
.qa p:last-child{margin-bottom:0}
.qa ul{margin:11px 0 0;padding-left:21px;color:var(--paper-muted);line-height:1.78}
.qa ul li{margin-bottom:7px}
ol.steps-list{counter-reset:ks;list-style:none;padding:0;margin:15px 0 0}
ol.steps-list li{counter-increment:ks;position:relative;padding:0 0 15px 44px;
  color:var(--paper-muted);line-height:1.72}
ol.steps-list li::before{content:counter(ks);position:absolute;left:0;top:0;width:27px;height:27px;
  border-radius:50%;background:var(--teal-print);color:#fff;font-family:var(--display);
  font-size:13px;font-weight:700;display:grid;place-items:center}

@media(max-width:860px){
  .nav .links{display:none;width:100%;order:3;flex-direction:column;padding-top:10px}
  .nav .links.open{display:flex}
  .burger{display:block}
  .nav .sp{display:none}
}

@media print{
  body, body.docs{background:#fff;color:#000}
  header.site, footer.site{display:none}
  a{color:var(--teal-print)}
}

/* ============================================================
   MOTION + HERO v2 (the wow pass)
   Reveals, counters, parallax, drawn dimension lines.
   All gated behind prefers-reduced-motion.
   ============================================================ */

/* reveals: content is ALWAYS visible; animation is a bonus that plays when
   the observer fires. If JavaScript or the observer fails, the page is simply
   static, never blank. */
@keyframes rvIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes rvInL{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
@keyframes rvInR{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:none}}
@keyframes heroDrift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.06) translateY(-38px)}}

/* Scroll-DRIVEN motion, not time-driven.
   A JS observer plus a timed keyframe can be outrun by a fast scroll, which is
   why this page kept reading as empty black bands. animation-timeline: view()
   binds progress to the element's own position in the viewport, so the reveal
   is always exactly as far along as the scroll is: it cannot fall behind, and
   scrubbing back up replays it. Content is never gated on JS, so if the
   browser lacks support the page simply renders solid. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-rv]{animation:rvIn linear both;animation-timeline:view();
      animation-range:entry 0% entry 92%}
    [data-rv="l"]{animation-name:rvInL}
    [data-rv="r"]{animation-name:rvInR}
    .stagger > *{animation:rvIn linear both;animation-timeline:view();
      animation-range:entry 0% entry 86%}
    .stagger > :nth-child(2){animation-range:entry 4% entry 90%}
    .stagger > :nth-child(3){animation-range:entry 8% entry 94%}
    .stagger > :nth-child(4){animation-range:entry 12% entry 98%}
    .stagger > :nth-child(5){animation-range:entry 16% entry 100%}
    .stagger > :nth-child(6){animation-range:entry 20% entry 100%}
    .hero2 .hero-art img{animation:heroDrift linear both;
      animation-timeline:scroll();animation-range:0 90vh}
  }
}










/* hero v3: one full-bleed render, text over the dark left side. E-LOK grammar:
   the product huge and pristine, almost no words. */
.hero2{position:relative;overflow:hidden;background:var(--ink-950);min-height:min(88vh,820px);
  display:grid;grid-template-columns:1.02fr .98fr}
.hero2 .hero-copy{display:flex;flex-direction:column;justify-content:center;z-index:2;
  padding:96px 56px 96px max(26px,calc((100vw - 1240px)/2 + 26px))}
.hero2 .hero-art{position:relative;overflow:hidden}
.hero2 .hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:88% 50%;filter:brightness(1.18) contrast(1.05) saturate(1.02)}
.hero2 .hero-art::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,#12171A 0%,rgba(14,17,19,.55) 16%,rgba(14,17,19,0) 46%)}
.hero2 .kicker{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap}
.hero2 .kicker div{border-left:2px solid var(--teal);padding-left:13px}
.hero2 .kicker b{display:block;font-family:var(--display);font-size:26px;font-weight:800;
  letter-spacing:-.03em;color:var(--txt);line-height:1.1}
.hero2 .kicker span{font-size:14px;color:var(--txt-2);white-space:nowrap}
@media(max-width:900px){
  .hero2{grid-template-columns:1fr}
  .hero2 .hero-copy{padding:58px 26px 44px;order:2}
  .hero2 .hero-art{order:1;height:44vh;min-height:300px}
  .hero2 .hero-art::after{background:linear-gradient(0deg,#12171A 0%,rgba(14,17,19,0) 55%)}
}


.hero2 .hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(13,15,16,.92) 0%, rgba(13,15,16,.66) 34%, rgba(13,15,16,0) 62%)}

.hero2 h1{max-width:13ch;font-size:clamp(48px,6.2vw,92px);letter-spacing:-.04em}
.hero2 .lede{max-width:46ch;font-size:20px}


/* statement band: the giant number */
.bignum{font-family:var(--display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(110px,17vw,230px);line-height:.9;color:var(--txt);display:block}
.bignum .mm{font-size:.32em;font-weight:300;color:var(--teal);letter-spacing:-.02em}

/* scale bars: at rest they sit at full width; the observer replays the growth */
@keyframes barGrow{from{width:0}to{width:var(--w)}}
.scale .sbar{width:var(--w)}
.scale.in .sbar{animation:barGrow .6s cubic-bezier(.25,.7,.2,1) both}
.scale.in .srow:nth-child(2) .sbar{animation-delay:.08s}
.scale.in .srow:nth-child(3) .sbar{animation-delay:.16s}
.scale.in .srow:nth-child(4) .sbar{animation-delay:.24s}
.scale.in .srow:nth-child(5) .sbar{animation-delay:.32s}
.scale.in .srow:nth-child(6) .sbar{animation-delay:.4s}
.scale.in .srow:nth-child(7) .sbar{animation-delay:.48s}

/* dimension-draw panel */
.dimwrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.dimwrap{grid-template-columns:1fr}}
.dimstage{position:relative;border-radius:16px;padding:34px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg,var(--ink-600) 0%,var(--ink-950) 100%);
  border:1px solid var(--hair);min-height:430px}
.dimstage img{max-height:400px;width:auto;filter:drop-shadow(0 20px 32px rgba(0,0,0,.6))}
.dimstage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes dashDraw{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
@keyframes tickDraw{from{stroke-dashoffset:12}to{stroke-dashoffset:0}}
@keyframes lblIn{from{opacity:0}to{opacity:1}}
.dimstage .dline{stroke:#77828a;stroke-width:1.4;stroke-dasharray:340;stroke-dashoffset:0}
.dimstage .dtick{stroke:#77828a;stroke-width:1.4;stroke-dasharray:12;stroke-dashoffset:0}
.dimstage .dlabel{opacity:1}
.dimstage.in .dline{animation:dashDraw 1.1s ease .15s both}
.dimstage.in .dtick{animation:tickDraw .45s ease 1s both}
.dimstage.in .dlabel{animation:lblIn .5s ease 1.15s both}
@media(max-width:760px){.dimstage svg, .dimstage .dlabel{display:none}}

/* full-bleed brand band (E-LOK-style rhythm, not a floating card) */

section.installfull h2{color:var(--txt)}
section.installfull p{color:var(--txt-2)}
section.installfull .pts{list-style:none;padding:0;margin:0;font-size:15px;color:var(--txt-2);columns:2;gap:34px}
section.installfull .pts li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09);break-inside:avoid}
@media(max-width:720px){section.installfull .pts{columns:1}}

/* real installs strip */
@media(max-width:900px){}


/* the one loud moment: teal close band */

section.tealband h2{color:var(--txt)}
section.tealband .lede{color:var(--txt-2)}
section.tealband .btn.ghost{border-color:#8794A3;color:var(--txt)}

@media(prefers-reduced-motion:reduce){
  [data-rv].in, .stagger.in > *, .scale.in .sbar, .dimstage.in .dline, .dimstage.in .dtick, .dimstage.in .dlabel{animation:none !important}
}


/* the range on a single line: five in-stock models, no placeholder tiles */
.rangerow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:36px}
.rangerow .card{padding:15px}
.rangerow .nm{font-size:20px}
.rangerow .dim{font-size:13px;margin-bottom:0}
@media(max-width:1080px){
  .rangerow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .rangerow .card{scroll-snap-align:start}
}
/* cylinder tiles carry the same white product plane as the locks */
.cylgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
@media(max-width:900px){.cylgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cylgrid{grid-template-columns:1fr}}


/* ---------- the finish: depth, weight and light ----------
   A dark page reads cheap when everything is flat matte. What makes it read
   expensive is soft graded light behind the content, real depth on the planes
   the eye lands on, and one specular edge that moves under the cursor. */

/* every product tile gets a graded studio ground rather than flat paper white */


/* cards: a lit top edge, real depth, and a glass sheen that answers the cursor */
.card{position:relative;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 18px 44px rgba(0,0,0,.46),0 2px 6px rgba(0,0,0,.3);
  transition:border-color .28s cubic-bezier(.2,.7,.2,1),transform .28s cubic-bezier(.2,.7,.2,1),
             background .28s ease,box-shadow .28s ease}
a.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(68,219,189,.10),rgba(68,219,189,0) 42%);
  opacity:0;transition:opacity .32s ease}
a.card:hover::after{opacity:1}
a.card:hover{transform:translateY(-8px);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 32px 70px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.4)}

/* section light: a soft overhead wash so each band has a top and a bottom */



/* buttons with a little more presence and a smoother press */
.btn{transition:background .2s ease,border-color .2s ease,transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(47,168,148,.20)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(47,168,148,.30)}
.btn:active{transform:translateY(0)}
.btn.ghost{box-shadow:none}
.btn.ghost:hover{box-shadow:0 8px 22px rgba(0,0,0,.34)}

/* the scale card earns a lit rim, it is the centrepiece of that band */
.scale{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 44px rgba(0,0,0,.36)}

/* install photos lift on hover like a print being picked up */

/* nav that feels machined rather than webby */
.nav a.n{transition:color .2s ease,background .2s ease}
header.site{box-shadow:0 1px 0 rgba(255,255,255,.04)}

/* the footer needs air above it on the short pages too */
footer.site{margin-top:20px}


/* ---------- band transitions ----------
   Hard edges between three near-identical darks read as "grey, grey, brown,
   grey". Each band now carries a graded seam top and bottom so the eye reads
   one continuous lit space rather than stacked rectangles. */








/* the product tile: a lit studio ground, not a flat grey square */


@keyframes imgIn{from{opacity:0}to{opacity:1}}
.pdp .thumbs button{transition:border-color .2s ease,transform .2s ease}
.pdp .thumbs button:hover{transform:translateY(-2px)}

/* product and accessory photos must fit their tile, never stretch to it */

main .wrap[style*="max-width"] p, main .wrap[style*="max-width"] li{color:#2A333B}

.fbot{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:13.5px;letter-spacing:0}
.fbot a{color:var(--txt-2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
.fbot a:hover{color:var(--teal);border-bottom-color:var(--teal)}


/* ---------- the product IS the feature ----------
   It was a small image, inside a padded white tile, inside a grey card, on a
   dark page: four nested boxes shrinking the only thing anyone came to see.
   The tile is now a light plinth the product stands ON, not a frame it sits in. */




/* homepage range: five locks, each one big enough to actually read */
.rangerow{gap:18px}
.rangerow .card{padding:20px 16px 22px;background:linear-gradient(180deg,#2C3336,#1E2427)}
.rangerow .nm{font-size:22px}


.pdp .thumbs button{background:rgba(255,255,255,.04);border:1px solid var(--hair)}

/* the renders are dark on a dark card: give them a cool rim and a real pool */




/* ---------- seams, not steps ----------
   A hard boundary between two darks reads as a drawn line. Each band now fades
   into the next over 140px so the page reads as one lit space. */


section > .wrap{position:relative;z-index:1}


/* the brand grey read brown against the cool ink ramp: same value, cooled */



/* the published-dimensions drawing is the trade proof point: give it room */
/* ---------- product slot, declared ONCE ----------
   Every lock image is now on a shared 1500px canvas at true millimetre scale,
   so a 303mm KS300 really is twice the height of a 155mm KS150 on screen. The
   slot must therefore NOT normalise them: it gives a fixed box and lets the
   canvas do the sizing. That is the whole 43mm argument, made visible. */
.rangerow + p{margin-top:8px}
.rangerow .card{padding:14px 12px 18px}

/* products fill their tile: square canvas, square slot, no letterboxing */

section{background:transparent;position:relative;padding:clamp(58px,5.4vw,86px) 0}
section::before, section::after{content:none}

/* exactly one band breaks the run, and it is a material change, not a hue shift */
section.installfull{background:linear-gradient(180deg,#1B1917 0%,#141312 100%);
  box-shadow:inset 0 60px 60px -60px rgba(0,0,0,.85),
             inset 0 -60px 60px -60px rgba(0,0,0,.85)}
section.tealband{background:transparent}
section.tealband .wrap{border-top:1px solid var(--hair);padding-top:clamp(56px,6vw,88px)}
footer.site{background:linear-gradient(180deg,#0E1315,#0B0F11)}

/* accessory and cylinder tiles must not tower over their own text */
.cylgrid .card, .grid .card{display:flex;flex-direction:column}

footer.site{border-top:none;margin-top:0}
.fbot{border-top:1px solid rgba(255,255,255,.07)}
body{background:#0B0F11}


/* ---------- lifted surfaces ----------
   The page was sitting at near-black and reading gloomy. Everything moves up a
   full step, the cards catch light from above, and the hairlines are visible. */
:root{
  --ink-950:#151B1F; --ink-900:#1B2226; --ink-800:#242D32;
  --ink-700:#2E383E; --ink-600:#374349; --ink-500:#425057;
  --hair:#3B474D; --edge:#4E5C64;
  --txt:#F4F7F8; --txt-2:#C3CDD2; --txt-3:#93A0A7;
}
.card{background:linear-gradient(180deg,#313C42 0%,#263036 100%);
  border:1px solid #3F4B52;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 16px 34px rgba(0,0,0,.34)}
a.card:hover{background:linear-gradient(180deg,#3A464D 0%,#2B353B 100%);
  border-color:var(--teal)}
.scale, .tw, .call{background:linear-gradient(180deg,#2E383E,#263036);
  border:1px solid #3F4B52}
header.site{background:rgba(27,34,38,.86);border-bottom:1px solid #3B474D}
footer.site{background:linear-gradient(180deg,#1A2125,#141A1D);padding:44px 0 22px}
footer.site .fbot{margin-top:22px;padding-top:16px}
section.installfull{background:linear-gradient(180deg,#2C3238 0%,#242A2F 100%)}

/* ---------- scroll feel ----------
   Scroll-linked, so it tracks the wheel exactly and cannot lag. Cards rise and
   settle, the hero art drifts, and section headings lead their own content. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card{animation:cardRise linear both;animation-timeline:view();
      animation-range:entry 0% entry 38%}
    @keyframes cardRise{from{opacity:0;transform:translateY(30px) scale(.985)}
      to{opacity:1;transform:none}}
    section h2, section .eyebrow{animation:leadIn linear both;
      animation-timeline:view();animation-range:entry 0% entry 34%}
    @keyframes leadIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    
    @keyframes artFloat{from{transform:translateY(16px) scale(.985)}
      to{transform:translateY(-6px) scale(1)}}
    .scale .sbar{animation:barGrow linear both;animation-timeline:view();
      animation-range:entry 5% entry 45%}
  }
}

/* Everything below was trapped inside the @supports/@media above, so all of it
   (the footer compaction, the .fbot credit fix, the wrap gutters and three
   breakpoints) vanished for anyone with reduced motion on, and in any browser
   without scroll-driven animation. It is layout, not motion, so it belongs at
   top level. */
.pdp .gal .main{background:linear-gradient(168deg,#F8FAFB,#DBE2E7);
  border-radius:16px;padding:26px;display:grid;place-items:center;min-height:420px}
.pdp .gal .main img{max-width:100%;max-height:380px;width:auto;height:auto;
  filter:drop-shadow(0 18px 24px rgba(25,40,50,.3))}

/* the footer was carrying far too much vertical weight */
footer.site{padding:38px 0 18px}
footer.site .fgrid{gap:26px 40px}
footer.site h4{margin-bottom:8px;font-size:11.5px}
footer.site a{display:block;padding:3px 0;font-size:13.5px}
footer.site p{font-size:13.5px;margin-bottom:8px}
.fbot{margin-top:18px;padding-top:14px;font-size:12.5px}

/* use the screen. The old fixed 1240px column left a third of a wide display
   empty on both sides while the content sat scrunched in the middle. */
.wrap{max-width:var(--wrap);padding:0 clamp(20px,3vw,48px)}
.rangerow{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(min-width:1500px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .cylgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1100px){.rangerow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.rangerow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the build credit was stacking label over link */
.fbot{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 30px}
.fbot span{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}

/* ============ PRODUCT TILE ============
   Rebuilt once, deliberately simple. A fixed-height flex box, a light plane,
   and an image constrained by max-width/max-height only. No aspect-ratio, no
   grid sizing, no !important, nothing that can resolve circularly. */
.shot{
  display:flex;
  align-items:center;
  justify-content:center;
  height:250px;
  padding:18px;
  margin-bottom:16px;
  border-radius:14px;
  background:linear-gradient(168deg,#F8FAFB 0%,#EAEFF2 56%,#DBE2E7 100%);
  box-shadow:inset 0 -24px 30px -26px rgba(20,35,45,.40), 0 10px 26px rgba(0,0,0,.28);
  transition:background .3s ease;
}
.shot > img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  filter:drop-shadow(0 12px 16px rgba(25,40,50,.24));
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.card:hover .shot{background:linear-gradient(168deg,#FFFFFF 0%,#F0F4F7 56%,#E2E9ED 100%)}
.card:hover .shot > img{transform:scale(1.04)}
.rangerow .shot{height:280px}
.shot.noimg{background:linear-gradient(168deg,#EDF1F3,#DFE5EA)}
.shot.noimg span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#69787F}
.dimwrap .shot{height:480px;padding:26px}
.pdp .gal .main{
  display:flex;align-items:center;justify-content:center;
  min-height:430px;padding:26px;border-radius:16px;
  background:linear-gradient(168deg,#F8FAFB,#DBE2E7);
}
.pdp .gal .main img{max-width:100%;max-height:380px;width:auto;height:auto;
  filter:drop-shadow(0 16px 22px rgba(25,40,50,.28))}
.pdp .thumbs button{background:#EEF2F4;border:1px solid #CFD8DD;border-radius:9px;padding:6px}
.pdp .thumbs button img{max-width:100%;height:auto}


/* ================= LIGHT THEME =================
   Studied from noomoagency.com, which the client kept naming: a pale blue-grey
   ground (#C9D2E7 measured off their body), black text, and display type at a
   scale that carries the page instead of imagery having to. Dark was reading
   gloomy; this is the same brand with the lights on. */
:root{
  --paper-0:#EEF2F7;
  --paper-1:#E4EAF2;
  --paper-2:#D8E0EC;
  --paper-3:#C9D2E7;
  --ink-0:#0E1418;
  --ink-1:#2B343C;
  --ink-2:#55616B;
  --line-1:#C2CCDA;
  --teal-ink:#0B6E5C;
}
body{background:var(--paper-1);color:var(--ink-0)}
main{background:
  radial-gradient(120% 44% at 50% 0,rgba(11,110,92,.05),rgba(11,110,92,0) 58%),
  linear-gradient(180deg,#EEF2F7 0%,#E4EAF2 18%,#D8E0EC 46%,#E4EAF2 74%,#EEF2F7 100%)}
h1, h2, h3, h4{color:var(--ink-0)}
p, li{color:var(--ink-1)}
.lede{color:var(--ink-1)}
.eyebrow{color:var(--teal-ink)}
.dim, .card .dim{color:var(--ink-2)}
.desc, .card .desc{color:var(--ink-1)}

header.site{background:rgba(238,242,247,.90);border-bottom:1px solid var(--line-1)}
.brand{color:var(--ink-0)}
.nav a.n{color:var(--ink-1)}
.nav a.n:hover{color:var(--ink-0);background:var(--paper-2)}
.nav a.n[aria-current=page]{color:var(--teal-ink)}

.card{background:#FFFFFF;border:1px solid var(--line-1);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px rgba(28,42,60,.10)}
a.card:hover{background:#FFFFFF;border-color:var(--teal-ink);
  box-shadow:0 16px 38px rgba(28,42,60,.16)}
.card .nm{color:var(--ink-0)}

.shot{background:linear-gradient(168deg,#FBFCFD 0%,#EEF2F7 56%,#E1E8F1 100%);
  box-shadow:inset 0 -22px 28px -26px rgba(28,42,60,.28),0 6px 18px rgba(28,42,60,.10)}
.card:hover .shot{background:linear-gradient(168deg,#FFFFFF 0%,#F4F7FA 56%,#E7EDF5 100%)}

.scale, .tw, .call{background:#FFFFFF;border:1px solid var(--line-1)}
table th, table td{border-bottom:1px solid var(--line-1);color:var(--ink-1)}
thead th{background:var(--paper-2);color:var(--ink-2)}
.sbar{background:#94A3B4}
.sv, .sl{color:var(--ink-2)}
.call .lbl{color:var(--teal-ink)}
.call p{color:var(--ink-1)}
hr.rule{background:linear-gradient(90deg,var(--teal-ink),rgba(11,110,92,0) 190px)}

.btn{background:var(--teal-ink);color:#FFFFFF;border-color:var(--teal-ink);
  box-shadow:0 6px 16px rgba(11,110,92,.22)}
.btn:hover{background:#095A4B;border-color:#095A4B;color:#fff}
.btn.ghost{background:#FFFFFF;color:var(--ink-0);border-color:var(--line-1)}
.btn.ghost:hover{background:var(--paper-0);border-color:var(--ink-2);color:var(--ink-0)}
a{color:var(--teal-ink)}
a:hover{color:#095A4B}

section.installfull{background:linear-gradient(180deg,#DCE3EE,#D2DBE9)}
section.installfull h2, section.installfull p, section.installfull li{color:var(--ink-0)}
footer.site{background:linear-gradient(180deg,#DFE6EF,#D3DCE9);border-top:1px solid var(--line-1)}
footer.site h4{color:var(--ink-2)}
footer.site a, footer.site p{color:var(--ink-1)}
footer.site a:hover{color:var(--teal-ink)}
.fbot{border-top:1px solid var(--line-1);color:var(--ink-2)}
.fbot a{color:var(--ink-1);border-bottom-color:var(--line-1)}

/* Noomo's display scale: type carries the page */
h1{font-weight:700;letter-spacing:-.045em;font-size:clamp(52px,7.6vw,112px);line-height:.92}
h2{font-weight:700;letter-spacing:-.038em;font-size:clamp(36px,5vw,72px);line-height:.98}
.hero2 h1{max-width:14ch}
.pdp .gal .main{background:linear-gradient(168deg,#FBFCFD,#E1E8F1)}
.pdp .thumbs button{background:#FFFFFF;border:1px solid var(--line-1)}
.shot.noimg{background:linear-gradient(168deg,#F1F4F8,#E2E8F1)}
.shot.noimg span{color:var(--ink-2)}
body.docs{background:var(--paper-1)}

/* the hero keeps its dark photograph, so its type stays light. Everything
   below the hero is the light theme. */
.hero2{background:#12171A}
.hero2 h1, .hero2 h2{color:#F6F9FA}
.hero .lede, .hero2 .lede, .hero2 p{color:#C9D3D8}
.hero .eyebrow, .hero2 .eyebrow{color:var(--teal)}
.hero .btn.ghost, .hero2 .btn.ghost{background:rgba(255,255,255,.10);
  color:#F6F9FA;border-color:rgba(255,255,255,.34)}
.hero .btn.ghost:hover, .hero2 .btn.ghost:hover{background:rgba(255,255,255,.18);
  border-color:#F6F9FA;color:#F6F9FA}
.hero2 .proof span{color:#C9D3D8;border-color:rgba(255,255,255,.22);
  background:rgba(0,0,0,.35)}
.hero2 .proof span b{color:#F6F9FA}
.hero2 .hstat b{color:#F6F9FA}
.hero2 .hstat span{color:#B9C4CA}

/* body copy was washing out on the light ground: real contrast, real size */
body{color:#141A1F;font-size:17.5px;line-height:1.62}
p, li, .desc, .card .desc{color:#2A333B}
.lede{color:#1C242B;font-size:clamp(19px,1.5vw,23px);line-height:1.5;font-weight:400}
main .wrap p, main .wrap li{color:#2A333B}
.dim, .card .dim, .sv, .sl{color:#4C5860}
h3{font-size:21px;letter-spacing:-.018em}
h4{font-size:12px;letter-spacing:.09em}
.eyebrow{font-size:12.5px;letter-spacing:.13em;color:#0B6E5C}
table th, table td{color:#2A333B;font-size:15px}
thead th{color:#4C5860}
.call p{color:#2A333B}
.call .lbl{color:#0B6E5C}
/* one type family everywhere: Archivo for display, Inter for reading */
h1, h2, h3, h4, .nm, .btn, .eyebrow{font-family:var(--display)}
body, p, li, td, th, .desc, .lede{font-family:var(--body)}
.mono, td.mono, .dim{font-family:var(--mono)}

/* nothing in the light theme may inherit a dark-theme text colour */
main > section p, main > section li, main > section td, main > section th, main > .wrap p, main > .wrap li, main .pdp-band p, main .pdp-band li, main .card p, main .card .desc, main .call p{color:#2A333B}
main h1, main h2, main h3, main h4, main .nm{color:#141A1F}
main .eyebrow, main .call .lbl{color:#0B6E5C}
main .dim, main .sv, main .sl{color:#4C5860}


/* ================= TOKEN OVERRIDE =================
   The original dark theme is still in this file and 49 rules reference its
   colour tokens. Rather than chase each one, redefine the tokens themselves so
   every reference resolves to the light theme, then override the handful of
   rules that hard-code a dark hex. */
:root{
  --ink-950:#E9EEF5; --ink-900:#EEF2F7; --ink-800:#E4EAF2;
  --ink-700:#FFFFFF; --ink-600:#F7F9FC; --ink-500:#DCE3EC;
  --hair:#C6D0DC;    --edge:#AFBBCA;
  --txt:#141A1F;     --txt-2:#2A333B;  --txt-3:#4C5860;
  --brand-grey:#DCE3EC;
  --teal:#0B6E5C;    --teal-hover:#095A4B; --teal-fill:#0B6E5C;
}
body{background:#EEF2F7;color:#141A1F}

/* rules that hard-code a dark surface */
.card, .rangerow .card{background:#FFFFFF;border:1px solid #C6D0DC;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px rgba(28,42,60,.10)}
a.card:hover{background:#FFFFFF;border-color:#0B6E5C;transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(28,42,60,.16)}
.scale, .tw, .call{background:#FFFFFF;border:1px solid #C6D0DC}
section.installfull{background:linear-gradient(180deg,#DDE4EF,#D2DBE9)}
footer.site{background:linear-gradient(180deg,#DFE6EF,#D3DCE9);border-top:1px solid #C6D0DC}
.step, .panel{background:#FFFFFF;border:1px solid #C6D0DC;color:#141A1F}

/* every card heading and label reads as ink, not as the old light-on-dark */
.card h3, .card .nm, .card b, .card strong{color:#141A1F}
.card p, .card .desc, .card li{color:#2A333B}
.call .lbl, .eyebrow{color:#0B6E5C}
.call p, .call li{color:#2A333B}
h1, h2, h3, h4{color:#141A1F}
section.tealband h2, section.tealband p, section.tealband .lede{color:#141A1F}
section.installfull h2, section.installfull p, section.installfull li, section.installfull .pts li{color:#141A1F}

/* the header button was touching both edges of the bar */
.nav{padding:20px 0;gap:10px}
header.site .btn{padding:11px 20px;font-size:14px;line-height:1.1}
header.site{padding:2px 0}

/* one display face, one reading face, nothing else */
h1, h2, h3, h4, .nm, .btn, .eyebrow, thead th{font-family:'Archivo',system-ui,sans-serif}
body, p, li, td, .desc, .lede, .call p, input, select, textarea{font-family:'Inter',system-ui,sans-serif}
.mono, td.mono, .dim, .sv, .sl{font-family:'JetBrains Mono',ui-monospace,monospace}

/* the hero is the one dark moment, and it keeps its light type */
.hero2{background:#12171A}
.hero2 h1{color:#F6F9FA;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero .lede, .hero2 .lede, .hero2 p{color:#CBD5DA}
.hero .eyebrow, .hero2 .eyebrow{color:#5FE3C6}
.hero2 .hstat b{color:#F6F9FA}
.hero2 .hstat span{color:#AEBAC1}


/* ================= PRODUCT PAGE BANDS =================
   Modelled on e-lok.com's product page: full-bleed bands after the buy block,
   each owning its own surface, a huge product cutout carrying the feature band,
   an icon list rather than prose, and the rest of the range at the bottom.
   Fixed from theirs: ours reflows instead of clipping product off-canvas below
   1360px, and the hero keeps a real CTA rather than only an app badge. */
.pdp-band{width:100vw;margin-left:calc(50% - 50vw);padding:clamp(64px,7vw,110px) 0}
.pdp-features{background:linear-gradient(180deg,#FFFFFF,#F2F6FA)}
.pdp-app{background:linear-gradient(180deg,#E7EDF5,#DDE5EF)}
.pdp-stats{background:#12171A;padding:clamp(38px,4vw,62px) 0}
.pdp-range{background:linear-gradient(180deg,#F2F6FA,#E9EEF5)}

.pdp-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.pdp-fgrid-rev .pdp-appart{order:2}
@media(max-width:900px){.pdp-fgrid{grid-template-columns:1fr}}

.pdp-fart{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(168deg,#FBFCFD,#E4EBF3);border-radius:20px;
  padding:34px;min-height:460px;
  box-shadow:inset 0 -30px 40px -34px rgba(20,35,45,.34),0 16px 40px rgba(28,42,60,.12)}
.pdp-fart img{max-width:100%;max-height:420px;width:auto;height:auto;
  filter:drop-shadow(0 20px 26px rgba(25,40,50,.28))}

.featlist, .applist{list-style:none;padding:0;margin:26px 0 0}
.featlist li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  padding:16px 0;border-top:1px solid #C6D0DC}
.featlist li:last-child{border-bottom:1px solid #C6D0DC}
.featlist li b{grid-column:1/-1;font-family:'Archivo',sans-serif;font-size:18px;
  letter-spacing:-.015em;color:#141A1F}
.featlist li span{grid-column:1/-1;font-size:15.5px;color:#2A333B;line-height:1.55}
.applist li{padding:9px 0 9px 26px;position:relative;font-size:16px;color:#2A333B}
.applist li::before{content:'';position:absolute;left:0;top:16px;width:13px;height:2px;
  background:#0B6E5C;border-radius:2px}

.pdp-appart{display:flex;align-items:center;justify-content:center}
.phone{width:280px;height:560px;border-radius:34px;background:#12171A;
  border:9px solid #232C33;display:flex;align-items:center;justify-content:center;
  box-shadow:0 26px 60px rgba(20,35,45,.34)}
.phone span{color:#8E9BA4;font-size:13px;text-align:center;line-height:1.6;
  letter-spacing:.06em;text-transform:uppercase}

.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.statrow b{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;color:#F6F9FA;line-height:1}
.statrow span{display:block;margin-top:10px;font-size:14px;letter-spacing:.10em;
  text-transform:uppercase;color:#DCE4E9;font-weight:500}
@media(max-width:720px){.statrow{grid-template-columns:repeat(2,1fr);gap:30px 20px}}

.pdp-band h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-.035em;margin-bottom:10px}
.pdp-range .rangerow{margin-top:28px}

/* ---- feature icons: monoline, drawn inside the lock's own faceplate ---- */
.ksicon{width:44px;height:58px;flex:none;color:#0B6E5C;display:block}
.featlist li{display:flex;gap:20px;align-items:flex-start;
  padding:20px 0;border-top:1px solid #C6D0DC}
.featlist li:last-child{border-bottom:1px solid #C6D0DC}
.featlist li b{display:block;font-family:'Archivo',sans-serif;font-size:19px;
  letter-spacing:-.015em;color:#141A1F;margin-bottom:4px}
.featlist li span{display:block;font-size:15.5px;color:#2A333B;line-height:1.55}

.capstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  background:#FFFFFF;border-radius:20px;padding:26px 20px;margin-bottom:34px;
  box-shadow:0 16px 40px rgba(0,0,0,.28)}
.capstrip > div{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.capstrip .ksicon{width:38px;height:50px;color:#141A1F}
.capstrip span{font-size:12.5px;line-height:1.35;color:#2A333B;letter-spacing:.01em}
@media(max-width:900px){.capstrip{grid-template-columns:repeat(3,1fr);gap:22px 14px}}
@media(max-width:560px){.capstrip{grid-template-columns:repeat(2,1fr)}}

/* the stats band labels were fading out against the dark surface */
.pdp-stats .statrow span{color:#DCE4E9}
.pdp-stats .statrow b{color:#FFFFFF}
.pdp-stats{background:linear-gradient(180deg,#141A1E,#0E1315);
  padding:clamp(46px,5vw,74px) 0}


/* ================= PRODUCT LANDING, E-LOK PATTERN =================
   Their band 1 is 678px of gradient with the lock cutout at 96% of band height
   and almost no type over it. The product IS the hero. Everything else, spec
   included, is pushed into its own band below. */
.pdp-hero{width:100vw;margin-left:calc(50% - 50vw);
  background:linear-gradient(0deg,#E3EAF2 0%,#FBFCFD 34%,#FFFFFF 100%);
  padding:clamp(30px,3.4vw,54px) 0 clamp(46px,5vw,80px);
  border-bottom:1px solid #D5DEE8}
.pdp-hgrid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,68px);align-items:center}
@media(max-width:940px){.pdp-hgrid{grid-template-columns:1fr}}

.pdp-hart{display:flex;flex-direction:column;align-items:center;gap:20px}
.pdp-hart > img{max-height:clamp(360px,46vw,600px);max-width:100%;width:auto;height:auto;
  object-fit:contain;filter:drop-shadow(0 30px 40px rgba(25,40,50,.26));
  animation:pdpIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pdpIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.pdp-noimg{display:grid;place-items:center;height:400px;width:100%;
  border:1px dashed #AFBBCA;border-radius:16px;color:#6B7A82;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase}

.pdp-thumbs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pdp-thumbs button{width:66px;height:66px;border-radius:12px;cursor:pointer;
  background:#FFFFFF;border:1px solid #C6D0DC;padding:7px;display:grid;place-items:center;
  transition:border-color .2s ease,transform .2s ease}
.pdp-thumbs button:hover{transform:translateY(-2px);border-color:#0B6E5C}
.pdp-thumbs button[aria-pressed="true"]{border-color:#0B6E5C;box-shadow:0 0 0 2px rgba(11,110,92,.18)}
.pdp-thumbs img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

.pdp-hcopy h1{font-size:clamp(44px,5.2vw,76px);line-height:.96;letter-spacing:-.04em;
  margin:6px 0 14px}
.pdp-hcopy .lede{font-size:clamp(17px,1.4vw,21px);max-width:46ch;margin-bottom:26px}

.pdp-keyfacts{display:flex;gap:34px;padding:20px 0;margin-bottom:8px;
  border-top:1px solid #C6D0DC;border-bottom:1px solid #C6D0DC}
.pdp-keyfacts b{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-.03em;color:#141A1F;line-height:1}
.pdp-keyfacts span{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#4C5860}

.pdp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.pdp-cta .btn.big{padding:16px 30px;font-size:16px}

.pdp-spec{background:linear-gradient(180deg,#FFFFFF,#F4F7FA)}
.pdp-specgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);
  align-items:start}
@media(max-width:900px){.pdp-specgrid{grid-template-columns:1fr}}

/* option pills: the radio itself is hidden, the label is the control */
.pdp-hcopy fieldset{border:0;padding:0;margin:22px 0 0}
.pdp-hcopy legend{padding:0;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#4C5860;margin-bottom:10px;font-family:'Archivo',sans-serif;font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts label span{display:inline-block;padding:10px 16px;border-radius:10px;
  background:#FFFFFF;border:1px solid #C6D0DC;font-size:14.5px;color:#2A333B;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.opts label:hover span{border-color:#8FA0B2}
.opts input:checked + span{border-color:#0B6E5C;background:#0B6E5C;color:#FFFFFF;font-weight:600}
.opts input:focus-visible + span{outline:3px solid #0B6E5C;outline-offset:2px}

/* ---- real installs: a horizontal rail you can drag or scroll ---- */
.installband-full{width:100vw;margin-left:calc(50% - 50vw);
  background:linear-gradient(180deg,#FFFFFF,#EDF1F6);
  padding:clamp(60px,6vw,96px) 0;border-block:1px solid #D5DEE8}
.installrail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:30px max(26px,calc(50vw - 620px));margin:0;
  scrollbar-width:thin;scrollbar-color:#AFBBCA transparent}
.installrail::-webkit-scrollbar{height:8px}
.installrail::-webkit-scrollbar-thumb{background:#AFBBCA;border-radius:99px}
.installrail figure{flex:0 0 clamp(230px,22vw,300px);margin:0;scroll-snap-align:start}
.installrail img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;
  display:block;box-shadow:0 14px 34px rgba(28,42,60,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.installrail figure:hover img{transform:translateY(-5px);box-shadow:0 22px 46px rgba(28,42,60,.26)}
.installrail figcaption{margin-top:11px;font-size:13px;color:#4C5860;letter-spacing:.01em}

/* the hero is the one dark band, so everything inside it keeps light type.
   The kicker stats were being painted ink by the light-theme token flip. */
.hero .kicker b, .hero2 .kicker b, .hero-copy .kicker b{color:#F6F9FA}
.hero .kicker span, .hero2 .kicker span, .hero-copy .kicker span{color:#B9C6CD}
.hero .kicker > div, .hero-copy .kicker > div{border-left:2px solid var(--teal)}
.hero .eyebrow, .hero-copy .eyebrow{color:#5FE3C6}
.hero-copy h1{color:#F6F9FA}
.hero .lede, .hero-copy .lede{color:#CBD5DA}
.hero .btn.ghost, .hero-copy .btn.ghost{background:rgba(255,255,255,.06);
  color:#F6F9FA;border-color:rgba(255,255,255,.32)}
.hero .btn.ghost:hover, .hero-copy .btn.ghost:hover{background:rgba(255,255,255,.13);
  border-color:#F6F9FA;color:#F6F9FA}

/* the install photos speak for themselves */
.installrail figcaption{display:none}

/* the hero is .hero2 wrapping .hero-copy: scope the light type to that, and
   beat the global light-theme span rule that was greying the kicker labels */
.hero2 .kicker b{color:#F6F9FA}
.hero2 .kicker span, main .hero2 .kicker span{color:#AFBEC6}
.hero2 .kicker > div{border-left:2px solid var(--teal);padding-left:14px}
.hero2 .eyebrow, main .hero2 .eyebrow{color:#5FE3C6}
.hero2 h1, main .hero2 h1{color:#F6F9FA}
.hero2 .lede, main .hero2 .lede, main .hero2 p{color:#CBD5DA}

/* the giant 43mm was reading as pale grey on the light band */
.bignum{color:#141A1F}
.bignum .mm{color:var(--teal)}

/* the dark hero owns its own type, no exceptions */
.hero2 .kicker b{color:#F6F9FA}
.hero2 .kicker span{color:#AEBDC5}
.hero2 p, .hero2 .lede{color:#CBD5DA}
.hero2 h1{color:#F6F9FA}
.hero2 .eyebrow{color:#5FE3C6}


/* ---------- nothing leaves its frame ----------
   Wide artwork (the dimension drawings especially) was rendering at its natural
   width and spilling outside the product stage. Every image container clips,
   and every image is bounded on BOTH axes. */
/* .installrail figure is deliberately NOT in this list: it clipped its own
   hover lift, so the -5px translate vanished under the figure's edge. The img
   carries the border radius, so nothing needs clipping here. */
.pdp-hart, .pdp-fart, .shot, .pdp-thumbs button, .pdp .gal .main{overflow:hidden}
.pdp-hart{width:100%;max-width:100%;min-width:0}
/* width/height must be 100%, never auto. A lazy <img> that has not loaded has
   no intrinsic size, so `width:auto` collapsed it to 0x0, the lazy loader never
   saw it intersect the viewport, and it never loaded: every accessory photo was
   permanently invisible. Filling the stage and letting object-fit:contain do the
   fitting keeps the no-overflow, no-distortion behaviour without the deadlock. */
/* .installrail img is NOT here. These are product cutouts on a stage, which
   must be contained. The install rail holds photographic tiles that fill a 4:5
   crop with object-fit:cover, and sweeping them into this rule letterboxed
   every one of them. */
.pdp-hart > img, .pdp-fart img, .shot img, .pdp-thumbs img{
  max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.pdp-hgrid, .pdp-fgrid, .pdp-specgrid{min-width:0}
.pdp-hgrid > *, .pdp-fgrid > *{min-width:0}
.pdp-hart{aspect-ratio:1/1;display:grid;place-items:center;padding:18px;
  background:linear-gradient(168deg,#FBFCFD,#E7EDF3);border-radius:20px}
.pdp-hart > img{max-height:100%}
/* the wide dimension drawings get their own generous, contained stage */
.pdp-hart > img[src*="dimensions"], .shot img[src*="dimensions"]{
  background:#fff;border-radius:10px;padding:10px}


/* ---------- AUDIT FIXES ----------
   1. .pdp-hart was doing double duty: the clipped 1:1 image stage AND the column
      wrapper holding .pdp-thumbs. The thumb strip was a second grid row inside a
      fixed square with overflow:hidden, so it rendered at zero visible height on
      every product page at every width. The square now belongs to an inner
      stage; the wrapper is a plain column that does not clip.
   2. .rangerow got grid-auto-flow:column at max-width 1080px, then a later query
      re-declared grid-template-columns without resetting the flow. Explicit
      tracks collapsed to 0px and three of five cards became 22px slivers on
      every phone and tablet. */
.pdp-hart{aspect-ratio:auto!important;overflow:visible!important;
  display:flex!important;flex-direction:column;align-items:center;gap:18px;
  padding:0!important;background:none!important;min-width:0}
.pdp-stage{width:100%;aspect-ratio:1/1;display:grid;place-items:center;
  overflow:hidden;padding:18px;border-radius:20px;
  background:linear-gradient(168deg,#FBFCFD,#E7EDF3)}
.pdp-stage img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
/* width/height must not be auto here: a lazy image with no intrinsic size
   collapses to 0x0, never intersects the viewport, and so never loads. That
   deadlock made every accessory photo permanently invisible once. These are
   eager today, which is the only reason it does not bite. */
.pdp-thumbs{flex:none;width:100%;justify-content:center}

@media(max-width:1100px){.rangerow{grid-auto-flow:row}}
@media(max-width:1080px){.rangerow{grid-auto-flow:column;grid-template-columns:none}}
@media(max-width:720px){.rangerow{grid-auto-flow:column;grid-template-columns:none}}

/* ---- true-millimetre scale rows -------------------------------------------
   .sbar's width is a percentage, and it resolved against the whole .srow,
   which already held a 96px name and a value label. On a phone that pushed
   "75mm" past the right edge and scrolled the entire page sideways (390px
   viewport, 419px document). A grid gives the bar its own track to be a
   percentage of, so the bars stay proportional to each other AND stay inside
   the card. Fixed value column keeps every row's track identical, which is
   what makes the 43mm-vs-65mm comparison honest. */
.srow{display:grid;grid-template-columns:96px minmax(0,1fr) 54px;
  align-items:center;gap:13px;margin-bottom:11px}
.sl{width:auto;min-width:0}
.sbar{justify-self:start;max-width:100%}
.sv{text-align:right;min-width:0}
@media(max-width:560px){
  .srow{grid-template-columns:72px minmax(0,1fr) 46px;gap:9px}
  .sl, .sv{font-size:13.5px}
}

/* Rail controls. The rail was a 3676px scroller with nothing focusable, so a
   keyboard or screen-reader user could not reach past the first few photos. */
.railwrap{position:relative}
.railbtn{position:absolute;top:38%;z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(255,255,255,.94);color:var(--txt);
  cursor:pointer;font-size:19px;line-height:1;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(20,35,45,.18);transition:background .2s,transform .2s}
.railbtn:hover{background:#fff;transform:scale(1.06)}
.railbtn[disabled]{opacity:.32;cursor:default;transform:none}
/* positive insets: negative ones hung the buttons past the wrapper,
   which spans the full viewport, and scrolled the page sideways. */
.railbtn.prev{left:10px}
.railbtn.next{right:10px}
.installrail:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:16px}
@media(max-width:720px){.railbtn{display:none}}

/* The HTML `hidden` attribute is defeated by any author display rule, and
   .btn sets display:inline-block. Without this, every `el.hidden = true`
   in the site silently did nothing: the fit checker's Back button stayed
   on screen at step 1, and clicking it ran show(0), blanked both question
   panels and left Next throwing on a null lookup. */
[hidden]{display:none !important}

/* "to confirm" marker on spec figures the manufacturer publishes two ways.
   Without a rule it rendered as bare text inside a class="mono" cell, so
   "303 x 43 mm to confirm" read as part of the measurement. */
.unconf{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;
  font-family:'Inter',ui-sans-serif,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:#7A5200;
  background:rgba(240,180,41,.16);border:1px solid rgba(240,180,41,.55);
  vertical-align:middle;cursor:help;white-space:nowrap}

/* The KS200 dimension drawing is the only one we hold at low resolution
   (391 x 429 against 1853 x 1441 for the KS250). Upscaling a technical drawing
   into a 480px stage turns the figures to mush, so cap it at its native size
   and centre it. Replace the file and this rule stops applying itself. */
.dimwrap .shot img[src*="ks200-dimensions"], .shot img[src*="ks200-dimensions"]{
  max-width:391px;max-height:429px;width:auto;height:auto;image-rendering:auto}

/* Per-product document links. */
.pdp-docs .doclinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media(max-width:560px){.pdp-docs .doclinks .btn{width:100%}}

/* Focus ring for the scrollable table regions made focusable in ks.js. */
.tw:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:12px}

/* ---- light-theme corrections the token flip missed --------------------------
   .call.warn/.bad/.ok .lbl are (0,3,0) and beat the light-theme .call .lbl, so
   they kept their dark-theme colours on white cards: 1.86:1, 2.80:1 and 1.78:1
   against a 4.5:1 requirement. These are status labels on "what this range
   does not do" and "nothing in the range clears it", so they have to be read. */
.call.warn .lbl{color:#8A5B00}
.call.bad  .lbl{color:#B0231E}
.call.ok   .lbl{color:#177F4E}
.cand .lbl{color:#177F4E}
.pdp-noimg{color:#4C5860}

/* Control boundaries need 3:1 to be identifiable (WCAG 1.4.11). The pills ARE
   the radio here, since the real input is opacity:0. */
.fl input, .fl textarea, .fl select, .choice > span, .opts label span{border-color:#8794A3}

/* The focus ring sits on the dark hero band for the two hero CTAs, where teal
   scores 2.92:1. This colour is already used there and scores 11.43:1. */
.hero2 :focus-visible, .pdp-hero :focus-visible{outline-color:#5FE3C6}

/* Skip link: the header is 11 tab stops, repeated on every page. */
.skip{position:fixed;top:0;left:0;z-index:2000;width:1px;height:1px;
  padding:0;margin:0;border:0;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  background:var(--teal);color:#fff;font-weight:600;text-decoration:none}
.skip:focus, .skip:focus-visible{width:auto;height:auto;padding:12px 18px;
  overflow:visible;clip:auto;clip-path:none;border-radius:0 0 10px 0}
main:focus{outline:none}

/* Motion: the reveals and scale bars were already gated, but the page-load
   image animation, the rail's smooth scrolling and every hover transform were
   not. This catches whatever is added later too. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .installrail{scroll-behavior:auto!important}
}

/* Shown when a finish has no photograph of its own, so a Silver selection can
   never silently display the Black lock as though it were Silver. */
.finishnote{margin:10px 0 0;font-size:13px;line-height:1.5;color:#7A5200;
  background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.5);
  border-radius:9px;padding:9px 12px}

/* ---- real installations on the product page -------------------------------
   Photographs of the exact model on New Zealand doors. Captions carry the
   claim, so they must stay legible; the before shot is marked so it can never
   be mistaken for the product we sell. */
.pdp-installed .instgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;margin-top:26px}
.pdp-installed figure{margin:0;min-width:0}
.pdp-installed img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:14px;background:#E4EAF2;
  box-shadow:0 12px 30px rgba(28,42,60,.18);transition:transform .3s ease,box-shadow .3s ease}
.pdp-installed figure:hover img{transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(28,42,60,.26)}
.pdp-installed figcaption{margin-top:11px;font-size:13.5px;line-height:1.55;color:#4C5860}
.pdp-installed .beforeshot img{filter:saturate(.82)}
.pdp-installed .beforeshot figcaption::before{content:'BEFORE';display:inline-block;
  margin-right:8px;padding:2px 8px;border-radius:99px;font-family:'Inter',sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#7A5200;
  background:rgba(240,180,41,.16);border:1px solid rgba(240,180,41,.55);vertical-align:1px}
@media(max-width:900px){.pdp-installed .instgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:560px){.pdp-installed .instgrid{grid-template-columns:1fr}}