/* ==========================================================================
   ARVENTO STUDIO — Cinematic Interior Architecture
   Design system + motion-ready stylesheet
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  --ivory:#F3EFE7;
  --sand:#D8CCBC;
  --espresso:#29231F;
  --charcoal:#3A3530;
  --bronze:#9B8068;
  --bronze-tx:#7C6249;   /* text-safe bronze: 4.95:1 on ivory */
  --bronze-lt:#B79A80;
  --white:#FFFFFF;

  --ink:#241E1A;
  --muted:#514740;
  --muted-inv:rgba(243,239,231,.84);
  --hair:rgba(41,35,31,.22);
  --hair-inv:rgba(243,239,231,.28);
  --scrim:rgba(30,24,19,.45);

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;

  --fs-mega:clamp(3rem,10.6vw,12rem);
  --fs-xl:clamp(2.6rem,7.6vw,8rem);
  --fs-lg:clamp(2.1rem,5vw,4.75rem);
  --fs-md:clamp(1.5rem,2.7vw,2.6rem);
  --fs-sm:clamp(1.15rem,1.7vw,1.5rem);
  --fs-body:clamp(1rem,1.06vw,1.125rem);
  --fs-label:.75rem;

  --gut:clamp(1.25rem,4.2vw,5rem);
  --sec:clamp(5rem,11vw,13rem);
  --maxw:1680px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
/* Scroll anchoring is meant to stop the page jumping when something loads
   above you. Every image here already reserves its space, so there is
   nothing for it to prevent — but with this many sticky sections and
   scroll-linked transforms it mistakes them for content moving and yanks
   the viewport by several hundred pixels, once, seemingly at random.
   Measured: on / off is the difference between a page that shifts under
   the cursor and one that never moves. */
html,body{overflow-anchor:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:400;
  line-height:1.75;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding-block:.28rem}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
::selection{background:var(--bronze);color:var(--white)}

/* ------------------------------------------------------------ 3. TYPOGRAPHY */
.dsp{font-family:var(--display);font-weight:400;line-height:.94;letter-spacing:-.02em}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:-.018em}
h1{font-size:var(--fs-xl)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-md);line-height:1.12}
.mega{font-size:var(--fs-mega);line-height:.88;letter-spacing:-.035em}
em,.it{font-style:italic;font-weight:400}

.lbl{
  font-family:var(--sans);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--muted);
  display:inline-flex;align-items:center;gap:.8rem;
}
.lbl::before{content:"";width:24px;height:1px;background:var(--bronze);flex:none}
.lbl.bare::before{display:none}
.dark .lbl,.on-dark .lbl,.hero .lbl,.phero .lbl,.approach .lbl,.hz .lbl,.ctaband .lbl,.ftr .lbl,.menu .lbl,.lb .lbl{color:var(--sand)}

