/* ============================================================
   Young Guns Studio — site style layer (2026)
   Visual fixes only: hero scale, final-CTA readability, focus
   styles, skip link, footer. No redesign.
   ============================================================ */

/* ---------- hero headline scale (homepage) ---------- */
[data-og="hero-h1"] h1.yg-text{
  font-size:clamp(48px,5vw,76px)!important;
  line-height:1.06!important;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
[data-og="hero-sub"] .yg-text{
  font-size:clamp(24px,2.4vw,36px)!important;
  line-height:1.25!important;
  text-shadow:0 2px 20px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);
}
@media (max-width:809px){
  /* headline is the focal point on a phone: was clamp(34px,8.5vw,48px) —
     8.5vw reads timid against a full-bleed hero video. Subtitle drops to
     roughly half the headline size so it reads as a supporting line
     funnelling into the CTA, not a second, equally-loud headline. */
  [data-og="hero-h1"] h1.yg-text{font-size:clamp(36px,11vw,48px)!important}
  [data-og="hero-sub"] .yg-text{font-size:clamp(17px,4.5vw,20px)!important;margin-top:2px!important}
}

/* ---------- final CTA section: make the copy readable on the
   noisy red/blue gradient ---------- */
.yg-1s0mrl8 .yg-text{
  text-shadow:0 2px 28px rgba(8,10,22,.65),0 1px 4px rgba(8,10,22,.5);
}
.yg-h5gk3r .yg-text{
  color:#ffffff!important;
  text-shadow:0 2px 28px rgba(8,10,22,.65),0 1px 4px rgba(8,10,22,.5);
}
.yg-6f6u2q .yg-text{
  font-size:16px!important;
  letter-spacing:.01em;
}

/* ---------- keyboard focus visibility ---------- */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
[role="link"]:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #fff!important;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(12,14,28,.6)!important;
  border-radius:4px;
}

/* ---------- skip link ---------- */
.og-skip{
  position:fixed;left:16px;top:-64px;z-index:10000;
  background:#101223;color:#fff;padding:12px 20px;border-radius:8px;
  font:600 14px/1 "Inter Variable",Inter,system-ui,sans-serif;
  text-decoration:none;transition:top .15s ease;
}
.og-skip:focus{top:16px}

/* ============================================================
   Site footer: the custom artwork footer is static markup in every
   page's HTML — the generator's original footer markup was deleted
   from all pages. This guard once kept the old runtime's client-
   rendered footer copy dead; the runtime itself is gone now, so the
   rule is a harmless belt-and-braces leftover.
   ============================================================ */
.yg-1w1kwye{display:none!important}

