/* ===========================================================================
   PREVIEW ONLY — HOMEPAGE SECTIONS 3-8, under the template->custom hero.
   Copy = Alie's "DE Homepage — Final Copy" (locked 9/4), verbatim.

   Grounds, in order:
     hero white · products white · data indigo · who oat · centerpiece quote
     petal · FAQ white · closing CTA sky (the shared .final-cta)

   Section 2 ("Don't Compete. Be Different." + Dr. Daughtry) lives in the
   hero's second block, so the page carries SIX corners.
   =========================================================================== */

/* ---------------------------------------------------------------- corners
   Brees, 9/14: 3x corners on the trial page, the section 1 -> 2 corner single.
   Same mechanics as section-corners.css: the rounded section pulls up by R so
   its corner reveals the PREVIOUS section's ground, and that section pays R
   back as bottom padding. Pull-up and pad-out are one setting.

   Sides alternate, counted BACKWARDS from the closing CTA (top-left on every
   page): cta L · faq R · quote L · who R · data L · products R. Six corners,
   so the first lands top-RIGHT — the side Brees named for section 1 -> 2. */
body.page-home {
  --corner: clamp(96px, 15vw, 240px);
  --corner-1: clamp(32px, 5vw, 80px);
}

/* 🔁 9/17 — `.hp-dquote` JOINS THE CHAIN (Alie, Feedbucket 987544). A new section on this page is not a new
   section anywhere else: every band here pulls up by one --corner and pays for the next one's pull-up, so a
   section that sits outside the chain gets EATEN. Dropped in flat, the Daughtry quote kept margin-top 0 and
   padding-bottom 88px, and the sky products corner swept up over the quote and buried the attribution. */
.page-home .hp-dquote,
.page-home .hp-products,
.page-home .hp-data,
.page-home .hp-who,
.page-home .hp-cquote,
.page-home .faq,
.page-home .final-cta {
  position: relative;
  margin-top: calc(-1 * var(--corner));
}
/* 🔁 3x, NOT SINGLE — Brees, 9/15: "the same one that we've been putting on
   section 2, so it's triple the border radius". --corner-1 is no longer used on
   this page; pull-up, radius and the hero's pad-out all move together. */
.page-home .hp-products { margin-top: calc(-1 * var(--corner)); }

/* 🔁 TOP-LEFT — Brees, 9/15: "change the blue curve from the top right to the
   top left. All the other curves can stay the same." (It was top-right on his
   9/14 "sec1-2 on the right side" note.) This also ends the two top-right
   corners in a row that removing the data band had left. */
/* 🔴 TOP-RIGHT, AND THE SIDE IS NOT A FREE CHOICE. The chain is counted BACKWARDS from the CTA (always
   top-left) and alternates: cta L · faq R · cquote L · who R · products L — so the new band before products
   must be R or two of the same side end up adjacent, which is the exact fault the 9/15 note above records
   fixing. Its corner reveals the hero's white pad-out strip, the way products' corner used to. */
.page-home .hp-dquote   { border-top-right-radius: var(--corner); }
.page-home .hp-products { border-top-left-radius: var(--corner); }
.page-home .hp-data     { border-top-left-radius:  var(--corner); }
.page-home .hp-who      { border-top-right-radius: var(--corner); }
.page-home .hp-cquote   { border-top-left-radius:  var(--corner); }
.page-home .faq         { border-top-right-radius: var(--corner); }
.page-home .final-cta   { border-top-left-radius:  var(--corner); }

/* Pad-outs. The hero pays the single corner: in pinned mode on its track
   (the pane stays stuck until the track ends, so the extra is empty white
   below it), in static mode on the pane. ⚠️ :not(.is-static) — without it
   this rule outranks home-scrub.css's `height: auto` and phones get a 230vh
   blank hero. */
/* 🔴 PADDING, NOT JUST HEIGHT. A sticky pane releases at the bottom of its
   parent's CONTENT box, so extra height alone only lengthens the pin and the
   pane still ends flush with the hero's bottom edge — measured at 3x, the quote
   caption sat 72px UNDER the blue section. Padding-bottom is outside the content
   box, so it leaves a real strip below the released pane for the pull-up to
   cover. border-box keeps the total at 230vh + one corner. */
.page-home .sh:not(.is-static) {
  box-sizing: border-box;
  height: calc(230vh + var(--corner));
  padding-bottom: var(--corner);
}
/* 🔁 9/15 — "Don't Compete" is its own section on its own OAT ground (Brees: "I
   don't want to have the same background as the hero"). In static mode it is a
   full-width band, so the pad-out moves from the pane onto that block: the corner
   notch under the products pull-up then shows oat, not the hero's white. */
.page-home .sh.is-static .sh__pane { padding-bottom: 0; }
.page-home .sh.is-static .sh__layer--two {
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--corner));
  background-color: var(--white);   /* 🔁 white, not oat — Brees, 9/15 */
}
.page-home .hp-dquote,
.page-home .hp-products,
.page-home .hp-data,
.page-home .hp-who,
.page-home .hp-cquote,
.page-home .faq { padding-bottom: calc(var(--section-pad) + var(--corner)); }

/* ------------------------------------------------ placeholders + flags
   Brees, 9/14: "Show [X] visibly". Lime with a dashed ink edge reads as
   "not real yet" on every ground on this page, and ink on lime is 9.1:1. */
.ph {
  padding: 0 0.18em;
  border-radius: 6px;
  outline: 2px dashed var(--ink);
  outline-offset: -2px;
  background-color: var(--lime);
  color: var(--ink);
}
.flag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 3px 10px;
  border-radius: 99px;
  background-color: var(--ink);
  color: var(--oat);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* ============================================================ 3. PRODUCTS */
/* 🔴 OAT, NOT WHITE. The hero is white, so a white products section drew the
   section 1 -> 2 corner white-on-white — the one corner Brees asked for by
   name, and it did not show at all (seen in the handoff shot). The cards flip
   to white to stay distinct on the oat. Indigo data sits between this and the
   oat "who we're for", so the two oats never touch. */
