:root{
  --black:#111111; --charcoal:#24211D; --warm:#F7F5F0; --white:#FFFFFF;
  --gold:#B58A3A; --gold-lt:#D4B06A; --line:#DDD8CE; --body:#3A3733;
  --d:'Libre Baskerville',Georgia,serif; --u:'Manrope',system-ui,sans-serif;
  --r:6px; --ease:cubic-bezier(.22,.61,.36,1); --t:240ms;
  --wrap:1180px; --nav-h:78px;
  --logo:url("/img/logo.webp");
  /* fine metallic gold trim: light rakes across the edge like polished brass */
  --goldline:linear-gradient(135deg,#6E5323 0%,#D4B06A 18%,#8A6A2A 36%,#F0E0B0 52%,#B58A3A 70%,#D4B06A 86%,#6E5323 100%);
  --panelfill:rgba(36,33,29,.62);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--warm);color:var(--body);font-family:var(--u);font-size:17.5px;line-height:1.65}
body.locked{overflow:hidden}
h1,h2,h3{font-family:var(--d);font-weight:700;line-height:1.22;letter-spacing:-.005em;margin:0 0 .5em;color:var(--charcoal)}
h1{font-size:clamp(2.05rem,4.6vw,3.5rem);line-height:1.14}
h2{font-size:clamp(1.65rem,3vw,2.4rem)}
h3{font-size:clamp(1.05rem,1.4vw,1.2rem);font-family:var(--u);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sect{padding:clamp(60px,7.5vw,108px) 0}
.eyebrow{font-family:var(--u);font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.lede{font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:60ch}
.acc{font-family:var(--d);font-style:italic;font-weight:400;color:var(--gold)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:300;background:var(--black);color:var(--warm);padding:12px 18px;border-radius:var(--r)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 28px;
 font-family:var(--u);font-size:1rem;font-weight:700;text-decoration:none;border:1.5px solid transparent;border-radius:var(--r);cursor:pointer;
 transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.btn--p{background:var(--black);color:var(--warm)}
.btn--p:hover{background:#000;transform:translateY(-2px)}
.btn--g{background:transparent;color:var(--charcoal);border-color:rgba(36,33,29,.34)}
.btn--g:hover{border-color:var(--charcoal);background:rgba(36,33,29,.05)}
.btn--l{background:var(--warm);color:var(--black)}
.btn--l:hover{background:#fff;transform:translateY(-2px)}
.btn--lg{background:transparent;color:var(--warm);border-color:rgba(247,245,240,.45)}
.btn--lg:hover{border-color:var(--warm);background:rgba(247,245,240,.1)}
.btn--gold{background:var(--gold);color:var(--black)}
.btn--gold:hover{background:var(--gold-lt);transform:translateY(-2px)}

/* ---- T1 GLARE (base fill = clipped background-color, overlay adds light only) ---- */
.glare{--sheen:var(--warm);position:relative;display:inline-block;color:var(--sheen)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .glare{background-color:var(--sheen);
  background-image:linear-gradient(100deg,transparent 0 42%,rgba(255,255,255,.95) 50%,transparent 58% 100%);
  background-size:260% 100%;background-position:100% 0;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:glare 7.5s var(--ease) 1.2s infinite}
}
@keyframes glare{0%{background-position:100% 0}34%,100%{background-position:0% 0}}

/* ---- S1 REVEAL ---- */
[data-rev]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*85ms)}
[data-rev].in{opacity:1;transform:none}

/* ================= LOGO REVEAL CURTAIN ================= */
#curtain{position:fixed;inset:0;z-index:500;background:var(--black);display:flex;align-items:center;justify-content:center;
 transition:opacity .9s var(--ease),visibility 0s linear .9s}
#curtain .mark{width:min(72vw,620px);aspect-ratio:788/540;background:var(--logo) center/contain no-repeat;
 animation:curtainIn 1.1s var(--ease) both}
#curtain .hint{position:absolute;left:0;right:0;bottom:38px;text-align:center;font-family:var(--u);font-size:.72rem;
 font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,245,240,.5);animation:hintPulse 2.4s var(--ease) 1.4s infinite}
