/* ============================================================
   VCHS — "Blueprint"
   White ground, cool pale sections, navy structure, one red
   accent reserved for actions. Quiet, credentialed, corporate.

   Red is never a decorative fill. If it is red, you can click it.
   ============================================================ */

:root {
  --paper:   #FFFFFF;
  --mist:    #F4F6FA;
  --mist-2:  #EAEEF6;
  --navy:    #1B2C57;
  --navy-2:  #12203F;
  --ink:     #171C26;
  --ink-2:   #5A6377;
  --ink-3:   #8A93A6;
  --hair:    #E1E6F0;
  --red:     #E01C30;
  --red-2:   #B21426;

  --wrap: 1200px;
  --r: 14px;
  --r-lg: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(23, 28, 38, .04), 0 14px 34px -18px rgba(23, 28, 38, .18);
  --shadow-lg: 0 2px 4px rgba(23, 28, 38, .04), 0 28px 60px -28px rgba(23, 28, 38, .26);

  --sec: clamp(56px, 7vw, 100px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* Takes the <picture> wrapper out of layout so the <img> stays the direct
   child of whatever box it was placed in — grids and flex rows keep working. */
picture { display: contents; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  margin: 0; font-family: Sora, system-ui, sans-serif;
  font-weight: 600; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance;
}
h2 span, h1 span { color: var(--ink-3); }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 300; width: auto; height: auto; clip: auto;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.stars { display: inline-flex; gap: 3px; }
.stars span {
  width: 15px; height: 15px; background: #F5A623;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stars span.is-off { background: var(--hair); }
.stars--lg { gap: 5px; }
.stars--lg span { width: 24px; height: 24px; }

/* Small red-ruled label above a heading. The rule is the only red on a
   block that carries no action, and it is 2px of it. */
.kicker {
  font-family: Sora, sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--red); flex: 0 0 22px; }

.lede { color: var(--ink-2); max-width: 62ch; }

/* Section head: title left, link right. */
.sec__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 14px 24px; margin-bottom: clamp(24px, 3vw, 38px);
}
.sec__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: Sora, sans-serif; font-weight: 600; font-size: .93rem; letter-spacing: -.01em;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-2); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--hair); }
.btn--ghost:hover { border-color: var(--navy); background: var(--mist); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Sora, sans-serif; font-weight: 600; font-size: .93rem; color: var(--navy);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.link svg { width: 17px; height: 17px; flex: 0 0 17px; }
.link:hover, a:hover > .link { gap: 13px; color: var(--red); }

/* ---------- Lists shared by prose and feature ---------- */

.ticks { display: grid; gap: 10px; margin-top: 22px; }
.ticks--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.ticks li {
  position: relative; padding-left: 30px; font-size: .95rem; color: var(--ink-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--mist-2);
}
.ticks li::after {
  content: ""; position: absolute; left: 4.5px; top: .72em;
  width: 7px; height: 4px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}

.steps { display: grid; gap: 18px; margin-top: 30px; }
.steps li {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 22px 24px;
}
.steps li > span {
  flex: 0 0 38px; height: 38px; display: grid; place-items: center;
  background: var(--navy); color: #fff; border-radius: 50%;
  font-family: Sora, sans-serif; font-weight: 600; font-size: .95rem;
}
.steps h3 { font-size: 1.08rem; margin-bottom: 6px; }
.steps p { font-size: .93rem; color: var(--ink-2); }

/* ============================================================
   TICKER + TOP BAR
   ============================================================ */

.ticker { background: var(--navy); color: rgba(255, 255, 255, .84); }
.ticker p {
  width: min(var(--wrap), 100% - 48px); margin-inline: auto;
  padding: 9px 0; font-size: .81rem; text-align: center; letter-spacing: .015em;
}

/* Above .mnav (95). The panel used to outrank the header, so it painted over
   the bottom half of the toggle and the close X showed as a single slash. */
.top { background: var(--paper); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 100; }
.top__in { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); min-height: 78px; }
/* flex-shrink would let max-width:100% collapse the mark to nothing */
.top__mark { flex: 0 0 auto; }
.top__mark img { width: clamp(104px, 8vw, 132px); max-width: none; }