/* 🔁 BLUE — Brees, 9/15: "change the background color from the first search to
   the front desk to blue". --sky, the site's light blue (also the closing CTA).
   Ink heading on sky 11.2:1. The corner into this section still reveals the
   white hero; the indigo data band's corner still reveals this ground. */
.hp-products { background-color: var(--sky); }
/* ✅ OPTION E — ARCH TILES, picked by Brees 9/15 ("lets stick with E") from
   _preview/home-products/ (A current · B journey · C index · D bento · E arch;
   E2 head / E3 coloured / E4 frieze were also shown and not taken).
   Centred heading, six white tiles with the arch-figure's rounded top. */
.hp-products__head { max-width: 24ch; margin: 0 auto var(--s-5); text-align: center; }

.hp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .hp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-cards { grid-template-columns: repeat(3, 1fr); } }

.hp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5) var(--s-4) var(--s-4);
  /* Round where it turns, square where it sits — the arch-figure's body. */
  border-radius: 999px 999px var(--r-card) var(--r-card);
  text-align: center;
  background-color: var(--white);
  color: var(--ink);
  text-decoration: none;
  /* 🔁 DEPTH, NOT DRAMA — Brees 9/16: "the white feels flat on the blue. I don't want crazy shadows everywhere but
     would like some depth". Two layers: a tight contact line under the tile and one soft lift below it, both tinted
     with the indigo (76 78 104) rather than grey so they read as shade on the sky ground, not dirt. The lift
     deepens a step on hover, with the rise. Flat fill; no filter. */
  box-shadow: 0 1px 2px rgb(76 78 104 / 0.10), 0 18px 36px -20px rgb(76 78 104 / 0.38);
  transition: transform 0.25s var(--ease-out, ease), box-shadow 0.25s var(--ease-out, ease);
}
/* 🔁 NO HOVER COLOUR — Brees 9/16: "I don't want the cream hover color. Just remove a hover color, have the box
   animate like it does and have the icon circle fill in as it does." The tile stays white; the rise and the
   arrow circle's ink fill (below) are the hover. */
.hp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgb(76 78 104 / 0.10), 0 26px 44px -22px rgb(76 78 104 / 0.45);
}
.hp-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.hp-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-1);
  border-radius: 50%;
  background-color: var(--disc, var(--sky));
  color: var(--ink);
}
.hp-card__icon svg { width: 26px; height: 26px; }
/* 9/10 TYPE RULE (Brees, 9/15 on the homepage: these "should be" Altivo): an h3
   takes the BODY face. Altivo 500, the weight the FAQ toggles and .t-h3 use. */
.hp-card__name { margin: 0; font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 500; }
.hp-card__desc { margin: 0; color: var(--ink); }
.hp-card__go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.hp-card__go svg { width: 16px; height: 16px; }
.hp-card:hover .hp-card__go { background-color: var(--ink); color: var(--oat); }

/* ================================================ 4. TRUST BAR — OPTION H
   ✅ Brees, 9/15: "lets try H" — the four numbers in a white bar straddling the
   seam between the blue products section and "Made for independent practices."
   It replaces the indigo band below (whose rules are now unused).

   HOW IT SITS ON THE SEAM, WITHOUT JS:
   - It is the last thing in .hp-products. The visible join is --section-pad
     below its in-flow position (the rest of the products pad-out is covered
     by .hp-who's pull-up).
   - translateY(--section-pad + 50%) puts the bar's MIDDLE on that join. A
     transform moves paint only, so no section changes height.
   - z-index 5 lifts it over .hp-who (later in the DOM, and its .container
     is z-index 2).
   - .hp-who gets --bar-half of extra top padding so its heading clears the
     lower half. --bar-half is the bar's half-height per breakpoint, measured.
   COLOUR ON THE FIGURES ONLY: deep tier on white ~3.5:1 (large text, floor 3). */
.page-home { --bar-half: 100px; }
@media (max-width: 1023px) { .page-home { --bar-half: 170px; } }

/* 🔁 BLEEDS OFF THE LEFT, ROUNDED ON THE RIGHT — Brees, 9/15, marked-up
   screenshot: the box runs to the screen's left edge and the right-hand end is
   curved. Same shape rule as the site's panels: square where it leaves the
   page, round where it stays inside.
   - margin-left calc(50% - 50vw) reaches the viewport edge from inside the
     centred .container; the matching padding-left puts the first column back
     on the content edge, so the columns still line up with the page.
   - The right end runs 48px past the container and is a full pill cap (999px
     radius = half the bar's height). Clearance the last column needs inside
     that cap: R - sqrt(R² - (R - padV)²) ≈ 16px at 1440 against 112px given. */
.hp-bar {
  position: relative;
  z-index: 5;
  /* 🔁 LESS BLUE ABOVE THE BAR — Brees, 9/15: "a little less space here".
     The visible gap under the tiles is margin-top + the seam drop
     (--section-pad) + half the bar, which measured ~240px at a flat --s-5.
     Solving for a ~96px gap. A negative margin moves the bar up in FLOW, so the
     products section shortens and the seam rises by the same amount: the bar's
     middle stays on the join. */
  margin-top: calc(var(--s-6) - var(--section-pad) - var(--bar-half));
  margin-left: calc(50% - 50vw);
  /* The overhang never eats more than the gutter minus 24px: a flat 48px put
     the cap 3px from the screen edge at 1024 (measured). */
  --bar-over: max(0px, min(48px, calc(var(--container-pad) - 24px)));
  margin-right: calc(-1 * var(--bar-over));
  padding: var(--s-4) calc(var(--bar-over) + var(--s-5)) var(--s-4) calc(50vw - 50%);
  border-radius: 0 999px 999px 0;
  background-color: var(--white);
  box-shadow: 0 24px 50px -30px rgb(47 47 53 / 0.45);
  transform: translateY(calc(var(--section-pad) + 50%));
}
/* Below 1024 the bar is a tall 2x2, so a pill cap would cut into the text:
   still bleeding left, a large fixed radius on the right, ending on the gutter. */
