/* ==========================================================================
   Founders of Pakistan — Forging The Future
   Core stylesheet (hand-written, framework-free)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* ======================================================================
     1a. SINGLE SOURCE OF TRUTH — change the brand here and nowhere else.
     ----------------------------------------------------------------------
     --primary-color is the Maroon / Burgundy brand colour. Every maroon on
     the site (buttons, active links, header, accents, dark bands, blush
     backgrounds, hover states, image overlays) is derived from this one
     value, so nudging it lighter or darker for the client is a one-line
     edit here — nothing else needs touching.

       lighter for the client  ->  #8e2b4c
       current (balanced)      ->  #7a1f3d
       darker for the client   ->  #661832

     HOW THE DERIVED TOKENS WORK
     The ramp below is listed twice on purpose. This block holds static hex
     values so the site still renders on an old browser; the @supports block
     straight after re-declares the same tokens with color-mix() so they
     actually track --primary-color. Custom properties never "fall back" to
     an earlier declaration on their own, which is why the modern versions
     are feature-gated rather than simply listed second.

     If you change --primary-color and your browser supports color-mix
     (Chrome 111+, Safari 16.2+, Firefox 113+) you are done. Only if you
     also need pixel-perfect legacy support should you refresh the static
     hexes below to match.
     ====================================================================== */
  --primary-color: #7a1f3d;
  --secondary-color: #c7a578; /* champagne gold — accents, rules, outlines */

  /* ----------------------------------------------------------------------
     1b. Maroon ramp — static fallbacks (derived in the @supports block)
     ---------------------------------------------------------------------- */
  --primary-dark: #5f1830; /* button hover, pressed states */
  --primary-deep: #380e1c; /* near-black burgundy: dark bands, footer */
  --primary-deepest: #250912; /* footer base bar, deepest surface */
  --primary-light: #8f435c; /* gradient top end, soft hovers */
  --primary-pale: #e7d7dc; /* copy on maroon backgrounds, soft dividers */
  --primary-line: #e4d2d8; /* 1px borders on blush surfaces */
  --primary-tint: #f6eff1; /* blush section background */
  --primary-soft: rgba(122, 31, 61, 0.14); /* translucent wash, focus ring */
  --primary-veil: rgba(122, 31, 61, 0.55); /* image hover overlay */

  /* ----------------------------------------------------------------------
     1c. Gold ramp — static fallbacks (derived in the @supports block)
     ---------------------------------------------------------------------- */
  --secondary-dark: #af916a;
  --secondary-ink: #7b664a; /* gold that still reads as text on white (~5:1) */
  --secondary-light: #e0ceb5;
  --secondary-tint: #f6f1e9;
  --secondary-soft: rgba(199, 165, 120, 0.15);

  /* ----------------------------------------------------------------------
     1d. Neutrals — warm greys tuned to the ivory paper. Deliberately NOT
     derived from the brand, so a brand tweak never muddies body copy.
     ---------------------------------------------------------------------- */
  --bg-color: #fffdf9; /* page background (warm ivory) */
  --bg-alt: #f7f3ee; /* alternating band (warm sand) */
  --bg-surface: #ffffff; /* cards, panels, inputs */
  --bg-dark: #24161d; /* dark band behind light type */

  --bg-muted: #f1ece8; /* inert fill: disabled buttons, quote blocks */

  --text-color: #302329; /* headings */
  --text-body: #655a5e; /* paragraphs */
  --text-muted: #8a7e82; /* captions, meta, placeholders */

  /* four steps of copy on maroon / dark bands, brightest first */
  --text-on-dark: #f3ece9;
  --text-on-dark-2: #cbc0c4;
  --text-on-dark-3: #b3a7ab;
  --text-on-dark-4: #8d8389;

  --border-color: #e8ded9;
  --border-soft: #f0e9e4;
  --dark-line: #3a2c32; /* hairlines drawn on dark surfaces */

  --control-idle: #d9d2cd; /* carousel dot, inactive track */
  --control-mid: #9a8e92; /* active dot, disabled label */

  /* ----------------------------------------------------------------------
     1d-2. Status & third-party brand colours. Outside the theme on purpose:
     an error must stay red and WhatsApp must stay WhatsApp green whatever
     the client picks for --primary-color.
     ---------------------------------------------------------------------- */
  /* scrims sit under white type on photographs — near-black on purpose, so
     they stay legible no matter which maroon the client settles on */
  --scrim-strong: rgba(37, 20, 30, 0.95);
  --scrim: rgba(39, 21, 30, 0.91);
  --scrim-soft: rgba(37, 20, 30, 0.86);
  --scrim-backdrop: rgba(20, 11, 19, 0.9);

  --status-error: #e02b2b;
  --status-success: #226e35;
  --status-success-bg: #eef8f0;
  --status-success-line: #bfe3c7;
  --brand-whatsapp: #25d366;

  /* ----------------------------------------------------------------------
     1e. Legacy aliases. The other 39 pages were written against these names
     before the rebrand; pointing them at the new tokens rebrands the whole
     site from the block above instead of 40 separate edits. New CSS should
     use the semantic names above, not these.
     ---------------------------------------------------------------------- */
  --maroon: var(--primary-color);
  --maroon-dark: var(--primary-dark);
  --maroon-light: var(--primary-light);
  --gold: var(--secondary-color);
  --gold-dark: var(--secondary-dark);
  --gold-soft: var(--secondary-soft);
  --tan: var(--secondary-dark);

  --ink: var(--text-color);
  --ink-soft: var(--text-color);
  --body: var(--text-body);
  --muted: var(--text-muted);
  --line: var(--border-color);
  --surface: var(--bg-surface);
  --surface-alt: var(--bg-alt);
  --surface-dark: var(--primary-deep);
  --surface-dark-2: var(--bg-dark);

  /* ----------------------------------------------------------------------
     1f. Typography
     ---------------------------------------------------------------------- */
  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-nav: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", "Segoe UI", Arial, sans-serif;
  --font-alt: "Lato", "Segoe UI", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif; /* the italic accents */

  /* ----------------------------------------------------------------------
     1g. Metrics
     ---------------------------------------------------------------------- */
  --container: 1140px;
  --radius: 12px;
  --radius-lg: 24px;
  --radius-pill: 40px;
  --shadow-sm: 0 4px 15px rgba(36, 22, 29, 0.06);
  --shadow-md: 0 10px 30px rgba(36, 22, 29, 0.1);
  --shadow-lg: 0 18px 45px rgba(36, 22, 29, 0.14);
  --shadow-gold: 0 4px 15px rgba(199, 165, 120, 0.45);
  --shadow-gold-hover: 0 0 20px rgba(199, 165, 120, 0.65);
  --header-h: 92px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------------------------
   1h. Derived ramps. Everything below is computed from --primary-color and
   --secondary-color, which is what makes the brand a one-line change.
   -------------------------------------------------------------------------- */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --primary-dark: color-mix(in srgb, var(--primary-color) 78%, #000);
    --primary-deep: color-mix(in srgb, var(--primary-color) 46%, #000);
    --primary-deepest: color-mix(in srgb, var(--primary-color) 30%, #000);
    --primary-light: color-mix(in srgb, var(--primary-color) 84%, #fff);
    --primary-pale: color-mix(in srgb, var(--primary-color) 18%, #fff);
    --primary-line: color-mix(in srgb, var(--primary-color) 20%, #fff);
    --primary-tint: color-mix(in srgb, var(--primary-color) 7%, #fff);
    --primary-soft: color-mix(in srgb, var(--primary-color) 14%, transparent);
    --primary-veil: color-mix(in srgb, var(--primary-color) 55%, transparent);

    --secondary-dark: color-mix(in srgb, var(--secondary-color) 88%, #000);
    --secondary-ink: color-mix(in srgb, var(--secondary-color) 62%, #000);
    --secondary-light: color-mix(in srgb, var(--secondary-color) 55%, #fff);
    --secondary-tint: color-mix(in srgb, var(--secondary-color) 16%, #fff);
    --secondary-soft: color-mix(in srgb, var(--secondary-color) 15%, transparent);

    --shadow-gold: 0 4px 15px
      color-mix(in srgb, var(--secondary-color) 45%, transparent);
    --shadow-gold-hover: 0 0 20px
      color-mix(in srgb, var(--secondary-color) 65%, transparent);
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg-color);
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 48px; }
h2 { font-size: 38px; }
h3 { font-size: 26px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--maroon);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
a:hover { color: var(--secondary-ink); }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul, ol { margin: 0 0 18px; padding-left: 20px; }
li { margin-bottom: 8px; }

figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

strong, b { font-weight: 700; color: var(--ink); }

::selection { background: var(--gold); color: #fff; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--maroon);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.container--wide { max-width: 1320px; }
.container--narrow { max-width: 900px; }

.section { padding: 90px 0; }
.section--tight { padding: 60px 0; }
.section--alt { background: var(--surface-alt); }
.section--blush { background: var(--primary-tint); }

/* full-width white→gold wash used as a section background */
.section--wash {
  position: relative;
  background: #ffffff;
}
.section--wash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--gold) 100%);
  opacity: 0.5;
  pointer-events: none;
}
.section--wash > .container { position: relative; z-index: 2; }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark-2); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-0 { margin-bottom: 0; }
.mt-40 { margin-top: 40px; }

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-head {
  max-width: 780px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-head p {
  font-family: var(--font-nav);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-body);
}

/* section heading — Montserrat 500 32px, brand maroon */
.section-title,
.hero-split--maroon h1 { font-family: var(--font-head); }

.section-title {
  position: relative;
  font-size: 32px;
  font-weight: 500;
  color: var(--maroon);
  margin-bottom: 18px;
}

.section-title--rule::after {
  content: "";
  display: block;
  width: 78px;
  height: 3px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
  border-radius: 3px;
}

.section-head--left { margin-left: 0; text-align: left; }
.section-head--left .section-title--rule::after { margin-inline: 0; }

.gold { color: var(--gold); }
.maroon { color: var(--maroon); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-alt);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  padding: 16px 34px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s var(--ease);
}

.btn-primary {
  background: var(--maroon);
  color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--maroon-dark);
  color: #fff;
  box-shadow: var(--shadow-gold-hover);
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  background: var(--gold-dark);
  color: #fff;
  box-shadow: var(--shadow-gold-hover);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  border-color: var(--maroon);
  color: var(--maroon);
}
.btn-outline-dark:hover {
  background: var(--maroon);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--maroon);
}
.btn-white:hover { background: var(--gold); color: var(--ink); }

.btn-sm { padding: 12px 24px; font-size: 14px; }
.btn-lg { padding: 18px 44px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }

.btn-disabled,
.btn[disabled] {
  background: var(--bg-muted);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }

/* -- top strip -- */
.topbar {
  background: #fff;
  border-bottom: 2px solid var(--gold);
  font-family: var(--font-body);
  font-size: 14px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
}
.topbar__contact {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__contact li { margin: 0; }
.topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 500;
}
.topbar__contact a:hover { color: var(--maroon); }
.topbar__contact svg { width: 15px; height: 15px; fill: var(--maroon); flex: none; }

.topbar__social {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__social li { margin: 0; }
.topbar__social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--maroon);
  transition: all 0.3s var(--ease);
}
.topbar__social a:hover { background: var(--gold); transform: translateY(-2px); }
.topbar__social svg { width: 14px; height: 14px; fill: #fff; }

/* -- main navigation bar -- */
.navbar { background: #fff; }
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img {
  height: 66px;
  width: auto;
  object-fit: contain;
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list > li { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 12px 12px;
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--gold); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__item.is-active > .nav__link { color: var(--maroon); }
.nav__item.is-active > .nav__link::after { transform: scaleX(1); background: var(--maroon); }

.nav__caret {
  width: 9px;
  height: 9px;
  fill: currentColor;
  transition: transform 0.3s var(--ease);
}

/* dropdown */
.nav__submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: #fff;
  border-radius: 30px;
  box-shadow: var(--shadow-md);
  padding: 10px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.28s var(--ease);
  overflow: hidden;
  z-index: 20;
}
.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item--has-children:hover > .nav__link .nav__caret { transform: rotate(180deg); }

.nav__submenu li { margin: 0; }
.nav__submenu a {
  display: block;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__submenu a:hover { background: var(--maroon); color: #fff; }
.nav__submenu li:first-child a { border-radius: 30px 30px 0 0; }
.nav__submenu li:last-child a { border-radius: 0 0 30px 30px; }

.nav-cta { flex: none; }

/* hamburger */
.hamburger {
  display: none;
  width: 46px;
  height: 46px;
  border: 2px solid var(--maroon);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex: none;
}
.hamburger span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  background: var(--maroon);
  transition: all 0.3s var(--ease);
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(370px, 88vw);
  background: #fff;
  z-index: 900;
  transform: translateX(105%);
  transition: transform 0.38s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 2px solid var(--gold);
}
.mobile-nav__head img { height: 52px; width: auto; }

.mobile-nav__close {
  width: 40px; height: 40px;
  border: 0; background: transparent;
  font-size: 30px; line-height: 1;
  color: var(--maroon); cursor: pointer;
}

.mobile-nav__body { overflow-y: auto; padding: 10px 0 30px; flex: 1; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-nav__list a,
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 24px;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.mobile-nav__toggle svg { width: 12px; height: 12px; fill: var(--maroon); transition: transform 0.3s var(--ease); }
.mobile-nav__toggle.is-open svg { transform: rotate(180deg); }

.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--surface-alt);
  transition: max-height 0.35s var(--ease);
}
.mobile-nav__sub li { border-bottom: 1px solid var(--border-soft); }
.mobile-nav__sub li:last-child { border-bottom: 0; }
.mobile-nav__sub a {
  padding: 13px 24px 13px 40px;
  font-size: 14px;
  text-transform: none;
  font-family: var(--font-body);
}

.mobile-nav__foot { padding: 20px 24px 28px; border-top: 1px solid var(--line); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s var(--ease);
  z-index: 850;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   7. Hero / page banners
   -------------------------------------------------------------------------- */
/* -- light split hero (home) ------------------------------------------------
   Mirrors the original: white base + 50%-opacity white→gold vertical wash,
   50/50 row, copy left, bordered photo right.                              */
.hero-split {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.hero-split::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--gold) 100%);
  opacity: 0.5;
  pointer-events: none;
}
.hero-split > .container { position: relative; z-index: 2; }

.hero-split__inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.hero-split__copy {
  width: 50%;
  padding: 90px 20px 90px 0;
}
.hero-split__media {
  width: 50%;
  display: flex;
  justify-content: center;
}
.hero-split__media img {
  width: 100%;
  max-width: 500px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hero-split h1 {
  font-family: var(--font-nav);
  font-size: 45px;
  line-height: 50px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 22px;
}
.hero-split p {
  font-family: var(--font-alt);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-color);
  margin-bottom: 30px;
  max-width: 560px;
}

/* plain white hero (no wash) */
.hero-split--plain { background: #fff; }
.hero-split--plain::before { display: none; }

/* row-reverse hero: photo on the left, copy on the right */
.hero-split--reverse .hero-split__inner { flex-direction: row-reverse; }
.hero-split--reverse .hero-split__copy { padding: 90px 0 90px 20px; }

/* inner-page variant: maroon Montserrat headline */
.hero-split--maroon h1 {
  color: var(--maroon);
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1.25;
  font-weight: 700;
}
.hero-split--maroon p { font-size: 16px; color: var(--text-body); }

/* hero buttons match the original pill styling exactly */
.btn-hero-primary {
  background: var(--maroon);
  color: #fff;
  font-family: var(--font-alt);
  font-size: 18px;
  font-weight: 500;
  border-radius: 50px;
  box-shadow: var(--shadow-gold);
  transition-duration: 0.3s;
}
.btn-hero-primary:hover,
.btn-hero-primary:focus {
  background: var(--gold);
  color: var(--maroon);
  border-color: var(--maroon);
  box-shadow: var(--shadow-gold-hover);
}

.btn-hero-ghost {
  background: transparent;
  color: var(--gold);
  font-family: var(--font-alt);
  font-size: 18px;
  font-weight: 600;
  border: 1px solid var(--gold);
  border-radius: 50px;
  box-shadow: var(--shadow-gold-hover);
  transition-duration: 0.03s;
}
.btn-hero-ghost:hover,
.btn-hero-ghost:focus {
  background: var(--gold);
  color: #fff;
  border-color: var(--maroon);
}

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background: var(--bg-dark) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.35) 100%);
}
.hero > .container { position: relative; z-index: 2; }

.hero__inner { max-width: 760px; padding: 90px 0; }
.hero h1 {
  color: #fff;
  font-size: 56px;
  line-height: 1.15;
  margin-bottom: 22px;
}
.hero p {
  font-size: 19px;
  color: var(--text-on-dark);
  margin-bottom: 34px;
  max-width: 620px;
}
.hero--center { text-align: center; }
.hero--center .hero__inner { margin-inline: auto; }
.hero--center p { margin-inline: auto; }

/* hero with a photo strip and a translucent copy panel on the right */
.hero-panel {
  position: relative;
  background: var(--bg-dark) center/cover no-repeat;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 380px;
  padding: 30px 0;
}
.hero-panel__card {
  background: rgba(255, 255, 255, 0.9);
  padding: 44px 48px;
  width: 54%;
  margin-right: 4%;
}
.hero-panel__card h1 {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--maroon);
  margin-bottom: 12px;
}
.hero-panel__lead {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 16px;
}
.hero-panel__card p {
  font-family: var(--font-nav);
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.7;
}

