/* ============================================================
   Cowell & Co. signature skin, v2 (2026-09-03)
   Loads after cowell-co.css on every page. Additive, not
   subtractive: the warm palette, layered depth, hover lift,
   living-light layers, hero canvas and photography all stay.
   What changes is the voice: Bodoni Moda display over Archivo
   text, a brass-and-marigold accent pair, rule-headed sections,
   chamfered geometry, and none of the template chrome (dash
   eyebrows, tracked caps, middle dots, check-icon lists, pill
   badges, arrow buttons, float stat cards, sparkle icons).
   Remove this one <link> and the page reverts.
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/bodoni-moda-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/bodoni-moda-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-italic-latin.woff2") format("woff2");
}

/* ---------- tokens: warm, vivid, off the Tailwind grid ---------- */
:root {
  --cream: #fdf7f2;
  --cream-deep: #f8ebe0;
  --orange: #f0561a;
  --orange-deep: #c1410c;
  --orange-bright: #ff7a3c;
  --yellow: #f6b73c;
  --yellow-soft: #fdefcf;
  --brass: #c49a4c;
  --ink: #1b1512;
  --ink-soft: #46403a;
  --graphite: #6b655e;
  --sand: #c8c0b6;
  --line: #eee4da;
  --noir: #1b1512;

  --font-serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.9rem, 4.6vw + 1rem, 5.2rem);
  --fs-h1: clamp(2.4rem, 4.2vw + 0.6rem, 4.3rem);
  --fs-h2: clamp(2rem, 3vw + 0.6rem, 3.3rem);
  --fs-h3: clamp(1.2rem, 1vw + 0.7rem, 1.45rem);

  /* geometry: one owned radius family, no pills */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 6px;

  --shadow-orange: 0 12px 30px -8px rgba(240,86,26,0.45);
  --shadow-orange-sm: 0 8px 20px -6px rgba(240,86,26,0.42);
}

/* ---------- base type ---------- */
body { font-family: var(--font-sans); font-feature-settings: "kern"; }
::selection { background: var(--orange); color: var(--white); }
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.04;
  font-optical-sizing: auto;
}
h3, h4 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
p { font-family: var(--font-sans); }
p.tiers-note, p.review__quote, p.founder-portrait__quote, p.contact__note { font-family: var(--font-serif); }
a { text-decoration-thickness: 1.5px; text-underline-offset: 0.14em; }
.tier__price, .hero__stat-num, .give-stat__num, .cgap__total, .calc__result-value,
.industry__kpi strong, .pstat__value, .proof__num, .reviewwall__score {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- the one signature: rule-headed sections ---------- */
.eyebrow {
  display: block;
  width: 100%;
  max-width: 60ch;
  font-family: var(--font-sans);
  font-stretch: 115%;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--orange-deep);
  border-top: 3px solid var(--orange);
  padding-top: 0.7rem;
  margin-bottom: var(--sp-md);
  gap: 0;
}
.eyebrow::before { content: none; }
.section--dark .eyebrow { color: var(--yellow); border-top-color: var(--yellow); }
.cta-band .eyebrow { color: var(--white); border-top-color: var(--yellow); max-width: 100%; }
.hero__badge {
  display: block;
  max-width: 34ch;
  background: none;
  border: 0;
  border-top: 3px solid var(--orange);
  border-radius: 0;
  padding: 0.7rem 0 0;
  margin-bottom: var(--sp-md);
  font-stretch: 115%;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--orange-deep);
}
.hero__badge .dot { display: none; }

/* every other small label: wide, bold, sentence case, no tracking */
.crumbs, .tier__flag, .tier__divider, .hero__name-cred, .hero__float-label, .office__eyebrow,
.demo-card__eyebrow, .range-band__eyebrow, .portal-eyebrow, .ctx__label, .cgap__tag, .cgap__leg,
.field label, .seasonal__text, .footer__col h2, .reviewwall__src, .give-stat__label, .industry__pos,
.related__day, .qcard__day, .footer__pos, .answer__bottomline-label, .legal__updated, .trust-card__title,
.copt__label, .calc__result-label, .calc__result-top, .answer__tag, .cgap__total-label {
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.crumbs { font-weight: 500; font-size: 0.88rem; color: var(--graphite); }
.crumbs a { color: var(--ink); }
.industry__pos { font-weight: 400; font-stretch: 100%; }
.field label { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- headline: keep the marker gesture, lose the colour-word ---------- */
.accent { color: inherit; }
.markline::after { background: var(--yellow); height: 0.42em; opacity: 0.85; }
.hero h1, .hero-alt-h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display); letter-spacing: 0; line-height: 1.02; max-width: 13ch; }
.hero__sub { font-size: 1.15rem; line-height: 1.55; max-width: 44ch; }

/* ---------- buttons: solid, lifted, no arrow ---------- */
.btn { font-weight: 600; font-stretch: 105%; font-size: 0.95rem; border-radius: var(--r-sm); padding: 0.95rem 1.6rem; }
.btn .icon { display: none; }
.btn--primary { background: var(--orange); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange-deep); }