@keyframes curtainIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes hintPulse{0%,100%{opacity:.32}50%{opacity:.8}}
#curtain.gone{opacity:0;visibility:hidden;pointer-events:none}

/* ---- NAV ---- */
#nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);background:transparent;border-bottom:1px solid transparent;
 transition:background .34s var(--ease),border-color .34s var(--ease),box-shadow .34s var(--ease)}
#nav .bar{display:flex;align-items:center;gap:20px;height:var(--nav-h);max-width:var(--wrap);margin:0 auto;padding:0 24px}
#nav.solid{background:var(--black);border-bottom-color:rgba(181,138,58,.26);box-shadow:0 6px 26px rgba(17,17,17,.2)}
#nav .brand{display:flex;align-items:center;margin-right:auto;text-decoration:none}
#nav .brand .lg{width:78px;height:53px;background:var(--logo) left center/contain no-repeat}
#nav .links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
#nav .links a{font-family:var(--u);font-size:.93rem;font-weight:600;color:rgba(247,245,240,.86);text-decoration:none;padding:6px 0;position:relative;transition:color var(--t) var(--ease)}
#nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--gold);transition:right var(--t) var(--ease)}
#nav .links a:hover,#nav .links a[aria-current="true"]{color:var(--warm)}
#nav .links a:hover::after,#nav .links a[aria-current="true"]::after{right:0}
#nav .cta{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;border-radius:var(--r);background:var(--gold);color:var(--black);
 font-family:var(--u);font-weight:800;font-size:.92rem;text-decoration:none;white-space:nowrap;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
#nav .cta:hover{background:var(--gold-lt);transform:translateY(-1px)}
#nav .tel{display:none;align-items:center;min-height:44px;padding:11px 16px;border-radius:var(--r);border:1px solid rgba(247,245,240,.4);
 color:var(--warm);font-family:var(--u);font-weight:700;font-size:.92rem;text-decoration:none}
#nav .burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(247,245,240,.34);border-radius:var(--r);cursor:pointer}
#nav .burger span{display:block;position:relative;width:20px;height:1.8px;background:var(--warm);transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
#nav .burger span::before,#nav .burger span::after{content:"";position:absolute;left:0;width:20px;height:1.8px;background:var(--warm);transition:transform var(--t) var(--ease),top var(--t) var(--ease)}
#nav .burger span::before{top:-6px}#nav .burger span::after{top:6px}
#nav .burger[aria-expanded="true"] span{background:transparent}
#nav .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
#nav .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
#drawer{position:fixed;inset:var(--nav-h) 0 auto;z-index:99;background:var(--black);border-bottom:1px solid rgba(181,138,58,.26);display:none;padding:10px 24px 26px}
#drawer.open{display:block}
#drawer ul{list-style:none;margin:0;padding:0}
#drawer a{display:block;padding:15px 2px;font-family:var(--u);font-weight:600;font-size:1.06rem;color:var(--warm);text-decoration:none;border-bottom:1px solid rgba(247,245,240,.13)}

/* ---- HERO ---- */
#hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:center;overflow:hidden;background:var(--black)}
#hero .bg{position:absolute;inset:0;overflow:hidden}
#hero .bg img{width:100%;height:100%;object-fit:cover;transform-origin:56% 46%;animation:kb 28s var(--ease) infinite alternate}
@keyframes kb{0%{transform:scale(1.02)}100%{transform:scale(1.14) translate3d(-1.4%,-1.2%,0)}}
#hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.62) 0,rgba(17,17,17,.3) 32%,rgba(17,17,17,.5) 66%,rgba(17,17,17,.88) 100%)}
#hero .inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:calc(var(--nav-h) + 56px) 24px 56px}
/* charcoal translucent glass panel behind hero text */
#hero .panel{position:relative;max-width:760px;padding:clamp(28px,4vw,46px);border-radius:14px;
 background:rgba(36,33,29,.62);border:1px solid rgba(181,138,58,.55);
 -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
 box-shadow:0 26px 70px rgba(0,0,0,.4)}
