/* Hisway marketing site — shared design system, v2 (Phase 9.1, Wave 1).
   Built to the owner-approved direction in .planning/phases/09.1-owner-feedback-world-class/09.1-MOCK.html.

   What changed from v1, and why (owner walkthrough 2026-10-07):
   - Desktop is its own composition, not the phone column blown up: a 1280px container with 64px
     gutters, 2-column "head + lede" section heads, split heroes, 120px section rhythm.
   - Type is big: the root size steps 16 → 17 → 19px, display H1 reaches ~104px, H2 ~64px.
   - Light-first: paper/white sections; pine is kept for the ONE proof band (.cred), the lead form
     and the footer. Reviews, inner heroes and closing CTA bands are light now.
   - Chrome: a clean header (no utility strip — owner, 2026-10-08), inline service links, a Free Inspection
     button, and a "Menu" button that opens a full overlay (never pushes the page down).
   - Signature voice: .chalk (one hand-drawn green circle per view) and .tagm evidence tags.

   EVERY class name live pages already use is kept, so every page restyles with no markup change.
   Display type is Oswald (approved Microgramma stand-in); Kanit for stats + card H3; Zilla Slab for
   human names only. Theme follows the visitor: light by default, dark under prefers-color-scheme
   (or an explicit [data-theme]). All faces are self-hosted. */

@font-face{font-family:'Microgramma';src:url(/assets/fonts/microgramma.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Oswald';src:url(/assets/fonts/oswald-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Kanit';src:url(/assets/fonts/kanit.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Zilla Slab';src:url(/assets/fonts/zilla-slab-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* Metric-matched fallback for Oswald 700 so the giant display headings hold the same box before
   and after the web font swaps in (no CLS). Values from the real Oswald metrics against Arial. */
@font-face{font-family:'Oswald-fallback';src:local('Arial');font-weight:700;
  size-adjust:94.22%;ascent-override:126.62%;descent-override:30.67%;line-gap-override:0%;}

/* ============================================================
   DESIGN TOKENS — light (default)
   ============================================================ */
:root{
  color-scheme:light;

  --gut:20px;                 /* side gutter: 20 phone · 32 tablet · 64 desktop */
  --maxw:1280px;              /* the desktop container (gutters included) */
  /* inline padding that centers content in the container at any width */
  --px:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));
  --sec-y:64px;               /* section rhythm: 64 phone · 88 tablet · 120 desktop */
  --bar-h:64px;

  --radius:16px; --radius-sm:12px; --radius-lg:22px; --radius-xl:30px;

  --bg:#f2f4ee; --surface:#ffffff; --surface-2:#eef1e9; --surface-3:#e6ebe0;
  --ink:#191414; --muted:#5c665a; --faint:#8b938a;
  --line:#e1e5da; --line-strong:#cfd6c6;

  --pine:#0d2117;            /* the one dark band, the lead form, the footer */
  --pine-2:#12301f;          /* raised element inside a band */
  --pine-line:#254634;
  --on-pine:#eef4ef;
  --on-pine-muted:#b9cfc0;   /* raised from #a7c0af for AA at small sizes (audit X5) */
  --foot:#08150e;

  --green:#1db954; --green-hover:#17a648; --green-text:#127c35;
  --green-soft:#e8f6ec; --on-green:#ffffff; --green-onpine:#43d977; --green-onmedia:#55e78a;

  --gold:#C9971F;            /* STAR RATINGS + repair pins only */
  --error:#c0392b;

  --shadow:0 1px 2px rgba(20,25,20,.06),0 10px 28px -14px rgba(20,25,20,.22);
  --shadow-lift:0 2px 6px rgba(20,25,20,.08),0 30px 60px -30px rgba(13,33,23,.45);

  --brand:'Oswald','Oswald-fallback',system-ui,sans-serif; /* display H1/H2 */
  --stat:'Kanit',system-ui,sans-serif;                   /* stat figures + card H3 */
  --serif:'Zilla Slab','Iowan Old Style',Palatino,Georgia,serif; /* human names only */
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* evidence tags */

  /* compatibility aliases for older selectors + holdings.css */
  --green-act:var(--green-text);
  --green-deep:var(--pine);
  --ink-soft:var(--muted);
  --ink-faint:var(--faint);
  --ground:var(--surface);
  --panel:var(--surface-2);
  --backdrop:var(--bg);
  --gutter:var(--gut);
}

/* ============================================================
   DESIGN TOKENS — dark (visitor's OS preference, unless [data-theme=light])
   ============================================================ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0c110e; --surface:#131a16; --surface-2:#1b241f; --surface-3:#212d26;
    --ink:#e9f1ec; --muted:#9db2a5; --faint:#63796d;
    --line:#253029; --line-strong:#33423a;
    --pine:#07120d; --pine-2:#132219; --pine-line:#2b3d31;
    --on-pine:#eef4ef; --on-pine-muted:#a9bfb1; --foot:#040a07;
    --green:#22cc5e; --green-hover:#31d96b; --green-text:#5fe08a;
    --green-soft:#10281a; --on-green:#04140a; --green-onpine:#3fe07a;
    --gold:#E0B34D;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.8);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 30px 60px -26px rgba(0,0,0,.85);
  }
}
/* explicit toggle wins both directions */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c110e; --surface:#131a16; --surface-2:#1b241f; --surface-3:#212d26;
  --ink:#e9f1ec; --muted:#9db2a5; --faint:#63796d;
  --line:#253029; --line-strong:#33423a;
  --pine:#07120d; --pine-2:#132219; --pine-line:#2b3d31;
  --on-pine:#eef4ef; --on-pine-muted:#a9bfb1; --foot:#040a07;
  --green:#22cc5e; --green-hover:#31d96b; --green-text:#5fe08a;
  --green-soft:#10281a; --on-green:#04140a; --green-onpine:#3fe07a;
  --gold:#E0B34D;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.8);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 30px 60px -26px rgba(0,0,0,.85);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;
  line-height:1.6;-webkit-font-smoothing:antialiased;}
