/* ============================================================================
   Friends Insurance Brokerage, homepage comp, Track A "The Morning"
   Static build. No framework, no build step.

   Palette: brand navy #131e45 dominant, brand green #80b541 accent only,
   a navy-tinted neutral ramp for depth. No gradients, no shadows, no glows.
   Type: Libre Franklin (single family, weight contrast), self-hosted,
   font-display: optional so the page never reflows under the reader.
   ========================================================================= */

/* ---- Fonts --------------------------------------------------------------- */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 100 900;
  font-display: optional;
  src: url("../fonts/libre-franklin-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  --navy: #131e45;
  --n700: #2b3866;
  --n600: #48537a;
  --n500: #5b6791;
  --n300: #a6adc9;
  --n200: #ccd1e2;
  --n100: #e6e8f1;
  --n75: #eef0f6;
  --n50: #f4f5f9;
  --white: #ffffff;
  --green: #80b541;
  --green-ink: #46701c;

  --font: "Libre Franklin", "Franklin Gothic Medium", Arial, Helvetica, sans-serif;

  --text-xs: 0.875rem;
  --text-base: 1.125rem;
  --text-lead: 1.4375rem;
  --text-h3: 1.8125rem;
  --text-h2: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --text-h1: clamp(2.25rem, 1.1rem + 3.9vw, 4.25rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --section: 4rem;

  --header-h: 4.25rem;
  --gutter: 1.5rem;
  --container: 1200px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-sticky: 20;
  --z-menu: 30;
}

@media (min-width: 768px) { :root { --section: 6rem; } }
@media (min-width: 1200px) { :root { --section: 7.5rem; } }

/* ---- Reset and base ------------------------------------------------------ */

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

html {
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.6;
  color: var(--navy);
  background: var(--n50);
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: var(--text-base);
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.3; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.board a:focus-visible,
.site-footer a:focus-visible { outline-color: var(--green); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

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

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--navy);
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.btn:hover { background: var(--n700); border-color: var(--n700); }

.btn--green {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
}
.btn--green:hover { background: #8fc253; border-color: #8fc253; color: var(--navy); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.btn--lg {
  min-height: 3.5rem;
  padding: 0.85rem 1.5rem;
  font-size: var(--text-lead);
}

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--n200);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand {
  display: block;
  flex: none;
  width: clamp(150px, 16vw, 210px);
  padding: 0.5rem 0;
}
.brand img { width: 100%; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.nav__links {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.nav__links a {
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--green); }

.nav__phone {
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 0.5rem 0;
}
.nav__phone:hover { color: var(--n600); }

.nav__cta { white-space: nowrap; }

.menu { display: none; }

/* ---- Hero: The Morning --------------------------------------------------- */

.hero {
  position: relative;
  height: 520vh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
}

.scene {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 100%;
  height: 100%;
}

.scene text {
  font-family: var(--font);
  font-weight: 800;
}

.layer { will-change: transform; }

.hero__copy {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: start;
  padding: calc(var(--header-h) + clamp(1.5rem, 5vh, 4rem)) 6vw 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 22rem);
  justify-content: space-between;
  align-items: start;
  gap: var(--space-5);
}
.hero__copy a { pointer-events: auto; }

.hero__lede { transition: opacity 400ms var(--ease-out); }

.hero__lede h1 {
  font-size: var(--text-h1);
  line-height: 1.02;
  max-width: 13ch;
}

.hero__sub {
  margin-top: var(--space-3);
  max-width: 32ch;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.45;
  color: var(--n600);
}

.hero__cue {
  grid-area: 2 / 1;
  z-index: 2;
  align-self: end;
  padding: 0 6vw 1.75rem;
  pointer-events: none;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  transition: opacity 300ms var(--ease-out);
}



.hero[data-beat="2"] .hero__cue,
.hero[data-beat="3"] .hero__cue,
.hero[data-beat="4"] .hero__cue { opacity: 0; }

.hero[data-beat="2"] .hero__lede,
.hero[data-beat="3"] .hero__lede,
.hero[data-beat="4"] .hero__lede { opacity: 0; }

/* Hotspots: the scene is the navigation */
.hot { cursor: pointer; }
.hot .tag rect {
  fill: var(--navy);
  transition: fill 150ms var(--ease-out);
}
.hot .tag text { fill: var(--white); font-size: 14px; font-weight: 700; }
.hot .tag .tag-dot { fill: var(--green); }
.hot .tag .tag-chev { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hot:hover .tag rect,
.hot:focus-visible .tag rect { fill: var(--green); }
.hot:hover .tag text,
.hot:focus-visible .tag text { fill: var(--navy); }
.hot:hover .tag .tag-dot,
.hot:focus-visible .tag .tag-dot { fill: var(--navy); }
.hot:hover .tag .tag-chev,
.hot:focus-visible .tag .tag-chev { stroke: var(--navy); }
.hot:focus { outline: none; }
.hot:focus-visible .hot-outline { stroke: var(--navy); stroke-width: 6; }
.hot-outline { fill: transparent; stroke: transparent; stroke-width: 6; stroke-linejoin: round; pointer-events: all; }

/* Scene state, driven by JS with custom properties and classes */
.scene {
  --gate: 1;
  --door: 0.35;
}
#gate {
  transform: scaleY(var(--gate));
  transform-box: fill-box;
  transform-origin: top;
}
#door-leaf {
  transform: scaleX(var(--door));
  transform-box: fill-box;
  transform-origin: left;
}
.glass { fill: var(--n700); transition: fill 300ms var(--ease-out); }
.scene.is-open .glass { fill: var(--white); }
#lamp { fill: var(--n300); }
#beam { fill: var(--white); opacity: 0; }
.scene.is-lit #lamp { fill: var(--white); }
.scene.is-lit #beam { opacity: 0.9; }

