/* ============================================================
   ACG Growth Partners - homepage concept v2
   Navy / gold / white private-wealth system, chess brand motif
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/mavenpro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/mavenpro-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}

/* ---- Tokens ---- */
:root {
  /* Navy scale per the Master Website Developer Brief section 2.
     Deep Navy #020A1A, Primary Navy #06142B, Mid Navy #0B2346. The previous
     values were sampled from the Membership Guide; the brief supersedes them. */
  --navy-950: #020A1A;   /* hero backgrounds, footer, premium dark panels */
  --navy-900: #06142B;   /* navigation, cards, service sections, page bands */
  --navy-800: #0B2346;   /* hover states, layered panels, form sidebars */
  --navy-750: #12294F;
  --navy-line: #1B3157;

  /* Warm Gold #C99A2E primary accent, Light Gold #E8C45C highlights */
  --gold-100: #F3E3B4;
  --gold-300: #E8C45C;
  --gold-500: #C99A2E;
  --gold-700: #8F6A1E;
  --gold-ink: #7E5E18;   /* gold for text on white, AA large */
  /* The dark stops were #8A651C, which gave navy button labels only 3.73:1 -
     under the 4.5:1 AA threshold - so gold buttons read as washed out at their
     edges. Lifted to #A87E24, which keeps the bronze depth of the sweep while
     clearing AA across the whole button. */
  --gold-grad: linear-gradient(115deg, #A87E24 0%, #E8C45C 42%, #C99A2E 60%, #A87E24 100%);

  --ivory: #FFFFFF;
  --surface: #E9EDF3;    /* Soft Grey: borders, dividers, subtle surfaces */
  --warm: #F7F4EE;       /* Warm White: light backgrounds and forms */
  --ink: #101B33;
  /* Brief section 2 specifies Slate #66738A for secondary copy, but at that
     value it returns 4.36:1 on the brief's own warm white and 4.08:1 on its
     soft grey, both under the 4.5:1 the brief's own WCAG 2.2 AA target
     requires for normal text. Darkened to the nearest shade that clears AA
     on all three surfaces: 5.38 on white, 4.90 on warm, 4.58 on soft grey. */
  --ink-soft: #5E6B82;   /* Slate, AA-corrected */

  --on-navy: #E9EEF8;
  --on-navy-soft: #A6B4D1;

  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Maven Pro', 'Segoe UI', sans-serif;


  /* 8px spacing scale (brief section 2). Every gap and pad derives from this. */
  --sp-1: 0.5rem;    /* 8px  */
  --sp-2: 1rem;      /* 16px */
  --sp-3: 1.5rem;    /* 24px */
  --sp-4: 2rem;      /* 32px */
  --sp-5: 2.5rem;    /* 40px */
  --sp-6: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 4.5rem;    /* 72px */
  --sp-13: 6.5rem;   /* 104px */

  /* Section rhythm, held inside the brief's stated ranges at every breakpoint. */
  --sp-7: 3.5rem;    /* 56px */
  --section-y: var(--sp-4);      /* mobile: 32px */
  --section-y-lg: var(--sp-5);   /* mobile finale: 40px */

  --container: 80rem;   /* 1280px, the top of the brief's range */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-menu: 50;
  --z-header: 55;
  --z-loader: 60;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id], main[id] { scroll-margin-top: 5rem; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--navy-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
::selection { background: var(--gold-500); color: var(--navy-950); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---- Icons ---- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico, .svc-ico, .pillar-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.ico { width: 1.1rem; height: 1.1rem; color: var(--gold-500); }

/* ---- Type ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.7vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.display em { font-style: normal; color: var(--gold-ink); }

.section-head {
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.section-head::before {
  content: '';
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-bottom: 1.6rem;
  background: var(--gold-grad);
}
.section-head p {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.35s, background-position 0.5s, color 0.35s, border-color 0.35s;
}
.btn-gold {
  background: var(--gold-grad);
  background-size: 160% 100%;
  background-position: 0% 0;
  color: var(--navy-950);
  border: none;
}
.btn-gold:hover { background-position: 90% 0; }

.btn-ghost { color: var(--on-navy); border-color: rgba(192, 146, 58, 0.55); }
.btn-ghost:hover { border-color: var(--gold-300); color: var(--gold-100); }

.btn-navy { background: var(--navy-900); color: var(--on-navy); }
.btn-navy:hover { background: var(--navy-800); }

.btn-tier { color: var(--on-navy); border-color: rgba(192, 146, 58, 0.45); width: 100%; }
.btn-tier:hover { border-color: var(--gold-300); color: var(--gold-100); }

.btn-lg { padding: 1.15rem 2.6rem; font-size: 1rem; }

/* ---- Loader ---- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: transparent;
}
.loader-curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--navy-950); }
.loader-curtain-l { left: 0; }
.loader-curtain-r { right: 0; }
.loader-inner { position: relative; z-index: 1; display: grid; place-items: center; gap: 0.4rem; }
/* The ring canvas sits behind the wordmark and spans the viewport, so the
   glow can bleed past the logo the way it does in the approved artwork. */
.loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.loader-caption {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--on-navy-soft);
  text-align: center;
  margin-top: 0.25rem;
}
.loader-dots {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.9rem;
}
.loader-dots span {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: rgba(232, 196, 92, 0.28);
}
/* The middle dot is the lit one in the approved artwork; the pulse walks
   through all three so the loader never looks frozen if JS is slow. */
.loader-dots span:nth-child(2) { background: var(--gold-500); }
@media (prefers-reduced-motion: no-preference) {
  .loader-dots span { animation: loaderDot 1.35s ease-in-out infinite; }
  .loader-dots span:nth-child(1) { animation-delay: -0.45s; }
  .loader-dots span:nth-child(2) { animation-delay: -0.225s; }
}
@keyframes loaderDot {
  0%, 100% { background: rgba(232, 196, 92, 0.28); transform: scale(1); }
  40%      { background: var(--gold-500); transform: scale(1.35); }
}
.loader-mark { text-align: center; }
/* The wordmark and counter stay hidden for the few milliseconds until the
   display face is ready — see the inline script in Base.astro. This prevents
   the flash of a fallback serif before Marcellus swaps in. */
.loader-mark,
.loader-caption,
.loader-dots { opacity: 0; }
.fonts-ready .loader-mark,
.fonts-ready .loader-caption,
.fonts-ready .loader-dots { opacity: 1; }
.loader-logo {
  display: block;
  width: clamp(11rem, 26vw, 16rem);
  height: auto;
  margin-inline: auto;
}
.loader-rule {
  display: block;
  height: 1px;
  margin: 1.1rem auto 0;
  width: 60%;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: center;
}

/* ---- Header ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.site-header.scrolled,
.site-header.always-scrolled {
  background: rgba(1, 8, 26, 0.97);
  box-shadow: 0 1px 0 rgba(192, 146, 58, 0.35);
}
.header-inner {
  width: min(88rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Supplied logo, keyed to transparency by scripts/build_logo.py. Sized by
   height so the lockup keeps its proportions at every breakpoint. */
.brand-logo { display: block; height: 2.15rem; width: auto; }
.brand-logo-full { height: 4.6rem; }
@media (max-width: 60rem) { .brand-logo { height: 1.85rem; } }
@media (max-width: 40rem) { .brand-logo { height: 1.65rem; } .brand-logo-full { height: 3.6rem; } }

/* Primary nav + dropdowns */
.main-nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.7rem); }
.main-nav > a, .nav-trigger {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--on-navy);
  letter-spacing: 0.02em;
  position: relative;
  padding-block: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.main-nav > a::after, .nav-trigger::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.main-nav > a:hover::after,
.nav-item:hover .nav-trigger::after { transform: scaleX(1); transform-origin: left; }
.main-nav > a.active::after,
.nav-item.active .nav-trigger::after { transform: scaleX(1); transform-origin: left; background: var(--gold-grad); height: 2px; }

.chev { width: 0.8rem; height: 0.8rem; fill: none; stroke: var(--gold-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-out); }
.nav-item:hover .chev { transform: rotate(180deg); }

.nav-item { position: relative; }
.nav-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  min-width: 24rem;
  padding: 0.75rem;
  background: rgba(1, 8, 26, 0.98);
  border: 1px solid rgba(192, 146, 58, 0.35);
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s 0.3s;
}
.nav-menu-sm { min-width: 18rem; }
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.nav-menu a {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  transition: background-color 0.3s;
}
.nav-menu a:hover { background: rgba(192, 146, 58, 0.1); }
.nav-menu .ico { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.nav-menu span { display: grid; gap: 0.15rem; }
.nav-menu strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ivory);
}
.nav-menu span { font-size: 0.76rem; color: var(--on-navy-soft); line-height: 1.5; }

.header-actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.btn-nav { padding: 0.68rem 1.25rem; font-size: 0.8rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(192, 146, 58, 0.5);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 20px;
  margin-inline: auto;
  background: var(--gold-300);
  transition: transform 0.35s var(--ease-out);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* ---- Mobile menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--navy-950);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s 0.45s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease-out); }
.mobile-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.mobile-nav > a,
.m-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 5.2vw, 1.9rem);
  line-height: 1.2;
  color: var(--ivory);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--navy-line);
  padding-block: 0.55rem;
  cursor: pointer;
  transition: color 0.3s, padding-left 0.35s var(--ease-out);
}
.mobile-nav > a:hover,
.m-trigger:hover { color: var(--gold-300); padding-left: 0.5rem; }
.mobile-nav > a.active,
.m-group.active > .m-trigger { color: var(--gold-300); border-bottom-color: var(--gold-500); }

/* Accordion groups */
.m-group { display: flex; flex-direction: column; }
.m-trigger .chev {
  width: 1.1rem; height: 1.1rem;
  flex: 0 0 auto;
  transition: transform 0.35s var(--ease-out);
}
.m-group.open .m-trigger { color: var(--gold-300); }
.m-group.open .m-trigger .chev { transform: rotate(180deg); }

.m-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.m-group.open .m-sub { max-height: 30rem; opacity: 1; }
.m-sub a {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--on-navy-soft);
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 1px solid rgba(192, 146, 58, 0.35);
  margin-left: 0.2rem;
  transition: color 0.3s, border-color 0.3s;
}
.m-sub > div > a:first-child { margin-top: 0.6rem; }
.m-sub > div > a:last-child { margin-bottom: 0.5rem; }
.m-sub a:hover { color: var(--gold-100); border-color: var(--gold-300); }
.mobile-menu-foot { display: grid; gap: 1.2rem; }
.mobile-menu-foot p {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}
.mobile-menu .btn { align-self: start; }

/* ---- Hero (chess) ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  color: var(--on-navy);
  background: var(--navy-950);
}
.hero-media { position: absolute; inset: 0; }
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 55%;
}
/* navy wash + warm gold key light over the chess piece */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 58% at 74% 56%, rgba(232, 196, 104, 0.30) 0%, rgba(232, 196, 104, 0) 68%),
    linear-gradient(88deg, rgba(1, 8, 26, 0.95) 0%, rgba(1, 8, 26, 0.8) 36%, rgba(3, 17, 41, 0.22) 62%, rgba(3, 17, 41, 0.34) 100%),
    linear-gradient(to top, rgba(1, 8, 26, 0.92) 0%, rgba(1, 8, 26, 0) 34%),
    linear-gradient(to bottom, rgba(1, 8, 26, 0.72) 0%, rgba(1, 8, 26, 0) 22%);
}
.hero-content {
  position: relative;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: 8.5rem 6.5rem;
}
.hero-division {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.6rem;
  padding-left: 3.4rem;
  position: relative;
}
.hero-division::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2.4rem; height: 1px;
  background: var(--gold-500);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.3rem);
  line-height: 1.08;
  color: var(--ivory);
  max-width: 14em;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hero-title .line > span { display: block; will-change: transform; }
.line-gold > span { color: var(--gold-300); }
.hero-copy {
  margin-top: 1.8rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--on-navy);
}
.hero-cta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;       /* tightened at the client's request */
  max-width: 36rem;   /* keeps buttons clear of the 2026 badge */
}
.hero-badge {
  position: absolute;
  right: calc(var(--gutter) * 1.2);
  bottom: 3rem;
  display: grid;
  place-items: center;
  gap: 0.3rem;
  width: 9.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(192, 146, 58, 0.65);
  background: rgba(1, 8, 26, 0.62);
  text-align: center;
  align-content: center;
}
.hero-badge::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(192, 146, 58, 0.4);
  animation: badge-spin 40s linear infinite;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
.hero-badge span {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  max-width: 7em;
}
.hero-badge strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--ivory);
  letter-spacing: 0.06em;
}

