/* ===========================================================================
   Taylor's Tree Experts LLC — taylorstreeexpertsllc.com

   Brief: modern, professional, white / orange / black only. The logo is a
   rugged badge — a pine treeline over a heavy slab wordmark over a chainsaw and
   a ground-out stump, keylined in safety orange. So the site borrows the badge's
   three ingredients — a black spine, a clean white field, and orange used only
   for action — but presents them in a lighter, more contemporary layout than a
   pure poster: airy white sections, soft-edged cards, confident display type.

   PALETTE — sampled from the supplied logo, not guessed:
     --orange  #FC602A  modal colour of the badge keyline + wordmark (tools/probe)
     white     #FFFFFF  the wordmark's "TAYLOR'S"
     black     the badge ground
   Every foreground/background pair is checked in tools/contrast.py and passes
   WCAG AA at its size. Orange is 3.07:1 on white — fine for a 5px rule or a
   large control, never for small text; small orange text uses --orange-ink.
   Every solid orange control carries a BLACK label (6.45:1), never white (3.5).
   =========================================================================== */

:root {
  --black:      #0A0A0A;
  --coal:       #141414;   /* dark sections */
  --coal-2:     #1E1E1E;   /* raised dark: form fields, faq rows, dark cards */
  --coal-3:     #262626;   /* hairlines on dark */
  --white:      #FFFFFF;
  --bone:       #F7F5F1;   /* warm off-white alternate ground */
  --bone-2:     #EDEAE3;

  --orange:     #FC602A;   /* sampled — fills, rules, large marks */
  --orange-hi:  #FF7A45;   /* hover */
  --orange-ink: #BE3F0C;   /* orange text on light — 5.38:1 on white */

  --ink:        #16130F;   /* headings on light — 18.5:1 */
  --body:       #3B3A37;   /* body copy on light — 11.4:1 */
  --body-2:     #5E5C57;   /* muted body on light — 6.9:1 */
  --mist:       #C9C9C6;   /* body copy on dark — 11.1:1 */
  --dim:        #8E8E8A;   /* de-emphasised on dark — 5.6:1 */

  --line-lt:    #E4E0D6;
  --line-dk:    rgba(255,255,255,.10);
  --focus:      #16130F;   /* re-declared to orange on dark grounds */

  --dsp:  'Saira Condensed', 'Arial Narrow', 'Oswald', Impact, sans-serif;
  --ui:   'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap:  1180px;
  --pad:   1.4rem;
  --head:  106px;          /* utility bar + sticky header, desktop */
  --r:     14px;           /* card radius — the modern touch */
  --r-sm:  9px;
  --shadow: 0 18px 44px -22px rgba(10,10,10,.42);
  --shadow-sm: 0 8px 20px -12px rgba(10,10,10,.34);
}

/* ------------------------------------------------------------------ base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
[id] { scroll-margin-top: calc(var(--head) + 16px); }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* contain the off-canvas drawer without breaking sticky */
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--dsp);
  font-weight: 800;                 /* Saira Condensed — heavy is the display weight */
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .95;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: .92; }
h2 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: .01em; font-weight: 700; }
h4 { font-size: 1.05rem; letter-spacing: .03em; font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 880px; }

