@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --accent: #1f4068;
  --accent-on: #ffffff;
  --ink: #0f1b3d;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --muted: #5a6478;
  --line: #cfd6e1;
  --line-dark: #31405d;
  --radius: 4px;
  --heading: "Manrope", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --shell: min(1200px, calc(100% - 48px));
  --section-space: clamp(84px, 9vw, 136px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

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

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

h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  max-width: 800px;
  margin-bottom: 24px;
  font-size: clamp(2.2rem, 4.6vw, 4.35rem);
}

h3 {
  font-size: 1.35rem;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.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;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

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

.utility-bar {
  background: var(--ink);
  color: #dbe4f0;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.utility-bar__inner {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.utility-bar p {
  margin: 0;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #67c29c;
  box-shadow: 0 0 0 4px rgb(103 194 156 / 14%);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 80px;
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 36px;
}

.brand {
  display: inline-flex;
  width: 116px;
  height: 66px;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.brand img {
  width: 102px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
}

.primary-nav a {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: #34405a;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.primary-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button svg,
.mobile-call-bar svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.button--header {
  min-width: 214px;
  background: var(--ink);
  color: var(--surface);
}

.button--header:hover {
  background: var(--accent);
}

.button--primary {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 10px 30px rgb(31 64 104 / 18%);
}

.button--primary:hover {
  background: #173452;
}

.button--light {
  background: var(--surface);
  color: var(--ink);
}

.button--white {
  min-width: 224px;
  background: var(--surface);
  color: var(--ink);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.hero-grid-lines,
.closing-grid {
  display: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(410px, 0.88fr);
  align-items: center;
  gap: clamp(48px, 5vw, 72px);
  padding-block: clamp(64px, 5vw, 76px) 76px;
}

.eyebrow,
.section-index {
  color: var(--accent);
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.eyebrow span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #a9b8ca;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 72%);
}

.hero h1 {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(3.15rem, 4.55vw, 4.1rem);
  font-weight: 790;
  letter-spacing: -0.055em;
}

.hero h1 em {
  display: block;
  color: var(--accent);
  font-style: italic;
  font-synthesis: style;
}

.hero__lede {
  max-width: 640px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.6;
}

.hero__actions,
.shop__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
}

.text-link,
.card-link,
.source-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
}

.text-link span,
.card-link span,
.source-link span {
  transition: transform 160ms ease;
}

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

.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.stars,
.review-stars {
  color: #815900;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.hero__trust p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.hero__trust strong,
.hero__trust span {
  display: block;
}

.hero__trust span {
  color: var(--muted);
}

.hero__media {
  position: relative;
  min-height: 532px;
  align-self: stretch;
}

.hero-photo {
  position: absolute;
  inset: 0 0 36px 34px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #9aa8ba;
  border-radius: var(--radius);
  background: #142039;
  box-shadow: 0 30px 70px rgb(15 27 61 / 18%);
}

.hero-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgb(7 15 34 / 78%));
  content: "";
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo figcaption {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 20px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: white;
  font-size: 0.875rem;
  font-weight: 650;
}

.hero-photo figcaption span {
  color: #bfcee1;
  letter-spacing: 0.1em;
}

.hero-inset {
  position: absolute;
  z-index: 3;
  right: -30px;
  bottom: 0;
  width: 42%;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--bg);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 20px 45px rgb(15 27 61 / 22%);
}

.hero-inset img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-inset figcaption {
  padding: 9px 12px;
  background: var(--surface);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.airflow-mark {
  position: absolute;
  z-index: 4;
  top: 46px;
  left: 0;
  width: 72px;
  height: 160px;
  border-left: 2px solid var(--accent);
}

.airflow-mark::before,
.airflow-mark::after {
  position: absolute;
  left: -5px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  content: "";
}

.airflow-mark::before { top: -3px; }
.airflow-mark::after { bottom: -3px; }

.airflow-mark span {
  position: absolute;
  left: -3px;
  width: 4px;
  height: 16px;
  background: var(--accent);
  opacity: 0;
  animation: airflow 3.2s linear infinite;
}

.airflow-mark span:nth-child(1) { animation-delay: 0s; }
.airflow-mark span:nth-child(2) { animation-delay: 0.8s; }
.airflow-mark span:nth-child(3) { animation-delay: 1.6s; }
.airflow-mark span:nth-child(4) { animation-delay: 2.4s; }

@keyframes airflow {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(144px); opacity: 0; }
}

.proof-strip {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: var(--surface);
}

.proof-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.proof-item {
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.proof-item:nth-child(4) {
  border-right: 0;
}

.proof-item strong {
  font-family: var(--heading);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1;
}

.proof-item span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proof-source {
  position: absolute;
  right: 12px;
  bottom: 5px;
  margin: 0;
  color: #525d72;
  font-size: 0.875rem;
}

.section {
  padding-block: var(--section-space);
}

.section-heading {
  margin-bottom: 56px;
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 64px;
}

.section-heading--split h2 {
  margin-bottom: 0;
}

.section-heading--split > p {
  max-width: 420px;
  margin-bottom: 4px;
  color: var(--muted);
}

.section-index {
  margin-bottom: 18px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.service-card {
  min-height: 416px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: #95a6bb;
  box-shadow: 0 22px 50px rgb(15 27 61 / 9%);
}

.service-card--accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.service-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: auto;
}

.service-number {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.service-card--accent .service-number {
  color: #c3d2e4;
}

.service-icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.service-card--accent .service-icon {
  stroke: white;
}

.service-kicker {
  margin: 40px 0 9px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.service-card--accent .service-kicker,
.service-card--accent > p {
  color: #dbe5f0;
}

.service-card h3 {
  margin-bottom: 14px;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
}

.service-card > p:not(.service-kicker) {
  margin-bottom: 28px;
  color: var(--muted);
}

.service-card--accent > p:not(.service-kicker) {
  color: #dbe5f0;
}

.service-card .card-link {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.service-card--accent .card-link {
  border-color: rgb(255 255 255 / 26%);
  color: white;
}

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

.diagnosis-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(54px, 8vw, 116px);
}

.diagnosis__image {
  position: relative;
  padding: 0 42px 54px 0;
}

.diagnosis__image::before {
  position: absolute;
  z-index: 0;
  inset: 34px 0 0 34px;
  border: 0;
  border-radius: var(--radius);
  background: #e8edf4;
  content: "";
}

.diagnosis__image figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
}

.diagnosis__image figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.diagnosis__image figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  background: var(--ink);
  color: #c6cfdd;
  font-size: 0.875rem;
}

.diagnosis__image figcaption span {
  color: white;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.diagnosis__image blockquote {
  position: relative;
  z-index: 2;
  width: min(340px, 84%);
  margin: -18px 0 0 auto;
  padding: 22px 24px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  box-shadow: 0 16px 38px rgb(15 27 61 / 14%);
}

.diagnosis__image blockquote p {
  margin-bottom: 8px;
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.diagnosis__image cite {
  color: var(--muted);
  font-size: 0.875rem;
  font-style: normal;
}

.large-copy {
  max-width: 680px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}

.process-list {
  margin: 40px 0 30px;
  padding: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.process-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.process-list > li > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 800;
}

.process-list h3 {
  margin-bottom: 5px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.process-list p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.source-link {
  align-items: flex-start;
  max-width: 520px;
  font-size: 1rem;
  text-decoration: underline;
}

.source-fact {
  max-width: 650px;
  margin: 32px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: #edf1f6;
  color: #435069;
  font-size: 1rem;
  line-height: 1.7;
}

.source-fact a {
  color: var(--accent);
  font-weight: 750;
  text-underline-offset: 3px;
}

.work {
  background: var(--ink);
  color: var(--surface);
}

.section-heading--light > p,
.work .section-index {
  color: #aebbd0;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.project-card {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: #142346;
}

.project-card--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.project-card__images {
  min-height: 430px;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 2px;
  background: var(--ink);
}

.project-card__images--portrait {
  min-height: 520px;
  grid-template-columns: 1fr 1fr;
}

.project-card__images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__image {
  min-height: 430px;
  overflow: hidden;
  background: #e7edf4;
}

.project-card__image img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.diagnosis__image figure img {
  object-position: center 38%;
}

.project-card--wide .project-card__caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.project-card__caption {
  padding: clamp(26px, 3vw, 40px);
}

.project-card__caption span {
  display: inline-block;
  margin-bottom: 24px;
  color: #9db3cd;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.project-card__caption h3 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

.project-card__caption p {
  margin: 0;
  color: #bdc9d8;
}

.shop {
  overflow: hidden;
  background: var(--accent);
  color: var(--surface);
}

.shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
  gap: clamp(54px, 8vw, 104px);
}

.shop__media {
  position: relative;
  min-height: 560px;
}

.shop__main-photo {
  position: absolute;
  inset: 0 20% 70px 0;
  width: 80%;
  height: calc(100% - 70px);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--radius);
  object-fit: cover;
}

.shop__secondary-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  height: 45%;
  border: 6px solid var(--accent);
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: 0 18px 45px rgb(5 13 30 / 32%);
}

.image-stamp {
  position: absolute;
  right: 2%;
  top: 20px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 58%);
  background: rgb(9 19 45 / 90%);
  color: white;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.shop .section-index,
.eyebrow--light {
  color: #d5e1ef;
}

.shop__copy .large-copy {
  color: #dbe5f0;
}

.shop-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 40px 0 30px;
  border-top: 1px solid rgb(255 255 255 / 28%);
  border-bottom: 1px solid rgb(255 255 255 / 28%);
}

.shop-details > div {
  padding: 24px 24px 24px 0;
}

.shop-details > div + div {
  padding-left: 24px;
  border-left: 1px solid rgb(255 255 255 / 28%);
}

.shop-details span {
  display: block;
  margin-bottom: 10px;
  color: #becfe1;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.shop-details p {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.6;
}

.text-link--light {
  color: white;
}

.microcopy {
  margin: 12px 0 0;
  color: #c9d8e8;
  font-size: 0.875rem;
}

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

.accountability-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(54px, 8vw, 116px);
}

.accountability__intro > p:not(.section-index) {
  max-width: 610px;
  color: var(--muted);
  font-size: 1.05rem;
}

.owner-line {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.owner-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 800;
}

.owner-line strong,
.owner-line span {
  display: block;
}

.owner-line div > span {
  color: var(--muted);
  font-size: 1rem;
}

.review-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 14px;
}

