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

:root {
  color-scheme: light dark;
  --page: #f3f5f2;
  --surface: #fbfcfa;
  --surface-raised: #ffffff;
  --ink: #102b35;
  --ink-strong: #0d1b20;
  --muted: #5b686a;
  --line: #d7dedb;
  --line-strong: #bcc7c3;
  --accent: #059cab;
  --accent-hover: #078592;
  --accent-soft: #def1f5;
  --on-accent: #fffaf7;
  --error: #017179;
  --focus: #1e667e;
  --shadow: 0 24px 80px rgb(16 43 53 / 0.12);
  --radius: 16px;
  --pill: 999px;
  --container: 1380px;
  --header-container: 1460px;
  --header-height: 92px;
  /* Logo height ceilings. A generated tenant's logo can be any shape, so it
     is constrained by HEIGHT and letterboxed, never by width alone. */
  /* A light tint of the accent, for the hero eyebrow on a dark panel.
     Was a raw #98d5e0, which is a tint of the brand orange and therefore
     invisible to an RGB-distance audit. */
  --accent-tint: #98d5e0;
  /* The accent used as TEXT on the page. Defaults to the accent itself;
     a tenant whose accent is illegible on light (yellow scores 1.11:1)
     overrides this with a darkened variant. */
  --accent-readable: var(--accent);
  --logo-max-h: 68px;
  --logo-max-h-footer: 56px;
  /* The trade emblem, sized independently of the two above. It is a solid
     single-colour mark rather than a whole lockup, so it does not want the
     height a scraped logo image gets — and it is the one height that is the
     same in the header and the footer.

     42px is the default and most marks want it, but the box is not what sets
     a mark's weight — the INK inside it is, and the two differ by a lot. The
     wrench and the concrete blocks are both 0.8:1 and only one of them is
     mostly outline: at a shared 42px the blocks read as a slab beside a 27px
     wordmark while the wrench reads as a line drawing. Aspect ratio does not
     predict this and nothing can compute it, so a pack whose art is dense
     overrides the height per emblem with `emblem.height`, which rides down on
     the same inline style as the src and the ratio. Two do today, both solid
     fills: concrete and wildlife, at 27px. */
  --emblem-h: 42px;
  --utility-height: 38px;
  --trust-height: 0px;
  --font-sans: "Google Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d171a;
    --surface: #101e22;
    --surface-raised: #15262b;
    --ink: #edf3f0;
    --ink-strong: #f7faf8;
    --muted: #aab7b4;
    --line: #2c3e42;
    --line-strong: #42575b;
    --accent: #03aebf;
    --accent-hover: #46becf;
    --accent-soft: #183539;
    --on-accent: #0d171a;
    --error: #ff9a91;
    --focus: #77c3dd;
    --shadow: 0 24px 80px rgb(0 0 0 / 0.28);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d171a;
  --surface: #101e22;
  --surface-raised: #15262b;
  --ink: #edf3f0;
  --ink-strong: #f7faf8;
  --muted: #aab7b4;
  --line: #2c3e42;
  --line-strong: #42575b;
  --accent: #03aebf;
  --accent-hover: #46becf;
  --accent-soft: #183539;
  --on-accent: #0d171a;
  --error: #ff9a91;
  --focus: #77c3dd;
  --shadow: 0 24px 80px rgb(0 0 0 / 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.container {
  width: min(calc(100% - 56px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink-strong);
  color: var(--page);
  transform: translateY(-160%);
  transition: transform 180ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page);
  box-shadow: 0 10px 28px rgb(16 43 53 / 0.12);
  transition: box-shadow 220ms var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 14px 40px rgb(16 43 53 / 0.2);
}

.utility-bar {
  height: var(--utility-height);
  background: var(--ink-strong);
  color: #ffffff;
}

.utility-bar-inner {
  display: flex;
  width: min(calc(100% - 48px), var(--header-container));
  height: 100%;
  margin-inline: auto;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}

.utility-divider {
  width: 1px;
  height: 14px;
  background: rgb(255 255 255 / 0.28);
}

.utility-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.utility-links a,
.open-status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.utility-links a {
  color: rgb(255 255 255 / 0.78);
}

.utility-links a:hover {
  color: #ffffff;
}

.open-status {
  margin: 0;
  color: rgb(255 255 255 / 0.88);
}

.open-status strong {
  color: #ffffff;
}

.open-status .status-open {
  color: #4ade80;
}

.open-status .status-contact {
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  transition: color 160ms ease;
}

.open-status .status-contact:hover {
  color: #7ecdda;
}

.nav-shell {
  display: grid;
  width: min(calc(100% - 48px), var(--header-container));
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: var(--header-height);
  gap: 32px;
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 0;
  line-height: 1;
}

/* Trade emblem, shown only beside a GENERATED wordmark — a business whose own
   logo we scraped already has its mark and does not want ours next to it.
   Rendered as a mask rather than an <img> so it can take a colour at all: the
   emblem files are single-colour art, and an <img> cannot inherit
   currentColor, which would pin every demo to the template's navy. The aspect
   ratio rides in on --emblem-ratio because the marks are not square (the roof
   mark is 870x364, the snowflake 512x512).

   The mark is the ACCENT, and the wordmark beside it stays dark — the
   two-tone lockup the schemes already draw, now the default rather than
   something only a scheme switched on. It follows --accent, so a scraped
   tenant gets their own brand colour here for the same reason. */
.brand-emblem {
  height: var(--emblem-h);
  aspect-ratio: var(--emblem-ratio, 1);
  flex: none;
  background-color: var(--accent);
  -webkit-mask: var(--emblem-src) center / contain no-repeat;
  mask: var(--emblem-src) center / contain no-repeat;
  /* Optical centring, per emblem, on top of the flex row's geometric
     centring. A trimmed mask box centres the BOX, and a mark whose mass is
     not evenly distributed inside that box then sits wrong against a
     wordmark's cap height — the concrete staircase carries its weight in the
     lower-left, so centred it reads low. A transform rather than a margin
     deliberately: this must not change the row's height or the header would
     grow by the nudge. */
  transform: translateY(var(--emblem-nudge, 0));
}

/* The emblem and the wordmark are one lockup rather than two things next to
   each other, so this stays tight — but the mask box is trimmed to the
   artwork, with no baked-in padding absorbing part of the gap, and a mark
   whose art runs right to the edge of its box (the concrete blocks) reads as
   touching the W at 8px. */
.brand-has-emblem {
  gap: 15px;
}

/* A logo drawn for the customer's own dark header, sitting on our light one.
   Rather than drop their branding or invert it (which mangles any colour in
   the mark), we give it back the dark surface it was designed for. Tinted from
   the tenant's own ink so it reads as part of the palette rather than a black
   box, and padded so the mark never touches the edge. */
.brand-logo-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--ink-strong);
}

.brand-logo-image {
  /* Sized by HEIGHT, not width: a generated tenant logo can be any aspect.
     Width-first sizing rendered a portrait shield 372px tall and destroyed the
     header, then left 220px of dead space before the nav once capped. */
  height: var(--logo-max-h);
  width: auto;
  max-width: 268px;
  object-fit: contain;
  object-position: left center;
  display: block;
  /* Photoshop's Darken, and for the same reason: a scraped logo is very often
     an opaque rectangle with a white background baked in, which reads as a
     bright box against our near-white header. Best Overhead Doors' mark was
     47.5% pure-white padding, taken from their apple-touch-icon — a tier that
     is ALWAYS opaque, because iOS composites those onto its own rounded rect.

     min(source, backdrop) per channel, so a pure-white pixel becomes exactly
     the backdrop whatever colour that is, and any channel already darker than
     the backdrop passes through untouched — the mark itself is not dimmed.
     `multiply` also erases the white, but scales every channel by the backdrop
     ratio and cost that logo's red about 4%.

     Two things this does NOT survive, both handled: a mark with a channel
     brighter than the backdrop gets clamped (rare, and still better than a
     white box), and a LIGHT logo on the dark chip below would be blended into
     mush — hence the override. An off-white rather than pure-white background
     only fades toward the backdrop rather than vanishing; keying the alpha out
     at fetch time is the fix for that, if we ever meet one. */
  mix-blend-mode: darken;
}