.lede{font-size:clamp(1.05rem,1.34vw,1.3rem);line-height:1.68;color:#3C342D;max-width:58ch;font-weight:400}
/* Every section that paints itself espresso/charcoal, not just the ones
   carrying .dark. The Approach block was the one that bit us: its lede was
   taking the light-background colour and disappearing into the photograph. */
.dark .lede,.on-dark .lede,.hero .lede,.phero .lede,.approach .lede,.hz .lede,.ctaband .lede,.ftr .lede,.menu .lede,.lb .lede{color:rgba(243,239,231,.92)}
p+p{margin-top:1.15em}
.mut{color:var(--muted);font-weight:400}
.dark .mut,.on-dark .mut,.hero .mut,.phero .mut,.approach .mut,.hz .mut,.ctaband .mut,.ftr .mut,.menu .mut,.lb .mut{color:var(--muted-inv)}
.tnum{font-variant-numeric:tabular-nums}


/* ---------------------------------------------------------------- 4. LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative;overflow:hidden}
.sec-sm{padding-block:clamp(3rem,6vw,7rem);position:relative;overflow:hidden}
.grid{display:grid;gap:clamp(1.25rem,2.6vw,3rem);min-width:0}
.grid>*{min-width:0}
.g12{grid-template-columns:repeat(12,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
/* offset placement: the start line AND the span must be set together —
   `grid-column-start` alone silently cancels `grid-column: span N`. */
.at6{grid-column:6/span 7}
.at9{grid-column:9/span 4}
.row{display:flex}.btw{justify-content:space-between}.ctr{align-items:center}.end{align-items:flex-end}
.mt1{margin-top:.75rem}.mt2{margin-top:1.6rem}.mt3{margin-top:2.6rem}.mt4{margin-top:4rem}
.center{text-align:center}
.rule{height:1px;background:var(--hair);border:0}
.dark .rule,.on-dark .rule,.hero .rule,.phero .rule,.approach .rule,.hz .rule,.ctaband .rule,.ftr .rule,.menu .rule,.lb .rule{background:var(--hair-inv)}

.dark{background:var(--espresso);color:var(--ivory)}
.dark h1,.dark h2,.dark h3{color:var(--ivory)}
.sandbg{background:var(--sand)}

/* ------------------------------------------------------- 5. GIANT BG TYPE */
.ghost{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  font-family:var(--display);font-weight:300;font-size:clamp(7rem,21vw,22rem);
  line-height:.8;letter-spacing:-.04em;white-space:nowrap;
  color:var(--ink);opacity:.045;pointer-events:none;user-select:none;z-index:0;
}
.dark .ghost{color:var(--ivory);opacity:.055}
.sec>.wrap,.sec-sm>.wrap{position:relative;z-index:1}

/* ------------------------------------------------------------- 6. MEDIA */
.fig{position:relative;overflow:hidden;background:var(--sand)}
/* Press-and-hold on a photo used to start a native image drag, and Chrome
   auto-scrolls the page while a drag is in flight — which is why holding the
   mouse over any picture yanked the page to the section above. The images are
   also marked draggable="false" so Firefox behaves the same way. */
/* Links are draggable by default too, so a press on a picture inside a link
   still started a link-drag. Both are opted out. */
img,a{-webkit-user-drag:none;-khtml-user-drag:none;user-drag:none}
img{-webkit-user-select:none;user-select:none}
.fig img{width:100%;height:100%;object-fit:cover;will-change:transform}
.fig .zoom{transition:transform 1.2s var(--e-out)}
a:hover .fig .zoom,.fig:hover .zoom{transform:scale(1.05)}
.ar-3{aspect-ratio:3/4}.ar-4{aspect-ratio:4/3}.ar-1{aspect-ratio:1/1}
.ar-45{aspect-ratio:4/5}.ar-16{aspect-ratio:16/9}.ar-21{aspect-ratio:21/9}.ar-23{aspect-ratio:2/3}
.cap{font-size:.875rem;font-weight:500;color:var(--muted);margin-top:.95rem;letter-spacing:.015em}
.dark .cap,.on-dark .cap,.hero .cap,.phero .cap,.approach .cap,.hz .cap,.ctaband .cap,.ftr .cap,.menu .cap,.lb .cap{color:rgba(243,239,231,.86)}
.scrim::after{content:"";position:absolute;inset:0;background:var(--scrim)}

/* -------------------------------------------------- 7. REVEAL PRIMITIVES */
/* Resting state is VISIBLE. .anim (set before first paint, removed by the
   failsafe if JS never boots) parks them; .in plays them back. */
.rv-mask{overflow:hidden;display:block}
.rv-line{display:block;transition:transform 1.15s var(--e-out)}
.anim .rv-line{transform:translateY(106%)}
.anim .rv-line.in{transform:translateY(0)}

.anim .rv-up{opacity:0;transform:translateY(26px)}
.rv-up{transition:opacity .95s var(--e-out),transform .95s var(--e-out)}
.anim .rv-up.in{opacity:1;transform:none}

.anim .rv-fade{opacity:0}
.rv-fade{transition:opacity .9s var(--e-out)}
.anim .rv-fade.in{opacity:1}

.rv-clip,.rv-clip-up,.rv-clip-dn{transition:clip-path 1.35s var(--e-io)}
.anim .rv-clip{clip-path:inset(0% 100% 0% 0%)}
.anim .rv-clip-up{clip-path:inset(100% 0% 0% 0%)}
.anim .rv-clip-dn{clip-path:inset(0% 0% 100% 0%)}
.anim .rv-clip.in,.anim .rv-clip-up.in,.anim .rv-clip-dn.in{clip-path:inset(0% 0% 0% 0%)}
/* the image inside a clip reveal drifts back to 1:1 as the mask opens */
.anim .rv-clip>img,.anim .rv-clip-up>img,.anim .rv-clip-dn>img{transform:scale(1.16);transition:transform 1.7s var(--e-out)}
.anim .rv-clip.in>img,.anim .rv-clip-up.in>img,.anim .rv-clip-dn.in>img{transform:scale(1)}

.rv-scale{transition:opacity 1.1s var(--e-out),transform 1.1s var(--e-out)}
.anim .rv-scale{opacity:0;transform:scale(.94)}
.anim .rv-scale.in{opacity:1;transform:none}

.anim [data-d="1"]{transition-delay:.09s}
.anim [data-d="2"]{transition-delay:.18s}
.anim [data-d="3"]{transition-delay:.27s}
.anim [data-d="4"]{transition-delay:.36s}

/* --------------------------------------------------------- 8. BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:.9rem;position:relative;
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  padding-block:.55rem;color:var(--ink);
}
.arw{display:inline-block;vertical-align:middle}
.btn .arw{width:26px;height:1px;background:currentColor;position:relative;flex:none;transition:transform .55s var(--e-out)}
.btn .arw::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:left;transition:transform .6s var(--e-out)}
.btn:hover .arw{transform:translateX(8px)}
.btn:hover::after{transform:scaleX(0);transform-origin:right}
.dark .btn,.on-dark .btn,.hero .btn,.phero .btn,.ctaband .btn,.hz .btn,.approach .btn{color:var(--ivory)}
.hdr.over:not(.stuck) .btn{color:var(--ivory)}
.hdr.over:not(.stuck) .btn-box{border-color:rgba(243,239,231,.42);color:var(--ivory)}
.hdr.over:not(.stuck) .btn-box:hover{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}
.hero .btn-box,.phero .btn-box,.ctaband .btn-box,.hz .btn-box,.approach .btn-box{border-color:rgba(243,239,231,.42);color:var(--ivory)}
.hero .btn-box:hover,.phero .btn-box:hover,.ctaband .btn-box:hover,.hz .btn-box:hover{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}
.btn-box{border:1px solid var(--hair);padding:1.05rem 2rem}
.btn-box::after{display:none}
.btn-box{transition:background .5s var(--e-out),color .5s var(--e-out),border-color .5s}
.btn-box:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.dark .btn-box,.on-dark .btn-box{border-color:var(--hair-inv)}
.dark .btn-box:hover,.on-dark .btn-box:hover{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}
.btn-fill{background:var(--bronze-tx);color:var(--white);border-color:var(--bronze-tx);padding:1.05rem 2rem}
.btn-fill::after{display:none}
.btn-fill:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* --------------------------------------------------------- 9. LOADER */
.loader{
  position:fixed;inset:0;z-index:9000;background:var(--espresso);
  display:grid;place-items:center;color:var(--ivory);
}
.loader__inner{text-align:center;display:grid;gap:1.5rem;justify-items:center}
.mono{
  width:64px;height:64px;border:1px solid var(--hair-inv);border-radius:50% 50% 0 0/34% 34% 0 0;
  display:grid;place-items:center;font-family:var(--display);font-size:1.5rem;letter-spacing:.1em;
}
.loader__name{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:.34em;text-transform:uppercase}
.loader__pct{font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--sand)}
.loader__bar{width:min(220px,42vw);height:1px;background:var(--hair-inv);position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--bronze-lt);transform:scaleX(0);transform-origin:left}
.loader{transition:opacity .45s var(--e-out)}
.loader__inner{transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.loader.out .loader__inner{opacity:0;transform:translateY(-18px)}
.panel{position:fixed;top:0;bottom:0;width:51vw;background:var(--espresso);z-index:8990;transition:transform 1s var(--e-io)}
.panel--l.out{transform:translateX(-100%)}
.panel--r.out{transform:translateX(100%)}
.panel--l{left:0}.panel--r{right:0}
body:not(.is-loading) .loader,body:not(.is-loading) .panel{pointer-events:none}

/* ----------------------------------------------- 10. PAGE TRANSITION */
.xfade{position:fixed;inset:0;z-index:8000;background:var(--ivory);pointer-events:none;transform:scaleY(0);transform-origin:bottom;transition:transform .75s var(--e-io)}
.xfade.up{transform:scaleY(1)}
.xfade.down{transform-origin:top;transform:scaleY(0)}
.xfade__word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:clamp(2rem,6vw,4.5rem);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .4s var(--e-out)}
.xfade.up .xfade__word{opacity:1}

