/* ==========================================================================
   Local service site — design system. No client identity belongs in this file,
   including in these comments: a previous client's name sat here for months and
   shipped inside every build until the isolation gate caught it.
   ONE accent, set in the three --ember tokens below. Type scale deliberately
   tighter than display-max so headings sit against photography instead of
   shouting over it.
   ========================================================================== */

:root{
  --ember:#2D767A;
  --ember-rgb:45,118,122;   /* the same accent as r,g,b, for rgba() uses. Change with --ember. */
  --ember-hot:#368E94;
  --ember-deep:#235B5E;      /* text-on-light variant of the same hue */
  --ember-glow:rgba(var(--ember-rgb),.42);

  --ink:#0F1216;
  --ink-2:#161A20;
  --ink-3:#212730;
  --ink-4:#2C333E;
  --bone:#F5F4F1;
  --bone-2:#E9E7E2;
  --grey:#6E727A;
  --grey-2:#A2A7B0;

  --line:rgba(15,18,22,.12);
  --line-d:rgba(255,255,255,.12);

  --util-h:36px;
  --nav-h:74px;
  --top:110px;
  --shell:1300px;
  --pad:clamp(1.15rem,3.6vw,2.75rem);
  --r:16px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,.68,.24,1);
  --out:cubic-bezier(.16,1,.3,1);
  --sh:0 2px 6px rgba(15,18,22,.05),0 12px 34px -12px rgba(15,18,22,.18);
  --sh-lg:0 6px 14px rgba(15,18,22,.08),0 36px 74px -22px rgba(15,18,22,.34);
}

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bone);color:var(--ink);overflow-x:hidden;padding-top:var(--top);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .22vw,1.12rem);line-height:1.58;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video,svg{max-width:100%;display:block}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* --- TYPE SCALE: sized to sit with photography, not to dominate it --- */
h1,h2,h3,h4{margin:0;font-family:"Archivo","Inter",sans-serif;font-weight:800;
  font-stretch:110%;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(2.2rem,3.9vw,3.8rem);line-height:1.02}
h2{font-size:clamp(1.8rem,3.1vw,2.95rem)}
h3{font-size:clamp(1.12rem,1.5vw,1.42rem);letter-spacing:-.028em;line-height:1.16}
h4{font-size:clamp(1rem,1.15vw,1.14rem);letter-spacing:-.022em;line-height:1.24}
/* headings that sit beside an image stay in proportion to it */
.split h2,.figside h2{font-size:clamp(1.65rem,2.5vw,2.4rem)}

::selection{background:var(--ember);color:#fff}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:5px}
.skip{position:fixed;left:-9999px;top:0;z-index:999;background:var(--ember);color:#fff;padding:1rem 1.5rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}
}

/* grain, kills flatness */
body::after{content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.15;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.shell-mid{max-width:1020px}

.screen{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-block:max(clamp(3.6rem,7vh,6rem),calc(var(--top) + 1rem));
  scroll-margin-top:var(--top);isolation:isolate}
.screen.auto{min-height:0}
.screen--ink{background:var(--ink);color:var(--bone)}
.screen--ink2{background:var(--ink-2);color:var(--bone)}
.screen--bone2{background:var(--bone-2)}
.screen--ember{background:var(--ember);color:#fff}
.screen--ink::before,.screen--ink2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 46% at 10% 4%,rgba(var(--ember-rgb),.20),transparent 66%),
             radial-gradient(46% 40% at 94% 98%,rgba(var(--ember-rgb),.12),transparent 70%)}

/* hazard stripe, the tow-truck bumper motif */
.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--ember) 0 16px,var(--ink) 16px 32px);
  position:relative;z-index:2}

.eyebrow{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:104%;font-size:.8rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ember-deep);
  display:block;margin-bottom:.85rem;line-height:1.3}
.eyebrow.center{text-align:center}
.screen--ink .eyebrow,.screen--ink2 .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--ember)}
.screen--ember .eyebrow{color:#fff}

.lede{font-size:clamp(1.05rem,1rem + .34vw,1.26rem);line-height:1.55;color:var(--grey);max-width:60ch;letter-spacing:-.011em}
.screen--ink .lede,.screen--ink2 .lede,.hero .lede,.phero .lede{color:rgba(245,244,241,.74)}
.screen--ember .lede{color:rgba(255,255,255,.9)}
.head{max-width:830px;margin-bottom:clamp(2.1rem,4vw,3.4rem)}
.head.center{margin-inline:auto;text-align:center}
.head.center .lede{margin-inline:auto}
.head h2 + .lede{margin-top:1.2rem}
.accent{color:var(--ember-deep)}
.screen--ink .accent,.screen--ink2 .accent,.hero .accent,.phero .accent{color:var(--ember)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:"Inter",sans-serif;font-weight:600;font-size:.99rem;letter-spacing:-.012em;
  padding:.95rem 1.75rem;border-radius:999px;border:2px solid transparent;min-height:54px;
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .36s var(--out),box-shadow .36s var(--out),background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease)}
.btn .lbl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55rem}
.btn svg{flex:none;transition:transform .36s var(--out)}
.btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;opacity:0;
  background:radial-gradient(120% 170% at 50% 120%,var(--ember-hot),transparent 62%);transition:opacity .36s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn:hover svg{transform:translateX(4px)}
.btn-ember{background:var(--ember);color:#fff;box-shadow:0 8px 22px -8px var(--ember-glow)}
.btn-ember:hover{box-shadow:0 16px 36px -10px var(--ember-glow)}
.btn-ember:hover::before{opacity:1}
.btn-ink{background:var(--ink);color:var(--bone);box-shadow:var(--sh)}
.btn-ink:hover{box-shadow:var(--sh-lg)}
.btn-ink:hover::before{opacity:1}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone:hover{background:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.screen--ink .btn-ghost,.screen--ink2 .btn-ghost,.hero .btn-ghost,.phero .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.07)}
.screen--ink .btn-ghost:hover,.screen--ink2 .btn-ghost:hover,.hero .btn-ghost:hover,.phero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.screen--ember .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.12)}
.screen--ember .btn-ghost:hover{background:#fff;color:var(--ember-deep);border-color:#fff}
.btn-lg{font-size:1.06rem;padding:1.1rem 2.1rem;min-height:62px}
.btn-full{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.actions.center{justify-content:center}

/* ==========================================================================
   FIXED HEADER
   ========================================================================== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:600;transition:box-shadow .4s var(--ease)}
.topbar.stuck{box-shadow:0 10px 36px -14px rgba(0,0,0,.6)}
.util{background:#0A0C0F;color:var(--grey-2);height:var(--util-h);display:flex;align-items:center;overflow:hidden;
  transition:height .38s var(--ease),opacity .3s var(--ease)}
.topbar.stuck .util{height:0;opacity:0}
.util .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;white-space:nowrap;
  font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase}
.util b{color:var(--ember);font-weight:500}
.util .r{display:flex;gap:1.8rem;align-items:center}
.util a:hover{color:#fff}
.beacon{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ember);margin-right:.5rem;
  box-shadow:0 0 0 0 var(--ember-glow);animation:beat 2.2s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 var(--ember-glow)}70%{box-shadow:0 0 0 9px rgba(var(--ember-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ember-rgb),0)}}
@media (max-width:960px){.util .r span:not(:last-child){display:none}}
@media (max-width:640px){.util{display:none}:root{--top:74px}}

.navrow{background:var(--ink);border-bottom:1px solid var(--line-d);height:var(--nav-h);
  display:flex;align-items:center;color:var(--bone);transition:height .38s var(--ease)}
.topbar.stuck .navrow{height:64px}
.navrow .shell{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem)}

.mark{display:inline-flex;align-items:center;gap:.7rem;flex:none;transition:transform .38s var(--out)}
.mark:hover{transform:translateX(2px)}
.mark .glyph{width:42px;height:42px;border-radius:10px;flex:none;overflow:hidden;
  box-shadow:0 4px 14px -4px var(--ember-glow);transition:transform .5s var(--out)}
.mark:hover .glyph{transform:rotate(-4deg) scale(1.05)}
.mark .txt b{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.06rem;letter-spacing:-.04em;line-height:1.1}
.mark .txt small{display:block;font-family:"Inter",sans-serif;font-size:.58rem;letter-spacing:.18em;
  color:var(--ember);margin-top:.14rem;text-transform:uppercase}
@media (max-width:1240px){.mark .txt small{display:none}}

.mainnav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.mainnav > li{position:relative}
.navlink{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.66rem .92rem;
  border-radius:10px;font-weight:500;font-size:.97rem;white-space:nowrap;color:var(--grey-2);
  transition:color .24s var(--ease),background-color .24s var(--ease)}
.navlink::after{content:"";position:absolute;left:.92rem;right:.92rem;bottom:.36rem;height:2px;border-radius:2px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--out)}
.navlink:hover{color:#fff;background:rgba(255,255,255,.06)}
.navlink:hover::after,.navlink[aria-current="page"]::after,li.open > .navlink::after{transform:scaleX(1)}
.navlink[aria-current="page"]{color:var(--ember)}
.navlink .chev{transition:transform .32s var(--out);opacity:.6}
li.open > .navlink .chev{transform:rotate(180deg);opacity:1}
@media (max-width:1120px){.mainnav{display:none}}

/* SOLID dropdown. No transparency. */
.dropdown{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:min(780px,88vw);
  background:#12161C;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  padding:.85rem;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.99);
  transition:opacity .28s var(--out),transform .28s var(--out),visibility .28s}
li.open > .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown::before{content:"";position:absolute;top:-7px;left:50%;translate:-50% 0;width:14px;height:14px;
  background:#12161C;border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);
  transform:rotate(45deg)}
.dropgrid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
.dropitem{display:flex;gap:.8rem;align-items:flex-start;padding:.72rem .85rem;border-radius:12px;
  transition:background-color .22s var(--ease),transform .28s var(--out)}
.dropitem:hover{background:rgba(var(--ember-rgb),.14);transform:translateX(3px)}
.dropitem .n{font-family:"Inter",sans-serif;font-size:.66rem;color:var(--ember);font-weight:500;
  padding-top:.22rem;flex:none}
.dropitem b{display:block;font-size:.95rem;font-weight:500;color:#fff;line-height:1.28}
.dropitem span{display:block;font-size:.83rem;color:var(--grey-2);line-height:1.4;margin-top:.1rem}
.dropfoot{margin-top:.45rem;padding:.85rem .9rem .3rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dropfoot p{font-size:.9rem;color:var(--grey-2)}
.dropfoot .btn{min-height:46px;padding:.62rem 1.3rem;font-size:.92rem}

.topact{display:flex;align-items:center;gap:.75rem;flex:none;margin-left:.4rem}
.topcall{display:flex;flex-direction:column;line-height:1.1;transition:color .24s var(--ease)}
.topcall b{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.035em}
.topcall small{font-family:"Inter",sans-serif;font-size:.56rem;letter-spacing:.16em;color:var(--ember);
  text-transform:uppercase;margin-top:.12rem}
.topcall:hover{color:var(--ember)}
.topact .btn{min-height:46px;padding:.66rem 1.35rem;font-size:.94rem}
@media (max-width:1120px){.topact{margin-left:auto}}
@media (max-width:900px){.topcall{display:none}}
@media (max-width:760px){.topact .btn{display:none}.topact{gap:.5rem}}

.burger{display:none;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);transition:background-color .24s var(--ease)}
.burger:hover{background:rgba(var(--ember-rgb),.2);border-color:var(--ember)}
.burger .bars{width:21px;height:14px;position:relative}
.burger .bars i{position:absolute;left:0;height:2.3px;width:100%;background:#fff;border-radius:2px;
  transition:transform .4s var(--out),opacity .24s var(--ease)}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:6px;width:68%}
.burger .bars i:nth-child(3){top:12px}
body.nav-open .burger .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger .bars i:nth-child(2){opacity:0}
body.nav-open .burger .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1120px){.burger{display:inline-flex}}

.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;overflow:hidden;z-index:2}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--ember-hot));
  box-shadow:0 0 12px var(--ember-glow);transition:width .1s linear}

/* drawer */
.drawer{position:fixed;inset:0;z-index:590;background:var(--ink);color:var(--bone);
  padding:calc(var(--top) + 1.2rem) 0 2rem;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-2%);
  transition:opacity .4s var(--out),transform .4s var(--out),visibility .4s}
body.nav-open .drawer{opacity:1;visibility:visible;transform:none}
body.nav-open{overflow:hidden}
.drawer nav > ul > li{border-bottom:1px solid var(--line-d)}
.drawer .dlink{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1.1rem 0;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.04em;text-align:left;
  transition:color .24s var(--ease),padding-left .3s var(--out)}
.drawer .dlink:hover,.drawer .dlink[aria-current="page"]{color:var(--ember);padding-left:.5rem}
.drawer li.open .dtoggle .chev{transform:rotate(180deg);color:var(--ember)}
.drawer .dsub{max-height:0;overflow:hidden;transition:max-height .45s var(--out)}
.drawer li.open .dsub{max-height:720px}
.drawer .dsub a{display:block;padding:.75rem 0 .75rem 1rem;color:var(--grey-2);font-size:1.02rem;
  border-left:2px solid var(--line-d);transition:color .22s var(--ease),border-color .22s var(--ease),padding-left .28s var(--out)}
.drawer .dsub a:hover{color:#fff;border-color:var(--ember);padding-left:1.4rem}
.drawer .dsub li:last-child a{padding-bottom:1.2rem}
.drawer .dfoot{padding-top:1.8rem;display:grid;gap:.7rem}
.drawer .dmeta{margin-top:1.4rem;font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.14em;
  color:var(--grey-2);text-transform:uppercase;line-height:2}

/* ==========================================================================
   HERO — text left, full dispatch form right
   ========================================================================== */
.hero{position:relative;min-height:calc(100svh - var(--top));display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;padding-block:clamp(2.2rem,5vh,4rem)}
.hero .bgwrap{position:absolute;inset:0;z-index:-3}
.hero .bgwrap img,/* no video on this build */ .hero .bgwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* no video on this build */ .hero .bgwrap video{opacity:0;transition:opacity 1.1s var(--ease)}
/* no video on this build */ .hero .bgwrap video.on{opacity:1}
.hero .bgwrap img,/* no video on this build */ .hero .bgwrap video{filter:brightness(.58) saturate(1.06) contrast(1.04)}
.hero .scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(100deg,rgba(11,13,16,.97) 0%,rgba(11,13,16,.93) 34%,rgba(11,13,16,.74) 58%,rgba(11,13,16,.5) 100%),
    radial-gradient(66% 82% at 2% 96%,rgba(var(--ember-rgb),.3),transparent 60%),
    linear-gradient(180deg,rgba(11,13,16,.55),transparent 30%,rgba(11,13,16,.55))}
