/* base.css : starter guards for every website-builder-v3.3 build.
   Copy this in as the TOP of assets/styles.css, then build the brand styling
   on top of it. Every block prevents a bug class that shipped in a past
   build; the war stories are in references/default-snippets.md. */

/* ---- 1. No-JS-safe scroll reveals (never put .reveal on the hero) ---- */
.js .reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- 2. Icon-size guard.
   :where() keeps specificity at 0,0,1 so ANY class can override the guard.
   Without it, the two :not() checks give 0,2,1, which silently beats
   single-class widths (.divider { width: 100% }) and squashes decorative
   full-width SVGs down to 1.25rem. ---- */
svg:where(:not([width]):not([height])) { width: 1.25rem; height: 1.25rem; }
.icon, .icon svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }

/* ---- 3. Mobile-nav discipline (prevents duplicate desktop CTAs).
   The hide/show pairs are !important ON PURPOSE: brand header styles written
   later in the stylesheet overrode these guards on a real build and the
   desktop nav showed at 390px. Brand code sizes and styles the nav; it does
   not get to decide visibility at breakpoints. Do not soften these. ---- */
.mobile-only { display: none !important; }
@media (max-width: 860px) {
  .desktop-nav { display: none !important; }
  .hamburger { display: inline-flex !important; }
  .mobile-only { display: block !important; }
  .header-cta { display: none !important; } /* collapses into the menu */
}
/* Hamburger bars stack vertically; inline-flex once laid the three bars
   in a ROW (a one-line "hamburger"). */
.hamburger { flex-direction: column; justify-content: center; gap: 4px; }
.site-header { gap: 1rem; flex-wrap: nowrap; } /* never let the header wrap */
.site-header .brand { flex: 0 1 auto; min-width: 0; }

