/* ============================================================================
   Turtle Shell Home Protection — design system + responsive engine
   ----------------------------------------------------------------------------
   Breakpoint scale (mobile-first): xs 0 · sm 480 · md 768 · lg 1024 · xl 1280
   · 2xl 1536. Every component below declares base (xs) behavior and is then
   adapted in each breakpoint block at the bottom of this file, so every UI
   element has an explicit directive across the full responsive range.
   ============================================================================ */

:root {
  /* Brand */
  --green-900:#153a1c; --primary:#1E5128; --primary-dark:#153a1c; --primary-mid:#2a714a;
  --secondary:#4E9F3D; --accent:#3CCF4E; --accent-soft:#e7f7ea;
  --ink:#1c2321; --ink-2:#41524b; --muted:#66766f; --line:#d8e0dc;
  --bg:#ffffff; --bg-soft:#f4f8f5; --bg-dark:#12261a; --white:#fff;
  --warn:#b23b3b; --star:#f5b301;

  /* Type — fluid via clamp so text scales continuously between breakpoints */
  --font-header:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-hero:clamp(2rem,5.2vw,3.6rem);
  --fs-h2:clamp(1.5rem,3.4vw,2.4rem);
  --fs-h3:clamp(1.125rem,2vw,1.4rem);
  --fs-body:clamp(1rem,1.05vw,1.125rem);
  --fs-sm:0.875rem;

  /* Space scale */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  --section-y:clamp(2.5rem,6vw,5rem);

  /* Radius / shadow / motion */
  --r-1:6px; --r-2:12px; --r-3:20px; --r-pill:999px;
  --shadow-1:0 1px 3px rgba(21,58,28,.08),0 1px 2px rgba(21,58,28,.06);
  --shadow-2:0 8px 24px rgba(21,58,28,.12);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.25s;

  --container:1200px; --container-pad:1rem;
}

/* ---- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-header);line-height:1.15;margin:0 0 var(--s-4);color:var(--primary-dark);font-weight:700}
p{margin:0 0 var(--s-4)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
/* Links inside prose are underlined always: distinguishing them by colour alone
   fails link-in-text-block (measured 1.05:1 against the surrounding copy in dark
   mode). Navigation, buttons and card links are excluded — they are not sitting
   inside a sentence. */
.section-lead a,.section-body a,.map-note a,.project-lead a,.service-lead a,
.gallery-note a,.pager-summary a,.project-privacy a{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:var(--s-3) var(--s-5);z-index:200}
.skip-link:focus{left:var(--s-4);top:var(--s-4)}

/* ---- Layout primitives ---------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
.grid{display:grid;gap:var(--s-5)}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}          /* xs: single column */
.main{display:block}

/* ---- Buttons -------------------------------------------------------------- */
.btn{--btn-bg:var(--primary);--btn-fg:#fff;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s-2);font-family:var(--font-header);font-weight:600;font-size:var(--fs-sm);
  padding:.7rem 1.2rem;border-radius:var(--r-pill);border:2px solid transparent;background:var(--btn-bg);
  color:var(--btn-fg);cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  text-align:center;min-height:44px;text-decoration:none;
  /* A button label never wraps. Without this the header CTAs were flex items
     with no nowrap, so the nav row squeezed "(331) 296-3775" to ~68px and it
     broke onto FOUR lines at every desktop width, dragging the header to 85px. */
  white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(0)}
.btn-primary{--btn-bg:var(--primary)}
.btn-primary:hover{--btn-bg:var(--primary-dark)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--primary);border-color:var(--primary)}
.btn-ghost:hover{--btn-bg:var(--accent-soft)}
.btn-lg{font-size:1rem;padding:.9rem 1.6rem;min-height:52px}
/* A full-width button is the one case where wrapping is right: it already spans
   its container, so nowrap can only push the container wider than the viewport.
   ("Request My Free Inspection" did exactly that on the mobile lead form.) */
.btn-block{display:flex;width:100%;white-space:normal}

/* ---- Header / nav (xs base: hamburger) ------------------------------------ */
/* The header is sticky, so any in-page anchor target (#lead and friends) must
   clear it or its first 65px land hidden under the bar. */
