:root{
  --char:#13201a;--char-2:#1a2b22;--char-3:#24362c;
  --copper:#c1763a;--copper-light:#e0975c;--copper-deep:#9c5a28;
  --cream:#f4ede1;--cream-2:#ece2d2;--sand:#e0d4bf;
  --ink:#101510;--muted:#8a9388;--line:rgba(244,237,225,.13);
  --serif:"Fraunces",Georgia,serif;--sans:"Hanken Grotesk",-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden;height:100vh}
::selection{background:var(--copper);color:var(--cream)}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
a{color:inherit}
img{display:block;max-width:100%}

/* ---------- LOADER ---------- */
#loader{position:fixed;inset:0;z-index:10000;background:var(--char);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:transform 1s cubic-bezier(.76,0,.24,1)}
#loader.done{transform:translateY(-100%)}
.ld-logo{position:relative}
.ld-logo svg{width:84px;height:84px;overflow:visible}
.ld-logo-img{display:block;height:64px;width:auto;max-width:min(380px,75vw);filter:drop-shadow(0 8px 28px rgba(0,0,0,.45));margin-bottom:10px}

/* loader scene — falling rain + filling gutter + draining downspout */
.ld-scene{position:relative;width:240px;height:120px;margin:6px 0 12px}
.ld-drop{position:absolute;top:0;width:2px;height:14px;border-radius:2px;background:linear-gradient(180deg,transparent,var(--copper-light) 60%,var(--copper));opacity:.85;animation:ldDrop 1.4s linear infinite}
.ld-drop.d1{left:18%;animation-delay:0s}
.ld-drop.d2{left:34%;animation-delay:.22s;height:10px}
.ld-drop.d3{left:52%;animation-delay:.47s}
.ld-drop.d4{left:70%;animation-delay:.7s;height:12px}
.ld-drop.d5{left:86%;animation-delay:.95s}
@keyframes ldDrop{
  0%{transform:translateY(-10px);opacity:0}
  10%{opacity:.85}
  70%{transform:translateY(58px);opacity:.85}
  78%{transform:translateY(60px) scaleY(.4) scaleX(1.8);opacity:1}
  100%{transform:translateY(62px) scaleY(.2) scaleX(2.4);opacity:0}
}
.ld-gutter{position:absolute;left:0;right:0;bottom:34px;height:18px;border-radius:0 0 9px 9px;background:linear-gradient(180deg,#3a2a1c 0%,#5b4631 8%,#c1763a 14%,#9c5a28 86%,#7a4520 100%);box-shadow:inset 0 2px 0 rgba(244,237,225,.18),inset 0 -2px 0 rgba(0,0,0,.35),0 6px 18px -6px rgba(193,118,58,.45);overflow:hidden}
.ld-water{position:absolute;left:0;bottom:0;width:0;height:100%;background:linear-gradient(180deg,rgba(224,151,92,.35),rgba(193,118,58,.7));transition:width .25s ease}
.ld-water::after{content:"";position:absolute;top:2px;left:0;right:0;height:3px;background:linear-gradient(180deg,rgba(244,237,225,.5),transparent);animation:ldWave 1.5s ease-in-out infinite}
@keyframes ldWave{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.ld-end{position:absolute;top:0;bottom:0;width:4px;background:#5b4631;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.ld-end-l{left:0;border-radius:0 0 0 4px}
.ld-end-r{right:0;border-radius:0 0 4px 0}
.ld-down{position:absolute;right:6px;top:52px;width:10px;height:64px;background:linear-gradient(180deg,#9c5a28 0%,#7a4520 100%);box-shadow:inset 1px 0 0 rgba(244,237,225,.15),inset -1px 0 0 rgba(0,0,0,.4);border-radius:0 0 3px 3px;overflow:hidden}
.ld-down-fill{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(180deg,rgba(224,151,92,.55),rgba(193,118,58,.85));transition:height .25s ease}

/* loading text dots */
.ld-dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.ld-dots i{width:4px;height:4px;border-radius:50%;background:var(--copper-light);animation:ldBlink 1.4s ease-in-out infinite}
.ld-dots i:nth-child(2){animation-delay:.2s}
.ld-dots i:nth-child(3){animation-delay:.4s}
@keyframes ldBlink{0%,80%,100%{opacity:.2}40%{opacity:1}}

@media(prefers-reduced-motion:reduce){.ld-drop,.ld-water::after,.ld-dots i{animation:none}.ld-water{width:100%}}
.ld-fill{font-family:var(--serif);font-size:1.1rem;letter-spacing:.32em;text-transform:uppercase;color:var(--copper-light);font-weight:600}
.ld-bar{width:200px;height:3px;background:rgba(244,237,225,.12);border-radius:3px;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper-deep),var(--copper-light));border-radius:3px;transition:width .2s linear}
.ld-pct{font-family:var(--serif);font-size:3.4rem;font-weight:600;color:var(--cream);letter-spacing:-.02em;line-height:1}
.ld-pct em{font-style:italic;color:var(--copper-light);font-size:1.4rem}
.ld-curtain{position:fixed;inset:0;z-index:9999;background:var(--char);pointer-events:none;transform:translateY(0);transition:transform 1s .1s cubic-bezier(.76,0,.24,1)}
.ld-curtain.up{transform:translateY(-100%)}

/* ---------- CURSOR SPOTLIGHT (dark sections only) ----------
   JS injects a dedicated <i class="spot"> child into each .spot-section so
   section-specific ::before decorations can't override the effect. */
.spot-section{position:relative;isolation:isolate}
.spot-section .spot{display:block;position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(224,151,92,.10),transparent 70%);pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;mix-blend-mode:screen}
.spot-section:hover .spot{opacity:1}
@media(hover:none){.spot-section .spot{display:none}}

/* ---------- CURSOR ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9000;mix-blend-mode:difference;opacity:0}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1}
.cursor-dot{width:7px;height:7px;background:var(--copper-light);transform:translate(-50%,-50%)}
.cursor-ring{width:40px;height:40px;border:1.5px solid rgba(224,151,92,.6);transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,border-color .3s}
.cursor-ring.hover{width:64px;height:64px;background:rgba(224,151,92,.12);border-color:transparent}
body.touch .cursor-dot,body.touch .cursor-ring{display:none}
@media(hover:none){.cursor-dot,.cursor-ring{display:none}#cRing,#cDot{display:none!important}}

/* ---------- SCROLL PIPE ---------- */
.scroll-pipe{position:fixed;right:26px;top:50%;transform:translateY(-50%);height:200px;width:6px;background:rgba(19,32,26,.08);border-radius:6px;z-index:90;overflow:hidden}
.scroll-pipe i{position:absolute;left:0;bottom:0;width:100%;background:linear-gradient(var(--copper-light),var(--copper-deep));border-radius:6px;height:0}
@media(max-width:900px){.scroll-pipe{display:none}}

/* ---------- NAV ---------- */
#header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.45s ease}
#header.scrolled{background:rgba(19,32,26,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream)}
.logo-mark{width:42px;height:42px;flex-shrink:0;overflow:visible;object-fit:contain}
.logo-text{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;line-height:1.05}
.logo-text span{display:block;font-family:var(--sans);font-weight:700;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--copper-light);margin-top:1px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{color:var(--cream);text-decoration:none;font-size:.95rem;font-weight:500;opacity:.85;transition:.25s;position:relative}
.nav-links a:not(.nav-cta):hover{opacity:1}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--copper);transition:.3s}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{position:relative;background:var(--copper);color:var(--cream)!important;padding:11px 24px;border-radius:50px;font-weight:600;opacity:1!important;overflow:hidden;isolation:isolate}
.nav-cta::before{content:"";position:absolute;inset:0;background:var(--copper-light);transform:translateY(101%);transition:.4s cubic-bezier(.7,0,.3,1);z-index:-1}
.nav-cta:hover::before{transform:translateY(0)}
.menu-btn{display:none;background:none;border:none;color:var(--cream);cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.menu-btn span{width:26px;height:2px;background:var(--cream);transition:.3s}
@media(max-width:900px){
  /* full-screen overlay: anchor + explicit viewport height so the header's
     backdrop-filter (which makes it the containing block for fixed children)
     can't clamp this to header height */
  .nav-links{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;background:var(--char);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);visibility:hidden;transition:transform .5s cubic-bezier(.7,0,.3,1),visibility 0s .5s}
  .nav-links.open{transform:translateX(0);visibility:visible;transition:transform .5s cubic-bezier(.7,0,.3,1),visibility 0s 0s}
  .nav-links a{font-size:1.5rem;font-family:var(--serif)}
  .menu-btn{display:flex;z-index:101}
  .menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .menu-btn.open span:nth-child(2){opacity:0}
  .menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}

/* ---------- HERO + PARALLAX SCENE ---------- */
.hero{position:relative;min-height:100vh;background:#0e1814;display:flex;align-items:center;overflow:hidden;padding-top:84px}
.scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:0;display:block;opacity:0;transition:opacity 1.6s ease-in-out}
.scene-photo.active{opacity:1}
@media(max-width:980px){.scene-photo{object-position:50% 40%}}
.scene-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,24,20,.45) 0%,rgba(14,24,20,.25) 38%,rgba(14,24,20,.45) 70%,rgba(14,24,20,.78) 100%),radial-gradient(60% 50% at 22% 38%,rgba(14,24,20,.55) 0%,rgba(14,24,20,.1) 60%,rgba(14,24,20,0) 100%);pointer-events:none}
.scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.layer{position:absolute;left:50%;bottom:0;transform:translateX(-50%);will-change:transform}
.hero-bg{display:block}
.hero-bg{display:none}
.hero-bg img{display:none}
.scene svg{display:block}
#rainCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero-vignette{display:none}
.hero-inner{position:relative;z-index:4;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;gap:36px}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--copper-light);font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:24px;overflow:hidden}
.eyebrow span{display:inline-block;transform:translateY(110%)}
.reveal-ready .eyebrow span{animation:rise .9s .15s cubic-bezier(.16,1,.3,1) forwards}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left}
.reveal-ready .eyebrow::before{animation:lineGrow .8s .4s ease forwards}
@keyframes lineGrow{to{transform:scaleX(1)}}
.hero h1{font-family:var(--serif);color:var(--cream);font-weight:600;font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:1.08;letter-spacing:-.028em;margin-bottom:24px;text-shadow:0 4px 22px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.65)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.06em}
.hero h1 .w{display:inline-block;transform:translateY(110%)}
.reveal-ready .hero h1 .w{animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 em{font-style:italic;color:var(--copper-light);font-weight:500}
@keyframes rise{to{transform:translateY(0)}}
.hero p.lede{color:rgba(244,237,225,.82);font-size:1.18rem;max-width:520px;margin-bottom:36px;opacity:0}
.reveal-ready .hero p.lede{animation:fadeUp .9s 1.1s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;opacity:0}
.reveal-ready .hero-actions{animation:fadeUp .9s 1.3s ease forwards}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 34px;border-radius:50px;font-weight:600;font-size:1rem;text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;cursor:pointer;border:none;position:relative;overflow:hidden;isolation:isolate;letter-spacing:-.005em;line-height:1}
/* while the magnet is engaged, transform tracks the pointer — needs a snappy transition */
[data-magnetic].mag-on{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.btn-primary{background:linear-gradient(155deg,#d8884a 0%,#c1763a 50%,#a3622d 100%);color:var(--cream);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -2px 6px rgba(0,0,0,.18) inset,0 12px 28px -10px rgba(193,118,58,.55),0 4px 10px -2px rgba(193,118,58,.35)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#e89c66 0%,#c1763a 55%,#7a4520 100%);opacity:0;transition:opacity .4s cubic-bezier(.7,0,.3,1)}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.4) 55%,transparent 100%);transform:skewX(-20deg);transition:left .6s cubic-bezier(.7,0,.3,1);pointer-events:none;z-index:1}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -2px 6px rgba(0,0,0,.18) inset,0 22px 44px -14px rgba(193,118,58,.7),0 8px 16px -4px rgba(193,118,58,.45)}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover::after{left:120%}
.btn-primary:active{transform:translateY(0);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -2px 6px rgba(0,0,0,.18) inset,0 8px 18px -6px rgba(193,118,58,.55)}
.btn-ghost{background:linear-gradient(180deg,rgba(244,237,225,.08),rgba(244,237,225,.03));color:var(--cream);border:1px solid rgba(244,237,225,.22);backdrop-filter:blur(8px) saturate(1.1);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 22px -10px rgba(0,0,0,.4)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--copper-light);color:var(--copper-light);background:linear-gradient(180deg,rgba(193,118,58,.18),rgba(193,118,58,.06));box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 16px 32px -12px rgba(193,118,58,.45),0 4px 10px -2px rgba(0,0,0,.3)}
.btn-ghost:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;transition:transform .35s cubic-bezier(.16,1,.3,1);position:relative;z-index:2}
.btn:hover svg{transform:translateX(5px)}
.btn[disabled]{opacity:.6;pointer-events:none}
/* Glow / pulse for high-conversion CTAs */
.btn-primary.btn-glow{animation:btnGlow 3s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -2px 6px rgba(0,0,0,.18) inset,0 12px 28px -10px rgba(193,118,58,.55),0 4px 10px -2px rgba(193,118,58,.35),0 0 0 0 rgba(193,118,58,0)}50%{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -2px 6px rgba(0,0,0,.18) inset,0 16px 38px -10px rgba(193,118,58,.75),0 8px 18px -4px rgba(193,118,58,.55),0 0 0 8px rgba(193,118,58,.05)}}
@media(prefers-reduced-motion:reduce){.btn-primary.btn-glow{animation:none}}
/* Larger / hero variant */
.btn-lg{padding:20px 38px;font-size:1.06rem;border-radius:60px}
.btn-lg svg{width:20px;height:20px}
.hero-card{background:linear-gradient(180deg,rgba(14,24,20,.88),rgba(19,32,26,.92));border:1px solid rgba(244,237,225,.15);border-radius:20px;padding:34px;backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 30px 70px -20px rgba(0,0,0,.55);opacity:0;position:relative;overflow:hidden}
.hero-live{margin:-14px -12px 24px;padding:16px 18px;background:rgba(244,237,225,.07);border:1px solid rgba(244,237,225,.16);border-radius:14px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.hero-live .hl-row{display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(244,237,225,.92);letter-spacing:.02em}
.hero-live svg,.hero-live .hl-icon{width:14px!important;height:14px!important;min-width:14px;min-height:14px;flex:0 0 14px;color:var(--copper-light)}
.hero-live .hl-label{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;color:rgba(244,237,225,.78)}
.hero-live .hl-val{margin-left:auto;font-family:var(--serif);font-style:italic;font-weight:600;color:var(--cream);font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hero-live .hl-val strong{font-style:normal;color:var(--copper-light);font-size:1.1rem;margin-right:2px}
.hero-live .hl-low{color:#b6e0a4;text-shadow:0 0 12px rgba(155,207,140,.35)}
.hero-live .hl-dot{width:9px;height:9px;border-radius:50%;background:#9bcf8c;box-shadow:0 0 0 0 rgba(155,207,140,.6);animation:hlPulse 2s ease-out infinite;flex-shrink:0}
@keyframes hlPulse{0%{box-shadow:0 0 0 0 rgba(155,207,140,.6)}70%{box-shadow:0 0 0 10px rgba(155,207,140,0)}100%{box-shadow:0 0 0 0 rgba(155,207,140,0)}}
.reveal-ready .hero-card{animation:fadeUp 1s 1s ease forwards}
.hero-card::after{content:"";position:absolute;top:-50%;left:-60%;width:50%;height:200%;background:linear-gradient(90deg,transparent,rgba(244,237,225,.12),transparent);transform:rotate(20deg);animation:sheen 6s 2.5s ease-in-out infinite}
@keyframes sheen{0%,100%{left:-60%}55%,80%{left:140%}}
.hero-card .h-like{color:var(--cream);font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:6px;line-height:1.3}
.hero-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:24px}
.mini-form{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.mini-form input,.mini-form select{background:rgba(244,237,225,.08);border:1px solid rgba(244,237,225,.18);border-radius:12px;padding:14px 16px;color:var(--cream);font-family:var(--sans);font-size:.95rem;outline:none;transition:.25s}
.mini-form input::placeholder,.mini-form select{color:rgba(244,237,225,.55)}
.mini-form input:focus,.mini-form select:focus{border-color:var(--copper);background:rgba(244,237,225,.14)}
.mini-form select{appearance:none;cursor:pointer}
.mini-form select option{background:var(--char)}
.mini-form button{margin-top:4px;justify-content:center}
.trust-row{display:flex;gap:26px;margin-top:40px;flex-wrap:wrap;opacity:0}
.reveal-ready .trust-row{animation:fadeUp .9s 1.5s ease forwards}
.trust-row .ti{display:flex;align-items:center;gap:10px;color:rgba(244,237,225,.7);font-size:.9rem;font-weight:500}
.trust-row .ti svg{width:20px;height:20px;color:var(--copper-light);flex-shrink:0}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(244,237,225,.8);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:0}
.reveal-ready .scroll-hint{animation:fadeUp 1s 2s ease forwards}
.scroll-hint .m{width:22px;height:36px;border:1.5px solid var(--line);border-radius:12px;position:relative}
.scroll-hint .m::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:7px;background:var(--copper-light);border-radius:3px;transform:translateX(-50%);animation:scrollDrop 1.8s infinite}
@keyframes scrollDrop{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}80%{opacity:0;transform:translate(-50%,14px)}}
@media(max-width:980px){.scroll-hint{display:none}}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--copper);color:var(--cream);padding:18px 0;overflow:hidden;white-space:nowrap;position:relative}
.marquee-track{display:inline-flex;gap:48px;animation:slide 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:1.15rem;font-weight:500;display:inline-flex;align-items:center;gap:48px}
.marquee-track span::after{content:"✦";font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- GENERICS ---------- */
.pad{padding:130px 0}
@media(max-width:640px){.pad{padding:84px 0}}
.sec-head{max-width:700px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--copper-deep);font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.tag::before{content:"";width:28px;height:1px;background:var(--copper-deep)}
.sec-head.center .tag::before{display:none}
h2.title{font-family:var(--serif);font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--char)}
h2.title em{font-style:italic;color:var(--copper-deep)}
.sec-head p{color:#56615a;font-size:1.12rem;margin-top:20px}
.reveal-words .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-words.in .w{opacity:1;transform:none}

/* photo slot */
.photo-slot{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--char-3),var(--char));display:flex;align-items:flex-end}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo-slot .ph{position:relative;z-index:0;width:100%;padding:20px;display:flex;align-items:center;gap:10px;color:rgba(244,237,225,.55);font-size:.82rem;font-weight:600}
.photo-slot .ph svg{width:20px;height:20px;opacity:.7;flex-shrink:0}
.photo-slot .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;background:linear-gradient(transparent,rgba(19,32,26,.82));color:var(--cream);font-size:.86rem;font-weight:600;opacity:0;transform:translateY(8px);transition:.4s}
.photo-slot:hover .cap{opacity:1;transform:none}

