/* ============================================================
   ONTARIO TINTING — design system
   Palette drawn from the OT shield logo:
   warm charcoal, sun orange, aged cream.
   ============================================================ */

:root {
  /* color */
  --ink:        #17130f;   /* logo charcoal */
  --ink-2:      #211b15;   /* raised dark surface */
  --ink-3:      #322a20;   /* dark borders / rules */
  --cream:      #f4efe6;   /* page background */
  --cream-2:    #ebe4d4;   /* alternating band */
  --line:       #d9cfba;   /* hairlines on light */
  --sun:        #ee8422;   /* logo orange — the accent */
  --sun-deep:   #c05e12;   /* hover / depth */
  --stone:      #6c6154;   /* secondary text on light */
  --sand:       #a89a83;   /* secondary text on dark */
  --text:       #1d1812;   /* body text on light */
  --white:      #fdfcf9;

  /* type */
  --display: "Archivo", "Arial Black", sans-serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;

  /* rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --max: 76rem;
  --radius: 4px;

  --header-h: 4.5rem;
  --shadow-lift: 0 18px 40px -18px rgba(23, 19, 15, .35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; overflow-x: clip; }
/* touch screens: vertical scrolling and pinch-zoom only — the page itself
   can never be panned sideways (scroll containers below override this) */
body { touch-action: pan-y pinch-zoom; }
.rev-track, .gallery-grid { touch-action: auto; }
/* freeze the page behind the open mobile menu */
body.nav-open { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--sun-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* anchor jumps (e.g. contact.html#quote) land below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

::selection { background: var(--sun); color: var(--ink); }

/* ---------- typography ---------- */
.display {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.6rem, 7.2vw, 5.5rem); }
h2.display { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3.display { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.05; }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.55;
  color: var(--stone);
  max-width: 34em;
}
.dark .lede, .lede.on-dark { color: var(--sand); }

.spec {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sun-deep);
}
.dark .spec, .spec.on-dark { color: var(--sun); }

.measure { max-width: 38em; }
.muted { color: var(--stone); }
.dark .muted { color: var(--sand); }

/* ---------- layout scaffolding ---------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.dark {
  background: var(--ink);
  color: var(--cream);
}
.dark-2 { background: var(--ink-2); color: var(--cream); }
.band { background: var(--cream-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--display);
  font-stretch: 110%;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: var(--sun-deep); color: var(--white); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.dark .btn-ghost, .btn-ghost.on-dark { border-color: var(--cream); color: var(--cream); }
.dark .btn-ghost:hover, .btn-ghost.on-dark:hover { background: var(--cream); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.link-more {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sun-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: .15rem;
}
.link-more:hover { color: var(--ink); }
.dark .link-more { color: var(--sun); }
.dark .link-more:hover { color: var(--cream); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-3);
  color: var(--cream);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(100% - (var(--gutter) * 2), 88rem);
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
}
.brand img { height: 2.6rem; width: auto; }
.brand-name {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-name small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--sun);
  margin-top: .3rem;
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--sand);
  transition: color .15s ease;
  padding: .4rem 0;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); }
.nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--sun); }

.nav-group { position: relative; }
.nav-group > button {
  display: flex; align-items: center; gap: .35rem;
  background: none; border: 0; color: var(--sand);
  font-size: .92rem; font-weight: 500; padding: .4rem 0;
}
.nav-group > button:hover { color: var(--cream); }
.nav-group > button::after {
  content: ""; width: .45em; height: .45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
/* the hover dropdown exists ONLY on wide screens — on phones the services
   list lives inside the drawer with no positioning or animation at all,
   so tapping/focusing a link can never move it */
@media (min-width: 901px) {
  /* invisible bridge so the dropdown survives the gap between button and panel */
  .nav-group::after {
    content: ""; position: absolute;
    left: -.75rem; right: -.75rem; top: 100%; height: 1.1rem;
  }
  .nav-drop {
    position: absolute; top: calc(100% + .9rem); left: 50%;
    min-width: 15rem;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 6px;
    padding: .5rem;
    box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    transition: opacity .16s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .nav-group:hover .nav-drop,
  .nav-group:focus-within .nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .16s ease, transform .18s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop { transition: none; }
}
.nav-drop a {
  display: block; padding: .6rem .8rem; border-radius: 4px;
}
.nav-drop a:hover { background: var(--ink-3); }

.header-phone {
  display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; line-height: 1.15;
}
.header-phone .spec { font-size: .6rem; color: var(--sand); }
.header-phone strong {
  font-family: var(--display); font-stretch: 110%; font-weight: 800;
  font-size: 1.05rem; color: var(--cream); white-space: nowrap;
}
.header-phone:hover strong { color: var(--sun); }
.site-header .btn { padding: .7rem 1.2rem; font-size: .8rem; }

.nav-toggle {
  display: none;
  background: none; border: 0; color: var(--cream);
  width: 2.6rem; height: 2.6rem;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  width: 1.5rem; height: 2px; background: currentColor;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-3);
    padding: .8rem var(--gutter) 1.6rem;
    display: none;
    /* with three dropdowns the drawer can be taller than a small phone:
       it scrolls inside itself (the page behind is pinned by main.js) */
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  body.nav-open .nav { display: flex; }
  .nav a, .nav-group > button { padding: .85rem 0; font-size: 1.05rem; width: 100%; text-align: left; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sun); padding-left: .8rem; }
  .nav-group .nav-drop {
    position: static; transform: none; display: block;
    opacity: 1; visibility: visible; pointer-events: auto; transition: none;
    background: none; border: 0; box-shadow: none; padding: 0 0 0 1rem; min-width: 0;
  }
  .nav-group::after { display: none; }
  .nav-group > button::after { margin-left: auto; }
  .nav-toggle { display: block; }
  .header-phone { display: none; }
  .site-header .btn { margin-left: auto; }
}

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  min-height: max(92svh, 42rem);
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: clip;
  background: var(--ink);
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center; }
/* the "raw glass" layer: same image, harsh & washed out.
   GSAP wipes it away on load = the film going on. */
