/* /approach/details/* — hand-authored shared page styles (refactor Phase 1,
   2026-07-05). One template serves all seven service-detail pages
   (explorer-workshop, epanu-portfolio, epanu-academics, yg-network,
   epanu-university, pdp-personal-development-plan,
   sap-supplementary-art-portfolio); only the text and photos differ.
   Every size, colour and offset below is measured from the original
   generated render at 390/768/1024/1440 (QA gate: tools/qa_baseline.py).
   These pages are single-breakpoint in the source (no ssr-variants):
   the layout is one fluid column — content bands cap at 1000px and
   center; type does not change size across widths. */

/* ---- fonts (verbatim from the original pages' embedded CSS; files are
   self-hosted). The Cooper Hewitt faces carry their slant in the glyphs
   and are registered upright at Framer's 7xx weights. ---- */
@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 (the generated pages ship the global border-box reset; the
   shared footer and injected pill nav are sized against it) ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}
.dt-page figure{margin:0}
.dt-page img{border:0}

/* ---- no top bar rules: the injected pill nav (main.css) is the site's
   one header on every page at every width ---- */

/* ---- page column: bands cap at 1000px and center ---- */
.dt-page{min-height:100vh;display:flex;flex-direction:column;
  align-items:center;background:#fff}
.dt-hero,.dt-photos,.dt-summary,.dt-overview,.dt-outcomes{
  width:100%;max-width:1000px}

/* the original wraps every photo in an absolute-fill box; the img's own
   inline style (display:block;width/height:100%;border-radius:inherit;
   object-fit:cover) is carried over verbatim from the source markup */
.dt-fill{position:absolute;top:0;right:0;bottom:0;left:0;
  border-radius:inherit}

/* ---- hero: kicker + service name ---- */
.dt-hero{display:flex;flex-direction:column;align-items:flex-start;
  gap:15px;padding:60px 60px 30px}
/* ≥1200 the injected pill nav floats over the page top (main.css
   .og-topnav: top 14px + 64px bar = it owns y 14–78px) and these pages
   started the SERVICES kicker at the source's 60px padding edge, so the
   pill sliced the eyebrow on all seven detail pages. Start the hero at
   100px instead so the kicker clears y≈95px. Below 1200 the bar is the
   edge-to-edge docked kind and the pages already clear it — desktop only. */
@media (min-width:1200px){
  .dt-hero{padding-top:100px}
}
.dt-kicker{white-space:pre}
.dt-kicker h2{margin:0;color:#888;letter-spacing:-.7px;
  font:normal 708 24px/36px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
/* long service names (SUPPLEMENTARY ART PORTFOLIO, PERSONAL DEVELOPMENT
   PLAN, ...) are ~770px at 50px and don't fit below ~850px. The source
   forced them onto one line (white-space:pre) and hid the resulting
   sideways scroll behind a zoomed-out width=1200 viewport; on real
   device-width phones/tablets that reads as a cut-off heading with the
   whole page scrolling sideways. We let the heading wrap instead: it
   stays on one line on desktop where it fits and wraps (no page scroll)
   where it doesn't — a deliberate fix of the source's responsive bug. */
.dt-name{margin:0;white-space:normal;overflow-wrap:break-word;color:#333455;
  font:normal 400 clamp(28px,8.5vw,50px)/1.1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- photo band: fixed 800px tall; cover takes what the thumb row
   leaves (rows-less pages: the empty row still sits below its 20px gap,
   exactly like the source's empty grid) ---- */
.dt-photos{display:flex;flex-direction:column;gap:20px;height:800px;
  padding:30px 60px}
.dt-cover{position:relative;flex:1;min-height:0;border-radius:25px}
.dt-thumbrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;width:100%}
.dt-thumb{position:relative;aspect-ratio:1;border-radius:24px}

/* ---- text sections (Summary / Overview / Outcomes) ---- */
.dt-summary{padding:30px 60px 60px}
.dt-overview{padding:30px 30px 30px 60px}
.dt-outcomes{padding:30px 30px 60px 60px}
.dt-col{display:flex;flex-direction:column;align-items:flex-start;
  gap:20px;width:100%;max-width:900px}
/* heading wrappers keep the source's own-compositing-layer hint so the
   glyphs rasterize with the same phase as the original */
.dt-h2w{white-space:pre;will-change:transform}
.dt-h2w h2{margin:0;color:#323455;
  font:normal 712 35px/35px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.dt-body{width:100%;white-space:pre-wrap;word-break:break-word;
  overflow-wrap:break-word}
.dt-body p,.dt-body li{margin:0;color:rgba(50,53,84,.9);
  font:normal 400 15px/24px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.dt-body p:not(:first-child){margin-top:20px}
.dt-summary .dt-body p{color:#333455}
.dt-body strong{font-weight:bolder}
/* numbered outcomes: the source hangs the counter in the ol's padding
   channel (absolute ::before at the ol edge, 2ch text indent) */
.dt-body ol{margin:0;padding:0;position:relative;list-style:none}
.dt-body li{counter-increment:list-item;padding-inline-start:2ch;
  list-style:none}
.dt-body ol>li::before{content:counter(list-item) ".";
  font-variant-numeric:tabular-nums;position:absolute;inset-inline-start:0}
/* the 24px-tall closing spacer the source keeps under the list */
.dt-endspacer{width:100%;min-height:24px}
/* roster photo cell (yg-network): one square in a 3-across grid */
.dt-grid{display:grid;grid-template-columns:repeat(3,minmax(1px,1fr));
  gap:10px;width:100%}

/* ---- CTA band (full-bleed; the photo asset itself is the pink
   duotone, the tint sheet sits between photo and text) ---- */
.dt-cta{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
  width:100%;height:600px;padding:60px}
.dt-tint{position:absolute;top:0;right:0;bottom:0;left:0;
  background:#00000005}
.dt-cta h1{position:relative;z-index:1;margin:0;max-width:100%;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;
  text-align:center;color:#343458;letter-spacing:-2px;
  font:normal 712 50px/60px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.dt-cta h2{position:relative;z-index:1;margin:0;width:390px;max-width:100%;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;
  text-align:center;color:#343458;letter-spacing:-.5px;
  font:normal 708 24px/36px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.dt-pill{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;height:40px;padding:15px;border-radius:8px;
  background:#fff;text-decoration:none;will-change:transform}
.dt-pill p{margin:0;white-space:pre;color:#323455;
  font:normal 712 14px/14px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- phone (<810) ---- */
@media (max-width:809.98px){
  /* pdp + sap have no service photos yet: their photo band is a single
     navy logo-splash placeholder (empty thumbrow). At the source's fixed
     800px that reads as a tall empty void on a phone. Size the placeholder
     band to a compact branded block instead; the pages with real photos
     (non-empty thumbrow) keep the full band. Content gap: real hero photos
     needed for these two services. */
  .dt-photos:has(.dt-thumbrow:empty){height:auto}
  .dt-photos:has(.dt-thumbrow:empty) .dt-cover{flex:none;height:320px}
  .dt-photos:has(.dt-thumbrow:empty) .dt-thumbrow{display:none}
}