/* ============================================================================
   EDGE CHARLOTTE - design tokens
   Contract: ~/Work/SPF Sites/site-system/tokens.css
   Enforced:  node "~/Work/SPF Sites/site-system/lint-tokens.mjs" "Edge Charlotte/site"

   Every layout + type value for all 21 pages lives here. One edit propagates
   across the whole site.

   Breakpoints: laptop 1024 / tablet 820 / mobile 640 (layout uses all three;
   tokens change at 1024, 820 and 640).

   COLOUR IS DELIBERATELY NOT HERE. Contract rule 3: brand tokens (colour,
   font-family, easing) stay in the site's own stylesheet. --cyan / --ink /
   --paper etc. live in the :root of styles.css and must not be moved here.

   Migrated FAITHFULLY on 2026-08-20 - values are exactly what the hand-tuned CSS
   already rendered. The 47 clamp() sizes were evaluated at 1440 / 900 / 390 and
   frozen as literals, so the site is unchanged at those widths but now editable
   per device tier.

   Tokens are deduped BY VALUE and named after the role that first used each one -
   so three kickers that all shared 0.8rem/0.4em now share --t-kicker-size. That
   collapsed 150 font-size declarations into 73 tokens.

   NOTE ON DRIFT: this site had 73 distinct font-sizes, 39 paddings, 39 gaps and
   17 letter-spacings for maybe 15 real roles. That drift is preserved rather than
   silently snapped - migration must not smuggle in a redesign. It is now visible
   and collapsible from one screen.

   NUMERIC NORMALISATION 2026-08-22 (Matt's rules, site-system/CLAUDE.md
   "Numeric value rules"): every rem/em value here now carries at most ONE
   decimal place; unitless leadings likewise; px values are integers. 104 values
   were re-rounded. Rounding to one decimal collapsed several previously
   distinct tokens onto the same literal (e.g. 1.688rem and 1.7rem both land on
   1.7rem) - the tokens are deliberately NOT merged, so the roles stay
   separately editable. Letter-spacing now lives on a coarse {0, .1, .2, .3, .4}em
   grid, which is what one decimal place means for tracking.

   SPACING UNITS 2026-08-22 (Matt's decision): every margin / padding / gap value -
   including --gutter and every --s-*-pad / -margin / -gap token - is now px, not rem,
   so the "multiples of 10 preferred" rule can actually apply. Converted at 1rem = 16px
   and snapped to the nearest multiple of 10 only where that was within +/-2px. Type
   tokens (--t-*) and the radius tokens are untouched: font-size / leading / tracking
   stay rem/em/unitless. em-valued paddings in styles.css (button 0.8em etc.) stay em -
   they are typography-relative by design.

   NOT normalised, pending Matt's approval (see the exceptions table in the
   2026-08-22 audit report): rgba() alpha channels and standalone opacity,
   cubic-bezier control points, transform/filter factors, and the 16:9 ratio
   percentage. Rounding those to one decimal is not a spacing decision and in
   several cases (alpha 0.04 -> 0.0) deletes the element outright.
   ============================================================================ */