/* --------------------------------------------------- 11. CUSTOM CURSOR */
.cur{position:fixed;top:0;left:0;z-index:7000;pointer-events:none;mix-blend-mode:difference;will-change:transform}
.cur__dot{width:7px;height:7px;border-radius:50%;background:#fff;translate:-50% -50%}
.cur__ring{
  position:absolute;top:0;left:0;width:82px;height:82px;border-radius:50%;
  background:#fff;translate:-50% -50%;scale:0;display:grid;place-items:center;
  transition:scale .45s var(--e-out);
}
.cur.big .cur__ring{scale:1}
.cur__txt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#000;opacity:0;white-space:nowrap;transition:opacity .3s .07s}
.cur.big .cur__txt{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none!important}}

/* --------------------------------------------------------- 12. HEADER */
.hdr{position:fixed;inset:0 0 auto;z-index:6000;padding-block:clamp(1.1rem,2vw,1.9rem);mix-blend-mode:normal;transition:background .55s var(--e-out),padding .55s var(--e-out)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.hdr.stuck{background:rgba(243,239,231,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-block:.85rem;box-shadow:0 1px 0 var(--hair)}
.brand{display:grid;gap:.3rem;line-height:1;flex:0 1 auto;min-width:0}
.brand b{font-family:var(--display);font-size:1.28rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.brand span{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:clip}
.nav{display:flex;gap:clamp(1.5rem,2.6vw,3rem)}
.nav a{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:.2em;position:relative;padding-block:.4rem}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--bronze-tx)}
/* over a dark hero the header flips to light, so the current-page marker
   has to flip with it or it sinks into the espresso. */
.hdr.over:not(.stuck) .nav a[aria-current="page"]{color:var(--bronze-lt)}
.hdr__cta{display:flex;align-items:center;gap:1.4rem;flex:none}
.hdr.over:not(.stuck){color:var(--ivory)}
.hdr.over:not(.stuck) .brand span{color:var(--muted-inv)}
.hdr.over:not(.stuck) .burger i{background:var(--ivory)}
.burger{display:none;width:44px;height:44px;position:relative;flex:none}
.burger i{position:absolute;left:10px;width:24px;height:1px;background:var(--ink);transition:transform .45s var(--e-io),opacity .3s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:26px}
.burger.on i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:5900;background:var(--espresso);color:var(--ivory);display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gut) 3rem;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--e-io),visibility 0s .8s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--e-io),visibility 0s}
.menu nav a{font-family:var(--display);font-size:clamp(2rem,8vw,3.4rem);display:block;padding-block:.34rem;border-bottom:1px solid var(--hair-inv);opacity:0;transform:translateY(20px);transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
.menu.open nav a{opacity:1;transform:none}
.menu__foot{margin-top:2.6rem;display:grid;gap:.3rem;font-size:.8125rem;color:var(--muted-inv)}
.menu__foot a{display:inline-block;padding-block:.3rem}

/* ------------------------------------------------------------ 13. RAIL */
.rail{position:fixed;left:0;top:0;bottom:0;width:clamp(0rem,3.2vw,3.4rem);z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:1.6rem;pointer-events:none;mix-blend-mode:difference}
.rail span,.rail a{color:#fff;opacity:.85;pointer-events:auto}
.rail .vt{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.rail .ln{width:1px;flex:1;background:rgba(255,255,255,.25);margin-block:1.2rem}
.rail .soc{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.rail .soc a{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:1200px){.rail{display:none}}

/* ------------------------------------------------------------ 14. HERO */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--espresso);display:flex;flex-direction:column}
.hero__bg{position:absolute;inset:-8% 0 -8% 0;will-change:transform;transform:scale(1.12);transition:transform 2.4s var(--e-out)}
.hero.ready .hero__bg{transform:scale(1)}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,24,19,.66) 0%,rgba(30,24,19,.26) 40%,rgba(30,24,19,.88) 100%)}
.hero__in{position:relative;z-index:2;width:100%;margin-top:auto;padding-block:clamp(7.2rem,12vh,8.5rem) clamp(2.5rem,5vw,4.5rem);color:var(--ivory)}
.hero h1{color:var(--ivory)}
.hero .mega{font-size:clamp(2.3rem,min(10.6vw,15vh),12rem)}
.hero__foot{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:end;margin-top:clamp(1.8rem,3.4vw,3.2rem)}
.hero__foot p{color:rgba(243,239,231,.88);max-width:46ch}
.cue{display:inline-flex;align-items:center;gap:.8rem;font-size:var(--fs-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-inv)}
.cue i{width:1px;height:40px;background:rgba(243,239,231,.34);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--bronze-lt);animation:cue 2.4s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}62%,100%{transform:translateY(100%)}}

