/* Meridian Education — main layout & components */

:root {
  --blue: var(--c-accent);
  --white: var(--c-white);
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: var(--display);

  --layout-max: 1360px;
  --gutter: 40px;
  --gutter-sm: 22px;
  --page-pad-y: 2.9rem 0 clamp(4.25rem, 8vw, 6.75rem);
  --header-offset: 5.375rem;
  /* Height of whichever fixed bottom bar is on screen. Measured by js/mckinsey.js
     so the footer and the messenger button can clear a bar that has wrapped. */
  --bottom-bar-h: 3.25rem;
}

* , *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Clip sideways spill from absolute decorations without breaking position:sticky. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--c-surface);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Hero shell ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* mobile browser chrome must not add to the hero's height */
  margin-top: calc(var(--header-offset) * -1); /* sit under sticky frosted header */
  /* Extra 30px so vertical center includes top padding */
  padding-top: calc(var(--header-offset) + 90px);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 90% 10%, var(--c-hero-wash) 0%, transparent 55%),
    radial-gradient(70% 55% at 0% 100%, color-mix(in srgb, var(--c-accent) 8%, white) 0%, transparent 50%),
    var(--c-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

/* ---------- Header ---------- */
.mck-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 21px 0 17px;
  background: color-mix(in srgb, var(--c-surface) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.mck-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mck-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: -3px;
}

.hamburger {
  background: none;
  border: 0;
  /* 44×44 thumb target; negative margin keeps the header row from growing. */
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: -4px;
  color: var(--c-ink);
}
.hamburger__icon {
  display: block;
  overflow: visible;
}
.hamburger__bar {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.hamburger.open .hamburger__bar--1 { transform: translateY(8px) rotate(45deg); }
.hamburger.open .hamburger__bar--2 { opacity: 0; }
.hamburger.open .hamburger__bar--3 { transform: translateY(-8px) rotate(-45deg); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  color: inherit;
  transform: translateY(-1px);
}
.brand__mark {
  width: 38px;
  aspect-ratio: 519 / 427;
  display: block;
  flex-shrink: 0;
  transform: translateX(-2px);
  background-color: var(--c-accent);
  -webkit-mask-image: url("../assets/meridian-mark.png");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("../assets/meridian-mark.png");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.wordmark {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.0;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  transform: translateX(2px);
}
.wordmark__meridian {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 400;
}
.wordmark__education {
  display: block;
  white-space: nowrap;
}

.mck-header__nav { display: flex; align-items: center; padding-left: 4px; }
.mainnav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}
.mainnav > a,
.nav-item__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-body);
  padding: 6px 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.mainnav > a::after,
.nav-item__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.mainnav > a:hover,
.nav-item__trigger:hover,
.nav-item:hover > .nav-item__trigger,
.nav-item:focus-within > .nav-item__trigger {
  color: var(--c-accent);
}
.mainnav > a:hover::after,
.nav-item__trigger:hover::after,
.nav-item:hover > .nav-item__trigger::after,
.nav-item:focus-within > .nav-item__trigger::after {
  transform: scaleX(1);
}
.mainnav > a.is-active,
.nav-item__trigger.is-active { color: var(--c-accent); }
.mainnav > a.is-active::after,
.nav-item__trigger.is-active::after { transform: scaleX(1); }

.nav-item { position: relative; }
.nav-item__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--c-accent);
  transition: transform 0.2s ease;
}
.nav-item:hover .nav-item__caret,
.nav-item:focus-within .nav-item__caret {
  transform: rotate(180deg);
}
.nav-item__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  box-shadow: 0 14px 36px -18px rgba(23, 53, 54, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 60;
}
.nav-item:hover .nav-item__menu,
.nav-item:focus-within .nav-item__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item__menu a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 1.15rem;
  color: var(--c-body);
  white-space: normal;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-item__menu a:hover {
  background: var(--c-accent-pale);
  color: var(--c-ink);
}
.nav-item__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.25;
}
.nav-item__sub {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.35;
}
.nav-item__menu a:hover .nav-item__sub {
  color: var(--c-body);
}

.mck-header__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.btn-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.btn-get-started:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
}
.search-btn { background: none; border: 0; color: var(--c-ink); cursor: pointer; padding: 2px; display: inline-flex; }
.search-btn:hover { color: var(--blue); }

/* ---------- Hero copy + stats ---------- */
.hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--layout-max);
  width: 100%;
  margin: 0 auto;
  padding: 6vh var(--gutter);
  /* Left copy alone drives height; mentor is absolutely placed */
  display: block;
  transform: translateY(-10px);
}
.hero__copy {
  max-width: min(720px, calc(100% - 440px));
  min-width: 0;
  position: relative;
  z-index: 1;
  transform: translateY(-26px);
}
.hero__stats.is-hidden,
.hero__mentor.is-hidden { display: none !important; }

.hero__mentor {
  position: absolute;
  /* Tied to the gutter so the card starts exactly where .hero__copy stops,
     including below 960px where the gutter narrows. */
  right: calc(var(--gutter) + 80px);
  /* Keep flush with search bar: 2vh+11px above content bottom (padding-bottom is 6vh) */
  bottom: calc(8vh + 11px);
  margin: 0;
  width: 360px;
  max-width: calc(100% - 80px);
  z-index: 2;
}
.hero__mentor .mentor-card { width: 100%; }
.hero__mentor .mentor-card__media { height: 285px; }
.hero__mentor .mentor-card__body { padding: 1.1rem 1.25rem 1.2rem; }
.hero__mentor .mentor-card__photo {
  object-position: center 18%;
}
.mentor-card {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 36px -18px rgba(23, 53, 54, 0.28);
  color: var(--c-ink);
  text-decoration: none;
}
.mentor-card__media {
  height: 340px;
  overflow: hidden;
}
.mentor-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.mentor-card__body { padding: 1.25rem 1.35rem 1.4rem; }
.mentor-card__role {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.mentor-card__name {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.15;
}
.mentor-card__bio {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--c-body);
}
.mentor-card__creds {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.mentor-card__creds li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mentor-card__cred-num {
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}
.mentor-card__cred-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.hero__stats {
  position: absolute;
  right: calc(var(--gutter) + 20px);
  bottom: 6vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  width: 400px;
  max-width: calc(100% - 80px);
  margin: 0;
  z-index: 2;
  box-shadow: 0 10px 36px -18px rgba(23, 53, 54, 0.22);
}
.hero__title {
  margin: 0 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: calc(clamp(2.15rem, 5vw, 4.15rem) - 2pt);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-ink);
}
.hero__cta {
  display: inline-block;
  margin: 1.4rem 0 1.5rem;
  padding: 0.58rem 1.15rem;
  border-radius: 8px;
  border: 1.5px solid var(--c-accent);
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.hero__cta strong {
  font-weight: 800;
}
.hero__cta:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.hero__lead {
  margin: 0 0 1.75rem;
  max-width: 38ch;
  font-size: clamp(0.94rem, 1.4vw, 1.1rem);
  color: var(--c-muted);
  line-height: 1.55;
}

.hero-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 620px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: 0 10px 32px -18px rgba(23, 53, 54, 0.22);
  pointer-events: none;
}
.hero-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--c-surface);
  cursor: default;
  user-select: none;
}
.hero-search__icon {
  flex: none;
  margin-left: 16px;
  color: var(--c-text-dim);
}
.hero-search__display {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 0.9rem 0.95rem 0.65rem;
  font-family: var(--sans);
  font-size: 1.033rem;
  line-height: 1.35;
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-search__typed { color: var(--c-text-dim); }
.hero-search__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  background: var(--c-accent);
  vertical-align: text-bottom;
  animation: searchCaret 0.9s steps(1) infinite;
}
@keyframes searchCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.hero-search__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--c-accent);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 calc(1.5rem + 2px) 0 calc(1.5rem - 2px);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.18s ease;
}
.hero-search__btn:hover { background: var(--c-accent-hover); color: var(--white); }

.hero-stat {
  background: var(--c-surface);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.hero-stat__num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-accent);
}
.hero-stat__label {
  font-size: 0.9rem;
  color: var(--c-body);
  line-height: 1.35;
}

/* ---------- Side drawer (services) ---------- */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  width: min(20.5rem, 86vw);
  padding: calc(var(--header-offset) + 1.1rem) 1.65rem 1.75rem;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  box-shadow: 18px 0 48px -28px rgba(23, 53, 54, 0.45);
  transform: translateX(-105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, visibility 0.3s;
  overflow-y: auto;
}
.drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.drawer__label {
  margin: 1.35rem 0 0.2rem;
  padding-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
}
.drawer__label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.drawer__links a {
  padding: 0.85rem 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-border);
}
.drawer__links > a:first-child { border-top: 1px solid var(--c-border); }
.drawer__links a.is-active { color: var(--c-accent); }
.drawer__sub {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.15rem 0 0.55rem 0.85rem;
  border-bottom: 1px solid var(--c-border);
}
.drawer__sub a {
  padding: 0.55rem 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-body);
  border-bottom: 0;
}
.drawer__sub a:hover,
.drawer__sub a:focus-visible { color: var(--c-accent); }
/* "Our Services" sits above the injected sub-list; drop its rule so the sub-list owns it. */
.drawer__links > a[href="services.html"] { border-bottom: 0; }
.drawer__cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.15rem;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.drawer__cta:hover {
  background: var(--c-primary-deep);
  color: var(--c-on-accent);
  transform: translateY(-1px);
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(23, 53, 54, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.drawer-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.nav-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .mck-header__nav { display: none; }
}
@media (max-width: 860px) {
  .mck-header__inner { padding: 0 var(--gutter-sm); gap: 20px; }
  .hero__inner {
    padding: 4vh var(--gutter-sm);
    margin-top: 0;
  }
  .hero__copy { max-width: none; }
  .hero__title { font-size: calc(clamp(1.85rem, 8.5vw, 3.15rem) - 2pt); }
  .hero {
    min-height: 92vh;
    min-height: 92dvh;
  }
  .hero__stats,
  .hero__mentor {
    position: static;
    width: 100%;
    max-width: 380px;
    margin-top: 1.5rem;
  }
  .mentor-card__media { height: 300px; }
  .contact__aside { order: 2; }
  .contact__form { order: 1; }
}

/* Narrow tablets / large phones: the unused search control is the first thing
   that forces the header row wider than the viewport. */
@media (max-width: 720px) {
  .search-btn { display: none; }
}

/* Phones: the header row (menu, wordmark, CTA) is wider than the screen at its
   full size, which forces the whole page to scroll sideways. */
@media (max-width: 640px) {
  .mck-header__inner {
    padding: 0 16px;
    gap: 12px;
  }
  .mck-header__left { gap: 10px; }
  .brand {
    margin-left: 4px;
    gap: 8px;
  }
  .brand__mark { width: 32px; }
  .wordmark { font-size: 0.95rem; }
  .mck-header__right { gap: 12px; }
  .btn-get-started {
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }
}
@media (max-width: 380px) {
  .mck-header__inner {
    padding: 0 14px;
    gap: 10px;
  }
  .brand__mark { width: 28px; }
  .wordmark { font-size: 0.86rem; }
  .btn-get-started {
    padding: 0.48rem 0.7rem;
    font-size: 0.76rem;
  }
}

/* ============================================================
   Content sections below the hero
   ============================================================ */
.shell { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--gutter); }

