/* Barlow is served from this site (was Google Fonts): one less connection before the page can paint */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-600.woff2") format("woff2"); }
/* Driftless Softwash & Pressure Wash. Rules are documented in ../../DESIGN.md
   Layout idea: bright "washed" surfaces with hard black outlines and solid offset shadows,
   the same decal look as the logo and Drea. Black and orange bands break the page up. */
@font-face {
  font-family: "Designer";
  src: url("../assets/fonts/DESIGNER-1.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #000;
  --paper: #fff;
  --wash: #eceff2;      /* cool light grey, the colour of clean concrete */
  --wash-line: #cfd5db;
  --text: #23272b;
  --mute: #5b636b;
  --orange: #f16823;
  --orange-soft: #ffe7d9;
  --on-dark: #e4e7ea;
  --on-dark-mute: #a3abb3;

  --display: "Designer", "Barlow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 104px;

  --radius: 10px;
  --edge: 2.5px solid var(--ink);
  --drop: 6px 6px 0 var(--ink);
  --wrap: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 18px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.4vw, 72px); }
h2 { font-size: clamp(27px, 3.6vw, 46px); }
h3 { font-size: 21px; line-height: 1.1; }
p { margin: 0; max-width: 62ch; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); }
.section { padding: var(--s6) 0; }
.on-wash { background: var(--wash); }
.on-ink { background: var(--ink); color: var(--on-dark); }
.on-ink h2, .on-ink h3 { color: var(--paper); }
.section-head { margin-bottom: var(--s4); }
.section-head p { color: var(--mute); margin-top: var(--s2); font-size: 20px; }
.on-ink .section-head p { color: var(--on-dark-mute); }
/* the slanted orange bar that sits under each section heading, leaning like the typeface */
.section-head h2::after, .hero h1::after {
  content: ""; display: block; width: 88px; height: 10px; margin-top: 18px;
  background: var(--orange); transform: skewX(-18deg); transform-origin: left bottom;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 4px 26px 0;
  border-radius: var(--radius); border: var(--edge);
  font: 400 18px/1 var(--display); text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-white { background: var(--paper); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--orange); }
.btn-ink:hover { box-shadow: 6px 6px 0 var(--orange); }
.on-ink .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--orange); }
.on-ink .btn:hover { box-shadow: 6px 6px 0 var(--orange); }
.text-link { color: var(--ink); font: 400 18px/1 var(--display); text-underline-offset: 6px; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.text-link:hover { color: var(--orange); }

/* Top */
.strip { background: var(--ink); color: var(--on-dark); font-size: 15px; }
.strip .wrap { display: flex; justify-content: space-between; gap: var(--s2); padding-top: 9px; padding-bottom: 9px; }
.strip a { color: var(--paper); text-decoration: none; font-weight: 600; }
.top { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: var(--edge); }
.top .wrap { display: flex; align-items: center; gap: var(--s3); height: 88px; }
.brand img { height: 68px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; white-space: nowrap; font: 400 15.5px/1 var(--display); color: var(--ink); padding: 6px 0 2px; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--orange); }
.top .btn { min-height: 46px; padding: 3px 16px 0; font-size: 15.5px; white-space: nowrap; }
.menu-btn { display: none; }

/* Hero */
.hero { background: var(--wash); position: relative; overflow: hidden; }
.hero::before { /* one big slanted orange panel behind the estimator */
  content: ""; position: absolute; right: -12%; top: 0; bottom: 0; width: 52%;
  background: var(--orange); transform: skewX(-18deg); border-left: var(--edge);
}
.hero .wrap {
  position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s5);
  align-items: center; padding-top: 96px; padding-bottom: 132px;
}
.hero-copy p { font-size: 22px; color: var(--ink); margin-top: var(--s3); max-width: 31ch; }
.hero-copy .where { font-size: 17px; color: var(--mute); margin-top: var(--s2); max-width: 44ch; }
.hero-call { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.rating { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.rating a { font-weight: 600; text-underline-offset: 4px; }
.stars { color: var(--orange); letter-spacing: 2px; font-size: 19px; -webkit-text-stroke: 0.6px var(--ink); }

/* Estimator */
.est-holder { position: relative; }
.drea { position: absolute; width: 176px; right: -40px; top: -112px; z-index: 2; }
.est { background: var(--paper); color: var(--ink); border: var(--edge); border-radius: 14px; overflow: hidden; box-shadow: 10px 10px 0 var(--ink); }
.est-head { background: var(--ink); padding: 20px var(--s3) 18px; }
.est-head h2 { font-size: 22px; color: var(--paper); }
.est-head span { display: block; font-size: 16px; color: var(--on-dark-mute); margin-top: 6px; }
.est-bar { height: 8px; background: var(--wash); border-bottom: var(--edge); }
.est-bar i { display: block; height: 100%; width: 20%; background: var(--orange); border-right: var(--edge); }
.est-body { padding: var(--s3); }
.est-body legend { font: 400 21px/1.1 var(--display); padding: 0; margin-bottom: var(--s2); }
.est fieldset { border: 0; margin: 0; padding: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; inset: 0; }
.tile label {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  border: 2px solid var(--wash-line); border-radius: var(--radius); cursor: pointer; background: var(--paper);
  font: 600 17px/1.15 var(--body);
}
.tile svg, .svc-icon svg, .why svg { width: 28px; height: 28px; flex: none; stroke: var(--ink); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tile label:hover { border-color: var(--ink); }
.tile input:checked + label { border-color: var(--ink); background: var(--orange-soft); box-shadow: 3px 3px 0 var(--orange); }
.tile input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }
.est .btn { width: 100%; margin-top: var(--s3); }
.est-note { font-size: 15px; color: var(--mute); margin-top: 14px; text-align: center; max-width: none; }

/* Clients: a white card that straddles the hero and the next section */
.clients { margin-top: -72px; position: relative; z-index: 3; }
.clients .card { background: var(--paper); border: var(--edge); border-radius: 14px; box-shadow: var(--drop); padding: var(--s3) var(--s3) 28px; }
.clients h2 { font-size: 19px; margin-bottom: var(--s2); }
.logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.logo-row div { background: var(--paper); border: 2px solid var(--wash-line); border-radius: 8px; height: 78px; display: grid; place-items: center; padding: 10px; }
.logo-row div.dark { background: var(--ink); border-color: var(--ink); }
.logo-row img { width: 100%; height: 54px; object-fit: contain; }

/* Services */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.svc a {
  display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s3); align-items: start;
  padding: var(--s3); background: var(--paper); border: var(--edge); border-radius: 14px;
  text-decoration: none; box-shadow: var(--drop);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.svc a:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--orange); }
.svc-icon { grid-row: 1 / span 3; width: 68px; height: 68px; border: var(--edge); border-radius: 12px; background: var(--orange); display: grid; place-items: center; }
.svc-icon svg { width: 36px; height: 36px; stroke-width: 2; }
.svc h3 { font-size: 25px; padding-top: 6px; }
.svc p { color: var(--text); font-size: 17px; }
.svc .fact { margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--wash); display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.svc .fact b { font: 400 17px/1.15 var(--display); color: var(--ink); }
.svc .fact small { display: block; font: 400 15px/1.3 var(--body); color: var(--mute); margin-top: 3px; }
.svc .go { font: 400 16px/1 var(--display); color: var(--ink); white-space: nowrap; border-bottom: 3px solid var(--orange); padding-bottom: 2px; }

/* Work */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pair figure, .work figure { margin: 0; position: relative; }
.pair img { width: 100%; height: 440px; object-fit: cover; border: 3px solid var(--paper); border-radius: 14px; }
.tag { position: absolute; left: -6px; top: 18px; background: var(--paper); color: var(--ink); font: 400 18px/1 var(--display); padding: 10px 16px 7px; border: var(--edge); transform: skewX(-12deg); }
.tag.after { background: var(--orange); }
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s2); }
.work img { width: 100%; height: 230px; object-fit: cover; border: 3px solid var(--paper); border-radius: 12px; }
.work figcaption { font: 400 16px/1 var(--display); color: var(--paper); margin-top: 12px; }

/* Reviews */
.rev-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s3); align-items: stretch; }
.rev-big { background: var(--orange); border: var(--edge); border-radius: 14px; box-shadow: var(--drop); padding: var(--s4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); }
.rev-big blockquote { margin: 0; font: 500 clamp(24px, 3vw, 40px)/1.25 var(--body); color: var(--ink); }
.rev-big .stars { color: var(--ink); -webkit-text-stroke: 0; }
.rev-big .who, .rev-big .who b { color: var(--ink); }
.rev-small { display: grid; gap: var(--s2); align-content: start; }
.rev-small article { background: var(--paper); border: var(--edge); border-radius: 14px; padding: var(--s3); }
.rev-small blockquote { margin: 0; font-size: 17.5px; color: var(--text); }
.who { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 16px; color: var(--mute); flex-wrap: wrap; }
.who b { color: var(--ink); font-weight: 600; }
.rev-more { margin-top: var(--s4); }