.review-card {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.review-card--featured {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.review-card--featured .review-stars {
  color: #f2c35d;
}

.review-card blockquote {
  margin: 24px 0;
  font-family: var(--heading);
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  font-weight: 700;
  line-height: 1.45;
}

.review-card > p {
  margin: auto 0 0;
  font-size: 0.875rem;
  font-weight: 750;
}

.review-card > p span {
  display: block;
  color: var(--muted);
  font-weight: 500;
}

.review-card--featured > p span {
  color: #c8d6e6;
}

.review-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.review-summary > strong {
  font-family: var(--heading);
  font-size: 3.1rem;
  line-height: 1;
}

.review-summary span {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.review-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.visit-band {
  padding-block: 58px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #e9edf4;
}

.visit-band__inner {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(360px, 1fr) auto;
  align-items: center;
  gap: 48px;
}

.visit-band__title .section-index {
  margin-bottom: 12px;
}

.visit-band__title h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.3vw, 3rem);
}

.visit-band__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.visit-band__details span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.visit-band__details p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

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

.faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(60px, 10vw, 140px);
}

.faq__heading {
  position: sticky;
  top: 130px;
}

.faq__heading > p:not(.section-index) {
  max-width: 370px;
  color: var(--muted);
}

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

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

.faq-list summary {
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 28px;
  padding: 18px 0;
  cursor: pointer;
  font-family: var(--heading);
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}

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

.faq-list summary h3 {
  margin: 0;
  color: inherit;
  font: inherit;
}