@media (max-width:1080px){
  .hero .scrim{background:linear-gradient(180deg,rgba(9,11,14,.96),rgba(9,11,14,.93)),
    radial-gradient(70% 60% at 4% 8%,rgba(var(--ember-rgb),.24),transparent 62%)}
  .hero .bgwrap img,/* no video on this build */ .hero .bgwrap video{filter:brightness(.45) saturate(1.05)}
}
.hero .shell{position:relative;z-index:1;width:100%}
.herogrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(370px,458px);
  gap:clamp(1.8rem,3.4vw,3.6rem);align-items:center}
@media (max-width:1080px){.herogrid{grid-template-columns:1fr;gap:2.2rem}.hero{min-height:0;padding-block:3rem 3.5rem}}
.heroleft h1{margin-bottom:1.15rem;max-width:16ch}
.heroleft h1 em{font-style:normal;color:var(--ember);text-shadow:0 0 40px rgba(var(--ember-rgb),.45)}
.heroleft .lede{max-width:50ch}

/* unused */ .herotags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
/* unused */ .herotags button{font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.5rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8);transition:all .28s var(--ease)}
/* unused */ .herotags button:hover{background:var(--ember);border-color:var(--ember);color:var(--ink);transform:translateY(-2px)}
@media (max-width:1080px){/* unused */ .herotags{display:none}}

/* --- the dispatch form, written out in full --- */
.dispatch{background:var(--bone);color:var(--ink);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.1)}
.dispatch .dh{background:var(--ink-2);color:#fff;padding:1.05rem 1.35rem;position:relative;overflow:hidden}
.dispatch .dh::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 150% at 6% 110%,rgba(var(--ember-rgb),.5),transparent 64%)}
.dispatch .dh > *{position:relative;z-index:1}
.dispatch .dh b{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.16rem;letter-spacing:-.032em}
.dispatch .dh span{display:block;font-family:"Inter",sans-serif;font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ember);margin-top:.28rem}
.dispatch .db{padding:1.15rem 1.35rem 1.35rem}
.f{display:flex;flex-direction:column;gap:.34rem;margin-bottom:.72rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.f label{font-family:"Inter",sans-serif;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
.f .rq{color:var(--ember-deep)}
.f input,.f select,.f textarea{font-family:"Inter",sans-serif;font-size:.98rem;padding:.72rem .85rem;
  border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--grey)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 4px rgba(var(--ember-rgb),.2)}
.f textarea{min-height:66px;resize:vertical;line-height:1.45}
.f select{appearance:none;cursor:pointer;background-repeat:no-repeat;background-position:right .85rem center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' stroke='%236E727A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.pills{display:flex;gap:.4rem}
.pills button{flex:1;padding:.6rem .5rem;border-radius:9px;border:1.5px solid var(--line);background:#fff;
  font-size:.9rem;font-weight:500;transition:all .26s var(--ease)}
.pills button:hover{border-color:var(--ink)}
.pills button[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff;font-weight:600}
.dnote{font-size:.84rem;color:var(--grey);margin-top:.75rem;text-align:center;line-height:1.5}
.dnote a{color:var(--ember-deep);font-weight:600}
.dsent{display:none;padding:2.4rem 1.5rem 2.6rem;text-align:center}
.dispatch.sent .db{display:none}
.dispatch.sent .dsent{display:block}
.dsent .ok{width:66px;height:66px;border-radius:50%;background:var(--ember);color:#fff;display:grid;
  place-items:center;margin:0 auto 1.2rem;box-shadow:0 12px 30px -10px var(--ember-glow)}
.dsent h3{margin-bottom:.6rem}
.dsent p{color:var(--grey);max-width:34ch;margin-inline:auto;font-size:.98rem}

/* ==========================================================================
   PAGE HERO (interior views)
   ========================================================================== */
.phero{position:relative;min-height:clamp(360px,58svh,560px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink);color:#fff;isolation:isolate;padding-block:clamp(2.6rem,6vh,4rem)}
.phero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transform:scale(1.05);
  filter:brightness(.6) saturate(1.05)}
.phero .scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(11,13,16,.82) 0%,rgba(11,13,16,.72) 30%,rgba(11,13,16,.97) 100%),
             radial-gradient(66% 80% at 4% 100%,rgba(var(--ember-rgb),.3),transparent 60%)}
.phero.notype{background:var(--ink-2)}
.phero.notype::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(64% 76% at 6% 100%,rgba(var(--ember-rgb),.3),transparent 62%),
             repeating-linear-gradient(-45deg,rgba(var(--ember-rgb),.05) 0 22px,transparent 22px 44px)}
.phero .shell{position:relative;z-index:1;width:100%}
.phero h1{font-size:clamp(2rem,3.5vw,3.4rem);margin-bottom:1rem}
.crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;
  font-family:"Inter",sans-serif;font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.crumb a:hover{color:var(--ember)}
.crumb .cur{color:#fff}

/* ---------- stat strip ---------- */
.strip{background:var(--ink);color:var(--bone);position:relative;z-index:1}
.strip .shell{display:grid;grid-template-columns:repeat(4,1fr);padding-inline:0}
.strip .s{padding:1.9rem 1.2rem;text-align:center;border-right:1px solid var(--line-d);position:relative;
  transition:background-color .38s var(--ease)}
.strip .s:last-child{border-right:0}
.strip .s:hover{background:rgba(var(--ember-rgb),.12)}
.strip .s::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--ember);
  transform:scaleX(0);transition:transform .42s var(--out)}
.strip .s:hover::after{transform:scaleX(1)}
.strip b{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.7rem,2.7vw,2.5rem);
  line-height:1;letter-spacing:-.045em;color:#fff}
.strip span{display:block;font-family:"Inter",sans-serif;font-size:.63rem;letter-spacing:.15em;
  margin-top:.6rem;color:var(--grey-2);text-transform:uppercase;line-height:1.5}
@media (max-width:780px){.strip .shell{grid-template-columns:1fr 1fr}.strip .s{padding:1.4rem 1rem}
  .strip .s:nth-child(2n){border-right:0}.strip .s:nth-child(-n+2){border-bottom:1px solid var(--line-d)}}

/* ==========================================================================
   CARDS
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.1vw,1.1rem)}
@media (max-width:1180px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);text-align:left;
  transition:transform .46s var(--out),box-shadow .46s var(--out),border-color .36s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--ember);opacity:0;transition:opacity .36s var(--ease)}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:transparent}
.card:hover::before{opacity:1}
.card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--out)}
.card:hover .ph img{transform:scale(1.08)}
.card .ph.notype{display:grid;place-items:center;
  background:var(--ink-3) repeating-linear-gradient(-45deg,rgba(var(--ember-rgb),.08) 0 18px,transparent 18px 36px)}
.card .ph.notype b{font-family:"Archivo",sans-serif;font-weight:800;font-size:2.5rem;letter-spacing:-.05em;
  color:rgba(var(--ember-rgb),.4);transition:color .4s var(--ease),transform .5s var(--out)}
.card:hover .ph.notype b{color:var(--ember);transform:scale(1.07)}
.card .tag{position:absolute;top:.75rem;left:.75rem;z-index:2;font-family:"Inter",sans-serif;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;padding:.34rem .62rem;border-radius:6px;
  background:rgba(15,18,22,.72);backdrop-filter:blur(8px);color:#fff;
  transition:background-color .36s var(--ease),transform .36s var(--out)}
.card:hover .tag{background:var(--ember);color:#fff;transform:translateY(-2px)}
.card .bx{padding:1.25rem 1.3rem 1.35rem;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.5rem;transition:color .28s var(--ease)}
.card:hover h3{color:var(--ember-deep)}
.card p{font-size:.96rem;color:var(--grey);line-height:1.48;flex:1}
.card .go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-weight:600;font-size:.92rem;
  color:var(--ember-deep)}
.card .go svg{transition:transform .4s var(--out)}
.card:hover .go svg{transform:translateX(5px)}
.screen--ink .card,.screen--ink2 .card{background:var(--ink-3);border-color:var(--line-d)}
.screen--ink .card p,.screen--ink2 .card p{color:var(--grey-2)}
.screen--ink .card:hover h3,.screen--ink2 .card:hover h3{color:var(--ember)}
.screen--ink .card .go,.screen--ink2 .card .go{color:var(--ember)}

/* rows */
.rows{display:grid;gap:.85rem}
.row{position:relative;display:grid;grid-template-columns:74px 1fr 260px;align-items:center;
  gap:clamp(1rem,2.6vw,2.2rem);padding:1.3rem 1.6rem;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);overflow:hidden;text-align:left;
  transition:transform .46s var(--out),box-shadow .46s var(--out)}
.row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ember);
  transform:scaleY(0);transform-origin:top;transition:transform .42s var(--out)}
.row:hover{transform:translateX(7px);box-shadow:var(--sh-lg)}
.row:hover::after{transform:scaleY(1)}
.row .n{font-family:"Archivo",sans-serif;font-weight:800;font-size:2.3rem;line-height:1;color:var(--bone-2);
  letter-spacing:-.055em;transition:color .38s var(--ease)}
.row:hover .n{color:var(--ember)}
.row .meta h3{margin-bottom:.35rem;transition:color .28s var(--ease)}
.row:hover .meta h3{color:var(--ember-deep)}
.row .meta p{color:var(--grey);font-size:1rem;line-height:1.5;max-width:64ch}
.row .thumb{width:260px;height:146px;border-radius:12px;overflow:hidden;background:var(--ink-3);justify-self:end;
  display:grid;place-items:center}
.row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--out)}
.row:hover .thumb img{transform:scale(1.09)}
.row .thumb.notype{background:var(--ink-3) repeating-linear-gradient(-45deg,rgba(var(--ember-rgb),.09) 0 16px,transparent 16px 32px)}
.row .thumb.notype b{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.7rem;color:rgba(var(--ember-rgb),.5);letter-spacing:-.04em}
@media (max-width:1000px){.row{grid-template-columns:58px 1fr}.row .thumb{display:none}}
@media (max-width:520px){.row{padding:1.15rem;grid-template-columns:1fr}.row .n{font-size:1.9rem}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.85rem,1.5vw,1.5rem)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:1.55rem 1.4rem;border-radius:var(--r);background:rgba(255,255,255,.045);
  border:1px solid var(--line-d);
  transition:transform .46s var(--out),background-color .36s var(--ease),border-color .36s var(--ease)}
.step:hover{transform:translateY(-6px);background:rgba(var(--ember-rgb),.13);border-color:var(--ember)}
.step .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ember);
  color:#fff;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.14rem;margin-bottom:1rem;
  box-shadow:0 8px 20px -8px var(--ember-glow);transition:transform .46s var(--out)}
.step:hover .n{transform:scale(1.09) rotate(-5deg)}
.step h4{margin-bottom:.45rem}
.step p{font-size:.96rem;color:var(--grey-2);line-height:1.48}
.screen--bone2 .step{background:#fff;border-color:var(--line)}
.screen--bone2 .step p{color:var(--grey)}
.screen--bone2 .step:hover{background:#fff;border-color:var(--ember);box-shadow:var(--sh-lg)}
.screen--ember .step{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.screen--ember .step p{color:rgba(255,255,255,.9)}
.screen--ember .step .n{background:#fff;color:var(--ember-deep)}
.screen--ember .step:hover{background:rgba(255,255,255,.24);border-color:#fff}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.6vw,4rem);align-items:center}
.split.flip .fig{order:2}
@media (max-width:940px){.split{grid-template-columns:1fr;gap:2rem}.split.flip .fig{order:0}}
.fig{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
  transition:transform .55s var(--out)}
.fig:hover{transform:scale(1.012)}
.fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .85s var(--out)}
.fig:hover img{transform:scale(1.05)}
.fig .badge{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;background:rgba(15,18,22,.76);
  backdrop-filter:blur(10px);color:#fff;padding:.6rem 1rem;border-radius:11px;border:1px solid rgba(255,255,255,.15);
  font-family:"Inter",sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}

.ticks{display:grid;gap:.7rem;margin-top:1.6rem}
.ticks li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.02rem;line-height:1.5;
  transition:transform .32s var(--out)}
.ticks li:hover{transform:translateX(5px)}
.ticks .ic{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ember);color:#fff;
  display:grid;place-items:center;margin-top:.16rem;transition:transform .38s var(--out)}
.ticks li:hover .ic{transform:scale(1.13) rotate(-6deg)}
.pull{border-left:4px solid var(--ember);padding:1rem 0 1rem 1.4rem;margin-top:1.9rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.3;letter-spacing:-.03em}

/* ---------- records ---------- */
.recs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.3vw,1.15rem)}
.recs.r2{grid-template-columns:repeat(2,1fr)}
.recs.r4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.recs.r4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.recs,.recs.r2{grid-template-columns:1fr}}
@media (max-width:560px){.recs.r4{grid-template-columns:1fr}}
.rec{padding:1.6rem 1.5rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  transition:transform .44s var(--out),box-shadow .44s var(--out),border-color .36s var(--ease)}
.rec:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--ember)}
.rec .ic{width:44px;height:44px;border-radius:12px;background:rgba(var(--ember-rgb),.14);color:var(--ember-deep);
  display:grid;place-items:center;margin-bottom:1rem;transition:all .44s var(--out)}
.rec:hover .ic{background:var(--ember);color:#fff;transform:scale(1.08) rotate(-5deg)}
.rec dt{font-family:"Inter",sans-serif;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:.55rem}
.rec dd{margin:0;font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.1rem,1.4vw,1.32rem);
  letter-spacing:-.032em;line-height:1.16}
.rec .sub{display:block;font-family:"Inter",sans-serif;font-weight:400;font-size:.95rem;letter-spacing:-.008em;
  color:var(--grey);margin-top:.55rem;line-height:1.5}

/* ---------- areas ---------- */
.areagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:.65rem}
.area{position:relative;padding:1.25rem 1.35rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  overflow:hidden;transition:transform .42s var(--out),box-shadow .42s var(--out)}
.area::before{content:"";position:absolute;inset:0;background:var(--ember);transform:translateY(101%);
  transition:transform .46s var(--out);z-index:0}