.person { fill: var(--navy); }
.person .arm-front {
  transform: rotate(var(--arm, 0deg));
  transform-box: fill-box;
  transform-origin: top center;
}
.person .keys { fill: var(--green); }

/* Static composed scene: no JS, or prefers-reduced-motion.
   Copy sits above the scene in normal flow; the scene shows house, car and
   storefront together, gate up, lights on, all three still clickable. */
:is(html:not(.js) .hero, .hero.is-static) { height: auto; }
:is(html:not(.js) .hero, .hero.is-static) .hero__stage {
  position: static;
  height: auto;
  grid-template-rows: auto auto;
}
:is(html:not(.js) .hero, .hero.is-static) .hero__copy {
  grid-area: 1 / 1;
  padding: clamp(2rem, 5vh, 3rem) 6vw 1.5rem;
}
:is(html:not(.js) .hero, .hero.is-static) .scene {
  grid-row: 2 / 3;
  height: 60vh;
  min-height: 340px;
}
:is(html:not(.js) .hero, .hero.is-static) .hero__cue { display: none; }
:is(html:not(.js) .hero, .hero.is-static) .layer { transform: none !important; }
:is(html:not(.js) .hero, .hero.is-static) .world { transform: translate(0, 180px) scale(0.8); }
:is(html:not(.js) .hero, .hero.is-static) .scene { --gate: 0.06; --door: 1; }
:is(html:not(.js) .hero, .hero.is-static) .glass { fill: var(--white); }
:is(html:not(.js) .hero, .hero.is-static) #seg-home { transform: translate(30px, 0); }
:is(html:not(.js) .hero, .hero.is-static) #seg-shop { transform: translate(480px, 0); }
:is(html:not(.js) .hero, .hero.is-static) #near-shop { transform: translate(480px, 0); }
:is(html:not(.js) .hero, .hero.is-static) #car { transform: translate(700px, 725px); }
:is(html:not(.js) .hero, .hero.is-static) #near-home,
:is(html:not(.js) .hero, .hero.is-static) #house-twin,
:is(html:not(.js) .hero, .hero.is-static) #shop-left,
:is(html:not(.js) .hero, .hero.is-static) #shop-right,
:is(html:not(.js) .hero, .hero.is-static) #fig-home,
:is(html:not(.js) .hero, .hero.is-static) #seg-drive,
:is(html:not(.js) .hero, .hero.is-static) #far-drive,
:is(html:not(.js) .hero, .hero.is-static) #near-drive { display: none; }
:is(html:not(.js) .hero, .hero.is-static) #fig-shop { transform: translate(840px, 720px); opacity: 1; }
:is(html:not(.js) .hero, .hero.is-static) #fig-staff { transform: translate(1010px, 720px); --arm: -150deg; }
:is(html:not(.js) .hero, .hero.is-static) .hero__lede { opacity: 1; }

