/* =========================================================================
   IIWM Bangalore — "Wedding Invitation" direction (v2)
   Loaded AFTER css/style.css on every marketing page (index/about/program/
   course-details/placements/gallery/blog/contact). Never loaded by
   quiz.html, so quiz.css and quiz.html stay completely unaffected.
   This file overrides the shared :root tokens from style.css (only on
   pages that load it) and adds every new-direction component.
   ========================================================================= */

:root {
  --ivory: #FDF3EC;
  --ivory-deep: #FBE7DC;
  --gold: #C9A15C;
  --gold-soft: #E7CE9C;
  --gold-text: #A9803F;
  --gold-numeral: #C9A15C;
  --maroon: #7C1830;
  --ink: #2B2118;
  --muted: #7A6B5D;
  --muted-label: #8B7A6A;

  --coral: #EE7F78;
  --coral-dark: #E2655D;
  --coral-soft: #F7C3BF;
  --white: #FFFFFF;

  --radius-card: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 24px 48px -16px rgba(124, 24, 48, .18);
  --shadow-soft: 0 12px 28px -12px rgba(124, 24, 48, .14);
}

body { background: var(--ivory); }

/* ===== Eyebrows restyled for this direction ===== */
.eyebrow {
  color: var(--maroon);
  font-weight: 500;
  letter-spacing: .18em;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 15px 30px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
}
.btn--coral {
  background: var(--coral);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn--coral:hover, .btn--coral:focus-visible { background: var(--coral-dark); }
.btn--outline {
  background: var(--white);
  color: var(--coral);
  border-color: var(--coral-soft);
}
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--coral); }
.btn--white {
  background: var(--white);
  color: var(--coral-dark);
}
.btn--white:hover, .btn--white:focus-visible { background: var(--ivory-deep); }
.btn--sm { padding: 12px 24px; font-size: 11.5px; }

/* ===== Header restyle ===== */
.site-header { background: rgba(253, 243, 236, .92); }
.site-header.is-scrolled { background: rgba(253, 243, 236, .98); }
.wordmark-main { color: var(--maroon); }
.site-nav a::after { background: var(--coral); }
.site-nav a[aria-current="page"],
.site-nav button[aria-current="page"] { color: var(--coral); }
.site-nav a[aria-current="page"]::after,
.site-nav button[aria-current="page"]::after { transform: scaleX(1); }
.cta-pill {
  display: none;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: var(--white);
  padding: 12px 26px;
}
.cta-pill:hover, .cta-pill:focus-visible { background: var(--coral-dark); color: var(--white); }
@media (min-width: 900px) {
  .cta-pill {
    display: inline-flex;
    font-size: 15.5px;
    font-weight: 600;
    padding: 15px 34px;
  }
}

.mobile-menu { background: var(--ivory); }
.mobile-menu a.is-active { color: var(--coral); }
.mobile-menu a.mobile-menu-apply { color: var(--coral); }
/* 9 nav items + Apply Now no longer fit a single centered stack at the old
   36px size on short viewports — shrink type/padding and allow internal
   scrolling as a fallback rather than clipping the last items. */
.mobile-menu {
  justify-content: flex-start;
  overflow-y: auto;
  padding-top: 88px;
  padding-bottom: 44px;
}
.mobile-menu a {
  font-size: clamp(20px, 6vw, 26px);
  padding: 12px 0;
}

/* ===== Buttons with icon ===== */
.btn-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
}
.btn-icon svg { width: 9px; height: 9px; }

/* ===== Page banner (inner pages) ===== */
.page-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);
  padding: clamp(40px, 7vw, 64px) var(--side-pad) clamp(32px, 5vw, 48px);
  text-align: center;
  color: var(--white);
}
/* Small back-to-home affordance on every inner page's banner. */
.page-back-btn {
  position: absolute;
  top: clamp(16px, 3vw, 26px);
  left: clamp(16px, 4vw, var(--side-pad));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  color: var(--white);
  transition: background-color .18s ease, transform .18s ease;
}
.page-back-btn:hover,
.page-back-btn:focus-visible {
  background: rgba(255, 255, 255, .32);
  transform: translateX(-2px);
}
.page-back-btn svg { width: 16px; height: 16px; }
.page-banner-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.page-banner-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.08;
  margin-top: 14px;
}
.page-banner-desc {
  font-size: 16px;
  font-weight: 400;
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}
.page-banner-crumb {
  margin-top: 22px;
  font-size: 14px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .8);
}
.page-banner-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.page-banner::before,
.page-banner::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.page-banner::before { top: -180px; left: -120px; }
.page-banner::after { bottom: -200px; right: -100px; }

/* ===== Launch banner — a small maroon/gold pennant announcing the next
   batch date, pinned to the top-left like a corner tag (not centered).
   Lives inside .hero-fade now so it can sit right on the mobile poster's
   gold hairline frame corner instead of floating in the ivory above it.
   Two stacked clip-path shapes (gold outer, maroon-gradient inner inset
   3px) fake a bordered ribbon with a notched flag-tail bottom, since
   clip-path can't take a CSS border directly. ===== */
.launch-banner {
  position: relative;
  z-index: 5;
  width: clamp(130px, 10.5vw, 158px);
  margin: 0 0 16px;
  filter: drop-shadow(0 8px 14px rgba(43, 8, 16, .26));
}
/* Phones: the poster's gold hairline frame (.hero-fade::after, inset
   10px) is what the banner should read as "pinned to" — absolutely
   positioned so its top-left corner sits exactly on that frame corner,
   instead of sitting in normal flow above the headline. */
