/* ═══════════════════════════════════════════════════════════════════════
   Northbeam Home Services — service-site-template
   Brand tokens come from clients/<slug>.json; everything below is generic.

   MOTION CONTRACT
   - Only transform / opacity / clip-path are animated (GPU-composited).
     One documented exception: .nav__pill width (out-of-flow, hover-only).
     FAQ panel height is animated via JS/WAAPI on an isolated panel.
   - Content is visible by default; `html.js-enabled` opts IN to animation,
     so the page survives script-stripping (webmail) and JS failure.
   - Every motion rule collapses under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand (templated) ── */
  --ember:#1C6B63;
  --ember-hi:#248179;
  --ember-dk:#14524C;
  --brass:#D9A441;
  --ink:#111719;
  --ink-2:#192124;
  --ink-3:#242E31;
  --bone:#F1EEE8;
  --bone-2:#E4DFD5;
  --paper:#FCFAF6;

  --f-display:'Bricolage Grotesque',Georgia,serif;
  --f-body:'Barlow',-apple-system,BlinkMacSystemFont,sans-serif;

  /* ── neutrals (warm-tinted, never pure gray) ── */
  --n-50:#faf8f5; --n-100:#f2eee8; --n-200:#e4ded4; --n-300:#cbc3b6;
  --n-400:#a49a8b; --n-500:#7d7466; --n-600:#5c554a; --n-700:#403b33;
  --n-800:#2a2721; --n-900:#1a1815;

  /* ── type scale (fluid) ──
     NB: calc/clamp REQUIRE whitespace around + and - . Do not strip it. */
  --t-xs:clamp(.75rem, .72rem + .12vw, .8125rem);
  --t-sm:clamp(.875rem, .85rem + .14vw, .9375rem);
  --t-base:clamp(1rem, .96rem + .2vw, 1.0625rem);
  --t-lg:clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --t-xl:clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --t-2xl:clamp(1.6rem, 1.35rem + 1.1vw, 2.15rem);
  --t-3xl:clamp(2rem, 1.55rem + 1.9vw, 3rem);
  --t-4xl:clamp(2.5rem, 1.8rem + 3vw, 4.15rem);
  --t-5xl:clamp(2.6rem, 1.7rem + 3.4vw, 4.15rem);

  /* ── space ── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
  --s20:5rem; --s24:6rem; --s32:8rem;
  --sec-y:clamp(4rem, 3rem + 5vw, 7.5rem);
  --wrap:1240px;
  --gut:clamp(1.15rem,4vw,2.5rem);

  /* ── radius: architectural, committed ── */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:22px; --r-full:999px;

  /* ── shadow: warm, layered ── */
  --sh-sm:0 1px 2px rgba(38,28,18,.06),0 2px 6px rgba(38,28,18,.05);
  --sh-md:0 2px 4px rgba(38,28,18,.05),0 8px 20px -6px rgba(38,28,18,.12);
  --sh-lg:0 4px 8px rgba(38,28,18,.05),0 22px 44px -12px rgba(38,28,18,.2);
  --sh-xl:0 8px 16px rgba(38,28,18,.06),0 44px 80px -24px rgba(38,28,18,.32);
  --sh-ember:0 10px 28px -8px color-mix(in srgb,var(--ember) 55%,transparent);

  /* ── easing ──
     Tuned for SMOOTH, not snappy. Heavily front-loaded curves (easeOutExpo and
     friends) cover ~90% of their distance in the first quarter of the duration,
     so the eye reads them as "popped in" no matter how long you set them. These
     curves travel more evenly, so motion is actually visible. */
  --e-out:cubic-bezier(.25,.46,.45,.94);     /* reveals: even, gentle landing  */
  --e-expo:cubic-bezier(.32,.72,.35,1);      /* big entrances, still unhurried */
  --e-back:cubic-bezier(.33,1.02,.5,1);      /* settle, NOT a bounce           */
  --e-smooth:cubic-bezier(.4,0,.2,1);        /* hover states                   */
  --e-draw:cubic-bezier(.45,.05,.35,1);      /* lines that must be SEEN moving */
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.65;
  color:var(--n-800);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.03;letter-spacing:-.028em}
h1{font-size:var(--t-5xl)}
h2{font-size:var(--t-4xl)}
h3{font-size:var(--t-xl);line-height:1.15;letter-spacing:-.02em}
h4{font-size:var(--t-base);letter-spacing:-.01em}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:var(--r-sm)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}

/* ═══════════════════════════ MOTION SYSTEM ════════════════════════ */

/* Visible by default. JS adds .js-enabled to opt in.

   CRITICAL: every reveal rule below is scoped to :not(.done). Many revealed
   elements are ALSO interactive cards (.svc, .qa, .loc, .rev, .gal__i) with
   their own hover transform + transition. `html.js-enabled .reveal.in` is
   higher specificity than `.svc:hover`, so leaving these rules applied forever
   silently pins the card and its hover lift never fires. JS adds .done once an
   element has finished revealing, which releases it back to its own styles. */
.reveal{opacity:1;transform:none;clip-path:none}
html.js-enabled .reveal:not(.done){
  opacity:0;
  transition:opacity 1s var(--e-out),transform 1.05s var(--e-out),clip-path 1.15s var(--e-expo);
  transition-delay:calc(var(--d,0)*85ms);
  will-change:transform,opacity;
  transform:translate3d(0,22px,0);
}
html.js-enabled .reveal[data-anim="left"]:not(.done){transform:translate3d(-28px,0,0)}
html.js-enabled .reveal[data-anim="right"]:not(.done){transform:translate3d(28px,0,0)}
html.js-enabled .reveal[data-anim="scale"]:not(.done){transform:scale(.94)}
html.js-enabled .reveal[data-anim="clip"]:not(.done){transform:none;clip-path:inset(0 100% 0 0);opacity:1}
html.js-enabled .reveal[data-anim="rise"]:not(.done){transform:translate3d(0,44px,0)}
/* "line" and "flat" opt out of the container move: the child does the work
   (masked headline lines) or the .in class only drives a descendant effect. */