#hero .serving{display:inline-flex;align-items:center;gap:9px;font-family:var(--u);font-size:.73rem;font-weight:800;letter-spacing:.18em;
 text-transform:uppercase;color:var(--gold-lt);border:1px solid rgba(212,176,106,.45);border-radius:100px;padding:8px 15px;margin-bottom:22px}
#hero .serving .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-lt)}
#hero h1{color:var(--warm);margin-bottom:18px;max-width:17ch}
#hero .sub{max-width:52ch;font-size:clamp(1.02rem,1.3vw,1.16rem);color:rgba(247,245,240,.92);margin-bottom:28px}
#hero .acts{display:flex;flex-wrap:wrap;gap:13px}
#hero .strip{position:relative;z-index:2;padding:0 24px 30px}
#hero .strip ul{position:relative;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0 auto;padding:0;
 max-width:calc(var(--wrap) - 48px);border-radius:14px;
 background:rgba(17,17,17,.74);border:1px solid rgba(181,138,58,.55)}
/* Metallic ring only. The gradient lives in a 1px masked frame so it can never
   tint the glass behind it. Solid gold border above is the fallback. */
#hero .panel::after,#hero .strip ul::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
 padding:1px;background:var(--goldline);pointer-events:none;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
 #hero .panel,#hero .strip ul{border-color:transparent}
}
#hero .strip li{padding:17px 22px;font-family:var(--u);font-size:.86rem;font-weight:600;color:rgba(247,245,240,.94);
 border-left:1px solid rgba(181,138,58,.42)}
#hero .strip li:first-child{border-left:0}
#hero .strip b{display:block;font-size:.69rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:3px}

/* ---- SERVICES ---- */
#services{background:var(--white)}
#services .head{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:end;margin-bottom:46px}
/* ================= STACKED CARDS =================
   TUNING (all the knobs live here)
     --stack-top    : where the first card locks, below the nav
     --stack-step   : cumulative offset per card, so each one leaves a visible
                      strip of the card beneath it (card 1 top, card 2 +step, ...)
     --stack-gap    : scroll distance between one card landing and the next
     --stack-scale  : how much a card shrinks per card stacked on top of it
     --stack-depth  : how many cards deep the shrink keeps accumulating
   Cards are DIRECT siblings of .stack. Sticky is scoped to the nearest scrolling
   ancestor, so they must share one parent or each card unsticks at its own
   wrapper. No ancestor may set overflow other than visible/clip. */
#services .stack{--stack-top:96px;--stack-step:20px;--stack-gap:26vh;
 --stack-scale:.02;--stack-depth:4;
 position:relative;max-width:860px;margin:44px auto 0}
#services .card{position:sticky;top:calc(var(--stack-top) + (var(--n) * var(--stack-step)));
 margin-bottom:var(--stack-gap);
 background:var(--warm);border:1px solid var(--line);border-radius:14px;padding:34px 34px 30px;min-height:300px;
 box-shadow:0 22px 52px rgba(17,17,17,.18);
 transform-origin:50% 0;will-change:transform;backface-visibility:hidden;
 transition:border-color var(--t) var(--ease)}
#services .card:last-child{margin-bottom:0}
#services .card:hover{border-color:var(--gold)}
#services .card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0B0A09;
 opacity:var(--veil,0);pointer-events:none;will-change:opacity}
#services .card .ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
 border:1px solid rgba(181,138,58,.45);border-radius:10px;margin-bottom:18px}
#services .card .ico svg{width:23px;height:23px;fill:none;stroke:var(--gold);stroke-width:1.6;
 stroke-linecap:round;stroke-linejoin:round}
#services .card .n{position:absolute;top:34px;right:34px;font-family:var(--u);font-size:.72rem;font-weight:800;
 letter-spacing:.16em;color:var(--gold);margin:0}
#services .card h3{font-size:clamp(1.25rem,2vw,1.55rem);margin-bottom:10px}
#services .card p{font-size:1.02rem;margin-bottom:22px}
#services .card .more{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;
 font-family:var(--u);font-size:.92rem;font-weight:700;text-decoration:none;color:var(--charcoal);
 background:transparent;border:1.5px solid rgba(36,33,29,.3);border-radius:var(--r);
 transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
