/* ==========================================================================
   GlobalMedAcademy — Design System
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --brand:        #1257E0;
  --brand-600:    #0F4CC7;
  --brand-700:    #0C3EA3;
  --brand-300:    #74A5F7;
  --brand-100:    #DCE8FF;
  --brand-50:     #EEF4FF;
  --cyan:         #29A9E1;

  /* Ink */
  --navy:         #0F2557;
  --navy-deep:    #0C1F52;
  --ink:          #1B2A4A;
  --body:         #4A5878;
  --muted:        #78859F;

  /* Surface */
  --white:        #FFFFFF;
  --surface:      #FFFFFF;
  --tint:         #F1F6FF;
  --tint-2:       #F7FAFF;
  --line:         #E3EAF6;
  --line-soft:    #EDF2FA;

  /* Accent */
  --star:         #F6A609;
  --amber:        #F2A81D;
  --amber-dark:   #DE961A;
  --success:      #17A673;

  /* Type */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(15, 37, 87, .06), 0 1px 3px rgba(15, 37, 87, .04);
  --sh:    0 2px 6px rgba(15, 37, 87, .06), 0 8px 20px rgba(15, 37, 87, .05);
  --sh-md: 0 4px 12px rgba(15, 37, 87, .08), 0 16px 36px rgba(15, 37, 87, .08);
  --sh-lg: 0 10px 24px rgba(15, 37, 87, .10), 0 28px 60px rgba(15, 37, 87, .12);

  /* Layout */
  --container: 1180px;
  --header-height: 64px;
  --header-h: var(--header-height);   /* alias, kept for existing rules */
  --course-tint: #F3F8FF;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow-x:hidden here — it turns <body> into a scroll container and
     silently breaks `position: sticky` for the course enrollment card.
     Horizontal overflow is prevented per-component instead. */
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
/* height:auto stops the HTML width/height attributes from stretching an
   image when CSS only constrains its width. Class rules that deliberately set
   a height (media slots, logo tiles) still win on specificity. */
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.section { padding: 68px 0; }
.section--tight { padding: 48px 0; }
.section--tint { background: var(--tint-2); }

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

.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}

.section-head h2 { font-size: clamp(26px, 3.3vw, 34px); }

.section-head p {
  margin-top: 12px;
  font-size: 16px;
  color: var(--body);
}

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

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: all .2s var(--ease);
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(18, 87, 224, .25);
}
.btn-primary:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(18, 87, 224, .32);
}

.btn-outline {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline:hover {
  background: var(--brand-50);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--brand-300); color: var(--brand); }

.btn-white {
  background: #fff;
  color: var(--brand);
}
.btn-white:hover { background: var(--brand-50); transform: translateY(-1px); }

.btn-on-navy {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn-on-navy:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Amber CTA — the primary action on program cards. */
.btn-amber {
  background: var(--amber);
  color: var(--navy);
  font-weight: 700;
}
.btn-amber:hover {
  background: var(--amber-dark);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(222, 150, 26, .35);
}

.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-lg { padding: 14px 30px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 16px rgba(15, 37, 87, .06);
}

.header-inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: baseline;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
  justify-self: start;
}
.brand em { font-style: normal; color: var(--cyan); }

/* The wordmark is now artwork, not text. It is a stacked two-line lockup, so
   the height is capped rather than the width — that keeps both lines legible
   inside a 64px header and stops the mark dominating the row. */
.brand img {
  height: 42px;
  width: auto;
  max-width: none;
}
@media (max-width: 560px) {
  .brand img { height: 34px; }
}
.footer-brand img {
  height: 44px;
  width: auto;
  max-width: none;
}

/* Centred nav — compact */
.main-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
  padding: 6px 0;
  transition: color .18s var(--ease);
  white-space: nowrap;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--ease);
}
.main-nav a:hover { color: var(--brand); }
.main-nav a:hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--brand); }

/* The CTA lives in .header-actions on desktop and inside the drawer on mobile. */
.main-nav .btn { display: none; }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background: #F7FAFF;
  overflow: hidden;
}

/* Full-bleed hero photograph. The artwork carries its own blue/teal shapes and
   leaves the left third open for copy, so it is anchored right and covered by
   a horizontal white scrim that keeps the headline legible. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored top so the crop only removes floor, never the subject's head. */
  object-position: right 5%;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .94) 30%,
    rgba(255, 255, 255, .62) 46%,
    rgba(255, 255, 255, .12) 60%,
    rgba(255, 255, 255, 0) 72%
  );
}

.hero > .container { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 460px;
  padding: 40px 0 32px;
}

/* `cover` scales the photo with the hero's WIDTH, so a fixed height crops more
   and more as the screen widens. Tying the height to vw keeps the crop constant
   (~770 of the photo's 941 rows) at every desktop size, which keeps the
   subject's crossed arms in frame instead of cutting mid-forearm. */
@media (min-width: 900px) {
  .hero-inner { min-height: clamp(460px, 37vw, 660px); }
}

.hero h1 {
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.1;
  margin-bottom: 18px;
  max-width: 11ch;
}

.hero-sub {
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 44ch;
  margin-bottom: 28px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}
.hero-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.hero-check svg { color: var(--brand); flex: none; }

/* Hero visual — now only holds the floating rating card; the doctor and the
   blue shapes come from the hero photograph itself. */
.hero-visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 440px;
}