.top__in > nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.top__nav { display: flex; align-items: center; gap: clamp(15px, 2.1vw, 32px); }
.top__nav > li { position: relative; }
.top__nav a, .top__sub-btn {
  display: flex; align-items: center; gap: 5px; padding: 8px 0; white-space: nowrap;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.top__nav a:hover, .top__sub-btn:hover,
.top__nav a.is-here, .top__sub-btn.is-here { color: var(--navy); border-color: var(--navy); }
.top__sub-btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.top__sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The nav is pushed right by `margin-left: auto`, so without this the last
   link and the CTA end up ~20px apart while a third of the bar sits empty
   on the left. */
.top__cta { flex: 0 0 auto; margin-left: clamp(18px, 2.6vw, 42px); }

/* Services dropdown. A real button with aria-expanded, so it opens on a
   touchscreen; the hover rule is a pointer-device convenience on top. */
.top__sub {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  min-width: 260px; z-index: 95;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.top__sub::before {
  content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 14px;
}
.top__has-sub:hover .top__sub,
.top__sub-btn[aria-expanded="true"] + .top__sub {
  opacity: 1; visibility: visible; transform: none;
}
.top__sub ul { display: grid; gap: 2px; }
.top__sub a {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 9px;
  font-size: .92rem; font-weight: 500; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.top__sub a svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--navy); }
.top__sub a:hover { background: var(--mist); color: var(--navy); }
.top__sub a[aria-current="page"] { background: var(--mist); color: var(--navy); }

@media (hover: none) {
  .top__has-sub:hover .top__sub { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .top__sub-btn[aria-expanded="true"] + .top__sub { opacity: 1; visibility: visible; transform: none; }
}

.top__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid var(--hair); border-radius: 12px; background: transparent;
  cursor: pointer; place-items: center; align-content: center; gap: 3px; padding: 0;
  position: relative; z-index: 1;
}
.top__toggle span:not(.sr) { display: block; width: 19px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
/* The bars sit 5px apart centre-to-centre (2px tall + 3px gap), so the outer
   two travel exactly 5px to meet in the middle and form the X. Change the
   gap and these two numbers have to change with it. */
.top__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.top__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.top__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   HOME HERO
   ============================================================ */

/* 40px ticker + 78px sticky nav sit above the hero, so the first screen is
   exactly one viewport and no more. min-height rather than height: a very
   short window grows the block instead of clipping the copy inside it.
   Capped at 820px because the copy column is vertically centred: on a
   1500px-tall window an uncapped viewport hero leaves ~250px of dead white
   above and below the headline, which reads as a rendering fault. */
.hero {
  position: relative;
  min-height: min(calc(100dvh - 118px), 820px);
  /* stretch, not center: the grid has to inherit the hero's full height or
     the photo pane collapses to the height of the copy beside it. */
  display: flex; align-items: stretch;
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  width: 100%;
}
.hero__copy {
  align-self: center;
  width: min(calc(var(--wrap) / 2), 100%);
  margin-left: max(24px, calc((100vw - var(--wrap)) / 2));
  padding-right: 12px;
}
.hero h1 { font-size: clamp(2.3rem, 3.9vw, 3.7rem); margin-bottom: 22px; letter-spacing: -.04em; }
.hero__copy > p { color: var(--ink-2); font-size: clamp(1rem, 1.1vw, 1.08rem); max-width: 46ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 30px; }

.social { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--hair); }
.social p { font-size: .85rem; color: var(--ink-2); max-width: 42ch; }
.social strong { color: var(--ink); font-weight: 600; }

.hero__media { position: relative; background: var(--navy-2); overflow: hidden; }
/* Absolute so the 4:5 photograph contributes no height. Left in flow with
   height:100% against an auto-height parent it fell back to its intrinsic
   ratio and drove the hero taller the wider the pane got — 1245px at 2000px
   viewport, well past the fold. */
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(18, 32, 63, .62) 0%, rgba(18, 32, 63, 0) 32%);
}

/* ============================================================
   INTERIOR PAGE HEAD
   ============================================================ */

.pbanner { padding: clamp(26px, 3.4vw, 44px) 0 clamp(30px, 4vw, 52px); }
.pbanner__in { margin-bottom: clamp(26px, 3.4vw, 42px); }

.crumbs { margin-bottom: clamp(20px, 2.6vw, 32px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-3); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--navy); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

.pbanner__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px); align-items: end;
}
.pbanner h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); letter-spacing: -.04em; }
.pbanner__sub { color: var(--ink-2); font-size: 1.02rem; max-width: 48ch; }
.pbanner__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.pbanner__plate {
  margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--mist-2);
  border: 1px solid var(--hair);
}
.pbanner__plate img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

/* ============================================================
   CREDENTIALS
   ============================================================ */

.creds { border-block: 1px solid var(--hair); background: var(--paper); }
.creds__in { display: flex; align-items: center; flex-wrap: wrap; gap: 14px clamp(20px, 3vw, 44px); padding: 26px 0; }
.creds__lead { font-size: .8rem; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.creds ul { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2.6vw, 38px); }
.creds li { font-size: .95rem; color: var(--ink-2); }
.creds li strong { font-family: Sora, sans-serif; font-weight: 600; color: var(--navy); }

/* ============================================================
   HOME SERVICES ACCORDION
   ============================================================ */

.svc { background: var(--mist); padding: var(--sec) 0; }
.svc__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(30px, 4.5vw, 66px); align-items: stretch; }
.svc__left h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); margin-bottom: 16px; }
.svc__lead { color: var(--ink-2); max-width: 44ch; margin-bottom: 30px; }

.svc__list { display: grid; gap: 10px; }
.svc__list li {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.svc__list li:hover { border-color: var(--navy); }
.svc__list li.is-open { border-color: var(--navy); box-shadow: var(--shadow); }
.svc__list button {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 17px 20px;
  font-family: Sora, sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--ink);
}
.svc__list button > svg:first-child { width: 22px; height: 22px; flex: 0 0 22px; color: var(--navy); }
.svc__list button span { flex: 1; }
.svc__arrow { width: 17px; height: 17px; flex: 0 0 17px; color: var(--ink-3); transition: transform .3s var(--ease), color .3s var(--ease); }
.svc__list li.is-open .svc__arrow { color: var(--red); transform: rotate(45deg); }
.svc__panel { display: none; padding: 0 20px 18px 56px; }
.svc__panel p { font-size: .92rem; color: var(--ink-2); margin-bottom: 12px; }
.svc__list li.is-open .svc__panel { display: block; }

