/* Homepage — hand-authored rebuild (refactor phase). Every size/colour/offset
   measured from the original render at 1440/1024/768/390 (Playwright probes +
   the generated page's own SSR CSS). Breakpoints: <810 phone, 810-1199.98
   tablet, >=1200 desktop. The CTA band keeps class yg-92jzxg so main.css owns
   its gradient/grain and enhance.js mounts the og-ambient backdrop on it. */

/* ---- fonts (verbatim from the original page's embedded CSS) ---- */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Medium Italic";src:url("/assets/media/assets/CmwYO4gspavfqV41DaC9m6Kp9aY.woff2");font-style:normal;font-weight:708}
@font-face{font-family:"Source Sans Pro Bold";src:url("/assets/media/assets/mfJIi4ZsBj1zFYUodmv4QSL2jnU.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Source Sans Pro Regular";src:url("/assets/media/assets/alL3C3eWkOZCVYCmuhkboeZkZk.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/assets/media/assets/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}
/* overflow:clip (not hidden) — clip doesn't create a scroll container, so
   position:sticky inside the framework scrolly band still pins to the viewport */
.hp{position:relative;overflow:clip;display:flex;flex-direction:column}
.hp figure{margin:0}
.hp img{border:0}
.hp-cover{display:block;width:100%;height:100%;object-fit:cover}

/* ---- text split (word/char spans; kerning off like the original) ---- */
.hp-w{white-space:nowrap}
.hp-wu{white-space:normal}
.hp-c{display:inline-block}
/* shared Inter display type */
:where(.hp h1,.hp h2,.hp h3){margin:0;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-feature-settings:"cv01","cv09","cv11","cv05","ss03";
  font-variation-settings:"opsz" 32,"wght" 700}
.hp p{margin:0}
.w6{font-variation-settings:"opsz" 32,"wght" 600}
.w7{font-variation-settings:"opsz" 32,"wght" 700}
/* Inter feature sets on non-heading (p) text — the original's RichText preset applies these */
.hp-tier-t,.hp-tier-n,.hp-tier-d,.hp-love-body{font-feature-settings:"cv01","cv05","cv09","cv11","ss03"}
.hp-tier-g,.hp-alum-n,.hp-alum-s,.hp-alum-q,.hp-love-name,.hp-love-role{font-feature-settings:"cv01","cv05","cv09","cv11"}

/* ============ band order (flex; identical at every breakpoint) ============ */
.hp>section{flex:none}
.hp-hero{order:1}.hp-intro{order:2}.hp-stats{order:3}.hp-schools{order:4}
.hp-quotes{order:5}.hp-ac{order:6}.hp-res{order:7}.hp-fw{order:8}
.hp-eco{order:9}.hp-alumni{order:10}.hp-wf{order:11}.hp-ai{order:12}
.hp-loved{order:13}.hp-founder{order:14}.hp-edu-sec{order:15}.hp-cta{order:16}

/* ============ HERO ============ */
.hp-hero{position:relative;height:100vh;width:100%;overflow:clip}
.hp-hero-vid{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* viewport-relative offset (the band is 100vh, so a fixed pixel top
   sat proportionally lower the taller the window) — keeps the block
   high on every screen, floored so it never runs under the nav */
.hp-hero-ov{position:absolute;top:clamp(190px,26vh,300px);left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:35px;width:100%}
.hp-hero-txt{display:flex;flex-direction:column;align-items:center;gap:18px}
.hp-hero-h1{color:#fff;text-align:center;letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(48px,5vw,76px);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hp-hero-sub{color:rgb(202,65,78);text-align:center;letter-spacing:-.04em;line-height:1.25;
  font-variation-settings:"opsz" 32,"wght" 600;font-size:clamp(24px,2.4vw,36px);
  text-shadow:0 2px 20px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
/* consultation pill (baked from main.css .yg-xpyekj geometry) */
.hp-btn{display:flex;align-items:center;justify-content:center;min-width:200px;min-height:44px;
  padding:10px 26px;border-radius:100px;text-decoration:none}
.hp-btn-t{color:#fff;white-space:pre;letter-spacing:-.15px;line-height:1;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;font-weight:400;
  font-feature-settings:"cv09","cv01","cv11","cv05";font-variation-settings:"opsz" 20,"wght" 600;font-size:15px}
.hp-btn-hero{background:#c64b51}
.hp-btn-cta{background:#4d7488}
.hp-btn-cta .hp-btn-t{letter-spacing:.15px}
/* the hero CTA and the closing CTA are the two loudest links on the page
   and neither changed at all on hover (issue #89). Same treatment the
   hand-built pills use — a brightness lift and a 2px rise. */
.hp-btn{transition:filter .18s ease,transform .18s ease}
@media (hover:hover) and (pointer:fine){
  .hp-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .hp-btn{transition:none}
  .hp-btn:hover{transform:none}
}
/* hero video pause control (WCAG 2.2.2) — injected by enhance.js
   (heroPauseControl). Unlike the gallery/carousel movers, the hero video
   autoplays on every visit, so this control always exists; it sits in the
   band's bottom-right over the footage, a translucent dark chip so the
   glyph reads on any frame. aria-pressed="true" = paused → show the play
   glyph. Keyboard focus rides the global focus-visible rule. */
.og-hero-pause{position:absolute;right:20px;bottom:20px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;color:#fff;
  border:1.5px solid rgba(255,255,255,.6);background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background-color .2s,border-color .2s}
.og-hero-pause svg{display:block;width:15px;height:15px}
.og-hero-pause .og-pp-play{display:none}
.og-hero-pause[aria-pressed="true"] .og-pp-pause{display:none}
.og-hero-pause[aria-pressed="true"] .og-pp-play{display:block}
@media (hover:hover) and (pointer:fine){
  .og-hero-pause:hover{background:var(--red);border-color:var(--red)}
}
@media (prefers-reduced-motion:reduce){.og-hero-pause{transition:none}}

/* ============ INTRO (pull-quote band) ============ */
.hp-intro{background:#323455;padding:120px 300px}
.hp-intro-col{width:60%;max-width:538px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:36px;text-align:center}
.hp-intro-h{color:#fff;letter-spacing:-.04em;line-height:1;font-size:38px}
.hp-intro-sub{color:rgb(143,179,198);letter-spacing:-.02em;line-height:1;font-size:30px;
  font-variation-settings:"opsz" 32,"wght" 600}

/* ============ STATS ============ */
.hp-stats{background:#333455;display:flex;justify-content:flex-start;align-items:flex-start;
  gap:80px;padding:100px 150px}
.hp-stat{flex:1 0 0;display:flex;flex-direction:column;gap:16px;text-align:center}
.hp-stat-n{color:#fff;letter-spacing:-.04em;line-height:1;font-size:55px}
.hp-stat-l{color:rgb(186,186,186);letter-spacing:-.02em;line-height:1;font-size:22px;
  font-variation-settings:"opsz" 32,"wght" 600}

/* ============ SCHOOLS (logos) ============ */
.hp-schools{background:#fff;display:flex;flex-direction:column;align-items:center;gap:50px;padding:50px 100px}
.hp-schools-h{color:#000;text-align:center;letter-spacing:-.04em;line-height:1.2;font-size:32px}
/* row totals ~1295px at gap 50; the min() shrinks the gap on 1200–1334px
   viewports so the end logos stay on-screen instead of clipping */
.hp-logos{display:flex;align-items:center;justify-content:center;gap:min(50px,calc((100vw - 885px)/9));flex-wrap:nowrap}
.hp-logo{flex:0 0 auto}
.hp-logo-img{display:block;width:100%;height:100%;object-fit:contain}
/* per-logo boxes measured from the desktop render (order: artcenter, parsons,
   princeton, harvard, usc, ucla, pratt, cmu, risd, rice) */
.hp-logo:nth-child(1){width:65px;height:74px}
.hp-logo:nth-child(2){width:130px;height:82px}
.hp-logo:nth-child(3){width:194px;height:86px}
.hp-logo:nth-child(4){width:65px;height:74px}
.hp-logo:nth-child(5){width:65px;height:41px}
.hp-logo:nth-child(6){width:65px;height:37px}
.hp-logo:nth-child(7){width:66px;height:37px}
.hp-logo:nth-child(8){width:65px;height:46px}
.hp-logo:nth-child(9){width:65px;height:46px}
.hp-logo:nth-child(10){width:65px;height:58px}

/* ============ QUOTES (faculty rotator) ============
   Desktop freezes on ONE quote (Kelly) in a fixed band; the others stay in
   the DOM (for the content manifest) but the big track gap + overflow:hidden
   clips them off. Tablet/phone stack all four. */
.hp-quotes{position:relative;height:200px;overflow:hidden;background:#f7f7f7}
.hp-q-track{position:absolute;left:50%;top:-257px;transform:translateX(-50%);
  width:742px;display:flex;flex-direction:column;gap:200px}
.hp-quote{display:flex;align-items:center;gap:50px;width:100%}
.hp-quote-logo{flex:0 0 90px;height:68px;display:flex;align-items:center;justify-content:center}
.hp-quote-img{max-width:100%;max-height:100%;object-fit:contain}
.hp-quote-body{flex:0 0 602px;display:flex;flex-direction:column;gap:11px}
.hp-quote-t{color:rgb(113,113,113);letter-spacing:-.04em;line-height:1.2;font-size:18px;
  font-variation-settings:"opsz" 14,"wght" 600}
.hp-quote-a{color:rgb(82,82,82);letter-spacing:-.04em;line-height:1.2;font-size:16px;
  font-variation-settings:"opsz" 14,"wght" 600}

/* ---- shared two-line section head (eyebrow grey / title black) ---- */
.hp-h2-grey{color:rgb(113,113,113);letter-spacing:-.03em;line-height:1;
  font-variation-settings:"opsz" 32,"wght" 600}
.hp-h2-blk{color:#000;letter-spacing:-.03em;line-height:1}
/* brand-red emphasis inside a black headline (the results pull-quote) */
.hp-red{color:#ca414e}
.hp-h2-red{color:rgb(0,0,0);letter-spacing:-.03em;line-height:1}

/* ============ ARTCLASS (More than just art classes) ============
   Two designs, split at the desktop breakpoint (client call 2026-08-03):

   - Below 1200px this is the 2026-07 "statement act": the small two-line
     head stays a kicker and the two statements run full-width in big
     display type that enhance.js scrubs in word by word as you scroll
     (data-og-scrub in the page HTML, palette + word colours in
     main.css), with the photo closing the section underneath. The
     statement reads as motion on a phone, where a 397px copy column
     can't exist anyway.
   - At 1200px and up the original band comes back: head + body copy in
     a fixed 397px column beside a 488px-tall photo, copy set as 20px
     Source Sans grey. The scrub spans are still in the DOM there (the
     split is viewport-independent, so nothing has to be undone on
     resize) — main.css just paints them flat at this width.

   The base rules below are the statement act; the min-width:1200px block
   right after them is the original two-column band. Keep them in that
   order: the tablet/phone blocks further down are range-limited and so
   can never reach the desktop layout. */
.hp-ac{background:#fff;display:flex;flex-direction:column;align-items:stretch;gap:70px;padding:130px 100px 100px;max-width:1440px;margin:0 auto;width:100%}
.hp-ac-col{display:flex;flex-direction:column;gap:60px}
.hp-ac-head{display:flex;flex-direction:column;gap:5px}
.hp-ac-head .hp-h2-grey,.hp-ac-head .hp-h2-blk{font-size:28px;line-height:1}
.hp-ac-fig{height:auto;max-height:620px;aspect-ratio:2234/1214;border-radius:0;overflow:hidden}
.hp-ac-body{display:flex;flex-direction:column;max-width:1240px}
.hp-ac-p1,.hp-ac-p2{color:#111;letter-spacing:-.035em;line-height:1.06;font-size:clamp(30px,4.3vw,60px)}
.hp-ac-blank{font-size:clamp(18px,2.4vw,34px);line-height:1.2}

/* desktop: the original two-column band (the section's own min-height pin
   lives with the other band pins further down). aspect-ratio/max-height
   are reset explicitly so the fixed 488px height owns the photo box. */
@media (min-width:1200px){
  .hp-ac{flex-direction:row;align-items:center;gap:50px;padding:100px}
  .hp-ac-col{flex:0 0 397px;gap:50px}
  .hp-ac-fig{flex:1 1 0;height:488px;max-height:none;aspect-ratio:auto}
  .hp-ac-body{max-width:none}
  .hp-ac-p1,.hp-ac-p2{color:rgb(87,87,87);letter-spacing:-.03em;line-height:1.2;font-size:20px;
    font-family:"Source Sans Pro Regular","Inter Variable",sans-serif;font-variation-settings:normal}
  .hp-ac-blank{font-size:32px;line-height:1.2}
}

/* ============ RESULTS ============ */
.hp-res{background:#fff;display:flex;align-items:center;gap:80px;padding:50px 100px 100px;max-width:1440px;margin:0 auto;width:100%}
.hp-res-fig{flex:0 0 725px;height:654px;overflow:hidden}
.hp-res-col{flex:1 1 0;display:flex;flex-direction:column;gap:50px}
.hp-res-head{display:flex;flex-direction:column;gap:5px}
.hp-res-head .hp-h2-grey,.hp-res-head .hp-h2-blk{font-size:30px;line-height:1.1}
.hp-res-body{color:rgb(87,87,87);letter-spacing:-.03em;line-height:1.2;font-size:22px;
  font-family:"Source Sans Pro Regular","Inter Variable",sans-serif;font-variation-settings:normal}
.hp-res-body .hp-em{font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700;color:#000}

/* ============ FRAMEWORK (red band) ============ */
/* h1 = section title (leads), h2 = supporting tagline below it.
   .hp-fw-pin is display:contents by default so the base flex layout is
   untouched; enhance.js adds .hp-fw-scrolly on desktop (motion permitting)
   and the pin becomes the sticky 100vh stage — see scrolly block below. */
.hp-fw{background:#ca414e;display:flex;align-items:flex-start;gap:125px;padding:75px 100px}
.hp-fw-pin{display:contents}
.hp-fw-head{flex:0 0 418px;display:flex;flex-direction:column;gap:15px}
.hp-fw-h1{color:#fff;letter-spacing:-.03em;line-height:1.1;font-size:36px}
.hp-fw-h2{color:rgba(255,255,255,.85);letter-spacing:-.03em;line-height:1.35;font-size:20px;
  font-variation-settings:"opsz" 32,"wght" 600}
.hp-fw-rail{display:none}
.hp-fw-list{counter-reset:fw;flex:1 1 0;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:35px}
.hp-fw-item{counter-increment:fw;position:relative;display:flex;flex-direction:column;gap:5px;
  background:rgba(0,0,0,.05);border-radius:40px;padding:25px 110px 25px 35px;min-height:110px}
.hp-fw-item::before{content:counter(fw) ".";position:absolute;left:35px;top:25px;color:#fff;
  letter-spacing:-.03em;line-height:1.1;font-size:30px;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700}
.hp-fw-ic{position:absolute;right:32px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;color:#fff;opacity:.9}
.hp-fw-ic :is(path,rect,circle){vector-effect:non-scaling-stroke}
.hp-fw-t{margin-left:33px;color:#fff;letter-spacing:-.03em;line-height:1.1;font-size:30px}
.hp-fw-d{color:#fff;letter-spacing:-.03em;line-height:1;font-size:22px;
  font-variation-settings:"opsz" 32,"wght" 600}

/* -- framework scrolly (desktop only; class added by enhance.js): the band
   grows to 430vh, the stage pins for the ride, and each scroll-band lands
   the next stage card on top of the deck — passed stages compress into
   peeking layers above (the work literally stacks up). Cards use solid
   fills (the rgba glass mixed onto the band red) so deck layers can't
   bleed through the active card. -- */
@media (min-width:1200px){
  .hp-fw.hp-fw-scrolly{display:block;height:430vh;padding:0;overflow:clip}
  .hp-fw-scrolly .hp-fw-pin{display:flex;position:sticky;top:0;height:100vh;
    align-items:center;gap:125px;padding:0 100px}
  .hp-fw-scrolly .hp-fw-rail{display:flex;flex-direction:column;gap:13px;margin-top:45px}
  .hp-fw-stop{display:flex;align-items:center;gap:14px;color:#fff;opacity:.45;cursor:pointer;
    font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
    font-size:17px;letter-spacing:-.02em;font-variation-settings:"opsz" 32,"wght" 600;
    transition:opacity .3s}
  .hp-fw-stop i{font-style:normal;flex:none;display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
    font-size:14px;transition:background .3s,color .3s,border-color .3s}
  @media (hover:hover) and (pointer:fine){
    .hp-fw-stop:hover{opacity:.85}
  }
  .hp-fw-stop.done{opacity:.7}
  .hp-fw-stop.done i{background:rgba(255,255,255,.28);border-color:transparent}
  .hp-fw-stop.on{opacity:1}
  .hp-fw-stop.on i{background:#fff;color:#ca414e;border-color:#fff}
  /* the deck */
  .hp-fw-scrolly .hp-fw-list{position:relative;flex:1 1 0;display:block;height:330px}
  .hp-fw-scrolly .hp-fw-item{position:absolute;left:0;right:0;bottom:0;min-height:260px;
    background:#d75360;padding:55px 200px 55px 55px;justify-content:flex-start;gap:18px;
    transform-origin:50% 0;will-change:transform,opacity;
    transition:transform .65s cubic-bezier(.32,.72,0,1),opacity .5s ease,background .5s ease}
  .hp-fw-scrolly .hp-fw-item::before{left:55px;top:55px;font-size:38px}
  .hp-fw-scrolly .hp-fw-t{margin-left:40px;font-size:38px}
  .hp-fw-scrolly .hp-fw-d{font-size:24px;line-height:1.25;max-width:520px}
  .hp-fw-scrolly .hp-fw-ic{width:104px;height:104px;right:64px;stroke-width:3;opacity:.45;
    transform:translateY(-50%) scale(.85);transition:opacity .6s .15s,transform .6s .15s}
  /* deck states (data-yg-fw set by enhance.js): n = waiting below,
     a = active, p1..p4 = landed layers peeking above the active card */
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="n"]{transform:translateY(110vh);z-index:9}
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="a"]{transform:none;opacity:1;z-index:8;background:#d95a67;
    box-shadow:0 -22px 50px -28px rgba(0,0,0,.45)}
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="a"] .hp-fw-ic{opacity:.95;transform:translateY(-50%) scale(1)}
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="p1"]{transform:translateY(-24px) scale(.955);opacity:.55;z-index:7}
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="p2"]{transform:translateY(-44px) scale(.915);opacity:.34;z-index:6}
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="p3"]{transform:translateY(-60px) scale(.88);opacity:.2;z-index:5}
  .hp-fw-scrolly .hp-fw-item[data-yg-fw="p4"]{transform:translateY(-72px) scale(.85);opacity:.12;z-index:4}
}
/* -- framework scrolly, mid-desktop (1200–1439.98px): the full-size rig
   (418px head + 125px gap + 200px card gutter) starves the deck here, so the
   longest stage title ("Breakthrough") wraps mid-word (home.css:30 forces
   word-break on .hp headings). Scale the head, gap, gutter, title/number and
   icon down together so every title stays on one line; each value reaches
   full size by 1440px, where the block above resumes unchanged. -- */
@media (min-width:1200px) and (max-width:1439.98px){
  .hp-fw-scrolly .hp-fw-pin{gap:clamp(56px,8.7vw,125px)}
  .hp-fw-scrolly .hp-fw-head{flex-basis:clamp(300px,29vw,418px)}
  .hp-fw-scrolly .hp-fw-item{padding-right:clamp(150px,13.9vw,200px)}
  .hp-fw-scrolly .hp-fw-item::before,
  .hp-fw-scrolly .hp-fw-t{font-size:clamp(30px,2.64vw,38px)}
  .hp-fw-scrolly .hp-fw-ic{width:clamp(76px,7.22vw,104px);height:clamp(76px,7.22vw,104px);
    right:clamp(44px,4.44vw,64px)}
}

/* ============ ECOSYSTEM (tiers) ============ */
/* symmetric side padding: this was 150 left / 125 right, the only asymmetric
   desktop gutter on the page (the tablet override was already symmetric, so
   it only showed at >=1200). The 25px it takes off the content box comes out
   of the tier row, which already flexes between 1200 and 1440. */
.hp-eco{background:#323455;display:flex;flex-direction:column;gap:100px;padding:100px 150px}
.hp-eco-head{display:flex;flex-direction:column;gap:10px}
.hp-eco-h1{color:#fff;text-align:center;letter-spacing:-.03em;line-height:1;font-size:40px}
.hp-eco-h2{color:rgb(143,179,198);text-align:center;letter-spacing:-.03em;line-height:1;font-size:30px;
  font-variation-settings:"opsz" 32,"wght" 600}
.hp-tiers{display:flex;gap:50px;justify-content:flex-start}
/* flex-shrink:1 (+min-width:0) so the 3-across row contracts to fit between
   1200px and the 1440 canvas instead of overflowing off the right edge; grow
   stays 0 so cards never exceed 355px, keeping the >=1440 layout identical. */
.hp-tier{flex:0 1 355px;min-width:0;min-height:461px;display:flex;flex-direction:column;
  background:rgba(255,255,255,.1);border-radius:50px;padding:30px}
.hp-tier-hd{margin-bottom:35px}
.hp-tier-t{color:#fff;letter-spacing:-.01em;line-height:1.4;font-size:25px;
  font-family:"Inter Variable",sans-serif;font-variation-settings:"opsz" 32,"wght" 700}
.hp-tier-n{color:rgb(143,179,198);letter-spacing:-.01em;line-height:1.4;font-size:25px;
  font-family:"Inter Variable",sans-serif;font-variation-settings:"opsz" 32,"wght" 700}
.hp-tier-d{color:rgba(255,255,255,.7);letter-spacing:-.01em;line-height:1.4;font-size:20px;
  font-family:"Inter Variable",sans-serif;font-variation-settings:"opsz" 32,"wght" 600;
  white-space:pre-wrap;text-wrap:balance}
.hp-tier .hp-tier-g{color:#fff;letter-spacing:-.01em;line-height:1.2;font-size:20px;margin-top:auto;
  font-family:"Inter Variable",sans-serif;font-variation-settings:"opsz" 32,"wght" 600}

/* ============ ALUMNI ============ */
.hp-alumni{background:#fff;display:flex;flex-direction:column;gap:50px;padding:100px}
.hp-al-head{display:flex;flex-direction:column;gap:5px}
.hp-al-head .hp-h2-grey,.hp-al-head .hp-h2-blk{font-size:30px;line-height:1}
.hp-al-row{display:flex;gap:30px;justify-content:flex-start}
/* flex-shrink:1 (+min-width:0) so the 3-across row contracts to fit between
   1200px and the 1440 canvas instead of overflowing off the right edge; grow
   stays 0 so cards never exceed 393px, keeping the >=1440 layout identical. */
.hp-alum{flex:0 1 393px;min-width:0;height:587px;position:relative;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;padding:20px;color:#fff}
.hp-alum .hp-cover{position:absolute;inset:0;z-index:0}
.hp-alum:nth-child(1) .hp-cover{object-position:50% 0%}
/* White text sits over busy photos; a top+bottom scrim keeps the name/school
   and the quote legible at every width. Paints above the photo (z:0) but
   below the text (z:1). */
.hp-alum::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.58) 0%,rgba(0,0,0,.18) 26%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,.34) 76%,rgba(0,0,0,.72) 100%)}
.hp-alum-top,.hp-alum-q{position:relative;z-index:1}
.hp-alum-top{display:flex;flex-direction:column}
.hp-alum-n{letter-spacing:-.01em;line-height:1.2;font-size:22px;color:#fff;
  font-family:"Inter Variable",sans-serif;font-variation-settings:"opsz" 32,"wght" 700}
.hp-alum-s{letter-spacing:-.01em;line-height:1.2;font-size:18px;color:#fff;
  font-family:"Inter",sans-serif;font-weight:500;font-variation-settings:normal}
.hp-alum .hp-alum-q{margin-top:auto;letter-spacing:-.01em;line-height:1.4;font-size:16px;color:#fff;
  font-family:"Inter",sans-serif;font-weight:500;white-space:pre-wrap;text-wrap:balance}

/* ============ WHY FAMILIES ============ */
.hp-wf{background:#fff;display:flex;align-items:center;gap:50px;padding:97px 75px;max-width:1440px;margin:0 auto;width:100%}
.hp-wf-fig{flex:0 0 775px;height:481px;overflow:hidden}
.hp-wf-col{flex:1 1 0;display:flex;flex-direction:column;gap:50px}
.hp-wf-head{display:flex;flex-direction:column;gap:5px}
.hp-wf-head .hp-h2-grey,.hp-wf-head .hp-h2-blk{font-size:25px;line-height:1}
.hp-wf-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.hp-wf-item{display:flex;align-items:center;gap:10px}
.hp-wf-ck{flex:0 0 24px;display:flex}
.hp-wf-t{color:rgb(87,87,87);letter-spacing:-.03em;line-height:1.4;font-size:20px;
  font-family:"Source Sans Pro Regular","Inter Variable",sans-serif;font-variation-settings:normal}

/* ============ AI ERA ============ */
.hp-ai{background:#fff;display:flex;align-items:center;gap:50px;padding:100px 75px;max-width:1440px;margin:0 auto;width:100%}
.hp-ai-col{flex:0 0 354px;display:flex;flex-direction:column;gap:50px}
.hp-ai-head{display:flex;flex-direction:column;gap:5px}
.hp-ai-head .hp-h2-grey,.hp-ai-head .hp-h2-blk{font-size:30px;line-height:1}
.hp-ai-fig{flex:1 1 0;height:549px;overflow:hidden}
.hp-ai-body{display:flex;flex-direction:column}
.hp-ai-p{color:rgb(87,87,87);letter-spacing:-.03em;line-height:1.2;font-size:20px;
  font-family:"Source Sans Pro Regular","Inter Variable",sans-serif;font-variation-settings:normal}
.hp-ai-blank{font-size:18px;line-height:1.2}

/* ============ LOVED (testimonials) ============ */
.hp-loved{background:#fff;display:flex;flex-direction:column;gap:80px;padding:100px 100px 0}
.hp-love-head{display:flex;flex-direction:column;gap:5px;text-align:center}
.hp-love-head .hp-h2-red{color:#000;font-size:40px}
.hp-love-head .hp-h2-grey{color:rgb(113,113,113);font-size:40px}
.hp-love-row{display:flex;gap:25px;justify-content:center}
.hp-love-card{flex:1 1 0;max-width:349px;min-height:434px;background:#333455;border-radius:20px;padding:20px;
  display:flex;flex-direction:column;gap:10px;color:#fff}
.hp-love-q{display:block}
.hp-love-q svg{display:block}
.hp-love-body{letter-spacing:-.01em;line-height:1.4;font-size:18px;color:rgb(235,235,235);
  font-family:"Inter",sans-serif;font-weight:500;white-space:pre-wrap;text-wrap:balance}
.hp-love-b{color:#fff;font-family:"Inter Variable","Inter",sans-serif;font-weight:700;
  font-variation-settings:"wght" 700}
.hp-love-who{margin-top:auto}
.hp-love-name{letter-spacing:-.01em;line-height:1.2;font-size:13px;color:#fff;
  font-family:"Inter",sans-serif;font-weight:500}
/* role text was rgb(113,113,113) — 2.44:1 on the #333455 card (fails AA 1.4.3).
   rgb(186,186,186) is the tone the stat labels already use on this same navy
   band (.hp-stat-l): 6.14:1, and it keeps the name/role hierarchy (name #fff). */
.hp-love-role{letter-spacing:-.01em;line-height:1.2;font-size:13px;color:rgb(186,186,186);
  font-family:"Inter",sans-serif;font-weight:500}

/* ============ FOUNDER ============ */
.hp-founder{background:#fff;display:flex;justify-content:center;padding:50px}
.hp-fo-panel{background:#333455;border-radius:50px;padding:50px;max-width:1340px;width:100%;
  display:flex;align-items:center;gap:50px}
.hp-fo-fig{flex:0 0 643px;height:963px;border-radius:35px;overflow:hidden}
.hp-fo-fig .hp-cover{object-position:50% 0%}
.hp-fo-col{flex:1 1 0;display:flex;flex-direction:column;gap:16px}
.hp-fo-head{display:flex;flex-direction:column;gap:10px;margin-bottom:34px}
.hp-fo-blue{color:rgb(143,179,198);letter-spacing:-.03em;line-height:1;font-size:27px;
  font-variation-settings:"opsz" 32,"wght" 600}
.hp-fo-white{color:#fff;letter-spacing:-.03em;line-height:1;font-size:27px}
.hp-fo-body{display:flex;flex-direction:column;gap:22px}
.hp-fo-b{color:rgb(230,230,230);letter-spacing:-.03em;line-height:1.2;font-size:18px;
  font-family:"Source Sans Pro Regular","Inter Variable",sans-serif;font-variation-settings:normal;
  white-space:pre-wrap}
.hp-fo-bold{font-family:"Source Sans Pro Bold","Inter Variable",sans-serif}
.hp-fo-mob{display:none}

/* ============ EDUCATORS ============ */
.hp-edu-sec{background:#fff;display:flex;flex-direction:column;gap:26px;padding:100px}
.hp-edu-head{display:flex;flex-direction:column;gap:10px}
.hp-edu-head .hp-h2-grey,.hp-edu-head .hp-h2-blk{font-size:30px;line-height:1}
/* one gutter on both axes: the row gap is the section's own 26px rhythm
   (.hp-edu-sec gap above), the column gap was a separate 20px — the columns
   now follow the same value. */
.hp-edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hp-edu{display:flex;flex-direction:column}
.hp-edu .hp-edu-fig{height:506px;overflow:hidden;margin-bottom:14px}
.hp-edu .hp-cover{object-position:50% 0%}
.hp-edu:nth-child(2) .hp-cover{object-position:50% 100%}
.hp-edu:nth-child(5) .hp-cover{object-position:100% 100%}
.hp-edu-n{color:#000;letter-spacing:-.03em;line-height:1;font-size:18px;margin-bottom:5px;
  font-variation-settings:"opsz" 32,"wght" 700}
.hp-edu-r{color:rgb(113,113,113);letter-spacing:-.03em;line-height:1.1;font-size:16px;
  font-variation-settings:"opsz" 32,"wght" 600}

/* ============ CTA band (ambient bg from main.css via yg-92jzxg) ============ */
.hp-cta{position:relative;height:560px;overflow:clip;display:flex;align-items:center;justify-content:center;color:#fff}
.hp-cta-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:25px;
  text-align:center;max-width:770px}
.hp-cta-in .hp-btn{margin-top:25px}
.hp-cta-h1{color:#fff;text-align:center;letter-spacing:-.04em;line-height:1;font-size:40px}
.hp-cta-h2{color:#fff;text-align:center;letter-spacing:-.02em;line-height:1;font-size:30px;
  font-variation-settings:"opsz" 32,"wght" 600}

/* Desktop-only: pin each band to the original's exact (sub-pixel) height so
   cumulative rounding drift stays ~0 through the lower half. */
@media (min-width:1200px){
  .hp-ac{min-height:688.39px}
  .hp-res{min-height:804.53px}
  .hp-ai{min-height:749.38px}
  .hp-alumni{min-height:902.3px}
  .hp-founder{min-height:1163.3px}
  .hp-edu-sec{min-height:1443.8px}
}

/* ============ TABLET 810-1199.98 ============ */
@media (min-width:810px) and (max-width:1199.98px){
  .hp-hero-ov{top:clamp(170px,26vh,280px)}
  .hp-hero-h1{font-size:clamp(38px,4.6vw,46px);line-height:1.08}
  .hp-hero-sub{font-size:clamp(19px,2.3vw,23px);line-height:1.2}
  .hp-intro{padding:80px 100px}
  .hp-intro-h{font-size:29px}
  .hp-intro-sub{font-size:27px}
  .hp-stats{gap:64px;padding:100px 50px}
  .hp-stat-n{font-size:30px}
  .hp-stat-l{font-size:20px}
  .hp-schools{gap:25px;padding:100px}
  .hp-schools-h{font-size:25px}
  /* fluid columns capped at the measured 241px so the grid never outgrows
     the section (241px fixed overflowed viewports under ~1023px) */
  .hp-logos{display:grid;grid-template-columns:repeat(3,minmax(0,241px));gap:50px;justify-content:center;align-items:center;width:100%}
  .hp-logo:nth-child(1){width:100%;height:88px}
  .hp-logo:nth-child(2){width:100%;height:59px}
  .hp-logo:nth-child(3){width:100%;height:121px}
  .hp-logo:nth-child(4){width:100%;height:106px}
  .hp-logo:nth-child(5){width:100%;height:107px}
  .hp-logo:nth-child(6){width:100%;height:61px}
  .hp-logo:nth-child(7){width:100%;height:37px}
  .hp-logo:nth-child(8){width:100%;height:108px}
  .hp-logo:nth-child(9){width:100%;height:107px}
  /* Rice was dropped at tablet in the original 3x3; production shows all
     ten schools — the orphan 10th centers on its own row */
  .hp-logo:nth-child(10){width:100%;height:106px;grid-column:2}
  .hp-quotes{height:150px}
  .hp-q-track{gap:50px;top:-83px}
  .hp-quote-t{font-size:12px;line-height:1.2}
  .hp-quote-a{font-size:10px;line-height:1.2}
  /* ---- stacked two-column bands (head / image / body) via flattened col + order ---- */
  .hp-ac,.hp-res,.hp-wf,.hp-ai{flex-direction:column;align-items:stretch}
  .hp-ac-col,.hp-res-col,.hp-wf-col,.hp-ai-col{display:contents}
  .hp-ac-head,.hp-res-head,.hp-wf-head,.hp-ai-head{order:1}
  .hp-ac-fig,.hp-res-fig,.hp-wf-fig,.hp-ai-fig{order:2;flex:none}
  .hp-ac-body,.hp-res-body,.hp-wf-list,.hp-ai-body{order:3}
  /* statement act: statements before the photo (head 1 / body 2 / fig 3) */
  .hp-ac{padding:100px 50px;gap:56px}
  .hp-ac-body{max-width:none;order:2}
  .hp-ac-fig{height:auto;aspect-ratio:2234/1214;order:3}
  .hp-ac-head .hp-h2-grey,.hp-ac-head .hp-h2-blk{font-size:25px}
  .hp-res{padding:0 50px 100px;gap:15px}
  .hp-res-fig{height:834px}
  .hp-res-body{max-width:554px;font-size:20px}
  .hp-res-head .hp-h2-grey,.hp-res-head .hp-h2-blk{font-size:25px;line-height:1.1}
  .hp-fw{flex-direction:column;align-items:stretch;gap:35px;padding:85px 50px 100px}
  .hp-fw-head{flex:none;width:100%;gap:5px}
  .hp-fw-list{flex:none;width:100%;gap:35px}
  .hp-fw-item{min-height:0}
  .hp-fw-item::before{font-size:25px}
  .hp-fw-h1{font-size:28px}
  .hp-fw-h2{font-size:18px}
  .hp-fw-ic{width:42px;height:42px;right:26px}
  .hp-fw-t{font-size:25px;margin-left:28px}
  .hp-fw-d{font-size:20px}
  /* ECO (yg-y1wh19: pad 85/150/100 gap 50; tiers stacked, min-h 357) */
  .hp-eco{padding:85px 150px 100px;gap:50px}
  .hp-eco-h1,.hp-eco-h2{font-size:25px}
  .hp-tiers{flex-direction:column;gap:50px}
  .hp-tier{flex:none;width:100%;min-height:357px;padding:30px;gap:35px}
  .hp-tier-hd{margin-bottom:0}
  .hp-tier .hp-tier-g{margin-top:0;font-size:22px}
  .hp-tier-d{font-size:22px}
  /* ALUMNI (yg-1usw5r1: pad 50 gap 50; cards stacked, img 846) */
  .hp-alumni,.hp-edu-sec{padding:50px}
  .hp-al-head .hp-h2-grey,.hp-al-head .hp-h2-blk{font-size:25px}
  .hp-al-row{flex-direction:column}
  .hp-alum{flex:none;width:100%;height:846px}
  .hp-alum .hp-alum-q{font-size:20px}
  /* WF (yg-1we6ri6: pad 32 gap 20; img 595; list tight) */
  .hp-wf{padding:32px;gap:20px}
  .hp-wf-fig{height:595px}
  .hp-wf-head .hp-h2-grey,.hp-wf-head .hp-h2-blk{font-size:20px}
  .hp-wf-list{gap:0}
  .hp-wf-item{gap:0}
  .hp-wf-ck{display:none}
  .hp-wf-item::before{content:"\2022";flex:0 0 17px;color:rgb(87,87,87);font-size:16px;line-height:19.2px}
  .hp-wf-t{font-size:16px;line-height:1.2}
  /* AI (yg-en1r2o: pad 30 gap 10; img 598; body 578) */
  .hp-ai{padding:30px;gap:10px}
  .hp-ai-fig{height:598px}
  .hp-ai-head .hp-h2-grey,.hp-ai-head .hp-h2-blk{font-size:20px}
  .hp-ai-p{font-size:16px}
  .hp-ai-blank{font-size:16px}
  .hp-ai-body{max-width:578px}
  /* LOVED (yg-15tbi9u: pad 100/100/0 gap 35; cards stacked, content-height, pad 30) */
  .hp-loved{padding:100px 100px 0;gap:35px}
  .hp-love-head .hp-h2-red,.hp-love-head .hp-h2-grey{font-size:25px}
  .hp-love-row{flex-direction:column;gap:25px}
  .hp-love-card{flex:none;max-width:none;width:100%;min-height:0;padding:30px}
  .hp-love-who{margin-top:40px}
  /* FOUNDER (yg-18lo2ol: pad 20; panel column pad 38/20 gap 15; inner 802, img 888) */
  .hp-founder{padding:20px}
  .hp-fo-panel{flex-direction:column;align-items:center;padding:38px 20px;gap:15px;max-width:none}
  .hp-fo-col{display:contents}
  .hp-fo-head{order:1;margin-bottom:0;width:calc((100vw - 80px) * 0.85)}
  .hp-fo-fig{order:2;flex:none;width:calc((100vw - 80px) * 0.85);height:888px}
  .hp-fo-mob{order:3;width:calc((100vw - 80px) * 0.85)}
  .hp-fo-body{gap:18px}
  .hp-fo-desk{display:none}.hp-fo-mob{display:flex}
  .hp-fo-b{font-size:15px}
  .hp-fo-blue,.hp-fo-white{font-size:20px}
  /* EDU (yg-1tpehxp: pad 50 gap 25; 3-col grid, fig 372) */
  .hp-edu-sec{gap:25px}
  .hp-edu-head .hp-h2-grey,.hp-edu-head .hp-h2-blk{font-size:25px}
  .hp-edu-grid{gap:25px}
  .hp-edu .hp-edu-fig{height:372px;margin-bottom:16px}
  .hp-edu-n,.hp-edu-r{font-size:14px}
  /* CTA (shared-layer band, 640px) */
  .hp-cta-h1{font-size:32px}
  .hp-cta-h2{font-size:25px}
}

/* ============ PHONE <810 (geometry pinned to the original 768 render) ============ */
@media (max-width:809.98px){
  /* horizontal padding narrows the overlay (content = 100vw-110): one line at
     768, wraps to two lines each at 390 — matches the original hero copy. */
  .hp-hero-ov{top:clamp(150px,26vh,230px);padding:0 40px}
  .hp-hero-h1{font-size:clamp(32px,9vw,40px);line-height:1.08}
  /* the longest rotator phrase ("Creative Intelligence") must fit the
     one-line roll window at phone widths */
  .hp-hero-h1 .og-spin{font-size:.85em}
  .hp-hero-sub{font-size:clamp(17px,4.6vw,20px);line-height:1.25;margin-top:-6px}
  .hp-intro{padding:64px 30px}
  .hp-intro-col{width:100%}
  .hp-intro-h{font-size:20px}
  .hp-intro-sub{font-size:20px}
  .hp-stats{flex-direction:column;gap:48px;padding:64px 30px;align-items:center;text-align:center}
  .hp-stat-n{font-size:20px}
  .hp-stat-l{font-size:14px}
  /* SCHOOLS (yg-1rfwvi7: pad 50 gap 25; 3x3 grid cols 189 gap 50, rice hidden)
     Side gutter normalised to the 30px every other phone band uses — the
     source's 50px was the widest of the fourteen and pinched the logo grid
     for no reason. Vertical padding keeps the source's 50px. */
  .hp-schools{padding:50px 30px;gap:25px}
  .hp-schools-h{font-size:20px;line-height:1.2}
  /* fluid columns: (100vw - 2*gutter - 2*gap)/3; heights fixed per-logo
     (object-fit:contain scales the mark inside the fluid box). The gap is
     re-declared symmetrically in the "[4] SCHOOLS logo grid" block below. */
  .hp-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;align-items:center;width:100%}
  .hp-logo:nth-child(1){width:100%;height:88px}
  .hp-logo:nth-child(2){width:100%;height:47px}
  .hp-logo:nth-child(3){width:100%;height:95px}
  .hp-logo:nth-child(4){width:100%;height:54px}
  .hp-logo:nth-child(5){width:100%;height:53px}
  .hp-logo:nth-child(6){width:100%;height:25px}
  .hp-logo:nth-child(7){width:100%;height:33px}
  .hp-logo:nth-child(8){width:100%;height:52px}
  .hp-logo:nth-child(9){width:100%;height:55px}
  /* Rice was dropped at phone in the original 3x3; production shows all
     ten schools — the orphan 10th centers on its own row */
  .hp-logo:nth-child(10){width:100%;height:55px;grid-column:2}
  /* QUOTES (yg-2kv84l: clipped rotator 150px; logo 90 + body 275, 12/10 type) */
  .hp-quotes{height:150px}
  .hp-quote{gap:10px}
  .hp-quote-body{flex:0 0 275px}
  .hp-q-track{gap:50px;top:-83px}
  .hp-quote-t{font-size:12px;line-height:1.2}
  .hp-quote-a{font-size:10px;line-height:1.2}
  /* ---- stacked two-column bands (head / image / body) ---- */
  .hp-ac,.hp-res,.hp-wf,.hp-ai{flex-direction:column;align-items:stretch}
  .hp-ac-col,.hp-res-col,.hp-wf-col,.hp-ai-col{display:contents}
  .hp-ac-head,.hp-res-head,.hp-wf-head,.hp-ai-head{order:1}
  .hp-ac-fig,.hp-res-fig,.hp-wf-fig,.hp-ai-fig{order:2;flex:none}
  .hp-ac-body,.hp-res-body,.hp-wf-list,.hp-ai-body{order:3}
  /* AC statement act: statements before the photo, big type scaled down */
  .hp-ac{padding:90px 30px;gap:44px}
  .hp-ac-body{order:2}
  .hp-ac-fig{height:auto;aspect-ratio:708/399;order:3}
  .hp-ac-head .hp-h2-grey,.hp-ac-head .hp-h2-blk{font-size:25px}
  .hp-ac-p1,.hp-ac-p2{font-size:clamp(27px,7.6vw,32px);line-height:1.12}
  /* RES (yg-1jyy44g: pad 30 gap 15; img 639) */
  .hp-res{padding:30px;gap:15px}
  .hp-res-fig{height:auto;aspect-ratio:708/639}
  .hp-res-head .hp-h2-grey,.hp-res-head .hp-h2-blk{font-size:20px;line-height:1.1}
  /* original wraps the title to 2 lines in a ~300px head column (natural at
     390; forced at 768 where the band is full-width) */
  .hp-res-head{max-width:300px}
  .hp-res-body{font-size:14px}
  /* FW (yg-cn8twt: column, pad 30 gap 50; cards content-height) */
  .hp-fw{flex-direction:column;align-items:stretch;gap:50px;padding:30px}
  .hp-fw-head{flex:none;width:100%;gap:10px}
  .hp-fw-list{flex:none;width:100%;gap:35px}
  .hp-fw-item{min-height:0;padding-right:58px}
  .hp-fw-item::before{font-size:20px}
  .hp-fw-h1{font-size:22px;line-height:1.15}
  .hp-fw-h2{font-size:15px;line-height:1.35}
  .hp-fw-ic{width:34px;height:34px;right:20px}
  .hp-fw-t{font-size:20px;line-height:1.1;margin-left:24px}
  .hp-fw-d{font-size:14px;line-height:1.1}
  /* ECO (yg-y1wh19: pad 50/30 gap 50; tiers stacked, min-h 454) */
  .hp-eco{padding:50px 30px;gap:50px}
  .hp-eco-h1,.hp-eco-h2{font-size:20px}
  .hp-tiers{flex-direction:column;gap:40px}
  .hp-tier{flex:none;width:100%;min-height:454px;padding:30px;gap:35px}
  .hp-tier-hd{margin-bottom:0}
  .hp-tier .hp-tier-g{margin-top:0;font-size:20px}
  .hp-tier-d{font-size:20px}
  /* ALUMNI (yg-1usw5r1: pad 30 gap 50; cards stacked, img 1057) */
  .hp-alumni,.hp-edu-sec{padding:30px}
  .hp-al-head .hp-h2-grey,.hp-al-head .hp-h2-blk{font-size:20px}
  .hp-al-row{flex-direction:column}
  .hp-alum{flex:none;width:100%;height:auto;aspect-ratio:708/1057}
  .hp-alum .hp-alum-q{font-size:14px}
  /* WF (yg-a7vaig: pad 30 gap 20; img 439; bullet list) */
  .hp-wf{padding:30px;gap:20px}
  .hp-wf-fig{height:auto;aspect-ratio:708/439}
  .hp-wf-head .hp-h2-grey,.hp-wf-head .hp-h2-blk{font-size:20px}
  .hp-wf-list{gap:0}
  .hp-wf-item{gap:0}
  .hp-wf-ck{display:none}
  .hp-wf-item::before{content:"\2022";flex:0 0 14px;color:rgb(87,87,87);font-size:16px;line-height:16.8px}
  .hp-wf-t{font-size:14px;line-height:1.2}
  /* AI (yg-4gsr6: pad 30 gap 10; img 439) */
  .hp-ai{padding:30px;gap:10px}
  .hp-ai-fig{height:auto;aspect-ratio:708/439}
  .hp-ai-head .hp-h2-grey,.hp-ai-head .hp-h2-blk{font-size:20px}
  .hp-ai-p{font-size:14px}
  .hp-ai-blank{font-size:18px}
  /* LOVED (yg-15tbi9u: pad 50/30/0 gap 80; cards content-height, pad 20; body shown) */
  .hp-loved{padding:50px 30px 0;gap:80px}
  .hp-love-head .hp-h2-red,.hp-love-head .hp-h2-grey{font-size:20px}
  .hp-love-row{flex-direction:column;gap:25px}
  .hp-love-card{flex:none;max-width:none;width:100%;min-height:284px;padding:20px}
  .hp-love-who{margin-top:53px}
  .hp-love-body{font-size:14px}
  .hp-love-name,.hp-love-role{font-size:14px}
  /* FOUNDER (yg-wksldl: pad 20; panel column pad 38/20 gap 15; inner 585, img 648)
     Side gutter normalised to the 30px every other phone band uses — the
     source's 20px was the narrowest of the fourteen. The inner column stays
     85% of the panel's content width, so the calc tracks the new gutter:
     100vw - 2*30 (band) - 2*20 (panel) = 100vw - 100px. */
  .hp-founder{padding:20px 30px}
  .hp-fo-panel{flex-direction:column;align-items:center;padding:38px 20px;gap:15px;max-width:none}
  .hp-fo-col{display:contents}
  .hp-fo-head{order:1;margin-bottom:0;width:calc((100vw - 100px) * 0.85)}
  .hp-fo-fig{order:2;flex:none;width:calc((100vw - 100px) * 0.85);height:auto;aspect-ratio:585/648}
  .hp-fo-mob{order:3;width:calc((100vw - 100px) * 0.85)}
  .hp-fo-body{gap:21.5px}
  .hp-fo-desk{display:none}.hp-fo-mob{display:flex}
  .hp-fo-b{font-size:14px}
  .hp-fo-blue,.hp-fo-white{font-size:20px}
  /* EDU — two-up on phone (2026-08-03).
     The original one-per-row grid sized each portrait at the full content
     width (100vw - 60px), which is WIDER than the founder photo one band
     above ((100vw - 80px) * 0.85) — the instructors out-sized Pete, and the
     five cards ran ~5 screens of scroll. Two columns halve the width, put
     the portraits back below the founder in the visual hierarchy, and cut
     the band to three rows. The 708/895 crop ratio is kept so the
     nth-child object-position tuning above still frames the same faces. */
  .hp-edu-head .hp-h2-grey,.hp-edu-head .hp-h2-blk{font-size:30px}
  .hp-edu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .hp-edu .hp-edu-fig{height:auto;aspect-ratio:708/895;margin-bottom:10px}
  /* five educators = 2 + 2 + 1; the odd last card centers on its own row at
     one column's width instead of hanging off the left edge (the selector
     no-ops on an even head-count, so adding a sixth needs no change) */
  .hp-edu:last-child:nth-child(odd){grid-column:1 / -1;
    width:calc((100% - 14px) / 2);margin-inline:auto}
  /* names/roles step down with the column: at ~160px wide the 18/16 pair
     wrapped the longer titles ("Creative Technology Instructor") to three
     lines and crowded the next row */
  .hp-edu-n{font-size:15px}
  .hp-edu-r{font-size:13px;line-height:1.2}
  /* CTA (shared-layer band, 560px) */
  .hp-cta{height:560px}
  .hp-cta-in{padding:40px 30px;max-width:376px}
  .hp-cta-h1{font-size:20px}
  .hp-cta-h2{font-size:20px}
}

/* ---- LOVED, phone-narrow (<=390-class widths) ----
   At 768 the testimonial cards are min-height-bound (284) with a fixed
   attribution offset; below ~600px they run content-tall and the original
   fills the slack BELOW the body (attribution pinned to the card bottom of a
   taller min-height), so the shortest card ends up the tallest. Mirror that
   with margin-top:auto + a taller min-height here (768 keeps the 284 rules). */
@media (max-width:600px){
  .hp-love-card{min-height:360px}
  .hp-love-who{margin-top:auto}
}

/* ---- ECOSYSTEM tiers, phone-wide (~768) ----
   At ~768 the original tiers are 447px tall with 50px gaps (the shared phone
   defaults of 454/40 mis-place the tier text there); at 390 the 454/40 values
   keep the sensitive photo bands below eco aligned, so scope this to >600px. */
@media (min-width:601px) and (max-width:809.98px){
  .hp-tiers{gap:50px}
  .hp-tier{min-height:447px}
  /* original seats the testimonial body ~10px lower under a taller quote glyph;
     compensate the attribution margin so it stays put (390 keeps its own rules) */
  .hp-love-q{margin-bottom:10px}
  .hp-love-who{margin-top:43px}
}

/* =====================================================================
   MOBILE/TABLET LAYOUT FIXES (audit 2026-07) — desktop >=1200 untouched.
   Appended last so these win over the per-breakpoint blocks above.
   ===================================================================== */

/* [1] QUOTES — fully-visible white cards at every width, each with its
   logo, full quote and attribution, under a proper heading. The old desktop
   band mirrored the original's rotator frozen mid-scroll (grey text clipped
   on a grey band, no card, attribution cut off), which left three of the
   four educator quotes invisible above 1200px; for production every quote
   must be readable, so the card treatment now covers desktop too (as a
   2x2 grid). */
.hp-quotes{position:static;height:auto;min-height:0;overflow:visible;background:#f4f4f4;
  display:flex;flex-direction:column;gap:20px;padding:56px 30px 64px}
.hp-quotes-h{display:block;color:#1a1a1a;text-align:center;letter-spacing:-.03em;
  line-height:1.2;font-size:24px;margin:0 0 6px;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700}
.hp-q-track{position:static;left:auto;top:auto;transform:none;width:100%;
  max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hp-quote{flex-direction:row;align-items:flex-start;gap:16px;width:100%;
  background:#fff;border-radius:20px;padding:26px 24px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.hp-quote-logo{flex:0 0 64px;width:64px;height:48px;justify-content:flex-start}
.hp-quote-img{max-height:48px;max-width:64px;object-position:left center}
.hp-quote-body{flex:1 1 auto;width:auto;min-width:0;gap:10px}
/* quote = dark + semibold, attribution = lighter + regular weight, so the two
   read as different voices instead of one block of grey (both still clear
   WCAG AA on the white card: 12.6:1 and 5.0:1). */
.hp-quote-t{font-size:16px;line-height:1.45;color:#333;
  font-variation-settings:"opsz" 14,"wght" 600}
.hp-quote-a{font-size:13.5px;line-height:1.35;color:#6f6f6f;letter-spacing:-.02em;
  font-variation-settings:"opsz" 14,"wght" 450}
@media (min-width:1200px){
  .hp-quotes{padding:75px 100px}
  .hp-quotes-h{font-size:28px;margin-bottom:14px}
  .hp-q-track{max-width:1120px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .hp-quote{gap:22px;padding:28px 26px}
  .hp-quote-logo{flex:0 0 90px;width:90px;height:60px}
  .hp-quote-img{max-height:60px;max-width:90px}
}
/* On phones the logo column eats into a text column that is already narrow,
   so trim the column and the card padding to buy the quote back some width. */
@media (max-width:479.98px){
  .hp-quote{gap:14px;padding:22px 20px}
  .hp-quote-logo{flex:0 0 52px;width:52px;height:40px}
  .hp-quote-img{max-height:40px;max-width:52px}
}

/* [2] ECOSYSTEM tier cards — remove the tall fixed min-height that left a
   large void below the content on tablet/phone; let them fit content. */
@media (max-width:1199.98px){
  .hp-tier{min-height:0}
}

/* [3] INTRO -> STATS — the gap between the intro pull-quote and the "900+"
   stats (both share the same dark band); kept tighter than desktop because
   phone viewports have no room to spare, but no longer pinched shut. */
@media (max-width:809.98px){
  .hp-intro{padding-bottom:52px}
  .hp-stats{padding-top:52px}
}

/* [4] SCHOOLS logo grid — tighten the airy 50px gaps on phone/tablet. One
   value for both axes: the row/column split (32/40) was the only asymmetric
   grid gutter left on the page, and the narrower column gap also buys each
   logo back ~5px of width at 375. */
@media (max-width:809.98px){
  .hp-logos{gap:32px}
}

/* [5] ALUMNI cards — the white-text scrim now lives in the base styles
   (search "White text sits over busy photos"); it applies at every width. */


/* ============ WIDER THAN THE 1440 DESIGN CANVAS ============
   The desktop layout is authored on a 1440px canvas (every offset above
   was measured at 1440). On wider monitors, center that canvas instead
   of leaving fixed-width rows hugging the left edge while text-centered
   headings float to the viewport middle:
   - white-background bands simply cap at 1440 and center (invisible cap);
   - full-bleed colored bands keep their background edge-to-edge and
     center their content by growing the horizontal padding. */
@media (min-width:1440.02px){
  .hp-alumni,.hp-edu-sec{max-width:1440px;margin-inline:auto}
  .hp-eco{padding-left:calc((100vw - 1440px)/2 + 150px);
    padding-right:calc((100vw - 1440px)/2 + 150px)}
  .hp-fw{padding-left:calc((100vw - 1440px)/2 + 100px);
    padding-right:calc((100vw - 1440px)/2 + 100px)}
  /* in scrolly mode the section's padding lives on the sticky pin instead */
  .hp-fw.hp-fw-scrolly{padding-left:0;padding-right:0}
  .hp-fw-scrolly .hp-fw-pin{padding-left:calc((100vw - 1440px)/2 + 100px);
    padding-right:calc((100vw - 1440px)/2 + 100px)}
}

/* =====================================================================
   KINETIC BACKGROUND LAYER (2026-07) — the "creative studio" motion pass.
   All of this is decorative and rides the existing motion contracts:
   the scaffolding is baked into index.html as aria-hidden markup (a no-JS
   visitor keeps a plain, legible page — the wall glyphs sit still, the
   photos don't drift), enhance.js arms the scroll behaviour, and every
   effect is neutralised under prefers-reduced-motion. Companion JS:
   initParallax / initCountUp in enhance.js; the drifting-blob engine +
   keyframes live under "og-ambient" in main.css.
   (The decorative studio-wall line-icon glyphs that once sat on these
   bands were removed 2026-07 — they read as clutter and added nothing.)
   ===================================================================== */

/* ---- ambient breathing blobs on the remaining dark bands. Only the CTA
   band used the og-ambient engine before; the stats band and the founder
   panel now share it so the dark navy zones drift instead of sitting
   flat. Each needs a stacking context (the blobs paint at z-index:-1) and
   a clip; palettes are kept low-alpha so white copy stays crisp. ---- */
.hp-stats,.hp-eco,.hp-intro{position:relative;isolation:isolate;overflow:clip}
.hp-fo-panel{position:relative;isolation:isolate;overflow:hidden}
.hp-stats,.hp-fo-panel{
  --og-amb-1:radial-gradient(closest-side,rgba(77,116,136,.30),transparent 72%);
  --og-amb-2:radial-gradient(closest-side,rgba(202,65,78,.20),transparent 72%);
  --og-amb-3:radial-gradient(closest-side,rgba(30,42,82,.55),transparent 74%);
}
/* keep every band's real content above the decorative layers */
.hp-intro-col,.hp-stats .hp-stat,
.hp-eco-head,.hp-tiers,
.hp-fo-panel>.hp-fo-fig,.hp-fo-panel>.hp-fo-col{position:relative;z-index:1}

/* ---- dark-band composition: the intro and stats bands read as ONE
   navy block, with a fine dot grid underneath so the navy doesn't read
   as flat paint; all aria-hidden. ---- */
.hp-intro,.hp-stats,.hp-eco{
  background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1.4px);
  background-size:30px 30px}
/* intro + stats read as ONE navy composition: same colour (the bands
   shipped #323455 vs #333455) and generous, matched inner padding either
   side of the seam so the pull-quote and the numbers breathe inside one
   block instead of stacking as two crowded bands */
.hp-stats{background-color:#323455}
/* the ambient blob layer is clipped by .hp-stats' own overflow, so its
   tint stopped dead at the band's top edge and drew a hard horizontal
   line across the middle of that single navy block — it read as a border
   between the two sections. Fade the layer in over the top of the band
   so the intro and the stats meet with no edge at all. */
.hp-stats .og-ambient{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 40%)}
@media (min-width:1200px){
  .hp-intro{padding:168px 300px 96px}
  .hp-stats{padding:96px 150px 168px}
}
@media (min-width:810px) and (max-width:1199.98px){
  .hp-intro{padding:112px 100px 64px}
  .hp-stats{padding:64px 50px 128px}
}
/* ---- stat theatre: the three headline stats rise in one after another
   (og-stats-arm/on from initStudioFx; hidden state JS-armed only) while
   initCountUp ticks the numbers up from zero. ---- */
.og-stats-arm .hp-stat{opacity:0;transform:translateY(28px)}
.og-stats-arm.og-stats-on .hp-stat{opacity:1;transform:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,0,1);
  transition-delay:calc(var(--i,0)*.16s)}

/* ---- image parallax: on desktop the editorial photos are oversized
   inside their clip frame and drift within the slack as you scroll
   (enhance.js clamps the travel to the slack, so an edge can never show).
   Below 1200px the image fills the frame exactly (no slack → no drift), so
   small screens keep the original crop and pay for no compositor layer
   (the will-change hint lives inside the desktop query alongside the drift). ---- */
@media (min-width:1200px){
  .hp-px-fig{position:relative}
  .hp-px-fig>.hp-px-img{position:absolute;top:-14%;left:0;width:100%;height:128%;
    will-change:transform}
}

@media (prefers-reduced-motion:reduce){
  /* neutralise motion AND release the compositor-layer hint, so a
     reduced-motion visitor isn't charged for a GPU layer that never
     moves; the stat rise is killed with its armed hidden state forced
     visible in case the preference flips on mid-session. */
  .hp-px-img{transform:none!important;will-change:auto!important}
  .og-stats-arm .hp-stat{opacity:1!important;transform:none!important}
}


/* ---------- final CTA: stacked wireframe type field ---------- */
/* Replaces the ambient-blob background. Three rows of outlined display type
   drift horizontally as the section crosses the viewport; the middle row
   carries the brand red. The drift is decorative and lives in enhance.js, so
   with JS off the rows simply sit still and the section still reads. The type
   is aria-hidden; the real copy is the h3 pair inside .hp-cta-in. */
.hp-cta{height:auto;min-height:840px;padding:150px 0;background:#101223}
.hp-cta-type{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.2vw,20px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* scrim so the centred copy keeps its contrast over the type */
.hp-cta-type::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 52% at 50% 50%,
    rgba(16,18,35,.80) 0%,rgba(16,18,35,.50) 50%,rgba(16,18,35,0) 80%);
}
.hp-ctr{overflow:hidden}
.hp-ctr-tk{display:flex;width:max-content}
.hp-ctr-sq{display:flex;gap:.3em;padding-right:.3em}
.hp-ctr-sq span{
  display:block;white-space:nowrap;position:relative;
  font-family:"Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif;
  font-size:clamp(78px,13vw,196px);line-height:.94;letter-spacing:-.02em;
  /* fallback: if text-stroke is unavailable the word still shows, faintly
     filled, rather than vanishing into transparent with no outline */
  color:rgba(255,255,255,.11);
}
@supports ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
  .hp-ctr-sq span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.38)}
  /* offset ghost reads as an extruded edge, with no 3D engine behind it */
  .hp-ctr-sq span::after{
    content:attr(data-w);position:absolute;left:0;top:0;
    transform:translate(.055em,-.055em);
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18);
  }
  .hp-ctr-hot .hp-ctr-sq span{-webkit-text-stroke-color:rgba(214,54,78,1)}
  .hp-ctr-hot .hp-ctr-sq span::after{-webkit-text-stroke-color:rgba(214,54,78,.48)}
}
.hp-ctr-hot .hp-ctr-sq span{color:rgba(214,54,78,.16)}
@media (prefers-reduced-motion:reduce){.hp-ctr-tk{transform:none!important}}

@media (max-width:1199.98px){
  .hp-cta{min-height:720px;padding:120px 0}
}
@media (max-width:859.98px){
  .hp-cta{min-height:620px;padding:96px 0}
  .hp-ctr-sq span{font-size:clamp(56px,17vw,120px)}
  .hp-cta-type::after{
    background:radial-gradient(ellipse 88% 46% at 50% 50%,
      rgba(16,18,35,.86) 0%,rgba(16,18,35,.58) 54%,rgba(16,18,35,0) 84%);
  }
}