.kicker { margin: 0 0 18px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.kicker--light { color: var(--c-accent); }

.section-head { max-width: 720px; margin-bottom: 2rem; }
.section-head h2 { margin: 0; }
.section-head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: none; flex-wrap: wrap; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--blue); }
.link-arrow span { transition: transform 0.18s ease; }
.link-arrow:hover span { transform: translateX(4px); }

.btn-solid { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: var(--white); font-weight: 600; font-size: 1rem; padding: 1rem 1.9rem; border-radius: 999px; white-space: nowrap; transition: background 0.18s ease; }
.btn-solid:hover { background: var(--c-accent-hover); }

/* Featured */
.featured { background: var(--c-surface); color: var(--c-ink); padding: clamp(2.75rem, 5.5vw, 4.5rem) 0; }
.featured__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.featured h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.12; color: var(--c-ink); margin: 0 0 1.25rem; }
.featured__lead { font-size: 1.1rem; line-height: 1.6; color: var(--c-body); margin: 0 0 1.75rem; }
.media-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  color: var(--c-on-accent);
  background: var(--c-surface-alt);
}
.media-card--a {
  background: var(--c-surface-alt);
}
.media-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 42%;
  display: block;
}
/* Red title tab — bottom-left with chamfered top-right */
.media-card__copy {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.media-card__title {
  display: block;
  width: fit-content;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--c-on-accent);
  margin: 0;
  padding: 1.25rem 1.75rem 1.1rem 1.65rem;
  background: var(--c-accent);
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - 2.2rem) 0,
    100% 2.2rem,
    100% 100%,
    0 100%
  );
}

/* How we help */
.help { background: var(--c-surface); color: var(--c-ink); padding: clamp(2.75rem, 5.5vw, 4.5rem) 0; }
.help h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.9rem); color: var(--c-ink); }
.help .kicker { color: var(--blue); }
.help__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: 0; overflow: hidden; }
.capability { display: flex; flex-direction: column; background: var(--c-surface); padding: 2rem 1.9rem 1.9rem; transition: background 0.18s ease; }
.capability:hover { background: var(--c-hero-wash); }
.capability h3 { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--c-ink); margin: 0 0 0.6rem; }
.capability p { font-size: 0.97rem; color: var(--c-body); margin: 0 0 1.5rem; line-height: 1.55; }
.capability .link-arrow { margin-top: auto; }

/* Insights */
.insights { background: var(--c-surface); color: var(--c-ink); padding: clamp(2.75rem, 5.5vw, 4.5rem) 0; }
.insights h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--c-ink); }
.insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.insights__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 52rem; }
.insight { display: block; }
.insight__thumb {
  aspect-ratio: 3 / 2; border-radius: 14px; margin-bottom: 1.1rem;
  position: relative; overflow: hidden; display: flex; align-items: flex-start;
  background: linear-gradient(135deg, var(--c-accent-soft), var(--c-accent) 55%, var(--c-primary-deep));
}
.insight__thumb span {
  margin: 1rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--c-on-accent);
  background: color-mix(in srgb, var(--c-ink) 22%, transparent);
  padding: 0.35rem 0.6rem; border-radius: 999px;
}
.insight__type { margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.insight h3 { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--c-ink); margin: 0; transition: color 0.15s ease; }
.insight:hover h3 { color: var(--blue); }

/* Connect / CTA — solid theme colour */
.connect {
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding:
    calc(4.65rem + clamp(0.6rem, 1vw, 0.9rem))
    0
    calc(0.3rem + clamp(0.6rem, 1vw, 0.9rem));
  border: 0;
  text-align: left;
}
.connect__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  text-align: left;
}
.connect__copy {
  flex: 1 1 280px;
  min-width: 0;
  text-align: left;
}
.connect .kicker {
  color: color-mix(in srgb, var(--c-on-accent) 85%, transparent);
  text-align: left;
  margin: 0 0 18px;
}
.connect h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin: 0 0 0.6rem;
  color: var(--c-on-accent);
  text-align: left;
}
.connect__lead {
  margin: 0;
  max-width: 42ch;
  color: color-mix(in srgb, var(--c-on-accent) 88%, transparent);
  font-size: 1.05rem;
  text-align: left;
}
.connect__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.05rem;
  margin-left: auto;
}
.connect .btn-solid {
  background: var(--c-on-accent);
  color: var(--c-accent);
}
.connect .btn-solid:hover {
  background: var(--c-surface);
  color: var(--c-accent-hover);
}
.connect .btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--c-on-accent) 85%, transparent);
  background: transparent;
  color: var(--c-on-accent);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.connect .btn-outline-light:hover {
  background: color-mix(in srgb, var(--c-on-accent) 14%, transparent);
  border-color: var(--c-on-accent);
  color: var(--c-on-accent);
}

/* ---------- Shared inner-page band ---------- */
.contact,
.services-page,
.advisers-page,
.faq-page,
.get-started {
  background:
    radial-gradient(80% 60% at 100% 0%, var(--c-hero-wash) 0%, transparent 55%),
    var(--c-surface);
  padding: var(--page-pad-y);
}
.contact__shell,
.services-page__shell,
.advisers-page__shell,
.page-blank__shell,
.faq-page__shell,
.get-started__shell {
  max-width: var(--layout-max);
}
.contact__intro h1,
.services-page__intro h1,
.advisers-page__intro h1,
.faq-page__intro h1,
.get-started__intro h1,
.page-blank h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 0.85rem;
  max-width: none;
}
.faq-page { color: var(--c-ink); }
.contact__intro h1 { margin: 0; }

/* ---------- Contact page ---------- */
.contact__intro {
  max-width: none;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.contact__layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding-top: 0.35rem;
}
.contact__aside-lead {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-body);
}
.contact__fact {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-border);
}
.contact__fact:last-of-type { border-bottom: 0; padding-bottom: 0; }
.contact__label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact__fact p,
.contact__fact a {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--c-ink);
  font-weight: 500;
}
.contact__fact a:hover { color: var(--c-accent); }
.contact__aside-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-accent);
}
.contact__aside-cta:hover span { transform: translateX(3px); }
.contact__aside-cta span { transition: transform 0.15s ease; }

.contact__form {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 16px 40px -28px rgba(23, 53, 54, 0.28);
}
.contact__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact__status {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--c-accent) 28%, var(--c-border));
  background: var(--c-accent-pale);
  color: var(--c-ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.contact__status--error {
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-accent) 8%, #ffffff);
  color: var(--c-accent);
}
.contact__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 16rem;
  justify-content: center;
}
.contact__success[hidden] { display: none; }
.contact__success-icon {
  color: var(--c-accent);
  margin-bottom: 0.25rem;
}
.contact__success h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--c-ink);
}
.contact__success p {
  margin: 0 0 0.5rem;
  max-width: 36ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-body);
}
.contact__success-again {
  width: auto;
  margin-top: 0.35rem;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
}
.contact__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}
.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact__form .field { margin-bottom: 1rem; }
.contact__form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-body);
  margin: 0 0 0.4rem;
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 0.78rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-surface);
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--c-accent);
}
.contact__form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact__submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  margin-top: 0.25rem;
}
.contact__submit:hover { background: var(--c-accent-hover); }

.services-page__intro {
  max-width: none;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.services-page__lead {
  margin: 0;
  max-width: none;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--c-body);
}
.services-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 1.5rem 1.45rem;
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  color: var(--c-on-accent);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.service-card:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}
.service-card h2 {
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--c-on-accent);
}
.service-card p {
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-on-accent) 88%, transparent);
  flex: 1;
}
.service-card .link-arrow {
  margin-top: auto;
  color: var(--c-on-accent);
}
.service-card:hover .link-arrow { color: var(--c-on-accent); }

.advisers-page__intro {
  max-width: none;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.advisers-page__lead {
  margin: 0;
  max-width: none;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--c-body);
}
.advisers-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.adviser-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.adviser-card__photo {
  display: block;
  height: 13.5rem;
  background:
    linear-gradient(160deg, var(--c-hero-wash) 0%, color-mix(in srgb, var(--c-accent) 10%, #f3f3f3) 100%);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}
.adviser-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.adviser-card__photo--empty {
  background:
    linear-gradient(160deg, var(--c-hero-wash) 0%, color-mix(in srgb, var(--c-accent) 10%, #f3f3f3) 100%);
}
.adviser-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.35rem 1.5rem;
}
.adviser-card h2 {
  margin: 0 0 0.25rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--c-ink);
}
.adviser-card h2 a {
  color: inherit;
  text-decoration: none;
}
.adviser-card h2 a:hover {
  color: var(--c-accent);
}
.adviser-card__stat-note {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-muted);
}
.adviser-card__role {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-accent);
}
.adviser-card__bio {
  margin: 0 0 1.15rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-body);
  flex: 1;
}
.adviser-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
}
.adviser-card__stats div { margin: 0; }
.adviser-card__stats dt {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.adviser-card__stats dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}

/* ============================================================
   Subject Selection Guide — single-product page
   ============================================================ */
:root {
  --sg-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.6 10.6l4 4.1 8.8-9.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.35rem;
}
.sg-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.72rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sg-tag--accent {
  border-color: color-mix(in srgb, var(--c-accent) 32%, transparent);
  background: color-mix(in srgb, var(--c-accent) 8%, #ffffff);
  color: var(--c-accent);
}

.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.65rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sg-btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.sg-btn--primary:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
  transform: translateY(-1px);
}
.sg-btn--ghost {
  border-color: var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
}
.sg-btn--ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.sg-btn--sm {
  padding: 0.68rem 1.3rem;
  font-size: 0.92rem;
}

.sg-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}
.sg-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.99rem;
  line-height: 1.5;
  color: var(--c-body);
}
.sg-check li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.16rem;
  background: var(--c-accent);
  -webkit-mask: var(--sg-tick) center / contain no-repeat;
  mask: var(--sg-tick) center / contain no-repeat;
}

.sg-sechead {
  max-width: 60ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.sg-sechead .kicker { margin: 0 0 0.75rem; }
.sg-sechead h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sg-sechead--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  max-width: none;
}
.sg-sechead--row > div { max-width: 34ch; }
.sg-sechead__note {
  margin: 0;
  max-width: 38ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-muted);
}

/* ---------- Hero ---------- */
.sg-hero {
  position: relative;
  margin-top: calc(var(--header-offset) * -1);
  padding: calc(var(--header-offset) + clamp(3rem, 5.5vw, 4.5rem) - 6px) 0 clamp(2.35rem, 4.5vw, 3.4rem);
  background:
    radial-gradient(72% 58% at 88% 2%, var(--c-hero-wash) 0%, transparent 62%),
    radial-gradient(50% 42% at 0% 100%, color-mix(in srgb, var(--c-accent) 5%, #ffffff) 0%, transparent 55%),
    var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.sg-hero--embed {
  margin-top: 0;
  padding-top: clamp(3rem, 5.5vw, 4.5rem);
  padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
  border-top: 1px solid var(--c-border);
}
/* Subject selection service page: tighten the gap under reviews into the guide embed */
body:has(.svc-hero):has(.sg-hero--embed) .svc {
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}
body:has(.svc-hero):has(.sg-hero--embed) .svc .svc-block:last-child {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.sg-embed-intro {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.sg-embed-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sg-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  row-gap: calc(clamp(2.75rem, 5.5vw, 4rem) + 1px);
  align-items: center;
}
.sg-hero__copy,
.sg-hero__media { min-width: 0; }
.sg-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 2.8vw, 2rem);
}
.sg-hero__copy .sg-tags { margin: 0; }
.sg-hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 28rem;
  width: 100%;
  justify-self: end;
  transform: translateY(10px);
}

.sg-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.8vw, 3.85rem);
  line-height: 1.02;
  letter-spacing: -0.037em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sg-hero__title-kicker {
  display: block;
  margin-bottom: 0.35rem;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-muted);
}
.sg-hero__lead {
  margin: 0;
  max-width: 54ch;
  font-size: 1.075rem;
  line-height: 1.62;
  color: var(--c-body);
}
.sg-hero__points { margin: 0; }