/* The two cases are mutually exclusive by construction — needsDarkBacking is
   true exactly when the mark is too LIGHT to read on our near-white header —
   so blending here would darken a pale logo into its own dark chip. Higher
   specificity than the rule above and than brand.css's later .brand-logo-image,
   so it wins on either side of the cascade. */
.brand-logo-chip .brand-logo-image {
  mix-blend-mode: normal;
}

/* How the uploaded logo sits in the bar — two operator settings from the CMS's
   Design settings, carried on .brand (template/lib/logo.mjs): a class each,
   and the size as an inline --logo-scale (1 = the header's own size). The
   default size has neither: these rules only ever ADD to the default above.

   Size, inside the bar: the height and the width cap scale together, so a
   wide logo is not held to 268px while a tall one gets its full height.
   .nav-shell is min-height, so a scale past ~1.35 grows the header rather
   than clipping the mark. */
.brand-scaled .brand-logo-image {
  height: calc(var(--logo-max-h) * var(--logo-scale, 1));
  max-width: calc(268px * var(--logo-scale, 1));
}

/* Hanging: the bar keeps its height and the mark hangs out of it, down over
   the hero — a shield or a badge the way it sits on the prospect's own site.
   The link is pinned to the in-bar logo height and aligned to its top, so the
   grid row does not grow and everything past --logo-max-h overflows the
   bottom edge. The header is sticky with z-index above the page, so the
   overhang paints over the hero rather than under it.

   Two things this must undo. mix-blend-mode: darken would blend the mark's
   light parts into the dark hero and make it vanish — so the hanging logo
   composites normally, and a baked-in white background shows as the white
   box it is (the Crop dialog is the fix, not this rule). And a sticky header
   that kept a 150px mark hanging over every paragraph would be the opposite
   of "out of the way", so once the page is scrolled it tucks back into the
   bar at the in-bar height — script.js toggles .is-scrolled — and drops back
   out at the top.

   Desktop only: on a phone the overhang lands on the hero heading, so under
   768px the logo sits in the bar at its size like any other. */
@media (min-width: 768px) {
  .brand-hang {
    --logo-hang-h: 150px;
    height: var(--logo-max-h);
    align-items: flex-start;
  }

  /* Later than .brand-scaled's rule at the same specificity, so a scaled AND
     hanging logo takes the hanging height — scaled by the same property. */
  .brand-hang .brand-logo-image {
    height: calc(var(--logo-hang-h) * var(--logo-scale, 1));
    max-width: none;
    mix-blend-mode: normal;
    filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.28));
    transition: height 220ms var(--ease);
  }

  /* Unless the operator switched the tuck off (brand-hang-stays), in which
     case the mark rides over the page at full size — their call. */
  .site-header.is-scrolled .brand-hang:not(.brand-hang-stays) .brand-logo-image {
    height: var(--logo-max-h);
  }
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
}

.brand-name {
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: 27px;
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-trade {
  margin-top: 7px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 1.8vw, 34px);
  white-space: nowrap;
}

.desktop-nav > a,
.nav-dropdown > summary {
  position: relative;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.055em;
  transition: color 160ms ease;
}

.desktop-nav > a:hover,
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary {
  color: var(--ink-strong);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown[open]::after {
  position: absolute;
  top: 100%;
  left: -20px;
  width: calc(100% + 40px);
  height: 20px;
  content: "";
}

.nav-dropdown > summary,
.desktop-nav > .nav-link {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: 4px;
  padding-block: 26px;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary span {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 3px solid var(--accent);
  border-right: 2.5px solid transparent;
  border-left: 2.5px solid transparent;
  font-size: 0;
  line-height: 0;
  transform-origin: 50% 42%;
  transition: transform 180ms var(--ease);
}

.nav-dropdown[open] > summary span {
  transform: rotate(180deg);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 30;
  display: grid;
  width: min(300px, calc(100vw - 48px));
  grid-template-columns: 1fr;
  overflow: visible;
  padding: 16px;
  border: 0;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 10px 20px rgb(16 43 53 / 0.16), 0 24px 54px rgb(16 43 53 / 0.3);
  opacity: 0;
  transform: translate(-50%, 8px);
  animation: nav-dropdown-in 180ms var(--ease) forwards;
}

.nav-dropdown-panel::before {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--surface-raised);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown-panel-end {
  right: auto;
  left: 50%;
  transform: translate(-50%, 8px);
}

.nav-dropdown-panel-end::before {
  right: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.nav-mega-main,
.nav-mega-aside {
  position: relative;
  z-index: 1;
  padding: 0;
}

.nav-mega-label {
  display: none;
}

.nav-mega-item {
  display: block;
  padding: 13px 16px;
  border-radius: 10px;
  color: var(--ink-strong);
  transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.nav-mega-item:last-child {
  border-bottom: 0;
}

.nav-mega-item strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nav-mega-item span {
  display: none;
}

.nav-mega-item:hover,
.nav-mega-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-readable);
  transform: translateX(3px);
}

.nav-mega-cta {
  margin-top: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface-raised));
}

@keyframes nav-dropdown-in {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.nav-dropdown-panel-end {
  animation-name: nav-dropdown-in;
}

@keyframes nav-dropdown-end-in {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  white-space: nowrap;
}

.nav-book {
  padding: 15px 30px;
  font-size: 16px;
}

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--ink-strong);
  transition: color 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}

.header-call:hover {
  border-color: var(--accent);
  color: var(--accent-readable);
  transform: translateY(-1px);
}

.header-call-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  background: transparent;
  color: #33a867;
}

.header-call-icon svg {
  width: 25px;
  height: 25px;
}

.header-call-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.header-call-copy small {
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.header-call-copy strong {
  color: currentColor;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid var(--accent);
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 180ms var(--ease), box-shadow 220ms var(--ease);
}

.button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 24%, transparent);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.99);
}

.button-small {
  min-height: 42px;
  padding-inline: 20px;
  font-size: 13px;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  place-items: center;
  /* Without this the grid rows stretch to fill 48px, spreading the bars ~16px
     apart and breaking the X offsets below. Centred content keeps the pitch at
     bar height + gap = 7.5px. */
  align-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  transition: transform 220ms var(--ease);
}

/* Three bars closed, X open: the middle bar fades out and the outer two meet
   in the centre. Offsets are bar height (1.5px) + gap (6px) = 7.5px. */
.menu-toggle span {
  transition: transform 220ms var(--ease), opacity 140ms ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-7.5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: calc(var(--header-height) + var(--utility-height) + var(--trust-height)) 0 0;
  z-index: 30;
  height: calc(100dvh - var(--header-height) - var(--utility-height) - var(--trust-height));
  overflow-y: auto;
  padding: 32px 28px max(32px, env(safe-area-inset-bottom));
  background: var(--page);
}

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

.mobile-menu a:not(.button) {
  display: block;
  padding: 14px 0;
  color: var(--ink-strong);
  font-size: 24px;
  font-weight: 650;
}

