/*
  AARK V2 — homepage only. Built from tokens.css. Reproduces the approved
  Figma "03 — Homepage (Desktop)" / "04 — Homepage (Mobile)" pages.
  Loaded only by index.html; other pages keep their existing styles.css
  presentation until they're migrated to V2 (see Phase 5 scope note).
*/
.v2{font-family:var(--v2-font-body);color:var(--v2-color-text)}
.v2 .container{width:min(var(--v2-container),calc(100% - var(--v2-gutter-mobile)*2));margin-inline:auto}
@media(min-width:701px){.v2 .container{width:min(var(--v2-container),calc(100% - var(--v2-gutter-tablet)*2))}}
@media(min-width:1160px){.v2 .container{width:min(var(--v2-container),calc(100% - var(--v2-gutter-desktop)*2))}}

.v2 h1,.v2 h2,.v2 h3{font-family:var(--v2-font-display);font-weight:400;margin:0;color:var(--v2-color-text)}
.v2 p{margin:0}

/* ---------- shared chapter primitives ---------- */
.v2-chapter{padding:var(--v2-space-3xl) var(--v2-gutter-mobile)}
@media(min-width:701px){.v2-chapter{padding-inline:var(--v2-gutter-tablet)}}
@media(min-width:1160px){.v2-chapter{padding-inline:max(var(--v2-gutter-desktop),calc((100% - var(--v2-container))/2))}}
.v2-marker{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.v2-marker .dot{width:6px;height:6px;border-radius:50%;background:var(--v2-color-accent);flex:0 0 auto}
.v2-marker .num{font-size:12px;font-weight:600;color:var(--v2-color-text-muted);letter-spacing:.05em}
.v2-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:var(--v2-text-eyebrow);font-weight:600;color:var(--v2-color-accent)}
.v2-title-xl{font-size:var(--v2-text-display-xl);line-height:var(--v2-lh-tight);letter-spacing:-.01em}
.v2-title-l{font-size:var(--v2-text-display-l);line-height:var(--v2-lh-snug)}
.v2-italic{font-family:var(--v2-font-display);font-style:italic}
.v2-body{font-size:var(--v2-text-body-l);line-height:var(--v2-lh-relaxed);color:var(--v2-color-text-soft)}
.v2-muted{color:var(--v2-color-text-muted)}