.area:hover::before{transform:none}
.area:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.area > *{position:relative;z-index:1}
.area b{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-.034em;line-height:1.18}
.area span{display:block;font-family:"Inter",sans-serif;font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);margin-top:.4rem;transition:color .32s var(--ease)}
.area:hover b,.area:hover span{color:#fff}

/* ---------- gallery + lightbox ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{font-family:"Inter",sans-serif;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.64rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;transition:all .3s var(--ease)}
.filters button:hover{border-color:var(--ink);transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff;font-weight:500;
  box-shadow:0 8px 18px -8px var(--ember-glow)}
.grid{columns:3;column-gap:clamp(.65rem,1.1vw,1.05rem)}
@media (max-width:900px){.grid{columns:2}}
@media (max-width:540px){.grid{columns:1}}
.shot{position:relative;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--ink-3);
  aspect-ratio:4/3;isolation:isolate;border:0;padding:0;width:100%;display:block;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:clamp(.65rem,1.1vw,1.05rem);
  transition:transform .46s var(--out),box-shadow .46s var(--out)}
.shot.tall{aspect-ratio:4/5.2}
@media (max-width:540px){.shot.tall{aspect-ratio:4/3}}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--out)}
.shot:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.shot:hover img{transform:scale(1.08)}
.shot .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.1rem;text-align:left;background:linear-gradient(180deg,transparent 44%,rgba(15,18,22,.9));
  opacity:0;transition:opacity .4s var(--ease)}
.shot:hover .ov,.shot:focus-visible .ov{opacity:1}
.shot .ov b{display:block;color:#fff;font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:-.028em;line-height:1.22;transform:translateY(8px);transition:transform .42s var(--out) .04s}
.shot .ov span{display:block;font-family:"Inter",sans-serif;font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin-top:.35rem;transform:translateY(8px);
  transition:transform .42s var(--out) .09s}
.shot:hover .ov b,.shot:hover .ov span,.shot:focus-visible .ov b,.shot:focus-visible .ov span{transform:none}
.shot .zoom{position:absolute;top:.85rem;right:.85rem;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.82);
  transition:opacity .36s var(--ease),transform .42s var(--out),background-color .28s var(--ease)}
.shot:hover .zoom{opacity:1;transform:none}
.shot.hide{display:none}
.note{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.7rem;padding:.78rem 1.1rem;border-radius:11px;
  background:rgba(var(--ember-rgb),.13);border:1px solid rgba(var(--ember-rgb),.34);
  font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.07em;line-height:1.7;color:var(--ember-deep)}
.screen--ink .note,.screen--ink2 .note{color:var(--ember)}

.lbox{position:fixed;inset:0;z-index:800;background:rgba(6,8,10,.95);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s}
.lbox.on{opacity:1;visibility:visible}
.lbox figure{margin:0;max-width:min(1140px,92vw);display:flex;flex-direction:column;gap:1rem;
  transform:scale(.95);transition:transform .44s var(--out)}
.lbox.on figure{transform:none}
.lbox img{max-height:72svh;width:auto;max-width:100%;object-fit:contain;border-radius:12px;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.9)}
.lbox figcaption{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;color:#fff}
.lbox figcaption b{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.08rem;letter-spacing:-.028em}
.lbox figcaption span{font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ember)}
.lbox .nav,.lbox .x{position:absolute;border-radius:50%;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;transition:all .3s var(--ease)}
.lbox .nav{top:50%;translate:0 -50%;width:54px;height:54px}
.lbox .nav:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:translateY(-50%) scale(1.08)}
.lbox .prev{left:clamp(.7rem,2.4vw,2.2rem)}
.lbox .next{right:clamp(.7rem,2.4vw,2.2rem)}
.lbox .x{top:clamp(.9rem,2.4vw,1.8rem);right:clamp(.9rem,2.4vw,1.8rem);width:48px;height:48px}
.lbox .x:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:rotate(90deg)}
.lbox .count{position:absolute;left:50%;bottom:clamp(1rem,3vw,2rem);translate:-50% 0;
  font-family:"Inter",sans-serif;font-size:.74rem;letter-spacing:.18em;color:rgba(255,255,255,.6)}
@media (max-width:700px){.lbox .nav{width:42px;height:42px}}

/* ---------- accordion ---------- */
.acc{display:grid;gap:.65rem}
.qa{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  transition:border-color .36s var(--ease),box-shadow .36s var(--ease)}
.qa:hover{border-color:rgba(var(--ember-rgb),.55);box-shadow:var(--sh)}
.qa.open{border-color:var(--ember);box-shadow:var(--sh)}
.qa .q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;text-align:left;
  padding:1.15rem 1.45rem;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(1rem,1.2vw,1.14rem);letter-spacing:-.028em;line-height:1.3;transition:color .28s var(--ease)}
.qa:hover .q,.qa.open .q{color:var(--ember-deep)}
.qa .pm{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);display:grid;
  place-items:center;position:relative;transition:all .38s var(--out)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform .4s var(--out),opacity .28s var(--ease)}
.qa .pm::before{width:13px;height:2.2px}
.qa .pm::after{width:2.2px;height:13px}
.qa.open .pm{background:var(--ember);border-color:var(--ember);color:#fff;transform:rotate(180deg)}
.qa.open .pm::after{transform:scaleY(0);opacity:0}
.qa .a{max-height:0;overflow:hidden;transition:max-height .46s var(--out)}
.qa.open .a{max-height:580px}
.qa .a-in{padding:0 1.45rem 1.35rem;color:var(--grey);font-size:1rem;line-height:1.6;max-width:80ch}
.screen--ink .qa,.screen--ink2 .qa{background:var(--ink-3);border-color:var(--line-d)}
.screen--ink .qa .a-in,.screen--ink2 .qa .a-in{color:var(--grey-2)}
.screen--ink .qa:hover .q,.screen--ink .qa.open .q,.screen--ink2 .qa:hover .q,.screen--ink2 .qa.open .q{color:var(--ember)}
.screen--ink .qa.open,.screen--ink2 .qa.open{border-color:var(--ember)}

/* ---------- cta cards ---------- */
.ctacards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,1.3vw,1.2rem);max-width:940px}
@media (max-width:760px){.ctacards{grid-template-columns:1fr}}
.ctacard{position:relative;padding:2rem 1.8rem 1.85rem;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid var(--line-d);display:flex;flex-direction:column;
  transition:transform .46s var(--out),background-color .4s var(--ease),border-color .4s var(--ease)}
.ctacard:hover{transform:translateY(-7px);background:rgba(255,255,255,.11);border-color:var(--ember)}
.ctacard .tag{font-family:"Inter",sans-serif;font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ember);margin-bottom:.85rem}
.ctacard h3{margin-bottom:.6rem}
.ctacard p{flex:1;color:var(--grey-2);font-size:1rem;line-height:1.52;margin-bottom:1.5rem}
.screen--ember .ctacard{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.screen--ember .ctacard:hover{background:rgba(255,255,255,.2);border-color:#fff}
.screen--ember .ctacard .tag{color:#fff}
.screen--ember .ctacard p{color:rgba(255,255,255,.9)}

.bigcall{display:inline-flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;font-family:"Archivo",sans-serif;
  font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.05em;line-height:1;
  transition:color .32s var(--ease),transform .42s var(--out)}
.bigcall:hover{color:var(--ember);transform:translateX(6px)}
.bigcall svg{width:clamp(24px,3vw,40px);height:auto}

.warn{display:flex;align-items:flex-start;gap:.8rem;margin-top:2rem;padding:1rem 1.25rem;border-radius:12px;
  background:rgba(var(--ember-rgb),.14);border:1px solid rgba(var(--ember-rgb),.4);font-size:.98rem;line-height:1.55;max-width:70ch}
.warn .ic{flex:none;color:var(--ember-deep);margin-top:.15rem}
.warn b{color:var(--ember-deep)}
.screen--ink .warn b,.screen--ink2 .warn b,.hero .warn b{color:var(--ember-hot)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--grey-2);padding-block:clamp(3rem,5vw,4.5rem) 1.8rem;
  border-top:1px solid var(--line-d);font-size:.98rem;position:relative;z-index:1}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:2.6rem;border-bottom:1px solid var(--line-d)}
@media (max-width:960px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footgrid{grid-template-columns:1fr;gap:2rem}}
.foot h4{font-family:"Inter",sans-serif;font-weight:500;font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);margin-bottom:1rem}
.foot li{margin-bottom:.55rem}
.foot li a,.foot .lk{display:inline-flex;align-items:center;gap:.4rem;color:var(--bone);text-align:left;
  transition:color .26s var(--ease),transform .3s var(--out)}
