/* Recoloured by scripts/tenant.mjs — scheme "Sapphire" (Rich blue + cyan). Do not hand-edit; rebuild. */

/* Pacific Standard Plumbing — inner-page layer.
   Loads after styles.css and brand.css. Everything here belongs to the
   service / city / standalone page templates; the homepage does not use it. */

/* --------------------------------------------------------------- *
 * Utilities
 * --------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header "Book online" — same orange gradient as the other primary buttons.
   Lives in the shared header, so this covers every page. */
.nav-book {
  border: 0;
  background: var(--grad-accent);
}

.nav-book:hover {
  border: 0;
  background: var(--grad-accent-hover);
}

.button-ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink-strong);
}

.button-ghost:hover {
  border-color: var(--ink-strong);
  background: var(--ink-strong);
  color: #ffffff;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(38px, 5vw, 60px);
}

.section-head h2 {
  margin: 10px 0 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

/* --------------------------------------------------------------- *
 * Page hero
 * --------------------------------------------------------------- */

.page-hero {
  padding: clamp(36px, 5vw, 60px) 0 clamp(56px, 7vw, 92px);
  background: linear-gradient(180deg, #dfe6f1 0%, #eaeff7 100%);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.page-hero .breadcrumb {
  margin-bottom: clamp(20px, 2.5vw, 30px);
}

/* styles.css puts flex on .breadcrumb itself; our markup nests a semantic <ol>,
   so the row layout has to move down one level. */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--line-strong);
  font-weight: 500;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-strong);
}

.page-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink-strong);
}

.page-hero-lede {
  max-width: 60ch;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-hero-note {
  margin: 20px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
}

/* Hero CTA pair: orange-gradient Book online + navy-gradient Call, the same
   two treatments used in the "should not become a renovation" block. */
.page-hero-actions .prefooter-btn svg,
.page-hero-actions .hero-call-btn svg {
  width: 18px;
  height: 18px;
}

.page-hero-actions .hero-call-btn {
  gap: 10px;
  border: 0;
  font-weight: 700;
}

/* --------------------------------------------------------------- *
 * Full-bleed hero variant  ("heroStyle": "full" in services.json)
 * --------------------------------------------------------------- */

/* The photo runs edge to edge behind a navy gradient that is heaviest on the
   left, so the copy holds contrast no matter what the photo is doing there.
   isolation:isolate keeps the negative-z-index layers inside this section. */
/* Background comes from .page-hero — the same light blue every other service
   hero uses, so this variant only changes the layout, not the palette. */
.page-hero-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(400px, 42vw, 560px);
  padding: clamp(44px, 5vw, 76px) 0;
  isolation: isolate;
}

/* Full height, not full width: the photo is anchored right and its left edge is
   masked away rather than cut, so it dissolves into the navy instead of ending
   on a hard vertical seam. Only the left edge is feathered — top and bottom sit
   flush against the section, so fading them just looks like a mistake. */
/* A wide crop (~2.25:1) can hold a fixed width percentage at full height with
   almost nothing cropped on a large display, and trims the sides rather than
   the top and bottom on smaller ones. Needs service.heroImage in the data. */
/* Anchored right: when the box is narrower than the source ratio, cover trims
   only the left of the frame — which the mask is fading out anyway — so the
   subject on the right edge is never cut. */
.page-hero-full .page-hero-full-img-wide {
  width: 55%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
}

/* Fallback for the standard 4:3 art: `contain` rather than `cover`, so the whole
   photo is visible instead of being cropped top and bottom to fill a fixed
   width. Width is auto, so it follows the image's own aspect ratio. */
.page-hero-full-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: auto;
  max-width: 64%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 26%);
}

/* Same light blue as the hero background. The wash is squeezed into the left
   half and reaches zero at 68%, so the right third of the photo is untouched
   rather than sitting under a permanent haze. */
.page-hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(229 234 244 / 0.92) 0%,
    rgb(229 234 244 / 0.86) 34%,
    rgb(229 234 244 / 0.34) 55%,
    rgb(229 234 244 / 0) 68%
  );
}

/* The photo's left edge is a percentage of the viewport but this column was a
   fixed 660px, so the narrower the window the further the copy ran onto the
   image — at 1000px the lede ended at 68% while the photo hits full strength at
   53%, putting the last words on bare photo. Capping at 52vw keeps the copy
   inside the fade at every width. */
.page-hero-full-inner > * {
  max-width: min(660px, calc(52vw - 28px));
}

/* The one thing kept from the dark version: the eyebrow as a solid orange chip
   rather than a bare orange line. Everything else inherits the standard hero
   type colours, since the band is light again. */
.page-hero-full .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 13px;
  background: var(--accent);
  color: #ffffff;
  letter-spacing: 0.12em;
}

@media (max-width: 780px) {
  /* There is no room for a side-by-side split here, so the photo goes back to
     full width and both the mask and the gradient run top-to-bottom. */
  /* Back to filling the band here — the copy sits on top of the photo rather
     than beside it, so letterboxing would leave bare background behind text. */
  .page-hero-full-img {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000000 0%, #000000 62%, transparent 100%);
  }

  /* Heavier here than on desktop: the copy sits directly over the photo rather
     than beside it, and the type is dark. */
  .page-hero-full::after {
    background: linear-gradient(
      180deg,
      rgb(229 234 244 / 0.84) 0%,
      rgb(229 234 244 / 0.93) 45%,
      rgb(229 234 244 / 0.97) 100%
    );
  }
}

.page-hero-media {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
}

/* Rounded hero: a fixed 660px 4:3 frame instead of a free-height landscape
   panel. One aspect ratio for every service page means new art only has to be
   generated at one size. */