[id]{scroll-margin-top:76px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--s-3)}
.brand:hover{text-decoration:none}
.brand-logo{height:40px;width:auto}
.brand-name{font-family:var(--font-header);font-weight:800;color:var(--primary-dark);font-size:1.05rem;white-space:nowrap}
.brand{flex:none}
.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle-bar{width:26px;height:3px;background:var(--primary-dark);border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.primary-nav{position:fixed;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
  display:grid;gap:var(--s-4);padding:var(--s-5) var(--container-pad);box-shadow:var(--shadow-2);
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.primary-nav.open{transform:translateY(0);opacity:1;visibility:visible}
.nav-list{display:grid;gap:var(--s-2)}
.nav-link{display:block;padding:var(--s-3) var(--s-2);font-family:var(--font-header);font-weight:600;color:var(--ink)}
.nav-link[aria-current=page]{color:var(--primary);border-left:3px solid var(--accent);padding-left:var(--s-3)}
.nav-cta{display:grid;gap:var(--s-3)}
/* Dropdown nav — base (mobile drawer accordion) */
.nav-item{position:relative}
.nav-toggle-sub{appearance:none;border:0;background:none;font:inherit;width:100%;display:flex;align-items:center;gap:var(--s-2);cursor:pointer;color:var(--ink);text-align:left}
.caret{width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur) var(--ease);flex:none;margin-left:auto}
.nav-item.open>.nav-toggle-sub .caret{transform:rotate(-135deg)}
.dropdown{display:none;list-style:none;margin:0;padding:0}
.nav-item.open>.dropdown{display:block;padding:var(--s-2) 0 var(--s-3) var(--s-5)}
.dropdown-link{display:block;padding:var(--s-2);color:var(--ink-2);font-family:var(--font-header);font-weight:500;font-size:var(--fs-sm)}
.dropdown-link:hover{color:var(--primary);text-decoration:none}

/* ---- Hero ----------------------------------------------------------------- */
.hero{background:linear-gradient(160deg,var(--bg-soft),#fff);padding-block:var(--section-y)}
.hero-inner{display:grid;gap:var(--s-6);align-items:center}
.hero-kicker{font-family:var(--font-header);text-transform:uppercase;letter-spacing:.08em;color:var(--secondary);font-weight:700;font-size:var(--fs-sm);margin:0 0 var(--s-2)}
.hero-heading{font-size:var(--fs-hero);margin-bottom:var(--s-4)}
.hero-sub{font-size:1.075rem;color:var(--ink-2);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block:var(--s-5)}
.hero-trust{color:var(--muted);font-size:var(--fs-sm)}
.hero-media img{border-radius:var(--r-3);box-shadow:var(--shadow-2);width:100%;object-fit:cover}
/* Full-bleed media hero: looping video (home) or product image (category/location) */
.hero-bleed{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(26rem,70vh,42rem);display:grid;align-items:center;background:var(--primary-dark)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-video,.hero-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,26,19,.88) 0%,rgba(15,26,19,.64) 44%,rgba(15,26,19,.30) 100%)}
.hero-bleed .hero-inner{position:relative;z-index:1;grid-template-columns:1fr}
.hero-bleed .hero-copy{max-width:44rem}
.hero-bleed .hero-heading,.hero-bleed .hero-kicker{color:#fff}
.hero-bleed .hero-sub{color:rgba(255,255,255,.92)}
.hero-bleed .hero-trust{color:rgba(255,255,255,.82)}
.hero-bleed .btn-ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.7)}
.hero-bleed .btn-ghost:hover{--btn-bg:rgba(255,255,255,.14)}