@media (max-width: 1023px) {
  .hp-bar {
    margin-right: 0;
    padding-right: var(--s-4);
    border-radius: 0 48px 48px 0;
  }
}
.hp-bar__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
  .hp-bar__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-bar__item + .hp-bar__item { padding-left: var(--s-3); border-left: 1px solid rgb(47 47 53 / 0.12); }
}
/* 🔁 9/17, Alie (Feedbucket 987547): "Can we make these proof points bigger / more prominent? I think they're
   getting a bit lost in this layout." Brees: bigger, PASTELS KEPT.
   🔴 SIZE DOES NOT BUY CONTRAST. These four figures are the documented exception Brees set on 9/17 with the
   numbers in front of him — 600+ petal 1.70 · 13 lime 1.49 · [X]:1 marigold 2.33 · [X] sky 1.35, against a 3:1
   floor. The floor is 3:1 for large text and they were ALREADY large, so scaling them up changes nothing about
   the exception: it still stands, it is still his, and it still must not be "fixed" by swapping the token back.
   Ask him. The compliant tier is *-deep (~3.5).
   ⚠️ The UNIT ratio drops 0.42em → 0.36em on purpose. `.cf` is `white-space: nowrap`, and at 320 the row is two
   columns ~140px wide; holding 0.42 while the figure grew would have pushed "appointments" — already the widest
   label, already 8px into the gutter at 320 before this — straight out of the bar. Figure grows, unit nearly
   doesn't: 44→55px figure at 1367 (where Alie was looking), 18.5→20px unit. Re-check 320 after any further bump. */
.hp-bar .cf { display: block; margin-bottom: var(--s-1); font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
/* 🔴 THE FIGURE WRAPS, THE NUMBER NEVER DOES. `.cf` used to be `white-space: nowrap` outright, which is why
   "[X] appointments" — the longest of the four by a mile — spilled 8px into the bar's padding at 320 even at the
   OLD size (recorded 9/16 and left). Scaling the type made it spill at 320, 360, 390 AND 1366. Sizing down until
   it fits is the wrong fix twice over: it caps the bar at its longest string, and the two `[X]`s are placeholders
   that get LONGER when the real figures land ("1,240 appointments"). So the unit is allowed to drop to a second
   line when it must, and the number itself is kept whole. */
.hp-bar .cf__num, .hp-bar .cf__unit { white-space: nowrap; }
/* 🔴 AND THE LABELS STILL LINE UP. Once one figure can be two lines, four items with their own flow would hang
   their labels at four different heights. Each item is its own grid: figure row takes the slack, label sits on
   the bottom row, so the four labels share a baseline whatever the figures do.
   ⚠️ That alignment costs a gap under the one-line figures whenever any sibling wraps — you cannot have both.
   So the desktop cap is 3rem (48px, up from 44) rather than the 3.5rem this started at: at 3.5 "[X] appointments"
   wrapped at 1366 and put that gap on the widest, most-seen layout. 48px clears it with 16px of slack. Phones
   still wrap — a 116px column at 320 cannot hold that string at any readable size — and that is exactly the case
   the grid is here for. 🔴 Re-measure this cap when the two [X] placeholders become real numbers; "1,240
   appointments" is longer than what is there now. */
.hp-bar__item { display: grid; grid-template-rows: 1fr auto; }
.hp-bar .cf__num { color: var(--c); }
.hp-bar .cf__num .ph { color: var(--ink); }
.hp-bar .cf__unit { font-size: 0.36em; letter-spacing: 0; color: var(--ink); }
.hp-bar__label { display: block; color: var(--ink); font-size: 1rem; }
@media (max-width: 599px) { .hp-bar { padding-top: var(--s-3); padding-bottom: var(--s-3); padding-right: var(--s-3); } }

/* 🔁 9/18 (later) — OPTION B, "DOTS ON THE SEAM". Brees picked it from the Claude Design canvas "Homepage Trust Bar
   Options" (claude.ai/artifact/8AzZ9LJZb9QSn3LU2dxZBx) after the doubled white bar "doesn't look good"; it is the
   direction of Alie's 987547 comment, "Maybe like the dots proof points we have on the Ads page?" (the 8:1 / 32:1
   discs). It REPLACES the 9/18 doubled-pill block that stood here.
   - Each figure is ink inside a pastel disc (--disc-c, set per item in build.py). The disc's CENTRE sits on the
     blue→indigo join; the label hangs under it in oat on the indigo.
   - 🟢 CONTRAST: the figures are now ink on petal / lime / marigold / white — all above 4.5:1 — so the 9/17 pastel-
     on-white exception no longer applies to these four numbers. Labels: oat on indigo ~8:1.
   - THE SEAM MATHS, rewritten for discs. The bar's own box is ONE ROW OF DISCS tall on desktop (labels are taken out
     of flow, absolutely under their disc), so its height is known: --bar-h. translateY(section-pad + bar-h - disc/2)
     puts the first row's disc centres on the join (the join is section-pad below the bar's in-flow bottom); margin-top pulls the bar up so the clear gap above the discs is
     --bar-gap; .hp-who's padding clears what hangs below the join (the rest of the bar, the label room, then
     --bar-gap again). No measured magic numbers: change --disc and everything follows.
   - Below 1024 it is a 2x2: the first row straddles the join, the second sits on the indigo; --rows = 2 and the row
     gap leaves room for the first row's labels. */
.page-home {
  --disc: clamp(150px, 14.6vw, 210px);
  --label-room: 5.5rem;
  --bar-gap: 120px;
  --rows: 1;
  --row-gap: 0px;
  --bar-h: calc(var(--rows) * var(--disc) + (var(--rows) - 1) * var(--row-gap));
  --bar-half: calc(var(--disc) / 2);
}
@media (max-width: 1023px) {
  .page-home { --disc: clamp(128px, 30vw, 180px); --rows: 2; --row-gap: calc(var(--label-room) + var(--s-5)); --bar-gap: 88px; }
}
@media (max-width: 599px) {
  .page-home { --disc: clamp(124px, 38vw, 150px); --label-room: 6.25rem; --bar-gap: 64px; }
}
.hp-bar {
  margin: calc(var(--bar-gap) - var(--section-pad) - var(--bar-h) + var(--disc) / 2) 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translateY(calc(var(--section-pad) + var(--bar-h) - var(--disc) / 2));
}
@media (max-width: 1023px) { .hp-bar { margin-right: 0; padding: 0; border-radius: 0; } }
@media (max-width: 599px) { .hp-bar { padding: 0; } }
.hp-bar__row { gap: var(--row-gap) var(--s-4); }
.hp-bar__item,
.hp-bar__item + .hp-bar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  text-align: center;
}
.hp-bar .cf {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: var(--disc);
  height: var(--disc);
  margin: 0;
  padding: 0 12px;
  border-radius: 50%;
  background-color: var(--disc-c, var(--white));
  box-shadow: 0 20px 40px -24px rgb(20 20 30 / 0.55);
  /* 0.29 fits a 4-glyph figure ("600+"). A longer one sets --fig-ratio on
     its own .hp-bar__item; "$23,000+" ran 157px wide in a 119px disc. */
  font-size: calc(var(--disc) * var(--fig-ratio, 0.29));
  line-height: 1;
  white-space: normal;
}
.hp-bar .cf__num { color: var(--ink); }
.hp-bar .cf__unit {
  display: block;
  font-family: var(--font-body);
  font-size: max(0.95rem, calc(var(--disc) * 0.08));
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.hp-bar__label {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: 50%;
  width: min(16ch, 100%);
  transform: translateX(-50%);
  color: var(--oat);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.35;
}
@media (max-width: 599px) { .hp-bar__label { width: 100%; font-size: 0.9375rem; } }

/* Two bar figures cite their source: the ROAS links to the Google Ads page,
   the recovered-revenue figure to Vet Call Insights. Inherit the label colour
   so the bar stays quiet; the underline carries the affordance. Alie, 9/21. */
.hp-bar__label a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 120ms ease;
}
.hp-bar__label a:hover,
.hp-bar__label a:focus-visible { text-decoration-color: currentColor; }
.page-home .hp-who { padding-top: calc(var(--bar-h) - var(--disc) / 2 + var(--label-room) + var(--bar-gap)); }