@media (max-width: 679px) {
  .launch-banner {
    position: absolute;
    top: 10px;
    left: 10px;
    width: clamp(102px, 28vw, 128px);
    margin: 0;
    z-index: 6;
  }
}
.launch-banner-shape {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  background: linear-gradient(160deg, #E4C270, #B8863F 55%, #8C6B45);
}
.launch-banner-shape::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  background: linear-gradient(165deg, #5C1220, #380A13 60%, #4a0f1a);
}
.launch-banner-content {
  position: relative;
  z-index: 1;
  padding: 10px 8px 20px;
  text-align: center;
}
.launch-banner-eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.launch-banner-date {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: .01em;
  color: #F7E6BE;
  margin-top: 3px;
  line-height: 1.2;
}

/* ===== Hero (homepage) — photo bleeds off the right edge and FADES into
   the ivory page background (no card/border), copy sits on the ivory to
   the left, floating white stats bar overlaps the photo's bottom ===== */
.hero-fade {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 40px) var(--side-pad) clamp(22px, 3.4vw, 44px);
}
/* Phones: poster layout — headline stack centered on ivory up top, the
   info items down the left with gold circle icons, and the photo anchored
   to the bottom-RIGHT corner (behind/beside the info list, not a full-width
   block underneath it) like the print poster this hero is based on. */
@media (max-width: 679px) {
  .hero-fade {
    padding: 0;
    overflow: hidden;
    min-height: calc(100svh - 74px);
  }
}

/* Photo layer: anchored to the right, full height of the section (so it
   also shows behind/below the stats bar like the reference). The fade is
   two overlay gradients of the page ivory — left edge dissolves into the
   background, plus a soft top/bottom blend. */
.hero-fade-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64%;
  z-index: 0;
}
.hero-fade-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-fade-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ivory) 0%, rgba(253, 243, 236, .88) 18%, rgba(253, 243, 236, .4) 38%, rgba(253, 243, 236, 0) 58%);
}
.hero-fade-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(253, 243, 236, .55) 0%, rgba(253, 243, 236, 0) 18%, rgba(253, 243, 236, 0) 72%, rgba(253, 243, 236, .85) 100%);
}
/* Phones: the photo stays anchored to the bottom-right corner behind the
   info list (matching the poster and the desktop side-anchored layout) —
   it never becomes a separate full-width block stacked below everything.
   Only a small sliver fades at its own top-left corner so it reads bright
   and vivid, not washed out. */
@media (max-width: 679px) {
  .hero-fade-media {
    position: absolute;
    top: auto; left: auto;
    right: 0;
    bottom: 0;
    width: 78%;
    height: 56%;
    z-index: 0;
  }
  .hero-fade-media img { object-position: 66% 55%; }
  /* Left ~55% (where the info-list text sits) fades into the ivory so
     text stays legible; the right ~45% (peacock + mandap) stays fully
     vivid — a localized fade instead of dulling the whole photo. */
  .hero-fade-media::before {
    background: linear-gradient(180deg, var(--ivory) 0%, rgba(253, 243, 236, .3) 8%, rgba(253, 243, 236, 0) 18%),
      linear-gradient(90deg, var(--ivory) 0%, rgba(253, 243, 236, .82) 28%, rgba(253, 243, 236, .3) 48%, rgba(253, 243, 236, 0) 62%);
  }
  .hero-fade-media::after {
    background: none;
  }
  /* Thin gold hairline frame around the poster screen, like the print. */
  .hero-fade::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(201, 151, 59, .45);
    pointer-events: none;
    z-index: 4;
  }
}

.hero-fade-vine {
  position: absolute;
  left: -6px;
  width: clamp(44px, 6vw, 84px);
  height: clamp(70px, 9.5vw, 132px);
  color: var(--gold);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}
.hero-fade-vine svg { width: 100%; height: 100%; }
.hero-fade-vine--top { top: 3%; transform: rotate(16deg); }
.hero-fade-vine--mid { top: 46%; transform: scaleX(-1) rotate(12deg); }
/* Phones: hide the vines entirely — they'd sit behind the text column and
   read as clutter at this size. */
@media (max-width: 679px) {
  .hero-fade-vine { display: none; }
}

.hero-fade-content {
  position: relative;
  z-index: 2;
  max-width: min(560px, 50vw);
  padding: clamp(24px, 4.5vw, 72px) 0 clamp(48px, 6vw, 88px);
}
@media (max-width: 679px) {
  .hero-fade-content {
    max-width: none;
    text-align: center;
    padding: 26px var(--side-pad) 6px;
  }
}

/* Poster headline stack: INDIA'S / FIRST / Residential / WEDDING PLANNING
   PROGRAM — tracked sans kicker, oversized gold serif, maroon script,
   maroon small-caps serif. */
.hero-fade-title { margin: 0; }
.hero-title-kicker {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.hero-title-first {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(54px, 16vw, 84px);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: .95;
  /* rich poster gold, warmer than --gold */
  color: #C9973B;
}
.hero-title-script {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 10vw, 52px);
  line-height: 1.05;
  color: var(--maroon);
  margin-top: 2px;
}
.hero-title-main {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(20px, 6.2vw, 30px);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.24;
  color: var(--maroon);
  margin-top: 10px;
}
.hero-fade-tagline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(16px, 4.6vw, 20px);
  letter-spacing: .12em;
  color: var(--ink);
  margin: 0 0 22px;
}
/* From 680px the copy lives in a ~50vw column — rein the poster type in
   so the stack stays proportional inside it. */
@media (min-width: 680px) {
  .hero-title-kicker { font-size: clamp(17px, 2vw, 22px); }
  .hero-title-first { font-size: clamp(48px, 6.4vw, 92px); }
  .hero-title-script { font-size: clamp(30px, 4vw, 56px); }
  .hero-title-main { font-size: clamp(19px, 2.4vw, 34px); }
  .hero-fade-tagline { font-size: clamp(14px, 1.5vw, 20px); }
}