:root {
  --gutter: 58px;
  --content-max: 1440px;

  /* -- SIZE -- */
  /* Every piece of text on the site is at least 18px (Matt 2026-09-03,
     non-negotiable). This is the floor for anything without its own token. */
  --t-body-base-size: 1.125rem;
  --t-btn-size: 1.3rem;
  --t-btn-big-size: 1.8rem;
  --t-kicker-size: 1.125rem;
  --t-section-head-h2-size: 5rem;
  --t-section-head-sub-size: 1.125rem;
  --t-loader-count-size: 1.125rem; /* was 0.9rem; Matt 2026-09-02: nothing on the site is smaller than 1rem body */
  --t-links-a-size: 1.125rem;
  --t-links-a-size-2: 3.4rem;
  --t-hero-title-size: 5rem;
  --t-hero-title-size-2: 8.2rem;
  --t-hero-line-size: 1.8em; /* measured for Saira Condensed 800: "EDGE ON DESK DAYS" 7.128em / "GAIN YOUR" 3.923em = 1.82; 1.8 leaves ~1% safety (2026-08-22) */
  --t-hero-sub-size: 1.2rem;
  --t-hero-alt-size: 1.125rem; /* was 0.9rem; Matt 2026-09-02: nothing on the site is smaller than 1rem body */
  --t-track-span-size: 2.4rem;
  --t-pillar-num-size: 5rem;
  --t-body-h3-size: 2.6rem;
  --t-body-h3-size-2: 3.2rem;
  --t-fit-title-size: 3.2rem;
  --t-title-span-size: 0.6em;
  --t-fit-then-size: 2.2rem;
  --t-stat-num-size: 4.6rem;
  --t-stat-label-size: 1.125rem;
  --t-rcard-blockquote-size: 1.125rem;
  --t-rcard-mono-size: 1.125rem;
  --t-rcard-src-size: 1.125rem;
  --t-coach-bio-size: 1.125rem; /* was 0.9rem; Matt 2026-09-02: nothing on the site is smaller than 1rem body */
  --t-certs-li-size: 1.125rem;
  --t-meta-h3-size: 1.7rem;
  --t-coach-role-size: 1.125rem;
  --t-start-title-size: 10rem;
  --t-start-alt-title-size: 2rem;
  --t-start-alt-phone-size: 1.6rem;
  --t-alt-cols-p-size: 1.125rem; /* was 0.9rem; Matt 2026-09-02: nothing on the site is smaller than 1rem body */
  --t-card-title-size: 2rem;
  --t-page-hero-title-size: 5.5rem;
  --t-picker-toggle-size: 2.2rem;
  --t-pull-quote-blockquote-size: 2.8rem;
  --t-goals-h2-size: 3rem;
  --t-list-li-size: 0.8em;
  --t-contact-alt-heading-size: 2rem;
  --t-contact-alt-phone-size: 1.8rem;
  --t-step-num-size: 4.5rem;
  --t-step-title-size: 1.8rem;
  --t-body-h2-size: 2.6rem;
  --t-card-title-size-2: 1.6rem;
  --t-body-h2-size-2: 2.8rem;
  --t-group-h3-size: 1.7rem;
  --t-map-cta-btn-size: 1.125rem;
  --t-head-h2-size: 2.6rem;
  --t-faq-question-size: 2rem;
  --t-author-bio-name-size: 1.7rem;
  --t-page-hero-title-size-2: 4.6rem;
  --t-page-hero-lead-size: 1.125rem;
  --t-rts-gap-stat-size: 3.2rem;
  --t-body-h3-size-3: 1.2rem;
  --t-rts-cred-org-size: 1.125rem;
  --t-body-p-size: 1.125rem; /* was 0.9rem; Matt 2026-09-02: nothing on the site is smaller than 1rem body */
  --t-article-body-size: 1.125rem;
  --t-step-num-size-2: 2.6rem;
  --t-body-h3-size-4: 1.4rem;
  --t-rts-case-mark-size: 5rem;
  --t-pull-p-size: 1.4rem;
  --t-map-embed-title-size: 2rem;
  --t-blog-featured-title-size: 2.4rem;
  --t-source-band-icon-size: 2.2rem;
  --t-body-h3-size-5: 1.9rem;
  --t-footer-credit-size: 12px; /* the agency credit line only (Matt 2026-09-07); the one deliberate exception to the 18px floor */

  /* -- WEIGHT SCALE -- */
  --t-weight-400: 400;
  --t-weight-500: 500;
  --t-weight-600: 600;
  --t-weight-700: 700;

  /* -- WEIGHT -- */

  /* -- LEADING -- */
  --t-body-leading: 1.6;
  --t-h1-leading: 0.9; /* Matt 2026-08-22: 0.95 rounded to 1 read loose; he chose 0.9 */
  --t-pillar-num-leading: 1;
  --t-coach-bio-leading: 1.5;
  --t-start-title-leading: 0.9;
  --t-start-alt-title-leading: 1.1;
  --t-col-a-leading: 1.9;
  --t-panel-inner-p-leading: 1.7;
  --t-pull-quote-blockquote-leading: 1.1;
  --t-list-li-leading: 1.6;
  --t-contact-alt-detail-leading: 1.7;
  --t-article-body-leading: 1.8;
  --t-body-h2-leading: 1.1;
  --t-visit-detail-leading: 1.8;
  --t-faq-style-label-leading: 1.4;
  --t-step-num-leading: 0.8;
  --t-blockquote-p-leading: 1.3;
  --t-body-h3-leading: 1.2;
  --t-figure-leading: 0;

  /* -- TRACKING -- */
  --t-h1-tracking: 0em;
  --t-btn-tracking: 0.1em;
  --t-loader-count-tracking: 0.4em;
  --t-links-a-tracking: 0.2em;
  --t-mmenu-phone-tracking: 0.2em;
  --t-track-span-tracking: 0.1em;
  --t-service-index-tracking: 0.3em;
  --t-title-span-tracking: 0.1em;
  --t-stat-label-tracking: 0.2em;
  --t-certs-li-tracking: 0.1em;
  --t-alt-cols-h3-tracking: 0.1em;
  --t-tag-tracking: 0.1em;
  --t-faq-style-value-tracking: 0em;
  --t-card-h3-tracking: 0em;

  /* -- CASE -- */
  --t-h1-case: uppercase;
  --t-mmenu-sublink-case: none;

  /* -- PADDING -- */
  --s-pillar-pad: 50px;
  --s-start-alt-pad: 30px;
  --s-card-pad: 35px;
  --s-picker-toggle-pad: 24px 24px;
  --s-card-pad-2: 30px;
  --s-coach-row-pad: 40px;
  --s-certbar-pad: 100px 0;
  --s-track-a-pad: 0 50px;
  --s-thead-th-pad: 14px 16px;
  --s-rts-cred-pad: 22px 24px;
  --s-blog-featured-body-pad: 43px 35px 43px 0;
  --s-list-marker-indent: 26px;
  --s-blog-filter-select-pad: 12px 40px 12px 20px;
  /* -- SECTION RHYTHM 2026-08-30 (Matt: top and bottom of every band must be
     the same value; the gap heading->sub must equal the gap sub->content) --
     --s-section-pad opens every band (top of .section-head) and closes it
     (bottom of .two-col / .section-body / .reviews / .services / ...).
     --s-section-head-gap is the space above the sub paragraph AND the space
     between the head and whatever follows it. */
  --s-section-pad: 100px;
  --s-section-head-gap: 30px;
  /* .team__viewport's vertical padding: must exceed the 18px hover offset of
     .coach__frame, or the frame clips against the scroll container. */
  --s-team-viewport-pad: 24px;
  /* horizontal inset for the .picker accordion (the wipe fill is flush, so the
     text needs its own inset) */
  --s-picker-pad-x: 24px;
  /* gap between two paragraphs inside one .faq__answer. One value at every
     tier on purpose: paragraph spacing inside a 46em column does not need to
     shrink with the viewport. */
  --s-faq-answer-gap: 20px;

  /* -- MARGIN -- */
  --s-service-margin: 0 auto 104px;
  /* the "see the program" link under .service__lead in the navy services band */
  --s-service-more-margin: 0 0 20px;
  --s-fit-list-margin: 0 auto 30px;
  --s-reviews-stats-margin: 56px auto 64px;
  --s-goals-list-margin: 0 auto 40px;
  --s-callout-margin: 40px 0;
  --s-body-blockquote-margin: 24px 0;
  --s-rts-gap-grid-margin: 30px auto 0;
  --s-blog-tags-margin: 0 auto 64px;
  --s-reviews-static-margin: 0 auto;

  /* -- GAP -- */
  --s-kicker-gap: 14px;
  --s-loader-content-gap: 24px;
  --s-nav-right-gap: 22px;
  --s-mmenu-gap: 50px;
  --s-mmenu-links-gap: 20px;
  --s-hero-headrow-gap: 20px;
  --s-hero-kicker-gap: 16px;
  --s-hero-cta-gap: 26px;
  --s-hero-proof-gap: 10px;
  --s-pillar-gap: 43px;
  --s-service-gap: 70px;
  --s-service-list-gap: 14px;
  --s-team-track-gap: 37px;
  --s-coach-certs-gap: 6px;
  --s-start-inner-gap: 26px 86px;
  --s-start-facts-gap: 6px;
  --s-card-grid-gap: 40px;
  --s-two-col-gap: 58px;
  --s-post-meta-gap: 10px;
  --s-card-gap: 13px;
  --s-coach-rows-gap: 70px;
  --s-coach-row-gap: 56px;
  --s-visit-col-gap: 35px;
  --s-faq-style-gap: 30px;
  --s-author-bio-gap: 30px;
  --s-page-hero-kicker-gap: 10px;
  --s-step-gap: 30px;
  --s-rts-case-by-gap: 10px;
  --s-blog-card-link-gap: 10px;
  --s-burger-gap: 8px;

  /* -- RADIUS --
     The five per-element radii below (4/10/6/3/8px) were collapsed on
     2026-08-22 into three ROLE tokens - --radius-card / --radius-ctrl /
     --radius-media - which live in the :root of styles.css alongside the other
     brand decisions (contract rule 3). Only the two shape-specific values that
     are not a "roundness" decision stay here. */
  --s-rcard-mono-radius: 50%;
  --s-callout-radius: 0 8px 8px 0;

  /* -- DE-AI DESIGN PASS 2026-08-22 --
     New layout values introduced by the de-AI structural work. clamp()s from
     that branch were frozen the same way the migration froze the originals:
     evaluated at 1440 for the base tier and at 390 for the mobile tier, then
     snapped to integer px (to a multiple of 10 where that was within +/-2px). */
  --s-pillar-media-max: 560px; /* Matt 2026-08-30: wider so the landscape shots are not cropped to a strip; same width for all three */


  --s-coach-row-divider-pad-top: 64px;
  --s-coach-row-overlap-media-margin-top: -20px; /* head gap is 30px now (2026-08-30); -44 rode up over the heading */
  --s-coach-row-overlap-body-pad-top: 32px;
  --s-coach-row-card-img-margin-top: -40px;

  --s-page-hero-tight-pad-top: 152px;
  --s-page-hero-tight-pad-bottom: 56px;
  --s-page-hero-tall-pad-top: 200px;
  --s-page-hero-tall-pad-bottom: 115px;

  --s-standalone-fit-margin-top: 64px;
  --s-standalone-fit-pad-bottom: 64px;

  --s-reviews-head-pad-bottom: 0px;
  --s-reviews-head-overlap-margin-bottom: -95px;

  --s-rcard-static-pad: 20px 26px;
  --s-rcard-feature-pad: 40px 40px 34px;
  --s-rcard-feature-quote-margin-top: 40px;
  --s-rcard-feature-by-margin-top: 22px;
  --s-rcard-feature-stars-margin-top: 16px;
  --t-rcard-feature-mark-size: 5rem;
  --t-rcard-feature-quote-size: 1.3rem;
  --t-rcard-feature-quote-leading: 1.5;

  /* -- TRAINING SUB-NAV + FOOTER MAP 2026-08-23 -- */
  --s-nav-caret-gap: 6px;
  --s-nav-dropdown-pad: 10px;
  --s-nav-dropdown-link-pad: 10px 20px;
  --s-mmenu-group-gap: 20px;
  --s-mmenu-sublinks-gap: 10px;
  --t-mmenu-sublink-size: 1.125rem;
  --s-mmenu-sublink-indent: 20px;
  --s-footer-map-margin-bottom: 30px;
  --s-footer-map-h: 260px;

  /* -- COACH EDITORIAL SPREADS 2026-08-26 --
     Magazine-style /coaches: a cutout on a flat colour field cut by a hard
     diagonal, with an oversized pull-quote as the loudest type on the page. */
  --t-spread-quote-size: 3.6rem;
  --t-spread-mark-size: 7rem;
  --s-spreads-gap: 120px;
  --s-spread-gap: 56px;
  --s-spread-pad: 64px;
  --s-spread-stack-gap: 18px;
  --s-spread-quote-gap: 40px;
  /* Geometry of the diagonal (2026-09-03): --cut-bite is how far the colour
     field reaches across the cutout at the top of the card, --cut-run is the
     horizontal distance the cut travels from the top of the card to the
     bottom, i.e. its angle. Both are read in styles.css off the portrait's
     own edge, so the cut follows the cutout instead of the viewport. */
  --s-spread-cut-bite: 327px;
  --s-spread-cut-run: 262px;

  /* -- 2026-09-02 WALKTHROUGH (Matt) -- */
  /* navy photo band with no section-head (.services--band): a third of the old
     bottom space moved to the top so the framed photo clears the diagonal */
  --s-band-pad-top: 70px;
  --s-band-pad-bottom: 130px;
  /* "It's for you if" quote cards */
  --s-fit-card-h: 320px;
  --s-fit-card-pad: 26px;
  --t-fit-card-size: 2.8rem; /* Matt 2026-09-02: the quote fills the card, make a statement */
  --t-fit-card-cta-size: 2.4rem;
  /* speech-bubble reviews */
  --s-rbubble-pad: 26px 28px;
  --s-rbubble-gap: 22px;
  --s-rbubble-avatar: 72px;
  --s-rbubble-tail-x: 28px; /* tail sits over the avatar's centre: avatar/2 - tail/2 */
  /* check-mark list variant (.edge-list--check): indent for the 14px tick */
  --s-list-check-indent: 30px;
  /* RTS credential logo column: every wrapper the same width */
  --s-rts-cred-logo-w: 200px;
  --s-rts-cred-logo-h: 90px; /* stacked (mobile) tier only */
  /* the navy logo panel's own inset; the left value clears its angled edge */
  --s-rts-cred-logo-pad: 20px 20px 20px 44px;
  /* Three-layer parallax photo scene (home + /start-here) */
  --s-depth-h-far: 150px;
  --s-depth-h-mid: 230px;
  --s-depth-h-near: 330px;
  /* slot = the fixed pitch each photo occupies, gap = the space after it.
     Together they set the spacing that guarantees no repeat on screen. */
  --s-depth-slot-far: 200px;
  --s-depth-slot-mid: 310px;
  --s-depth-slot-near: 440px;
  /* pitch = slot + gap. Two copies of one photo are (set size x pitch) apart,
     so set size x pitch must exceed viewport + slot or both can be on screen at
     once. Sets are far 3 / mid 4 / near 4. This base tier holds up to 1699px;
     the min-width tiers at the end of this file cover wider screens. See
     AGENTS.md before touching these. */
  --s-depth-gap-far: 440px;
  --s-depth-gap-mid: 200px;
  --s-depth-gap-near: 100px;
  /* /reviews 3D review wall: stage height and the counter's gap */
  --s-review-ring-h: 640px;
  --s-review-stage-head-gap: 10px;

  /* -- MOBILE PASS 2026-09-07 (Matt's phone walkthrough) --
     Base values here are the desktop-equivalent or unused-on-desktop defaults;
     the mobile tier below carries the values that actually render. */
  --s-nav-gap: 30px;                 /* .nav row gap (was a raw 30px) */
  --s-start-word-gap: 16px;          /* "Start here" set on one line: the word gap */
  --s-start-copy-gap: 26px;          /* title -> paragraph; on phones also paragraph -> form and form -> card */
  --s-training-band-pad: 16px 20px;  /* /training hub: title band over the photo */
  --s-spread-cap-h: 140px;           /* coaches: cyan angled band across the portrait's foot */
  --s-spread-cap-pad: 24px;          /* coaches: name + role inset from the band's bottom */
  --s-pillar-wedge-w: 220px;         /* pillars: photo wedge in the bottom-right corner */
  --s-pillar-wedge-h: 110px;
  --s-pillar-body-clear: 90px;       /* pillars: copy keeps clear of the wedge (card pad + this > wedge height) */
  --s-crowd-team-overlap: -20px;     /* home: .team rides over the crowd's feet (no ice seam). The crowd
                                        SVG scales with the viewport, so its foot jitter (+/-6 units) is
                                        ~7px at 1440 and ~10px at 1920; 20 covers it. 10 is enough on phones. */
}

