/* Strength Society Online — dedicated stylesheet
 *
 * Ported from Jonotthan Harrison's mock-up (2026-07-16). Layout is Jon's
 * verbatim; the visual language (fonts + palette) is REBRANDED to Strength
 * Society's house tokens so the page reads as SS, not a separate site:
 *   - Fonts: Matroska (display), Grift (body), Nord (labels) — same as the
 *     rest of the SS site. Jon used var(--header-font)/Arial in the mock-up.
 *   - Palette: pure monochrome (near-black + off-white + red accent) to
 *     match the SS home. Jon used warm ink + copper accent.
 *   - Buttons: SS's bordered / transparent-fill treatment when on dark
 *     surfaces (matches "BOOK YOUR FREE SESSION"); solid when on paper.
 * Structure, section rhythm, copy, and content hierarchy are Jon's design
 * decisions and were NOT changed.
 *
 * The `@import "tailwindcss"` at the top of the mock-up is intentionally
 * dropped — the CSS below is fully self-contained (no @apply, no utility
 * classes). If Jon revises the design, replace the LAYOUT rules surgically
 * and leave the brand-token additions intact.
 */

/* --- SS brand fonts (copied from strength-society.webflow.css) ---
 * Included inline here because this page ships without the shared webflow
 * stylesheet — it's a standalone experience. Keep the URLs relative to
 * /css/ (i.e. ../fonts/) so they resolve identically to the rest of the
 * site's Grift/Matroska/Nord loads. */