/* ---- Sections + cards ----------------------------------------------------- */
.section{padding-block:var(--section-y)}
.section:nth-of-type(even){background:var(--bg-soft)}
.section-heading{font-size:var(--fs-h2);text-align:center}
.section-lead{text-align:center;color:var(--ink-2);max-width:60ch;margin-inline:auto;margin-bottom:var(--s-6)}
.section-body{max-width:70ch;margin-inline:auto}
.section-cta{text-align:center;margin-top:var(--s-5)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-5);box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.card-media{border-radius:var(--r-1);margin-bottom:var(--s-3);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-soft)}
/* Feature rows: matched product image beside the section copy, alternating sides */
.section-feature .feature{display:grid;gap:var(--s-5);align-items:center}
.feature-media img{width:100%;border-radius:var(--r-3);box-shadow:var(--shadow-2);aspect-ratio:4/3;object-fit:cover;background:var(--bg-soft)}
.feature-copy .section-heading{text-align:left}
.feature-copy .section-body{margin-inline:0;max-width:58ch}
/* Swatch + gallery cards */
.swatch{padding:var(--s-2);text-align:center}
.swatch .card-media{aspect-ratio:1/1;margin-bottom:var(--s-2)}
.swatch-name{font-size:1rem;margin:0 0 2px;display:flex;align-items:center;justify-content:center;gap:var(--s-2)}
.swatch-chip{display:inline-block;width:1rem;height:1rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(0,0,0,.2);flex:none}
.swatch-kind{color:var(--muted);font-size:var(--fs-sm);margin:0}
/* Finish toggle (stone-coated / aluminum) */
.finish-toggle{display:inline-flex;gap:4px;margin:0 auto var(--s-6);padding:4px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-pill);justify-self:center}
.section-colors .container{display:grid;justify-items:center}
.section-colors .section-heading,.section-colors .section-lead{justify-self:center;text-align:center}
.finish-panel{width:100%}
.finish-btn{appearance:none;border:0;background:transparent;color:var(--ink-2);font-family:var(--font-header);font-weight:600;font-size:var(--fs-sm);padding:.6rem 1.2rem;border-radius:var(--r-pill);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:var(--s-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.finish-btn.is-active{background:var(--primary);color:#fff}
.finish-count{font-size:.72rem;opacity:.8;background:rgba(255,255,255,.18);padding:1px 7px;border-radius:var(--r-pill)}
.finish-btn:not(.is-active) .finish-count{background:var(--line);color:var(--ink-2)}
.finish-panel[hidden]{display:none}
/* Service-area map (WebGL canvas + DOM markers) */
.service-map{position:relative;width:100%;height:clamp(360px,58vh,560px);border-radius:var(--r-3);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);touch-action:none;cursor:grab}
.service-map:active{cursor:grabbing}
.map-canvas{display:block;width:100%;height:100%}
.map-markers{position:absolute;inset:0;pointer-events:none}
.map-marker{position:absolute;top:0;left:0;pointer-events:auto;background:none;border:0;cursor:pointer;margin:0;padding:0;will-change:transform}
.map-pin{display:block;width:15px;height:15px;border-radius:50% 50% 50% 0;background:var(--secondary);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35);transform:rotate(-45deg);margin:-15px 0 0 -7px;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.map-marker:hover .map-pin,.map-marker:focus-visible .map-pin{background:var(--accent);transform:rotate(-45deg) scale(1.35)}
.map-city{position:absolute;top:0;left:0;transform:translate(-50%,-50%);font-size:11px;font-weight:700;color:var(--ink-2);text-shadow:0 1px 3px rgba(255,255,255,.9);pointer-events:none;white-space:nowrap}
.map-popup{position:absolute;top:0;left:0;transform:translate(-50%,-112%);width:260px;background:#fff;color:var(--ink);border-radius:var(--r-2);box-shadow:var(--shadow-2);overflow:hidden;z-index:5;font-size:var(--fs-sm)}
.map-popup img{width:100%;height:120px;object-fit:cover;display:block}
.map-popup-body{padding:var(--s-3)}
.map-popup-body strong{display:block;font-family:var(--font-header)}
.map-popup-body span{color:var(--muted);font-size:12px}
.map-popup-body p{margin:var(--s-2) 0}
.map-popup-x{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%;width:26px;height:26px;cursor:pointer;line-height:1;font-size:16px}
.btn-sm{padding:.4rem .85rem;font-size:.78rem;min-height:36px}
.map-err{padding:var(--s-6);text-align:center;color:var(--muted)}
/* Zoom/reset cluster (QA round 1). Fixed-size overlay, deliberately identical
   at all 6 breakpoints — 44px targets clear the mobile tap minimum already. */
.map-controls{position:absolute;top:var(--s-3);right:var(--s-3);display:flex;flex-direction:column;gap:6px;z-index:6}
.map-ctl{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-2);background:rgba(255,255,255,.94);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.map-ctl:hover,.map-ctl:focus-visible{background:var(--primary);color:#fff}
/* City directory (service-area mesh) */
.city-directory{columns:2;column-gap:var(--s-6);font-size:var(--fs-sm)}
.city-directory li{break-inside:avoid;padding:2px 0}
.city-directory a{color:var(--ink-2)}
.city-directory a:hover{color:var(--primary)}
@media (min-width:768px){.city-directory{columns:3}}
@media (min-width:1024px){.city-directory{columns:4}}
/* Project cards + detail + video facade */
.project-card-link{display:block;color:inherit}
.project-card-link:hover{text-decoration:none}

/* ---- Portfolio (CompanyCam projects) — xs base ---------------------------- */
/* Headline counts. Grid rather than flex so the tiles stay even as the numbers
   change width; minmax(0,…) because a long value must not widen the track. */
.portfolio-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin:0}
.pstat{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-4);text-align:center;min-width:0}
.pstat dt{font-size:var(--fs-sm);color:var(--muted);order:2}
.pstat dd{margin:0 0 var(--s-1);font-family:var(--font-header);font-weight:800;font-size:clamp(1.5rem,5vw,2.2rem);color:var(--primary);line-height:1.1}
.pstat{display:flex;flex-direction:column}

/* City index — every community with completed work, linking to its own page. */
.city-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0;margin:0}
.city-chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:.4rem .75rem;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink-2);font-size:var(--fs-sm);font-family:var(--font-header);font-weight:600;min-width:0}
.city-chip:hover{border-color:var(--secondary);color:var(--primary);text-decoration:none;background:var(--accent-soft)}
/* A city we have worked in that has no page of its own: same chip, but it must
   not claim to be a link. Without this the span inherits .city-chip:hover and
   lights up under the cursor while going nowhere. */
.city-chip-flat{cursor:default;opacity:.78}
.city-chip-flat:hover{border-color:var(--line);color:var(--ink-2);background:#fff}
.city-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-chip-n{flex:none;background:var(--accent-soft);color:var(--primary-dark);border-radius:var(--r-pill);padding:0 .45rem;font-size:.75rem}

/* Card meta: stacked chips of place / date / photo count. */
.project-meta{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);color:var(--muted);font-size:var(--fs-sm);margin:var(--s-1) 0 var(--s-2)}
.project-place{font-weight:600;color:var(--ink-2)}
.project-photos::before{content:"◧ ";color:var(--secondary)}
.map-note{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--muted)}