/* ---------- header ---------- */
.site-header { border-bottom: 2px solid var(--ink); }
.brand__name { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0; font-size: 1.35rem; }
.brand__tag { font-stretch: 112%; font-weight: 600; letter-spacing: 0.12em; }
.nav__links a { font-weight: 500; font-size: 0.95rem; }
.nav__links a::after { height: 3px; border-radius: 0; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-header .btn { padding: 0.8rem 1.25rem; }

/* ---------- cards: depth stays, geometry becomes ours ---------- */
.card {
  border-top: 3px solid var(--ink);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card:hover { border-top-color: var(--orange); }
.tier--featured { border-top-color: var(--yellow); }
.tier__flag { border-radius: var(--r-xs); font-size: 0.8rem; padding: 4px 10px; color: var(--ink); background: var(--yellow-soft); }
.tier--featured .tier__flag { background: var(--yellow); color: var(--ink); }
.tier__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.7rem; letter-spacing: 0; }
.tier__price { font-family: var(--font-serif); font-weight: 600; font-size: 3rem; letter-spacing: 0; }
.tier__divider { font-size: 0.82rem; }
.tier__outcome { font-family: var(--font-sans); font-style: italic; }
.tiers-note { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.4rem, 1.4vw + 0.8rem, 1.9rem); line-height: 1.3; }
.ctx { border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0; }
.ctx::before { background: var(--orange); height: 4px; }
.ctx__tag { border-radius: var(--r-xs); }
.ctx__name { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }
.office__card, .copt, .faq__item, .calc { border-top: 3px solid var(--ink); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.copt--primary { border-top-color: var(--yellow); }
.faq__item[open] { border-top-color: var(--orange); }
.calc { border-top-color: var(--orange); }
.calc__step { display: none; }
.industry__icon, .office__icon, .copt__icon, .calc__icon, .faq__icon, .hero__float-icon { border-radius: var(--r-sm); }
.demo-card, .reviewwall, .reviewwall__badge, .step, .related__card, .qcard, .trust-card, .give-stat, .mobile-nav__panel { border-radius: var(--r-md); }
.reviewwall__badge { border-top: 3px solid var(--orange); border-radius: 0 0 var(--r-md) var(--r-md); }
.reviewwall__src .icon { display: none; }
.reviewwall__score, .reviewwall__title, .give-stat__num, .calc__result-value { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }
.review__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.35; }
.founder-portrait__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.byline { font-family: var(--font-sans); }
.qcard__more .icon, .answer__bottomline-label .icon { display: none; }
.founder__entity, .founder__body p:first-of-type, .give-prose p:first-of-type { font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.55; color: var(--ink); font-weight: 400; }
.founder__body h2, .founder__grid h2, .give-prose h2 { font-size: clamp(1.7rem, 1.8vw + 0.7rem, 2.4rem); line-height: 1.1; }

/* lists: square ledger bullets instead of check icons */
.tier__list .icon, .trust__list .icon, .hero__trust-item .icon, .trust__col h3 .icon { display: none; }
.tier__list li::before, .trust__list li::before, .hero__trust-item::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 0.55em;
  background: var(--orange);
}
.hero__trust-item::before { margin-top: 0; }
.tier--featured .tier__list li::before { background: var(--yellow); }

/* ---------- media: photos keep their frames and shadows, corners tighten ---------- */
.media, .portrait, .skyline-band, .media--band, .founder-portrait__media, .give-figure__frame, .ctx__photo, .office__map { border-radius: var(--r-md); }
.pagehead__wm { opacity: 0.26; }
@media (min-width: 920px) { .pagehead__wm { opacity: 0.3; } }
.ph-motif rect { rx: 4; ry: 4; }
.ph-motif [fill="#fbbf24"] { fill: var(--yellow); }
.ph-motif [fill="#ea580c"], .ph-motif [fill="#fb7a35"] { fill: var(--orange); }
.ph-motif [stroke="#ea580c"] { stroke: var(--orange); }

/* ---------- hero: float cards become a lifted ledger strip ---------- */
.hero { padding-block: var(--sp-xl) var(--sp-xl); }
.hero__grid { align-items: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.12fr 1fr; gap: var(--sp-xl); }
  .hero__media { order: 2; max-width: none; }
}
.hero__media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }
.hero__composite { grid-column: 1 / -1; }
.portrait--hero { width: 76%; }
.hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap {
  position: relative;
  inset: auto;
  transform: none;
  margin: -22px 0 0;
  z-index: 3;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-right: 0;
  border-radius: 0;
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.15rem;
  animation: none;
}
.hero__float--name { border-top-color: var(--orange); border-radius: 0 0 0 var(--r-md); }
.hero__float--cap { border-right: 1px solid var(--line); border-radius: 0 0 var(--r-md) 0; }
.hero__float-icon { display: none; }
.hero__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; letter-spacing: 0; }
.hero__name-cred, .hero__float-label { font-size: 0.82rem; color: var(--graphite); }
.hero__float--name .hero__name-cred { order: 2; }
.hero__stat-num { font-family: var(--font-serif); font-weight: 600; font-size: 2.1rem; line-height: 1; letter-spacing: 0; color: var(--ink); }
.hero__stat-note { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.35; max-width: none; }
.hero__float-value { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; }
@media (max-width: 640px) {
  .hero__media { grid-template-columns: 1fr 1fr; }
  .hero__composite, .hero__float--name { grid-column: 1 / -1; }
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { margin: 0; width: auto; border-radius: 0; border-right: 0; }
  .hero__float--name { margin-top: -22px; border-right: 1px solid var(--line); }
  .hero__float--cap { border-right: 1px solid var(--line); }
  .hero__float--stat { border-right: 1px solid var(--line); }
}