/* One photograph, and it swaps with the open service. It fills the column
   rather than holding a fixed 4:3, because the accordion beside it is ~825px
   tall and a 4:3 pane leaves ~300px of empty ground underneath — which reads
   as a missing image rather than a design choice. Matching the row height
   makes the pane deliberate at any accordion length. */
.svc__media { display: grid; grid-template-columns: 1fr; }
.svc__shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--mist-2); }
.svc__shot img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

/* ============================================================
   PROCESS
   ============================================================ */

.proc { padding: var(--sec) 0; }
.proc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(30px, 4vw, 50px); }
.proc__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.proc__head p { color: var(--ink-2); max-width: 40ch; }
.proc__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proc__steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-bottom: 16px; }
.proc__steps h3 { font-size: 1.12rem; margin-bottom: 8px; }
.proc__steps p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.proc__note { margin-top: 22px; font-size: .84rem; color: var(--ink-3); }

/* Four job-site photographs in a row — the same device the process section
   uses, reused on the screened-porch service page. */
.steps-shots { padding: 0 0 var(--sec); }
.steps-shots ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps-shots li { position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist-2); }
.steps-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.steps-shots span {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(18, 32, 63, .86); color: #fff;
  font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}

/* ============================================================
   WORK GRID + BEFORE / AFTER
   ============================================================ */

.work { background: var(--mist); padding: var(--sec) 0; }
.work__note { font-size: .87rem; color: var(--ink-3); margin: -18px 0 24px; }
/* Three columns, not four. The lead tile spans 2x2, which leaves two cells
   beside it and a full row underneath — exactly the five remaining photos.
   At four columns the sixth tile orphans onto a row of its own and drags
   three empty cells across the page with it. */
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.work__grid li { position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist-2); }
.work__grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.work__grid li:hover img { transform: scale(1.05); }
.work__lg { grid-column: span 2; grid-row: span 2; }
.work__lg img { aspect-ratio: auto; }
.work__grid span {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(18, 32, 63, .82); backdrop-filter: blur(6px);
  color: #fff; font-size: .76rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
}

.ba { margin-top: clamp(30px, 4vw, 48px); }
.ba h3 { font-size: 1.25rem; margin-bottom: 16px; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist-2); }
.ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba figcaption {
  position: absolute; left: 12px; top: 12px;
  background: rgba(18, 32, 63, .86); color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.ba figcaption.is-after { background: var(--navy); }

/* ============================================================
   REVIEWS
   ============================================================ */

.rev { padding: var(--sec) 0; }
.rev--strip { background: var(--mist); }
.rev__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.rev__lead h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-bottom: 16px; }
.rev__lead p { color: var(--ink-2); margin-bottom: 24px; }
.rev__grid { display: grid; gap: 12px; }
.rev__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.rev__grid li {
  background: var(--paper);
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 26px 28px;
  /* A grid row is as tall as its tallest card, so the byline is pushed to the
     bottom of every card in the row rather than floating under short ones. */
  display: flex; flex-direction: column;
}
.rev__grid cite { margin-top: auto; }
.rev__grid .stars { margin-bottom: 14px; }
.rev__grid blockquote { margin: 0 0 16px; font-size: .96rem; line-height: 1.62; }
.rev__grid cite { font-style: normal; display: flex; flex-direction: column; font-family: Sora, sans-serif; font-weight: 600; font-size: .92rem; color: var(--navy); }
.rev__grid cite small { font-family: "Hanken Grotesk", sans-serif; font-weight: 400; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }

/* The full wall on /reviews. Masonry columns rather than a grid: the
   reviews run from two lines to twelve, and a row grid would leave a
   half-page of white under the short ones. */
.revwall { padding: 0 0 var(--sec); }
.revwall__grid { columns: 3; column-gap: 16px; }
.revwall__grid li {
  break-inside: avoid; margin-bottom: 16px;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 24px 26px; background: var(--paper);
}
.revwall__grid .stars { margin-bottom: 12px; }
.revwall__grid blockquote { margin: 0 0 14px; font-size: .93rem; line-height: 1.6; }
.revwall__grid cite { font-style: normal; display: flex; flex-direction: column; font-family: Sora, sans-serif; font-weight: 600; font-size: .9rem; color: var(--navy); }
.revwall__grid cite small { font-family: "Hanken Grotesk", sans-serif; font-weight: 400; font-size: .79rem; color: var(--ink-3); margin-top: 2px; }
.revwall__note { margin-top: 8px; font-size: .84rem; color: var(--ink-3); }
.revwall__note a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.revwall__sort { font-size: .86rem; color: var(--ink-3); }

/* ---------- The 4.9 rating card ----------
   The score is the loudest number on either page it appears on, so it sits on
   navy rather than competing with the white cards around it. Red stays reserved
   for actions: the only red here is the rule under the link that leaves the site. */