.hero-rating {
  position: absolute;
  right: 0;
  bottom: 74px;
  z-index: 3;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 16px 22px;
  text-align: center;
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-rating-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.hero-rating-top svg { color: var(--brand); }
.hero-rating-score {
  font-size: 27px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
}
.hero-rating-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--body);
  margin-top: 2px;
}
.stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 6px;
  color: var(--star);
}

/* ---------- 7. Trust bar ---------- */
.trustbar { border-top: 1px solid var(--line-soft); padding: 34px 0 38px; background: #fff; }
.trustbar h3 {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 24px;
}
/* ---- Trust strip: continuous logo slider ----
   The track holds the logo list twice and translates by exactly -50%, so the
   second copy lands where the first began and the loop never jumps. That only
   works if every item contributes identical width, which is why the spacing is
   item padding rather than `gap` — `gap` adds one fewer gap than items and
   would throw the 50% out. */
.trust-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tm-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tm-scroll 45s linear infinite;
}
@keyframes tm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trust-marquee:hover .tm-track,
.trust-marquee:focus-within .tm-track { animation-play-state: paused; }

.tm-item {
  flex: none;
  width: 212px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 240;
  object-fit: contain;
  opacity: .9;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.tm-item:hover img { opacity: 1; transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .tm-track { animation: none; }
  .trust-marquee { overflow-x: auto; }
}

@media (max-width: 620px) {
  .tm-item { width: 158px; padding: 0 16px; }
}

.partner-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.partner {
  display: flex;
  align-items: center;
  gap: 11px;
  justify-content: center;
  padding: 6px 12px;
  border-left: 1px solid var(--line-soft);
  filter: grayscale(1);
  opacity: .72;
  transition: opacity .22s var(--ease), filter .22s var(--ease);
}
.partner:first-child { border-left: 0; }
.partner:hover { opacity: 1; filter: grayscale(0); }
.partner-mark { flex: none; color: var(--muted); }
.partner span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.32;
  max-width: 108px;
}

/* ---------- 8. Program tabs + cards ---------- */
.tabs {
  display: inline-flex;
  padding: 5px;
  background: var(--tint);
  border-radius: var(--r-pill);
  margin: 0 auto 34px;
  gap: 4px;
}
.tabs-wrap { display: flex; justify-content: center; max-width: 100%; }
.tab {
  padding: 10px 26px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
  transition: all .22s var(--ease);
  white-space: nowrap;
}
.tab:hover { color: var(--brand); }
.tab.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(18, 87, 224, .3);
}

/* Card */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ---- Program card ----------------------------------------------------
   Shared by the homepage grid, the programs listing and the related strip,
   so this one block controls the card everywhere on the site. */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-100);
}

.pcard-media {
  position: relative;
  display: block;
  margin: 10px 10px 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--tint);
}
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.05); }

/* CPD pill sits on the artwork, top right */
.pcard-cpd {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(15, 37, 87, .16);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.pcard-cpd svg { color: var(--brand); flex: none; }

.pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 18px;
  text-align: left;
}

.pcard h3 {
  font-size: 20px;
  line-height: 1.3;
  /* reserve two lines so the meta row aligns across cards */
  min-height: 2.6em;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.pcard h3 a { color: inherit; display: block; }
.pcard:hover h3 a { color: var(--brand); }

.pcard-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: nowrap;
}
.pcard-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  /* the duration must never wrap onto a second line; the specialty
     truncates with an ellipsis instead */
  white-space: nowrap;
  min-width: 0;
}
.pcard-meta-item:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.pcard-meta-item:last-of-type { flex: none; }
.pcard-meta-item svg { color: var(--brand); flex: none; }
.pcard-meta-sep { width: 1px; height: 17px; background: var(--line); flex: none; }

/* Knowledge partner panel */
.pcard-kp {
  margin-top: auto;
  background: var(--brand-50);
  border-radius: var(--r);
  padding: 14px 16px 15px;
  margin-bottom: 16px;
}
.pcard-kp h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 11px;
}
.pcard-kp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
}
/* The chips SHARE the row rather than carrying fixed widths: `flex: 1 1 0` with
   `min-width: 0` divides whatever space exists between however many logos the
   card has, so the row can never overflow the blue panel no matter the count.
   Hardcoded widths did overflow — they were sized against a wider row than the
   card actually gives. Height is pinned at 52px so every card stays the same
   height, and max-width stops a lone logo stretching the full row. */
.pcard-kp-row img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
  height: 52px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid rgba(15, 37, 87, .07);
  border-radius: 6px;
  padding: 5px 7px;
}
/* Three to a row leaves each chip narrow, so the inner padding tightens to give
   the artwork back the width it would otherwise lose to whitespace. */
.pcard-kp-row img:first-child:nth-last-child(3),
.pcard-kp-row img:first-child:nth-last-child(3) ~ img { padding: 4px 4px; }

@media (max-width: 900px) {
  .pcard h3 { font-size: 18px; }
  }

.card-grid-foot { display: flex; justify-content: center; margin-top: 34px; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- 9. Stats ---------- */
.stats {
  background: var(--tint);
  border-radius: var(--r-lg);
  padding: 26px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  border-left: 1px solid rgba(18, 87, 224, .12);
  padding: 4px 12px;
}
.stat:first-child { border-left: 0; }
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--brand);
  flex: none;
  box-shadow: var(--sh-sm);
}
.stat-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--body); }

