/* Layout: a white page traced with faint valley contour lines, navy type, and a navy footer. Photography carries every section, framed and overlapped; a single marigold bar marks the key word in each heading. */
:root{
  color-scheme:light;
  --ground:#FFFFFF; --ground-2:#F3F4F8; --panel:#F3F4F8; --navy:#172645; --navy-2:#111D36;
  --ink:#172645; --ink-soft:#4A5671; --ink-mute:#6E7790;
  --line:rgba(23,38,69,.14); --line-strong:rgba(23,38,69,.5);
  --accent:#B9561D; --accent-deep:#9C4615; --gold:#E2B35B; --label:#A44C17;
  --crest-green:#172645; --crest-soft:#5A6684;
  --f:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --maxw:1320px;
  --gut:max(clamp(20px, 4.4vw, 64px), env(safe-area-inset-left, 0px));
  --gut-r:max(clamp(20px, 4.4vw, 64px), env(safe-area-inset-right, 0px));
}
.dark{
  color-scheme:dark;
  --ground:#172645; --ground-2:#111D36; --panel:#1F3158;
  --ink:#FFFFFF; --ink-soft:rgba(232,236,245,.82); --ink-mute:rgba(232,236,245,.6);
  --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.6); --label:var(--gold);
  color:var(--ink); background-color:var(--ground); background-repeat:repeat; background-size:900px 900px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background-color:var(--ground); background-repeat:repeat; background-size:900px 900px;
  color:var(--ink); font-family:var(--f); font-size:1.125rem; line-height:1.65; font-weight:400;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0; text-wrap:pretty}
