/* =============================================================
   Harvey Law Group Stylesheet
   Pures CSS, mobil first, ohne Framework.
   ============================================================= */

:root {
  --navy:         #3F5C57;
  --navy-light:   #52736d;
  --navy-dark:    #2d4541;
  --gold:         #7e8a88;
  --gold-light:   #a3acaa;
  --gold-dark:    #5f6968;
  --accent:       #3a7665;
  --accent-light: #4d8d7b;
  --accent-dark:  #2c5b4d;
  --light:        #f5f6f5;
  --paper:        #ffffff;
  --text:         #2d3a37;
  --muted:        #646f6c;
  --border:       #e3e6e5;
  --border-strong:#c9cecd;
  --shadow-sm:    0 2px 6px rgba(63,92,87,0.10);
  --shadow:       0 4px 20px rgba(63,92,87,0.14);
  --shadow-lg:    0 10px 40px rgba(63,92,87,0.20);
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    14px;
  --container:    1190px;
  --serif:        "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:         "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --transition:   200ms ease;
  /* Fixed chrome. The header is position:fixed (see below), so its height has to
     be a known number rather than a measured one: it is pinned via
     .header-inner min-height, and the body is padded by exactly this much. */
  --topbar-h:     34px;
  --header-h:     76px;
  --chrome-h:     calc(var(--topbar-h) + var(--header-h));
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-h) + 12px);
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-dark); }
button { font: inherit; cursor: pointer; }
ul, ol { padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.75em;
  font-weight: 600;
}
/* Libre Baskerville (serif) on the two top heading levels only; everything
   smaller is Open Sans. */
h1, h2 { font-family: var(--serif); }
h3, h4, h5, h6 { font-family: var(--sans); }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--muted); }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Default is for a LIGHT background, which is what most sections use. Dark
     contexts (.hero, .section--navy, the newsletter band, the ancestry FAQ)
     override this. It used to be #ffffff, which made every eyebrow on a white
     or --light section invisible. */
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* Dark sections: keep the eyebrow light. */
.section--navy .eyebrow { color: var(--gold-light); }
.text-center { text-align: center; }
/* ---------- Eyebrow in case the background is clear ---------- */
.section--accred .eyebrow {
    color: #3f5c57 !important;
}
/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section--light  { background: var(--light); }
.section--navy   { background: var(--navy); color: #d6dde6; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: var(--gold-light); }
.section--narrow { padding: clamp(2rem, 5vw, 4rem) 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Header & navigation ---------- */
/* Permanently fixed under the top bar, on every screen size: the menu stays
   reachable however far down the page the visitor is. It no longer hides on
   scroll-down (the .is-hidden class and its scroll listener are gone). */
.site-header {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* min-height defines the header height (minus its 1px border) so --header-h is
     a fact, not an estimate. */
  min-height: calc(var(--header-h) - 1px);
  padding: 0.9rem 1.25rem;
  max-width: var(--container);
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--navy);
}
.logo img {
  height: 44px;
  width: auto;
  display: block;
}
.site-footer .logo img { height: 48px; filter: brightness(0) invert(1); }
@media (max-width: 600px) {
  .logo img { height: 36px; }
}

.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  width: 40px; height: 40px;
  cursor: pointer;
  position: relative;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  position: absolute;
  display: block;
  width: 24px; height: 2px;
  background: var(--navy);
  left: 8px;
  transition: transform var(--transition);
}
.nav-toggle-label span { top: 19px; }
.nav-toggle-label span::before { content: ""; top: -8px; }
.nav-toggle-label span::after  { content: ""; top:  8px; }

.main-nav { display: flex; align-items: center; gap: 0.25rem; }
.main-nav > ul {
  list-style: none;
  display: flex;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
}
.main-nav > ul > li { position: relative; }
.main-nav a {
  display: block;
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  border-radius: var(--radius-sm);
}
.main-nav a:hover { background: var(--light); color: var(--navy); }
.main-nav a.is-active { color: var(--gold-dark); }
.nav-mobile-only { display: none; } /* News link: shown only in the mobile menu (see 860px breakpoint) */
.mnav-caret { display: none; } /* mega-menu accordion toggle: shown only in the mobile menu */

.has-dropdown > a::after {
  content: "▾";
  font-size: 0.7em;
  margin-left: 0.35em;
  color: var(--muted);
}

