*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Palette sampled from the logo. All pairings verified WCAG AA (4.5:1+).
     navy #161b26 = wordmark  ·  #0a4c86 = the blue in "Pro" and the swoosh */
  --dark:#161b26;      /* headings, dark bands, utility bar */
  --ink:#232a35;       /* body copy — near-black with a blue cast */
  --muted:#5f6b7a;     /* secondary copy — blue-grey, 5.4:1 */
  --line:#dde3ea;      /* borders */
  --line-lt:#eef1f5;
  --accent:#0a4c86;    /* links, buttons, eyebrows — 8.8:1 on white */
  --accent-lt:#5aa0d8; /* accent for dark backgrounds — 6.1:1 on navy */
  /* Orange is the direct complement of the logo blue, so it reads as a
     deliberate second brand colour rather than a stray hue. Two values because
     no single orange clears AA on both navy and white:
       --orange    6.6:1 on --dark   (utility bar, footer, dark bands)
       --orange-dk 5.3:1 on white / 4.9:1 on --cream (light backgrounds) */
  --orange:#f2833c;
  --orange-dk:#b34d15;
  --cream:#f4f7fa;     /* tinted section background (cool, not warm) */
  --grey:#e9eef4;
  --ph:#e4e8ed; --ph-mark:#d0d6de; --ph-text:#95a0ad;
  --fd:'Libre Baskerville',Georgia,serif;
  --fb:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1240px;
}
html{scroll-behavior:smooth}
body{font-family:var(--fb);font-weight:300;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- placeholders ---------- */
.ph{position:relative;background:var(--ph);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ph::before,.ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--ph-mark) 50%,transparent calc(50% + 1px))}
.ph::after{background:linear-gradient(to top left,transparent calc(50% - 1px),var(--ph-mark) 50%,transparent calc(50% + 1px))}
.ph span{position:relative;z-index:2;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ph-text);background:rgba(226,226,226,.92);padding:.45rem .85rem;text-align:center;max-width:88%}

/* ---------- staging ---------- */
.staging{background:var(--accent);color:#fff;text-align:center;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:.45rem}

/* ---------- utility bar ---------- */
.util{background:var(--dark);color:rgba(255,255,255,.7);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.util .wrap{display:flex;justify-content:flex-end;gap:1.8rem;align-items:center;min-height:38px}
.util a{text-decoration:none;transition:.2s}
.util a:hover{color:var(--accent-lt)}
/* Main line. Boxed in orange so it is the one thing in the bar the eye lands
   on — this is the number we want people to call. */
.util .ph-num{display:inline-flex;align-items:center;gap:.5rem;color:var(--orange);
  font-weight:500;font-size:.82rem;letter-spacing:.06em}
.util .ph-num svg{width:12px;height:12px;fill:currentColor;flex:none}
.util .ph-num:hover{color:#fff}

/* ---------- header ---------- */
/* Single-row bar: logo hard left, nav optically centered (Solarlux-style) */
/* 80% solid (20% transparent) so the hero shows faintly through as you scroll; the blur keeps the
   menu text readable over photos */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(221,227,234,.6)}
.logorow{padding:13px 0}
.brand{display:inline-block;text-decoration:none;line-height:0}
.brand img{width:180px;height:auto;max-width:52vw}
@media(min-width:1000px){.brand img{width:200px}}

nav.main{display:none}
@media(min-width:1000px){
  /* overlay the nav on the logo row so the header is one slim line */
  .navrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    pointer-events:none;padding:0}
  nav.main{display:flex;align-items:center;gap:2.9rem;pointer-events:auto}
  /* static item => the mega anchors to .navrow, so it centers under the whole
     menu and drops from the bottom of the header rather than off one link */
  nav.main .item{position:static}
}
@media(max-width:999px){.navrow{display:none}}
nav.main > .item > a,nav.main > a{display:inline-block;text-decoration:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dark);padding:14px 0;border-bottom:2px solid transparent;transition:.2s}
nav.main > .item:hover > a,nav.main > a:hover,nav.main a.on{border-color:var(--accent);color:var(--accent)}
.item{position:relative}

/* mega menu */
/* full-bleed panel: 100vw centred on the viewport, contents held to --wrap */
.mega{position:absolute;left:50%;transform:translateX(-50%);top:100%;width:100vw;
  background:#fff;border-top:2px solid var(--accent);border-bottom:1px solid var(--line);
  padding:38px 0 30px;display:none;box-shadow:0 24px 48px rgba(0,0,0,.08);z-index:70}
/* The panel sits 12px below the link. Without a bridge across that gap the
   pointer leaves :hover on the way down and the menu shuts — which is why it
   only failed sometimes: a fast diagonal move can skip the dead zone. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.item:hover > .mega,
.item:focus-within > .mega,
.item.open > .mega{display:block}
.mega .cols,.mega .foot{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
.mega .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:38px}
.mega h5{font-family:var(--fb);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line-lt)}
.mega a.ml{display:block;text-decoration:none;font-size:.95rem;padding:.42rem 0;color:var(--ink);transition:.18s}
.mega a.ml:hover{color:var(--accent);padding-left:5px}
.mega a.ml small{display:block;font-size:.74rem;color:var(--muted)}
.mega .foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-lt)}
.mega .foot a{text-decoration:none;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.swatchrow{display:flex;gap:.5rem;margin-top:.5rem}
.sw{width:22px;height:22px;border:1px solid rgba(0,0,0,.18)}

/* header CTA button (right side, desktop only) */
.navcta{display:none;position:absolute;right:28px;top:50%;transform:translateY(-50%);
  background:var(--accent);color:#fff;text-decoration:none;border:1px solid var(--accent);
  font-size:.7rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  padding:.78rem 1.4rem;white-space:nowrap;transition:.25s}
.navcta:hover{background:transparent;color:var(--accent)}
@media(min-width:1000px){.navcta{display:inline-block}}

