/* ===== G Wraps OC — shared design system v3 ("The Ivory Catalog") ===== */
:root{
  /* paper system — legacy token names preserved so page-level inline CSS flips automatically */
  --bg:#0a0807; --bg2:#100c0b; --surface:#16110f; --surface-2:#1a1615;
  --paper:#0a0807; --paper2:#141110;
  --ink:#f4f2f0; --ink2:#cbc8c7;
  --text:#f4f2f0; --muted:#a8a19c; --dim:#736c67; --faint:#615d5b;
  --line:#2a2422; --line2:#3a332f; --rule:#211e1d; --rule2:#1a1817;
  --red:#c0392b; --red-hi:#d94436; --red-deep:#8b0000; --red-hover:#d94436;
  --disp:'Bebas Neue',Impact,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --exp:'Archivo Expanded','Archivo Black',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif; --label:'Barlow Condensed',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --pad:clamp(20px,5vw,64px);
}
/* transitions-dev universal tokens */
:root{
  --shake-distance:6px; --shake-overshoot:4px; --shake-dur-a:80ms; --shake-dur-b:60ms;
  --shake-ease:cubic-bezier(0.22,1,0.36,1); --revert-hold:3000ms; --revert-dur:280ms;
  --check-opacity-dur:550ms; --check-rotate-dur:550ms; --check-rotate-from:80deg;
  --check-bob-dur:450ms; --check-y-amount:40px; --check-blur-dur:500ms; --check-blur-from:10px;
  --check-path-dur:550ms; --check-path-delay:80ms;
  --check-ease-out:cubic-bezier(0.22,1,0.36,1); --check-ease-opacity:cubic-bezier(0.22,1,0.36,1);
  --check-ease-rotate:cubic-bezier(0.22,1,0.36,1); --check-ease-bob:cubic-bezier(0.34,1.35,0.64,1);
  --check-ease-path:cubic-bezier(0.22,1,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1340px;margin:0 auto;padding:0 var(--pad)}
img{display:block;max-width:100%}

/* paper grain (injected by fx.js) */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.skip{position:fixed;top:-60px;left:16px;z-index:300;background:var(--red);color:#fff;font-family:var(--label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;padding:12px 20px;transition:top .2s var(--ease)}
.skip:focus-visible{top:16px}

/* buttons — print style (selector names preserved) */
.frost{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13.5px;color:var(--ink);padding:16px 28px;background:transparent;border:1px solid var(--line2);border-radius:8px;cursor:pointer;transition:background .22s var(--ease),color .22s,border-color .22s,transform .16s var(--ease)}
.frost:hover{background:var(--ink);color:var(--paper)}
.frost:active{transform:scale(.96)}
.frost.red{background:var(--red);border-color:var(--red);color:#fff}
.frost.red:hover{background:var(--red-hover)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--rule);padding-bottom:4px;transition:color .2s,border-color .2s}
.tlink:hover{color:var(--red);border-color:var(--red)}

/* header → assets/header.css (shared) */

/* inner-page hero — full-bleed dark photographic SPREAD within the catalog */
.phero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line2);background:#111}
.phero .bg{position:absolute;inset:0;z-index:0}
.phero .bg img,.phero .bg video{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:brightness(.78) contrast(1.05) saturate(1.04)}
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,9,8,.82),rgba(10,9,8,.30) 55%,rgba(10,9,8,.05) 90%),linear-gradient(0deg,rgba(10,9,8,.78) 2%,transparent 50%)}
.phero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:clamp(40px,6vh,72px)}
.phero,.phero h1{color:#f4f3f1;letter-spacing:.012em}
.crumb{font-family:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:#b9b4a8;margin-bottom:22px}
.crumb a{opacity:.75}.crumb a:hover{opacity:1;color:var(--red)}.crumb span{color:#e6a79e}
.phero .eyebrow{font-family:var(--label);font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:12.5px;color:#e8e5dd;margin-bottom:18px;display:flex;align-items:center;gap:13px}
.phero .eyebrow::before{content:"";width:40px;height:1px;background:var(--red)}
.phero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(36px,6.4vw,98px);line-height:.92;letter-spacing:-.012em;text-wrap:balance}
.phero h1 span{color:#e25b4a}
.phero h1 .ghost{color:transparent;-webkit-text-stroke:1.4px rgba(244,243,241,.85)}
.phero p.sub{font-size:clamp(15px,1.4vw,17.5px);color:#d8d4ca;max-width:540px;margin:24px 0 34px;text-wrap:pretty}
.phero .cta{display:flex;gap:14px;flex-wrap:wrap}
.phero .frost{border-color:#f4f3f1;color:#f4f3f1}
.phero .frost:hover{background:#f4f3f1;color:var(--ink)}
.phero .frost.red{background:var(--red);border-color:var(--red);color:#fff}
.phero .frost.red:hover{background:var(--red-hover)}

/* sections */
.sec{padding:clamp(72px,10vw,128px) 0;border-top:1px solid var(--rule)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;margin-bottom:clamp(32px,5vh,52px)}
.shead .eyebrow,.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:11px;color:var(--muted);margin-bottom:18px}
.shead .eyebrow::before,.eyebrow::before{content:"";width:34px;height:1px;background:var(--red)}
.shead h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(36px,5.6vw,76px);line-height:.9;letter-spacing:.014em;color:var(--ink);text-wrap:balance}
.shead h2 span{color:var(--red)}
.shead h2 .ghost{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.shead p{color:var(--muted);max-width:380px;font-size:15px;line-height:1.7;text-wrap:pretty}

/* trust bar — print rule strip */
.trust{background:var(--paper);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);position:relative}
.trust::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--line2)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:18px var(--pad)}
.trust .it{font-family:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}
.trust .it b{color:var(--ink);font-weight:700}
.trust .it::before{content:"";width:6px;height:6px;background:var(--red);border-radius:50%}

/* cards — bordered catalog cells */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line2)}
.card{border-right:1px solid var(--rule);background:transparent;padding:34px 30px;position:relative;overflow:hidden;transition:background .25s var(--ease)}
.card:last-child{border-right:0}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--red);transition:width .45s var(--ease)}
.card:hover{background:var(--paper2)}
.card:hover::before{width:100%}
.card .n{font-family:var(--label);font-weight:600;letter-spacing:.18em;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.card h3{font-family:var(--disp);font-weight:400;font-size:25px;text-transform:uppercase;margin:16px 0 10px;line-height:1.05;color:var(--ink);text-wrap:balance;letter-spacing:.01em}
.card p{color:var(--muted);font-size:14px;line-height:1.65;text-wrap:pretty}
.card.feat{background:linear-gradient(160deg,rgba(192,57,43,.07),transparent)}

/* gallery — captioned plates */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal .it{position:relative;overflow:hidden;border:1px solid var(--line2);aspect-ratio:1;cursor:pointer;background:#111}
.gal .it.wide{grid-column:span 2;aspect-ratio:2/1}
.gal .it img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal .it:hover img{transform:scale(1.05)}
.gal .cap{position:absolute;left:0;bottom:0;width:100%;padding:30px 18px 14px;background:linear-gradient(transparent,rgba(10,9,8,.88));opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.gal .it:hover .cap{opacity:1;transform:none}
.gal .cap .s{font-family:var(--label);font-weight:600;letter-spacing:.22em;font-size:10.5px;color:#e6a79e;text-transform:uppercase}
.gal .cap,.gal .cap *{color:#f4f3f1}

/* warranty badges — spec cells, ink numerals */
.warr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line2)}
.wb{border-right:1px solid var(--rule);padding:clamp(28px,4vh,46px) 24px;text-align:center;transition:background .25s}
.wb:last-child{border-right:0}
.wb:hover{background:var(--paper2)}
.wb .big{font-family:var(--disp);font-size:clamp(50px,6vw,86px);line-height:.92;color:var(--ink);transition:color .3s;font-variant-numeric:tabular-nums}
.wb:hover .big{color:var(--red)}
.wb .u{font-family:var(--label);font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--ink);text-transform:uppercase;margin-top:12px}
.wb .t{margin-top:6px;font-family:var(--label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--muted)}

/* faq */
.faq{max-width:860px;margin:0 auto}
details{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:26px 0;font-family:var(--disp);font-weight:400;font-size:24px;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .2s}
summary:hover{color:var(--red)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--red);font-family:var(--body);font-weight:300;font-size:28px;transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);font-size:15px;line-height:1.75;padding:0 0 26px;max-width:760px;text-wrap:pretty}