#services .card .more:hover{border-color:var(--gold);background:rgba(181,138,58,.08)}
#services .card .n{font-family:var(--u);font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--gold);margin:0 0 14px}
#services .card h3{margin-bottom:8px}
#services .card p{font-size:.95rem;margin:0}
#services .note{margin-top:28px;font-size:.95rem}
#services .note strong{font-family:var(--u);color:var(--charcoal)}

/* ---- OUR WORK: infinite left-rotating carousel ----
   TUNING
     --loop-speed : seconds for one full pass of the set
     --loop-slide : slide width
     --loop-gap   : space between slides
   The track holds the set twice and travels exactly -50%, so the hand-off is
   seamless. The fade is a mask on the viewport, so a slide is fully opaque at
   centre and reaches 0% at both edges. */
#work{background:var(--black);color:var(--warm)}
#work h2{color:var(--warm)}
#work .lede{color:rgba(247,245,240,.82)}
#work .head{max-width:64ch;margin-bottom:40px}
#work .loop{--loop-speed:46s;--loop-slide:clamp(260px,34vw,520px);--loop-gap:26px;
 position:relative;width:100%;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 66%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 66%,transparent 100%)}
#work .track{display:flex;gap:var(--loop-gap);width:max-content;
 animation:workLoop var(--loop-speed) linear infinite;will-change:transform}
#work .loop:hover .track{animation-play-state:paused}
@keyframes workLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--loop-gap) / 2)),0,0)}}
#work .slide{flex:0 0 var(--loop-slide);aspect-ratio:4/3;border-radius:14px;overflow:hidden;
 background:var(--charcoal);margin:0;position:relative}
#work .slide img{width:100%;height:100%;object-fit:cover;display:block}
#work .slide--mark{background:var(--black);display:flex;align-items:center;justify-content:center}
#work .slide--mark img{width:74%;height:auto;object-fit:contain}
#work .loopcta{display:flex;justify-content:center;margin-top:38px}
#work .disclose{margin-top:26px;padding:16px 20px;border:1px solid rgba(181,138,58,.36);border-radius:var(--r);
 background:rgba(247,245,240,.05);font-size:.92rem;color:rgba(247,245,240,.8)}
#work .disclose strong{font-family:var(--u);color:var(--gold-lt)}

/* ---- PROCESS ---- */
#process{background:var(--warm)}
#process .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
#process .step{border-top:2px solid var(--charcoal);padding-top:20px}
#process .step .num{font-family:var(--d);font-size:2.4rem;font-weight:700;line-height:1;color:var(--line);margin:0 0 12px}
#process .step h3{margin-bottom:7px}
#process .step p{font-size:.95rem;margin:0}

/* start-to-finish strip: the same built-in at every stage */
#process .flow{margin-top:clamp(56px,7vw,84px)}
#process .flow .sh{max-width:62ch;margin-bottom:34px}
#process .flow h3{font-family:var(--d);font-weight:700;font-size:clamp(1.65rem,3vw,2.4rem);line-height:1.22;
 letter-spacing:-.005em;color:var(--charcoal);margin:0 0 .5em}
#process .flow .row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
#process .flow figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--black);aspect-ratio:3/4;
 transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
#process .flow figure:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(17,17,17,.24)}
#process .flow figure img{width:100%;height:100%;object-fit:cover;display:block}
#process .flow figcaption{position:absolute;inset:auto 0 0;padding:34px 14px 14px;
 background:linear-gradient(180deg,transparent,rgba(17,17,17,.94));
 font-family:var(--u);font-size:.84rem;font-weight:700;color:var(--warm)}
#process .flow figcaption span{display:block;font-size:.76rem;font-weight:400;color:rgba(247,245,240,.72);margin-top:2px}

