/* fonts: served from the site itself (no trip to Google before text can show) */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../fonts/montserrat-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Design D, the CSK Sites template (Kyle 2026-10-18): Kyle's picks from designs A, B and C stitched into one layout for
   any local service business, shown with the made-up Ridgeway Tree Care. Every section is a slot the
   business's own facts fill: urgent-service strip, services, reasons, photos, reviews, towns, FAQ.
   Type: big headings in Barlow Condensed caps (B's hero), menu, buttons and card titles in Montserrat (C),
   text in Barlow. Colors come from the tokens below (the business's main color, its dark shade, an accent). */
:root {
  --ink: #16241C;
  --ink-soft: #4C5B53;
  --bg: #FFFFFF;
  --gray: #F3F5F2;
  --line: #DFE4DF;
  --brand: #1F6B45;        /* the business's main color */
  --brand-hi: #185937;
  --dark: #12372A;         /* its dark shade */
  --dark-2: #0C2A20;
  --accent: #F2B33D;       /* call buttons and highlights */
  --accent-hi: #F6C45F;
  --accent-ink: #12372A;   /* text on the accent */
  --tint: #E5F0E9;         /* light tint of the main color */
  --mist: #D3E4DA;         /* soft text on dark */
  --fx-top: #1A5039;               /* final band: lighter shade at the top */
  /* dot grid and glow (hero, final band): a lighter shade of the brand color itself, never the accent
     (blue site with a red accent: light blue dots, not red; Kyle 2026-10-18) */
  --fx-dot: #69D49E;
  --fx-glow: rgba(105,212,158,.16);
  --fx-text: #DCEBE2;
  /* shades the builder works out from the colors above (build_site.py) */
  --line-2: #CCD4CE;
  --muted: #98AB9D;
  --shade: #0B1510;
  --dark-rgb: 18,55,42;
  --shade-rgb: 11,21,16;
  --brand-rgb: 31,107,69;
  --accent-rgb: 242,179,61;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --ui: "Montserrat", Arial, sans-serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --r: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body > footer { margin-top: auto; }
main { display: block; width: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* side padding only, so a section's own top and bottom space is never reset on phones */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
.i { width: 20px; height: 20px; flex: none; }

/* type */
.h2 { margin: 0; font: 800 clamp(40px, 4.8vw, 60px)/.98 var(--display); text-transform: uppercase; color: var(--dark); text-wrap: balance; }
.h2.light { color: #fff; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 13.5px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); }
.eyebrow.light { color: var(--accent); }
.sec { padding: 96px 0; }
.gray { background: var(--gray); }
.head-c { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.head-c .eyebrow { justify-content: center; }
.head-c p:not(.eyebrow) { margin: 16px 0 0; font-size: 19px; color: var(--ink-soft); }
.head-c a { color: var(--brand); font-weight: 700; }
.head-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 64px; align-items: end; margin-bottom: 48px; }
.head-split > p { margin: 0; font-size: 18.5px; color: var(--ink-soft); }
.head-split .btn { justify-self: end; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 8px;
  border: 2px solid transparent; font: 700 16px/1 var(--ui); text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn .i { width: 19px; height: 19px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hi); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-hi); }
.btn-outline { border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.8); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--dark); }

/* sample bar (CSK colors) */
.samplebar { background: #0F2A44; color: #fff; font: 500 14px/1.45 var(--sans); text-align: center; padding: 9px 16px; }
.samplebar a { color: #FF6B2C; font-weight: 700; text-underline-offset: 3px; }

/* optional urgent-service strip (storms, leaks, no heat, burst pipes...) */
.alert { background: var(--accent); color: var(--accent-ink); font: 600 16px/1.35 var(--sans); }
.alert .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 10px; text-align: center; }
.alert .i { width: 18px; height: 18px; }
.alert a { font-weight: 700; }

/* header */
header.site { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(var(--dark-rgb),.06); }
.nav { position: relative; display: flex; align-items: center; gap: 30px; height: 86px; }
.logo { display: block; flex: none; text-decoration: none; }
.logo svg { display: block; width: 176px; height: 54px; }
/* logos (Kyle, 2026-10-19): one visual size for every business. Wide logos cap at 50 x 190, stacked or square ones 70 tall */
.logo img { display: block; width: auto; height: 50px; max-width: 190px; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; color: var(--dark); }
.logo-text b { font: 800 27px/.92 var(--display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.logo-text small { margin-top: 5px; font: 700 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.logo-text.sub-top small { margin: 0 0 5px; }
.logo-text.sub-bold small { margin-top: 2px; font: 800 20px/.92 var(--display); letter-spacing: .01em; color: inherit; }   /* a stacked wordmark: both lines bold, the same width */
.logo-text.sub-bold b + small, .logo-text.sub-bold small { color: var(--brand); }
.logo-sq img { height: 70px; max-width: 150px; }
header.site.compact .logo-sq img { height: 60px; }
.logo-mark { display: flex; align-items: center; gap: 10px; }
.logo-mark img { height: 44px; width: auto; max-width: 64px; }   /* as tall as the two lines of the name */
.menu { list-style: none; margin: 0 auto 0 8px; padding: 0; display: flex; align-items: center; gap: 28px; }
.menu > li > a, .drop-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; background: none; border: 0; cursor: pointer;
  font: 700 15.5px/1 var(--ui); color: var(--ink); text-decoration: none;
}
.menu > li > a:hover, .drop-btn:hover, .has-drop.open .drop-btn { color: var(--brand); }
.menu > li > a.active, .drop-btn.active { color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }
.drop-btn .caret { width: 16px; height: 16px; transition: transform .2s; }
.has-drop.open .caret { transform: rotate(180deg); }
.nav-end { display: flex; align-items: center; gap: 18px; }
.callnum { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.callnum .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; }
.callnum small { display: block; font: 500 13.5px/1.2 var(--sans); color: var(--ink-soft); }
.callnum b { display: block; font: 800 19px/1.2 var(--ui); color: var(--dark); }
.nav-end .btn { padding: 15px 22px; }
/* header text never breaks onto two lines; a little less room between items on laptops, where Reviews and FAQ are in the menu (Kyle, 2026-10-19) */
.menu > li > a, .drop-btn, .callnum b, .callnum small, .nav-end .btn { white-space: nowrap; }
@media (max-width: 1480px) {
  .nav { gap: 22px; }
  .menu { gap: 20px; }
  .nav-end { gap: 14px; }
  .nav-end .btn { padding: 14px 18px; }
}
.call-ico, .menu-btn { display: none; }
.menu-btn { width: 48px; height: 48px; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--dark); cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn .x, header.site.open .menu-btn .bars { display: none; }
header.site.open .menu-btn .x { display: block; }

/* services dropdown: icon tiles plus a dark side column. Where it meets the header (Kyle's mock, 2026-10-18):
   over the white part the header's white runs one row further, then a 1px line, then the menu; over the dark
   column the line stays level with the header's own bottom line. Drawn with inset shadows on the two columns. */
.has-drop { position: static; }
.drop {
  position: absolute; left: 0; right: 0; top: 100%; display: none; grid-template-columns: 1fr 300px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 28px 40px -14px rgba(var(--dark-rgb),.24);
}
.has-drop.open .drop { display: grid; }
.drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 18px; box-shadow: inset 0 1px 0 #fff, inset 0 2px 0 var(--line); }
.drop-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; text-decoration: none; }
.drop-item:hover { background: var(--gray); }
.drop-item .ico { transition: background .15s, color .15s; }
.drop-item:hover .ico, .drop-item:focus-visible .ico { background: var(--brand); color: #fff; }
.drop-item .ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--tint); color: var(--brand); }
.drop-item .ico svg { width: 26px; height: 26px; }
.drop-item b { display: block; font: 800 16px/1.2 var(--ui); color: var(--dark); }
.drop-item small { display: block; margin-top: 3px; font-size: 15.5px; line-height: 1.35; color: var(--ink-soft); }
.drop-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; background: var(--dark); color: #fff; box-shadow: inset 0 1px 0 var(--line); }
.ds-k { margin: 0; font: 800 26px/1 var(--display); text-transform: uppercase; color: var(--accent); }
.ds-t { margin: 0; font-size: 16px; line-height: 1.45; color: var(--mist); }
.ds-all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 700 15px/1 var(--ui); color: #fff; text-decoration: none; }
.ds-all .i { width: 17px; height: 17px; }

/* phone and tablet menu */
.mmenu { display: none; max-height: calc(100vh - 86px); overflow: auto; border-top: 1px solid var(--line); background: #fff; }
header.site.open .mmenu { display: block; }
.mmenu .wrap { padding-top: 6px; padding-bottom: 22px; }
.mm-label { margin: 18px 0 4px; font: 700 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.mmenu ul { list-style: none; margin: 0; padding: 0; }
.mmenu li a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font: 700 16.5px/1.3 var(--ui); text-decoration: none; }

/* hero: full-width photo, big headline */
.hero { position: relative; overflow: hidden; background: var(--dark-2); color: #fff; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 35%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--shade-rgb),.95) 0%, rgba(var(--shade-rgb),.84) 36%, rgba(var(--shade-rgb),.35) 64%, rgba(var(--shade-rgb),.08) 100%); }
.hero .hero-in { position: relative; z-index: 2; padding-block: 92px 100px; }
/* the final band's dot grid and mouse glow behind the headline and buttons (Kyle 2026-10-18).
   Kept to the dark left side so the photo stays clean; on phones it sits under the text, below the photo. */
.hero { --x: 30%; --y: 55%; }
.hero-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 64%); mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 64%); }
.hero-fx .fx { position: absolute; inset: 0; }
.hero-fx .fx-dots { background-image: radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.7px); background-size: 24px 24px; }
.hero-fx .fx-glow { background: radial-gradient(circle 420px at var(--x) var(--y), var(--fx-glow), transparent 70%); }
.hero-fx .fx-lit { background-image: radial-gradient(var(--fx-dot) 1.5px, transparent 2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle 220px at var(--x) var(--y), #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--x) var(--y), #000 0%, rgba(0,0,0,.4) 50%, transparent 100%); }
.hero h1 { margin: 0; max-width: 700px; font: 800 clamp(56px, 7.2vw, 100px)/.92 var(--display); text-transform: uppercase; }
.hero h1 .tagline { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 700 15px/1.2 var(--sans); letter-spacing: .14em; color: var(--accent); }
.hero h1 .tagline::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); }
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { max-width: 560px; margin: 26px 0 0; font-size: 20px; line-height: 1.55; color: var(--fx-text); }
.checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 34px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.checks .i { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.grating { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 16px; color: #fff; text-decoration: none; }
.grating .stars { display: flex; gap: 3px; color: var(--accent); }
.grating .stars svg { width: 18px; height: 18px; }
.grating .tag { padding: 4px 8px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font: 800 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }

/* trust badges */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.badge { display: flex; align-items: center; gap: 14px; padding: 26px 20px; border-left: 1px solid var(--line); }
.badge:first-child { border-left: 0; padding-left: 0; }
.badge .ico { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--tint); color: var(--brand); }
.badge .ico svg { width: 27px; height: 27px; }
.badge b { display: block; font: 800 16px/1.25 var(--ui); color: var(--dark); }
.badge > span > span { display: block; margin-top: 2px; font-size: 16px; line-height: 1.35; color: var(--ink-soft); }

/* services: icon cards (Kyle 2026-10-18: big icons on every site, cleaner than a photo per service) */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.svc { display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: var(--r); background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.07); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.svc:hover { transform: translateY(-4px); box-shadow: 0 2px 0 var(--line), 0 20px 40px rgba(var(--dark-rgb),.13); }
.svc .ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 7px var(--tint); }
.svc .ico svg { width: 30px; height: 30px; }
.svc h3 { margin: 0 0 10px; font: 800 19px/1.25 var(--ui); color: var(--dark); }
.svc p { margin: 0 0 18px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.svc .short { display: none; }
.more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--ui); color: var(--brand); }
.more .i { width: 17px; height: 17px; transition: transform .2s; }
.svc:hover .more .i { transform: translateX(3px); }