.foot li a:hover,.foot .lk:hover{color:var(--ember);transform:translateX(4px)}
.foot .brandcol .mark{margin-bottom:1.1rem}
.foot .brandcol p{color:var(--grey-2);line-height:1.6;max-width:36ch;margin-bottom:1.2rem}
.footphone{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.04em;
  color:#fff;transition:color .28s var(--ease)}
.footphone:hover{color:var(--ember)}
.footphone.small{font-size:1.06rem;margin-top:.35rem;color:var(--grey-2)}
.colophon{padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;
  font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.09em;color:var(--grey);line-height:1.8}

/* sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:580;display:none;gap:1px;background:var(--line-d);
  box-shadow:0 -8px 26px -8px rgba(0,0,0,.5)}
.callbar a,.callbar button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem .7rem;font-weight:600;font-size:.98rem;min-height:60px}
.callbar .c1{background:var(--ember);color:#fff}
.callbar .c2{background:var(--ink);color:#fff}
@media (max-width:760px){.callbar{display:flex}body{padding-bottom:60px}}

/* ---------- views (single-file router) ---------- */
.view{display:none}
.view.on{display:block;animation:viewin .5s var(--out)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}

/* reveal */
/* Reveal only runs when JS is confirmed alive. No JS, no hidden text. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--out),transform .75s var(--out)}
  html.js [data-rv].in{opacity:1;transform:none}
}
.mono{font-family:"Inter",sans-serif}
.center{text-align:center}
.hp{position:absolute;left:-9999px}

@media (max-width:700px){
  .actions .btn{width:100%}
  .keypad{width:100%}
}


/* mobile polish */
@media (max-width:700px){
  .eyebrow{font-size:.66rem;letter-spacing:.16em}
  .eyebrow::before{width:18px}
  .hero{min-height:calc(100svh - var(--top) - 60px)}
  .dispatch{margin-top:.5rem}
}
@media (max-width:430px){
  .mark .txt b{font-size:.98rem}
  .burger{width:44px;height:44px}
}

/* ==========================================================================
   CONTRAST CORRECTIONS — every rule below traces to a measured WCAG failure.
   Ember #C8341C is too dark to sit as text on near-black, and inherited light
   text was landing on white cards inside dark sections.
   ========================================================================== */
:root{ --ember-lit:#3B9BA1; --grey:#5C6068; }

/* 1. THE INVISIBLE-TEXT BUG: white cards inside dark sections inherited bone text. */
.screen--ink .rec,.screen--ink2 .rec,.screen--ember .rec,
.screen--ink .card,.screen--ink2 .card,
.screen--ink .area,.screen--ink2 .area,
.screen--ink .row,.screen--ink2 .row,
.screen--ink .filters button,.screen--ink2 .filters button{color:var(--ink)}
.screen--ink .rec dd,.screen--ink2 .rec dd,.screen--ember .rec dd{color:var(--ink)}
.screen--ink .rec dt,.screen--ink2 .rec dt,.screen--ember .rec dt,
.screen--ink .rec .sub,.screen--ink2 .rec .sub,.screen--ember .rec .sub{color:var(--grey)}
/* dark sections keep dark cards where that is the intent */
.screen--ink .card,.screen--ink2 .card{color:var(--bone)}
.screen--ink .card h3,.screen--ink2 .card h3{color:var(--bone)}

/* 2. ember-as-TEXT on dark backgrounds -> the lit variant (ember as a BACKGROUND stays as is) */
.util b,.util a:hover,
.navrow .mark .txt small,.navrow .navlink[aria-current="page"],.topcall small,
.dropitem .n,.drawer .dlink:hover,.drawer .dlink[aria-current="page"],
.foot h4,.foot li a:hover,.foot .lk:hover,.footphone:hover,
.hero .eyebrow,.phero .eyebrow,.screen--ink .eyebrow,.screen--ink2 .eyebrow,
.hero .accent,.phero .accent,.screen--ink .accent,.screen--ink2 .accent,
.screen--ink .card .go,.screen--ink2 .card .go,
.screen--ink .card:hover h3,.screen--ink2 .card:hover h3,
.screen--ink .qa:hover .q,.screen--ink .qa.open .q,
.screen--ink2 .qa:hover .q,.screen--ink2 .qa.open .q,
.ctacard .tag,.crumb a:hover,.shot .ov span,.lbox figcaption span,
.bigcall:hover,.screen--ink .note,.screen--ink2 .note,
.mortar[data-state="bad"] .verdict b{color:var(--ember-lit)}
.foot h4{color:var(--ember-lit)}
.colophon{color:var(--grey-2)}
.colophon a:hover{color:var(--ember-lit)}

/* 3. ghost numerals were 1.24:1 against white. Still ghostly, now legible. */
.row .n{color:#948E85}
.row:hover .n{color:var(--ember)}

/* 4. the ember CTA screen: white text was landing on a lightened ember blend */
.screen--ember .ctacard{background:rgba(15,18,22,.22);border-color:rgba(255,255,255,.34)}
.screen--ember .ctacard:hover{background:rgba(15,18,22,.34);border-color:#fff}
.screen--ember .ctacard .tag{color:#fff}
.screen--ember .ctacard p{color:#fff}
.screen--ember .btn-ghost{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.screen--ember .btn-ghost:hover{background:#000;border-color:#000;color:#fff}
.screen--ember .step{background:rgba(15,18,22,.2);border-color:rgba(255,255,255,.32)}
.screen--ember .step p{color:#fff}

/* 5. selection must not be the only thing that reveals text */
::selection{background:var(--ember);color:#fff}
::-moz-selection{background:var(--ember);color:#fff}
/* 6. two stragglers: the footer logo lockup and the form card subtitle */
.mark .txt small{color:var(--ember-lit)}
.dispatch .dh span{color:var(--ember-lit)}

/* No-JS fallback: the router never runs, so show the home view rather than a blank page. */
html:not(.js) .view#v-home{display:block}
html:not(.js) [data-rv]{opacity:1!important;transform:none!important}

/* ==========================================================================
   SERVICE AREA — a clean index with hairline rules. Replaces the card grid.
   ========================================================================== */
.areastate{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:108%;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  padding-bottom:.7rem;border-bottom:2px solid var(--ink);margin-bottom:.2rem}
.screen--ink .areastate,.screen--ink2 .areastate{color:var(--grey-2);border-bottom-color:var(--bone)}
.arealist{columns:3;column-gap:clamp(1.6rem,4vw,4rem)}
@media (max-width:900px){.arealist{columns:2}}
@media (max-width:520px){.arealist{columns:1}}
.arealist li{break-inside:avoid;border-bottom:1px solid var(--line)}
.screen--ink .arealist li,.screen--ink2 .arealist li{border-bottom-color:var(--line-d)}
.arealist a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.86rem .2rem;transition:color .26s var(--ease),padding-left .3s var(--out)}
.arealist a:hover{color:var(--ember-deep);padding-left:.55rem}
.screen--ink .arealist a:hover,.screen--ink2 .arealist a:hover{color:var(--ember-lit)}
.arealist .c{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:104%;
  font-size:1.06rem;letter-spacing:-.028em;line-height:1.2}
.arealist .q{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
  flex:none;transition:color .26s var(--ease)}
.screen--ink .arealist .q,.screen--ink2 .arealist .q{color:var(--grey-2)}
.arealist a:hover .q{color:inherit}

/* ==========================================================================
   REASONS — the numbered "why us" block from the reference order
   ========================================================================== */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.7rem)}
@media (max-width:980px){.reasons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reasons{grid-template-columns:1fr}}
.reason{position:relative;padding-top:1.1rem;border-top:2px solid var(--ember);
  transition:transform .42s var(--out)}
.reason:hover{transform:translateY(-4px)}
.reason .n{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;
  font-size:2.1rem;line-height:1;letter-spacing:-.05em;color:var(--ember);margin-bottom:.7rem}
.reason h4{margin-bottom:.5rem}
.reason p{font-size:.99rem;line-height:1.5;color:var(--grey)}
.screen--ink .reason p,.screen--ink2 .reason p{color:var(--grey-2)}
.screen--ink .reason .n,.screen--ink2 .reason .n{color:var(--ember-lit)}
.screen--ink .reason,.screen--ink2 .reason{border-top-color:var(--ember-lit)}

/* ==========================================================================
   SERVICE PAGE: picture on the left, the list of inclusions on the right
   ========================================================================== */
.covers{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(1.8rem,3.6vw,3.6rem);align-items:start}
@media (max-width:940px){.covers{grid-template-columns:1fr;gap:2rem}}
.covers .fig{position:sticky;top:calc(var(--top) + 1.4rem)}
@media (max-width:940px){.covers .fig{position:static}}
.covers .fig img{aspect-ratio:4/4.6}
@media (max-width:940px){.covers .fig img{aspect-ratio:16/10}}
.inclist{display:grid;gap:0}
.inclist li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding:1.02rem 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--out)}
.inclist li:first-child{border-top:1px solid var(--line)}
.inclist li:hover{padding-left:.5rem}
.screen--ink .inclist li,.screen--ink2 .inclist li{border-color:var(--line-d)}
.inclist .ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--ember);color:#fff;
  display:grid;place-items:center;margin-top:.18rem;transition:transform .38s var(--out)}
.inclist li:hover .ic{transform:scale(1.12) rotate(-6deg)}
.inclist b{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:106%;
  font-size:1.09rem;letter-spacing:-.028em;line-height:1.24;margin-bottom:.22rem;
  transition:color .26s var(--ease)}
.inclist li:hover b{color:var(--ember-deep)}
.screen--ink .inclist li:hover b,.screen--ink2 .inclist li:hover b{color:var(--ember-lit)}
.inclist span{display:block;font-size:.98rem;line-height:1.5;color:var(--grey)}
.screen--ink .inclist span,.screen--ink2 .inclist span{color:var(--grey-2)}

/* trust line under the hero buttons */
.trustline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:1.5rem;
  font-size:.88rem;color:rgba(255,255,255,.72)}
.trustline b{color:#fff;font-weight:600}
.trustline .dot{opacity:.4}

/* stat strip reveal */
.strip .s{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--out),transform .7s var(--out),background-color .38s var(--ease)}
html:not(.js) .strip .s{opacity:1;transform:none}
.strip.in .s{opacity:1;transform:none}
.strip.in .s:nth-child(1){transition-delay:.05s}
.strip.in .s:nth-child(2){transition-delay:.16s}
.strip.in .s:nth-child(3){transition-delay:.27s}
.strip.in .s:nth-child(4){transition-delay:.38s}

/* hero: staggered fade, a touch slower and further than the generic reveal */
html.js .hero [data-rv]{transform:translateY(30px)}

/* simplified services dropdown: names, numbers, nothing else */
.droplist{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .6rem}
@media (max-width:760px){.droplist{grid-template-columns:1fr}}
.droplist a{display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;border-radius:10px;
  transition:background-color .22s var(--ease),padding-left .28s var(--out)}
.droplist a:hover{background:rgba(var(--ember-rgb),.16);padding-left:1.1rem}
.droplist .n{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;
  color:var(--ember-lit);flex:none;width:1.5rem}
.droplist .t{font-size:.98rem;font-weight:500;color:#fff;line-height:1.25}
.droplist .ar{margin-left:auto;color:var(--ember-lit);opacity:0;transform:translateX(-5px);
  transition:opacity .24s var(--ease),transform .28s var(--out)}
.droplist a:hover .ar{opacity:1;transform:none}

/* ==========================================================================
   TRANSPARENT HEADER OVER THE HERO — solid again the moment you scroll
   ========================================================================== */
body{padding-top:0}
.hero,.phero{margin-top:0;padding-top:calc(var(--top) + clamp(1.2rem,3vh,2.4rem))}
.hero{min-height:100svh}
.topbar:not(.stuck) .util{background:transparent}
.topbar:not(.stuck) .navrow{background:transparent;border-bottom-color:transparent}
.topbar:not(.stuck) .burger{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* a soft top scrim so nav text always has something to sit on */
.topbar::after{content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--top) + 34px);z-index:-1;
  pointer-events:none;opacity:1;transition:opacity .4s var(--ease);
  background:linear-gradient(180deg,rgba(8,10,13,.82) 0%,rgba(8,10,13,.5) 55%,transparent 100%)}
.topbar.stuck::after{opacity:0}
.topbar.stuck .util{background:#0A0C0F}
.topbar.stuck .navrow{background:var(--ink);border-bottom-color:var(--line-d)}
/* views that do not open with a media hero still need a solid bar */
body.solid-top .topbar .navrow{background:var(--ink);border-bottom-color:var(--line-d)}
body.solid-top .topbar .util{background:#0A0C0F}
body.solid-top .topbar::after{opacity:0}
body.solid-top .view > .screen:first-child{padding-top:calc(var(--top) + clamp(1.5rem,4vh,3rem))}

/* ==========================================================================
   LIQUID GLASS — the hero form and the social handles
   ========================================================================== */
.glass{
  background:rgba(18,21,26,.24);
  backdrop-filter:blur(26px) saturate(175%);-webkit-backdrop-filter:blur(26px) saturate(175%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 0 rgba(255,255,255,.16) inset, 0 -1px 0 0 rgba(0,0,0,.28) inset,
             0 24px 60px -18px rgba(0,0,0,.66);
}
.hero .dispatch{background:rgba(18,21,26,.24);
  backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.17);color:var(--bone);
  box-shadow:0 1px 0 0 rgba(255,255,255,.17) inset,0 -1px 0 0 rgba(0,0,0,.3) inset,
             0 26px 64px -18px rgba(0,0,0,.7)}
.hero .dispatch .dh{background:rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.12)}
.hero .dispatch .dh::before{opacity:.55}
.hero .dispatch .db{background:transparent}
.hero .dispatch .f label{color:rgba(255,255,255,.74)}
.hero .dispatch .f .rq{color:var(--ember-lit)}
.hero .dispatch .f input,.hero .dispatch .f select,.hero .dispatch .f textarea{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .dispatch .f input::placeholder,.hero .dispatch .f textarea::placeholder{color:rgba(255,255,255,.62)}
.hero .dispatch .f input:hover,.hero .dispatch .f select:hover,.hero .dispatch .f textarea:hover{border-color:rgba(255,255,255,.44)}
.hero .dispatch .f input:focus,.hero .dispatch .f select:focus,.hero .dispatch .f textarea:focus{
  border-color:var(--ember-lit);background:rgba(255,255,255,.16);box-shadow:0 0 0 4px rgba(59,155,161,.24)}
.hero .dispatch .f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' stroke='%23e8e8e8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center}
.hero .dispatch .f select option{background:#161A20;color:#fff}
.hero .dispatch .pills button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.hero .dispatch .pills button:hover{border-color:#fff}
.hero .dispatch .pills button[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.hero .dispatch .dnote{color:rgba(255,255,255,.72)}
.hero .dispatch .dnote a{color:var(--ember-lit)}
.hero .dispatch .dsent h3{color:#fff}
.hero .dispatch .dsent p{color:rgba(255,255,255,.78)}

/* social handles, glassy pills */
.handles{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.handle{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.13);backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 0 0 rgba(255,255,255,.2) inset,0 10px 26px -12px rgba(0,0,0,.6);
  color:#fff;font-size:.92rem;font-weight:500;letter-spacing:-.01em;
  transition:transform .38s var(--out),background-color .3s var(--ease),border-color .3s var(--ease)}
.handle:hover{transform:translateY(-3px);background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.4)}
.handle svg{flex:none}
.handle .stars{display:inline-flex;gap:1px;color:rgba(255,255,255,.42)}
.handle .rate{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.03em}
.handle .ph{font-size:.79rem;color:rgba(255,255,255,.62);letter-spacing:.02em}
.handle .sep{width:1px;height:16px;background:rgba(255,255,255,.24)}

/* ==========================================================================
   FIND US — hours, address, map
   ========================================================================== */
.findus{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,3.4vw,3.2rem);align-items:stretch}
@media (max-width:940px){.findus{grid-template-columns:1fr}}
.findcol{display:grid;gap:1rem;align-content:start}
.findcard{padding:1.4rem 1.5rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  transition:border-color .34s var(--ease),box-shadow .34s var(--ease)}
.findcard:hover{border-color:var(--ember);box-shadow:var(--sh)}
.screen--ink .findcard,.screen--ink2 .findcard{background:var(--ink-3);border-color:var(--line-d)}
.findcard h4{margin-bottom:.7rem;display:flex;align-items:center;gap:.55rem}
.findcard h4 svg{color:var(--ember-deep);flex:none}
.screen--ink .findcard h4 svg,.screen--ink2 .findcard h4 svg{color:var(--ember-lit)}
.findcard .big{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:108%;
  font-size:clamp(1.3rem,1.8vw,1.65rem);letter-spacing:-.038em;transition:color .26s var(--ease)}
a.findcard:hover .big{color:var(--ember-deep)}
.screen--ink a.findcard:hover .big,.screen--ink2 a.findcard:hover .big{color:var(--ember-lit)}
.hours{display:grid;gap:.02rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:.97rem}
.screen--ink .hours li,.screen--ink2 .hours li{border-bottom-color:var(--line-d)}
.hours li:last-child{border-bottom:0}
.hours .d{font-weight:600}
.hours .t{color:var(--grey)}
.screen--ink .hours .t,.screen--ink2 .hours .t{color:var(--grey-2)}
.hours li.today{color:var(--ember-deep)}
.screen--ink .hours li.today,.screen--ink2 .hours li.today{color:var(--ember-lit)}
.mapwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;
  border:1px solid var(--line);background:var(--ink-3);box-shadow:var(--sh)}
.screen--ink .mapwrap,.screen--ink2 .mapwrap{border-color:var(--line-d)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.04)}
.maptag{position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem .95rem;border-radius:999px;background:rgba(15,18,22,.8);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.82rem}

/* ==========================================================================
   REVIEWS — Google mark, placeholder stars, placeholder cards
   ========================================================================== */
.revhead{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-bottom:2rem;
  padding:1.15rem 1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.screen--ink .revhead,.screen--ink2 .revhead{background:var(--ink-3);border-color:var(--line-d)}
.revhead .g{display:flex;align-items:center;gap:.65rem;font-weight:600}
.revhead .stars{display:inline-flex;gap:2px;color:var(--grey-2)}
.revhead .revnote{font-size:.86rem;color:var(--grey)}
.screen--ink .revhead .note,.screen--ink2 .revhead .revnote{color:var(--grey-2)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.3vw,1.15rem)}
@media (max-width:960px){.revs{grid-template-columns:1fr}}
.rev{padding:1.5rem 1.5rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .42s var(--out),box-shadow .42s var(--out)}
.rev:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.screen--ink .rev,.screen--ink2 .rev{background:var(--ink-3);border-color:var(--line-d);color:var(--bone)}
.rev .stars{display:inline-flex;gap:2px;color:var(--grey-2);margin-bottom:.9rem}
.rev p{flex:1;font-size:1rem;line-height:1.55;color:var(--grey);font-style:italic}
.screen--ink .rev p,.screen--ink2 .rev p{color:var(--grey-2)}
.rev .who{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;
  padding-top:1.1rem;border-top:1px solid var(--line)}
.screen--ink .rev .who,.screen--ink2 .rev .who{border-top-color:var(--line-d)}
.rev .av{width:34px;height:34px;border-radius:50%;background:var(--bone-2);color:var(--grey);
  display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none}
.screen--ink .rev .av,.screen--ink2 .rev .av{background:var(--ink-4);color:var(--grey-2)}
.rev .who b{display:block;font-size:.94rem;font-weight:600}
.rev .who span{display:block;font-size:.8rem;color:var(--grey)}
.screen--ink .rev .who span,.screen--ink2 .rev .who span{color:var(--grey-2)}

/* CTA trust checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem;margin-top:1.8rem;max-width:820px}
@media (max-width:700px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem;line-height:1.45}
.checks .ic{flex:none;width:21px;height:21px;border-radius:6px;background:rgba(255,255,255,.9);
  color:var(--ember-deep);display:grid;place-items:center;margin-top:.14rem}

/* hero: a longer, softer entrance than the rest of the page */
@media (prefers-reduced-motion:no-preference){
  html.js .hero [data-rv]{opacity:0;transform:translateY(58px) scale(.978);filter:blur(10px);
    transition:opacity 1.4s var(--out),transform 1.4s var(--out),filter 1.4s var(--out)}
  html.js .hero [data-rv].in{opacity:1;transform:none;filter:blur(0)}
  html.js .hero .dispatch{transition-duration:1.6s}
}
.revhead .revnote{font-size:.86rem;color:var(--grey);line-height:1.5;max-width:60ch}
.screen--ink .revhead .revnote,.screen--ink2 .revhead .revnote{color:var(--grey-2)}

/* ==========================================================================
   CLICKABLE PLACEHOLDERS — every Google / IG / map element really redirects,
   so the mechanism can be demonstrated on a discovery call.
   ========================================================================== */
.ext{opacity:.55;flex:none;margin-left:.1rem;transition:opacity .26s var(--ease),transform .3s var(--out)}
a:hover > .ext,a:hover .ext{opacity:1;transform:translate(2px,-2px)}

a.handle{cursor:pointer}
a.handle:focus-visible{outline-offset:5px}

.mapopen{position:absolute;inset:0;z-index:1;display:block}
.mapwrap:hover .maptag{background:var(--ember);border-color:var(--ember)}
a.maptag{z-index:3;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .34s var(--out)}
a.maptag:hover{transform:translateY(-3px)}
.mapwrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--ember);opacity:0;transition:opacity .3s var(--ease);border-radius:inherit}
.mapwrap:hover::after{opacity:1}

a.findcard{cursor:pointer}
a.findcard h4 .ext{margin-left:.2rem}

.revhead a.g{display:inline-flex;align-items:center;gap:.6rem;transition:color .26s var(--ease)}
.revhead a.g:hover{color:var(--ember-deep)}
.screen--ink .revhead a.g:hover,.screen--ink2 .revhead a.g:hover{color:var(--ember-lit)}
a.rev{cursor:pointer;text-decoration:none}
a.rev .av{background:#fff;padding:6px}
.screen--ink a.rev .av,.screen--ink2 a.rev .av{background:#fff}
a.rev:hover .who b{color:var(--ember-deep)}
.screen--ink a.rev:hover .who b,.screen--ink2 a.rev:hover .who b{color:var(--ember-lit)}
a.rev .who span{display:flex;align-items:center;gap:.34rem}

.socials{display:flex;gap:.5rem;margin-top:1.1rem}
.socials a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line-d);background:rgba(255,255,255,.05);color:var(--bone);
  transition:transform .34s var(--out),background-color .28s var(--ease),border-color .28s var(--ease)}
.socials a:hover{transform:translateY(-3px);background:rgba(var(--ember-rgb),.22);border-color:var(--ember-lit)}

/* ==========================================================================
   GLASS LEGIBILITY — measured, not guessed. See glasscheck.py.
   Ember cannot survive as small text on a transparent panel (1.04:1), so the
   hero panel uses near-white throughout and keeps ember for solid fills only.
   ========================================================================== */
.hero .dispatch{background:rgba(18,21,26,.30)}
.hero .dispatch .dh{background:rgba(8,10,13,.5)}
.hero .dispatch .dh span{color:rgba(255,255,255,.86)}
.hero .dispatch .f .rq{color:#fff}
.hero .dispatch .dnote{color:rgba(255,255,255,.86)}
.hero .dispatch .dnote a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ember-lit);text-decoration-thickness:2px}
.hero .dispatch .f label{color:rgba(255,255,255,.85)}
/* the glassy pills need the same treatment */
.handle{background:rgba(10,12,15,.42)}
.handle .ph{color:rgba(255,255,255,.86)}
.handle .stars{color:rgba(255,255,255,.66)}
.trustline{color:rgba(255,255,255,.88)}

/* ==========================================================================
   CLOSING SECTION — stays in the cream family instead of flooding red.
   The accent belongs on the button, not on 100vh of background.
   ========================================================================== */
:root{--bone-3:#DEDAD2}
.screen--close{background:var(--bone-3);color:var(--ink);position:relative}
.screen--close::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 52% at 6% 4%,rgba(var(--ember-rgb),.07),transparent 68%),
             radial-gradient(50% 44% at 96% 98%,rgba(var(--ember-rgb),.05),transparent 70%)}