/* ---------- buttons (consume CTA hierarchy tokens) ---------- */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 26px;border-radius:var(--v2-radius-pill);font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid transparent;transition:transform var(--v2-duration-fast) var(--v2-ease-standard),box-shadow var(--v2-duration-fast)}
.v2-btn:hover{transform:translateY(-2px)}
.v2-btn-primary{background:var(--v2-color-accent);color:#fff}
.v2-btn-primary:hover{box-shadow:var(--v2-shadow-lift)}
.v2-btn-secondary{background:var(--v2-color-primary);color:#fff}
.v2-btn-tertiary{background:transparent;border-color:var(--v2-color-text-soft);color:var(--v2-color-text)}
.v2-btn-tertiary.on-dark{border-color:rgba(255,255,255,.5);color:#fff}
.v2-btn-quiet{color:var(--v2-color-accent);font-weight:600;text-decoration:none;font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.v2-btn-row{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- images ---------- */
.v2-img{display:block;width:100%;height:100%;object-fit:cover;background:var(--v2-color-ground-tint)}
.v2-ratio-hero{aspect-ratio:var(--v2-ratio-hero)}
.v2-ratio-editorial{aspect-ratio:var(--v2-ratio-editorial)}
.v2-ratio-facility{aspect-ratio:var(--v2-ratio-facility)}
.v2-ratio-wide{aspect-ratio:var(--v2-ratio-wide)}
.v2-ratio-square{aspect-ratio:var(--v2-ratio-square)}
.v2-media{border-radius:var(--v2-radius-lg);overflow:hidden}

/* reveal-on-scroll (reuses script.js's IntersectionObserver .reveal mechanism) */
.v2 .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--v2-duration-slow) var(--v2-ease-standard),transform var(--v2-duration-slow) var(--v2-ease-standard)}
.v2 .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.v2 .reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ================= HERO =================
   Mobile: full-bleed photo with text overlaid at the bottom (per Figma's
   mobile hero — photo-forward, not a shrunk desktop stack).
   Desktop (>=901px): side-by-side split, photo right. */
.v2-hero{position:relative;display:flex;flex-direction:column;min-height:640px;color:#fff;overflow:hidden}
@media(min-width:901px){.v2-hero{flex-direction:row;align-items:stretch;min-height:0;color:var(--v2-color-text)}}
.v2-hero-media{position:absolute;inset:0;z-index:0}
@media(min-width:901px){.v2-hero-media{position:relative;inset:auto;flex:0 0 46%;order:2}}
.v2-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.v2-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(24,32,51,.94) 0%,rgba(24,32,51,.84) 55%,rgba(24,32,51,.6) 85%,rgba(24,32,51,.45) 100%)}
@media(min-width:901px){.v2-hero::before{display:none}}
/* Mobile hero text sits on the photo, so the outline CTA needs on-dark colours there. */
@media(max-width:900px){.v2-hero .v2-btn-tertiary{border-color:rgba(255,255,255,.6);color:#fff}.v2-hero .v2-marker .num{color:rgba(255,255,255,.75)}}
.v2-hero-text{position:relative;z-index:2;margin-top:auto;padding:var(--v2-space-xl) var(--v2-gutter-mobile) var(--v2-space-xl);display:flex;flex-direction:column;gap:var(--v2-space-md)}
@media(min-width:901px){.v2-hero-text{order:1;margin-top:0;flex:0 0 54%;justify-content:center;padding:var(--v2-space-2xl) var(--v2-gutter-desktop);background:var(--v2-color-ground)}}
h1.v2-hero-title{font-size:var(--v2-text-hero);line-height:1.06;letter-spacing:-.02em;color:#fff}
@media(min-width:901px){h1.v2-hero-title{color:var(--v2-color-text)}}
.v2-hero-lead{font-size:var(--v2-text-body-l);line-height:var(--v2-lh-relaxed);color:rgba(255,255,255,.88);max-width:38em}
@media(min-width:901px){.v2-hero-lead{color:var(--v2-color-text-soft)}}
.v2-hero-stats{display:flex;gap:var(--v2-space-lg);flex-wrap:wrap;margin-top:var(--v2-space-sm);padding-top:var(--v2-space-md);border-top:1px solid rgba(255,255,255,.25)}
@media(min-width:901px){.v2-hero-stats{border-top-color:var(--v2-color-border)}}
.v2-hero-stats div{display:flex;flex-direction:column;gap:2px}
.v2-hero-stats strong{font-family:var(--v2-font-display);font-size:var(--v2-text-stat);color:var(--v2-color-signal);line-height:1}
@media(min-width:901px){.v2-hero-stats strong{color:var(--v2-color-primary)}}
.v2-hero-stats small{color:rgba(255,255,255,.75);font-size:13px}
@media(min-width:901px){.v2-hero-stats small{color:var(--v2-color-text-muted)}}
.v2-hero .v2-eyebrow{color:var(--v2-color-signal)}
@media(min-width:901px){.v2-hero .v2-eyebrow{color:var(--v2-color-accent)}}

/* ================= WHY AARK ================= */
.v2-why{background:var(--v2-color-ground-alt);display:grid;gap:var(--v2-space-2xl)}
@media(min-width:901px){.v2-why{grid-template-columns:.9fr 1.1fr;align-items:start}}
.v2-why-photo{margin-bottom:var(--v2-space-md)}
.v2-why-list{display:flex;flex-direction:column}
.v2-why-item{display:grid;grid-template-columns:44px 1fr;gap:var(--v2-space-md);padding:var(--v2-space-md) 0;border-bottom:1px solid var(--v2-color-border)}
.v2-why-item:first-child{padding-top:0}
.v2-why-num{font-family:var(--v2-font-display);font-size:20px;color:var(--v2-color-accent)}
.v2-why-item h3{font-size:22px;margin-bottom:6px}
.v2-why-item p{color:var(--v2-color-text-soft);line-height:var(--v2-lh-relaxed)}

/* ================= LEARNING PHILOSOPHY ================= */
.v2-philosophy{background:var(--v2-color-ground-tint);display:flex;flex-direction:column;padding:0}
@media(min-width:901px){.v2-philosophy{flex-direction:row;align-items:stretch}}
.v2-philosophy-media{min-height:280px}
@media(min-width:901px){.v2-philosophy-media{flex:0 0 46%;min-height:auto}}
.v2-philosophy-media{position:relative;overflow:hidden}
.v2-philosophy-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.v2-philosophy-media{min-height:0;aspect-ratio:4/3}}
.v2-philosophy-text{padding:var(--v2-space-2xl) var(--v2-gutter-mobile);display:flex;flex-direction:column;gap:var(--v2-space-lg);justify-content:center}
@media(min-width:901px){.v2-philosophy-text{flex:0 0 54%;padding:var(--v2-space-2xl) var(--v2-gutter-desktop)}}
.v2-principles{display:flex;flex-direction:column;gap:var(--v2-space-sm)}
.v2-principle{display:grid;grid-template-columns:8px 1fr;gap:var(--v2-space-sm);align-items:start}
.v2-principle .dot{width:7px;height:7px;border-radius:50%;background:var(--v2-color-accent);margin-top:8px}
.v2-principle strong{display:block;font-size:16px;font-weight:600}
.v2-principle span{color:var(--v2-color-text-muted);font-size:14px;line-height:var(--v2-lh-relaxed)}

/* ================= LIFE AT AARK ================= */
.v2-life{background:var(--v2-color-ground);text-align:center}
.v2-life-head{max-width:600px;margin:0 auto var(--v2-space-2xl)}
.v2-life-head .v2-marker{justify-content:center}
.v2-life-collage{display:flex;flex-direction:column;gap:var(--v2-space-sm);text-align:left}
@media(min-width:701px){.v2-life-collage{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--v2-space-sm)}}
.v2-life-big{border-radius:var(--v2-radius-lg);overflow:hidden}
.v2-life-big img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.v2-life-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--v2-space-sm)}
.v2-life-pair div{border-radius:var(--v2-radius-md);overflow:hidden}
.v2-life-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.v2-life-pair div:last-child{margin-top:var(--v2-space-lg)}
@media(max-width:700px){.v2-life-pair div:last-child{margin-top:0}}

/* Life at AARK: two rows of school-event photos drifting in opposite
   directions (life-marquee.js duplicates each row so the loop is seamless).
   Hover or touch pauses a row; with reduced motion the rows stay still and
   can be swiped. */
.v2-life-marquee{display:flex;flex-direction:column;gap:14px;margin-inline:calc(var(--v2-gutter-mobile) * -1);text-align:left;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
@media(min-width:701px){.v2-life-marquee{margin-inline:calc(var(--v2-gutter-tablet) * -1);gap:var(--v2-space-sm)}}
@media(min-width:1160px){.v2-life-marquee{margin-inline:calc(max(var(--v2-gutter-desktop),(100vw - var(--v2-container)) / 2) * -1)}}
.lm-row{--lm-h:170px;height:var(--lm-h);overflow:hidden}
@media(min-width:701px){.lm-row{--lm-h:230px}}
@media(min-width:1100px){.lm-row{--lm-h:270px}}
.lm-track{display:flex;gap:14px;height:100%;width:max-content;will-change:transform}
.lm-item{position:relative;flex:0 0 auto;height:100%;margin:0;border-radius:var(--v2-radius-md);overflow:hidden;background:var(--v2-color-ground-tint)}
.lm-item img{display:block;height:100%;width:auto;max-width:none;object-fit:cover}
.lm-item figcaption{position:absolute;left:10px;bottom:10px;padding:5px 12px;border-radius:999px;background:rgba(27,22,48,.72);color:#fff;font-size:13px;font-weight:600}
.v2-life-marquee.is-running .lm-track{animation:lm-slide var(--lm-dur,60s) linear infinite}
.v2-life-marquee.is-running .lm-reverse .lm-track{animation-direction:reverse}
.lm-row:hover .lm-track,.lm-row.is-held .lm-track{animation-play-state:paused}
@keyframes lm-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .v2-life-marquee{-webkit-mask-image:none;mask-image:none}
  .lm-row{overflow-x:auto;scroll-snap-type:x proximity}
  .v2-life-marquee .lm-track{animation:none!important}
  .lm-item{scroll-snap-align:start}
}

/* ================= CAMPUS & EXPERIENCES ================= */
.v2-campus{background:var(--v2-color-ground-tint);text-align:center}
.v2-campus-head{max-width:600px;margin:0 auto var(--v2-space-2xl)}
.v2-campus-head .v2-marker{justify-content:center}
.v2-filmstrip{display:flex;align-items:flex-start;gap:var(--v2-space-md);overflow-x:auto;padding-bottom:8px;text-align:left;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.v2-filmstrip::-webkit-scrollbar{height:6px}
.v2-filmstrip::-webkit-scrollbar-thumb{background:var(--v2-color-border);border-radius:99px}
.v2-filmstrip-item{flex:0 0 200px;scroll-snap-align:start}
.v2-filmstrip-item img{width:100%;height:auto;aspect-ratio:var(--v2-ratio-facility);object-fit:cover;background:var(--v2-color-ground);border-radius:var(--v2-radius-md);display:block;margin-bottom:10px;transition:transform var(--v2-duration-base) var(--v2-ease-standard)}
.v2-filmstrip-item:hover img{transform:scale(1.02)}
.v2-filmstrip-item.is-tall{margin-top:0}
.v2-filmstrip-item.is-short{margin-top:40px}
@media(max-width:700px){.v2-filmstrip-item.is-short{margin-top:0}}
.v2-filmstrip-item strong{font-size:15px;font-weight:600;color:var(--v2-color-text)}
.v2-swipe-hint{display:block;margin-top:var(--v2-space-sm);font-size:12px;color:var(--v2-color-text-muted);text-align:left}
@media(min-width:900px){.v2-swipe-hint{display:none}}

/* ================= ACADEMIC TRUST ================= */
.v2-trust{background:var(--v2-color-ground-tint);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--v2-space-lg)}
.v2-trust .v2-marker{justify-content:center}
.v2-trust-stats{display:flex;gap:var(--v2-space-2xl);flex-wrap:wrap;justify-content:center}
.v2-trust-stats div{display:flex;flex-direction:column;gap:2px;align-items:center}
.v2-trust-stats strong{font-family:var(--v2-font-display);font-size:var(--v2-text-display-m);color:var(--v2-color-primary)}
.v2-trust-stats small{color:var(--v2-color-text-muted);font-size:13px}
.v2-trust-note{color:var(--v2-color-text-soft);font-size:var(--v2-text-body-m,16px);max-width:40em}

/* ================= ADMISSIONS ================= */
.v2-admissions{background:var(--v2-color-ground);text-align:center}
.v2-admissions-head{max-width:600px;margin:0 auto var(--v2-space-2xl)}
.v2-admissions-head .v2-marker{justify-content:center}
.v2-stepper{display:flex;justify-content:center;gap:var(--v2-space-xl);flex-wrap:wrap;text-align:left}
.v2-step{display:flex;gap:var(--v2-space-sm);max-width:220px;align-items:flex-start}
.v2-step .step-circle{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--v2-color-primary);color:#fff;font-family:var(--v2-font-display);font-size:17px;display:flex;align-items:center;justify-content:center}
.v2-step h3{font-size:18px;margin-bottom:4px}
.v2-step p{color:var(--v2-color-text-muted);font-size:14px;line-height:var(--v2-lh-normal)}
.v2-admissions-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--v2-space-sm);margin-top:var(--v2-space-xl)}
.v2-admissions-note{margin-top:var(--v2-space-sm);font-size:14px;color:var(--v2-color-text-muted)}
.v2-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v2-admissions-nudge{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--v2-space-md);color:var(--v2-color-accent);font-weight:600;text-decoration:none}

