/* ============================================================
   WINGS — Desire To Fly
   Single-file site. No build step, no framework, no CDN scripts.
   Palette sampled directly from the supplied WINGS logo.
   ============================================================ */
:root{
  --navy:#011348; --navy-2:#0A2260; --ink:#0B1C3F; --muted:#5A6A8C;
  --blue:#0062C0; --blue-deep:#011877; --cyan:#01A8C0; --teal:#04C1B1;
  --magenta:#FA114D; --pink:#D10165; --orange:#FF8A0A; --gold:#FCA800;
  --paper:#FFFFFF; --mist:#F4F7FD; --mist-2:#EEF3FC;
  --line:rgba(1,19,72,.10); --line-2:rgba(1,19,72,.16);
  --g-sky:linear-gradient(118deg,#04C1B1 0%,#01A8C0 30%,#0062C0 100%);
  --g-flame:linear-gradient(118deg,#D10165 0%,#FA114D 45%,#FF8A0A 100%);
  --g-full:linear-gradient(100deg,#04C1B1 0%,#0062C0 30%,#FA114D 66%,#FCA800 100%);
  --g-dawn:linear-gradient(140deg,#FCA800 0%,#FF8A0A 55%,#FA114D 100%);
  --shadow-s:0 2px 8px rgba(1,19,72,.06);
  --shadow-m:0 14px 40px -18px rgba(1,19,72,.30);
  --shadow-l:0 40px 90px -40px rgba(1,19,72,.45);
  --r-s:12px; --r-m:20px; --r-l:28px; --r-xl:36px;
  --nav-h:88px;
  --pad:clamp(20px,5vw,64px);
  /* tightened from 150px: thirteen sections at the old rhythm left long dead
     stretches between blocks. Still airy, just no lakes of white. */
  --sec:clamp(62px,7.4vw,112px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--navy);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(15.5px,.4vw + 14.6px,17px); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
/* Headings INHERIT their colour. body is navy, so they are navy by default; any
   dark section that sets color:#fff gets white headings for free. Hard-coding navy
   here is what made headings invisible on every dark surface. */
h1,h2,h3,h4{margin:0; font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:700; letter-spacing:-.03em; line-height:.98; color:inherit}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:rgba(250,17,77,.16)}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ------------------------------------------------------------------
   Palette bridge. The sections added for the WINGS content were first
   written against a green token set; these aliases point them at the
   theme's own navy / blue / cyan / teal palette so nothing new
   introduces a colour the theme does not already use.
   ------------------------------------------------------------------ */
:root{
  --forest:var(--navy);           /* primary dark surface and display ink */
  --forest-deep:#010C2E;          /* deepest navy, one step below --navy  */
  --pine:var(--blue-deep);
  --moss:var(--blue);             /* working accent: links, icons, focus  */
  --leaf:var(--cyan);
  --lime:var(--teal);             /* highlight                            */
  --sprout:#BDEBE6;               /* pale teal tint                       */
  --alert:#C0392B;                /* functional only: form errors         */
  --paper-pure:#FFFFFF;
  --rule:rgba(1,19,72,.9);
  --maxw-text:68ch;
  --g-deep:linear-gradient(120deg,#011877 0%,#011348 55%,#000A26 100%);
  --g-text:var(--g-full);
}

/* ---------- layout primitives ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap-wide{max-width:1560px}
/* The header is fixed, so anything jumped to by an in-page link needs to clear it
   or it lands underneath. One rule covers every anchor target on the site. */
:root{--hdr-h:88px}
@media (max-width:1100px){ :root{--hdr-h:76px} }
html{scroll-padding-top:calc(var(--hdr-h) + 18px)}
section[id],[id].section,.wrap [id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
.section{padding-block:var(--sec); position:relative}
.section--tight{padding-block:clamp(52px,7vw,96px)}
.mist{background:var(--mist)}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-weight:700;
  /* never below 12px: .72rem rendered at 11.5px, which is under the readable floor
     for uppercase at this letter-spacing */
  font-size:max(12px,.72rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{content:""; width:26px; height:2px; border-radius:2px; background:var(--g-full)}
.eyebrow--light{color:rgba(255,255,255,.72)}
.h1{font-size:clamp(2.9rem,8.4vw,6.6rem)}
.h2{font-size:clamp(2.1rem,5.4vw,4.15rem)}
.h3{font-size:clamp(1.35rem,2.2vw,1.8rem); letter-spacing:-.02em; line-height:1.1}
.lede{font-size:clamp(1.02rem,1.25vw,1.22rem); color:var(--muted); line-height:1.62; max-width:60ch}
.lede--light{color:rgba(255,255,255,.78)}
.head{display:flex; flex-direction:column; gap:18px; max-width:min(880px,100%)}
.head .h2 + .lede{margin-top:2px}
.grad-text{background:var(--g-full); -webkit-background-clip:text; background-clip:text; color:transparent}
/* Belt and braces for the word-splitter: a .word nested inside a gradient phrase
   paints the gradient itself, so the glyphs can never come out invisible. */
.grad-text .word{background:inherit; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}
.grad-flame{background:var(--g-flame); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:15px 26px; border-radius:999px; border:1px solid transparent; background:var(--bg); color:var(--fg);
  font-weight:600; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.btn svg{width:17px; height:17px; transition:transform .4s var(--ease-out)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--g-full); color:#fff; box-shadow:0 12px 30px -12px rgba(250,17,77,.6)}
.btn--primary:hover{box-shadow:0 20px 44px -14px rgba(250,17,77,.66)}
.btn--navy{background:var(--navy); color:#fff}
.btn--navy:hover{background:var(--blue-deep)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--navy); background:rgba(1,19,72,.04)}
.btn--glass{
  background:rgba(255,255,255,.62); color:var(--navy);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), 0 10px 40px rgba(1,19,72,.12);
}
.btn--glass:hover{background:rgba(255,255,255,.82)}
.btn--dark-glass{
  background:rgba(255,255,255,.10); color:#fff;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22), 0 10px 40px rgba(0,0,0,.16);
}
.btn--dark-glass:hover{background:rgba(255,255,255,.18)}
.btn--sm{padding:11px 20px; font-size:.86rem}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy)}
.link-arrow svg{width:16px; height:16px; transition:transform .4s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- navigation ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:90; background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease)}
.nav::after{content:""; position:absolute; inset:0; border-bottom:1px solid transparent; pointer-events:none; transition:border-color .4s var(--ease)}
.nav.is-stuck{background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); box-shadow:0 8px 30px -20px rgba(1,19,72,.5)}
.nav.is-stuck::after{border-bottom-color:var(--line)}
.nav__in{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px,1.6vw,26px)}
.brand{display:flex; align-items:center; gap:12px; padding:6px 0}
.brand img{height:clamp(46px,4.6vw,64px); width:auto; transition:transform .5s var(--ease-out)}
.brand:hover img{transform:scale(1.04)}
.nav__links{display:flex; align-items:center; gap:4px}
.nav__link{
  position:relative; padding:10px clamp(5px,.62vw,11px); border-radius:999px;
  font-size:clamp(.78rem,.74vw,.9rem); font-weight:500; color:var(--navy);
  white-space:nowrap; letter-spacing:-.005em;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:clamp(5px,.62vw,11px); right:clamp(5px,.62vw,11px);
  bottom:6px; height:2px; border-radius:2px; background:var(--g-full);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out);
}
.nav__link:hover{background:rgba(1,19,72,.045)}
.nav__link.is-active::after{transform:scaleX(1)}
.nav__right{display:flex; align-items:center; gap:12px}
.nav__burger{display:none; width:46px; height:46px; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:14px; background:rgba(255,255,255,.7); cursor:pointer}
.nav__burger span{display:block; width:18px; height:2px; background:var(--navy); border-radius:2px; position:relative; transition:transform .35s var(--ease), background .2s}
.nav__burger span::before,.nav__burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--navy); border-radius:2px; transition:transform .35s var(--ease-out), top .25s var(--ease)}
.nav__burger span::before{top:-6px} .nav__burger span::after{top:6px}
body.menu-open .nav__burger span{background:transparent}
body.menu-open .nav__burger span::before{top:0; transform:rotate(45deg)}
body.menu-open .nav__burger span::after{top:0; transform:rotate(-45deg)}

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:80; background:var(--paper); padding-top:calc(var(--nav-h) + 16px);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .4s var(--ease), transform .5s var(--ease-out), visibility .4s;
  overflow-y:auto;
}
.menu::before{content:""; position:absolute; inset:auto -20% -30% -20%; height:60%; background:radial-gradient(60% 60% at 30% 100%,rgba(1,168,192,.18),transparent 70%),radial-gradient(60% 60% at 80% 100%,rgba(250,17,77,.14),transparent 70%); pointer-events:none}
body.menu-open .menu{opacity:1; visibility:visible; transform:none}
.menu__list{display:flex; flex-direction:column; gap:2px; padding:24px var(--pad) 8px; position:relative}
.menu__item{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(2rem,9vw,2.9rem); letter-spacing:-.03em;
  padding:10px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateY(18px);
}
body.menu-open .menu__item{animation:menuIn .55s var(--ease-out) forwards; animation-delay:calc(var(--i) * 55ms + 90ms)}
.menu__item svg{width:22px; height:22px; color:var(--muted)}
.menu__item.is-active{color:var(--magenta)}
@keyframes menuIn{to{opacity:1; transform:none}}
.menu__foot{padding:24px var(--pad) calc(32px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; position:relative}

/* ---------- media slots (photography / video drop-in) ---------- */
.media{position:relative; overflow:hidden; background:var(--mist-2); border-radius:inherit}
.media img,.media video{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out)}
.media--16x9{aspect-ratio:16/9} .media--4x3{aspect-ratio:4/3} .media--1x1{aspect-ratio:1/1}
.media--3x4{aspect-ratio:3/4} .media--4x5{aspect-ratio:4/5} .media--21x9{aspect-ratio:21/9}
.ph{position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; overflow:hidden}
.ph__wash{position:absolute; inset:0}
.ph--a .ph__wash{background:linear-gradient(140deg,#DFF6F5,#CFE4FB)}
.ph--b .ph__wash{background:linear-gradient(140deg,#FDE3EC,#FFE9D2)}
.ph--c .ph__wash{background:linear-gradient(140deg,#E3ECFF,#F6E4F3)}
.ph--d .ph__wash{background:linear-gradient(140deg,#FFF1D6,#DFF3F1)}
.ph__arc{position:absolute; right:-14%; top:-18%; width:78%; opacity:.5; pointer-events:none}
.ph__tag{
  position:relative; display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--navy);
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:7px 12px; border-radius:999px;
}
.ph__tag svg{width:13px; height:13px; opacity:.7}

/* ---------- hero (cinematic video) ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; overflow:clip;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(84px,12vh,140px); background:#02081E; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media video,.hero__media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 18s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* The horizontal pass used to clear to fully transparent at 72%, which left the right
   end of the headline sitting on bare footage — white-on-white on a bright frame. It now
   keeps a floor right across the width, so the copy holds AA over any frame the video
   lands on, while the scrim still reads as the same left-weighted wash. */
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(180deg,rgba(1,10,36,.55) 0%,rgba(1,10,36,.26) 34%,rgba(1,12,40,.66) 78%,rgba(1,12,40,.92) 100%),
  linear-gradient(94deg,rgba(1,12,40,.76) 0%,rgba(1,12,40,.40) 46%,rgba(1,12,40,.26) 78%,rgba(1,12,40,.24) 100%)}
.hero__tint{position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:soft-light; opacity:.65;
  background:radial-gradient(60% 60% at 12% 78%,rgba(1,168,192,.7),transparent 68%),radial-gradient(55% 55% at 88% 22%,rgba(250,17,77,.55),transparent 70%)}
.hero__grain{position:absolute; inset:0; z-index:1; opacity:.28; background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px); background-size:3px 3px}
.hero__in{position:relative; z-index:3; width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,1.8vw,22px)}
.hero__title{color:#fff; font-size:clamp(2.9rem,8.6vw,7.2rem); letter-spacing:-.045em; line-height:.92; max-width:15ch;
  text-shadow:0 18px 60px rgba(0,0,0,.4)}
.hero__title em{font-style:normal; background:linear-gradient(100deg,#7BE7DE,#7FB6FF 34%,#FF6E9C 68%,#FFC65A); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.34rem); color:rgba(255,255,255,.88); max-width:46ch; font-weight:450}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.hero__meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.hero__meta span{display:inline-flex; align-items:center; gap:18px}
.hero__meta span::after{content:"\2022"; color:var(--gold)}
.hero__meta span:last-child::after{display:none}
.hero__scroll{position:absolute; left:var(--pad); bottom:26px; z-index:3; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.78); font-size:max(12px,.68rem); letter-spacing:.2em; text-transform:uppercase; font-weight:600}
/* The scroll cue is a pair of wings around a down arrow, drifting gently. */
.hero__wing{display:grid; place-items:center; width:34px; height:24px; color:rgba(255,255,255,.78)}
.hero__wing svg{width:34px; height:24px; animation:wingDrift 2.6s var(--ease) infinite}
@keyframes wingDrift{0%,100%{transform:translateY(0); opacity:.8}50%{transform:translateY(5px); opacity:1}}
@keyframes mouseDot{0%{opacity:0; transform:translate(-50%,-4px)}30%{opacity:1}70%{opacity:1; transform:translate(-50%,10px)}100%{opacity:0; transform:translate(-50%,14px)}}
.hero__sound{position:absolute; right:var(--pad); bottom:28px; z-index:4}
.float-cta{
  position:absolute; right:var(--pad); bottom:clamp(96px,14vh,150px); z-index:4;
  display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:999px; font-weight:600; font-size:.9rem; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 16px 44px rgba(0,0,0,.28);
  animation:bob 4.2s var(--ease) infinite; cursor:pointer;
}
.float-cta__dot{width:8px; height:8px; border-radius:50%; background:var(--g-flame); box-shadow:0 0 0 4px rgba(250,17,77,.22)}
.float-cta svg{width:16px; height:16px; transition:transform .4s var(--ease-out)}
.float-cta:hover svg{transform:translateX(5px)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* hero entrance */
.rise{opacity:0; filter:blur(18px); transform:translateY(35px); animation:rise .95s var(--ease-out) forwards; animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1; filter:blur(0); transform:none}}

/* ---------- scroll reveal ---------- */
.rv{opacity:0; filter:blur(14px); transform:translateY(28px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; filter:blur(0); transform:none}

/* ---------- experience / stat-free feature rows ---------- */
.exp{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center}
.exp__points{display:flex; flex-direction:column; gap:2px; margin-top:26px}
.exp__point{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line)}
.exp__point:last-child{border-bottom:1px solid var(--line)}
.exp__ico{flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff}
.exp__ico svg{width:19px; height:19px}
.exp__ico--1{background:var(--g-sky)} .exp__ico--2{background:var(--g-flame)} .exp__ico--3{background:var(--g-dawn)}
.exp__point h3{margin:0 0 3px; font-family:'Inter',sans-serif; font-size:1.02rem; font-weight:700; letter-spacing:-.01em}
.exp__point p{color:var(--muted); font-size:.94rem}
.exp__art{position:relative}
.exp__art .media{border-radius:var(--r-xl); box-shadow:var(--shadow-l)}
.exp__art .media--sm{position:absolute; right:-6%; bottom:-10%; width:46%; border-radius:var(--r-l); border:8px solid #fff; box-shadow:var(--shadow-m)}

/* ---------- program cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); margin-top:clamp(32px,4vw,56px)}
.card{
  position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden; cursor:pointer;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease), border-color .4s var(--ease);
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--g-full); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out); z-index:2}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-l); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card:hover .media img,.card:hover .media video{transform:scale(1.06)}
.card .media{border-radius:0}
.card__body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
.card__chip{align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); background:rgba(0,98,192,.08); padding:6px 11px; border-radius:999px}
.card h3{font-family:'Inter',sans-serif; font-size:1.22rem; font-weight:700; letter-spacing:-.02em}
.card p{color:var(--muted); font-size:.94rem; flex:1}
.card__go{display:inline-flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color:var(--navy); margin-top:4px}
.card__go svg{width:15px; height:15px; transition:transform .4s var(--ease-out)}
.card:hover .card__go svg{transform:translateX(6px)}
.card__go span{background:var(--g-full); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- editorial rail (not just classes) ---------- */
.rail{margin-top:clamp(30px,4vw,50px); position:relative}
.rail__track{
  display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--pad); padding-block:8px 28px; width:100%;
  scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track.is-drag{cursor:grabbing; scroll-snap-type:none}
.rail__card{
  position:relative; flex:0 0 clamp(240px,30vw,360px); scroll-snap-align:center; border-radius:var(--r-l); overflow:hidden;
  background:var(--navy); box-shadow:var(--shadow-m); transition:transform .55s var(--ease-out);
}
.rail__card:nth-child(even){margin-top:clamp(18px,3vw,44px)}
.rail__card:hover{transform:translateY(-6px)}
.rail__card:hover .media img{transform:scale(1.06)}
.rail__card .media{border-radius:0}
.rail__cap{position:absolute; inset:auto 0 0 0; padding:20px; color:#fff; background:linear-gradient(180deg,transparent,rgba(1,19,72,.82)); display:flex; flex-direction:column; gap:5px}
.rail__cap h3{color:#fff; font-family:'Inter',sans-serif; font-size:1.08rem; font-weight:700; letter-spacing:-.01em}
.rail__cap p{font-size:.86rem; color:rgba(255,255,255,.76)}
.rail__nav{display:flex; gap:10px; justify-content:flex-end; padding-inline:var(--pad); max-width:var(--maxw); margin:0 auto}
.rail__btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; cursor:pointer; transition:background .3s,border-color .3s,transform .3s var(--ease-out)}
.rail__btn:hover{background:var(--navy); border-color:var(--navy); color:#fff; transform:translateY(-2px)}
.rail__btn svg{width:18px; height:18px}
.rail__btn[disabled]{opacity:.35; pointer-events:none}

/* ---------- events ---------- */
.events{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(16px,1.8vw,24px); margin-top:clamp(30px,4vw,52px)}
.events__side{display:grid; gap:clamp(16px,1.8vw,24px)}
.ev{position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .55s var(--ease-out), box-shadow .5s var(--ease)}
.ev:hover{transform:translateY(-6px); box-shadow:var(--shadow-l)}
.ev:hover .media img{transform:scale(1.05)}
.ev .media{border-radius:0}
.ev--feature{grid-row:span 2}
.ev--feature .media{height:min(52vh,460px)}
.ev--feature .ev__body{padding:26px 26px 28px}
.ev--feature h3{font-size:clamp(1.5rem,2.5vw,2rem); font-family:'Bricolage Grotesque',sans-serif}
.ev--row{flex-direction:row; align-items:stretch}
.ev--row .media{flex:0 0 40%; height:auto; min-height:170px}
.ev__body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1; justify-content:center}
.ev__date{display:inline-flex; align-items:center; gap:8px; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--magenta)}
.ev__date svg{width:14px; height:14px}
.ev h3{font-family:'Inter',sans-serif; font-size:1.14rem; font-weight:700; letter-spacing:-.02em}
.ev p{color:var(--muted); font-size:.92rem}
.tag-ph{align-self:flex-start; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px dashed var(--line-2); padding:4px 9px; border-radius:999px}

/* ---------- stage / performances ---------- */
.stage{position:relative; overflow:hidden; overflow:clip; background:#02081E; color:#fff; --spot-x:50%; --spot-y:42%}
/* These paint their own surface rather than inheriting one, so they still say white. */
.rail__cap h3,.gal__cap,.lb h2,.lb h3{color:#fff}
.stage__glow{position:absolute; inset:0; background:
  radial-gradient(46% 42% at var(--spot-x) var(--spot-y),rgba(252,168,0,.30),rgba(250,17,77,.14) 48%,transparent 72%),
  radial-gradient(60% 50% at 82% 8%,rgba(0,98,192,.30),transparent 65%);
  opacity:var(--spot-o,.2); transition:opacity 1.1s var(--ease); pointer-events:none}
.stage__beam{position:absolute; top:-12%; left:var(--beam-x,20%); width:26vw; height:130%; pointer-events:none;
  background:linear-gradient(180deg,rgba(252,168,0,.20),rgba(252,168,0,0) 72%);
  filter:blur(22px); transform-origin:top center; transform:rotate(var(--beam-r,10deg)) scaleY(var(--beam-s,.6)); opacity:var(--spot-o,.2);
  transition:transform 1.3s var(--ease), opacity 1.3s var(--ease)}
.stage__in{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.stage__art{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:0 50px 100px -40px rgba(0,0,0,.9); transform:scale(var(--art-s,.94)); transition:transform 1.2s var(--ease-out)}
.stage__art .media{background:#0A1230}
.stage__art::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(2,8,30,.85)}
.stage__list{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; font-size:.84rem; font-weight:600;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.9)}
.pill i{width:6px; height:6px; border-radius:50%; background:var(--gold)}

/* ---------- a day at wings ---------- */
.day{position:relative; background:var(--mist)}
.day__sticky{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.day__head{padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto; width:100%; margin-bottom:clamp(18px,3vw,34px)}
.day__track{display:flex; gap:clamp(16px,2vw,28px); padding-inline:var(--pad); will-change:transform}
.day__panel{flex:0 0 clamp(260px,26vw,380px); position:relative}
.day__panel .media{border-radius:var(--r-l); box-shadow:var(--shadow-m)}
.day__num{position:absolute; top:-14px; left:-6px; font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(3rem,5vw,4.6rem); font-weight:800; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(1,19,72,.18); z-index:2}
.day__cap{padding:16px 4px 0}
.day__cap h3{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.4rem,2.4vw,2rem)}
.day__cap p{color:var(--muted); font-size:.92rem; margin-top:6px}
.day__prog{height:3px; background:var(--line); border-radius:3px; margin:clamp(18px,3vw,30px) auto 0; max-width:calc(var(--maxw) - var(--pad)*2); width:calc(100% - var(--pad)*2)}
.day__prog i{display:block; height:100%; width:var(--p,10%); border-radius:3px; background:var(--g-full); transition:width .12s linear}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(128px,12.5vw,186px); gap:clamp(12px,1.4vw,20px); margin-top:clamp(30px,4vw,52px)}
.gal__item{position:relative; border-radius:var(--r-m); overflow:hidden; cursor:pointer; background:var(--mist-2); border:0; padding:0; text-align:left; display:block; width:100%; height:100%}
.gal .media{aspect-ratio:auto; height:100%}
.gal__item:hover .media img{transform:scale(1.06)}
.gal__item .media{border-radius:0}
.gal__item--big{grid-column:span 2; grid-row:span 2}
.gal__item--wide{grid-column:span 2}
/* Captions are always legible, not hover-only: on a touch screen there is no hover,
   so a hover-only caption is a caption nobody on a phone ever sees. */
/* The caption sits ~30px off the bottom edge, so the scrim has to be dark BEFORE it
   gets there — the old ramp only reached full strength at the very bottom and white
   captions measured 1.3:1 over a pale photograph. */
.gal__shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(1,12,40,.55) 66%,
             rgba(1,12,40,.86) 84%,rgba(1,12,40,.95) 100%);
  opacity:1; transition:opacity .45s var(--ease)}
.gal__cap{position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end;
  justify-content:space-between; gap:10px; padding:14px 15px; color:#fff;
  font-size:.84rem; font-weight:600; line-height:1.3; transform:translateY(0);
  transition:transform .45s var(--ease-out)}
.gal__cap b{font-weight:700; text-shadow:0 1px 3px rgba(1,12,40,.9)}
.gal__cap i{flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:scale(.8); transition:opacity .35s var(--ease), transform .35s var(--ease-out)}
.gal__cap i svg{width:14px; height:14px}

.gal__item:hover .gal__cap i,.gal__item:focus-visible .gal__cap i{opacity:1; transform:scale(1)}
.gal__item:hover .media img{transform:scale(1.07)}
.gal__item .media img{transition:transform .9s var(--ease-out)}
.gal__item--tall{grid-row:span 2}
.gal__item:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}


/* lightbox */
.lb{position:fixed; inset:0; z-index:120; background:rgba(2,8,30,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:grid; place-items:center; padding:clamp(16px,4vw,48px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s}
.lb.is-open{opacity:1; visibility:visible}
.lb__box{width:min(1000px,100%); border-radius:var(--r-l); overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.6); transform:scale(.97); transition:transform .45s var(--ease-out)}
.lb.is-open .lb__box{transform:none}
.lb__cap{background:#fff; padding:16px 20px; font-size:.92rem; font-weight:600; display:flex; justify-content:space-between; gap:16px; align-items:center}
.lb__cap span{color:var(--muted); font-weight:500; font-size:.82rem}
.lb__x,.lb__nav{position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lb__x{top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px)}
.lb__nav svg,.lb__x svg{width:20px; height:20px}
.lb__nav--prev{left:clamp(8px,2vw,26px); top:50%; transform:translateY(-50%)}
.lb__nav--next{right:clamp(8px,2vw,26px); top:50%; transform:translateY(-50%)}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.2)}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); margin-top:clamp(30px,4vw,52px)}
.quote{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:28px 26px; display:flex; flex-direction:column; gap:16px; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease)}
.quote:hover{transform:translateY(-5px); box-shadow:var(--shadow-m)}
.quote__mark{font-family:'Bricolage Grotesque',sans-serif; font-size:3.2rem; line-height:.6; background:var(--g-full); -webkit-background-clip:text; background-clip:text; color:transparent}
.quote p{font-size:1.02rem; color:var(--ink); flex:1}
.quote__by{display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line)}
.quote__av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.9rem; color:#fff; background:var(--g-sky); flex:none}
.quote__av--2{background:var(--g-flame)} .quote__av--3{background:var(--g-dawn)}
.quote__by strong{display:block; font-size:.92rem; font-weight:700}
.quote__by span{font-size:.8rem; color:var(--muted)}

