/* /approach — 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 1440/1024/390 via a
   computed-style probe (QA gate: tools/qa_baseline.py compare).
   Breakpoints: <810 phone, 810-1199.98 tablet, >=1200 desktop.
   The hero keeps class yg-1ezo1vh - enhance.js mounts the og-ambient
   backdrop on it and main.css owns that band's gradient + grain, so this
   file sets NO background on the hero. The program cards keep
   data-yg-name="maximaize" so enhance.js overlays the /programs/* links. */

/* ---- fonts (verbatim from the original page's embedded CSS; self-hosted) ---- */
@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:"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}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}
.ap-page{background:#fff}
/* zero-specificity reset (:where) so per-element layout rules below always
   win - a blanket .ap-page p{margin:0} would out-specify them and eat margins */
:where(.ap-page) :where(h1,h2,h3,h4,h5,h6,p,ol,li,figure){margin:0;padding:0}
:where(.ap-page) ol{list-style:none}
.ap-page img{border:0}

/* Inter / Cooper stacks */
/* (repeated inline below to keep each rule self-describing) */

/* shared content column: min(100vw-200, 1200) centred (120px gutters at
   1440, 100px at tablet); phone drops to 100vw-60 (30px gutters) */
.ap-wrap{width:min(100vw - 200px, 1200px);margin:0 auto}

.ap-bp-sm{display:none}

/* ---- per-character split (mirrors the generated original's entrance
   animation markup) ----
   The generator wraps every character of its Inter body/description runs
   in a display:inline-block span. inline-block rounds each glyph's advance
   to the layout grid, so a long Inter run renders a hair wider than the
   same text set continuously; over a 40-60 char line that accumulates to
   several px and shifts every glyph edge off the original. Reproducing the
   same word/char span structure on the drifting wght-600 runs restores the
   original's advance rounding and makes the runs land pixel-for-pixel.
   .ap-w = one word (nowrap so it never breaks mid-word); .ap-c = one
   character; .ap-wu = a word the original is allowed to break (its inner
   chars stay inline-block but the word itself may wrap, e.g. at a hyphen).
   Cooper Hewitt runs (hero + CTA) are a static font with no drift and stay
   continuous. */
.ap-w{white-space:nowrap}
.ap-wu{white-space:unset}
.ap-c{display:inline-block}

/* the generator renders every text block with white-space:pre-wrap; match
   it so trailing spaces at soft-wraps are handled identically (this drives
   the exact width of centred lines, hence their pixel position) */
.ap-method-h,.ap-method-p1,.ap-method-p2,.ap-hiw-title,.ap-hiw-sub,.ap-hiw-cn,.ap-hiw-cd,
.ap-dev-title,.ap-dev-sub,.ap-prog-title,.ap-prog-sub,.ap-prog-desc,.ap-prog-grade,
.ap-perc,.ap-perc-sub,.ap-beyond-h,.ap-beyond-body,.ap-cta h1,.ap-cta h2,.ap-cta-pill p{
  white-space:pre-wrap;
}

/* ============================ HERO ============================ */
.ap-hero{position:relative;overflow:hidden;height:600px;padding:0 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.ap-hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:100%}
.ap-hero-logo{width:322px;height:52px;display:block;object-fit:cover;object-position:center}
.ap-hero-title{color:#fff;text-align:center;white-space:pre-wrap;
  font:normal 712 90px/1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.ap-hero-sub{display:none}

/* ========================== THE METHOD ========================= */
.ap-method{padding:150px 0}
/* the copy column is 540 on desktop/tablet and 70% of the content width on
   phone (measured: 231@390, 378@600, 495.6@768 all == 0.7*(100vw-60)) */
.ap-method-col{width:min(540px, calc((100vw - 60px) * 0.7));margin:0 auto;text-align:center}
.ap-t-sm{display:none}
.ap-method-h{color:#000;
  font:normal 400 40px/40px "Inter Variable",Inter,sans-serif;letter-spacing:-1.6px}
.ap-method-p1{margin-top:50px;color:rgb(113,113,113);
  font:normal 400 24px/24px "Inter Variable",Inter,sans-serif;letter-spacing:-.48px}
.ap-method-p2{margin-top:25px;color:#000;
  font:normal 400 24px/24px "Inter Variable",Inter,sans-serif;letter-spacing:-.48px}
.ap-method-p2 .ap-red{color:rgb(202,65,78)}

/* ========================= HOW IT WORKS ======================== */
.ap-hiw{background:rgb(210,59,74);padding:50px 0}
.ap-hiw-inner{display:flex;gap:100px}
.ap-hiw-left{flex:1}
.ap-hiw-title{color:#fff;
  font:normal 400 30px/33px "Inter Variable",Inter,sans-serif;letter-spacing:-.9px}
.ap-hiw-sub{margin-top:15px;color:#fff;
  font:normal 400 24px/28.8px "Inter Variable",Inter,sans-serif;letter-spacing:-.72px}
.ap-hiw-cards{flex:0 0 785.7px;display:flex;flex-direction:column;gap:25px;counter-reset:hiw}
.ap-hiw-card{position:relative;border-radius:40px;background:rgba(255,255,255,.1);
  padding:25px 25px 25px 35px;counter-increment:hiw;will-change:transform}
.ap-hiw-cn{position:relative;padding-left:39px;color:#fff;
  font:normal 400 30px/33px "Inter Variable",Inter,sans-serif;letter-spacing:-.9px}
.ap-hiw-cn::before{content:counter(hiw) ".";position:absolute;left:0;top:0}
/* body text was rgba(255,255,255,.6) — ~2.6:1 on the red band (fails AA).
   Full white is ~4.7:1 and clearly readable; size/weight still separate it
   from the heavier .ap-hiw-cn title above. */
.ap-hiw-cd{margin-top:15px;color:#fff;
  font:normal 400 22px/22px "Inter Variable",Inter,sans-serif;letter-spacing:-.66px}

/* ====================== DEVELOPMENT PATHWAYS =================== */
.ap-dev{background:rgb(50,52,85);padding:100px 0}
.ap-dev-head{text-align:center}
.ap-dev-title{color:#fff;
  font:normal 400 40px/40px "Inter Variable",Inter,sans-serif;letter-spacing:-1.2px}
.ap-dev-sub{margin-top:10px;color:rgb(143,179,198);
  font:normal 400 30px/30px "Inter Variable",Inter,sans-serif;letter-spacing:-.9px}
.ap-dev-cards{margin-top:100px;display:flex;gap:35px}
.ap-prog{position:relative;flex:1;border-radius:50px;overflow:hidden;isolation:isolate;will-change:transform}
/* deliberate deviation from the source (issue #42): its fixed 691.8px cards
   filled nearly the whole viewport at 1440x900 for a title, a one-word stage
   label, a 2-3 line description and a grade range. Size the row to that
   content instead: min-height 460px, and the flex row's default stretch
   keeps the three cards equal at the tallest one. The article becomes a
   flex column so the grade's margin-top:auto still bottom-anchors it now
   that the height is content-driven; the ArtLab/Foundation trailing
   blank-line paddings only padded out the old fixed box, so they go at
   desktop (below 1200 they still set where the grade and next card land). */
@media (min-width:1200px){
  .ap-prog{display:flex;flex-direction:column;min-height:460px}
  .ap-prog-body{flex:1 1 auto;height:auto}
  .ap-prog-artlab .ap-prog-desc,
  .ap-prog-foundation .ap-prog-desc{padding-bottom:0}
}
.ap-prog-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
/* the copy sits over the full height of a busy photo, so the scrim has to
   carry contrast the whole way down, not just top/bottom. The old middle
   band (.24) left the description at ~2.5:1 white-on-photo over the bright
   spots (fails WCAG AA); .52–.54 through the description band lands every
   card at >=4.5:1 for white text while still reading as a photo. */
.ap-prog::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,18,35,.66) 0%,rgba(16,18,35,.52) 42%,rgba(16,18,35,.54) 68%,rgba(16,18,35,.64) 100%)}
.ap-prog-body{position:relative;z-index:2;height:100%;padding:30px;display:flex;flex-direction:column}
/* issue #42: the button sat top-right with an expand-in-place glyph, but the
   real interaction (enhance.js's invisible a.og-prog-link over the card) is
   navigation to the program page. Bottom-right + the ↗ glyph in the markup
   read as "go to", where the eye lands after the card's copy. */