/* ---------- dark chart, capacity, closing band, footer ---------- */
.cgap__line--strat { stroke: var(--orange); }
.cg-dot--strat { fill: var(--yellow); }
.cgap__total { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; text-shadow: none; }
.capacity__pulse { border-radius: 2px; }
.capacity__pulse::after { border-radius: 2px; }
.capacity__inner p { flex: 1 1 0; min-width: 16rem; }
.cta-band { text-align: left; }
.cta-band .wrap { align-items: flex-start; }
.cta-band h2 { max-width: 20ch; }
.cta-band__actions { justify-content: flex-start; }
.footer__col h2 { font-family: var(--font-sans); font-size: 0.88rem; color: var(--sand); }
.contact__options { margin-top: var(--sp-lg); }
.scroll-progress { height: 4px; }

/* marker sits behind the lower half of the word, not under the line */
.markline::after { bottom: 0.16em; height: 0.4em; }
.hero h1, .hero-alt-h1 { line-height: 1.06; }
.hero__name { font-size: 1.15rem; }
.demo-card__cta .icon, .qcard__more .icon, .related__more .icon { display: none; }

/* Bodoni descender box is deep, lift the marker into the x-height */
.markline::after { bottom: 0.34em; height: 0.36em; }

/* ============================================================
   Ambient hero footage on the sub-page headers (2026-09-03).
   Poster <img> under the <video> inside one wrapper, so the still is
   only the loading ground and never a ghost frame. The scrim is
   localized to the text column; the right two thirds breathe.
   ============================================================ */
.pagehead.pagehead--video {
  position: relative;
  overflow: hidden;
  background: var(--noir);
  color: var(--white);
  min-height: min(68vh, 680px);
  display: flex;
  align-items: center;
  padding-block: var(--sp-2xl);
}
.pagehead.pagehead--video.pagehead--quiet { min-height: min(46vh, 440px); padding-block: var(--sp-xl); }
.pagehead--video > .wrap { position: relative; z-index: 2; width: 100%; }
.pagehead__video { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pagehead__video img, .pagehead__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pagehead__video video { opacity: 0; transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1); }
.pagehead__video video.is-ready { opacity: 1; }
.pagehead__video::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(27,21,18,0.88) 0%, rgba(27,21,18,0.72) 30%, rgba(27,21,18,0.30) 56%, rgba(27,21,18,0.04) 76%, rgba(27,21,18,0) 100%),
    linear-gradient(180deg, rgba(27,21,18,0.28) 0%, rgba(27,21,18,0) 30%, rgba(27,21,18,0) 70%, rgba(27,21,18,0.34) 100%);
}
.pagehead--quiet .pagehead__video::after {
  background:
    linear-gradient(100deg, rgba(27,21,18,0.90) 0%, rgba(27,21,18,0.78) 40%, rgba(27,21,18,0.42) 70%, rgba(27,21,18,0.18) 100%);
}
/* the aurora and ledger-grid layers sit under the footage here */
.pagehead--video::before, .pagehead--video::after { z-index: 0; opacity: 0.5; }
.pagehead--video { background-image: none; }
.pagehead--video h1, .pagehead--video .crumbs, .pagehead--video .crumbs a, .pagehead--video .answer__tag {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.35);
}
.pagehead--video .pagehead__sub { color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.3); }
.pagehead--video .crumbs span { color: rgba(255,255,255,0.6); }
.pagehead--video .crumbs a:hover { color: var(--yellow); }
.pagehead--video .answer__tag { color: var(--yellow); }
/* the self-drawing motifs stay in their column, now in front of the footage */
.pagehead--video .pagehead__art, .pagehead--video .answer-head__art { position: relative; z-index: 3; }
.pagehead--video .ph-shadow { filter: drop-shadow(0 18px 34px rgba(0,0,0,0.45)); }
.pagehead--video .ph-motif, .pagehead--video .ans-doc { filter: drop-shadow(0 10px 28px rgba(0,0,0,0.35)); }
.pagehead--video .pagehead__text, .pagehead--video .answer-head__text { max-width: 60ch; }
.pagehead--video .pagehead__media { box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.14); }
.pagehead--video .pagehead__wm { display: none; }
@media (max-width: 759px) {
  .pagehead.pagehead--video { min-height: 0; }
  .pagehead__video::after {
    background: linear-gradient(180deg, rgba(27,21,18,0.80) 0%, rgba(27,21,18,0.66) 55%, rgba(27,21,18,0.40) 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .pagehead__video video { display: none; } }

/* ---------- ledger grid over the hero footage (2026-09-03) ----------
   A static 48px ledger grid with a heavier rule every fifth line sits
   above the footage and the scrim, and the cursor-lit grid that follows
   the pointer is brighter here than on the paper sections. */
.pagehead__video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,238,220,0.16) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,238,220,0.16) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 239px, rgba(255,238,220,0.26) 239px 240px),
    repeating-linear-gradient(90deg, transparent 0 239px, rgba(255,238,220,0.26) 239px 240px);
}
.pagehead__video::after { z-index: 1; }
.pagehead.pagehead--video { --cgrid-line: rgba(255,206,120,0.85); }
.pagehead--video .cursor-grid { z-index: 1; }

/* ---------- watermark treatment on the footage (2026-09-03) ----------
   The loop and its poster sit back like a watermarked photograph: part
   transparent over the ink ground, slightly desaturated, so the headline,
   the motif and the ledger grid read as the foreground. */