/* ---------- kid voices ---------- */
.voices{background:var(--navy); color:#fff; overflow:hidden; overflow:clip; position:relative}
.voices::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:80%;
  background:radial-gradient(50% 60% at 20% 40%,rgba(1,168,192,.35),transparent 70%),radial-gradient(50% 60% at 78% 30%,rgba(250,17,77,.3),transparent 70%); filter:blur(10px)}
.voices__list{position:relative; display:flex; flex-direction:column; gap:clamp(14px,2.4vw,30px)}
.voice{display:flex; align-items:center; gap:clamp(14px,2vw,28px); font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.9rem); letter-spacing:-.03em; line-height:1.08; color:#fff}
/* Alternating lines mirror to the right — the theme's zig-zag. At the largest sizes
   a long sentence used to wrap and leave a single word stranded at the right margin,
   so the lines now balance their wrap and cap a little below the old 4rem. */
.voice:nth-child(even){justify-content:flex-end; text-align:right}
.voice{text-wrap:balance}
.voice i{flex:none; width:clamp(16px,2.4vw,30px); height:clamp(16px,2.4vw,30px); border-radius:50%; background:var(--g-dawn)}
.voice:nth-child(2) i{background:var(--g-sky)} .voice:nth-child(3) i{background:var(--g-flame)}
.voices__note{position:relative; margin-top:clamp(26px,4vw,44px); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5)}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,5vw,72px); align-items:center}
.about__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px)}
.about__grid .media{border-radius:var(--r-l); box-shadow:var(--shadow-m)}
.about__grid .media:nth-child(odd){transform:translateY(clamp(-28px,-3vw,-14px))}
.values{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.value{padding:9px 15px; border-radius:999px; font-size:.85rem; font-weight:600; border:1px solid var(--line-2); color:var(--navy); background:#fff; transition:transform .4s var(--ease-out), border-color .3s}
.value:hover{transform:translateY(-3px); border-color:var(--magenta)}

/* ---------- big CTA ---------- */








/* ---------- parent-story collection ---------- */
.collect{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3.4vw,52px);
  align-items:center; padding:clamp(26px,3.4vw,44px); border-radius:var(--r-xl);
  background:var(--paper-pure); border:1px solid rgba(1,19,72,.09);
  box-shadow:0 26px 60px -34px rgba(1,19,72,.5); margin-top:clamp(26px,3.4vw,42px)}
.collect__ico{display:grid; place-items:center; width:48px; height:48px; border-radius:15px;
  color:#fff; background:var(--g-dawn); margin-bottom:16px}
.collect__ico svg{width:22px; height:22px}
.collect h3{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem); line-height:1.2}
.collect p{margin-top:12px; color:var(--muted); line-height:1.65; max-width:52ch}
.collect__note{font-size:.88rem; padding-left:14px; border-left:2px solid var(--cyan)}
.collect__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.collect__steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.collect__steps li{display:flex; gap:13px; align-items:flex-start; padding:15px 16px;
  border-radius:var(--r-m); background:var(--mist); border:1px solid rgba(1,19,72,.06)}
.collect__steps b{flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--g-full); color:#fff; font-size:.8rem; font-weight:700}
.collect__steps span{font-size:.94rem; line-height:1.5; color:var(--navy)}
@media (max-width:860px){
  .collect{grid-template-columns:1fr}
  .collect__cta .btn{flex:1 1 100%; justify-content:center}
}

/* ---------- experience detail blocks ---------- */
.xps .head{margin-bottom:clamp(30px,4vw,54px)}
.xp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center;
  padding-block:clamp(30px,4vw,56px); position:relative; scroll-margin-top:calc(var(--hdr-h) + 24px)}