.mobile-nav-group {
  margin-bottom: 2px;
}

.mobile-nav-group summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  color: var(--ink-strong);
  font-size: 24px;
  font-weight: 650;
}

/* A top-level custom page with nothing under it — a link where its siblings
   are <details>. Same type and rhythm, no caret to push anywhere. The
   :not(.button) rule below would otherwise shrink it to a panel child's 16px,
   so this sits after it in the cascade by specificity, not by order. */
.mobile-menu > .mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 16px 0;
  color: var(--ink-strong);
  font-size: 24px;
  font-weight: 650;
}

.mobile-nav-group summary::-webkit-details-marker {
  display: none;
}

.mobile-nav-group summary span {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 5px solid var(--accent);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  font-size: 0;
  line-height: 0;
  transform-origin: 50% 42%;
  transition: transform 180ms var(--ease);
}

.mobile-nav-group[open] summary span {
  transform: rotate(180deg);
}

.mobile-menu .mobile-nav-group a:not(.button) {
  padding: 11px 14px;
  border: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.mobile-nav-group div {
  padding: 0 0 12px;
}

.mobile-menu .button {
  width: 100%;
  margin-top: 24px;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100dvh - var(--header-height) - var(--utility-height) - var(--trust-height));
  align-items: center;
  overflow: hidden;
  padding: 0;
  background: #091416;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(7 23 29 / 0.92) 0%, rgb(7 23 29 / 0.86) 32%, rgb(7 23 29 / 0.72) 49%, rgb(7 23 29 / 0.46) 60%, rgb(7 23 29 / 0.16) 73%, rgb(7 23 29 / 0.08) 100%),
    linear-gradient(180deg, rgb(7 23 29 / 0.14) 0%, rgb(7 23 29 / 0.02) 45%, rgb(7 23 29 / 0.26) 100%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  min-height: inherit;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(100%, 880px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(64px, 9vh, 92px) 0;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink-strong);
  font-weight: 760;
  letter-spacing: -0.045em;
}

h1 {
  max-width: 720px;
  margin-bottom: 28px;
  font-size: clamp(52px, 4.4vw, 62px);
  line-height: 0.98;
}

.hero h1 span {
  display: block;
}

.hero h1 {
  max-width: 790px;
  color: #f7faf8;
  font-size: clamp(56px, 5.6vw, 78px);
  line-height: 0.94;
  text-shadow: 0 3px 30px rgb(7 23 29 / 0.38);
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(39px, 4.2vw, 62px);
  line-height: 1.02;
}

h3 {
  font-size: 23px;
  line-height: 1.12;
}

.hero-lede {
  max-width: 510px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
}

.hero .eyebrow {
  color: var(--accent-tint);
  text-shadow: 0 2px 18px rgb(7 23 29 / 0.7);
}

.hero .hero-lede {
  max-width: 570px;
  margin-bottom: 24px;
  color: #d8e2df;
  font-size: clamp(18px, 1.6vw, 22px);
  text-shadow: 0 2px 20px rgb(7 23 29 / 0.72);
}

.hero .text-link {
  color: #f7faf8;
  text-shadow: 0 2px 16px rgb(7 23 29 / 0.72);
}

.hero a:focus-visible {
  outline-color: #f7faf8;
}

.hero-proof {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #f7faf8;
  font-size: 14px;
  text-shadow: 0 2px 16px rgb(7 23 29 / 0.72);
}

.review-avatars {
  display: flex;
  align-items: center;
}

.review-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}

.review-avatar-front {
  z-index: 3;
  opacity: 1;
}

.review-avatar-middle {
  z-index: 2;
  margin-left: -12px;
  opacity: 0.7;
}

.review-avatar-back {
  z-index: 1;
  margin-left: -12px;
  opacity: 0.3;
}

.review-rating {
  font-size: 15px;
  font-weight: 850;
}

.review-stars {
  color: #ffbd2e;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.review-count {
  color: #e3ebe8;
  font-weight: 700;
  white-space: nowrap;
}

.hero-action-grid {
  display: grid;
  width: min(100%, 860px);
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: 10px;
}

.hero-action {
  display: flex;
  min-width: 0;
  min-height: 78px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  background: rgb(9 20 22 / 0.76);
  color: #f7faf8;
  box-shadow: 0 16px 36px rgb(7 23 29 / 0.2);
  transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease;
}

.hero-action:hover {
  background: rgb(13 34 40 / 0.92);
  transform: translateY(-3px);
}

.hero-action-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.hero-action-primary:hover {
  background: var(--accent-hover);
}

.hero-action-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(247 250 248 / 0.1);
}

.hero-action-primary .hero-action-icon {
  background: rgb(255 250 247 / 0.14);
}

.hero-action-icon svg {
  width: 21px;
  height: 21px;
}

.hero-action-call .hero-action-icon {
  background: transparent;
  color: var(--accent-readable);
}

.hero-action-call .hero-action-icon svg {
  width: 32px;
  height: 32px;
}

.hero-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.hero-action-copy strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-action-copy small {
  overflow: hidden;
  color: #cdd8d5;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-action-call-copy small {
  font-size: 10px;
  font-weight: 500;
}

.hero-action-call-copy strong {
  font-size: 16px;
  font-weight: 850;
}

.hero-action-primary .hero-action-copy small {
  color: color-mix(in srgb, var(--on-accent) 82%, transparent);
}

.hero-action-arrow {
  margin-left: auto;
  font-size: 20px;
  transition: transform 180ms var(--ease);
}

.hero-action-primary:hover .hero-action-arrow {
  transform: translateX(3px);
}

.hero-actions,
.urgent-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}

.text-link span {
  display: inline-block;
  transition: transform 180ms var(--ease);
}

.text-link:hover span {
  transform: translateX(4px);
}

.hero-media,
.services-media,
.process-media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  border-radius: 0;
  background: #091416;
  box-shadow: none;
}

.hero-credential-badge {
  position: absolute;
  top: 54%;
  right: max(24px, calc((100vw - 1560px) / 2));
  z-index: 3;
  display: grid;
  width: 236px;
  justify-items: center;
  gap: 16px;
  color: #ffffff;
  transform: translateY(-50%);
}

.satisfaction-seal {
  width: 182px;
  height: 182px;
  filter: drop-shadow(0 16px 32px rgb(0 0 0 / 0.38));
  transform: rotate(-7deg);
  transition: transform 600ms var(--ease);
}

.hero-credential-badge:hover .satisfaction-seal {
  transform: rotate(0deg) scale(1.04);
}

