/* Centurion Community Cricket, design v2 (Daisy, Echelon Media, 20 October 2026)
   Copied from design/v2/ccc-v2.css; the only build edit is marked "build:". Site glue is in ccc-wp.css.
   Loads AFTER ccc.css. This file is the whole v2 layer: motion tokens, header on scroll,
   the home hero (three net lanes), the inner page title system (the stage), the scoreboard
   strip, plates, the live chip, and every micro-interaction. Nothing in ccc.css is deleted;
   the few v1 rules that change are overridden here and listed in DESIGN-NOTES-v2.md.
   Rules: only transform and opacity animate (plus colour/border on hover). The one exception
   is the lane expansion (grid-template-columns, three elements, pointer:fine only). */

/* ---------- 1. motion tokens ---------- */
:root{
  --m-fast:160ms;    /* press, link underline, chevrons */
  --m-base:280ms;    /* hover colour, card lift, plate, header shrink, form step swap */
  --m-slow:560ms;    /* lane description, crease line, veil */
  --m-reveal:640ms;  /* scroll reveals */
  --m-hero:900ms;    /* hero headline lines */
  --m-lane:720ms;    /* lane expansion and lane entrance */
  --m-wipe:760ms;    /* image curtain wipe */
  --m-count:900ms;   /* counters (JS reads this) */
  --m-sweep:1400ms;  /* crest sweep on load */
  --e-out:cubic-bezier(.2,.7,.2,1);      /* enters and settles */
  --e-in-out:cubic-bezier(.65,0,.35,1);  /* lanes, curtain, step swap */
  --e-in:cubic-bezier(.5,0,.75,0);       /* things leaving */
  --e-spring:cubic-bezier(.34,1.56,.64,1);/* tick pop, press release */
  --d-rise:24px;      /* reveal distance */
  --d-rise-lg:44px;   /* hero lanes */
  --d-lift:-4px;      /* card hover */
  --s-press:.97;      /* button press */
  --s-media:1.06;     /* photo scale on hover */
  --stagger:70ms;
  --t0:120ms;         /* page-load sequence origin */
  --ccc-hdr-min:60px;
  --ccc-stage:#000;
}

/* ---------- 2. reduced motion: tokens go to zero, states stay ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--m-fast:1ms;--m-base:1ms;--m-slow:1ms;--m-reveal:1ms;--m-hero:1ms;--m-lane:1ms;--m-wipe:1ms;--m-count:1ms;--m-sweep:1ms;--d-rise:0px;--d-rise-lg:0px;--d-lift:0px;--s-press:1;--s-media:1;--stagger:0ms;--t0:0ms}
}
html.reduce-motion{--m-fast:1ms;--m-base:1ms;--m-slow:1ms;--m-reveal:1ms;--m-hero:1ms;--m-lane:1ms;--m-wipe:1ms;--m-count:1ms;--m-sweep:1ms;--d-rise:0px;--d-rise-lg:0px;--d-lift:0px;--s-press:1;--s-media:1;--stagger:0ms;--t0:0ms}
/* ccc.css v1 killed every animation under reduced motion; v2 replaces that with the tokens above
   so final states still arrive. Override the v1 rule. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
}
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}

[hidden]{display:none!important}

/* reduced motion: the final state of every entrance, so the static design is complete. ccc.css v1 keeps
   animation:none under the media query, which is why end states are written out here. */
