/* ===============================================================
   Section styles. Depends on tokens.css.
   Measured values from the reference layout; see design-spec.md.
   =============================================================== */

/* --- header: 82px, sticky, z-9999 -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  height: 82px;
  background: #FFFFFF;
}

/* Header, sections and footer all share the 1352 container so their content
   edges line up down the whole page. The 24px outer padding keeps them off
   the viewport edge once the screen drops below the container width. */
.site-header,
.site-topbar { padding-inline: 24px; }

.site-footer { padding: 80px 0; }
.site-footer > .container { padding-inline: 24px; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 82px;
}

.site-header__logo { flex: 0 0 auto; }

.site-header__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-header__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.site-header__nav { flex: 1 1 auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a,
.site-nav button {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--ink);
}

.site-nav a:hover { background: var(--wash); }

.site-nav > .menu-item-has-children { position: relative; }

.site-nav > .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  vertical-align: 2px;
}

.site-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 100;
}

.site-nav > .menu-item-has-children:hover > .sub-menu,
.site-nav > .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

.site-nav .sub-menu a {
  display: block;
  padding: 8px 16px;
  border-radius: 0;
  white-space: nowrap;
}

.site-nav .sub-menu a:hover {
  background: var(--wash);
}

.site-header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.site-header__burger { display: none; }

/* Label swaps for tight headers. */
.u-narrow { display: none; }
.u-wide   { display: inline; }

/* --- generic section shell ---------------------------------------
   Measured: outer section padding 80px 24px, inner container 1352px,
   head is a centred flex column with 16px gap, 40px before content.
   ------------------------------------------------------------------ */

.section { padding: 80px 24px; }

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 40px;
}

/* Eyebrow is a pill badge, not plain text: 30px tall, 6px 12px, radius 9999 */
.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* min-height, not height: a hard 30px clips the label the moment it
     wraps to a second line on a narrow screen. */
  min-height: 30px;
  height: auto;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}

.t-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-mid);
}

.section__head .t-h2,
.section__head .t-h2-sm,
.section__head .t-h3 { max-width: 960px; }

.section__sub { color: var(--muted); max-width: 792px; }

/* --- 0. hero ------------------------------------------------------
   Measured: 1077 tall. Top block padding 86px 64px 0, content column
   800px centred, single CTA 173x49, then a 1000px image row of three
   325x360 frames with 12px gaps and 40px of padding above.
   ------------------------------------------------------------------ */

/* The dark ground stops 180px short of the section bottom, so the lower part
   of each image frame sits on the page background instead. Painting the
   background on the section itself would grow with the content and keep the
   frames fully dark. */
.section--hero {
  background: transparent;
  color: var(--on-dark);
  padding: 0;
  text-align: center;
  position: relative;
  isolation: isolate;
}

.section--hero::before {
  content: "";
  position: absolute;
  inset: 0 0 180px 0;
  background: var(--ink-deep);
  z-index: -1;
}

.section--hero__top { padding: 86px 64px 0; }

.section--hero__col {
  width: 800px;
  max-width: 100%;
  margin-inline: auto;
}

/* Measured: mint fill with dark text and a bright green hairline, not a
   transparent outline. */
.section--hero__eyebrow {
  background: var(--mint);
  border: 1px solid var(--green-bright);
  color: var(--ink-deep);
}

.section--hero__eyebrow::before { background: var(--green-mid); }

.section--hero__title {
  margin-top: 40px;
  color: var(--on-dark);
  text-wrap: balance;
}

/* Italic accent on an emphasised word, matching the reference treatment:
   same family and weight, italic axis only. */
.section--hero__title em,
.section--hero__title i {
  font-style: italic;
  font-weight: 600;
  font-family: inherit;
}

.section--hero__sub {
  margin-top: 24px;
  color: var(--on-dark-dim);
  font-size: 18px;
  line-height: 28px;
}

/* inline feature row, 20px tall, 40px below the sub */
.section--hero__features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-dark-dim);
}

.section--hero__features li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section--hero__features li::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
  margin-top: -3px;
}

.section--hero__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* Image row: 1000px wide, three 325x360 frames, 12px gaps, 40px above.
   The row breaks out of the dark hero and overlaps the section beneath it,
   so each frame straddles the dark/light boundary. */
.section--hero__gallery {
  display: flex;
  justify-content: center;
  /* stretch (the default) overrides aspect-ratio by forcing every figure
     to the tallest line height. */
  align-items: flex-start;
  gap: 12px;
  width: 1000px;
  max-width: 100%;
  margin-inline: auto;
  padding-top: 40px;
  position: relative;
  z-index: 2;
}