/* burger + mobile nav */
.burger{display:block;background:none;border:0;padding:.5rem;cursor:pointer;position:absolute;right:22px;top:50%;transform:translateY(-50%)}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:26px;height:1.5px;background:var(--dark);margin:6px 0;transition:.25s}
nav.mob{display:none;border-top:1px solid var(--line);max-height:72vh;overflow:auto}
nav.mob.open{display:block}
@media(min-width:1000px){nav.mob,nav.mob.open{display:none}}
nav.mob a{display:block;padding:.9rem 28px;text-decoration:none;font-size:.95rem;border-bottom:1px solid var(--line-lt)}
nav.mob a.sub{padding-left:44px;font-size:.88rem;color:var(--muted)}
nav.mob .lbl{padding:1rem 28px .4rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);background:var(--cream)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-size:.76rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;padding:1rem 2rem;border:1px solid var(--accent);transition:.25s;cursor:pointer;font-family:var(--fb)}
.btn:hover{background:transparent;color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:#c9c9c9}
.btn.ghost:hover{border-color:var(--dark);color:var(--dark)}
.btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.light:hover{background:#fff;color:var(--dark);border-color:#fff}
.arrow{text-decoration:none;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem}
.arrow::after{content:"⟶";transition:.2s}
.arrow:hover::after{transform:translateX(5px)}

/* ---------- typography ---------- */
.eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.eyebrow a{text-decoration:none;border-bottom:1px solid var(--accent)}
h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.05rem,4.5vw,3.25rem);line-height:1.16;color:var(--dark)}
h1 em{font-style:italic;color:var(--accent)}
h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.55rem,3.1vw,2.25rem);line-height:1.25;color:var(--dark)}
h3{font-family:var(--fd);font-weight:700;font-size:1.1rem;line-height:1.35;color:var(--dark)}
.lead{font-size:1.05rem;color:var(--muted)}
section{padding:78px 0}
.tinted{background:var(--cream)}
.greyed{background:var(--grey)}
.dark{background:var(--dark);color:rgba(255,255,255,.72)}
.dark h2,.dark h3{color:#fff}
/* on navy, the deep accent is unreadable (1.96:1) — use the light one (6.1:1) */
.dark .eyebrow,.band .eyebrow,footer .eyebrow{color:var(--accent-lt)}
.dark .arrow,.band .arrow{color:var(--accent-lt)}
.head{max-width:42rem;margin-bottom:3rem}
.head p{margin-top:1rem;color:var(--muted)}
.dark .head p{color:rgba(255,255,255,.6)}

/* ---------- full-bleed hero + feature rows ---------- */
/* 100vw escape hatch: works inside any centred wrapper */
.hero-full{position:relative;width:100vw;left:50%;transform:translateX(-50%);
  min-height:clamp(400px,62vh,620px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-full .ph{position:absolute;inset:0;background:#28313d;--ph-mark:#3a4553}
/* real photography */
.hero-full .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.feat .fimg{position:relative;overflow:hidden}
.feat .fimg img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
@media(min-width:940px){.feat .fimg img{min-height:520px}}
.gitem{display:block;overflow:hidden;background:var(--ph)}
.gitem img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.85,.2,1)}
.gitem:hover img{transform:scale(1.04)}

/* daylight rake: a shaft of light crosses the hero as you scroll (--p from JS) */
.hero-full::after{content:"";position:absolute;inset:-40% -70%;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,transparent 43%,rgba(255,255,255,.28) 49%,rgba(174,209,247,.14) 53%,transparent 61%);
  transform:translate3d(calc(var(--p,0) * 66% - 33%),0,0)}

/* sash reveal: images wipe open the way the product opens */
.sash img,.sash .ph{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.22,.85,.2,1)}
.sash.y img,.sash.y .ph{clip-path:inset(100% 0 0 0)}
.sash.sp img,.sash.sp .ph{clip-path:inset(0 50% 0 50%)}
.sash.in img,.sash.in .ph{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  .sash img,.sash .ph{clip-path:none!important;transition:none!important}
  .hero-full::after{display:none}
  .gitem img{transition:none}
}
.hero-full .ph span{background:rgba(40,49,61,.92);color:#8e9bab}
.hero-full .scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(11,15,22,.50) 0%,rgba(11,15,22,.42) 42%,rgba(11,15,22,.72) 100%)}
.hero-full .cap{position:relative;z-index:3;text-align:center;color:#fff;padding:96px 28px;max-width:60rem}
.hero-full .cap::before{content:"";position:absolute;inset:-6% -12%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at center,rgba(8,12,18,.55) 0%,rgba(8,12,18,.32) 55%,transparent 78%)}
.hero-full h1,.hero-full .eyebrow{text-shadow:0 1px 18px rgba(6,10,16,.55)}
.hero-full h1{color:#fff}
.hero-full h1 em{color:var(--accent-lt)}
.hero-full .eyebrow{color:#fff;opacity:.88}
.hero-full .cta{margin-top:2.2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

.intro{padding:70px 0 58px;text-align:center}
.intro .narrow{max-width:50rem;margin:0 auto}
.intro p{color:var(--muted);margin-top:1.1rem}

.feat{display:grid;grid-template-columns:1fr;align-items:stretch}
@media(min-width:940px){.feat{grid-template-columns:1.08fr 1fr}}
.feat .fimg .ph{height:100%;min-height:320px}
@media(min-width:940px){.feat .fimg .ph{min-height:520px}}
.feat .ftxt{display:flex;align-items:center;padding:44px 28px 52px}
@media(min-width:940px){.feat .ftxt{padding:56px clamp(30px,5vw,76px)}}
.feat .ftxt > div{max-width:34rem}
.feat .ftxt p{color:var(--muted);margin-top:1rem}
.feat .ftxt .arrow{margin-top:1.7rem}
@media(min-width:940px){.feat.rev .fimg{order:2}}

/* ---------- grids ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:940px){.g2{grid-template-columns:1fr 1fr;gap:58px;align-items:center}}

/* ---------- cards ---------- */
.pcard{text-decoration:none;display:block;transition:.25s}
.pcard .ph{aspect-ratio:4/3;transition:.25s}
.pcard:hover .ph{opacity:.86}
.pcard .lbl{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:1rem}
.pcard h3{margin:.35rem 0 .25rem}
.pcard p{font-size:.86rem;color:var(--muted)}
.pcard .more{margin-top:.7rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.card{background:#fff;border:1px solid var(--line);padding:2.1rem 1.8rem;transition:.3s}
.card:hover{border-color:var(--accent-lt);transform:translateY(-3px)}
.card .num{font-family:var(--fd);font-size:1.05rem;color:var(--accent)}
.card h3{margin:.6rem 0 .5rem}
.card p{font-size:.9rem;color:var(--muted)}

/* ---------- product hero ---------- */
.phero{padding:0;border-bottom:1px solid var(--line)}
.phero .inner{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:940px){.phero .inner{grid-template-columns:1fr 1.08fr;align-items:stretch}}
.phero .txt{padding:64px 28px 56px;max-width:640px;margin-left:auto;width:100%}
@media(min-width:940px){.phero .txt{padding:80px 60px 72px 28px}}
.phero h1{font-size:clamp(1.75rem,3.4vw,2.5rem);text-transform:uppercase;letter-spacing:.005em;line-height:1.2}
.phero .series-lbl{font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.phero .lead{margin-top:1.5rem}
.phero .img{min-height:340px}
.phero .img .ph{height:100%;min-height:340px}
.specs{margin-top:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2rem;border-top:1px solid var(--line);padding-top:1.8rem}
.specs dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.specs dd{font-size:.94rem;color:var(--ink)}
.pherolinks{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}

/* ---------- feature list ---------- */
.feat{list-style:none;display:grid;gap:.9rem}
.feat li{position:relative;padding-left:1.6rem;font-size:.98rem}
.feat li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--accent)}
.dark .feat li{color:rgba(255,255,255,.78)}

/* ---------- swatches ---------- */
.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:420px}
@media(min-width:560px){.swatches{grid-template-columns:repeat(3,1fr)}}
.swatch .chip{aspect-ratio:1;border:1px solid rgba(0,0,0,.14)}
.swatch b{display:block;font-weight:400;font-size:.9rem;margin-top:.6rem}
.swatch small{color:var(--muted);font-size:.76rem}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.tbl th{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400}
.tbl td.y{color:var(--accent)}
.tblwrap{overflow-x:auto}

/* ---------- cta band ---------- */
.band{background:var(--dark);color:#fff;padding:74px 0}
.band .wrap{display:grid;gap:24px;align-items:center}
@media(min-width:860px){.band .wrap{grid-template-columns:1.5fr auto}}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.6);margin-top:.8rem}

/* ---------- contact ---------- */
.info{list-style:none}
.info li{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.info li b{font-weight:400;color:var(--muted);min-width:5.5rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding-top:.2rem}
.info a{text-decoration:none}
form{display:grid;gap:1rem}
.row{display:grid;gap:1rem}
@media(min-width:560px){.row{grid-template-columns:1fr 1fr}}
input,textarea,select{font-family:var(--fb);font-size:.95rem;font-weight:300;color:var(--ink);background:#fff;border:1px solid var(--line);padding:.95rem 1rem;width:100%;transition:.2s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent)}
textarea{resize:vertical;min-height:130px}
label.f{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.note{font-size:.78rem;color:var(--muted)}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:18px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* ---------- page hero ---------- */
.pagehero{padding:70px 0 46px;border-bottom:1px solid var(--line)}
.pagehero p{margin-top:1.2rem;max-width:44rem;color:var(--muted)}

/* ---------- footer ---------- */
footer{background:var(--dark);color:rgba(255,255,255,.55);font-size:.88rem;padding:60px 0 0}
.fgrid{display:grid;gap:34px;padding-bottom:44px}
@media(min-width:800px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
footer b.fl{font-family:var(--fd);font-size:1.3rem;font-weight:700;color:#fff;display:block;margin-bottom:.6rem}
/* Each column heading gets a coloured rule above it so the four sections read
   as distinct blocks instead of one grey wall of links. The colours alternate
   across the brand pair — blue, orange, blue, orange. */
footer h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fc,var(--accent-lt));margin-bottom:1rem;font-weight:500;padding-top:.9rem;position:relative}
footer h4::before{content:"";position:absolute;top:0;left:0;width:30px;height:2px;background:currentColor}
/* alternating brand colours, set per heading in build.js — both clear AA on the
   navy footer (orange 6.6:1, light blue 6.1:1) */
footer h4.c-o{--fc:var(--orange)}
footer h4.c-b{--fc:var(--accent-lt)}
footer h4 + a{margin-top:-.1rem}
footer a{text-decoration:none;display:block;padding:.3rem 0;transition:.2s;
  border-left:2px solid transparent;padding-left:0}
footer a:hover{color:#fff;border-left-color:var(--orange);padding-left:.6rem}
/* the phone in the Company column — same orange as the utility bar */
footer a.fnum{color:var(--orange);font-weight:500;margin-top:.5rem}
footer a.fnum:hover{color:var(--orange)}
footer .faddr{margin:.5rem 0 0;line-height:1.6;font-style:normal}
.legal{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:.74rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between}

/* ================= Showcase: video hero + scroll-scrubbed render sequence ==== */
.vhero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:#0e1218}
.vhero video,.vhero .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.vhero .scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(8,12,18,.55) 0%,rgba(8,12,18,.35) 45%,rgba(8,12,18,.78) 100%)}
.vhero .cap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 28px}
.vhero h1{color:#fff;max-width:18ch;text-shadow:0 1px 20px rgba(6,10,16,.5)}
.vhero h1 em{color:var(--accent-lt)}
.vhero .eyebrow{color:#fff;opacity:.9}
.vhero .cta{margin-top:2rem;display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.vhero .cue{position:absolute;bottom:26px;left:0;right:0;z-index:3;text-align:center;color:#fff;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.vhero .cue::after{content:"";display:block;width:1px;height:26px;margin:10px auto 0;
  background:linear-gradient(#fff,transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:.9;transform:scaleY(1)}}

/* pinned canvas the scroll scrubs through */
.seq{position:relative;height:440vh;background:#0e1218}
.seq .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#0e1218}
.seq canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.seq .vign{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(8,12,18,.55) 100%)}
.seq .steps{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
  padding:0 clamp(28px,6vw,92px) clamp(56px,9vh,110px)}
.seq .step{position:absolute;max-width:34rem;color:#fff;opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.85,.2,1);pointer-events:none}
.seq .step.on{opacity:1;transform:none}
.seq .step h2{color:#fff;text-shadow:0 1px 18px rgba(6,10,16,.5)}
.seq .step p{color:rgba(255,255,255,.82);margin-top:.8rem}
.seq .step .eyebrow{color:var(--accent-lt)}
.seq .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent-lt);z-index:4;width:0}
.seq .load{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.7);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}

/* pinned horizontal run of close-ups */
.hstrip{position:relative;height:300vh;background:var(--dark)}
.hstrip .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hstrip .track{display:flex;gap:clamp(16px,2.4vw,32px);padding-left:clamp(28px,6vw,92px);will-change:transform}
.hstrip .shot{flex:0 0 auto;width:clamp(260px,32vw,460px)}
.hstrip .shot img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.hstrip .shot b{display:block;font-family:var(--fd);font-weight:700;font-size:1rem;color:#fff;margin-top:.9rem}
.hstrip .shot span{display:block;font-size:.82rem;color:rgba(255,255,255,.6)}
.hstrip .intro{flex:0 0 auto;width:clamp(280px,30vw,420px);align-self:center;color:#fff}
.hstrip .intro h2{color:#fff}
.hstrip .intro p{color:rgba(255,255,255,.7);margin-top:.9rem}

@media (prefers-reduced-motion: reduce){
  .seq{height:auto}
  .seq .pin{position:relative;height:auto;min-height:60svh}
  .seq .step{position:static;opacity:1;transform:none;margin-bottom:1.5rem}
  .seq .steps{position:relative;display:block;padding:36px 28px}
  .hstrip{height:auto}
  .hstrip .pin{position:relative;height:auto;display:block;overflow:auto;padding:56px 0}
  .hstrip .track{flex-wrap:wrap;transform:none!important}
  .vhero .cue::after{animation:none}
}

/* ================= photo helper ============================================
   Drop-in replacement for .ph placeholders. object-fit means a source photo of
   any aspect fills the slot without us pre-cropping every file. */
.pimg{display:block;width:100%;height:100%;object-fit:cover;background:var(--ph)}
.pcard .pimg{aspect-ratio:4/3}
.pcard .pimg.wide{aspect-ratio:16/10}
.imgbox{overflow:hidden}
.pcard .imgbox .pimg{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .imgbox .pimg{transform:scale(1.045)}
.phero .img .pimg{height:100%;min-height:340px}

/* ================= grids page ==============================================
   Patterns are drawn as inline SVG rather than shipped as images: they stay
   sharp at any size, recolour with currentColor, and cost no requests. */
.gpat{border:1px solid var(--line);background:#fff;transition:.25s;display:flex;flex-direction:column}
.gpat:hover{border-color:var(--accent);box-shadow:0 10px 34px rgba(10,76,134,.09)}
.gpat .art{background:var(--cream);padding:26px 0 22px;display:flex;justify-content:center;
  border-bottom:1px solid var(--line)}
.gpat svg{width:96px;height:125px;color:var(--dark);overflow:hidden}
.gpat svg path{fill:none;stroke:currentColor;stroke-width:2.5;vector-effect:non-scaling-stroke}
.gpat svg path.f{stroke-width:4}
.gpat:hover svg{color:var(--accent)}
.gpat .txt{padding:22px 24px 26px}
.gpat .lbl{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-dk)}
.gpat h3{font-size:1.35rem;margin:.3rem 0 .6rem}
.gpat p{font-size:.88rem;color:var(--muted)}

.gcon{border-top:2px solid var(--accent);padding-top:1.6rem}
.gcon:nth-child(2){border-top-color:var(--orange-dk)}
.gcon .tag{display:inline-block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border:1px solid currentColor;padding:.28rem .6rem;margin-bottom:.9rem}
.gcon:nth-child(2) .tag{color:var(--orange-dk)}
.gspec{list-style:none;border-top:1px solid var(--line)}
.gspec li{display:grid;gap:.3rem;padding:1rem 0;border-bottom:1px solid var(--line)}
@media(min-width:640px){.gspec li{grid-template-columns:8rem 1fr;gap:1.4rem}}
.gspec b{font-weight:400;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.gspec span{font-size:.93rem}

/* ================= contact: map ============================================ */
.mapbox{position:relative;border:1px solid var(--line);background:var(--grey);overflow:hidden}
.mapbox iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.35) contrast(1.04)}
.mapbox .pin{position:absolute;left:0;right:0;bottom:0;background:rgba(22,27,38,.94);color:#fff;
  padding:.9rem 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;font-size:.86rem}
.mapbox .pin b{font-weight:500}
.mapbox .pin a{color:var(--orange);text-decoration:none;white-space:nowrap}
.mapbox .pin a:hover{text-decoration:underline}

/* ================= contact: guided quote form ==============================
   One step on screen at a time. Nobody is ever looking at more than about four
   inputs, which is what keeps a long questionnaire from feeling long. Steps are
   toggled with [hidden] so the fields stay in the DOM and all post together. */
.qz{border:1px solid var(--line);background:#fff}
.qz-head{padding:20px 26px 0}
.qz-track{height:3px;background:var(--line-lt);overflow:hidden}
.qz-fill{height:100%;width:50%;background:var(--accent);transition:width .45s cubic-bezier(.4,0,.2,1)}
.qz-meta{display:flex;justify-content:space-between;align-items:baseline;padding:.85rem 0 0;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.qz-meta .now{color:var(--orange-dk);font-weight:500}
.qz-body{padding:8px 26px 26px}
.qz-step[hidden]{display:none}
.qz-step h3{font-size:1.5rem;margin:1.1rem 0 .3rem}
.qz-step > p.sub{font-size:.88rem;color:var(--muted);margin-bottom:1.5rem}
.qz fieldset{border:0;margin-bottom:1.6rem}
.qz legend{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}

/* big visual choices — the two that matter most get real estate */
.opts{display:grid;gap:12px}
@media(min-width:520px){.opts{grid-template-columns:1fr 1fr}}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts label{display:block;border:1px solid var(--line);padding:1.1rem 1.2rem;cursor:pointer;transition:.2s}
.opts label b{display:block;font-weight:500;font-size:1rem;margin-bottom:.2rem}
.opts label small{display:block;font-size:.8rem;color:var(--muted);line-height:1.5}
.opts label:hover{border-color:var(--accent-lt)}
.opts input:checked + label{border-color:var(--accent);background:var(--cream);
  box-shadow:inset 3px 0 0 var(--accent)}
.opts input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

/* compact chips for the many small single- and multi-selects */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{border:1px solid var(--line);padding:.55rem 1rem;font-size:.86rem;cursor:pointer;transition:.2s;white-space:nowrap}
.chips label:hover{border-color:var(--accent-lt)}
.chips input:checked + label{background:var(--accent);border-color:var(--accent);color:#fff}
.chips input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
/* multi-select chips read orange so they are visibly a different kind of answer */
.chips.multi input:checked + label{background:var(--orange-dk);border-color:var(--orange-dk)}

/* colour picker uses the actual vinyl colours */
.swpick{display:flex;flex-wrap:wrap;gap:10px}
.swpick input{position:absolute;opacity:0;width:0;height:0}
.swpick label{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);
  padding:.5rem .9rem .5rem .55rem;font-size:.86rem;cursor:pointer;transition:.2s}
.swpick i{width:26px;height:26px;display:block;border:1px solid rgba(0,0,0,.2);flex:none}
.swpick input:checked + label{border-color:var(--accent);background:var(--cream);box-shadow:inset 0 -2px 0 var(--accent)}
.swpick input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

.qz-nav{display:flex;gap:12px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);padding:20px 26px;flex-wrap:wrap}
.qz-back{background:none;border:0;font-family:var(--fb);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;padding:.6rem 0}
.qz-back:hover{color:var(--ink)}
.qz-back[hidden]{display:none}
.qz-nav .btn[hidden]{display:none}
.qz-skip{font-size:.78rem;color:var(--muted)}

/* review list on the final step — shows what they picked before they send */
.qz-sum{list-style:none;border-top:1px solid var(--line);margin-bottom:1.5rem}
.qz-sum li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-lt);font-size:.86rem}
.qz-sum li b{font-weight:400;color:var(--muted);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding-top:.2rem;flex:none}
.qz-sum li span{text-align:right}
.qz-sum li.none{color:var(--muted);justify-content:flex-start}

.qz-done{text-align:center;padding:3rem 1rem}
.qz-done .tick{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.3rem;font-size:1.6rem}
.qz-done h3{font-size:1.6rem;margin-bottom:.5rem}
.qz-done p{color:var(--muted);max-width:32rem;margin:0 auto}

@media(prefers-reduced-motion:reduce){
  .qz-fill{transition:none}
  .pcard:hover .imgbox .pimg{transform:none}
}

/* ================= before/after reveal =====================================
   Two identical renders of the same house, one with white frames and one with
   black. The black layer is clipped to the left of the handle, so dragging
   right "converts" the windows. A real <input type=range> sits invisibly on
   top: that buys keyboard control, touch, and screen-reader semantics without
   reimplementing any of it. */
.reveal{position:relative;overflow:hidden;background:var(--ph);
  --x:45%;                     /* handle position, driven by the range input */
  aspect-ratio:5632/3072;      /* the native ratio, so neither layer crops */
  user-select:none;touch-action:pan-y}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* black sits on top, revealed from the left edge across to the handle */
.reveal .rv-top{clip-path:inset(0 calc(100% - var(--x)) 0 0)}

/* the seam */
.reveal .rv-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;
  background:#fff;box-shadow:0 0 0 1px rgba(10,20,30,.28),0 0 22px rgba(0,0,0,.35);
  transform:translateX(-1px);pointer-events:none;z-index:3}
.reveal .rv-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:#fff;color:var(--dark);
  display:flex;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 4px 22px rgba(6,12,20,.32);transition:transform .2s,box-shadow .2s}
.reveal .rv-grip svg{width:9px;height:14px;fill:currentColor}

/* the control itself — invisible, but it is the thing you actually operate */
.reveal .rv-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  background:none;border:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none}
.reveal .rv-range::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100%;cursor:ew-resize}
.reveal .rv-range::-moz-range-thumb{width:64px;height:100%;border:0;border-radius:0;cursor:ew-resize}
.reveal .rv-range:focus-visible ~ .rv-line .rv-grip{outline:3px solid var(--accent);outline-offset:3px}
.reveal:hover .rv-grip{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 6px 28px rgba(6,12,20,.4)}

/* corner captions, so it is obvious which side is which series */
.reveal .rv-tag{position:absolute;bottom:18px;z-index:3;pointer-events:none;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.5rem .9rem;background:rgba(12,17,26,.72);color:#fff;
  backdrop-filter:blur(6px);transition:opacity .3s}
.reveal .rv-tag i{display:inline-block;width:9px;height:9px;margin-right:.5rem;
  border:1px solid rgba(255,255,255,.45);vertical-align:baseline}
.reveal .rv-l{left:18px}
.reveal .rv-r{right:18px}
/* fade a caption out when the handle runs over its corner */
.reveal.near-l .rv-l,.reveal.near-r .rv-r{opacity:0}

/* sits under the grip and tracks it, so the instruction is where the eye is */
.reveal .rv-hint{position:absolute;left:var(--x);top:calc(50% + 46px);transform:translateX(-50%);
  z-index:3;pointer-events:none;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.8);white-space:nowrap;transition:opacity .4s}
.reveal.touched .rv-hint{opacity:0}

@media(max-width:640px){
  .reveal{aspect-ratio:4/3}
  .reveal .rv-grip{width:46px;height:46px}
  .reveal .rv-tag{font-size:.56rem;padding:.4rem .6rem;bottom:12px}
  .reveal .rv-l{left:12px}.reveal .rv-r{right:12px}
}
@media(prefers-reduced-motion:reduce){
  .reveal .rv-grip,.reveal .rv-tag,.reveal .rv-hint{transition:none}
  .reveal:hover .rv-grip{transform:translate(-50%,-50%)}
}

/* ================= colors page: profile copy + 3D window viewer ============
   Three columns on wide screens: copy | model | finish panel. The viewer only
   lays its model and panel side by side when it is wider than 760px (its own
   container query), so this section gets a wider wrap than the rest of the
   site and gives the viewer two thirds of it.
     >= 1200px  copy beside the viewer, viewer side by side  -> 3 columns
     <  1200px  copy above, viewer full width (still side by side down to a
                760px-wide viewer, then the kit stacks it for phones)       */
.colorlab{border-top:1px solid var(--line)}
.colorlab .wrap{max-width:1560px}
.colorlab-grid{display:grid;gap:44px}
/* The kit sizes its panel text in cqw, meant to follow the viewer's width.
   .wv is its own container, so on itself cqw falls back to the browser
   window — on a wide monitor that gave a 44px title in a narrow column.
   Making the column a container points those units at the column instead,
   which is how the kit behaves when it fills a page. */
.colorlab-viewer{container-type:inline-size;min-width:0}
@media(min-width:1200px){
  .colorlab-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
  /* the copy runs longer than the viewer, so the viewer stays in view */
  .colorlab-viewer{position:sticky;top:104px}
}
.colorlab-copy h2{margin:.5rem 0 1.3rem}
.colorlab-copy p{color:var(--muted);margin-top:1rem}
.colorlab-copy h3{font-size:1.3rem;margin-top:2.2rem}
.colorlab-keys{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.colorlab-keys li{display:grid;gap:.2rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){.colorlab-keys li{grid-template-columns:9rem 1fr;gap:1rem}}
.colorlab-keys b{font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-dk);padding-top:.2rem}
.colorlab-keys span{font-size:.92rem}
.colorlab-viewer .wv{border:1px solid var(--line)}
/* Finish swatches two per row instead of the kit's three: bigger chips, and
   the extra row makes the viewer about as tall as the copy beside it.
   The kit writes its column count inline on .wv-swatches, so the README's
   "override --wv-cols on .wv" can't win — setting grid-template-columns here
   does, without editing the kit. Chips keep the kit's mitered-corner shape and
   its bar-to-size ratio (1.2/4.5). */
.colorlab .wv{--wv-panel:400px}
.colorlab .wv-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:1em .75em}
.colorlab .wv-swatch{font-size:.9em;gap:.6em;padding:.8em 0 .7em}
.colorlab .wv-chip{width:6.4em;height:6.4em;border-width:1.7em}

/* The site styles <header> (sticky top bar) and <section> (78px padding)
   globally. The viewer uses both tags inside itself, so undo them there only.
   The kit's own files and approved look are untouched. */
.wv header{position:static;z-index:auto;background:none;border-bottom:0}
.wv section{padding:0}

/* ================= home: second hero (kitchen zoom-out) ====================
   Not pinned. The photo scales from 1.35x down to 1x as the section travels
   up through the viewport, so the page never stops moving — a pinned stage
   reads as a stall before the effect "triggers". The animation is driven by
   the browser's scroll timeline where supported (runs off the main thread, no
   jank); other browsers get the JS fallback below, which eases toward the
   target scale each frame instead of jumping. */
.kzoom{position:relative;height:clamp(480px,88svh,1100px);padding:0;background:#1d232c;overflow:hidden}
.kz-pin{position:relative;height:100%;overflow:hidden}
.kz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:45% 50%;
  transform:scale(var(--kz,1.35));transform-origin:42% 36%;will-change:transform}
@media(orientation:portrait){.kz-img{transform-origin:50% 30%}}
/* The timeline is declared on the section, not the image: overflow:hidden
   makes the wrappers scroll containers, and a view() on the image would
   measure against them (where it never moves) instead of the page. */
@supports (animation-timeline: view()){
  .kzoom{view-timeline:--kz block}
  .kz-img{transform:none;animation:kzoom linear both;animation-timeline:--kz;animation-range:entry 0% exit 100%}
  @keyframes kzoom{from{transform:scale(1.35)}to{transform:scale(1)}}
}
.kcap{padding-top:64px}
@media(prefers-reduced-motion:reduce){
  .kz-img{transform:none;animation:none}
}

/* ================= product page layout (sliding window = the pattern) ======= */
.sep{border-top:1px solid var(--line)}
/* full-width hero — a placeholder until product photography exists */
.pbanner{padding:0}
.pbanner .ph{height:calc(clamp(320px,56vh,680px) + var(--hdr))}
/* the white studio render beside the description. On desktop it is absolutely
   placed so the text sets the row height and the render fits inside it. */
.phero .img.is-render{background:#fff;border-left:1px solid var(--line);position:relative}
.phero .img.is-render .rimg{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
@media(min-width:940px){
  .phero .img.is-render .rimg{position:absolute;inset:0;height:100%;aspect-ratio:auto;padding:3% 5%}
}
@media(max-width:939px){.phero .img.is-render{border-left:0;border-top:1px solid var(--line);min-height:0}}

/* benefits: three short blocks */
.pben{display:grid;gap:34px}
@media(min-width:800px){.pben{grid-template-columns:repeat(3,1fr);gap:44px}}
.pben > div{border-top:2px solid var(--accent);padding-top:1.3rem}
.pben .n{font-family:var(--fd);font-size:1.6rem;color:var(--orange-dk);line-height:1}
.pben h3{font-size:1.3rem;margin:.7rem 0 .5rem}
.pben p{color:var(--muted);font-size:.93rem}

/* configurations: front render + diagram list */
.pcfg{display:grid;gap:40px;align-items:center}
@media(min-width:940px){.pcfg{grid-template-columns:1fr 1fr;gap:64px}.pcfg.solo{grid-template-columns:1fr;max-width:46rem}}
.pcfg .front{background:#fff}
.pcfg .front img{width:100%;height:auto;display:block}
.cfgs{list-style:none;border-top:1px solid var(--line)}
/* Each row: the animated operation diagram (First Class Windows line art —
   thin #363636 lines, red #de271f arrows, drawn with SVG attributes, so no
   CSS here may restyle the shapes) beside its name and description. The
   first column fits the widest drawing (XOX) at the 78px drawing height. */
.cfgs li{display:grid;grid-template-columns:214px 1fr;gap:1.6rem;align-items:center;padding:1.2rem 0;
  border-bottom:1px solid var(--line);cursor:pointer;outline:none}
@media(max-width:520px){.cfgs li{grid-template-columns:1fr;gap:.9rem}}
.opcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;
  display:flex;justify-content:center;transition:border-color .2s,box-shadow .2s}
.opcard svg{height:78px;width:auto;max-width:100%;display:block;overflow:visible}
.cfgs li:hover .opcard,.cfgs li:focus-visible .opcard,.cfgs li.play .opcard{border-color:var(--accent);box-shadow:0 6px 18px rgba(10,76,134,.08)}
.cfgs li:focus-visible{box-shadow:inset 3px 0 0 var(--accent)}
.op-left,.op-right{transform:translateX(0)}
.cfgs li:hover .op-left,.cfgs li:focus-visible .op-left,.cfgs li.play .op-left{animation:opLeft 3s ease-in-out infinite}
.cfgs li:hover .op-right,.cfgs li:focus-visible .op-right,.cfgs li.play .op-right{animation:opRight 3s ease-in-out infinite}
@keyframes opLeft{0%,15%{transform:translateX(0)}52%,68%{transform:translateX(calc(var(--slide,46px) * -1))}100%{transform:translateX(0)}}
@keyframes opRight{0%,15%{transform:translateX(0)}52%,68%{transform:translateX(var(--slide,46px))}100%{transform:translateX(0)}}
.ops-note{display:flex;align-items:center;gap:.45rem;margin-top:1rem;color:var(--muted);font-size:.84rem}
.ops-note svg{flex:none}
.ops-note .touch{display:none}
@media(hover:none){.ops-note .mouse{display:none}.ops-note .touch{display:inline}}
@media(prefers-reduced-motion:reduce){.cfgs li .op-left,.cfgs li .op-right{animation:none!important}}
.cfgs b{display:block;font-family:var(--fd);font-weight:700;font-size:1.25rem;color:var(--dark)}
.cfgs small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .45rem}
.cfgs p{font-size:.9rem;color:var(--muted)}

/* options: compact cards, five across on wide screens */
.popts{display:grid;gap:18px}
@media(min-width:700px){.popts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.popts{grid-template-columns:repeat(5,1fr)}}
.popt{background:#fff;border:1px solid var(--line);padding:1.4rem 1.3rem 1.5rem;display:flex;flex-direction:column}
.popt .lbl{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.popt h3{font-size:1.15rem;margin:.4rem 0 .7rem}
.popt ul{list-style:none;font-size:.86rem}
.popt li{padding:.3rem 0;border-bottom:1px solid var(--line-lt)}
.popt p{font-size:.86rem;color:var(--muted)}
.popt .sws{display:flex;gap:.7rem;flex-wrap:wrap}
.popt .sws span{display:flex;align-items:center;gap:.4rem;font-size:.84rem}
.popt .sws i{width:18px;height:18px;border:1px solid rgba(0,0,0,.2);display:block}
.popt .more{margin-top:auto;padding-top:1.1rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.popt .more:hover{color:var(--orange-dk)}

/* FAQ: native details/summary, so it works without JS and with the keyboard */
.pfaq{max-width:52rem;border-top:1px solid var(--line)}
.pfaq details{border-bottom:1px solid var(--line)}
.pfaq summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;position:relative;
  font-family:var(--fd);font-size:1.12rem;color:var(--dark)}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--fb);font-size:1.4rem;font-weight:300;color:var(--orange-dk);transition:transform .2s}
.pfaq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.pfaq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pfaq details p{color:var(--muted);padding:0 0 1.3rem;max-width:46rem}
@media(prefers-reduced-motion:reduce){.pfaq summary::after{transition:none}}

/* operation art for hung windows and French doors — same language as the
   First Class sliding diagrams. Portrait drawings get more height so their
   line weight and arrows match the sliders' at a glance. */
.opcard svg.tall{height:112px}
.op-up,.op-down{transform:translateY(0)}
.op-swl,.op-swr{transform-box:fill-box}
.op-swl{transform-origin:left center}
.op-swr{transform-origin:right center}
.cfgs li:hover .op-up,.cfgs li:focus-visible .op-up,.cfgs li.play .op-up{animation:opUp 3s ease-in-out infinite}
.cfgs li:hover .op-down,.cfgs li:focus-visible .op-down,.cfgs li.play .op-down{animation:opDown 3s ease-in-out infinite}
.cfgs li:hover .op-swl,.cfgs li:focus-visible .op-swl,.cfgs li.play .op-swl,
.cfgs li:hover .op-swr,.cfgs li:focus-visible .op-swr,.cfgs li.play .op-swr{animation:opSwing 3s ease-in-out infinite}
@keyframes opUp{0%,15%{transform:translateY(0)}52%,68%{transform:translateY(calc(var(--slide,46px) * -1))}100%{transform:translateY(0)}}
@keyframes opDown{0%,15%{transform:translateY(0)}52%,68%{transform:translateY(var(--slide,46px))}100%{transform:translateY(0)}}
/* a leaf seen in elevation narrows toward its hinge as it swings open */
@keyframes opSwing{0%,15%{transform:scaleX(1)}52%,68%{transform:scaleX(.28)}100%{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.cfgs li .op-up,.cfgs li .op-down,.cfgs li .op-swl,.cfgs li .op-swr{animation:none!important}}
/* options: however many cards the product has (3 for fixed windows, up to 5),
   sharing one row on wide screens instead of leaving empty columns */
.popts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ================= about page ============================================= */
/* hero: the headline beside one oversized number — 20+ years */
.abhero{padding:70px 0 58px}
.abhero .wrap{display:grid;gap:40px;align-items:end}
@media(min-width:940px){.abhero .wrap{grid-template-columns:1.5fr 1fr;gap:64px}}
.abhero h1{max-width:16ch}
.abhero h1 em{color:var(--accent)}
.abhero p{margin-top:1.3rem;max-width:40rem;color:var(--muted)}
.abnum{border-left:2px solid var(--orange-dk);padding-left:1.6rem}
.abnum b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(5rem,12vw,9.5rem);line-height:.85;color:var(--dark);letter-spacing:-.02em}
.abnum b i{font-style:normal;color:var(--orange-dk)}
.abnum span{display:block;margin-top:1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.8}

/* stats on the dark band */
.abstats{padding:56px 0}
.stat{border-top:2px solid var(--accent-lt);padding-top:1.2rem}
.stat b{display:block;font-family:var(--fd);font-weight:400;font-size:2.8rem;line-height:1;color:#fff}
.stat span{display:block;margin-top:.6rem;font-size:.9rem;color:rgba(255,255,255,.65)}

/* quality control: four stages in a row on wide screens */
@media(min-width:700px){.pben.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.pben.four{grid-template-columns:repeat(4,1fr);gap:36px}}

/* materials: render beside the list */
.abmat{align-items:center}
.abrender{width:100%;height:auto;display:block}
.mats{list-style:none;margin-top:1.6rem;border-top:1px solid var(--line)}
.mats li{padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--muted)}
.mats b{display:block;font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--dark);margin-bottom:.35rem}

/* Heroes slide up under the translucent menu bar so it shows the photo
   through. --hdr is the bar's measured height, set by the footer script;
   the fallback matches the desktop bar. The bar keeps its higher z-index. */
:root{--hdr:68px}
.pbanner,.vhero{margin-top:calc(-1 * var(--hdr))}
.pbanner{position:relative;z-index:0}
/* page hero with a real photo (placeholder otherwise — see pageBanner) */
.pbanner.has-img{position:relative;height:calc(clamp(320px,56vh,680px) + var(--hdr));overflow:hidden;background:var(--dark)}
.pbanner.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ================= product gallery (views x colors) ======================= */
.phero .img.pgal{display:flex;flex-direction:column;justify-content:center;padding:32px 24px 36px}
.pg-stage{position:relative;overflow:hidden;outline:none;touch-action:pan-y}
.pg-stage:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.pg-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pg-slide{flex:0 0 100%;margin:0}
.pg-slide img{display:block;width:100%;height:auto;aspect-ratio:7792/5120;transition:opacity .25s}
.pgal.swap .pg-slide img{opacity:.55}
.pg-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s;box-shadow:0 2px 10px rgba(22,27,38,.08)}
.pg-arrow svg{width:18px;height:18px;fill:none;stroke:var(--dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-arrow:hover{border-color:var(--dark)}
.pg-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-arrow.prev{left:6px}.pg-arrow.next{right:6px}
/* status guides: the current view is a long dark pill, the others grey dots */
.pg-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:18px}
.pg-dots i{display:block;width:10.5px;height:10.5px;border-radius:5.25px;background:#b0b0b0;transition:width .35s,background .35s}
.pg-dots i.on{width:34.5px;background:#333}
/* color bars */
.pg-colors{display:flex;justify-content:center;gap:clamp(12px,2vw,22px);margin-top:24px}
.pg-color{width:clamp(52.5px,8.25vw,127.5px);height:13.5px;border:0;padding:0;cursor:pointer;background:var(--c);
  box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s}
.pg-color[data-color="white"]{box-shadow:0 2px 6px rgba(0,0,0,.28),inset 0 0 0 1px #e1e1e1}
.pg-color:hover{transform:translateY(-2px)}
.pg-color:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pg-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.pg-track,.pg-dots i,.pg-slide img{transition:none}}

/* ================= product hardware & security ============================ */
.hwgrid{display:grid;gap:18px}
@media(min-width:700px){.hwgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.hwgrid{grid-template-columns:repeat(4,1fr)}}
.hw{border:1px solid var(--line);border-radius:10px;padding:0 0 1.7rem;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.hw .hwimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--line)}
.hwt{display:flex;align-items:center;gap:.8rem;margin:1.2rem 1.4rem .5rem}
.hw p{margin:0 1.4rem}
.hw:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(10,76,134,.08)}
.hw svg{width:40px;height:40px;flex:none;display:block;fill:none;stroke:#363636;stroke-width:1.4;stroke-linejoin:round}
.hw svg .r{stroke:#de271f;stroke-width:2;stroke-linecap:round}
.hw h3{font-size:1.15rem;margin:0}
.hw p{font-size:.9rem;color:var(--muted)}
.hwsure{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2.2rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hwsure li{position:relative;padding-left:1.7rem;font-size:.92rem;color:var(--ink)}
.hwsure li::before{content:"";position:absolute;left:0;top:.2em;width:1.1em;height:1.1em;border-radius:50%;background:var(--accent)}
.hwsure li::after{content:"";position:absolute;left:.36em;top:.42em;width:.3em;height:.55em;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hw .ph.hwimg{display:flex}

/* ================= reviews ================================================ */
.revs{background:#fff}
.revs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;max-width:none}
.revs-score{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.2rem;border:1px solid var(--line);background:var(--cream)}
.revs-score b{font-family:var(--fd);font-weight:400;font-size:2.4rem;line-height:1;color:var(--dark)}
.revs-score small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;fill:#f5a623}
.revs-score .stars svg{width:19px;height:19px}
/* one review at a time; slides sideways, arrows + dots like the product gallery */
.revs-car{position:relative;max-width:52rem;margin:0 auto;padding:0 0 40px}
.revs-track{display:flex;overflow:hidden;transition:transform 1.2s cubic-bezier(.45,0,.2,1)}
.revs-car .rev{opacity:0;transition:opacity .9s ease}
.revs-car .rev[aria-hidden="false"]{opacity:1}
.revs-car .rev{flex:0 0 100%;min-width:0}
.revs-car .pg-arrow{top:calc(50% - 20px)}
.revs-car .pg-arrow.prev{left:-58px}.revs-car .pg-arrow.next{right:-58px}
@media(max-width:1000px){.revs-car .pg-arrow.prev{left:-6px}.revs-car .pg-arrow.next{right:-6px}}
.revs-car .pg-dots{position:absolute;left:0;right:0;bottom:0;margin-top:0}
.revs-car .pg-dots i{cursor:pointer}
@media(prefers-reduced-motion:reduce){.revs-track{transition:none}}
.rev{margin:0;border:0;padding:2rem 2.2rem 1.8rem;display:flex;flex-direction:column;background:#fff;transition:border-color .2s,box-shadow .2s}
.rev:hover{box-shadow:none}
.rev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.rev .badge svg{width:22px;height:22px;display:block}
.rev blockquote{margin:0;font-size:1.08rem;line-height:1.7;color:var(--ink);flex:1}
.rev blockquote::before{content:"\201C";font-family:var(--fd);font-size:2.4rem;line-height:0;color:var(--orange);margin-right:.15rem;vertical-align:-.9rem}
.rev figcaption{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line-lt);font-size:.86rem}
.rev figcaption b{display:block;font-weight:500;color:var(--dark)}
.rev figcaption span{color:var(--muted)}