body.menu-open{overflow:hidden;}
.site{background:var(--bg);min-height:100vh;position:relative;overflow-x:clip;}
img{max-width:100%;display:block;}
a{color:inherit;}
.icon{width:1em;height:1em;flex:none;}
main{display:block;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* skip link — first focusable thing on every page (audit X4) */
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--green);color:var(--on-green);
  font-weight:700;padding:12px 18px;border-radius:12px;text-decoration:none;transition:top .15s;}
.skip:focus{top:12px;}

.eyebrow{font-family:var(--brand);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.8rem;color:var(--green-text);
  display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);border-radius:2px;flex:none;}

.stars5{display:inline-flex;gap:2px;color:var(--gold);line-height:0;}
.stars5 svg{width:14px;height:14px;fill:currentColor;}

.ribbon{background:var(--pine);color:var(--green-onpine);text-align:center;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;padding:6px;font-family:var(--brand);font-weight:700;}

/* ---- Signature: green chalk. One hand-drawn circle per view, on the claim that matters. The
   SVG path is drawn by Chalk.astro, the turbulence filter #chalkf by the layouts; this places it. */
.chalk{position:relative;display:inline-block;white-space:nowrap;z-index:0;}
.chalk>svg.ck{position:absolute;left:-7%;top:-14%;width:114%;height:128%;z-index:-1;overflow:visible;pointer-events:none;}
.chalk>svg.ck path{fill:none;stroke:var(--green);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.95;filter:url(#chalkf);}

/* ---- Signature: evidence tag. Says where a fact comes from (HISWAY FOOTAGE, FROM OUR JOB RECORDS). */
/* ---- Painting's signature: one strip of green painter's tape under the claim that matters
   (Tape.astro). The torn ends are a clip-path; the strip sits behind the lower half of the words. */
.tape{position:relative;display:inline-block;white-space:nowrap;z-index:0;}
.tape::before{content:"";position:absolute;left:-.14em;right:-.14em;top:46%;bottom:-2%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%),color-mix(in srgb,var(--green) 46%,transparent);
  transform:rotate(-1.3deg);
  clip-path:polygon(1% 0,99% 0,97.6% 18%,99.6% 36%,97.3% 55%,99.4% 74%,97.9% 100%,2% 100%,.4% 80%,2.6% 60%,.3% 40%,2.4% 20%);}
.tagm{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;}

/* ============================================================
   HEADER
   ============================================================ */
.bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:8px;
  min-height:var(--bar-h);padding:8px var(--px);
  background:var(--bg);
  border-bottom:1px solid var(--line);}
.brand{margin-right:auto;display:flex;align-items:center;text-decoration:none;min-width:0;}
.brand img,.brand svg{width:auto;display:block;}
/* Logos: every brand uses the SAME horizontal lockup (owner, 2026-10-08) — one file shape, one
   height, so the four headers match exactly. The viewBoxes are cropped tight to the artwork. */
.brand img.brandlogo{height:30px;max-width:calc(100vw - 156px);object-fit:contain;object-position:left center;}
/* real logo image — the <picture> in BaseLayout swaps to the on-dark file by the OS theme, so
   only ONE logo file is ever downloaded. */
.brand picture{display:block;}
.navlinks{display:none;}
.bar .cta{display:none;}
/* icon buttons: menu + call */
.menubtn,.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:48px;height:48px;border-radius:12px;
  background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);flex:none;cursor:pointer;
  font:700 .95rem/1 var(--body);text-decoration:none;transition:box-shadow .16s,color .16s,background .16s;}
.menubtn:hover,.iconbtn:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green-text);}
.menubtn svg,.iconbtn svg{width:22px;height:22px;flex:none;}
.menubtn-lbl{display:none;}
.callbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
  background:var(--green);color:var(--on-green);flex:none;text-decoration:none;
  box-shadow:0 6px 16px -8px rgba(29,185,84,.7);transition:background .16s;}
.callbtn:hover{background:var(--green-hover);}
.callbtn svg{width:21px;height:21px;}
.mk-one{display:none;}
html[data-market] .mk-all{display:none!important;}
html[data-market] .mk-one{display:inline!important;}
.loc{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap;}

/* ============================================================
   OVERLAY MENU — opens OVER the page (phone: a full-screen sheet; desktop: a 4-column sheet)
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:120;background:var(--surface);color:var(--ink);
  display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;}
.overlay[hidden]{display:none;}
.ov-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--bar-h);
  padding:8px var(--px);border-bottom:1px solid var(--line);flex:none;}
.ov-top .brand{margin-right:0;}
.ov-body{padding:24px var(--px) 48px;display:grid;gap:30px;}
.ov-col h2{margin:0 0 6px;font-family:var(--brand);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--green-text);font-weight:700;}
.ov-col a{display:block;padding:12px 0;font-size:1.25rem;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line);color:var(--ink);}
.ov-col a:hover{color:var(--green-text);}
.ov-col a.on{color:var(--green-text);}
.ov-col a small{display:block;font-size:.9rem;font-weight:500;color:var(--muted);margin-top:2px;}
.ov-cta{display:grid;gap:10px;align-content:start;}
.ov-cta .btn{width:100%;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;letter-spacing:.01em;border-radius:12px;
  padding:0 24px;min-height:54px;font-size:1.05rem;line-height:1.15;text-align:center;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;}
.btn-primary,.btn-green{background:var(--green);color:var(--on-green);
  box-shadow:0 10px 24px -12px rgba(29,185,84,.8);}
.btn-primary:hover,.btn-green:hover{background:var(--green-hover);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(1px);}
/* ghost/line = a quiet outline. Light grounds get an ink outline; dark grounds (pine bands, the
   phone video hero) get a translucent white one. */
