/* Vac Shack interior pages: Clear Blue Workbench. */

.interior-page {
  background: var(--bg);
}

.interior-page .primary-nav a[aria-current="page"] {
  color: var(--accent);
}

.interior-page .primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
}

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

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span[aria-hidden="true"] {
  color: #9aa7b8;
}

.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #eef2f7;
}

.page-hero__grid {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr);
  align-items: stretch;
  gap: clamp(42px, 6vw, 92px);
}

.page-hero__copy {
  align-self: center;
  padding-block: 88px 96px;
}

.page-hero__kicker,
.chapter-label,
.micro-label {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.page-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.page-hero__kicker::before {
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--accent);
  content: "";
}

.page-hero h1 {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(3rem, 5.8vw, 5.4rem);
  font-weight: 780;
  letter-spacing: -0.055em;
}

.page-hero h1 em,
.legal-wrap h1 em,
.utility-wrap h1 em {
  color: var(--accent);
  font-style: italic;
  font-synthesis: style;
}

.page-hero--text h1 em,
.error-stage h1 em {
  color: #9fc2e8;
  font-style: italic;
  font-synthesis: style;
}

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

.page-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.button--outline {
  border-color: #9aacbf;
  background: rgb(255 255 255 / 72%);
  color: var(--ink);
}

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

.page-hero__proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #ccd6e1;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
}

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

.page-hero__proof span + span::before {
  margin-right: 14px;
  color: #9aa7b7;
  content: "/";
}

.page-hero__visual {
  position: relative;
  min-height: 620px;
  margin-right: calc((100vw - min(1200px, calc(100vw - 48px))) / -2);
  overflow: hidden;
  background: #dfe6ee;
}

.page-hero__visual::before {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 78px;
  background: linear-gradient(90deg, #eef2f7, transparent);
  content: "";
  pointer-events: none;
}

.page-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__caption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  max-width: 360px;
  margin: 0;
  padding: 14px 17px;
  border-left: 4px solid #84a6c9;
  border-radius: var(--radius);
  background: rgb(9 19 45 / 90%);
  color: #eef4fb;
  font-size: 0.875rem;
  line-height: 1.5;
}

.page-hero__caption strong {
  display: block;
  margin-bottom: 3px;
  color: white;
  font-family: var(--heading);
  font-size: 0.875rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.page-hero--text {
  background: var(--ink);
  color: white;
}

.page-hero--text::after {
  position: absolute;
  right: clamp(24px, 8vw, 120px);
  bottom: -160px;
  width: 390px;
  height: 390px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 50%;
  content: "";
}

.page-hero--text .page-hero__grid {
  min-height: 500px;
  grid-template-columns: minmax(0, 790px);
}

.page-hero--text .breadcrumb,
.page-hero--text .breadcrumb a,
.page-hero--text .page-hero__lede,
.page-hero--text .page-hero__proof {
  color: #c8d3e2;
}

.page-hero--text .page-hero__kicker {
  color: #9fc2e8;
}

.page-hero--text .page-hero__kicker::before {
  background: #9fc2e8;
}

.page-hero--text .page-hero__proof {
  border-color: rgb(255 255 255 / 18%);
}

.page-hero--text .page-hero__proof strong {
  color: white;
}

.page-hero--compact .page-hero__grid {
  min-height: 420px;
}

.page-hero--compact .page-hero__copy {
  padding-block: 74px 82px;
}

.page-hero--compact h1 {
  font-size: clamp(2.9rem, 5vw, 4.7rem);
}

.decision-rail {
  border-bottom: 1px solid var(--line);
  background: white;
}

.decision-rail__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.decision-rail__item {
  min-height: 116px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 24px 26px;
  border-right: 1px solid var(--line);
}

.decision-rail__item:first-child {
  border-left: 1px solid var(--line);
}

.decision-rail__item strong {
  color: var(--ink);
  font-family: var(--heading);
  font-size: 1rem;
  line-height: 1.25;
}

.decision-rail__item span {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.content-section {
  padding-block: clamp(82px, 9vw, 132px);
}

.content-section--white {
  border-block: 1px solid var(--line);
  background: white;
}

.content-section--ink {
  background: var(--ink);
  color: white;
}

.content-section--accent {
  background: var(--accent);
  color: white;
}

.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.6fr);
  align-items: end;
  gap: clamp(36px, 6vw, 84px);
  margin-bottom: clamp(42px, 6vw, 72px);
}

.chapter-head h2 {
  max-width: 800px;
  margin: 12px 0 0;
}

.chapter-head > p {
  max-width: 470px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 1.02rem;
}

.content-section--ink .chapter-label,
.content-section--accent .chapter-label {
  color: #9fc2e8;
}

.content-section--ink .chapter-head > p,
.content-section--accent .chapter-head > p {
  color: #c9d5e4;
}

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

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