/* heading column beside a card row (Why Join Us) */
.aside-grid {
  display: grid;
  grid-template-columns: 0.85fr 3fr;
  gap: 34px;
  align-items: center;
}
.aside-grid__head h2 { margin-bottom: 10px; }
.aside-grid__head p {
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--text-body);
  margin-bottom: 22px;
  line-height: 1.6;
}
.aside-grid__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.rule-top { border-top: 1px solid var(--gold); }

/* compact inner-page banner */
.page-hero {
  position: relative;
  background: var(--maroon) center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 110px 0 100px;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--primary-deep) 78%, transparent);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 {
  color: #fff;
  font-size: 46px;
  margin-bottom: 14px;
}
.page-hero p {
  color: var(--text-on-dark);
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
}
.page-hero .btn-row { margin-top: 30px; justify-content: center; }

.breadcrumbs {
  font-size: 14px;
  color: var(--secondary-light);
  margin-top: 16px;
}
.breadcrumbs a { color: var(--gold); }

/* light page banners — the original uses three flavours:
   a white→gold wash, a flat warm sand, and plain white                       */
.page-hero--light,
.page-hero--solid,
.page-hero--plain {
  background-image: none;
  color: var(--body);
}
.page-hero--light { background-color: #fff; }
.page-hero--solid { background-color: var(--bg-alt); }
.page-hero--plain { background-color: #fff; }

.page-hero--light::before {
  background: linear-gradient(180deg, #ffffff 0%, var(--gold) 100%);
  opacity: 0.5;
}
.page-hero--solid::before,
.page-hero--plain::before { background: transparent; }

.page-hero--light h1,
.page-hero--solid h1,
.page-hero--plain h1 {
  color: var(--maroon);
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
}
.page-hero--light p,
.page-hero--solid p,
.page-hero--plain p { color: var(--text-body); }

.page-hero--light .eyebrow,
.page-hero--solid .eyebrow,
.page-hero--plain .eyebrow { color: var(--maroon); }

.page-hero--light .gold,
.page-hero--solid .gold,
.page-hero--plain .gold { color: var(--gold-dark); }

.page-hero--light .btn-outline,
.page-hero--solid .btn-outline,
.page-hero--plain .btn-outline { border-color: var(--maroon); color: var(--maroon); }
.page-hero--light .btn-outline:hover,
.page-hero--solid .btn-outline:hover,
.page-hero--plain .btn-outline:hover { background: var(--maroon); color: #fff; }

/* split hero: text + image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.split__body h2 { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  height: 100%;
  transition: all 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.card h3 { font-size: 21px; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 15.5px; margin-bottom: 0; }

.card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-light));
  color: #fff;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  flex: none;
}
.card__icon svg { width: 28px; height: 28px; fill: #fff; }

.card--gold .card__icon { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--ink); }
.card--gold .card__icon svg { fill: var(--ink); }

.card--dark {
  background: var(--surface-dark-2);
  border-color: var(--dark-line);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--text-on-dark-2); }

.card--flat { border: 0; box-shadow: var(--shadow-sm); }

/* summit-family card: white, 1px gold hairline, radius 11, centred,
   gold icon on top; border turns maroon on hover (0.3s)                   */
.card--outline,
.card--outline2 {
  background: #ffffff;
  border: 1px solid var(--gold);
  border-radius: 11px;
  padding: 26px 22px 28px;
  text-align: center;
  color: var(--body);
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card--outline:hover,
.card--outline2:hover {
  border-color: var(--maroon);
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.card--outline h3,
.card--outline2 h3 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  color: var(--maroon);
  margin-bottom: 12px;
  line-height: 1.4;
}
.card--outline p,
.card--outline2 p {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.65;
}

.card--outline .card__icon,
.card--outline2 .card__icon {
  background: transparent;
  border: 0;
  color: var(--gold);
  width: auto;
  height: 40px;
  margin: 0 auto 18px;
  font-size: 22px;
  transition: color 0.3s var(--ease);
}
.card--outline .card__icon svg,
.card--outline2 .card__icon svg {
  width: 36px;
  height: 36px;
  fill: var(--gold);
  transition: fill 0.3s var(--ease);
}
.card--outline:hover .card__icon,
.card--outline2:hover .card__icon { color: var(--maroon); }
.card--outline:hover .card__icon svg,
.card--outline2:hover .card__icon svg { fill: var(--maroon); }

/* the cement texture behind those cards is a light cream, not a dark wash */
.section--texture {
  position: relative;
  background: var(--secondary-tint) center/cover no-repeat;
  padding: 90px 0;
}
.section--texture > .container { position: relative; z-index: 2; }

/* maroon programme card: 12px gold left bar, radius 9, hard drop shadow
   (verbatim from the original page stylesheet)                            */
.card--maroon {
  background: var(--maroon);
  border: 0;
  border-left: 12px solid var(--gold);
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 24px 26px 26px;
  color: #fff;
}
.card--maroon h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 14px;
  line-height: 1.3;
}
.card--maroon p {
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 400;
  line-height: 17px;
  color: #ffffff;
}
.card--maroon:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

/* numbered card */
.card--step { position: relative; padding-top: 44px; }
.card--step .step-no {
  position: absolute;
  top: -22px;
  left: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
}

/* media card (image on top) */
.media-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s var(--ease);
}
.media-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.media-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.media-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.media-card:hover .media-card__thumb img { transform: scale(1.07); }
.media-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.media-card__body h3 { font-size: 20px; }
.media-card__body p { color: var(--muted); font-size: 15px; }
.media-card__link { margin-top: auto; padding-top: 18px; font-weight: 700; font-family: var(--font-alt); }

/* --------------------------------------------------------------------------
   9. People (panel of excellence / board)
   -------------------------------------------------------------------------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}

.person {
  text-align: center;
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 26px 16px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  height: 100%;
  transition: all 0.35s var(--ease);
}
.person:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}
.person__photo {
  width: 132px;
  height: 132px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  padding: 4px;
  background: #fff;
}
.person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.person__name {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--maroon);
  margin-bottom: 5px;
  line-height: 1.35;
}
.person__role {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.person--tall .person__photo { width: 100%; height: 260px; border-radius: var(--radius); padding: 0; border-width: 0; }
.person--tall .person__photo img { border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   10. Event banner
   -------------------------------------------------------------------------- */
.event {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
}
.event__body { padding: 52px 46px; }
.event__tag {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.event__venue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.event h3 { color: #fff; font-size: 30px; margin-bottom: 8px; }
.event__meta { color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.event p { color: var(--primary-pale); margin-bottom: 26px; }
.event__media { height: 100%; min-height: 320px; }
.event__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   11. Partner logo strip
   -------------------------------------------------------------------------- */
.logo-strip {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-strip img {
  height: 74px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.35s var(--ease);
}
.logo-strip img:hover { filter: none; opacity: 1; transform: scale(1.05); }

/* --------------------------------------------------------------------------
   12. Testimonials carousel
   -------------------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 33.3333%;
  padding: 12px;
  min-width: 0;
}

.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 26px;
  font-family: Georgia, serif;
  font-size: 84px;
  line-height: 1;
  color: var(--gold-soft);
}
.quote p {
  font-size: 15.5px;
  color: var(--body);
  font-style: italic;
  margin-bottom: 24px;
}
.quote__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.quote__person img {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex: none;
}
.quote__name {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--maroon);
  font-size: 16px;
  line-height: 1.3;
}
.quote__role { font-size: 13px; color: var(--muted); }

.carousel__nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
.carousel__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--maroon);
  background: transparent;
  color: var(--maroon);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
}
.carousel__btn:hover { background: var(--maroon); color: #fff; }
.carousel__btn svg { width: 15px; height: 15px; fill: currentColor; }

.carousel__dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 22px;
}
.carousel__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--control-idle);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s var(--ease);
}
.carousel__dot.is-active { background: var(--control-mid); }

/* --------------------------------------------------------------------------
   13. CTA bands
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--bg-dark) center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 100px 0;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--primary-deep) 80%, transparent);
}
.cta-band > .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: 40px; max-width: 900px; margin: 0 auto 26px; }
.cta-band p { color: var(--text-on-dark); max-width: 720px; margin: 0 auto 30px; font-size: 17px; }

.cta-band--left { text-align: left; }
.cta-band--left h2,
.cta-band--left p { margin-inline: 0; }

/* photo band with no dark wash (maroon/gold striped artwork) */
.cta-band--plain::before { display: none; }
.cta-band--plain h2 { font-size: 26px; }

/* light gradient band — original: linear-gradient(120deg, #fff, gold) */
.cta-band--light {
  background: linear-gradient(120deg, #ffffff 0%, var(--gold) 100%);
  color: var(--ink);
}
.cta-band--light::before { display: none; }
.cta-band--light h2 { color: var(--text-color); }
.cta-band--light p { color: var(--text-body); }

/* summit band: full-width photo, gold centred heading, maroon pill */
.summit-band {
  position: relative;
  background: var(--bg-dark) center/cover no-repeat;
  padding: 70px 0;
  text-align: center;
}
.summit-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.summit-band > .container { position: relative; z-index: 2; }
.summit-band h2 {
  color: var(--gold);
  font-family: var(--font-nav);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 26px;
}

/* event section: photo card left, copy right, on a dark washed photo */
.event-band {
  position: relative;
  background: var(--bg-dark) center/cover no-repeat;
  padding: 70px 0;
  color: #fff;
}
.event-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-dark) 80%, transparent);
}
.event-band > .container { position: relative; z-index: 2; }

.event-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.event-split__media img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.event-split h3 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 10px;
}
.event-split p { color: var(--text-on-dark); margin-bottom: 24px; }

.event-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.event-venue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.event-venue:hover { background: var(--gold-dark); color: #fff; }
.event-venue svg { width: 15px; height: 15px; fill: currentColor; }
.event-meta { color: #fff; font-weight: 600; margin-bottom: 14px; }

/* split band: gold gradient panel + photo (Celebrating…) */
.split-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 320px;
}
.split-band__panel {
  background: linear-gradient(120deg, #ffffff 0%, var(--gold) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 8vw 60px 0;
  padding-inline-start: max(20px, calc((100vw - var(--container)) / 2 + 20px));
}
.split-band__panel h2 {
  font-family: var(--font-nav);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 26px;
  max-width: 420px;
}
.split-band__panel .btn { align-self: flex-start; }
.split-band__media {
  background: var(--bg-dark) center/cover no-repeat;
  min-height: 320px;
}

/* testimonials + blogs share one row */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.duo__blogs h2 {
  font-family: var(--font-nav);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 22px;
}
.duo__blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.blog-mini img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: transform 0.45s var(--ease);
}
.blog-mini:hover img { transform: scale(1.04); }
.blog-mini a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--maroon);
  line-height: 1.5;
  display: block;
}
.blog-mini a:hover { color: var(--secondary-ink); }

/* single-slide testimonial layout used on the home page */
.quote--wide {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
}
.quote--wide::before { display: none; }
.quote--wide .quote__person {
  flex-direction: column;
  text-align: center;
  gap: 14px;
  margin: 0;
}
.quote--wide .quote__person img {
  width: 150px;
  height: 150px;
  border: 0;
}
.quote--wide .quote__name {
  font-family: var(--font-nav);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}
.quote--wide .quote__role {
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 500;
  color: var(--maroon);
}
.quote--wide .quote__text {
  background: var(--bg-alt);
  padding: 34px 28px;
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
  text-align: right;
  margin: 0;
  min-height: 220px;
  display: flex;
  align-items: center;
}

/* bordered testimonial card — ivory fill, 1px gold, radius 25 */
.quote--bordered {
  background: var(--bg-color);
  border: 1px solid var(--gold);
  border-radius: 25px;
  padding: 30px 28px;
  text-align: center;
}
.quote--bordered::before { display: none; }
.quote--bordered p {
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 300;
  font-style: normal;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 26px;
}
.quote--bordered .quote__person {
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.quote--bordered .quote__person img {
  width: 43px;
  height: 43px;
  border: 0;
}
.quote--bordered .quote__name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--maroon);
}
.quote--bordered .quote__role {
  font-family: var(--font-nav);
  font-size: 18px;
  font-weight: 400;
  color: var(--secondary-ink);
}

/* carousel variant: gold chevrons pinned to the sides */
.carousel--edge .carousel__nav {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
  pointer-events: none;
  z-index: 5;
}
.carousel--edge .carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--gold);
}
.carousel--edge .carousel__btn:hover {
  background: transparent;
  color: var(--gold-dark);
}
.carousel--edge .carousel__btn svg { width: 22px; height: 22px; }
.carousel--edge [data-carousel-prev] { left: -10px; }
.carousel--edge [data-carousel-next] { right: -10px; }

