@charset "UTF-8";
/* =====================================================================
   ACCREDITATION MADE EASY — main.css
   Hand-built design system. No framework, no utility soup.

   Palette is derived from the client's supplied logo:
     gold laurel  →  --gold-500 #C9A24B
     crimson mark →  --crimson-500 #C8202A
     warm black   →  --ink-900 #12100D
   If the logo is ever re-drawn, change the tokens in :root only.

   Signature devices used consistently across every page:
     1. Thin gold rule + small-caps kicker above section headings
     2. Custom SVG star ratings + demand chips
     3. Horizontal salary range bars on a shared $50k–$180k scale
     4. Oversized serif ordinal figures (01–04)
     5. Gold corner ribbon on "Most In Demand" cards
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Brand */
  --ink-900:      #12100D;
  --ink-800:      #1E1A15;
  --ink-700:      #2C2620;
  --ink:          #1A1714;
  --slate-600:    #554C42;
  --slate-500:    #6B6055;
  --slate-400:    #8C8175;

  --gold-600:     #A8842F;
  --gold-500:     #C9A24B;
  --gold-400:     #E0BE73;
  --gold-100:     #F3E7CC;

  --crimson-600:  #A5171F;
  --crimson-500:  #C8202A;

  --mist:         #F7F5F1;
  --mist-2:       #EFEBE4;
  --line:         #E4DED4;
  --line-dark:    rgba(255,255,255,.14);
  --white:        #FFFFFF;
  --success:      #1E7F5C;
  --success-bg:   #E8F4EF;
  --warning-bg:   #FBF1E2;

  /* Type */
  --ff-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1:    clamp(2.4rem, 5vw, 4.2rem);
  --fs-h2:    clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3:    clamp(1.3rem, 1.9vw, 1.75rem);
  --fs-h4:    clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lead:  clamp(1.075rem, 1.35vw, 1.3rem);
  --fs-body:  1.0125rem;
  --fs-sm:    .9125rem;
  --fs-xs:    .8125rem;
  --fs-kicker:.7375rem;

  /* Space */
  --shell: min(1280px, 100% - 2.5rem);
  --shell-narrow: min(880px, 100% - 2.5rem);
  --sec-y: clamp(3.5rem, 7vw, 7rem);
  --gap:   clamp(1.25rem, 2.2vw, 2rem);

  /* Form */
  --r:     2px;              /* sharp cards, deliberately not bubbly */
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(18,16,13,.05);
  --shadow-md: 0 8px 24px -12px rgba(18,16,13,.22);
  --shadow-lg: 0 24px 60px -28px rgba(18,16,13,.38);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .32s;
}

/* ---------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Browsers apply `margin: 1em 40px` to figure and blockquote. Left in place
   those side margins compound inside a card — the figure loses 80px and the
   blockquote another 80px, collapsing the text to a sliver and making the
   card enormously tall. Reset here; components set their own spacing. */
figure, blockquote { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gold-600); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

strong { font-weight: 600; }
small  { font-size: var(--fs-xs); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--gold-500); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--ink-900); color: #fff; padding: .85rem 1.25rem;
  font-size: var(--fs-sm); font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.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;
}

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.shell        { width: var(--shell); max-width: 100%; margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); max-width: 100%; margin-inline: auto; }

/* ---------------------------------------------------------------------
   OVERFLOW GUARDS
   A grid/flex child defaults to min-width:auto, which refuses to shrink
   below its content — one long word or URL then pushes the whole page
   sideways. These three rules are what keep the site at zero horizontal
   scroll from 320px up. Do not remove them.
   --------------------------------------------------------------------- */
.grid > *, .editorial > *, .course-layout > *, .compare > *,
.pathway__steps > *, .ladder__step > *, .feature-band > *,
.service > *, .rating-summary > *, .field-row > *, .ad-row > * { min-width: 0; }

.card, .catcard, .postcard, .quote, .reviewcard, .resource,
.form-card, .enquiry-card, .notice, .prose { min-width: 0; max-width: 100%; }

/* Long unbroken strings — file paths, emails, URLs — must break, not push. */
.img-placeholder, .img-placeholder span, .footer__email,
.utility__contact a, .prose a, .resource p, .acc__inner {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.section       { padding-block: var(--sec-y); }
.section--tight{ padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--ink-900); color: #EDE7DE; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #C9C0B4; }

.section__head { max-width: 60ch; margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--split {
  max-width: none; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0,1fr); align-items: end;
}
.section__lead { font-size: var(--fs-lead); color: var(--slate-500); max-width: 62ch; }
.section--dark .section__lead { color: #B7ADA0; }

.stack > * + * { margin-top: 1.1em; }
.grid { display: grid; gap: var(--gap); }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .section__head--split { grid-template-columns: 1.6fr 1fr; }
  .section__head--split .section__head-aside { justify-self: end; text-align: right; }
}
@media (min-width: 1120px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------------------------------------------------------------------
   4. SIGNATURE DEVICE 1 — gold rule + small-caps kicker
   --------------------------------------------------------------------- */
.kicker {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 1rem;
}
.kicker__rule {
  width: 2.25rem; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--gold-500), rgba(201,162,75,.25));
}
.section--dark .kicker { color: var(--gold-400); }
.section__head--center .kicker { justify-content: center; }

/* ---------------------------------------------------------------------
   5. SIGNATURE DEVICE 2 — stars + demand chips
   --------------------------------------------------------------------- */
