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

:root {
  --navy:         #0F4160;
  --navy-light:   #1B5A82;
  --navy-dark:    #061835;
  --gold:         #6B7F90;
  --gold-light:   #A9BDCB;
  --gold-dark:    #4A5E70;
  --accent:       #35A692;
  --accent-light: #4DB8A8;
  --accent-dark:  #1F7F6F;
  --light:        #F2F6F9;
  --paper:        #ffffff;
  --text:         #1A2A38;
  --muted:        #56697A;
  --border:       #DCE5EC;
  --border-strong:#BFCDD8;
  --shadow-sm:    0 2px 6px rgba(6,24,53,0.08);
  --shadow:       0 10px 30px -12px rgba(6,24,53,0.22);
  --shadow-lg:    0 30px 60px -20px rgba(6,24,53,0.35);
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    14px;
  --container:    1190px;
  --serif:        "Inter", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sans:         "Inter", "Noto Sans Thai", -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: 80px;
  overflow-x: hidden;
  overflow-x: clip;   /* clip, not a scroll container: lets position:sticky work (article sidebar) */
}
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;
  overflow-x: clip;
  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;
    color: #ffffff;
  margin-bottom: 0.5rem;
}
.text-center { text-align: center; }
/* ---------- Eyebrow in case the background is clear ---------- */
.section--accred .eyebrow {
    color: #3f5c57 !important;
}
/* Eyebrow on a light background (e.g. "Noteworthy programmes" over --light):
   the base white is invisible, so use the brand sage-green accent. */
.eyebrow--onlight { color: var(--accent); }
/* ---------- 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 ---------- */
 /* FIXED, not sticky. position:sticky cannot work here: html and body both carry
   overflow-x:hidden, which makes them scroll containers, so a sticky child sticks
   to that container instead of the viewport and scrolls away with the page. The
   top bar already had to be fixed for this exact reason. The header sits directly
   under the top bar and never moves. */
.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. Tallest content is a nav link at ~45px; the padding
     keeps its own spacing below that. */
  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; }
  /* Smaller logo, so the fixed band gets shorter too - the body padding and every
     scroll-margin follow automatically from the variable. */
  :root { --header-h: 70px; }
}

.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));
}
.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: rgba(255,255,255,0.85); max-width: 100ch; 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: 100ch; margin-top: 1rem; }
.hero-intro p { color: rgba(255,255,255,0.85); font-size: 1.1rem; }
.hero-intro p:not(:last-child) { margin-bottom: 0.9rem; }
.hero-intro ul, .hero-intro ol { color: rgba(255,255,255,0.85); 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: rgba(255,255,255,0.75); }

/* ---------- 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; }
/* Company description between the heading and the button. Narrower than the
   920px container so the lines stay readable, and it inherits the navy
   section's light-on-dark colours. */
.about-teaser-text {
  max-width: 68ch;
  margin: 0 auto 1.75rem;
  color: rgba(255,255,255,0.82);
}
.about-teaser-text p { margin: 0 0 0.9rem; line-height: 1.7; }
.about-teaser-text p:last-child { margin-bottom: 0; }

.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: rgba(255,255,255,0.78);
  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-text { font-size: 0.95rem; margin-bottom: 1.5rem; }
  .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); }

.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; }
/* The question is a real heading for the document outline; it must still look
   like the summary line it sits in. */
.faq summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; min-width: 0; }

/* 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; }
.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); }

/* ---------- 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: rgba(255,255,255,0.75);
  padding: 4rem 0 0;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.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: rgba(255,255,255,0.75); }
.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: rgba(255,255,255,0.82); 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; }

.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: rgba(255,255,255,0.78);
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-bottom-links a { color: rgba(255,255,255,0.78); }
.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 at the space below the top bar
     and let it scroll on its own. Scoped to mobile: on desktop an overflow here
     would clip the mega-menu dropdowns. */
  .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; } }

/* ---------- 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: rgba(255,255,255,0.85);
  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, .header-topbar, .site-footer, .form-card, .hero-actions { display: none; }
  /* The fixed chrome is gone on paper, so reclaim the space the body reserves
     for it - otherwise every printed page starts with a blank band. */
  body { color: #000; background: #fff; padding-top: 0; }
}

/* =============================================================
   News / Blog
   ============================================================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.news-card {
  position: relative;
  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; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; }
.news-card-dot { color: var(--border-strong); }
/* Byline sits at the BOTTOM RIGHT of the card. .news-card-excerpt carries
   flex:1 inside the column-flex body, so it absorbs the spare height and the
   byline is pinned to the bottom edge whatever the excerpt length — which also
   keeps the bylines aligned across cards of different heights in a row. */
.news-card-byline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  min-width: 0;
}
.news-card-author-photo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--light);
}
.news-card-author-name {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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); }
/* Whole card clickable via the title's stretched link (replaces the "Read more" button) */
.news-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card-excerpt { color: var(--text); font-size: 0.95rem; margin: 0; 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; }
}

/* Immigration Brief: a narrower reading column with the consultation CTA beside
   it. A brief has no table of contents and no related programmes, so the sidebar
   is the CTA card alone and does not need the 260px TOC column an article uses.
   Mobile is deliberately untouched: the base .post-layout above stays a single
   full-width column and the card falls to the end of the text as .post-cta--end,
   so only the desktop rules below are scoped to --brief. */
.post-layout--brief .post-aside { display:none; }
@media (min-width:1024px) {
  /* Text at 70% of the 1190px container. At 50% the leftover half was far wider
     than the card, leaving a dead strip between the two; 70% leaves roughly the
     card's own width, so the sidebar fills its column and the gap closes. */
  .post-layout--brief { grid-template-columns:70% minmax(0,1fr); }
  .post-layout--brief .post-aside { display:block; justify-self:end; width:100%; max-width:320px; }
}

.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:1.1rem; font-size:.86rem; letter-spacing:.02em; color:rgba(255,255,255,.72); }
.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:rgba(255,255,255,.85); }
.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; }
/* Pull-quote box ("Quote box" from the editor): highlighted callout with an optional author */
.article-prose blockquote.pullquote { position:relative; margin:2.4rem 0; padding:1.7rem 1.9rem 1.55rem 3.4rem; border-left:4px solid var(--accent); border-radius:var(--radius); background:#eef3f1; font-family:var(--serif); font-size:1.18rem; line-height:1.55; font-style:italic; color:var(--navy-dark); }
.article-prose blockquote.pullquote::before { content:"\201C"; position:absolute; left:1rem; top:.5rem; font-family:var(--serif); font-size:2.9rem; line-height:1; color:var(--accent); opacity:.3; }
.article-prose blockquote.pullquote p { margin:0 0 .4rem; }
.article-prose blockquote.pullquote p:last-child { margin-bottom:0; }
.article-prose blockquote.pullquote[data-author]::after { content:attr(data-author); display:block; margin-top:.9rem; font-family:var(--sans); font-style:normal; font-size:.9rem; font-weight:600; letter-spacing:.02em; color:var(--accent-dark); }
@media (max-width:640px){ .article-prose blockquote.pullquote { padding:1.4rem 1.3rem 1.3rem 2.8rem; font-size:1.08rem; } }
.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; }
/* Share row inside the CTA card. Same circular icon button as .footer-social-link,
   recoloured for a light background (the footer version is tuned for the dark
   footer, so its rgba-white values would be invisible here). */
.post-share { margin-top:1.35rem; padding-top:1.1rem; border-top:1px solid var(--border); }
.post-share-label {
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.7rem;
}
.post-share-links { display:flex; gap:.5rem; }
.post-share-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  color:var(--muted); border:1px solid var(--border-strong);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.post-share-link:hover { color:#fff; background:var(--accent); border-color:var(--accent); }
.post-share-link svg { display:block; }

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

/* Immigration Brief sidebar. A brief has no consultation CTA, so .post-share is
   no longer nested inside a .post-cta card and has to carry the card frame
   itself; its own top border and spacing are cancelled here because they were
   drawn to separate it from the CTA text above it. Visibility mirrors the
   --aside / --end pattern: sidebar on desktop, end of the brief on mobile. */
.post-share-block { background:var(--light); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.post-share-block .post-share { margin-top:0; padding-top:0; border-top:0; }
.post-share-block--aside { margin-top:1.4rem; display:none; }
.post-share-block--end { margin-top:2.5rem; display:block; }
@media (min-width:1024px) {
  .post-share-block--aside { display:block; }
  .post-share-block--end { display:none; }
}
/* Archive link closing the series list. */
.post-programs-all { display:inline-block; margin-top:1rem; font-size:.85rem; font-weight:600; color:var(--accent-dark); text-decoration:none; }
.post-programs-all:hover { color:var(--accent); }
.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(--paper); 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: the logo sits INSIDE the content flow, directly above the outlet
   name and date, left aligned. No banner band and no accent border: the plain
   grey block read as a separate header strip rather than part of the article. */
.media-card--featured { margin-top:1rem; }
.media-card--featured .media-card-logo {
  justify-content:flex-start;
  background:none;
  border-bottom:0;
  min-height:0;
  padding:1.4rem 1.4rem 0;
}
.media-card--featured .media-card-logo img { max-height:44px; max-width:180px; }
.media-card--featured .media-card-body { padding-top:.7rem; }
.media-card--featured .media-card-title { font-size:1.45rem; }
@media (max-width:640px){
  .media-grid--list .media-card { flex-direction:column; }
  .media-grid--list .media-card-logo { width:100%; border-right:0; border-bottom:1px solid var(--border); }
  .media-card--featured .media-card-logo { padding:1.1rem 1.1rem 0; }
  .media-card--featured .media-card-logo img { max-height:36px; max-width:150px; }
}

/* ---------- 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. */
/* <address> is italic by default; the footer contact block must read as normal text. */
.footer-contact { font-style:normal; }
.hlg-office-tel, .hlg-office-mail { display:block; padding:0.35rem 0; min-height:24px; }
.site-footer .hlg-office a { color:rgba(255,255,255,0.85); }
.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); }
.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:16px; line-height:1.55; 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 h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.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 + eBook request 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; }
}
/* Overview + YouTube video two-column layout. The video column is a little
   wider than the eBook form so the player stays watchable. Rendered only
   when the programme has a video; otherwise the Overview stays full-width. */
@media (min-width: 900px) {
  .prog-split--video { grid-template-columns: minmax(0,1fr) 460px; gap: 2.5rem; }
}
/* Separated from the Overview by a rule: vertical beside it on desktop,
   horizontal above it once the columns stack. */
.prog-video { margin-top: 2rem; padding-top: 1.9rem; border-top: 1px solid var(--border); }
@media (min-width: 900px) {
  .prog-video { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--border); padding-left: 2.25rem; }
}
.prog-video-inner { position: sticky; top: 96px; }
.prog-video-title { font-size: 1.05rem; line-height: 1.45; font-weight: 600; color: var(--navy-dark, #2d4541); margin: 0 0 .9rem; }
.prog-video-frame { position: relative; width: 100%; padding-top: 56.25%; background: var(--navy, #2d4541); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 28px rgba(45,69,65,.10); }
.prog-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.prog-ebook { margin-top: 2rem; }
@media (min-width: 900px) { .prog-ebook { margin-top: 0; } }
.prog-ebook-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-ebook-title { font-family: var(--sans); font-size: 1.2rem; color: var(--navy); margin: 0 0 .4rem; }
.prog-ebook-note { font-size: .86rem; line-height: 1.5; color: var(--muted); margin: 0 0 1.1rem; }
.prog-ebook .form { gap: .85rem; }
.prog-ebook .btn { width: 100%; justify-content: center; }

/* White fields + green borders on both program-page forms (eBook + bottom
   inquiry). Scoped so other site forms are unaffected. */
.prog-ebook .form input,
.prog-ebook .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) ---------- */
/* The top strip. Both this and the nav below it are fixed and always visible;
   neither moves on scroll. */
/* 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); }
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:flex-end; }
.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:rgba(255,255,255,0.8); }
.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; }
  .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:rgba(255,255,255,.8); 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; }
}

/* ---------- "Contact me back" callback widget ---------- */
/* The button borrows the SHAPE of the Türkiye site's floating button (white pill,
   round icon, text that expands on hover, collapses to the icon on phones) — it
   opens this site's callback form, it is not a messaging link. The dialog has no
   visible field labels: the placeholder is the label, and every control carries an
   aria-label so screen readers and voice control still work. */

.cb-fab {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  box-shadow: 0 6px 22px rgba(15,45,35,0.16), 0 3px 14px rgba(58,118,101,0.22);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cb-fab:hover { box-shadow: 0 12px 32px rgba(15,45,35,0.20), 0 6px 20px rgba(58,118,101,0.34); transform: translateY(-1px); }
.cb-fab:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }

.cb-fab-ico {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Two icons stacked in the same spot; one is always on its way in or out. */
.cb-fab-ico svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  will-change: transform, opacity;
}
/* One 6s cycle: the handset holds, rises away, the envelope arrives from below,
   holds, and they swap back. Two keyframe sets rather than one with a negative
   delay, so the loop point is always invisible and never flashes. */
.cb-ico-phone { animation: cb-ico-out 6s ease-in-out infinite; }
.cb-ico-mail  { animation: cb-ico-in  6s ease-in-out infinite; }
/* Settle while it is being read or used. */
.cb-fab:hover .cb-ico-phone,
.cb-fab:hover .cb-ico-mail,
.cb-fab:focus-visible .cb-ico-phone,
.cb-fab:focus-visible .cb-ico-mail { animation-play-state: paused; }

@keyframes cb-ico-out {
  0%,  42%  { opacity: 1; transform: translateY(0)     scale(1);   }
  50%, 92%  { opacity: 0; transform: translateY(-125%) scale(0.7); }
  92.01%    { opacity: 0; transform: translateY(125%)  scale(0.7); }  /* reset below, unseen */
  100%      { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes cb-ico-in {
  0%,  42%  { opacity: 0; transform: translateY(125%)  scale(0.7); }
  50%, 92%  { opacity: 1; transform: translateY(0)     scale(1);   }
  100%      { opacity: 0; transform: translateY(-125%) scale(0.7); }
}

/* "An advisor is available" — the same reassurance the Türkiye button gives. */
.cb-fab-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #35c47a;
  border: 2.5px solid #fff;
}

/* Collapsed to nothing by default; opens on hover/focus, and once on arrival. */
.cb-fab-txt {
  display: flex;
  flex-direction: column;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.32s ease, padding 0.32s ease;
}
.cb-fab:hover .cb-fab-txt,
.cb-fab:focus-visible .cb-fab-txt,
.cb-fab.is-open .cb-fab-txt { max-width: 280px; padding: 0 20px 0 13px; }
.cb-fab-txt strong { font-size: 0.98rem; font-weight: 700; color: var(--navy-dark); line-height: 1.2; }
.cb-fab-txt small  { font-size: 0.78rem; color: var(--muted); }

/* ---- Dialog ---- */
.cb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(24,40,37,0.55);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 220ms ease;
}
.cb-overlay[hidden] { display: none; }
.cb-overlay.is-open { opacity: 1; }

.cb-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15,45,35,0.30);
  padding: 2.25rem 2.25rem 1.75rem;
  transform: translateY(14px) scale(0.985);
  transition: transform 220ms ease;
}
.cb-overlay.is-open .cb-panel { transform: translateY(0) scale(1); }

.cb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--light);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cb-close svg { width: 14px; height: 14px; }
.cb-close:hover { background: var(--border); color: var(--text); }

.cb-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 0.4rem;
  padding-right: 2.5rem;
}
.cb-sub {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* ---- Fields: placeholder-as-label, one consistent control ---- */
.cb-form input[type="text"],
.cb-form input[type="tel"],
.cb-form input[type="email"],
.cb-form select {
  width: 100%;
  height: 50px;
  padding: 0 0.95rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background-color: #fbfcfb;
  font-family: var(--sans);
  /* 16px is a hard MINIMUM, not a style choice: iOS Safari zooms the whole page
     in when a focused field is under 16px, which throws the layout off and is
     the fastest way to lose a mobile lead. Never drop this below 16px. */
  font-size: 16px;
  /* iOS clips select text when a line-height is inherited alongside a height. */
  line-height: normal;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
}
/* Darker than a typical placeholder grey: #98a4a1 on this off-white was about
   2.4:1, which reads as "greyed out" rather than "here is what to type". */
.cb-form input::placeholder { color: #78837f; }
/* A select still showing its placeholder option is :invalid — grey it to match. */
.cb-form select:invalid { color: #78837f; }
.cb-form select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23646f6c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 20px 20px;
  /* iOS renders a select as a wheel picker and ignores text-overflow, so a long
     option (a programme name, "Saint Vincent and the Grenadines +1") must be
     allowed to truncate rather than push the custom arrow off the control. */
  text-overflow: ellipsis;
  /* Safari adds an inner border-radius shadow on selects unless this is reset. */
  border-radius: 11px;
}
.cb-form input:focus,
.cb-form select:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(58,118,101,0.13);
}

.cb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7rem; }
/* Dial code + number read as a single control. */
.cb-tel { display: grid; grid-template-columns: 8.75rem 1fr; gap: 0 0.7rem; }