.page-hero-rounded {
  padding: clamp(42px, 5.4vw, 64px) 0 clamp(64px, 7.4vw, 96px);
}

.page-hero-rounded .page-hero-grid {
  grid-template-columns: minmax(0, 5.2fr) minmax(0, 5.8fr);
  gap: clamp(34px, 4.5vw, 64px);
  min-height: clamp(470px, 42vw, 560px);
}

.page-hero-rounded .page-hero-media {
  width: min(100%, 660px);
  aspect-ratio: 4 / 3;
  min-height: 0;
  justify-self: end;
  border-radius: 24px;
}

/* The frame's aspect ratio owns the height here, so the 460px cap above would
   letterbox it. */
.page-hero-rounded .page-hero-media img {
  max-height: none;
}

/* Which side of a WIDE photograph the 4:3 window keeps. The packs still ship
   these slots as 2.24:1 art, where the window discards ~40% of the width and
   the subject sits in the right half — so this is load-bearing for the demo
   path. Generated art has been 4:3 since 2026-08-23 (pipeline/image-slots.mjs,
   "SIZE THE OUTPUT TO THE BOX"), which leaves nothing to trim and makes this
   a no-op on a client's own photo set. Correct for both, so it stays. */
.page-hero-media-wide img {
  object-position: right center;
}

/* Same rule, one nudge: the team shot is a group rather than one subject, so
   the pack's wide art sits slightly left of the right edge. Inert on 4:3. */
.page-hero-media-team img {
  object-position: 70% center;
}

.page-hero-text .page-hero-copy {
  margin: 0 auto;
  text-align: center;
}

.page-hero-text .breadcrumb,
.page-hero-text .page-hero-actions {
  justify-content: center;
}

/* Both need auto side margins, not just text-align. The h1 carries a 720px cap
   from styles.css and the lede its own — without this their boxes stay pinned
   to the left of the copy column and the centred text inside sits off-centre. */
.page-hero-text .page-hero-lede,
.page-hero-text h1 {
  margin-inline: auto;
}

/* --------------------------------------------------------------- *
 * Prose
 * --------------------------------------------------------------- */

.page-prose {
  padding: clamp(64px, 7vw, 104px) 0;
}

.prose-narrow {
  max-width: 76ch;
}

.prose-narrow h2 {
  margin: 10px 0 24px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.prose-lead {
  margin: 0 0 22px;
  font-size: clamp(16.5px, 1.35vw, 18.5px);
  line-height: 1.72;
  color: var(--ink);
}

.prose-lead:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- *
 * Symptom / note cards
 * --------------------------------------------------------------- */

.symptom-section {
  background: var(--surface);
}

.sym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

/* Borderless with a soft drop shadow, matching the homepage service cards. */
.sym-card {
  padding: clamp(24px, 2.4vw, 32px);
  border: 0;
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sym-card h3 {
  margin: 0 0 10px;
  font-size: 18.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.sym-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
}

a.sym-card-link {
  display: block;
  text-decoration: none;
}

a.sym-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgb(13 42 92 / 0.14);
}

.sym-card-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 750;
  color: var(--accent-readable);
}

/* --------------------------------------------------------------- *
 * Numbered process steps
 * --------------------------------------------------------------- */

/* Two columns, so the usual 4–5 steps land as a balanced block rather than
   leaving a single orphan on a second row. */
.step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px) clamp(32px, 4vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Light blue disc with navy figure, same treatment as the homepage
   "about" checklist icons. */
.step-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 800;
}

.step-item h3 {
  margin: 8px 0 8px;
  font-size: 18.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.step-item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
}

/* --------------------------------------------------------------- *
 * Scope / includes
 * --------------------------------------------------------------- */

.includes-section {
  background: var(--surface);
}

.includes-grid,
.neighborhood-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.includes-grid h2,
.neighborhood-grid h2 {
  margin: 10px 0 18px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.includes-note {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--muted);
}

.includes-grid .prefooter-btn svg,
.neighborhood-grid .prefooter-btn svg {
  width: 18px;
  height: 18px;
}

.includes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.includes-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}

.includes-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  color: var(--ink-strong);
}

.includes-icon svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------- *
 * Plumbing mega menu — three to five grouped columns
 *
 * styles.css deliberately keeps every other dropdown to a compact 300px
 * single column and hides .nav-mega-label / .nav-mega-item span. This panel
 * opts back out of all three, scoped to .nav-mega-panel so the About, Service
 * Areas and Resources dropdowns are untouched.
 * --------------------------------------------------------------- */

/* Stays centred on its own summary like every other dropdown — the little
   pointer arrow is drawn at 50% of the panel, so anchoring the panel anywhere
   else leaves the arrow pointing at the wrong menu item. */
/* A four- or five-column panel is wider than the gap between its summary and
   the viewport edge, so the default centring (on the summary) hung column 1
   off the LEFT of the screen — measured at -195px on a five-column menu at
   1500px wide. Past three columns build.mjs marks the details .nav-mega-wide:
   it goes static, the nav shell below becomes the positioned ancestor, and
   the panel centres on the header container — which is centred in the
   viewport, so min(…, 100vw - 64px) keeps every column on screen. The
   [open]::after hover bridge re-anchors the same way and simply spans the
   shell instead of one summary — a wider bridge, still bridging the same
   gap.

   Two things CSS cannot know once the panel anchors to the shell: where the
   summary's bottom edge is (the shell is as tall as the LOGO, so calc(100% +
   7px) opened the panel ~30px lower than the narrow dropdowns beside it) and
   where the summary's centre is (the pointer arrow's home). script.js
   measures both when a .nav-mega-wide details opens and sets --mega-top and
   --mega-arrow-left on the panel; the fallbacks below keep the panel usable
   with scripts off — just lower, with the arrow at the panel's centre. */