html.js-enabled .reveal[data-anim="line"]:not(.done),
html.js-enabled .reveal[data-anim="flat"]:not(.done){opacity:1;transform:none;transition:none}

html.js-enabled .reveal.in:not(.done){opacity:1;transform:none;clip-path:inset(0 0 0 0)}
html.js-enabled .reveal.done{will-change:auto}

/* scroll progress */
.prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:150;pointer-events:none;background:transparent}
.prog span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--ember),var(--brass));
  transform:scaleX(var(--p,0));transform-origin:left;
  transition:transform .12s linear;
}
html:not(.js-enabled) .prog{display:none}

/* ── reduced motion ──
   Deliberately NOT a blanket "kill every transition". The spec's concern is
   large-scale movement (travel, scale, spin, parallax, autoplay) that can
   trigger vestibular symptoms. A colour fade, or a 1.5px underline extending
   under a link, is not that; nuking those makes the page feel broken rather
   than calm. So: large motion off, small localised feedback stays.

   `?motion=1` on the URL adds .force-motion, which previews the full
   experience on a machine that has reduce switched on. Preview aid only. */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion){scroll-behavior:auto}

  /* Reveals keep their OPACITY FADE but lose all travel.
     Suppressing reveals entirely (the earlier behaviour) left the page totally
     inert for anyone with reduce-motion on, which is most of the page's life
     gone for what the spec never asked for. The vestibular trigger is the
     22px rise, not the fade. So: kill the movement, keep the fade.

     NOTE: do NOT add `transition:none` here. Cards (.svc, .qa, .loc, .rev,
     .gal__i) are themselves .reveal elements, so that would also wipe out their
     hover colour/shadow feedback and make everything feel dead. */
  html:not(.force-motion).js-enabled .reveal:not(.done){transform:none!important;clip-path:none!important}
  html:not(.force-motion).js-enabled .hero__h1 span>i{transform:none!important}

  /* entrance and looping keyframes off */
  html:not(.force-motion) .hero__bg,
  html:not(.force-motion) .hero__media.in .shot img,
  html:not(.force-motion) .hero__media.in .pill,
  html:not(.force-motion) .hero__media.in .stamp,
  html:not(.force-motion) .in .stars svg,
  html:not(.force-motion) .mobmenu.open nav>*,
  html:not(.force-motion) .announce__dot,
  html:not(.force-motion) .pill__pulse::after,
  html:not(.force-motion) .form__done,
  html:not(.force-motion) .form__tick{animation:none!important}

  /* travel / scale / rotate on hover off. colour, shadow and border stay. */
  html:not(.force-motion) .btn:hover,
  html:not(.force-motion) .btn:active,
  html:not(.force-motion) .btn:hover svg,
  html:not(.force-motion) .lnk:hover svg,
  html:not(.force-motion) .svc:hover,
  html:not(.force-motion) .svc:hover .svc__icon,
  html:not(.force-motion) .svc:hover .svc__img img,
  html:not(.force-motion) .rev:hover,
  html:not(.force-motion) .rev:hover::before,
  html:not(.force-motion) .loc:hover,
  html:not(.force-motion) .loc:hover .loc__pin,
  html:not(.force-motion) .loc__phone:hover,
  html:not(.force-motion) .gal__i:hover,
  html:not(.force-motion) .gal__i:hover img,
  html:not(.force-motion) .gscore:hover,
  html:not(.force-motion) .gscore:hover .gscore__g,
  html:not(.force-motion) .fin__logo:hover,
  html:not(.force-motion) .ftr__soc a:hover,
  html:not(.force-motion) .ftr__col a:hover,
  html:not(.force-motion) .step:hover .step__n,
  html:not(.force-motion) .pillar:hover .pillar__n,
  html:not(.force-motion) .phone:hover svg,
  html:not(.force-motion) .hdr.stuck .brand__mark{transform:none!important}

  /* decorative sweeps, spotlight and scroll-linked chrome off */
  html:not(.force-motion) .btn::before,
  html:not(.force-motion) .svc::before{display:none}
  html:not(.force-motion) .prog{display:none}
  html:not(.force-motion) .mbar{transform:none!important;transition:none!important}

  /* scroll-triggered line draws land already-drawn */
  html:not(.force-motion) .steps::before,
  html:not(.force-motion) .stat__l::after{transform:scaleX(1)!important;transition:none!important}
}

/* ── shared bits ───────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember);
  margin-bottom:var(--s4);
}
.eyebrow svg{width:1.05em;height:1.05em;fill:currentColor}
.eyebrow--light{color:var(--brass)}

.btn{
  --btn-bg:var(--ember);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.5rem;border-radius:var(--r-full);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:var(--t-sm);letter-spacing:.005em;
  border:2px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--e-smooth),box-shadow .45s var(--e-smooth),
             background .4s var(--e-smooth),color .4s var(--e-smooth);
}
/* light sweep on hover — the "premium" tell, costs one pseudo-element */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::before{transform:translateX(120%);transition:transform 1s var(--e-smooth)}
.btn svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e-smooth)}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(-1px) scale(.985);transition-duration:.18s}
.btn--primary{box-shadow:var(--sh-ember)}
.btn--primary:hover{background:var(--ember-hi);box-shadow:0 18px 40px -10px color-mix(in srgb,var(--ember) 68%,transparent)}
.btn--ghost{background:transparent;color:var(--bone);border-color:color-mix(in srgb,var(--bone) 32%,transparent)}
.btn--ghost:hover{background:color-mix(in srgb,var(--bone) 12%,transparent);border-color:var(--bone)}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark:hover{background:var(--ink-2)}
.btn--lg{min-height:58px;padding:1.05rem 2rem;font-size:var(--t-base)}
.btn--block{width:100%}

