/* ==========================================================================
   Haubrick Holiday Lights
   Light-locked design system. Mobile-first. No build step.

   TOKEN RULES (do not break these when editing):
   - ONE accent color: --brand (red). Amber is used only for review stars.
   - ONE radius system: pills for buttons, 16px for cards, 12px for inputs.
   - Page theme is LIGHT everywhere. No dark sections.
   ========================================================================== */

:root {
  /* Brand -------------------------------------------------------------- */
  /* --brand-logo is the exact red sampled from the client's logo file.
     White text on it is only 3.4:1, which fails AA, so it is used for the
     mark and for tints, never behind small white text.
     --brand is the same hue darkened to 4.73:1 for buttons, links and
     small red text. Same family, accessible. */
  --brand-logo:   #f65050;
  --brand:        #d33a3a;
  --brand-strong: #b02c2c;
  --brand-tint:   #fef2f1;
  --brand-ring:   rgba(211, 58, 58, 0.32);

  /* Neutrals ----------------------------------------------------------- */
  --ink:     #14181d;
  --ink-2:   #3d454e;
  --ink-3:   #64707b;
  --line:    #e4e8ed;
  --line-2:  #cfd7df;
  --surface:   #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #edf1f5;

  /* Semantic ----------------------------------------------------------- */
  --star: #e0952a;
  --ok:   #17794a;

  /* Type --------------------------------------------------------------- */
  --font-display: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Shape -------------------------------------------------------------- */
  --r-card:  16px;
  --r-input: 12px;
  --r-pill:  999px;

  /* Elevation (tinted to the page, never pure black) -------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 24, 29, 0.05), 0 1px 3px rgba(20, 24, 29, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 24, 29, 0.06), 0 12px 28px rgba(20, 24, 29, 0.07);
  --shadow-lg: 0 8px 20px rgba(20, 24, 29, 0.07), 0 24px 56px rgba(20, 24, 29, 0.10);

  /* Layout ------------------------------------------------------------- */
  --container: 1180px;
  --gutter: 20px;
  --header-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg, iframe { display: block; max-width: 100%; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

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

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: var(--r-pill);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Grid items default to `min-width: auto`, so a single wide child (a form input,
   a long word) pushes the whole track past the viewport and creates horizontal
   scroll on mobile. Opting every grid child out of that is the standard fix. */
.hero__grid > *,
.trust__grid > *,
.bento > *,
.split > *,
.reviews > *,
.cta-band__inner > *,
.footer__grid > *,
.quote-layout > *,
.form-grid > *,
.field-row > * { min-width: 0; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 9vw, 104px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--alt { background: var(--surface-2); }

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.95rem);
  line-height: 1.07;
  letter-spacing: -0.034em;
  color: var(--ink);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.1vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.026em;
  color: var(--ink);
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.lede {
  text-wrap: pretty;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}

.muted { color: var(--ink-3); }
.section-head { max-width: 62ch; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head p { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: background-color 0.18s var(--ease),
              border-color 0.18s var(--ease),
              color 0.18s var(--ease),
              box-shadow 0.18s var(--ease),
              transform 0.12s var(--ease);
}
.btn i { font-size: 1.15em; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(176, 44, 44, 0.24), 0 8px 20px rgba(211, 58, 58, 0.22);
}
.btn--primary:hover { background: var(--brand-strong); box-shadow: 0 2px 4px rgba(176,44,44,.28), 0 12px 26px rgba(211,58,58,.28); }
.btn--primary:active { transform: translateY(1px) scale(0.99); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--ink-3); background: var(--surface); }
.btn--ghost:active { transform: translateY(1px) scale(0.99); }

.btn--sm { padding: 10px 20px; font-size: 0.94rem; }
.btn--lg { padding: 17px 36px; font-size: 1.06rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo { display: inline-flex; align-items: center; gap: 11px; }
/* The client's own mark, cropped from his logo file. It carries its own red
   field, so it sits as a rounded tile rather than inheriting a colour. */
.logo__mark {
  height: 34px;
  width: auto;
  flex: none;
  border-radius: 7px;
  display: block;
}

.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo__sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
/* The real mark is 3.5:1, so on narrow phones the lockup plus the CTA no
   longer fit. Below 470px the mark carries the brand on its own and the
   wordmark is dropped; the link's aria-label still announces the full name. */
@media (max-width: 470px) {
  .logo__mark { height: 30px; }
  .logo__text { display: none; }
}


.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.header-phone i { color: var(--brand); font-size: 1.15em; }
.header-phone:hover { color: var(--brand); background: var(--brand-tint); }
@media (min-width: 620px) { .header-phone { display: inline-flex; } }

/* ==========================================================================
   Hero
   The photograph owns the right side of the page, running the full height of
   the band and off the edge. No vw anywhere, so the scrollbar cannot shift it.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  padding-block: clamp(44px, 6vw, 76px);
}

/* Warm light spill behind the type. Suggests the product without drawing it. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -25%;
  height: 150%;
  background:
    radial-gradient(45% 52% at 28% 30%, rgba(224, 149, 42, 0.20), transparent 70%),
    radial-gradient(38% 46% at 8% 12%, rgba(246, 80, 80, 0.12), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.hero .container { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(30px, 4vw, 44px); }

.hero__title { margin-bottom: 20px; }
.hero__title .accent { color: var(--brand); }
.hero__lede { margin-bottom: 30px; }

.hero__media {
  position: relative;
  margin-bottom: 28px;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1000px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(580px, 78vh, 820px);
    padding-block: clamp(56px, 6vw, 88px);
  }
  .hero > .container { width: 100%; }

  /* Text keeps to the left half of the container. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 60%; }

  /* Photo spans the full height of the band and bleeds off the right edge.
     Positioned against .hero, so `right: 0` is the page edge, not 50vw. */
  .hero__media {
    position: absolute;
    margin-bottom: 0;
    top: 0; right: 0; bottom: 0;
    width: 42%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    z-index: 0;
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Soft feather into the page on the left so the photo does not end on a hard line. */
    background: linear-gradient(90deg, var(--surface), rgba(255,255,255,0) 22%);
    pointer-events: none;
  }
}

@media (min-width: 1400px) {
  .hero__media { width: 44%; }
  .hero__grid { max-width: 56%; }
}

/* ---------- Trust strip (under the hero, separate section) ---------- */
.trust {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: clamp(22px, 3vw, 30px);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
@media (min-width: 860px) { .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.trust__item { display: flex; align-items: flex-start; gap: 11px; }
.trust__item i { color: var(--brand); font-size: 1.35rem; line-height: 1.15; flex: none; }
.trust__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.99rem;
  color: var(--ink);
  line-height: 1.25;
}
.trust__sub { font-size: 0.86rem; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

/* ==========================================================================
   Included: bento grid (5 cells, exactly filled)
   ========================================================================== */
.bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(3, 1fr); } }

.cell {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.cell:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.cell i { font-size: 1.7rem; color: var(--brand); line-height: 1; }
.cell p { font-size: 0.97rem; color: var(--ink-2); }

/* Cell 1: the wide lead cell with a photo. */
.cell--lead {
  padding: 0;
  overflow: hidden;
  gap: 0;
  border: 0;
  box-shadow: var(--shadow-md);
}
@media (min-width: 1000px) { .cell--lead { grid-column: span 2; grid-row: span 1; } }
/* No forced aspect ratio: the comparison widget sets its own height from the
   mockup images. Forcing 16:9 here made it overflow and cover the card text. */
.cell--lead .cell__media {
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
}
/* Direct child only, so the widget's own images keep their ratio. */
.cell--lead .cell__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell--lead .cell__body { padding: 24px 26px 26px; background: var(--surface); }
.cell--lead .cell__body p { margin-top: 8px; }

/* Background variation so the grid is not six white cards. */
.cell--tint { background: var(--brand-tint); border-color: #fbdedc; }
.cell--tint:hover { border-color: #f5c8c5; }
.cell--shade { background: var(--surface-3); border-color: var(--line-2); }

/* ==========================================================================
   Mockup comparison
   Two renders of the same roofline. Dragging the handle wipes between them,
   which demonstrates "options at several price points" instead of asserting it.
   The control is a real range input, so keyboard and screen readers work.
   ========================================================================== */
.compare {
  --pos: 50%;
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-3);
  touch-action: pan-y;
  isolation: isolate;
}
.compare img {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 466;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.compare__top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* The exact inverse, so the warm-white label is only visible over warm white. */
.compare__base {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
  pointer-events: none;
}
.compare__top img { height: 100%; }

.compare__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(20, 24, 29, 0.18);
  pointer-events: none;
}
.compare__grip {
  position: absolute;
  top: 50%; left: var(--pos);
  width: 44px; height: 44px;
  translate: -50% -50%;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  pointer-events: none;
  font-size: 1.1rem;
}

/* The real control, laid over the image and made invisible. */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}
.compare__range::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; }
.compare__range::-moz-range-thumb { width: 44px; height: 44px; border: 0; }
.compare__range:focus-visible ~ .compare__grip {
  outline: 3px solid var(--brand-ring);
  outline-offset: 3px;
}

.compare__tag {
  position: absolute;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.compare__tag--l { left: 12px; }
.compare__tag--r { right: 12px; }
.compare__top .compare__tag,
.compare__base .compare__tag { bottom: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .compare.is-hinting { transition: none; }
  .compare.is-hinting .compare__top,
  .compare.is-hinting .compare__divider,
  .compare.is-hinting .compare__grip { transition: none; }
}

/* ==========================================================================
   Vertical video
   ========================================================================== */
.video-split {
  display: grid;
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) { .video-split { grid-template-columns: 340px 1fr; } }

.reel {
  position: relative;
  width: 100%;
  max-width: 340px;
  max-height: 72vh;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-lg);
}
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(20,24,29,0.05), rgba(20,24,29,0.45));
  border: 0;
  cursor: pointer;
  transition: opacity 0.25s var(--ease);
}
.reel__play span {
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--brand);
  font-size: 1.7rem;
  padding-left: 4px;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s var(--ease);
}
.reel__play:hover span { transform: scale(1.06); }
.reel__play:active span { transform: scale(0.97); }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }

#gallery { overflow-x: clip; padding-bottom: clamp(36px, 5vw, 64px); }

/* ==========================================================================
   Gallery marquee
   Full width by virtue of sitting outside .container, so there is no vw maths
   and therefore no scrollbar mismatch. The track is duplicated and translated
   by exactly half its width, which makes the loop seamless.
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 14px;
}
.marquee__row {
  display: flex;
  gap: 14px;
  flex: none;
}
.marquee__item { flex: none; }

.marquee__btn {
  display: block;
  padding: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-3);
  cursor: zoom-in;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.marquee__btn img {
  height: clamp(220px, 26vw, 340px);
  width: auto;
  max-width: none;
  object-fit: cover;
  display: block;
}
.marquee__btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: no-preference) {
  .js .marquee__track { animation: marquee var(--marquee-duration, 110s) linear infinite; }
  .js .marquee:hover .marquee__track,
  .js .marquee:focus-within .marquee__track { animation-play-state: paused; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}

/* Without motion it becomes an ordinary horizontal scroller. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: rgba(20, 24, 29, 0.94);
  color: var(--surface);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 24, 29, 0.8); }
.lightbox[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}
.lightbox img {
  max-width: min(94vw, 1200px);
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--r-card);
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: var(--surface);
  font-size: 1.3rem;
  transition: background-color 0.18s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }

.lightbox__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0 26px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.lightbox__nav button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: var(--surface);
  font-size: 1.2rem;
  transition: background-color 0.18s var(--ease);
}
.lightbox__nav button:hover { background: rgba(255, 255, 255, 0.26); }

/* ==========================================================================
   Coverage / service area split
   ========================================================================== */