.dropdown,
.megamenu {
  position: absolute;
  top: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-megamenu:hover > .megamenu,
.has-megamenu:focus-within > .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown ul { list-style: none; margin: 0; padding: 0; }
.dropdown a { padding: 0.5rem 0.75rem; font-size: 0.9rem; }

.megamenu {
  /* Always centered to the viewport, regardless of which trigger opens it. */
  position: fixed;
  top: 70px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(6px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  min-width: 720px;
  max-width: calc(100vw - 2rem);
  padding: 1.5rem;
}
/* Invisible hover-bridge above the megamenu so the cursor can travel
   from the nav trigger down to the menu without closing it. */
.megamenu::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 20px;
}
/* Override the shared transform so the centered megamenu stays centered when opened. */
.has-megamenu:hover > .megamenu,
.has-megamenu:focus-within > .megamenu {
  transform: translateX(-50%) translateY(0);
}
.megamenu-col h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 0.6rem;
}
.megamenu-col ul { list-style: none; margin: 0; padding: 0; }
.megamenu-col li + li { margin-top: 2px; }
.megamenu-col a {
  padding: 0.35rem 0.5rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.megamenu-col--wide { grid-column: span 2; }
.megamenu-sub {
  list-style: none;
  padding: 0 0 0.4rem 1.6rem;
  margin: 2px 0 0;
  border-left: 1px solid var(--border);
  margin-left: 0.7rem;
}
.megamenu-sub a {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.22rem 0.5rem;
}
.megamenu-sub a:hover { color: var(--accent); background: transparent; }

/* SVG country-flag images */
.flag-icon {
  display: inline-block;
  width: 1.33em;
  height: 1em;
  vertical-align: -0.15em;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.flag-icon--sm { width: 1.1em;  height: 0.825em; }
.flag-icon--md { width: 1.6em;  height: 1.2em; }
.flag-icon--lg { width: 2.4em;  height: 1.8em; vertical-align: middle; border-radius: 3px; margin-bottom: 5px; }
.flag-icon--xl { width: 3.6em;  height: 2.7em; vertical-align: middle; border-radius: 4px; margin-bottom: 5px; }

/* Programme hero: flag sits in its own block above the H1 */
.programme-hero-flag {
  margin-bottom: 0.85rem;
  line-height: 0;
}
.programme-hero-flag .flag-icon {
  width: 44px;
  height: 33px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Programme suspended notice, page stays live, but flags the programme as paused. */
.programme-suspended {
  background: #FBF2E5;
  border-top: 1px solid #ECD9BC;
  border-bottom: 1px solid #ECD9BC;
}
.programme-suspended .container {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
  flex-wrap: wrap;
}
.programme-suspended__tag {
  flex-shrink: 0;
  display: inline-block;
  background: #B4691F;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  white-space: nowrap;
  margin-top: 0.1rem;
}
.programme-suspended__msg {
  margin: 0;
  color: #6E4C1E;
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 72ch;
}

.btn-nav,
.main-nav a.btn-nav {
  background: var(--accent);
  color: #fff !important;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn-nav:hover { background: var(--accent-dark); color: #fff !important; }

.lang-switch {
  position: relative;
}
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: var(--gold-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch[open] summary { background: var(--light); }
.lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  min-width: 170px;
  list-style: none;
  margin: 0;
  z-index: 50;
}
.lang-list a { padding: 0.4rem 0.65rem; font-size: 0.88rem; border-radius: var(--radius-sm); }
/* Language list inside the mobile menu (hidden on desktop). */
.nav-lang { display: none; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
/* Only the homepage hero gets the background photo */
.hero--home {
  background:
    linear-gradient(135deg, rgba(45,69,65,0.78), rgba(63,92,87,0.62)),
    url('../img/hero_background-image.webp') center/cover no-repeat;
}
.hero h1 { color: #fff; max-width: 18ch; }

/* ---- Hero with a video beside the text (Citizenship by Ancestry) ---- */
/* Breadcrumb, eyebrow and H1 form one full-width block above the columns. The
   global .hero h1 cap of 18ch would wrap the title, so it is lifted here to
   keep it on a single line. */
.hero-head { margin-bottom: 2.25rem; }
.hero-head h1 { max-width: none; }
@media (max-width: 900px) {
  .hero-head { margin-bottom: 1.5rem; }
}

/* Two columns on desktop, stacked on narrow screens. The container keeps its
   normal 1190px width: only this inner grid is constrained. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}
.hero-split-text { min-width: 0; }
.hero-split .hero-video { min-width: 0; }
.hero-video-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .75rem;
  max-width: none;
}
.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  /* Text first, video under it, on phones. */
  .hero-split .hero-video { order: 2; }
}

.hero p  { color: #fff; max-width: 60ch; font-size: 1.1rem; }
.hero .eyebrow { color: var(--gold-light); }
/* Editable hub intro (the page body) rendered under the hero title. */
.hero-intro { max-width: 64ch; margin-top: 1rem; }
/* Hubs (CBI, RBI, ascendance, retraite) : la description occupe toute la largeur
   du conteneur au lieu d'être enfermée dans une colonne de 60-64 caractères.
   Le .hero p global reste à 60ch pour toutes les autres pages. */
.hero-intro--full { max-width: none; }
.hero-intro--full p, .hero-intro--full ul, .hero-intro--full ol { max-width: none; }
.hero-intro p { color: #fff; font-size: 1.1rem; }
.hero-intro p:not(:last-child) { margin-bottom: 0.9rem; }
.hero-intro ul, .hero-intro ol { color: #fff; margin: 0.6rem 0 0.6rem 1.2rem; }
.hero-intro li { margin: 0.25rem 0; }
.hero-intro a { color: var(--gold-light); text-decoration: underline; }
.hero-intro strong { color: #fff; }
.hero-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-kpi strong {
  display: block;
  font-family: var(--sans);
  font-size: 2rem;
  color: var(--gold-light);
  line-height: 1;
}
.hero-kpi span { font-size: 0.85rem; color: #fff; }

/* ---------- Programme hero facts (max 3, under the title) ---------- */
.prog-hero-facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.prog-hero-fact {
  position: relative;
  padding: 0 1.9rem;
}
.prog-hero-fact:first-child { padding-left: 0; }
.prog-hero-fact + .prog-hero-fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.6rem;
  background: rgba(255,255,255,0.18);
}
.prog-hero-fact-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.45rem;
}
.prog-hero-fact-value {
  display: block;
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
@media (max-width: 640px) {
  .prog-hero-fact { flex: 1 1 100%; padding: 0; }
  .prog-hero-fact + .prog-hero-fact { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); }
  .prog-hero-fact + .prog-hero-fact::before { display: none; }
}

/* ---------- About teaser (homepage "Über 30 Jahre" section) ---------- */
.about-teaser .container {
  text-align: center;
  max-width: 920px;
}
.about-teaser-head {
  margin-bottom: 3rem;
}
.about-teaser-head h2 {
  max-width: 22ch;
  margin: 0 auto 1.5rem;
}
.about-teaser-head .btn { margin-top: 0.25rem; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.kpi { text-align: center; }
.kpi strong {
  display: block;
  font-family: var(--sans);
  font-size: 2.25rem;
  color: var(--gold-light);
  line-height: 1;
}
.kpi span {
  display: block;
  font-size: 0.88rem;
  color: #fff;
  margin-top: 0.5rem;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .about-teaser-head h2 { font-size: 1.55rem; line-height: 1.25; }
  .about-teaser-head .btn { width: 100%; max-width: 320px; justify-content: center; }
  .kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }
  .kpi strong { font-size: 1.85rem; }
  .kpi span { font-size: 0.8rem; }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--light);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  flex-wrap: wrap;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-strip-inner strong { color: var(--navy); font-family: var(--sans); font-weight: 600; letter-spacing: 0.05em; font-size: 0.95rem; text-transform: none; }
.trust-strip-inner a { color: var(--muted); text-decoration: none; transition: color var(--transition); }
.trust-strip-inner a:hover { color: var(--accent); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold-light);
}
.card h3 { margin-top: 0; }
.card .card-label {
  display: inline-block;
  background: var(--light);
  color: var(--gold-dark);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--navy);
}
.card-link::after { content: "→"; transition: transform var(--transition); }
.card-link:hover::after { transform: translateX(4px); }

/* Service cards link via their title (SEO best practice): the whole card is
   clickable through a single, descriptive title anchor, no "read more" button. */
.card { position: relative; }
.card-title-link { color: inherit; text-decoration: none; transition: color var(--transition); }
.card-title-link::after { content: ""; position: absolute; inset: 0; }
.card-title-link:hover { color: var(--accent); }

.card--programme {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
.card--programme .flag {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.card--programme h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.card-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
}
.card-meta li {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.card-meta li span:first-child { color: var(--muted); }
.card-meta li span:last-child  { color: var(--navy); font-weight: 600; text-align: right; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.btn--primary {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(58,118,101,0.25);
}
.btn--primary:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); color: #fff; box-shadow: 0 4px 14px rgba(58,118,101,0.40); }

/* Lifted variant on dark sage sections so the green CTA stays visible against the sage background */
.section--navy .btn--primary {
  background-color: var(--accent-light);
  border-color: var(--accent-light);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.section--navy .btn--primary:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--accent-dark);
}
.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--outline-light {
  background: rgba(255,255,255,0.10);
  border-color: #fff;
  color: #fff;
}
.btn--outline-light:hover { background: #fff; color: var(--accent-dark); border-color: #fff; }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }

/* ---------- Tabs (CSS-only, radio-based) ---------- */
.tabs { margin: 2rem 0; }
.tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tab-labels {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.tab-labels label {
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-labels label:hover { color: var(--navy); }
.tab-panel { display: none; }

#tab-rbi:checked ~ .tab-labels label[for="tab-rbi"],
#tab-cbi:checked ~ .tab-labels label[for="tab-cbi"],
#tab-businesslaw:checked   ~ .tab-labels label[for="tab-businesslaw"],
#tab-privateclient:checked ~ .tab-labels label[for="tab-privateclient"],
#tab-duediligence:checked  ~ .tab-labels label[for="tab-duediligence"],
#tab-investmig:checked     ~ .tab-labels label[for="tab-investmig"] {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
}
#tab-rbi:checked ~ .tab-panels #panel-rbi,
#tab-cbi:checked ~ .tab-panels #panel-cbi,
#tab-businesslaw:checked   ~ .tab-panels #panel-businesslaw,
#tab-privateclient:checked ~ .tab-panels #panel-privateclient,
#tab-duediligence:checked  ~ .tab-panels #panel-duediligence,
#tab-investmig:checked     ~ .tab-panels #panel-investmig {
  display: block;
}

/* On mobile, hide wide comparison-table sections the programme cards below
   already carry the same data in a phone-friendly card layout. */
@media (max-width: 720px) {
  .compare-section { display: none; }
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.compare th,
table.compare td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  vertical-align: top;
}
table.compare th {
  background: var(--light);
  font-family: var(--sans);
  color: var(--navy);
  font-weight: 600;
}
table.compare tr:last-child td { border-bottom: none; }
table.compare tr:hover td { background: rgba(245,247,250,0.6); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form > div { margin: 0; }
.form-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin-bottom: 0.45rem;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="number"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--gll, #f8faf9);
  background: #f7f9f8;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  appearance: none;
}
.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237e8a88' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted); opacity: 0.7; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,118,101,0.14);
}
.form textarea { min-height: 130px; }
.form .checkbox {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}
.form .checkbox input {
  margin-top: 0.1rem;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;          /* keep it square next to the long consent text */
  accent-color: var(--accent);
  cursor: pointer;
}
.form .checkbox a { color: var(--accent); text-decoration: underline; }
@media (max-width: 600px) {
  .form .checkbox input { width: 1.4rem; height: 1.4rem; }
  .form .checkbox { font-size: 0.88rem; gap: 0.7rem; }
}
.honeypot { position: absolute; left: -9999px; opacity: 0; }

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow);
}
.form-card > h2 { font-size: 1.4rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }

.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.alert--ok { background: #e6f4ea; color: #1f6f3e; border: 1px solid #b6dfc4; }
.alert--err { background: #fdecea; color: #a52624; border: 1px solid #f3c1be; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.75rem; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 1.25rem;
  background: #fff;
  transition: box-shadow var(--transition);
}
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.3em;
  color: var(--gold-dark);
  transition: transform var(--transition);
}
.faq details[open] summary::after { content: "−"; }
.faq details > *:not(summary) { padding-bottom: 1rem; color: var(--text); }

/* Plain, always-visible FAQ: the question is a heading and the answer is body
   text, with no accordion to open. The .faq details/summary rules above still
   serve legacy <details> typed into article bodies. */
.faq--plain { display: block; }
.faq-item + .faq-item { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.faq-item h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 .5rem; color: var(--navy);
  scroll-margin-top: calc(var(--chrome-h) + 12px); }
.faq-a { color: var(--text); }
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child { margin-bottom: 0; }
.faq-a p { margin: 0 0 .9rem; }

/* Same block on the sage-green programme FAQ section. */
.prog-faq .faq-item h3 { color: #fff; }
.prog-faq .faq-item + .faq-item { border-top-color: rgba(255,255,255,0.18); }
.prog-faq .faq-a { color: #e8edeb; }
.prog-faq .faq-a a { color: #fff; text-decoration: underline; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb-sep { color: var(--border-strong); }

/* ---------- Fact block ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}
.fact {
  background: #fff;
  padding: 1.25rem;
}
.fact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  margin-bottom: 0.35rem;
}
.fact-value {
  font-family: var(--sans);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 600;
}

/* ---------- Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -16px;
  left: 1.25rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
}
.step h4 { margin-top: 0.5rem; }

/* ---------- Accreditation grid (legacy card style kept for back-compat) ---------- */
.creds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}
.cred {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text);
}
.cred-title {
  font-family: var(--sans);
  color: var(--navy);
  font-weight: 600;
  display: block;
  margin-bottom: 0.15rem;
}

/* ---------- Accreditation list (linked, dot-prefixed) ---------- */
.cred-wrap {
  display: grid;
  gap: 2.75rem;
  margin-top: 2rem;
}
.cred-group-label {
  font-family: var(--sans);
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 1.1rem;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.4rem 1.75rem;
}
.cred-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border);
}
.cred-item:last-child { border-bottom: none; }
.cred-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(58,118,101,0.12);
}
.cred-item a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1.4;
}
.cred-item a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-dark);
  color: #fff;
  padding: 4rem 0 0;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 1.75rem;
  padding-bottom: 3rem;
}
.footer-office-addr { margin: 0 0 0.7rem; line-height: 1.5; }
.footer-col li a:has(.footer-ico) { display: inline-flex; align-items: center; }
.footer-col h3 {
  color: #fff;
  font-family: var(--serif);
  font-size: 1rem;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: #fff; }
.footer-col a:hover { color: var(--gold-light); }
.footer-brand .logo-main { color: #fff; font-size: 1.5rem; }
.footer-brand .logo-sub { color: var(--gold-light); }
.footer-brand p { color: #fff; margin-top: 1rem; }

/* Social icons kept subtle (muted, thin outline; gold on hover). */
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.14);
  transition: color .2s ease, border-color .2s ease;
}
.footer-social-link:hover { color: var(--gold-light); border-color: var(--gold-light); }
.footer-social-link svg { display: block; }

/* Google Preferred Sources line, sits just above the copyright bar. */
.footer-prefsrc {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.15rem 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}
.footer-prefsrc-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.footer-prefsrc-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.footer-prefsrc + .footer-bottom { border-top: 0; padding-top: 1.15rem; }

/* Partnership line, between the Google line and the copyright row. It draws no
   rule of its own: the divider above it belongs to .footer-prefsrc, and
   .footer-bottom's own top border is cancelled below, so the three lines read as
   one block instead of three boxed rows. */
.footer-partner {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}
.footer-partner a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  transition: color 0.2s, border-color 0.2s;
}
.footer-partner a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.footer-partner + .footer-bottom { border-top: 0; padding-top: 1.15rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  color: #fff;
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-bottom-links a { color: #fff; }
.footer-bottom-links a:hover { color: var(--gold-light); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .megamenu { min-width: 560px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle-label { display: inline-block; }

  /* The menu opens as a second row inside the header. Fixed positioning means it
     can no longer push the page down, so cap it and let it scroll on its own. */
  .site-header { max-height: calc(100vh - var(--topbar-h)); max-height: calc(100dvh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* Header inner wraps so the nav can open as a second row below the logo/hamburger row */
  .header-inner { flex-wrap: wrap; }
  .lang-switch { display: none; }            /* moved into the menu drawer on mobile */
  .nav-toggle-label { order: 3; }

  /* Language options live at the bottom of the open menu on mobile. */
  .nav-lang { display: block; padding: 1rem 0 0.25rem; }
  .nav-lang-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.6rem; }
  .nav-lang .lang-list { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; min-width: 0; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; }
  .nav-lang .lang-list a { padding: 0.4rem 0.7rem; border: 1px solid var(--border); }

  /* Mobile menu: simple inline dropdown that pushes content down. No fixed positioning, no z-index drama. */
  .main-nav {
    display: none;
    width: 100%;
    order: 4;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
  }
  .nav-toggle:checked ~ .main-nav { display: block; }
  .main-nav > ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .main-nav > ul > li {
    border-bottom: 1px solid var(--border);
    position: static;
  }
  .main-nav > ul > li:last-child { border-bottom: none; }
  .main-nav a { padding: 0.85rem 0; font-size: 1rem; }
  .nav-mobile-only { display: list-item; } /* reveal the News link in the mobile drawer */

  /* Residency / Citizenship become collapsible accordions on mobile. The
     programme links are server-rendered and stay in the HTML (Google crawls
     them whether the panel is open or not), the checkbox only shows/hides the
     panel visually. No JavaScript, no duplicated links. */
  .has-dropdown > a::after, .has-megamenu > a::after { display: none; }
  .dropdown { display: none !important; }   /* simple dropdowns: their pages already list everything */

  /* Row: hub link (still navigates) on the left + chevron toggle on the right. */
  .has-megamenu { display: flex; flex-wrap: wrap; align-items: stretch; }
  .has-megamenu > a { flex: 1 1 auto; }
  .mnav-caret {
    display: block;
    flex: 0 0 48px;
    position: relative;
    cursor: pointer;
  }
  .mnav-caret::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    margin: -7px 0 0 -5px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .mnav-toggle:checked ~ .mnav-caret::after { transform: rotate(-135deg); }

  /* Panel: collapsed by default; a static single-column stack when open. */
  .megamenu {
    display: none !important;
    position: static;
    top: auto; left: auto; right: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    grid-template-columns: 1fr;
    gap: 0;                       /* desktop column gap would be a huge blank band when stacked */
    min-width: 0; max-width: none; width: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent;
    padding: 0 0 0.5rem 0.75rem;
  }
  .megamenu::before { display: none; }   /* drop the desktop hover-bridge */
  /* Neutralise the desktop hover/focus centering transform on mobile, otherwise
     the opened panel (with the trigger in a sticky touch-hover/focus state) is
     shifted translateX(-50%) off-screen to the left until you tap again. */
  .has-megamenu:hover > .megamenu,
  .has-megamenu:focus-within > .megamenu { transform: none; left: auto; }
  .mnav-toggle:checked ~ .megamenu { display: grid !important; }
  .megamenu-col { padding-bottom: 0; }
  /* The empty spacer headings only exist to align columns on desktop, on a
     stacked mobile list they render as a big blank gap, so drop them. */
  .megamenu-col h4[aria-hidden="true"] { display: none; }
  .megamenu-col h4 { margin-top: 20px; }
  .megamenu-col a { padding: 0.5rem 0; }

  .btn-nav { margin-top: 0.5rem; display: inline-flex; }

  /* Form inputs at 16px to stop iOS Safari from zooming on focus */
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form input[type="password"],
  .form input[type="number"],
  .form select,
  .form textarea {
    font-size: 16px;
  }

}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 2rem; }
  .hero { padding: 3rem 0 2.5rem; }
}

/* ---------- Award badges ---------- */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  gap: 1.5rem 2rem;
  margin-top: 1.25rem;
  align-items: center;
  justify-content: start;
}
.award-badge {
  max-height: 150px;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(63,92,87,0.18));
  transition: transform var(--transition);
}
.award-badge:hover { transform: scale(1.04); }
@media (max-width: 600px) {
  .awards-grid { gap: 1.25rem; justify-content: center; }
  .award-badge { max-height: 120px; }
}

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: block;
  color: inherit;
  text-decoration: none;
}
a.team-card { cursor: pointer; }
a.team-card:hover .team-name { color: var(--brand); }
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--light);
}
.team-info { padding: 1.1rem 1.25rem 1.3rem; }
.team-name {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.team-role {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.partner-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 140px 1fr;
  transition: transform var(--transition), box-shadow var(--transition);
}
.partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.partner-card img {
  width: 140px;
  height: 100%;
  object-fit: cover;
  background: var(--light);
}
.partner-info { padding: 1.25rem 1.4rem; }
.partner-info h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.partner-info p  { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 520px) {
  .partner-card { grid-template-columns: 1fr; }
  .partner-card img { width: 100%; height: 220px; }
}

/* ---------- Force 3-column grid where used (homepage services etc.) ---------- */
.grid-3-fixed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 900px) { .grid-3-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-3-fixed { grid-template-columns: 1fr; } }

