/* Clicklad USA — site stylesheet. Ported from the approved mockups (landing v7 Bands, sample panel Three steps) and recoloured to Midnight & Oak.
   Tokens first; change a colour here and the whole site follows. */
:root{
  --bg:#FFFFFF;--fg:#0E1420;--ink:#0E1420;--mute:#4F5B70;--line:#E4E6EA;
  --midnight:#0B1626;--midnight-line:#2A3650;--mist:#AAB4C6;--rail-blue:#8FA8D2;
  --acc:#C9A66B;--acc-ink:#9C7A44;--acc-surf:linear-gradient(135deg,#9C7A44 0%,#D9B878 35%,#B8954E 55%,#E3C68A 80%,#9C7A44 100%);--acc-fg:#0B1626;
  --rule:linear-gradient(90deg,#9C7A44,#E3C68A 50%,#9C7A44);
  --veil:linear-gradient(180deg,rgba(11,22,38,.5),rgba(11,22,38,.1) 45%,rgba(11,22,38,.6));
  --display:"Schibsted Grotesk",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif;--mono:"IBM Plex Mono",monospace;
  --ph-bg:#F1F3F6;--ph-line:#C9CFD8;--ph-fg:#7A8598;--w:1200px;--hdr-h:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.clicklad-home{scroll-snap-type:y proximity}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(28px,3vw,38px);line-height:1.15;font-weight:600}
h2{font-size:clamp(22px,2.3vw,29px);line-height:1.2;font-weight:600}
h3{font-size:16px;line-height:1.35;font-weight:600}
p{margin:0}
img{max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px;position:relative}
.mute{color:var(--mute)}
.lab{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:999}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--fg);color:var(--fg);background:transparent;text-decoration:none;font:600 13px/1 var(--body);border-radius:3px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn.solid{background:var(--acc-surf);color:var(--acc-fg);border-color:transparent}
.btn.solid:hover{filter:brightness(1.06)}
.btn:not(.solid):hover{border-color:var(--acc-ink);color:var(--acc-ink)}
.btn.sm{padding:8px 12px;font-size:12px}
.btn.inv{border-color:rgba(255,255,255,.55);color:#fff}.btn.inv:hover{background:#fff;color:var(--fg);border-color:#fff}

/* placeholders (until a photo is set in the admin) */
.ph{position:relative;border:1px dashed var(--ph-line);background:var(--ph-bg);color:var(--ph-fg);display:flex;align-items:flex-end;padding:12px;font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;min-height:200px;overflow:hidden;border-radius:4px}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.7%,var(--ph-line) 49.7%,var(--ph-line) 50.3%,transparent 50.3%);opacity:.45}
.ph.dark{background:#142035;border-color:#2A3650;color:#8C9AB2}.ph.dark::before{background:linear-gradient(135deg,transparent 49.7%,#2A3650 49.7%,#2A3650 50.3%,transparent 50.3%)}
.pic{position:relative;display:block;border-radius:4px;overflow:hidden;background:var(--ph-bg)}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,20,32,.08);pointer-events:none}
.pic.ph::after{display:none}