.sg-buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.15rem 1.75rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: 0 26px 52px -38px rgba(17, 17, 17, 0.35);
  scroll-margin-top: 7rem;
}
.sg-buy__price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 5px;
}
.sg-buy__amount {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 2.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-ink);
}
.sg-buy__unit {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  transform: translateY(0.05em);
}
.sg-buy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-left: auto;
}
.sg-hero__bundle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-muted);
}
.sg-hero__bundle strong { color: var(--c-ink); }
.sg-hero__bundle a {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sg-hero__bundle a:hover { color: var(--c-accent-hover); }

.sg-peek {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.98;
  margin: 0;
}
.sg-peek__label {
  position: absolute;
  top: calc(1% - 10px);
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 14px 28px -16px rgba(17, 17, 17, 0.55);
  transform: translateX(-50%) rotate(-4deg);
  white-space: nowrap;
}
.sg-peek__pair {
  position: absolute;
  inset: 0;
  transform: translateY(-28px);
  filter:
    drop-shadow(0 0 0.55px rgba(17, 17, 17, 0.12))
    drop-shadow(0 10px 18px rgba(17, 17, 17, 0.16))
    drop-shadow(0 22px 36px rgba(17, 17, 17, 0.18));
}
.sg-peek__meta {
  margin: 0.15rem 0 0;
  max-width: 16ch;
  font-family: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--c-accent);
  text-align: center;
  transform: translateY(8px) rotate(-2deg);
}
.sg-peek__bubble {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  width: 58%;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: filter 0.2s ease;
}
.sg-peek__bubble:hover,
.sg-peek__bubble:focus-visible {
  filter: brightness(1.02);
}
.sg-peek__bubble:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
.sg-peek__bubble img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  border-radius: inherit;
}
.sg-peek__bubble--back {
  top: 10%;
  right: 2%;
  transform: rotate(8deg);
  z-index: 1;
  animation: sg-float-b 7.5s ease-in-out infinite;
}
.sg-peek__bubble--front {
  top: 14%;
  left: 2%;
  width: 62%;
  transform: rotate(-6deg);
  z-index: 2;
  animation: sg-float-a 6.8s ease-in-out infinite;
}
@keyframes sg-float-a {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-10px); }
}
@keyframes sg-float-b {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-peek__bubble--back,
  .sg-peek__bubble--front { animation: none; }
}

.sg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.sg-lightbox[hidden] { display: none; }
.sg-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.sg-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(52rem, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}
.sg-lightbox__label {
  position: absolute;
  top: -0.35rem;
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 24px -14px rgba(17, 17, 17, 0.55);
}
.sg-lightbox__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink) 72%, transparent);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sg-lightbox__close:hover,
.sg-lightbox__close:focus-visible {
  background: var(--c-ink);
}
.sg-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.sg-lightbox__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  height: auto;
  border-radius: 10px;
  background: var(--c-surface);
  box-shadow: 0 32px 70px -24px rgba(0, 0, 0, 0.65);
}
body.sg-lightbox-open { overflow: hidden; }

.sg-specs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--c-border);
}
.sg-specs > div {
  padding: 0 1.5rem;
  border-left: 1px solid var(--c-border);
}
.sg-specs > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.sg-specs dt {
  margin: 0 0 0.32rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sg-specs dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

/* ---------- Myth band ---------- */
.sg-myth {
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  background: var(--c-surface);
}
.sg-myth__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.sg-myth__quote { margin: 0; }
.sg-myth__quote p {
  margin: 0 0 0.95rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.032em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sg-myth__quote footer {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.sg-myth__answer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 2px solid color-mix(in srgb, var(--c-accent) 24%, transparent);
}
.sg-myth__answer p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--c-body);
}

/* ---------- Inside the guide ---------- */
.sg-inside {
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.sg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.sg-card {
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-surface);
}
.sg-card__num {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-accent);
}
.sg-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--c-ink);
}
.sg-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--c-body);
}

/* ---------- Maths centrepiece ---------- */
.sg-maths {
  padding: clamp(3.25rem, 6.5vw, 5rem) 0;
  background: var(--c-surface);
}
.sg-maths__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.sg-maths__copy .kicker { margin: 0 0 0.75rem; }
.sg-maths__copy h2 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sg-maths__copy > p {
  margin: 0 0 1.5rem;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-body);
}
.sg-ladder {
  list-style: none;
  margin: 0;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--c-hero-wash) 0%, var(--c-surface) 62%);
}
.sg-ladder li {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem 0.95rem;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
}
.sg-ladder li:nth-child(2) { margin-left: 0.6rem; }
.sg-ladder li:nth-child(3) { margin-left: 1.2rem; }
.sg-ladder li:nth-child(4) { margin-left: 1.8rem; }
.sg-ladder__bar {
  flex: 0 0 auto;
  width: 5px;
  border-radius: 999px;
  background: var(--c-accent);
}
.sg-ladder li:nth-child(1) .sg-ladder__bar { background: color-mix(in srgb, var(--c-accent) 28%, #ffffff); }
.sg-ladder li:nth-child(2) .sg-ladder__bar { background: color-mix(in srgb, var(--c-accent) 52%, #ffffff); }
.sg-ladder li:nth-child(3) .sg-ladder__bar { background: color-mix(in srgb, var(--c-accent) 76%, #ffffff); }
.sg-ladder__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.sg-ladder__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--c-ink);
}
.sg-ladder__note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* ---------- Contents ---------- */
.sg-contents {
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.sg-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
}
.sg-toc__col {
  min-width: 0;
  padding: clamp(1.35rem, 2.4vw, 1.85rem) clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-surface);
}
.sg-toc__heading {
  margin: 0 0 1.05rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.sg-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.sg-toc__list li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.38rem 0;
}
.sg-toc__title {
  flex: 0 1 auto;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.sg-toc__list li::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0.7rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-muted) 55%, transparent);
  transform: translateY(-0.28em);
}
.sg-toc__page {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

/* ---------- FAQ ---------- */
.sg-faq {
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--c-surface);
}
.sg-faq__list { max-width: 62rem; }

/* ---------- Sticky buy bar ---------- */
.sg-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -20px 44px -34px rgba(17, 17, 17, 0.45);
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}
.sg-bar.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
}
.sg-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.sg-bar__product {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.sg-bar__product img {
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 44%;
}
.sg-bar__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.sg-bar__title,
.sg-bar__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-bar__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-ink);
}
.sg-bar__meta {
  font-size: 0.8rem;
  color: var(--c-muted);
}
.sg-bar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}
.sg-bar__price {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.025em;
  color: var(--c-ink);
}
body:has(.sg-bar.is-visible) .msg-float { bottom: calc(1.2rem + var(--bottom-bar-h)); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-maths__inner { grid-template-columns: 1fr; }
  .sg-myth__inner { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .sg-hero__inner { grid-template-columns: 1fr; }
  .sg-hero__media {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    justify-self: center;
  }
  .sg-peek { aspect-ratio: 1 / 1.08; }
  .sg-toc { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sg-specs {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.35rem;
  }
  .sg-specs > div { padding: 0 1.1rem; }
  .sg-specs > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 720px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-buy { padding: 1.15rem 1.2rem; }
  .sg-buy__actions {
    width: 100%;
    margin-left: 0;
  }
  .sg-buy__actions .sg-btn { flex: 1 1 auto; }
  .sg-ladder li:nth-child(2),
  .sg-ladder li:nth-child(3),
  .sg-ladder li:nth-child(4) { margin-left: 0; }
  .sg-bar__product img { display: none; }
  .sg-bar__meta { display: none; }
  .sg-bar__price { font-size: 1.05rem; }
  .sg-bar__actions { gap: 0.75rem; }
}
@media (max-width: 560px) {
  .sg-bar__product { display: none; }
  .sg-bar__inner { justify-content: center; }
  .sg-bar__actions {
    width: 100%;
    justify-content: space-between;
  }
  body:has(.sg-bar.is-visible) .msg-float { bottom: calc(0.9rem + var(--bottom-bar-h)); }
}
/* ---------- Service detail page (Subject Selection) ---------- */
.svc-hero {
  background:
    radial-gradient(80% 60% at 100% 0%, var(--c-hero-wash) 0%, transparent 55%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--c-accent) 6%, #ffffff) 0%, transparent 50%),
    var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  margin-top: calc(var(--header-offset) * -1);
  padding: calc(var(--header-offset) + clamp(2.85rem, 5.5vw, 4.25rem)) 0 clamp(1.7rem, 4.3vw, 3.1rem);
  color: var(--c-ink);
  min-height: 96vh;
  min-height: 96dvh;
  display: flex;
  align-items: center;
}
.svc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  column-gap: clamp(2.25rem, 5vw, 4.5rem);
  row-gap: 2.15rem;
  align-items: center;
  width: 100%;
  transform: translateY(-5px);
}
.svc-hero h1 {
  margin: 0 0 1.55rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: calc(clamp(2rem, 4.2vw, 3.35rem) - 4pt);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-ink);
  max-width: 21ch;
}
.svc-hero__subjects {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  max-width: none;
  font-size: 0.94rem;
  line-height: 1.85;
  color: #9a9a9a;
}
.svc-hero__subjects > span[data-subject] {
  display: inline;
  padding: 0.08em 0.18em;
  margin: 0 -0.05em;
  border-radius: 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #8f8f8f;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.svc-hero__subjects > span[data-subject].is-lit {
  background: color-mix(in srgb, var(--c-accent) 18%, #ffffff);
  color: var(--c-ink);
}
.svc-hero__subjects-sep {
  color: #b0b0b0;
}
.svc-hero__help {
  margin: 2.65rem 0 0;
  padding: 0;
  max-width: 42.5rem;
}
.svc-hero__help-title {
  margin: 0 0 1.05rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(0.95rem + 2pt);
  line-height: 1.3;
  color: var(--c-ink);
}
.svc-hero__ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.svc-hero__ticks li {
  position: relative;
  padding-left: 1.45rem;
  font-size: calc(0.95rem + 2pt);
  line-height: 1.45;
  color: var(--c-body);
}
.svc-hero__ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}
.svc-hero__panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  box-shadow: 0 24px 48px -30px rgba(23, 53, 54, 0.35);
  padding: 1.75rem 1.8rem 1.35rem;
}
.svc-hero__rotator {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.svc-hero__rotator-label {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-accent);
}
.svc-hero__slides {
  display: grid;
  margin-bottom: 1.25rem;
}
.svc-hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  pointer-events: none;
}
.svc-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.svc-hero__panel-question {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.3;
  color: var(--c-ink);
}
.svc-hero__panel-note {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--c-body);
}
.svc-hero__progress {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.svc-hero__progress-track {
  flex: 1;
  height: 2px;
  background: color-mix(in srgb, var(--c-accent) 18%, #e8e8e8);
  overflow: hidden;
}
.svc-hero__progress-bar {
  height: 100%;
  width: 100%;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.svc-hero__progress-bar.is-running {
  animation: svc-hero-progress 14s linear forwards;
}
@keyframes svc-hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.svc-hero__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.svc-hero__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 28%, #d8d8d8);
}
.svc-hero__dot.is-active {
  background: var(--c-accent);
}

.svc {
  background: var(--c-surface);
  color: var(--c-ink);
  padding: clamp(3.25rem, 7vw, 5.25rem) 0 clamp(4rem, 8vw, 6.25rem);
}
.svc-block { margin-bottom: clamp(3.25rem, 7vw, 5.25rem); }
.svc-head {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.svc-head .kicker { margin-bottom: 0.85rem; }
.svc-head h1,
.svc-head h2 {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.svc-head h1 {
  font-weight: 800;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  letter-spacing: -0.02em;
}
.svc-head p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-body);
}
.svc-head p + p { margin-top: 0.85rem; }

/* Three trade-offs */
.svc-balance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}
.svc-balance article {
  background: var(--c-surface);
  padding: 1.9rem 1.75rem 2rem;
  transition: background 0.18s ease;
}
.svc-balance article:hover { background: var(--c-hero-wash); }
.svc--land .svc-balance article { transition: none; }
.svc--land .svc-balance article:hover { background: var(--c-surface); }
.svc-balance__num {
  display: block;
  margin-bottom: 1.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-accent);
}
.svc-balance h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-ink);
  margin: 0 0 0.6rem;
}
.svc-balance p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--c-body);
}