/* ---- Positioning / More than recruitment ---- */
.positioning {
  background: var(--ivory);
  padding-block: var(--section-y);
}
.pos-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pos-statement .display { max-width: 14em; }
.pos-side > p { font-size: 1.0625rem; color: var(--ink-soft); max-width: 55ch; }
.fact-list { margin-top: 1.6rem; }
.fact-list li {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.85rem;
  border-top: 1px solid rgba(192, 146, 58, 0.45);
}
.fact-list li:last-child { border-bottom: 1px solid rgba(192, 146, 58, 0.45); }
.fact-list strong { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.fact-list span { font-size: 0.875rem; color: var(--ink-soft); }

/* Four pillars */
.pillars {
  margin-top: clamp(2rem, 5vw, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(192, 146, 58, 0.4);
  border: 1px solid rgba(192, 146, 58, 0.4);
}
.pillar {
  background: var(--ivory);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: background-color 0.4s;
}
.pillar:hover { background: var(--warm); }
.pillar-ico { width: 2.1rem; height: 2.1rem; color: var(--gold-ink); margin-bottom: 1.1rem; }
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.pillar p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---- Services ---- */
.services {
  background: var(--navy-900);
  color: var(--on-navy);
  padding-block: var(--section-y);
  position: relative;
}
.services::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 146, 58, 0.5), transparent);
}
.services .display { color: var(--ivory); }
.services .section-head p { color: var(--on-navy-soft); }

.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.svc { background: var(--navy-900); }
.svc a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.7rem, 3vw, 2.2rem);
  transition: background-color 0.45s var(--ease-out);
}
.svc a:hover { background: rgba(192, 146, 58, 0.07); }
.svc-ico {
  width: 2.1rem; height: 2.1rem;
  color: var(--gold-500);
  margin-bottom: 1.2rem;
  transition: color 0.35s, transform 0.45s var(--ease-out);
}
.svc a:hover .svc-ico { color: var(--gold-300); transform: translateY(-3px); }
.svc h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ivory);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.svc p { font-size: 0.9rem; color: var(--on-navy-soft); flex: 1; }
.svc-more {
  margin-top: 1.3rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.svc-more i { transition: transform 0.4s var(--ease-out); font-style: normal; }
.svc a:hover .svc-more i { transform: translateX(5px); }

/* ---- The ACG difference ---- */
.difference {
  background: var(--warm);
  padding-block: var(--section-y);
}
.diff-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.diff-media { position: relative; }

/* Navy-graded image frame: keeps the gold warm while pushing
   bright stock backgrounds toward the brand's deep navy */
.media-frame {
  position: relative;
  display: block;
  border: 1px solid rgba(192, 146, 58, 0.5);
  overflow: hidden;
}
.media-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.06) brightness(0.88);
}
.media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(1, 8, 26, 0.62) 0%, rgba(1, 8, 26, 0.12) 42%, rgba(1, 8, 26, 0.34) 100%);
  mix-blend-mode: multiply;
}
.diff-media figcaption {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-ink);
  letter-spacing: 0.02em;
}
.diff-body .section-head { margin-bottom: 2rem; }
.diff-list { display: grid; gap: 0; margin-bottom: 2rem; }
.diff-list li {
  display: flex;
  gap: 1.2rem;
  padding-block: 1.3rem;
  border-top: 1px solid rgba(16, 27, 51, 0.12);
}
.diff-list li:first-child { border-top: none; padding-top: 0; }
.diff-list .ico { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--gold-ink); }
.diff-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.diff-list p { font-size: 0.9rem; color: var(--ink-soft); }

.pull-quote {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--navy-900);
  border-left: none;
  text-align: center;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.3;
  color: var(--ivory);
  max-width: 24ch;
  margin-inline: auto;
}
.pull-quote cite {
  display: block;
  margin-top: 1.4rem;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* ---- Book acquisitions ---- */
.advantage {
  position: relative;
  background: var(--navy-950);
  color: var(--on-navy);
  padding-block: var(--section-y);
  overflow: clip;
}
.advantage-media {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9) 42%, rgba(0,0,0,0.45));
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9) 42%, rgba(0,0,0,0.45));
}
.advantage-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.advantage .container { position: relative; }
.advantage .display { color: var(--ivory); }
.advantage .section-head { text-align: center; margin-inline: auto; }
.advantage .section-head::before { margin-inline: auto; }
.advantage .section-head p { color: var(--on-navy-soft); margin-inline: auto; }

.acq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  max-width: 56rem;
  margin-inline: auto;
}
.acq-col {
  border: 1px solid var(--navy-line);
  background: rgba(10, 31, 68, 0.45);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.acq-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ivory);
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(192, 146, 58, 0.35);
}
.acq-title .ico { width: 1.3rem; height: 1.3rem; }
.acq-list { display: grid; gap: 0.6rem; }
.acq-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--on-navy);
}
.acq-list li::before {
  content: '\25C6';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scale(0.55);
  color: var(--gold-500);
}

.acq-routes {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 56rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.route {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(192, 146, 58, 0.45);
  background: rgba(1, 8, 26, 0.6);
  transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--ease-out);
}
.route:hover { background: rgba(192, 146, 58, 0.1); border-color: var(--gold-300); }
.route .ico { width: 1.6rem; height: 1.6rem; }
.route-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ivory);
}
.route-sub { font-size: 0.85rem; color: var(--on-navy-soft); }
.route-sell { border-style: dashed; }

.acq-sub {
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold-300);
}

.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 56rem;
  margin-inline: auto;
}
.compare-card {
  border: 1px solid var(--navy-line);
  background: rgba(10, 31, 68, 0.45);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.compare-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ivory);
  margin-bottom: 1.2rem;
}
.compare-card-member {
  border-color: rgba(192, 146, 58, 0.65);
  background: rgba(10, 31, 68, 0.75);
  position: relative;
}
.compare-tag {
  position: absolute;
  top: 0; right: 0;
  transform: translateY(-50%);
  background: var(--gold-grad);
  color: var(--navy-950);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  margin-right: 1.2rem;
}
.compare-fee { color: var(--on-navy); font-size: 1rem; }
.compare-fee strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--gold-300);
  margin-right: 0.3rem;
}
.compare-plus {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
  margin-block: 0.7rem;
}
.compare-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 3.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(192, 146, 58, 0.65);
  font-family: var(--font-display);
  color: var(--gold-300);
  text-transform: uppercase;
  font-size: 0.9rem;
}

.example {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  border: 1px solid rgba(192, 146, 58, 0.45);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: rgba(1, 8, 26, 0.6);
  max-width: 56rem;
}
.example-title {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.6rem;
}
.example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); }
.example-cell { display: grid; gap: 0.4rem; align-content: start; }
.example-label { font-size: 0.85rem; color: var(--on-navy-soft); }
.example-num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  color: var(--ivory);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.example-cell-save { position: relative; padding-left: clamp(1.2rem, 3vw, 2.5rem); }
.example-cell-save::before {
  content: '';
  position: absolute;
  left: 0; top: 0.2rem; bottom: 0.2rem;
  width: 1px;
  background: rgba(192, 146, 58, 0.5);
}
.example-cell-save .example-num { color: var(--gold-300); }

/* ---- Succession ---- */
.succession {
  background: var(--ivory);
  padding-block: var(--section-y);
}
.succ-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.succ-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem 1.5rem;
  margin-bottom: 2.2rem;
}
.succ-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.succ-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.6rem; height: 1px;
  background: var(--gold-500);
}
.succ-media { position: relative; }

/* ---- Membership ---- */
.membership {
  background: var(--surface);
  padding-block: var(--section-y);
}
/* Five options since the Standard / Pay-on-Success card was added. The brief
   sets the behaviour per breakpoint, so the widths are not a free choice:
   5-up only where each card stays comfortably readable, then 3 + a centred 2,
   then 2-up, then a single column. Standard must be first at every size and
   must never be hidden behind an accordion. */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}

/* Below 1440px five cards start compressing the acquisition wording, so the
   row breaks to three with the remaining two centred beneath. Six tracks with
   each card spanning two is what centres the second row without a wrapper. */
@media (max-width: 1439px) {
  .tier-grid { grid-template-columns: repeat(6, 1fr); }
  .tier-grid > .tier { grid-column: span 2; }
  .tier-grid > .tier:nth-child(4) { grid-column: 2 / span 2; }
  .tier-grid > .tier:nth-child(5) { grid-column: 4 / span 2; }
}

/* Tablet: two per row, Standard first. */
@media (max-width: 1023px) {
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid > .tier,
  .tier-grid > .tier:nth-child(4),
  .tier-grid > .tier:nth-child(5) { grid-column: auto; }
}

/* Mobile: one card per row, Standard first. This replaced a horizontal scroll
   rail — a rail put Standard off-screen the moment a visitor swiped, and the
   whole point of the change is that the no-upfront option is the first thing
   seen. The brief also forbids hiding Standard inside an accordion. */
@media (max-width: 767px) {
  .tier-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    overflow: visible;
    padding: 0;
    margin-inline: 0;
  }
  .tier-grid > .tier,
  .tier-grid > .tier:nth-child(4),
  .tier-grid > .tier:nth-child(5) { grid-column: auto; }
}

/* The Standard card is the no-membership route. The brief asks for it to be
   "easy to notice through a gold outline or 'No membership required' badge" —
   it carries both, since it is the card the whole change exists to surface. */
.tier-standard {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px rgba(192, 146, 58, 0.35);
}

/* Standard's price is a phrase, not a figure, so it cannot take the display
   size the numeric prices use without wrapping badly. */
.tier-standard .tier-price strong {
  font-size: 1.35rem;
  line-height: 1.15;
}

/* The CTA block is pushed to the bottom of every card and given the same
   geometry in all five, so the buttons line up across the row.

   Two things were making them differ. Labels wrap at different lengths
   ("Choose Professional" takes two lines, "Choose Elite" one), and only the
   Standard card has a secondary CTA, which lifted its primary button above the
   others. So every button reserves two lines of height whether it needs them
   or not, and every card reserves the secondary slot whether it fills it or
   not. Both reservations are in em, so they follow the font rather than
   needing a new magic number at each breakpoint. */
.tier-ctas {
  margin-top: auto;
  padding-top: 1.4rem;
  display: grid;
  gap: 0.55rem;
  justify-items: stretch;
  align-content: end;
}
.tier-ctas .btn {
  width: 100%;
  /* Two lines of label plus the button's own vertical padding. */
  min-height: calc(2 * 1.3em + 1.9rem);
  padding-inline: 1rem;
  line-height: 1.3;
  text-wrap: balance;
}
.tier-cta-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * 1.25em + 1rem);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--gold-100);
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(192, 146, 58, 0.35);
  transition: border-color 0.3s, color 0.3s;
}
.tier-cta-2:hover { border-color: var(--gold-500); color: var(--ivory); }

/* Holds the secondary slot open on the cards that have no secondary CTA, so
   every primary button sits at the same height. Inert to assistive tech. */
.tier-cta-placeholder {
  visibility: hidden;
  border-color: transparent;
}
.tier {
  position: relative;
  background: var(--navy-900);
  color: var(--on-navy);
  border: 1px solid var(--navy-line);
  padding: 2.2rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease-out), border-color 0.35s, box-shadow 0.45s var(--ease-out), background-color 0.35s;
}
/* Gold line that travels the exact perimeter of the hovered tier. The square
  SVG path has a native perimeter of 400 units. A 80 / 120 pattern therefore
  repeats exactly twice, creating two long, opposite moving segments. */
.tier-trace {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  z-index: 1;
}
.tier-trace path {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 80 120;
  stroke-dashoffset: 0;
}
.tier:hover .tier-trace { opacity: 1; }
.tier:hover .tier-trace path { animation: tier-trace 3.2s linear infinite; }
@keyframes tier-trace {
  to { stroke-dashoffset: -400; }
}
@media (prefers-reduced-motion: reduce) {
  .tier:hover .tier-trace path { animation: none; stroke-dasharray: none; opacity: 0.55; }
}
.tier:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(192, 146, 58, 0.7);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(192, 146, 58, 0.25);
  background: var(--navy-800);
  z-index: 1;
}
.tier-elite:hover { background: var(--navy-900); }
.tier-elite {
  background: var(--navy-950);
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px rgba(192, 146, 58, 0.35);
}
/* The brief (section 7) gives every card a hierarchy label, and they are now
   phrases — "Recommended for ongoing growth" — not one-word tags. Absolutely
   positioning them was fine for "Entry level"; a phrase wrapping to two lines
   would have sat on top of the tier name. So the tag is in normal flow with two
   lines of space reserved, which also keeps the five card headings on the same
   baseline whether a label wraps or not. */