.lnk{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;
  font-weight:700;font-size:var(--t-sm);color:var(--ember);
  /* bottom padding gives the underline room to sit clear of descenders */
  padding-top:var(--s4);padding-bottom:.4rem;position:relative;
}
.lnk svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e-smooth)}
/* Draws left-to-right on enter, retracts to the right on leave (origin flips).
   Slow enough, and on an even curve, that you actually watch it travel. */
.lnk::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:calc(100% - 1.5em);
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .55s var(--e-draw);
}
.lnk:hover svg{transform:translateX(5px)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left center}

.stars{display:inline-flex;gap:1px;color:var(--brass)}
.stars svg{width:16px;height:16px;fill:currentColor}
.stars--sm svg{width:14px;height:14px}
/* stars twinkle in one after another when revealed */
html.js-enabled .in .stars svg{animation:starPop .7s var(--e-smooth) backwards}
html.js-enabled .in .stars svg:nth-child(1){animation-delay:.07s}
html.js-enabled .in .stars svg:nth-child(2){animation-delay:.15s}
html.js-enabled .in .stars svg:nth-child(3){animation-delay:.23s}
html.js-enabled .in .stars svg:nth-child(4){animation-delay:.31s}
html.js-enabled .in .stars svg:nth-child(5){animation-delay:.39s}
@keyframes starPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

.sec{padding-block:var(--sec-y)}
.sec--bone{background:var(--bone);border-block:1px solid var(--n-200)}
.sec--dark{background:var(--ink);color:var(--n-200)}
.sec--dark h2,.sec--dark h3{color:var(--bone)}

.shead{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .eyebrow{justify-content:center}
.shead--split{display:flex;flex-wrap:wrap;gap:var(--s8);align-items:flex-end;justify-content:space-between;max-width:none}
.shead__sub{margin-top:var(--s5);font-size:var(--t-lg);color:var(--n-600);line-height:1.6;max-width:56ch}
.sec--dark .shead__sub{color:var(--n-300)}
.shead--center .shead__sub{margin-inline:auto}

/* ── announcement ──────────────────────────────────────────────────── */
.announce{background:var(--ink);color:var(--n-300);font-size:var(--t-xs);letter-spacing:.03em}
.announce__in{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:38px;text-align:center}
.announce__dot{width:7px;height:7px;border-radius:50%;background:var(--brass);flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 70%,transparent);animation:ping 2.4s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ── header ────────────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .5s var(--e-smooth),border-color .5s var(--e-smooth),background .5s var(--e-smooth);
}
.hdr.stuck{box-shadow:var(--sh-md);border-bottom-color:var(--n-200);background:color-mix(in srgb,var(--paper) 96%,transparent)}
/* Header height stays FIXED on purpose. It is position:sticky, so animating its
   height would reflow everything below it and visibly jump the page mid-scroll.
   The "condense on scroll" feel comes from a transform on the logo instead,
   which costs no layout. */
.hdr__in{display:flex;align-items:center;gap:var(--s6);min-height:88px}
.brand{flex:none;display:flex;align-items:center}
/* logo lockups often stack a tagline + phone; too small and that text turns to mush */
.brand__mark{
  height:clamp(48px, 4.4vw, 64px);width:auto;object-fit:contain;
  transform-origin:left center;
  transition:transform .4s var(--e-smooth);
}
.hdr.stuck .brand__mark{transform:scale(.86)}
.brand__type{font-family:var(--f-display);font-weight:800;font-size:var(--t-lg);letter-spacing:-.03em;color:var(--ink)}

/* nav with a gliding pill that follows hover and snaps to the active section */
.nav{display:none;position:relative;margin-left:auto;padding:.3rem}
.nav__pill{
  position:absolute;top:50%;left:0;height:36px;width:0;
  margin-top:-18px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--ember) 11%,transparent);
  opacity:0;pointer-events:none;
  transform:translate3d(var(--x,0),0,0);
  /* `width` is the one animated layout property in this file. It is a deliberate,
     contained exception: the pill is position:absolute (out of flow, so it reflows
     nothing else), it is a single element, and it only animates on hover/focus.
     scaleX() would distort the pill's border-radius, which is the whole shape. */
  transition:transform .52s var(--e-smooth),width .52s var(--e-smooth),opacity .38s var(--e-smooth);
}
.nav.lit .nav__pill{opacity:1}
.nav__lnk{
  position:relative;z-index:1;display:inline-block;
  padding:.45rem clamp(.7rem,1.1vw,1rem);
  font-size:var(--t-sm);font-weight:600;color:var(--n-700);
  border-radius:var(--r-full);
  transition:color .4s var(--e-smooth);
}
.nav__lnk:hover,.nav__lnk.active{color:var(--ember)}
html:not(.js-enabled) .nav__lnk:hover{background:color-mix(in srgb,var(--ember) 11%,transparent)}