h1,h2,h3{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:#fff; color:var(--ground); padding:10px 16px; font-weight:700; text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top, 0px))}
.wrap{max-width:calc(var(--maxw) + 128px); margin-inline:auto; padding-left:var(--gut); padding-right:var(--gut-r)}
section[id]{scroll-margin-top:84px}

/* Type */
.title{font-weight:500; text-transform:uppercase; letter-spacing:.09em; font-size:clamp(1.5rem, 1rem + 1.75vw, 2.45rem); line-height:1.45; margin:0 0 24px; text-wrap:balance}
.title.center{text-align:center}
.hl{background:var(--accent); color:#fff; padding:.05em .32em .01em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.eyebrow{display:block; font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--label); margin-bottom:16px}
.body{color:var(--ink-soft); max-width:38em}
.body + .body{margin-top:16px}
.more{display:inline-flex; align-items:center; gap:12px; color:var(--label); font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding:6px 0}
.more svg{width:18px; height:18px; transition:transform .2s ease}
.more:hover svg{transform:translateX(4px)}
.fine{font-size:.92rem; color:var(--ink-mute)}

/* Buttons: square, quiet, confident */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border:1.5px solid transparent; border-radius:0; font:600 .82rem/1.1 var(--f); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease}
.btn svg{width:18px; height:18px; flex:none}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-deep)}
.btn-line{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-line:hover{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn-sm{padding:11px 18px; font-size:.74rem}
.sq{width:46px; height:46px; display:grid; place-items:center; border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; padding:0; transition:background-color .2s, color .2s}
.sq:hover{background:var(--ink); color:var(--ground)}
.sq svg{width:20px; height:20px}

/* ---------- Masthead ---------- */
.masthead{position:relative; z-index:20}
.mast-inner{max-width:calc(var(--maxw) + 128px); margin:0 auto; padding:0 var(--gut-r) 0 var(--gut); display:flex; justify-content:space-between; align-items:flex-start; gap:28px}
.crest{position:relative; z-index:6; flex:none; width:232px; display:block; padding:20px 0 0; text-decoration:none}
.crest img{width:100%; height:auto}
.mast-right{display:flex; flex-direction:column; align-items:flex-end; gap:26px; padding-top:30px; min-width:0}
.utility{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end}
.utility > a:not(.btn){display:inline-flex; align-items:center; gap:8px; font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none}
.utility > a:not(.btn):hover{color:var(--ink)}
.utility svg{width:15px; height:15px; opacity:.85}
.utility .btns{display:flex; gap:12px}
.mainnav ul{display:flex; gap:clamp(20px, 2.6vw, 42px); list-style:none; margin:0; padding:0}
.mainnav a{display:block; font-size:.92rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:4px 0 6px; border-bottom:2px solid transparent; transition:border-color .2s}
.mainnav a:hover{border-bottom-color:var(--accent)}
.menu-btn{display:none}

/* ---------- Hero ---------- */
.hero{position:relative; margin-top:22px}
.hero-inner{position:relative; max-width:calc(var(--maxw) + 128px); margin:0 auto; padding:0 var(--gut-r) 0 var(--gut)}
.hero-frame{position:relative; margin-left:0; height:clamp(440px, 66vh, 720px); overflow:hidden; background:var(--panel)}
.slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity 1.4s ease, transform 8s ease-out}
.slide.is-on{opacity:1; transform:scale(1)}
.hero-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(17,29,54,.62) 0%, rgba(17,29,54,0) 62%), linear-gradient(0deg, rgba(17,29,54,.55) 0%, rgba(17,29,54,0) 50%); pointer-events:none}
.hero-title{position:absolute; z-index:3; left:calc(var(--gut) + clamp(22px, 4vw, 64px)); right:var(--gut-r); bottom:12%; margin:0; pointer-events:none}
.ht-big{display:block; font-weight:800; text-transform:uppercase; font-size:clamp(3rem, .6rem + 7.6vw, 8.6rem); line-height:.9; letter-spacing:-.012em; color:#fff; text-shadow:0 6px 50px rgba(0,0,0,.3)}
.ht-hl{display:block; max-width:17em; margin:16px 0 0 clamp(14px, 6.5vw, 116px); font-weight:500; text-transform:uppercase; font-size:clamp(1.15rem, .5rem + 2.4vw, 2.9rem); line-height:1.38; letter-spacing:.035em}
.hero-title.swap .ht-big{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-title.swap .ht-hl{animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.hero-dots{display:flex; gap:12px; justify-content:center; margin-left:0; padding-top:22px}
.hero-dots button{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line-strong); background:transparent; padding:0; cursor:pointer}
.hero-dots button[aria-selected="true"]{background:var(--ink); border-color:var(--ink)}

/* ---------- Ethos ---------- */
.ethos{padding-block:clamp(80px, 9vw, 136px) clamp(88px, 10vw, 148px)}
.ethos-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:clamp(28px, 4vw, 64px); align-items:start}
.rule{display:block; height:1.5px; background:var(--accent); margin-top:24px}
.ethos .eyebrow{margin:16px 0 0}
.lead{font-size:clamp(1.35rem, .95rem + 1.35vw, 2.1rem); line-height:1.5; font-weight:400; color:var(--ink); max-width:33em}
.actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}

