/* Canopy & Crown Tree Care (fictional portfolio concept) — original hand-written stylesheet.
   Bright cream base over a WebGL leaves backdrop, deep-green ink, brand gold.
   #leaves-bg (fixed, z:-1) paints behind everything; html carries the fallback
   colour so a failed leaves module still shows the bright theme. */
:root {
  --bg: #f5f2e8;
  --bg2: #ece7d8;
  --card: #ffffff;
  --ink: #1d2718;
  --muted: #5d6753;
  --gold: #c9a961;
  --gold-deep: #8f6f2a;
  --gold-soft: rgba(201, 169, 97, 0.25);
  --green: #2f5422;
  --radius: 18px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x on BOTH html and body, with clip preferred: clip blocks all
   horizontal panning (incl. iOS touch) without creating a scroll container,
   so position:sticky keeps working. hidden is the older-browser fallback. */
html {
  scroll-behavior: smooth; background: var(--bg);
  overflow-x: hidden; overflow-x: clip;
}
body {
  background: transparent;
  color: var(--ink);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* leaves live only in the nav bar + footer — injected canvases behind each zone's
   content. The .nav > * lift sits BEFORE .leaves-zone so the canvas's own z:0 and
   the mobile menu's later fixed/z:1000 rules still win the cascade. */
.nav > * { position: relative; z-index: 1; }
.leaves-zone { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.foot { position: relative; }
.foot > *:not(.leaves-zone) { position: relative; z-index: 1; }

/* ---------- top banner ---------- */
.topbar {
  position: relative; z-index: 901;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 5vw;
  background: linear-gradient(90deg, #cbab63, #b8963f);
  color: #171307;
}
.topbar-msg { font-weight: 700; font-size: 14px; letter-spacing: 0.3px; }
.topbar-msg:hover { text-decoration: underline; }
.topbar-meta { position: absolute; right: 5vw; display: flex; align-items: center; gap: 18px; }
.topbar-hours { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; }
.topbar-ic { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; }
.topbar-ic:hover { opacity: 0.75; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 5vw;
  background: rgba(245, 242, 232, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(47, 84, 34, 0.14);
}
.nav-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 20px; letter-spacing: 0.5px; }
.nav-logo img { width: 54px; height: auto; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--muted); position: relative; padding: 6px 0; transition: color 0.25s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold-deep); transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-links a:hover, .nav-links a.on { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.on::after { width: 100%; }
/* animated hamburger → X (SVG stroke-dash morph) — hidden on desktop */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(29, 39, 24, 0.25);
  border-radius: 50%; cursor: pointer; z-index: 1001;
  transition: border-color 0.3s, background 0.3s;
}
.burger:hover { border-color: var(--gold-deep); }
.burger .ham { width: 30px; height: 30px; transition: transform 400ms; }
.burger.active .ham { transform: rotate(45deg); }
.burger .line {
  fill: none; stroke: var(--ink); stroke-width: 5.5; stroke-linecap: round;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
}
.burger .top { stroke-dasharray: 40 139; }
.burger .bottom { stroke-dasharray: 40 180; }
.burger.active .top { stroke-dashoffset: -98px; }
.burger.active .bottom { stroke-dashoffset: -138px; }
html.menu-open { overflow: hidden; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 50px;
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
}
.pill.gold { background: var(--gold); color: #171307; box-shadow: 0 8px 24px rgba(143, 111, 42, 0.3); }
.pill.gold:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 36px rgba(143, 111, 42, 0.42); }
.pill.ghost { border: 1.5px solid rgba(29, 39, 24, 0.3); color: var(--ink); }
.pill.ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); transform: translateY(-3px); }
.nav-cta { background: var(--gold); color: #171307; padding: 10px 20px; font-size: 14px; }
.nav-cta:hover { transform: translateY(-2px); }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  gap: 5vw; padding: clamp(48px, 9vh, 110px) 5vw;
  min-height: 74vh;
  background:
    radial-gradient(900px 500px at 85% 8%, rgba(76, 122, 52, 0.13), transparent 60%),
    radial-gradient(700px 420px at 8% 90%, rgba(201, 169, 97, 0.14), transparent 65%);
}
.kicker { font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 20px; }
.kicker a { color: var(--muted); }
.kicker a:hover { color: var(--gold-deep); }
h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.06; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 24px; }
h1 em { font-style: italic; color: var(--gold-deep); }
.lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); max-width: 54ch; margin-bottom: 34px; }