.pagehead--video { --footage-opacity: 0.58; }
.pagehead__video img { opacity: var(--footage-opacity); filter: saturate(0.72) contrast(0.94) brightness(0.92); }
.pagehead__video video { filter: saturate(0.72) contrast(0.94) brightness(0.92); }
.pagehead__video video.is-ready { opacity: var(--footage-opacity); }
.pagehead__video::after {
  background:
    linear-gradient(100deg, rgba(27,21,18,0.72) 0%, rgba(27,21,18,0.52) 30%, rgba(27,21,18,0.16) 56%, rgba(27,21,18,0) 76%),
    linear-gradient(180deg, rgba(27,21,18,0.16) 0%, rgba(27,21,18,0) 30%, rgba(27,21,18,0) 70%, rgba(27,21,18,0.22) 100%);
}
.pagehead--quiet .pagehead__video::after {
  background: linear-gradient(100deg, rgba(27,21,18,0.76) 0%, rgba(27,21,18,0.58) 40%, rgba(27,21,18,0.28) 70%, rgba(27,21,18,0.10) 100%);
}

/* ---------- footage as a warm watermark on the cream ground (2026-09-03) ----------
   Joshua's direction: treat the loops the way the original watermark photos
   were treated. Cream ground, ink text, the footage low-opacity and warm,
   masked clear of the headline column and fading in from the right, with the
   aurora light and the ledger grid over it for the colour play. */
.pagehead.pagehead--video, .pagehead.pagehead--video.pagehead--quiet {
  background: var(--cream);
  color: var(--ink);
}
.pagehead--video::before, .pagehead--video::after { opacity: 1; }
.pagehead--video h1, .pagehead--video .crumbs, .pagehead--video .crumbs a, .pagehead--video .answer__tag {
  color: var(--ink);
  text-shadow: none;
}
.pagehead--video .crumbs { color: var(--graphite); }
.pagehead--video .crumbs span { color: var(--graphite); }
.pagehead--video .crumbs a:hover { color: var(--orange-deep); }
.pagehead--video .pagehead__sub { color: var(--ink-soft); text-shadow: none; }
.pagehead--video .answer__tag { color: var(--orange-deep); }
.pagehead--video .pagehead__media { border: 0; box-shadow: var(--shadow-lg); }

.pagehead--video { --footage-opacity: 0.4; }
.pagehead__video {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 14%, rgba(0,0,0,0.55) 48%, #000 80%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 14%, rgba(0,0,0,0.55) 48%, #000 80%);
}
.pagehead__video img, .pagehead__video video { filter: sepia(0.22) saturate(0.95) contrast(0.96) brightness(1.04); }
.pagehead__video img { opacity: var(--footage-opacity); }
.pagehead__video video.is-ready { opacity: var(--footage-opacity); }
.pagehead__video::after, .pagehead--quiet .pagehead__video::after { background: none; }
.pagehead__video::before {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(120,92,68,0.16) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(120,92,68,0.16) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 239px, rgba(120,92,68,0.24) 239px 240px),
    repeating-linear-gradient(90deg, transparent 0 239px, rgba(120,92,68,0.24) 239px 240px);
}
.pagehead.pagehead--video { --cgrid-line: rgba(234,88,12,0.55); }
.pagehead--video .ph-shadow { filter: drop-shadow(0 16px 26px rgba(27,19,11,0.18)); }
.pagehead--video .ph-motif, .pagehead--video .ans-doc { filter: none; }
@media (max-width: 759px) {
  .pagehead--video { --footage-opacity: 0.26; }
  .pagehead__video {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 40%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 40%, #000 100%);
  }
}

/* ---------- no ghost frame, crisper footage, quieter grid (2026-09-03) ----------
   The poster fades out the moment the video is on screen, so the still
   never shows through the moving frames. Footage is a touch stronger and
   un-tinted so it reads clean, and the ledger grid steps back. */
.pagehead__video img { transition: opacity 0.6s ease; }
.pagehead__video.is-playing img, .pagehead__video:has(video.is-ready) img { opacity: 0; }
.pagehead--video { --footage-opacity: 0.5; }
.pagehead__video img, .pagehead__video video { filter: saturate(0.92) contrast(1.02) brightness(1.02); }
.pagehead__video::before {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(120,92,68,0.085) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(120,92,68,0.085) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 239px, rgba(120,92,68,0.14) 239px 240px),
    repeating-linear-gradient(90deg, transparent 0 239px, rgba(120,92,68,0.14) 239px 240px);
}
.pagehead.pagehead--video { --cgrid-line: rgba(234,88,12,0.42); }
@media (max-width: 759px) { .pagehead--video { --footage-opacity: 0.32; } }

/* ---------- real headshots in the portal and admin avatars (2026-09-03) ---------- */
.user-menu-trigger__avatar, .user-menu__avatar, .pmsg__avatar, .pthread-item__avatar, .pavatar { overflow: hidden; padding: 0; }
.avatar-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: inherit;
  display: block;
}
/* the ledger seal ring stays as a frame around the photo */
.user-menu-trigger__avatar:has(.avatar-photo), .user-menu__avatar:has(.avatar-photo), .pavatar:has(.avatar-photo), .pthread-item__avatar:has(.avatar-photo) {
  padding: 3px;
  background: var(--white);
}
.user-menu-trigger__avatar:has(.avatar-photo) .avatar-photo, .user-menu__avatar:has(.avatar-photo) .avatar-photo,
.pavatar:has(.avatar-photo) .avatar-photo, .pthread-item__avatar:has(.avatar-photo) .avatar-photo { border-radius: 50%; }