/* ---------- Campus band with callouts ---------- */
.campus{position:relative; isolation:isolate; min-height:clamp(660px, 68vw, 920px); overflow:hidden}
.campus-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; z-index:-2}
.campus::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--ground) 0%, rgba(255,255,255,.94) 27%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 88%, var(--ground) 100%)}
.campus-head{padding-top:clamp(60px, 7vw, 96px); text-align:center}
.campus-head .body{margin:0 auto; max-width:44em; color:var(--ink-soft)}
.callouts{position:absolute; left:var(--gut); right:var(--gut-r); top:46%; bottom:7%; max-width:var(--maxw); margin:0 auto}
.leaders{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.leaders polyline{fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.2; vector-effect:non-scaling-stroke}
.pin{position:absolute; left:var(--dx); top:var(--dy); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:1.5px solid #fff; background:rgba(255,255,255,.15)}
.pin::after{content:""; position:absolute; inset:3px; border-radius:50%; background:#fff}
.callout{position:absolute; left:var(--x); top:var(--y); transform:translate(0,-50%); display:flex; background:#fff; color:#18261F; box-shadow:0 18px 40px -20px rgba(0,0,0,.6); white-space:nowrap}
.callout.r{transform:translate(-100%,-50%)}
.callout b{background:var(--accent); color:#fff; font-weight:700; font-size:1rem; letter-spacing:.04em; padding:13px 15px; font-variant-numeric:tabular-nums}
.callout span{padding:13px 18px; font-size:.95rem; font-weight:500}
.callout.r b{order:2}

/* ---------- Split sections with photo collages ---------- */
.section{padding-block:clamp(84px, 10vw, 150px)}
.section.tight-top{padding-top:clamp(40px, 5vw, 72px)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(44px, 6.5vw, 104px); align-items:start}
.split.rev > .collage{order:2}
.collage{position:sticky; top:110px; aspect-ratio:1/1.1}
.collage img{position:absolute; object-fit:cover; box-shadow:0 30px 60px -30px rgba(23,38,69,.42)}
.c-big{top:0; right:0; width:76%; height:72%}
.c-small{left:0; bottom:0; width:58%; height:46%}
.split.rev .c-big{right:auto; left:0}
.split.rev .c-small{left:auto; right:0}

.stages{list-style:none; padding:0; margin:36px 0 24px; border-top:1px solid var(--line)}
.stages li{display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding:24px 0; border-bottom:1px solid var(--line)}
.num{font-weight:300; font-size:1.7rem; line-height:1.05; color:var(--label); font-variant-numeric:tabular-nums}
.stages h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; font-size:1rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px}
.stages h3 em{font-style:normal; font-weight:500; font-size:.95rem; letter-spacing:.03em; text-transform:none; color:var(--label)}
.stages p{font-size:1.02rem; color:var(--ink-soft)}

.checks{list-style:none; padding:0; margin:30px 0 36px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 30px}
.checks li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; font-size:1.02rem; line-height:1.45; color:var(--ink)}
.checks li::before{content:""; width:22px; height:22px; margin-top:1px; border:1.5px solid var(--accent); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23B9561D' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- Learning ---------- */
.wide{width:100%; aspect-ratio:21/9; object-fit:cover; box-shadow:0 34px 70px -36px rgba(23,38,69,.42)}
.learn-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(36px, 5vw, 80px); align-items:start}
.learn-text{padding-top:clamp(44px, 5vw, 70px)}
.learn-inset{justify-self:end; width:100%; max-width:390px; aspect-ratio:4/5; object-fit:cover; margin-top:-150px; position:relative; box-shadow:0 34px 70px -34px rgba(23,38,69,.42)}
.highlights{list-style:none; margin:clamp(56px, 6vw, 84px) 0 0; padding:44px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px 34px}
.highlights h3{font-size:.84rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--label); line-height:1.4; margin-bottom:10px}
.highlights p{font-size:1rem; color:var(--ink-soft)}

/* ---------- Year ---------- */
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:44px}
.head-row > div:first-child{flex:1 1 460px; min-width:0}
.head-row .title{margin-bottom:18px}
.arrows{display:flex; gap:10px}
.months{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px, 340px); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:0 var(--gut-r) 18px var(--gut); margin:0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); scroll-padding-inline:var(--gut) var(--gut-r); scrollbar-width:thin; scrollbar-color:rgba(23,38,69,.25) transparent}
.month{scroll-snap-align:start; position:relative; border:1px solid var(--line); background:var(--ground); padding:28px 28px 30px; display:flex; flex-direction:column; gap:18px}
.month-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px 12px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.month-top h3{font-size:1.85rem; font-weight:300; letter-spacing:.01em; line-height:1}
.month-top span{white-space:nowrap; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--label)}
.month ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.month li b{display:block; font-weight:600; font-size:1.02rem; line-height:1.3; color:var(--ink)}
.month li p{font-size:.96rem; line-height:1.55; color:var(--ink-soft); margin-top:4px}
.month.is-now{border-color:var(--accent); background:#FFF8F3}
.month.is-now .month-top span{background:var(--accent); color:#fff; padding:5px 9px 4px}

.band{background:var(--ground-2)}

/* ---------- Why parents ---------- */
.big-stat{font-weight:800; font-size:clamp(3.2rem, 1.6rem + 4.6vw, 6rem); line-height:.95; letter-spacing:-.01em; text-transform:uppercase; margin:6px 0 18px}
.big-stat em{font-style:normal; font-weight:300; color:var(--label)}
.medal-row{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:20px; font-weight:600; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase}
.medal-row span{display:inline-flex; align-items:center; gap:9px}
.medal-row i{width:12px; height:12px; border-radius:50%; background:var(--m)}
.facts{position:relative; margin-top:48px; border:1px solid var(--line); padding:38px 32px 30px}
.facts-dots{position:absolute; top:-6px; left:50%; transform:translateX(-50%); display:flex; gap:8px; padding:0 12px; background:var(--ground)}
.facts-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgba(23,38,69,.22); cursor:pointer}
.facts-dots button[aria-selected="true"]{background:var(--accent)}
.facts-view{overflow:hidden}
.facts-track{display:flex; transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.fact{flex:0 0 100%; min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr); gap:20px; padding-right:4px}
.fact svg{width:44px; height:44px; color:var(--label)}
.fact h3{font-size:.95rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--label); line-height:1.4; margin-bottom:8px}
.fact p{font-size:1rem; color:var(--ink-soft)}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:clamp(170px, 17vw, 250px); gap:12px; grid-auto-flow:dense}
.g{position:relative; margin:0; overflow:hidden; background:var(--panel)}
.g img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.g:hover img{transform:scale(1.05)}
.g figcaption{position:absolute; left:0; right:0; bottom:0; padding:40px 18px 14px; background:linear-gradient(0deg, rgba(17,29,54,.85), rgba(17,29,54,0)); font-size:.76rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#fff}
.g.w2{grid-column:span 2} .g.h2{grid-row:span 2}

/* ---------- Leaders ---------- */
.leaders-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.person{border:1px solid var(--line); background:var(--ground); padding:32px 30px 34px; display:flex; flex-direction:column; gap:10px}
.person .role{font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--label)}
.person h3{font-size:1.45rem; font-weight:500; line-height:1.25}
.person p{font-size:1rem; color:var(--ink-soft); margin-top:4px}