/* ---------- float card (proximity-tracked) ---------- */
.float-cards { display: flex; flex-direction: column; gap: 40px; }
.float-card {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 300px; padding: 20px 0 60px; overflow: visible; cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); background: transparent;
}
.float-card::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 75%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.35) 0%, rgba(201, 169, 97, 0.12) 40%, transparent 70%);
  opacity: 0.7; transition: opacity 0.4s ease, width 0.4s ease, height 0.4s ease;
  pointer-events: none; z-index: 0; animation: floatPulse 3s ease-in-out infinite;
}
.float-card:hover { transform: translateY(-6px); z-index: 200; }
.float-card:hover::before { opacity: 1; width: 90%; height: 85%; animation: none; }
@keyframes floatPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
.float-card-img { position: relative; z-index: 1; width: 100%; height: clamp(260px, 38vh, 420px); display: flex; align-items: center; justify-content: center; }
.float-card-img img {
  max-width: 92%; max-height: 100%; width: auto; height: auto; object-fit: cover;
  border-radius: var(--radius);
  filter: drop-shadow(0 18px 34px rgba(29, 39, 24, 0.3));
  transition: filter 0.3s ease; will-change: transform;
}
.float-card:hover .float-card-img img { filter: drop-shadow(0 26px 44px rgba(29, 39, 24, 0.4)) drop-shadow(0 0 24px rgba(201, 169, 97, 0.5)); }
.float-card-overlay {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); z-index: 3;
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 22px;
  background: rgba(23, 19, 7, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(201, 169, 97, 0.5); border-radius: 50px;
  box-shadow: 0 8px 24px rgba(29, 39, 24, 0.25); white-space: nowrap;
  transition: background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.float-card:hover .float-card-overlay {
  background: rgba(201, 169, 97, 0.97); border-color: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -8px) scale(1.04); box-shadow: 0 16px 40px rgba(143, 111, 42, 0.4); animation: none;
}
.float-card:hover .float-card-title, .float-card:hover .float-card-sub { color: #171307; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(29, 39, 24, 0.25), 0 0 0 0 rgba(201, 169, 97, 0.45); }
  50% { box-shadow: 0 8px 24px rgba(29, 39, 24, 0.25), 0 0 0 10px rgba(201, 169, 97, 0); }
}
.float-card-title-wrap { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.float-card-title { font-size: 15px; font-weight: 700; color: #fff; }
.float-card-sub { font-size: 10px; color: rgba(255, 255, 255, 0.65); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.float-card-arrow {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #171307;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(143, 111, 42, 0.45); transition: transform 0.3s, background 0.3s; flex-shrink: 0;
}
.float-card:hover .float-card-arrow { background: #171307; color: var(--gold); transform: translateX(4px); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid rgba(143, 111, 42, 0.35); background: var(--gold); color: #171307; padding: 12px 0; }
.marquee-track { display: flex; gap: 34px; width: max-content; animation: marquee 22s linear infinite; font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.marquee-track .dot { opacity: 0.5; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 9vh, 110px) 5vw; }
.eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 14px; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.8px; margin-bottom: 22px; }
.wide { max-width: 68ch; color: var(--muted); font-size: 17px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.stat {
  background: var(--card); border: 1px solid rgba(47, 84, 34, 0.15); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: 0 6px 18px rgba(29, 39, 24, 0.06);
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.stat:hover { transform: translateY(-5px); border-color: rgba(143, 111, 42, 0.55); box-shadow: 0 14px 32px rgba(29, 39, 24, 0.12); }
.stat b { display: block; font-size: 34px; color: var(--gold-deep); font-weight: 800; letter-spacing: -1px; }
.stat span { color: var(--muted); font-size: 14px; }

/* ---------- service cards (fallback grid) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 14px; }
.svc-card {
  position: relative; border-radius: var(--radius); overflow: hidden; background: var(--card);
  border: 1px solid rgba(47, 84, 34, 0.15); box-shadow: 0 6px 18px rgba(29, 39, 24, 0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s, box-shadow 0.4s;
}
.svc-card img { width: 100%; height: 210px; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.svc-card:hover { transform: translateY(-8px); border-color: rgba(143, 111, 42, 0.6); box-shadow: 0 20px 44px rgba(29, 39, 24, 0.16); }
.svc-card:hover img { transform: scale(1.06); }
.svc-meta { padding: 20px 22px 24px; }
.svc-meta h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.svc-meta p { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.svc-go { color: var(--gold-deep); font-weight: 700; font-size: 14px; }

/* ---------- WebGL services deck ----------
   Default = fallback grid visible, 3D stage hidden. body.svc3d-on (set only
   after a successful WebGL init) flips the two. */
.svc3d-head { padding-bottom: 0; }
#svc-fallback { padding-top: 0; }
.svc3d-wrap { display: none; }
/* pull the deck up under the heading — its sticky stage centers the card, so the
   first viewport's empty top half otherwise reads as a big gap after "Services" */
body.svc3d-on .svc3d-wrap { display: block; height: 440vh; margin-top: -18vh; }
body.svc3d-on .svc3d-head { position: relative; z-index: 6; }
body.svc3d-on #svc-fallback { display: none; }
.svc3d-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#svc3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.svc3d-ui {
  position: absolute; left: 5vw; bottom: 9vh; z-index: 5; max-width: 480px;
  pointer-events: none;
}
.svc3d-ui .pill { pointer-events: auto; }
.svc3d-count { font-size: 13px; letter-spacing: 3px; color: var(--muted); margin-bottom: 10px; }
.svc3d-count b { color: var(--gold-deep); font-size: 22px; letter-spacing: 0; }
.svc3d-ui h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.8px; }
.svc3d-ui p { color: var(--muted); margin: 8px 0 20px; font-size: 15px; }
.svc3d-ui.swap h3, .svc3d-ui.swap p, .svc3d-ui.swap .svc3d-count b { animation: uiSwap 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes uiSwap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.svc3d-hint {
  position: absolute; right: 5vw; bottom: 9vh; z-index: 5;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.svc3d-hint span { color: var(--gold-deep); animation: hintBob 1.6s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- why scrollytelling ----------
   Default (no JS / reduced motion): steps stack as a numbered list.
   .why-wrap.on = pinned mode; steps crossfade as 01→04 roll by. */
.why-stage { position: relative; margin-top: 26px; }
.why-step { max-width: 640px; padding: 22px 0 22px 74px; position: relative; border-bottom: 1px solid rgba(29, 39, 24, 0.1); color: var(--muted); }
.why-step b { color: var(--ink); display: block; margin-bottom: 6px; font-size: 18px; }
.why-step::before {
  content: attr(data-n); position: absolute; left: 0; top: 20px;
  font-size: 28px; font-weight: 800; color: var(--gold-deep); opacity: 0.85; letter-spacing: -1px;
}
.why-num, .why-rail { display: none; }

.why-wrap.on { height: 340vh; }
.why-wrap.on .why-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.why-wrap.on .why-stage { display: grid; grid-template-columns: minmax(180px, 0.8fr) 1.6fr; gap: 5vw; align-items: center; min-height: 320px; }
.why-wrap.on .why-num { display: block; position: relative; overflow: hidden; }
.why-wrap.on .why-num span {
  display: block; font-size: clamp(110px, 16vw, 230px); font-weight: 800; line-height: 0.9;
  color: transparent; -webkit-text-stroke: 2.5px var(--gold-deep); letter-spacing: -6px;
}
.why-wrap.on .why-num span.roll { animation: numRoll 0.55s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes numRoll { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
.why-wrap.on .why-steps { position: relative; min-height: 200px; }
.why-wrap.on .why-step {
  position: absolute; inset: 0; padding: 0; border: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
.why-wrap.on .why-step.act { opacity: 1; transform: none; pointer-events: auto; }
.why-wrap.on .why-step::before { display: none; }
.why-wrap.on .why-step b { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.5px; margin-bottom: 12px; }
.why-wrap.on .why-step p { font-size: clamp(15px, 1.3vw, 18px); max-width: 52ch; }
.why-wrap.on .why-rail { display: flex; gap: 10px; position: absolute; bottom: 7vh; left: 5vw; }
.why-wrap.on .why-rail i {
  width: 34px; height: 3px; border-radius: 2px; background: rgba(29, 39, 24, 0.15);
  transition: background 0.35s, width 0.35s;
}
.why-wrap.on .why-rail i.act { background: var(--gold-deep); width: 52px; }

/* ---------- checklist / gallery ---------- */
.check-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; max-width: 900px; }
.check-list li {
  background: var(--card); border: 1px solid rgba(47, 84, 34, 0.15); border-radius: 14px;
  padding: 18px 20px 18px 52px; position: relative; font-size: 15px;
  box-shadow: 0 6px 18px rgba(29, 39, 24, 0.05);
  transition: transform 0.3s, border-color 0.3s;
}
.check-list li:hover { transform: translateY(-4px); border-color: rgba(143, 111, 42, 0.55); }
.check-list li::before { content: '✓'; position: absolute; left: 20px; top: 16px; color: var(--gold-deep); font-weight: 800; font-size: 18px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.gallery img { border-radius: var(--radius); width: 100%; height: 280px; object-fit: cover; box-shadow: 0 8px 22px rgba(29, 39, 24, 0.12); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s; }
.gallery img:hover { transform: scale(1.03) rotate(-0.5deg); box-shadow: 0 20px 42px rgba(29, 39, 24, 0.22); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.contact-card {
  background: var(--card); border: 1px solid rgba(47, 84, 34, 0.15); border-radius: var(--radius);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 6px 18px rgba(29, 39, 24, 0.06);
  transition: transform 0.35s, border-color 0.35s;
}
.contact-card:hover { transform: translateY(-5px); border-color: rgba(143, 111, 42, 0.6); }
.contact-card b { color: var(--gold-deep); font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
.contact-card span { font-size: 19px; font-weight: 700; }
.contact-card span.break { word-break: break-all; font-size: 15px; }
.contact-card small { color: var(--muted); font-size: 13px; }

/* ---------- quote form ---------- */
.quote-form { max-width: 720px; display: flex; flex-direction: column; gap: 18px; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
.quote-form input, .quote-form select, .quote-form textarea {
  background: var(--card); border: 1px solid rgba(47, 84, 34, 0.25); border-radius: 12px;
  color: var(--ink); font: 400 16px 'Sora', system-ui, sans-serif; padding: 14px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-soft);
}
.quote-form textarea { resize: vertical; }
.quote-form button { align-self: flex-start; border: 0; cursor: pointer; }
.qf-note { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .qf-row { grid-template-columns: 1fr; } }

/* ---------- CTA band / footer ---------- */
.cta-band {
  margin: 0 5vw clamp(56px, 9vh, 100px); padding: clamp(40px, 7vh, 80px) 6vw;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.2), rgba(76, 122, 52, 0.12)), var(--card);
  border: 1px solid rgba(143, 111, 42, 0.4); border-radius: 26px; text-align: center;
  box-shadow: 0 14px 40px rgba(29, 39, 24, 0.08);
}
.cta-band p { color: var(--muted); margin-bottom: 28px; }
.cta-band .cta-row { justify-content: center; }
.foot { background: #22371a; color: #f2efe6; padding: 54px 5vw 26px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.foot-grid p { color: rgba(242, 239, 230, 0.72); font-size: 14px; margin-top: 14px; max-width: 40ch; }
.foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 14px; }
.foot-grid a { display: block; color: rgba(242, 239, 230, 0.72); font-size: 14px; padding: 5px 0; transition: color 0.25s; overflow-wrap: anywhere; }
.foot-grid a:hover { color: var(--gold); }
.foot-tiny { text-align: center; color: rgba(242, 239, 230, 0.5); font-size: 12.5px; border-top: 1px solid rgba(242, 239, 230, 0.15); padding-top: 22px; }

/* ---------- reveal ----------
   Hidden state only applies once JS has stamped <html class="js"> — no-JS
   visitors (or a failed main.js) get a fully visible page. */
.reveal { transition: opacity 0.7s ease var(--d, 0ms), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) var(--d, 0ms); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 10px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .topbar-hours { display: none; }
}
@media (max-width: 820px) {
  /* backdrop-filter would make the nav the containing block for the fixed
     full-screen menu — solid background instead so the overlay truly covers
     the viewport */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(245, 242, 232, 0.96); }
  .nav-links {
    position: fixed; inset: 0; z-index: 1000;
    flex-direction: column; align-items: center; justify-content: center; gap: 0;
    padding: 90px 5vw 40px;
    background:
      radial-gradient(700px 420px at 85% 10%, rgba(201, 169, 97, 0.2), transparent 60%),
      radial-gradient(600px 400px at 10% 90%, rgba(76, 122, 52, 0.16), transparent 65%),
      var(--bg);
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
  .nav-links a {
    padding: 14px 0; font-size: clamp(26px, 6.5vw, 38px); font-weight: 800; letter-spacing: -0.8px;
    color: var(--ink); border: 0;
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s;
  }
  .nav-links a::after { height: 3px; bottom: 8px; }
  .nav-links.open a { opacity: 1; transform: none; }
  .nav-links.open a:nth-child(1) { transition-delay: 0.06s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.11s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.16s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.21s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.26s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.31s; }
  .nav-links.open a:nth-child(7) { transition-delay: 0.36s; }
  .nav-cta { margin-left: auto; }
  .burger { display: flex; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .topbar { justify-content: flex-start; }
  .topbar-tel span { display: none; }
  .topbar-msg { font-size: 13px; }
  /* stack the pinned why section — the giant number column overflows narrow screens */
  .why-wrap.on .why-stage { grid-template-columns: 1fr; gap: 14px; align-items: start; min-height: 0; }
  .why-wrap.on .why-num span { font-size: clamp(76px, 22vw, 120px); letter-spacing: -3px; }
  .why-wrap.on .why-steps { min-height: 250px; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat b { font-size: 26px; }
  .pill { padding: 12px 20px; font-size: 14px; }
  .nav-cta { display: none; }
  .burger { margin-left: auto; }   /* nav-cta gone — keep the burger pinned top right */
  .float-card-img { height: 230px; }
}

/* Leaves stay in the nav bar but fade out behind the link row, so they never cross the
   nav text (they still drift near the logo and the call button). Desktop only: on
   ≤820px the links collapse into the menu button. */
@media (min-width: 821px) {
  .nav .leaves-zone {
    -webkit-mask-image: linear-gradient(90deg, #000 0 24%, transparent 32% 80%, #000 90%);
    mask-image: linear-gradient(90deg, #000 0 24%, transparent 32% 80%, #000 90%);
  }
}