.section--hero__gallery figure {
  /* Fluid rather than fixed 325px: between 1000 and 1050 three fixed
     frames plus gaps exceed the container and only survived because the
     body clips overflow. Aspect ratio holds the 325:360 proportion. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 325px;
  height: auto;
  aspect-ratio: 325 / 360;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* Empty frames read as a soft tint rather than a dead black rectangle. */
  background: linear-gradient(160deg, rgba(42, 232, 85, 0.16), rgba(255, 254, 253, 0.05));
  border: 1px solid rgba(255, 254, 253, 0.10);
}

.section--hero__gallery figure:has(img) { background: var(--ink-card); border-color: transparent; }

.section--hero__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 1. proof -----------------------------------------------------
   Head is left-aligned here, unlike the centred heads elsewhere.
   Cards carry a 383x331 photo above the quote.
   ------------------------------------------------------------------ */

.section--proof .section__head {
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
  margin-inline: 0;
}

.proof-card__photo {
  width: 100%;
  height: 331px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--wash);
}

.proof-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.proof-card {
  display: flex;
  flex-direction: column;
  min-height: 727px;
  padding: 40px 32px;
  border-radius: var(--r-lg);
}

.proof-card__quote { margin-bottom: auto; }
.card--peach .proof-card__quote { color: var(--rust); }
.card--lilac .proof-card__quote { color: var(--purple); }
.card--mint  .proof-card__quote { color: var(--green-deep); }

.proof-card__stats { display: grid; gap: 8px; margin-block: 32px; }
.card--peach .proof-card__stats { color: var(--rust); }
.card--lilac .proof-card__stats { color: var(--purple); }
.card--mint  .proof-card__stats { color: var(--green-deep); }

.proof-card__meta { display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.proof-card__meta strong { font-size: 16px; color: var(--ink); }

/* Placeholder state keeps the card's tone colour so the row reads as
   designed. Only the copy signals that it is unfilled. */
.proof-card--placeholder { border: 0; }

.proof-card--placeholder .proof-card__photo-ph {
  width: 100%;
  height: 331px;
  border-radius: var(--r-sm);
  margin-bottom: 24px;
  background: rgba(17, 20, 18, 0.07);
}

.proof-card__ph-label {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 16px;
}

.card--peach .proof-card__quote--ph { color: var(--rust); opacity: .72; }
.card--lilac .proof-card__quote--ph { color: var(--purple); opacity: .72; }
.card--mint  .proof-card__quote--ph { color: var(--green-deep); opacity: .72; }

.proof-card__stats--ph { display: grid; gap: 10px; margin-block: 28px; }
.proof-card__stats--ph span {
  display: block;
  height: 14px;
  width: 62%;
  border-radius: 999px;
  background: rgba(17, 20, 18, 0.12);
}
.proof-card__stats--ph span:nth-child(2) { width: 48%; }
.proof-card__stats--ph span:nth-child(3) { width: 54%; }

.proof-card__meta--ph { font-size: 13px; opacity: .6; font-style: italic; }

/* --- 1b. review scroller -------------------------------------------
   Media box is 380x285 (4:3). Cards snap; scrolling is native so touch,
   trackpad and keyboard all work without JavaScript.
   ------------------------------------------------------------------ */

.section__head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  width: 100%;
  gap: 24px;
}

.rv-nav { display: flex; gap: 8px; flex: 0 0 auto; }

.rv-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  transition: background-color .18s ease, opacity .18s ease;
}

.rv-nav__btn:hover:not(:disabled) { background: var(--wash); }
.rv-nav__btn:disabled { opacity: .35; cursor: default; }

.rv-scroller {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 8px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.rv-scroller::-webkit-scrollbar { height: 6px; }
.rv-scroller::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

.rv-scroller:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 4px; }

.rv-card {
  flex: 0 0 380px;
  width: 380px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* The 380x285 media box. */
.rv-card__media {
  width: 100%;
  aspect-ratio: 380 / 285;
  background: var(--wash);
  flex: 0 0 auto;
}

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

/* Video is contained, not cropped, so nothing important is cut off. */
.rv-card__media--video { background: var(--ink-card-2); }
.rv-card__media--video video { width: 100%; height: 100%; object-fit: contain; display: block; }

.rv-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }

.rv-card__rating { display: flex; align-items: center; gap: 8px; }
.rv-card__score { font-size: 14px; font-weight: 600; color: var(--muted); }

.stars { display: inline-flex; gap: 2px; color: var(--green-mid); line-height: 0; }
.stars__s { display: block; }
.stars__s--none { color: var(--line-2); }

.rv-card__quote { font-size: 15px; line-height: 24px; color: var(--ink); flex: 1 1 auto; }

.rv-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.rv-card__meta strong { font-size: 14px; color: var(--ink); }

.rv-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--mint);
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 600;
}

.rv-strip__cta { margin-top: 32px; }

/* --- 2. built for -------------------------------------------------- */