.hdr__act{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.nav+.hdr__act{margin-left:clamp(.5rem,2vw,1.5rem)}
.phone{display:none;align-items:center;gap:.55rem;color:var(--ink);font-weight:800;font-size:var(--t-sm);letter-spacing:-.01em;white-space:nowrap}
.phone svg{width:32px;height:32px;padding:7.5px;border-radius:var(--r-full);background:color-mix(in srgb,var(--ember) 12%,transparent);fill:var(--ember);flex:none;transition:transform .55s var(--e-smooth),background .4s var(--e-smooth)}
.phone:hover svg{transform:rotate(-9deg) scale(1.06);background:color-mix(in srgb,var(--ember) 20%,transparent)}
.phone:hover{color:var(--ember)}
.hdr__cta{display:none}

.burger{width:46px;height:46px;display:grid;place-content:center;gap:5px;border-radius:var(--r-md);border:1px solid var(--n-200);transition:border-color .4s var(--e-smooth),background .4s var(--e-smooth)}
.burger:hover{border-color:var(--ember);background:color-mix(in srgb,var(--ember) 7%,transparent)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .5s var(--e-smooth),opacity .35s var(--e-smooth)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobmenu{position:fixed;inset:0;z-index:99;background:var(--paper);padding:clamp(6rem,18vw,8rem) var(--gut) var(--s10);overflow-y:auto}
.mobmenu[hidden]{display:none}
.mobmenu nav{display:flex;flex-direction:column;gap:var(--s2)}
.mobmenu nav a{font-family:var(--f-display);font-weight:800;font-size:var(--t-2xl);letter-spacing:-.03em;padding-block:.5rem;border-bottom:1px solid var(--n-200)}
html.js-enabled .mobmenu.open nav>*{animation:menuIn .5s var(--e-out) backwards}
html.js-enabled .mobmenu.open nav>*:nth-child(1){animation-delay:.04s}
html.js-enabled .mobmenu.open nav>*:nth-child(2){animation-delay:.09s}
html.js-enabled .mobmenu.open nav>*:nth-child(3){animation-delay:.14s}
html.js-enabled .mobmenu.open nav>*:nth-child(4){animation-delay:.19s}
html.js-enabled .mobmenu.open nav>*:nth-child(5){animation-delay:.24s}
html.js-enabled .mobmenu.open nav>*:nth-child(6){animation-delay:.29s}
html.js-enabled .mobmenu.open nav>*:nth-child(7){animation-delay:.34s}
@keyframes menuIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mobmenu .btn{margin-top:var(--s6);font-size:var(--t-base)}
.mobmenu__phone{border:0!important;text-align:center;color:var(--ember)!important;font-size:var(--t-xl)!important}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,6rem) clamp(4rem,7vw,7rem);isolation:isolate}
.hero__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 88% 8%, color-mix(in srgb,var(--ember) 13%,transparent) 0%, transparent 58%),
    radial-gradient(80% 70% at 6% 100%, color-mix(in srgb,var(--brass) 15%,transparent) 0%, transparent 60%),
    var(--paper);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--n-200) 1px,transparent 1px),linear-gradient(90deg,var(--n-200) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);
}
html.js-enabled .hero__bg{animation:bgIn 1.4s var(--e-expo) both}
@keyframes bgIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}

.hero__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero__h1{margin-block:var(--s4) 0;color:var(--ink)}
/* Each headline line wipes in behind its own mask.
   The padding/negative-margin pair widens the mask box downward so the accent
   underline can sit below the baseline without overflow:hidden clipping it.
   Net line spacing is unchanged. */
.hero__h1 span{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.hero__h1 span>i{display:block;font-style:normal}
html.js-enabled .hero__h1 span>i{transform:translate3d(0,105%,0);transition:transform .95s var(--e-expo);transition-delay:calc(var(--d,0)*90ms)}
html.js-enabled .hero__h1 span.in>i{transform:none}
.hero__h1 em{font-style:normal;color:var(--ember);position:relative;white-space:nowrap}
/* sits BELOW the baseline so descenders (the g in "right") clear it */
.hero__h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.12em;
  background:color-mix(in srgb,var(--brass) 55%,transparent);z-index:-1;border-radius:3px;
  transform:scaleX(0);transform-origin:left center;
}
html.js-enabled .hero__h1 span.in em::after{transform:scaleX(1);transition:transform 1.05s var(--e-draw) .5s}
html:not(.js-enabled) .hero__h1 em::after{transform:scaleX(1)}

.hero__sub{margin-top:var(--s6);font-size:var(--t-lg);color:var(--n-600);max-width:52ch;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.hero__cta .btn--ghost{--bone:var(--ink);color:var(--ink)}
.hero__trust{display:flex;flex-direction:column;gap:.7rem;margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--n-200);font-size:var(--t-sm);color:var(--n-600)}
.hero__trust li{display:flex;align-items:center;gap:.6rem}
.hero__trust strong{color:var(--ink);font-weight:800}
.tick{display:grid;place-content:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--ember) 12%,transparent);color:var(--ember);font-size:11px;font-weight:800;flex:none}

.hero__media{position:relative}
.shot{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-xl);background:var(--n-200);
  aspect-ratio:5/4;
}
.shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:inherit;pointer-events:none}
.shot img{width:100%;height:100%;object-fit:cover}
/* slow ken-burns settle so the hero photo feels alive on arrival */
html.js-enabled .hero__media.in .shot img{animation:settle 1.8s var(--e-expo) both}
@keyframes settle{from{transform:scale(1.09)}to{transform:scale(1)}}
.shot--tall{aspect-ratio:4/5}

