/* ── v2 CHROME: header, footer and loader, site-wide ───────────────────────
   Extracted from v2-home.css so the redesigned chrome can render on EVERY
   page while most pages still run the old design.

   ⚠ TOKENS ARE SCOPED TO THE CHROME, NOT :root OR body. They are the
   redesign's warm ladder, and the live tokens.css declares the same names as
   a cool grey. Custom properties inherit, so declaring them here dresses the
   chrome and leaves every page body untouched. On :root they would retint
   the whole site.

   ⚠ .hdr IS SOLID BY DEFAULT. The prototype header is transparent and
   relies on a dark full-bleed hero sitting behind it. Most pages do not have
   one: on /privacy/ the pale nav links landed on white and were invisible.
   Transparency is now opt-in, granted only to body.v2 — the redesigned
   pages, which all open on a dark hero. */
.hdr, .ft, .loader, .mnav {

  --ink-900:#000;--ink-800:#281f1a;--ink-700:#4e423c;--ink-600:#6e5f58;--ink-500:#72635a;
  --ink-400:#a7968c;--ink-300:#cebeb5;--ink-200:#e8d9d1;--ink-100:#f2e8e1;--ink-50:#f6eee6;--white:#fcf6f2;
  --accent:#f78c1e;--accent-600:#cb7319;--accent-tint:#feeedd;
  --fh:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fd:'Lora','Palatino Linotype',Palatino,serif;
  --fb:'Lato','Helvetica Neue',Arial,sans-serif;
  /* Section grounds. One variable each so the palette can be tried by eye.
     Warm neutral ladder: cream -> oyster -> sand -> stone -> greige. */
  --g-hero:#1c1714;        --g-stmt:#ffffff;
  --g-svcs:#faf5f0;     --g-work:#fdfaf7;     --g-proc:#ffffff;
  --g-price:#fdfaf7;    --g-dc:#faf5f0;       --g-revs:#fdfaf7;
  --g-areas:#ffffff;    --g-faq:#faf5f0;      --g-guides:#ffffff;
  --g-close:#fdfaf7;    --g-ft:#211a16;
  /* Headings and the nav bar share one brown, so the bar reads as part of
     the type rather than a black band laid over the page. */
  --heading:#3a2e26;
  --dark:#211a16;
  --draw:cubic-bezier(.22,1,.36,1);--snap:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(20px,5vw,80px);
}

/* ⚠ SOLID EVERYWHERE. The ONLY route to a transparent header is the
   :has(.hero.on-dark) rule further down, which fires only on a page that
   actually has a dark hero for the pale nav links to sit on.

   There used to be a second, unguarded rule here —

       body.v2 .hdr:not(.is-stuck) { background: transparent; }

   — and it made the header transparent on EVERY v2 page. On /contact-us/,
   which opens on white, that left #e8d9d1 nav links and a #fcf6f2 phone
   number on a white background: measured, and all but invisible. v2's own
   stylesheet never had that rule; it was added here while chasing the
   opposite bug on /privacy/ and it overshot. Do not reintroduce it. */
.hdr { background: rgba(33,26,22,.96); }

.loader{position:fixed;inset:0;z-index:900;background:#1c1714;display:grid;place-items:center;
  align-content:center;gap:22px;animation:loaderOut .6s var(--draw) 1.5s forwards}
.loader__logo{overflow:hidden;width:min(300px,62vw)}
.loader__logo img{width:100%;height:auto;clip-path:inset(0 100% 0 0);
  animation:logoWipe .85s var(--draw) .25s forwards}
.loader__rule{display:block;width:min(300px,62vw);height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;animation:ruleIn .7s var(--draw) .55s forwards}
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;color:#fcf6f2;
  transition:background .24s ease,backdrop-filter .24s ease,box-shadow .24s ease}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);
  height:88px;transition:height .24s var(--draw)}