/* ---- Lines board: the painted sign ---------------------------------------- */

.board {
  background: var(--navy);
  color: var(--white);
  padding: var(--section) var(--gutter);
}

/* The board is a drawn object: a framed face with corner screws, a painted
   header band with a white inner line (the real sign has one), and the six
   lines as slotted rows on a directory. */
.sign {
  position: relative;
  padding: var(--space-4);
  background: var(--n700);
  border: 6px solid var(--n600);
}

.sign__band::before,
.sign__band::after,
.sign__foot::before,
.sign__foot::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--n300);
}
.sign__band::before { top: 7px; left: 7px; }
.sign__band::after { top: 7px; right: 7px; }
.sign__foot::before { bottom: 7px; left: 7px; }
.sign__foot::after { bottom: 7px; right: 7px; }

.sign__band {
  padding: var(--space-5);
  background: var(--green);
  color: var(--navy);
  text-align: center;
  outline: 2px solid var(--white);
  outline-offset: -10px;
}
.sign__band h2 {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sign__lead {
  margin: var(--space-4) auto var(--space-5);
  max-width: 52ch;
  text-align: center;
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--n200);
}

.sign__list {
  display: grid;
  gap: 6px;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background: var(--navy);
}
.row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  background: var(--green);
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.row:hover::before,
.row:has(.row__name a:focus-visible)::before { opacity: 1; }

.row__name {
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.row__name a {
  text-decoration: none;
  color: var(--white);
}
.row__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.row__name a:focus-visible { outline: none; }
.row:has(.row__name a:focus-visible) {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

.row__what {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.row__who {
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--n200);
}
.row__go {
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  transition: transform 150ms var(--ease-out);
}
.row:hover .row__go { transform: translateX(4px); }

.sign__foot {
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-3);
  max-width: 70ch;
  text-align: center;
  color: var(--n200);
  line-height: 1.6;
  letter-spacing: 0.005em;
}
.sign__foot a { color: var(--white); font-weight: 700; text-underline-offset: 3px; }

/* ---- Why them: three drawn vignettes ------------------------------------- */

.why {
  padding: var(--section) var(--gutter);
  background: var(--n50);
}

.why__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-7);
  align-items: end;
  margin-bottom: var(--space-6);
}
.why__head h2 { max-width: 14ch; }

.why__facts {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--n600);
}

.why__proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
}

/* Vignettes borrow the hero's drawing: flat, navy and green, the same
   sidewalk and road, no faces. Framed like the photograph beside them. */
.vig {
  width: 100%;
  height: auto;
}
.vig text { font-family: var(--font); }

.proof h3 {
  margin-top: var(--space-4);
  font-size: var(--text-h3);
  line-height: 1.25;
}
.proof p {
  margin-top: var(--space-2);
  color: var(--n600);
}
.proof p strong { color: var(--navy); }


/* ---- Meet Alex: the video placeholder ------------------------------------ */

/* ---- Alex: the floating video bubble and its full-size player ------------
   A round, muted loop of Alex in the bottom-right corner once the hero has
   gone by (main.js decides when). Tap for the full video with sound. Sits
   under the sticky header and the phone menu. */
.alex {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 15;
  width: 8rem;
  height: 8rem;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s;
}
.alex[hidden] { display: none; }
.alex.is-away {
  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem) scale(0.9);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}