.xp + .xp{border-top:1px solid rgba(1,19,72,.08)}
.xp--flip .xp__media{order:2}
.xp__media{position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 30px 64px -32px rgba(1,19,72,.5)}
.xp__media .media{margin:0; border-radius:inherit}
.xp__media img{transition:transform 1s var(--ease-out)}
.xp:hover .xp__media img{transform:scale(1.04)}
.xp__media::after{content:""; position:absolute; inset:auto 0 0 0; height:40%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(1,12,40,.6))}
.xp__num{position:absolute; z-index:2; left:16px; bottom:10px; font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(3.4rem,7vw,5.6rem); font-weight:800; line-height:.8; letter-spacing:-.05em;
  color:rgba(255,255,255,.9); text-shadow:0 6px 24px rgba(1,12,40,.55); pointer-events:none}
.xp__title{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.5rem); line-height:1.1; margin-top:12px}
.xp__lead{margin-top:12px; font-size:clamp(1.04rem,.98rem + .34vw,1.2rem); font-weight:600;
  color:var(--navy); line-height:1.5}
.xp__body p{margin-top:12px; color:var(--muted); line-height:1.68}
.xp__label{margin-top:20px; font-size:.74rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)}
.xp__tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0}
.xp__tags li{padding:7px 14px; border-radius:999px; font-size:.84rem; font-weight:600;
  color:var(--navy); background:var(--mist); border:1px solid rgba(1,19,72,.08)}