/* ---------- Admissions ---------- */
.adm-head{text-align:center; max-width:52em; margin:0 auto clamp(48px, 6vw, 80px)}
.adm-head .body{margin:0 auto}
.adm-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px, 6vw, 96px); align-items:start}
.steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.steps li{display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding:26px 0; border-bottom:1px solid var(--line)}
.steps h3{font-size:1rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px}
.steps p{font-size:1.02rem; color:var(--ink-soft)}
.steps a, .visit a:not(.more){color:var(--ink); font-weight:600; text-decoration-color:rgba(23,38,69,.35); text-underline-offset:3px}
.visit{margin-top:40px; display:grid; gap:22px; justify-items:start}
.visit div{display:grid; gap:2px}
.visit b{font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--label)}
.visit span, .visit div a{font-size:1.05rem; overflow-wrap:anywhere}
.form-panel{background:var(--panel); padding:clamp(28px, 3.6vw, 48px); border-top:3px solid var(--accent)}
.form-panel h3{font-size:1.2rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px}
.form-panel > p{color:var(--ink-soft); font-size:1rem; margin-bottom:26px}
.fields{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.field label small{font-weight:500; letter-spacing:.06em; text-transform:none; color:var(--ink-mute)}
.field input,.field select,.field textarea{width:100%; font:400 1.02rem/1.4 var(--f); color:var(--ink); background:#fff; border:1px solid rgba(23,38,69,.22); border-radius:0; padding:13px 14px; transition:border-color .2s}
.field select option{color:#111}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:24px}
.form-hint{flex:1 1 220px; font-size:.88rem; color:var(--ink-mute)}
.form-status{margin-top:18px; padding:14px 16px; border-left:3px solid var(--accent); background:var(--ground); font-size:.98rem}
.form-status a{color:var(--label); font-weight:600}

/* ---------- Footer ---------- */
.foot{ padding-block:64px calc(48px + env(safe-area-inset-bottom, 0px)); position:relative}
.foot::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--accent)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px}
.foot h4{margin:0 0 16px; font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase}
.foot p, .foot li{font-size:.98rem; color:var(--ink-soft)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.foot .gold{color:var(--label)}
.foot-links{list-style:none; margin:0; padding:0; columns:3 140px; column-gap:28px}
.foot-links li{margin-bottom:8px; break-inside:avoid}
.socials{display:flex; gap:10px; margin-top:22px}
.socials .sq{width:40px; height:40px}
.socials .sq svg{width:17px; height:17px}
.foot-base{margin-top:44px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.86rem; color:var(--ink-mute)}

/* ---------- Fixed elements ---------- */
.bar{position:fixed; z-index:50; top:0; left:0; right:0; padding-top:env(safe-area-inset-top, 0px); background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); box-shadow:0 10px 30px -20px rgba(23,38,69,.35); transform:translateY(-110%); transition:transform .35s ease}
.bar.show{transform:none}
.bar-inner{max-width:calc(var(--maxw) + 128px); margin:0 auto; padding:0 var(--gut-r) 0 var(--gut); height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.bar-brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.bar-brand i{display:grid; place-items:center}
.bar-brand img{width:48px; height:auto}
.bar-brand b{font-weight:800; font-size:.95rem; letter-spacing:.14em; text-transform:uppercase}
.bar nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
.bar nav a{font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft)}
.bar nav a:hover{color:var(--ink)}
.bar-cta{display:flex; gap:10px; align-items:center}
.bar .menu-btn{display:none}
.side-tab{position:fixed; z-index:40; right:0; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; background:var(--accent); color:#fff; text-decoration:none; padding:22px 13px; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background-color .2s}
.side-tab:hover{background:var(--accent-deep)}
.mbar{display:none}
.menu{position:fixed; inset:0; z-index:90; background-color:var(--ground-2); background-size:900px 900px; padding:calc(18px + env(safe-area-inset-top, 0px)) var(--gut-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gut); display:flex; flex-direction:column; gap:28px; overflow-y:auto; transform:translateX(100%); visibility:hidden; transition:transform .4s ease, visibility 0s .4s}
.menu.open{transform:none; visibility:visible; transition:transform .4s ease}
.menu-top{display:flex; justify-content:space-between; align-items:center}
.menu nav ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.menu nav a{display:block; padding:16px 0; border-bottom:1px solid var(--line); font-size:1.3rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; text-decoration:none}
.menu .actions{margin-top:0}
.menu .fine a{color:var(--gold)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .mainnav, .utility > a:not(.btn){display:none}
  .mast-right{flex-direction:row; align-items:center; gap:12px}
  .menu-btn{display:grid}
  .bar nav{display:none}
  .bar .menu-btn{display:grid}
  .highlights{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:920px){
  .split, .learn-grid, .adm-grid, .foot-grid{grid-template-columns:minmax(0,1fr)}
  .split.rev > .collage{order:0}
  .collage{position:relative; top:auto; max-width:620px; width:100%; aspect-ratio:1/.95}
  .learn-inset{display:none}
  .ethos-grid{grid-template-columns:minmax(0,1fr)}
  .rule{width:80px}
  .leaders-grid{grid-template-columns:minmax(0,1fr)}
  .callouts{position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:clamp(220px, 40vw, 320px) var(--gut-r) 56px var(--gut); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
  .leaders, .pin{display:none}
  .callout, .callout.r{position:static; transform:none; white-space:normal}
  .callout b, .callout.r b{order:-1}
  .callout span{flex:1}
  .campus{min-height:0}
  .campus::before{background:linear-gradient(180deg, var(--ground) 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 86%, var(--ground) 100%)}
  .side-tab{display:none}
}
@media (max-width:760px){
  .crest{width:150px; padding:12px 0 0}
  .mast-right{padding-top:18px}
  .utility .btns{display:none}
  .hero{margin-top:14px}
  .hero-frame{margin-left:0; height:clamp(380px, 64vh, 540px)}
  .hero-title{left:calc(var(--gut) + 18px); right:calc(var(--gut-r) + 18px); bottom:26px}
  .ht-big{font-size:clamp(2.4rem, 12vw, 4rem)}
  .ht-hl{margin:12px 0 0 0}
  .hero-dots{margin-left:0; justify-content:flex-start; padding-top:22px}
  .checks{grid-template-columns:minmax(0,1fr)}
  .highlights{grid-template-columns:minmax(0,1fr); gap:28px}
  .gallery{grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:150px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .callouts{grid-template-columns:minmax(0,1fr)}
  .mbar{display:grid; grid-template-columns:1fr 1fr; position:fixed; z-index:45; left:0; right:0; bottom:0; padding:10px var(--gut-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gut); gap:10px; background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(23,38,69,.35)}
  .mbar .btn{padding:14px 10px}
  body{padding-bottom:76px}
  .bar-cta .btn{display:none}
  .months{grid-auto-columns:minmax(270px, 86%)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .slide{transform:none}
}

/* ---------- Multi-page additions ---------- */
[id]{scroll-margin-top:96px}
.mainnav a[aria-current="page"]{border-bottom-color:var(--accent)}
.bar nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); padding-bottom:4px}
.menu nav a[aria-current="page"]{color:var(--gold)}
.utility > a[aria-current="page"]{color:var(--ink)}

/* Inner page opening photo */
.page-hero{position:relative; margin-top:22px}
.ph-frame{position:relative; height:clamp(320px, 50vh, 540px); overflow:hidden; background:var(--panel)}
.ph-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ph-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(17,29,54,.72) 0%, rgba(17,29,54,.1) 68%), linear-gradient(0deg, rgba(17,29,54,.5) 0%, rgba(17,29,54,0) 55%)}
.ph-text{position:absolute; z-index:2; left:clamp(22px, 4vw, 64px); right:clamp(22px, 4vw, 64px); bottom:clamp(28px, 5vw, 60px); color:#fff}
.crumbs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; padding:0; list-style:none; font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82)}
.crumbs li + li::before{content:"/"; margin-right:10px; opacity:.6}
.crumbs a{color:#fff; text-decoration:none}
.crumbs a:hover{text-decoration:underline; text-underline-offset:3px}
.page-title{font-weight:800; text-transform:uppercase; font-size:clamp(2.5rem, .9rem + 5.4vw, 5.8rem); line-height:.92; letter-spacing:-.01em; margin:0; text-shadow:0 6px 50px rgba(0,0,0,.3)}
.page-title .sub{display:block; max-width:18em; margin-top:16px; font-weight:500; font-size:clamp(1.05rem, .55rem + 1.6vw, 2rem); line-height:1.38; letter-spacing:.035em; text-shadow:none}
.ethos.compact{padding-block:clamp(60px, 7vw, 104px)}

/* Home: page tiles */
.explore{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.tile-link{position:relative; display:block; overflow:hidden; aspect-ratio:16/11; color:#fff; text-decoration:none; background:var(--panel)}
.tile-link img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s ease}
.tile-link:hover img{transform:scale(1.05)}
.tile-link::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(17,29,54,.88) 0%, rgba(17,29,54,.25) 48%, rgba(17,29,54,0) 70%)}
.tl-text{position:absolute; z-index:2; left:clamp(20px, 2.6vw, 34px); right:clamp(20px, 2.6vw, 34px); bottom:clamp(20px, 2.6vw, 32px)}
.tile-link h3{font-size:clamp(1.25rem, .9rem + 1.1vw, 1.9rem); font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px}
.tile-link p{font-size:1rem; line-height:1.55; color:rgba(255,255,255,.88); max-width:30em}
.tile-link .go{display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.tile-link .go svg{width:18px; height:18px; transition:transform .2s}
.tile-link:hover .go svg{transform:translateX(4px)}

/* Navy call-to-action band */
.cta{padding-block:clamp(84px, 9vw, 136px); text-align:center}
.cta .body{margin:0 auto; color:var(--ink-soft)}
.cta .actions{justify-content:center}

/* Short photo rows */
.gallery.row{grid-auto-rows:clamp(200px, 24vw, 340px)}

/* Pull quote */
.pull{margin:36px 0 0; padding:4px 0 4px 26px; border-left:3px solid var(--accent)}
.pull p{font-size:clamp(1.3rem, 1rem + .9vw, 1.75rem); font-weight:300; line-height:1.4; color:var(--ink)}
.pull cite{display:block; margin-top:12px; font-style:normal; font-size:.95rem; color:var(--ink-soft)}

/* Reason cards */
.reasons{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.reason{border:1px solid var(--line); background:var(--ground); padding:32px 30px 34px; display:flex; flex-direction:column; gap:12px}
.reason svg{width:42px; height:42px; color:var(--accent)}
.reason h3{font-size:.95rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--label); line-height:1.4}
.reason p{font-size:1rem; color:var(--ink-soft)}

/* Stage extras */
.stages .seen{margin-top:10px; font-size:.95rem; color:var(--ink-mute)}
.stages .seen b{font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--label); margin-right:8px}

/* Age guide table */
.table-wrap{overflow-x:auto; border-top:1px solid var(--line)}
.age-table{width:100%; border-collapse:collapse; font-size:1rem; min-width:460px}
.age-table th,.age-table td{text-align:left; padding:16px 14px 16px 0; border-bottom:1px solid var(--line); vertical-align:top}
.age-table th{font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--label)}
.age-table td:first-child{font-weight:600; color:var(--ink); white-space:nowrap}
.age-table td{color:var(--ink-soft)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; position:relative; padding:24px 48px 24px 0; font-size:1.1rem; font-weight:600; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.7rem; font-weight:300; color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 24px; color:var(--ink-soft); max-width:46em}
.two-col{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px, 6vw, 96px); align-items:start}