.tier-tag {
  position: relative;
  z-index: 2;
  align-self: start;
  display: flex;
  align-items: center;
  min-height: calc(2 * 1.35em + 0.6rem);
  margin-bottom: 0.9rem;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: balance;
  padding: 0.3rem 0.8rem;
  background: var(--navy-750);
  color: var(--gold-100);
  border: 1px solid rgba(192, 146, 58, 0.5);
}
.tier-tag-gold { background: var(--gold-grad); color: var(--navy-950); border: none; }

/* The §4 label for the access fee, sitting with the figure it names rather
   than repeated as a spec row underneath it. */
.tier-price-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

/* Essential stays the recommended ongoing membership option (brief section 6),
   while Standard keeps the gold outline as the no-upfront route (section 7).
   Two different jobs, so two different treatments: an outline for Standard, a
   lifted gold-tinted panel for Essential. */
.tier-recommended {
  border-color: rgba(192, 146, 58, 0.75);
  background: var(--navy-800);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.tier-recommended .tier-tag {
  background: var(--gold-grad);
  color: var(--navy-950);
  border-color: transparent;
}
.tier-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--ivory);
}
.tier-type {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-top: 0.3rem;
}
.tier-price {
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(192, 146, 58, 0.35);
  display: grid;
  gap: 0.25rem;
}
.tier-price strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--ivory);
}
.tier-price span { font-size: 0.8rem; color: var(--on-navy-soft); }

.tier-spec { margin-top: 1.2rem; flex: 1; display: grid; gap: 0; }
.tier-spec > div {
  display: grid;
  gap: 0.1rem;
  padding-block: 0.6rem;
  border-top: 1px solid rgba(30, 49, 87, 0.9);
}
.tier-spec dt {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}
.tier-spec dd { font-size: 0.86rem; color: var(--on-navy); }
.tier-spec dd.hi { color: var(--gold-300); font-weight: 600; }
.tier .btn { margin-top: 1.5rem; }

.notes {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(192, 146, 58, 0.4);
  background: var(--navy-900);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 3rem);
}
.notes-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ivory);
  padding-bottom: 1.2rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(192, 146, 58, 0.35);
}
.notes-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 1.4fr;
  gap: 1rem 2.5rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--navy-line);
}
.notes-row:last-child { border-bottom: none; padding-bottom: 0; }
.notes-row dt { font-size: 0.9rem; font-weight: 600; color: var(--on-navy); }
.notes-row dd { font-size: 0.9rem; color: var(--gold-100); }

/* ---- Process: all seven steps visible ---- */
.process {
  background: var(--navy-900);
  color: var(--on-navy);
  padding-block: var(--section-y);
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 146, 58, 0.5), transparent);
}
.process .display { color: var(--ivory); }
.process .section-head p { color: var(--on-navy-soft); }

.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.step {
  position: relative;
  background: var(--navy-900);
  padding: 1.7rem 1.2rem 1.6rem;
  transition: background-color 0.4s;
}
.step:hover { background: rgba(192, 146, 58, 0.07); }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(192, 146, 58, 0.55);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-300);
  margin-bottom: 1rem;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ivory);
  margin-bottom: 0.45rem;
  line-height: 1.2;
}
.step p { font-size: 0.82rem; color: var(--on-navy-soft); }

/* ---- Ideal for ---- */
.ideal {
  background: var(--warm);
  padding-block: var(--section-y);
}
.ideal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(192, 146, 58, 0.4);
  border: 1px solid rgba(192, 146, 58, 0.4);
}
.ideal-grid li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--ivory);
  padding: 1.3rem 1.4rem;
  transition: background-color 0.4s;
}
.ideal-grid li:hover { background: var(--navy-900); }
.ideal-grid .ico { width: 1.5rem; height: 1.5rem; color: var(--gold-ink); transition: color 0.4s; }
.ideal-grid li:hover .ico { color: var(--gold-300); }
.ideal-grid span {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.25;
  transition: color 0.4s;
}
.ideal-grid li:hover span { color: var(--ivory); }

/* ---- CTA ---- */
.cta {
  position: relative;
  background: var(--navy-950);
  color: var(--on-navy);
  padding-block: var(--section-y-lg);
  overflow: clip;
}
.cta-media { position: absolute; inset: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 50% at 50% 55%, rgba(232, 196, 104, 0.16) 0%, rgba(232, 196, 104, 0) 70%),
    linear-gradient(to bottom, rgba(1, 8, 26, 0.94) 0%, rgba(1, 8, 26, 0.72) 45%, rgba(1, 8, 26, 0.94) 100%);
}
.cta-inner { position: relative; text-align: center; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.06;
  color: var(--ivory);
}
.cta-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.cta-title .line > span { display: block; }
.cta-copy {
  margin: 1.8rem auto 0;
  max-width: 40rem;
  font-size: 1.0625rem;
  color: var(--on-navy);
}
.cta-actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.cta-contacts {
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3.5rem;
}
.cta-contacts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}
.cta-contacts > li > span:first-child {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.cta-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--on-navy);
  transition: color 0.3s;
}
.cta-contacts a:hover { color: var(--gold-100); }
.cta-phones { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }

/* ---- Footer ---- */
.site-footer {
  background: var(--navy-950);
  color: var(--on-navy-soft);
  border-top: 1px solid rgba(192, 146, 58, 0.4);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-brand p { margin-top: 1.4rem; font-size: 0.86rem; max-width: 32ch; }
.social {
  display: inline-grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin-top: 1.4rem;
  border: 1px solid rgba(192, 146, 58, 0.5);
  color: var(--gold-300);
  transition: background-color 0.3s, color 0.3s;
}
.social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: none; }
.social:hover { background: var(--gold-500); color: var(--navy-950); }

.footer-col { display: grid; gap: 0.55rem; align-content: start; }
.footer-col h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.5rem;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--on-navy-soft);
  transition: color 0.3s;
  width: fit-content;
}
.footer-col a:hover { color: var(--gold-100); }
.footer-col p { font-size: 0.84rem; line-height: 1.75; }
.footer-col p + p { margin-top: 0.8rem; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--navy-line);
}
.footer-base p { font-size: 0.76rem; letter-spacing: 0.06em; }
.footer-base p:first-child {
  color: var(--gold-300);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.sitemap { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.sitemap a { font-size: 0.78rem; transition: color 0.3s; }
.sitemap a:hover { color: var(--gold-100); }

/* ---- Reveal helpers ---- */
.reveal, .reveal-line { will-change: transform, opacity; }

/* ---- Scroll progress ---- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}

/* ---- Film grain (static overlay on its own GPU layer) ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: strict;
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ---- Scroll hint ---- */
.scroll-hint {
  position: absolute;
  left: var(--gutter);
  bottom: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.scroll-hint span {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}
.scroll-hint i {
  display: block;
  width: 3.4rem;
  height: 1px;
  background: rgba(192, 146, 58, 0.4);
  position: relative;
  overflow: hidden;
}
.scroll-hint i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-300);
  transform: translateX(-100%);
  animation: hint-sweep 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hint-sweep {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   Internal page template
   ============================================================ */
.page-hero {
  position: relative;
  background: var(--navy-950);
  color: var(--on-navy);
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: clip;
}
.page-hero-media { position: absolute; inset: 0; opacity: 0.34; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(88deg, rgba(1, 8, 26, 0.96) 0%, rgba(1, 8, 26, 0.8) 45%, rgba(3, 17, 41, 0.5) 100%);
}
.page-hero .container { position: relative; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
  margin-bottom: 1.4rem;
}
.breadcrumb a { color: var(--gold-300); }
.breadcrumb a:hover { color: var(--gold-100); }
.breadcrumb span { color: var(--gold-700); }
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.3vw, 3rem);
  line-height: 1.12;
  color: var(--ivory);
  max-width: 18ch;
}
.page-lead {
  margin-top: 1.2rem;
  max-width: 52ch;
  font-size: 1.05rem;
  color: var(--on-navy);
}

.page-body { background: var(--ivory); padding-block: var(--section-y); }
.page-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.page-main h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--ink);
  margin-bottom: 1rem;
}
.page-main h2 + p { color: var(--ink-soft); }
.page-main > * + * { margin-top: 1.2rem; }
.page-main section + section { margin-top: 2.8rem; }

.notice {
  border: 1px solid rgba(192, 146, 58, 0.5);
  background: var(--warm);
  padding: 1.3rem 1.5rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.notice .ico { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
.notice p { font-size: 0.9rem; color: var(--ink); }
.notice strong { display: block; margin-bottom: 0.2rem; }

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.1rem 1.4rem;
}
.field { display: grid; gap: 0.4rem; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid rgba(16, 27, 51, 0.22);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(192, 146, 58, 0.16);
}
.field input::placeholder, .field textarea::placeholder { color: #7A869F; }
.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--gold-500); }
.form-actions { grid-column: 1 / -1; margin-top: 0.6rem; }

.page-aside {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 1.2rem;
}
.aside-card {
  border: 1px solid var(--navy-line);
  background: var(--navy-900);
  color: var(--on-navy);
  padding: 1.6rem;
}
.aside-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ivory);
  margin-bottom: 0.8rem;
}
.aside-card p { font-size: 0.88rem; color: var(--on-navy-soft); }
.aside-card ul { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.aside-card li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--on-navy);
}
.aside-card li::before {
  content: '\25C6';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scale(0.55);
  color: var(--gold-500);
}
/* `width: 100%` sets the box, not the minimum: an email address is one
   unbreakable token, so at 320px "partners@acggrowthpartners.com" was wider
   than the card and pushed the whole page into a horizontal scroll. These
   buttons hold addresses by design, so they are allowed to break mid-token. */