/* ---------- SCROLL-PINNED SHOWCASE ---------- */
.showcase{background:var(--char);color:var(--cream)}
.sc-track{position:relative}
.sc-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.sc-inner{width:100%;max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sc-left .tag{color:var(--copper-light)}.sc-left .tag::before{background:var(--copper-light)}
.sc-bignum{font-family:var(--serif);font-size:clamp(5rem,11vw,9rem);font-weight:600;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(224,151,92,.4);letter-spacing:-.04em;margin-bottom:10px;transition:.5s}
.sc-slide{position:relative;min-height:220px}
.sc-item{position:absolute;inset:0;opacity:0;transform:translateY(30px);transition:.6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.sc-item.active{opacity:1;transform:none;pointer-events:auto}
.sc-item h3{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;color:var(--cream);margin-bottom:16px;line-height:1.05}
.sc-item p{color:rgba(244,237,225,.72);font-size:1.08rem;max-width:440px}
.sc-item ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.sc-item li{display:flex;align-items:center;gap:12px;color:rgba(244,237,225,.85);font-size:.98rem}
.sc-item li svg{width:18px;height:18px;color:var(--copper-light);flex-shrink:0}
.sc-right{position:relative;height:62vh;border-radius:24px;overflow:hidden}
.sc-visual{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:.7s cubic-bezier(.16,1,.3,1)}
.sc-visual.active{opacity:1;transform:none}
.sc-progress{position:absolute;left:32px;right:32px;bottom:40px;max-width:1216px;margin:0 auto;height:3px;background:rgba(244,237,225,.12);border-radius:3px;z-index:5}
.sc-progress i{display:block;height:100%;width:0;background:var(--copper-light);border-radius:3px;transition:width .2s}
/* mobile fallback: static stack */
.showcase.static .sc-sticky{position:static;height:auto;padding:0;display:block}
.showcase.static .sc-inner{grid-template-columns:1fr;gap:28px;padding-top:0}
.showcase.static .sc-bignum{display:none}
.showcase.static .sc-slide{position:static;min-height:0;margin-bottom:40px}
.showcase.static .sc-item{position:static;opacity:1;transform:none;margin-bottom:36px}
.showcase.static .sc-right{height:auto;aspect-ratio:4/3;margin-bottom:14px}
.showcase.static .sc-visual{position:static;opacity:1;transform:none;height:100%}
.showcase.static .sc-visual:not(.m-show){display:none}
.showcase.static .sc-progress{display:none}
.sc-mblock{display:none}
.showcase.static .sc-mblock{display:block;border-top:1px solid var(--line);padding-top:32px;margin-top:8px}

/* ---------- LIVE JOB FEED ---------- */
.job-feed{display:flex;align-items:center;background:var(--char);color:var(--cream);border-bottom:1px solid var(--line);overflow:hidden}
.jf-label{display:flex;align-items:center;gap:8px;padding:14px 22px;background:var(--char-2);border-right:1px solid var(--line);flex-shrink:0;position:relative;z-index:2}
.jf-label strong{font-family:var(--sans);font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-light)}
.jf-label em{font-family:var(--serif);font-style:italic;font-size:.92rem;color:rgba(244,237,225,.7);margin-left:2px}
.jf-pulse{width:8px;height:8px;border-radius:50%;background:#9bcf8c;box-shadow:0 0 0 0 rgba(155,207,140,.55);animation:hlPulse 2s ease-out infinite;flex-shrink:0}
.jf-track{flex:1;overflow:hidden;position:relative;mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.jf-row{display:inline-flex;align-items:center;gap:14px;padding:14px 0;white-space:nowrap;animation:jfSlide 50s linear infinite;will-change:transform}
.job-feed:hover .jf-row{animation-play-state:paused}
@keyframes jfSlide{to{transform:translateX(-50%)}}
.jf-time{font-family:var(--serif);font-style:italic;color:var(--copper-light);font-size:.92rem;font-weight:600}
.jf-action{color:rgba(244,237,225,.78);font-size:.92rem}
.jf-loc{color:var(--cream);font-weight:600;font-size:.92rem;letter-spacing:-.005em}
.jf-sep{color:var(--copper);font-size:.92rem;margin:0 6px}
@media(max-width:640px){
  .jf-label{padding:10px 14px;gap:6px}
  .jf-label em{display:none}
  .jf-row{padding:10px 0;gap:10px;font-size:.86rem}
  .jf-time,.jf-action,.jf-loc{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){.jf-row{animation:none;transform:none}}

/* ---------- ANATOMY ---------- */
.anatomy{background:var(--char);color:var(--cream);overflow:hidden;position:relative}
.anatomy::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 20% 0%,rgba(193,118,58,.10),transparent 60%);pointer-events:none}
.anatomy .sec-head{position:relative;z-index:1}
.anatomy .title{color:var(--cream)}
.anatomy .sec-head p{color:rgba(244,237,225,.7)}
.anatomy .tag{color:var(--copper-light)}.anatomy .tag::before{background:var(--copper-light)}
.anat{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:stretch;position:relative;z-index:1}
@media(max-width:980px){.anat{grid-template-columns:1fr;gap:24px}}
.anat-stage{position:relative;background:linear-gradient(180deg,#1a2b22,#0f1a14);border:1px solid var(--line);border-radius:24px;overflow:hidden;aspect-ratio:9/5.2;box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}
.anat-stage svg{position:absolute;inset:0;width:100%;height:100%}
.anat-hot{position:absolute;width:38px;height:38px;border-radius:50%;background:var(--cream);color:var(--char);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:1rem;transform:translate(-50%,-50%);transition:.3s cubic-bezier(.16,1,.3,1);box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:3}
.anat-hot::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(224,151,92,.5);animation:anatPulse 2.4s ease-out infinite}
.anat-hot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--copper);transform:scale(0);transition:.3s cubic-bezier(.7,0,.3,1);z-index:-1}
.anat-hot span{position:absolute;inset:-8px;display:flex;align-items:center;justify-content:center;z-index:1;transition:color .3s} /* inset:-8px = ≥44px hit area at every size */
.anat-hot:hover{transform:translate(-50%,-50%) scale(1.12)}
.anat-hot:hover::after,.anat-hot.active::after{transform:scale(1)}
.anat-hot:hover span,.anat-hot.active span{color:var(--cream)}
.anat-hot.active{box-shadow:0 0 0 6px rgba(224,151,92,.18),0 12px 30px rgba(193,118,58,.45)}
@keyframes anatPulse{0%{transform:scale(.9);opacity:.7}80%,100%{transform:scale(1.7);opacity:0}}
.anat-drip{opacity:0;animation:anatDrip 2.8s ease-in infinite}
.anat-drip.d2{animation-delay:.9s}
.anat-drip.d3{animation-delay:1.8s}
@keyframes anatDrip{0%,8%{transform:translateY(0);opacity:0}10%{opacity:1}80%{transform:translateY(180px);opacity:1}90%,100%{opacity:0;transform:translateY(200px)}}
.anat-panel{position:relative;background:rgba(244,237,225,.04);border:1px solid var(--line);border-radius:24px;padding:38px;min-height:280px;overflow:hidden}
.anat-card{position:absolute;inset:38px;opacity:0;transform:translateY(16px);transition:.5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.anat-card.active{opacity:1;transform:none;pointer-events:auto}
.anat-no{font-family:var(--serif);font-size:3.4rem;font-weight:600;line-height:.85;color:transparent;-webkit-text-stroke:1.4px rgba(224,151,92,.55);letter-spacing:-.04em;display:block;margin-bottom:14px}
.anat-card h3{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;color:var(--cream);margin-bottom:14px;line-height:1.05}
.anat-card p{color:rgba(244,237,225,.78);font-size:1rem;margin-bottom:18px}
.anat-fail{background:rgba(193,118,58,.10);border-left:2.5px solid var(--copper);padding:14px 18px;border-radius:0 12px 12px 0;color:rgba(244,237,225,.85);font-size:.92rem;line-height:1.45}
.anat-fail b{color:var(--copper-light);font-weight:700}
@media(max-width:600px){
  .anat-panel{min-height:260px;padding:26px}
  .anat-card{inset:26px}
  .anat-hot{width:30px;height:30px;font-size:.85rem}
}

/* ---------- FABRICATION ---------- */
.fab{background:var(--cream-2);position:relative;overflow:hidden}
.fab::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 0%,rgba(193,118,58,.06),transparent 60%);pointer-events:none}
.fab-grid{display:grid;grid-template-columns:.95fr 1.1fr;gap:60px;align-items:center;position:relative}
@media(max-width:980px){.fab-grid{grid-template-columns:1fr;gap:36px}}
.fab-text .title{margin-bottom:18px}
.fab-text>p{color:#56615a;font-size:1.08rem;margin-bottom:32px;line-height:1.65}
.fab-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:520px){.fab-stats{grid-template-columns:1fr;gap:14px}}
.fab-stat{padding:18px 0;border-top:2px solid var(--copper)}
.fab-stat .n{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--char);line-height:1;letter-spacing:-.02em;margin-bottom:6px}
.fab-stat .l{display:block;font-size:.84rem;color:#56615a;line-height:1.35}
.fab-viz{position:relative;background:linear-gradient(180deg,#1a2b22,#0e1814);border-radius:24px;overflow:hidden;aspect-ratio:7/4.6;box-shadow:0 40px 80px -30px rgba(19,32,26,.5)}
.fab-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fab-viz::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,20,.2) 0%,transparent 35%,transparent 60%,rgba(14,24,20,.55) 100%);pointer-events:none;z-index:1}
.fab-photo-badge{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;background:rgba(14,24,20,.78);backdrop-filter:blur(10px);border:1px solid rgba(224,151,92,.4);border-radius:14px;color:var(--cream);z-index:2}
.fab-photo-badge strong{display:block;font-family:var(--sans);font-size:.74rem;font-weight:800;letter-spacing:.18em;color:var(--copper-light);text-transform:uppercase;line-height:1.2}
.fab-photo-badge em{display:block;font-family:var(--serif);font-style:italic;font-size:.92rem;color:rgba(244,237,225,.85);margin-top:2px}
.fab-pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 0 0 rgba(224,151,92,.7);animation:fabBadgePulse 1.8s ease-out infinite;flex-shrink:0}
@keyframes fabBadgePulse{0%{box-shadow:0 0 0 0 rgba(224,151,92,.6)}70%{box-shadow:0 0 0 14px rgba(224,151,92,0)}100%{box-shadow:0 0 0 0 rgba(224,151,92,0)}}
/* ---------- STATS ---------- */
.stats{background:var(--char-2);color:var(--cream);position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 100% 0%,rgba(193,118,58,.18),transparent 60%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative;z-index:1}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:48px 24px}}
.stat{text-align:center}
.stat .n{font-family:var(--serif);font-size:clamp(2.8rem,5vw,4.2rem);font-weight:600;color:var(--copper-light);line-height:1;letter-spacing:-.02em}
.stat .l{margin-top:12px;color:rgba(244,237,225,.7);font-size:.95rem;font-weight:500}