.qf-open .alex { display: none; }
.alex__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  cursor: pointer;
  /* The painted sign's construction, round: white inner line, navy rim. */
  box-shadow: 0 0 0 3px var(--white), 0 0 0 7px var(--navy), 0 12px 28px rgba(19, 30, 69, 0.3);
  transition: transform 150ms var(--ease-out);
}
.alex__open:hover { transform: scale(1.04); }
.alex__open:focus-visible { outline: 3px solid var(--green); outline-offset: 10px; }
.alex__loop { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.alex__sound {
  position: absolute;
  left: -0.25rem;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy);
  box-shadow: 0 0 0 3px var(--white);
  pointer-events: none;
}
.alex__sound svg { width: 1.25rem; height: 1.25rem; }
.alex__close {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--white);
  cursor: pointer;
}
.alex__close::before { content: ""; position: absolute; inset: -0.4rem; } /* a 44px target */
.alex__close svg { width: 0.85rem; height: 0.85rem; }
.alex__close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.alex-dialog {
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--white);
}
.alex-dialog::backdrop { background: rgba(19, 30, 69, 0.86); }
/* The painted sign's n600 border (its white inner line would sit on the picture). */
.alex-dialog__frame {
  border: 6px solid var(--n600);
  background: var(--navy);
}
.alex-dialog__video {
  display: block;
  width: min(60rem, 92vw, calc(78svh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.alex-dialog.is-tall .alex-dialog__video { width: min(92vw, calc(80svh * 9 / 16)); aspect-ratio: 9 / 16; }
.alex-dialog__caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n200);
}
.alex-dialog__close {
  position: absolute;
  top: -3.25rem;
  right: -0.25rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
}
.alex-dialog__close svg { width: 1.1rem; height: 1.1rem; }
.alex-dialog__close:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .alex, .alex.is-away, .alex__open { transition: none; }
  .alex__open:hover { transform: none; }
}

/* ---- Founder ------------------------------------------------------------- */

.founder {
  padding: var(--section) var(--gutter);
  background: var(--white);
}

.founder__artifacts {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.print--sign img { aspect-ratio: 1200 / 588; object-fit: cover; }

.founder .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: center;
}

.founder__text h2 { max-width: 14ch; }
.founder__text p {
  margin-top: var(--space-4);
  max-width: 58ch;
  font-size: var(--text-lead);
  line-height: 1.55;
}
.founder__text p + p { margin-top: var(--space-3); }
.founder__text .btn { margin-top: var(--space-5); }

.print {
  margin: 0;
  justify-self: center;
  max-width: 24rem;
}
.print img {
  width: 100%;
  height: auto;
  padding: 0.75rem;
  background: var(--white);
  border: 1px solid var(--n200);
}
.print figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n600);
}

/* ---- Reviews: one giant quote --------------------------------------------- */

.reviews {
  padding: var(--section) var(--gutter);
  background: var(--n100);
  text-align: center;
}

.reviews h2 {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--n600);
}

.reviews__big { margin: var(--space-4) 0 0; }
.reviews__giant {
  margin-inline: auto;
  max-width: 15ch;
  font-size: clamp(2.75rem, 1.4rem + 6.4vw, 7rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.reviews__rest {
  margin: var(--space-5) auto 0;
  max-width: 40ch;
  font-size: var(--text-lead);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
}
.reviews__big footer {
  margin-top: var(--space-3);
  color: var(--n600);
}
.reviews cite {
  font-style: normal;
  font-weight: 800;
  color: var(--navy);
}

.reviews__row {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--n200);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  text-align: left;
}
.reviews__row blockquote { margin: 0; }
.reviews__row blockquote p {
  font-size: var(--text-base);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
}
.reviews__row blockquote footer {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--n600);
}

.reviews__more {
  margin-top: var(--space-6);
  font-weight: 700;
}
.reviews__more a { text-underline-offset: 3px; }

/* ---- Quote / contact: the counter ----------------------------------------- */

.quote {
  padding: var(--section) var(--gutter) var(--space-7);
  background: var(--white);
  border-top: 1px solid var(--n200);
}

.quote .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 var(--space-7);
  align-items: end;
}

.quote__lead {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--n600);
}

/* The four buttons stand on the counter: nothing between them and the slab. */
.quote__choices {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.quote__choices .btn { font-size: var(--text-base); padding-inline: 1.25rem; }
.quote__choices .btn--ghost { background: var(--white); }
.quote__choices .btn--ghost:hover { background: var(--navy); }

/* The painted sign, hung from a rail on two straps, on the wall above the counter. */
.quote__call {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--navy);
  color: var(--white);
  outline: 2px solid var(--white);
  outline-offset: -12px;
}
.quote__call::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-5));
  height: 6px;
  background: var(--n600);
}
.quote__strap {
  position: absolute;
  left: 16%;
  top: calc(-1 * var(--space-5));
  width: 6px;
  height: var(--space-5);
  background: var(--n600);
}
.quote__strap--r { left: auto; right: 16%; }
.quote__call h3 { font-size: var(--text-base); font-weight: 700; color: var(--n200); }
.quote__call a:focus-visible { outline-color: var(--green); }
.quote__phone {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.quote__phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.quote__call address {
  margin-top: var(--space-3);
  font-style: normal;
  line-height: 1.6;
  color: var(--n200);
}
.quote__call address a { color: var(--white); text-underline-offset: 3px; }

/* The counter: one drawn object. A slab with the white edge line the hero's
   buildings have, a front with a drawer, a service bell at the end. */
.counter {
  grid-column: 1 / -1;
  position: relative;
  height: 6.5rem;
}
.counter__top {
  height: 1.5rem;
  background: var(--navy);
  border-bottom: 3px solid var(--white);
}
.counter__front {
  position: relative;
  height: 5rem;
  background: var(--n700);
}
.counter__drawer {
  position: absolute;
  top: 1.1rem;
  left: var(--space-5);
  width: 10rem;
  height: 2.25rem;
  background: var(--n600);
}
.counter__drawer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 4px;
  transform: translate(-50%, -50%);
  background: var(--white);
}
.counter__bell {
  position: absolute;
  right: var(--space-6);
  bottom: 100%;
  width: 48px;
  height: 40px;
}