/* Why: one outlined block split into four */
.why { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--edge); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: var(--drop); }
.why div { padding: var(--s3); border-left: var(--edge); }
.why div:first-child { border-left: 0; }
.why svg { width: 34px; height: 34px; stroke: var(--orange); stroke-width: 2.2; margin-bottom: 14px; }
.why h3 { font-size: 20px; }
.why p { font-size: 17px; margin-top: 10px; }
.owner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s5); align-items: center; margin-top: var(--s6); }
.owner img { border: var(--edge); border-radius: 14px; width: 100%; height: 430px; object-fit: cover; object-position: 40% 30%; box-shadow: -10px 10px 0 var(--orange); }
.owner p { margin-top: var(--s3); }
.owner .text-link { display: inline-block; margin-top: var(--s3); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s5); align-items: start; }
.faq-side img { width: 340px; margin-top: var(--s4); }
.faq-list { display: grid; gap: 12px; }
details { background: var(--paper); border: var(--edge); border-radius: 12px; padding: 0 var(--s3); }
details[open] { box-shadow: 5px 5px 0 var(--orange); }
summary { list-style: none; cursor: pointer; padding: 20px 44px 18px 0; position: relative; font: 600 20px/1.3 var(--body); color: var(--ink); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 12px; font: 400 34px/1 var(--body); color: var(--orange); }
details[open] summary::after { content: "\2212"; }
details p { padding: 0 0 22px; }
.faq-more { margin-top: var(--s3); }

/* Area */
.area-grid > * { min-width: 0; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.area-grid > div > p { margin-top: var(--s3); }
.towns { display: grid; gap: var(--s3); margin-top: var(--s4); }
.towns h3 { margin-bottom: 12px; color: var(--orange); font-size: 19px; }
.towns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.towns li { border: 1.5px solid #4a5057; border-radius: 99px; padding: 4px 13px; color: var(--paper); }
.area-note { margin-top: var(--s3); color: var(--on-dark-mute); font-size: 16px; }
#map { height: 500px; border-radius: 14px; border: 3px solid var(--paper); background: #1a1a1a; }
#map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.leaflet-container { font: 13px var(--body); }

/* Closing band */
.closing { background: var(--orange); border-top: var(--edge); border-bottom: var(--edge); padding: var(--s5) 0; }
.closing .wrap { display: grid; grid-template-columns: 1.3fr auto; gap: var(--s4); align-items: center; }
.closing p { margin-top: var(--s2); font-size: 20px; color: var(--ink); }
.closing .acts { display: flex; gap: 14px; flex-wrap: wrap; }

footer { background: var(--ink); color: var(--on-dark); padding: var(--s5) 0 var(--s6); font-size: 16px; }
.foot { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--s4); }
.foot img { height: 96px; width: auto; }
.foot h3 { font-size: 17px; margin-bottom: 14px; color: var(--orange); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 4px 0; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--orange); }
.legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid #33383d; color: var(--on-dark-mute); font-size: 15px; display: flex; gap: var(--s3); flex-wrap: wrap; }

.bar { display: none; }

/* One load moment: the hero settles in, Drea arrives last */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.14s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.2s; }
  .est { animation: rise 0.7s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .drea { animation: drea 0.7s 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes drea { from { opacity: 0; transform: translate(40px, 30px) rotate(10deg); } }
}

@media (max-width: 980px) {
  .strip .wrap span { display: none; }
  .strip .wrap { justify-content: center; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; background: var(--paper); border: var(--edge); color: var(--ink); border-radius: var(--radius); height: 46px; padding: 3px 16px 0; font: 400 17px var(--display); align-items: center; box-shadow: 3px 3px 0 var(--ink); }
  .top .btn { display: none; }
  .nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: var(--edge); padding: 4px var(--s3) 16px; }
  .nav.open a { padding: 14px 0 10px; font-size: 20px; border-bottom: 2px solid var(--wash); }
  .top .wrap { height: 72px; }
  .brand img { height: 56px; }
  .hero .wrap, .rev-grid, .faq-grid, .area-grid, .owner, .closing .wrap, .svc { grid-template-columns: 1fr; }
  .hero::before { right: -40%; top: 46%; width: 180%; transform: skewY(-8deg); border-left: 0; border-top: var(--edge); }
  .hero .wrap { gap: 84px; padding-top: var(--s4); padding-bottom: 112px; }
  .hero-copy p { font-size: 19px; margin-top: var(--s2); }
  .hero-copy .where { font-size: 16px; margin-top: 10px; }
  .hero-call { margin-top: var(--s3); }
  .hero-call .btn { display: none; }
  .drea { width: 112px; right: 4px; top: -74px; }
  .est { box-shadow: 6px 6px 0 var(--ink); }
  .clients { margin-top: -64px; }
  .clients .card { padding: var(--s2) var(--s2) 20px; }
  .logo-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .logo-row div { height: 66px; }
  .logo-row img { height: 44px; }
  .svc a { padding: 20px; gap: 6px var(--s2); }
  .svc-icon { width: 54px; height: 54px; grid-row: 1; }
  .svc-icon svg { width: 30px; height: 30px; }
  .svc h3 { font-size: 22px; align-self: center; padding-top: 4px; }
  .svc p, .svc .fact { grid-column: 1 / -1; }
  .pair { gap: 10px; }
  .pair img { height: 250px; }
  .tag { font-size: 15px; padding: 8px 12px 5px; left: -4px; top: 12px; }
  .work { grid-template-columns: 1fr 1fr; }
  .work img { height: 160px; }
  .rev-big { padding: var(--s3); gap: var(--s3); }
  .why { grid-template-columns: 1fr; }
  .why div { border-left: 0; border-top: var(--edge); }
  .why div:first-child { border-top: 0; }
  .owner { margin-top: var(--s5); gap: var(--s4); }
  .owner img { height: 330px; box-shadow: -6px 6px 0 var(--orange); margin-left: 6px; width: calc(100% - 6px); }
  .faq-side img { display: none; }
  #map { height: 330px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .section { padding: var(--s5) 0; }
  body { padding-bottom: 76px; font-size: 17px; }
  .bar {
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: var(--edge);
    transform: translateY(110%); transition: transform 0.25s ease-out;
  }
  .bar.show { transform: none; }
  .bar .btn { min-height: 50px; padding: 3px 8px 0; font-size: 17px; box-shadow: 3px 3px 0 var(--ink); }
}
@media (max-width: 420px) {
  .wrap { padding: 0 var(--s2); }
  .tile label { font-size: 15.5px; padding: 10px; gap: 8px; }
  .tiles { gap: 8px; }
  .est-body { padding: var(--s2); }
}

/* Scroll effects. Only switched on by js/site.js (html.fx) and never for reduced motion,
   so the page is complete without them. */