/* ============================================================ (retired) DATA BAND
   "Four tiles, no header." Pastel dots are the only brand colour here, and
   pastels are only ever marks on INDIGO (the standing rule). */
.hp-data { background-color: var(--indigo); color: var(--oat); }
.hp-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px)  { .hp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-stats { grid-template-columns: repeat(4, 1fr); } }

.hp-stat { position: relative; padding-top: var(--s-4); border-top: 1px solid rgb(243 238 232 / 0.22); }
.hp-stat::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--dot, var(--lime));
}
/* The NUMBER carries the size; the unit ("years", "appointments") steps down.
   At one size for both, "13 years" and "[X] appointments" wrapped to two
   lines in a four-up row at 1440 (measured in the first full-page pass). */
.hp-stat__fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.3em;
  /* "[X] appointments" is wider than a real number and wraps in a four-up row;
     the gap keeps the unit clear of the placeholder's dashed edge when it does. */
  row-gap: 0.35em;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
}
.hp-stat__num { font-size: clamp(2.5rem, 4.4vw, 3.75rem); }
.hp-stat__unit { font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
.hp-stat__label { display: block; max-width: 24ch; margin-top: var(--s-2); color: var(--oat); }

/* ======================================================= 5. WHO WE'RE FOR */
/* ✅ OPTION 8 — THE SMART INTAKE LINE (Brees, 9/15: "yes love it!").
   smart-intake-flow.css section 2, re-scoped to .hp-who and moved to DE tokens:
   ink line, white cards on oat, and the SITE'S numeral icons in place of Smart
   Intake's discs ("the icons need to change to the ones we use outside of the
   smart intake page"). The line is drawn by who-line.js. No photos.
   ⚠️ .hp-who is position: relative from the corner group above, which the
   absolutely placed .mt-svg needs. */
/* overflow: clip, not hidden: it clips to the rounded corner (the line enters
   at the right edge ~106px down, inside the 216px corner, and was painting over
   the indigo notch) without creating a scroll container. */
/* 🔁 INDIGO, PERMANENT — Brees, 9/15: "make sure that the 'Made for Independent
   Practices' section stays on the Indigo. I think that's important." (Was the
   ?who=indigo trial; oat before that.) White cards keep their ink text.
   oat heading / line on indigo 7.01:1. */
.hp-who { background-color: var(--indigo); color: var(--oat); overflow: clip; }
.hp-who__head { max-width: 18ch; margin: 0; color: var(--oat); }

.hp-who .mt-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.hp-who .mt__rail,
.hp-who .mt__spur { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-who .mt__head { fill: var(--ink); transition: opacity 0.2s; }
html[data-js="on"] .hp-who [data-mt-spur] { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 0.45s ease; }
html[data-js="on"] .hp-who [data-mt-spur].is-drawn { stroke-dashoffset: 0; }

.hp-who .mt { position: relative; z-index: 1; }
.hp-who .mt__items { display: flex; flex-direction: column; margin: 160px 0 0; padding: 0; list-style: none; }
.hp-who .mt__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: calc((100% - 128px) / 2);
  padding: 32px 36px;
  border-radius: 20px;
  background: var(--white);
}
/* 🔁 FIRST CARD ON THE RIGHT — Brees, 9/15: "a lot of empty space on the
   right-hand side". The heading holds the left and the line enters from the
   right, so the zig-zag now starts right: right, left, right. */
.hp-who .mt__item:nth-child(odd)  { align-self: flex-end; }
.hp-who .mt__item:nth-child(even) { align-self: flex-start; }
.hp-who .mt__item + .mt__item     { margin-top: -80px; }

/* The site's numeral PNGs, sized by height (widths 41 / 65 / 60). .mt__num keeps
   a fixed 56px box because who-line.js aims each spur at its middle. */
.hp-who .mt__num { display: flex; flex: none; align-items: center; width: 56px; height: 56px; }
.hp-who .mt__num-img { display: block; width: auto; height: 56px; }
.hp-who .mt__label { margin: 0; font-family: var(--font-body); font-size: 24px; font-weight: 500; line-height: 30px; color: var(--ink); }
.hp-who .mt__label a { color: inherit; text-decoration: none; }
.hp-who .mt__label a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.hp-who .mt__label a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.hp-who .mt__text { margin: 0; font-size: 17px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 80%, var(--white)); }   /* above 9:1 */
.hp-who .mt__by { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }                                              /* 5.40:1 */
.hp-who .mt__by .flag { margin-top: 6px; }

