/* Back 40 theme — local service sites.
   No framework, no JS, no webfonts. Every request costs ranking. */

:root{
  --ink:#16211C;
  --muted:#57665C;
  --soil:#5C3520;
  --soil-dk:#3E2315;
  --turf:#2E5E3A;
  --turf-dk:#1E3D28;
  --turf-lit:#4A8A50;
  --clay:#C85A2B;
  --clay-lit:#E07338;
  --paper:#F4F6F3;
  --line:#DCE4DE;
  --maxw:1120px;
  --r:14px;
  --pill:999px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  line-height:1.65;font-size:17px;background:#fff;
  padding-bottom:64px; /* clears the sticky mobile call bar */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--turf)}
h1,h2,h3{line-height:1.08;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.6vw,3.9rem);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:800;text-transform:uppercase}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1.1em}

/* eyebrow: wide-tracked clay label. Names a section; never decoration. */
.eyebrow{
  font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-text);margin:0 0 .6rem
}
.on-dark .eyebrow{color:var(--clay-on-dark)}

/* ---------- utility bar ---------- */
.utility{
  background:var(--soil-dk);color:#EADFD6;font-size:.86rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:center;
  padding:.55rem 1rem;text-align:center
}
.utility a{color:#fff;text-decoration:none;font-weight:700}
.utility a:hover{text-decoration:underline}
.utility span{opacity:.85}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:1rem;padding:.7rem 1rem
}
.site-header .logo{margin-right:auto;display:block}
.site-header .logo img{height:46px;width:auto}
.site-nav{display:none;gap:1.35rem}
.site-nav a{
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.4rem 0;
  border-bottom:2px solid transparent
}
.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--clay)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.4rem;border-radius:var(--pill);border:2px solid transparent;
  font:inherit;font-weight:800;text-decoration:none;cursor:pointer;
  letter-spacing:.01em;white-space:nowrap
}
.btn-call{background:var(--turf);color:#fff}
.btn-call:hover{background:var(--turf-dk)}
.btn-quote{background:var(--clay);color:#fff}
.btn-quote:hover{background:var(--clay-lit)}
.btn-ghost{background:transparent;color:var(--turf);border-color:var(--turf)}
.btn-ghost:hover{background:var(--turf);color:#fff}
.btn-lg{min-height:56px;font-size:1.05rem;padding:0 1.8rem}
.btn-block{width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--clay);outline-offset:2px
}

/* ---------- hero ---------- */
.hero{
  position:relative;background-color:var(--turf-dk);color:#fff;
  background-size:cover;background-position:center;
  padding:clamp(3rem,8vw,6rem) 1rem clamp(4rem,9vw,7rem)
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,45,28,.94) 0%,rgba(20,45,28,.80) 46%,rgba(30,61,40,.58) 100%)
}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:clamp(1.02rem,2vw,1.22rem);opacity:.94;max-width:52ch;margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.8rem}
.hero .btn-call{background:var(--clay)}
.hero .btn-call:hover{background:var(--clay-lit)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn-ghost:hover{background:#fff;color:var(--turf-dk);border-color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.chips li{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--pill);padding:.4rem .95rem;font-size:.88rem;font-weight:600
}

/* ---------- soil horizon divider (signature) ----------
   A lawn cross-section: turf over clay. Competitor sites use a generic wave;
   this says something true about what the work actually deals with. */
.horizon{display:block;width:100%;height:clamp(26px,3.6vw,48px);margin:0;line-height:0}
.horizon svg{display:block;width:100%;height:100%}

/* ---------- sections ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(2.6rem,6vw,4.4rem) 1rem}
.section > p{max-width:68ch}
.section-head{max-width:60ch;margin-bottom:2rem}
.prose{max-width:68ch}
.prose h2{margin-top:1.8em}
.band{background:var(--turf);color:#fff}
.band-soil{background:var(--soil);color:#fff}
.band-paper{background:var(--paper)}
.band a,.band-soil a{color:#fff}

/* ---------- cards ---------- */
.cards{
  display:grid;gap:1rem;list-style:none;padding:0;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.25rem;color:var(--ink)
}
.card h3{margin-bottom:.35em}
.card h3 a{text-decoration:none;color:var(--ink)}
.card h3 a:hover{color:var(--turf)}
.card p{margin:0;color:var(--muted);font-size:.96rem}
.card .price{display:block;margin-top:.7rem;font-weight:700;color:var(--turf);font-size:.9rem}
.band .card,.band-soil .card{border-color:transparent}
.band .card a,.band-soil .card a{color:var(--turf)}

/* area links read as a place list, so chips suit them better than cards */
.arealist{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;margin:0}
.arealist a{
  display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--pill);padding:.6rem 1.1rem;text-decoration:none;
  font-weight:700;color:var(--ink);font-size:.95rem;min-height:44px
}
.arealist a:hover{border-color:var(--turf);color:var(--turf)}

/* ---------- breadcrumbs ---------- */
.crumbs{
  max-width:var(--maxw);margin:0 auto;padding:.9rem 1rem 0;
  font-size:.85rem;color:var(--muted)
}
.crumbs a{color:var(--muted)}