/* ---------- newsletter form ---------- */
.og-news-form{gap:12px!important;align-items:stretch!important}
.og-news-form input[type="email"]{
  height:48px!important;padding:0 20px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.3)!important;
  color:#fff!important;font-size:15px!important;
  font-family:"Inter Variable",Inter,system-ui,sans-serif;
  transition:border-color .2s ease,background .2s ease;
}
.og-news-form input[type="email"]:focus{
  border-color:rgba(255,255,255,.85)!important;
  background:rgba(255,255,255,.14)!important;
}
.og-news-form input[type="email"]::placeholder{color:rgba(255,255,255,.55)!important;opacity:1}
.og-news-form input[type="submit"]{
  height:48px!important;padding:0 28px!important;
  border-radius:999px!important;border:none!important;
  background:linear-gradient(100deg,#c8283f,#8d3b62)!important;
  color:#fff!important;font-size:15px!important;font-weight:700!important;
  font-family:"Inter Variable",Inter,system-ui,sans-serif;
  letter-spacing:.02em;cursor:pointer;
  box-shadow:0 6px 18px rgba(200,40,63,.35);
  transition:filter .2s ease,transform .2s ease;
}
.og-news-form input[type="submit"]:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* ---------- icon socials row ---------- */
.og-social-row{display:flex;gap:10px;margin-top:8px;align-self:flex-start}
.og-social-row a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;color:#fff;
  border:1px solid rgba(255,255,255,.35);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.og-social-row a:hover{background:#c8283f;border-color:#c8283f;transform:translateY(-2px)}
.og-social-row svg{width:17px;height:17px;display:block}

/* ============================================================
   Site footer (all pages) — the studio's noise artwork (captured
   from the footer canvas as og-footer-art.webp) showing through
   cleanly, with only a soft gradient scrim for text legibility.
   The capture is 1920×381: on desktop the footer is a wide short
   band and the artwork renders near 1:1, but under 1200px the
   footer grows much taller than 381px and cover-scaling blows the
   noise up into blur — so below 1200px we draw the same look
   procedurally (gradient + crisp SVG grain) at native resolution.
   ============================================================ */
.og-footer{
  position:relative;overflow:hidden;color:#fff;
  background:#232342 url("/assets/media/images/og-footer-art.webp") center/cover no-repeat;
  font-family:"Inter Variable",Inter,system-ui,sans-serif;
}
/* seamless legibility scrim — deepens gently toward the bottom */
.og-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,26,48,.12),rgba(26,26,48,.5));
}
@media (max-width:1199.98px){
  .og-footer{
    background:
      radial-gradient(900px 480px at 8% 0%,rgba(140,44,66,.5),transparent 65%),
      radial-gradient(1100px 620px at 92% 110%,rgba(30,34,80,.85),transparent 72%),
      linear-gradient(112deg,#3d3a5c 0%,#343457 46%,#252542 100%);
  }
  /* film-grain overlay: same character as the artwork's noise but
     tiled at native resolution, so it stays crisp at any size */
  .og-footer::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* the gradient is already deep — keep only a light bottom scrim */
  .og-footer::before{
    background:linear-gradient(180deg,transparent,rgba(26,26,48,.35));
  }
}
.og-footer>*{position:relative;z-index:1}
.og-f-top{padding:30px 40px 14px}
.og-f-logo-img{display:block;width:270px;max-width:60vw;height:auto;margin:0}
.og-f-main{padding:32px 40px 60px}
.og-f-grid{
  display:grid;grid-template-columns:1.6fr .8fr .8fr .8fr;
  gap:48px;align-items:start;max-width:1520px;
}
.og-f-h{
  font-family:"Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif;
  font-weight:712;font-style:italic;font-size:17px;letter-spacing:.01em;
  color:#fff;margin:0 0 18px;text-transform:uppercase;
}
.og-news-form{display:flex;max-width:710px}
.og-news-form input[type="email"]{flex:1;min-width:0;outline:none}
.og-f-col{display:grid;gap:12px;justify-items:start;font-size:16px}
.og-f-col a{color:#fff;text-decoration:none}
.og-f-col a:hover{text-decoration:underline;text-underline-offset:3px}
.og-f-base{background:rgba(16,16,34,.35);padding:20px 40px;font-size:16px}
.og-f-base p{margin:0}
@media (max-width:1199px){
  .og-f-grid{grid-template-columns:1fr 1fr;gap:40px}
  .og-f-news{grid-column:1 / -1}
}
@media (max-width:809px){
  /* centered logo reads better once everything is one column */
  .og-f-top{padding:36px 24px 10px}
  .og-f-logo-img{margin-inline:auto}
  .og-f-main{padding:28px 24px 48px}
  .og-f-grid{grid-template-columns:1fr;gap:36px}
  /* stacked form: full-width rows; 16px text so iOS Safari doesn't
     auto-zoom the page when the email field gets focus */
  .og-news-form{flex-direction:column;max-width:none}
  .og-news-form input[type="email"]{
    flex:none;width:100%;height:52px!important;font-size:16px!important;
  }
  .og-news-form input[type="submit"]{height:52px!important;font-size:16px!important}
  .og-f-base{padding:18px 24px;font-size:14px}
}
/* Wider than the footer's design width — center the content instead of
   letting it hug the left edge. The content column is the grid's 1520px
   cap; on monitors wider than ~1600px keep the artwork edge-to-edge and
   center all three bands (logo, grid, copyright) by growing the side
   gutters. At 1600px the gutter resolves to the original 40px, so the
   transition is seamless and normal/smaller desktops are untouched.
   Same technique as the homepage's 1440-canvas centering in home.css. */
@media (min-width:1600px){
  .og-f-top,.og-f-main,.og-f-base{padding-inline:calc((100vw - 1520px) / 2)}
}

@media (prefers-reduced-motion:reduce){
  .og-skip{transition:none}
  .og-social-row a,
  .og-news-form input[type="submit"]{transition:none}
  .og-social-row a:hover,
  .og-news-form input[type="submit"]:hover{transform:none}
}

/* ============================================================
   Homepage Build Club band (.og-bc) — hand-authored promo that
   sits between the page's closing CTA section and the footer.
   Static markup lives in index.html just before .og-footer; the
   wordmark asset is shared with the /build-club page.
   ============================================================ */
.og-bc{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(760px 420px at 88% -10%,rgba(200,40,63,.28),transparent 65%),
    radial-gradient(620px 380px at -6% 112%,rgba(77,116,136,.25),transparent 60%),
    linear-gradient(180deg,#101223,#0a0c1a);
  font-family:"Inter Variable",Inter,system-ui,sans-serif;
}
.og-bc-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(28px,5vw,72px);
  max-width:1240px;margin:0 auto;
  padding:clamp(56px,8vw,96px) 40px;
}
.og-bc-eyebrow{
  font-family:"Inter Variable",Inter,sans-serif;
  font-variation-settings:"opsz" 32,"wght" 600;font-size:15px;letter-spacing:-.02em;
  color:#e0607a;margin:0;
}
.og-bc h2{
  font-family:"Inter Variable",Inter,sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700;letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,44px);line-height:1.05;
  color:#fff;margin:10px 0 0;
}
.og-bc-lede{
  font-size:clamp(16px,1.8vw,18px);line-height:1.65;color:#c9cddc;
  max-width:56ch;margin:18px 0 0;
}
.og-bc-meta{
  font-family:"Inter Variable",Inter,sans-serif;
  font-variation-settings:"opsz" 32,"wght" 600;font-size:14px;letter-spacing:-.01em;
  color:#9298b3;margin:16px 0 0;
}
.og-bc-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:5px 28px;border-radius:999px;margin-top:26px;
  background:linear-gradient(100deg,#c8283f,#55395f);
  color:#fff;text-decoration:none;
  font-family:"Inter Variable",Inter,sans-serif;
  font-variation-settings:"opsz" 20,"wght" 600;font-size:15px;letter-spacing:-.15px;
  box-shadow:0 10px 26px rgba(200,40,63,.35);
  transition:filter .2s ease,transform .2s ease;
}
.og-bc-cta:hover{filter:brightness(1.12);transform:translateY(-2px)}
/* the wordmark rides on a white "sticker" card so the black badge
   reads against the navy band */
.og-bc-markcard{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(220px,26vw,330px);aspect-ratio:1.1/1;border-radius:20px;
  background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:rotate(2deg);
  transition:transform .2s ease;
}
.og-bc-markcard:hover{transform:rotate(0deg) scale(1.02)}
.og-bc-markcard img{width:78%;height:auto;display:block}
@media (max-width:809.98px){
  .og-bc-inner{flex-direction:column-reverse;align-items:flex-start;padding:56px 24px 60px}
  .og-bc-markcard{width:200px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .og-bc-cta,.og-bc-markcard{transition:none}
  .og-bc-cta:hover{transform:none}
  .og-bc-markcard:hover{transform:rotate(2deg)}
}

/* ---------- navigation bar: every page hides the original generated nav
   and uses only .og-topnav — the one nav design for the whole site, home
   and inner pages alike. Its shape differs by width: ≥1200px it's the
   floating rounded pill that docks into a square full-width bar on
   scroll; below 1200px (mobile/tablet, see the max-width:1199.98px
   block) it's a fixed, square, edge-to-edge bar the whole time — a pill
   there would be structural chrome borrowing the shape this site
   reserves for buttons (the CTA, badges), not a header.

   ALL nav-hiding rules key on .yg-w2UcW — the nav COMPONENT class that is in
   the static server-rendered markup of every page and survives hydration —
   NOT on the .og-navbar/.og-navwrap tags enhance.js adds. The tags arrive
   only after JS runs (and ~250ms after every SPA re-render), so any rule
   that needs them flashes the original italic styling first. The tags are
   kept in enhance.js only as a fallback hook for browsers without :has().
   ---------- */
/* the native generated bar is hidden at every width now (this used to be
   home-only, gated behind the JS-set body.og-home class — which meant it
   could never take effect before enhance.js ran and flashed the original
   italic nav on inner pages). .yg-w2UcW is static SSR markup present on
   first paint on every page, so this hides it with no JS and no flash.
   The :has() wrapper selectors hide the nav's containing div too (some
   pages' wrapper carries its own padding/background — belt-and-braces
   against an empty bar-shaped gap surviving the child being hidden). */
.yg-w2UcW,
div:has(> .yg-w2UcW),
div[class*="-container"]:has(.yg-w2UcW){
  display:none!important;
}

/* homepage: its nav is absolutely positioned over the hero and simply
   scrolls away — enhance.js injects this floating pill (same look as
   the inner-page nav) and shows it once the visitor scrolls */
.og-topnav{
  position:fixed;top:14px;left:0;right:0;z-index:9999;
  display:flex;justify-content:center;
  padding:0 clamp(16px,3vw,40px);
  opacity:0;transform:translateY(-140%);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,
    top .25s ease,padding .25s ease;
}
.og-topnav.og-show{opacity:1;transform:none;pointer-events:auto}
.og-topnav-bar{
  display:flex;align-items:center;gap:clamp(20px,2.5vw,40px);
  width:100%;max-width:1520px;height:64px;padding:0 10px 0 26px;
  border-radius:999px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 32px rgba(16,18,40,.16),0 2px 6px rgba(16,18,40,.08);
  transition:max-width .3s ease,border-radius .25s ease,
    box-shadow .25s ease,background .25s ease;
}
/* scrolled: the pill docks — fused to the viewport top, full width,
   square corners, the native inner-page bar's flat shadow. enhance.js
   toggles og-docked from the scroll position. */
.og-topnav.og-docked{top:0;padding:0}
.og-topnav.og-docked .og-topnav-bar{
  max-width:100vw;border-radius:0;
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(16,18,40,.08);
}
.og-tn-logo{display:flex;align-items:center;flex:none}
.og-tn-logo img{height:40px;width:auto;display:block}
.og-tn-links{display:flex;gap:clamp(12px,1.6vw,30px);flex:1;justify-content:center}
/* every top link stays on one line — without this the Programs link's inline
   caret wraps below the word in the tight 1200-1279 zone, breaking the row */
.og-tn-links a{white-space:nowrap}
.og-tn-links a{
  /* "Source Sans 3" is registered on this site as an ITALIC-ONLY face, so
     font-style:normal still renders slanted with it — use the true upright
     bold face instead. */
  font:700 16px/1 "Source Sans Pro Bold","Source Sans Pro Regular",sans-serif;
  letter-spacing:.02em;color:#343459;text-decoration:none;text-transform:uppercase;
  transition:color .18s ease,border-bottom-color .18s ease;
  border-bottom:2px solid transparent;
  /* top padding mirrors the 2px underline padding + 2px border below, so
     the label sits dead-centre of its 24px min-height tap-target box */
  padding:4px 0 2px;
}
.og-tn-links a:hover{
  color:#c8283f;
  border-bottom-color:#c8283f;
}
/* remove the original nav link hover zoom/scale effects on inner pages */
.yg-w2UcW,
.yg-w2UcW *{
  --yg-transform:none!important;
}
.yg-w2UcW a,
.yg-w2UcW [role="link"],
.yg-w2UcW .yg-text{
  transform:none!important;
  scale:1!important;
  transition:color .18s ease,border-bottom-color .18s ease !important;
}
/* nav labels (APPROACH … GALLERY, preset 1wicq5s): upright, not the
   original italic. font-style alone is not enough — the site's
   "Source Sans 3" family ships only an italic 700 face, so the family
   itself must change to the true upright bold. Underline reserve space
   goes on the <a> ONLY — its parent <p> is also .yg-text, and
   putting border+padding on both stacked 8px of dead space under the
   text, floating the labels above the bar's vertical centre. */
.yg-w2UcW a.yg-styles-preset-1wicq5s{
  font-style:normal!important;
  font-family:"Source Sans Pro Bold","Source Sans Pro Regular",sans-serif!important;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  /* the nav's line boxes leave the labels ~1.5px above the bar's
     centre (logo and CTA sit at 0) — nudge without affecting layout */
  position:relative;top:1.5px;
}
.yg-w2UcW a:hover,
.yg-w2UcW [role="link"]:hover,
.yg-w2UcW .yg-text:hover,
.yg-w2UcW a:active,
.yg-w2UcW [role="link"]:active{
  transform:none!important;
  scale:1!important;
  border-bottom-color:#c8283f;
  color:#c8283f!important;
}
.og-tn-cta{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:5px;
  flex:none;min-height:46px;padding:5px 24px;border-radius:999px;
  background:linear-gradient(100deg,#c8283f,#55395f);
  color:#fff;text-decoration:none;font-style:italic;text-transform:uppercase;
  font-family:"Source Sans 3","Source Sans Pro Regular",sans-serif;
  transition:filter .2s ease;
}
.og-tn-cta:hover{filter:brightness(1.12)}
.og-tn-cta .l1,
.og-tn-cta .l2{font-weight:800;font-size:14px;letter-spacing:.05em}

/* ---------- Programs dropdown (pill nav .og-tn-item + native bar
   .og-nav-prog share the same menu panel). Pure CSS disclosure: opens
   on hover and on keyboard focus within, so it needs no JS state; the
   top-level "Programs" is itself a real link to the /programs/ hub,
   which doubles as the touch path. ---------- */
.og-tn-item,.og-nav-prog{position:relative}
.og-tn-item>a{display:inline-block;white-space:nowrap}
/* dropdown chevron: rides inside the Programs link, inherits its
   colour, and flips 180° whenever the menu is open (hover or
   keyboard focus — the same states that show the panel) */
.og-tn-caret{
  width:10px;height:7px;margin-left:6px;
  display:inline-block;vertical-align:middle;
  transform:translateY(-1px);
  transition:transform .18s ease;
}
.og-tn-item:hover>a .og-tn-caret,
.og-tn-item:focus-within>a .og-tn-caret,
.og-nav-prog:hover .og-tn-caret,
.og-nav-prog:focus-within .og-tn-caret{
  transform:translateY(-1px) rotate(180deg);
}
@media (prefers-reduced-motion:reduce){
  .og-tn-caret{transition:none}
}
.og-tn-menu{
  position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(10px);
  min-width:236px;padding:10px;z-index:10000;
  display:grid;gap:2px;
  background:#fff;border-radius:18px;
  box-shadow:0 16px 40px rgba(16,18,40,.2),0 3px 8px rgba(16,18,40,.1);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
/* invisible bridge so the pointer can cross the gap without closing */
.og-tn-menu::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
}
.og-tn-item:hover>.og-tn-menu,.og-tn-item:focus-within>.og-tn-menu,
.og-nav-prog:hover .og-tn-menu,.og-nav-prog:focus-within .og-tn-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s;
}
/* menu items override the generic .og-tn-links a / preset link styling */
.og-tn-menu a{
  display:block;padding:10px 14px;border-radius:12px;
  font:700 14px/1.2 "Source Sans Pro Bold","Source Sans Pro Regular",sans-serif;
  font-style:normal!important;letter-spacing:.02em;text-transform:uppercase;
  color:#343459!important;text-decoration:none;border-bottom:none!important;
  transition:background .15s ease,color .15s ease;
}
.og-tn-menu a span{
  display:block;margin-top:3px;
  font:600 11px/1 "Inter Variable",Inter,system-ui,sans-serif;
  letter-spacing:.06em;color:#5a5a7a;text-transform:uppercase;
}
.og-tn-menu a:hover,.og-tn-menu a:focus-visible{
  background:#f4e9eb;color:#c8283f!important;
}
.og-tn-menu a:hover span,.og-tn-menu a:focus-visible span{color:#a2404f}
@media (prefers-reduced-motion:reduce){
  .og-tn-menu{transition:none}
}

/* ---------- native bar CTA on one line: the generator stacks
   "START<br>YOUR JOURNEY" with an 18px/11px size split. Drop the <br>
   and unify the sizes so it reads as one phrase. Scoped to the nav —
   the same component elsewhere on the pages keeps its stacked look. */
.yg-w2UcW .yg-usOLM br{display:none}
/* !important is required: the generator sets these vars as inline
   styles on the same elements */
.yg-w2UcW .yg-usOLM p.yg-text{--yg-font-size:13px!important;white-space:nowrap}
.yg-w2UcW .yg-usOLM p.yg-text span.yg-text{--yg-font-size:13px!important}
/* the button's container is sized for the stacked layout — let the
   one-liner breathe instead of clipping. The visible gradient pill is
   the nested .yg-1egba9c span, also sized for the stacked button, so
   the wider text spilled past it: stretch the span to the anchor and
   lift the text above it. */
.yg-w2UcW .yg-hlnwr7-container{width:auto!important;min-width:0}
.yg-w2UcW .yg-usOLM{position:relative;padding:0 18px}
.yg-w2UcW .yg-usOLM .yg-s0ukm0{position:relative;z-index:2!important}
.yg-w2UcW .yg-usOLM .yg-1egba9c{
  position:absolute!important;inset:0!important;
  width:auto!important;height:auto!important;
  z-index:1!important;
}
/* centre the links in the bar (they ship right-packed against the
   button). The row holds links + CTA together and the logo image is
   absolutely positioned (its flex container computes ~0 wide), so:
   logo container gives up its greedy flex:1, the row takes the full
   bar and centres its links, and the CTA leaves the flow to pin to
   the bar's right edge — link-group centre = bar centre, same
   geometry as the pill nav. */
.yg-w2UcW .yg-1a0c9gy{flex:0 0 auto!important}
.yg-w2UcW .yg-1qxkp2j{position:relative}
.yg-w2UcW .yg-12tn0r6{flex:1 1 auto!important;justify-content:center!important}
.yg-w2UcW .yg-hlnwr7-container{
  position:absolute!important;right:0;top:50%;transform:translateY(-50%);
}

/* ---------- navbar hover zoom fix: disable yg-motion whileHover
   animation. Scale 1.2 is applied via yg-motion's whileHover variant
   object (xt) to the link's parent [data-yg-component-type=
   "RichTextContainer"] div (class yg-1q0gkoa / yg-fm4xvw / etc.),
   not to the <a> itself. Prior CSS overrides targeted the wrong element.
   ------*/
.yg-w2UcW [data-yg-component-type="RichTextContainer"]{
  transform:none!important;
}

/* ---------- mobile nav: with the React runtime removed, the native bar's
   hamburger is dead markup — hide the native bars below 1200px on every
   page and use our pill as a compact fixed header. The burger opens the
   .og-tn-drawer panel (markup injected by enhance.js next to the bar,
   inside .og-topnav) over a blurred .og-tn-scrim. ---------- */
.og-tn-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;flex:none;
  background:none;border:0;border-radius:6px;cursor:pointer;
  transition:background .18s ease;
}
.og-tn-burger:hover{background:rgba(52,52,89,.08)}
.og-tn-burger:active{background:rgba(52,52,89,.13)}
.og-tn-burger span{
  display:block;height:3px;width:100%;background:#343459;border-radius:1px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease,background .18s ease;
  /* iOS Safari can skip repainting the middle bar when .og-open toggles off,
     leaving only the two outer bars on screen (reads as "two dots"). Promoting
     each bar to its own compositor layer forces a clean repaint on every
     toggle; no visual change where repaint already works. */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);
}
.og-topnav.og-open .og-tn-burger span{background:#c8283f}
.og-topnav.og-open .og-tn-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.og-topnav.og-open .og-tn-burger span:nth-child(2){opacity:0}
.og-topnav.og-open .og-tn-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* drawer + scrim exist on desktop too (enhance.js injects them once);
   they are mobile-only UI */
.og-tn-scrim,.og-tn-drawer{display:none}
/* the drawer locks the page scroll while open */
html.og-nav-open{overflow:hidden!important}

/* below 1200px the pill (with its burger drawer) is the site's one
   header. This used to cut over at 810px, but the native bar's Tablet
   variant (810–1199.98) ships only a logo and a runtime-driven burger —
   dead markup since the de-Framer — so tablet visitors had no working
   navigation at all. The original site used burger nav at these widths
   too; the pill's drawer restores that. */
@media (max-width:1199.98px){
  /* the floating glass pill was borrowed template chrome — on this site
     a pill shape means "button" (the CTA, badges), not "header". Below
     1200px the header is standard fixed chrome instead: flush to the
     viewport, square, solid, always the same shape whether you're at
     the top of the page or scrolled — no shape-shift to track. The only
     change on scroll is .og-docked's existing shadow/opacity bump
     (shared with desktop), which reads as normal elevation, not a
     redesign mid-scroll. */
  .og-topnav{
    display:flex;opacity:1;transform:none;pointer-events:auto;
    top:0;padding:0;
  }
  .og-topnav-bar{
    position:relative;z-index:2;
    width:100%;height:60px;padding:0 18px;border-radius:0;
    background:#fff;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .og-tn-logo img{height:30px}
  .og-tn-burger{display:flex;margin-left:auto}
  .og-tn-links,.og-tn-cta{display:none}

  /* .og-docked's elevation shadow (main.css ~320) is a scroll-position cue
     for the bar sitting over page content — it doesn't know the drawer is
     open. With the opaque full-screen drawer up, that shadow has nothing
     to elevate over; it just reads as a stray line across the top of the
     Programs card. Drop it whenever the drawer is open, docked or not. */
  .og-topnav.og-open .og-topnav-bar{box-shadow:none}

  /* scrim: dims + blurs the page behind the open drawer */
  .og-tn-scrim{
    display:block;position:fixed;inset:0;z-index:0;
    background:rgba(16,14,36,.45);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility 0s linear .25s;
  }
  .og-topnav.og-open .og-tn-scrim{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .25s ease,visibility 0s;
  }

  /* drawer panel: a full-screen takeover, not a dropdown card — the bar
     (z-index:2) stays above it so the burger-turned-X keeps working as
     the close control. The bar is a fixed 56px everywhere now (no more
     floating-vs-docked offset to track), so the top clearance is fixed
     too — bar height plus a fixed breathing gap. */
  .og-tn-drawer{
    display:flex;flex-direction:column;gap:20px;
    position:fixed;inset:0;z-index:1;
    overflow-y:auto;overscroll-behavior:contain;
    padding:80px 20px calc(28px + env(safe-area-inset-bottom));
    background:#fff;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(16px);
    transition:opacity .22s cubic-bezier(.2,.8,.2,1),
      transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;
  }
  .og-topnav.og-open .og-tn-drawer{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity .22s cubic-bezier(.2,.8,.2,1),
      transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s;
  }
  /* the three content groups cascade in behind the panel */
  .og-tn-drawer>*{
    opacity:0;transform:translateY(10px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .og-topnav.og-open .og-tn-drawer>*{opacity:1;transform:none}
  .og-topnav.og-open .og-tn-drawer>:nth-child(1){transition-delay:.05s}
  .og-topnav.og-open .og-tn-drawer>:nth-child(2){transition-delay:.11s}
  .og-topnav.og-open .og-tn-drawer>:nth-child(3){transition-delay:.17s}

  /* programs group: tinted card, white program rows, year badges */
  .og-tnd-programs{
    background:#f6f0f1;border-radius:16px;padding:10px;
  }
  /* the upright red label (Source Sans, same size/spacing as the row
     labels) set off from the rows by a hairline rule, so it anchors the
     top of the card rather than floating above the first row. Inset 4px
     each side so the rule sits just inside the white rows' edges. */
  .og-tnd-phead{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    margin:0 4px;padding:6px 10px 11px;text-decoration:none;
    border-bottom:1px solid rgba(52,52,89,.10);
    font-family:"Source Sans Pro Bold","Source Sans Pro Regular",sans-serif;
    font-weight:700;font-style:normal;font-size:14px;letter-spacing:.03em;
    color:#a2404f;text-transform:uppercase;
  }
  /* the "View all" hint was #8b8ba4 — 2.95:1 on the card's #f6f0f1 tint
     (fails AA 1.4.3 at 11px). #5a5a7a is the slate the .og-tn-menu item
     subtitles already use: 5.87:1 here, still visibly quieter than the
     #a2404f PROGRAMS label beside it. */
  .og-tnd-phead span{
    font:600 11px/1 "Inter Variable",Inter,system-ui,sans-serif;
    font-style:normal;letter-spacing:.08em;color:#5a5a7a;text-transform:uppercase;
  }
  .og-tnd-phead:active,.og-tnd-phead:hover{color:#c8283f}
  .og-tnd-plist{display:grid;gap:6px;margin-top:12px}
  .og-tnd-plist a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:16px 14px;border-radius:12px;background:#fff;
    text-decoration:none;
    transition:background .15s ease;
  }
  .og-tnd-plist b{
    font:700 17px/1.2 "Source Sans Pro Bold","Source Sans Pro Regular",sans-serif;
    letter-spacing:.02em;color:#343459;text-transform:uppercase;
  }
  .og-tnd-plist span{
    flex:none;padding:5px 10px;border-radius:999px;
    font:600 11px/1 "Inter Variable",Inter,system-ui,sans-serif;
    letter-spacing:.07em;color:#a2404f;background:#f7e3e7;text-transform:uppercase;
  }
  .og-tnd-plist a:hover,.og-tnd-plist a:active{background:#fdecef}
  .og-tnd-plist a:hover b{color:#c8283f}

  /* main page links: app-style rows with right chevrons */
  .og-tnd-links{display:grid;padding:0 8px}
  .og-tnd-links a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:18px 12px;border-radius:12px;text-decoration:none;
    font:700 19px/1 "Source Sans Pro Bold","Source Sans Pro Regular",sans-serif;
    letter-spacing:.02em;color:#343459;text-transform:uppercase;
    transition:background .15s ease,color .15s ease;
  }
  .og-tnd-links a:not(:last-child){border-bottom:1px solid rgba(52,52,89,.08)}
  .og-tnd-links a::after{
    content:"";flex:none;width:8px;height:8px;margin-right:2px;
    border-right:2px solid rgba(52,52,89,.35);
    border-top:2px solid rgba(52,52,89,.35);
    transform:rotate(45deg);
  }
  .og-tnd-links a:hover,.og-tnd-links a:active{background:#f6f0f1;color:#c8283f}
  .og-tnd-links a:hover::after,.og-tnd-links a:active::after{
    border-color:#c8283f;
  }
  /* the page the visitor is on */
  .og-tn-drawer a[aria-current="page"],
  .og-tn-drawer a[aria-current="page"] b{color:#c8283f}
  .og-tnd-links a[aria-current="page"]::after{border-color:#c8283f}

  /* full-width gradient CTA */
  .og-tnd-cta{
    display:flex;align-items:center;justify-content:center;
    flex:none;min-height:58px;margin:4px 8px 6px;padding:5px 24px;
    border-radius:999px;text-decoration:none;
    background:linear-gradient(100deg,#c8283f,#55395f);
    box-shadow:0 10px 24px rgba(200,40,63,.3);
    color:#fff;font-style:italic;text-transform:uppercase;
    font-family:"Source Sans 3","Source Sans Pro Regular",sans-serif;
    font-weight:800;font-size:16px;letter-spacing:.05em;
    transition:filter .2s ease;
  }
  .og-tnd-cta:hover{filter:brightness(1.12)}
}
/* short viewports (common phones in portrait — 375x667, 320x568 — and
   any landscape phone): the drawer's default vertical rhythm (80px top
   clearance + 20px gaps + generous row padding) totals ~726px, taller
   than a 667px-high screen, so the CTA — the whole point of the drawer —
   sat below the fold with no visual hint it was scrollable. Compact the
   rhythm instead of relying on overflow-y:auto to save it. */
@media (max-width:1199.98px) and (max-height:700px){
  .og-tn-drawer{gap:12px;padding-top:60px;padding-bottom:18px}
  .og-tnd-plist a{padding-top:12px;padding-bottom:12px}
  .og-tnd-links a{padding-top:14px;padding-bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .og-topnav,.og-topnav-bar,.og-tn-scrim,.og-tn-drawer,.og-tn-drawer>*{transition:none}
  .og-tn-drawer,.og-tn-drawer>*{transform:none}
  .og-tn-burger span{transition:none}
}

/* ---------- scroll-reveal failsafe: sections ship at inline opacity:0
   (the old engine's entrance states) and enhance.js animates them in on
   scroll. If enhance.js ever fails to run (html never gets .og-js), force
   everything visible after a beat so no content can be lost. ---------- */
@keyframes og-force-visible{to{opacity:1;transform:none}}
html:not(.og-js) [style*="opacity:0"],
html:not(.og-js) [style*="opacity: 0"]{
  animation:og-force-visible .6s ease 1.2s forwards;
}

/* ---------- engine-drawn section backgrounds, redrawn in CSS. The
   removed React runtime painted these three full-bleed bands with its
   BlurGradient component; without it they were white with invisible
   white text. Same recipe as the mobile footer artwork: layered
   gradients + an SVG grain tile (colored noise, like the original).
   .yg-92jzxg  = homepage CTA band ("A boutique art & design studio")
   .yg-1ezo1vh = /approach hero ("OUR APPROACH")
   .yg-4veble  = /lets-chat hero ("YOUR JOURNEY STARTS HERE")
   .yg-10bma76 = /about-us hero ("ABOUT US")
   .yg-pe8j1z  = /schedule hero ("EVENTS + WORKSHOPS")
   .yg-rmvr16  = /outcomes hero ("OUTCOMES")
   .yg-1xpoeol = /gallery hero ("GALLERY")
   These static coats paint instantly and with no JS; the og-ambient
   engine below animates on top of them. ---------- */
.yg-92jzxg,
.yg-1ezo1vh,
.yg-4veble,
.yg-10bma76,
.yg-pe8j1z,
.yg-rmvr16,
.yg-1xpoeol{
  background-color:#0c1124;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-size:160px 160px,auto,auto,auto;
  position:relative;
  isolation:isolate;
}
.yg-pe8j1z,
.yg-rmvr16,
.yg-1xpoeol{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(65% 125% at 38% 10%, rgba(46,74,168,.55) 0%, rgba(28,44,105,.3) 45%, rgba(12,18,40,0) 74%),
    radial-gradient(45% 70% at 4% 90%, rgba(30,66,60,.3) 0%, rgba(15,33,40,0) 65%),
    linear-gradient(115deg, #0c142b 0%, #081020 45%, #03050b 100%);
}
.yg-92jzxg{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(75% 110% at 8% 88%, rgba(190,235,250,.92) 0%, rgba(150,205,235,.5) 25%, rgba(150,205,235,0) 52%),
    radial-gradient(58% 85% at 50% 28%, rgba(185,32,58,.88) 0%, rgba(150,25,50,.5) 45%, rgba(150,25,50,0) 72%),
    linear-gradient(100deg, #6c2338 0%, #58203a 35%, #141c3c 70%, #0a0f22 100%);
}
.yg-1ezo1vh{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 130% at 32% 0%, rgba(64,102,190,.6) 0%, rgba(38,64,130,.32) 42%, rgba(18,28,58,0) 72%),
    radial-gradient(45% 70% at 6% 96%, rgba(36,84,74,.32) 0%, rgba(18,40,48,0) 65%),
    linear-gradient(115deg, #0f172e 0%, #0a1124 45%, #04060d 100%);
}
.yg-4veble{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(55% 95% at 22% 18%, rgba(58,74,64,.42) 0%, rgba(28,38,36,0) 65%),
    radial-gradient(70% 115% at 86% 82%, rgba(28,46,104,.55) 0%, rgba(14,24,58,0) 70%),
    linear-gradient(105deg, #171c1e 0%, #10141f 50%, #0a0f22 100%);
}
.yg-10bma76{
  background-color:#6b1522;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 115% at 4% 82%, rgba(226,229,238,.92) 0%, rgba(205,195,208,.45) 22%, rgba(180,160,178,0) 48%),
    radial-gradient(85% 130% at 80% 28%, rgba(148,20,36,.7) 0%, rgba(118,14,30,0) 72%),
    linear-gradient(100deg, #8d1e2d 0%, #7e1826 45%, #5a0f1c 100%);
}

/* ============================================================
   og-ambient — the studio's own ambient background engine.
   The removed runtime animated these bands with a blurred moving
   gradient; this is the dependency-free replacement. enhance.js
   mounts one .og-ambient backdrop per configured section: three
   blurred colour blobs drifting on slow GPU-only transform loops
   under an SVG grain veil. The blobs sit at z-index:-1 inside the
   section's isolated stacking context, so they always paint above
   the static base coat and below every piece of content. Colours
   come from the per-section --og-amb-* palette variables.
   ============================================================ */
.og-ambient{
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:-1;
}
.og-ambient i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(80px);opacity:.9;
  will-change:transform;
}
.og-ambient .b1{width:58%;height:135%;left:-14%;top:-24%;background:var(--og-amb-1);animation:og-drift1 13s ease-in-out infinite}
.og-ambient .b2{width:54%;height:122%;left:26%;top:-10%;background:var(--og-amb-2);animation:og-drift2 17s ease-in-out infinite}
.og-ambient .b3{width:64%;height:145%;right:-22%;top:-20%;background:var(--og-amb-3);animation:og-drift3 15s ease-in-out infinite}
/* continuous flowing loops — three stops each so the blobs wander rather
   than shuttle, with scale and opacity breathing for the lava-lamp feel
   the original runtime's animated gradients had */
@keyframes og-drift1{
  0%{transform:translate3d(-8%,-6%,0) scale(1);opacity:.9}
  33%{transform:translate3d(14%,10%,0) scale(1.28);opacity:.75}
  66%{transform:translate3d(2%,-12%,0) scale(.9);opacity:.95}
  100%{transform:translate3d(-8%,-6%,0) scale(1);opacity:.9}
}
@keyframes og-drift2{
  0%{transform:translate3d(6%,9%,0) scale(1.15) rotate(10deg);opacity:.85}
  33%{transform:translate3d(-12%,-9%,0) scale(.88) rotate(-8deg);opacity:1}
  66%{transform:translate3d(9%,-4%,0) scale(1.22) rotate(4deg);opacity:.7}
  100%{transform:translate3d(6%,9%,0) scale(1.15) rotate(10deg);opacity:.85}
}
@keyframes og-drift3{
  0%{transform:translate3d(9%,6%,0) scale(1);opacity:.9}
  33%{transform:translate3d(-9%,-11%,0) scale(1.25);opacity:.8}
  66%{transform:translate3d(-14%,7%,0) scale(.92);opacity:1}
  100%{transform:translate3d(9%,6%,0) scale(1);opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  .og-ambient i{animation:none}
}

/* ---------- carousels (og-scroll): native horizontal scroll without a
   visible scrollbar, plus grab/drag affordance — the drag itself is
   bound in enhance.js ---------- */
ul[data-og-scroll]{
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
ul[data-og-scroll]::-webkit-scrollbar{display:none}
ul[data-og-scroll] a,
ul[data-og-scroll] img{
  -webkit-user-drag:none;
  user-select:none;
}
ul[data-og-scroll].og-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
  user-select:none;
}
/* /outcomes alumni carousel: the generator shipped every slide with
   inline visibility:hidden (its engine flipped them visible at hydration
   and looped over 4 copies of each card). Static build: show the
   aria-visible set of 7, collapse the loop clones — hidden slides still
   occupy layout space, so left in place the strip reads as an empty band.
   Static selectors on SSR markup: applies from first paint, no JS needed.
   enhance.js then re-opens two clone sets as loop buffers
   (data-og-loop="pre"/"post") so the strip scrolls like the original
   endless belt: buffers get every rule the real cards get, and the pre
   set moves in front of the real cards with flex order — set on the card
   <div>s because the display:contents <li>s generate no boxes (which is
   also why scroll-snap-align rides along here instead of on the li). */
[data-og-page="outcomes"] ul[draggable="false"] li[aria-hidden="true"]:not([data-og-loop]){display:none!important}
[data-og-page="outcomes"] ul[draggable="false"] li[aria-hidden="false"]>div,
[data-og-page="outcomes"] ul[draggable="false"] li[data-og-loop]>div{
  visibility:visible!important;
  scroll-snap-align:center;
}
[data-og-page="outcomes"] ul[draggable="false"] li[data-og-loop="pre"]>div{order:-1}
/* desktop + tablet: the original strip overflowed its 575×744 track,
   so a centred card showed with neighbours bleeding off both viewport
   edges (the engine animated a transform, no clipping). A native
   scroller must clip at its border box, so widen the scrollport to the
   full band and pad the track back down — cards stay 575px (width:100%
   resolves against the padded content box) and the first/last card can
   still reach dead centre. The height pin matters: the component sizes
   its height off its width, so an unpinned 100%-wide container balloons
   the track vertically. */
@media (min-width:810px){
  [data-og-page="outcomes"] .yg-1xeap0e-container{
    width:100%;
    height:744px!important;
  }
  [data-og-page="outcomes"] ul[draggable="false"]{
    box-sizing:border-box;
    padding-inline:calc((100% - 575px)/2)!important;
  }
}
/* phone: breathing room around the card (the original ran it hard
   edge-to-edge) and the dots pill moved off the artwork onto the dark
   band below it. The card keeps its baked 1545:2000 aspect so the text
   near its edges survives the narrower slot. */
@media (max-width:809px){
  [data-og-page="outcomes"] ul[draggable="false"]{
    box-sizing:border-box;
    padding-inline:24px!important;
  }
  [data-og-page="outcomes"] ul[draggable="false"] li[aria-hidden="false"]>div,
  [data-og-page="outcomes"] ul[draggable="false"] li[data-og-loop]>div{
    height:auto!important;
    aspect-ratio:1545/2000;
  }
  [data-og-page="outcomes"] fieldset.yg--slideshow-controls div:has(>button[aria-label^="Scroll to page"]){
    bottom:-46px!important;
  }
  /* room on the band for the relocated dots */
  [data-og-page="outcomes"] .yg-hwcit4{padding-bottom:64px}
}
/* page dots: dim the inactive ones; enhance.js moves .og-on with the
   scroll (the dots ship inline opacity:1 with no active-state styling —
   the engine used to restyle them) */
button[aria-label^="Scroll to page"]>div{opacity:.45!important;transition:opacity .3s}
button[aria-label^="Scroll to page"].og-on>div{opacity:1!important}

/* per-section blob palettes */
.yg-92jzxg{
  --og-amb-1:radial-gradient(closest-side,rgba(190,235,250,.8),transparent 70%);
  --og-amb-2:radial-gradient(closest-side,rgba(198,36,62,.75),transparent 72%);
  --og-amb-3:radial-gradient(closest-side,rgba(16,24,66,.9),transparent 74%);
}
.yg-10bma76{
  --og-amb-1:radial-gradient(closest-side,rgba(228,230,238,.6),transparent 70%);
  --og-amb-2:radial-gradient(closest-side,rgba(186,28,48,.7),transparent 72%);
  --og-amb-3:radial-gradient(closest-side,rgba(84,12,26,.85),transparent 74%);
}
.yg-1ezo1vh,
.yg-pe8j1z,
.yg-rmvr16,
.yg-1xpoeol{
  --og-amb-1:radial-gradient(closest-side,rgba(66,104,205,.5),transparent 70%);
  --og-amb-2:radial-gradient(closest-side,rgba(28,48,118,.6),transparent 72%);
  --og-amb-3:radial-gradient(closest-side,rgba(2,4,12,.9),transparent 74%);
}
.yg-4veble{
  --og-amb-1:radial-gradient(closest-side,rgba(62,86,78,.5),transparent 70%);
  --og-amb-2:radial-gradient(closest-side,rgba(34,56,126,.55),transparent 72%);
  --og-amb-3:radial-gradient(closest-side,rgba(4,6,16,.85),transparent 74%);
}

/* ---------- homepage hero video: paint its own first frame while the
   file downloads instead of a white hole. The poster attribute lives in
   the static markup only, so this CSS backdrop also survives hydration
   re-rendering the <video>. !important beats the inline transparent
   background-color set inline on the element. ---------- */
video[src*="young-guns-studio-hero"]{
  background:#17171f url("/assets/media/assets/young-guns-studio-hero-poster.jpg") center/cover no-repeat!important;
}

/* ---------- mobile/tablet fixed-height fixes (inherited from the
   source design; confirmed present on the original production site).
   Three homepage components carry desktop-scale fixed pixel heights
   into small breakpoints, leaving sparse content adrift in empty
   space. The CTA band's content is absolutely positioned, so it gets
   an explicit compact height (auto would collapse it); the tier and
   testimonial cards are flex containers with flowing content, so
   they can size to content. ---------- */
@media (max-width:1199px){
  /* CTA band ("A boutique art & design studio…"): 900–1100px fixed */
  .yg-92jzxg{height:640px!important}
  /* its content column is hard-positioned for the original 1100px band
     (absolute, top:-540px, height:1100px) — pin it to the band and let
     the existing flex centering do the rest */
  .yg-92jzxg .yg-1gym4ok{
    top:0!important;bottom:0!important;height:100%!important;
    justify-content:center!important;align-items:center!important;
    padding:0 24px!important;
  }
}
@media (max-width:809px){
  .yg-92jzxg{height:560px!important}
  /* the fixed heights actually live on the section WRAPPERS, which
     flex-stretch the cards to fill them — release the wrappers first */
  .yg-1k3rsj1,
  .yg-xtjgct,
  .yg-15tbi9u{height:auto!important;min-height:0!important;aspect-ratio:auto!important}
  /* program tier cards (Tier 1/2/3): the source design gives them
     aspect-ratio 0.885, so their height balloons with their width
     (779px tall at 764px viewport) — drop the ratio, size to content */
  .yg-1twiv2u,
  .yg-g6e38r,
  .yg-qtrrmp{
    aspect-ratio:auto!important;
    height:auto!important;min-height:0!important;flex:none!important;
    padding-top:30px!important;padding-bottom:30px!important;
  }
  /* testimonial cards: same aspect-ratio ballooning (~794px per card) */
  .yg-uq7aso,
  .yg-y9mepr,
  .yg-1qb7vpj{
    aspect-ratio:auto!important;
    height:auto!important;min-height:0!important;flex:none!important;
    padding-top:30px!important;padding-bottom:30px!important;
  }
}

/* ---------- homepage rhythm: the source design tied several content
   bands to the viewport height, leaving big navy voids at every size.
   .yg-mvp5b  = pull-quote band under the hero (100vh — 844px of band
                for ~200px of copy on a phone)
   .yg-eo048p = stats band (900+ / $10M+ / 17+ Years; 50vh, content
                ~90px tall pinned to its top)
   .yg-92jzxg = CTA band above the footer (100vh on desktop; the
                640/560px caps below 1200px shipped earlier)
   Heights go content-based; horizontal padding stays the source's
   per-breakpoint values. ---------- */
.yg-voUA0 .yg-mvp5b{height:auto!important;min-height:0!important}
@media (min-width:1200px){
  body[data-og-page="home"] .yg-mvp5b{padding:120px 300px!important}
}
.yg-voUA0 .yg-eo048p{
  height:auto!important;min-height:0!important;
  padding-top:100px!important;padding-bottom:100px!important;
}
@media (max-width:809px){
  .yg-voUA0 .yg-mvp5b{padding:64px 30px!important}
  .yg-voUA0 .yg-eo048p{
    gap:48px!important;
    padding-top:64px!important;padding-bottom:64px!important;
  }
}
/* desktop CTA band: same treatment the sub-1200 breakpoints already
   got — compact band, content column pinned to it and centered
   (.yg-1ap763u is the desktop variant's column; .yg-1gym4ok covers
   any variant that shows it at this width) */
@media (min-width:1200px){
  .yg-voUA0 .yg-92jzxg{height:560px!important}
  .yg-voUA0 .yg-1gym4ok,
  .yg-voUA0 .yg-1ap763u{
    top:0!important;bottom:0!important;height:100%!important;
    justify-content:center!important;
    padding:80px 100px!important;
  }
}

/* ---------- homepage testimonial cards ("Loved by families"): the
   source gave the first card a different fixed width than the other
   two (323px vs 362px) and centered the row, so heights and tops all
   differed. Equal flexible widths, equal stretched heights, names
   pinned to the card bottoms. ---------- */
@media (min-width:1200px){
  .yg-voUA0 .yg-xtjgct{align-items:stretch!important;height:auto!important}
  .yg-voUA0 .yg-uq7aso,
  .yg-voUA0 .yg-y9mepr,
  .yg-voUA0 .yg-1qb7vpj{
    flex:1 1 0!important;width:auto!important;
    aspect-ratio:auto!important;height:auto!important;min-height:0!important;
    justify-content:space-between!important;
  }
}
/* tablet: cards are stacked full-width; height to content instead of
   the source's 1.74 aspect ratio (phone already fixed further down) */
@media (min-width:810px) and (max-width:1199.98px){
  .yg-voUA0 .yg-uq7aso,
  .yg-voUA0 .yg-y9mepr,
  .yg-voUA0 .yg-1qb7vpj{
    aspect-ratio:auto!important;height:auto!important;min-height:0!important;
  }
}

/* ---------- homepage consultation buttons: one geometry. The source
   shipped the same 194×37 pill three times with 14px text in the hero
   and 16px in the CTA band — and 37px is under the 44px tap-target
   minimum. Colours stay per section (red on the hero video, steel
   blue on the red band). ---------- */
.yg-voUA0 .yg-xpyekj{
  width:auto!important;min-width:200px;
  height:auto!important;min-height:44px;
  padding:10px 26px!important;
}
/* both the var and the direct property: the band button's label gets
   its size from a plain font-size rule, not the .yg-text var formula */
.yg-voUA0 .yg-xpyekj .yg-text{--yg-font-size:15px!important;font-size:15px!important}

/* ============================================================
   Gallery — center the six discipline titles (FASHION DESIGN,
   ARCHITECTURE, …). Their RichTextContainers are already
   width:100%, so alignment alone does it.
   ============================================================ */
.yg-1f4wlqg h1.yg-text,
.yg-1fhn2k5 h1.yg-text,
.yg-177yzp0 h1.yg-text,
.yg-1jw88ls h1.yg-text,
.yg-11ztvpc h1.yg-text,
.yg-1n9c7sf h1.yg-text{text-align:center!important}

/* ============================================================
   Approach — "Development Pathways" cards + program detail sheet
   (.yg-frfz8 component: cards .yg-l537ta/.yg-7ybjmh/
   .yg-kujtgi, sheet variants .yg-1ky8w0y/.yg-1qjkfv6/
   .yg-1jc24gy render into the #overlay portal)
   ============================================================ */

/* card media is too bright for the white copy — scrim it, heavier
   behind the title (top) and grade label (bottom) */
.yg-frfz8 .yg-l537ta::after,
.yg-frfz8 .yg-7ybjmh::after,
.yg-frfz8 .yg-kujtgi::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(16,18,35,.55) 0%,rgba(16,18,35,.24) 42%,
    rgba(16,18,35,.24) 68%,rgba(16,18,35,.5) 100%);
}
/* keep the card copy (and the expand button) above the scrim; the
   unclassed media div and the *-container video embeds stay below */
.yg-frfz8 .yg-l537ta>div[class^="yg-"]:not([class$="-container"]),
.yg-frfz8 .yg-7ybjmh>div[class^="yg-"]:not([class$="-container"]),
.yg-frfz8 .yg-kujtgi>div[class^="yg-"]:not([class$="-container"]){
  position:relative;z-index:2;
}

/* ---------- program detail sheet ----------
   Ships as a bare white fixed panel (no backdrop, 100px voids,
   off-centre). Restyle into a deliberate bottom sheet. */
.yg-frfz8.yg-1ky8w0y,
.yg-frfz8.yg-1qjkfv6,
.yg-frfz8.yg-1jc24gy{
  inset:96px 40px 0!important;
  max-width:1160px!important;
  margin-inline:auto!important;
  gap:56px!important;
  padding:72px clamp(24px,7vw,96px) 72px!important;
  border-top-left-radius:28px!important;
  border-top-right-radius:28px!important;
  box-shadow:0 -24px 80px rgba(8,10,22,.5);
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
@media (max-width:809px){
  .yg-frfz8.yg-1ky8w0y,
  .yg-frfz8.yg-1qjkfv6,
  .yg-frfz8.yg-1jc24gy{
    inset:56px 10px 0!important;
    gap:44px!important;
    padding:56px 20px 56px!important;
    border-top-left-radius:20px!important;
    border-top-right-radius:20px!important;
  }
}

/* close button: keep it visible while the sheet scrolls. It's the
   first flex item (order:-1, 38px tall); the negative bottom margin
   swallows its 38px + the 56px column gap so layout doesn't shift. */
.yg-frfz8 .yg-16uqwi-container,
.yg-frfz8 .yg-pf1o3w-container,
.yg-frfz8 .yg-19tcqv7-container{
  position:sticky!important;top:0!important;right:auto!important;
  order:-1;align-self:flex-end;z-index:20;
  margin:-44px -8px -94px 0;
}
@media (max-width:809px){
  .yg-frfz8 .yg-16uqwi-container,
  .yg-frfz8 .yg-pf1o3w-container,
  .yg-frfz8 .yg-19tcqv7-container{margin:-32px 0 -82px 0}
}
.yg-frfz8 .yg-16uqwi-container>div,
.yg-frfz8 .yg-pf1o3w-container>div,
.yg-frfz8 .yg-19tcqv7-container>div{
  cursor:pointer;transition:background-color .2s ease,transform .2s ease;
}
.yg-frfz8 .yg-16uqwi-container>div:hover,
.yg-frfz8 .yg-pf1o3w-container>div:hover,
.yg-frfz8 .yg-19tcqv7-container>div:hover{
  background-color:#c8283f!important;transform:scale(1.08);
}

/* /approach program cards: enhance.js overlays an anchor to the
   program's own page (the runtime that opened the detail sheet is
   gone). The maximaize icon underneath stays purely decorative. */
a.og-prog-link{
  position:absolute;inset:0;z-index:5;
  border-radius:inherit;cursor:pointer;
}
a.og-prog-link:focus-visible{outline:3px solid #d23b4a;outline-offset:3px}

/* backdrop behind the sheet (injected by enhance.js) */
.og-scrim{
  position:fixed;inset:0;z-index:9;cursor:pointer;
  background:rgba(12,14,28,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:og-fade .25s ease;
}
@keyframes og-fade{from{opacity:0}}
html.og-modal-open{overflow:hidden!important}
@media (prefers-reduced-motion:reduce){
  .og-scrim{animation:none}
  .yg-frfz8 .yg-16uqwi-container>div,
  .yg-frfz8 .yg-pf1o3w-container>div,
  .yg-frfz8 .yg-19tcqv7-container>div{transition:none}
  .yg-frfz8 .yg-16uqwi-container>div:hover,
  .yg-frfz8 .yg-pf1o3w-container>div:hover,
  .yg-frfz8 .yg-19tcqv7-container>div:hover{transform:none}
}

/* ---------- homepage: the two photo-and-copy sections ("Why
   families choose YG", "AI era positioning") gave their photo an
   aspect-ratio tied to viewport width but fixed the section height
   (600px / 85vh), so on wide screens the photo grows past the
   section and overlaps the student-testimonial cards above and the
   copy below. Let the sections grow with their photo instead; the
   vertical padding keeps a gap to the neighbouring sections once
   the photo is the tallest thing in the row. ---------- */
@media (min-width:1496px){
  .yg-voUA0 .yg-y35eg8{
    height:auto!important;min-height:600px!important;
    padding:50px 100px!important;
  }
  .yg-voUA0 .yg-1j1619k{
    height:auto!important;min-height:85vh!important;
    padding:60px 100px!important;
  }
}
@media (min-width:1200px) and (max-width:1495.98px){
  .yg-voUA0 .yg-y35eg8{
    height:auto!important;min-height:75vh!important;
    padding:50px 75px!important;
  }
}

/* ---------- blog deferred (see /roadmap.md) ----------
   Blog section pulled from the live site for now. Hides every blog
   entry point (top nav + footer nav) site-wide; survives the runtime
   re-hydration because it's a rule, not a DOM edit. Remove this block
   when the blog comes back. */
a[href="/blog"],
a[href="/blog/"],
a[href^="/blog/"],
a[href="./blog"],
a[href^="./blog/"]{display:none!important}
/* ---------- /outcomes: static alumni profile links ----------
   The alumni carousel's profile anchors are enhance.js-injected overlays,
   so without JS (and for crawlers) the seven profile pages were unreachable
   from their hub — the names lived only in image alt text. This strip is
   the always-there path. It sits directly under the oc-dark band and keeps
   the same navy so it reads as that band's baseboard rather than a new
   section; links are white with the brand-red underline on hover/focus,
   sized as comfortable tap targets, wrapping to multiple rows on phones. */
.og-alumni-links{background:#323455;padding:0 32px 56px;text-align:center}
.og-alumni-links p{
  margin:0 0 8px;color:#8fb3c6;font-size:15px;line-height:1;
  font-family:"Inter Variable",Inter,system-ui,sans-serif;
  font-variation-settings:"opsz" 14,"wght" 600;
}
.og-alumni-links ul{
  list-style:none;margin:0 auto;padding:0;max-width:900px;
  display:flex;flex-wrap:wrap;justify-content:center;column-gap:8px;
}
.og-alumni-links a{
  display:inline-block;padding:12px 12px;color:#fff;font-size:16px;line-height:1;
  font-family:"Inter Variable",Inter,system-ui,sans-serif;
  font-variation-settings:"opsz" 14,"wght" 600;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);
  text-decoration-thickness:1px;text-underline-offset:5px;
  transition:text-decoration-color .2s ease;
}
.og-alumni-links a:hover,
.og-alumni-links a:focus-visible{
  text-decoration-color:#e54e5e;text-decoration-thickness:2px;
}

/* ---------- auto-mover pause controls (WCAG 2.2.2) ----------
   Injected by enhance.js (ogPauseToggle): .og-car-pause sits in the
   /outcomes carousel's controls fieldset on the dark navy band;
   .og-ticker-pause floats over each /gallery marquee strip's corner
   (light page background). aria-pressed="true" = paused → swap the
   pause glyph for the play glyph. Keyboard focus rides the global
   focus-visible rule. Neither button exists under
   prefers-reduced-motion — the movers themselves never start — so
   only the hover transition needs stilling there. */
.og-car-pause,.og-ticker-pause{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s;
}
.og-car-pause svg,.og-ticker-pause svg{display:block;width:14px;height:14px}
.og-car-pause .og-pp-play,.og-ticker-pause .og-pp-play{display:none}
.og-car-pause[aria-pressed="true"] .og-pp-pause,
.og-ticker-pause[aria-pressed="true"] .og-pp-pause{display:none}
.og-car-pause[aria-pressed="true"] .og-pp-play,
.og-ticker-pause[aria-pressed="true"] .og-pp-play{display:block}
/* carousel: centred under the arrows/dots on the #323455 band */
.og-car-pause{
  margin:14px auto 0;color:#fff;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);
}
.og-car-pause:hover{background:#c8283f;border-color:#c8283f}
/* ticker: anchored to the strip's bottom-right corner; the strip's
   images run beneath it, so a translucent white chip keeps the glyph
   legible on any frame */
.ga-car{position:relative}
.og-ticker-pause{
  position:absolute;right:16px;bottom:16px;z-index:2;color:#343459;
  border:1.5px solid rgba(52,52,89,.35);background:rgba(255,255,255,.85);
}
.og-ticker-pause:hover{background:#343459;border-color:#343459;color:#fff}
@media (prefers-reduced-motion:reduce){
  .og-car-pause,.og-ticker-pause{transition:none}
}