/* ============================ LAPTOP ============================ */
@media (max-width: 1024px) {
  :root {
    --gutter: 37px;
    --t-btn-big-size: 1.4rem;
    --t-section-head-h2-size: 3.7rem;
    --t-hero-title-size: 3.4rem;
    --t-hero-title-size-2: 5.5rem;
    --t-hero-sub-size: 1.125rem;
    --t-track-span-size: 1.7rem;
    --t-pillar-num-size: 3.4rem;
    --t-body-h3-size: 1.9rem;
    --t-body-h3-size-2: 2.4rem;
    --t-fit-title-size: 2.5rem;
    --t-fit-then-size: 1.7rem;
    --t-stat-num-size: 3.4rem;
    --t-start-title-size: 6.8rem;
    --t-start-alt-title-size: 1.5rem;
    --t-start-alt-phone-size: 1.3rem;
    --t-card-title-size: 1.5rem;
    --t-page-hero-title-size: 3.9rem;
    --t-picker-toggle-size: 1.7rem;
    --t-pull-quote-blockquote-size: 2rem;
    --t-goals-h2-size: 2.5rem;
    --t-contact-alt-heading-size: 1.7rem;
    --t-contact-alt-phone-size: 1.4rem;
    --t-step-num-size: 3.1rem;
    --t-step-title-size: 1.4rem;
    --t-body-h2-size: 2rem;
    --t-card-title-size-2: 1.3rem;
    --t-body-h2-size-2: 2rem;
    --t-group-h3-size: 1.3rem;
    --t-head-h2-size: 1.8rem;
    --t-faq-question-size: 1.6rem;
    --t-author-bio-name-size: 1.4rem;
    --t-page-hero-title-size-2: 3.4rem;
    --t-rts-gap-stat-size: 2.4rem;
    --t-pull-p-size: 1.2rem;
    --t-map-embed-title-size: 1.4rem;
    --t-blog-featured-title-size: 1.8rem;
    --t-body-h3-size-5: 1.6rem;
    --s-pillar-pad: 30px;
    --s-start-alt-pad: 27px;
    --s-card-pad: 27px;
    --s-card-pad-2: 27px;
    --s-coach-row-pad: 27px;
    --s-pillar-gap: 27px;
    --s-service-gap: 45px;
    --s-team-track-gap: 22px;
    --s-card-grid-gap: 27px;
    --s-two-col-gap: 37px;
    --s-coach-rows-gap: 45px;
    --s-coach-row-gap: 37px;
    --s-visit-col-gap: 27px;
    --s-faq-style-gap: 22px;
    --s-author-bio-gap: 22px;
    --s-picker-toggle-pad: 18px 24px;
    --s-certbar-pad: 60px 0;
    --s-track-a-pad: 0 30px;
    --s-blog-featured-body-pad: 30px 24px 30px 0;
    --s-service-margin: 0 auto 70px;
    --s-reviews-stats-margin: 40px auto 45px;
    --s-goals-list-margin: 0 auto 30px;
    --s-callout-margin: 27px 0;
    --s-blog-tags-margin: 0 auto 50px;
    --s-reviews-static-margin: 0 auto;
    --s-reviews-head-overlap-margin-bottom: -40px;
    --s-start-inner-gap: 26px 54px;
    --s-section-pad: 60px;
    --s-section-head-gap: 24px;
    --s-pillar-media-max: 400px;
    --s-footer-map-h: 220px;

    --t-spread-quote-size: 2.6rem;
    --t-spread-mark-size: 5rem;
    --s-spreads-gap: 80px;
    --s-spread-gap: 40px;
    --s-spread-pad: 44px;
    --s-spread-cut-bite: 226px;
    --s-spread-cut-run: 180px;

    --s-band-pad-top: 40px;
    --s-band-pad-bottom: 80px;
    --s-fit-card-h: 260px;
    --s-fit-card-pad: 22px;
    --t-fit-card-size: 2.1rem;
    --t-fit-card-cta-size: 2rem;
    --s-rbubble-pad: 22px 24px;
    --s-rbubble-avatar: 64px;
    --s-rbubble-tail-x: 24px;
    --s-rts-cred-logo-w: 150px;
    --s-rts-cred-logo-pad: 16px 16px 16px 38px;
    --s-depth-h-far: 120px;
    --s-depth-h-mid: 180px;
    --s-depth-h-near: 250px;
    --s-depth-slot-far: 160px;
    --s-depth-slot-mid: 240px;
    --s-depth-slot-near: 335px;
    --s-depth-gap-far: 240px;
    --s-depth-gap-mid: 180px;
    --s-depth-gap-near: 200px;
    --s-review-ring-h: 560px;
  }
}