@media (prefers-reduced-motion:reduce){
.kin .line>span{transform:none}
.rise-in,.lane2,.score,.stage-copy .plate,.stage-copy .lockup,.stage-copy .dfm,.stage-copy .t-lead,.stage-copy .btn-row,.stage-copy .jump,.stage-media.faces img,.stage-media.faces .more,.stage-media.stack img,.ccc-done{opacity:1;transform:none}
.stage-media.stack img{transform:translate(0,0) rotate(var(--rot,0deg))}
.stage-media img,.stage-media video{transform:none}
.stage-media::after{transform:translateX(101%)}
.crest-sweep{--sweep:120deg}
.chip-live i{animation:none}
.ccc-done .tickc{transform:scale(1)}
html.js .rv,html.js .rv-stagger>*{opacity:1;transform:none}
html.js .wipe img{transform:none}
html.js .wipe::after{transform:translateX(101%)}
.lanes2,.lanes2:has(.lane2:is(:hover,:focus-visible)){grid-template-columns:1fr 1fr 1fr}
.lane2:hover .lm img,.lane2:focus-visible .lm img,.lane2:hover .lm video,.lane2:focus-visible .lm video{transform:none}
.stumps .ball{transform:translateX(220px)}
.stumps .b1{transform:translate(-70px,222px) rotate(-200deg)}
.stumps .b2{transform:translate(90px,224px) rotate(170deg)}
.stumps .s2{transform:rotate(-26deg) translateX(-10px)}
.stumps .s3{transform:rotate(8deg)}
}
html.reduce-motion .kin .line>span{transform:none}
html.reduce-motion .rise-in, html.reduce-motion .lane2, html.reduce-motion .score, html.reduce-motion .stage-copy .plate, html.reduce-motion .stage-copy .lockup, html.reduce-motion .stage-copy .dfm, html.reduce-motion .stage-copy .t-lead, html.reduce-motion .stage-copy .btn-row, html.reduce-motion .stage-copy .jump, html.reduce-motion .stage-media.faces img, html.reduce-motion .stage-media.faces .more, html.reduce-motion .stage-media.stack img, html.reduce-motion .ccc-done{opacity:1;transform:none}
html.reduce-motion .stage-media.stack img{transform:translate(0,0) rotate(var(--rot,0deg))}
html.reduce-motion .stage-media img, html.reduce-motion .stage-media video{transform:none}
html.reduce-motion .stage-media::after{transform:translateX(101%)}
html.reduce-motion .crest-sweep{--sweep:120deg}
html.reduce-motion .chip-live i{animation:none}
html.reduce-motion .ccc-done .tickc{transform:scale(1)}
html.reduce-motion.js .rv, html.reduce-motion.js .rv-stagger>*{opacity:1;transform:none}
html.reduce-motion.js .wipe img{transform:none}
html.reduce-motion.js .wipe::after{transform:translateX(101%)}
html.reduce-motion .lanes2, html.reduce-motion .lanes2:has(.lane2:is(:hover,:focus-visible)){grid-template-columns:1fr 1fr 1fr} /* build: selector fixed (was invalid, so the whole rule was dropped) */
html.reduce-motion .lane2:hover .lm img, html.reduce-motion .lane2:focus-visible .lm img, html.reduce-motion .lane2:hover .lm video, html.reduce-motion .lane2:focus-visible .lm video{transform:none}

/* ---------- 3. header: shrink and blur on scroll, hide on scroll down (mobile) ---------- */
.hdr{transition:background-color var(--m-base) var(--e-out),border-color var(--m-base),transform var(--m-base) var(--e-out);will-change:transform}
.hdr .bar{transition:min-height var(--m-base) var(--e-out)}
.hdr .logo img{transition:transform var(--m-base) var(--e-out);transform-origin:left center}
html.is-scrolled .hdr{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1)}
html.is-scrolled .hdr .bar{min-height:var(--ccc-hdr-min)}
html.is-scrolled .hdr .logo img{transform:scale(.84)}
@media (max-width:1060px){html.hdr-hide .hdr{transform:translateY(-100%)}}
.hdr nav.main a::after,.hdr nav.main button::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:2px;background:var(--ccc-lilac);transform:scaleX(0);transform-origin:left;transition:transform var(--m-fast) var(--e-out)}
.hdr nav.main a:hover::after,.hdr nav.main button:hover::after,.hdr nav.main .is-active::after{transform:scaleX(1)}
.hdr nav.main .is-active::after{content:"";transform:scaleX(1)}