.hero-raw { z-index: 2; filter: brightness(1.55) saturate(.55) contrast(.82); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(10deg, rgba(23,19,15,.92) 8%, rgba(23,19,15,.42) 46%, rgba(23,19,15,.05) 78%),
    /* deeper and longer at the top so the sky behind the kicker is dark enough
       to read on (was .55 fading out by 26%; Jordan's pick, Oct 7 2026) */
    linear-gradient(180deg, rgba(23,19,15,.8), rgba(23,19,15,.5) 30%, transparent 58%);
}
.hero-inner {
  position: relative; z-index: 4;
  padding-block: calc(var(--header-h) + 3rem) clamp(6rem, 11vh, 8rem);
  display: grid; gap: 1.6rem;
}
.hero-inner .lede { color: #d8cfc0; }
/* The kicker sits on open sky: in orange it measured about 1.6:1 at every desktop
   size (Oct 7 2026, standard 71). Jordan picked cream type (the orange dash stays)
   on the deeper top scrim above, plus a soft halo: about 9.7:1 at 1280x800. */
.hero .hero-kicker {
  display: flex; align-items: center; gap: .8rem;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(23,19,15,.9), 0 0 10px rgba(23,19,15,.85), 0 0 22px rgba(23,19,15,.7);
}
.hero-kicker::before {
  content: ""; width: 2.6rem; height: 2px; background: var(--sun);
}
.hero h1 span { display: block; }
.hero h1 .h1-accent { color: var(--sun); }

/* spec ticker pinned to hero base */
.spec-strip {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  border-top: 1px solid rgba(244,239,230,.16);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  padding-block: .9rem;
}
.spec-strip ul {
  display: flex; gap: 3.5rem; width: max-content;
  animation: ticker 36s linear infinite;
}
.spec-strip li {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sand); white-space: nowrap;
  display: flex; align-items: center; gap: .8rem;
}
.spec-strip li::before { content: "✦"; color: var(--sun); font-size: .65rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .spec-strip ul { animation: none; flex-wrap: wrap; width: auto; gap: .5rem 1.4rem; }
  .spec-strip li:nth-child(n+8) { display: none; }
}

/* ---------- service cards ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.4rem;
}
.svc-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: clip;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.svc-card figure { aspect-ratio: 4 / 3; overflow: clip; min-height: 0; flex: none; }
.svc-card figure img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s ease;
}
.svc-card:hover figure img { transform: scale(1.045); }
.svc-body { padding: 1.4rem 1.4rem 1.6rem; display: grid; gap: .65rem; }
.svc-body .display { font-size: 1.28rem; font-stretch: 106%; overflow-wrap: anywhere; }
.svc-body .spec { font-size: .68rem; }
.svc-body p { font-size: .95rem; color: var(--stone); }
.svc-body .link-more { justify-self: start; margin-top: .4rem; }

/* ---------- before / after slider (signature) ---------- */
.ba {
  position: relative;
  border-radius: 8px;
  overflow: clip;
  aspect-ratio: 16 / 9;
  user-select: none;
  -webkit-user-select: none;
  /* pan-y keeps normal page scrolling on phones; horizontal drags move the handle */
  touch-action: pan-y;
  background: var(--ink);
  cursor: ew-resize;
}
.ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.ba-before {
  filter: brightness(1.5) saturate(.6) contrast(.85);
  clip-path: inset(0 calc(100% - var(--ba-x, 50%)) 0 0);
}
.ba-label {
  position: absolute; top: 1rem; z-index: 3;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream);
  background: rgba(23,19,15,.7); padding: .45rem .7rem; border-radius: 3px;
  pointer-events: none;
}
.ba-label.before { left: 1rem; }
.ba-label.after { right: 1rem; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--ba-x, 50%);
  width: 2px; background: var(--cream);
  pointer-events: none;
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
  box-shadow: 0 6px 18px rgba(23,19,15,.45), 0 0 0 6px rgba(238,132,34,.25);
}
.ba-readout {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  margin-top: 1.4rem;
}
.ba-readout div { display: grid; gap: .15rem; }
.ba-readout output {
  font-family: var(--display); font-stretch: 115%; font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; color: var(--ink);
}
.dark .ba-readout output { color: var(--cream); }
.ba-readout .spec { font-size: .66rem; }

