/* Decoration layer: wave dividers, full-screen hero, paper and aeroplane art, cards. */
:root{--hh:72px;--wave:clamp(44px,7vw,92px)}
@media (max-width:1150px){:root{--hh:65px}}
/* Wave dividers: the div shows the section above, the path is the section below */
.wave{block-size:var(--wave);line-height:0;margin-block:-1px;overflow:hidden;background:var(--from)}
.wave svg{display:block;inline-size:112%;margin-inline:-6%;block-size:calc(100% + 2px);animation:sway 12s ease-in-out infinite alternate}
.wave path{fill:var(--to)}
@keyframes sway{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.wave[data-from=indigo]{--from:#4F5BEA}.wave[data-from=navy]{--from:#0F0F4D}.wave[data-from=white]{--from:#fff}.wave[data-from=tint]{--from:#F3F4FE}
.wave[data-to=indigo]{--to:#4F5BEA}.wave[data-to=navy]{--to:#0F0F4D}.wave[data-to=white]{--to:#fff}.wave[data-to=tint]{--to:#F3F4FE}
/* Full-screen hero */
.hero.full{border-radius:0;min-block-size:calc(100vh - var(--hh) - var(--wave));min-block-size:calc(100svh - var(--hh) - var(--wave));align-content:center;padding-block:clamp(32px,6vh,80px) clamp(64px,10vh,110px)}
.hero-text,.hero-art{z-index:1}
.hero-logo{inline-size:clamp(64px,8vw,92px);block-size:auto;margin-block-end:18px;filter:drop-shadow(0 8px 16px rgba(8,10,60,.35))}
.hero-text>:nth-child(5){animation-delay:.32s}
.scroll-cue{position:absolute!important;inset-block-end:22px;inset-inline:0;margin-inline:auto;inline-size:max-content;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.9rem;font-weight:500}
.scroll-cue svg{inline-size:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{translate:0 7px}}
/* Paper planes */
.plane{position:absolute!important;pointer-events:none;z-index:0}
.p1{inline-size:clamp(70px,9vw,130px);inset-block-start:12%;inset-inline-start:-140px;animation:fly 26s linear infinite}
.p2{inline-size:clamp(44px,5vw,76px);inset-block-start:64%;inset-inline-start:-100px;opacity:.75;animation:fly 34s linear -12s infinite}
.p3{inline-size:clamp(34px,4vw,56px);inset-block-start:34%;inset-inline-start:-80px;opacity:.55;animation:fly 42s linear -27s infinite}
.p1.small{inline-size:clamp(46px,6vw,84px);inset-block-start:22%;animation-duration:30s}
@keyframes fly{0%{transform:translate(0,0) rotate(6deg)}25%{transform:translate(30vw,-3vh) rotate(-4deg)}50%{transform:translate(60vw,4vh) rotate(8deg)}75%{transform:translate(90vw,-5vh) rotate(-3deg)}100%{transform:translate(125vw,0) rotate(6deg)}}
.trail{position:absolute!important;inset:auto 0 14% 0;inline-size:100%;block-size:36%;opacity:.28;pointer-events:none}
/* Welcome */
.welcome{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.welcome-text p{max-inline-size:38rem}
.welcome-art{position:relative;min-block-size:340px}
.welcome-art img{position:absolute}
.sheet{inline-size:min(72%,290px);inset:0 auto auto 6%;rotate:-6deg;filter:drop-shadow(0 18px 28px rgba(15,15,77,.18))}
.sheet.b{inset:40px 4% auto auto;rotate:5deg}
.pencil{inline-size:min(80%,300px);inset:auto 2% 8% auto;rotate:-16deg;filter:drop-shadow(0 8px 10px rgba(15,15,77,.2))}
.sheet,.pencil{animation:hover 7s ease-in-out infinite alternate}
.sheet.b{animation-delay:-3s}
@keyframes hover{to{translate:0 -10px}}
.sec-intro{max-inline-size:40rem;color:var(--muted);margin-block:-6px 22px}
.page-intro{font-size:1.2rem;max-inline-size:44rem;margin-block-end:28px;color:var(--ink2)}
/* Explore cards */
.explore{position:relative;overflow:hidden;background:var(--tint)}
.explore .pat{position:absolute;right:-3%;top:-12%;inline-size:min(28%,300px);pointer-events:none}
.explore>:not(.pat){position:relative}
/* never more than 3 across, so six cards make 3 + 3 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(15rem,calc((100% - 32px)/3))),1fr));gap:16px}
.card{display:block;background:#fff;border-radius:20px;padding:24px;transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px color-mix(in oklab,var(--indigo) 20%,transparent)}
.card h3{margin-block-end:4px}.card p{margin:0;color:var(--muted)}
/* Section colours + small art */
.band.notices{background:#fff}
.notices .books{inline-size:min(100%,220px);margin-block-start:30px}
.find{position:relative;overflow:hidden}
.find-plane{position:absolute;inline-size:82px;inset-inline-end:7%;inset-block-start:16%;animation:hover 4s ease-in-out infinite alternate}
.page-head,.page-head .tri{border-radius:0}
.top .logo img,.badge-row img{border:0;background:none}
@media (max-width:900px){.welcome{grid-template-columns:1fr}.welcome-art{min-block-size:270px}.explore .pat{opacity:.35}}
@media (prefers-reduced-motion:reduce){.plane,.wave svg,.scroll-cue svg,.sheet,.pencil,.find-plane{animation:none!important}}
/* Hero details: age pill and fact tiles */
.eyebrow{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 16px;padding:5px 16px 5px 12px;border-radius:999px;background:rgba(15,15,77,.28);border:1px solid rgba(255,255,255,.28);font-weight:500;font-size:1rem;line-height:1.5}
.eyebrow b{font:800 1.35rem/1 var(--head);color:var(--lime)}
.hero-logo+.eyebrow{display:flex;inline-size:max-content;max-inline-size:100%}
.hero-facts{list-style:none;margin:22px auto 0;padding:0;max-inline-size:640px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-facts li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 8px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);line-height:1.3}
.hero-facts b{font:800 clamp(1.4rem,3vw,2rem)/1.1 var(--head);color:var(--lime)}
.hero-facts span{font-size:.92rem;opacity:.92}
.hero-facts .hot{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.hero-facts .hot b{color:var(--navy)}
.hero-facts .hot span{opacity:1;font-weight:500}
.hero-art{animation-name:in}
.hero-text>.eyebrow{animation:in .9s var(--ease) both}
/* Soft dividers: same wave, gentler swing (set in the path), a little less sway */
.wave.soft svg{animation-duration:16s}
/* Bug fix: paper art spilled over the wave and stats on small screens */
@media (max-width:900px){.welcome-art{min-block-size:380px}}
@media (max-width:420px){.welcome-art{min-block-size:340px}.sheet{inline-size:68%}.sheet.b{inline-size:68%}}
@media (prefers-reduced-motion:reduce){.wave.soft svg{animation:none!important}}
/* Bug fix: the lime plane covered the "Open in Maps" label on narrow screens */
.find-plane{inline-size:clamp(52px,11vw,82px);inset-block-start:5%}
.find .btn{position:relative;z-index:1}
/* Footer always sits at the bottom of the screen, even on short pages */
body{display:flex;flex-direction:column}
main{flex:1 0 auto;min-inline-size:0}
.site-foot{flex-shrink:0}
/* Copyright line */
.site-foot .legal{font-size:.92rem}
.site-foot .legal a{color:var(--lime);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.site-foot .legal a:hover,.site-foot .legal a:focus-visible{text-decoration-color:currentColor}
.site-foot{padding-block-end:max(40px,calc(24px + env(safe-area-inset-bottom,0px)))}
.site-foot a{transition:opacity .2s}
.site-foot li a:hover{opacity:.7}
/* Back-to-top button */
.to-top{position:fixed;z-index:15;inset-inline-end:16px;inset-block-end:max(16px,env(safe-area-inset-bottom,0px));inline-size:46px;block-size:46px;border:0;border-radius:50%;background:var(--navy);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(15,15,77,.3);transition:transform .2s var(--ease),background .2s}
.to-top[hidden]{display:none}
.to-top:hover{transform:translateY(-3px);background:var(--indigo)}
.to-top svg{inline-size:22px;block-size:22px;fill:none;stroke:var(--lime);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media print{.to-top{display:none}}
/* Copyright now sits in the left footer column, under "Established" */
.site-foot .fcol .legal{flex:none;margin:16px 0 0;padding:0;border:0;font-size:.92rem;opacity:1;color:rgba(255,255,255,.8)}
/* Back-to-top stays visible over the navy footer */
.to-top{box-shadow:0 0 0 2px #fff,0 8px 20px rgba(15,15,77,.35)}
/* ---- Polish round: accessibility, tap targets, small details ---- */
::selection{background:var(--lime);color:var(--navy)}
html{-webkit-tap-highlight-color:transparent;color-scheme:light}
/* Keyboard focus was invisible on dark sections (indigo ring on indigo/navy) */
.hero :focus-visible,.page-head :focus-visible,.stats :focus-visible,.find :focus-visible,.site-foot :focus-visible{outline-color:var(--lime)}
.card:focus-visible{outline-offset:4px}
.card:focus-visible,.offer-list li:focus-within{transform:translateY(-4px)}
/* Touch targets of at least 44px */
#lang{min-block-size:44px}
.site-foot li a{display:inline-block;padding-block:12px}
.site-foot .legal a{display:inline-block;padding-block:12px;margin-block:-12px}
/* Header gets a soft shadow once you scroll */
.top{transition:box-shadow .25s}
.top.scrolled{box-shadow:0 8px 24px rgba(15,15,77,.12)}
/* Breadcrumb in the blue page header */
.crumbs{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 14px;font-size:.98rem;color:rgba(255,255,255,.85)}
.crumbs a{display:inline-block;padding-block:6px;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.crumbs a:hover{text-decoration-color:var(--lime)}
.crumbs [aria-current]{color:#fff;font-weight:600}
.crumbs span[aria-hidden]{opacity:.85}
@media print{.crumbs{display:none}}

/* ---- Icons, theme button and motion ---- */
/* Theme toggle: moon in light mode, sun in dark mode, they swap with a small spin */
.icon-btn{position:relative;display:grid;place-items:center;inline-size:44px;block-size:44px;padding:0;border:0;background:var(--lav);color:var(--ink);cursor:pointer;overflow:hidden;transition:background .25s}
.icon-btn:hover{background:var(--line)}
.icon-btn svg{grid-area:1/1;inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease),opacity .3s}
#theme .sun{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme=dark] #theme .sun{opacity:1;transform:none}
[data-theme=dark] #theme .moon{opacity:0;transform:rotate(90deg) scale(.4)}
@media (max-width:1150px){.cta #theme{margin-inline-end:0}}
/* Card icons: duotone, in a tile that fills and tilts on hover while the lines redraw */
.ic{display:grid;place-items:center;inline-size:54px;block-size:54px;margin-block-end:16px;border-radius:16px;background:var(--lav);color:var(--accent);transition:background .25s,color .25s,transform .4s var(--ease)}
.ic svg{inline-size:28px;block-size:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic .d{fill:currentColor;fill-opacity:.18;transition:fill-opacity .25s}
.ic svg *{stroke-dasharray:1;stroke-dashoffset:0}
.card:hover .ic,.card:focus-visible .ic{background:#4F5BEA;color:#fff;transform:rotate(-6deg) scale(1.06)}
.card:hover .ic .d,.card:focus-visible .ic .d{fill-opacity:.3}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.card:hover .ic svg *,.card:focus-visible .ic svg *{animation:draw .8s var(--ease)}
/* Nav links: the underline slides in instead of appearing */
@media (min-width:1151px){
  .top nav a:not(.btn){background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 3px;box-shadow:none;transition:background-size .28s var(--ease)}
  .top nav a:not(.btn):hover,.top nav a:not(.btn)[aria-current]{background-size:100% 3px;box-shadow:none}
}
/* Back-to-top fades and slides in */
.to-top{opacity:0;visibility:hidden;translate:0 14px;transition:opacity .3s,translate .3s var(--ease),visibility .3s,transform .2s var(--ease),background .2s}
.to-top.show{opacity:1;visibility:visible;translate:0 0}
/* Cards, notices and list items rise into view as you scroll (browsers without support just show them) */
@supports (animation-timeline:view()){
  .cards .card,.band .notice-list li,.person,.result-list li,.checklist li,.timeline li{animation:in linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
/* A gentle pulse on the highlighted "28 years" tile, once */
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.hero-facts .hot{animation:pop .7s .9s var(--ease) both}