/* cta band — catalog finale */
.ctaband{border-top:1px solid var(--rule);position:relative;text-align:center;background:var(--paper)}
.ctaband .inner{padding:clamp(84px,12vw,150px) 0}
.ctaband h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(46px,7.4vw,116px);line-height:.88;letter-spacing:.012em;color:var(--ink);text-wrap:balance}
.ctaband h2 span{color:var(--red)}
.ctaband h2 .ghost{color:var(--faint)}
.ctaband p{color:var(--muted);font-size:16px;margin:22px auto 36px;max-width:480px;text-wrap:pretty}
.ctaband .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ticker / marquee — print rule strip */
.marq{border-block:1px solid var(--line2);padding:13px 0;overflow:hidden;background:var(--paper);position:relative}
.marq::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--line2)}
.marq .track{display:flex;width:max-content}
@media(prefers-reduced-motion:no-preference){.marq .track{animation:marq 36s linear infinite}.marq.paused .track{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{font-family:var(--label);font-weight:600;letter-spacing:.26em;text-transform:uppercase;font-size:13px;white-space:nowrap;padding-right:18px;color:var(--ink2)}
.marq span.o{color:var(--faint)}
.marq span.dot{color:var(--red)}

/* footer — colophon */
footer{border-top:1px solid var(--line2);background:var(--paper)}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding:clamp(44px,7vh,68px) var(--pad) 38px;max-width:1340px;margin:0 auto}
footer .b1{font-family:var(--exp);font-weight:700;letter-spacing:.06em;font-size:17px;margin-bottom:14px;display:inline-block;color:var(--ink)}
footer .b1 span{color:var(--red)}
footer p{color:var(--muted);font-size:14px;line-height:1.8}
footer .red{color:var(--red);font-family:var(--label);font-weight:600;letter-spacing:.16em;font-size:15px}
footer h5{font-family:var(--label);font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:11.5px;color:var(--faint);margin-bottom:16px}
footer a.fl{display:block;color:var(--ink2);font-size:14.5px;padding:5px 0;transition:color .15s,transform .25s var(--ease)}
footer a.fl:hover{color:var(--red);transform:translateX(4px)}
.fbar{border-top:1px solid var(--rule);max-width:1340px;margin:0 auto;padding:18px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:10.5px;color:var(--faint)}

/* reveal */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-rv].in{opacity:1;transform:none}