/* This section is dark: near-black ground with dark cards on it. */
.section--builtfor {
  background: var(--ink);
  color: var(--on-dark);
}

.section--builtfor .t-eyebrow {
  background: transparent;
  border-color: rgba(255, 254, 253, 0.24);
  color: var(--on-dark);
}

.section--builtfor .section__head .t-h2 { color: var(--on-dark); }
.section--builtfor .section__sub { color: var(--on-dark-dim); }

/* Measured: single centred CTA 40px below the grid. */
.section--builtfor__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.builtfor-card {
  background: var(--ink-card);
  border: 1px solid rgba(255, 254, 253, 0.10);
  border-radius: var(--r-md);
  padding: 32px;
}

.builtfor-card__num {
  display: block;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.64px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 20px;
}

.builtfor-card h3 { margin-bottom: 12px; color: var(--on-dark); }
.builtfor-card p { color: var(--on-dark-dim); }

/* --- 3. services ---------------------------------------------------- */

.section--services { background: var(--paper); }

/* Measured: wash ground, no border, 32px padding, 14px body copy. */
.service-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  padding: 32px;
  background: var(--wash);
  border: 0;
}

/* Measured: 80x80 icon at the top of each card. */
.service-card__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  flex: 0 0 auto;
}

.service-card__icon svg { width: 100%; height: 100%; display: block; }

.service-card__num {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: 8px;
}

.service-card h3 { margin-bottom: 12px; }

.service-card__body {
  color: var(--muted);
  font-size: 14px;
  line-height: 24px;
}

.service-card__body p + p { margin-top: 12px; }

/* --- 4. pricing ----------------------------------------------------- */

/* Measured: two 660px columns, 32px gap, 467px tall. */
.pricing-panel {
  display: grid;
  grid-template-columns: 660px 660px;
  gap: var(--gap);
  align-items: stretch;
  min-height: 467px;
}

/* Dark card with a green header band, mirroring the reference. */
.pricing-card {
  background: var(--ink-card-2);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
}

.pricing-card__band {
  background: var(--green);
  color: var(--ink);
  padding: 12px 32px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
}

.pricing-card__inner {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pricing-card__amount {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  font-weight: 600;
  color: var(--on-dark);
}

.pricing-card__amount strong { font-size: 32px; letter-spacing: -0.8px; }
.pricing-card__amount--tbc { font-size: 28px; letter-spacing: -0.7px; }
.pricing-card__period { font-size: 18px; font-weight: 500; color: var(--on-dark-dim); }

.pricing-card__note   { margin-top: 12px; font-size: 14px; color: var(--mint-2); }
.pricing-card__saving { margin-top: 16px; font-size: 15px; line-height: 24px; color: var(--on-dark-dim); }
.pricing-card__terms  { margin-top: 20px; color: var(--on-dark-dim); }

.pricing-card__includes { display: grid; gap: 14px; margin-top: 24px; }

.pricing-card__includes li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-dark);
}

.pricing-card__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.pricing-card .btn { margin-top: 28px; align-self: flex-start; }

/* Right column: image slot, tinted until one is set. */
.pricing-panel__aside {
  background: var(--wash);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 467px;
}

.pricing-panel__aside img { width: 100%; height: 100%; object-fit: cover; }

/* --- 5. contact ------------------------------------------------------
   Measured: 832px panel + 480px form card, 40px gap, 682px tall.
   Form card #EEF3EF, radius 20, padding 32, internal gap 24.
   --------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 832px 480px;
  gap: 40px;
  align-items: start;
}

.contact-grid__copy {
  background: var(--green-bright);
  border-radius: var(--r-md);
  padding: 48px;
  min-height: 682px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-grid__copy h3 { margin-block: 20px 16px; }

/* Scoped to direct children only — the form rows are <p> elements and were
   inheriting this max-width, which made them 560 while the name row ran 736. */
.contact-grid__copy > p { color: var(--ink); max-width: 560px; }

/* Light mint, not grey — matches the reference side card. */
.contact-grid__form {
  background: var(--mint);
  border: 0;
  border-radius: var(--r-lg);
  padding: 32px;
}

.audit-form__row,
.review-form__row { display: grid; gap: 6px; margin-bottom: 16px; }

/* Reference splits first/last name into two columns. */
.audit-form__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.audit-form__split .audit-form__row { margin-bottom: 16px; }

/* Fields are 50px tall and placeholder-driven, no visible labels. */
.audit-form input,
.audit-form select { min-height: 50px; }

.audit-form ::placeholder { color: var(--muted-2); opacity: 1; }

.audit-form button[type="submit"] { min-width: 259px; min-height: 50px; }

.audit-form label,
.review-form label { font-size: 14px; font-weight: 500; color: var(--ink); }

.audit-form input,
.audit-form textarea,
.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea,
.site-footer__signup input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink);
  background: #FFFFFF;
}