/* Feature columns */
.features{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 4vw, 56px)}
.feature{border-top:2px solid var(--accent); padding-top:26px}
.feature svg{width:40px; height:40px; color:var(--accent); margin-bottom:14px}
.feature h3{font-size:1.02rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:10px}
.feature p{color:var(--ink-soft); font-size:1.02rem}

/* Contact */
.contact-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
.ccard{border:1px solid var(--line); background:var(--ground); padding:30px 26px 32px; display:flex; flex-direction:column; gap:10px; min-width:0}
.ccard svg{width:28px; height:28px; color:var(--accent); margin-bottom:6px}
.ccard b{font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--label)}
.ccard a, .ccard span{font-size:1.05rem; font-weight:500; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; line-height:1.5}
.ccard a:hover{text-decoration:underline; text-underline-offset:3px}
.map{margin-top:clamp(36px, 5vw, 56px); border:1px solid var(--line); background:var(--panel); aspect-ratio:21/9}
.map iframe{display:block; width:100%; height:100%; border:0}
.map-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:18px}

@media (max-width:1180px){
  .contact-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:920px){
  .reasons, .features{grid-template-columns:minmax(0,1fr)}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .map{aspect-ratio:4/3}
}
@media (max-width:760px){
  .explore{grid-template-columns:minmax(0,1fr)}
  .tile-link{aspect-ratio:4/3}
  .page-hero{margin-top:14px}
  .ph-frame{height:clamp(300px, 52vh, 440px)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}