/* ---------- homepage Dallas panorama band as footage (2026-09-03) ----------
   Same footprint as the still it replaces (2200 x 510), full strength. */
.skyline-band .ambient-footage { position: relative; aspect-ratio: 2200 / 510; overflow: hidden; background: var(--cream-deep); }
.skyline-band .ambient-footage img, .skyline-band .ambient-footage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.skyline-band .ambient-footage video { opacity: 0; transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.skyline-band .ambient-footage video.is-ready { opacity: 1; }
.skyline-band .ambient-footage img { transition: opacity 0.6s ease; }
.skyline-band .ambient-footage.is-playing img, .skyline-band .ambient-footage:has(video.is-ready) img { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .skyline-band .ambient-footage video { display: none; } }

/* ---------- homepage hero back to its original arrangement (2026-09-03) ----------
   The two-column experiment left a blank quadrant and a five-line headline.
   The composite sits on top again, centered, and the headline runs full
   width beneath it as it originally did. The ledger strip stays. */
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .hero__media { order: -1; max-width: 940px; margin-inline: auto; }
}
.hero__grid { align-items: start; }
.hero h1, .hero-alt-h1 { max-width: 22ch; font-size: clamp(2.8rem, 4.2vw + 1rem, 5rem); line-height: 1.04; }
.hero__sub { max-width: 52ch; }
.hero__composite { margin-bottom: 0; }

/* ---------- hero fits the first screen (2026-09-03) ----------
   Smaller composite, a shallower ledger strip pulled further up over the
   photo, tighter gaps, so the headline is never buried below the fold. */
.hero { padding-block: var(--sp-md) var(--sp-xl); }
@media (min-width: 1000px) {
  .hero__grid { gap: var(--sp-md); }
  .hero__media { max-width: 760px; }
}
.hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { margin-top: -34px; padding: 0.6rem 0.9rem; gap: 0.1rem; }
.hero__name { font-size: 1.05rem; }
.hero__stat-num { font-size: 1.6rem; }
.hero__stat-note, .hero__name-cred, .hero__float-label { font-size: 0.78rem; }
.hero__float-value { font-size: 0.95rem; }
.hero__badge { margin-bottom: var(--sp-sm); padding-top: 0.5rem; max-width: 40ch; }
.hero h1, .hero-alt-h1 { font-size: clamp(2.5rem, 3.6vw + 0.8rem, 4.2rem); max-width: 24ch; }
.hero__sub { margin-top: var(--sp-sm); }
.hero__actions { margin-top: var(--sp-md); }
.hero__trust { margin-top: var(--sp-md); padding-top: var(--sp-md); }
@media (max-width: 640px) {
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { margin-top: 0; }
  .hero__float--name { margin-top: -22px; }
}

@media (min-width: 1000px) { .hero__media { max-width: 700px; } }

/* ---------- hero = one screen (2026-09-03, Joshua: everything in the hero) ----------
   Text column left (badge, headline, copy, actions, credentials), composite
   and ledger strip right, the whole section sized to the first viewport
   and vertically centered so nothing important sits below the fold. */
@media (min-width: 1000px) {
  .hero {
    min-height: calc(100svh - 80px);
    display: flex;
    align-items: center;
    padding-block: var(--sp-lg);
  }
  .hero > .wrap { width: 100%; }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-xl); align-items: center; }
  .hero__media { order: 2; max-width: none; margin: 0; }
  .hero h1, .hero-alt-h1 { font-size: clamp(2.4rem, 2.5vw + 0.9rem, 3.6rem); max-width: 17ch; line-height: 1.04; }
  .hero__sub { font-size: 1.05rem; line-height: 1.55; max-width: 46ch; }
  .hero__badge { margin-bottom: var(--sp-sm); }
  .hero__actions { margin-top: var(--sp-md); }
  .hero__trust { margin-top: var(--sp-md); padding-top: var(--sp-sm); gap: var(--sp-sm) var(--sp-md); }
  .portrait--hero { width: 80%; }
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { margin-top: -26px; padding: 0.6rem 0.8rem; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .hero h1, .hero-alt-h1 { font-size: clamp(2.2rem, 2.2vw + 0.8rem, 3rem); }
  .hero__sub { font-size: 0.98rem; }
  .hero__trust { display: none; }
}