.pill{
  position:absolute;left:clamp(-.5rem,-1vw,-1.5rem);bottom:clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:.75rem;
  background:var(--paper);border-radius:var(--r-lg);padding:.85rem 1.15rem;
  box-shadow:var(--sh-lg);max-width:min(290px,88%);
}
html.js-enabled .hero__media.in .pill{animation:popIn .95s var(--e-smooth) .85s both}
.pill strong{display:block;font-family:var(--f-display);font-size:var(--t-sm);font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.pill span{font-size:var(--t-xs);color:var(--n-500);line-height:1.4}
.pill__pulse{position:relative;flex:none;width:11px;height:11px;border-radius:50%;background:#2fbf6d}
.pill__pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.stamp{
  position:absolute;right:clamp(-.25rem,-.5vw,-1rem);top:clamp(-.75rem,-2vw,-1.75rem);
  display:grid;place-content:center;text-align:center;gap:.1rem;
  width:clamp(88px,12vw,112px);aspect-ratio:1;border-radius:50%;
  background:var(--ember);color:#fff;box-shadow:var(--sh-lg);
  padding:.5rem;
}
html.js-enabled .hero__media.in .stamp{animation:stampIn 1.05s var(--e-smooth) .65s both}
@keyframes stampIn{from{opacity:0;transform:scale(.68) rotate(-12deg)}to{opacity:1;transform:none}}
.stamp strong{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;line-height:1;letter-spacing:-.04em}
.stamp span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;opacity:.92}

/* ── stat bar ──────────────────────────────────────────────────────── */
.stats{background:var(--ink);color:var(--bone);position:relative;overflow:hidden}
.stats::before{
  content:"";position:absolute;inset:0;opacity:.45;
  background:repeating-linear-gradient(115deg,transparent 0 22px,color-mix(in srgb,var(--bone) 4%,transparent) 22px 23px);
}
.stats__in{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s4);padding-block:clamp(2.5rem,4.5vw,3.75rem)}
.stat{text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:color-mix(in srgb,var(--bone) 15%,transparent)}
.stat__v{display:block;font-family:var(--f-display);font-size:var(--t-3xl);font-weight:800;letter-spacing:-.045em;color:var(--brass);line-height:1;font-variant-numeric:tabular-nums}
.stat__l{display:block;margin-top:.55rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--n-400);position:relative;padding-bottom:.5rem}
.stat__l::after{
  content:"";position:absolute;left:50%;bottom:0;width:26px;height:2px;margin-left:-13px;
  background:var(--ember);border-radius:2px;transform:scaleX(0);
  transition:transform .85s var(--e-draw) .5s;
}
html.js-enabled .stat.in .stat__l::after{transform:scaleX(1)}

/* ── services ──────────────────────────────────────────────────────── */
.svcs{display:grid;gap:var(--s5)}
.svc{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--n-200);border-radius:var(--r-lg);
  overflow:hidden;position:relative;isolation:isolate;
  transition:transform .62s var(--e-smooth),box-shadow .62s var(--e-smooth),border-color .45s var(--e-smooth);
}
/* cursor-tracked warm glow; --mx/--my set by JS, defaults keep it harmless */
.svc::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
             color-mix(in srgb,var(--ember) 13%,transparent),transparent 62%);
  transition:opacity .45s var(--e-smooth);
}
.svc:hover::before{opacity:1}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.svc__img{aspect-ratio:16/10;overflow:hidden;background:var(--n-200)}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-smooth)}
.svc:hover .svc__img img{transform:scale(1.06)}
.svc__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,2.6vw,2rem);position:relative;z-index:1}
.svc__icon{
  display:grid;place-content:center;width:46px;height:46px;flex:none;margin-bottom:var(--s4);
  border-radius:var(--r-md);background:color-mix(in srgb,var(--ember) 10%,transparent);
  transition:background .45s var(--e-smooth),transform .6s var(--e-smooth);
}
.svc__icon svg{width:23px;height:23px;fill:none;stroke:var(--ember);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s var(--e-smooth)}
.svc:hover .svc__icon{background:var(--ember);transform:rotate(-6deg) scale(1.06)}
.svc:hover .svc__icon svg{stroke:#fff}
.svc h3{color:var(--ink)}
.svc__body>p{margin-top:.7rem;color:var(--n-600);font-size:var(--t-sm);line-height:1.6}
.svc__pts{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:.4rem}
.svc__pts li{
  font-size:var(--t-xs);font-weight:600;color:var(--n-600);
  background:var(--bone);border:1px solid var(--n-200);
  padding:.3rem .65rem;border-radius:var(--r-full);
  transition:transform .5s var(--e-smooth),border-color .45s var(--e-smooth),color .45s var(--e-smooth);
}
.svc:hover .svc__pts li{border-color:color-mix(in srgb,var(--ember) 38%,transparent);color:var(--ember)}
.svc__pts li:hover{transform:translateY(-2px)}
.svc--feat{background:var(--ink);border-color:transparent;color:var(--n-300)}
.svc--feat h3{color:var(--bone)}
.svc--feat .svc__body>p{color:var(--n-300)}
.svc--feat .svc__icon{background:color-mix(in srgb,var(--brass) 16%,transparent)}
.svc--feat .svc__icon svg{stroke:var(--brass)}
.svc--feat:hover .svc__icon{background:var(--brass)}
.svc--feat:hover .svc__icon svg{stroke:var(--ink)}
.svc--feat .svc__pts li{background:color-mix(in srgb,var(--bone) 7%,transparent);border-color:color-mix(in srgb,var(--bone) 14%,transparent);color:var(--n-300)}
.svc--feat:hover .svc__pts li{border-color:color-mix(in srgb,var(--brass) 45%,transparent);color:var(--brass)}
.svc--feat .lnk{color:var(--brass)}
.svc--feat::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brass) 12%,transparent),transparent 62%)}

/* ── story ─────────────────────────────────────────────────────────── */
.story{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.story--solo .story__copy>p,.story--solo .story__lead{max-width:70ch}
.story__copy>p{color:var(--n-300);margin-top:var(--s5);max-width:58ch}
.story__lead{font-size:var(--t-lg);color:var(--bone)!important;line-height:1.55;font-weight:500}
.pillars{display:grid;gap:var(--s6);margin-top:clamp(2.5rem,4vw,3.5rem)}
/* The faint border is the TRACK; ::after is the fill that runs top-to-bottom
   on hover, like a progress bar. Same --e-draw curve as every other line in
   the system so the whole page reads as one motion language. */
.pillar{position:relative;padding-left:var(--s10);border-left:1px solid color-mix(in srgb,var(--bone) 14%,transparent)}
.pillar::after{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;z-index:0;
  background:var(--ember);border-radius:2px;
  transform:scaleY(0);transform-origin:top center;
  transition:transform .75s var(--e-draw);
}
.pillar:hover::after{transform:scaleY(1)}
.pillar__n{
  position:absolute;left:0;top:.1rem;transform:translateX(-50%);z-index:1;
  display:grid;place-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--ember);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;
  transition:transform .6s var(--e-smooth),background .45s var(--e-smooth);
}
.pillar:hover .pillar__n{transform:translateX(-50%) scale(1.1);background:var(--ember-hi)}
.pillar h3{font-size:var(--t-base);letter-spacing:-.01em;color:var(--bone)}
.pillar p{margin-top:.4rem;font-size:var(--t-sm);color:var(--n-400);line-height:1.6}

