/* ============================================
   CLIENT-BRIEF FEATURES — styled in the original design language
   (same tokens, fonts, borders and hover behaviour as design-system.css
   and pages.css; load this file after them).

   Home: 4 landing options · options bar (replaces the numbers bar) ·
         YouTube stamp collection · book tabs · video players
   Academy: 14-session list · 2027 batches
   Shared: WhatsApp contacts · native form extras · success panel ·
           video lightbox + booking calendar · programme filters
   ============================================ */

[hidden]{display:none !important}
body.is-locked{overflow:hidden}

/* --- NAV: nine links (Sales Accelerator added) on one line, original typography.
       Tighten the gap first, then drop the "Home" link (the logo is home),
       then switch to the original hamburger menu. --- */
nav .nav-links a{white-space:nowrap}
@media(max-width:1520px){.nav-links{gap:22px}}
@media(min-width:1251px) and (max-width:1400px){
  .nav-inner{padding:0 40px}
  .nav-links a{letter-spacing:1.5px}
  .nav-links li:first-child{display:none}
}
@media(max-width:1250px){
  .nav-links{display:none}
  .hamburger{display:flex}
}

/* --- HOME HERO: taller content (4 options), so let the hero grow --- */
.hero--home{height:auto;min-height:100vh;padding:calc(var(--nav-h) + 56px) 0 120px}
.hero--home .hero-subtitle{margin-bottom:44px}

/* Background loop video (APP.heroVideo) — fades in over the fallback */
.hero-video-bg video,.hero-video-bg iframe{position:absolute;z-index:1;opacity:0;transition:opacity 1.2s ease}
.hero-video-bg video{inset:0}
.hero-video-bg iframe{top:50%;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-video-bg .is-ready{opacity:1}

/* --- 4 OPTIONS ON THE LANDING --- */
.hero-options{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:960px;margin:0 auto;animation:fadeUp 1s ease 0.8s both}
.hero-option{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:132px;padding:24px 22px 20px;text-align:left;text-decoration:none;background:rgba(20,20,20,0.55);border:1px solid rgba(184,146,42,0.3);overflow:hidden;transition:all var(--transition)}
.hero-option::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform 0.4s}
.hero-option:hover{border-color:var(--gold);background:rgba(184,146,42,0.1);transform:translateY(-4px)}
.hero-option:hover::before{transform:scaleX(1)}
.hero-option-num{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:2px;color:var(--gold)}
.hero-option-name{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--warm-white);font-weight:400;line-height:1.6}
.hero-option-go{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-pale)}
.hero-option:hover .program-arrow{transform:translateX(6px)}

/* --- OPTIONS BAR (same band as the old numbers bar) --- */
.option-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:4px 10px;text-decoration:none;transition:transform var(--transition)}
.option-stat-name{font-family:var(--font-display);font-size:clamp(24px,2.3vw,32px);font-weight:600;color:var(--gold);line-height:1.18;text-wrap:balance;transition:color 0.3s}
.option-stat .stat-label{margin-top:0;display:flex;align-items:center;gap:10px}
.option-stat .program-arrow{width:22px}
.option-stat:hover{transform:translateY(-4px)}
.option-stat:hover .option-stat-name{color:var(--gold-light)}
.option-stat:hover .program-arrow{transform:translateX(6px)}
.stats-inner--3{grid-template-columns:repeat(3,1fr);max-width:960px}