.xp__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
@media (max-width:900px){
  .xp{grid-template-columns:1fr; gap:22px}
  .xp--flip .xp__media{order:0}
  .xp__cta .btn{flex:1 1 100%; justify-content:center}
}

/* ---------- experience rail ---------- */
.rail__card{display:block; text-decoration:none; color:inherit; position:relative;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease)}
.rail__card:hover{transform:translateY(-8px)}
.rail__card:focus-visible{outline:3px solid var(--cyan); outline-offset:4px}
.rail__go{display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:.8rem; font-weight:700; color:rgba(255,255,255,.88);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out)}
.rail__go svg{width:14px; height:14px}
.rail__card:hover .rail__go,.rail__card:focus-visible .rail__go{opacity:1; transform:none}
/* scroll-driven: cards lift and settle as the rail travels past */
.rail__card{--p:0}
.rail__card .media{transform:scale(calc(1 + var(--p) * .05));
  transition:transform .6s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .rail__card,.rail__card .media{transition:none; transform:none}
  .rail__go{opacity:1; transform:none}
}

/* ---------- activities reel ---------- */
/* the heading sits BELOW the stage now, so the section does not need a full
   heading-sized gap above the video */
.reel{position:relative; overflow:hidden; overflow:clip; background:var(--g-deep); color:#fff;
  isolation:isolate; padding-top:clamp(44px,5vw,72px)}
.reel__glow{position:absolute; inset:-20% -10% auto -10%; height:80%; z-index:0; pointer-events:none;
  background:radial-gradient(50% 70% at 22% 0%,rgba(4,193,177,.3),transparent 70%),
             radial-gradient(50% 70% at 82% 10%,rgba(250,17,77,.24),transparent 70%)}
.reel .wrap{position:relative; z-index:2}
.reel .lede--light{color:rgba(255,255,255,.76); max-width:52ch}

.reel__stage{position:relative; margin-top:clamp(26px,3.4vw,42px); border-radius:var(--r-xl);
  overflow:hidden; aspect-ratio:16/9; background:rgba(255,255,255,.05);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.1)}
.reel__slide{position:absolute; inset:0; opacity:0; transform:scale(1.05);
  transition:opacity .9s var(--ease), transform 7s linear}
.reel__slide.is-on{opacity:1; transform:scale(1)}
.reel__slide .media,.reel__slide figure{margin:0; height:100%; border-radius:0}
.reel__slide img,.reel__slide video{width:100%; height:100%; object-fit:cover; display:block}
.reel__stage::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(1,12,40,.3) 0%,transparent 34%,rgba(1,12,40,.55) 100%)}

.reel__play{position:absolute; right:14px; bottom:14px; z-index:3; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(255,255,255,.26); background:rgba(1,12,40,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; display:grid;
  place-items:center; transition:background .3s, transform .3s var(--ease-out)}
.reel__play:hover{background:rgba(1,12,40,.75); transform:scale(1.06)}
.reel__play-ico{width:12px; height:14px; border-left:4px solid #fff; border-right:4px solid #fff}
.reel__play[aria-pressed="false"] .reel__play-ico{width:0; height:0; border:7px solid transparent;
  border-left:12px solid #fff; border-right:0; margin-left:4px}

.reel__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.reel__chip{position:relative; display:inline-flex; flex-direction:column; gap:7px; padding:9px 15px 10px;
  border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.72); font-size:.85rem; font-weight:600; cursor:pointer;
  transition:background .35s, color .35s, border-color .35s}
.reel__chip:hover{background:rgba(255,255,255,.11); color:#fff}
.reel__chip.is-on{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff}
.reel__chip-bar{display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden}
.reel__chip-bar i{display:block; height:100%; width:0; border-radius:2px; background:var(--g-full)}
.reel__chip.is-on .reel__chip-bar i{width:100%; transition:width var(--reel-dur,7s) linear}
.head--under{margin-top:clamp(26px,3.2vw,40px)}

@media (max-width:700px){
  .reel__stage{aspect-ratio:4/3}
  .reel__chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scroll-snap-type:x proximity}
  .reel__chips::-webkit-scrollbar{display:none}
  .reel__chip{flex:none; scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  .reel__slide{transition:opacity .3s linear; transform:none}
  .reel__slide.is-on{transform:none}
  .reel__chip.is-on .reel__chip-bar i{transition:none; width:100%}
}

/* No paragraph of running text runs wider than a comfortable measure. The brand
   page had a 132-character line, which is roughly double the readable maximum. */
p{max-width:var(--maxw-text,72ch)}
.hero p,.big p,.cta-band__line,.gal__cap,.reel__note,.foot p,.quote p{max-width:none}

/* Phone and email on the contact rows are primary actions, so they get a tappable
   box rather than the 19px their text line gives them. */
.contact__row a[href^="tel:"],.contact__row a[href^="mailto:"],
.lede a[href^="tel:"],.lede a[href^="mailto:"]{display:inline-flex; align-items:center;
  min-height:32px; font-weight:700}

/* ---------- figures band ---------- */
.impact{position:relative; overflow:hidden; overflow:clip; background:var(--mist)}
.impact__glow{position:absolute; inset:auto -10% -60% -10%; height:70%; pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%,rgba(4,193,177,.22),transparent 70%),
             radial-gradient(55% 100% at 80% 100%,rgba(250,17,77,.16),transparent 70%)}
.impact .wrap{position:relative; z-index:2}
/* auto-fit with a wide floor, so the band holds at most four across: four tiles make
   one row, seven make a tidy 4 + 3 rather than a lopsided 5 + 2 */
.stats{list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr)); gap:14px}
.stat{position:relative; padding:24px 22px 22px; border-radius:var(--r-l); background:var(--paper-pure);
  border:1px solid rgba(1,19,72,.08); box-shadow:0 14px 34px -22px rgba(1,19,72,.55);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease)}
.stat::before{content:""; position:absolute; left:22px; right:22px; top:0; height:3px; border-radius:0 0 3px 3px;
  background:var(--g-full); background-size:400% 100%; background-position:calc(var(--k,0) * 33%) 0}
.stat:hover{transform:translateY(-6px); box-shadow:0 28px 54px -24px rgba(1,19,72,.5)}
.stat b{display:block; font-size:clamp(2rem,1.3rem + 2.2vw,3.1rem); font-weight:800; line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
  background:var(--g-full); background-size:400% 100%; background-position:calc(var(--k,0) * 33%) 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat__label{display:block; margin-top:10px; font-weight:700; font-size:1rem; color:var(--navy)}
.stat__sub{display:block; margin-top:3px; font-size:max(12px,.84rem); color:var(--muted)}
.stats__note{margin:22px 0 0; font-size:.9rem; color:var(--muted)}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
  .stat{padding:18px 18px 16px}
}

/* ---------- closing CTA ----------
   Deep navy with two soft colour glows rather than the full rainbow edge to edge:
   the brand colour still carries the section, but as light in the dark instead of a
   flat wash, and white copy clears AA everywhere on it. */
.big{position:relative; overflow:hidden; overflow:clip; isolation:isolate; color:#fff;
  background:var(--g-deep); text-align:center;
  padding-block:clamp(74px,8.5vw,128px)}
.big__glow{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;
  animation:bigDrift 22s var(--ease) infinite alternate}
.big__glow--a{width:min(58vw,680px); aspect-ratio:1; left:-14%; top:-26%;
  background:radial-gradient(circle,rgba(4,193,177,.55),transparent 66%)}
.big__glow--b{width:min(52vw,600px); aspect-ratio:1; right:-12%; bottom:-30%; animation-delay:-9s;
  background:radial-gradient(circle,rgba(250,17,77,.5),transparent 66%)}
@keyframes bigDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-30px,0) scale(1.12)}}
.big__grain{position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px); background-size:3px 3px}
.big__in{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center}

.big__lead{margin:18px 0 0; max-width:19ch; font-weight:700; letter-spacing:-.025em; line-height:1.16;
  font-size:clamp(1.6rem,1.05rem + 2.3vw,2.9rem); color:#fff; text-wrap:balance}
.big__support{margin:14px 0 0; max-width:48ch; font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.6; color:rgba(255,255,255,.76); text-wrap:balance}

.big__pills{list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.big__pill{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  font-size:.9rem; font-weight:600; color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .45s var(--ease-out), background .45s var(--ease)}
.big__pill:hover{transform:translateY(-3px); background:rgba(255,255,255,.13)}
.big__pill i{flex:none; width:7px; height:7px; border-radius:50%; background:var(--g-full)}

.big__title{margin:34px 0 0; font-size:clamp(2.6rem,1.2rem + 6vw,5.4rem); line-height:.96;
  letter-spacing:-.045em; color:#fff}
/* background-image, not the `background` shorthand — the shorthand resets
   background-clip and the word renders as a solid gradient block. */
.grad-text--bright{background-image:linear-gradient(100deg,#9BF2E7,#5CCDF7 32%,#FF7AA0 68%,#FFC861)}

.big__badge{display:inline-flex; align-items:center; gap:9px; margin:22px 0 0; padding:9px 18px;
  border-radius:999px; font-size:.9rem; font-weight:700; letter-spacing:.01em; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2)}
.big__badge i{width:8px; height:8px; border-radius:50%; background:#3BE38B;
  box-shadow:0 0 0 4px rgba(59,227,139,.22); animation:botPulse 2.4s var(--ease) infinite}

.big__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px}
.big .btn--light{background:#fff; color:var(--navy)}
.big .btn--light:hover{background:#F4F7FD}
@media (max-width:700px){
  .big__pills{gap:8px}
  .big__pill{font-size:.84rem; padding:8px 13px}
  .big__cta{width:100%; flex-direction:column; align-items:stretch}
  .big__cta .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .big__glow{animation:none}
  .big__badge i{animation:none}
}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,72px); align-items:start}
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(22px,3vw,36px); box-shadow:var(--shadow-m)}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--ink)}
/* The required-field asterisk only. Scoped to a direct child of the label, because
   `.field label span` also matched the styled radio pills in .choice__opt and out-ranked
   their own colour — the option labels were rendering magenta at 3.73:1. */
.field > label > span{color:var(--magenta)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:14px; border:1px solid var(--line-2); background:var(--mist);
  font-size:.95rem; transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(0,98,192,.12)}