.ratecard {
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg); padding: 30px 32px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--shadow-lg);
}
.ratecard__num {
  font-family: Sora, sans-serif; font-weight: 600;
  font-size: clamp(3.2rem, 5.4vw, 4.2rem); line-height: .9;
  letter-spacing: -.04em; margin-bottom: 14px;
}
.ratecard .stars--lg { margin-bottom: 12px; }
.ratecard__meta { font-size: .92rem; color: #B9C3DA; line-height: 1.45; }
.ratecard__meta strong {
  display: block; margin-top: 2px;
  font-family: Sora, sans-serif; font-weight: 600; font-size: 1rem; color: #fff;
}
.ratecard__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: Sora, sans-serif; font-weight: 600; font-size: .88rem; color: #fff;
  border-bottom: 2px solid var(--red); padding-bottom: 4px;
}
.ratecard__link svg { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .3s var(--ease); }
.ratecard__link:hover svg { transform: translate(3px, -3px); }

/* ---------- Home: lead copy, rating card, then the wall ---------- */

.rev__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
  margin-bottom: clamp(28px, 3.6vw, 46px);
}
.rev__top .rev__lead p { margin-bottom: 24px; max-width: 48ch; }
/* The three-up strip elsewhere sits on `align-items: start`, where a short card
   simply ends. Nine cards in three rows read better squared off, so the home
   grid stretches each row and the bylines line up across it. */
.rev__grid--home { align-items: stretch; }

/* ---------- /reviews: rating card beside the provenance note ---------- */

.revlead { padding: 0 0 var(--sec); }
.revlead__in {
  display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 60px); align-items: center;
}
.revlead__copy .kicker { margin-bottom: 10px; }
.revlead__copy p { color: var(--ink-2); max-width: 62ch; }

/* ============================================================
   PROSE + FEATURE
   ============================================================ */

.prose { padding: var(--sec) 0; }
.prose--mist { background: var(--mist); }
.prose--cream { background: var(--mist-2); }
.prose--navy { background: var(--navy); color: #fff; }
.prose--navy .kicker { color: rgba(255, 255, 255, .8); }
.prose--navy p { color: rgba(255, 255, 255, .78); }
.prose--navy .ticks li { color: rgba(255, 255, 255, .8); }
.prose--navy .ticks li::before { background: rgba(255, 255, 255, .14); }
.prose--navy .ticks li::after { border-color: #fff; }
/* The measure is capped on the children, not on .prose__in itself — that
   element also carries .wrap, whose `margin-inline: auto` would centre a
   narrowed container and leave the prose indented from every other block
   on the page. */
.prose__in > * { max-width: 78ch; }
.prose h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); margin-bottom: 20px; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 16px; }

.feat { padding: var(--sec) 0; }
.feat__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4.4vw, 66px); align-items: center; }
.feat--flip .feat__media { order: 2; }
.feat__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--mist-2); }
.feat__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.feat__copy h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); margin-bottom: 20px; }
.feat__copy p { color: var(--ink-2); }
.feat__copy p + p { margin-top: 16px; }
.feat__copy .btn { margin-top: 26px; }

/* Article contents list.
   A nine-question article is a reference document, not an essay — the reader
   usually arrived with one of those questions and wants that section. */
.art__toc { background: var(--mist); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px 26px 24px; margin-bottom: 38px; }
.art__toc ol { list-style: none; counter-reset: toc; margin-top: 12px; display: grid; gap: 9px; }
.art__toc li { counter-increment: toc; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; }
.art__toc li::before { content: counter(toc) "."; font-family: "Sora", system-ui, sans-serif; font-size: .84rem; color: var(--ink-3); }
.art__toc a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; font-size: .98rem; line-height: 1.45; }
.art__toc a:hover { border-bottom-color: var(--red); }
/* The header is sticky, so an un-offset jump lands the heading underneath it. */
.art__body h2[id] { scroll-margin-top: 110px; }

/* ============================================================
   Grouped services menu, and the no-photograph panel
   ============================================================ */

/* At six services a single column was right. At nine it is a wall, so the
   menu splits along the same line the business does: outdoor, exterior,
   interior. */
.top__sub--cols { display: grid; grid-template-columns: repeat(3, minmax(178px, 1fr)); gap: 4px 10px; min-width: 620px; }
.top__subhead {
  font-family: "Sora", system-ui, sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 12px 6px; margin: 0;
}
.top__subcol + .top__subcol { border-left: 1px solid var(--hair); }

.foot__sub {
  font-family: "Sora", system-ui, sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .42);
  margin-top: 16px;
}
.foot__col .foot__sub:first-of-type { margin-top: 10px; }
.foot__sub + ul { margin-top: 6px; }

/* Stand-in for work we have no photograph of. Deliberately plain: it should
   read as "no photo yet", not as a designed feature that nobody ever
   replaces. */
.noshot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(27, 44, 87, .035) 11px 22px),
    var(--mist);
  border-bottom: 1px solid var(--hair);
}
.noshot svg { width: 64px; height: 64px; fill: none; stroke: var(--navy); stroke-width: 1.2; opacity: .42; }
.pbanner__plate .noshot svg { width: 84px; height: 84px; }