.btn-ghost,.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover,.btn-line:hover{border-color:var(--green);color:var(--green-text);}
.cred .btn-ghost,.lead .btn-ghost,.hold-band .btn-ghost,.on-dark .btn-ghost,footer .btn-ghost{
  background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38);}
/* dark = solid pine on a light section */
.btn-dark{background:var(--pine);color:var(--on-pine);border-color:var(--pine-line);}
.btn-dark:hover{background:var(--pine-2);transform:translateY(-1px);}
.btn svg{width:20px;height:20px;flex:none;}

/* ============================================================
   HERO (home) — one media element (Hero.astro), full-bleed on every screen (owner, 2026-10-08).
   Phone: the clip or photo behind the words with a bottom scrim. Desktop (≥1024): the same media
   edge to edge with a left scrim; a hero with no media (Lighting) is the light split with facts.
   ============================================================ */
.hero{position:relative;color:#fff;padding:40px var(--px) 30px;overflow:hidden;isolation:isolate;background:var(--pine);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(calc(100svh - var(--bar-h) - 24px),740px);}
.hero .bg{position:absolute;inset:0;z-index:-2;background:var(--pine);}
.hero .bg picture{display:block;width:100%;height:100%;}
.hero .bg img,.hero .bg video{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
/* the still paints first; the clip sits on top of it and takes over once it has frames */
.hero .bg picture+video{position:absolute;inset:0;}
/* Phone scrim: light (owner, 2026-10-08: the heroes were "too dark" on the lower half). The picture
   stays bright; the words carry their own soft shadow instead of a near-black wash. */
.hero .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,16,11,0) 0%,rgba(6,16,11,0) 22%,rgba(6,16,11,.36) 46%,rgba(6,16,11,.54) 72%,rgba(6,16,11,.66) 100%);}
.hero--media h1,.hero--media .hero-in>p,.hero--media .rating,.hero--media .proof,.hero--media .eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 22px rgba(0,0,0,.55);}
.hero--media .hero-in>p{color:#fff;}
/* an inner page or town page leading with video: its breadcrumb reads light over the clip */
.hero--media .crumbs,.hero--media .crumbs a{color:#d6e2da;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.hero--plain{min-height:0;padding-top:56px;padding-bottom:48px;
  background:radial-gradient(120% 90% at 85% 0%,rgba(29,185,84,.22),transparent 55%),var(--pine);}
.hero--plain .scrim{display:none;}
.hero .eyebrow{color:#7ff0a8;}
.hero .eyebrow::before{background:#7ff0a8;}
/* over a picture on a phone the small label is white — light green vanished against a bright sky */
@media (max-width:1023.98px){
  .hero--media .eyebrow{color:#fff;}
  .hero--media .bg img,.hero--media .bg video{transform:scale(var(--hero-zoom-m,1));transform-origin:var(--hero-origin-m,50% 50%);}
}
.hero h1{font-family:var(--brand);font-weight:700;text-transform:uppercase;
  font-size:2.9rem;line-height:.98;letter-spacing:.005em;margin:14px 0 0;text-wrap:balance;}
.hero h1 em{font-style:normal;color:var(--green-onmedia);}
.hero .chalk>svg.ck path{stroke:var(--green-onmedia);}
.hero .hero-in>p{margin:14px 0 0;font-size:1.08rem;color:#dfe9e2;max-width:40ch;}
.rating,.proof{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:.95rem;font-weight:600;flex-wrap:wrap;}
/* the Google rating: stars and words on one centered line, the whole thing a link to the listing */
.rating{align-items:center;gap:10px;color:inherit;text-decoration:none;width:fit-content;min-height:44px;}
.rating .stars5{flex:none;}
/* phone: the rating line sits centered under the words (owner, 2026-10-08: it read off-center) */
@media (max-width:1023.98px){.hero .rating{margin-left:auto;margin-right:auto;justify-content:center;text-align:center;}}
.rating b{font-family:var(--stat);font-size:1.15em;}
.rating u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a.rating:hover u{text-decoration-thickness:2px;}
.rating>svg,.proof>svg{width:20px!important;height:20px!important;flex:none;color:var(--green-onmedia);margin-top:2px;}
.rating .stars5 svg{width:17px;height:17px;}
.cta-row{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.hero .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38);}
.hero-aside{display:none;}
/* Decorative chip rows were removed (owner: "they look clickable and do nothing"). If one is still
   in the markup it renders as one plain sentence, never pills. */
.trust-chips{display:block;margin-top:14px;font-size:.92rem;color:inherit;opacity:.85;}
.trust-chips span{display:inline;}
.trust-chips span+span::before{content:" · ";}

/* ============================================================
   SECTION scaffolding
   ============================================================ */
section{padding:var(--sec-y) var(--px);}
.sec-head{margin-bottom:30px;}
.sec-head h2{font-family:var(--brand);font-weight:700;text-transform:uppercase;
  font-size:2.15rem;line-height:1.04;letter-spacing:.005em;margin:12px 0 0;text-wrap:balance;color:var(--ink);}
.sec-head h3{font-family:var(--stat);font-weight:700;font-size:1.35rem;line-height:1.2;margin:8px 0 0;color:var(--ink);}
.sec-head p{margin:14px 0 0;color:var(--muted);font-size:1.1rem;max-width:60ch;}
.sec-head h2 em{font-style:normal;color:var(--green-text);}

/* ============================================================
   SERVICES (home)
   ============================================================ */
.svc-grid{display:grid;gap:14px;}
.svc{display:flex;flex-direction:column;padding:24px 22px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);position:relative;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-strong);}
.ic{flex:none;width:56px;height:56px;border-radius:14px;background:var(--green-soft);display:grid;place-items:center;
  color:var(--green-text);transition:background .18s,color .18s;}
.svc .ic{margin-bottom:16px;}
.svc:hover .ic{background:var(--green);color:var(--on-green);}
.ic svg{width:28px;height:28px;}
.svc h3{margin:0 0 8px;font-family:var(--stat);font-weight:700;font-size:1.35rem;letter-spacing:-.005em;line-height:1.15;color:var(--ink);}
.svc p{margin:0;font-size:1rem;color:var(--muted);}
.svc>div{display:flex;flex-direction:column;flex:1;}
.go{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-family:var(--brand);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.82rem;color:var(--green-text);text-decoration:none;}
.svc>div .go{margin-top:auto;padding-top:16px;}

/* ============================================================
   CREDIBILITY — THE one dark proof band mid-page
   ============================================================ */
.cred{background:var(--pine);color:var(--on-pine);}
.cred .eyebrow{color:var(--green-onpine);}
.cred .eyebrow::before{background:var(--green-onpine);}
.cred h2{color:var(--on-pine);}
.cred h2 em{color:var(--green-onpine);}
.cred p,.cred .sec-head p{color:var(--on-pine-muted);}
.cred-photo{border-radius:var(--radius-lg);overflow:hidden;margin:0 0 18px;border:1px solid var(--pine-line);}
.cred-photo img{width:100%;height:220px;object-fit:cover;}
/* a crew clip over its first frame (Lighting's night band): plays once it nears the screen (lazy-video.js) */
.cred-photo{position:relative;}
.cred-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;}
.cred-photo video.on{opacity:1;}
.cred-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--pine-line);
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--pine-line);}
.cred-stats div{background:var(--pine-2);padding:22px 16px;text-align:center;}
.cred-stats b{font-family:var(--stat);font-weight:700;font-size:2.1rem;color:var(--green-onpine);display:block;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.cred-stats span{font-size:.92rem;color:var(--on-pine);margin-top:8px;display:block;line-height:1.35;}
.cred .warr{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cred .warr span{font-size:.95rem;color:var(--on-pine);}
.cred .warr b{color:var(--green-onpine);font-weight:700;}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--surface);}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.member{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:18px 12px;text-align:center;}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  font-family:var(--serif);font-weight:400;font-size:1.9rem;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,#1db954,#0d5f2c);}
img.avatar{object-fit:cover;}
.member b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--ink);line-height:1.15;}
.member span{font-size:.88rem;color:var(--muted);margin-top:4px;display:block;}