.carriers {
  grid-column: 1 / -1;
  margin-top: var(--space-5);
  color: var(--n600);
}
.carriers p { font-weight: 600; font-size: var(--text-xs); }
.carriers ul {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-lead);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--n200);
  padding: var(--space-7) var(--gutter) var(--space-5);
  line-height: 1.6;
  letter-spacing: 0.005em;
}

.site-footer .container {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

.site-footer .brand { width: 190px; padding: 0; }
.site-footer address { font-style: normal; margin-top: var(--space-4); }
.site-footer a { color: var(--white); text-underline-offset: 3px; }
.site-footer h3 { font-size: var(--text-base); color: var(--white); margin-bottom: var(--space-2); }
.site-footer li { padding: 0.2rem 0; }
.site-footer li a { text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }

.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--n700);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--n200);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .founder .container { grid-template-columns: 1fr; gap: var(--space-6); }
  .print { justify-self: start; }
  .row { grid-template-columns: 11rem minmax(0, 1fr); }
  .row__who { grid-column: 2; }
  .row__go { grid-column: 2; }
  .why__head { grid-template-columns: 1fr; align-items: start; }
  .why__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding-bottom: 0;
  }
  .why__proofs { grid-template-columns: 1fr; gap: var(--space-6); }
  .proof {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 0 var(--space-5);
    align-items: start;
  }
  .proof .vig { grid-row: 1 / 4; }
  .proof h3 { margin-top: 0; }
  /* No text links at this width, so the menu button carries the sections (it used to appear only on phones). */
  .menu { display: block; position: relative; }
  .menu summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
    font-weight: 700;
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: var(--z-menu);
    min-width: 14rem;
    padding: 0.5rem 0;
    background: var(--white);
    border: 1px solid var(--n200);
  }
  .menu__panel a {
    display: block;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
  }
  .menu__panel a:hover { background: var(--n100); }
  .menu__panel a.menu__quote {
    font-weight: 800;
    border-bottom: 1px solid var(--n200);
    margin-bottom: 0.25rem;
  }

  .quote .container { grid-template-columns: 1fr; }
  .quote__call { order: 3; margin: var(--space-7) 0 0; }
  .counter { order: 2; }
  .carriers { order: 4; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --gutter: 1rem; --header-h: 3.75rem; }

  .brand { width: 112px; }
  .nav { gap: var(--space-3); }
  .nav__cta { display: none; }
  .hero { height: 260vh; }
  .hero__copy {
    padding: calc(var(--header-h) + 1.25rem) var(--gutter) 0;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    /* Sit the copy at the bottom of the sky, just above the rooftops, instead of
       leaving 300px of empty sky between the headline and the scene. 42svh clears
       the tallest tag (the shop's) on 667 to 932px phones. */
    align-self: end;
    padding-top: var(--header-h);
    padding-bottom: calc(42svh + 0.75rem);
  }
  /* The tags are 14px SVG text inside a world scaled to 60%: about 7px on a phone.
     Scale them up in CSS; the tap target is the whole building (.hot-outline), not the tag. */
  .hot .tag { transform-box: fill-box; transform-origin: 0 0; }
  #house .tag { transform: translate(200px, 296px) scale(1.6); }
  #store .tag { transform: translate(528px, 236px) scale(1.6); }
  #car .tag   { transform: translate(30px, 104px) scale(1.6); }
  /* The sun sits at x=1180 of a 1440 world; a phone shows the left ~470 units, so it
     never appears. Pull it into the mobile sky, upper right, above the headline.
     JS drives its climb through the cy attribute, which composes with this. */
  #sun { transform: translate(-680px, -600px); }
  .hero__lede h1 { max-width: 12ch; }
  .hero__sub { display: none; }
  .hero__cue { padding: 0 var(--gutter) 1.25rem; }
  .hero[data-beat="2"] .hero__lede,
  .hero[data-beat="3"] .hero__lede,
  .hero[data-beat="4"] .hero__lede { opacity: 1; }

  /* Mobile static composition: the world scales down from the ground line */
  :is(html:not(.js) .hero, .hero.is-static) .scene { height: 50vh; min-height: 300px; }
  :is(html:not(.js) .hero, .hero.is-static) .world { transform: translate(0, 270px) scale(0.7); }
  :is(html:not(.js) .hero, .hero.is-static) #seg-home { transform: translate(-190px, 0); }
  :is(html:not(.js) .hero, .hero.is-static) #seg-shop { transform: translate(20px, 0); }
  :is(html:not(.js) .hero, .hero.is-static) #near-shop { transform: translate(20px, 0); }
  :is(html:not(.js) .hero, .hero.is-static) #car { transform: translate(380px, 725px); }
  :is(html:not(.js) .hero, .hero.is-static) #fig-shop { transform: translate(840px, 720px); }
  :is(html:not(.js) .hero, .hero.is-static) #fig-staff { transform: translate(1010px, 720px); }

  .sign { padding: var(--space-2); border-width: 4px; }
  .sign__band { padding: var(--space-3); outline-offset: -6px; }
  .sign__band::before,
  .sign__band::after,
  .sign__foot::before,
  .sign__foot::after { display: none; }
  .sign__lead { font-size: var(--text-base); }
  .row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  }
  .row__who, .row__go { grid-column: 1; }
  .row__go { margin-top: var(--space-1); }

  .proof { grid-template-columns: 1fr; }
  .proof .vig { grid-row: auto; }
  .proof h3 { margin-top: var(--space-3); }

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

  .alex { width: 6rem; height: 6rem; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }
  .alex__sound { width: 2rem; height: 2rem; }
  .alex__sound svg { width: 1.05rem; height: 1.05rem; }
  .alex-dialog__close { top: -3rem; }
  .quote__call { margin-top: var(--space-7); }
  .counter { height: 5rem; }
  .counter__front { height: 3.5rem; }
  .counter__drawer { width: 7rem; top: 0.7rem; height: 2rem; }
  /* The bell would sit under the wrapped buttons at this width. Pull back. */
  .counter__bell { display: none; }

  .site-footer .container { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer__legal { flex-direction: column; }
}