.svc__noshot { display: none; }
.svc__shot.is-noshot .svc__noshot { display: grid; place-items: center; position: absolute; inset: 0; }
.svc__shot.is-noshot .svc__noshot svg { width: 86px; height: 86px; fill: none; stroke: var(--navy); stroke-width: 1.1; opacity: .4; }
.pbanner__plate .noshot { aspect-ratio: 3 / 1; border-bottom: 0; border-radius: var(--r-lg); }

/* Home services pane, when the open service has no photograph. */
.svc__shot { position: relative; }
.svc__shot.is-noshot img { visibility: hidden; }
.svc__shot.is-noshot {
  background:
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(27, 44, 87, .04) 13px 26px),
    var(--mist);
}

/* ============================================================
   Answer box — the short answer, stated once, near the top
   ============================================================ */

/* Asymmetric on purpose: the question sits in the narrow column as a label
   and the answer takes the wide one, so the block reads as a definition
   rather than as another two-column marketing section. */
.ans { padding: clamp(44px, 5.2vw, 74px) 0; background: var(--mist); border-block: 1px solid var(--hair); }
.ans__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.4fr); gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.ans__q h2 { font-size: clamp(1.35rem, 2vw, 1.72rem); line-height: 1.22; margin-top: 10px; }
.ans__a p { color: var(--ink-2); font-size: clamp(1.02rem, 1.16vw, 1.14rem); line-height: 1.62; }
.ans__a p + p { margin-top: 14px; }
/* Always four points, so a fixed 2x2 rather than auto-fit — auto-fit lands
   three across at this measure and orphans the fourth on its own row. */
.ans__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); }
.ans__points li { display: grid; gap: 3px; }
.ans__points strong { font-family: "Sora", system-ui, sans-serif; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.ans__points span { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }

/* ============================================================
   Comparison table
   ============================================================ */

.tbl { padding: var(--sec) 0; }
.tbl--mist { background: var(--mist); }
.tbl__in > h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); margin-bottom: 18px; max-width: 22ch; }
.tbl__intro { color: var(--ink-2); max-width: 78ch; }
.tbl__intro + .tbl__intro { margin-top: 14px; }

/* The table scrolls inside its own box. Without this a four-column spec table
   sets a min-width the page can't satisfy on a 360px phone, and the whole
   document scrolls sideways — which is how a layout that looks fine on a
   laptop breaks for the visitor this site is actually written for. */
.tbl__scroll { margin-top: 28px; overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r); background: var(--paper); }
.tbl__scroll:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tbl table { width: 100%; border-collapse: collapse; min-width: 620px; }
.tbl th, .tbl td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl thead th {
  font-family: "Sora", system-ui, sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: var(--navy); border-bottom: none; white-space: nowrap;
}
.tbl tbody th { font-family: "Sora", system-ui, sans-serif; font-weight: 600; color: var(--navy); font-size: .98rem; }
.tbl tbody td { color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:nth-child(even) { background: var(--mist); }
.tbl--mist .tbl__scroll { background: var(--paper); }
.tbl__note { margin-top: 16px; color: var(--ink-3); font-size: .9rem; max-width: 78ch; }

/* ============================================================
   Pick two — the honest "it depends which of these you are"
   ============================================================ */

.pick { padding: var(--sec) 0; background: var(--mist); }
.pick__in > h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); margin-bottom: 16px; max-width: 22ch; }
.pick__intro { color: var(--ink-2); max-width: 78ch; }
.pick__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: 34px; }
.pick__col { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(24px, 2.6vw, 34px); }
.pick__col h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); color: var(--navy); }
/* The red rule under the heading is the same device the page banners use, so
   these cards read as part of the system rather than as a bolted-on widget. */
.pick__col h3::after { content: ""; display: block; width: 34px; height: 3px; background: var(--red); border-radius: 2px; margin-top: 12px; }
.pick__lead { color: var(--ink-2); margin-top: 16px; font-size: .98rem; line-height: 1.6; }
.pick__col .ticks { margin-top: 18px; }

/* ============================================================
   FAQ
   ============================================================ */

.faq { padding: var(--sec) 0; background: var(--mist); }
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.faq__head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.faq__list { display: grid; gap: 10px; }

.qa {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qa[open] { border-color: var(--navy); box-shadow: var(--shadow); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: Sora, sans-serif; font-size: 1rem; font-weight: 600; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
/* Drawn plus that becomes a minus, rather than a glyph that shifts baseline. */
.qa summary i {
  position: relative; flex: 0 0 20px; width: 20px; height: 20px;
}
.qa summary i::before, .qa summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--red);
  translate: -50% -50%; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.qa summary i::before { width: 14px; height: 2px; }
.qa summary i::after { width: 2px; height: 14px; }
.qa[open] summary i::after { transform: rotate(90deg); opacity: 0; }
.qa__a { padding: 0 22px 20px; }
.qa__a p { font-size: .95rem; color: var(--ink-2); }
.qa__a p + p { margin-top: 12px; }

/* ============================================================
   PHOTO STRIP
   ============================================================ */

.strip { padding: var(--sec) 0; }
.strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.strip__grid li { position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist-2); }
.strip__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.strip__grid li:hover img { transform: scale(1.05); }
.strip__grid span {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(18, 32, 63, .82); backdrop-filter: blur(6px);
  color: #fff; font-size: .76rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */

.svcgrid { padding: var(--sec) 0; background: var(--mist); }
.svcgrid > .wrap > h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: clamp(24px, 3vw, 36px); }
.svcgrid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scard {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.scard:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-3px); }
.scard > a { display: block; height: 100%; }
.scard__shot { margin: 0; background: var(--mist-2); overflow: hidden; }
.scard__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scard__body { padding: 22px 24px 26px; }
.scard__body h3 { font-size: 1.15rem; margin-bottom: 9px; }
.scard__body p { font-size: .91rem; color: var(--ink-2); margin-bottom: 16px; }

