/* Self-hosted type: Archivo, IBM Plex Mono, Inter (SIL Open Font License) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/Archivo-400-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/Archivo-400-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   M&I Junk Removal & Hauling — design system.
   ONE accent: amber beacon. Type scale deliberately tighter than display-max
   so headings sit against photography instead of shouting over it.
   ========================================================================== */

:root{
  --ember:#8A6D0B;
  --ember-hot:#6E5709;
  --ember-deep:#4A3A05;      /* text-on-light variant of the same hue */
  --ember-glow:rgba(138,109,11,.45);

  --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(138,109,11,.20),transparent 66%),
             radial-gradient(46% 40% at 94% 98%,rgba(138,109,11,.12),transparent 70%)}

/* hazard stripe */
.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(138,109,11,0)}100%{box-shadow:0 0 0 0 rgba(138,109,11,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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.3),transparent 62%),
             repeating-linear-gradient(-45deg,rgba(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.09) 0 16px,transparent 16px 32px)}
.row .thumb.notype b{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.7rem;color:rgba(138,109,11,.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(138,109,11,.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(138,109,11,.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(138,109,11,.13);border:1px solid rgba(138,109,11,.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(138,109,11,.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(138,109,11,.14);border:1px solid rgba(138,109,11,.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:#E8CE72; --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(138,109,11,.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(240,96,60,.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(138,109,11,.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(138,109,11,.07),transparent 68%),
             radial-gradient(50% 44% at 96% 98%,rgba(138,109,11,.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)}

/* Gallery captions sit over photography that is brighter than the reference set
   (sunset containers, snow highway). Measured 1.61:1; the scrim now guarantees it. */
.shot .ov{background:linear-gradient(180deg,rgba(10,12,15,.15) 0%,rgba(10,12,15,.62) 45%,rgba(10,12,15,.94) 100%)}
/* 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}
}
/* The night-road footage has bright headlights that pass behind the trust line.
   Measured 4.29:1 against a 4.5 threshold. */
.hero .trustline{color:#fff}
.hero .bgwrap video{filter:brightness(.42) saturate(1.06) contrast(1.05)}

/* The arc footage flares past white and averages 113 luma. The scrim and video
   filter work hard, and a deep steel blue cannot carry the hero highlight on
   near-black, so the lit sibling does. */
.hero .bgwrap img,.hero .bgwrap video{filter:brightness(.38) saturate(1.04) contrast(1.06)}
.hero .scrim{background:linear-gradient(92deg,rgba(9,10,12,.96) 0%,rgba(9,10,12,.9) 46%,rgba(9,10,12,.7) 100%)}
.hero h1 em,.heroleft h1 em{color:var(--ember-lit);text-shadow:0 0 40px rgba(232,206,114,.3)}


/* estimate form validation messages */
.ferr{color:#b3261e;font-size:.85rem;margin-top:.35rem;font-weight:600}
.hero .dispatch .ferr,.dispatch .dh + .db .ferr{color:#ffb4ab}
.dispatch [aria-invalid="true"]{border-color:#b3261e;outline:2px solid rgba(179,38,30,.28);outline-offset:1px}
.dispatch .consent [aria-invalid="true"]{outline-offset:2px}
.dsent:focus{outline:none}

/* ===== M&I additions: consent, map gate, media controls, legal pages ===== */
.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.15rem;height:1.15rem;margin-top:.12rem;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}
.vidtoggle{font-family:"Inter",sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.04em;line-height:1;cursor:pointer;border-radius:999px;padding:.55rem .9rem;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.vidtoggle{position:absolute;right:1rem;bottom:1rem;z-index:4;border:1px solid rgba(255,255,255,.4);background:rgba(15,18,22,.74);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vidtoggle:hover{background:rgba(15,18,22,.92);border-color:#fff}
.stars{color:#F4B400} .stars path{fill:#F4B400;stroke:#F4B400}
.fig img{height:auto}
/* Build credit, footer right, 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}
.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)}}
.vidtoggle{min-height:40px;padding:.6rem 1rem}
.ck input{width:1.5rem;height:1.5rem;margin-top:0}
.socials a{flex:none;min-width:40px}
.rev .who .av{flex:0 0 auto} .rev .who b{overflow-wrap:anywhere}
.vidtoggle[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.vidtoggle{display:none}}

/* counters (SEO/GEO 2026-10-08): the real number stays in the text node (.v); the count-up plays in the
   aria-hidden overlay (.a), whose digits are CSS content and never enter the page text */
.stat{position:relative;display:inline-block}
.strip b .stat,.strip b .stat span{font:inherit;letter-spacing:inherit;color:inherit;margin:0;text-transform:none;line-height:inherit}
.strip b .stat{display:inline-block;position:relative}
.strip b .stat .v{display:inline}
.stat .a{position:absolute;inset:0;display:none;white-space:nowrap;text-align:right}
.stat .a::before{content:"0"}
.stat .a[data-n]::before{content:attr(data-n)}
.count-pre .stat.up .a,.stat.counting .a{display:block}
.count-pre .stat.up .v,.stat.counting .v{opacity:0}
/* in-text links written by the SEO pass (FAQ sources, town pages): the site's links carry no underline */
a.inlink{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* v5 design for M&I Junk Removal & Hauling (2026-10-08): Lanham's port of the approved v5 overlay
   stylesheet (same template family), with this site's colours as apply_overlay.py sets them:
   the glow is --ember-lit #E8CE72 (232,206,114) and the form button runs from --ember-hot #6E5709
   to #675108 (45% --ember + 55% --ember-deep). Left out, as on Lanham: 6 (demo review carousel),
   7b0 (Areas menu and town pages), 7b (gallery wide tile), 12 (demo mark), demo review avatars. */
/* ==========================================================================
   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:232,206,114;--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,#6E5709 0%,var(--ember) 48%,#675108 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}
}


/* ---------- 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}
}

/* 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}

/* ---------- 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}



/* ==========================================================================
   Phone fixes ported from ALL Gone (Arno 2026-10-18/19), added by tools/patch_phone_layout.py.
   ========================================================================== */
/* every row of cards or photos is centered at every width: an uneven last row sits in the middle */
.cards{--ag-g:clamp(.75rem,1.1vw,1.1rem);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ag-g)}
.cards>.card{flex:0 0 calc((100% - 3 * var(--ag-g)) / 4);min-width:0}
@media (max-width:1180px){.cards>.card{flex-basis:calc((100% - 2 * var(--ag-g)) / 3)}}
@media (max-width:880px){.cards>.card{flex-basis:calc((100% - var(--ag-g)) / 2)}}
.grid{--ag-g:clamp(.65rem,1.1vw,1.05rem);columns:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ag-g)}
.grid>.shot,.grid>.shot.tall{flex:0 0 calc((100% - 2 * var(--ag-g)) / 3);min-width:0;margin:0;aspect-ratio:1/1}
@media (max-width:900px){.grid>.shot,.grid>.shot.tall{flex-basis:calc((100% - var(--ag-g)) / 2)}}

/* Phone: less scrolling. Services two side by side (odd last card centered), photos 2-up, towns as pills. */
@media (max-width:560px){
  .cards{--ag-g:.6rem}
  .cards>.card{flex-basis:calc((100% - var(--ag-g)) / 2)}
  .cards>.card .ph{aspect-ratio:1/1;height:auto}
  .cards>.card .ph img{height:100%;object-fit:cover}
  .cards>.card .ph .tag{display:none}
  .cards>.card .bx{padding:.75rem .8rem .85rem}
  .cards>.card .bx h3{font-size:1rem;line-height:1.2;letter-spacing:-.015em}
  .cards>.card .bx p{font-size:.82rem;line-height:1.4;margin-top:.3rem}
  .cards>.card .bx .go{font-size:.82rem;margin-top:.5rem}
  .grid>.shot,.grid>.shot.tall{flex-basis:calc((100% - var(--ag-g)) / 2)}
  .arealist.v5-towns{display:flex;flex-wrap:wrap;gap:.45rem}
  .arealist.v5-towns li{margin:0;border:0;padding:0;width:auto}
  .arealist.v5-towns li a{min-height:38px;padding:.45rem .8rem;border:1px solid rgba(15,18,22,.12);
    border-radius:999px;font-size:.92rem;font-weight:600;letter-spacing:-.01em;background:#fff;display:inline-flex;align-items:center;gap:.35rem}
  .arealist.v5-towns li a::after,.arealist.v5-towns li::after{display:none}
  .arealist.v5-towns .v5-pin svg{width:15px;height:15px}
  .arealist.v5-towns .c,.arealist.v5-towns.v5-many .c{font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.1}
  .screen--ink .arealist.v5-towns li a,.screen--ink2 .arealist.v5-towns li a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
  .screen{padding-top:3.4rem;padding-bottom:3.4rem}
}

/* iPhone edges v2 (Arno 2026-10-19 01:28: the 4px strips had the wrong color and the top was still see-through).
   Safari 26 colors its bars from the fixed element it finds at the edge and shows page pixels there. The page
   draws under the status bar and the address bar (viewport-fit=cover, set by tools/patch_phone_layout.py) and the
   header and call bar themselves are solid ink and reach into those areas. No strips, no pseudo-elements. */
html{background-color:var(--ink)}
@media (max-width:880px){
  .topbar{background-color:var(--ink);padding-top:env(safe-area-inset-top,0px)}
  /* 2026-10-22 Arno: clear over the hero like on laptop. At the top the bar's own box is only the clock strip
     (its safe-area padding, still solid ink for Safari); the nav row hangs below it, see-through, until you scroll. */
  .topbar:not(.stuck){height:0}
  .topbar::before{display:none}
  :root{--top:calc(128px + env(safe-area-inset-top,0px))}
  .callbar{background-color:var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
  .callbar::after{display:none}
}
@media (max-width:640px){:root{--top:calc(78px + env(safe-area-inset-top,0px))}}

/* a photo badge only shows when it says something */
.badge:empty{display:none}

/* tapping a town: no grey flash and no jump */
a,button{-webkit-tap-highlight-color:transparent}
.arealist.v5-towns li a,.arealist.v5-towns li a:hover,.arealist.v5-towns li a:active{transition:transform .18s var(--ease),background-color .18s var(--ease)}
@media (max-width:560px){
  .arealist.v5-towns li a:hover,.arealist.v5-towns li a:active,.arealist.v5-towns li a:focus{padding:.45rem .8rem;color:var(--ink)}
  .screen--ink .arealist.v5-towns li a:hover,.screen--ink .arealist.v5-towns li a:active,.screen--ink2 .arealist.v5-towns li a:hover,.screen--ink2 .arealist.v5-towns li a:active{color:#fff}
  .arealist.v5-towns li a:active{transform:scale(.96);background:#f1f1ee}
}
@media (hover:none){
  .arealist a:hover{padding-left:.2rem}
  .arealist.v5-towns li:hover .c{color:inherit}
}

/* footer social row (2026-10-19): the 8 icons share one row on phones; at 393 px the Pinterest icon ran
   past the right edge and was cut off. Icons shrink only when the row is too narrow, never above 40 px. */
@media (max-width:560px){
  .socials a{flex:1 1 0;min-width:0;max-width:40px;width:auto;height:auto;aspect-ratio:1/1}
}