/* =========================================================================
   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
   careerprofiler.html, so quiz.css and careerprofiler.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: #76675A;

  --coral: #936B32;
  --coral-dark: #7C5D2C;
  --coral-soft: #E7CE9C;
  --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(--ink);
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(21px, 2.8vw, 26px);
}

/* ===== 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: 13.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 { height: 2px; }
.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;
  /* Must clear the fixed .mobile-apply-bar (~78px) plus the WhatsApp
     float button that also sits in that corner, or the last nav item
     (Apply Now) ends up unreachable. */
  padding-bottom: 130px;
}
.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. */
/* Subtle — just the arrow, no circular backdrop. Width/height stay as a
   comfortable invisible tap target. */
.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;
  color: rgba(255, 255, 255, .75);
  transition: color .18s ease, transform .18s ease;
}
.page-back-btn:hover,
.page-back-btn:focus-visible {
  color: var(--white);
  transform: translateX(-2px);
}
.page-back-btn svg { width: 20px; height: 20px; }
.page-banner-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.page-banner-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.08;
  margin-top: 14px;
}
.page-banner-desc {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.page-banner-desc strong {
  color: #fff;
}
.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(76px, 19vw, 94px);
    margin: 0;
    z-index: 6;
  }
  /* Smaller badge on mobile needs a lot less breathing room than the
     desktop sizing, so trim the ribbon's own inner padding/type too. */
  .launch-banner-content { padding: 7px 6px 13px; }
  .launch-banner-eyebrow { font-size: 9px; letter-spacing: .1em; }
  .launch-banner-date { font-size: 11px; margin-top: 2px; }
}
.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: 11.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: 50% 32%; }
  /* 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;
    /* Clears the smaller, absolutely-positioned launch-banner ribbon
       pinned to the top-left corner (top:10px, ~70-85px tall now) so it
       never overlaps the headline text below it. */
    padding: clamp(84px, 21vw, 100px) 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: 700;
  font-size: clamp(24px, 7vw, 32px);
  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; darkened from #C9973B to clear
     WCAG large-text contrast (3:1) against the ivory hero background */
  color: #AA8032;
}
.hero-title-script {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 10vw, 52px);
  line-height: 1.05;
  color: var(--ink);
  margin-top: 2px;
}
.hero-title-main {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(20px, 6.2vw, 30px);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.24;
  color: var(--ink);
  margin-top: 10px;
}
.hero-fade-tagline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(12px, 3.6vw, 15px);
  letter-spacing: .1em;
  color: var(--ink);
  margin: 0 0 22px;
  white-space: nowrap;
}
/* 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: 11px;
  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; }
}
/* Desktop: the ~50vw text column is too narrow for the full-size pills to
   share a row — slim them so all three stay on one line at every desktop
   width, not just the mid-width band. */
@media (min-width: 680px) {
  .hero-fade-actions { gap: 10px; flex-wrap: nowrap; }
  .hero-fade-actions .btn {
    padding: 12px 18px;
    font-size: 12.5px;
  }
}

.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);
  }
  /* A compact pill rather than the full-size .btn scale, to match the
     rest of this tight stats block. */
  .hero-fade-stats-cta .btn {
    width: auto;
    padding: 10px 18px;
    font-size: 12.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: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}
.hero-fade-stats-text strong {
  font-weight: 700;
  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-style: italic;
  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: 13px;
  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(--ink); font-weight: 700; }
.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); } }

/* ===== Inner Circle mentor cards ===== */
.inner-circle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
  max-width: 900px;
  margin: clamp(28px, 5vw, 44px) auto 0;
}
.inner-circle-card {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(184, 134, 63, .25);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease;
}
.inner-circle-card:hover, .inner-circle-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 30px 56px -20px rgba(124, 24, 48, .28);
}
.inner-circle-card-media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  padding: 10px 10px 0;
}
.inner-circle-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  border-radius: 14px;
}
.inner-circle-card-body { padding: 20px 18px 26px; }
.inner-circle-card-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
.inner-circle-card-role {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}

.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. */
/* Cards in a responsive grid instead of a plain underlined-text list —
   reads much better against the banner's photo background. */