/* ---------- reviews ---------- */
.reviews ul{
  list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.reviews li{background:#fff;border-radius:var(--r);padding:1.2rem;border:1px solid var(--line);color:var(--ink)}
.reviews blockquote{margin:.5rem 0 .8rem;font-style:normal}
.reviews cite{font-style:normal;font-weight:700;font-size:.9rem;color:var(--muted)}
.stars{color:var(--clay);letter-spacing:3px;font-size:1.05rem}
.rating-line{font-weight:700}
.attribution{font-size:.85rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:.35rem 0}
.faq summary{
  cursor:pointer;font-weight:700;padding:.85rem 0;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay);font-size:1.5rem;font-weight:800;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq-a{padding-bottom:.4rem}
.faq-a p{margin:0 0 1rem;color:var(--muted)}
.faq-a p:last-child{margin-bottom:.6rem}

/* ---------- CTA + form ---------- */
.cta-wrap{background:var(--soil);color:#fff}
.cta-grid{
  max-width:var(--maxw);margin:0 auto;padding:clamp(2.6rem,6vw,4.4rem) 1rem;
  display:grid;gap:2rem
}
.cta-grid h2{margin-bottom:.4em}
.cta-grid .lede{opacity:.92;max-width:46ch}
.lead-form{
  background:#fff;color:var(--ink);border-radius:var(--r);padding:1.4rem;
  display:grid;gap:.85rem
}
.lead-form label{display:grid;gap:.3rem;font-weight:700;font-size:.9rem}
.lead-form input,.lead-form textarea{
  font:inherit;padding:.75rem;min-height:48px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)
}
.lead-form textarea{min-height:96px;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.site-footer{background:var(--soil-dk);color:#E7DDD5}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;padding:2.6rem 1rem;
  display:grid;gap:1.8rem;font-size:.95rem
}
.site-footer a{color:#fff}
.site-footer strong{color:#fff;display:block;margin-bottom:.4rem}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.16);
  padding:1rem;text-align:center;font-size:.85rem;opacity:.85
}

/* ---------- sticky mobile call bar ---------- */
.sticky-call{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--clay);color:#fff;text-align:center;
  padding:1rem;font-weight:800;text-decoration:none;font-size:1.05rem;
  box-shadow:0 -2px 14px rgba(0,0,0,.18)
}

@media(min-width:860px){
  body{padding-bottom:0}
  .sticky-call{display:none}
  .site-nav{display:flex}
  .cta-grid{grid-template-columns:1.05fr .95fr;align-items:center}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}

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

/* ---------- service icons ----------
   Thin-stroke line marks in the clay accent, sized like the reference set.
   currentColor so a card on a colour band inherits the right tone. */
.svc-icon{width:46px;height:46px;display:block;color:var(--clay);margin-bottom:.85rem}
.card-icon{padding-top:1.15rem}
.band .card-icon .svc-icon,.band-soil .card-icon .svc-icon{color:var(--clay)}
.hero-icon .svc-icon{width:56px;height:56px;color:var(--clay-lit);margin-bottom:.5rem}

/* ---------- service-area map ----------
   Self-hosted SVG built from OpenStreetMap geometry. A Maps embed would cost
   ~1MB, several third-party requests and a cookie banner, to give a coverage
   signal nobody pans or zooms. */
/* The map is a block of visual noise; it needs room on both sides or the cards
   under it read as part of the image. */
.areamap{display:block;width:100%;max-width:820px;height:auto;margin:2.25rem auto 3rem;
  border-radius:var(--r);border:1px solid var(--line)}

.mapframe{position:relative;width:100%;max-width:820px;margin:2rem auto 0;
  aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ================= theme variants =================
   Driven by data-attributes on <body> from the theme preset, so one template
   tree serves every niche. Adding a niche is a JSON preset, not a new theme. */

.accent-face{font-family:var(--accent-face);font-style:italic;text-transform:none;letter-spacing:0}

/* announcement bar */
.announce{display:block;background:var(--clay);color:#fff;text-align:center;
  padding:.6rem 1rem;font-weight:700;font-size:.92rem;text-decoration:underline}
.announce:hover{background:var(--clay-lit)}

/* centred hero */
body[data-hero="center"] .hero-inner{text-align:center;max-width:900px}
body[data-hero="center"] .hero .lede{margin-left:auto;margin-right:auto}
body[data-hero="center"] .hero-actions,
body[data-hero="center"] .chips{justify-content:center}

/* two-tier headline: one oversized word, then the qualifier */
h1.two-tier{display:flex;flex-direction:column;line-height:.92}
h1.two-tier .lead{font-size:clamp(3rem,11vw,7.5rem);letter-spacing:-.03em}
h1.two-tier .rest{font-size:clamp(1.3rem,3.4vw,2.6rem);letter-spacing:-.01em}

/* trust card overlapping the hero boundary */
.trustcard-wrap{max-width:var(--maxw);margin:-3.5rem auto 0;padding:0 1rem;position:relative;z-index:5}
.trustcard{background:var(--paper);border-radius:var(--r);padding:1.4rem;
  display:grid;gap:1rem;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.13)}
.trustcard .ticks{list-style:none;margin:0;padding:0;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:.98rem;display:grid;gap:.35rem}
.trustcard .ticks li::before{content:"\2713";color:var(--turf);font-weight:800;margin-right:.5rem}
.trustcard-mid .trust-line{margin:0;font-weight:700}
.trustcard .btn{width:100%}
@media(min-width:860px){
  .trustcard{grid-template-columns:1.1fr 1fr auto;padding:1.6rem 2rem}
  .trustcard .btn{width:auto}
}

/* icon-led service list (icon left, copy right) */
.iconlist{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.iconlist li{display:flex;gap:1rem;align-items:flex-start}
.iconlist .svc-icon{flex:0 0 auto;width:40px;height:40px;margin:0}
.iconlist h3{margin:0 0 .2em}
.iconlist h3 a{text-decoration:none;color:var(--ink)}
.iconlist h3 a:hover{color:var(--turf)}
.iconlist p{margin:0;color:var(--muted);font-size:.97rem}

/* skewed colour panels */
body[data-panels="skew"] .band,
body[data-panels="skew"] .band-paper{position:relative}
body[data-panels="skew"] .band::before{content:"";position:absolute;inset:-1.6rem 0 auto 0;
  height:3.2rem;background:inherit;transform:skewY(-1.4deg);z-index:-1}

/* square buttons with corner brackets — construction/industrial brands */
body[data-btn="square"] .btn{border-radius:2px}
body[data-btn="square"] .btn-lg{position:relative}
body[data-btn="square"] .btn-lg::before,
body[data-btn="square"] .btn-lg::after{content:"";position:absolute;width:14px;height:14px;
  border:3px solid currentColor;opacity:.65}
body[data-btn="square"] .btn-lg::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
body[data-btn="square"] .btn-lg::after{bottom:-6px;right:-6px;border-left:0;border-top:0}

/* ---- professional preset: split hero, portrait-led ---- */
body[data-herostyle="split"] .hero{background-image:none!important;background:#fff;color:var(--ink);
  padding:clamp(2rem,5vw,4.5rem) 1rem}
body[data-herostyle="split"] .hero::before{display:none}
body[data-herostyle="split"] .hero-inner{display:grid;gap:2rem;align-items:center}
body[data-herostyle="split"] .hero h1{text-transform:none;font-weight:600;
  font-size:clamp(1.9rem,4.4vw,3.2rem);letter-spacing:-.02em;line-height:1.14}
body[data-herostyle="split"] .hero .lede{color:var(--muted)}
body[data-herostyle="split"] .hero .btn-ghost{color:var(--turf);border-color:var(--turf)}
body[data-herostyle="split"] .hero .chips li{background:var(--paper);border-color:var(--line);color:var(--ink)}
.portrait{position:relative;justify-self:center;max-width:420px}
.portrait img{border-radius:6px;position:relative;z-index:2}
.portrait::before{content:"";position:absolute;inset:-18px;border:3px solid var(--clay);
  transform:rotate(45deg);z-index:1}
@media(min-width:860px){
  body[data-herostyle="split"] .hero-inner{grid-template-columns:1.05fr .95fr}
}

/* centred icon wells */
.wells{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wells li{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:2rem 1.4rem;text-align:center}
.wells .svc-icon{width:34px;height:34px;margin:0 auto .9rem;color:var(--turf);
  box-sizing:content-box;padding:14px;border-radius:50%;background:var(--paper)}
.wells h3 a{text-decoration:none;color:var(--ink)}
.wells p{margin:.3rem 0 0;color:var(--muted);font-size:.96rem}

/* ---------- coverage list (replaces the map by default) ---------- */
.coverage{display:grid;gap:1.4rem;margin:2rem 0 .5rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.coverage-group h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay);margin:0 0 .7rem;padding-bottom:.55rem;border-bottom:2px solid var(--line)}
.coverage-group ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.coverage-group a{display:block;padding:.42rem 0;text-decoration:none;font-weight:600;
  color:var(--ink);border-bottom:1px solid transparent}
.coverage-group a:hover{color:var(--turf);border-bottom-color:var(--line)}
/* flat variant: one wrapped list of towns, no county headings */
.coverage-flat{grid-template-columns:1fr}
.coverage-flat .coverage-group ul{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.15rem 1.8rem}
.band .coverage-group a,.band-soil .coverage-group a{color:#fff}
.band .coverage-group h3,.band-soil .coverage-group h3{color:var(--clay-lit);
  border-bottom-color:rgba(255,255,255,.25)}

/* ---------- prose rows: copy paired with a photo ---------- */
.prose-row{display:grid;gap:1.8rem;align-items:center;margin:0 0 4.5rem}
.prose-row:last-child{margin-bottom:0}
/* a single wide photo leading a band section */
.band-shot{margin:0 0 2.2rem;max-width:960px;margin-inline:auto}
.band-shot img{width:100%;height:auto;display:block;border-radius:4px}
.prose-copy{max-width:60ch}
.prose-copy h2{margin-top:0}
.prose-copy p:last-child{margin-bottom:0}
.prose-shot{margin:0}
/* A frame plus a hairline keeps each photo reading as its own object rather
   than as a coloured area bleeding into the copy beside it. */
.prose-shot img{width:100%;height:auto;border-radius:var(--r);display:block;
  border:1px solid var(--line);padding:6px;background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.10)}
.prose + .prose-row,.prose-row + .prose{margin-top:4.5rem}
.prose{margin-bottom:4.5rem}
.prose:last-child{margin-bottom:0}
@media(min-width:820px){
  .prose-row{grid-template-columns:1fr 1fr;gap:3.5rem}
  .prose-row.flip .prose-copy{order:2}
  .prose-row.flip .prose-shot{order:1}
}

/* ---------- photo gallery + CSS-only lightbox ----------
   The lightbox is driven by :target, not script. These sites ship no
   JavaScript, and a photo grid that only opens under JS is a photo grid that
   does not open when JS fails. Every photo gets a real id, so each has its own
   URL, Back closes it, and with CSS off the page degrades to a captioned list. */
.gallery{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gal-thumb{display:block;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#fff;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.09)}
/* aspect-ratio + cover keeps a mixed set of portrait and landscape phone
   photos on one tidy grid without cropping the originals on disk. */
.gal-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .35s ease}
.gal-thumb:hover img,.gal-thumb:focus-visible img{transform:scale(1.045)}
.gal-thumb:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
/* The caption is a hover/focus reveal, not a permanent banner. Burned in, it
   covered a third of every tile and sat across people's faces — on a page whose
   entire job is showing the photographs. The caption is always present in the
   lightbox, which is where a tap lands on touch devices. */
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .8rem;
  color:#fff;font-size:.88rem;font-weight:600;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.58) 42%,rgba(0,0,0,.85));
  opacity:0;transform:translateY(12%);transition:opacity .25s ease,transform .25s ease}
.gal-thumb:hover .gal-cap,.gal-thumb:focus-visible .gal-cap{opacity:1;transform:none}
.gal-note{margin:2.2rem 0 0;color:var(--muted);font-size:.92rem;max-width:62ch}

.lightbox{position:fixed;inset:0;z-index:80;margin:0;display:none;
  background:rgba(8,18,12,.95);padding:clamp(.8rem,3vw,2.4rem);
  grid-template-rows:1fr auto;place-items:center;gap:.9rem}
.lightbox:target{display:grid}
/* A full-bleed anchor behind the photo, so clicking off the image closes —
   the gesture everyone expects from a lightbox, with no script to provide it. */
.lb-backdrop{position:absolute;inset:0;z-index:0}
.lightbox img{position:relative;z-index:1;max-width:100%;max-height:76vh;
  width:auto;height:auto;border-radius:var(--r);display:block}
.lightbox figcaption{position:relative;z-index:1;color:#fff;text-align:center;
  max-width:62ch;font-size:.95rem;line-height:1.5}
.lb-count{display:block;margin-top:.4rem;opacity:.55;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase}
.lb-close,.lb-nav{position:absolute;z-index:2;color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border-radius:50%;background:rgba(0,0,0,.4)}
.lb-close{top:.7rem;right:.9rem;width:48px;height:48px;font-size:2rem}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.3rem}
.lb-prev{left:.6rem}
.lb-next{right:.6rem}
.lb-close:hover,.lb-nav:hover,.lb-close:focus-visible,.lb-nav:focus-visible{background:var(--clay)}
/* Shorter hero on a page whose content is the point, not the headline. */
.hero-short{padding-top:clamp(2.2rem,5vw,3.6rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
@media(prefers-reduced-motion:reduce){
  .gal-thumb img,.gal-cap{transition:none}
  .gal-thumb:hover img,.gal-thumb:focus-visible img{transform:none}
  .gal-cap{transform:none}
}

/* ================= homepage blocks ================= */
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;max-width:46ch}

/* category panels — skewed colour block beside an icon list */
.categories{display:grid;gap:3.5rem}
.catrow{display:grid;gap:1.8rem;align-items:center}
.catpanel{background:var(--turf-dk);color:#fff;border-radius:var(--r);padding:2rem 1.8rem;
  position:relative}
body[data-panels="skew"] .catpanel{transform:skewY(-1.6deg)}
body[data-panels="skew"] .catpanel > *{transform:skewY(1.6deg)}
.catpanel h2{margin:0 0 .4em}
.catpanel p{margin:0;opacity:.9}
.catpanel-eyebrow{font-size:1.35rem;color:var(--clay-lit);margin:0 0 .1em;font-weight:400}
.catitems{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem}
.catitems li{display:flex;gap:1rem;align-items:flex-start}
.catitems .svc-icon{flex:0 0 auto;width:36px;height:36px;margin:0;color:var(--ink)}
.catitems h3{margin:0 0 .15em;font-size:1.08rem}
.catitems h3 a{text-decoration:none;color:var(--ink)}
.catitems p{margin:0;color:var(--muted);font-size:.95rem}
@media(min-width:860px){
  .catrow{grid-template-columns:.85fr 1.15fr;gap:3rem}
  .catrow.flip .catpanel{order:2}
  .catrow.flip .catitems{order:1}
}

/* values — 4-up icon cards */
.valuegrid{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.valuegrid li{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.3rem;text-align:center}
.valuegrid .svc-icon{width:32px;height:32px;margin:0 auto .9rem;color:var(--clay)}
.valuegrid h3{margin:0 0 .3em;font-size:1.05rem}
.valuegrid p{margin:0;color:var(--muted);font-size:.94rem}

/* commitments — rule-led list on a colour band */
.commitgrid{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.commit-rule{display:block;width:44px;height:4px;background:var(--clay-lit);
  border-radius:2px;margin-bottom:.9rem}
.commitgrid h3{margin:0 0 .3em;font-size:1.05rem}
.commitgrid p{margin:0;opacity:.9;font-size:.95rem}

/* process — numbered, because it genuinely is a sequence */
.processlist{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.processlist li{border-top:3px solid var(--line);padding-top:1.1rem}
.step-n{display:block;font-size:2.1rem;font-weight:800;line-height:1;color:var(--clay);
  letter-spacing:-.03em;margin-bottom:.5rem}
.processlist h3{margin:0 0 .3em}
.processlist p{margin:0;color:var(--muted);font-size:.95rem}
.process-cta{text-align:center;margin:2.6rem auto 0;max-width:none}

/* hero eyebrow with flanking rules — reads as a kicker rather than stray text */
body[data-hero="center"] .hero .eyebrow{display:flex;align-items:center;justify-content:center;
  gap:.9rem;font-size:1.02rem;letter-spacing:.02em;color:#fff;opacity:.92}
body[data-hero="center"] .hero .eyebrow::before,
body[data-hero="center"] .hero .eyebrow::after{content:"";height:2px;width:clamp(24px,6vw,64px);
  background:var(--clay-lit);opacity:.9}

/* a badge-shaped logo needs more height than a wordmark to stay legible */
.site-header .logo img{height:auto;max-height:72px;width:auto}

/* ---------- review carousel (CSS scroll-snap, no JS) ---------- */
.revscroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,340px);
  gap:1rem;list-style:none;margin:0;padding:.4rem .2rem 1.2rem;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--clay) transparent
}
.revscroll::-webkit-scrollbar{height:8px}
.revscroll::-webkit-scrollbar-thumb{background:var(--clay);border-radius:4px}
.revscroll::-webkit-scrollbar-track{background:rgba(0,0,0,.06);border-radius:4px}
.revscroll:focus-visible{outline:3px solid var(--clay);outline-offset:4px}
.revcard{
  scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem;display:flex;flex-direction:column;gap:.6rem
}
/* Real reviews run to any length — one 1,300-character review would otherwise
   set the height of every card. Clamp to a scannable excerpt and let the
   "read them all" link carry anyone who wants the rest. */
.revcard blockquote{margin:0;font-size:.98rem;line-height:1.6;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  line-clamp:6;overflow:hidden}
.revcard cite{font-style:normal;font-weight:700;font-size:.88rem;color:var(--muted);margin-top:auto}
.reviews .stars{color:var(--clay);letter-spacing:2px;font-size:1.05rem}
.reviews .rating-line{display:flex;align-items:center;gap:.6rem;font-weight:700;flex-wrap:wrap}
.reviews .google-g{flex:none;display:block}
.reviews .attribution{font-size:.85rem;color:var(--muted);margin:0}

/* row headings when the prose block is nested under a single h2 */
.prose-copy h3,.prose h3{font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;margin:0 0 .5em;line-height:1.15}

/* =====================================================================
   IMPACT THEME — full-bleed dark bands, oversized hero, CSS-only motion.

   Every animation below is CSS. No JavaScript anywhere on the site, which
   is why the built folder is openable from a file:// path and survives
   being handed to someone to host wherever they like.

   Motion is layered on top of a page that is already complete without it:
   the scroll reveals live inside @supports so a browser that cannot drive
   them never applies the opacity:0 that they undo, and the reduced-motion
   block at the end pins everything visible. A missing animation must never
   be able to hide content.
   ===================================================================== */

/* ---------- scroll reveal ---------- */
@supports (animation-timeline: view()) {
  body[data-anim="on"] .reveal{
    animation:reveal-up linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 22%;
  }
  body[data-anim="on"] .tiles .reveal:nth-child(3n+2){animation-range:entry 0% cover 24%}
  body[data-anim="on"] .tiles .reveal:nth-child(3n+3){animation-range:entry -2% cover 26%}
}
@keyframes reveal-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ---------- hero: rotating town line ---------- */
.rot-h1{display:flex;flex-direction:column;line-height:1.02}
.rot-h1 .rot-lead{display:block}
/* Clipping box exactly one line tall: the track slides, the box shows one town. */
.rotator{display:block;height:1em;overflow:hidden;position:relative}
.rot-track{display:block;color:var(--clay-lit);will-change:transform}
.rot-track > span{display:block;height:1em;line-height:1}
body[data-anim="on"] .rot-track{animation-name:rot;animation-timing-function:cubic-bezier(.76,0,.24,1);animation-iteration-count:infinite}
/* Caret echoes the "still typing" feel without a typewriter's layout jitter. */
.rot-caret{position:absolute;display:none}
@media(min-width:700px){
  .rot-h1{display:grid;grid-template-columns:auto;align-items:baseline}
}

/* ---------- marquee trust band ---------- */
.marquee{background:var(--soil-dk);color:#fff;overflow:hidden;padding:.9rem 0}
.marquee-track{display:flex;width:max-content}
body[data-anim="on"] .marquee-track{animation:slide 34s linear infinite}
.marquee ul{display:flex;list-style:none;margin:0;padding:0}
/* Spacing is deliberately tight. At 2.2rem of padding either side plus a 2.2rem
   gap to the dot, only two and a half claims fit across a laptop viewport and
   one was always sheared mid-word at the edge, which reads as a broken layout
   rather than a moving one. */
.marquee li{
  white-space:nowrap;padding:0 1.1rem;font-weight:800;font-size:.84rem;
  text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:1.1rem
}
.marquee li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay-lit);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- service photo tiles ---------- */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.tile a{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:4/3.4;border-radius:var(--r);overflow:hidden;text-decoration:none;
  background:var(--primary,var(--turf));
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.tile a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--soil-dk-rgb),.88) 0%,rgba(var(--soil-dk-rgb),.30) 46%,rgba(var(--soil-dk-rgb),.05) 100%)}
.tile-label{
  position:relative;z-index:2;color:#fff;font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(1.05rem,2.1vw,1.35rem);
  text-align:center;padding:0 1rem 1.35rem;text-shadow:0 2px 10px rgba(0,0,0,.5)
}
.tile a:hover,.tile a:focus-visible{transform:translateY(-6px);box-shadow:0 16px 38px rgba(var(--soil-dk-rgb),.30)}
.tile a:hover img{transform:scale(1.07)}
/* No photo yet: brand tile with the service icon, so the grid still reads as finished. */
.tile-noimg a{background:var(--turf-dk);align-items:center;flex-direction:column;justify-content:center;gap:.2rem}
.tile-noimg .svc-icon{position:relative;z-index:2;width:54px;height:54px;color:var(--clay-lit);margin:0}
.tile-noimg .tile-label{padding:0 1rem}

/* ---------- impact: hero + band treatment ---------- */
body[data-anim="on"] .hero h1{font-size:clamp(2.4rem,7.2vw,5.2rem);letter-spacing:-.025em}
body[data-anim="on"] .hero::before{
  background:linear-gradient(100deg,rgba(var(--soil-dk-rgb),.93) 0%,rgba(var(--soil-dk-rgb),.80) 48%,rgba(var(--soil-rgb),.55) 100%)
}
body[data-anim="on"] .hero{padding:clamp(3.5rem,10vw,7.5rem) 1rem clamp(4rem,10vw,8rem)}
body[data-anim="on"] .card,
body[data-anim="on"] .valuegrid li,
body[data-anim="on"] .wells li{transition:transform .3s ease,box-shadow .3s ease}
body[data-anim="on"] .card:hover,
body[data-anim="on"] .valuegrid li:hover,
body[data-anim="on"] .wells li:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(var(--soil-dk-rgb),.14)}
body[data-anim="on"] .btn{transition:transform .18s ease,background-color .18s ease}
body[data-anim="on"] .btn:hover{transform:translateY(-2px)}
body[data-anim="on"] .arealist a{transition:transform .2s ease,border-color .2s ease,color .2s ease}
body[data-anim="on"] .arealist a:hover{transform:translateY(-2px)}
body[data-anim="on"] .prose-shot img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
body[data-anim="on"] .prose-shot img:hover{transform:translateY(-5px)}

/* ---------- motion off: everything stays visible ----------
   The global reduced-motion rule kills animations with !important. Without
   these, a reveal that never runs would leave its element at opacity:0 —
   the animation would be hiding the page instead of decorating it. */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .rot-track{transform:none!important}
  .marquee-track{transform:none!important}
}

