/* KAAM-37470 — November camp campaign landing page. Verbatim from Shyma's mockup v2 (trc-nov-camp-landing-v2.html),
   with its embedded images extracted to assets/img/nov-camp/. Loaded ONLY on the campaign landing template, which
   dequeues the theme's own stylesheets, so these global selectors cannot reach the rest of the site. */

  :root{
    --navy:#0b1f3a;
    --navy-2:#132c52;
    --ink:#39424f;
    --gold:#c9a227;
    --coral:#ff5a3c;
    --coral-dark:#e0442a;
    --trc-red:#d43125;
    --cream:#faf7f1;
    --gray:#5c6470;
    --line:#e4e2dc;
  }
  *{box-sizing:border-box;}
  html, body{overflow-x:clip; max-width:100%;}
  body{
    margin:0;
    font-family:'Montserrat', Arial, sans-serif;
    font-weight:500;
    color:#000;
    background:#fff;
    line-height:1.7;
  }
  a{text-decoration:none;color:inherit;}
  img,.ph{display:block;}

  /* SITE CHROME (placeholder recreation of theraceclub.com nav — colors/fonts/margins matched to live site) */
  /* Landing-page rule (per Marc): no links off the page, ever — announcement bar, sign-in, search, cart,
     and the main site nav are all removed. Header is logo + one CTA only. */
  .site-header{background:#000; position:sticky; top:0; z-index:50; padding:16px 0;}
  .site-header-inner{
    max-width:1170px; margin:0 auto; padding:0 15px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .site-logo{display:flex; align-items:center; gap:10px; color:#fff; flex:0 0 auto;}
  .site-logo .logo-img{height:40px; width:auto; display:block;}
  .site-logo .logo-icon{display:none;}
  .header-phone{display:none;}
  .nav-cta{
    background:var(--trc-red); color:#fff !important; font-size:13px; font-weight:700;
    padding:9px 16px; border-radius:3px; white-space:nowrap;
  }
  .nav-cta:hover{background:var(--coral-dark);}
  @media (max-width:480px){
    .nav-cta{font-size:12px; padding:8px 12px;}
    /* on small screens, the full wordmark crowded the header — icon only, with the
       phone number filling the space next to it (per Marc's feedback) */
    .site-logo .logo-full{display:none;}
    .site-logo .logo-icon{display:block; height:30px; width:auto;}
    .header-phone{
      display:flex; align-items:center; gap:5px; color:#fff;
      font-size:12.5px; font-weight:700; white-space:nowrap;
    }
    .header-phone svg{width:14px; height:14px; flex:0 0 auto; color:var(--gold);}
  }

  .btn{
    display:inline-block;
    background:var(--coral);
    color:#fff !important;
    font-weight:700;
    padding:14px 30px;
    border-radius:3px;
    font-size:15px;
    letter-spacing:.02em;
    border:none;
    cursor:pointer;
    transition:background .15s ease;
  }
  .btn:hover{background:var(--coral-dark);}
  .btn.small{padding:9px 18px; font-size:13px;}
  .btn.ghost{background:transparent; border:2px solid #fff; color:#fff !important;}

  /* placeholder blocks (photos/video not supplied yet) */
  .ph{
    background:repeating-linear-gradient(45deg,#dfe4ea,#dfe4ea 10px,#eceff3 10px,#eceff3 20px);
    color:var(--gray);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    font-size:13px;
    border:1px dashed #b7bec9;
    border-radius:6px;
  }

  section{padding:56px 15px;}
  .wrap{max-width:1170px; margin:0 auto;}
  h2{font-size:28px; margin:0 0 8px; color:var(--ink); font-weight:700;}
  h3{color:var(--ink);}
  .kicker{color:var(--coral); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
  .sub{color:var(--gray); font-size:16px;}

  /* EVENT OPENER — two-column hero (image on one side, title/meta/hook/CTA stacked on
     the other), per Marc's feedback: the old full-width-title / full-width-image /
     full-width-text-block stack "is completely non-standard." */
  .event-open{padding:40px 15px 56px;}
  .event-open .hero-grid{
    display:grid; grid-template-columns:38% 1fr; gap:44px; align-items:center;
  }
  /* the hero media slot holds the camp action video (moved here from its own section
     further down the page per Marc's feedback: "the video will come here on the hero
     and all the text on the right of it") */
  .event-open .hero-media{align-self:stretch; display:flex; align-items:center; justify-content:center;}
  .event-open .hero-media .video-wrap{
    margin:0; max-width:100%; width:100%; max-height:520px;
  }
  @media (max-width:700px){
    .event-open .hero-media .video-wrap{max-width:280px;}
  }
  .event-open .eyebrow{color:var(--coral); font-weight:700; letter-spacing:.08em; font-size:13px; text-transform:uppercase; margin-bottom:10px;}
  .event-open h1{
    font-size:32px; line-height:1.2; margin:0 0 8px; color:var(--ink); font-weight:700;
  }
  .event-open .subhead{
    font-size:16px; font-weight:700; color:var(--gray); margin:0 0 20px;
  }
  .event-open .dateline{
    display:flex; gap:24px; flex-wrap:wrap;
    font-size:16px; color:#000; margin:4px 0 24px; font-weight:500;
  }
  .event-open .dateline .meta-item{display:flex; align-items:flex-start; gap:7px;}
  .event-open .dateline svg{width:16px; height:16px; color:var(--coral); flex:0 0 auto; margin-top:3px;}
  .event-open .hook{color:#000; font-size:16px; margin:0 0 24px;}
  /* Add to calendar now lives here too, right beside Reserve Your Spot, instead of the
     old standalone Quick Facts card lower on the page (per Marc's feedback) */
  .event-open .open-cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .event-open .open-cta-row .add-to-cal-btn{margin-bottom:0;}
  @media (max-width:700px){
    /* phone: headline, dateline, hook and the Reserve button come before the video,
       so the registration call to action is reachable without scrolling (D2/R1). */
    .event-open .hero-grid{grid-template-columns:1fr; gap:24px;}
    .event-open .hero-content{order:1;}
    .event-open .hero-media{order:2;}
  }
  .scarcity-pill{
    display:inline-block;
    background:rgba(212,49,37,.08); border:1px solid var(--trc-red);
    color:var(--trc-red); font-size:13px; font-weight:700;
    padding:6px 16px; border-radius:20px;
  }
  /* opener CTA: sized down to match the scarcity pill directly below it, per Marc's
     feedback — was oversized relative to the pill */
  .opener-reserve-btn{
    font-size:13px; padding:8px 16px; text-align:center;
  }

  /* TABS on desktop / ACCORDION on mobile (Overview / What Swimmers Will Learn / Camp Schedule / Equipment / FAQ)
     Single shared markup: mobile shows every panel as a collapsible row (no horizontal-scrolling
     tab selector, ever); desktop restores the horizontal tab bar. No JS either way. */
  .tabs-section{border-bottom:1px solid var(--line); padding-top:0;}
  .tab-input{position:absolute; opacity:0; pointer-events:none;}

  /* mobile-first: accordion. Open/closed state is driven by JS toggling .is-open on
     .tab-panel (not by radio :checked) so a section can be collapsed back to nothing.
     No scrolling on tap, expand/collapse happens in place like a plain "+" accordion. */
  .tab-nav{display:none;}
  .tab-panel{display:block; padding:0; border-bottom:1px solid var(--line);}
  .accordion-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 4px; font-weight:700; font-size:15.5px; color:var(--ink); cursor:pointer;
  }
  .accordion-toggle .chev{color:var(--coral); flex:0 0 auto; transition:transform .15s ease;}
  .panel-body{display:none; padding:0 4px 28px;}
  .tab-panel.is-open .panel-body{display:block;}
  .tab-panel.is-open .accordion-toggle .chev{transform:rotate(180deg);}

  /* desktop: restore horizontal tab bar, hide accordion chrome */
  @media (min-width:900px){
    .tab-nav{display:flex; gap:4px; border-bottom:2px solid var(--line); overflow-x:visible;}
    .tab-label{
      padding:14px 20px; font-weight:700; font-size:14px; color:var(--gray);
      cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap;
    }
    #tab-0:checked ~ .tab-nav label[for="tab-0"],
    #tab-1:checked ~ .tab-nav label[for="tab-1"],
    #tab-2:checked ~ .tab-nav label[for="tab-2"],
    #tab-3:checked ~ .tab-nav label[for="tab-3"],
    #tab-4:checked ~ .tab-nav label[for="tab-4"],
    #tab-5:checked ~ .tab-nav label[for="tab-5"]{
      color:var(--ink); border-bottom-color:var(--coral);
    }
    .accordion-toggle{display:none;}
    .tab-panel{display:none; padding:32px 0 48px; border-bottom:none;}
    .panel-body{display:block; padding:0;}
    #tab-0:checked ~ .tab-panels #panel-0,
    #tab-1:checked ~ .tab-panels #panel-1,
    #tab-2:checked ~ .tab-panels #panel-2,
    #tab-3:checked ~ .tab-panels #panel-3,
    #tab-4:checked ~ .tab-panels #panel-4,
    #tab-5:checked ~ .tab-panels #panel-5{
      display:block;
    }

    /* same reveal rules, scoped to the session drawer's own tab/panel IDs */
    #tab-s1:checked ~ .tab-nav label[for="tab-s1"],
    #tab-s2:checked ~ .tab-nav label[for="tab-s2"],
    #tab-s3:checked ~ .tab-nav label[for="tab-s3"],
    #tab-s4:checked ~ .tab-nav label[for="tab-s4"],
    #tab-s5:checked ~ .tab-nav label[for="tab-s5"]{
      color:var(--ink); border-bottom-color:var(--coral);
    }
    #tab-s1:checked ~ .tab-panels #panel-s1,
    #tab-s2:checked ~ .tab-panels #panel-s2,
    #tab-s3:checked ~ .tab-panels #panel-s3,
    #tab-s4:checked ~ .tab-panels #panel-s4,
    #tab-s5:checked ~ .tab-panels #panel-s5{
      display:block;
    }
  }

  /* LEARN MORE DRAWER (mobile only) — per Marc: on mobile, replace the tab bar/
     accordion taking up the main page with a single "Learn More" button. Tapping it
     slides the SAME .tabs-section markup (Overview/Curriculum/Schedule/Equipment/FAQ)
     in from the right as an off-canvas panel, instead of duplicating the content.
     On desktop (min-width:900px), .learn-drawer is an inert wrapper — the section
     renders inline exactly as before, and the button/backdrop/close bar stay hidden. */
  .learn-more-row{display:none;}
  .learn-backdrop{display:none;}
  .learn-drawer-head{display:none;}
  .learn-email-row{display:none;}

  @media (max-width:899px){
    .learn-more-row{display:block; text-align:center; padding:0 15px 32px;}
    .learn-more-btn{
      display:inline-flex; align-items:center; gap:6px;
      background:none; border:none; padding:0; cursor:pointer;
      color:var(--coral); font-weight:800; font-size:17px;
      font-family:inherit; text-decoration:underline; text-underline-offset:3px;
    }

    .learn-backdrop{
      display:block; position:fixed; inset:0; background:rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:150;
    }
    .learn-backdrop.is-open{opacity:1; pointer-events:auto;}

    .learn-drawer{
      position:fixed; top:0; right:0; bottom:0; width:88vw; max-width:420px;
      background:#fff; z-index:151; overflow-y:auto;
      transform:translateX(100%); transition:transform .3s ease;
      box-shadow:-8px 0 24px rgba(0,0,0,.18);
    }
    .learn-drawer.is-open{transform:translateX(0);}
    .learn-drawer .tabs-section{border-bottom:none; padding-bottom:0;}

    .learn-drawer-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:18px 15px; border-bottom:1px solid var(--line);
      font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--coral);
      position:sticky; top:0; background:#fff; z-index:1;
    }
    .learn-close{
      background:none; border:none; font-size:24px; line-height:1; color:var(--gray);
      cursor:pointer; padding:4px 8px;
    }

    .learn-email-row{display:block; padding:12px 15px 28px;}
    .learn-email-btn{width:100%;}
  }

  /* EMAIL THESE DETAILS MODAL — mocked. This is a static prototype with no backend,
     so Send never actually sends anything; it renders a client-side preview of what
     the email would look like instead. Reachable only from the mobile drawer's
     "Email These Details" button. */
  .email-modal-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:160;
  }
  .email-modal-backdrop.is-open{opacity:1; pointer-events:auto;}
  .email-modal{
    display:none; position:fixed; left:50%; top:50%;
    transform:translate(-50%,-50%) scale(.96); opacity:0;
    width:90vw; max-width:420px; max-height:82vh; overflow-y:auto;
    background:#fff; border-radius:10px; z-index:161;
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
  }
  .email-modal.is-open{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .email-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line);
    font-weight:700; font-size:15px; color:var(--ink);
  }
  .email-modal-body{padding:18px;}
  /* stack both views in the same grid cell (same trick used for the testimonial
     rotator) so the modal's height is always the taller of the two — switching
     from the form to the confirmation on Send never resizes/repositions the modal */
  .email-modal-views{display:grid;}
  .email-modal-views .email-modal-body{
    grid-area:1/1; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .email-modal-views .email-modal-body.is-active{opacity:1; pointer-events:auto;}
  .email-input-list{display:flex; flex-direction:column; gap:10px;}
  .email-input{
    width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:6px;
    font-family:inherit; font-size:14px; color:var(--ink);
  }
  .add-email-btn{
    display:block; background:none; border:none; color:var(--coral); font-weight:700;
    font-size:13.5px; padding:10px 0 0; cursor:pointer; text-align:left;
  }
  /* mocked send confirmation — no email content is shown here on purpose;
     Marc reviews the actual copy separately */
  .email-confirm{text-align:center; padding:8px 0 4px;}
  .email-confirm-icon{
    width:48px; height:48px; border-radius:50%; background:rgba(255,90,60,.12);
    color:var(--coral); font-size:24px; font-weight:800;
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  }
  .email-confirm h3{margin:0 0 8px; font-size:18px; color:var(--ink);}
  .email-confirm p{color:var(--gray); font-size:14px; margin:0 0 4px;}
  .email-confirm-emails{font-weight:700; color:var(--ink) !important;}

  .included{
    display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px;
    margin-top:18px; max-width:760px; padding:0;
  }
  .included li{list-style:none; padding-left:22px; position:relative; font-size:14.5px; color:var(--ink);}
  .included li:before{content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:700;}

  /* CURRICULUM CARDS (tab 2) */
  .days{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
  .day-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px;}
  .day-card .num{color:var(--coral); font-weight:800; font-size:13px; letter-spacing:.06em;}
  .day-card h3{font-size:16px; margin:6px 0 8px;}
  .day-card p{font-size:13.5px; color:var(--gray); margin:0;}

  /* SCHEDULE (tab 3) — vertical list, avoids uneven empty space from grid cards */
  .schedule-list{margin-top:24px; border-top:1px solid var(--line);}
  .schedule-row{
    display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
    padding:18px 0; border-bottom:1px solid var(--line);
  }
  .schedule-row .day-name{flex:0 0 190px; font-weight:700; font-size:15px; color:var(--ink);}
  .schedule-row .times{display:flex; gap:10px; flex-wrap:wrap; flex:1 1 300px;}
  .time-chip{
    background:var(--cream); border:1px solid var(--line); border-radius:20px;
    padding:6px 14px; font-size:13.5px; color:var(--ink); white-space:nowrap;
  }
  .schedule-note{font-size:12.5px; color:var(--gray); margin-top:14px;}
  @media (max-width:900px){
    /* nowrap chips pushed the schedule wider than the mobile drawer */
    .time-chip{white-space:normal; max-width:100%;}
  }

  /* EQUIPMENT (tab 4) — two columns so the bag card sits beside the list, not below it */
  .equip-layout{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:18px;}
  .equip-list{margin:0; padding:0;}
  .equip-list li{list-style:none; padding:8px 0 8px 22px; position:relative; font-size:14.5px; border-bottom:1px solid var(--line);}
  .equip-list li:before{content:"•"; position:absolute; left:0; color:var(--coral);}
  .equip-bag{
    margin:0; background:var(--cream); border:1px solid var(--line);
    border-radius:8px; padding:20px;
  }
  .equip-bag .price{font-size:20px; font-weight:800; color:var(--ink); margin:6px 0;}
  .equip-bag .bonus{color:var(--coral); font-weight:700; font-size:13.5px;}
  /* KAAM-39541: "Only missing a few items?" line under the list + bag card (2027 camp pages only). Size and gap of the
     list above; the link coral + underlined like the Learn More link, because this page resets bare links to plain text. */
  .equip-shop{font-size:14.5px; margin:18px 0 0;}
  .equip-shop a{color:var(--coral); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
  .equip-shop a:hover{color:var(--coral-dark);}

  /* FAQ (tab 5) */
  .faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
  .faq-item summary{cursor:pointer; font-weight:700; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:after{content:"+"; font-size:20px; color:var(--coral); font-weight:400;}
  .faq-item[open] summary:after{content:"–";}
  .faq-item p{color:var(--gray); font-size:14.5px; margin:10px 0 0;}

  /* CALL BAND */
  .call-band{
    background:var(--navy); color:#fff; text-align:center; padding:34px 20px;
  }
  .call-band .phone{font-size:26px; font-weight:800; color:var(--gold); display:block; margin:6px 0;}
  .call-band .note{color:#cfd8e6; font-size:14px;}

  /* VIDEO */
  /* video-wrap now lives in the hero media slot (moved there per Marc's feedback) */
  .video-wrap{
    max-width:280px; margin:0 auto; aspect-ratio:9/16;
    position:relative; border-radius:8px; overflow:hidden;
  }
  .video-wrap .ph{height:100%; flex-direction:column; gap:10px;}
  .video-thumb-img{width:100%; height:100%; object-fit:cover; display:block;}
  .play-badge{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.55);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
    pointer-events:none;
  }

  /* COACHES */
  .coach-band{background:var(--cream);}
  .coaches{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
  .coach-card{background:#fff; border-radius:8px; overflow:hidden; border:1px solid var(--line);}
  .coach-card img{width:100%; height:260px; object-fit:cover; object-position:center 15%; display:block; border-radius:0;}
  .coach-body{padding:16px;}
  .coach-body .name{font-weight:800; font-size:15.5px; color:var(--ink);}
  .coach-body .role{font-weight:700; font-size:13px; color:var(--coral); margin-top:2px;}
  .coach-body .quote{color:var(--gray); font-size:13.5px; margin-top:8px;}
  .disclaimer{font-size:12px; color:var(--gray); margin-top:20px; text-align:center;}

  /* TESTIMONIALS — per Marc's red marks: the 3 cards stack in one column (not
     side-by-side) so the photo on the left can span their full combined height.
     Photo re-centered on the subject (1415x1433, ~0.987 ratio); column width
     (474px) is solved from the review column's actual measured height (480px)
     times the photo's ratio, so contain fills edge-to-edge with zero gap instead
     of approximating it. Rounded corners now match the coach-card pattern exactly:
     radius + overflow:hidden on the container, not the img. */
  .testimonials-layout{display:grid; grid-template-columns:474px 1fr; gap:36px; align-items:stretch;}
  .testimonial-photo{border-radius:8px; overflow:hidden;}
  .testimonial-photo img, .testimonial-photo .ph{width:100%; height:100%; display:block; object-fit:contain;}
  @media (max-width:820px){
    .testimonials-layout{grid-template-columns:1fr; gap:20px;}
    .testimonial-photo{max-width:300px; margin:0 auto; aspect-ratio:1415/1433;}
  }
  .testimonials{display:grid; grid-template-columns:1fr; gap:20px; margin-top:0;}
  .t-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px;}
  .stars{color:var(--gold); letter-spacing:2px; font-size:14px; margin-bottom:8px;}
  .t-card p{font-size:14px; color:var(--ink); margin:0 0 12px;}
  .t-card .who{font-size:12.5px; color:var(--gray); font-weight:700;}
  .t-dots{display:none;}

  /* mobile: one testimonial at a time, auto-rotating (see script below), instead of
     a long stacked list. Dots let the swimmer jump to one directly. All three cards
     are stacked in the same grid cell (grid-area:1/1) rather than toggled with
     display:none, so the container's height is always the tallest card, not just
     whichever one happens to be active. This removes the layout shift that display
     none/block caused when swapping between testimonials of different lengths. */
  @media (max-width:820px){
    .testimonials{display:grid; grid-template-columns:1fr; position:relative; margin-top:20px;}
    .testimonials .t-card{
      grid-area:1/1; opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .testimonials .t-card.is-active{opacity:1; pointer-events:auto;}
    .t-dots{display:flex; justify-content:center; gap:8px; margin-top:16px;}
    .t-dot{
      width:7px; height:7px; padding:0; border:none; border-radius:50%;
      background:var(--line); cursor:pointer;
    }
    .t-dot.is-active{background:var(--coral);}
  }

  /* MID CTA + CONTACT — merged into one 2-column card per Marc's feedback (previously
     two separate stacked sections: a coral CTA banner, then a cream contact band) */
  .cta-contact{padding:0 15px;}
  .cta-contact-card{
    display:grid; grid-template-columns:1fr 1fr; border-radius:10px; overflow:hidden;
    max-width:1170px; margin:56px auto;
  }
  .cta-contact-card .cta-col{
    background:linear-gradient(90deg,var(--coral),var(--coral-dark));
    color:#fff; text-align:center; padding:44px 30px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  }
  .cta-contact-card .cta-col h2{color:#fff; font-size:22px; margin:0;}
  .cta-contact-card .cta-col .scarcity-pill{background:rgba(255,255,255,.15); border-color:#fff; color:#fff;}
  .cta-contact-card .cta-col .btn{background:#fff; color:var(--coral-dark) !important;}
  .cta-contact-card .cta-col .btn:hover{background:#f2f2f2;}
  .cta-contact-card .contact-col{
    background:var(--cream); padding:44px 30px;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px;
  }
  .cta-contact-card .contact-col h2{margin:0; color:var(--ink);}
  .cta-contact-card .contact-col .btn{align-self:flex-start;}
  @media (max-width:700px){
    .cta-contact-card{grid-template-columns:1fr; margin:40px auto;}
  }

  /* RESERVE / INLINE CHECKOUT (no link-out) */
  /* RESERVE DRAWER — the checkout content keeps its navy treatment even though it now
     lives inside the shared .session-drawer overlay instead of an inline section */
  #reserve-drawer{background:var(--navy); color:#fff;}
  #reserve-drawer h2{color:#fff;}
  #reserve-drawer .sub{color:#cfd8e6;}
  #reserve-drawer .learn-drawer-head{
    background:var(--navy); color:#fff; border-bottom-color:rgba(255,255,255,.15);
  }
  #reserve-drawer .learn-drawer-head span{color:#fff;}
  #reserve-drawer .learn-close{color:#cfd8e6;}
  /* its .wrap is a plain div here (not a <section>), so it never got the page's
     usual section padding — without this the checkout content sat flush against
     the drawer's edges */
  #reserve-drawer > .wrap{padding:32px 28px 48px;}
  @media (max-width:899px){
    #reserve-drawer > .wrap{padding:24px 20px 40px;}
  }
  .option-list{margin-top:24px; display:flex; flex-direction:column; gap:10px;}
  .option-row{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
    border-radius:8px; padding:16px 18px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    cursor:pointer;
  }
  .option-row:hover{border-color:rgba(255,90,60,.65); background:rgba(255,255,255,.12);}
  .option-row.selected{border-color:var(--coral); border-width:2px; padding:15px 17px;
    background:rgba(255,90,60,.22); box-shadow:inset 4px 0 0 var(--coral);}
  .option-row.selected:hover{background:rgba(255,90,60,.20);}
  .option-row input.option-input{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .option-row .radio{
    width:18px; height:18px; border-radius:50%; border:2px solid #fff; flex:0 0 auto;
    display:inline-block; margin-right:12px;
  }
  .option-row .radio.checkbox{border-radius:4px;}
  .option-row.selected .radio{border-color:var(--coral); background:var(--coral);}
  .option-row .label{font-size:14.5px; display:flex; align-items:center; flex:1 1 auto;}
  .option-row .price{font-weight:800; font-size:15.5px; color:var(--gold); white-space:nowrap;}
  .option-note{font-size:12px; color:#a9b6c9; margin-top:2px; font-weight:400;}
  /* KAAM-39544: "Deposit is included" sits under the option at every width (the rule below stacks every label only
     at 820px and below; on desktop the Deposit row keeps its note inline) */
  .option-row .label.has-sub{flex-direction:column; align-items:flex-start; gap:2px;}
  /* KAAM-39544 (Ravi 28 Oct: "make it use same as the cost"): "Deposit is included" in the price's gold; size and
     weight stay small. Scoped to .has-sub so the Deposit row's "(balance due ...)" note keeps its grey. */
  .option-row .label.has-sub .option-note{color:var(--gold);}
  @media (max-width:820px){
    /* phone: the inline note squeezed the option label into a narrow column */
    .option-row .label{flex-direction:column; align-items:flex-start; gap:2px;}
  }
  .option-group{border-bottom:1px solid rgba(255,255,255,.15); padding:4px 0 12px;}
  .option-group summary{
    cursor:pointer; font-weight:700; font-size:14.5px; color:#fff;
    padding:12px 0; list-style:none; display:flex; justify-content:space-between; align-items:center;
  }
  .option-group summary::-webkit-details-marker{display:none;}
  .option-group summary:after{content:"+"; font-size:18px; color:var(--gold);}
  .option-group[open] summary:after{content:"–";}
  .option-list.nested{margin-top:4px;}
  .checkout-box{
    margin-top:26px; background:#fff; color:var(--ink); border-radius:8px; padding:22px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  .checkout-box .total{font-size:14px; color:var(--gray);}
  .checkout-box .total strong{display:block; font-size:22px; color:var(--ink);}
  .form-hint{font-size:12px; color:#a9b6c9; margin-top:12px;}

  /* CONTACT list — reused inside the merged .cta-contact-card's right column */
  .contact-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
  .contact-list li{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink);}
  .contact-icon{
    width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--coral); flex:0 0 auto;
  }
  .contact-icon svg{width:17px; height:17px;}

  /* EVENT META — Add to Calendar + Details/Venue/Organizer (now inside Overview tab) */
  .event-meta{border-top:1px solid var(--line); margin-top:32px; padding-top:32px;}
  .add-to-cal-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:10px 16px; font-size:13px; font-weight:700; color:var(--ink);
    cursor:pointer; margin-bottom:28px;
    transition:background .15s ease, border-color .15s ease;
  }
  /* KAAM-37470: the mockup gave this button no hover state. Mirrors .related-pill, the design's own hover
     for a white, --line-bordered secondary control (same background, border, weight and ink colour). */
  .add-to-cal-btn:hover{background:var(--cream); border-color:var(--coral);}
  .add-to-cal-btn svg{width:16px; height:16px;}
  /* KAAM-37470: the Add to calendar menu. The mockup had none, so it is built from the design's own values: the
     button's border and radius, .related-pill's cream hover, and the drawers' shadow depth (24px, .18) turned down. */
  .add-to-cal{position:relative; display:inline-flex;}
  .add-to-cal-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:40;   /* under the sticky header (50) */
    min-width:100%; margin:0; padding:6px 0; list-style:none;
    background:#fff; border:1px solid var(--line); border-radius:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .add-to-cal-menu[hidden]{display:none;}
  .add-to-cal-menu a{
    display:block; padding:10px 16px; white-space:nowrap;
    font-size:13px; font-weight:700; color:var(--ink);
  }
  .add-to-cal-menu a:hover{background:var(--cream);}
  .meta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .meta-col-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .meta-col .meta-icon{
    width:40px; height:40px; border-radius:50%; background:var(--cream);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    color:var(--coral); flex:0 0 auto;
  }
  .meta-col .meta-icon svg{width:18px; height:18px;}
  .meta-col h3{font-size:19px; margin:0; font-weight:700;}
  .meta-col p{font-size:14.5px; color:var(--gray); line-height:1.6; margin:0;}
  .meta-col a{color:#499ae1; text-decoration:underline;}

  /* RELATED EVENTS — simplified per Marc: one compact block instead of a heavy
     3-card image grid, so it doesn't feel like it's pulling swimmers off the page. */
  .related-events h2{margin-bottom:0;}
  .related-simple{
    border:1px solid var(--line); border-radius:8px; padding:26px 20px; margin-top:20px;
    text-align:center; background:#fafafa;
  }
  .related-simple h2{font-size:20px; margin-bottom:6px;}
  .related-simple .sub{color:var(--gray); font-size:14px; margin-bottom:16px;}
  .related-list{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
    list-style:none; padding:0; margin:0;
  }
  .related-list li{display:contents;}
  /* clickable: tapping a date pill opens the shared session drawer for that
     alternate session (see .session-drawer below) */
  .related-pill{
    background:#fff; border:1px solid var(--line); border-radius:20px; padding:8px 16px;
    font-size:13.5px; font-weight:700; color:var(--ink); font-family:inherit; cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .related-pill:hover{background:var(--cream); border-color:var(--coral);}
  .related-pill[aria-expanded="true"]{background:var(--coral); border-color:var(--coral); color:#fff;}

  /* SESSION DRAWER — one shared off-canvas panel for the 3 "Related Events" alternate
     sessions. Unlike the Learn More drawer (inline tabs on desktop, overlay on mobile),
     this one is always an overlay on every breakpoint: a swimmer only ever looks at ONE
     alternate session at a time, so there's no case for showing all three inline. Reuses
     the exact same tabs-desktop/accordion-mobile markup pattern as Learn More. */
  .session-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:150;
  }
  .session-backdrop.is-open{opacity:1; pointer-events:auto;}
  .session-drawer{
    position:fixed; top:0; right:0; bottom:0; width:88vw; max-width:480px;
    background:#fff; z-index:151; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-8px 0 24px rgba(0,0,0,.18);
  }
  .session-drawer.is-open{transform:translateX(0);}
  /* unlike the mobile-only Learn More drawer, this header needs to look right at
     every breakpoint (this drawer is always an overlay) — real title text, not a
     small eyebrow label, with the close button pinned to the far right */
  /* header bar chrome (padding/border/close button) matches the Learn More drawer's
     header exactly now, per Shyma — that's the standard both drawers share. Only the
     title content differs: Learn More keeps its plain label, this one shows the event
     name as the real header line with the date underneath in small text. */
  .session-drawer .learn-drawer-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 15px; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:#fff; z-index:2;
  }
  .session-title-block{display:flex; flex-direction:column; gap:3px;}
  /* matches the Learn More label exactly: same weight, size, letter-spacing,
     uppercase, and coral color — this is the "same format" Shyma asked for. */
  .session-title-name{
    font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--coral); line-height:1.3;
  }
  .session-title-dates{
    font-size:11.5px; font-weight:600; color:var(--gray); line-height:1.3; text-transform:none;
  }
  /* KAAM-39540: "View this camp" under the dates (2027 camp pages only - the script adds it when the pill has a
     camp page; the November page never gets the element) */
  .session-view-camp{
    font-size:12.5px; font-weight:700; color:var(--coral); line-height:1.3; text-decoration:underline;
    /* the phone header (.learn-drawer-head <=899px) uppercases + letter-spaces its children - opt out like the dates */
    text-transform:none; letter-spacing:normal;
  }
  .session-view-camp:hover{color:var(--ink);}
  .session-drawer .learn-close{
    background:none; border:none; font-size:26px; line-height:1; color:var(--gray);
    cursor:pointer; padding:4px 8px; flex-shrink:0;
  }
  /* the generic `section{padding:56px 15px}` rule zeroes tabs-section's top padding
     (fine in its original inline-page position, where the section above already
     supplies bottom padding) — but as the first thing inside an always-overlay
     drawer, that left everything jammed against the sticky header. Give it real
     padding here instead. */
  .session-drawer .tabs-section{border-bottom:none; padding:32px 28px 48px;}
  /* toggles between the "standard" (same as main camp) and "starts-turns" (real,
     distinct 2-day program) content variants inside the session drawer */
  .session-variant{display:none;}
  .session-variant.is-active{display:block;}
  @media (max-width:899px){
    .session-drawer{width:88vw; max-width:420px;}
    .session-drawer .tabs-section{padding:24px 20px 40px;}
  }
  /* wider on desktop — 480px read as cramped/narrow on large screens; this still
     leaves most of the page visible on the left, per the original "sliver" ask */
  @media (min-width:900px){
    .session-drawer{width:46vw; max-width:680px;}
  }

  /* SITE FOOTER — landing-page rule (per Marc): branding only, no links off the page, ever */
  .site-footer{background:#000; color:#a9b6c9; padding:36px 15px 22px; text-align:center;}
  .footer-brand-row{display:flex; justify-content:center; margin-bottom:18px;}
  .footer-logo{height:36px; width:auto; display:block;}
  .footer-bottom{
    max-width:1170px; margin:0 auto; padding-top:18px;
    border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#a9b6c9; text-align:center;
  }

  @media (max-width:820px){
    .days, .coaches{grid-template-columns:1fr;}
    .event-open h1{font-size:26px;}
    .included{grid-template-columns:1fr;}
    .checkout-box{flex-direction:column; align-items:stretch; text-align:center;}
    .schedule-row .day-name{flex:0 0 100%;}
    .meta-grid, .equip-layout{grid-template-columns:1fr;}
  }

  /* KAAM-37470: hero video pop-up. The mockup had a play badge and no player. Built from the design's own values: the
     email modal's backdrop (rgba(0,0,0,.45), .25s fade), .learn-close's button metrics, and #cfd8e6, the design's close
     colour on dark. The box is 9:16 (the promo is 1080x1920) and as large as the viewport allows. */
  .hero-media .video-wrap.is-playable{cursor:pointer;}
  .video-modal{
    position:fixed; inset:0; z-index:170; display:flex; align-items:center; justify-content:center; padding:48px 16px 24px;
    background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .video-modal.is-open{opacity:1; pointer-events:auto;}
  .video-modal__box{position:relative; width:min(92vw, calc((100vh - 72px) * 9 / 16)); aspect-ratio:9/16;}
  .video-modal__frame, .video-modal__frame iframe{display:block; width:100%; height:100%; border:0; border-radius:8px; background:#000;}
  .video-modal__close{
    position:absolute; top:-40px; right:-8px; background:none; border:none; font-size:24px; line-height:1;
    color:#cfd8e6; cursor:pointer; padding:4px 8px;
  }