/* ---------- 10. Network panel ---------- */
.netpanel {
  background: var(--tint);
  border-radius: var(--r-xl);
  padding: 30px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 42px;
  align-items: center;
}
.netpanel-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
}
/* 16:9 so the group photograph is never cropped at the sides — every face in
   the frame stays visible whatever height the text column ends up being. */
.netpanel-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.netpanel h2 { font-size: clamp(23px, 2.7vw, 29px); margin-bottom: 12px; }
.netpanel > div > p { font-size: 15px; margin-bottom: 22px; max-width: 46ch; }

.net-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  margin-bottom: 26px;
}
.net-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.net-item svg { color: var(--brand); flex: none; }

/* ---------- 11. Testimonials ---------- */
.tcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.tcard:hover { box-shadow: var(--sh); transform: translateY(-3px); }
.tcard-quote { color: var(--brand-300); margin-bottom: 12px; }
.tcard p {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--body);
  flex: 1;
  margin-bottom: 20px;
}
.tcard-person { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  flex: none;
}
.tcard-name { display: block; font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.35; }
.tcard-role { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.tslider { overflow: hidden; }
.ttrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 52px) / 3);
  gap: 26px;
  transition: transform .5s var(--ease);
}
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: all .25s var(--ease);
}
.dot.is-active { background: var(--brand); width: 22px; border-radius: var(--r-pill); }

/* ---------- 12. CTA band ---------- */
.ctaband {
  background: linear-gradient(120deg, #0C1F52, #14307C);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ctaband::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 169, 225, .2), transparent 70%);
  top: -160px;
  right: -60px;
}
.ctaband h2 { color: #fff; font-size: clamp(23px, 2.7vw, 30px); max-width: 18ch; }
.ctaband p {
  color: rgba(255, 255, 255, .74);
  font-size: 14.5px;
  margin-top: 10px;
  max-width: 42ch;
}
.ctaband-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; }

/* ---------- 13. Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .68);
  padding: 46px 0 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap: 34px;
  padding-bottom: 36px;
}
.footer-brand {
  display: inline-flex;
  align-items: baseline;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 14px;
}
.footer-brand em { font-style: normal; color: var(--cyan); }
.footer-about { font-size: 13.5px; line-height: 1.72; max-width: 34ch; }

.footer-col h4 {
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -.01em;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .66);
  transition: color .18s var(--ease);
}
.footer-col a:hover { color: #fff; }

.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 13.5px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .42); }
.newsletter input:focus {
  outline: none;
  border-color: var(--brand-300);
  background: rgba(255, 255, 255, .12);
}
.newsletter button {
  width: 42px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  transition: background .2s var(--ease);
}
.newsletter button:hover { background: var(--brand-600); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
  transition: all .2s var(--ease);
}
.socials a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255, 255, 255, .6); transition: color .18s var(--ease); }
.footer-legal a:hover { color: #fff; }

.form-note { font-size: 12.5px; margin-top: 10px; }
.form-note.ok { color: #6EE7B7; }
.form-note.err { color: #FCA5A5; }

/* ---------- 14. Page hero (inner pages) ---------- */
.pagehero {
  background: linear-gradient(160deg, var(--tint) 0%, #fff 100%);
  padding: 52px 0 46px;
  border-bottom: 1px solid var(--line-soft);
}
.pagehero h1 { font-size: clamp(30px, 4vw, 42px); max-width: 18ch; }
.pagehero p { font-size: 16.5px; margin-top: 14px; max-width: 58ch; }
.pagehero--center { text-align: center; }
.pagehero--center h1, .pagehero--center p { margin-inline: auto; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}
.crumbs a:hover { color: var(--brand); }
.crumbs span { color: var(--navy); }
.crumbs .crumb-sep { color: var(--muted); font-weight: 500; }

/* ---------- 15. Filter bar ---------- */
.filterbar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin-bottom: 30px;
}
.search {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--tint-2);
  transition: all .2s var(--ease);
}
.search input:focus {
  outline: none;
  border-color: var(--brand-300);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 87, 224, .1);
}
.filter-select {
  padding: 11px 38px 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378859F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--brand-300); background-color: #fff; }
.result-count { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-left: auto; }

/* ---------- 16. Feature cards / generic content ---------- */
.fcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  height: 100%;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
}
.fcard:hover { box-shadow: var(--sh); transform: translateY(-3px); border-color: var(--brand-100); }
.fcard-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r);
  background: var(--brand-50);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.fcard h3 { font-size: 17px; margin-bottom: 9px; }
.fcard p { font-size: 14.5px; line-height: 1.7; }

.numcard { position: relative; }
.numcard-n {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
  background: var(--brand-50);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.prose { max-width: 760px; }
.prose h2 { font-size: 24px; margin: 34px 0 14px; }
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p { font-size: 15.5px; line-height: 1.78; margin-bottom: 14px; }
.prose ul { margin: 0 0 16px; padding-left: 4px; }
.prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 1.7;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.prose a { color: var(--brand); font-weight: 600; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--navy); font-weight: 700; }