/* ---------- impact: fixes for a site still waiting on photography ----------
   These only apply under data-anim, i.e. the impact preset. They keep the
   layout looking deliberate while the service tiles and prose rows have no
   images yet, and they stop being relevant the moment real photos land. */

/* An icon tile has far less to hold than a photo tile, so the 4:3.4 photo box
   reads as an empty frame. Shorter box, larger mark, and no photo gradient
   over a flat colour it has nothing to darken. */
body[data-anim="on"] .tile-noimg a{aspect-ratio:4/2.5;gap:.55rem}
body[data-anim="on"] .tile-noimg a::after{display:none}
body[data-anim="on"] .tile-noimg .svc-icon{width:64px;height:64px}

/* With no section photos every prose block is a 68ch column pinned left,
   leaving half the band empty. Centre it so the whitespace reads as a measure
   rather than a missing image. Photo rows are unaffected. */
body[data-anim="on"] .band-paper .prose{margin-left:auto;margin-right:auto}
body[data-anim="on"] .band-paper .prose:last-child{margin-bottom:1rem}

/* The coverage block collapses to nothing when a client has no county grouping,
   leaving a tall empty stripe under the town chips. */
body[data-anim="on"] .band .coverage:empty{display:none;margin:0}
body[data-anim="on"] .band .arealist{margin-bottom:.5rem}