/* The one visible field label (the programme dropdown — see includes/callback.php).
   Same weight as the preferred-contact legend so the two read as a pair. */
.cb-flabel {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}

/* ---- Preferred contact: two pills, one tap ---- */
.cb-prefer {
  border: 0;
  padding: 0;
  margin: 0.35rem 0 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.cb-prefer legend {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}
.cb-prefer-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 50px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fbfcfb;
  font-size: 0.93rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.cb-prefer-opt:hover { border-color: var(--border-strong); }
/* The radio itself is the accessible control; the pill is what is seen. */
.cb-prefer-opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.cb-prefer-opt span { pointer-events: none; }
.cb-prefer-opt span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.15rem;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  vertical-align: -3px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cb-prefer-opt.is-checked,
.cb-prefer-opt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(58,118,101,0.07);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.cb-prefer-opt.is-checked span,
.cb-prefer-opt:has(input:checked) span { font-weight: 600; color: var(--accent-dark); }
.cb-prefer-opt.is-checked span::before,
.cb-prefer-opt:has(input:checked) span::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--accent);
}
.cb-prefer-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(58,118,101,0.18); }
/* Phone not needed when they asked to be emailed — dimmed, still usable. */
.cb-tel.is-optional { opacity: 0.55; }
.cb-tel.is-optional:focus-within { opacity: 1; }

.cb-consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.cb-consent input { width: 17px; height: 17px; margin-top: 0.1rem; flex: 0 0 auto; accent-color: var(--accent); }
.cb-consent a { color: var(--accent); text-decoration: underline; }

.cb-submit {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(58,118,101,0.28);
  transition: background var(--transition), box-shadow var(--transition);
}
.cb-submit:hover:not(:disabled) { background: var(--accent-dark); box-shadow: 0 6px 20px rgba(58,118,101,0.40); }
.cb-submit:disabled { opacity: 0.65; cursor: default; }

/* ---- Sent ---- */
.cb-success { text-align: center; padding: 1.75rem 0 1.25rem; }
.cb-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(58,118,101,0.11);
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.cb-success-mark svg { width: 30px; height: 30px; }
.cb-success h3 { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); margin: 0 0 0.4rem; }
.cb-success p  { color: var(--muted); margin: 0; font-size: 0.95rem; }

@media (max-width: 640px) {
  /* Icon AND wording on phones. An icon on its own does not say what tapping it
     will do, and there is no hover on touch to reveal the label — so the text
     stays permanently open, just scaled down. Capped to the viewport so a narrow
     screen truncates it instead of pushing the button off the left edge. */
  .cb-fab {
    right: 14px;
    bottom: 16px;
    padding: 5px;
    max-width: calc(100vw - 28px);
  }
  .cb-fab-ico { width: 44px; height: 44px; }
  .cb-fab-ico svg { width: 22px; height: 22px; }
  .cb-fab-dot { width: 11px; height: 11px; border-width: 2px; }
  .cb-fab-txt {
    display: flex;
    max-width: none;
    padding: 0 14px 0 10px;
    overflow: hidden;
  }
  .cb-fab-txt strong,
  .cb-fab-txt small { overflow: hidden; text-overflow: ellipsis; }
  .cb-fab-txt strong { font-size: 0.86rem; }
  .cb-fab-txt small  { font-size: 0.7rem; }

  /* The dialog becomes a bottom sheet. dvh, so the on-screen keyboard shrinking
     the viewport does not leave the submit button under the keyboard. */
  .cb-overlay { padding: 0; align-items: flex-end; overscroll-behavior: contain; }
  .cb-panel {
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding: 1.75rem 1.25rem 1.25rem;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cb-title { font-size: 1.35rem; }
  .cb-row { grid-template-columns: 1fr; }
  /* One field per line, taller targets, and 16px stays 16px (iOS zoom guard). */
  .cb-form input[type="text"],
  .cb-form input[type="tel"],
  .cb-form input[type="email"],
  .cb-form select { height: 52px; font-size: 16px; margin-bottom: 0.6rem; }
  /* Kept side by side: a dial code next to its number is clearer than stacked. */
  .cb-tel { grid-template-columns: 7.75rem 1fr; }
  .cb-submit { height: 54px; font-size: 16px; }
  .cb-close { top: 0.75rem; right: 0.75rem; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-overlay, .cb-panel, .cb-fab, .cb-fab-txt { transition: none; }
  /* No icon swap for anyone who has asked the OS to stop moving things: the
     handset simply stays put. */
  .cb-ico-phone, .cb-ico-mail { animation: none; }
  .cb-ico-phone { opacity: 1; transform: none; }
  .cb-ico-mail  { opacity: 0; }
}

/* ---------------------------------------------------------------- QR contacts
   WeChat / WhatsApp codes inside the "Speak with our team" band. Rendered hidden
   and revealed by js/qr-geo.js only for the countries chosen in the admin, so
   the edge-cached HTML stays identical for every visitor. */
/* Centres itself, so it looks the same in the centred homepage band and in
   the left-aligned enquiry section on a programme page. */
.qr-contacts { margin: 2.4rem auto 0; max-width: 560px; text-align: center; }
.qr-contacts[hidden] { display: none; }
.qr-contacts-title {
  margin: 0 0 1.1rem; font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.qr-contacts-title::before,
.qr-contacts-title::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 28px; height: 1px; background: var(--border); margin: 0 .7rem;
}
.qr-contacts-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.qr-card {
  flex: 0 1 232px; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.2rem 1.1rem 1.3rem; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); text-align: center;
}
.qr-card-head { display: flex; align-items: center; gap: .4rem; color: var(--accent); }
.qr-card-ico { width: 18px; height: 18px; flex: none; }
.qr-card-name { font-size: .95rem; font-weight: 700; color: var(--navy); }

.qr-card-link { display: block; line-height: 0; border-radius: 8px; }
.qr-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.qr-card-img { display: block; width: 100%; max-width: 160px; height: auto; border-radius: 6px; }

.qr-card-handle { font-size: .82rem; color: var(--muted); word-break: break-all; }
.qr-card-btn {
  display: block; width: 100%; padding: .6rem .7rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .88rem; font-weight: 700;
  text-decoration: none; min-height: 42px; line-height: 1.5;
}
.qr-card-btn:hover, .qr-card-btn:focus { background: var(--accent-dark); color: #fff; }

.qr-card-hint { font-size: .78rem; line-height: 1.4; color: var(--muted); }
.qr-card-hint--hold { display: none; }
/* You cannot scan a code on the screen you are holding, so a touch device gets
   the press-and-hold / scan-from-album instruction instead. */
.qr-contacts--touch .qr-card-hint--scan { display: none; }
.qr-contacts--touch .qr-card-hint--hold { display: block; }

@media (max-width: 560px) {
  .qr-contacts { margin-top: 2rem; }
  .qr-contacts-grid { gap: .8rem; }
  .qr-card { flex: 1 1 100%; max-width: 300px; margin: 0 auto; }
  .qr-card-img { max-width: 180px; }
}

/* The band on some pages is dark (expertise.php), so the labels invert there. */
.section--dark .qr-contacts-title { color: rgba(255,255,255,0.6); }
.section--dark .qr-contacts-title::before,
.section--dark .qr-contacts-title::after { background: rgba(255,255,255,0.25); }

/* --- QR lightbox: clicking a code enlarges it in place instead of navigating
   away. Mirrors the callback-widget overlay so it feels like the same site. */
.qr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(24,40,37,0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.qr-lightbox[hidden] { display: none; }
.qr-lightbox.is-open { opacity: 1; }

.qr-lightbox-panel {
  position: relative;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15,45,35,0.30);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  transform: translateY(14px) scale(0.985);
  transition: transform 200ms ease;
}
.qr-lightbox.is-open .qr-lightbox-panel { transform: translateY(0) scale(1); }

.qr-lightbox-img {
  display: block;
  width: min(340px, 62vw);
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
}
.qr-lightbox-cap {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.qr-lightbox-sub { margin: .25rem 0 0; font-size: .84rem; color: var(--muted); }

.qr-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(24,40,37,0.07);
  color: var(--navy);
  cursor: pointer;
  padding: 0;
}
.qr-lightbox-close:hover { background: rgba(24,40,37,0.14); }
.qr-lightbox-close svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .qr-lightbox-panel { padding: 1.6rem 1.2rem 1.2rem; }
  .qr-lightbox-img { width: min(300px, 74vw); }
  .qr-lightbox-close { top: .7rem; right: .7rem; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-lightbox, .qr-lightbox-panel { transition: none; }
}

/* --- Enquiry form + chat codes, side by side on a programme page.
   Flex rather than grid on purpose: when the codes are switched off in the
   admin the aside is not rendered at all, and the form simply fills the row
   instead of leaving an empty column behind. */
.inquiry-split { display: flex; align-items: flex-start; gap: 4rem; }
/* The intro sits above a full 1190px row now, so the sentence is held to a
   readable measure instead of running the whole width. */
.inquiry-intro { max-width: 70ch; }
.inquiry-split > .contact-form { flex: 1 1 auto; min-width: 0; }

.qr-contacts--aside {
  flex: 0 0 250px;
  margin: 0;
  max-width: none;
  padding-left: 3rem;
  border-left: 1px solid var(--border);   /* the thin separation */
  align-self: stretch;
}
.qr-contacts--aside .qr-contacts-title { margin-bottom: 1rem; }
/* No flanking rules on the narrow heading: the vertical line already separates. */
.qr-contacts--aside .qr-contacts-title::before,
.qr-contacts--aside .qr-contacts-title::after { display: none; }

/* Stacked, not side by side. */
.qr-contacts--aside .qr-contacts-grid { flex-direction: column; gap: .9rem; }
.qr-contacts--aside .qr-card { flex: 0 0 auto; width: 100%; padding: 1rem .9rem 1.1rem; }
.qr-contacts--aside .qr-card-img { max-width: 158px; }
.qr-contacts--aside .qr-card-hint { font-size: .74rem; }

@media (max-width: 860px) {
  /* Below this the column would be too narrow to scan, so the aside drops under
     the form and the rule turns horizontal. */
  .inquiry-split { display: block; }
  .qr-contacts--aside {
    width: 100%;
    max-width: 560px;
    margin: 2.2rem auto 0;
    padding: 1.8rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .qr-contacts--aside .qr-contacts-grid { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .qr-contacts--aside .qr-card { flex: 1 1 200px; }
  .qr-contacts--aside .qr-card-img { max-width: 160px; }
}
@media (max-width: 560px) {
  .qr-contacts--aside .qr-card { flex: 1 1 100%; max-width: 300px; margin: 0 auto; }
  .qr-contacts--aside .qr-card-img { max-width: 180px; }
}


/* =============================================================
   VB & PARTNERS DESIGN LAYER (A: above the fold)
   Palette from vbapartners.com: ink #061835, ocean #0F4160,
   teal #35A692. One family: Inter. Floating glass header, a light
   homepage hero (founder portrait + starting fees), calm navy
   banners on inner pages. Benchmark: corporate-services sites
   such as Acclime: white space, navy type, restrained effects.
   Duplicated at the end of critical.css so first paint matches.
   ============================================================= */
:root {
  --topbar-h: 0px;
  --header-h: 84px;
  --vb-ink:       #061835;
  --vb-ocean:     #0F4160;
  --vb-deep:      #163142;
  --vb-teal:      #35A692;
  --vb-teal-lift: #4DB8A8;
  --vb-teal-ink:  #1F7F6F;
  --vb-mint:      #BFEDE3;
  --vb-mist:      #F4F7F9;
  --vb-line:      #DCE5EC;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --vb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vb-ease: cubic-bezier(.2,.7,.2,1);
}

body {
  font-family: var(--sans);
  font-size: 16.5px;
  letter-spacing: -0.006em;
  color: var(--text);
  background: #fff;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); color: var(--vb-ink); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--vb-ocean); }
a:hover { color: var(--vb-teal-ink); }
:focus-visible { outline: 3px solid var(--vb-teal); outline-offset: 2px; border-radius: 6px; }

/* Eyebrow: a small dot + label. On navy grounds it becomes a glass pill. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--vb-teal-ink);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vb-teal); box-shadow: 0 0 0 4px rgba(53,166,146,0.18); flex: none; }
.eyebrow--light,
.hero .eyebrow,
.section--navy .eyebrow,
.ebook-band .eyebrow,
.newsletter-text .eyebrow {
  color: var(--vb-mint);
  padding: 0.42rem 0.9rem 0.42rem 0.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
}

/* ---------- Header: a floating glass pill ---------- */
.site-header {
  top: 0;
  padding: 10px 12px 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  pointer-events: none;
}
.header-inner {
  pointer-events: auto;
  min-height: 62px;
  padding: 0.5rem 0.6rem 0.5rem 1.35rem;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(15,65,96,0.10);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(6,24,53,0.25);
}
.logo img { height: 38px; }
.main-nav a { color: var(--vb-ink); font-weight: 500; }
.btn-nav,
.main-nav a.btn-nav {
  background: var(--vb-ink);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  margin-left: 0.35rem;
}
.btn-nav:hover, .main-nav a.btn-nav:hover { background: var(--vb-ocean); }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { background: var(--vb-ink); }
.lang-switch summary { color: var(--vb-ink); border-color: var(--vb-line); border-radius: 999px; padding: 0.55rem 0.9rem; font-weight: 500; background: rgba(255,255,255,0.6); }
.megamenu-title { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vb-teal-ink); margin: 0 0 0.85rem; }
.megamenu-title a { padding: 0; color: inherit; }
.megamenu-title a:hover { background: none; }
.megamenu-col a { border-radius: var(--radius-sm); color: var(--vb-ink); }
.megamenu-col a:hover { background: var(--vb-mist); color: var(--vb-teal-ink); }
@media (min-width: 861px) {
  .main-nav a { font-size: 0.94rem; border-radius: 999px; padding: 0.6rem 0.95rem; }
  .main-nav a:hover { background: var(--vb-mist); color: var(--vb-ink); }
  .megamenu { top: calc(var(--header-h) + 2px); border-radius: var(--radius-xl); border-color: var(--vb-line); box-shadow: 0 30px 60px -20px rgba(6,24,53,0.35); padding: 1.9rem; background: rgba(255,255,255,0.97); backdrop-filter: blur(18px); }
  .megamenu--services { grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 2.5rem; }
  .megamenu-group { display: grid; align-content: start; gap: 0.25rem; }
}

/* Skip link: hidden until keyboard focus. */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--vb-ink); color: #fff; padding: 0.7rem 1.1rem; border-radius: 999px; font-weight: 600; }
.skip-link:focus { top: 0.75rem; color: #fff; }

/* ---------- Inner-page hero: a calm navy banner, inset with rounded corners ---------- */
.hero {
  margin: 10px 12px 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(55% 90% at 92% 0%, rgba(53,166,146,0.24), transparent 65%),
    radial-gradient(60% 90% at 0% 100%, rgba(27,90,130,0.55), transparent 70%),
    var(--vb-grain),
    linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 75%);
  color: #fff;
  padding: clamp(3.25rem, 6.5vw, 5.25rem) 0 clamp(3rem, 6vw, 4.5rem);
  isolation: isolate;
}
.hero::before, .hero::after { content: none; }
.hero h1 { max-width: 22ch; color: #fff; }
.hero-lead, .hero-intro, .hero p { color: rgba(255,255,255,0.76); }
.hero-lead { font-size: clamp(1.05rem, 1.3vw, 1.15rem); line-height: 1.65; max-width: 60ch; margin-top: 1.25rem; }
.hero .breadcrumb { color: rgba(255,255,255,0.5); margin-bottom: 1.6rem; }
.hero .breadcrumb a { color: rgba(255,255,255,0.72); }
.hero .breadcrumb a:hover { color: #fff; }
.hero .breadcrumb-sep { color: rgba(255,255,255,0.28); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Service pages with a photo: it fills the right side and dissolves into the navy. */
.hero--image {
  background:
    linear-gradient(90deg, var(--vb-ink) 32%, rgba(6,24,53,0.82) 58%, rgba(6,24,53,0.4) 100%),
    var(--hero-img) right center / cover no-repeat,
    var(--vb-ink);
}

/* ---------- Homepage hero: light, founder portrait, starting fees ---------- */
.hero--light {
  margin: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, var(--vb-mist) 100%);
  color: var(--text);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 5.5vw, 4.5rem);
}
.hero--light h1 { color: var(--vb-ink); font-size: clamp(2.5rem, 5vw, 3.9rem); max-width: 15ch; }
.hero--light .hero-lead, .hero--light p { color: var(--muted); }
.hero--light .hero-lead { max-width: 52ch; }
.hero--light .eyebrow { color: var(--vb-teal-ink); padding: 0; background: none; border: 0; }
.hero-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-home-grid--solo { grid-template-columns: minmax(0, 1fr); }

.hero-rating {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.6rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--vb-line);
  color: var(--muted);
  font-size: 0.88rem;
}
.hero-rating:hover { color: var(--vb-ink); border-color: var(--border-strong); }
.hero-rating-stars { color: #E9A91E; letter-spacing: 0.08em; font-size: 0.9rem; }
.hero-rating strong { color: var(--vb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Founder portrait: the white-background photo is multiplied onto a soft teal arch. */
.hero-portrait { position: relative; margin: 0; justify-self: end; width: min(100%, 470px); isolation: isolate; }
.hero-portrait-arch {
  position: relative; display: block;
  aspect-ratio: 5 / 5.6;
  border-radius: 999px 999px 24px 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #D8F0EA 0%, #E6F1F7 100%);
}
.hero-portrait-arch img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  mix-blend-mode: multiply;
  transform: scale(1.18); transform-origin: 50% 100%;
}
.hero-portrait-dots {
  position: absolute; z-index: -1;
  right: -26px; top: 10%;
  width: 132px; height: 176px;
  background-image: radial-gradient(var(--vb-teal) 1.7px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.5;
}
.hero-portrait-card {
  position: absolute; left: -22px; bottom: 30px;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.85rem 1.15rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 40px -18px rgba(6,24,53,0.35);
}
.hero-portrait-card a { color: var(--vb-ink); }
.hero-portrait-card strong { font-size: 1rem; font-weight: 700; }
.hero-portrait-card span { font-size: 0.82rem; color: var(--vb-teal-ink); font-weight: 500; }

/* Starting fees: a row of calm white cards under the hero copy. */
.hero-fees { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.hero--light p.hero-fees-label { margin: 0 0 0.9rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hero-fees-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hero-fees-grid li { display: flex; }
.fee-card {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  padding: 1.2rem 1.25rem 1.15rem;
  background: #fff;
  border: 1px solid var(--vb-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(6,24,53,0.04);
  color: var(--vb-ink);
  text-decoration: none;
  transition: transform 0.3s var(--vb-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.fee-card:hover { transform: translateY(-3px); border-color: var(--vb-teal); box-shadow: 0 16px 32px -18px rgba(6,24,53,0.3); color: var(--vb-ink); }
.fee-card-name { font-size: 0.92rem; font-weight: 600; padding-right: 2.25rem; line-height: 1.35; }
.fee-card-amt { display: flex; flex-direction: column; gap: 0.15rem; }
.fee-card-amt strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fee-card-amt small { font-size: 0.76rem; font-weight: 500; color: var(--muted); }
.fee-card-go {
  position: absolute; top: 0.9rem; right: 0.9rem;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--vb-mist); color: var(--vb-ink);
  transition: background 0.3s ease, transform 0.3s var(--vb-ease);
}
.fee-card:hover .fee-card-go { background: var(--vb-teal); transform: rotate(45deg); }

/* Load sequence: content rises in once; everything is visible at rest. */
@keyframes vbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-home-inner > *, .hero-portrait, .hero-fees-grid li { animation: vbRise 0.7s var(--vb-ease) both; }
.hero-home-inner > :nth-child(2) { animation-delay: 0.05s; }
.hero-home-inner > :nth-child(3) { animation-delay: 0.1s; }
.hero-home-inner > :nth-child(4) { animation-delay: 0.15s; }
.hero-home-inner > :nth-child(5) { animation-delay: 0.2s; }
.hero-portrait { animation-delay: 0.12s; }
.hero-fees-grid li:nth-child(1) { animation-delay: 0.22s; }
.hero-fees-grid li:nth-child(2) { animation-delay: 0.27s; }
.hero-fees-grid li:nth-child(3) { animation-delay: 0.32s; }
.hero-fees-grid li:nth-child(4) { animation-delay: 0.37s; }

/* ---------- Buttons: pills. Primary = teal with ink text (white on #35A692 is too faint). ---------- */
.btn {
  border-radius: 999px;
  padding: 0.88rem 1.55rem;
  font-weight: 600;
  letter-spacing: 0;
  border-width: 1.5px;
  line-height: 1.2;
}
.btn--lg { padding: 1rem 1.85rem; font-size: 1rem; }
.btn--primary,
.section--navy .btn--primary {
  background-color: var(--vb-teal);
  border-color: var(--vb-teal);
  color: var(--vb-ink);
  box-shadow: 0 8px 22px -10px rgba(53,166,146,0.7);
}
.btn--primary:hover,
.section--navy .btn--primary:hover {
  background-color: var(--vb-teal-lift);
  border-color: var(--vb-teal-lift);
  color: var(--vb-ink);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(53,166,146,0.85);
}
.btn--outline { border-color: var(--vb-ink); color: var(--vb-ink); }
.btn--outline:hover { background: var(--vb-ink); border-color: var(--vb-ink); color: #fff; }
.btn--outline-light { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--vb-ink); }

@media (max-width: 960px) {
  .hero-home-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-portrait { justify-self: start; width: min(100%, 400px); margin-left: 22px; }
  .hero-fees-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .header-inner { border-radius: 24px; padding: 0.5rem 0.6rem 0.5rem 1.1rem; }
  .main-nav a.btn-nav { margin-left: 0; padding: 0.75rem 1.35rem; }
}
@media (max-width: 600px) {
  :root { --header-h: 74px; }
  .site-header { padding: 8px 8px 0; }
  .header-inner { min-height: 56px; }
  .logo img { height: 32px; }
  .hero { margin: 8px 8px 0; border-radius: 22px; }
  .hero--light { margin: 0; border-radius: 0; }
  .hero h1, .hero--light h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  .hero-portrait-dots { right: -10px; }
  .hero-portrait-card { left: -12px; bottom: 20px; }
  .hero-fees-grid { gap: 0.65rem; }
  .fee-card { padding: 1rem; gap: 1rem; }
  .fee-card-name { font-size: 0.84rem; }
  .fee-card-amt strong { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home-inner > *, .hero-portrait, .hero-fees-grid li { animation: none; }
  .fee-card, .fee-card:hover, .fee-card-go { transition: none; transform: none; }
}

/* =============================================================
   VB & PARTNERS DESIGN LAYER (B: below the fold, style.css only)
   ============================================================= */

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 6.75rem) 0; }
.section--light { background: var(--vb-mist); }
.section--navy {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(53,166,146,0.16), transparent 65%),
    var(--vb-grain),
    linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 70%);
  color: rgba(255,255,255,0.78);
}
.section--navy h2, .section--navy h3 { color: #fff; }
.section > .container > h2 { max-width: 24ch; }
.section-intro { color: var(--muted); max-width: 62ch; margin: 0.25rem 0 0; font-size: 1.08rem; line-height: 1.6; }
.container--narrow { max-width: 860px; }
.muted { color: var(--muted); }

/* ---------- Homepage services: two groups, each with a split head ---------- */
.home-services-group { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.home-services-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.75rem 3rem;
  align-items: end;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--vb-line);
}
.home-services-head h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.022em; margin: 0; }
.home-services-head h3 a { color: var(--vb-ink); }
.home-services-head h3 a:hover { color: var(--vb-teal-ink); }
.home-services-head p { color: var(--muted); margin: 0; }

/* ---------- Service cards ---------- */
.prog-grid, .prog-grid--home { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.25rem; }
.prog-card {
  padding: 0;
  border-color: var(--vb-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(6,24,53,0.04);
  color: var(--text);
}
.prog-card::before { height: 3px; background: var(--vb-teal); z-index: 2; }
.prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.prog-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vb-mist); }
.prog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.prog-card:hover .prog-card-media img { transform: scale(1.04); }
.prog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.45rem 1.3rem; }
.prog-card-head { display: block; padding: 0; margin: 0 0 0.55rem; border: 0; }
.prog-card-head h3, .prog-card-head h4 { font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--vb-ink); margin: 0; }
.prog-card-blurb {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.92rem; line-height: 1.55; color: var(--muted);
}
.prog-card-facts { display: block; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--border-strong); }
.prog-card-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.prog-card-fact span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.prog-card-fact strong { font-size: 1rem; font-weight: 700; color: var(--vb-ink); font-variant-numeric: tabular-nums; text-align: right; }
.prog-card-benefits { margin: 1rem 0 0; }
.prog-card-benefits li { padding-left: 1.1rem; font-size: 0.87rem; margin-bottom: 0.45rem; }
.prog-card-benefits li::before { width: 6px; height: 6px; top: 0.58em; border-radius: 1px; background: var(--vb-teal); }
.prog-card-benefits li::after { content: none; }
.prog-card-link { padding-top: 1.1rem; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--vb-teal-ink); }

/* ---------- Reviews: a snap-scrolling row, three cards in view ---------- */
.reviews-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2.5rem) / 3);
  gap: 1.25rem;
  margin-top: 2.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.review-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 1rem;
  margin: 0;
  padding: 1.75rem;
  background: var(--vb-mist);
  border-radius: var(--radius-lg);
}
.review-stars { color: var(--vb-teal-ink); letter-spacing: 0.18em; font-size: 0.95rem; }
.review-card blockquote { margin: 0; flex: 1; font-size: 0.98rem; line-height: 1.65; color: var(--text); }
.review-card figcaption { padding-top: 1rem; border-top: 1px solid var(--vb-line); display: flex; flex-direction: column; gap: 0.15rem; }
.review-card figcaption strong { color: var(--vb-ink); font-weight: 600; }
.review-card figcaption span { color: var(--muted); font-size: 0.82rem; }