.faq-list summary span {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.faq-list summary span::before,
.faq-list summary span::after {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 12px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.faq-list summary span::after {
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

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

.faq-list details > p {
  max-width: 720px;
  margin: -3px 50px 27px 0;
  color: var(--muted);
}

.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(78px, 9vw, 124px);
  background: var(--accent);
  color: white;
}

.closing-grid {
  display: none;
}

.closing__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}

.closing h2 {
  max-width: 820px;
  margin-bottom: 14px;
  font-size: clamp(2.7rem, 6vw, 5.6rem);
}

.closing__inner > div > p:last-child {
  margin: 0;
  color: #dce7f2;
  font-size: 1.08rem;
}

.closing__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.closing__action > span {
  color: #d4e1ee;
  font-size: 0.875rem;
}

.site-footer {
  padding: 72px 0 28px;
  background: #09132d;
  color: #d4ddec;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 0.5fr));
  gap: 54px;
  padding-bottom: 58px;
}

.brand--footer {
  width: 112px;
  height: 74px;
  margin-bottom: 18px;
  padding: 8px;
  border-radius: var(--radius);
  background: white;
}

.brand--footer img {
  width: 88px;
}

.footer-brand p {
  max-width: 310px;
  color: #9ca9bc;
  font-size: 1rem;
}

.footer-column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.footer-column h2 {
  margin-bottom: 8px;
  color: #83b5ed;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-column a,
.footer-column p {
  margin: 0;
  color: #aeb9ca;
  font-size: 1rem;
  text-decoration: none;
}

.footer-column a:hover {
  color: white;
  text-decoration: underline;
}

.footer-column .footer-phone {
  color: white;
  font-family: var(--heading);
  font-size: 1.08rem;
  font-weight: 750;
}

.social-links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.social-links a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #33415c;
  border-radius: var(--radius);
  color: white;
  font-size: 0.875rem;
  font-weight: 750;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid #26334e;
}

.footer-bottom p {
  margin: 0;
  color: #8896aa;
  font-size: 0.875rem;
}

.footer-bottom a {
  color: #83b5ed;
}

.mobile-call-bar {
  display: none;
}

@media (max-width: 1120px) {
  .header-inner {
    grid-template-columns: 118px 1fr auto;
    gap: 18px;
  }

  .primary-nav {
    gap: 17px;
  }

  .primary-nav a {
    font-size: 1rem;
  }

  .button--header {
    min-width: 54px;
    padding-inline: 16px;
  }

  .button--header span {
    display: none;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
    gap: 48px;
  }

  .hero h1 {
    font-size: clamp(3rem, 6vw, 4.8rem);
  }

  .visit-band__inner {
    grid-template-columns: 1fr 1fr;
  }

  .visit-band__inner > .button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 900px) {
  :root {
    --shell: min(100% - 36px, 760px);
    --section-space: 88px;
  }

  .utility-bar__inner p:first-child {
    display: none;
  }

  .utility-bar__inner {
    justify-content: center;
  }

  .header-inner {
    grid-template-columns: 1fr auto auto;
  }

  .button--header {
    display: none;
  }

  .menu-toggle {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    width: 20px;
    height: 2px;
    display: block;
    background: var(--ink);
    transition: transform 160ms ease, opacity 160ms ease;
  }

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

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

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

  .primary-nav {
    position: fixed;
    z-index: 1;
    inset: 80px 0 auto;
    display: grid;
    gap: 0;
    padding: 20px 18px 28px;
    border-bottom: 1px solid var(--line);
    background: white;
    box-shadow: 0 18px 36px rgb(15 27 61 / 13%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .primary-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .primary-nav a {
    min-height: 54px;
    padding-inline: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .primary-nav a:last-child {
    border-bottom: 0;
  }

  .hero {
    min-height: auto;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-block: 74px 86px;
  }

  .hero__copy {
    max-width: 730px;
  }

  .hero h1 {
    max-width: 700px;
    font-size: clamp(3.35rem, 9vw, 5.3rem);
  }

  .hero__media {
    min-height: 510px;
  }

  .hero-photo {
    inset: 0 6% 34px 4%;
  }

  .hero-inset {
    right: 0;
    width: 35%;
  }

  .airflow-mark {
    left: 0;
  }

  .section-heading--split,
  .diagnosis-grid,
  .shop-grid,
  .accountability-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .section-heading--split,
  .diagnosis-grid,
  .shop-grid,
  .accountability-grid,
  .faq-grid {
    gap: 42px;
  }

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

  .service-card {
    min-height: 340px;
  }

  .project-card--wide {
    grid-template-columns: 1fr;
  }

  .project-card__images,
  .project-card__images--portrait {
    min-height: 420px;
  }

  .shop__media {
    min-height: 520px;
  }

  .shop__copy {
    max-width: 680px;
  }

  .faq__heading {
    position: static;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

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

@media (max-width: 640px) {
  :root {
    --shell: calc(100% - 28px);
    --section-space: 72px;
  }

  body {
    padding-bottom: 0;
  }

  .site-footer {
    padding-bottom: max(74px, calc(64px + env(safe-area-inset-bottom)));
  }

  .utility-bar {
    font-size: 0.875rem;
  }

  .utility-bar__inner {
    min-height: 30px;
  }

  .site-header {
    top: 0;
  }

  .header-inner {
    min-height: 70px;
  }

  .brand {
    height: 60px;
  }

  .brand img {
    width: 86px;
    max-height: 56px;
  }

  .primary-nav {
    top: 70px;
  }

  h2 {
    font-size: clamp(2.15rem, 11vw, 3.35rem);
  }

  .hero__inner {
    gap: 40px;
    padding-block: 40px 72px;
  }

  .eyebrow {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 11.5vw, 3.2rem);
  }

  .hero h1 em {
    display: inline;
  }

  .hero__lede {
    margin-bottom: 28px;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__actions .text-link {
    justify-content: center;
  }

  .hero__trust {
    align-items: flex-start;
  }

  .hero__media {
    min-height: 350px;
  }

  .hero-photo {
    inset: 0 18px 20px 16px;
  }

  .hero-photo figcaption {
    right: 14px;
    bottom: 13px;
    left: 14px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .hero-inset {
    right: 0;
    width: 42%;
    border-width: 4px;
  }

  .airflow-mark {
    top: 26px;
    height: 110px;
  }

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

  .proof-item {
    min-height: 105px;
  }

  .proof-item:nth-child(2) {
    border-right: 0;
  }

  .proof-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .proof-source {
    right: 6px;
    bottom: 2px;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .service-card {
    min-height: 356px;
    padding: 27px;
  }

  .diagnosis__image {
    padding: 0 18px 46px 0;
  }

  .diagnosis__image::before {
    inset: 20px 0 0 18px;
  }

  .diagnosis__image blockquote {
    width: calc(100% - 18px);
    margin-top: -12px;
  }

  .process-list li {
    grid-template-columns: 42px 1fr;
    gap: 13px;
  }

  .process-list > li > span {
    width: 34px;
    height: 34px;
  }

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

  .project-card--wide {
    grid-column: auto;
  }

  .project-card__images,
  .project-card__images--portrait {
    min-height: 310px;
  }

  .project-card__caption {
    padding: 26px 24px 30px;
  }

  .shop__media {
    min-height: 390px;
  }

  .shop__main-photo {
    right: 16%;
    width: 84%;
    height: calc(100% - 50px);
  }

  .shop__secondary-photo {
    width: 48%;
  }

  .image-stamp {
    right: 0;
    top: 12px;
  }

  .shop-details {
    grid-template-columns: 1fr;
  }

  .shop-details > div + div {
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 28%);
    border-left: 0;
  }

  .shop__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .review-stack {
    grid-template-columns: 1fr;
  }

  .review-summary {
    grid-column: auto;
    grid-template-columns: 82px 1fr;
    padding: 24px;
  }

  .visit-band__inner,
  .visit-band__details {
    grid-template-columns: 1fr;
  }

  .visit-band__inner {
    gap: 34px;
  }

  .visit-band__details {
    gap: 20px;
  }

  .visit-band__inner > .button {
    grid-column: auto;
    width: 100%;
  }

  .faq-list summary {
    min-height: 76px;
    gap: 18px;
  }

  .faq-list details > p {
    margin-right: 0;
  }

  .closing {
    padding-block: 74px;
  }

  .closing__inner {
    gap: 38px;
  }

  .closing__action,
  .closing__action .button {
    width: 100%;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-column:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }

  .footer-column > a,
  .footer-legal a,
  .footer-bottom > p:last-child a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .mobile-call-bar.mobile-cta-bar {
    position: fixed;
    z-index: 200;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: max(64px, calc(54px + env(safe-area-inset-bottom)));
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid #45678e;
    background: var(--accent);
    color: white;
    box-shadow: 0 -8px 24px rgb(15 27 61 / 22%), 0 48px 0 var(--accent);
    font-size: 1rem;
    text-decoration: none;
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }

  .mobile-call-bar.mobile-cta-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .site-header.is-open ~ .mobile-call-bar.mobile-cta-bar {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-call-bar.mobile-cta-bar strong {
    font-size: 1rem;
  }
}

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

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

/* Homepage direction preview, iteration 14: rebalanced rating lockup and cinematic hero-content reveal. */
.site-header {
  background: #ffffff;
  backdrop-filter: none;
}

.header-inner {
  min-height: 86px;
  grid-template-columns: 136px 1fr auto;
}

.brand {
  height: 74px;
}

.brand img {
  width: 108px;
}

.button--header {
  background: var(--accent);
}

.button--header:hover {
  background: var(--ink);
}

.hero {
  min-height: min(900px, calc(100svh - 86px));
  border-bottom: 0;
  background: #eaf0f5;
  color: var(--ink);
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(to left, rgb(244 246 250 / 99%) 0%, rgb(244 246 250 / 96%) 29%, rgb(244 246 250 / 82%) 35%, rgb(244 246 250 / 42%) 42%, rgb(244 246 250 / 12%) 48%, transparent 54%),
    linear-gradient(0deg, rgb(244 246 250 / 18%) 0%, transparent 34%);
  content: "";
  pointer-events: none;
}

.hero__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
}

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

@media (min-width: 901px) {
  .hero__backdrop img {
    transform: translateX(-18%);
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  min-height: min(900px, calc(100svh - 86px));
  display: flex;
  align-items: center;
  padding-block: 78px 92px;
}

.hero__copy {
  width: min(680px, 52%);
  margin-left: auto;
  text-align: right;
}

.hero .eyebrow {
  justify-content: flex-end;
  color: var(--accent);
  text-align: right;
}

.hero .eyebrow::before {
  width: 38px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--accent);
  content: "";
}

.hero .eyebrow span {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero h1 {
  max-width: 760px;
  margin-left: auto;
  margin-bottom: 25px;
  color: var(--ink);
  font-size: clamp(3rem, 5vw, 4.15rem);
  font-weight: 760;
  letter-spacing: -0.05em;
}

.hero h1 em {
  display: block;
  color: var(--accent);
  font-style: italic;
  font-synthesis: style;
}

.hero .eyebrow,
.hero h1,
.hero__lede,
.hero__trust {
  text-shadow: 0 1px 14px rgb(255 255 255 / 62%);
}

.hero__lede {
  max-width: 650px;
  margin-left: auto;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  line-height: 1.65;
}

.button--hero {
  min-width: 236px;
  background: var(--accent);
  color: white;
  box-shadow: 0 16px 34px rgb(31 64 104 / 20%);
}

.button--hero:hover {
  background: var(--ink);
}

.button--hero-ghost {
  min-width: 206px;
  border-color: #97a9bd;
  background: rgb(255 255 255 / 65%);
  color: var(--ink);
  backdrop-filter: blur(8px);
}

.button--hero-ghost:hover {
  border-color: var(--accent);
  background: white;
}

.hero__actions {
  justify-content: flex-end;
}

.hero__trust {
  max-width: 590px;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 6px;
  margin-left: auto;
  margin-top: 30px;
  padding-top: 21px;
  border-color: rgb(15 27 61 / 18%);
  text-align: right;
}

.hero__trust .stars {
  color: var(--accent);
}

.hero__rating-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
}

.hero__rating-line .stars {
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hero__rating-line strong {
  font-size: 1rem;
  line-height: 1.15;
}

.hero__trust .hero__trust-meta {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.hero__trust p,
.hero__trust span {
  color: var(--muted);
}

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

@keyframes vac-hero-resolve {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.986);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.hero-reveal {
  opacity: 0;
  animation: vac-hero-resolve 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-reveal[data-delay="1"] { animation-delay: 150ms; }
.hero-reveal[data-delay="2"] { animation-delay: 400ms; }
.hero-reveal[data-delay="3"] { animation-delay: 650ms; }
.hero-reveal[data-delay="4"] { animation-delay: 900ms; }
.hero-reveal[data-delay="5"] { animation-delay: 1100ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-reveal {
    opacity: 1;
    animation: none;
    filter: none;
    transform: none;
  }
}

.hero__project-caption {
  position: absolute;
  right: 0;
  bottom: 30px;
  margin: 0;
  color: rgb(255 255 255 / 78%);
  font-size: 0.875rem;
}

.hero__project-caption span {
  display: inline-block;
  margin-right: 12px;
  color: white;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proof-item {
  min-height: 112px;
}

.diagnosis__image::before {
  border: 0;
  border-radius: var(--radius);
  background: #e8edf4;
}

.closing {
  background: var(--accent);
}

@media (max-width: 900px) {
  .header-inner {
    min-height: 80px;
    grid-template-columns: 1fr auto;
  }

  .hero,
  .hero__inner {
    min-height: calc(100svh - 80px);
  }

  .hero::before {
    background:
      linear-gradient(to left, rgb(244 246 250 / 98%) 0%, rgb(244 246 250 / 94%) 36%, rgb(244 246 250 / 62%) 49%, rgb(244 246 250 / 18%) 61%, transparent 70%),
      linear-gradient(0deg, rgb(244 246 250 / 25%) 0%, transparent 42%);
  }

  .hero__backdrop img {
    object-position: 58% center;
  }

  .hero__inner {
    display: flex;
    align-items: center;
    padding-block: 70px 86px;
  }

  .hero__copy {
    width: min(650px, 76%);
    margin-left: auto;
  }

  .hero h1 {
    max-width: 700px;
    font-size: clamp(3.4rem, 7.6vw, 4.25rem);
  }

  .hero__project-caption {
    right: 0;
    bottom: 24px;
  }

  .project-card__image,
  .project-card__image img {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .header-inner {
    min-height: 72px;
  }

  .brand {
    height: 64px;
  }

  .brand img {
    width: 90px;
    max-height: 60px;
  }

  .primary-nav {
    top: 72px;
  }

  .hero,
  .hero__inner {
    min-height: calc(100svh - 72px);
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgb(244 246 250 / 5%) 0%, rgb(244 246 250 / 38%) 27%, rgb(244 246 250 / 94%) 48%, rgb(244 246 250 / 100%) 100%),
      linear-gradient(90deg, rgb(244 246 250 / 10%), rgb(244 246 250 / 3%));
  }

  .hero__backdrop img {
    object-position: 44% center;
  }

  .hero__inner {
    align-items: flex-end;
    padding-block: 66px 78px;
  }

  .hero__copy {
    width: 100%;
  }

  .hero .eyebrow {
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 19px;
    color: var(--ink);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    line-height: 1.55;
  }

  .hero .eyebrow::before {
    width: 24px;
    margin-top: 0.45em;
  }

  .hero h1 {
    max-width: 410px;
    margin-bottom: 21px;
    font-size: clamp(2.55rem, 11.2vw, 3.05rem);
  }

  .hero h1 em {
    display: block;
  }

  .hero__lede {
    margin-bottom: 26px;
    font-size: 1rem;
    line-height: 1.58;
  }

  .hero__actions {
    gap: 11px;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__trust {
    justify-content: flex-end;
    margin-top: 23px;
    padding-top: 18px;
  }

  .hero__project-caption {
    display: none;
  }

  .proof-item {
    min-height: 102px;
  }

  .project-card__image,
  .project-card__image img {
    min-height: 310px;
  }
}

/* Premium Polish Wave 2: editorial rhythm within the locked Manrope/Inter system. */
:root {
  --measure: 72ch;
  --ease-settle: cubic-bezier(0.25, 0.74, 0.22, 0.99);
}

main p {
  max-width: var(--measure);
}

h1,
h2,
h3,
.hero__lede,
.page-hero__lede,
.large-copy,
.section-heading > p,
.chapter-head > p,
.closing p {
  text-wrap: pretty;
  text-wrap: balance;
}

article p,
.prose p,
.legal-wrap p,
.utility-wrap p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.stat-row .proof-grid {
  padding-bottom: 0;
}

.stat-card {
  position: relative;
  min-height: 146px;
  align-items: flex-start;
  padding: 28px clamp(20px, 2.7vw, 34px) 25px;
}

.stat-bar {
  width: 42px;
  height: 3px;
  display: block;
  flex: 0 0 auto;
  margin: 0 0 22px;
  background: var(--accent);
}

.stat-card strong {
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(2.35rem, 4.4vw, 4.15rem);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.stat-card > span:not(.stat-bar) {
  max-width: 24ch;
  margin-top: 14px;
  line-height: 1.45;
}

.stat-row .proof-source {
  position: static;
  grid-column: 1 / -1;
  padding: 13px clamp(20px, 2.7vw, 34px);
  border-top: 1px solid var(--line);
  text-align: right;
}

.faq-grid {
  max-width: 820px;
  display: block;
  margin-inline: auto;
}

.faq__heading {
  position: static;
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.faq__heading h2,
.faq__heading > p:not(.section-index) {
  margin-inline: auto;
}

.faq__heading > p:not(.section-index) {
  max-width: 70ch;
}

.faq-list summary span,
.faq-toggle {
  border-color: var(--accent);
  border-radius: var(--radius);
  background: #f7f9fc;
}

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

html.js-motion [data-reveal] {
  opacity: 0.94;
  transform: translateY(10px);
  transition: opacity 560ms var(--ease-settle), transform 560ms var(--ease-settle);
}

html.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .stat-card {
    min-height: 132px;
    padding: 23px 20px 21px;
  }

  .stat-card strong {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .stat-bar {
    margin-bottom: 17px;
  }

  .stat-row .proof-source {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal],
  html.js-motion [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Premium Polish Wave 3: restrained depth, focus, and micro-interactions. */
.button--primary,
.button--hero,
.button--header {
  background-color: var(--accent);
  background-image: linear-gradient(135deg, #24496f 0%, var(--accent) 56%, #1b385b 100%);
  background-position: 0 50%;
  background-size: 180% 100%;
  box-shadow: 0 10px 24px rgb(15 27 61 / 18%), 0 2px 6px rgb(31 64 104 / 10%);
  transition: background-position 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms var(--ease-settle);
}

.button--primary:hover,
.button--hero:hover,
.button--header:hover {
  background-color: #193758;
  background-image: linear-gradient(135deg, #21466d 0%, #1b3a5e 58%, #173452 100%);
  background-position: 100% 50%;
  box-shadow: 0 14px 28px rgb(15 27 61 / 24%), 0 3px 8px rgb(31 64 104 / 14%);
}

.service-card {
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease-settle);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  border-color: #8ea3bb;
  box-shadow: 0 16px 34px rgb(15 27 61 / 12%);
}

.service-icon,
.project-card__image img {
  transition: transform 260ms var(--ease-settle);
}

.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
  transform: translateY(-2px) scale(1.03);
}

.project-card {
  transition: box-shadow 180ms ease, transform 180ms var(--ease-settle);
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgb(5 13 30 / 28%);
}

.project-card:hover .project-card__image img {
  transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
  .button--primary,
  .button--hero,
  .button--header,
  .service-card,
  .service-icon,
  .project-card,
  .project-card__image img {
    transition: none;
  }

  .button--primary:hover,
  .button--hero:hover,
  .button--header:hover,
  .service-card:hover,
  .service-card:focus-within,
  .service-card:hover .service-icon,
  .service-card:focus-within .service-icon,
  .project-card:hover,
  .project-card:hover .project-card__image img {
    transform: none;
  }
}

/* Homepage direction preview, iteration 15: full-bleed opening nav and simplified proof hierarchy. */
.site-header.site-header--overlay {
  position: fixed;
  right: 0;
  left: 0;
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, backdrop-filter 260ms ease;
}

.site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .brand img {
  filter: drop-shadow(0 1px 10px rgb(255 255 255 / 74%));
}

.site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .primary-nav a {
  color: var(--ink);
  text-shadow: 0 1px 12px rgb(255 255 255 / 88%);
}

.site-header.site-header--overlay.is-scrolled,
.site-header.site-header--overlay.is-open {
  border-bottom-color: var(--line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 28px rgb(15 27 61 / 8%);
  backdrop-filter: blur(14px);
}

.site-header--overlay + main .hero,
.site-header--overlay + main .hero__inner {
  min-height: 100svh;
}

.site-header--overlay + main .hero__inner {
  padding-top: 164px;
}

.section-heading--services {
  max-width: 850px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-heading--services h2 {
  margin: 0 auto;
}

.proof-inline-count {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* Static credibility values remain visible without counter initialization. */
html.js-motion .proof-strip.counters-started .proof-value {
  animation: proof-number-roll 680ms var(--ease-settle) both;
}

html.js-motion .proof-strip.counters-started .proof-item:nth-child(2) .proof-value {
  animation-delay: 70ms;
}

html.js-motion .proof-strip.counters-started .proof-item:nth-child(3) .proof-value {
  animation-delay: 140ms;
}

html.js-motion .proof-strip.counters-started .proof-item:nth-child(4) .proof-value {
  animation-delay: 210ms;
}

@keyframes proof-number-roll {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@media (min-width: 901px) {
  .site-header--overlay + main .hero__backdrop img {
    transform: translateX(-16%);
  }
}

@media (max-width: 900px) {
  .site-header--overlay + main .hero__inner {
    padding-top: 150px;
  }
}

@media (max-width: 640px) {
  .site-header--overlay + main .hero__inner {
    padding-top: 138px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .proof-strip:not(.counters-started) .proof-value,
  html.js-motion .proof-strip.counters-started .proof-value {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* Homepage direction preview, iteration 16: clean-outcome editorial system. */
.hero__copy > .hero__actions {
  margin-top: 34px;
}

.partner-band {
  padding-block: clamp(68px, 7vw, 96px);
  border-block: 1px solid var(--line);
  background: #fff;
}

.partner-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(52px, 8vw, 116px);
}

.partner-band__copy {
  max-width: 560px;
}

.partner-band__copy .section-index {
  margin-bottom: 18px;
}

.partner-band__copy h2 {
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 4vw, 4rem);
  letter-spacing: -0.045em;
}

.partner-band__copy > p:last-child {
  max-width: 54ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.partner-band__logos {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(150px, 0.72fr);
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
}

.partner-logo {
  min-height: 156px;
  display: grid;
  place-items: center;
  padding: 0;
}

.partner-logo img {
  width: 100%;
  max-height: 96px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.partner-logo--md img {
  max-width: 190px;
  max-height: 116px;
}

.outcome {
  background: #f4f6fa;
}

.outcome-grid,
.owner-spotlight__grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(56px, 8vw, 118px);
}

.outcome__media,
.owner-spotlight__media,
.shop__media--single {
  position: relative;
  min-height: 700px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #dce4ed;
}

.outcome__media img,
.owner-spotlight__media img,
.shop__media--single .shop__main-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.outcome__media figcaption,
.owner-spotlight__media figcaption,
.shop__media--single figcaption {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-left: 3px solid #9fc2e8;
  border-radius: var(--radius);
  background: rgb(15 27 61 / 88%);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.45;
  backdrop-filter: blur(10px);
}

.outcome__media figcaption strong,
.owner-spotlight__media figcaption strong,
.shop__media--single figcaption strong {
  font-family: var(--heading);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

.outcome__media figcaption span,
.owner-spotlight__media figcaption span,
.shop__media--single figcaption span {
  color: #dce8f4;
  text-align: right;
}

.outcome__copy {
  max-width: 650px;
}

.outcome__copy h2,
.shop--clean .shop__copy h2,
.owner-spotlight__copy h2 {
  margin-bottom: 24px;
  font-size: clamp(2.85rem, 5vw, 5rem);
  letter-spacing: -0.055em;
}

.outcome__copy .large-copy,
.shop--clean .large-copy,
.owner-spotlight__copy .large-copy {
  color: var(--muted);
}

.outcome-list {
  margin-top: 38px;
  border-bottom: 1px solid #cbd6e2;
}

.outcome-list > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 20px;
  padding-block: 22px;
  border-top: 1px solid #cbd6e2;
}

.outcome-list > div > span {
  padding-top: 3px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.outcome-list h3 {
  margin-bottom: 5px;
  font-size: 1.16rem;
}

.outcome-list p {
  color: var(--muted);
  line-height: 1.6;
}

.outcome__actions,
.reviews-showcase__actions,
.review-source-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.work--clean {
  background: #fff;
  color: var(--ink);
}

.work--clean .section-index,
.work--clean .project-card__caption span {
  color: var(--accent);
}

.work--clean .section-heading--split {
  align-items: end;
  margin-bottom: 52px;
}

.work--clean .section-heading--split > div:first-child {
  max-width: 650px;
}

.work--clean > .shell > .section-heading {
  max-width: 650px;
}

.section-heading__side {
  max-width: 460px;
}

.section-heading__side > p {
  margin-bottom: 18px;
  color: var(--muted);
  line-height: 1.7;
}

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

.project-card--clean,
.project-card--clean.project-card--wide {
  grid-column: auto;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: var(--radius);
  background: #f8fafc;
  color: var(--ink);
  box-shadow: none;
}

.project-card--clean:hover {
  border-color: #a9b8c9;
  box-shadow: 0 14px 30px rgb(15 27 61 / 9%);
}

.project-card--clean .project-card__image,
.project-card--clean .project-card__image img {
  height: 340px;
}

.project-card--clean .project-card__image img {
  object-fit: cover;
}

.project-card--clean:nth-child(1) .project-card__image img {
  object-position: 50% 52%;
}

.project-card--clean .project-card__caption {
  padding: 28px 28px 32px;
}

.project-card--clean .project-card__caption h3 {
  margin-block: 9px 10px;
  color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.project-card--clean .project-card__caption p {
  color: var(--muted);
  line-height: 1.65;
}

.work__cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  text-align: center;
}

.shop--clean {
  background: #f4f6fa;
  color: var(--ink);
}

.shop--clean .shop-grid {
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(56px, 8vw, 118px);
}

.shop--clean .shop__media--single {
  min-height: 690px;
}

.shop--clean .shop__main-photo {
  object-position: 50% 50%;
}

.shop--clean .section-index,
.shop--clean .shop-details span {
  color: var(--accent);
}

.shop--clean .shop-details {
  border-color: #cbd6e2;
}

.shop--clean .shop-details > div + div {
  border-color: #cbd6e2;
}

.shop--clean .shop-details p {
  color: var(--ink);
}

.shop--clean .shop__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.reviews-showcase {
  background: #fff;
}

.reviews-showcase__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 46px;
  margin-bottom: 50px;
}

.reviews-showcase__head > div:first-child {
  max-width: 720px;
}

.reviews-showcase__head h2 {
  font-size: clamp(2.85rem, 5vw, 5rem);
  letter-spacing: -0.055em;
}

.google-rating {
  min-width: 265px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border: 1px solid #dce3ec;
  border-radius: var(--radius);
  background: #f8fafc;
}

.google-rating__mark,
.google-g {
  color: #4285f4;
  font-family: Arial, sans-serif;
  font-weight: 800;
}

.google-rating__mark {
  font-size: 1.8rem;
}

.google-rating > strong {
  color: var(--ink);
  font-family: var(--heading);
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.google-rating .review-stars {
  display: block;
  line-height: 1;
}

.google-rating p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

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

.google-review-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid #dce3ec;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 24px rgb(15 27 61 / 6%);
}

.google-review-card__author {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.review-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #355f8d;
  color: #fff;
  font-family: var(--heading);
  font-weight: 800;
}

.review-avatar--gold {
  background: #b98522;
}

.review-avatar--green {
  background: #39785f;
}

.google-review-card__author div {
  display: grid;
  gap: 2px;
}

.google-review-card__author strong {
  font-size: 0.95rem;
}

.google-review-card__author div span {
  color: var(--muted);
  font-size: 0.78rem;
}

.google-g {
  font-size: 1.3rem;
}

.review-stars {
  color: #f5a623;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.google-review-card blockquote {
  margin: 20px 0 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.2rem, 1.8vw, 1.48rem);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.reviews-showcase__actions {
  justify-content: center;
  margin-top: 38px;
}

.owner-spotlight {
  background: #f4f6fa;
}

.owner-spotlight__media {
  min-height: 660px;
}

.owner-spotlight__media img {
  object-position: 50% 32%;
}

.owner-spotlight__copy {
  max-width: 650px;
}

.owner-spotlight__copy > p:not(.section-index) {
  max-width: 58ch;
  color: var(--muted);
  line-height: 1.72;
}

.owner-spotlight__copy > p + p {
  margin-top: 16px;
}

.owner-spotlight__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 30px;
}

.owner-spotlight__facts span {
  padding: 9px 12px;
  border: 1px solid #cbd6e2;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 750;
}

@media (max-width: 900px) {
  .partner-band__inner,
  .outcome-grid,
  .owner-spotlight__grid,
  .shop--clean .shop-grid {
    grid-template-columns: 1fr;
  }

  .partner-band__inner,
  .outcome-grid,
  .owner-spotlight__grid,
  .shop--clean .shop-grid {
    gap: 44px;
  }

  .partner-band__logos {
    max-width: 680px;
  }

  .outcome__media,
  .owner-spotlight__media,
  .shop--clean .shop__media--single {
    min-height: 590px;
  }

  .project-grid--clean,
  .google-review-grid {
    grid-template-columns: 1fr;
  }

  .project-card--clean {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  }

  .project-card--clean .project-card__image,
  .project-card--clean .project-card__image img {
    height: 100%;
    min-height: 300px;
  }

  .reviews-showcase__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .google-rating {
    min-width: min(100%, 320px);
  }
}

@media (max-width: 640px) {
  .partner-band__logos {
    grid-template-columns: 1fr 0.65fr;
    gap: 14px;
  }

  .partner-logo {
    min-height: 112px;
    padding: 0;
  }

  .partner-logo img {
    max-height: 64px;
  }

  .partner-logo--md img {
    max-height: 82px;
  }

  .outcome__media,
  .owner-spotlight__media,
  .shop--clean .shop__media--single {
    min-height: 460px;
  }

  .outcome__media figcaption,
  .owner-spotlight__media figcaption,
  .shop__media--single figcaption {
    right: 14px;
    bottom: 14px;
    left: 14px;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .outcome__media figcaption span,
  .owner-spotlight__media figcaption span,
  .shop__media--single figcaption span {
    text-align: left;
  }

  .project-card--clean {
    display: block;
  }

  .project-card--clean .project-card__image,
  .project-card--clean .project-card__image img {
    height: 280px;
    min-height: 0;
  }

  .google-review-card {
    min-height: 235px;
    padding: 24px 22px;
  }
}

/* Iteration 40: Evan remains a thumbnail-sized trust cue on the homepage. */
.owner-spotlight__grid {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
  max-width: 1080px;
}

.owner-spotlight__media {
  width: 72px;
  height: 72px;
  min-height: 72px;
  margin-top: 6px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cbd6e2;
}

.owner-spotlight__media img {
  object-position: 50% 36%;
}

.owner-spotlight__media figcaption {
  display: none;
}

.owner-spotlight__copy {
  max-width: 790px;
}

.owner-spotlight__copy h2 {
  font-size: clamp(2.45rem, 4.25vw, 4.3rem);
}

@media (max-width: 900px) {
  .owner-spotlight__grid {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 28px;
  }

  .owner-spotlight__media {
    width: 68px;
    height: 68px;
    min-height: 68px;
  }
}

@media (max-width: 640px) {
  .owner-spotlight__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .owner-spotlight__media {
    width: 64px;
    height: 64px;
    min-height: 64px;
    margin-top: 0;
  }
}

/* Iteration 49: deliberate owner signature, settled page endings, and clean social marks. */
.owner-spotlight {
  border-block: 1px solid #dbe3ec;
  background: #f4f6fa;
}

.owner-spotlight__grid {
  width: min(var(--shell), 1040px);
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: clamp(44px, 6vw, 78px);
  margin-inline: auto;
}

.owner-spotlight__media {
  width: 136px;
  height: auto;
  min-height: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.owner-spotlight__media img {
  position: static;
  width: 108px;
  height: 108px;
  object-fit: cover;
  object-position: 50% 32%;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #bdc9d7, 0 14px 30px rgb(15 27 61 / 13%);
}

.owner-spotlight__media figcaption {
  position: static;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  max-width: 150px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  backdrop-filter: none;
}

.owner-spotlight__media figcaption strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.owner-spotlight__media figcaption span {
  color: var(--muted);
  text-align: center;
}

.owner-spotlight__copy {
  width: 100%;
  max-width: 820px;
}

.owner-spotlight__copy h2 {
  max-width: 720px;
  margin-bottom: 22px;
  font-size: clamp(2.45rem, 3.85vw, 3.85rem);
}

.owner-spotlight__copy > p:not(.section-index) {
  max-width: 66ch;
}

.owner-spotlight__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #cbd6e2;
}

.owner-spotlight__facts {
  margin: 0;
}

.closing {
  padding-block: clamp(76px, 8vw, 108px);
}

.closing__inner {
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 30px;
  margin-inline: auto;
  text-align: center;
}

.closing__inner > div:first-child {
  display: grid;
  justify-items: center;
}

.closing h2 {
  max-width: 900px;
  margin: 0 auto 16px;
  font-size: clamp(2.55rem, 4.75vw, 4.65rem);
}

.closing__inner > div > p:last-child {
  max-width: 680px;
  margin-inline: auto;
}

.closing__action {
  align-items: center;
}

.social-links {
  gap: 10px;
}

.social-links a {
  width: 44px;
  height: 44px;
  border-color: #3c4b66;
  border-radius: 50%;
  background: rgb(255 255 255 / 3%);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.social-links a:hover {
  border-color: #83b5ed;
  background: rgb(131 181 237 / 12%);
  text-decoration: none;
  transform: translateY(-2px);
}

.social-links a > span[aria-hidden="true"] {
  width: 21px;
  height: 21px;
  display: block;
  overflow: hidden;
  background: currentColor;
  font-size: 0;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.social-links a[href*="facebook.com"] > span[aria-hidden="true"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.2 8.1h3.1V4.4c-.54-.08-2.38-.24-4.57-.24-4.5 0-7.58 2.75-7.58 7.8v4.35H2v4.14h3.15V24h4.99v-3.55h4.02l.64-4.14h-4.66v-3.94c0-1.2.33-2.02 2.06-2.02h2V8.1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.2 8.1h3.1V4.4c-.54-.08-2.38-.24-4.57-.24-4.5 0-7.58 2.75-7.58 7.8v4.35H2v4.14h3.15V24h4.99v-3.55h4.02l.64-4.14h-4.66v-3.94c0-1.2.33-2.02 2.06-2.02h2V8.1Z'/%3E%3C/svg%3E");
}

.social-links a[href*="instagram.com"] > span[aria-hidden="true"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.75' y='2.75' width='18.5' height='18.5' rx='5.25' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.25' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.75' y='2.75' width='18.5' height='18.5' rx='5.25' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.25' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.3'/%3E%3C/svg%3E");
}

.social-links a[href*="yelp.com"] > span[aria-hidden="true"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10.2 10.2-1.8-7.9c-.2-.9.8-1.6 1.6-1.1l3.7 2.5c.5.3.7.9.4 1.4l-2.5 5.4c-.3.7-1.2.6-1.4-.3Zm3.1 2.1 6.7-2.2c.9-.3 1.6.7 1.1 1.5l-2.5 3.7c-.3.5-.9.6-1.4.3l-4.3-2c-.7-.3-.5-1.1.4-1.3Zm-.7 3.3 4.1 5.5c.5.7-.1 1.7-1 1.5l-4.2-1.1c-.5-.1-.9-.6-.8-1.2l.5-4.4c.1-.8.9-1 1.4-.3Zm-3.4-.8-4.1 5.1c-.6.7-1.7.2-1.7-.7l.1-4.3c0-.6.4-1 .9-1.1l4.1-.5c.8-.1 1.2.8.7 1.5Zm-.7-3.4-6-2.6c-.9-.4-.8-1.6.1-1.9l4.2-1.4c.5-.2 1.1.1 1.3.6l1.8 4c.3.8-.6 1.6-1.4 1.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10.2 10.2-1.8-7.9c-.2-.9.8-1.6 1.6-1.1l3.7 2.5c.5.3.7.9.4 1.4l-2.5 5.4c-.3.7-1.2.6-1.4-.3Zm3.1 2.1 6.7-2.2c.9-.3 1.6.7 1.1 1.5l-2.5 3.7c-.3.5-.9.6-1.4.3l-4.3-2c-.7-.3-.5-1.1.4-1.3Zm-.7 3.3 4.1 5.5c.5.7-.1 1.7-1 1.5l-4.2-1.1c-.5-.1-.9-.6-.8-1.2l.5-4.4c.1-.8.9-1 1.4-.3Zm-3.4-.8-4.1 5.1c-.6.7-1.7.2-1.7-.7l.1-4.3c0-.6.4-1 .9-1.1l4.1-.5c.8-.1 1.2.8.7 1.5Zm-.7-3.4-6-2.6c-.9-.4-.8-1.6.1-1.9l4.2-1.4c.5-.2 1.1.1 1.3.6l1.8 4c.3.8-.6 1.6-1.4 1.3Z'/%3E%3C/svg%3E");
}

html.js-motion .site-footer[data-reveal],
html.js-motion .site-footer[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 900px) {
  .owner-spotlight__grid {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 34px;
  }

  .owner-spotlight__media {
    width: 120px;
  }

  .owner-spotlight__media img {
    width: 100px;
    height: 100px;
  }

  .owner-spotlight__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .owner-spotlight__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
    text-align: center;
  }

  .owner-spotlight__media {
    width: 124px;
  }

  .owner-spotlight__media img {
    width: 104px;
    height: 104px;
  }

  .owner-spotlight__copy > p:not(.section-index) {
    margin-inline: auto;
  }

  .owner-spotlight__footer,
  .owner-spotlight__facts {
    align-items: center;
    justify-content: center;
  }

  .closing__action {
    width: min(100%, 390px);
  }
}

/* Iteration 50: a continuous image-first shell and a tighter, brand-led footer. */
.interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) {
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
}

.interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .brand img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgb(9 19 45 / 30%));
}

.interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .primary-nav a,
.interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .primary-nav a[aria-current="page"] {
  color: #fff;
  text-shadow: 0 1px 14px rgb(9 19 45 / 46%);
}

.interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .primary-nav a::after {
  background: #fff;
}

.interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .button--header {
  border-color: rgb(255 255 255 / 34%);
  background: rgb(15 27 61 / 74%);
  background-image: none;
  box-shadow: 0 10px 28px rgb(9 19 45 / 18%);
  backdrop-filter: blur(12px);
}

.site-footer {
  padding: 38px 0 16px;
}

.footer-main {
  grid-template-columns: minmax(240px, 1.25fr) repeat(3, minmax(150px, 0.58fr));
  gap: clamp(34px, 4vw, 52px);
  padding-bottom: 28px;
}

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

.brand--footer {
  width: 136px;
  height: auto;
  min-height: 0;
  margin-bottom: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.brand--footer img {
  width: 132px;
  max-height: none;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  margin: 0;
  line-height: 1.58;
}

.footer-brand .social-links {
  margin-top: 15px;
}

.footer-column {
  gap: 8px;
}

.footer-column h2 {
  margin-bottom: 6px;
}

.social-links a {
  width: 40px;
  height: 40px;
}

.social-links a > span[aria-hidden="true"] {
  width: 19px;
  height: 19px;
}

.social-links a[href*="facebook.com"] > span[aria-hidden="true"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91V135.2c0-25.35 12.42-50.06 52.24-50.06H297V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91V135.2c0-25.35 12.42-50.06 52.24-50.06H297V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

.footer-bottom {
  padding-top: 14px;
}

@media (max-width: 900px) {
  .interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .menu-toggle {
    border-color: rgb(255 255 255 / 42%);
    background: rgb(9 19 45 / 56%);
    box-shadow: 0 8px 24px rgb(9 19 45 / 18%);
    backdrop-filter: blur(12px);
  }

  .interior-page .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .menu-toggle span:not(.sr-only) {
    background: #fff;
  }

  .footer-main {
    gap: 32px 26px;
    padding-bottom: 32px;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 42px;
    padding-bottom: max(74px, calc(64px + env(safe-area-inset-bottom)));
  }

  .brand--footer {
    width: 134px;
  }

  .brand--footer img {
    width: 128px;
  }
}

/* Homepage iteration 52: immersive clean-home outcome. */
#next-step.outcome--immersive {
  position: relative;
  min-height: clamp(780px, 84svh, 880px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
  background: #dce4ed;
}

#next-step.outcome--immersive::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(15 27 61 / 13%) 0%, transparent 48%),
    linear-gradient(0deg, rgb(9 19 45 / 14%) 0%, transparent 36%);
  content: "";
  pointer-events: none;
}

#next-step.outcome--immersive .outcome__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #dce4ed;
}

#next-step.outcome--immersive .outcome__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
}

#next-step.outcome--immersive .outcome__stage {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(66px, 7vw, 94px);
}

#next-step.outcome--immersive .outcome__copy {
  width: min(620px, 52vw);
  max-width: none;
  padding: clamp(38px, 3.8vw, 50px);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 6px;
  background: rgb(248 250 252 / 93%);
  box-shadow: 0 30px 80px rgb(9 19 45 / 18%);
  backdrop-filter: blur(18px) saturate(112%);
}

#next-step.outcome--immersive .outcome__copy h2 {
  max-width: none;
  margin-bottom: 20px;
  font-size: clamp(2.65rem, 4.15vw, 4.35rem);
}

#next-step.outcome--immersive .outcome__copy .large-copy {
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.68;
}

#next-step.outcome--immersive .outcome-list {
  margin-top: 28px;
}

#next-step.outcome--immersive .outcome-list > div {
  gap: 16px;
  padding-block: 16px;
}

#next-step.outcome--immersive .outcome-list h3 {
  font-size: 1.06rem;
}

#next-step.outcome--immersive .outcome-list p {
  font-size: 0.94rem;
}

#next-step.outcome--immersive .outcome__actions {
  margin-top: 26px;
}

@media (max-width: 900px) {
  #next-step.outcome--immersive {
    min-height: 0;
    display: block;
    padding: 0 0 52px;
    background: #e8edf3;
  }

  #next-step.outcome--immersive::after {
    display: none;
  }

  #next-step.outcome--immersive .outcome__media {
    position: relative;
    height: clamp(480px, 68svh, 620px);
  }

  #next-step.outcome--immersive .outcome__media img {
    object-position: 61% 50%;
  }

  #next-step.outcome--immersive .outcome__stage {
    min-height: 0;
    display: block;
    margin-top: -96px;
    padding-block: 0;
  }

  #next-step.outcome--immersive .outcome__copy {
    width: 100%;
    padding: clamp(32px, 6vw, 46px);
    background: rgb(248 250 252 / 96%);
    box-shadow: 0 24px 60px rgb(9 19 45 / 16%);
  }

  #next-step.outcome--immersive .outcome__copy h2 {
    max-width: 12ch;
  }
}

@media (max-width: 640px) {
  #next-step.outcome--immersive {
    padding-bottom: 28px;
  }

  #next-step.outcome--immersive .outcome__media {
    height: 480px;
  }

  #next-step.outcome--immersive .outcome__stage {
    margin-top: -72px;
  }

  #next-step.outcome--immersive .outcome__copy {
    padding: 30px 24px 32px;
  }

  #next-step.outcome--immersive .outcome__copy h2 {
    margin-bottom: 18px;
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }

  #next-step.outcome--immersive .outcome__actions,
  #next-step.outcome--immersive .outcome__actions .button {
    width: 100%;
  }
}