/* line — ◆ lotus ◆ — line divider under the headline */
.hero-fade-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  margin: 18px 0 24px;
}
@media (max-width: 679px) {
  .hero-fade-divider { margin: 12px 0 14px; gap: 8px; justify-content: center; }
  .hero-fade-divider-line { width: clamp(34px, 9vw, 60px); }
}
.hero-fade-divider svg { flex: none; width: 32px; height: 18px; }
.hero-fade-divider-label {
  flex: none;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.hero-fade-divider-line {
  position: relative;
  width: clamp(52px, 6.5vw, 96px);
  height: 1px;
  background: currentColor;
}
.hero-fade-divider-line::after {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: currentColor;
}
.hero-fade-divider-line:first-child::after { right: -3px; }
.hero-fade-divider-line:last-child::after { left: -3px; }

.hero-fade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
@media (max-width: 679px) {
  /* The poster has no buttons and the fixed mobile apply bar already
     carries Explore Program / Download Brochure / Apply Now. */
  .hero-fade-actions { display: none; }
}
/* Mid widths: the ~50vw text column is too narrow for the full-size pills
   to share a row — slim them so both stay side by side like the design. */
@media (min-width: 680px) and (max-width: 1099px) {
  .hero-fade-actions { gap: 10px; }
  .hero-fade-actions .btn {
    padding: 12px 18px;
    font-size: 11px;
    gap: 7px;
  }
}

.hero-fade-stats {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(16px, 2.4vw, 26px) clamp(14px, 3vw, 34px);
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  list-style: none;
}
@media (max-width: 679px) {
  /* Poster style: a plain left-aligned column of items with gold circle
     icons, sitting on the ivory / over the photo's faded left edge —
     no white card. */
  .hero-fade-stats {
    position: relative;
    z-index: 3;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 6px auto 0 var(--side-pad);
    padding: 0;
    width: min(66%, 300px);
  }
  /* Doubled class keeps this above the base icon rule declared later. */
  .hero-fade-stats .hero-fade-stats-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1.3px solid #C6812F;
  }
  /* Text sits partly over the vivid photo — a soft shadow keeps it
     readable without needing a background panel or extra photo fade. */
  .hero-fade-stats-text strong,
  .hero-fade-stats-text {
    text-shadow: 0 1px 8px rgba(253, 243, 236, .9), 0 1px 2px rgba(253, 243, 236, .9);
  }
}
/* Desktop already has a Watch Video button up in .hero-fade-actions —
   this one only exists to give mobile a way to reach it, since the
   poster layout hides .hero-fade-actions entirely there. Sits left-
   aligned under the last stat, matching the stat column's own inset. */
.hero-fade-stats-cta { display: none; }
@media (max-width: 679px) {
  .hero-fade-stats-cta {
    display: block;
    position: relative;
    z-index: 3;
    margin: 18px auto 28px var(--side-pad);
  }
  /* Sized to match the fixed mobile-apply-bar's compact pills (same
     padding/font-size/radius as .mobile-apply-bar a) instead of the
     full-size .btn scale — this button sits right above that locked
     bar, so it reads oddly if it's noticeably bigger than it. */
  .hero-fade-stats-cta .btn {
    width: auto;
    padding: 10px 18px;
    font-size: 10.5px;
    letter-spacing: .02em;
    border-radius: 14px;
    gap: 6px;
  }
  .hero-fade-stats-cta .btn-icon { width: 15px; height: 15px; }
}
@media (min-width: 680px) {
  .hero-fade-stats { grid-template-columns: repeat(4, 1fr); }
}
.hero-fade-stats li { display: flex; align-items: center; gap: 10px; }
@media (min-width: 680px) {
  .hero-fade-stats li:not(:last-child) {
    border-right: 1px solid rgba(124, 24, 48, .12);
    padding-right: 14px;
  }
}
.hero-fade-stats-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #FBEFE0;
  color: #C6812F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-fade-stats-icon svg { width: 20px; height: 20px; }
.hero-fade-stats-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.hero-fade-stats-text strong {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
/* "Internships and Live Industry Exposure" is a single two-line heading
   (no separate description line like the other three stats), so both
   lines are bold — and sized up a touch since it's carrying more visual
   weight as the closing item in the row. */
.hero-fade-stats-text--full strong {
  font-size: 16.5px;
  line-height: 1.25;
}

/* Choreographed entrance, timed to start as the preloader (3s, style.css)
   finishes fading. */
.hero-fade-media,
.hero-fade-tagline,
.hero-fade-title,
.hero-fade-divider,
.hero-fade-actions,
.hero-fade-stats {
  opacity: 0;
  animation: hero-content-in .8s cubic-bezier(.19, 1, .22, 1) forwards;
}
.hero-fade-tagline,
.hero-fade-title,
.hero-fade-divider,
.hero-fade-actions,
.hero-fade-stats { transform: translateY(16px); }
/* Vine fades to its own resting opacity (.55), not the shared 1. */
.hero-fade-vine {
  opacity: 0;
  animation: hero-vine-in .8s ease forwards;
  animation-delay: 2.5s;
}
@keyframes hero-vine-in {
  to { opacity: .55; }
}
.hero-fade-media { animation-delay: 2.4s; }
.hero-fade-title { animation-delay: 2.6s; }
.hero-fade-divider { animation-delay: 2.74s; }
.hero-fade-tagline { animation-delay: 2.86s; }
.hero-fade-actions { animation-delay: 2.98s; }
.hero-fade-stats { animation-delay: 3.1s; }
@keyframes hero-content-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade-media,
  .hero-fade-tagline,
  .hero-fade-title,
  .hero-fade-divider,
  .hero-fade-actions,
  .hero-fade-stats {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-fade-vine { opacity: .55; animation: none; }
}


/* First stat ("Hosted at Bougainvil'La") is a link to the venue's Google
   Maps location — same layout as the plain li's, just clickable, with a
   subtle hover cue so it reads as a link rather than plain text. */
.hero-fade-stats-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  transition: opacity .18s ease;
}
.hero-fade-stats-link:hover,
.hero-fade-stats-link:focus-visible {
  opacity: .82;
}
/* Underlined and coral by default (not just on hover) — this is the only
   stat that's actually a link (opens the venue's Google Maps location),
   so it needs to visibly read as one at rest, not just discover itself
   on hover. */
.hero-fade-stats-link .hero-fade-stats-text strong {
  color: var(--coral-dark);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
}
/* Ink on mobile — the coral hue can clash with warm bands in the photo
   behind it; the gold underline still marks it as a link. */
