@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&family=IBM+Plex+Mono:wght@400;500&family=Fraunces:ital,wght@1,400;1,500&display=swap');
  :root{
    --black:#111111;
    --cream:#F9F6F2;
    --white:#FFFFFF;
    --orange:#FF8210;
    --gray-on-black: rgba(249,246,242,0.55);
    --gray-on-cream: rgba(17,17,17,0.55);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--black); color:var(--white); overflow-x:hidden;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;}

  /* =====================================================================
     SHARED / GLOBAL — utility classes used across multiple sections.
     .pad = standard section padding. .eyebrow = small orange label text
     (e.g. "// THE PRFM PHILOSOPHY"). .reveal / .reveal-group = scroll-in
     fade animation, applied via JS at the bottom of the file — don't
     remove the "reveal" class or elements won't appear on scroll.
     .bracket-btn / .ghost-btn = the two button styles used everywhere
     (solid orange vs outlined). Edit here to restyle ALL buttons at once.
     ===================================================================== */
  .pad{padding:88px 56px;}
  .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.05em; color:var(--orange);}
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  .reveal-group > *{transition-delay:calc(var(--i, 0) * 0.08s);}
  .h2{font-weight:900; font-size:clamp(26px,3.4vw,42px); line-height:1.12; letter-spacing:-0.01em; text-transform:uppercase;}
  .body-text{font-size:15px; line-height:1.7;}
  .grid-bg{
    background-image:
      repeating-linear-gradient(0deg, rgba(255,130,16,0.045) 0px, rgba(255,130,16,0.045) 1px, transparent 1px, transparent 64px),
      repeating-linear-gradient(90deg, rgba(255,130,16,0.045) 0px, rgba(255,130,16,0.045) 1px, transparent 1px, transparent 64px);
  }
  .bracket-btn{background:var(--orange); color:var(--black); border:none; font-family:'Inter',sans-serif; font-weight:500; font-size:13px; letter-spacing:0.04em; padding:15px 26px; cursor:pointer; transition:filter .15s; border-radius:6px;}
  .bracket-btn:hover{filter:brightness(1.08);}
  .bracket-btn:active{transform:scale(0.96);}
  /* LAUNCH-DAY SWAP: every purchase/signup CTA carries class="waitlist-cta" and data-launch-text.
     To flip every one of these buttons to its launch-day text in one move, see LAUNCH_MODE
     near the top of the <script> tag at the bottom of this file — change false to true.
     Same class is used here to capitalise every one of these CTAs in one place — pre-launch
     and launch-day text both render uppercase without touching the markup in 15 places. */
  .waitlist-cta{text-transform:uppercase;}
  .ghost-btn{background:transparent; color:var(--black); border:1px solid rgba(17,17,17,0.3); font-family:'Inter',sans-serif; font-weight:500; font-size:13px; letter-spacing:0.04em; padding:14px 25px; cursor:pointer; border-radius:6px;}
  .ghost-btn:hover{background:rgba(17,17,17,0.05);}
  .input{padding:13px 16px; border:none; font-family:'IBM Plex Mono',monospace; font-size:13px; min-width:200px; outline:none; border-radius:6px;}
  /* Spam-trap field for the three email forms — must stay visually hidden but present in the DOM
     (that's what makes it work as a honeypot), so it's a class, not an inline style, per the
     "no inline styles" rule below. */
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
  .tag-pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.04em; padding:5px 10px; border:1px solid currentColor;}

  /* =====================================================================
     01 CONSOLE BAR — styles the sticky top nav (matches HTML section 01).
     .wordmark sizes the logo image. .engage is the always-visible CTA
     button on the right side of the nav.
     ===================================================================== */
  html{scroll-behavior:smooth;}
  /* The nav bar is position:sticky and sits on top of the page at all
     scroll positions. Without this, clicking an anchor link (#programmes,
     #philosophy, #contact) lands the section flush at the very top of the
     document, so the sticky bar overlaps/covers its first ~70-90px —
     looks like the link "missed." This offsets the landing spot so the
     section's actual content clears the bar. #top isn't included here —
     it's a plain non-sticky marker above the nav bar (see index.html),
     not a section that needs clearance. */
  #programmes, #philosophy, #contact{scroll-margin-top:96px;}
  .console-bar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 40px; background:var(--black); border-bottom:1px solid rgba(255,130,16,0.25);}
  .wordmark{font-weight:900; font-size:17px; letter-spacing:-0.02em;}
  .wordmark img{height:20px; display:block;}
  footer .wordmark img{height:16px; margin:0 auto 14px;}
  .nav-links{display:flex; align-items:center; gap:30px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-on-black);}
  .nav-links a{text-decoration:none; color:inherit; transition:color .15s;}
  .nav-links a:hover{color:var(--orange);}
  .engage{background:transparent; border:1px solid var(--orange); color:var(--orange); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; padding:9px 16px; cursor:pointer; transition:background 0.15s,color 0.15s; border-radius:6px;}
  .engage:hover{background:var(--orange); color:var(--black);}
  .engage:active{transform:scale(0.96);}

  /* =====================================================================
     02 HERO — matches HTML section 02. .hero is the 2-column grid (copy
     left, photo right — stacks to 1 column on mobile, see @media block).
     .hero-visual's background-image holds the hero photo (hero-athlete.jpg)
     with an orange gradient overlay baked into the same CSS property —
     to swap the photo, only change the url('...') part, keep the
     linear-gradient(...) in front of it or the orange treatment is lost.
     Several elements here animate in on page load (not on scroll) via
     @keyframes fadein/strikeline/pulseglow — these fire once, automatically,
     no JS needed.
     ===================================================================== */
  .hero{position:relative; min-height:600px; display:grid; grid-template-columns:1.1fr 0.9fr; overflow:hidden; background:var(--black);}
  .hero-copy{padding:80px 56px; display:flex; flex-direction:column; justify-content:center; z-index:2;}
  .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--orange); letter-spacing:0.05em; margin-bottom:24px; opacity:0; animation:fadein 0.5s ease-out 0.1s forwards;}
  @keyframes fadein{ to{opacity:1;} }
  .headline{font-weight:900; font-size:clamp(32px,4.6vw,52px); line-height:1.08; letter-spacing:-0.01em; text-transform:uppercase;}
  .strike{position:relative; display:inline-block;}
  .strike::after{content:''; position:absolute; left:0; top:50%; width:0; height:3px; background:var(--orange); animation:strikeline 0.5s ease-out 0.5s forwards;}
  @keyframes strikeline{ to{width:100%;} }
  .pulse-word{color:var(--orange); display:inline-block; animation:pulseglow 1.1s ease-out 1.05s 1;}
  @keyframes pulseglow{ 0%{text-shadow:0 0 0 rgba(255,130,16,0);} 40%{text-shadow:0 0 18px rgba(255,130,16,0.7);} 100%{text-shadow:0 0 0 rgba(255,130,16,0);} }
  .headline-line{display:block; opacity:0; animation:fadein 0.5s ease-out 0.25s forwards;}
  .headline-line.two{animation-delay:0.55s;}
  .hero-sub{color:var(--gray-on-black); font-size:15px; line-height:1.65; max-width:420px; margin-top:26px; opacity:0; animation:fadein 0.5s ease-out 1.3s forwards;}
  .cta-row{margin-top:36px; opacity:0; animation:fadein 0.5s ease-out 1.5s forwards;}
  .hero-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
  .hero .bracket-btn{padding:15px 26px; animation:ring 3s ease-in-out 2s infinite;}
  /* Hero form reads as the quick/secondary entry point — deliberately smaller
     than the orange strip's form below it (the "main" one). Overrides the
     shared .input and .hero .bracket-btn sizing for this form only. */
  .hero-form .input{padding:9px 12px; font-size:12px; min-width:130px;}
  .hero-form .bracket-btn{padding:9px 18px; font-size:12px;}
  @keyframes ring{ 0%,100%{box-shadow:0 0 0 0 rgba(255,130,16,0);} 50%{box-shadow:0 0 0 8px rgba(255,130,16,0.18);} }
  .hero-price{margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray-on-black); letter-spacing:0.02em;}
  .hero-price .price-orange{color:var(--orange); font-weight:500;}
  .hero-price a{color:var(--white); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,0.3); transition:text-decoration-color .15s, color .15s;}
  .hero-price a:hover{color:var(--orange); text-decoration-color:var(--orange);}
  .hero-visual{position:relative;
    background-image:linear-gradient(160deg, rgba(255,130,16,0.34), rgba(17,17,17,0.8)), url('../images/hero-athlete.jpg');
    background-size:cover; background-position:center 30%;
    filter:grayscale(0.35) contrast(1.1);
    clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  }
  .photo-label{position:absolute; top:16px; right:16px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.04em; color:rgba(249,246,242,0.85); background:rgba(17,17,17,0.55); padding:4px 9px;}
  .photo-label.on-light{color:rgba(17,17,17,0.8); background:rgba(249,246,242,0.7);}
  .reticle{position:absolute; width:18px; height:18px; border-color:var(--orange); border-style:solid; border-width:0;}
  .reticle.tl{top:24px; left:24px; border-top-width:2px; border-left-width:2px;}
  .reticle.br{bottom:24px; right:24px; border-bottom-width:2px; border-right-width:2px;}
  .visual-tag{position:absolute; left:24px; bottom:24px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--orange); letter-spacing:0.06em;}

  /* =====================================================================
     STAT ROW — reused component, appears in HTML section 08 (Coach Ben)
     for the "17 years / 3 countries / 1000+ clients" count-up numbers. .on-cream
     variant is for use on cream backgrounds. The actual counting-up
     animation is JS, driven by the data-target="N" attribute on each
     number — see the "count-up stats" script at the bottom of the file.
     ===================================================================== */
  .stat-row{display:flex; border-top:1px solid rgba(255,130,16,0.25); border-bottom:1px solid rgba(255,130,16,0.25);}
  .stat-row.on-cream{border-color:rgba(17,17,17,0.15);}
  .stat{flex:1; padding:28px 40px; text-align:center; border-right:1px solid rgba(255,130,16,0.15);}
  .stat-row.on-cream .stat{border-right-color:rgba(17,17,17,0.1);}
  .stat:last-child{border-right:none;}
  .stat .num{font-family:'IBM Plex Mono',monospace; font-size:32px; font-weight:500; color:var(--orange);}
  .stat .lbl{font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-on-black); margin-top:6px;}
  .stat-row.on-cream .lbl{color:var(--gray-on-cream);}

  /* =====================================================================
     03 ORANGE WAITLIST STRIP — matches HTML section 03. Also reused
     (with inline style overrides) for HTML section 07 GUARANTEE, which
     is the same .strip class stacked into a column instead of a row.
     ===================================================================== */
  .strip{background:var(--orange); color:var(--black); padding:44px 56px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;}
  .strip h2{font-weight:900; font-size:clamp(21px,2.8vw,30px); text-transform:uppercase; max-width:520px;}
  .strip-sub{font-size:11px; letter-spacing:0.04em; color:rgba(17,17,17,0.7); font-family:'IBM Plex Mono',monospace; margin-top:0;}
  .strip-form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px;}
  .strip .input{background:var(--white);}
  .strip-mark{height:20px; display:block; margin-bottom:0;}

  /* 07 GUARANTEE modifier — logo becomes a corner badge, headline/subtext go side by side.
     align-items:start (not center) is deliberate: centering by row-height was pulling the
     subtext ABOVE the headline's visual top whenever the two blocks had uneven heights.
     Top-aligning both, then nudging the subtext down with a fixed margin, gives predictable
     "headline, subtitle sits just under it" behaviour regardless of how each block wraps. */
  .strip.guarantee{position:relative; padding:64px 56px;}
  .guarantee-mark{position:absolute; top:28px; left:32px; height:18px; display:block;}
  .guarantee-header{display:grid; grid-template-columns:1.1fr 0.9fr; gap:38px; align-items:start; max-width:980px; width:100%; margin:0 auto;}
  .guarantee-sub{margin-top:6px; font-size:14px; line-height:1.6; color:rgba(17,17,17,0.75);}
  .btn-black{background:var(--black); color:var(--white); border:none; font-weight:500; font-family:'IBM Plex Mono',monospace; font-size:12px; padding:13px 22px; cursor:pointer; white-space:nowrap; border-radius:6px;}
  .btn-black:hover{filter:brightness(1.3);}

  /* =====================================================================
     04 PHILOSOPHY — matches HTML section 04 (cream background). .pillars
     is the 3-column grid — stays side-by-side at all viewport widths above
     480px. Orange left border accent, orange right border on the last pillar
     to cap the row. Titles centered above text within each compartment.
     ===================================================================== */
  .on-cream{background:var(--cream); color:var(--black);}
  .philosophy-header{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; text-align:center;}
  .philosophy-body{color:var(--gray-on-cream); margin-top:26px;}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px;}
  .pillar{border-left:3px solid var(--orange); padding:0 20px 0 22px; display:flex; flex-direction:column; align-items:center; text-align:center;}
  .pillar:last-child{border-right:3px solid var(--orange);}
  .pillar-title{font-family:'Inter',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.01em; color:var(--black); margin-bottom:10px;}
  .pillar p{color:var(--gray-on-cream); font-size:14px; line-height:1.6;}

  /* =====================================================================
     05 HOW IT WORKS — matches HTML section 05. 5-column step row,
     collapses to 2 columns on mobile.
     ===================================================================== */
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:56px;}
  .step{text-align:center;}
  .step .num{font-family:'IBM Plex Mono',monospace; font-size:40px; font-weight:500; color:var(--orange); line-height:1;}
  .step .lbl{margin-top:14px; font-size:14px; font-weight:500;}

  /* =====================================================================
     06 PROGRAMME TABLE — three visually distinct tiers, each in its own
     sub-grid wrapped in a faint dashed border. This keeps the card layout
     completely untouched while showing clear clustering.

     .prog-tiers is the outer column — three .prog-tier-group blocks stacked.
     Each group has its own CSS grid so spans are independent per tier.
     Pro's existing solid orange border + glow naturally elevates it above
     the dashed-border tiers — no extra treatment needed.

     .prog-tier-label is the small label above each group.
     .tier-entry  → 2 equal columns (Base, Build)
     .tier-goals  → 3 equal columns (Strong, Capacity, Prime)
     .tier-access → 3fr + 2fr columns (Pro wide, Custom narrower)
     ===================================================================== */
  .prog-tiers{display:flex; flex-direction:column; gap:12px; margin-top:48px;}

  .prog-tier-group{position:relative; border:1px dashed rgba(255,130,16,0.25); border-radius:20px; padding:20px;}
  /* Pro tier: no dashed border — Pro already has solid orange border + glow.
     Remove the dashed container so it doesn't double-border */
  .prog-tier-group.tier-access{border:none; padding:0; gap:12px; display:flex; flex-direction:column;}

  .prog-tier-label{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--gray-on-cream); margin-bottom:14px; display:block;}

  .tier-entry-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  .tier-goals-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .tier-access-grid{display:grid; grid-template-columns:3fr 2fr; gap:20px;}

  /* Individual card styles — unchanged from original */
  .prog-card{position:relative; display:flex; flex-direction:column; border-radius:16px; padding:26px 22px; gap:8px;}
  .prog-card.dark{background:var(--black); color:var(--white);}
  .prog-card.outline{background:transparent; color:var(--black); border:1px solid rgba(255,130,16,0.4);}
  .card-kicker{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange);}
  .card-num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--orange);}
  .card-name{font-weight:900; font-size:19px; text-transform:uppercase; line-height:1.1;}
  .card-detail{font-size:13px; line-height:1.55; color:var(--gray-on-black); flex:1; margin-top:2px;}
  .prog-card.outline .card-detail{color:var(--gray-on-cream);}
  .card-price{font-family:'IBM Plex Mono',monospace; font-size:21px; margin-top:10px;}
  .card-price .price-week{display:block; font-size:10px; font-weight:400; color:var(--gray-on-black); margin-top:3px;}
  .prog-card.outline .card-price .price-week{color:var(--gray-on-cream);}
  .prog-card .waitlist-cta{margin-top:14px; align-self:flex-start;}

  .card-ribbon{position:absolute; top:-11px; left:20px; background:var(--orange); color:var(--black); font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.06em; padding:4px 10px; font-weight:500; border-radius:2px;}
  .card-ribbon.wide{top:-12px; left:22px; font-size:10px; padding:6px 20px;}

  /* Pro card — wide layout, split left/right */
  .prog-card.pro{background:var(--black); color:var(--white); border:1px solid var(--orange); box-shadow:0 0 0 1px rgba(255,130,16,0.15), 0 12px 32px rgba(255,130,16,0.12); flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; padding:32px 32px 28px;}
  .prog-card.pro .pro-copy{max-width:60%;}
  .prog-card.pro .card-detail{margin-top:6px; flex:none;}
  .prog-card.pro .pro-order{display:flex; align-items:center; gap:20px; flex-shrink:0;}
  .prog-card.pro .card-price{margin-top:0; font-size:26px;}
  .prog-card.pro .waitlist-cta{margin-top:0;}
  .pro-value{display:inline-block; margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.05em; color:var(--orange); background:rgba(255,130,16,0.1); padding:5px 10px; border-radius:4px;}

  /* Wayfinding below the tiers — soft peach "underlay" pill behind the Base → Custom breadcrumb */
  .progress-path{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 10px;
    margin:32px auto 0; max-width:fit-content;
    padding:16px 30px;
    background:linear-gradient(90deg, rgba(255,130,16,0.16), rgba(255,130,16,0.03));
    border-radius:100px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em;
    color:var(--gray-on-cream);
  }
  .progress-path span.node{color:var(--black); font-weight:600; white-space:nowrap;}
  .progress-path span.arrow{color:var(--orange);}

  /* Mobile: all sub-grids collapse to single column */
  @media(max-width:900px){
    .tier-entry-grid,.tier-goals-grid,.tier-access-grid{grid-template-columns:1fr;}
    .prog-card.pro{flex-direction:column; align-items:flex-start; padding:26px 22px;}
    .prog-card.pro .pro-copy{max-width:100%;}
    .prog-card.pro .pro-order{width:100%; justify-content:space-between; margin-top:6px;}
    .card-price{font-size:19px;}
  }

  /* Blog carousel */
  .blog-section{padding:88px 56px; background:var(--black); border-bottom:1px solid rgba(255,130,16,0.15);}
  .blog-track-wrap{position:relative; overflow:hidden; margin-top:48px; cursor:grab;}
  .blog-track-wrap:active{cursor:grabbing;}
  .blog-track{display:flex; gap:24px; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.25,.8,.25,1); will-change:transform;}
  .blog-card{background:rgba(249,246,242,0.04); border:1px solid rgba(255,130,16,0.12); border-radius:16px; padding:32px 28px; flex:0 0 360px; transition:transform .35s ease, opacity .35s ease, border-color .35s ease; user-select:none;}
  .blog-card.side{flex:0 0 300px; opacity:0.38; transform:scale(0.91); pointer-events:none;}
  .blog-card.center{border-color:rgba(255,130,16,0.4); box-shadow:0 0 0 1px rgba(255,130,16,0.1), 0 8px 32px rgba(0,0,0,0.4);}
  .blog-nav{display:flex; justify-content:center; gap:16px; margin-top:32px;}
  .blog-nav button{background:transparent; border:1px solid rgba(249,246,242,0.15); color:rgba(249,246,242,0.5); font-family:'IBM Plex Mono',monospace; font-size:16px; width:40px; height:40px; border-radius:6px; cursor:pointer; transition:border-color .15s, color .15s; display:flex; align-items:center; justify-content:center;}
  .blog-nav button:hover{border-color:var(--orange); color:var(--orange);}
  .blog-dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
  .blog-dot{width:6px; height:6px; border-radius:50%; background:rgba(249,246,242,0.2); transition:background .2s;}
  .blog-dot.active{background:var(--orange);}
  .blog-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em; color:var(--orange); margin-bottom:14px;}
  .blog-title{font-weight:700; font-size:18px; line-height:1.35; color:var(--white);}
  .blog-meta{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gray-on-black); margin-top:12px; letter-spacing:0.04em;}
  /* Softened notify button — muted by default, orange on hover */
  .blog-soon{display:inline-block; margin-top:22px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(249,246,242,0.45); letter-spacing:0.05em; border:1px solid rgba(249,246,242,0.15); padding:8px 16px; border-radius:6px; transition:color .15s, border-color .15s; cursor:pointer;}
  .blog-soon:hover{color:var(--orange); border-color:rgba(255,130,16,0.4);}
  /* Final CTA gets a slightly more distinct top to separate from blog */
  #contact{border-top:1px solid rgba(255,130,16,0.2);}
  @media(max-width:900px){
    .blog-section{padding:64px 24px;}
    .blog-card.side{display:none;}
    .blog-card{flex:0 0 auto; width:100%;}
  }

  /* =====================================================================
     08 COACH BEN — matches HTML section 08 (cream background). .ben-photo's
     background-image holds a real photo of Ben competing (ben-lunge-event.jpg)
     — confirmed directly with Ben. The policy is NOT "no photos of Ben"; it's
     "don't make the brand ABOUT Ben." So his photo stays contained to this one
     section — don't reuse it, or the other unused Ben photos sitting in
     /images, anywhere else on the page just because they're available. Same
     rule as the hero photo: keep the gradient in front of the url('...') when
     swapping images, or the orange overlay treatment is lost. .ben-grid is
     the 2-column layout (photo + bio), stacks to 1 column on mobile.
     ===================================================================== */
  .ben-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
  .ben-photo{position:relative; aspect-ratio:3/4;
    background-image:linear-gradient(160deg, rgba(255,130,16,0.22), rgba(17,17,17,0.5)), url('../images/ben-lunge-event.jpg');
    background-size:cover; background-position:center top;
    filter:contrast(1.06);
    clip-path:polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
  }
  .ben-photo .reticle{border-color:var(--orange);}
  .ben-headline{font-weight:900; font-size:clamp(26px,3.2vw,40px); text-transform:uppercase; line-height:1.1; margin-top:16px;}
  .ben-bio{margin-top:20px; max-width:520px; color:var(--gray-on-cream); font-size:15px; line-height:1.7;}

  /* =====================================================================
     09 TESTIMONIALS — stacked vertically, one per row. Each .quote-card
     is horizontal: image panel on left (fixed width, full card height,
     rounded-left corners), quote content on right. The image shows the
     person and their achievement context. To swap a photo: update img src.
     ===================================================================== */
  .quotes{display:flex; flex-direction:column; gap:20px; margin-top:48px;}
  .quote-card{background:rgba(249,246,242,0.04); border:1px solid rgba(255,130,16,0.12); border-radius:16px; overflow:hidden; display:flex; flex-direction:row; align-items:stretch;}
  .quote-photo{width:180px; flex-shrink:0; overflow:hidden; background:rgba(255,130,16,0.08);}
  .quote-photo img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
  .quote-content{padding:32px 36px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .quote-meta{display:flex; flex-direction:column; gap:4px;}
  .quote-meta .name{font-weight:700; font-size:15px; color:var(--white);}
  .quote-meta .journey{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--orange); letter-spacing:0.05em;}
  .quote .stars{color:var(--orange); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:3px;}
  .quote blockquote{font-family:'Fraunces',serif; font-style:italic; font-size:18px; line-height:1.6; color:rgba(249,246,242,0.9);}

  /* =====================================================================
     10 PULL QUOTE — matches HTML section 10. This is Ben's own quote
     about his coaching philosophy (attributed to him as founder), not a
     client testimonial — it's intentionally placed right after the
     testimonials section, so keep the "FOUNDER, PRFM" attribution
     visible to avoid it being misread as a 4th client review.
     ===================================================================== */
  .pullquote{text-align:center; position:relative;}
  .qmark{font-family:'Fraunces',serif; font-size:140px; color:rgba(17,17,17,0.08); line-height:1; position:absolute; top:-40px; left:50%; transform:translateX(-50%);}
  .pullquote blockquote{font-family:'Fraunces',serif; font-style:italic; font-size:clamp(20px,2.6vw,28px); line-height:1.5; max-width:760px; margin:0 auto; position:relative;}
  .pullquote .attr{margin-top:28px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em; color:var(--gray-on-cream);}

  /* =====================================================================
     11 FINAL CTA + FOOTER — matches HTML section 11. .final-form is the
     closing email capture, stacks to full-width on mobile. .final-mark is
     a small white logo (section background is black) placed above the
     tag-pill — a quiet echo of the hero logo to bookend the page before
     the footer repeats it once more. Footer holds the logo (white
     version, since footer background is black) and the copyright/
     location line.
     ===================================================================== */
  .final-mark{height:24px; display:block; margin-bottom:20px;}
  .final-headline{font-weight:900; font-size:clamp(30px,4.2vw,50px); text-transform:uppercase; line-height:1.08; margin-top:18px;}
  .final-sub{color:var(--gray-on-black); margin-top:18px; max-width:540px; font-size:15px;}
  .final-form{display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; justify-content:center;}
  .fine-print{margin-top:24px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gray-on-black); max-width:480px;}

  footer{padding:32px 56px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gray-on-black); border-top:1px solid rgba(255,130,16,0.15);}
  footer .wordmark{display:flex; justify-content:center;}

  /* =====================================================================
     MOBILE OVERRIDES — everything below this point only applies at
     screen widths under 900px (phones/small tablets). This is where
     multi-column grids collapse to single columns, side padding shrinks,
     etc. If a section looks right on desktop but wrong on mobile, the
     fix usually belongs in here, not in the section's main rules above.
     ===================================================================== */
  /* Sub-grids on tablet: 3-col goals grid steps to 2-col */
  @media (max-width: 1200px){
    .tier-goals-grid{grid-template-columns:repeat(2,1fr);}
    .tier-access-grid{grid-template-columns:1fr;}
    .prog-card.pro{flex-direction:column; align-items:flex-start; padding:26px 22px;}
    .prog-card.pro .pro-copy{max-width:100%;}
    .prog-card.pro .pro-order{width:100%; justify-content:space-between; margin-top:6px;}
  }
  @media (max-width: 900px){
    .pad{padding:64px 24px;}
    .console-bar{padding:14px 22px;}
    .hero{grid-template-columns:1fr;}
    .hero-visual{min-height:220px; clip-path:none;}
    .hero-copy{padding:48px 24px;}
    .stat-row{flex-wrap:wrap;}
    .stat{flex:1 1 33%;}
    .strip{padding:32px 24px;}
    .strip.guarantee{padding:40px 24px;}
    .guarantee-mark{position:static; margin:0 auto 20px;}
    .guarantee-header{grid-template-columns:1fr; gap:20px;}
    .steps{grid-template-columns:repeat(2,1fr); gap:32px;}
    .tier-entry-grid,.tier-goals-grid,.tier-access-grid{grid-template-columns:1fr;}
    .ben-grid{grid-template-columns:1fr; gap:32px;}
    .philosophy-header{grid-template-columns:1fr; gap:24px;}
    .ben-photo{clip-path:none;}
    .quotes{gap:14px;}
    .quote-card{flex-direction:column;}
    .quote-photo{width:100%; height:200px;}
    .quote-content{padding:24px 22px;}
    .final-form{flex-direction:column;}
    .final-form .input, .final-form .bracket-btn{width:100%;}
    .hero-form{flex-direction:column;}
    .hero-form .input, .hero-form .bracket-btn{width:100%;}
  }
  /* Small phone: collapse pillars to single column, hide nav links */
  @media (max-width: 480px){
    .console-bar{padding:12px 18px;}
    .nav-links{display:none;}
    .engage{padding:9px 14px; font-size:11px;}
    .pillars{grid-template-columns:1fr; gap:28px;}
  }