.split {
  display: grid;
  gap: clamp(28px, 4.5vw, 52px);
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 0.95fr 1.05fr; } }

.split__media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.area-pill {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 7px 15px;
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  max-width: 940px;
}

.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review__text { color: var(--ink-2); font-size: 1rem; text-wrap: pretty; }
.review__text::before { content: "\201C"; }
.review__text::after { content: "\201D"; }
.review__who {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.9rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.review__avatar {
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--surface-3);
}
.review__who strong { display: block; color: var(--ink); font-weight: 700; font-size: 0.96rem; }
.review__src { display: block; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Reviews band
   The page's one committed block of colour. White cards on brand red keeps
   every quote at full contrast while the section stops blending into the
   white-and-grey rhythm of everything around it.
   -------------------------------------------------------------------------- */
.reviews-band { background: var(--brand); }
.reviews-band .h2 { color: var(--surface); }
.reviews-band .lede { color: rgba(255, 255, 255, 0.86); }

.reviews-band .review {
  border: 0;
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.10), 0 14px 32px rgba(20, 24, 29, 0.14);
}
.reviews-band .review__avatar { box-shadow: 0 0 0 2px var(--surface-3); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 22px 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--ink);
  transition: color 0.18s var(--ease);
}
.faq__q:hover { color: var(--brand); }
.faq__q i {
  flex: none;
  font-size: 1.25rem;
  color: var(--brand);
  transition: transform 0.25s var(--ease);
}
.faq__q[aria-expanded="true"] i { transform: rotate(45deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 4px 24px; max-width: 66ch; }

/* ==========================================================================
   Closing CTA band
   ========================================================================== */
.cta-band {
  background: var(--brand-tint);
  border-block: 1px solid #fbdedc;
}
.cta-band__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 840px) {
  .cta-band__inner { grid-template-columns: 1fr auto; gap: 48px; }
}
.cta-band p { margin-top: 12px; max-width: 48ch; }