@media(max-width:900px){
  /* header mobile → assets/header.css */
  .cards{grid-template-columns:1fr}.card{border-right:0;border-bottom:1px solid var(--rule)}.card:last-child{border-bottom:0}
  .warr-grid{grid-template-columns:1fr 1fr}
  .wb{border-bottom:1px solid var(--rule)}.wb:nth-child(even){border-right:0}.wb:nth-child(3),.wb:nth-child(4){border-bottom:0}
  .gal{grid-template-columns:1fr 1fr}.gal .it.wide{grid-column:span 2}
  footer .fgrid{grid-template-columns:1fr 1fr}
}
@keyframes mnav{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){[data-rv]{opacity:1!important;transform:none!important}#hdr.menu-open nav>*{animation:none!important}.marq .track{animation:none!important}}

/* sticky mobile call/text bar + desktop floating quote */
.sticky-cta{position:fixed;left:0;bottom:0;width:100%;z-index:95;display:none;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);padding-bottom:env(safe-area-inset-bottom)}
.sticky-cta a{padding:16px;text-align:center;font-family:var(--label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:14px;background:var(--paper);color:var(--ink)}
.sticky-cta a.call{background:var(--red);color:#fff}
.float-quote{position:fixed;right:24px;bottom:24px;z-index:95;background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:720px){.sticky-cta{display:grid}.float-quote{display:none}}

/* before / after drag-to-reveal slider */
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line2);touch-action:none;user-select:none;cursor:ew-resize;max-width:1000px;margin:0 auto;background:#111}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba .before{filter:grayscale(1) brightness(.66) contrast(.92);clip-path:inset(0 50% 0 0)}
.ba .balbl{position:absolute;top:14px;z-index:3;font-family:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;color:#fff;background:rgba(10,9,8,.6);padding:6px 12px}
.ba .balbl.b{left:14px}.ba .balbl.a{right:14px;background:var(--red)}
.ba .badiv{position:absolute;top:0;bottom:0;width:2px;background:var(--red);left:50%;z-index:2;pointer-events:none}
.ba .bahandle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:15px;pointer-events:none;box-shadow:0 4px 16px rgba(22,20,18,.35);border:2px solid rgba(255,255,255,.9)}

.ba-note{font-family:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--muted);text-align:center;margin-top:14px}