/* ==========================================================================
   Blog (content/blog -> /blog/): LocalCraft blog kit, Step 2.6
   Adapted to Vac Shack's own tokens and layout primitives. The shipped kit
   template assumes --s2..--s6, --accent-2/-3, --ink-soft/-deep, --radius-lg,
   --font-heading and a .container/.card vocabulary; this site uses --shell,
   --heading/--body, --muted and .shell, so pasting the template verbatim
   would have rendered the blog unstyled. The class names below are the ones
   scripts/build-blog.mjs actually emits.

   The blog is an ENTRANCE, never a destination (BUILD-STANDARDS 18b): nothing
   on this site links to /blog. These rules are dormant until a post lands.
   ========================================================================== */

/* Compatibility aliases for the renderer's markup. Each of these class names
   has zero occurrences elsewhere in this site's CSS or HTML, so they are inert
   for every existing page. */
.container {
  width: var(--shell);
  margin-inline: auto;
}

.band-surface {
  padding-block: clamp(56px, 7vw, 92px);
  border-block: 1px solid var(--line);
  background: #e9eef5;
}

.lede {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.45vw, 1.23rem);
  line-height: 1.68;
}

.offer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 750;
  text-decoration: none;
}

.font-prose {
  color: var(--muted);
}

/* --- /blog/ index -------------------------------------------------------- */
.ty-hero {
  padding-block: clamp(72px, 8vw, 116px);
}