/* ---------- TRUST BADGES ---------- */
.trust{background:var(--char-2);color:var(--cream);padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
@media(max-width:1100px){.trust-strip{grid-template-columns:repeat(3,1fr);gap:22px 18px}}
@media(max-width:560px){.trust-strip{grid-template-columns:repeat(2,1fr);gap:18px 12px}}
.tb{display:flex;align-items:center;gap:12px}
.tb svg{width:32px;height:32px;color:var(--copper-light);flex-shrink:0}
.tb-t strong{display:block;font-family:var(--serif);font-size:.94rem;font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.15}
.tb-t em{display:block;font-style:normal;font-size:.74rem;color:rgba(244,237,225,.55);margin-top:2px;line-height:1.3}

/* ---------- ESTIMATOR ---------- */
.est{background:var(--cream)}
.est-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
@media(max-width:980px){.est-wrap{grid-template-columns:1fr;gap:32px}}
.est-head .title{margin-bottom:18px}
.est-head>p{color:#56615a;font-size:1.08rem;margin-bottom:24px}
.est-bullets{list-style:none;display:flex;flex-direction:column;gap:10px}
.est-bullets li{display:flex;align-items:center;gap:10px;color:var(--char);font-size:.98rem;font-weight:500}
.est-bullets li svg{width:18px;height:18px;color:var(--copper-deep);flex-shrink:0}
.est-card{background:var(--char);color:var(--cream);border-radius:24px;padding:36px;box-shadow:0 40px 80px -30px rgba(19,32,26,.45);position:relative;overflow:hidden}
.est-card::before{content:"";position:absolute;top:-40%;right:-20%;width:380px;height:380px;background:radial-gradient(circle,rgba(193,118,58,.22),transparent 65%);pointer-events:none}
@media(max-width:520px){.est-card{padding:24px}}
.est-row{margin-bottom:22px;position:relative;z-index:1}
.est-row label{display:flex;justify-content:space-between;align-items:baseline;font-size:.84rem;font-weight:600;color:rgba(244,237,225,.75);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.est-row label em{font-family:var(--serif);font-style:italic;color:var(--copper-light);font-size:1.15rem;text-transform:none;letter-spacing:0;font-weight:600}
.seg{display:flex;background:rgba(244,237,225,.05);border:1px solid var(--line);border-radius:14px;padding:5px;gap:4px;flex-wrap:wrap}
.seg button{flex:1;min-width:80px;background:transparent;border:none;color:rgba(244,237,225,.7);font-family:var(--sans);font-weight:600;font-size:.88rem;padding:11px 14px;border-radius:10px;cursor:pointer;transition:.25s}
.seg button:hover{color:var(--cream)}
.seg button.active{background:var(--copper);color:var(--cream);box-shadow:0 6px 14px -4px rgba(193,118,58,.6)}
input[type=range]#estLF{width:100%;-webkit-appearance:none;appearance:none;height:4px;background:rgba(244,237,225,.15);border-radius:4px;outline:none}
input[type=range]#estLF::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--copper-light);cursor:pointer;border:3px solid var(--char);box-shadow:0 4px 12px rgba(193,118,58,.5);transition:.2s}
input[type=range]#estLF::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]#estLF::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--copper-light);cursor:pointer;border:3px solid var(--char);box-shadow:0 4px 12px rgba(193,118,58,.5)}
.est-scale{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-top:8px;letter-spacing:.05em}
.addons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){.addons{grid-template-columns:1fr}}
.ad{display:flex;align-items:center;gap:10px;background:rgba(244,237,225,.05);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:rgba(244,237,225,.85);font-family:var(--sans);font-size:.92rem;font-weight:500;cursor:pointer;transition:.25s;text-align:left}
.ad i{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--copper-light);background:transparent;flex-shrink:0;position:relative;transition:.25s}
.ad.on i{background:var(--copper);border-color:var(--copper)}
.ad.on i::after{content:"";position:absolute;top:1px;left:5px;width:4px;height:9px;border-right:2px solid var(--cream);border-bottom:2px solid var(--cream);transform:rotate(45deg)}
.ad:hover{border-color:var(--copper);color:var(--cream)}
.ad.on{background:rgba(193,118,58,.14);border-color:var(--copper-light);color:var(--cream)}
.est-out{margin-top:8px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
@media(max-width:520px){.est-out{grid-template-columns:1fr}}
.est-pre{display:block;font-size:.74rem;color:var(--copper-light);font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.est-price{display:block;font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:600;color:var(--cream);letter-spacing:-.02em;line-height:1;transition:.4s cubic-bezier(.16,1,.3,1)}
.est-price.bump{animation:estBump .5s ease}
@keyframes estBump{0%{transform:scale(1)}40%{transform:scale(1.07);color:var(--copper-light)}100%{transform:scale(1);color:var(--cream)}}
.est-sub{display:block;font-size:.86rem;color:rgba(244,237,225,.6);margin-top:8px}
.est-note{font-size:.78rem;color:rgba(244,237,225,.68);margin-top:16px;line-height:1.5}

/* ---------- BEFORE/AFTER ---------- */
.ba{background:var(--cream-2)}
.ba-stage{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(19,32,26,.4);cursor:ew-resize;user-select:none}
.ba-layer{position:absolute;inset:0}
.ba-after{z-index:1}
.ba-before{z-index:2;width:50%;overflow:hidden;border-right:3px solid var(--cream)}
.ba-side{position:absolute;inset:0;width:1000px;max-width:none}
.ba-side svg,.ba-side img{width:100%;height:100%;object-fit:cover;display:block}
.ba-tag{position:absolute;top:20px;z-index:4;background:rgba(19,32,26,.78);backdrop-filter:blur(6px);color:var(--cream);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;border-radius:50px}
.ba-tag.b{left:20px}.ba-tag.a{right:20px}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--cream);z-index:3;transform:translateX(-50%)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--cream);box-shadow:0 8px 24px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:var(--copper-deep)}
.ba-knob svg{width:24px;height:24px}

/* ---------- QUIZ ---------- */
.quiz{background:var(--cream)}
.quiz-card{max-width:760px;margin:0 auto;background:var(--char);color:var(--cream);border-radius:24px;padding:48px;position:relative;overflow:hidden;box-shadow:0 50px 90px -40px rgba(19,32,26,.55)}
.quiz-card::before{content:"";position:absolute;top:-50%;left:-30%;width:480px;height:480px;background:radial-gradient(circle,rgba(193,118,58,.22),transparent 65%);pointer-events:none}
@media(max-width:600px){.quiz-card{padding:30px 24px}}
.quiz-meter{position:relative;height:3px;background:rgba(244,237,225,.12);border-radius:3px;margin-bottom:34px;overflow:hidden}
.quiz-meter i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--copper-deep),var(--copper-light));border-radius:3px;transition:.5s cubic-bezier(.7,0,.3,1)}
.quiz-steps{position:relative;min-height:300px}
.quiz-step{position:absolute;inset:0;opacity:0;transform:translateX(40px);transition:.5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.quiz-step.active{opacity:1;transform:none;pointer-events:auto;position:relative}
.quiz-no{display:inline-block;font-family:var(--serif);font-size:.84rem;font-weight:700;letter-spacing:.18em;color:var(--copper-light);text-transform:uppercase;margin-bottom:14px}
.quiz-step h3{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;color:var(--cream);margin-bottom:24px;line-height:1.15}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.quiz-opts{grid-template-columns:1fr}}
.quiz-opts button{background:rgba(244,237,225,.05);border:1px solid var(--line);border-radius:14px;padding:18px 20px;color:var(--cream);font-family:var(--sans);font-size:.98rem;font-weight:500;text-align:left;cursor:pointer;transition:.25s;position:relative}
.quiz-opts button::before{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);width:0;height:0;background:var(--copper);border-radius:50%;transition:.3s cubic-bezier(.7,0,.3,1)}
.quiz-opts button:hover{border-color:var(--copper);background:rgba(193,118,58,.12);transform:translateX(4px)}
.quiz-opts button.picked{background:var(--copper);border-color:var(--copper);color:var(--cream);font-weight:600}
.quiz-result{text-align:center}
.quiz-grade{display:inline-block;font-family:var(--serif);font-size:4.6rem;font-weight:600;color:var(--copper-light);line-height:1;letter-spacing:-.03em;margin-bottom:14px;animation:gradePop .6s cubic-bezier(.16,1,.3,1)}
@keyframes gradePop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.quiz-result h3{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.2rem);margin-bottom:14px}
.quiz-result p{color:rgba(244,237,225,.78);font-size:1.05rem;max-width:520px;margin:0 auto 24px}
.quiz-rec{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:rgba(193,118,58,.14);border:1px solid var(--copper-light);border-radius:16px;padding:18px 32px;margin-bottom:28px}
.quiz-rec-label{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-light)}
.quiz-rec strong{font-family:var(--serif);font-size:1.18rem;color:var(--cream);font-weight:600}
.quiz-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- GALLERY ---------- */
.gallery{background:var(--cream)}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:16px}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}}
.gal-grid .photo-slot{border-radius:18px}
.g1{grid-column:span 4;grid-row:span 2}
.g2{grid-column:span 2;grid-row:span 1}
.g3{grid-column:span 2;grid-row:span 1}
.g4{grid-column:span 2;grid-row:span 2}
.g5{grid-column:span 2;grid-row:span 1}
.g6{grid-column:span 2;grid-row:span 1}
@media(max-width:900px){.g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1;grid-row:span 1}.g1,.g4{grid-row:span 2}}