/* ---------- the composite fills the hero's right column (2026-09-03) ---------- */
@media (min-width: 1000px) {
  .hero > .wrap { max-width: 1520px; }
  .hero__grid { grid-template-columns: 0.95fr 1.15fr; gap: var(--sp-2xl); }
  .portrait--hero { width: 88%; }
  .hero__founder { width: 46%; max-width: 460px; }
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { padding: 0.85rem 1.05rem; margin-top: -30px; }
  .hero__name { font-size: 1.2rem; }
  .hero__stat-num { font-size: 1.9rem; }
  .hero__stat-note, .hero__name-cred, .hero__float-label { font-size: 0.82rem; }
  .hero__float-value { font-size: 1.02rem; }
  .hero__text { max-width: 600px; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .portrait--hero { width: 80%; }
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { padding: 0.6rem 0.85rem; }
}

/* ---------- industries grid: equal rows, no hole (2026-09-03) ----------
   Five cards in three columns left ragged bottoms and an empty slot.
   Cards stretch to their row, the read-more sits on the same baseline,
   and the last two cards share the final row edge to edge. */
.industry { align-self: stretch; }
.industry .disclosure { margin-top: auto; }
@media (min-width: 880px) {
  .grid--3:has(> .industry) { grid-template-columns: repeat(6, 1fr); }
  .grid--3 > .industry { grid-column: span 2; }
  .grid--3 > .industry:nth-child(4):nth-last-child(2),
  .grid--3 > .industry:nth-child(5):last-child { grid-column: span 3; }
}

/* ---------- hero scales with the viewport (2026-09-03, "make it all larger, same placement") ---------- */
@media (min-width: 1000px) {
  .hero > .wrap { max-width: 1760px; }
  .hero__grid { gap: clamp(2.5rem, 5vw, 6rem); }
  .hero__text { max-width: none; }
  .hero__badge { font-size: clamp(0.88rem, 0.35vw + 0.55rem, 1.05rem); max-width: 44ch; }
  .hero h1, .hero-alt-h1 { font-size: clamp(2.4rem, 3.1vw + 0.6rem, 5rem); max-width: 16ch; line-height: 1.04; }
  .hero__sub { font-size: clamp(1rem, 0.6vw + 0.6rem, 1.4rem); max-width: 44ch; line-height: 1.5; }
  .hero .btn { font-size: clamp(0.95rem, 0.35vw + 0.6rem, 1.15rem); padding: clamp(0.95rem, 0.7vw + 0.4rem, 1.25rem) clamp(1.6rem, 1.2vw + 0.8rem, 2.2rem); }
  .hero__trust-item { font-size: clamp(0.9rem, 0.3vw + 0.6rem, 1.05rem); }
  .portrait--hero { width: 92%; }
  .hero__founder { width: 48%; max-width: 560px; }
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { padding: clamp(0.85rem, 0.8vw + 0.3rem, 1.3rem) clamp(1rem, 0.9vw + 0.4rem, 1.5rem); margin-top: -34px; }
  .hero__name { font-size: clamp(1.15rem, 0.5vw + 0.7rem, 1.5rem); }
  .hero__stat-num { font-size: clamp(1.8rem, 0.9vw + 1rem, 2.6rem); }
  .hero__stat-note, .hero__name-cred, .hero__float-label { font-size: clamp(0.8rem, 0.25vw + 0.6rem, 0.98rem); }
  .hero__float-value { font-size: clamp(1rem, 0.35vw + 0.7rem, 1.25rem); }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .hero h1, .hero-alt-h1 { font-size: clamp(2.2rem, 2.2vw + 0.8rem, 3rem); }
  .hero__sub { font-size: 0.98rem; }
  .portrait--hero { width: 80%; }
}

/* ---------- section rhythm: no dead space (2026-09-03) ----------
   Section padding stacked to 13rem between blocks and every section head
   was a narrow left column with nothing beside it. Padding steps down and
   the section head becomes a two-column editorial split on wide screens:
   rule and eyebrow across the top, heading left, intro copy right. */
:root { --max: 1400px; }
.section { padding-block: clamp(3.25rem, 4.5vw, 5rem); }
.section-head { margin-bottom: clamp(1.75rem, 2.5vw, 2.75rem); }
.section--demo .section-head, .cta-band .section-head { margin-bottom: clamp(1.75rem, 2.5vw, 2.75rem); }
@media (min-width: 1000px) {
  .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: end;
  }
  .section-head > .eyebrow { grid-column: 1 / -1; max-width: none; }
  .section-head > h2 { grid-column: 1; max-width: 18ch; }
  .section-head > p { grid-column: 2; margin-top: 0; max-width: 52ch; align-self: end; padding-bottom: 0.35em; }
  .section-head > h2:only-child, .section-head > .eyebrow + h2:last-child { grid-column: 1 / -1; max-width: 24ch; }
}
.disclosure { margin-top: clamp(1.25rem, 2vw, 2rem); }
.pagehead { padding-block: clamp(3rem, 4vw, 4.5rem); }

/* ---------- founder portrait: substance, not a floating line (2026-09-03) ----------
   The photo fills its column; the quote becomes a large Bodoni italic on a
   paper panel with an ink rule, a brass opening mark and the attribution
   set as a ledger line, so the right half reads as a piece, not a caption. */
@media (min-width: 860px) {
  .founder-portrait { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 4vw, 5rem); align-items: stretch; }
}
.founder-portrait__media img { border-radius: var(--r-md); }
.founder-portrait__aside {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 3vw, 3.25rem) clamp(1.75rem, 3.5vw, 3.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.founder-portrait__aside .eyebrow { border-top: 0; padding-top: 0; }
.founder-portrait__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.6vw + 0.7rem, 2.6rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
  margin-top: var(--sp-md);
  padding-left: 1.1em;
  position: relative;
}
.founder-portrait__quote::before {
  content: "\201C";
  position: absolute;
  left: -0.05em;
  top: -0.12em;
  font-size: 2.4em;
  line-height: 1;
  font-style: normal;
  color: var(--brass);
}
.founder-portrait__by {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--line);
  font-stretch: 112%;
  font-weight: 700;
  color: var(--orange-deep);
}