/* ==========================================================================
   Footer (light, per the brief)
   ========================================================================== */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 68px) 28px;
}
.footer__grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }

.footer__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.footer__list { display: flex; flex-direction: column; gap: 2px; font-size: 0.97rem; }
.footer__list a, .footer__list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}
.footer__list a { transition: color 0.18s var(--ease); }
.footer__list a:hover { color: var(--brand); }
.footer__list i { color: var(--brand); margin-right: 8px; }

.footer__blurb { color: var(--ink-3); font-size: 0.97rem; margin-top: 14px; max-width: 38ch; }

.built-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.built-by a {
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  opacity: 0.55;
  transition: opacity 0.18s var(--ease);
}
.built-by a:hover { opacity: 1; }
.built-by img { height: 20px; width: auto; display: block; }

.footer__bottom {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--ink-3);
}

/* ==========================================================================
   Quote page
   ========================================================================== */
.quote-layout {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 940px) { .quote-layout { grid-template-columns: 1fr 1.05fr; gap: 64px; } }

.quote-aside { position: relative; }
@media (min-width: 940px) { .quote-aside { position: sticky; top: calc(var(--header-h) + 36px); } }

.quote-points { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.quote-point { display: flex; gap: 13px; align-items: flex-start; }
.quote-point i { color: var(--brand); font-size: 1.3rem; flex: none; line-height: 1.2; }
.quote-point strong { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.quote-point span { font-size: 0.93rem; color: var(--ink-3); }

.quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3.4vw, 36px);
}

/* ---------- Form ---------- */
.form-grid { display: grid; gap: 18px; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.89rem;
  color: var(--ink);
}
.field label .req { color: var(--brand); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #8b96a1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.field textarea { resize: vertical; min-height: 96px; }

.field .hint { font-size: 0.84rem; color: var(--ink-3); }
.field .err { font-size: 0.84rem; color: var(--brand-strong); font-weight: 500; }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--brand); }

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.consent input {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent.is-invalid { color: var(--brand-strong); }

.form-error {
  background: var(--brand-tint);
  border: 1px solid #f7cdca;
  color: var(--brand-strong);
  border-radius: var(--r-input);
  padding: 13px 16px;
  font-size: 0.93rem;
  font-weight: 500;
}

.form-note { font-size: 0.83rem; color: var(--ink-3); text-align: center; }

.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }

.form-success { text-align: center; padding: 20px 0; }
.form-success i { font-size: 3.2rem; color: var(--ok); }
.form-success h2 { margin: 18px 0 10px; }
.form-success p { max-width: 42ch; margin-inline: auto; }
.form-success .btn { margin-top: 26px; }

/* ==========================================================================
   Missing-media placeholder
   Keeps unfinished pages presentable instead of showing a broken image.
   ========================================================================== */
.is-missing {
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, #eef2f6 0 12px, #e7ecf1 12px 24px);
  color: var(--ink-3);
}
.is-missing::before {
  content: "\f3f0";
  font-family: "Phosphor";
  font-size: 2rem;
  color: var(--line-2);
}
.is-missing::after {
  content: attr(data-missing);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Motion  (MOTION_INTENSITY 4: entrance reveals + hover/active only)
   ========================================================================== */
/* Reveals are opt-in via the `js` class, which an inline script in <head> adds
   before first paint. Without JavaScript the content is simply visible, so a
   script failure, a crawler, or a headless render can never ship a blank page. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Hero entrance. One orchestrated load, not a fade on every section. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title,
  .js .hero__lede,
  .js .hero__cta,
  .js .hero__media {
    opacity: 0;
    animation: rise 0.75s var(--ease) forwards;
  }
  .js .hero__title  { animation-delay: 0.05s; }
  .js .hero__lede   { animation-delay: 0.16s; }
  .js .hero__cta    { animation-delay: 0.26s; }
  .js .hero__media  { animation-delay: 0.16s; animation-duration: 0.9s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .cta-band, .reel, .marquee__arrow { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { font-size: 12pt; }
}