/* page hero */
.phero{position:relative;padding-top:clamp(9rem,16vw,15rem);padding-bottom:clamp(3rem,6vw,6rem);background:var(--espresso);color:var(--ivory);overflow:hidden}
.phero__bg{position:absolute;inset:-8% 0 -8% 0;opacity:.5}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,24,19,.8),rgba(30,24,19,.58))}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:var(--ivory);margin-top:1rem;font-size:clamp(2.2rem,min(7.6vw,14vh),8rem)}
.crumb{font-size:var(--fs-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-inv);display:flex;gap:.6rem;flex-wrap:wrap}
.crumb a{display:inline-block;padding-block:.2rem}
.crumb a:hover{color:var(--bronze-lt)}

/* --------------------------------------------------------- 15. MARQUEE */
.marq{overflow:hidden;border-block:1px solid var(--hair);padding-block:1.15rem;background:var(--ivory)}
.marq.dark{background:var(--charcoal);border-color:var(--hair-inv)}
.marq__t{display:flex;width:max-content;will-change:transform}
.marq__t span{font-family:var(--display);font-style:italic;font-size:clamp(1.05rem,2vw,1.8rem);padding-inline:1.7rem;white-space:nowrap;display:inline-flex;align-items:center;gap:1.7rem}
.marq__t span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--bronze);flex:none}
.marq__t{animation:marq 38s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* -------------------------------------------------------- 16. APPROACH */
.approach{position:relative;overflow:hidden;background:var(--espresso);color:var(--ivory)}
.approach__bg{position:absolute;inset:-8% 0 -8% 0;opacity:.17}
/* The photo sits at low opacity and a scrim rides ON THE SECTION (not inside
   the faded layer, where it would inherit that opacity) so the copy over it
   always clears contrast. */
.approach::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 75% at 50% 16%,rgba(41,35,31,.72) 0%,rgba(41,35,31,.42) 58%,rgba(41,35,31,.18) 100%)}
.approach__bg img{width:100%;height:100%;object-fit:cover}
.approach__in{position:relative;z-index:2;padding-block:var(--sec)}
.appcard{
  background:var(--ivory);color:var(--ink);max-width:520px;margin-inline:auto;
  padding:clamp(1.25rem,2.2vw,1.9rem);box-shadow:0 40px 90px -50px rgba(20,14,10,.8);
}
.appcard .fig{margin-bottom:1.4rem}
.appcard__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.appcard__n{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:.12em;color:var(--bronze-tx)}
.appcard h3{margin-bottom:.6rem}
.appcard p{font-size:1rem;font-weight:400;color:var(--muted)}
.appdots{display:flex;gap:.55rem;justify-content:center;margin-top:2.2rem}
.appdots button{width:38px;height:2px;background:var(--hair-inv);transition:background .4s}
.appdots button[aria-selected="true"]{background:var(--bronze-lt)}
.appstep{display:none}
.appstep.on{display:block}
.appstep{transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.appstep.enter{opacity:0;transform:translateY(26px)}
.appcard{transition:transform 1.1s var(--e-out),opacity 1.1s var(--e-out)}
.anim .appcard{opacity:0;transform:scale(.94)}
.anim .appcard.in{opacity:1;transform:none}

/* --------------------------------------------------- 17. PROJECT SHOWCASE */
.show{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(1.5rem,3.6vw,4.5rem);align-items:center}
.show__stage{position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--sand)}
.show__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .85s var(--e-out),transform 1.1s var(--e-out)}
.show__stage img.on{opacity:1;transform:scale(1)}
.show__meta{display:grid;gap:1.1rem;position:relative}
.show__pane{display:grid;gap:1.1rem}
.show__pane[hidden]{display:none}
.show__anim{display:block;transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.show__pane.swap .show__anim{opacity:0;transform:translateY(28px)}
.show__ttl{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.06}
.show__sub{font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dark .show__sub{color:var(--muted-inv)}
.btn.show__anim{display:inline-flex}
.show__idx{font-family:var(--display);font-size:clamp(2.6rem,6vw,5rem);line-height:.85;color:var(--bronze)}
.show__nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:clamp(1.6rem,3vw,2.6rem);border-top:1px solid var(--hair);padding-top:1.3rem}
.dark .show__nav{border-color:var(--hair-inv)}
.show__list{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.show__list button{font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-block:.3rem;transition:color .4s}
.dark .show__list button{color:var(--muted-inv)}
.show__list button[aria-selected="true"]{color:var(--bronze-tx)}
.arws{display:flex;gap:.6rem}
.arws button{width:52px;height:52px;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;transition:background .45s,border-color .45s,color .45s}
.dark .arws button{border-color:var(--hair-inv)}
.arws button:hover{background:var(--bronze-tx);border-color:var(--bronze-tx);color:var(--white)}
.arws .arw{width:20px;height:1px;background:currentColor;position:relative}
.arws .arw::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* ------------------------------------------------ 18. HORIZONTAL ACT */
/* A tall section + sticky viewport. JS drives the track's X from scroll
   progress, so no pinning library is needed and nothing can de-sync. */
.hz{position:relative;background:var(--espresso);color:var(--ivory)}
.hz__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.hz__track{display:flex;align-items:center;gap:clamp(1.5rem,4vw,5rem);padding-inline:var(--gut);width:max-content;will-change:transform}
.hz__intro{width:min(34vw,420px);flex:none}
/* The track lives inside a 100svh sticky viewport, so the CARD is sized by
   HEIGHT first — width alone let a 4:5 image grow taller than the screen and
   get clipped on any short window (which is why it only looked right zoomed out). */
.hzcard{
  width:min(42vw,500px);flex:none;
  height:min(76svh,660px);
  display:flex;flex-direction:column;
}
.hzcard .fig{flex:1 1 auto;min-height:0;margin-bottom:1.1rem;aspect-ratio:auto}
.hzcard .fig img{height:100%}
.hzcard__meta{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--hair-inv);padding-top:.85rem}
.hzcard__n{font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;color:var(--bronze-lt)}
.hz__prog{position:absolute;left:var(--gut);right:var(--gut);bottom:2.2rem;height:1px;background:var(--hair-inv);z-index:3}
.hz__prog i{display:block;height:100%;background:var(--bronze-lt);transform:scaleX(0);transform-origin:left}
/* stacked fallback: narrow screens, reduced motion, or a track that already fits */
.hz--stack{height:auto!important}
.hz--stack .hz__sticky{position:static;height:auto;overflow:visible;display:block}
.hz--stack .hz__track{display:grid;grid-template-columns:1fr;width:auto;gap:2.5rem;padding-block:var(--sec);transform:none!important}
.hz--stack .hz__intro{width:auto}
.hz--stack .hzcard{width:auto;height:auto;display:block}
.hz--stack .hzcard .fig{aspect-ratio:4/5;margin-bottom:1.1rem}
.hz--stack .hzcard .fig img{height:100%}
.hz--stack .hz__prog{display:none}
@media (max-width:820px){.hz--stack .hz__track{grid-template-columns:1fr}}

/* -------------------------------------------------------- 19. SERVICES */
.srv{border-top:1px solid var(--hair-inv)}
.srv:last-child{border-bottom:1px solid var(--hair-inv)}
.srv a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1rem,3vw,3rem);align-items:center;padding-block:clamp(1.5rem,2.8vw,2.4rem);position:relative}
.srv__n{font-family:var(--display);font-size:1.15rem;color:var(--bronze-lt);min-width:2.4ch}
/* The title and the line under it were both inline <span>s, so they shared one
   line box (the description printed on top of the title) and neither max-width
   nor max-height applied — which is also why the description ran underneath the
   hover image. Block-level, with the right-hand peek zone reserved. */