/* ── process ───────────────────────────────────────────────────────── */
.steps{display:grid;gap:var(--s8);position:relative;counter-reset:step}
.step{position:relative;text-align:center;padding-inline:var(--s2)}
.step__n{
  display:grid;place-content:center;width:64px;height:64px;margin:0 auto var(--s5);
  border-radius:50%;background:var(--paper);border:2px solid var(--ember);
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;color:var(--ember);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--ember) 7%,transparent);
  position:relative;z-index:1;
  transition:transform .6s var(--e-smooth),background .5s var(--e-smooth),color .5s var(--e-smooth),box-shadow .5s var(--e-smooth);
}
.step:hover .step__n{transform:scale(1.08) translateY(-3px);background:var(--ember);color:#fff;box-shadow:0 0 0 12px color-mix(in srgb,var(--ember) 10%,transparent)}
.step h3{color:var(--ink)}
.step p{margin-top:.65rem;color:var(--n-600);font-size:var(--t-sm);line-height:1.65;max-width:38ch;margin-inline:auto}
.steps__cta{text-align:center;margin-top:clamp(2.5rem,4vw,3.5rem)}

/* ── gallery ───────────────────────────────────────────────────────── */
.gal{display:grid;gap:var(--s4)}
/* square cells: most forgiving crop across mixed portrait/landscape sources */
.gal__i{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--n-200);aspect-ratio:1/1;box-shadow:var(--sh-md);transition:box-shadow .62s var(--e-smooth),transform .62s var(--e-smooth)}
.gal__i:hover{transform:translateY(-5px);box-shadow:var(--sh-xl)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-smooth)}
.gal__i:hover img{transform:scale(1.08)}
.gal__i figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:3rem 1.15rem 1.05rem;
  font-size:var(--t-sm);font-weight:700;color:#fff;
  background:linear-gradient(transparent,rgba(16,18,20,.86));
  transform:translateY(6px);opacity:.92;
  transition:transform .6s var(--e-smooth),opacity .6s var(--e-smooth);
}
.gal__i:hover figcaption{transform:none;opacity:1}

/* ── reviews ───────────────────────────────────────────────────────── */
.gscore{display:flex;align-items:center;gap:.85rem;background:var(--bone);border:1px solid var(--n-200);border-radius:var(--r-lg);padding:.85rem 1.25rem;transition:box-shadow .55s var(--e-smooth),transform .55s var(--e-smooth),border-color .45s var(--e-smooth)}
.gscore:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--n-300)}
.gscore__g{width:26px;height:26px;flex:none;transition:transform .6s var(--e-smooth)}
.gscore:hover .gscore__g{transform:rotate(6deg) scale(1.06)}
.gscore strong{display:flex;align-items:center;gap:.5rem;font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.gscore small{display:block;font-size:var(--t-xs);color:var(--n-500)}

.revs{display:grid;gap:var(--s5)}
.rev{
  display:flex;flex-direction:column;gap:var(--s4);
  background:var(--paper);border:1px solid var(--n-200);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,1.9rem);position:relative;overflow:hidden;
  transition:transform .62s var(--e-smooth),box-shadow .62s var(--e-smooth),border-color .45s var(--e-smooth);
}
.rev:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}
.rev::before{
  content:"\201C";position:absolute;right:1.1rem;top:.3rem;
  font-family:var(--f-display);font-size:5rem;line-height:1;color:var(--n-200);
  transition:transform .7s var(--e-smooth),color .5s var(--e-smooth);
}
.rev:hover::before{transform:scale(1.1) rotate(-4deg);color:color-mix(in srgb,var(--ember) 18%,transparent)}
.rev p{color:var(--n-700);line-height:1.65;font-size:var(--t-sm);position:relative}
.rev footer{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--n-200)}
.rev footer strong{display:block;font-weight:800;color:var(--ink);font-size:var(--t-sm)}
.rev footer span{font-size:var(--t-xs);color:var(--n-500)}
.revs__note{
  margin-bottom:var(--s6);padding:.8rem 1.1rem;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--brass) 12%,transparent);
  border:1px dashed color-mix(in srgb,var(--brass) 55%,transparent);
  font-size:var(--t-xs);color:var(--n-700);line-height:1.55;
}

/* ── financing ─────────────────────────────────────────────────────── */
.fin{background:var(--ink-2);color:var(--n-300);padding-block:clamp(3rem,5vw,4.5rem)}
.fin__in{display:grid;gap:var(--s8);align-items:center}
.fin h2{font-size:var(--t-2xl);color:var(--bone);max-width:22ch}
.fin__copy>p{margin-top:var(--s4);max-width:52ch;font-size:var(--t-sm);line-height:1.65}
.fin__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.promo{font-size:var(--t-sm);color:var(--n-400)}
.promo strong{color:var(--brass);font-weight:800;letter-spacing:.04em}
.fin__logo{background:var(--paper);border-radius:var(--r-lg);padding:var(--s5);display:grid;place-content:center;transition:transform .62s var(--e-smooth)}
.fin__logo:hover{transform:translateY(-3px)}
.fin__logo img{max-height:78px;width:auto;object-fit:contain}