/* ---------- stats band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 2.4rem 1.6rem;
}
.stat { display: grid; gap: .5rem; padding-left: 1.1rem; border-left: 2px solid var(--sun); }
.stat b {
  font-family: var(--display); font-stretch: 118%; font-weight: 900;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1; color: var(--cream);
}
.stat b sup { font-size: .45em; color: var(--sun); }
.stat > span { font-size: .92rem; color: var(--sand); max-width: 16em; }
.stat b span { font: inherit; color: inherit; }

/* ---------- media + copy split ---------- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: center;
}
.split figure { border-radius: 8px; overflow: clip; }
.split figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split .content { display: grid; gap: 1.15rem; justify-items: start; }
.split .content ul { display: grid; gap: .7rem; }
.split .content li { display: flex; gap: .75rem; align-items: baseline; font-size: 1rem; }
.split .content li::before {
  content: "✦"; color: var(--sun-deep); font-size: .8rem; flex: none;
}
.dark .split .content li::before { color: var(--sun); }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.filters button {
  border: 1px solid var(--line); background: var(--white); color: var(--stone);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 999px;
  transition: all .15s ease;
}
.filters button:hover { border-color: var(--sun-deep); color: var(--sun-deep); }
.filters button[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
}
.g-item {
  position: relative; border-radius: 6px; overflow: clip;
  border: 0; padding: 0; background: var(--ink);
  aspect-ratio: 4 / 3; cursor: zoom-in;
}
.g-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease, opacity .3s ease;
}
.g-item:hover img { transform: scale(1.05); opacity: .85; }
.g-item figcaption, .g-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .9rem .7rem;
  /* dark by the time the words start, not only at the very bottom: on the snow
     photos the old fade left "RESIDENTIAL" at 2.8:1 (standards 71, 85; Oct 16 2026) */
  background: linear-gradient(rgba(23,19,15,0), rgba(23,19,15,.86) 1.4rem, rgba(23,19,15,.9));
  color: var(--cream);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: left;
}
.g-item.is-hidden { display: none; }

.lightbox {
  border: 0; padding: 0; background: rgba(23,19,15,.94);
  max-width: 100vw; max-height: 100svh; width: 100vw; height: 100svh;
  display: none; align-items: center; justify-content: center;
}
.lightbox[open] { display: flex; }
.lightbox img { max-width: min(94vw, 70rem); max-height: 82svh; object-fit: contain; border-radius: 4px; }
.lightbox figcaption {
  position: absolute; bottom: 1.6rem; left: 50%; translate: -50% 0;
  color: var(--sand); font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.lightbox .lb-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: var(--ink-2); color: var(--cream);
  border: 1px solid var(--ink-3); border-radius: 999px;
  width: 2.8rem; height: 2.8rem; font-size: 1.15rem; line-height: 1;
}
.lightbox .lb-close:hover { background: var(--sun); color: var(--ink); }

/* ---------- reviews ---------- */
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.rating-badge {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--ink); color: var(--cream);
  border-radius: 6px; padding: .8rem 1.1rem;
  text-decoration: none;
}
.rating-badge b {
  font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1;
}
.rating-badge .stars { color: var(--sun); letter-spacing: .1em; font-size: .85rem; }
.rating-badge small { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
/* review carousel */
.rev-carousel { position: relative; margin-top: 2rem; }
.rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(21rem, 82vw);
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .25rem .25rem 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rev-card {
  scroll-snap-align: start;
  height: 16.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.4rem 1.5rem 1.2rem;
  display: flex; flex-direction: column; gap: .8rem;
  text-align: left; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--sun); }
.rev-card .stars { color: var(--sun-deep); font-size: .8rem; letter-spacing: .12em; flex: none; }
.rev-card blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 1rem;
  line-height: 1.55; color: var(--text);
  flex: 0 1 auto; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
}
.rev-card footer {
  margin-top: auto;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone); flex: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.rev-card footer .rev-open-hint { color: var(--sun-deep); white-space: nowrap; }
.rev-nav { display: flex; gap: .6rem; margin-top: .4rem; }
.rev-nav button {
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 1.05rem; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.rev-nav button:hover { background: var(--ink); color: var(--cream); }

/* review modal — a card grown into its own window */
.rev-modal { position: fixed; inset: 0; z-index: 90; }
.rev-modal[hidden] { display: none; }
.rev-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(23, 19, 15, .78);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.rev-modal-box {
  position: fixed; inset: 0; margin: auto;
  width: min(38rem, 92vw);
  height: fit-content; max-height: 82svh;
  overflow: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 40px 80px -20px rgba(23, 19, 15, .6);
  transform-origin: center;
}
.rev-modal-box .stars { color: var(--sun-deep); font-size: .95rem; letter-spacing: .14em; }
.rev-modal-box blockquote {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem); line-height: 1.65; color: var(--text);
}
.rev-modal-box footer {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone);
}
.rev-modal-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.6rem; height: 2.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cream); color: var(--ink);
  font-size: 1rem; line-height: 1;
}
.rev-modal-close:hover { background: var(--sun); border-color: var(--sun); }

/* ---------- cottage country / ontario map ---------- */
.ontario-map { width: 100%; height: auto; }
.ontario-map .land { fill: var(--ink-2); stroke: var(--ink-3); stroke-width: 1.5; }
.ontario-map .dot { fill: var(--sun); }
.ontario-map .pulse { fill: none; stroke: var(--sun); stroke-width: 1.5; opacity: .8; transform-origin: center; transform-box: fill-box; animation: pulse 2.8s ease-out infinite; }
.ontario-map text { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; fill: var(--sand); text-transform: uppercase; }
.ontario-map .ring {
  fill: none; stroke: var(--sun); stroke-width: 1.5;
  stroke-dasharray: 3 7; stroke-linecap: round; opacity: .55;
}
.ontario-map .ring-label { fill: var(--sun); opacity: .85; font-size: 10.5px; }
.ontario-map .lake { opacity: .45; font-size: 10px; letter-spacing: .22em; }
@keyframes pulse {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ontario-map .pulse { animation: none; opacity: .35; } }