.audit-form input:focus,
.audit-form textarea:focus,
.review-form input:focus,
.review-form textarea:focus {
  outline: 2px solid var(--green-mid);
  outline-offset: 1px;
}

.audit-form__hp,
.review-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.review-form__hint {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted-2);
}

.audit-form__notice,
.review-form__notice {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  font-size: 15px;
}

.audit-form__notice,
.review-form__notice--ok { background: var(--mint); color: var(--green-deep); }
.review-form__notice--err { background: #FFEDD4; color: var(--rust); }

/* --- 6. faq ----------------------------------------------------------- */

.section--faq { background: var(--paper); }

/* Measured: two columns, 80px gap. Heading and lightbulb sit left,
   the accordion sits right. */
.section--faq .container {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
  align-items: start;
}

.section--faq .section__head {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 0;
}

/* Heading column tracks the scroll while the accordion moves past it.
   Offset clears the 82px sticky header. Desktop only — on narrow screens
   the column stacks above the list and sticky would pin it over content. */
@media (min-width: 1001px) {
  .section--faq .section__head {
    position: sticky;
    top: 106px;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--faq .section__head { position: static; }
}

.faq-mark { width: 139px; height: 139px; margin-top: 24px; }
.faq-mark svg { width: 100%; height: 100%; display: block; }

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

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

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  cursor: pointer;
  list-style: none;
}

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

.faq-item__h {
  font-size: 20px;
  line-height: 31.1111px;
  font-weight: 500;
  color: var(--ink);
}

.faq-item__icon {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: opacity .18s ease;
}

.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after  { width: 2px; height: 14px; }

.faq-item[open] .faq-item__icon::after { opacity: 0; }

.faq-item__a { padding-bottom: 28px; max-width: 760px; color: var(--muted); }
.faq-item__a p + p { margin-top: 14px; }

/* --- 7. closing cta ---------------------------------------------------- */

/* Measured: 501px tall, bg #FFFEFD, padding 80px 64px, centred column.
   Review pill 464x32 radius 9999, H2 800px wide, two buttons below. */

.section--cta {
  background: var(--paper);
  padding: 80px 64px;
  text-align: center;
  position: relative;
  isolation: isolate;
}

/* Measured: 948x439 starburst sitting behind the block. */
.cta-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 948px;
  height: 439px;
  max-width: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Measured: 464x32 pill, 1px #D8E3DA border, padding 0 12px,
   segments split by 1px vertical rules 30px tall. */
.cta-reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--ink);
}

.cta-reviews__seg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.cta-reviews__rule {
  width: 1px;
  height: 30px;
  background: var(--line-2);
  flex: 0 0 auto;
}

.cta-reviews__stars { color: var(--green-mid); letter-spacing: 2px; }
.cta-reviews a { text-decoration: underline; text-underline-offset: 3px; }

.cta-panel { margin-top: 24px; }

.cta-panel .t-h2 { max-width: 800px; margin-inline: auto; }

.cta-panel p { max-width: 620px; margin: 24px auto 0; color: var(--muted); }

.cta-panel__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* --- review page --------------------------------------------------------- */

.reviews-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 64px;
  align-items: start;
}

.reviews-layout__form .review-form { margin-top: 24px; }
.reviews-layout__list .review-list { display: grid; gap: 20px; margin-top: 24px; }

.review-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
}

.review-summary__stars { color: var(--green-mid); letter-spacing: 2px; font-size: 20px; }

.review-form__rating { border: 0; padding: 0; margin-bottom: 20px; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.review-form__rating legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.review-form__rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.review-form__rating label { font-size: 28px; line-height: 1; color: var(--line-2); cursor: pointer; }
.review-form__rating input:checked ~ label,
.review-form__rating label:hover,
.review-form__rating label:hover ~ label { color: var(--green-mid); }
.review-form__rating input:focus-visible + label { outline: 2px solid var(--green-mid); }

.review-list__stars { color: var(--green-mid); letter-spacing: 2px; margin-bottom: 12px; }
.review-list__body { color: var(--ink); }
.review-list__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--muted); }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: 80px;
}

/* Measured against the reference footer, property by property. */
.site-footer__nl-eyebrow {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--green-deep);
}

.site-footer__newsletter h2 { color: var(--ink-deep); }

.site-footer__col h3 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--mint-2);
}

.site-footer__col ul a {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--on-dark);
}

/* Measured: 1216 wide, 352 tall, radius 24.
   Copy, form and small print stack in column 1; the visual fills column 2. */
.site-footer__newsletter {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 400px;
  grid-template-rows: auto auto auto;
  gap: 14px 32px;
  align-items: center;
  min-height: 332px;
  max-width: 1216px;
  margin-inline: auto;
  padding: 40px 56px;
  border-radius: var(--r-xl);
  background: var(--green-bright);
  color: var(--ink);
}