/* ---- 4. Dark-section contrast (define every state explicitly) ---- */
.section--dark { color: #f3f4f6; }
.section--dark .btn-primary { background: var(--accent, #ffb700); color: #0b0b0b; }
.section--dark .btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.6); background: transparent; }
.section--dark a { color: #fff; text-decoration: underline; }
.section--dark .btn-primary, .section--dark .btn-ghost { text-decoration: none; }
.section--dark .stat, .section--dark .muted { color: #d1d5db; }

/* ---- 5. Gradient headlines without clipped descenders ---- */
.hl-gradient { background: linear-gradient(90deg, var(--brand-1, #333), var(--brand-2, #999));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1.15; padding-bottom: .08em; }

/* ---- 6. Capture mode (add html.capture-mode manually for print or page
   rasterization). DOM rasterizers drop background-clip gradient text and choke
   on remote fonts; these overrides flatten headlines and freeze motion.
   Keep --brand-1 defined: it becomes the flattened headline color. ---- */
html.capture-mode .hl-gradient {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--brand-1, #222); }
html.capture-mode * { animation: none !important; transition: none !important; }
html.capture-mode .reveal { opacity: 1 !important; transform: none !important; }

/* ---- 7. Accessibility: focus ring + screen-reader helper.
   clip-path button shapes swallow the default focus outline. ---- */
:focus-visible { outline: 3px solid var(--accent, #ffb700); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 8. Motion hygiene.
   Underlines and sheens live on ::before; carets and indicators on ::after.
   Never both on one element. ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- 9. Dev banner (placeholder fence; preflight --final fails if present).
   base.js CREATES #dev-banner automatically when any [[CONFIRM: ...]]
   HTML comments exist in the page, listing them so they are impossible to
   miss and impossible to ship silently. Resolve the comments and the banner
   removes itself; preflight --final verifies zero remain. ---- */
#dev-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999;
  background: #b91c1c; color: #fff; font: 13px/1.5 system-ui, sans-serif;
  padding: 8px 14px; }


/* ==========================================================
   American Outdoors Property Services : brand layer
   Direction: Rugged badge (brand kit). Night field, the badge's
   ridge and treeline as terrain, Flag Red only for call buttons.
   ========================================================== */

@font-face { font-family: "Saira Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/saira-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/saira-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/barlow-600.woff2") format("woff2"); }

:root {
  --green: #668A25; --lime: #8DB83A; --red: #C8141C; --red-dark: #A50F16;
  --night: #111510; --field: #1C2319; --bone: #F3F0E6; --deep: #0B0E0A;
  --muted-bone: rgba(243,240,230,.82); --muted-night: #55604C;
  --accent: #8DB83A; --brand-1: #8DB83A; --brand-2: #668A25;
  --head: "Saira Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1320px;
  --pad: clamp(20px, 4.4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; background: var(--night); color: var(--bone); font-family: var(--body);
  font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lime); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 800; text-transform: uppercase;
  line-height: .95; letter-spacing: .005em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(40px, 5.2vw, 68px); }
h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.accent { color: var(--lime); }
.on-bone .accent { color: var(--green); }

/* ---------- texture: 5% grain over every section ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url%28%23n%29'/></svg>"); opacity: .05;
  pointer-events: none; z-index: 5; }
.on-bone.grain::after { opacity: .07; filter: invert(1); }

/* ---------- scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300;
  background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- ribbon labels (swallowtail both ends) ---------- */
.ribbon { display: inline-block; font-family: var(--head); font-weight: 800; font-size: 15px;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
  background: var(--lime); color: var(--night); padding: 7px 28px 7px 24px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); }
.ribbon.red { background: var(--red); color: var(--bone); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--head); font-weight: 800; font-size: 21px; letter-spacing: .06em; line-height: 1.1;
  text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; min-height: 48px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.btn-wrap { display: inline-block; filter: drop-shadow(0 6px 0 rgba(0,0,0,.45));
  transition: transform .18s ease, filter .18s ease; }
.btn-wrap:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 0 rgba(0,0,0,.5)); }
.btn-wrap:active { transform: translateY(2px); filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.btn-call { position: relative; overflow: hidden; background: var(--red); color: var(--bone);
  padding: 16px 44px 16px 26px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
.btn-call:hover { background: var(--red-dark); color: var(--bone); }
/* sheen lives on ::before (indicators would go on ::after) */
.btn-call::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; }
.btn-call:hover::before { left: 120%; }
.btn-ghost { color: var(--bone); background: transparent; padding: 14px 26px;
  box-shadow: inset 0 0 0 2px var(--lime); }
.btn-ghost:hover { background: var(--lime); color: var(--night); }
.on-bone .btn-ghost { color: var(--night); box-shadow: inset 0 0 0 2px var(--green); }
.on-bone .btn-ghost:hover { background: var(--green); color: var(--bone); }
.btn-sm { font-size: 18px; min-height: 44px; }
.btn-call.btn-sm { padding: 11px 36px 11px 20px; }

.textlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700;
  font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); text-decoration: none; }
.textlink svg { width: 16px; height: 16px; transition: transform .2s ease; }
.textlink:hover svg { transform: translateX(4px); }
.on-bone .textlink { color: #3F5A12; }

/* ==================== HEADER ==================== */
.site-header-bar { position: sticky; top: 0; z-index: 200; background: var(--deep);
  border-bottom: 3px solid var(--green); }
.site-header { display: flex; align-items: center; justify-content: space-between; height: 92px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); transition: height .25s ease; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--bone); }
.brand img { width: 118px; height: 118px; margin: 30px 0 -54px; position: relative; z-index: 10;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); transition: width .25s ease, height .25s ease, margin .25s ease; }
.brand-name { font-family: var(--head); font-weight: 800; font-size: 24px; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.brand-name em { display: block; font-style: normal; color: var(--lime); font-size: 15px;
  letter-spacing: .22em; margin-top: 5px; }
.is-scrolled .site-header { height: 74px; }
.is-scrolled .brand img { width: 62px; height: 62px; margin: 0; }

.desktop-nav { display: flex; align-items: center; gap: 30px; }
.desktop-nav > ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.desktop-nav li { position: relative; }
.desktop-nav a.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone); text-decoration: none; opacity: .86; padding: 10px 0; }
.desktop-nav a.nav-link:hover, .desktop-nav a.nav-link[aria-current="page"], .desktop-nav li.is-current > a.nav-link { opacity: 1; }
/* underline on ::before; the dropdown caret uses a separate svg, never ::after */
.desktop-nav a.nav-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
  background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s ease; }
.desktop-nav a.nav-link:hover::before, .desktop-nav a.nav-link[aria-current="page"]::before,
.desktop-nav li.is-current > a.nav-link::before { transform: scaleX(1); }
.desktop-nav .caret { width: 12px; height: 12px; opacity: .8; }
.sub { position: absolute; top: 100%; left: -18px; min-width: 250px; list-style: none; margin: 0; padding: 10px 0;
  background: var(--field); border-top: 4px solid var(--green); box-shadow: 0 24px 40px -12px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 10px 20px; font-family: var(--head); font-weight: 700; font-size: 17px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bone); text-decoration: none; }
.sub a:hover, .sub a[aria-current="page"] { background: rgba(141,184,58,.12); color: var(--lime); }

.hamburger { display: none; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  align-items: center; padding: 0; }
.hamburger span { display: block; width: 28px; height: 3px; background: var(--bone); transition: transform .2s ease, opacity .2s ease; }
.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .hamburger span:nth-child(2) { opacity: 0; }
.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav { display: none; }
@media (max-width: 860px) {
  .mnav.is-open { display: block; position: fixed; inset: 71px 0 0 0; z-index: 190; overflow-y: auto;
    background: var(--deep); padding: 22px var(--pad) 120px; }
  .mnav ul { list-style: none; margin: 0; padding: 0; }
  .mnav li { border-bottom: 1px solid rgba(243,240,230,.12); }
  .mnav a { display: flex; align-items: center; min-height: 54px; font-family: var(--head); font-weight: 800;
    font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone); text-decoration: none; }
  .mnav a[aria-current="page"] { color: var(--lime); }
  .mnav .sub-m a { font-size: 19px; font-weight: 700; min-height: 46px; padding-left: 20px; color: var(--muted-bone); }
  .mnav .btn-wrap { margin-top: 26px; display: block; }
  .mnav .btn-call { width: 100%; justify-content: flex-start; }
  .nav-open body { overflow: hidden; }
}