/* --------------------------------------------------------------------------
   14. Blog
   -------------------------------------------------------------------------- */
.post-hero {
  background: var(--surface-alt);
  padding: 70px 0 50px;
  border-bottom: 1px solid var(--line);
}
.post-hero h1 { font-size: 42px; max-width: 900px; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }

.post-body { padding: 60px 0 90px; }
.post-body > .container { max-width: 860px; }
.post-figure { margin-bottom: 40px; }
.post-figure img { border-radius: var(--radius-lg); width: 100%; }

.post-content h2 {
  font-size: 30px;
  margin-top: 44px;
  margin-bottom: 16px;
  padding-left: 18px;
  border-left: 4px solid var(--gold);
}
.post-content h3 { font-size: 22px; margin-top: 30px; }
.post-content p { font-size: 17px; color: var(--text-body); }
.post-content ul { padding-left: 22px; margin-bottom: 22px; }
.post-content li { font-size: 16.5px; color: var(--text-body); }
.post-content li::marker { color: var(--gold); }

.callout {
  background: var(--surface-alt);
  border-left: 4px solid var(--maroon);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 26px 0;
}
.callout strong { color: var(--maroon); }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  margin-top: 50px;
  padding-top: 30px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   15. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { max-width: 900px; margin-inline: auto; }