/* Single project: the job record card + the on-site gallery. */
.project-facts-title{font-family:var(--font-header);font-weight:700;color:var(--primary-dark);margin:0 0 var(--s-3)}
.project-privacy{margin:var(--s-3) 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);padding:0;margin:0}
.project-shot{position:relative;margin:0;min-width:0}
.project-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-1);background:var(--bg-soft)}
.project-shot a{display:block}
.shot-when{position:absolute;left:var(--s-2);bottom:var(--s-2);background:rgba(18,38,26,.78);color:#fff;font-size:.7rem;padding:1px 6px;border-radius:var(--r-pill)}
/* ---- Service pages — xs base ---------------------------------------------- */
.service-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
.service-intro>*{min-width:0}
.service-main{min-width:0}
.service-lead{font-size:1.1rem;color:var(--ink-2)}
.service-facts{min-width:0}
.service-facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-3);margin:var(--s-3) 0}
.service-facts dt{font-weight:600;color:var(--ink-2)}
.service-facts dd{margin:0}
/* Service-page finish tile. NOT .swatch-chip — that name was already taken by
   the 1rem inline circle inside .swatch-name on the home colour cards, and
   redefining it turned every one of those into a full-width block, spilling the
   home page at every width below 1536. */
.service-swatch{display:block;width:100%;aspect-ratio:1/1;border-radius:var(--r-1);border:1px solid var(--line);margin-bottom:var(--s-2)}
/* ---- Job photography: stats, frames, visits, viewer — xs base ------------- */
.job-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:0}
.job-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--s-3);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-2);text-align:center}
.job-stat-k{order:2;font-size:var(--fs-sm);color:var(--muted)}
.job-stat-n{order:1;margin:0;font-family:var(--font-header);font-weight:800;font-size:clamp(1.3rem,4.5vw,1.9rem);color:var(--primary);line-height:1.1}

/* First / latest frames. NOT before-and-after — see the note in project.html. */
.frames{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.frame{margin:0;min-width:0}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-2);background:var(--bg-soft)}
.frame-tag{margin-top:var(--s-2);font-family:var(--font-header);font-weight:600;font-size:var(--fs-sm);color:var(--ink-2)}

/* Visit groups — one per capture day. */
.visit-list{display:grid;gap:var(--s-6)}
.visit{min-width:0}
.visit-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3);font-size:var(--fs-h3);margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:1px solid var(--line);min-width:0}
.visit-date{font-family:var(--font-body);font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.visit-count{margin-left:auto;font-family:var(--font-body);font-weight:400;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.gallery-note{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--muted)}
.shot-link{display:block}

/* The viewer. Hidden until gallery.js upgrades the links; the thumbnails remain
   plain anchors to the full-size photograph with JS off. */
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:var(--s-3);
  background:rgba(8,18,12,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox-open{overflow:hidden}
.lightbox-inner{display:grid;justify-items:center;gap:var(--s-3);max-width:100%;min-width:0}
.lightbox-img{max-width:100%;max-height:66vh;width:auto;border-radius:var(--r-2);background:#0d1a12}
.lightbox-cap{margin:0;color:#cfe3d5;font-size:var(--fs-sm);text-align:center}
.lightbox-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox-btn:hover{background:rgba(255,255,255,.26)}
.lightbox-close{top:var(--s-3);right:var(--s-3)}
.lightbox-prev{left:var(--s-2);top:50%;transform:translateY(-50%)}
.lightbox-next{right:var(--s-2);top:50%;transform:translateY(-50%)}
.nearby-more{margin-top:var(--s-5)}
.section-project-back{padding-block:var(--s-6)}

/* ---- Pagination — xs base ------------------------------------------------- */
/* Stacked on a phone: steps on their own row, numbers wrapping beneath. Every
   control is a real link with a 44px touch target. */
.pager-summary{margin-bottom:var(--s-5)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-7)}
.pager-step{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--primary);
  font-family:var(--font-header);font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.pager-step:hover{background:var(--accent-soft);border-color:var(--secondary);text-decoration:none}
/* No opacity here: .35 composited to #3c4b42 on the dark surface, 1.93:1. An
   explicit colour is measurable in both themes. */
.pager-step.is-off{background:transparent;color:var(--muted);border-color:var(--line);cursor:default}
.pager-nums{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-1);
  order:1;flex-basis:100%;margin:0;padding:0;list-style:none}
.pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 .5rem;border-radius:var(--r-1);color:var(--ink-2);font-family:var(--font-header);
  font-weight:600;font-size:var(--fs-sm)}
.pager-num:hover{background:var(--accent-soft);color:var(--primary);text-decoration:none}
.pager-num.is-current{background:var(--primary);color:#fff}
.pager-gap{display:inline-flex;align-items:flex-end;justify-content:center;min-width:1.5rem;height:44px;color:var(--muted)}
.project-meta{color:var(--muted);font-size:var(--fs-sm);margin:var(--s-1) 0}
.project-detail{display:grid;gap:var(--s-6)}
.project-lead{font-size:1.1rem;color:var(--ink-2)}
.project-details ul{display:grid;gap:var(--s-2)}
.project-details li{padding-left:1.5rem;position:relative}
.project-details li::before{content:"✓";position:absolute;left:0;color:var(--secondary);font-weight:800}
.project-facts dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-3);margin:var(--s-3) 0}
.project-facts dt{font-weight:600;color:var(--ink-2)}
.project-facts dd{margin:0;text-transform:capitalize}
.yt-facade{position:relative;cursor:pointer;padding:0;overflow:hidden}
.yt-facade .card-media{aspect-ratio:16/9;margin:0}
.yt-facade .card-title{padding:var(--s-3)}
.yt-play{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;background:rgba(30,81,40,.88);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:20px;pointer-events:none}
.yt-facade iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.gallery-item{padding:0;overflow:hidden;border:0}
.gallery-item .card-media{aspect-ratio:4/3;margin:0;border-radius:var(--r-2)}
.card-title{font-size:var(--fs-h3);margin-bottom:var(--s-2)}
/* NOT var(--secondary): #4E9F3D is 3.31:1 as 16px text on a white card — the
   light scheme's mirror of the dark-theme --primary trap. #3E8030 reads the
   same and clears 4.84:1; the dark block restores the brighter green. */