/* ---------- process steps ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; gap: .4rem 2rem;
  grid-template-columns: auto 1fr;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  counter-increment: step;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 1rem; color: var(--sun-deep);
  padding-top: .35rem; min-width: 2.4rem;
}
.step h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }
.step p { grid-column: 2; color: var(--stone); max-width: 44em; }
.step .spec { grid-column: 2; margin-top: .3rem; }

/* ---------- page hero (subpages) ---------- */
.page-hero {
  background: var(--ink); color: var(--cream);
  padding: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem)) 0 clamp(3rem, 7vw, 5rem);
  position: relative; overflow: clip;
}
.page-hero .wrap { display: grid; gap: 1.3rem; position: relative; z-index: 2; }
.page-hero .lede { color: var(--sand); }
.page-hero-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.page-hero-tags span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sand);
  border: 1px solid var(--ink-3); border-radius: 999px; padding: .45rem .85rem;
}
.page-hero::after {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 90%;
  background: radial-gradient(ellipse at center, rgba(238,132,34,.14), transparent 65%);
  pointer-events: none;
}
.page-hero .hero-lines {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.page-hero .hero-lines path {
  fill: none;
  stroke: var(--sun);
  stroke-width: 1;
  opacity: .1;
  stroke-dasharray: 900 460;
  animation: hero-line-drift 30s linear infinite;
  animation-delay: calc(var(--i, 0) * -2.2s);
}
.page-hero .hero-lines path:nth-child(3n) {
  stroke: var(--cream);
  opacity: .065;
}
.page-hero .hero-lines path:nth-child(4n) {
  stroke-width: 1.5;
  opacity: .08;
}
@keyframes hero-line-drift {
  to { stroke-dashoffset: -1360; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero .hero-lines path { animation: none; }
}

/* ---------- warranty cards ---------- */
.warranty-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.warranty {
  border: 1px solid var(--ink-3); border-radius: 8px; padding: 2rem;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  display: grid; gap: .7rem; align-content: start;
}
.warranty b { font-family: var(--display); font-stretch: 115%; font-weight: 900; font-size: 1.9rem; color: var(--sun); text-transform: uppercase; line-height: 1.05; }
.warranty p { color: var(--sand); font-size: .96rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: clip; }
.cta-band .halftone {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.cta-band .wrap {
  position: relative; z-index: 2;
  display: grid; gap: 1.4rem; justify-items: center; text-align: center;
}
.cta-band .display { max-width: 15em; }
.cta-phone {
  font-family: var(--display); font-stretch: 118%; font-weight: 900;
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  color: var(--sun); text-decoration: none; line-height: 1;
}
.cta-phone:hover { color: var(--cream); }

/* ---------- quote embed ---------- */
.quote-embed {
  border: 1px solid var(--line); border-radius: 8px; overflow: clip;
  background: var(--white);
  min-height: 40rem;
}
/* tall enough that the whole TintWiz form shows without its own scrollbar */
.quote-embed iframe { width: 100%; height: 78rem; border: 0; display: block; }
.embed-fallback { padding: 3rem 2rem; display: grid; gap: 1rem; justify-items: start; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); align-items: start; }
.contact-list { display: grid; gap: 1.5rem; }
.contact-list dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: .35rem; }
.contact-list dd { margin: 0; font-size: 1.1rem; }
.contact-list dd a { text-decoration: none; }
.contact-list dd a:hover { color: var(--sun-deep); }
.contact-list .big-tel { font-family: var(--display); font-stretch: 115%; font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--ink-3); }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid .brand img { height: 3.4rem; }
/* The full logo (Dave's own file, Oct 2026) sits on solid black. "lighten" keeps
   whichever is lighter, the logo or the charcoal footer, so its black square melts
   into the footer and only the logo shows. No cut-out, so nothing to fray. */
.footer-grid .footer-logo img { height: 8.5rem; width: auto; mix-blend-mode: lighten; margin-left: -.6rem; }
.footer-col h4 {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sun);
  margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.footer-col a { color: var(--sand); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--cream); }
.footer-col p { color: var(--sand); font-size: .95rem; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: 1px solid var(--ink-3);
  padding-block: 1.4rem 2rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sand);
}
.footer-base a { color: inherit; }

/* ---------- small-screen refinements ---------- */
@media (max-width: 560px) {
  /* the sticky call bar already carries the quote CTA on phones —
     hiding the header button stops the header overflowing the screen */
  .site-header .btn { display: none; }
  .nav-toggle { margin-left: auto; }
  .brand img { height: 2.2rem; }
  .brand-name { font-size: .92rem; }
  .brand-name small { letter-spacing: .18em; }
}
@media (max-width: 700px) {
  /* taller crop gives phones a bigger, easier drag area */
  .ba { aspect-ratio: 3 / 4; }
  /* SVG text scales down with the graphic — bump it so it stays legible */
  .bird-diagram .bd-label { font-size: 24px; }
  .ontario-map text { font-size: 15px; }
  .ontario-map .ring-label { font-size: 14px; }
  .ontario-map .lake { font-size: 13px; }
  /* process steps: number above the text instead of a cramped side column */
  .step { grid-template-columns: 1fr; gap: .35rem; }
  .step::before { min-width: 0; padding-top: 0; }
  .step p, .step .spec { grid-column: 1; }
  /* fit the whole quote form so it never scrolls inside itself */
  .quote-embed iframe { height: 89rem; }
  /* facts strip: keeps its scrolling marquee, but flows below the hero
     content instead of floating over the buttons */
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero-inner { padding-bottom: 2.5rem; }
  .spec-strip { position: static; }
  /* headline breathing room on small screens */
  h1.display { font-size: clamp(2.2rem, 11vw, 3.4rem); }
}