html[data-js="on"] .hp-who .mt-seq {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
}
html[data-js="on"] .hp-who .mt-seq.is-in { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .hp-who .mt__items { margin-top: 64px; gap: 20px; }
  .hp-who .mt__item,
  .hp-who .mt__item:nth-child(odd),
  .hp-who .mt__item:nth-child(even) { width: 100%; align-self: stretch; }
  .hp-who .mt__item + .mt__item { margin-top: 0; }
}
@media (max-width: 599px) { .hp-who .mt__item { padding: 24px; } }
@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .hp-who .mt-seq { opacity: 1; transform: none; transition: none; }
  html[data-js="on"] .hp-who [data-mt-spur] { stroke-dashoffset: 0; transition: none; }
}
html.mt-measuring .hp-who .mt-seq { transform: none !important; transition: none !important; }

/* Indigo is permanent (9/15, see .hp-who above), so the line and its head are oat. */
.hp-who .mt__rail,
.hp-who .mt__spur { stroke: var(--oat); }
.hp-who .mt__head { fill: var(--oat); }

/* =================================================== 6. CENTERPIECE QUOTE
   🔁 THE GOOGLE ADS TESTIMONIAL STYLE — Brees, 9/15: "styled like the State of
   the Heart one, where it's got a dark blue background and two-toned colors for
   the font". Ported from google-ads.css .gads-quote (not loaded on this page):
   indigo ground, a faint petal circle at the bottom-right edge, quote left with
   the attribution in a right-hand column, white first sentence + lime turn.
   Figures are the Google Ads page's own, measured there:
     white on indigo 8.09:1 · lime on indigo 5.44:1 · oat-75 on indigo 4.77:1 */
.hp-cquote {
  position: relative;
  overflow-x: clip;
  background-color: var(--indigo);
  color: var(--oat);
  text-align: left;
}
/* 🔁 THE LOGO LINE LEADS THE QUOTE — Brees, 9/15 (markup + why in build.py LOGO_RULE).
   🔴 IT STARTS BELOW THE CORNER. The left arm runs to the screen edge, and at the
   section's own top padding it sat inside the 240px top-left curve: measured at
   1920, the arm's top was 168px down, where the curve is still 11px in, so the
   pink stroke poked out over the cream "who" section. The curve is within 1px of
   the edge from ~20px above its end, and the arm sits ~80px down the 88px rule,
   so the rule drops by (corner − section pad − 100px), clamped at 0 for widths
   where the padding already clears it. overflow: clip would also hide it, but it
   would crop the petal circle at the bottom edge too. */
.hp-cquote__rule { margin-top: max(0px, calc(var(--corner) - var(--section-pad) - 100px)); }

.hp-cquote::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -34%;
  z-index: 0;
  width: clamp(320px, 38vw, 620px);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background-color: var(--petal);
  opacity: 0.16;
  pointer-events: none;
}
.hp-cquote__fig {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-6);
  align-items: center;
  max-width: none;
  margin: 0;
}
.hp-cquote__block { margin: 0; }
.hp-cquote__text {
  margin: 0;
  color: var(--white);
  /* 9/10 TYPE RULE: a quote is not an h1/h2, so Altivo — and it is what the
     Google Ads State of the Heart quote this is ported from actually renders
     (.gads-quote__text sets no family, so it inherits the body face at 400). */
  font-family: var(--font-body);
  font-size: clamp(1.375rem, 2.9vw, 2.25rem);
  font-weight: 400;
  line-height: 1.32;
}
.hp-cquote__turn { color: var(--lime); }

/* 🔁 TALLER, AND THE TWO SENTENCES ON THEIR OWN LINES — Brees, 9/15: the section
   "is so thin that it kind of feels out of place"; white sentence, then a space,
   then "I trust them implicitly." — about four lines instead of two.
   - Both halves are display:block spans inside ONE <p>, so stripped of tags the
     quote is still Alie's sentence exactly (the space between them stays).
   - The figure gets a min-height and centres its content, so the section reads
     ~60% of a 900px screen. The section's own padding is untouched, which keeps
     the corner pull-up and the FAQ's pad-out maths as they were.
   - Right column, as on Google Ads: a white logo card over the attribution. The
     logo is a visible placeholder until the practice is confirmed. */
.hp-cquote__fig {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto 1fr;
  row-gap: var(--s-3);
  min-height: clamp(320px, 42vh, 520px);
}
.hp-cquote__block { grid-column: 1; grid-row: 1 / -1; align-self: center; }
.hp-cquote__card  { grid-column: 2; grid-row: 2; justify-self: start; }
.hp-cquote .hp-cquote__by { grid-column: 2; grid-row: 3; }
.hp-cquote__text { font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.2; }
.hp-cquote__lead,
.hp-cquote__turn { display: block; max-width: 24ch; }
/* Altivo sets narrower than the display face: at 24ch the lead fell to TWO lines
   (three with the turn). 19ch restores Brees' four-line shape. */
.hp-cquote__lead { max-width: 19ch; }
/* 🔁 9/17 Brees: "add another break between the sentences" — 0.9em read as one line break, this reads as two. */
.hp-cquote__turn { margin-top: 1.9em; }   /* dead on the homepage — see the .hp-cquote rule below */

/* The practice logo (Valley Center, white artwork) straight on the indigo. No
   card: Google Ads' white card exists only because that client's mark is dark.
   Sized by height, never above its native 223px. */