.card-price{color:#3E8030;font-weight:600}
.card-link{font-family:var(--font-header);font-weight:600}
.stat{text-align:center;padding:var(--s-4)}
.stat-num{display:block;font-family:var(--font-header);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--primary)}
.stat-label{color:var(--muted);font-size:var(--fs-sm)}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-5);position:relative}
.step-n{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:var(--r-pill);background:var(--accent);color:var(--primary-dark);font-family:var(--font-header);font-weight:800;margin-bottom:var(--s-3)}
/* Step + offer icons (QA round 1): inline SVG, stroke=currentColor so the one
   color rule per theme governs them. Fixed size — identical at all 6 breakpoints. */
.step-icon{display:block;width:34px;height:34px;color:var(--primary);margin-bottom:var(--s-3)}
.step .step-n{position:absolute;top:var(--s-4);right:var(--s-4);margin-bottom:0}
.card-offer{position:relative;border-top:3px solid var(--secondary)}
.offer-icon{display:block;width:30px;height:30px;color:var(--primary);margin-bottom:var(--s-3)}
.offer-badge{position:absolute;top:var(--s-4);right:var(--s-4);background:var(--accent);color:var(--primary-dark);font-family:var(--font-header);font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill)}
.review-stars{color:var(--star);letter-spacing:2px;margin-bottom:var(--s-2)}
.review-body{font-style:italic;margin:0 0 var(--s-3);color:var(--ink-2)}
.review-author{font-weight:600;font-size:var(--fs-sm)}
/* Owner's public reply to a Google review. Indented off the quote so it reads as
   the business answering, not as more of the customer's words. Long reviews are
   clamped on small screens (see the breakpoint blocks) so one essay-length
   review cannot push a 3-up card grid to absurd height. */
.review-reply{margin:var(--s-3) 0 0;padding-left:var(--s-4);border-left:3px solid var(--accent-soft);font-size:var(--fs-sm);color:var(--muted)}
.review-reply-label{display:block;font-weight:700;color:var(--primary);margin-bottom:var(--s-1)}
.review-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
.review-reply{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
/* The clamp above is a TEASER device for the home page's 3-card grid. On /reviews
   the whole promise is "unedited and in full", so it must not apply — a clamped
   review there is the page contradicting its own copy, and the reader has no way
   to reach the rest. Two classes beats one at every breakpoint, so this single
   rule overrides all six clamp declarations without repeating them. */
.all-reviews-grid .review-body,.all-reviews-grid .review-reply{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}
/* Unclamped reviews run from 40 words to 1,345 characters, and a grid row sizes to
   its tallest cell — so three columns of real reviews leave craters. Columns pack
   variable-length text instead of aligning it; `break-inside:avoid` keeps a review
   whole. Column count per breakpoint below, xs stays a single column. */
.all-reviews-grid{display:block;columns:1;column-gap:var(--s-5)}
.all-reviews-grid .card-review{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 var(--s-5)}
.breadcrumbs{padding-top:var(--s-4);font-size:var(--fs-sm)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2);color:var(--muted)}
.breadcrumbs li+li::before{content:"/";margin-right:var(--s-2);color:var(--line)}