/* ---------- closing band: two columns, more presence (2026-09-03) ---------- */
.cta-band__bg { opacity: 0.4; }
.cta-band .wrap { padding-block: clamp(3.5rem, 6vw, 6rem); }
@media (min-width: 1000px) {
  .cta-band .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: center;
  }
  .cta-band .eyebrow { grid-column: 1 / -1; }
  .cta-band h2 { grid-column: 1; font-size: clamp(2.4rem, 2.6vw + 0.8rem, 4.2rem); max-width: 18ch; }
  .cta-band > .wrap > p { grid-column: 1; font-size: clamp(1.05rem, 0.5vw + 0.7rem, 1.35rem); max-width: 48ch; }
  .cta-band__actions { grid-column: 2; grid-row: 2 / span 2; justify-self: end; flex-direction: column; align-items: stretch; min-width: 280px; }
  .cta-band__actions .btn { justify-content: center; font-size: 1.05rem; padding: 1.1rem 1.8rem; }
}

/* ---------- hero composite: Michael stands beside the photo as on the live site, larger (2026-09-03) ---------- */
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 0.9fr 1.2fr; }
  .portrait--hero { width: 72%; }
  .hero__founder { width: 47%; max-width: none; left: 0; bottom: 0; }
  .hero__composite { padding-top: 6%; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .portrait--hero { width: 72%; }
  .hero__founder { width: 44%; }
}

/* ---------- hero composite +25% (2026-09-03) ---------- */
@media (min-width: 1000px) {
  .hero > .wrap { max-width: 1880px; }
  .hero__grid { grid-template-columns: 0.78fr 1.38fr; gap: clamp(2rem, 3vw, 3.5rem); }
  .hero__media { width: 106%; }
  .hero h1, .hero-alt-h1 { max-width: 14ch; }
}

@media (min-width: 1000px) and (max-width: 1399px) { .hero__media { width: 100%; } }

/* keep the enlarged composite inside the viewport: share comes from the column, not an overflow */
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 0.7fr 1.45fr; }
  .hero__media { width: 100%; }
}

/* ---------- composite: 7 percent smaller, sits a third higher (2026-09-03) ---------- */
@media (min-width: 1000px) {
  .hero__media { width: 93%; justify-self: end; transform: translateY(-14%); }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .hero__media { transform: translateY(-8%); }
}

/* ---------- card twice as high again, text column +10 percent (2026-09-03) ---------- */
@media (min-width: 1000px) {
  .hero__media { transform: translateY(-34%); }
  .hero__badge { font-size: clamp(0.97rem, 0.39vw + 0.6rem, 1.16rem); }
  .hero h1, .hero-alt-h1 { font-size: clamp(2.64rem, 3.41vw + 0.66rem, 5.5rem); }
  .hero__sub { font-size: clamp(1.1rem, 0.66vw + 0.66rem, 1.54rem); max-width: 44ch; }
  .hero .btn { font-size: clamp(1.05rem, 0.39vw + 0.66rem, 1.27rem); padding: clamp(1.05rem, 0.77vw + 0.44rem, 1.38rem) clamp(1.76rem, 1.32vw + 0.88rem, 2.42rem); }
  .hero__trust-item { font-size: clamp(0.99rem, 0.33vw + 0.66rem, 1.16rem); }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .hero__media { transform: translateY(-20%); }
  .hero h1, .hero-alt-h1 { font-size: clamp(2.2rem, 2.2vw + 0.8rem, 3rem); }
  .hero__sub { font-size: 0.98rem; }
}

/* the cutout's head must clear the sticky header: lift capped */
@media (min-width: 1000px) { .hero__media { transform: translateY(-26%); } }
@media (min-width: 1000px) and (max-height: 760px) {
  .hero__media { transform: translateY(-14%); }
  .hero .btn { font-size: 0.95rem; padding: 0.9rem 1.5rem; }
}

/* ============================================================
   Google reviews marquee under the hero composite (2026-09-03)
   A slow, continuous drift of five-star review cards. Cards fade in at
   the left edge and out at the right through a mask, pause on hover,
   and stand still (scrollable) for readers with reduced motion.
   ============================================================ */