/* ---------- ivory contrast section (premium light band) ---------- */
.ivory{--bg:#f2efe7;--paper:#f2efe7;--surface:#e8e2d5;--surface-2:#e8e2d5;--paper2:#e8e2d5;--ink:#161412;--text:#161412;--ink2:#3b3833;--muted:#6b665f;--dim:#857f76;--faint:#b0a99c;--line:#16141422;--line2:#16141440;--rule:#16141418;--rule2:#16141210;background:var(--paper);color:var(--ink)}
.ivory .frost{border-color:#161412;color:#161412}
.ivory .frost:hover{background:#161412;color:#f2efe7}
.ivory .frost.red{background:var(--red);border-color:var(--red);color:#fff}

/* blog / article */
.article{max-width:760px;margin:0 auto}
.article .ameta{font-family:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--muted);margin-bottom:30px;display:flex;gap:16px;flex-wrap:wrap}
.article .ameta b{color:var(--red);font-weight:600}
.article .lead{font-size:20px;color:var(--ink);line-height:1.7;margin:0 0 30px;text-wrap:pretty}
.article p{color:var(--ink2);font-size:17px;line-height:1.8;margin:0 0 22px;text-wrap:pretty}
.article p b,.article li b{color:var(--ink)}
.article h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3vw,34px);line-height:1.1;margin:48px 0 18px;color:var(--ink);text-wrap:balance}
.article h2 span{color:var(--red)}
.article h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:20px;margin:34px 0 12px;color:var(--ink)}
.article a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.article ul{margin:0 0 22px;padding:0;list-style:none}
.article li{color:var(--ink2);font-size:17px;line-height:1.7;padding-left:24px;position:relative;margin-bottom:12px}
.article li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--red)}
.article .tl{width:100%;border-collapse:collapse;margin:10px 0 28px;font-size:15px;border:1px solid var(--line2)}
.article .tl th,.article .tl td{border:1px solid var(--rule);padding:13px 16px;text-align:left;color:var(--ink2);vertical-align:top}
.article .tl th{font-family:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--paper2)}
.article blockquote{border-left:3px solid var(--red);padding:4px 0 4px 22px;margin:0 0 26px;font-size:19px;color:var(--ink);font-style:italic}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post-card{border:1px solid var(--line2);background:var(--paper);overflow:hidden;display:flex;flex-direction:column;transition:background .25s var(--ease);text-decoration:none;color:inherit}
.post-card:hover{background:var(--paper2)}
.post-card .ph{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule);background:#111}.post-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .ph img{transform:scale(1.05)}
.post-card .bd{padding:24px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-family:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--red)}
.post-card h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:20px;line-height:1.12;margin:10px 0;color:var(--ink);text-wrap:balance}
.post-card p{color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.post-card .rm{margin-top:16px;font-family:var(--label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--red)}

/* transitions-dev: error state shake */
.t-input{transition:border-color 150ms ease-out;will-change:transform}
.t-input.is-error{transition:border-color var(--revert-dur,280ms) ease-out;border-color:var(--red)!important}
.t-error-msg{opacity:0;visibility:hidden;color:var(--red);font-size:13px;margin-top:7px;transition:opacity var(--revert-dur,280ms) ease-out,visibility 0s linear var(--revert-dur,280ms)}
.t-input-wrap.is-error .t-error-msg{opacity:1;visibility:visible;transition:opacity var(--revert-dur,280ms) ease-out,visibility 0s linear 0s}
.t-input.is-shaking{animation:t-input-shake calc(var(--shake-dur-a)*2 + var(--shake-dur-b)*2) linear}
@keyframes t-input-shake{
  0%{transform:translateX(0);animation-timing-function:var(--shake-ease)}
  28.57%{transform:translateX(var(--shake-distance));animation-timing-function:var(--shake-ease)}
  57.14%{transform:translateX(calc(var(--shake-distance) * -1));animation-timing-function:var(--shake-ease)}
  78.57%{transform:translateX(var(--shake-overshoot));animation-timing-function:var(--shake-ease)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion: reduce){.t-input{animation:none!important;transform:none!important}}

/* transitions-dev: success check */
.t-success-check{display:inline-block;transform-origin:center;opacity:0;will-change:transform,opacity,filter}
.t-success-check svg{display:block;overflow:visible}
.t-success-check svg path{stroke-dasharray:48;stroke-dashoffset:48}
.t-success-check[data-state="in"]{animation:t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards,t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards}
.t-success-check[data-state="in"] svg path{animation:t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay,0ms) forwards}
@keyframes t-check-fade{from{opacity:0}to{opacity:1}}
@keyframes t-check-rotate{from{transform:rotate(var(--check-rotate-from))}to{transform:rotate(0deg)}}
@keyframes t-check-blur{from{filter:blur(var(--check-blur-from))}to{filter:blur(0)}}
@keyframes t-check-bob{from{translate:0 var(--check-y-amount)}to{translate:0 0}}
@keyframes t-check-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.t-success-check{animation:none!important;opacity:1}.t-success-check svg path{animation:none!important;stroke-dashoffset:0!important}}