/* =====================================================================
   THEME: pressure-wash
   The Professor Pressure visual system (docs/reference/pressure-washing-
   template-spec.md). Everything here is scoped to the theme attribute so no
   other client's site loads a single one of these rules.

   Poppins is self-hosted from static/fonts — the geometric heavy caps are
   most of this design's personality, and a system fallback loses it. Two
   latin subsets, ~15KB total, no external request.
   ===================================================================== */
@font-face{
  font-family:"PW Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/poppins-700.woff2") format("woff2")
}
@font-face{
  font-family:"PW Display";font-style:normal;font-weight:900;font-display:swap;
  src:url("/static/fonts/poppins-900.woff2") format("woff2")
}

body[data-theme="pressure-wash"]{
  --pw-navy:#172E63;--pw-deep:#041E47;--pw-blue:#2788FC;--pw-cyan:#00B1ED;
  --pw-sky:#DCECFF;--pw-disp:"PW Display",var(--sans);
  background:#fff
}

/* ---- type: Poppins 900 caps for every heading, Roboto-ish body ---- */
body[data-theme="pressure-wash"] h1,
body[data-theme="pressure-wash"] h2,
body[data-theme="pressure-wash"] h3,
body[data-theme="pressure-wash"] .eyebrow,
body[data-theme="pressure-wash"] .btn,
body[data-theme="pressure-wash"] .site-nav a,
body[data-theme="pressure-wash"] .tile-label{font-family:var(--pw-disp)}
body[data-theme="pressure-wash"] h1{font-weight:900;letter-spacing:1px;line-height:1.1}
body[data-theme="pressure-wash"] h2{font-weight:900;line-height:1.1}
body[data-theme="pressure-wash"] h3{font-weight:700;text-transform:none;letter-spacing:0}
body[data-theme="pressure-wash"] .eyebrow{
  font-weight:600;letter-spacing:.02em;font-size:.9rem;color:var(--pw-navy)
}
body[data-theme="pressure-wash"] .on-dark .eyebrow{color:#8FBEFF}
body[data-theme="pressure-wash"] p{line-height:1.8}

/* ---- buttons: pill, 4px white ring, drop shadow, always in pairs ---- */
body[data-theme="pressure-wash"] .btn{
  border-width:4px;border-color:#fff;font-weight:700;text-transform:uppercase;
  letter-spacing:-.4px;box-shadow:0 5px 19px rgba(0,0,0,.20);
  transition:transform .15s ease,box-shadow .15s ease
}
body[data-theme="pressure-wash"] .btn:hover{
  transform:translateY(-2px);box-shadow:0 9px 24px rgba(0,0,0,.26)
}
body[data-theme="pressure-wash"] .btn-quote,
body[data-theme="pressure-wash"] .btn-call,
body[data-theme="pressure-wash"] .hero .btn-call{background:var(--pw-blue);color:#fff}
body[data-theme="pressure-wash"] .btn-quote:hover,
body[data-theme="pressure-wash"] .btn-call:hover,
body[data-theme="pressure-wash"] .hero .btn-call:hover{background:#1173EE}
body[data-theme="pressure-wash"] .btn-ghost,
body[data-theme="pressure-wash"] .hero .btn-ghost{
  background:#fff;color:var(--pw-blue);border-color:#fff
}
body[data-theme="pressure-wash"] .btn-ghost:hover,
body[data-theme="pressure-wash"] .hero .btn-ghost:hover{
  background:var(--pw-sky);color:var(--pw-navy);border-color:#fff
}
body[data-theme="pressure-wash"] a:focus-visible,
body[data-theme="pressure-wash"] button:focus-visible,
body[data-theme="pressure-wash"] summary:focus-visible,
body[data-theme="pressure-wash"] input:focus-visible,
body[data-theme="pressure-wash"] textarea:focus-visible{outline-color:var(--pw-cyan)}

/* ---- hero: navy wash over the photo, oversized stacked headline ---- */
body[data-theme="pressure-wash"] .hero{background-color:var(--pw-deep)}
body[data-theme="pressure-wash"] .hero::before{
  background:linear-gradient(105deg,rgba(4,30,71,.90) 0%,rgba(23,46,99,.72) 46%,rgba(23,46,99,.30) 100%)
}
body[data-theme="pressure-wash"] .hero h1{
  font-size:clamp(2.4rem,6vw,4.1rem);text-shadow:5px 5px 35px rgba(0,0,0,.3);max-width:16ch
}
/* The town line is the accented middle of the stack, same as the reference. */
body[data-theme="pressure-wash"] .hero .rotator,
body[data-theme="pressure-wash"] .hero .rest{color:var(--pw-blue)}
body[data-theme="pressure-wash"] .chips li{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)
}

/* ---- the wave, deeper than the default horizon ---- */
body[data-theme="pressure-wash"] .horizon-wave{height:clamp(38px,5vw,82px);margin-bottom:-1px}

/* ---- band rhythm: never two of the same colour in a row ---- */
body[data-theme="pressure-wash"] .band{background:var(--pw-blue);color:#fff}
body[data-theme="pressure-wash"] .band-paper{background:var(--pw-sky)}
body[data-theme="pressure-wash"] .band-soil{background:var(--pw-navy);color:#fff}
body[data-theme="pressure-wash"] .band .card,
body[data-theme="pressure-wash"] .band-soil .card{background:#fff;color:var(--muted)}
body[data-theme="pressure-wash"] .band .card h3 a,
body[data-theme="pressure-wash"] .band-soil .card h3 a{color:var(--pw-navy)}

/* ---- cards + tiles ---- */
body[data-theme="pressure-wash"] .card{
  border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,.15);border-color:transparent
}
body[data-theme="pressure-wash"] .tile a{
  border-radius:10px;border:4px solid #fff;box-shadow:0 5px 20px rgba(0,0,0,.25)
}
body[data-theme="pressure-wash"] .tile a::after{
  background:linear-gradient(to top,rgba(4,30,71,.92),transparent 58%)
}
body[data-theme="pressure-wash"] .tile-label{font-weight:700;text-transform:none}
body[data-theme="pressure-wash"] .tile-noimg a{background:var(--pw-navy)}
body[data-theme="pressure-wash"] .tile-noimg .svc-icon,
body[data-theme="pressure-wash"] .hero-icon .svc-icon{color:#7FB6FF}
body[data-theme="pressure-wash"] .svc-icon{color:var(--pw-blue)}
body[data-theme="pressure-wash"] .band .card-icon .svc-icon,
body[data-theme="pressure-wash"] .band-soil .card-icon .svc-icon{color:var(--pw-blue)}

/* ---- FAQ rows: navy fill, white chevron ---- */
body[data-theme="pressure-wash"] details{
  background:var(--pw-navy);border-radius:8px;border-color:transparent;color:#D3E1F5
}
body[data-theme="pressure-wash"] summary{color:#fff;font-family:var(--pw-disp);font-weight:700}

/* ---- footer ---- */
body[data-theme="pressure-wash"] .site-footer{background:var(--pw-navy);color:#C6D6EE}
body[data-theme="pressure-wash"] .site-footer a{color:#C6D6EE}
body[data-theme="pressure-wash"] .site-footer a:hover{color:#fff}

/* ---- header + utility strip ---- */
body[data-theme="pressure-wash"] .utility{background:var(--pw-deep);color:#C6D6EE}
body[data-theme="pressure-wash"] .site-header{box-shadow:0 2px 14px rgba(0,0,0,.09);border-bottom:0}
body[data-theme="pressure-wash"] .site-nav a{
  color:var(--pw-navy);font-weight:600;text-transform:none;letter-spacing:0;font-size:.95rem
}
body[data-theme="pressure-wash"] .site-nav a:hover,
body[data-theme="pressure-wash"] .site-nav a:focus-visible{
  color:var(--pw-blue);border-bottom-color:var(--pw-blue)
}

/* ---- sticky mobile bar: two up, blue quote / navy call ---- */
body[data-theme="pressure-wash"] .sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
  grid-template-columns:1fr 1fr;box-shadow:0 -3px 16px rgba(0,0,0,.22)
}
body[data-theme="pressure-wash"] .sticky-bar a{
  font-family:var(--pw-disp);font-weight:700;font-size:.95rem;text-transform:uppercase;
  text-decoration:none;text-align:center;padding:1.05rem .5rem;color:#fff
}
body[data-theme="pressure-wash"] .sticky-bar a:first-child{background:var(--pw-blue)}
body[data-theme="pressure-wash"] .sticky-bar a:last-child{background:var(--pw-navy)}
@media(min-width:860px){
  body[data-theme="pressure-wash"] .sticky-bar{display:none}
}

/* =====================================================================
   THEME: pressure-wash — closer pass on the reference layout
   (docs/reference/pressure-washing-template-spec.md §2). Structure and
   visual system only; none of the reference site's own CSS, imagery or
   copy is used here.
   ===================================================================== */

/* ---- hero: full-height, headline anchored low, flat blue wash ---- */
body[data-theme="pressure-wash"] .hero{
  /* Full-height feel, minus the sticky header and utility strip above it, so
     the headline and both buttons clear the fold on a laptop rather than the
     call to action falling off the bottom. */
  min-height:min(calc(100vh - 130px),780px);display:flex;align-items:flex-end;
  padding-top:clamp(3rem,10vh,7rem);padding-bottom:clamp(2rem,5vh,3.5rem);
  background-position:center 30%
}
/* A near-flat wash rather than a directional gradient: the reference reads as
   one solid blue laid over the photo, which is what keeps 900-weight white
   caps legible anywhere in the frame. */
body[data-theme="pressure-wash"] .hero::before{
  background:linear-gradient(180deg,rgba(9,34,84,.86) 0%,rgba(18,52,124,.80) 55%,rgba(23,46,99,.88) 100%)
}
/* Soap bubbles, top-left of the hero and top-right of the blue bands. Pure
   radial gradients — no image request, and they sit under the content. */
body[data-theme="pressure-wash"] .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 6% 12%,rgba(255,255,255,.16) 0 38px,transparent 39px),
    radial-gradient(circle at 13% 7%,rgba(255,255,255,.11) 0 20px,transparent 21px),
    radial-gradient(circle at 3% 24%,rgba(255,255,255,.09) 0 13px,transparent 14px),
    radial-gradient(circle at 17% 17%,rgba(255,255,255,.07) 0 9px,transparent 10px)
}
/* .hero is a flex container here, so the inner block must be told to fill it -
   otherwise it shrinks to its content and the auto margins centre the headline. */
body[data-theme="pressure-wash"] .hero-inner{z-index:1;width:100%}

/* three-tier stacked headline: plain / accent / plain, tight leading */
body[data-theme="pressure-wash"] .hero h1{
  font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:1.02;max-width:20ch;
  margin-bottom:.5em;text-shadow:0 4px 30px rgba(0,0,0,.35)
}
body[data-theme="pressure-wash"] .hero h1 .lead{font-size:.62em;display:block}
body[data-theme="pressure-wash"] .hero h1 .rest,
body[data-theme="pressure-wash"] .hero h1 .tail{display:block}
/* The accent line is the largest of the three - it is the one the eye lands on. */
body[data-theme="pressure-wash"] .hero h1 .rest{
  color:var(--pw-blue);font-size:1.14em;-webkit-text-stroke:1px rgba(255,255,255,.85)
}
/* The hero carries the headline and the two buttons and nothing else, so the
   supporting chips are suppressed here rather than deleted from the template. */
body[data-theme="pressure-wash"] .hero .chips{display:none}
/* Headline and two buttons only, so the whole call to action clears the fold on
   a laptop. The page description still carries in the meta tag and the intro. */
body[data-theme="pressure-wash"] .hero .lede{display:none}

/* ---- services strip: white cards on a blue band, wave top and bottom ---- */
body[data-theme="pressure-wash"] .svcband{
  position:relative;background:var(--pw-blue);color:#fff;
  padding:clamp(1.6rem,4vw,2.6rem) 1rem clamp(2.2rem,5vw,3.4rem)
}
body[data-theme="pressure-wash"] .svcband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 94% 18%,rgba(255,255,255,.14) 0 46px,transparent 47px),
    radial-gradient(circle at 88% 8%,rgba(255,255,255,.10) 0 22px,transparent 23px),
    radial-gradient(circle at 97% 40%,rgba(255,255,255,.08) 0 15px,transparent 16px)
}
body[data-theme="pressure-wash"] .svcband > *{position:relative;z-index:1}
body[data-theme="pressure-wash"] .svcband h2{
  text-align:center;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);
  text-transform:none;letter-spacing:0;margin:0 0 1.4rem
}
body[data-theme="pressure-wash"] .svcstrip{
  list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}
body[data-theme="pressure-wash"] .svcstrip a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;height:100%;min-height:150px;padding:1.1rem .7rem;
  background:#fff;border-radius:5px;text-decoration:none;text-align:center;
  box-shadow:0 6px 18px rgba(4,30,71,.18);
  transition:transform .15s ease,box-shadow .15s ease
}
body[data-theme="pressure-wash"] .svcstrip a:hover{
  transform:translateY(-3px);box-shadow:0 12px 26px rgba(4,30,71,.26)
}
body[data-theme="pressure-wash"] .svcstrip .svc-icon{
  width:58px;height:58px;color:var(--pw-blue);flex:none
}
body[data-theme="pressure-wash"] .svcstrip span{
  font-family:var(--pw-disp);font-weight:700;font-size:.95rem;
  line-height:1.25;color:var(--pw-navy)
}

/* ---- authority block: photo left, proof copy and tick list right ---- */
body[data-theme="pressure-wash"] .authority{
  max-width:var(--maxw);margin:0 auto;padding:clamp(2.4rem,6vw,4.2rem) 1rem;
  display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center
}
@media(min-width:900px){
  body[data-theme="pressure-wash"] .authority{grid-template-columns:1fr 1.05fr}
}
body[data-theme="pressure-wash"] .authority figure{margin:0}
body[data-theme="pressure-wash"] .authority img{
  width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:6px;
  box-shadow:0 10px 30px rgba(4,30,71,.20)
}
body[data-theme="pressure-wash"] .authority .eyebrow{
  text-transform:uppercase;letter-spacing:.09em;font-size:.92rem;
  color:var(--pw-navy);font-weight:600;margin-bottom:.3rem
}
body[data-theme="pressure-wash"] .authority h2{
  font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--pw-navy);
  text-transform:none;letter-spacing:0;margin:0 0 .9rem
}
body[data-theme="pressure-wash"] .authority p{margin:0 0 1rem}
body[data-theme="pressure-wash"] .authority .why{
  font-weight:700;color:var(--pw-navy);margin-bottom:.7rem
}
body[data-theme="pressure-wash"] .ticklist{list-style:none;margin:0 0 1.5rem;padding:0}
body[data-theme="pressure-wash"] .ticklist li{
  display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.55rem;
  font-weight:700;color:var(--pw-navy);line-height:1.4
}
body[data-theme="pressure-wash"] .ticklist svg{
  width:20px;height:20px;flex:none;color:var(--pw-blue);margin-top:.15rem
}

/* The wave belongs to the block above it, not to the gap between blocks. Pulled
   up over its predecessor so the unfilled part of the SVG shows that block
   through rather than the page background - which is what makes it read as one
   band spilling into the next instead of a shape floating on white. */
body[data-theme="pressure-wash"] .horizon-wave{
  margin-top:calc(-1 * clamp(38px,5vw,82px));position:relative;z-index:3;background:transparent
}
/* Photo and copy start together; the photo runs the height of the copy beside it. */
body[data-theme="pressure-wash"] .authority{align-items:stretch}
body[data-theme="pressure-wash"] .authority img{max-height:none;min-height:340px}
body[data-theme="pressure-wash"] .authority > div{align-self:center}

/* County headings on the blue band inherit a clay accent that does not exist in
   this palette and renders near-invisible against it. */
body[data-theme="pressure-wash"] .band .coverage-group h3,
body[data-theme="pressure-wash"] .band-soil .coverage-group h3{
  color:#BBD8FF;border-bottom-color:rgba(255,255,255,.32)
}
/* Room under the cards for the wave that cuts up into the band. */
body[data-theme="pressure-wash"] .svcband{padding-bottom:clamp(3.4rem,7vw,5.5rem)}
/* Value cards read as paragraphs, not captions - centred body copy is hard work
   past a line or two. */
body[data-theme="pressure-wash"] .valuegrid li{text-align:left}
body[data-theme="pressure-wash"] .valuegrid li h3{text-align:left}

/* ---- pressure-wash: benefits six-box grid ---- */
body[data-theme="pressure-wash"] .benefitgrid{
  list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))
}
body[data-theme="pressure-wash"] .benefitgrid li{
  background:#fff;border-radius:8px;padding:1.5rem 1.4rem;
  box-shadow:0 5px 18px rgba(4,30,71,.10);border-top:4px solid var(--pw-blue)
}
body[data-theme="pressure-wash"] .benefitgrid h3{
  margin:0 0 .45rem;font-size:1.08rem;color:var(--pw-navy)
}
body[data-theme="pressure-wash"] .benefitgrid p{margin:0;font-size:.97rem;line-height:1.65}