/* ================= CAMPUS VISIT CTA ================= */
.v2-visit-cta{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;color:#fff}
.v2-visit-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.v2-visit-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(53,22,73,.9),rgba(53,22,73,.4));z-index:1}
.v2-visit-cta-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--v2-space-md);max-width:640px;padding:0 var(--v2-gutter-mobile)}
.v2-visit-cta h2{font-size:var(--v2-text-display-xl);color:#fff;line-height:1.1}
.v2-visit-cta p{color:var(--v2-color-text-on-dark-muted);font-size:16px}

/* ================= VISIT & CONTACT =================
   Desktop: intro + contact details on the left, form card spanning the right.
   Mobile: intro -> form -> details, so the primary action comes first. */
.v2-contact{background:var(--v2-color-ground-alt)}
.v2-contact-grid{display:grid;gap:var(--v2-space-lg);grid-template-areas:"intro" "form" "details"}
.v2-contact-intro{grid-area:intro}
.v2-contact-form-card{grid-area:form}
.v2-contact-details{grid-area:details}
@media(min-width:961px){
  .v2-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"intro form" "details form";column-gap:var(--v2-space-2xl);row-gap:var(--v2-space-lg);align-items:start}
}
.v2-contact-intro .v2-body{margin-top:var(--v2-space-sm);max-width:34em}