/* ============================================================
   MAP legend (the Leaflet/Google map itself lives in FinishedJobMap.astro)
   ============================================================ */
.legend{display:flex;gap:16px;margin-top:14px;font-size:.88rem;color:var(--muted);align-items:center;flex-wrap:wrap;}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:-1px;}
.legend .rep{background:var(--green);}
.legend .fix{background:var(--gold);}
.legend .live{margin-left:auto;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;}

/* ============================================================
   REVIEWS — light now (owner: desktop was "everything black"). A real rating anchor, then
   uniform cards (grid row-stretch + a 4-line clamp).
   ============================================================ */
.reviews{background:var(--bg);color:var(--ink);}
.rev-intro{color:var(--muted);font-size:1.05rem;max-width:60ch;margin:0 0 18px;}
.rev-summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px;text-align:center;}
.rev-summary .num{font-family:var(--stat);font-weight:700;font-size:3rem;line-height:1;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.rev-summary .stars5{margin-top:8px;}
.rev-summary .stars5 svg{width:18px;height:18px;}
.rev-summary .count{margin:12px 0 0;font-size:1rem;color:var(--muted);}
.rev-summary .btn{margin-top:16px;}
.rev-sample-note{margin:18px 0 0;font-size:.85rem;color:var(--muted);text-align:center;}
.rev-grid{display:grid;gap:14px;margin-top:14px;}
.rev-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;
  display:flex;flex-direction:column;}
.rev-card .stars5 svg{width:14px;height:14px;}
.rev-quote{margin:12px 0 16px;font-size:1rem;color:var(--ink);line-height:1.55;flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);}
.rev-who{display:flex;align-items:baseline;gap:6px;margin-top:auto;}
.rev-who b{font-size:1rem;color:var(--ink);font-family:var(--serif);font-weight:400;}
.rev-who span{font-size:.85rem;color:var(--muted);}
.rev-foot{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--muted);}
.rev-foot a{color:var(--green-text);font-weight:700;text-decoration:none;}
/* Honest-empty: says what will be here and where it comes from — never a fake review. */
.rev-empty{color:var(--muted);font-size:1.02rem;background:var(--surface);border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);padding:24px;margin:0;max-width:72ch;}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gal .cell{border-radius:var(--radius);overflow:hidden;background:var(--surface-2);border:1px solid var(--line);}
.gal img{width:100%;height:224px;object-fit:cover;object-position:center 20%;}
.gal .cell:nth-child(3n+1) img{object-position:center 12%;}
.gal .cell:nth-child(3n+2) img{object-position:center 38%;}
.gal .cell:nth-child(3n+3) img{object-position:center 62%;}
.gal .cell:nth-child(4n) img{object-position:center 30%;}
.cc-note{margin-top:16px;font-size:.88rem;color:var(--muted);display:flex;gap:8px;align-items:center;}
.cc-note svg{width:16px;height:16px;color:var(--green-text);flex:none;}
.cc-note b{color:var(--green-text);}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area{background:var(--surface);}
/* Town links read as real link tiles (with an arrow), never as decorative pills. Plain <span>
   entries are text, not buttons. */