/* sticky call bar (phone) */
.callbar { display: none; }
@media (max-width: 860px) {
  .callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--deep);
    border-top: 3px solid var(--green); box-shadow: 0 -10px 30px rgba(0,0,0,.45); }
  .callbar a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; font-family: var(--head); font-weight: 800; font-size: 20px; letter-spacing: .05em;
    text-transform: uppercase; text-decoration: none; }
  .callbar .cb-call { flex: 1.6 1 0; background: var(--red); color: var(--bone);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); padding-right: 12px; }
  .callbar .cb-quote { flex: 1 1 0; color: var(--bone); box-shadow: inset 0 0 0 2px var(--lime); }
  .callbar svg { width: 20px; height: 20px; }
  body { padding-bottom: 72px; }
}

/* ==================== TREELINE DIVIDER ==================== */
.tl { position: relative; height: 0; z-index: 8; pointer-events: none; }
.tl svg { position: absolute; left: 0; bottom: -1px; width: 100%; height: 84px; display: block; fill: currentColor; }
.tl--bone svg { color: var(--bone); }
.tl--night svg { color: var(--night); }
.tl--field svg { color: var(--field); }
.tl--deep svg { color: var(--deep); }
@media (max-width: 700px) { .tl svg { height: 46px; } }

/* ==================== HOME HERO ==================== */
.hero { overflow: hidden; min-height: 760px;
  background: radial-gradient(900px 520px at 78% 40%, rgba(102,138,37,.22), transparent 70%),
              linear-gradient(180deg, #0B0E0A 0%, #111510 55%, #151C13 100%); }
.hero-stripes { position: absolute; top: -40px; right: -120px; width: 980px; height: 420px; z-index: 0;
  background: repeating-linear-gradient(-8deg, rgba(200,20,28,.22) 0 34px, transparent 34px 68px);
  -webkit-mask: linear-gradient(200deg, #000 10%, transparent 70%); mask: linear-gradient(200deg, #000 10%, transparent 70%);
  transform: skewY(-4deg); animation: stripes-in 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes stripes-in { from { transform: skewY(-4deg) translateX(120px); } to { transform: skewY(-4deg) translateX(0); } }
.hero-ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: 1;
  background: url("images/hero-ridge.svg") center bottom / cover no-repeat; will-change: transform; }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px;
  align-items: center; padding-top: 110px; padding-bottom: 210px; }
.hero h1 { font-size: clamp(52px, 7.3vw, 104px); line-height: .9; margin: 22px 0 24px; }
.hero h1 b { color: var(--lime); font-weight: 800; }
.hero .lead { font-size: 21px; max-width: 560px; color: var(--muted-bone); margin-bottom: 34px; }
.ctas { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.svc-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; font-family: var(--head); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: 15px; color: rgba(243,240,230,.74); }
.svc-strip i { color: var(--lime); font-style: normal; }
.hero-badge { justify-self: center; position: relative; }
.hero-badge::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(141,184,58,.30), transparent); filter: blur(10px); z-index: -1;
  animation: glow 6s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.hero-badge img { width: 520px; max-width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7));
  animation: badge-settle 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes badge-settle { from { transform: translateY(24px) scale(.95) rotate(-1.5deg); } to { transform: none; } }

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 150px; gap: 8px; text-align: left; }
  .hero-badge { order: -1; }
  .hero-badge img { width: 240px; }
  .hero h1 { font-size: clamp(50px, 14.5vw, 76px); margin-top: 18px; }
  .hero .lead { font-size: 18px; }
  .hero-stripes { width: 620px; right: -260px; height: 300px; }
  .hero-ridge { height: 190px; }
}
@media (max-width: 560px) {
  .hero .ctas { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero .ctas .btn-wrap, .hero .ctas .btn { width: 100%; }
  .hero .ctas .btn-call { justify-content: center; }
  .svc-strip { font-size: 13px; gap: 8px; letter-spacing: .1em; }
}

/* ==================== INTERIOR PAGE HERO ==================== */
.phero { overflow: hidden;
  background: radial-gradient(760px 460px at 80% 45%, rgba(102,138,37,.20), transparent 70%),
              linear-gradient(180deg, #0B0E0A 0%, #111510 60%, #151C13 100%); }
.phero .hero-ridge { height: 220px; opacity: .95; }
.phero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px;
  align-items: center; padding-top: 96px; padding-bottom: 170px; }
.phero h1 { font-size: clamp(46px, 6vw, 84px); line-height: .92; margin: 20px 0 22px; }
.phero .lead { font-size: 20px; color: var(--muted-bone); max-width: 640px; margin-bottom: 30px; }
.crumbs { font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(243,240,230,.6); margin-bottom: 18px; }
.crumbs a { color: rgba(243,240,230,.78); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }
.crumbs span { margin: 0 8px; color: var(--green); }
.phero-art { justify-self: center; position: relative; }
.phero-art img { width: 360px; filter: drop-shadow(0 26px 36px rgba(0,0,0,.7)); animation: badge-settle 1s cubic-bezier(.2,.8,.2,1) both; }
.phero--short .phero-grid { padding-bottom: 150px; }

/* the icon plate: a square equipment plate with the service icon */
.plate { position: relative; width: 340px; aspect-ratio: 1; background: var(--field);
  border-top: 6px solid var(--green); display: grid; place-items: center; overflow: hidden;
  box-shadow: 14px 14px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(243,240,230,.06);
  animation: badge-settle 1s cubic-bezier(.2,.8,.2,1) both; }
.plate::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: url("images/hero-ridge.svg") center bottom / cover no-repeat; opacity: .9; }
.plate .ico-xl { position: relative; width: 52%; height: 52%; color: var(--lime); margin-top: -12%; }
.plate .plate-tag { position: absolute; left: 0; bottom: 18px; z-index: 2; }
.plate .plate-num { position: absolute; top: 14px; right: 18px; font-family: var(--head); font-weight: 800;
  font-size: 22px; letter-spacing: .14em; color: rgba(243,240,230,.5); }
.plate--town { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.plate--town .ico-pin { width: 64px; height: 64px; color: var(--lime); position: relative; margin-bottom: 14px; }
.plate--town .town { position: relative; font-family: var(--head); font-weight: 800; text-transform: uppercase;
  font-size: 54px; line-height: .9; }
.plate--town .state { position: relative; display: block; margin-top: 12px; font-family: var(--head); font-weight: 700;
  letter-spacing: .24em; font-size: 16px; color: var(--lime); text-transform: uppercase; }

@media (max-width: 980px) {
  .phero-grid { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 130px; gap: 30px; }
  .phero-art { order: -1; justify-self: start; }
  .phero-art img { width: 170px; }
  .plate { width: 200px; box-shadow: 10px 10px 0 rgba(0,0,0,.45); }
  .plate .plate-num { font-size: 16px; }
  .plate--town { width: 240px; padding: 20px; }
  .plate--town .town { font-size: 34px; }
  .plate--town .ico-pin { width: 44px; height: 44px; margin-bottom: 8px; }
  .phero .lead { font-size: 18px; }
  .phero .hero-ridge { height: 150px; }
}
@media (max-width: 560px) {
  .phero .ctas { flex-direction: column; align-items: stretch; gap: 16px; }
  .phero .ctas .btn-wrap, .phero .ctas .btn { width: 100%; }
  .phero .ctas .btn-call { justify-content: center; }
  .phero-art { display: none; }
  .phero-grid { padding-top: 34px; }
}

/* ==================== SECTIONS ==================== */
.section { padding: 110px 0; position: relative; }
.on-bone { background: var(--bone); color: var(--night); }
.on-field { background: var(--field); }
.on-night { background: var(--night); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 46px; }
.sec-head h2 { margin-top: 16px; }
.sec-head p { max-width: 520px; margin: 14px 0 0; }
.on-bone p { color: #262C22; }
.on-bone .muted { color: var(--muted-night); }
.on-night .muted, .on-field .muted { color: var(--muted-bone); }
@media (max-width: 860px) {
  .section { padding: 84px 0; }
  .sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 34px; }
}

/* ----- intro (who we are) ----- */
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }
.intro-grid h2 { margin: 16px 0 26px; }
.intro-grid .big { font-size: 21px; line-height: 1.55; }
.rule { width: 72px; height: 4px; background: var(--green); border: 0; margin: 28px 0; }

/* the spec plate: dark equipment plate on a hard green backing */
.spec { position: relative; background: var(--night); color: var(--bone); border-top: 4px solid var(--green);
  box-shadow: 16px 16px 0 var(--green); padding: 10px 34px; isolation: isolate; }
.spec::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url%28%23n%29'/></svg>"); opacity: .05; mix-blend-mode: overlay; pointer-events: none; }
.spec-row { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: center; padding: 24px 0;
  border-bottom: 1px solid rgba(243,240,230,.12); }
.spec-row:last-child { border-bottom: 0; }
.spec-row svg { width: 40px; height: 40px; color: var(--lime); }
.spec-row small { display: block; font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lime); margin-bottom: 4px; }
.spec-row b, .spec-row a.big-tel { display: block; font-family: var(--head); font-weight: 800; font-size: 27px; line-height: 1.05;
  text-transform: uppercase; color: var(--bone); text-decoration: none; letter-spacing: .02em; }
