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


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