/* Icon column, copy column, then the card stack. */
.site-footer__nl-mark {
  grid-column: 1;
  grid-row: 1;
  width: 80px;
  height: 80px;
  align-self: start;
}

.site-footer__nl-mark svg { width: 100%; height: 100%; display: block; }

.site-footer__newsletter-copy { grid-column: 2; grid-row: 1; align-self: end; }
.site-footer__signup          { grid-column: 2; grid-row: 2; }
.site-footer__nl-print        { grid-column: 2; grid-row: 3; align-self: start; }

/* Breaks out of the panel: past the right edge and below the bottom,
   the way the reference sets its product cards. */
/* Card stack breaks the panel's top edge, as the reference does. */
.site-footer__nl-visual {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: start;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: 400px;
  height: 300px;
  margin-top: -72px;
  margin-right: -24px;
}

.nl-card {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(17, 20, 18, .18);
}

.nl-card--front { left: 0;   top: 0;  width: 292px; z-index: 2; }
.nl-card--back  { left: 176px; top: 34px; width: 216px; z-index: 1; }

.nl-card__band {
  background: var(--amber);
  padding: 14px 16px 18px;
  display: grid;
  gap: 10px;
}

.nl-card__band--sky { background: var(--sky); height: 92px; }

.nl-card__kicker { font-size: 11px; font-weight: 600; color: var(--ink); }
.nl-card__band svg { width: 64px; height: 40px; margin-inline: auto; }

.nl-card__body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.nl-card__body strong { font-size: 12px; line-height: 16px; color: var(--ink); }
.nl-card__body p { font-size: 10px; line-height: 14px; color: var(--muted); margin: 0; }

.nl-card__btn {
  justify-self: start;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
}

.nl-card__line { display: block; height: 7px; border-radius: 4px; background: rgba(17,20,18,.16); }
.nl-card__line--lg { width: 88%; height: 9px; }
.nl-card__line--sm { width: 54%; }


/* Class alone loses to `.site-footer__newsletter p`, so qualify it. */
.site-footer__newsletter p.site-footer__nl-eyebrow {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: normal;
  font-weight: 500;
  text-transform: none;
  color: var(--green-deep);
  margin-top: 0;
  margin-bottom: 8px;
}

.site-footer__newsletter h2 { color: var(--ink-deep); }
.site-footer__newsletter p { margin-top: 12px; color: var(--ink); }

/* align-content defaults to stretch on a wrapped flex container, which
   inflates each line and blew the inputs up to 160px tall. Pin it. */
.site-footer__signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 12px;
}

.site-footer__signup input {
  flex: 1 1 160px;
  min-width: 0;
  height: 50px;
  flex-shrink: 1;
}

.site-footer__nl-print { margin-top: 14px; font-size: 12px; color: rgba(17, 20, 18, .7); }
.site-footer__nl-print a { text-decoration: underline; text-underline-offset: 2px; }

/* Right-hand visual in the newsletter panel */
.site-footer__nl-visual { display: flex; align-items: center; justify-content: center; }
.site-footer__nl-visual svg { width: 100%; max-width: 340px; height: auto; }

/* Faint brand mark behind the link columns, as the reference does */
.site-footer__cols { position: relative; }

/* A solid glyph still reads as a stray shape even at 4%. Off until there is
   a mark that degrades well at low opacity. */
.site-footer__watermark { display: none; }

.site-footer__watermark svg { width: 100%; height: 100%; display: block; }

.site-footer__col { position: relative; z-index: 1; }

/* Measured: a 245px brand column, then link columns of 243px in a 3-wide
   grid that wraps to a second row. Gap 40px. Not seven columns in one row. */
/* Link block is its own panel: #171C18, radius 24, padding 40, width 1216. */
.site-footer__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 286px 1fr;
  max-width: 1216px;
  margin: 40px auto 0;
  padding: 40px;
  border-radius: var(--r-xl);
  background: var(--ink-card-2);
}

/* First column: 245 content + 40 gutter, closed by a 1px rule. */
.site-footer__colgroup {
  display: grid;
  gap: 40px;
  align-content: start;
  width: 286px;
  padding-right: 40px;
  border-right: 1px solid var(--muted);
}

.site-footer__colgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-content: start;
  padding-left: 40px;
}

.site-footer__bar { max-width: 1216px; margin-inline: auto; }

/* Oversized mark, low opacity, clipped by the panel. */
.site-footer__watermark {
  position: absolute;
  right: -40px;
  bottom: -120px;
  width: 540px;
  height: 493px;
  color: var(--on-dark);
  opacity: .04;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.site-footer__panel > *:not(.site-footer__watermark) { position: relative; z-index: 1; }

.site-footer__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; }
.site-footer__col--brand p { margin-top: 16px; color: var(--on-dark-dim); max-width: 280px; }