/* ---------- eBook band ---------- */
.ebook-band {
  background:
    radial-gradient(50% 90% at 15% 50%, rgba(53,166,146,0.28), transparent 70%),
    var(--vb-grain),
    var(--vb-ink);
  color: rgba(255,255,255,0.78);
}
.ebook-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.ebook-media img { width: 100%; max-width: 330px; margin: 0 auto; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 40px 70px -25px rgba(0,0,0,0.7); }
.ebook-text h2 { color: #fff; }
.ebook-text p { color: rgba(255,255,255,0.78); max-width: 58ch; }

/* ---------- Pull quote ---------- */
.pull-quote { margin: 0; }
.pull-quote::before { content: "\201C"; display: block; font-size: 5.5rem; line-height: 0.8; font-weight: 700; color: var(--vb-teal); margin-bottom: 0.4rem; }
.pull-quote p { font-size: clamp(1.35rem, 2.6vw, 1.95rem); font-weight: 600; line-height: 1.38; letter-spacing: -0.022em; color: var(--vb-ink); text-wrap: balance; margin: 0; }
.pull-quote footer { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vb-teal-ink); }
.pull-quote footer::before { content: ""; width: 28px; height: 2px; background: currentColor; }

/* ---------- Why choose us ---------- */
.why-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.why-text p { color: rgba(255,255,255,0.78); }
.why-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.why-points li { display: flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.1rem; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); color: #fff; font-weight: 600; font-size: 0.95rem; }
.why-points li::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--vb-teal); flex: none; }
.why-cards { display: grid; gap: 1rem; }
.why-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; box-shadow: none; }
.why-card h3 { color: #fff; font-size: 1.15rem; margin: 0 0 0.45rem; }
.why-card p { color: rgba(255,255,255,0.74); margin: 0; }

/* ---------- Feature bands (about, company set-up, accounting) ---------- */
.feature-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.feature-layout--flip .feature-media { order: -1; }
.feature-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.feature-text h2 { max-width: 24ch; }
.feature-text h3 { margin-top: 1.75rem; }
.feature-cta { margin: 1.75rem 0 0; }
.about-band h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.28; letter-spacing: -0.02em; max-width: 32ch; }

/* ---------- Essentials (featured guides) ---------- */
.essentials-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 2rem; }
.essentials-list a { display: block; padding: 1rem 0; border-top: 1px solid var(--vb-line); color: var(--vb-ink); font-weight: 600; }
.essentials-list a:hover { color: var(--vb-teal-ink); }