/* --- YOUTUBE STAMP COLLECTION --- */
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 32px;margin-top:64px;align-items:start}
.stamp{
  --r:5px;
  position:relative;display:block;width:100%;padding:calc(2.2*var(--r));border:none;cursor:pointer;text-align:left;text-decoration:none;
  background:#F5F0E8;color:#2A2418;font-family:var(--font-body);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,0.35));transition:transform 0.4s ease,filter 0.4s ease;
  -webkit-mask:
    radial-gradient(var(--r),#0000 97%,#000) round calc(-1.5*var(--r)) calc(-1.5*var(--r)) / calc(3*var(--r)) calc(3*var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
  mask:
    radial-gradient(var(--r),#0000 97%,#000) round calc(-1.5*var(--r)) calc(-1.5*var(--r)) / calc(3*var(--r)) calc(3*var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}
.stamp:hover,.stamp:focus-visible{transform:translateY(-6px);filter:drop-shadow(0 16px 22px rgba(0,0,0,0.45))}
.stamp-img{position:relative;display:block;aspect-ratio:4/3;background:#2A2418 center/cover no-repeat}
.stamp-img::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(42,36,24,0.35)}
.stamp-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(20,20,20,0.55);border:1px solid rgba(184,146,42,0.7);display:flex;align-items:center;justify-content:center;z-index:1}
.stamp-play svg{width:15px;height:15px;fill:var(--gold-light);margin-left:2px}
.stamp-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-top:10px}
.stamp-title{font-size:12px;font-weight:400;line-height:1.45;color:#2A2418;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stamp-value{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:18px;line-height:1;color:var(--gold);flex-shrink:0}
.stamp-img--channel{display:flex;align-items:center;justify-content:center;text-align:center;background:#141414;color:var(--gold);font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1.1}
.stamp-img--channel small{display:block;font-family:var(--font-body);font-size:10px;font-weight:400;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-pale);margin-top:8px}
.stamps-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:60px}

/* --- TABS (book editions) --- */
.rr-tabs{display:inline-flex;gap:2px;padding:4px;border:1px solid rgba(184,146,42,0.2);margin-top:12px}
.rr-tab{background:none;border:none;padding:12px 34px;font-family:var(--font-body);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:400;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}
.rr-tab:hover{color:var(--gold)}
.rr-tab[aria-selected="true"]{background:var(--gold);color:#141414;font-weight:500}
.rr-tab.si-tab{font-size:15px;letter-spacing:1px;text-transform:none}
.rr-tab-panel{animation:fadeUp 0.6s ease both}
.book-feature--single{grid-template-columns:320px 1fr;margin-top:56px}
.book-feature--single .book-cover-wrap{max-width:300px;margin:0 auto}
.book-feature--single .book-available{max-width:300px;margin:20px auto 0}
.book-right-col .video-frame{max-width:640px}

/* --- VIDEO PLAYERS (click-to-play frame in the old video-band style) --- */
.video-frame{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  background:var(--charcoal-3) center/cover no-repeat;border:1px solid rgba(184,146,42,0.3)}
.video-frame::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.4);transition:background 0.3s}
.video-frame:hover::before{background:rgba(0,0,0,0.25)}
.video-frame .vc-play-btn{width:68px;height:68px;background:rgba(20,20,20,0.35)}
.video-frame .vc-play-btn svg{width:22px;height:22px}
.video-frame:hover .vc-play-btn{background:rgba(184,146,42,0.15);border-color:var(--gold)}
.video-frame-cap{position:absolute;left:24px;right:24px;bottom:18px;z-index:1;display:flex;flex-direction:column;gap:2px}
.video-frame-cap strong{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:#F5F0E8}
.video-frame-cap span{font-size:12px;color:#C9BFA9;font-weight:300}
.video-frame.is-playing{cursor:default;background:#000}
.video-frame.is-playing::before{display:none}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#000}
.video-frame.is-empty,.vc-item.is-empty{cursor:default}
.video-frame.is-empty{background-image:radial-gradient(ellipse 80% 60% at 50% 60%,rgba(184,146,42,0.08) 0%,transparent 70%)}
.video-frame.is-empty::before{background:none}
.video-frame.is-empty .vc-play-btn,.vc-item.is-empty .vc-play-btn{opacity:0.35}
.video-soon{position:absolute;top:16px;right:16px;z-index:1;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-pale);border:1px solid rgba(184,146,42,0.3);padding:5px 12px;background:rgba(20,20,20,0.6)}
.video-band{max-width:1000px;margin:0 auto}
.video-band--narrow{max-width:900px;margin:44px auto 0}

/* Review video cards (.vc-item) rendered as buttons for keyboard access */
button.vc-item{display:block;width:100%;padding:0;background:none;color:inherit;font:inherit;text-align:left}
button.vc-item .vc-caption,button.vc-item .vc-caption-title,button.vc-item .vc-caption-sub{display:block}
.vc-thumb{background-size:cover;background-position:center}
.vc-shade{position:absolute;inset:0;background:rgba(0,0,0,0.4)}

/* --- LIGHTBOX (video) + BOOKING CALENDAR — matches the old modals --- */
.rr-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);align-items:center;justify-content:center;padding:60px 0 20px}
.rr-modal.is-open{display:flex}
.rr-modal-dialog{position:relative;max-width:900px;width:92%;aspect-ratio:16/9;background:var(--charcoal-3);border:1px solid rgba(184,146,42,0.3)}
.rr-modal-body,.rr-modal-body iframe,.rr-modal-body video{position:absolute;inset:0;width:100%;height:100%;border:none}
.rr-modal-close{position:absolute;top:-44px;right:0;background:none;border:none;color:#F5F0E8;font-size:32px;line-height:1;cursor:pointer;padding:4px 8px;transition:color 0.3s}
.rr-modal-close:hover{color:var(--gold)}
.rr-modal.is-booking{background:rgba(0,0,0,0.6);padding:20px 0}
.rr-modal.is-booking .rr-modal-dialog{aspect-ratio:auto;max-width:650px;width:90%;max-height:90vh;overflow-y:auto;background:#fff;border:none;border-radius:8px;padding:20px}
.rr-modal.is-booking .rr-modal-body{position:static}
.rr-modal.is-booking .rr-modal-body iframe{position:static;height:75vh;min-height:500px}
.rr-modal.is-booking .rr-modal-close{top:10px;right:15px;color:#333;font-size:24px;z-index:10}

/* --- 14 SESSIONS (each expands to its snippet video) --- */
.session-list{display:flex;flex-direction:column;gap:2px;margin-top:60px}
.session-item{background:var(--charcoal-2);border:1px solid rgba(184,146,42,0.08);transition:background 0.3s,border-color 0.3s}
.session-item[open]{background:var(--charcoal-3);border-color:rgba(184,146,42,0.25)}
.session-item summary{list-style:none;display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:28px;padding:30px 40px;cursor:pointer}
.session-item summary::-webkit-details-marker{display:none}
.session-num{font-family:var(--font-display);font-size:60px;font-weight:700;line-height:1;color:rgba(184,146,42,0.14)}
.session-title{display:block;font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.2;color:var(--warm-white);margin-bottom:6px;transition:color 0.3s}
.session-sub{display:block;font-size:16px;font-weight:300;line-height:1.85;color:var(--text-muted)}
.session-item summary:hover .session-title{color:var(--gold)}
.session-toggle{position:relative;width:44px;height:44px;border:1px solid rgba(184,146,42,0.3);transition:all 0.3s}
.session-toggle::before,.session-toggle::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1px;background:var(--gold);transform:translate(-50%,-50%)}
.session-toggle::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform 0.3s}
.session-item[open] .session-toggle{border-color:var(--gold);background:rgba(184,146,42,0.08)}
.session-item[open] .session-toggle::after{transform:translate(-50%,-50%) rotate(0deg)}
.session-body{padding:0 40px 40px 164px}
.session-body .video-frame{max-width:720px}

/* --- 2027 BATCHES --- */
.batch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px}
.batch-card{background:var(--charcoal-2);border:1px solid rgba(184,146,42,0.1);padding:40px 32px;text-align:center;transition:border-color 0.3s}
.batch-card:hover{border-color:rgba(184,146,42,0.35)}
.batch-label{display:block;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.batch-date{display:block;font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.2;color:var(--warm-white)}
.batch-note{display:block;font-size:14px;font-weight:300;color:var(--text-muted);margin-top:10px}
.batch-card.is-tbc .batch-date{font-weight:300;font-style:italic;color:var(--gold-pale)}

/* --- WHATSAPP CONTACTS (old social-link rows + a call button) --- */
.wa-contacts{display:flex;flex-direction:column;gap:12px}
.wa-contact{display:flex;gap:8px}
.wa-contact .social-link{flex:1;min-width:0}
.social-icon svg.wa-icon{width:22px;height:22px;fill:#25D366;stroke:none}
.wa-call{flex:0 0 58px;display:flex;align-items:center;justify-content:center;background:var(--charcoal-2);border:1px solid rgba(184,146,42,0.1);color:var(--gold);text-decoration:none;transition:border-color 0.3s,background 0.3s}
.wa-call:hover{border-color:rgba(184,146,42,0.4);background:var(--charcoal-3)}
.wa-call svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.wa-heading{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-pale);margin-bottom:-12px}

/* --- NATIVE FORMS (extras on top of the old .form-* styles) --- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-label .form-opt{letter-spacing:1px;text-transform:none;color:var(--text-muted)}
.form-select{cursor:pointer;padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8922A' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.form-select option{background:var(--charcoal-3);color:var(--warm-white)}
.form-textarea{height:110px}
fieldset.form-group{border:0;padding:0;min-width:0}
fieldset.form-group legend{padding:0}
.form-choices{display:flex;gap:12px;flex-wrap:wrap}
.form-choice{position:relative}
.form-choice input{position:absolute;opacity:0;width:1px;height:1px}
.form-choice span{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--charcoal-3);border:1px solid rgba(184,146,42,0.15);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:all 0.3s}
.form-choice span::before{content:'';width:12px;height:12px;border-radius:50%;border:1px solid rgba(184,146,42,0.45);transition:all 0.3s}
.form-choice input:checked+span{border-color:var(--gold);color:var(--gold)}
.form-choice input:checked+span::before{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--charcoal-3)}
.form-choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.form-note{font-size:13px;font-weight:300;color:var(--text-muted);line-height:1.7;margin-top:16px}
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.form-submit[disabled]{opacity:0.6;cursor:wait}

/* Success panel (replaces the form once it is sent) */
.form-success{text-align:center;animation:fadeUp 0.6s ease both}
.form-success:focus{outline:none}
.form-success-icon{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--gold)}
.form-success-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.form-success .form-title{margin-bottom:12px}
.form-success p{font-size:16px;font-weight:300;color:var(--text-muted);line-height:1.85}
.form-success .form-success-label{margin:28px 0 14px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-pale)}
.form-success .wa-contacts{text-align:left}