.nav-shell {
  position: relative;
}

.nav-mega-wide {
  position: static;
}

.nav-mega-wide .nav-dropdown-panel {
  top: var(--mega-top, calc(100% + 7px));
}

.nav-mega-wide .nav-dropdown-panel::before {
  left: var(--mega-arrow-left, 50%);
}

/* Past seven cities the single-column Service Areas panel runs off the
   bottom of a laptop viewport the same way the stacked services column did —
   build.mjs sets --city-cols (2, or 3 past fourteen) and the same
   nav-mega-wide anchoring applies. The blurbs stay hidden as in every narrow
   dropdown; only the flow changes. */
.nav-mega-wide .nav-cities-panel {
  width: min(calc(300px * var(--city-cols, 1) + 32px), calc(100vw - 64px));
}

.nav-mega-wide .nav-cities-panel .nav-mega-main {
  display: grid;
  grid-template-columns: repeat(var(--city-cols, 1), minmax(0, 1fr));
  column-gap: 8px;
}

/* --mega-cols is set inline by build.mjs only when the groups declare more
   than three columns (a 25-service menu deals into four or five); the default
   keeps the classic layout, and 224px * 3 + 228px is exactly the 900px this
   panel has always been. */
.nav-mega-panel {
  width: min(calc(224px * var(--mega-cols, 3) + 228px), calc(100vw - 64px));
  padding: 26px;
}

.nav-mega-cols {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
  gap: 4px 26px;
}

.nav-mega-panel .nav-mega-group + .nav-mega-group {
  margin-top: 20px;
}

.nav-mega-panel .nav-mega-label {
  display: block;
  margin: 0 0 4px;
  padding: 0 12px;
  color: var(--accent-readable);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* No type overrides here on purpose: the rows should read exactly like the
   items in the About dropdown, which they do by inheriting .nav-mega-item. */
.nav-mega-panel .nav-mega-item {
  padding: 9px 12px;
}

/* Full-bleed tinted band rather than a rule. Left padding is the panel's 26px
   plus the item's own 12px, so the text starts on the same line as the links
   above it. */
.nav-mega-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  margin: 20px -26px -26px;
  padding: 24px 38px;
  border-radius: 0 0 18px 18px;
  background: color-mix(in srgb, var(--line) 26%, var(--surface-raised));
}

.nav-mega-foot .text-link {
  font-size: 15px;
  font-weight: 500;
}

.nav-mega-foot em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

/* ---- optional second level ---- */

.nav-mega-parent {
  position: relative;
}