.aside-card .btn {
  margin-top: 1.2rem;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.aside-card p a:not(.btn) { color: var(--gold-300); }
.aside-card p a:not(.btn):hover { color: var(--gold-100); }

/* Inline text link with arrow (section CTAs) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--gold-500);
  letter-spacing: 0.01em;
}
.text-link i { transition: transform 0.3s ease; font-style: normal; }
.text-link:hover { color: var(--gold-300); }
.text-link:hover i { transform: translateX(4px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 78rem) {
  .main-nav { gap: 0.9rem; }
  .main-nav > a, .nav-trigger { font-size: 0.78rem; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Short viewports: drop the decorative hero furniture so the
   headline, copy and CTAs always fit above the fold */
@media (max-height: 700px) {
  .hero-content { padding-block: 7rem 4.5rem; }
  .hero-title { font-size: clamp(2.1rem, 5vw, 3.2rem); }
  .hero-copy { margin-top: 1.2rem; }
  .hero-cta { margin-top: 1.8rem; }
  .hero-badge, .scroll-hint { display: none; }
}

@media (max-width: 64rem) {
  .main-nav { display: none; }
  .btn-nav { display: none; }
  .nav-toggle { display: flex; }
  .hero-badge { display: none; }

  .pos-grid, .diff-grid, .succ-grid { grid-template-columns: 1fr; }
  .diff-media { order: -1; max-width: 30rem; }
  .succ-media { max-width: 30rem; }
  .media-frame img { aspect-ratio: 16 / 10; }

  /* The tier grid is NOT overridden here. This block is max-width:64rem
     (1024px), which would also catch tablet, where the brief requires two
     cards per row. The single-column rule lives in its own sub-768px block
     below. */

  .page-grid { grid-template-columns: 1fr; }
  .page-aside { position: static; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
  .hero-content { padding-block: 8rem 8.5rem; }
  .hero-division { font-size: 0.66rem; letter-spacing: 0.16em; padding-left: 2.6rem; }
  .hero-division::before { width: 1.8rem; }
  .hero-badge { width: 7.6rem; right: var(--gutter); bottom: 1.6rem; }
  .hero-badge strong { font-size: 1.3rem; }

  .compare { grid-template-columns: 1fr; max-width: 28rem; }
  .compare-vs { justify-self: center; }
  .example-grid { grid-template-columns: 1fr; }
  .example-cell-save { padding-left: 0; padding-top: 1.2rem; }
  .example-cell-save::before { top: 0; bottom: auto; left: 0.1rem; width: 4rem; height: 1px; }

  .notes-row { grid-template-columns: 1fr; gap: 0.35rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { justify-content: center; text-align: center; }
  .sitemap { justify-content: center; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Hero — split layout: headline left, gold king right (v3)
   Client request: "place the chess piece to the right", per the
   proposal PDF. Native, no parallax. King crop already navy-graded.
   ============================================================ */
.hero-split {
  background:
    radial-gradient(60% 70% at 78% 52%, rgba(232, 196, 104, 0.14) 0%, rgba(232, 196, 104, 0) 62%),
    radial-gradient(120% 120% at 15% 0%, rgba(10, 31, 68, 0.9) 0%, rgba(1, 8, 26, 1) 60%),
    var(--navy-950);
}
.hero-split .hero-content {
  z-index: 2;
  max-width: min(var(--container), 100% - 2 * var(--gutter));
}
.hero-split .hero-title { max-width: 12em; }
.hero-split .hero-copy { max-width: 31rem; }

/* Legibility scrim. The headline sits over a photographic hero, so the copy
   needs its own gradient rather than relying on the image staying dark in the
   right places - a new render must never be able to break the text. */
.hero-split::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(2, 10, 26, 0.94) 0%,
    rgba(2, 10, 26, 0.86) 34%,
    rgba(2, 10, 26, 0.45) 56%,
    rgba(2, 10, 26, 0.10) 74%,
    rgba(2, 10, 26, 0) 100%
  );
}
@media (max-width: 60rem) {
  /* Stacked layout: darken the whole frame instead of one side. */
  .hero-split::before {
    background: linear-gradient(180deg, rgba(2,10,26,0.92) 0%, rgba(2,10,26,0.72) 55%, rgba(2,10,26,0.88) 100%);
  }
}

/* Full-bleed hero image (real, navy-graded gold king on the right).
   Grade baked into the JPG (no runtime filter) so the large layer stays
   cheap and scrolling stays smooth. A navy gradient over the left keeps
   the headline legible with no visible seam. */
.hero-king {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-king img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.hero-king::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--navy-950) 0%, rgba(1, 8, 26, 0.92) 26%, rgba(1, 8, 26, 0.55) 48%, rgba(1, 8, 26, 0.14) 70%, rgba(1, 8, 26, 0) 100%),
    linear-gradient(to bottom, rgba(1, 8, 26, 0.55) 0%, rgba(1, 8, 26, 0) 20%),
    linear-gradient(to top, rgba(1, 8, 26, 0.5) 0%, rgba(1, 8, 26, 0) 26%);
}
/* keep chrome above the image */
.hero-split .hero-badge,
.hero-split .scroll-hint { z-index: 3; }

@media (max-width: 64rem) {
  .hero-king img { object-position: 74% center; }
  .hero-king::before {
    background:
      linear-gradient(90deg, var(--navy-950) 0%, rgba(1, 8, 26, 0.86) 40%, rgba(1, 8, 26, 0.5) 70%, rgba(1, 8, 26, 0.2) 100%),
      linear-gradient(to top, rgba(1, 8, 26, 0.6) 0%, rgba(1, 8, 26, 0) 30%);
  }
  .hero-split .hero-title,
  .hero-split .hero-copy { max-width: none; }
}

/* ============================================================
   PDF content sections (Membership & Partnership Guide) — v3
   Reusable bands + grids in the established navy/gold system.
   ============================================================ */
.band { padding-block: var(--section-y); position: relative; }
.band-light { background: var(--ivory); }
.band-warm { background: var(--warm); }
.band-navy { background: var(--navy-900); color: var(--on-navy); }
.band-deep { background: var(--navy-950); color: var(--on-navy); }
.band-navy .display, .band-deep .display { color: var(--ivory); }
.band-navy .section-head p, .band-deep .section-head p { color: var(--on-navy-soft); }
.band-navy::before, .band-deep::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 146, 58, 0.5), transparent);
}

/* Feature grid: icon + title + copy cards (challenges, needs, capabilities) */
.feature-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.feature-ico, .spec svg {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.feature { background: var(--navy-900); padding: clamp(1.5rem, 3vw, 2.1rem); }
.band-deep .feature { background: var(--navy-950); }
.feature-ico { width: 2rem; height: 2rem; color: var(--gold-500); margin-bottom: 1rem; }
.feature h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.12rem; color: var(--ivory); margin-bottom: 0.5rem;
}
.feature p { font-size: 0.9rem; color: var(--on-navy-soft); }
/* light variant for white/warm bands */
.feature-grid.is-light { background: rgba(192, 146, 58, 0.4); border-color: rgba(192, 146, 58, 0.4); }
.feature-grid.is-light .feature { background: var(--ivory); transition: background-color 0.4s; }
.feature-grid.is-light .feature:hover { background: var(--warm); }
.feature-grid.is-light .feature-ico { color: var(--gold-ink); }
.feature-grid.is-light .feature h3 { color: var(--ink); }
.feature-grid.is-light .feature p { color: var(--ink-soft); }

/* Stat band: big gold numbers */
.stat-band {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.stat { background: var(--navy-900); padding: clamp(1.4rem, 3vw, 2rem) 1rem; text-align: center; }
.band-deep .stat { background: var(--navy-950); }
.stat strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--gold-300); line-height: 1.15;
  overflow-wrap: break-word;
}
.stat span {
  display: block; margin-top: 0.5rem; font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-soft);
}

/* Testimonials */
.quote-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.4rem;
}
.quote-card { border: 1px solid var(--navy-line); padding: clamp(1.6rem, 3vw, 2rem); position: relative; }
.quote-card::before {
  content: '\201C'; font-family: var(--font-display);
  font-size: 3rem; line-height: 1; color: var(--gold-500); opacity: 0.6;
}
.quote-card p { color: var(--on-navy); font-size: 0.98rem; font-style: italic; margin-top: -0.6rem; }
.quote-card cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300);
}

/* "You need:" elevate quote */
.elevate-quote {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  text-align: center; max-width: 30ch; margin-inline: auto;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3; color: var(--ink);
}
.elevate-quote span { color: var(--gold-ink); }
.elevate-quote cite {
  display: block; margin-top: 1rem; font-family: var(--font-body); font-style: normal;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink);
}

/* Difference specialities strip */
.spec-row {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex; flex-wrap: wrap;
  gap: 1px; background: rgba(192, 146, 58, 0.4); border: 1px solid rgba(192, 146, 58, 0.4);
}
.spec { background: var(--warm); padding: 1.3rem 1rem; text-align: center; }
.spec svg { width: 1.9rem; height: 1.9rem; color: var(--gold-ink); margin-bottom: 0.6rem; }
.spec span { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ink); }

/* ============================================================
   PDF content — batch 2 (Everything included, Traditional vs,
   Commitment, Vision, ROI/savings)
   ============================================================ */
/* Everything-included dense grid */
.dense-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex; flex-wrap: wrap;
  gap: 1px; background: var(--navy-line); border: 1px solid var(--navy-line);
}
.dense { background: var(--navy-900); padding: 1.15rem 1.25rem; }
.band-deep .dense, .band-navy .dense { background: var(--navy-900); }
.dense strong {
  display: block; font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--gold-300); margin-bottom: 0.3rem; text-transform: uppercase;
}
.dense span { font-size: 0.86rem; color: var(--on-navy-soft); }
.dense-note { margin-top: 1rem; font-size: 0.8rem; color: var(--on-navy-soft); font-style: italic; }

/* Traditional vs Growth Partner */
.versus {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start;
}
.vs-col { border: 1px solid var(--navy-line); padding: clamp(1.5rem, 3vw, 2rem); }
.vs-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin-bottom: 1.1rem; }
.vs-col.trad h3 { color: var(--on-navy-soft); }
.vs-col.acg { border-color: var(--gold-500); background: rgba(192, 146, 58, 0.06); }
.vs-col.acg h3 { color: var(--gold-300); }
.vs-list li { display: flex; gap: 0.7rem; padding: 0.5rem 0; font-size: 0.92rem; color: var(--on-navy-soft); }
.vs-list svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: 0.12rem;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vs-col.trad .vs-list svg { color: #8b7373; }
.vs-col.acg .vs-list { color: var(--on-navy); }
.vs-col.acg .vs-list svg { color: var(--gold-300); }
.guarantee {
  margin-top: 1.6rem; border: 1px solid var(--gold-500); padding: 1.3rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.guarantee svg { width: 1.7rem; height: 1.7rem; color: var(--gold-300); flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.guarantee p { font-size: 0.92rem; color: var(--on-navy); }
.guarantee strong { color: var(--gold-300); }
@media (max-width: 48rem) { .versus { grid-template-columns: 1fr; } }

/* Vision */
.vision { text-align: center; }
.vision .section-head { text-align: center; margin-inline: auto; }
.vision .section-head::before { margin-inline: auto; }
.vision-statement {
  max-width: 20ch; margin: 0 auto; font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.25; color: var(--ivory);
}
.vision-statement span { color: var(--gold-300); }

/* ROI savings example cells */
.roi-example {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: flex; flex-wrap: wrap;
  gap: 1px; background: var(--navy-line); border: 1px solid var(--navy-line);
}
.roi-cell { background: var(--navy-900); padding: 1.4rem 1.3rem; }
.roi-cell span { display: block; font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--on-navy-soft); margin-bottom: 0.5rem; }
.roi-cell strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; color: var(--ivory); }
.roi-cell.save { background: rgba(192, 146, 58, 0.1); }
.roi-cell.save strong { color: var(--gold-300); }


/* ============================================================
   Legal pages (POPIA pack) — branded, CMS-editable content
   ============================================================ */
.legal-hero {
  background: var(--navy-900); color: var(--on-navy);
  padding: clamp(7rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--navy-line); position: relative;
}
.legal-hero::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--container), 100% - 2 * var(--gutter)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 146, 58, 0.5), transparent);
}
.breadcrumb {
  font-size: 0.8rem; letter-spacing: 0.03em; color: var(--on-navy-soft);
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--gold-300); }
.legal-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem); color: var(--ivory); line-height: 1.1;
}
.legal-lead { margin-top: 1rem; max-width: 60ch; color: var(--on-navy-soft); font-size: 1.05rem; }
.legal-meta { margin-top: 1.4rem; font-size: 0.85rem; color: var(--on-navy-soft); }
.legal-meta strong { color: var(--gold-300); }

.legal-body { background: var(--ivory); padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 7rem); }
.legal-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 18rem;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.legal-prose { color: var(--ink); max-width: 72ch; }
.legal-prose h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink);
  margin: 2.4rem 0 0.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(192, 146, 58, 0.35);
}
.legal-prose > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-prose h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 1.6rem 0 0.5rem; color: var(--ink); }
.legal-prose p { margin: 0.7rem 0; color: var(--ink-soft); }
.legal-prose ul { margin: 0.7rem 0 1rem; }
.legal-prose li { position: relative; padding-left: 1.5rem; margin: 0.4rem 0; color: var(--ink-soft); }
.legal-prose li::before { content: ''; position: absolute; left: 0.2rem; top: 0.62em; width: 0.4rem; height: 0.4rem; background: var(--gold-500); }
.legal-prose a { color: var(--gold-ink); text-decoration: underline; }
.legal-prose strong { color: var(--ink); }

.legal-aside { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.legal-aside .aside-card { border: 1px solid rgba(192, 146, 58, 0.4); padding: 1.3rem; background: var(--ivory); }
.legal-aside h3 { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--ink); margin-bottom: 0.6rem; }
.legal-aside p { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.8rem; }

@media (max-width: 56rem) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
}

/* ============================================================
   ROI of partnership — designed comparison + savings ledger
   ============================================================ */