.satisfaction-seal svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-credential-badge p {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 13px 20px 15px;
  border: 0;
  border-radius: 14px;
  background: rgb(8 19 22 / 0.58);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.hero-credential-badge p strong,
.hero-credential-badge p span {
  display: block;
}

.hero-credential-badge p strong {
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.hero-credential-badge p span {
  color: #81cfdf;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.hero-media picture,
.hero-media img,
.services-media picture,
.services-media img,
.process-media picture,
.process-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media img,
.services-media img,
.process-media img {
  object-fit: cover;
}

.hero-media img {
  object-position: 50% 50%;
}

.about {
  background: var(--surface);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(46px, 6vw, 108px);
}

.about-media {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.about-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -22px;
  bottom: -22px;
  width: 60%;
  height: 60%;
  border: 2px solid var(--accent);
  border-radius: 22px;
}

.about-frame {
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 3 / 2;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.about-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.about-media:hover .about-frame img {
  transform: scale(1.03);
}

.about-badge {
  position: absolute;
  right: -18px;
  bottom: -22px;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding: 16px 22px;
  border-radius: 16px;
  background: var(--ink-strong);
  box-shadow: 0 18px 40px rgb(7 23 29 / 0.28);
}

.about-badge strong {
  display: flex;
  align-items: baseline;
  color: var(--accent-readable);
  font-size: 40px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.03em;
}

.about-badge strong span {
  font-size: 23px;
}

.about-badge em {
  max-width: 118px;
  color: rgb(255 255 255 / 0.82);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.issue-heading p,
.services-copy p,
.area-intro p,
.faq-intro > p:last-child,
.request-copy > p {
  max-width: 600px;
  margin-bottom: 0;
  color: var(--muted);
}

.about-kicker {
  margin: 0 0 18px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-copy h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.about-title-link {
  color: var(--accent-readable);
  text-decoration: none;
  transition: color 160ms ease;
}

.about-title-link:hover {
  color: var(--accent-hover);
}

.about-lede {
  max-width: 560px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}

.about-points {
  display: grid;
  gap: 18px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.about-points strong {
  color: var(--ink-strong);
  font-weight: 800;
}

.about-point-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-readable);
}

.about-point-icon svg {
  width: 18px;
  height: 18px;
}

.about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding-top: 8px;
}

.about-cta-lead {
  margin: 0;
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 800;
}

.about-cta-btn span {
  display: inline-block;
  transition: transform 180ms var(--ease);
}

.about-cta-btn:hover span {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-media {
    max-width: 560px;
  }

  .about-media::before {
    left: -14px;
    bottom: -14px;
  }

  .about-badge {
    right: 18px;
  }

  .about-lede {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .about-media::before {
    display: none;
  }

  .about-badge {
    right: 14px;
    bottom: -18px;
    padding: 13px 18px;
  }

  .about-badge strong {
    font-size: 32px;
  }
}

.section {
  padding: clamp(92px, 10vw, 148px) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px;
}

.services-copy {
  grid-column: 1 / 8;
  padding-right: 6vw;
}

.services-copy p {
  font-size: 19px;
}

.service-index {
  grid-column: 1 / 7;
  align-self: end;
}

.service-item {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  transition: border-color 180ms ease;
}

.service-item:first-child {
  border-top: 1px solid var(--line);
}

.service-item > span:first-child {
  display: grid;
  gap: 5px;
}

.service-item strong {
  color: var(--ink-strong);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.service-item small {
  color: var(--muted);
  font-size: 14px;
}

.service-item > span:last-child {
  color: var(--accent-readable);
  font-size: 20px;
  transition: transform 180ms var(--ease);
}

.service-item:hover {
  border-color: var(--accent);
}

.service-item:hover > span:last-child {
  transform: translate(4px, -4px);
}

.services-media {
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  height: 720px;
}

.services-media img {
  object-position: center;
  transition: transform 700ms var(--ease);
}

.services-media:hover img,
.process-media:hover img {
  transform: scale(1.02);
}

.svc-head {
  max-width: 860px;
  margin: 0 auto clamp(48px, 6vw, 78px);
  text-align: center;
}

.svc-kicker {
  margin: 0 0 16px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.svc-head h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.svc-lede {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}

.svc-grid {
  display: grid;
  /* --svc-cols is set inline on the homepage grid only, by a client whose
     home.serviceCards is short of four (see build.mjs) — every other
     .svc-grid (the hub's all-services list, related-grid, post-grid) has no
     such element in its ancestry, so this falls back to 4 for them exactly
     as it always did. The narrower breakpoints below stay hardcoded on
     purpose: they already show fewer columns than four. */
  grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr));
  gap: 26px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: inherit;
  box-shadow: 0 1px 2px rgb(16 43 53 / 0.05);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms ease;
}

.svc-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

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

.svc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.svc-card:hover .svc-card-media img {
  transform: scale(1.05);
}

.svc-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  padding: 24px 24px 28px;
}

.svc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.svc-card-top h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: color 180ms ease;
}

.svc-card:hover .svc-card-top h3 {
  color: var(--accent-readable);
}

.svc-card-arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-readable);
  transition: transform 220ms var(--ease);
}

.svc-card-arrow svg {
  width: 17px;
  height: 17px;
}

.svc-card:hover .svc-card-arrow {
  transform: translateX(3px);
}

.svc-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.svc-extra {
  margin-top: clamp(50px, 6vw, 76px);
  text-align: center;
}

.svc-extra-title {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.svc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 750;
  transition: background 180ms ease, transform 180ms var(--ease);
}

.svc-chip svg {
  width: 17px;
  height: 17px;
  transition: transform 180ms var(--ease);
}

.svc-chip:hover {
  background: var(--line);
  transform: translateY(-2px);
}

.svc-chip:hover svg {
  transform: translateX(3px);
}

@media (max-width: 1080px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

.rev-head {
  max-width: 900px;
  margin: 0 auto clamp(46px, 6vw, 74px);
  text-align: center;
}

.rev-kicker {
  margin: 0 0 16px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rev-head h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.rev-agg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.rev-agg-stars {
  color: #ffbd2e;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.rev-agg strong {
  color: var(--ink-strong);
  font-weight: 800;
}

.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.rev-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 30px;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 8px 26px rgb(16 43 53 / 0.07);
}

.rev-stars {
  color: #ffbd2e;
  font-size: 17px;
  letter-spacing: 0.08em;
}

.rev-quote {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

.rev-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.rev-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.rev-meta {
  display: grid;
  gap: 2px;
}

.rev-meta strong {
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 800;
}

.rev-meta span {
  color: var(--muted);
  font-size: 13px;
}

.rev-more {
  margin-top: clamp(38px, 4.5vw, 56px);
  text-align: center;
}

@media (max-width: 980px) {
  .rev-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}

.work {
  background: var(--ink-strong);
  color: #ffffff;
}

.work-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(42px, 5vw, 66px);
}

.work-kicker {
  margin: 0 0 16px;
  color: #79ccdd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work-head-main h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.work-head-aside {
  padding-top: 6px;
  padding-left: clamp(24px, 3vw, 48px);
  border-left: 1px solid rgb(255 255 255 / 0.15);
}

.work-head-aside p {
  margin: 0 0 22px;
  color: rgb(255 255 255 / 0.72);
  font-size: 16px;
  line-height: 1.6;
}

.work-proof {
  display: flex;
  align-items: center;
  gap: 12px;
}

.work-avatars {
  display: inline-flex;
}

.work-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ink-strong);
  object-fit: cover;
}

.work-avatars img + img {
  margin-left: -12px;
}

.work-rating {
  font-size: 15px;
  font-weight: 850;
}

.work-stars {
  color: #ffbd2e;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.work-reviews {
  color: rgb(255 255 255 / 0.7);
  font-size: 14px;
  font-weight: 600;
}

.work-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: clamp(44px, 5vw, 68px);
}

.work-stat strong {
  display: block;
  margin-bottom: 6px;
  color: #79ccdd;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.03em;
}

.work-stat-label {
  color: rgb(255 255 255 / 0.72);
  font-size: 14px;
  font-weight: 600;
}

.work-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 22px;
}

.work-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}

.work-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  transform: translateY(-2px);
}

.work-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.work-arrow svg {
  width: 18px;
  height: 18px;
}

.work-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.work-row::-webkit-scrollbar {
  display: none;
}

.work-tile {
  position: relative;
  flex: 0 0 calc((100% - 40px) / 3);
  overflow: hidden;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: var(--ink-strong);
  color: inherit;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}

.work-tile-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 8px 15px;
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.28);
}

.work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.work-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(7 23 29 / 0.45), transparent 50%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.work-tile:hover img {
  transform: scale(1.06);
}