/* ---------- PICKER (color + style customizer) ---------- */
.picker{background:var(--cream-2);position:relative;overflow:hidden}
.picker::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 20% 100%,rgba(193,118,58,.06),transparent 60%);pointer-events:none}
.picker .sec-head{position:relative;z-index:1}
.picker-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:stretch;position:relative;z-index:1}
@media(max-width:980px){.picker-grid{grid-template-columns:1fr;gap:28px}}
.picker-stage{position:relative;background:var(--cream);border:1px solid var(--sand);border-radius:24px;overflow:hidden;aspect-ratio:7/4.6;box-shadow:0 30px 70px -30px rgba(19,32,26,.25)}
.picker-stage svg{position:absolute;inset:0;width:100%;height:100%}
.pk-label rect{transition:fill .3s}
.picker-controls{display:flex;flex-direction:column;gap:24px}
.pk-row h3{font-family:var(--serif);font-size:.78rem;font-weight:700;color:var(--copper-deep);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.pk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-tile{background:var(--cream);border:1px solid var(--sand);border-radius:14px;padding:14px;cursor:pointer;text-align:left;transition:.25s;color:#56615a;display:flex;flex-direction:column;gap:4px}
.pk-tile svg{width:60px;height:24px;margin-bottom:6px;transition:color .25s}
.pk-tile span{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--char);transition:color .25s}
.pk-tile em{display:block;font-size:.78rem;font-style:normal;color:#7a847d}
.pk-tile:hover{border-color:var(--copper)}
.pk-tile.active{background:var(--char);border-color:var(--char);color:var(--copper-light)}
.pk-tile.active span{color:var(--cream)}
.pk-tile.active em{color:rgba(244,237,225,.6)}
.pk-seg{display:flex;background:var(--cream);border:1px solid var(--sand);border-radius:14px;padding:5px;gap:4px}
.pk-seg button{flex:1;background:transparent;border:none;color:#56615a;font-family:var(--sans);font-weight:600;font-size:.9rem;padding:11px;border-radius:10px;cursor:pointer;transition:.25s}
.pk-seg button:hover{color:var(--char)}
.pk-seg button.active{background:var(--copper);color:var(--cream);box-shadow:0 6px 14px -4px rgba(193,118,58,.5)}
.pk-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:520px){.pk-swatches{grid-template-columns:repeat(2,1fr)}}
.pk-sw{background:var(--cream);border:1px solid var(--sand);border-radius:12px;padding:10px 8px;cursor:pointer;transition:.25s;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--char)}
.pk-sw i{width:32px;height:32px;border-radius:50%;display:block;transition:.25s}
.pk-sw b{font-family:var(--sans);font-size:.72rem;font-weight:600;text-align:center;line-height:1.2}
.pk-sw:hover{border-color:var(--copper);transform:translateY(-2px)}
.pk-sw.active{background:var(--char);color:var(--cream);border-color:var(--char)}
.pk-sw.active i{box-shadow:0 0 0 3px var(--char),0 0 0 5px var(--copper);transform:scale(1.05)}
.pk-cta{margin-top:8px}
.pk-cta .btn{width:100%;justify-content:center}
.pk-note{margin-top:12px;font-size:.78rem;color:#7a847d;line-height:1.5;text-align:center}

/* ---------- WHY ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:48px}}
.why-visual{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.why-visual .badge{position:absolute;bottom:28px;left:28px;right:28px;background:rgba(19,32,26,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:24px;color:var(--cream);z-index:3}
.why-visual .badge .stars{color:var(--copper-light);font-size:1.1rem;letter-spacing:3px;margin-bottom:8px}
.why-visual .badge p{font-style:italic;font-family:var(--serif);font-size:1.05rem;line-height:1.4}
.why-visual .badge .who{margin-top:12px;font-size:.85rem;color:var(--muted);font-style:normal;font-family:var(--sans)}
.feat-list{display:flex;flex-direction:column;gap:8px;margin-top:36px}
.feat{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--sand)}
.feat:last-child{border-bottom:1px solid var(--sand)}
.feat-ico{width:44px;height:44px;border-radius:11px;background:var(--char);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-ico svg{width:22px;height:22px;color:var(--copper-light)}
.feat h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--char);margin-bottom:4px}
.feat p{color:#56615a;font-size:.96rem}

/* ---------- BEHIND THE WORK ---------- */
.crew{background:var(--char);color:var(--cream);position:relative;overflow:hidden}
.crew::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 0% 100%,rgba(193,118,58,.10),transparent 60%);pointer-events:none}
.crew .title{color:var(--cream);position:relative;z-index:1}
.crew .tag{color:var(--copper-light);position:relative;z-index:1}
.crew .tag::before{background:var(--copper-light)}
.crew-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start;position:relative;z-index:1}
@media(max-width:980px){.crew-grid{grid-template-columns:1fr;gap:40px}}
.crew-text>p{color:rgba(244,237,225,.78);font-size:1.06rem;margin:18px 0 26px;line-height:1.6;max-width:520px}
.crew-bullets{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.crew-bullets li{display:flex;gap:10px;color:rgba(244,237,225,.86);font-size:.98rem;line-height:1.5}
.crew-bullets li svg{width:18px;height:18px;color:var(--copper-light);flex-shrink:0;margin-top:4px}
.crew-quote{position:relative;padding:24px 26px 24px 28px;background:rgba(244,237,225,.04);border-left:3px solid var(--copper);border-radius:0 14px 14px 0}
.crew-quote svg{width:22px;height:22px;color:var(--copper-light);position:absolute;top:18px;left:-12px;background:var(--char);padding:2px;border-radius:50%}
.crew-quote p{font-family:var(--serif);font-style:italic;color:var(--cream);font-size:1.05rem;line-height:1.5;margin-bottom:10px}
.crew-quote cite{font-style:normal;font-size:.84rem;color:rgba(244,237,225,.6);font-family:var(--sans);letter-spacing:.04em}
.crew-photos{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto;gap:16px;align-items:start}
@media(max-width:560px){.crew-photos{grid-template-columns:1fr}}
.crew-photo{position:relative;border-radius:18px;overflow:hidden;background:var(--char-2)}
.crew-photo img{display:block;width:100%;height:100%;object-fit:cover}
.crew-photo-tall{grid-row:span 2;aspect-ratio:4/5}
.crew-photo-wide{aspect-ratio:7/5}
@media(max-width:560px){.crew-photo-tall{aspect-ratio:1;grid-row:auto}}
.crew-photo figcaption{position:absolute;left:14px;bottom:14px;background:rgba(19,32,26,.78);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--cream)}
.crew-photo figcaption strong{display:block;font-family:var(--serif);font-size:.92rem;font-weight:600;letter-spacing:-.005em}
.crew-photo figcaption em{display:block;font-style:italic;font-size:.74rem;color:rgba(244,237,225,.65);margin-top:2px}
.crew-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:6px}
.cs{padding:14px 12px;background:rgba(244,237,225,.04);border:1px solid var(--line);border-radius:12px;text-align:center}
.cs .n{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--copper-light);line-height:1;letter-spacing:-.02em}
.cs .l{display:block;font-size:.74rem;color:rgba(244,237,225,.62);margin-top:6px;line-height:1.3}

/* ---------- COMPARISON ---------- */
.compare{background:var(--cream-2)}
.cmp{max-width:1080px;margin:0 auto;background:var(--cream);border:1px solid var(--sand);border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(19,32,26,.18)}
.cmp-head{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;background:var(--char);color:var(--cream);padding:24px 28px;align-items:end}
@media(max-width:760px){.cmp-head,.cmp-r{grid-template-columns:1.2fr .6fr .6fr .6fr}.cmp-head{padding:18px}}
.cmp-row-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--copper-light);font-weight:700}
.cmp-col{text-align:center;padding:0 8px}
.cmp-col.best{position:relative}
.cmp-col.best::before{content:"Us";position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--copper);color:var(--cream);font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:30px}
.cmp-col-name{font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--cream);line-height:1.1}
.cmp-col.best .cmp-col-name{color:var(--copper-light)}
.cmp-col-sub{font-size:.76rem;color:rgba(244,237,225,.55);margin-top:4px}
@media(max-width:520px){.cmp-col-sub{display:none}.cmp-col-name{font-size:.88rem}}
.cmp-r{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;padding:20px 28px;border-top:1px solid var(--sand);align-items:center;transition:background .3s}
.cmp-r:hover{background:rgba(193,118,58,.05)}
@media(max-width:760px){.cmp-r{padding:16px 14px}}
.cmp-l{font-size:1rem;color:var(--char);font-weight:500;padding-right:14px}
@media(max-width:520px){.cmp-l{font-size:.88rem}}
.cmp-v{display:flex;justify-content:center;align-items:center;font-size:.84rem;color:#56615a}
.cmp-v.best{background:rgba(193,118,58,.08);margin:-10px 0;padding:10px 0;border-radius:8px}
.cmp-yes,.cmp-no,.cmp-mid{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:700}
.cmp-yes{background:var(--copper);color:var(--cream);position:relative}
.cmp-yes::after{content:"";width:8px;height:14px;border-right:2.4px solid var(--cream);border-bottom:2.4px solid var(--cream);transform:rotate(45deg) translateY(-2px)}
.cmp-no{background:transparent;border:1.5px dashed var(--sand);color:#a8a397;position:relative;width:28px;height:28px}
.cmp-no::after,.cmp-no::before{content:"";position:absolute;width:12px;height:2px;background:#a8a397;border-radius:2px}
.cmp-no::after{transform:rotate(45deg)}.cmp-no::before{transform:rotate(-45deg)}
.cmp-mid{width:auto;height:auto;padding:5px 11px;border-radius:50px;background:rgba(86,97,90,.12);color:#56615a;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700}

/* ---------- PLANS ---------- */
.plans{background:var(--char);color:var(--cream);position:relative;overflow:hidden}
.plans::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 100%,rgba(193,118,58,.12),transparent 65%);pointer-events:none}
.plans .sec-head{position:relative;z-index:1}
.plans .title{color:var(--cream)}
.plans .sec-head p{color:rgba(244,237,225,.7)}
.plans .tag{color:var(--copper-light)}.plans .tag::before{background:var(--copper-light)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
@media(max-width:900px){.plans-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{position:relative;background:rgba(244,237,225,.04);border:1px solid var(--line);border-radius:22px;padding:36px 32px;transition:.5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.plan:hover{transform:translateY(-6px);border-color:rgba(224,151,92,.4)}
.plan.featured{background:linear-gradient(160deg,rgba(193,118,58,.18),rgba(193,118,58,.04));border-color:var(--copper);transform:scale(1.03);box-shadow:0 30px 70px -25px rgba(193,118,58,.45)}
@media(max-width:900px){.plan.featured{transform:scale(1)}}
.plan-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--copper);color:var(--cream);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px;border-radius:30px;box-shadow:0 8px 18px -4px rgba(193,118,58,.55)}
.plan header{margin-bottom:16px}
.plan-tier{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-light);margin-bottom:8px}
.plan h3{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--cream);line-height:1.1}
.plan-price{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.plan-price .amt{font-family:var(--serif);font-size:3rem;font-weight:600;color:var(--cream);letter-spacing:-.02em;line-height:1}
.plan-price .per{font-size:.92rem;color:rgba(244,237,225,.6)}
.plan-tag{color:rgba(244,237,225,.7);font-size:.95rem;margin-bottom:24px;font-style:italic;font-family:var(--serif)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex:1}
.plan li{display:flex;gap:10px;color:rgba(244,237,225,.85);font-size:.95rem;line-height:1.4}
.plan li svg{width:18px;height:18px;color:var(--copper-light);flex-shrink:0;margin-top:3px}
.plan .btn{justify-content:center;width:100%}
.plans-note{text-align:center;color:rgba(244,237,225,.68);font-size:.84rem;margin-top:30px;position:relative;z-index:1}

/* ---------- KINETIC ---------- */
.kinetic{background:var(--char-2);color:var(--cream);padding:90px 0;overflow:hidden}
.kinetic .line{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,6vw,5rem);letter-spacing:-.02em;white-space:nowrap;line-height:1.1;will-change:transform}
.kinetic .line:nth-child(2){text-align:right;color:transparent;-webkit-text-stroke:1.4px var(--copper-light)}
.kinetic .line em{font-style:italic;color:var(--copper-light)}
.kinetic .line:nth-child(2) em{-webkit-text-stroke:0;color:var(--copper-light)}

/* ---------- PROCESS ---------- */
.process{background:var(--char);color:var(--cream);overflow:hidden}
.process .sec-head .tag{color:var(--copper-light)}.process .sec-head .tag::before{background:var(--copper-light)}
.process .title{color:var(--cream)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);gap:40px 24px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative}
.step .sn{font-family:var(--serif);font-size:3.6rem;font-weight:600;color:rgba(193,118,58,.32);line-height:1;letter-spacing:-.03em}
.step h3{font-family:var(--serif);font-size:1.32rem;font-weight:600;margin:14px 0 10px;color:var(--cream)}
.step p{color:rgba(244,237,225,.66);font-size:.96rem}
.step::after{content:"";position:absolute;top:26px;left:calc(100% - 8px);width:40px;height:1px;background:repeating-linear-gradient(90deg,var(--copper) 0 5px,transparent 5px 11px);opacity:.5}
.step:nth-child(4n)::after{display:none}
@media(max-width:900px){.step::after{display:none}}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:var(--cream-2)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
.tcard{background:var(--cream);border:1px solid var(--sand);border-radius:20px;padding:34px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;transform-style:preserve-3d}
.tcard .stars{color:var(--copper);letter-spacing:3px;font-size:1rem;margin-bottom:18px}
.tcard p{font-family:var(--serif);font-size:1.14rem;line-height:1.5;color:var(--char);font-style:italic;margin-bottom:24px}
.tcard .person{display:flex;align-items:center;gap:14px}
.tcard .av{width:46px;height:46px;border-radius:50%;background:var(--char);color:var(--copper-light);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:1.1rem;overflow:hidden}
.tcard .av img{width:100%;height:100%;object-fit:cover}
.tcard .person .nm{font-weight:600;color:var(--char);font-size:.96rem}
.tcard .person .loc{color:var(--muted);font-size:.85rem}