.field.is-bad input,.field.is-bad select{border-color:var(--magenta); background:rgba(250,17,77,.04)}
.field small{font-size:.76rem; color:var(--magenta); min-height:0}
.form__foot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between}
.form__note{font-size:.8rem; color:var(--muted); max-width:38ch}
.form__err{flex-basis:100%; font-size:.86rem; font-weight:600; color:var(--magenta)}
.form__ok{grid-column:1/-1; display:none; flex-direction:column; gap:10px; align-items:flex-start; padding:24px; border-radius:var(--r-m); background:linear-gradient(135deg,rgba(4,193,177,.10),rgba(0,98,192,.08)); border:1px solid rgba(0,98,192,.18)}
.form.is-sent .field,.form.is-sent .form__foot{display:none}
.form.is-sent .form__ok{display:flex}
.form__ok h3{font-family:'Inter',sans-serif; font-size:1.1rem}
.dev-note{display:inline-flex; gap:8px; align-items:flex-start; font-size:.76rem; color:var(--muted); border:1px dashed var(--line-2); border-radius:12px; padding:10px 12px}
.dev-note svg{width:14px; height:14px; flex:none; margin-top:2px}
.contact__aside{display:flex; flex-direction:column; gap:18px}
.contact__row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.contact__row svg{width:18px; height:18px; color:var(--blue); flex:none; margin-top:3px}
.contact__row strong{display:block; font-size:.94rem}
.contact__row span{font-size:.9rem; color:var(--muted)}

/* ---------- footer ---------- */
/* The floating dock is fixed, so it sits over whatever the page ends with. The
   footer reserves its height, otherwise the last row — which now carries the build
   credit — is permanently hidden behind the assistant button. */
.foot{background:var(--navy); color:#fff;
  padding-block:clamp(52px,7vw,84px) calc(28px + var(--dock-wa) + var(--dock-edge))}
.foot__top{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(28px,4vw,60px)}
.foot__chip{background:#fff; border-radius:22px; padding:16px 22px; display:inline-block}
.foot__chip img{width:clamp(150px,15vw,190px); height:auto}
.foot__tag{margin-top:16px; font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.foot p.foot__blurb{margin-top:14px; color:rgba(255,255,255,.7); font-size:.94rem; max-width:34ch}
.foot h2{color:#fff; font-family:'Inter',sans-serif; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.55); margin-bottom:16px}
.foot__links{display:flex; flex-direction:column; gap:11px}
/* standalone nav links, so they take a comfortable tap target rather than the
   24px their line box gives them */
.foot__links a{color:rgba(255,255,255,.82); font-size:.95rem; width:fit-content;
  display:inline-flex; align-items:center; min-height:34px;
  transition:color .3s, transform .3s var(--ease-out)}
.foot__links a:hover{color:#fff; transform:translateX(4px)}
.social{display:flex; gap:10px; margin-top:6px}
.social a,.social span{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); color:#fff; transition:background .3s, transform .35s var(--ease-out), border-color .3s}
.social a:hover{background:rgba(255,255,255,.14); transform:translateY(-3px)}
.social span{opacity:.35; cursor:not-allowed}
.social svg{width:18px; height:18px}
.foot__bottom{margin-top:clamp(36px,5vw,60px); padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.84rem; color:rgba(255,255,255,.6)}

/* ---------- signature: the flight path ---------- */
/* A single gradient ribbon in the left margin that draws itself as the
   page is read, with a spark climbing it: curiosity -> celebration. */
.flight{position:fixed; left:12px; top:0; width:46px; height:100vh; z-index:70; pointer-events:none; display:none}
.flight svg{width:100%; height:100%; overflow:visible}
.flight__line{fill:none; stroke:rgba(1,19,72,.12); stroke-width:1.6; stroke-linecap:round}
.flight__draw{fill:none; stroke:url(#wingGrad); stroke-width:2.6; stroke-linecap:round}
.flight__spark{fill:#FA114D}
.flight__halo{fill:rgba(250,17,77,.16)}
.flight__cap{fill:rgba(1,19,72,.45); font:600 7px 'Inter',sans-serif; letter-spacing:.18em; text-transform:uppercase}
@media (min-width:1320px){ .flight{display:block} }

/* ---------- page transition ---------- */
main{position:relative}
.view{opacity:1; transform:none; filter:blur(0); transition:opacity .32s var(--ease), transform .42s var(--ease-out), filter .32s var(--ease)}
.view.is-out{opacity:0; transform:translateY(14px); filter:blur(10px)}
.page-hero{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px)); padding-bottom:clamp(30px,4vw,52px); position:relative; overflow:hidden; overflow:clip}
.page-hero::before{content:""; position:absolute; inset:-40% -20% auto -20%; height:120%; z-index:-1;
  background:radial-gradient(40% 60% at 18% 40%,rgba(1,168,192,.18),transparent 70%),radial-gradient(40% 60% at 82% 30%,rgba(250,17,77,.14),transparent 70%)}
.crumb{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:16px; display:block}

/* ---------- cursor ---------- */
.cursor{position:fixed; top:0; left:0; z-index:130; width:84px; height:84px; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.96); color:var(--navy); display:grid; place-items:center; gap:1px;
  font-size:.55rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 14px 34px -12px rgba(1,19,72,.55);
  transform:translate(-50%,-50%) scale(0); transition:transform .35s var(--ease-out);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.cursor img{width:56px; height:auto; display:block}
.cursor span{display:block; margin-top:-2px}
.cursor.is-on{transform:translate(-50%,-50%) scale(1)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .gal{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1220px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}
@media (max-width:1024px){
  :root{--nav-h:76px}
  .exp,.stage__in,.about,.contact{grid-template-columns:1fr}
  .stage__art{order:-1}
  .events{grid-template-columns:1fr}
  .ev--feature{grid-row:auto}
  .ev--feature .media{height:min(44vh,380px)}
  .quotes{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .exp__art .media--sm{position:relative; right:auto; bottom:auto; width:52%;
    margin:-14% 0 0 auto; border-width:7px}
  .day__sticky{height:auto; position:static; padding-block:var(--sec)}
  .day__track{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:none; overscroll-behavior-x:contain}
  .day__track::-webkit-scrollbar{display:none}
  .day__panel{flex:0 0 min(74vw,340px); scroll-snap-align:center}
  .day__prog{display:none}
}
@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__item--big{grid-column:span 2; grid-row:span 1}
  .about__grid .media:nth-child(odd){transform:none}
  .ev--row{flex-direction:column}
  .ev--row .media{flex:none; width:100%; aspect-ratio:16/9; min-height:0}
  .form{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .float-cta{right:auto; left:50%; transform:translateX(-50%); bottom:96px; font-size:.84rem; padding:12px 18px}
  .hero__scroll{display:none}
  .float-cta{animation:none}
  .exp__art .media--sm{position:relative; right:auto; bottom:auto; width:60%; margin:-18% 0 0 auto; border-width:6px}
  .voice{font-size:clamp(1.5rem,7.6vw,2.4rem)}
  .voice:nth-child(even){justify-content:flex-start; text-align:left}
}
@media (max-width:480px){
  .hero{padding-bottom:96px}
  .hero__in{gap:12px}
  .hero__title{font-size:clamp(2.5rem,11.6vw,3.4rem); max-width:100%}
  .hero__sub{font-size:1rem}
  .hero__meta{font-size:max(12px,.68rem); gap:6px 12px}
  .hero__meta span{gap:12px}
  .hero__scroll{display:none}
}
@media (max-width:420px){
  .brand img{height:38px}
  .hero__cta{width:100%; flex-direction:column}
  .hero__cta .btn{width:100%; justify-content:center}
}
@media (hover:none){
  .float-cta{animation:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rise,.rv{opacity:1 !important; filter:none !important; transform:none !important}
  .strip__track{animation:none}
  .hero__arc{stroke-dashoffset:0; animation:none}
  .cursor{display:none}
  .hero__blob{display:none}
}
@media print{ .nav,.menu,.float-cta,.hero__scroll,.cursor{display:none} }

/* ============================================================
   ADDITIONS — multi-page shell, richer scroll motion, new blocks
   ============================================================ */

/* page load + top progress bar */
body{opacity:0; animation:pageIn .5s var(--ease-out) forwards}
@keyframes pageIn{to{opacity:1}}
.progress{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--g-full); z-index:100; will-change:transform}

/* nav over dark hero */
.nav.at-top{background:rgba(255,255,255,.5)}
.nav.is-stuck{background:rgba(255,255,255,.86); box-shadow:0 10px 34px -22px rgba(1,19,72,.55)}
.nav__in{height:var(--nav-h)}

/* breadcrumbs */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.78rem; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--muted); display:inline-flex; align-items:center; min-height:30px}
/* the footer legal row is standalone navigation, so it takes a real tap target too */
.foot__legal a{display:inline-flex; align-items:center; min-height:32px; padding-inline:2px}
.foot__dev{color:rgba(255,255,255,.6)}
.foot__dev a{color:rgba(255,255,255,.88); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3); transition:color .3s, border-color .3s}
.foot__dev a:hover{color:#fff; border-bottom-color:#fff} .crumbs a:hover{color:var(--navy)}
.crumbs span{opacity:.5}
.crumbs [aria-current]{color:var(--navy); font-weight:600}

/* answer-first block (AEO) — a lead paragraph with a gradient rule above it, not a
   tinted callout box. Same words, same position, far less weight on the page. */
.answer{position:relative; padding:22px 0 0; font-size:clamp(1.02rem,.96rem + .32vw,1.18rem);
  line-height:1.62; color:var(--ink); max-width:72ch; margin-top:26px}
.answer::before{content:""; position:absolute; left:0; top:0; width:84px; height:4px;
  border-radius:999px; background:var(--g-full)}
.answer strong{font-weight:700; color:var(--navy)}

/* ---------- homepage intro band ---------- */
.intro{position:relative; overflow:hidden; overflow:clip; padding-top:clamp(56px,7vw,96px)}
.intro__blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none;
  animation:blobDrift 18s var(--ease) infinite alternate}
.intro__blob--a{width:min(42vw,520px); aspect-ratio:1; left:-10%; top:-18%;
  background:radial-gradient(circle,rgba(4,193,177,.5),transparent 68%)}
.intro__blob--b{width:min(38vw,460px); aspect-ratio:1; right:-8%; bottom:-22%; animation-delay:-7s;
  background:radial-gradient(circle,rgba(250,17,77,.34),transparent 68%)}
@keyframes blobDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(26px,-22px,0) scale(1.1)}}
.intro__grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.4vw,52px); align-items:center}
.intro__lead{font-size:clamp(1.3rem,1.08rem + .82vw,1.84rem); line-height:1.4; letter-spacing:-.012em;
  font-weight:700; color:var(--navy); margin:12px 0 0; text-wrap:balance; max-width:22ch}