.screen--close .eyebrow{color:var(--ember-deep)}
.screen--close .lede{color:var(--grey)}
.screen--close .ctacard{background:#fff;border-color:var(--line)}
.screen--close .ctacard:hover{background:#fff;border-color:var(--ember);
  transform:translateY(-7px);box-shadow:var(--sh-lg)}
.screen--close .ctacard .tag{color:var(--ember-deep)}
.screen--close .ctacard p{color:var(--grey)}
.screen--close .checks li{color:var(--ink)}
.screen--close .checks .ic{background:var(--ember);color:#fff}
.screen--close .btn-bone{background:var(--ink);color:var(--bone)}
.screen--close .btn-bone:hover{background:#000;color:#fff}
.screen--close .btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.6)}
.screen--close .btn-ghost:hover{border-color:var(--ink);background:#fff}


/* the pull-quote component is retired */
.pull{display:none}

/* previous / next between service pages */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:620px){.prevnext{grid-template-columns:1fr}}
.pn{padding:1.15rem 1.4rem;border-radius:var(--r);border:1px solid var(--line);background:#fff;
  transition:transform .4s var(--out),box-shadow .4s var(--out),border-color .32s var(--ease)}
.pn:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--ember)}
.pn.r{text-align:right}
.pn .d{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:.3rem}
.pn b{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:106%;font-size:1.06rem;letter-spacing:-.03em;
  transition:color .28s var(--ease)}
.pn:hover b{color:var(--ember-deep)}

/* service area index without tiering */
.arealist a{justify-content:flex-start}
.arealist .q{display:none}

/* header keeps more height once it sticks */
.topbar.stuck .navrow{height:88px}
.navrow{height:92px}
:root{--nav-h:92px;--top:128px}
@media (max-width:640px){:root{--nav-h:78px;--top:78px}}

/* hero: bigger number and bigger call to action */
.hero .actions .btn{min-height:70px;font-size:1.14rem;padding:1.2rem 2.3rem}
.hero .actions .btn-ghost{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:106%;
  font-size:clamp(1.16rem,1.5vw,1.5rem);letter-spacing:-.035em}
.hero .actions .btn-ghost svg{width:19px;height:19px}
@media (max-width:520px){.hero .actions .btn{min-height:64px;font-size:1.05rem}}

/* ==========================================================================
   ESTIMATE MODAL — every CTA opens the form where you stand, no navigation
   ========================================================================== */
.emodal{position:fixed;inset:0;z-index:850;display:flex;align-items:center;justify-content:center;
  padding:clamp(.7rem,3vw,2rem);opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease),visibility .34s}