@media (prefers-reduced-motion: no-preference) {
  html.fx .rv { opacity: 0; transform: translateY(26px); }
  html.fx .rv.in { opacity: 1; transform: none; transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
  html.fx .section-head h2::after { transform: skewX(-18deg) scaleX(0); transition: transform 0.6s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  html.fx .section-head.in h2::after, html.fx .section-head .in h2::after { transform: skewX(-18deg) scaleX(1); }
  /* the After photo is wiped clean as it scrolls into view */
  html.fx .pair figure:nth-child(2) img { clip-path: polygon(0 0, calc(var(--wipe, 1) * 112%) 0, calc(var(--wipe, 1) * 112% - 12%) 100%, 0 100%); }
  html.fx .pair figure:nth-child(2) .tag { opacity: calc(var(--wipe, 1) * 3); }
}

/* ------------------------------------------------------------------
   Inner pages. Building blocks shared by every page except the home hero.
   ------------------------------------------------------------------ */
.nav-only-menu { display: none; }

/* Page hero: a picture band with the page title. --img is set inline per page. */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: #05070a; --sy: 0; }
.page-hero .ph-img { position: absolute; inset: -4% 0; z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(calc(1.02 + var(--sy) * 0.1)) translateY(calc(var(--sy) * 4%)); will-change: transform; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.05) 72%),
    linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 20%);
}
.page-hero .wrap { padding-top: 112px; padding-bottom: 120px; }
.page-hero h1 { color: #fff; max-width: 17ch; font-size: clamp(32px, 4.6vw, 62px); text-shadow: 0 2px 24px rgba(0,0,0,0.7); }
.page-hero h1::after { content: ""; display: block; width: 88px; height: 10px; margin-top: 18px; background: var(--orange); transform: skewX(-18deg); transform-origin: left bottom; }
.page-hero .lead { color: #fff; font-size: 21px; max-width: 46ch; margin-top: var(--s3); text-shadow: 0 1px 12px rgba(0,0,0,0.8); }
.page-hero .hero-call { margin-top: var(--s4); }
.page-hero.plain { background: var(--wash); }
.page-hero.plain::after { display: none; }
.page-hero.plain .wrap { padding-top: 84px; padding-bottom: 72px; }
.page-hero.plain h1 { color: var(--ink); text-shadow: none; }
.page-hero.plain .lead { color: var(--text); text-shadow: none; }

/* Heading on the left, reading text on the right */
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s5); align-items: start; }
.split > * { min-width: 0; }
.split.even { grid-template-columns: 1fr 1fr; align-items: center; }
.prose > * + * { margin-top: var(--s2); }
.prose h3 { margin-top: var(--s4); font-size: 22px; }
.prose a:not(.btn) { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose .lead { font-size: 21px; color: var(--ink); }
.cta-row { margin-top: var(--s4); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Tick list: each item starts with a slanted orange mark */
.ticks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 36px; max-width: 60ch; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 18px; height: 9px; background: var(--orange); transform: skewX(-18deg); }
.ticks li b { color: var(--ink); font-weight: 600; }

/* Outlined cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.cards.two { grid-template-columns: 1fr 1fr; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--paper); border: var(--edge); border-radius: 14px; padding: var(--s3); box-shadow: var(--drop); min-width: 0; }
.card h3 { font-size: 21px; }
.card p { margin-top: 10px; font-size: 17px; }
.card .big { display: block; font: 400 clamp(26px, 2.6vw, 36px)/1.05 var(--display); color: var(--orange); margin-bottom: 8px; }
.cards .card img { border-radius: 10px; width: 100%; height: 200px; object-fit: cover; margin-bottom: var(--s2); }
.card .text-link { display: inline-block; margin-top: var(--s2); }
.why.three { grid-template-columns: repeat(3, 1fr); }

/* A framed photo with the orange offset */
.framed { border: var(--edge); border-radius: 14px; width: 100%; object-fit: cover; box-shadow: -10px 10px 0 var(--orange); }

/* Callout */
.callout { background: var(--paper); border: var(--edge); border-left: 8px solid var(--orange); border-radius: 12px; padding: var(--s3); }
.callout p { max-width: none; }
.callout b { color: var(--ink); }

/* Numbered steps, only for things that really happen in order */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.steps li { counter-increment: step; background: var(--paper); border: var(--edge); border-radius: 14px; padding: var(--s3); min-width: 0; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; background: var(--orange); color: #000; border: 2.5px solid #000; border-radius: 10px; font: 400 22px/1 var(--display); padding-top: 3px; }
.steps h3 { font-size: 20px; }
.steps p { margin-top: 8px; font-size: 17px; }

/* Review wall */
.review-wall { columns: 3; column-gap: var(--s2); }
.review-wall article { break-inside: avoid; margin: 0 0 var(--s2); background: var(--paper); border: var(--edge); border-radius: 14px; padding: var(--s3); }
.review-wall blockquote { margin: 0; font-size: 17.5px; color: var(--text); }

/* Chips (towns, service lists) */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.chips li { border: 1.5px solid var(--wash-line); border-radius: 99px; padding: 5px 14px; color: var(--ink); }

/* Legal text */
.legal-prose { max-width: 780px; }
.legal-prose h2 { font-size: 24px; margin-top: var(--s5); }
.legal-prose h3 { font-size: 19px; margin-top: var(--s4); }
.legal-prose p, .legal-prose ul, .legal-prose ol, .legal-prose table { margin-top: var(--s2); max-width: none; }
.legal-prose li { margin-top: 6px; }
.legal-prose a { color: var(--ink); text-decoration-color: var(--orange); }
.legal-prose table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
.legal-prose td, .legal-prose th { border: 1px solid var(--wash-line); padding: 8px 10px; vertical-align: top; text-align: left; }

/* Forms */
.form { display: grid; gap: var(--s2); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.field label { display: block; font: 600 16px/1.2 var(--body); color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--wash-line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 400 17px/1.4 var(--body);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--orange); box-shadow: 3px 3px 0 var(--orange); }
.form-note { font-size: 15px; color: var(--mute); }

/* Contact list */
.contact-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.contact-list li { display: grid; gap: 2px; padding-bottom: var(--s2); border-bottom: 2px solid var(--wash); }
.contact-list small { font: 400 15px/1 var(--display); color: var(--orange); }
.contact-list a { font: 600 20px/1.3 var(--body); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--orange); }

/* ------------------------------------------------------------------
   Screen sizes
   ------------------------------------------------------------------ */
/* Ultra wide desktop */
@media (min-width: 1800px) {
  :root { --wrap: 1480px; --s6: 128px; }
  body { font-size: 19.5px; }
  h1 { font-size: 84px; }
  h2 { font-size: 52px; }
  .nav a { font-size: 17px; }
  .nav { gap: 30px; }
  .pair img { height: 560px; }
  .work img { height: 300px; }
  .owner img { height: 520px; }
  .page-hero .wrap { padding-top: 150px; padding-bottom: 160px; }
  .page-hero h1 { font-size: 74px; }
  #map { height: 600px; }
}
/* Laptop */
@media (max-width: 1320px) {
  .nav { gap: 18px; }
  .nav a { font-size: 14.5px; }
  .top .btn { font-size: 14.5px; padding: 3px 14px 0; }
  .hero .wrap { gap: var(--s4); }
  .cards.four { grid-template-columns: 1fr 1fr; }
}
/* iPad landscape and small laptops: the menu moves behind a button, layouts stay side by side */
@media (max-width: 1180px) {
  .strip .wrap span { display: none; }
  .strip .wrap { justify-content: center; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; background: var(--paper); border: var(--edge); color: var(--ink); border-radius: var(--radius); height: 46px; padding: 3px 16px 0; font: 400 17px var(--display); align-items: center; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
  .top .btn { margin-left: auto; }
  .top .menu-btn { margin-left: 0; }
  .nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: var(--edge); padding: 4px var(--s3) 16px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .nav.open a { padding: 14px 0 10px; font-size: 20px; border-bottom: 2px solid var(--wash); }
  .nav.open .nav-only-menu { display: block; }
  .top { position: sticky; }
  .top .wrap { position: relative; }
  .why { grid-template-columns: 1fr 1fr; }
  .why div:nth-child(3) { border-left: 0; }
  .why div:nth-child(n+3) { border-top: var(--edge); }
  .why.three { grid-template-columns: repeat(3, 1fr); }
  .why.three div:nth-child(3) { border-left: var(--edge); border-top: 0; }
  .review-wall { columns: 2; }
  .steps { grid-template-columns: 1fr 1fr; }
}
/* iPad portrait and large phones held sideways: two columns where they fit */
@media (max-width: 980px) {
  .top .btn { display: none; }
  .top .menu-btn { margin-left: auto; }
  .split, .split.even { grid-template-columns: 1fr; gap: var(--s4); }
  .cards { grid-template-columns: 1fr 1fr; }
  .page-hero .wrap { padding-top: 72px; padding-bottom: 84px; }
  .page-hero::after { background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.35) 100%); }
  .page-hero.plain .wrap { padding-top: 56px; padding-bottom: 48px; }
  .page-hero .lead { font-size: 19px; }
  .framed { box-shadow: -6px 6px 0 var(--orange); margin-left: 6px; width: calc(100% - 6px); }
}
@media (min-width: 641px) and (max-width: 980px) {
  .svc { grid-template-columns: 1fr 1fr; }
  .svc a { grid-template-columns: 1fr; }
  .svc h3 { align-self: start; }
  .logo-row { grid-template-columns: repeat(4, 1fr); }
  .work { grid-template-columns: repeat(4, 1fr); }
  .pair img { height: 340px; }
  .why { grid-template-columns: 1fr 1fr; }
  .why div { border-top: 0; border-left: var(--edge); }
  .why div:nth-child(odd) { border-left: 0; }
  .why div:nth-child(n+3) { border-top: var(--edge); }
  .rev-small { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .towns { grid-template-columns: 1fr 1fr; }
  .owner { grid-template-columns: 0.8fr 1.2fr; }
}
/* Phones */
@media (max-width: 640px) {
  .cards, .cards.two, .cards.four, .steps, .form .two, .why.three { grid-template-columns: 1fr; }
  .why.three div:nth-child(n) { border-left: 0; border-top: var(--edge); }
  .why.three div:first-child { border-top: 0; }
  .review-wall { columns: 1; }
  .card { padding: 20px; }
}
/* Phone held sideways: short screen, so the header shrinks and nothing pins */
@media (max-height: 520px) and (orientation: landscape) {
  .strip { display: none; }
  .top .wrap { height: 58px; }
  .brand img { height: 44px; }
  .menu-btn { height: 40px; }
  h1, .page-hero h1 { font-size: 32px; }
  .hero .wrap, .page-hero .wrap { padding-top: var(--s3); padding-bottom: var(--s5); }
  .section { padding: var(--s4) 0; }
  body { padding-bottom: 60px; }
  .bar { padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .bar .btn { min-height: 42px; }
  .wrap { padding-left: max(var(--s3), env(safe-area-inset-left)); padding-right: max(var(--s3), env(safe-area-inset-right)); }
  .nav.open { max-height: calc(100vh - 60px); }
}

/* Linked town names */
.chips li a, .towns li a { color: inherit; text-decoration: none; }
.chips li:has(a):hover, .towns li:has(a):hover { border-color: var(--orange); }
.chips li a:hover, .towns li a:hover { color: var(--orange); }
/* The small keyword line that sits above the home headline, inside the h1 */
h1 .kicker { display: block; font: 600 17px/1.3 var(--body); letter-spacing: 0.01em; color: var(--orange); margin-bottom: 14px; text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
/* Icon tiles (commercial services) */
.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.tilegrid > div { display: flex; align-items: center; gap: var(--s2); background: var(--paper); border: var(--edge); border-radius: 14px; padding: 20px var(--s3); box-shadow: var(--drop); min-width: 0; }
.tilegrid svg { width: 40px; height: 40px; flex: none; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tilegrid h3 { font-size: 19px; }
.map-label { background: #000; color: #fff; border: 0; border-radius: 6px; font: 600 13px/1 var(--body); padding: 5px 8px; box-shadow: none; }
.map-label::before { display: none; }
@media (max-width: 980px) { .tilegrid { grid-template-columns: 1fr 1fr; } h1 .kicker { font-size: 15px; margin-bottom: 10px; } }
@media (max-width: 640px) { .tilegrid { grid-template-columns: 1fr; } }
@media (max-width: 1320px) { .nav { gap: 15px; } .nav a { font-size: 14px; } }
@media (max-width: 1240px) and (min-width: 1181px) { .nav a { font-size: 13px; } .nav { gap: 12px; } }

/* ------------------------------------------------------------------
   Header (replaces the old .strip / .top / .nav rules above, which are no longer used).
   At the top of a page it is a solid black bar. Once the page scrolls it becomes a smaller
   glass bar that floats and follows, with fewer links. The header box itself keeps its height
   so nothing below it jumps.
   ------------------------------------------------------------------ */
.hdr { position: sticky; top: 0; z-index: 50; height: 96px; pointer-events: none; }
.hdr-bar {
  pointer-events: auto; position: relative; margin: 0 auto; height: 96px; max-width: 100%;
  display: flex; align-items: center; gap: 26px;
  padding: 0 max(var(--s3), calc((100% - var(--wrap)) / 2 + var(--s3)));
  background: #000; border: 0 solid transparent; border-bottom: 3px solid var(--orange);
  transition: height 0.3s ease, max-width 0.35s ease, margin 0.3s ease, padding 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.hdr-brand { flex: none; display: block; }
.hdr-brand img { height: 66px; width: auto; max-width: none; transition: height 0.3s ease; }
.hdr-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hdr-item { position: relative; }
.hdr-link {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 3px 14px 0;
  font: 400 17.5px/1 var(--display); color: #fff; text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.hdr-link svg { width: 11px; height: 8px; fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; margin-top: -3px; }
.hdr-link:hover, .hdr-item:hover > .hdr-link, .hdr-item.open > .hdr-link { background: rgba(255,255,255,0.1); }
.hdr-item:hover > .hdr-link svg, .hdr-item.open > .hdr-link svg { transform: rotate(180deg); }
.hdr-sub {
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 320px; padding: 8px;
  background: #101214; border: 1px solid #2f353b; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.hdr-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hdr-item:hover > .hdr-sub, .hdr-item:focus-within > .hdr-sub, .hdr-item.open > .hdr-sub { opacity: 1; visibility: visible; transform: none; }
.hdr-sub a { display: grid; gap: 3px; padding: 11px 14px 10px; border-radius: 10px; text-decoration: none; border-left: 3px solid transparent; }
.hdr-sub a b { font: 400 16.5px/1.1 var(--display); color: #fff; }
.hdr-sub a small { font: 400 14.5px/1.3 var(--body); color: #a3abb3; }
.hdr-sub a:hover, .hdr-sub a:focus-visible { background: rgba(255,255,255,0.07); border-left-color: var(--orange); }
.hdr-phone { font: 600 19px/1 var(--body); color: #fff; text-decoration: none; white-space: nowrap; letter-spacing: 0.01em; margin-left: 6px; }
.hdr-phone:hover { color: var(--orange); }
.hdr-cta { min-height: 48px; padding: 3px 18px 0; font-size: 16.5px; white-space: nowrap; flex: none; }
.hdr-menu-btn, .hdr-menu-only { display: none; }

/* scrolled: glass, smaller, simpler */
.hdr.scrolled .hdr-bar {
  height: 66px; margin-top: 12px; max-width: min(1080px, calc(100% - 32px)); padding: 0 12px 0 20px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 20px;
  background: rgba(12,14,16,0.58); box-shadow: 0 12px 34px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
.hdr.scrolled .hdr-brand img { height: 46px; }
.hdr.scrolled .hdr-extra, .hdr.scrolled .hdr-phone { display: none; }
.hdr.scrolled .hdr-cta { min-height: 44px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr.scrolled .hdr-bar { background: rgba(12,14,16,0.92); } }

@media (min-width: 1800px) { .hdr-link { font-size: 19px; } .hdr-brand img { height: 72px; } }
@media (max-width: 1320px) { .hdr-phone { display: none; } .hdr-link { font-size: 16.5px; padding: 3px 11px 0; } .hdr-bar { gap: 18px; } }
@media (max-width: 1180px) {
  .hdr-nav { display: none; }
  .hdr-cta { margin-left: auto; }
  .hdr-menu-btn { display: inline-flex; align-items: center; height: 48px; padding: 3px 18px 0; background: #171a1e; color: #fff; border: 2px solid #59616a; border-radius: var(--radius); font: 400 17px var(--display); box-shadow: 3px 3px 0 var(--orange); cursor: pointer; flex: none; }
  .hdr-nav.open {
    display: grid; gap: 2px; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); margin: 0;
    max-height: calc(100vh - 130px); overflow-y: auto; padding: 10px;
    background: #101214; border: 1px solid #2f353b; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  }
  .hdr-nav.open .hdr-menu-only, .hdr.scrolled .hdr-nav.open .hdr-extra { display: flex; }
  .hdr-nav.open .hdr-link { height: auto; padding: 14px 12px 11px; font-size: 20px; justify-content: space-between; width: 100%; }
  .hdr-nav.open button.hdr-link { color: var(--orange); font-size: 15px; padding-bottom: 4px; cursor: default; pointer-events: none; }
  .hdr-nav.open button.hdr-link svg { display: none; }
  .hdr-nav.open .hdr-sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 8px; border: 0; border-bottom: 1px solid #2f353b; border-radius: 0; box-shadow: none; background: none; grid-template-columns: 1fr 1fr; }
  .hdr-nav.open .hdr-sub a small { display: none; }
  .hdr-nav.open .hdr-sub a b { font-size: 17px; }
  .hdr-nav.open .hdr-call { background: var(--orange); color: #000; justify-content: center; margin-top: 8px; border-radius: 12px; }
}
@media (max-width: 980px) {
  .hdr, .hdr-bar { height: 76px; }
  .hdr-bar { padding: 0 var(--s2); gap: 12px; }
  .hdr-brand img { height: 54px; }
  .hdr.scrolled .hdr-bar { height: 60px; margin-top: 8px; max-width: calc(100% - 20px); padding: 0 8px 0 14px; border-radius: 16px; }
  .hdr.scrolled .hdr-brand img { height: 40px; }
  .hdr.scrolled .hdr-menu-btn { height: 42px; box-shadow: none; }
  .hdr.scrolled .hdr-cta { min-height: 42px; font-size: 15px; padding: 3px 12px 0; box-shadow: none; }
}
@media (max-width: 640px) {
  .hdr-cta { display: none; }
  .hdr-menu-btn { margin-left: auto; }
  .hdr-nav.open .hdr-sub { grid-template-columns: 1fr; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hdr, .hdr-bar { height: 60px; }
  .hdr-brand img { height: 44px; }
  .hdr.scrolled .hdr-bar { height: 52px; margin-top: 4px; }
  .hdr-nav.open { max-height: calc(100vh - 76px); }
  .hdr-nav.open .hdr-sub { grid-template-columns: 1fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hdr-bar, .hdr-brand img, .hdr-sub { transition: none; } }

/* Logos keep their shape at every width */
.foot img { height: auto; width: 100%; max-width: 190px; }

/* Very small phones (320 wide): nothing may push the page sideways */
.foot > div { min-width: 0; }
.foot a { overflow-wrap: anywhere; }
@media (max-width: 420px) { .foot { grid-template-columns: 1fr; gap: var(--s3); } }

blockquote, .who, h1, h2, h3, p, li { overflow-wrap: break-word; }
.rev-big, .rev-small article, .review-wall article { min-width: 0; }

/* Service cards: a picture instead of an icon square */
.svc a { grid-template-columns: 150px 1fr; align-items: stretch; }
.svc-pic { grid-row: 1 / span 3; width: 150px; height: 100%; min-height: 168px; object-fit: cover; border-radius: 10px; border: var(--edge); }
.svc h3 { align-self: end; }
@media (max-width: 980px) {
  .svc a { grid-template-columns: 96px 1fr; }
  .svc-pic { grid-row: 1; width: 96px; height: 96px; min-height: 0; }
  .svc h3 { align-self: center; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .svc a { grid-template-columns: 1fr; }
  .svc-pic { width: 100%; height: 150px; }
}
/* Header: no phone number in the bar; the glass bar floats clear of the top edge */
.hdr.scrolled .hdr-bar { margin-top: 0; top: 16px; }
@media (max-width: 980px) { .hdr.scrolled .hdr-bar { margin-top: 0; top: 10px; } }
@media (max-height: 520px) and (orientation: landscape) { .hdr.scrolled .hdr-bar { margin-top: 0; top: 6px; } }
/* Home headline's small line: readable over any picture */
h1 .kicker { display: table; background: rgba(0,0,0,0.72); color: #ff8a4c; padding: 7px 12px 6px; border-radius: 8px; border-left: 4px solid var(--orange); text-shadow: none; }
/* The estimator card calls attention to itself when "Get my price range" is pressed */
@keyframes est-attn {
  0%   { outline: 0 solid rgba(241,104,35,0.9); outline-offset: 0; transform: none; }
  25%  { outline: 6px solid rgba(241,104,35,0.9); outline-offset: 6px; transform: scale(1.025); }
  55%  { outline: 6px solid rgba(241,104,35,0); outline-offset: 22px; transform: none; }
  70%  { outline: 6px solid rgba(241,104,35,0.9); outline-offset: 6px; transform: scale(1.015); }
  100% { outline: 6px solid rgba(241,104,35,0); outline-offset: 22px; transform: none; }
}
.est.attn { animation: est-attn 1.5s ease-out both !important; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .est.attn { animation: none !important; outline: 5px solid var(--orange); outline-offset: 5px; } }

/* ---- After the AI-look audit (2026-10-04) ---- */
/* The line above the home headline is plain type again, no tag */
h1 .kicker { display: block; background: none; border: 0; padding: 0; border-radius: 0; color: #fff; font: 600 18px/1.3 var(--body); letter-spacing: 0; margin-bottom: 14px; text-shadow: 0 1px 14px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.6); }
@media (max-width: 980px) { h1 .kicker { font-size: 16px; margin-bottom: 10px; } }
/* The slanted orange bar belongs to page titles only, not every section heading */
.section-head h2::after { display: none; }
.section-head { margin-bottom: var(--s3); }
/* Hard offset shadows stay on the estimator and the buttons; cards are flat outlines */
.card, .svc a, .why, .clients .card, .tilegrid > div, .rev-big { box-shadow: none; }
.svc a:hover { box-shadow: none; border-color: var(--orange); transform: none; }
/* Owner block with the plain list of what you get */
.owner { margin-top: 0; align-items: start; }
.owner .ticks { margin-top: var(--s3); }
/* small fixes from the audit */
.faq-side img { width: min(100%, 420px); }
@media (max-width: 980px) { .split > .section-head, .split > div > .section-head { margin-bottom: 0; } .split { gap: var(--s3); } }

/* Real job photos */
.pair + .pair, .pair-cap + .pair { margin-top: var(--s3); }
.pair-cap { margin-top: 10px; font-size: 16px; color: var(--mute); }
.work img { background: #111; }
@media (max-width: 980px) { .work[style] { grid-template-columns: 1fr 1fr !important; } .work[style] img { height: 240px !important; } }

/* Town pages: one real photo of the truck under the bluffs, blurred, with a road sign carrying the town's name */
.page-hero.town .wrap { position: relative; }
.page-hero.town::after { background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%), linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 32%); }
.town-sign {
  position: absolute; right: var(--s3); top: 50%; transform: translateY(-58%);
  min-width: 300px; max-width: 420px; padding: 22px 34px 20px; text-align: center;
  background: #0a6a3c; color: #fff; border-radius: 14px; box-shadow: 0 0 0 4px #0a6a3c, inset 0 0 0 3px #fff, 0 18px 40px rgba(0,0,0,0.45);
}
.town-sign b { display: block; font: 600 clamp(30px, 3.4vw, 46px)/1.05 var(--body); letter-spacing: 0.01em; }
.town-sign span { display: block; margin-top: 6px; font: 500 18px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.town-sign::before, .town-sign::after { content: ""; position: absolute; top: 100%; width: 10px; height: 400px; background: linear-gradient(90deg, #8d949b, #c9ced3 45%, #7d848b); z-index: -1; }
.town-sign::before { left: 22%; } .town-sign::after { right: 22%; }
@media (max-width: 1180px) { .town-sign { min-width: 240px; padding: 18px 24px 16px; } }
@media (max-width: 980px) {
  .town-sign { position: relative; right: auto; top: auto; transform: none; display: inline-block; min-width: 0; padding: 12px 20px 10px; margin-bottom: var(--s3); border-radius: 10px; box-shadow: 0 0 0 3px #0a6a3c, inset 0 0 0 2px #fff; }
  .town-sign b { font-size: 24px; } .town-sign span { font-size: 13px; margin-top: 4px; }
  .town-sign::before, .town-sign::after { display: none; }
}

/* Heroes that carry the estimator card (town pages and service pages) */
.page-hero.has-est .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s5); align-items: center; padding-top: 96px; padding-bottom: 104px; }
.page-hero.has-est .wrap > * { min-width: 0; }
.page-hero.has-est::after { background: linear-gradient(90deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.62) 42%, rgba(0,0,0,0.3) 100%), linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 30%); }
.page-hero.has-est .rating { font-size: 17px; }
.page-hero.has-est .rating a { color: #fff; }
/* Town name as the headline */
h1.lock { max-width: none; }
h1.lock::after { margin-top: 22px; }
h1.lock small { display: block; font: 600 20px/1.25 var(--body); color: #fff; letter-spacing: 0; margin-bottom: 10px; text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
h1.lock b { display: block; font: 400 clamp(52px, 8.6vw, 132px)/0.92 var(--display); color: #fff; text-shadow: 0 3px 30px rgba(0,0,0,0.6); }
h1.lock i { display: block; font: 400 clamp(20px, 2.3vw, 32px)/1 var(--display); font-style: normal; color: #ff8a4c; margin-top: 12px; text-shadow: 0 2px 14px rgba(0,0,0,0.85); }
@media (min-width: 1800px) { h1.lock b { font-size: 150px; } }
@media (max-width: 980px) {
  .page-hero.has-est .wrap { grid-template-columns: 1fr; gap: 84px; padding-top: var(--s4); padding-bottom: var(--s5); }
  h1.lock small { font-size: 16px; }
  h1.lock b { font-size: clamp(44px, 14vw, 92px); }
  .page-hero.has-est .hero-call .btn { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .page-hero.has-est .wrap { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; padding-top: var(--s3); }
  h1.lock b { font-size: 44px; }
}

/* Accessibility */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: #fff; color: #000; padding: 12px 18px; border-radius: 8px; font: 600 17px/1 var(--body); text-decoration: none; border: 3px solid var(--orange); }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.foot-help { margin-top: var(--s4); font-size: 16px; color: var(--on-dark); max-width: none; }
.foot-help a { color: #fff; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* Conversion pass (2026-10-04) */
#estimator, #pw-estimator-widget, #quote { scroll-margin-top: 112px; }
.hdr-callbtn { display: none; }
.end-step { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.end-step .lead { font-size: 21px; color: var(--ink); max-width: 44ch; }
.end-step-band { padding: var(--s5) 0; }
.est-note { text-align: left; }
@media (max-width: 980px) {
  /* buttons in a hero that has no estimator card must stay visible on phones */
  .page-hero:not(.has-est) .hero-call .btn { display: inline-flex; }
  .page-hero:not(.has-est) .hero-call { gap: 12px; }
}
@media (max-width: 640px) {
  .hdr-callbtn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 48px; padding: 3px 16px 0; background: var(--orange); color: #000; border: 2px solid #000; border-radius: var(--radius); font: 400 17px var(--display); text-decoration: none; flex: none; }
  .hdr-callbtn svg { width: 18px; height: 18px; fill: none; stroke: #000; stroke-width: 2.2; stroke-linejoin: round; margin-top: -3px; }
  .hdr-menu-btn { margin-left: 0; }
  .hdr.scrolled .hdr-callbtn { height: 42px; }
  .hdr-nav.open .hdr-text { background: #171a1e; border: 2px solid #59616a; justify-content: center; margin-top: 8px; border-radius: 12px; }
}
@media (max-width: 380px) {
  .hdr-bar { gap: 8px; padding: 0 12px; }
  .hdr-brand img { height: 44px; }
  .hdr-callbtn { padding: 3px 12px 0; font-size: 16px; gap: 6px; }
  .hdr-menu-btn { padding: 3px 12px 0; font-size: 16px; }
}

/* Nitpick pass (2026-10-04) */
/* Town names scale to the longest word (--L) so no name is ever split inside a word */
h1.lock b { --colw: min(41vw, 600px); font-size: min(132px, calc(var(--colw) / (var(--L, 7) * 0.78))); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (min-width: 1800px) { h1.lock b { --colw: 720px; font-size: min(150px, calc(var(--colw) / (var(--L, 7) * 0.78))); } }
@media (max-width: 980px) { h1.lock b { --colw: 88vw; font-size: min(92px, calc(var(--colw) / (var(--L, 7) * 0.78))); } }
@media (max-height: 520px) and (orientation: landscape) { h1.lock b { --colw: 40vw; font-size: min(44px, calc(var(--colw) / (var(--L, 7) * 0.78))); } }
/* The contact page is the estimator, so the phone bar there would only point at itself */
body.contact .bar { display: none; }
@media (max-width: 980px) { body.contact { padding-bottom: 0; } }
/* Buttons never wrap their label onto two lines */
.btn { white-space: nowrap; }
@media (max-width: 420px) { .btn { font-size: 16px; padding-left: 18px; padding-right: 18px; } }
@media (max-width: 380px) { .btn { white-space: normal; text-align: center; } }
.ticks.no li { color: #8b939b; }
.ticks.no li::before { content: "\00d7"; background: none; transform: none; width: auto; height: auto; top: -0.12em; left: 4px; font: 700 22px/1 Barlow, sans-serif; color: #8b939b; }
.pick-n { font: 500 15px/1.2 Barlow, sans-serif; text-transform: none; letter-spacing: 0; opacity: 0.75; margin-left: 6px; }
/* Commercial headline stays clear of the lit sign in the photo */
@media (min-width: 981px) { body.commercial .page-hero h1 { max-width: 9.5em; } body.commercial .page-hero .lead { max-width: 30em; } }

/* Phone number back in the header (owner, 2026-10-04): top right, plain text face, same size as the menu */
.hdr-phone { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-left: auto; font: 600 18px/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #fff; text-decoration: none; white-space: nowrap; padding: 12px 4px; }
.hdr-phone svg { width: 17px; height: 17px; fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linejoin: round; }
.hdr-phone:hover, .hdr-phone:focus-visible { color: var(--orange); }
.hdr-phone + .hdr-cta { margin-left: 0; }
@media (max-width: 1320px) { .hdr-phone { display: inline-flex; font-size: 17px; } }
@media (max-width: 1180px) { .hdr-phone { display: none; } .hdr-phone + .hdr-cta { margin-left: auto; } }
.hdr.scrolled .hdr-phone { display: none; }
.rating a b { font-weight: 700; }
.hdr-sub.hdr-sub-wide { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .hdr-sub.hdr-sub-wide { min-width: 0; grid-template-columns: 1fr; } }

/* footer credit */
.legal .powered { margin-left: auto; }
.legal .powered a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 640px) { .legal .powered { margin-left: 0; flex-basis: 100%; } }

/* Web design card in the washing footer, and the Web design pages' own footer and switch button (2026-10-10) */
.wd-card { display: flex; align-items: center; gap: 22px; margin-top: var(--s4); padding: 16px 20px; border: 1px solid #2c3136; border-radius: 14px; background: #0c0e10; text-decoration: none; color: var(--on-dark); transition: border-color 0.2s ease, background 0.2s ease; }
.wd-card:hover, .wd-card:focus-visible { border-color: #12cdb8; background: #0f1416; }
.wd-card img { height: 34px; width: auto; flex: none; }
.wd-card-t { font-size: 16px; line-height: 1.4; flex: 1; }
.wd-card-b { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 400 15px/1 var(--display); color: #0b0d0e; background: #12cdb8; padding: 12px 14px 10px; border-radius: 10px; white-space: nowrap; }
.wd-card-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: -2px; }
@media (max-width: 760px) { .wd-card { flex-direction: column; align-items: flex-start; gap: 12px; } .wd-card img { height: 28px; } }
.foot-web .foot { grid-template-columns: 1.6fr 1fr 1fr; }
.foot-web .foot img { max-width: 270px; }
.foot-web-line { margin-top: 16px; max-width: 30em; color: var(--on-dark-mute); font-size: 16px; }
@media (max-width: 980px) { .foot-web .foot { grid-template-columns: 1fr 1fr; } .foot-web .foot > div:first-child { grid-column: 1 / -1; } }
.switch-site { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; background: rgba(12,14,16,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 8px 24px rgba(0,0,0,0.45); color: #fff; text-decoration: none; font: 600 15px/1.15 var(--body); transition: border-color 0.2s ease, transform 0.2s ease; }
.switch-site:hover, .switch-site:focus-visible { border-color: #f16823; transform: translateY(-2px); }
.switch-site svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #f16823; fill: none; stroke: #000; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.switch-site span { display: grid; } .switch-site small { font: 400 11.5px/1.1 var(--body); color: #b9c0c7; letter-spacing: 0.02em; }
@media (max-width: 980px) { .switch-site { left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 7px 13px 7px 8px; font-size: 14px; } .switch-site svg { width: 26px; height: 26px; padding: 5px; } }
@media (max-height: 520px) and (orientation: landscape) { .switch-site { bottom: calc(62px + env(safe-area-inset-bottom)); } .switch-site small { display: none; } }
@media print { .switch-site { display: none; } }
@media (max-width: 520px) { .foot-web .foot { grid-template-columns: 1fr; } }

/* ===================== From the Mobbin suggestions (drafted 2026-10-17, live in UPDATE-7, 2026-10-21) ===================== */
/* [D1] the estimator card: a question counter, the progress bar, his own job photos as the choices */
.q-count { font: 600 13px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; max-width: none; }
.ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ptiles .tile label { flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; overflow: hidden; font: 600 16px/1.15 var(--body); }
.ptiles .q-photo, .ptiles .q-icon { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wash); border-bottom: 2px solid var(--wash-line); }
.ptiles .q-icon { display: grid; place-items: center; }
.ptiles .q-icon svg { width: 40px; height: 40px; }
.ptiles .tile label > span:last-child { display: flex; align-items: center; min-height: 46px; padding: 8px 10px 7px; }
.ptiles .tile input:checked + label .q-photo, .ptiles .tile input:checked + label .q-icon { border-bottom-color: var(--ink); }
.ptiles .tile input:checked + label::after { content: ""; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; border: 2px solid #000; }
.q-nav { display: flex; gap: 12px; }
.q-nav .btn { flex: 1; }
.q-err { color: #b0400e; font: 600 16px/1.3 var(--body); margin: 14px 0 0; max-width: none; }
@media (max-width: 640px) {
  .ptiles .q-photo, .ptiles .q-icon { aspect-ratio: 1 / 1; }
  .ptiles .tile label { font-size: 15px; }
  .ptiles .tile label > span:last-child { padding: 7px 8px 6px; min-height: 44px; }
  .ptiles .tile input:checked + label::after { width: 24px; height: 24px; top: 6px; right: 6px; background-size: 15px; }
}
@media (max-width: 420px) { .ptiles { gap: 8px; } .ptiles .tile label { font-size: 14px; } }
@media (max-width: 360px) { .ptiles .tile label { font-size: 13px; } .ptiles .tile label > span:last-child { padding: 6px 6px 5px; } }

/* [D2][D3] rating band beside the client logos */
.rate-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; }
.rate { display: flex; align-items: center; gap: 18px; padding-right: var(--s4); border-right: 2px solid var(--wash-line); color: var(--ink); text-decoration: none; min-height: 44px; }
.rate-n { font: 400 clamp(64px, 6.4vw, 96px)/0.85 var(--display); color: var(--ink); padding-top: 8px; }
.rate-t { display: grid; gap: 6px; }
.rate-t .stars { font-size: 24px; }
.rate-t b { font: 600 18px/1.2 var(--body); color: var(--ink); }
.rate-t small { font: 500 16px/1.2 var(--body); color: var(--mute); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.rate:hover small, .rate:focus-visible small { color: var(--ink); }
@media (max-width: 1180px) { .rate-card { grid-template-columns: 1fr; gap: var(--s3); } .rate { border-right: 0; padding-right: 0; padding-bottom: var(--s3); border-bottom: 2px solid var(--wash-line); } }

/* [K3] the featured review beside a photo of the same kind of job */
.rev-grid.k3 { grid-template-columns: 1fr; }
.rev-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; border: var(--edge); border-radius: 14px; overflow: hidden; box-shadow: var(--drop); background: var(--orange); }
.rev-feature .rev-big { border: 0; border-radius: 0; box-shadow: none; }
.rev-photo { margin: 0; position: relative; min-height: 360px; border-right: var(--edge); }
.rev-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rev-photo .tag { top: 18px; }
.rev-photo figcaption small { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; background: rgba(0, 0, 0, 0.78); color: #fff; font: 500 14px/1.3 var(--body); padding: 6px 10px; border-radius: 8px; }
.rev-grid.k3 .rev-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .rev-feature { grid-template-columns: 1fr; }
  .rev-photo { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: var(--edge); }
  .rev-grid.k3 .rev-small { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 980px) { .rev-grid.k3 .rev-small { grid-template-columns: 1fr 1fr; } .rev-grid.k3 .rev-small article:last-child { grid-column: 1 / -1; } }
/* ===================== end of the Mobbin suggestions ===================== */

/* generated cartoon icons for the estimator choices (illustrations) */
.ptiles .q-photo.q-art { object-fit: contain; padding: 8%; background: #fff; }

/* 10c (his pick, 2026-10-29: "3 plz"): the menu's phone number was the only thing in the bar in the body text face ("just
   a different font than anything else"). It is now a Call button in the menu's own face, beside the price button, like
   the pair in the price band. Computer widths only, as before; phones keep their Call button; hidden in the glass bar. */
.hdr .hdr-phone { min-height: 48px; padding: 3px 18px 0; font: 400 16.5px/1 var(--display); letter-spacing: 0; margin-left: auto; margin-right: 14px; }
.hdr .hdr-phone + .hdr-cta { margin-left: 0; }
@media (max-width: 1320px) { .hdr .hdr-phone { font-size: 15.5px; padding: 3px 14px 0; margin-right: 10px; } }

/* 10d test (his note 2026-10-29: "turn those into sliders to show the before-and-afters. Seeing the afters isn't that
   impressive if they didn't know how dirty it was"): Our work is before/after sliders (the DRAFT 3 slider, photos lined up
   by geometry only). Pairs shot from two different spots (fence, farmhouse) cannot line up, so they sit side by side. */
.ba { margin: 0; position: relative; }
.ba-frame { margin-inline: auto; position: relative; aspect-ratio: var(--ar, 4 / 3); max-height: 82vh; overflow: hidden; border: 3px solid var(--paper); border-radius: 14px; background: #111; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba .tag { top: 18px; left: 14px; z-index: 2; }
.ba .tag.after { left: auto; right: 14px; }
.ba-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(var(--pos, 50%)); pointer-events: none; }   /* moved, never re-laid out */
.ba-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.ba-knob { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--orange); border: 3px solid #000; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.ba-knob svg { width: 24px; height: 24px; fill: none; stroke: #000; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ba input[type=range] { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba:has(input:focus-visible) .ba-knob { outline: 3px solid #fff; outline-offset: 3px; }
.ba-hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0, 0, 0, .66); color: #fff; font: 600 13px/1 var(--body, sans-serif); padding: 7px 12px; border-radius: 999px; pointer-events: none; transition: opacity .3s; }
.ba.touched .ba-hint { opacity: 0; }
.ba figcaption, .ba-two figcaption { font: 400 16px/1 var(--display); color: var(--paper); margin-top: 12px; }
.work-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); margin-top: var(--s3); }
.work-ba .ba { max-width: none; width: 100%; }
.ba-two { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-two > div { position: relative; aspect-ratio: 2 / 3; }
.ba-two img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 3px solid var(--paper); border-radius: 12px; background: #111; }
.ba-two .tag { top: 14px; left: 10px; z-index: 2; }
.ba-two figcaption { grid-column: 1 / -1; margin-top: 4px; }
[data-theme="dark"] .ba-frame, [data-theme="dark"] .ba-two img { border-color: var(--ink); }
[data-theme="dark"] .ba figcaption, [data-theme="dark"] .ba-two figcaption { color: var(--ink); }
@media (max-width: 640px) {
  .ba-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .ba .tag { top: 12px; left: 10px; } .ba .tag.after { right: 10px; }
  .work-ba { grid-template-columns: minmax(0, 1fr); }
}

/* 10d (his note: "Animate the sliders so the sliders go back and forth as they scroll through it. Make the button to slide
   it blink a little bit, or bungee back and forth left and right, so they know that they can move it"). The divide sweeps
   with the scroll while the slider passes (the browser runs it, no script per frame); the knob gives a small springy
   left-right nudge with a soft ring every few seconds. Both stop at the first touch. Reduced motion: none of it. */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ba-knob::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ba:not(.touched) .ba-frame { animation: ba-sweep linear both; animation-duration: auto; animation-timeline: view(); animation-range: entry 20% exit 80%; }
  }
  .ba:not(.touched) .ba-knob { animation: ba-nudge 2.6s cubic-bezier(.3, 0, .2, 1) 1.2s infinite; }
  .ba:not(.touched) .ba-knob::after { animation: ba-ring 2.6s ease-out 1.2s infinite; }
}
@keyframes ba-sweep { 0% { --pos: 78%; } 35% { --pos: 24%; } 70% { --pos: 66%; } 100% { --pos: 40%; } }
@keyframes ba-nudge {
  0%, 52%, 100% { transform: translateX(0); }
  8% { transform: translateX(-9px); } 18% { transform: translateX(8px); } 27% { transform: translateX(-5px); }
  35% { transform: translateX(3px); } 43% { transform: translateX(-1px); }
}
@keyframes ba-ring { 0% { opacity: .9; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.7); } }

/* Dark theme for the Driftless site. Loaded after site.css on pages with <html data-theme="dark">.
   Same decal system; surfaces are black and charcoal, outlines are grey, and a few blocks
   (the estimator, the reviews band, the closing band) flip back to the light tokens so the
   page never becomes plain black with text on it. */
:root[data-theme="dark"] {
  --ink: #f3f5f7;
  --paper: #171a1e;
  --wash: #0e1012;
  --wash-line: #3b4148;
  --text: #cfd5da;
  --mute: #98a1a9;
  --orange-soft: #3a2113;
  --edge: 2px solid #59616a;
  --drop: 6px 6px 0 #2b3036;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #000; }

/* blocks that flip back to light */
[data-theme="dark"] .est,
[data-theme="dark"] .flip,
[data-theme="dark"] .closing {
  --ink: #000; --paper: #fff; --wash: #eceff2; --wash-line: #cfd5db; --text: #23272b; --mute: #5b636b;
  --orange-soft: #ffe7d9; --edge: 2.5px solid #000; --drop: 6px 6px 0 #000;
  color: var(--text);
}
[data-theme="dark"] .est { box-shadow: 10px 10px 0 var(--orange); border-color: #000; }
[data-theme="dark"] .flip .stars { -webkit-text-stroke: 0.6px #000; }

[data-theme="dark"] .strip { background: var(--orange); color: #000; }
[data-theme="dark"] .strip a { color: #000; }
[data-theme="dark"] .top { background: #000; border-bottom-color: #2b3036; }
[data-theme="dark"] .on-ink { background: var(--wash); color: var(--text); }
[data-theme="dark"] .on-ink .btn { border-color: #000; }
[data-theme="dark"] footer { background: #000; border-top: 2px solid #2b3036; }

[data-theme="dark"] .btn { box-shadow: 4px 4px 0 var(--ink); }
[data-theme="dark"] .btn:hover { box-shadow: 6px 6px 0 var(--ink); }
[data-theme="dark"] .btn-orange { color: #000; border-color: #000; }
[data-theme="dark"] .btn-white { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--orange); }
[data-theme="dark"] .btn-white:hover { box-shadow: 6px 6px 0 var(--orange); }
[data-theme="dark"] .est .btn, [data-theme="dark"] .closing .btn, [data-theme="dark"] .flip .btn { box-shadow: 4px 4px 0 #000; border-color: #000; }
[data-theme="dark"] .closing .btn-ink { box-shadow: 4px 4px 0 #fff; }
[data-theme="dark"] .flip .btn-white { background: #fff; color: #000; }
[data-theme="dark"] .closing .btn-white { background: #fff; color: #000; }
[data-theme="dark"] .stars { -webkit-text-stroke: 0; }

[data-theme="dark"] .logo-row div { background: #fff; border-color: #fff; }
[data-theme="dark"] .logo-row div.dark { background: #000; border-color: #3b4148; }
[data-theme="dark"] .svc-icon { border-color: #000; }
[data-theme="dark"] .svc-icon svg { stroke: #000; }
[data-theme="dark"] .svc .fact { border-top-color: #2b3036; }
[data-theme="dark"] .tag { background: #fff; color: #000; border-color: #000; }
[data-theme="dark"] .tag.after { background: var(--orange); }
[data-theme="dark"] .pair img, [data-theme="dark"] .work img, [data-theme="dark"] #map { border-color: var(--ink); }
[data-theme="dark"] .work figcaption, [data-theme="dark"] .towns li { color: var(--ink); }
[data-theme="dark"] .nav.open a { border-bottom-color: #2b3036; }
[data-theme="dark"] #map .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.95) contrast(0.9); }

/* Hero scene: dusk house, drifting mist, everything reacts to scroll through --sy (0 to 1) */
[data-theme="dark"] .hero { background: #05070a; --sy: 0; }
[data-theme="dark"] .hero::before { display: none; }
.scene-bg {
  position: absolute; inset: -6% -4%;
  background: url("../assets/hero/poster-f1-1920.webp") center 38% / cover no-repeat;
  filter: brightness(1.5) contrast(1.05);
  transform: scale(calc(1.04 + var(--sy) * 0.14)) translateY(calc(var(--sy) * 5%));
  transform-origin: 60% 60%; will-change: transform;
}
.scene-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.36) 46%, rgba(0,0,0,0) 100%),
    linear-gradient(0deg, #000 2%, rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%);
}
.fogs { position: absolute; inset: 0; overflow: hidden; transform: translateY(calc(var(--sy) * -14%)); opacity: calc(1 - var(--sy) * 0.7); will-change: transform, opacity; }
.fog { position: absolute; left: -60%; width: 220%; will-change: transform; }
.fog-a {
  bottom: -8%; height: 62%;
  background:
    radial-gradient(closest-side, rgba(196,212,228,0.36), rgba(196,212,228,0) 100%) 6% 70% / 46% 80% no-repeat,
    radial-gradient(closest-side, rgba(196,212,228,0.3), rgba(196,212,228,0) 100%) 52% 90% / 52% 90% no-repeat,
    radial-gradient(closest-side, rgba(196,212,228,0.34), rgba(196,212,228,0) 100%) 96% 60% / 44% 76% no-repeat;
  animation: drift-a 58s linear infinite alternate;
}
.fog-b {
  bottom: 12%; height: 48%;
  background:
    radial-gradient(closest-side, rgba(214,226,238,0.22), rgba(214,226,238,0) 100%) 22% 50% / 40% 90% no-repeat,
    radial-gradient(closest-side, rgba(214,226,238,0.18), rgba(214,226,238,0) 100%) 74% 40% / 48% 100% no-repeat;
  animation: drift-b 82s linear infinite alternate;
}
.fog-c {
  bottom: -18%; height: 46%;
  background:
    radial-gradient(closest-side, rgba(241,104,35,0.2), rgba(241,104,35,0) 100%) 34% 60% / 36% 90% no-repeat,
    radial-gradient(closest-side, rgba(226,234,242,0.3), rgba(226,234,242,0) 100%) 70% 80% / 56% 100% no-repeat;
  animation: drift-a 44s linear infinite alternate-reverse;
}
@keyframes drift-a { from { transform: translateX(0); } to { transform: translateX(24%); } }
@keyframes drift-b { from { transform: translateX(22%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .fog { animation: none; } }

[data-theme="dark"] .hero .wrap { padding-top: 132px; padding-bottom: 168px; }
[data-theme="dark"] .hero-copy { transform: translateY(calc(var(--sy) * -46px)); }
[data-theme="dark"] .hero-copy p { color: var(--ink); }
[data-theme="dark"] .hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
[data-theme="dark"] .rating a { color: var(--ink); }

@media (max-width: 980px) {
  [data-theme="dark"] .hero .wrap { padding-top: var(--s5); padding-bottom: 120px; gap: 92px; }
  .scene-shade { background: linear-gradient(0deg, #000 4%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.72) 100%); }
  .scene-bg { background-position: 62% 30%; }
  [data-theme="dark"] .est { box-shadow: 6px 6px 0 var(--orange); }
  [data-theme="dark"] .bar { background: #000; border-top-color: #2b3036; }
}

/* Scroll-scrubbed hero clip. js/site.js draws frames from assets/hero/ onto the canvas as the
   visitor scrolls. On wide screens the hero stays pinned for one extra screen while the camera
   moves; on phones the frames follow the normal scroll through the hero. */
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s; }
.hero.scrub.ready .scene-canvas { opacity: 1; }
.hero-pin { position: relative; overflow: hidden; }
@media (min-width: 981px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html.fx .hero.scrub { height: 200vh; overflow: visible; margin-top: -96px; }
  html.fx .hero.scrub .hero-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
  html.fx .hero.scrub .hero-pin > .wrap { width: 100%; padding-top: 120px; padding-bottom: 110px; }
  html.fx .hero.scrub .hero-copy { transform: none; }
}

/* With a real clip in place: the clip's first frame is the still, the code-made mist is not needed,
   and on wide screens the estimator arrives as the camera pushes in (--p runs 0 to 1 while pinned). */
.hero.scrub .scene-bg { background: none; filter: none; transform: none; inset: 0; }
/* the first paint is a real <img> (picture) so each screen fetches the width it needs, up to 5120 (2026-10-20) */
.scene-bg picture, .scene-bg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-bg img { object-fit: cover; object-position: center; }
.hero.scrub .fogs { display: none; }
.hero.scrub .scene-shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.66) 32%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.06) 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 24%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 18%);
}
.hero.scrub .rating { flex-basis: 100%; }
[data-theme="dark"] .hero.scrub h1 { text-shadow: 0 2px 24px rgba(0,0,0,0.75); }
[data-theme="dark"] .hero.scrub .hero-copy p { text-shadow: 0 1px 12px rgba(0,0,0,0.8); }
@media (min-width: 981px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html.fx .hero.scrub { --p: 0; --t: clamp(0, calc((var(--p) - 0.3) * 3.4), 1); }
  html.fx .hero.scrub .est-holder { opacity: var(--t); transform: translateX(calc((1 - var(--t)) * 90px)); }
}
@media (max-width: 980px) {
  .hero.scrub .scene-bg img { object-position: center top; }
  .hero.scrub .scene-canvas, .hero.scrub .scene-bg { height: calc(100vw * 16 / 9); max-height: 100%; }
  .hero.scrub .scene-shade { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 150px), linear-gradient(0deg, #000 0, #000 calc(100% - 100vw * 16 / 9), rgba(0,0,0,0) calc(100% - 100vw * 16 / 9 + 240px)); }
  [data-theme="dark"] .hero.scrub .wrap { padding-top: 22px; gap: 176px; padding-bottom: 110px; }
  .hero.scrub .hero-copy p, .hero.scrub .hero-call { display: none; }
}

[data-theme="dark"] .steps li::before { border-color: #000; }
[data-theme="dark"] .contact-list li { border-bottom-color: #2b3036; }
[data-theme="dark"] .menu-btn { box-shadow: 3px 3px 0 var(--orange); }
@media (max-height: 520px) and (orientation: landscape) {
  [data-theme="dark"] .hero.scrub .wrap { padding-top: 20px; gap: 40px; grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .hero.scrub .scene-canvas, .hero.scrub .scene-bg { height: 100%; max-height: none; }
  .hero.scrub .scene-bg img { object-position: center; }
  .hero.scrub .scene-shade { background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 30%); }
}

[data-theme="dark"] .on-ink h2, [data-theme="dark"] .on-ink h3 { color: var(--ink); }
[data-theme="dark"] .on-ink .towns h3 { color: var(--orange); }

/* Sharp on 1x screens (2026-10-20): a 0.6 px outline cannot be drawn on a 1x screen and turns into a grey fuzz around the
   stars (his 45-inch ran at 1x). Keep the outline only where there are at least 2 screen pixels per CSS pixel. */
@media (max-resolution: 1.99dppx) { .stars, [data-theme="dark"] .flip .stars { -webkit-text-stroke: 0; } }