.grid-4-fixed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 1100px) { .grid-4-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid-4-fixed { grid-template-columns: 1fr; } }

/* Homepage service cards: reflow to the number of VISIBLE cards, so hiding a
   card (e.g. a deactivated section) yields a clean 3- or 2-column row instead
   of leaving a 4-column gap. auto-fit is inherently responsive. */
.card-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
@media (max-width: 560px) { .card-grid-auto { grid-template-columns: 1fr; } }

/* ---------- Animations & motion ---------- */
@keyframes hlgFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hlgBtnShine {
  0%, 78%  { background-position: -100% 0; }
  92%      { background-position: 200% 0; }
  100%     { background-position: 200% 0; }
}

@media (prefers-reduced-motion: no-preference) {

  /* Subtle staggered entrance for hero content */
  .hero > .container > * { animation: hlgFadeUp 0.7s ease-out backwards; }
  .hero > .container > *:nth-child(1) { animation-delay: 0.05s; }
  .hero > .container > *:nth-child(2) { animation-delay: 0.15s; }
  .hero > .container > *:nth-child(3) { animation-delay: 0.25s; }
  .hero > .container > *:nth-child(4) { animation-delay: 0.35s; }
  .hero > .container > *:nth-child(5) { animation-delay: 0.45s; }
  .hero > .container > *:nth-child(6) { animation-delay: 0.55s; }

  /* Scroll-reveal for sections only applied when JS is available */
  .js .section {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
  }
  .js .section.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Periodic shine on primary buttons (every ~7s, lasts ~1s) */
  .btn--primary {
    background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
    background-size: 250% 100%;
    background-position: -100% 0;
    background-repeat: no-repeat;
    animation: hlgBtnShine 7s ease-in-out 2s infinite;
  }
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 580px;
  margin: 0 auto;
  background: var(--navy-dark);
  color: #fff;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.cookie-banner.cookie-banner--show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner-inner {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cookie-banner-text { flex: 1 1 240px; }
.cookie-banner-text strong {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #fff;
}
.cookie-banner-text p {
  margin: 0;
  font-size: 0.86rem;
  color: #fff;
  line-height: 1.5;
}
.cookie-banner-text a { color: #8fd0bc; text-decoration: underline; }
.cookie-banner-actions .btn { padding: 0.55rem 1.15rem; white-space: nowrap; }
@media (max-width: 480px) {
  .cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding: 0.9rem 1rem; }
  .cookie-banner-actions .btn { width: 100%; }
}

/* ---------- Respect user's reduced-motion preference ---------- */
@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;
  }
}