@media (max-width: 679px) {
  .hero-fade-stats-link .hero-fade-stats-text strong {
    color: var(--ink);
  }
}

.celebrates-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 40px);
  color: var(--ink);
  line-height: 1.15;
}

/* ===== Why IIWM — comparison vs. traditional institutes ===== */
.why-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .why-compare { grid-template-columns: 1fr 1px 1fr; align-items: start; }
}
.why-compare-divider { display: none; }
@media (min-width: 640px) {
  .why-compare-divider { display: block; background: rgba(124, 24, 48, .12); }
}
.why-compare-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.why-compare-col--traditional .why-compare-label { color: var(--muted-label); }
.why-compare-col--iiwm .why-compare-label { color: var(--maroon); }
.why-compare-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(124, 24, 48, .08);
}
.why-compare-col--traditional .why-compare-row { font-size: 16px; color: var(--muted); }
.why-compare-col--iiwm .why-compare-row {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}
@media (min-width: 560px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}
/* Flex column (not the icon/num spans' default inline flow) so icon → num
   → caption always stack in a predictable block order and every column
   in a row reports its true height to the grid — without this, columns
   with different content lengths (e.g. a 2-line caption) could size
   their grid row short and spill into the next section. */
.stat-col {
  position: relative;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 560px) {
  .stat-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(124, 24, 48, .1);
  }
}
.stat-col-icon { width: 34px; height: 34px; color: var(--gold); margin-bottom: 14px; }
.stat-col-icon svg { width: 100%; height: 100%; }
.stat-col-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 40px);
  color: var(--coral);
  line-height: 1;
}
.stat-col p {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 10px;
}

/* ===== Career opportunities grid ===== */
.career {
  background: var(--ivory-deep);
}
.career .section-head { text-align: center; align-items: center; margin-bottom: clamp(36px, 6vw, 56px); }
.career .celebrates-heading { font-size: clamp(28px, 4vw, 38px); }
.career-sub {
  font-size: 15.5px;
  color: var(--muted);
  margin-top: 10px;
}
.career-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 3vw, 28px);
}
@media (min-width: 640px) { .career-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .career-grid { grid-template-columns: repeat(6, 1fr); } }
.career-card { text-align: center; }
button.career-card {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.career-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  text-align: center;
}
.career-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.career-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.career-card-arrow {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(124, 24, 48, .3);
}
.career-card-arrow svg { width: 12px; height: 12px; }
/* Photo-backed card variant: a real photo fills the media box with a
   bottom gradient and the role name overlaid in white, instead of the
   placeholder gradient + icon + caption-below-image pattern the other
   cards still use until they get their own photos. */
.career-card-media--photo .career-card-overlay-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 14px;
  background: linear-gradient(0deg, rgba(20, 14, 10, .85) 0%, rgba(20, 14, 10, .45) 55%, transparent 100%);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
}
.career-card-media--photo .career-card-arrow {
  left: auto;
  right: 12px;
  bottom: auto;
  top: 12px;
}
.career-view-all { text-align: center; margin-top: clamp(36px, 6vw, 52px); }

/* Every career role as a plain underlined text link, one per line —
   clicking one opens the role popup (see js/main.js ROLE_DATA) instead
   of navigating anywhere, so these are <button> elements styled to read
   as text links rather than buttons or pills. */
.career-preview-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.career-preview-item {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .55);
  text-underline-offset: 4px;
  transition: opacity .18s ease, text-decoration-color .18s ease;
}
.career-preview-item:hover,
.career-preview-item:focus-visible {
  opacity: .82;
  text-decoration-color: #fff;
}
/* Rest of the list, revealed by "Show More" — same column flow as the
   first 3 (display: contents keeps its buttons in the same flex column
   instead of nesting a second column inside it). */
.career-preview-extra { display: contents; }
.career-preview-extra[hidden] { display: none; }

.career-expand-wrap { text-align: center; margin-top: 22px; }
.career-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.career-expand-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease;
}
.career-expand-toggle[aria-expanded="true"] .career-expand-icon { transform: rotate(45deg); }


/* ===== Career role popup ===== */
.role-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  background: rgba(32, 24, 16, .5);
}
.role-modal-overlay[hidden] { display: none; }
.role-modal {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--ivory);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 44px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
}
/* Re-plays every time the overlay's [hidden] is removed, since that's a
   fresh display:none -> flex transition each time it opens. */
@keyframes role-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.role-modal-overlay:not([hidden]) .role-modal {
  animation: role-modal-in .28s cubic-bezier(.19, 1, .22, 1);
}
@media (prefers-reduced-motion: reduce) {
  .role-modal-overlay:not([hidden]) .role-modal { animation: none; }
}
.role-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}
.role-modal-close:hover { color: var(--coral); }
/* Labeled exit, opposite corner from the plain × — a clearer, more
   discoverable way to leave the popup than the small close glyph alone. */
.role-modal-back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: color .18s ease;
}
.role-modal-back:hover, .role-modal-back:focus-visible { color: var(--coral); }
.role-modal-back-icon { display: inline-flex; width: 10px; height: 10px; }
.role-modal-back-icon svg { width: 100%; height: 100%; }

/* Warm gradient header band (instead of plain text on ivory) — the close
   button still sits above it since positioned elements stack above
   normal-flow content regardless of DOM order. */
.role-modal-header {
  position: relative;
  overflow: hidden;
  margin: -4px -4px 22px;
  padding: 24px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);
}
.role-modal-header::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -15%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}
.role-modal-eyebrow {
  position: relative;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
}
.role-modal-title {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 30px);
  color: #fff;
  margin-top: 6px;
  line-height: 1.15;
}
.role-modal-tagline {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, .92);
  margin-top: 8px;
}
/* Default (for light backgrounds, e.g. the hero); dark-background
   contexts like the modal header / cta-banner override to light text. */
