/* ==========================================================================
   Whitener Tree Service — site styles
   Palette: pine / moss / fog / sawdust / blaze (hi-vis orange)
   Motif:   the felling notch (wedge) + the cut log end (growth rings)
   ========================================================================== */

:root {
  --ink:#0B1712;
  --pine:#12271F;
  --pine-2:#1B3A2E;
  --moss:#3F5D48;
  --fog:#E6EBE6;
  --paper:#FFFFFF;
  --sawdust:#E0CBA0;
  --blaze:#FF6A13;        /* fills, bars, buttons — text sits ON this */
  --blaze-2:#FF8034;
  --blaze-ink:#B24200;    /* orange TEXT on white / fog (WCAG AA) */
  --blaze-sand:#993800;   /* orange TEXT on the sawdust band */
  --blaze-lift:#FF711F;   /* orange TEXT on raised dark cards #1B3A2E */
  --rule:rgba(18,39,31,.14);
  --rule-dk:rgba(230,235,230,.16);

  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --util:"Barlow Condensed",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --gap:clamp(2rem,5vw,4rem);
  --sec:clamp(3.5rem,9vw,7rem);
  --notch:26px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--fog); color:var(--pine);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.115rem); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video { display:block; max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--blaze); outline-offset:3px; }
.skip {
  position:absolute; left:-9999px; top:0; background:var(--blaze); color:var(--pine);
  padding:.7rem 1.1rem; z-index:300; font-family:var(--display); text-transform:uppercase;
}
.skip:focus { left:.5rem; top:.5rem; }