/* ---- Lead form ------------------------------------------------------------ */
.lead{background:linear-gradient(160deg,var(--primary-dark),var(--primary));color:#fff;padding-block:var(--section-y)}
/* min-width:0 on the tracks: a grid item defaults to min-width:auto, so its
   min-content size can push the track — and the whole page — wider than the
   viewport. This is the single most common cause of mobile horizontal spill. */
.lead-inner{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
.lead-inner>*{min-width:0}
.lead-kicker{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;font-size:var(--fs-sm)}
.lead-heading{color:#fff;font-size:var(--fs-h2)}
.lead-sub{color:rgba(255,255,255,.85)}
.lead-benefits{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.lead-benefits li{padding-left:1.6rem;position:relative;color:rgba(255,255,255,.92)}
.lead-benefits li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
/* grid-template-columns:minmax(0,1fr) is load-bearing, not tidiness. An implicit
   grid column sizes to its content's MAX-CONTENT width, so the 3-step indicator
   held this form's track at 357px inside a 279px content box and spilled the
   page at 375. Every grid that wraps free-form content needs the minmax(0,…). */
.lead-form{background:#fff;color:var(--ink);border-radius:var(--r-3);padding:var(--s-6);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);box-shadow:var(--shadow-2)}
.lead-form>*{min-width:0}
.form-steps{min-width:0}
.field{display:grid;gap:var(--s-2)}
.field label{font-family:var(--font-header);font-weight:600;font-size:var(--fs-sm)}
/* Service checkbox group (QA round 1: multi-select). One column at xs; the
   768px block widens it to two. */
.field-label{font-family:var(--font-header);font-weight:600;font-size:var(--fs-sm);margin:0}
.service-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.check{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);cursor:pointer;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);background:#fff}
/* Must out-rank `.field input` (width:100%, min-height:44px), which otherwise
   turns each checkbox into a giant white block. */
.field .check input{accent-color:var(--primary);width:1.05rem;height:1.05rem;min-height:0;flex:none;padding:0;margin:0}
.check:has(input:checked){border-color:var(--primary);background:rgba(78,159,61,.08)}
.field input,.field select,.field textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r-1);font:inherit;min-height:44px;background:#fff}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--secondary);outline:3px solid var(--accent-soft)}
.field .opt{color:var(--muted);font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-status{min-height:1.2em;font-size:var(--fs-sm);margin:0}
.form-status.ok{color:var(--secondary);font-weight:600}
.form-status.err{color:var(--warn)}
/* Multi-step form */
.form-steps{display:flex;justify-content:space-between;gap:var(--s-2);margin:0 0 var(--s-4);padding:0;counter-reset:step;position:relative}
/* min-width:0 lets the three step labels actually shrink. flex:1 alone does not:
   a flex item keeps a min-content floor, so the labels held the row at 357px
   inside 343px of available width and spilled the page at 375. */
.form-step-dot{list-style:none;flex:1;min-width:0;text-align:center;font-family:var(--font-header);font-weight:600;font-size:12px;color:var(--muted);position:relative;padding-top:30px;overflow-wrap:anywhere;hyphens:auto}
.form-step-dot::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--white);display:grid;place-items:center;font-size:13px;transition:background var(--dur) var(--ease)}
.form-step-dot.is-active{color:var(--primary)}
.form-step-dot.is-active::before{background:var(--secondary);color:#fff}
.form-panel{border:0;margin:0;padding:0;display:grid;gap:var(--s-4)}
.form-panel legend{font-family:var(--font-header);font-weight:700;color:var(--primary-dark);font-size:1.05rem;padding:0;margin-bottom:var(--s-2)}
/* The step nav holds Back / Continue / Submit in one row, and the submit carries
   .btn-block (width:100%). In a flex row that makes the row's min-content wider
   than the form, which pushed the last button ~30px past the viewport at 375.
   Inside this row a button sizes to its content and the row may wrap. */
.form-nav{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-2);min-width:0}
.form-nav .btn{width:auto;flex:0 1 auto;min-width:0}
.form-nav .form-next{margin-left:auto}
.form-consent{font-size:12px;color:var(--muted);margin:0}

/* ---- Footer --------------------------------------------------------------- */
.site-footer{background:var(--bg-dark);color:rgba(255,255,255,.82);padding-block:var(--s-7) var(--s-5);margin-top:0}
.footer-grid{display:grid;gap:var(--s-6)}
.footer-h{color:#fff;font-size:1rem;margin-bottom:var(--s-3)}
.footer-col ul{display:grid;gap:var(--s-2)}
.footer-col a,.footer-social a{color:rgba(255,255,255,.75);font-size:var(--fs-sm);word-break:break-word}
.footer-col a:hover{color:var(--accent)}
.footer-nap a{color:var(--accent)}
.footer-tagline{color:rgba(255,255,255,.7)}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s-6);padding-top:var(--s-5);font-size:var(--fs-sm);color:rgba(255,255,255,.6)}

/* ---- Canvas FX layer (pointer-transparent enhancement over the DOM) ------- */
.fx-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:multiply;opacity:0}
.fx-layer.on{opacity:.5}

/* ============================================================================
   RESPONSIVE BREAKPOINTS — each block adapts the components above.
   ============================================================================ */