.area-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.area-chips a{padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);text-decoration:none;
  font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--ink);min-height:48px;min-width:0;overflow-wrap:anywhere;}
.area-chips a::after{content:"→";color:var(--green-text);}
.area-chips a:hover{border-color:var(--green);}
.area-chips span{padding:8px 0;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}
.area-chips .hi{color:var(--green-text);}
.market-cards{display:grid;gap:14px;}
.market-card{display:flex;flex-direction:column;gap:4px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s;}
.market-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.market-card b{font-family:var(--brand);text-transform:uppercase;font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1;}
.market-card>span{font-size:1rem;color:var(--muted);margin-top:4px;}
.market-card .go{margin-top:12px;}

/* ============================================================
   LEAD FORM (pine band + white card) — the second dark moment; proof sits beside the form
   ============================================================ */
.lead{background:var(--pine);color:var(--on-pine);}
.lead h2{color:var(--on-pine);}
.lead .eyebrow{color:var(--green-onpine);}
.lead .eyebrow::before{background:var(--green-onpine);}
.lead .sec-head p,.lead p.s{color:var(--on-pine-muted);}
.lead .sec-head{margin-bottom:24px;}
.lead-call{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px;font-weight:600;color:var(--on-pine);font-size:1.02rem;}
.lead-call svg{width:20px;height:20px;color:var(--green-onpine);flex:none;}
.lead-call a{color:var(--on-pine);font-family:var(--stat);font-size:1.2rem;text-decoration:none;}
.lead-call a:hover{color:var(--green-onpine);}
.form{background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);padding:22px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
.form label{display:block;font-size:.9rem;font-weight:700;color:var(--ink);margin:0 0 6px;}
.form .fld{margin-bottom:14px;}
.form input,.form textarea,.form select{width:100%;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:14px;
  font-size:16px;font-family:inherit;color:var(--ink);background:var(--bg);transition:border-color .16s,box-shadow .16s;}
.form textarea{resize:vertical;min-height:96px;}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
.form .btn-primary{width:100%;margin-top:4px;}
.form .pipe{margin-top:13px;font-size:.86rem;color:var(--muted);text-align:center;display:flex;gap:8px;justify-content:center;align-items:center;}
.form .pipe svg{width:15px;height:15px;color:var(--green-text);flex:none;}
.form .pipe b{color:var(--green-text);}
.lead .or{text-align:center;margin-top:16px;font-size:1rem;color:var(--on-pine-muted);}
.lead .or a{color:var(--green-onpine);font-weight:700;text-decoration:underline;}

/* ============================================================
   FOOTER — a real one: big logo, a note, four columns, a legal row
   ============================================================ */
footer{background:var(--foot);color:#c9d9cf;padding:56px var(--px) 120px;}
footer .fbrand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#eef4ef;}
footer .fbrand img{height:40px;width:auto;max-width:100%;}
footer .one{margin:16px 0 0;font-size:1.05rem;color:#bcd0c3;max-width:46ch;line-height:1.55;}
footer .one a{color:#55e78a;font-weight:700;text-decoration:none;}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:30px 20px;margin-top:36px;}
.fcols h2{margin:0 0 8px;font-family:var(--brand);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:#55e78a;font-weight:700;}
.fcols a,.fcols p{display:block;text-decoration:none;color:#dfe9e2;font-size:1rem;padding:10px 0;margin:0;}
.fcols a:hover{color:#55e78a;}
.fcols a small,.fcols p small{display:block;color:#a9c1b2;font-size:.86rem;}
.fcols .fgap{margin-top:16px;}
footer .flinks{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:1rem;margin-top:24px;}
footer .flinks a{color:#dfe9e2;text-decoration:none;}
footer .flinks a:hover{color:#55e78a;}
footer .meta{margin-top:36px;padding-top:20px;border-top:1px solid #1f3a2a;font-size:.9rem;color:#a9c1b2;
  display:flex;flex-wrap:wrap;gap:6px 18px;line-height:1.6;}
footer .meta a{color:#a9c1b2;}
footer .meta a:hover{color:#eef4ef;}

/* ============================================================
   INNER-PAGE BUILDING BLOCKS
   ============================================================ */

/* Inner page hero — LIGHT now (audit G9). Phone: title on paper, then the page's real image as a
   rounded card below it. Desktop: title left, the image framed on the right. */
.phero{position:relative;color:var(--ink);padding:28px var(--px) 40px;background:var(--bg);
  display:flex;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line);}
.phero>*{max-width:100%;}
.phero .bg{order:10;position:relative;align-self:stretch;margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;background:var(--surface-2);}
.phero .bg:empty,.phero .bg:not(:has(img,video,picture)){display:none;}
.phero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.phero .scrim{display:none;}
.phero h1{font-family:var(--brand);font-weight:700;text-transform:uppercase;
  font-size:2.6rem;line-height:1;letter-spacing:.005em;margin:12px 0 0;text-wrap:balance;color:var(--ink);}
.phero h1 em{font-style:normal;color:var(--green-text);}
.phero p{margin:14px 0 0;font-size:1.12rem;color:var(--muted);max-width:52ch;}
.phero .cta-row{align-self:stretch;}
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--green-text);}

/* prose */
.prose p{font-size:1.06rem;color:var(--muted);margin:0 0 16px;}
.prose h3{font-family:var(--stat);font-weight:700;font-size:1.3rem;color:var(--ink);margin:28px 0 8px;}
.prose strong{color:var(--ink);}
.lead-in{font-size:1.18rem;color:var(--ink);font-weight:600;margin:0 0 18px;line-height:1.5;}

/* numbered steps */
.steps{display:grid;gap:18px;counter-reset:step;}
.step{display:flex;gap:16px;align-items:flex-start;}
.step .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-text);display:grid;place-items:center;
  font-family:var(--stat);font-weight:700;font-size:1.1rem;}
.step h3,.step h4{margin:6px 0 4px;font-family:var(--stat);font-weight:700;font-size:1.15rem;color:var(--ink);line-height:1.3;}
.step p{margin:0;font-size:1rem;color:var(--muted);}

/* checklist */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:1.04rem;color:var(--ink);}
.checks li svg{width:21px;height:21px;flex:none;color:var(--green-text);margin-top:2px;}
.checks li b{font-weight:700;}

/* callout card */
.card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:var(--surface);}
.card.tint{background:var(--surface-2);}
.card h3{font-family:var(--stat);font-weight:700;font-size:1.25rem;color:var(--ink);margin:0 0 8px;}
.card p{font-size:1rem;color:var(--muted);margin:0;}

/* price / plan card */
.plan{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);}
.plan .top{background:var(--pine);color:var(--on-pine);padding:22px 20px 20px;}
.plan .top .k{font-family:var(--brand);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--green-onpine);}
.plan .top h3{font-family:var(--stat);font-weight:700;font-size:1.5rem;margin:6px 0 0;color:var(--on-pine);}
.plan .top .price{font-family:var(--stat);font-weight:700;font-size:1.2rem;color:var(--green-onpine);margin-top:4px;}
.plan ul{list-style:none;margin:0;padding:20px;display:grid;gap:12px;}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:1.02rem;color:var(--ink);}
.plan li svg{width:19px;height:19px;flex:none;color:var(--green-text);margin-top:2px;}

/* faq — an open hairline list, not boxed cards */
.faq{border-top:1px solid var(--line-strong);}
.faq details{border-bottom:1px solid var(--line-strong);}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:700;font-size:1.12rem;color:var(--ink);position:relative;line-height:1.35;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.7rem;font-weight:400;color:var(--green-text);line-height:1.2;}
.faq details[open] summary::after{content:"\2013";}
.faq p{margin:0 0 20px;font-size:1.02rem;color:var(--muted);max-width:68ch;}