/* Column headings reuse .t-eyebrow for its type scale only — strip the pill
   chrome, otherwise they render as empty white badges on the dark ground. */
.site-footer__col h3 {
  display: block;
  height: auto;
  /* .t-eyebrow carries min-height:30px for the pill form; these reuse only
     its type scale, so zero it or the headings grow to 30px. */
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--mint-2);
  margin-bottom: 20px;
}

.site-footer__col h3::before { content: none; }
.site-footer__col ul { display: grid; gap: 12px; }
.site-footer__col a { color: var(--on-dark); font-size: 14px; font-weight: 500; }
.site-footer__col a:hover { color: var(--green); }
.site-footer__col address { font-style: normal; color: var(--on-dark-dim); font-size: 15px; }

/* Measured: flex, align centre, 40px gap, 48px tall, no top rule.
   Brand, then a legal block with links above the copyright, then socials. */
.site-footer__bar {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
  border-top: 0;
  font-size: 12px;
  color: var(--on-dark);
}

.site-footer__legal { display: grid; gap: 6px; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__legal a { font-size: 12px; color: var(--on-dark); }
.site-footer__legal p { font-size: 12px; color: var(--on-dark); opacity: .75; }

.site-footer__bar a:hover { color: var(--green); }

/* Needs its own display:flex — it lost the old `.site-footer__bar ul` rule
   and was stacking the four icons vertically. */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}


/* Plain glyphs, no ring — the reference has no circular chrome. */
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  color: var(--on-dark);
}

.site-footer__social a:hover { color: var(--green); background: none; }

/* The 64px green band I measured belonged to a different element, not the
   footer close. Their footer ends on the dark ground. */
.site-footer__accent { display: none; }

/* Violet accent, matching the reference. Primary green would be
   green-on-green against the panel. */
.site-footer__signup .btn--primary {
  background: var(--violet);
  color: var(--ink);
  flex: 0 0 auto;
}

.site-footer__signup .btn--primary:hover { background: #9560F5; }

/* Bottom bar carries the wordmark alongside the legal links. */
.site-footer__bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--on-dark);
  margin-right: auto;
}

/* --- announcement bar above the header ---------------------------- */

.site-topbar {
  background: var(--ink-deep);
  color: var(--on-dark);
  font-size: 14px;
  line-height: 20px;
}

.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 24px;
  text-align: center;
  flex-wrap: wrap;
}

.site-topbar__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.6px;
  font-weight: 700;
  text-transform: uppercase;
}

.site-topbar__text { color: var(--on-dark-dim); }

.site-topbar__link {
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- pieces added after the full-page inventory ------------------- */

/* Deliverables list inside each service card */
.service-card__list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.service-card__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 24px;
  color: var(--ink);
}

.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--green-mid);
  border-bottom: 2px solid var(--green-mid);
  transform: rotate(-45deg);
}

/* Per-card CTA on the testimonial cards */
.proof-card__cta { margin-top: 24px; align-self: flex-start; }

/* Discovery form sits on the green panel, so inputs need a white ground */
.contact-grid__copy .audit-form { margin-top: 28px; }

.contact-grid__copy .audit-form label { color: var(--ink); }

/* The primary green would sit green-on-green here. Dark ink gives the
   submit real separation from the panel. */
.contact-grid__copy .audit-form .btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.contact-grid__copy .audit-form .btn--primary:hover { background: var(--ink-card); }

.contact-grid__copy .audit-form input,
.contact-grid__copy .audit-form select,
.contact-grid__copy .audit-form textarea { border-color: transparent; }

.audit-form select,
.review-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink);
  background: #FFFFFF;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Right-hand card labels in the contact section */
.contact-grid__label {
  margin-top: 24px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted-2);
}

.contact-grid__form h3 { margin-bottom: 12px; }
.contact-grid__form p { color: var(--muted); }

/* ===============================================================
   Responsive. The reference is a fixed 1440 design; these are our
   own breakpoints so the page holds up below that.
   =============================================================== */

/* The measured grids are fixed-px at 1440. Below the content width they
   have to become fluid or they overflow. */