.video-soon-note {
  display: block;
  position: relative;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
/* The [hidden] attribute selector's extra specificity is needed to beat
   the unconditional "display: block" above — otherwise an author rule
   always wins over the browser's own [hidden] { display: none }. */
.video-soon-note[hidden] { display: none; }
.role-modal-header .video-soon-note,
.cta-banner .video-soon-note {
  color: rgba(255, 255, 255, .85);
}
.role-modal-summary {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.7;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(32, 24, 16, .1);
}
.role-modal-what {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-top: 20px;
}
.role-modal-list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.role-modal-list li {
  padding-left: 18px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.55;
}
.role-modal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.role-modal-list li strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.role-modal-list li span { color: var(--muted); }
.role-modal-quote {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: var(--ivory-deep);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.6;
}
.role-modal-closing {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--maroon);
}

/* "Click to know more" reveal: the full career-grid + View All button
   stay collapsed until the visitor opts in, keeping the section scannable
   within a few seconds. */
.career-reveal { margin-top: clamp(28px, 5vw, 44px); }
.career-reveal summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--coral);
}
.career-reveal summary::-webkit-details-marker { display: none; }
.career-reveal summary::marker { content: ""; }
.career-reveal summary::after {
  content: "+";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ivory-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease;
}
.career-reveal[open] summary::after { transform: rotate(45deg); }
.career-reveal .career-grid { margin-top: clamp(28px, 5vw, 44px); }