.emodal.on{opacity:1;visibility:visible}
.eveil{position:absolute;inset:0;background:rgba(8,10,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.epanel{position:relative;width:min(560px,100%);max-height:92svh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(20px) scale(.97);transition:transform .44s var(--out)}
.emodal.on .epanel{transform:none}
.epanel .dispatch{box-shadow:0 44px 100px -26px rgba(0,0,0,.72)}
.ex{position:absolute;top:.85rem;right:.85rem;z-index:4;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;
  display:grid;place-items:center;transition:all .3s var(--ease)}
.ex:hover{background:var(--ember);border-color:var(--ember);transform:rotate(90deg)}

/* ==========================================================================
   REVIEWS MARQUEE
   ========================================================================== */
.revmarquee{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.revmarquee.dragging{cursor:grabbing}
.revtrack{display:flex;gap:clamp(.8rem,1.3vw,1.15rem);width:max-content;will-change:transform}
.revtrack .rev{width:clamp(280px,26vw,360px);flex:none}
.revmarquee.dragging .rev{pointer-events:none}

/* ==========================================================================
   DEVICE SWEEP CORRECTIONS — measured across 12 viewports, 320px to 2560px.
   Nothing renders below 11px, nothing clips, every tap target clears 40px.
   ========================================================================== */
.mark .txt small{font-size:.7rem}
.topcall small{font-size:.7rem}
.card .tag{font-size:.72rem}
.strip span{font-size:.72rem}
.rec dt{font-size:.72rem}
.area span{font-size:.72rem}
.shot .ov span{font-size:.72rem}
.lbox figcaption span{font-size:.72rem}
.ctacard .tag{font-size:.72rem}
.foot h4{font-size:.72rem}
.colophon{font-size:.74rem}
.fig .badge{font-size:.72rem}
.dispatch .dh span{font-size:.72rem}
.f label{font-size:.72rem}
.crumb{font-size:.74rem}
.util .shell{font-size:.72rem}
.note{font-size:.75rem}
.dmeta{font-size:.75rem}
.droplist .n{font-size:.75rem}
@media (max-width:700px){.eyebrow{font-size:.78rem;letter-spacing:.13em}}

/* tap targets: footer, crumbs and legal links were 14 to 26px tall */
@media (max-width:900px){
  .foot li a,.foot .lk{min-height:42px;align-items:center}
  .foot li{margin-bottom:.1rem}
  .colophon a{display:inline-flex;align-items:center;min-height:42px}
  .footphone{display:inline-flex;align-items:center;min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:40px}
  .revhead a.g{min-height:44px}
  .arealist a{padding-block:1.02rem}
  .hours li{padding:.72rem 0}
}

/* 320px: the hours row ran out of width */
@media (max-width:380px){
  .hours li{flex-wrap:wrap;gap:.1rem}
  .hours .t{width:100%}
  .findcard,.rec,.step,.card .bx{padding-inline:1.15rem}
  .revtrack .rev{width:min(78vw,300px)}
}
/* inline sentence link, exempt from target size but worth padding out */
.dnote a{display:inline-block;padding:.35rem .15rem}

/* the contact hero carries a form and a phone number, so it does not need
   a full viewport of height the way the home hero does */
#v-contact .hero{min-height:auto;padding-bottom:clamp(3rem,6vh,5rem)}
#v-contact .hero .crumb{margin-bottom:1.4rem}
#v-contact .bigcall{color:#fff}

/* header sits taller now; keep the logo and actions in proportion */
.mark .glyph{width:46px;height:46px}
@media (max-width:640px){.mark .glyph{width:40px;height:40px}}

/* The hero ghost button sat at 2.83:1 over the brighter parts of the photo.
   Lightening a translucent panel over photography never wins; darken instead. */
.hero .btn-ghost{background:rgba(10,12,15,.44);border-color:rgba(255,255,255,.34)}
.hero .btn-ghost:hover{background:rgba(10,12,15,.58);border-color:#fff}
.phero .btn-ghost{background:rgba(10,12,15,.44);border-color:rgba(255,255,255,.34)}
.phero .btn-ghost:hover{background:rgba(10,12,15,.58);border-color:#fff}

/* ambient hero video: the still is the LCP element, the loop arrives over it */
.hero .bgwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);filter:brightness(.58) saturate(1.06) contrast(1.04)}
.hero .bgwrap video.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero .bgwrap video{display:none}}
/* measured against the brightest frame of the ambient loop, not the poster */
.handle{background:rgba(8,10,13,.58)}
.handle:hover{background:rgba(8,10,13,.72);border-color:rgba(255,255,255,.5)}

/* ==========================================================================
   TEXT OVER MOVING FOOTAGE
   The loop's brightest frame is brighter than the still it replaced, which
   pulled three elements under AA. Ember cannot survive as small text over
   photography or video at any usable opacity, so the hero uses near-white.
   ========================================================================== */
.hero .bgwrap video{filter:brightness(.48) saturate(1.06) contrast(1.05)}
.hero .bgwrap img{filter:brightness(.52) saturate(1.06) contrast(1.04)}
.topbar:not(.stuck) .navlink{color:rgba(255,255,255,.9)}
.topbar:not(.stuck) .navlink:hover{color:#fff}
.hero .eyebrow{color:#fff}
.hero .lede{color:rgba(255,255,255,.92)}
.hero .trustline{color:rgba(255,255,255,.94)}

/* On narrow screens the pills keep the mark and the name; the secondary
   placeholder label has nowhere to go and clipped at 320px. */
@media (max-width:430px){
  .handle .ph,.handle .sep{display:none}
  .handle{padding:.55rem .85rem}
}


/* ============================================================
   Client-build additions. No client identity in this file, including here.
   Form consent, media pause control, legal pages, the Arcos build credit,
   live-rating stars, and four fixes that build surfaced.
   See references/client-build.md and references/template.md.
   ============================================================ */

/* consent checkbox: beats the uppercase micro-label styling of .f label */
.f label.ck{display:flex;gap:.65rem;align-items:flex-start;font-family:"Inter",sans-serif;font-size:.8rem;line-height:1.5;color:var(--grey);cursor:pointer;text-transform:none;letter-spacing:0}
.ck input{width:1.5rem;height:1.5rem;margin-top:0;flex:none;accent-color:var(--ember);cursor:pointer}
.ck a{color:var(--ember-deep);font-weight:600;text-decoration:underline}
.hero .dispatch .f label.ck{color:rgba(255,255,255,.84)} .hero .ck a{color:#fff}

/* hero video pause (WCAG 2.2.2). Hidden by the script when there is no video or motion is reduced. */
.vidtoggle{position:absolute;right:1rem;bottom:1rem;z-index:4;min-height:40px;padding:.6rem 1rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.4);background:rgba(15,18,22,.74);color:#fff;font:600 .76rem/1 "Inter",sans-serif;
  letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.vidtoggle:hover{background:rgba(15,18,22,.92);border-color:#fff}
/* author display rules beat the UA [hidden] rule; say it explicitly for anything toggled with .hidden */
.vidtoggle[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.vidtoggle{display:none}}

/* width/height attributes on photos (added for layout stability) must not override the figure crop */
.fig img{height:auto}
/* review card meta: the avatar was taking half the card, clipping names at 320px */
.rev .who .av{flex:0 0 auto} .rev .who b{overflow-wrap:anywhere}
.socials a{flex:none;min-width:40px}

/* stars: outline while the rating is a placeholder, gold once a live rating is wired (stars--live) */
.stars--live{color:#F4B400} .stars--live path{fill:#F4B400;stroke:#F4B400}

/* legal pages: privacy, terms, refunds, cookies, accessibility */
.legal{max-width:76ch;margin:0 auto;color:var(--ink-2);font-size:1.02rem;line-height:1.65}
.legal h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem);letter-spacing:-.02em;margin:2.2rem 0 .7rem}
.legal h3{font-size:1.08rem;margin:1.4rem 0 .4rem}
.legal p,.legal li{margin:.55rem 0} .legal ul,.legal ol{padding-left:1.25rem}
.legal a{color:var(--ember-deep);text-decoration:underline;font-weight:600}
.legal .meta{font-size:.9rem;color:var(--ink-2);border-left:3px solid var(--ember);padding:.7rem 1rem;background:var(--bone-2);border-radius:8px;margin:0 0 1.6rem}
.legal .confirm{background:#FFF1B8;color:#4A3A05;padding:.05em .35em;border-radius:4px;font-weight:600;font-size:.92em}
.legal table{width:100%;border-collapse:collapse;font-size:.95rem;margin:.8rem 0}
.legal th,.legal td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
@media (max-width:640px){.legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block} .legal thead{display:none} .legal td{border:0;padding:.2rem 0} .legal tr{padding:.6rem 0;border-bottom:1px solid var(--line)}}

/* Build credit, footer right, exactly as on fpfcrete.com. The mark is decorative (alt="")
   because the word Arcos sits next to it, otherwise it is announced twice. */
.colophon a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.28)}
.colophon a:hover{color:var(--bone)}
.colophon .byarcos{display:inline-flex;align-items:center;gap:.55rem;opacity:.82;text-decoration:none;transition:opacity .26s var(--ease),color .26s var(--ease)}
.colophon .byarcos:hover{opacity:1;text-decoration:none}
.byarcos img{height:21px;width:auto;display:block;flex:none}
.byarcos b{font-weight:700;letter-spacing:.02em;color:var(--grey-2)}
.byarcos:hover b{color:#fff}




:root{--v5-cf:0.48}
/* ==========================================================================
   v5 OVERLAY, the default demo design since 2026-09-28. Injected after the
   template stylesheet by assets/overlay/apply_overlay.py (demo.py runs it on every
   build). No client identity in this block.
   Sections 1-4 are v4's, unchanged; section 4 (the steps path) is byte-identical
   to the approved v4 stylesheet and work/overlay_steps_gate.py holds it to that.
   ========================================================================== */
:root{--v4-lit-rgb:59,155,161;--v4-gold:#F4B400;--v4-gold-rgb:244,180,0}

/* ---------- 1. utility bar: no beacon, sentence case, readable ---------- */
.beacon{display:none!important}
.util .shell{font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:.8125rem;
  letter-spacing:-.004em;text-transform:none;font-weight:500;color:rgba(255,255,255,.74)}
.util b{font-weight:600;color:var(--ember-lit)}
.util a b{color:#fff}
.util a:hover b{color:var(--ember-lit)}
.util .r{gap:1.55rem}
.util .r > span{position:relative}
.util .r > span + span::before{content:"";position:absolute;left:-.8rem;top:50%;width:1px;height:13px;
  translate:0 -50%;background:rgba(255,255,255,.2)}
@media (max-width:960px){.util .r > span + span::before{display:none}}

/* ---------- 2. the labels that were tiny tracked capitals ---------- */
.eyebrow{font-family:"Archivo","Inter",sans-serif;font-weight:650;font-stretch:100%;text-transform:none;
  font-size:clamp(.98rem,.93rem + .2vw,1.08rem);letter-spacing:-.012em;line-height:1.3;margin-bottom:.75rem}
@media (max-width:700px){.eyebrow{font-size:1rem;letter-spacing:-.01em}}
.mark .txt small,.topcall small{text-transform:none;letter-spacing:-.002em;font-size:.8rem;font-weight:500}
.drawer .dmeta{text-transform:none;letter-spacing:0;font-size:.95rem;line-height:1.75}
.dispatch .dh span{text-transform:none;letter-spacing:-.002em;font-size:.88rem;font-weight:500}
.f label{text-transform:none;letter-spacing:-.004em;font-size:.86rem;font-weight:500}
.crumb{text-transform:none;letter-spacing:0;font-size:.88rem}
.strip span{text-transform:none;letter-spacing:-.004em;font-size:.92rem;font-weight:500}
.card .tag{text-transform:none;letter-spacing:-.004em;font-size:.8rem;font-weight:600;padding:.36rem .72rem;border-radius:999px}
.fig .badge{text-transform:none;letter-spacing:-.004em;font-size:.88rem;font-weight:600;border-radius:999px;padding:.55rem 1rem}
.rec dt{text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:600}
.area span,.arealist .q{text-transform:none;letter-spacing:0;font-size:.88rem}
.filters button{text-transform:none;letter-spacing:-.004em;font-size:.92rem;font-weight:500}
.shot .ov span,.lbox figcaption span{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:600}
.ctacard .tag{text-transform:none;letter-spacing:-.006em;font-size:.95rem;font-weight:600}
.foot h4{text-transform:none;letter-spacing:-.012em;font-family:"Archivo","Inter",sans-serif;font-weight:700;font-size:1rem}
.areastate{text-transform:none;letter-spacing:-.012em;font-size:1.02rem;font-weight:700}
.pn .d{text-transform:none;letter-spacing:0;font-size:.88rem}
.colophon{letter-spacing:0}
.note{letter-spacing:0;font-size:.88rem}
.lbox .count{letter-spacing:.02em}
.legal th{text-transform:none;letter-spacing:0;font-size:.86rem}
.handle .ph{letter-spacing:0}

/* ---------- 3. reveals that leave hover lifts alone ----------
   The template revealed with `transform`, and its `.in{transform:none}` outranked
   every `:hover` lift on a revealed card. Reveal with `translate` instead, and
   say the lifts again at a specificity the reveal cannot beat. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-rv]{transform:none;translate:0 26px;
    transition:opacity .85s var(--out),translate .85s var(--out),transform .5s var(--out),box-shadow .45s var(--out),
      background-color .35s var(--ease),border-color .35s var(--ease),color .3s var(--ease)}
  html.js [data-rv].in{translate:0 0}
  html.js .hero [data-rv]{translate:none}
  /* photos settle as they arrive */
  html.js .shot[data-rv] img,html.js .card[data-rv] .ph img{scale:1.1;transition:transform .85s var(--out),scale 1.8s var(--out)}
  html.js .shot[data-rv].in img,html.js .card[data-rv].in .ph img{scale:1}
}
html.js .card[data-rv]:hover{transform:translateY(-7px)}
html.js .row[data-rv]:hover{transform:translateX(7px)}
html.js .fig[data-rv]:hover{transform:scale(1.012)}
html.js .rec[data-rv]:hover{transform:translateY(-6px)}
html.js .area[data-rv]:hover{transform:translateY(-5px)}
html.js .shot[data-rv]:hover{transform:translateY(-5px)}
html.js .ctacard[data-rv]:hover{transform:translateY(-7px)}
html.js .reason[data-rv]:hover{transform:translateY(-4px)}
html.js .pn[data-rv]:hover{transform:translateY(-4px)}
html.js .findcard[data-rv]:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.findcard{transition:border-color .34s var(--ease),box-shadow .45s var(--out),transform .5s var(--out)}
/* slow parallax on photos (the script adds .v4-motion when motion is allowed) */
html.v4-motion .fig img{scale:1.1}
html.v4-motion .phero .bg{scale:1.08}

/* ---------- 4. how it works: icons on a path that lights up ---------- */
.steps.v4-steps{--node:70px;--gap:clamp(1rem,2vw,1.9rem);position:relative;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);counter-reset:none}
.steps.v4-steps > .step.v4-step{position:relative;z-index:2;display:flex;flex-direction:column;padding:0;margin:0;
  background:none;border:0;border-radius:0;box-shadow:none}
.steps.v4-steps > .step.v4-step:hover{background:none;border:0;box-shadow:none}
html.js .steps.v4-steps > .step.v4-step[data-rv]:hover{transform:none}
.v4-node{position:relative;z-index:2;flex:none;width:var(--node);height:var(--node);border-radius:50%;
  display:grid;place-items:center;margin:0 0 1.25rem;background:#fff;color:var(--ember-deep);
  box-shadow:0 0 0 1px rgba(var(--ember-rgb),.22),0 12px 26px -14px rgba(15,18,22,.38);
  transition:background-color .55s var(--out),color .55s var(--out),box-shadow .7s var(--out)}
.v4-node svg{width:36px;height:36px;position:relative;z-index:1}
.v4-ring{position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(var(--ember-rgb),0);
  transform:scale(.82);transition:border-color .6s var(--out),transform .7s var(--out)}
.v4-step.lit .v4-node{background:var(--ember);color:#fff;
  box-shadow:0 0 0 1px rgba(var(--ember-rgb),.5),0 0 28px 2px rgba(var(--v4-lit-rgb),.5),0 14px 30px -12px rgba(var(--ember-rgb),.8)}
.v4-step.lit .v4-ring{border-color:rgba(var(--ember-rgb),.32);transform:none}
@media (prefers-reduced-motion:no-preference){
  .v4-step.lit .v4-node svg{animation:v4pop .75s var(--out)}
}
@keyframes v4pop{0%{transform:scale(.7) rotate(-8deg)}55%{transform:scale(1.14)}100%{transform:none}}
.v4-body{flex:1;padding:1.35rem 1.3rem 1.45rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  transition:transform .5s var(--out),box-shadow .5s var(--out),border-color .45s var(--ease)}
.v4-step:hover .v4-body{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(var(--ember-rgb),.55)}
.v4-step.lit .v4-body{border-color:rgba(var(--ember-rgb),.3)}
.v4-body h4{margin-bottom:.5rem}
.v4-body p{font-size:.97rem;line-height:1.52;color:var(--grey)}
.screen--ink .v4-body,.screen--ink2 .v4-body{background:rgba(255,255,255,.045);border-color:var(--line-d)}
.screen--ink .v4-body p,.screen--ink2 .v4-body p{color:var(--grey-2)}
.screen--ink .v4-node,.screen--ink2 .v4-node{background:var(--ink-3);color:var(--ember-lit)}
.screen--ink .v4-step.lit .v4-node,.screen--ink2 .v4-step.lit .v4-node{background:var(--ember);color:#fff}

/* the path: an SVG the script draws through the node centres, winding a little
   between them like a garden path. Dotted stepping stones underneath, a lit line
   drawn over them as you scroll, a light travelling at its head. */
.v4-path{position:absolute;inset:0;z-index:1;pointer-events:none}
.v4-svg{position:absolute;left:0;top:0;overflow:visible}
.v4-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.v4-svg .s1{stop-color:var(--ember-deep)}.v4-svg .s2{stop-color:var(--ember)}.v4-svg .s3{stop-color:var(--ember-hot)}
.v4-svg .v4-rail{stroke:rgba(var(--ember-rgb),.4);stroke-width:4;stroke-dasharray:.1 11}
.v4-svg .v4-glow{stroke:rgb(var(--v4-lit-rgb));stroke-width:11;opacity:.5;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p,0))}
.v4-svg .v4-fill{stroke-width:3.5;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p,0))}
.v4-svg .v4-run{stroke:rgba(255,255,255,.95);stroke-width:2.5;stroke-dasharray:0 1.3;opacity:0}
.v4-svg .v4-head{opacity:0;transition:opacity .45s var(--ease)}
.v4-svg .v4-head .h1{fill:rgb(var(--v4-lit-rgb));opacity:.75}
.v4-svg .v4-head .h2{fill:#fff}
.v4-steps.moving .v4-head{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .v4-steps.done .v4-run{animation:v4run 6.5s var(--ease) 1.2s infinite}
}
@keyframes v4run{0%{stroke-dasharray:.07 1.3;stroke-dashoffset:.07;opacity:0}6%{opacity:1}
  50%{stroke-dasharray:.07 1.3;stroke-dashoffset:-1;opacity:1}55%,100%{stroke-dasharray:.07 1.3;stroke-dashoffset:-1;opacity:0}}
/* phones and narrow tablets: the same path, running down the left */
@media (max-width:999px){
  .steps.v4-steps{grid-template-columns:1fr;gap:1rem;--node:54px}
  .steps.v4-steps > .step.v4-step{flex-direction:row;align-items:flex-start;gap:1.05rem}
  .v4-node{margin:0}
  .v4-node svg{width:29px;height:29px}
  .v4-body{padding:1.15rem 1.15rem 1.25rem}
}
/* no script: nothing to walk, show it done */
html:not(.js) .v4-step .v4-node{background:var(--ember);color:#fff}

/* ---------- 5. liquid glass estimate forms ---------- */
body .dispatch.v4-glass{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;border:0;color:#fff;
  background:
    linear-gradient(162deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.06) 24%,rgba(255,255,255,.015) 58%,rgba(var(--ember-rgb),.14) 100%),
    rgba(14,17,21,.24);
  -webkit-backdrop-filter:blur(24px) saturate(200%);backdrop-filter:blur(24px) saturate(200%);
  box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 22px rgba(255,255,255,.045),0 42px 90px -30px rgba(0,0,0,.78),0 14px 30px -14px rgba(0,0,0,.5)}
/* over the contact hero's daylight photo the clearer fill put the card's title under 4.5:1
   (4.24 on the demo it was drawn on, where the sky sits right under the top-left light), so the contact card starts
   at .32; every build's formtext check measures it over this page's own photo and steps
   the fill up (--v5-cf) until every label, placeholder and note passes */
#v-contact .hero .dispatch.v4-glass{background:
    linear-gradient(162deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.06) 24%,rgba(255,255,255,.015) 58%,rgba(var(--ember-rgb),.14) 100%),
    rgba(14,17,21,var(--v5-cf,.32))}
/* the rim: bright where the light hits, a faint light all the way round, a green catch where it leaves */
body .dispatch.v4-glass::before{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1.25px;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.3) 20%,rgba(255,255,255,.18) 46%,
    rgba(255,255,255,.2) 70%,rgba(var(--v4-lit-rgb),.62) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* soft specular bloom, top left */