.section { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.section.on-dark { background: var(--coal); color: var(--mist); --focus: var(--orange); }
.section.on-bone { background: var(--bone); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }

/* section heads ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--orange-ink);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
}
.on-dark .eyebrow { color: var(--orange); }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--orange); display: inline-block; }
.sec-head { max-width: 640px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { }
.sec-head p { margin: 1rem 0 0; font-size: 1.08rem; color: var(--body-2); }
.on-dark .sec-head p { color: var(--mist); }

/* buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ui); font-weight: 700; font-size: 1rem;
  letter-spacing: .01em; line-height: 1;
  padding: .95rem 1.5rem; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--orange); color: #0A0A0A; }
.btn-primary:hover { background: var(--orange-hi); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-lt); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange-ink); }
.on-dark .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn-lg { padding: 1.1rem 1.9rem; font-size: 1.06rem; }
.btn-block { width: 100%; }

/* ============================================================ header / nav === */
.util {
  background: var(--black); color: var(--mist);
  font-size: .84rem; letter-spacing: .01em;
}
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding-block: .3rem; }
.util a { color: var(--mist); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.util a:hover { color: var(--white); }
.util-tags { display: flex; gap: 1.4rem; }
.util-tags span { display: inline-flex; align-items: center; gap: .4rem; }
.util-tags svg { width: 15px; height: 15px; fill: var(--orange); }
.util-phones { display: flex; gap: 1.2rem; }
.util-phones .lbl { color: var(--dim); }
/* the trust badges + numbers repeat in the header, hero and call bar, so the
   top strip just adds clutter on a phone */
/* on phones the top strip becomes a slim, centered trust line (ISA + BBB) */
@media (max-width: 760px) {
  .util .wrap { justify-content: center; }
  .util-phones { display: none; }
  .util-tags { gap: 1rem; font-size: .72rem; white-space: nowrap; }
  .util-tags span:last-child { display: none; }
  .util-tags svg { width: 13px; height: 13px; }
}
@media (max-width: 430px) { .util-tags { font-size: .68rem; gap: .8rem; } }

/* Solid header (no backdrop-filter — it was creating a containing block that
   trapped the fixed mobile drawer inside the header's own box). */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 3px solid var(--orange);   /* brand accent line */
}
.header .wrap { display: flex; align-items: center; gap: 1.4rem; min-height: 90px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 72px; width: auto; display: block; }
@media (max-width: 960px) { .brand img { height: 80px; } }
@media (max-width: 380px) { .brand img { height: 76px; } .mbar-trust { font-size: .71rem; } .mbar-cta { font-size: .78rem; padding: .48rem .7rem; } }

/* logo left · links directly after it · CTA pushed hard right */
#nav { flex: 1; display: flex; align-items: center; gap: 1.6rem; }
.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem;
  padding: .5rem 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px;
  background: var(--orange); transition: right .2s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="true"]::after { right: 0; }
.nav-cta { margin-left: auto; display: inline-flex; align-items: center; gap: .7rem; }