.wrap { width:min(1220px,100%); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow { width:min(860px,100%); }

h1,h2,h3,h4 { font-family:var(--display); text-transform:uppercase; letter-spacing:-.022em; line-height:.96; margin:0; }
h1 { font-size:clamp(2.5rem,8vw,5.4rem); }
h2 { font-size:clamp(1.75rem,4.2vw,2.9rem); }
h3 { font-size:clamp(1.2rem,2.4vw,1.5rem); }
p { margin:0 0 1.1rem; }
p:last-child { margin-bottom:0; }

/* --- eyebrow + wedge motif --- */
.eyebrow {
  font-family:var(--util); text-transform:uppercase; letter-spacing:.2em;
  font-size:.82rem; font-weight:600; color:var(--moss); margin:0 0 1rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before {
  content:""; width:0; height:0; flex:none;
  border-left:9px solid var(--blaze); border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.dark .eyebrow { color:var(--sawdust); }


/* --- buttons --- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--display); text-transform:uppercase; font-size:1rem; letter-spacing:-.01em;
  padding:.95rem 1.5rem; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn--blaze { background:var(--blaze); color:var(--pine); }
.btn--blaze:hover { background:var(--blaze-2); }
.btn--pine { background:var(--pine); color:var(--fog); }
.btn--pine:hover { background:var(--pine-2); }
.btn--ghost { border-color:rgba(230,235,230,.45); color:var(--fog); }
.btn--ghost:hover { background:var(--fog); color:var(--pine); border-color:var(--fog); }
.btn--outline { border-color:var(--pine); color:var(--pine); }
.btn--outline:hover { background:var(--pine); color:var(--fog); }
.btns { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* --- ticker --- */
.ticker { background:var(--blaze); color:var(--pine); overflow:hidden; border-bottom:2px solid var(--pine); }
.ticker__track { display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker__group { display:flex; flex:none; }
.ticker span {
  font-family:var(--util); text-transform:uppercase; letter-spacing:.16em; font-weight:600;
  font-size:.83rem; padding:.5rem 0; white-space:nowrap;
}
.ticker span::after { content:"◣"; margin:0 1.4rem; opacity:.55; font-size:.7em; vertical-align:middle; }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* --- header --- */
.nav { position:sticky; top:0; z-index:80; background:var(--pine); color:var(--fog); border-bottom:1px solid var(--rule-dk); }



.nav__links { display:none; margin-left:auto; gap:1.4rem; align-items:center; }
.nav__links a {
  font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-size:.9rem;
  font-weight:600; text-decoration:none; padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav__links a:hover { border-color:var(--blaze); }
.nav__links a[aria-current="page"] { border-color:var(--blaze); color:var(--sawdust); }
.nav__tel {
  margin-left:auto; font-family:var(--display); font-size:clamp(.95rem,3vw,1.15rem);
  text-decoration:none; color:var(--pine); background:var(--blaze); padding:.55rem 1rem; white-space:nowrap;
}
.nav__tel:hover { background:var(--blaze-2); }
.nav__toggle {
  margin-left:.4rem; background:none; border:1px solid var(--rule-dk); color:var(--fog);
  font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-weight:600;
  padding:.55rem .8rem; cursor:pointer; font-size:.82rem;
}
@media (min-width:1060px) {
  .nav__links { display:flex; }
  .nav__tel { margin-left:1.4rem; }
  .nav__toggle { display:none; }
}
.drawer { display:none; background:var(--pine-2); border-bottom:2px solid var(--blaze); }
.drawer[data-open="true"] { display:block; }
.drawer a {
  display:block; padding:.9rem var(--pad); text-decoration:none; border-top:1px solid var(--rule-dk);
  font-family:var(--util); text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--fog);
}
.drawer a:hover { background:var(--pine); color:var(--sawdust); }

/* --- hero --- */
.hero { position:relative; background:var(--pine); color:var(--fog); overflow:hidden; }
.hero__media { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; opacity:.46; filter:saturate(.82) contrast(1.06); }
.hero::after {
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,23,18,.62) 0%,rgba(11,23,18,.30) 42%,rgba(11,23,18,.95) 100%);
}
.hero .wrap { position:relative; z-index:2; padding-block:clamp(4rem,15vh,8.5rem) clamp(3rem,8vh,5.5rem); }
.hero h1 { max-width:15ch; }
.hero h1 em { font-style:normal; color:var(--blaze); }
.hero__lede { max-width:48ch; color:#CFD8D1; font-size:clamp(1.05rem,1rem + .45vw,1.3rem); margin-top:1.5rem; }

/* page banner (interior pages) */
.banner { position:relative; background:var(--pine); color:var(--fog); overflow:hidden; }
.banner img { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:.30; }
.banner::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:linear-gradient(180deg,rgba(11,23,18,.7),rgba(11,23,18,.92)); }
.banner .wrap { position:relative; z-index:2; padding-block:clamp(3rem,9vw,5.5rem); }
.banner p { max-width:52ch; color:#CFD8D1; margin-top:1.1rem; }

/* --- stat row --- */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule-dk); margin-top:clamp(2rem,5vw,3rem); }
@media (min-width:760px) { .stats { grid-template-columns:repeat(4,1fr); } }
.stat { background:var(--pine); padding:1.3rem 1.2rem; }
.stat b { display:block; font-family:var(--display); font-size:clamp(1.5rem,4vw,2.2rem); color:var(--blaze); line-height:1; }
.stat span { font-family:var(--util); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600; color:#AFC0B4; display:block; margin-top:.45rem; }

/* --- sections --- */
section { position:relative; }
.sec { padding-block:var(--sec); }
.dark { background:var(--pine); color:var(--fog); }
.dark p { color:#C6D1C8; }
.sand { background:var(--sawdust); color:var(--pine); }
.head { max-width:46ch; margin-bottom:clamp(2rem,5vw,3.2rem); }
.head p { margin-top:1.1rem; }

/* --- numbered service list --- */
.svc { border-top:1px solid var(--rule); }
.dark .svc { border-color:var(--rule-dk); }
.svc__row {
  display:grid; grid-template-columns:1fr; gap:.6rem 2rem;
  padding-block:clamp(1.6rem,3.5vw,2.4rem); border-bottom:1px solid var(--rule);
}
.dark .svc__row { border-color:var(--rule-dk); }
@media (min-width:880px) { .svc__row { grid-template-columns:5.5rem 15rem 1fr; align-items:start; } }
.svc__num { font-family:var(--display); font-size:1.6rem; color:var(--blaze); line-height:1; }
.svc__body p { margin:0; }
.svc__tags { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.svc__tags li {
  font-family:var(--util); text-transform:uppercase; letter-spacing:.13em; font-size:.76rem; font-weight:600;
  border:1px solid var(--rule); padding:.32rem .7rem; color:var(--moss);
}
.dark .svc__tags li { border-color:var(--rule-dk); color:var(--sawdust); }

/* --- card grid --- */
.cards { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); grid-template-columns:1fr; }
@media (min-width:720px) { .cards--2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:720px) { .cards--3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px) { .cards--3 { grid-template-columns:repeat(3,1fr); } }
.card { background:var(--paper); padding:clamp(1.5rem,3vw,2.2rem); }
.dark .cards { background:var(--rule-dk); border-color:var(--rule-dk); }
.dark .card { background:var(--pine-2); }
.card h3 { margin-bottom:.7rem; }
.card__tag { font-family:var(--util); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:var(--blaze); font-weight:600; display:block; margin-bottom:.6rem; }

/* --- steps --- */
.steps { counter-reset:s; display:grid; gap:1px; background:var(--rule-dk); }
@media (min-width:840px) { .steps { grid-template-columns:repeat(3,1fr); } }
.step { background:var(--pine); padding:clamp(1.6rem,3vw,2.3rem); }
.step::before {
  counter-increment:s; content:"0" counter(s);
  font-family:var(--display); font-size:1.5rem; color:var(--blaze); display:block; margin-bottom:.9rem;
}

/* --- ring seal --- */
.seal { display:grid; gap:var(--gap); grid-template-columns:1fr; align-items:center; }
@media (min-width:880px) { .seal { grid-template-columns:minmax(300px,360px) 1fr; } }
.seal svg { width:100%; height:auto; }
.seal__ring { fill:none; stroke:var(--moss); stroke-width:1.2; }
.seal__ring--hot { stroke:var(--blaze); stroke-width:2; }
.seal__core { fill:var(--blaze); }
.seal__txt { fill:var(--fog); font-family:var(--util); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.creds { list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.creds li {
  font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-size:.84rem; font-weight:600;
  border:1px solid var(--moss); padding:.4rem .85rem; color:var(--sawdust);
}

/* --- split feature --- */
.split { display:grid; gap:var(--gap); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px) { .split { grid-template-columns:1fr 1fr; } }
.split--flip > *:first-child { order:2; }
@media (max-width:899px) { .split--flip > *:first-child { order:0; } }
.split figure { margin:0; }
.split img { width:100%; aspect-ratio:4/3; object-fit:cover; }

/* --- gallery --- */
.grid { display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
@media (min-width:760px) { .grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } }
.shot { padding:0; border:0; background:var(--pine); cursor:pointer; aspect-ratio:1; overflow:hidden; }
.shot img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease, opacity .2s ease; }
.shot:hover img { transform:scale(1.06); opacity:.88; }

.lb { position:fixed; inset:0; z-index:200; background:rgba(8,17,13,.97); display:none; align-items:center; justify-content:center; padding:1rem; }
.lb[data-open="true"] { display:flex; }
.lb img { max-width:100%; max-height:86vh; object-fit:contain; }
.lb__btn { position:absolute; background:none; border:0; color:var(--fog); cursor:pointer; font-family:var(--display); font-size:1.9rem; padding:.6rem 1rem; line-height:1; }
.lb__btn:hover { color:var(--blaze); }
.lb__close { top:.4rem; right:.4rem; }
.lb__prev { left:.2rem; top:50%; transform:translateY(-50%); }
.lb__next { right:.2rem; top:50%; transform:translateY(-50%); }

/* --- video --- */
.film video { width:100%; height:auto; border:2px solid var(--moss); background:#000; }

/* --- area list --- */
.areas { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); grid-template-columns:1fr; }
@media (min-width:640px) { .areas { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .areas { grid-template-columns:repeat(3,1fr); } }
.area { background:var(--paper); padding:1.4rem 1.5rem; }
.area h3 { font-size:1.1rem; margin-bottom:.4rem; }
.area p { margin:0; color:var(--moss); font-size:.95rem; }

/* --- reviews ---
   .rev / .revs / .rev__stars are dormant by design: the reviews page links to
   Facebook rather than reprinting quotes, and these styles exist so real
   reviews can be pasted in using the template in the HTML comment there.
   Do not delete them as "unused". */
.rev { background:var(--paper); border:1px solid var(--rule); padding:clamp(1.5rem,3vw,2.2rem); }
.rev__stars { color:var(--blaze); letter-spacing:.22em; font-size:1rem; margin-bottom:.9rem; }
.rev blockquote { margin:0 0 1.1rem; font-size:1.08rem; }
.rev figcaption { font-family:var(--util); text-transform:uppercase; letter-spacing:.13em; font-size:.82rem; font-weight:600; color:var(--moss); }
.revs { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:820px) { .revs { grid-template-columns:repeat(2,1fr); } }

/* --- CTA band --- */
.cta { background:var(--blaze); color:var(--pine); }
.cta .wrap { padding-block:clamp(2.8rem,7vw,4.5rem); }
.cta h2 { max-width:18ch; }
.cta__tel {
  display:inline-block; font-family:var(--display); font-size:clamp(1.9rem,7vw,3.2rem);
  text-decoration:none; letter-spacing:-.03em; margin-top:1rem; border-bottom:5px solid var(--pine);
}

/* --- prose (privacy) --- */
.prose h2 { font-size:clamp(1.4rem,3vw,1.9rem); margin:2.4rem 0 .9rem; }
.prose h2:first-child { margin-top:0; }
.prose ul { padding-left:1.2rem; }
.prose li { margin-bottom:.4rem; }

/* --- footer --- */
.foot { background:var(--ink); color:#93A698; padding-block:clamp(2.8rem,6vw,4rem); font-size:.94rem; }
.foot__top { display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:840px) { .foot__top { grid-template-columns:1.4fr 1fr 1fr; } }

.foot__h { font-size:.86rem; letter-spacing:.16em; font-family:var(--util); color:var(--sawdust); margin-bottom:.9rem; text-transform:uppercase; font-weight:600; }
.foot ul { list-style:none; margin:0; padding:0; }
.foot li { margin-bottom:.45rem; }
.foot a { color:#C3D0C6; text-decoration:none; }
.foot a:hover { color:var(--blaze); }
.foot__bar { margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-family:var(--util); text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; }

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

/* ==========================================================================
   AUDIT PASS — polish, mobile, motion, print
   ========================================================================== */

/* --- respect notches / home indicators --- */
body { padding-bottom:env(safe-area-inset-bottom); }

/* --- scroll reveal (opt-in, motion-safe) --- */
@media (prefers-reduced-motion:no-preference) {
  .js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
  .js .reveal.is-in { opacity:1; transform:none; }
}

/* --- sticky mobile call bar: the single biggest conversion lever --- */
.callbar {
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--pine); border-top:2px solid var(--blaze);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%); transition:transform .3s ease;
}
.callbar.is-up { transform:none; }
.callbar a {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:56px; text-decoration:none; font-family:var(--display);
  text-transform:uppercase; font-size:1rem; letter-spacing:-.01em;
}
.callbar a:first-child { background:var(--blaze); color:var(--pine); }
.callbar a:last-child { background:var(--pine); color:var(--fog); }
@media (min-width:900px) { .callbar { display:none; } }
@media (max-width:899px) { .foot { padding-bottom:calc(4.5rem + env(safe-area-inset-bottom)); } }

/* --- hero: guard against CLS, tune small screens --- */
.hero .wrap { min-height:clamp(0px,42vh,520px); display:flex; flex-direction:column; justify-content:flex-end; }
@media (max-width:640px) {
  .hero__lede { font-size:1.05rem; }
  .btns .btn { flex:1 1 100%; justify-content:center; }
  .stats { grid-template-columns:1fr 1fr; }
}

/* --- service rows: hover affordance on desktop --- */
@media (hover:hover) and (min-width:880px) {
  .svc__row { transition:background .2s ease; margin-inline:calc(var(--pad) * -.4); padding-inline:calc(var(--pad) * .4); }
  .svc__row:hover { background:rgba(255,106,19,.06); }
  .dark .svc__row:hover { background:rgba(255,106,19,.1); }
}
@media (max-width:879px) {
  .svc__num { font-size:1.15rem; margin-bottom:-.2rem; }
  .svc__row h3 { font-size:1.3rem; }
}

/* --- gallery: varied rhythm on desktop, tight grid on mobile --- */
@media (min-width:900px) {
  .grid--feature { grid-auto-flow:dense; }
  .grid--feature .shot:nth-child(9n+1) { grid-column:span 2; grid-row:span 2; aspect-ratio:1; }
  .grid--feature .shot:nth-child(9n+6) { grid-column:span 2; aspect-ratio:2/1; }
}
@media (max-width:520px) { .grid { grid-template-columns:repeat(2,1fr); gap:4px; } }

/* --- lightbox: keep controls clear of the image on phones --- */
.lb { flex-direction:column; }
.lb__btn { background:rgba(11,23,18,.72); border-radius:2px; }
@media (max-width:700px) {
  .lb img { max-height:74vh; }
  .lb__prev { left:auto; right:calc(50% + 2.6rem); top:auto; bottom:1.2rem; transform:none; }
  .lb__next { right:calc(50% - 2.6rem); top:auto; bottom:1.2rem; transform:none; }
  .lb__btn { min-width:52px; min-height:52px; }
}

/* --- tap targets --- */
@media (pointer:coarse) {
  .nav__links a, .foot a, .drawer a { min-height:44px; display:flex; align-items:center; }
  .foot li a { min-height:38px; }
}

/* --- social --- */
.social { display:flex; gap:.6rem; margin-top:1.4rem; }
.social a {
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--rule-dk); color:var(--sawdust); text-decoration:none;
}
.social a:hover { background:var(--blaze); color:var(--pine); border-color:var(--blaze); }
.social svg { width:20px; height:20px; fill:currentColor; }

/* --- misc polish --- */
.banner h1 { max-width:17ch; font-size:clamp(2.2rem,5.4vw,4.1rem); }
.split img { border:1px solid var(--rule); }
.dark .split img { border-color:var(--rule-dk); }
.cards--3 > .card:only-child { grid-column:1/-1; }
.cta__tel:hover { opacity:.78; }
hr.rule { border:0; border-top:1px solid var(--rule); margin:clamp(2.5rem,6vw,4rem) 0; }
.dark hr.rule { border-color:var(--rule-dk); }

/* --- print --- */
@media print {
  .ticker,.nav,.drawer,.callbar,.lb,.cta .btns,.social,video { display:none !important; }
  body { background:#fff; color:#000; font-size:11pt; }
  .dark,.sand,.cta,.foot,.banner,.hero { background:#fff !important; color:#000 !important; }
  .hero::after,.banner::after,.hero__media { display:none !important; }
  .dark p,.foot { color:#000 !important; }
  a[href^="tel:"]::after { content:" (" attr(href) ")"; }
  .grid,.cards,.svc { break-inside:avoid; }
}

/* --- logo lockup: emblem is 2.57:1, sized for the nav --- */

/* --- full logo restored: square-ish mark needs vertical room --- */

/* --- logo served at display size; no browser downscaling of a 900px asset --- */

/* --- logo scale: one variable controls the header mark everywhere --- */

/* --- accessibility: orange text on light backgrounds needs the darker ink ---
   #FF6A13 is only 2.9:1 on white. It stays for fills; text switches to --blaze-ink. */
.card__tag { color:var(--blaze-ink); }
.dark .card__tag { color:var(--blaze-lift); }
.svc__num { color:var(--blaze-ink); }
.dark .svc__num { color:var(--blaze); }
.sand .card__tag, .sand .svc__num { color:var(--blaze-sand); }
.eyebrow::before { border-left-color:var(--blaze-ink); }
.dark .eyebrow::before, .cta .eyebrow::before { border-left-color:var(--blaze); }
.sand .eyebrow::before { border-left-color:var(--blaze-sand); }

/* --- header hardening -------------------------------------------------
   The logo is an SVG; give it an explicit aspect-ratio so a browser that
   ignores intrinsic sizing can still reserve the right box. And make sure
   nothing in the header row can push the phone button or the menu button
   off-screen (body has overflow-x:hidden, so anything pushed out becomes
   unreachable rather than scrollable). */
.nav__brand { min-width:0; flex:0 1 auto; overflow:hidden; }

.nav__tel, .nav__toggle { flex:none; }
@media (max-width:400px) {
  .nav__tel { font-size:.9rem; padding:.5rem .7rem; }
  .nav__toggle { padding:.5rem .6rem; }
}

/* --- menu: native <details>, no JavaScript required -------------------
   Previously a JS-only toggle. If the script failed to run, the menu was
   dead — and since .reveal also depended on JS, half the page vanished
   with it. Content and navigation must not depend on scripting. */
.menu { position:static; }
.menu > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center;
}
.menu > summary::-webkit-details-marker { display:none; }
.menu[open] > summary::after { content:""; }
.drawer {
  position:absolute; left:0; right:0; top:100%; z-index:79;
  display:block; background:var(--pine-2); border-bottom:2px solid var(--blaze);
  max-height:calc(100vh - 100%); overflow-y:auto;
}
.menu[open] > summary { background:var(--blaze); color:var(--pine); border-color:var(--blaze); }
@media (min-width:1060px) { .menu { display:none; } }

/* ======================================================================
   MOBILE PASS 2
   ====================================================================== */

/* 1. dynamic viewport units. 100vh on a phone is measured against the
   *largest* viewport, so anything sized with it is taller than the screen
   while the URL bar is showing. dvh tracks the real height. */
@supports (height:100dvh) {
  .hero .wrap { min-height:clamp(0px,42dvh,520px); }
  .lb img { max-height:80dvh; }
  .drawer { max-height:calc(100dvh - 100%); }
}
@media (max-width:700px) {
  .lb img { max-height:64dvh; }
}

/* 2. anchor targets must clear the sticky header, or a jump link lands
   with the heading hidden behind the nav. */
:target { scroll-margin-top:calc(var(--logo-h) + 60px); }
[id] { scroll-margin-top:calc(var(--logo-h) + 60px); }

/* 3. reclaim vertical space — 20% of a phone screen was fixed chrome */
@media (max-width:700px) {
  .ticker span { font-size:.72rem; padding:.35rem 0; }
  .callbar a { min-height:52px; font-size:.95rem; }
  .hero .wrap { padding-block:2.75rem 2.25rem; }
  .sec { padding-block:2.75rem; }
  :root { --pad:1.1rem; }
}

/* 4. touch feel */
* { -webkit-tap-highlight-color:rgba(255,106,19,.24); }
a, button, summary { touch-action:manipulation; }

/* 5. small-screen typography — uppercase display faces need looser
   tracking as they shrink, not tighter */
@media (max-width:520px) {
  h1 { letter-spacing:-.01em; }
  h2 { letter-spacing:-.005em; }
  .eyebrow { letter-spacing:.14em; font-size:.76rem; }
  .hero h1 { max-width:none; }
  .banner h1 { max-width:none; }
  .head, .hero__lede, .banner p { max-width:none; }
  .svc__tags li { font-size:.72rem; padding:.28rem .55rem; }
  .creds li { font-size:.78rem; }
  .stat b { font-size:1.5rem; }
}

/* 6. no accidental sideways scroll from long unbroken strings */
body { overflow-wrap:break-word; }
h1, h2, h3 { overflow-wrap:break-word; hyphens:none; }

/* 7. gallery: 3-up reads better than 2-up on a phone once thumbs are small */
@media (max-width:520px) {
  .grid { grid-template-columns:repeat(3,1fr); gap:3px; }
}

/* 8. the drawer should feel like a sheet, not a dropdown */
@media (max-width:1059px) {
  .drawer a { padding:.95rem var(--pad); font-size:.95rem; }
  .menu[open] > summary::before {
    content:""; position:fixed; inset:0; z-index:-1;
    background:rgba(11,23,18,.45);
  }
}

/* ======================================================================
   LARGE-SCREEN DENSITY
   Type was capped low, so on a wide monitor the headline stayed small
   while the container stayed narrow — the page read as mostly empty.
   ====================================================================== */
@media (min-width:1200px) {
  .wrap { width:min(1320px,100%); }
  h1 { font-size:clamp(2.5rem,7vw,6.6rem); }
  h2 { font-size:clamp(1.9rem,3.4vw,2.9rem); }   /* 46px cap: headings sit on one or two lines */
  .hero h1 { max-width:13ch; }
  .hero__lede { max-width:54ch; font-size:1.35rem; }
  .banner h1 { max-width:16ch; font-size:clamp(2.2rem,4.6vw,4.1rem); }
  .banner p { max-width:58ch; font-size:1.2rem; }
  .head { max-width:52ch; }
  .btn { font-size:1.1rem; padding:1.05rem 1.7rem; }
  .stat b { font-size:2.6rem; }
  .svc__row { grid-template-columns:6.5rem 18rem 1fr; }
  .svc__row h3 { font-size:1.7rem; }
}
@media (min-width:1600px) {
  .wrap { width:min(1440px,100%); }
  .hero .wrap { padding-block:clamp(5rem,13vh,9rem) clamp(3rem,7vh,5rem); }
}

/* --- storm band: full-bleed photo behind text.
   The markup was restored without this block, so the image rendered inline at
   natural size instead of as a background layer. --- */
.band { position:relative; background:var(--pine); color:var(--fog); overflow:hidden; }
.band__img { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; }
.band::after {
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(11,23,18,.93),rgba(11,23,18,.55));
}
.band .wrap { position:relative; z-index:2; padding-block:clamp(3rem,8vw,5rem); }
.band h2 { font-size:clamp(1.6rem,4vw,2.6rem); max-width:22ch; }
.band p { max-width:50ch; color:#C9D3CA; margin-top:1.1rem; }
.band .eyebrow { color:var(--sawdust); }
.band .eyebrow::before { border-left-color:var(--blaze); }

/* --- text over photographs -------------------------------------------
   .hero and .banner sit on dark imagery but carry no .dark class, so the
   eyebrow fell back to --moss: 2.03:1 against the overlay. Unreadable. */
.hero .eyebrow,
.banner .eyebrow { color:var(--sawdust); }
.hero .eyebrow::before,
.banner .eyebrow::before { border-left-color:var(--blaze); }

/* photographs vary underneath, so give overlaid text a little help */
.hero h1, .hero__lede, .hero .eyebrow,
.banner h1, .banner p, .banner .eyebrow,
.band h2, .band p, .band .eyebrow {
  text-shadow:0 1px 14px rgba(8,17,13,.55);
}
.hero__media img { opacity:.42; }
.hero::after {
  background:linear-gradient(180deg,rgba(11,23,18,.72) 0%,rgba(11,23,18,.42) 40%,rgba(11,23,18,.96) 100%);
}
.banner img { opacity:.30; }

/* ======================================================================
   HEADER & LOGO — single authoritative block.
   These selectors had been declared six times across successive patches,
   which is how a stray 44px override survived and broke the logo scale.
   Nothing below this point should redeclare them.
   ====================================================================== */
:root { --logo-h:84px; }
@media (max-width:1059px) { :root { --logo-h:64px; } }
@media (max-width:700px)  { :root { --logo-h:48px; } }

.nav .wrap { display:flex; flex-wrap:nowrap; align-items:center; gap:1rem;
  min-height:calc(var(--logo-h) + 26px); }
@media (max-width:700px) { .nav .wrap { min-height:calc(var(--logo-h) + 16px); } }
@media (min-width:1200px) { .nav .wrap { min-height:calc(var(--logo-h) + 18px); } }

.nav__brand { display:flex; align-items:center; gap:.7rem; text-decoration:none;
  min-width:0; flex:0 1 auto; overflow:hidden; }
.nav__logo { height:var(--logo-h); width:auto; aspect-ratio:4716 / 3732;
  max-width:44vw; object-fit:contain; }
.foot__logo { width:min(340px,82%); height:auto; }
.nav__tel, .nav__toggle { flex:none; }

.drawer { position:absolute; left:0; right:0; top:100%; z-index:79; display:block;
  background:var(--pine-2); border-bottom:2px solid var(--blaze);
  max-height:calc(100dvh - 100%); overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* --- the business card is a tall portrait graphic, not a photo.
   The 4/3 crop the split layout applies was cutting 65% of it away. --- */
.figure--card { display:flex; justify-content:center; background:var(--pine); padding:1.5rem; }
.figure--card img { aspect-ratio:auto; width:auto; max-height:520px; object-fit:contain; border:0; }

/* --- Google rating summary panel ------------------------------------- */
.grate {
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1rem,4vw,2.5rem);
  background:var(--paper); border:1px solid var(--rule);
  padding:clamp(1.4rem,3.5vw,2.2rem);
}
.grate__score { display:flex; align-items:baseline; gap:.5rem; }
.grate__num {
  font-family:var(--display); font-size:clamp(2.6rem,7vw,3.6rem); line-height:1;
  letter-spacing:-.03em;
}
.grate__out { font-family:var(--util); text-transform:uppercase; letter-spacing:.14em;
  font-size:.85rem; font-weight:600; color:var(--moss); }
.grate__stars { color:var(--blaze); font-size:1.35rem; letter-spacing:.16em; line-height:1; }
.grate__meta { font-family:var(--util); text-transform:uppercase; letter-spacing:.13em;
  font-size:.82rem; font-weight:600; color:var(--moss); margin-top:.5rem; }
.grate__right { margin-left:auto; }
@media (max-width:640px) { .grate__right { margin-left:0; width:100%; } }

/* what customers mention most — pulled from the Google listing */
.themes { list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.themes li {
  font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  font-weight:600; border:1px solid var(--rule); padding:.36rem .75rem; color:var(--moss);
  background:var(--paper);
}
.themes li b { color:var(--blaze-ink); font-weight:600; margin-left:.35rem; }
.rev__src { display:block; margin-top:.5rem; font-family:var(--util); text-transform:uppercase;
  letter-spacing:.13em; font-size:.72rem; color:var(--moss); opacity:.75; }