/* ---------- AREA ---------- */
.area{background:var(--cream)}
.area-wrap{background:var(--char);border-radius:28px;padding:64px;color:var(--cream);position:relative;overflow:hidden}
@media(max-width:640px){.area-wrap{padding:40px 28px}}
.area-wrap::before{content:"";position:absolute;top:-40%;right:-10%;width:480px;height:480px;background:radial-gradient(circle,rgba(193,118,58,.22),transparent 65%);animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,24px)}}
.area-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:760px){.area-inner{grid-template-columns:1fr;gap:32px}}
.area .title{color:var(--cream);margin-bottom:18px}
.area p.sub{color:rgba(244,237,225,.74);font-size:1.08rem;margin-bottom:24px}
.area-active{margin:24px 0 28px;padding:18px 22px;background:rgba(244,237,225,.05);border:1px solid var(--line);border-radius:14px;border-left:3px solid var(--copper)}
.area-active .aa-name{display:block;font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--cream);letter-spacing:-.01em;margin-bottom:4px}
.area-active .aa-meta{display:block;font-size:.88rem;color:rgba(244,237,225,.7)}
.area-map{position:relative;aspect-ratio:480/380;border-radius:18px;overflow:hidden}
.area-map svg{position:absolute;inset:0;width:100%;height:100%}
.map-pin{position:absolute;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;color:var(--cream);padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2}
.map-pin::after{content:"";position:absolute;inset:-12px} /* ≥44px hit area */
.map-pin i{width:12px;height:12px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 0 4px rgba(193,118,58,.18);transition:.3s cubic-bezier(.7,0,.3,1);position:relative}
.map-pin i::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--copper-light);opacity:.5;transform:scale(1);animation:pinPulse 2.4s ease-out infinite}
@keyframes pinPulse{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(2.4);opacity:0}}
.map-pin b{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,237,225,.7);background:rgba(19,32,26,.78);padding:3px 7px;border-radius:30px;opacity:0;transform:translateY(-4px);transition:.3s;white-space:nowrap;pointer-events:none}
.map-pin:hover i,.map-pin.active i{background:var(--cream);box-shadow:0 0 0 6px rgba(193,118,58,.4),0 0 0 14px rgba(193,118,58,.12);transform:scale(1.25)}
.map-pin:hover b,.map-pin.active b{opacity:1;transform:none;color:var(--cream);background:var(--copper)}
@media(max-width:640px){.map-pin b{font-size:.6rem;padding:2px 5px}}

/* ---------- FAQ ---------- */
.faq{background:var(--cream-2)}
.faq-wrap{display:grid;grid-template-columns:.85fr 1.2fr;gap:64px;align-items:start}
@media(max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:36px}}
.faq-head{position:sticky;top:120px}
@media(max-width:900px){.faq-head{position:static}}
.faq-head p{color:#56615a;font-size:1.05rem;margin:18px 0 24px}
.faq-head .btn-ghost{background:var(--cream);color:var(--char);border:1px solid var(--sand)}
.faq-head .btn-ghost:hover{border-color:var(--copper);color:var(--copper-deep)}
.faq-head .btn-ghost svg{color:var(--copper-deep)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--cream);border:1px solid var(--sand);border-radius:16px;overflow:hidden;transition:.3s}
.faq-item[open]{border-color:var(--copper);box-shadow:0 16px 40px -20px rgba(193,118,58,.3)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 26px;font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--char);display:flex;justify-content:space-between;align-items:center;gap:18px;line-height:1.3;transition:color .25s;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-tog{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--copper);position:relative;transition:.35s cubic-bezier(.7,0,.3,1)}
.faq-tog::before,.faq-tog::after{content:"";position:absolute;top:50%;left:50%;background:var(--copper);transition:.35s cubic-bezier(.7,0,.3,1)}
.faq-tog::before{width:12px;height:1.6px;transform:translate(-50%,-50%)}
.faq-tog::after{width:1.6px;height:12px;transform:translate(-50%,-50%)}
.faq-item[open] summary{color:var(--copper-deep)}
.faq-item[open] .faq-tog{background:var(--copper)}
.faq-item[open] .faq-tog::before,.faq-item[open] .faq-tog::after{background:var(--cream)}
.faq-item[open] .faq-tog::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-body{padding:0 26px 24px;color:#475048;font-size:1rem;line-height:1.65;animation:faqIn .35s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq-body strong{color:var(--char);font-weight:700}
.faq-body em{font-style:italic;color:var(--copper-deep)}
.faq-body a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- SECTION BACKDROPS ---------- */
.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:0;opacity:.22;filter:saturate(.8) brightness(.7);pointer-events:none}
.sec-bg-faint{opacity:.12;filter:saturate(.6) brightness(.55)}
section.contact,section.process,section.crew{position:relative;overflow:hidden}
section.contact>.wrap,section.process>.wrap,section.crew>.wrap{position:relative;z-index:2}
section.contact::before,section.process::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,24,20,.6) 0%,rgba(19,32,26,.85) 100%);pointer-events:none}

/* Decorative copper underline on section tags */
.tag{position:relative}
.tag::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,var(--copper-deep),transparent);opacity:.6}
.sec-head.center .tag::after{display:none}