/* call band */
.band { background: var(--brand); color: #fff; }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding-block: 44px; }
.band-copy { display: flex; align-items: center; gap: 20px; }
.band-copy .ico { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--accent); }
.band-copy .ico svg { width: 32px; height: 32px; }
.band h2 { margin: 0; font: 800 clamp(30px, 3.2vw, 40px)/1 var(--display); text-transform: uppercase; }
.band p { margin: 8px 0 0; font-size: 18px; color: var(--fx-text); }

/* why choose us */
.why .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.why-photo { position: relative; }
.why-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.yrs { position: absolute; right: -24px; bottom: 32px; padding: 18px 24px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); text-align: center; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.yrs b { display: block; font: 800 46px/1 var(--display); }
.yrs span { display: block; margin-top: 4px; font: 700 12.5px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.why-copy > p:not(.eyebrow) { margin: 20px 0 0; color: var(--ink-soft); }
.reasons { list-style: none; margin: 30px 0 34px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.reasons li { display: flex; align-items: flex-start; gap: 14px; }
.reasons .ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--tint); color: var(--brand); }
.reasons .ico svg { width: 24px; height: 24px; }
.reasons b { display: block; font: 800 16px/1.25 var(--ui); color: var(--dark); }
.reasons > li > span > span { display: block; margin-top: 4px; font-size: 16.5px; line-height: 1.45; color: var(--ink-soft); }
.why .ctas { margin-top: 0; }