body .dispatch.v4-glass::after{content:"";position:absolute;z-index:0;left:-14%;top:-30%;width:78%;height:56%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.13),transparent 72%)}
body .dispatch.v4-glass > *{position:relative;z-index:1}
body .dispatch.v4-glass .dh{background:transparent;border-bottom:1px solid rgba(255,255,255,.1);padding:1.3rem 1.6rem .95rem}
body .dispatch.v4-glass .dh::before{opacity:.42;background:radial-gradient(70% 140% at 0% 120%,rgba(var(--v4-lit-rgb),.55),transparent 64%)}
body .dispatch.v4-glass .dh b{font-size:1.3rem;letter-spacing:-.035em;color:#fff}
body .dispatch.v4-glass .dh span{color:rgba(255,255,255,.84);margin-top:.3rem}
body .dispatch.v4-glass .db{background:transparent;padding:1.05rem 1.6rem 1.35rem}
body .dispatch.v4-glass .f{gap:.36rem;margin-bottom:.72rem}
body .dispatch.v4-glass .f2{gap:.8rem}
body .dispatch.v4-glass .f label{color:rgba(255,255,255,.9)}
body .dispatch.v4-glass .f .rq{color:#fff;opacity:.8}
body .dispatch.v4-glass .f label .opt{color:rgba(255,255,255,.66);font-weight:400}
/* inputs are frosted wells: recessed, no hard border */
body .dispatch.v4-glass .f input,body .dispatch.v4-glass .f select,body .dispatch.v4-glass .f textarea{
  min-height:47px;border-radius:14px;border:1px solid rgba(255,255,255,.13);color:#fff;font-size:1rem;padding:.72rem .95rem;
  background:rgba(0,0,0,.22);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.34),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.06);
  transition:border-color .25s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
body .dispatch.v4-glass .f textarea{min-height:68px}
body .dispatch.v4-glass .f input::placeholder,body .dispatch.v4-glass .f textarea::placeholder{color:rgba(255,255,255,.6)}
body .dispatch.v4-glass .f input:hover,body .dispatch.v4-glass .f select:hover,body .dispatch.v4-glass .f textarea:hover{
  border-color:rgba(255,255,255,.28);background:rgba(0,0,0,.2)}
body .dispatch.v4-glass .f input:focus,body .dispatch.v4-glass .f select:focus,body .dispatch.v4-glass .f textarea:focus{
  outline:none;border-color:rgba(var(--v4-lit-rgb),.95);background:rgba(0,0,0,.16);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 4px rgba(var(--v4-lit-rgb),.28),0 0 22px -2px rgba(var(--v4-lit-rgb),.45)}
body .dispatch.v4-glass .f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' stroke='%23ffffff' stroke-opacity='.8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
body .dispatch.v4-glass .f select option{background:#161A20;color:#fff}
body .dispatch.v4-glass .f label.ck{color:rgba(255,255,255,.84);font-size:.82rem;font-weight:400;line-height:1.5}
body .dispatch.v4-glass .ck input{-webkit-appearance:none;appearance:none;flex:none;min-height:0;width:1.45rem;height:1.45rem;margin:.05rem 0 0;
  padding:0;border-radius:7px;cursor:pointer;background:rgba(255,255,255,.08) no-repeat center/14px 11px;
  border:1.5px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease)}
body .dispatch.v4-glass .ck input:checked{background-color:var(--ember);border-color:rgba(var(--v4-lit-rgb),.9);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1.5 5l3.4 3.4L11.5 1.6' stroke='%23fff' stroke-width='2.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(var(--v4-lit-rgb),.45)}
body .dispatch.v4-glass .ck input:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--v4-lit-rgb),.35)}
body .dispatch.v4-glass .ck a{color:#fff}
/* the button: the one solid colour on the glass, with a wet highlight */
body .dispatch.v4-glass .btn-ember{min-height:56px;border:0;font-weight:650;letter-spacing:-.014em;
  background:linear-gradient(180deg,#368E94 0%,var(--ember) 48%,#28676B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 6px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.08),
    0 12px 28px -10px rgba(var(--v4-lit-rgb),.75)}
body .dispatch.v4-glass .btn-ember::after{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -30%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%)}
body .dispatch.v4-glass .btn-ember:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,0,0,.2),
  0 0 0 1px rgba(255,255,255,.12),0 18px 38px -12px rgba(var(--v4-lit-rgb),.85)}
body .dispatch.v4-glass .btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
body .dispatch.v4-glass .btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5)}
body .dispatch.v4-glass .dnote{color:rgba(255,255,255,.86)}
body .dispatch.v4-glass .dnote a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ember-lit);text-decoration-thickness:2px}
body .dispatch.v4-glass .dsent h3{color:#fff}
body .dispatch.v4-glass .dsent p{color:rgba(255,255,255,.84)}
body .dispatch.v4-glass .dsent .ok{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 30px rgba(var(--v4-lit-rgb),.5)}
/* in a modal the panel is the scroll box (overflow-y:auto), and it clipped the
   card's drop shadow to its square corners. The panel takes the card's shape and
   carries the depth shadow itself; the card keeps only its inner light. */
.emodal .epanel{border-radius:30px;
  box-shadow:0 42px 90px -30px rgba(0,0,0,.78),0 14px 30px -14px rgba(0,0,0,.5)}
body .emodal .epanel .dispatch.v4-glass{margin-top:0;
  box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.14),inset 0 0 22px rgba(255,255,255,.045)}
