/* /outcomes — hand-authored page styles (refactor Phase 1, 2026-07-05).
   Replaces the generated Framer markup 1:1: every size, colour and offset
   below is measured from the original render at 390/768/1024/1440
   (QA gate: tools/qa_baseline.py compare, 0.2% per breakpoint).
   Breakpoints match the site's: <810 phone, 810-1199.98 tablet, >=1200 desktop.
   The hero keeps class yg-rmvr16 - enhance.js mounts the og-ambient backdrop
   on it and main.css owns that band's gradient + grain. The alumni carousel
   keeps the yg-1xeap0e-container + ul[draggable="false"] + li[aria-hidden]
   hooks so main.css (padding/centering/loop order) and enhance.js (loop
   buffers, controls, drag) drive it exactly like the generated page. */

/* ---- fonts (verbatim from the original page's embedded CSS; self-hosted) ---- */
/* font-display:swap added to the two Cooper Hewitt faces (the only faces
   here without it): the hero title — this page's LCP element — otherwise
   paints nothing until the face arrives (display:auto blocks ~3s) */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-display:swap;font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Medium Italic";src:url("/assets/media/assets/CmwYO4gspavfqV41DaC9m6Kp9aY.woff2");font-display:swap;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:"Source Sans 3";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/s/sourcesans3/v19/nwpDtKy2OAdR1K-IwhWudF-R3woAa8opPOrG97lwqF5JxCkSmg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@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}
/* the source ships a REAL Inter Variable italic face for the testimonial
   quote + attribution. Without it, font-style:italic synthesizes an oblique
   whose slant angle differs from the true italic - the glyph edges shear ~1px
   over the cap height and never align. Declaring the real face fixes the slant
   (and lets the italic runs sit with no horizontal nudge). */
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/N9O1YBTY0ROZrE0GiMsoMSyPbQ.woff2");font-display:swap;font-style:italic;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}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;font-family:sans-serif;-webkit-font-smoothing:antialiased}
.oc-page figure{margin:0}
.oc-page img{border:0}
/* no blanket heading reset - it out-specifies the per-element layout rules
   and eats their margins; each element owns its full margin below */

/* Inter Variable weight comes from the variation axis, matching the source */
.oc-h-where,.oc-p-many,.oc-p-below,.oc-diff,.oc-ability,.oc-quote,.oc-attr{
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;white-space:pre-wrap;
  font-feature-settings:"cv01","cv05","cv09","cv11","ss03";
  /* the source splits each word/letter into its own span, which suppresses
     inter-glyph kerning; disable kerning so line widths match to the pixel */
  font-kerning:none}
.oc-hero-title,.oc-left,.oc-cta h1,.oc-cta h2,.oc-pill p{font-kerning:none}
/* the source splits every text run into per-word (white-space:nowrap) and
   per-character (display:inline-block) spans for its entry animation. Each
   inline-block advance-rounds to a whole pixel, so glyph edges land on the
   same columns as the generated page. Replicate that structure verbatim on
   every text run to remove the sub-pixel glyph-edge drift (same fix that
   took /about-us to 0.000%). */
.oc-w{white-space:nowrap}
.oc-c{display:inline-block}

/* ---- hero (ambient band: base gradient/grain/blobs come from main.css +
   enhance.js via the yg-rmvr16 hook; no background here) ---- */