.ty-hero h1 {
  max-width: 18ch;
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  text-wrap: balance;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.24s var(--ease-settle), box-shadow 0.24s var(--ease-settle),
    border-color 0.24s var(--ease-settle);
}

.blog-card h3 {
  font-size: 1.25rem;
  line-height: 1.24;
  text-wrap: balance;
}

.blog-card p {
  color: var(--muted);
  line-height: 1.62;
}

.blog-card .num {
  color: var(--accent);
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-card .offer-link {
  margin-top: auto;
  padding-top: 6px;
}

@media (hover: hover) {
  .blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(15, 27, 61, 0.12);
  }
}

/* --- a single post ------------------------------------------------------- */
.blog-measure {
  max-width: 760px;
}

.blog-post-head {
  padding-top: clamp(56px, 7vw, 96px);
}

.blog-post-head h1 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.blog-kicker-link {
  color: inherit;
  text-decoration: none;
}

.blog-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

.blog-hero-figure {
  margin: 32px 0 0;
}

.blog-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(15, 27, 61, 0.14);
}

.blog-prose {
  margin-top: 32px;
  color: var(--ink);
  font-size: 1.075rem;
  line-height: 1.72;
}

.blog-prose > * + * {
  margin-top: 1.1em;
}

.blog-prose h2 {
  margin-top: 2em;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}