/* ---------- sticky mobile call bar ---------- */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
  padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
  gap: .6rem;
}
.callbar .btn { justify-content: center; padding: .85rem .5rem; font-size: .82rem; }
@media (max-width: 720px) {
  .callbar { display: grid; }
  body { padding-bottom: 4.4rem; }
  /* the call bar sits over the bottom of the open menu: leave room for it so
     the last menu item can always scroll clear of it */
  .nav { padding-bottom: calc(1.6rem + 4.4rem); }
}

/* ---------- reveal defaults (GSAP enhances) ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- icons ---------- */
.icon {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: -.15em; flex: none;
}
.nav-drop a { display: flex; align-items: center; gap: .65rem; }
.nav-drop .icon { width: 1.05rem; height: 1.05rem; color: var(--sun); }
.nc-icon { width: 1.7rem; height: 1.7rem; color: var(--sun-deep); stroke-width: 1.8; }
.dark .nc-icon { color: var(--sun); }

/* hover icon overlay on service cards */
.svc-card figure { position: relative; }
.svc-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.svc-overlay .icon {
  width: 3.2rem; height: 3.2rem; color: var(--sun); stroke-width: 1.6;
  transform: translateY(8px) scale(.92);
  transition: transform .3s ease;
}
.svc-card:hover .svc-overlay { opacity: 1; }
.svc-card:hover .svc-overlay .icon { transform: none; }