.oc-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;height:600px;padding:0 40px}
.oc-hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:100%}
.oc-hero-logo{width:322px;height:52px}
.oc-hero-title{margin:0;max-width:100%;color:#fff;text-align:center;
  font:normal 712 90px/90px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- intro (white): heading + paragraph, the middle photo row, and the
   "Below are real YG alumni" line; two decorative brand shapes bleed in ---- */
/* clip the shapes to the intro box (the source clips them in overflow:clip
   sections): the geo shape's box starts ~95px above the intro top, but the
   source hides that part - it must NOT bleed up into the dark hero. Clipping
   both axes also removes the right-edge horizontal overflow. */
.oc-intro{position:relative;padding-top:150px;padding-bottom:150px;overflow:clip}
/* two decorative brand shapes: the source 3D-rotates a natural-aspect image
   (no perspective, so it's an orthographic projection); the rotation is
   around the element centre, so the projected AABB stays centred on that
   centre - position each element so its centre sits at the measured AABB
   centre, keep the exact size + transform, and the crop/projection matches */
/* z-order (matches the source): the partner photo sits BELOW the shapes,
   the shapes below the copy - so a shape can cover the photo's corner yet
   never obscure the headings/paragraphs it overlaps */
.oc-shape{position:absolute;z-index:1}
.oc-shape img{border-radius:0}
.oc-shape-tr{width:344.281px;aspect-ratio:.41832669322709165;top:-285px;left:1218.76px;
  transform:rotate(-103deg) rotateX(-55deg)}
.oc-shape-l{width:613px;height:592px;top:211.05px;left:-256px;
  transform:rotate(-290deg) rotateX(131deg) rotateY(-7deg)}

.oc-where,.oc-p-below{position:relative;z-index:2}
.oc-where{width:min(480px,calc(100vw - 140px));margin:0 auto;text-align:center;
  /* the decorative brand shapes sit z-index:1, behind this z-index:2 block —
     correct, but at some widths they extend far enough that their colour
     shows through the letter-spacing gaps of the gray paragraph, reading as
     a tint on whichever words they pass under. An opaque backing (same as
     the page background, so no visible edge) blocks that without moving or
     resizing the shapes themselves. */
  background:#fff}
/* padding-bottom matches the source's 9px-font trailing content that makes
   this two-line box 89px tall (glyphs are top-aligned and unaffected) */
.oc-h-where{margin:0;padding-bottom:9px;font-size:40px;line-height:40px;
  letter-spacing:-1.6px;color:#323455;font-variation-settings:"opsz" 32,"wght" 700}
.oc-p-many{margin:25px 0 0;font-size:30px;line-height:30px;letter-spacing:-.6px;
  color:#717171;font-variation-settings:"opsz" 32,"wght" 600}

.oc-middle{width:min(900px,calc(100vw - 200px));margin:150px auto 0;
  display:flex;align-items:center;gap:50px}
.oc-left{flex:2;position:relative;z-index:2;margin:0;text-align:left;color:#575757;letter-spacing:-.66px;
  font-family:"Source Sans Pro Regular","Source Sans Pro Regular Placeholder",sans-serif;
  font-weight:400;font-size:22px;line-height:26.4px;white-space:pre-wrap}
.oc-bp-sm{display:none}
.oc-photo{flex:3;position:relative;z-index:0;height:569px;overflow:hidden}
.oc-photo img{display:block;width:100%;height:100%;object-fit:cover}

.oc-p-below{width:min(500px,calc(100vw - 60px));margin:150px auto 0;
  text-align:center;font-size:30px;line-height:30px;letter-spacing:-.6px;
  color:#717171;font-variation-settings:"opsz" 14,"wght" 600}
.oc-red{color:#e54e5e}

/* ---- dark band (careers heading + carousel + testimonial) ---- */
.oc-dark{background:#323455;padding-top:100px;padding-bottom:150px}
.oc-dark-head{width:min(790px,calc(100vw - 250px));margin:0 auto;text-align:left}
.oc-diff{margin:0;font-size:30px;line-height:30px;letter-spacing:-.6px;color:#fff;
  font-variation-settings:"opsz" 32,"wght" 600}
.oc-ability{margin:25px 0 0;font-size:25px;line-height:25px;letter-spacing:-.5px;
  color:#8fb3c6;font-variation-settings:"opsz" 14,"wght" 600}

/* carousel: main.css sizes .yg-1xeap0e-container (width 100%, height 744 >=810;
   padding-inline that centres the 575px card) and drives the loop buffers */
.oc-carousel{position:relative;margin-top:128px}
.oc-track{display:flex;align-items:center;gap:170px;list-style:none;margin:0;
  padding:0}
/* li generates no box (matches the source): the card <div> is the flex item,
   so width:100% resolves against the ul's padded content box and main.css's
   li>div order/visibility/aspect rules land on the card */
.oc-track>li{display:contents}
/* position:relative is load-bearing: enhance.js overlays each card with an
   absolutely-positioned profile anchor (a[data-og-alumni], inset:0). Without
   a positioned card the anchors all pin to .oc-carousel and stack — every
   click then lands on the last card's link (the all-clicks-go-to-Bryson bug,
   regressed in the 2026-07-05 hand-authoring of this page). */
.oc-card{position:relative;width:100%;height:744px;flex:0 0 auto;border-radius:16px;overflow:hidden}
.oc-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}

/* controls: red arrow circles (desktop/tablet) or dots (phone) */
.oc-controls{border:0;margin:20px 0 0;padding:0;min-width:0}
.oc-arrows{display:flex;justify-content:center;gap:10px}
.oc-arrow{width:40px;height:40px;padding:0;border:0;border-radius:40px;
  background:#e54e5e;cursor:pointer;display:flex;align-items:center;justify-content:center}
.oc-arrow img{display:block;width:40px;height:40px;object-fit:fill}
.oc-dots{display:none}

/* testimonial. The quote + attribution render in the real Inter italic face
   declared above, so they need no horizontal correction - they sit at their
   natural centred position exactly like the source. */
.oc-testi{margin-top:218px;text-align:center}
.oc-quote{width:700px;max-width:calc(100vw - 80px);
  margin:0 auto;font-style:italic;
  font-size:22px;line-height:24.2px;letter-spacing:-.44px;color:#fff;
  font-variation-settings:"opsz" 14,"wght" 600}
.oc-attr{margin:25px auto 0;font-style:italic;
  font-size:22px;line-height:22px;letter-spacing:-.44px;color:#8fb3c6;
  font-variation-settings:"opsz" 14,"wght" 600}

/* ---- CTA band (pink duotone photo) ---- */
.oc-cta{position:relative;overflow:hidden;height:600px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:rgba(0,0,0,.02)}
.oc-cta-bg{position:absolute;inset:0;z-index:0}
.oc-cta-bg img{display:block;width:100%;height:100%;object-fit:cover}
/* h1/h2 fill 72% / 53% of the band's inner width (band has 60px padding),
   which is what wraps them to two lines like the source */
.oc-cta h1{position:relative;z-index:1;margin:0;width:calc((100vw - 120px) * .72);
  color:#343458;letter-spacing:-2px;text-align:center;
  font:normal 712 50px/60px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.oc-cta h2{position:relative;z-index:1;margin:0;width:calc((100vw - 120px) * .53);
  text-align:center;color:#343458;letter-spacing:-.5px;
  font:normal 708 24px/36px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.oc-pill{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;height:40px;padding:0 15px;border-radius:8px;
  background:#fff;text-decoration:none}
.oc-pill p{margin:0;color:#323455;
  font:normal 712 14px/14px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- tablet 810-1199.98 (typography matches desktop; widths are the fluid
   min() formulas above - the narrower dark-head wraps "The ability" to a
   third line exactly like the original at 1024). The decorative shapes keep
   the same 3D transform but scale + recentre on their 1024 AABB. ---- */
@media (min-width:810px) and (max-width:1199.98px){
  .oc-shape-tr{width:250.984px;top:-210px;left:869px}
  .oc-shape-l{width:471.984px;height:450px;top:280.95px;left:-210.99px}
}

/* ---- phone <810 ---- */
@media (max-width:809.98px){
  .oc-hero{padding:0 24px}
  .oc-hero-logo{width:185.7692px;height:30px}
  .oc-hero-title{font-size:64px;line-height:64px}

  .oc-shape-tr{width:135.953px;top:-124px;left:auto;right:-60.977px}
  .oc-shape-l{width:235.984px;height:225px;top:272px;left:-111.99px}

  .oc-intro{padding-top:100px;padding-bottom:100px}
  .oc-where{width:min(480px,calc(100vw - 140px))}
  .oc-h-where{font-size:27px;line-height:27px;letter-spacing:-1.08px}
  .oc-p-many{font-size:18px;line-height:18px;letter-spacing:-.36px}

  .oc-middle{width:auto;margin:100px 0 0;flex-direction:column-reverse;
    gap:25px}
  .oc-bp-lg{display:none}
  .oc-bp-sm{display:block}
  .oc-left{flex:none;width:min(340px,calc(100vw - 50px));font-size:18px;
    line-height:21.6px;letter-spacing:-.54px}
  .oc-photo{flex:none;width:100%;height:226px}

  .oc-p-below{width:min(500px,calc(100vw - 60px));margin-top:100px;font-size:20px;
    line-height:20px;letter-spacing:-.4px}

  .oc-dark{padding-top:84px;padding-bottom:100px}
  .oc-dark-head{width:calc(100vw - 168px)}
  .oc-diff{font-size:20px;line-height:20px;letter-spacing:-.4px}
  .oc-ability{font-size:17px;line-height:17px;letter-spacing:-.34px}
  .oc-carousel{margin-top:84px}
  /* the source's slideshow component sizes the phone track's height off its
     WIDTH (H = W x 1.29357, its intrinsic ratio), so the slack around the
     centred card shrinks as the viewport widens: 61.8px at 390 -> 61.45px at
     768. A constant padding-block only matched one width (390) and left the
     track ~0.33px too tall at 768, which shifted the whole footer down ~0.33px
     into a broad 1px AA band. The aspect-ratio tracks the component at every
     phone width; align-items:center then centres the shorter card in it. */
  .oc-track{aspect-ratio:1/1.293575}
  .oc-testi{margin-top:118px}

  .oc-arrows{display:none}
  /* the phone pagination sits on a translucent black pill (radius 50) that
     shrink-wraps the seven 24px dot hit-areas (168px) and centres itself */
  .oc-dots{display:flex;gap:0;width:fit-content;margin:0 auto;
    background:rgba(0,0,0,.2);border-radius:50px}
  .oc-dot{width:24px;height:26px;padding:0;border:0;background:transparent;
    cursor:pointer;display:flex;align-items:center;justify-content:center}
  .oc-dot>div{width:6px;height:6px;border-radius:50%;background:#fff}

  .oc-quote{width:calc(100vw - 180px);font-size:18px;line-height:18px;
    letter-spacing:-.36px}
  .oc-attr{margin-top:15px;font-size:17px;line-height:17px;letter-spacing:-.34px}

  .oc-cta h1{font-size:35px;line-height:42px}
  .oc-cta h2{font-size:20px;line-height:30px}
}

/* ---- acceptance wall (white): "Where our alumni have been admitted" —
   sits below the "Read their stories" nav and above the CTA band. Uniform
   contain-fit cells give a tidy logo cloud regardless of each mark's aspect
   ratio, with no per-logo sizing to maintain. Heading matches the intro's
   Inter Variable navy display face. ---- */
.oc-schools{background:#fff;padding:120px 40px;display:flex;flex-direction:column;
  align-items:center;gap:56px}
.oc-schools-h{margin:0;max-width:760px;text-align:center;color:#323455;
  letter-spacing:-1.2px;font-size:34px;line-height:1.15;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700;font-kerning:none}
.oc-logos{list-style:none;margin:0;padding:0;max-width:1040px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:36px 52px}
.oc-logo{flex:0 0 auto;width:150px;height:80px;display:flex;
  align-items:center;justify-content:center}
.oc-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

@media (min-width:810px) and (max-width:1199.98px){
  .oc-schools{padding:110px 40px;gap:48px}
  .oc-schools-h{font-size:30px}
  .oc-logos{max-width:820px;gap:32px 44px}
  .oc-logo{width:132px;height:72px}
}

@media (max-width:809.98px){
  .oc-schools{padding:90px 24px;gap:40px}
  .oc-schools-h{font-size:24px;letter-spacing:-.8px}
  .oc-logos{gap:28px 24px}
  .oc-logo{width:88px;height:52px}
}

/* ---- alumni pull-quote under the acceptance wall (white band, navy type;
   the real Inter italic face declared above keeps the slant true). The
   figure is a flex child of .oc-schools, so the section's gap spaces it. ---- */
.oc-wall-quote{margin:16px 0 0;max-width:640px;text-align:center}
.oc-wall-quote blockquote{margin:0}
.oc-wall-quote blockquote p{margin:0;font-style:italic;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:24px;line-height:1.3;letter-spacing:-.48px;
  color:#323455;font-variation-settings:"opsz" 14,"wght" 600;font-kerning:none}
.oc-wall-quote figcaption{margin:16px 0 0;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:16px;line-height:1.4;color:#717171;
  font-variation-settings:"opsz" 14,"wght" 600}

/* ---- full acceptance list (light band): all 93 schools from the academy's
   published acceptance report, alphabetical, offer count per school.
   CSS columns with break-inside:avoid keep each name+count row intact. ---- */
.oc-accept{background:#f6f7fa;padding:120px 40px;display:flex;
  flex-direction:column;align-items:center}
.oc-accept-h{margin:0;max-width:760px;text-align:center;color:#323455;
  letter-spacing:-1.2px;font-size:34px;line-height:1.15;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700;font-kerning:none}
.oc-accept-sub{margin:20px 0 0;max-width:620px;text-align:center;color:#717171;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:18px;line-height:1.45;
  font-variation-settings:"opsz" 14,"wght" 500}
.oc-accept-list{list-style:none;margin:56px 0 0;padding:0;width:100%;
  max-width:1040px;columns:3;column-gap:56px;color:#575757;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:15px;line-height:1.35;
  font-variation-settings:"opsz" 14,"wght" 500}
.oc-accept-list li{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:8px 0;border-bottom:1px solid rgba(50,52,85,.1);
  break-inside:avoid}
/* #c8283f (the nav/footer hover red), not the brand #e54e5e: on this band
   #e54e5e is ~3.5:1 — below AA for 15px text; #c8283f is ~5.1:1 */
.oc-accept-n{flex:0 0 auto;color:#c8283f;font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 14,"wght" 700}

@media (min-width:810px) and (max-width:1199.98px){
  .oc-accept{padding:110px 40px}
  .oc-accept-h{font-size:30px}
  .oc-accept-list{max-width:820px;columns:2;column-gap:48px}
}

@media (max-width:809.98px){
  .oc-wall-quote blockquote p{font-size:19px;letter-spacing:-.38px}
  .oc-wall-quote figcaption{font-size:15px}
  .oc-accept{padding:90px 24px}
  .oc-accept-h{font-size:24px;letter-spacing:-.8px}
  .oc-accept-sub{font-size:16px}
  .oc-accept-list{margin-top:40px;columns:1;font-size:14.5px}
}