.accordion__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.3s var(--ease);
}
.accordion__item.is-open { box-shadow: var(--shadow-sm); border-color: var(--gold); }

.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.accordion__head:hover { color: var(--maroon); }
.accordion__icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  transition: all 0.3s var(--ease);
}
.accordion__item.is-open .accordion__icon { background: var(--gold); color: var(--ink); transform: rotate(45deg); }

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.accordion__panel > div { padding: 0 24px 22px; color: var(--muted); }

/* --------------------------------------------------------------------------
   16. Counters / stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat__num {
  font-family: var(--font-head);
  font-size: 46px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-alt);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--text-on-dark-2);
  margin-top: 10px;
}
.section--dark .stat__label { color: var(--text-on-dark-2); }

/* --------------------------------------------------------------------------
   17. Pricing / passes
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}
.price {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 30px 34px;
  display: flex;
  flex-direction: column;
  transition: all 0.35s var(--ease);
}
.price:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.price--featured {
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-gold);
  position: relative;
}
.price--featured::after {
  content: "Most Popular";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.price__name {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--maroon);
  margin-bottom: 12px;
}
.price__amount {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.price__amount small { font-size: 18px; font-weight: 600; color: var(--muted); }
.price__per { font-size: 14px; color: var(--muted); margin: 8px 0 22px; }
.price__list { list-style: none; padding: 0; margin: 0 0 26px; }
.price__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--body);
  margin-bottom: 11px;
}
.price__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.price .btn { margin-top: auto; }

.sold-out {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 42px 40px;
  box-shadow: var(--shadow-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--maroon); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-nav);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 13px 16px;
  transition: all 0.25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
  outline: none;
}
.field input[type="file"] { padding: 10px; background: var(--surface-alt); }

.field-note { font-size: 13px; color: var(--muted); }

.pay-box {
  background: var(--surface-alt);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 14.5px;
}
.pay-box strong { display: block; color: var(--maroon); margin-bottom: 4px; }

.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-line);
  color: var(--status-success);
  font-size: 15px;
}
.form-status.is-visible { display: block; }

/* --------------------------------------------------------------------------
   19. Lists & misc content blocks
   -------------------------------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0 0 26px; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--body);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--maroon);
  border-bottom: 2px solid var(--maroon);
  transform: rotate(-45deg);
}

/* gold icon + label list (home "Our Programs") */
.icon-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 30px;
  margin: 30px 0 34px;
}
.icon-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-list__item svg {
  width: 34px;
  height: 34px;
  fill: var(--gold);
  flex: none;
}
.icon-list__item span {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.pill-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.pill {
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--maroon);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  background: var(--bg-dark) center/cover no-repeat;
  color: #fff;
  padding: 28px;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.85) 100%);
  transition: background 0.35s var(--ease);
}
.tile:hover::before { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 35%, transparent) 20%, rgba(0, 0, 0, 0.9) 100%); }
.tile__body { position: relative; z-index: 2; }
.tile h3 { color: #fff; font-size: 24px; margin-bottom: 4px; }
.tile span { color: var(--gold); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

/* gold-framed tile, copy centred (summit family) */
.tile--framed {
  border: 1px solid var(--gold);
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 210px;
}
.tile--framed::before { background: rgba(0, 0, 0, 0.45); }
.tile--framed:hover::before { background: var(--primary-veil); }
.tile--framed h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 2px;
}
.tile--framed span {
  color: #ffffff;
  font-family: var(--font-nav);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.venue-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.venue {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: all 0.3s var(--ease);
}
.venue:hover { border-color: var(--gold); color: var(--maroon); transform: translateY(-5px); }
.venue svg { width: 26px; height: 26px; fill: var(--maroon); margin: 0 auto 10px; }

.award-poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.award-poster {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s var(--ease);
}
.award-poster:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.award-poster img { width: 100%; }

.info-panel {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  padding: 40px 38px;
}
.info-panel h3 { color: var(--maroon); }

.legal h2 {
  font-size: 24px;
  margin-top: 38px;
  color: var(--maroon);
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--body); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark-3);
  padding: 76px 0 0;
  border-top: 3px solid var(--gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.footer-brand img { height: 92px; width: auto; margin-bottom: 18px; }
.footer-brand h4 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 2px;
}
.footer-brand .tagline {
  color: var(--gold);
  font-family: var(--font-alt);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 16px;
}
.footer-brand p { font-size: 14.5px; color: var(--text-on-dark-3); }

.footer-col {
  border-left: 1px solid var(--dark-line);
  padding-left: 30px;
  text-align: center;
}
.footer-col h5 {
  color: var(--gold);
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: var(--text-on-dark-3); font-size: 14.5px; }
.footer-col a:hover { color: var(--gold); padding-left: 4px; }

.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  color: var(--text-on-dark-3);
  font-size: 14.5px;
  margin-bottom: 14px;
  text-align: left;
}
.footer-contact svg { width: 16px; height: 16px; fill: var(--gold); flex: none; margin-top: 4px; }

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  list-style: none;
  padding: 0;
  justify-content: center;
}
.footer-social li { margin: 0; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--dark-line);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-3px); }
.footer-social svg { width: 15px; height: 15px; fill: var(--text-on-dark-3); }
.footer-social a:hover svg { fill: var(--ink); }