.intro__body{margin:16px 0 0; font-size:clamp(.98rem,.94rem + .2vw,1.06rem); line-height:1.66;
  color:var(--muted); max-width:52ch}

.facts{list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.fact{display:flex; flex-direction:column; gap:2px; justify-content:center;
  padding:15px 16px 14px; border-radius:var(--r-m); background:var(--paper-pure);
  border:1px solid rgba(1,19,72,.09); box-shadow:0 10px 26px -18px rgba(1,19,72,.5);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.fact:hover{transform:translateY(-5px); border-color:rgba(1,19,72,.18);
  box-shadow:0 22px 44px -20px rgba(1,19,72,.5)}
/* each chip pulls a different slice of the brand gradient, so the row reads as a set */
.fact b{display:block; white-space:nowrap; font-size:clamp(1.42rem,1.12rem + .92vw,1.95rem);
  font-weight:800; line-height:1.08; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
  background:var(--g-full); background-size:420% 100%;
  background-position:calc(var(--k,0) * 33%) 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.fact b i{font-style:normal; font-size:.46em; font-weight:700; margin-left:.16em; letter-spacing:0}
.fact span{display:block; margin-top:6px; font-size:max(12px,.72rem); font-weight:700; letter-spacing:.055em;
  text-transform:uppercase; color:var(--muted)}

.intro__art{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px;
  grid-template-areas:"a b" "a c"}
.intro__ph{border-radius:var(--r-l); overflow:hidden; box-shadow:0 24px 50px -26px rgba(1,19,72,.55);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease)}
.intro__ph .media{margin:0; height:100%; border-radius:inherit}
.intro__ph .media img{height:100%; width:100%; object-fit:cover}
.intro__ph--1{grid-area:a}
.intro__ph--2{grid-area:b}
.intro__ph--3{grid-area:c}
.intro__ph:hover{transform:translateY(-6px); box-shadow:0 34px 64px -28px rgba(1,19,72,.55)}
@media (max-width:900px){
  .intro__grid{grid-template-columns:1fr; gap:30px}
  .intro__art{grid-template-areas:"a b" "a c"; max-height:62vw}
}
@media (max-width:560px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .intro__art{grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c"; max-height:none}
  .intro__ph--1 .media{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .intro__blob{animation:none}
  .intro__ph{transform:none}
}

/* scroll motion variants */
.rv-l{opacity:0; transform:translateX(-32px); filter:blur(10px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out); transition-delay:var(--d,0ms)}
.rv-r{opacity:0; transform:translateX(32px); filter:blur(10px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out); transition-delay:var(--d,0ms)}
.rv-s{opacity:0; transform:scale(.94); filter:blur(8px); transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out),filter .9s var(--ease-out); transition-delay:var(--d,0ms)}
.rv-l.in,.rv-r.in,.rv-s.in{opacity:1; transform:none; filter:blur(0)}
.rv-clip{clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-out); transition-delay:var(--d,0ms)}
.rv-clip.in{clip-path:inset(0 0 0 0)}
.word{display:inline-block; opacity:0; transform:translateY(.5em) rotate(2deg); filter:blur(6px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); transition-delay:calc(var(--w,0) * 42ms)}
.split.in .word{opacity:1; transform:none; filter:blur(0)}
[data-parallax]{will-change:transform}
.tilt{transition:transform .5s var(--ease-out)}

/* section intro rule */
.rule{height:1px; background:var(--line); margin-bottom:clamp(28px,4vw,48px); transform-origin:left; transform:scaleX(0); transition:transform 1s var(--ease-out)}
.rule.in{transform:scaleX(1)}

/* steps: how enrolment works */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(30px,4vw,52px); counter-reset:s}
.step{position:relative; padding:26px 22px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--paper);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s}
.step:hover{transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:transparent}
.step::before{counter-increment:s; content:counter(s,decimal-leading-zero); display:block; font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.9rem; font-weight:800; letter-spacing:-.04em; background:var(--g-full); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:12px}
.step h3{font-family:'Inter',sans-serif; font-size:1.06rem; font-weight:700; letter-spacing:-.01em}
.step p{color:var(--muted); font-size:.92rem; margin-top:7px}

/* age bands */
.bands{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(30px,4vw,52px)}
.band{position:relative; overflow:hidden; border-radius:var(--r-l); padding:28px 24px; color:#fff; min-height:210px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px}
.band--1{background:var(--g-sky)} .band--2{background:var(--g-flame)} .band--3{background:var(--g-dawn)} .band--4{background:linear-gradient(120deg,#011877,#0062C0)}
.band::after{content:""; position:absolute; inset:auto -30% -50% auto; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.14)}
.band h3{color:#fff; font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.5rem,2.6vw,2.1rem); position:relative}
.band p{color:rgba(255,255,255,.86); font-size:.92rem; position:relative}
.band span{position:relative; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.72)}

/* safety / promises */
.promise{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(30px,4vw,52px)}
.promise__item{display:flex; gap:14px; padding:22px; border-radius:var(--r-m); background:var(--paper); border:1px solid var(--line)}
.promise__item svg{width:20px; height:20px; color:var(--blue); flex:none; margin-top:2px}
.promise__item h3{font-family:'Inter',sans-serif; font-size:1rem; font-weight:700}
.promise__item p{color:var(--muted); font-size:.9rem; margin-top:5px}

/* FAQ accordion */
.faq{margin-top:clamp(28px,4vw,48px); border-top:1px solid var(--line); max-width:940px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%; display:flex; gap:18px; align-items:flex-start; justify-content:space-between; padding:22px 0; background:none; border:0; cursor:pointer; text-align:left}
.faq__q h3{font-family:'Inter',sans-serif; font-size:clamp(1rem,1.5vw,1.16rem); font-weight:600; letter-spacing:-.01em}
.faq__q i{flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; position:relative; transition:background .35s, border-color .35s, transform .45s var(--ease-out)}
.faq__q i::before,.faq__q i::after{content:""; position:absolute; background:var(--navy); border-radius:2px; transition:transform .4s var(--ease-out), background .3s}
.faq__q i::before{width:12px; height:2px} .faq__q i::after{width:2px; height:12px}
.faq__item.is-open .faq__q i{background:var(--navy); border-color:var(--navy); transform:rotate(90deg)}
.faq__item.is-open .faq__q i::before,.faq__item.is-open .faq__q i::after{background:#fff}
.faq__item.is-open .faq__q i::after{transform:scaleY(0)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .5s var(--ease)}
.faq__a p{color:var(--muted); padding-bottom:22px; max-width:70ch}

/* enquiry security block */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.captcha{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:16px 18px; border-radius:var(--r-m); background:var(--mist); border:1px solid var(--line)}
.captcha label{font-size:.86rem; font-weight:600}
.captcha__row{display:flex; align-items:center; gap:10px}
.captcha__q{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-.02em}
.captcha input{width:96px; padding:10px 12px; border-radius:12px; border:1px solid var(--line-2); background:#fff}
.captcha__reload{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; cursor:pointer}
.captcha__reload svg{width:16px; height:16px}
.captcha__note{font-size:.76rem; color:var(--muted); display:flex; align-items:center; gap:7px}
.captcha__note svg{width:14px; height:14px; color:var(--blue)}
.captcha.is-bad{border-color:var(--magenta); background:rgba(250,17,77,.05)}

/* map placeholder */
.map{border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); background:var(--mist-2); aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:24px}
.map p{color:var(--muted); font-size:.9rem; max-width:40ch}

/* legal pages */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem); margin-top:44px}
.prose h3{font-family:'Inter',sans-serif; font-size:1.06rem; font-weight:700; margin-top:26px}
.prose p,.prose li{color:var(--ink); margin-top:12px; font-size:.98rem}
.prose ul{list-style:disc; padding-left:22px; margin-top:8px}
.prose li{margin-top:6px}

/* 404 */
.oops{min-height:72svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px; padding-top:var(--nav-h)}
.oops h1{font-size:clamp(4rem,16vw,10rem); letter-spacing:-.06em; background:var(--g-full); -webkit-background-clip:text; background-clip:text; color:transparent}

/* image credit line */
.credit{font-size:.74rem; color:var(--muted); margin-top:18px}
.credit a{text-decoration:underline; text-underline-offset:2px}

@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .bands{grid-template-columns:repeat(2,1fr)}
  .promise{grid-template-columns:1fr}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .bands{grid-template-columns:1fr}
  .captcha{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  body{opacity:1; animation:none}
  .rv-l,.rv-r,.rv-s,.rv-clip,.word{opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important}
  .rule{transform:scaleX(1)}
  .hero__media video,.hero__media img{animation:none; transform:none}
  .progress{display:none}
}

/* ============================================================
   WINGS content components
   Everything below is new UI the original theme did not have:
   the brief's skills grid, age-group tabs, philosophy, the WINGS
   Way list, founder block, CTA strips, the enquiry form, the
   assistant and the gallery states. Palette, type, spacing,
   radii and motion all come from the theme above, untouched.
   ============================================================ */

.media--3x2{aspect-ratio:3/2}
/* placeholder washes, drawn from the theme's own teal / blue / pink / gold */
.ph--1 .ph__wash{background:linear-gradient(140deg,#DFF6F4,#CFE4FB)}
.ph--2 .ph__wash{background:linear-gradient(140deg,#FDE3EC,#FFE9D2)}
.ph--3 .ph__wash{background:linear-gradient(140deg,#E3ECFF,#F6E4F3)}
.ph--4 .ph__wash{background:linear-gradient(140deg,#FFF1D6,#DFF3F1)}
.hero--media .hero__media img,.hero--media .hero__media video{animation:heroSettle 2.4s var(--ease-out) both}
@keyframes heroSettle{
  from{transform:scale(1.07)}
}
.hero__meta li{font-size:.76rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.8); padding-right:18px; margin-right:18px; border-right:1px solid rgba(255,255,255,.2)}
.hero__meta li:last-child{border-right:0; margin-right:0; padding-right:0}
.field > label > span{color:var(--alert)}
.choice__opt span,.choice__opt > span{color:var(--navy)}
.cta-strip{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(30px,4vw,48px)}
.cta-strip .btn svg{width:17px; height:17px}
.statement{margin-top:18px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.45rem); letter-spacing:-.02em; color:var(--forest); line-height:1.24}
.statement--lg{font-size:clamp(1.35rem,2.8vw,2.1rem); max-width:24ch}
.voices .statement,.stage .statement{color:#fff}
.pullquote{margin-top:22px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:-.03em; line-height:1.05;
  background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent}
/* On the dark stage the gradient runs through the theme's bright stops — teal, sky,
   pink, gold. (It used to carry the old green palette, which clashed here.) */
.pullquote--light{background:linear-gradient(100deg,#9BF2E7,#5CCDF7 34%,#FF7AA0 70%,#FFC861);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.strap{margin-top:10px; font-weight:700; font-size:clamp(.95rem,1.3vw,1.08rem); color:var(--moss); letter-spacing:-.01em}
.strap--light{color:var(--lime)}
.creds{margin-top:10px; font-size:.92rem; color:rgba(255,255,255,.72); letter-spacing:.01em}
.beats{margin-top:18px; display:flex; flex-direction:column; gap:7px}
.beats li{position:relative; padding-left:22px; font-size:clamp(1rem,1.25vw,1.12rem); color:var(--ink); line-height:1.45}
.beats li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; border-radius:2px; background:var(--g-full)}
.beats--dot li::before{width:7px; height:7px; border-radius:50%; top:.56em; background:var(--lime)}
.beats--two{display:grid; grid-template-columns:1fr 1fr; gap:7px 30px}
.beats--center{align-items:center; margin-inline:auto}
.beats--center li{padding-left:0; text-align:center; color:rgba(255,255,255,.88)}
.beats--center li::before{display:none}
.voices .beats li,.big .beats li{color:rgba(255,255,255,.88)}
.philo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; margin-top:clamp(24px,3vw,40px)}
.approach{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.approach__item{padding:16px 18px; border-radius:var(--r-m); background:var(--paper); border:1px solid var(--line);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease)}
.approach__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.approach__item strong{display:block; font-size:1rem; color:var(--forest)}
.approach__item span{font-size:.92rem; color:var(--muted)}
.skills{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,24px); margin-top:clamp(32px,4vw,56px)}
.skill{position:relative; padding:26px 24px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--paper);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease), border-color .4s}
.skill::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--r-l) var(--r-l) 0 0;
  background:var(--g-full); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out)}
.skill:hover{transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:transparent}
.skill:hover::before{transform:scaleX(1)}
.skill__ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; margin-bottom:16px}
.skill__ico svg{width:21px; height:21px}
.skill__ico--1{background:var(--g-sky)}
.skill__ico--2{background:var(--g-flame)}
.skill__ico--3{background:var(--g-dawn)}
.skill h3{font-family:'Inter',sans-serif; font-size:1.06rem; font-weight:700; letter-spacing:-.01em}
.skill p{margin-top:8px; color:var(--muted); font-size:.93rem}
.way{margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px}
.way__item{display:flex; gap:14px; align-items:center; padding:15px 18px; border-radius:var(--r-m);
  background:var(--paper); border:1px solid var(--line); font-size:.98rem; color:var(--ink);
  transition:transform .45s var(--ease-out), border-color .35s, box-shadow .45s var(--ease)}
.way__item:hover{transform:translateX(5px); border-color:transparent; box-shadow:var(--shadow-m)}
.way__item span{flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--mist-2); color:var(--moss)}
.way__item span svg{width:18px; height:18px}
.format{display:inline-flex; align-items:center; gap:14px; margin-top:22px; padding:16px 22px;
  border-radius:var(--r-m); background:var(--mist); border:1px solid var(--line)}