/* ---------- 17. Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-item:last-child { border-bottom: 0; }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 24px;
  text-align: left;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.acc-head:hover { background: var(--tint-2); color: var(--brand); }
.acc-head svg { flex: none; color: var(--brand); transition: transform .3s var(--ease); }
.acc-item.is-open .acc-head { color: var(--brand); background: var(--tint-2); }
.acc-item.is-open .acc-head svg { transform: rotate(180deg); }
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s var(--ease);
}
.acc-panel-inner {
  padding: 0 24px 21px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--body);
}
.acc-panel-inner p + p { margin-top: 10px; }
.acc-panel-inner ol { padding-left: 20px; list-style: decimal; }
.acc-panel-inner ol li { margin-bottom: 7px; }

/* ---------- 18. Forms ---------- */
.formcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--sh-sm);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  background: var(--tint-2);
  transition: all .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select {
  appearance: none;
  cursor: pointer;
  background: var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378859F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-300);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(18, 87, 224, .1);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #E0484B; }
.field-err { display: none; font-size: 12px; color: #E0484B; margin-top: 5px; font-weight: 600; }
.field.has-error .field-err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.alert {
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
  display: none;
}
.alert.is-visible { display: block; }
.alert-ok { background: #E7F7F0; color: #0B6A48; border: 1px solid #B6E5D2; }
.alert-err { background: #FDECEC; color: #A32224; border: 1px solid #F5C3C4; }

/* ---------- 19. Program detail ---------- */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 342px;
  gap: 44px;
  align-items: start;
}
.pd-side { position: sticky; top: calc(var(--header-h) + 22px); }
.pd-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
}
.pd-card-media { aspect-ratio: 16/10; overflow: hidden; }
.pd-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-card-body { padding: 22px; }
.pd-facts { margin-bottom: 20px; }
.pd-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.pd-fact:last-child { border-bottom: 0; }
.pd-fact svg { color: var(--brand); flex: none; }
.pd-fact-k { color: var(--muted); font-weight: 600; }
.pd-fact-v { margin-left: auto; font-weight: 700; color: var(--navy); }

.modlist { display: grid; gap: 12px; }
.mod {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  background: #fff;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.mod:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); }
.mod-k {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mod-t { font-size: 15.5px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.mod-d { font-size: 14px; margin-top: 6px; }

/* ==========================================================================
   19b. Course detail — single shared grid
   --------------------------------------------------------------------------
   The hero and every main course section are children of ONE grid, so the
   sidebar can span them all. The sidebar is the sticky containing block: the
   card can travel from the hero title down to the end of the last course
   section, then stops. Testimonials, related programs, the closing CTA and
   the footer sit OUTSIDE this grid, which is what ends the sticky range.
   ========================================================================== */

.course-wrap { position: relative; }

/* Full-width tint behind the hero row. Height is synced to the hero column in
   main.js, because a viewport-width bleed would reintroduce horizontal scroll. */
.course-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--course-tint);
  border-bottom: 1px solid var(--line-soft);
  z-index: 0;
  pointer-events: none;
}

.course-topband {
  background: var(--course-tint);
  padding-top: 18px;
}
.course-topband .crumbs { margin-bottom: 12px; }

.course-layout {
  display: grid;
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track has an auto minimum, so
     any wide descendant would stretch the track past the container. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 0;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Left column — exactly six rows, matching the sidebar's `span 6`. */
.course-hero-col { grid-column: 1 / 9; padding-bottom: 40px; }
.course-block    { grid-column: 1 / 9; padding: 34px 0; border-top: 1px solid var(--line-soft); }
.course-block:first-of-type { border-top: 0; }

/* Let grid children shrink below their content's min-content width. */
.course-hero-col,
.course-block,
.course-sidebar { min-width: 0; }

/* ---- the two rules from the spec ---- */
.course-sidebar {
  grid-column: 9 / 13;
  grid-row: 1 / span 6;
  align-self: stretch;
}

.course-enrollment-card {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}
/* -------------------------------------- */

.course-enrollment-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
  z-index: 2;
}
.cec-media { aspect-ratio: 16/10; overflow: hidden; background: var(--tint); }
.cec-media img { width: 100%; height: 100%; object-fit: cover; }
.cec-body { padding: 20px; }
.cec-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.cec-mrp { font-size: 17px; font-weight: 600; color: var(--muted); text-decoration: line-through; }
.cec-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.cec-save { font-size: 11.5px; font-weight: 800; color: #0B6A48; background: #E7F7F0; border-radius: var(--r-pill); padding: 3px 9px; }
.cec-price sup { font-size: 15px; top: -.6em; }
.cec-cohort { font-size: 13.5px; font-weight: 600; color: var(--body); margin-top: 4px; }
.cec-date {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 12px 0 18px;
}
.cec-date svg { color: var(--brand); flex: none; }
.cec-actions { display: grid; gap: 10px; margin-bottom: 18px; }
.cec-perks { border-top: 1px solid var(--line-soft); padding-top: 14px; display: grid; gap: 11px; }
.cec-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.cec-perk svg { color: var(--brand); flex: none; }
.cec-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; }

/* ---- Course hero content ---- */
.course-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.course-hero-col h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; margin-bottom: 16px; }
.course-lede { font-size: 16px; line-height: 1.7; max-width: 52ch; margin-bottom: 22px; }

.course-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 28px; }
.course-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.course-meta-item svg { color: var(--brand); flex: none; }

.gains {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 30px;
}
.gains h3 { font-size: 15px; margin-bottom: 14px; }
.gains-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.gain {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}
.gain svg { color: var(--brand); flex: none; margin-top: 2px; }

.acad-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.acad-head h3 { font-size: 15px; }
/* Logo-only tiles — no captions. Each tile is a fixed box and the logo is
   drawn with `object-fit: contain`, so the supplied files can be any aspect
   ratio (these run from 1:1 to almost 7:1) without cropping or distortion. */