/* closing CTA band — light now, so the page keeps ONE dark band */
.band{background:var(--surface);color:var(--ink);text-align:center;border-top:1px solid var(--line);}
.band h2{color:var(--ink);font-family:var(--brand);text-transform:uppercase;font-size:2.15rem;line-height:1.04;margin:12px 0 10px;letter-spacing:.005em;text-wrap:balance;}
.band .eyebrow{justify-content:center;}
.band p{color:var(--muted);font-size:1.1rem;margin:0 auto 22px;max-width:56ch;}
.band .cta-row{margin-top:0;align-items:stretch;}

/* wide media image */
.shot{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);margin:0 0 4px;}
.shot img{width:100%;height:230px;object-fit:cover;}
.cap-txt{font-size:.85rem;color:var(--muted);margin:8px 2px 0;}

/* ============================================================
   PAINTING-SPECIFIC
   ============================================================ */
.pin.a{background:var(--green-onpine);}
.pin.b{background:var(--gold);}
.legend .a{background:var(--green);}
.legend .b{background:var(--gold);}
.gal .cell.wide{grid-column:1 / -1;}
.gal .cell.wide img{height:200px;}
.revagg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 18px;margin-top:14px;text-align:center;}
.revagg .big{font-family:var(--stat);font-weight:700;font-size:2.8rem;color:var(--ink);line-height:1;}
.revagg .stars5{margin-top:6px;color:var(--gold);}
.revagg p{margin:12px 0 0;font-size:1rem;color:var(--muted);}
.revagg .note{margin-top:14px;font-size:.85rem;color:var(--muted);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   TRUST BADGES + CONTACT ROW
   ============================================================ */
.badges{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px;}
.badges img{height:66px;width:auto;}
.badges .lbl{font-size:.9rem;color:var(--muted);}
.contact-row{display:flex;gap:9px;margin-top:10px;}
.contact-row a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  font-weight:700;font-size:1rem;text-decoration:none;border-radius:12px;padding:12px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);}
.contact-row a svg{width:18px;height:18px;color:var(--green-text);}

/* ============================================================
   STICKY ACTION BAR (injected by nav.js — phone + tablet)
   ============================================================ */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;align-items:stretch;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -10px 26px -16px rgba(9,20,14,.5);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .28s ease;}
.actionbar--hidden{transform:translateY(110%);opacity:0;pointer-events:none;}
.actionbar .ab-quote{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--on-green);border-radius:14px;padding:0 14px;
  background:var(--green);box-shadow:0 10px 24px -10px rgba(29,185,84,.9);}
.actionbar .ab-quote:active{transform:translateY(1px);}
.actionbar .ab-call,.actionbar .ab-text{flex:none;width:60px;flex-direction:column;gap:2px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;text-decoration:none;color:var(--ink);border-radius:14px;
  background:var(--surface);border:1px solid var(--line);}
.actionbar .ab-call span,.actionbar .ab-text span{font-size:.72rem;line-height:1;margin-top:3px;}
.actionbar .ab-call svg,.actionbar .ab-text svg{width:20px;height:20px;color:var(--green-text);}

/* ============================================================
   LEGAL
   ============================================================ */
.legal .legal-body{max-width:72ch;}
.legal .legal-body h2{font-family:var(--stat);font-weight:700;font-size:1.25rem;color:var(--ink);margin:28px 0 8px;}
.legal .legal-body p{margin:0 0 14px;color:var(--muted);font-size:1.02rem;}

/* ============================================================
   FOCUS + MOTION (audit X4)
   ============================================================ */
:target{scroll-margin-top:96px;}
#quote{scroll-margin-bottom:96px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--green);outline-offset:3px;border-radius:8px;}
.cred a:focus-visible,.lead a:focus-visible,footer a:focus-visible{outline-color:var(--green-onmedia);}