/* recent work */
/* motion: blocks ease up into place as they scroll in (html.rv is set in the head) */
html.rv [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
html.rv [data-reveal].in { opacity: 1; transform: none; }

/* header: slims down once the page scrolls; the menu marks the section on screen */
@media (min-width: 600px) {
  header.site .nav, header.site .logo img { transition: height .25s ease; }
  header.site.compact .nav { height: 72px; }
  header.site.compact .logo img { height: 52px; }
}
.menu > li > a.active, .drop-btn.active { color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }

/* trust bar badges: their own certification marks, unchanged */
.badge .bimg { flex: none; width: auto; height: 62px; }

/* recent work: before / after sliders, then photos that open full size */
.ba-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.ba { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--dark); --pos: 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba.wide { aspect-ratio: 1000 / 563; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba .split { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.ba .knob { position: absolute; top: 50%; left: var(--pos); display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: #fff; color: var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.28); pointer-events: none; }
.ba .knob svg { width: 26px; height: 26px; }
.ba .tagb { position: absolute; top: 14px; padding: 6px 10px; border-radius: 5px; background: color-mix(in srgb, var(--dark) 85%, transparent); color: #fff; font: 800 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.ba .tagb.b { left: 14px; }
.ba .tagb.a { right: 14px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba input:focus-visible ~ .knob { outline: 3px solid var(--accent); outline-offset: 3px; }
.ba figcaption, .photos figcaption, .shot figcaption { position: absolute; left: 14px; bottom: 14px; padding: 9px 13px; border-radius: 6px; background: rgba(255,255,255,.95); color: var(--dark); font: 700 14px/1.2 var(--ui); pointer-events: none; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.photos figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); }
.ph { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.photos figure:hover img, .shot:hover img { transform: scale(1.04); }
.ph:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.zoom { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--dark) 75%, transparent); color: #fff; pointer-events: none; }
.zoom svg { width: 18px; height: 18px; }
.lb { width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: 12px; background: var(--shade); color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(var(--shade-rgb),.86); }
.lb img { display: block; width: 100%; max-height: 80vh; object-fit: contain; background: #000; touch-action: pan-y; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 600 16px/1.35 var(--sans); }
.lb-btns { display: flex; flex: none; gap: 8px; }
.lb button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.lb button:hover { background: rgba(255,255,255,.12); }
.lb button svg { width: 20px; height: 20px; }
.lb .prev svg { transform: rotate(180deg); }

/* service area map: real county lines and town locations */
.map-card { grid-area: map; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.07); }
.area-map { display: block; width: 100%; height: auto; }
.area-map .cty { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.area-map .cty.home { fill: var(--tint); stroke: var(--brand); stroke-width: 2; }
.area-map .cty-name { fill: var(--muted); font: 700 10px var(--ui); letter-spacing: .12em; }
.area-map .pin circle { fill: var(--brand); stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: transform .2s ease, fill .2s ease; }
.area-map .pin .ring { fill: color-mix(in srgb, var(--fx-dot) 45%, transparent); stroke: none; }
.area-map .pin text { fill: var(--dark); font: 700 13px var(--ui); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.area-map .pin.home text { font-size: 14px; }
.area-map .pin .short { display: none; }
.area-map .pin.hot circle:not(.ring) { transform: scale(1.5); fill: var(--accent); }
.towns li { cursor: default; transition: border-color .2s ease, background .2s ease; }
.towns li.hot { border-color: var(--brand); background: var(--tint); }
/* samples on the made-up demo: a before / after slot and a map with no real places in them */
.ba .ph-x { position: absolute; inset: 0; display: grid; align-items: center; font: 800 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.ba .ph-x.after-x { justify-items: end; padding-right: 12%; background: var(--tint); color: var(--brand); }
.ba .ph-x.before { justify-items: start; padding-left: 12%; background: var(--line-2); color: var(--muted); }
.ba-row > .shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); }
.shot .ph { height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.map-card { position: relative; }
.map-card .sample { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 5px; background: var(--dark); color: #fff; font: 800 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.map-note { margin: 8px 6px 2px; font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }

/* reviews */
.rv-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.rv-score { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 30px; border-radius: 14px; background: var(--dark); color: #fff; }
.rv-score.real { justify-content: flex-start; gap: 14px; padding: 32px 30px; }
.rv-score .big { font: 800 84px/1 var(--display); }
.rv-score a { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--ui); color: var(--accent); text-decoration: none; }
.rv-score a .i { width: 17px; height: 17px; }
.rv-score .tag { display: inline-block; padding: 6px 10px; border-radius: 5px; background: rgba(255,255,255,.12); color: var(--mist); font: 800 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.rv-score .stars { display: flex; gap: 6px; margin: 18px 0 14px; color: var(--accent); }
.rv-score .stars svg { width: 26px; height: 26px; }
.rv-score p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--mist); }
.rv-score .small { font-size: 15.5px; color: var(--mist); }
.rv-card { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 30px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.07); }
.rv-card.ph { gap: 16px; border: 1.5px dashed var(--line-2); box-shadow: none; }
.rv-card .stars { display: flex; gap: 3px; color: #F5B83D; }
.rv-card .stars svg { width: 18px; height: 18px; }
.rv-card blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.rv-card .q { height: 30px; font: 800 62px/1 var(--ui); color: var(--accent); }
.lines { display: grid; gap: 11px; }
.lines i { display: block; height: 10px; border-radius: 5px; background: var(--line); }
.lines i:nth-child(2) { width: 92%; }
.lines i:last-child { width: 62%; }
.rv-card cite { margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 700; color: var(--dark); }
.rv-card.ph cite { color: var(--ink-soft); }
.rv-card cite span { display: block; font-size: 14.5px; font-weight: 400; }

/* how it works */
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps-row li { padding: 34px 30px; border-radius: var(--r); background: #fff; text-align: center; box-shadow: 0 2px 0 var(--line); }
.steps-row .num { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--brand); color: #fff; font: 800 26px/1 var(--ui); box-shadow: 0 0 0 8px var(--tint); }
.steps-row h3 { margin: 0 0 10px; font: 800 19px/1.25 var(--ui); color: var(--dark); }
.steps-row p { margin: 0; color: var(--ink-soft); }
.steps-row a { color: var(--brand); font-weight: 700; }

/* estimate */
.est-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.intro { margin: 20px 0 30px; color: var(--ink-soft); }
.callcard { padding: 26px 28px; border-left: 6px solid var(--brand); border-radius: 8px; background: var(--gray); }
.callcard small { display: block; font: 700 12.5px/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.callcard .phone { display: block; margin: 8px 0 16px; font: 800 50px/1.05 var(--display); color: var(--dark); text-decoration: none; }
.callcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 17px; color: var(--ink-soft); }
.callcard li { display: flex; align-items: flex-start; gap: 10px; }
.callcard li .i { width: 18px; height: 18px; margin-top: 4px; color: var(--brand); }
.form-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 20px 44px rgba(var(--dark-rgb),.12); }
.form-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 18px 28px; background: var(--dark); color: #fff; }
.form-top b { font: 800 28px/1 var(--display); text-transform: uppercase; }
.form-top span { font: 700 12.5px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.quote { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 28px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 16px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 13px 14px; border: 1.5px solid var(--line-2); border-radius: 6px;
  background: #fff; color: var(--ink); font: inherit; font-size: 17px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18); }
.quote > .btn { grid-column: 1 / -1; padding: 19px; font-size: 17px; }
.fineprint { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); }
.sent { grid-column: 1 / -1; padding: 36px 10px; text-align: center; }
.sent h3 { margin: 0 0 12px; font: 800 34px/1.1 var(--display); text-transform: uppercase; color: var(--dark); }
.sent p { margin: 0 0 12px; color: var(--ink-soft); }
.sent a { color: var(--brand); font-weight: 700; }

/* service area */
.area .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "head head" "map chips" "map hours"; gap: 28px 56px; align-items: center; }
.area .head-c { grid-area: head; margin-bottom: 20px; }
.area .towns { grid-area: chips; margin: 0; align-self: end; }
.hours { grid-area: hours; align-self: start; }
.towns { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.towns li { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: 700 15.5px/1 var(--ui); color: var(--dark); }
.towns .i { width: 18px; height: 18px; color: var(--brand); }
.hours { padding: 32px; border-radius: 14px; background: var(--dark); color: #fff; }
.hours h3 { margin: 0 0 18px; font: 800 30px/1 var(--display); text-transform: uppercase; }
.hours ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.hours li { display: flex; align-items: flex-start; gap: 12px; color: var(--fx-text); }
.hours li .i { margin-top: 3px; color: var(--accent); }
.hours .btn { width: 100%; }

/* FAQ */
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 2px 0 var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font: 700 17px/1.35 var(--ui); color: var(--dark); }
.faq summary::-webkit-details-marker { display: none; }
/* plus / minus: a drawn icon, so it sits dead center; the vertical stroke folds away when the answer opens */
.faq summary .pm { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--brand); }
.faq summary .pm svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; overflow: visible; }
.faq summary .pm .v { transform-box: fill-box; transform-origin: center; transition: transform .2s, opacity .2s; }
.faq details[open] summary .pm .v { transform: scaleY(0); opacity: 0; }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-soft); }
.faq-list a { color: var(--brand); font-weight: 700; }

/* final call band: a dot grid on the dark brand color with a soft accent glow that follows the
   pointer and lights up the dots near it (drifts slowly on its own on touch screens; still with reduced motion) */
.final { position: relative; overflow: hidden; color: #fff; text-align: center; --x: 50%; --y: 50%;
  background: radial-gradient(ellipse 80% 120% at 50% 0%, var(--fx-top) 0%, var(--dark) 55%, var(--dark-2) 100%); }
.final .fx { position: absolute; inset: 0; pointer-events: none; }
.final .fx-dots { background-image: radial-gradient(rgba(255,255,255,.11) 1.2px, transparent 1.7px); background-size: 24px 24px; background-position: center; }
.final .fx-lit { background-image: radial-gradient(var(--fx-dot) 1.5px, transparent 2px); background-size: 24px 24px; background-position: center;
  -webkit-mask-image: radial-gradient(circle 230px at var(--x) var(--y), #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
  mask-image: radial-gradient(circle 230px at var(--x) var(--y), #000 0%, rgba(0,0,0,.4) 50%, transparent 100%); }
.final .fx-glow { background: radial-gradient(circle 440px at var(--x) var(--y), var(--fx-glow), transparent 70%); }
.final .fx-edge { background: linear-gradient(to bottom, var(--dark-2) 0%, transparent 18%, transparent 82%, var(--dark-2) 100%); opacity: .55; }
.final .wrap { position: relative; z-index: 1; max-width: 900px; padding-block: 104px; }
.final .eyebrow { justify-content: center; }
.final .lead { margin: 18px auto 0; max-width: 620px; font-size: 20px; color: var(--fx-text); }
.final .ctas { justify-content: center; }

/* footer */
footer { background: var(--gray); border-top: 1px solid var(--line); font-size: 16.5px; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; padding-block: 64px 52px; }
.foot .logo svg { width: 190px; height: 58px; }
.foot .logo img { height: 62px; max-width: 260px; }
.foot p { max-width: 300px; margin: 16px 0 0; color: var(--ink-soft); }
.foot h3 { margin: 4px 0 16px; font: 800 22px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--dark); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink-soft); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brand); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 20px 22px; border-top: 1px solid var(--line-2); font-size: 14.5px; color: var(--ink-soft); }
.legal a { color: var(--ink-soft); }
.callbar { display: none; }

/* laptops and tablets */
@media (max-width: 1180px) {
  .menu .opt { display: none; }
}
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .trust-row { grid-template-columns: 1fr 1fr; }
  .badge:nth-child(3) { border-left: 0; padding-left: 0; }
  .badge:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rv-grid { grid-template-columns: 1fr 1fr; }
  .rv-score { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 960px) {
  .menu { display: none; }
  .menu-btn { display: inline-flex; }
  .nav { justify-content: space-between; }
  .head-split { grid-template-columns: 1fr; }
  .head-split .btn { justify-self: start; }
  .why .wrap { grid-template-columns: 1fr; gap: 48px; }
  .why-photo { max-width: 520px; }
  .yrs { right: 16px; bottom: -24px; }
  .steps-row { grid-template-columns: 1fr; }
  .est-in { grid-template-columns: 1fr; gap: 40px; }
  .area .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "chips" "map" "hours"; gap: 28px; }
  .area .head-c { margin-bottom: 4px; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ba-row { grid-template-columns: 1fr; }
  .ba-row > .shot { aspect-ratio: 4 / 3; }
  .photos { grid-template-columns: 1fr 1fr; }
  .photos figure:last-child { grid-column: 1 / -1; }
}
/* phones */
@media (max-width: 699px) {
  .hero::after { display: none; }
  .hero-bg img { position: static; height: auto; aspect-ratio: 5 / 4; object-position: 50% 30%; }
  .hero .hero-in { padding-block: 32px 44px; }
  .hero-fx { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 80vw, #000 calc(80vw + 60px)); mask-image: linear-gradient(to bottom, transparent 0, transparent 80vw, #000 calc(80vw + 60px)); }
  .hero h1 { font-size: clamp(44px, 12.4vw, 66px); }
  .hero h1 .tagline { margin-bottom: 16px; font-size: 13px; }
  .lede { margin-top: 18px; font-size: 18px; }
  .checks { grid-template-columns: 1fr; gap: 10px; }
  .checks li { font-size: 17.5px; }
  .hero .ctas { margin-top: 26px; }
  .hero .ctas .btn { flex: 1 1 100%; }
  .sec { padding: 68px 0; }
  .head-c, .head-split { margin-bottom: 34px; }
  .band .wrap { padding-block: 36px; }
  .band .btn { flex: 1 1 100%; }
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); box-shadow: 0 -1px 0 var(--line);
  }
  .callbar .btn { padding: 15px 10px; font-size: 15.5px; }
  body { padding-bottom: 78px; }
}
@media (max-width: 599px) {
  .wrap { padding-inline: 18px; }
  .alert .long { display: none; }
  .nav { height: 70px; }
  .logo svg { width: 150px; height: 46px; }
  .logo img { height: 46px; max-width: 180px; }
  .logo-sq img { height: 56px; }
  .callnum, .nav-end .btn-est { display: none; }
  .call-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
  .call-ico .i { width: 22px; height: 22px; }
  .nav-end { gap: 10px; }
  .grating { gap: 10px; padding: 10px 14px; font-size: 15px; }
  .trust-row { grid-template-columns: 1fr; }
  .badge, .badge:nth-child(3) { padding: 18px 0; border-left: 0; }
  .badge:nth-child(n+2) { border-top: 1px solid var(--line); }
  .svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 18px; }
  .svc .ico { grid-row: span 3; width: 52px; height: 52px; margin: 0; box-shadow: 0 0 0 5px var(--tint); }
  .svc .ico svg { width: 25px; height: 25px; }
  .svc p { display: none; }
  .svc .short { display: block; margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: var(--ink-soft); }
  .svc h3 { margin-bottom: 4px; font-size: 17.5px; }
  .band-copy { align-items: flex-start; }
  .band-copy .ico { width: 52px; height: 52px; }
  .reasons { grid-template-columns: 1fr; gap: 18px; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-card + .rv-card { display: none; }
  .quote { grid-template-columns: 1fr; padding: 22px 18px; }
  .form-top { padding: 16px 18px; }
  .callcard { padding: 22px; }
  .callcard .phone { font-size: 44px; }
  .hours { padding: 26px 22px; }
  .photos { grid-template-columns: 1fr; }
  .ba .ph-x { font-size: 20px; }
  .area-map .pin text { display: none; }
  .area-map .pin.home .short { display: block; font-size: 26px; stroke-width: 6px; }
  .area-map .pin circle:not(.ring) { transform: scale(1.7); }
  .area-map .pin .ring { transform: scale(1.5); }
  .area-map .pin.hot circle:not(.ring) { transform: scale(2.6); }
  .towns li { cursor: pointer; }
  .foot { grid-template-columns: 1fr; gap: 30px; padding-block: 48px 40px; }
  .final .wrap { padding-block: 72px; }
  .final .ctas .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Inner pages (Kyle 2026-10-18): service pages, about, recent work, contact, refer, weekly pages, 404.
   They reuse the home page's blocks (hero, trust badges, service cards, reasons, photos, reviews, steps,
   estimate form, service area, FAQ, final call band) and add the few below.
   ========================================================================== */

/* photo hero on inner pages: the home page's hero, a little shorter */
.hero.sub .hero-in { padding-block: 80px 88px; }
.hero.sub h1 { max-width: 760px; font-size: clamp(50px, 5.6vw, 78px); }
.hero.sub .updated { margin: 22px 0 0; font-size: 14.5px; color: var(--mist); }

/* page header with no photo: the dark band with the dot grid */
.phead { position: relative; overflow: hidden; color: #fff; --x: 30%; --y: 50%;
  background: radial-gradient(ellipse 80% 130% at 25% 0%, var(--fx-top) 0%, var(--dark) 55%, var(--dark-2) 100%); }
.phead > .fx { position: absolute; inset: 0; pointer-events: none; }
.phead > .fx-dots { background-image: radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.7px); background-size: 24px 24px; background-position: center; }
.phead > .fx-glow { background: radial-gradient(circle 420px at var(--x) var(--y), var(--fx-glow), transparent 70%); }
.phead > .fx-lit { background-image: radial-gradient(var(--fx-dot) 1.5px, transparent 2px); background-size: 24px 24px; background-position: center;
  -webkit-mask-image: radial-gradient(circle 220px at var(--x) var(--y), #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--x) var(--y), #000 0%, rgba(0,0,0,.4) 50%, transparent 100%); }
.phead > .fx-edge { background: linear-gradient(to bottom, transparent 70%, var(--dark-2) 100%); opacity: .6; }
.phead .wrap { position: relative; z-index: 1; padding-block: 76px 84px; }
.phead h1 { margin: 0; max-width: 920px; font: 800 clamp(46px, 6vw, 80px)/.95 var(--display); text-transform: uppercase; text-wrap: balance; }
.phead h1 em { font-style: normal; color: var(--accent); }
.phead .lede { max-width: 680px; }
.phead .lede a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.phead .meta { margin: 22px 0 0; font-size: 15.5px; color: var(--mist); }
.phead .meta a { color: #fff; font-weight: 600; }
.testnote { display: inline-block; margin: 0 0 22px; padding: 10px 16px; border: 1px dashed var(--accent-hi); border-radius: 8px; background: rgba(var(--accent-rgb),.14); color: #fff; font-weight: 600; }

/* contact tiles inside the page header */
.ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin-top: 36px; }
.ctile { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
a.ctile:hover { background: rgba(255,255,255,.12); }
.ctile .ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.ctile .ico svg { width: 22px; height: 22px; }
.ctile small { display: block; font: 700 12.5px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.ctile b { display: block; margin-top: 4px; font: 800 18px/1.25 var(--ui); }

/* what a service includes, with the estimate card beside it */
.inc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 40px; align-items: start; }
.inc-grid > .inc-copy { grid-column: 1 / 3; }
.inc-grid > .est-card { grid-column: 3; grid-row: 1 / span 2; align-self: end; }
.inc .tiles { margin-top: 48px; }
.inc-copy > p:not(.eyebrow) { margin: 20px 0 0; color: var(--ink-soft); }
.inc-copy > p a { color: var(--brand); font-weight: 700; }
.photos.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* overlay captions stay on one line */
.photos figcaption, .shot figcaption { max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photos.two figure:last-child, .photos.gallery figure:last-child { grid-column: auto; }
.inc .photos { margin-top: 40px; }
.side-sticky { position: sticky; top: 110px; grid-area: auto; }
.hours .lead { margin: -8px 0 6px; font-size: 16px; color: var(--mist); }
.hours .big { display: block; margin: 0 0 20px; font: 800 42px/1.05 var(--display); color: #fff; text-decoration: none; }

/* tiles: short points, with an icon or a number */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles > li { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r); background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.06); }
.tiles .ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 12px; background: var(--tint); color: var(--brand); }
.tiles .ico svg { width: 25px; height: 25px; }
.tiles .n { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; font: 800 19px/1 var(--ui); box-shadow: 0 0 0 6px var(--tint); }
.tiles h3 { margin: 0; font: 800 17.5px/1.3 var(--ui); color: var(--dark); }
.tiles p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.tiles a { color: var(--brand); font-weight: 700; }
.tiles.row > li { flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; }
.tiles.row p { color: var(--ink); font-size: 17px; font-weight: 600; }
.tiles.row .ico { background: color-mix(in srgb, var(--accent) 22%, #fff); color: var(--accent-ink); }
.after-tiles { margin: 30px 0 0; text-align: center; font-size: 18px; color: var(--ink-soft); }
.after-tiles a { color: var(--brand); font-weight: 700; }

/* the oak-trimming months (Texas A&M Forest Service: no oak pruning February through June) */
.oak { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.oak-copy > p:not(.eyebrow) { margin: 20px 0 0; color: var(--ink-soft); }
.oak-copy a { color: var(--brand); font-weight: 700; }
.months-card { padding: 30px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.07); }
.months-card h3 { margin: 0 0 18px; font: 800 24px/1.1 var(--display); text-transform: uppercase; color: var(--dark); }
.months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.months li { display: grid; place-items: center; gap: 6px; padding: 14px 4px 12px; border-radius: 8px; background: var(--tint); color: var(--brand); font: 800 15px/1 var(--ui); }
.months li svg { width: 18px; height: 18px; }
.months li.no { background: var(--dark); color: #fff; }
.months li.no svg { color: var(--accent); }
.months-key { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15.5px; color: var(--ink-soft); }
.months-key li { display: flex; align-items: center; gap: 8px; }
.months-key i { width: 14px; height: 14px; border-radius: 4px; background: var(--tint); }
.months-key i.no { background: var(--dark); }

/* two choices side by side (stump grinding or full removal) */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.cmp { padding: 32px; border: 2px solid transparent; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.06); }
.cmp.pick { border-color: var(--brand); }
.cmp .tagp { display: inline-block; margin-bottom: 14px; padding: 6px 10px; border-radius: 5px; background: var(--gray); color: var(--ink-soft); font: 800 11.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.cmp.pick .tagp { background: var(--brand); color: #fff; }
.cmp h3 { margin: 0 0 12px; font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--dark); }
.cmp p { margin: 0; color: var(--ink-soft); }

/* towns band on inner pages */
.area-band { background: var(--dark); color: #fff; }
.area-band .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 36px 64px; align-items: center; padding-block: 88px; }
.area-band .wrap > div > .btn { margin-top: 28px; }
.area-band .map-card { grid-area: auto; }
.area-band .h2 { font-size: clamp(34px, 3.6vw, 46px); }
.area-band .towns { margin: 22px 0 0; }
.area-band .towns li { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }
.area-band .towns .i { color: var(--accent); }
.area-band .note { margin: 16px 0 0; color: var(--mist); }

/* service cards: three across when one is the page you're on */
.svc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid.three .svc p { display: none; }
.svc-grid.three .svc .short { display: block; margin: 0 0 18px; font-size: 16.5px; line-height: 1.45; color: var(--ink-soft); }

/* FAQ with its heading at the side */
.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: start; }
.faq-split .faq-list { max-width: none; margin: 0; }
.faq-split .side { position: sticky; top: 110px; }
.faq-split .side p:not(.eyebrow) { margin: 16px 0 0; color: var(--ink-soft); }
.faq-split .side a { color: var(--brand); font-weight: 700; }

/* about: numbers, the story then and now */
.stats { background: #fff; border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 30px 16px; border-left: 1px solid var(--line); text-align: center; }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 800 54px/1 var(--display); color: var(--brand); }
.stat span { display: block; margin-top: 8px; font: 700 13px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.story .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.story-copy > p:not(.eyebrow) { margin: 20px 0 0; color: var(--ink-soft); }
.story-copy .ctas { margin-top: 30px; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tl li { padding: 28px 30px; border-radius: 14px; background: var(--gray); }
.tl li.now { background: var(--dark); color: #fff; }
.tl b { display: block; font: 800 46px/1 var(--display); text-transform: uppercase; color: var(--brand); }
.tl li.now b { color: var(--accent); }
.tl h3 { margin: 12px 0 6px; font: 800 18px/1.3 var(--ui); color: var(--dark); }
.tl li.now h3 { color: #fff; }
.tl p { margin: 0; font-size: 16.5px; color: var(--ink-soft); }
.tl li.now p { color: var(--mist); }

/* weekly pages list */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.posts a { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 22px 26px; border-radius: var(--r); background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.06); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.posts a:hover { transform: translateY(-2px); box-shadow: 0 2px 0 var(--line), 0 16px 34px rgba(var(--dark-rgb),.11); }
.posts .kind { justify-self: start; white-space: nowrap; padding: 6px 10px; border-radius: 5px; background: var(--tint); color: var(--brand); font: 800 11.5px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.posts b { display: block; font: 800 18px/1.35 var(--ui); color: var(--dark); }
.posts small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-soft); }
.posts .go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; }
.posts .go svg { width: 18px; height: 18px; }

/* recent work: filter by service */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
.filters button { padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--dark); font: 700 15px/1 var(--ui); cursor: pointer; }
.filters button:hover { border-color: var(--brand); }
.filters button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.gallery figure[hidden] { display: none; }
.ba-note { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 34px; border-radius: var(--r); background: var(--dark); color: #fff; }
.ba-note h3 { margin: 0; font: 800 30px/1 var(--display); text-transform: uppercase; }
.ba-note p { margin: 0; color: var(--mist); }
.credits { margin-top: 34px; font-size: 15px; color: var(--ink-soft); }
.credits summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.credits ul { display: grid; gap: 4px; margin: 12px 0 0; padding-left: 20px; }
.credits a { color: var(--ink-soft); }
.note-s { max-width: 760px; margin: -14px auto 34px; text-align: center; font-size: 16px; color: var(--ink-soft); }

/* refer a neighbor */
.refer-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.vsteps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.vsteps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.vsteps .n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; font: 800 19px/1 var(--ui); box-shadow: 0 0 0 6px var(--tint); }
.vsteps h3 { margin: 4px 0 4px; font: 800 18px/1.3 var(--ui); color: var(--dark); }
.vsteps p { margin: 0; color: var(--ink-soft); }
.refer-card { padding: 28px; --csk-accent: var(--brand); }
.refer-card .btn { justify-content: center; margin: 0; }

/* weekly page: the article with the estimate card beside it */
.post-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.article { max-width: 760px; }
.article .sample { margin: 0 0 30px; padding: 14px 18px; border: 1px dashed #D99A1E; border-radius: 10px; background: #FFF6E3; font-size: 15.5px; color: var(--ink); }
.article .answer { margin: 0 0 8px; padding: 24px 28px; border-left: 5px solid var(--brand); border-radius: 0 12px 12px 0; background: var(--tint); }
.article .answer b { display: block; margin-bottom: 8px; font: 800 13px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.article .answer p { margin: 0; font-size: 19px; color: var(--ink); }
.article h2 { margin: 44px 0 12px; font: 800 clamp(28px, 3vw, 36px)/1.02 var(--display); text-transform: uppercase; color: var(--dark); }
.article p, .article li { color: var(--ink-soft); }
.article p a { color: var(--brand); font-weight: 600; }
.article ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.article ul li { display: flex; gap: 12px; align-items: flex-start; }
.article ul li svg { flex: none; width: 24px; height: 24px; margin-top: 2px; padding: 4px; border-radius: 50%; background: var(--tint); color: var(--brand); }
.article figure { margin: 32px 0; }
.article figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.photo-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 20px; border: 2px dashed var(--line-2); border-radius: var(--r); background: var(--gray); color: var(--ink-soft); font-weight: 600; text-align: center; }
.article .source { margin-top: 34px; font-size: 15px; }
.related { margin-top: 18px; padding: 26px; border-radius: 14px; background: var(--gray); }
.related h3 { margin: 0 0 12px; font: 800 22px/1.1 var(--display); text-transform: uppercase; color: var(--dark); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.related a { display: flex; align-items: flex-start; gap: 8px; color: var(--dark); font-weight: 600; text-decoration: none; }
.related a:hover { color: var(--brand); }
.related a svg { flex: none; width: 16px; height: 16px; margin-top: 5px; color: var(--brand); }

/* 404 and other short pages */
.links { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 860px; }
.links a { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--r); background: #fff; box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(var(--dark-rgb),.06); color: var(--dark); font: 700 16.5px/1.3 var(--ui); text-decoration: none; }
.links a:hover { color: var(--brand); }
.links .ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--brand); }
.links .ico svg { width: 22px; height: 22px; }
.links .arr { width: 18px; height: 18px; margin-left: auto; color: var(--brand); }

@media (max-width: 1080px) {
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-in { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }
}
@media (max-width: 960px) {
  .oak, .story .wrap, .faq-split, .refer-in, .post-in { grid-template-columns: minmax(0, 1fr); }
  .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inc-grid > .inc-copy, .inc-grid > .est-card { grid-column: 1 / -1; grid-row: auto; align-self: start; }
  .side-sticky, .faq-split .side { position: static; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-band .wrap { grid-template-columns: minmax(0, 1fr); }
  .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ctiles { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 699px) {
  .hero.sub .hero-in { padding-block: 30px 42px; }
  .hero.sub h1 { font-size: clamp(42px, 11.6vw, 62px); }
}
@media (max-width: 599px) {
  .phead .wrap { padding-block: 48px 56px; }
  .phead .ctas .btn { flex: 1 1 100%; }
  .tiles, .tiles.two, .tiles.four, .compare, .photos.two, .links { grid-template-columns: minmax(0, 1fr); }
  .tiles { gap: 12px; }
  .tiles > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 18px; }
  .tiles > li > .ico, .tiles > li > .n { grid-row: span 2; }
  .tiles.row > li { display: flex; padding: 16px 18px; }
  .svc-grid.three { grid-template-columns: minmax(0, 1fr); }
  .posts a { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 20px; }
  .posts .kind { grid-column: 1 / -1; }
  .stat b { font-size: 44px; }
  .cmp { padding: 26px 22px; }
  .months-card { padding: 22px 18px; }
  .ba-note { padding: 26px 22px; }
}

.gray .callcard { background: #fff; }

/* builder variants (build_site.py): BBB proof badge, an area section with no map, a towns band with no map */
.grating .grade { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 5px; background: #fff; color: var(--dark); font: 800 14px/1 var(--ui); }
.area.nomap .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "chips hours"; }
.area-band .wrap:not(:has(.map-card)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .area.nomap .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chips" "hours"; } }
/* service cards for any count (build_site.py grid_class) */
.svc-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid.center { display: flex; flex-wrap: wrap; justify-content: center; }
.svc-grid.center > .svc { flex: 0 0 calc((100% - 72px) / 4); }
.svc-grid.three.center > .svc { flex-basis: calc((100% - 48px) / 3); }
@media (max-width: 1080px) { .svc-grid.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid.center > .svc, .svc-grid.three.center > .svc { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 599px) { .svc-grid.cols3 { grid-template-columns: minmax(0, 1fr); } .svc-grid.center > .svc, .svc-grid.three.center > .svc { flex-basis: 100%; } }
/* "other services" cards: two across on tablets, so longer service names stay on one line */
@media (max-width: 960px) { .svc-grid.three:not(.center) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .svc-grid.three:not(.center) { grid-template-columns: minmax(0, 1fr); } }
.nw { white-space: nowrap; }
@media (max-width: 599px) { .inc-grid { grid-template-columns: minmax(0, 1fr); } }
/* section heads with a line of text on the right: the text sits right-aligned (Kyle 2026-10-18) */
.head-split > p { text-align: right; }
@media (max-width: 960px) { .head-split > p { text-align: left; } }

/* service area (Kyle 2026-10-18), home page and service pages alike: heading and line centered on top, the map
   and the hours card side by side at exactly the same height, the town badges centered in rows under both */
.area .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "head head" "map hours" "chips chips"; align-items: stretch; gap: 32px; }
.area .head-c { margin-bottom: 8px; }
.area .map-card { display: flex; flex-direction: column; justify-content: center; }
.area .hours { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.area .hours ul { margin-bottom: 28px; }
.area .towns { grid-area: chips; justify-content: center; align-self: start; margin: 4px 0 0; }
.area.nomap .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hours" "chips"; max-width: 760px; }
@media (max-width: 960px) {
  .area .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "hours" "chips"; gap: 24px; }
}
/* call band icon: white on the tinted circle (Kyle 2026-10-18: red on gray was hard to read) */
.band-copy .ico { color: #fff; }
/* service area hours card: a bigger heading, every line in full, two buttons (Kyle 2026-10-18) */
.area .hours { padding: 36px 34px; }
.area .hours h3 { margin-bottom: 22px; font-size: clamp(34px, 3vw, 40px); }
.area .hours ul { gap: 14px; margin-bottom: 30px; font-size: 18px; }
.area .hours li a { color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.area .hours .btn + .btn { margin-top: 12px; }
@media (max-width: 599px) { .area .hours { padding: 28px 22px; } }
/* map on phones: the town names are hidden, so the town you tap or point at shows its name (Kyle 2026-10-18) */
.area-map { overflow: hidden; }   /* county lines run past the frame: keep them inside the card */
.area-map .pin { cursor: pointer; }
.area-map .tip { display: none; pointer-events: none; fill: var(--dark); font: 700 26px var(--ui); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
@media (max-width: 599px) {
  .area-map .tip.show { display: block; }
}

/* ad page (Kyle, 2026-10-20; build_site.py --ad): a slim header with no menu, a short footer, a 3-question form */
.ad-head .nav-end { margin-left: auto; }
.ad-foot .legal { border-top: 0; }
.ad-quote .opt-l { font-weight: 400; color: var(--ink-soft); }