.burger {
  display: none; width: 48px; height: 44px; border: 1px solid var(--line-lt);
  border-radius: var(--r-sm); background: var(--white); cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.burger svg { width: 24px; height: 24px; fill: var(--ink); }
.nav-close, .scrim { display: none; }
/* mobile-only bits, hidden on desktop */
.hdr-call, .drawer-logo, .drawer-extra, .mbar { display: none; }

/* mobile drawer */
@media (max-width: 960px) {
  /* Two-row header: an orange trust/CTA bar, then [phone icon · centred logo · menu]. */
  .util { display: none; }
  .mbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    background: var(--orange); padding: .5rem var(--pad); }
  .mbar-trust { color: #0A0A0A; font-weight: 700; font-size: .8rem; letter-spacing: .01em; line-height: 1.2; }
  .mbar-cta { flex: none; background: #0A0A0A; color: #fff; font-weight: 700; font-size: .84rem;
    letter-spacing: .01em; padding: .52rem .95rem; border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; }
  .mbar-cta:hover { background: #262626; }

  .header .wrap { position: relative; justify-content: space-between; gap: .6rem; min-height: 96px; }
  .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .hdr-call { display: inline-flex; align-items: center; justify-content: center; flex: none; margin: 0;
    width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--orange); text-decoration: none; }
  .hdr-call svg { width: 22px; height: 22px; fill: #0A0A0A; }
  .burger { display: inline-flex; margin: 0; }

  #nav {
    position: fixed; inset: 0 0 0 auto; width: min(90vw, 360px);
    background: linear-gradient(180deg, #2b2926 0%, #1c1b18 100%); color: var(--white);
    transform: translateX(100%); transition: transform .28s ease;
    display: flex; flex-direction: column; padding: 3.6rem 1.6rem 2rem; z-index: 80;
    gap: 0; --focus: var(--orange); overflow-y: auto;
    box-shadow: -14px 0 44px rgba(0,0,0,.45);
  }
  #nav.is-open { transform: translateX(0); }
  #nav > * { position: relative; z-index: 1; }
  /* subtle brand glow at the foot of the drawer */
  #nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0;
    background: radial-gradient(130% 90% at 50% 135%, rgba(252,96,42,.20), transparent 68%); pointer-events: none; }

  .drawer-logo { display: block; height: 84px; width: auto; margin: 0 auto 1.6rem; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-links a { color: #fff; padding: 1rem .2rem; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 1.18rem; font-weight: 700; }
  .nav-links a::after { display: none; }
  .nav-cta { margin: 1.3rem 0 0; flex-direction: column; align-items: stretch; gap: .7rem; width: 100%; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .nav-cta .btn-ghost { display: none; }        /* the phone lines below replace the generic Call */

  .drawer-extra { display: block; margin-top: 1.7rem; }
  .drawer-label { color: var(--mist); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; margin: 0 0 .5rem; }
  .drawer-phone { display: flex; flex-direction: column; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.14); text-decoration: none; }
  .drawer-phone b { font-family: var(--dsp); font-weight: 800; font-size: 1.55rem; line-height: 1; color: var(--orange); letter-spacing: .02em; }
  .drawer-phone span { color: var(--mist); font-size: .82rem; margin-top: .18rem; }
  .drawer-trust { margin-top: 1.5rem; display: grid; gap: .55rem; }
  .drawer-trust li { color: var(--mist); font-size: .86rem; display: flex; align-items: center; gap: .55rem; }
  .drawer-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }

  .nav-close {
    display: inline-flex; position: absolute; top: 1.05rem; right: 1.05rem;
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
    background: rgba(255,255,255,.05); cursor: pointer; align-items: center; justify-content: center;
  }
  .nav-close svg { width: 20px; height: 20px; fill: var(--white); }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70; }
  .scrim[hidden] { display: none; }
}

/* ==================================================================== hero === */
.hero {
  position: relative; overflow: hidden; background: var(--coal); color: var(--white);
  isolation: isolate; --focus: var(--orange);
}
.hero-photo {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center 42%;
}
/* on a narrow portrait crop the worker sits left-of-centre, so pull the focal
   point left to keep him in frame instead of cropping to the bare stump */
@media (max-width: 760px) { .hero-photo { background-position: 26% 38%; } }
/* centered hero: photo carries it, orange pulled back to the one CTA. The scrim
   is flat top/bottom bands (no side wash) so centered white type stays legible. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.34) 34%, rgba(8,8,8,.44) 62%, rgba(8,8,8,.82) 100%),
    rgba(8,8,8,.24);
}
/* ambient motion (ANIMATION #4: drifting sawdust) + ring watermark, behind text */
.hero-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-rings { position: absolute; top: 50%; left: 50%; width: min(760px, 92vw); height: auto;
  transform: translate(-50%, -50%); opacity: .5; }
.hero-rings svg { width: 100%; height: auto; display: block; }
.hero .wrap { position: relative; min-height: min(86vh, 760px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding-top: clamp(3.6rem, 8vw, 6rem); padding-bottom: clamp(3.6rem, 8vw, 6rem); }
.hero-inner { max-width: 780px; }
.hero-loc {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .8rem;
  color: var(--orange); margin-bottom: 1.2rem;
}
.hero-loc::before, .hero-loc::after { content: ""; width: 30px; height: 2px; background: var(--orange); opacity: .8; }
.hero h1 { color: var(--white); text-shadow: 0 2px 34px rgba(0,0,0,.55); }
.hero-lede { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: #E7E6E2; margin: 1.4rem auto 2rem;
  max-width: 46ch; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; }
.hero-phone { color: #fff; font-weight: 500; font-size: 1.05rem; text-decoration: none; }
.hero-phone b { font-family: var(--dsp); font-weight: 800; color: #fff; font-size: 1.6rem;
  letter-spacing: .02em; margin-left: .4rem; vertical-align: -2px; }
.hero-phone svg { width: 17px; height: 17px; fill: var(--orange); vertical-align: -2px; margin-right: .2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 2.4rem; justify-content: center; }
.hero-trust li { font-size: .9rem; letter-spacing: .04em; color: #D9D5CD; position: relative; }
.hero-trust li + li::before { content: ""; position: absolute; left: -.85rem; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: var(--orange); transform: translateY(-50%); }

/* hero ambient: drifting sawdust flecks (subtle over the photo) */
.motes { position: absolute; inset: 0; }
.mote {
  position: absolute; top: -6%; width: 6px; height: 6px; border-radius: 40%;
  background: var(--orange); opacity: 0; will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .mote { animation: drift linear infinite; }
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .55; }
  92%  { opacity: .45; }
  100% { transform: translate(var(--dx, 30px), 116vh) rotate(360deg); opacity: 0; }
}

/* ============================================================= proof band === */
.proof { background: var(--black); color: var(--white); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--coal-3); }
.proof-item {
  background: var(--black); padding: 1.5rem 1.4rem; display: flex; gap: .9rem; align-items: flex-start;
}
.proof-item svg { width: 30px; height: 30px; fill: var(--orange); flex: none; margin-top: 2px; }
.proof-item b { display: block; font-family: var(--dsp); font-weight: 800; text-transform: uppercase; font-size: 1.28rem; letter-spacing: .01em; color: var(--white); line-height: 1; margin-bottom: .3rem; }
.proof-item span { font-size: .9rem; color: var(--mist); }
.proof-item.urgent b { color: var(--orange); }
@media (max-width: 860px) { .proof .wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .proof .wrap { grid-template-columns: 1fr; } }

/* ================================================================ services === */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc {
  background: var(--white); border: 1px solid var(--line-lt); border-radius: var(--r);
  padding: 1.7rem 1.6rem 1.75rem; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .24s ease; }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.svc:hover::before { transform: scaleY(1); }
.svc-ic { width: 52px; height: 52px; border-radius: 12px; background: #FFF1EB; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.svc-ic svg { width: 28px; height: 28px; fill: var(--orange-ink); }
.svc h3 { margin-bottom: .55rem; }
.svc p { margin: 0; color: var(--body-2); font-size: .98rem; }
.svc.urgent { border-color: var(--orange); }
.svc.urgent .svc-ic { background: var(--orange); }
.svc.urgent .svc-ic svg { fill: #0A0A0A; }
.svc-tag { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0A0A0A; background: var(--orange); padding: .25rem .5rem; border-radius: 5px; }

/* ============================================================== stats band === */
/* ANIMATION #7 — count-up trust stats */
.stats { background: var(--coal); color: var(--white); position: relative; overflow: hidden; --focus: var(--orange); }
.stats::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 20%, rgba(252,96,42,.14), transparent 60%); pointer-events: none; }
.stats .wrap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; }
.stat { padding: .6rem; }
.stat .num { font-family: var(--dsp); font-weight: 800; font-size: clamp(2.8rem, 6vw, 4.1rem); line-height: 1; color: var(--orange); letter-spacing: .01em; white-space: nowrap; }
.stat .lbl { margin-top: .55rem; font-size: .92rem; color: var(--mist); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 720px) { .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }

/* ======================================================= canopy reshape === */
/* ANIMATION #2 — the trimming reshape. Two-column: copy + SVG scene. */
.reshape-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .reshape-grid { grid-template-columns: 1fr; } }
.reshape-steps { margin-top: 1.6rem; display: grid; gap: 1rem; }
.reshape-step { display: flex; gap: .95rem; align-items: flex-start; }
.reshape-step .n { font-family: var(--dsp); font-size: 1.15rem; color: #0A0A0A; background: var(--orange); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.reshape-step b { color: var(--ink); display: block; margin-bottom: .1rem; }
.reshape-step p { margin: 0; color: var(--body-2); font-size: .96rem; }
.reshape-stage {
  background: var(--coal); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 0; overflow: hidden; aspect-ratio: 4 / 3; position: relative;
}
.reshape-stage svg { width: 100%; height: 100%; display: block; }

/* Canopy reshape (drives off .is-playing): three little chainsaws swoop in,
   trim around the crown while the overgrown silhouette crossfades to the shaped
   one, then swoop away. Static/reduced-motion fallback: the shaped tree. */
.canopy .crown-shaped { opacity: 0; }
.canopy .mini-saw, .canopy .clip-bit { transform-box: fill-box; transform-origin: center; opacity: 0; }
/* reduced motion / no animation: rest on the finished, shaped tree */
@media (prefers-reduced-motion: reduce) {
  .canopy .crown-wild { opacity: 0; }
  .canopy .crown-shaped { opacity: 1; }
}
.reshape-stage.is-playing .crown-wild   { animation: crownOut 4.2s ease forwards; }
.reshape-stage.is-playing .crown-shaped { animation: crownIn  4.2s ease forwards; }
.reshape-stage.is-playing .saw1 { animation: sawTrim1 4.2s ease-in-out forwards; }
.reshape-stage.is-playing .saw2 { animation: sawTrim2 4.2s ease-in-out forwards; }
.reshape-stage.is-playing .saw3 { animation: sawTrim3 4.2s ease-in-out forwards; }
.reshape-stage.is-playing .clip-bit    { animation: clipFall 1.2s ease-in forwards; animation-delay: 1s; }
.reshape-stage.is-playing .clip-bit.c2 { animation-delay: 1.5s; }
.reshape-stage.is-playing .clip-bit.c3 { animation-delay: 2s; }
@keyframes crownOut { 0%, 28% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes crownIn  { 0%, 32% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes clipFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 20% { opacity: .95; } 100% { opacity: 0; transform: translateY(58px) rotate(40deg); } }
@keyframes sawTrim1 {
  0%   { opacity: 0; transform: translate(-180px,-135px) rotate(10deg) scale(.7); }
  12%  { opacity: 1; }
  22%  { transform: translate(0,0) rotate(10deg) scale(1); }
  30%  { transform: translate(-5px,4px) rotate(2deg); }
  40%  { transform: translate(4px,-3px) rotate(17deg); }
  50%  { transform: translate(-4px,3px) rotate(5deg); }
  60%  { transform: translate(3px,-2px) rotate(13deg); }
  72%  { opacity: 1; transform: translate(0,0) rotate(10deg); }
  100% { opacity: 0; transform: translate(-190px,-140px) rotate(8deg) scale(.7); }
}
@keyframes sawTrim2 {
  0%   { opacity: 0; transform: translate(185px,-130px) rotate(180deg) scale(.7); }
  14%  { opacity: 1; }
  24%  { transform: translate(0,0) rotate(180deg) scale(1); }
  32%  { transform: translate(6px,4px) rotate(190deg); }
  42%  { transform: translate(-4px,-3px) rotate(171deg); }
  52%  { transform: translate(5px,3px) rotate(186deg); }
  62%  { transform: translate(-3px,-2px) rotate(177deg); }
  74%  { opacity: 1; transform: translate(0,0) rotate(180deg); }
  100% { opacity: 0; transform: translate(195px,-135px) rotate(182deg) scale(.7); }
}
@keyframes sawTrim3 {
  0%   { opacity: 0; transform: translate(0,-160px) rotate(90deg) scale(.7); }
  16%  { opacity: 1; }
  26%  { transform: translate(0,0) rotate(90deg) scale(1); }
  34%  { transform: translate(-4px,5px) rotate(83deg); }
  44%  { transform: translate(4px,-4px) rotate(97deg); }
  54%  { transform: translate(-3px,4px) rotate(87deg); }
  64%  { transform: translate(2px,-3px) rotate(93deg); }
  76%  { opacity: 1; transform: translate(0,0) rotate(90deg); }
  100% { opacity: 0; transform: translate(0,-170px) rotate(90deg) scale(.7); }
}
.reshape-tag {
  position: absolute; bottom: 12px; left: 12px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
  background: rgba(10,10,10,.6); padding: .3rem .6rem; border-radius: 6px;
}

/* ================================================================= work / BA === */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 820px) { .ba-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.ba {
  position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  --p: 50%; background: var(--coal); user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.ba-frame { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
/* AFTER is the base layer; BEFORE is clipped over the top of it, from the left */
.ba-after { z-index: 1; }
.ba-before { z-index: 2; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba-tag {
  position: absolute; top: 10px; z-index: 3; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(10,10,10,.66); padding: .28rem .55rem; border-radius: 6px;
}
.ba-tag.before { left: 10px; }
.ba-tag.after { right: 10px; }
.ba-divider { position: absolute; top: 0; bottom: 0; z-index: 4; left: var(--p); width: 3px; background: var(--orange); transform: translateX(-1.5px); pointer-events: none; }
.ba-grip {
  position: absolute; z-index: 5; top: 50%; left: var(--p); transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #0A0A0A;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.4);
  pointer-events: none;
}
.ba-grip svg { width: 24px; height: 24px; fill: #0A0A0A; }
/* the range stays for keyboard/screen-reader only; pointer dragging is handled
   on the frame itself (script.js), so touch works anywhere on the image */
.ba-range {
  position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: var(--r); }
.ba-cap { margin-top: .85rem; font-size: .92rem; color: var(--body-2); text-align: center; }
.on-dark .ba-cap { color: var(--mist); }

/* ================================================================== why us === */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.why-list { display: grid; gap: 1.3rem; margin-top: 1.6rem; }
.why-item { display: flex; gap: 1rem; align-items: flex-start; }
.why-item .tick { width: 40px; height: 40px; border-radius: 10px; background: #FFF1EB; display: flex; align-items: center; justify-content: center; flex: none; }
.why-item .tick svg { width: 22px; height: 22px; fill: var(--orange-ink); }
.on-dark .why-item .tick { background: rgba(252,96,42,.16); }
.on-dark .why-item .tick svg { fill: var(--orange); }
.why-item b { color: var(--ink); display: block; margin-bottom: .15rem; font-size: 1.05rem; }
.on-dark .why-item b { color: var(--white); }
.why-item p { margin: 0; color: var(--body-2); font-size: .97rem; }
.on-dark .why-item p { color: var(--mist); }
.why-badge { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.why-badge img { max-width: 340px; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.28)); }

/* ============================================================= service area === */
.area-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.4rem); }
@media (max-width: 860px) { .area-grid { grid-template-columns: 1fr; } }
.area-regions { display: grid; gap: 1.2rem; }
.area-region { border: 1px solid var(--line-lt); border-radius: var(--r); padding: 1.3rem 1.4rem; background: var(--white); box-shadow: var(--shadow-sm); }
.area-region h4 { color: var(--ink); display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.area-region h4 svg { width: 18px; height: 18px; fill: var(--orange); }
.area-region .phone { font-weight: 700; color: var(--orange-ink); text-decoration: none; }
.area-towns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.area-towns span { font-size: .85rem; color: var(--body-2); background: var(--bone); border: 1px solid var(--line-lt); padding: .28rem .6rem; border-radius: 20px; }
.area-note { margin-top: 1.2rem; font-size: .92rem; color: var(--body-2); }
/* coverage-map card — fills the right column, ties to the growth-ring motif */
.mapcard { background: var(--coal); border-radius: var(--r); position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); min-height: 420px; }
.mapcard .mlabel { position: absolute; top: 15px; left: 17px; font-size: .7rem; letter-spacing: .2em; font-weight: 700; color: var(--dim); z-index: 3; }
.mapcard .map { width: 100%; flex: 1; display: block; }
.mapcard .mcta { padding: .3rem 1.5rem 1.5rem; }
.mapcard .mcta p { margin: 0 0 1.1rem; color: var(--mist); font-size: .96rem; line-height: 1.55; }
.mapcard .mcta p b { color: var(--white); }
/* coverage-map motion: radar pings expanding from each hub + flowing links */
.cov-ping { transform-box: fill-box; transform-origin: center; opacity: 0; }
.cov-link { stroke-dasharray: 3 6; }
@media (prefers-reduced-motion: no-preference) {
  .cov-ping { animation: covPing 3.3s ease-out infinite; }
  .cov-link { animation: dashFlow 1.1s linear infinite; }
}
@keyframes covPing {
  0%   { transform: scale(.28); opacity: .55; }
  70%  { opacity: .12; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes dashFlow { to { stroke-dashoffset: -18; } }

/* ==================================================================== FAQ === */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border: 1px solid var(--line-lt); border-radius: var(--r-sm); margin-bottom: .8rem; background: var(--white); overflow: hidden; }
.faq details[open] { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 24px; height: 24px; position: relative; transition: transform .2s ease; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--orange); border-radius: 2px; }
.faq summary .pm::before { top: 11px; left: 3px; right: 3px; height: 3px; }
.faq summary .pm::after { left: 11px; top: 3px; bottom: 3px; width: 3px; transition: transform .2s ease; }
.faq details[open] summary .pm::after { transform: scaleY(0); }
.faq .faq-body { padding: 0 1.3rem 1.2rem; color: var(--body-2); }
.faq .faq-body p { margin: 0; }

/* ================================================================== quote === */
.quote-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: start; }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-aside .big-num { display: block; font-family: var(--dsp); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--orange); text-decoration: none; line-height: 1; margin: .4rem 0 .2rem; }
.quote-aside .phone-line { margin-bottom: 1.1rem; }
.quote-aside .phone-line small { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; }
.quote-aside .quote-email { margin: 1.4rem 0 0; }
.quote-aside .quote-email small { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; }
.quote-aside .quote-email a { color: var(--orange); font-weight: 600; text-decoration: none; word-break: break-all; }
.quote-aside .quote-email a:hover { color: var(--orange-hi); }
.form {
  background: var(--white); border: 1px solid var(--line-lt); border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .4rem; font-size: .92rem; }
.field label .req { color: var(--orange-ink); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--ui); font-size: 1rem; color: var(--ink);
  background: var(--bone); border: 1px solid var(--line-lt); border-radius: var(--r-sm);
  padding: .8rem .9rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(252,96,42,.18); background: var(--white);
}
.field textarea { min-height: 110px; resize: vertical; }
.field.is-bad input, .field.is-bad textarea { border-color: #C0392B; }
.field .err { color: #C0392B; font-size: .85rem; margin-top: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: .4rem 0 0; font-weight: 600; min-height: 1.2em; }
.form-note.ok { color: var(--orange-ink); }
.form-note.bad { color: #C0392B; }
.form-fine { font-size: .82rem; color: var(--body-2); margin-top: 1rem; }

/* ================================================================= footer === */
.footer { background: var(--black); color: var(--mist); padding: clamp(3rem, 5vw, 4.5rem) 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer img.f-badge { width: 200px; height: auto; margin-bottom: 1.1rem; }
.footer h4 { color: var(--white); margin-bottom: 1rem; letter-spacing: .05em; }
.footer a { color: var(--mist); text-decoration: none; }
.footer a:hover { color: var(--orange); }
.footer ul li { margin-bottom: .55rem; }
.footer .f-phone { display: flex; align-items: center; gap: .5rem; }
.footer .f-phone svg, .footer .f-mail svg { width: 16px; height: 16px; fill: var(--orange); flex: none; }
.footer-bottom { border-top: 1px solid var(--coal-3); margin-top: 2.6rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .85rem; color: var(--dim); }
.footer-bottom a { color: var(--dim); }

/* ======================================================= chainsaw divider === */
/* ANIMATION #6 — no separate band: the top half is the light Services ground,
   the bottom half the dark section below, and the saw rides the seam where they
   meet, so it reads as the saw cutting the page in two. */
.cutline { position: relative; height: clamp(116px, 14vw, 150px); overflow: hidden; --focus: var(--orange);
  background: linear-gradient(to bottom, var(--bone) 0 50%, var(--coal) 50% 100%); }
.cutline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px;
  transform: translateY(-1.5px); background: rgba(10,10,10,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.35); }
.cutline .saw { position: absolute; top: 50%; left: -600px; transform: translateY(-50%); width: clamp(360px, 46vw, 560px); height: auto; z-index: 2; }
.cutline .saw > svg { width: 100%; height: auto; display: block; }
.cutline .chip { position: absolute; top: 50%; right: 5%; width: 6px; height: 5px; background: #C79A6B; border-radius: 1px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cutline.is-playing .saw { animation: sawTravel 3s cubic-bezier(.45,0,.55,1) forwards; }
  .cutline.is-playing .chip { animation: chipFly .6s ease-out infinite; }
}
@keyframes sawTravel { 0% { left: -600px; } 100% { left: 100%; } }
@keyframes chipFly {
  0% { transform: translate(0,0) scale(1); opacity: .9; }
  100% { transform: translate(30px, var(--cy, -20px)) scale(.35); opacity: 0; }
}

/* ============================================================ sticky call bar === */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  background: var(--orange); box-shadow: 0 -6px 20px rgba(0,0,0,.22);
}
.callbar a { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem; color: #0A0A0A; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.callbar svg { width: 20px; height: 20px; fill: #0A0A0A; }
@media (max-width: 700px) {
  .callbar { display: block; }
  body { padding-bottom: 54px; }
  body.drawer-open .callbar { display: none; }
}

/* ================================================================== lightbox === */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(6,6,6,.94); display: flex; align-items: center; justify-content: center; padding: 4vmin; }
.lb img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: 6px; }
.lb-cap { position: absolute; bottom: 3vmin; left: 0; right: 0; text-align: center; color: #ddd; font-size: .95rem; padding: 0 1rem; }
.lb button { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; width: 48px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb button svg { width: 22px; height: 22px; fill: #fff; }
.lb button:hover { background: var(--orange); }
.lb button:hover svg { fill: #0A0A0A; }
.lb-close { top: 3vmin; right: 3vmin; }
.lb-prev { left: 3vmin; top: 50%; transform: translateY(-50%); }
.lb-next { right: 3vmin; top: 50%; transform: translateY(-50%); }

/* ============================================================ scroll reveal === */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* gallery mini */
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
.gal-grid button { padding: 0; border: 0; cursor: pointer; background: var(--coal); border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4/3; position: relative; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gal-grid button:hover img { transform: scale(1.06); }