.footer-bottom {
  margin-top: 60px;
  border-top: 1px solid var(--dark-line);
  padding: 22px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-on-dark-4);
}
.footer-bottom a { color: var(--gold); }

/* --------------------------------------------------------------------------
   21. Floating WhatsApp + back-to-top
   -------------------------------------------------------------------------- */
.float-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-whatsapp);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 700;
  transition: transform 0.3s var(--ease);
}
.float-wa:hover { transform: scale(1.08); }
.float-wa svg { width: 30px; height: 30px; fill: #fff; }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--maroon);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s var(--ease);
  z-index: 700;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 16px; height: 16px; fill: #fff; }

/* --------------------------------------------------------------------------
   22. Scroll reveal animation
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-left.is-visible { opacity: 1; transform: none; }

.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-right.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   30. Podcast page (feature-on-our-podcast)
   -------------------------------------------------------------------------- */

/* hairline rule between stacked white sections */
.section--sep { border-top: 1px solid var(--line); }

/* slightly tighter split gutter used across this page */
.split--tight { gap: 44px; align-items: center; }

/* gold-hairline framed photo */
.framed {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  width: 100%;
}

/* studio locations: gold pin + city, no card chrome */
.spot-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.spot {
  margin: 0;
  text-align: center;
}
.spot svg {
  width: 34px;
  height: 34px;
  fill: var(--gold);
  margin: 0 auto 16px;
  display: block;
  transition: fill 0.3s var(--ease);
}
.spot span {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.spot:hover svg { fill: var(--maroon); }

.lede-note {
  max-width: 780px;
  margin: 46px auto 0;
  text-align: center;
  font-family: var(--font-nav);
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
}

/* partner logo lock-up */
.partner-logo {
  width: 150px;
  height: auto;
  margin-bottom: 18px;
}

/* bold sub-lead under a section title */
.lead-strong {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.lead-strong--center { text-align: center; }

/* the small Poppins body copy this page uses everywhere */
.copy-sm {
  font-family: var(--font-nav);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--body);
  line-height: 1.85;
}

.check-list--sm li {
  font-family: var(--font-nav);
  font-size: 14.5px;
  padding-left: 30px;
  margin-bottom: 9px;
}
.check-list--sm li::before { width: 18px; height: 18px; top: 4px; }
.check-list--sm li::after { left: 5px; top: 9px; }

/* gold-outlined price panel with oversized mic mark */
.price-box {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: #fff;
  padding: 46px 34px 40px;
  text-align: center;
  transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.price-box:hover { border-color: var(--maroon); box-shadow: var(--shadow-sm); }
.price-box__icon {
  width: 118px;
  height: 118px;
  fill: var(--gold);
  margin: 0 auto 26px;
  display: block;
}
.price-box__amount {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.price-box__per {
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}

/* wider centred intro used above the registration form */
.section-head--wide { max-width: 900px; }

/* single-column, placeholder-only form */
.form-stacked {
  max-width: 1140px;
  margin: 0 auto;
}
.form-stacked .field { margin-bottom: 14px; }
.form-stacked input {
  border-radius: var(--radius);
  padding: 13px 18px;
  font-family: var(--font-nav);
  font-size: 14px;
}
/* red asterisk flag on the required first field, as on the live form */
.form-stacked .field--req { position: relative; }
.form-stacked .field--req::after {
  content: "*";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--status-error);
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.btn-send { margin-top: 12px; padding-inline: 30px; }

/* these two also appear inside .section-head, which sets its own p size */
.section-head p.copy-sm { font-size: 14.5px; color: var(--body); }
.section-head p.lead-strong { font-size: 16px; color: var(--ink); font-family: var(--font-head); }

/* --------------------------------------------------------------------------
   31. Schedule a Workshop page
   -------------------------------------------------------------------------- */

/* underlined maroon headline used on this hero */
.hero-split--rule h1 {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.hero-split__note {
  font-family: var(--font-nav);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 26px;
}

/* photo with bevelled top-left / bottom-right corners + dot ornament */
.hero-split__media--deco {
  position: relative;
  justify-content: flex-end;
  padding-left: 60px;
}
.img-bevel {
  border: 0;
  border-radius: 0;
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
  box-shadow: none;
}
.dot-grid {
  position: absolute;
  left: 6px;
  top: 22%;
  width: 34px;
  height: 34px;
  background-image: radial-gradient(circle, var(--text-body) 2px, transparent 2.5px);
  background-size: 12px 12px;
  background-position: 0 0;
}

/* thin rule broken by a maroon star — the section separator used sitewide
   on this page */
.star-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto 46px;
}
.star-rule--bottom { margin: 60px auto 0; }
.star-rule__line {
  flex: 1;
  height: 1px;
  background: var(--maroon);
  opacity: 0.55;
}
.star-rule svg {
  width: 16px;
  height: 16px;
  fill: var(--maroon);
  flex: none;
}

/* Who Can Apply: package panel beside a row of audience tiles */
.apply-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
}
.apply-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* audience tile: icon + maroon label only, no body copy */
.card--label { padding: 22px 16px 24px; }
.card--label h3 { margin-bottom: 0; font-size: 16px; font-weight: 600; }

/* gold-outlined workshop package panel */
.pack-card {
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 26px 22px 28px;
  text-align: center;
  transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.pack-card:hover { border-color: var(--maroon); box-shadow: var(--shadow-sm); }
.pack-card h3 {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  color: var(--maroon);
  margin-bottom: 18px;
}
.pack-card__price {
  display: inline-block;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 8px 26px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}
.pack-card .check-list { text-align: left; margin-bottom: 24px; }
.pack-card .check-list li { font-size: 12.5px; line-height: 1.5; }