/* ── service areas ─────────────────────────────────────────────────── */
.locs{display:grid;gap:var(--s5)}
.loc{
  background:var(--paper);border:1px solid var(--n-200);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2rem);position:relative;overflow:hidden;
  transition:transform .62s var(--e-smooth),box-shadow .62s var(--e-smooth),border-color .45s var(--e-smooth);
}
.loc::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--e-draw);
}
.loc:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}
.loc:hover::after{transform:scaleY(1)}
.loc__hd{display:flex;gap:var(--s4);align-items:flex-start}
.loc__pin{display:grid;place-content:center;width:42px;height:42px;flex:none;border-radius:var(--r-md);background:color-mix(in srgb,var(--ember) 10%,transparent);transition:background .45s var(--e-smooth),transform .6s var(--e-smooth)}
.loc__pin svg{width:21px;height:21px;fill:var(--ember);transition:fill .45s var(--e-smooth)}
.loc:hover .loc__pin{background:var(--ember);transform:translateY(-3px)}
.loc:hover .loc__pin svg{fill:#fff}
.loc__hd h3{font-size:var(--t-lg);color:var(--ink)}
.loc__hd p{font-size:var(--t-sm);color:var(--n-500);margin-top:.2rem}
.loc__phone{
  display:inline-block;margin-top:var(--s5);
  font-family:var(--f-display);font-size:var(--t-xl);font-weight:800;letter-spacing:-.03em;color:var(--ember);
  transition:color .4s var(--e-smooth),transform .5s var(--e-smooth);
}
.loc__phone:hover{color:var(--ember-dk);transform:translateX(3px)}
.loc__cities{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--n-200);font-size:var(--t-sm);color:var(--n-500);line-height:1.75}

/* ── faq ───────────────────────────────────────────────────────────── */
.faq{display:grid;gap:clamp(2.5rem,4vw,4rem);align-items:start}
.faq__side p{color:var(--n-600);margin-top:var(--s5);max-width:40ch}
.faq__side .btn{margin-top:var(--s6)}
.faq__list{display:grid;gap:var(--s3)}
.qa{background:var(--paper);border:1px solid var(--n-200);border-radius:var(--r-lg);overflow:hidden;transition:border-color .5s var(--e-smooth),box-shadow .5s var(--e-smooth)}
.qa:hover{border-color:var(--n-300)}
.qa[open]{border-color:color-mix(in srgb,var(--ember) 35%,transparent);box-shadow:var(--sh-sm)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:1.15rem clamp(1.1rem,2vw,1.5rem);cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:800;font-size:var(--t-base);letter-spacing:-.015em;color:var(--ink);
  transition:color .4s var(--e-smooth);
}
.qa summary:hover{color:var(--ember)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{
  position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,var(--ember) 11%,transparent);
  transition:background .5s var(--e-smooth),transform .55s var(--e-smooth);
}
.qa summary:hover i{transform:scale(1.12)}
.qa summary i::before,.qa summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ember);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .55s var(--e-smooth),opacity .4s var(--e-smooth),background .45s var(--e-smooth);
}
.qa summary i::before{width:10px;height:2px}
.qa summary i::after{width:2px;height:10px}
/* closed = "+", open = "−" (the vertical stroke spins out) */
.qa[open] summary i{background:var(--ember)}
.qa[open] summary i::before{background:#fff}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa__a{padding:0 clamp(1.1rem,2vw,1.5rem) 1.35rem}
.qa__a p{color:var(--n-600);font-size:var(--t-sm);line-height:1.7;max-width:64ch}
/* JS animates height on toggle; this keeps the text from reflowing mid-slide */
.qa__a{overflow:hidden}

/* ── estimate ──────────────────────────────────────────────────────── */
.est{background:var(--ink);color:var(--n-300);padding-block:var(--sec-y);position:relative;overflow:hidden}
.est::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 82% 12%,color-mix(in srgb,var(--ember) 22%,transparent),transparent 62%);
}
.est__in{position:relative;display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.est h2{color:var(--bone);max-width:16ch}
.est__sub{margin-top:var(--s5);font-size:var(--t-lg);color:var(--n-300);max-width:46ch;line-height:1.6}
.promise{
  display:flex;gap:var(--s4);align-items:flex-start;margin-top:var(--s8);
  background:color-mix(in srgb,var(--bone) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);
  border-radius:var(--r-lg);padding:1.1rem 1.3rem;max-width:44ch;
}
.promise__ico{display:grid;place-content:center;width:34px;height:34px;flex:none;border-radius:50%;background:color-mix(in srgb,#2fbf6d 18%,transparent)}
.promise strong{display:block;font-family:var(--f-display);font-weight:800;font-size:var(--t-sm);color:var(--bone)}
.promise p{margin-top:.25rem;font-size:var(--t-xs);color:var(--n-400);line-height:1.55}
.est__meta{display:grid;gap:.7rem;margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.est__meta li{display:flex;gap:var(--s4);font-size:var(--t-sm)}
.est__meta strong{min-width:8.5rem;color:var(--bone);font-weight:700}
.est__meta span{color:var(--n-400)}

.form{background:var(--paper);border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--sh-xl);display:grid;gap:var(--s4)}
.form__h{font-size:var(--t-xl);color:var(--ink)}
.f{display:grid;gap:.4rem}
.f label{font-size:var(--t-xs);font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--n-600);transition:color .38s var(--e-smooth)}
.f label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--n-400)}
.f:focus-within label{color:var(--ember)}
.f input,.f select,.f textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;font-size:16px;
  background:var(--bone);border:1.5px solid var(--n-200);border-radius:var(--r-md);
  color:var(--n-900);
  transition:border-color .38s var(--e-smooth),box-shadow .38s var(--e-smooth),background .38s var(--e-smooth),transform .38s var(--e-smooth);
}
.f textarea{min-height:96px;resize:vertical;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:var(--n-400)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;background:var(--paper);border-color:var(--ember);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ember) 14%,transparent);
}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7466' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.8rem}
.form__fine{font-size:var(--t-xs);color:var(--n-400);text-align:center;line-height:1.5}
.form__done{text-align:center;padding-block:var(--s6);animation:pop .75s var(--e-smooth) both}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.form__tick{display:grid;place-content:center;width:60px;height:60px;margin:0 auto var(--s5);border-radius:50%;background:color-mix(in srgb,#2fbf6d 15%,transparent);color:#2fbf6d;font-size:1.8rem;font-weight:700;animation:tickIn .8s var(--e-smooth) .15s both}
@keyframes tickIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.form__done h3{color:var(--ink);font-size:var(--t-2xl)}
.form__done>p{margin-top:var(--s4);color:var(--n-600);font-size:var(--t-sm);line-height:1.65;max-width:44ch;margin-inline:auto}
.form__demo{margin-top:var(--s6)!important;padding:.9rem 1.1rem;border-radius:var(--r-md);background:var(--bone);border:1px dashed var(--n-300);font-size:var(--t-xs)!important;color:var(--n-600)}
.form__demo strong{color:var(--ember)}

/* ── footer ────────────────────────────────────────────────────────── */
.ftr{background:var(--ink);color:var(--n-400);padding-top:clamp(3rem,5vw,4.5rem);font-size:var(--t-sm)}
.ftr__in{display:grid;gap:var(--s10)}
.ftr__brand img{height:52px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.ftr__brand p{margin-top:var(--s4);max-width:34ch;line-height:1.65}
.ftr__soc{display:flex;gap:.6rem;margin-top:var(--s5)}
.ftr__soc a{display:grid;place-content:center;width:40px;height:40px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bone) 7%,transparent);transition:background .4s var(--e-smooth),transform .55s var(--e-smooth)}
.ftr__soc svg{width:19px;height:19px;fill:var(--n-300);transition:fill .4s var(--e-smooth)}
.ftr__soc a:hover{background:var(--ember);transform:translateY(-3px) rotate(-4deg)}
.ftr__soc a:hover svg{fill:#fff}
.ftr__col h4{color:var(--bone);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s4);font-family:var(--f-body);font-weight:800}
.ftr__col li{padding-block:.28rem;line-height:1.5}
.ftr__col a{display:inline-block;transition:color .4s var(--e-smooth),transform .45s var(--e-smooth)}
.ftr__col a:hover{color:var(--brass);transform:translateX(3px)}
.ftr__col strong{color:var(--n-300);font-weight:700}
.ftr__cities{display:flex;flex-wrap:wrap;gap:.25rem .85rem;max-width:30ch}
.ftr__cities li{padding:0;font-size:var(--t-xs)}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;
  margin-top:clamp(2.5rem,4vw,3.5rem);padding-block:var(--s6);
  border-top:1px solid color-mix(in srgb,var(--bone) 10%,transparent);
  font-size:var(--t-xs);color:var(--n-500);
}
.ftr__legal a{color:var(--n-400);text-decoration:underline;text-underline-offset:3px}
.ftr__legal a:hover{color:var(--brass)}