/* ============================================================
   RESOURCE CARDS
   ============================================================ */

.cards { padding: var(--sec) 0; }
.cards--tight { padding: 0 0 var(--sec); }
.cards__title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: clamp(38px, 5vw, 60px) 0 clamp(20px, 2.6vw, 30px); }
.cards--tight > .wrap > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: clamp(20px, 2.6vw, 30px); }

/* Lead post — the most recent article, given the width it deserves. */
.feature-post {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.feature-post:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.feature-post__shot { margin: 0; background: var(--mist-2); height: 100%; }
.feature-post__shot img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature-post__body { padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 40px) 0; }
.feature-post__body h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 12px; }
.feature-post__body > p:not(.kicker) { font-size: .95rem; color: var(--ink-2); margin-bottom: 18px; }

.cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards__grid li {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.cards__grid li:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-3px); }
.cards__grid li > a { display: block; height: 100%; }
.cards__shot { margin: 0; background: var(--mist-2); }
.cards__grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cards__grid li > a > div { padding: 22px 24px 26px; }
.cards__grid h3 { font-size: 1.08rem; margin-bottom: 10px; line-height: 1.28; }
.cards__grid li p:not(.kicker) { font-size: .9rem; color: var(--ink-2); margin-bottom: 16px; }

/* ============================================================
   ARTICLE
   ============================================================ */

.art { padding: var(--sec) 0; }
.art__in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(30px, 4.4vw, 64px); align-items: start; }
.art__body { max-width: 72ch; }
.art__body h2 { font-size: clamp(1.4rem, 2.1vw, 1.8rem); margin: 38px 0 14px; }
.art__body h2:first-child { margin-top: 0; }
.art__body p { color: var(--ink-2); }
.art__body p + p { margin-top: 15px; }
.art__close {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hair);
  font-size: 1.02rem; color: var(--ink) !important;
}

.art__side { position: sticky; top: 104px; display: grid; gap: 14px; }
.art__card {
  background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 26px 26px 28px;
}
.art__card h2 { font-size: 1.15rem; margin-bottom: 10px; }
.art__card p { font-size: .9rem; color: rgba(255, 255, 255, .76); margin-bottom: 18px; }
.art__tel {
  display: block; text-align: center; margin-top: 14px;
  font-family: Sora, sans-serif; font-size: 1.2rem; font-weight: 600; color: #fff; letter-spacing: -.02em;
}
.art__card--plain { background: var(--paper); color: var(--ink); border: 1px solid var(--hair); }
.art__card--plain h2 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.art__card--plain p { margin-bottom: 0; }

/* ============================================================
   TOWNS
   ============================================================ */

.towns { padding: var(--sec) 0; }
.towns h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: clamp(20px, 2.6vw, 30px); }
.towns__second { margin-top: clamp(40px, 5vw, 64px); }
.towns__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.towns__grid li {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.towns__grid li:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-3px); }
.towns__grid a { display: block; padding: 26px 28px 28px; }
.towns__grid h3 { font-size: 1.18rem; margin-bottom: 10px; }
.towns__grid p { font-size: .91rem; color: var(--ink-2); margin-bottom: 16px; }

/* ============================================================
   GALLERY
   ============================================================ */

.gal { padding: 0 0 var(--sec); }
.gal__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chipbtn {
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--hair); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.chipbtn:hover { border-color: var(--navy); color: var(--navy); }
.chipbtn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.gal__count { font-size: .84rem; color: var(--ink-3); margin-bottom: 20px; }
.gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal__grid li { border-radius: var(--r); overflow: hidden; background: var(--mist-2); }
.gal__grid li[hidden] { display: none; }
.gal__grid button {
  display: block; position: relative; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.gal__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.gal__grid button:hover img { transform: scale(1.05); }
.gal__grid span {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(18, 32, 63, .82); backdrop-filter: blur(6px);
  color: #fff; font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}
.gal__empty { margin-top: 24px; color: var(--ink-2); }

.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 18, 36, .93);
  display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
}
.lb[hidden] { display: none; }
.lb__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: grid; gap: 14px; }
.lb__slot { display: contents; }
.lb__fig img {
  max-width: 100%; max-height: calc(100dvh - 160px);
  width: auto; margin-inline: auto; border-radius: var(--r);
}
.lb__fig figcaption { text-align: center; color: rgba(255, 255, 255, .82); font-size: .9rem; }
.lb__close, .lb__nav {
  position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
  transition: background .22s var(--ease);
}
.lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, .24); }
.lb__close svg, .lb__nav svg { width: 20px; height: 20px; }
.lb__close { top: 18px; right: 18px; }
.lb__nav--prev { left: 18px; }
.lb__nav--next { right: 18px; }