/* Evidence / case studies */
.svc-evidence {
  display: grid;
  gap: 1.5rem;
}
.svc-story {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface);
  overflow: hidden;
  min-height: 16.5rem;
}
.svc-story__photo {
  position: relative;
  width: 220px;
  min-height: 100%;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--c-hero-wash) 0%, color-mix(in srgb, var(--c-accent) 10%, #f3f3f3) 100%);
  border-right: 1px solid var(--c-border);
}
.svc-story__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.svc-story__body {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.svc-story__label {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.svc-story h3 {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--c-ink);
}
.svc-story__body > p {
  margin: 0 0 0.75rem;
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--c-body);
}
.svc-story__close { margin-bottom: 0 !important; }

/* Checklist + consultation card */
.svc-decide {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.svc-decide__copy .svc-head { margin-bottom: 1.5rem; }
.svc-decide__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-decide__checklist li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.75rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.svc-decide__checklist li:first-child { border-top: 1px solid var(--c-border); }
.svc-decide__checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-weight: 700;
  color: var(--c-accent);
}
.svc-decide__flow {
  min-width: 0;
  margin-top: 3.5rem;
}
.svc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.9rem;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--c-accent);
  background: var(--c-surface);
  color: var(--c-ink);
}
.svc-flow li:last-child {
  margin-bottom: 0;
}
.svc-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.4rem;
  width: 1.5px;
  height: 0.85rem;
  background: var(--c-accent);
  transform: translateX(-50%);
}
.svc-flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.7rem;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--c-accent);
  transform: translateX(-50%);
  z-index: 1;
}
body:has(.svc-hero--med) .svc-flow li {
  margin-bottom: calc(1.9rem + 4px);
}
body:has(.svc-hero--med) .svc-flow li:last-child {
  margin-bottom: 0;
}
body:has(.svc-hero--med) .svc-flow li:not(:last-child)::after {
  bottom: calc(-1.4rem - 4px);
  height: calc(0.85rem + 4px);
}
body:has(.svc-hero--med) .svc-flow li:not(:last-child)::before {
  bottom: calc(-1.7rem - 4px);
}
.svc-flow__num {
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-accent);
  color: var(--c-accent);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.svc-flow__text {
  flex: 1;
  min-width: 0;
  padding-right: 2.3rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
}
.svc-flow__icon {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Parent testimonials */
.svc-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.svc-quote {
  margin: 0;
  border-top: 1px solid var(--c-border);
  padding-top: 1.35rem;
  position: relative;
}
.svc-quote::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--c-accent);
}
.svc-quote blockquote {
  margin: 0 0 1.15rem;
}
.svc-quote blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: #4a4a4a;
}
.svc-quote__hit {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.svc-quote figcaption {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-accent);
}

/* Guide cross-sell */
.svc-guide {
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  border: 1px solid var(--c-border);
  background:
    radial-gradient(70% 120% at 0% 50%, var(--c-hero-wash) 0%, transparent 65%),
    var(--c-surface);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.svc-guide__media { margin: 0; }
.svc-guide__media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-border);
  box-shadow: 0 18px 40px -24px rgba(23, 53, 54, 0.4);
}
.svc-guide__copy .kicker { margin-bottom: 0.7rem; }
.svc-guide__copy h2 {
  margin: 0 0 0.85rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--c-ink);
}
.svc-guide__copy p {
  margin: 0;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-body);
}
.svc-guide__copy .link-arrow { margin-top: 1.15rem; }

/* ============================================================
   Service detail page (UCAT & Medicine)
   ============================================================ */
.svc-hero--med {
  min-height: 92vh;
  min-height: 92dvh;
  overflow: visible;
}
.svc-hero--med .svc-hero__inner {
  row-gap: 1.75rem;
  overflow: visible;
}
.svc-hero--med h1 { max-width: 19ch; }
.svc-hero__rotator.is-hidden,
.med-rail.is-hidden { display: none !important; }
.svc-hero__mentor {
  min-width: 0;
  width: 360px;
  max-width: 100%;
  justify-self: end;
  margin-right: 40px;
  box-sizing: border-box;
}
.svc-hero__mentor .mentor-card { width: 100%; }
.svc-hero__mentor .mentor-card__media { height: 285px; }
.svc-hero__mentor .mentor-card__body { padding: 1.1rem 1.25rem 1.2rem; }
.svc-hero__mentor .mentor-card__photo {
  object-position: center 18%;
}

/* Med hero CTA + hand-drawn nudge toward mentor */
.svc-hero--med .svc-hero__copy { overflow: visible; }
.med-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.85rem 1.1rem;
  margin: 1.75rem 0 0;
  padding: 0;
  color: var(--c-accent);
  overflow: visible;
}
.med-cta__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -0.65rem;
  padding: 0.85rem 1.65rem;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease;
  transform: translateX(-0.35rem);
}
.med-cta__btn:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
}
.med-cta__note {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  max-width: none;
  font-family: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  color: var(--c-accent);
  text-align: left;
  transform: rotate(-2deg);
}

/* Hero timeline rail */
.med-rail {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  padding-top: 1.5rem;
}
.med-rail__label {
  margin: 0 0 1.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.med-rail__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.med-rail__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-right: 0.9rem;
}
.med-rail__step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.3rem;
  height: 1px;
  background: color-mix(in srgb, var(--c-accent) 20%, #e2e2e2);
}
.med-rail__step:last-child::before { display: none; }
.med-rail__dot {
  position: relative;
  z-index: 1;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-accent) 32%, #cfcfcf);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.med-rail__step.is-lit .med-rail__dot {
  background: var(--c-accent);
  box-shadow:
    inset 0 0 0 1.5px var(--c-accent),
    0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent);
}
.med-rail__when {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
}
.med-rail__what {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #7a7a7a;
  transition: color 0.4s ease;
}
.med-rail__step.is-lit .med-rail__what { color: var(--c-body); }

/* Three routes into medicine */
.med-routes__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-muted);
}
.med-routes__key {
  width: 1.4rem;
  height: 0.6rem;
  margin-left: 0.55rem;
}
.med-routes__key:first-child { margin-left: 0; }
.med-routes__key--pre { background: color-mix(in srgb, var(--c-accent) 20%, #ffffff); }
.med-routes__key--md { background: var(--c-accent); }
.med-routes__key--mark {
  width: 2px;
  height: 1.1rem;
  background: var(--c-ink);
}
.med-routes__legend-note {
  margin-left: 0.35rem;
  font-weight: 400;
  font-style: italic;
}
.med-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.15rem, 2.4vw, 1.65rem);
}
.med-route {
  display: flex;
  flex-direction: column;
  padding: 1.55rem 1.5rem 1.7rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
}
.med-route__tag {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.med-route h3 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--c-ink);
}
.med-route__bar {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 0.5rem;
}
/* Fixed-width segments so the three bars are readable against each other as durations. */
.med-route__seg {
  flex: 0 0 1.85rem;
  height: 0.6rem;
}
.med-route__seg--pre { background: color-mix(in srgb, var(--c-accent) 20%, #ffffff); }
.med-route__seg--md { background: var(--c-accent); }
.med-route__seg--gap {
  flex: 0 0 2px;
  height: 1.3rem;
  background: var(--c-ink);
}
.med-route__span {
  margin: 0 0 1.05rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.med-route > p:not(.med-route__tag):not(.med-route__span) {
  margin: 0 0 1.35rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--c-body);
}
.med-route__meta {
  margin: auto 0 0;
  padding-top: 1.05rem;
  border-top: 1px solid var(--c-border);
  display: grid;
  gap: 0.8rem;
}
.med-route__meta > div { margin: 0; }
.med-route__meta dt {
  margin: 0 0 0.22rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.med-route__meta dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-body);
}
.med-routes__close {
  margin: clamp(2.15rem, 3.8vw, 2.85rem) 0 -0.9rem;
  max-width: 62ch;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-ink);
  border-left: 3px solid var(--c-accent);
  padding-left: 1.15rem;
}