.nav-mega-item-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nav-mega-caret {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.nav-mega-item-parent:hover .nav-mega-caret {
  color: inherit;
}

/* Opens on hover OR keyboard focus anywhere inside the parent, so the second
   level is reachable by tab as well as by mouse. */
.nav-mega-flyout {
  position: absolute;
  top: -12px;
  left: calc(100% + 8px);
  z-index: 3;
  width: 250px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: 0 10px 20px rgb(27 43 59 / 0.1), 0 24px 54px rgb(27 43 59 / 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.nav-mega-parent:hover .nav-mega-flyout,
.nav-mega-parent:focus-within .nav-mega-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Third column would push its flyout off the right edge — flip it inward. */
.nav-mega-col:last-child .nav-mega-flyout {
  right: calc(100% + 8px);
  left: auto;
  transform: translateX(6px);
}

.nav-mega-col:last-child .nav-mega-parent:hover .nav-mega-flyout,
.nav-mega-col:last-child .nav-mega-parent:focus-within .nav-mega-flyout {
  transform: translateX(0);
}

/* styles.css hides the time prefix below 767px, from when the utility bar also
   carried the license note and the quick links. Both are hidden on mobile now,
   so the bar has the whole width for "It's 1:11 PM on Sunday and We're Open". */
@media (max-width: 767px) {
  .status-time {
    display: inline;
  }
}

/* --------------------------------------------------------------- *
 * Mobile rebuilds
 *
 * Several homepage blocks were laid out for a wide viewport and only ever
 * clipped rather than reflowed on a phone. Everything below stacks them,
 * scoped to <=900px so desktop is untouched.
 * --------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Hero CTAs: three full-width rows instead of a squeezed side-by-side. */
  .hero-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .hero-action {
    width: 100%;
    min-height: 68px;
  }

  /* "Let's get plumbing" — brand.css indents the copy by 49vw to clear the
     photo, which leaves ~175px of usable width on a phone. */
  .prefooter {
    place-items: center;
    padding: 64px 24px;
    text-align: center;
  }

  /* brand.css's left-to-right ramp (0.08 → 0.85) keeps the photo readable
     beside the desktop copy column. With the copy centred over the whole panel
     here there is no "beside", so the ramp just washes out one side — hold the
     right-hand value flat across instead. */
  .prefooter::before {
    background: rgb(11 32 68 / 0.85);
  }

  .prefooter-copy {
    justify-items: center;
    text-align: center;
  }

  .prefooter-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .prefooter-actions .button {
    width: 100%;
    justify-content: center;
  }

  .prefooter-trust {
    justify-content: center;
  }

  /* "A plumbing problem should not become a renovation": full-width copy,
     compact centred buttons stacked, and the photo demoted to a faint wash
     behind the whole panel instead of sitting beside or below it. */
  .urgent-shell {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    /* brand.css reserves 160px+ of right padding for the photo column. The
       photo is a full-bleed wash here, so that gutter only pushed the copy off
       centre — even padding gives the headline the whole width. */
    padding: 36px 22px;
    text-align: center;
  }

  .urgent-shell > div:first-child {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .urgent-shell h2,
  .urgent-shell p {
    width: 100%;
  }

  /* The headline's hard <br> sets up a clean two-line break on desktop. At
     phone widths the copy already wraps before reaching it, so it only strands
     "should" on a line of its own mid-sentence. */
  .urgent-shell h2 br {
    display: none;
  }

  .urgent-actions {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    /* Drops brand.css's desktop indent, which offset the stacked buttons from
       the centred copy above them. */
    margin-left: 0;
    gap: 10px;
  }

  .urgent-actions .button {
    width: auto;
    min-width: 210px;
    justify-content: center;
    padding: 12px 22px;
    font-size: 15px;
  }

  .urgent-photo {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    opacity: 0.24;
    pointer-events: none;
  }

  .urgent-photo img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }

  /* Load more on the left, See all updates on the right. */
  .social-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  /* brand.css floors this section at 155px/145px for the desktop rhythm, which
     on a phone reads as dead space between the founder band and the kicker. */
  .about {
    padding-top: 105px;
    padding-bottom: 120px;
  }

  /* About: kicker, title, copy, photo, points, CTA — the photo moves out of
     the copy's way instead of leading. display:contents lets the copy's own
     children take part in the column ordering. */
  .about-grid {
    display: flex;
    flex-direction: column;
    /* The desktop grid's align-items:center centres every child of this column,
       which left the narrow kicker floating mid-width while the full-bleed
       heading below it read as left-aligned. */
    align-items: stretch;
    /* Single source of vertical rhythm; the children's own bottom margins are
       zeroed below so they stop stacking on top of this gap. */
    gap: 18px;
  }

  .about-kicker,
  .about-points {
    margin-bottom: 0;
  }

  /* Both add 10px on top of the flex gap: the heading needs a beat before the
     body copy starts, and the copy needs one before it meets the photo. */
  .about-copy h2,
  .about-lede {
    margin-bottom: 10px;
  }

  .about-copy {
    display: contents;
  }

  .about-kicker {
    order: 1;
  }

  .about-copy h2 {
    order: 2;
  }

  .about-lede {
    order: 3;
  }

  .about-grid .about-media {
    order: 4;
    /* The 35+ badge is absolutely positioned and hangs 22px below the frame, so
       it eats the whole flex gap and butts straight into the points list. */
    margin: 0 0 36px;
  }

  .about-points {
    order: 5;
  }

  .about-cta {
    order: 6;
  }
}

/* --------------------------------------------------------------- *
 * Footer — responsive columns
 *
 * styles.css already collapses .footer-grid to 2 columns at 900px and 1 at
 * 480px, but brand.css then sets `1fr auto auto auto 1fr` with no media query
 * and loads afterwards, so the five-column desktop layout survived all the way
 * down to 320px. These rules restore the intended behaviour, and also undo the
 * two desktop-only tweaks brand.css applies (a 54px nav offset and a
 * right-aligned contact column).
 * --------------------------------------------------------------- */

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 24px;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .footer-grid > nav {
    transform: none;
  }

  .footer-contact {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid > div:first-child {
    grid-column: auto;
  }

  /* Phone footer is logo + contact only. Both link lists duplicate the
     hamburger menu directly above them, and stacked they made the footer
     longer than most of the pages it closes. They stay in the markup, so
     nothing is lost for crawlers. */
  .footer-grid > nav {
    display: none;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

/* --------------------------------------------------------------- *
 * Founder block — mobile padding
 *
 * brand.css sets 74px left + 44px right padding. On a 390px screen that
 * leaves 272px of content box, less than the panel's min-content width, so
 * the column blew out to 427px and `.founder { overflow: hidden }` silently
 * clipped the right-hand side.
 * --------------------------------------------------------------- */

@media (max-width: 620px) {
  .founder-panel {
    padding-right: 24px;
    padding-left: 24px;
  }

  .founder-sign {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* --------------------------------------------------------------- *
 * Mobile menu — tighter top level, actions pinned to the bottom
 * --------------------------------------------------------------- */

/* Column layout so the action pair can be pushed to the bottom of the panel
   even when the list above is short. */
.mobile-menu {
  display: flex;
  flex-direction: column;
}

.mobile-menu[hidden] {
  display: none;
}

/* Top level reads as a list, not a stack of headlines: lighter and closer
   together than the 650 weight / 16px padding it inherits. */
.mobile-menu .mobile-nav-group summary,
.mobile-menu > a:not(.button):not(.mobile-call) {
  padding: 9px 0;
  font-weight: 500;
}

.mobile-nav-group {
  margin-bottom: 0;
}

.mobile-menu-actions {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
}

/* The number is the point of this control, so it gets the size; the label sits
   above it small and light. min-width:0 lets the pill shrink on narrow screens
   rather than forcing the row wider than the panel. */
.mobile-call {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 20px !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.mobile-call-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #2ea44f;
  color: #ffffff;
}

.mobile-call-icon svg {
  width: 19px;
  height: 19px;
}

/* Number only, centred in the pill — the icon still sits at the left edge, so
   the copy takes the remaining space and centres inside it. */
.mobile-call {
  justify-content: flex-start;
}

.mobile-call-copy {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.mobile-call-copy strong {
  display: block;
  color: var(--ink-strong);
  font-size: clamp(20px, 6.4vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mobile-book {
  justify-content: center;
  width: 100%;
}

/* ---- mobile menu group headings ---- */

/* Sub-links lighter and a step larger; labels take the same 14px indent so the
   group heading and its links share one left edge. */
.mobile-menu .mobile-nav-group a:not(.button) {
  font-size: 18px;
  font-weight: 400;
}

.mobile-nav-label {
  margin: 18px 0 2px;
  padding-left: 14px;
  color: var(--accent-readable);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-nav-child {
  padding-left: 32px !important;
  opacity: 0.85;
}

/* --------------------------------------------------------------- *
 * Service-area band — copy left, pinned home location right
 * --------------------------------------------------------------- */

.area-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(56px, 6vw, 92px);
  padding-bottom: clamp(56px, 6vw, 92px);
}

.area-band-eyebrow {
  margin: 0 0 14px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.area-band h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
}

.area-band-lede {
  max-width: 52ch;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
}

.area-band-cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 34px;
}

/* Inline, not inline-flex: on a two-line city name the flex version parks the
   marker beside the whole block instead of after the last word. */
.area-band-cities a {
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 400;
}

.area-band-cities a::after {
  content: "\00a0+";
  color: var(--accent-readable);
  font-size: 15px;
  font-weight: 600;
}

.area-band-cities a:hover {
  color: var(--accent-readable);
}

/* The home city anchors the silo, so it keeps the uppercase weight the rest of
   the list dropped, and takes a star instead of a plus. */
.area-band-cities a.is-home {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.area-band-cities a.is-home::after {
  content: "\00a0★";
  font-size: 11px;
}

/* No shadow — the panel sits flat on the band. Background matches the map's
   own land colour so a slow or blocked embed does not flash white. */
.area-band-map {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: #eef1ef;
}

.area-band-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.area-band-card {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  width: min(300px, calc(100% - 36px));
  padding: 16px 18px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.16), 0 8px 24px rgb(0 0 0 / 0.14);
}

.area-band-card-name {
  margin: 0 0 3px;
  color: #202124;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.area-band-card-addr {
  margin: 0 0 9px;
  color: #5f6368;
  font-size: 12.5px;
  line-height: 1.42;
}

.area-band-card-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #5f6368;
  font-size: 12.5px;
}

.area-band-card-rating b {
  color: #202124;
  font-weight: 500;
}

.area-band-card-star {
  color: #fbbc04;
  font-size: 12px;
}

.area-band-card-count {
  color: #1a73e8;
}

@media (max-width: 980px) {
  .area-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .area-band-map {
    order: -1;
  }
}

@media (max-width: 620px) {
  .area-band-cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------- *
 * Blog post body
 * --------------------------------------------------------------- */

/* .section spacing is tuned for alternating full-width bands. A blog post is
   one continuous read, so consecutive prose blocks collapse to a paragraph
   break rather than stacking 200px of band padding between headings. */
.post-section {
  padding-bottom: 0;
}

.post-section + .post-section {
  padding-top: 56px;
}

.post-section:last-of-type {
  padding-bottom: 96px;
}

/* --------------------------------------------------------------- *
 * Meet the team
 * --------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
}

/* Diagonal wash behind the silhouette — near-white at the top right, a shade
   deeper at the bottom left. A real photo covers this entirely, so it only
   ever shows on the placeholder. */
.team-media {
  display: grid;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  place-items: center;
  background: linear-gradient(
    to top right,
    color-mix(in srgb, var(--line) 55%, var(--surface)) 0%,
    color-mix(in srgb, var(--line) 26%, var(--surface)) 45%,
    var(--surface-raised) 100%
  );
}

.team-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stand-in until a real photo lands. Deliberately flat and quiet — it should
   read as "photo pending", not as a portrait. */
.team-silhouette {
  width: 55%;
  height: 55%;
  fill: color-mix(in srgb, var(--ink-strong) 20%, transparent);
}

/* Same white shelf overlapping the photo as the service, case-note and
   check-in cards. */
.team-body {
  position: relative;
  flex: 1;
  margin-top: -24px;
  padding: 26px clamp(20px, 1.8vw, 24px) 28px;
  border-radius: 22px 22px 0 0;
  background: var(--surface-raised);
}

.team-body h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}

.team-role {
  margin: 5px 0 12px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.team-body p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- *
 * Check-ins feed
 * --------------------------------------------------------------- */

/* Same card treatment as the case notes on /work.html: no border, soft shadow,
   white body overlapping the photo. */
.checkin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}

.checkin-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
}

.checkin-media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface);
}

.checkin-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkin-body {
  position: relative;
  flex: 1;
  margin-top: -24px;
  padding: 26px clamp(22px, 1.9vw, 26px) 28px;
  border-radius: 22px 22px 0 0;
  background: var(--surface-raised);
}

.checkin-body h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}

.checkin-body > p:not(.checkin-meta):not(.checkin-foot) {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

.checkin-foot {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  opacity: 0.85;
}

.checkin-body .checkin-meta {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .checkin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The city and service links live inside the uppercase eyebrow line, where
   the tracking and small size hide the usual link affordance. */
.checkin-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.checkin-meta a:hover,
.checkin-meta a:focus-visible {
  color: var(--accent-readable);
}

/* --------------------------------------------------------------- *
 * Related services / nearby cities
 * --------------------------------------------------------------- */

/* .svc-grid is four across on the homepage; related services only ever
   shows three. */
@media (min-width: 981px) {
  .related-grid,
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nearby-grid,
.area-grid,
.city-service-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.nearby-card,
.area-card,
.city-service-card,
.contact-card {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border: 0;
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nearby-card:hover,
.area-card:hover,
.city-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgb(13 42 92 / 0.14);
}

.nearby-card h3,
.area-card h3,
.city-service-card h3,
.contact-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.nearby-card p,
.area-card p,
.city-service-card p {
  margin: 0;
  padding-right: 26px;
  font-size: 15px;
  line-height: 1.58;
  color: var(--muted);
}

.area-card-arrow,
.city-service-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: var(--accent-readable);
}

.area-card-arrow svg,
.city-service-arrow svg {
  width: 18px;
  height: 18px;
}

.nearby-card-all {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
}

.nearby-card-all h3 {
  color: #ffffff;
}

.nearby-card-all p {
  color: rgb(255 255 255 / 0.72);
}

.area-region:nth-of-type(even) {
  background: var(--surface);
}

/* --------------------------------------------------------------- *
 * Neighborhood list
 * --------------------------------------------------------------- */

.neighborhood-section {
  background: var(--surface);
}

.hood-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hood-list li {
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: 0 6px 16px rgb(13 42 92 / 0.07);
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
}

/* --------------------------------------------------------------- *
 * Reviews page — dark hero, card wall, load more
 * --------------------------------------------------------------- */

.rev-hero {
  position: relative;
  padding: clamp(72px, 10vw, 112px) 0 clamp(104px, 12vw, 156px);
  /* Same gradient as the Recent work and Coupons sections, with faint star and
     thumbs-up watermarks in place of the coupons block's "%". */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cg fill='%23ffffff' fill-opacity='0.031'%3E%3Cg transform='translate(190,70) scale(2.1) rotate(-8 50 55)'%3E%3Cpath fill-opacity='0.038' d='M50 4 61.9 38.1 96.5 38.1 68.3 59.2 79.4 93.3 50 72.2 20.6 93.3 31.7 59.2 3.5 38.1 38.1 38.1Z'/%3E%3C/g%3E%3Cg transform='translate(34,18) scale(0.9) rotate(20 50 55)'%3E%3Cpath d='M50 4 61.9 38.1 96.5 38.1 68.3 59.2 79.4 93.3 50 72.2 20.6 93.3 31.7 59.2 3.5 38.1 38.1 38.1Z'/%3E%3C/g%3E%3Cg transform='translate(452,8) scale(0.75) rotate(-24 50 55)'%3E%3Cpath d='M50 4 61.9 38.1 96.5 38.1 68.3 59.2 79.4 93.3 50 72.2 20.6 93.3 31.7 59.2 3.5 38.1 38.1 38.1Z'/%3E%3C/g%3E%3Cg transform='translate(62,268) scale(0.65) rotate(14 50 55)'%3E%3Cpath d='M50 4 61.9 38.1 96.5 38.1 68.3 59.2 79.4 93.3 50 72.2 20.6 93.3 31.7 59.2 3.5 38.1 38.1 38.1Z'/%3E%3C/g%3E%3Cg transform='translate(482,246) scale(1) rotate(30 50 55)'%3E%3Cpath d='M50 4 61.9 38.1 96.5 38.1 68.3 59.2 79.4 93.3 50 72.2 20.6 93.3 31.7 59.2 3.5 38.1 38.1 38.1Z'/%3E%3C/g%3E%3Cg transform='translate(14,142) scale(2.4) rotate(-15 12 12)'%3E%3Cpath d='M3 10h3.6v11H3a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10.2 12.3 2.4a1.9 1.9 0 0 1 3.3 1.9l-1.6 5.1h5.4a2 2 0 0 1 1.9 2.6l-2 6.6a2.4 2.4 0 0 1-2.3 1.7H8z'/%3E%3C/g%3E%3Cg transform='translate(436,150) scale(1.9) rotate(18 12 12)'%3E%3Cpath d='M3 10h3.6v11H3a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10.2 12.3 2.4a1.9 1.9 0 0 1 3.3 1.9l-1.6 5.1h5.4a2 2 0 0 1 1.9 2.6l-2 6.6a2.4 2.4 0 0 1-2.3 1.7H8z'/%3E%3C/g%3E%3Cg transform='translate(252,318) scale(2) rotate(-6 12 12)'%3E%3Cpath d='M3 10h3.6v11H3a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10.2 12.3 2.4a1.9 1.9 0 0 1 3.3 1.9l-1.6 5.1h5.4a2 2 0 0 1 1.9 2.6l-2 6.6a2.4 2.4 0 0 1-2.3 1.7H8z'/%3E%3C/g%3E%3Cg transform='translate(142,332) scale(1.5) rotate(22 12 12)'%3E%3Cpath d='M3 10h3.6v11H3a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10.2 12.3 2.4a1.9 1.9 0 0 1 3.3 1.9l-1.6 5.1h5.4a2 2 0 0 1 1.9 2.6l-2 6.6a2.4 2.4 0 0 1-2.3 1.7H8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
      right -3% center / 50% auto no-repeat,
    var(--grad-ink);
  color: #ffffff;
}

/* Plain .container width so the hero's left edge lines up with the section
   headings below it; the individual text blocks carry their own measure. */


.rev-hero-eyebrow {
  color: #79ccdd;
}

.rev-hero h1 {
  /* Headings carry a 720px max-width globally; this one needs ~766px to hold
     a single line at 56px. */
  max-width: none;
  margin: 12px 0 0;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #ffffff;
}

.rev-hero-lede {
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.78);
}

.rev-hero-agg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
}

.rev-hero-stars {
  color: #ffc247;
  font-size: 20px;
  letter-spacing: 2px;
}

.rev-hero-agg p {
  margin: 0;
  font-size: 15.5px;
  color: rgb(255 255 255 / 0.8);
}

.rev-hero-agg strong {
  color: #ffffff;
  font-size: 18px;
}

.rev-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.rev-write-btn {
  gap: 10px;
}

.rev-write-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* .prefooter-call paints its icon green at 24px for the phone glyph; this
   button borrows the treatment but carries a calendar, so match the label. */
.rev-hero-actions .prefooter-call svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* Masonry. Reviews vary from one sentence to a full paragraph, and a strict
   grid stretches every card in a row to match the longest — leaving a short
   review stranded in a tall empty box. Multi-column flow lets each card size
   to its own content instead. Cards keep the homepage .rev-card styling. */
.rev-wall-grid {
  display: block;
  column-count: 3;
  column-gap: 26px;
}

.rev-wall-grid [data-rvw-item] {
  /* Cards must not be split across a column boundary. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 26px;
}

.rev-wall-grid [data-rvw-item][hidden] {
  display: none;
}

.rev-wall-grid [data-rvw-item]:focus {
  outline: none;
}

@media (max-width: 1180px) {
  .rev-wall-grid {
    column-count: 2;
  }
}

/* Matches the breakpoint styles.css uses to collapse .rev-grid. */
@media (max-width: 980px) {
  .rev-wall-grid {
    column-count: 1;
  }
}

.rev-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 4vw, 52px);
}

/* Same component as the homepage "Load more", just a touch larger since here
   it stands on its own rather than sitting in a row. */
.rev-more-btn {
  padding: 13px 26px;
  font-size: 15px;
}

.rev-more-btn[hidden] {
  display: none;
}

/* --------------------------------------------------------------- *
 * Leave-a-review popup
 * --------------------------------------------------------------- */

.rvw-dialog {
  text-align: center;
}

.rvw-dialog h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.rvw-sub {
  margin: 12px 0 30px;
  font-size: 15.5px;
  color: var(--muted);
}

.rvw-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rvw-choice {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 34px) 16px;
  border: 0;
  border-radius: 18px;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Caption and icon both take the button's dark ink colour. */
.rvw-choice strong {
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}

.rvw-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: inherit;
}

.rvw-choice-up .rvw-choice-icon {
  background: #c2e9d3;
}

.rvw-choice-down .rvw-choice-icon {
  background: #f5c8c2;
}

.rvw-choice-icon svg {
  width: 38px;
  height: 38px;
}

/* Option D3 — barely tinted fill, light disc, dark caption. Both text colours
   clear 4.5:1 against their fill and their disc. */
.rvw-choice-up {
  background: linear-gradient(180deg, #e8f8ef 0%, #d7f1e3 100%);
  color: #16643a;
}

.rvw-choice-up:hover,
.rvw-choice-up.is-picked {
  background: linear-gradient(180deg, #ddf4e7 0%, #c9ecda 100%);
}

.rvw-choice-down {
  background: linear-gradient(180deg, #fdeeec 0%, #fadcd8 100%);
  color: #9c2f26;
}

.rvw-choice-down:hover,
.rvw-choice-down.is-picked {
  background: linear-gradient(180deg, #fbe4e1 0%, #f7cfca 100%);
}

.rvw-choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgb(13 42 92 / 0.1);
}

/* Inset ring so the selected state does not fight the hover shadow. */
.rvw-choice.is-picked {
  box-shadow: inset 0 0 0 2px currentColor;
}

.rvw-note {
  margin: 24px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 520px) {
  .rvw-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .rvw-choice {
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
    padding: 18px 20px;
  }

  .rvw-choice-icon {
    width: 54px;
    height: 54px;
  }

  .rvw-choice-icon svg {
    width: 27px;
    height: 27px;
  }
}

/* --------------------------------------------------------------- *
 * Contact
 * --------------------------------------------------------------- */

.contact-section {
  background: var(--surface);
}

/* --------------------------------------------------------------- *
 * Contact form
 * --------------------------------------------------------------- */

.form-section {
  background: var(--page);
}

.form-section-lede {
  max-width: 60ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
}

.contact-form {
  max-width: 940px;
  padding: clamp(26px, 3vw, 44px);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.cf-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cf-field-wide {
  grid-column: 1 / -1;
}

.cf-field > span {
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-strong);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cf-field textarea {
  resize: vertical;
  min-height: 128px;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.cf-field input:focus-visible,
.cf-field select:focus-visible,
.cf-field textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.cf-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: clamp(20px, 2.2vw, 28px);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.cf-consent input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin-top: clamp(22px, 2.4vw, 30px);
}

.cf-submit svg {
  width: 16px;
  height: 16px;
}

.cf-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Confirmation state — same mockup treatment as the callback popup. */
.cf-note.is-sent {
  color: var(--ink-strong);
  font-weight: 700;
}

@media (max-width: 620px) {
  .contact-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- *
 * Contact — ways to reach us vs. facts about the business
 * --------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}

.contact-ways {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}

.contact-way {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(22px, 2.2vw, 28px);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-way:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgb(13 42 92 / 0.14);
}

.contact-way-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-readable);
}

.contact-way-icon svg {
  width: 22px;
  height: 22px;
}

.contact-way-copy {
  display: block;
}

.contact-way-copy small {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.contact-way-copy strong {
  display: block;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.contact-way-copy > span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Facts, not actions — no card, no hover, just a legible list. */
.contact-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-facts > div {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.contact-facts > div:first-child {
  padding-top: 0;
}

.contact-facts > div:last-child {
  border-bottom: 0;
}

.contact-facts dt {
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-top: 3px;
}

.contact-facts dd {
  margin: 0;
  color: var(--ink-strong);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
}

/* The muted note under a fact is a <small>, not a <span>, since 2026-09-02:
   the licence number needed an element of its own for the inline editor
   (contact.html annotates it), and a bare `dd span` rule would have restyled
   that wrapper into a second note line. Every property the old rule set is
   explicit here, so <small>'s own "smaller" never shows. */
.contact-facts dd small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .contact-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-card p {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-strong);
}

.contact-card p a {
  color: var(--accent-readable);
}

.contact-note {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
}

/* --------------------------------------------------------------- *
 * Project gallery
 * --------------------------------------------------------------- */

/* Three across, always — these are case notes read side by side, and auto-fit
   was letting the row reflow to two on mid-size screens. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}

/* Borrowed from .svc-card: no border, a soft shadow instead, and a white
   rounded shelf that overlaps the photo. No hover lift or image zoom here —
   unlike a service card, a case note is not a link. */
.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
}

.project-media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
}

.project-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-body {
  position: relative;
  flex: 1;
  margin-top: -24px;
  padding: 26px clamp(22px, 1.9vw, 26px) 30px;
  border-radius: 22px 22px 0 0;
  background: var(--surface-raised);
}

/* Scoped to .project-body so it outranks the `.project-body p` rule below —
   without that this loses on specificity and renders as plain body copy. */
.project-body .project-meta {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-readable);
}

/* h3 on /work.html, h4 on the homepage — the homepage nests these under the
   section's own h2 and a "Case notes" h3, so the heading level drops by one. */
.project-body h3,
.project-body h4 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}

/* Lead-in for the case-note grid inside the homepage's work section. */
.work-notes-head {
  margin: clamp(48px, 5vw, 68px) 0 clamp(22px, 2.4vw, 30px);
}

.work-notes-head h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.project-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 980px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- *
 * Prefooter trust line — sits under the CTA buttons, dot separated
 * --------------------------------------------------------------- */

/* Sized to sit on a single line inside the prefooter's 620px copy column.
   Still allowed to wrap on small screens rather than overflow. */
.prefooter-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: rgb(255 255 255 / 0.75);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.012em;
}