/* Placeholder photo tones for career cards + gallery (no real photos yet) */
.ph-1 { background: linear-gradient(150deg, #EE9A8F, #D9645C); }
.ph-2 { background: linear-gradient(150deg, #D9B26B, #B8863F); }
.ph-3 { background: linear-gradient(150deg, #C98FA0, #8C2333); }
.ph-4 { background: linear-gradient(150deg, #9FB08C, #5F7A4A); }
.ph-5 { background: linear-gradient(150deg, #E2A6C9, #A8508A); }
.ph-6 { background: linear-gradient(150deg, #8FA9C9, #4E6C94); }
.ph-7 { background: linear-gradient(150deg, #D9B96B, #8A6B2E); }
.ph-8 { background: linear-gradient(150deg, #9C4A5C, #5C1A28); }
.ph-9 { background: linear-gradient(150deg, #A8C9B8, #4F7A63); }
.ph-10 { background: linear-gradient(150deg, #E2B68C, #A8683A); }
.ph-11 { background: linear-gradient(150deg, #B8A9D9, #6E5A9E); }
.ph-12 { background: linear-gradient(150deg, #D98F6B, #A8502E); }

/* ===== Founder section ===== */
/* Mobile/tablet: a large photo on the right, vertically centered against
   the name/role text on the left — grid (not float) so the image can be
   both big and truly centered instead of pinned to the top of the text. */
.founder-v2 {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 54%);
  grid-template-areas:
    "head media"
    "copy copy";
  column-gap: 14px;
  row-gap: 26px;
  align-items: center;
}
.founder-v2-head { grid-area: head; }
.founder-v2-copy-wrap { grid-area: copy; }
.founder-v2-media { grid-area: media; }
@media (min-width: 900px) {
  .founder-v2 {
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
      "head media"
      "copy media";
    column-gap: 44px;
    row-gap: 0;
    /* Without a cap this stretches to the section's full padded width on
       wide desktops, leaving a large dead gap between the (intentionally
       readable-width) bio copy and the photo column. */
    max-width: 1180px;
    margin: 0 auto;
  }
  .founder-v2.founder-v2--reverse {
    grid-template-columns: .95fr 1.05fr;
    grid-template-areas:
      "media head"
      "media copy";
  }
}
/* Homepage variant: the badge is now a small stamp overlapping the photo
   itself (see .founder-v2-media .founder-badge below), so "media" is just
   the photo's own column — copy (bio + actions) always stays paired with
   head in the left column, at every width, rather than only from 900px
   like the base rule above. */
.founder-v2--home {
  grid-template-areas: "head media" "copy media";
}
@media (min-width: 900px) {
  /* Without a cap, this section stretches to the section's full padded
     width — on wide desktops the text column (which doesn't grow past
     its own copy/button widths) and the 420px-capped photo end up
     stranded far apart with a huge dead gap between them. Cap and
     center the whole grid instead so both sides sit close together. */
  .founder-v2--home { max-width: 1000px; margin: 0 auto; }
  .founder-v2--home .founder-v2-media { margin-bottom: 0; }
}
.founder-v2-eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 600;
}
/* Homepage variant only — reads as a small standalone statement above
   "Meet Lakshmi Keerthi" rather than a standard section eyebrow label, so
   it's sized up well past the usual 11px eyebrow across the site. */
.founder-v2--home .founder-v2-eyebrow {
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: .06em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}
@media (max-width: 679px) {
  .founder-v2--home .founder-v2-eyebrow { font-size: clamp(13px, 3.8vw, 16px); }
}
.founder-v2-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 42px);
  color: var(--ink);
  margin-top: 14px;
  line-height: 1.15;
}
.founder-v2-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--coral);
  margin-top: 6px;
}
.founder-v2-copy {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 20px;
  max-width: 62ch;
}
.founder-v2-copy + .founder-v2-copy { margin-top: 14px; }
.founder-v2-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ===== Founder badge — maroon/gold "plaque" style, an ornate label under
   the founder intro (name + role + a couple of credential lines), with a
   short bio underneath and the existing Know More button after it. ===== */
/* The scalloped outline is drawn as an SVG shape (three stacked paths —
   solid fill, outer gold stroke, inset gold hairline) rather than a CSS
   border-radius box: a real die-cut/seal silhouette needs a wavy edge
   that border-radius can't produce, and clip-path: path() doesn't rescale
   to the element's actual size (it's fixed to the coordinate values in
   the path string), which would break across the different badge widths
   used per breakpoint. An SVG with preserveAspectRatio="none" behaves
   like a normal responsive image instead — it always stretches to fill
   whatever box its container computes. */
.founder-badge {
  position: relative;
  color: #F1CDA0;
  text-align: center;
}
.founder-badge-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.founder-badge-shape-fill { fill: #5A3D2B; }
.founder-badge-shape-outline {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}
.founder-badge-shape-inline {
  fill: none;
  stroke: rgba(201, 151, 59, .55);
  stroke-width: 1;
}
.founder-badge-content {
  position: relative;
  z-index: 1;
  padding: 14% 12%;
}
/* Warm cream/peach family for the badge's three text lines — the badge
   fill is a dark brown, so text needs to run light to hold contrast.
   A cream-peach (rather than plain white) keeps it in the same warm
   palette as the gold hairline trim. Hierarchy comes from opacity:
   name brightest/boldest, sub slightly softer. */
.founder-badge-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(16px, 3.4vw, 20px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #F1CDA0;
}
.founder-badge-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(10px, 2vw, 12.5px);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: rgba(241, 205, 160, .82);
  white-space: nowrap;
  margin-top: 5px;
}
/* Credential line under the title — bold and sized close to the title
   line now (not a faint afterthought), since "Award Winning Luxury
   Planner" needs to actually be legible, not just present. */
.founder-badge-sub {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(11.5px, 2.3vw, 13.5px);
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(241, 205, 160, .92);
  white-space: normal;
  margin-top: 4px;
}
.founder-v2-media {
  position: relative;
  padding: 6% 8% clamp(16px, 5vw, 64px);
}
@media (min-width: 900px) {
  .founder-v2-media { max-width: 420px; margin: 0 auto; }
}
/* Badge sits below the photo (homepage variant), in normal flow — but
   pulled up so it rides higher on the photo, closer to her hand on the
   laptop, and sized down so it reads as a small accent rather than a
   second block anywhere near the width of the photo. */
.founder-v2-media .founder-badge {
  width: 72%;
  margin: -46px auto 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 899px) {
  .founder-v2-name { font-size: clamp(22px, 6.4vw, 28px); margin-top: 8px; }
  .founder-v2-role { font-size: 16px; margin-top: 4px; }
  .founder-v2-eyebrow { font-size: 9.5px; letter-spacing: .16em; }
  .founder-v2-copy { margin-top: 0; }
  .founder-v2-copy-wrap .founder-v2-copy:first-child { margin-top: 0; }
}
/* Phones: photo and name/role sit side by side (not stacked). Giving the
   text column the larger share (vs. the old ~46/54 split) and trimming
   its type sizes keeps "Meet Lakshmi Keerthi" to a clean 2-line break
   instead of the ragged 1-word-per-line wrap the narrower column caused. */
@media (max-width: 679px) {
  .founder-v2 {
    grid-template-columns: 1.3fr 1fr;
    column-gap: 16px;
    row-gap: 20px;
    align-items: center;
  }
  .founder-v2-media {
    padding: 4% 6% 12px;
  }
  .founder-v2-name { font-size: clamp(19px, 5.6vw, 23px); line-height: 1.18; margin-top: 6px; }
  .founder-v2-role { font-size: 15px; }
  .founder-v2-eyebrow { font-size: 9px; letter-spacing: .14em; }
  /* `.founder-v2-media .founder-v2-blob` (extra qualifier) beats the base
     `.founder-v2-blob` rule declared later in this file at equal
     specificity otherwise. */
  .founder-v2-media .founder-v2-blob { inset: -8% -6% 4%; }
}
/* Homepage variant: the badge overlaps the photo rather than sitting
   below it, so the media column needs meaningfully more room than the
   plain-photo share the base rule above gives it — the badge has to hold
   "Lakshmi Keerthi" + "Founder" + a subtitle line legibly, which a photo
   this narrow otherwise can't accommodate. Widen media at the expense of
   the head column, and size the badge itself down for this breakpoint so
   it reads as a corner stamp rather than covering the whole photo. */
@media (max-width: 679px) {
  .founder-v2--home {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr);
  }
  .founder-v2--home .founder-v2-media { padding: 4% 4% 12px; }
  .founder-v2--home .founder-badge {
    width: clamp(140px, 48%, 180px);
    margin: -28px auto 0;
  }
  .founder-v2--home .founder-badge-name { font-size: clamp(12.5px, 3.6vw, 15.5px); }
  .founder-v2--home .founder-badge-title { font-size: 9px; letter-spacing: .16em; }
  .founder-v2--home .founder-badge-sub { font-size: clamp(9.5px, 3vw, 11px); letter-spacing: .02em; margin-top: 3px; }
  .founder-v2--home .founder-badge-content { padding: 12% 10%; }
}
.founder-v2-blob {
  position: absolute;
  inset: -14% -20% 2%;
  z-index: 0;
  border-radius: 46% 54% 42% 58% / 56% 46% 54% 44%;
  background: radial-gradient(60% 58% at 48% 36%, rgba(238, 127, 120, .4), rgba(238, 127, 120, .15) 58%, transparent 78%);
  filter: blur(8px);
}
.founder-v2-frame {
  position: relative;
  z-index: 1;
}
.founder-v2-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.founder-v2-sprig {
  position: absolute;
  z-index: 2;
  left: -6%;
  bottom: 10%;
  width: 30%;
  max-width: 96px;
  color: var(--gold);
  opacity: .85;
  pointer-events: none;
}
.founder-v2-sprig svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  .founder-v2-media { margin-bottom: -56px; }
}

/* Softens the hand-off from the hero's ivory background into the coral
   Career Path card right below it — a wide, faint coral radial glow
   bleeds upward into the hero's bottom whitespace so the card's color
   feels like it eases in rather than starting abruptly at a hard edge. */
.section--blend-top { position: relative; }
.section--blend-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  height: 200px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(226, 101, 93, .16), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

/* ===== CTA banner ===== */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background:
    linear-gradient(100deg, rgba(226, 101, 93, .94) 35%, rgba(226, 101, 93, .55) 100%),
    url("../assets/images/hero-mandap.jpg") center / cover;
  margin: 0 var(--side-pad);
  padding: clamp(36px, 6vw, 54px) clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--white);
}
@media (min-width: 760px) {
  .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cta-banner-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.2;
}
.cta-banner-sub { font-size: 15.5px; margin-top: 8px; color: rgba(255, 255, 255, .9); }
.cta-banner-desc {
  font-size: 15.5px;
  line-height: 1.7;
  margin-top: 14px;
  max-width: 46ch;
  color: rgba(255, 255, 255, .88);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* Phones: the card is narrower than a couple of these buttons' own
   nowrap text needs (e.g. "Take the Self-Assessment" wants ~250px on a
   ~220px-wide card), which was pushing them past the card's edge instead
   of sitting flush inside it — stack full-width and let the text wrap
   instead of forcing a single line. */
@media (max-width: 679px) {
  .cta-banner-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-banner-actions .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}
/* Career Path section, restyled as a banner "tab" like the
   self-assessment CTA below it — heading, then every role as an inline
   pill (no more show-2/expand-to-see-all split), then a Watch Video
   action, all stacked instead of the base banner's title-left/actions-
   right split (there's a third block here, the roles row, so the
   two-column layout doesn't apply). */
.cta-banner--career {
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
}
@media (min-width: 760px) {
  .cta-banner--career { flex-direction: column; }
}
.cta-banner-head { text-align: center; }
.cta-banner--career .cta-banner-sub { margin-top: 10px; }
/* Frosted-glass secondary CTA for colored/photo backgrounds (cta-banner,
   hero) — used for "Watch Video" next to a solid .btn--white primary. */
.btn--ghost-light {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .6);
  color: var(--white);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: rgba(255, 255, 255, .28); }

/* ===== Footer restyle (multi-column) ===== */
.site-footer { background: var(--ivory); position: relative; overflow: hidden; }
.footer-brand img { width: 56px; }
.footer-brand .wordmark-main { color: var(--maroon); }
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col {
  /* Grid items default to a content-based min-width, so a long unbroken
     token (the contact email) would otherwise force this column wider
     than its track and blow out the grid horizontally on phones. */
  min-width: 0;
}
.footer-col h4 {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 600;
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li { font-size: 15px; color: var(--muted); overflow-wrap: break-word; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--coral); }
.footer-col-contact li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.footer-col-contact svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }
.footer-enquire p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social svg { width: 14px; height: 14px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ===== About page banner: logo stacked above the title ===== */
.page-banner-logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 20px);
  margin-bottom: 14px;
}
.page-banner-logo {
  width: clamp(110px, 14vw, 156px);
  height: auto;
  flex: none;
  background: var(--ivory-deep);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(32, 24, 16, .14);
}
.page-banner-logo-row .page-banner-title { margin: 0; }

/* ===== Fact grid (label/value pairs, e.g. program quick facts) ===== */
.fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: clamp(36px, 6vw, 52px);
}
@media (min-width: 640px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fact-grid { grid-template-columns: repeat(5, 1fr); } }
.fact-item h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 8px;
}
.fact-item p {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}

/* ===== Brand logo row (founder's prior ventures) ===== */
.founder-iiwm-mark {
  display: flex;
  justify-content: center;
  margin: clamp(24px, 5vw, 36px) 0;
}
.founder-iiwm-mark img {
  width: clamp(180px, 30vw, 260px);
  height: auto;
}

/* Logos are pre-cropped to transparent PNGs, so they float directly on
   the page background — no card, no seam. */
.brand-logos-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  margin-top: clamp(24px, 5vw, 36px);
}
.brand-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  transition: transform .25s ease;
}
.brand-logo-card:hover {
  transform: translateY(-3px);
}
.brand-logo-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 200px;
}

/* ===== Founder fact rows (icon + credential, left-aligned like the
   source bio poster) ===== */
.founder-facts { margin-top: 0; }
.founder-facts + .founder-v2-copy,
.founder-facts + .founder-facts { margin-top: 20px; }
.founder-fact-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}
.founder-fact-row + .founder-fact-row { margin-top: 16px; }
.founder-fact-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ivory-deep);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder-fact-icon svg { width: 19px; height: 19px; }
.founder-fact-row p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.founder-fact-row p strong { color: var(--maroon); font-weight: 800; }

/* ===== Generic content sections (inner pages) ===== */
/* Fills the full width of its section — no fixed cap, so there's no
   dead margin on wide screens and no block that stops or starts
   partway across the row. */
.content-block { width: 100%; }
.content-block.center { text-align: center; }
.content-block h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  color: var(--ink);
  line-height: 1.18;
}
.content-block h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 26px);
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.content-block p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 16px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: clamp(36px, 6vw, 52px);
}
@media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.pillar-card {
  background: var(--white);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
}
.pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ivory-deep);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.pillar-icon svg { width: 20px; height: 20px; }
.pillar-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.pillar-card p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-top: 8px; }