/* Selection-weight column chart beside matrix intro */
.med-matrix-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17.5rem, 22.5rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.med-matrix-lead .svc-head {
  max-width: none;
  margin-bottom: 0;
}
.med-weights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: end;
  min-height: 11.5rem;
  padding: 0.35rem 0.15rem 0;
}
.med-weights__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.med-weights__pct {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s ease, opacity 0.35s ease;
}
.med-weights__col.is-zero .med-weights__pct {
  color: var(--c-muted);
  opacity: 0.55;
}
.med-weights__track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 8.75rem;
}
.med-weights__bar {
  width: 100%;
  max-width: 2.35rem;
  height: calc(var(--h, 0) * 1%);
  min-height: 0;
  background: var(--c-accent);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.med-weights__col.is-zero .med-weights__bar {
  background: color-mix(in srgb, var(--c-lines) 70%, #d0d0d0);
}
.med-weights__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.2;
}
.med-weights__col:not(.is-zero) .med-weights__label {
  color: var(--c-ink);
}

/* School selection matrix + filters */
.med-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}
.med-filter__label {
  margin-right: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.med-filter__chip {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.med-filter__chip:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.med-filter__chip.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.med-filter__chip:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.med-matrix-panel {
  position: relative;
}
.med-matrix-panel.is-collapsed .med-matrix {
  overflow: hidden;
}
.med-matrix-panel.is-collapsed .med-matrix__row.is-preview-cut {
  display: none;
}
.med-matrix-panel.is-collapsed .med-matrix__row.is-preview-fade {
  position: relative;
  max-height: 6.75rem;
  overflow: hidden;
  border-bottom: 0;
}
.med-matrix-panel__veil {
  display: none;
  pointer-events: none;
}
.med-matrix-panel.is-collapsed .med-matrix-panel__veil {
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 3.4rem;
  height: 5.5rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-surface) 0%, transparent) 0%,
    var(--c-surface) 78%
  );
  z-index: 1;
}
.med-matrix-panel.is-collapsed.is-short .med-matrix-panel__veil,
.med-matrix-panel.is-collapsed.is-short .med-matrix-panel__toggle {
  display: none;
}
.med-matrix-panel__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 0.85rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-accent);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.med-matrix-panel__toggle:hover {
  border-color: var(--c-accent);
  background: var(--c-hero-wash);
}
.med-matrix-panel__toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.med-matrix {
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  background: var(--c-surface);
}
.med-matrix__head,
.med-matrix__row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 0.95fr 1fr 2.1fr;
  gap: 1.25rem;
  padding: 1.05rem 1.35rem;
  align-items: start;
}
.med-matrix__head {
  background: var(--c-hero-wash);
  border-bottom: 1px solid var(--c-border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.med-matrix__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.med-matrix__row {
  border-bottom: 1px solid var(--c-border);
  transition: background 0.15s ease;
}
.med-matrix__rows > li:last-child { border-bottom: 0; }
.med-matrix__row:hover { background: var(--c-surface-alt); }
.med-matrix__row.is-hidden { display: none; }
.med-matrix__uni {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
}
.med-matrix__cell {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-body);
}
.med-matrix__cell--flag {
  font-weight: 700;
  color: var(--c-accent);
}
.med-matrix__note {
  border-left: 2px solid color-mix(in srgb, var(--c-accent) 24%, transparent);
  padding-left: 0.9rem;
  font-weight: 400;
}
.med-matrix__note strong {
  font-weight: inherit;
}
.med-matrix__count {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--c-accent);
}
.med-matrix__fine {
  margin: 0.5rem 0 0;
  max-width: 76ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--c-muted);
}

/* Myth / reality list */
.med-myths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.25rem);
}
.med-myth {
  padding: 1.4rem 0 1.5rem;
  border-top: 1px solid var(--c-border);
}
.med-myths > li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--c-border); }
.med-myth__claim {
  position: relative;
  margin: 0 0 0.7rem;
  padding-left: 1.9rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: #757575;
}
.med-myth__claim::before {
  content: "\00D7";
  position: absolute;
  left: 0;
  top: 0.02em;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d4d4d4;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: #9a9a9a;
}
.med-myth__truth {
  position: relative;
  margin: 0;
  padding-left: 1.9rem;
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--c-body);
}
.med-myth__truth::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.45em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}

/* Winding year-by-year path */
.med-path {
  --med-path-gutter: clamp(1.35rem, 3.2vw, 2.6rem);
  --med-path-rail: 0.55rem;
  position: relative;
  margin: clamp(0.35rem, 1.2vw, 0.75rem) 0 0;
  padding: 0.35rem 0 0.5rem;
}
.med-path__snake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  color: var(--c-lines);
  z-index: 0;
}
.med-path__snake path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.med-path__steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.med-path__step {
  position: relative;
  width: calc(50% - 0.15rem);
  margin: 0 0 clamp(1.5rem, 3.2vw, 2.35rem);
}
.med-path__step:last-child { margin-bottom: 0.15rem; }
.med-path__step--left {
  margin-right: auto;
  padding-right: var(--med-path-gutter);
}
.med-path__step--right {
  margin-left: auto;
  padding-left: var(--med-path-gutter);
}
.med-path__step .med-path__box {
  opacity: 0;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.med-path__step--left .med-path__box {
  transform: translate3d(-1.6rem, 1.35rem, 0);
}
.med-path__step--right .med-path__box {
  transform: translate3d(1.6rem, 1.35rem, 0);
}
.med-path__step.is-in .med-path__box,
.med-path.is-static .med-path__box {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.med-path__step::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  z-index: 2;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 55%, #ffffff);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.med-path__step.is-in::before,
.med-path.is-static .med-path__step::before {
  opacity: 1;
}
.med-path__step--left::before {
  right: 0;
  transform: translateX(50%);
}
.med-path__step--right::before {
  left: 0;
  transform: translateX(-50%);
}
.med-path__step.is-critical::before {
  width: 1.05rem;
  height: 1.05rem;
  top: 1.45rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 28%, #ffffff);
}
.med-path__box {
  position: relative;
  padding: clamp(1.15rem, 2.2vw, 1.45rem) clamp(1.2rem, 2.4vw, 1.55rem) clamp(1.25rem, 2.4vw, 1.55rem);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--c-theme) 5%, #ffffff) 0%, var(--c-surface) 48%),
    var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.med-path__step.is-critical .med-path__box {
  background: linear-gradient(115deg, var(--c-hero-wash) 0%, var(--c-surface) 68%);
  border-color: color-mix(in srgb, var(--c-accent) 32%, var(--c-border));
  box-shadow:
    inset 3px 0 0 var(--c-accent),
    0 16px 34px color-mix(in srgb, var(--c-theme) 12%, transparent);
}
.med-path__mark {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--c-accent);
}
.med-path__box h3 {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--c-ink);
}
.med-path__box p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--c-body);
}
.med-when__pull {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding: clamp(1.35rem, 2.6vw, 1.75rem) clamp(1.4rem, 3vw, 2rem);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .med-path__step .med-path__box {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .med-path__step::before {
    opacity: 1;
    transition: none;
  }
}

/* Related services band */
.med-next {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  border: 1px solid var(--c-border);
  background:
    radial-gradient(70% 120% at 0% 50%, var(--c-hero-wash) 0%, transparent 65%),
    var(--c-surface);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.med-next__head .kicker { margin-bottom: 0.7rem; }
.med-next__head h2 {
  margin: 0 0 0.85rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.18;
  color: var(--c-ink);
}
.med-next__head p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-body);
}
.med-next__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.med-next__card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.25rem 1.3rem 1.35rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  transition: border-color 0.15s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.med-next__card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 22px 42px -32px rgba(23, 53, 54, 0.45);
  transform: translateY(-2px);
}
.med-next__card-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.med-next__card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--c-ink);
}
.med-next__card-text {
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-body);
}
.med-next__card .link-arrow { margin-top: 0.55rem; }

/* ---------- Reviews page ---------- */
.reviews-page {
  background:
    radial-gradient(80% 55% at 100% 0%, var(--c-hero-wash) 0%, transparent 55%),
    var(--c-surface);
  padding: calc(2.25rem + 5px) 0 clamp(4rem, 8vw, 6.5rem);
  color: var(--c-ink);
}
.reviews-page__shell { max-width: var(--layout-max); }
.reviews-page__intro {
  max-width: 42rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
.reviews-page h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 0.9rem;
}
.reviews-page__lead {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--c-body);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: start;
}
.reviews-col {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  min-width: 0;
}
.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.45rem 1.4rem 1.5rem;
  border: 1px solid var(--c-border);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--c-surface-alt) 70%, #ffffff);
  position: relative;
}
.review__stars {
  display: flex;
  gap: 0.18rem;
  margin: 0 0 0.95rem;
  color: #e0a100;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.review blockquote {
  margin: 0 0 1.25rem;
  flex: 1;
}
.review blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.55;
  color: var(--c-body);
}
.review figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
.review__name {
  font-weight: 800;
  color: var(--c-ink);
}
.review__meta {
  font-weight: 500;
  color: var(--c-muted);
  line-height: 1.4;
}
@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ---------- Privacy / legal ---------- */
.legal-page {
  background:
    radial-gradient(80% 55% at 100% 0%, var(--c-hero-wash) 0%, transparent 55%),
    var(--c-surface);
  padding: calc(2.25rem + 5px) 0 clamp(4rem, 8vw, 6.5rem);
  color: var(--c-ink);
}
.legal-page__shell { max-width: 46rem; }
.legal-page__intro { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.legal-page h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 0.9rem;
}
.legal-page__lead {
  margin: 0 0 0.65rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--c-body);
}
.legal-page__updated {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-muted);
}
.legal-page__body h2 {
  margin: 2.15rem 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.legal-page__body p,
.legal-page__body li {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-body);
}
.legal-page__body p { margin: 0 0 0.9rem; }
.legal-page__body ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.legal-page__body a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.legal-page__body a:hover { color: var(--c-accent); }

/* ============================================================
   Service detail page (University Pathways)
   ============================================================ */
.svc-hero--uni h1 { max-width: 20ch; }
body:has(.svc-hero--uni) .svc {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
body:has(.svc-hero--uni) .svc .svc-block:last-child {
  margin-bottom: 0;
}
body:has(.svc-hero--uni) .svc-decide__checklist a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

/* Hero: drifting questions behind a preference list that never settles */
.uni-visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  /* Contain the cloud's negative inset so it cannot widen the page. */
  overflow: hidden;
}
/* The box is deliberately taller than the column so that words anchored 2.5rem
   in from the top and bottom edges never drift as far as the clip line. */
.uni-cloud {
  position: absolute;
  inset: -3.25rem -0.5rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.uni-cloud__word {
  position: absolute;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-accent) 38%, #c4c4c4);
  opacity: 0;
  animation: uni-drift 13s ease-in-out infinite;
}
@keyframes uni-drift {
  0% { opacity: 0; transform: translateY(1rem); }
  22% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-1.5rem); }
}
/* Words 1-4 sit in the bands above and below the card; 5-10 run down the gutter
   beside it, spaced far enough apart that their drift paths never collide. */
.uni-cloud__word:nth-child(1) { top: 2.5rem; left: 4%; font-size: 1.45rem; animation-delay: 0s; }
.uni-cloud__word:nth-child(2) { top: 2.5rem; right: 4%; font-size: 1.05rem; animation-delay: -5.7s; }
.uni-cloud__word:nth-child(3) { bottom: 2.5rem; left: 8%; font-size: 1.25rem; animation-delay: -2.4s; }
.uni-cloud__word:nth-child(4) { bottom: 2.5rem; right: 10%; font-size: 1.35rem; animation-delay: -8.9s; }
.uni-cloud__word:nth-child(5) { top: 16%; left: 1%; font-size: 1.05rem; animation-delay: -6.5s; }
.uni-cloud__word:nth-child(6) { top: 28%; left: 0; font-size: 1rem; animation-delay: -1.6s; }
.uni-cloud__word:nth-child(7) { top: 39%; left: 5%; font-size: 1.3rem; animation-delay: -3.3s; }
.uni-cloud__word:nth-child(8) { top: 50%; left: 2%; font-size: 1.1rem; animation-delay: -9.8s; }
.uni-cloud__word:nth-child(9) { top: 61%; left: 0; font-size: 0.9rem; animation-delay: -4.9s; }
.uni-cloud__word:nth-child(10) { top: 72%; left: 0; font-size: 0.92rem; animation-delay: -11.4s; }