.prefooter-trust li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.prefooter-trust li:not(:last-child)::after {
  margin: 0 8px;
  color: rgb(255 255 255 / 0.4);
  content: "·";
}

/* Below this the single line no longer fits. Two per row rather than one —
   the pairs are short enough to sit side by side, and four separate lines read
   as a list when it should read as a strip. Separators dropped since a grid
   cell boundary already does that job. */
@media (max-width: 620px) {
  .prefooter-trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 6px 20px;
  }

  .prefooter-trust li {
    justify-content: center;
  }

  .prefooter-trust li::after {
    content: none;
  }
}

/* --------------------------------------------------------------- *
 * Call popup, variant B — inherits .cb layout, adds icon, dial row,
 * and copy button.
 * --------------------------------------------------------------- */

.cb2-dialog {
  text-align: center;
}

.cb2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  /* Same green family as the header call icon and the Call me now button. */
  background: #e2f4ea;
  color: #33a867;
}

.cb2-icon svg {
  width: 38px;
  height: 38px;
}

.cb2-promise {
  margin: 12px 0 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Two flex rules either side of the label, rather than a label chip painted
   over one long rule — the dialog has a gradient background, so any solid
   chip colour shows as a visible block. */
.cb2-divider {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 26px 0 22px;
}

.cb2-divider::before,
.cb2-divider::after {
  flex: 1;
  height: 1px;
  background: var(--line);
  content: "";
}

.cb2-divider span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cb2-dial-label {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--muted);
}