/* sm ≥480 — larger single-column rhythm, 2-up cards */
@media (min-width:480px){
  .all-reviews-grid{columns:1}
  :root{--container-pad:1.25rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-actions{gap:var(--s-4)}
  .lead-form{padding:var(--s-7)}
  .review-body{-webkit-line-clamp:9;line-clamp:9}
  .review-reply{-webkit-line-clamp:4;line-clamp:4}
  .review-body{-webkit-line-clamp:10;line-clamp:10}
  .review-reply{-webkit-line-clamp:5;line-clamp:5}
  .review-body{-webkit-line-clamp:12;line-clamp:12}
  .review-reply{-webkit-line-clamp:5;line-clamp:5}
  .portfolio-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .project-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .portfolio-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .project-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
  .city-chip{font-size:.82rem}
  .project-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pstat{padding:var(--s-5)}
  .pager-nums{order:0;flex-basis:auto}
  .pager{gap:var(--s-4)}
  .pager{justify-content:space-between}
  .pager-nums{gap:var(--s-2)}
  .pager-step{padding:.6rem 1.4rem}
  .service-facts dl{gap:var(--s-2) var(--s-4)}
  .service-intro{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
  .service-intro{gap:var(--s-7)}
  .job-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .frames{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lightbox{padding:var(--s-4)}
  .lightbox-img{max-height:74vh}
  .frame img{aspect-ratio:16/10}
  .lightbox-btn{width:56px;height:56px}
  .visit-list{gap:var(--s-7)}
}

/* md ≥768 — inline nav appears, 2–3 col grids, hero splits */
@media (min-width:768px){
  .all-reviews-grid{columns:2}
  :root{--container-pad:1.5rem}
  .hero-split .hero-inner{grid-template-columns:1.1fr .9fr}
  .hero-bleed .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .section-feature .feature{grid-template-columns:1fr 1fr;gap:var(--s-7)}
  .section-feature:nth-of-type(even) .feature-media{order:2}
  .lead-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .project-detail{grid-template-columns:1.7fr 1fr;align-items:start}
  .service-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* lg ≥1024 — inline single-row dropdown nav appears, 4-up grids */
@media (min-width:1024px){
  .all-reviews-grid{columns:2}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .hero-heading{max-width:16ch}
  .section-heading{margin-bottom:var(--s-3)}

  /* The inline nav row lives in the xl block: the 7 dropdowns + brand + two
     CTAs need ~1330px, so at lg it overflowed the viewport. Hamburger holds
     until 1280. */
}

/* xl ≥1280 — max container comfort */
@media (min-width:1280px){
  .all-reviews-grid{columns:3}
  /* Single horizontal nav row with hover/focus dropdown panels */
  .nav-toggle{display:none}
  .primary-nav{position:static;inset:auto;transform:none;opacity:1;visibility:visible;box-shadow:none;
    border:0;padding:0;background:none;display:flex;align-items:center;gap:var(--s-3);flex:1;justify-content:flex-end}
  /* The nav LIST is what gives up space when the row is tight — never the CTAs.
     min-width:0 lets it shrink below its content (a flex item defaults to
     min-width:auto, which is what forced the squeeze onto the buttons instead). */
  .nav-list{display:flex;flex-wrap:nowrap;gap:0;align-items:center;min-width:0}
  .nav-link{display:flex;align-items:center;padding:.5rem .4rem;font-size:.84rem;white-space:nowrap;color:var(--ink)}
  .nav-toggle-sub{width:auto}
  .caret{width:.42rem;height:.42rem;margin-left:6px}
  .nav-item.open>.nav-toggle-sub .caret{transform:rotate(45deg)}
  .nav-cta{display:flex;gap:var(--s-2);flex:none}
  .nav-cta .btn{padding:.55rem .85rem;font-size:.8rem;flex:none}
  .dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:238px;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-2);box-shadow:var(--shadow-2);padding:var(--s-2);display:block;opacity:0;visibility:hidden;
    transform:translateY(-6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);z-index:120}
  .nav-item:hover>.dropdown,.nav-item:focus-within>.dropdown,.nav-item.open>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
  /* Dropdowns are absolutely positioned inside their nav item, so one anchored
     left:0 on a right-edge item extends past the viewport and adds its overflow
     to the page — a horizontal spill with no visible element out of place. The
     trailing items open leftward instead. */
  .nav-item:nth-last-child(-n+3) > .dropdown{left:auto;right:0}
  .dropdown-link{border-radius:var(--r-1);white-space:nowrap;padding:.55rem .7rem}
  .dropdown-link:hover{background:var(--accent-soft);color:var(--primary)}

  :root{--container:1240px}
  .hero-inner{gap:var(--s-8)}
  .review-body{-webkit-line-clamp:14;line-clamp:14}
  .review-reply{-webkit-line-clamp:6;line-clamp:6}
  .project-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
  .portfolio-stats{gap:var(--s-5)}
  .pager{margin-top:var(--s-8)}
  .service-lead{font-size:1.15rem}
  .lightbox-img{max-height:80vh}
  .job-stats{gap:var(--s-4)}
}

/* 2xl ≥1536 — cap growth, add breathing room */
@media (min-width:1536px){
  .all-reviews-grid{columns:3}
  :root{--container:1320px;--container-pad:2rem}
  .section{padding-block:calc(var(--section-y) + var(--s-4))}
  .review-body{-webkit-line-clamp:16;line-clamp:16}
  .review-reply{-webkit-line-clamp:6;line-clamp:6}
  .project-gallery{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pager-num{min-width:48px}
  .service-intro{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
  .lightbox-prev{left:var(--s-5)}
  .lightbox-next{right:var(--s-5)}
}

/* Dark mode — respect the visitor's system preference */
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1a13;--bg-soft:#13241a;--ink:#e7efe9;--ink-2:#bcd0c4;--muted:#8fa79a;--line:#274233;--white:#0f1a13}
  body{background:var(--bg)}
  .site-header{background:rgba(15,26,19,.94);border-bottom-color:var(--line)}
  .brand-name,h1,h2,h3,h4{color:#eaf5ec}
  .card,.step,.field input,.field select{background:#12241a;border-color:var(--line);color:var(--ink)}
  .check{background:#12241a;border-color:var(--line);color:var(--ink)}
  .check:has(input:checked){border-color:#6fdc84;background:rgba(111,220,132,.12)}
  .primary-nav{background:#0f1a13}
  .dropdown{background:#12241a;border-color:var(--line)}
  .nav-toggle-sub,.nav-link{color:var(--ink)}
  .dropdown-link:hover{background:rgba(60,207,78,.14)}
  .map-popup{background:#12241a;color:var(--ink)}
  .map-city{color:#cfe0d4;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .map-ctl{background:rgba(18,36,26,.94);color:var(--ink)}
  /* --primary is a dark green — fine as a fill, invisible as an icon stroke on
     the dark page (the same trap as text; see the note below). */
  .step-icon,.offer-icon{color:#6fdc84}
  .card-price{color:#6fdc84}
  .service-map{background:#0f1a13}
  .lead-form{background:#13241a;color:var(--ink)}
  /* Added 2026-08-04. Both were introduced with a hard #fff background and never
     rendered under a dark scheme until the battery gained --schemes: the city
     chips sat at white-on-light-green, contrast ratio 1.62 against a 4.5 floor.
     Anything given background:#fff needs a line here. */
  /* 🔴 THE BIG ONE. --primary (#1e5128) is a dark green: correct as a button
     BACKGROUND with white on it, and nearly invisible as TEXT on the dark
     surface (#0f1a13) — Lighthouse measured 1.75-1.92 against a 4.5 floor across
     the nav, card links, stat numbers, review labels, form legends and step
     dots. The fix is a light green for text only; --primary itself must stay
     dark so white-on-primary buttons keep their contrast. Anything that sets
     color:var(--primary) in the light theme needs a line here.
     Measured after: #6fdc84 on #0f1a13 = 9.4:1. */
  a,.btn-ghost,.nav-link[aria-current=page],.dropdown-link:hover,.city-directory a:hover,
  .pstat dd,.job-stat-n,.stat-num,.review-reply-label,.form-step-dot.is-active,
  .pager-num:hover,.city-chip:hover{color:#6fdc84}
  .btn-ghost{--btn-fg:#6fdc84;border-color:#3f8f52}
  .btn-ghost:hover{--btn-bg:rgba(60,207,78,.14)}
  h1,h2,h3,h4,.brand-name,.project-facts-title,.form-panel legend{color:#eaf5ec}
  .city-chip-n{color:#cfe8d6}
  .step-n{background:var(--secondary);color:#0f1a13}
  .city-chip{background:#12241a;border-color:var(--line);color:var(--ink-2)}
  .city-chip:hover{background:rgba(60,207,78,.14);color:#eaf5ec;border-color:var(--secondary)}
  /* The non-link chip keeps its own colours in dark too — a hover rule defined
     in one scheme only is how this theme broke the first time. */
  .city-chip-flat:hover{background:#12241a;color:var(--ink-2);border-color:var(--line)}
  .city-chip-n{background:rgba(60,207,78,.18);color:#cfe8d6}
  .pager-step{background:#12241a;border-color:var(--line);color:#9fe6ab}
  .pager-step:hover{background:rgba(60,207,78,.14)}
  .pager-step.is-off{background:transparent;color:#7d9488;border-color:var(--line)}
  .pager-num{color:var(--ink-2)}
  .pager-num:hover{background:rgba(60,207,78,.14);color:#eaf5ec}
  .pager-num.is-current{background:var(--secondary);color:#0f1a13}
  .job-stat,.pstat{background:#12241a;border-color:var(--line)}
  .visit-head{border-bottom-color:var(--line)}
  .frame img,.project-shot img,.lightbox-img{background:#12241a}
}