/* Tablets and small laptops: the world runs at 72% (main.js), so lift the tags back to readable. */
@media (min-width: 721px) and (max-width: 1279px) {
  .hot .tag { transform-box: fill-box; transform-origin: 0 0; }
  #house .tag { transform: translate(200px, 296px) scale(1.35); }
  #store .tag { transform: translate(528px, 236px) scale(1.35); }
  #car .tag   { transform: translate(30px, 104px) scale(1.35); }
}
/* With the house parked nearer the left, the headline has to clear the rooftops: smaller type across the band,
   smaller again on short stages (a 1279x720 laptop puts the roofline at 334px). */
@media (min-width: 721px) and (max-width: 1279px) {
  .hero__lede h1 { font-size: clamp(2rem, 0.6rem + 3.2vw, 3.4rem); }
}
@media (min-width: 721px) and (max-width: 1279px) and (max-height: 760px) {
  .hero__lede h1 { font-size: 2.5rem; }
}
/* Short landscape stages (iPad landscape, small laptops): no room for the sub-line above the roofs. Phones hide it too. */
@media (min-width: 721px) and (max-width: 1279px) and (max-height: 900px) {
  .hero__sub { display: none; }
}

/* Narrow phones (360px): the header was one pixel wider than the screen. */
@media (max-width: 374px) {
  .brand { width: 100px; }
  .nav { gap: var(--space-2); }
}

/* ---- Motion preferences -------------------------------------------------- */

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