.hdr.is-stuck{background:rgba(33,26,22,.96);backdrop-filter:blur(12px)}
.hdr.is-stuck .hdr__in{height:64px;border-bottom-color:transparent}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.17em}
.hdr.is-stuck .brand{font-size:11px}
.hdr__nav{display:flex;gap:30px;font-size:14px;color:var(--ink-200)}
.hdr__nav a{position:relative;padding:6px 0}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .24s var(--draw)}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__act{display:flex;align-items:center;gap:18px}
.hdr__tel{font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.hdr__tel-ico{display:none;flex:none}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{display:block;width:22px;height:1.5px;background:#fcf6f2;transition:transform .24s var(--draw)}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mnav{position:fixed;inset:64px 0 0;z-index:99;background:var(--dark);padding:30px var(--pad)}
.mnav nav{display:flex;flex-direction:column}
.mnav a{font-family:var(--fh);font-size:28px;font-weight:600;color:#fcf6f2;padding:14px 0}
.ft{background:var(--g-ft);color:#fcf6f2;padding:clamp(50px,7vw,76px) var(--pad) 0;overflow:hidden}
.ft__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;
  padding-bottom:44px}
.ft__h{font-family:var(--fb);font-size:11px;letter-spacing:.2em;color:var(--accent);font-weight:700;
  text-transform:uppercase;margin-bottom:18px}
.ft__cols a,.ft address span{display:block;font-size:14px;color:var(--ink-300);padding:5px 0;font-style:normal}
.ft__cols a:hover{color:#fcf6f2}
.ft address{font-style:normal}
.ft__soc{display:flex;gap:10px;margin-top:16px}
.ft__soc a{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
body.v2 .ft__soc-ico{display:grid;place-items:center;flex:none;
  inline-size:40px;block-size:40px;color:var(--ink-300);
  transition:color .22s ease,transform .22s ease}
body.v2 .ft__soc-ico:hover,body.v2 .ft__soc-ico:focus-visible{color:var(--accent);transform:translateY(-2px)}
body.v2 .ft__soc-ico svg{display:block}
.ft__proof{padding:30px 0 26px;font-size:13px;color:var(--ink-400)}
.ft__word{position:absolute;inset-inline:0;inset-block-end:0;margin:0;
  overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 92%);
          mask-image:linear-gradient(0deg,#000 10%,transparent 92%)}
.ft__word span{display:block;font-family:var(--fh);font-weight:700;
  font-size:clamp(54px,11vw,150px);line-height:.9;letter-spacing:-.04em;
  color:rgba(252,246,242,.055);white-space:nowrap;will-change:transform}
.ft{position:relative;isolation:isolate}
.ft__legal{position:relative;z-index:1}
.ft__legal{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 0 26px;font-size:12px;color:var(--ink-400)}
.ft__legal a{margin-left:26px}
.brand span{white-space:nowrap}
body.v2 main > section,
body.v2 .hero,
body.v2 .ft__cols, body.v2 .ft__proof, body.v2 .ft__word, body.v2 .ft__legal{
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2));
}
body.v2 .hdr{ background: rgba(33,26,22,.96); backdrop-filter: blur(12px); }
.brand__mark{ display: block; block-size: 42px; inline-size: auto; max-inline-size: none;
  transition: block-size .24s var(--draw); }
.hdr.is-stuck .brand__mark{ block-size: 32px; }
.hdr__grp{ position: relative; }
.hdr__grp > a{ display: inline-flex; align-items: center; gap: 5px; }
.hdr__chev{ transition: transform .3s var(--draw); flex: none; }
.hdr__grp:hover > a .hdr__chev, .hdr__grp:focus-within > a .hdr__chev{ transform: rotate(180deg); }
.hdr__box{
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: -14px;
  min-inline-size: 232px; padding: 9px; border-radius: 14px;
  background: rgba(28,23,20,.985); backdrop-filter: blur(14px);
  box-shadow: 0 22px 54px rgba(0,0,0,.42);
  display: grid; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .25s ease, transform .25s var(--draw), visibility .25s;
}
.hdr__grp:hover .hdr__box, .hdr__grp:focus-within .hdr__box{ opacity: 1; visibility: visible; transform: none; }
.hdr__box a{
  display: block; padding: 10px 13px; border-radius: 9px; font-size: 13.5px;
  color: var(--ink-200); white-space: nowrap;
  transition: background .22s ease, color .22s ease;
}
.hdr__box a:hover, .hdr__box a:focus-visible{ background: rgba(255,255,255,.085); color: #fff; }
.hdr__box a::after{ content: none; }
.hdr__nav a[aria-current]{ color: #fff; }
.hdr__nav > a[aria-current]::after, .hdr__grp > a[aria-current="true"]::after{ transform: scaleX(1); }
.mnav__sub{ display: grid; gap: 2px; margin: 2px 0 10px; padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(255,255,255,.17); }
.mnav__sub a{ font-size: 15px !important; opacity: .76; padding: 7px 0 !important; }
.mnav__cta{ margin-block-start: 14px; color: var(--accent) !important; }
.mnav__tel{ opacity: .76; }

@media (max-width:1100px){
.hdr__nav{display:none}
.burger{display:flex}
.hdr__in{height:64px}
.ft__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.ft__cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.loader{display:none}
}
@media (max-width:760px){
.brand span{font-size:10px;letter-spacing:.12em}
.hdr__act{gap:10px}
.hdr__act .btn--sm{padding:0 16px}
}
@supports selector(:has(*)){
body.v2:has(.hero.on-dark) .hdr:not(.is-stuck){ background: transparent; backdrop-filter: none; }
}
@supports (animation-timeline: scroll()){
body.v2:has(.hero.on-dark) .hdr{
    animation: hdrSolid linear both;
    animation-timeline: scroll();
    animation-range: 60px 150px;
  }
}
@media (max-width: 1100px){
.brand__mark{ block-size: 32px; }
}
@media (prefers-reduced-motion: reduce){
.brand__mark, .hdr__chev, .hdr__box{ transition: none; }
}
@media (max-width: 1100px){
.mnav{ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.hdr__tel{ display: inline-flex; inline-size: 44px; block-size: 44px;
    align-items: center; justify-content: center; gap: 0;
    border: 1px solid rgba(252,246,242,.35); border-radius: 999px; color: inherit; }
.hdr__tel-ico{ display: block; }
.hdr__tel-num{ display: none; }
.hdr__act{ gap: 10px; }
.hdr__act .btn--sm{ padding: 0 30px; }
body.v2 .ft__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
body.v2 .ft__cols a, body.v2 .ft address a{ display: block; padding-block: 11px; }
body.v2 .brand{ min-block-size: 44px; align-items: center; }
body.v2 .ft__legal a{ padding-block: 14px; }
}
@media (max-width: 380px){
body.v2 .brand__mark{ block-size: 28px; }
body.v2 .hdr__act{ gap: 8px; }
body.v2 .hdr__act .btn--sm{ padding: 0 16px; font-size: 13px; min-height: 40px; }
body.v2 .hdr__tel{ inline-size: 40px; block-size: 44px; }
}