.v2-contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--v2-color-border)}
.v2-contact-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--v2-space-sm);align-items:start;padding:18px 0;border-bottom:1px solid var(--v2-color-border)}
.v2-contact-list .icon{width:40px;height:40px;border-radius:50%;background:var(--v2-color-ground-tint);color:var(--v2-color-primary);display:grid;place-items:center}
.v2-contact-list .icon svg{width:18px;height:18px}
.v2-contact-list .label{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-color-text-muted)}
.v2-contact-list .value{display:inline-block;font-style:normal;font-size:16px;line-height:var(--v2-lh-normal);color:var(--v2-color-text);text-decoration:none;overflow-wrap:anywhere}
.v2-contact-list a.value{min-height:24px;transition:color var(--v2-duration-fast)}
.v2-contact-list a.value:hover,.v2-contact-list a.value:focus-visible{color:var(--v2-color-accent)}

.v2-contact-map{margin-top:var(--v2-space-md);border:1px solid var(--v2-color-border);border-radius:var(--v2-radius-md);overflow:hidden;background:#fff}
.v2-contact-map iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:var(--v2-color-ground-tint)}
.v2-contact-map a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 18px;border-top:1px solid var(--v2-color-border);font-weight:600;font-size:15px;color:var(--v2-color-primary);text-decoration:none}
.v2-contact-map a:hover,.v2-contact-map a:focus-visible{color:var(--v2-color-accent)}