/* ---- ABOUT ---- */
#about{background:var(--white)}
#about .grid{display:grid;grid-template-columns:minmax(260px,390px) minmax(0,1fr);gap:clamp(28px,4vw,58px);align-items:center}
#about .shot{position:relative;background:var(--black);border-radius:var(--r);overflow:hidden;box-shadow:0 22px 54px rgba(17,17,17,.18)}
#about .shot .cap{position:absolute;inset:auto 0 0;padding:44px 20px 18px;background:linear-gradient(180deg,transparent,rgba(17,17,17,.94));color:var(--warm)}
#about .shot .cap b{display:block;font-family:var(--d);font-size:1.1rem}
#about .shot .cap span{font-family:var(--u);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
#about .txt{max-width:60ch}
#about blockquote{margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line);font-family:var(--d);font-style:italic;font-size:1.12rem;line-height:1.6;color:var(--charcoal)}

/* ---- PROOF ---- */
#proof{background:var(--warm)}
#proof .head{text-align:center;max-width:58ch;margin:0 auto 42px}
#proof .head .lede{margin-inline:auto}
#proof .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#proof .card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
 transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
#proof .card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(17,17,17,.1);border-color:var(--gold)}
#proof .stars{display:flex;gap:3px;margin-bottom:16px}
#proof .stars svg{width:17px;height:17px;fill:var(--gold);stroke:none}
#proof .card p{font-family:var(--d);font-style:normal;font-size:1rem;line-height:1.62;margin:0 0 18px;flex:1}
#proof .who{font-family:var(--u);font-size:.9rem;font-weight:800;color:var(--charcoal)}
#proof .who span{display:block;font-weight:400;font-size:.8rem;color:#6E6A63;margin-top:2px}
#proof .cta{text-align:center;margin-top:34px}
#proof .cta a{font-family:var(--u);font-weight:800;color:var(--charcoal);text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:3px}
#proof .cta a:hover{color:var(--gold)}

/* ---- FAQ ---- */
#faq{background:var(--white)}
#faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,60px);align-items:start}
#faq details{border-bottom:1px solid var(--line)}
#faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;cursor:pointer;padding:20px 0;
 font-family:var(--u);font-weight:700;font-size:1.02rem;color:var(--charcoal)}
#faq summary::-webkit-details-marker{display:none}
#faq summary .ic{flex:0 0 auto;width:24px;height:24px;position:relative}
#faq summary .ic::before,#faq summary .ic::after{content:"";position:absolute;background:var(--gold);transition:transform var(--t) var(--ease)}
#faq summary .ic::before{top:11px;left:3px;width:18px;height:1.6px}
#faq summary .ic::after{top:3px;left:11px;width:1.6px;height:18px}
#faq details[open] summary .ic::after{transform:scaleY(0)}
#faq .ans{padding:0 0 22px;max-width:64ch}
#faq .ans p:last-child{margin:0}

/* ---- AREA + LIVE ---- */
#area{background:var(--charcoal);color:var(--warm)}
#area h2,#area h3{color:var(--warm)}
#area .lede{color:rgba(247,245,240,.82)}
#area .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);align-items:start}
#area .tier{margin-top:26px}
/* regions collapse to their gold label; cities stay in the DOM for crawlers */
#area details{border-top:1px solid rgba(247,245,240,.14)}
#area details:last-of-type{border-bottom:1px solid rgba(247,245,240,.14)}
#area summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:16px 2px;
 font-family:var(--u);font-size:.72rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-lt)}
#area summary::-webkit-details-marker{display:none}
#area summary:hover{color:var(--warm)}
#area summary .ic{flex:0 0 auto;width:20px;height:20px;position:relative}
#area summary .ic::before,#area summary .ic::after{content:"";position:absolute;background:var(--gold);transition:transform var(--t) var(--ease)}
#area summary .ic::before{top:9px;left:2px;width:16px;height:1.6px}
#area summary .ic::after{top:2px;left:9px;width:1.6px;height:16px}
#area details[open] summary .ic::after{transform:scaleY(0)}
#area details[open] summary{color:var(--warm)}
#area .tier ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#area .tier li{font-family:var(--u);font-size:.9rem;font-weight:600;color:rgba(247,245,240,.9);
 border:1px solid rgba(247,245,240,.2);border-radius:100px;padding:6px 13px}