.spec-row a.big-tel { font-size: 36px; }
.spec-row a.big-tel:hover { color: var(--lime); }
.spec-row span { display: block; font-size: 15px; color: rgba(243,240,230,.72); margin-top: 4px; }
@media (max-width: 980px) {
  .intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .intro-grid .big { font-size: 18px; }
  .spec { box-shadow: 10px 10px 0 var(--green); padding: 4px 22px; margin-right: 10px; }
  .spec-row a.big-tel { font-size: 32px; }
}

/* ----- services (asymmetric tiles) ----- */
.svc-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 22px; }
.svc-tile { position: relative; background: var(--field); border-top: 4px solid var(--green); padding: 36px 34px 34px;
  overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  box-shadow: 0 1px 0 rgba(243,240,230,.04) inset; }
.svc-tile:hover { transform: translateY(-4px); border-color: var(--lime); box-shadow: 0 22px 40px -18px rgba(0,0,0,.8); }
.svc-tile .ico { width: 58px; height: 58px; color: var(--lime); margin-bottom: 20px; transition: transform .25s ease; }
.svc-tile:hover .ico { transform: translateY(-3px) rotate(-3deg); }
.svc-tile h3 { font-size: 36px; margin-bottom: 12px; }
.svc-tile p { color: rgba(243,240,230,.8); font-size: 17px; max-width: 460px; }
.svc-tile .textlink { margin-top: 8px; }
.svc-tile .textlink::before { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole tile clickable */
.svc-tile .num { position: absolute; top: 22px; right: 26px; font-family: var(--head); font-weight: 800; font-size: 18px;
  letter-spacing: .16em; color: rgba(243,240,230,.38); }
.svc-tile--feature { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 470px; padding: 44px 44px 46px; }
.svc-tile--feature::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: url("images/hero-ridge.svg") center bottom / cover no-repeat; opacity: .75;
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); }
.svc-tile--feature > * { position: relative; z-index: 1; }
.svc-tile--feature .ico { width: 86px; height: 86px; }
.svc-tile--feature h3 { font-size: clamp(44px, 4.4vw, 60px); }
.svc-tile--feature p { font-size: 19px; }
@media (max-width: 860px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-tile--feature { grid-row: auto; min-height: 380px; padding: 36px 28px; }
  .svc-tile { padding: 32px 26px 30px; }
}