.roi-compare { margin-top: clamp(2.5rem, 6vw, 3.5rem); border: 1px solid var(--navy-line); }
.roi-compare-row { display: grid; grid-template-columns: 1.7fr 1fr 1.05fr; align-items: stretch; }
.roi-compare-row + .roi-compare-row { border-top: 1px solid var(--navy-line); }
.roi-compare-row > div { padding: 1.05rem 1.4rem; display: flex; align-items: center; }
.roi-compare-head > div { padding-block: 0.85rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.roi-compare-head .svc { color: var(--on-navy-soft); }
.roi-compare-head .std { color: var(--on-navy-soft); }
.roi-compare-row .svc { color: var(--on-navy); font-size: 0.95rem; }
.roi-compare-row .std { color: var(--on-navy-soft); font-size: 0.95rem; }
.roi-compare-row .member {
  color: var(--gold-300); font-weight: 600; font-size: 0.98rem;
  background: rgba(192, 146, 58, 0.08); border-left: 1px solid rgba(192, 146, 58, 0.28);
}
.roi-compare-head .member { color: var(--gold-300); font-weight: 600; }

.roi-impact {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid; grid-template-columns: 1.5fr 1fr; border: 1px solid var(--gold-500);
}
.roi-ledger { padding: clamp(1.7rem, 3.5vw, 2.4rem); }
.roi-ledger-note { color: var(--on-navy-soft); font-size: 0.92rem; margin-bottom: 1.4rem; max-width: 48ch; }
.roi-line { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; padding: 0.75rem 0; align-items: baseline; border-top: 1px solid var(--navy-line); }
.roi-line:first-of-type { border-top: 0; }
/* counted figures: fixed-width digits so the count-up doesn't jitter */
.roi-num { font-variant-numeric: tabular-nums; }
.roi-line .lbl { color: var(--on-navy); font-size: 0.94rem; }
.roi-line .vals s { color: var(--on-navy-soft); opacity: 0.55; margin-right: 0.7rem; }
.roi-line .vals b { color: var(--gold-300); font-weight: 600; }
.roi-line.total { border-top: 1px solid var(--gold-500); margin-top: 0.5rem; padding-top: 1rem; }
.roi-line.total .lbl { color: var(--ivory); font-weight: 600; font-size: 1rem; }
.roi-saving {
  background: var(--gold-grad); color: var(--navy-950);
  padding: clamp(1.7rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: center;
}
.roi-saving span { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.roi-saving strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; margin: 0.4rem 0 0.5rem; }
.roi-saving em { font-style: normal; font-size: 0.88rem; line-height: 1.4; opacity: 0.82; }
@media (max-width: 52rem) {
  .roi-compare-row { grid-template-columns: 1fr 1fr; }
  .roi-compare-row .svc { grid-column: 1 / -1; color: var(--gold-100); font-weight: 600; padding-bottom: 0.3rem; }
  .roi-compare-head { display: none; }
  .roi-compare-row .member { border-left: 0; }
  .roi-impact { grid-template-columns: 1fr; }
}

/* The ledger is a label beside a pair of figures. A grid track sized `auto`
   never shrinks below its content, and at 320px the label's longest word plus
   two eight-character rand figures exceed the line — which pushed the whole
   page into a horizontal scroll. Section 11 forbids that outright, so on the
   narrowest screens the figures move under their label and are allowed to wrap
   between themselves. `min-width: 0` is what lets the label track shrink at
   all; grid items default to min-content and would otherwise hold the line
   open on their own. */
.roi-line > * { min-width: 0; }
@media (max-width: 26rem) {
  .roi-line { grid-template-columns: 1fr; gap: 0.3rem; }
  .roi-line .vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; }
  .roi-line .vals s { margin-right: 0; }
}

/* Form status + seller confidentiality callout */
.form-status {
  border: 1px solid var(--gold-500); background: var(--warm);
  padding: 1.4rem 1.6rem; color: var(--ink); font-size: 0.95rem; line-height: 1.6;
}
.form-status.is-err { border-color: #b4432f; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; }
.consent-block { display: grid; gap: 0.8rem; margin-top: 0.4rem; }
.consent-block .consent { margin: 0; }
.consent ul { margin: 0.5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.consent li { font-size: 0.82rem; color: var(--ink-soft); margin: 0.2rem 0; }
.seller-guard {
  border: 1px solid var(--gold-500); background: rgba(192, 146, 58, 0.08);
  padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; display: flex; gap: 0.9rem; align-items: flex-start;
}
.seller-guard svg { width: 1.5rem; height: 1.5rem; color: var(--gold-ink); flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.seller-guard p { font-size: 0.92rem; color: var(--ink); font-weight: 600; }

/* ============================================================
   Vacancies (job board)
   ============================================================ */
.vacancy-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.9rem; }
.vacancy-meta li { font-size: 0.82rem; color: var(--ink-soft); position: relative; }
.vacancy-meta li + li::before { content: '·'; position: absolute; left: -0.75rem; color: var(--gold-500); }
.vacancy-meta--hero li { color: var(--on-navy-soft); }
.vacancy-meta--hero li + li::before { color: var(--gold-500); }
.vacancy-empty { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 0; }
.vacancy-empty h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin-bottom: 0.8rem; }
.vacancy-empty p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.6rem; }

/* ---------- Status badges ---------- */
.badge {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border: 1px solid transparent; white-space: nowrap;
}
.badge-featured { color: var(--gold-ink); border-color: rgba(192, 146, 58, 0.55); background: rgba(192, 146, 58, 0.09); }
.badge-urgent { color: var(--ivory); background: var(--gold-ink); border-color: var(--gold-ink); }
.badge-hold,
.badge-closed { color: var(--ink-soft); border-color: rgba(10, 31, 68, 0.22); background: rgba(10, 31, 68, 0.05); }

/* ---------- Featured band ---------- */
.featured-band { background: var(--navy-950); color: var(--on-navy); padding: clamp(3rem, 7vw, 5rem) 0; }
/* The hero and this band share a background, so when they sit flush their two
   lots of section padding stack into one large void with no colour change to
   explain it - measured at 148px of pure padding on /vacancies, which is what
   read as "a very big gap". Collapse all three contributors and mark the seam
   with a rule instead, so the separation is deliberate rather than empty. */
.page-hero:has(+ .featured-band) { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.page-hero + .featured-band { padding-top: 0; }
.page-hero + .featured-band > .container > .section-head {
  border-top: 1px solid var(--navy-line);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}
.featured-band .section-head h2 { color: var(--ivory); }
.featured-grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem;
}
.featured-card {
  border: 1px solid var(--navy-line); background: var(--navy-900);
  padding: clamp(1.3rem, 2.6vw, 1.7rem); display: flex; flex-direction: column; gap: 0.55rem;
}
.featured-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.featured-cat {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-300);
}
.featured-cat .ico { width: 1.05rem; height: 1.05rem; color: var(--gold-300); }
.featured-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.featured-card h3 a { color: var(--ivory); }
.featured-card h3 a:hover { color: var(--gold-300); }
.featured-loc { font-size: 0.82rem; color: var(--gold-300); }
.featured-sum { font-size: 0.86rem; color: var(--on-navy-soft); flex: 1; }
.featured-card .btn { margin-top: 0.6rem; align-self: flex-start; }

/* ---------- Category navigation ---------- */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.cat-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1rem; border: 1px solid rgba(10, 31, 68, 0.18);
  background: var(--ivory); color: var(--ink);
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.cat-btn .ico { width: 1.15rem; height: 1.15rem; color: var(--gold-ink); flex: 0 0 auto; }
.cat-btn:hover { border-color: var(--gold-500); background: var(--warm); }
.cat-btn.is-active { background: var(--navy-900); border-color: var(--navy-900); color: var(--ivory); }
.cat-btn.is-active .ico { color: var(--gold-300); }
.cat-count {
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem;
  background: rgba(10, 31, 68, 0.08); color: var(--ink-soft);
}
.cat-btn.is-active .cat-count { background: rgba(232, 196, 104, 0.18); color: var(--gold-300); }

/* ---------- Filters ---------- */
.filter-toggle { display: none; }
.vacancy-filters {
  border: 1px solid rgba(10, 31, 68, 0.14); background: var(--warm);
  padding: clamp(1.1rem, 2.4vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.vf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.9rem; }
.vf-search { grid-column: 1 / -1; }
.vf-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.vf-field label {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft);
}
.vf-field input,
.vf-field select {
  width: 100%; padding: 0.62rem 0.7rem; font: inherit; font-size: 0.9rem;
  color: var(--ink); background: var(--ivory);
  border: 1px solid rgba(10, 31, 68, 0.2); border-radius: 0;
}
.vf-field input:focus-visible,
.vf-field select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.vf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.chip {
  font: inherit; font-size: 0.76rem; padding: 0.32rem 0.65rem; cursor: pointer;
  border: 1px solid rgba(10, 31, 68, 0.18); background: var(--ivory); color: var(--ink-soft);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.chip:hover { border-color: var(--gold-500); color: var(--gold-ink); }
.chip.is-active { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--ivory); }
.vf-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(10, 31, 68, 0.1);
}
.vf-count { font-size: 0.84rem; color: var(--ink-soft); }
.vf-count strong { color: var(--ink); }
.btn-reset {
  font: inherit; font-size: 0.82rem; cursor: pointer; background: none; border: 0;
  color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0;
}

/* ---------- Vacancy cards ---------- */
.vacancy-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.1rem;
  background: none; border: 0;
}
.vacancy-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  border: 1px solid rgba(10, 31, 68, 0.14); background: var(--ivory);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.vacancy-card:hover { border-color: var(--gold-500); box-shadow: 0 10px 30px rgba(10, 31, 68, 0.07); }
.vacancy-card[hidden] { display: none; }
.vc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.vc-cat {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700;
}
.vc-cat .ico { width: 1.05rem; height: 1.05rem; color: var(--gold-ink); flex: 0 0 auto; }
.vc-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.vc-title { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; line-height: 1.25; margin-top: 0.2rem; }
.vc-title a { color: var(--ink); }
.vc-title a:hover { color: var(--gold-ink); }
.vc-company { font-size: 0.86rem; color: var(--ink-soft); font-style: italic; }
.vc-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.3rem; }
.vc-meta li { font-size: 0.8rem; color: var(--ink-soft); position: relative; }
.vc-meta li + li::before { content: '·'; position: absolute; left: -0.7rem; color: var(--gold-500); }
.vc-salary { font-size: 0.88rem; font-weight: 600; color: var(--gold-ink); }
.vc-summary { font-size: 0.88rem; color: var(--ink-soft); flex: 1; }
.vc-facts {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.4rem;
  padding-top: 0.7rem; border-top: 1px solid rgba(10, 31, 68, 0.1);
}
.vc-facts li { font-size: 0.74rem; color: var(--ink-soft); }
.vc-facts strong { color: var(--ink); font-weight: 700; }
.vc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.8rem; }
.btn-disabled {
  background: rgba(10, 31, 68, 0.07); color: var(--ink-soft);
  border: 1px solid rgba(10, 31, 68, 0.14); cursor: not-allowed;
}

/* ---------- Vacancy detail ---------- */
.vh-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.vh-company { color: var(--gold-300); font-size: 1rem; margin-top: 0.4rem; }
.vacancy-notice {
  border-left: 3px solid var(--gold-500); background: var(--warm);
  padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1.6rem;
}
.vacancy-notice a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.vacancy-summary {
  display: flex; flex-wrap: wrap;
  gap: 1px; background: rgba(10, 31, 68, 0.12);
  border: 1px solid rgba(10, 31, 68, 0.12); margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.vacancy-summary > div { background: var(--ivory); padding: 0.85rem 1rem; }
.vacancy-summary dt {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 0.25rem;
}
.vacancy-summary dd { font-size: 0.9rem; color: var(--ink); }
.vacancy-exposure { margin-top: clamp(1.6rem, 3.5vw, 2.2rem); }
.vacancy-exposure h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.35rem;
  color: var(--ink); margin-bottom: 0.8rem;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-list li {
  font-size: 0.78rem; padding: 0.32rem 0.65rem;
  border: 1px solid rgba(192, 146, 58, 0.45); background: rgba(192, 146, 58, 0.07);
  color: var(--gold-ink);
}
.tag-list--sm { margin-top: 0.9rem; }
.tag-list--sm li { font-size: 0.72rem; }
.aside-facts { display: grid; gap: 0.5rem; }
.aside-facts li {
  display: flex; justify-content: space-between; gap: 0.8rem;
  font-size: 0.82rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--navy-line);
}
.aside-facts li::before { content: none; }
.aside-facts span { color: var(--on-navy-soft); }
.aside-facts strong { color: var(--ivory); font-weight: 600; text-align: right; }