.blog-prose h3 {
  margin-top: 1.6em;
  font-size: 1.25rem;
  text-wrap: balance;
}

.blog-prose p {
  text-wrap: pretty;
}

.blog-prose a {
  color: var(--accent);
  text-underline-offset: 2px;
}

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

.blog-prose li + li {
  margin-top: 0.4em;
}

.blog-prose blockquote {
  padding-left: 20px;
  border-left: 4px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

.blog-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.blog-prose strong {
  color: var(--ink);
}

/* --- post FAQ ------------------------------------------------------------ */
.blog-faq {
  max-width: 820px;
}

.blog-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.blog-faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.blog-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 16px 20px;
  font-family: var(--heading);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

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

.blog-faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
}

.blog-faq-item[open] summary::after {
  content: "\2212";
}

.blog-faq-a {
  padding: 0 20px 18px;
  color: var(--muted);
}

.blog-faq-a p {
  margin: 0;
}

@media (max-width: 720px) {
  .blog-prose {
    font-size: 1.0125rem;
  }

  .blog-faq-item summary {
    min-height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }
}

/* ==========================================================================
   MOBILE REMEDIATION (Step 3 reopened, 2026-09-11)
   Desktop and tablet are approved and must not move. Everything below is
   scoped to a mobile media query, or to a class that only mobile renders.
   This block sits last so it wins the cascade against the earlier overrides.
   ========================================================================== */