/* --- PROGRAMME FILTERS (pillar tags as buttons) --- */
button.pillar-tag{cursor:pointer;font-family:var(--font-body);transition:all 0.3s}
button.pillar-tag:hover{border-color:rgba(184,146,42,0.45)}
button.pillar-tag[aria-pressed="true"]{background:rgba(184,146,42,0.15);border-color:var(--gold)}

/* --- LIGHT THEME (the original theme toggle) --- */
body.light-theme .hero-option{background:rgba(250,249,246,0.78)}
body.light-theme .hero-option:hover{background:rgba(250,249,246,0.94)}
body.light-theme .stamp{background:#fff;filter:drop-shadow(0 8px 18px rgba(42,36,24,0.22))}
body.light-theme .video-frame.is-empty .video-frame-cap strong{color:var(--warm-white)}
body.light-theme .video-frame.is-empty .video-frame-cap span{color:var(--text-muted)}

/* --- RESPONSIVE --- */
/* Very small phones: the original nav (logo, theme toggle, My Courses, menu)
   is a few pixels wider than 320px — tighten it slightly. */
@media(max-width:380px){
  .nav-right{gap:12px}
  .nav-cta{padding:10px 16px}
}
/* The original mobile rule gives sections 24px side padding, but many sections
   set "padding:…60px" inline, which overrides it and squeezes phone layouts to
   ~270px. Restore the intended 24px on small screens (desktop unchanged). */
@media(max-width:900px){
  .page-content > section[style*="padding"]:not([style*="padding:0"]),
  .page-content > div[style*="padding"]:not([style*="padding:0"]){padding-left:24px !important;padding-right:24px !important}
  .philosophy-band{padding-left:24px;padding-right:24px}
}
@media(max-width:900px){
  .hero--home{padding:calc(var(--nav-h) + 36px) 0 110px}
  .hero-options{grid-template-columns:repeat(2,1fr)}
  .stamps{grid-template-columns:repeat(2,1fr);gap:24px 18px}
  .book-feature--single{grid-template-columns:1fr;gap:48px}
  .session-item summary{grid-template-columns:52px 1fr 36px;gap:16px;padding:22px 20px}
  .session-num{font-size:38px}
  .session-title{font-size:22px}
  .session-sub{font-size:15px}
  .session-toggle{width:36px;height:36px}
  .session-body{padding:0 20px 28px}
  .batch-grid{grid-template-columns:1fr}
  .stats-inner--3{grid-template-columns:repeat(3,1fr)}
  .rr-modal-dialog{width:94%}
}
@media(max-width:600px){
  .stats-inner--3{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .rr-tab{padding:12px 22px}
}
@media(max-width:480px){
  .stats-inner--options{grid-template-columns:1fr;gap:24px}
  .hero-options{grid-template-columns:1fr}
  .hero-option{min-height:0;flex-direction:row;align-items:center;padding:18px 18px}
  .hero-option-go{display:none}
  .stamps{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .stamp{--r:4px}
  .stamp-title{font-size:11px}
}