.uni-visual__stack {
  position: relative;
  z-index: 1;
  width: 22.5rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.uni-prefs__label {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-accent);
}
.uni-prefs {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  box-shadow: 0 24px 48px -30px rgba(23, 53, 54, 0.35);
  padding: 1.05rem 1.3rem 1.2rem;
}
.uni-prefs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--c-border);
}
.uni-prefs__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.uni-prefs__draft {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.uni-prefs__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uni-prefs__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.9rem;
  padding: 0.35rem 0.4rem 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 55%, #ffffff);
}
.uni-prefs__rows > li:last-child { border-bottom: 0; }
.uni-prefs__row.is-open {
  background: color-mix(in srgb, var(--c-accent) 4%, #ffffff);
}
.uni-prefs__num {
  flex: 0 0 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid color-mix(in srgb, var(--c-accent) 45%, #ffffff);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
}
.uni-prefs__row.is-open .uni-prefs__num {
  border-style: dashed;
}
.uni-prefs__pick {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  transition: opacity 0.26s ease, transform 0.26s ease;
}
.uni-prefs__row.is-swapping .uni-prefs__pick {
  opacity: 0;
  transform: translateY(0.35rem);
}
.uni-prefs__course {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
}
.uni-prefs__uni {
  font-size: 0.77rem;
  line-height: 1.3;
  color: var(--c-muted);
}
.uni-prefs__row.is-open .uni-prefs__course {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-accent);
}
.uni-prefs__row.is-open .uni-prefs__uni { font-style: italic; }
.uni-prefs__foot {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* What families open with */
.uni-stuck {
  list-style: none;
  counter-reset: uni-stuck;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}
.uni-stuck__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--c-border);
  counter-increment: uni-stuck;
}
.uni-stuck__item::before {
  content: "0" counter(uni-stuck);
  padding-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-accent);
}
.uni-stuck__voice {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  color: var(--c-ink);
}
.uni-stuck__read {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--c-body);
}

@media (prefers-reduced-motion: reduce) {
  .uni-cloud__word {
    animation: none;
    opacity: 0.85;
    transform: none;
  }
  .uni-prefs__pick { transition: none; }
}

/* ---------- No-hero service landers ---------- */
.svc--land {
  background:
    radial-gradient(80% 55% at 100% 0%, var(--c-hero-wash) 0%, transparent 55%),
    var(--c-surface);
}

/* Full-width consultation steps (Other Services) */
.svc-flow-wrap .svc-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.svc-flow-wrap .svc-flow li {
  margin: 0;
  min-height: 4.5rem;
}
.svc-flow-wrap .svc-flow li::before,
.svc-flow-wrap .svc-flow li::after {
  content: none;
  display: none;
}
@media (max-width: 900px) {
  .svc-flow-wrap .svc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svc-flow-wrap .svc-flow { grid-template-columns: 1fr; }
}

/* ---------- Blank / coming soon pages ---------- */
.page-blank {
  background: var(--c-surface);
  padding: calc(2.25rem + 5px) 0 clamp(5rem, 10vw, 8rem);
  min-height: 50vh;
}
.page-blank__note {
  margin: 0;
  font-size: 1.05rem;
  color: var(--c-muted);
  max-width: 62ch;
  line-height: 1.6;
}
.page-blank__note + .page-blank__note {
  margin-top: 1.25rem;
}
.page-blank__note a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.page-blank__note a:hover {
  color: var(--c-accent);
}
.page-blank__insights {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ---------- Booking confirmed ---------- */
.booking-confirmed__shell {
  max-width: 40rem;
}
.booking-confirmed__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 0 1.25rem;
  color: var(--c-accent);
}
.booking-confirmed__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.booking-confirmed .kicker {
  margin-bottom: 0.65rem;
}
.booking-confirmed h1 {
  margin-bottom: 1rem;
}
.booking-confirmed__lead {
  margin: 0 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--c-body);
  max-width: 38ch;
}
.booking-confirmed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 36rem;
}
.booking-confirmed__list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.85rem;
  border-top: 1px solid var(--c-border);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--c-body);
}
.booking-confirmed__list li:last-child {
  border-bottom: 1px solid var(--c-border);
}
.booking-confirmed__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}

/* ---------- Guide purchase thanks / download ---------- */
.guide-thanks__status {
  margin: 0 0 1.35rem;
  min-height: 1.5rem;
}
.guide-thanks__pulse,
.guide-thanks__ready,
.guide-thanks__error {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--c-body);
}
.guide-thanks__ready { color: var(--c-ink); font-weight: 600; }
.guide-thanks__error a { color: var(--c-accent); }
.guide-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

/* ---------- FAQ page ---------- */
.faq-page__intro {
  max-width: none;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.faq-page__lead {
  margin: 0;
  max-width: none;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.faq-page__lead a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.faq-page__lead a:hover { color: var(--c-accent); }

.faq-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.35rem;
  padding-bottom: 1.35rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--c-border);
}
.faq-toc a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-body);
  text-decoration: none;
}
.faq-toc a:hover { color: var(--c-accent); }

.faq-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 2.75rem) 3rem;
  max-width: none;
  align-items: start;
}
.faq-group {
  scroll-margin-top: 6rem;
  min-width: 0;
}
.faq-group:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.faq-group__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin: 0 0 0.85rem;
  color: var(--c-ink);
}

.faq-item {
  border-top: 1px solid var(--c-border);
}
.faq-item:last-child { border-bottom: 1px solid var(--c-border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.05rem 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--c-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--c-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}
.faq-item[open] summary::after {
  content: "\2212";
  color: var(--c-accent);
}
.faq-item summary:hover { color: var(--c-accent); }
.faq-item__body {
  padding: 0 0 1.2rem;
  max-width: none;
}
.faq-item__body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-body);
}
.faq-item__body a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.faq-item__body a:hover { color: var(--c-accent); }

.faq-cta {
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  padding: clamp(1.75rem, 3.5vw, 2.25rem) 0 0;
  border-top: 1px solid var(--c-border);
  background: transparent;
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.faq-cta__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 0 0 0.55rem;
  color: var(--c-ink);
}
.faq-cta__text {
  margin: 0;
  max-width: none;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.faq-cta__copy {
  flex: 1 1 280px;
  min-width: 0;
}
.faq-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--c-border);
  background: transparent;
  color: var(--c-ink);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 6%, transparent);
}

/* ---------- Homepage reviews ---------- */
.home-reviews {
  background:
    radial-gradient(80% 55% at 0% 0%, var(--c-hero-wash) 0%, transparent 55%),
    var(--c-surface-alt);
  color: var(--c-ink);
  padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
  border-top: 1px solid var(--c-border);
}
.home-reviews h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--c-ink);
  margin: 0;
}
.home-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}
.home-reviews .review {
  height: 100%;
  background: var(--c-surface);
}
.svc-block .review {
  height: 100%;
}
@media (max-width: 960px) {
  .home-reviews__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .home-reviews__grid { grid-template-columns: 1fr; }
}

/* ---------- Homepage FAQ preview ---------- */
.home-faq {
  background: var(--c-surface);
  color: var(--c-ink);
  padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 calc(clamp(2.75rem, 5.5vw, 4.5rem) + 20px);
  border-top: 1px solid var(--c-border);
}
.home-faq h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--c-ink);
  margin: 0;
}
.home-faq__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  max-width: none;
  align-items: start;
}
.home-faq .faq-item {
  border-top: 1px solid var(--c-border);
  border-bottom: 0;
  min-width: 0;
}
.home-faq .faq-item:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--c-border);
}

.get-started__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: stretch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.get-started__copy {
  min-width: 0;
}
.get-started__lead {
  margin: 0;
  max-width: 40rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--c-body);
}
.get-started__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.get-started__list li {
  position: relative;
  padding: 0 0 0 1.55rem;
  color: var(--c-body);
  font-size: 0.98rem;
  line-height: 1.4;
}
.get-started__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}
.get-started__scheduler {
  width: 100%;
  min-height: 700px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  overflow: hidden;
}
.get-started__scheduler .calendly-inline-widget {
  width: 100%;
  min-width: 0;
}
@media (max-width: 860px) {
  .get-started__intro { grid-template-columns: 1fr; }
  /* Calendly's phone layout stacks the calendar above the time list, so a
     700px frame would scroll inside the page instead of with it. */
  .get-started__scheduler {
    min-height: 0;
    /* Calendly's iframe still asserts a ~320px min-width; allow a local
       sideways pan instead of widening the whole page. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .get-started__scheduler .calendly-inline-widget {
    height: 1020px !important;
    min-width: 320px;
  }
}

/* Footer — solid brand band */
.mck-footer {
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
  border-top: 0;
}
/* Same connect + footer stack height as homepage (incl. sticky-consult clearance) */
body:has(.connect) .mck-footer {
  padding-bottom: calc(2rem + 3.25rem);
}
/* The banner wraps to two lines on a phone, so the clearance follows its real height. */
body:has(.sticky-consult) .mck-footer {
  padding-bottom: calc(2rem + var(--bottom-bar-h));
}
body:has(.sg-bar.is-visible) .mck-footer {
  padding-bottom: calc(2rem + var(--bottom-bar-h));
}
.mck-footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-on-accent) 28%, transparent);
  align-items: start;
}
.mck-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}
.mck-footer__about {
  margin: 0;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #ffffff;
}
.wordmark--footer {
  color: var(--c-on-accent);
  font-size: 1.15rem;
  transform: none;
}
.brand--footer {
  margin-left: 0;
  transform: none;
  gap: 12px;
  align-items: center;
  color: var(--c-on-accent);
}
.brand--footer .brand__mark {
  width: 48px;
  transform: none;
  background-color: #ffffff;
  filter: none;
}
.brand--footer .wordmark,
.brand--footer .wordmark__education,
.brand--footer .wordmark__meridian {
  color: var(--c-on-accent);
}
.mck-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.fcol h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-on-accent) 75%, transparent);
  margin: 0 0 1rem;
  font-weight: 700;
}
.fcol a { display: block; padding: 0.35rem 0; color: var(--c-on-accent); font-size: 0.95rem; }
.fcol a:hover { color: var(--c-on-accent); opacity: 0.85; }
.fcol__fine {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--c-on-accent) 78%, transparent);
}
.mck-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--c-on-accent) 78%, transparent);
}