/* ---------- Application form ---------- */
.apply-block {
  margin-top: clamp(2.4rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 2px solid var(--gold-500); scroll-margin-top: 6rem;
}
.apply-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); }
.apply-ref { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.4rem; }
.apply-ref strong { color: var(--gold-ink); }
.apply-form { margin-top: 1.8rem; display: grid; gap: 1.6rem; }
.apply-form fieldset { border: 0; padding: 0; margin: 0; }
.apply-form legend {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-ink); padding-bottom: 0.7rem;
}
.fs-vacancy { border: 1px solid rgba(192, 146, 58, 0.4) !important; background: rgba(192, 146, 58, 0.06); padding: 1rem 1.1rem !important; }
.fs-vacancy legend { padding: 0 0.4rem; }
.apply-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; }
.apply-context span {
  display: block; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.apply-context strong { font-size: 0.88rem; color: var(--ink); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.field-wide { grid-column: 1 / -1; }
.apply-form .field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.apply-form label {
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
}
.apply-form label span[aria-hidden] { color: var(--gold-ink); }
.apply-form input,
.apply-form select,
.apply-form textarea {
  width: 100%; padding: 0.62rem 0.7rem; font: inherit; font-size: 0.9rem;
  color: var(--ink); background: var(--ivory);
  border: 1px solid rgba(10, 31, 68, 0.2); border-radius: 0;
}
.apply-form textarea { resize: vertical; }
.apply-form input:focus-visible,
.apply-form select:focus-visible,
.apply-form textarea:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.field-hint { font-size: 0.72rem; color: var(--ink-soft); }
.fs-consent { border: 1px solid rgba(10, 31, 68, 0.16) !important; padding: 1rem 1.1rem !important; background: var(--warm); }
.fs-consent legend { padding: 0 0.4rem; }
.consent-intro { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.apply-form .check { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.6rem; }
.apply-form .check input { width: auto; flex: 0 0 auto; margin-top: 0.2rem; }
.apply-form .check label { font-weight: 400; font-size: 0.84rem; color: var(--ink-soft); }
.apply-form .check a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.apply-form button[type='submit'] { justify-self: start; }

/* ---------- Related vacancies ---------- */
.related-band { background: var(--warm); padding: clamp(3rem, 7vw, 4.5rem) 0; }
.related-grid {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem;
}
.related-card {
  background: var(--ivory); border: 1px solid rgba(10, 31, 68, 0.14);
  padding: clamp(1.1rem, 2.4vw, 1.5rem); display: flex; flex-direction: column; gap: 0.45rem;
}
.related-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.25; }
.related-card h3 a { color: var(--ink); }
.related-card h3 a:hover { color: var(--gold-ink); }
.related-loc { font-size: 0.8rem; color: var(--gold-ink); }
.related-sum { font-size: 0.84rem; color: var(--ink-soft); flex: 1; }
.related-ref { font-size: 0.72rem; color: var(--ink-soft); }

/* ---------- Mobile: filters collapse into a drawer, cards go single-column ---------- */
@media (max-width: 52rem) {
  .filter-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; width: 100%;
    justify-content: center; padding: 0.85rem 1rem; margin-bottom: 0.9rem;
    font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer;
    background: var(--navy-900); color: var(--ivory); border: 1px solid var(--navy-900);
  }
  .filter-toggle .ico { width: 1.1rem; height: 1.1rem; color: var(--gold-300); }
  .vacancy-filters { display: none; }
  .vacancy-filters.is-open { display: block; }
  .vf-row { grid-template-columns: 1fr; }
  .vacancy-list { grid-template-columns: 1fr; }
  .cat-nav { gap: 0.45rem; }
  .cat-btn { flex: 1 1 calc(50% - 0.45rem); justify-content: center; padding: 0.65rem 0.6rem; font-size: 0.78rem; }
  .vc-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ============================================================
   No orphan cells
   ------------------------------------------------------------
   Every bordered tile block on the site (1px gap over a
   background, so the gaps read as rules) is a flex row rather
   than a grid. Grid reserves a slot for a column that has no
   tile in it, which is what produced the empty bordered box on
   the last row whenever the tile count did not divide evenly by
   the column count. Flex has no such slot: the final row's
   tiles simply grow to fill the width.

   Each tile declares `flex: 1 1 <basis>` — the basis is the old
   grid minmax() floor, so wrapping happens at exactly the same
   widths as before and nothing else about the layout moves.
   This holds for any number of tiles at any viewport, so adding
   or removing a vacancy field or a service can never reintroduce
   a gap.
   ============================================================ */
.pillars > .pillar { flex: 1 1 15rem; min-width: 0; }
.service-grid > .svc { flex: 1 1 17rem; min-width: 0; }
.process-steps > .step { flex: 1 1 11rem; min-width: 0; }
.ideal-grid > li { flex: 1 1 15rem; min-width: 0; }
.feature-grid > .feature { flex: 1 1 30%; min-width: 0; }   /* 6 tiles -> 3 per row */
.stat-band > .stat { flex: 1 1 8.5rem; min-width: 0; }
.spec-row > .spec { flex: 1 1 9rem; min-width: 0; }
.dense-grid > .dense { flex: 1 1 18%; min-width: 0; }       /* 20 tiles -> 5 per row */
.roi-example > .roi-cell { flex: 1 1 11rem; min-width: 0; }
.vacancy-summary > div { flex: 1 1 13rem; min-width: 0; }

@media (max-width: 52rem) {
  /* Narrow screens: two per row, last one full width if it is alone. */
  .stat-band > .stat,
  .spec-row > .spec,
  .dense-grid > .dense,
  .feature-grid > .feature,
  .roi-example > .roi-cell,
  .vacancy-summary > div { flex-basis: 40%; }
}

/* ============================================================
   Hero wave, trust bar and quick actions
   (Master Brief section 4 - homepage reconstruction)
   ============================================================ */

/* Headline emphasis. The brief allows one accent word per line, not a whole
   gold line, so this is scoped to <em> rather than a line modifier. */
.hero-title em { font-style: normal; color: var(--gold-300); }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--navy-900);
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
}
.trust-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--navy-line); }
.trust-item {
  flex: 1 1 13rem; min-width: 0; background: var(--navy-900);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: clamp(1rem, 2.2vw, 1.5rem) 1rem; text-align: center;
}
.trust-item .ico { width: 1.75rem; height: 1.75rem; color: var(--gold-500); }
.trust-item strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem); color: var(--gold-300); line-height: 1.1;
}
.trust-item span {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-navy-soft);
}

/* ---------- Four-way quick actions ---------- */
.quick-actions { background: var(--navy-950); padding: clamp(2rem, 4vw, 3rem) 0; }
.qa-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.qa-grid > li { flex: 1 1 15rem; min-width: 0; display: flex; }
.qa {
  flex: 1; display: flex; flex-direction: column; gap: 0.4rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--navy-900); border: 1px solid var(--navy-line);
  transition: border-color 0.25s, transform 0.25s, background-color 0.25s;
}
.qa:hover, .qa:focus-visible {
  border-color: var(--gold-500); background: var(--navy-800); transform: translateY(-2px);
}
.qa .ico { width: 1.6rem; height: 1.6rem; color: var(--gold-500); }
.qa strong {
  font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; color: var(--ivory);
}
.qa span { font-size: 0.82rem; color: var(--on-navy-soft); }

@media (max-width: 40rem) {
  .trust-item { flex-basis: calc(50% - 1px); }
  .qa-grid > li { flex-basis: calc(50% - 0.5rem); }
}

/* ============================================================
   Consent blocks and file upload
   (Master Brief section 5 - forms)
   ============================================================ */

/* Required and optional consent must be visibly distinct, so a visitor can
   see at a glance what they have to accept versus what is a choice. */
.consent-tag {
  display: inline-block; margin-right: 0.4rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 0.14rem 0.42rem;
  border: 1px solid var(--gold-500); color: var(--gold-ink);
  background: rgba(201, 154, 46, 0.10);
  vertical-align: 0.08em;
}
.consent-tag-opt { border-color: rgba(10, 31, 68, 0.28); color: var(--ink-soft); background: transparent; }
.consent-optional-intro { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(10, 31, 68, 0.12); }
.consent-opt { opacity: 0.95; }
.fs-consent .consent-tag { vertical-align: baseline; }

/* File upload: state has to be visible, not just an accept attribute. */
.upload-state {
  display: block; margin-top: 0.4rem; font-size: 0.78rem;
  padding: 0.4rem 0.6rem; border-left: 3px solid transparent;
}
.upload-state:empty { display: none; }
.upload-state.is-ok {
  color: var(--ink); background: rgba(201, 154, 46, 0.09); border-left-color: var(--gold-500);
}
.upload-state.is-err {
  color: #7A1F1F; background: rgba(122, 31, 31, 0.07); border-left-color: #7A1F1F;
}
/* Status is never colour alone - each state carries a symbol too (WCAG 1.4.1). */
.upload-state.is-ok::before { content: '\2713\00a0'; font-weight: 700; }
.upload-state.is-err::before { content: '\26A0\00a0'; font-weight: 700; }

/* Prominent explanatory / limitation panel. Brief section 6 requires
   limitation wording to be conspicuous rather than buried in small print. */
.notice-panel {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(201, 154, 46, 0.45);
  border-left: 4px solid var(--gold-500);
  background: var(--warm);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
}
.notice-panel h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--ink); margin-bottom: 0.6rem;
}
.notice-panel p { font-size: 0.9rem; color: var(--ink-soft); max-width: 74ch; }
.notice-panel p + p { margin-top: 0.7rem; }
.notice-panel strong { color: var(--ink); }
.page-body-alt { background: var(--surface); }

/* ============================================================
   Audience pathways + acquisitions feature
   (Master Brief section 4, items 6 and 8)
   ============================================================ */

/* Warm-white band. The brief asks for rhythm rather than repeated navy blocks. */
.pathways { background: var(--warm); padding: clamp(3.5rem, 6.5vw, 6.5rem) 0; }
.path-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.path {
  flex: 1 1 17rem; min-width: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--ivory); border: 1px solid var(--surface);
  border-top: 3px solid var(--gold-500);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
}
.path .ico { width: 2rem; height: 2rem; color: var(--gold-ink); }
.path h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink);
}
.path p { font-size: 0.9rem; color: var(--ink-soft); flex: 1; }
/* Actions align at the bottom regardless of copy length (brief section 2). */
.path .btn { align-self: flex-start; margin-top: 0.4rem; }
.path .text-link { font-size: 0.8rem; }

/* Editorial split: the image is a band of the layout, not a floating rectangle. */
.acq-feature {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--navy-950); color: var(--on-navy);
  align-items: stretch;
}
.acq-feature-media { position: relative; overflow: hidden; min-height: 22rem; }
.acq-feature-media picture, .acq-feature-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Gradient into the copy side so there is no hard seam between them. */
.acq-feature-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,10,26,0.35) 0%, rgba(2,10,26,0) 45%, rgba(2,10,26,0.9) 100%);
}
.acq-feature-body { display: flex; align-items: center; padding: clamp(2.5rem, 5vw, 5rem) 0; }
.acq-feature-inner {
  max-width: 34rem;
  padding-inline: clamp(1.2rem, 4vw, 3rem);
}
.acq-feature-inner .display { color: var(--ivory); margin: 0.5rem 0 0.9rem; }
.acq-feature-inner > p { color: var(--on-navy-soft); font-size: 0.95rem; }
.acq-points { display: grid; gap: 0.5rem; margin: 1.2rem 0 1.6rem; }
.acq-points li {
  position: relative; padding-left: 1.4rem;
  font-size: 0.88rem; color: var(--on-navy);
}
.acq-points li::before {
  content: ''; position: absolute; left: 0; top: 0.45rem;
  width: 0.5rem; height: 0.5rem; background: var(--gold-500);
}
.acq-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

@media (max-width: 60rem) {
  .acq-feature { grid-template-columns: 1fr; }
  .acq-feature-media { min-height: 16rem; }
  .acq-feature-media::after {
    background: linear-gradient(180deg, rgba(2,10,26,0.25) 0%, rgba(2,10,26,0.85) 100%);
  }
}
@media (max-width: 40rem) {
  .path { flex-basis: 100%; }
  .acq-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Proof / commitments grid (brief section 4, item 9) */
.proof { background: var(--warm); padding: clamp(3.5rem, 6.5vw, 6.5rem) 0; }
.proof-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.proof-item {
  flex: 1 1 16rem; min-width: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--ivory); border: 1px solid var(--surface);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
}
.proof-item .ico { width: 1.9rem; height: 1.9rem; color: var(--gold-ink); }
.proof-item h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--ink);
}
.proof-item p { font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 40rem) { .proof-item { flex-basis: 100%; } }

/* ============================================================
   Services page: sticky section index + grouped benefits
   (Master Brief section 5)
   ============================================================ */

.section-index {
  position: sticky; top: 4.4rem; z-index: 30;
  background: var(--navy-900);
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}
.section-index ul {
  display: flex; gap: 0.4rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.section-index ul::-webkit-scrollbar { display: none; }
.section-index a {
  display: block; white-space: nowrap;
  padding: 0.85rem 0.9rem;
  font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--on-navy-soft);
  border-bottom: 2px solid transparent;
}
.section-index a:hover,
.section-index a:focus-visible { color: var(--gold-300); border-bottom-color: var(--gold-500); }

/* Anchored sections must clear both the header and this index. */
#disciplines, #acquisitions, #succession, #membership-benefits { scroll-margin-top: 8.5rem; }

/* Grouped benefits. <details> gives us the accordion for free, including
   keyboard support, and stays expanded-friendly on wide screens. */