.cb2-dial-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

/* Display text, not a link — the copy button is how you take the number. */
.cb2-number {
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

/* Same colour as the "Simply dial us" label above it (var(--muted)), so the
   navy number stays the only emphasised thing in this block. */
.cb2-copy {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cb2-copy:hover {
  background: var(--muted);
  color: #ffffff;
}

.cb2-copy.is-copied {
  border-color: #16a34a;
  background: #dcfce7;
  color: #15803d;
}

.cb2-copy-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------- *
 * Responsive
 * --------------------------------------------------------------- */

/* Drop the right-hand list clear of the eyebrow and settle it just below the
   section heading. Only applies while the grid is actually two columns. */
@media (min-width: 901px) {
  .includes-list,
  .hood-list {
    padding-top: 68px;
  }
}

@media (max-width: 900px) {
  .page-hero-grid,
  .includes-grid,
  .neighborhood-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero-media {
    order: -1;
  }

  .page-hero-media img {
    max-height: 300px;
  }

  /* Single column now, so the frame centres and keeps its own 4:3 height rather
     than the 300px cap above. */
  .page-hero-rounded .page-hero-grid {
    min-height: 0;
  }

  .page-hero-rounded .page-hero-media {
    width: min(100%, 660px);
    min-height: 0;
    justify-self: center;
  }

  .page-hero-rounded .page-hero-media img {
    max-height: none;
  }

  .step-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .page-hero-actions .button {
    width: 100%;
  }
}

/* --------------------------------------------------------------- *
 * Header logo — narrow phones
 * --------------------------------------------------------------- */

/* brand.css pins .brand-logo-image to 268px inside its own max-width:760px
   query, so it beats the 205px in styles.css (later file wins). At 268px the
   logo + 32px gap + 48px toggle exceed a 360px viewport and the page scrolls
   sideways. Let the brand column shrink instead of forcing its content width. */
@media (max-width: 767px) {
  .nav-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand-logo-image {
    max-width: 100%;
  }
}

/* .prefooter-call svg in brand.css paints the handset #33a867 at 24px, which
   on the bar's green disc is a green icon on a green field. Same specificity,
   later file wins — so the correction has to live here. */
@media (max-width: 767px) {
  .mobile-conversion .mobile-conversion-icon svg {
    width: 15px;
    height: 15px;
    color: #ffffff;
  }
}