.srv__txt{display:block;min-width:0}
.srv__t{display:block;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.08;transition:transform .55s var(--e-out),color .45s}
/* The description used to grow in on hover. On an inline element the height
   animation reflowed the whole list, so the page jumped under the cursor.
   It is simply always there now; the motion lives in the slide and the peek. */
.srv__d{display:block;font-size:.97rem;color:rgba(243,239,231,.86);max-width:40ch;margin-top:.5rem;opacity:.82;transition:transform .55s var(--e-out),opacity .45s var(--e-out)}
.srv a:hover .srv__t{transform:translateX(10px);color:var(--bronze-lt)}
.srv a:hover .srv__d{transform:translateX(10px);opacity:1}
/* keep the copy clear of the 190px hover image parked at right:8% */
@media (min-width:1025px){.srv__txt{padding-right:clamp(220px,22vw,300px)}}
.srv .arw{width:26px;height:1px;background:currentColor;position:relative;transition:transform .55s var(--e-out)}
.srv .arw::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.srv a:hover .arw{transform:translateX(10px)}
.srv__peek{position:absolute;right:8%;top:50%;translate:0 -50%;width:190px;aspect-ratio:3/4;overflow:hidden;opacity:0;scale:.9;pointer-events:none;transition:opacity .5s var(--e-out),scale .6s var(--e-out);z-index:2}
.srv a:hover .srv__peek{opacity:.92;scale:1}
@media (max-width:1024px){.srv__peek{display:none}.srv__d{opacity:1;margin-top:.6rem}}

/* --------------------------------------------------------- 20. JOURNAL */
.jrnl{display:grid;gap:1.2rem}
.jrnl .fig{margin-bottom:1.1rem}
.jrnl h3{transition:color .45s}
.jrnl a:hover h3{color:var(--bronze-tx)}
.jrnl__meta{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--hair);padding-top:.85rem;font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------ 21. STATS */
.stat{border-top:1px solid var(--hair);padding-top:1.35rem}
.dark .stat,.on-dark .stat,.hero .stat,.phero .stat,.approach .stat,.hz .stat,.ctaband .stat,.ftr .stat,.menu .stat,.lb .stat{border-color:var(--hair-inv)}
/* `.stat span` used to match the counter span nested inside <b>, which
   shrank every figure to label size. Direct-child only. */