/* ===== Who Can Apply — audience grid ("if you see yourself in even ONE
   of these") — same card language as .pillar-card, one card per persona
   with an emoji instead of an icon and a short elaboration line. ===== */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 48px);
}
@media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }
.audience-card {
  background: var(--white);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.audience-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ivory-deep);
  font-size: 26px;
  margin-bottom: 16px;
}
.audience-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--maroon); }
.audience-card p { font-size: 15px; color: var(--muted); line-height: 1.65; margin-top: 8px; }

.list-check { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); line-height: 1.5; }
.list-check svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--coral); }

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

.timeline-v2 { display: flex; flex-direction: column; gap: 0; }
.timeline-v2-item {
  position: relative;
  padding: 0 0 28px 28px;
  border-left: 1px solid rgba(124, 24, 48, .15);
}
.timeline-v2-item:last-child { border-left-color: transparent; }
.timeline-v2-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}
.timeline-v2-item h4 { font-family: var(--font-serif); font-size: 17px; color: var(--ink); font-weight: 600; }
.timeline-v2-item p { font-size: 15px; color: var(--muted); margin-top: 4px; line-height: 1.55; }

/* Curriculum page: bigger, bolder intro heading and week titles so the
   module-by-module build reads as the page's main event. */
#curriculum .content-block h2 { font-weight: 700; font-size: clamp(32px, 4.4vw, 50px); }
#curriculum .timeline-v2-item h4 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 800; color: var(--maroon); }