/* --- A. Full-viewport navigation drawer ---------------------------------- */

/* The drawer is a top-level fixed layer, a sibling of the header rather than a
   child of it (BUILD-STANDARDS 7a). The operator's requirement is that it
   cover the whole screen above every page layer, so it also sits above the
   header (100) and the call bar (200). */
.nav-drawer {
  display: none;
}

@media (max-width: 900px) {
  /* The header's inline nav is desktop-only now, but only on a page that
     actually ships the drawer. Pages not yet regenerated keep their old
     header panel rather than losing their mobile navigation entirely. */
  body:has(.nav-drawer) .primary-nav {
    display: none;
  }

  .nav-drawer {
    position: fixed;
    z-index: 300;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-settle), visibility 0s linear 200ms;
  }

  .nav-drawer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .nav-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
  }

  .nav-drawer__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-drawer__brand img {
    width: 96px;
    height: auto;
    max-height: 54px;
    object-fit: contain;
  }

  /* The close control is explicit rather than relying on the hamburger, which
     the full-screen panel covers. */
  .nav-drawer__close {
    width: 48px;
    height: 48px;
    display: grid;
    place-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
  }

  .nav-drawer__close svg {
    width: 20px;
    height: 20px;
    stroke: currentcolor;
    stroke-width: 2;
    fill: none;
  }

  .nav-drawer__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 14px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
  }

  .nav-drawer__nav {
    display: grid;
  }

  .nav-drawer__nav a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline: 4px;
    border-bottom: 1px solid var(--line);
    color: #34405a;
    font-family: var(--heading);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
  }

  /* Navy accent on slate text is too close to read as a state, so the current
     page is marked with a rule down the left edge as well. */
  .nav-drawer__nav a[aria-current="page"] {
    position: relative;
    padding-left: 16px;
    color: var(--accent);
  }

  .nav-drawer__nav a[aria-current="page"]::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    content: "";
  }

  .nav-drawer__nav a:last-child {
    border-bottom: 0;
  }

  .nav-drawer__meta {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .nav-drawer__meta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
  }

  .nav-drawer__foot {
    flex: 0 0 auto;
    padding: 12px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .nav-drawer__foot .button {
    width: 100%;
    min-height: 56px;
  }
}