.acad-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.acad {
  width: calc(20% - 9.6px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  display: grid;
  place-items: center;
  min-height: 78px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.acad:hover {
  border-color: var(--brand-100);
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}
.acad-logo {
  width: 100%;
  height: 50px;
  object-fit: contain;
  object-position: center;
}

/* ---- Section tab nav ---- */
.course-tabs {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}
.course-tabs::-webkit-scrollbar { display: none; }
.course-tab {
  position: relative;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.course-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.course-tab:hover { color: var(--brand); }
.course-tab.is-active { color: var(--brand); }
.course-tab.is-active::after { transform: scaleX(1); }

.course-block h2 { font-size: 22px; margin-bottom: 16px; }
.course-block h3 { font-size: 16px; margin-bottom: 12px; }

/* ---- Highlights ---- */
.hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hl {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 14px;
  text-align: center;
  background: #fff;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.hl:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); }
.hl-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.hl span { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.4; display: block; }

/* ---- Audience / skills ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.ticklist { display: grid; gap: 10px; }
.ticklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
}
.ticklist svg { color: var(--brand); flex: none; margin-top: 3px; }

/* ---- Curriculum ---- */
.curr-summary {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
}
.curr-summary span { display: inline-flex; align-items: center; gap: 7px; }
.curr-summary svg { color: var(--brand); }

.curr { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.curr-item { border-bottom: 1px solid var(--line-soft); }
/* Only the first eight modules show; .show-all reveals the rest. */
.curr-item.is-extra { display: none; }
.curr.show-all .curr-item.is-extra { display: block; }
.curr-more {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.curr-more:hover { background: var(--brand-50); border-color: var(--brand-100); }
.curr-item:last-child { border-bottom: 0; }
.curr-head {
  width: 100%;
  display: grid;
  grid-template-columns: 88px 1fr auto 20px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-align: left;
  transition: background .2s var(--ease);
}
.curr-head:hover { background: var(--tint-2); }
.curr-item.is-open .curr-head { background: var(--tint-2); }
.curr-n { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.curr-t { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.curr-l { font-size: 12px; font-weight: 600; color: var(--muted); }
.curr-head svg { color: var(--brand); transition: transform .3s var(--ease); justify-self: end; }
.curr-item.is-open .curr-head svg { transform: rotate(180deg); }
.curr-panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
/* Initial open state for the first module. Once a header is clicked, the
   inline max-height set in main.js takes over. */
.curr-item.is-open .curr-panel { max-height: 420px; }
.curr-panel-inner { padding: 2px 18px 18px 120px; font-size: 14px; line-height: 1.7; color: var(--body); }

/* ---- Certificates (fellowship award + CPD accreditation) ---- */
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cert-grid--single { grid-template-columns: minmax(0, 520px); }

.cert-card {
  background: var(--tint);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cert-shot-img {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.cert-shot-img:hover { box-shadow: var(--sh); transform: translateY(-2px); }
/* The certificates are portrait A4 (1241x1755). A short landscape slot letter-
   boxed them into a thumbnail barely a third of the panel width, so the image
   keeps its own proportions here and is capped by height instead. */
.cert-shot-img img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  object-position: center;
}
.cert-card-body h3 { font-size: 16px; margin-bottom: 8px; }
.cert-card-body p { font-size: 14px; line-height: 1.65; }

/* ---- Faculty ---- */
.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fac {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  background: #fff;
  text-align: center;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.fac:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); }
.fac-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), var(--cyan));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  margin: 0 auto 12px;
}
.fac h4 { font-size: 15px; margin-bottom: 3px; }
.fac-q { font-size: 12px; font-weight: 700; color: var(--brand); }
.fac-r { font-size: 12.5px; color: var(--body); margin-top: 6px; line-height: 1.5; }
.fac-y { font-size: 12px; color: var(--muted); margin-top: 6px; font-weight: 600; }

.support-card {
  background: linear-gradient(140deg, var(--brand-50), #E9F6FD);
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
}
.support-card svg { color: var(--brand); flex: none; }
.support-card h4 { font-size: 14.5px; margin-bottom: 5px; }
.support-card p { font-size: 13.5px; line-height: 1.6; }

/* ---- Fees ---- */
.fee-band { text-align: center; margin-bottom: 20px; }
.fee-band .fee-amt {
  font-size: 30px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.03em;
}
.fee-band .fee-mrp { font-size: 21px; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.fee-band .fee-gst { font-size: 19px; color: var(--navy); }
.fee-band .fee-sub { font-size: 13.5px; color: var(--body); margin-top: 4px; }
.fee-plan {
  background: var(--tint);
  border-radius: var(--r);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fee-plan-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--sh-sm);
}
.fee-plan h4 { font-size: 15px; margin-bottom: 3px; }
.fee-plan p { font-size: 13.5px; line-height: 1.55; }
.fee-plan .btn { margin-left: auto; }

/* ---- Partner logo wall (Partner Network page) ---- */
.logo-group { margin-bottom: 40px; }
.logo-group:last-child { margin-bottom: 0; }
.logo-group-head { margin-bottom: 18px; }
.logo-group-head h3 { font-size: 19px; margin-bottom: 6px; }
.logo-group-head p { font-size: 14.5px; max-width: 62ch; }
.logo-group-count {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 800;
  vertical-align: middle;
}

/* Four across so twelve logos land as three clean rows, and each logo gets a
   large slot. `contain` keeps every aspect ratio intact inside it. */
/* Every logo file is normalised to an identical 600x300 canvas (see
   tools/normalize-logos.ps1), so a single 2:1 image box renders them all at
   exactly the same size regardless of the original artwork's shape. */
.logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.logo-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  min-height: 108px;
  display: grid;
  place-items: center;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.logo-tile:hover {
  border-color: var(--brand-100);
  box-shadow: var(--sh);
  transform: translateY(-3px);
}
.logo-tile img {
  /* Capped so the mark sits comfortably inside the tile rather than filling
     its full width — about half the size an uncapped logo rendered at. */
  width: 100%;
  max-width: 170px;
  aspect-ratio: 600 / 240;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Centred variant — used for a small group such as the single accreditation
   partner, where a left-aligned lone tile in a wide grid looks stranded. */
.logo-group--center .logo-group-head { text-align: center; }
.logo-group--center .logo-group-head p { margin-inline: auto; }
.logo-group--center .logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* The lone accreditation logo carries more weight than a wall entry, so it
   renders at twice the size of the standard tiles (170px -> 340px). */
.logo-group--center .logo-tile {
  width: 420px;
  max-width: 100%;
  min-height: 190px;
}
.logo-group--center .logo-tile img { max-width: 340px; }

@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .logo-wall { gap: 12px; }
  .logo-tile { padding: 12px; }
}

/* ---- Course detail responsive ---- */
@media (max-width: 1080px) {
  .course-layout { column-gap: 22px; }
  .acad { width: calc(25% - 9px); }
  .hl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Single column: the SAME card element moves directly below the hero
     content, and sticky is switched off. No second card is rendered. */
  .course-layout { grid-template-columns: minmax(0, 1fr); }

  .course-hero-col { grid-column: 1; order: 1; padding-bottom: 26px; }
  .course-sidebar {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    order: 2;
    margin-bottom: 8px;
  }
  .course-block { grid-column: 1; order: 3; }

  .course-enrollment-card { position: static; top: auto; }

  .course-hero-bg { display: none; }
  .course-wrap { background: var(--course-tint); }
  .course-blocks-bg { background: #fff; }

  .acad { width: calc(33.333% - 8px); }
  .cert-grid, .cert-grid--single { grid-template-columns: 1fr; }
  .cert-shot-img img { max-height: 520px; }
  .fac-grid { grid-template-columns: 1fr; }
  .curr-head { grid-template-columns: 74px 1fr auto 20px; gap: 10px; }
  .curr-panel-inner { padding-left: 18px; }
}

@media (max-width: 620px) {
  .gains-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .hl-grid { grid-template-columns: 1fr 1fr; }
  .acad-row { gap: 10px; }
  .acad { width: calc(50% - 5px); min-height: 66px; padding: 10px 12px; }
  .acad-logo { height: 40px; }
  .curr-head { grid-template-columns: 1fr auto 18px; gap: 8px; padding: 13px 14px; }
  .curr-n { display: none; }
  .curr-panel-inner { padding: 2px 14px 16px; }
  .fee-plan { flex-direction: column; align-items: flex-start; }
  .fee-plan .btn { margin-left: 0; width: 100%; }
  .course-meta { gap: 8px 16px; }
}

/* ---------- 20. Misc components ---------- */
.icon-list { display: grid; gap: 12px; }
.icon-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.65;
}
.icon-list svg { color: var(--brand); flex: none; margin-top: 4px; }

.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-100); }
.post-media { aspect-ratio: 16/9; overflow: hidden; background: var(--tint); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post:hover .post-media img { transform: scale(1.05); }
.post-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 9px;
}
.post h3 { font-size: 16.5px; line-height: 1.4; margin-bottom: 9px; }
.post p { font-size: 14px; line-height: 1.68; flex: 1; }
.post-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  gap: 14px;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--success);
}
.badge-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(23, 166, 115, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(23, 166, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 166, 115, 0); }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.split-media img { width: 100%; height: auto; }
.split h2 { font-size: clamp(23px, 2.7vw, 30px); margin-bottom: 14px; }
.split p { font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }

.contact-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-item svg { color: var(--brand); flex: none; margin-top: 3px; }
.contact-item h4 { font-size: 14.5px; margin-bottom: 4px; }
.contact-item p, .contact-item a { font-size: 14px; line-height: 1.68; }
.contact-item a:hover { color: var(--brand); }

.verify-result { display: none; margin-top: 22px; }
.verify-result.is-visible { display: block; }
.vr-box {
  border-radius: var(--r-lg);
  padding: 24px;
  border: 1px solid var(--line);
  background: #fff;
}
.vr-box.ok { border-color: #B6E5D2; background: #F4FCF8; }
.vr-box.no { border-color: #F5C3C4; background: #FEF7F7; }
.vr-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.vr-head h3 { font-size: 17px; }
.vr-row { display: flex; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.vr-row span { color: var(--muted); font-weight: 600; min-width: 160px; }
.vr-row strong { color: var(--navy); font-weight: 700; }

/* ---------- 20b. Advisor modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
/* `display: grid` above beats the UA stylesheet's [hidden] { display: none },
   which would otherwise leave an invisible full-screen overlay swallowing
   every click on the page. This rule is what actually hides it. */
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 31, 82, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.modal.is-open .modal-backdrop { opacity: 1; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 30px 30px 26px;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.modal.is-open .modal-panel { opacity: 1; transform: none; }

.modal-panel h2 { font-size: 23px; margin-bottom: 6px; }
.modal-lede { font-size: 14.5px; margin-bottom: 22px; }
.modal-note { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--body);
  background: var(--tint);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.modal-close:hover { background: var(--brand-50); color: var(--brand); }

@media (max-width: 620px) {
  .modal { padding: 14px; }
  .modal-panel { padding: 24px 20px 22px; border-radius: var(--r-lg); }
  .modal-panel h2 { font-size: 20px; }
}

/* ---------- 21. Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width: 1080px) {
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 13px; }
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
  .footer-news { grid-column: span 3; }
  .pd-layout { grid-template-columns: 1fr 300px; gap: 32px; }
}

@media (max-width: 900px) {
  .section { padding: 52px 0; }

  .nav-toggle { display: flex; justify-self: end; }
  .header-inner { grid-template-columns: 1fr auto; }
  .header-actions { display: none; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all .25s var(--ease);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .main-nav a {
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line-soft);
  }
  .main-nav a::after { display: none; }
  .main-nav .btn {
    display: inline-flex;
    margin-top: 16px;
    border-bottom: 0;
    justify-content: center;
    color: #fff;
  }

  /* Stacked: the photo becomes a soft backdrop behind left-aligned copy, so
     the scrim runs top-to-bottom instead of left-to-right. */
  .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 32px; }
  .hero h1 { max-width: none; }
  .hero-bg img { object-position: 78% top; }
  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .93) 60%,
      rgba(255, 255, 255, .86) 100%
    );
  }

  /* The rating card sits inline under the copy rather than floating. */
  .hero-visual {
    min-height: 0;
    order: 0;
    justify-content: flex-start;
  }
  .hero-rating {
    position: static;
    padding: 13px 20px;
    animation: none;
  }
  .hero-rating-score { font-size: 23px; }

  .partner-row { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
  .partner:nth-child(4) { border-left: 0; }

  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ttrack { grid-auto-columns: calc((100% - 26px) / 2); }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .stat:nth-child(3) { border-left: 0; }

  .netpanel { grid-template-columns: 1fr; gap: 26px; padding: 22px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .ctaband { grid-template-columns: 1fr; padding: 32px 26px; }
  .ctaband h2 { max-width: none; }

  .pd-layout { grid-template-columns: 1fr; }
  .pd-side { position: static; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-news, .footer-brand-col { grid-column: span 2; }
}

@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  .section { padding: 44px 0; }

  /* Two pill tabs do not fit side by side on a narrow phone. */
  .tabs-wrap {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-wrap::-webkit-scrollbar { display: none; }
  .tabs { margin-inline: auto; }
  .tab { padding: 9px 14px; font-size: 12.5px; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-visual { min-height: 300px; }
  .hero-blob { width: 240px; height: 240px; }
  .hero-rating { right: 0; bottom: 20px; }

  .partner-row { grid-template-columns: repeat(2, 1fr); }
  .partner { border-left: 0; }

  .card-grid, .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .ttrack { grid-auto-columns: 100%; }
  .net-list { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; justify-content: flex-start; }
  .field-row { grid-template-columns: 1fr; }
  .formcard { padding: 22px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-news, .footer-brand-col { grid-column: span 1; }
  .footer-bottom { justify-content: center; text-align: center; }
  .result-count { margin-left: 0; }
  .ctaband-actions { flex-direction: column; }
  .ctaband-actions .btn { width: 100%; }
}

/* ==========================================================================
   Floating WhatsApp button
   Sits above everything except the modal, which uses a higher z-index so the
   button cannot be tapped through an open overlay. The label collapses on
   small screens, leaving a circular icon that does not crowd the viewport.
   ========================================================================== */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px 0 15px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .38), 0 2px 6px rgba(15, 37, 87, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .46), 0 3px 8px rgba(15, 37, 87, .2);
  color: #fff;
}
.wa-fab:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.wa-fab svg { flex: 0 0 auto; }

@media (max-width: 720px) {
  .wa-fab {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }
  .wa-fab-label { display: none; }
}

/* The modal must always sit above the button. */
.modal { z-index: 1000; }

/* ==========================================================================
   Read-only program row in the advisor modal
   Shown instead of the program <select> when the enquiry comes from a course
   page, where the visitor has already chosen by clicking Enquire.
   ========================================================================== */
.field-context {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.field-context .ctx-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
}
.field-context .ctx-value {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

/* Honeypot: hidden from people, filled in by bots. Kept out of the accessibility
   tree as well, so a screen reader never announces it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact details under the footer brand, so the phone number is reachable from
   every page without hunting for the contact page. */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  transition: color .18s ease;
}
.footer-contact a:hover { color: #fff; }
.footer-contact svg { flex: 0 0 auto; opacity: .75; }

/* The verified certificate itself, shown beneath the record. Portrait A4, so
   the height is capped rather than the width. */
.vr-cert {
  display: block;
  margin-top: 18px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.vr-cert:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.vr-cert img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* A certificate uploaded as a PDF is embedded rather than shown as a picture. */
.vr-cert-pdf { padding: 0; overflow: hidden; }
.vr-cert-pdf object {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}
.vr-cert-fallback {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
}
.vr-cert-open { margin-top: 14px; }
@media (max-width: 720px) {
  .vr-cert-pdf object { height: 420px; }
}

/* ==========================================================================
   Shop — cart, sign in, account and payment result.

   These pages are rendered by PHP rather than built from the page templates,
   so they reuse the tokens and the button system above and add only the
   layout they need of their own.
   ========================================================================== */

.nav-cart, .nav-account { position: relative; }
.nav-cart svg, .nav-account svg { flex: none; }
/* The header now carries four actions. These two are secondary to Speak to an
   Advisor, so they are tightened up rather than given equal weight. */
.nav-cart, .nav-account { padding-left: 13px; padding-right: 13px; }

.shop-main { padding: calc(var(--header-h) + 40px) 0 64px; min-height: 60vh; }
.shop-foot {
  border-top: 1px solid var(--line);
  padding: 22px 0 34px;
  color: var(--muted);
  font-size: 13.5px;
  background: var(--tint-2);
}
.shop-foot p { margin: 4px 0; }
.shop-foot a { color: var(--brand); font-weight: 600; }
.shop-foot-links a { color: var(--muted); font-weight: 500; }

/* ---------- cart ---------- */
.cart-title { font-size: 30px; letter-spacing: -.02em; margin: 0 0 22px; color: var(--navy); }
.cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.cart-loading { color: var(--muted); }

.cart-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
}
.cart-item-img { border-radius: var(--r-sm); object-fit: cover; width: 120px; height: 80px; }
.cart-item-title { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.cart-item-title a { color: var(--navy); }
.cart-item-title a:hover { color: var(--brand); }
.cart-item-meta { margin: 0; color: var(--muted); font-size: 13px; }
.cart-item-price { text-align: right; display: grid; gap: 2px; }
.cart-item-mrp { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.cart-item-now { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.cart-item-off { color: var(--success); font-size: 12.5px; font-weight: 700; }
.cart-item-remove {
  justify-self: end;
  margin-top: 4px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
}
.cart-item-remove:hover { color: #B42318; text-decoration: underline; }

.cart-summary {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh-sm);
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.cart-summary h2 { margin: 0 0 14px; font-size: 17px; color: var(--navy); }
.cart-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--body); }
.cart-sum-total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.cart-summary form { margin-top: 14px; }
.cart-who { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.cart-assure { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.cart-assure li { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cart-assure a { color: var(--brand); font-weight: 600; }

.cart-empty { text-align: center; padding: 50px 20px; }
.cart-empty h2 { margin: 0 0 8px; color: var(--navy); }
.cart-empty p { color: var(--muted); margin: 0 0 18px; }

/* ---------- sign in and sign up ---------- */
.auth-wrap { max-width: 420px; margin: 0 auto; }
.auth-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-sm); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--tint); padding: 4px; border-radius: var(--r-sm); margin-bottom: 20px; }
.auth-tab { text-align: center; padding: 9px; border-radius: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.auth-tab.is-on { background: var(--white); color: var(--navy); box-shadow: var(--sh-sm); }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.auth-form input {
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
}
.auth-form input:focus { outline: none; border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
.auth-error { background: #FFF1F0; color: #B42318; border-radius: var(--r-sm); padding: 10px 12px; font-size: 13.5px; margin: 0 0 16px; }
.auth-note { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; }
.auth-note a { color: var(--brand); font-weight: 600; }
.auth-aside { text-align: center; color: var(--muted); font-size: 13px; margin-top: 16px; }

/* ---------- account ---------- */
.acct { max-width: 820px; margin: 0 auto; }
.acct-title { font-size: 28px; letter-spacing: -.02em; margin: 0 0 22px; color: var(--navy); }
.acct-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 18px; }
.acct-card h2 { margin: 0 0 14px; font-size: 17px; color: var(--navy); }
.acct-dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.acct-dl dt { color: var(--muted); }
.acct-dl dd { margin: 0; color: var(--navy); font-weight: 600; }
.acct-hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.acct-empty { color: var(--muted); }
.acct-empty a { color: var(--brand); font-weight: 600; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.acct-table th, .acct-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.acct-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.acct-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.acct-pill { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.acct-pill.is-paid { background: #E7F7EE; color: #137A43; }
.acct-pill.is-pending { background: #FFF6E5; color: #9A6700; }
.acct-pill.is-failed { background: #FFF1F0; color: #B42318; }

/* ---------- payment result ---------- */
.paystate { max-width: 560px; margin: 0 auto; text-align: center; }
.paystate h1 { font-size: 26px; letter-spacing: -.02em; color: var(--navy); margin: 0 0 10px; }
.paystate p { color: var(--body); }
.paystate-table { width: 100%; border-collapse: collapse; margin: 22px 0; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.paystate-table th, .paystate-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.paystate-table th { color: var(--muted); font-weight: 600; width: 45%; }
.paystate-table tr:last-child th, .paystate-table tr:last-child td { border-bottom: 0; }
.paystate-help { font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.paystate.is-paid h1 { color: #137A43; }

@media (max-width: 900px) {
  .cart-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 84px 1fr; }
  .cart-item-img { width: 84px; height: 60px; }
  .cart-item-price { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .acct-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .acct-dl dd { margin-bottom: 10px; }
}

/* Four actions is one too many for a 1024 wide header, which is where the
   nav and the buttons start to fight. Below that the two shop actions keep
   their icons and drop their words; the aria-label carries the meaning. */
@media (max-width: 1180px) {
  .header-actions .nav-cart-label,
  .header-actions .nav-account-label { display: none; }
  .header-actions .nav-cart,
  .header-actions .nav-account { padding-left: 11px; padding-right: 11px; }
}