/* ============================================================
   TABLET (≥768)
   ============================================================ */
@media (min-width:768px){
  html{font-size:106.25%;}           /* 17px root: everything in rem steps up */
  :root{--gut:32px;--sec-y:88px;--bar-h:76px;}
  .brand img.brandlogo{height:36px;max-width:none;}
  .menubtn-lbl{display:inline;}
  .bar .menubtn{width:auto;padding:0 16px;}

  .hero h1{font-size:3.6rem;}
  .phero h1{font-size:3.2rem;}
  .sec-head h2,.band h2{font-size:2.8rem;}
  .cta-row{flex-direction:row;flex-wrap:wrap;}
  .cta-row .btn{flex:0 0 auto;}
  .band .cta-row{justify-content:center;}

  .svc-grid{grid-template-columns:1fr 1fr;gap:18px;}
  .team-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
  .gal{grid-template-columns:repeat(3,1fr);gap:14px;}
  .gal img{height:240px;}
  .rev-grid{grid-template-columns:1fr 1fr;}
  .market-cards{grid-template-columns:1fr 1fr;}
  .area-chips{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cred-photo img{height:320px;}
  .shot img{height:340px;}
  .rev-summary{display:flex;align-items:center;justify-content:center;gap:28px;text-align:left;flex-wrap:wrap;}
  .rev-summary .num{font-size:3.4rem;}
  .rev-summary .count{margin:0;}
  .rev-summary .btn{margin-top:0;}
  .ov-body{grid-template-columns:1fr 1fr;gap:40px;}
  .fcols{grid-template-columns:repeat(4,1fr);}
  /* a full-width inline-styled button is a phone affordance; on a wide screen it sizes to its label */
  .btn[style*="width:100%"]{width:auto!important;}
}

/* ============================================================
   DESKTOP (≥1024) — a real composition, not the phone column blown up
   ============================================================ */
@media (min-width:1024px){
  html{font-size:118.75%;}           /* 19px root */
  :root{--gut:64px;--sec-y:120px;--bar-h:92px;}
  body{font-size:1rem;}

  /* header */
  .bar{gap:14px;}
  .brand img.brandlogo{height:42px;}
  .bar .cta{display:inline-flex;min-height:52px;font-size:.92rem;padding:0 22px;white-space:nowrap;}
  .bar .callbtn{display:none;}
  .bar .menubtn{height:52px;}

  /* hero: the media runs full-bleed on desktop too (owner, 2026-10-08), text over a left scrim */
  .hero h1{font-size:clamp(3.2rem,6.2vw,5.5rem);line-height:.92;letter-spacing:-.005em;margin-top:22px;}
  .hero .hero-in>p{font-size:1.3rem;line-height:1.45;margin-top:26px;max-width:38ch;}
  .rating,.proof{font-size:1.05rem;margin-top:24px;}
  .hero .cta-row{margin-top:34px;gap:14px;}
  .hero--media{min-height:min(calc(100vh - var(--bar-h)),920px);padding-top:96px;padding-bottom:96px;justify-content:center;}
  .hero--media .bg img,.hero--media .bg video{object-position:var(--hero-pos,center 38%);}
  /* light enough that the footage stays bright (owner: "dark now"), dark enough behind the words */
  .hero--media .scrim{background:linear-gradient(90deg,rgba(6,16,11,.78) 0%,rgba(6,16,11,.5) 34%,rgba(6,16,11,.08) 60%,rgba(6,16,11,0) 100%);}
  .hero--media h1,.hero--media .hero-in>p,.hero--media .rating,.hero--media .proof{text-shadow:0 1px 18px rgba(0,0,0,.45);}
  .hero--media .hero-in{max-width:min(54%,820px);}
  /* a tall phone clip on a wide screen puts its subject under the words: slide the picture right
     and let its left edge fade into the dark green, so the person stands clear of the headline */
  .hero--shift .bg{background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent var(--hero-shift, 0px),#000 calc(var(--hero-shift, 0px) + 24%));mask-image:linear-gradient(90deg,transparent var(--hero-shift, 0px),#000 calc(var(--hero-shift, 0px) + 24%));}
  .hero--shift .bg picture,.hero--shift .bg video{transform:translateX(var(--hero-shift, 0px));}
  /* a hero with no media (Lighting): light, with its real facts in a card on the right */
  .hero--plain{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:64px;align-items:center;
    background:var(--bg);color:var(--ink);min-height:0;padding-top:80px;padding-bottom:104px;}
  .hero--plain .hero-in{grid-column:1;grid-row:1;}
  .hero--plain .eyebrow{color:var(--green-text);}
  .hero--plain .eyebrow::before{background:var(--green);}
  .hero--plain h1 em{color:var(--green-text);}
  .hero--plain .chalk>svg.ck path{stroke:var(--green);}
  .hero--plain .hero-in>p{color:var(--muted);}
  .hero--plain .rating,.hero--plain .proof{color:var(--ink);}
  .hero--plain .rating>svg,.hero--plain .proof>svg{color:var(--green-text);}
  .hero--plain .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
  .hero--plain .btn-ghost:hover{border-color:var(--green);color:var(--green-text);}
  .hero-aside{display:block;grid-column:2;grid-row:1;}

  /* inner hero: title left, the page's image framed right */
  .phero{display:block;min-height:540px;padding-top:64px;padding-bottom:80px;padding-right:calc(var(--px) + 44%);}
  .phero .bg{position:absolute;margin:0;right:var(--px);top:48px;bottom:48px;width:40%;aspect-ratio:auto;border-radius:var(--radius-xl);
    box-shadow:0 40px 80px -40px rgba(13,33,23,.5);}
  .phero:not(:has(.bg img)){min-height:0;padding-right:var(--px);}
  .phero h1{font-size:clamp(3rem,5vw,4.5rem);line-height:.95;margin-top:18px;}
  .phero p{font-size:1.22rem;line-height:1.5;margin-top:22px;}
  .phero .cta-row{margin-top:30px;}

  /* section head: 2 columns — eyebrow + headline left, lede right */
  .sec-head{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:end;margin-bottom:56px;}
  .sec-head>.eyebrow{grid-column:1;grid-row:1;justify-self:start;}
  .sec-head>h2,.sec-head>h3{grid-column:1;grid-row:2;}
  .sec-head>p{grid-column:2;grid-row:2;margin:0;font-size:1.15rem;}
  .sec-head:not(:has(>p))>h2{grid-column:1 / -1;max-width:24ch;}
  .sec-head h2{font-size:3.4rem;line-height:.98;margin-top:16px;}
  .band h2{font-size:3.4rem;line-height:.98;}
  .band p{font-size:1.15rem;}

  /* grids */
  .svc-grid{grid-template-columns:repeat(4,1fr);gap:22px;}
  .svc{padding:32px 28px;}
  .svc h3{font-size:1.35rem;}
  .svc p{font-size:.95rem;}
  .ic{width:64px;height:64px;border-radius:16px;}
  .ic svg{width:32px;height:32px;}
  .team-grid{grid-template-columns:repeat(4,1fr);gap:22px;}
  .member{padding:30px 18px;}
  .avatar{width:140px;height:140px;font-size:2.4rem;margin-bottom:18px;}
  .member b{font-size:1.25rem;}
  .member span{font-size:.88rem;}
  .gal{grid-template-columns:repeat(4,1fr);gap:18px;}
  .gal img{height:280px;}
  .rev-grid{grid-template-columns:repeat(3,1fr);gap:22px;}
  .area-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
  .market-card{padding:36px;}
  .market-card b{font-size:2.3rem;}

  /* the proof band: head left, photo + stats right */
  .cred{display:grid;grid-template-columns:1.05fr 1fr;column-gap:80px;align-items:center;}
  .cred>.sec-head{display:block;grid-column:1;grid-row:1 / span 3;margin:0;}
  .cred>.sec-head h2{font-size:3.6rem;line-height:.95;}
  .cred>.sec-head p{margin-top:22px;font-size:1.12rem;}
  .cred>:not(.sec-head){grid-column:2;}
  .cred-photo img{height:300px;}
  .cred-stats b{font-size:2.2rem;}

  /* the lead: copy + phone left, form right */
  .lead{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:center;}
  .lead>.sec-head{display:block;grid-column:1;grid-row:1;margin:0;}
  .lead>.sec-head h2{font-size:3.4rem;}
  .lead>.sec-head p{margin-top:20px;}
  .lead>.form{grid-column:2;grid-row:1;padding:36px;}
  .lead>:not(.sec-head):not(.form){grid-column:2;}

  /* FAQ: head left, questions right */
  section:has(>.faq){display:grid;grid-template-columns:.8fr 1.2fr;column-gap:80px;align-items:start;}
  section:has(>.faq)>.sec-head{display:block;grid-column:1;margin:0;}
  section:has(>.faq)>.sec-head p{margin-top:20px;}
  section:has(>.faq)>.faq{grid-column:2;grid-row:1 / span 2;}
  section:has(>.faq)>:not(.sec-head):not(.faq):not(script){grid-column:1;}
  .faq summary{font-size:1.12rem;padding:24px 50px 24px 0;}
  .faq summary::after{top:18px;font-size:2rem;}

  /* long lists read as two columns (owner) */
  .checks:has(>li:nth-child(4)){grid-template-columns:1fr 1fr;column-gap:48px;}
  .steps:has(>.step:nth-child(4)){grid-template-columns:1fr 1fr;column-gap:48px;row-gap:26px;}
  .prose{max-width:68ch;}
  .step .n{width:48px;height:48px;font-size:1.25rem;}

  /* overlay menu: a 4-column sheet */
  .ov-body{grid-template-columns:repeat(3,1fr) 1.1fr;gap:56px;padding-top:56px;}
  .ov-col a{font-size:1.25rem;}

  /* footer */
  footer{padding-top:96px;padding-bottom:48px;}
  footer .ftop{display:grid;grid-template-columns:1.1fr 2fr;gap:80px;}
  footer .fbrand img{height:44px;}
  footer .one{font-size:1.05rem;}
  .fcols{margin-top:0;gap:32px;}
  footer .meta{margin-top:64px;}

  /* the floating phone action bar is a phone affordance — the header carries the CTA on desktop */
  .actionbar{display:none;}
}

/* wide desktop: the inline service links fit (tighter below 1440px so five links never push Menu off).
   A link that does not fit WRAPS to a second row that the fixed height hides, so a link is shown whole
   or not at all — never cut mid-word (Jaime, 2026-10-10: "how we quote is cut off"). Every link is
   also in the Menu. */
@media (min-width:1240px){
  .navlinks{display:flex;flex-wrap:wrap;align-content:flex-start;height:36px;overflow:hidden;gap:0 18px;margin-left:24px;margin-right:auto;white-space:nowrap;min-width:0;}
  .bar .cta,.bar .menubtn{flex:none;}
  .navlinks a{text-decoration:none;font-weight:650;font-size:.84rem;padding:8px 0;border-bottom:2px solid transparent;color:var(--ink);}
  .navlinks a:hover,.navlinks a.on{border-bottom-color:var(--green);}
  .bar .brand{margin-right:0;flex:none;}
}
@media (min-width:1440px){
  .navlinks{gap:0 24px;margin-left:36px;}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}