/* ---------- Team detail page ---------- */
.team-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 880px) {
  .team-detail {
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: start;
  }
}
.team-detail-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.team-detail-photo {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--light);
  display: block;
  margin: 0 auto;
}
.team-detail-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.team-detail-block h3 {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-detail-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.team-detail-block li {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  padding-left: 1rem;
  position: relative;
}
.team-detail-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.team-detail-body p {
  margin: 0 0 1.1rem;
  line-height: 1.7;
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .form-card, .hero-actions { display: none; }
  body { color: #000; background: #fff; }
}

/* =============================================================
   News / Blog
   ============================================================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.news-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.news-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--light);
  overflow: hidden;
}
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--sans);
  font-size: 2rem;
  letter-spacing: 0.15em;
  color: var(--border-strong);
}
.news-card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.news-card-meta { font-size: 0.82rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; }
.news-card-title { font-size: 1.25rem; margin: 0.5rem 0 0.6rem; line-height: 1.3; }
.news-card-title a { color: var(--navy); }
.news-card-title a:hover { color: var(--accent); }
.news-card-excerpt { color: var(--text); font-size: 0.95rem; margin: 0 0 1.1rem; flex: 1; }

/* Single article */
.article-hero-image {
  margin: 0 0 2rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.article-hero-image img { width: 100%; height: auto; }
.article-body { font-size: 1.08rem; line-height: 1.8; }
.article-body h2 { font-size: 1.6rem; margin: 2.2rem 0 0.8rem; }
.article-body h3 { font-size: 1.3rem; margin: 1.8rem 0 0.6rem; }
.article-body p { margin: 0 0 1.2rem; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body a { color: var(--accent); text-decoration: underline; }
.article-body blockquote {
  margin: 1.6rem 0;
  padding: 0.6rem 1.4rem;
  border-left: 4px solid var(--accent);
  background: var(--light);
  font-style: italic;
  color: var(--gold-dark);
}
/* Keep linked headings clear of the sticky header when jumping from the TOC. */
.article-body h2 { scroll-margin-top: calc(var(--chrome-h) + 12px); }

/* ---------- Article premium reading layout (scoped to .article-prose) ---------- */
/* Mobile-first: single column, TOC pulled to the top (order:-1). */
.post-layout { display:flex; flex-direction:column; }
.post-content { width:100%; min-width:0; }
.post-aside { order:-1; width:100%; margin:0 0 1.9rem; }
.post-layout--solo { display:block; }

/* Desktop: the article fills the 1190px container reading column + sticky TOC sidebar. */
@media (min-width:1024px) {
  .post-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:3.5rem; align-items:start; }
  .post-layout--solo { display:block; }
  .post-content { margin:0; }
  /* The sidebar sticks within its grid column and parks at the end of the
     article (the grid's bottom) it never overlaps the related/footer sections. */
  .post-aside { order:0; margin:0; align-self:start; position:sticky; top:96px; }
}

.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:1.1rem; font-size:.86rem; letter-spacing:.02em; color:#fff; }
.post-meta .dot { opacity:.5; }
.post-meta a { color:var(--gold-light); text-decoration:none; border-bottom:1px solid rgba(163,172,170,.45); }
.post-meta a:hover { color:#fff; border-bottom-color:#fff; }
.post-author { font-weight:600; color:#fff; }
.post-meta .post-updated { font-weight:600; color:var(--gold-light); }

/* Hide the floating reCAPTCHA v3 badge. */
.grecaptcha-badge { display:none !important; }
.post-lead-image { margin:0 0 2.6rem; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.post-lead-image img { width:100%; height:auto; display:block; }

.article-prose { font-size:1.04rem; line-height:1.78; color:#3f5c57; }
.article-prose > p:first-of-type { font-size:1.16rem; line-height:1.7; color:var(--navy-dark); margin-bottom:1.5rem; }
.article-prose p { margin:0 0 1.2rem; }
.article-prose h2 { font-size:1.6rem; line-height:1.3; letter-spacing:-.01em; margin:2.5rem 0 .9rem; scroll-margin-top: calc(var(--chrome-h) + 12px); }
.article-prose h3 { font-size:1.2rem; margin:1.9rem 0 .6rem; scroll-margin-top: calc(var(--chrome-h) + 12px); }
.article-prose h4 { font-size:1.02rem; margin:1.5rem 0 .5rem; color:var(--navy); }
.article-prose h2 + h3 { margin-top:1rem; }
.article-prose > :first-child { margin-top:0; }
.article-prose ul, .article-prose ol { margin:0 0 1.5rem; padding-left:1.45rem; }
.article-prose li { margin-bottom:.6rem; padding-left:.25rem; }
.article-prose li::marker { color:var(--accent); }
.article-prose a { color:var(--accent-dark); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(58,118,101,.4); transition:text-decoration-color var(--transition); }
.article-prose a:hover { text-decoration-color:var(--accent); }
.article-prose strong { color:var(--navy); font-weight:700; }
.article-prose blockquote { margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:3px solid var(--accent); font-family:var(--sans); font-size:1rem; line-height:1.65; font-style:italic; color:var(--navy); }
.article-prose blockquote p:last-child { margin-bottom:0; }
.article-prose figure { margin:2.4rem 0; }
.article-prose img, .article-prose figure img { width:100%; height:auto; display:block; border-radius:var(--radius); }
.article-prose figcaption { margin-top:.65rem; font-size:.85rem; color:var(--muted); text-align:center; font-style:italic; }
.article-prose hr { margin:2.8rem 0; border:0; border-top:1px solid var(--border); }
.article-prose h2:first-child, .article-prose h3:first-child { margin-top:0; }
/* In-article data tables ("grids"): scroll wrapper added in post.php so wide
   tables never break the column on mobile; header row + zebra rows for legibility. */
.article-table-wrap { margin:2rem 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
/* table-layout:fixed + wrapping = all columns share the width and wrap their
   text, so even a 7-column grid fits the reading column with NO horizontal scroll. */
.article-prose table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:.92rem; line-height:1.5; background:#fff; }
.article-table-wrap > table { margin:0; }
.article-prose th, .article-prose td { padding:.6rem .7rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); border-right:1px solid var(--border); overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.article-prose th:last-child, .article-prose td:last-child { border-right:0; }
.article-prose tr:last-child td { border-bottom:0; }
.article-prose thead th, .article-prose thead td,
.article-prose tbody tr:first-child td { background:var(--light); color:var(--navy); font-weight:700; }
/* Strip any inline background-color / text-color baked into stored cell markup
   (e.g. old editor "blue pill" headers) so cells stay clean and on-brand. */
.article-prose td strong, .article-prose td span, .article-prose th strong, .article-prose th span { background:transparent !important; background-color:transparent !important; color:inherit !important; }
.article-prose tbody tr:nth-child(even) td { background:rgba(63,92,87,.03); }
@media (max-width:560px) { .article-prose th, .article-prose td { padding:.45rem .5rem; font-size:.82rem; } }
/* Editorial TOC numbered list with hairline separators + active-section highlight.
   Non-uppercase. No max-height/scroll: if it's long, it's long (grows with the column). */
.post-aside .toc { background:transparent; border:0; padding:0; margin:0; }
.post-aside .toc-title { font-family:var(--sans); font-size:.72rem; font-weight:700; text-transform:none; letter-spacing:.06em; color:var(--navy); margin:0 0 .9rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
.post-aside .toc-list { list-style:none; margin:0; padding:0; counter-reset:toc; }
.post-aside .toc-list li { margin:0; }
.post-aside .toc-list li + li a { border-top:1px solid var(--border); }
.post-aside .toc-list a { display:flex; gap:.7rem; align-items:baseline; padding:.5rem 0; color:var(--gold-dark); font-size:.9rem; line-height:1.45; text-transform:none; text-decoration:none; transition:color var(--transition); overflow-wrap:anywhere; }
.post-aside .toc-list a::before { counter-increment:toc; content:counter(toc,decimal-leading-zero); flex:0 0 auto; min-width:1.5em; font-size:.72rem; font-weight:700; letter-spacing:.03em; font-variant-numeric:tabular-nums; color:var(--border-strong); transition:color var(--transition); }
.post-aside .toc-list a:hover { color:var(--accent-dark); }
.post-aside .toc-list a:hover::before { color:var(--accent); }
.post-aside .toc-list a.is-current { color:var(--accent-dark); font-weight:600; }
.post-aside .toc-list a.is-current::before { color:var(--accent); }

/* CTA under the TOC on desktop, at the end of the article on mobile. */
.post-cta { background:var(--light); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.post-cta .post-cta-title { font-family:var(--sans); font-size:1.05rem; font-weight:600; color:var(--navy); margin:0 0 .55rem; }
.post-cta p { font-size:.88rem; line-height:1.55; color:var(--muted); margin:0 0 1.1rem; }
.post-cta .btn { width:100%; justify-content:center; }
.post-cta--aside { margin-top:1.8rem; display:none; }
.post-cta--end { margin-top:2.5rem; display:block; }
@media (min-width:1024px) {
  .post-cta--aside { display:block; }
  .post-cta--end { display:none; }
  .post-layout--solo .post-cta--end { display:block; }
}

/* Related programmes: under the consultation CTA in the sidebar on desktop,
   at the end of the article on mobile (mirrors the CTA placement). */
.post-programs { background:var(--light); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.post-programs .post-programs-title { font-family:var(--sans); font-size:1.05rem; font-weight:600; color:var(--navy); margin:0 0 .8rem; }
.post-programs-list { list-style:none; margin:0; padding:0; }
.post-programs-list li { margin:0; }
.post-programs-list li + li a { border-top:1px solid var(--border); }
.post-programs-list a { display:flex; align-items:baseline; gap:.55rem; padding:.55rem 0; color:var(--gold-dark); font-size:.9rem; line-height:1.45; text-decoration:none; transition:color var(--transition); overflow-wrap:anywhere; }
.post-programs-list a::before { content:"\203A"; color:var(--accent); font-weight:700; flex:0 0 auto; }
.post-programs-list a:hover { color:var(--accent-dark); }
.post-programs--aside { margin-top:1.4rem; display:none; }
.post-programs--end { margin-top:1.8rem; display:block; }
@media (min-width:1024px) {
  .post-programs--aside { display:block; }
  .post-programs--end { display:none; }
  .post-layout--solo .post-programs--end { display:block; }
}
.post-author-card { display:flex; gap:1.3rem; align-items:flex-start; margin-top:3rem; padding:1.6rem 1.7rem; background:var(--light); border:1px solid var(--border); border-radius:var(--radius-lg); }
.post-author-photo { flex:0 0 auto; display:block; width:76px; height:76px; border-radius:50%; overflow:hidden; box-shadow:0 2px 8px rgba(63,92,87,.18); }
.post-author-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.post-author-info { min-width:0; }
.post-author-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-dark); font-weight:700; }
.post-author-name { font-family:var(--sans); font-size:1.25rem; color:var(--navy); margin:.2rem 0 .15rem; }
.post-author-name a { color:var(--navy); text-decoration:none; }
.post-author-name a:hover { color:var(--accent); }
.post-author-role { font-size:.9rem; color:var(--muted); margin:0 0 .6rem; }
.post-author-bio { font-size:.92rem; line-height:1.6; color:var(--text); margin:0 0 .7rem; }
.post-author-link { font-size:.85rem; font-weight:700; letter-spacing:.02em; color:var(--accent); text-decoration:none; }
.post-author-link:hover { color:var(--accent-dark); }
@media (max-width:520px) { .post-author-card { flex-direction:column; gap:1rem; } }
.article-foot { display:flex; flex-wrap:wrap; gap:.8rem; padding-top:1.9rem; border-top:1px solid var(--border); }
@media (max-width:560px) { .article-prose h2 { font-size:1.4rem; } .article-prose h3 { font-size:1.12rem; } }

/* ---------- Article table of contents (H2 only, auto-generated) ---------- */
.toc {
  background: var(--light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 0 0 2.4rem;
}
.toc-title {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.toc-list {
  margin: 0;
  padding-left: 1.25rem;
}
.toc-list li { margin: 0.35rem 0; line-height: 1.5; }
.toc-list a {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.toc-list a:hover { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 480px) {
  .toc { padding: 0.95rem 1.1rem 1rem; }
}

/* ---------- Media / press page ---------- */
.media-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.media-grid--list { grid-template-columns:1fr; gap:1rem; }
.media-card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:box-shadow var(--transition), transform var(--transition); }
.media-card:hover { box-shadow:0 8px 24px rgba(45,69,65,.10); transform:translateY(-2px); }
.media-card-logo { display:flex; align-items:center; justify-content:center; min-height:92px; padding:1.1rem 1.4rem; background:var(--light); border-bottom:1px solid var(--border); }
.media-card-logo img { max-height:56px; max-width:78%; object-fit:contain; }
.media-card-body { padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.media-card-meta { font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-dark); font-weight:700; }
.media-card-title { font-family:var(--sans); font-size:1.1rem; line-height:1.32; color:var(--navy); margin:0; }
.media-card-title a { color:var(--navy); text-decoration:none; }
.media-card-title a:hover { color:var(--accent); }
.media-card-excerpt { font-size:.9rem; line-height:1.6; color:var(--muted); margin:0; }
.media-card-link { font-size:.82rem; font-weight:700; color:var(--accent); text-decoration:none; margin-top:.15rem; }
.media-card-link:hover { color:var(--accent-dark); }
/* Publications list variant (no logo) reads as stacked rows */
.media-grid--list .media-card { flex-direction:row; align-items:stretch; }
.media-grid--list .media-card-logo { width:150px; min-height:0; border-bottom:0; border-right:1px solid var(--border); }
.media-grid--list .media-card-body { flex:1; }
/* Featured: wide highlighted card */
.media-card--featured { flex-direction:row; align-items:stretch; border-left:4px solid var(--accent); margin-top:1rem; }
.media-card--featured .media-card-logo { width:260px; min-height:0; border-bottom:0; border-right:1px solid var(--border); }
.media-card--featured .media-card-title { font-size:1.45rem; }
@media (max-width:640px){
  .media-card--featured, .media-grid--list .media-card { flex-direction:column; }
  .media-card--featured .media-card-logo, .media-grid--list .media-card-logo { width:100%; border-right:0; border-bottom:1px solid var(--border); }
}

/* ---------- Status badges ---------- */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge--ok    { background: #e6f4ea; color: #1f6f3e; }
.badge--muted { background: var(--light); color: var(--muted); }

/* ---------- Imported page bodies (verbatim content in our template) ---------- */
.page-body { font-size: 1.06rem; line-height: 1.8; }
.page-body h2 { font-size: 1.6rem; margin: 2.4rem 0 0.8rem; scroll-margin-top: calc(var(--chrome-h) + 12px); }
.page-body h3 { font-size: 1.25rem; margin: 1.8rem 0 0.6rem; }
.page-body p { margin: 0 0 1.15rem; }
.page-body ul, .page-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.page-body li { margin-bottom: 0.45rem; }
.page-body a { color: var(--accent); text-decoration: underline; }
figure.page-image { margin: 1.8rem 0; border-radius: var(--radius); overflow: hidden; }
figure.page-image img { width: 100%; height: auto; display: block; }

/* FAQ accordions inside imported bodies (bare <details>, same look as .faq) */
.article-body details, .page-body details {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; margin: 0 0 0.75rem; padding: 0;
}
.article-body details[open], .page-body details[open] { box-shadow: var(--shadow-sm); }
.article-body summary, .page-body summary {
  cursor: pointer; padding: 1rem 2.5rem 1rem 1.2rem; position: relative;
  font-weight: 600; color: var(--navy); list-style: none; font-family: var(--sans);
}
.article-body summary::-webkit-details-marker, .page-body summary::-webkit-details-marker { display: none; }
.article-body summary::after, .page-body summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; color: var(--accent);
}
.article-body details[open] summary::after, .page-body details[open] summary::after { content: "\2212"; }
.article-body details > :not(summary), .page-body details > :not(summary) { padding: 0 1.2rem 1rem; margin: 0; }

/* Green FAQ block (programme pages): inverted, readable accordions on the navy
   (sage-green) background applied by .section--navy. */
.prog-faq .prog-section-title { color: #fff; }
.prog-faq .article-body details { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); }
.prog-faq .article-body details[open] { background: rgba(255,255,255,0.11); box-shadow: none; }
.prog-faq .article-body summary { color: #fff; }
.prog-faq .article-body summary::after { color: #fff; }
.prog-faq .article-body details > :not(summary) { color: #e8edeb; }
.prog-faq .article-body details a { color: #fff; text-decoration: underline; }

/* ---------- Nearest-office block (geolocated) ---------- */
.hlg-office { display:block; font-size:0.85rem; line-height:1.55; margin-top:0.85rem; }
.hlg-office-eyebrow { display:block; text-transform:uppercase; letter-spacing:0.08em; font-size:0.7rem; opacity:0.9; margin-bottom:0.35rem; }
.hlg-office-name { display:flex; align-items:center; gap:0.45rem; font-weight:600; margin-bottom:0.3rem; }
.hlg-office-flag { width:18px; height:auto; border-radius:2px; flex:none; }
.hlg-office-addr { display:block; opacity:0.85; margin-bottom:0.3rem; }
/* Block links with enough height + spacing to pass the 24px touch-target rule. */
.hlg-office-tel, .hlg-office-mail { display:block; padding:0.35rem 0; min-height:24px; }
.site-footer .hlg-office a { color:#fff; }
.hlg-office--card { background:var(--light); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1.1rem 1.3rem; }
.hlg-office--card .hlg-office-eyebrow { color:var(--accent); margin-top:0; }
.hlg-office--card .hlg-office-name { font-family:var(--sans); font-size:1.15rem; color:var(--navy); }
.hlg-office--card .hlg-office-addr { color:var(--muted); }
.hlg-office--card .hlg-office-tel { color:var(--accent); font-weight:600; }

/* ---------- Programme facts box + hub grid (single source of truth) ---------- */
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:0 0 2rem; }
.facts .fact { background:#fff; padding:1rem 1.2rem; }
.fact-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.3rem; }
.fact-value { font-family:var(--sans); font-size:1.15rem; color:var(--navy); font-weight:600; }
.prog-hub { margin-top:2.5rem; }
.prog-hub-group { margin-bottom:3rem; }
.prog-hub-group > h3 { font-size:1.15rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:1.3rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }

/* Deux niveaux : la RÉGION coiffe des blocs PAYS.
   La région garde l'ancien look de titre de groupe ; le pays est un sous-titre
   plus discret, avec son drapeau, cliquable vers la page du pays. */
.prog-hub-region { margin-bottom:3.25rem; }
.prog-hub-region-title {
  font-size:1.15rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:1.6rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--border);
}
.prog-hub-region .prog-hub-group { margin-bottom:2.25rem; }
.prog-hub-region .prog-hub-group:last-child { margin-bottom:0; }
.prog-hub-country {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-size:1.25rem; font-weight:600;
  color:var(--navy); margin:0 0 1rem; text-transform:none; letter-spacing:0;
}
.prog-hub-country a { color:inherit; text-decoration:none; }
.prog-hub-country a:hover { color:var(--accent); }
.prog-hub-country .prog-hub-flag { display:inline-flex; flex:0 0 auto; }
.prog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.5rem; }

/* Sophisticated programme card */
.prog-card {
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.5rem 1.5rem 1.25rem; text-decoration:none;
  box-shadow:0 1px 2px rgba(63,92,87,0.04);
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.prog-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.prog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-strong); }
.prog-card:hover::before { transform:scaleX(1); }

.prog-card-head { display:flex; align-items:center; gap:.7rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--border); }
.prog-card-flag { flex:none; line-height:0; margin:0; }
.prog-card-flag .flag-icon { width:34px; height:auto; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.18); display:block; }
.prog-card-head h3 { font-size:1.08rem; line-height:1.25; color:var(--navy); margin:0; }

.prog-card-price { margin-bottom:1rem; }
.prog-card-price span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.15rem; }
.prog-card-price strong { font-family:var(--sans); font-size:1.45rem; font-weight:700; color:var(--accent-dark); line-height:1.1; }
.prog-card-metaline { font-size:.78rem; color:var(--muted); margin:-.6rem 0 1rem; }
.prog-card-desc { font-size:.86rem; line-height:1.5; color:var(--muted); margin:-.55rem 0 1.1rem; }

.prog-card-benefits { list-style:none; margin:0 0 1.25rem; padding:0; }
.prog-card-benefits li { position:relative; padding-left:1.5rem; font-size:.86rem; line-height:1.45; color:var(--text); margin-bottom:.55rem; }
.prog-card-benefits li:last-child { margin-bottom:0; }
.prog-card-benefits li::before {
  content:""; position:absolute; left:0; top:.32em; width:.85rem; height:.85rem;
  border-radius:50%; background:var(--gl, #eef3f1); background:rgba(58,118,101,.12);
}
.prog-card-benefits li::after { content:""; position:absolute; left:.28rem; top:.5em; width:.28rem; height:.5rem; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg); }

.prog-card-link { margin-top:auto; font-size:.8rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.4rem; }
.prog-card-link::after { content:"→"; transition:transform .25s ease; }
.prog-card:hover .prog-card-link::after { transform:translateX(4px); }

/* ---------- "As seen in" media logos (centered, static) ---------- */
.media-logos { padding:2.4rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; }
.media-logos-eyebrow { text-align:center; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold-dark); margin:0 0 1.4rem; }
.logo-group { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.6rem 3rem; max-width:1190px; margin:0 auto; padding:0 1.25rem; }
.logo-group a { display:flex; align-items:center; }
.logo-group img { height:30px; width:auto; max-width:140px; object-fit:contain; filter:grayscale(100%); opacity:.55; transition:filter .3s, opacity .3s; }
.logo-group a:hover img { filter:grayscale(0); opacity:1; }

/* Forms & centered CTAs stay readable within the 1190px container */
.form-card { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Homepage services richer cards + grouped headings */
.section-intro { color: var(--muted); max-width: 62ch; margin: 0.5rem 0 0; font-size: 1.02rem; }
.services-group-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-dark); font-weight: 700; margin: 2.6rem 0 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.card h3 { font-size: 1.15rem; margin: 0 0 .5rem; color: var(--navy); }
.card p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0 0 .9rem; }
.card { display: flex; flex-direction: column; }
.card .card-link { margin-top: auto; }

/* Programme detail sectioned body (DACH-style alternating sections) */
/* Programme content spans the full 1190px container, left-justified. */
.prog-section-title { font-size: 1.7rem; margin: 0 0 1.3rem; max-width: none; }
.prog-body { max-width: none; margin: 0; }
.prog-body > :first-child { margin-top: 0; }

/* Section + "Request the factsheet" two-column layout (form pinned right on
   desktop, stacks below on mobile). Inside the grid the body fills its column. */
.prog-split .prog-body { max-width: none; margin: 0; }
@media (min-width: 900px) {
  .prog-split { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 2.75rem; align-items: start; }
}
.prog-factsheet { margin-top: 2rem; }
@media (min-width: 900px) { .prog-factsheet { margin-top: 0; } }
.prog-factsheet-inner { position: sticky; top: 96px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.55rem; }
.prog-factsheet-title { font-family: var(--sans); font-size: 1.2rem; color: var(--navy); margin: 0 0 .4rem; }
.prog-factsheet-note { font-size: .86rem; line-height: 1.5; color: var(--muted); margin: 0 0 1.1rem; }
.prog-factsheet .form { gap: .85rem; }
.prog-factsheet .btn { width: 100%; justify-content: center; }

/* White fields + green borders on both program-page forms (factsheet + bottom
   inquiry). Scoped so other site forms are unaffected. */
.prog-factsheet .form input,
.prog-factsheet .form select,
#inquiry .form input,
#inquiry .form select,
#inquiry .form textarea { border-color: var(--accent); background: #fff; }


/* About team grid by group */
.team-group-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-dark); font-weight:700; margin:2.6rem 0 1.2rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:1.5rem; }
/* Associates / HQ / Global Team: fixed 5 columns (6 made images too small) */
.team-grid--5 { grid-template-columns:repeat(5,1fr); }
/* Global / Regional Partners: few people → larger cards, capped at 4 across */
.team-grid--lg { grid-template-columns:repeat(3,1fr); gap:1.75rem; max-width:780px; }
@media (max-width:900px){ .team-grid--5 { grid-template-columns:repeat(3,1fr); } .team-grid--lg { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid--5, .team-grid--lg { grid-template-columns:repeat(2,1fr); } }
.team-card { display:block; text-decoration:none; }
.team-card-img { display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center top; border-radius:var(--radius); background:var(--light); margin-bottom:.7rem; }
.team-card-name { display:block; font-weight:600; color:var(--navy); font-size:.95rem; line-height:1.3; padding:0px 10px 10px 10px; }
.team-card-role { display:block; color:var(--muted); font-size:.82rem; margin-top:.15rem; padding:0px 10px 10px 10px; }
.team-card:hover .team-card-name { color:var(--accent); }

/* Why HLG reason cards */
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2.2rem; }
.why-card { background:#fff; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); padding:1.8rem; position:relative; }
.why-card-num { font-family:var(--sans); font-size:1.1rem; color:var(--gold-light); font-weight:700; }
.why-card h3 { font-size:1.25rem; color:var(--navy); margin:.4rem 0 .6rem; }
.why-card-text { color:var(--muted); font-size:.95rem; line-height:1.7; }
.why-card-text p { margin:0; }
@media (max-width:680px){ .why-grid { grid-template-columns:1fr; } }

/* Image gallery (award badges, multi-image rows) */
.page-gallery { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:center; margin:1.6rem 0; }
.page-gallery figure.page-image { margin:0; max-width:none; }
.page-gallery img { max-height:160px; width:auto; max-width:230px; object-fit:contain; border-radius:4px; }
/* Lone content images shouldn't blow out full-width either */
.prog-body > figure.page-image, .article-body > figure.page-image { max-width:560px; margin-left:auto; margin-right:auto; }

/* Keep the green profile CTA button text white on hover (global a:hover was
   turning it gold-dark). Navy-section .btn--primary inverts to a white
   background on hover, so it is deliberately NOT forced white here. */
.hlgp-cta-btn:hover, .hlgp-cta-btn:focus { color:#fff !important; }

/* Why HLG bespoke layout */
.why-row { display:grid; grid-template-columns:300px 1fr; gap:3rem; align-items:start; }
.why-row-aside { position:sticky; top:90px; }
.why-num { font-family:var(--sans); font-size:2.6rem; font-weight:700; color:var(--gold-light); line-height:1; display:block; margin-bottom:.5rem; }
.why-row-aside h2 { font-size:1.7rem; margin:0; }
.why-row-body { font-size:1.02rem; }
.why-row-body > :first-child { margin-top:0; }
.why-row-body ul { padding-left:1.2rem; }
.why-row-body ul ul { padding-left:1.1rem; }
.why-quote { max-width:880px; margin:0 auto; text-align:center; }
.why-quote blockquote { font-family:var(--sans); font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.45; color:#fff; margin:0 0 1.4rem; font-style:italic; }
.why-quote figcaption { color:var(--gold-light); }
.why-quote figcaption strong { display:block; font-size:1.05rem; color:#fff; }
.why-quote figcaption span { font-size:.9rem; opacity:.85; }
@media (max-width:820px){ .why-row { grid-template-columns:1fr; gap:1rem; } .why-row-aside { position:static; } }

/* About team grid column counts per group (override) */
.team-grid--5 { grid-template-columns:repeat(5,1fr); }
.team-grid--lg { grid-template-columns:repeat(3,1fr); gap:1.75rem; max-width:780px; }
@media (max-width:900px){ .team-grid--5 { grid-template-columns:repeat(3,1fr); } .team-grid--lg { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid--5, .team-grid--lg { grid-template-columns:repeat(2,1fr); } }

/* ---------- Header top bar (geolocated nearest office) ---------- */
/* Always-visible sticky bar above the nav; the nav (.site-header) auto-hides on
   scroll-down and sticks just below this bar, but this bar never moves. */
/* Fixed (not sticky) so it's ALWAYS visible sticky breaks under the body's
   overflow-x:hidden. Body gets 34px top padding so nothing hides under it. */
.header-topbar { position:fixed; top:0; left:0; right:0; z-index:101; background:var(--navy-dark); color:#fff; font-size:.8rem; height:var(--topbar-h); border-bottom:1px solid rgba(255,255,255,0.08); }
/* Both the top bar and the header are fixed, so the page has to start below the
   pair of them: exactly --chrome-h, never an estimate. */
body { padding-top: var(--chrome-h); }
.header-topbar-inner { max-width:var(--container); margin:0 auto; height:100%; padding:0 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
/* Positioning line on the left of the top bar. Truncates rather than wraps:
   the bar is a fixed 34px and a second line would push the header down. */
.topbar-tagline { color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hlg-office--bar { display:flex; align-items:center; gap:1.1rem; margin:0; line-height:1.2; }
.hlg-office--bar .hlg-office-flag { width:18px; border-radius:2px; }
.hlg-office-loc { display:inline-flex; align-items:center; gap:.45rem; color:#fff; }
.hlg-office-call { display:inline-flex; align-items:center; gap:.4rem; color:#fff; font-weight:600; }
.hlg-office-call:hover { color:var(--gold-light); }
.hlg-office-call-label { background:var(--accent); color:#fff; padding:.12rem .5rem; border-radius:3px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:600px) {
  .header-topbar-inner { padding:0 1rem; justify-content:center; }
  .topbar-tagline { display:none; }
  .hlg-office--bar { gap:.5rem; width:100%; justify-content:center; }
  .hlg-office-loc-text { display:none; }            /* hide long label on mobile */
  .hlg-office-call { font-size:.82rem; }
}


/* ---------- Citizenship by Ancestry hub ---------- */
.cba-test-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:2rem; }
@media (max-width:900px){ .cba-test-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .cba-test-grid { grid-template-columns:repeat(2,1fr); } }
.cba-test-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1.5rem 1rem 1.2rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cba-test-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-strong); }
.cba-test-flag { width:80px; height:auto; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.cba-test-name { font-family:var(--sans); font-size:1.02rem; color:var(--navy); font-weight:600; }
.cba-test-cta { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:700; margin-top:auto; }
.cba-test-card--other { justify-content:center; border-style:dashed; }
.cba-test-card--other .cba-test-name { color:var(--muted); }

/* Ancestry content blocks: when a custom text colour is set (data-color + inline
   color on the wrapper), force every element inside to inherit it so the whole
   block follows the chosen colour, not the default heading/link colours. */
.ancestry-block[data-color] h1, .ancestry-block[data-color] h2, .ancestry-block[data-color] h3,
.ancestry-block[data-color] h4, .ancestry-block[data-color] h5, .ancestry-block[data-color] h6,
.ancestry-block[data-color] p,  .ancestry-block[data-color] li, .ancestry-block[data-color] a,
.ancestry-block[data-color] strong, .ancestry-block[data-color] em, .ancestry-block[data-color] blockquote,
.ancestry-block[data-color] span, .ancestry-block[data-color] td, .ancestry-block[data-color] th { color: inherit; }

.cba-two-col { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
@media (max-width:760px){ .cba-two-col { grid-template-columns:1fr; gap:2rem; } }

.cba-countries { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; margin-top:2rem; }
.cba-country-col h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-dark); padding-bottom:.5rem; margin-bottom:.8rem; border-bottom:1px solid var(--border); }
.cba-country-col ul { list-style:none; margin:0; padding:0; columns:1; }
.cba-country-col li { font-size:.92rem; padding:.18rem 0; color:var(--text); }
.cba-country-col li a { color:var(--accent); font-weight:600; }
.cba-country-test { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; background:rgba(58,118,101,.12); color:var(--accent-dark); padding:.05rem .35rem; border-radius:3px; margin-left:.2rem; }

/* ---------- Contact page ---------- */
.contact-layout { display:grid; grid-template-columns:1fr 320px; gap:3.5rem; align-items:start; }
@media (max-width:860px){ .contact-layout { grid-template-columns:1fr; gap:2.5rem; } }
/* Borderless, full-width form (no box/shadow/radius) */
.contact-form { width:100%; }
.contact-form > h2 { font-size:1.7rem; margin-bottom:1.75rem; }
.contact-form .form { gap:1.5rem; }
.contact-form .btn { min-width:240px; }
/* grouped form subheadings (e.g. "About you" / "Your article") */
.form-subhead { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-dark); font-weight:700; margin:1.5rem 0 -.25rem; padding-bottom:.6rem; border-bottom:1px solid var(--line, rgba(0,0,0,.1)); }
.form-subhead:first-of-type { margin-top:0; }
/* inline "(optional)" hint inside a label */
.form .opt, label .opt { color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; }
.contact-aside { display:flex; flex-direction:column; gap:1.5rem; }
.office-map-card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 4px 16px rgba(45,69,65,.06); }
.office-map { line-height:0; margin-top:10px; }
.office-map iframe { display:block; width:100%; height:300px; border:0; }
.office-map-info { display:block; padding:1.2rem 1.4rem; }
.office-map-info .hlg-office-eyebrow { color:var(--accent); margin:0 0 .35rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.office-map-info .hlg-office-name { display:block; font-family:var(--sans); font-size:1.2rem; color:var(--navy); }
.office-map-info .hlg-office-addr { display:block; margin-top:.35rem; color:var(--muted); font-size:.92rem; line-height:1.5; }
.office-map-info .hlg-office-tel { display:inline-block; margin-top:.5rem; color:var(--accent); font-weight:600; }
.office-map-info .hlg-office-mail { display:block; margin-top:.25rem; color:var(--muted); font-size:.9rem; }
.office-map-info .hlg-office-map-link { display:inline-block; margin-top:.7rem; color:var(--accent); font-weight:700; font-size:.85rem; text-decoration:none; }
.office-map-info .hlg-office-map-link:hover { color:var(--accent-dark); text-decoration:underline; }
.contact-info-card { background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:1.6rem 1.5rem; }
.contact-info-card h3 { color:#fff; font-size:1.15rem; margin:0 0 1rem; }
.contact-info-list { list-style:none; margin:0; padding:0; }
.contact-info-list li { padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.92rem; }
.contact-info-list li:last-child { border-bottom:none; }
.contact-info-label { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-light); margin-bottom:.15rem; }
.contact-info-list a { color:#fff; font-weight:600; }
.contact-info-list a:hover { color:var(--gold-light); }

.offices-region { margin-top:2.5rem; }
.offices-region-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-dark); padding-bottom:.6rem; margin-bottom:1.2rem; border-bottom:1px solid var(--border); }
.offices-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; }
.office-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; transition:box-shadow .2s ease, transform .2s ease; }
.office-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.office-card-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.office-card-flag { width:24px; height:auto; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.18); flex:none; }
.office-card-head strong { font-family:var(--sans); font-size:1.05rem; color:var(--navy); }
.office-card-addr { font-size:.86rem; color:var(--muted); line-height:1.5; margin:0 0 .8rem; }
.office-card-contact { margin:0; display:flex; flex-direction:column; gap:.2rem; }
.office-card-contact a { font-size:.86rem; color:var(--accent); font-weight:600; word-break:break-word; }

/* Wider container only used where explicitly requested (e.g. offices directory) */
.container--wide { max-width: 1390px; }

/* Send button icon spacing + subtle slide on hover */
.btn--send { display:inline-flex; align-items:center; gap:.6rem; }
.btn--send svg { transition:transform .2s ease; }
.btn--send:hover svg { transform:translateX(3px); }

/* Accreditations distinct tinted band so it stands out */
.section--accred { background:linear-gradient(180deg, #eef3f1 0%, #e7eeec 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section--accred .cred-item a { color:var(--navy-dark); }
.section--accred .cred-item a:hover { color:var(--accent-dark); }

/* Newsletter band */
.newsletter-section { background:var(--navy); }
.newsletter { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:820px){ .newsletter { grid-template-columns:1fr; gap:1.75rem; } }
.newsletter-text .eyebrow { color:var(--gold-light); }
.newsletter-text h2 { color:#fff; margin:0 0 .6rem; }
.newsletter-text p { color:#fff; margin:0; max-width:46ch; }
.newsletter-form { }
.newsletter-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media (max-width:480px){ .newsletter-fields { grid-template-columns:1fr; } }
.newsletter-form label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-light); margin-bottom:.4rem; }
.newsletter-form input { width:100%; padding:.85rem 1rem; font:inherit; font-size:.95rem; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); transition:border-color .2s, background .2s; }
.newsletter-form input::placeholder { color:rgba(255,255,255,.5); }
.newsletter-form input:focus { outline:none; background:rgba(255,255,255,.16); border-color:var(--gold-light); }
.newsletter-note { margin:.9rem 0 0; font-size:.88rem; color:#fff; }
.newsletter-note.is-err { color:#ffd2d2; }
.newsletter-interest { margin-bottom:1rem; }
.newsletter-form select { width:100%; padding:.85rem 1rem; font:inherit; font-size:.95rem; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); transition:border-color .2s, background .2s; }
.newsletter-form select:focus { outline:none; background:rgba(255,255,255,.16); border-color:var(--gold-light); }
.newsletter-form select option { color:#1a2a26; background:#fff; }
.newsletter-optional { font-weight:400; text-transform:none; letter-spacing:0; color:rgba(255,255,255,.55); }
.newsletter-consent { margin:.8rem 0 0; font-size:.8rem; color:rgba(255,255,255,.6); }
.newsletter-consent a { color:#fff; text-decoration:underline; }
/* Light variant (white background, dark readable text) for content pages. */
.newsletter-section--light { background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.newsletter-section--light .newsletter-text .eyebrow { color:var(--accent); }
.newsletter-section--light .newsletter-text h2 { color:var(--navy); }
.newsletter-section--light .newsletter-text p { color:var(--muted); }
.newsletter-section--light .newsletter-form label { color:var(--navy); }
.newsletter-section--light .newsletter-form input,
.newsletter-section--light .newsletter-form select { background:#fff; color:var(--text); border:1px solid var(--border-strong); }
.newsletter-section--light .newsletter-form input::placeholder { color:var(--muted); }
.newsletter-section--light .newsletter-form input:focus,
.newsletter-section--light .newsletter-form select:focus { background:#fff; border-color:var(--accent); }
.newsletter-section--light .newsletter-form select option { color:var(--text); background:#fff; }
.newsletter-section--light .newsletter-optional { color:var(--muted); }
.newsletter-section--light .newsletter-consent { color:var(--muted); }
.newsletter-section--light .newsletter-consent a { color:var(--navy); }
.newsletter-section--light .newsletter-note { color:var(--text); }

/* ---------- Careers ---------- */
.jobs-list { display:flex; flex-direction:column; gap:1rem; }
.job-card { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; background:#fff; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-lg); padding:1.5rem 1.75rem; transition:box-shadow .2s ease, transform .2s ease; }
.job-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.job-card-main { min-width:0; }
.job-card-main h3 { font-size:1.2rem; color:var(--navy); margin:0 0 .5rem; }
.job-card-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem; }
.job-tag { font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); background:rgba(58,118,101,.1); padding:.2rem .6rem; border-radius:3px; }
.job-tag--soft { color:var(--muted); background:var(--light); }
.job-card-summary { font-size:.92rem; color:var(--muted); line-height:1.6; margin:0; max-width:62ch; }
.job-card-action { flex:none; }
@media (max-width:640px){ .job-card { flex-direction:column; align-items:flex-start; gap:1rem; } .job-card-action { width:100%; } .job-card-action .btn { width:100%; } }
/* careers accordion (full job descriptions) */
.jobs-accordion { display:flex; flex-direction:column; gap:.9rem; }
.job-item { background:#fff; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-lg); overflow:hidden; }
.job-item-head { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.6rem; cursor:pointer; list-style:none; }
.job-item-head::-webkit-details-marker { display:none; }
.job-item-title { font-family:var(--sans); font-size:1.18rem; color:var(--navy); font-weight:700; flex:1; min-width:0; }
.job-item-chevron { flex:none; width:11px; height:11px; border-right:2px solid var(--accent-dark); border-bottom:2px solid var(--accent-dark); transform:rotate(45deg); transition:transform .2s ease; }
.job-item[open] .job-item-chevron { transform:rotate(-135deg); }
.job-item-body { padding:0 1.6rem 1.6rem; }
.job-item-body .article-body { font-size:.95rem; }
.job-item-body .article-body h4 { font-size:1.05rem; color:var(--navy); margin:.4rem 0 .8rem; }
.job-item-body .article-body p { margin:0 0 .9rem; }
.job-item-body .article-body ul { margin:0 0 1rem; padding-left:1.2rem; }
.job-item-body .article-body li { margin-bottom:.4rem; line-height:1.6; }
.job-item-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.job-item-or { font-size:.85rem; color:var(--muted); }
@media (max-width:640px){ .job-item-head { padding:1.1rem 1.2rem; } .job-item-body { padding:0 1.2rem 1.3rem; } .job-item-actions .btn { width:100%; } }
/* File input */
.form input[type="file"] { width:100%; padding:.7rem 1rem; font:inherit; font-size:.9rem; background:#f7f9f8; border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); cursor:pointer; }
.form input[type="file"]::file-selector-button { font:inherit; font-size:.82rem; font-weight:600; margin-right:.8rem; padding:.45rem .9rem; border:0; border-radius:var(--radius-sm); background:var(--navy); color:#fff; cursor:pointer; }

/* Admin dashboard styles now live in css/admin.css (loaded only by /admin/). */

/* ---------- Case studies ---------- */
/* Hub + related cards: a dedicated case-study card (flag + country tag + summary). */
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; }
.cs-card {
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.5rem; text-decoration:none;
  box-shadow:0 1px 2px rgba(63,92,87,0.04);
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.cs-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.cs-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-strong); }
.cs-card:hover::before { transform:scaleX(1); }

.cs-card-top { display:flex; align-items:center; gap:.65rem; margin-bottom:1.1rem; }
.cs-card-flag { flex:none; line-height:0; }
.cs-card-flag .flag-icon { width:30px; height:auto; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.18); display:block; }
.cs-card-place { display:flex; flex-direction:column; min-width:0; font-weight:700; color:var(--navy); font-size:.95rem; line-height:1.2; }
.cs-card-prog { font-weight:500; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; margin-top:.2rem; }
.cs-card-badge { margin-left:auto; align-self:flex-start; background:var(--gold-light); color:var(--navy-dark); font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:.2rem .5rem; border-radius:999px; }

.cs-card-title { font-family:var(--sans); font-size:1.1rem; line-height:1.3; color:var(--navy); margin:0 0 .6rem; }
.cs-card-desc { font-size:.875rem; line-height:1.55; color:var(--muted); margin:0 0 1.1rem; }
.cs-card-meta { margin-top:auto; }
.cs-card-chip { display:inline-block; }
.cs-card-chip em { display:block; font-style:normal; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.1rem; }
.cs-card-chip strong { font-family:var(--sans); font-size:1.15rem; font-weight:700; color:var(--accent-dark); }
.cs-card-link { margin-top:1.1rem; font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.4rem; }
.cs-card-link::after { content:"→"; transition:transform .25s ease; }
.cs-card:hover .cs-card-link::after { transform:translateX(4px); }

.cs-hero-tag { display:inline-flex !important; align-items:center; gap:.5rem; }
.cs-hero-tag .flag-icon { width:24px; height:auto; border-radius:2px; }
.cs-facts { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.cs-fact { background:#fff; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--radius); padding:1.1rem 1.2rem; }
.cs-fact .l { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.cs-fact .v { display:block; font-family:var(--sans); font-size:1.1rem; color:var(--navy); font-weight:600; margin-top:.3rem; line-height:1.3; }
.cs-resolved { margin-top:1.75rem; }
.cs-issues { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.55rem; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.cs-issues li { position:relative; padding-left:1.7rem; color:var(--text); }
.cs-issues li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }
.cs-body { font-size:1.05rem; }

/* Dedicated local office pages (/contact/<key>/) */
.office-layout { display:grid; grid-template-columns:1fr 340px; gap:3.5rem; align-items:start; }
@media (max-width:900px){ .office-layout { grid-template-columns:1fr; gap:2.5rem; } }
.office-main { min-width:0; }
.office-aside { position:sticky; top:96px; }
@media (max-width:900px){ .office-aside { position:static; } }
.office-prog-links { display:flex; flex-wrap:wrap; gap:.7rem; margin:.5rem 0 1rem; }
.office-enquiry { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); scroll-margin-top: calc(var(--chrome-h) + 12px); }
.office-enquiry > h2 { font-size:1.6rem; margin-bottom:.4rem; }
.office-card--link { display:flex; flex-direction:column; text-decoration:none; }
.office-card--link .prog-card-link { margin-top:auto; padding-top:.6rem; color:var(--accent); font-weight:700; font-size:.88rem; }
.office-card-link { display:inline-block; margin-top:.8rem; color:var(--accent); font-weight:700; font-size:.85rem; text-decoration:none; }
.office-card-link:hover { color:var(--accent-dark); text-decoration:underline; }

/* Newsletter download list (program pages, rendered under the FAQ) */
.newsletter-list { list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.7rem; max-width:760px; }
.newsletter-item { margin:0; }
.newsletter-link { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:#fff; border:1px solid var(--border-strong,#d8e0dd); border-radius:12px; text-decoration:none; color:var(--navy,#2d4541); transition:border-color .15s, box-shadow .15s, transform .15s; }
.newsletter-link:hover { border-color:var(--accent,#3f5c57); box-shadow:0 6px 18px rgba(45,69,65,.10); transform:translateY(-1px); }
.newsletter-ico { flex:0 0 auto; font-weight:800; font-size:.7rem; letter-spacing:.04em; color:#fff; background:#c0392b; padding:.45rem .55rem; border-radius:6px; }
.newsletter-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.newsletter-title { font-weight:600; color:var(--navy-dark,#243a36); overflow-wrap:anywhere; }
.newsletter-sub { font-size:.85rem; color:var(--muted); margin-top:.15rem; }
.newsletter-dl { flex:0 0 auto; font-weight:600; font-size:.9rem; color:var(--accent,#3f5c57); white-space:nowrap; }
@media(max-width:600px){ .newsletter-dl{ display:none; } }

/* Accessible hidden text (table captions etc.) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* CBI/RBI comparison table (server-rendered, no JS; cards on mobile) */
.cmp-note { color:var(--muted); max-width:70ch; margin:.2rem 0 1.2rem; font-size:.95rem; }
.cmp-table-wrap { margin:0 0 1.5rem; }
.cmp-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.cmp-table thead th { text-align:left; padding:.7rem .9rem; background:var(--light); color:var(--muted);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; border-bottom:1px solid var(--border-strong,#d8e0dd); }
.cmp-table th[scope=row], .cmp-table td { text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--border,#e3e8e6); vertical-align:middle; }
.cmp-table th[scope=row] { font-weight:600; }
.cmp-table th[scope=row] a { color:var(--navy-dark,#243a36); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.cmp-table th[scope=row] a:hover { color:var(--accent); text-decoration:underline; }
.cmp-table th[scope=row] .flag-icon { width:1.5em; height:auto; flex:0 0 auto; border-radius:2px; }
.cmp-table td[data-label="Minimum investment"] { font-weight:600; color:var(--navy-dark,#243a36); white-space:nowrap; }
.cmp-table tbody tr:hover { background:var(--light); }
@media(max-width:640px){
  .cmp-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display:block; width:100%; }
  .cmp-table tr { border:1px solid var(--border,#e3e8e6); border-radius:10px; padding:.7rem .9rem 1rem; margin-bottom:.8rem; }
  .cmp-table th[scope=row] { font-size:1.05rem; padding:0 0 .5rem; margin-bottom:.5rem; border-bottom:1px solid var(--border,#e3e8e6); }
  .cmp-table td { border:none; padding:.3rem 0; display:flex; justify-content:space-between; gap:1.2rem; }
  .cmp-table td::before { content:attr(data-label); font-weight:600; color:var(--muted); font-size:.82rem; }
  .cmp-table td[data-label="Minimum investment"] { white-space:normal; text-align:right; }
}

/* E-E-A-T: named reviewer under substantive pages. */
.content-reviewer{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--border);font-size:.9rem;color:var(--muted);}
.content-reviewer a{color:inherit;text-decoration:underline;}
.section--navy .content-reviewer,.prog-faq .content-reviewer{color:#fff;border-top-color:rgba(255,255,255,.18);}
.section--navy .content-reviewer a,.prog-faq .content-reviewer a{color:#fff;}

/* ---------- Titles: balanced line breaks ----------
   Long programme titles used to leave a single short word stranded on the last
   line ("Titre de séjour au Costa" / "Rica"). text-wrap:balance distributes the
   words evenly instead, so the same title reads "Titre de séjour" / "au Costa
   Rica". Applies to every heading, so it holds for all 68 programmes and any
   added later, rather than being patched title by title. Browsers without it
   simply wrap as before. */
h1, h2, h3,
.hero h1,
.prog-card h3,
.prog-hub-group h3,
.prog-section-title,
.card h3,
.cba-test-name,
.faq-item h3,
.footer-col h3 {
  text-wrap: balance;
}
/* Proper nouns that must never be split across lines whatever the balance. */
.prog-card h3, .prog-hub-group h3, .cba-test-name { hyphens: manual; }