/* ----- statement band ----- */
.band { position: relative; background: var(--field); padding: 76px 0 96px; overflow: hidden;
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); margin-top: -34px; }
.band::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: url("images/hero-ridge.svg") center bottom / cover no-repeat; opacity: .55; }
.band-grid { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.band-line { font-family: var(--head); font-weight: 800; text-transform: uppercase; line-height: .92;
  font-size: clamp(40px, 5.6vw, 80px); margin: 0; }
.band-line > span { display: block; color: var(--lime); }
.band-line a { color: inherit; text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) {
  .band { clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%); margin-top: -18px; padding: 64px 0 80px; }
  .band-grid { flex-direction: column; align-items: flex-start; }
  .band-grid .btn-wrap, .band-grid .btn { width: 100%; }
  .band-grid .btn-call { justify-content: center; }
}

/* ----- steps (staggered staircase) ----- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; position: relative; }
.step { position: relative; border-top: 4px solid var(--green); padding-top: 28px; }
.step::before { content: ""; position: absolute; top: -4px; left: 0; width: 64px; height: 4px; background: var(--night); }
.step:nth-child(2) { margin-top: 56px; }
.step:nth-child(3) { margin-top: 112px; }
.step .n { display: block; font-family: var(--head); font-weight: 800; font-size: 132px; line-height: .8;
  color: transparent; -webkit-text-stroke: 2.5px var(--green); }
.step h3 { margin: 22px 0 12px; font-size: 32px; }
.step p { font-size: 18px; color: #262C22; max-width: 340px; margin: 0; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { content: ""; position: absolute; left: 40px; top: 24px; bottom: 24px; width: 4px;
    background: repeating-linear-gradient(180deg, var(--green) 0 18px, transparent 18px 28px); }
  .step, .step:nth-child(2), .step:nth-child(3) { margin: 0; border-top: 0; display: grid; grid-template-columns: 84px 1fr;
    gap: 14px; padding: 18px 0; }
  .step::before { display: none; }
  .step .n { font-size: 76px; padding: 6px 0; text-align: center; background: var(--bone); position: relative; }
  .step h3 { margin: 6px 0 8px; font-size: 28px; }
  .step p { font-size: 17px; }
}

/* ----- service area ----- */
.area-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: stretch; }
.area-grid h2 { margin: 16px 0 22px; }
.area-cards { display: grid; gap: 16px; margin-top: 30px; }
.area-card { position: relative; display: grid; grid-template-columns: 52px 1fr 24px; gap: 18px; align-items: center;
  background: var(--field); border-left: 4px solid var(--green); padding: 22px 24px; text-decoration: none; color: var(--bone);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.area-card:hover { transform: translateX(6px); border-color: var(--lime); background: #222B1E; }
.area-card svg.pin { width: 44px; height: 44px; color: var(--lime); }
.area-card svg.go { width: 22px; height: 22px; color: var(--lime); transition: transform .2s ease; }
.area-card:hover svg.go { transform: translateX(4px); }
.area-card b { display: block; font-family: var(--head); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.area-card span { display: block; font-size: 16px; color: rgba(243,240,230,.74); margin-top: 6px; }
.on-bone .area-card { background: var(--night); }
.mapframe { position: relative; min-height: 460px; box-shadow: 16px 16px 0 var(--green); background: var(--field); }
.mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.04); }
.mapframe .map-tag { position: absolute; left: -6px; top: 18px; z-index: 2; }
.map-note { font-size: 15px; margin-top: 34px; }
@media (max-width: 980px) {
  .area-grid { grid-template-columns: 1fr; gap: 50px; }
  .mapframe { min-height: 340px; box-shadow: 10px 10px 0 var(--green); margin-right: 10px; }
  .area-card b { font-size: 26px; }
}

/* ----- FAQ ----- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq-side h2 { margin: 16px 0 22px; }
.faq-list { border-top: 3px solid var(--night); }
.on-night .faq-list, .on-field .faq-list { border-top-color: var(--green); }
.faq-list details { border-bottom: 1px solid rgba(17,21,16,.18); }
.on-night .faq-list details { border-bottom-color: rgba(243,240,230,.14); }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; gap: 20px; align-items: center;
  padding: 26px 0; font-family: var(--head); font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); text-transform: uppercase; line-height: 1.05; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm { position: relative; width: 34px; height: 34px; background: var(--green); }
.faq-list summary .pm::before { content: ""; position: absolute; left: 9px; right: 9px; top: 15.5px; height: 3px; background: var(--bone);
  box-shadow: none; transition: transform .2s ease; }
.faq-list summary .pm i { position: absolute; top: 9px; bottom: 9px; left: 15.5px; width: 3px; background: var(--bone); transition: transform .2s ease; }
.faq-list details[open] summary .pm i { transform: scaleY(0); }
.faq-list summary:hover { color: var(--green); }
.on-night .faq-list summary:hover { color: var(--lime); }
.faq-list .ans { padding: 0 54px 26px 0; font-size: 18px; }
.faq-list .ans p { margin: 0; }
.on-bone .faq-list .ans a { color: #3F5A12; font-weight: 600; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .faq-side { position: static; }
  .faq-list .ans { padding-right: 0; font-size: 17px; }
}

/* ----- quote section + form ----- */
.quote-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.quote-grid h2 { margin: 16px 0 22px; }
.quote-side .lead { font-size: 20px; color: var(--muted-bone); }
.on-bone .quote-side .lead { color: #262C22; }
.callcard { margin-top: 34px; padding: 30px 30px 32px; background: var(--field); border-top: 4px solid var(--green);
  box-shadow: 12px 12px 0 rgba(0,0,0,.35); color: var(--bone); }
.callcard small { display: block; font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.callcard a.num { display: block; font-family: var(--head); font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1;
  color: var(--bone); text-decoration: none; margin: 10px 0 18px; letter-spacing: .01em; }
.callcard a.num:hover { color: var(--lime); }
.callcard p { font-size: 16px; color: rgba(243,240,230,.76); margin: 0 0 18px; }
.callcard .fb { display: inline-flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: 15px; color: var(--lime); text-decoration: none; margin-top: 4px; }
.callcard .fb svg { width: 20px; height: 20px; }
.form-panel { position: relative; background: var(--field); border-top: 4px solid var(--green); padding: 40px 40px 42px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); color: var(--bone); }
.form-panel h3 { font-size: 30px; margin-bottom: 6px; }
.form-panel .hint { font-size: 15px; color: rgba(243,240,230,.7); margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label, .field .lbl { display: block; font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(243,240,230,.86); margin-bottom: 8px; }
.field label i, .field .lbl i { font-style: normal; color: rgba(243,240,230,.5); letter-spacing: .06em; text-transform: none; font-family: var(--body); font-weight: 400; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--bone); background: #12170F; border: 0;
  box-shadow: inset 0 0 0 1px rgba(243,240,230,.22); padding: 14px 16px; border-radius: 0; min-height: 52px;
  transition: box-shadow .18s ease, background-color .18s ease; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lime); background: #0E120C; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243,240,230,.42); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin: 0; padding: 0; }
.chips legend { padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(243,240,230,.25); color: var(--bone); transition: all .15s ease; user-select: none; }
.chip span::before { content: ""; width: 14px; height: 14px; box-shadow: inset 0 0 0 2px rgba(243,240,230,.5); flex: 0 0 auto; }
.chip input:checked + span { background: var(--lime); color: var(--night); box-shadow: inset 0 0 0 2px var(--lime); }
.chip input:checked + span::before { background: var(--night); box-shadow: none;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.chip input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.file { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px; box-shadow: inset 0 0 0 2px rgba(243,240,230,.22);
  background: repeating-linear-gradient(-45deg, rgba(243,240,230,.03) 0 10px, transparent 10px 20px); }
.file svg { width: 34px; height: 34px; color: var(--lime); }
.file input[type="file"] { font: inherit; font-size: 15px; color: rgba(243,240,230,.8); max-width: 100%; }
.file input[type="file"]::file-selector-button { font-family: var(--head); font-weight: 800; font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; background: transparent; color: var(--bone); border: 0; box-shadow: inset 0 0 0 2px var(--lime);
  padding: 10px 14px; margin-right: 12px; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-panel .btn-wrap { margin-top: 10px; }
.form-panel button.btn-call { font-size: 22px; padding: 18px 50px 18px 28px; }
@media (max-width: 980px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .form-panel { padding: 30px 20px 32px; margin: 0 calc(var(--pad) * -1); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-panel .btn-wrap, .form-panel button.btn-call { width: 100%; }
  .callcard { margin-right: 10px; }
}

/* ----- split (service pages) ----- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; }
.split h2 { margin: 16px 0 24px; }
.split .big { font-size: 21px; }
.checklist { position: relative; background: var(--night); color: var(--bone); border-top: 4px solid var(--green);
  padding: 34px 34px 30px; box-shadow: 16px 16px 0 var(--green); }
.checklist h3 { font-size: 28px; margin-bottom: 18px; }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(243,240,230,.12);
  font-size: 18px; color: rgba(243,240,230,.9); }
.checklist li:last-child { border-bottom: 0; }
.checklist li svg { width: 26px; height: 26px; color: var(--lime); margin-top: 1px; }
.checklist .textlink { margin-top: 18px; }
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split .big { font-size: 18px; }
  .checklist { box-shadow: 10px 10px 0 var(--green); margin-right: 10px; padding: 28px 22px 24px; }
}

/* ----- where + other services (service pages) ----- */
.where-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.where-grid h2 { margin: 16px 0 20px; }
.mini-svc { display: grid; gap: 16px; margin-top: 30px; }
.mini-svc a { position: relative; display: grid; grid-template-columns: 64px 1fr 24px; gap: 18px; align-items: center;
  padding: 22px 24px; background: var(--field); border-top: 4px solid var(--green); color: var(--bone); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease; }
.mini-svc a:hover { transform: translateY(-3px); border-color: var(--lime); }
.mini-svc .ico { width: 54px; height: 54px; color: var(--lime); }
.mini-svc b { display: block; font-family: var(--head); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1; }
.mini-svc span { display: block; font-size: 16px; color: rgba(243,240,230,.74); margin-top: 6px; }
.mini-svc svg.go { width: 22px; height: 22px; color: var(--lime); }
@media (max-width: 860px) { .where-grid { grid-template-columns: 1fr; gap: 60px; } }

/* ----- services hub rows ----- */
.svc-row { display: grid; grid-template-columns: 420px 1fr; gap: 70px; align-items: center; padding: 60px 0;
  border-bottom: 1px solid rgba(17,21,16,.16); }
.svc-row:first-child { padding-top: 0; }
.svc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-row:nth-child(even) { grid-template-columns: 1fr 420px; }
.svc-row:nth-child(even) .plate { order: 2; }
.svc-row .plate { width: 100%; animation: none; }
.svc-row h2 { font-size: clamp(44px, 5vw, 72px); margin: 14px 0 20px; }
.svc-row p { font-size: 20px; max-width: 560px; }
.svc-row .ctas { margin-top: 26px; }
@media (max-width: 980px) {
  .svc-row, .svc-row:nth-child(even) { grid-template-columns: 1fr; gap: 34px; padding: 50px 0; }
  .svc-row:nth-child(even) .plate { order: 0; }
  .svc-row .plate { width: 220px; box-shadow: 10px 10px 0 rgba(0,0,0,.25); }
  .svc-row p { font-size: 18px; }
}

/* ----- town pages ----- */
.svc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; border-top: 3px solid var(--night); }
.svc-list a { position: relative; display: block; padding: 30px 28px 30px 0; color: var(--night); text-decoration: none;
  border-right: 1px solid rgba(17,21,16,.16); }
.svc-list a + a { padding-left: 28px; }
.svc-list a:last-child { border-right: 0; }
.svc-list .ico { width: 54px; height: 54px; color: var(--green); margin-bottom: 16px; transition: transform .2s ease; }
.svc-list a:hover .ico { transform: translateY(-4px); }
.svc-list b { display: block; font-family: var(--head); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.svc-list span { display: block; margin-top: 10px; font-size: 17px; color: #262C22; }
.svc-list .textlink { margin-top: 14px; }
@media (max-width: 860px) {
  .svc-list { grid-template-columns: 1fr; }
  .svc-list a, .svc-list a + a { padding: 26px 0; border-right: 0; border-bottom: 1px solid rgba(17,21,16,.16); }
}
.mapwide { position: relative; height: 480px; box-shadow: 16px 16px 0 var(--green); }
.mapwide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.04); }
.mapwide .map-tag { position: absolute; left: -6px; top: 18px; z-index: 2; }
@media (max-width: 860px) { .mapwide { height: 360px; box-shadow: 10px 10px 0 var(--green); margin-right: 10px; } }

.near { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 30px 32px;
  background: var(--night); color: var(--bone); border-left: 6px solid var(--lime); }
.near h3 { font-size: 30px; }
.near p { margin: 6px 0 0; color: rgba(243,240,230,.8); }
.near svg { width: 56px; height: 56px; color: var(--lime); }
@media (max-width: 700px) { .near { grid-template-columns: 1fr; padding: 26px 22px; } }

/* simple centered message (thanks, 404) */
.msg { max-width: 760px; }
.msg h1 { font-size: clamp(56px, 8vw, 110px); }

/* ==================== FOOTER ==================== */
.site-footer { position: relative; background: var(--deep); color: rgba(243,240,230,.76); padding: 90px 0 40px; font-size: 16px;
  border-top: 3px solid var(--green); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 46px; }
.foot-brand img { width: 130px; height: 130px; margin-bottom: 18px; }
.foot-brand .brand-name { color: var(--bone); font-size: 26px; }
.foot-brand p { margin-top: 14px; max-width: 340px; }
.site-footer h4 { font-size: 17px; letter-spacing: .18em; color: var(--lime); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(243,240,230,.86); text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.site-footer .foot-tel { display: block; font-family: var(--head); font-weight: 800; font-size: 32px; color: var(--bone); margin-bottom: 10px; }
.foot-fb { display: inline-flex; align-items: center; gap: 10px; }
.foot-fb svg { width: 20px; height: 20px; color: var(--lime); }
.foot-bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(243,240,230,.12); display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; font-size: 14px; color: rgba(243,240,230,.6); }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 34px; } .site-footer { padding-top: 70px; } }

/* ==================== MOTION ==================== */
.reveal-stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: .24s; }

/* ==================== MOBILE HEADER ==================== */
@media (max-width: 860px) {
  .site-header { height: 68px; }
  .is-scrolled .site-header { height: 68px; }
  .brand { gap: 12px; }
  .brand img, .is-scrolled .brand img { width: 54px; height: 54px; margin: 0; }
  .brand-name { font-size: 19px; }
  .brand-name em { font-size: 12px; letter-spacing: .18em; margin-top: 4px; }
  html { scroll-padding-top: 80px; }
}
@media (max-width: 360px) { .brand-name { font-size: 17px; } .brand-name em { font-size: 11px; } }

/* ==================== SMALL FIXES ==================== */
.big { font-size: 20px; }
@media (max-width: 860px) { .big { font-size: 18px; } }
.on-bone p a, .on-bone .ans a, .on-bone .big a { color: #3F5A12; font-weight: 600; }
.on-night p a, .on-field p a, .band-line a { color: var(--lime); }
.band-line a { color: inherit; }
.band--flat { clip-path: none; margin-top: 0; }
.fs { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.file-note { font-size: 14px; margin: 8px 0 0; color: var(--lime); min-height: 1em; }
.form-panel .hint a { color: var(--lime); font-weight: 600; }
.svc-list span.textlink { display: inline-flex; font-size: 15px; color: #3F5A12; margin-top: 14px; }
.sr-only:focus { position: fixed; left: 10px; top: 10px; width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 16px; background: var(--lime); color: var(--night); z-index: 400; font-family: var(--head);
  font-weight: 800; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }

/* grid items never wider than their track (file inputs and long words pushed the phone layout to 411px) */
.quote-grid > *, .area-grid > *, .split > *, .where-grid > *, .intro-grid > *, .faq-grid > *, .hero-grid > *, .phero-grid > * { min-width: 0; }
.file input[type="file"] { min-width: 0; width: 100%; }

.nw { white-space: nowrap; }
@media (max-width: 860px) {
  .svc-tile--feature { min-height: 470px; }
  .svc-tile--feature::after { height: 44%; opacity: .6; }
  .area-card { grid-template-columns: 34px 1fr 20px; gap: 14px; padding: 18px 18px 18px 16px; }
  .area-card svg.pin { width: 34px; height: 34px; }
  .area-card b { font-size: 24px; }
  .area-card span { font-size: 15px; }
}

.svc-row .plate { box-shadow: 16px 16px 0 var(--green); }
@media (max-width: 980px) { .svc-row .plate { box-shadow: 10px 10px 0 var(--green); } }

/* links inside dark panels that sit on Bone sections */
.on-bone .checklist .textlink, .on-bone .near p a { color: var(--lime); }
/* map fallback panel: shows while the live Google map loads */
.map-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background-color: var(--field);
  background-image: linear-gradient(rgba(141,184,58,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(141,184,58,.07) 1px, transparent 1px);
  background-size: 48px 48px; color: var(--bone); text-align: center; padding: 20px; }
.map-fallback svg { width: 56px; height: 56px; color: var(--lime); }
.map-fallback b { font-family: var(--head); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1; }
.mapframe iframe, .mapwide iframe { z-index: 1; }

@media (max-width: 980px) { .quote--form-first .form-panel { order: -1; } }

/* phone numbers wrapped for no-break keep their parent's type (beats .spec-row span and similar) */
span.nw.nw { display: inline; font: inherit; color: inherit; letter-spacing: inherit; margin: 0; white-space: nowrap; }
.area-card b, .mini-svc b { color: var(--bone); }