/* ---------- 4. kinetic headline ---------- */
.kin .line{display:block;overflow:hidden;padding:0 .06em .08em 0;margin-bottom:-.08em}
.kin .line>span{display:block;transform:translateY(112%) rotate(1.5deg);transform-origin:left bottom;animation:kin-up var(--m-hero) var(--e-out) forwards;animation-delay:calc(var(--t0) + var(--i,0) * 90ms)}
@keyframes kin-up{to{transform:none}}
.rise-in{opacity:0;transform:translateY(var(--d-rise));animation:rise var(--m-reveal) var(--e-out) forwards;animation-delay:calc(var(--t0) + 340ms + var(--i,0) * var(--stagger))}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- 5. plate (the Peldon lane sign) and the live chip ---------- */
.plate{display:inline-grid;grid-auto-flow:column;align-items:center;gap:0 10px;padding:6px 12px 6px 10px;border-radius:6px;background:var(--ccc-purple);color:#fff;font-family:var(--ccc-display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1;letter-spacing:.02em;box-shadow:0 2px 0 rgba(0,0,0,.35);text-decoration:none}
.plate small{font-family:var(--ccc-body);font-weight:700;font-size:11px;letter-spacing:.14em;padding:3px 6px;border:1px solid rgba(255,255,255,.55);border-radius:4px;line-height:1}
.plate.pl-white{background:#fff;color:var(--ccc-purple)}
.plate.pl-white small{border-color:rgba(100,50,127,.5)}
.plate.pl-lilac{background:var(--ccc-lilac);color:#1c0c26}
.plate.pl-lilac small{border-color:rgba(28,12,38,.4)}
.plate.pl-silver{background:var(--ccc-silver);color:#111}
.plate.pl-silver small{border-color:rgba(0,0,0,.35)}
.chip-live{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:var(--ccc-r-pill);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;font-size:14px;line-height:1.3;transition:border-color var(--m-base),background-color var(--m-base),transform var(--m-fast) var(--e-out)}
.chip-live i{width:9px;height:9px;border-radius:50%;background:var(--ccc-lilac);flex:0 0 9px;animation:chip-pulse 2.2s var(--e-in-out) 3;animation-delay:calc(var(--t0) + 900ms)}
.chip-live b{font-weight:700;color:#fff;margin-right:2px}
.chip-live:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.chip-live:active{transform:scale(var(--s-press))}
@keyframes chip-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- 6. crest sweep: the plume lines draw in from the corner ---------- */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.crest-sweep{position:absolute;inset:0;pointer-events:none;z-index:0;--sweep:0deg;
  background:repeating-conic-gradient(from 150deg at 100% 0%,rgba(255,255,255,.12) 0 .55deg,transparent .55deg 3.4deg);
  -webkit-mask-image:conic-gradient(from 150deg at 100% 0%,#000 var(--sweep),transparent 0),radial-gradient(circle at 100% 0%,#000 0,#000 40%,transparent 72%);
  -webkit-mask-composite:source-in;
  mask-image:conic-gradient(from 150deg at 100% 0%,#000 var(--sweep),transparent 0),radial-gradient(circle at 100% 0%,#000 0,#000 40%,transparent 72%);
  mask-composite:intersect;
  animation:sweep var(--m-sweep) var(--e-out) forwards;animation-delay:var(--t0)}
@keyframes sweep{to{--sweep:120deg}}
.crest-sweep.purple{background:repeating-conic-gradient(from 150deg at 100% 0%,rgba(255,255,255,.16) 0 .55deg,transparent .55deg 3.4deg)}
.crest-sweep.tl{background:repeating-conic-gradient(from 60deg at 0% 0%,rgba(255,255,255,.12) 0 .55deg,transparent .55deg 3.4deg);
  -webkit-mask-image:conic-gradient(from 60deg at 0% 0%,#000 var(--sweep),transparent 0),radial-gradient(circle at 0% 0%,#000 0,#000 40%,transparent 72%);
  mask-image:conic-gradient(from 60deg at 0% 0%,#000 var(--sweep),transparent 0),radial-gradient(circle at 0% 0%,#000 0,#000 40%,transparent 72%)}

/* ---------- 7. home hero: headline, lead, live chip, three net lanes ---------- */
.hero2{position:relative;overflow:hidden;background:#000;color:#fff;isolation:isolate}
.hero2 .wrap{position:relative;z-index:1;display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:min(calc(100svh - var(--ccc-hdr)),940px);padding-top:clamp(28px,3.6vw,44px);padding-bottom:clamp(24px,3vw,40px)}
.t-hero{font-family:var(--ccc-display);font-weight:800;text-transform:uppercase;font-size:clamp(60px,8.8vw,130px);line-height:.9;letter-spacing:.002em;margin:0;color:#fff;max-width:11em}
.hero2-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 32px;margin-top:clamp(16px,2vw,24px)}
.hero2-row .t-lead{color:#d9d9d9;max-width:36em;font-size:clamp(16px,1.3vw,19px)}
.lanes2{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:clamp(20px,2.6vw,30px);min-height:clamp(280px,38vh,460px);transition:grid-template-columns var(--m-lane) var(--e-in-out)}
.lane2{position:relative;display:grid;align-content:end;overflow:hidden;border-radius:12px;background:#111;color:#fff;text-decoration:none;min-width:0;contain:layout paint;isolation:isolate;opacity:0;transform:translateY(var(--d-rise-lg));animation:rise var(--m-lane) var(--e-out) forwards;animation-delay:calc(var(--t0) + 420ms + var(--i,0) * 90ms)}
.lane2 .lm{position:absolute;inset:0;z-index:0;overflow:hidden}
.lane2 .lm img,.lane2 .lm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.001);transition:transform 1.1s var(--e-out)}
.lane2 .lm video{opacity:0;transition:opacity var(--m-slow) var(--e-out),transform 1.1s var(--e-out)}
.lane2 .lm.is-playing video{opacity:1}
.lane2 .lm::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0,rgba(0,0,0,.5) 38%,rgba(0,0,0,.14) 66%,rgba(0,0,0,.26) 100%);transition:opacity var(--m-slow) var(--e-out)}
.lane2 .lm-crest{background:var(--ccc-purple)}
.lane2 .lm-crest::before{content:"";position:absolute;inset:-20% -20% -20% -20%;background:repeating-conic-gradient(from 200deg at 100% 100%,rgba(255,255,255,.15) 0 .6deg,transparent .6deg 3.6deg);-webkit-mask-image:radial-gradient(circle at 100% 100%,#000 0,#000 50%,transparent 76%);mask-image:radial-gradient(circle at 100% 100%,#000 0,#000 50%,transparent 76%);transform-origin:100% 100%;transition:transform 1.1s var(--e-out)}
.lane2 .lm-crest::after{background:linear-gradient(to top,rgba(0,0,0,.55) 0,rgba(0,0,0,.1) 45%,transparent 100%)}
.lane2:hover .lm img,.lane2:focus-visible .lm img,.lane2:hover .lm video,.lane2:focus-visible .lm video{transform:scale(var(--s-media))}
.lane2:hover .lm-crest::before,.lane2:focus-visible .lm-crest::before{transform:rotate(-5deg)}
.lane2 .plate{position:absolute;top:16px;left:16px;z-index:2}
.lane2[data-lane="schools"] .plate{background:#fff;color:var(--ccc-purple)}
.lane2[data-lane="schools"] .plate small{border-color:rgba(100,50,127,.5)}
.lane2 .lx{position:relative;z-index:2;display:grid;gap:8px;padding:22px 22px 24px}
.lane2 .lt{font-family:var(--ccc-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.1vw,46px);line-height:.92;letter-spacing:.01em}
.lane2 .ld{font-size:15px;line-height:1.45;color:#cfcfcf;max-width:30em;transition:color var(--m-slow) var(--e-out)}
.lane2 .la{position:relative;display:inline-block;justify-self:start;font-weight:600;font-size:15px;color:#fff;padding-bottom:3px}
.lane2 .la::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ccc-lilac);transform:scaleX(.28);transform-origin:left;transition:transform var(--m-base) var(--e-out)}
.lane2 .crease{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ccc-lilac);transform:scaleX(0);transform-origin:left;transition:transform var(--m-slow) var(--e-out);z-index:3}
.lane2:hover .ld,.lane2:focus-visible .ld{color:#fff}
.lane2:hover .la::after,.lane2:focus-visible .la::after{transform:scaleX(1)}
.lane2:hover .crease,.lane2:focus-visible .crease{transform:scaleX(1)}
.lane2:hover,.lane2:focus-visible{color:#fff}
.lane2:focus-visible{outline:3px solid var(--ccc-lilac);outline-offset:-3px}
/* expansion: pointer:fine only; the one layout animation in the system */
@media (hover:hover) and (pointer:fine){
  .lanes2:has(.lane2:nth-child(1):is(:hover,:focus-visible)){grid-template-columns:1.55fr .725fr .725fr}
  .lanes2:has(.lane2:nth-child(2):is(:hover,:focus-visible)){grid-template-columns:.725fr 1.55fr .725fr}
  .lanes2:has(.lane2:nth-child(3):is(:hover,:focus-visible)){grid-template-columns:.725fr .725fr 1.55fr}
  .lanes2:hover .lm img,.lanes2:hover .lm video{will-change:transform}
}
@media (hover:none){
  .lane2:active{transform:scale(.985)}
  .lane2 .lm::after{background:linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.55) 48%,rgba(0,0,0,.2) 80%)}
}
.hero2 .vid-ctl{position:absolute;right:14px;top:14px;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:var(--ccc-r-pill);border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background-color var(--m-base),border-color var(--m-base)}
.hero2 .vid-ctl:hover{background:rgba(0,0,0,.8);border-color:#fff}
.hero2 .vid-ctl i{width:10px;height:10px;display:inline-block;background:currentColor;border-radius:1px}
.hero2 .vid-ctl.is-paused i{width:0;height:0;background:transparent;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
@media (max-width:900px){
  .lanes2{grid-template-columns:1fr;gap:10px;min-height:0}
  .lane2{min-height:176px}
  .lane2 .lx{padding:60px 18px 18px}
  .hero2 .vid-ctl{top:auto;bottom:14px}
  .lane2 .ld{font-size:14px;max-width:none}
  .lane2 .plate{top:14px;left:14px;font-size:18px}
}
@media (max-width:640px){
  .hero2 .wrap{min-height:0}
  .hero2-row .t-lead{display:none}
  .t-hero{font-size:clamp(58px,16.5vw,72px)}
}

/* ---------- 8. page title system: the stage ---------- */
.stage{position:relative;overflow:hidden;background:var(--ccc-stage);color:#fff;isolation:isolate;--stage-pt:clamp(28px,3.6vw,48px)}
.stage .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-rows:minmax(0,1fr) auto;gap:0 clamp(24px,4vw,56px);min-height:clamp(520px,68vh,680px);padding-top:var(--stage-pt)}
.stage-copy{grid-column:1;grid-row:1;align-self:center;padding:8px 0 clamp(28px,4vw,48px)}
.stage-copy .plate{margin-bottom:clamp(16px,2vw,24px)}
.stage-copy .lockup{display:block;width:min(260px,70%);height:auto;margin:0 0 18px -4px}
.stage .t-h1{font-size:clamp(46px,5.3vw,76px);color:#fff}
.stage-schools .stage-copy,.stage-contact .stage-copy,.stage-compact .stage-copy{grid-column:1 / -1}
.stage .t-lead{color:#d9d9d9;margin-top:clamp(16px,2vw,22px);max-width:34em}
.stage .btn-row{margin-top:clamp(20px,2.6vw,28px)}
/* the media lane: a grid item that bleeds to the right edge of the viewport and stops at the scoreboard */
.stage-media{grid-column:2;grid-row:1;position:relative;z-index:1;overflow:hidden;min-height:440px;margin-top:calc(-1 * var(--stage-pt));margin-right:calc(-1 * var(--ccc-gutter) - max(0px,(100vw - var(--ccc-max)) / 2));
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%),linear-gradient(to top,transparent 0,#000 18%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 26%),linear-gradient(to top,transparent 0,#000 18%);mask-composite:intersect}
.stage-media img,.stage-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.08);animation:media-settle calc(var(--m-wipe) * 1.5) var(--e-out) forwards;animation-delay:calc(var(--t0) + 60ms)}
.stage-media video{opacity:0;transition:opacity var(--m-slow) var(--e-out)}
.stage-media.is-playing video{opacity:1}
.stage-media::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5) 0,transparent 40%);z-index:1}
.stage-media::after{content:"";position:absolute;inset:0;background:var(--ccc-stage);z-index:2;transform:translateX(0);animation:curtain var(--m-wipe) var(--e-in-out) forwards;animation-delay:calc(var(--t0) + 60ms)}
@keyframes media-settle{to{transform:none}}
@keyframes curtain{to{transform:translateX(101%)}}
.stage-media .cap{position:absolute;left:18px;bottom:30px;z-index:3;margin:0;padding:8px 12px;border-radius:var(--ccc-r-sm);background:rgba(0,0,0,.62);color:#eee;font-size:12.5px;max-width:260px;line-height:1.35}
.stage-copy .plate,.stage-copy .lockup,.stage-copy .dfm,.stage-copy .t-lead,.stage-copy .btn-row,.stage-copy .jump{opacity:0;transform:translateY(var(--d-rise));animation:rise var(--m-reveal) var(--e-out) forwards}
.stage-copy .plate,.stage-copy .lockup,.stage-copy .dfm{animation-delay:var(--t0)}
.stage-copy .t-lead{animation-delay:calc(var(--t0) + 300ms)}
.stage-copy .btn-row,.stage-copy .jump{animation-delay:calc(var(--t0) + 400ms)}
/* scoreboard strip */
.score{grid-column:1 / -1;grid-row:2;position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,40px);border-top:1px solid rgba(255,255,255,.18);padding:clamp(16px,2vw,22px) 0 clamp(22px,3vw,34px);opacity:0;transform:translateY(12px);animation:rise var(--m-reveal) var(--e-out) forwards;animation-delay:calc(var(--t0) + 520ms)}
.score>div{display:grid;gap:5px;align-content:start;padding-right:clamp(20px,3vw,40px);border-right:1px solid rgba(255,255,255,.18);min-width:0;flex:1 1 150px}
.score>div:last-child{border-right:0;padding-right:0}
.score b{font-family:var(--ccc-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:.95;color:#fff;letter-spacing:.01em}
.score b.ph{font-family:var(--ccc-body);font-weight:600;text-transform:none;font-size:17px;line-height:1.3;color:#f1e8f7}
.score>div>span{font-size:14px;color:#cfcfcf;line-height:1.4;overflow-wrap:anywhere}
.score b span{font:inherit;color:inherit}
.score a{color:#fff;text-decoration:none}
.score a:hover b{color:var(--ccc-lilac)}
.score b{transition:color var(--m-base)}
/* variants */
.stage-schools{--ccc-stage:var(--ccc-purple)}
.stage-schools .t-lead{color:#efe6f5}
.stage-schools .score{border-color:rgba(255,255,255,.3)}
.stage-schools .score>div{border-color:rgba(255,255,255,.3)}
.stage-schools .score>div>span{color:#efe6f5}
.stage-contact{--ccc-stage:var(--ccc-purple-ink)}
.stage-compact .wrap{min-height:0;grid-template-rows:auto;padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px)}
.stage-compact .stage-copy{padding-bottom:0}
.stage-compact .t-h1{font-size:clamp(40px,5vw,64px)}
.stage-compact .t-lead{margin-top:12px}
/* media lane fillers for pages without a photo */
.stage-media.faces{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:6px;padding:0 0 0 12%;align-content:center;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%),linear-gradient(to top,transparent 0,#000 22%)}
.stage-media.faces::before,.stage-media.faces::after{display:none}
.stage-media.faces img{position:static;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:8px;transform:none;opacity:0;animation:rise var(--m-reveal) var(--e-out) forwards;animation-delay:calc(var(--t0) + 200ms + var(--i,0) * 60ms)}
.stage-media.stack::before,.stage-media.stack::after{display:none}
.stage-media.stack{-webkit-mask-image:none;mask-image:none;overflow:visible}
.stage-media.stack img{position:absolute;inset:auto;width:auto;height:auto;object-fit:contain;transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--rot,0deg));animation:rise var(--m-reveal) var(--e-out) forwards;animation-delay:calc(var(--t0) + 120ms + var(--i,0) * 110ms);opacity:0;transition:transform var(--m-slow) var(--e-out);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.stage-media.stack .p1{left:6%;top:4%;height:92%;--rot:-8deg}
.stage-media.stack .p2{left:42%;top:18%;width:52%;--rot:0deg}
.stage-media.stack .p3{left:34%;top:62%;width:34%}
.stage-media.stack .p4{left:68%;top:66%;width:16%}
.stage-media.crestfill{-webkit-mask-image:none;mask-image:none}
.stage-media.crestfill::before,.stage-media.crestfill::after{display:none}
@media (max-width:900px){
  .stage .wrap{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;padding-top:28px}
  .stage-copy{grid-column:1;grid-row:1;padding-bottom:24px}
  .stage-media{grid-column:1;grid-row:2;min-height:0;margin:0 calc(-1 * var(--ccc-gutter));aspect-ratio:4/3;max-height:380px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%)}
  .stage-media .cap{bottom:40px}
  .stage-media.faces{aspect-ratio:auto;padding:0 var(--ccc-gutter);grid-template-columns:repeat(4,1fr);-webkit-mask-image:none;mask-image:none}
  .stage-media.stack{aspect-ratio:16/10;max-height:300px}
  .stage-media.stack .p1{left:10%;top:0;height:100%}
  .score{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding-top:18px}
  .score>div{border-right:0;padding-right:0}
  .score b{font-size:28px}
  .stage-compact .stage-media{display:none}
}
@media (max-width:480px){.score{grid-template-columns:1fr 1fr}.score.one{grid-template-columns:1fr}}

/* ---------- 9. micro-interactions: buttons, links, cards ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color var(--m-fast),border-color var(--m-base),background-color var(--m-base),transform var(--m-fast) var(--e-out);transform:translate(var(--mx,0px),var(--my,0px))}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--btn-hover,var(--ccc-purple-deep));transform:translateY(102%);transition:transform var(--m-base) var(--e-out)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--s-press));transition-duration:var(--m-fast)}
.btn-primary:hover{background:var(--ccc-purple);border-color:var(--ccc-purple-deep)}
.btn-black{--btn-hover:var(--ccc-purple)}.btn-black:hover{background:#000;border-color:var(--ccc-purple)}
.btn-outline{--btn-hover:var(--ccc-purple-tint)}.btn-outline:hover{background:transparent}
.btn-white{--btn-hover:var(--ccc-purple-tint)}.btn-white:hover{background:#fff;border-color:#fff}
.btn-ghost-light{--btn-hover:rgba(255,255,255,.12)}.btn-ghost-light:hover{background:transparent}
.btn.busy{pointer-events:none;color:transparent}
.btn.busy::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{position:relative;display:inline-block;text-decoration:none;padding-bottom:2px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(.3);transform-origin:left;transition:transform var(--m-base) var(--e-out)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1)}
.ftr a,.menu a{transition:color var(--m-fast)}
.ftr .soc a{transition:border-color var(--m-base),background-color var(--m-base),transform var(--m-fast) var(--e-out)}
.ftr .soc a:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.ftr .soc a:active{transform:scale(var(--s-press))}
/* cards */
.lift{transition:transform var(--m-base) var(--e-out),border-color var(--m-base),background-color var(--m-base),opacity var(--m-base)}
.lift:hover{transform:translateY(var(--d-lift))}
a.prod{transition:transform var(--m-base) var(--e-out),border-color var(--m-base)}
a.prod:hover{transform:translateY(var(--d-lift))}
.prod .pph img{transition:transform var(--m-slow) var(--e-out)}
.prod:hover .pph img{transform:scale(1.05)}
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform var(--m-base) var(--e-out),border-color var(--m-base)}
[data-tilt]:hover{--ty:var(--d-lift)}
.photo img{transition:transform var(--m-slow) var(--e-out)}
a:hover>.photo img,.hov-media:hover .photo img{transform:scale(1.03)}
.vcard .play{transition:transform var(--m-base) var(--e-spring),background-color var(--m-base)}
.vcard:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.vcard img{transition:transform var(--m-slow) var(--e-out)}
.vcard:hover img{transform:scale(1.04)}
.logos .lg img{filter:grayscale(1);opacity:.78;transition:filter var(--m-base),opacity var(--m-base)}
.logos .lg:hover img{filter:none;opacity:1}
.clubs .cb{transition:transform var(--m-base) var(--e-out),border-color var(--m-base)}
.clubs .cb:hover{transform:translateY(var(--d-lift));border-color:var(--ccc-purple)}
/* choices and chips */
.choice{transition:border-color var(--m-base),background-color var(--m-base),transform var(--m-fast) var(--e-out)}
.choice:active{transform:scale(.99)}
.choice .dot{transition:border-color var(--m-base),box-shadow var(--m-base) var(--e-spring)}
.days label{transition:background-color var(--m-fast),border-color var(--m-fast),color var(--m-fast),transform var(--m-fast) var(--e-out)}
.days label:active{transform:scale(.94)}
.badge{transition:background-color var(--m-base),color var(--m-base)}
/* coach cards: select states */
.coach.select{transition:transform var(--m-base) var(--e-out),border-color var(--m-base),background-color var(--m-base),opacity var(--m-base),box-shadow var(--m-base)}
.coach.select:hover{transform:translateY(-3px);border-color:var(--ccc-ink)}
.coach .tick{transform:scale(0);transition:transform 360ms var(--e-spring)}
.coach.is-on .tick{transform:scale(1)}
.coach .cph img{transition:transform var(--m-slow) var(--e-out)}
.coach.is-on .cph img{transform:scale(1.04)}
.coaches.has-pick .coach.select:not(.is-on),.coaches.has-pick .nopref:not(.is-on){opacity:.68}
.coaches.has-pick .coach.select:not(.is-on):hover{opacity:1}
.nopref{transition:box-shadow var(--m-base),opacity var(--m-base),transform var(--m-base) var(--e-out)}
.coach[hidden]{display:none}
/* form steps */
.ccc-step{transition:opacity var(--m-base) var(--e-out),transform var(--m-base) var(--e-out)}
.ccc-step.leave{opacity:0;transform:translateX(-24px);transition-timing-function:var(--e-in)}
.ccc-step.leave.back{transform:translateX(24px)}
.ccc-step.enter{opacity:0;transform:translateX(24px);transition:none}
.ccc-step.enter.back{transform:translateX(-24px)}
.steps .st{transition:border-color var(--m-base),color var(--m-base)}
.steps .st i{transition:background-color var(--m-base),color var(--m-base),transform var(--m-base) var(--e-spring)}
.steps .st.on i{transform:scale(1.08)}
.input,.select,.textarea{transition:border-color var(--m-base),box-shadow var(--m-base)}
.field.is-error .input,.field.is-error .select,.field.is-error .textarea{animation:nudge 240ms var(--e-out)}
@keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-3px)}60%{transform:translateX(3px)}100%{transform:translateX(0)}}
.ccc-done{opacity:0;transform:translateY(var(--d-rise));animation:rise var(--m-reveal) var(--e-out) forwards}
.ccc-done .tickc{transform:scale(0);animation:pop 420ms var(--e-spring) 120ms forwards}
@keyframes pop{to{transform:scale(1)}}

/* ---------- 10. scroll reveals and image wipes ---------- */
html.js .rv{opacity:0;transform:translateY(var(--d-rise));transition:opacity var(--m-reveal) var(--e-out),transform var(--m-reveal) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger));animation:rv-backstop 1ms 2600ms forwards}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-stagger>*{opacity:0;transform:translateY(var(--d-rise));transition:opacity var(--m-reveal) var(--e-out),transform var(--m-reveal) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger));animation:rv-backstop 1ms 2600ms forwards}
html.js .rv-stagger.in>*{opacity:1;transform:none}
@keyframes rv-backstop{to{opacity:1;transform:none}}
.wipe{position:relative;overflow:hidden;border-radius:var(--ccc-r-lg);isolation:isolate}
.wipe img{display:block;width:100%;height:100%;object-fit:cover}
html.js .wipe img{transform:scale(1.08);transition:transform calc(var(--m-wipe) * 1.5) var(--e-out)}
html.js .wipe::after{content:"";position:absolute;inset:0;z-index:1;background:var(--wipe-colour,var(--ccc-purple));transform:translateX(0);transition:transform var(--m-wipe) var(--e-in-out);animation:wipe-backstop 1ms 2600ms forwards}
html.js .wipe.in img{transform:none}
html.js .wipe.in::after{transform:translateX(101%)}
@keyframes wipe-backstop{to{transform:translateX(101%)}}
.wipe.dark{--wipe-colour:#000}
.wipe.r-0{border-radius:0}

/* ---------- 11. 404: bowled ---------- */
.p404{position:relative;overflow:hidden;background:#000;color:#fff;min-height:calc(100svh - var(--ccc-hdr))}
.p404 .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.p404 .t-hero{font-size:clamp(80px,14vw,200px)}
.p404 .t-lead{color:#d9d9d9;margin-top:18px}
.stumps{position:relative;height:320px;margin:0 auto;width:min(100%,420px)}
.stumps .stump{position:absolute;bottom:40px;width:14px;height:220px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,#d8c7b0,#f3e9d8 50%,#b89f80);transform-origin:bottom center}
.stumps .s1{left:calc(50% - 44px)}.stumps .s2{left:calc(50% - 7px)}.stumps .s3{left:calc(50% + 30px)}
.stumps .bail{position:absolute;top:calc(100% - 268px);width:46px;height:9px;border-radius:5px;background:linear-gradient(90deg,#f3e9d8,#d8c7b0);transform-origin:center}
.stumps .b1{left:calc(50% - 41px)}.stumps .b2{left:calc(50% - 4px)}
.stumps .ball{position:absolute;bottom:40px;left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8b3a8f,#4b2660 60%,#2b1538);box-shadow:inset -4px -6px 10px rgba(0,0,0,.5)}
.stumps .ball::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(255,255,255,.55);transform:rotate(25deg) scaleX(.42)}
.stumps .ground{position:absolute;left:0;right:0;bottom:38px;height:2px;background:rgba(255,255,255,.25)}
.stumps .ball{animation:ball-in 1500ms var(--e-in) forwards;animation-delay:var(--t0);transform:translateX(-70vw) rotate(-900deg)}
.stumps .b1{animation:bail-l 900ms var(--e-out) forwards;animation-delay:calc(var(--t0) + 640ms)}
.stumps .b2{animation:bail-r 900ms var(--e-out) forwards;animation-delay:calc(var(--t0) + 640ms)}
.stumps .s2{animation:stump-hit 700ms var(--e-out) forwards;animation-delay:calc(var(--t0) + 640ms)}
.stumps .s3{animation:stump-hit2 700ms var(--e-out) forwards;animation-delay:calc(var(--t0) + 660ms)}
@keyframes ball-in{0%{transform:translateX(-70vw) rotate(-900deg)}48%{transform:translateX(0) rotate(0)}100%{transform:translateX(220px) rotate(560deg)}}
@keyframes bail-l{0%{transform:none}50%{transform:translate(-34px,-80px) rotate(-130deg)}100%{transform:translate(-70px,222px) rotate(-200deg)}}
@keyframes bail-r{0%{transform:none}50%{transform:translate(40px,-60px) rotate(120deg)}100%{transform:translate(90px,224px) rotate(170deg)}}
@keyframes stump-hit{0%{transform:none}40%{transform:rotate(-14deg)}100%{transform:rotate(-26deg) translateX(-10px)}}
@keyframes stump-hit2{0%{transform:none}40%{transform:rotate(12deg)}100%{transform:rotate(8deg)}}
.p404 .lanes2{min-height:0;grid-template-columns:repeat(3,1fr);margin-top:28px}
.p404 .lane2{min-height:150px;background:#111}
.p404 .lane2 .lx{padding-top:58px}
.p404 .lane2 .lt{font-size:clamp(26px,2.2vw,32px)}
.p404 .lane2 .lm{background:#161616}
.p404 .lane2[data-lane="schools"] .lm{background:var(--ccc-purple)}
@media (max-width:900px){.p404 .wrap{grid-template-columns:1fr}.stumps{height:260px}.stumps .stump{height:170px}.stumps .bail{top:calc(100% - 218px)}.p404 .lanes2{grid-template-columns:1fr}}

/* ---------- 12. utilities ---------- */
.on-dark .plate{box-shadow:0 2px 0 rgba(0,0,0,.6)}
.sr-anim-off *{animation:none!important;transition:none!important}

/* ---------- 13. legibility (review round 2) ---------- */
/* Photo lanes: a veil behind the text block itself, so the description keeps AA (5.9:1 or more) over the brightest photo at any lane height. */
.lane2:not([data-lane="schools"]) .lx::before{content:"";position:absolute;left:0;right:0;top:-56px;bottom:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.74) 56px,rgba(0,0,0,.86) 100%)}
.lane2:not([data-lane="schools"]) .ld{color:#e2e2e2;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* Stage caption chips: solid dark plate, white type. */
/* The media panel's mask fades its left 26% and bottom 18% (phones: top 16%, bottom 18%), which faded the chip too, so it now sits inside the fully opaque area. */
.stage-media .cap{left:auto;right:18px;bottom:calc(18% + 8px);background:#141414;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
@media (max-width:900px){.stage-media .cap{left:auto;right:var(--ccc-gutter);bottom:calc(18% + 6px);max-width:min(260px,calc(100% - 2 * var(--ccc-gutter)))}}
/* Phone lanes: the veil stays inside the text block so the lane plate above it is not dimmed. */
.lane2 .plate{z-index:4}
@media (max-width:900px){.lane2:not([data-lane="schools"]) .lx::before{top:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.74) 48px,rgba(0,0,0,.86) 100%)}}