.stat b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat b span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.dark .stat b,.on-dark .stat b,.hero .stat b,.phero .stat b,.approach .stat b,.hz .stat b,.ctaband .stat b,.ftr .stat b,.menu .stat b,.lb .stat b{color:var(--ivory)}
.stat>span{display:block;margin-top:.65rem;font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dark .stat>span,.on-dark .stat>span,.hero .stat>span,.phero .stat>span,.approach .stat>span,.hz .stat>span,.ctaband .stat>span,.ftr .stat>span,.menu .stat>span,.lb .stat>span{color:var(--sand)}

/* ---------------------------------------------------------- 22. FORMS */
.form{display:grid;gap:1.6rem;min-width:0}
.form *{max-width:100%}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;min-width:0}
.fld{display:grid;gap:.45rem;min-width:0}
.fld label{font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dark .fld label,.on-dark .fld label,.hero .fld label,.phero .fld label,.approach .fld label,.hz .fld label,.ctaband .fld label,.ftr .fld label,.menu .fld label,.lb .fld label{color:var(--sand)}
.fld input,.fld textarea,.fld select{width:100%;max-width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:.75rem 0;font-size:1rem;font-weight:400;transition:border-color .4s}
.dark .fld input,.dark .fld textarea,.dark .fld select{border-color:var(--hair-inv);color:var(--ivory)}
.fld textarea{resize:vertical;min-height:120px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--bronze)}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 1.3rem,calc(100% - 7px) 1.3rem;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}
.fld .err{font-size:.78rem;color:#B4442F;display:none}
.fld.bad input,.fld.bad textarea,.fld.bad select{border-color:#B4442F}
.fld.bad .err{display:block}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{border:1px solid var(--hair);padding:.62rem 1.1rem;cursor:pointer;font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .35s,color .35s,border-color .35s}
.dark .chips label,.on-dark .chips label,.hero .chips label,.phero .chips label,.approach .chips label,.hz .chips label,.ctaband .chips label,.ftr .chips label,.menu .chips label,.lb .chips label{border-color:var(--hair-inv)}
.chips input:checked+label{background:var(--bronze-tx);border-color:var(--bronze-tx);color:var(--white)}
.chips input:focus-visible+label{outline:2px solid var(--bronze);outline-offset:3px}
.fnote{font-size:.85rem;color:var(--muted)}
.dark .fnote,.on-dark .fnote,.hero .fnote,.phero .fnote,.approach .fnote,.hz .fnote,.ctaband .fnote,.ftr .fnote,.menu .fnote,.lb .fnote{color:var(--muted-inv)}
.fok{display:none;border:1px solid var(--bronze);background:rgba(155,128,104,.09);padding:1.1rem 1.3rem;font-size:.92rem}
.fok.show{display:block}

/* --------------------------------------------------------- 23. FOOTER */
.ftr{background:var(--espresso);color:var(--ivory);padding-block:clamp(3.5rem,6vw,6rem) 2rem;position:relative;overflow:hidden}
.ftr__ghost{position:absolute;left:50%;bottom:-4%;translate:-50% 0;font-family:var(--display);font-size:clamp(6rem,20vw,20rem);line-height:.75;letter-spacing:-.03em;color:var(--ivory);opacity:.05;white-space:nowrap;pointer-events:none}
.ftr .wrap{position:relative;z-index:1}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(1.75rem,3vw,3rem)}
.ftr h4{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:1.2rem;font-weight:600}
.ftr ul{display:grid;gap:.4rem}
.ftr a{color:var(--muted-inv);transition:color .4s}
.ftr ul a,.ftr address a{display:inline-block;padding-block:.3rem;font-size:.97rem}
.ftr a:hover{color:var(--bronze-lt)}
.ftr address{font-style:normal;font-size:.97rem;color:var(--muted-inv);line-height:1.9}
.ftr .brand b{color:var(--ivory)}.ftr .brand span{color:var(--muted-inv)}
.ftr__bot{margin-top:clamp(2.5rem,4vw,4rem);padding-top:1.5rem;border-top:1px solid var(--hair-inv);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.8125rem;color:var(--muted-inv)}
.ftr__bot a{display:inline-block;padding-block:.3rem}

/* ------------------------------------------------------ 24. CONTACT CTA */
.ctaband{position:relative;overflow:hidden;background:var(--charcoal);color:var(--ivory);text-align:center;padding-block:clamp(4.5rem,9vw,9rem)}
.ctaband__bg{position:absolute;inset:-8% 0 -8% 0;opacity:.3}
.ctaband__bg img{width:100%;height:100%;object-fit:cover}
.ctaband .wrap{position:relative;z-index:2}
.ctaband h2{color:var(--ivory);max-width:16ch;margin-inline:auto;font-size:clamp(2rem,min(7.6vw,13vh),8rem)}
.ctarow{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}

/* -------------------------------------------------------- 25. FLOAT WA */
.wa{position:fixed;right:clamp(1rem,2vw,1.9rem);bottom:clamp(1rem,2vw,1.9rem);z-index:5500;display:flex;align-items:center;gap:.6rem;background:var(--bronze-tx);color:#fff;padding:.9rem 1.2rem;border-radius:999px;box-shadow:0 16px 38px -14px rgba(20,14,10,.6);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;transition:transform .45s var(--e-out),background .45s}
.wa:hover{transform:translateY(-3px);background:var(--ink)}
.wa svg{width:17px;height:17px;fill:currentColor;flex:none}
@media (max-width:680px){.wa span{display:none}.wa{padding:.95rem;border-radius:50%}}

/* -------------------------------------------------------- 26. RESPONSIVE */
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .hdr__cta .btn-box{display:none}
  .c3,.c4,.c5,.c6,.c7,.c8,.at6,.at9{grid-column:span 12}
  .show{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr 1fr}
  .srv a{grid-template-columns:auto 1fr auto}
}
@media (max-width:820px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .hero__foot{grid-template-columns:1fr;gap:1.5rem}
  .cue{display:none}
}
@media (max-width:760px){
  .hdr__in{gap:1rem}
  .brand b{font-size:1.06rem;letter-spacing:.2em}
  .brand span{font-size:8px;letter-spacing:.2em}
}
@media (max-width:420px){
  .brand span{display:none}
  .brand b{font-size:1rem;letter-spacing:.18em}
}
@media (max-width:640px){
  .g2,.g3{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
  .btn-box,.btn-fill{padding:.95rem 1.35rem;letter-spacing:.18em}
  .hero{height:92svh}
  .marq__t span{padding-inline:1rem}
  .appcard{max-width:none}
}

/* ---------------------------------------------- 27. REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .anim .rv-line,.anim .rv-up,.anim .rv-fade,.anim .rv-clip,.anim .rv-clip-up,.anim .rv-clip-dn,.anim .rv-scale{
    opacity:1!important;transform:none!important;clip-path:none!important}
  .cur{display:none!important}
}
@media print{.hdr,.rail,.wa,.menu,.loader,.panel,.xfade,.cur{display:none!important}}

/* ==========================================================================
   28. HERO LEAD FORM  (quotation card inside the hero)
   ========================================================================== */
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.75rem,4vw,4.5rem);align-items:end}
.lead{
  background:var(--ivory);color:var(--ink);padding:clamp(1.25rem,1.9vw,1.9rem);
  box-shadow:0 40px 90px -46px rgba(20,14,10,.85);position:relative;
}
.lead::before{content:"";position:absolute;inset:0;border:1px solid rgba(155,128,104,.45);pointer-events:none}
.lead h2{font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.12}
.lead .lbl{margin-bottom:.7rem}
.lead .form{gap:.95rem;margin-top:1.15rem}
.lead__fields{display:grid;gap:.95rem}
.lead .fld input{padding:.62rem 0;font-size:.97rem}
.lead .chips label{padding:.5rem .8rem;font-size:.72rem;letter-spacing:.1em}
.lead .btn-fill{width:100%;justify-content:center;padding:1rem 1.2rem}
.lead .fnote{font-size:.76rem}
.lead .fok{padding:.9rem 1rem;font-size:.88rem}
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:2.25rem}
  .hero__in{padding-bottom:clamp(2.5rem,6vw,4rem)}
  .lead{max-width:560px}
}