.hero__reviews { grid-column: 1 / -1; margin-top: clamp(1.25rem, 2vw, 2rem); position: relative; z-index: 4; }
.grev__bar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; padding-left: 0.25rem; }
.grev__g { width: 18px; height: 18px; flex: none; }
.grev__g--lg { width: 24px; height: 24px; }
.grev__rating { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--ink); }
.grev__stars { display: inline-flex; align-items: center; gap: 2px; }
.grev__star { width: 15px; height: 15px; fill: #FBBC04; }
.grev__stars--bar .grev__star { width: 17px; height: 17px; }
.grev__count { font-stretch: 105%; font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.grev__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.grev__track {
  list-style: none; margin: 0; padding: 0.35rem 0 0.9rem;
  display: flex; gap: 1rem; width: max-content;
  animation: grev-drift 72s linear infinite;
}
.grev__viewport:hover .grev__track, .grev__viewport:focus-within .grev__track { animation-play-state: paused; }
@keyframes grev-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.grev__card {
  flex: none;
  width: clamp(280px, 22vw, 380px);
  background: var(--white);
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(60,64,67,0.10), 0 8px 24px -12px rgba(60,64,67,0.30);
  padding: 0.9rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  font-family: var(--font-sans);
}
.grev__head { display: flex; align-items: center; gap: 0.6rem; }
.grev__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--av, #4285F4); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.95rem;
}
.grev__who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.grev__name { font-weight: 600; font-size: 0.92rem; color: #202124; }
.grev__co { font-size: 0.74rem; color: #5f6368; }
.grev__head .grev__g { margin-left: auto; }
.grev__when { font-size: 0.72rem; color: #5f6368; margin-left: 0.4rem; }
.grev__text {
  font-size: 0.84rem; line-height: 1.45; color: #3c4043; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .grev__track { animation: none; }
  .grev__viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 999px) { .hero__reviews { margin-top: var(--sp-md); } }
@media (min-width: 1000px) and (max-height: 760px) { .grev__text { -webkit-line-clamp: 2; } .grev__card { padding: 0.7rem 0.85rem 0.8rem; } }

/* lift is a fixed distance now that the reviews make the media column taller */
@media (min-width: 1000px) { .hero__media { transform: translateY(calc(-1 * clamp(96px, 7.8vw, 150px))); } }
@media (min-width: 1000px) and (max-height: 760px) { .hero__media { transform: translateY(-60px); } }

/* with the reviews below, the media column is the tall one: pin it to the top of the row, no transform */
@media (min-width: 1000px) { .hero__media { align-self: start; transform: none; } }
@media (min-width: 1000px) and (max-height: 760px) { .hero__media { transform: none; } }

@media (min-width: 1000px) and (max-height: 760px) { .hero__reviews { margin-top: 0.6rem; } .grev__track { padding-bottom: 0.3rem; } .grev__bar { margin-bottom: 0.4rem; } }

/* ---------- reviews: longer fade at both edges, slimmer cards (2026-09-03) ---------- */
.grev__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 12%, #000 30%, #000 70%, rgba(0,0,0,0.35) 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 12%, #000 30%, #000 70%, rgba(0,0,0,0.35) 88%, transparent 100%);
}
.grev__card {
  width: clamp(300px, 24vw, 420px);
  padding: 0.65rem 0.9rem 0.75rem;
  gap: 0.3rem;
  border-color: #ebebeb;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(60,64,67,0.06), 0 6px 18px -12px rgba(60,64,67,0.25);
}
.grev__head { gap: 0.5rem; }
.grev__avatar { width: 26px; height: 26px; font-size: 0.78rem; font-weight: 500; }
.grev__name { font-size: 0.86rem; font-weight: 600; }
.grev__co { font-size: 0.7rem; }
.grev__head .grev__g { width: 15px; height: 15px; }
.grev__star { width: 12px; height: 12px; }
.grev__stars--bar .grev__star { width: 16px; height: 16px; }
.grev__when { font-size: 0.68rem; }
.grev__text { font-size: 0.8rem; line-height: 1.4; -webkit-line-clamp: 2; font-weight: 400; }
.grev__track { gap: 0.85rem; padding: 0.3rem 0 0.7rem; }
.grev__bar { margin-bottom: 0.5rem; }

/* ---------- the review track runs further left than the composite (2026-09-03) ----------
   The fade now begins well before the card's left edge; the rating bar
   stays aligned with the composite. */
@media (min-width: 1000px) {
  .hero__reviews { --grev-ext: clamp(120px, 14vw, 300px); margin-left: calc(-1 * var(--grev-ext)); width: calc(100% + var(--grev-ext)); }
  .grev__bar { padding-left: calc(var(--grev-ext) + 0.25rem); }
  .grev__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.25) 14%, #000 34%, #000 74%, rgba(0,0,0,0.35) 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.25) 14%, #000 34%, #000 74%, rgba(0,0,0,0.35) 90%, transparent 100%);
  }
}

/* extension halved on request */
@media (min-width: 1000px) { .hero__reviews { --grev-ext: clamp(60px, 7vw, 150px); } }

/* ---------- laptop widths and shorter screens: the whole hero stays in the first screen (2026-09-03) ---------- */
@media (min-width: 1000px) and (max-width: 1599px) {
  .hero__grid { grid-template-columns: 0.88fr 1.12fr; gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .hero__badge { font-size: 0.88rem; }
  .hero h1, .hero-alt-h1 { font-size: clamp(2.1rem, 2.5vw + 0.5rem, 3.3rem); max-width: 16ch; }
  .hero__sub { font-size: clamp(0.95rem, 0.45vw + 0.55rem, 1.1rem); max-width: 46ch; }
  .hero .btn { font-size: 0.95rem; padding: 0.9rem 1.4rem; }
  .hero__trust-item { font-size: 0.88rem; }
  .hero__name { font-size: 1.1rem; }
  .hero__stat-num { font-size: 1.7rem; }
  .hero__float, .hero__float--name, .hero__float--stat, .hero__float--cap { padding: 0.7rem 0.85rem; }
}
@media (min-width: 1000px) and (max-height: 900px) {
  .hero { padding-block: var(--sp-md); }
  .hero__sub { margin-top: var(--sp-xs); }
  .hero__actions { margin-top: var(--sp-sm); }
  .hero__trust { margin-top: var(--sp-sm); padding-top: var(--sp-xs); }
  .hero__reviews { margin-top: 0.6rem; }
  .grev__bar { margin-bottom: 0.35rem; }
  .grev__track { padding-bottom: 0.3rem; }
  .grev__text { -webkit-line-clamp: 2; }
}
@media (max-width: 640px) {
  /* legal row on phones: copyright line, then the four links, then the license */
  .footer__legal > span:first-child { flex-basis: 100%; min-height: 0; }
  .footer__legal > span, .footer__legal > a { line-height: 1.2; }
}