#area .caveat{margin-top:6px;font-size:.92rem;color:rgba(247,245,240,.68)}
#live{background:rgba(247,245,240,.06);border:1px solid rgba(181,138,58,.34);border-radius:var(--r);padding:26px 24px}
#live .top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
#live .beacon{display:inline-flex;align-items:center;gap:8px;font-family:var(--u);font-size:.66rem;font-weight:800;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gold-lt);border:1px solid rgba(212,176,106,.45);border-radius:100px;padding:6px 12px}
/* closed: steady red. open: pulsing green. pill border stays gold. */
#live .beacon i{width:7px;height:7px;border-radius:50%;background:#D9544E;box-shadow:0 0 0 0 rgba(217,84,78,0)}
#live.is-open .beacon i{background:#5BBE7A;animation:pulse 2.3s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(91,190,122,.65)}50%{opacity:.55;box-shadow:0 0 0 7px rgba(91,190,122,0)}}
#live .status{font-family:var(--d);font-size:clamp(1.7rem,3vw,2.1rem);font-weight:700;line-height:1.05;margin:0 0 6px;color:var(--warm)}
#live .subline{font-size:.97rem;color:rgba(247,245,240,.82);margin:0 0 20px}
#live .subline b{color:var(--gold-lt);font-family:var(--u)}
#live .week{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid rgba(247,245,240,.14)}
#live .week li{display:flex;justify-content:space-between;gap:14px;padding:9px 2px;font-size:.92rem;color:rgba(247,245,240,.74);border-bottom:1px solid rgba(247,245,240,.09)}
#live .week li.today{color:var(--warm);font-weight:600}
#live .week li.today .d::after{content:" · Today";color:var(--gold-lt);font-family:var(--u);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#live .week .d{font-family:var(--u);font-weight:600}
#live .btn{width:100%}
#live .clock{margin:14px 0 0;font-size:.82rem;color:rgba(247,245,240,.55);text-align:center}

/* ---- ESTIMATE ---- */
#estimate{background:var(--warm)}
#estimate .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,62px);align-items:start}
#estimate .why{list-style:none;margin:26px 0 0;padding:0}
#estimate .why li{position:relative;padding:0 0 14px 30px;font-size:1rem}
#estimate .why li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
#estimate .box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px);box-shadow:0 18px 44px rgba(17,17,17,.08)}
#estimate .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#estimate .f{margin-bottom:16px}
#estimate label{display:block;font-family:var(--u);font-size:.83rem;font-weight:800;color:var(--charcoal);margin-bottom:7px}
#estimate input,#estimate select,#estimate textarea{width:100%;min-height:50px;padding:13px 14px;font-family:var(--u);font-size:1rem;color:var(--charcoal);
 background:var(--white);border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--t) var(--ease)}
#estimate textarea{min-height:104px;resize:vertical}
#estimate input:focus,#estimate select:focus,#estimate textarea:focus{border-color:var(--gold)}
#estimate input:focus-visible,#estimate select:focus-visible,#estimate textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#estimate .hint{font-size:.85rem;color:#6E6А66;margin:4px 0 0}
#estimate .btn{width:100%;margin-top:6px}
#estimate .or{margin:16px 0 0;text-align:center;font-size:.93rem}
#estimate .or a{font-family:var(--u);font-weight:800;color:var(--charcoal);text-decoration:none;border-bottom:1.5px solid var(--gold)}
#estimate .done{display:none;text-align:center;padding:22px 6px}
#estimate .done.on{display:block}
#estimate .done .mk{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--black);position:relative}
#estimate .done .mk::after{content:"";position:absolute;left:17px;top:15px;width:18px;height:10px;border-left:2.5px solid var(--gold-lt);border-bottom:2.5px solid var(--gold-lt);transform:rotate(-45deg)}
#estimate form.off{display:none}

