/* 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; only LOVED reorders) ============ */
.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}
@media (max-width:1199.98px){ .hp-loved{order:6} .hp-ac{order:7}.hp-res{order:8}
  .hp-fw{order:9}.hp-eco{order:10}.hp-alumni{order:11}.hp-wf{order:12}
  .hp-ai{order:13}.hp-founder{order:14} }

/* ============ 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}
.hp-hero-ov{position:absolute;top:400px;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:5px}
.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}

/* ============ 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:25px;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:10px;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}
.hp-logos{display:flex;align-items:center;justify-content:center;gap:50px;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}
.hp-h2-red{color:rgb(0,0,0);letter-spacing:-.03em;line-height:1}

/* ============ ARTCLASS (More than just art classes) ============ */
.hp-ac{background:#fff;display:flex;align-items:center;gap:50px;padding:100px 100px;max-width:1440px;margin:0 auto;width:100%}
.hp-ac-col{flex:0 0 397px;display:flex;flex-direction:column;gap:50px}
.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{flex:1 1 0;height:488px;border-radius:0;overflow:hidden}
.hp-ac-body{display:flex;flex-direction:column}
.hp-ac-p1{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-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:#d23b4a;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(255,255,255,.1);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:39px;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}
  .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:#d23b4a;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:56px;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}
}

/* ============ ECOSYSTEM (tiers) ============ */
.hp-eco{background:#323455;display:flex;flex-direction:column;gap:100px;padding:100px 125px 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}
.hp-tier{flex:0 0 355px;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}
.hp-alum{flex:0 0 393px;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}
.hp-edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}
.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: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;margin-top:2px}
  .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}
  .hp-logos{display:grid;grid-template-columns:repeat(3,241px);gap:50px;justify-content:center;align-items:center}
  .hp-logo:nth-child(1){width:241px;height:88px}
  .hp-logo:nth-child(2){width:241px;height:59px}
  .hp-logo:nth-child(3){width:241px;height:121px}
  .hp-logo:nth-child(4){width:241px;height:106px}
  .hp-logo:nth-child(5){width:241px;height:107px}
  .hp-logo:nth-child(6){width:241px;height:61px}
  .hp-logo:nth-child(7){width:241px;height:37px}
  .hp-logo:nth-child(8){width:241px;height:108px}
  .hp-logo:nth-child(9){width:241px;height:107px}
  .hp-logo:nth-child(10){display:none}
  .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}
  .hp-ac{padding:100px 50px;gap:21px}
  .hp-ac-fig{height:521px}
  .hp-ac-body{max-width:554px}
  .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}
  .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}
  /* Original quirk: at tablet the middle testimonial's body is clipped in a
     collapsed wrapper (persists in both motion modes), so the card is compact
     (221px) with the name bottom-aligned. Mirrored here for pixel-fidelity. */
  .hp-love-card:nth-child(2){min-height:228px}
  .hp-love-card:nth-child(2) .hp-love-body{display:none}
  .hp-love-card:nth-child(2) .hp-love-who{margin-top:auto}
  /* 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 20px}
  .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:225px;padding:0 40px}
  .hp-hero-h1{font-size:clamp(32px,9vw,40px);line-height:1.08}
  .hp-hero-sub{font-size:clamp(17px,4.6vw,20px);line-height:1.25;margin-top:2px}
  .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) */
  .hp-schools{padding:50px;gap:25px}
  .hp-schools-h{font-size:20px;line-height:1.2}
  /* fluid columns: (100vw-200)/3 -> 189px @768, ~63px @390; heights fixed
     per-logo (object-fit:contain scales the mark inside the fluid box). */
  .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}
  .hp-logo:nth-child(10){display:none}
  /* 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 (yg-18i5nt0: full-viewport section, jc-center; pad 30 gap 50; img 399) */
  .hp-ac{padding:30px;gap:50px;min-height:100vh;justify-content:center}
  .hp-ac-fig{height:auto;aspect-ratio:708/399}
  .hp-ac-head .hp-h2-grey,.hp-ac-head .hp-h2-blk{font-size:30px}
  .hp-ac-p1{font-size:22px;line-height:1.2}
  .hp-ac-p2{font-size:22px;line-height:1.2}
  /* 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:70px}
  .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}
  .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) */
  .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:auto;aspect-ratio:585/648}
  .hp-fo-mob{order:3;width:calc((100vw - 80px) * 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 (yg-1tpehxp: pad 30 gap 25; 1-column, img 895) */
  .hp-edu-head .hp-h2-grey,.hp-edu-head .hp-h2-blk{font-size:30px}
  .hp-edu-grid{grid-template-columns:1fr;gap:21px}
  .hp-edu .hp-edu-fig{height:auto;aspect-ratio:708/895;margin-bottom:15px}
  .hp-edu-n{font-size:18px}
  .hp-edu-r{font-size:16px}
  /* 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 — the desktop band is a fixed-height overflow:hidden rotator
   frozen mid-scroll (grey text clipped on a grey band, no card, attribution
   cut off). On tablet + phone, present it as clean, fully-visible white
   cards stacked vertically, each with its logo, full quote and attribution,
   under a proper heading. */
.hp-quotes-h{display:none}
@media (max-width:1199.98px){
  .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:column;align-items:flex-start;gap:14px;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 auto;width:auto;height:44px;justify-content:flex-start}
  .hp-quote-img{max-height:44px;max-width:150px}
  .hp-quote-body{flex:1 1 auto;width:100%;gap:8px}
  .hp-quote-t{font-size:16px;line-height:1.45;color:rgb(74,74,74)}
  .hp-quote-a{font-size:14px;line-height:1.3;color:rgb(60,60,60)}
}

/* [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 — tighten the empty gap between the intro pull-quote
   and the "900+" stats (both share the same dark band). */
@media (max-width:809.98px){
  .hp-intro{padding-bottom:24px}
  .hp-stats{padding-top:24px}
}

/* [4] SCHOOLS logo grid — tighten the airy row gaps on phone/tablet. */
@media (max-width:809.98px){
  .hp-logos{gap:32px 40px}
}

/* [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 + 125px)}
  .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)}
}