.work-tile:hover::after {
  opacity: 1;
}

.work-more {
  margin-top: clamp(40px, 5vw, 62px);
  text-align: center;
}

.work-btn {
  gap: 10px;
}

.work-btn span {
  display: inline-block;
  transition: transform 180ms var(--ease);
}

.work-btn:hover span {
  transform: translateX(4px);
}

body.lightbox-open {
  overflow: hidden;
}

.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  background: rgb(5 15 18 / 0.96);
  color: #f7faf8;
}

.work-lightbox[hidden] {
  display: none;
}

.work-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.work-lightbox-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(22px, 3vw, 44px);
  flex-direction: column;
  pointer-events: none;
}

.work-lightbox-header {
  display: flex;
  width: min(100%, 1400px);
  margin: 0 auto 20px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.work-lightbox-count {
  display: block;
  margin-bottom: 5px;
  color: rgb(247 250 248 / 0.62);
  font-size: 13px;
  font-weight: 700;
}

.work-lightbox-header h2 {
  margin: 0;
  color: #f7faf8;
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.1;
}

/* The two lines a SOCIAL tile supplies and a work tile does not. Both are
   `hidden` in the markup and un-hidden per item by template/script.js, so the
   Recent-work lightbox renders exactly as it did before one dialog started
   serving both grids. A caption is prose, not a heading — measure-capped so a
   long post does not run the width of a desktop screen. */
.work-lightbox-caption {
  margin: 10px 0 0;
  max-width: 62ch;
  color: rgb(247 250 248 / 0.9);
  font-size: 15.5px;
  line-height: 1.55;
}

.work-lightbox-meta {
  margin: 6px 0 0;
  color: rgb(247 250 248 / 0.58);
  font-size: 12.5px;
  font-weight: 600;
}

.work-lightbox-close,
.work-lightbox-control,
.work-lightbox-stage img {
  pointer-events: auto;
}

.work-lightbox-close,
.work-lightbox-control {
  border: 0;
  background: #f7faf8;
  color: var(--ink-strong);
  cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms ease;
}

.work-lightbox-close:hover,
.work-lightbox-control:hover {
  background: #ffffff;
  transform: scale(1.04);
}

.work-lightbox-close:focus-visible,
.work-lightbox-control:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.work-lightbox-close {
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 750;
}

.work-lightbox-stage {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.work-lightbox-stage figure {
  display: flex;
  width: min(100%, 1240px);
  min-height: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}

.work-lightbox-stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 150px);
  border-radius: var(--radius);
  object-fit: contain;
}

.work-lightbox-control {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  width: 54px;
  height: 54px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  transform: translateY(-50%);
}

.work-lightbox-control:hover {
  transform: translateY(-50%) scale(1.05);
}

.work-lightbox-control svg {
  width: 20px;
  height: 20px;
}

.work-lightbox-control[data-work-lightbox-previous] {
  left: clamp(4px, 2vw, 26px);
}

.work-lightbox-control[data-work-lightbox-next] {
  right: clamp(4px, 2vw, 26px);
}

@media (max-width: 820px) {
  .work-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .work-head-aside {
    padding-left: 0;
    border-left: 0;
  }

  .work-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }

  .work-tile {
    flex-basis: 100%;
  }
}

.founder {
  overflow: hidden;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}

.founder-media {
  overflow: hidden;
  background: var(--surface);
}

.founder-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.founder-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(44px, 5.5vw, 88px);
  background: var(--accent);
  color: var(--on-accent);
}

.founder-since {
  margin: 0;
  color: color-mix(in srgb, var(--on-accent) 80%, transparent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.founder-mark {
  height: 26px;
  color: color-mix(in srgb, var(--on-accent) 50%, transparent);
  font-family: var(--font-sans);
  font-size: 66px;
  line-height: 1;
}

.founder-quote {
  max-width: 560px;
  margin: 0;
  color: var(--on-accent);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.founder-sign {
  display: grid;
  gap: 3px;
}

.founder-name {
  color: var(--on-accent);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.founder-role {
  color: color-mix(in srgb, var(--on-accent) 80%, transparent);
  font-size: 14px;
  font-weight: 600;
}

.founder-badge {
  position: absolute;
  top: clamp(26px, 4vw, 48px);
  right: clamp(26px, 4vw, 48px);
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--accent-readable);
  text-align: center;
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);
}

.founder-badge strong {
  display: flex;
  align-items: baseline;
  font-size: 30px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.03em;
}

.founder-badge strong span {
  font-size: 17px;
}

.founder-badge em {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }

  /* Aspect, not a fixed height. Stacked, the media goes full width, so a flat
     300px made a box around 2.7:1 against founder photos that are all close to
     16:9 — cover then threw away a third of the image HEIGHT, centred, which
     takes the top of the subject's head off on every trade. Matching the
     photos' own ratio keeps the crop on the sides, where these frames have
     room to spare. */
  .founder-media {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .founder-badge {
    width: 78px;
    height: 78px;
  }

  .founder-badge strong {
    font-size: 26px;
  }
}

.social-head {
  margin-bottom: clamp(38px, 4.5vw, 58px);
}

.social-head h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.social-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.social-follow > span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-icons a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-strong);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}

.social-icons a:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
}

.social-icons svg {
  width: 19px;
  height: 19px;
}

.social-feed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* A tile is a <button> that opens the gallery, not an <a> to a post that does
   not exist. These six declarations are the button reset .work-tile already
   carries for the same reason — without them a tile inherits the UA's border,
   padding, background and font and stops looking like a photograph. */
.social-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--surface);
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* /updates.html reuses .social-feed's grid and drops month headings into it.
   A heading is a grid ITEM, so without this it takes one tile's cell and the
   month starts mid-row. */
.updates-month {
  grid-column: 1 / -1;
  margin: 22px 0 2px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.updates-month:first-child {
  margin-top: 0;
}

.social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.social-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(7 23 29 / 0.4), transparent 46%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.social-tile:hover img {
  transform: scale(1.06);
}

.social-tile:hover::after {
  opacity: 1;
}

.social-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--accent-readable);
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
  transition: transform 200ms var(--ease);
}

.social-tile:hover .social-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.social-play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

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

@media (max-width: 480px) {
  .social-feed {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }

  /* One column means one square per screen, so four tiles run the length of the
     phone before anything else. Three, then Load more. */
  .social-feed:not(.is-expanded) .social-tile-capped {
    display: none;
  }
}

.coupons {
  background: var(--ink-strong);
  color: #ffffff;
}

.cpn-tag {
  display: inline-block;
  margin: 0 0 clamp(34px, 4vw, 50px);
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: clamp(21px, 2.4vw, 31px);
  font-weight: 850;
  letter-spacing: -0.015em;
}

.cpn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.cpn-card {
  padding: clamp(30px, 3vw, 44px) clamp(24px, 2.4vw, 34px);
  border: 2px dashed rgb(255 255 255 / 0.3);
  border-radius: 18px;
  text-align: center;
  transition: border-color 200ms ease, transform 200ms var(--ease);
}

.cpn-card:hover {
  border-color: rgb(255 255 255 / 0.55);
  transform: translateY(-4px);
}