/* ---------- Quotation: text + contact lines left, form card right ---------- */
.quote-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.quote-text p { color: var(--muted); font-size: 1.05rem; }
.quote-contact { list-style: none; padding: 0; margin: 2rem 0 0; }
.quote-contact li { border-top: 1px solid var(--vb-line); }
.quote-contact li:last-child { border-bottom: 1px solid var(--vb-line); }
.quote-contact a { display: block; padding: 1rem 0; font-size: 1.15rem; font-weight: 600; color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.quote-contact a:hover { color: var(--vb-teal-ink); }
.contact-form--card { background: #fff; border: 1px solid var(--vb-line); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow); }
.form label { color: var(--gold-dark); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="password"],
.form input[type="number"], .form input[type="search"], .form select, .form textarea {
  background: var(--vb-mist); border-color: var(--vb-line); border-radius: var(--radius);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--vb-teal); box-shadow: 0 0 0 4px rgba(53,166,146,0.18); }
.form .checkbox a { color: var(--vb-teal-ink); }
.btn--send { justify-content: center; }

/* ---------- Latest articles ---------- */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.section-head h2 { margin: 0; }
.card-link { color: var(--vb-teal-ink); }
.news-grid { gap: 1.5rem; }
.news-card { border: 1px solid var(--vb-line); border-radius: var(--radius-lg); box-shadow: none; }
.news-card:hover { box-shadow: var(--shadow); }
.news-card-cat { color: var(--vb-teal-ink); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.news-card-title { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.32; }
.news-card-title a { color: var(--vb-ink); }
.news-card-title a:hover { color: var(--vb-teal-ink); }
.news-card-excerpt { color: var(--muted); font-size: 0.93rem; }

/* ---------- FAQ (plain: question h3, answer always visible) ---------- */
.faq--plain { margin-top: 2rem; border-bottom: 1px solid var(--border-strong); }
.faq--plain .faq-item { margin: 0; padding: 1.5rem 0; border-top: 1px solid var(--border-strong); }
.faq--plain .faq-item + .faq-item { margin-top: 0; padding-top: 1.5rem; }
.faq--plain .faq-item h3 { font-size: 1.1rem; font-weight: 600; color: var(--vb-ink); }
.faq--plain .faq-a p { color: var(--muted); margin: 0 0 0.6em; }
.faq--plain .faq-a p:last-child { margin-bottom: 0; }

/* ---------- Member of ---------- */
.members-band { padding: clamp(2.5rem, 5vw, 3.5rem) 0; text-align: center; }
.members-band .eyebrow { justify-content: center; }
.members-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; }
.members-list img { height: 64px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.3s ease, opacity 0.3s ease; }
.members-list a:hover img, .members-list img:hover { filter: none; opacity: 1; }

/* ---------- Newsletter ---------- */
.newsletter-section { background: var(--vb-ocean); }

/* ---------- Blog toolbar ---------- */
.blog-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat-pill { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border: 1px solid var(--vb-line); border-radius: 999px; font-size: 0.86rem; font-weight: 500; color: var(--vb-ink); background: #fff; }
.cat-pill:hover { border-color: var(--vb-ink); color: var(--vb-ink); }
.cat-pill.is-active { background: var(--vb-ink); border-color: var(--vb-ink); color: #fff; }
.news-search input { width: min(320px, 100%); padding: 0.7rem 1.1rem; border: 1px solid var(--vb-line); border-radius: 999px; background: var(--vb-mist); font: inherit; font-size: 0.92rem; color: var(--text); }
.news-search input:focus { outline: none; border-color: var(--vb-teal); box-shadow: 0 0 0 4px rgba(53,166,146,0.18); background: #fff; }

/* ---------- Long-form content ---------- */
.article-body h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); margin-top: 2.5rem; }
.article-body h3 { font-size: 1.2rem; margin-top: 1.75rem; }
.article-body a { color: var(--vb-teal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--vb-ink); }
.article-body table { font-variant-numeric: tabular-nums; }
.article-body th { background: var(--vb-mist); color: var(--vb-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--vb-ink); color: rgba(255,255,255,0.7); padding-top: clamp(3.5rem, 6vw, 5rem); }
.footer-col h3 { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vb-teal); margin-bottom: 1.1rem; }
.footer-col a, .footer-bottom-links a { color: rgba(255,255,255,0.72); }
.footer-col a:hover, .footer-bottom-links a:hover { color: #fff; }
.footer-brand p { color: rgba(255,255,255,0.72); max-width: 34ch; }
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-contact a { font-variant-numeric: tabular-nums; }
.footer-links-small { margin-top: 1.25rem !important; }
.footer-social-link:hover { color: #fff; border-color: var(--vb-teal); }
.footer-members { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-members-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.footer-members-list { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; }
.footer-members-list img { height: 48px; width: auto; background: #fff; border-radius: 8px; padding: 5px 9px; }

/* ---------- Responsive (design layer) ---------- */
@media (max-width: 1024px) {
  .reviews-grid { grid-auto-columns: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 900px) {
  .home-services-head, .ebook-layout, .why-layout, .feature-layout, .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .feature-layout--flip .feature-media { order: 0; }
  .ebook-media img { max-width: 230px; }
}
@media (max-width: 600px) {
  .reviews-grid { grid-auto-columns: 86%; }
  .why-points { grid-template-columns: minmax(0, 1fr); }
  .review-card { padding: 1.4rem; }
  .members-list img { height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .prog-card-media img, .prog-card:hover .prog-card-media img { transition: none; transform: none; }
}

/* ---------- CTA band (hubs, team) ---------- */
.cta-band p { color: rgba(255,255,255,0.78); max-width: 58ch; margin-left: auto; margin-right: auto; }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem !important; }

/* ---------- Contact office block ---------- */
.office-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vb-teal-ink); margin-bottom: 0.3rem; }
.office-addr { font-style: normal; color: var(--text); }

/* ---------- Form sent state ---------- */
.form-success-inner { text-align: center; padding: 2rem 1rem; }
.form-success-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(53,166,146,0.15); color: var(--vb-teal-ink); font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }

/* ---------- Blog archive ---------- */
.news-year { margin-top: 3rem; }
.yr-count { color: var(--muted); font-weight: 500; font-size: 0.9em; }
.news-search-empty { color: var(--muted); margin-top: 1rem; }

/* ---------- Footer contact details ---------- */
.footer-addr, .footer-hours, .footer-langs { color: rgba(255,255,255,0.72); line-height: 1.6; }
.footer-langs strong { color: #fff; font-weight: 600; }

/* ---------- Team page: founder feature + portrait grid ---------- */
.founder-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.founder-card { position: sticky; top: calc(var(--header-h) + 24px); display: block; border-radius: var(--radius-xl); overflow: hidden; color: #fff; background: var(--vb-mist); box-shadow: 0 40px 80px -40px rgba(6,24,53,0.45); isolation: isolate; }
.founder-photo { display: block; aspect-ratio: 4 / 5; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.8s var(--vb-ease); }
.founder-card:hover .founder-photo img { transform: scale(1.03); }
.founder-caption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: rgba(6,24,53,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.founder-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.founder-role { font-size: 0.88rem; color: var(--vb-mint); }
.founder-text .article-body > h2:first-child { margin-top: 0; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.founder-text .article-body p { font-size: 1.07rem; line-height: 1.75; }
.founder-cta { margin: 2rem 0 0; }

.team-section-title { margin-bottom: 2.25rem; }
.team-grid--portraits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.team-grid--portraits .team-card { display: flex; flex-direction: column; gap: 1rem; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; color: var(--text); }
.team-grid--portraits .team-card:hover { transform: none; box-shadow: none; }
.team-card-photo { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #E6EDF2; }
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.7s var(--vb-ease); }
.team-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,24,53,0.35)); opacity: 0; transition: opacity 0.4s ease; }
.team-card:hover .team-card-photo img { transform: scale(1.05); }
.team-card:hover .team-card-photo::after { opacity: 1; }
.team-card-initials { display: grid; place-items: center; height: 100%; font-size: 3rem; font-weight: 700; color: var(--vb-ocean); }
.team-card-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 0.2rem; }
.team-grid--portraits .team-card-name { padding: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.015em; color: var(--vb-ink); }
.team-grid--portraits .team-card-role { padding: 0; margin: 0; font-size: 0.9rem; color: var(--muted); }
.team-card-langs { font-size: 0.8rem; color: var(--muted); }
.team-card-link { margin-top: 0.45rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vb-teal-ink); }
.team-card:hover .team-card-name { color: var(--vb-teal-ink); }

@media (max-width: 1024px) {
  .team-grid--portraits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .founder-layout { grid-template-columns: minmax(0, 1fr); }
  .founder-card { position: relative; top: auto; max-width: 480px; }
  .team-grid--portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-photo img, .team-card-photo img { transition: none; }
  .founder-card:hover .founder-photo img, .team-card:hover .team-card-photo img { transform: none; }
}

/* ---------- Layer E: professional polish (testimonials, footer phone) ---------- */
.reviews { background: var(--vb-mist); }
.review-card { background: #fff; border: 1px solid var(--vb-line); }
.review-card blockquote { font-size: 1.02rem; font-weight: 500; color: var(--vb-ink); line-height: 1.62; }
.footer-contact a[href^="tel:"] { font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.footer-contact a[href^="mailto:"] { color: var(--vb-mint); }

/* ---------- Layer F: balanced homepage blocks ---------- */
/* Services on the homepage: text cards, three per row, equal height, no photos. */
.prog-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.prog-grid--home .prog-card-media { display: none; }
.prog-grid--home .prog-card-body { padding: 1.5rem 1.5rem 1.35rem; }

/* Reviews: masonry columns so each card is only as tall as its text, plus the Google score. */
.reviews-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; }
.reviews-head h2 { margin-bottom: 0; }
.reviews-score { display: inline-flex; align-items: center; gap: 1rem; padding: 0.9rem 1.35rem; background: #fff; border: 1px solid var(--vb-line); border-radius: var(--radius-lg); color: var(--vb-ink); text-decoration: none; }
a.reviews-score:hover { border-color: var(--vb-teal); color: var(--vb-ink); }
.reviews-score strong { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.reviews-score-meta { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.86rem; color: var(--muted); }
.reviews-score-stars { color: #E9A91E; letter-spacing: 0.1em; font-size: 1rem; }
.reviews-grid { display: block; columns: 3 290px; column-gap: 1.25rem; overflow: visible; margin-top: 2.25rem; padding: 0; }
.review-card { break-inside: avoid; margin: 0 0 1.25rem; padding: 1.5rem; gap: 0.8rem; }
.review-card blockquote { flex: none; }

/* Stand-in photos carry a visible tag until the real photo replaces them. */
.is-placeholder { position: relative; }
.placeholder-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 0.38rem 0.75rem; border-radius: 999px;
  background: rgba(6,24,53,0.8); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  pointer-events: none;
}

/* Long feature texts: the image stays in view beside the copy. */
.feature-layout { align-items: start; }
@media (min-width: 901px) {
  .feature-media { position: sticky; top: calc(var(--header-h) + 24px); }
}
.feature-media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* About: the real team as a 3 x 3 portrait mosaic on the brand's soft teal. */
.team-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.team-mosaic-cell { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #D8F0EA, #E6F1F7); }
.team-mosaic-cell img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; mix-blend-mode: multiply; transform: scale(1.25); transform-origin: 50% 30%; transition: transform 0.6s var(--vb-ease); }
.team-mosaic:hover .team-mosaic-cell img { transform: scale(1.3); }

@media (max-width: 900px) {
  .prog-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .prog-grid--home { grid-template-columns: minmax(0, 1fr); }
  .reviews-score strong { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .team-mosaic-cell img, .team-mosaic:hover .team-mosaic-cell img { transition: none; transform: scale(1.25); }
}

/* ---------- Layer G: quotation panel, profile pages, read more ---------- */
/* Quotation: navy column (heading, direct lines, named contact) + white form, or a stand-alone band. */
.quote-panel { display: grid; border-radius: var(--radius-xl); overflow: hidden; }
.quote-panel--form { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); background: #fff; border: 1px solid var(--vb-line); box-shadow: 0 30px 60px -35px rgba(6,24,53,0.35); }
.quote-panel--band,
.quote-panel--form .quote-panel-main {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(53,166,146,0.22), transparent 65%),
    var(--vb-grain),
    linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 75%);
  color: rgba(255,255,255,0.78);
}
.quote-panel--band { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: center; }
.quote-panel-main { display: flex; flex-direction: column; padding: clamp(2rem, 4.5vw, 3.25rem); }
.quote-panel-main h2 { color: #fff; margin-bottom: 0.75rem; }
.quote-panel-main p { color: rgba(255,255,255,0.76); margin: 0; max-width: 52ch; }
.quote-panel-main .eyebrow { align-self: flex-start; color: var(--vb-mint); padding: 0.42rem 0.9rem 0.42rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); }
.quote-lines { list-style: none; margin: 1.75rem 0; padding: 0; }
.quote-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid rgba(255,255,255,0.12); }
.quote-lines li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.quote-lines span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.quote-lines a { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote-lines a:hover { color: var(--vb-mint); }
.quote-person { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1.1rem 0.75rem 0.75rem; border-radius: 18px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); color: #fff; text-decoration: none; }
.quote-person:hover { border-color: rgba(125,220,200,0.45); color: #fff; }
.quote-person-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #D8F0EA, #E6F1F7); }
.quote-person-photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.5); transform-origin: 50% 32%; }
.quote-person-text { display: flex; flex-direction: column; gap: 0.1rem; }
.quote-person-text strong { font-weight: 700; }
.quote-person-text span { font-size: 0.82rem; color: var(--vb-mint); }
.quote-panel-form { padding: clamp(1.75rem, 4vw, 3rem); background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.quote-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.9rem; }
.quote-phone { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 5px; }
.quote-phone:hover { color: var(--vb-mint); }
.quote-panel-side { padding: clamp(0rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem) 0; display: flex; justify-content: center; }
.quote-panel-side .quote-person { flex-direction: column; text-align: center; gap: 0.8rem; padding: 1.5rem 1.75rem; margin: 0; }
.quote-panel-side .quote-person-photo { width: 104px; height: 104px; }

/* Profile pages. */
.profile-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.profile-photo { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; object-position: center 25%; background: #fff; border: 6px solid rgba(255,255,255,0.12); }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.4rem; color: rgba(255,255,255,0.76); font-size: 0.92rem; }
.profile-meta strong { color: #fff; font-weight: 600; }
.profile-linkedin { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; }
.profile-linkedin:hover { color: var(--vb-mint); }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.profile-layout--solo { grid-template-columns: minmax(0, 760px); }
.profile-body .article-body p { font-size: 1.05rem; line-height: 1.75; }
.profile-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.profile-aside .post-cta {
  padding: 1.75rem; border: 0; border-radius: var(--radius-lg);
  background: var(--vb-grain), linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 80%);
  color: rgba(255,255,255,0.78);
}
.profile-aside .post-cta .post-cta-title { color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
.profile-aside .post-cta p a { color: var(--vb-mint); }

/* Read more: the hidden part unfolds (grid rows 0fr to 1fr) with a fade over the last open line. */
.js .readmore-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s var(--vb-ease), opacity 0.5s ease; }
.js .readmore.is-open .readmore-body { grid-template-rows: 1fr; opacity: 1; }
.readmore-inner { overflow: hidden; min-height: 0; }
.js .readmore:not(.is-open)::before { content: ""; display: block; position: relative; height: 90px; margin-top: -90px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.readmore-toggle { display: none; }
.js .readmore-toggle { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; padding: 0.6rem 1.15rem; background: none; border: 1.5px solid var(--vb-line); border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--vb-ink); cursor: pointer; }
.js .readmore-toggle:hover { border-color: var(--vb-ink); }
.readmore-toggle svg { transition: transform 0.3s ease; }
.readmore.is-open .readmore-toggle svg { transform: rotate(180deg); }

@media (max-width: 900px) {
  .quote-panel--form, .quote-panel--band { grid-template-columns: minmax(0, 1fr); }
  .quote-panel-side { padding: 0 clamp(2rem, 4.5vw, 3.25rem) clamp(2rem, 4.5vw, 3.25rem); justify-content: flex-start; }
  .quote-panel-side .quote-person { flex-direction: row; text-align: left; padding: 0.75rem 1.1rem 0.75rem 0.75rem; }
  .quote-panel-side .quote-person-photo { width: 56px; height: 56px; }
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-aside { position: static; }
  .profile-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .profile-photo { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .readmore-body, .readmore-toggle svg { transition: none; }
}

/* ---------- Layer H: article quotation card (one visible copy per screen size) ---------- */
.post-cta {
  padding: 1.6rem; border: 0; border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(53,166,146,0.24), transparent 70%),
    var(--vb-grain),
    linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 80%);
  color: rgba(255,255,255,0.78);
}
.post-cta .eyebrow { color: var(--vb-mint); padding: 0.38rem 0.8rem 0.38rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); margin-bottom: 0.9rem; font-size: 0.68rem; }
.post-cta .post-cta-title { color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 0.5rem; }
.post-cta p { color: rgba(255,255,255,0.74); }
.post-cta .quote-person { margin-top: 1.1rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; }
.post-cta .quote-person-photo { width: 46px; height: 46px; }
.post-cta .post-share { border-top-color: rgba(255,255,255,0.14); }
.post-cta .post-share-label { color: rgba(255,255,255,0.6); }
.post-cta .post-share-link { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.2); background: transparent; }
.post-cta .post-share-link:hover { color: #fff; border-color: var(--vb-teal); }
.post-cta--end { margin-top: 2.5rem; max-width: 640px; }
@media (max-width: 1023px) {
  .post-cta--aside { display: none; }
}
@media (min-width: 1024px) {
  .post-layout:not(.post-layout--solo) .post-cta--end { display: none; }
}

/* ---------- Layer I: full width (edge to edge with proportional gutters, capped at 1760px) ---------- */
:root { --container: 1760px; --gutter: clamp(1.25rem, 4vw, 4.5rem); }
.container { padding-left: var(--gutter); padding-right: var(--gutter); }
.header-inner { max-width: calc(var(--container) - 2 * var(--gutter) + 2.7rem); }
.container--narrow { max-width: calc(860px + 2 * var(--gutter)); }
/* Reading text keeps a comfortable measure however wide the page gets. */
.article-body, .page-body { max-width: 78ch; }
.feature-text, .home-intro { max-width: 68ch; }
.hero--light .hero-lead { max-width: 56ch; }

/* Fee cards: name, one-line explanation, then the price at the foot of the card. */
.fee-card { justify-content: flex-start; gap: 0.55rem; }
.fee-card-text { font-size: 0.86rem; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fee-card-amt { margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed var(--vb-line); }

/* Full width, below the fold: articles get a centred reading column, three-article rows stay three. */
@media (min-width: 1024px) {
  .post-layout { grid-template-columns: minmax(0, 820px) 280px; justify-content: center; gap: 5rem; }
}
@media (min-width: 900px) {
  .news-grid:not(.news-reveal) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.news-grid.news-reveal { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.quote-panel-main p { max-width: 60ch; }

/* ---------- Layer J: About statement, big type with teal highlights that sweep in ---------- */
.about-band h2.about-statement {
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.032em;
  max-width: 22ch;
  margin: 0.4rem 0 0;
  color: var(--vb-ink);
}
.hl {
  color: var(--vb-teal-ink);
  background-image: linear-gradient(transparent 60%, rgba(53,166,146,0.26) 60%, rgba(53,166,146,0.26) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size 1.1s var(--vb-ease) 0.15s, color 0.6s ease 0.15s;
}
/* With JS the marker starts empty and draws in when the section scrolls into view;
   without JS (or before the script runs) the highlight is simply there. */
.js [data-reveal] .hl { background-size: 0% 100%; color: var(--vb-ink); }
.js [data-reveal].is-in .hl { background-size: 100% 100%; color: var(--vb-teal-ink); }
.js [data-reveal].is-in .hl + .hl,
.js [data-reveal].is-in .hl ~ .hl { transition-delay: 0.65s; }
.about-band .feature-cta { margin-top: 2.25rem; }
@media (prefers-reduced-motion: reduce) {
  .hl, .js [data-reveal] .hl { transition: none; background-size: 100% 100%; color: var(--vb-teal-ink); }
}

/* ---------- Layer K: hero staff carousel + twinkling dot field ---------- */
/* Dots: 8 x 11 real dots; the script fades random ones out and back in, one at a time. */
.hero-portrait-dots {
  background: none; opacity: 1;
  display: grid; grid-template-columns: repeat(8, 16px); grid-auto-rows: 16px;
  width: 128px; height: 176px;
}
.hero-portrait-dots i {
  width: 3.5px; height: 3.5px; border-radius: 50%;
  background: var(--vb-teal); opacity: 0.55;
  justify-self: center; align-self: center;
  transition: opacity 1.8s ease, transform 1.8s ease;
}
.hero-portrait-dots i.off { opacity: 0; transform: scale(0.2); }

/* Slides: every portrait sits in the arch; the active one fades in with a slow drift. */
.hero-portrait-arch img.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(1.08); transform-origin: 50% 70%;
  transition: opacity 1.1s ease, transform 7s linear;
}
.hero-portrait-arch img.hero-slide.is-active { opacity: 1; transform: scale(1.12); }

/* Name card: text slides up into place on every change, a thin bar shows the time left. */
.hero-portrait-card { min-width: 230px; max-width: calc(100% - 20px); }
.hero-portrait-card .hp-name, .hero-portrait-card .hp-role {
  display: block;
  transition: opacity 0.35s ease, transform 0.5s var(--vb-ease);
}
.hero-portrait-card .hp-role { transition-delay: 0.06s; }
.hero-portrait-card.is-swapping .hp-name,
.hero-portrait-card.is-swapping .hp-role { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.hp-progress { display: block; height: 2px; margin-top: 0.7rem; border-radius: 2px; background: var(--vb-line); overflow: hidden; }
.hp-progress i { display: block; height: 100%; background: var(--vb-teal); transform: scaleX(0); transform-origin: left center; }
.hero-portrait-card.is-running .hp-progress i { animation: hpBar var(--hp-dur, 5200ms) linear forwards; }
.hero-portrait.is-paused .hp-progress i { animation-play-state: paused; }
@keyframes hpBar { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-portrait-arch img.hero-slide { transition: none; transform: scale(1.1); }
  .hero-portrait-dots i { transition: none; }
  .hp-progress { display: none; }
}

/* ---------- Layer L: quiet hovers (no accent bars or coloured borders, just lift + soft shadow) ---------- */
.prog-card::before, .cs-card::before { content: none; display: none; }
.prog-card:hover,
.fee-card:hover,
a.reviews-score:hover { border-color: var(--border-strong); }
.fee-card:hover { box-shadow: 0 16px 32px -20px rgba(6,24,53,0.28); }

/* ---------- Layer M: two mega-menus (Start your business / Run your business) ---------- */
.megamenu-intro-title { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; color: var(--vb-ink); }
.megamenu-lead { margin: 0; font-size: 0.87rem; line-height: 1.5; color: var(--muted); }
.main-nav .megamenu a.megamenu-all { display: inline-block; margin-top: auto; padding: 0; font-size: 0.84rem; font-weight: 600; color: var(--vb-teal-ink); background: none; border-radius: 0; }
.main-nav .megamenu a.megamenu-all:hover { color: var(--vb-ink); background: none; }
.megamenu-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 0.5rem; align-content: start; }
.main-nav .megamenu a.mm-item { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.75rem 0.9rem; border-radius: 12px; }
.main-nav .megamenu a.mm-item:hover { background: var(--vb-mist); }
.mm-name { font-size: 0.94rem; font-weight: 600; color: var(--vb-ink); line-height: 1.3; }
.mm-price { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 861px) {
  .megamenu.megamenu--cat {
    grid-template-columns: 250px minmax(0, 1fr); gap: 1.25rem;
    width: min(780px, calc(100vw - 2rem)); min-width: 0; padding: 1rem;
  }
  .megamenu-intro { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.35rem; border-radius: 18px; background: var(--vb-mist); }
}
@media (max-width: 860px) {
  .megamenu.megamenu--cat { grid-template-columns: minmax(0, 1fr); padding: 0 0 0.6rem 0.75rem; }
  .megamenu-intro-title, .megamenu-lead { display: none; }
  .megamenu-intro { order: 2; padding: 0.4rem 0 0; }
  .megamenu-links { grid-template-columns: minmax(0, 1fr); }
  .main-nav .megamenu a.mm-item { padding: 0.6rem 0; border-radius: 0; }
  .main-nav .megamenu a.mm-item:hover { background: none; }
}

/* ---------- Layer N: smart search (nav pill + command palette) ---------- */
.search-trigger {
  display: inline-flex; align-items: center; gap: 0.55rem;
  height: 42px; padding: 0 0.6rem 0 0.95rem; margin-left: 0.25rem;
  border: 1px solid var(--vb-line); border-radius: 999px;
  background: rgba(242,246,249,0.85); color: var(--muted);
  font: inherit; font-size: 0.9rem; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.search-trigger:hover { background: #fff; color: var(--vb-ink); border-color: var(--border-strong); }
.search-trigger-kbd, .search-foot kbd, .search-esc {
  font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1;
  padding: 0.3rem 0.45rem; border-radius: 6px;
  background: #fff; border: 1px solid var(--vb-line); color: var(--muted);
}
@media (max-width: 1180px) { .search-trigger-label { display: none; } }
@media (max-width: 860px) {
  .search-trigger { order: 2; margin-left: auto; margin-right: 0.35rem; width: 42px; padding: 0; justify-content: center; }
  .search-trigger-kbd { display: none; }
}

/* Palette */
.search-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(10vh, 72px) 16px 16px;
  background: rgba(6,24,53,0.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-lock, .search-lock body { overflow: hidden; }
.search-panel {
  width: min(680px, 100%); max-height: min(640px, 80vh);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(6,24,53,0.55), 0 0 0 1px rgba(6,24,53,0.06);
  transform: translateY(8px) scale(0.985);
  transition: transform 0.25s var(--vb-ease);
}
.search-overlay.is-open .search-panel { transform: none; }
.search-field { display: flex; align-items: center; gap: 0.75rem; padding: 0 1.1rem; border-bottom: 1px solid var(--vb-line); color: var(--muted); }
.search-field input {
  flex: 1; min-width: 0; height: 64px; border: 0; outline: 0; background: none;
  font: inherit; font-size: 1.12rem; color: var(--vb-ink);
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-esc { cursor: pointer; }
.search-results { overflow-y: auto; padding: 0.4rem 0.6rem 0.8rem; overscroll-behavior: contain; }
.search-group { margin: 0.9rem 0.6rem 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.search-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem; border-radius: 12px; color: var(--vb-ink); text-decoration: none; }
.search-item.is-active { background: var(--vb-mist); color: var(--vb-ink); }
.search-item-title { font-weight: 600; font-size: 0.97rem; line-height: 1.35; }
.search-item-meta { font-size: 0.83rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-item-meta b { font-weight: 600; color: var(--vb-teal-ink); margin-right: 0.45rem; }
.search-item mark { background: rgba(53,166,146,0.2); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 2rem 1rem 1.5rem; text-align: center; color: var(--muted); }
.search-empty .btn { margin-top: 0.6rem; }
.search-foot { display: flex; gap: 1.25rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--vb-line); background: var(--vb-mist); font-size: 0.78rem; color: var(--muted); }
.search-foot kbd { margin-right: 0.2rem; }
@media (max-width: 600px) {
  .search-overlay { padding-top: 12px; }
  .search-panel { max-height: calc(100vh - 24px); border-radius: 18px; }
  .search-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-panel { transition: none; }
}

/* ---------- Layer O: softer mega-menu + article money box ---------- */
/* Mega-menu: a short hover intent before it opens, then a gentle fade + rise; closes a touch later
   so crossing the gap never makes it blink. The rows follow the panel with a slight delay. */
@media (min-width: 861px) {
  .megamenu {
    transform: translateX(-50%) translateY(12px) scale(0.985);
    transform-origin: 50% 0;
    transition: opacity 0.28s ease, transform 0.38s var(--vb-ease), visibility 0s linear 0.38s;
    transition-delay: 0.12s, 0.12s, 0.5s;
  }
  .has-megamenu:hover > .megamenu,
  .has-megamenu:focus-within > .megamenu {
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 0.08s, 0.08s, 0s;
  }
  .megamenu-intro, .megamenu-links .mm-item {
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.4s var(--vb-ease);
  }
  .has-megamenu:hover > .megamenu .megamenu-intro,
  .has-megamenu:hover > .megamenu .mm-item,
  .has-megamenu:focus-within > .megamenu .megamenu-intro,
  .has-megamenu:focus-within > .megamenu .mm-item { opacity: 1; transform: none; }
  .has-megamenu:hover > .megamenu .megamenu-intro { transition-delay: 0.12s; }
  .has-megamenu:hover > .megamenu .mm-item { transition-delay: 0.16s; }
  .has-megamenu:hover > .megamenu .mm-item:nth-child(n+3) { transition-delay: 0.2s; }
  .has-megamenu:hover > .megamenu .mm-item:nth-child(n+5) { transition-delay: 0.24s; }
}
@media (prefers-reduced-motion: reduce) {
  .megamenu, .megamenu-intro, .megamenu-links .mm-item { transition: none !important; transform: none !important; }
}

/* Article money box: the service this guide feeds, at the end of the article. */
.money-box {
  margin: 2.75rem 0 0; padding: 1.6rem 1.75rem;
  border: 1px solid var(--vb-line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, var(--vb-mist));
}
.money-box .eyebrow { margin-bottom: 0.6rem; }
.money-box-title { margin: 0 0 0.4rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.money-box-title a { color: var(--vb-ink); text-decoration: none; }
.money-box-text { margin: 0; color: var(--muted); max-width: 60ch; }
.money-box-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.money-box-price { color: var(--muted); font-size: 0.9rem; }
.money-box-price strong { color: var(--vb-ink); font-size: 1.1rem; font-variant-numeric: tabular-nums; margin-left: 0.2rem; }
/* Auto-inserted money links read like any other link in the article. */
.article-body a.money-link { color: var(--vb-teal-ink); }

/* ---------- Layer P: Bangkok photo bands (parallax) between homepage sections ---------- */
.photo-band {
  position: relative;
  height: clamp(220px, 32vw, 460px);
  background-image: var(--band-img);
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
  background-color: var(--vb-ink);
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,24,53,0.10), rgba(6,24,53,0) 35%, rgba(6,24,53,0) 65%, rgba(6,24,53,0.14));
}
/* Touch devices (iOS ignores fixed backgrounds) and reduced motion: a still photo instead. */
@media (hover: none), (max-width: 860px), (prefers-reduced-motion: reduce) {
  .photo-band { background-attachment: scroll; height: clamp(180px, 46vw, 300px); }
}

/* ---------- Layer Q: About mosaic, six rotating portraits ---------- */
.team-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-mosaic-cell { position: relative; }
.team-mosaic-cell img { position: absolute; inset: 0; transition: transform 0.6s var(--vb-ease), opacity 1s ease; }
.team-mosaic-cell img.is-entering { opacity: 0; }
.team-mosaic-cell img.is-entering.is-in { opacity: 1; }
.team-mosaic-name {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
  padding: 0.3rem 0.55rem; border-radius: 8px;
  background: rgba(255,255,255,0.88); color: var(--vb-ink);
  font-size: 0.72rem; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.35s var(--vb-ease);
}
.team-mosaic:hover .team-mosaic-name { opacity: 1; transform: none; }
.team-mosaic-name.is-swapping { opacity: 0 !important; }
@media (hover: none) { .team-mosaic-name { opacity: 1; transform: none; } }

/* ---------- Layer R: teal highlight sweep (hero headline + About statement) ---------- */
.hl {
  color: var(--vb-teal-ink);
  background-image: linear-gradient(transparent 60%, rgba(53,166,146,0.26) 60%, rgba(53,166,146,0.26) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size 1.1s var(--vb-ease) 0.15s, color 0.6s ease 0.15s;
}
.js [data-reveal] .hl { background-size: 0% 100%; color: inherit; }
.js [data-reveal].is-in .hl { background-size: 100% 100%; color: var(--vb-teal-ink); }
/* In the hero the sweep waits for the headline to settle in first. */
.js .hero-title.is-in .hl { transition-delay: 0.55s, 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .hl, .js [data-reveal] .hl { transition: none; background-size: 100% 100%; color: var(--vb-teal-ink); }
}

/* ---------- Layer S: brand dot field (small squares, teal + ocean blue), used sparingly ---------- */
.dot-field {
  display: grid;
  grid-template-columns: repeat(var(--dot-cols, 8), 16px);
  grid-auto-rows: 16px;
  pointer-events: none;
}
.dot-field i,
.hero-portrait-dots.dot-field i {
  width: 4px; height: 4px; border-radius: 1px;
  background: var(--vb-teal); opacity: 0.55;
  justify-self: center; align-self: center;
  transition: opacity 1.8s ease, transform 1.8s ease;
}
.dot-field i.b,
.hero-portrait-dots.dot-field i.b { background: var(--vb-ocean); opacity: 0.45; }
.dot-field i.off,
.hero-portrait-dots.dot-field i.off { opacity: 0; transform: scale(0.2) rotate(45deg); }

/* About photos: a field tucked behind the bottom-left corner of the mosaic. */
.team-mosaic { position: relative; isolation: isolate; }
.dot-field--mosaic { position: absolute; left: -30px; bottom: -30px; z-index: -1; }

/* Quotation panels (navy): top-right corner, lighter blue so it reads on the dark ground. */
.quote-panel-main { position: relative; }
.dot-field--panel { position: absolute; top: 22px; right: 22px; opacity: 0.7; }
.dot-field--panel i { background: var(--vb-teal); opacity: 0.5; }
.dot-field--panel i.b { background: #7FB2D3; opacity: 0.4; }
@media (max-width: 600px) { .dot-field--panel { display: none; } .dot-field--mosaic { left: -14px; bottom: -18px; } }
@media (prefers-reduced-motion: reduce) { .dot-field i { transition: none; } }

/* ---------- Layer T: section scroll snapping (desktop mouse only) ---------- */
/* Every wheel scroll settles on the start of a section, just under the floating menu.
   Homepage: mandatory (designed blocks). Other pages: proximity, so long articles and
   service pages still read freely and only snap when you stop near a section edge.
   Sections taller than the screen scroll normally inside (browsers allow free scrolling
   within an oversized snap area). Touch screens keep natural scrolling. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  html { scroll-snap-type: y proximity; scroll-padding-top: var(--header-h); }
  html:has(> body.is-home) { scroll-snap-type: y mandatory; }
  main > section { scroll-snap-align: start; }
  .site-footer { scroll-snap-align: end; }
}

/* ---------- Layer U: hero subtitle (first line of the hero text), a step below the H1 ---------- */
.hero--light .hero-subtitle {
  margin: 1.35rem 0 0;
  max-width: 40ch;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--vb-deep);
}
.hero--light .hero-subtitle + .hero-lead { margin-top: 0.8rem; }

/* ---------- Layer V: service pages (the money pages) ---------- */
/* Hero: text left, the live page's facts (Cost / Investment / Process Time) as a glass card right. */
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.svc-hero-text h1 { max-width: 20ch; }
.svc-hero-text .hero-lead { max-width: 58ch; }
.svc-facts {
  display: flex; flex-direction: column;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.svc-fact { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 0; }
.svc-fact + .svc-fact { border-top: 1px solid rgba(255,255,255,0.12); }
.svc-fact-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vb-mint); }
.svc-fact-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: #fff; font-variant-numeric: tabular-nums; }

/* Intro: remaining opening text + highlights, photo at a sensible size. */
.svc-intro-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.svc-intro-grid--solo { grid-template-columns: minmax(0, 1fr); }
.svc-intro-media { margin: 0; justify-self: end; width: min(100%, 460px); }
.svc-intro-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 30px 60px -35px rgba(6,24,53,0.4); }
.svc-highlights { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.svc-highlights li {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.05rem; border-radius: 999px;
  background: var(--vb-mist); border: 1px solid var(--vb-line);
  font-weight: 600; font-size: 0.93rem; color: var(--vb-ink);
}
.svc-highlights li::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--vb-teal); flex: none; }

/* Sections: title, then prose at reading width; cards, checklists and price boxes can go wider. */
.svc-section-title { max-width: 28ch; margin-bottom: 1.5rem; }
.svc-section .svc-section-body { max-width: 1100px; }
.svc-section-body > p, .svc-section-body > h3, .svc-section-body > h4, .svc-section-body > ol, .svc-section-body > ul:not(.svc-checklist--grid) { max-width: 78ch; }
.svc-section-body > h3 { margin-top: 2rem; }
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2rem; }
.svc-card { padding: 1.5rem 1.6rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--vb-line); }
.svc-section:not(.section--light) .svc-card { background: var(--vb-mist); border-color: transparent; }
.svc-card h3 { margin: 0 0 0.55rem; font-size: 1.08rem; }
.svc-card p { margin: 0; font-size: 0.97rem; color: var(--muted); line-height: 1.6; }
.svc-card p + p { margin-top: 0.5rem; }
.svc-checklist { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.svc-checklist li { position: relative; padding-left: 1.5rem; margin: 0.55rem 0; }
.svc-checklist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 1px; background: var(--vb-teal); }
.svc-checklist--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 2.5rem; max-width: 900px; }
.svc-price {
  max-width: 460px; margin: 1.5rem 0 2rem; padding: 1.75rem 1.9rem;
  border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--vb-line);
  box-shadow: 0 24px 50px -34px rgba(6,24,53,0.35);
}
.svc-price p { margin: 0; }
.svc-price-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vb-teal-ink); }
.svc-price-from { margin-top: 0.9rem !important; font-size: 0.85rem; color: var(--muted); }
.svc-price-amount { font-size: 2.3rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.svc-price-lines { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--vb-line); }
.svc-price-lines li { position: relative; padding-left: 1.25rem; margin: 0.4rem 0; font-size: 0.9rem; color: var(--muted); }
.svc-price-lines li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 1px; background: var(--vb-teal); }