.benefit-groups { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; }
.benefit-group { border: 1px solid var(--navy-line); background: var(--navy-900); }
.benefit-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.5rem);
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.2rem); color: var(--ivory);
}
.benefit-group > summary::-webkit-details-marker { display: none; }
.benefit-group > summary::after {
  content: '+'; color: var(--gold-300); font-size: 1.3rem; line-height: 1; flex: 0 0 auto;
}
.benefit-group[open] > summary::after { content: '\2212'; }
.benefit-group > summary:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.benefit-count {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  color: var(--on-navy-soft); margin-left: auto; margin-right: 0.6rem;
}
.benefit-group .dense-grid { border-top: 1px solid var(--navy-line); margin: 0; }

@media (max-width: 40rem) {
  .section-index { top: 3.9rem; }
}

/* ============================================================
   Job alerts + private-call blocks (Master Brief section 5)
   ============================================================ */

.job-alerts {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--surface);
  border-top: 3px solid var(--gold-500);
  background: var(--warm);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.job-alerts-copy h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ink);
}
.job-alerts-copy p {
  font-size: 0.92rem; color: var(--ink-soft); max-width: 62ch; margin-top: 0.5rem;
}
.job-alerts-form { margin-top: 1.4rem; }

/* Offered before the form, so it reads as an alternative rather than a footnote. */
.private-call {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem; margin-top: 1.6rem;
  border: 1px solid rgba(201, 154, 46, 0.45);
  background: rgba(201, 154, 46, 0.07);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
.private-call h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink);
}
.private-call p { font-size: 0.88rem; color: var(--ink-soft); max-width: 56ch; margin-top: 0.3rem; }
.private-call .btn { flex: 0 0 auto; }
@media (max-width: 44rem) { .private-call .btn { flex: 1 1 100%; text-align: center; } }

/* VAT note and ROI disclaimer (brief section 5) */
.vat-note { display: block; margin-top: 0.5rem; font-size: 0.84rem; color: var(--on-navy-soft); }
.roi-disclaimer {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  font-size: 0.8rem; line-height: 1.6; color: var(--on-navy-soft);
  max-width: 78ch; border-left: 2px solid var(--gold-500); padding-left: 0.9rem;
}

/* ============================================================
   Tabular numerals on money and rates (Master Brief section 2)
   Figures line up column to column instead of drifting.
   ============================================================ */
.tier-price strong, .tier-price span,
.tier-spec dd, .notes-row dd,
.roi-cell strong, .roi-line .vals, .roi-saving strong,
.vc-salary, .vacancy-summary dd,
.stat strong, .trust-item strong, .example-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Enquiry routing note + seller diversion (brief section 5) */
.route-note { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--ink-soft); }
.route-note.is-set::before { content: '\2192\00a0'; color: var(--gold-ink); font-weight: 700; }
.seller-divert {
  border: 1px solid rgba(201, 154, 46, 0.45);
  background: rgba(201, 154, 46, 0.07);
  padding: 0.85rem 1rem; font-size: 0.86rem; color: var(--ink-soft);
}
.seller-divert strong { color: var(--ink); }
.seller-divert a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Compact hero for pages the brief asks to shorten (Contact, About) */
.page-hero-compact { padding: clamp(6rem, 10vw, 8rem) 0 clamp(2rem, 4vw, 3rem); }

/* FAQ accordion (brief section 8: FAQPage schema where valid) */
.faq-band { background: var(--navy-900); color: var(--on-navy); padding: clamp(3.5rem, 6.5vw, 6.5rem) 0; }
.faq-band .display { color: var(--ivory); }
.faq-list { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0.75rem; max-width: 62rem; }
.faq-item { border: 1px solid var(--navy-line); background: var(--navy-950); }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.9rem, 2vw, 1.15rem) clamp(1rem, 2.4vw, 1.4rem);
  cursor: pointer; list-style: none;
  font-size: 0.98rem; font-weight: 600; color: var(--ivory);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; color: var(--gold-300); font-size: 1.25rem; flex: 0 0 auto; }
.faq-item[open] > summary::after { content: '\2212'; }
.faq-item > summary:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.faq-item p {
  padding: 0 clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2vw, 1.25rem);
  font-size: 0.9rem; color: var(--on-navy-soft); max-width: 76ch;
}

/* ============================================================
   Accessibility (Master Brief section 7, WCAG 2.2 AA)
   ============================================================ */

/* A single visible focus treatment everywhere, so keyboard users are never
   guessing where they are. Gold on navy and gold-ink on light both clear AA. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 1px;
}
/* On light surfaces the darker gold reads better against the background. */
.page-body a:focus-visible,
.pathways a:focus-visible,
.proof a:focus-visible,
.job-alerts a:focus-visible,
.private-call a:focus-visible { outline-color: var(--gold-ink); }

/* Skip link: keyboard users should not have to tab the whole nav first. */
.skip-link {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--navy-950); color: var(--ivory);
  padding: 0.75rem 1.1rem; font-size: 0.9rem; font-weight: 600;
  border-bottom: 2px solid var(--gold-500);
}
.skip-link:focus { transform: translateY(0); }

/* Status must not be carried by colour alone (WCAG 1.4.1). The selected
   category and keyword chip each gain a mark as well as a fill. */
.cat-btn.is-active .cat-label::after {
  content: '\00a0\2713';
  color: var(--gold-300);
  font-weight: 700;
}
.chip.is-active::before { content: '\2713\00a0'; font-weight: 700; }

/* Respect reduced-motion globally rather than per component. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   Section rhythm (Master Brief section 2)
   80-104px desktop, 56-72px tablet, 36-48px mobile. Set per
   breakpoint because a single clamp cannot satisfy all three.
   ============================================================ */
@media (min-width: 44rem) {
  :root { --section-y: var(--sp-7); --section-y-lg: var(--sp-8); }   /* 56 / 64 */
}
@media (min-width: 64rem) {
  :root { --section-y: var(--sp-9); --section-y-lg: var(--sp-9); } /* 72 */
}

/* ---- WhatsApp floating action button ---- */
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-header);
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--navy-950);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(192, 146, 58, 0.45);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(192, 146, 58, 0.6);
  color: var(--navy-950);
}
.whatsapp-float svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
@media print { .whatsapp-float { display: none; } }

/* ============================================================
   Hero call-to-action pair
   ------------------------------------------------------------
   Client feedback: the secondary button was disappearing into the
   hero image. It now sits on a semi-transparent navy panel with a
   stronger gold border and pure white text, so it reads clearly at
   a glance while staying visually subordinate to the gold primary.

   Both buttons carry the same 2px border width and the same
   min-height, so their boxes are identical to the pixel rather
   than differing by the border. Equal padding keeps the labels
   optically aligned.
   ============================================================ */
.hero-cta .btn {
  /* The base .btn-gold rule uses `border: none`, which zeroes the computed
     width whatever we set. Restating the style keeps both boxes identical. */
  border-style: solid;
  border-width: 2px;
  min-height: 3.5rem;              /* 56px: identical box on both, comfortable tap */
  padding: 0.95rem 1.9rem;         /* same on both, so the labels align */
  line-height: 1.2;
}

/* Primary: solid gold, unchanged in role. */
.hero-cta .btn-gold {
  background: var(--gold-500);
  background-image: none;
  border-color: var(--gold-500);
  color: var(--navy-950);
  box-shadow: 0 2px 14px rgba(201, 154, 46, 0.28);
}
.hero-cta .btn-gold:hover,
.hero-cta .btn-gold:focus-visible {
  background: var(--gold-300);
  border-color: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 154, 46, 0.42);
}

/* Secondary: readable against the photograph, still clearly second. */
.hero-cta .btn-ghost {
  background: rgba(11, 35, 70, 0.72);        /* mid navy, semi-transparent */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: var(--gold-500);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(2, 10, 26, 0.55);
}
.hero-cta .btn-ghost:hover,
.hero-cta .btn-ghost:focus-visible {
  background: rgba(11, 35, 70, 0.92);
  border-color: var(--gold-300);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 10, 26, 0.5);
}

.hero-cta .btn:active { transform: translateY(0); }

/* Mobile: full width and a generous tap target on both. */
@media (max-width: 44rem) {
  .hero-cta { gap: 0.625rem; max-width: none; }
  .hero-cta .btn {
    flex: 1 1 100%;
    width: 100%;
    min-height: 3.5rem;            /* comfortably above the 44px minimum */
  }
}

/* Motion is a nicety, not the signal - the colour change carries it alone
   when the visitor has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-cta .btn:hover,
  .hero-cta .btn:focus-visible { transform: none; }
}

/* Legal contact address. Previously a faint outlined button which the client
   could not read; now a plain high-contrast link that inherits the aside's
   dark surface, so the address is legible at a glance. */
.legal-contact-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.legal-contact-link:hover,
.legal-contact-link:focus-visible { color: var(--gold-100); }

/* Client-supplied note beneath the pricing table. */
.pricing-note {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--on-navy-soft);
  max-width: 82ch;
}

/* Honeypot. Kept in the layout and focusable-by-bots but removed from the
   accessibility tree and from view. `display:none` is avoided because some bots
   skip hidden inputs; this is invisible to people without being trivially
   detectable. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* The hidden attribute only sets `display: none` in the user-agent stylesheet,
   so any author rule that sets display beats it. Several forms are grids, which
   meant `form.hidden = true` after a successful submit did nothing: the form
   stayed on screen with its button frozen on "Sending…" while the success panel
   appeared below it. This guard restores the expected behaviour. */
.enquiry-form[hidden],
.apply-form[hidden],
.form-grid[hidden],
.form-status[hidden] { display: none !important; }


/* ============================================================
   Book Value Estimator (spec section 6)
   ============================================================ */
.estimator { background: var(--warm); padding: var(--section-y) 0; }
.est-form { margin-top: clamp(2rem, 4vw, 3rem); }

.est-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.est-step-tab {
  flex: 1 1 12rem; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-soft);
  background: var(--ivory); border: 1px solid var(--surface); border-bottom: 2px solid var(--surface);
}
.est-step-tab > span {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  background: var(--surface); color: var(--ink-soft); font-size: 0.8rem; border-radius: 50%;
}
.est-step-tab.is-active { color: var(--ink); border-bottom-color: var(--gold-500); }
.est-step-tab.is-active > span { background: var(--gold-500); color: var(--navy-950); }
.est-step-tab.is-done > span { background: var(--navy-900); color: var(--gold-300); }

.est-panel { border: 0; padding: 0; margin: 0; }
.est-panel[hidden] { display: none; }
.est-legend {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink); padding: 0; margin-bottom: 1rem;
}
.est-subhead {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-ink); margin: 1.6rem 0 0.9rem;
}
.est-optional { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.est-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.est-form .field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.est-form .field-full { grid-column: 1 / -1; }
.est-form label { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.est-form label span[aria-hidden] { color: var(--gold-ink); }
.est-form input, .est-form select {
  width: 100%; padding: 0.62rem 0.7rem; font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--ivory); border: 1px solid rgba(10, 31, 68, 0.2); border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.est-form input:focus-visible, .est-form select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.est-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }

.est-disclaimer {
  margin-top: 1.8rem; border: 1px solid var(--gold-500);
  border-left: 4px solid var(--gold-500); background: rgba(201, 154, 46, 0.08);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.est-disclaimer h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.6rem; }
.est-disclaimer > p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; }
.est-accept, .est-marketing { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; }
.est-accept input, .est-marketing input { width: auto; flex: 0 0 auto; margin-top: 0.2rem; }
.est-accept span, .est-marketing span { font-size: 0.86rem; color: var(--ink-soft); }
.est-error { margin-top: 1rem; color: #7A1F1F; background: rgba(122, 31, 31, 0.07); border-left: 3px solid #7A1F1F; padding: 0.7rem 0.9rem; font-size: 0.88rem; }
.est-error::before { content: "\26A0\00a0"; font-weight: 700; }

.est-result { margin-top: clamp(2rem, 4vw, 3rem); }
.est-result-head { text-align: center; margin-bottom: 1.6rem; }
.est-watermark {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.12em; font-weight: 700;
  color: var(--gold-ink); border: 1px solid var(--gold-500); padding: 0.3rem 0.7rem; margin-bottom: 0.9rem;
}
.est-range { background: var(--navy-950); color: var(--on-navy); padding: clamp(1.6rem, 4vw, 2.6rem); text-align: center; }
.est-range-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.est-range-end span, .est-range-central span {
  display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-soft); margin-bottom: 0.3rem;
}
.est-range-end strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.8rem); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.est-range-central strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--ivory); font-variant-numeric: tabular-nums; }
.est-range-central { padding: 0 clamp(0.5rem, 2vw, 1.5rem); border-inline: 1px solid var(--navy-line); }
.est-range-note { margin-top: 1.2rem; font-size: 0.82rem; color: var(--on-navy-soft); }