/* fx layer */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:200;pointer-events:none;will-change:transform}
.card,.svc,.path,.wb,.req-card,.area-card,.post-card,.stp,.pill{transition:transform .4s var(--ease),border-color .3s,box-shadow .35s,background .3s}
@media (prefers-reduced-motion: reduce){.fx-progress{display:none}}

/* urgency banner — print notice strip */
.urgency-bar{position:fixed;top:0;left:0;width:100%;z-index:210;background:#141110;border-bottom:1px solid var(--red-deep);display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 46px 9px 16px;font-family:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:#f2efe7;text-align:center}
.urgency-bar a{color:#e6a79e;text-decoration:underline;text-underline-offset:2px}
.urgency-bar button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#b5afa2;font-size:22px;line-height:1;cursor:pointer;padding:0 6px}
.urgency-bar button:hover{color:#fff}
body.has-urgency #hdr{top:var(--ub-h,40px)}
body.has-urgency .fx-progress{top:var(--ub-h,40px)}
@media(max-width:600px){.urgency-bar{font-size:11px;letter-spacing:.05em}}

/* ============ v5: modern components + transitions (quote.js) ============ */
:root{--modal-ease:cubic-bezier(.22,1,.36,1)}
/* buttons for service/gallery/blog pages (home has its own inline) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13.5px;padding:16px 28px;border-radius:8px;cursor:pointer;transition:background .2s,transform .12s var(--ease),border-color .2s,color .2s;border:1px solid transparent;text-align:center}
.btn.primary{background:var(--red);color:#fff}.btn.primary:hover{background:var(--red-hi)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}.btn.ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.btn:active{transform:scale(.97)}

/* ---- QUOTE MODAL ---- */
.qm-back[hidden],.lb-back[hidden]{display:none!important}
.qm-back{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(6,5,4,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s var(--ease)}
.qm-back.show{opacity:1}
.qm{width:min(520px,100%);max-height:92vh;overflow-y:auto;overflow-x:hidden;background:var(--surface);border:1px solid var(--line2);border-radius:16px;position:relative;transform:scale(.96) translateY(6px);opacity:0;transition:transform .25s var(--modal-ease),opacity .25s var(--modal-ease)}
.qm-back.show .qm{transform:none;opacity:1}
.qm-x{position:absolute;top:12px;right:14px;z-index:2;background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px}.qm-x:hover{color:var(--ink)}
.qm-body{padding:clamp(24px,4vw,38px)}
.qm-steps{display:flex;gap:6px;margin-bottom:20px}.qm-steps span{height:3px;flex:1;background:var(--line2);border-radius:2px;transition:background .3s}.qm-steps span.on{background:var(--red)}
.qm-kick{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.qm-head h3{font-family:var(--disp);font-size:clamp(28px,4vw,40px);text-transform:uppercase;margin:8px 0 20px;line-height:.95}
.qm-track{display:block}
.qm-step{display:none;gap:12px;align-content:start}
.qm-step.qm-on{display:grid;animation:qfade .28s var(--modal-ease)}
@keyframes qfade{from{opacity:0}to{opacity:1}}
.qm label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qm input,.qm select,.qm textarea{width:100%;margin-top:6px;background:#0d0a09;border:1px solid var(--line2);border-radius:8px;color:var(--ink);font-family:var(--body);font-size:15px;padding:12px 13px;transition:border-color .15s}
.qm input:focus,.qm select:focus,.qm textarea:focus{outline:none;border-color:var(--red)}
.qm textarea{resize:vertical}
.qm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qm-nav{display:flex;gap:10px;margin-top:4px}
.qm-honey{position:absolute!important;left:-9999px;width:0;height:0;opacity:0}
.qm .is-error{border-color:var(--red)!important}
.qm .is-shaking{animation:qshake .32s linear}
@keyframes qshake{0%{transform:translateX(0)}28%{transform:translateX(6px)}57%{transform:translateX(-6px)}78%{transform:translateX(4px)}100%{transform:translateX(0)}}
.qm-ok{display:none;text-align:center;padding:16px 0 6px}.qm-ok.on{display:block}
.qm-ok h3{font-family:var(--disp);font-size:32px;text-transform:uppercase;color:var(--red);margin:14px 0 8px}
.qm-ok p{color:var(--muted);font-size:14px}.qm-ok a{color:var(--red)}
.t-check{display:inline-block;transform-origin:center;opacity:0}.t-check svg{display:block;overflow:visible;margin:0 auto}
.t-check svg path{stroke-dasharray:48;stroke-dashoffset:48}
.t-check[data-state="in"]{animation:tcf .55s var(--modal-ease) forwards,tcr .55s var(--modal-ease) forwards}
.t-check[data-state="in"] svg path{animation:tcd .55s var(--modal-ease) .08s forwards}
@keyframes tcf{from{opacity:0}to{opacity:1}}@keyframes tcr{from{transform:rotate(80deg)}to{transform:rotate(0)}}@keyframes tcd{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.qm,.qm-track,.qm-step,.t-check,.qm .is-shaking{transition:none!important;animation:none!important;transform:none!important}.t-check{opacity:1}.t-check svg path{stroke-dashoffset:0!important}}
@media(max-width:520px){.qm-row2{grid-template-columns:1fr}}

/* ---- STAR / REVIEW BADGE ---- */
.rbadge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:100px;padding:8px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink)}
.rbadge .stars{color:var(--red);letter-spacing:.06em}
.rbadge b{color:var(--ink);font-weight:700}

/* ---- BENEFIT CARDS (why) ---- */
.bene{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bene .b{border:1px solid var(--line);border-radius:12px;padding:32px 26px;background:var(--surface)}
.bene .b .ic{font-family:var(--disp);font-size:32px;color:var(--red);line-height:1}
.bene .b h3{font-family:var(--disp);font-size:24px;text-transform:uppercase;margin:16px 0 10px}
.bene .b p{color:var(--muted);font-size:14px;line-height:1.6}

/* ---- PRICE TIERS ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.tier{position:relative;border:1px solid var(--line);border-radius:14px;padding:32px 28px;background:var(--surface);display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .3s}
.tier:hover{transform:translateY(-5px);border-color:var(--line2)}
.tier.pop{border-color:var(--red)}
.tier .flag{position:absolute;top:-11px;left:28px;background:var(--red);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.tier h3{font-family:var(--disp);font-size:26px;text-transform:uppercase;line-height:1}
.tier .price{font-family:var(--disp);font-size:clamp(40px,4.6vw,56px);line-height:.9;margin:14px 0 4px;font-variant-numeric:tabular-nums}
.tier .price .from{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.tier .price .amt{color:var(--ink)}.tier.pop .price .amt{color:var(--red)}
.tier ul{list-style:none;margin:18px 0 24px;display:grid;gap:10px;flex:1}
.tier li{font-size:14px;color:var(--muted);padding-left:24px;position:relative;line-height:1.5}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:700}
.tier .note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:12px;text-align:center}

/* ---- WORK RAIL + LIGHTBOX ---- */
.wrail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,30vw,360px);gap:16px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:12px}
.wrail::-webkit-scrollbar{height:6px}.wrail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.wtile{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:pointer;scroll-snap-align:start;isolation:isolate}
.wtile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.wtile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,6,5,.9),transparent 55%)}
.wtile:hover img{transform:scale(1.06)}
.wtile .cap{position:absolute;left:0;bottom:0;padding:16px}
.wtile .cap .t{font-family:var(--disp);font-size:18px}.wtile .cap .c{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.wtile .zoom{position:absolute;top:12px;right:12px;z-index:1;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:15px}
.lb-back{position:fixed;inset:0;z-index:310;background:rgba(6,5,4,.92);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:20px;opacity:0;transition:opacity .2s}
.lb-back.show{opacity:1}
.lb-fig{margin:0;max-width:min(1100px,92vw);max-height:88vh;justify-self:center;text-align:center}
.lb-fig img{max-width:100%;max-height:82vh;border-radius:10px;transition:opacity .12s}
.lb-fig figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.lb-x{position:fixed;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.lb-prev,.lb-next{background:rgba(255,255,255,.08);border:1px solid var(--line2);color:#fff;width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer;transition:background .2s}.lb-prev:hover,.lb-next:hover{background:var(--red)}

/* ---- REVIEWS ---- */
.revs2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev2{border:1px solid var(--line);border-radius:12px;padding:28px 26px;background:var(--surface)}
.rev2 .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rev2 .stars{color:var(--red);font-size:14px;letter-spacing:.06em}
.rev2 .plat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rev2 blockquote{font-size:15px;line-height:1.6;color:#e2ddd9}
.rev2 .by{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:16px}

/* ---- ANIMATED ACCORDION ---- */
.acc{max-width:840px;margin:0 auto;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-family:var(--disp);font-size:20px;text-transform:uppercase;color:var(--ink);transition:color .2s}
.acc-q:hover{color:var(--red)}
.acc-q::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:
  linear-gradient(var(--red),var(--red)) center/14px 2px no-repeat,
  linear-gradient(var(--red),var(--red)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.acc-item.open .acc-q::after{transform:translateY(-50%) rotate(90deg);background:linear-gradient(var(--red),var(--red)) center/14px 2px no-repeat}
.acc-a{height:0;overflow:hidden;transition:height .32s var(--ease)}
.acc-a .inner{padding:0 0 24px;color:var(--muted);font-size:15px;line-height:1.7;max-width:760px}
@media(prefers-reduced-motion:reduce){.acc-a{transition:none}.tier,.wtile img{transition:none}}

@media(max-width:900px){.bene,.tiers,.revs2{grid-template-columns:1fr}.tier.pop{order:-1}}

/* stat grid (About) — compact, never a carousel */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ===== carousels (reviews mobile swipe + rail drag) ===== */
.car-dots{display:none;gap:9px;justify-content:center;margin-top:20px}
.car-dots button{width:8px;height:8px;border-radius:50%;background:var(--line2);border:0;padding:0;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
.car-dots button.on{background:var(--red);transform:scale(1.35)}
.wrail,.rail{cursor:grab}
.wrail.dragging,.rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.wrail.dragging a,.rail.dragging a{pointer-events:none}
@media(max-width:900px){
  .revs2,.tiers,.bene{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .revs2::-webkit-scrollbar,.tiers::-webkit-scrollbar,.bene::-webkit-scrollbar{display:none}
  .revs2>.rev2{flex:0 0 100%;scroll-snap-align:center}
  .tiers>.tier{flex:0 0 84%;scroll-snap-align:center}
  .bene>.b{flex:0 0 84%;scroll-snap-align:center}
  .tiers>.tier:first-child,.bene>.b:first-child{margin-left:2px}
  .car-dots{display:flex}
  /* stat grid (About) stays a compact 2-col — not a carousel */
  .statgrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px}
}
@media(prefers-reduced-motion:reduce){.car-dots button{transition:none}}

/* tighter spacing on phones — less scroll (desktop unchanged) */
@media(max-width:700px){
  .phero{min-height:60vh}
  .phero .wrap{padding-top:104px}
  .sec{padding:52px 0}
  .tier{padding:26px 22px}
  .bene .b{padding:28px 22px}
  .shead{margin-bottom:26px}
}