/* The live page's call-to-action box, as a navy band. */
.svc-cta-section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.svc-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(53,166,146,0.24), transparent 65%),
    var(--vb-grain),
    linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 75%);
  color: rgba(255,255,255,0.78);
}
.svc-cta h2 { color: #fff; margin: 0 0 0.4rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.svc-cta p { margin: 0; color: rgba(255,255,255,0.78); }

@media (max-width: 900px) {
  .svc-hero-grid, .svc-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-facts { max-width: 460px; }
  .svc-intro-media { justify-self: start; width: min(100%, 400px); }
  .svc-checklist--grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Layer W: photo bands, soft brand overlay + scroll parallax ---------- */
.photo-band {
  position: relative; overflow: hidden;
  height: clamp(220px, 30vw, 440px);
  background: var(--vb-ink);
  background-image: none;
  background-attachment: scroll;
}
.photo-band-img {
  position: absolute; left: 0; right: 0; top: -18%; bottom: -18%;
  background-size: cover; background-position: center;
  transform: translate3d(0, 0, 0); will-change: transform;
}
/* Overlay: an ocean-to-ink tint that softens the photo, plus fades into the light sections around it. */
.photo-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,246,249,0.55) 0%, rgba(242,246,249,0) 18%, rgba(242,246,249,0) 82%, rgba(242,246,249,0.55) 100%),
    linear-gradient(120deg, rgba(15,65,96,0.38), rgba(6,24,53,0.18) 55%, rgba(53,166,146,0.16));
}
@media (max-width: 860px) {
  .photo-band { height: clamp(180px, 46vw, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-band-img { top: 0; bottom: 0; transform: none !important; }
}

/* ---------- Layer X: "New" tax-calculator button + the 2026 calculator page ---------- */
.calc-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 42px; padding: 0 1rem 0 0.45rem; margin-left: 0.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(53,166,146,0.16), rgba(15,65,96,0.07));
  border: 1px solid rgba(53,166,146,0.38);
  color: var(--vb-ink); font-weight: 600; font-size: 0.88rem; white-space: nowrap; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.calc-trigger:hover, .calc-trigger.is-active { background: rgba(53,166,146,0.22); border-color: var(--vb-teal); color: var(--vb-ink); }
.calc-trigger-badge {
  position: relative; display: inline-block;
  padding: 0.28rem 0.5rem; border-radius: 999px;
  background: var(--vb-teal); color: var(--vb-ink);
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
}
.calc-trigger .calc-trigger-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(53,166,146,0.55);
  animation: calcPulse 2.6s ease-out infinite;
}
@keyframes calcPulse { 0% { box-shadow: 0 0 0 0 rgba(53,166,146,0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(53,166,146,0); } }
.calc-trigger-short { display: none; }
@media (max-width: 1320px) { .calc-trigger-label { display: none; } .calc-trigger-short { display: inline; } }
@media (max-width: 860px) {
  .calc-trigger { display: none; }
  .main-nav a.nav-calc { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .calc-trigger .calc-trigger-badge::after { animation: none; } }

/* Page */
.taxcalc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.taxcalc-form { display: grid; gap: 1.1rem; }
.taxcalc-group { margin: 0; padding: 1.4rem 1.5rem 1.2rem; border: 0; border-radius: var(--radius-lg); background: var(--vb-mist); min-width: 0; }
.taxcalc-group legend { float: left; width: 100%; padding: 0; margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: var(--vb-ink); }
.taxcalc-group legend + * { clear: both; }
.taxcalc-field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.taxcalc-field > span:first-child { font-size: 0.9rem; font-weight: 600; color: var(--vb-ink); }
.taxcalc-field small { font-weight: 500; color: var(--muted); margin-left: 0.3rem; }
.taxcalc-money { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.95rem; background: #fff; border: 1px solid var(--vb-line); border-radius: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.taxcalc-money:focus-within { border-color: var(--vb-teal); box-shadow: 0 0 0 4px rgba(53,166,146,0.16); }
.taxcalc-money input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font: inherit; font-size: 1.08rem; font-weight: 600; color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.taxcalc-money em { font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.taxcalc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1rem; background: #fff; border: 1px solid var(--vb-line); border-radius: 12px; }
.taxcalc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.taxcalc-seg span { display: block; padding: 0.6rem 0.5rem; border-radius: 9px; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.taxcalc-seg input:checked + span { background: var(--vb-ink); color: #fff; }
.taxcalc-seg input:focus-visible + span { outline: 3px solid var(--vb-teal); outline-offset: 2px; }
.taxcalc-switch { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; cursor: pointer; font-weight: 600; font-size: 0.93rem; color: var(--vb-ink); }
.taxcalc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.taxcalc-switch-ui { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border-strong); transition: background 0.2s ease; }
.taxcalc-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(6,24,53,0.25); transition: transform 0.25s var(--vb-ease); }
.taxcalc-switch input:checked + .taxcalc-switch-ui { background: var(--vb-teal); }
.taxcalc-switch input:checked + .taxcalc-switch-ui::after { transform: translateX(18px); }
.taxcalc-switch input:focus-visible + .taxcalc-switch-ui { outline: 3px solid var(--vb-teal); outline-offset: 2px; }
.taxcalc-stepper-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0; font-weight: 600; font-size: 0.93rem; color: var(--vb-ink); }
.taxcalc-stepper { display: inline-flex; align-items: center; flex: none; background: #fff; border: 1px solid var(--vb-line); border-radius: 999px; }
.taxcalc-stepper button { width: 38px; height: 38px; border: 0; background: none; font-size: 1.15rem; color: var(--vb-ink); cursor: pointer; border-radius: 50%; }
.taxcalc-stepper button:hover { background: var(--vb-mist); }
.taxcalc-stepper input { width: 40px; border: 0; outline: 0; background: none; text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.taxcalc-reset { justify-self: start; border: 0; background: none; padding: 0.3rem 0; font: inherit; font-size: 0.88rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.taxcalc-result { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 1rem; }
.taxcalc-card {
  padding: 1.75rem; border-radius: 24px; color: rgba(255,255,255,0.78);
  background: radial-gradient(70% 60% at 100% 0%, rgba(53,166,146,0.26), transparent 70%), var(--vb-grain), linear-gradient(160deg, var(--vb-ocean), var(--vb-ink) 80%);
}
.taxcalc-card .eyebrow { margin-bottom: 1rem; }
.taxcalc-card p { margin: 0; }
.taxcalc-due-label { font-size: 0.88rem; color: rgba(255,255,255,0.7); }
.taxcalc-due strong { font-size: clamp(2.4rem, 5vw, 3.3rem); font-weight: 700; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.taxcalc-due small { font-size: 0.9rem; font-weight: 600; color: var(--vb-mint); }
.taxcalc-month { margin-top: 0.2rem !important; font-size: 0.88rem; }
.taxcalc-month strong { color: var(--vb-mint); }
.taxcalc-meter { height: 6px; margin: 1rem 0 0.4rem; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.taxcalc-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--vb-teal), #7FB2D3); transition: width 0.5s var(--vb-ease); }
.taxcalc-rows { margin: 1rem 0 0; }
.taxcalc-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.92rem; }
.taxcalc-rows dt { color: rgba(255,255,255,0.7); }
.taxcalc-rows dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.taxcalc-rows .is-total dd { color: var(--vb-mint); font-weight: 700; }
.taxcalc-brackets-title { margin-top: 1.1rem !important; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vb-mint); }
.taxcalc-brackets { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.taxcalc-brackets li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 0.8fr) auto; gap: 0.6rem; align-items: center; font-size: 0.8rem; }
.tb-label { color: rgba(255,255,255,0.72); }
.tb-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.tb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--vb-teal); transition: width 0.45s var(--vb-ease); }
.tb-tax { min-width: 70px; text-align: right; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.taxcalc-sample { padding: 1rem 1.2rem; border-radius: 16px; background: #FFF6E5; border: 1px solid #F1D8A6; }
.taxcalc-sample strong { display: block; color: var(--vb-ink); font-size: 0.9rem; }
.taxcalc-sample p { margin: 0.3rem 0 0; font-size: 0.86rem; line-height: 1.5; color: #5d5140; }
.taxcalc-cta { padding: 1.4rem 1.5rem; border-radius: 20px; background: #fff; border: 1px solid var(--vb-line); }
.taxcalc-cta-title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; color: var(--vb-ink); }
.taxcalc-cta p { margin: 0 0 1rem; color: var(--muted); font-size: 0.93rem; }
.taxcalc-sticky { display: none; }
@media (max-width: 900px) {
  .taxcalc { grid-template-columns: minmax(0, 1fr); }
  .taxcalc-result { position: static; }
  .taxcalc-sticky {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90;
    padding: 0.85rem 1.1rem; border-radius: 16px;
    background: var(--vb-ink); color: rgba(255,255,255,0.8); font-size: 0.88rem;
    box-shadow: 0 16px 40px -16px rgba(6,24,53,0.6);
    transform: translateY(160%); transition: transform 0.3s var(--vb-ease); cursor: pointer;
  }
  .taxcalc-sticky strong { color: #fff; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
  .taxcalc-sticky.is-on { transform: none; }
}

/* ---------- Layer Y: white text on every teal-filled element (user preference: cleaner, easier to read) ---------- */
.btn--primary, .btn--primary:hover, .btn--primary:focus,
.section--navy .btn--primary, .section--navy .btn--primary:hover,
.calc-trigger-badge,
.fee-card:hover .fee-card-go,
.bento-tile:hover .bento-go { color: #fff; }
.btn--primary { text-shadow: 0 1px 1px rgba(6,24,53,0.18); }

/* ---------- Layer Z: "Read more" is a plain text link (distinct from the "View full profile" button) ---------- */
.js .readmore-toggle {
  padding: 0.2rem 0; margin-top: 0.6rem;
  border: 0; border-radius: 0; background: none;
  color: var(--vb-teal-ink); font-weight: 600; font-size: 0.95rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.js .readmore-toggle:hover { border: 0; color: var(--vb-ink); }

/* ---------- Layer AA: WhatsApp button in the menu bar (before the language switcher) ---------- */
.wa-trigger {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; margin-left: 0.35rem;
  border-radius: 50%;
  background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.3);
  color: #1FAF54;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wa-trigger:hover, .wa-trigger:focus-visible { background: #25D366; border-color: #25D366; color: #fff; transform: translateY(-1px); }
@media (max-width: 860px) {
  .wa-trigger { order: 2; margin-left: 0; margin-right: 0.35rem; }
}

/* ---------- Layer BB: PageSpeed fixes ---------- */
.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; }
/* The hero is the largest paint: it slides in without fading from transparent (opacity 0 delays LCP). */
@keyframes vbRiseSoft { from { transform: translateY(14px); } to { transform: none; } }
.hero-home-inner > *, .hero-portrait, .hero-fees-grid li { animation-name: vbRiseSoft; }
/* NEW badge pulse on a compositor-friendly layer (transform + opacity instead of box-shadow). */
.calc-trigger .calc-trigger-badge::after {
  box-shadow: none; border: 2px solid rgba(53,166,146,0.55);
  animation: calcPulseRing 2.6s ease-out infinite;
}
@keyframes calcPulseRing { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .calc-trigger .calc-trigger-badge::after { animation: none; opacity: 0; } }

/* ---------- Layer CC: calculator deductions two per row + PIT estimate lead form ---------- */
.taxcalc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.taxcalc-pair .taxcalc-field > span:first-child { min-height: 2.6em; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 0.3rem; line-height: 1.3; }
.taxcalc-pair .taxcalc-field small { margin-left: 0; }
@media (max-width: 520px) {
  .taxcalc-pair { grid-template-columns: minmax(0, 1fr); }
  .taxcalc-pair .taxcalc-field > span:first-child { min-height: 0; }
}
.taxcalc-cta .btn { width: 100%; justify-content: center; }
.taxcalc-cta-link { display: inline-block; margin-top: 0.8rem; font-size: 0.86rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.taxcalc-cta-link:hover { color: var(--vb-ink); }

.taxcalc-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.taxcalc-modal[hidden] { display: none; }
.taxcalc-modal-backdrop { position: absolute; inset: 0; background: rgba(6,24,53,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.22s ease; }
.taxcalc-modal-dialog {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: 24px; border: 0; background: #fff;
  box-shadow: 0 40px 90px -30px rgba(6,24,53,0.55);
  opacity: 0; transform: translateY(12px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.28s var(--vb-ease);
}
.taxcalc-modal.is-open .taxcalc-modal-backdrop { opacity: 1; }
.taxcalc-modal.is-open .taxcalc-modal-dialog { opacity: 1; transform: none; }
.taxcalc-modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--vb-mist); font-size: 1.4rem; line-height: 1; color: var(--vb-ink); cursor: pointer; }
.taxcalc-modal-close:hover { background: var(--vb-line); }
.taxcalc-modal-eyebrow { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vb-teal-ink); }
.taxcalc-modal-dialog h2 { margin: 0 2.5rem 0.5rem 0; font-size: clamp(1.4rem, 3vw, 1.75rem); }
.taxcalc-modal-intro { margin: 0 0 1.1rem; color: var(--muted); font-size: 0.94rem; }
.taxcalc-modal-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--vb-mist); }
.taxcalc-modal-summary span { font-size: 0.86rem; color: var(--muted); }
.taxcalc-modal-summary strong { font-size: 1.25rem; font-weight: 700; color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.taxcalc-modal .btn--send { width: 100%; justify-content: center; }
@media (max-width: 600px) {
  .taxcalc-modal { align-items: flex-end; padding: 0; }
  .taxcalc-modal-dialog { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .taxcalc-modal-backdrop, .taxcalc-modal-dialog { transition: none; } }

/* ---------- Layer DD: WhatsApp button snug against the language switcher (desktop) ---------- */
@media (min-width: 861px) {
  .wa-trigger { margin-right: -1.05rem; }
}

/* ---------- Layer EE: menu bar grouping (desktop) ---------- */
/* space-between spread the free width between EVERY item, so WhatsApp floated away from the
   language switcher. Instead: logo left, then the menu pushed right with its buttons grouped,
   and WhatsApp + language as a tight pair at the end. */
@media (min-width: 861px) {
  .header-inner { justify-content: flex-start; gap: 0.75rem; }
  .main-nav { margin-left: auto; margin-right: 0.5rem; }
  .wa-trigger { margin-left: 0.25rem; margin-right: -0.4rem; }
}

/* ---------- Layer FF: Google reviews strip under the hero (infinite carousel) ---------- */
.hero-reviews { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.hero-reviews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; margin-bottom: 0.9rem; }
.hero--light .hero-reviews-head p.hero-fees-label { margin: 0; }
.hero-reviews-score { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem 0.4rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid var(--vb-line); color: var(--muted); font-size: 0.86rem; text-decoration: none; }
a.hero-reviews-score:hover { color: var(--vb-ink); border-color: var(--border-strong); }
.hero-reviews-score strong { color: var(--vb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-track { display: flex; gap: 1rem; width: max-content; animation: reviewsLoop var(--marquee-dur, 70s) linear infinite; }
.reviews-marquee:hover .reviews-track, .reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }
/* The track holds the set twice; sliding by half its width (plus half a gap) lands exactly on the copy. */
@keyframes reviewsLoop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 0.5rem), 0, 0); } }
.review-chip {
  flex: none; width: 320px; margin: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.15rem 1.25rem;
  background: #fff; border: 1px solid var(--vb-line); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(6,24,53,0.04);
}
.review-chip-stars { color: #E9A91E; letter-spacing: 0.1em; font-size: 0.9rem; }
.review-chip blockquote { margin: 0; flex: 1; font-size: 0.9rem; line-height: 1.55; color: var(--vb-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-chip figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--vb-line); }
.review-chip figcaption strong { font-size: 0.88rem; font-weight: 600; color: var(--vb-ink); }
.review-chip figcaption span { font-size: 0.76rem; color: var(--muted); }
@media (max-width: 600px) { .review-chip { width: 270px; } }
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .reviews-track { animation: none; }
  .review-chip[aria-hidden="true"] { display: none; }
}

/* ---------- Layer GG: logo 50px high, 39px once the page is scrolled (desktop) ---------- */
.logo img { height: 50px; width: auto; transition: height 0.3s var(--vb-ease); }
.is-scrolled .logo img { height: 39px; }
@media (max-width: 860px) {
  .logo img { height: 38px; }
  .is-scrolled .logo img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .logo img { transition: none; } }

/* ---------- Layer HH: service pages, "at a glance" inside the intro + "Why ..." as a navy why-band ---------- */
.svc-intro-grid { align-items: start; }
.svc-glance { margin-top: 2rem; padding: 1.5rem 1.65rem; border-radius: var(--radius-lg); background: var(--vb-mist); }
.svc-glance-title { margin: 0 0 0.8rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing: -0.02em; }
.svc-glance .svc-section-body { max-width: none; }
.svc-glance .svc-checklist { margin: 0.4rem 0 0.8rem; }
.svc-glance .svc-section-body > p { font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 0; }
.svc-glance .svc-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0.6rem 0 0; }

.svc-why .why-text h2 { color: #fff; max-width: 22ch; }
.svc-why .why-text p { color: rgba(255,255,255,0.78); max-width: 62ch; }
.svc-why .why-text h3 { color: #fff; }
.svc-why .why-text a { color: var(--vb-mint); }
.svc-why--solo { grid-template-columns: minmax(0, 1fr); }
.svc-why--solo .why-text { max-width: 820px; }
.svc-why-card {
  padding: 1.6rem 1.7rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.svc-why-card h3 { margin: 0 0 1rem; font-size: 1.1rem; color: #fff; }
.svc-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.svc-why-list li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1rem; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: #fff; font-weight: 500; font-size: 0.95rem; line-height: 1.4;
}
.svc-why-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--vb-teal); }

/* ==========================================================================
   LAYER OCT13: client change request of 13 Oct 2026 (vb-partners-site-update)
   Shared blocks, home, hub, blog, article, calculator, calm motion.
   ========================================================================== */

/* ---- Calm motion: keep the reviews loop (slow) and the team mosaic, nothing else moves ---- */
.js .section { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero > .container > *, .hero-home-inner > *, .hero-portrait, .hero-fees-grid li { animation: none !important; }
.btn--primary { animation: none !important; background-image: none; }
.dot-field i, .dot-field i.off { animation: none !important; transition: none !important; opacity: 1; transform: none; }
.cb-ico-phone, .cb-ico-mail { animation: none !important; opacity: 1; transform: none; }
.cb-ico-mail, .cb-fab-dot { display: none !important; }
.photo-band-img { animation: none !important; transform: none !important; }
.calc-trigger-badge, .calc-trigger-badge::after, .calc-trigger-badge::before { animation: none !important; }
.hl, .js [data-reveal] .hl { transition: none !important; background-size: 100% 100% !important; color: var(--vb-teal-ink) !important; }
.reviews-marquee:hover .reviews-track, .reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }

/* ---- Team avatars row (no names, no count) ---- */
.mk-avs { display: flex; align-items: center; padding-left: 10px; }
.mk-avs img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #fff; margin-left: -10px; background: #dfe9ee; }
.mk-more { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -10px; flex: 0 0 auto; box-sizing: content-box; }
.mk-dots { display: flex; gap: 5px; align-items: center; margin-left: 8px; }
.mk-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mk-dots i:nth-child(2) { opacity: .6; }
.mk-dots i:nth-child(3) { opacity: .3; }
.mk-team, .mk-hcard-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk-team { margin: 26px 0 6px; }
.mk-team .mk-avs img, .mk-team .mk-more { width: 46px; height: 46px; }
.mk-team > span:last-child, .mk-hcard-foot > span:last-child { display: flex; flex-direction: column; font-size: .82rem; color: var(--muted); line-height: 1.35; min-width: 0; flex: 1 1 220px; }
.mk-team strong, .mk-hcard-foot strong { color: var(--navy-dark); font-size: .95rem; }

/* ---- Federation of Accounting Professions ---- */
.mk-fedbox { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.mk-fedbox img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: 10px; padding: 3px; border: 1px solid var(--border); box-sizing: border-box; }
.mk-fedbox > span { display: flex; flex-direction: column; min-width: 0; }
.mk-fedbox strong { color: var(--navy-dark); font-size: .86rem; font-weight: 600; }
.mk-fedbox--dark { color: rgba(255,255,255,.7); }
.mk-fedbox--dark strong { color: #fff; }
.mk-fedbox--dark img { border-color: transparent; }

/* ---- Two ways to talk to us ---- */
.mk-talk { margin-top: 44px; }
.mk-talk-head h2, .mk-talk-head h3 { margin: 8px 0 22px; }
.mk-talk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mk-talk-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mk-talk-card h3 { margin: 0; font-size: 1.25rem; color: var(--navy-dark); }
.mk-talk-card p { margin: 0; color: var(--muted); font-size: 1rem; }
.mk-talk-card .mk-amt { font-size: 1.6rem; font-weight: 700; color: var(--accent-dark); margin: 6px 0 10px; }
.mk-amt small { font-size: .95rem; font-weight: 600; }
.mk-talk-card .btn { margin-top: auto; }
.mk-talk-hi { background: linear-gradient(160deg, #0F4160, #061835); border-color: transparent; }
.mk-talk-hi h3 { color: #fff; }
.mk-talk-hi p { color: rgba(255,255,255,.8); }
.mk-talk-hi .mk-amt { color: #7FE0CD; }
.mk-talk-under { margin: 18px 0 0; color: var(--muted); }
.mk-talk-under a { color: var(--accent-dark); font-weight: 600; }
@media (max-width: 760px) { .mk-talk-grid { grid-template-columns: 1fr; } }

/* ---- Service cards: one structure everywhere (icon, title, text, price, bullets, link), no images ---- */
.prog-card { border-top: 3px solid var(--accent); background: #fff; }
.prog-card::before { display: none; }
.prog-card-head { display: flex !important; align-items: center; gap: 12px; }
.mk-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: #E6F4F1; color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.mk-ico svg { width: 22px; height: 22px; }
.prog-card-fact { flex-wrap: wrap; gap: 2px 12px; }
.prog-card-fact strong { white-space: nowrap; color: var(--accent-dark); font-size: 1.12rem; }
.prog-card-link { color: var(--accent-dark); }
.prog-grid--home, .prog-hub .prog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 980px) { .prog-grid--home, .prog-hub .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prog-grid--home, .prog-hub .prog-grid { grid-template-columns: 1fr; } }

/* ---- Home: hero card "How we work" ---- */
.mk-hcard { background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 20px; padding: 28px 28px 22px; box-shadow: 0 18px 48px rgba(15,65,96,.12); max-width: 460px; justify-self: end; width: 100%; box-sizing: border-box; }
.mk-hcard-eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); }
.mk-hcard-title { margin: 6px 0 18px; font-size: 1.35rem; line-height: 1.25; color: var(--navy-dark); }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.mk-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); align-items: center; }
.mk-steps li::before { content: counter(s); grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; background: #E6F4F1; color: var(--accent-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mk-steps b { font-size: .78rem; color: var(--accent-dark); letter-spacing: .04em; text-transform: uppercase; }
.mk-steps span { font-size: .95rem; color: var(--text); line-height: 1.35; }
.mk-hcard-foot { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.mk-hcard-foot .mk-avs img:nth-child(n+6) { display: none; }
.mk-hcard-fed { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 800px) { .mk-hcard { justify-self: stretch; max-width: none; } }

/* ---- Home: the two service groups ---- */
.mk-start, .mk-run { border-radius: 24px; padding: clamp(20px, 3vw, 36px); }
.mk-start { background: #fff; border: 1px solid var(--border); }
.mk-run { background: #E6F4F1; border: 1px solid #CFE9E3; margin-top: 28px; }
.mk-tag { display: block; width: fit-content; line-height: 1.4; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.home-services-head h3, .home-services-head h3 a { color: var(--navy-dark); }

/* ---- Home: about mosaic captions readable (bigger, more contrast, always visible) ---- */
.team-mosaic-name { opacity: 1 !important; transform: none !important; background: rgba(6,24,53,.86); color: #fff; font-size: .84rem; font-weight: 600; padding: .38rem .6rem; }
.team-mosaic-name.is-swapping { opacity: 0 !important; }

/* ---- Home: why VB & Partners was created ---- */
.mk-founder-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.mk-founder-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; display: block; box-shadow: 0 18px 48px rgba(15,65,96,.14); }
.mk-founder h2 { margin: 10px 0 16px; text-wrap: balance; }
.mk-founder p { max-width: 62ch; }
.mk-sign { display: flex; flex-direction: column; margin: 20px 0 14px; padding-left: 14px; border-left: 3px solid var(--accent); color: var(--muted); }
.mk-sign strong { color: var(--navy-dark); }
@media (max-width: 800px) { .mk-founder-grid { grid-template-columns: 1fr; } .mk-founder-photo img { max-width: 260px; } }

/* ---- Home: quote with photo ---- */
.pull-quote footer { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pq-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }

/* ---- eBook band: lead + checklist ---- */
.mk-ebook-lead { font-weight: 600; color: #fff; margin: 14px 0 10px; }
.mk-ebook-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; color: rgba(255,255,255,.88); }
.mk-ebook-list li { padding-left: 26px; position: relative; }
.mk-ebook-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 3px; }
@media (max-width: 640px) { .mk-ebook-list { grid-template-columns: 1fr; } }

/* ---- FAQ accordion on two columns (home, hub) ---- */
.mk-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; align-items: start; margin-top: 24px; }
.mk-faq summary h3 { font-size: 1.02rem; }
.mk-faq summary::after { color: var(--accent-dark); }
@media (max-width: 860px) { .mk-faq { grid-template-columns: 1fr; } }

/* ---- Footer: Federation membership ---- */
.site-footer { padding-bottom: 64px; }
.footer-members .mk-fedbox img { width: 52px; height: 52px; }

/* ---- Hub: trust row + options in the quote panel ---- */
.mk-herotrust { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 26px; }
.mk-chip { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: .9rem; }
.mk-stars { color: #F5B301; letter-spacing: 1px; }
.svc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 800px) { .svc-cards--3 { grid-template-columns: 1fr !important; } }
.svc-section-body:has(> .svc-cards--3) { max-width: none; }
.svc-price-amount small { font-size: .5em; font-weight: 600; }
.mk-qopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.mk-qopts a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.mk-qopts span { font-size: .85rem; color: #9FE3D4; }
@media (max-width: 640px) { .mk-qopts { grid-template-columns: 1fr; } }

/* ---- Campaign pages: client testimonials ---- */
.svc-testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.svc-testimonial { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.svc-testimonial blockquote { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text); }
.svc-testimonial blockquote::before { content: "\2605\2605\2605\2605\2605"; display: block; color: #F5B301; letter-spacing: 1px; font-size: .85rem; margin-bottom: .45rem; }
.svc-testimonial figcaption { margin-top: auto; font-weight: 700; color: var(--navy-dark); font-size: .9rem; }
@media (max-width: 900px) { .svc-testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-testimonials { grid-template-columns: 1fr; } }

/* ---- Contact: consultation booking ---- */
.office-book { margin: 1.1rem 0 0; display: grid; gap: .4rem; }
.office-book small { color: var(--muted); font-size: .82rem; text-align: center; }

/* ---- Blog index: one continuous grid, featured first card, CTA panel, load more ---- */
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }
.news-card-wrap { display: flex; min-width: 0; }
.news-card-wrap > .news-card { width: 100%; }
.news-card-wrap.filtered-out { display: none; }
@media (min-width: 981px) {
  .news-grid--featured:not(.is-searching) > .news-card-wrap:first-child { grid-column: span 2; }
  .news-grid--featured:not(.is-searching) > .news-card-wrap:first-child .news-card { display: grid; grid-template-columns: 1.15fr 1fr; }
  .news-grid--featured:not(.is-searching) > .news-card-wrap:first-child .news-card-media,
  .news-grid--featured:not(.is-searching) > .news-card-wrap:first-child .news-card-media img { height: 100%; aspect-ratio: auto; }
  .news-grid--featured:not(.is-searching) > .news-card-wrap:first-child .news-card-title { font-size: 1.45rem; line-height: 1.25; }
  .news-grid--featured:not(.is-searching) > .news-card-wrap:first-child .news-card-body { align-self: center; }
}
.mk-blogcta { grid-column: 1 / -1; background: #E6F4F1; border: 1px solid #CFE9E3; border-radius: 24px; padding: clamp(20px, 3vw, 36px); }
.mk-blogcta .mk-talk { margin-top: 0; }
.mk-blogcta .mk-talk-head h2 { margin: 8px 0 6px; }
.mk-blogcta .mk-team { margin: 10px 0 22px; }
.mk-loadmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 40px 0 0; color: var(--muted); font-size: .9rem; }
.mk-loadmore .btn.is-loading { opacity: .6; pointer-events: none; }
.mk-pages a { color: var(--accent-dark); font-weight: 600; padding: 0 .2rem; }
.mk-pages strong { color: var(--navy-dark); padding: 0 .2rem; }

/* ---- Article template ---- */
.mk-key { background: #E6F4F1; border: 1px solid #CFE9E3; border-left: 4px solid var(--accent); border-radius: 16px; padding: 22px 26px; margin: 28px 0; }
.mk-key h3 { margin: 0 0 10px !important; color: var(--accent-dark); }
.mk-key ul { margin: 0; }
.mk-inline { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; background: linear-gradient(160deg, #0F4160, #061835); color: #fff; border-radius: 18px; padding: 22px 26px; margin: 36px 0; }
.mk-inline > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.mk-inline strong { font-size: 1.1rem; color: #fff !important; }
.mk-inline span { color: rgba(255,255,255,.8); font-size: .92rem; }
.mk-inline .btn { color: #fff !important; text-decoration: none !important; }
.mk-artfaq { margin-top: 18px; }
.mk-artfaq summary h3 { font-size: 1.02rem; margin: 0 !important; }
.mk-artfaq summary::after { color: var(--accent-dark); }
.post-cta .mk-avs { margin: 4px 0 16px; flex-wrap: nowrap; }
.post-cta .mk-avs img, .post-cta .mk-more { width: 30px; height: 30px; margin-left: -9px; }
.post-cta .mk-avs img:nth-child(n+7) { display: none; }
.mk-opt { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-decoration: none; margin-bottom: 10px; }
.mk-opt strong { color: var(--navy-dark); font-size: .9rem; }
.mk-opt span { color: var(--accent-dark); font-size: .8rem; font-weight: 600; }
.mk-opt:hover { border-color: var(--accent); }
.post-author-photo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; }

/* ---- Callback dialog: three fields; the pill collapses to its icon once the page scrolls ---- */
.cb-form .cb-flabel { margin-top: .4rem; }
.cb-form p.cb-consent { font-size: .78rem; color: var(--muted); margin: .4rem 0 .2rem; }
@media (max-width: 860px) { .cb-fab.is-collapsed:not(:focus-visible) .cb-fab-txt { max-width: 0 !important; padding: 0 !important; } }

/* ---- Tax calculator ---- */
.taxcalc-disclaimer { margin: 0; padding: .9rem 1.1rem; border-radius: 14px; background: #fff; border: 1px solid var(--border); font-size: .84rem; line-height: 1.5; color: var(--muted); }
.taxcalc-rows dd { white-space: nowrap; }
.taxcalc-stepper input, .taxcalc-money input { font-size: 16px; }
.taxcalc-reset { margin: .2rem 0 0 .1rem; padding: .5rem .25rem; }
.taxcalc-field label { cursor: pointer; }
.taxcalc-switch-row { display: flex; align-items: center; gap: .4rem; }
.taxcalc-switch-row .taxcalc-switch { margin-bottom: 0; }
.taxcalc-group .taxcalc-switch-row { margin-bottom: .9rem; }
.taxcalc-stepper-row--sub { padding-left: 1rem; font-weight: 500; font-size: .86rem; color: var(--muted); }
.tc-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: .3rem; }
.tc-tip-btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent); background: #fff; color: var(--accent-dark); font: 700 12px/1 Georgia, serif; font-style: italic; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tc-tip-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tc-tip-box { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: min(300px, 78vw); padding: .75rem .9rem; border-radius: 12px; background: var(--navy-dark); color: #fff; font-size: .8rem; font-weight: 400; line-height: 1.5; box-shadow: 0 12px 30px rgba(6,24,53,.25); visibility: hidden; opacity: 0; pointer-events: none; text-transform: none; letter-spacing: 0; }
.tc-tip:hover .tc-tip-box, .tc-tip:focus-within .tc-tip-box, .tc-tip.is-open .tc-tip-box { visibility: visible; opacity: 1; pointer-events: auto; }
@media (max-width: 640px) { .tc-tip-box { position: fixed; left: 1rem; right: 1rem; bottom: 5.2rem; top: auto; width: auto; transform: none; } }

/* ---- Small screens: nothing scrolls sideways ---- */
@media (max-width: 420px) {
  .mk-hcard { padding: 22px 18px 18px; }
  .mk-talk-card { padding: 22px 18px; }
  .mk-inline { padding: 18px; }
  .mk-team > span:last-child, .mk-hcard-foot > span:last-child { flex-basis: 100%; }
}

/* LAYER OCT13b: free eBook landing page (includes/ebook-page.php): form at the top, cover inside the form */
.hero--ebook { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.eb-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: 1rem; }
.eb-hero-text h1 { margin: .6rem 0 1rem; }
.eb-hero-text .hero-lead { max-width: 60ch; }
.eb-hero-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; max-width: 560px; }
.eb-hero-points li { display: flex; align-items: center; gap: .85rem; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.eb-hero-points li span { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #9FE3D4; font-size: .82rem; font-weight: 700; }
.eb-form .form-card { background: #fff; color: var(--text); border-radius: 20px; padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(6,24,53,.28); }
.eb-form-title { margin: 0; font-size: 1.22rem; font-weight: 700; line-height: 1.3; color: var(--navy-dark); }
.eb-form-note { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }
.eb-cover { margin: 1rem 0 1.1rem; padding: 1rem; border-radius: 14px; background: #E6F4F1; display: flex; justify-content: center; }
.eb-cover img { width: 108px; height: auto; border-radius: 4px; box-shadow: 0 10px 24px rgba(6,24,53,.22); }
.eb-form label { color: var(--navy-dark); }
.eb-form .form > div { margin-bottom: .75rem; }
.eb-chapters h2 { max-width: 28ch; }
.eb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.8rem; }
.eb-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 18px; padding: 1.5rem 1.5rem 1.4rem; }
.eb-card-num { display: block; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent); margin-bottom: .8rem; letter-spacing: -.02em; }
.eb-card h3 { margin: 0 0 .55rem; font-size: 1.12rem; line-height: 1.3; color: var(--navy-dark); }
.eb-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.eb-split-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.eb-split-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 78ch; }
.eb-split-grid h2 { margin-top: 0; }
.eb-checks { list-style: none; margin: 0; padding: 1.5rem 1.6rem; display: grid; gap: .85rem; background: #E6F4F1; border: 1px solid #CFE9E3; border-radius: 18px; }
.eb-checks li { position: relative; padding-left: 32px; color: var(--text); line-height: 1.45; }
.eb-checks li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.eb-quote { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 12px 36px rgba(15,65,96,.08); }
.eb-quote blockquote { margin: .6rem 0 0; position: relative; }
.eb-quote blockquote::before { content: "\201C"; position: absolute; left: -.2rem; top: -1.4rem; font-size: 4.5rem; line-height: 1; color: #CFE9E3; font-family: Georgia, serif; }
.eb-quote blockquote p { position: relative; font-size: 1.05rem; line-height: 1.65; color: var(--text); }
.eb-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.eb-quote figcaption img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.eb-quote figcaption span { display: flex; flex-direction: column; color: var(--muted); font-size: .9rem; }
.eb-quote figcaption strong { color: var(--navy-dark); font-size: 1rem; }
.eb-closing { text-align: center; }
.eb-closing p { color: rgba(255,255,255,.85); max-width: 62ch; margin-left: auto; margin-right: auto; }
.eb-closing-cta { margin-top: 1.4rem; }
@media (max-width: 960px) { .eb-hero-grid { grid-template-columns: minmax(0, 1fr); } .eb-form { max-width: 480px; } .eb-cards { grid-template-columns: minmax(0, 1fr); } .eb-split-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .eb-form .form-card { padding: 20px 18px 18px; } }

/* ---------- LAYER OCT13c: article "On this page" folds while reading; CTA parks under the header ----------
   Desktop: the list is open at the start of the article, folds to one line ("On this page · current
   section") once you read on, and the call-to-action card stays in view just below the fixed header.
   Mobile: the list at the top starts folded; past it, a slim bar under the header names the current
   section, opens the list and offers the free call. --hdr-bottom is measured by the page script. */
.toc-head { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0 0 0.8rem; margin: 0; border: 0; border-bottom: 1px solid var(--vb-line); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--vb-ink); }
.post-aside .toc .toc-title { margin: 0; padding: 0; border: 0; flex: 0 0 auto; color: var(--vb-ink); }
.toc-now { flex: 1 1 auto; min-width: 0; font-size: 0.84rem; font-weight: 600; color: var(--vb-teal-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateX(-4px); transition: opacity 0.35s cubic-bezier(.2,.7,.3,1), transform 0.35s cubic-bezier(.2,.7,.3,1); }
.toc-chev { flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translate(-2px, -2px); opacity: 0.55; transition: transform 0.4s cubic-bezier(.2,.7,.3,1); }
.toc.is-closed .toc-chev, .toc-bar:not(.is-open) .toc-chev { transform: rotate(45deg) translate(-2px, -2px); }
.toc-body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.5s cubic-bezier(.2,.7,.3,1), opacity 0.35s ease; }
.toc.is-closed .toc-body { grid-template-rows: 0fr; opacity: 0; }
.toc-body-inner { min-height: 0; overflow: hidden; }
.toc.is-closed .toc-head { border-bottom-color: transparent; padding-bottom: 0; }
.toc .toc-list { padding-top: 0.35rem; }

@media (min-width: 1024px) {
  .post-aside { top: calc(var(--hdr-bottom, 96px) + 20px); }
  .post-aside .toc { border-radius: var(--radius-lg); transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s cubic-bezier(.2,.7,.3,1), border-color 0.4s ease; border: 1px solid transparent; }
  .post-aside.is-compact .toc { background: #fff; border-color: var(--vb-line); padding: 0.85rem 1rem; box-shadow: 0 14px 30px -20px rgba(6,24,53,0.35); }
  .post-aside.is-compact .toc-now { opacity: 1; transform: none; }
  .post-aside.is-compact .toc-head { padding-bottom: 0.6rem; }
  .post-aside.is-compact .toc.is-closed .toc-head { padding-bottom: 0; }
  /* Folded and reopened: a short window around the current section (set by the page script), never a scrollbar. */
  .post-aside.is-compact .toc-list li:not(.is-near) { display: none; }
  .post-aside.is-compact .toc-list li.is-first-near a { border-top: 0; }
  .post-aside .post-cta--aside { margin-top: 1.25rem; transition: margin-top 0.4s ease; }
  .toc-bar { display: none !important; }
}

@media (max-width: 1023px) {
  .post-aside .toc { background: var(--vb-mist); border: 1px solid var(--vb-line); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
  .post-aside .toc .toc-head { min-height: 28px; }
  .toc-bar { position: fixed; left: 0; right: 0; top: var(--hdr-bottom, 76px); z-index: 90; padding: 0 var(--gutter, 1.25rem);
    opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0.45s; }
  .toc-bar.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.7,.3,1), visibility 0s; }
  .toc-bar-row, .toc-bar-panel { max-width: 720px; margin: 0 auto; }
  .toc-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 8px; padding: 6px 6px 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.92); backdrop-filter: saturate(170%) blur(12px); -webkit-backdrop-filter: saturate(170%) blur(12px);
    border: 1px solid var(--vb-line); box-shadow: 0 14px 30px -18px rgba(6,24,53,0.45); }
  .toc-bar-btn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border: 0; background: none; font: inherit; text-align: left; color: var(--vb-ink); cursor: pointer; }
  .toc-bar-label { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vb-teal-ink); }
  .toc-bar-now { flex: 1 1 auto; min-width: 0; font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toc-bar-btn .toc-chev { margin-left: 0.2rem; }
  .toc-bar-cta.btn { flex: 0 0 auto; padding: 0.55rem 0.95rem; font-size: 0.8rem; border-radius: 999px; white-space: nowrap; }
  .toc-bar-panel { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 8px; border-radius: var(--radius-lg); background: #fff; border: 1px solid transparent; box-shadow: none;
    transition: grid-template-rows 0.45s cubic-bezier(.2,.7,.3,1), opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
  .toc-bar.is-open .toc-bar-panel { grid-template-rows: 1fr; opacity: 1; border-color: var(--vb-line); box-shadow: 0 24px 50px -24px rgba(6,24,53,0.5); }
  .toc-bar-panel .toc-body-inner { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toc-bar-panel .toc-body-inner::-webkit-scrollbar { display: none; }
  .toc-bar-panel .toc-list { list-style: none; margin: 0; padding: 0.4rem 1.1rem 0.6rem; counter-reset: toc; }
  .toc-bar-panel .toc-list li + li a { border-top: 1px solid var(--vb-line); }
  .toc-bar-panel .toc-list a { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.6rem 0; color: var(--vb-ink); font-size: 0.92rem; line-height: 1.45; text-decoration: none; }
  .toc-bar-panel .toc-list a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); flex: 0 0 auto; min-width: 1.5em; font-size: 0.72rem; font-weight: 700; color: var(--vb-teal); font-variant-numeric: tabular-nums; }
  .toc-bar-panel .toc-list a.is-current { color: var(--vb-teal-ink); font-weight: 600; }
}
@media (max-width: 420px) {
  .toc-bar-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-body, .toc-bar, .toc-bar-panel, .toc-now, .toc-chev, .post-aside .toc { transition: none !important; }
}
/* Anchor jumps land below the fixed header. */
.article-body h2[id], .article-body h3[id] { scroll-margin-top: calc(var(--hdr-bottom, 96px) + 24px); }
.toc:not(.is-ready) .toc-body, .toc:not(.is-ready) .toc-chev, .toc:not(.is-ready) .toc-now { transition: none !important; }

/* ---------- LAYER OCT13d: eBook page closing call-to-action = premium panel (site's dark card style) ---------- */
.eb-closing { text-align: left; background: var(--vb-mist); }
.eb-closing-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 4.5vw, 3.75rem); border-radius: var(--radius-xl, 28px); overflow: hidden; color: rgba(255,255,255,0.8);
  background: radial-gradient(60% 70% at 100% 0%, rgba(53,166,146,0.32), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(77,184,168,0.12), transparent 70%), var(--vb-grain), linear-gradient(155deg, var(--vb-ocean), var(--vb-ink) 78%);
  box-shadow: 0 40px 80px -40px rgba(6,24,53,0.55); }
.eb-closing-panel--solo { grid-template-columns: minmax(0, 1fr); }
.eb-closing-text { max-width: 60ch; }
.eb-closing-text .eyebrow { margin-bottom: 0.9rem; color: var(--vb-mint); }
.eb-closing h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 1rem; }
.eb-closing p { color: rgba(255,255,255,0.8); max-width: 60ch; margin: 0 0 0.8rem; }
.eb-closing-cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; }
.eb-closing-cta .btn { border-radius: 999px; }
.eb-closing-note { font-size: 0.85rem; color: rgba(191,237,227,0.85); }
.eb-closing-cover { justify-self: center; display: block; width: min(250px, 100%); transform: rotate(-4deg); transition: transform 0.6s cubic-bezier(.2,.7,.3,1); }
.eb-closing-cover img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); }
.eb-closing-panel:hover .eb-closing-cover { transform: rotate(-2deg) translateY(-4px); }
@media (max-width: 760px) {
  .eb-closing-panel { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 2rem 1.4rem 2.2rem; }
  .eb-closing-text { margin: 0 auto; }
  .eb-closing-cover { order: -1; width: 150px; margin-bottom: 0.4rem; }
  .eb-closing-cta { justify-content: center; flex-direction: column; }
  .eb-closing-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .eb-closing-cover { transition: none; } }

/* eBook form card sits inside the dark hero: its texts must not take the hero's light paragraph colour (was white on white). */
.hero .eb-form .form-card .eb-form-title { color: var(--vb-ink); }
.hero .eb-form .form-card .eb-form-note { color: var(--slate, #56697A); font-size: .9rem; }
.hero .eb-form .form-card p, .hero .eb-form .form-card .form-success p { color: var(--slate, #56697A); max-width: none; font-size: inherit; }
.hero .eb-form .form-card .eb-form-title { font-size: 1.22rem; }

/* eBook form: language of the eBook (English / French) as two pill buttons */
.eb-lang { border: 0; margin: 0 0 .9rem; padding: 0; min-width: 0; }
.eb-lang legend { padding: 0; margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-dark); }
.eb-lang-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.eb-lang-options label { position: relative; margin: 0; cursor: pointer; }
.eb-lang-options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.eb-lang-options span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--vb-line); background: #f6f9fb; font-weight: 600; color: var(--vb-ink); transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.eb-lang-options input:checked + span { background: var(--vb-teal-ink); border-color: var(--vb-teal-ink); color: #fff; box-shadow: 0 10px 22px -12px rgba(31,127,111,.85); }
.eb-lang-options input:focus-visible + span { box-shadow: 0 0 0 4px rgba(53,166,146,.25); }
.eb-form .eb-lang-options label { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: var(--vb-ink); }

/* ---------- LAYER OCT13e: 404 page (includes/notfound.php nf_render) ---------- */
.nf-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 2rem; }
.nf-text h1 { margin-bottom: 0.6rem; }
.hero .nf-lead { font-size: 1.15rem; max-width: 46ch; }
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; margin-top: 1.8rem; }
.nf-actions .btn { border-radius: 999px; }
.nf-search { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.5rem; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.3,1); }
.nf-search:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); transform: translateY(-1px); color: #fff; }
.nf-call { color: var(--vb-mint); font-weight: 600; text-decoration: none; transition: color 0.3s ease; }
.nf-call:hover { color: #fff; }
.nf-code { justify-self: center; font-size: clamp(7rem, 17vw, 15rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; user-select: none;
  background: linear-gradient(160deg, rgba(191,237,227,0.95), rgba(53,166,146,0.55) 55%, rgba(53,166,146,0.08));
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 20px 40px rgba(6,24,53,0.45)); }
.nf-more { padding-top: clamp(2.5rem, 5vw, 4rem); }
.nf-title { margin: 0 0 1.4rem; }
.nf-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.nf-service { position: relative; display: flex; flex-direction: column; gap: 0.35rem; min-height: 112px; padding: 1.2rem 2.6rem 1.2rem 1.25rem; background: #fff; border: 1px solid var(--vb-line); border-radius: var(--radius-lg, 16px);
  color: var(--vb-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(6,24,53,0.04); transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s ease; }
.nf-service:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(6,24,53,0.35); color: var(--vb-ink); }
.nf-service-name { font-weight: 700; line-height: 1.3; }
.nf-service-price { margin-top: auto; font-size: 0.85rem; color: var(--vb-slate, #56697A); }
.nf-service-price strong { color: var(--vb-teal-ink); font-weight: 700; }
.nf-go { position: absolute; top: 1.15rem; right: 1.1rem; color: var(--vb-teal); transition: transform 0.35s cubic-bezier(.2,.7,.3,1); }
.nf-service:hover .nf-go { transform: translateX(3px); }
.nf-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.nf-links a { padding: 0.6rem 1.1rem; border-radius: 999px; background: #fff; border: 1px solid var(--vb-line); color: var(--vb-ink); font-weight: 600; font-size: 0.92rem; text-decoration: none;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease; }
.nf-links a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(6,24,53,0.35); color: var(--vb-ink); }
@media (max-width: 1100px) { .nf-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); }
  .nf-code { order: -1; justify-self: start; font-size: 6.5rem; margin-bottom: -0.5rem; }
  .nf-actions .btn, .nf-search { width: 100%; justify-content: center; }
  .nf-services { grid-template-columns: minmax(0, 1fr); }
  .nf-service { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .nf-service, .nf-links a, .nf-search { transition: none; } }

/* ---------- LAYER OCT13f: eBook hero, cover between the text and the form (no box around it) ---------- */
.eb-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px) minmax(0, 400px); grid-template-areas: "text cover form"; align-items: center; gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.eb-hero-text { grid-area: text; }
.eb-hero-grid > .eb-form { grid-area: form; align-self: start; }
.eb-hero-cover { grid-area: cover; position: relative; margin: 0; justify-self: center; width: 100%; max-width: 260px; }
.eb-hero-cover::before { content: ""; position: absolute; inset: 8% -18% -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(53,166,146,0.45), rgba(53,166,146,0) 70%); filter: blur(10px); }
.eb-hero-cover img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 8px;
  transform: rotate(-5deg); box-shadow: 0 40px 70px -24px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1); }