/* ---- pressure-wash: assurance band ---- */
body[data-theme="pressure-wash"] .assurance{
  position:relative;background:var(--pw-deep);color:#fff;
  padding:clamp(3rem,8vw,5rem) 1rem;text-align:center;overflow:hidden
}
body[data-theme="pressure-wash"] .assurance::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 92% 22%,rgba(255,255,255,.10) 0 60px,transparent 61px),
    radial-gradient(circle at 8% 78%,rgba(255,255,255,.07) 0 40px,transparent 41px)
}
body[data-theme="pressure-wash"] .assurance-inner{
  position:relative;z-index:1;max-width:820px;margin:0 auto
}
body[data-theme="pressure-wash"] .assurance-lead{
  font-family:var(--pw-disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.92rem;color:#8FBEFF;margin:0 0 .7rem
}
body[data-theme="pressure-wash"] .assurance-head{
  font-family:var(--pw-disp);font-weight:900;line-height:1.05;margin:0 0 .9rem;
  font-size:clamp(2rem,5.2vw,3.6rem);text-transform:uppercase;letter-spacing:.5px
}
body[data-theme="pressure-wash"] .assurance-head span{display:block;color:var(--pw-blue)}
body[data-theme="pressure-wash"] .assurance-sub{
  margin:0 auto 1.8rem;max-width:56ch;color:#C9DCF6
}
body[data-theme="pressure-wash"] .assurance .hero-actions{justify-content:center;margin:0}

/* ---- pressure-wash: service-area band ---- */
body[data-theme="pressure-wash"] .areaband{
  position:relative;background:var(--pw-blue);color:#fff;
  padding:clamp(2.6rem,6vw,4.2rem) 1rem clamp(2rem,5vw,3rem);overflow:hidden
}
body[data-theme="pressure-wash"] .areaband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 95% 14%,rgba(255,255,255,.13) 0 52px,transparent 53px),
    radial-gradient(circle at 87% 5%,rgba(255,255,255,.09) 0 24px,transparent 25px)
}
body[data-theme="pressure-wash"] .areaband-inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto
}
body[data-theme="pressure-wash"] .areaband h2{
  text-align:center;color:#fff;margin:0 0 1.6rem;text-transform:uppercase;
  font-size:clamp(1.8rem,4.4vw,3rem);letter-spacing:.5px
}
body[data-theme="pressure-wash"] .areacards{
  list-style:none;margin:0 0 2.2rem;padding:0;display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
body[data-theme="pressure-wash"] .areacards a{
  display:flex;flex-direction:column;gap:.15rem;height:100%;
  padding:1rem 1.1rem;background:#fff;border-radius:5px;text-decoration:none;
  box-shadow:0 5px 16px rgba(4,30,71,.18);
  transition:transform .15s ease,box-shadow .15s ease
}
body[data-theme="pressure-wash"] .areacards a:hover{
  transform:translateY(-3px);box-shadow:0 11px 24px rgba(4,30,71,.26)
}
body[data-theme="pressure-wash"] .areacard-city{
  font-family:var(--pw-disp);font-weight:700;color:var(--pw-navy);font-size:1.03rem
}
body[data-theme="pressure-wash"] .areacard-sub{font-size:.85rem;color:var(--muted)}
body[data-theme="pressure-wash"] .areaband .coverage-group h3{
  color:#BBD8FF;border-bottom-color:rgba(255,255,255,.32)
}
body[data-theme="pressure-wash"] .areaband .coverage-group a{color:#fff}

/* The wave is pulled up over whatever precedes it, so every block it sits under
   has to reserve that height plus breathing room - otherwise the hero buttons
   end up sitting on the curve. Reserved here rather than per-page so short
   interior heroes get the same clearance as the full-height homepage one. */
body[data-theme="pressure-wash"] .hero{
  padding-bottom:calc(clamp(38px,5vw,82px) + clamp(2rem,5vh,3.5rem))
}
body[data-theme="pressure-wash"] .svcband{
  padding-bottom:calc(clamp(38px,5vw,82px) + clamp(2rem,4vw,3rem))
}
body[data-theme="pressure-wash"] .areaband{
  padding-bottom:calc(clamp(38px,5vw,82px) + clamp(1.5rem,3vw,2.5rem))
}

/* The base FAQ is a plain bordered list, so it carries no horizontal padding.
   This theme fills each row and rounds it, which puts the question hard against
   the curve. Pad the row and space the rows apart so they read as cards. */
body[data-theme="pressure-wash"] .faq details{
  padding:.2rem clamp(1.1rem,2.2vw,1.7rem);
  margin-bottom:.7rem
}
body[data-theme="pressure-wash"] .faq summary{padding:1rem 0}
body[data-theme="pressure-wash"] .faq-a{padding-bottom:.9rem}

/* ==========================================================================
   THEME: precision
   Condensed heavy uppercase display, flat full-bleed bands with no dividers,
   square buttons, letterspaced accent eyebrows. Every rule below is scoped to
   body[data-theme="precision"] so no other client loads one of them.
   Layout conventions referenced in docs/reference/guarantee-led-template-spec.md.
   ========================================================================== */
@font-face{
  font-family:"Precision Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/oswald-600.woff2") format("woff2")
}
@font-face{
  font-family:"Precision Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/oswald-700.woff2") format("woff2")
}