.stars { display: inline-flex; gap: .1rem; vertical-align: middle; }
.star  { width: 1.05em; height: 1.05em; }
.star.is-on  { fill: var(--gold-500); }
.star.is-off { fill: rgba(107,96,85,.22); }
.section--dark .star.is-off { fill: rgba(255,255,255,.18); }
.stars--lg .star { width: 1.35em; height: 1.35em; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em;
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--slate-600);
  white-space: nowrap;
}
.chip--level  { border-color: var(--ink-900); color: var(--ink-900); background: transparent; }
.chip--code   { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0; }
.chip--demand.is-extreme { background: var(--gold-100); border-color: var(--gold-400); color: #6E5316; }
.chip--demand.is-high    { background: var(--mist-2); border-color: var(--line); color: var(--slate-600); }
.chip--demand.is-moderate{ background: transparent; border-color: var(--line); color: var(--slate-500); }
.chip--pathway { background: var(--mist); }
.chip--gold   { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.chip--dark   { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #EDE7DE; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------------------------------------------------------------------
   6. SIGNATURE DEVICE 3 — salary range bar
   --------------------------------------------------------------------- */
.salary { margin-block: 1rem; }
.salary__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .45rem;
}
.salary__label {
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-400);
}
.salary__value {
  font-family: var(--ff-serif); font-size: 1.15rem; font-weight: 600;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.salary__track {
  position: relative; height: 6px; border-radius: var(--r-pill);
  background: var(--mist-2); overflow: hidden;
}
.salary__fill {
  position: absolute; top: 0; bottom: 0;
  left: var(--bar-start, 0%);
  width: var(--bar-width, 40%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform-origin: left center;
}
.salary__scale {
  display: flex; justify-content: space-between;
  margin-top: .35rem; font-size: var(--fs-xs); color: var(--slate-400);
  font-variant-numeric: tabular-nums;
}
.salary__note { font-size: var(--fs-xs); color: var(--slate-500); margin: .5rem 0 0; }
.salary--compact { margin-block: .75rem; }

.section--dark .salary__track { background: rgba(255,255,255,.12); }
.section--dark .salary__value { color: #fff; }
.section--dark .salary__scale,
.section--dark .salary__label { color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------------
   7. SIGNATURE DEVICE 5 — "Most In Demand" corner ribbon
   --------------------------------------------------------------------- */
.ribbon {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: block; overflow: hidden; width: 132px; height: 132px;
  pointer-events: none;
}
.ribbon span {
  position: absolute; top: 26px; right: -34px;
  display: block; width: 168px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--ink-900);
  font-size: .625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; text-align: center;
  padding: .3rem 0;
  box-shadow: 0 2px 8px rgba(18,16,13,.2);
}

/* ---------------------------------------------------------------------
   8. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.6rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* background sweep */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%);
  transition: transform .42s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(0); }
.btn:active { transform: translateY(1px); }

.btn--gold  { background: var(--gold-500); color: var(--ink-900); }
.btn--gold::after { background: var(--ink-900); }
.btn--gold:hover { color: var(--gold-400); }

.btn--ink   { background: var(--ink-900); color: #fff; }
.btn--ink::after { background: var(--gold-500); }
.btn--ink:hover { color: var(--ink-900); }

.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost::after { background: currentColor; }
.btn--ghost:hover { color: var(--ink-900); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover { color: var(--ink-900); }

.btn--crimson { background: var(--crimson-500); color: #fff; }
.btn--crimson::after { background: var(--crimson-600); }
.btn--crimson:hover { color: #fff; }

.btn--sm { min-height: 42px; padding: .55rem 1.05rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn .icon { width: 1.1em; height: 1.1em; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--gold-600); text-decoration: none;
}
.tlink .icon { transition: transform var(--dur) var(--ease); }
.tlink:hover .icon { transform: translateX(4px); }
.section--dark .tlink { color: var(--gold-400); }

/* ---------------------------------------------------------------------
   9. UTILITY BAR + MASTHEAD
   --------------------------------------------------------------------- */
.utility { background: var(--ink-900); color: #CFC6BA; font-size: var(--fs-xs); }
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 40px; flex-wrap: wrap;
}
.utility p, .utility ul { margin: 0; }
.utility__place { display: flex; align-items: center; gap: .4rem; }
.utility__contact { display: flex; gap: 1.4rem; list-style: none; padding: 0; flex-wrap: wrap; }
.utility__contact li { margin: 0; }
.utility a, .utility__hours {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; color: inherit;
}
.utility a:hover { color: var(--gold-400); }
.utility .icon { width: 1rem; height: 1rem; color: var(--gold-500); }

@media (max-width: 900px) {
  .utility__place, .utility__hours { display: none; }
  .utility__inner { justify-content: center; }
}

.masthead {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.masthead.is-stuck { box-shadow: 0 10px 30px -22px rgba(18,16,13,.5); }
.masthead__inner {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  min-height: 84px;
  transition: min-height var(--dur) var(--ease);
}
.masthead.is-stuck .masthead__inner { min-height: 66px; }
.masthead.is-stuck .logo img { width: 44px; }

.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.logo img { width: 56px; height: auto; transition: width var(--dur) var(--ease); }
.logo__text { display: flex; flex-direction: column; line-height: 1.12; }
.logo__text strong {
  font-family: var(--ff-serif); font-size: 1.0125rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink-900);
}
.logo__text em {
  font-style: normal; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-600); font-weight: 600;
}
.logo--sm img { width: 40px; }
.logo--footer img { width: 64px; }
.logo--footer .logo__text strong { color: #fff; }
.logo--footer .logo__text em { color: var(--gold-400); }

@media (max-width: 480px) { .logo__text { display: none; } }

/* ------- desktop nav ------- */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }
.nav__list > li > a, .nav__toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap;
  padding: .6rem clamp(.4rem, .8vw, .7rem);
  font-family: var(--ff-sans); font-size: .9125rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__list > li > a:hover, .nav__toggle:hover,
.nav__list > li > a[aria-current="page"] { color: var(--gold-600); border-bottom-color: var(--gold-500); }
.nav__caret { width: .85em; height: .85em; transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
[data-dropdown].is-open .nav__caret { transform: rotate(-90deg); }
[data-dropdown].is-open > .nav__toggle { color: var(--gold-600); }

.submenu, .mega {
  position: absolute; top: calc(100% + 1px); left: 0;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.985); transform-origin: top left;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 950;
}
[data-dropdown].is-open .submenu, [data-dropdown].is-open .mega {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.submenu { width: 340px; padding: .6rem; }
.submenu__list { list-style: none; margin: 0; padding: 0; }
.submenu__list li { margin: 0; }
.submenu__list a {
  display: block; padding: .7rem .8rem; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.submenu__list a:hover { background: var(--mist); border-left-color: var(--gold-500); color: inherit; }
.submenu__title { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-900); }
.submenu__desc  { display: block; font-size: var(--fs-xs); color: var(--slate-500); line-height: 1.45; }

/* ------- mega menu ------- */
/* The mega spans the masthead rather than its <li>. Centred with
   inset + auto margins (not left:50% + translate) so its box can never
   resolve outside the viewport, whatever the containing block turns
   out to be. */
/* Specificity matters here: `.nav__list > li` sets position:relative, so a
   bare `.has-mega` rule loses and the panel would size itself against the
   ~98px <li> instead of the masthead — columns then spill outside the
   white background. Keep this selector as specific as the one above it. */
.nav__list > li.has-mega { position: static; }
.mega {
  left: 0; right: 0;
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
  transform: translateY(-8px) scale(.985);
  transform-origin: top center;
}
[data-dropdown].is-open .mega { transform: translateY(0) scale(1); }
.mega__inner {
  display: grid; gap: 0;
  grid-template-columns: 1.15fr 1fr 1fr .95fr;
  padding: 1.6rem;
}
.mega__col { padding-inline: 1.25rem; border-left: 1px solid var(--line); }
.mega__col:first-child { padding-left: 0; border-left: 0; }
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li { margin: 0; }
.mega__col a {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .55rem; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mega__col a:hover { background: var(--mist); border-left-color: var(--gold-500); color: inherit; }
.mega__col a .icon { width: 1.15rem; height: 1.15rem; color: var(--gold-600); margin-top: .18rem; }
.mega__col a span { display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-900); }
.mega__col a small { font-size: var(--fs-xs); color: var(--slate-400); font-weight: 400; }
.mega__label {
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-400);
  margin: 0 0 .85rem; padding-left: .55rem; min-height: 1.2em;
}
.mega__col--demand .mega__label { color: var(--gold-600); }
.mega__dot { width: 6px; height: 6px; background: var(--gold-500); flex: none; }
.mega__col--cta { background: var(--mist); margin: -1.6rem -1.6rem -1.6rem 0; padding: 1.6rem 1.5rem; }
.mega__pitch { font-size: var(--fs-sm); color: var(--slate-500); margin-bottom: 1rem; }
.mega__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: var(--fs-xs); font-weight: 600; color: var(--gold-600); text-decoration: none; }
.mega__link .icon { width: 1em; height: 1em; }

@media (max-width: 1180px) {
  .nav, .masthead__cta { display: none; }
}

/* ------- burger ------- */
.burger {
  margin-left: auto;
  width: 48px; height: 48px; flex: none;
  display: grid; place-content: center; gap: 5px;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
/* Declared after the base rule so it actually wins on desktop. */
@media (min-width: 1181px) { .masthead .burger { display: none; } }
.burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink-900);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------- site search ------- */
.masthead__search {
  width: 44px; height: 44px; flex: none;
  display: grid; place-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-900); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.masthead__search:hover { border-color: var(--gold-500); background: var(--mist); }
.masthead__search .icon { width: 19px; height: 19px; }

/* Below the desktop breakpoint the nav and CTA are gone, so the search
   button needs to claim the free space itself and sit beside the
   burger rather than stranded next to the logo. */
@media (max-width: 1180px) {
  .masthead__search { margin-left: auto; }
  .masthead .burger { margin-left: .4rem; }
}

.sitesearch {
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-block: 1rem;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.sitesearch[hidden] { display: none; }
.sitesearch.is-open { opacity: 1; transform: none; }

.searchbar {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
}
.searchbar__icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--slate-400); pointer-events: none; display: flex;
}
.searchbar__icon .icon { width: 18px; height: 18px; }
.searchbar input[type="search"] {
  flex: 1; min-width: 0;
  padding: .8rem 1rem .8rem 2.7rem;
  font-family: var(--ff-sans); font-size: 1rem;
  color: var(--ink-900); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  -webkit-appearance: none; appearance: none;
}
.searchbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar input[type="search"]:focus {
  outline: none; border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-100);
}
.searchbar .btn { flex: none; }
.sitesearch__close {
  flex: none; width: 44px; height: 44px;
  display: grid; place-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--slate-500); cursor: pointer;
}
.sitesearch__close:hover { border-color: var(--crimson-500); color: var(--crimson-500); }

/* Suggestions dropdown */
.searchsuggestions {
  margin-top: .5rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); box-shadow: var(--shadow-md);
  max-height: min(60vh, 26rem); overflow-y: auto;
}
.searchsuggestions[hidden] { display: none; }
.suggestion {
  display: flex; align-items: baseline; gap: .85rem;
  padding: .7rem 1rem;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion.is-active { background: var(--mist); }
.suggestion.is-active { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.suggestion__kind {
  flex: none; width: 6.5rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-600);
}
.suggestion__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.suggestion__title { font-weight: 600; color: var(--ink-900); }
.suggestion__meta { font-size: var(--fs-xs); color: var(--slate-400); }
.suggestion--more {
  justify-content: center; font-weight: 600; color: var(--gold-600);
  background: var(--mist);
}
.suggestion__empty { margin: 0; padding: .9rem 1rem; color: var(--slate-500); font-size: var(--fs-sm); }

@media (max-width: 560px) {
  .suggestion { flex-direction: column; gap: .15rem; }
  .suggestion__kind { width: auto; }
}

/* The search bar in the mobile overlay, on the dark ground. */
.searchbar--mobile { margin-bottom: 1.75rem; }
.searchbar--mobile input[type="search"] {
  background: rgba(255,255,255,.06); border-color: var(--line-dark); color: #fff;
}
.searchbar--mobile input[type="search"]::placeholder { color: rgba(255,255,255,.5); }
.searchbar--mobile .searchbar__icon { color: rgba(255,255,255,.5); }

/* ------- mobile overlay ------- */
.mobile {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink-900); color: #EDE7DE;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .28s var(--ease);
}
.mobile[hidden] { display: none; }
.mobile.is-open { opacity: 1; }
.mobile__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-dark);
  position: sticky; top: 0; background: var(--ink-900); z-index: 2;
}
.mobile__close {
  width: 48px; height: 48px; display: grid; place-content: center;
  background: none; border: 1px solid var(--line-dark); border-radius: var(--r);
  color: #fff; cursor: pointer;
}
.mobile__nav { padding: 1.25rem 1.25rem 3rem; flex: 1; }
.mobile__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.mobile__list > li {
  margin: 0; border-bottom: 1px solid var(--line-dark);
  opacity: 0; transform: translateY(14px);
}
.mobile.is-open .mobile__list > li,
.mobile.is-open .mobile__foot {
  animation: mobileIn .42s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 38ms + 90ms);
}
@keyframes mobileIn { to { opacity: 1; transform: none; } }
.mobile__list > li > a, .mobile__acc > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 56px; padding: .9rem .25rem;
  font-family: var(--ff-serif); font-size: 1.25rem; font-weight: 500;
  color: #fff; text-decoration: none; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.mobile__acc > button .icon { color: var(--gold-500); transition: transform var(--dur) var(--ease); }