.cpn-card h3 {
  margin: 0 0 14px;
  color: #79ccdd;
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cpn-sub {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

.cpn-desc {
  margin: 0 0 22px;
  color: rgb(255 255 255 / 0.68);
  font-size: 14px;
  line-height: 1.55;
}

.cpn-exp {
  margin: 0;
  color: rgb(255 255 255 / 0.45);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.cpn-more {
  margin-top: clamp(38px, 4.5vw, 58px);
  text-align: center;
}

.cpn-btn {
  gap: 10px;
}

.cpn-btn span {
  display: inline-block;
  transition: transform 180ms var(--ease);
}

.cpn-btn:hover span {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .cpn-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

.process {
  border-top: 1px solid var(--line);
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(46px, 7vw, 100px);
  align-items: center;
}

.process-media {
  height: 760px;
}

.process-media img {
  object-position: 42% center;
  transition: transform 700ms var(--ease);
}

.process-copy h2 {
  max-width: 540px;
}

.process-list {
  margin-top: 42px;
  border-top: 1px solid var(--line);
}

.process-list article {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.process-list h3,
.process-list p {
  margin: 0;
}

.process-list h3 {
  color: var(--accent-readable);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.process-list p {
  color: var(--muted);
  font-size: 15px;
}

/* No top padding, deliberately: the urgent band is an inset CARD, and it
   BORROWS its top gap from the bottom padding of the section above it. That
   holds only while the section above paints nothing — its padding is then
   page background, which is exactly the gap the card wants. */
.urgent-section {
  padding: 0 0 clamp(92px, 10vw, 148px);
}

/* …and it stops holding when the section above paints a DARK band. That
   section's bottom padding is then ink, not page background: nothing is lent,
   and the card lands flush on the band's bottom edge — 0px, two saturated
   blocks welded together.
   `kinol-bros-painting-new` shipped that way. It is a production tenant, so
   showReviews was false (placeholder reviews are suppressed — see
   src/blocks/reviews-section.html); the Reviews band that normally separates
   them was gone, and the teal card butted straight onto the navy Recent-work
   band. Reproduced on the fixture by removing that band: gap 0px.

   DARK is the test, not "has a background". The light bands (.about, .social,
   .page-hero, and the --surface strips on the inner pages) paint their bottom
   padding too, but it reads as the same breathing room the page background
   would give — measured ~110px of clear space above the card, and adding a
   second gap there just opens a hole. Each of those was rendered against the
   card before being left out; .service-area was left out for the same reason,
   its zero padding notwithstanding, because its inner panel carries the space.
   .founder is here on the other mechanism: padding 0 AND its photo/accent
   panels run to its own bottom edge, so it lends nothing at all.
   The homepage bands are REORDERABLE (template/lib/sections.mjs), so any of
   these can end up here — which is why this is not just the pair reported. */
.hero + .urgent-section,
.founder + .urgent-section,
.work + .urgent-section,
.coupons + .urgent-section,
.rev-hero + .urgent-section {
  padding-top: clamp(92px, 10vw, 148px);
}

.urgent-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: center;
  gap: 52px;
  padding: clamp(44px, 6vw, 78px);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
}

.urgent-shell h2 {
  max-width: 780px;
  margin-bottom: 18px;
  color: var(--on-accent);
  font-size: clamp(36px, 4vw, 58px);
}

.urgent-shell p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--on-accent);
}

.urgent-actions {
  flex-direction: column;
  align-items: flex-start;
}

.button-light {
  border-color: var(--on-accent);
  background: var(--on-accent);
  color: #04545d;
}

.button-light:hover {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--accent-hover);
}

.text-link-light {
  color: var(--on-accent);
}

.service-area {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.area-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
}

.area-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 110px) clamp(24px, 5vw, 96px);
}

.area-intro > * {
  max-width: 640px;
}

.area-intro h2 {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.05;
}

.area-intro .text-link {
  margin-top: 4px;
  align-self: flex-start;
}

.area-map {
  min-width: 0;
  min-height: clamp(460px, 44vw, 640px);
  overflow: hidden;
  background: #e8ece9;
}

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

.city-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 30px 0;
}