.format__ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--g-dawn)}
.format__ico svg{width:19px; height:19px}
.format strong{display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.format span{font-weight:700; color:var(--forest); font-size:1.02rem}
.ages{margin-top:clamp(28px,4vw,48px)}
.agetabs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.agetab{text-align:left; padding:18px 20px; border-radius:var(--r-m); border:1px solid var(--line-2);
  background:var(--paper); cursor:pointer; transition:transform .45s var(--ease-out), border-color .35s, background .35s, box-shadow .45s}
.agetab strong{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.18rem; letter-spacing:-.02em; color:var(--forest)}
.agetab span{font-size:.84rem; color:var(--muted)}
.agetab:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.agetab.is-on{background:var(--g-deep); border-color:transparent; box-shadow:var(--shadow-m)}
.agetab.is-on strong,.agetab.is-on span{color:#fff}
.agepanels{margin-top:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(22px,3vw,34px)}
.agepanel[hidden]{display:none}
/* Tabs: a gradient bar grows under the active one, and the panel settles in rather
   than snapping, so moving between age groups reads as motion not a redraw. */
.agetab{position:relative; overflow:hidden}
.agetab__bar{position:absolute; left:0; right:0; bottom:0; height:3px; transform:scaleX(0);
  transform-origin:left; background:var(--g-full); transition:transform .5s var(--ease-out)}
.agetab.is-on .agetab__bar{transform:scaleX(1)}
.agetab:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}
.agepanel{animation:panelIn .5s var(--ease-out) both}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.agepanel .focus li{opacity:0; animation:focusIn .45s var(--ease-out) forwards;
  animation-delay:calc(var(--fi,0) * 45ms + 120ms)}
@keyframes focusIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .agepanel{animation:none}
  .agepanel .focus li{opacity:1; animation:none}
  .agetab__bar{transition:none}
}
.agepanel__head h3{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.03em}
.agepanel__head h3 span{color:var(--muted); font-weight:600; font-size:.6em; letter-spacing:-.01em}
.focus__label{margin-top:18px; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.focus{display:grid; grid-template-columns:repeat(3,1fr); gap:9px 18px; margin-top:12px}
.focus li{position:relative; padding-left:20px; font-size:.95rem; color:var(--ink)}
.focus li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 3px rgba(157,197,52,.16)}
.focus--more{margin-top:9px}
.focus__more{margin-top:16px; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; color:var(--forest); font-weight:600; font-size:.88rem; cursor:pointer;
  transition:background .3s, border-color .3s}
.focus__more:hover{background:var(--mist); border-color:var(--forest)}
.focus__more svg{width:15px; height:15px; transition:transform .4s var(--ease-out)}
.focus__more.is-open svg{transform:rotate(180deg)}
.gfilters{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,3vw,36px)}
.gfilter{padding:9px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--paper);
  font-size:.86rem; font-weight:600; color:var(--forest); cursor:pointer; transition:background .3s, border-color .3s, color .3s, transform .35s var(--ease-out)}
.gfilter:hover{transform:translateY(-2px); border-color:var(--forest)}
.gfilter.is-on{background:var(--forest); border-color:var(--forest); color:#fff}
.gal__item[hidden]{display:none}
.empty{margin-top:clamp(26px,3vw,40px); padding:clamp(34px,5vw,64px) clamp(24px,4vw,48px); text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--r-l); background:var(--mist);
  display:flex; flex-direction:column; align-items:center; gap:12px}
.empty__ico{width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:#fff; background:var(--g-dawn)}
.empty__ico svg{width:25px; height:25px}
.empty h3{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.25rem,2.2vw,1.7rem)}
.empty p{color:var(--muted); max-width:56ch; font-size:.96rem}
.empty .btn{margin-top:8px}
.ph__pending{position:absolute; top:14px; left:14px; z-index:2; font-size:.62rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--forest); background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9);
  padding:5px 10px; border-radius:999px}