/* ---------- CONTACT ---------- */
.contact{background:var(--char-2);color:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}
.contact .title{color:var(--cream)}
.contact .tag{color:var(--copper-light)}.contact .tag::before{background:var(--copper-light)}
.contact .lede{color:rgba(244,237,225,.74);font-size:1.1rem;margin:20px 0 36px}
.contact-detail{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.contact-detail:last-child{border-bottom:1px solid var(--line)}
.cd-ico{width:48px;height:48px;border-radius:12px;background:rgba(193,118,58,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s}
.contact-detail:hover .cd-ico{background:var(--copper);transform:rotate(-8deg)}
.cd-ico svg{width:22px;height:22px;color:var(--copper-light);transition:.3s}
.contact-detail:hover .cd-ico svg{color:var(--cream)}
.contact-detail .k{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.contact-detail .v{font-size:1.12rem;font-weight:600;color:var(--cream);font-family:var(--serif)}
.contact-detail a{text-decoration:none}
.contact-detail a:hover{color:var(--copper-light)}
.form{background:rgba(244,237,225,.045);border:1px solid var(--line);border-radius:22px;padding:40px;position:relative;overflow:hidden}
@media(max-width:640px){.form{padding:28px 22px}}
.form h3{font-family:var(--serif);font-size:1.7rem;font-weight:600;margin-bottom:6px;color:var(--cream)}
.form .fsub{color:var(--muted);font-size:.92rem;margin-bottom:28px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:600;color:rgba(244,237,225,.7);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:rgba(244,237,225,.05);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--cream);font-family:var(--sans);font-size:.97rem;outline:none;transition:.25s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper);background:rgba(244,237,225,.09)}
.field input:invalid:not(:placeholder-shown){border-color:#b5524a}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--char)}
.field textarea{resize:vertical;min-height:90px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.frow{grid-template-columns:1fr}}
.form .btn-primary{width:100%;justify-content:center;margin-top:8px}
.form-note{text-align:center;font-size:.82rem;color:var(--muted);margin-top:16px}
.form-err{display:none;color:#e0a59c;font-size:.88rem;margin-top:12px;text-align:center}
.form-err.show{display:block}
.spinner{width:18px;height:18px;border:2px solid rgba(244,237,225,.4);border-top-color:var(--cream);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-success{display:none;text-align:center;padding:50px 0}
.form-success.show{display:block;animation:fadeUp .6s ease}
.form-success svg{width:64px;height:64px;color:var(--copper-light);margin-bottom:16px}
.form-success .checkc{stroke-dasharray:50;stroke-dashoffset:50;animation:draw .7s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form-success h3{margin-bottom:8px}
.form-success p{color:rgba(244,237,225,.7)}

/* ---------- FOOTER ---------- */
footer{background:var(--char);color:var(--cream);padding:72px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px 24px}}
@media(max-width:440px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .logo{margin-bottom:18px}
.foot-brand p{color:rgba(244,237,225,.6);font-size:.95rem;max-width:300px}
.foot-col .foot-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--copper-light);margin-bottom:20px;font-weight:800}
.foot-col a{display:block;color:rgba(244,237,225,.72);text-decoration:none;font-size:.95rem;margin-bottom:13px;transition:.25s}
.foot-col a:hover{color:var(--copper-light);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:14px}
.foot-bottom p{color:var(--muted);font-size:.86rem}
.foot-bottom .soc{display:flex;gap:14px}
.foot-bottom .soc a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:rgba(244,237,225,.7);transition:.3s}
.foot-bottom .soc a:hover{background:var(--copper);color:var(--cream);border-color:var(--copper);transform:translateY(-3px)}
.foot-bottom .soc svg{width:18px;height:18px}

/* ---------- SERVICE MODAL ---------- */
.svc-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.svc-modal.open{display:flex;animation:svcModalIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes svcModalIn{from{opacity:0}to{opacity:1}}
.svc-modal-bg{position:absolute;inset:0;background:rgba(14,24,20,.78);backdrop-filter:blur(8px)}
.svc-modal-card{position:relative;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;background:var(--cream);border-radius:24px;box-shadow:0 60px 120px -40px rgba(0,0,0,.6);animation:svcCardIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes svcCardIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.svc-modal-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:var(--cream-2);border:none;cursor:pointer;color:var(--char);display:flex;align-items:center;justify-content:center;z-index:3;transition:.25s}
.svc-modal-x:hover{background:var(--copper);color:var(--cream);transform:rotate(90deg)}
.svc-modal-x svg{width:18px;height:18px}
.svc-modal-head{padding:40px 40px 24px;background:var(--char);color:var(--cream);border-radius:24px 24px 0 0;position:relative;overflow:hidden}
.svc-modal-head::before{content:"";position:absolute;top:-40%;right:-15%;width:300px;height:300px;background:radial-gradient(circle,rgba(193,118,58,.22),transparent 65%);pointer-events:none}
@media(max-width:520px){.svc-modal-head{padding:32px 26px 20px}}
.svc-modal-tag{font-family:var(--serif);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-light);position:relative;z-index:1}
.svc-modal-head h3{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;margin:10px 0 8px;line-height:1.1;position:relative;z-index:1}
.svc-modal-head p{color:rgba(244,237,225,.78);font-size:1.02rem;line-height:1.5;position:relative;z-index:1}
.svc-modal-body{padding:32px 40px;color:var(--char)}
@media(max-width:520px){.svc-modal-body{padding:24px 26px}}
.svc-modal-body h4{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--char);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.svc-modal-body h4::before{content:"";width:18px;height:1.5px;background:var(--copper-deep)}
.svc-modal-body h4:first-child{margin-top:0}
.svc-modal-body ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.svc-modal-body li{display:flex;gap:10px;color:#475048;font-size:.98rem;line-height:1.5}
.svc-modal-body li svg{width:16px;height:16px;color:var(--copper-deep);flex-shrink:0;margin-top:5px}
.svc-modal-body .svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 8px}
@media(max-width:560px){.svc-modal-body .svc-steps{grid-template-columns:1fr 1fr}}
.svc-step{background:var(--cream-2);border-radius:12px;padding:14px;border-left:2px solid var(--copper)}
.svc-step .sn{display:block;font-family:var(--serif);font-size:.86rem;font-weight:700;color:var(--copper-deep);margin-bottom:4px}
.svc-step .st{display:block;font-size:.84rem;color:var(--char);font-weight:600;line-height:1.3}
.svc-modal-foot{display:flex;justify-content:space-between;align-items:center;padding:24px 40px 32px;background:var(--cream-2);border-radius:0 0 24px 24px;gap:18px;flex-wrap:wrap}
@media(max-width:520px){.svc-modal-foot{padding:20px 26px 26px}}
.svc-modal-price .lbl{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#7a847d;font-weight:700}
.svc-modal-price .val{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--char);letter-spacing:-.02em;margin-top:2px}
.svc-modal-foot .btn{flex:1;justify-content:center;min-width:200px}
body.modal-open{overflow:hidden}

/* ---------- FLOATING REVIEWS WIDGET ---------- */
.rev-widget{position:fixed;right:24px;left:auto;bottom:24px;width:330px;background:var(--char-2);border-radius:18px;padding:18px 20px 16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55),0 0 0 1px rgba(224,151,92,.32);z-index:75;transform:translateY(140%);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease;font-family:var(--sans)}
.rev-widget.show{transform:translateY(0);opacity:1}
.rev-widget.dismissed{transform:translateY(140%);opacity:0;pointer-events:none}
.rev-close{position:absolute;top:0;right:0;width:44px;height:44px;border-radius:0 18px 0 50%;border:none;background:transparent;color:rgba(244,237,225,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.rev-close:hover{background:rgba(224,151,92,.16);color:var(--copper-light)}
.rev-close svg{width:12px;height:12px}
.rev-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rev-g{width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#4285F4}
.rev-g svg{width:18px;height:18px}
.rev-meta{flex:1;min-width:0}
.rev-stars{color:#FBBC04;font-size:.95rem;letter-spacing:1px;line-height:1}
.rev-src{font-size:.72rem;color:rgba(244,237,225,.72);margin-top:2px;font-weight:600;letter-spacing:.03em}
.rev-slots{position:relative;min-height:108px}
.rev-slot{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:.6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.rev-slot.active{opacity:1;transform:none;pointer-events:auto;position:relative}
.rev-slot p{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--cream);line-height:1.45;margin-bottom:10px}
.rev-by strong{display:block;font-style:normal;font-family:var(--sans);font-weight:700;color:var(--cream);font-size:.84rem}
.rev-by em{display:block;font-style:normal;font-size:.74rem;color:rgba(244,237,225,.65);margin-top:2px}
.rev-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--copper-light);font-size:.82rem;font-weight:700;text-decoration:none;letter-spacing:.02em;transition:gap .25s}
.rev-cta:hover{gap:10px;color:var(--cream)}
.rev-cta svg{width:14px;height:14px}
/* collapsed pill — docked bottom-right, opaque */
.rev-pill{position:fixed;right:24px;bottom:24px;z-index:75;display:inline-flex;align-items:center;gap:6px;background:var(--char-2);color:var(--cream);border:1px solid rgba(224,151,92,.45);border-radius:50px;padding:11px 18px;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.02em;cursor:pointer;box-shadow:0 18px 44px -16px rgba(0,0,0,.55);transform:translateY(160%);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.rev-pill.show{transform:translateY(0);opacity:1}
.rev-pill:hover{border-color:var(--copper-light);color:var(--copper-light)}
@media(max-width:760px){.rev-widget{bottom:calc(68px + env(safe-area-inset-bottom,0px))}.rev-pill{bottom:calc(68px + env(safe-area-inset-bottom,0px))}}
@media(max-width:640px){.rev-widget{display:none!important}}
@media(prefers-reduced-motion:reduce){.rev-widget,.rev-slot,.rev-pill{transition:none}}

/* ---------- STICKY MOBILE BAR ---------- */
.mob-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;grid-template-columns:1fr 1fr;gap:0;background:rgba(19,32,26,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 10px max(8px,env(safe-area-inset-bottom));transform:translateY(110%);transition:.5s cubic-bezier(.7,0,.3,1)}
.mob-bar.show{transform:translateY(0)}
.mob-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;font-family:var(--sans);font-weight:700;font-size:.9rem;line-height:1;white-space:nowrap;min-width:0;text-decoration:none;border-radius:14px;margin:0 4px;transition:.25s}
.mob-bar svg{width:18px;height:18px;flex-shrink:0}
.mob-call{color:var(--cream);background:rgba(244,237,225,.08);border:1px solid var(--line)}
.mob-call:hover{background:rgba(244,237,225,.14)}
.mob-quote{color:var(--cream);background:var(--copper)}
.mob-quote:hover{background:var(--copper-light)}
@media(max-width:760px){.mob-bar{display:grid}body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:.85s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .hero h1 .w,.eyebrow span{transform:none!important}
  #rainCanvas{display:none}
  html{scroll-behavior:auto!important}
  /* infinite pulse family — .001s duration would loop at 1000Hz; kill outright */
  .hl-dot,.jf-pulse,.map-pin i::before,.anat-hot::before,.fab-pulse-dot,.hero-card::after,.ld-water::after,.scroll-hint .m::after,.anat-drip,.marquee-track,.jf-row,.btn-primary.btn-glow,.area-wrap::before,.hero-live .hl-severe{animation:none!important}
}

/* =====================================================================
   ROUND 6 — CROSS-DEVICE POLISH
   ===================================================================== */

/* ---- Universal ---- */
/* anchor offset now lives on section[id]{scroll-margin-top} (3a.10) — scroll-padding here
   would ADD to scroll-margin and double the offset, so it's intentionally gone */
:focus-visible{outline:2px solid var(--copper-light);outline-offset:3px;border-radius:6px}
button:focus-visible,a:focus-visible{outline-offset:4px}
.btn:focus-visible{outline-offset:6px}
/* form fields + summary set their own borders/outline:none — re-assert the copper ring */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.mini-form input:focus-visible,.mini-form select:focus-visible,
.faq-item summary:focus-visible{outline:2px solid var(--copper-light);outline-offset:2px}
img{max-width:100%;height:auto}
/* hyphenation for long city names + responsive copy */
.cities span,.area-active .aa-name,.svc-modal-body p{overflow-wrap:break-word;word-break:break-word}
/* prevent horizontal scroll from edge artifacts */
html,body{overflow-x:clip}

/* ---- Section padding rhythm — smoother across widths ---- */
.pad{padding:clamp(60px, 9vw, 130px) 0}

/* ---- Hero h1 — smoother size scale; italic descenders need breathing room (see .ln padding) ---- */
.hero h1{font-size:clamp(2.4rem,5.6vw + .5rem,5.6rem);line-height:1.1}
.hero p.lede{font-size:clamp(1.04rem,.9vw + .8rem,1.22rem);max-width:580px}

/* ---- Section titles — smooth clamping ---- */
h2.title{font-size:clamp(1.9rem,3.4vw + .6rem,3.6rem);line-height:1.06}

/* ---- Buttons — min touch target 44px on mobile, gentle padding shift ---- */
@media(max-width:640px){
  .btn{padding:15px 26px;font-size:.96rem;gap:10px;min-height:48px}
  .btn-lg{padding:17px 30px;font-size:1rem}
  .hero-actions{gap:12px}
}
/* Stop button hover-jump on touch (prevents sticky-hover state) */
@media(hover:none){
  .btn-primary:hover{transform:none}
  .btn-ghost:hover{transform:none}
  .pk-tile:hover,.tcard:hover,.plan:hover,.inst-card:hover{transform:none}
}

/* ---- Header — slimmer on mobile ---- */
@media(max-width:640px){
  .nav{height:68px}
  .logo-mark{width:36px;height:36px}
  .logo-text{font-size:1.12rem}
  .logo-text span{font-size:.56rem;letter-spacing:.26em}
}

/* ---- Hero card — tighter padding mobile, no overflow ---- */
@media(max-width:640px){
  .hero-card{padding:24px 22px;border-radius:18px}
  .hero-card .h-like{font-size:1.22rem}
  .hero-live{margin:-10px -8px 18px;padding:12px 14px}
}
@media(max-width:380px){
  .hero-card{padding:20px 18px}
  .hero-live .hl-row{font-size:.74rem;gap:8px}
  .hero-live .hl-val{font-size:.88rem}
}

/* ---- Loader — scale to small viewports ---- */
@media(max-width:480px){
  .ld-logo-img{height:52px}
  .ld-scene{width:200px;height:100px;margin:4px 0 8px}
  .ld-gutter{bottom:30px;height:14px}
  .ld-water{font-size:.5em}
  .ld-down{top:46px;width:8px;height:50px;right:5px}
  .ld-pct{font-size:2.6rem}
  .ld-pct em{font-size:1.1rem}
  .ld-bar{width:170px}
  .ld-fill{font-size:.92rem;letter-spacing:.24em;text-align:center;max-width:88vw}
}

/* ---- Reviews — card hidden ≤640 (JS shows only the pill there); pill hugs the edge on phones ---- */
@media(max-width:560px){
  .rev-pill{right:12px;padding:10px 15px;font-size:.78rem}
}

/* ---- Sticky mobile bar — z-index above reviews widget so it never gets covered ---- */
.mob-bar{z-index:90}

/* ---- Trust strip — better mid-width layout ---- */
@media(max-width:1100px) and (min-width:761px){.trust-strip{grid-template-columns:repeat(3,1fr);gap:24px 18px}}
@media(max-width:760px) and (min-width:561px){.trust-strip{grid-template-columns:repeat(2,1fr);gap:20px 14px}}

/* ---- Job feed — readable on mobile, label collapses ---- */
@media(max-width:560px){
  .jf-label{padding:8px 12px;gap:6px}
  .jf-label strong{font-size:.7rem;letter-spacing:.12em}
  .jf-row{gap:8px;padding:9px 0}
  .jf-time,.jf-action,.jf-loc{font-size:.78rem}
  .jf-sep{margin:0 3px}
}

/* ---- Estimator — tablet 2-col earlier so it shines on iPad ---- */
@media(min-width:760px) and (max-width:980px){
  .est-wrap{grid-template-columns:1fr;gap:36px}
  .est-card{max-width:680px;margin:0 auto;width:100%}
  .est-head{max-width:680px;margin:0 auto;width:100%}
}
@media(max-width:520px){
  .est-card{padding:22px 20px}
  .seg{padding:4px;gap:3px}
  .seg button{padding:10px 8px;font-size:.82rem;min-width:60px}
  .est-row label em{font-size:1rem}
  .est-out{padding-top:18px;margin-top:4px}
  .est-price{font-size:clamp(1.45rem,5vw,1.85rem)}
  .est-sub{font-size:.78rem}
}

/* ---- Anatomy — better mobile stage proportions ---- */
@media(max-width:600px){
  .anat-stage{aspect-ratio:9/6}
  .anat-hot{width:28px;height:28px;font-size:.78rem}
  .anat-panel{min-height:240px;padding:24px 22px}
  .anat-card{inset:24px}
  .anat-card h3{font-size:1.32rem}
  .anat-card p{font-size:.95rem}
  .anat-fail{padding:12px 14px;font-size:.86rem}
  .anat-no{font-size:2.6rem}
}

/* ---- Showcase static (≤900) — tighter ---- */
@media(max-width:900px){
  .showcase.static .sc-inner{padding:0 24px}
  .sc-item h3{font-size:1.8rem}
  .sc-item p{font-size:1rem}
}

/* ---- Picker — keep 2-col through tablet, stack on phone ---- */
@media(min-width:760px) and (max-width:980px){
  .picker-grid{grid-template-columns:1fr;gap:36px}
  .picker-stage{max-width:680px;margin:0 auto;width:100%}
}
@media(max-width:520px){
  .pk-tiles{gap:8px}
  .pk-tile{padding:12px 10px}
  .pk-tile span{font-size:.94rem}
  .pk-tile em{font-size:.7rem}
  .pk-sw{padding:9px 6px}
  .pk-sw i{width:28px;height:28px}
  .pk-sw b{font-size:.64rem}
  .pk-cta .btn{font-size:.92rem;padding:14px 20px}
}

/* ---- Crew — 2-col through tablet ---- */
@media(min-width:760px) and (max-width:980px){
  .crew-grid{grid-template-columns:1fr;gap:36px}
  .crew-photos{max-width:680px;margin:0 auto;width:100%}
}
@media(max-width:560px){
  .crew-photo-tall{aspect-ratio:4/4.4}
  .crew-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .cs{padding:12px 8px}
  .cs .n{font-size:1.22rem}
  .cs .l{font-size:.66rem}
}

/* ---- Quiz — comfortable on mobile ---- */
@media(max-width:520px){
  .quiz-card{padding:26px 20px}
  .quiz-step h3{font-size:1.32rem;margin-bottom:18px}
  .quiz-opts button{padding:14px 16px;font-size:.92rem}
  .quiz-grade{font-size:3.8rem}
  .quiz-rec{padding:14px 22px}
}

/* ---- Comparison — collapse columns gracefully on phone ---- */
@media(max-width:520px){
  .cmp-head{padding:14px 12px;grid-template-columns:1.4fr .5fr .5fr .5fr}
  .cmp-r{padding:14px 12px;grid-template-columns:1.4fr .5fr .5fr .5fr}
  .cmp-l{font-size:.84rem;padding-right:6px}
  .cmp-col-name{font-size:.76rem}
  .cmp-yes,.cmp-no{width:22px;height:22px}
  .cmp-yes::after{width:6px;height:11px;border-width:2px}
  .cmp-mid{padding:3px 7px;font-size:.6rem}
}

/* ---- Plans — featured stays prominent on mobile ---- */
@media(max-width:900px){
  .plan.featured{transform:none;margin:24px 0;box-shadow:0 20px 50px -20px rgba(193,118,58,.4)}
  .plan-flag{top:-10px}
}

/* ---- FAQ — side-by-side at tablet, stack mobile ---- */
@media(min-width:760px) and (max-width:900px){
  .faq-wrap{grid-template-columns:.85fr 1.15fr;gap:36px}
}
@media(max-width:520px){
  .faq-item summary{padding:18px 22px;font-size:1rem;gap:14px}
  .faq-body{padding:0 22px 20px;font-size:.95rem}
  .faq-tog{width:26px;height:26px}
}

/* ---- Service area map — text wraps OK on mobile ---- */
@media(max-width:760px){
  .area-wrap{padding:36px 24px}
  .area-map{aspect-ratio:480/360}
  .map-pin b{font-size:.58rem;padding:2px 4px}
  .area-active{padding:14px 16px;margin:20px 0 22px}
  .area-active .aa-name{font-size:1.18rem}
  .area-active .aa-meta{font-size:.8rem}
}

/* ---- Contact section — easier scan on mobile ---- */
@media(max-width:520px){
  .contact-detail{padding:16px 0;gap:12px}
  .cd-ico{width:42px;height:42px}
  .cd-ico svg{width:18px;height:18px}
  .contact-detail .v{font-size:1rem}
  .form{padding:24px 20px;border-radius:18px}
  .field{margin-bottom:14px}
  .field input,.field select,.field textarea{padding:12px 14px;font-size:.95rem;min-height:46px}
}

/* ---- Stats — readable at narrow widths ---- */
@media(max-width:520px){
  .stat .n{font-size:2.6rem}
  .stat .l{font-size:.86rem}
  .stats-grid{gap:36px 18px}
}

/* ---- Process — tighter ---- */
@media(max-width:520px){
  .step .sn{font-size:2.8rem}
  .step h3{font-size:1.18rem}
  .step p{font-size:.92rem}
}

/* ---- Testimonials — tighter quote at mobile ---- */
@media(max-width:520px){
  .tcard{padding:26px 22px;border-radius:16px}
  .tcard p{font-size:1.02rem}
}

/* ---- Footer — readable order at mobile ---- */
@media(max-width:440px){
  .foot-grid{gap:28px}
  .foot-col .foot-h{margin-bottom:14px}
  .foot-col a{font-size:.9rem;margin-bottom:10px}
}

/* ---- Modal — friendlier viewport ---- */
@media(max-width:520px){
  .svc-modal{padding:14px}
  .svc-modal-card{max-height:92vh;border-radius:18px}
  .svc-modal-head{padding:28px 22px 18px;border-radius:18px 18px 0 0}
  .svc-modal-head h3{font-size:1.5rem}
  .svc-modal-body{padding:20px 22px}
  .svc-modal-foot{padding:18px 22px 22px}
  .svc-modal-foot .btn{min-width:0}
  .svc-modal-price .val{font-size:1.4rem}
}

/* ---- Spotlight — disable on touch (perf) ---- */
@media(hover:none){.spot-section .spot{display:none}}

/* ---- Hero photo cycler — pause on touch to save battery ---- */
@media(hover:none){.scene-photo{transition:opacity 1.6s ease-in-out}}

/* ---- Forms — better mobile keyboard UX ---- */
@media(max-width:520px){
  .frow{grid-template-columns:1fr;gap:0}
  .frow .field{margin-bottom:14px}
}
input,textarea,select{font-size:max(16px, .95rem) !important} /* prevent iOS zoom on focus */

/* ---- Magnetic effect — only on hover-capable + non-reduced ---- */
@media(hover:none),(prefers-reduced-motion:reduce){
  [data-magnetic]{transform:none !important}
}

/* ---- Hero card max-width / centering at mobile ---- */
@media(max-width:980px){
  .hero-inner{padding-bottom:40px}
  .hero-card{max-width:560px;width:100%}
}

/* ---- Fabrication — comfortable mobile ---- */
@media(max-width:520px){
  .fab-photo-badge{top:14px;left:14px;padding:10px 14px 10px 12px;gap:8px}
  .fab-photo-badge strong{font-size:.68rem}
  .fab-photo-badge em{font-size:.82rem}
  .fab-stat .n{font-size:1.55rem}
}

/* ---- Better mobile-tablet kinetic ---- */
@media(max-width:520px){
  .kinetic{padding:60px 0}
  .kinetic .line{font-size:clamp(1.8rem,7vw,2.6rem)}
}

/* ---- Anatomy: hotspot tap target ---- */
@media(hover:none){
  .anat-hot{width:32px;height:32px}
}
/* ---- Anatomy: keep hotspots 3 + 6 inside the panel on small phones ---- */
@media(max-width:390px){
  .anat-hot[data-i="3"]{left:9%!important}
  .anat-hot[data-i="6"]{left:89%!important;top:84%!important}
}

/* ---- Pinned showcase: large screens (1440+) breathing room ---- */
@media(min-width:1440px){
  .sc-inner{max-width:1360px;gap:80px}
}

/* ---- Hero card backdrop blur fallback ---- */
@supports not (backdrop-filter: blur(14px)){
  .hero-card{background:rgba(14,24,20,.94)}
  .form{background:rgba(14,24,20,.6)}
  .mob-bar{background:rgba(14,24,20,.96)}
}


/* =====================================================================
   PHONE + TEXT — buttons, contact details, mobile bar 3-col
   ===================================================================== */

/* =====================================================================
   TEXT-FIRST — SMS is the promoted contact path sitewide
   ===================================================================== */
/* Promoted Text button (overrides .btn-ghost it sits on) */
.btn-text{background:linear-gradient(180deg,rgba(193,118,58,.28),rgba(193,118,58,.12));border:1.5px solid var(--copper);color:var(--cream);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 26px -12px rgba(193,118,58,.6)}
.btn-text:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(193,118,58,.42),rgba(193,118,58,.2));border-color:var(--copper-light);color:var(--cream);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 18px 38px -14px rgba(193,118,58,.72)}
.btn-text svg{color:var(--copper-light)}
/* FAQ sits on a light section — make Text solid copper so it dominates Call */
.faq-head .btn-text{background:var(--copper);border:1.5px solid var(--copper);color:var(--cream)}
.faq-head .btn-text:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:var(--cream)}
.faq-head .btn-text svg{color:var(--cream)}