/* tilt interaction (note-cards) */
.note-card { position: relative; will-change: transform; }
.note-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(14rem circle at var(--gx, 50%) var(--gy, 50%),
    rgba(238, 132, 34, .18), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.note-card:hover::after { opacity: 1; }

/* ---------- bird film diagram ---------- */
.bird-diagram {
  width: 100%; height: auto; display: block;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 8px;
}
.bird-diagram .bd-frame { fill: none; stroke: var(--ink); stroke-width: 6; }
.bird-diagram .bd-glass { fill: #e9f0f1; }
.bird-diagram .bd-stripes rect { fill: var(--sun); opacity: .55; }
/* Feather Friendly dots (Oct 2026): bold to the bird, faint over the view for people */
.bird-diagram .bd-dots circle { fill: var(--sun); opacity: .8; }
.bird-diagram .bd-dots-faint circle { fill: var(--stone); opacity: .38; }
.bird-diagram .bd-path {
  fill: none; stroke: var(--sun-deep); stroke-width: 2.5;
  stroke-dasharray: 6 7; stroke-linecap: round;
}
.bird-diagram .bd-bird { stroke: var(--ink); fill: none; stroke-width: 1.8; }
.bird-diagram .bd-scene path { fill: none; stroke: var(--stone); stroke-width: 2.5; stroke-linejoin: round; }
.bird-diagram .bd-sun { fill: var(--sun); opacity: .85; }
.bird-diagram .bd-label {
  font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; fill: var(--stone); text-anchor: middle;
}

/* ---------- misc ---------- */
.eyebrow-row { display: flex; align-items: center; gap: .9rem; }
.eyebrow-row::before { content: ""; width: 2.2rem; height: 2px; background: var(--sun); flex: none; }
.grid-2 { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.note-card {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--sun);
  border-radius: 6px; padding: 1.4rem 1.5rem; display: grid; gap: .5rem;
}
.note-card h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
.note-card p { font-size: .95rem; color: var(--stone); }
.dark .note-card { background: var(--ink-2); border-color: var(--ink-3); border-left-color: var(--sun); }
.dark .note-card p { color: var(--sand); }

.img-frame { border-radius: 8px; overflow: clip; }
.img-frame img { width: 100%; }
figure.captioned figcaption {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone); padding-top: .7rem;
}
.dark figure.captioned figcaption { color: var(--sand); }

/* ============================================================
   Added Oct 2026: town pages, privacy, FAQ, about, 404, footer
   ============================================================ */

/* phone numbers never split across two lines (standard 58) */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- footer: five columns, counted on purpose (standard 25) ---------- */
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-base { align-items: center; }

/* Gilded Pixel credit (standard 12) */
.gps-credit {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--sand); text-decoration: none; padding-block: .5rem;
  transition: color .2s ease;
}
.gps-credit .gps-name { font-weight: 600; }
.gps-mark { flex: none; display: block; }
.gps-mark .gps-tile { fill: rgba(255, 255, 255, .09); transition: fill .2s ease; }
.gps-mark .gps-px { fill: #D2A756; }
.gps-credit:hover, .gps-credit:focus-visible { color: #D2A756; }
.gps-credit:hover .gps-tile { fill: rgba(210, 167, 86, .16); }

/* smaller display headings for two-up columns */
.town-links h2.display, .town-quote h2.display, .faq-group h2.display, .other-towns h2.display,
.town-local h2.display,
.compare-col h3.display, .ask-panel h3.display { font-size: clamp(1.55rem, 3vw, 2.25rem); }

/* ---------- town pages: hero with the regional map ---------- */
.town-hero .wrap { grid-template-columns: minmax(0, 1fr); }
.town-hero .wrap > * { min-width: 0; }
@media (min-width: 901px) {
  .town-hero .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  }
}
/* the headline is sized from its own column, not the window, so the longest
   town name ("Peterborough", "Bowmanville") always fits on one line */
.town-hero-copy { display: grid; gap: 1.3rem; justify-items: start; container-type: inline-size; }
.town-hero h1.display { font-size: clamp(1.75rem, 4.4vw, 4.2rem); font-size: clamp(1.75rem, 9.2cqi, 4.4rem); }
.town-distance { line-height: 1.5; }
.town-hero .town-name { display: block; color: var(--sun); }
.town-distance .icon { color: var(--sun); }
.town-map { margin: 0; }

.region-map {
  /* edge fades kept narrow so no town name sits in them (Bowmanville at the
     bottom, Bobcaygeon at the top on phones; Oct 7 2026) */
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 95%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 95%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.region-map .water { fill: rgba(168, 154, 131, .13); }
.region-map .river { fill: none; stroke: rgba(168, 154, 131, .32); stroke-width: 1.6; stroke-linecap: round; }
.region-map .water-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; fill: var(--sand); opacity: .5;
}
.region-map .route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.region-map .route-faint { stroke: rgba(168, 154, 131, .3); stroke-width: 1.6; stroke-dasharray: 2 7; }
.region-map .route-live { stroke: var(--sun); stroke-width: 3; }
/* with JS the route is hidden until the map is on screen, then draws once;
   without JS (or with reduced motion) it is simply drawn */
html:not(.no-js) .region-map .route-live { stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.no-js) .town-map.is-drawn .region-map .route-live {
  animation: route-draw 1.7s cubic-bezier(.22, .8, .3, 1) calc(.15s + var(--d, 0s)) forwards;
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
.region-map .town .dot { fill: var(--sand); }
.region-map .town.is-home .dot { fill: var(--cream); }
.region-map .town.is-current .dot { fill: var(--sun); }
.region-map .town text {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; fill: var(--sand);
}
.region-map .town.is-current text { fill: var(--cream); font-weight: 600; font-size: 15px; }
.region-map .pulse {
  fill: none; stroke: var(--sun); stroke-width: 1.5;
  transform-origin: center; transform-box: fill-box; opacity: 0;
}
/* the ring starts when the line arrives, not before */
.town-map.is-drawn .region-map .pulse { animation: pulse 2.8s ease-out 1.9s infinite; }
.no-js .region-map .pulse { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  /* the still is the finished drawing: route drawn, ring shown */
  html:not(.no-js) .region-map .route-live,
  html:not(.no-js) .town-map.is-drawn .region-map .route-live { animation: none; stroke-dashoffset: 0; }
  .region-map .pulse, .town-map.is-drawn .region-map .pulse { animation: none; opacity: .35; }
}
@media (max-width: 700px) {
  .region-map .town text { font-size: 19px; }
  .region-map .town.is-current text { font-size: 21px; }
  .region-map .water-label { font-size: 15px; }
}

/* town page body: photo beside the local situations */
.town-body { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 901px) {
  .town-body { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .town-photo { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.town-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.spots { display: grid; }
.spot {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem;
  padding-block: 1.7rem; border-top: 1px solid var(--line);
}
.spot:last-child { border-bottom: 1px solid var(--line); }
.spot-icon { width: 1.7rem; height: 1.7rem; color: var(--sun-deep); margin-top: .1rem; }
.spot h3 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  font-size: 1.15rem; text-transform: uppercase; line-height: 1.15; margin-bottom: .5rem;
}
.spot p { color: var(--stone); max-width: 38em; margin-bottom: .85rem; }

/* how quoting works */
.town-quote { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 901px) {
  .town-quote { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}
.town-quote > div { display: grid; gap: 1.4rem; justify-items: start; }
.quote-steps { counter-reset: qs; display: grid; }
.quote-steps li {
  counter-increment: qs;
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem;
  padding-block: 1.25rem; border-top: 1px solid var(--line); font-size: 1.05rem;
}
.quote-steps li:last-child { border-bottom: 1px solid var(--line); }
.quote-steps li::before {
  content: counter(qs, decimal-leading-zero);
  font-family: var(--mono); font-size: .85rem; letter-spacing: .1em;
  color: var(--sun-deep); padding-top: .25rem;
}

/* rows of links: services, towns */
.town-links { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 901px) { .town-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.town-links > div { display: grid; gap: 1.3rem; align-content: start; justify-items: start; }
.link-rows { display: grid; width: 100%; }
.link-rows a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .95rem; align-items: center;
  padding: 1rem .5rem; border-top: 1px solid var(--line);
  text-decoration: none; transition: background .2s ease;
}
.link-rows li:last-child a { border-bottom: 1px solid var(--line); }
.link-rows a::after {
  content: ""; width: .5rem; height: .5rem;
  border-right: 2px solid var(--sun-deep); border-top: 2px solid var(--sun-deep);
  transform: rotate(45deg); transition: transform .2s ease;
}
.link-rows a:hover { background: var(--cream-2); }
.link-rows a:hover::after { transform: translateX(3px) rotate(45deg); }
.link-rows .icon { color: var(--sun-deep); width: 1.3rem; height: 1.3rem; }
.link-rows b {
  display: block; font-family: var(--display); font-stretch: 110%; font-weight: 800;
  text-transform: uppercase; font-size: .98rem; line-height: 1.2;
}
.link-rows small { display: block; color: var(--stone); font-size: .9rem; margin-top: .15rem; }

/* service areas: the town pages */
.town-grid {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: minmax(0, 1fr);
}
/* counted on purpose (standard 25): five in a row, three then two, or a list */
@media (min-width: 640px) { .town-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .town-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.town-grid a {
  display: grid; gap: .5rem; align-content: start; height: 100%;
  padding: 1.4rem 1.3rem 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; transition: transform .25s ease, box-shadow .25s ease;
  container-type: inline-size; position: relative;
}
.town-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.town-grid b {
  font-family: var(--display); font-stretch: 112%; font-weight: 900;
  text-transform: uppercase; line-height: 1;
  font-size: 1.35rem; font-size: clamp(1.1rem, 10cqi, 1.5rem);
}
.town-grid .town-km { font-size: .92rem; line-height: 1.45; color: var(--stone); padding-right: 1.2rem; }
.town-grid a::after {
  content: ""; position: absolute; right: 1.3rem; bottom: 1.45rem; width: .5rem; height: .5rem;
  border-right: 2px solid var(--sun-deep); border-top: 2px solid var(--sun-deep);
  transform: rotate(45deg); transition: transform .2s ease;
}
.town-grid a:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- privacy page ---------- */
.compare {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.compare-col { display: grid; gap: 1.1rem; align-content: start; }
.compare-col figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.compare-col dl { margin: 0; display: grid; }
.compare-col dl > div {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem;
  padding-block: .85rem; border-top: 1px solid var(--line);
}
.compare-col dl > div:last-child { border-bottom: 1px solid var(--line); }
.compare-col dt {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone); padding-top: .2rem;
}
.compare-col dd { margin: 0; }
.compare-col .is-night dd { font-weight: 600; }
@media (max-width: 480px) { .compare-col dl > div { grid-template-columns: 1fr; gap: .25rem; } }
.compare-note { margin-top: 1.6rem; max-width: 42em; }

.mirror-diagram { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .mirror-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; }
  .mirror-diagram .mirror-advice { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .mirror-diagram { grid-template-columns: 1fr 1fr .8fr; max-width: none; align-items: center; }
  .mirror-diagram .mirror-advice { grid-column: auto; margin: 0; }
}
.mirror-fig { margin: 0; display: grid; gap: .8rem; }
.mirror-fig figcaption {
  font-family: var(--mono); font-size: .9rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sun); text-align: center;
}
.mirror-panel { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--ink-3); }
.mirror-panel.is-day .side-out { fill: #ece2cd; }
.mirror-panel.is-day .side-in { fill: var(--ink-2); }
.mirror-panel.is-night .side-out { fill: #0c0a07; }
.mirror-panel.is-night .side-in { fill: #efdcb8; }
.mirror-panel .glass { fill: rgba(168, 154, 131, .6); }
.mirror-panel .film { fill: var(--sun); }
.mirror-panel text { font-family: var(--mono); text-transform: uppercase; }
.mirror-panel .side-label { font-size: 12px; letter-spacing: .18em; }
.mirror-panel .sight-label { font-size: 13px; letter-spacing: .08em; font-weight: 500; }
.mirror-panel text.on-light { fill: var(--ink); }
.mirror-panel text.on-dark { fill: var(--cream); }
.mirror-panel .m-icon { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mirror-panel .m-icon.on-light { stroke: var(--ink); }
.mirror-panel .m-icon.on-dark { stroke: var(--cream); }
.mirror-panel .sun-icon { stroke: var(--sun-deep); }
.mirror-panel .moon { fill: var(--sand); }
.mirror-panel .glow { fill: rgba(238, 132, 34, .2); }
.mirror-panel .bulb { fill: var(--sun); }
.mirror-panel .bulb-base { fill: none; stroke: var(--stone); stroke-width: 2; stroke-linecap: round; }
.mirror-panel .sight { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mirror-panel .sight.through { stroke: var(--sun); stroke-dasharray: 7 6; }
.mirror-panel .sight.bounce { stroke: var(--stone); }
.mirror-advice { margin-top: .4rem; max-width: 46em; color: var(--sand); font-size: 1.05rem; }

.use-groups {
  display: grid; gap: 2rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.use-groups h3 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  text-transform: uppercase; font-size: 1.05rem;
  padding-bottom: .7rem; border-bottom: 2px solid var(--sun); margin-bottom: .4rem;
}
.use-groups ul { list-style: none; margin: 0; padding: 0; }
.use-groups li { padding-block: .55rem; border-bottom: 1px solid var(--line); }

.quote-pair {
  display: grid; gap: 1.4rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.pull-quote {
  margin: 0; display: grid; gap: 1.2rem; align-content: space-between;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 1.8rem; box-shadow: 0 12px 30px -22px rgba(23, 19, 15, .45);
}
.pull-quote p { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.6; }
.pull-quote footer {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone);
}
.pull-quote .stars { color: var(--sun-deep); letter-spacing: .1em; margin-right: .35rem; }

.ask-panel {
  border-radius: 10px; padding: clamp(1.8rem, 4vw, 2.6rem);
  display: grid; gap: 1rem; justify-items: start; align-self: center;
}
.ask-panel p { color: var(--sand); max-width: 30em; }
.ask-phone {
  font-family: var(--display); font-stretch: 115%; font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1; color: var(--cream); text-decoration: none;
}
.ask-phone:hover { color: var(--sun); }

/* ---------- FAQ (a reading page) ---------- */
.faq-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 901px) {
  .faq-layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .faq-index { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.faq-index ul { display: grid; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.faq-index ul a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .8rem 0; border-top: 1px solid var(--line); text-decoration: none;
  font-family: var(--display); font-stretch: 110%; font-weight: 700;
  text-transform: uppercase; font-size: .88rem;
}
.faq-index li:last-child a { border-bottom: 1px solid var(--line); }
.faq-index ul a:hover { color: var(--sun-deep); }
.faq-index small { font-family: var(--mono); font-weight: 400; color: var(--stone); font-size: .74rem; }
@media (max-width: 900px) {
  .faq-index ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 0; }
  .faq-index ul a, .faq-index li:last-child a { border: 1px solid var(--line); border-radius: 999px; padding: .5rem .95rem; font-size: .76rem; }
  .faq-index .btn { display: none; }
}
.faq-groups { display: grid; gap: clamp(2.5rem, 5vw, 4rem); max-width: 50rem; }
.faq-group h2.display { margin-bottom: 1rem; }
.faq { border-top: 1px solid var(--line); }
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.15rem 0; font-weight: 600; font-size: 1.08rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .65rem; height: .65rem;
  border-right: 2px solid var(--sun-deep); border-bottom: 2px solid var(--sun-deep);
  transform: rotate(45deg) translateY(-3px); transition: transform .25s ease;
}
.faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.faq summary:hover { color: var(--sun-deep); }
.faq-a { padding: 0 0 1.5rem; max-width: 65ch; color: var(--stone); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- about page ---------- */
.principles { margin-top: clamp(4rem, 8vw, 6rem); display: grid; gap: 2rem; }
.principle-list {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.principle { border-top: 2px solid var(--ink); padding-top: 1.2rem; display: grid; gap: .6rem; align-content: start; }
.principle h3 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  text-transform: uppercase; font-size: 1.15rem; line-height: 1.15;
}
.principle p { color: var(--stone); }
.quote-wall { columns: 3 18rem; column-gap: 1.4rem; }
.wall-quote {
  break-inside: avoid; margin: 0 0 1.4rem; padding: 1.7rem 1.7rem 1.5rem;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 8px;
}
.wall-quote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.5; color: var(--cream);
}
.wall-quote footer {
  margin-top: 1.1rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sun);
}
.quote-wall-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: .6rem; }
.rating-badge.on-dark { background: var(--ink-2); border: 1px solid var(--ink-3); }

/* ---------- header between the phone menu and a wide laptop ----------
   From 901 to about 1150px the full header did not fit: "Service Areas"
   and the quote button wrapped onto two lines and the logo text broke into
   five (it predates the Oct 2026 pages; found in the full-site check).
   Items never wrap; the narrow range drops the tagline and tightens the
   gaps, and the narrowest drops the header button. The phone number and
   the Contact link stay, so a quote is still one tap away. */
.nav a, .nav-group > button, .site-header .btn, .header-phone strong, .brand-name { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) {
  .site-header .wrap { gap: 1.1rem; }
  .nav { gap: 1.1rem; }
  .brand-name small { display: none; }
  .header-phone .spec { display: none; }
}
@media (min-width: 901px) and (max-width: 1060px) {
  .site-header .btn { display: none; }
}

/* ---------- panel round 1 fixes (Oct 7 2026) ---------- */
/* focus ring on dark backgrounds stays sun orange (3:1 or better on both) */
.dark :focus-visible, .dark-2 :focus-visible, .page-hero :focus-visible,
.site-header :focus-visible, .site-footer :focus-visible, .callbar :focus-visible,
.cta-band :focus-visible, .ask-panel :focus-visible { outline-color: var(--sun); }

/* footer: plain lines match the links beside them */
.footer-col li { color: var(--sand); font-size: .95rem; }
.footer-note {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sand); opacity: .75; margin-left: .3rem;
}

/* home before/after: said plainly that it is an illustration */
.ba-note {
  margin-top: .9rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sand);
}

/* FAQ: optional link under an answer */
.faq-a .link-more { display: inline-block; margin-top: .3rem; }

/* town pages without a local photo: the situations run across the page */
@media (min-width: 901px) {
  .town-body.no-photo { grid-template-columns: minmax(0, 1fr); }
  .town-body.no-photo .spots { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  .town-body.no-photo .spot { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .town-body.no-photo .spot:last-child { border-bottom: 0; }
}
.town-local h2.display { max-width: 24ch; }

/* town page: a matching review beside the quote steps */
.quote-box { display: grid; gap: 1.2rem; justify-items: start; }
.quote-box .quote-steps { width: 100%; }
.town-quote .pull-quote { margin-top: .4rem; }
.other-towns { display: grid; gap: 1.3rem; justify-items: start; max-width: 44rem; }

/* Five service cards on the home page (Oct 2026, privacy film added): three
   across, then two wider ones, so no card ever sits alone in a row. The wide
   pair gets a wider photo crop, which keeps every photo in a row the same height. */
@media (min-width: 1000px) {
  .svc-grid-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-grid-5 > .svc-card { grid-column: span 2; }
  .svc-grid-5 > .svc-card:nth-child(n+4) { grid-column: span 3; }
  .svc-grid-5 > .svc-card:nth-child(n+4) figure { aspect-ratio: 2 / 1; }
}
@media (min-width: 640px) and (max-width: 999.98px) {
  .svc-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid-5 > .svc-card:last-child { grid-column: 1 / -1; }
  .svc-grid-5 > .svc-card:last-child figure { aspect-ratio: 8 / 3; }
}

/* "Peterborough." is the longest word in any heading on the site. On a 360px
   phone it ran 36px past its column at the normal heading size, so this heading
   is sized from its own column, like the town page headlines (standard 66). */
.regions-copy { container-type: inline-size; }
.regions-copy h2.display { font-size: min(clamp(2rem, 4.6vw, 3.4rem), 8.6cqi); }

/* 360px phones (most Androids): at the usual 2rem floor, "Peterborough" is wider
   than a phone column (standard 66), so the smallest headings step down a touch. */
@media (max-width: 380px) {
  h2.display { font-size: 1.8rem; }
}