/* ---------- utility line + sticky header with mega menus ---------- */
.util{background:var(--midnight);color:var(--mist);font:500 11.5px/1 var(--mono);letter-spacing:.04em;border-bottom:1px solid var(--midnight-line)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:16px}
.hdr{position:sticky;top:0;z-index:40;background:var(--midnight);color:#fff;border-bottom:1px solid var(--midnight-line)}
.hdr>.wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr-h)}
.logo{font:700 17px/1 var(--display);color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo img{height:34px;width:auto;display:block}
.menu{display:flex;list-style:none;margin:0;padding:0;height:var(--hdr-h);justify-content:center}
.menu>li{position:static}
.menu>li>a,.menu>li>.menu-btn{display:flex;align-items:center;height:var(--hdr-h);padding:0 15px;color:#fff;text-decoration:none;font:500 13.5px/1 var(--body);border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;opacity:.92}
.menu>li:hover>a,.menu>li:hover>.menu-btn,.menu>li.open>a,.menu>li.open>.menu-btn,.menu>li:focus-within>a,.menu>li:focus-within>.menu-btn{border-bottom-color:var(--acc);opacity:1}
.hdr .acts{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.mega{position:absolute;left:0;right:0;top:var(--hdr-h);background:#fff;color:var(--fg);border-bottom:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(11,22,38,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.menu>li:hover .mega,.menu>li.open .mega,.menu>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:28px;padding:28px 32px;height:auto}
.mega h4{margin:0 0 10px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mega ul a{color:var(--fg);text-decoration:none;font-size:13.5px;font-weight:500}
.mega ul a small{display:block;color:var(--mute);font-weight:400;font-size:12px;margin-top:2px}
.mega ul a:hover{color:var(--acc-ink)}
.mega .feat{background:#F5F6F8;border-radius:6px;padding:14px;display:grid;gap:10px}
.mega .feat p{font-size:12.5px;color:var(--mute)}
.mega .mph{min-height:110px;aspect-ratio:16/10}
.burger{display:none;width:40px;height:40px;border:1px solid var(--midnight-line);background:none;border-radius:3px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;padding:0}.burger svg{width:24px;height:24px;overflow:visible}.burger .rail{stroke:var(--rail-blue);stroke-width:2.2;stroke-linecap:round}.burger .teeth{stroke:var(--rail-blue);stroke-width:2;stroke-dasharray:1.6 1.4}.burger .board{stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .22s ease,opacity .18s ease}.burger[aria-expanded="true"] .b1{transform:translateY(6px) rotate(45deg)}.burger[aria-expanded="true"] .b2{opacity:0;transform:scaleX(.2)}.burger[aria-expanded="true"] .b3{transform:translateY(-6px) rotate(-45deg)}


.drawer{display:none;position:absolute;left:0;right:0;top:var(--hdr-h);background:var(--midnight);color:#fff;border-bottom:1px solid var(--midnight-line);padding:12px 32px 24px;max-height:calc(100vh - var(--hdr-h));overflow:auto}
.drawer.open{display:block}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer>ul>li{border-bottom:1px solid var(--midnight-line)}
.drawer a,.drawer .drawer-head{display:block;padding:14px 0;color:#fff;text-decoration:none;font:500 15px/1 var(--body)}
.drawer .drawer-head{color:var(--mist);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-bottom:4px}
.drawer ul ul a{padding:10px 0 10px 14px;font-size:14px}
.drawer-acts{padding-top:18px}
@media(max-width:1060px){.menu-wrap,.hdr .acts .btn{display:none}.hdr>.wrap{grid-template-columns:1fr auto}.burger{display:flex}.util .wrap span:last-child{display:none}}

/* ---------- Home (Bands) ---------- */
.hero-b{position:relative;height:min(86vh,820px);min-height:520px;overflow:hidden;background:var(--midnight)}
.hero-b>.pic{position:absolute;inset:0;border-radius:0;min-height:0;border:0}.hero-b>.pic img{position:absolute;inset:0;object-position:50% 45%}
.hero-b>.pic::after{display:block;box-shadow:none;background:linear-gradient(180deg,rgba(11,22,38,.25) 0%,rgba(11,22,38,.05) 40%,rgba(11,22,38,.78) 100%)}
.hero-b>.pic.ph{align-items:flex-start;padding:24px 32px}
.hero-b .cap{position:absolute;left:0;right:0;bottom:0;color:#fff;padding-bottom:64px}
.hero-b .cap .lab{display:inline-block;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.14em;padding:9px 13px;border-radius:999px;background:rgba(11,22,38,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.hero-b .cap h1{color:#fff;max-width:22ch;margin-top:14px}
.hero-b .cap p{color:rgba(255,255,255,.85);max-width:52ch;margin-top:12px}
.hero-b .cap .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero-b .cap .btn{border-color:rgba(255,255,255,.6);color:#fff}.hero-b .cap .btn:hover{background:#fff;color:var(--fg);border-color:#fff}.hero-b .cap .btn.solid{background:var(--acc-surf);color:var(--acc-fg);border-color:transparent}
.partners{padding:36px 0;border-bottom:1px solid var(--line)}
.partners .wrap{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:24px}
.partners .lab{white-space:nowrap}
.loop{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.loop .track{display:flex;gap:56px;width:max-content;animation:mv 75s linear infinite}
.loop:hover .track{animation-play-state:paused}
.logo-ph{width:140px;height:40px;border:1px dashed var(--ph-line);border-radius:3px;display:flex;align-items:center;justify-content:center;font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--ph-fg);text-transform:uppercase;flex:0 0 auto}
.logo-ph.has{border:0;width:auto;max-width:170px;padding:0 2px}.logo-ph.has img{max-height:40px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75}
@keyframes mv{to{transform:translateX(-50%)}}
.band{position:relative;min-height:min(84vh,760px);display:flex;align-items:center;overflow:hidden;scroll-snap-align:start;background:var(--midnight)}
.band>.pic{position:absolute;inset:0;border-radius:0;min-height:0;border:0}.band>.pic img{position:absolute;inset:0}
.band>.pic::after{display:block;box-shadow:none;background:rgba(11,22,38,.12)}
.band>.pic.ph{align-items:flex-start;padding:24px 32px}
.band .wrap{width:100%;display:flex;padding-top:72px;padding-bottom:72px}
.band.r .wrap{justify-content:flex-end}
.panel-b,.band .panel{background:rgba(255,255,255,.96);padding:44px 48px;max-width:540px;border-radius:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);position:relative}
.band .panel h2{margin-top:10px}.band .panel p{color:var(--mute);margin-top:12px}.band .panel h3{margin-top:22px}.band .panel .btn{margin-top:22px}
.strip{padding:64px 0;background:#fff;position:relative;scroll-snap-align:start}
.strip .txt{max-width:56ch}.strip .txt h2{margin-top:10px}.strip .txt p{color:var(--mute);margin-top:12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:2px solid var(--fg)}
.stat{padding:20px 20px 0 0}
.stat b{display:block;font:600 30px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat b i{font-style:normal;color:var(--acc);font-size:.55em;vertical-align:top}
.stat span{display:block;margin-top:6px;font-size:12.5px;color:var(--mute)}
.apps-head{padding:88px 0 56px;scroll-snap-align:start;background:var(--midnight);color:#fff}.apps-head .lab{color:var(--mist)}
.apps-head .txt{max-width:none;margin:0 auto;text-align:center}.apps-head .txt h2{text-wrap:balance;max-width:440px;margin-inline:auto}.apps-head .txt p{max-width:none}.apps-head .txt h2{margin-top:10px;color:#fff}.apps-head .txt p{color:var(--mist);margin-top:12px}.apps-head .txt p+p{margin-top:8px}
.apps-b{display:grid;grid-template-columns:repeat(3,1fr);height:min(82vh,720px);scroll-snap-align:start;background:var(--midnight)}
.apps-b a{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 32px;text-decoration:none;border-right:1px solid rgba(255,255,255,.2)}
.apps-b a:last-child{border-right:0}
.apps-b .pic{position:absolute;inset:0;border-radius:0;border:0;min-height:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.apps-b .pic img{position:absolute;inset:0}
.apps-b .pic::after{display:block;box-shadow:none;background:linear-gradient(180deg,rgba(11,22,38,0) 45%,rgba(11,22,38,.85) 100%)}
.apps-b .pic.ph{align-items:flex-start;padding:24px 32px}
.apps-b a:hover .pic{transform:scale(1.04)}
.apps-b h3,.apps-b p,.apps-b .lab{position:relative;z-index:1}
.apps-b h3{color:#fff;font-size:18px}.apps-b p{color:rgba(255,255,255,.8);font-size:13.5px;margin-top:6px;max-width:34ch}.apps-b .lab{color:var(--acc);margin-bottom:10px}
.fin{padding:96px 0;background:#fff;position:relative;scroll-snap-align:start}
.blk{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.txt h2{margin-top:10px}.txt p{color:var(--mute);max-width:56ch;margin-top:12px}.txt .btn{margin-top:20px}
.sw{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sw div{aspect-ratio:4/3;border-radius:3px;display:flex;align-items:flex-end;padding:8px;font:500 10px/1 var(--mono);color:#fff;letter-spacing:.05em;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.why-band{padding:88px 0;position:relative;scroll-snap-align:start;background:var(--midnight);color:#fff}.why-band .txt h2{color:#fff}.why-band .txt p{color:var(--mist)}.why-band .why div{border-top-color:rgba(255,255,255,.28)}.why-band .why h3{color:#fff}.why-band .why p{color:var(--mist)}.why-band .why svg{color:var(--acc)}
.tail{padding:96px 0;position:relative;scroll-snap-align:start}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:28px}
.why div{border-top:1px solid var(--fg);padding-top:14px}
.why svg{width:44px;height:30px;margin-bottom:10px;color:var(--acc-ink)}
.why p{font-size:13.5px;color:var(--mute);margin-top:6px}
.pf .w{fill:none;stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter}.pf .b{fill:currentColor}.pf .d{fill:none;stroke:currentColor;stroke-width:.22}.pf .t{fill:none;stroke:currentColor;stroke-width:.5}.pf .n{fill:currentColor;font:2.6px "IBM Plex Mono",monospace;letter-spacing:.02em}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.faq{margin-top:24px}
.faq details{border-top:1px solid var(--line);padding:14px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:600 15px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--acc-ink)}.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;max-width:64ch;color:var(--mute);font-size:14px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.form label{display:grid;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.form input,.form select,.form textarea{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);padding:10px 0;font:400 14px/1.3 var(--body);border-radius:0;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--acc)}
.form .full{grid-column:1/-1;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.form label.full{display:grid}
.msg{font-size:13px;color:var(--mute)}.msg.ok{color:var(--acc-ink)}.msg.err{color:#B4432E}

/* ---------- simple page hero ---------- */
.hero-p{position:relative;height:min(62vh,560px);min-height:360px;overflow:hidden;background:var(--midnight)}
.hero-p>.pic{position:absolute;inset:0;border-radius:0;border:0;min-height:0}.hero-p>.pic img{position:absolute;inset:0}
.hero-p>.pic::after{display:block;box-shadow:none;background:var(--veil)}
.hero-p>.pic.ph{align-items:flex-start;padding:24px 32px}
.hero-p .cap{position:absolute;left:0;right:0;bottom:0;color:#fff;padding-bottom:56px}
.hero-p .cap .lab{display:inline-block;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.14em;padding:9px 13px;border-radius:999px;background:rgba(11,22,38,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.25)}.hero-p .cap h1{color:#fff;margin-top:12px;max-width:18ch;font-size:clamp(32px,3.6vw,46px)}
.sec{padding:80px 0;position:relative}
.col{max-width:760px}.col p{margin-bottom:16px;color:var(--mute)}.col h2,.col h3{margin:32px 0 10px}

/* ---------- footer ---------- */
.foot{padding:60px 0 26px;font-size:13.5px;background:var(--midnight);color:#fff}
main:has(>.sheets,>.sample-band)+.foot{background:#06101C} /* a page closing on a Midnight band still needs a solid break before the footer */
.foot .g2{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.foot a{color:#fff;text-decoration:none}.foot a:hover{color:var(--acc)}.foot .lab{margin-bottom:12px;color:var(--mist)}.foot .mute{color:var(--mist)}.foot .btn{border-color:rgba(255,255,255,.6);color:#fff}.foot .btn:not(.solid):hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.foot .logo{color:#fff}.foot .logo img{height:30px}
.foot .blurb{max-width:36ch;margin:12px 0 14px;color:var(--mist)}
.foot .certs{display:flex;gap:8px}.foot .cert{min-height:48px;width:80px;padding:6px;font-size:9px;border-color:var(--midnight-line)}.foot .cert img{object-fit:contain;padding:6px;background:#fff}
.foot .fine{margin-top:32px;padding-top:14px;border-top:1px solid var(--midnight-line);display:flex;justify-content:space-between;color:var(--mist);font-size:12px;flex-wrap:wrap;gap:12px}

/* ---------- Request a Sample panel (Three steps) ---------- */
.scrim{position:fixed;inset:0;background:rgba(11,22,38,.55);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:#fff;z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.2,1);box-shadow:-40px 0 80px -40px rgba(0,0,0,.5);visibility:hidden}
.panel.open{transform:none;visibility:visible}
.ph-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);flex:0 0 auto}
.ph-head b{display:block;font:600 18px/1.2 var(--display);margin-top:4px}
.ph-head .x{appearance:none;border:0;background:none;font:300 28px/1 var(--display);cursor:pointer;color:var(--fg)}
.ph-body{flex:1;overflow:auto;padding:22px 24px;margin:0}
.ph-foot{border-top:1px solid var(--line);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex:0 0 auto;background:#fff}
.panel h3{font-size:16px}
.panel .mute{font-size:13px;margin-top:4px;margin-bottom:14px}
.fam{margin-top:16px}.fam .lab{display:block;margin-bottom:8px}
.sws{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.panel .sw{appearance:none;border:1px solid var(--line);background:#fff;border-radius:4px;padding:8px;display:grid;grid-template-columns:1fr;gap:8px;cursor:pointer;text-align:left;font:500 11.5px/1.2 var(--body);color:var(--fg);transition:border-color .15s}
.panel .sw .chip-c{display:block;aspect-ratio:4/3;border-radius:3px;background:var(--tex,none) center/cover,var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.panel .sw:hover{border-color:var(--fg)}
.panel .sw.on{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.panel .sw.on span:last-child::after{content:" ✓"}
.panel .sw.dis{opacity:.4;pointer-events:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{appearance:none;border:1px solid var(--line);background:#fff;color:var(--fg);padding:8px 12px;border-radius:999px;font:500 12.5px/1 var(--body);cursor:pointer}
.chip.on{background:var(--midnight);color:#fff;border-color:var(--midnight)}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:14px}
.frm label{display:grid;gap:5px;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.frm .full{grid-column:1/-1}
.frm input,.frm select{border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 0;font:400 13.5px/1.3 var(--body);color:var(--fg);border-radius:0;width:100%}
.frm input:focus,.frm select:focus{outline:none;border-bottom-color:var(--acc)}
.fine{font-size:11.5px;color:var(--mute);margin-top:14px;line-height:1.6}
.picked{display:grid;gap:6px;min-width:0}
.pk{display:flex;gap:6px;flex-wrap:wrap}
.pk i{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);border:1px solid var(--line);border-radius:999px;padding:5px 9px 5px 5px;font-style:normal}
.pk i::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c)}
.pk:empty::before{content:"Nothing yet";font:400 12px/1 var(--body);color:var(--mute)}
.p1 .prog{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.p1 .prog span{padding:12px 24px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid transparent;cursor:pointer}
.p1 .prog span.on{color:var(--fg);border-bottom-color:var(--acc)}
.p1 .step{display:none}.p1 .step.on{display:block}
.p1 .nav{display:flex;gap:8px}
.panel .sent{padding:48px 24px;text-align:center}.panel .sent h3{font-size:22px;margin-top:12px}.panel .sent p{color:var(--mute);margin-top:10px}
body.panel-open{overflow:hidden}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .band{min-height:0}.band .wrap{padding-top:120px;padding-bottom:40px}.band .panel{padding:28px}
  .apps-b{grid-template-columns:1fr;height:auto}.apps-b a{min-height:320px;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .duo{grid-template-columns:1fr;gap:40px}.blk{grid-template-columns:1fr}
  .stats,.why{grid-template-columns:1fr 1fr}.foot .g2{grid-template-columns:1fr 1fr}.form{grid-template-columns:1fr}
  .partners .wrap{grid-template-columns:1fr}
  .hero-b{min-height:560px}
}
@media(max-width:560px){.stats,.why,.foot .g2{grid-template-columns:1fr}.sw{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.loop .track{animation:none}body.clicklad-home{scroll-snap-type:none}html{scroll-behavior:auto}.panel,.scrim,.mega,.apps-b .pic{transition:none}}

/* ---------- About (Chapters) ---------- */
.hero-about,.hero-contact,.hero-products{height:min(64vh,640px);min-height:380px}
.hero-p .cap .lede{color:rgba(255,255,255,.85);max-width:60ch;margin-top:12px}
.chapters{padding:80px 0 40px;position:relative}
.chapters .wrap{display:grid;grid-template-columns:280px 1fr;gap:72px;align-items:start}
.index{position:sticky;top:calc(var(--hdr-h) + 40px)}
.index nav{display:grid;margin-top:14px;border-top:1.5px solid var(--fg)}
.ci{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--mute);text-decoration:none;font:500 13px/1.4 var(--body);transition:color .15s}
.ci .n{font:500 11px/1.6 var(--mono);color:var(--acc-ink);letter-spacing:.06em;flex:0 0 22px}
.ci.on,.ci:hover{color:var(--fg)}.ci.on{font-weight:600}
.flow article{padding:0 0 72px;margin-bottom:72px;border-bottom:1px solid var(--line);position:relative;scroll-margin-top:calc(var(--hdr-h) + 24px)}
.flow article:last-child{border-bottom:0}
.flow h2{margin-top:10px;max-width:22ch}
.flow p{color:var(--mute);max-width:60ch;margin-top:14px}
.flow .btn{margin-top:22px}
.flow .pic.wide{margin:28px 0;aspect-ratio:16/9}
.flow .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.flow .pic.tall{aspect-ratio:4/3}
.why.two{grid-template-columns:1fr 1fr;margin-top:28px}
.certrow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.certrow>div{border-top:1px solid var(--line);padding-top:16px}
.certrow b{display:block;font:600 14px/1.3 var(--display);margin-top:12px}
.certrow span{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--mute);margin-top:4px}
.pic.logo-box{min-height:72px;width:120px;padding:8px;font-size:9px;aspect-ratio:5/3}.pic.logo-box img{object-fit:contain;padding:8px;background:#fff}
.certrow .pic.logo-box{width:100%;min-height:0;padding:0;aspect-ratio:8/5}.certrow .pic.logo-box:not(.ph){background:#fff;border:1px solid var(--line)}.certrow .pic.logo-box img{padding:5% 8%}
.contact-sec{border-top:1px solid var(--line)}
.contact{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.contact .form{margin-top:0}
/* Framed form (Darian's pick B, 2026-10-13, site-wide): no hairline above the contact section; the form sits in a Midnight card */
.contact-sec.framed{border-top:0;padding-top:56px}
#contact.framed .contact{border-top:0}
.framed .contact .form,.tail .duo .form{background:var(--midnight);color:#fff;border-radius:6px;padding:32px 34px 36px;box-shadow:0 28px 60px rgba(11,22,38,.28)}
.framed .form label,.tail .form label{color:var(--mist)}
.framed .form input,.framed .form select,.framed .form textarea,.tail .form input,.tail .form select,.tail .form textarea{color:#fff;border-bottom-color:var(--midnight-line)}
.framed .form input::placeholder,.framed .form textarea::placeholder,.tail .form input::placeholder,.tail .form textarea::placeholder{color:#6F7B92}
.framed .form select,.tail .form select{color:#fff}.framed .form select:invalid,.framed .form select option[value=""],.tail .form select:invalid,.tail .form select option[value=""]{color:#6F7B92}.framed .form select option,.tail .form select option{color:var(--fg);background:#fff}
.framed .form input:focus,.framed .form select:focus,.framed .form textarea:focus,.tail .form input:focus,.tail .form select:focus,.tail .form textarea:focus{border-bottom-color:var(--acc)}
.framed .form .msg,.tail .form .msg{color:var(--mist)}
@media(max-width:560px){.framed .contact .form,.tail .duo .form{padding:22px 18px 24px;border-radius:4px}}

/* ---------- Contact (Switch) ---------- */
.switchsec .narrow{max-width:860px}
.txt.center{text-align:center}.txt.center p{margin-left:auto;margin-right:auto}
.dir{display:flex;align-items:center;gap:12px;margin-top:30px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.dir .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc-surf);color:var(--acc-fg);font:600 9.5px/1 var(--mono)}
.dir::after{content:"";flex:1;height:1px;background:var(--line)}
.doors.switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.door{appearance:none;text-align:left;cursor:pointer;background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:18px 20px 18px 54px;position:relative;display:grid;gap:6px;font-family:var(--body);transition:border-color .15s,box-shadow .15s}
.door b{display:block;color:var(--fg);font:600 16px/1.2 var(--display);letter-spacing:-.01em}
.door small{color:var(--mute);font-size:12.5px;max-width:40ch}
.door .rad{position:absolute;left:20px;top:20px;width:18px;height:18px;border-radius:50%;border:1.5px solid #B9C0CC;background:#fff;transition:border-color .15s}
.door .rad::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--acc-ink);transform:scale(0);transition:transform .18s}
.door:hover{border-color:#B9C0CC}
.door.on{border-color:var(--acc-ink);box-shadow:inset 0 0 0 1px var(--acc-ink)}
.door.on .rad{border-color:var(--acc-ink)}.door.on .rad::after{transform:scale(1)}
.aform{border:1px solid var(--line);border-radius:4px;margin-top:14px;padding:28px 32px;background:#fff}
.fhead{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1.5px solid var(--fg);margin-bottom:22px}
.aform .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aform .fields[hidden]{display:none}
.aform label{display:grid;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.aform .full{grid-column:1/-1}
.aform .fh{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.aform .fh:first-child{margin-top:0;padding-top:0;border-top:0}
.aform input,.aform select,.aform textarea{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);padding:10px 0;font:400 14px/1.3 var(--body);border-radius:0;width:100%}
.aform input:focus,.aform select:focus,.aform textarea:focus{outline:none;border-bottom-color:var(--acc)}
.fchips .fl{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.up .drop{display:block;border:1px dashed var(--ph-line);border-radius:4px;padding:18px;text-align:center;font:400 12.5px/1.4 var(--body);color:var(--mute);text-transform:none;letter-spacing:0;cursor:pointer;margin-top:8px}
.up .drop input{display:none}.up .drop.has{border-style:solid;border-color:var(--fg);color:var(--fg)}
.aform>.btn{margin-top:26px;margin-right:16px}
.strip.lines{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0;background:#fff}
.strip-in{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.strip-in>div{display:grid;gap:6px;font-size:13.5px}
.strip-in a{color:var(--fg);text-decoration:none;font-weight:500}
.faqg{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.faqg .faq{margin-top:0}

/* ---------- Products (Catalog) ---------- */
.crumbwrap{padding:22px 0 0}
.crumb{display:flex;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.crumb a{color:var(--mute);text-decoration:none}
.filters{position:sticky;top:var(--hdr-h);z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:16px 0;margin-top:22px}
.frow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.frow.sub{margin-top:12px;gap:24px}
.fgroup{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip:hover{border-color:var(--fg)}
.chip i{font-style:normal;opacity:.55;margin-left:4px;font-family:var(--mono);font-size:11px}
.search{margin-left:auto;display:flex;align-items:center;gap:12px}
.search input{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:400 13px/1 var(--body);width:240px}
.search input:focus{outline:none;border-color:var(--fg)}
.clear{appearance:none;border:0;background:none;color:var(--mute);font:500 12px/1 var(--body);cursor:pointer;text-decoration:underline;margin-left:auto}
.grid-sec{padding-top:40px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.card:hover{border-color:var(--fg);transform:translateY(-2px)}
.card.hide{display:none}
.card>.ph,.card>.pic{min-height:190px;aspect-ratio:4/3;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.card .cb{padding:16px 18px 18px;display:grid;gap:6px}
.card h3{font-size:15px}
.card p{font-size:12.5px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tags span{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:5px 7px;border-radius:3px}
.fnote{font-size:12px;color:var(--mute);margin-top:16px}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sheets{background:var(--midnight);color:#fff;padding:88px 0}.sheets .lab{color:var(--mist)}.sheets h2{color:#fff}.sheets .specs .btn{background:#fff;border-color:#fff;color:var(--fg)}.sheets .specs .btn:not(.solid):hover{background:var(--acc);border-color:var(--acc);color:var(--midnight)}.sheets+.contact-sec{border-top:0;padding-top:96px}
.sysrow{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.specs{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.spec{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}
.spec th{text-align:left;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:10px 12px 10px 0;border-top:1px solid var(--line);width:34%;vertical-align:top}
.spec td{padding:10px 0;border-top:1px solid var(--line);vertical-align:top}
.pdrawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:#fff;z-index:100;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow:auto;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);visibility:hidden}
.pdrawer.open{transform:none;visibility:visible}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.dhead .x{appearance:none;border:0;background:none;font:300 26px/1 var(--display);cursor:pointer;color:var(--fg)}
.dbody{padding:24px}
.dmedia{display:grid;gap:10px}
.dmedia .ph{min-height:200px}.dmedia .pic{aspect-ratio:4/3}
.dbody h2{margin-top:20px}
.dbody p.mute{margin-top:8px;font-size:14px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.chapters .wrap{grid-template-columns:1fr;gap:32px}.index{position:static}.pic.wide,.pic.tall{min-height:0}.flow .pair{grid-template-columns:1fr}.certrow,.why.two{grid-template-columns:1fr 1fr}.contact,.faqg{grid-template-columns:1fr}.strip-in{grid-template-columns:1fr 1fr}.doors.switch{grid-template-columns:1fr}.aform .fields{grid-template-columns:1fr}.aform{padding:22px}.filters{position:static}.grid{grid-template-columns:1fr 1fr}.search{margin-left:0;width:100%}.search input{flex:1}.sysrow{grid-template-columns:1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.strip-in,.why.two{grid-template-columns:1fr}.certrow{gap:16px}}

/* ---------- Finishes (Cross-section) ---------- */
.hero-finishes,.hero-resources,.hero-howtobuy{height:min(56vh,560px);min-height:360px}
.fhero{background:var(--midnight);color:#fff;position:relative;overflow:hidden}
.fhero .wrap{display:grid;grid-template-columns:.9fr 1.35fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:72px;min-height:min(72vh,720px)}
.fhero .lab{color:var(--mist)}.fhero h2{color:#fff;margin-top:14px;font-size:clamp(26px,2.8vw,38px)}.fhero p{color:#C9CFDB;margin-top:16px;max-width:44ch}
.fhero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.fhero .boardbg{background:#E9EBEF;border-radius:6px;padding:28px 28px 22px;color:var(--fg);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.fhero .board-photo{aspect-ratio:16/9}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end}
.board .st{display:grid;gap:12px}
.board .st .lab b{color:var(--acc-ink);font-weight:500;margin-right:8px}
.board .st h3{font-size:15px}.board .st p{font-size:13px;color:var(--mute)}
.credit{position:absolute;right:32px;bottom:14px;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:2}
/* the clip: a stand-in rendered from CSS until the real renders exist. --clip = clean render (Finishes page field), --tex = finish texture, --sw = flat colour */
.clip{position:relative;aspect-ratio:728/472;width:100%;isolation:isolate;--sw:#6B3F22}
.clip:not(.has-render) .cbody{position:absolute;left:8%;right:8%;top:22%;bottom:26%;background:var(--clip,linear-gradient(160deg,#D9DCE1,#AEB3BB));border-radius:3px;transform:skewY(-6deg);box-shadow:14px 18px 0 -6px rgba(11,22,38,.12)}
.clip:not(.has-render) .cbody::after{content:"";position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.18) 30%,rgba(0,0,0,.08));mix-blend-mode:multiply}
.clip:not(.has-render) .cskin{position:absolute;left:8%;right:8%;top:22%;bottom:26%;border-radius:3px;transform:skewY(-6deg);background:var(--tex,none) center/cover,var(--sw);opacity:1;transition:opacity .5s,filter .5s}
.clip:not(.has-render)[data-stage="1"] .cskin{opacity:0}
.clip:not(.has-render)[data-stage="2"] .cskin{opacity:1;background:#D5A21E;filter:saturate(.7)}
.clip:not(.has-render)[data-stage="3"] .cskin{opacity:.75}
.clip:not(.has-render)[data-stage="3"]::after{content:"";position:absolute;left:8%;right:8%;top:22%;bottom:26%;transform:skewY(-6deg);background:linear-gradient(112deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.62) 28%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 58%,rgba(255,255,255,.34) 66%,rgba(255,255,255,0) 74%)}
/* the real clip: pre-rendered images of the C-profile on white, stacked and crossfaded (stage images .cs1–.cs4; the sampler's .cfin is swapped by site.js) */
.clip.has-render{aspect-ratio:4/3;background:#fff}
.clip.has-render .cs,.clip.has-render .cfin{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fff;opacity:0;transition:opacity .55s ease}
.clip.has-render .cs1,.clip.has-render .cfin{opacity:1}
.clip.has-render[data-stage="2"] .cs2,.clip.has-render[data-stage="3"] .cs3,.clip.has-render[data-stage="4"] .cs4{opacity:1}
.clip.has-render .cfin.fade{opacity:0;transition-duration:.2s}
.clip .tag{position:absolute;left:0;bottom:0;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fhero .clip .tag{display:none}
.xsec .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.stick{position:sticky;top:calc(var(--hdr-h) + 40px)}
.stick .stagebar{display:flex;gap:8px;margin-top:18px}
.stick .stagebar span{flex:1;height:3px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.stick .stagebar span::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.stick .stagebar span.on::after{transform:none}
.stick .stagelab{display:flex;justify-content:space-between;margin-top:8px}
.chaps{display:grid}
.chap{min-height:62vh;display:grid;align-content:center;padding:40px 0;border-top:1px solid var(--line)}
.chap:first-child{border-top:0}
.chap .lab b{color:var(--acc-ink);font-weight:500;margin-right:10px}
.chap h3{font-size:clamp(22px,2.2vw,30px);margin-top:12px;letter-spacing:-.015em}
.chap p{color:var(--mute);margin-top:12px;max-width:46ch}
.chap .ben{margin-top:14px;padding-left:14px;border-left:2px solid var(--acc);color:var(--fg);font-weight:500;max-width:44ch}
.closer{padding:40px 0 0;font:500 clamp(20px,2vw,26px)/1.4 var(--display);letter-spacing:-.01em;max-width:30ch}
.numsec{padding:56px 0;background:var(--midnight);color:#fff}
.nums{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--midnight-line)}
.nums div{padding:18px 16px 0 0}
.nums b{display:block;font:600 28px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.nums b i{font-style:normal;color:var(--acc);font-size:.55em;vertical-align:top;margin-left:2px}
.nums span{display:block;margin-top:6px;font-size:12.5px;color:var(--mist)}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hd h2{margin-top:10px}.hd .side{max-width:44ch;color:var(--mute);font-size:14px}
.sampler{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;margin-top:40px}
.vars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.var{appearance:none;border:1px solid var(--line);background:transparent;padding:0;border-radius:4px;cursor:pointer;text-align:left;overflow:hidden;color:inherit;font-family:var(--body);transition:border-color .15s,transform .15s}
.var[hidden]{display:none}
.var .sw{display:block;aspect-ratio:3/2;background:var(--sw) center/cover}
.var b{display:block;padding:8px 10px 0;font:600 12.5px/1.3 var(--display)}
.var small{display:block;padding:2px 10px 9px;font:500 9.5px/1.3 var(--mono);letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
.var:hover{border-color:var(--fg);transform:translateY(-2px)}
.var[aria-selected="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.meta{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.meta .k{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.meta .v{display:block;font-size:14px;font-weight:500}
.sampler h3.name{font-size:clamp(22px,2.2vw,30px);margin-top:14px;letter-spacing:-.015em}
.sampler .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center}
.sampler .more{font-size:13px;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
.sampler .more:hover{color:var(--fg);border-color:var(--fg)}
.tick{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.famsec{border-top:1px solid var(--line)}
.famgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.fcard{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;display:grid;grid-template-rows:auto 1fr;transition:border-color .15s,transform .15s}
.fcard:hover{border-color:var(--fg);transform:translateY(-2px)}
.fcard .swatch{height:170px;background:var(--sw) center/cover}
.fcard .body{padding:16px 18px 18px;display:grid;gap:4px;align-content:start}
/* the "beyond the eight" card: RAL, metallics and custom grains go to the Contact page */
.morecard{margin-top:20px;border:1px solid var(--line);border-radius:4px;background:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:36px 40px}
.morecard h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.015em;margin-top:10px}
.morecard p{font-size:14px;color:var(--mute);margin-top:10px;max-width:56ch}
.morecard .acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;align-items:center}
.morecard .more{font-size:13px;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
.morecard .more:hover{color:var(--fg);border-color:var(--fg)}
.morecard .ral{display:grid;gap:12px}
.morecard .ral .chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.morecard .ral i{display:block;aspect-ratio:1;border-radius:3px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.morecard .ral .lab{margin:0}
.fcard h3{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.fcard h3 span{font:500 11px/1 var(--mono);color:var(--acc-ink);letter-spacing:.06em;text-align:right}
.fcard p{font-size:13px;color:var(--mute)}
.fcard .go{font:600 12.5px/1 var(--body);margin-top:8px;color:var(--fg)}
.proof{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.proof h2{margin-top:10px}.proof .mute{margin-top:12px;max-width:52ch}
.proof-pic{aspect-ratio:4/3;min-height:320px}
.tests{columns:2;column-gap:28px;margin-top:24px;font-size:13px;color:var(--mute)}
.tests div{break-inside:avoid;padding:7px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.tests div b{color:var(--fg);font-weight:500}
.tests div span{font:500 10.5px/1.5 var(--mono);letter-spacing:.03em}
.sec.dark{background:var(--midnight);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}.sec.dark .lab{color:var(--mist)}.sec.dark .mute{color:#C9CFDB}
.custom{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.custom h2{margin-top:10px}.custom .mute{margin-top:12px;max-width:52ch}.custom .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cflow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}
.cflow .ph,.cflow .pic{min-height:140px;font-size:9.5px;aspect-ratio:1/1}
.cflow .arr{color:var(--acc);font:400 22px/1 var(--mono)}
.xl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.xl a{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:4px;padding:16px 18px;text-decoration:none;color:var(--fg);font:600 14px/1.3 var(--display);transition:border-color .15s}
.xl a small{display:block;font:400 12.5px/1.4 var(--body);color:var(--mute);margin-top:3px}
.xl a:hover{border-color:var(--fg)}.xl a span{color:var(--acc-ink)}
#contact .contact{margin-top:88px;padding-top:88px;border-top:1px solid var(--line)}

/* ---------- Resources (Guide) ---------- */
.guide{padding:72px 0 40px}
.guide .wrap{display:grid;grid-template-columns:260px 1fr;gap:72px;align-items:start}
.guide .flow article{padding-bottom:64px;margin-bottom:64px}
.guide .flow h2{margin-top:8px}
.guide .flow>article>p{color:var(--mute);max-width:60ch;margin-top:12px}
.guide .flow>article>p.wide{max-width:64ch}
.rows{display:grid;margin-top:24px;border-top:1.5px solid var(--fg)}
.row{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.row b{font:600 15px/1.3 var(--display);flex:1}
.ico{display:inline-flex;align-items:center;justify-content:center;width:66px;height:50px;border:1px solid var(--fg);border-radius:3px;flex:0 0 66px;position:relative;background:#fff;color:var(--fg);padding:7px 8px 13px;transition:border-color .15s}
.ico .ico-prof{width:100%;height:100%;overflow:visible;transition:color .15s}
.ico .ico-prof *{vector-effect:non-scaling-stroke;stroke-width:1.5px}
.ico i{position:absolute;right:6px;bottom:4px;font:500 7.5px/1 var(--mono);letter-spacing:.1em;font-style:normal;color:var(--mute)}
.row:hover .ico{border-color:var(--acc)}.row:hover .ico .ico-prof{color:var(--acc)}
.row .t{flex:1;min-width:0;display:grid;gap:2px}.row .t small{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.dl{font:600 12.5px/1 var(--body);color:var(--fg);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.dl.todo,.btn.todo{opacity:.45;cursor:not-allowed;text-decoration:none}
.covers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.covers .cover{display:grid;gap:6px;justify-items:start}
.cover-pic{aspect-ratio:3/2;width:100%;min-height:0;background:#EEF0F3}
.covers b{font:600 15px/1.3 var(--display);margin-top:8px}.covers small{color:var(--mute);font-size:12px}.covers .btn{margin-top:6px}
.guidecard{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;border:1px solid var(--line);border-radius:4px;padding:20px;align-items:center}
.guide-pic{aspect-ratio:3/2;width:100%;min-height:0;background:#EEF0F3}
.guidecard h3{margin-top:8px}.guidecard .mono{margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--mute)}.guidecard .btn{margin-top:14px}.guidecard small{display:block;color:var(--mute);font-size:12px;margin-top:8px}
.vids{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.vid{position:relative}.vid .ph{min-height:0;aspect-ratio:16/9}.vid .embed{aspect-ratio:16/9}.vid .embed iframe{width:100%;height:100%}
.vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#fff;color:var(--fg);font-size:18px;display:grid;place-items:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.cert{border:1px solid var(--line);border-radius:4px;padding:20px;display:grid;gap:8px;justify-items:start;background:#fff}
.cert b{font:600 20px/1.2 var(--display);margin-top:8px;font-variant-numeric:tabular-nums}
.cert span{font-size:12.5px;color:var(--mute)}
.classa{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;margin-top:28px;padding:28px;border:1.5px solid var(--fg);border-radius:4px;background:#fff;align-items:start}
.classa .big{font:600 20px/1.35 var(--display);margin-top:10px;max-width:24ch}
.classa .spec{margin-top:0}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:20px}
.notes p{font-size:13px;color:var(--mute);padding-left:14px;border-left:2px solid var(--acc)}
.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.charts .lab{display:block;margin-bottom:8px}.chart-pic{min-height:110px;aspect-ratio:4/5}
.guide .fine{font-size:12px;color:var(--mute);margin-top:16px;line-height:1.7}
.guide .acts{margin-top:18px}

/* ---------- How to Buy (Desk) ---------- */
.desk{padding:72px 0 40px}
.desk .wrap{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
.desk .side{position:sticky;top:calc(var(--hdr-h) + 40px);display:grid;gap:14px}
.office{border:1px solid var(--line);border-radius:4px;padding:24px;background:#fff}
.office h3{margin-top:8px;font-size:20px}
.office .addr{color:var(--mute);margin-top:8px;line-height:1.6}
.office ul{list-style:none;margin:16px 0 0;padding:0;display:grid}
.office li{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:baseline}
.office li a{color:var(--fg);text-decoration:none;font-weight:500}
.office .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.office.dark{background:var(--midnight);color:#fff;border-color:var(--midnight)}
.office.dark .addr,.office.dark .lab{color:var(--mist)}
.office.dark li{border-top-color:var(--midnight-line)}.office.dark li a{color:#fff}
.desk .map{aspect-ratio:4/3;min-height:220px;border-radius:4px;overflow:hidden;background:var(--ph-bg)}
.desk .map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.desk .flow .txt h2{margin-top:10px}.desk .flow .txt p{color:var(--mute);max-width:60ch;margin-top:12px}
.timeline{list-style:none;margin:36px 0 0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line);position:relative}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline .tl-ico{width:104px;height:78px;display:block;overflow:visible;margin-top:4px}.hb-icons polygon,.hb-icons polyline{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.hb-icons polyline{fill:none}.timeline .lab{color:var(--acc-ink)}
.timeline h3{margin-top:6px}.timeline p{color:var(--mute);font-size:14px;margin-top:6px;max-width:52ch}
.desk .qs{margin-top:72px}.desk .faq{margin-top:20px}

/* ---------- Blog (Spread) + single post ---------- */
.hero-blog{height:min(60vh,600px);min-height:380px}
.hero-blog h1.mast{font-size:clamp(44px,6vw,84px);line-height:.95;letter-spacing:-.03em;font-weight:700;margin-top:10px;max-width:none}
.hero-blog .cats{color:rgba(255,255,255,.8);margin-top:14px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.spread{display:grid;grid-template-columns:2fr 1fr;gap:64px;align-items:start}
.feat-pic{aspect-ratio:16/10;min-height:0}
.meta{display:flex;gap:14px;flex-wrap:wrap;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:12px;border:0;padding:0}
.meta.light{color:var(--mist)}
.cat{color:var(--acc-ink)}.postband .cat{color:var(--acc)}
.feature h2{font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.025em;margin-top:14px;max-width:none}
.feature h2 a{color:var(--fg);text-decoration:none}
.feature .deck{font:500 17px/1.5 var(--display);color:var(--fg);margin-top:16px;max-width:58ch}
.dropcap{color:var(--mute);margin-top:18px;max-width:62ch;columns:2;column-gap:32px;font-size:14px}
.dropcap::first-letter{float:left;font:700 64px/.85 var(--display);padding:8px 10px 0 0;color:var(--fg)}
.feature .btn{margin-top:22px}
.latest{position:sticky;top:calc(var(--hdr-h) + 40px)}
.lh{padding-bottom:10px;border-bottom:1.5px solid var(--fg)}
.li{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);align-items:start}
.thumb{min-height:66px;aspect-ratio:4/3;padding:6px;font-size:8px}
.li b{display:block;font:600 14px/1.3 var(--display);margin-top:4px}
.li small{display:block;color:var(--mute);font-size:11.5px;margin-top:4px}
.li .cat{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.stories{border-top:1px solid var(--line)}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1.5px solid var(--fg)}
.bgrid{grid-template-columns:repeat(3,1fr);gap:32px 24px;margin-top:32px}
.bgrid .card{border:0;border-radius:0;cursor:default;display:grid;gap:0;overflow:visible}
.bgrid .card:hover{transform:none;border:0}
.bgrid .card>a{display:block}.story-pic{aspect-ratio:4/3;border-radius:4px}
.bgrid .card .cb{padding:14px 0 0}
.bgrid .card h3{font-size:19px;line-height:1.25;margin-top:10px;letter-spacing:-.015em}
.bgrid .card h3 a{color:var(--fg);text-decoration:none}.bgrid .card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.bgrid .card p{font-size:13.5px;color:var(--mute);margin-top:8px;-webkit-line-clamp:3}
.bgrid .card .meta{margin-top:0}
.bgrid .card[hidden]{display:none}
.quote{padding:96px 0;background:var(--midnight);color:#fff;text-align:center}
.quote p{font:500 clamp(22px,2.6vw,34px)/1.3 var(--display);letter-spacing:-.015em;max-width:26ch;margin:0 auto}
.quote .lab{display:block;margin-top:22px;color:var(--mist)}
.news{padding:72px 0;border-top:1px solid var(--line)}
.news .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.news h2{max-width:22ch;font-size:clamp(22px,2.2vw,28px);margin-top:10px}
.nlf{display:flex;gap:10px;border-bottom:1.5px solid var(--fg);padding-bottom:10px;flex-wrap:wrap;align-items:center}
.nlf input[type=email]{flex:1;min-width:200px;border:0;background:transparent;font:400 16px/1.3 var(--body);color:var(--fg)}
.nlf input:focus{outline:none}
.nlf .msg{flex-basis:100%}
.postband{background:var(--midnight);color:#fff;padding:64px 0 48px}
.postband h1{color:#fff;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.025em;margin-top:12px;max-width:22ch}
.postband .lab{color:var(--mist)}
.postband .back{display:inline-block;margin-top:22px;color:var(--mist);text-decoration:none;font-size:13px}
.postband .back:hover{color:#fff}
.article .col{max-width:820px}
.lead-pic{aspect-ratio:16/9;margin-bottom:32px}
.prose{font-size:16px;line-height:1.7;color:var(--fg)}
.prose p{margin:0 0 18px;color:var(--fg)}.prose h2,.prose h3{margin:36px 0 12px}.prose img{height:auto;border-radius:4px}.prose blockquote{margin:24px 0;padding-left:16px;border-left:2px solid var(--acc);color:var(--mute);font:500 18px/1.5 var(--display)}
.prose .sharedaddy,.prose .jp-relatedposts{display:none}
.prose h2{margin-top:48px}.prose h3{font-size:18px;line-height:1.3}.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}.prose li{margin:0 0 8px}.prose li::marker{color:var(--acc-ink)}
.prose a{color:var(--acc-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.prose a:hover{color:var(--fg)}
.prose p>img:only-child,.prose .blog-post__img-wide500{display:block;width:100%;margin:12px 0 10px}
.prose figure{margin:0}.prose figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--mute)}
.blog-post__img-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}.blog-post__img-pair img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.clk-table{width:100%;border-collapse:collapse;margin:24px 0 30px;font-size:14px;line-height:1.5}
.clk-table th{text-align:left;vertical-align:bottom;padding:0 12px 10px;border-bottom:1px solid var(--fg);font:500 10.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.clk-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.clk-table th:first-child,.clk-table td:first-child{padding-left:0}.clk-table td:first-child{font-weight:600}
.clk-faq__title{margin-top:64px}.clk-faq{margin-top:20px}
.clk-faq__item{border-top:1px solid var(--line);padding:14px 0}.clk-faq__item:last-child{border-bottom:1px solid var(--line)}
.clk-faq__q{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:600 15px/1.35 var(--display)}.clk-faq__q::-webkit-details-marker{display:none}
.clk-faq__q::after{content:"+";font:400 20px/1 var(--mono);color:var(--acc-ink)}.clk-faq__item[open] .clk-faq__q::after{content:"–"}
.clk-faq__a p{margin:10px 0 0;max-width:64ch;color:var(--mute);font-size:14px}
@media(max-width:640px){.clk-table thead{display:none}.clk-table,.clk-table tbody,.clk-table tr,.clk-table td{display:block;width:100%}.clk-table tr{padding:10px 0;border-bottom:1px solid var(--line)}.clk-table td,.clk-table td:first-child{display:grid;grid-template-columns:38% 1fr;gap:12px;padding:4px 0;border:0}.clk-table td::before{content:attr(data-label);font:500 10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.clk-table td:first-child{font-size:15px}.blog-post__img-pair{grid-template-columns:1fr}}
/* single product */
.pdetail .two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pmedia{display:grid;gap:12px}.pmedia .main{aspect-ratio:4/3}
.pdetail h2{margin-top:0}.pdetail .mute{margin-top:10px}
.related{border-top:1px solid var(--line)}.related .grid{margin-top:32px;grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.proof-pic{min-height:0}.fhero .wrap{grid-template-columns:1fr}.board{grid-template-columns:1fr 1fr}.xsec .wrap{grid-template-columns:1fr;gap:32px}.stick{position:static}.chap{min-height:0}.nums{grid-template-columns:repeat(3,1fr)}.sampler{grid-template-columns:1fr}.famgrid{grid-template-columns:1fr 1fr}.morecard{grid-template-columns:1fr;padding:28px 24px;gap:28px}.proof,.custom{grid-template-columns:1fr}.xl{grid-template-columns:1fr}.guide .wrap,.desk .wrap{grid-template-columns:1fr;gap:32px}.desk .side{position:static}.spread{grid-template-columns:1fr}.latest{position:static}.bgrid{grid-template-columns:1fr 1fr}.pdetail .two{grid-template-columns:1fr}.related .grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.vars,.famgrid{grid-template-columns:1fr 1fr}.bgrid,.related .grid{grid-template-columns:1fr}.certgrid,.classa,.notes,.charts,.vids,.covers,.guidecard,.news .wrap{grid-template-columns:1fr}.timeline li{grid-template-columns:1fr}.tests{columns:1}.nums{grid-template-columns:1fr 1fr}.dropcap{columns:1}.cflow{grid-template-columns:1fr}.cflow .arr{transform:rotate(90deg);justify-self:center}}

/* ---------- Galleries (Projects) ---------- */
.hero-gal{height:min(66vh,620px);min-height:400px}
.hero-gal>.pic img{object-position:50% 60%}
.tile{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--ph-bg);cursor:zoom-in;border:0;padding:0;text-align:left;font-family:var(--body);color:#fff;width:100%}
.tile .pic{position:absolute;inset:0;border-radius:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile .pic::after{box-shadow:none}
.tile:hover .pic{transform:scale(1.035)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;background:linear-gradient(180deg,rgba(11,22,38,0),rgba(11,22,38,.78));opacity:0;transition:opacity .25s;font-size:12.5px;line-height:1.4;pointer-events:none}
.tile .cap b{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
.tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,20,32,.08);pointer-events:none}
.gfeat{background:var(--midnight);color:#fff;padding:64px 0 40px}
.gfeat .lab{color:var(--mist)}.gfeat .txt h2{color:#fff;margin-top:10px}.gfeat .txt p{color:var(--mist);margin-top:12px;max-width:56ch}
.catbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:56px}
.gcat{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid rgba(255,255,255,.45);border-radius:2px;color:#fff;text-decoration:none;font:600 13px/1 var(--body);letter-spacing:.01em;transition:background .2s,color .2s,border-color .2s}
.gcat::after{content:"\2193";font:400 13px/1 var(--display);opacity:.6;transition:transform .25s,opacity .2s}
.gcat:hover{background:#fff;color:var(--midnight);border-color:#fff}.gcat:hover::after{transform:translateY(2px);opacity:1}
.gcat.on{border-color:var(--acc);color:var(--acc)}
.projects{display:grid;margin-top:48px}
.proj{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;padding:40px 0;border-top:1px solid rgba(255,255,255,.14)}
.proj:first-child{border-top:0;padding-top:8px}
.proj.r>.tile{order:2}
.proj>.tile{aspect-ratio:16/10;background:#142035}
.proj .pt{display:grid;gap:10px;align-content:center}
.proj .pt .lab{color:var(--acc)}
.proj h3{font-size:clamp(22px,2.2vw,28px);color:#fff;letter-spacing:-.01em;line-height:1.15}
.proj p{color:var(--mist);max-width:44ch}
.proj .thumbs{display:flex;gap:8px;margin-top:6px}
.proj .thumbs .tile{width:104px;height:78px;border-radius:3px}
.proj .plink{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:600 13px/1 var(--body);margin-top:8px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:6px;width:max-content}
.proj .plink:hover{color:var(--acc);border-color:var(--acc)}
.reels{padding:88px 0 40px}
.reel-sec{padding:0 0 56px;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.reel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.reel-head h2{margin-top:8px}
.reel-head .mute{margin-top:8px;max-width:60ch}
.reel-head .cnt{display:block;margin-top:10px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.reel-nav{display:flex;gap:6px;flex:0 0 auto}
.reel-nav button{appearance:none;width:38px;height:38px;border:1px solid var(--fg);background:#fff;border-radius:3px;cursor:pointer;font:400 18px/1 var(--display);color:var(--fg)}
.reel-nav button:hover{border-color:var(--acc-ink);color:var(--acc-ink)}
.reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.reel::-webkit-scrollbar{display:none}
.reel .tile{flex:0 0 auto;height:320px;scroll-snap-align:start;width:calc(320px * var(--ar,1.333))}
.reel .tile .cap{opacity:1;background:linear-gradient(180deg,rgba(11,22,38,0),rgba(11,22,38,.7));padding-top:48px}
.reel-full{flex:0 0 auto;width:220px;height:320px;border:0;border-radius:4px;background:var(--midnight);color:#fff;display:grid;place-items:center;text-align:center;padding:24px;font:600 14px/1.4 var(--display);scroll-snap-align:start;cursor:pointer}
.reel-full small{display:block;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--mist);margin-top:10px;text-transform:uppercase}
.reel-full:hover{background:#142035}
.reel-empty{flex:1 0 auto;min-height:220px}
.sample-band{background:var(--midnight);color:#fff;padding:88px 0}
.sample-band .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.sample-band .lab{color:var(--mist)}.sample-band h2{color:#fff;margin-top:10px;max-width:20ch}.sample-band p{color:var(--mist);margin-top:12px;max-width:52ch}
.sample-band .acts{margin-top:0;justify-content:flex-end}
.sample-band .btn.white{background:#fff;border-color:#fff;color:var(--fg)}.sample-band .btn.white:hover{background:var(--acc);border-color:var(--acc);color:var(--midnight)}
.sample-band+.contact-sec{padding-top:96px}
.glb{position:fixed;inset:0;z-index:300;background:rgba(11,22,38,.96);display:none;align-items:center;justify-content:center;flex-direction:column;padding:56px 72px 40px;color:#fff}
.glb.open{display:flex}
.glb img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;border-radius:3px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.glb .lcap{margin-top:16px;text-align:center;max-width:70ch;font-size:14px}
.glb .lcap b{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.glb button{appearance:none;border:1px solid rgba(255,255,255,.35);background:rgba(11,22,38,.6);color:#fff;cursor:pointer;border-radius:3px;font:300 26px/1 var(--display);width:44px;height:44px;display:grid;place-items:center;position:absolute}
.glb button:hover{border-color:#fff}
.glb .x{top:18px;right:20px}.glb .pv{left:16px;top:50%;transform:translateY(-50%)}.glb .nx{right:16px;top:50%;transform:translateY(-50%)}
.glb .ctr{position:absolute;top:30px;left:24px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--mist)}
@media(max-width:900px){.proj{grid-template-columns:1fr;gap:20px}.proj.r>.tile{order:0}.reel .tile{height:240px;width:calc(240px * var(--ar,1.333))}.reel-full{height:240px;width:170px}.sample-band .wrap{grid-template-columns:1fr}.sample-band .acts{justify-content:flex-start}.reel-head{flex-direction:column;align-items:flex-start}}
@media(max-width:700px){.glb{padding:64px 12px 24px}.glb .pv{left:6px}.glb .nx{right:6px}.glb img{max-height:calc(100vh - 200px)}}
@media(max-width:560px){.catbar{display:grid;grid-template-columns:1fr}.gcat{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.tile .pic{transition:none}}

/* consent line under lead forms */
.consent{font-size:12px;line-height:1.5;color:var(--mute);margin:0 0 10px}.form .consent,.tail .form .consent{color:var(--mist)}.aform .consent{grid-column:1/-1}.frm .consent{margin-top:12px}

/* ---------- phone scroll behaviour (2026-10-26): the moving piece stays on screen while the copy scrolls under it ---------- */
html:has(body.clicklad-home){scroll-snap-type:y proximity;scroll-padding-top:var(--hdr-h)}
@media(max-width:1000px){
  /* Finishes · four-stage board: clip sticks under the header, chapters scroll beneath and change its stage; chapters snap into place */
  html:has(body.clicklad-finishes){scroll-snap-type:y proximity}
  .xsec .wrap{display:block}
  .stick{position:sticky;top:var(--hdr-h);z-index:5;background:#fff;padding:10px 0 12px;box-shadow:0 14px 18px -16px rgba(11,22,38,.35)}
  .stick .clip,.stick .clip.has-render{aspect-ratio:auto;height:min(30vh,250px)}
  .stick .stagebar{margin-top:12px}
  .chap{min-height:58vh;padding:32px 0;scroll-snap-align:start;scroll-margin-top:calc(var(--hdr-h) + min(30vh,250px) + 64px)}
  /* Finishes · sampler: the clip stays put while a finish is picked */
  .sampler{display:block}
  .sampler .stage{position:sticky;top:var(--hdr-h);z-index:5;background:#fff;padding:10px 0 12px;margin-bottom:18px;box-shadow:0 14px 18px -16px rgba(11,22,38,.35)}
  .sampler .stage .clip,.sampler .stage .clip.has-render{aspect-ratio:auto;height:min(28vh,230px)}
  /* About · the chapter index becomes a sticky pill rail that follows the reader */
  .chapters .wrap{display:block}
  .index{position:sticky;top:var(--hdr-h);z-index:5;background:#fff;margin-bottom:28px;border-bottom:1px solid var(--line)}
  .index .lab{display:none}
  .index nav{display:flex;gap:22px;margin-top:0;border-top:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .index nav::-webkit-scrollbar{display:none}
  .ci{flex:0 0 auto;white-space:nowrap;padding:14px 0 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
  .ci.on{border-bottom-color:var(--acc)}
  .flow article{scroll-margin-top:calc(var(--hdr-h) + 60px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none!important}}

/* ---------- Home photo bands: .band .panel shares a class with the sample drawer (.panel, fixed + translated + hidden); undo that here ---------- */
.band .panel{position:relative;top:auto;right:auto;bottom:auto;width:auto;transform:none;visibility:visible;z-index:1;display:block;transition:none}

/* ---------- phone system (2026-10-27): one rhythm, images sized to the screen, 44px targets ---------- */
@media(max-width:900px){
  /* photo bands stack: 4:3 photo, white card overlapping its bottom edge */
  .band{display:block;min-height:0;padding-bottom:28px}
  .band>.pic{position:relative;inset:auto;aspect-ratio:4/3;width:100%}
  .band .wrap{display:block;padding-top:0;padding-bottom:0}
  .band .panel,.band.r .panel{max-width:none;margin:-44px 0 0;padding:24px 20px 26px}
  /* Resources: block layout so the sticky chapter rail can never widen the page */
  .guide .wrap,.desk .wrap{display:block}
  .index{min-width:0;max-width:100%}.index nav{max-width:100%}
}
@media(max-width:700px){
  /* heroes: enough photo to set the scene, not a whole screen */
  .util{display:none}
  .hero-b{height:min(76vh,600px);min-height:480px}.hero-b .cap{padding-bottom:36px}
  .hero-p,.hero-about,.hero-contact,.hero-products,.hero-blog{height:min(50vh,440px);min-height:320px}
  .clicklad-page .hero-p{height:min(38vh,320px);min-height:240px}
  .hero-p .cap{padding-bottom:30px}
  .hero-b .cap .lab,.hero-p .cap .lab{font-size:10.5px;letter-spacing:.1em;line-height:1.45;padding:7px 11px}
  .hero-p .cap .lede{font-size:14px;margin-top:10px}
  /* section rhythm */
  .sec,.fin,.tail,.why-band,.quote,.sample-band,.contact-sec,.strip,.news{padding-top:56px;padding-bottom:56px}
  .chapters,.desk,.guide{padding:48px 0 24px}
  .apps-head{padding:56px 0 28px}.numsec{padding:40px 0}.foot{padding:48px 0 22px}.foot .g2{gap:24px}
  /* Home */
  .stats{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr;gap:20px 16px}
  .sw{grid-template-columns:repeat(4,1fr);gap:6px}.sw div{font-size:9px;padding:6px;letter-spacing:.03em}
  .apps-b a{min-height:250px;padding:22px 20px}
  /* Products: two-up catalogue, filters as swipe rows */
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card>.pic,.card>.ph{min-height:0}
  .card .cb{padding:10px 11px 12px;gap:3px}
  .card h3{font-size:13.5px;line-height:1.25}
  .card p{font-size:11.5px;line-height:1.4}
  .tags{gap:4px}.tags span{font-size:8.5px;padding:3px 5px;letter-spacing:.04em}
  .filters{padding:12px 0;margin-top:14px}
  .frow.sub{display:grid;gap:8px}
  .fgroup{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin:0 -20px;padding:2px 20px 6px}
  .fgroup::-webkit-scrollbar{display:none}
  .fgroup>*{flex:0 0 auto}
  .chip{padding:10px 12px}
  /* Blog: compact list cards (thumb left, title right) instead of a stack of full-width photos */
  .bgrid{gap:0;margin-top:12px}
  .bgrid .card{grid-template-columns:104px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
  .bgrid .story-pic{aspect-ratio:1}
  .bgrid .card .cb{padding:0}
  .bgrid .card h3{font-size:15.5px;line-height:1.3;margin-top:6px}
  .bgrid .card p{display:none}
  /* Resources: covers and certificates two-up, charts three-up, guide photo shallower */
  .covers{grid-template-columns:1fr 1fr;gap:14px}.covers b{font-size:14px}
  .guide-pic{min-height:0;aspect-ratio:3/2}
  .charts{grid-template-columns:repeat(3,1fr);gap:10px}.chart-pic{min-height:0}
  .certgrid{grid-template-columns:1fr 1fr;gap:12px}
  .dl{display:inline-block;padding:12px 0 12px 14px;margin:-12px 0}
  /* Finishes */
  .credit{display:none}
  .fcard .swatch{height:120px}.fcard .body{padding:12px 12px 14px}
  .fcard h3{font-size:15px;flex-wrap:wrap;gap:4px 10px}.fcard h3 span{white-space:nowrap}.fcard p{font-size:12.5px}
  /* tap targets */
  .plink,.more{display:inline-block;padding:10px 0;margin:-6px 0}
  .strip-in a,.office li a{display:inline-block;padding:8px 0;margin:-8px 0}
}
@media(max-width:700px){.bgrid{grid-template-columns:1fr}}

/* Products drawer: a product with no sheet shows no button ([hidden] must beat .btn) */
.pdrawer .btn[hidden]{display:none}

/* Cookie notice (concept B, The Card). Sits below the sample panel and product drawer (z 90+). */
.ck-card{position:fixed;right:24px;bottom:24px;width:360px;z-index:80;background:var(--midnight);color:#fff;border:1px solid var(--midnight-line);box-shadow:0 18px 50px -18px rgba(0,0,0,.6);padding:20px;font-size:14px;line-height:1.5}
.ck-card[hidden]{display:none}
.ck-card .lab{display:block;color:var(--mist);margin-bottom:12px}
.ck-card a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ck-acts{display:flex;gap:8px;margin-top:16px}
.ck-acts .btn{flex:1;justify-content:center}
@media(max-width:600px){.ck-card{left:12px;right:12px;bottom:12px;width:auto}}
@media print{.ck-card{display:none}}