/* Nav "Text us" — copper-outline pill, sits before the solid Free-Estimate CTA */
.nav-text{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--copper);color:var(--copper-light)!important;padding:9px 18px;border-radius:50px;font-weight:600;opacity:1!important;transition:background .25s,color .25s}
.nav-text svg{width:16px;height:16px}
.nav-text:hover{background:var(--copper);color:var(--cream)!important}
.nav-links .nav-text::after{display:none!important}

/* Hero text-first reassurance line under the action buttons */
.hero-textfirst{display:flex;align-items:flex-start;gap:11px;margin-top:20px;max-width:460px;color:rgba(244,237,225,.8);font-size:.94rem;line-height:1.5;opacity:0}
.reveal-ready .hero-textfirst{animation:fadeUp .9s 1.45s ease forwards}
.hero-textfirst svg{width:21px;height:21px;flex-shrink:0;margin-top:1px;color:var(--copper-light)}
.hero-textfirst strong{color:var(--cream);font-weight:700}

/* Contact "Text us" row — copper icon + Fastest-reply flag */
.cd-text .cd-ico{background:var(--copper)}
.cd-text .cd-ico svg{color:var(--cream)}
.cd-flag{display:inline-block;margin-left:9px;background:var(--copper);color:var(--cream);font-size:.6rem;font-weight:800;letter-spacing:.1em;padding:3px 9px;border-radius:30px;vertical-align:middle;-webkit-text-fill-color:var(--cream)}

/* FAQ CTA row — call + text side by side */
.faq-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.faq-cta-row .btn{flex:1;min-width:0;justify-content:center;padding:14px 22px;font-size:.95rem}
@media(max-width:520px){.faq-cta-row{gap:10px}.faq-cta-row .btn{padding:13px 16px;font-size:.9rem}}

/* Contact details — clickable link rows for call/text/email */
.contact-detail-link{text-decoration:none;color:inherit;cursor:pointer}
.contact-detail-link:hover .cd-ico{background:var(--copper);transform:rotate(-8deg)}
.contact-detail-link:hover .cd-ico svg{color:var(--cream)}
.contact-detail-link:hover .v{color:var(--copper-light)}
.contact-detail .v{transition:color .25s}

/* Sticky mobile bar — text-first: Text us (dominant copper) | Call */
.mob-bar{grid-template-columns:1.7fr 1fr}
.mob-text{color:var(--cream);background:var(--copper);border:1px solid var(--copper);display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;font-family:var(--sans);font-weight:700;font-size:.9rem;line-height:1;white-space:nowrap;min-width:0;text-decoration:none;border-radius:14px;margin:0 4px;transition:.25s;box-shadow:0 8px 22px -10px rgba(193,118,58,.7)}
.mob-text:hover{background:var(--copper-light)}
.mob-text svg{width:18px;height:18px}
/* single-row bar guarantee: shrink labels (not wrap) as width tightens */
@media(max-width:420px){
  .mob-bar a{font-size:.84rem;gap:6px;margin:0 3px}
}
@media(max-width:380px){
  .mob-bar a{padding:11px 6px;font-size:.8rem;margin:0 2px}
  .mob-quote svg{display:none}
}

/* =====================================================================
   ROUND 2 — STRUCTURE + CONVERSION + COPY
   ===================================================================== */

/* ---- 2.2 Showcase, mobile: card-framed services, photo above title ---- */
.sc-chip{display:none}
.showcase.static .sc-chip{display:inline-flex;align-items:center;background:rgba(193,118,58,.16);border:1px solid rgba(224,151,92,.45);color:var(--copper-light);font-family:var(--serif);font-weight:600;font-size:.8rem;letter-spacing:.16em;padding:4px 12px;border-radius:30px;margin-bottom:14px}
.showcase.static .sc-item{background:var(--char-2);border:1px solid var(--line);border-radius:24px;padding:22px 22px 26px;margin-bottom:24px;overflow:hidden}
.showcase.static .sc-item .sc-visual{position:relative;height:auto;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin:0 0 18px;display:block;opacity:1;transform:none}
.showcase.static .sc-item .sc-visual .photo-slot{position:absolute;inset:0}
.showcase.static .sc-right{display:none}
.showcase.static .sc-slide{margin-bottom:8px}

/* ---- 2.3 Service-modal opener visible in the pinned desktop layout ---- */
.sc-mblock{display:block;margin-top:26px}
.showcase:not(.static) .sc-slide{min-height:340px}
.showcase.static .sc-mblock{border-top:1px solid var(--line);padding-top:32px;margin-top:8px}