.v2-contact-form-card{background:#fff;border:1px solid var(--v2-color-border);border-radius:var(--v2-radius-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--v2-shadow-soft)}
@media(min-width:961px){.v2-contact-form-card{position:sticky;top:100px}}
.v2-contact-form-card h3{font-size:var(--v2-text-display-m);line-height:var(--v2-lh-snug)}
.v2-contact-form-card > .v2-muted{margin-top:6px;font-size:14px}
.v2-contact-form-card .req{color:var(--v2-color-accent)}
.v2-contact-alt{margin-top:var(--v2-space-md);padding-top:var(--v2-space-md);border-top:1px solid var(--v2-color-border);font-size:15px;color:var(--v2-color-text-soft)}
.v2-contact-alt a{color:var(--v2-color-primary);font-weight:600;text-decoration:none}
.v2-contact-alt a:hover{color:var(--v2-color-accent)}

/* Form fields */
.v2-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:var(--v2-space-md)}
.v2-form .full{grid-column:1/-1}
.v2-form label{display:block;font-size:14px;font-weight:600;color:var(--v2-color-text-soft)}
.v2-form label > input,.v2-form label > select{display:block;margin-top:8px}
.v2-form label .optional{font-weight:400;color:var(--v2-color-text-muted)}
.v2-form input,.v2-form select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--v2-color-border);border-radius:12px;background:var(--v2-paper-50);font:400 15px/1.4 var(--v2-font-body);color:var(--v2-color-text);transition:border-color var(--v2-duration-fast),box-shadow var(--v2-duration-fast),background var(--v2-duration-fast)}
.v2-form input::placeholder{color:#9b97a8}
.v2-form select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f256d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;cursor:pointer}
.v2-form select:invalid{color:#9b97a8}
.v2-form select option{color:var(--v2-color-text)}
.v2-form input:hover,.v2-form select:hover{border-color:#d5c9da}
.v2-form input:focus-visible,.v2-form select:focus-visible{outline:none;border-color:var(--v2-color-primary);background-color:#fff;box-shadow:0 0 0 3px rgba(79,37,109,.16)}
.v2-form button{width:100%;margin-top:6px;font-size:16px;cursor:pointer}
.v2-form button:disabled{opacity:.6;cursor:progress;transform:none}
.v2-form .form-status{min-height:22px;font-size:14px;line-height:1.5;color:var(--v2-color-text-muted)}
.v2-form .form-status.is-success{color:#1d7a3e;font-weight:600}
.v2-form .form-status.is-error{color:#b3311f;font-weight:600}
@media(max-width:560px){.v2-form{grid-template-columns:1fr}}