/* ── mobile action bar ─────────────────────────────────────────────── */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--n-200);
  box-shadow:0 -6px 24px -8px rgba(38,28,18,.28);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(var(--bar,0));
  transition:transform .55s var(--e-smooth);
}
.mbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:58px;font-weight:800;font-size:var(--t-sm)}
.mbar a:active{transform:scale(.98)}
.mbar__call{background:var(--ink);color:var(--bone)}
.mbar__call svg{width:17px;height:17px;fill:var(--brass)}
.mbar__quote{background:var(--ember);color:#fff}
body{padding-bottom:58px}

/* ═══════════════════════════════════════════ responsive ═══════════ */
@media (min-width:600px){
  .hero__trust{flex-direction:row;flex-wrap:wrap;gap:.6rem 1.75rem}
  .svcs{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:repeat(2,1fr)}
  .locs{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__i--wide{grid-column:span 2;aspect-ratio:16/9}
  .stats__in{grid-template-columns:repeat(4,1fr)}
  .ftr__in{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr)}
  /* the connector draws itself as the section scrolls in */
  .steps::before{
    content:"";position:absolute;top:32px;left:16.6%;right:16.6%;height:2px;
    background:repeating-linear-gradient(90deg,var(--n-300) 0 8px,transparent 8px 16px);
    transform:scaleX(0);transform-origin:left;
    transition:transform 1.5s var(--e-draw) .3s;
  }
  html:not(.js-enabled) .steps::before{transform:scaleX(1)}
  .steps.in::before{transform:scaleX(1)}
  .fin__in{grid-template-columns:1fr auto}
  .faq{grid-template-columns:.85fr 1.15fr}
  .story{grid-template-columns:.9fr 1.1fr}
  .story--solo{grid-template-columns:1fr}
  .pillars{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:1024px){
  body{padding-bottom:0}
  .mbar{display:none}
  .nav{display:flex}
  .phone{display:flex}
  .hdr__cta{display:inline-flex}
  .burger{display:none}
  .mobmenu{display:none!important}
  .gal{grid-template-columns:repeat(4,1fr)}
  .gal__i--wide{grid-column:span 2;aspect-ratio:2/1}
  .hero__in{grid-template-columns:1.02fr .98fr}
  .est__in{grid-template-columns:1fr 1fr}
  .svcs{grid-template-columns:repeat(3,1fr)}
  .svc--feat{grid-column:span 2;flex-direction:row}
  .svc--feat .svc__img{aspect-ratio:auto;flex:1 1 46%}
  .svc--feat .svc__body{flex:1 1 54%;justify-content:center}
  .revs{grid-template-columns:repeat(3,1fr)}
  .ftr__in{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .f--full{grid-column:1/-1}
  .form{grid-template-columns:1fr 1fr}
  .form__h,.form>.btn,.form__fine{grid-column:1/-1}
}

@media (min-width:1280px){
  .hero{padding-block:clamp(4rem,5vw,6.5rem) clamp(5rem,7vw,8rem)}
}

/* pointer-specific flourishes: never on touch, where they misfire */
@media (hover:none){
  .svc::before{display:none}
  .btn::before{display:none}
}

/* print */
@media print{
  .hdr,.mbar,.announce,.mobmenu,.btn,.prog{display:none!important}
  body{color:#000;background:#fff}
}