@media (min-width: 901px) {
  .nav-drawer {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer {
    transition: none;
  }
}

/* --- B. Scroll lock while the drawer is open ----------------------------- */

/* `overflow: hidden` on body alone did not hold: the document still scrolled
   programmatically and under a touch drag. Pinning the body and restoring the
   offset on close is the reliable form. script.js writes body.style.top. */
html.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

html.menu-open body.menu-open {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

/* --- C. The header while the drawer is open ------------------------------ */

/* Fully opaque, and without the backdrop filter: a non-none backdrop-filter
   makes an element a containing block for fixed descendants, which is the
   trap that produced the 319px drawer in the first place. */
.site-header.site-header--overlay.is-open {
  background: var(--surface);
  backdrop-filter: none;
}

/* --- D. Sticky call bar --------------------------------------------------- */

@media (max-width: 640px) {
  /* Operator override: the bar stays reachable through and past the bottom of
     the footer. The former `.closing, .site-footer` stop zone is gone from
     script.js; the footer reserves its own clearance in section E. */
  .mobile-call-bar.mobile-cta-bar {
    z-index: 200;
  }

  /* The drawer covers the bar at z-index 300, but hiding it as well keeps the
     open menu clean if the drawer is ever made translucent. */
  html.menu-open .mobile-call-bar.mobile-cta-bar {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    visibility: hidden;
    pointer-events: none;
  }
}

/* --- E. Mobile footer ----------------------------------------------------- */

/* Measured before this pass at 430px: 1,278px tall, of which the four legal
   links alone took 200px stacked one per row at full width, and the call path
   sat last. Consolidated here into a scannable order (call first), a wrapping
   legal row, and tighter rhythm, with every required link retained. */
@media (max-width: 640px) {
  .site-footer {
    padding-top: 34px;
    /* Clearance for the fixed dock, in the footer's own dark colour, so the
       last footer line always scrolls clear of it (BUILD-STANDARDS 7a). */
    padding-bottom: max(96px, calc(78px + env(safe-area-inset-bottom)));
  }

  /* The grid itself, the column order and the legal row are set in pages.css,
     which is the later stylesheet and would otherwise win. */
  .footer-column > a,
  .footer-column > p {
    line-height: 1.45;
  }

  .footer-column .footer-phone {
    min-height: 52px;
    font-size: 1.25rem;
  }

  .footer-brand p {
    max-width: 40ch;
  }

  .footer-bottom > p {
    margin: 0;
  }
}

/* Tap targets: the three social links measured 40x40 at every width. The size
   change is scoped to touch widths so the approved desktop footer is untouched. */
.social-links a {
  touch-action: manipulation;
}

@media (max-width: 900px) {
  .social-links a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- F. Homepage hero, mobile composition -------------------------------- */

/* The desktop hero is a full-bleed photograph with the copy set over its light
   left side, and it stays exactly that. On a phone that composition fails
   twice: the 16:9 photograph cropped to a 430x932 box shows a 26% slice that
   cuts the vacuum out of frame, and covering 932px at DPR 3 asks for 2,796
   device pixels of height from a 1,080px source, so it renders soft.
   The phone therefore gets its own composition: a full-bleed photo band at a
   height the source can actually fill at 3x, then the copy on the brand
   surface below it in ink type, which also removes the text-over-photo
   contrast risk entirely. */
@media (max-width: 720px) {
  /* The overlay header would eat the top fifth of the photo band, so the
     homepage header is solid from the first frame at this width. Interior
     pages keep their overlay treatment. */
  body:not(.interior-page) .site-header.site-header--overlay {
    position: sticky;
    border-bottom-color: var(--line);
    background: var(--surface);
  }

  body:not(.interior-page) .site-header.site-header--overlay:not(.is-scrolled):not(.is-open) .brand img {
    filter: none;
  }

  .site-header--overlay + main .hero,
  .site-header--overlay + main .hero__inner {
    min-height: 0;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    background: var(--bg);
  }

  /* The scrim existed to rescue type over the photograph; the copy no longer
     sits on the photograph. */
  .hero::before {
    display: none;
  }

  .hero__backdrop {
    position: relative;
    z-index: 0;
    inset: auto;
    height: 358px;
    display: block;
    overflow: hidden;
  }

  .hero__backdrop img {
    width: 100%;
    height: 358px;
    object-fit: cover;
    /* Holds the whole subject, the machine included, in frame. */
    object-position: 52% 46%;
    transform: none;
  }

  .site-header--overlay + main .hero__inner,
  .hero__inner {
    display: block;
    width: var(--shell);
    padding: 26px 0 38px;
  }

  /* The desktop copy block is right-aligned because it sits on the right of
     the photograph. Stacked under a photo band it reads left, like every other
     block of copy on the page. */
  .hero__copy {
    width: 100%;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
    justify-content: flex-start;
    text-align: left;
  }

  .hero__trust {
    max-width: none;
    align-items: flex-start;
    margin-left: 0;
    text-align: left;
  }

  .hero__rating-line {
    justify-content: flex-start;
  }

  /* No photograph behind the copy, so the white halo is not needed. */
  .hero h1,
  .hero__lede,
  .hero__trust {
    text-shadow: none;
  }

  .hero h1 {
    max-width: 18ch;
    margin-bottom: 16px;
    font-size: clamp(2rem, 8.4vw, 2.35rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
    /* No photograph behind it now, so no text-shadow. */
    text-shadow: none;
  }

  /* BUILD-STANDARDS 7b-5: one width for the stacked pair, sized to the widest
     label, capped at the container so a long label wraps rather than
     overflowing into clipped space. */
  .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: start;
    gap: 12px;
    margin-bottom: 22px;
  }

  .hero__actions .button {
    width: 100%;
    min-height: 54px;
  }

  .hero__trust {
    margin-top: 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .hero__rating-line {
    gap: 10px;
  }

  .hero__trust-meta {
    margin-top: 4px;
    color: var(--muted);
  }
}

/* --- G. BUILD-STANDARDS 7c gaps ------------------------------------------ */

/* 7c.9: stop scroll chaining out of the page's own scrollable regions. */
html {
  overscroll-behavior-y: none;
}

.nav-drawer__scroll,
.retractable-demo,
.blog-faq-list {
  overscroll-behavior: contain;
}

/* 7c.5: remove the 300ms tap delay on every control, not just some. */
a[href],
button,
summary,
[role="button"],
input[type="submit"] {
  touch-action: manipulation;
}

/* ── LeadConnector chat widget: keep the nav drawer above it ───────────────
   The widget's own container ships z-index 99999999, which outranks every
   layer this site has, so an open nav drawer rendered underneath a floating
   chat bubble. The drawer is the full-screen mobile navigation and must win.

   100000001, not 100000000: the widget also appends a body-level
   div[data-captcha-portal] for Cloudflare Turnstile and sets its z-index to
   exactly 100000000. Equal values on two fixed elements resolve by DOM order,
   and that portal is created at challenge time, so it is always later in the
   document than this drawer and would win a tie.

   The widget's offset away from the mobile call bar is NOT solved here. It
   cannot be: the bubble lives inside a shadow root, so no page stylesheet can
   reach it. An earlier attempt gave the host a transform to become a
   containing block, which did move the bubble, but it also made the host the
   containing block for the opened chat panel, and the panel is sized in
   percentages: with a 0x0 host it collapsed to 28px wide. That offset is now
   applied by injecting a stylesheet into the widget's own shadow root from
   script.js. See mountChatWidgetFit() there. */
.nav-drawer {
  z-index: 100000001;
}

/* Homepage service regions and self-hosted, geographic reference map. */
.home-service-area {
  border-block: 1px solid var(--line);
  background: #fff;
}
.home-service-area__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}
.home-service-area__copy h2 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  margin-bottom: 20px;
}
.home-service-area__copy > p {
  color: var(--muted);
  margin-bottom: 26px;
}
.home-service-area__regions {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.home-service-area__regions li {
  padding: 17px 0;
  border-top: 1px solid var(--line);
}
.home-service-area__regions h3 {
  margin-bottom: 7px;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.home-service-area__regions p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.7;
}
.home-service-area__regions a {
  text-decoration-color: #a8b6c7;
  text-underline-offset: 3px;
}
.home-service-area__regions a:hover { color: var(--accent); text-decoration-color: currentColor; }
.home-service-area__map { min-width: 0; margin: 0; }
.home-service-area__map > img {
  width: 100%;
  height: auto;
  border: 1px solid #ccd8df;
  border-radius: 5px;
}
.home-service-area__map figcaption {
  padding-top: 17px;
  font-size: .875rem;
  color: var(--muted);
}
.home-service-area__map-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
}
.home-service-area__map-note a { color: var(--accent); font-weight: 750; }
.home-service-area__map-credit { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }
@media (max-width: 980px) {
  .home-service-area__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-service-area__copy h2 { max-width: 620px; }
  .home-service-area__copy > p { max-width: 660px; }
  .home-service-area__regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 600px) {
  .home-service-area__regions { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-service-area__map-note { flex-direction: column; }
}

/* Shopfront photo alongside the professional hero; crop stays presentation-only. */
.hero__shop {
  position: absolute;
  bottom: 42px;
  left: 0;
  display: block;
  width: min(300px, 44%);
  overflow: hidden;
  border: 1px solid #d1dce6;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 28px rgb(15 27 61 / 14%);
}
.hero__shop-photo { display: block; aspect-ratio: 2 / 1; overflow: hidden; }
.hero__shop-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 30%; transform: scale(1.35); transform-origin: 48% 35%; }
.hero__shop-copy { display: grid; gap: 5px; padding: 12px 14px; }
.hero__shop-copy strong { font-size: 1rem; }
.hero__shop-copy > span { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.proof-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof-grid--three .proof-value { font-size: clamp(1.7rem, 3vw, 2.8rem); }
@media (min-width: 901px) {
  .hero__backdrop { right: 30%; }
  .site-header--overlay + main .hero__backdrop img { transform: none; object-position: 50% 50%; }
  .hero::before { background: linear-gradient(90deg, transparent 26%, rgb(244 246 250 / 40%) 40%, #f4f6fa 63%); }
}
@media (max-width: 900px) {
  .hero__shop { position: static; width: min(300px, 100%); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .site-header--overlay + main .hero__inner { flex-direction: column; align-items: flex-end; justify-content: center; gap: 32px; padding-bottom: 40px; }
  .hero__shop { align-self: flex-start; }
}
@media (min-width: 1800px) {
  .site-header--overlay + main .hero__backdrop img { object-fit: contain; object-position: left center; }
  .hero::before { background: linear-gradient(90deg, transparent 15%, rgb(244 246 250 / 35%) 30%, #f4f6fa 49%); }
}
@media (max-width: 720px) {
  .hero__shop { width: 100%; max-width: 300px; margin-top: 26px; }
  .proof-grid--three { grid-template-columns: minmax(0, 1fr); }
  .proof-grid--three .proof-item { min-height: 100px; }
}