/* ==========================================================================
   29. VIDEO REVIEWS
   ========================================================================== */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,2.2rem);align-items:start}
.vidcard{position:relative;display:block;width:100%;text-align:left;color:inherit;cursor:pointer}
.vidcard .fig{margin-bottom:1.1rem}
.vidcard .fig::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,24,19,.12),rgba(30,24,19,.55));
  transition:background .5s var(--e-out);
}
.vidcard:hover .fig::after{background:linear-gradient(180deg,rgba(30,24,19,.05),rgba(30,24,19,.42))}
.vidcard__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(243,239,231,.92);color:var(--espresso);
  transition:transform .55s var(--e-out),background .45s;
}
.vidcard__play::before{
  content:"";width:0;height:0;margin-left:5px;
  border-left:17px solid currentColor;border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.vidcard__play::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(243,239,231,.55);
  animation:vpulse 2.8s var(--e-out) infinite;
}
@keyframes vpulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.55);opacity:0}}
.vidcard:hover .vidcard__play{transform:translate(-50%,-50%) scale(1.08);background:var(--bronze);color:#fff}
.vidcard__tag{
  position:absolute;top:1rem;left:1rem;z-index:3;
  font-family:var(--sans);font-size:11px;font-weight:700;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  background:var(--bronze-tx);color:#fff;padding:.45rem .7rem;
}
.vidcard__len{
  position:absolute;right:1rem;bottom:1rem;z-index:3;font-family:var(--sans);font-size:11px;line-height:1;letter-spacing:.1em;
  background:rgba(30,24,19,.62);color:var(--ivory);padding:.28rem .5rem;font-variant-numeric:tabular-nums;
}
.vidcard__meta{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--hair-inv);padding-top:.85rem;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-inv)}
.vidcard h3{transition:color .45s}
.vidcard:hover h3{color:var(--bronze-lt)}
@media (max-width:900px){.vids{grid-template-columns:1fr}.vidcard{max-width:620px}}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:7500;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(20,14,10,.92);opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility 0s .45s;
}
.lb.on{opacity:1;visibility:visible;transition:opacity .45s var(--e-out),visibility 0s}
.lb__inner{width:min(1100px,100%);transform:scale(.96);transition:transform .55s var(--e-out)}
.lb.on .lb__inner{transform:none}
.lb video{width:100%;height:auto;display:block;background:#000}
.lb__embed{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block;background:#000}
.lb__bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem;color:var(--sand);
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase}
.lb__close{
  position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  width:52px;height:52px;border:1px solid var(--hair-inv);border-radius:50%;color:var(--ivory);
  display:grid;place-items:center;font-size:1.25rem;line-height:1;transition:background .4s,border-color .4s,color .4s;
}
.lb__close:hover{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}

/* Laptop screens: tighten the hero so the quote card still lands above the fold */
@media (min-width:1025px) and (max-height:980px){
  .hero__in{padding-block:clamp(7.2rem,10vh,7.6rem) clamp(1.3rem,2.2vw,2rem)}
  .lead{padding:1.15rem 1.3rem}
  .lead .form{gap:.78rem;margin-top:.95rem}
  .lead .fld input{padding:.5rem 0;font-size:.93rem}
  .lead .fld label{font-size:.7rem}
  .lead .btn-fill{padding:.85rem 1.1rem}
  .lead .fnote{font-size:.76rem}
  .hero .mega{font-size:clamp(2.3rem,min(9vw,13vh),12rem)}
}

/* Short laptop screens: the four fields pair up so the card stays above the fold */
@media (min-width:1025px) and (max-height:880px){
  .lead__fields{grid-template-columns:1fr 1fr;gap:.7rem 1.1rem}
  .lead h2{font-size:1.3rem}
  .lead .chips label{padding:.42rem .68rem}
}

/* ==========================================================================
   30. SERVICES PAGE
   ========================================================================== */
.svc-jump{display:flex;flex-wrap:wrap;gap:.5rem}
.svc-jump a{
  border:1px solid var(--hair);padding:.62rem 1.05rem;font-size:var(--fs-label);
  letter-spacing:.2em;text-transform:uppercase;transition:background .4s,color .4s,border-color .4s;
}
.svc-jump a:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.dark .svc-jump a{border-color:var(--hair-inv)}
.dark .svc-jump a:hover{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}

.svc-row{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3.4vw,4rem);align-items:center}
.svc-row + .svc-row{margin-top:clamp(3.5rem,7vw,8rem)}
.svc-row__media{grid-column:span 6}
.svc-row__body{grid-column:span 5}
.svc-row.flip .svc-row__media{order:2}
.svc-row.flip .svc-row__body{order:1;grid-column:2 / span 5}
.svc-num{
  font-family:var(--display);font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1.4px var(--bronze-tx);display:block;
}
.svc-incl{display:grid;gap:.55rem;margin-top:1.6rem}
.svc-incl li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;font-size:1rem;color:var(--muted)}
.dark .svc-incl li{color:var(--muted-inv)}
.svc-incl li::before{content:"";width:16px;height:1px;background:var(--bronze);margin-top:.78em}
.svc-facts{display:flex;gap:clamp(1.25rem,3vw,2.75rem);flex-wrap:wrap;margin-top:1.8rem;
  border-top:1px solid var(--hair);padding-top:1.1rem}
