/* The Driver Development Programme offer: what /coaching/ and the homepage share
   (scoped under .cch; coaching.css is the rest of the coaching page). */

/* ===== Root ===== */
.cch{
  --cch-navh:70px;
  --cch-ease:cubic-bezier(.2,.7,.2,1);
  /* One family, Inter, as the handoff sets it. The base layer gives every h1-h4
     var(--font-display), Orbitron on public pages; redefining it here keeps the
     page's headings in Inter (the nav's wordmark is outside .cch and keeps its own). */
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative; overflow:hidden; flex-shrink:0;
  /* The prototype runs on the browser's default line-height (normal); the site's
     1.5 made every heading without its own line-height taller than drawn. */
  line-height:normal;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e7ecf6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(ellipse 70% 40% at 15% 0%,rgba(47,107,255,.14),transparent 70%),
    radial-gradient(ellipse 50% 30% at 90% 6%,rgba(245,197,66,.08),transparent 70%),
    #05080f;
}
.cch :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){ margin:0; }
.cch :where(ul,ol){ padding:0; list-style:none; }
.cch :where(a){ color:#5bc3f9; text-decoration:none; }
.cch :where(a:hover){ color:#8fd6fb; }
.cch :where(button){ font:inherit; color:inherit; }
.cch-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Text gradients. --gs moves the gold midpoint (40-50% across the prototype). */
.cch-grad-gold{ background:linear-gradient(90deg,#f7e3a1,#f5c542 var(--gs,50%),#e0975a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cch-grad-blue{ background:linear-gradient(90deg,#8fd6fb,#5bc3f9 50%,#2f6bff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Eyebrow: 11.5px caps with a 28px rule in the section's colour. */
.cch-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.cch-eyebrow--blue{ color:#5bc3f9; }
.cch-eyebrow--gold{ color:#f5c542; }
.cch-rule{ flex:none; width:28px; height:1px; background:currentColor; }
.cch-rule--blue{ background:#5bc3f9; }

.cch-h2{ margin-top:18px; color:#f4f7fc; font-size:clamp(32px,4.4vw,54px); font-weight:700; letter-spacing:-.035em; line-height:1.04; }
.cch-intro{ max-width:560px; margin-top:16px; color:#a3afc6; font-size:16px; line-height:1.6; }
.cch-center{ text-align:center; }
.cch-intro--center{ margin-left:auto; margin-right:auto; }
.cch-label{ color:#6f7c96; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }

.cch-sec{ position:relative; max-width:1280px; margin:0 auto; padding:clamp(90px,11vw,150px) clamp(20px,4vw,48px) 40px; }

/* ===== Buttons ===== */
.cch-btn{ display:inline-flex; align-items:center; min-height:52px; padding:0 26px; border-radius:12px; font-size:15px; font-weight:700; transition:transform .35s var(--cch-ease),box-shadow .35s; }
.cch-btn--gold{ background:linear-gradient(180deg,#f7d97a,#f5c542 55%,#d9a52a); color:#1a1204; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 36px -8px rgba(245,197,66,.5); }
.cch-btn--gold:hover{ color:#1a1204; transform:translateY(-1px); }
.cch-btn--blue{ background:linear-gradient(180deg,#4a80ff,#2f6bff); color:#fff; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 32px rgba(47,107,255,.4); }
.cch-btn--blue:hover{ color:#fff; transform:translateY(-1px); }
.cch-btn--hero{ padding:0 28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 36px -8px rgba(245,197,66,.55); }
.cch-btn--outline{ border:1px solid rgba(91,195,249,.4); color:#f4f7fc; font-weight:600; transition:background .3s,color .3s; }
.cch-btn--outline:hover{ color:#fff; background:rgba(91,195,249,.08); }
.cch-btn--cmp{ min-height:48px; padding:0 22px; font-size:14.5px; box-shadow:none; }
.cch-btn--cmp:hover{ transform:none; }

/* ===== 3. The programme (v2: replaces the coaches) ===== */
.cch-prog{ isolation:isolate; }
.cch-prog-glow{ position:absolute; left:50%; top:clamp(160px,18vw,240px); z-index:-1; width:min(1100px,120%); height:700px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse 45% 55% at 70% 40%,rgba(245,197,66,.13),transparent 70%),radial-gradient(ellipse 35% 45% at 20% 70%,rgba(224,151,90,.07),transparent 70%); }
.cch-prog-h2{ text-wrap:balance; }
.cch-prog-lead{ max-width:680px; margin:20px auto 0; color:#d6deeb; font-size:clamp(18px,1.7vw,21px); line-height:1.5; letter-spacing:-.01em; text-wrap:balance; }
.cch-offer{ position:relative; margin-top:64px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:40px clamp(32px,5vw,72px); align-items:center; }

/* What's included: big gold labels down a hairline list. */
.cch-incl-label{ color:#6f7c96; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.cch-incl-list{ margin-top:14px; border-top:1px solid; border-image:linear-gradient(90deg,rgba(245,197,66,.45),rgba(160,180,220,.08)) 1; }
.cch-incl-row{ display:grid; grid-template-columns:clamp(96px,11vw,128px) minmax(0,1fr); gap:20px; align-items:baseline; margin:0 -16px; padding:20px 16px; border-bottom:1px solid rgba(160,180,220,.1); cursor:default; transition:background .4s; }
.cch-incl-big{ width:max-content; font-size:clamp(22px,2.2vw,28px); font-weight:700; letter-spacing:-.04em; line-height:1; transform-origin:left bottom; transition:transform .45s var(--cch-ease),filter .45s; }
.cch-incl-title{ color:#f4f7fc; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
.cch-incl-text{ margin-top:4px; color:#a3afc6; font-size:14.5px; line-height:1.5; transition:color .3s; }
.cch-incl-row:hover{ background:linear-gradient(90deg,rgba(245,197,66,.09),rgba(245,197,66,.02) 60%,transparent); }
.cch-incl-row:hover .cch-incl-big{ transform:scale(1.1); filter:drop-shadow(0 6px 20px rgba(245,197,66,.55)); }
.cch-incl-row:hover .cch-incl-text{ color:#d6deeb; }
/* Phones: the side margins that let the hover wash bleed would overflow the page. */
@media (max-width:480px){
  .cch-incl-row{ grid-template-columns:84px minmax(0,1fr); gap:14px; margin:0; padding:18px 0; }
}

/* The price card: the one panel on the page. */
.cch-pcard{ position:relative; overflow:hidden; padding:clamp(32px,4vw,52px); border:1px solid rgba(245,197,66,.38); border-radius:28px; background:linear-gradient(160deg,rgba(245,197,66,.14),rgba(245,197,66,.03) 45%,rgba(10,15,28,.75)); box-shadow:0 30px 70px -36px rgba(0,0,0,.9); scroll-margin-top:100px; transition:transform .45s var(--cch-ease),box-shadow .45s; }
.cch-pcard > *{ position:relative; }
.cch-pcard > .cch-pcard-ring,.cch-pcard > .cch-pcard-dash{ position:absolute; border-radius:50%; transition:rotate 1.4s var(--cch-ease); }
.cch-pcard-ring{ right:-90px; top:-90px; width:300px; height:300px; border:1px solid rgba(245,197,66,.18); }
.cch-pcard-dash{ right:-130px; top:-130px; width:380px; height:380px; border:1px dashed rgba(245,197,66,.12); }
.cch-pcard-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.cch-pcard-name{ color:#f5c542; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.cch-new{ display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:99px; background:rgba(245,197,66,.14); color:#f7e3a1; font-size:11.5px; font-weight:700; letter-spacing:.04em; }
.cch-new-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:#f5c542; animation:cchPulseGold 1.8s infinite; }
@keyframes cchPulseGold{ 0%{ box-shadow:0 0 0 0 rgba(245,197,66,.55); } 70%{ box-shadow:0 0 0 7px rgba(245,197,66,0); } 100%{ box-shadow:0 0 0 0 rgba(245,197,66,0); } }
.cch-pcard-worth{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:26px; color:#a3afc6; font-size:14px; }
.cch-pcard-worth s{ color:#d6deeb; font-weight:600; text-decoration-color:rgba(245,197,66,.7); }
.cch-save{ padding:4px 10px; border-radius:99px; background:rgba(43,209,126,.12); color:#5fe3a1; font-size:12px; font-weight:700; }
.cch-pcard-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; margin-top:10px; }
.cch-pcard-amt{ font-size:clamp(58px,7.4vw,92px); font-weight:700; letter-spacing:-.06em; line-height:.9; transform-origin:left bottom; transition:transform .45s var(--cch-ease),filter .45s; }
.cch-pcard-once{ color:#d6deeb; font-size:18px; font-weight:600; letter-spacing:-.01em; }
.cch-pcard-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.cch-pcard-tags li{ padding:6px 13px; border-radius:99px; background:rgba(245,197,66,.07); box-shadow:inset 0 0 0 1px rgba(245,197,66,.28); color:#d6deeb; font-size:13px; font-weight:500; }
.cch-pcard-break{ display:flex; flex-direction:column; gap:8px; margin:24px 0 0; padding:16px 0; border-top:1px solid rgba(245,197,66,.18); border-bottom:1px solid rgba(245,197,66,.18); color:#a3afc6; font-size:13.5px; }
.cch-pcard-break > div{ display:flex; justify-content:space-between; gap:16px; }
.cch-pcard-break dd{ margin:0; color:#d6deeb; text-align:right; white-space:nowrap; }
.cch-pcard-break .cch-incl-yes{ color:#f5c542; font-weight:600; }
.cch-pcard-coach{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.cch-ava--card{ background:radial-gradient(circle,rgba(245,197,66,.35),rgba(245,197,66,.05)); box-shadow:0 0 0 2px #0a0f1c,0 0 0 3px rgba(245,197,66,.75),0 10px 26px -6px rgba(245,197,66,.55); }
.cch-pcard-coach > div{ min-width:0; }
.cch-pcard-coach-k{ color:#6f7c96; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.cch-pcard-coach-name{ margin-top:3px; color:#f4f7fc; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.cch-pcard-coach-sub{ margin-top:2px; color:#a3afc6; font-size:12.5px; }
.cch-pcard-cta{ margin-top:26px; }
.cch-btn--block{ display:flex; justify-content:center; width:100%; min-height:56px; padding:0 28px; border-radius:14px; font-size:16px; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 40px -8px rgba(245,197,66,.6); }
.cch-pcard-after{ margin-top:14px; color:#d6deeb; font-size:13.5px; line-height:1.5; text-align:center; }
.cch-pcard-after b{ color:#f5c542; font-weight:600; }
.cch-pcard-once-note{ margin-top:6px; color:#6f7c96; font-size:12.5px; line-height:1.5; text-align:center; }
.cch-pcard:hover{ transform:translateY(-4px); box-shadow:0 40px 90px -30px rgba(245,197,66,.55),0 0 0 1px rgba(245,197,66,.45); }
.cch-pcard:hover .cch-pcard-amt{ transform:scale(1.05); filter:drop-shadow(0 10px 30px rgba(245,197,66,.5)); }
.cch-pcard:hover .cch-pcard-ring,.cch-pcard:hover .cch-pcard-dash{ rotate:90deg; }

/* ===== Round coach photos (the price card, the final call to action) ===== */
.cch-ava{ flex:none; width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 15%; transition:transform .4s var(--cch-ease),box-shadow .4s; }

/* On the homepage: a solid full-width band, as on the coaching page, over its grid. */
.cch--embed{ width:100vw; margin-left:calc(50% - 50vw); background:#05080f; }
.cch--embed .cch-sec{ padding-top:clamp(64px,8vw,110px); padding-bottom:clamp(64px,8vw,110px); }
.cch-home-more{ margin-top:36px; text-align:center; }
.cch .cch-home-more a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#f7e3a1; font-size:16px; font-weight:600; }
.cch .cch-home-more a:hover{ color:#f5c542; }

@media (prefers-reduced-motion:reduce){
  .cch-pcard:hover,.cch-pcard:hover .cch-pcard-amt,.cch-incl-row:hover .cch-incl-big{ transform:none; }
  .cch-pcard:hover .cch-pcard-ring,.cch-pcard:hover .cch-pcard-dash{ rotate:none; }
  .cch-new-dot{ animation:none; }
}

/* One column: the price box and its button come straight after the intro, What's
   included after them (owner 2026-11-08). Two columns keep their sides. */
@media (max-width:1000px){
  .cch-offer{ grid-template-columns:minmax(0,1fr); }
  .cch-pcard{ order:-1; }
}

/* Every spot taken: the line that replaces the buy button. */
.cch-pcard-closed{ margin:0; padding:14px 16px; border:1px solid rgba(245,197,66,.4); border-radius:12px; color:#f4f7fc; font-size:15px; font-weight:600; line-height:1.45; text-align:center; }
.cch-wait{ margin-top:14px; display:grid; gap:10px; }
.cch-wait-input{ width:100%; min-height:48px; padding:0 14px; border:1px solid rgba(160,180,220,.28); border-radius:10px; background:rgba(5,8,15,.6); color:#f4f7fc; font-size:16px; }
.cch-wait-input:focus{ outline:2px solid #f5c542; outline-offset:1px; }
.cch-wait-error{ margin:0; color:#fca5a5; font-size:13.5px; text-align:center; }