@media (max-width: 1400px) {
  .pricing-panel { grid-template-columns: 1fr 1fr; }
  .contact-grid  { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .section--hero__top { padding-inline: 24px; }
  .section--faq .container { grid-template-columns: 320px 1fr; gap: 48px; }
}

@media (max-width: 1000px) {
  .section--faq .container { grid-template-columns: 1fr; gap: 40px; }
  .faq-mark { display: none; }
  /* No explicit width/height here — both overrode flex sizing and
     aspect-ratio, pinning every frame to 240px tall. */
  .section--hero__gallery { width: 100%; }
  .section--hero::before { inset: 0 0 110px 0; }
}

@media (max-width: 1200px) {
  .t-hero { font-size: 56px; line-height: 66px; letter-spacing: -2px; }
  .t-h2   { font-size: 40px; line-height: 48px; letter-spacing: -1.2px; }
  .section--hero__col { width: 100%; }
  .reviews-layout { grid-template-columns: 1fr; gap: 48px; }
  .site-footer__cols { grid-template-columns: 220px repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .section { padding: 64px 24px; }
  /* Equal specificity to `.section`, so this must be restated after it or
     the hero picks up the section padding on top of __top's and double-guttters. */
  .section--hero { padding: 0; }
  .section--hero__top { padding: 64px 24px 72px; }
  .section--cta { padding: 64px 24px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .proof-card { min-height: 0; }
  .pricing-panel { grid-template-columns: 1fr; min-height: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-grid__copy { min-height: 0; padding: 32px; }
  .section--faq .section__head { margin-bottom: 48px; }
  /* Announcement bar is desktop only — the reference drops it on mobile. */
  .site-topbar { display: none; }

  .site-header__nav { display: none; }

  /* Keep the primary CTA beside the burger, as the reference does.
     Logo + full-length CTA + burger + 32px gaps overflowed a 342px
     header, so the gap tightens and the label switches to its short form. */
  .site-header__inner { gap: 12px; }
  .site-header__name  { font-size: 16px; }

  .u-wide   { display: none; }
  .u-narrow { display: inline; }

  .site-header__cta { display: flex; margin-left: auto; gap: 8px; }
  .site-header__cta .btn--ghost { display: none; }
  .site-header__cta .btn--primary {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  .site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: 4px;
    width: 44px;
    height: 44px;
  }
  .site-header__burger span { display: block; height: 2px; width: 22px; background: var(--ink); }
  .site-footer__newsletter { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__col--brand { grid-row: auto; grid-column: 1 / -1; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .t-hero { font-size: 40px; line-height: 48px; letter-spacing: -1.4px; }
  .t-h2, .t-h3 { font-size: 32px; line-height: 40px; letter-spacing: -1px; }
  .section--hero__actions, .cta-panel__actions { flex-direction: column; }
  .site-footer__signup { flex-direction: column; }
  .site-footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===============================================================
   Responsive pass 2 — every fixed-px layout gets a fallback.
   Ordered widest to narrowest; later rules win, so these sit last.
   =============================================================== */

/* Nothing may ever exceed the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

/* ---- 1280 and below ---- */
@media (max-width: 1280px) {
  .site-footer__newsletter { grid-template-columns: 80px minmax(0, 1fr) 320px; }
  .site-footer__nl-visual  { width: 320px; margin-right: 0; }
  .nl-card--front { width: 236px; }
  .nl-card--back  { left: 140px; width: 176px; }
  .cta-burst { width: 100%; height: auto; }
}

/* ---- 1100 and below: drop the newsletter card stack ---- */
@media (max-width: 1100px) {
  .site-footer__newsletter { grid-template-columns: 80px minmax(0, 1fr); }
  .site-footer__nl-visual  { display: none; }
  .site-footer__panel      { grid-template-columns: 260px minmax(0, 1fr); }
  .site-footer__colgroup   { width: 260px; padding-right: 32px; }
  .site-footer__colgrid    { padding-left: 32px; gap: 28px; }
}

/* ---- 1000 and below ---- */
@media (max-width: 1000px) {
  .site-footer__colgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-layout       { grid-template-columns: 1fr; }
  .pricing-panel__aside { min-height: 280px; }
}

/* ---- 900 and below: single-column everything structural ---- */
@media (max-width: 900px) {
  .site-footer__panel {
    grid-template-columns: minmax(0, 1fr);
    /* #171C18 on #111412 is a 6-value difference — invisible on a phone.
       A hairline gives the panel a readable edge without changing the fill. */
    border: 1px solid rgba(255, 254, 253, 0.09);
    padding: 24px 18px;
    gap: 28px;
  }

  /* Reclaim width for the columns and stop the tap padding inflating rows. */
  .site-footer__colgroup,
  .site-footer__colgrid { gap: 26px 16px; }

  .site-footer__col ul { gap: 8px; }
  .site-footer__col ul li { padding-block: 2px; }
  .site-footer__col ul a { padding-block: 3px; line-height: 20px; }
  .site-footer__col h3 { margin-bottom: 14px; }
  /* The desktop vertical rule becomes a full-width horizontal line here,
     which cuts the panel into two apparent boxes. Drop it and let the two
     groups read as one continuous grid. */
  .site-footer__colgroup {
    width: auto;
    padding-right: 0;
    padding-bottom: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .site-footer__colgrid { padding-left: 0; }
  .site-footer__watermark { display: none; }

  .site-footer__newsletter {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    padding: 32px 24px;
    min-height: 0;
  }
  .site-footer__nl-mark         { grid-column: 1; grid-row: 1; width: 56px; height: 56px; }
  .site-footer__newsletter-copy { grid-column: 1; grid-row: 2; }
  .site-footer__signup          { grid-column: 1; grid-row: 3; }
  .site-footer__nl-print        { grid-column: 1; grid-row: 4; }

  /* Stack rather than wrap, so no line-stretch maths applies at all. */
  .site-footer__signup { flex-direction: column; align-items: stretch; }
  .site-footer__signup input { width: 100%; flex: 0 0 50px; }
  .site-footer__signup .btn--primary { width: 100%; }

  /* Section eyebrows may wrap; the hero one stays on a single line and
     scales its type down to fit instead. */
  .t-eyebrow {
    line-height: 16px;
    padding: 8px 14px;
    text-align: center;
  }

  .section--hero__eyebrow {
    max-width: 100%;
    white-space: nowrap;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0.4px;
    padding: 6px 12px;
  }

  .site-footer__bar {
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 32px;
  }
  .site-footer__social { margin-left: 0; }

  /* Two columns from here down, not one. */
  .site-footer__colgrid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__colgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }

  .audit-form__split { grid-template-columns: 1fr; gap: 0; }
  .audit-form button[type="submit"] { width: 100%; min-width: 0; }

  .contact-grid__copy { padding: 28px 20px; }
  .pricing-card__inner { padding: 24px; }
  .pricing-card__band  { padding: 12px 24px; }

  /* Scroller: narrower cards, nav buttons move under the heading. */
  .section__head--split { flex-direction: column; align-items: flex-start; }
  .rv-card { flex-basis: 300px; width: 300px; }
  .rv-scroller { gap: 16px; }
  .rv-card__body { padding: 20px; }

  .cta-reviews { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .cta-reviews__rule { display: none; }
  .section--cta { padding: 64px 24px; }
}

/* ---- 640 and below ---- */
@media (max-width: 640px) {
  /* Middle section stays two columns on mobile rather than collapsing
     to one long list. */
  .site-footer__colgrid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .site-footer__colgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }

  /* Bottom bar stacks left-aligned: wordmark, legal, copyright, socials. */
  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 32px;
  }
  .site-footer__legal { width: 100%; gap: 12px; }
  .site-footer__legal ul { gap: 10px 18px; }
  .site-footer__social { margin-left: 0; gap: 18px; }

  /* All three frames stay side by side, as the reference does on mobile.
     Measured 114x180 there, a taller crop than the 325:360 desktop ratio. */
  .section--hero__gallery { gap: 8px; }
  .section--hero__gallery figure { aspect-ratio: 114 / 180; }
  .section--hero::before { inset: 0 0 80px 0; }

  .section--hero__features { gap: 12px 20px; font-size: 13px; }

  .service-card, .card { padding: 24px; }
  .proof-card { padding: 28px 24px; }
  .proof-card__photo, .proof-card--placeholder .proof-card__photo-ph { height: 220px; }

  .faq-item__q { gap: 16px; padding-block: 20px; }
  .faq-item__h { font-size: 18px; line-height: 26px; }

  .site-footer__legal ul { gap: 12px; }
  .site-footer__bar { font-size: 11px; }

  /* Tap targets: 24px link rows are too tight on touch. Kept modest so
     wrapped multi-line labels do not balloon the column height. */
  .site-footer__col ul a,
  .site-footer__legal a { display: inline-block; padding-block: 3px; }
  .site-footer__social a { width: 40px; height: 40px; }
  .faq-item__q { min-height: 48px; }
}

/* ---- 420 and below ---- */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .section      { padding: 48px 16px; }
  .section--hero { padding: 0; }
  .section--cta { padding: 48px 16px; }
  .section--hero__top { padding: 56px 16px 56px; }
  .site-footer { padding-block: 48px; }
  .site-footer > .container { padding-inline: 16px; }

  /* Reference holds the hero at 40/48 down to 390; only the section
     headings step down. */
  .t-hero { font-size: 40px; line-height: 48px; letter-spacing: -1.2px; }
  .t-h2, .t-h2-sm, .t-h3 { font-size: 26px; line-height: 34px; letter-spacing: -0.6px; }
  .t-card-h { font-size: 20px; line-height: 28px; }

  .section--hero__gallery { gap: 6px; }

  .section--hero__eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.2px;
    padding: 6px 10px;
    gap: 5px;
  }
  .section--hero__eyebrow::before { width: 6px; height: 6px; }

  .btn { width: 100%; }
  .section--hero__actions .btn,
  .cta-panel__actions .btn { width: 100%; }

  .pricing-card__amount strong { font-size: 26px; }
  .site-footer__newsletter h2 { font-size: 26px; line-height: 34px; }
}