.hp-cquote__card { padding: 0; background: none; }
.hp-cquote__logo { display: block; width: auto; height: clamp(88px, 8vw, 120px); }
@media (max-width: 899px) {
  .hp-cquote__fig { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  .hp-cquote__block,
  .hp-cquote__card,
  .hp-cquote .hp-cquote__by { grid-column: 1; grid-row: auto; }
}
.hp-cquote .hp-cquote__by {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  font-size: var(--fs-small);
}
.hp-cquote__name { color: var(--white); font-weight: 600; }
/* 🔁 --oat-75, THE SAME GREY AS GOOGLE ADS' "State of The Heart Veterinary Care"
   (.gads-quote__practice) — Brees, 9/15: "make sure that that is the same gray as
   what is on the Google Ads for the state of the heart". 4.77:1 on plain indigo.
   ⚠️ OVER THE FAINT PETAL CIRCLE IT WOULD FAIL: computed 3.76:1 on the 16% tint.
   That is why this used to be full oat. Measured 9/15 with the flag pill gone, the
   circle does NOT reach the attribution at 1920 (167px clear). NOT measured under
   900px, where the caption drops below the quote nearer the circle — check there
   before shipping, and go back to var(--oat) if they touch. */
.hp-cquote__role { color: var(--oat-75); }
@media (max-width: 899px) {
  .hp-cquote__fig { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); }
}

/* 🔁 QUOTE = GOOGLE ADS' STATE OF THE HEART QUOTE, MEASURE FOR MEASURE — Brees 9/16: "Update the pull quote on the
   homepage to the same layout", then "doens't look like the google ads page - different text size, different
   container width for the text". The first pass only moved the grid; it kept the 9/15 four-line shape (3rem type,
   each sentence its own block at 19-24ch) and a ~100px logo column, so the text ran ~150px narrower and ~1.3x bigger.
   Everything below is copied from google-ads.css (.gads-quote__figure / __text / __card / __logo / __by):
   - type: clamp(1.375rem, 2.9vw, 2.25rem) / 1.32, the two sentences INLINE in one run (white, then lime);
   - grid: minmax(0, 1fr) auto, rows 1fr auto auto 1fr, column-gap --s-6, row-gap --s-3;
   - right column = the Google Ads logo card's own width (padding --s-3/--s-4 around a 5.06:1 mark at
     clamp(30px, 2.7vw, 42px) tall), so the quote's column is the same width on both pages. Valley Center's mark is
     white artwork, so the card keeps its box and padding but no white fill; the logo sits left in it.
   Under 900px the Google Ads stacked version applies too (card and caption under the quote, left). */
/* 🔴 `grid-template-rows` MUST BE RESET HERE. The earlier `.hp-cquote__fig` rule still sets
   `1fr auto auto 1fr` — two spacer tracks either side of the content, from when this was a two-column
   quote whose block spanned `1 / -1` and centred itself. Left in place under the new single-column
   layout those 1fr tracks ate the slack and stood the figure up at 874px against ~620px of content:
   ~425px of empty indigo under the logo. Setting the columns without the rows is the trap. */
/* ============ 5. WHO WE'RE FOR — THE APPROACH TABS =============================================
   🔁 9/17, Alie (Feedbucket 987552) + Brees: rebuilt from the "Smart Intake line" rail to the tabs device from
   /products/websites/. Three labels and ONE panel, so the section is one card tall instead of three stacked
   blocks — which is the "makes you scroll for a long time" half of her note.
   🔴 THIS IS A DELIBERATE SECOND COPY of the .wtabs rules that live in websites.css (from ~"THE DIGITAL EMPATHY
   APPROACH AS TABS (concept 8B)"). The BEHAVIOUR is not duplicated — both pages run the same
   assets/js/approach-tabs.js — but the styling is, because that sheet's copy is interleaved with .wsite-approach
   rules and two later override blocks (the 9/16 icon/size pass and the left-right flip), so lifting it out would
   have risked a shipped page to remove a duplicate. If either copy is edited, check the other.
   ⚠️ Scoped to .page-home so it cannot reach anything else; the homepage does not load websites.css at all.
   Contrast, same as there: white on indigo 8.09 · ink on lime 8.95 · ink on white 13.3. */
.page-home .hp-who { background-color: var(--indigo); color: var(--oat); }
.page-home .hp-who__head { margin: 0 0 var(--s-5); max-width: 12ch; color: var(--white); }
.page-home .wtabs { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .page-home .wtabs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-6); align-items: stretch; }
}
.page-home .wtabs__list { display: grid; gap: 12px; }
.page-home .wtabs__tab {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 64px;
  padding: 14px 26px 14px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background-color: rgb(243 238 232 / 0.08);
  color: var(--white);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.page-home .wtabs__tab:hover { background-color: rgb(243 238 232 / 0.16); }
.page-home .wtabs__tab:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.page-home .wtabs__tab[aria-selected="true"] { background-color: var(--lime); color: var(--ink); }
/* 🔁 9/17 (987597) — icons, not numerals, matching /products/websites/. Kept in step with that page's copy of
   these rules; if one moves, move both. `currentColor` on the tab icon is what makes it legible in BOTH states,
   which the coloured numeral was not: on the selected lime tab it was lime on lime. */
.page-home .wtabs__tab-ic { flex: none; display: block; width: 24px; height: 24px; }
.page-home .wtabs__tab-ic svg { display: block; width: 100%; height: 100%; }
.page-home .wtabs__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: clamp(48px, 4.2vw, 60px);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background-color: var(--disc, var(--lime));
  color: var(--ink);
}
.page-home .wtabs__ic svg { width: 56%; height: 56%; }

.page-home .wtabs__panels { display: grid; }
.page-home .wtabs__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 40px;
  background-color: var(--white);
  color: var(--ink);
}
.page-home .wtabs__panel:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
/* One cell, the unchosen kept for height so the panel never jumps between tabs. `.is-armed` is added by
   approach-tabs.js — without the script every panel stays visible and stacked, which is the no-JS fallback. */