.addr{margin-top:16px; font-style:normal; font-size:1.02rem; color:var(--ink); line-height:1.65}
.contact__btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.contact__btns .btn svg{width:16px; height:16px}
.map iframe{width:100%; height:100%; border:0; display:block}
.form__head{grid-column:1/-1; margin-bottom:4px}
.form__head h3{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.02em}
.form__head p{margin-top:5px; font-size:.88rem; color:var(--muted)}
.field__label{font-size:.8rem; font-weight:600; color:var(--ink)}
.field__hint{display:block; margin-top:6px; font-size:.78rem; color:var(--moss); font-weight:600}
.choice{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.choice__opt{position:relative; flex:1 1 180px}
.choice__opt input{position:absolute; opacity:0; width:0; height:0}
.choice__opt span{display:block; padding:13px 16px; border-radius:14px; border:1px solid var(--line-2);
  background:var(--mist); font-size:.92rem; font-weight:600; cursor:pointer; text-align:center;
  transition:background .3s, border-color .3s, color .3s}
.choice__opt input:checked + span{background:var(--forest); border-color:var(--forest); color:#fff}
.choice__opt input:focus-visible + span{outline:3px solid var(--moss); outline-offset:3px}
.captcha__fallback{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.captcha__fallback[hidden]{display:none}
.form__ok-ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; background:var(--g-dawn)}
.form__ok-ico svg{width:24px; height:24px}
.form.is-sent .form__head{display:none}
/* The two floating actions sit side by side on one line in the bottom-right corner:
   a round, icon-only WhatsApp button, then the assistant pill beside it. --dock-wa is
   the circle's diameter, and the assistant offsets itself by exactly that plus the gap,
   so the pair never overlaps however the label is sized. */
:root{--dock-wa:56px; --dock-gap:12px; --dock-edge:16px}
.wa-float{position:fixed; right:var(--dock-edge); bottom:calc(var(--dock-edge) + env(safe-area-inset-bottom));
  z-index:76; width:var(--dock-wa); height:var(--dock-wa); padding:0; border-radius:50%;
  display:inline-grid; place-items:center; color:#fff; background:#1FA855;
  box-shadow:0 14px 34px -10px rgba(31,168,85,.6);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.wa-float svg{width:25px; height:25px}
.wa-float span{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.wa-float::after{content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(31,168,85,.45); opacity:0; animation:waRing 3.2s var(--ease) infinite}
@keyframes waRing{0%{transform:scale(.86); opacity:.7}70%,100%{transform:scale(1.18); opacity:0}}
.wa-float:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 22px 50px -14px rgba(31,168,85,.6)}
.wa-float:active{transform:scale(.95)}
body.bot-open .wa-float{transform:scale(.9); opacity:0; pointer-events:none}
@media (prefers-reduced-motion:reduce){ .wa-float::after{animation:none} }
@media (max-width:900px){
  :root{--dock-wa:50px; --dock-edge:14px}
  /* The horizontal reveal starts 32px off-axis, which is wider than a phone can
     hold. Reveal vertically instead — same motion, no sideways overflow. */
  .rv-l,.rv-r{transform:translateY(24px)}
  .rv-l.in,.rv-r.in{transform:none}
}
@media (max-width:1024px){
  .skills{grid-template-columns:repeat(2,1fr)}
  .philo{grid-template-columns:1fr}
  .agetabs{grid-template-columns:repeat(2,1fr)}
  .focus{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .skills{grid-template-columns:1fr}
  .way{grid-template-columns:1fr}
  .beats--two{grid-template-columns:1fr}
  .approach{grid-template-columns:1fr}
  .agetabs{grid-template-columns:1fr}
  .focus{grid-template-columns:1fr}
  .cta-strip{flex-direction:column; align-items:stretch}
  .cta-strip .btn{justify-content:center}
  .contact__btns .btn{flex:1 1 100%; justify-content:center}
}
.bot__fab{position:fixed; z-index:78;
  right:calc(var(--dock-edge) + var(--dock-wa) + var(--dock-gap));
  bottom:calc(var(--dock-edge) + env(safe-area-inset-bottom)); height:var(--dock-wa);
  display:inline-flex; align-items:center; gap:10px; padding:0 20px; border:0; border-radius:999px; cursor:pointer;
  font-weight:700; font-size:.9rem; color:#fff; background:var(--g-deep);
  box-shadow:0 16px 40px -12px rgba(1,19,72,.55); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.bot__fab:hover{transform:translateY(-3px); box-shadow:0 22px 50px -14px rgba(1,19,72,.6)}
.bot__fab-ico{display:grid; place-items:center; width:20px; height:20px}
.bot__fab-ico svg{width:20px; height:20px}
.bot__dot{position:absolute; top:12px; right:15px; width:8px; height:8px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 3px rgba(157,197,52,.3); animation:botPulse 2.4s var(--ease) infinite}
body.bot-open .bot__fab{transform:scale(.9); opacity:0; pointer-events:none}
.bot__panel{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:79;
  width:min(388px, calc(100vw - 32px)); max-height:min(640px, calc(100vh - 32px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 40px 90px -30px rgba(1,19,72,.5);
  animation:botIn .42s var(--ease-out)}
@keyframes botIn{
  from{opacity:0; transform:translateY(18px) scale(.97)}
}
.bot__panel[hidden]{display:none}
.bot__head{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--g-deep); color:#fff}
.bot__avatar{width:56px; height:44px; border-radius:12px; background:#fff; display:grid; place-items:center; overflow:hidden; flex:none}
.bot__avatar img{width:50px; max-width:100%; height:auto; object-fit:contain}
.bot__who{display:flex; flex-direction:column; line-height:1.25; flex:1}
.bot__who strong{font-size:.96rem}
.bot__who span{font-size:.76rem; color:rgba(255,255,255,.72)}
.bot__x{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1);
  color:#fff; display:grid; place-items:center; cursor:pointer}
.bot__x svg{width:17px; height:17px}
.bot__x:hover{background:rgba(255,255,255,.2)}
.bot__log{flex:1; overflow-y:auto; padding:18px 16px 6px; display:flex; flex-direction:column; gap:10px;
  background:var(--mist); scrollbar-width:thin}
.bot__msg{display:flex}
.bot__msg--me{justify-content:flex-end}
.bot__bubble{max-width:86%; padding:11px 15px; border-radius:16px; font-size:.92rem; line-height:1.5;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px;
  animation:bubbleIn .34s var(--ease-out)}
.bot__msg--me .bot__bubble{background:var(--forest); color:#fff; border-color:transparent;
  border-bottom-left-radius:16px; border-bottom-right-radius:5px}
.bot__bubble a{color:var(--moss); text-decoration:underline; text-underline-offset:2px; font-weight:600}
.bot__msg--me .bot__bubble a{color:#fff}
@keyframes bubbleIn{
  from{opacity:0; transform:translateY(7px)}
}
.bot__typing{display:inline-flex; gap:4px; align-items:center; padding:14px 16px}
.bot__typing i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:botBlink 1.2s infinite}
.bot__typing i:nth-child(2){animation-delay:.18s}
.bot__typing i:nth-child(3){animation-delay:.36s}
.bot__sum{display:block; margin-top:9px; padding:11px 13px; border-radius:12px; background:var(--mist); border:1px solid var(--line)}
.bot__sum b{display:block; font-size:.82rem; color:var(--moss); letter-spacing:.02em}
.bot__sum span{display:block; font-size:.86rem; color:var(--ink)}
.bot__cta{display:inline-flex; align-items:center; justify-content:center; margin-top:11px; padding:11px 16px;
  border-radius:999px; background:#1FA855; color:#fff !important; font-weight:700; font-size:.88rem; text-decoration:none !important}
.bot__cta:hover{background:#188443}
.bot__chips{display:flex; flex-wrap:wrap; gap:7px; padding:12px 16px; background:var(--mist); border-top:1px solid var(--line)}
.bot__chips[hidden]{display:none}
.bot__chip{padding:8px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--paper);
  font-size:.83rem; font-weight:600; color:var(--forest); cursor:pointer;
  transition:background .3s, border-color .3s, color .3s, transform .3s var(--ease-out)}
.bot__chip:hover{background:var(--forest); border-color:var(--forest); color:#fff; transform:translateY(-2px)}
.bot__input{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:var(--paper)}
.bot__input[hidden]{display:none}
.bot__input input{flex:1; padding:12px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--mist); font-size:.92rem}
.bot__input input:focus{outline:none; border-color:var(--moss); background:#fff; box-shadow:0 0 0 4px rgba(63,125,42,.12)}
.bot__input button{width:44px; height:44px; flex:none; border:0; border-radius:50%; background:var(--g-deep); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:transform .35s var(--ease-out)}
.bot__input button:hover{transform:scale(1.06)}
.bot__input button svg{width:18px; height:18px}
.bot__foot{padding:0 16px 12px; font-size:.7rem; color:var(--muted); background:var(--paper); text-align:center}
@media (max-width:900px){
  .bot__fab{padding:0 16px; font-size:.82rem}
  .bot__panel{right:8px; left:8px; width:auto; bottom:calc(8px + env(safe-area-inset-bottom)); max-height:calc(100vh - 80px)}
}
@media (prefers-reduced-motion:reduce){
  .bot__panel,.bot__bubble{animation:none}
  .bot__dot,.bot__typing i{animation:none}
}
.ph__file{position:relative; z-index:2; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.64rem; letter-spacing:.01em; color:rgba(1,19,72,.58);
  background:rgba(255,255,255,.76); border-radius:4px; padding:4px 8px}
.media__cap{font-size:.82rem; color:var(--muted); margin-top:10px}
figure.media{margin:0}
.social__pending{opacity:.3; cursor:default}
@media (max-width:600px){
  .hero__meta li{padding-right:12px; margin-right:12px; font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .hero--media .hero__media img,.hero--media .hero__media video{animation:none; transform:none}
}
.consent{grid-column:1/-1; display:flex; gap:11px; align-items:flex-start; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--paper-pure);
  font-size:.86rem; color:var(--ink); line-height:1.45; transition:border-color .3s, background .3s}
.consent input{flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--moss)}
.consent a{text-decoration:underline; text-underline-offset:2px; color:var(--moss)}
.consent.is-bad{border-color:var(--alert); background:rgba(192,57,43,.05)}
.field .opt{font-weight:500; font-size:.76rem; color:var(--muted); letter-spacing:0; text-transform:none}

/* ---------- enquiry modal (the single form, reachable from every section) ---------- */
/* The enquiry band after every section. It used to be a full section's worth of
   padding around three loose buttons, which left a lake of white between sections.
   It is now a compact tinted strip, and the section above it gives back most of its
   bottom padding so the two read as one unit. */
.cta-band{padding-block:0; margin-block:clamp(12px,1.6vw,22px) 0}
.section:has(+ .cta-band){padding-bottom:clamp(30px,3.6vw,52px)}
.cta-band__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 24px; padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px); border-radius:var(--r-l);
  background:linear-gradient(100deg,rgba(4,193,177,.09),rgba(0,98,192,.07) 46%,rgba(250,17,77,.08));
  border:1px solid rgba(1,19,72,.08); position:relative; overflow:hidden}
.cta-band__in::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--g-full)}
.cta-band__line{margin:0; font-size:.98rem; line-height:1.5; color:var(--muted); max-width:38ch}
.cta-band__line strong{color:var(--navy); font-weight:700}
/* after a dark section the band inverts, so the two read as one block */
.cta-band--dark .cta-band__in{background:var(--g-deep); border-color:rgba(255,255,255,.14)}
.cta-band--dark .cta-band__line{color:rgba(255,255,255,.78)}
.cta-band--dark .cta-band__line strong{color:#fff}
.cta-band .cta-strip{margin:0; flex:0 1 auto}
@media (max-width:760px){
  .cta-band__in{flex-direction:column; align-items:stretch; text-align:left}
  .cta-band .cta-strip{width:100%}
}
.emodal{position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  padding:clamp(14px,3vw,40px); background:rgba(1,19,72,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .34s var(--ease), visibility .34s}
.emodal.is-open{opacity:1; visibility:visible}
.emodal__sheet{position:relative; width:min(760px,100%); max-height:92svh; overflow:auto;
  background:var(--paper); border-radius:var(--r-xl); box-shadow:var(--shadow-l);
  transform:translateY(16px) scale(.98); transition:transform .4s var(--ease-out);
  -webkit-overflow-scrolling:touch}
.emodal.is-open .emodal__sheet{transform:none}
.emodal__body{padding:clamp(18px,3vw,30px)}
.emodal__body .form{border:0; box-shadow:none; padding:0; background:transparent}
.emodal__x{position:sticky; top:10px; float:right; margin:10px 10px 0 0; z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--paper); color:var(--navy); display:grid; place-items:center; cursor:pointer}
.emodal__x:hover{background:var(--mist)}
.emodal__x svg{width:18px; height:18px}
@media (prefers-reduced-motion:reduce){
  .emodal,.emodal__sheet{transition:none}
  .emodal__sheet{transform:none}
}

/* WINGS refinement: reveal experience cards as they enter the viewport */
#beyond-classes .rail__card.experience-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  transition: opacity .72s ease, transform .72s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
#beyond-classes .rail__card.experience-reveal.is-visible,
#beyond-classes .rail__card.experience-reveal.in-view,
#beyond-classes .rail__card.experience-reveal.revealed {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #beyond-classes .rail__card.experience-reveal { opacity: 1; transform: none; transition: none; }
}
/* Reduce persistent promotional clutter */
.float-cta { display: none !important; }

/* WINGS update: hide activity reel selector tabs; the activity panel stays static. */
.reel__chips{display:none!important}