/* ---- 2.4 Context-carry: attached chip + copper field flash ---- */
.pf-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(193,118,58,.16);border:1px solid rgba(224,151,92,.5);color:var(--copper-light);font-size:.8rem;font-weight:700;letter-spacing:.04em;padding:7px 14px;border-radius:30px;margin-bottom:16px;animation:fadeUp .5s ease}
.pf-flash{animation:pfFlash 1.2s ease}
@keyframes pfFlash{0%{border-color:var(--copper-light);box-shadow:0 0 0 4px rgba(224,151,92,.22)}100%{border-color:var(--line);box-shadow:0 0 0 0 rgba(224,151,92,0)}}

/* ---- 2.6 After-hours: Text is the primary action on the sticky bar ---- */
.after-hours .mob-text{background:var(--copper);border-color:var(--copper);color:var(--cream)}
.after-hours .mob-text:hover{background:var(--copper-light)}

/* ---- 2.7 Trust micro-strip above submit ---- */
.form-trust{display:block;text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:rgba(244,237,225,.72);background:rgba(193,118,58,.10);border:1px solid rgba(224,151,92,.28);border-radius:10px;padding:10px 14px;margin:2px 0 6px;line-height:1.5}

/* ---- 2.8 Bid-shopping block beside the comparison table ---- */
.bidshop{max-width:760px;margin:48px auto 0;text-align:center;background:var(--cream);border:1px solid var(--sand);border-left:3px solid var(--copper);border-radius:18px;padding:34px 38px}
@media(max-width:520px){.bidshop{padding:26px 22px;margin-top:36px}}
.bidshop h3{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:var(--char);margin-bottom:12px;line-height:1.1}
.bidshop h3 em{font-style:italic;color:var(--copper-deep)}
.bidshop p{color:#56615a;font-size:1.02rem;line-height:1.6}

/* ---- 2.9/2.10 estimator result: longer CTA label stacks under the price ---- */
.est-out{grid-template-columns:1fr;gap:16px}
.est-out .btn{justify-content:center}

/* ---- 2.9 "Text me this estimate" on the estimator result ---- */
.est-sms-row{margin-top:16px;position:relative;z-index:1}
.est-sms{display:inline-flex;align-items:center;gap:8px;color:var(--copper-light);font-weight:700;font-size:.92rem;text-decoration:none;letter-spacing:.02em;background:rgba(193,118,58,.14);border:1.5px solid var(--copper);border-radius:50px;padding:11px 22px;transition:.25s}
.est-sms:hover{color:var(--cream);background:var(--copper);border-color:var(--copper)}
.est-sms svg{width:16px;height:16px;flex-shrink:0}

/* ---- 2.13 Footer signature moment ---- */
.foot-sig{text-align:center;padding:14px 0 60px;border-bottom:1px solid var(--line);margin-bottom:56px}
.fs-line{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(2.2rem,5.4vw,4.4rem);letter-spacing:-.02em;line-height:1.12;color:var(--cream)}
.fs-line em{color:var(--copper-light)}
.fs-rule{width:120px;height:1px;margin:26px auto;background:linear-gradient(90deg,transparent,var(--copper),transparent)}
.fs-phone{display:inline-block;font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.01em;color:var(--copper-light);text-decoration:none;transition:color .3s}
.fs-phone:hover{color:var(--cream)}
.fs-town{margin-top:10px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,237,225,.55);font-weight:700}

/* ---- 2.14 Contact form legibility: solid panel + solid dark inputs ---- */
.contact .form{background:rgba(19,32,26,.95);border:1px solid var(--line);border-top:1px solid var(--copper)}
.field input,.field select,.field textarea{background:var(--char-2);border-color:rgba(244,237,225,.16)}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--char-3);border-color:var(--copper)}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,237,225,.66)}
@media(min-width:901px){
  .contact .sec-bg{width:56%;-webkit-mask:linear-gradient(90deg,#000 60%,transparent);mask:linear-gradient(90deg,#000 60%,transparent)}
}

/* ---- 2.15 Compare table: keep the copper "US" pill inside the clip ---- */
@media(max-width:520px){
  .cmp-head{padding-top:36px}
  .cmp-col.best::before{top:-28px}
}

/* ---- 2.16 Scrollspy: active nav link = full-width underline, full opacity ---- */
.nav-links a:not(.nav-cta).active{opacity:1}
.nav-links a:not(.nav-cta).active::after{width:100%}

@media(prefers-reduced-motion:reduce){
  .pf-chip,.pf-flash{animation:none}
}

/* =====================================================================
   ROUND 3a — MOTION LAYER
   ===================================================================== */

/* ---- 3a.4 Grain overlay — static FP fractalNoise, sits over everything but cursor/loader ---- */
.grain{position:fixed;inset:0;z-index:1500;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}

/* ---- 3a.3 Directional reveals — pre-reveal slide-in offset.
   NOTE: .reveal.in{transform:none} does NOT clear these — equal specificity (0,2,0)
   but these rules come later in source order, so they'd win and the element would
   stay stuck 32px off after reveal (clips past the left edge on mobile). The .in
   reset below is higher specificity (0,3,0) so the revealed state lands at 0. ---- */
.reveal[data-dir="left"]{transform:translateX(-32px)}
.reveal[data-dir="right"]{transform:translateX(32px)}
.reveal[data-dir="left"].in,.reveal[data-dir="right"].in{transform:none}

/* ---- 3a.5 Aurora drift on the existing static radial glows ---- */
@keyframes aurA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,22px) scale(1.06)}}
@keyframes aurB{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-18px)}}
@keyframes aurC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18px,-26px) scale(1.05)}}
.anatomy::before{animation:aurA 26s ease-in-out infinite}
.stats::before{animation:aurB 18s ease-in-out infinite}
.plans::before{animation:aurC 32s ease-in-out infinite}
.crew::before{animation:aurB 26s ease-in-out infinite reverse}
.est-card::before{animation:aurA 18s ease-in-out infinite}
.quiz-card::before{animation:aurC 26s ease-in-out infinite reverse}
@media(max-width:760px){
  .anatomy::before,.stats::before,.plans::before,.crew::before,.est-card::before,.quiz-card::before{animation:none}
}

/* ---- 3a.6 Hero finishers: Ken Burns on the active photo + lightning rim-strike ---- */
.scene-photo.active{animation:kb 9s ease-out forwards}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-card{transition:box-shadow .3s ease}
.hero-card.strike{box-shadow:0 0 0 1.5px rgba(244,237,225,.4),0 0 44px -4px rgba(244,237,225,.3),0 30px 70px -20px rgba(0,0,0,.55)}

/* ---- 3a.7 Estimator range: copper filled track via --p (set from JS on input) ---- */
input[type=range]#estLF{background:linear-gradient(90deg,var(--copper-light) var(--p,29.4%),rgba(244,237,225,.15) var(--p,29.4%))}

/* ---- 3a.9 Area map: faint I-81 / I-77 route lines linking the pins ---- */
.map-routes{pointer-events:none}

/* ---- 3a.10 Nav/footer micro-motion + typography niceties ---- */
.hero h1,h2.title{text-wrap:balance}
section[id]{scroll-margin-top:84px}

@media(prefers-reduced-motion:reduce){
  /* infinite aurora loops would spin at 1000Hz under the .001s rule — kill outright */
  .anatomy::before,.stats::before,.plans::before,.crew::before,.est-card::before,.quiz-card::before{animation:none!important}
  .scene-photo.active{animation:none!important}
}

/* =====================================================================
   ROUND 3b — SIGNATURE: real weather, honest slots, storm test, gallons
   ===================================================================== */

/* ---- 3b.1 weather-driven storm-risk chip levels ---- */
.hero-live .hl-elevated{color:#e9c98e;text-shadow:0 0 12px rgba(233,201,142,.3)}
.hero-live .hl-severe{color:var(--copper-light);text-shadow:0 0 14px rgba(224,151,92,.55);animation:hlSevere 1.6s ease-in-out infinite}
@keyframes hlSevere{0%,100%{opacity:1}50%{opacity:.55}}
.hero-live .hl-rain{font-family:var(--serif);font-style:italic;font-size:.8rem;color:var(--copper-light);letter-spacing:.01em;line-height:1.4}

/* ---- 3b.2 honest slots: after-hours phrase replaces the count ---- */
.hero-live .hl-val.hl-tmrw{font-size:.85rem}

/* ---- 3b.3 Storm Test on the customizer ---- */
/* the storm rows make .picker-controls taller than the stage; with the grid's
   align-items:stretch the stage's aspect-ratio transfers the stretched height
   back into WIDTH and it overflows its column (covering the controls) — pin it */
.picker-grid .picker-stage{align-self:center}
.pk-storm-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pk-storm-mode{margin-top:8px}
.pk-storm-mode[hidden],.pk-storm-cap[hidden]{display:none!important}
.pk-storm-cap{margin-top:10px;font-size:.78rem;color:#56615a;line-height:1.5}
.pk-risk{position:absolute;left:43%;bottom:8%;transform:translateX(-50%) translateY(6px);background:rgba(14,24,20,.92);border:1px solid rgba(181,82,74,.7);color:#e8a49e;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:30px;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;z-index:3;white-space:nowrap}
.pk-risk.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 3b.4 gallons odometer in the estimator ---- */
.est-gal{padding:14px 16px;background:rgba(244,237,225,.05);border:1px solid rgba(244,237,225,.1);border-radius:14px}
.eg-line{font-size:.9rem;color:rgba(244,237,225,.85);line-height:1.5}
.eg-line strong{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--copper-light);letter-spacing:-.01em;margin-right:2px}
.eg-badge{display:inline-block;margin-left:8px;background:rgba(193,118,58,.16);border:1px solid rgba(224,151,92,.5);color:var(--copper-light);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:30px;vertical-align:1px}
.eg-badge[hidden]{display:none!important}
.eg-tubs{display:flex;gap:5px;margin:10px 0 8px;flex-wrap:wrap}
.eg-tubs svg{width:20px;height:17px;display:block}
.eg-tubs .eg-o{fill:none;stroke:rgba(244,237,225,.45);stroke-width:1.6}
.eg-tubs .eg-w{fill:var(--copper-light);opacity:.85}
.eg-sub{font-size:.76rem;color:rgba(244,237,225,.6)}
@media(max-width:760px){
  .eg-tubs svg{width:16px;height:14px}
}
@media(prefers-reduced-motion:reduce){
  .hero-live .hl-severe{animation:none!important}
  .pk-risk{transition:none}
}

/* ============================================================
   ROUND 4 — imagery integration
   ============================================================ */

/* ---- 4.1 kinetic band: Blue Ridge dusk behind the marquee ---- */
.kinetic{position:relative}
.kinetic .line{position:relative;z-index:1}
.kinetic .sec-bg{opacity:.18;object-position:center 48%;filter:saturate(.9) brightness(.75)}

/* ---- 4.2 guards showcase: framed micro-mesh diagram card ---- */
.sc-diagram{display:flex;align-items:center;gap:14px;margin-top:22px;max-width:440px;background:rgba(244,237,225,.05);border:1px solid var(--line);border-radius:14px;padding:10px}
.sc-diagram img{width:116px;height:87px;object-fit:cover;border-radius:9px;border:1px solid rgba(224,151,92,.3);flex-shrink:0;display:block}
.sc-diagram figcaption{font-size:.82rem;color:rgba(244,237,225,.65);line-height:1.45;padding-right:6px}
/* desktop pinned mode: guards item (391px content) needs more slide room than the 340px default */
.showcase:not(.static) .sc-slide{min-height:400px}
/* static (mobile) mode: let the diagram breathe full-width inside the card */
.showcase.static .sc-diagram{flex-direction:column;align-items:stretch;gap:10px;max-width:none}
.showcase.static .sc-diagram img{width:100%;height:auto;aspect-ratio:1200/896}

/* ---- 4.3 plans background texture (very faint) ---- */
.sec-bg-tex{opacity:.1;filter:saturate(.85) brightness(.8)}
.plans .wrap{position:relative;z-index:1}

/* ---- 4.4 plan card art bands ---- */
.plan-art{height:90px;margin:-36px -32px 22px;border-radius:21px 21px 0 0;overflow:hidden}
.plan-art img{width:100%;height:90px;object-fit:cover;display:block;filter:saturate(.95)}
.plan .plan-flag{z-index:2} /* art-band img filter creates a stacking context that would paint over the flag */

/* ---- 4.5 material swatch chips (estimator + picker legend) ---- */
.seg[data-est="material"] button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mat-chip{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(244,237,225,.3);pointer-events:none;display:block}
.pk-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.pk-leg{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:#56615a}
.pk-leg img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--sand);box-shadow:0 2px 6px rgba(19,31,26,.18);display:block}
@media(max-width:640px){
  .seg[data-est="material"] .mat-chip{width:22px;height:22px}
}