.eb-hero-cover:hover img { transform: rotate(-2deg) translateY(-6px); }
@media (max-width: 1200px) {
  .eb-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "text form" "cover form"; align-items: start; }
  .eb-hero-cover { justify-self: start; max-width: 190px; margin: 0.5rem 0 0 0.5rem; }
}
@media (max-width: 960px) {
  .eb-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cover" "form"; }
  .eb-hero-cover { justify-self: center; max-width: 170px; margin: 0.5rem 0 1rem; }
}
@media (prefers-reduced-motion: reduce) { .eb-hero-cover img { transition: none; } }
/* The cover image has transparent margins: shadow must follow the book's shape (drop-shadow), never a box. */
.eb-hero-cover img, .eb-closing-cover img { box-shadow: none; border-radius: 0; filter: drop-shadow(0 28px 34px rgba(0,0,0,0.5)) drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.eb-hero-grid > .eb-form .eb-form-note { margin-bottom: 1.2rem; }
/* eBook covers: straight (no tilt), a little bigger. */
.eb-hero-cover { max-width: 300px; }
.eb-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(0, 400px); }
.eb-hero-cover img, .eb-hero-cover:hover img { transform: none; }
.eb-hero-cover:hover img { transform: translateY(-4px); }
.eb-closing-cover { transform: none; width: min(280px, 100%); }
.eb-closing-panel:hover .eb-closing-cover { transform: translateY(-4px); }
@media (max-width: 1200px) { .eb-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } .eb-hero-cover { max-width: 220px; } }
@media (max-width: 960px) { .eb-hero-grid { grid-template-columns: minmax(0, 1fr); } .eb-hero-cover { max-width: 200px; } .eb-closing-cover { width: 170px; } }

/* ---------- Gentle reveal on scroll (js/app.js adds .vb-rv only to below-the-fold blocks) ---------- */
.vb-rv { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.2,.7,.3,1); transition-delay: var(--rv-d, 0ms); will-change: opacity, transform; }
.vb-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .vb-rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- Layer OCT25a: reviews are printed once; app.js clones the set (aria-hidden) and adds .is-looped ---- */
.reviews-track { animation: none; }
.reviews-track.is-looped { animation: reviewsLoop var(--marquee-dur, 70s) linear infinite; }
.reviews-marquee:hover .reviews-track.is-looped, .reviews-marquee:focus-within .reviews-track.is-looped { animation-play-state: paused; }
.reviews-marquee:not(.is-looped) { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .reviews-track.is-looped { animation: none; } }