:root {
  --bg: #F8F7F4;
  --bg-secondary: #F2F0EB;
  --white: #FFFFFF;
  --card-border: #D8D2C4;
  --nav-border: #E4DFCF;
  --cream-panel: #FAF5E4;

  --navy-deep: #0D1F2D;
  --navy-mid: #1E3040;

  --text-dark: #1E2C38;
  --text-body: #3A5268;
  --text-muted: #7A8E9E;
  --text-light-body: #A9BCC9;
  --text-light-heading: #F5F8F6;
  --text-light-heading2: #EDF2F0;
  --text-light-muted: #B9D8C9;

  --error: #B23B3B;

  --gold: #C4A84A;
  --green: #74C69D;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'DM Sans', system-ui, sans-serif;
  scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; }
a:hover { opacity: 0.75; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

details > summary .curio-chevron { display: inline-block; transition: transform 0.2s; }
details[open] > summary .curio-chevron { transform: rotate(180deg); }

/* Hide the short intro blurb once its "Read more" details block is expanded,
   so the summary text isn't just sitting there duplicated above the full content. */
.kd-collapsible:has(details[open]) .kd-blurb { display: none; }

@keyframes curioBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Doc-page (training / bibliography one-pagers) */
.doc-page-wrap { overflow: hidden; width: 100%; }
.doc-page {
  background: var(--white);
  max-width: 8.5in;
  margin: 32px auto;
  padding: 0.65in;
  box-shadow: 0 4px 24px rgba(30, 44, 56, 0.08);
  border-radius: 4px;
}
.doc-page.doc-page--bib { padding: 0.85in; }

@media print {
  body { background: var(--white); }
  .doc-page { box-shadow: none; margin: 0; max-width: none; }
  .doc-page-wrap { overflow: visible; }
  h2 { break-after: avoid; }
  p { break-inside: avoid; }
}

@media (max-width: 600px) {
  .doc-page { padding: 0.4in; margin: 0; border-radius: 0; }
  .doc-page.doc-page--bib { padding: 0.5in; }
}

/* Scroll-snap was tried site-wide (desktop only) but kept fighting every
   programmatic scroll feature added since — proximity-snap silently
   redirects scrollTo() (Back Up, anchor links, term-box reveal) to the
   nearest section boundary instead of the literal target, which showed up
   as "Back up doesn't reach the top" / "stops halfway" on pages whose
   section layout put a snap point within proximity range. Disabled
   everywhere; [data-snap-section] attributes are left in place.
   scroll-margin-top intentionally NOT set here (it was previously, sized
   for the old sticky hero) — anchor-scroll.js and term-boxes.js already
   compute the current banner offset dynamically via stickyOffset(), so a
   second, stale, hero-sized offset here was compounding with that and
   landing targets far too low on the page. */
[data-snap-section] {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Hover/tap preview hero (nav replacement). Non-sticky on every breakpoint —
   it scrolls away normally and hands off to .subpage-return-banner right
   after it (zero gap), same handoff as Home's desktop hero. */
.hero-compact {
  position: relative;
  z-index: 50;
  height: clamp(216px, 23vw, 244px);
  overflow: hidden;
  background: #16232B;
  display: flex;
  flex-wrap: wrap;
}
.hero-tiles-media {
  position: relative;
  flex: 2 1 380px;
  height: 100%;
  overflow: hidden;
  background: #16232B;
}
@media (max-width: 799px) {
  /* Subpage banners: near-full-screen on first load, then scroll away normally (no sticky pin) */
  .hero-compact { height: 80vh; position: relative; }
}
.hero-mobile-blurb-panel { display: none; }
@media (max-width: 799px) {
  .hero-mobile-blurb-panel {
    display: block;
    position: relative;
    background: #16232B;
    min-height: 84px;
    box-sizing: border-box;
    padding: 18px 28px 22px;
  }
}

/* Sticky return banner — starts below the fold, right after the hero,
   scrolls up normally, then sticks at the top of the screen for the
   whole page. Its containing block is the page's outer wrapper, which ends
   right before the "Get in touch" CTA section, so it's naturally pushed out
   of the way once that section arrives. Universal: all 5 pages, mobile and
   desktop — desktop heroes are non-sticky (see .hero-compact / .home-hero-desktop)
   so they hand off to this banner the same way on every page. */
.subpage-return-banner {
  display: flex; flex-direction: column;
  position: sticky; top: 0; z-index: 40;
  background: #16232B; border-bottom: 2px solid #C4A84A;
  box-sizing: border-box;
}
.subpage-return-banner-row { display: flex; align-items: center; gap: 12px; padding: 14px 28px; }
.subpage-return-banner img { height: 24px; width: auto; display: block; }
.subpage-return-banner span {
  font-family: 'Lora', serif; font-weight: 700; font-size: 18px; color: #F5F8F6;
}

/* Discreet "Back up" escape hatch, right-aligned in the banner row — the
   only way back once the banner has locked scrolling. Specificity note: the
   ".subpage-return-banner span" rule (18px Lora, for the page-name label)
   would otherwise win over a plain ".banner-back-up-label" class, so these
   are scoped under ".banner-back-up" to out-rank it. */
.banner-back-up {
  margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 3px;
  background: transparent; border: none; padding: 4px 6px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.banner-back-up:hover { opacity: 0.75; }
.banner-back-up .banner-back-up-label,
.banner-back-up .banner-back-up-arrow {
  color: #C4A84A !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important;
}
.banner-back-up .banner-back-up-label { font-size: 10px !important; letter-spacing: 0.04em; text-transform: none; }
.banner-back-up .banner-back-up-arrow { font-size: 11px !important; line-height: 1; }

/* "This page" and "Site" sit side by side in their own row below the
   logo/page-name/back-up row. */
.banner-menu-row { position: relative; display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; padding: 0 28px 10px; }

/* "On this page" menu — lives inside the sticky return banner. Opens as
   plain gold words to the right of the trigger, within the banner's own
   blue background (mirrors "Site", which opens left of its own trigger),
   instead of a dropdown card over the page content below. */
.home-section-menu { display: block; padding: 0; position: relative; }
.home-section-menu-trigger {
  display: flex; align-items: center; gap: 6px;
  position: relative; z-index: 46;
}
/* The ".subpage-return-banner span" rule (18px Lora bold, for the
   page-name label) otherwise wins over this — same fix as .banner-back-up. */
.home-section-menu-trigger .home-section-menu-label {
  font-size: 10px !important; letter-spacing: 0.04em; text-transform: none;
  font-weight: 600 !important; font-family: 'DM Sans', sans-serif !important; color: #C4A84A !important;
}
/* Wraps by width, not explicit HTML rows: a generous width on laptop/
   desktop (room for 3 short items per line — 2 lines total for a 6-item
   list) and a narrower one on mobile (2 items per line — 3 lines for the
   same list), with enough safety margin either side that ordinary
   font-rendering variance on a real device doesn't flip the line count. */
.home-section-menu-list {
  position: absolute; top: 50%; transform: translateY(-50%); left: 100%; margin-left: 10px; z-index: 45;
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 5px 14px;
  width: 560px;
}
.home-section-menu-list a {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: #C4A84A; white-space: nowrap;
}
@media (max-width: 799px) {
  /* Slightly smaller than the trigger label's 10px (barely perceptible)
     and a tighter gap — the longer lists (Knowledge, Home) need every
     spare pixel to reliably pair two items per row in the space available
     before the "Site" trigger on a narrow screen. */
  .home-section-menu-list { width: 195px; gap: 5px 6px; }
  .home-section-menu-list a { font-size: 9px; }
}
/* Knowledge's 6-item list needs 3 rows on mobile to stay readable — let
   the banner grow by one extra line while it's open there, rather than
   cram a 3rd row into the space sized for 2. Not needed on laptop/desktop,
   where the wider list above already fits it on 2 rows. */
@media (max-width: 799px) {
  body.page-knowledge .banner-menu-row:has(.home-section-menu[open]) {
    padding-bottom: 26px;
  }
}
/* "Site" nav — right-aligned in the same row as "this page" (so they sit
   level with each other). Opens as plain gold words on a single line,
   extending left from the trigger, staying within the banner's existing
   height (no card, no scrim, no growing the banner) — matching the
   hamburger next to the logo at the top of the page. */
.banner-site-menu { display: block; padding: 0; margin-left: auto; position: relative; }
.banner-site-menu-list {
  /* right:100% (not 0) so the list sits entirely left of the trigger's own
     box, with a small gap — otherwise its rightmost word lands directly
     under/behind the trigger itself instead of beside it. Wraps onto two
     rows (max-width) rather than one long line, so on narrow screens it
     doesn't reach all the way over to "this page" on the far left either. */
  position: absolute; top: 50%; transform: translateY(-50%); right: 100%; margin-right: 10px; z-index: 47;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 14px;
  width: 190px;
}
/* Specificity note: ".subpage-return-banner span" (18px Lora bold white,
   for the page-name label) otherwise wins over a plain single-class rule
   on this <span> — same fix as ".banner-back-up-label" elsewhere. */
.banner-site-menu-list a,
.banner-site-menu-list .banner-site-menu-current {
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.02em;
  font-family: 'DM Sans', sans-serif !important; color: #C4A84A !important;
}
.banner-site-menu-list .banner-site-menu-current { color: #7A8E9E !important; }
@media (max-width: 480px) {
  .banner-site-menu-list { gap: 4px 9px; }
}

/* "What does Curio offer?" tiles — text-only buttons, gold at all times,
   bold + soft gold chip on hover/active. Shares the hero-tiles hover/tap
   mechanism (hero-tiles.js), styled independently of the main hero tiles. */
.work-eyebrow { text-align: center; }
.work-tile { cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 10px 6px; border-radius: 6px; border: 1px solid transparent; transition: background 0.2s; box-sizing: border-box; }
.work-tile-label { font-size: 14px; font-weight: 400; }
.work-tile.is-active .work-tile-label { font-weight: 700; }
/* Arrow points toward the preview window: right on desktop (preview sits
   beside the list), down on mobile (preview sits below the stacked list). */
.work-tile-arrow { font-size: 11px; color: #C4A84A; line-height: 1; flex-shrink: 0; margin-left: 10px; transform: rotate(-90deg); }
@media (max-width: 799px) {
  .work-tile-arrow { transform: none; }
}

/* Mobile hamburger (next to the logo) + dropdown menu replacing the old bottom
   tap row. On desktop the hamburger stays hidden entirely — desktop already
   has its own always-visible tile list. */
.hero-logo-row { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 32px; position: relative; z-index: 5; }
.hero-logo-row .hero-logo { margin: 0; position: static; }
.hero-mobile-menu-trigger {
  display: none; -webkit-appearance: none; appearance: none;
  background: transparent; background-color: transparent; border: none; padding: 6px; margin: 0;
  -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none;
}
.hero-mobile-menu[hidden] { display: none; }
/* Universal (used by the subpage hero's mobile-only nav trigger — still
   gated mobile-only via .hero-mobile-menu-trigger's own display:none — and
   by the "on this page" menu trigger, which is universal). */
.hero-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 15px; height: 10px; }
.hero-hamburger span { display: block; width: 100%; height: 1.5px; background: #C4A84A; border-radius: 1px; }
@media (max-width: 799px) {
  .hero-mobile-menu-trigger { display: inline-flex; align-items: center; cursor: pointer; }
  /* Plain list opening horizontally to the right of the hamburger — no card/box,
     just the words in gold. JS sets left/top to sit right next to the hamburger. */
  .hero-mobile-menu {
    position: absolute; top: 16px; left: 90px; right: 10px; z-index: 20;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 11px;
  }
  .hero-mobile-menu .hero-tile-mobile {
    all: unset; cursor: pointer; display: inline-block; box-sizing: border-box;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6); touch-action: manipulation;
    background: transparent !important; border-color: transparent !important;
  }
  .hero-mobile-menu .hero-tile-label { color: #C4A84A !important; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  .hero-mobile-menu .hero-tile-mobile-current { cursor: default; }
  .hero-mobile-menu .hero-tile-mobile-current .hero-tile-label { color: #7A8E9E !important; font-weight: 600; }
  /* Distinct "confirm to navigate" state — clearly different from the plain list */
  .hero-mobile-menu .hero-tile-mobile.is-active {
    background: rgba(196,168,74,0.18) !important;
    border: 1.5px solid #C4A84A !important; border-radius: 6px !important;
    padding: 5px 10px !important;
  }
  .hero-mobile-menu .hero-tile-mobile.is-active .hero-tile-label {
    color: #C4A84A !important; font-weight: 800 !important;
  }
}
@media (min-width: 800px) {
  .hero-mobile-menu { display: none !important; }
}
/* Studio's hero photo needs more vertical room to show full faces/shoulders,
   but must never dominate the viewport on short screens */
body.page-studio .hero-compact {
  height: clamp(248px, min(34vw, 41vh), 407px);
}
@media (max-width: 799px) {
  body.page-studio .hero-compact { height: 80vh; position: relative; }
  /* Full-bleed cover crop, positioned so the tall narrow mobile window catches
     both the whiteboard (far left of the photo) and the presenter (just right
     of it), rather than centering on the crowd further right. */
  body.page-studio .hero-layer[data-hero-layer="studio"] > div:first-child {
    background-size: cover !important;
    background-position: 18% center !important;
  }
}

/* Fellowship's photo reads too dark on the tall, mostly-gradient mobile hero — brighten it there */
@media (max-width: 799px) {
  body.page-fellowship .hero-layer[data-hero-layer="fellowship"] > div:first-child {
    filter: brightness(1.15) saturate(1.1) !important;
  }
}

/* No permanent transition here: a page can have dozens of these stacked
   .hero-layer divs (mobile hero, desktop hero, each subpage hero, the
   "What does Curio offer?" preview window) and Chrome tends to promote any
   element with a standing `transition: opacity` to its own GPU-composited
   layer — with that many layers stacked, a fast scroll/fling can desync a
   layer's paint from the rest of the page for a frame, showing a torn mix
   of two scroll positions at once. Only grant the transition (and the
   layer promotion that comes with it) while a tile is actually being
   hovered/previewed, where the crossfade is needed. */
.hero-layer { position: absolute; inset: 0; }
[data-hero-tiles]:hover .hero-layer,
[data-hero-tiles].is-previewing .hero-layer {
  transition: opacity 0.8s ease;
}
.hero-logo { position: relative; z-index: 1; display: block; width: fit-content; margin: 18px 0 0 32px; }
.hero-logo img { height: 38px; width: auto; display: block; }
.hero-text { position: relative; z-index: 1; margin: 16px 0 0 32px; max-width: 60%; }
@media (max-width: 799px) {
  .hero-text { max-width: calc(100% - 64px); }
}
.hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #C4A84A; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero-title { font-family: 'Lora', serif; font-weight: 600; font-size: clamp(23px, 3.4vw, 32px); line-height: 1.15; color: #FFFFFF; margin-top: 8px; text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.hero-tiles-desktop {
  flex: 1 1 300px; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(2px, 0.7vw, 5px);
  padding: clamp(8px, 1.5vw, 14px) clamp(16px, 3vw, 24px); box-sizing: border-box; z-index: 4;
  background: #16232B; border-left: 2px solid #C4A84A;
}
@media (max-width: 799px) {
  .hero-tiles-desktop { display: none; }
}
/* Subpage nav list shows all 5 pages (incl. current), so tiles run smaller than
   Home's shared .hero-tile styling to still fit comfortably. Scoped to this
   container only — Home's hero tile column doesn't use .hero-tiles-desktop. */
.hero-tiles-desktop .hero-tile { padding: clamp(3px,0.9vw,6px) clamp(8px,1.6vw,12px); gap: 6px; }
.hero-tiles-desktop .hero-tile-label { font-size: clamp(10px, 1.9vw, 12.5px); }
.hero-tiles-desktop .hero-tile-dot { font-size: 9px; }
.hero-tile-current {
  cursor: default; background: rgba(196,168,74,0.14); border-color: rgba(196,168,74,0.4);
}
.hero-tiles-desktop .hero-tile-current .hero-tile-label { font-weight: 700; }
.hero-tile { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: clamp(6px,1.5vw,10px) clamp(9px,2vw,14px); border-radius: 6px; background: rgba(20,30,38,0.7); border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.hero-tile-dot { font-size: 11px; flex-shrink: 0; }
.hero-tile-label { font-size: clamp(11px, 2.6vw, 14.5px); font-weight: 500; line-height: 1.25; }
.hero-tile-mobile { cursor: pointer; flex: 1 1 42%; min-width: 120px; text-align: center; padding: 9px 10px; border-radius: 6px; background: rgba(20,30,38,0.7); border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.hero-tile-mobile .hero-tile-label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.hero-tile-mobile-current { cursor: default; background: rgba(122,142,158,0.16); border-color: rgba(122,142,158,0.4); }
.hero-tile-mobile-current .hero-tile-label { color: #7A8E9E; font-weight: 600; }

/* Home page's mobile hero nav tiles: match the subtle small-gold-text look
   of the sticky banner's "Back up" button instead of the heavier dark pill,
   so they read as a quiet nav row rather than crowding the globe artwork.
   !important needed because hero-tiles.js sets label/tile colors inline. */
.home-hero-mobile .hero-tile-mobile {
  background: transparent !important; border: 1px solid transparent !important; padding: 6px 10px;
}
.home-hero-mobile .hero-tile-mobile.is-active {
  background: rgba(196,168,74,0.14) !important; border-color: rgba(196,168,74,0.4) !important;
}
.home-hero-mobile .hero-tile-mobile .hero-tile-label {
  color: #C4A84A !important; font-size: 10px !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; font-weight: 600 !important;
}
.home-hero-mobile .hero-tile-mobile.is-active .hero-tile-label { font-weight: 800 !important; }
.hero-tiles-subpage-desc { display: block; }
@media (max-width: 799px) {
  .hero-tiles-subpage-desc { display: none; }
}
.hero-scroll-hint { display: none; justify-content: center; padding: 8px 0 10px; }
@media (max-width: 799px) {
  .hero-scroll-hint { display: flex; }
}
@keyframes curioScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Home hero: mobile vs desktop variants */
.home-hero-mobile { display: none; }
/* Desktop hero sits in its own bounded sticky wrapper: the wrapper's
   margin-top centers the hero on load exactly as before, and its height is
   sized so the wrapper's bottom edge — where the hero's sticky range runs
   out and it starts scrolling away for real — lands exactly at 100vh. The
   zero-gap banner right after this wrapper has its natural (unstuck) top at
   that same 100vh point, so it's fully hidden below the fold on load, and
   the two swap over in perfect sync: hero fully exits the instant the
   banner locks to the top, with no gap and no premature peek. */
.home-hero-sticky-wrap {
  display: block; position: relative;
  margin-top: calc(50vh - clamp(90px,11.5vw,122px));
  height: calc(50vh + clamp(90px,11.5vw,122px));
}
.home-hero-desktop { display: flex; }
.home-hero-spacer { height: 0; }
@media (max-width: 799px) {
  /* Reserve exactly enough room that the banner right after this block lands
     flush with the bottom of the viewport on load, on any device height —
     calc() against the banner's own fixed height, not a guessed vh value. */
  .home-hero-mobile { display: flex; min-height: calc(100vh - 54px); }
  .home-hero-sticky-wrap { display: none; }
  .home-hero-desktop { display: none; }
  .home-hero-spacer { height: 0; }
  /* The banner sits directly above this section — cut its top padding so there's
     no dead white gap between the navy banner and the page content starting. */
  body.page-home #where-to-start { padding-top: 32px !important; }
}
.ktd-diagram-mobile { display: none; }
@media (max-width: 799px) {
  .ktd-diagram-desktop { display: none; }
  .ktd-diagram-mobile { display: block; margin: 0 auto; }
}

/* Home "Introducing Curio" section: body text + term boxes left, "Know-Do
   Gap" card right on desktop; stacks and centers on mobile. */
.intro-2col { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; text-align: left; }
@media (max-width: 799px) {
  .intro-2col { grid-template-columns: 1fr; text-align: center; }
}

/* Home "Impact Framework" section: diagram left, text right on desktop.
   DOM order stays text-then-diagram (matches mobile reading order); `order`
   flips the visual placement on desktop without touching markup order. */
.impact-framework-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left; }
.impact-framework-2col .impact-framework-diagram { order: 1; }
.impact-framework-2col .impact-framework-text { order: 2; text-align: center; }
@media (max-width: 799px) {
  .impact-framework-2col { grid-template-columns: 1fr; text-align: center; }
  .impact-framework-2col .impact-framework-diagram { order: 2; }
  .impact-framework-2col .impact-framework-text { order: 1; }
}

/* Home "What does Curio offer?" section: tiles/text left, preview window
   right on desktop. DOM order already matches mobile's stacked order
   (tiles above preview), so no `order` swap is needed here. */
.work-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left; }
@media (max-width: 799px) {
  .work-2col { grid-template-columns: 1fr; text-align: center; }
  .work-2col .work-right { margin-top: 14px; }
}

/* Studio "How does the AI Studio work?" two-column layout */
.studio-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.studio-hologram-img { display: block; }
@media (max-width: 799px) {
  .studio-2col { grid-template-columns: 1fr; }
  .studio-stages-col { border-left: none; padding-left: 0; border-top: 1px solid #C4A84A; padding-top: 24px; }
  .studio-hologram-img { display: none; }
}

/* Studio offer buttons (hero image toggles) */
.offer-button {
  cursor: pointer; display: block; position: relative; border-radius: 14px; overflow: hidden;
  height: 220px; width: 100%; padding: 0; border: none; margin: 0; color: #FFFFFF;
  font-family: 'DM Sans', sans-serif; text-align: left;
}
.offer-button:focus-visible { outline: 3px solid #C4A84A; outline-offset: 2px; }
.offer-button-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-button-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,26,34,0.15) 0%, rgba(13,26,34,0.82) 100%); }
.offer-button-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; }

/* Expandable term boxes (Home + Advisory) */
.term-box-toggle {
  cursor: pointer; background: none; border: none; padding: 0; margin: 0;
  font: inherit; text-align: left; display: flex; width: 100%;
  justify-content: space-between; align-items: center; gap: 10px;
}
.term-box-toggle:focus-visible { outline: 2px solid #C4A84A; outline-offset: 4px; }
.term-box-body { display: none; opacity: 0; transition: opacity 0.25s ease; }
.term-box-body.is-open { opacity: 1; }
.term-box-body p { margin: 0 0 12px; }
.term-box-body p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
  .term-box-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .term-box-grid > div { border-left: none !important; padding-left: 0 !important; border-top: 1px solid #E4DFD3; padding-top: 16px !important; }
  .term-box-grid > div:first-child { border-top: none; padding-top: 0 !important; }
}

.fellowship-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.fellowship-detail-col-who { padding: 0 28px 0 0; }
.fellowship-detail-col-divider { padding: 0 28px; border-left: 1px solid #C4A84A; }
.fellowship-detail-col-divider:last-child { padding: 0 0 0 28px; }
@media (max-width: 799px) {
  .fellowship-detail-grid { display: flex; flex-direction: column; gap: 0; }
  .fellowship-detail-col-who { padding: 0; }
  .fellowship-detail-col-divider { border-left: none; border-top: 1px solid #C4A84A; padding: 20px 0; }
  .fellowship-detail-col-divider:last-child { padding: 20px 0; }
}

/* Knowledge "Why Curio works differently" split column */
@media (max-width: 620px) {
  .impact-framework-left { border-right: none !important; padding-right: 0 !important; }
  .impact-framework-right { border-top: 1px solid #D8D2C4; padding-top: 24px; margin-top: 8px; }
}