/* ============================================================
   CONTACT CARDS
   ============================================================ */

.contact { padding: var(--sec) 0; }
.contact__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.contact__card {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 26px 26px 28px;
}
.contact__card h2 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.contact__card p { font-size: .91rem; color: var(--ink-2); }
.contact__card p + p { margin-top: 10px; }
.contact__card a:not(.contact__tel) { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact__card a:not(.contact__tel):hover { color: var(--red); }
.contact__tel {
  display: block; font-family: Sora, sans-serif; font-size: 1.5rem; font-weight: 600;
  color: var(--navy); letter-spacing: -.02em; margin-bottom: 10px;
}
.contact__strong { font-family: Sora, sans-serif; font-weight: 600; color: var(--ink) !important; font-size: 1.02rem !important; }
.contact__hours { display: grid; gap: 9px; }
.contact__hours li { display: flex; justify-content: space-between; gap: 12px; font-size: .89rem; color: var(--ink-2); }
.contact__hours b { font-weight: 600; color: var(--ink); }

/* ============================================================
   QUOTE FORM
   ============================================================ */

.quote { background: var(--navy); color: #fff; padding: clamp(52px, 6.5vw, 92px) 0; }
.quote__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.quote__copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-bottom: 18px; }
.quote__copy h2 span { color: rgba(255, 255, 255, .55); }
.quote__copy > p { color: rgba(255, 255, 255, .76); max-width: 42ch; margin-bottom: 28px; }
.quote__facts { display: grid; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .18); margin-bottom: 20px; }
.quote__facts li { color: rgba(255, 255, 255, .8); font-size: .93rem; }
.quote__facts li:first-child a { font-family: Sora, sans-serif; font-size: 1.6rem; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.quote__disc { font-size: .87rem; color: rgba(255, 255, 255, .68); }

.quote__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); }
.f { display: flex; flex-direction: column; gap: 7px; }
.f--wide { grid-column: 1 / -1; }
/* Honeypot. Off-screen rather than display:none — a bot that reads computed
   style skips hidden fields, and the point is that it fills this one in. */
.f--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f label { font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .72); }
.f input, .f select, .f textarea {
  font: inherit; font-size: .95rem; color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.f textarea { resize: vertical; min-height: 88px; }
.f input::placeholder, .f textarea::placeholder { color: rgba(255, 255, 255, .46); }
.f input:hover, .f select:hover, .f textarea:hover { border-color: rgba(255, 255, 255, .36); }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--red); background: rgba(255, 255, 255, .12); outline: none; }
.f input.is-bad, .f select.is-bad, .f textarea.is-bad { border-color: #FF7A88; }
.f select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; padding-right: 40px;
}
.f select option { color: var(--ink); }
.quote__form .btn { grid-column: 1 / -1; }
.quote__form .btn[disabled] { opacity: .6; cursor: progress; }

.f__status { grid-column: 1 / -1; font-size: .89rem; color: rgba(255, 255, 255, .78); }
.f__status:empty { display: none; }
.f__status.is-ok { color: #9BE7B4; font-weight: 600; }
.f__status.is-bad { color: #FF9AA6; font-weight: 600; }

/* ============================================================
   CALL BAND
   ============================================================ */

.callband { background: var(--mist); border-block: 1px solid var(--hair); }
.callband__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px; padding: clamp(26px, 3.2vw, 40px) 0;
}
.callband p { font-family: Sora, sans-serif; font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; color: var(--navy); letter-spacing: -.02em; max-width: 46ch; }
.callband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.callband__tel { font-family: Sora, sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--navy); letter-spacing: -.02em; }
.callband__tel:hover { color: var(--red); }

/* ============================================================
   AREAS
   ============================================================ */

.area { padding: clamp(52px, 6.5vw, 88px) 0; }
.area h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 24px; }
.area__list { display: flex; flex-wrap: wrap; gap: 8px; }
.area__list li {
  font-size: .88rem; font-weight: 500; color: var(--navy);
  background: var(--mist); border: 1px solid var(--hair);
  padding: 8px 15px; border-radius: 999px;
}
.area__list li:has(a) { padding: 0; background: var(--paper); transition: border-color .22s var(--ease), background .22s var(--ease); }
.area__list li:has(a):hover { border-color: var(--navy); background: var(--mist); }
.area__list a { display: block; padding: 8px 15px; font-weight: 600; }
.area__note { margin-top: 20px; font-size: .87rem; color: var(--ink-2); }

/* ============================================================
   FOOTER
   ============================================================ */

.foot { background: var(--mist); border-top: 1px solid var(--hair); padding-top: clamp(40px, 5vw, 66px); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 52px); padding-bottom: clamp(30px, 4vw, 48px); }
.foot__brand img { width: 158px; max-width: none; margin-bottom: 16px; }
.foot__brand p { font-size: .88rem; color: var(--ink-2); max-width: 34ch; }
.foot__social {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: .88rem; font-weight: 600; color: var(--navy);
}
.foot__social svg { width: 18px; height: 18px; }
.foot__social:hover { color: var(--red); }
.foot__col h4 { font-family: Sora, sans-serif; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; font-weight: 600; }
.foot__col ul { display: grid; gap: 10px; }
.foot__col li, .foot__col a { font-size: .9rem; color: var(--ink-2); }
.foot__col a:hover { color: var(--navy); }
.foot__tel { font-family: Sora, sans-serif; font-size: 1.3rem !important; font-weight: 600; color: var(--navy) !important; letter-spacing: -.02em; }
.foot__bar { border-top: 1px solid var(--hair); padding: 20px 0 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .81rem; color: var(--ink-3); }