body[data-theme="precision"]{
  --pr-navy:#022151;--pr-deep:#071528;--pr-blue:#029DFC;--pr-lit:#4FBEFF;
  --pr-paper:#FBFAF9;--pr-line:#E4E8EE;
  --pr-disp:"Precision Display",var(--sans);
  background:var(--pr-paper)
}

/* ---- type: condensed caps for display, neutral sans for reading ---- */
body[data-theme="precision"] h1,
body[data-theme="precision"] h2,
body[data-theme="precision"] h3,
body[data-theme="precision"] .eyebrow,
body[data-theme="precision"] .btn,
body[data-theme="precision"] .site-nav a{font-family:var(--pr-disp)}
body[data-theme="precision"] h1{
  font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:.96;
  font-size:clamp(38px,5.6vw,74px)}
body[data-theme="precision"] h2{
  font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;
  font-size:clamp(27px,3.4vw,42px)}
body[data-theme="precision"] h3{
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;font-size:19px}
body[data-theme="precision"] .lede{font-size:17.5px;line-height:1.62;max-width:62ch}

/* the small letterspaced accent line above a heading */
body[data-theme="precision"] .eyebrow{
  font-weight:600;font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--pr-blue)}

/* ---- flat bands, no decorative dividers ---- */
body[data-theme="precision"] .band,
body[data-theme="precision"] .hero{background:var(--pr-deep)}
body[data-theme="precision"] .band-paper{background:#fff;border-top:1px solid var(--pr-line);
  border-bottom:1px solid var(--pr-line)}