/* ---- CLOSE ---- */
#close{background:var(--black);color:var(--warm);text-align:center}
#close h2{color:var(--warm);max-width:22ch;margin:0 auto 18px;font-size:clamp(1.9rem,4vw,2.9rem)}
#close p{max-width:50ch;margin:0 auto 30px;color:rgba(247,245,240,.84);font-size:clamp(1rem,1.25vw,1.12rem)}
#close .acts{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ---- FOOTER ---- */
#foot{background:var(--charcoal);color:rgba(247,245,240,.8)}
#foot .top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding:56px 0 40px}
#foot .lg{width:120px;height:82px;background:var(--logo) left center/contain no-repeat;margin-bottom:16px}
#foot h4{font-family:var(--u);font-size:.71rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 15px}
#foot ul{list-style:none;margin:0;padding:0}
#foot li{margin-bottom:10px;font-size:.95rem}
#foot a{color:rgba(247,245,240,.8);text-decoration:none;transition:color var(--t) var(--ease)}
#foot a:hover{color:var(--warm)}
#foot .socials{display:flex;gap:10px;margin-top:16px}
#foot .socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(247,245,240,.26);border-radius:var(--r);
 transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
#foot .socials a:hover{border-color:var(--gold-lt);background:rgba(181,138,58,.14)}
#foot .socials svg{width:19px;height:19px;fill:currentColor}
#foot .bottom{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:20px 0 26px;
 border-top:1px solid rgba(247,245,240,.14);font-size:.85rem}
#foot .bottom .mid a{text-decoration:none;border-bottom:0;padding-bottom:2px;font-weight:700;
  color:var(--gold-lt);background:var(--goldline);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#foot .bottom .mid a:hover{filter:brightness(1.15)}

/* ---- RESPONSIVE ---- */
@media (max-width:1040px){
 #services .head{grid-template-columns:1fr;gap:20px}
 #process .grid{grid-template-columns:repeat(2,1fr)}
 #process .flow .row{grid-template-columns:repeat(2,1fr)}
 #process .flow figure:last-child{grid-column:span 2;aspect-ratio:16/9}
 #faq .grid,#area .grid,#estimate .grid{grid-template-columns:1fr}
 #proof .grid{grid-template-columns:1fr}
  #foot .top{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
 #services .card{position:static;transform:none!important;margin-bottom:14px;min-height:0;padding:28px 26px}
 #services .card::after{opacity:0!important}
 #nav .links{display:none}
 #nav .burger{display:inline-flex}
 #nav .tel{display:inline-flex}
 #nav .cta{padding:10px 15px;font-size:.86rem}
 #nav .brand .lg{width:64px;height:44px}
 #hero .strip ul{grid-template-columns:1fr 1fr}
 #hero .strip li:nth-child(3){border-left:0}
 #hero .strip li:nth-child(n+3){border-top:1px solid rgba(181,138,58,.42)}
 #hero .acts .btn{flex:1 1 100%}
 #process .flow .row{grid-template-columns:1fr}
 #process .flow figure:last-child{grid-column:span 1;aspect-ratio:3/4}
 #about .grid{grid-template-columns:1fr;gap:26px}
 #about .shot{max-width:340px;margin:0 auto}
 #about .txt{max-width:none}
 #estimate .row{grid-template-columns:1fr}
 #foot .top{grid-template-columns:1fr;gap:30px;padding:44px 0 30px}
 #close .acts .btn{flex:1 1 100%}
 #curtain .mark{width:82vw}
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .glare{animation:none;background-image:none;background-color:transparent;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--sheen);color:var(--sheen)}
 #hero .bg img{animation:none;transform:none}
 #live .beacon i,#curtain .hint,#curtain .mark{animation:none}
 #live.is-open .beacon i{background:#5BBE7A}
 [data-rev]{opacity:1;transform:none;transition:none}
 #services .card{position:static;transform:none!important;margin-bottom:14px;min-height:0}
 #services .card::after{opacity:0!important}
 #work .track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
 #work .loop{-webkit-mask-image:none;mask-image:none}
 .btn:hover,#services .card:hover,#work figure:hover,#proof .card:hover{transform:none}
 *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}