.ap-prog-max{position:absolute;z-index:3;right:30px;bottom:30px;width:38px;height:38px;
  border:0;border-radius:11px;background:rgb(210,59,74);padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.ap-prog-max svg{width:100%;height:100%;display:block}
/* (the title's old margin-right:48px only cleared the top-right button;
   dropped with the move — the grade row shares the bottom band with the
   icon but sits left, ~160px clear of it at the narrowest desktop card) */
.ap-prog-title{color:#fff;
  font:normal 400 38px/45.6px "Inter Variable",Inter,sans-serif;letter-spacing:-.38px}
.ap-prog-sub{margin-top:15px;color:rgb(210,59,74);
  font:normal 400 30px/42px "Inter Variable",Inter,sans-serif;letter-spacing:-.3px}
.ap-prog-desc{margin-top:30px;color:#fff;text-shadow:0 1px 3px rgba(16,18,35,.55);
  font:normal 400 22px/30.8px "Inter Variable",Inter,sans-serif;letter-spacing:-.22px}
.ap-prog-grade{margin-top:auto;color:#fff;
  font:normal 400 22px/26.4px "Inter Variable",Inter,sans-serif;letter-spacing:-.22px}
/* the original's desc boxes carry trailing blank line(s) below the copy
   (a Framer fixed box); reproduce with padding so the box height = natural
   text + N lines regardless of viewport. ArtLab +1 line, Foundation +1
   line (>=810). At desktop grades is bottom-anchored so this is invisible;
   below it drives where the grade label and the next card land. */
.ap-prog-artlab .ap-prog-desc,
.ap-prog-foundation .ap-prog-desc{padding-bottom:30.8px}
/* the original enables Framer's per-text "balance" wrap on these components
   (title, sub, the Foundation + Portfolio descriptions, and the Beyond body);
   box width and font metrics are already byte-identical, so matching the
   balance flag reproduces the exact line breaks. ArtLab's description is the
   lone card left on the default greedy wrap in the original, so it is excluded
   here (it already matches greedy). */
.ap-prog-title,.ap-prog-sub,
.ap-prog-portfolio .ap-prog-desc,
.ap-beyond-body{text-wrap:balance}
/* Foundation's description balances only on the narrow desktop card (376px);
   at tablet its box is wide enough that the original wraps greedily
   ("...and structured" stays on line 1), so balance is desktop-scoped. */
@media (min-width:1200px){.ap-prog-foundation .ap-prog-desc{text-wrap:balance}}

/* ================== PERCEPTION + BEYOND SKILL ================= */
/* issue #22 watch-out: these headings run at 1em line-height (30/30, 40/40),
   so their g/y/p descenders paint BELOW the line box. The pre-rebuild
   generated page clipped exactly this copy — the recurrence signature is
   1em line-height text sitting as the last content before an overflow:clip
   (or hidden) edge with no bottom padding. This section keeps 100px bottom
   padding and no overflow on the heading's ancestors; keep it that way, or
   bump the line height if one of these ever moves flush to a clipping edge. */
.ap-beyond{padding:100px 0}
.ap-perc{color:rgb(202,65,78);
  font:normal 400 40px/40px "Inter Variable",Inter,sans-serif;letter-spacing:-1.2px}
.ap-perc-sub{margin-top:50px;color:rgb(113,113,113);
  font:normal 400 30px/30px "Inter Variable",Inter,sans-serif;letter-spacing:-.9px}
.ap-beyond-row{margin-top:100px;display:flex;align-items:center;gap:50px}
.ap-beyond-img{flex:0 0 794px;width:794px;height:417px;display:block;object-fit:cover;object-position:0% 50%;will-change:transform}
.ap-beyond-text{flex:1}
.ap-beyond-h{color:#000;
  font:normal 400 28px/28px "Inter Variable",Inter,sans-serif;letter-spacing:-.84px}
.ap-beyond-body{margin-top:25px;color:rgb(87,87,87);
  font:normal 400 22px/26.4px "Source Sans Pro Regular","Source Sans Pro",sans-serif;letter-spacing:-.66px}

/* ============================ CTA ============================= */
.ap-cta{position:relative;overflow:hidden;height:600px;background:rgba(0,0,0,.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.ap-cta-bg{position:absolute;inset:0;z-index:0}
.ap-cta-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ap-cta h1{position:relative;z-index:1;color:rgb(52,52,88);text-align:center;letter-spacing:-2px;
  font:normal 712 50px/60px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.ap-cta h2{position:relative;z-index:1;width:min(390px, calc(100vw - 120px));text-align:center;color:rgb(52,52,88);letter-spacing:-.5px;
  font:normal 708 24px/36px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.ap-cta-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}
.ap-cta-pill p{color:rgb(50,52,85);
  font:normal 712 14px/14px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* Inter is a variable font here: Framer renders every Inter run at a
   heavier axis (wght 600/700) with a stylistic-set preset, NOT the
   registered weight 400. Matching this is what makes glyph widths (and
   therefore the line wraps) line up with the original. This block MUST
   sit after the `font:` shorthand rules above - the shorthand resets
   font-variation/feature-settings, so declaring them earlier is wiped. */
.ap-method-h,.ap-hiw-title,.ap-hiw-cn,.ap-dev-title,.ap-prog-title,.ap-prog-sub,.ap-beyond-h,
.ap-method-p1,.ap-method-p2,.ap-hiw-sub,.ap-hiw-cd,.ap-dev-sub,.ap-prog-desc,.ap-prog-grade,.ap-perc,.ap-perc-sub{
  font-feature-settings:"cv01","cv05","cv09","cv11","ss03";
}
.ap-method-h,.ap-hiw-title,.ap-hiw-cn,.ap-dev-title,.ap-prog-title,.ap-prog-sub,.ap-beyond-h{
  font-variation-settings:"opsz" 32,"wght" 700;
}
.ap-method-p1,.ap-method-p2,.ap-hiw-sub,.ap-hiw-cd,.ap-dev-sub,.ap-prog-desc,.ap-prog-grade,.ap-perc,.ap-perc-sub{
  font-variation-settings:"opsz" 32,"wght" 600;
}

/* ==================== DESKTOP-ONLY (>=1200) =================== */
@media (min-width:1200px){
  /* the hero ships an empty subtitle line only in the desktop variant,
     nudging the logo+title stack up by half its height */
  .ap-hero-sub{display:block;height:42px}
}

/* ====================== TABLET + PHONE (<1200) ================ */
@media (max-width:1199.98px){
  .ap-hiw-inner{flex-direction:column;gap:50px}
  .ap-hiw-cards{flex:none}
  .ap-dev-cards{margin-top:60px;flex-direction:column;gap:35px}
  .ap-prog{flex:none;height:auto}
  .ap-prog-grade{margin-top:35px}
  .ap-beyond-img{flex:0 0 419.3px;width:419.3px}
}

/* ============================ TABLET only helpers ============= */
/* (tablet inherits the <1200 block above; no tablet-specific extras) */

/* ============================ PHONE (<810) =================== */
@media (max-width:809.98px){
  .ap-wrap{width:calc(100vw - 60px)}
  .ap-bp-lg{display:none}
  .ap-bp-sm{display:block}

  .ap-hero-logo{width:185.7692px;height:30px}
  .ap-hero-title.ap-bp-sm{font-size:67px}
  /* the 600px fixed hero reads as a big empty void on a phone (only a logo +
     one short word sit in it); size it to its content with generous padding */
  .ap-hero{height:auto;min-height:340px;padding:70px 20px}

  /* phone forces the ArtLab title onto two lines (its phone variant hard-
     breaks it); Foundation wraps naturally, Portfolio is always broken */
  .ap-t-lg{display:none}
  .ap-t-sm{display:block}

  .ap-method{padding:100px 0}
  .ap-method-h{font-size:35px;line-height:35px;letter-spacing:-1.4px}
  /* the intro copy stays 24px in the source even at 320, where the 70%-width
     column is only ~182px — long words ("independently,") then broke between
     their inline-block chars mid-word. Shrink the copy a touch on phones and
     stop the break-allowed words from splitting mid-word. */
  .ap-method-p1,.ap-method-p2{font-size:20px;line-height:26px;letter-spacing:-.4px}
  .ap-method-p1 .ap-wu,.ap-method-p2 .ap-wu{white-space:nowrap}

  .ap-dev-title{font-size:30px;line-height:30px;letter-spacing:-.9px}
  .ap-dev-sub{font-size:20px;line-height:20px;letter-spacing:-.6px}
  .ap-dev-cards{margin-top:50px;gap:25px}
  .ap-prog-grade{margin-top:30px}
  /* a 1-line title reserves a 38px box in the original (its 2-line titles
     already exceed it), so a single-line Foundation title on wide phones
     keeps the same title->subtitle gap as the two-line cards */
  .ap-prog-title{font-size:28px;line-height:33.6px;letter-spacing:-.28px;min-height:38px}
  .ap-prog-sub{margin-top:10px;font-size:28px;line-height:39.2px;letter-spacing:-.28px}
  .ap-prog-desc{margin-top:20px;font-size:20px;line-height:28px;letter-spacing:-.2px}
  .ap-prog-grade{font-size:20px;line-height:24px;letter-spacing:-.2px}
  /* trailing blank lines below the desc copy, phone line-height (28px):
     ArtLab +1 line, Foundation +2 lines; Build's HIW box is +18px */
  .ap-prog-artlab .ap-prog-desc{padding-bottom:28px}
  .ap-prog-foundation .ap-prog-desc{padding-bottom:56px}
  .ap-hiw-card:nth-child(2) .ap-hiw-cd{padding-bottom:18px}
  /* all three descriptions read at full white on phone — the source dimmed
     ArtLab/Foundation to 70/80%, but over these photos that failed WCAG AA */

  /* Beyond stacks; the phone photo is a cell (100vw-60)*1.3 wide x 232 tall,
     object-fit cover, CENTRED over the column and clipped to the column
     (100vw-60) - NOT to the full-width section. Measured from the original:
     img cell centred (imgX = colCentre - cellW/2), clip = column x30..x30+col,
     so the visible crop is the centre `col` band of a 1.3x-zoomed cover cell. */
  .ap-beyond-row{flex-direction:column;align-items:stretch;gap:50px;margin-top:100px;overflow-x:clip}
  .ap-beyond-img{flex:none;width:calc((100vw - 60px) * 1.3);height:232px;
    margin-left:calc((100vw - 60px) * -0.15)}

  /* the Perception heading drops its hard breaks on phone and wraps to the
     column (3 lines @390, 1 line @768 - the original's phone variant) */
  .ap-perc br{display:none}

  /* same fix as the hero: drop the 600px fixed height so the CTA sits to its
     content (heading + line + pill) instead of floating in a tall void */
  .ap-cta{height:auto;min-height:auto;padding:80px 30px}
  .ap-cta h1{margin:0 60px;font-size:35px;line-height:42px}
  .ap-cta h2{font-size:20px;line-height:30px}
}

/* ===================== SMALL PHONES (<=360) ================= */
@media (max-width:360px){
  /* "APPROACH" at 67px is wider than a 320px viewport, so the hero clips it
     at both edges (hero is overflow:hidden). Shrink it just on the smallest
     phones so it fits; 390/414 keep the 67px size unchanged. */
  .ap-hero-title.ap-bp-sm{font-size:52px}
}