/* ============================================================
   MOBILE NAV
   ============================================================ */

/* `--mnav-top` is set by script.js from the header's real bottom edge. The
   header is sticky and sits under a 40px ticker, so its bottom is 118px at
   the top of the page and 78px once scrolled — a hard-coded offset is wrong
   half the time and lets the panel cover the toggle. */
.mnav {
  position: fixed; inset: var(--mnav-top, 118px) 0 0 0; z-index: 95;
  background: var(--paper); overflow-y: auto;
  padding: 18px 24px 40px;
  overscroll-behavior: contain;
}
.mnav[hidden] { display: none; }

.mnav__label {
  font-family: Sora, sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  margin: 22px 0 6px;
}
.mnav__list li + li { border-top: 1px solid var(--hair); }
.mnav a {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 2px;
  font-family: Sora, sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--ink);
}
.mnav__list--svc svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--navy); }
.mnav a[aria-current="page"] { color: var(--navy); }

.mnav a.mnav__tel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px; padding: 15px 20px; border-radius: 999px;
  background: var(--red); color: #fff;
  font-family: Sora, sans-serif; font-size: 1.05rem; font-weight: 600;
}
.mnav a.mnav__tel svg { width: 19px; height: 19px; }

/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform .75s var(--ease); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .top__sub--cols { min-width: 560px; grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .top__nav { gap: 14px; }
  .top__nav a, .top__sub-btn { font-size: .86rem; }
  .top__cta { margin-left: 18px; padding: 11px 16px; font-size: .86rem; }
}

@media (max-width: 1120px) {
  .proc__steps { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .rev__in { grid-template-columns: 1fr; }
  .art__in { grid-template-columns: 1fr; }
  .art__side { position: static; grid-template-columns: 1fr 1fr; }
  .revwall__grid { columns: 2; }
  .rev__top { grid-template-columns: 1fr; }
  .rev__top .ratecard { width: 100%; }
  .revlead__in { grid-template-columns: 1fr; }
  .contact__in { grid-template-columns: 1fr 1fr; }
  .gal__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1040px) {
  .top__nav, .top__cta { display: none; }
  .ans__in { grid-template-columns: 1fr; gap: 18px; }
  .top__toggle { display: grid; }
  .svc__in { grid-template-columns: 1fr; }
  .svc__shot img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .quote__in { grid-template-columns: 1fr; }
  .faq__in { grid-template-columns: 1fr; }
  .pbanner__grid { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .feature-post { grid-template-columns: 1fr; }
  .feature-post__body { padding: 26px 28px 30px; }
  .feature-post__shot img { aspect-ratio: 21 / 9; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding: 0 0 clamp(40px, 6vw, 64px); }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__copy {
    width: min(var(--wrap), 100% - 48px); margin-inline: auto;
    padding: clamp(40px, 7vw, 64px) 0 clamp(30px, 5vw, 44px);
  }
  .hero__media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work__lg { grid-column: span 2; grid-row: auto; }
  .work__lg img { aspect-ratio: 16 / 10; }
  .feat__in { grid-template-columns: 1fr; gap: 28px; }
  .feat--flip .feat__media { order: 0; }
  .feat__media img { aspect-ratio: 16 / 10; }
  .svcgrid__grid, .cards__grid, .cards__grid--3, .towns__grid, .rev__grid--3 { grid-template-columns: 1fr 1fr; }
  .steps-shots ul { grid-template-columns: 1fr 1fr; }
  .strip__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .ticks--wide { grid-template-columns: 1fr; }
  .pick__grid { grid-template-columns: 1fr; }
  .ans__points { grid-template-columns: 1fr; }
  .gal__grid { grid-template-columns: 1fr 1fr; }
  .revwall__grid { columns: 1; }
  .lb__close { top: 10px; right: 10px; }
  .lb__nav { width: 40px; height: 40px; }
  .lb__nav--prev { left: 8px; }
  .lb__nav--next { right: 8px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .hero__copy, .hero__media { width: min(var(--wrap), 100% - 32px); }
  .hero__actions .btn { width: 100%; }
  .pbanner__actions .btn { width: 100%; }
  .proc__steps { grid-template-columns: 1fr; }
  .quote__form { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .ticker p { font-size: .74rem; }
  .svcgrid__grid, .cards__grid, .cards__grid--3, .towns__grid, .rev__grid--3 { grid-template-columns: 1fr; }
  .contact__in { grid-template-columns: 1fr; }
  .art__side { grid-template-columns: 1fr; }
  .ba__pair { grid-template-columns: 1fr; }
  .callband__in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .foot__top { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; }
  .work__lg { grid-column: auto; }
  .steps-shots ul, .strip__grid, .gal__grid { grid-template-columns: 1fr; }
  .steps li { flex-direction: column; gap: 12px; }
}