/* ---------- Messenger float ---------- */
.msg-float {
  position: fixed;
  right: 1.2rem;
  /* Safe-area only here; sticky/sg bars already fold it into --bottom-bar-h. */
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 999px;
  background: #0084ff;
  color: #ffffff;
  box-shadow: 0 10px 28px -12px rgba(17, 17, 17, 0.45);
  overflow: hidden;
  transition:
    width 0.35s ease,
    padding 0.35s ease,
    gap 0.35s ease,
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.msg-float:hover {
  background: #006fd6;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(17, 17, 17, 0.5);
}
.msg-float:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.msg-float svg {
  display: block;
  flex-shrink: 0;
}
.msg-float__text {
  max-width: 0;
  opacity: 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
.msg-float.is-expanded {
  width: auto;
  height: auto;
  min-height: 3.15rem;
  padding: 0.7rem 1.15rem 0.7rem 0.95rem;
  gap: 0.55rem;
}
.msg-float.is-expanded .msg-float__text {
  max-width: 18rem;
  opacity: 1;
}
body:has(.sticky-consult) .msg-float {
  bottom: calc(1.2rem + var(--bottom-bar-h));
}
@media (max-width: 560px) {
  .msg-float {
    right: 0.9rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    width: 3.25rem;
    height: 3.25rem;
  }
  .msg-float.is-expanded {
    padding: 0.65rem 1rem 0.65rem 0.85rem;
    gap: 0.45rem;
  }
  .msg-float.is-expanded .msg-float__text {
    font-size: 0.84rem;
  }
  body:has(.sticky-consult) .msg-float {
    bottom: calc(0.9rem + var(--bottom-bar-h));
  }
}

/* ---------- Sticky consult banner ---------- */
.sticky-consult {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-top: 1px solid color-mix(in srgb, var(--c-accent) 70%, #000);
  /* Measured into --bottom-bar-h, so iPhone home-indicator clearance is included. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sticky-consult__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.sticky-consult__text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.sticky-consult__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--c-on-accent);
  color: var(--c-accent);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.sticky-consult__cta:hover {
  background: var(--c-surface);
  color: var(--c-accent-hover);
}
@media (max-width: 620px) {
  .sticky-consult__inner {
    gap: 0.5rem 0.85rem;
    padding: 0.5rem var(--gutter);
  }
  .sticky-consult__text {
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: center;
  }
  .sticky-consult__cta {
    padding: 0.65rem 1.15rem;
    font-size: 0.8rem;
    min-height: 44px;
  }
}

@media (max-width: 960px) {
  :root { --gutter: var(--gutter-sm); }
  .featured__grid { grid-template-columns: 1fr; }
  .help__grid, .insights__grid { grid-template-columns: 1fr 1fr; }
  .faq-groups { grid-template-columns: 1fr; }
  .mck-footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .sticky-consult__inner { padding: 0.55rem var(--gutter); }
  .svc-hero {
    min-height: 0;
    margin-top: 0;
    display: block;
    padding: clamp(2.4rem, 5vw, 3.25rem) 0 clamp(2.25rem, 4vw, 3rem);
  }
  .svc-hero__inner { grid-template-columns: 1fr; gap: 2.25rem; align-items: start; }
  .svc-hero__panel { max-width: none; }
  .svc-hero__rotator { max-width: 30rem; }
  .svc-hero__mentor {
    width: min(360px, 100%);
    max-width: 380px;
    margin-right: 0;
    justify-self: start;
  }
  .med-cta {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1.35rem;
  }
  .med-cta__note {
    flex: 1 1 100%;
    font-size: clamp(1.4rem, 5.5vw, 1.85rem);
  }
  .svc-balance { grid-template-columns: 1fr; }
  .svc-story {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .svc-story__photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
  .svc-decide { grid-template-columns: 1fr; }
  .svc-quotes { grid-template-columns: 1fr; gap: 1.75rem; }
  .svc-guide { grid-template-columns: 1fr; }
  .svc-guide__media { max-width: 240px; }
  .services-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Single column now, so the desktop offset would just leave a ragged edge. */
  .uni-visual__stack {
    width: 100%;
    max-width: 22.5rem;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Single-column page layouts.
   These live here, after the components they override, because a rule inside a
   media query still loses to a later rule of equal specificity. */
@media (max-width: 860px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr); }
  .contact__form-row { grid-template-columns: minmax(0, 1fr); }
  .services-page__grid { grid-template-columns: minmax(0, 1fr); }
  .advisers-page__grid { grid-template-columns: minmax(0, 1fr); }
  /* Anything under 16px makes iOS Safari zoom in when the field is focused. */
  .contact__form input,
  .contact__form select,
  .contact__form textarea {
    font-size: 16px;
  }
}
@media (max-width: 620px) {
  .help__grid, .insights__grid, .mck-footer__cols { grid-template-columns: 1fr; }
  .home-faq__list { grid-template-columns: 1fr; }
  .home-faq .faq-item:nth-last-child(-n + 2) { border-bottom: 0; }
  .home-faq .faq-item:last-child { border-bottom: 1px solid var(--c-border); }
  .btn-solid,
  .btn-ghost,
  .connect .btn-outline-light { width: 100%; }
  .connect__actions,
  .faq-cta__actions { width: 100%; }
  .svc-story__split,
  .svc-story__facts { grid-template-columns: 1fr; }
  /* Comfortable thumb targets in the footer's link stacks. */
  .fcol a { padding: 0.5rem 0; }
}

/* ---------- UCAT & Medicine page: responsive ---------- */
@media (max-width: 1180px) {
  .med-rail__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 1.5rem;
  }
  .med-rail__step:nth-child(4n)::before { display: none; }
  .med-matrix__head,
  .med-matrix__row { grid-template-columns: 1.1fr 1.2fr 0.9fr 0.95fr 1.9fr; gap: 1rem; }
}
@media (max-width: 960px) {
  .svc-hero--med { min-height: 0; }
  .med-rail { padding-top: 0.35rem; }
  .med-matrix-lead {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .med-weights {
    max-width: 24rem;
    min-height: 10.5rem;
  }
  .med-weights__track { height: 7.5rem; }
  .med-routes { grid-template-columns: 1fr; }
  .med-myths { grid-template-columns: 1fr; }
  .med-myths > li:nth-last-child(-n + 2) { border-bottom: 0; }
  .med-myths > li:last-child { border-bottom: 1px solid var(--c-border); }
  .med-next { grid-template-columns: 1fr; }
  .med-path {
    --med-path-gutter: 1.55rem;
    padding-left: 0.15rem;
  }
  .med-path__step {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 2.15rem;
    padding-right: 0;
  }
  .med-path__step--left,
  .med-path__step--right {
    padding-left: 2.15rem;
    padding-right: 0;
  }
  .med-path__step--left .med-path__box,
  .med-path__step--right .med-path__box {
    transform: translate3d(0, 1.25rem, 0);
  }
  .med-path__step::before,
  .med-path__step--left::before,
  .med-path__step--right::before {
    left: var(--med-path-rail);
    right: auto;
    transform: translateX(-50%);
  }
  .med-matrix__head { display: none; }
  .med-matrix__row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1.15rem 1.2rem 1.35rem;
  }
  .med-matrix__cell::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.12rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .med-matrix__note { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .med-rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-rail__step:nth-child(4n)::before { display: block; }
  .med-rail__step:nth-child(2n)::before { display: none; }
  .med-next__cards { grid-template-columns: 1fr; }
}

/* ---------- University pathways page: responsive ---------- */
/* Below this the gutter beside the preference card is too narrow for a word to
   sit in, so only the ones in the bands above and below it are kept. */
@media (max-width: 1320px) {
  .uni-cloud__word:nth-child(n + 5) { display: none; }
}

/* ============================================================
   Analysis articles (art-*)
   Long-form editorial pages under Resources → Our Analysis.
   Structure comes from whitespace and type alone: no horizontal
   rules, no tinted panels, no eyebrow labels above headings.
   ============================================================ */
.art {
  --art-measure: 56rem;
  --art-narrow: 34rem;
  color: var(--c-ink);
  background: var(--c-surface);
}

/* Every band centres the same reading measure, so the whole page reads as
   one column instead of a narrow strip inside the site's wide grid. */
.art .shell {
  max-width: calc(var(--art-measure) + var(--gutter) * 2);
}

/* ---------- Article header ---------- */
.art-head {
  padding: clamp(1.75rem, 3.5vw, 2.85rem) 0 0;
}
.art-crumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  font-size: 0.9rem;
  color: var(--c-muted);
}
.art-crumb a {
  color: var(--c-muted);
  text-decoration: underline;
  text-decoration-color: #d2d2d2;
  text-underline-offset: 3px;
}
.art-crumb a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }
.art-crumb span[aria-hidden] { color: #c9c9c9; }
.art-head h1 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.05rem, 4.6vw, 3.15rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  color: var(--c-ink);
}
.art-head__lead {
  margin: 0;
  font-size: clamp(1.14rem, 1.6vw, 1.3rem);
  line-height: 1.56;
  color: var(--c-muted);
}
.art-head__lead + .art-head__lead { margin-top: 0.9rem; }
.art-head__lead strong { color: var(--c-ink); font-weight: 650; }

.art-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.95rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: 0.86rem;
  color: #8f8f8f;
}
.art-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.art-meta__item strong { color: var(--c-body); font-weight: 600; }
.art-meta__item:not(:last-child)::after {
  content: "\00B7";
  margin-left: 0.6rem;
  color: #cdcdcd;
}

/* ---------- Opening summary ---------- */
.art-tldr {
  padding: clamp(2rem, 4vw, 2.85rem) 0 0;
}
.art-tldr__head { margin-bottom: 1.35rem; }
.art-tldr__head h2 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.art-tldr__aside {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.art-tldr__grid {
  display: grid;
  gap: 1.15rem;
}
.art-tldr__name {
  margin: 0 0 0.2rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.art-tldr__name a { color: inherit; }
.art-tldr__name a:hover { color: var(--c-accent); }
.art-tldr__line {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--c-body);
}

/* One quiet line of in-page links, not a nav bar. */
.art-jump {
  margin: clamp(1.6rem, 3vw, 2.25rem) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.art-jump a {
  color: var(--c-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: #d2d2d2;
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}
.art-jump a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* ---------- Body sections ---------- */
.art-body {
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.art-block { margin-bottom: clamp(2.85rem, 5.5vw, 4.25rem); }
.art-block:last-child { margin-bottom: 0; }
.art-block__head { margin-bottom: 1.3rem; }
.art-block__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.9vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--c-ink);
}
.art-block__head h2 + p { margin-top: 0.9rem; }

/* ---------- Prose ---------- */
.art-prose {
  font-size: 1.15rem;
  line-height: 1.76;
  color: var(--c-body);
}
.art-prose > * { margin: 0; }
.art-prose > * + * { margin-top: 1.2rem; }
.art-prose strong { color: var(--c-ink); font-weight: 650; }
.art-prose em { font-style: italic; }
.art-prose a:not(.link-arrow) {
  color: var(--c-accent);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 40%, #ffffff);
  transition: text-decoration-color 0.16s ease;
}
.art-prose a:not(.link-arrow):hover { text-decoration-color: var(--c-accent); }
.art-prose h3 {
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.28rem, 2.1vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.art-prose h3 + p { margin-top: 0.75rem; }
.art-prose h4 {
  margin-top: 1.9rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--c-ink);
}
.art-prose h4 + p { margin-top: 0.6rem; }

/* Generic prose lists. Deliberately scoped with `>` so the bullet and counter
   styling cannot reach the lists inside art-* components, which style their
   own markers and would otherwise be overridden from here. */
.art-prose > ul,
.art-prose > ol {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.art-prose > ul > li,
.art-prose > ol > li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.65;
}
.art-prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 0.62rem;
  height: 2px;
  background: var(--c-accent);
}
.art-prose > ol { counter-reset: art-ol; }
.art-prose > ol > li { counter-increment: art-ol; padding-left: 1.95rem; }
.art-prose > ol > li::before {
  content: counter(art-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--c-accent);
}
.art-prose > ul.art-ticks > li { padding-left: 1.85rem; }
.art-prose > ul.art-ticks > li::before {
  left: 0;
  top: 0.28em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--c-accent);
  -webkit-mask: var(--sg-tick) center / contain no-repeat;
  mask: var(--sg-tick) center / contain no-repeat;
}