.page-home .wtabs.is-armed .wtabs__panel[hidden] { display: flex; visibility: hidden; }
.page-home .wtabs:not(.is-armed) .wtabs__panels { gap: var(--s-3); }
.page-home .wtabs:not(.is-armed) .wtabs__panel { grid-area: auto; }
.page-home .wtabs:not(.is-armed) .wtabs__panel[hidden] { display: flex; }
/* ⏹ `.wtabs__num` retired with the numerals (987597). */
/* Altivo, not the display face, and the title is a LINK here where the Websites panel's is plain text. */
.page-home .hw-title { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.25; }
.page-home .hw-title a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.page-home .hw-title a:hover { text-decoration-thickness: 3px; }
.page-home .hw-title a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* The panel body is a CLIENT QUOTE here, not explanatory copy — italic, with the attribution under it. */
.page-home .hw-quote { margin: 0; max-width: 52ch; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.7; font-style: italic; }
.page-home .hw-by { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); font-style: normal; }
@keyframes hw-tabs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-home .wtabs__panel.is-lit > * { animation: hw-tabs-in 0.45s var(--ease-out) both; }
.page-home .wtabs__panel.is-lit > :nth-child(2) { animation-delay: 70ms; }
.page-home .wtabs__panel.is-lit > :nth-child(3) { animation-delay: 140ms; }
.page-home .wtabs__panel.is-lit > :nth-child(4) { animation-delay: 210ms; }
@media (max-width: 899px) {
  .page-home .hp-who__head { margin-bottom: var(--s-4); max-width: none; }
  .page-home .wtabs__panel { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .wtabs__tab { transition: none; }
  .page-home .wtabs__panel.is-lit > * { animation: none; }
}

/* ============ 6 + 6b. THE TWO PULL QUOTES — ONE DEVICE, DEFINED ONCE ============
   🔁 9/17, Brees: "the Southard quote should be styled the way we've been doing pull quotes." An earlier pass
   today moved it to the Google Ads STATEMENT treatment (centred, 60px, lime band) to keep it distinct from the
   Daughtry quote that Feedbucket 987544 promoted out of the pinned hero. That is reversed here: BOTH quotes are
   the house pull quote, and the page carries the device twice on purpose.
   📌 THE DEVICE, and it is the same one on Google Ads, Launching, Strategy Session and Technology:
     type    clamp(1.375rem, 2.9vw, 2.25rem) / 1.32 — the halves INLINE, white then a lime turn
     grid    minmax(0, 1fr) auto · rows 1fr auto auto 1fr · column-gap --s-6 · row-gap --s-3
     column  calc(2 * var(--s-4) + 5.06 * clamp(30px, 2.7vw, 42px)) — sized off a 5.06:1 client mark
     order   NAME AND ROLE ABOVE, LOGO BENEATH (Brees 9/16, every big quote on the site)
   🔴 Both quotes share these selectors deliberately. They were two separate copies of the same measurements for
   about an hour today and the second one was already wrong — it shipped with the logo above the name because it
   was copied from Google Ads, which is the one page that does it the other way. One rule, one place. */
.hp-cquote__fig,
.hp-dquote__fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  min-height: 0;
}
.hp-cquote__block,
.hp-dquote__block { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
.hp-cquote__text,
.hp-dquote__text {
  margin: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(1.375rem, 2.9vw, 2.25rem);
  font-weight: 400;
  line-height: 1.32;
}
/* The turn is lime TEXT (5.77:1 on indigo), not a lime band. The band belongs to the statement device on Google
   Ads, which is ink on white — on indigo its ink glyphs would need a full-height band to stay legible at all. */
.hp-cquote__turn,
.hp-dquote__turn { color: var(--lime); }
/* 🔁 Southard keeps the second sentence on its own line — Brees 9/16 ("have 'I trust them implicitly.' be on its
   own line") and 9/17 ("add another break between the sentences"). Daughtry's turn runs inline; its quote is one
   sentence. 🔴 The gap must be set on this compound selector: a plain `.hp-cquote__turn` rule loses to the
   grouped `margin: 0` above and paints nothing. */
.hp-cquote .hp-cquote__lead { display: block; margin: 0 0 1.25em; }
.hp-cquote .hp-cquote__turn { display: block; }
/* Attribution above, logo below — rows 2 and 3, and the markup is in that order too so the stacked layout under
   900px keeps it without a second rule. */
.hp-cquote__by,
.hp-dquote__by { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--fs-small); }
.hp-cquote__name,
.hp-dquote__name { color: var(--white); font-weight: 600; }
/* --oat-75, the same grey as Google Ads' practice line — 4.77:1 on plain indigo.
   ⚠️ 9/15, still true for SOUTHARD only: over the faint petal circle on that section this computes 3.76:1 and
   FAILS. Measured clear at 1920 (167px), never measured under 900px where the caption drops nearer the circle.
   Check there before shipping and go back to var(--oat) if they touch. The Daughtry section has no circle. */
.hp-cquote__role,
.hp-dquote__role { color: var(--oat-75); }
.hp-cquote__card,
.hp-dquote__card {
  box-sizing: border-box;
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  width: calc(2 * var(--s-4) + 5.06 * clamp(30px, 2.7vw, 42px));
  padding: var(--s-3) 0;
  background: none;
}
/* Both marks are WHITE artwork, so they sit straight on the indigo with no white card — Google Ads needs one
   only because its copy of the State of the Heart mark is the dark version. */
.hp-dquote__logo { display: block; width: calc(5.06 * clamp(30px, 2.7vw, 42px)); max-width: 297px; height: auto; }
/* Valley Center's mark is near-square (206x223), not a 5.06:1 strip, so it is sized by HEIGHT — the same reason
   the Great Lakes badge is capped by width on the Technology page. */
