:root{
    --void:#08080a;
    --void-2:#111113;
    --void-3:#19191c;
    --fog:#f0f0ee;
    --dim:#8a8a8e;
    --dim-2:#54545a;
    --line:rgba(240,240,238,0.12);
    --line-soft:rgba(240,240,238,0.07);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--void); color:var(--fog); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--fog); color:var(--void);}

  .eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.28em; color:var(--dim); text-transform:uppercase;}

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 40px; border-bottom:1px solid var(--line);
    background:rgba(8,8,10,0.85); backdrop-filter:blur(10px);
  }
  .nav-brand{display:flex; align-items:center; gap:10px;}
  .nav-brand img{height:28px;}
  .nav-brand span{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em; color:var(--dim);}
  .nav-links{display:flex; gap:26px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.04em; color:var(--dim);}
  .nav-links a:hover{color:var(--fog);}
  .nav-cta{border:1px solid var(--fog); color:var(--fog); padding:8px 16px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.06em; transition:all .2s;}
  .nav-cta:hover{background:var(--fog); color:var(--void);}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding:130px 40px 100px; text-align:center; border-bottom:1px solid var(--line); overflow:hidden;}
  .hero-content{position:relative; z-index:1;}
  .hero img.badge{width:104px; margin-bottom:28px; filter:drop-shadow(0 0 30px rgba(240,240,238,0.18));}
  .hero .eyebrow{display:block; margin-bottom:20px;}
  .hero h1{font-family:'Bebas Neue',sans-serif; font-size:clamp(50px,9vw,118px); line-height:0.94; text-transform:uppercase;}
  .hero p{max-width:520px; margin:26px auto 0; color:var(--dim); line-height:1.75; font-size:15px;}
  .hero-ctas{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .btn-solid{background:var(--fog); color:var(--void); padding:14px 28px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.07em; text-transform:uppercase; transition:opacity .2s;}
  .btn-solid:hover{opacity:0.85;}
  .btn-outline{border:1px solid var(--line); padding:13px 28px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.07em; text-transform:uppercase; transition:border-color .2s;}
  .btn-outline:hover{border-color:var(--fog);}

  section{padding:96px 40px; border-bottom:1px solid var(--line);}
  .section-head{margin-bottom:56px; max-width:640px;}
  .section-head .eyebrow{display:block; margin-bottom:16px;}
  .section-head h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,5vw,54px); text-transform:uppercase; line-height:1;}
  .section-head p{color:var(--dim); margin-top:16px; font-size:15px; line-height:1.7;}

  /* ---------- MISSION ---------- */

  /* ---------- RUN CLUB ---------- */
  .coords{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .coord{background:var(--void-2); padding:34px 28px; position:relative;}
  .coord .lat{font-family:'Space Mono',monospace; font-size:10px; color:var(--dim-2); letter-spacing:0.1em; margin-bottom:14px;}
  .coord h3{font-family:'Bebas Neue',sans-serif; font-size:27px; text-transform:uppercase; margin-bottom:10px;}
  .coord p{font-size:13.5px; color:var(--dim); line-height:1.7;}
  .coord .note{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:11px; color:var(--fog); letter-spacing:0.02em;}

  /* ---------- HYBRID CLASSES ---------- */
  .hybrid-layout{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .schedule-list{border-top:1px solid var(--line);}
  .schedule-row{display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line); font-family:'Space Mono',monospace; font-size:13px;}
  .schedule-row span:first-child{color:var(--fog);}
  .schedule-row span:last-child{color:var(--dim);}
  .hybrid-copy p{color:var(--dim); font-size:15px; line-height:1.8; margin-bottom:18px;}

  /* ---------- PRICING ---------- */
  .pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .price-card{background:var(--void-2); padding:32px 24px; display:flex; flex-direction:column;}
  .price-card.best{background:var(--void-3);}
  .price-card .tag{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; color:var(--dim-2); text-transform:uppercase; margin-bottom:18px;}
  .price-card .tag.best-tag{color:var(--fog);}
  .price-card h3{font-family:'Bebas Neue',sans-serif; font-size:22px; text-transform:uppercase; margin-bottom:6px;}
  .price-card .price{font-family:'Bebas Neue',sans-serif; font-size:44px; margin:10px 0 4px;}
  .price-card .per{font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); margin-bottom:16px;}
  .price-card .desc{font-size:12.5px; color:var(--dim); line-height:1.6; flex:1;}
  .price-card .book{margin-top:20px; border:1px solid var(--line); text-align:center; padding:11px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;}
  .price-card.best .book{border-color:var(--fog); background:var(--fog); color:var(--void);}

  /* ---------- COACHES ---------- */
  .coach-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .coach-card{background:var(--void-2); padding:38px 32px;}
  .coach-card .initials{
    width:52px; height:52px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:14px; color:var(--fog); margin-bottom:20px;
  }
  .coach-card h3{font-family:'Bebas Neue',sans-serif; font-size:26px; text-transform:uppercase;}
  .coach-card .role{font-family:'Space Mono',monospace; font-size:11px; color:var(--dim-2); letter-spacing:0.05em; margin:6px 0 16px; text-transform:uppercase;}
  .coach-card p{font-size:13.5px; color:var(--dim); line-height:1.7; margin-bottom:18px;}
  .coach-tags{display:flex; gap:8px; flex-wrap:wrap;}
  .coach-tags span{font-family:'Space Mono',monospace; font-size:10px; border:1px solid var(--line); padding:5px 10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.04em;}

  /* ---------- 1:1 COACHING ---------- */
  .coaching-grid{display:grid; grid-template-columns:1fr; max-width:620px; gap:1px; background:var(--line); border:1px solid var(--line);}
  .coaching-card{background:var(--void-2); padding:40px 34px;}
  .coaching-card h3{font-family:'Bebas Neue',sans-serif; font-size:28px; text-transform:uppercase; margin-bottom:6px;}
  .coaching-card .sub{font-family:'Space Mono',monospace; font-size:11px; color:var(--dim-2); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:18px;}
  .coaching-card p{font-size:14px; color:var(--dim); line-height:1.7; margin-bottom:24px;}
  .coaching-card .cta-row{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:18px;}
  .coaching-card .cta-row .price-tag{font-family:'Space Mono',monospace; font-size:11px; color:var(--dim);}
  .coaching-card .cta-row .book-link{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; border-bottom:1px solid var(--fog); padding-bottom:2px;}

  /* ---------- CTA ---------- */
  .join-section{text-align:center; padding:140px 40px; border-bottom:none;}
  .join-section .eyebrow{display:block; margin-bottom:20px;}
  .join-section h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(42px,8vw,100px); text-transform:uppercase; line-height:0.96;}
  .join-section p{color:var(--dim); max-width:460px; margin:24px auto 36px; font-size:15px; line-height:1.7;}
  .join-section .fine{margin-top:26px; font-family:'Space Mono',monospace; font-size:11px; color:var(--dim-2); letter-spacing:0.03em;}

  /* ---------- FOOTER ---------- */
  footer{padding:50px 40px 36px; border-top:1px solid var(--line);}
  .foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:44px;}
  .foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .foot-brand img{height:22px;}
  .foot-brand span{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--dim);}
  .foot-brand .loc{font-size:12.5px; color:var(--dim-2); font-family:'Space Mono',monospace; margin-top:4px;}
  .foot-col h4{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; color:var(--dim-2); text-transform:uppercase; margin-bottom:14px;}
  .foot-col div{font-size:12.5px; color:var(--dim); line-height:2;}
  .foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'Space Mono',monospace; font-size:10.5px; color:var(--dim-2); letter-spacing:0.03em; border-top:1px solid var(--line); padding-top:24px;}

  @media(max-width:820px){
    .coords, .coach-grid, .coaching-grid{grid-template-columns:1fr;}
    .pricing-grid{grid-template-columns:repeat(2,1fr);}
    .hybrid-layout{grid-template-columns:1fr; gap:36px;}
    section{padding:64px 24px;}
    .hero{padding:110px 24px 70px;}
  }

  /* ---------- MULTI-PAGE NAV STATE ---------- */
  .nav-links a.active{color:var(--fog);}
  .page-head{padding:96px 40px 56px; text-align:center; border-bottom:1px solid var(--line);}
  .page-head .eyebrow{display:block; margin-bottom:18px;}
  .page-head h1{font-family:'Bebas Neue',sans-serif; font-size:clamp(42px,7vw,86px); line-height:0.96; text-transform:uppercase;}
  .page-head p{max-width:520px; margin:22px auto 0; color:var(--dim); line-height:1.75; font-size:15px;}
  @media (max-width:820px){
    nav{padding:12px 16px 0; flex-wrap:wrap; gap:10px; row-gap:0;}
    /* Brand text is too wide on a phone; the mark carries it. */
    .nav-brand span{display:none;}
    .nav-brand img{height:26px;}
    .nav-cta{padding:7px 14px;}
    /* Tabs get their own full-width row that can scroll if it overflows. */
    .nav-links{
      order:3; width:100%; gap:0; justify-content:flex-start;
      overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
      border-top:1px solid var(--line-soft); margin-top:10px;
    }
    .nav-links::-webkit-scrollbar{display:none;}
    .nav-links a{
      flex:0 0 auto; padding:12px 14px; white-space:nowrap;
      border-bottom:2px solid transparent;
    }
    .nav-links a.active{border-bottom-color:var(--fog);}
  }
  @media (max-width:380px){
    .nav-links a{padding:12px 11px; font-size:10.5px;}
  }

  /* ---------- EVENTS SLIDER ---------- */
  .events-section{padding:80px 0 100px; border-bottom:1px solid var(--line);}
  .events-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 40px; margin-bottom:38px; flex-wrap:wrap;}
  .events-head h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(34px,5vw,58px); text-transform:uppercase; line-height:1;}
  .events-head .eyebrow{display:block; margin-bottom:14px;}
  .slider-nav{display:flex; gap:10px;}
  .slider-nav button{
    width:44px; height:44px; border:1px solid var(--line); background:transparent; color:var(--fog);
    cursor:pointer; font-size:16px; transition:all .2s; display:flex; align-items:center; justify-content:center;
  }
  .slider-nav button:hover:not(:disabled){background:var(--fog); color:var(--void); border-color:var(--fog);}
  .slider-nav button:disabled{opacity:0.28; cursor:default;}
  .slider-nav button:focus-visible{outline:2px solid var(--fog); outline-offset:2px;}

  .event-track{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 40px 24px; scroll-behavior:smooth; scrollbar-width:none;
  }
  .event-track::-webkit-scrollbar{display:none;}

  .event-card{
    flex:0 0 330px; scroll-snap-align:start; border:1px solid var(--line);
    background:var(--void-2); padding:26px 24px 22px; display:flex; flex-direction:column;
    transition:border-color .2s, transform .2s;
  }
  .event-card:hover{border-color:rgba(240,240,238,0.32); transform:translateY(-3px);}
  .event-card.is-featured{border-color:rgba(240,240,238,0.45); background:var(--void-3);}

  .event-date{display:flex; align-items:baseline; gap:9px; margin-bottom:16px;}
  .event-date .day{font-family:'Bebas Neue',sans-serif; font-size:44px; line-height:0.85;}
  .event-date .mo{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.2em; color:var(--dim); text-transform:uppercase;}
  .event-tag{
    margin-left:auto; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.16em;
    text-transform:uppercase; border:1px solid var(--line); padding:4px 9px; color:var(--dim);
  }
  .event-card.is-featured .event-tag{border-color:var(--fog); color:var(--fog);}

  .event-card h3{font-family:'Bebas Neue',sans-serif; font-size:26px; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:10px;}
  .event-meta{font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); line-height:1.9; margin-bottom:14px;}
  .event-card p{color:var(--dim); font-size:13.5px; line-height:1.7; margin-bottom:22px;}
  .event-foot{margin-top:auto; border-top:1px solid var(--line-soft); padding-top:16px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
  .add-cal{
    font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    border-bottom:1px solid var(--fog); padding-bottom:2px; white-space:nowrap;
  }
  .add-cal:hover{opacity:0.7;}
  .event-free{font-family:'Space Mono',monospace; font-size:10.5px; color:var(--dim-2); letter-spacing:0.08em; text-transform:uppercase;}

  .cal-strip{margin:44px 40px 0; border:1px solid var(--line); padding:30px 32px; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap;}
  .cal-strip h4{font-family:'Bebas Neue',sans-serif; font-size:24px; text-transform:uppercase; margin-bottom:6px;}
  .cal-strip p{color:var(--dim); font-size:13px; line-height:1.6;}

  @media (max-width:720px){
    .events-head{padding:0 20px;}
    .event-track{padding:4px 20px 24px;}
    .event-card{flex:0 0 82%;}
    .cal-strip{margin:34px 20px 0; padding:24px;}
    .slider-nav{display:none;}
  }

  /* ---------- CALENDAR EMBED ---------- */
  .cal-strip-actions{display:flex; gap:12px; flex-wrap:wrap;}
  .cal-embed-section{padding:80px 0 100px;}
  .cal-embed{margin:0 40px; border:1px solid var(--line); background:var(--void-2); padding:10px;}
  .cal-embed iframe{display:block; width:100%; height:620px; border:0;}
  .cal-note{margin:18px 40px 0; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.04em; color:var(--dim-2);}
  @media (max-width:720px){
    .cal-embed{margin:0 20px; padding:6px;}
    .cal-embed iframe{height:520px;}
    .cal-note{margin:16px 20px 0;}
  }

  /* Page headers keep a darkened photo behind the title; the home page cover
     is handled separately by .hero-photo, uncovered. */

  .page-head.has-photo{
    background-image:
      linear-gradient(rgba(8,8,10,0.55), rgba(8,8,10,0.80)),
      var(--head-img);
    background-size:cover;
    background-position:center 34%;
  }

  /* Full-bleed photo band used between sections. */
  .photo-band{
    position:relative; height:clamp(240px,38vw,440px);
    background-size:cover; background-position:center 45%;
    border-bottom:1px solid var(--line);
  }
  .photo-band::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(rgba(8,8,10,0.06), rgba(8,8,10,0.30));
  }

  /* Side-by-side photo + copy. */
  .photo-split{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    border-bottom:1px solid var(--line);
  }
  .photo-split .ps-img{min-height:380px; background-size:cover; background-position:center;}
  .photo-split .ps-copy{padding:64px 48px; display:flex; flex-direction:column; justify-content:center;}
  .photo-split .ps-copy .eyebrow{display:block; margin-bottom:16px;}
  .photo-split .ps-copy h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4vw,50px); text-transform:uppercase; line-height:1.02; margin-bottom:16px;}
  .photo-split .ps-copy p{color:var(--dim); font-size:14.5px; line-height:1.8;}
  .photo-split.flip .ps-img{order:2;}

  @media (max-width:820px){
    .photo-split{grid-template-columns:1fr;}
    .photo-split .ps-img{min-height:260px; order:1 !important;}
    .photo-split .ps-copy{order:2; padding:44px 22px;}
  }

  /* ---------- HERO PHOTO ----------
     The cover shot sits below the headline rather than behind it, so the
     group is never covered by type. Only a soft fade at the very top and
     bottom, to seat it against the sections either side. */
  .hero-photo{
    position:relative;
    height:clamp(300px,46vw,600px);
    background-image:url('images/hero-group.jpg');
    background-size:cover;
    background-position:center 46%;
    border-bottom:1px solid var(--line);
  }
  .hero-photo::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0) 22%),
      linear-gradient(to top,    rgba(8,8,10,0.45) 0%, rgba(8,8,10,0) 20%);
  }
  @media (max-width:820px){
    /* Portrait screens crop a wide group shot hard, so give it more height
       and hold the faces in frame. */
    .hero-photo{height:clamp(260px,62vw,420px); background-position:center 44%;}
  }

  /* ---------- HERO COVER (wide screens) ----------
     The group sits across the middle of the cover shot, with sky and trees
     above them. On a wide screen there is room to sit the type in that empty
     upper third: anchor the content to the top, pin the photo to the bottom
     so the group drops into the lower half, and scrim only the top.
     Narrow screens crop a wide group shot too hard for this to work, so
     there the photo drops out and .hero-photo below takes over. */
  @media (min-width:821px){
    .hero.has-cover{
      min-height:100vh;
      display:flex; align-items:flex-start; justify-content:center;
      padding-top:clamp(44px,7vh,76px); padding-bottom:48px;
      background-image:
        linear-gradient(to bottom,
          rgba(8,8,10,0.92) 0%,
          rgba(8,8,10,0.72) 18%,
          rgba(8,8,10,0.28) 34%,
          rgba(8,8,10,0.00) 46%,
          rgba(8,8,10,0.00) 78%,
          rgba(8,8,10,0.45) 100%),
        url('images/hero-group.jpg');
      background-size:cover;
      background-position:center bottom;
    }
    /* The cover photo carries the wide layout; the beam is the narrow-screen backdrop. */
    .hero-beam{display:none;}
    /* Tighter than the default hero so the block clears the front row. */
    .hero.has-cover .hero-content{max-width:760px;}
    /* Sized against viewport HEIGHT, not just width: on a short laptop screen
       the group sits higher in frame, so the type has to shrink with it or it
       lands on the back row. */
    .hero.has-cover img.badge{width:clamp(44px,5.5vh,68px); margin-bottom:clamp(10px,1.8vh,18px);}
    .hero.has-cover .eyebrow{margin-bottom:clamp(8px,1.4vh,14px);}
    .hero.has-cover h1{font-size:clamp(44px,min(7vw,9.4vh),88px);}
    .hero.has-cover p{margin-top:clamp(10px,1.8vh,18px); font-size:14.5px; max-width:440px;}
    .hero.has-cover .hero-ctas{margin-top:clamp(14px,2.6vh,26px);}
    /* The stacked band is only for narrow screens. */
    .hero-photo{display:none;}
  }

  /* ---------- WAIVER STRIP ---------- */
  .waiver-strip{
    margin:0 40px 72px; border:1px solid var(--line); background:var(--void-2);
    padding:30px 32px; display:flex; justify-content:space-between; align-items:center;
    gap:22px; flex-wrap:wrap;
  }
  .waiver-strip .ws-copy h4{font-family:'Bebas Neue',sans-serif; font-size:24px; text-transform:uppercase; margin-bottom:6px;}
  .waiver-strip .ws-copy p{color:var(--dim); font-size:13.5px; line-height:1.65; max-width:520px;}
  @media (max-width:820px){
    .waiver-strip{margin:0 20px 56px; padding:24px;}
  }

  /* ---------- HEADLAMP BEAM (narrow screens) ----------
     Stands in for the cover photo on phones, where a wide group shot crops
     badly. A beam widening down the screen, brightest at the top, so the
     headline sits inside the light rather than beside it. */
  .hero-beam{
    position:absolute; top:0; left:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
  }
  @media (max-width:820px){
    /* Give the beam room to read; a short hero clips it to a bright smudge. */
    .hero{min-height:86vh; display:flex; align-items:center; justify-content:center; padding:96px 24px 72px;}
  }

  /* ---------- MISSION MANIFESTO ----------
     Replaces the numbered card trio. The pillar word lands bright and the
     explanation sits back in grey, so the eye catches Mentally / Physically /
     Internally first and reads the detail second. */
  .mission-manifesto{padding:96px 40px 104px;}
  .mission-manifesto .eyebrow{display:block; margin-bottom:26px;}
  .mission-manifesto .manifesto{max-width:960px;}
  .mission-manifesto .manifesto p{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(28px,3.5vw,46px);
    line-height:1.18; text-transform:uppercase; letter-spacing:0.005em;
  }
  .mission-manifesto .muted{color:var(--dim-2);}
  .mission-manifesto .sign{
    margin-top:30px; font-family:'Caveat',cursive; font-size:26px;
    color:var(--fog); opacity:0.85; text-transform:none;
  }
  @media (max-width:820px){
    .mission-manifesto{padding:64px 24px 72px;}
    .mission-manifesto .manifesto p{font-size:clamp(24px,6.4vw,34px); line-height:1.22;}
    .mission-manifesto .sign{font-size:23px;}
  }

  /* Caption on the cover photo. The photo already carries a fade at its
     lower edge, so the text sits on that rather than needing its own box. */
  .hero-photo .photo-caption{
    position:absolute; left:24px; bottom:20px; z-index:1;
    font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--fog);
    text-shadow:0 1px 14px rgba(0,0,0,0.85);
  }
  @media (min-width:821px){
    .hero-photo .photo-caption{left:40px; bottom:26px; font-size:11px;}
  }

  /* ---------- FORMS ---------- */
  .form-section{padding:64px 40px 100px; display:flex; justify-content:center;}
  .lac-form{width:100%; max-width:560px;}
  .lac-form .f-row{margin-bottom:24px; display:flex; flex-direction:column;}
  .lac-form label{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--dim); margin-bottom:9px;
  }
  .lac-form label .opt{color:var(--dim-2); letter-spacing:0.08em;}
  .lac-form input, .lac-form select, .lac-form textarea{
    background:var(--void-2); border:1px solid var(--line); color:var(--fog);
    padding:13px 14px; font-family:'Inter',sans-serif; font-size:14.5px;
    border-radius:0; width:100%; transition:border-color .18s;
  }
  .lac-form textarea{resize:vertical; line-height:1.65;}
  .lac-form input:focus, .lac-form select:focus, .lac-form textarea:focus{
    outline:none; border-color:var(--fog);
  }
  .lac-form input::placeholder, .lac-form textarea::placeholder{color:var(--dim-2);}
  /* Native select arrow is invisible on a dark field in some browsers. */
  .lac-form select{
    appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
    background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
    padding-right:40px;
  }
  .lac-form option{background:var(--void-2); color:var(--fog);}
  .form-submit{border:none; cursor:pointer; margin-top:6px; width:100%; font-size:12px;}
  .lac-form .f-note{
    margin-top:16px; font-family:'Space Mono',monospace; font-size:10.5px;
    letter-spacing:0.06em; color:var(--dim-2); text-align:center;
  }
  /* Spam trap — a bot fills this, a person never sees it. */
  .lac-form .hp{position:absolute; left:-9999px; opacity:0;}
  @media (max-width:820px){
    .form-section{padding:44px 22px 76px;}
  }

  /* ---------- SINGLE CLIENT RESULT ---------- */
  #results{padding:88px 40px 96px;}
  .result-split{
    display:grid; grid-template-columns:0.8fr 1.2fr;
    border:1px solid var(--line); margin-top:30px;
  }
  .rs-stat{
    background:var(--void-3); padding:44px 38px; border-right:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:center;
  }
  .rs-from{font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,3.4vw,42px); color:var(--dim-2); line-height:1;}
  .rs-arrow{font-size:20px; color:var(--dim-2); margin:8px 0 6px;}
  .rs-to{font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,6.4vw,84px); line-height:0.92;}
  .rs-time{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--dim); margin-top:14px;
  }
  .rs-copy{padding:44px 40px; display:flex; flex-direction:column; justify-content:center;}
  .rs-copy p{color:var(--dim); font-size:14.5px; line-height:1.8;}
  /* Required alongside a standout result: states what typical looks like. */
  .typical{
    margin-top:18px;
    font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.05em;
    color:var(--dim-2); line-height:1.85;
  }
  @media (max-width:820px){
    #results{padding:64px 22px 72px;}
    .result-split{grid-template-columns:1fr;}
    .rs-stat{border-right:none; border-bottom:1px solid var(--line); padding:34px 24px;}
    .rs-copy{padding:30px 24px 34px;}
  }

  /* The typical-results line, given its own weight so it reads as a stated
     expectation rather than small print under a standout number. */
  .expect-row{
    margin:22px 0 14px; padding:16px 18px;
    border:1px solid var(--line); background:var(--void-2);
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  }
  .expect-k{
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--dim-2);
  }
  .expect-v{font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:0.01em; color:var(--fog);}

  /* ---------- CONSENT ----------
     Boxes ship unchecked: pre-ticked consent is not consent. The first is
     required (they asked us to call them); marketing is separate and
     optional, which is the distinction the rules turn on. */
  .f-consent{margin:6px 0 24px; padding-top:22px; border-top:1px solid var(--line-soft);}
  .check{
    display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.65;
    color:var(--dim); letter-spacing:0; text-transform:none;
  }
  .check input[type="checkbox"]{
    appearance:none; -webkit-appearance:none;
    flex:0 0 auto; width:17px; height:17px; margin-top:2px;
    border:1px solid var(--line); background:var(--void-2); cursor:pointer;
    display:grid; place-content:center; transition:border-color .15s;
  }
  .check input[type="checkbox"]:hover{border-color:var(--dim);}
  .check input[type="checkbox"]::before{
    content:''; width:9px; height:9px; transform:scale(0);
    background:var(--void); transition:transform .12s ease-in-out;
    clip-path:polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 6%, 38% 66%);
  }
  .check input[type="checkbox"]:checked{background:var(--fog); border-color:var(--fog);}
  .check input[type="checkbox"]:checked::before{transform:scale(1);}
  .check input[type="checkbox"]:focus-visible{outline:2px solid var(--fog); outline-offset:2px;}
  .consent-note{
    margin-top:14px; font-family:'Space Mono',monospace; font-size:10px;
    letter-spacing:0.05em; color:var(--dim-2); line-height:1.8;
  }

  /* ---------- RUN CARD PHOTOS ----------
     Bleeds to the card edges by cancelling the card's own padding. The card
     becomes a flex column so the note stays pinned to the bottom and the
     three cards line up even when the descriptions differ in length. */
  .coord{display:flex; flex-direction:column;}
  .coord-img{
    margin:-34px -28px 22px;
    height:190px;
    background-size:cover;
    background-position:center 42%;
    border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  .coord .note{margin-top:auto;}

  /* One wide column on a phone: a 190px strip across a full-width card is a
     letterbox, so give it more height and a squarer crop. */
  @media (max-width:820px){
    .coord{padding:28px 22px;}
    .coord-img{margin:-28px -22px 20px; height:clamp(200px,52vw,300px);}
  }

  /* Three narrow columns start to squeeze the photo around here. */
  @media (min-width:821px) and (max-width:1080px){
    .coord{padding:28px 22px;}
    .coord-img{margin:-28px -22px 20px; height:158px;}
  }

  /* The time line now carries the location too, so it can run to two lines
     in a narrow column — give it room to breathe rather than cramping. */
  .coord .lat{line-height:1.7;}

  /* ---------- SUNSET BAND ----------
     Cropped tight to the crew, so the band matches the photo's shape rather
     than slicing into it: at that ratio nothing is trimmed at any width.
     Past the max-height the ratio can no longer hold, so it switches to
     containing the whole frame — the spare space is the site's own black,
     which is invisible against it. */
  .sunset-band{
    background-image:url('images/sunset-crew-band.jpg');
    background-repeat:no-repeat;
    background-position:center center;
    background-color:var(--void);
    background-size:cover;
    height:auto;
    aspect-ratio:1300 / 768;
    max-height:700px;
  }
  @media (min-width:1215px){
    .sunset-band{background-size:contain;}
  }

  /* ---------- MERCH ----------
     Sits directly under the sunset band, where the crew are already wearing
     the shirts, so the photo above does the selling. */
  .merch-strip{
    display:flex; justify-content:space-between; align-items:center;
    gap:26px; flex-wrap:wrap;
    padding:56px 40px; border-bottom:1px solid var(--line);
  }
  .merch-strip .eyebrow{display:block; margin-bottom:14px;}
  .merch-strip h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4vw,50px); text-transform:uppercase; line-height:1; margin-bottom:12px;}
  .merch-strip p{color:var(--dim); font-size:14.5px; line-height:1.7; max-width:420px;}
  .foot-col a{border-bottom:1px solid var(--line); padding-bottom:1px;}
  .foot-col a:hover{border-bottom-color:var(--fog);}
  @media (max-width:820px){
    .merch-strip{padding:44px 22px; gap:22px;}
    .merch-strip .btn-solid{width:100%; text-align:center;}
  }

  /* Buttons inside a photo-split copy column. */
  .ps-cta{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap;}
  @media (max-width:820px){
    .ps-cta{gap:10px;}
    .ps-cta .btn-solid, .ps-cta .btn-outline{flex:1 1 100%; text-align:center;}
  }

  /* ---------- RUN CLUB: LIVE CALENDAR ----------
     The three weekly runs above are fixed, so this only needs to answer
     "is this week different?" — a short agenda, not the full month. */
  .run-cal{padding:80px 40px 96px; border-top:1px solid var(--line);}
  .run-cal .cal-embed{margin:30px 0 0;}
  .run-cal .cal-embed iframe{height:400px;}
  .run-cal-cta{margin-top:24px;}
  @media (max-width:820px){
    .run-cal{padding:60px 22px 72px;}
    .run-cal .cal-embed iframe{height:360px;}
    .run-cal-cta .btn-outline{display:block; text-align:center;}
  }