/* Lead-in paragraph */
.art-lead {
  margin: 0;
  font-size: clamp(1.18rem, 1.6vw, 1.32rem);
  line-height: 1.54;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--c-ink);
}

/* ---------- Sub-topic note ---------- */
/* Reads as a small heading plus paragraphs, so it sits inside the article
   rather than interrupting it as a panel. */
.art-callout {
  margin: 1.9rem 0 0;
}
.art-callout__label {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--c-ink);
}
.art-callout p {
  margin: 0;
  font-size: 1.09rem;
  line-height: 1.7;
  color: var(--c-body);
}
.art-callout p + p { margin-top: 0.75rem; }
.art-callout strong { color: var(--c-ink); font-weight: 650; }

/* ---------- Pull quote ---------- */
.art-pull {
  margin: clamp(2.1rem, 4vw, 2.85rem) 0;
  padding: 0 0 0 clamp(1.35rem, 2.6vw, 2rem);
  border-left: 2px solid var(--c-accent);
}
.art-pull blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.art-pull blockquote p { margin: 0; }
.art-pull blockquote p + p { margin-top: 0.7rem; }
.art-pull__hit { color: var(--c-accent); }
.art-pull figcaption {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--c-muted);
}

/* ---------- In-article data figure ---------- */
/* Kept narrow and centred: a short list of numbers is easier to track when
   the name and its value are not a full text measure apart. */
.art-figure {
  max-width: var(--art-narrow);
  margin: clamp(2.1rem, 4vw, 2.85rem) auto;
}
.art-figure .art-figure__title {
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--c-ink);
}
.art-figure .art-figure__sub {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-muted);
}
.art-figure__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.art-figure__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}
.art-figure__name { font-size: 1rem; line-height: 1.4; color: var(--c-body); }
.art-figure__row--hi .art-figure__name { color: var(--c-ink); font-weight: 650; }
.art-figure__tag {
  margin-left: 0.45rem;
  font-size: 0.82rem;
  color: #a6a6a6;
  white-space: nowrap;
}
.art-figure__val {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}
.art-figure__row--hi .art-figure__val { color: var(--c-accent); }
.art-figure figcaption {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #8f8f8f;
}

/* ---------- Subject sections ---------- */
/* With no rules on the page, the gap between subjects is the only thing
   separating them, so it has to be clearly larger than any gap inside one. */
.art-subject { margin-bottom: clamp(3.5rem, 7vw, 5.75rem); }
.art-subject:last-child { margin-bottom: 0; }
.art-subject__top { margin-bottom: 1.2rem; }
.art-subject__titles { min-width: 0; }
.art-subject h2 {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  color: var(--c-ink);
}
.art-subject__deck {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--c-muted);
}

/* Summary line under the subject deck */
.art-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0.9rem 0 1.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--c-muted);
}
.art-pill { font-weight: 500; }
/* Trailing rather than leading separators: when the line wraps, a dot left
   behind at the end of a line reads fine, one starting a line does not. */
.art-pill:not(:last-child)::after {
  content: "\00B7";
  margin-left: 0.9rem;
  color: #cdcdcd;
}
.art-pill--accent { color: var(--c-ink); font-weight: 650; }
.art-pill--dim { color: #a2a2a2; }

.art-subject__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  align-items: start;
}
.art-subject__main { min-width: 0; }
/* The fact block reads as a standfirst, so it leads the section. */
.art-subject__side { min-width: 0; order: -1; }

/* ---------- "At a glance" data block ---------- */
.art-facts { margin: 0; }
.art-facts__title {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.art-facts dl { margin: 0; display: grid; gap: 0.5rem; }
.art-facts dl > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
}
.art-facts dt {
  font-size: 0.95rem;
  color: var(--c-muted);
}
.art-facts dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.art-facts dd em { color: var(--c-body); font-style: normal; }

/* Maths-load meter */
.art-load {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.art-load__pips { display: inline-flex; gap: 0.22rem; }
.art-load__pip {
  width: 0.85rem;
  height: 0.32rem;
  background: #e0e0e0;
}
.art-load__pip.is-on { background: var(--c-accent); }
.art-load__text { font-size: 0.92rem; color: var(--c-body); }

/* ---------- "Take it if / think twice if" ---------- */
.art-verdict {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
  margin: 2.1rem 0 0;
}
.art-verdict__col { min-width: 0; }
.art-verdict__col h4 {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.art-verdict__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.art-verdict__col li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-body);
}
.art-verdict__col--yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.24em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--c-accent);
  -webkit-mask: var(--sg-tick) center / contain no-repeat;
  mask: var(--sg-tick) center / contain no-repeat;
}
.art-verdict__col--no li::before {
  content: "";
  position: absolute;
  left: 0.12rem;
  top: 0.78em;
  width: 0.7rem;
  height: 2px;
  background: #bdbdbd;
}

/* ---------- Head-to-head comparison ---------- */
.art-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
  row-gap: 1.35rem;
  margin: 2.1rem 0 0;
}
.art-vs__col { min-width: 0; }
.art-vs__head { margin-bottom: 1.1rem; }
.art-vs__name {
  margin: 0 0 0.15rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.022em;
  color: var(--c-ink);
}
.art-vs__tag {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-muted);
}
.art-vs__rows { margin: 0; display: grid; gap: 1.35rem; }
.art-vs__rows > div { display: grid; gap: 0.15rem; }
.art-vs__rows dt {
  font-size: 0.88rem;
  color: var(--c-muted);
}
.art-vs__rows dd {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--c-ink);
}

/* Subgrid puts both columns' rows on shared baselines, so the comparison can
   be read across as well as down. Without it the columns simply auto-size. */
@supports (grid-template-rows: subgrid) {
  .art-vs { grid-template-rows: auto repeat(6, auto); }
  .art-vs__col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
  .art-vs__rows {
    grid-template-rows: subgrid;
    grid-row: 2 / -1;
  }
  .art-vs__head { margin-bottom: 0; }
}

/* ---------- Numbered steps ---------- */
.art-steps {
  list-style: none;
  counter-reset: art-steps;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}
.art-steps > li {
  counter-increment: art-steps;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.9rem;
}
.art-steps > li::before {
  content: counter(art-steps, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  color: #b8b8b8;
}
.art-steps h3 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--c-ink);
}
.art-steps p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.66;
  color: var(--c-body);
}
.art-steps p + p { margin-top: 0.6rem; }

/* ---------- Claim / correction ---------- */
.art-myths {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.7rem;
}
.art-myth__claim {
  margin: 0 0 0.45rem;
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.4;
  color: #8a8a8a;
}
.art-myth__truth {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--c-body);
}
.art-myth__truth strong { color: var(--c-ink); font-weight: 650; }

/* ---------- Worked example: two timetables ---------- */
.art-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  margin: 2.1rem 0 0;
}
.art-stack__card { min-width: 0; }
.art-stack__label {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.art-stack__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.3rem; }
.art-stack__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 1rem;
  color: var(--c-ink);
}
.art-stack__card--good .art-stack__list li.is-hi { font-weight: 650; }
.art-stack__tag {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--c-muted);
}
.art-stack__card--good .art-stack__list li.is-hi .art-stack__tag { color: var(--c-accent); }
.art-stack__note { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--c-body); }

/* ---------- Sources / method note ---------- */
.art-source { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.art-source h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.art-source p,
.art-source li { font-size: 0.94rem; line-height: 1.65; color: #7a7a7a; }
.art-source p { margin: 0 0 0.7rem; }
.art-source ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.art-source ul + p { margin-top: 0.9rem; }
.art-source li { position: relative; padding-left: 1.15rem; }
.art-source li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: #c2c2c2;
}
.art-source a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Author note ---------- */
.art-author { margin: clamp(2.5rem, 5vw, 3.25rem) 0 0; }
.art-author__label {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.art-author p { margin: 0; font-size: 1.04rem; line-height: 1.68; color: var(--c-body); }
.art-author p + p { margin-top: 0.7rem; }
.art-author strong { color: var(--c-ink); font-weight: 650; }

/* The shared CTA block ships with a rule on top and a side-by-side split that
   squeezes the copy at this measure. In the article it reads as a closing note. */
.art .faq-cta {
  display: block;
  border-top: 0;
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-top: 0;
}
.art .faq-cta__actions { margin-top: 1.35rem; }

/* ---------- Read next ---------- */
.art-next { padding: clamp(2.75rem, 5vw, 3.75rem) 0 0; }
.art-next h2 {
  margin: 0 0 1.35rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.art-next__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.art-next__card {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.3rem 1.5rem;
  min-width: 0;
}
.art-next__type {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.art-next__card h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--c-ink);
  transition: color 0.18s ease;
}
.art-next__card:hover h3 { color: var(--c-accent); }
.art-next__card p {
  grid-column: 2;
  margin: 0.3rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-body);
}
.art-next__card .link-arrow { grid-column: 2; padding-top: 0.55rem; font-size: 0.95rem; }

/* ---------- Analysis article: responsive ---------- */
@media (max-width: 860px) {
  .art-vs,
  .art-verdict,
  .art-stack { grid-template-columns: minmax(0, 1fr); }
  .art-verdict { gap: 1.5rem; }
  .art-prose { font-size: 1.06rem; }

  /* Stacked, so the shared row baselines have nothing left to align to. */
  .art-vs {
    grid-template-rows: none;
    row-gap: 2.25rem;
  }
  .art-vs__col {
    display: block;
    grid-row: auto;
  }
  .art-vs__rows {
    grid-template-rows: none;
    grid-row: auto;
    gap: 1.05rem;
  }
  .art-vs__head { margin-bottom: 1.1rem; }
}
@media (max-width: 700px) {
  /* Label and value stack here, so the gap between rows has to grow to stay
     bigger than the gap inside one. */
  .art-facts dl { gap: 0.9rem; }
  .art-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .art-next__card { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .art-next__card p,
  .art-next__card .link-arrow { grid-column: 1; }
}

/* ============================================================
   Shared phone polish (kept last so it wins equal-specificity ties)
   Desktop rules above are left alone; these only tighten narrow viewports.
   ============================================================ */
@media (max-width: 720px) {
  .uni-stuck__item {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.35rem 1rem;
  }
  .uni-stuck__read { grid-column: 2; }

  /* Let the hero typewriter question wrap so the full phrase stays readable. */
  .hero-search__display {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

@media (max-width: 480px) {
  .sg-specs {
    grid-template-columns: 1fr;
    row-gap: 1.1rem;
  }
  .sg-specs > div,
  .sg-specs > div:nth-child(odd) {
    padding: 0;
    border-left: 0;
  }

  .hero-search__btn {
    padding: 0 1rem;
    font-size: 0.88rem;
  }
  .hero-search__display { font-size: 0.92rem; }
  .hero-search__icon { margin-left: 12px; }

  .med-weights { gap: 0.35rem; }
  .med-weights__pct { font-size: 0.78rem; }
  .med-weights__label {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  /* Give Calendly the full device width on the smallest phones. */
  .get-started__scheduler {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 380px) {
  .mentor-card__creds { gap: 0.35rem; }
  .mentor-card__cred-num { font-size: 1.05rem; }
  .mentor-card__cred-label { font-size: 0.64rem; }
}