.dark .svc-facts{border-color:var(--hair-inv)}
.svc-facts div span{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.dark .svc-facts div span{color:var(--sand)}
.svc-facts div b{font-family:var(--display);font-weight:400;font-size:1.15rem}
@media (max-width:1024px){
  .svc-row,.svc-row.flip{grid-template-columns:1fr}
  .svc-row__media,.svc-row__body,.svc-row.flip .svc-row__media,.svc-row.flip .svc-row__body{grid-column:1 / -1;order:0}
}

/* engagement cards */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);align-items:stretch}
.plan{border:1px solid var(--hair);padding:clamp(1.4rem,2.2vw,2rem);display:flex;flex-direction:column;
  background:var(--paper,#fff);transition:transform .55s var(--e-out),box-shadow .55s var(--e-out)}
.dark .plan{background:transparent;border-color:var(--hair-inv)}
.plan:hover{transform:translateY(-6px);box-shadow:0 26px 60px -34px rgba(20,14,10,.45)}
.plan.is-pick{border-color:var(--bronze)}
.plan__tag{font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-tx)}
.plan h3{margin-top:.5rem}
.plan p{font-size:1rem;color:var(--muted);margin-top:.7rem}
.dark .plan p{color:var(--muted-inv)}
.plan ul{display:grid;gap:.5rem;margin:1.3rem 0 1.6rem;font-size:.97rem}
.plan ul li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;color:var(--muted)}
.dark .plan ul li{color:var(--muted-inv)}
.plan ul li::before{content:"";width:14px;height:1px;background:var(--bronze);margin-top:.75em}
.plan .btn{margin-top:auto}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* deliverables table */
.dtable-wrap{overflow-x:auto;max-width:100%}
.dtable{width:100%;border-collapse:collapse;font-size:.97rem;min-width:520px}
.dtable th{font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:400;text-align:left;padding:.9rem 1.25rem .9rem 0;border-bottom:1px solid var(--hair)}
.dtable td{padding:1rem 1.25rem 1rem 0;border-bottom:1px solid var(--hair);vertical-align:top}
.dtable td:first-child{font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--bronze-tx);white-space:nowrap}
.dark .dtable th,.dark .dtable td{border-color:var(--hair-inv)}
.dark .dtable th{color:var(--sand)}

/* FAQ — native <details>, so it works with JS off */
.faq{border-top:1px solid var(--hair)}
.faq:last-of-type{border-bottom:1px solid var(--hair)}
.dark .faq,.dark .faq:last-of-type{border-color:var(--hair-inv)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:1.35rem;font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.55rem);line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:16px;height:16px;flex:none;position:relative;
  background:linear-gradient(var(--bronze),var(--bronze)) center/16px 1px no-repeat,
             linear-gradient(var(--bronze),var(--bronze)) center/1px 16px no-repeat;
  transition:transform .45s var(--e-out);
}
.faq[open] summary::after{transform:rotate(45deg)}
.faq__a{padding-bottom:1.5rem;max-width:74ch;color:var(--muted);font-size:1rem}
.dark .faq__a{color:var(--muted-inv)}
.faq[open] .faq__a{animation:faqIn .5s var(--e-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq[open] .faq__a{animation:none}}

/* ------------------------------------------- 31. LIGHT ISLANDS (last word) */
/* LIGHT ISLANDS ON DARK SECTIONS.
   .appcard and .lead are ivory cards sitting inside espresso sections, so the
   dark-context rules above would hand them light-on-light text. Win them back. */
.appcard .lede,.lead .lede,
.appcard .mut,.lead .mut,
.appcard .cap,.lead .cap{color:var(--muted)}
.appcard .lbl,.lead .lbl{color:var(--muted)}
.appcard .rule,.lead .rule{background:var(--hair)}
.appcard .stat,.lead .stat{border-color:var(--hair)}
.appcard .stat b,.lead .stat b{color:var(--ink)}
.appcard .stat>span,.lead .stat>span{color:var(--muted)}
.appcard .btn:not(.btn-fill),.lead .btn:not(.btn-fill){color:var(--ink)}
.appcard .fld label,.lead .fld label{color:var(--muted)}
.appcard .fnote,.lead .fnote{color:var(--muted)}
.appcard .chips label,.lead .chips label{border-color:var(--hair)}