/* ===== Homepage "How to Apply" — two steps (send resume / counselling),
   maroon icon-circles joined by a dotted connector, mirroring the
   institute's print poster in the site's own component language. ===== */
.apply-steps {
  max-width: 560px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
}
.apply-steps-item {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 36px;
}
.apply-steps-item:last-child { padding-bottom: 0; }
.apply-steps-icon {
  flex: none;
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px -8px rgba(140, 35, 51, .5);
}
.apply-steps-icon svg { width: 22px; height: 22px; }
/* Dotted connector between the two circles — drawn on the first item only
   so it never trails past the last step. */
.apply-steps-item:not(:last-child) .apply-steps-icon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 36px;
  margin-top: 6px;
  border-left: 2px dotted rgba(140, 35, 51, .35);
}
.apply-steps-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-dark);
}
.apply-steps-body h4 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}
.apply-steps-body p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 6px;
}
.apply-steps-email {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--maroon);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .18s ease;
}
.apply-steps-email:hover,
.apply-steps-email:focus-visible { background: var(--coral-dark); }

/* ===== Gallery ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(43,33,24,.65), transparent);
  color: var(--white);
  font-size: 14.5px;
  letter-spacing: .04em;
}

/* ===== Blog ===== */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.blog-card-body { padding: 26px 22px; }
.blog-card-date { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.blog-card h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 8px; line-height: 1.3; }
.blog-card p { font-size: 15px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.blog-card-link { margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--coral); display: inline-flex; align-items: center; gap: 6px; }

.blog-post-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  background: rgba(32, 24, 16, .5);
}
.blog-post-overlay[hidden] { display: none; }
.blog-post-modal {
  width: 100%;
  max-width: 840px;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
}
.blog-post-close {
  float: right;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  padding: 4px 8px;
}
.blog-post-modal-date { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.blog-post-modal h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 4vw, 32px); color: var(--ink); margin-top: 10px; line-height: 1.25; }
.blog-post-modal-body { font-size: 16.5px; color: var(--muted); line-height: 1.8; margin-top: 22px; white-space: pre-wrap; }
.blog-post-links, .blog-post-related {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(32, 24, 16, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.blog-post-links-label {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 2px;
}
.blog-post-links a, .blog-post-related-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.contact-info-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ivory-deep);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-icon svg { width: 19px; height: 19px; }
.contact-info-item h4 { font-size: 16px; color: var(--ink); font-weight: 600; }
.contact-info-item p, .contact-info-item a { font-size: 15.5px; color: var(--muted); line-height: 1.6; }

.form-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.form-field input,
.form-field textarea {
  font: inherit;
  font-size: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(124, 24, 48, .15);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
}
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: #B3261E; }
.form-field-error { display: block; min-height: 16px; font-size: 14px; color: #B3261E; margin-top: -12px; margin-bottom: 4px; }
.form-success-msg {
  text-align: center;
  padding: 32px 20px;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
}
.form-success-msg strong { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.form-error-msg { font-size: 14.5px; color: #B3261E; text-align: center; margin-top: 12px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4vw, 36px);
}

/* ===== Downloadable resources (brochure / posters / FAQs) ===== */
.resource-list { display: flex; flex-direction: column; gap: 14px; }
.resource-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow-soft);
}
.resource-item-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ivory-deep);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-item-icon svg { width: 19px; height: 19px; }
.resource-item-body { flex: 1; min-width: 0; }
.resource-item-body h4 { font-size: 16px; color: var(--ink); font-weight: 600; }
.resource-item-body p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.resource-item .btn { flex: none; }
@media (max-width: 480px) {
  .resource-item { flex-wrap: wrap; }
  .resource-item .btn { width: 100%; }
}

/* ===== FAQ accordion ===== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 44px;
}
.faq-item {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 0 22px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ivory-deep);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 20px; }
.faq-answer p { font-size: 16px; color: var(--muted); line-height: 1.7; }
.faq-answer p + p,
.faq-answer p + ul,
.faq-answer p + ol { margin-top: 10px; }
.faq-answer ul { list-style: none; padding-left: 4px; margin-top: 10px; }
.faq-answer ul li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 6px;
}
.faq-answer ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.faq-answer ol {
  padding-left: 20px;
  margin-top: 10px;
}
.faq-answer ol li {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 6px;
  padding-left: 4px;
}

/* ===== Admissions & fee structure ===== */
.fee-cards { display: flex; flex-direction: column; gap: 20px; }
.fee-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-soft);
}
.fee-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory-deep);
  color: var(--maroon);
  margin-bottom: 16px;
}
.fee-card-icon svg { width: 24px; height: 24px; }
.fee-card-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.fee-card-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--ink);
  margin-top: 10px;
}
.fee-card-price .unit {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}
.fee-card-note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.6;
}
.fee-card .list-check { margin-top: 14px; gap: 10px; }
.fee-card .list-check li { font-size: 15px; }

/* Reuses .apply-steps' circle + dotted-connector layout, with a plain
   number in the circle instead of an icon, for the 5-step selection
   process — same visual language as the How to Apply page's steps. */
.apply-steps-icon--num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 5vw, 56px);
}
.badge-row-item { display: flex; align-items: center; gap: 12px; }
.badge-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(184, 134, 63, .4);
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-row-icon svg { width: 20px; height: 20px; }
.badge-row-item span {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ===== Curriculum modules ===== */
.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) { .module-grid { grid-template-columns: 1fr 1fr; } }
.module-card--wide { grid-column: 1 / -1; }
.module-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 30px);
  box-shadow: var(--shadow-soft);
}
.module-card-label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
}
.module-card h3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 6px;
}
.module-topic-list { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.module-topic-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
}
.module-topic-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}