@font-face { font-family:Matroska; src:url('../fonts/Matroska-Wg3v.ttf') format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Grift; src:url('../fonts/Grift-Regular.ttf') format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Grift; src:url('../fonts/Grift-Medium.ttf') format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:Grift; src:url('../fonts/Grift-SemiBold.ttf') format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:Grift; src:url('../fonts/Grift-Bold.ttf') format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:Grift; src:url('../fonts/Grift-Black.ttf') format("truetype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:Nord; src:url('../fonts/NORD-Regular.otf') format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Nord; src:url('../fonts/NORD-Medium.otf') format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:Nord; src:url('../fonts/NORD-Bold.otf') format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* SS house brand tokens (mirroring strength-society.webflow.css) */
  --ink: #020202;         /* body bg — matches live SS body */
  --paper: #fafafa;       /* SS --white-100 */
  --muted: #9c9c9c;       /* SS --grey-100 */
  --line: #282828;        /* SS --black-100 */
  --accent: #dc2525;      /* SS --base-red — used sparingly (BEST VALUE tag + kicker line) */
  --header-font: Matroska, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body-font:   Grift, "Palatino Linotype", sans-serif;
  --label-font:  Nord, Verdana, sans-serif;
}
* { box-sizing:border-box; }
/* overflow-x:clip on the ROOT (html), not just body — document scroll is
   governed by html, not body. Body-only clip didn't prevent the marquee's
   overflowing text from adding to document.scrollWidth. `clip` (not `hidden`)
   keeps scroll-behavior:smooth working and doesn't create a scroll container. */
html { scroll-behavior:smooth; overflow-x:clip; }
/* overflow-x:clip on the body is the belt-and-suspenders backstop against ANY
   accidental horizontal document scroll — a flex row like .marquee whose
   `overflow:hidden` still lets its bounding-rect leak into document
   scrollWidth on some browsers is one class of failure. `clip` cuts without
   creating a scroll container, so it does not affect sticky positioning. */
body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--body-font); font-weight:400; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
.shell { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
/* Nav — mirrors the real SS site header (index.html) DIMENSIONALLY, not just
 * stylistically. Previous version was 88px tall with a 56px logo & 14px button
 * while every other site page's nav is 140px tall with a 106px logo & 16px
 * button — the difference caused a visible "shift" navigating between pages.
 * These values match the live .navbar-logo-center-container (padding:20px,
 * .image-14 rendered ~106×37 at desktop) and .primary-button (18px vertical,
 * 16px Grift, radius 6). Keep in sync if the site nav ever changes. */
.nav { min-height:140px; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:5; }
.brand { display:flex; align-items:center; }
.brand img { display:block; width:106px; height:auto; }
.nav-links { display:flex; gap:10px; }
.nav-links a { color:var(--paper); font-family:var(--label-font); font-size:14px; font-weight:400; letter-spacing:.25px; line-height:20px; padding:5px 10px; text-decoration:none; transition:color .2s ease; }
.nav-links a:hover { color:var(--muted); }
/* SS-house button — bordered/transparent, matches "BOOK YOUR FREE SESSION" on the live homepage. */
.button { display:inline-flex; min-height:52px; padding:0 26px; align-items:center; justify-content:center; gap:22px; background:transparent; color:var(--paper); text-transform:uppercase; font-family:var(--label-font); font-weight:700; font-size:12px; letter-spacing:1.8px; border:2px solid var(--paper); transition:.2s ease; text-decoration:none; }
.button:hover { background:var(--paper); color:var(--ink); transform:translateY(-2px); }
.button-small { min-height:42px; padding:0 17px; }
/* Nav button — mirrors the live site's .primary-button EXACTLY:
 *   font: Grift 16px, weight 500, uppercase, letter-spacing default
 *   padding: 18px vertical (matches the site's 18px top/bottom)
 *   border: 1.25px solid white, radius 6px
 *   bg: #1d1d1d75 (semi-transparent dark)
 * Previous 14px/14px was ~44px tall; the real site button is ~54px. */
.nav .button { min-height:0; padding:18px 15px; gap:12px; background-color:#1d1d1d75; border:1.25px solid var(--paper); border-radius:6px; font-family:var(--body-font); font-weight:500; font-size:16px; letter-spacing:normal; line-height:1; text-transform:uppercase; }
.nav .button:hover { background-color:#6e6e6e75; color:var(--paper); transform:none; }
/* Hero — single generated composite (2026-07-21).
   The composite image IS the whole hero visual: Jon on the right, SS gym on
   the left/behind, cinematic warm-dark palette. No layered mask/backdrop
   dance — one image does everything. Left-side scrim keeps display copy
   legible over the image; copy grid is single-column with a right pad so it
   never overlaps Jon. */
.hero { position:relative; overflow:hidden; background:var(--ink); }
.hero-composite {
  position:absolute;
  /* Composite paint area starts BELOW a fixed black band so Jon's bun
     (which sits at ~2% Y in the source composite) always has real headroom
     below the shared 140px nav. Applied at every width — cover-fit jams
     his head at ultrawide (2000+) as much as at mobile portrait. Scaled
     up on desktop where the hero container is taller. */
  top: 90px; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background-image: url("../images/jonotthan-online-hero-composite.jpg");
  background-size: cover;
  /* Jon lives at 55-95% of the composite. Anchor RIGHT so he stays whole
     (crop comes off the left, which is just gym backdrop). */
  background-position: right 35%;
  background-repeat: no-repeat;
}
@media (max-width: 1023px) { .hero-composite { top: 80px; } }
@media (max-width: 600px)  { .hero-composite { top: 60px; } }
.hero-scrim {
  position:absolute; inset:0; z-index:1;
  /* Horizontal scrim: strong left coverage so the H1 (reaches ~44% viewport
     width) sits on a legible dark surface end-to-end.
     Vertical scrim: strong TOP coverage (was rgba(.4) → now rgba(.9)) so the
     composite reads as fading INTO the nav strip instead of the subject's
     head bun jamming against the header edge. Jon's head starts ~2% Y in
     the source composite (no natural headroom); the darker top band restores
     the visual breathing room across all viewport widths. */
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(2,2,2,.9) 30%, rgba(2,2,2,.55) 50%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 8%, rgba(0,0,0,.35) 16%, transparent 26%, transparent 78%, rgba(2,2,2,.5) 100%);
}
/* Base hero grid: single column, no right-reservation. Copy uses full shell
   width over the composite (scrim keeps it legible). At desktop widths we
   reserve the right 42% for Jon's silhouette (see the min-width:1024 rule
   below). This keeps intermediate widths (601-1023) from squeezing display
   copy into a narrow column that overflows the container. */
/* Anchor content to top-of-hero (not vertically-centered) so long copy stacks
   never clip against the shared Webflow nav (~140px tall) above.  */
.hero-grid { min-height:560px; display:grid; grid-template-columns:minmax(0,1fr); align-items:start; position:relative; z-index:2; }
/* Result-card lifts to bottom-right of the hero, over the composite. */
.hero .result-card { position:absolute; right:32px; bottom:32px; z-index:3; }
@media (min-width: 1024px) {
  /* Grow hero to fit content; only enforce a comfortable minimum so short
     viewports still feel like a hero. Previous min(620, 100vh-160) cap combined
     with align-items:center clipped the H1's top row under the taller Webflow
     nav (140px).
     padding-right cap: % padding is calculated off .hero (full viewport), so a
     raw 42% collapses the copy column at wide viewports (@1440 copy=575px,
     @1920 copy=374px, @2560 copy=105px). Cap at 500px so the copy column
     stays >=~680px on any desktop; H1 "YOUR PROGRAM." (62px Matroska ~609px)
     fits with margin instead of overflowing 34px at 1440. */
  .hero-grid { min-height:min(720px, calc(100vh - 80px)); padding-right: min(42%, 500px); }
}
/* Push copy well below the 140px Webflow nav so the hero has real breathing
   room. Was 96px; the H1 still felt jammed against the header strip. */
.hero-copy { padding:80px 0 28px; position:relative; z-index:2; }
@media (min-width: 1024px) {
  .hero-copy { padding-top:180px; }
}
.kicker { color:var(--paper); text-transform:uppercase; letter-spacing:3px; font-size:11px; font-weight:700; font-family:var(--label-font); display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.kicker span { width:35px; height:2px; background:var(--accent); }
.plans-heading .kicker { color:var(--ink); }
h1,h2 { margin:0; font-family:var(--header-font); font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:-0.5px; }
h1 { font-size:clamp(48px, 4.6vw, 62px); }
/* Emphasized words (`<em>`) get muted paper on section H2's (on the clean paper
 * background, the .5 opacity reads as a subtle reveal). On the HERO h1 (over
 * the composite image) that same .5 opacity reads as broken/washed. So the
 * hero h1 em keeps full paper weight — the emphasis lives in the italic-off
 * treatment + line break rhythm alone. */
h2 em { color:inherit; font-style:normal; opacity:.5; }
.hero h1 em { color:inherit; font-style:normal; opacity:1; }
.lede { max-width:520px; color:#c8c8c8; font-size:17px; line-height:1.55; margin:22px 0 26px; font-family:var(--body-font); }
.hero-actions { display:flex; align-items:center; gap:32px; }
.text-link { font-size:12px; text-transform:uppercase; font-weight:700; font-family:var(--label-font); letter-spacing:1.8px; border-bottom:1px solid #6a655e; padding-bottom:7px; background:none; border-top:0; border-left:0; border-right:0; color:inherit; padding-left:0; padding-right:0; }
.text-link:hover { border-bottom-color:var(--paper); }
.text-link span { color:var(--paper); margin-left:10px; }
.trust-row { display:flex; gap:13px; align-items:center; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); max-width:460px; }
.avatar { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--paper); border-radius:50%; color:var(--paper); font-weight:700; font-family:var(--label-font); font-size:12px; }
.trust-row b,.trust-row span { display:block; }
.trust-row b { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; font-family:var(--label-font); font-weight:700; }
.trust-row span { margin-top:5px; color:var(--muted); font-size:11px; font-family:var(--body-font); }
/* Jon — the subject. Tall column that fills the visual half of the hero,
   cropped tight around him via object-fit so his own photo's blue-rack
   background is largely cropped out and what's left is his figure sitting
   on the SS-gym backdrop layer behind. No frame, no clip-path — he reads
   as composited into the scene rather than pasted into a picture frame.
   NOTE on layout: display:block (not flex) so `width:100%` on the <img>
   fills the grid track. A flex parent with justify-content:flex-end
   collapsed the img to its intrinsic min-content and Jon rendered at ~40%
   of the column width instead of dominating it (measured empirically in
   Playwright — a spec that wasn't obvious from the code alone). */
.hero-visual { position:relative; height:720px; display:block; }
.hero-visual img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:none;
  object-fit:cover;
  /* Bias down so Jon's face + torso dominate; the ceiling/shadow above his
     head in the source photo would otherwise fill the top of the frame. */
  object-position:50% 42%;
  filter:saturate(1) contrast(1.08) drop-shadow(0 20px 40px rgba(0,0,0,.55));
  /* Radial mask centered on Jon — feathers TOP + LEFT + BOTTOM edges so his
     photo composites into the gym backdrop instead of reading as a pasted-in
     rectangle. Right edge stays hard against the viewport edge. */
  -webkit-mask-image: radial-gradient(ellipse 95% 100% at 62% 55%, black 62%, transparent 95%);
          mask-image: radial-gradient(ellipse 95% 100% at 62% 55%, black 62%, transparent 95%);
}
/* Placeholder shown until the real hero PNG lands (see .hero-visual img.placeholder in
 * additions block below). Keeps the same visual footprint so the layout doesn't shift
 * when Jon delivers the file. */
.result-card { position:absolute; right:-16px; bottom:48px; background:#0b0b0b; border:1px solid var(--paper); padding:17px 22px; display:flex; gap:11px; align-items:center; box-shadow:0 14px 35px #000; }
.result-card b { color:var(--paper); font-family:var(--header-font); font-size:44px; line-height:1; }
.result-card span { font-size:10px; letter-spacing:1.4px; line-height:1.5; font-weight:700; font-family:var(--label-font); }
.marquee { height:55px; border-block:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:30px; white-space:nowrap; overflow:clip; color:var(--muted); font-size:10px; }
.marquee span { color:var(--muted); font-size:10px; font-weight:700; font-family:var(--label-font); letter-spacing:3px; }
.tracks-section { padding:120px 0; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:80px; margin-bottom:64px; }
h2 { font-size:clamp(40px,4.2vw,60px); letter-spacing:-0.5px; }
.section-heading>p { color:#a8a8a8; line-height:1.75; font-size:16px; max-width:500px; font-family:var(--body-font); }
/* 2-col grid because Matroska's char-width is nearly Impact×1.4, so anything narrower
   than ~510px per cell can't hold single-word labels like TRANSFORMATION at bold
   headline sizes. 7 items → 3 rows of 2 + last row spans both columns for balance. */
.tracks-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.track { min-height:180px; padding:28px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; position:relative; transition:.2s; background:transparent; color:inherit; text-align:left; border-top:0; font-family:inherit; cursor:pointer; overflow:hidden; }
.track:last-child { grid-column:1 / -1; }
.track:hover { background:#111; }
.track span { color:var(--muted); font-size:11px; font-weight:700; font-family:var(--label-font); letter-spacing:1.5px; }
.track b { font-family:var(--header-font); font-weight:400; font-size:32px; line-height:.98; text-transform:uppercase; letter-spacing:-0.5px; display:block; }
.track i { position:absolute; right:22px; top:19px; color:var(--paper); font-style:normal; font-size:16px; }
.track i { position:absolute; right:22px; top:19px; color:var(--paper); font-style:normal; font-size:16px; }
.plans-section { background:var(--paper); color:var(--ink); padding:115px 0 80px; }
.plans-heading { text-align:center; max-width:740px; margin:0 auto 55px; }
.centered { justify-content:center; }
.plans-heading>p:last-child { color:#5a5a5a; line-height:1.7; font-size:16px; font-family:var(--body-font); margin-top:18px; }
/* minmax(0, 1fr) — plain `1fr` sizes to min-content and lets card width push
   the grid wider than the viewport (was blowing out horizontally at 1024).
   Same failure pattern as the tracks-grid + hero-grid. */
.plans-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:16px; }
.plan { border:1px solid #d5d5d5; padding:27px; display:flex; flex-direction:column; min-height:555px; background:#f2f2f2; }
.plan.featured { background:var(--ink); color:var(--paper); border:2px solid var(--paper); transform:translateY(-10px); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.plan-top { min-height:22px; display:flex; justify-content:space-between; align-items:center; }
.plan-top p { color:var(--ink); font-family:var(--label-font); font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin:0; }
.plan.featured .plan-top p { color:var(--paper); }
.plan-top span { padding:6px 10px; background:var(--accent); color:var(--paper); font-family:var(--label-font); font-size:9px; letter-spacing:1.5px; font-weight:700; }
.plan h3 { font-family:var(--header-font); font-weight:400; font-size:28px; line-height:1; text-transform:uppercase; margin:20px 0 16px; letter-spacing:-0.2px; }
/* Price treatment — the numeral is the anchor of the card.
   Structure: <span class="dollar">$</span><span class="amount">249</span><span class="per">/MO</span>
   The amount dominates; $ is a small superscript hugging the top-left of the number;
   /MO is a Nord label sitting at the baseline. */
.price { display:flex; align-items:flex-start; gap:4px; padding-bottom:26px; margin:0 0 4px; border-bottom:1px solid #d5d5d5; }
.featured .price { border-color:#333; }
.price .dollar { font-family:var(--header-font); font-weight:400; font-size:26px; line-height:1; color:inherit; margin-top:10px; }
/* Fluid so 3-char "$499" fits its card at 1024vw (~206px at 61px vs 256px
   card content) and still hits ~80px at 1440. Static 80 was blowing the
   plan-card grid track at intermediate desktop widths. */
.price .amount { font-family:var(--header-font); font-weight:400; font-size:clamp(56px, 6vw, 80px); line-height:.85; color:inherit; letter-spacing:-1.5px; }
.price .per { align-self:flex-end; font-family:var(--label-font); font-weight:700; font-size:10px; line-height:1; letter-spacing:1.8px; text-transform:uppercase; color:#777; margin:0 0 12px 6px; }
.featured .price .per { color:#a8a8a8; }
.plan-desc { color:#5a5a5a; min-height:70px; font-size:14px; line-height:1.6; font-family:var(--body-font); margin-top:20px; }
.featured .plan-desc { color:#b8b8b8; }
.plan ul { list-style:none; padding:0; margin:10px 0 25px; flex:1; }
.plan li { display:flex; gap:9px; margin:13px 0; font-size:14px; font-family:var(--body-font); }
.plan li span { color:var(--accent); font-weight:700; }
.plan .button { width:100%; }
.plan:not(.featured) .button { color:var(--ink); border-color:var(--ink); }
.plan:not(.featured) .button:hover { background:var(--ink); color:var(--paper); }
.button-outline { background:transparent; color:var(--ink); border-color:var(--ink); }
.button-outline:hover { background:var(--ink); color:var(--paper); }
.plans-note { text-align:center; margin-top:42px; font-size:13px; color:#5a5a5a; font-family:var(--body-font); }
.plans-note a { color:var(--ink); font-weight:700; border-bottom:1px solid #888; }
/* Coach-cred block — 2-column: stat card (left) + content stack (right).
 * Previous 3-column grid put the h2 in a middle track too narrow for its
 * Matroska glyph width, so the heading spilled into the outline "10" column
 * and the body column, reading as broken. This layout keeps each element in
 * its own lane. */
.coach-section { padding:90px 0; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:60px; align-items:center; border-bottom:1px solid var(--line); }
/* overflow:hidden here clipped the tops/bottoms of the "10" glyph because
   .coach-number uses line-height:.85 (tighter than the glyph box). Remove
   the clip; the outer .coach-section already contains overflow. */
.coach-stat { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
/* "10" font-size capped so the glyph width fits the stat column (300px) at all
 * viewport widths. Matroska "10" ≈ 1.3 × font-size wide (narrow 1 + wide 0). */
.coach-number { display:block; font-family:var(--header-font); font-size:clamp(96px, 9vw, 140px); line-height:.85; color:transparent; -webkit-text-stroke:2px var(--paper); }
/* "Years NFL" upgraded from small label to display headline (matches the h2
   clamp scale) so "10 YEARS NFL" reads as one big statement. Keep the small
   .coach-number-label class for the team-affiliation line below. */
/* clamp min was 40px which put "YEARS NFL" at 382px on a 330px shell (37px
   past viewport at 360, 7px at 390) — real clip masked by body{overflow-x:clip}.
   Drop min to 30px so at 360/390 the headline lands ~30px (~286px wide) with
   comfortable margin, still scales up to 60px on desktop where columns allow. */
.coach-stat-headline { display:block; font-family:var(--header-font); font-size:clamp(30px, 4.2vw, 60px); font-weight:400; line-height:.92; letter-spacing:-0.5px; color:var(--paper); text-transform:uppercase; padding-left:4px; }
.coach-number-label { display:block; font-family:var(--label-font); font-size:11px; font-weight:700; letter-spacing:3px; color:var(--paper); text-transform:uppercase; padding-left:4px; }
.coach-body { max-width:720px; }
.coach-body .kicker { margin-bottom:18px; }
/* Scope h2 in the coach block so display type fits its column and never
 * overlaps the stat card. Slightly tighter than the section h2 default. */
.coach-body h2 { font-size:clamp(32px, 3.6vw, 52px); margin-bottom:22px; }
.coach-body p { color:#b8b8b8; font-size:16px; line-height:1.7; margin:0 0 24px; max-width:620px; font-family:var(--body-font); }
.cta-section { text-align:center; padding:120px 0; background:radial-gradient(circle at center,#141414,var(--ink) 60%); border-bottom:1px solid var(--line); }
.cta-inner>p:nth-of-type(2) { color:#a8a8a8; margin:25px auto 32px; font-family:var(--body-font); font-size:16px; }
.cta-inner .button { min-width:240px; }
/* --- Footer — ported from strength-society.webflow.css so this page's
 *     footer matches the rest of the site exactly. Rules mirror the live
 *     declarations; only paths/units are unchanged. */
.footer-dark { background-color:var(--ink); border-bottom:1px solid #e4ebf3; padding:50px 15px 15px; position:relative; }
.container-2 { width:100%; max-width:940px; margin-left:auto; margin-right:auto; }
.footer-wrapper { justify-content:space-between; align-items:flex-start; max-width:900px; margin-left:auto; margin-right:auto; display:flex; }
.footer-brand { display:inline-block; text-decoration:none; }
.footer-brand img { display:block; max-width:100%; height:auto; }
.footer-content { column-gap:70px; row-gap:40px; grid-template-rows:auto; grid-template-columns:auto auto 1fr; grid-auto-columns:1fr; display:grid; }
.footer-block { flex-direction:column; justify-content:flex-start; align-items:flex-start; display:flex; }
.title-small { color:var(--paper); letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; font-family:Matroska,Impact,sans-serif; font-size:14px; font-weight:700; line-height:16px; }
.footer-link { color:var(--paper); text-transform:uppercase; margin-top:12px; margin-bottom:6px; font-family:Grift,"Palatino Linotype",sans-serif; font-size:14px; line-height:16px; text-decoration:none; }
.footer-link:hover { color:var(--muted); }
.footer-link.is-hidden { display:none; }
.footer-divider { background-color:#e4ebf3; width:100%; height:1px; margin-top:70px; margin-bottom:15px; }
.footer-copyright-center { color:var(--paper); text-align:center; font-size:14px; line-height:16px; font-family:Grift,"Palatino Linotype",sans-serif; }
.div-block-23 { display:flex; flex-direction:column; align-items:center; column-gap:16px; row-gap:16px; }
.div-block-22 { column-gap:32px; row-gap:32px; justify-content:space-between; align-items:center; display:flex; }
.div-block-30 { column-gap:16px; row-gap:16px; display:flex; }
.footer-link.small-gapp { margin-top:0; margin-bottom:0; }
.footer-link.small-gapp:hover { color:#575757; }
@media (max-width:900px) {
  .footer-content { grid-template-columns:1fr; margin-top:40px; column-gap:60px; }
  .footer-wrapper { flex-direction:column; align-items:center; }
  .footer-block { align-items:center; }
  .footer-divider { margin-top:60px; }
  .div-block-22 { justify-content:center; align-items:stretch; }
}
@media (max-width:600px) {
  .div-block-22 { column-gap:16px; row-gap:16px; flex-flow:column; justify-content:center; align-items:center; }
}

@media (max-width:900px) {
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-copy{padding-bottom:0}
  .hero-visual{height:520px}
  .section-heading{grid-template-columns:1fr;gap:25px}
  .tracks-grid{grid-template-columns:repeat(2,1fr)}
  .plans-grid{grid-template-columns:1fr;max-width:600px;margin:auto}
  .plan.featured{transform:none}
  .coach-section{grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:40px}
  .coach-number{font-size:110px}
}
/* Mobile (≤600px) — display type MUST FIT at 360px viewport (330px content after
   the 30px shell padding). Matroska is ~1.13× wider per char per pt than Impact,
   so Jon's mock-up sizes (61px h1, 44px h2, 34px track labels) blow past 360px on
   real phones. Every size below is capped so the longest single word in that
   element fits within its container at 360px viewport with headroom. Formula:
     max_font_px = content_px / (longest_char_count * 1.127)
   Verify with: document.documentElement.scrollWidth <= window.innerWidth AT 360.
   Do not raise these without re-running that check. */
@media (max-width:600px) {
  .shell{width:min(100% - 30px,1180px)}
  .nav{min-height:72px;padding:12px 0}
  .nav .button{display:none}
  .brand img{width:44px}
  /* Mobile hero: drop the right pad (would leave copy in a tiny column), and
     bias the composite background to show Jon (right side of image) behind the
     copy. A stronger scrim keeps display type readable over the image. */
  .hero-grid{min-height:auto;padding-right:0}
  /* Trim the mobile hero: hide the lede subcopy (the H1 + trust-row already
     carry the value prop on a small screen). Push copy DOWN below Jon's face
     in the composite (his face sits in the upper ~40% at cover-fit with
     background-position:78% center) — H1 lands over his chest/waist and the
     1% badge falls below the fold so the above-fold read is 'Jon + tagline
     under him', not 'text stacked over his face'. */
  .hero-grid{min-height:780px}
  .hero-copy{padding-top:380px;padding-bottom:28px}
  .lede{display:none}
  /* Bias composite RIGHT so Jon (right side of source) stays centred behind
     the pushed-down text, and brighten a touch — the source runs a little
     dim after cover-fit crops to portrait on phones. */
  .hero-composite{background-position:78% center;filter:brightness(1.08) contrast(1.02)}
  /* Top of hero is now empty above the pushed-down copy — kill the heavy
     top scrim (was rgba(.85) at 0%) so Jon's face reads well. Keep a light
     tint at the top so it's not washed out, ramp to stronger darkening at
     the bottom half where the H1/CTA/trust sit for display-type legibility. */
  .hero-scrim{background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,.6) 55%, rgba(2,2,2,.88) 100%)}
  /* Take the badge OUT of absolute-positioning on mobile so it can't cover
     the trust row. It becomes a static block that flows below the trust row
     as its own line, still visible but out of the way. */
  .hero .result-card{position:static;right:auto;bottom:auto;margin:16px 0 0;align-self:stretch;justify-content:center;text-align:center}
  .hero .result-card span{text-align:center}
  /* Drop the secondary "Talk to a Coach" text link on phones (Jaz spec: one
     primary CTA prominent). Phone number still available in the trust row
     credentials and in the coach section CTAs — no lost conversion path. */
  .hero-actions .text-link{display:none}
  /* h1 "ANYWHERE." 9ch → 330/(9×1.127) = 32.5px max at 360vw. Set 30px for headroom. */
  h1{font-size:30px}
  /* h2 "PROFESSIONAL" 12ch → 330/(12×1.127) = 24.4px max at 360vw. Set 22px. */
  h2{font-size:22px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:12px;margin-top:20px}
  .trust-row{margin-top:18px;padding-top:14px;gap:10px}
  .trust-row .avatar{width:36px;height:36px;font-size:11px}
  .trust-row b{font-size:11px}
  .trust-row span{font-size:12px}
  .hero-visual{height:400px;margin-top:20px}
  .hero-visual img{max-height:380px}
  .hero-visual .placeholder-label{font-size:18px}
  .result-card{right:0;bottom:20px}
  .result-card b{font-size:36px}
  .marquee{justify-content:flex-start}
  .marquee span{font-size:9px;letter-spacing:2px}
  .tracks-section,.coach-section{padding:80px 0}
  .section-heading{margin-bottom:36px}
  .tracks-grid{grid-template-columns:1fr}
  /* Reduce track padding so more content room; label at 20px fits
     "TRANSFORMATION" (14ch → 316px) inside 320px cell content. */
  .track{min-height:100px;padding:18px 20px}
  .track:last-child{grid-column:auto}
  /* TRANSFORMATION 14ch → 286/(14×1.127) = 18.1px max at 360vw single-col cell. Set 18px. */
  .track b{font-size:18px;letter-spacing:-0.3px}
  .track i{top:16px;right:18px}
  .plans-section,.cta-section{padding:80px 0}
  .plans-heading{margin-bottom:36px}
  .plan{min-height:auto;padding:24px}
  .plan h3{font-size:22px;margin:16px 0 12px}
  .price .amount{font-size:60px}
  .price .dollar{font-size:20px;margin-top:8px}
  .price .per{margin-bottom:8px}
  .plan-desc{min-height:auto;margin-top:14px}
  /* minmax(0, 1fr) — plain 1fr leaves min-content as the column min, so a
     single unbreakable word like "PROFESSIONAL" at 32px Matroska (~399px
     min-content) pushes the column past the 330px shell and everything in
     it clips. minmax(0,...) lets the column shrink freely; the child
     font-sizes below still keep long words fitting on their own. */
  .coach-section{grid-template-columns:minmax(0,1fr);gap:24px;padding:60px 0}
  .coach-number{font-size:90px;-webkit-text-stroke-width:1.5px}
  /* Was 32px which put "PROFESSIONAL" at ~399px — clipped at 360vw. Drop to
     22px matching the general h2 mobile rule; "PROFESSIONAL" now ~275px,
     fits in the 300px shell content area with margin. */
  .coach-body h2{font-size:22px}
  .cta-inner .button{min-width:0;width:100%}
  footer{padding:35px 0;align-items:flex-start;flex-direction:column}
  footer>p{order:3}
}

/* --- Additions block --- not in Jon's mock-up ------------------------------
 * (1) Visible focus + skip-link for a11y (Lighthouse a11y gate keeps this =100).
 * (2) Placeholder for the hero image until Jon delivers the PNG. The
 *     placeholder occupies the same clip-path box so layout is stable.
 * (3) Lead-gen modal that replaces every mailto: CTA in the mock-up.
 *     Design language matches Jon's card treatment on the plans section
 *     (paper background, wood accents, var(--header-font) headings).
 */

/* (1) a11y polish */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip-to-main { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; background:#1d1d1d; color:#fff; padding:8px 12px; z-index:9999; text-decoration:none; font-family:sans-serif; font-size:14px; }
.skip-to-main:focus { left:8px; top:8px; width:auto; height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* (2) hero-visual placeholder — shown until dist/images/strength-society-online.png exists */
.hero-visual img.placeholder { background:linear-gradient(135deg,#2a1d10 0%,#141210 55%,#0a0a0a 100%); min-height:400px; }
.hero-visual .placeholder-label { position:absolute; inset:auto 40px 60% 40px; text-align:center; color:var(--accent); font-family:var(--header-font); font-size:22px; letter-spacing:2px; pointer-events:none; text-transform:uppercase; z-index:1; }
.hero-visual .placeholder-label small { display:block; margin-top:6px; color:#7a736a; font:11px Arial; letter-spacing:1.5px; text-transform:none; }

/* (3) Lead-gen modal — SS house treatment */
.lead-modal[hidden] { display:none; }
.lead-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); }
.lead-modal-card { position:relative; width:100%; max-width:580px; max-height:calc(100vh - 48px); overflow-y:auto; background:var(--paper); color:var(--ink); padding:40px 36px 34px; border:2px solid var(--paper); box-shadow:0 40px 80px rgba(0,0,0,.6); }
.lead-modal h2 { font-size:44px; margin-bottom:10px; color:var(--ink); text-transform:uppercase; font-family:var(--header-font); line-height:.95; }
.lead-modal h2 em { color:var(--ink); font-style:normal; opacity:.5; }
.lead-modal .kicker { color:var(--ink); margin-bottom:14px; }
.lead-modal .kicker span { background:var(--accent); }
.lead-modal p.lead-modal-sub { color:#5a5a5a; font-size:15px; line-height:1.6; margin:0 0 22px; font-family:var(--body-font); }
.lead-modal .selected-plan { display:inline-flex; align-items:center; gap:8px; margin:0 0 22px; padding:8px 12px; background:var(--ink); color:var(--paper); font-family:var(--label-font); font-size:11px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; }
.lead-modal .selected-plan strong { color:var(--paper); }
.lead-modal .selected-plan[hidden] { display:none; }
.lead-modal label { display:block; margin-bottom:14px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; font-family:var(--label-font); color:#3d3a35; }
.lead-modal label .field-required { color:var(--accent); margin-left:4px; }
.lead-modal input[type="text"],
.lead-modal input[type="email"],
.lead-modal input[type="tel"],
.lead-modal textarea,
.lead-modal select { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid #b8b1a6; background:#fff; color:#0c0c0c; font-family:var(--body-font); font-size:14px; font-weight:400; letter-spacing:normal; text-transform:none; border-radius:0; -webkit-appearance:none; appearance:none; }
.lead-modal select { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23b87535' d='M0 0l6 8 6-8z'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.lead-modal input:focus, .lead-modal textarea:focus, .lead-modal select:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(184,117,53,.25); }
.lead-modal textarea { min-height:96px; resize:vertical; }
.lead-modal .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lead-modal .form-row label { margin-bottom:0; }
.lead-modal .button { width:100%; margin-top:22px; }
.lead-modal .lead-close { position:absolute; top:12px; right:12px; width:36px; height:36px; display:grid; place-items:center; background:transparent; border:1px solid transparent; color:#3d3a35; font-size:22px; line-height:1; padding:0; }
.lead-modal .lead-close:hover { border-color:var(--accent); color:var(--accent); }
.lead-modal .lead-fail,
.lead-modal .lead-done { display:none; padding:14px 12px; margin-top:14px; font-size:13px; }
.lead-modal .lead-fail.is-visible { display:block; background:#3a1414; color:#fca5a5; border:1px solid #7f1d1d; }
.lead-modal .lead-done.is-visible { display:block; background:#0d3a1f; color:#a7f3d0; border:1px solid #14532d; text-align:center; }
.lead-modal .honeypot { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
@media (max-width:600px) {
  .lead-modal { padding:12px; }
  .lead-modal-card { padding:28px 22px 24px; max-height:calc(100vh - 24px); }
  .lead-modal .form-row { grid-template-columns:1fr; }
  .lead-modal h2 { font-size:28px; }
}

/* (4) Parallax scroll-reveal section — the platedbypy.com pattern, pure CSS.
   `background-attachment: fixed` pins the image to the viewport so the
   section frame slides UP over it as the user scrolls, revealing the image
   through a viewport-shaped window. Zero JS, zero library.
   iOS Safari drops `fixed` attachment — mobile falls back to scroll (static
   cover crop), which still reads as a full-bleed transition break. */
.parallax-reveal { position:relative; height:640px; overflow:hidden; background:var(--ink); }
.parallax-bg {
  position:absolute; inset:0;
  background-image: url("../images/racks-parallax-final.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Match the darkened treatment of the programming hero — hides source
     compression artifacts and blends with the surrounding dark page. */
  filter: brightness(0.55);
}
@media (max-width:900px) {
  .parallax-reveal { height:420px; }
  /* iOS Safari + most Android browsers don't honor `fixed` on touch scroll —
     the image would jump / not render. Static-cover is the honest fallback. */
  .parallax-bg { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  /* Fixed attachment IS motion (image slides relative to page). Users who
     opt out get the same visual, statically anchored to the section. */
  .parallax-bg { background-attachment: scroll; }
}