.est-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.est-card { background: var(--ivory); border: 1px solid var(--surface); padding: clamp(1.1rem, 2.4vw, 1.5rem); }
.est-card h3 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin-bottom: 0.7rem; }
.est-confidence { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--ink); }
.est-confidence-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.3rem; }
.est-list { display: grid; gap: 0.4rem; }
.est-list li { font-size: 0.88rem; color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.est-list li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.4rem; height: 0.4rem; background: var(--gold-500); }

.est-breakdown { margin-top: 1rem; border: 1px solid var(--surface); background: var(--ivory); }
.est-breakdown > summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.est-breakdown > summary:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.est-breakdown-body { padding: 0 1.2rem 1.2rem; overflow-x: auto; }
.est-score-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.est-score-table th, .est-score-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--surface); }
.est-score-table th { color: var(--ink-soft); font-weight: 600; }
.est-score-table td:last-child, .est-score-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-score-total td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--gold-500); }
.est-assumptions { margin-top: 1rem; font-size: 0.84rem; color: var(--ink-soft); }
.est-assumptions ul { margin-top: 0.4rem; display: grid; gap: 0.3rem; padding-left: 1.1rem; list-style: disc; }

.est-warnings { margin-top: 1rem; border-left: 3px solid var(--gold-500); background: rgba(201, 154, 46, 0.07); padding: 0.9rem 1.1rem; font-size: 0.85rem; color: var(--ink-soft); }
.est-warnings ul { margin-top: 0.4rem; padding-left: 1.1rem; list-style: disc; display: grid; gap: 0.3rem; }

.est-conversion { margin-top: 1.6rem; background: var(--navy-900); color: var(--on-navy); padding: clamp(1.4rem, 3vw, 2rem); }
.est-conversion h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--ivory); margin-bottom: 0.5rem; }
.est-conversion p { font-size: 0.9rem; color: var(--on-navy-soft); }
.est-conversion strong { color: var(--gold-300); font-variant-numeric: tabular-nums; }
.est-conversion-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; }
.est-recalc { margin-top: 1rem; text-align: center; }

@media (max-width: 44rem) {
  .est-range-central { border-inline: 0; border-block: 1px solid var(--navy-line); padding: 0.9rem 0; margin: 0.5rem 0; width: 100%; }
  .est-nav .btn { flex: 1; }
}


/* ============================================================
   Sticky-header scroll offsets (Value My Book instructions section 2)
   ============================================================
   Anchor targets and fields scrolled to during validation must never end up
   underneath the fixed header. scroll-margin-top reserves that space for the
   browser's own scrolling; the estimator script measures the header for its
   programmatic scrolls. --header-h is a safe upper bound for the bar height. */
:root { --header-h: 5.5rem; }
:target,
[id],
.field,
.est-panel,
.form-status { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ============================================================
   Form field alignment (Value My Book instructions section 2)
   ============================================================
   The reported bug: when one label wraps to two lines its input drops below
   the inputs beside it, because every .field is an independent flex column.
   Subgrid makes all the fields in a row share the same label / control / hint
   row boundaries, so the controls line up whatever the labels do.
   The flex rule below stays as the fallback for engines without subgrid, where
   equalising the label height achieves most of the same thing. */
.est-form .field,
.enquiry-form .field,
.apply-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.est-form .field > label,
.enquiry-form .field > label,
.apply-form .field > label { min-height: 2.4em; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.35rem; }

@supports (grid-template-rows: subgrid) {
  .est-grid,
  .form-grid {
    row-gap: 0.35rem;
    align-items: start;
  }
  .est-form .field,
  .enquiry-form .field,
  .apply-form .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;   /* label, control, hint */
    row-gap: 0.35rem;
    margin-bottom: 1rem;
  }
  /* Subgrid already equalises the label row, so the fallback height can go. */
  .est-form .field > label,
  .enquiry-form .field > label,
  .apply-form .field > label { min-height: 0; align-items: end; }
}

/* Required / optional markers (section 2: every required field shows an
   asterisk, every non-required one says Optional). */
.req {
  color: var(--gold-ink);
  text-decoration: none;
  border: 0;
  font-weight: 700;
  cursor: help;
}
.opt {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border-radius: 2px;
  padding: 0.1rem 0.34rem;
}
.est-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 0.9rem;
  max-width: 62ch;
}
.field-hint.is-warn { color: #7A4A00; font-weight: 600; }

/* ============================================================
   Secondary "Back" button (instructions section 2)
   ============================================================
   Light background, navy text, navy border, clear hover — and identical height
   and padding to the gold Calculate button so the pair sits level. .btn-gold
   sets `border: none`, which zeroes the border width, so the width is restated
   here rather than inherited. */
.btn-back {
  background: #FFFFFF;
  color: var(--navy-900);
  border-style: solid;
  border-width: 2px;
  border-color: var(--navy-800);
  min-height: 3.5rem;
  padding: 0.95rem 1.9rem;
}
.btn-back:hover,
.btn-back:focus-visible {
  background: var(--surface);
  border-color: var(--navy-950);
  color: var(--navy-950);
}
.est-nav .btn-gold {
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  min-height: 3.5rem;
  padding: 0.95rem 1.9rem;
}

/* ============================================================
   Estimator result additions (instructions sections 7, 11, 13)
   ============================================================ */
.est-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--surface);
}
.est-metrics li {
  background: var(--ivory);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.est-metrics span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.est-metrics strong {
  font-size: 1.05rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Mandated cautions, shown in the specification's own words. */
.est-cautions {
  margin-top: 1rem;
  border-left: 4px solid #B8860B;
  background: rgba(184, 134, 11, 0.09);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  color: #6B4A00;
  display: grid;
  gap: 0.6rem;
}

/* Section 11 compliance stop rule — replaces the figures entirely. */
.est-stop {
  border: 2px solid var(--gold-500);
  background: var(--ivory);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  text-align: left;
}
.est-stop h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.est-stop p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); max-width: 68ch; }
.est-stop .est-conversion-actions { margin-top: 1.3rem; }
.est-stop .btn-ghost { border-color: var(--navy-800); color: var(--navy-900); background: transparent; }
.est-stop .btn-ghost:hover, .est-stop .btn-ghost:focus-visible { background: var(--surface); color: var(--navy-950); }

/* Section 13: the full disclaimer must appear on the result page. */
.est-full-disclaimer {
  margin-top: 1rem;
  border: 1px solid var(--surface);
  background: var(--ivory);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
.est-full-disclaimer h3 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.est-full-disclaimer p { font-size: 0.82rem; line-height: 1.65; color: var(--ink-soft); }

/* ============================================================
   Floating WhatsApp button (instructions section 2)
   ============================================================
   It was overlapping the Province dropdown and its arrow. It now sits clear of
   the content column, shrinks on small screens, and steps aside entirely while
   a field in the last form row has focus so it can never cover what is being
   typed. */
.whatsapp-float {
  width: 3rem;
  height: 3rem;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  opacity: 0.96;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, opacity 0.25s;
}
.whatsapp-float svg { width: 1.5rem; height: 1.5rem; }
/* While a form is being filled in, fade and shift the button out of the way.
   :focus-within rather than a descendant :focus, because :focus additionally
   requires the document itself to be focused, which makes the behaviour
   untestable and drops it in an unfocused window. */
body:has(.est-form:focus-within) .whatsapp-float,
body:has(.enquiry-form:focus-within) .whatsapp-float,
body:has(.apply-form:focus-within) .whatsapp-float {
  opacity: 0.25;
  transform: translateY(0.5rem) scale(0.88);
}
body:has(.est-form:focus-within) .whatsapp-float:hover,
body:has(.enquiry-form:focus-within) .whatsapp-float:hover,
body:has(.apply-form:focus-within) .whatsapp-float:hover {
  opacity: 1;
  transform: none;
}
@media (max-width: 30rem) {
  .whatsapp-float { width: 2.75rem; height: 2.75rem; }
  .whatsapp-float svg { width: 1.35rem; height: 1.35rem; }
}

/* Keep the last elements in a form clear of the floating button on narrow
   screens, so it can never sit on top of a submit button. */
@media (max-width: 48rem) {
  .est-nav, .form-actions { padding-bottom: 3.5rem; }
}


/* ===========================================================================
   PRICING CORRECTION - approved commercial structure (6 August 2026 brief)
   ---------------------------------------------------------------------------
   Shared components for the pieces the brief adds: the mandatory footer note,
   the "programme begins at Essential" statement, the two acquisition pricing
   paths, the worked R5 million example, and the non-member recruitment options
   block on the services page.

   All of them carry rates, so all of them follow the same two rules: the text
   must never be clipped or truncated at any width (section 11 forbids hidden
   terms), and nothing here may scroll horizontally.
   ======================================================================== */

/* The section 10 note. It is legal text that must be readable, not fine print
   hidden at the bottom of a card, so it keeps a real line height and a colour
   that still meets contrast on both navy and paper backgrounds. */
.pricing-footnote {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 62ch;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.band-deep .pricing-footnote,
.membership .pricing-footnote,
.advantage .pricing-footnote {
  color: var(--on-navy-soft);
}

/* Section 6: the Growth Partner Programme begins at Essential. */
.programme-scope {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 70ch;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--on-navy-soft);
  border-left: 2px solid var(--gold-500);
  padding-left: 1rem;
}
.membership .programme-scope { margin-inline: auto; }

.tier-classification {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--on-navy-soft);
}

.footer-fee-note {
  max-width: 78ch;
  margin: 0.9rem auto 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--on-navy-soft);
  opacity: 0.85;
}

/* ---- Two acquisition pricing paths (brief section 6) ---- */
.acq-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 47.9375rem) {
  .acq-paths { grid-template-columns: 1fr; }
}
.acq-path {
  border: 1px solid var(--line);
  padding: clamp(1.2rem, 3vw, 1.7rem);
  background: var(--paper-2, transparent);
}
.acq-path-member { border-color: var(--gold-500); }
.acq-path-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--gold-500);
  color: var(--gold-ink);
}
.acq-path h3 {
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}
.acq-path-fee { margin-top: 0.7rem; font-size: 0.92rem; line-height: 1.5; }
.acq-path-fee strong { color: var(--gold-ink); }
.acq-path-note {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---- The worked example (brief section 5) ----
   Deliberately a description list rather than a table: it is two labelled
   statements, and a two-column table at 320px either scrolls sideways or
   squeezes the numbers, both of which section 11 rules out. */
.acq-example {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(192, 146, 58, 0.45);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.acq-example-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(192, 146, 58, 0.3);
}
.acq-example-list > div {
  display: grid;
  gap: 0.3rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.acq-example-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.acq-example-list dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.acq-example-list dt span {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.acq-example-list dd { font-size: 0.92rem; line-height: 1.6; }
.acq-example-note {
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* On navy sections the same components need the navy palette. */
.advantage .acq-example,
.acq-feature .acq-example { border-color: rgba(192, 146, 58, 0.45); }
.advantage .acq-example-title,
.acq-feature .acq-example-title { color: var(--ivory); }
.advantage .acq-example-list > div,
.acq-feature .acq-example-list > div { border-bottom-color: var(--navy-line); }
.advantage .acq-example-list dt,
.acq-feature .acq-example-list dt { color: var(--gold-300); }
.advantage .acq-example-list dt span,
.acq-feature .acq-example-list dt span,
.advantage .acq-example-note,
.acq-feature .acq-example-note { color: var(--on-navy-soft); }
.advantage .acq-example-list dd,
.acq-feature .acq-example-list dd { color: var(--on-navy); }

/* ---- Non-member recruitment options, services page (brief section 6) ---- */
.recruit-options { padding-block: clamp(3.5rem, 8vw, 6rem); }
.recruit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
@media (max-width: 47.9375rem) {
  .recruit-grid { grid-template-columns: 1fr; }
}
.recruit-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.recruit-card .btn { margin-top: auto; }
.recruit-tag {
  align-self: start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--gold-500);
  color: var(--gold-ink);
}
.recruit-card h3 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
}
.recruit-desc {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.recruit-spec { margin-block: 1.3rem; display: grid; }
.recruit-spec > div {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--line);
}
.recruit-spec dt {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.recruit-spec dd { font-size: 0.9rem; line-height: 1.55; }
.recruit-spec dd.hi { color: var(--gold-ink); font-weight: 600; }