.hp-cquote__logo { display: block; width: auto; height: clamp(64px, 5.4vw, 84px); }
@media (max-width: 899px) {
  .hp-cquote__fig,
  .hp-dquote__fig { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .hp-cquote__block, .hp-cquote__by, .hp-cquote__card,
  .hp-dquote__block, .hp-dquote__by, .hp-dquote__card { grid-column: 1; grid-row: auto; justify-self: start; }
  .hp-cquote__card, .hp-dquote__card { width: auto; padding: var(--s-2) 0; }
}

/* ============ 6. THE SOUTHARD QUOTE = THE GOOGLE ADS STATEMENT (Brees 9/18, Alie 987556) ============
   🔁 "let's change it so that it looks like the quote on the Google Ads page... I misunderstood the edit. You did it
   correctly the first time." Alie's note named the "You can't outspend..." line. Markup + why: CQUOTE in
   _preview/home-scrub/build.py. Ported from google-ads.css .gads-statement / __turn / .gads-word, renamed .hp-stmt*
   because that sheet is not loaded here. The section keeps `.hp-cquote` for the CORNER CHAIN only (pull-up,
   top-left radius, pad-out); every look rule of the old indigo pull quote is overridden below.
   Ground: --sky-soft, as on Google Ads. The page reads indigo "Made for" → sky-soft statement → white FAQ, so no
   two neighbours share a ground. Contrast: ink on sky-soft 12.3:1 · ink on the lime band 8.95:1 · the lime band is
   decorative (the sentence reads without it) · ink-muted role line 5.3:1. */
.page-home .hp-stmt {
  background-color: var(--sky-soft);
  color: var(--ink);
  text-align: center;
}
.page-home .hp-stmt::before { content: none; }
.hp-stmt__fig { margin: 0; }
.hp-stmt__block { margin: 0; }
.hp-stmt__text {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2rem, 4.8vw, 3.75rem);
  line-height: 1.12;
  font-weight: 700;
  color: var(--ink);
  perspective: 700px;   /* the words' rotateX needs depth on the PARENT, or it reads as a flat squash */
}
@media (min-width: 900px) { .hp-stmt__text { max-width: 20ch; } }
/* The highlighter: an inset box-shadow on the inline span (NOT a gradient — gated), cloned per wrapped line,
   rising in once the words have landed. With JS off or reduced motion it is simply there. */
.hp-stmt__turn {
  color: var(--ink);
  padding: 0 0.06em;
  box-shadow: inset 0 -0.64em 0 var(--lime);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html[data-js="on"] .hp-stmt__text .hp-stmt__turn {
  box-shadow: inset 0 0 0 var(--lime);
  transition: box-shadow 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1.9s;
}
html[data-js="on"] .hp-stmt__text.is-in .hp-stmt__turn { box-shadow: inset 0 -0.64em 0 var(--lime); }
/* The word-by-word entrance, exactly the Google Ads one (stagger, lift, scale, tilt) — and, as there, WITHOUT the
   reference component's softening effect, which the brand's flat-fill rule forbids. Declarative, scoped to
   html[data-js="on"], so with JS off nothing is ever left hidden. */
html[data-js="on"] .hp-stmt__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(var(--w-scale, 0.92)) rotateX(-15deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    opacity   var(--w-dur, 2.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--w-delay, 0s),
    transform var(--w-dur, 2.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--w-delay, 0s);
}
html[data-js="on"] .hp-stmt__text.is-in .hp-stmt__word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .hp-stmt__word { opacity: 1; transform: none; transition: none; }
  html[data-js="on"] .hp-stmt__text .hp-stmt__turn { box-shadow: inset 0 -0.64em 0 var(--lime); transition: none; }
}
/* Attribution centred under the line: name and role above, the practice mark beneath (the 9/16 order). */
.hp-stmt__by {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: var(--s-5) 0 0;
  font-size: var(--fs-small);
}
.hp-stmt__name { color: var(--ink); font-weight: 600; }
.hp-stmt__role { color: var(--ink-muted); }
.hp-stmt__card { margin-top: var(--s-3); }
.hp-stmt__logo { display: block; width: auto; height: clamp(64px, 5.4vw, 84px); margin: 0 auto; }

/* ================================================================ 7. FAQ */
/* A short petal rule ABOVE the quote, not a coloured left border (house
   style: no left-border accents). */
.page-home .faq__quote { margin: 0 0 var(--s-3); padding-top: var(--s-2); }
.page-home .faq__quote::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: var(--s-2);
  border-radius: 2px;
  background-color: var(--petal-deep);
}
.page-home .faq__quote blockquote { margin: 0; }
.page-home .faq__quote p { margin: 0; font-style: italic; }
.page-home .faq__quote figcaption { margin-top: 4px; color: var(--ink-muted); font-size: var(--fs-small); }

/* ============================================================= motion */
@media (prefers-reduced-motion: reduce) {
  .hp-card { transition: none; }
  .hp-card:hover { transform: none; }
}

/* 9/16 (later) — LOGO UNDER THE NAME. Brees: "on all the quotes - i think the logo would look better under the
   name/title instead of on top." Applies to the four big quotes (homepage, Google Ads, Strategy Session, Launching),
   his scope. Desktop swaps the two grid rows; stacked, `order` does the same (grid-row is auto there). */
.hp-cquote .hp-cquote__by   { grid-row: 2; }
.hp-cquote .hp-cquote__card { grid-row: 3; }
@media (max-width: 899px) {
  .hp-cquote .hp-cquote__by   { grid-row: auto; order: 2; }
  .hp-cquote .hp-cquote__card { grid-row: auto; order: 3; }
}

/* 🔁 9/16 (later) — THE JOURNEY RAIL (concept 7A) IS REMOVED. Brees: "home - service section, I want to go back to the
   white columns that were there right before the current design." The .hp-cards / .hp-card rules above are live again;
   the .hp-rail block and assets/js/home-rail.js's script tag are gone (the JS file stays on disk, unloaded). */

/* CLOSING PANEL SUB - ONE SENTENCE PER LINE (Jess, Feedbucket 989005, 9/18: "I'd prefer the bottom two sentences to
   either have the first sentence on top or for the line to break so the two sentences are even" - at 1280 it broke
   after "45"). Each sentence is its own line; below 600px the second may still wrap, but it wraps under itself. */
.home-cta__line { display: block; }