.mobile__acc.is-open > button .icon { transform: rotate(45deg); }
.mobile__panel {
  display: grid; overflow: hidden;
  max-height: 0; transition: max-height .38s var(--ease);
}
.mobile__acc.is-open .mobile__panel { max-height: 82rem; }
.mobile__panel a {
  padding: .7rem .25rem .7rem 1rem; min-height: 44px;
  display: flex; align-items: center;
  font-size: var(--fs-sm); color: #C9C0B4; text-decoration: none;
  border-left: 1px solid var(--line-dark);
}
.mobile__panel a:hover { color: var(--gold-400); }
.mobile__panel a:last-child { padding-bottom: 1.1rem; }
.mobile__panel-label {
  margin: .9rem 0 .25rem 1rem; font-size: var(--fs-kicker); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500);
}
.mobile__foot { opacity: 0; transform: translateY(14px); }
.mobile__call {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; margin-top: .85rem;
  font-size: 1.05rem; font-weight: 600; color: #fff; text-decoration: none;
  border: 1px solid var(--line-dark);
}
.mobile__call .icon { color: var(--gold-500); }
.mobile__hours { margin-top: 1rem; font-size: var(--fs-xs); color: #9A8F81; text-align: center; }

/* ---------------------------------------------------------------------
   10. HERO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink-900);
  color: #EDE7DE;
  padding-block: clamp(3rem, 7vw, 6.5rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(72rem 42rem at 88% -10%, rgba(201,162,75,.16), transparent 62%),
    radial-gradient(48rem 30rem at 4% 108%, rgba(200,32,42,.10), transparent 66%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { color: #fff; }
.hero__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0,1fr); align-items: center;
}
.hero__lead { font-size: var(--fs-lead); color: #C4BBAE; max-width: 46ch; margin-bottom: 1.75rem; }
.hero__actions { margin-bottom: 1.75rem; }
.hero__media { position: relative; }
.hero__frame {
  position: relative;
  border: 1px solid rgba(201,162,75,.32);
  padding: .7rem;
}
.hero__frame::after {
  content: ""; position: absolute; right: -.7rem; bottom: -.7rem;
  width: 62%; height: 62%; border-right: 2px solid var(--gold-500);
  border-bottom: 2px solid var(--gold-500); pointer-events: none;
}
/* On narrow screens the offset corner would push the frame past the
   gutter, so tuck it inside instead of losing the device entirely. */
@media (max-width: 719px) {
  .hero__frame::after { right: 0; bottom: 0; }
}
.hero__frame img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: linear-gradient(150deg, #241F19, #17130F);
}
.hero__badge {
  position: absolute; left: -.75rem; bottom: 2rem;
  background: var(--gold-500); color: var(--ink-900);
  padding: .8rem 1.1rem; max-width: 15rem;
  box-shadow: var(--shadow-lg);
}
.hero__badge strong { display: block; font-family: var(--ff-serif); font-size: 1.5rem; line-height: 1; }
.hero__badge span   { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

/* Placeholder styling for images not yet supplied */
.img-placeholder {
  display: grid; place-content: center; gap: .5rem; text-align: center;
  background: repeating-linear-gradient(135deg, #241F19 0 12px, #1D1913 12px 24px);
  color: rgba(255,255,255,.45);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  border: 1px dashed rgba(255,255,255,.2);
  aspect-ratio: 4 / 5; padding: 2rem;
}
.img-placeholder--wide  { aspect-ratio: 16 / 10; }
.img-placeholder--light {
  background: repeating-linear-gradient(135deg, var(--mist) 0 12px, var(--mist-2) 12px 24px);
  color: var(--slate-400); border-color: var(--line);
}
.img-placeholder .icon { width: 2rem; height: 2rem; margin-inline: auto; }

/* Page hero (interior pages) */
.pagehero {
  background: var(--ink-900); color: #EDE7DE;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  position: relative; overflow: hidden;
}
.pagehero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60rem 34rem at 82% 0%, rgba(201,162,75,.14), transparent 60%);
}
.pagehero > * { position: relative; }
.pagehero h1 { color: #fff; max-width: 22ch; }
.pagehero__lead { font-size: var(--fs-lead); color: #C4BBAE; max-width: 62ch; }
.pagehero__grid { display: grid; gap: var(--gap); }
@media (min-width: 960px) { .pagehero__grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }

/* ---------------------------------------------------------------------
   11. TRUST STRIP
   --------------------------------------------------------------------- */
.trust {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.trust li { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: var(--fs-sm); color: #D6CDC0; }
.trust .icon { color: var(--gold-500); width: 1.1rem; height: 1.1rem; }
.trust { list-style: none; padding: 1.5rem 0 0; }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------------------------------------------------------------------
   12. CARDS
   --------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card--link:hover, .card--link:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: 0 18px 44px -26px rgba(168,132,47,.55);
}
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.card__title { font-size: var(--fs-h4); margin-bottom: .4rem; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }  /* full-card click target */
.card__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card__body { color: var(--slate-500); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: 1rem; }
.card__divider { border-top: 1px solid var(--line); margin: 1rem 0 .9rem; }

.card--dark {
  background: var(--ink-800); border-color: rgba(255,255,255,.12); color: #D6CDC0;
}
.card--dark .card__title { color: #fff; }
.card--dark:hover { border-color: var(--gold-500); }

/* Career mini-list inside a course card */
.card__careers { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.card__careers li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .3rem; color: var(--slate-600); }
.card__careers .icon { width: 1rem; height: 1rem; color: var(--gold-600); margin-top: .28rem; }

/* Category card (image-led) */
.catcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.catcard:hover { transform: translateY(-4px); border-color: var(--gold-400); box-shadow: 0 18px 44px -26px rgba(168,132,47,.55); }
.catcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--mist-2); overflow: hidden; }
.catcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.catcard:hover .catcard__media img { transform: scale(1.05); }
.catcard__icon {
  position: absolute; left: 1rem; bottom: 1rem;
  width: 44px; height: 44px; display: grid; place-content: center;
  background: var(--ink-900); color: var(--gold-500);
}
.catcard__icon .icon { width: 1.35rem; height: 1.35rem; }
.catcard__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.catcard__title { font-size: var(--fs-h4); margin-bottom: .45rem; }
.catcard__title a { text-decoration: none; }
.catcard__title a::after { content: ""; position: absolute; inset: 0; }
.catcard__tagline { font-size: var(--fs-sm); color: var(--slate-500); margin-bottom: 1rem; }
.catcard__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: var(--fs-xs); color: var(--slate-400);
}

/* Value / feature cards — offset numbered variant */
.valuecard {
  border-left: 2px solid var(--gold-500);
  padding: .25rem 0 .25rem 1.5rem;
}
.valuecard h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.valuecard p { font-size: var(--fs-sm); color: var(--slate-500); }

/* ---------------------------------------------------------------------
   12b. ADVISORY FEE CARDS
   Two cards, the second carrying the gold treatment. Deliberately the
   same sharp-cornered, gold-and-ink language as the rest of the site
   rather than a bubbly SaaS pricing table.
   --------------------------------------------------------------------- */
.pricegrid {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 760px) { .pricegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pricecard {
  border: 1px solid var(--gold-500); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--gold-500);
  background: var(--white); overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pricecard:hover { transform: translateY(-3px); box-shadow: 0 20px 48px -28px rgba(18,16,13,.35); }
/* Both cards carry the gold border now, so --feature adds nothing to the
   frame. It is kept as a hook in case one card is singled out again. */

.pricecard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist-2); }
.pricecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pricecard__price {
  position: absolute; right: 0; bottom: 0;
  font-family: var(--ff-serif); font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1;
  padding: .7rem 1.1rem; background: var(--gold-500); color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
/* Both price badges are gold. The featured card is still distinguished by
   its gold border and gold button, so the badge no longer needs to differ. */

/* Compact (home page) — no photo, so the price sits in the body. */
.pricecard__price--inline {
  position: static; display: inline-block; margin-bottom: .75rem; padding: .45rem .9rem;
}

.pricecard__body { padding: clamp(1.25rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.pricecard__title { font-size: var(--fs-h3); margin-bottom: .5rem; }
.pricecard__lead { font-size: var(--fs-sm); color: var(--slate-500); }
.pricecard__list { margin-top: 1.25rem; }
.pricecard__list li { font-size: var(--fs-sm); }
.pricecard__cta { margin-top: auto; padding-top: .9rem; }
.pricecard__cta.btn { margin-top: 1.5rem; }

.pricegrid__note { margin-top: var(--gap); }

/* TESOL cards: the CME mark alone.
   No coloured ground, no frame, no fixed 3:2 ratio — the client read
   every version of those as "an empty box". The mark now sits on the
   card's own background and the media area is only as tall as it is.
   A real photograph dropped in later still gets the 3:2 crop. */
.tesol-art { aspect-ratio: auto; display: block; background: none; }
.tesol-art > img.tesol-panel__mark { width: auto; }
.tesol-art > img:not(.tesol-panel__mark) { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.tesol-panel { display: grid; place-items: center; padding: clamp(.9rem, 2.4vw, 1.4rem) 1rem; }
.tesol-panel__mark {
  display: block; width: 41%; min-width: 112px; max-width: 180px; height: auto;
}
.tesol-panel--gold .tesol-panel__mark { width: 45%; max-width: 198px; }

.tesol-hours {
  display: block; margin-top: .3rem; font-family: var(--ff-sans);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-400); font-weight: 600;
}

/* Credential card */
.credcard {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem; background: var(--white);
  display: flex; flex-direction: column; gap: .35rem;
}
.credcard .icon { width: 1.6rem; height: 1.6rem; color: var(--gold-600); margin-bottom: .5rem; }
.credcard strong { font-family: var(--ff-serif); font-size: 1.1rem; }
.credcard span { font-size: var(--fs-sm); color: var(--slate-500); }

/* ---------------------------------------------------------------------
   13. SIGNATURE DEVICE 4 — CME Pathway Method (oversized ordinals)
   --------------------------------------------------------------------- */
.pathway { position: relative; }
.pathway__steps {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0,1fr);
  position: relative;
}
.pathway__line {
  position: absolute; left: 1.35rem; top: 2.5rem; bottom: 2.5rem; width: 1px;
  background: rgba(201,162,75,.3); transform-origin: top center;
}
.pathway__step { position: relative; padding-left: 4rem; }
.pathway__num {
  position: absolute; left: 0; top: -.35rem;
  font-family: var(--ff-serif); font-size: 2.75rem; font-weight: 400;
  line-height: 1; color: var(--gold-500); font-variant-numeric: tabular-nums;
}
.pathway__step h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.pathway__step p { font-size: var(--fs-sm); color: var(--slate-500); }
.section--dark .pathway__step p { color: #B7ADA0; }
.pathway__tag {
  display: inline-block; margin-top: .7rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  color: var(--gold-600);
}
.section--dark .pathway__tag { color: var(--gold-400); }

@media (min-width: 900px) {
  .pathway__steps { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .pathway__line { left: 0; right: 0; top: 1.9rem; bottom: auto; width: auto; height: 1px; }
  .pathway__step { padding-left: 0; padding-top: 4.25rem; }
  .pathway__num { top: 0; }
  .pathway__step::before {
    content: ""; position: absolute; left: 0; top: 1.62rem;
    width: 9px; height: 9px; background: var(--gold-500);
    outline: 4px solid var(--white);
  }
  .section--dark .pathway__step::before { outline-color: var(--ink-900); }
  .section--mist .pathway__step::before { outline-color: var(--mist); }
}

/* Compact pathway (course pages) */
.pathway--mini .pathway__steps { gap: 1.1rem; }
.pathway--mini .pathway__step { padding-left: 3rem; padding-top: 0; }
.pathway--mini .pathway__num { font-size: 1.9rem; }
.pathway--mini .pathway__line,
.pathway--mini .pathway__step::before { display: none; }
@media (min-width: 900px) { .pathway--mini .pathway__steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------------------------------------------------------------------
   14. COMPARISON ROW (three pathways)
   --------------------------------------------------------------------- */
.compare { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.compare__col { padding: clamp(1.4rem, 2.4vw, 2.25rem); border-top: 1px solid var(--line); background: var(--white); }
.compare__col:first-child { border-top: 0; }
.compare__col--feature { background: var(--mist); }
.compare__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-600); margin-bottom: .8rem;
}
.compare__col h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.compare__col > p { font-size: var(--fs-sm); color: var(--slate-500); }
.compare__list { list-style: none; padding: 0; margin: 1.1rem 0 0; font-size: var(--fs-sm); }
.compare__list li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .5rem; color: var(--slate-600); }
.compare__list .icon { width: 1.05rem; height: 1.05rem; color: var(--gold-600); margin-top: .3rem; flex: none; }
.compare__who {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--slate-500);
}
.compare__who strong { color: var(--ink-900); display: block; margin-bottom: .2rem;
  font-size: var(--fs-kicker); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 900px) {
  .compare { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .compare__col { border-top: 0; border-left: 1px solid var(--line); }
  .compare__col:first-child { border-left: 0; }
}

/* ---------------------------------------------------------------------
   15. STATS BAND
   --------------------------------------------------------------------- */
.stats { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0,1fr)); }
.stat { border-top: 2px solid var(--gold-500); padding-top: 1rem; }
.stat__num {
  display: block; font-family: var(--ff-serif); font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 500; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: .5rem; font-size: var(--fs-sm); color: #B7ADA0; }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Case-study strips inside the dark band */
.cases { display: grid; gap: var(--gap); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.case {
  border-left: 2px solid var(--gold-500); padding-left: 1.4rem;
}
.case h3 { font-size: var(--fs-h4); color: #fff; margin-bottom: .55rem; }
.case dl { margin: 0; font-size: var(--fs-sm); }
.case dt {
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-400); margin-top: .7rem;
}
.case dd { margin: .15rem 0 0; color: #B7ADA0; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---------------------------------------------------------------------
   16. FORMS
   --------------------------------------------------------------------- */
.field { margin-bottom: 1rem; }
.field label, .fieldset__legend {
  display: block; margin-bottom: .35rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-600);
}
.field .req { color: var(--crimson-500); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="url"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px;
  padding: .7rem .85rem;
  font-family: var(--ff-sans); font-size: var(--fs-sm); color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6055' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
  padding-right: 2.5rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201,162,75,.18);
}
input::placeholder, textarea::placeholder { color: var(--slate-400); }
.field__help { margin: .35rem 0 0; font-size: var(--fs-xs); color: var(--slate-400); }
.field__error { margin: .35rem 0 0; font-size: var(--fs-xs); color: var(--crimson-500); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--crimson-500); }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
}
.form-card--dark { background: var(--ink-800); border-color: rgba(255,255,255,.14); color: #D6CDC0; }
.form-card--dark label { color: rgba(255,255,255,.66); }
.form-card--dark input, .form-card--dark select, .form-card--dark textarea {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #fff;
}
.form-card--dark input::placeholder, .form-card--dark textarea::placeholder { color: rgba(255,255,255,.4); }
.form-card__title { font-size: var(--fs-h3); margin-bottom: .4rem; }
.form-card__sub { font-size: var(--fs-sm); color: var(--slate-500); margin-bottom: 1.4rem; }
.form-card--dark .form-card__title { color: #fff; }
.form-card--dark .form-card__sub { color: #A79C8E; }
.form-privacy { margin-top: 1rem; font-size: var(--fs-xs); color: var(--slate-400); }

.alert { padding: .9rem 1.1rem; border-radius: var(--r); font-size: var(--fs-sm); margin-bottom: 1.25rem; border: 1px solid; }
.alert--error   { background: #FCEDED; border-color: #F0C4C4; color: #8E1219; }
.alert--success { background: var(--success-bg); border-color: #BEDFD2; color: #15594100; color: #155941; }
.alert ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* Checkbox / radio */
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--slate-600); }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: .18rem; accent-color: var(--gold-600); flex: none; }
.check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-sm); margin: 0; }

/* ---------------------------------------------------------------------
   17. ELIGIBILITY CHECKER
   --------------------------------------------------------------------- */
.elig { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.elig__q {
  display: grid; gap: 1rem; align-items: center;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.elig__q p { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.elig__q small { display: block; font-weight: 400; color: var(--slate-400); font-size: var(--fs-xs); margin-top: .15rem; }
.elig__toggle { display: flex; gap: .5rem; }
.elig__toggle button {
  min-width: 72px; min-height: 44px; padding: .5rem 1rem;
  font-family: var(--ff-sans); font-size: var(--fs-sm); font-weight: 600;
  background: var(--white); color: var(--slate-600);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.elig__toggle button:hover { border-color: var(--gold-400); }
.elig__toggle button[aria-pressed="true"][data-val="yes"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--gold-400); }
.elig__toggle button[aria-pressed="true"][data-val="no"]  { background: var(--mist-2); border-color: var(--slate-400); color: var(--ink-900); }
.elig__result { padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--mist); }
.elig__result[hidden] { display: none; }
.elig__result h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.elig__result.is-pass { background: var(--success-bg); }
.elig__result.is-check { background: var(--warning-bg); }
.elig__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .75rem;
}
.is-pass .elig__badge { color: var(--success); }
.is-check .elig__badge { color: var(--gold-600); }
.elig__progress { height: 3px; background: var(--mist-2); }
.elig__progress span { display: block; height: 100%; width: 0; background: var(--gold-500); transition: width .35s var(--ease); }
@media (min-width: 620px) { .elig__q { grid-template-columns: 1fr auto; } }

/* ---------------------------------------------------------------------
   18. TESTIMONIALS / SWIPER
   --------------------------------------------------------------------- */
.quotes { position: relative; }
.quote {
  height: auto; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.quote__mark { width: 2rem; height: 2rem; color: var(--gold-500); fill: currentColor; stroke: none; margin-bottom: .9rem; }
.quote__body {
  font-family: var(--ff-serif); font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.5; color: var(--ink-900); margin-bottom: 1.25rem;
}
.quote__foot { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quote__name { font-weight: 600; font-size: var(--fs-sm); }
.quote__course { display: block; font-size: var(--fs-xs); color: var(--slate-500); margin-top: .1rem; }
.quote .stars { margin-bottom: .55rem; }

/* overflow:hidden must win over Swiper's own stylesheet, otherwise
   off-screen slides widen the document. */
.quotes .swiper, .swiper[data-swiper] { overflow: hidden; max-width: 100%; }
.swiper { overflow: hidden; padding-bottom: .5rem; }
.swiper-slide { height: auto; min-width: 0; }

/* Slides stretch so every visible card is the same height regardless of how
   long the testimonial is — otherwise the row looks ragged along the bottom.
   align-self is stated explicitly because Swiper's own slide rules would
   otherwise leave the tallest card standing proud of the others. */
.quotes .swiper-wrapper { align-items: stretch; }
.quotes .swiper-slide { display: flex; height: auto; align-self: stretch; }
.quotes .quote { flex: 1 1 auto; width: 100%; }
.swiper-nav { display: flex; gap: .5rem; margin-top: 1.5rem; }
.swiper-nav button {
  width: 48px; height: 48px; display: grid; place-content: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-900); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.swiper-nav button:hover { background: var(--ink-900); color: var(--gold-400); border-color: var(--ink-900); }
.swiper-nav button.swiper-button-disabled { opacity: .35; cursor: default; }
.swiper-nav .icon--arrow-prev { transform: rotate(180deg); }
.section--dark .quote { background: var(--ink-800); border-color: rgba(255,255,255,.12); }
.section--dark .quote__body { color: #F0EAE1; }
.section--dark .quote__foot { border-color: rgba(255,255,255,.12); }
.section--dark .quote__course { color: #9A8F81; }
.section--dark .swiper-nav button { background: transparent; border-color: rgba(255,255,255,.2); color: #fff; }

/* Review card grid (reviews.php) */
.reviewcard {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
  padding: 1.5rem; display: flex; flex-direction: column;
}
.reviewcard__head { display: flex; gap: .85rem; align-items: center; margin-bottom: .9rem; }
.reviewcard__avatar {
  width: 44px; height: 44px; flex: none; display: grid; place-content: center;
  background: var(--ink-900); color: var(--gold-400);
  font-family: var(--ff-serif); font-size: 1.1rem; font-weight: 600;
}
.reviewcard__name { font-weight: 600; font-size: var(--fs-sm); }
.reviewcard__date { font-size: var(--fs-xs); color: var(--slate-400); }
.reviewcard__body { font-size: var(--fs-sm); color: var(--slate-600); flex: 1; }
.reviewcard__course {
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--slate-500);
}
.rating-summary {
  display: grid; gap: 1.5rem; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 2.5vw, 2.25rem); background: var(--mist);
}
.rating-summary__score {
  font-family: var(--ff-serif); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1;
  font-weight: 500; color: var(--ink-900);
}
@media (min-width: 760px) { .rating-summary { grid-template-columns: auto 1fr auto; } }

/* ---------------------------------------------------------------------
   19. ACCORDION (FAQ)
   --------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 56px; padding: 1.1rem 0;
  font-family: var(--ff-serif); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 500;
  line-height: 1.35; text-align: left; color: var(--ink-900);
  background: none; border: 0; cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.acc__btn:hover { color: var(--gold-600); }
.acc__btn .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .25rem; color: var(--gold-600); transition: transform var(--dur) var(--ease); }
.acc__item.is-open .acc__btn .icon { transform: rotate(45deg); }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height .38s var(--ease); }
.acc__item.is-open .acc__panel { max-height: 60rem; }
.acc__inner { padding: 0 3rem 1.4rem 0; font-size: var(--fs-sm); color: var(--slate-600); }
.acc__inner p:last-child { margin-bottom: 0; }
.acc__group { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.acc__group h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }

/* ---------------------------------------------------------------------
   20. CHECKLISTS + PROSE
   --------------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checklist li {
  display: flex; gap: .7rem; align-items: flex-start; margin: 0;
  font-size: var(--fs-sm); color: var(--slate-600);
}
.checklist .icon { width: 1.15rem; height: 1.15rem; color: var(--gold-600); margin-top: .28rem; flex: none; }
.checklist--2col { grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .checklist--2col { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 2rem; } }
.checklist--boxed li {
  border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; background: var(--white);
}
.checklist--doc li { align-items: flex-start; }
.checklist--doc strong { display: block; color: var(--ink-900); font-size: var(--fs-sm); }
.checklist--doc span { font-size: var(--fs-xs); color: var(--slate-500); }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 2.4em; }
.prose h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-top: 1.9em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.075rem; line-height: 1.75; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.35em; margin-bottom: 1.4em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--gold-600); }
.prose a { color: var(--gold-600); text-decoration: underline; }
.prose blockquote {
  margin: 2em 0; padding: .25em 0 .25em 1.5rem;
  border-left: 2px solid var(--gold-500);
  font-family: var(--ff-serif); font-size: 1.2rem; line-height: 1.55; color: var(--ink-900);
}
.prose em { color: var(--slate-500); }
.prose strong { color: var(--ink-900); }

.lede { font-size: var(--fs-lead); color: var(--slate-500); }

/* Editorial split (about / meet mahmoud) */
.editorial { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) {
  .editorial { grid-template-columns: 1fr 1.25fr; }
  .editorial--reverse { grid-template-columns: 1.25fr 1fr; }
  .editorial--reverse .editorial__media { order: 2; }
  .editorial__media.is-sticky { position: sticky; top: 120px; }
}
.editorial__media img { width: 100%; }
.editorial__frame { position: relative; border: 1px solid var(--line); padding: .6rem; }
.editorial__frame::after {
  content: ""; position: absolute; left: -.6rem; top: -.6rem;
  width: 45%; height: 45%; border-left: 2px solid var(--gold-500); border-top: 2px solid var(--gold-500);
}
@media (max-width: 719px) {
  .editorial__frame::after { left: 0; top: 0; }
}
.editorial__caption { margin-top: .8rem; font-size: var(--fs-xs); color: var(--slate-400); }

/* Offset feature band */
.feature-band { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.feature-band__media { background: var(--mist-2); min-height: 260px; }
.feature-band__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-band__body { padding: clamp(1.5rem, 3vw, 3rem); background: var(--white); }
@media (min-width: 900px) {
  .feature-band { grid-template-columns: .85fr 1.15fr; }
  .feature-band--reverse .feature-band__media { order: 2; }
}

/* Service block — alternating editorial rows */
.service {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.service:first-of-type { border-top: 0; padding-top: 0; }
.service__index {
  font-family: var(--ff-serif); font-size: 2.5rem; line-height: 1;
  color: var(--gold-500); font-variant-numeric: tabular-nums;
}
.service__who {
  margin-top: 1.4rem; padding: 1rem 1.2rem; background: var(--mist); border-left: 2px solid var(--gold-500);
  font-size: var(--fs-sm); color: var(--slate-600);
}
.service__who strong {
  display: block; margin-bottom: .2rem; color: var(--ink-900);
  font-size: var(--fs-kicker); letter-spacing: .12em; text-transform: uppercase;
}
.service__steps { list-style: none; padding: 0; margin: 1.4rem 0 0; counter-reset: s; display: grid; gap: .6rem; }
.service__steps li {
  counter-increment: s; display: flex; gap: .8rem; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--slate-600); margin: 0;
}
.service__steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--ff-serif); font-size: .9rem; font-weight: 600; color: var(--gold-600);
  min-width: 1.6rem; padding-top: .1rem;
}
@media (min-width: 900px) { .service { grid-template-columns: 4rem 1fr 1fr; } }

/* ---------------------------------------------------------------------
   21. COURSE PAGE
   --------------------------------------------------------------------- */
.crumbs { font-size: var(--fs-xs); margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.55); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.3); }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.crumbs a:hover { color: var(--gold-400); }
.crumbs [aria-current] { color: #fff; }
.crumbs--light li { color: var(--slate-400); }
.crumbs--light li + li::before { color: var(--line); }
.crumbs--light a { color: var(--slate-500); }
.crumbs--light [aria-current] { color: var(--ink-900); }

.course-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1024px) { .course-layout { grid-template-columns: minmax(0,1fr) 380px; } }

.course-block { padding-block: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--line); }
.course-block:first-child { border-top: 0; padding-top: 0; }
.course-block h2 { font-size: var(--fs-h3); margin-bottom: 1.2rem; }

.enquiry-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
@media (min-width: 1024px) { .enquiry-card { position: sticky; top: 116px; } }
.enquiry-card__head { padding: 1.4rem 1.5rem; background: var(--ink-900); color: #fff; }
.enquiry-card__head h2 { font-size: 1.3rem; color: #fff; margin-bottom: .3rem; }
.enquiry-card__head p { font-size: var(--fs-xs); color: #A79C8E; margin: 0; }
.enquiry-card__body { padding: 1.5rem; }
.enquiry-card__usp {
  list-style: none; padding: 1.1rem 1.5rem; margin: 0;
  background: var(--mist); border-top: 1px solid var(--line);
  display: grid; gap: .45rem; font-size: var(--fs-xs); color: var(--slate-600);
}
.enquiry-card__usp li { display: flex; gap: .5rem; align-items: center; margin: 0; }
.enquiry-card__usp .icon { width: 1rem; height: 1rem; color: var(--gold-600); }

/* Mobile sticky CTA bar for course pages */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
  display: flex; gap: .6rem; align-items: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px -20px rgba(18,16,13,.5);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__meta { flex: 1; min-width: 0; }
.sticky-cta__meta strong { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta__meta span { font-size: var(--fs-xs); color: var(--slate-500); }
@media (min-width: 1024px) { .sticky-cta { display: none !important; } }
body.has-sticky-cta .ask-mahmoud { bottom: 5.5rem; }

.career-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .career-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.career {
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.25rem;
  background: var(--white);
  transition: border-color var(--dur) var(--ease);
}
.career:hover { border-color: var(--gold-400); }
.career h3 { font-size: 1.075rem; margin-bottom: .25rem; }
.career p { font-size: var(--fs-xs); color: var(--slate-500); margin: 0; }
.career__band { margin-top: .7rem; font-size: var(--fs-xs); font-weight: 600; color: var(--gold-600); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   22. CAREER PATHWAYS (ladder)
   --------------------------------------------------------------------- */
.ladder-picker { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.ladder-picker button {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.15rem;
  font-family: var(--ff-sans); font-size: var(--fs-sm); font-weight: 600;
  background: var(--white); color: var(--slate-600);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ladder-picker button .icon { width: 1.05rem; height: 1.05rem; color: var(--gold-600); }
.ladder-picker button:hover { border-color: var(--gold-400); }
.ladder-picker button[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.ladder-picker button[aria-pressed="true"] .icon { color: var(--gold-400); }

.ladder { display: grid; gap: 0; position: relative; }
.ladder__step {
  position: relative; display: grid; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--line);
}
.ladder__step:first-child { border-top: 0; }
.ladder__rank {
  font-family: var(--ff-serif); font-size: 2rem; line-height: 1; color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}
.ladder__title { font-size: var(--fs-h4); margin-bottom: .3rem; }
.ladder__title a { text-decoration: none; }
.ladder__roles { font-size: var(--fs-sm); color: var(--slate-500); margin-bottom: .8rem; }
@media (min-width: 860px) { .ladder__step { grid-template-columns: 3.5rem 1.35fr 1fr; align-items: center; } }
.ladder__empty { padding: 2rem; background: var(--mist); text-align: center; color: var(--slate-500); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------
   23. POSTS
   --------------------------------------------------------------------- */
.postcard { display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.postcard:hover { transform: translateY(-4px); border-color: var(--gold-400); box-shadow: 0 18px 44px -26px rgba(168,132,47,.55); }
.postcard__media { aspect-ratio: 16 / 9; background: var(--mist-2); overflow: hidden; }
.postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.postcard:hover .postcard__media img { transform: scale(1.04); }
.postcard__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.postcard__title { font-size: var(--fs-h4); margin: .6rem 0 .5rem; }
.postcard__title a { text-decoration: none; }
.postcard__title a::after { content: ""; position: absolute; inset: 0; }
.postcard__excerpt { font-size: var(--fs-sm); color: var(--slate-500); flex: 1; }
.postcard__foot { margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--slate-400); }

.article-head { max-width: 68ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--fs-xs); color: var(--slate-400); margin-bottom: 1.5rem; }
.article-cover { margin-block: clamp(2rem, 4vw, 3rem); }
.article-cover img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }

/* ---------------------------------------------------------------------
   24. RESOURCES
   --------------------------------------------------------------------- */
.resource {
  display: flex; gap: 1.1rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem;
  background: var(--white); text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.resource:hover { transform: translateY(-3px); border-color: var(--gold-400); color: inherit;
  box-shadow: 0 18px 44px -26px rgba(168,132,47,.55); }
.resource__icon { width: 44px; height: 44px; flex: none; display: grid; place-content: center;
  background: var(--mist); color: var(--gold-600); }
.resource h3 { font-size: 1.075rem; margin-bottom: .3rem; }
.resource p { font-size: var(--fs-sm); color: var(--slate-500); margin: 0; }
.resource__ext { font-size: var(--fs-xs); color: var(--slate-400); margin-top: .5rem; display: flex; align-items: center; gap: .3rem; }

/* Printable checklist */
.print-doc { border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); }
.print-doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  padding-bottom: 1.25rem; border-bottom: 2px solid var(--gold-500); margin-bottom: 1.75rem; flex-wrap: wrap; }
.print-doc ol { counter-reset: d; list-style: none; padding: 0; }
.print-doc ol li { counter-increment: d; display: flex; gap: 1rem; align-items: flex-start;
  padding: .85rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.print-doc ol li::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: .28rem;
  border: 1.5px solid var(--slate-400);
}

/* ---------------------------------------------------------------------
   25. CTA BAND
   --------------------------------------------------------------------- */
.ctaband { background: var(--ink-900); color: #EDE7DE; position: relative; overflow: hidden; }
.ctaband::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50rem 30rem at 78% 120%, rgba(201,162,75,.2), transparent 62%);
}
.ctaband > * { position: relative; }
.ctaband__inner { display: grid; gap: var(--gap); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.ctaband h2 { color: #fff; margin-bottom: .5rem; }
.ctaband p { color: #B7ADA0; max-width: 52ch; }
@media (min-width: 900px) { .ctaband__inner { grid-template-columns: 1.4fr auto; } }

/* ---------------------------------------------------------------------
   26. FOOTER
   --------------------------------------------------------------------- */
.footer { background: var(--ink-900); color: #A79C8E; font-size: var(--fs-sm); padding-top: clamp(3rem, 6vw, 5rem); }
.footer__top { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.footer__brand { max-width: 38ch; }
.footer__pitch { font-family: var(--ff-serif); font-size: 1.15rem; color: #F0EAE1; margin: 1.2rem 0 .8rem; line-height: 1.4; }
.footer__note { font-size: var(--fs-xs); line-height: 1.7; }
.footer__usp { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.footer__usp li { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: var(--fs-xs); color: #C9C0B4; }
.footer__usp .icon { width: .95rem; height: .95rem; color: var(--gold-500); }
.footer__nav { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.footer__heading {
  font-family: var(--ff-sans); font-size: var(--fs-kicker); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500);
  margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-dark);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: .55rem; }
.footer__col a { text-decoration: none; font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--gold-400); }
.footer__contact li, .footer__contact a { display: flex; align-items: center; gap: .55rem; }
.footer__contact .icon { width: 1.05rem; height: 1.05rem; color: var(--gold-500); flex: none; }
.footer__email { word-break: break-all; }
.footer__hours { margin-top: 1.1rem; font-size: var(--fs-xs); line-height: 1.9; }
.footer__disclaimer {
  padding: 1.4rem 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
}
.footer__disclaimer p { font-size: var(--fs-xs); line-height: 1.7; color: #8C8175; margin: 0; max-width: 100ch; }
.footer__disclaimer strong { color: var(--gold-500); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-block: 1.5rem; font-size: var(--fs-xs);
}
.footer__base p { margin: 0; }
/* Build credit. Sits after the copyright on one line, drops beneath it
   on narrow screens rather than crushing the copyright. */
.footer__credit { display: inline-block; margin-left: .35rem; opacity: .75; }
.footer__credit a { text-decoration: none; border-bottom: 1px solid rgba(201,162,75,.45); }
.footer__credit a:hover { color: var(--gold-400); border-bottom-color: var(--gold-400); }
@media (max-width: 559px) { .footer__credit { display: block; margin-left: 0; margin-top: .4rem; } }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--gold-400); }

@media (min-width: 760px)  { .footer__nav { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: .9fr 1.6fr; } }

/* ---------------------------------------------------------------------
   27. ASK MAHMOUD FLOAT
   --------------------------------------------------------------------- */
.ask-mahmoud {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 870;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.1rem;
  background: var(--ink-900); color: #fff; text-decoration: none;
  border: 1px solid var(--gold-600); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); font-weight: 600;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              bottom var(--dur) var(--ease);
}
.ask-mahmoud .icon { color: var(--gold-500); width: 1.2rem; height: 1.2rem; }
.ask-mahmoud:hover { transform: translateY(-2px); background: var(--gold-500); color: var(--ink-900); }
.ask-mahmoud:hover .icon { color: var(--ink-900); }
.ask-mahmoud sup { font-size: .55em; top: -.5em; }
@media (max-width: 560px) {
  .ask-mahmoud__text { display: none; }
  .ask-mahmoud { padding: .85rem; }
}

/* ---------------------------------------------------------------------
   28. PAGINATION + MISC
   --------------------------------------------------------------------- */
.pager { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; }
.pager a, .pager span {
  min-width: 44px; min-height: 44px; display: grid; place-content: center; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; font-size: var(--fs-sm);
}
.pager a:hover { border-color: var(--gold-400); }
.pager .is-current { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.filter-chips button {
  min-height: 44px; padding: .5rem 1.05rem;
  font-family: var(--ff-sans); font-size: var(--fs-sm); font-weight: 600;
  background: var(--white); color: var(--slate-600);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter-chips button:hover { border-color: var(--gold-400); }
.filter-chips button[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--gold-400); }

.notice {
  border-left: 2px solid var(--gold-500); background: var(--mist);
  padding: 1.1rem 1.35rem; font-size: var(--fs-sm); color: var(--slate-600);
}
.notice strong { color: var(--ink-900); }

.tag-note {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); color: var(--slate-400);
}

/* Search results page.
   Scoped to .pagehero rather than .pagehero--search so any search bar
   dropped into a dark hero — the 404 page has one too — inherits the
   light-on-dark treatment without a second set of rules. */
.searchbar--hero { margin-top: 1.5rem; max-width: 46rem; }
.pagehero .searchbar input[type="search"] {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff;
}
.pagehero .searchbar input[type="search"]::placeholder { color: rgba(255,255,255,.55); }
.pagehero .searchbar input[type="search"]:focus {
  border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(201,162,75,.28);
}
.pagehero .searchbar__icon { color: rgba(255,255,255,.55); }
.searchhero__count { margin-top: 1rem; }

.searchsuggest {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.searchsuggest li { margin: 0; }
.searchsuggest a {
  display: inline-block; padding: .5rem 1rem;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.searchsuggest a:hover { border-color: var(--gold-500); background: var(--gold-100); }

.resultlist { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.resultlist__item {
  margin: 0; padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.resultlist__item:last-child { border-bottom: 0; }
.resultlist__kind {
  margin: 0 0 .3rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold-600);
}
.resultlist h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.resultlist h3 a { color: var(--ink-900); text-decoration: none; }
.resultlist h3 a:hover { color: var(--gold-600); text-decoration: underline; }
.resultlist__snippet { margin: 0 0 .4rem; color: var(--slate-600); }
.resultlist__url {
  margin: 0; font-size: var(--fs-xs); color: var(--slate-400);
  overflow-wrap: anywhere;
}

/* Matched terms, in results and snippets. */
mark {
  background: var(--gold-100); color: var(--ink-900);
  padding: 0 .1em; border-radius: 2px;
}

/* Policy tables — the cancellation tiers and worked examples.
   Narrow screens scroll the table sideways rather than crushing the
   columns, because a fee schedule that wraps is a fee schedule that
   gets misread. */
.table-scroll { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }

.policy-table {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  font-size: var(--fs-sm); background: var(--white);
  border: 1px solid var(--line);
}
.policy-table caption {
  caption-side: top; text-align: left; padding-bottom: .7rem;
  font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate-400); font-weight: 600;
}
.policy-table th, .policy-table td {
  padding: .85rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.policy-table thead th {
  background: var(--ink-900); color: var(--gold-400);
  font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; border-bottom: 0;
}
.policy-table tbody tr:last-child th,
.policy-table tbody tr:last-child td { border-bottom: 0; }
.policy-table tbody tr:nth-child(even) { background: var(--mist); }
.policy-table tbody th { font-weight: 600; color: var(--ink-900); }
.policy-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.policy-table .num--keep { color: var(--crimson-600); font-weight: 600; }
.policy-table .num--back { color: var(--success); font-weight: 600; }

/* ---------------------------------------------------------------------
   29. ANIMATION HOOKS
   Elements are visible by default; JS adds .anim-ready only when GSAP
   is present, so a JS failure can never leave the page blank.
   --------------------------------------------------------------------- */
.anim-ready [data-anim] { opacity: 0; transform: translateY(24px); }
.anim-ready [data-anim-line] { transform: scaleX(0); }
@media (max-width: 899px) { .anim-ready [data-anim-line] { transform: scaleY(0); } }

/* ---------------------------------------------------------------------
   30. REDUCED MOTION — kill everything
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .anim-ready [data-anim] { opacity: 1 !important; transform: none !important; }
  .anim-ready [data-anim-line] { transform: none !important; }
  .catcard:hover .catcard__media img,
  .postcard:hover .postcard__media img { transform: none; }
}

/* ---------------------------------------------------------------------
   31. PRINT (the RPL checklist is meant to be printed)
   --------------------------------------------------------------------- */
@media print {
  .utility, .masthead, .mobile, .footer, .ask-mahmoud, .sticky-cta,
  .btn, .ctaband, .no-print { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .print-doc { border: 0; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 0; }
}