:root{
--bg-0:#07090f;
--bg-1:#0b0e18;
--panel:#0e1220;
--cyan:#4fd8ff;
--cyan-dim:rgba(79,216,255,0.32);
--gold:#c9a66b;
--gold-dim:rgba(201,166,107,0.4);
--wood-light:#8a5a34;
--wood-light-2:#a9713f;
--wood-dark:#0d0806;
--ink:#f3f6fb;
--ink-dim:#8d99b2;
--line:rgba(255,255,255,0.09);
--ease-lux:cubic-bezier(0.22, 1, 0.36, 1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{ background:var(--bg-0); color:var(--ink); font-family:'Space Grotesk', sans-serif; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:1280px; margin:0 auto; padding-left:6vw; padding-right:6vw; }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; }
/* ================= NAV ================= */
.nav{
position:fixed; top:0; left:0; right:0; z-index:50;
display:flex; justify-content:space-between; align-items:center;
padding:1.6rem 6vw;
background:linear-gradient(180deg, rgba(7,9,15,0.9), rgba(7,9,15,0));
backdrop-filter:blur(6px);
}
.brand{ display:flex; align-items:center; }
.brand img{ height:36px; width:auto; }
.footer-brand .brand img{ height:48px; }
@media (max-width:600px){ .brand img{ height:28px; } }
.nav-links{ display:flex; align-items:center; gap:2.3rem; font-size:0.9rem; color:var(--ink-dim); }
.nav-links > a{ text-decoration:none; transition:color .3s; }
.nav-links > a:hover{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:0.9rem; }
.nav-cta{ font-size:0.86rem; padding:0.6rem 1.3rem; border:1px solid rgba(255,255,255,0.22); border-radius:2px; text-decoration:none; transition:border-color .3s, background .3s; white-space:nowrap; }
.nav-cta:hover{ border-color:var(--cyan); background:rgba(79,216,255,0.06); }
/* ---- Tools dropdown ---- */
.nav-drop{ position:relative; }
.nav-drop-btn{
display:inline-flex; align-items:center; gap:0.45rem;
background:none; border:none; padding:0; cursor:pointer;
font-family:'Space Grotesk', sans-serif; font-size:0.9rem; color:var(--ink-dim);
transition:color .3s;
}
.nav-drop-btn:hover,
.nav-drop.is-open .nav-drop-btn{ color:var(--ink); }
.nav-caret{
width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
transform:translateY(-2px) rotate(45deg); transition:transform .35s var(--ease-lux);
}
.nav-drop.is-open .nav-caret{ transform:translateY(1px) rotate(225deg); }
.nav-panel{
position:absolute; top:calc(100% + 1.15rem); left:50%; z-index:60;
width:min(30rem, 86vw); padding:0.7rem;
background:linear-gradient(180deg, rgba(16,20,33,0.98), rgba(10,13,22,0.98));
border:1px solid var(--line); border-radius:6px;
box-shadow:0 26px 60px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(79,216,255,0.05) inset;
backdrop-filter:blur(14px);
opacity:0; visibility:hidden; pointer-events:none;
transform:translateX(-50%) translateY(-10px) scaleY(0.97); transform-origin:top center;
transition:opacity .28s ease, transform .38s var(--ease-lux), visibility 0s linear .38s;
}
/* the invisible bridge keeps hover alive across the gap above the panel */
.nav-panel::before{ content:''; position:absolute; left:0; right:0; top:-1.15rem; height:1.15rem; }
.nav-drop.is-open .nav-panel{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(-50%) translateY(0) scaleY(1);
transition:opacity .28s ease, transform .38s var(--ease-lux), visibility 0s;
}
.nav-panel-item{
display:block; padding:0.82rem 0.95rem; border-radius:4px;
text-decoration:none; position:relative;
opacity:0; transform:translateY(-8px);
transition:background .25s ease, opacity .4s ease, transform .45s var(--ease-lux);
}
.nav-drop.is-open .nav-panel-item{ opacity:1; transform:translateY(0); }
.nav-drop.is-open .nav-panel-item:nth-child(1){ transition-delay:.06s, .06s, .06s; }
.nav-drop.is-open .nav-panel-item:nth-child(2){ transition-delay:.06s, .12s, .12s; }
.nav-drop.is-open .nav-panel-item:nth-child(3){ transition-delay:.06s, .18s, .18s; }
.nav-drop.is-open .nav-panel-item:nth-child(4){ transition-delay:.06s, .24s, .24s; }
.nav-panel-item:hover,
.nav-panel-item:focus-visible{ background:rgba(79,216,255,0.07); outline:none; }
.nav-panel-item:focus-visible{ box-shadow:0 0 0 1px var(--cyan-dim); }
.npi-label{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
font-size:0.95rem; color:var(--ink);
}
.npi-label::after{
content:'\2192'; color:var(--cyan); opacity:0; transform:translateX(-6px);
transition:opacity .25s ease, transform .25s var(--ease-lux);
}
.nav-panel-item:hover .npi-label::after,
.nav-panel-item:focus-visible .npi-label::after{ opacity:1; transform:translateX(0); }
.npi-desc{ display:block; margin-top:0.24rem; font-size:0.8rem; color:var(--ink-dim); }
/* ---- Book a demo class ---- */
.nav-demo{
position:relative; overflow:hidden; white-space:nowrap;
display:inline-flex; align-items:center; gap:0.55rem;
padding:0.62rem 1.35rem; border-radius:3px; text-decoration:none;
font-size:0.86rem; font-weight:500; color:#04121b;
background:linear-gradient(135deg, #7fe6ff 0%, #4fd8ff 45%, #35b8ff 100%);
border:1px solid rgba(150,236,255,0.7);
box-shadow:0 0 18px rgba(79,216,255,0.35), 0 0 42px -8px rgba(79,216,255,0.45);
transition:box-shadow .35s ease, transform .25s var(--ease-lux);
}
.nav-demo:hover{ transform:translateY(-1px); box-shadow:0 0 26px rgba(79,216,255,0.55), 0 0 64px -6px rgba(79,216,255,0.6); }
.nav-demo svg{ width:15px; height:15px; flex-shrink:0; }
/* the sheen sweeps across the button on a slow loop */
.nav-demo::after{
content:''; position:absolute; top:-60%; bottom:-60%; width:38%; left:-60%;
background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
transform:skewX(-18deg); pointer-events:none;
animation:demoSheen 4.2s ease-in-out infinite;
}
@keyframes demoSheen{
0%, 62% { left:-60%; }
92%, 100% { left:130%; }
}
@media (max-width:1120px){
.nav-links{ gap:1.6rem; }
.nav-demo, .nav-cta{ padding-left:1rem; padding-right:1rem; font-size:0.82rem; }
}
/* ---- hamburger ---- */
.nav-burger{
display:none; width:40px; height:40px; flex-shrink:0; padding:0;
align-items:center; justify-content:center;
background:rgba(7,9,15,0.4); border:1px solid rgba(255,255,255,0.18); border-radius:3px;
color:var(--ink); cursor:pointer;
transition:border-color .3s, background .3s;
}
.nav-burger:hover{ border-color:var(--cyan); }
.burger-bars{ position:relative; display:block; width:17px; height:12px; }
.burger-bars i{
position:absolute; left:0; width:100%; height:1.5px; border-radius:2px; background:currentColor;
transition:transform .4s var(--ease-lux), opacity .2s ease, top .3s var(--ease-lux);
}
.burger-bars i:nth-child(1){ top:0; }
.burger-bars i:nth-child(2){ top:5.25px; }
.burger-bars i:nth-child(3){ top:10.5px; }
.nav-burger[aria-expanded="true"] .burger-bars i:nth-child(1){ top:5.25px; transform:rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-bars i:nth-child(2){ opacity:0; transform:scaleX(0.2); }
.nav-burger[aria-expanded="true"] .burger-bars i:nth-child(3){ top:5.25px; transform:rotate(-45deg); }
@media (max-width:860px){
/* the desktop row is replaced by the drawer; School login moves inside it */
.nav-links{ display:none; }
.nav-actions .nav-cta{ display:none; }
.nav-burger{ display:inline-flex; }
}
@media (max-width:600px){
.nav{ padding:1.1rem 4vw; }
.nav-actions{ gap:0.5rem; }
.nav-demo{ font-size:0.74rem; padding:0.5rem 0.7rem; gap:0.38rem; }
.nav-demo svg{ width:13px; height:13px; }
}
/* while the drawer is open the bar keeps only its floating controls */
html.menu-open{ overflow:hidden; }
html.menu-open .nav{ z-index:85; background:none; backdrop-filter:none; }
/* ---- mobile drawer ---- */
.menu-scrim{
position:fixed; inset:0; z-index:70;
background:rgba(4,6,11,0.74); backdrop-filter:blur(3px);
opacity:0; visibility:hidden;
transition:opacity .35s ease, visibility 0s linear .35s;
}
.menu-scrim.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s; }
.mobile-menu{
position:fixed; top:0; right:0; bottom:0; z-index:80;
width:min(23rem, 88vw); display:flex; flex-direction:column;
padding:5.6rem 1.7rem 2.4rem;
background:linear-gradient(205deg, #111726 0%, #080b13 62%);
border-left:1px solid var(--line);
box-shadow:-30px 0 70px -20px rgba(0,0,0,0.9);
overflow-y:auto; overscroll-behavior:contain;
transform:translateX(102%); visibility:hidden;
transition:transform .5s var(--ease-lux), visibility 0s linear .5s;
}
.mobile-menu.is-open{
transform:translateX(0); visibility:visible;
transition:transform .5s var(--ease-lux), visibility 0s;
}
.mm-head{
font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
color:var(--gold); margin-bottom:0.9rem;
}
.mm-item{
border-top:1px solid var(--line);
opacity:0; transform:translateX(20px);
transition:opacity .4s ease, transform .5s var(--ease-lux);
}
.mobile-menu.is-open .mm-item{ opacity:1; transform:translateX(0); transition-delay:calc(var(--i, 0) * 45ms + 90ms); }
.mm-link, .mm-acc-btn{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
width:100%; padding:1.05rem 0; text-align:left;
background:none; border:none; cursor:pointer;
font-family:'Fraunces', serif; font-weight:500; font-size:1.3rem; letter-spacing:-0.01em;
color:var(--ink); text-decoration:none; transition:color .3s;
}
.mm-link:hover, .mm-acc-btn:hover{ color:var(--cyan); }
.mm-link[aria-current="page"], .mm-acc-btn[aria-current="page"]{ color:var(--gold); }
.mm-acc-btn .nav-caret{ width:8px; height:8px; }
.mm-acc-btn[aria-expanded="true"] .nav-caret{ transform:translateY(1px) rotate(225deg); }
/* grid-row trick: animates open to the panel's natural height */
.mm-acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-lux); }
.mm-acc-btn[aria-expanded="true"] + .mm-acc-panel{ grid-template-rows:1fr; }
.mm-acc-inner{ overflow:hidden; }
.mm-sub{
display:block; padding:0.72rem 0 0.72rem 0.9rem; text-decoration:none;
border-left:1px solid var(--line); margin-bottom:0.15rem;
transition:border-color .3s;
}
.mm-sub:last-child{ margin-bottom:1rem; }
.mm-sub:hover, .mm-sub:focus-visible{ border-color:var(--cyan); outline:none; }
.mm-sub-label{ display:block; font-size:0.98rem; color:var(--ink); }
.mm-sub-desc{ display:block; margin-top:0.2rem; font-size:0.8rem; color:var(--ink-dim); }
.mm-foot{
margin-top:auto; padding-top:2rem;
opacity:0; transform:translateX(20px);
transition:opacity .4s ease .34s, transform .5s var(--ease-lux) .34s;
}
.mobile-menu.is-open .mm-foot{ opacity:1; transform:translateX(0); }
.mm-foot .nav-cta{ display:block; text-align:center; }
.mm-foot-note{ margin-top:1.2rem; font-size:0.78rem; color:var(--ink-dim); }
.mm-foot-note a{ color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line); }
.mm-foot-note a:hover{ color:var(--cyan); }
@media (prefers-reduced-motion: reduce){
.mobile-menu, .menu-scrim, .mm-item, .mm-foot, .mm-acc-panel, .burger-bars i{ transition:none; }
.mm-item, .mm-foot{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
.nav-panel, .nav-panel-item, .nav-caret{ transition:opacity .01s linear; transform:none; }
.nav-panel{ transform:translateX(-50%); }
.nav-drop.is-open .nav-panel{ transform:translateX(-50%); }
.nav-demo::after{ animation:none; opacity:0; }
}
/* ================= HERO ================= */
.hero{
position:relative; min-height:100vh; display:flex; flex-direction:column;
justify-content:center; align-items:center;
background:
radial-gradient(ellipse 80% 55% at 50% 10%, rgba(28,42,74,0.5), transparent 60%),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 65%);
padding:10vh 6vw 8vh;
}
#particles{ position:absolute; inset:0; z-index:0; opacity:0.5; }
.content-wrap{
position:relative; z-index:3; display:grid;
grid-template-columns:1.05fr 0.95fr; align-items:center; gap:3rem;
max-width:1280px; width:100%;
}
.text-col{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.kicker{ font-size:0.85rem; color:var(--gold); margin-bottom:1.9rem; display:flex; align-items:center; gap:0.6rem; }
.kicker::before{ content:''; width:22px; height:1px; background:var(--gold); opacity:0.7; }
h1.headline{ font-size:clamp(2.4rem, 4.4vw, 4rem); line-height:1.12; max-width:18ch; }
h1.headline em{ font-style:italic; font-weight:300; color:#c7d0e0; }
/* ---- the three C-words trade places under the headline ---- */
.cword-rig{
display:inline-grid; vertical-align:baseline; perspective:600px;
/* every word occupies the same cell, so the rig is as wide as the longest */
}
.cword{
grid-area:1 / 1; white-space:nowrap; font-style:italic; font-weight:300;
background:linear-gradient(100deg, var(--cyan) 0%, #bfe9ff 38%, var(--gold) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
opacity:0; filter:blur(7px);
transform:translateY(0.42em) rotateX(-58deg);
transform-origin:50% 0;
transition:opacity .5s ease, filter .5s ease, transform .68s var(--ease-lux);
}
.cword.is-out{
opacity:0; filter:blur(7px);
transform:translateY(-0.42em) rotateX(58deg);
transform-origin:50% 100%;
}
.cword.is-in{
opacity:1; filter:blur(0);
transform:translateY(0) rotateX(0);
}
/* a thin rule under the live word, drawn left to right as it lands */
.cword-rule{
grid-area:2 / 1; height:1px; margin-top:0.12em;
background:linear-gradient(90deg, var(--cyan), var(--gold));
transform:scaleX(0); transform-origin:left center; opacity:0.55;
transition:transform .8s var(--ease-lux);
}
.cword-rig.is-live .cword-rule{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
.cword{ transition:opacity .2s linear; transform:none !important; filter:none; }
.cword-rule{ transition:none; transform:scaleX(1); }
}
.sub{ margin-top:2.4rem; font-size:1.06rem; line-height:1.68; color:var(--ink-dim); max-width:42ch; }
.cta-row{ margin-top:3.6rem; display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; }
.btn-primary{
display:inline-block; text-align:center; text-decoration:none;
padding:0.95rem 2.1rem; font-size:0.95rem; font-weight:500; color:var(--bg-0);
background:var(--cyan); border:none; border-radius:2px; cursor:pointer;
box-shadow:0 0 0 0 var(--cyan-dim); transition:box-shadow .4s ease, transform .25s ease;
}
.btn-primary:hover{ box-shadow:0 0 32px 4px var(--cyan-dim); transform:translateY(-1px); }
.btn-ghost{
display:flex; align-items:center; gap:0.7rem; background:none; border:none; color:var(--ink);
font-size:0.95rem; font-family:'Space Grotesk', sans-serif; cursor:pointer; padding:0.5rem 0;
border-bottom:1px solid rgba(255,255,255,0.15); transition:border-color .3s;
}
.btn-ghost:hover{ border-color:var(--ink); }
a.btn-ghost{ text-decoration:none; }
.btn-arrow{ transition:transform .3s var(--ease-lux); }
a.btn-ghost:hover .btn-arrow{ transform:translateX(4px); }
.play-ico{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.play-ico svg{ width:8px; height:8px; margin-left:2px; }
/* ---- board ---- */
.board-col{ position:relative; display:flex; justify-content:center; align-items:center; perspective:1500px; min-height:520px; }
.board-rig{
position:relative; width:100%; max-width:480px; transform-style:preserve-3d;
transform:rotateX(52deg) rotateZ(38deg); transition:transform 0.15s ease-out;
}
.hero.is-offscreen .piece,
.hero.is-offscreen .piece-shadow,
.hero.is-offscreen .sq.glow::after{ animation-play-state:paused; }
.board{
display:grid; grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 1fr);
width:100%; aspect-ratio:1/1; border-radius:4px; overflow:hidden;
box-shadow:0 0 50px 8px rgba(201,166,107,0.10), 0 40px 90px -20px rgba(0,0,0,0.85);
border:6px solid #1c130c;
}
.sq{ position:relative; }
.sq.dark{
background-image:
linear-gradient(145deg,#171009,#0a0705),
url("data:image/svg+xml;utf8,");
background-size:cover, 90px 90px;
background-blend-mode:normal, overlay;
}
.sq.light{
background-image:
linear-gradient(145deg,var(--wood-light-2),var(--wood-light)),
url("data:image/svg+xml;utf8,");
background-size:cover, 90px 90px;
background-blend-mode:normal, overlay;
}
.sq.glow::after{
content:''; position:absolute; inset:0; box-shadow:inset 0 0 12px 1px rgba(201,166,107,0.6);
animation:pulseGlow 3.6s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ opacity:0.3; } 50%{ opacity:0.85; } }
.board-base{
position:absolute; left:50%; top:50%; width:114%; aspect-ratio:1/1;
transform:translate(-50%,-50%) translateZ(-26px);
background:radial-gradient(ellipse at center, rgba(30,20,12,0.9), rgba(7,10,18,0) 70%);
filter:blur(2px);
}
.pieces-layer{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.piece{
position:absolute; width:24%; transform-style:preserve-3d;
}
.piece.king{ width:20%; animation:kingMove 9s ease-in-out infinite; }
.piece.knight{ width:27%; animation:knightMove 9s ease-in-out infinite; }
.piece.pawn{ width:14%; animation:pawnMove 6s ease-in-out infinite; }
/* contact shadows — sit on the board plane, breathe opposite to each piece's lift height */
.piece-shadow{
position:absolute; aspect-ratio:1/0.32; border-radius:50%;
background:radial-gradient(ellipse at center, rgba(0,0,0,0.6), rgba(0,0,0,0) 72%);
transform-style:preserve-3d;
}
.shadow-knight{ width:22%; animation:knightShadow 9s ease-in-out infinite; }
.shadow-king{ width:16%; animation:kingShadow 9s ease-in-out infinite; }
.shadow-pawn{ width:11%; animation:pawnShadow 6s ease-in-out infinite; }
@keyframes knightMove{
0%, 32% { left:15%; top:64%; transform:translateZ(120px) rotateZ(-38deg) rotateX(-52deg) rotateY(-10deg) scale(1); filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
40% { left:22%; top:47%; transform:translateZ(200px) rotateZ(-26deg) rotateX(-52deg) rotateY(4deg) scale(1.08); filter:drop-shadow(0 0 26px rgba(79,216,255,0.7)); }
50%, 82% { left:32%; top:38%; transform:translateZ(120px) rotateZ(-38deg) rotateX(-52deg) rotateY(-14deg) scale(1); filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
90% { left:24%; top:52%; transform:translateZ(200px) rotateZ(-30deg) rotateX(-52deg) rotateY(-4deg) scale(1.08); filter:drop-shadow(0 0 26px rgba(79,216,255,0.7)); }
100% { left:15%; top:64%; transform:translateZ(120px) rotateZ(-38deg) rotateX(-52deg) rotateY(-10deg) scale(1); filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
}
@keyframes knightShadow{
0%, 32% { left:19%; top:76%; opacity:0.6; transform:scale(1); }
40% { left:26%; top:60%; opacity:0.22; transform:scale(1.5); }
50%, 82% { left:36%; top:50%; opacity:0.6; transform:scale(1); }
90% { left:28%; top:64%; opacity:0.22; transform:scale(1.5); }
100% { left:19%; top:76%; opacity:0.6; transform:scale(1); }
}
@keyframes kingMove{
0%, 40% { left:60%; top:16%; transform:translateZ(95px) rotateZ(-38deg) rotateX(-52deg); filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
50% { left:60%; top:16%; transform:translateZ(140px) rotateZ(-38deg) rotateX(-52deg) scale(1.04); filter:drop-shadow(0 0 24px rgba(79,216,255,0.7)); }
60%, 92% { left:60%; top:29%; transform:translateZ(95px) rotateZ(-38deg) rotateX(-52deg); filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
100% { left:60%; top:16%; transform:translateZ(95px) rotateZ(-38deg) rotateX(-52deg); filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
}
@keyframes kingShadow{
0%, 40% { left:63%; top:26%; opacity:0.55; transform:scale(1); }
50% { left:63%; top:26%; opacity:0.3; transform:scale(1.3); }
60%, 92% { left:63%; top:39%; opacity:0.55; transform:scale(1); }
100% { left:63%; top:26%; opacity:0.55; transform:scale(1); }
}
@keyframes pawnMove{
0%, 20% { left:44%; top:70%; transform:translateZ(70px) rotateZ(-38deg) rotateX(-52deg); filter:drop-shadow(0 0 14px rgba(201,166,107,0.5)); }
30% { left:44%; top:70%; transform:translateZ(110px) rotateZ(-38deg) rotateX(-52deg) scale(1.05); filter:drop-shadow(0 0 20px rgba(79,216,255,0.65)); }
40%,100%{ left:44%; top:58%; transform:translateZ(70px) rotateZ(-38deg) rotateX(-52deg); filter:drop-shadow(0 0 14px rgba(201,166,107,0.5)); }
}
@keyframes pawnShadow{
0%, 20% { left:46%; top:78%; opacity:0.55; transform:scale(1); }
30% { left:46%; top:78%; opacity:0.3; transform:scale(1.25); }
40%,100%{ left:46%; top:66%; opacity:0.55; transform:scale(1); }
}
@media (max-width:900px){
.content-wrap{ grid-template-columns:1fr; text-align:center; }
.text-col{ align-items:center; text-align:center; }
.cta-row{ justify-content:center; }
.board-col{ order:-1; min-height:360px; margin-bottom:1rem; }
.board-rig{ transform:rotateX(46deg) rotateZ(38deg) scale(0.9); max-width:320px; }
h1.headline{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
.piece, .sq.glow::after, .piece-shadow{ animation:none !important; }
.piece{ filter:drop-shadow(0 0 16px rgba(201,166,107,0.55)); }
.board-rig{ transition:none; }
}
.scroll-cue{
position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:4;
display:flex; flex-direction:column; align-items:center; gap:0.6rem; color:var(--ink-dim);
font-size:0.72rem; letter-spacing:0.06em;
}
.scroll-line{ width:1px; height:34px; background:linear-gradient(180deg, var(--ink-dim), transparent); animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0.3); transform-origin:top; opacity:0.4; } 50%{ transform:scaleY(1); transform-origin:top; opacity:1; } 100%{ transform:scaleY(0.3); transform-origin:bottom; opacity:0.4; } }
/* ================= SECTION SHELL ================= */
section.block{ position:relative; padding:9rem 0; border-top:1px solid var(--line); }
.eyebrow{ font-size:0.85rem; color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:0.6rem; }
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold); opacity:0.7; }
.block-head{ max-width:640px; margin-bottom:4.5rem; }
.block-head h2{ font-size:clamp(1.9rem, 3vw, 2.7rem); line-height:1.15; }
.block-head p{ margin-top:1.1rem; color:var(--ink-dim); font-size:1.02rem; line-height:1.65; max-width:52ch; }
/* ================= THE NEXUS METHOD ================= */
.method{
--m-bg:#0C0D10;
--m-card:#141519;
--m-ink:#F3EDE2;
--m-body:#B5B1A9;
--m-gold:#C6A46A;
--m-rule:rgba(198,164,106,0.20);
--m-rule-soft:rgba(198,164,106,0.10);
--m-ease:cubic-bezier(0.22, 1, 0.36, 1);
position:relative;
background:var(--m-bg);
overflow:hidden;
}
/* barely-there chessboard + a restrained warm glow behind the journey */
.method-bg{
position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:
radial-gradient(ellipse 62% 48% at 50% 62%, rgba(198,164,106,0.075), transparent 68%),
url("data:image/svg+xml;utf8,");
background-size:auto, 128px 128px;
}
.method > .wrap{ position:relative; z-index:1; }
/* ---- editorial header ---- */
.method-eyebrow{
display:flex; align-items:center; gap:0.7rem;
font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
color:var(--m-gold); margin-bottom:1.6rem;
opacity:0; transition:opacity .6s ease .18s;
}
.method-head.is-in .method-eyebrow{ opacity:1; }
.method-eyebrow::before{
content:''; width:26px; height:1px; background:var(--m-gold); opacity:0.75;
transform:scaleX(0); transform-origin:left center;
transition:transform .75s var(--m-ease);
}
.method-head.is-in .method-eyebrow::before{ transform:scaleX(1); }
.method-head{
position:relative;
display:grid; grid-template-columns:1.35fr 1fr; gap:4rem; align-items:end;
padding-bottom:4.5rem;
}
.method-head::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
background:linear-gradient(90deg, var(--m-rule), var(--m-rule-soft) 72%, transparent);
transform:scaleX(0); transform-origin:left center;
transition:transform 1.4s var(--m-ease) .55s;
}
.method-head.is-in::after{ transform:scaleX(1); }
.method-head h2{
font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.018em;
font-size:clamp(2rem, 3.9vw, 3.3rem); line-height:1.1; color:var(--m-ink); margin:0;
}
/* the mask is the line box itself; the padding keeps descenders off the clip */
.method-head h2 .mh-line{
display:block; overflow:hidden;
padding-bottom:0.28em; margin-bottom:-0.28em;
}
.method-head h2 .mh-in{
display:block; transform:translateY(112%);
transition:transform 1s var(--m-ease);
}
.method-head.is-in h2 .mh-in{ transform:translateY(0); }
.method-head.is-in h2 .mh-line:nth-child(2) .mh-in{ transition-delay:.13s; }
/* the accent phrase: gold that a highlight sweeps across as it lands */
.mh-em{ position:relative; display:inline-block; }
.method-head h2 em{
font-style:normal; color:var(--m-gold);
background:linear-gradient(100deg, var(--m-gold) 0%, #f7e7c4 42%, var(--m-gold) 74%);
background-size:240% 100%; background-position:135% 0;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
transition:background-position 1.7s var(--m-ease) 1s;
}
.method-head.is-in h2 em{ background-position:0 0; }
/* underline drawn on the wrapper, so the clipped text above is untouched */
.mh-em::after{
content:''; position:absolute; left:0; right:0; bottom:-0.09em; height:2px; border-radius:2px;
background:linear-gradient(90deg, var(--m-gold), rgba(198,164,106,0.12));
transform:scaleX(0); transform-origin:left center;
transition:transform 1s var(--m-ease) .95s;
}
.method-head.is-in .mh-em::after{ transform:scaleX(1); }
.method-lede{
font-size:1rem; line-height:1.75; color:var(--m-body); max-width:38ch; margin:0;
opacity:0; transform:translateY(14px);
transition:opacity .75s ease .6s, transform .85s var(--m-ease) .6s;
}
.method-head.is-in .method-lede{ opacity:1; transform:translateY(0); }
/* ---- journey ---- */
.journey{ position:relative; margin-top:4.5rem; }
/* desktop rail: one gold line drawn through four milestones */
.rail{ position:relative; height:34px; margin-bottom:-1px; }
.rail-line{
position:absolute; top:50%; left:12.5%; right:12.5%; height:1px;
background:linear-gradient(90deg, transparent, var(--m-gold) 12%, var(--m-gold) 88%, transparent);
opacity:0.5; transform:scaleX(0); transform-origin:left center;
transition:transform 1.25s var(--m-ease);
}
.journey.is-in .rail-line{ transform:scaleX(1); }
.rail-dot{
position:absolute; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
border-radius:50%; background:var(--m-bg); border:1px solid var(--m-gold);
opacity:0; transition:opacity .4s ease, box-shadow .4s ease;
}
.journey.is-in .rail-dot{ opacity:1; }
.rail-dot:nth-child(2){ left:12.5%; transition-delay:.20s; }
.rail-dot:nth-child(3){ left:37.5%; transition-delay:.48s; }
.rail-dot:nth-child(4){ left:62.5%; transition-delay:.76s; }
.rail-dot:nth-child(5){ left:87.5%; transition-delay:1.04s; }
.milestones{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem;
}
.milestone{
opacity:0; transform:translateY(12px);
transition:opacity .5s ease, transform .5s var(--m-ease);
}
.milestone.is-in{ opacity:1; transform:translateY(0); }
.ms-inner{
position:relative; height:100%;
display:flex; flex-direction:column;
padding:2.2rem 1.9rem 1.9rem;
background:var(--m-card);
border:1px solid var(--m-rule-soft);
border-radius:3px;
transition:transform .3s var(--m-ease), border-color .3s ease, box-shadow .3s ease;
}
/* a single gold hairline along the top edge, brightening on interaction */
.ms-inner::before{
content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, var(--m-rule), transparent);
transition:background .3s ease;
}
.milestone:hover .ms-inner,
.milestone:focus-within .ms-inner{
transform:translateY(-4px);
border-color:rgba(198,164,106,0.42);
box-shadow:0 22px 44px -28px rgba(0,0,0,0.9);
}
.milestone:hover .ms-inner::before,
.milestone:focus-within .ms-inner::before{
background:linear-gradient(90deg, transparent, var(--m-gold), transparent);
}
/* Soft, friendly line work: thick rounded strokes, no sharp corners. The
academy teaches children, so the motifs read warm rather than austere. */
.ms-art{ height:56px; margin-bottom:1.5rem; }
.ms-art svg{ height:56px; width:auto; overflow:visible; }
.ms-art .ivory, .ms-art .gold{
fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.4;
transition:opacity .3s ease;
}
.ms-art .ivory{ stroke:var(--m-ink); opacity:0.55; }
.ms-art .gold{ stroke:var(--m-gold); opacity:0.9; }
.ms-art .gold-fill{ fill:var(--m-gold); stroke:none; opacity:0.85; transition:opacity .3s ease; }
/* organic shapes (a hand) read far better filled than stroked at this size */
.ms-art .ivory-fill{ fill:var(--m-ink); stroke:none; opacity:0.55; transition:opacity .3s ease; }
.milestone:hover .ms-art .ivory-fill,
.milestone:focus-within .ms-art .ivory-fill{ opacity:0.8; }
.ms-art .wash{ fill:var(--m-gold); stroke:none; opacity:0.14; }
.milestone:hover .ms-art .ivory,
.milestone:focus-within .ms-art .ivory{ opacity:0.8; }
.milestone:hover .ms-art .gold,
.milestone:hover .ms-art .gold-fill,
.milestone:focus-within .ms-art .gold,
.milestone:focus-within .ms-art .gold-fill{ opacity:1; }
/* ---- gentle idle motion, only once the panel has revealed ---- */
.ms-art [class*="anim-"]{ animation-play-state:paused; transform-box:fill-box; }
.milestone.is-in .ms-art [class*="anim-"]{ animation-play-state:running; }
/* 01 — the piece hops softly around its square */
.anim-hop{ transform-origin:center; animation:artHop 3.2s ease-in-out infinite; }
@keyframes artHop{
0%, 62%, 100%{ transform:translateY(0) scale(1); }
72%{ transform:translateY(-5px) scale(1.06); }
84%{ transform:translateY(0) scale(0.97); }
92%{ transform:translateY(0) scale(1); }
}
/* 02 — the three steps climb in sequence */
.anim-step{ transform-origin:center bottom; animation:artStep 3.4s ease-in-out infinite; }
.anim-step-2{ animation-delay:.28s; }
.anim-step-3{ animation-delay:.56s; }
@keyframes artStep{
0%, 55%, 100%{ transform:translateY(0); }
68%{ transform:translateY(-4px); }
82%{ transform:translateY(0); }
}
/* 03 — the coach raises a hand and waves hello */
.anim-wave{ transform-origin:0% 100%; animation:artWave 3.4s ease-in-out infinite; }
@keyframes artWave{
0%, 58%, 100%{ transform:rotate(0deg); }
66%{ transform:rotate(-16deg); }
74%{ transform:rotate(6deg); }
82%{ transform:rotate(-12deg); }
90%{ transform:rotate(0deg); }
}
.anim-nod{ transform-origin:center bottom; animation:artNod 3.4s ease-in-out infinite; }
@keyframes artNod{
0%, 60%, 100%{ transform:translateY(0); }
70%{ transform:translateY(-1.5px); }
82%{ transform:translateY(0); }
}
/* 04 — a hand lowers the pawn onto the square, lifts away, repeats */
.anim-play{ animation:artPlay 4.2s ease-in-out infinite; }
@keyframes artPlay{
0%, 8%{ transform:translateY(-12px); }
36%, 64%{ transform:translateY(0); }
90%, 100%{ transform:translateY(-12px); }
}
/* the square lights up while the pawn is standing on it */
.anim-land{ animation:artLand 4.2s ease-in-out infinite; }
@keyframes artLand{
0%, 26%{ opacity:0.10; }
40%, 62%{ opacity:0.38; }
80%, 100%{ opacity:0.10; }
}
/* hover / focus gives the motif a little extra lift */
.milestone:hover .ms-art svg,
.milestone:focus-within .ms-art svg{ transform:scale(1.06); }
.ms-art svg{ transition:transform .35s var(--m-ease); transform-origin:left center; }
.ms-num{
font-family:'Fraunces', serif; font-weight:400; font-size:1.05rem;
letter-spacing:0.06em; color:var(--m-gold); opacity:0.75;
}
.ms-title{
font-family:'Fraunces', serif; font-weight:500; font-size:1.22rem; line-height:1.25;
letter-spacing:-0.01em; color:var(--m-ink); margin:0.85rem 0 0;
}
.ms-copy{
font-size:0.9rem; line-height:1.65; color:var(--m-body); margin:0.85rem 0 1.8rem;
}
.ms-label{
margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--m-rule-soft);
font-size:0.65rem; letter-spacing:0.19em; text-transform:uppercase; color:var(--m-gold);
opacity:0.72; transition:opacity .3s ease;
}
.milestone:hover .ms-label, .milestone:focus-within .ms-label{ opacity:1; }
/* keyboard focus */
.ms-inner:focus-visible{ outline:2px solid var(--m-gold); outline-offset:4px; }
/* ---- closing CTA ---- */
.method-cta{
margin-top:4.5rem; padding-top:3.2rem; border-top:1px solid var(--m-rule-soft);
display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
}
.mc-lead{
font-family:'Fraunces', serif; font-size:clamp(1.25rem, 2vw, 1.6rem);
line-height:1.3; color:var(--m-ink); margin:0; flex:1 1 auto; max-width:22ch;
}
.mc-right{ display:flex; flex-direction:column; align-items:flex-start; gap:0.7rem; }
.mc-btn{
display:inline-flex; align-items:center; gap:0.7rem;
padding:0.95rem 2rem; border-radius:2px; text-decoration:none;
background:var(--m-gold); color:#141110; font-size:0.92rem; font-weight:500;
box-shadow:0 0 0 0 rgba(198,164,106,0);
transition:box-shadow .35s ease, transform .3s var(--m-ease);
}
.mc-btn:hover, .mc-btn:focus-visible{
transform:translateY(-2px);
box-shadow:0 14px 34px -12px rgba(198,164,106,0.6);
}
.mc-btn:focus-visible{ outline:2px solid var(--m-ink); outline-offset:3px; }
.mc-sub{ font-size:0.84rem; color:var(--m-body); margin:0; }
/* ---- tablet: balanced 2 x 2 ---- */
@media (max-width:1000px){
.method-head{ grid-template-columns:1fr; gap:1.8rem; align-items:start; }
.method-lede{ max-width:52ch; }
.milestones{ grid-template-columns:repeat(2, 1fr); gap:1.2rem; }
/* the horizontal rail no longer maps to the grid — each panel carries its own marker */
.rail{ display:none; }
.ms-inner::after{
content:''; position:absolute; top:-4.5px; left:1.9rem;
width:9px; height:9px; border-radius:50%;
background:var(--m-bg); border:1px solid var(--m-gold);
}
}
/* ---- mobile: vertical timeline ---- */
@media (max-width:640px){
.method-head{ padding-bottom:3rem; }
.journey{ margin-top:3rem; }
.milestones{
grid-template-columns:1fr; gap:0;
padding-left:1.9rem; border-left:1px solid var(--m-rule);
}
.milestone{ padding-bottom:1.4rem; }
.milestone:last-child{ padding-bottom:0; }
.ms-inner{ padding:1.8rem 1.5rem 1.5rem; }
.ms-inner::after{
/* gold milestone sitting on the timeline */
top:2.3rem; left:calc(-1.9rem - 5px);
width:11px; height:11px;
}
.ms-art{ height:44px; margin-bottom:1.2rem; }
.ms-art svg{ height:44px; }
.method-cta{ margin-top:3rem; padding-top:2.4rem; flex-direction:column; align-items:stretch; gap:1.2rem; }
.mc-lead{ max-width:none; }
.mc-right{ align-items:stretch; }
.mc-btn{ justify-content:center; width:100%; }
.mc-sub{ text-align:center; }
}
/* ---- reduced motion: static presentation ---- */
@media (prefers-reduced-motion: reduce){
.milestone{ opacity:1; transform:none; transition:none; }
.method-eyebrow, .method-lede{ opacity:1; transform:none; transition:none; }
.method-eyebrow::before, .method-head::after, .mh-em::after{ transform:scaleX(1); transition:none; }
.method-head h2 .mh-in{ transform:none; transition:none; }
.method-head h2 em{ background-position:0 0; transition:none; }
.rail-line{ transform:scaleX(1); transition:none; }
.rail-dot{ opacity:1; transition:none; }
.ms-inner, .ms-art .gold, .ms-art .ivory, .ms-art svg, .mc-btn{ transition:none; }
.milestone:hover .ms-inner, .milestone:focus-within .ms-inner,
.mc-btn:hover, .mc-btn:focus-visible{ transform:none; }
/* motifs hold still */
.ms-art [class*="anim-"]{ animation:none !important; transform:none !important; }
.milestone:hover .ms-art svg, .milestone:focus-within .ms-art svg{ transform:none; }
}
/* ================= PRICING ================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.price-card{ border:1px solid var(--line); border-radius:4px; padding:2.4rem; display:flex; flex-direction:column; }
.price-card.is-highlight{ border-color:rgba(201,166,107,0.5); background:linear-gradient(180deg, rgba(201,166,107,0.06), transparent 60%); }
.price-card .path-num{ font-family:'Fraunces', serif; font-size:0.9rem; color:var(--gold); }
.price-card h3{ margin-top:1.1rem; font-size:1.35rem; }
.price-figure{ margin-top:1rem; font-family:'Fraunces', serif; font-size:1.6rem; color:var(--ink); }
.price-figure span{ font-size:0.85rem; color:var(--ink-dim); font-family:'Space Grotesk', sans-serif; margin-left:0.4rem; }
.price-card ul{ list-style:none; margin-top:1.6rem; flex-grow:1; }
.price-card li{ font-size:0.9rem; color:var(--ink-dim); padding:0.55rem 0; border-top:1px solid var(--line); }
.price-card li:first-child{ border-top:none; }
.price-card .btn-ghost{ margin-top:1.8rem; align-self:flex-start; }
@media (max-width:860px){ .pricing-grid{ grid-template-columns:1fr; } }
/* ================= MEET THE COACHES =================
Three tilted cards on a shared perspective. Hovering the row straightens
all of them and lifts the one under the pointer; inside each card the
coach photographs rotate on a slow dwell. Opening a card raises a profile
dialog that can be paged through without closing.
The source design was light-on-paper; the palette here is the site's own,
so the fixed nav still reads over it. */
.roster{ position:relative; }
.roster::before{
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201,166,107,0.06), transparent 65%);
}
.roster .wrap{ position:relative; z-index:1; }
/* ---- heading ---- */
.rs-intro{ padding:0 0 2.6rem; }
.rs-eyebrow{
display:flex; align-items:center; gap:0.75rem; margin:0;
font-size:0.72rem; font-weight:600; letter-spacing:0.16em;
text-transform:uppercase; color:var(--ink-dim);
}
.rs-checker{
width:14px; height:14px; flex-shrink:0;
background:conic-gradient(var(--gold) 25%, transparent 0 50%, var(--gold) 0 75%, transparent 0);
background-size:7px 7px;
}
.rs-head-row{
display:flex; align-items:flex-end; justify-content:space-between;
gap:3rem; margin-top:1.7rem;
}
.rs-head-row h2{
margin:0; font-size:clamp(2.3rem, 5.4vw, 4.4rem);
line-height:1.04; letter-spacing:-0.035em; max-width:14ch;
}
.rs-head-row h2 em{ position:relative; z-index:0; font-style:italic; font-weight:400; }
.rs-head-row h2 em::after{
content:''; position:absolute; z-index:-1;
left:1%; right:-2%; bottom:0.08em; height:0.14em;
background:var(--gold); opacity:0.75;
transform:rotate(-2deg); transform-origin:left center;
scale:0 1; transition:scale .8s var(--ease-lux);
}
.roster.is-in .rs-head-row h2 em::after{ scale:1 1; }
.rs-aside{ max-width:20rem; flex-shrink:0; }
.rs-sticker{
display:flex; align-items:center; justify-content:center; gap:0.5rem;
width:142px; min-height:76px; margin:0 0 1.6rem auto;
border:1px solid rgba(201,166,107,0.35); border-radius:50%;
background:rgba(201,166,107,0.12); color:var(--gold);
transform:rotate(10deg);
}
.rs-sticker b{ font-family:'Fraunces',serif; font-size:1.7rem; font-weight:400; }
.rs-sticker span{ font-size:0.72rem; font-weight:600; line-height:1.3; }
.rs-aside p{ margin:0; color:var(--ink-dim); font-size:0.95rem; line-height:1.75; }
.rs-label{
display:flex; justify-content:space-between; gap:1.2rem;
padding:1.3rem 0 1.9rem; border-top:1px solid var(--line);
color:var(--ink-dim); font-size:0.72rem; letter-spacing:0.14em;
text-transform:uppercase;
}
/* ---- the row of cards ---- */
.rs-grid{
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
gap:1.9rem; padding:4px; perspective:1400px;
}
.rs-card{
--rot:-1.7deg;
--accent:var(--gold);
min-width:0;
opacity:0; translate:0 25px;
transform:rotate(var(--rot));
transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .8s ease, translate .8s var(--ease-lux);
}
.roster.is-in .rs-card{ opacity:1; translate:0 0; }
.roster.is-in .rs-card:nth-child(3n+2){ transition-delay:0s, .1s, .1s; }
.roster.is-in .rs-card:nth-child(3n+3){ transition-delay:0s, .2s, .2s; }
/* the tilt and accent repeat every three, so a fourth coach added to the
array continues the pattern instead of restarting it */
.rs-card:nth-child(3n+2){ --rot:1.7deg; --accent:#4fd8ff; margin-top:20px; }
.rs-card:nth-child(3n+3){ --rot:-1deg; --accent:#e6ed93; }
.rs-visual{
position:relative; aspect-ratio:0.77; isolation:isolate;
overflow:hidden; border-radius:16px; background:#0b0f18;
box-shadow:0 22px 44px -18px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.05);
}
/* the photographs, stacked; one is live at a time */
.rs-art{ position:absolute; inset:0; }
.rs-art img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:50% 32%;
opacity:0; transform:scale(1.04);
transition:opacity .9s ease, transform 1.4s var(--ease-lux);
}
.rs-art img.is-live{ opacity:1; transform:scale(1); }
.rs-visual::after{
content:''; position:absolute; z-index:1; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(6,9,9,0.34), transparent 30%, transparent 46%, rgba(6,9,13,0.93));
}
.rs-top{
position:absolute; z-index:2; top:1.4rem; right:1.4rem; left:1.4rem;
display:flex; justify-content:space-between; align-items:center; gap:0.75rem;
color:#e8ece5; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
}
.rs-num{
color:var(--accent); font-family:'Fraunces',serif;
font-size:1.3rem; font-style:italic; white-space:nowrap; text-transform:none;
}
/* which photograph of the set is showing */
.rs-ticks{
position:absolute; z-index:2; top:38%; right:12px;
display:flex; flex-direction:column; gap:6px;
}
.rs-ticks i{
display:block; width:3px; height:12px; border-radius:2px;
background:rgba(255,255,255,0.4); transition:background .4s ease, height .4s ease;
/* the photographs behind these are often bright, so they carry their own
shadow rather than relying on the picture for contrast */
box-shadow:0 0 0 1px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.6);
}
.rs-ticks i.is-live{ background:var(--accent); height:20px; }
.rs-bottom{
position:absolute; z-index:2; right:1.5rem; bottom:1.7rem; left:1.5rem;
display:flex; align-items:flex-end; justify-content:space-between; gap:0.75rem;
color:#fff;
}
.rs-role{
margin:0 0 0.6rem; color:#d0d6ce; font-size:0.68rem; line-height:1.5;
letter-spacing:0.13em; text-transform:uppercase;
}
.rs-name{
margin:0; font-family:'Fraunces',serif; font-weight:500;
font-size:clamp(1.5rem, 2.6vw, 2.3rem); line-height:1.1;
letter-spacing:-0.03em; overflow-wrap:anywhere;
}
.rs-open{
display:grid; place-items:center; width:48px; height:48px; flex-shrink:0;
padding:0; border:0; border-radius:50%; cursor:pointer;
background:var(--accent); color:#0b0f18; font-size:1.7rem; font-weight:300;
line-height:0; transition:transform .25s ease;
}
.rs-open:hover{ transform:rotate(90deg); }
.rs-open:focus-visible{ outline:3px solid var(--cyan); outline-offset:4px; }
.rs-cap{
display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
padding:1.1rem 3px 0; color:var(--ink-dim); font-size:0.8rem;
}
.rs-cap-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-link{
display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0;
border:0; background:transparent; color:var(--ink); cursor:pointer;
font-family:'Space Grotesk',sans-serif; font-size:0.8rem; font-weight:600; white-space:nowrap;
}
.rs-link span{ transition:transform .2s ease; }
.rs-link:hover span{ transform:translate(3px,-3px); }
.rs-note{ margin:2.4rem 0 0; color:var(--ink-dim); font-size:0.82rem; line-height:1.6; text-align:center; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.rs-grid:hover .rs-card{ --rot:0deg; }
.rs-card:hover{ transform:translateY(-8px); }
.rs-card:hover .rs-art img.is-live{ transform:scale(1.06); }
}
/* ---- the profile dialog ---- */
.rs-dialog{
width:min(880px, calc(100% - 2rem)); max-height:90dvh; margin:auto; padding:0;
overflow:auto; border:0; border-radius:18px;
background:var(--panel); color:var(--ink);
box-shadow:0 30px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07);
}
.rs-dialog::backdrop{ background:rgba(6,9,15,0.82); backdrop-filter:blur(7px); }
.rs-dialog[open]{ animation:rsModal .22s ease-out; }
@keyframes rsModal{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.rs-d-layout{ display:grid; grid-template-columns:0.85fr 1fr; }
.rs-d-visual{ position:relative; min-height:540px; overflow:hidden; background:#0b0f18; }
.rs-d-visual img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:50% 32%;
opacity:0; transition:opacity .7s ease;
}
.rs-d-visual img.is-live{ opacity:1; }
.rs-d-visual::after{
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background:linear-gradient(180deg, transparent 55%, rgba(6,9,13,0.9));
}
.rs-d-cap{
position:absolute; z-index:2; right:1rem; bottom:1rem; left:1rem; margin:0;
font-size:0.72rem; line-height:1.5; color:#d7dde6;
}
.rs-d-body{ position:relative; min-width:0; padding:3rem 2.1rem 1.8rem; }
.rs-close{
position:absolute; z-index:3; top:0.8rem; right:0.8rem;
display:grid; place-items:center; width:38px; height:38px;
border:0; border-radius:50%; cursor:pointer; line-height:0;
background:rgba(255,255,255,0.08); color:var(--ink); font-size:1.5rem;
transition:background .25s ease;
}
.rs-close:hover{ background:rgba(255,255,255,0.16); }
.rs-d-role{
margin:0 0 0.9rem; color:var(--cyan); font-size:0.7rem; font-weight:600;
letter-spacing:0.15em; text-transform:uppercase;
}
.rs-dialog h3{
margin:0; font-size:clamp(1.7rem, 3.4vw, 2.3rem); line-height:1.1;
letter-spacing:-0.03em; overflow-wrap:anywhere;
}
.rs-d-bio{ margin:1.1rem 0 1.4rem; color:var(--ink-dim); font-size:0.95rem; line-height:1.75; }
.rs-facts{ margin:0; }
.rs-facts > div{ padding:0.8rem 0; border-bottom:1px solid var(--line); }
.rs-facts dt{ margin-bottom:0.3rem; font-size:0.84rem; font-weight:600; }
.rs-facts dd{ margin:0; color:var(--ink-dim); font-size:0.84rem; line-height:1.6; white-space:pre-line; }
.rs-d-nav{ display:flex; justify-content:space-between; align-items:center; gap:0.75rem; margin-top:1.7rem; }
.rs-d-nav button{
min-height:44px; padding:0.6rem 0.95rem; border:0; border-radius:30px; cursor:pointer;
background:rgba(255,255,255,0.07); color:var(--ink);
font-family:'Space Grotesk',sans-serif; font-size:0.82rem;
transition:background .25s ease;
}
.rs-d-nav button:hover{ background:rgba(255,255,255,0.14); }
.rs-d-count{ color:var(--ink-dim); font-size:0.72rem; letter-spacing:0.14em; }
@media (max-width:1000px){
.rs-head-row{ gap:1.9rem; }
.rs-aside{ max-width:15.5rem; }
.rs-grid{ gap:1.25rem; }
.rs-cap{ flex-direction:column; align-items:flex-start; gap:0; }
.rs-bottom{ right:1.05rem; left:1.05rem; }
.rs-open{ width:40px; height:40px; font-size:1.45rem; }
}
@media (max-width:760px){
.rs-head-row{ display:block; }
.rs-aside{
position:relative; max-width:none; min-height:85px;
margin-top:1.75rem; padding-right:105px;
}
.rs-sticker{
position:absolute; top:0; right:0; width:91px; min-height:73px;
flex-direction:column; gap:0; margin:0;
}
.rs-sticker b{ font-size:1.4rem; }
.rs-sticker span{ text-align:center; }
.rs-label{ letter-spacing:0.05em; }
.rs-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:2rem; }
.rs-card:nth-child(3n+2){ margin-top:0; }
.rs-bottom{ right:1.5rem; left:1.5rem; }
.rs-open{ width:48px; height:48px; font-size:1.7rem; }
.rs-cap{ flex-direction:row; align-items:center; }
.rs-note{ text-align:left; }
.rs-d-layout{ grid-template-columns:1fr; }
.rs-d-visual{ min-height:230px; height:230px; }
.rs-d-body{ padding:2.4rem 1.4rem 1.5rem; }
}
@media (prefers-reduced-motion:reduce){
.rs-card{ opacity:1; translate:0 0; transform:none !important; transition:none; }
.rs-art img{ transition:opacity .4s ease; transform:none !important; }
.rs-head-row h2 em::after{ scale:1 1; transition:none; }
.rs-open:hover{ transform:none; }
.rs-dialog[open]{ animation:none; }
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ================= HONOURS ================= */
.honours{
position:relative;
background:
radial-gradient(ellipse 60% 80% at 12% 50%, rgba(201,166,107,0.07), transparent 60%),
linear-gradient(180deg, rgba(12,10,8,0.6), transparent);
}
.hon-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:5rem; align-items:center; }
.hon-frame{ position:relative; }
.hon-frame::before{
content:''; position:absolute; inset:-14px -14px 22px 22px;
border:1px solid rgba(201,166,107,0.28); border-radius:2px; pointer-events:none;
}
.hon-photo{
position:relative; overflow:hidden; border-radius:2px; aspect-ratio:4/5;
filter:grayscale(1) contrast(1.04);
}
.hon-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hon-photo::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(6,5,4,0) 55%, rgba(6,5,4,0.55));
}
.hon-cap{
margin-top:1.3rem; font-size:0.74rem; letter-spacing:0.12em;
text-transform:uppercase; color:var(--ink-dim);
}
.hon-lead{ font-family:'Fraunces', serif; font-size:1.35rem; line-height:1.45; color:#e6dfd2; max-width:34ch; }
.hon-list{ margin-top:2.4rem; }
.hon-row{
display:grid; grid-template-columns:82px 1fr auto; gap:1.6rem; align-items:baseline;
padding:1.15rem 0; border-top:1px solid var(--line);
opacity:0; transform:translateY(14px);
transition:opacity .7s ease, transform .7s var(--ease-lux);
}
.hon-row.is-in{ opacity:1; transform:translateY(0); }
.hon-row:last-child{ border-bottom:1px solid var(--line); }
.hon-year{ font-family:'Fraunces', serif; font-size:0.92rem; color:var(--gold); }
.hon-name{ font-size:0.98rem; color:var(--ink); }
.hon-sub{ display:block; font-size:0.78rem; color:var(--ink-dim); margin-top:0.25rem; }
.hon-place{
font-family:'Fraunces', serif; font-size:0.88rem; color:var(--ink-dim);
white-space:nowrap; letter-spacing:0.04em;
}
.hon-row:hover .hon-name{ color:#f6efe2; }
.hon-note{ margin-top:1.8rem; font-size:0.78rem; color:var(--ink-dim); }
@media (max-width:900px){
.hon-grid{ grid-template-columns:1fr; gap:2.8rem; }
.hon-frame{ max-width:360px; }
.hon-row{ grid-template-columns:66px 1fr; }
.hon-place{ grid-column:2; margin-top:0.35rem; }
}
@media (prefers-reduced-motion: reduce){
.hon-row{ opacity:1 !important; transform:none !important; transition:none; }
}
/* ================= LEARNING PATH ================= */
.path-num{ font-family:'Fraunces', serif; font-size:0.95rem; color:var(--gold); }
.path-progress{ max-width:420px; margin-bottom:1rem; }
.path-progress-meta{ display:flex; justify-content:space-between; font-size:0.76rem; color:var(--ink-dim); margin-bottom:0.5rem; }
.path-progress-track{ height:3px; background:rgba(255,255,255,0.09); border-radius:2px; overflow:hidden; }
.path-progress-fill{
height:100%; width:0%;
background:linear-gradient(90deg, var(--gold), var(--cyan));
box-shadow:0 0 12px rgba(79,216,255,0.5);
transition:width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.path-canvas{ max-width:720px; margin:0 auto; }
.sec-head{
text-align:center; padding:4.5rem 0 2.6rem;
opacity:0; transform:translateY(24px);
transition:opacity .7s ease, transform .7s cubic-bezier(0.16,1,0.3,1);
}
.sec-head.is-in{ opacity:1; transform:translateY(0); }
.sec-head:first-child{ padding-top:0; }
.sec-eyebrow{ font-size:0.72rem; letter-spacing:0.14em; color:var(--ink-dim); text-transform:uppercase; }
.sec-head h3{ font-size:1.7rem; margin-top:0.5rem; }
.sec-head p{ margin-top:0.55rem; font-size:0.9rem; color:var(--ink-dim); }
.sec-rule{ width:1px; height:40px; margin:1.4rem auto 0; background:linear-gradient(180deg, transparent, var(--ink-dim), transparent); }
.lattice{ display:flex; flex-direction:column; align-items:center; }
.node-row{ display:grid; grid-template-columns:repeat(5, 1fr); width:100%; align-items:center; }
.node{
grid-row:1; justify-self:center; position:relative;
width:78px; height:78px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
opacity:0; transform:translateY(26px) scale(0.9);
transition:opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1);
}
.node.is-in{ opacity:1; transform:translateY(0) scale(1); }
.node-face{
position:absolute; inset:8px; transform:rotate(45deg); border-radius:10px;
transition:transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease;
}
.node:hover .node-face{ transform:rotate(45deg) scale(1.09); }
.node-icon{ position:relative; z-index:2; width:32px; height:32px; pointer-events:none; }
.node.done .node-face{
background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
box-shadow:0 8px 22px -8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.25);
}
.node.done .node-icon{ color:#0a0d14; }
.node.locked .node-face{ background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); }
.node.locked .node-icon{ color:var(--ink-dim); opacity:0.4; }
.node.current .node-face{
background:linear-gradient(145deg,#ffffff,#cfe9f5);
animation:nodePulse 2.4s ease-in-out infinite;
}
.node.current .node-icon{ color:#0a0d14; }
@keyframes nodePulse{
0%,100%{ box-shadow:0 0 0 0 rgba(79,216,255,0.5), 0 10px 26px -8px rgba(0,0,0,0.9); }
50% { box-shadow:0 0 0 14px rgba(79,216,255,0), 0 10px 26px -8px rgba(0,0,0,0.9); }
}
.node-flag{
position:absolute; top:-30px; left:50%; transform:translateX(-50%);
background:var(--ink); color:#0a0d14; font-size:0.7rem; font-weight:600;
padding:0.26rem 0.6rem; border-radius:3px; white-space:nowrap;
animation:flagBob 2.4s ease-in-out infinite;
}
.node-flag::after{
content:''; position:absolute; bottom:-4px; left:50%; margin-left:-4px;
border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid var(--ink);
}
@keyframes flagBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } }
.link{
grid-row:1; justify-self:center; align-self:center;
width:2px; height:44px; border-radius:2px;
background:rgba(255,255,255,0.07); position:relative; overflow:hidden;
}
.link.filled::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, var(--accent), transparent); opacity:0.55;
}
.deco{
grid-row:1; justify-self:center; width:44px; opacity:0.45;
animation:drift 7s ease-in-out infinite; pointer-events:none;
filter:drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}
.deco:nth-of-type(even){ animation-delay:-2.5s; }
@keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
/* lesson drawer */
.drawer{
position:fixed; z-index:110; right:0; top:0; bottom:0; width:min(420px, 92vw);
background:var(--panel); border-left:1px solid var(--line);
padding:3rem 2.4rem; overflow-y:auto;
transform:translateX(100%); transition:transform .38s cubic-bezier(0.16,1,0.3,1);
}
.drawer.is-open{ transform:translateX(0); }
.drawer-scrim{
position:fixed; inset:0; z-index:100; background:rgba(4,5,9,0.68);
opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.drawer-scrim.is-open{ opacity:1; pointer-events:auto; }
.drawer-badge{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); }
.drawer h3{ font-size:1.5rem; margin-top:0.7rem; }
.drawer-meta{ display:flex; gap:1.4rem; margin-top:1rem; font-size:0.82rem; color:var(--ink-dim); }
.drawer p.body{ margin-top:1.5rem; color:var(--ink-dim); line-height:1.65; font-size:0.95rem; }
.drawer h5{ font-size:0.76rem; color:var(--ink-dim); margin-top:2rem; margin-bottom:0.8rem; letter-spacing:0.06em; text-transform:uppercase; }
.drawer li{ list-style:none; font-size:0.9rem; color:var(--ink-dim); padding:0.6rem 0; border-top:1px solid var(--line); }
.drawer .btn-primary{ margin-top:2.2rem; width:100%; }
.drawer .btn-primary:disabled{ background:rgba(255,255,255,0.08); color:var(--ink-dim); cursor:not-allowed; box-shadow:none; transform:none; }
@media (max-width:600px){
.node{ width:64px; height:64px; }
.node-icon{ width:27px; height:27px; }
.deco{ width:34px; }
.sec-head h3{ font-size:1.4rem; }
.drawer{ padding:2.6rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce){
.node, .sec-head{ opacity:1 !important; transform:none !important; transition:none; }
.node.current .node-face, .node-flag, .deco{ animation:none !important; }
.drawer, .drawer-scrim{ transition:none; }
}
/* ================= RESULTS ================= */
.results-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.chart-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:2.2rem 2.2rem 1.6rem; }
.chart-label{ display:flex; justify-content:space-between; font-size:0.8rem; color:var(--ink-dim); margin-top:1rem; }
.quote{ font-family:'Fraunces', serif; font-size:1.5rem; line-height:1.45; font-weight:400; }
.quote-attr{ margin-top:1.4rem; font-size:0.9rem; color:var(--ink-dim); }
.quote-attr strong{ color:var(--ink); font-weight:500; }
@media (max-width:860px){ .results-grid{ grid-template-columns:1fr; } }
/* ================= CTA BAND ================= */
.cta-band{ padding:7rem 0; text-align:center; border-top:1px solid var(--line); }
.cta-band h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:16ch; margin:0 auto; }
.cta-band .btn-primary{ margin-top:2.2rem; }
/* ================= FOOTER ================= */
footer{ border-top:1px solid var(--line); padding:4.5rem 0 2.5rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; }
.footer-brand p{ margin-top:1rem; color:var(--ink-dim); font-size:0.92rem; line-height:1.6; max-width:32ch; }
.footer-col h5{ font-size:0.82rem; color:var(--ink-dim); font-weight:500; margin-bottom:1rem; }
.footer-col a{ display:block; text-decoration:none; font-size:0.9rem; color:var(--ink); opacity:0.85; margin-bottom:0.75rem; }
.footer-col a:hover{ opacity:1; color:var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:2rem; border-top:1px solid var(--line); font-size:0.8rem; color:var(--ink-dim); flex-wrap:wrap; gap:1rem; }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
/* ================= TOOLS SHELF ================= */
.tool-shelf{ display:grid; gap:1.4rem; }
.tool-item{
position:relative; display:grid; grid-template-columns:auto 1fr auto;
gap:1.8rem; align-items:center;
padding:2.1rem 2.2rem; border:1px solid var(--line); border-radius:5px;
background:linear-gradient(120deg, rgba(255,255,255,0.018), transparent 55%);
scroll-margin-top:7rem;
transition:border-color .35s ease, transform .35s var(--ease-lux), background .35s ease;
}
.tool-item:hover{
border-color:rgba(79,216,255,0.32); transform:translateY(-2px);
background:linear-gradient(120deg, rgba(79,216,255,0.05), transparent 55%);
}
.tool-item:target{ border-color:var(--cyan-dim); }
.tool-ico{
width:52px; height:52px; border-radius:4px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border:1px solid rgba(201,166,107,0.3); background:rgba(201,166,107,0.06);
}
.tool-ico svg{ width:24px; height:24px; stroke:var(--gold); fill:none; stroke-width:1.4; }
.tool-item h3{ font-size:1.3rem; }
.tool-item .tool-desc{ margin-top:0.4rem; font-size:0.92rem; color:var(--ink-dim); line-height:1.6; max-width:56ch; }
.tool-meta{ margin-top:0.9rem; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
.tool-item .btn-ghost{ white-space:nowrap; }
@media (max-width:760px){
.tool-item{ grid-template-columns:auto 1fr; gap:1.2rem; padding:1.6rem; }
.tool-item .btn-ghost{ grid-column:1 / -1; }
}
/* ---- inline call-to-action row (learning path) ---- */
.inline-cta{
margin-top:4rem; padding:2.4rem; border:1px solid var(--line); border-radius:5px;
display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
background:linear-gradient(120deg, rgba(201,166,107,0.05), transparent 60%);
}
.inline-cta h3{ font-size:1.4rem; max-width:22ch; }
.inline-cta p{ margin-top:0.6rem; font-size:0.92rem; color:var(--ink-dim); max-width:46ch; }
.inline-cta-btns{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.link-cta{
display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none;
font-size:0.92rem; color:var(--ink); border-bottom:1px solid rgba(255,255,255,0.2);
padding-bottom:0.35rem; transition:border-color .3s, color .3s;
}
.link-cta:hover{ color:var(--cyan); border-color:var(--cyan); }
/* ================= A PLACE FOR EVERY PLAYER =================
Sits directly under the Nexus Method. The Method block runs warm
(gold on near-black); this one runs cool, so the two read as
separate chapters rather than one long dark stretch. */
.levels{
--l-bg:#080b14;
--l-card:#0e1320;
--l-ink:#f3f6fb;
--l-body:#8d99b2;
--l-cyan:#4fd8ff;
--l-gold:#c9a66b;
--l-line:rgba(255,255,255,0.075);
--l-ease:cubic-bezier(0.22, 1, 0.36, 1);
position:relative; overflow:hidden;
background:var(--l-bg);
}
.levels-bg{
position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
radial-gradient(ellipse 58% 44% at 50% 0%, rgba(79,216,255,0.075), transparent 68%),
url("data:image/svg+xml;utf8,");
background-size:auto, 128px 128px;
}
.levels > .wrap{ position:relative; z-index:1; }
/* ---- centred header ---- */
.levels-head{ text-align:center; max-width:46rem; margin:0 auto 4.5rem; }
.levels-eyebrow{
display:flex; align-items:center; justify-content:center; gap:0.9rem;
font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
color:var(--l-gold); margin-bottom:1.5rem;
}
.levels-eyebrow::before, .levels-eyebrow::after{
content:''; width:30px; height:1px; background:var(--l-gold); opacity:0.6;
}
.levels-head h2{
font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.14; color:var(--l-ink); margin:0;
}
.levels-head h2 em{
font-style:normal;
background:linear-gradient(100deg, var(--l-cyan) 0%, #a8e4ff 45%, var(--l-gold) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.levels-lede{ margin:1.3rem auto 0; font-size:1rem; line-height:1.75; color:var(--l-body); max-width:44ch; }
/* ---- the three cards ---- */
.level-grid{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; align-items:stretch;
}
.level-card{
opacity:0; transform:translateY(16px);
transition:opacity .55s ease, transform .6s var(--l-ease);
}
.level-card.is-in{ opacity:1; transform:translateY(0); }
.level-card:nth-child(2){ transition-delay:.11s; }
.level-card:nth-child(3){ transition-delay:.22s; }
.lc-inner{
position:relative; height:100%; display:flex; flex-direction:column;
padding:2.4rem 2.1rem 2rem;
background:var(--l-card);
border:1px solid var(--l-line); border-radius:6px;
transition:transform .35s var(--l-ease), border-color .35s ease, box-shadow .35s ease;
}
.level-card:hover .lc-inner,
.level-card:focus-within .lc-inner{
transform:translateY(-4px);
border-color:rgba(79,216,255,0.34);
box-shadow:0 26px 52px -30px rgba(0,0,0,0.9);
}
/* the middle card is the one we steer people toward: warmer, taller, lit */
.level-card.is-featured .lc-inner{
background:
linear-gradient(180deg, rgba(201,166,107,0.11), rgba(20,17,14,0) 58%),
#12100e;
border-color:rgba(201,166,107,0.42);
box-shadow:0 34px 64px -34px rgba(0,0,0,0.95), 0 0 70px -26px rgba(201,166,107,0.3);
}
.level-card.is-featured:hover .lc-inner,
.level-card.is-featured:focus-within .lc-inner{
border-color:rgba(201,166,107,0.7);
box-shadow:0 34px 64px -30px rgba(0,0,0,0.95), 0 0 80px -20px rgba(201,166,107,0.42);
}
.lc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2.2rem; }
.lc-num{
font-family:'Fraunces', serif; font-size:2.6rem; font-weight:300; line-height:1;
color:var(--l-ink); opacity:0.17; letter-spacing:-0.02em;
}
.level-card.is-featured .lc-num{ color:var(--l-gold); opacity:0.34; }
.lc-ico svg{
width:30px; height:30px; fill:none; stroke:var(--l-cyan);
stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
opacity:0.85; transition:opacity .3s ease, transform .4s var(--l-ease);
}
.level-card.is-featured .lc-ico svg{ stroke:var(--l-gold); }
.level-card:hover .lc-ico svg{ opacity:1; transform:translateY(-2px); }
.lc-kicker{
font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
color:var(--l-body); margin-bottom:0.9rem;
}
.level-card.is-featured .lc-kicker{ color:rgba(201,166,107,0.85); }
.lc-title{ font-size:1.75rem; line-height:1.1; color:var(--l-ink); margin:0; }
.lc-lead{ margin-top:0.95rem; font-size:0.96rem; font-weight:500; color:var(--l-ink); }
.lc-copy{ margin-top:0.75rem; font-size:0.92rem; line-height:1.72; color:var(--l-body); }
.lc-list{ list-style:none; margin:1.8rem 0 0; padding:0; flex-grow:1; }
.lc-list li{
display:flex; align-items:flex-start; gap:0.75rem;
font-size:0.9rem; line-height:1.5; color:var(--l-ink); padding:0.42rem 0;
}
.lc-list li::before{
content:''; flex-shrink:0; width:15px; height:15px; margin-top:0.12em;
background-color:var(--l-cyan);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.level-card.is-featured .lc-list li::before{ background-color:var(--l-gold); }
.lc-link{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--l-line);
font-size:0.95rem; font-weight:500; color:var(--l-ink); text-decoration:none;
transition:color .3s ease;
}
.lc-link:hover, .lc-link:focus-visible{ color:var(--l-cyan); outline:none; }
.level-card.is-featured .lc-link:hover,
.level-card.is-featured .lc-link:focus-visible{ color:var(--l-gold); }
.lc-link:focus-visible{ text-decoration:underline; text-underline-offset:4px; }
.lc-arrow{ flex-shrink:0; width:16px; height:16px; transition:transform .35s var(--l-ease); }
.lc-arrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lc-link:hover .lc-arrow{ transform:translate(3px, -3px); }
/* ---- the reassurance line under the grid ---- */
.levels-note{
display:flex; align-items:center; justify-content:center; gap:0.75rem; flex-wrap:wrap;
margin-top:3.2rem; font-size:0.92rem; color:var(--l-body); text-align:center;
}
.levels-note svg{ width:17px; height:17px; fill:none; stroke:var(--l-cyan); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.levels-note a{
display:inline-flex; align-items:center; gap:0.45rem;
color:var(--l-cyan); font-weight:500; text-decoration:none;
border-bottom:1px solid transparent; transition:border-color .3s ease;
}
.levels-note a:hover, .levels-note a:focus-visible{ border-color:var(--l-cyan); outline:none; }
.levels-note a span{ transition:transform .3s var(--l-ease); }
.levels-note a:hover span{ transform:translateX(3px); }
/* the featured card stands proud of its neighbours on a wide screen only */
@media (min-width:1001px){
.level-card.is-featured{ margin-top:-1.4rem; margin-bottom:-1.4rem; }
}
@media (max-width:1000px){
.level-grid{ grid-template-columns:1fr; gap:1.2rem; max-width:34rem; margin-inline:auto; }
.levels-head{ margin-bottom:3.4rem; }
}
@media (max-width:640px){
.lc-inner{ padding:1.9rem 1.6rem 1.7rem; }
.lc-top{ margin-bottom:1.7rem; }
.lc-num{ font-size:2.2rem; }
.levels-note{ margin-top:2.4rem; }
}
@media (prefers-reduced-motion: reduce){
.level-card{ opacity:1; transform:none; transition:none; }
.lc-inner, .lc-ico svg, .lc-arrow, .levels-note a span{ transition:none; }
.level-card:hover .lc-inner{ transform:none; }
}
/* ================= ONE PROGRAMME, TWO POINTS OF VIEW =================
The reference is two light cards, each with a flat illustration panel
over a bulleted list. Here the illustration panel becomes a small live
dashboard that plays itself once the card scrolls in — a student view
in cyan, the school's view in gold. */
.school-split{
--s-card:#0d121e;
--s-ink:#f3f6fb;
--s-body:#8d99b2;
--s-line:rgba(255,255,255,0.075);
--s-cyan:#4fd8ff;
--s-gold:#c9a66b;
--s-ease:cubic-bezier(0.22, 1, 0.36, 1);
position:relative; overflow:hidden;
background:linear-gradient(180deg, #080b14 0%, #07090f 100%);
}
.ss-head{ text-align:center; max-width:46rem; margin:0 auto 4rem; }
.ss-eyebrow{
display:flex; align-items:center; justify-content:center; gap:0.9rem;
font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
color:var(--s-gold); margin-bottom:1.5rem;
}
.ss-eyebrow::before, .ss-eyebrow::after{
content:''; width:30px; height:1px; background:var(--s-gold); opacity:0.6;
}
.ss-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.15; color:var(--s-ink); margin:0; }
.ss-head h2 em{
font-style:normal;
background:linear-gradient(100deg, var(--s-cyan) 0%, #a8e4ff 45%, var(--s-gold) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ss-lede{ margin:1.3rem auto 0; font-size:1rem; line-height:1.75; color:var(--s-body); max-width:50ch; }
.ss-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.ss-card{
display:flex; flex-direction:column;
padding:1.5rem 1.5rem 2rem;
background:var(--s-card); border:1px solid var(--s-line); border-radius:8px;
opacity:0; transform:translateY(18px);
transition:opacity .6s ease, transform .7s var(--s-ease), border-color .35s ease;
}
.ss-card.is-in{ opacity:1; transform:translateY(0); }
.ss-card:nth-child(2){ transition-delay:.12s; }
.ss-card.ss-student:hover{ border-color:rgba(79,216,255,0.32); }
.ss-card.ss-admin:hover{ border-color:rgba(201,166,107,0.36); }
.ss-card h3{ margin:1.8rem 0 0; font-size:1.6rem; line-height:1.15; color:var(--s-ink); }
.ss-list{ list-style:none; margin:1.4rem 0 0; padding:0; }
.ss-list li{
display:flex; align-items:flex-start; gap:0.85rem;
padding:0.5rem 0; font-size:0.93rem; line-height:1.55; color:var(--s-body);
}
/* a three-square staircase — the shape a knight travels in */
.ss-list li::before{
content:''; flex-shrink:0; width:13px; height:13px; margin-top:0.3em;
background-color:var(--s-cyan);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.ss-admin .ss-list li::before{ background-color:var(--s-gold); }
/* ---- the animated panel at the top of each card ---- */
.ss-stage{
position:relative; overflow:hidden;
border-radius:6px; padding:1.5rem 1.4rem;
min-height:232px; display:flex; flex-direction:column; justify-content:space-between; gap:1.1rem;
}
.ss-student .ss-stage{
background:
radial-gradient(ellipse 70% 60% at 22% 0%, rgba(79,216,255,0.16), transparent 62%),
linear-gradient(160deg, #10243a 0%, #0a1422 62%);
border:1px solid rgba(79,216,255,0.16);
}
.ss-admin .ss-stage{
background:
radial-gradient(ellipse 70% 60% at 78% 0%, rgba(201,166,107,0.18), transparent 62%),
linear-gradient(160deg, #2a2114 0%, #15110b 62%);
border:1px solid rgba(201,166,107,0.18);
}
/* faint board texture, same motif the rest of the site uses */
.ss-stage::before{
content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
background-image:url("data:image/svg+xml;utf8,");
background-size:72px 72px;
}
.ss-stage > *{ position:relative; z-index:1; }
.stg-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.stg-label{ font-size:0.76rem; letter-spacing:0.02em; color:rgba(243,246,251,0.82); }
.stg-tag{
font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
padding:0.3rem 0.6rem; border-radius:3px;
background:rgba(201,166,107,0.16); border:1px solid rgba(201,166,107,0.4); color:#e8d3a8;
}
.stg-live{ display:inline-flex; align-items:center; gap:0.45rem; font-size:0.72rem; color:var(--s-body); }
.stg-live i{
width:6px; height:6px; border-radius:50%; background:var(--s-gold);
box-shadow:0 0 0 0 rgba(201,166,107,0.6);
}
.ss-card.is-in .stg-live i{ animation:ssPulse 2.4s ease-out infinite; }
@keyframes ssPulse{
0% { box-shadow:0 0 0 0 rgba(201,166,107,0.55); }
70% { box-shadow:0 0 0 7px rgba(201,166,107,0); }
100% { box-shadow:0 0 0 0 rgba(201,166,107,0); }
}
/* ---- progress ring (student) ---- */
.stg-ring{ position:relative; width:52px; height:52px; flex-shrink:0; }
.stg-ring svg{ width:52px; height:52px; transform:rotate(-90deg); }
.stg-ring circle{ fill:none; stroke-width:3.4; stroke-linecap:round; }
.ring-track{ stroke:rgba(255,255,255,0.1); }
.ring-fill{
stroke:var(--s-cyan);
stroke-dasharray:113.1;
stroke-dashoffset:113.1;
filter:drop-shadow(0 0 4px rgba(79,216,255,0.6));
transition:stroke-dashoffset 1.6s var(--s-ease) .35s;
}
.ss-card.is-in .ring-fill{ stroke-dashoffset:31.7; } /* 72% of the circumference */
.ring-num{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:'Fraunces', serif; font-size:0.92rem; font-weight:500; color:var(--s-ink);
}
.ring-num::after{ content:'%'; font-size:0.62rem; margin-left:1px; opacity:0.7; }
/* ---- chapter rows (student) ---- */
.stg-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.62rem; }
.stg-row{ display:flex; align-items:center; gap:0.7rem; }
.row-bar{
flex:1 1 auto; height:6px; border-radius:3px; overflow:hidden;
background:rgba(255,255,255,0.07);
}
.row-bar i{
display:block; height:100%; width:100%; border-radius:3px;
background:linear-gradient(90deg, rgba(79,216,255,0.5), var(--s-cyan));
transform:scaleX(0); transform-origin:left center;
transition:transform 1s var(--s-ease);
}
.ss-card.is-in .stg-row:nth-child(1) .row-bar i{ transform:scaleX(1); transition-delay:.45s; }
.ss-card.is-in .stg-row:nth-child(2) .row-bar i{ transform:scaleX(1); transition-delay:.72s; }
.ss-card.is-in .stg-row:nth-child(3) .row-bar i{ transform:scaleX(0.42); transition-delay:.99s; }
.row-tick{
flex-shrink:0; width:15px; height:15px; border-radius:50%;
border:1px solid rgba(255,255,255,0.16); position:relative;
transition:background .3s ease, border-color .3s ease;
}
.row-tick::after{
content:''; position:absolute; inset:0;
background-color:#06222f;
-webkit-mask:url("data:image/svg+xml;utf8,") center/9px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/9px no-repeat;
opacity:0; transform:scale(0.4);
transition:opacity .3s ease, transform .45s var(--s-ease);
}
.ss-card.is-in .stg-row:nth-child(1) .row-tick,
.ss-card.is-in .stg-row:nth-child(2) .row-tick{ background:var(--s-cyan); border-color:var(--s-cyan); }
.ss-card.is-in .stg-row:nth-child(1) .row-tick::after{ opacity:1; transform:scale(1); transition-delay:1.3s; }
.ss-card.is-in .stg-row:nth-child(2) .row-tick::after{ opacity:1; transform:scale(1); transition-delay:1.57s; }
.ss-card.is-in .stg-row:nth-child(1) .row-tick{ transition-delay:1.3s; }
.ss-card.is-in .stg-row:nth-child(2) .row-tick{ transition-delay:1.57s; }
/* ---- chips (student) ---- */
.stg-chips{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.chip{
display:inline-block;
padding:0.36rem 0.7rem; border-radius:3px; font-size:0.76rem;
border:1px solid rgba(255,255,255,0.1); color:rgba(243,246,251,0.9);
opacity:0; transform:translateY(7px);
transition:opacity .45s ease, transform .55s var(--s-ease);
}
.ss-card.is-in .chip{ opacity:1; transform:translateY(0); }
.ss-card.is-in .chip-pts{ transition-delay:1.75s; }
.ss-card.is-in .chip-rank{ transition-delay:1.9s; }
.chip-pts{ background:rgba(79,216,255,0.13); border-color:rgba(79,216,255,0.34); color:#cdf1ff; }
.chip b{ font-family:'Fraunces', serif; font-weight:500; }
/* ---- class rows (admin) ---- */
.stg-classes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.stg-classes li{ display:flex; align-items:center; gap:0.7rem; font-size:0.74rem; color:var(--s-body); }
.cl-name{ flex:0 0 3.4rem; color:rgba(243,246,251,0.78); }
.cl-track{ flex:1 1 auto; height:6px; border-radius:3px; background:rgba(255,255,255,0.07); overflow:hidden; }
.cl-track i{
display:block; height:100%; border-radius:3px; width:var(--to, 60%);
background:linear-gradient(90deg, rgba(201,166,107,0.45), var(--s-gold));
transform:scaleX(0); transform-origin:left center;
transition:transform 1.1s var(--s-ease);
}
.ss-card.is-in .stg-classes li:nth-child(1) .cl-track i{ transform:scaleX(1); transition-delay:.4s; }
.ss-card.is-in .stg-classes li:nth-child(2) .cl-track i{ transform:scaleX(1); transition-delay:.62s; }
.ss-card.is-in .stg-classes li:nth-child(3) .cl-track i{ transform:scaleX(1); transition-delay:.84s; }
.cl-pct{ flex:0 0 2.4rem; text-align:right; font-family:'Fraunces', serif; color:rgba(243,246,251,0.9); }
/* ---- national rank (admin) ---- */
.stg-rank{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding-top:0.9rem; border-top:1px solid rgba(201,166,107,0.18);
}
.rk-label{ font-size:0.74rem; color:var(--s-body); }
.rk-num{
font-family:'Fraunces', serif; font-size:1.5rem; font-weight:500; color:#e8d3a8;
display:inline-flex; align-items:baseline;
}
.rk-num .rk-arrow{
font-size:0.72rem; margin-left:0.45rem; color:#7fe3a6;
opacity:0; transform:translateY(5px);
transition:opacity .4s ease 1.9s, transform .5s var(--s-ease) 1.9s;
}
.ss-card.is-in .rk-num .rk-arrow{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
.ss-grid{ grid-template-columns:1fr; gap:1.2rem; max-width:34rem; margin-inline:auto; }
.ss-head{ margin-bottom:3rem; }
}
@media (max-width:640px){
.ss-card{ padding:1.2rem 1.2rem 1.6rem; }
.ss-stage{ padding:1.2rem 1.1rem; min-height:214px; }
.ss-card h3{ font-size:1.4rem; margin-top:1.5rem; }
}
@media (prefers-reduced-motion: reduce){
/* everything lands on its finished state, nothing travels */
.ss-card{ opacity:1; transform:none; transition:none; }
.ring-fill{ stroke-dashoffset:31.7; transition:none; }
.row-bar i, .cl-track i{ transform:scaleX(1); transition:none; }
.stg-row:nth-child(3) .row-bar i{ transform:scaleX(0.42); }
.row-tick::after, .chip, .rk-num .rk-arrow{ opacity:1; transform:none; transition:none; }
.stg-row:nth-child(1) .row-tick, .stg-row:nth-child(2) .row-tick{ background:var(--s-cyan); border-color:var(--s-cyan); }
.stg-row:nth-child(3) .row-tick::after{ opacity:0; }
.ss-card.is-in .stg-live i{ animation:none; }
}
/* ================= WHY NEXUS ================= */
.why-page{
--w-card:#0d121e;
--w-ink:#f3f6fb;
--w-body:#8d99b2;
--w-line:rgba(255,255,255,0.075);
--w-cyan:#4fd8ff;
--w-gold:#c9a66b;
--w-ease:cubic-bezier(0.22, 1, 0.36, 1);
position:relative; overflow:hidden;
background:linear-gradient(180deg, #090c15 0%, #07090f 62%);
}
.why-page::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
radial-gradient(ellipse 54% 40% at 50% 0%, rgba(79,216,255,0.08), transparent 66%),
url("data:image/svg+xml;utf8,");
background-size:auto, 128px 128px;
}
.why-page > .wrap{ position:relative; z-index:1; }
/* ---- shared line-mask reveal ---- */
.rv-line{ display:block; overflow:hidden; padding-bottom:0.28em; margin-bottom:-0.28em; }
.rv-in{ display:block; transform:translateY(112%); transition:transform 1s var(--w-ease); }
.reveal.is-in .rv-in{ transform:translateY(0); }
.reveal.is-in .rv-line:nth-child(2) .rv-in{ transition-delay:.13s; }
.reveal.is-in .rv-line:nth-child(3) .rv-in{ transition-delay:.26s; }
/* ---- page header ---- */
.wn-head{ text-align:center; max-width:50rem; margin:0 auto 4.5rem; }
.wn-eyebrow{
display:flex; align-items:center; justify-content:center; gap:0.9rem;
font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
color:var(--w-gold); margin-bottom:1.6rem;
opacity:0; transition:opacity .6s ease .2s;
}
.reveal.is-in .wn-eyebrow{ opacity:1; }
.wn-eyebrow::before, .wn-eyebrow::after{
content:''; width:30px; height:1px; background:var(--w-gold); opacity:0.6;
transform:scaleX(0); transition:transform .7s var(--w-ease);
}
.wn-eyebrow::before{ transform-origin:right center; }
.wn-eyebrow::after{ transform-origin:left center; }
.reveal.is-in .wn-eyebrow::before, .reveal.is-in .wn-eyebrow::after{ transform:scaleX(1); }
.wn-head h1{
font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.018em;
font-size:clamp(2rem, 4.1vw, 3.4rem); line-height:1.1; color:var(--w-ink); margin:0;
}
.wn-head h1 em{
font-style:normal;
background:linear-gradient(100deg, var(--w-cyan) 0%, #bfe9ff 44%, var(--w-gold) 100%);
background-size:240% 100%; background-position:135% 0;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
transition:background-position 1.7s var(--w-ease) 1s;
}
.reveal.is-in .wn-head h1 em{ background-position:0 0; }
.wn-lede{
margin:1.6rem auto 0; font-size:1.05rem; line-height:1.75; color:var(--w-body); max-width:54ch;
opacity:0; transform:translateY(14px);
transition:opacity .75s ease .62s, transform .85s var(--w-ease) .62s;
}
.reveal.is-in .wn-lede{ opacity:1; transform:translateY(0); }
/* ---- the six reasons ---- */
.why-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.why-card{
position:relative; overflow:hidden;
display:flex; flex-direction:column;
padding:2.2rem 2rem;
background:var(--w-card); border:1px solid var(--w-line); border-radius:6px;
opacity:0; transform:translateY(18px);
transition:opacity .55s ease, transform .6s var(--w-ease),
border-color .35s ease, box-shadow .35s ease;
}
.why-card.is-in{ opacity:1; transform:translateY(0); }
.why-card:nth-child(2){ transition-delay:.08s; }
.why-card:nth-child(3){ transition-delay:.16s; }
.why-card:nth-child(4){ transition-delay:.24s; }
.why-card:nth-child(5){ transition-delay:.32s; }
.why-card:nth-child(6){ transition-delay:.4s; }
/* a hairline along the top edge that lights up under the cursor */
.why-card::before{
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, var(--w-accent, var(--w-cyan)), transparent);
opacity:0.22; transition:opacity .35s ease;
}
.why-card:hover, .why-card:focus-within{
transform:translateY(-4px);
border-color:color-mix(in srgb, var(--w-accent, var(--w-cyan)) 34%, transparent);
box-shadow:0 26px 52px -32px rgba(0,0,0,0.9);
}
.why-card:hover::before{ opacity:0.9; }
/* alternating accents keep the six from reading as one flat block */
.why-card:nth-child(3n+2){ --w-accent:var(--w-gold); }
.wc-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.why-card .why-num{
font-family:'Fraunces', serif; font-size:0.95rem; font-weight:500; line-height:1;
color:var(--w-accent, var(--w-cyan)); opacity:0.9; margin:0;
}
.wc-ico{
width:42px; height:42px; border-radius:5px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border:1px solid color-mix(in srgb, var(--w-accent, var(--w-cyan)) 26%, transparent);
background:color-mix(in srgb, var(--w-accent, var(--w-cyan)) 7%, transparent);
transition:transform .4s var(--w-ease);
}
.why-card:hover .wc-ico{ transform:translateY(-2px) rotate(-3deg); }
.wc-ico svg{
width:21px; height:21px; fill:none; stroke:var(--w-accent, var(--w-cyan));
stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.why-card h3{ margin:0; font-size:1.22rem; line-height:1.25; color:var(--w-ink); }
.why-card p{ margin-top:0.85rem; font-size:0.92rem; line-height:1.72; color:var(--w-body); }
/* ---- the comparison ---- */
.vs-head-block{ text-align:center; max-width:44rem; margin:6rem auto 2.6rem; }
.vs-head-block h2{
font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.16; color:var(--w-ink); margin:0;
}
.vs-head-block p{ margin-top:1rem; font-size:0.98rem; line-height:1.7; color:var(--w-body); }
.vs-table{ border:1px solid var(--w-line); border-radius:8px; overflow:hidden; }
.vs-labels, .vs-row{ display:grid; grid-template-columns:1fr 1fr; }
.vs-labels{ border-bottom:1px solid var(--w-line); }
.vs-labels span{
padding:1.05rem 1.6rem;
font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
}
.vs-labels .vs-us{ color:var(--w-cyan); background:rgba(79,216,255,0.07); }
.vs-labels .vs-them{ color:var(--w-body); }
.vs-rows{ list-style:none; margin:0; padding:0; }
.vs-row{
border-top:1px solid var(--w-line);
opacity:0; transform:translateY(12px);
transition:opacity .5s ease, transform .55s var(--w-ease);
}
.vs-row:first-child{ border-top:none; }
.vs-row.is-in{ opacity:1; transform:translateY(0); }
.vs-cell{
display:flex; align-items:flex-start; gap:0.8rem;
padding:1.15rem 1.6rem; font-size:0.94rem; line-height:1.55;
}
/* the Nexus column runs as one continuous lit lane down the table */
.vs-cell.vs-us{ color:var(--w-ink); background:rgba(79,216,255,0.055); }
.vs-cell.vs-them{ color:var(--w-body); }
.vs-row:hover .vs-cell.vs-us{ background:rgba(79,216,255,0.1); }
.vs-mark{ flex-shrink:0; width:16px; height:16px; margin-top:0.16em; }
.vs-mark::before{ content:''; display:block; width:100%; height:100%; }
.vs-tick::before{
background-color:var(--w-cyan);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.vs-cross::before{
background-color:rgba(141,153,178,0.55);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
@media (max-width:1000px){
.why-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:760px){
.why-grid{ grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }
.wn-head{ margin-bottom:3.2rem; }
.vs-head-block{ margin-top:4rem; }
/* the two columns become stacked, labelled halves of one row */
.vs-labels{ display:none; }
.vs-row{ grid-template-columns:1fr; }
.vs-cell{ padding:0.95rem 1.2rem; }
.vs-cell.vs-us{ padding-bottom:0.7rem; }
.vs-cell.vs-them{ padding-top:0.7rem; }
.vs-cell::after{
content:attr(data-label);
margin-left:auto; padding-left:0.8rem; flex-shrink:0;
font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; opacity:0.75;
}
}
@media (prefers-reduced-motion: reduce){
.rv-in{ transform:none; transition:none; }
.wn-eyebrow, .wn-lede, .why-card, .vs-row{ opacity:1; transform:none; transition:none; }
.wn-eyebrow::before, .wn-eyebrow::after{ transform:scaleX(1); transition:none; }
.wn-head h1 em{ background-position:0 0; transition:none; }
.why-card:hover{ transform:none; }
.wc-ico, .why-card:hover .wc-ico{ transform:none; transition:none; }
}
/* ---- header stage: pieces standing around the headline ----
Three nested layers so nothing fights over `transform`:
.wn-piece absolute placement + cursor parallax (JS)
.wn-piece-in the drift / the knight's leap (CSS keyframes)
.wn-piece-art the entrance pop (CSS transition) */
.wn-head{ position:relative; padding:1rem 0 0.5rem; }
.wn-stage{
position:absolute; inset:-3rem -2rem -2rem; z-index:0; pointer-events:none;
}
.wn-head > *:not(.wn-stage){ position:relative; z-index:1; }
/* a soft light that trails the cursor across the header */
.wn-spot{
position:absolute; inset:0; opacity:0;
background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%),
rgba(79,216,255,0.13), transparent 70%);
transition:opacity .6s ease;
}
.reveal.is-in .wn-spot{ opacity:1; }
.wn-piece{
position:absolute; left:var(--x); top:var(--y);
width:var(--w, 72px);
opacity:0;
transform:translate3d(var(--px, 0px), var(--py, 0px), 0);
transition:opacity 1.1s ease, transform .9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-in .wn-piece{ opacity:var(--o, 0.13); }
.wn-piece-in{ display:block; }
.wn-piece-art{
display:block; transform:scale(0.78);
transition:transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-in .wn-piece-art{ transform:scale(1); }
.wn-piece svg{
width:100%; height:auto; display:block;
fill:currentColor;
filter:drop-shadow(0 0 14px currentColor);
}
.wn-piece.is-cyan{ color:#4fd8ff; }
.wn-piece.is-gold{ color:#c9a66b; }
/* the drift — each piece breathes on its own clock */
.reveal.is-in .wn-piece-in{ animation:wnDrift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite; }
@keyframes wnDrift{
0%, 100% { transform:translateY(0) rotate(var(--rot, -3deg)); }
50% { transform:translateY(-15px) rotate(calc(var(--rot, -3deg) * -1)); }
}
/* the knight ignores the drift and leaps its L instead — out, then back */
.reveal.is-in .wn-p-knight .wn-piece-in{ animation:wnLeap 11s cubic-bezier(0.34,1.4,0.5,1) 1.4s infinite; }
@keyframes wnLeap{
0%, 50% { transform:translate(0, 0) rotate(-5deg); }
56% { transform:translate(5px, -30px) rotate(5deg) scale(1.05, 0.95); }
63% { transform:translate(30px, -34px) rotate(11deg) scale(1, 1); }
69% { transform:translate(33px, 0) rotate(4deg) scale(0.94, 1.06); }
74% { transform:translate(33px, -7px) rotate(4deg) scale(1, 1); }
78% { transform:translate(33px, 0) rotate(4deg) scale(0.97, 1.03); }
85% { transform:translate(28px, -32px) rotate(-3deg) scale(1.04, 0.96); }
93% { transform:translate(3px, -26px) rotate(-9deg) scale(1, 1); }
98%, 100%{ transform:translate(0, 0) rotate(-5deg); }
}
/* the pieces stand clear of the centred column; below that there is no
room for them, so they step aside entirely */
@media (max-width:1100px){ .wn-stage{ display:none; } }
@media (prefers-reduced-motion: reduce){
.wn-piece{ transition:none; }
.wn-piece-art{ transform:scale(1); transition:none; }
.reveal.is-in .wn-piece-in,
.reveal.is-in .wn-p-knight .wn-piece-in{ animation:none; }
.wn-spot{ display:none; }
}
/* ================= OUR STUDENTS. THEIR STORIES. =================
A scrapbook opening, then a winding line that draws itself as you
scroll, threading one story to the next. Deep navy ground, warm ivory
type, electric blue for the line and everything it touches. */
.stories{
--s-navy:#0a1024;
--s-navy-2:#0c1531;
--s-panel:#111a33;
--s-panel-2:#0e1730;
--s-ivory:#f5efe2;
--s-ink:#eaf0fa;
--s-body:#9fb0cc;
--s-blue:#4a9eff;
--s-blue-hot:#7bc2ff;
--s-gold:#e8b964;
--s-line:rgba(255,255,255,0.09);
--s-ease:cubic-bezier(0.22, 1, 0.36, 1);
position:relative; overflow:hidden;
padding:0 0 2rem;
background:
radial-gradient(ellipse 70% 40% at 50% 0%, rgba(74,158,255,0.11), transparent 62%),
linear-gradient(180deg, #0a1024 0%, #080d1d 55%, #07090f 100%);
}
/* the chessboard weave, barely there */
.stories::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:120px 120px;
}
.stories > .wrap{ position:relative; z-index:1; }
/* ---------- opening ---------- */
.st-open{ position:relative; padding:7rem 0 4rem; text-align:center; }
.st-label{
display:inline-flex; align-items:center; gap:0.7rem;
font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; font-weight:500;
color:var(--s-blue); margin-bottom:1.8rem;
opacity:0; transform:translateY(10px);
transition:opacity .6s ease .1s, transform .7s var(--s-ease) .1s;
}
.st-label::before, .st-label::after{ content:''; width:24px; height:1px; background:var(--s-blue); opacity:0.6; }
.st-open.is-in .st-label{ opacity:1; transform:translateY(0); }
.st-title{
font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.025em;
font-size:clamp(2.6rem, 7vw, 5.6rem); line-height:0.98; color:var(--s-ivory);
margin:0 auto; max-width:16ch;
}
.st-title .rv-line{ display:block; overflow:hidden; padding-bottom:0.16em; margin-bottom:-0.16em; }
.st-title .rv-in{ display:block; transform:translateY(112%); transition:transform 1s var(--s-ease); }
.st-open.is-in .st-title .rv-in{ transform:translateY(0); }
.st-open.is-in .st-title .rv-line:nth-child(2) .rv-in{ transition-delay:.12s; }
.st-title em{
font-style:italic; font-weight:300;
background:linear-gradient(100deg, var(--s-blue) 0%, var(--s-blue-hot) 48%, var(--s-gold) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.st-lede{
margin:1.8rem auto 0; max-width:52ch;
font-size:1.08rem; line-height:1.7; color:var(--s-body);
opacity:0; transform:translateY(14px);
transition:opacity .7s ease .55s, transform .8s var(--s-ease) .55s;
}
.st-open.is-in .st-lede{ opacity:1; transform:translateY(0); }
/* scrapbook shots pinned around the headline */
.st-scrap{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.st-snap{
position:absolute; width:var(--w); left:var(--x); top:var(--y);
transform:rotate(var(--r)) translateY(26px) scale(0.94);
opacity:0; transition:opacity .9s ease, transform 1.1s var(--s-ease);
}
.st-open.is-in .st-snap{ opacity:1; transform:rotate(var(--r)) translateY(0) scale(1); }
.st-open.is-in .st-snap:nth-child(1){ transition-delay:.35s; }
.st-open.is-in .st-snap:nth-child(2){ transition-delay:.5s; }
.st-open.is-in .st-snap:nth-child(3){ transition-delay:.65s; }
.st-snap img{
width:100%; height:auto; display:block; border-radius:10px;
border:5px solid var(--s-ivory);
box-shadow:0 22px 44px -22px rgba(0,0,0,0.85);
}
/* the line that leads down out of the opening */
.st-leadin{ display:block; width:100%; max-width:120px; margin:3.2rem auto 0; height:96px; }
.st-leadin path{
fill:none; stroke:var(--s-blue); stroke-width:2; stroke-linecap:round;
stroke-dasharray:1; stroke-dashoffset:1;
transition:stroke-dashoffset 1.4s var(--s-ease) .8s;
}
.st-open.is-in .st-leadin path{ stroke-dashoffset:0; }
/* ---------- the timeline ---------- */
.st-timeline{ position:relative; padding:2rem 0 4rem; }
.st-track{
position:absolute; inset:0; width:100%; height:100%;
z-index:0; pointer-events:none; overflow:visible;
}
.st-track path{ fill:none; stroke-linecap:round; }
.st-track .st-rail{ stroke:rgba(255,255,255,0.075); stroke-width:2; }
.st-track .st-draw{
stroke:url(#stGrad); stroke-width:2.5;
filter:drop-shadow(0 0 6px rgba(74,158,255,0.5));
}
.st-list{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
/* ---------- one story ---------- */
.st-story{
position:relative;
display:grid; grid-template-columns:1fr 92px 1fr; align-items:center;
gap:0; margin-bottom:7rem;
}
.st-story:last-child{ margin-bottom:3rem; }
.st-photo-cell{ grid-column:1; padding-right:3.4rem; }
.st-text-cell{ grid-column:3; padding-left:3.4rem; }
.st-story[data-side="right"] .st-photo-cell{ grid-column:3; padding-right:0; padding-left:3.4rem; }
.st-story[data-side="right"] .st-text-cell{ grid-column:1; padding-left:0; padding-right:3.4rem; text-align:right; }
.st-story[data-side="right"] .st-badge{ flex-direction:row-reverse; }
.st-story[data-side="right"] .st-attrib{ justify-content:flex-end; }
/* varied card weight so the column never marches */
.st-story[data-size="wide"] .st-photo{ max-width:none; }
.st-story[data-size="tall"] .st-photo{ max-width:340px; }
.st-story[data-side="right"][data-size="tall"] .st-photo{ margin-left:auto; }
/* ---------- node on the line ---------- */
.st-node{
grid-column:2; justify-self:center; position:relative;
width:22px; height:22px; border-radius:50%;
background:var(--s-navy); border:2px solid rgba(255,255,255,0.16);
display:flex; align-items:center; justify-content:center;
transition:border-color .5s ease, box-shadow .5s ease, transform .5s var(--s-ease);
}
.st-node::after{
content:''; width:7px; height:7px; border-radius:50%;
background:rgba(255,255,255,0.2); transition:background .5s ease, box-shadow .5s ease;
}
.st-story.is-in .st-node{
border-color:var(--s-blue); transform:scale(1.12);
box-shadow:0 0 0 5px rgba(74,158,255,0.12), 0 0 22px rgba(74,158,255,0.45);
}
.st-story.is-in .st-node::after{ background:var(--s-blue-hot); box-shadow:0 0 10px var(--s-blue); }
/* a knight keeping watch beside the occasional node */
.st-knight{
position:absolute; left:50%; top:-40px; transform:translateX(-50%);
width:26px; opacity:0; transition:opacity .6s ease .35s;
}
.st-story.is-in .st-knight{ opacity:0.5; }
.st-knight svg{ width:100%; height:auto; fill:var(--s-blue); }
/* ---------- the photograph ---------- */
.st-photo{
position:relative; display:block; margin:0;
transform:rotate(var(--tilt, -2deg)) translateY(28px);
opacity:0;
transition:opacity .7s ease, transform .85s var(--s-ease);
}
.st-story.is-in .st-photo{ opacity:1; transform:rotate(var(--tilt, -2deg)) translateY(0); }
.st-photo img{
width:100%; height:auto; display:block; border-radius:14px;
border:6px solid var(--s-ivory);
box-shadow:0 26px 50px -26px rgba(0,0,0,0.9);
transition:box-shadow .45s ease;
}
/* hover straightens the shot and lifts it */
@media (hover: hover){
.st-story.is-in .st-photo:hover{ transform:rotate(0deg) translateY(-6px); }
.st-photo:hover img{ box-shadow:0 38px 70px -28px rgba(0,0,0,0.95), 0 0 0 1px rgba(74,158,255,0.3); }
}
.st-cap{
margin-top:1rem; font-size:0.76rem; letter-spacing:0.04em; color:var(--s-body);
display:flex; align-items:center; gap:0.5rem;
}
.st-story[data-side="right"] .st-cap{ justify-content:flex-start; }
.st-cap::before{ content:''; width:14px; height:1px; background:var(--s-blue); opacity:0.7; flex-shrink:0; }
/* a sticker slapped on the corner of the frame */
.st-sticker{
position:absolute; top:-16px; right:-18px; z-index:2;
padding:0.5rem 0.9rem; border-radius:999px;
font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
color:#0a1024; background:var(--s-gold);
box-shadow:0 8px 20px -8px rgba(0,0,0,0.7);
transform:rotate(7deg) scale(0.6); opacity:0;
transition:opacity .4s ease .5s, transform .6s cubic-bezier(0.34,1.56,0.64,1) .5s;
}
.st-story.is-in .st-sticker{ opacity:1; transform:rotate(7deg) scale(1); }
.st-sticker.is-blue{ background:var(--s-blue); color:#04101f; }
.st-story[data-side="right"] .st-sticker{ right:auto; left:-18px; transform:rotate(-7deg) scale(0.6); }
.st-story[data-side="right"].is-in .st-sticker{ transform:rotate(-7deg) scale(1); }
/* ---------- the words ---------- */
.st-text > *{
opacity:0; transform:translateY(16px);
transition:opacity .6s ease, transform .7s var(--s-ease);
}
.st-story.is-in .st-text > *{ opacity:1; transform:translateY(0); }
.st-story.is-in .st-text > *:nth-child(1){ transition-delay:.26s; }
.st-story.is-in .st-text > *:nth-child(2){ transition-delay:.36s; }
.st-story.is-in .st-text > *:nth-child(3){ transition-delay:.46s; }
.st-story.is-in .st-text > *:nth-child(4){ transition-delay:.56s; }
.st-story.is-in .st-text > *:nth-child(5){ transition-delay:.66s; }
.st-step{
font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
color:var(--s-blue); margin-bottom:0.9rem;
}
.st-h{
font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.015em;
font-size:clamp(1.4rem, 2.4vw, 2rem); line-height:1.18; color:var(--s-ivory); margin:0;
}
.st-quote{
margin-top:1.3rem; font-size:1.02rem; line-height:1.7; color:var(--s-ink);
padding-left:1.1rem; border-left:2px solid rgba(74,158,255,0.45);
}
.st-story[data-side="right"] .st-quote{
padding-left:0; padding-right:1.1rem;
border-left:none; border-right:2px solid rgba(74,158,255,0.45);
}
.st-attrib{
margin-top:0.9rem; display:flex; align-items:center; gap:0.55rem;
font-size:0.85rem; color:var(--s-body);
}
.st-attrib b{ color:var(--s-ink); font-weight:500; }
.st-badge{
margin-top:1.6rem; display:inline-flex; align-items:center; gap:0.85rem;
padding:0.85rem 1.2rem; border-radius:10px;
background:linear-gradient(120deg, rgba(74,158,255,0.12), rgba(74,158,255,0.03));
border:1px solid rgba(74,158,255,0.3);
}
.st-badge svg{ width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--s-blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.st-badge-t{ font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--s-blue); display:block; }
.st-badge-v{ font-size:0.95rem; color:var(--s-ivory); display:block; margin-top:0.2rem; }
.st-note{ margin-top:0.9rem; font-size:0.88rem; line-height:1.65; color:var(--s-body); max-width:42ch; }
.st-story[data-side="right"] .st-note{ margin-left:auto; }
/* ---------- the oversized testimonial between stories ---------- */
.st-pull{
position:relative; margin:0 0 7rem; padding:4rem 3rem; text-align:center;
opacity:0; transform:translateY(20px);
transition:opacity .7s ease, transform .8s var(--s-ease);
}
.st-pull.is-in{ opacity:1; transform:translateY(0); }
.st-pull::before{
content:'\201C'; display:block;
font-family:'Fraunces', serif; font-size:6rem; line-height:0.6;
color:var(--s-blue); opacity:0.35; margin-bottom:1rem;
}
.st-pull q{
font-family:'Fraunces', serif; font-weight:300; font-style:italic; quotes:none;
font-size:clamp(1.5rem, 3.2vw, 2.5rem); line-height:1.3; color:var(--s-ivory);
display:block; max-width:24ch; margin:0 auto;
}
.st-pull-attrib{ margin-top:1.8rem; font-size:0.88rem; color:var(--s-body); }
/* ---------- closing ---------- */
.st-close{ position:relative; text-align:center; padding:1rem 0 6rem; }
.st-crown{
width:78px; height:78px; margin:0 auto 2.6rem; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--s-navy); border:2px solid var(--s-blue);
box-shadow:0 0 0 8px rgba(74,158,255,0.1), 0 0 40px rgba(74,158,255,0.4);
opacity:0; transform:scale(0.7);
transition:opacity .6s ease, transform .8s cubic-bezier(0.34,1.5,0.64,1);
}
.st-close.is-in .st-crown{ opacity:1; transform:scale(1); }
.st-crown svg{ width:38px; height:38px; fill:var(--s-gold); }
.st-close h2{
font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.02em;
font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.12; color:var(--s-ivory);
margin:0 auto; max-width:18ch;
}
.st-close p{
margin:1.5rem auto 0; max-width:50ch; font-size:1.02rem; line-height:1.7; color:var(--s-body);
}
.st-close h2, .st-close p, .st-cta{
opacity:0; transform:translateY(16px);
transition:opacity .7s ease, transform .8s var(--s-ease);
}
.st-close.is-in h2{ transition-delay:.15s; }
.st-close.is-in p{ transition-delay:.28s; }
.st-close.is-in .st-cta{ transition-delay:.4s; }
.st-close.is-in h2, .st-close.is-in p, .st-close.is-in .st-cta{ opacity:1; transform:translateY(0); }
.st-cta{ margin-top:2.6rem; display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; }
.st-btn{
display:inline-flex; align-items:center; gap:0.6rem;
padding:1rem 2.1rem; border-radius:6px; text-decoration:none;
font-size:0.95rem; font-weight:500;
transition:transform .3s var(--s-ease), box-shadow .35s ease, background .3s ease, border-color .3s ease;
}
.st-btn-primary{
color:#04101f; background:linear-gradient(135deg, var(--s-blue-hot), var(--s-blue));
box-shadow:0 0 26px -6px rgba(74,158,255,0.6);
}
.st-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 42px -4px rgba(74,158,255,0.8); }
.st-btn-ghost{ color:var(--s-ink); border:1px solid rgba(255,255,255,0.22); }
.st-btn-ghost:hover{ border-color:var(--s-blue); background:rgba(74,158,255,0.08); transform:translateY(-2px); }
/* ---------- tablet ---------- */
@media (max-width:1000px){
.st-story{ grid-template-columns:1fr 72px 1fr; margin-bottom:5rem; }
.st-photo-cell{ padding-right:2rem; }
.st-text-cell{ padding-left:2rem; }
.st-story[data-side="right"] .st-photo-cell{ padding-left:2rem; }
.st-story[data-side="right"] .st-text-cell{ padding-right:2rem; }
.st-pull{ padding:3rem 1.5rem; margin-bottom:5rem; }
}
/* ---------- mobile: line to the left, everything in reading order ---------- */
@media (max-width:760px){
.st-open{ padding:5rem 0 3rem; }
.st-scrap{ display:none; }
.st-timeline{ padding-left:2.6rem; }
.st-story{
display:block; margin-bottom:3.6rem;
}
.st-photo-cell, .st-text-cell,
.st-story[data-side="right"] .st-photo-cell,
.st-story[data-side="right"] .st-text-cell{
grid-column:auto; padding:0; text-align:left;
}
.st-text-cell{ margin-top:1.8rem; }
.st-story[data-size="tall"] .st-photo,
.st-story[data-side="right"][data-size="tall"] .st-photo{ max-width:none; margin-left:0; }
.st-node{
position:absolute; left:-2.6rem; top:0.5rem;
transform:translateX(-50%);
}
.st-story.is-in .st-node{ transform:translateX(-50%) scale(1.12); }
.st-knight{ display:none; }
.st-story[data-side="right"] .st-quote{
padding-left:1.1rem; padding-right:0;
border-left:2px solid rgba(74,158,255,0.45); border-right:none;
}
.st-story[data-side="right"] .st-attrib,
.st-story[data-side="right"] .st-badge{ flex-direction:row; justify-content:flex-start; }
.st-story[data-side="right"] .st-note{ margin-left:0; }
.st-story[data-side="right"] .st-sticker{ left:auto; right:-10px; transform:rotate(7deg) scale(0.6); }
.st-story[data-side="right"].is-in .st-sticker{ transform:rotate(7deg) scale(1); }
.st-sticker{ right:-10px; top:-14px; }
.st-pull{ margin-bottom:3.6rem; padding:2.4rem 0; text-align:left; }
.st-pull q{ margin:0; max-width:none; }
.st-close{ padding-bottom:4rem; }
.st-cta{ flex-direction:column; align-items:stretch; }
.st-btn{ justify-content:center; }
}
/* ---------- reduced motion: whole line drawn, cards static ---------- */
@media (prefers-reduced-motion: reduce){
.st-label, .st-lede, .st-snap, .st-photo, .st-text > *,
.st-pull, .st-sticker, .st-knight, .st-crown,
.st-close h2, .st-close p, .st-cta{
opacity:1 !important; transform:none !important; transition:none !important;
}
.st-snap{ transform:rotate(var(--r)) !important; }
.st-photo{ transform:rotate(var(--tilt, -2deg)) !important; }
.st-sticker{ transform:rotate(7deg) !important; }
.st-title .rv-in{ transform:none !important; transition:none !important; }
.st-leadin path, .st-track .st-draw{ stroke-dashoffset:0 !important; transition:none !important; }
.st-node{ transition:none; }
}
/* ================= THE PUZZLE LAB ================= */
.lab{
--p-panel:#0e1524;
--p-panel-2:#111a2d;
--p-ink:#eef3fb;
--p-body:#93a3c0;
--p-line:rgba(255,255,255,0.08);
--p-teal:#3fd0c9;
--p-blue:#4a9eff;
--p-gold:#e8b964;
--p-ease:cubic-bezier(0.22, 1, 0.36, 1);
position:relative;
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(63,208,201,0.09), transparent 64%),
linear-gradient(180deg, #0a1020 0%, #07090f 70%);
}
.lab-head{ text-align:center; max-width:46rem; margin:0 auto 3.6rem; }
.lab-eyebrow{
display:flex; align-items:center; justify-content:center; gap:0.8rem;
font-size:0.7rem; letter-spacing:0.26em; text-transform:uppercase;
color:var(--p-teal); margin-bottom:1.4rem;
}
.lab-eyebrow::before, .lab-eyebrow::after{ content:''; width:26px; height:1px; background:var(--p-teal); opacity:0.6; }
.lab-head h1{
font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.02em;
font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.06; color:var(--p-ink); margin:0;
}
.lab-head h1 em{
font-style:normal;
background:linear-gradient(100deg, var(--p-teal), #7de3dd 45%, var(--p-blue));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lab-head p{ margin:1.3rem auto 0; max-width:52ch; font-size:1.02rem; line-height:1.7; color:var(--p-body); }
/* ---- the two feature cards ---- */
.lab-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:3.4rem; }
.lab-card{
position:relative; overflow:hidden;
padding:2.2rem; border-radius:14px;
background:linear-gradient(160deg, var(--p-panel-2), var(--p-panel));
border:1px solid var(--p-line);
transition:border-color .35s ease, transform .35s var(--p-ease), box-shadow .35s ease;
}
.lab-card:hover{ transform:translateY(-3px); border-color:rgba(63,208,201,0.34); box-shadow:0 30px 60px -34px rgba(0,0,0,0.9); }
.lab-card-ico{ font-size:2rem; line-height:1; display:block; margin-bottom:1rem; }
.lab-tag{
position:absolute; top:1.6rem; right:1.6rem;
display:inline-flex; align-items:center; gap:0.4rem;
padding:0.4rem 0.85rem; border-radius:999px;
font-size:0.64rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
background:rgba(63,208,201,0.14); border:1px solid rgba(63,208,201,0.4); color:var(--p-teal);
}
.lab-tag.is-live{ background:rgba(232,185,100,0.14); border-color:rgba(232,185,100,0.45); color:var(--p-gold); }
.lab-card h2{
font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.015em;
font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.08; margin:0;
color:var(--p-teal);
}
.lab-card > p{ margin-top:1rem; font-size:0.95rem; line-height:1.68; color:var(--p-body); max-width:40ch; }
.lab-card > p b{ color:var(--p-ink); font-weight:600; }
.lab-chips{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1.4rem; }
.lab-chip{
display:inline-flex; align-items:center; gap:0.45rem;
padding:0.5rem 0.95rem; border-radius:999px;
font-size:0.8rem; color:var(--p-teal);
border:1px solid rgba(63,208,201,0.3); background:rgba(63,208,201,0.06);
}
.lab-go{
display:flex; align-items:center; justify-content:center; gap:0.6rem;
width:100%; margin-top:2rem; padding:1.05rem 1.5rem;
border:none; border-radius:9px; cursor:pointer; text-decoration:none;
font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:600;
color:#041a19; background:linear-gradient(135deg, #5fe0d8, var(--p-teal));
box-shadow:0 0 26px -8px rgba(63,208,201,0.7);
transition:transform .3s var(--p-ease), box-shadow .35s ease;
}
.lab-go:hover{ transform:translateY(-2px); box-shadow:0 0 40px -6px rgba(63,208,201,0.9); }
.lab-go span{ transition:transform .3s var(--p-ease); }
.lab-go:hover span{ transform:translateX(4px); }
/* ---- the dashboard strip ---- */
.lab-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; margin-bottom:3rem; }
.lab-stat{
padding:1.4rem 1.5rem; border-radius:11px;
background:var(--p-panel); border:1px solid var(--p-line);
}
.lab-stat b{
display:block; font-family:'Fraunces', serif; font-weight:600;
font-size:1.9rem; line-height:1; color:var(--p-ink); font-variant-numeric:tabular-nums;
}
.lab-stat span{ display:block; margin-top:0.5rem; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--p-body); }
.lab-stat-note{ grid-column:1 / -1; margin-top:-0.4rem; font-size:0.78rem; color:var(--p-body); }
/* ---- modes ---- */
.lab-modes{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.pz-mode{
padding:0.68rem 1.25rem; border-radius:999px; cursor:pointer;
font-family:'Space Grotesk', sans-serif; font-size:0.88rem;
background:transparent; color:var(--p-body);
border:1px solid var(--p-line);
transition:color .3s, border-color .3s, background .3s;
}
.pz-mode:hover{ color:var(--p-ink); border-color:rgba(63,208,201,0.4); }
.pz-mode.is-on{ color:#041a19; background:var(--p-teal); border-color:var(--p-teal); font-weight:600; }
.lab-filters{ display:flex; gap:0.55rem; flex-wrap:wrap; margin-bottom:2rem; }
.pz-chip{
padding:0.45rem 0.9rem; border-radius:999px; cursor:pointer;
font-family:'Space Grotesk', sans-serif; font-size:0.78rem;
background:transparent; color:var(--p-body); border:1px solid var(--p-line);
transition:color .3s, border-color .3s, background .3s;
}
.pz-chip:hover{ color:var(--p-ink); }
.pz-chip.is-on{ color:var(--p-teal); border-color:var(--p-teal); background:rgba(63,208,201,0.1); }
/* ---- the solving area ---- */
.lab-solve{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr); gap:2.4rem; align-items:start; }
.pz-board{
display:grid; grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 1fr); aspect-ratio:1/1;
width:100%; border-radius:10px; overflow:hidden;
border:1px solid rgba(255,255,255,0.12);
box-shadow:0 30px 60px -32px rgba(0,0,0,0.9);
}
.pz-board.is-wrong{ animation:pzShake .42s ease; }
@keyframes pzShake{
0%,100%{ transform:translateX(0); }
20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); }
60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); }
}
.pz-sq{
position:relative; border:none; padding:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:clamp(1.5rem, 4.4vw, 2.9rem); line-height:1;
transition:background .2s ease;
}
.pz-sq.is-light{ background:#d9e3f0; }
.pz-sq.is-dark{ background:#5a7291; }
.pz-sq.is-w{ color:#fbfdff; text-shadow:0 1px 0 #7d8ba0, 0 -1px 0 #7d8ba0, 1px 0 0 #7d8ba0, -1px 0 0 #7d8ba0, 0 3px 5px rgba(0,0,0,0.4); }
.pz-sq.is-b{ color:#1b2436; text-shadow:0 1px 0 rgba(255,255,255,0.25), 0 3px 5px rgba(0,0,0,0.35); }
.pz-sq.is-sel{ background:rgba(63,208,201,0.55) !important; }
.pz-sq.is-move::after{
content:''; position:absolute; width:26%; height:26%; border-radius:50%;
background:rgba(63,208,201,0.6);
}
.pz-sq.is-take{ box-shadow:inset 0 0 0 4px rgba(232,185,100,0.85); }
.pz-sq:focus-visible{ outline:2px solid var(--p-teal); outline-offset:-2px; z-index:1; }
.pz-side{ display:flex; flex-direction:column; gap:1.2rem; }
.pz-meta{ display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.pz-turn{
display:inline-flex; align-items:center; gap:0.5rem;
padding:0.5rem 1rem; border-radius:999px; font-size:0.84rem; font-weight:500;
}
.pz-turn::before{ content:''; width:11px; height:11px; border-radius:50%; }
.pz-turn.is-w{ background:rgba(255,255,255,0.1); color:var(--p-ink); }
.pz-turn.is-w::before{ background:#fbfdff; }
.pz-turn.is-b{ background:rgba(0,0,0,0.4); color:var(--p-ink); }
.pz-turn.is-b::before{ background:#1b2436; box-shadow:0 0 0 1px rgba(255,255,255,0.4); }
.pz-tag{ font-size:0.78rem; color:var(--p-body); }
.pz-tag b{ color:var(--p-teal); font-weight:500; }
.pz-counter{ margin-left:auto; font-family:'Fraunces', serif; font-size:0.86rem; color:var(--p-body); font-variant-numeric:tabular-nums; }
.pz-status{ min-height:1.6rem; font-size:0.95rem; color:var(--p-body); }
.pz-status.is-ok{ color:var(--p-teal); font-weight:500; }
.pz-status.is-bad{ color:#ff8f8f; }
.pz-idea{
padding:1.1rem 1.3rem; border-radius:10px; font-size:0.92rem; line-height:1.65;
color:var(--p-ink); background:rgba(63,208,201,0.08); border:1px solid rgba(63,208,201,0.26);
}
.pz-controls{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.pz-btn{
flex:1 1 auto; padding:0.72rem 1rem; border-radius:8px; cursor:pointer;
font-family:'Space Grotesk', sans-serif; font-size:0.86rem;
background:transparent; color:var(--p-ink); border:1px solid var(--p-line);
transition:border-color .3s, background .3s, color .3s;
}
.pz-btn:hover{ border-color:var(--p-teal); color:var(--p-teal); background:rgba(63,208,201,0.07); }
.pz-btn.is-key{ background:rgba(63,208,201,0.14); border-color:rgba(63,208,201,0.45); color:var(--p-teal); font-weight:500; }
/* ---- same idea, another position ---- */
.pz-kin-h{ font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--p-body); margin-bottom:0.8rem; }
.pz-kin{
display:block; width:100%; text-align:left; margin-bottom:0.55rem;
padding:0.85rem 1rem; border-radius:9px; cursor:pointer;
background:var(--p-panel); border:1px solid var(--p-line);
transition:border-color .3s, transform .3s var(--p-ease);
}
.pz-kin:hover{ border-color:rgba(63,208,201,0.45); transform:translateX(3px); }
.pz-kin-t{ display:block; font-size:0.92rem; color:var(--p-ink); }
.pz-kin-m{ display:block; margin-top:0.2rem; font-size:0.76rem; color:var(--p-body); }
@media (max-width:1000px){
.lab-cards{ grid-template-columns:1fr; }
.lab-solve{ grid-template-columns:1fr; gap:1.8rem; }
.lab-stats{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
.lab-card{ padding:1.6rem; }
.lab-stat{ padding:1.1rem 1.2rem; }
.lab-stat b{ font-size:1.5rem; }
.pz-counter{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){
.lab-card, .lab-go, .pz-kin, .lab-go span{ transition:none; }
.lab-card:hover, .pz-kin:hover, .lab-go:hover{ transform:none; }
.pz-board.is-wrong{ animation:none; outline:2px solid #ff8f8f; }
}
/* ================= CTA BAND — the closing invitation =================
Eight squares light along a rank like a pawn walking up the board, the
headline rises out of its mask, then the button arrives with a sheen. */
.cta-band{ position:relative; overflow:hidden; }
.cta-band::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(ellipse 52% 62% at 50% 100%, rgba(79,216,255,0.11), transparent 66%);
opacity:0; transition:opacity 1.2s ease;
}
.cta-band.is-in::before{ opacity:1; }
.cta-band > .wrap{ position:relative; z-index:1; }
.cta-steps{
display:flex; justify-content:center; gap:0.42rem; margin-bottom:2.6rem;
}
.cta-steps i{
width:26px; height:6px; border-radius:2px; display:block;
background:rgba(255,255,255,0.09);
transform:scaleX(0.3); opacity:0;
transition:transform .5s var(--ease-lux), opacity .4s ease, background .5s ease;
}
.cta-band.is-in .cta-steps i{ transform:scaleX(1); opacity:1; }
.cta-band.is-in .cta-steps i:nth-child(1){ transition-delay:.05s; }
.cta-band.is-in .cta-steps i:nth-child(2){ transition-delay:.12s; }
.cta-band.is-in .cta-steps i:nth-child(3){ transition-delay:.19s; }
.cta-band.is-in .cta-steps i:nth-child(4){ transition-delay:.26s; }
.cta-band.is-in .cta-steps i:nth-child(5){ transition-delay:.33s; background:rgba(79,216,255,0.35); }
.cta-band.is-in .cta-steps i:nth-child(6){ transition-delay:.40s; background:rgba(79,216,255,0.55); }
.cta-band.is-in .cta-steps i:nth-child(7){ transition-delay:.47s; background:rgba(79,216,255,0.75); }
.cta-band.is-in .cta-steps i:nth-child(8){
transition-delay:.54s; background:var(--cyan);
box-shadow:0 0 16px rgba(79,216,255,0.7);
}
.cta-band h2 .rv-line{ display:block; overflow:hidden; padding-bottom:0.2em; margin-bottom:-0.2em; }
.cta-band h2 .rv-in{ display:block; transform:translateY(112%); transition:transform 1s var(--ease-lux); }
.cta-band.is-in h2 .rv-in{ transform:translateY(0); }
.cta-band.is-in h2 .rv-line:nth-child(2) .rv-in{ transition-delay:.12s; }
.cta-band h2 em{
font-style:normal;
background:linear-gradient(100deg, var(--cyan) 0%, #bfe9ff 45%, var(--gold) 100%);
background-size:240% 100%; background-position:135% 0;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
transition:background-position 1.6s var(--ease-lux) .8s;
}
.cta-band.is-in h2 em{ background-position:0 0; }
.cta-sub{
margin:1.5rem auto 0; max-width:46ch; font-size:1rem; line-height:1.7; color:var(--ink-dim);
opacity:0; transform:translateY(14px);
transition:opacity .7s ease .5s, transform .8s var(--ease-lux) .5s;
}
.cta-band.is-in .cta-sub{ opacity:1; transform:translateY(0); }
.cta-band .btn-primary{
position:relative; overflow:hidden; margin-top:2.6rem;
opacity:0; transform:translateY(16px);
transition:opacity .6s ease .68s, transform .7s var(--ease-lux) .68s,
box-shadow .4s ease, filter .3s ease;
}
.cta-band.is-in .btn-primary{ opacity:1; transform:translateY(0); }
.cta-band.is-in .btn-primary:hover{ transform:translateY(-2px); }
/* the sheen runs once the button has landed, then rests */
.cta-band .btn-primary::after{
content:''; position:absolute; top:-60%; bottom:-60%; width:36%; left:-60%;
background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
transform:skewX(-18deg); pointer-events:none;
}
.cta-band.is-in .btn-primary::after{ animation:ctaSheen 3.8s ease-in-out 1.4s infinite; }
@keyframes ctaSheen{
0%, 68% { left:-60%; }
93%, 100% { left:130%; }
}
@media (max-width:600px){
.cta-steps{ gap:0.3rem; margin-bottom:2rem; }
.cta-steps i{ width:18px; height:5px; }
}
@media (prefers-reduced-motion: reduce){
.cta-band::before{ opacity:1; transition:none; }
.cta-steps i{ opacity:1; transform:none; transition:none; }
.cta-band h2 .rv-in{ transform:none; transition:none; }
.cta-band h2 em{ background-position:0 0; transition:none; }
.cta-sub, .cta-band .btn-primary{ opacity:1; transform:none; transition:none; }
.cta-band .btn-primary::after{ animation:none !important; opacity:0; }
}
/* ---- hero headline: two masked lines, revealed on load ---- */
h1.headline .rv-line{ padding-bottom:0.18em; margin-bottom:-0.18em; }
h1.headline em{
font-style:normal; font-weight:500;
background:linear-gradient(100deg, var(--cyan) 0%, #bfe9ff 44%, var(--gold) 100%);
background-size:240% 100%; background-position:135% 0;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
transition:background-position 1.8s var(--ease-lux) .75s;
}
.text-col.is-in h1.headline em{ background-position:0 0; }
.text-col .kicker, .text-col .sub, .text-col .cta-row{
opacity:0; transform:translateY(14px);
transition:opacity .7s ease, transform .8s var(--ease-lux);
}
.text-col.is-in .kicker{ transition-delay:.05s; }
.text-col.is-in .sub{ transition-delay:.45s; }
.text-col.is-in .cta-row{ transition-delay:.6s; }
.text-col.is-in .kicker,
.text-col.is-in .sub,
.text-col.is-in .cta-row{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
h1.headline .rv-in{ transform:none !important; transition:none; }
h1.headline em{ background-position:0 0; transition:none; }
.text-col .kicker, .text-col .sub, .text-col .cta-row{ opacity:1; transform:none; transition:none; }
}
/* ---- Tactics Rush banner on the Puzzle Lab ---- */
.lab-rush{
display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
padding:1.5rem 1.8rem; margin-bottom:1.6rem; border-radius:12px; text-decoration:none;
background:linear-gradient(120deg, rgba(74,158,255,0.16), rgba(63,208,201,0.06));
border:1px solid rgba(74,158,255,0.34);
transition:transform .3s var(--ease-lux), border-color .3s ease, box-shadow .3s ease;
}
.lab-rush:hover{ transform:translateY(-2px); border-color:rgba(74,158,255,0.7); box-shadow:0 0 34px -12px rgba(74,158,255,0.6); }
.lab-rush-l b{ display:block; font-family:'Fraunces', serif; font-size:1.3rem; color:#eef3fb; }
.lab-rush-l span{ display:block; margin-top:0.35rem; font-size:0.9rem; color:#93a3c0; max-width:54ch; }
.lab-rush-go{
display:inline-flex; align-items:center; gap:0.5rem; flex-shrink:0;
padding:0.75rem 1.4rem; border-radius:8px; font-size:0.9rem; font-weight:500;
color:#04101f; background:linear-gradient(135deg,#7bc2ff,#4a9eff);
}
.lab-rush-go span{ transition:transform .3s var(--ease-lux); }
.lab-rush:hover .lab-rush-go span{ transform:translateX(4px); }
@media (max-width:640px){ .lab-rush-go{ width:100%; justify-content:center; } }
/* ================= CLOSING BAND: THE FACES =================
A slow loop of real students above the invitation. Each circle is a
160px crop from a photograph in assets/students/. */
.cta-faces{
position:relative; margin-bottom:3.4rem;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cta-faces-row{ display:flex; gap:1.1rem; width:max-content; }
.cta-band.is-in .cta-faces-row{ animation:facesDrift 56s linear infinite; }
@keyframes facesDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.cta-face{
width:74px; height:74px; border-radius:50%; flex-shrink:0; overflow:hidden;
border:2px solid rgba(201,166,107,0.55);
box-shadow:0 10px 24px -12px rgba(0,0,0,0.9);
opacity:0; transform:scale(0.82);
transition:opacity .6s ease, transform .7s var(--ease-lux), border-color .3s ease;
}
.cta-band.is-in .cta-face{ opacity:1; transform:scale(1); }
.cta-faces-row:first-child .cta-face:nth-child(1){ transition-delay:.05s; }
.cta-faces-row:first-child .cta-face:nth-child(2){ transition-delay:.11s; }
.cta-faces-row:first-child .cta-face:nth-child(3){ transition-delay:.17s; }
.cta-faces-row:first-child .cta-face:nth-child(4){ transition-delay:.23s; }
.cta-faces-row:first-child .cta-face:nth-child(5){ transition-delay:.29s; }
.cta-faces-row:first-child .cta-face:nth-child(6){ transition-delay:.35s; }
.cta-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.cta-face:hover{ border-color:var(--cyan); }
.cta-script{
font-family:'Fraunces', serif; font-style:italic; font-weight:300;
font-size:1.25rem; color:var(--gold); margin-bottom:1rem; opacity:0;
transition:opacity .7s ease .25s;
}
.cta-band.is-in .cta-script{ opacity:1; }
.cta-fine{
margin-top:1.5rem; font-size:0.8rem; color:var(--ink-dim);
opacity:0; transition:opacity .6s ease .85s;
}
.cta-band.is-in .cta-fine{ opacity:1; }
@media (max-width:640px){
.cta-face{ width:56px; height:56px; }
.cta-faces{ margin-bottom:2.4rem; }
.cta-script{ font-size:1.1rem; }
}
@media (prefers-reduced-motion: reduce){
.cta-band.is-in .cta-faces-row{ animation:none; }
.cta-face, .cta-script, .cta-fine{ opacity:1 !important; transform:none !important; transition:none; }
}
/* ================= FOOTER ================= */
footer{ position:relative; }
.ft-feature{
display:grid; grid-template-columns:auto 1fr; gap:2.2rem; align-items:center;
padding:0 0 3.2rem; margin-bottom:3.2rem; border-bottom:1px solid var(--line);
}
.ft-shot{ margin:0; width:340px; max-width:100%; }
.ft-shot img{
width:100%; height:auto; display:block; border-radius:8px;
border:1px solid rgba(201,166,107,0.3);
box-shadow:0 22px 44px -26px rgba(0,0,0,0.9);
}
.ft-shot figcaption{ margin-top:0.7rem; font-size:0.72rem; color:var(--ink-dim); }
.ft-kicker{
display:flex; align-items:center; gap:0.6rem;
font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
color:var(--gold); margin-bottom:1rem;
}
.ft-kicker::before{ content:''; width:22px; height:1px; background:var(--gold); opacity:0.7; }
.ft-feature h3{
font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.012em;
font-size:clamp(1.3rem, 2.3vw, 1.9rem); line-height:1.2; color:var(--ink); margin:0; max-width:22ch;
}
.ft-feature h3 em{ font-style:normal; color:var(--gold); }
.ft-feature p{ margin-top:0.9rem; font-size:0.92rem; line-height:1.7; color:var(--ink-dim); max-width:46ch; }
.ft-link{
display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.2rem;
font-size:0.88rem; color:var(--ink); text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:0.3rem;
transition:color .3s, border-color .3s;
}
.ft-link:hover{ color:var(--cyan); border-color:var(--cyan); }
.ft-link span{ transition:transform .3s var(--ease-lux); }
.ft-link:hover span{ transform:translateX(4px); }
.footer-col h5{ letter-spacing:0.14em; text-transform:uppercase; font-size:0.68rem; color:var(--gold); }
.footer-col a{ font-size:0.88rem; opacity:0.78; }
.footer-bottom{ align-items:center; }
.ft-mark{ display:flex; align-items:center; gap:0.6rem; }
.ft-mark::before{
content:''; width:8px; height:8px; border-radius:1px; background:var(--gold);
transform:rotate(45deg); flex-shrink:0;
}
@media (max-width:860px){
.ft-feature{ grid-template-columns:1fr; gap:1.6rem; }
.ft-shot{ width:100%; max-width:420px; }
}
/* ---- values strip (About, now inside Coaches) ----
These classes were in the markup from the start but never had any CSS,
so the four values rendered as a plain run of text. */
.steps-strip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; }
.step-item{
padding:1.9rem 1.6rem; border-radius:6px;
background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%);
border:1px solid var(--line);
transition:border-color .35s ease, transform .35s var(--ease-lux);
}
.step-item:hover{ border-color:rgba(201,166,107,0.35); transform:translateY(-3px); }
.step-num{ font-family:'Fraunces', serif; font-size:0.95rem; color:var(--gold); }
.step-item h4{
margin-top:1rem; font-family:'Fraunces', serif; font-weight:500;
font-size:1.12rem; line-height:1.25; color:var(--ink);
}
.step-item p{ margin-top:0.7rem; font-size:0.9rem; line-height:1.7; color:var(--ink-dim); }
@media (max-width:1000px){ .steps-strip{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .steps-strip{ grid-template-columns:1fr; } }
/* ---- verified team result, on the stories page ---- */
.st-result{
display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
gap:3rem; align-items:center;
margin:2rem 0 5rem; padding:2.6rem;
border-radius:14px;
background:linear-gradient(120deg, rgba(74,158,255,0.08), rgba(232,185,100,0.04));
border:1px solid rgba(74,158,255,0.24);
opacity:0; transform:translateY(18px);
transition:opacity .7s ease, transform .8s var(--s-ease, cubic-bezier(0.22,1,0.36,1));
}
.st-result.is-in{ opacity:1; transform:translateY(0); }
.st-result-shot{ margin:0; transform:rotate(-1.6deg); transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
.st-result-shot img{
width:100%; height:auto; display:block; border-radius:12px;
border:6px solid #f5efe2;
box-shadow:0 26px 50px -26px rgba(0,0,0,0.9);
}
@media (hover: hover){ .st-result:hover .st-result-shot{ transform:rotate(0deg) translateY(-4px); } }
.st-result-note{ margin-top:1rem; font-size:0.95rem; line-height:1.72; color:#9fb0cc; max-width:46ch; }
/* both are inline-flex by default, so they sat on one line */
.st-result .st-badge{ margin-top:1.4rem; display:flex; width:fit-content; }
.st-result .link-cta{ margin-top:1.4rem; display:inline-flex; }
@media (max-width:860px){
.st-result{ grid-template-columns:1fr; gap:1.8rem; padding:1.6rem; margin-bottom:3.6rem; }
.st-result-shot{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
.st-result{ opacity:1; transform:none; transition:none; }
.st-result-shot{ transform:rotate(-1.6deg) !important; transition:none; }
}
/* ---- a student with two photographs: they trade places ----
Both sit in the same grid cell; the live one is opaque and square-on,
the other waits slightly scaled and rotated behind it. */
.st-swap{ position:relative; display:grid; }
.st-swap img{
grid-area:1 / 1; width:100%; height:auto; display:block; border-radius:14px;
border:6px solid var(--s-ivory, #f5efe2);
box-shadow:0 26px 50px -26px rgba(0,0,0,0.9);
opacity:0; transform:scale(0.965) rotate(1.2deg);
transition:opacity .75s ease, transform .9s cubic-bezier(0.22,1,0.36,1);
}
.st-swap img.is-live{ opacity:1; transform:scale(1) rotate(0deg); }
.st-swap-dots{
position:absolute; left:50%; bottom:-1.9rem; transform:translateX(-50%);
display:flex; gap:0.45rem; z-index:2;
}
.st-swap-dot{
width:24px; height:3px; border-radius:2px; padding:0; cursor:pointer;
background:rgba(255,255,255,0.22); border:none;
transition:background .35s ease, width .35s ease;
}
.st-swap-dot.is-on{ width:34px; background:var(--s-blue, #4a9eff); }
.st-swap-dot:hover{ background:rgba(255,255,255,0.45); }
.st-story[data-side="right"] .st-swap-dots{ left:50%; }
.st-caps{ position:relative; min-height:1.3rem; margin-top:2.4rem; }
.st-caps .st-cap{
position:absolute; inset:0; margin-top:0;
opacity:0; transition:opacity .5s ease;
}
.st-caps .st-cap.is-live{ opacity:1; }
/* the result list for a student with several placings */
.st-results{ list-style:none; margin:1.4rem 0 0; padding:0; }
.st-results li{
display:flex; align-items:flex-start; gap:0.8rem;
padding:0.55rem 0; border-top:1px solid rgba(255,255,255,0.07);
font-size:0.9rem; line-height:1.5; color:var(--s-ink, #eaf0fa);
}
.st-results li:first-child{ border-top:none; }
.st-results b{
flex-shrink:0; min-width:3.6rem; font-family:'Fraunces', serif; font-weight:500;
color:var(--s-blue, #4a9eff);
}
.st-results span{ color:var(--s-body, #9fb0cc); }
.st-story[data-side="right"] .st-results li{ flex-direction:row-reverse; text-align:right; }
@media (max-width:760px){
.st-story[data-side="right"] .st-results li{ flex-direction:row; text-align:left; }
.st-swap-dots{ bottom:-1.6rem; }
}
@media (prefers-reduced-motion: reduce){
.st-swap img{ transition:none; }
.st-caps .st-cap{ transition:none; }
}
/* ================= FILM STRIP =================
Two photographs in one fixed, clipped frame. The reel behind them glides
up by exactly one cell, so the outgoing picture leaves as the incoming
one arrives — a continuous vertical strip rather than a crossfade.
The frame itself never moves. */
.film{
--film-ratio:4 / 5;
--film-dwell:5000ms;
--film-glide:1000ms;
--film-ease:cubic-bezier(0.65, 0.02, 0.24, 1); /* soft start, controlled landing */
--film-ivory:#f5efe2;
--film-blue:#4a9eff;
--film-ink:#eaf0fa;
--film-dim:#9fb0cc;
position:relative; width:100%;
}
.film-frame{
position:relative; overflow:hidden;
aspect-ratio:var(--film-ratio); /* reserves the box, so nothing shifts */
border-radius:16px;
border:6px solid var(--film-ivory);
box-shadow:0 30px 60px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05);
background:#0c1424;
opacity:0; transform:translateY(26px);
transition:opacity .9s ease, transform 1.05s var(--film-ease);
}
.film.is-in .film-frame{ opacity:1; transform:translateY(0); }
/* the reel is one cell per photograph, stacked */
.film-reel{
position:absolute; inset:0;
display:flex; flex-direction:column;
height:calc(var(--film-count, 2) * 100%);
transform:translate3d(0, calc(var(--film-at, 0) * -100% / var(--film-count, 2)), 0);
transition:transform var(--film-glide) var(--film-ease);
will-change:transform;
}
.film-reel.is-instant{ transition:none; }
.film-cell{ position:relative; flex:1 1 0; margin:0; overflow:hidden; }
.film-cell img{
width:100%; height:100%; display:block;
object-fit:cover; object-position:var(--focus, 50% 38%);
transform:scale(1.001);
transition:transform var(--film-glide) var(--film-ease);
}
/* a barely-there push in, only on the picture being looked at */
.film.is-playing .film-cell.is-live img{
animation:filmDrift calc(var(--film-dwell) + var(--film-glide)) linear forwards;
}
@keyframes filmDrift{ from{ transform:scale(1.001); } to{ transform:scale(1.03); } }
/* the thin line that fills across the dwell */
.film-rail{
position:absolute; top:14px; right:14px; bottom:14px; width:2px;
border-radius:2px; background:rgba(255,255,255,0.18); overflow:hidden; z-index:2;
}
.film-rail i{
display:block; width:100%; height:100%; border-radius:2px;
background:linear-gradient(180deg, var(--film-blue), #bfe9ff);
transform:scaleY(0); transform-origin:top center;
}
.film.is-playing .film-rail i{
animation:filmFill var(--film-dwell) linear forwards;
}
@keyframes filmFill{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
/* controls sit under the frame, quiet until you want them */
.film-bar{
display:flex; align-items:center; gap:0.9rem;
margin-top:1.1rem; opacity:0; transform:translateY(8px);
transition:opacity .7s ease .35s, transform .7s var(--film-ease) .35s;
}
.film.is-in .film-bar{ opacity:1; transform:translateY(0); }
.film-count{
font-family:'Fraunces', serif; font-size:0.86rem; color:var(--film-dim);
font-variant-numeric:tabular-nums; margin:0; letter-spacing:0.04em;
}
.film-count b{
display:inline-block; color:var(--film-ink); font-weight:500;
transition:transform .35s var(--film-ease), opacity .35s ease;
}
.film-count b.is-turning{ opacity:0; transform:translateY(-6px); }
.film-btn{
width:30px; height:30px; flex-shrink:0; padding:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
border-radius:50%; background:transparent;
border:1px solid rgba(255,255,255,0.16); color:var(--film-dim);
transition:color .3s, border-color .3s, background .3s, transform .3s var(--film-ease);
}
.film-btn:hover{ color:var(--film-ink); border-color:var(--film-blue); background:rgba(74,158,255,0.1); }
.film-btn:active{ transform:scale(0.93); }
.film-btn:focus-visible{ outline:2px solid var(--film-blue); outline-offset:2px; }
.film-btn svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.film-toggle{ margin-left:auto; }
.film-toggle svg.film-pause{ display:block; }
.film-toggle svg.film-play{ display:none; }
.film.is-paused .film-toggle svg.film-pause{ display:none; }
.film.is-paused .film-toggle svg.film-play{ display:block; }
.film.is-paused .film-rail i{ animation-play-state:paused; }
.film.is-paused .film-cell.is-live img{ animation-play-state:paused; }
.film-cap{
position:relative; min-height:1.2rem; margin-top:0.8rem;
font-size:0.76rem; color:var(--film-dim);
}
.film-cap span{
position:absolute; inset:0; display:flex; align-items:center; gap:0.5rem;
opacity:0; transition:opacity .5s ease;
}
.film-cap span::before{ content:''; width:14px; height:1px; background:var(--film-blue); opacity:0.7; flex-shrink:0; }
.film-cap span.is-live{ opacity:1; }
@media (max-width:760px){
.film-frame{ border-width:5px; border-radius:13px; }
.film-bar{ gap:0.7rem; }
.film-btn{ width:34px; height:34px; } /* easier to hit on a phone */
}
@media (prefers-reduced-motion: reduce){
.film-frame{ opacity:1; transform:none; transition:none; }
.film-bar{ opacity:1; transform:none; transition:none; }
.film-reel{ transition:none; }
.film-cell img{ transition:none; animation:none !important; }
.film.is-playing .film-rail i{ animation:none; transform:scaleY(1); }
.film-cap span, .film-count b{ transition:none; }
}
/* ---- achievements card ---- */
.st-card{
margin-top:1.6rem; padding:1.5rem 1.6rem; border-radius:12px;
background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
border:1px solid rgba(255,255,255,0.09);
}
.st-card-h{
display:flex; align-items:center; gap:0.6rem;
font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase;
color:var(--s-body, #9fb0cc); margin:0 0 1.1rem;
}
.st-card-h::before{ content:''; width:16px; height:1px; background:var(--s-blue, #4a9eff); opacity:0.8; }
.st-story[data-side="right"] .st-card-h{ flex-direction:row-reverse; }
.st-wins{ list-style:none; margin:0; padding:0; }
.st-wins li{
display:flex; align-items:baseline; gap:1rem;
padding:0.75rem 0; border-top:1px solid rgba(255,255,255,0.07);
}
.st-wins li:first-child{ border-top:none; padding-top:0; }
.st-wins li:last-child{ padding-bottom:0; }
.st-story[data-side="right"] .st-wins li{ flex-direction:row-reverse; }
.st-rank{
flex-shrink:0; min-width:3.1rem; text-align:center;
padding:0.28rem 0.55rem; border-radius:5px;
font-family:'Fraunces', serif; font-size:0.82rem; font-weight:600; letter-spacing:0.01em;
}
.st-rank.is-1{ color:#241a06; background:linear-gradient(135deg,#f0d493,#d9ab55); }
.st-rank.is-2{ color:#1b2230; background:linear-gradient(135deg,#e6edf6,#b6c4d6); }
.st-rank.is-3{ color:#2a1a10; background:linear-gradient(135deg,#e0b48a,#bf8757); }
.st-win{ display:flex; flex-direction:column; gap:0.22rem; }
.st-win b{
font-family:'Fraunces', serif; font-weight:500; font-size:1rem; line-height:1.3;
color:var(--s-ivory, #f5efe2);
}
.st-win span{ font-size:0.8rem; color:var(--s-body, #9fb0cc); letter-spacing:0.01em; }
@media (max-width:760px){
.st-story[data-side="right"] .st-card-h,
.st-story[data-side="right"] .st-wins li{ flex-direction:row; }
.st-card{ padding:1.2rem 1.3rem; }
}
/* the team result sits inside the timeline list as its own full-width beat */
.st-team{ display:block; margin:0 0 7rem; }
.st-team .st-result{ margin:0; }
@media (max-width:1000px){ .st-team{ margin-bottom:5rem; } }
@media (max-width:760px){ .st-team{ margin-bottom:3.6rem; } }