/* ============================ TABLET ============================
   The middle contract tier (820). Only the long-form article role changes
   here; everything else steps at 1024 / 640.
   ================================================================ */
@media (max-width: 820px) {
  :root {
    --t-article-body-size: 1.125rem;
    --t-article-body-leading: 1.7;
  }
}

/* ============================ MOBILE ============================ */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --t-btn-big-size: 1.4rem;
    --t-section-head-h2-size: 2.6rem;
    --t-links-a-size-2: 2.4rem;
    --t-hero-title-size: 2rem;
    --t-hero-title-size-2: 3.1rem;
    --t-hero-sub-size: 1.125rem;
    --t-track-span-size: 1.6rem;
    --t-pillar-num-size: 3rem;
    --t-body-h3-size: 1.8rem;
    --t-body-h3-size-2: 2rem;
    --t-fit-title-size: 2rem;
    --t-fit-then-size: 1.5rem;
    --t-stat-num-size: 2.6rem;
    --t-start-title-size: 4.5rem;
    --t-start-alt-title-size: 1.5rem;
    --t-start-alt-phone-size: 1.3rem;
    --t-card-title-size: 1.4rem;
    --t-page-hero-title-size: 2.6rem;
    --t-picker-toggle-size: 1.6rem;
    --t-pull-quote-blockquote-size: 1.7rem;
    --t-goals-h2-size: 2rem;
    --t-contact-alt-heading-size: 1.5rem;
    --t-contact-alt-phone-size: 1.4rem;
    --t-step-num-size: 3rem;
    --t-step-title-size: 1.3rem;
    --t-body-h2-size: 1.8rem;
    --t-card-title-size-2: 1.3rem;
    --t-body-h2-size-2: 1.9rem;
    --t-group-h3-size: 1.3rem;
    --t-head-h2-size: 1.8rem;
    --t-faq-question-size: 1.4rem;
    --t-author-bio-name-size: 1.3rem;
    --t-page-hero-title-size-2: 2.4rem;
    --t-rts-gap-stat-size: 2.4rem;
    --t-pull-p-size: 1.125rem;
    --t-map-embed-title-size: 1.4rem;
    --t-blog-featured-title-size: 1.8rem;
    --t-body-h3-size-5: 1.4rem;
    --s-pillar-pad: 26px;
    --s-start-alt-pad: 22px;
    --s-card-pad: 24px;
    --s-card-pad-2: 24px;
    --s-coach-row-pad: 22px;
    --s-hero-headrow-gap: 13px;
    --s-pillar-gap: 24px;
    --s-service-gap: 30px;
    --s-team-track-gap: 22px;
    --s-card-grid-gap: 24px;
    --s-two-col-gap: 30px;
    --s-coach-rows-gap: 40px;
    --s-coach-row-gap: 30px;
    --s-visit-col-gap: 22px;
    --s-faq-style-gap: 20px;
    --s-author-bio-gap: 16px;
    --s-picker-toggle-pad: 18px 16px;
    --s-certbar-pad: 40px 0 60px; /* 2026-09-07: the cyan CTA's diagonal rides 0-4vw into the bottom; top+bottom read equal this way (Matt) */
    --s-track-a-pad: 0 26px;
    --s-blog-featured-body-pad: 30px 24px 30px 0;
    --s-service-margin: 0 auto 64px;
    --s-reviews-stats-margin: 40px auto 40px;
    --s-goals-list-margin: 0 auto 30px;
    --s-callout-margin: 24px 0;
    --s-blog-tags-margin: 0 auto 50px;
    --s-reviews-static-margin: 0 auto;
    --s-reviews-head-overlap-margin-bottom: -100px; /* Matt 2026-09-07: heading -> bubble gap halved (76 -> 36 at 390; the stage is as tall as it is wide, so 360px phones keep ~10px) */
    --s-start-inner-gap: 26px 40px;

    /* de-AI pass, mobile tier */
    --s-coach-row-divider-pad-top: 40px;
    --s-page-hero-tight-pad-top: 56px;
    --s-page-hero-tight-pad-bottom: 30px;
    --s-page-hero-tall-pad-top: 136px;
    --s-page-hero-tall-pad-bottom: 90px;
    --s-standalone-fit-margin-top: 30px;
    --s-standalone-fit-pad-bottom: 40px;
    --s-rcard-feature-pad: 30px 26px 26px;
    --s-section-pad: 50px;
    --s-section-head-gap: 20px;
    --s-picker-pad-x: 16px;
    --s-footer-map-h: 180px;

    --t-spread-quote-size: 1.9rem;
    --t-spread-mark-size: 4rem;
    --s-spreads-gap: 56px;
    --s-spread-gap: 30px;
    --s-spread-pad: 32px;
    --s-spread-quote-gap: 24px;

    --s-band-pad-top: 30px;
    --s-band-pad-bottom: 70px;
    --s-fit-card-h: 220px;
    --s-fit-card-pad: 18px;
    --t-fit-card-size: 1.8rem;
    --t-fit-card-cta-size: 1.8rem;
    --s-rbubble-pad: 20px 20px;
    --s-rbubble-gap: 16px;
    --s-rbubble-avatar: 56px;
    --s-rbubble-tail-x: 20px;
    --s-rts-cred-logo-w: 110px;
    --s-rts-cred-logo-pad: 16px 20px 26px;
    --s-depth-h-far: 90px;
    --s-depth-h-mid: 130px;
    --s-depth-h-near: 180px;
    --s-depth-slot-far: 120px;
    --s-depth-slot-mid: 175px;
    --s-depth-slot-near: 240px;
    --s-depth-gap-far: 170px;
    --s-depth-gap-mid: 120px;
    --s-depth-gap-near: 140px;
    --s-review-ring-h: 520px;

    /* mobile pass 2026-09-07 */
    --s-crowd-team-overlap: -10px;
    --s-nav-gap: 12px;
    --s-nav-right-gap: 12px;
    --s-spread-cap-h: 130px;
    --s-spread-cap-pad: 20px;
    --s-pillar-wedge-w: 200px;
    --s-pillar-wedge-h: 110px;
  }
}

/* ============================ WIDE SCREENS ============================
   Depth-scene spacing only. Each tier keeps set size x (slot + gap) above
   (widest viewport in the tier + slot), so no photo is ever on screen twice.
   far 3 / mid 4 / near 4; slots 200 / 310 / 440. */
@media (min-width: 1700px) {   /* up to 2199 */
  :root {
    --s-depth-gap-far: 600px;
    --s-depth-gap-mid: 320px;
    --s-depth-gap-near: 220px;
  }
}
@media (min-width: 2200px) {   /* up to 2999 */
  :root {
    --s-depth-gap-far: 870px;
    --s-depth-gap-mid: 520px;
    --s-depth-gap-near: 420px;
  }
}
@media (min-width: 3000px) {   /* up to 3840 */
  :root {
    --s-depth-gap-far: 1150px;
    --s-depth-gap-mid: 730px;
    --s-depth-gap-near: 640px;
  }
}