.city-groups h3 {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.city-groups a {
  display: block;
  padding: 7px 0;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 180ms ease, transform 180ms var(--ease);
}

.city-groups a:hover {
  color: var(--accent-readable);
  transform: translateX(5px);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 28px 58px 28px 0;
  color: var(--ink-strong);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -0.025em;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 18px;
  height: 1.5px;
  background: var(--accent);
  transition: transform 220ms var(--ease);
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::after {
  transform: rotate(0deg);
}

.faq-list details p {
  max-width: 660px;
  padding: 0 58px 26px 0;
  color: var(--muted);
}

.request-section {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.request-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(60px, 9vw, 130px);
}

.request-copy {
  align-self: start;
}

.request-copy .text-link {
  margin-top: 32px;
}

.request-form {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: 0 18px 50px rgb(16 43 53 / 0.06);
}

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

.field {
  display: grid;
  gap: 8px;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 750;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-strong);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.field input,
.field select {
  min-height: 54px;
  padding: 0 15px;
}

.field textarea {
  min-height: 132px;
  padding: 14px 15px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--focus);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--error);
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.field-error {
  min-height: 18px;
  color: var(--error);
  font-size: 12px;
}

.field-help {
  color: var(--muted);
  font-size: 12px;
}

.form-footer {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
}

.form-submit[aria-busy="true"] {
  cursor: wait;
  opacity: 0.78;
}

.form-status {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.preview-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
}

html:not([data-site-mode="preview"]) .preview-note {
  display: none;
}

.site-footer {
  padding: 72px 0 110px;
  border-top: 1px solid var(--line);
  background: var(--page);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 60px;
}

.footer-description {
  max-width: 290px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* The footer's copy of the follow row reuses .social-icons wholesale; this
   class only spaces it under the description and lets all six wrap inside
   the brand column at narrow widths. */
.footer-socials {
  margin-top: 24px;
  flex-wrap: wrap;
}

.footer-grid h2 {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.05em;
}

.footer-grid nav a,
.footer-contact a,
.footer-contact span {
  display: block;
  padding: 6px 0;
  color: var(--ink-strong);
  font-size: 14px;
}

.footer-grid nav a:hover,
.footer-contact a:hover {
  color: var(--accent-readable);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 62px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.footer-bottom p {
  margin: 0;
}

/* Photograph attribution — present only on a site whose photographs came from
   a stock bank, because the footer block is gated on the list being non-empty
   (see template/src/blocks/footer.html). It is a licence obligation, not
   decoration, so it must stay legible: muted like the rest of the bottom bar,
   but its links take the same underline every other footer link has rather
   than being styled down into invisibility. */
.footer-photo-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12px;
}

.footer-photo-credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-photo-credits a:hover {
  color: var(--accent-readable);
}

.mobile-conversion {
  display: none;
}

[data-hero-copy],
[data-hero-media] {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-enter 700ms var(--ease) forwards;
}

[data-hero-media] {
  opacity: 1;
  transform: scale(1.02);
  animation: hero-media-enter 900ms var(--ease) forwards;
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal].is-visible {
  animation: section-reveal 620ms var(--ease) both;
}

.subpage-hero {
  padding: clamp(64px, 8vw, 112px) 0 clamp(88px, 10vw, 140px);
  border-bottom: 1px solid var(--line);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(50px, 7vw, 88px);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.breadcrumb a:hover {
  color: var(--accent-readable);
}

.subpage-hero .content-grid,
.content-section .content-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: start;
}

.subpage-hero .content-grid {
  align-items: end;
}

.subpage-kicker {
  margin-bottom: 20px;
  color: var(--accent-readable);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.subpage-hero h1 {
  max-width: 850px;
  margin-bottom: 26px;
}

.subpage-lede {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}

.subpage-hero .hero-actions {
  margin-top: 30px;
}

.subpage-visual {
  height: 330px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.subpage-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subpage-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.content-section {
  padding: clamp(78px, 9vw, 128px) 0;
}

.content-section + .content-section {
  border-top: 1px solid var(--line);
}

.content-section h2 {
  max-width: 720px;
}

.content-section h3 {
  margin-bottom: 12px;
}

.prose {
  max-width: 730px;
}

.prose > * + * {
  margin-top: 20px;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
}

.prose a:not(.button) {
  color: var(--accent-readable);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.fact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.fact-list li {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.fact-list strong {
  color: var(--ink-strong);
}

.info-panel {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.info-panel h2,
.info-panel h3 {
  color: var(--ink-strong);
}

.info-panel p:last-child,
.info-panel ul:last-child {
  margin-bottom: 0;
}

.inline-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.inline-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 700;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.inline-nav a:hover {
  border-color: var(--accent);
  color: var(--accent-readable);
  transform: translateY(-2px);
}

.next-action {
  padding: clamp(58px, 7vw, 96px) 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.next-action .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.next-action h2 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(34px, 4vw, 54px);
}

.next-action p {
  max-width: 650px;
  margin: 16px 0 0;
  color: var(--muted);
}

.next-action .button {
  flex: 0 0 auto;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes hero-media-enter {
  to {
    transform: scale(1);
  }
}

@keyframes section-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qa-static [data-hero-copy],
.qa-static [data-hero-media],
.qa-static [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (max-width: 1280px) {
  .hero-credential-badge {
    top: 54%;
    right: 0;
    transform: translateY(-50%) scale(0.86);
    transform-origin: center right;
  }

  .nav-shell {
    grid-template-columns: minmax(185px, 1fr) auto auto;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .nav-actions {
    justify-self: end;
  }

  .hero-grid {
    gap: 0;
  }

  h1 {
    font-size: clamp(48px, 4.8vw, 56px);
  }

  .services-media {
    height: 640px;
  }

  .process-media {
    height: 670px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 76px;
  }

  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .nav-shell {
    grid-template-columns: 1fr auto;
  }

  .nav-actions {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .hero {
    min-height: calc(100dvh - var(--header-height));
    padding: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    width: min(100%, 680px);
    padding: 72px 0 96px;
  }

  .hero-media {
    min-height: 0;
  }

  .hero-media img {
    object-position: 70% 50%;
  }

  .hero-credential-badge {
    display: none;
  }

  .hero::before {
    background:
      linear-gradient(90deg, rgb(7 23 29 / 0.9) 0%, rgb(7 23 29 / 0.82) 38%, rgb(7 23 29 / 0.64) 52%, rgb(7 23 29 / 0.36) 64%, rgb(7 23 29 / 0.16) 76%, rgb(7 23 29 / 0.1) 100%),
      linear-gradient(180deg, rgb(7 23 29 / 0.2) 0%, rgb(7 23 29 / 0.08) 55%, rgb(7 23 29 / 0.42) 100%);
  }

  .issue-shell,
  .process-grid,
  .faq-layout,
  .request-layout {
    grid-template-columns: 1fr;
  }

  .issue-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-copy {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .service-index {
    grid-column: 1 / 8;
  }

  .services-media {
    grid-column: 8 / -1;
    grid-row: 2;
    height: 580px;
  }

  .process-media {
    height: 610px;
  }

  .urgent-shell {
    grid-template-columns: 1fr;
  }

  .urgent-actions {
    flex-direction: row;
    align-items: center;
  }

  .area-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .area-map {
    height: 380px;
    min-height: 0;
  }

  .area-intro,
  .faq-intro {
    position: static;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .subpage-hero .content-grid,
  .content-section .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --utility-height: 36px;
    --trust-height: 0px;
  }

  .utility-bar-inner {
    padding-left: 16px;
  }

  .utility-links,
  .utility-divider {
    display: none;
  }

  .open-status {
    margin: 0;
    font-size: 12px;
  }

  .status-time {
    display: none;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + 10px);
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    font-size: 16px;
  }

  .container {
    width: calc(100% - 32px);
  }

  .brand-logo-image {
    width: 205px;
  }

  .brand-name {
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  .brand-trade {
    margin-top: 4px;
    font-size: 7.5px;
    letter-spacing: 0.18em;
  }

  .hero {
    min-height: calc(100dvh - var(--header-height));
    padding: 0;
  }

  .hero-copy {
    min-height: inherit;
    padding: 54px 0 112px;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
  }

  h1 {
    margin-bottom: 22px;
    font-size: clamp(42px, 13.5vw, 57px);
    line-height: 0.98;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 56px);
    line-height: 0.96;
  }

  h2 {
    font-size: clamp(35px, 10.5vw, 48px);
  }

  .hero-lede {
    margin-bottom: 20px;
    font-size: 17px;
  }

  .hero-proof {
    min-height: 38px;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 18px;
    font-size: 12px;
  }

  .review-avatar {
    width: 30px;
    height: 30px;
  }

  .review-avatar-middle,
  .review-avatar-back {
    margin-left: -10px;
  }

  .review-rating,
  .review-stars {
    font-size: 13px;
  }

  .hero-action-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-action {
    min-height: 64px;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 12px;
  }

  .hero-action-primary {
    grid-column: 1 / -1;
  }

  .hero-action-icon {
    width: 36px;
    height: 36px;
  }

  .hero-action-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero-action-copy strong {
    font-size: 13px;
  }

  .hero-action-call-copy strong {
    font-size: 14px;
  }

  .hero-action-copy small {
    font-size: 10px;
  }

  .hero-actions {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-media {
    min-height: 0;
    margin-top: 0;
  }

  /* Below 768px the <picture> serves a portrait crop with ~520px of sky
     spliced above the technician. That headroom is the slack this percentage
     pans through: lower values drop him further down the frame. 35% lands his
     eyes in the gap between the lede and the CTA stack. There is 244px of
     slack, so each 10% moves him roughly 24px — higher values move him up. */
  .hero-media img {
    object-position: 50% 66%;
  }

  .hero::before {
    background:
      linear-gradient(90deg, rgb(7 23 29 / 0.5) 0%, rgb(7 23 29 / 0.28) 60%, rgb(7 23 29 / 0.06) 100%),
      linear-gradient(180deg, rgb(7 23 29 / 0.18) 0%, rgb(7 23 29 / 0.12) 55%, rgb(7 23 29 / 0.08) 78%, rgb(7 23 29 / 0.42) 100%);
  }

  .issue-router {
    padding: 48px 0;
  }

  .issue-shell {
    gap: 32px;
  }

  .issue-links {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 84px 0;
  }

  .services-grid {
    display: flex;
    flex-direction: column;
    gap: 46px;
  }

  .service-index {
    order: 3;
  }

  .service-item {
    min-height: 88px;
  }

  .service-item strong {
    font-size: 22px;
  }

  .services-media {
    order: 2;
    height: 390px;
  }

  .process-grid {
    gap: 52px;
  }

  .process-media {
    height: 460px;
  }

  .process-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .urgent-section {
    padding-bottom: 84px;
  }

  /* Matches the 84px below, so the card sits symmetrically in its gap on a
     phone the way the clamp does on a desktop. Same list as up there. */
  .hero + .urgent-section,
  .founder + .urgent-section,
  .work + .urgent-section,
  .coupons + .urgent-section,
  .rev-hero + .urgent-section {
    padding-top: 84px;
  }

  .urgent-shell {
    gap: 34px;
    padding: 36px 24px;
  }

  .urgent-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .button-light {
    width: 100%;
  }

  .area-layout {
    gap: 0;
  }

  .city-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .city-groups div:last-child {
    grid-column: 1 / -1;
    columns: 2;
  }

  .city-groups div:last-child h3 {
    column-span: all;
  }

  .faq-layout,
  .request-layout {
    gap: 48px;
  }

  .faq-list summary {
    padding: 24px 46px 24px 0;
  }

  .request-form {
    padding: 24px 18px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field-full {
    grid-column: auto;
  }

  .form-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-submit {
    width: 100%;
  }

  .site-footer {
    padding: 68px 0 42px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px 24px;
  }

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

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 48px;
  }

  .subpage-hero {
    padding: 44px 0 82px;
  }

  .breadcrumb {
    margin-bottom: 46px;
  }

  .subpage-visual {
    height: 280px;
  }

  .content-section {
    padding: 78px 0;
  }

  .fact-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .next-action .container {
    align-items: flex-start;
    flex-direction: column;
  }

  .next-action .button {
    width: 100%;
  }

  /* The six minor services wrap one-per-line at full chip size, which turns
     the tail of the section into a long ladder. A fixed two-column grid packs
     them into one tight block; the flex row's ragged centring can't guarantee
     two per line because the labels are different lengths. */
  .svc-extra {
    margin-top: 34px;
  }

  .svc-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .svc-chip {
    justify-content: center;
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
  }

  /* The arrow costs 20px of a 140px pill and reads as a speck at this size —
     without it the longest label ("Garbage disposals") clears even a 360px
     screen on one line. */
  .svc-chip svg {
    display: none;
  }

  .mobile-conversion {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 22;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    /* Right padding reserves the 42px chat FAB + its 12px inset, so the FAB
       sits inside this bar rather than floating over the Book online pill. */
    padding: 8px 66px max(8px, env(safe-area-inset-bottom)) 12px;
    /* No bar — the three actions float straight over the page, so each one
       carries its own lift shadow to stay legible on any background. */
    border-top: 0;
    background: transparent;
    /* The hero already stacks the full CTA set, so the pills stay parked below
       the fold until script.js confirms those have scrolled away. */
    transform: translateY(calc(100% + 14px));
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms var(--ease), opacity 200ms ease;
  }

  .mobile-conversion.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Layout only — paint comes from .urgent-btn-primary / .prefooter-btn in
     brand.css, so these stay in step with the rest of the CTA pairs. */
  .mobile-conversion a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--pill);
    box-shadow: 0 6px 18px rgb(2 20 45 / 0.28);
    font-size: 14px;
    font-weight: 750;
  }

  .mobile-conversion a > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  /* .prefooter-btn only paints the gradient; the white text normally comes
     from .button, which these pills don't carry. */
  .mobile-conversion .prefooter-btn {
    color: var(--on-accent);
  }

  /* Icon and label centred together as one group. */
  .mobile-conversion .prefooter-call {
    gap: 6px;
    padding-inline: 8px;
  }

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

  .mobile-conversion-icon svg {
    width: 15px;
    height: 15px;
    color: #ffffff;
  }

  body.menu-open .mobile-conversion {
    display: none;
  }
}

@media (max-width: 767px) and (max-height: 640px) and (orientation: portrait) {
  .hero-copy {
    padding: 26px 0 66px;
  }

  .hero .eyebrow {
    margin-bottom: 12px;
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: clamp(38px, 12vw, 46px);
  }

  .hero .hero-lede {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.4;
  }

  .hero-proof {
    min-height: 32px;
    margin-bottom: 12px;
  }

  .review-avatar {
    width: 26px;
    height: 26px;
  }

  .hero-action {
    min-height: 54px;
    padding-block: 7px;
  }

  .hero-action-icon {
    width: 32px;
    height: 32px;
  }

  .hero-action-copy small {
    display: none;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  body {
    padding-bottom: 0;
  }

  .hero-copy {
    width: min(100%, 720px);
    min-height: inherit;
    padding: 24px 0 28px;
  }

  .hero .eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .hero h1 {
    max-width: 620px;
    margin-bottom: 14px;
    font-size: clamp(38px, 6vw, 52px);
    line-height: 0.92;
  }

  .hero .hero-lede {
    max-width: 560px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.35;
  }

  .hero-proof {
    min-height: 30px;
    margin-bottom: 12px;
  }

  .review-avatar {
    width: 26px;
    height: 26px;
  }

  .hero-action-grid {
    width: min(100%, 720px);
    grid-template-columns: 1.2fr 1fr 0.9fr;
    gap: 8px;
  }

  .hero-action {
    min-height: 56px;
    padding: 8px 11px;
  }

  .hero-action-primary {
    grid-column: auto;
  }

  .hero-action-icon {
    width: 34px;
    height: 34px;
  }

  .hero-action-copy small {
    display: none;
  }

  .hero-actions {
    width: auto;
    align-items: center;
    flex-direction: row;
    gap: 24px;
  }

  .hero-actions .button {
    width: auto;
  }

  .hero-media img {
    object-position: 50% 45%;
  }

  .mobile-conversion {
    display: none;
  }
}

@media (max-width: 480px) {
  .city-groups {
    grid-template-columns: 1fr;
  }

  .city-groups div:last-child {
    grid-column: auto;
    columns: 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 360px) {
  .hero .eyebrow {
    font-size: 9px;
  }

  .hero h1 {
    font-size: 35px;
  }

  .hero .hero-lede {
    font-size: 15px;
    line-height: 1.35;
  }

  .hero-proof {
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 10px;
  }

  .review-avatar {
    width: 26px;
    height: 26px;
  }

  .review-avatar-middle,
  .review-avatar-back {
    margin-left: -9px;
  }

  .review-rating,
  .review-stars {
    font-size: 11px;
  }

  .review-count {
    font-size: 10px;
  }

  .hero-action-copy strong {
    font-size: 11px;
  }

  .hero-action-call-copy strong {
    font-size: 12px;
  }

  .hero-action {
    gap: 6px;
    padding-inline: 8px;
  }

  .hero-action-icon {
    width: 30px;
    height: 30px;
  }

  .mobile-conversion a {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-hero-copy],
  [data-hero-media],
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Left over from when this was a translucent blurred bar. The pills float on
   their own now with nothing to make opaque. */


/* ============================================================================
   Scheme layer — "Sapphire" (Rich blue + cyan).
   Appended by scripts/tenant.mjs. Do not hand-edit; re-run the build.
   ========================================================================= */

/* Hero photograph, graded to the scheme. `color` blending takes hue and chroma
   from the tint and luminosity from the photo, so contrast, faces and highlights
   survive — only the cast moves. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #4c79c6;
  mix-blend-mode: color;
  opacity: 0.1;
  pointer-events: none;
}

.hero-media img {
  filter: saturate(0.88);
}

/* Primary buttons — gradient blended over a flat accent, Photoshop-style. The
   two gradient values arrive from tenant.css; this is only the blend mode,
   which cannot ride along inside a background value. `normal` is still emitted
   rather than skipped so the declaration always exists. */
.hero-action-primary,
.about-cta-btn,
.prefooter-btn,
.bk-next,
.nav-book {
  background-blend-mode: overlay, normal;
}

/* The trade emblem is a CSS mask. The template already paints it --accent and
   leaves the wordmark dark; a scheme only overrides WHICH accent, because a
   row may carry a logoMark tuned apart from its accent. The fallback is
   --accent rather than --ink-strong so a scheme that somehow reached here
   without a logoMark degrades to the template's own two-tone lockup instead
   of silently going monochrome. Only ever visible beside a GENERATED
   wordmark — a prospect whose own logo we scraped never sees it. */
.brand-emblem {
  background-color: var(--logo-mark, var(--accent));
}