.card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.path-card,
.info-card,
.brand-card,
.rating-card {
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: clamp(27px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.path-card {
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.path-card:hover {
  transform: translateY(-4px);
  border-color: #9aadc2;
  box-shadow: 0 20px 48px rgb(15 27 61 / 9%);
}

.path-card--blue {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.card-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 44px;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.55;
}

.path-card--blue .card-icon {
  stroke: white;
}

.path-card h3,
.info-card h3,
.brand-card h3 {
  margin-bottom: 13px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.path-card p,
.info-card p,
.brand-card p {
  color: var(--muted);
}

.path-card--blue p {
  color: #dce7f2;
}

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

.path-card--blue .card-link {
  border-color: rgb(255 255 255 / 24%);
  color: white;
}

.info-card {
  min-height: 250px;
}

.info-card__number {
  margin-bottom: auto;
  color: var(--accent);
  font-family: var(--heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.info-card h3 {
  margin-top: 42px;
}

.answer-band {
  padding-block: 44px;
  border-block: 1px solid var(--line);
  background: #e9eef5;
}

.answer-band__inner {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: start;
  gap: 44px;
}

.answer-band__content h2 {
  max-width: 850px;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  line-height: 1.15;
}

.answer-band__content > p:not(.page-freshness):not(.sourced-fact) {
  max-width: 900px;
  margin: 0;
  color: #253451;
  font-family: var(--heading);
  font-size: clamp(1.06rem, 1.6vw, 1.3rem);
  font-weight: 620;
  line-height: 1.58;
}

.page-freshness {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.answer-band__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.answer-band__label::before {
  width: 28px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.context-bridge {
  border-block: 1px solid var(--line);
  background: white;
}

.context-bridge p {
  max-width: 990px;
  margin: 0 auto;
  padding-block: clamp(30px, 4vw, 46px);
  color: #3f4c63;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
}

.context-bridge a {
  color: var(--accent);
  font-weight: 740;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.source-section {
  padding-block: clamp(56px, 7vw, 84px);
  background: #e9eef5;
}

.source-note {
  max-width: 930px;
}

.source-note h2 {
  max-width: 790px;
  margin: 12px 0 18px;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}

.source-note > p:last-child {
  max-width: 850px;
  margin: 0;
  color: #344258;
  font-size: 1rem;
  line-height: 1.75;
}

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

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

.owner-profile {
  display: grid;
  grid-template-columns: minmax(220px, 0.46fr) minmax(0, 1.54fr);
  align-items: stretch;
  gap: clamp(38px, 6vw, 84px);
}

.owner-profile__mark {
  min-height: 350px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--surface);
  font-family: var(--heading);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 780;
  letter-spacing: -0.07em;
}

.owner-profile__copy {
  align-self: center;
  max-width: 800px;
}

.owner-profile__copy h2 {
  margin: 10px 0 4px;
  font-size: clamp(2.55rem, 5vw, 4.7rem);
}

.owner-profile__role {
  margin: 0 0 24px;
  color: var(--accent);
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 760;
}

.owner-profile__copy > p:not(.chapter-label, .owner-profile__role, .owner-profile__note) {
  max-width: 760px;
  color: #344258;
  font-size: 1.05rem;
  line-height: 1.78;
}

.owner-profile__focus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 30px 0 20px;
  padding: 0;
  list-style: none;
}

.owner-profile__focus li {
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.45;
}

.owner-profile__note {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.split-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, 0.76fr);
  align-items: center;
  gap: clamp(52px, 8vw, 110px);
}

.split-proof--reverse {
  grid-template-columns: minmax(380px, 0.76fr) minmax(0, 1.04fr);
}

.split-proof--reverse .split-proof__media {
  order: 2;
}

.split-proof__copy h2 {
  margin: 13px 0 25px;
  font-size: clamp(2.35rem, 4vw, 3.8rem);
}

.split-proof__copy > p:not(.chapter-label) {
  max-width: 620px;
  color: var(--muted);
  font-size: 1.04rem;
}

.split-proof__copy .button,
.split-proof__copy .text-link {
  margin-top: 18px;
}

.media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  background: #dfe6ee;
}

.media-frame::before {
  position: absolute;
  z-index: 1;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 6px;
  background: var(--accent);
  content: "";
}

.media-frame img {
  width: 100%;
  min-height: 480px;
  object-fit: cover;
}

.media-frame--landscape img {
  min-height: 390px;
  aspect-ratio: 16 / 10;
}

.media-frame figcaption {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  left: 20px;
  margin: 0;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: rgb(9 19 45 / 90%);
  color: white;
  font-size: 0.875rem;
  line-height: 1.5;
}

.process-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line-dark);
}

.process-step {
  min-height: 300px;
  padding: 36px;
  border-right: 1px solid var(--line-dark);
}

.process-step:last-child {
  border-right: 0;
}

.process-step__number {
  display: block;
  margin-bottom: 58px;
  color: #9fc2e8;
  font-family: var(--heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.process-step h3 {
  color: white;
  font-size: 1.45rem;
}

.process-step p {
  margin: 0;
  color: #c4d0df;
}

.bullet-checks {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.bullet-checks li {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--line);
  color: #2e3b55;
}

.bullet-checks li::before {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #8da2ba;
  border-radius: 50%;
  color: var(--accent);
  content: "✓";
  font-size: 0.875rem;
  font-weight: 900;
}

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

.comparison-panel {
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.comparison-panel--accent {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.comparison-panel h3 {
  margin: 12px 0 22px;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
}

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

.comparison-panel--accent p,
.comparison-panel--accent li,
.comparison-panel--accent .micro-label {
  color: #dce7f2;
}

.comparison-panel ul {
  display: grid;
  gap: 11px;
  margin: 24px 0 0;
  padding-left: 20px;
}

.project-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.evidence-card {
  grid-column: span 4;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: #111f3b;
}

.evidence-card--wide {
  grid-column: span 8;
}

.evidence-card__media {
  overflow: hidden;
  background: #22304b;
}

.evidence-card__media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  transition: transform 300ms ease;
}

.evidence-card:hover img {
  transform: scale(1.015);
}

.evidence-card--wide .evidence-card__media img {
  height: 420px;
}

.evidence-card__copy {
  min-height: 168px;
  padding: 24px 26px 28px;
}

.evidence-card__copy span {
  color: #91b7dd;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.evidence-card__copy h3 {
  margin: 9px 0 8px;
  color: white;
  font-size: 1.35rem;
}

.evidence-card__copy p {
  margin: 0;
  color: #bdc9d8;
  font-size: 1rem;
}

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

.rating-card {
  min-height: 260px;
  justify-content: space-between;
}

.rating-card strong {
  display: block;
  color: var(--accent);
  font-family: var(--heading);
  font-size: clamp(3rem, 5vw, 4.7rem);
  line-height: 1;
}

.rating-card h3 {
  margin: 14px 0 5px;
  font-size: 1.15rem;
}

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

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

.quote-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.quote-card__stars {
  margin-bottom: 44px;
  color: var(--accent);
  font-size: 0.875rem;
  letter-spacing: 0.11em;
}

.quote-card blockquote {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 660;
  line-height: 1.42;
}

.quote-card cite {
  margin-top: auto;
  padding-top: 26px;
  color: var(--muted);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 650;
}

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

.brand-card {
  min-height: 180px;
  justify-content: flex-end;
}

.brand-card h3 {
  color: var(--accent);
  font-size: 1.4rem;
}

.brand-card p {
  margin: 0;
  font-size: 1rem;
}

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

.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
  gap: clamp(52px, 8vw, 110px);
}

.faq-layout__head {
  position: sticky;
  top: 126px;
  align-self: start;
}

.faq-layout__head h2 {
  margin-top: 12px;
  font-size: clamp(2.35rem, 4vw, 3.7rem);
}

.faq-layout__head p:last-child {
  color: var(--muted);
}

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

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

.interior-faq summary {
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 24px;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.04rem, 1.6vw, 1.25rem);
  font-weight: 690;
  list-style: none;
  cursor: pointer;
}

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

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

.interior-faq summary span {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #93a4b8;
  border-radius: 50%;
}

.interior-faq summary span::before,
.interior-faq summary span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: var(--accent);
  content: "";
  transform: translate(-50%, -50%);
}

.interior-faq summary span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.interior-faq details[open] summary span::after {
  transform: translate(-50%, -50%) rotate(0);
}

.interior-faq details > p {
  max-width: 720px;
  margin: -2px 54px 30px 0;
  color: var(--muted);
}

.visit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.75fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.visit-panel__copy {
  padding: clamp(38px, 6vw, 72px);
}

.visit-panel__copy h2 {
  margin: 13px 0 26px;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
}

.visit-panel__copy > p {
  max-width: 620px;
  color: var(--muted);
}

.visit-panel__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 34px 0 0;
  border-block: 1px solid var(--line);
}

.visit-panel__facts div {
  padding: 20px 18px 20px 0;
}

.visit-panel__facts div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.visit-panel__facts strong,
.visit-panel__facts span {
  display: block;
}

.visit-panel__facts strong {
  margin-bottom: 5px;
  color: var(--ink);
  font-family: var(--heading);
}

.visit-panel__facts span {
  color: var(--muted);
  font-size: 1rem;
}

.visit-panel__media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.contact-board {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.contact-card {
  grid-column: span 4;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.contact-card--phone {
  grid-column: span 8;
  background: var(--accent);
  color: white;
}

.contact-card .micro-label {
  margin-bottom: auto;
}

.contact-card--phone .micro-label {
  color: #b9d0e8;
}

.contact-card h2 {
  margin: 42px 0 16px;
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.contact-card--phone h2 a {
  color: white;
  text-decoration: none;
}

.contact-card p {
  margin: 0;
  color: var(--muted);
}

.contact-card--phone p {
  color: #d8e4ef;
}

.contact-card .text-link {
  margin-top: 24px;
}

.contact-card--phone .text-link {
  color: white;
}

.legal-page,
.utility-page {
  padding-block: clamp(76px, 9vw, 124px);
  background: white;
}

.legal-wrap,
.utility-wrap {
  width: min(820px, calc(100% - 48px));
  margin-inline: auto;
}

.legal-wrap h1,
.utility-wrap h1 {
  margin-bottom: 16px;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}

.legal-meta {
  margin-bottom: 52px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.legal-wrap h2,
.utility-wrap h2 {
  margin: 54px 0 18px;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
}

.legal-wrap h3 {
  margin: 32px 0 12px;
  font-size: 1.18rem;
}

.legal-wrap p,
.legal-wrap li,
.utility-wrap p,
.utility-wrap li {
  color: #38455d;
}

.legal-wrap li + li,
.utility-wrap li + li {
  margin-top: 9px;
}

.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 50px;
}

.sitemap-group {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.sitemap-group h2 {
  margin: 0 0 22px;
}

.sitemap-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-group li {
  border-top: 1px solid var(--line);
}

.sitemap-group a {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.sitemap-group a::after {
  color: var(--accent);
  content: "→";
}

.error-stage {
  min-height: calc(100svh - 86px);
  display: grid;
  place-items: center;
  padding-block: 80px;
  background: var(--ink);
  color: white;
  text-align: center;
}

.error-stage__inner {
  width: min(780px, calc(100% - 40px));
}

.error-code {
  display: block;
  margin-bottom: 18px;
  color: #9fc2e8;
  font-family: var(--heading);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.08em;
}

.error-stage h1 {
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.error-stage p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: #c7d2e1;
  font-size: 1.05rem;
}

.error-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

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

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.footer-legal a {
  color: #aeb9ca;
  font-size: 0.875rem;
  text-decoration: none;
}

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

@media (max-width: 1020px) {
  .page-hero__grid {
    min-height: auto;
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 0.85fr);
    gap: 42px;
  }

  .page-hero__visual {
    min-height: 560px;
  }

  .card-grid--4,
  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evidence-card,
  .evidence-card--wide {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  .page-hero__grid,
  .page-hero--text .page-hero__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .page-hero__copy {
    padding-block: 74px 68px;
  }

  .page-hero__visual {
    order: -1;
    height: 500px;
    min-height: 500px;
    margin: 0 calc((100vw - min(760px, calc(100vw - 36px))) / -2);
  }

  .page-hero__visual::before {
    width: auto;
    height: 70px;
    inset: auto 0 0;
    background: linear-gradient(0deg, #eef2f7, transparent);
  }

  .chapter-head,
  .split-proof,
  .split-proof--reverse,
  .faq-layout,
  .visit-panel {
    grid-template-columns: 1fr;
  }

  .split-proof--reverse .split-proof__media {
    order: initial;
  }

  .faq-layout__head {
    position: static;
  }

  .card-grid,
  .rating-grid,
  .quote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .decision-rail__item:nth-child(2) {
    border-right: 0;
  }

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

  .process-track {
    grid-template-columns: 1fr;
  }

  .process-step {
    min-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .process-step:last-child {
    border-bottom: 0;
  }

  .process-step__number {
    margin-bottom: 38px;
  }

  .contact-card,
  .contact-card--phone {
    grid-column: span 6;
  }

  .contact-card--phone {
    grid-column: 1 / -1;
  }

  .visit-panel__media img {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .breadcrumb {
    margin-bottom: 20px;
    font-size: 0.875rem;
  }

  .page-hero__copy {
    padding-block: 50px 56px;
  }

  .page-hero h1 {
    font-size: clamp(2.3rem, 9.6vw, 2.85rem);
  }

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

  .page-hero__actions .button {
    width: 100%;
  }

  .page-hero__proof {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .page-hero__proof span + span::before {
    margin: 0;
    content: "";
  }

  .page-hero__visual {
    height: 360px;
    min-height: 360px;
    margin-inline: -14px;
  }

  .page-hero__caption {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .decision-rail__item {
    min-height: 104px;
    padding: 20px 18px;
  }

  .chapter-head,
  .answer-band__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .owner-profile {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .owner-profile__mark {
    min-height: 220px;
  }

  .owner-profile__focus {
    grid-template-columns: 1fr;
  }

  .owner-profile__focus li {
    min-height: 74px;
  }

  .chapter-head {
    margin-bottom: 36px;
  }

  .chapter-head > p {
    font-size: 1rem;
  }

  .card-grid,
  .card-grid--2,
  .card-grid--4,
  .rating-grid,
  .quote-grid,
  .brand-grid,
  .comparison-grid,
  .sitemap-groups {
    grid-template-columns: 1fr;
  }

  .path-card,
  .info-card,
  .brand-card,
  .rating-card {
    min-height: 250px;
  }

  .path-card {
    min-height: 315px;
  }

  .card-icon {
    margin-bottom: 36px;
  }

  .media-frame img,
  .media-frame--landscape img {
    min-height: 340px;
  }

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

  .evidence-card,
  .evidence-card--wide {
    grid-column: auto;
  }

  .evidence-card__media img,
  .evidence-card--wide .evidence-card__media img {
    height: 320px;
  }

  .contact-board {
    grid-template-columns: 1fr;
  }

  .contact-card,
  .contact-card--phone {
    grid-column: auto;
  }

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

  .visit-panel__facts div + div {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .visit-panel__media img {
    min-height: 340px;
  }

  .legal-wrap,
  .utility-wrap {
    width: calc(100% - 28px);
  }

  .legal-meta {
    margin-bottom: 38px;
  }

  .footer-legal {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-card,
  .evidence-card__media img {
    transition: none;
  }
}

/* Premium Polish Wave 2: centered editorial FAQs and resilient headline fitting. */
.page-hero h1,
.legal-wrap h1,
.utility-wrap h1 {
  max-width: 100%;
  overflow-wrap: normal;
}

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

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

.faq-layout__head h2,
.faq-layout__head p:last-child {
  margin-inline: auto;
}

.faq-layout__head p:last-child {
  max-width: 70ch;
}

.interior-faq {
  max-width: 820px;
  margin-inline: auto;
}

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

.interior-faq details > p,
.source-note > p:last-child {
  max-width: var(--measure);
}

@media (max-width: 640px) {
  .page-hero h1 {
    font-size: clamp(2.15rem, 8.8vw, 2.65rem);
    letter-spacing: -0.045em;
  }

  .faq-layout__head {
    margin-bottom: 34px;
  }
}

/* Premium Polish Wave 3: depth stays quiet and inside the locked palette. */
.page-hero__copy {
  background-image: radial-gradient(ellipse 76% 58% at 28% 43%, rgb(31 64 104 / 8%) 0%, rgb(31 64 104 / 3%) 44%, transparent 74%);
}

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

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

.card-icon {
  transition: transform 260ms var(--ease-settle);
}

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

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

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

.evidence-card__media img {
  transition: transform 300ms var(--ease-settle);
}

.evidence-card:hover .evidence-card__media img {
  transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
  .path-card,
  .card-icon,
  .evidence-card,
  .evidence-card__media img {
    transition: none;
  }

  .path-card:hover,
  .path-card:focus-within,
  .path-card:hover .card-icon,
  .path-card:focus-within .card-icon,
  .evidence-card:hover,
  .evidence-card:hover .evidence-card__media img {
    transform: none;
  }
}

/* Premium Polish Wave 4: traceable imagery with restrained, square-edged depth. */
.image-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 36%),
    0 16px 34px rgb(15 27 61 / 10%);
}

.image-frame::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 64%, rgb(15 27 61 / 18%) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 36%);
  content: "";
  pointer-events: none;
}

.image-frame--hero {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 32%),
    -12px 16px 34px rgb(15 27 61 / 9%);
}

.image-frame--flush {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 34%),
    -10px 0 28px rgb(15 27 61 / 8%);
}

.image-frame--flush::after,
.image-frame--diagnosis::after {
  background: none;
}

.image-frame--diagnosis::after {
  bottom: 50px;
}

.image-frame--gallery::after {
  opacity: 0.72;
  transition: opacity 220ms ease;
}

.page-hero__visual::before,
.media-frame::before {
  z-index: 2;
}

.page-hero__caption,
.media-frame figcaption {
  z-index: 3;
}

.service-icon,
.card-icon {
  padding: 7px;
  border: 1px solid rgb(31 64 104 / 44%);
  border-radius: 50%;
  background: rgb(255 255 255 / 82%);
  box-shadow:
    0 0 0 4px rgb(31 64 104 / 8%),
    0 7px 15px rgb(15 27 61 / 12%);
}

.service-card--accent .service-icon,
.path-card--blue .card-icon {
  border-color: rgb(255 255 255 / 68%);
  background: rgb(255 255 255 / 7%);
  box-shadow:
    0 0 0 4px rgb(255 255 255 / 10%),
    0 7px 15px rgb(5 13 30 / 20%);
}

.gallery-card__caption,
.portfolio-card__caption {
  opacity: 0.94;
  transform: translateY(2px);
  transition: opacity 220ms ease, transform 220ms var(--ease-settle);
}

.shop__main-photo,
.shop__secondary-photo {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 42%),
    0 16px 32px rgb(5 13 30 / 22%);
}

@media (hover: hover) {
  .gallery-card:hover .gallery-card__caption,
  .gallery-card:focus-within .gallery-card__caption,
  .portfolio-card:hover .portfolio-card__caption,
  .portfolio-card:focus-within .portfolio-card__caption {
    opacity: 1;
    transform: translateY(0);
  }

  .gallery-card:hover .image-frame--gallery::after,
  .gallery-card:focus-within .image-frame--gallery::after,
  .portfolio-card:hover .image-frame--gallery::after,
  .portfolio-card:focus-within .image-frame--gallery::after {
    opacity: 1;
  }
}

@media (hover: none) {
  .gallery-card__caption,
  .portfolio-card__caption {
    opacity: 1;
    transform: none;
  }

  .image-frame--gallery::after {
    opacity: 0.86;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-frame--gallery::after,
  .gallery-card__caption,
  .portfolio-card__caption {
    transition: none;
  }

  .gallery-card__caption,
  .portfolio-card__caption {
    transform: none;
  }
}

/* Premium Polish Wave 5: page-authored hero rhythms and service-specific evidence patterns. */
@media (min-width: 901px) {
  .page-hero--survey .page-hero__grid {
    min-height: 560px;
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: clamp(44px, 5vw, 70px);
  }

  .page-hero--survey .page-hero__copy {
    padding-block: 72px 80px;
  }

  .page-hero--survey h1 {
    max-width: 650px;
    font-size: clamp(3rem, 4.8vw, 4.65rem);
  }

  .page-hero--survey .page-hero__lede {
    max-width: 590px;
  }

  .page-hero--system .page-hero__grid {
    min-height: 650px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(52px, 6vw, 84px);
  }

  .page-hero--system h1 {
    max-width: 760px;
    font-size: clamp(3.1rem, 5.45vw, 5.2rem);
  }

  .page-hero--system .page-hero__lede {
    max-width: 550px;
  }

  .page-hero--route .page-hero__grid {
    min-height: 600px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 6vw, 82px);
  }

  .page-hero--route .page-hero__visual {
    min-height: 516px;
    margin-block: 42px;
  }

  .page-hero--route h1 {
    max-width: 620px;
    font-size: clamp(2.95rem, 4.75vw, 4.45rem);
  }

  .page-hero--diagnose .page-hero__grid {
    min-height: 560px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(46px, 5vw, 72px);
  }

  .page-hero--diagnose .page-hero__copy {
    padding-block: 68px 74px;
  }

  .page-hero--diagnose h1 {
    max-width: 720px;
    font-size: clamp(3rem, 4.8vw, 4.55rem);
  }

  .page-hero--facility .page-hero__grid {
    min-height: 570px;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
    gap: clamp(54px, 6vw, 88px);
  }

  .page-hero--facility h1 {
    max-width: 790px;
    font-size: clamp(2.9rem, 4.55vw, 4.25rem);
  }

  .page-hero--facility .page-hero__lede {
    max-width: 700px;
  }

  .page-hero--match .page-hero__grid {
    min-height: 570px;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(44px, 5vw, 74px);
  }

  .page-hero--match h1 {
    max-width: 640px;
    font-size: clamp(2.9rem, 4.55vw, 4.3rem);
  }

  .page-hero--portfolio .page-hero__grid {
    min-height: 560px;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(42px, 5vw, 68px);
  }

  .page-hero--portfolio h1 {
    max-width: 560px;
    font-size: clamp(2.8rem, 4.25vw, 4rem);
  }

  .page-hero--portfolio .page-hero__lede {
    max-width: 500px;
  }

  .page-hero--story .page-hero__grid {
    min-height: 630px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(56px, 6vw, 88px);
  }

  .page-hero--story h1 {
    max-width: 730px;
    font-size: clamp(3.05rem, 5vw, 4.8rem);
  }

  .page-hero--plan .page-hero__grid,
  .page-hero--reach .page-hero__grid,
  .page-hero--preserve .page-hero__grid,
  .page-hero--bench .page-hero__grid,
  .page-hero--showroom .page-hero__grid,
  .page-hero--compare .page-hero__grid,
  .page-hero--identify .page-hero__grid,
  .page-hero--voices .page-hero__grid,
  .page-hero--contact .page-hero__grid {
    gap: clamp(46px, 5vw, 76px);
  }

  .page-hero--plan .page-hero__copy,
  .page-hero--reach .page-hero__copy,
  .page-hero--preserve .page-hero__copy,
  .page-hero--bench .page-hero__copy,
  .page-hero--showroom .page-hero__copy,
  .page-hero--compare .page-hero__copy,
  .page-hero--identify .page-hero__copy,
  .page-hero--voices .page-hero__copy,
  .page-hero--contact .page-hero__copy {
    order: 2;
    background-image: radial-gradient(ellipse 76% 58% at 72% 43%, rgb(31 64 104 / 8%) 0%, rgb(31 64 104 / 3%) 44%, transparent 74%);
  }

  .page-hero--plan .page-hero__visual,
  .page-hero--reach .page-hero__visual,
  .page-hero--preserve .page-hero__visual,
  .page-hero--bench .page-hero__visual,
  .page-hero--showroom .page-hero__visual,
  .page-hero--compare .page-hero__visual,
  .page-hero--identify .page-hero__visual,
  .page-hero--voices .page-hero__visual,
  .page-hero--contact .page-hero__visual {
    order: 1;
    margin-right: 0;
    margin-left: calc((100vw - min(1200px, calc(100vw - 48px))) / -2);
  }

  .page-hero--plan .page-hero__visual::before,
  .page-hero--reach .page-hero__visual::before,
  .page-hero--preserve .page-hero__visual::before,
  .page-hero--bench .page-hero__visual::before,
  .page-hero--showroom .page-hero__visual::before,
  .page-hero--compare .page-hero__visual::before,
  .page-hero--identify .page-hero__visual::before,
  .page-hero--voices .page-hero__visual::before,
  .page-hero--contact .page-hero__visual::before {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, #eef2f7, transparent);
  }

  .page-hero--plan .page-hero__grid {
    min-height: 610px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .page-hero--plan h1 {
    max-width: 640px;
    font-size: clamp(2.85rem, 4.45vw, 4.25rem);
  }

  .page-hero--reach .page-hero__grid {
    min-height: 640px;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  }

  .page-hero--reach h1 {
    max-width: 720px;
    font-size: clamp(2.95rem, 4.55vw, 4.35rem);
  }

  .page-hero--preserve .page-hero__grid {
    min-height: 620px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-hero--preserve h1 {
    max-width: 680px;
    font-size: clamp(3rem, 4.75vw, 4.55rem);
  }

  .page-hero--bench .page-hero__grid {
    min-height: 540px;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  }

  .page-hero--bench .page-hero__copy {
    padding-block: 64px 70px;
  }

  .page-hero--bench h1 {
    max-width: 700px;
    font-size: clamp(3rem, 4.75vw, 4.55rem);
  }

  .page-hero--showroom .page-hero__grid {
    min-height: 610px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .page-hero--showroom h1 {
    max-width: 680px;
    font-size: clamp(3rem, 4.75vw, 4.55rem);
  }

  .page-hero--compare .page-hero__grid {
    min-height: 590px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-hero--compare h1 {
    max-width: 680px;
    font-size: clamp(2.95rem, 4.65vw, 4.4rem);
  }

  .page-hero--identify .page-hero__grid {
    min-height: 600px;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }

  .page-hero--identify h1 {
    max-width: 740px;
    font-size: clamp(2.85rem, 4.4vw, 4.15rem);
  }

  .page-hero--voices .page-hero__grid {
    min-height: 570px;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }

  .page-hero--voices h1 {
    max-width: 680px;
    font-size: clamp(3rem, 4.85vw, 4.6rem);
  }

  .page-hero--contact .page-hero__grid {
    min-height: 540px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .page-hero--contact .page-hero__copy {
    padding-block: 64px 70px;
  }

  .page-hero--contact h1 {
    max-width: 650px;
    font-size: clamp(3rem, 4.7vw, 4.45rem);
  }

  .page-hero--diagnose .page-hero__actions,
  .page-hero--bench .page-hero__actions,
  .page-hero--contact .page-hero__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .page-hero--plan .page-hero__kicker::before,
  .page-hero--reach .page-hero__kicker::before,
  .page-hero--preserve .page-hero__kicker::before,
  .page-hero--showroom .page-hero__kicker::before,
  .page-hero--compare .page-hero__kicker::before,
  .page-hero--identify .page-hero__kicker::before,
  .page-hero--voices .page-hero__kicker::before,
  .page-hero--contact .page-hero__kicker::before {
    width: 2px;
    height: 25px;
  }

  .page-hero--diagnose .page-hero__caption,
  .page-hero--bench .page-hero__caption,
  .page-hero--match .page-hero__caption {
    top: 28px;
    bottom: auto;
  }
}

/* Each service detail reuses its real content in a pattern tied to the service. */
@media (min-width: 901px) {
  .treatment--build-sequence .process-track {
    position: relative;
    border-top: 4px solid #9fc2e8;
  }

  .treatment--build-sequence .process-step {
    min-height: 330px;
    padding-top: 48px;
  }

  .treatment--build-sequence .process-step__number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 46px;
    border: 1px solid #789dc4;
    border-radius: var(--radius);
  }

  .treatment--route-comparison .comparison-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 24px;
  }

  .treatment--route-comparison .comparison-panel--accent {
    margin-top: 44px;
  }

  .treatment--hose-flow .decision-rail__item {
    position: relative;
    padding-right: 40px;
  }

  .treatment--hose-flow .decision-rail__item:not(:last-child)::after {
    position: absolute;
    right: 15px;
    color: var(--accent);
    content: "→";
    font-size: 1.15rem;
    font-weight: 800;
  }

  .treatment--diagnostic-board .card-grid--4,
  .treatment--qualification-ledger .card-grid--4,
  .treatment--need-matrix .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .treatment--diagnostic-board .info-card {
    min-height: 220px;
    border-left: 4px solid var(--accent);
  }

  .treatment--qualification-ledger .info-card {
    min-height: 210px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-content: center;
    column-gap: 22px;
  }

  .treatment--qualification-ledger .info-card__number {
    grid-row: span 2;
    margin: 3px 0 0;
    padding-top: 8px;
    border-top: 3px solid var(--accent);
  }

  .treatment--qualification-ledger .info-card h3 {
    margin-top: 0;
  }

  .treatment--before-after .project-mosaic .evidence-card,
  .treatment--before-after .project-mosaic .evidence-card--wide {
    grid-column: span 6;
  }

  .treatment--before-after .project-mosaic .evidence-card:last-child {
    grid-column: 3 / span 8;
  }

  .treatment--before-after .project-mosaic .evidence-card__media img,
  .treatment--before-after .project-mosaic .evidence-card--wide .evidence-card__media img {
    height: 390px;
  }

  .treatment--repair-ticket .process-track {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(0, 1fr);
  }

  .treatment--repair-ticket .process-step {
    min-height: 270px;
    border-top: 4px solid transparent;
  }

  .treatment--repair-ticket .process-step:nth-child(2) {
    border-top-color: #9fc2e8;
  }

  .treatment--repair-ticket .process-step__number {
    margin-bottom: 34px;
  }

  .treatment--need-matrix .info-card {
    min-height: 230px;
  }

  .treatment--need-matrix .info-card:nth-child(2),
  .treatment--need-matrix .info-card:nth-child(3) {
    background: #f4f6fa;
  }

  .treatment--matching-checklist .process-step {
    position: relative;
    min-height: 280px;
    padding-left: 78px;
  }

  .treatment--matching-checklist .process-step__number {
    position: absolute;
    top: 39px;
    left: 34px;
    margin: 0;
  }

  .treatment--matching-checklist .process-step::before {
    position: absolute;
    top: 82px;
    bottom: 38px;
    left: 40px;
    width: 1px;
    background: #789dc4;
    content: "";
  }
}

@media (max-width: 900px) {
  .page-hero--survey .page-hero__visual,
  .page-hero--diagnose .page-hero__visual,
  .page-hero--bench .page-hero__visual,
  .page-hero--contact .page-hero__visual {
    order: 0;
  }

  .page-hero--survey .page-hero__copy,
  .page-hero--diagnose .page-hero__copy,
  .page-hero--bench .page-hero__copy,
  .page-hero--contact .page-hero__copy {
    order: -1;
  }

  .page-hero--survey .page-hero__visual { height: 400px; min-height: 400px; }
  .page-hero--system .page-hero__visual { height: 500px; min-height: 500px; }
  .page-hero--plan .page-hero__visual { height: 430px; min-height: 430px; }
  .page-hero--route .page-hero__visual { height: 470px; min-height: 470px; }
  .page-hero--reach .page-hero__visual { height: 420px; min-height: 420px; }
  .page-hero--diagnose .page-hero__visual { height: 390px; min-height: 390px; }
  .page-hero--preserve .page-hero__visual { height: 480px; min-height: 480px; }
  .page-hero--facility .page-hero__visual { height: 420px; min-height: 420px; }
  .page-hero--bench .page-hero__visual { height: 380px; min-height: 380px; }
  .page-hero--showroom .page-hero__visual { height: 460px; min-height: 460px; }
  .page-hero--compare .page-hero__visual { height: 430px; min-height: 430px; }
  .page-hero--match .page-hero__visual { height: 410px; min-height: 410px; }
  .page-hero--identify .page-hero__visual { height: 450px; min-height: 450px; }
  .page-hero--portfolio .page-hero__visual { height: 380px; min-height: 380px; }
  .page-hero--voices .page-hero__visual { height: 440px; min-height: 440px; }
  .page-hero--story .page-hero__visual { height: 480px; min-height: 480px; }
  .page-hero--contact .page-hero__visual { height: 360px; min-height: 360px; }

  .treatment--hose-flow .decision-rail__item {
    position: relative;
  }

  .treatment--hose-flow .decision-rail__item::after {
    position: absolute;
    right: 18px;
    bottom: 12px;
    color: var(--accent);
    content: "↓";
    font-weight: 800;
  }

  .treatment--hose-flow .decision-rail__item:last-child::after {
    content: "";
  }
}

@media (max-width: 640px) {
  .page-hero--survey .page-hero__visual { height: 280px; min-height: 280px; }
  .page-hero--system .page-hero__visual { height: 340px; min-height: 340px; }
  .page-hero--plan .page-hero__visual { height: 300px; min-height: 300px; }
  .page-hero--route .page-hero__visual { height: 330px; min-height: 330px; }
  .page-hero--reach .page-hero__visual { height: 280px; min-height: 280px; }
  .page-hero--diagnose .page-hero__visual { height: 260px; min-height: 260px; }
  .page-hero--preserve .page-hero__visual { height: 350px; min-height: 350px; }
  .page-hero--facility .page-hero__visual { height: 300px; min-height: 300px; }
  .page-hero--bench .page-hero__visual { height: 260px; min-height: 260px; }
  .page-hero--showroom .page-hero__visual { height: 330px; min-height: 330px; }
  .page-hero--compare .page-hero__visual { height: 300px; min-height: 300px; }
  .page-hero--match .page-hero__visual { height: 280px; min-height: 280px; }
  .page-hero--identify .page-hero__visual { height: 320px; min-height: 320px; }
  .page-hero--portfolio .page-hero__visual { height: 260px; min-height: 260px; }
  .page-hero--voices .page-hero__visual { height: 300px; min-height: 300px; }
  .page-hero--story .page-hero__visual { height: 340px; min-height: 340px; }
  .page-hero--contact .page-hero__visual { height: 250px; min-height: 250px; }

  .page-hero--survey .page-hero__copy,
  .page-hero--diagnose .page-hero__copy,
  .page-hero--bench .page-hero__copy,
  .page-hero--contact .page-hero__copy {
    padding-block: 44px 48px;
  }

  .page-hero--plan h1,
  .page-hero--facility h1,
  .page-hero--identify h1,
  .page-hero--portfolio h1 {
    font-size: clamp(2.05rem, 8.25vw, 2.45rem);
  }

  .treatment--route-comparison .comparison-panel--accent {
    margin-top: 0;
  }

  .treatment--before-after .project-mosaic .evidence-card,
  .treatment--before-after .project-mosaic .evidence-card--wide,
  .treatment--before-after .project-mosaic .evidence-card:last-child {
    grid-column: auto;
  }
}

/* Iteration 16 hid the freshness stamp for a cleaner answer band. That silently
   broke the visible "Last updated" that BUILD-STANDARDS 4d requires alongside
   the schema dateModified: the date was in the DOM on every page and rendered
   on none of them. It is visible again, sized as metadata rather than as a
   line of copy so the band still reads cleanly. */
.page-freshness {
  display: block;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 64, 104, 0.14);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #6d7789;
}

@media (min-width: 901px) {
  .page--services .page-hero--survey .page-hero__grid {
    min-height: 560px;
  }

  .page--services .page-hero--survey .page-hero__visual {
    height: 560px;
    min-height: 560px;
  }

  .page--services .page-hero--survey .page-hero__copy {
    padding-block: 48px 52px;
  }

  .page--services .page-hero--survey h1 {
    max-width: 620px;
    margin-bottom: 18px;
    font-size: clamp(3rem, 4.4vw, 4.25rem);
  }

  .page--services .page-hero--survey .page-hero__lede {
    margin-bottom: 24px;
  }

  .page--services .page-hero--survey .page-hero__proof {
    margin-top: 22px;
    padding-top: 17px;
  }

  .page--shop .page-hero--showroom .page-hero__grid,
  .page--shop .page-hero--showroom .page-hero__visual,
  .page--about .page-hero--story .page-hero__grid,
  .page--about .page-hero--story .page-hero__visual,
  .page--reviews .page-hero--voices .page-hero__grid,
  .page--reviews .page-hero--voices .page-hero__visual {
    min-height: 580px;
  }

  .page--shop .page-hero--showroom .page-hero__copy,
  .page--about .page-hero--story .page-hero__copy,
  .page--reviews .page-hero--voices .page-hero__copy {
    padding-block: 62px 68px;
  }

  .page--shop .page-hero--showroom h1,
  .page--about .page-hero--story h1,
  .page--reviews .page-hero--voices h1 {
    font-size: clamp(3rem, 4.65vw, 4.55rem);
  }
}

.page--shop .page-hero--showroom .page-hero__visual img {
  object-position: 54% 50%;
}

.page--about .page-hero--story .page-hero__visual img {
  object-position: 50% 34%;
}

.about-values {
  background: #fff;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.about-values__grid article {
  min-height: 230px;
  padding: 32px;
  border: 1px solid #dce3ec;
  border-radius: var(--radius);
  background: #f8fafc;
}

.about-values__grid article > span {
  display: block;
  margin-bottom: 38px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.about-values__grid h3 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}

.about-values__grid p {
  color: var(--muted);
  line-height: 1.65;
}

.reviews-directory {
  background: #f4f6fa;
}

.reviews-directory .chapter-head {
  align-items: end;
}

.reviews-directory .google-review-grid {
  margin-top: 46px;
}

.review-source-links {
  justify-content: center;
  margin-top: 38px;
}

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

  .about-values__grid article {
    min-height: 0;
  }

  .about-values__grid article > span {
    margin-bottom: 24px;
  }

  .page--about .page-hero--story .page-hero__visual {
    height: 520px;
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .page--services .page-hero--survey .page-hero__visual,
  .page--shop .page-hero--showroom .page-hero__visual,
  .page--reviews .page-hero--voices .page-hero__visual {
    height: 300px;
    min-height: 300px;
  }

  .page--about .page-hero--story .page-hero__visual {
    height: 420px;
    min-height: 420px;
  }

  .review-source-links {
    align-items: stretch;
    flex-direction: column;
  }

  .review-source-links .button {
    width: 100%;
  }
}

/* Quiet utility pages remain restrained, but each has an intentional page key. */
.document--privacy .legal-wrap,
.document--terms .legal-wrap,
.document--accessibility .legal-wrap,
.document--directory .utility-wrap {
  border-top: 4px solid var(--accent);
}

.document--privacy .legal-wrap h1 { max-width: 760px; }
.document--terms .legal-wrap h1 { max-width: 650px; }
.document--accessibility .legal-wrap h1 { max-width: 820px; }
.document--directory .utility-wrap h1 { max-width: 700px; }

/* Premium Polish Wave 7: intentional partial rows and compact conversion choices. */
@media (min-width: 1021px) {
  section:not(.treatment--before-after) .project-mosaic:has(> :nth-child(3):last-child) > :last-child {
    grid-column: 5 / span 4;
  }

  .brand-grid:has(> :nth-child(7):last-child) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .brand-grid:has(> :nth-child(7):last-child) > * {
    grid-column: span 2;
  }

  .brand-grid:has(> :nth-child(7):last-child) > :nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 641px) and (max-width: 1020px) {
  .card-grid:has(> :nth-child(3):last-child) > :last-child,
  .rating-grid:has(> :nth-child(3):last-child) > :last-child,
  .quote-grid:has(> :nth-child(3):last-child) > :last-child {
    width: calc((100% - 16px) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .project-mosaic:has(> :nth-child(3):last-child) > :last-child {
    grid-column: 4 / span 6;
  }

  .brand-grid:has(> :nth-child(7):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .brand-grid:has(> :nth-child(7):last-child) > * {
    grid-column: span 2;
  }

  .brand-grid:has(> :nth-child(7):last-child) > :last-child {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 640px) {
  .interior-page .page-hero__actions {
    width: fit-content;
    max-width: 100%;
    display: grid;
    grid-template-columns:max-content;
    grid-template-columns: minmax(0, max-content);
    align-items: stretch;
  }

  .interior-page .page-hero__actions .button {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }
}

/* Iteration 17: clean, customer-facing project gallery. */
@media (min-width: 901px) {
  .page--our-work .page-hero--portfolio .page-hero__grid {
    min-height: 580px;
  }

  .page--our-work .page-hero--portfolio .page-hero__visual {
    height: 580px;
    min-height: 580px;
  }

  .page--our-work .page-hero--portfolio .page-hero__copy {
    padding-block: 62px 68px;
  }

  .page--our-work .page-hero--portfolio h1 {
    max-width: 600px;
    font-size: clamp(3rem, 4.65vw, 4.55rem);
  }
}

.page--our-work .work-story {
  border-top: 1px solid var(--line);
  background: #fff;
}

.page--our-work .work-story--soft {
  background: #f4f6fa;
}

.page--our-work .project-mosaic {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.page--our-work .project-mosaic .evidence-card,
.page--our-work .project-mosaic .evidence-card--wide,
.page--our-work section:not(.treatment--before-after) .project-mosaic > :last-child {
  grid-column: auto !important;
  border-color: #dce3ec;
  background: #fff;
  box-shadow: 0 12px 28px rgb(15 27 61 / 8%);
}

.page--our-work .evidence-card:hover {
  box-shadow: 0 16px 34px rgb(15 27 61 / 12%);
}

.page--our-work .evidence-card__media,
.page--our-work .evidence-card__media img,
.page--our-work .evidence-card--wide .evidence-card__media img {
  height: 330px;
  min-height: 330px;
}

.page--our-work .evidence-card__copy {
  min-height: 176px;
}

.page--our-work .evidence-card__copy span {
  color: var(--accent);
}

.page--our-work .evidence-card__copy h3 {
  color: var(--ink);
}

.page--our-work .evidence-card__copy p {
  color: var(--muted);
}

@media (max-width: 900px) {
  .page--our-work .project-mosaic {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page--our-work .evidence-card__media,
  .page--our-work .evidence-card__media img,
  .page--our-work .evidence-card--wide .evidence-card__media img {
    height: 270px;
    min-height: 270px;
  }

  .page--our-work .evidence-card__copy {
    min-height: 0;
    padding: 22px;
  }
}

.brand-help {
  border-block: 1px solid var(--line);
  background: #f4f6fa;
}

.brand-help .process-track {
  border-color: #d7e0ea;
}

.brand-help .process-step {
  border-color: #d7e0ea;
}

.brand-help .process-step__number {
  color: var(--accent);
}

.brand-help .process-step h3 {
  color: var(--ink);
}

.brand-help .process-step p {
  color: var(--muted);
}

/* Iteration 18: keep service proof light, calm, and product-forward. */
.content-section--ink {
  border-block: 1px solid var(--line);
  background: #f4f6fa;
  color: var(--ink);
}

.content-section--ink .chapter-label,
.content-section--ink .process-step__number,
.content-section--ink .evidence-card__copy span {
  color: var(--accent);
}

.content-section--ink .chapter-head > p,
.content-section--ink .process-step p,
.content-section--ink .evidence-card__copy p {
  color: var(--muted);
}

.content-section--ink .process-track,
.content-section--ink .process-step {
  border-color: #d7e0ea;
}

.content-section--ink .process-step h3,
.content-section--ink .evidence-card__copy h3 {
  color: var(--ink);
}

.content-section--ink .evidence-card {
  border-color: #dce3ec;
  background: #fff;
  box-shadow: 0 12px 28px rgb(15 27 61 / 8%);
}

.content-section--ink .evidence-card__media {
  background: #e8edf3;
}

.content-section--ink .evidence-card:hover {
  box-shadow: 0 16px 34px rgb(15 27 61 / 12%);
}

@media (min-width: 901px) {
  .page--central-vacuums .page-hero--system .page-hero__grid {
    min-height: 560px;
  }

  .page--central-vacuums .page-hero--system .page-hero__copy {
    padding-block: 52px 58px;
  }

  .page--central-vacuums .page-hero--system h1 {
    max-width: 700px;
    font-size: clamp(3rem, 4.6vw, 4.35rem);
  }
}

/* Iteration 19: one calm, viewport-balanced opening rhythm across interior pages. */
@media (min-width: 901px) {
  .interior-page {
    --interior-header-height: 87px;
    --interior-hero-divider: 1px;
    --decision-rail-height: 117px;
  }

  .interior-page main > .page-hero .page-hero__grid {
    min-height: max(560px, calc(100svh - var(--interior-header-height) - var(--interior-hero-divider) - var(--decision-rail-height)));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(42px, 4vw, 64px);
  }

  .interior-page main > .page-hero .page-hero__copy {
    padding-block: 42px 46px;
  }

  .interior-page main > .page-hero .page-hero__kicker {
    margin-bottom: 16px;
  }

  .interior-page main > .page-hero h1 {
    max-width: 680px;
    margin-bottom: 20px;
    font-size: clamp(2.8rem, 3.65vw, 3.6rem);
    line-height: 1.03;
  }

  .interior-page main > .page-hero .page-hero__lede {
    max-width: 620px;
    margin-bottom: 24px;
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.55;
  }

  .interior-page main > .page-hero .page-hero__actions {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }

  .interior-page main > .page-hero .page-hero__actions .button {
    padding-inline: 16px;
    font-size: 0.94rem;
  }

  .interior-page main > .page-hero .page-hero__proof {
    display: none;
  }

  .interior-page main > .page-hero .page-hero__visual {
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .interior-page main > .page-hero .page-hero__visual img {
    position: absolute;
    inset: 0;
  }

  .page--vacuum-repair main > .page-hero--bench .page-hero__caption {
    top: auto;
    bottom: 28px;
  }

  .interior-page main > .decision-rail .decision-rail__item {
    height: 116px;
    min-height: 116px;
    padding: 16px 20px;
  }

  .interior-page main > .decision-rail .decision-rail__item strong {
    font-size: 0.95rem;
  }

  .interior-page main > .decision-rail .decision-rail__item span {
    font-size: 0.94rem;
    line-height: 1.35;
  }
}

/* Iteration 21: product video as a clean, dedicated demonstration. */
.retractable-demo {
  border-block: 1px solid var(--line);
  background: #fff;
}

.retractable-demo__head {
  display: block;
  max-width: 760px;
  margin-bottom: clamp(30px, 4vw, 42px);
}

.retractable-demo__head > p {
  max-width: 690px;
  margin: 18px 0 0;
}

.retractable-demo__column {
  width: min(100%, 820px);
  margin-inline: auto;
}

.retractable-demo__figure {
  margin: 0;
}

.retractable-demo__player {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid #ccd6e2;
  border-radius: var(--radius);
  background: #08142f;
  box-shadow: 0 28px 72px rgb(15 27 61 / 15%);
}

.retractable-demo__player::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--accent);
  content: "";
  pointer-events: none;
}

.retractable-demo__player video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #08142f;
  object-fit: cover;
}

.retractable-demo__start {
  display: none;
}

.js-motion .retractable-demo__start {
  position: absolute;
  z-index: 3;
  inset: 4px 0 0;
  display: grid;
  width: 100%;
  height: calc(100% - 4px);
  padding: 24px;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, rgb(8 20 47 / 4%), rgb(8 20 47 / 28%));
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: background 180ms ease, opacity 180ms ease;
}

.js-motion .retractable-demo__start:hover {
  background: linear-gradient(180deg, rgb(8 20 47 / 9%), rgb(8 20 47 / 38%));
}

.js-motion .retractable-demo__start:focus-visible {
  outline: 4px solid #fff;
  outline-offset: -8px;
}

.retractable-demo__start-control {
  display: grid;
  place-items: center;
  gap: 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgb(8 20 47 / 65%);
}

.retractable-demo__start-icon {
  display: grid;
  width: clamp(72px, 9vw, 92px);
  height: clamp(72px, 9vw, 92px);
  place-items: center;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  background: rgb(255 255 255 / 94%);
  color: var(--accent);
  box-shadow: 0 16px 40px rgb(8 20 47 / 28%);
  transition: transform 180ms ease, background 180ms ease;
}

.retractable-demo__start:hover .retractable-demo__start-icon {
  transform: scale(1.06);
  background: #fff;
}

.retractable-demo__start-icon svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  stroke: none;
}

.retractable-demo__player.is-started .retractable-demo__start {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.retractable-demo__fullscreen {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 3px;
  background: rgb(8 20 47 / 78%);
  color: #fff;
  cursor: pointer;
  font: 750 0.82rem/1 var(--body);
  backdrop-filter: blur(10px);
}

.retractable-demo__fullscreen:hover {
  background: rgb(8 20 47 / 94%);
}

.retractable-demo__fullscreen:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.retractable-demo__fullscreen svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.retractable-demo__figure figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.retractable-demo__figure figcaption span:first-child {
  max-width: 790px;
}

.retractable-demo__figure figcaption strong {
  color: var(--ink);
}

.retractable-demo__figure figcaption span:last-child {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retractable-demo__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(30px, 4vw, 46px);
  border-block: 1px solid var(--line);
}

.retractable-demo__steps article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  min-height: 132px;
  padding: 28px 30px;
  border-right: 1px solid var(--line);
}

.retractable-demo__steps article:last-child {
  border-right: 0;
}

.retractable-demo__steps article > span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.retractable-demo__steps strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-family: var(--heading);
  font-size: 1.1rem;
}

.retractable-demo__steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Iteration 40: the owner photo is a small identity cue, never hero imagery. */
.about-owner-intro {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

/* The owner band is a two-column grid (photo | copy). The freshness stamp is a
   third child, so it landed under the 72px photo and wrapped one word per line.
   It belongs beneath the copy. */
.about-owner-intro .page-freshness {
  grid-column: 2;
}

.owner-thumbnail {
  width: 72px;
  height: 72px;
  max-width: 72px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 36%;
  box-shadow: 0 0 0 1px var(--line);
}

.answer-band__content.about-owner-intro p:not(.page-freshness) {
  max-width: 900px;
  margin: 0;
  color: #253451;
  font-family: var(--heading);
  font-size: clamp(1.06rem, 1.6vw, 1.3rem);
  font-weight: 620;
  line-height: 1.58;
}

@media (max-width: 520px) {
  .about-owner-intro {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
  }

  .owner-thumbnail {
    width: 64px;
    height: 64px;
    max-width: 64px;
  }
}

@media (max-width: 760px) {
  .retractable-demo__figure figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .retractable-demo__steps {
    grid-template-columns: 1fr;
  }

  .retractable-demo__steps article {
    min-height: 0;
    padding: 22px 4px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .retractable-demo__steps article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 520px) {
  .retractable-demo__fullscreen {
    top: 12px;
    right: 12px;
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .retractable-demo__fullscreen span {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .retractable-demo__start-control > span:last-child {
    font-size: 0.92rem;
  }
}

/* Iteration 41: image-led interior heroes with a soft, clouded handoff to copy. */
@media (min-width: 901px) {
  .page-hero:not(.page-hero--text)::after {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: min(76vw, 1120px);
    background:
      radial-gradient(ellipse 58% 48% at 20% 18%, rgb(238 242 247 / 98%) 0%, rgb(238 242 247 / 88%) 50%, transparent 100%),
      radial-gradient(ellipse 72% 60% at 24% 78%, rgb(238 242 247 / 100%) 0%, rgb(238 242 247 / 84%) 52%, transparent 100%),
      linear-gradient(90deg, #eef2f7 0%, #eef2f7 43%, rgb(238 242 247 / 96%) 58%, rgb(238 242 247 / 72%) 76%, transparent 100%);
    content: "";
    pointer-events: none;
  }

  .page-hero:not(.page-hero--text) .page-hero__grid {
    position: relative;
    display: block;
  }

  .page-hero:not(.page-hero--text) .page-hero__copy {
    position: relative;
    z-index: 3;
    width: min(62%, 780px);
    min-height: inherit;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-right: clamp(72px, 7vw, 112px);
    background-image: linear-gradient(90deg, #eef2f7 0%, rgb(238 242 247 / 99%) 72%, rgb(238 242 247 / 84%) 88%, transparent 100%);
  }

  .page-hero:not(.page-hero--text) .page-hero__visual {
    position: absolute;
    z-index: 0;
    inset: 0 calc((100vw - 100%) / -2) 0 28%;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 5%) 7%, rgb(0 0 0 / 34%) 19%, rgb(0 0 0 / 74%) 32%, #000 47%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 5%) 7%, rgb(0 0 0 / 34%) 19%, rgb(0 0 0 / 74%) 32%, #000 47%, #000 100%);
  }

  .page-hero:not(.page-hero--text) .page-hero__visual::before {
    z-index: 2;
    inset: 0 auto 0 0;
    width: 48%;
    height: auto;
    background:
      radial-gradient(ellipse 100% 72% at 0% 48%, rgb(238 242 247 / 80%) 0%, rgb(238 242 247 / 42%) 50%, transparent 100%),
      linear-gradient(90deg, rgb(238 242 247 / 72%) 0%, transparent 100%);
  }

  .page-hero:not(.page-hero--text) .page-hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .page-hero:not(.page-hero--text) .page-hero__caption {
    border-left: 0;
    border-radius: 12px;
    background: rgb(9 19 45 / 78%);
    box-shadow: 0 14px 34px rgb(9 19 45 / 18%);
    backdrop-filter: blur(16px);
  }
}

@media (max-width: 900px) {
  .page-hero:not(.page-hero--text) .page-hero__grid {
    gap: 0;
  }

  .page-hero:not(.page-hero--text) .page-hero__visual {
    order: -1;
    margin-bottom: -88px;
    border-radius: 0;
    box-shadow: none;
  }

  .page-hero:not(.page-hero--text) .page-hero__visual::before {
    z-index: 2;
    inset: auto 0 0;
    width: auto;
    height: 150px;
    background:
      radial-gradient(ellipse 78% 86% at 22% 100%, #eef2f7 0%, rgb(238 242 247 / 78%) 52%, transparent 100%),
      linear-gradient(0deg, #eef2f7 0%, rgb(238 242 247 / 82%) 40%, transparent 100%);
  }

  .page-hero:not(.page-hero--text) .page-hero__copy {
    position: relative;
    z-index: 3;
    order: 0;
    padding-top: 116px;
    background-image: none;
  }

  .page-hero:not(.page-hero--text) .page-hero__caption {
    top: 20px;
    bottom: auto;
    border-left: 0;
    border-radius: 10px;
    background: rgb(9 19 45 / 78%);
    box-shadow: 0 12px 28px rgb(9 19 45 / 16%);
    backdrop-filter: blur(14px);
  }
}

@media (max-width: 640px) {
  .page-hero:not(.page-hero--text) .page-hero__visual {
    margin-bottom: -72px;
  }

  .page-hero:not(.page-hero--text) .page-hero__visual::before {
    height: 124px;
  }

  .page-hero:not(.page-hero--text) .page-hero__copy {
    padding-top: 96px;
  }
}

/* Iteration 49: image-first internal heroes and balanced supporting compositions. */
html.js-motion .interior-page main > .page-hero[data-reveal],
html.js-motion .interior-page main > .page-hero[data-reveal].is-visible,
html.js-motion .interior-page main > .decision-rail[data-reveal],
html.js-motion .interior-page main > .decision-rail[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.bullet-checks li::before {
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1px;
  font-size: 0.72rem;
  line-height: 1;
  transform: translateY(-50%);
}

@media (min-width: 901px) {
  .page-hero:not(.page-hero--text)::after {
    width: min(49vw, 760px);
    background:
      radial-gradient(ellipse 88% 90% at 0% 48%, #eef2f7 0%, rgb(238 242 247 / 98%) 42%, rgb(238 242 247 / 73%) 64%, rgb(238 242 247 / 16%) 86%, transparent 100%),
      linear-gradient(90deg, #eef2f7 0%, rgb(238 242 247 / 98%) 42%, rgb(238 242 247 / 72%) 67%, rgb(238 242 247 / 18%) 88%, transparent 100%);
  }

  .page-hero:not(.page-hero--text) .page-hero__copy {
    width: min(46%, 600px);
    padding-right: clamp(18px, 2.3vw, 36px);
    background-image: none;
  }

  .interior-page main > .page-hero:not(.page-hero--text) h1 {
    max-width: 590px;
    font-size: clamp(2.65rem, 3.25vw, 3.4rem);
  }

  .page-hero:not(.page-hero--text) .page-hero__lede {
    max-width: 540px;
  }

  .page-hero:not(.page-hero--text) .page-hero__visual {
    inset: 0 calc((100vw - 100%) / -2) 0 10%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .page-hero:not(.page-hero--text) .page-hero__visual::before {
    width: 24%;
    background: linear-gradient(90deg, rgb(238 242 247 / 52%) 0%, rgb(238 242 247 / 18%) 55%, transparent 100%);
  }

  .page--central-vacuums .project-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page--central-vacuums .project-mosaic .evidence-card,
  .page--central-vacuums .project-mosaic .evidence-card--wide,
  .page--central-vacuums section:not(.treatment--before-after) .project-mosaic > :last-child {
    grid-column: auto;
    display: flex;
    flex-direction: column;
  }

  .page--central-vacuums .project-mosaic .evidence-card__media img,
  .page--central-vacuums .project-mosaic .evidence-card--wide .evidence-card__media img {
    height: 326px;
  }

  .page--central-vacuums .project-mosaic .evidence-card__copy {
    flex: 1;
  }

  .page--shop .split-proof--shop-fit {
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
    align-items: start;
    gap: clamp(42px, 5vw, 72px);
  }

  .page--shop .split-proof--shop-fit .split-proof__media {
    align-self: start;
    margin-top: 37px;
  }

  .page--shop .split-proof--shop-fit .split-proof__media img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .page--shop .split-proof--shop-fit .bullet-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    border-top: 0;
  }

  .page--shop .split-proof--shop-fit .bullet-checks li {
    min-height: 78px;
    padding: 14px 6px 14px 29px;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .page--services .visit-panel--field-service {
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
  }

  .page--services .visit-panel--field-service .visit-panel__media img {
    height: 100%;
    min-height: 0;
    object-position: 58% 50%;
  }
}

@media (max-width: 900px) {
  .page--shop .split-proof--shop-fit .split-proof__media {
    margin-top: 0;
  }

  .page--shop .split-proof--shop-fit .bullet-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .page--services .visit-panel--field-service .visit-panel__media img {
    object-position: 58% 50%;
  }
}

@media (max-width: 520px) {
  .page--shop .split-proof--shop-fit .bullet-checks {
    grid-template-columns: 1fr;
  }
}

/* Iteration 50: full-viewport interior heroes with the image carrying the page. */
.interior-page main > .page-hero:not(.page-hero--text) {
  min-height: 100svh;
  border-bottom: 0;
  background: #dfe6ee;
}

.interior-page main > .page-hero:not(.page-hero--text)::before {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 154px;
  background: linear-gradient(180deg, rgb(9 19 45 / 50%) 0%, rgb(9 19 45 / 20%) 48%, transparent 100%);
  content: "";
  pointer-events: none;
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__grid {
  position: relative;
  min-height: 100svh;
  display: block;
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual {
  position: absolute;
  z-index: 0;
  inset: 0 calc((100vw - 100%) / -2);
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual::before {
  display: none;
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__copy {
  position: relative;
  z-index: 3;
  width: min(55%, 700px);
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 136px clamp(18px, 2.2vw, 34px) 62px 0;
  background: none;
}

.interior-page main > .page-hero:not(.page-hero--text)::after {
  position: absolute;
  z-index: 1;
  inset: -16px auto -16px -18px;
  width: min(72vw, 1100px);
  background:
    radial-gradient(ellipse 86% 72% at 0% 50%, rgb(244 246 250 / 96%) 0%, rgb(244 246 250 / 90%) 34%, rgb(244 246 250 / 70%) 53%, rgb(244 246 250 / 38%) 70%, rgb(244 246 250 / 12%) 84%, transparent 100%),
    linear-gradient(90deg, rgb(244 246 250 / 78%) 0%, rgb(244 246 250 / 58%) 34%, rgb(244 246 250 / 25%) 56%, rgb(244 246 250 / 8%) 72%, transparent 88%);
  filter: blur(10px);
  content: "";
  pointer-events: none;
}

.interior-page main > .page-hero:not(.page-hero--text) h1 {
  max-width: 650px;
  font-size: clamp(3.65rem, 4.65vw, 4.65rem);
  line-height: 0.99;
}

.interior-page main > .page-hero:is(
  .page-hero--facility,
  .page-hero--route,
  .page-hero--plan,
  .page-hero--diagnose,
  .page-hero--preserve,
  .page-hero--reach,
  .page-hero--bench,
  .page-hero--compare,
  .page-hero--match,
  .page-hero--contact
) h1 {
  font-size: clamp(3.35rem, 4.15vw, 4.15rem);
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__lede {
  max-width: 510px;
}

.interior-page main > .page-hero:not(.page-hero--text) .page-hero__caption {
  right: clamp(24px, 3vw, 46px);
  bottom: clamp(24px, 3vw, 42px);
}

.page--shop .page-hero--showroom .page-hero__visual img {
  object-position: 54% 94% !important;
}

.page--services .page-hero--survey .page-hero__visual img,
.page--central-vacuums .page-hero--system .page-hero__visual img {
  object-position: 50% 52% !important;
}

@media (min-width: 901px) {
  .page--central-vacuums-new-construction .project-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page--central-vacuums-new-construction .project-mosaic .evidence-card,
  .page--central-vacuums-new-construction .project-mosaic .evidence-card--wide,
  .page--central-vacuums-new-construction section:not(.treatment--before-after) .project-mosaic > :last-child {
    grid-column: auto !important;
    display: flex;
    flex-direction: column;
  }

  .page--central-vacuums-new-construction .project-mosaic .evidence-card__media img,
  .page--central-vacuums-new-construction .project-mosaic .evidence-card--wide .evidence-card__media img {
    height: 320px;
  }

  .page--central-vacuums-new-construction .project-mosaic .evidence-card__copy {
    flex: 1;
  }
}

@media (max-width: 900px) {
  .interior-page main > .page-hero:not(.page-hero--text)::before {
    height: 122px;
    background: linear-gradient(180deg, rgb(9 19 45 / 60%) 0%, rgb(9 19 45 / 18%) 64%, transparent 100%);
  }

  .interior-page main > .page-hero:not(.page-hero--text)::after {
    z-index: 1;
    inset: 0;
    width: auto;
    background:
      linear-gradient(0deg, rgb(244 246 250 / 100%) 0%, rgb(244 246 250 / 98%) 37%, rgb(244 246 250 / 78%) 58%, rgb(244 246 250 / 16%) 77%, transparent 100%),
      linear-gradient(90deg, rgb(244 246 250 / 32%) 0%, transparent 70%);
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__grid {
    min-height: 100svh;
    display: block;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual {
    position: absolute;
    inset: 0 calc((100vw - 100%) / -2);
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__copy {
    position: relative;
    z-index: 3;
    width: min(100%, 640px);
    min-height: 100svh;
    justify-content: flex-end;
    padding: 116px 0 clamp(38px, 6vh, 60px);
    background: none;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__caption {
    display: none;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__lede {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__copy {
    padding: 102px 0 max(34px, env(safe-area-inset-bottom));
  }

  .interior-page main > .page-hero:not(.page-hero--text) h1 {
    font-size: clamp(2.35rem, 10.25vw, 3.15rem);
    line-height: 1.01;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__lede {
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__proof {
    margin-top: 20px;
    padding-top: 15px;
  }
}

.review-record {
  display: grid;
  /* Two columns since 2026-09-12: the third held the rating-distribution bars, which
     were removed when no source recorded the split. The split is sourced again now and
     is printed as a sentence in the score panel rather than rebuilt as bar graphics. */
  grid-template-columns: minmax(200px, 0.72fr) minmax(320px, 1.28fr);
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  margin-top: 44px;
  border: 1px solid #d7e0ea;
  border-radius: 12px;
  background: #d7e0ea;
  box-shadow: 0 14px 38px rgb(15 27 61 / 7%);
}

.review-record > * {
  padding: clamp(26px, 3vw, 38px);
  background: #fff;
}

.review-record__score {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.review-record__score > strong {
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(3.6rem, 6vw, 5.8rem);
  font-weight: 780;
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.review-record__score > span {
  margin-top: 12px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.review-record__score p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.review-topics {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.review-topics span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dce3ec;
  border-radius: 999px;
  background: #f7f9fc;
  color: #3b4860;
  font-size: 0.82rem;
  font-weight: 700;
}

.review-topics strong {
  min-width: 23px;
  min-height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6eef7;
  color: var(--accent);
  font-size: 0.72rem;
}

.review-wall-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  align-items: end;
  gap: 42px;
  margin: clamp(70px, 8vw, 104px) 0 36px;
}

.review-wall-heading h3 {
  margin-top: 10px;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
}

.review-wall-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.reviews-directory .google-review-grid--directory {
  margin-top: 0;
}

.google-review-grid--directory .google-review-card {
  min-height: 238px;
}

.google-review-card .review-summary {
  margin: 18px 0 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.08rem, 1.4vw, 1.28rem);
  font-weight: 620;
  line-height: 1.5;
  letter-spacing: -0.018em;
}

@media (max-width: 980px) {
  .review-record {
    grid-template-columns: minmax(170px, 0.65fr) 1.35fr;
  }
}

@media (max-width: 700px) {
  .review-record,
  .review-wall-heading {
    grid-template-columns: 1fr;
  }

  .review-record__score {
    align-items: center;
    text-align: center;
  }

  .review-topics {
    grid-column: auto;
  }

  .review-wall-heading {
    align-items: start;
    gap: 18px;
  }
}

/* Iteration 54: equal project rows, compact hero captions, and cleaner merchandising. */
.interior-page main > .page-hero:not(.page-hero--text) .page-hero__caption {
  top: auto;
  height: auto;
  min-height: 0;
}

.page--central-vacuums-repair-service .page-hero__visual img {
  object-position: 50% 70% !important;
}

.reviews-directory .google-review-grid--directory .google-review-card {
  min-width: 0;
  height: 100%;
}

.reviews-directory .google-review-grid--directory .google-review-card > .review-summary {
  grid-column: auto;
  width: auto;
  min-height: 0;
  display: block;
  grid-template-columns: none;
  align-items: initial;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page--shop .split-proof--shop-fit .split-proof__media {
  width: 100%;
  margin: 0;
}

@media (min-width: 901px) {
  .page--central-vacuums .project-mosaic,
  .page--central-vacuums-existing-home-retrofit .project-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
  }

  .page--central-vacuums .project-mosaic .evidence-card,
  .page--central-vacuums .project-mosaic .evidence-card--wide,
  .page--central-vacuums section:not(.treatment--before-after) .project-mosaic > :last-child,
  .page--central-vacuums-existing-home-retrofit .project-mosaic .evidence-card,
  .page--central-vacuums-existing-home-retrofit .project-mosaic .evidence-card--wide,
  .page--central-vacuums-existing-home-retrofit section:not(.treatment--before-after) .project-mosaic > :last-child {
    grid-column: auto !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .page--central-vacuums .project-mosaic .evidence-card__media img,
  .page--central-vacuums .project-mosaic .evidence-card--wide .evidence-card__media img,
  .page--central-vacuums-existing-home-retrofit .project-mosaic .evidence-card__media img,
  .page--central-vacuums-existing-home-retrofit .project-mosaic .evidence-card--wide .evidence-card__media img {
    height: 320px;
  }

  .page--central-vacuums .project-mosaic .evidence-card__copy,
  .page--central-vacuums-existing-home-retrofit .project-mosaic .evidence-card__copy {
    flex: 1;
  }

  .page--shop .split-proof--shop-fit {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .page--shop .split-proof--shop-fit .split-proof__media {
    width: 100%;
    margin-top: 0;
  }

  .page--our-work .page-hero--portfolio .page-hero__visual img {
    transform: translateX(12%);
  }
}

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

  .footer-brand,
  .footer-column {
    min-width: 0;
  }

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

/* ==========================================================================
   MOBILE REMEDIATION (Step 3 reopened, 2026-09-11): interior page heroes
   Desktop and tablet keep the approved full-bleed composition. Everything
   below is scoped to the phone breakpoint and sits last in the cascade.
   ========================================================================== */

/* Every interior hero was 100svh with the copy bottom-justified under a wash
   that ran to full opacity, so the photograph survived as a strip at the top
   and the H1 ran to five lines at 44px. The phone gets a deliberate stack
   instead: a photographic band with real presence, then the copy on the brand
   surface in ink type. Vertical rhythm is set here rather than inherited from
   a compressed desktop grid. */
@media (max-width: 720px) {
  .interior-page main > .page-hero:not(.page-hero--text) {
    min-height: 0;
    background: var(--bg);
  }

  /* The header stays an overlay on interior pages, so the top wash is kept
     to hold the logo and the menu control legible over the photograph. */
  .interior-page main > .page-hero:not(.page-hero--text)::before {
    z-index: 2;
    height: 118px;
    background: linear-gradient(180deg, rgb(9 19 45 / 52%) 0%, rgb(9 19 45 / 16%) 62%, transparent 100%);
  }

  /* The full-height radial veil existed to make ink type readable over the
     photograph. The copy is no longer over the photograph. */
  .interior-page main > .page-hero:not(.page-hero--text)::after {
    display: none;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__grid {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual {
    position: relative;
    z-index: 0;
    order: -1;
    inset: auto;
    width: auto;
    height: 462px;
    min-height: 0;
    /* Full-bleed out of the .shell gutters. */
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    border-radius: 0;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual img {
    position: static;
    width: 100%;
    height: 462px;
    object-fit: cover;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__copy {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 0;
    display: block;
    padding: 26px 0 34px;
    background: none;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__kicker {
    margin-bottom: 12px;
  }

  .interior-page main > .page-hero:not(.page-hero--text) h1 {
    max-width: 17ch;
    margin-bottom: 14px;
    font-size: clamp(1.95rem, 8vw, 2.25rem);
    line-height: 1.07;
    letter-spacing: -0.032em;
    text-wrap: balance;
    text-shadow: none;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__lede {
    max-width: 42ch;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.58;
  }

  /* BUILD-STANDARDS 7b-5: a stacked CTA group shares one width, sized to the
     widest label and capped at the container so a long label wraps instead of
     overflowing into clipped, unreachable space. */
  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    gap: 12px;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__actions .button {
    width: 100%;
    min-height: 54px;
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__proof {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  /* The caption was suppressed when the photograph was a backdrop. With a real
     band it earns its place again. */
  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 34px 18px 12px;
    background: linear-gradient(0deg, rgb(9 19 45 / 68%) 0%, transparent 100%);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-shadow: 0 1px 6px rgb(9 19 45 / 55%);
  }

  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__caption strong {
    display: block;
    font-size: 0.875rem;
  }

  /* The desktop caption is a 360px card floated over the image. Across a
     full-bleed band it has to run the full width or it reads as a stray box. */
  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__caption {
    width: auto;
    max-width: none;
  }

  /* Legal and utility pages have no .page-hero; they were still carrying the
     desktop H1 scale. */
  .legal-wrap h1,
  .utility-wrap h1 {
    font-size: clamp(1.95rem, 8vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  /* Text-only heroes (legal and utility pages) keep their own treatment but
     lose the compressed desktop rhythm. */
  .interior-page main > .page-hero--text h1 {
    font-size: clamp(1.95rem, 8vw, 2.25rem);
    line-height: 1.08;
    text-wrap: balance;
  }
}

/* A narrower phone gets a shorter band so the copy still reaches the fold. */
@media (max-width: 380px) {
  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual,
  .interior-page main > .page-hero:not(.page-hero--text) .page-hero__visual img {
    height: 404px;
  }
}

/* --- Mobile footer consolidation ------------------------------------------
   pages.css is the later stylesheet, so the footer grid, the column order and
   the legal row have to be set here to win the cascade. Measured before this
   pass at 430px: 1,278px tall, the four legal links alone taking 200px stacked
   one per row at full width, with the call path last. Every required link is
   retained; only the arrangement changes.                                    */
@media (max-width: 640px) {
  .footer-main {
    gap: 24px 20px;
    padding-bottom: 22px;
  }

  /* Operator layout, 2026-09-12: the brand block leads and is centred, the
     visit-and-call block follows and is centred too, then the two link
     columns share a row. Centring the first two blocks makes the head of the
     footer read as one unit instead of three left-hung fragments. */
  .footer-brand {
    order: -2;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid #26334e;
    text-align: center;
  }

  .footer-brand p {
    margin-inline: auto;
  }

  .footer-brand .social-links {
    justify-content: center;
  }

  .footer-column:last-child {
    order: -1;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #26334e;
    text-align: center;
  }

  /* The address, hours, phone and contact link are inline-flex at this width,
     so they need centring on their own axis as well as the text axis. */
  .footer-column:last-child > a,
  .footer-column:last-child > p {
    justify-content: center;
    text-align: center;
  }

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

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

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

  /* Was four full-width rows at 44px each. */
  .footer-legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 20px;
    justify-content: flex-start;
  }

  .footer-legal a {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-bottom {
    gap: 10px;
    padding-top: 16px;
  }
}

/* The video control is 42x42 against the 44px floor. pages.css sets that
   min-height at :3058, so the correction belongs in this file. */
@media (max-width: 900px) {
  .retractable-demo__fullscreen {
    min-width: 44px;
    min-height: 44px;
  }
}

/* A review grid holding a single substantiated quote is centred and width
   constrained rather than left-hung against two empty tracks
   (BUILD-STANDARDS 7b-2). Padding the set back to three would mean inventing
   reviews, which 7b-4's honesty guard forbids. */
.google-review-grid:has(> .google-review-card:only-child) {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

/* The two interior heroes that keep their licensed desktop photograph on the
   phone (their only portrait alternatives are AI-generated, and swapping would
   be the BUILD-STANDARDS 12c downgrade). Their crop is corrected here instead:
   centre-weighting a wide frame in a 430x462 band put the subject off-frame,
   most visibly on /shop, which showed an empty wall. */
@media (max-width: 720px) {
  /* These two images carry an inline object-position tuned for the desktop
     frame, and an inline style can only be beaten by !important. Scoped to the
     phone, so the desktop crop is untouched. */
  /* pages.css:3621 already pins this one with !important at a higher
     specificity for the desktop frame, so the phone rule has to match it. */
  .page--shop .page-hero--showroom .page-hero__visual img {
    object-position: 74% 58% !important;
  }

  .page--vacuum-repair .page-hero__visual img {
    object-position: 50% 40% !important;
  }
}

/* --- Contact form (BUILD-STANDARDS 9a/9b/9c/30) ---------------------------
   The site is phone-primary, so this is the one form on the site and it sits
   below the call, visit and hours board rather than above it. */
.contact-message__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(36px, 5vw, 72px);
}

.contact-message__intro h2 {
  margin-bottom: 18px;
  text-wrap: balance;
}

.contact-message__intro > p {
  max-width: 46ch;
  margin-bottom: 22px;
  color: var(--muted);
  line-height: 1.65;
}

.contact-message__intro a {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

/* The two 9c honeypots. Imperceivable and off-screen in DOCUMENT coordinates,
   which is what the pixel measures, and each input additionally carries
   tabindex="-1" so it reads as a deliberate trap rather than a field the
   visitor merely scrolled past. */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__field {
  display: grid;
  gap: 7px;
}

.contact-form__field label {
  color: var(--ink);
  font-family: var(--heading);
  font-size: 0.95rem;
  font-weight: 700;
}

.contact-form__optional {
  color: var(--muted);
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  /* 16px floor, or iOS zooms the page on focus. */
  font-size: 1rem;
  line-height: 1.5;
}

.contact-form textarea {
  min-height: 132px;
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent);
}

.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  border-color: #a8331f;
}

.contact-form__submit {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
}

.contact-form__status {
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.55;
}

.contact-form__status:empty {
  /* Collapsed but still in the accessibility tree, so screen readers announce
     every message the form writes here. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form.is-sent .contact-form__status {
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
}

.contact-form__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

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

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

/* BUILD-STANDARDS 12: the "LocalCraft Digital" anchor renders in the brand
   primary accent so the agency name stands out, not in the muted footer link
   colour. Every customer footer is a billboard. Contrast is checked against the
   footer's dark ground, so the accent is lightened for that surface only. */
.footer-bottom > p:last-child a {
  color: #7fb0ea;
  font-weight: 750;
}

.footer-bottom > p:last-child a:hover {
  color: #ffffff;
}

/* --- Print (audit Section L) ----------------------------------------------
   Someone printing a service page or the contact details wants the address,
   the phone number and the text. They do not want a fixed call bar stamped
   across the page, a nav they cannot click, or full-bleed photography using
   up the toner. */
@media print {
  .site-header,
  .nav-drawer,
  .mobile-call-bar,
  chat-widget,
  .skip-link,
  .page-hero__visual,
  .hero__backdrop,
  .closing,
  .faq-toggle,
  .contact-form__trap {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .page-hero,
  .hero,
  .content-section,
  .answer-band,
  .site-footer {
    min-height: 0;
    padding-block: 12pt;
    background: #fff !important;
    color: #000 !important;
  }

  .page-hero__copy,
  .hero__inner {
    padding: 0;
  }

  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 13pt; }

  h2,
  h3 {
    break-after: avoid;
  }

  /* A printed page has no clickable links, so spell the destination out. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    word-break: break-all;
  }

  main a[href^="tel:"]::after {
    content: "";
  }

  details {
    break-inside: avoid;
  }

  details:not([open]) > *:not(summary) {
    display: revert;
  }

  .site-footer {
    border-top: 1pt solid #000;
  }
}

/* BUILD-STANDARDS 4c outbound citation. Sits under the quick answer as
   supporting evidence, so it reads a step below the lead paragraph rather than
   competing with it. Substantiation for every figure is recorded in
   brand-kit/knowledge-docs/authoritative-sources.json. */
.answer-band__content .sourced-fact {
  max-width: 900px;
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.68;
}

.sourced-fact a {
  /* Inline citation links sit inside a sentence, which WCAG 2.2 SC 2.5.8 exempts
     from the 24x24 minimum ("The target is in a sentence or its size is
     otherwise constrained by the line-height of non-target text"). The exemption
     is not a reason to leave a 19px target on a phone, so vertical padding grows
     the hit box to fill the line box. Padding on an inline element does not
     change line layout, so nothing reflows. */
  padding-block: 0.32em;
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 64, 104, 0.4);
  transition: text-decoration-color 160ms ease;
}

.sourced-fact a:hover,
.sourced-fact a:focus-visible {
  text-decoration-color: var(--accent);
}

/* The citation links are inline in a sentence, so the 44px tap-target rule
   (BUILD-STANDARDS 7) is met with vertical padding on the line box rather than
   a min-height that would break the text flow. */
@media (max-width: 720px) {
  .answer-band__content .sourced-fact {
    font-size: 0.9688rem;
    line-height: 1.85;
  }

  /* Match the roomier mobile line box so the hit target grows with it. */
  .sourced-fact a {
    padding-block: 0.36em;
  }
}
/* Keep follow-up copy separate from interior grids and checklists. */
.interior-page .content-section > .shell > :is(.card-grid, .brand-grid, .recognition-grid, .process-track) + p,
.interior-page .content-section > .shell > p + .brand-grid {
  margin-top: 28px;
}
.interior-page .content-section > .shell > p + p,
.interior-page .split-proof__copy > .bullet-checks + p,
.interior-page .contact-message__intro > .bullet-checks + p {
  margin-top: 24px;
}
.interior-page .brand-card > p + .text-link,
.interior-page .comparison-panel > ul + .text-link {
  margin-top: 16px;
}

/* Evan’s equipment photos remain fully visible for recognition. */
#equipment-gallery { scroll-margin-top: 110px; }
.equipment-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.equipment-gallery__item { flex: 0 1 calc((100% - 56px) / 3); min-width: 0; margin: 0; }
.equipment-gallery__item a {
  display: block;
  background: #e5eaf0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.equipment-gallery__item a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
.equipment-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
.equipment-gallery__item figcaption {
  padding-top: 12px;
  font-size: 1rem;
  font-weight: 650;
}
.equipment-gallery__grid--details > .equipment-gallery__item { flex-basis: calc((100% - 84px) / 4); }
.equipment-gallery__grid--details img { aspect-ratio: 1; }
@media (max-width: 900px) {
  .equipment-gallery__grid { gap: 24px; }
  .equipment-gallery__grid > .equipment-gallery__item { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
  .equipment-gallery__grid { gap: 24px 16px; }
  .equipment-gallery__grid > .equipment-gallery__item { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 380px) {
  .equipment-gallery__grid > .equipment-gallery__item { flex-basis: 100%; }
}

/* October 8: readable equipment recognition and concise service sections. */
.recognition-grid, .installation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.recognition-card, .installation-grid figure { margin: 0; min-width: 0; }
.recognition-card { background: #fff; border: 1px solid #dce3ec; border-radius: 8px; overflow: hidden; }
.recognition-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #edf0f3; }
.recognition-card figcaption { padding: 18px 20px; }
.recognition-card h3 { margin: 0; font-size: 1.2rem; }
.recognition-card p { margin-top: 8px; }
.gallery-followup { margin-top: 28px; max-width: 72ch; }
.gallery-followup a, .chapter-head a, .contact-card p a, .contact-form__note a { text-decoration: underline; text-underline-offset: 3px; }
.installation-grid img { display: block; width: 100%; height: 340px; object-fit: contain; background: #e8edf2; }
.installation-grid figcaption { padding-top: 12px; font-weight: 650; }
.installation-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.installation-grid--pair img { height: 480px; }
.replacement-heading { margin: 48px 0 22px; }
.card-grid + .section-lede, .google-review-grid + .section-lede { margin-top: 1.5rem; }
.project-mosaic.project-mosaic--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-mosaic.project-mosaic--pair > * { grid-column: auto !important; }
#systems-we-service { scroll-margin-top: 110px; }
@media (max-width: 900px) {
  .recognition-grid, .installation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .installation-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .installation-grid--pair img { height: 360px; }
}
@media (max-width: 600px) {
  .project-mosaic.project-mosaic--pair { grid-template-columns: minmax(0, 1fr); }
  .recognition-grid, .installation-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .recognition-card img { max-height: 520px; }
  .installation-grid img, .installation-grid--pair img { height: auto; max-height: 520px; }
}