.career-preview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 880px;
  /* This grid is itself a flex item of .cta-banner — without an
     explicit width, the browser can't resolve auto-fit's available
     space against the flex-item size and instead fits as many 150px
     tracks as minmax's cap allows, blowing out past the banner's
     actual (much narrower) width. width:100% + min-width:0 forces it
     to size against its real flex-resolved width first. */
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}
.career-preview-item {
  /* Grid items default to min-width:auto, which lets an item's
     unbreakable text (e.g. "Destination Wedding Specialist") force its
     track wider than the container — min-width:0 lets it shrink and
     wrap normally instead of overflowing past the banner's edge. */
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 14px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.career-preview-item:hover,
.career-preview-item:focus-visible {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-2px);
}
/* 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: 13px;
  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-style: italic;
  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: 13.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: 13px;
  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: 700;
  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: 700;
  font-size: 16px;
  color: var(--ink);
}

/* "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"
    "intro media"
    "copy copy";
  column-gap: 14px;
  row-gap: 26px;
  align-items: center;
}
.founder-v2-head { grid-area: head; }
.founder-v2-intro { grid-area: intro; }
.founder-v2-copy-wrap { grid-area: copy; }
.founder-v2-media { grid-area: media; }
@media (min-width: 900px) {
  /* `copy` (the long bio) spans the full width below — NOT paired
     alongside `media` in its own column. An earlier version had media
     span both the head and copy rows so the photo ran down the side of
     the whole bio, but align-items:center then centered the (much
     shorter) photo across that huge combined height, stranding it far
     down the page under a massive empty gap. Keeping media to just the
     head+intro rows — same shape as the mobile/tablet layout below —
     avoids the problem entirely instead of fighting it. */
  .founder-v2 {
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
      "head media"
      "intro media"
      "copy copy";
    column-gap: 44px;
    row-gap: 26px;
    /* 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"
      "copy 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: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
/* 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-style: italic;
  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: none;
}
.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: 11.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: 1fr 1.05fr;
    /* Intro paragraph drops to its own full-width row here instead of
       stacking under the name/role/button (as it does from 680px up).
       In that narrower two-up arrangement the paragraph wraps to many
       more lines than the photo is tall, so keeping it paired with
       media would leave a dead gap on one side or the other no matter
       how the row is aligned — full-width avoids the mismatch entirely. */
    grid-template-areas:
      "head media"
      "intro intro"
      "copy copy";
    column-gap: 14px;
    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: 11px; 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: 11px; 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(184, 134, 63, .4), rgba(184, 134, 63, .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;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .founder-v2-media { margin-bottom: -56px; }
}

/* Softens the hand-off from the hero's ivory background into the gold
   Career Path card right below it — a wide, faint gold 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(184, 134, 63, .16), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

/* ===== CTA banner ===== */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  /* Softer, lower-opacity wash than the old near-opaque tint — lets the
     photo actually read through instead of flattening into a muddy
     brown block, while a touch of dark still anchors text contrast. */
  background:
    linear-gradient(100deg, rgba(32, 24, 16, .38) 0%, rgba(32, 24, 16, .12) 100%),
    linear-gradient(100deg, rgba(199, 151, 79, .58) 30%, rgba(156, 117, 56, .3) 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-style: italic;
  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-title {
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  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); }
/* The email address is one long unbroken token — without this, it just
   overflows past its column (and into the next one) at widths where the
   column is narrower than the address itself, rather than wrapping. */
.footer-col-contact li span,
.footer-col-contact li a { min-width: 0; overflow-wrap: anywhere; }
.footer-enquire p:not(.footer-col-title) { 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; }
.page-banner-logo-wrap { position: relative; display: inline-block; line-height: 0; }
.page-banner-logo-wrap .tm-mark { font-size: 16px; color: var(--maroon); }

/* ===== 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: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  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-style: italic;
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  color: var(--ink);
  line-height: 1.16;
}
.content-block h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--ink);
  line-height: 1.2;
  margin-top: clamp(32px, 5vw, 44px);
  margin-bottom: 4px;
}
/* :not(.eyebrow) — otherwise this beats the plain .eyebrow class on
   specificity (class+type > class alone) and silently overrides its
   color back to muted wherever an eyebrow label sits inside a
   .content-block, which is most of the site. */
.content-block p:not(.eyebrow) {
  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-style: italic; 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-style: italic; font-size: 18px; font-weight: 700; color: var(--ink); }
.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: 800; font-size: clamp(32px, 4.4vw, 50px); }
#curriculum .timeline-v2-item h4 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 800; color: var(--ink); }

/* ===== 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: 13px;
  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: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.blog-card h3 { font-family: var(--font-serif); font-style: italic; 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: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.blog-post-modal h2 { font-family: var(--font-serif); font-style: italic; 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: 13px;
  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: 700; color: var(--ink); 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);
}