@media (max-width:520px){.emodal .epanel{border-radius:26px}}
.epanel .ex{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
@media (max-width:520px){
  body .dispatch.v4-glass{border-radius:26px}
  body .dispatch.v4-glass .dh{padding:1.3rem 1.25rem 1rem}
  body .dispatch.v4-glass .db{padding:1.1rem 1.25rem 1.35rem}
  /* the yard prompt wraps to three lines on a phone; show all of it */
  body .dispatch.v4-glass .f textarea{min-height:100px}
}


/* ---------- 6. reviews: one slim rating bar, then the template's drifting carousel ----------
   The rating is plain text (nothing counts up). The carousel is the template's
   .revmarquee, driven by the template's own script; only the cards are restyled:
   upright text, a width that follows the review's length (so the long one does not
   make every card tall and no review meets its own copy on screen), and on a phone a
   7-line clamp with Read more, so one long review does not leave a blank block under
   the short ones. The bar has one link, the Read all button; "Google reviews" is its
   label. The section is as tall as its content, not a full screen. */
.screen.v5-revsec{min-height:0}
@media (min-width:1000px){.screen.v5-revsec{padding-block:104px}}
.revhead.v5-revbar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-bottom:1.25rem;
  padding:.8rem .8rem .8rem 1.4rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.v5-revbar .g{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-weight:600;font-size:1rem;color:var(--ink)}
.v5-sep{flex:none;width:1px;height:30px;background:var(--line)}
.v5-rate{display:inline-flex;align-items:center;gap:.7rem}
.v5-rate b{font-family:"Archivo","Inter",sans-serif;font-weight:800;font-stretch:108%;font-size:2.35rem;line-height:1;
  letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.v5-rate .stars{display:inline-flex;gap:2px;line-height:0}
.v5-rate .stars svg{width:20px;height:20px}
.v5-cnt{color:var(--grey);font-size:1rem}
.v5-cnt b{color:var(--ink);font-weight:650}
.v5-all{margin-left:auto;min-height:50px}
.screen--ink .revhead.v5-revbar,.screen--ink2 .revhead.v5-revbar{background:var(--ink-3);border-color:var(--line-d)}
.screen--ink .v5-revbar .g,.screen--ink2 .v5-revbar .g,.screen--ink .v5-rate b,.screen--ink2 .v5-rate b,
.screen--ink .v5-cnt b,.screen--ink2 .v5-cnt b{color:#fff}
.screen--ink .v5-cnt,.screen--ink2 .v5-cnt{color:var(--grey-2)}
.screen--ink .v5-sep,.screen--ink2 .v5-sep{background:var(--line-d)}
.revmarquee.v5-marquee .revtrack{align-items:stretch}
.revmarquee.v5-marquee .revtrack .rev{position:relative;width:clamp(290px,26vw,370px);padding:1.45rem 1.5rem 1.2rem;border-radius:var(--r-lg)}
.revmarquee.v5-marquee .revtrack .rev--long{width:clamp(520px,52vw,760px)}
.revmarquee.v5-marquee .revtrack .rev--short{width:clamp(270px,22vw,310px)}
.v5-marquee .rev .stars{margin-bottom:.8rem}
.v5-marquee .rev .stars svg{width:16px;height:16px}
.v5-marquee .rev p{font-style:normal;color:var(--ink-2);font-size:1rem;line-height:1.6;letter-spacing:-.01em}
.screen--ink .v5-marquee .rev p,.screen--ink2 .v5-marquee .rev p{color:var(--bone)}
/* one or two reviews stand still (.v5-few): the drift would put the same review on screen
   twice. Side by side on a desktop, one above the other on a phone; the repeat set is not
   shown (it is aria-hidden already). The template's script still runs; it moves nothing. */
.revmarquee.v5-few{-webkit-mask-image:none;mask-image:none;cursor:auto}
.revmarquee.v5-few .revtrack{transform:none!important;width:auto;flex-wrap:wrap}
.revmarquee.v5-few .rev[aria-hidden="true"]{display:none}
@media (max-width:700px){.revmarquee.v5-marquee.v5-few .revtrack .rev{width:100%}}
/* the foot row: the name is the link to the listing; the Read more button sits beside it */
.v5-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid var(--line)}
.screen--ink .v5-foot,.screen--ink2 .v5-foot{border-top-color:var(--line-d)}
.v5-marquee .rev .v5-foot .who{margin:0;padding:0;border:0;min-width:0;color:inherit;text-decoration:none;cursor:pointer}
.v5-marquee .rev .who b{color:var(--ink);transition:color .26s var(--ease)}
.v5-marquee .rev .who > span > span{display:flex;align-items:center;gap:.34rem}
.v5-marquee .rev .who .av{background:#fff;padding:6px}
.v5-marquee .rev .who:hover b{color:var(--ember-deep)}
.v5-marquee .rev .who:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:8px}
.screen--ink .v5-marquee .rev .who b,.screen--ink2 .v5-marquee .rev .who b{color:#fff}
/* a desktop keeps the template's whole-card link: the name's link covers the card */
@media (min-width:701px){.v5-marquee .rev .who::after{content:"";position:absolute;inset:0;border-radius:inherit}}
.v5-more{display:none;flex:none;align-items:center;gap:.35rem;min-height:44px;margin:-6px -4px -6px 0;padding:0 4px;
  border:0;background:none;font:inherit;font-size:.92rem;font-weight:600;letter-spacing:-.006em;color:var(--ember-deep);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.v5-more:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:8px}
.v5-more .v5-chev{transition:transform .35s var(--out)}
.rev.v5-open .v5-more .v5-chev{transform:rotate(180deg)}
.screen--ink .v5-more,.screen--ink2 .v5-more{color:var(--ember-lit)}
@media (max-width:700px){
  .revhead.v5-revbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem 1rem;padding:.55rem 1rem .85rem 1.1rem}
  .v5-sep,.v5-dist{display:none}
  .v5-revbar .g{grid-row:1;grid-column:1}
  /* the Read all button becomes a short text link at the end of the first row */
  .v5-revbar .v5-all{grid-row:1;grid-column:2;justify-self:end;margin:0;min-height:44px;padding:0 .15rem;background:none;border:0;
    box-shadow:none;color:var(--ember-deep);font-size:.94rem;font-weight:600}
  .v5-revbar .v5-all:hover{background:none;color:var(--ink)}
  .v5-revbar .v5-all .v5-on{display:none}
  .v5-rate{grid-row:2;grid-column:1}
  .v5-cnt{grid-row:2;grid-column:2}
  .revmarquee.v5-marquee .revtrack{align-items:flex-start}
  .revmarquee.v5-marquee .revtrack .rev,.revmarquee.v5-marquee .revtrack .rev--long,
  .revmarquee.v5-marquee .revtrack .rev--short{width:min(86vw,340px);padding:1.25rem 1.2rem 1.1rem}
  .v5-marquee .rev p{font-size:.97rem;line-height:1.56;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
  .v5-marquee .rev.v5-clamped:not(.v5-open) p{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 1.9em),rgba(0,0,0,.22));
    mask-image:linear-gradient(180deg,#000 calc(100% - 1.9em),rgba(0,0,0,.22))}
  .v5-marquee .rev.v5-open p{display:block;-webkit-line-clamp:unset;overflow:visible}
  .v5-marquee .rev.v5-clamped .v5-more{display:inline-flex}
  .v5-foot{margin-top:.8rem;padding-top:.75rem}
  .v5-marquee .rev .v5-foot .who{min-height:44px;display:flex;align-items:center}
}

/* ---------- 7. the steps' path, carried to the service checklist ----------
   The line, glow, head, streak and their colours are section 4's own unscoped
   .v4-path / .v4-svg rules, and the script is section 4's engine run per set, so
   it draws exactly like the steps. New here: the node look, and the white streak
   plays ONCE when a set is drawn (the steps keep their v4 loop). */
.v5-set{position:relative}
.v5-set.moving .v4-head{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .v5-set.done .v4-run{animation:v4run 6.5s var(--ease) 1.2s 1}
}

/* ---------- 7a. the towns: names set as type, one page per town ----------
   Not the steps' path: no nodes, no line between the towns, nothing that glows, no
   scroll-linked light. The names run on large, like a sentence; as the list arrives each
   name rises in and a thin rule sweeps in under it, one after another (the template's
   reveal adds .in; --i is the town's place). Each name links to its own page. Only the
   base town has a mark: a map pin that draws itself, and "Based here". More than eight
   towns (.v5-many): a size smaller. Reduced motion and no script: the finished list. */
.areastate.v5-townhead{border-bottom:0;padding-bottom:0;margin-bottom:.55rem}
.arealist.v5-towns{columns:auto;display:flex;flex-wrap:wrap;align-items:flex-end;
  column-gap:clamp(1.1rem,2.4vw,2.2rem);row-gap:.3rem}
.arealist.v5-towns li{position:relative;border:0;break-inside:auto}
.arealist.v5-towns li::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;border-radius:2px;
  background:rgba(var(--ember-rgb),.28);transform-origin:0 50%;transition:background-color .3s var(--ease)}
.arealist.v5-towns a,.arealist.v5-towns a:hover{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.15rem 0 .55rem;color:var(--ink)}
.arealist.v5-towns .c{font-family:"Archivo","Inter",sans-serif;font-weight:800;font-stretch:104%;
  font-size:clamp(1.55rem,1rem + 2.2vw,2.9rem);letter-spacing:-.045em;line-height:1.08;transition:color .28s var(--ease)}
.arealist.v5-towns.v5-many .c{font-size:clamp(1.35rem,.95rem + 1.5vw,2.2rem)}
.v5-towns .v5-pin{flex:none;display:grid;place-items:center;color:var(--ember)}
.v5-towns .v5-pin svg{width:1.6rem;height:1.6rem}
.v5-towns.v5-many .v5-pin svg{width:1.35rem;height:1.35rem}
.v5-towns .v5-pin path,.v5-towns .v5-pin circle{stroke-dasharray:1 1;stroke-dashoffset:0}
.v5-towns .v5-note{flex:none;align-self:flex-start;margin-top:.15rem;font-size:.86rem;font-weight:500;
  letter-spacing:-.004em;color:var(--grey);white-space:nowrap}
.arealist.v5-towns li:hover::after{background:var(--ember)}
.arealist.v5-towns li:hover .c{color:var(--ember-deep)}
.arealist.v5-towns a:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:6px}
.screen--ink .arealist.v5-towns a,.screen--ink2 .arealist.v5-towns a{color:#fff}
.screen--ink .arealist.v5-towns li::after,.screen--ink2 .arealist.v5-towns li::after{background:rgba(var(--v4-lit-rgb),.32)}
.screen--ink .v5-towns .v5-pin,.screen--ink2 .v5-towns .v5-pin{color:var(--ember-lit)}
.screen--ink .v5-towns .v5-note,.screen--ink2 .v5-towns .v5-note{color:var(--grey-2)}
.screen--ink .arealist.v5-towns li:hover .c,.screen--ink2 .arealist.v5-towns li:hover .c{color:var(--ember-lit)}
/* the list itself does not fade; its towns arrive one by one */
html.js .v5-towns[data-rv]{opacity:1;transform:none;translate:none;transition:none}
@media (prefers-reduced-motion:no-preference){
  html.js .arealist.v5-towns li::after{transform:scaleX(0);
    transition:transform 1.1s var(--out) calc(var(--i,0) * 90ms + 120ms),background-color .3s var(--ease)}
  html.js .v5-towns .v5-pin path,html.js .v5-towns .v5-pin circle{stroke-dashoffset:1;
    transition:stroke-dashoffset 1.2s var(--out) calc(var(--i,0) * 90ms + 80ms)}
  html.js .arealist.v5-towns .c,html.js .v5-towns .v5-note{opacity:0;translate:0 14px;
    transition:opacity .7s var(--out) calc(var(--i,0) * 90ms),translate .9s var(--out) calc(var(--i,0) * 90ms),
      color .28s var(--ease)}
  html.js .arealist.v5-towns.in li::after{transform:none}
  html.js .v5-towns.in .v5-pin path,html.js .v5-towns.in .v5-pin circle{stroke-dashoffset:0}
  html.js .arealist.v5-towns.in .c,html.js .v5-towns.in .v5-note{opacity:1;translate:0 0}
}

/* ---------- 7b0. the Areas menu and the town pages ----------
   Areas is a menu like Services: every town, each to its own page. On the phone it is
   a fold in the drawer, like Services. A town page's services are the services rows
   without their photos. */
.v5-areadrop .dropdown{width:min(560px,88vw)}
.v5-areadrop.v5-manydrop .dropdown{width:min(760px,88vw)}
.v5-areadrop .droplist.v5-many{grid-template-columns:repeat(3,minmax(0,1fr))}
.drawer li.open .dsub.v5-dsub{max-height:calc(var(--k,8) * 3.3rem + 1.5rem)}
.rows.v5-trows>.row{grid-template-columns:minmax(0,1fr);min-height:0}
/* a town page is short: its sections are as tall as what they hold, not a screen each */
[data-v5-town] .screen:not(.screen--close){min-height:0}
@media (min-width:1000px){[data-v5-town] .screen:not(.screen--close){padding-block:104px}}
.head + .rows.v5-trows{margin-bottom:2rem}
.rows.v5-trows + .actions{margin-top:2rem}
/* service pages: the checklist, start to finish, as stops down the line */
.v5-covers .inclist li{position:relative;z-index:2;border:0;padding:1.02rem 0}
.v5-covers .inclist li:first-child{border:0}
.v5-covers .inclist li::after{content:"";position:absolute;left:calc(30px + 1rem);right:0;bottom:0;height:1px;background:var(--line)}
.screen--ink .v5-covers .inclist li::after,.screen--ink2 .v5-covers .inclist li::after{background:var(--line-d)}
.v5-covers .inclist li:hover{padding-left:0}
.v5-covers .inclist li:hover .ic{transform:none}
.v5-covers .inclist .ic{width:30px;height:30px;border-radius:50%;margin-top:.02rem;background:#fff;color:var(--ember-deep);
  box-shadow:0 0 0 1px rgba(var(--ember-rgb),.26),0 8px 18px -10px rgba(15,18,22,.4);
  transition:background-color .55s var(--out),color .55s var(--out),box-shadow .7s var(--out)}
.v5-covers .inclist li.lit .ic{background:var(--ember);color:#fff;
  box-shadow:0 0 0 1px rgba(var(--ember-rgb),.5),0 0 20px 2px rgba(var(--v4-lit-rgb),.5),0 10px 22px -10px rgba(var(--ember-rgb),.8)}
.screen--ink .v5-covers .inclist .ic,.screen--ink2 .v5-covers .inclist .ic{background:var(--ink-3);color:var(--ember-lit)}
.screen--ink .v5-covers .inclist li.lit .ic,.screen--ink2 .v5-covers .inclist li.lit .ic{background:var(--ember);color:#fff}
/* no script: nothing to walk, show it done */
html:not(.js) .v5-covers .inclist .ic{background:var(--ember);color:#fff}

/* ---------- 7b. the galleries: their own photo as a wide first tile ----------
   The template's grid is CSS columns; a column-span:all tile leads it full width, and
   the rest keep their even columns. On a one-column phone it is a tile like the others. */
.grid .shot.v5-wide{column-span:all;-webkit-column-span:all;aspect-ratio:12/5}
.grid .shot.v5-wide img{object-position:50% 70%}
@media (max-width:540px){.grid .shot.v5-wide{aspect-ratio:16/10}}

/* ---------- 7c. hero trust lines: a separator never ends or starts a line (v5.js) ---------- */
.trustline .dot.v5-dotend{visibility:hidden}
.trustline .dot.v5-dotstart{display:none}

/* ---------- 8. home hero: brighter footage, a light scrim, local shadows ----------
   The poster still is the loop's first frame (swapped in by apply_overlay.py), so the
   still, the crossfade and the loop are one scene. The still and the loop share one
   filter, or the crossfade steps in brightness. The template's .scrim sits under the
   footage (negative z-index inside .bgwrap) and never showed; this one sits over it.
   Desktop: a light wash behind the text column that is gone before the gap, so the
   footage shows between the text and the form, and a band behind the header row. The
   text holds its contrast with its own soft shadow instead of a dark column.
   The brightness is measured per loop (assets/overlay/tune_hero.py writes hero-tune.json:
   the brightest value from .62 down that keeps every hero and form text at WCAG over ten
   frames of that loop). apply_overlay.py sets --v5-hb; a loop nobody has tuned keeps the
   template's own .48. Only with a loop (.v5-loop): a still-only hero keeps the template's
   filter, and herostill measures it. */
#v-home .hero .bgwrap.v5-loop img,#v-home .hero .bgwrap.v5-loop video{filter:brightness(var(--v5-hb,.48)) saturate(1.06) contrast(1.05)}
/* a still with no loop (a pack without one): as bright as demo.py's still gate measured it
   (--v5-sb desktop, --v5-sbp phone); unmeasured, the template's own .58 and .45 */
#v-home .hero .bgwrap.v5-still img{filter:brightness(var(--v5-sb,.58)) saturate(1.06) contrast(1.04)}
@media (max-width:1080px){#v-home .hero .bgwrap.v5-still img{filter:brightness(var(--v5-sbp,.45)) saturate(1.05)}}
#v-home .hero .bgwrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,14,.45) 0,rgba(10,12,14,.42) 104px,rgba(10,12,14,0) 140px),
    linear-gradient(90deg,rgba(10,12,14,.46) 0,rgba(10,12,14,.38) 38%,rgba(10,12,14,.12) 52%,rgba(10,12,14,0) 58%)}
@media (min-width:1081px){
  #v-home .hero .lede,#v-home .hero .eyebrow,#v-home .hero .trustline{text-shadow:0 1px 2px rgba(0,0,0,.35),0 0 22px rgba(0,0,0,.35)}
  #v-home .hero h1 em{text-shadow:0 1px 2px rgba(0,0,0,.3),0 0 28px rgba(0,0,0,.34)}
  /* the header's small accent line, over the footage only (a stuck header is solid) */
  body:not(.solid-top) .topbar:not(.stuck) .topcall small{text-shadow:0 0 3px rgba(0,0,0,.5),0 1px 8px rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.45)}
}
/* a stacked hero (phones, portrait tablets): the loop covers the first screen only, and the
   form under it sits on the page's ink. Stretched over the whole 1,400 to 1,600 px stacked
   hero, a 1600x900 loop showed about 230 of its pixels across a phone, blown up five times,
   and read as pixelated (Arno, 2026-09-28); over one screen it is blown up under three times
   and the whole height of the frame shows. The last part of the footage fades into the ink,
   so there is no edge where it stops. */
@media (max-width:1080px){
  /* stacked: the text runs the full width over the top of the footage */
  #v-home .hero .bgwrap{bottom:auto;height:100vh;height:100svh}
  #v-home .hero .bgwrap::after{background:linear-gradient(180deg,rgba(10,12,14,.55) 0,rgba(10,12,14,.5) 18%,
    rgba(10,12,14,.3) 45%,rgba(10,12,14,.16) 66%,rgba(15,18,22,.74) 88%,#0F1216 100%)}
}
#v-home .hero h1 em{color:var(--ember-lit)}
/* the pills: one row. Instagram without the handle (it stays in the pill's title and the
   link), Google with the rating and count, on a phone too, where the names go to
   screen readers only. With no rating yet (.handle--gp) the phone shows the G and its
   empty stars, as the template does, without the word. */
@media (max-width:430px){
  .handles{gap:.5rem}
  .handle--ig b,.handle--g b,.handle--gp b{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap;border:0}
  .handle--g .ph{display:inline;font-size:.8rem}
  .handle--g{gap:.5rem}
}
/* the band's rating cell */
.strip .v5-star{display:inline-block;width:.62em;height:.62em;margin-left:.12em;vertical-align:.06em;fill:var(--v4-gold)}

/* stars that match the rating: grey row, gold row clipped to rating/5 */
.v5-part{position:relative;display:inline-flex;vertical-align:middle;line-height:0}
.v5-part .v5-off,.v5-part .v5-onl{display:inline-flex;gap:inherit;line-height:0}
.v5-part .v5-off{opacity:.3;filter:grayscale(1)}
.v5-part .v5-onl{position:absolute;left:0;top:0;bottom:0;width:var(--fill);overflow:hidden;white-space:nowrap}
.v5-part .v5-onl svg{flex:none}

/* ---------- 11. no numbered markers, no empty columns ----------
   The 01/02/03 numbers are taken out of the services rows, the services menu and the
   reasons (apply_overlay.py 8a4). The rows lose the 74px column the number sat in. */
.rows>.row{grid-template-columns:minmax(0,1fr) 260px}
@media (max-width:1000px){.rows>.row{grid-template-columns:minmax(0,1fr)}}
.droplist a{gap:.6rem}
.reason h4{margin-top:.2rem}
/* the services rows' photo fills its box: a portrait photo showed only its top (sky) */
.rows .row .thumb{position:relative}
.rows .row .thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 12. the mark: the glass tile, or their own logo (Arno 2026-10-01) ----------
   apply_overlay.py swap_marks(). The glass tile carries its own squircle, rim and shadow,
   so the template's rounded clip and accent glow come off, sized like Mike's demos. Their
   logo is as tall as the template's mark and as wide as the logo runs, up to a cap. A
   wordmark (it spells their name) stands alone: the name beside it is kept for screen
   readers only, so the name is not printed twice and the row keeps room for the menu.
   The mark may shrink (the name wraps) before the menu button is pushed off a phone. */
.mark .glyph[data-mark]{border-radius:0;overflow:visible;box-shadow:none}
.mark .glyph[data-mark=glass]{width:50px;height:50px;margin:-2px}
.mark .glyph[data-mark=logo]{height:46px;width:auto;max-width:96px}
.mark .glyph[data-mark=logo][data-wordmark]{max-width:240px}
.mark:hover .glyph[data-mark=logo]{transform:scale(1.03)}
.mark:has(> .glyph[data-wordmark]) .txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.navrow .mark:has(> .glyph[data-mark]){flex:0 1 auto;min-width:0}
.navrow .mark:has(> .glyph[data-mark]) .txt{min-width:0}
@media (max-width:640px){
  .mark .glyph[data-mark=glass]{width:44px;height:44px}
  .mark .glyph[data-mark=logo]{height:40px;max-width:80px}
  .mark .glyph[data-mark=logo][data-wordmark]{height:42px;max-width:min(210px,calc(100vw - 130px))}
}

/* review avatars like Google's (2026-10-01): initial on a colored circle, the G as a badge */
.v5-marquee .rev .who .av.v5-person{position:relative;width:38px;height:38px;padding:0;border-radius:50%;
  background:var(--v5-av);color:#fff;display:grid;place-items:center;font-weight:600;font-size:17px;line-height:1;letter-spacing:0}
.v5-marquee .rev .who .av.v5-person .v5-g{position:absolute;right:-4px;bottom:-4px;width:19px;height:19px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.v5-marquee .rev .who .av.v5-person .v5-g svg{width:11px;height:11px}

/* the loop's brightness, measured for this loop (assets/overlay/hero-tune.json) */
:root{--v5-hb:0.62}



/* Footage shot from the side shows only a strip about a seventh of its width in a
   portrait phone hero. The strip sits on the work, not on the middle of the frame: the
   x is set per loop by eye (assets/overlay/hero-tune.json, phone_x). A container query
   on the home .hero .bgwrap, as for the top-down turn: only a PORTRAIT hero box moves;
   desktop and landscape keep the whole frame. */
#v-home .hero .bgwrap{container-type:size;container-name:v4hero}
@container v4hero (orientation: portrait){
  #v-home .hero .bgwrap.v5-loop video,#v-home .hero .bgwrap.v5-loop img{object-position:53% 50%}
}