body[data-theme="precision"] .section{padding-block:clamp(3rem,6vw,5rem)}

/* ---- header: dark, with a thin accent hairline beneath ---- */
body[data-theme="precision"] .site-header{
  background:var(--pr-navy);border-bottom:2px solid var(--pr-blue)}
body[data-theme="precision"] .site-nav a{
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:13.5px}

/* ---- square buttons; solid accent primary ---- */
body[data-theme="precision"] .btn{
  border-radius:3px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:14px}
body[data-theme="precision"] .btn-call{background:var(--pr-blue);color:#04121F;border-color:var(--pr-blue)}
body[data-theme="precision"] .btn-call:hover{background:var(--pr-lit)}
body[data-theme="precision"] .btn-ghost{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}

/* ---- cards: square, hairline, no shadow ---- */
body[data-theme="precision"] .card{
  border-radius:3px;border:1px solid var(--pr-line);box-shadow:none;background:#fff}
body[data-theme="precision"] .band .card{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}

/* ---- the authority template's own blocks ---- */
body[data-theme="precision"] .gl-bar{background:var(--pr-navy);border-bottom:1px solid rgba(255,255,255,.12)}
body[data-theme="precision"] .gl-bar a{color:var(--pr-lit)}
body[data-theme="precision"] .gl-cost{background:#fff;border-block:1px solid var(--pr-line)}
body[data-theme="precision"] .gl-price{
  font-family:var(--pr-disp);font-weight:700;font-size:clamp(34px,4.4vw,54px);
  color:var(--pr-navy);margin:.2rem 0 .6rem}
body[data-theme="precision"] .gl-card{border-radius:3px}
body[data-theme="precision"] .gl-term{background:rgba(2,157,252,.12);color:var(--pr-navy);border-radius:2px}

/* ---- nav contrast: links must read on the dark header ---- */
body[data-theme="precision"] .site-nav a{color:#DCE6F2}
body[data-theme="precision"] .site-nav a:hover,
body[data-theme="precision"] .site-nav a:focus-visible{color:#fff}
body[data-theme="precision"] .site-header a{color:#DCE6F2}
body[data-theme="precision"] .site-header .btn{color:#04121F}
body[data-theme="precision"] .site-header .brand,
body[data-theme="precision"] .site-header .site-title{color:#fff}

/* ---- breadth bar: keep the two halves together, centred, like the reference.
       space-between flung them to opposite screen edges. ---- */
body[data-theme="precision"] .gl-bar-in{
  justify-content:center;gap:.9rem;flex-wrap:wrap;text-align:center}
body[data-theme="precision"] .gl-bar-in>span::after{
  content:"\00B7";margin-left:.9rem;opacity:.55}
@media(max-width:560px){
  body[data-theme="precision"] .gl-bar-in>span::after{content:none}
}

/* ---- kill the inherited green. The base .hero::before paints a hardcoded
       green gradient over whatever background the theme sets, and several
       surfaces key off --turf-* which is green at :root. ---- */
body[data-theme="precision"]{
  --turf:#022151;--turf-dk:#071528;--turf-lit:#029DFC}
body[data-theme="precision"] .hero{background-color:var(--pr-deep)}
body[data-theme="precision"] .hero::before{
  background:linear-gradient(105deg,rgba(6,20,40,.96) 0%,rgba(6,20,40,.88) 46%,rgba(9,30,58,.62) 100%)}
body[data-theme="precision"] .band{background:var(--pr-navy)}
body[data-theme="precision"] .catpanel,
body[data-theme="precision"] .tile-noimg a{background:var(--pr-navy)}
body[data-theme="precision"] a{color:var(--pr-navy)}
/* the blanket rule above outranks `.utility a`, which repainted the top-bar
   phone number navy on a near-black bar. Put it back to white. */
body[data-theme="precision"] .utility{background:var(--pr-deep);color:#C4D2E4}
body[data-theme="precision"] .site-footer{background:var(--pr-deep);color:#C4D2E4}
body[data-theme="precision"] .utility a:not(.btn),
body[data-theme="precision"] .site-footer a:not(.btn),
body[data-theme="precision"] .band a:not(.btn),
body[data-theme="precision"] .band-soil a:not(.btn),
body[data-theme="precision"] .band .card a:not(.btn),
body[data-theme="precision"] .band-soil .card a:not(.btn),
body[data-theme="precision"] .on-dark a:not(.btn){color:#fff}
body[data-theme="precision"] .site-footer a:not(.btn):hover,
body[data-theme="precision"] .band a:not(.btn):hover{color:var(--pr-lit)}
body[data-theme="precision"] .card h3 a:hover,
body[data-theme="precision"] .arealist a:hover{color:var(--pr-blue);border-color:var(--pr-blue)}

/* ---- service-area coverage: centred, wrapped town list rather than a
       left-flush single column ---- */
body[data-theme="precision"] .gl-coverage{background:#fff;border-block:1px solid var(--pr-line)}
body[data-theme="precision"] .gl-coverage .coverage{justify-items:center;text-align:center}
body[data-theme="precision"] .gl-coverage .coverage-group ul{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .9rem}
body[data-theme="precision"] .gl-coverage .coverage-group a{
  padding:.3rem .2rem;border-bottom:1px solid transparent}
body[data-theme="precision"] .gl-coverage .coverage-group h3{color:var(--pr-blue)}