/* =========================================================
   Kishens — Website Mockup v3 Stylesheet
   Main brand: Blue / Black / White
   Wealth Advisory: official brand kit — Navy #0A192C/#0A2749,
   gold gradient #C2A045 → #DCC470, Sen typeface
   v3: multi-page site (separate page per top-level section AND
       per core service). Same design system as v2, plus a
       generic page-hero banner, breadcrumbs and service-detail
       page styles.
   ========================================================= */

/* ---------- Self-hosted brand fonts (Sen + Spectral) ---------- */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/sen-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/sen-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/sen-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('fonts/sen-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/spectral-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/spectral-700.woff2') format('woff2');
}

:root {
  /* Classic Navy theme (default) — logo blue #003973 available via Ocean Canvas */
  --navy: #0b2545;
  --navy-dark: #071a33;
  --black: #111214;
  --white: #ffffff;
  --off-white: #f5f7fa;
  --grey: #5b6472;
  --grey-light: #e3e7ee;
  --blue-accent: #1d5bd6;

  /* Wealth Advisory: Midnight & Gold default (brand-kit gold gradient on
     near-black midnight navy, for stronger contrast with the main site) */
  --wealth-beige: #d9d9d9;
  --wealth-beige-light: #f2f0ec;
  --wealth-brown: #000000;
  --wealth-navy: #0a1120;
  --wealth-gold: #c2a045;
  --wealth-gold-light: #dcc470;

  --font-main: 'Sen', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sub: 'Sen', 'Segoe UI', Arial, sans-serif;
  --font-wealth: 'Sen', 'Segoe UI', Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  --transition: 0.25s ease;

  /* Page canvas — separate from --white/--off-white so cards stay crisp white
     even when a "blue canvas" theme sets these to a blue tint. */
  --page-bg: #ffffff;
  --section-tint: #f5f7fa;

  /* Nav bar size (dev toolbar option) */
  --nav-py: 14px;
  --nav-logo-h: 42px;
  --nav-gap: 26px;
  --nav-font: 0.92rem;

  /* Nav bar colour (dev toolbar option) */
  --nav-bg: rgba(255,255,255,0.96);
  --nav-border: var(--grey-light);
  --nav-blur: 6px;
  --nav-link-color: var(--black);
  --nav-active-color: var(--blue-accent);
  --wealth-link-nav-color: #b8902a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-y: scroll; }

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--black);
  background: var(--page-bg);
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0 0 16px; line-height: 1.2; color: var(--navy); }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.2px; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3, h4 { font-family: var(--font-sub); font-weight: 700; letter-spacing: 0.3px; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 16px; color: var(--grey); }

.center { text-align: center; margin-left: auto; margin-right: auto; }

a { color: var(--blue-accent); text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  z-index: 200;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

.section { padding: 90px 0; }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--section-tint); }
.mt-40 { margin-top: 40px; }
.mb-56 { margin-bottom: 56px; }

.section-tag {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue-accent);
  margin-bottom: 8px;
}

.section-intro { max-width: 640px; margin: 0 auto 48px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-dark); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-gold {
  background: linear-gradient(to right, var(--wealth-gold), var(--wealth-gold-light));
  color: var(--wealth-brown);
  border: none;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.85rem;
  padding: 16px 36px;
  box-shadow: 0 6px 18px rgba(194, 160, 69, 0.35);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(194, 160, 69, 0.5);
  filter: brightness(1.06);
}
.full-width { width: 100%; }

.link-arrow { font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid var(--nav-border);
  transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(11, 37, 69, 0.10); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: var(--nav-py) 24px;
  transition: padding 0.25s ease;
}
.logo { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0; }
.logo-image { height: var(--nav-logo-h); width: auto; transition: height 0.25s ease; }

/* Wealth page: gold logo wipes in over the blue one, left to right.
   The gold layer is "Logo 2 Gold Wordmark.svg" — a cropped copy of the
   official wealth-hero gold file (brand/Logo/SVG/Logo Gold.svg) with its
   tagline artwork removed, keeping the real per-letter gold gradients.
   Verified pixel-for-pixel against the blue nav logo (overlaid alpha
   channels, zero fringing) before use — a flat CSS gradient was tried first
   but looked noticeably flatter than the authentic per-letter shimmer. */
.logo--gold-fill { position: relative; }
.logo--gold-fill .logo-image--gold {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoGoldFill 1.8s ease 0.4s forwards;
}
@keyframes logoGoldFill {
  to { clip-path: inset(0 0 0 0); }
}
.logo--gold-fill--instant .logo-image--gold { animation: none; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .logo--gold-fill .logo-image--gold { animation: none; clip-path: inset(0 0 0 0); }
}

.main-nav { display: flex; align-items: center; gap: var(--nav-gap); flex-shrink: 0; }
.nav-link {
  display: inline-block;
  color: var(--nav-link-color);
  font-weight: 600;
  font-size: var(--nav-font);
  line-height: 1;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--nav-active-color); border-color: var(--nav-active-color); }
.nav-link--wealth { color: var(--wealth-link-nav-color, var(--wealth-nav-brand-color, var(--wealth-brown))); }
.nav-link--wealth:hover, .nav-link--wealth.active { color: var(--wealth-gold); border-color: var(--wealth-gold); }
.nav-link--wealth.wealth-link-match { color: var(--nav-link-color); }
.nav-link--wealth.wealth-link-match:hover, .nav-link--wealth.wealth-link-match.active { color: var(--nav-active-color); border-color: var(--nav-active-color); }

/* Wealth page nav colour override (dev toolbar option) — only takes effect
   when the --wealth-nav-* variables are set by the wealth-nav-colour switcher. */
body[data-page="wealth"] .site-header {
  background: var(--wealth-nav-bg, var(--nav-bg));
  border-bottom-color: var(--wealth-nav-border, var(--nav-border));
}
body[data-page="wealth"] .nav-link:not(.nav-link--wealth) {
  color: var(--wealth-nav-link-color, var(--nav-link-color));
}
body[data-page="wealth"] .header-phone {
  color: var(--wealth-nav-link-color, var(--navy));
}

.header-cta { white-space: nowrap; padding: 8px 16px; line-height: 1; flex-shrink: 0; font-size: var(--nav-font); font-weight: 600; }

.header-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-phone:hover { color: var(--blue-accent); }
.header-phone .icon-svg { stroke: currentColor; width: 17px; height: 17px; }
.icon-svg--small { width: 17px; height: 17px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--navy); border-radius: 2px; }

/* ---------- Home hero with slideshow scaffold ---------- */
.hero {
  position: relative;
  color: var(--white);
  padding: 130px 0 110px;
  text-align: center;
  overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  background-size: cover;
  background-position: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide:nth-child(1) { background-image: linear-gradient(rgba(0,35,71,0.55), rgba(0,35,71,0.55)), url('images/hero-team.jpg'); }
.hero-slide:nth-child(2) { background-image: linear-gradient(rgba(0,35,71,0.55), rgba(0,35,71,0.55)), url('images/hero-office.jpg'); }
.hero-slide:nth-child(3) { background-image: linear-gradient(rgba(0,35,71,0.55), rgba(0,35,71,0.55)), url('images/hero-meeting.jpg'); }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,35,71,0.25) 0%, rgba(0,35,71,0.55) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero h1 { color: var(--white); }
.eyebrow {
  color: #9fc0ff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 18px;
  font-family: var(--font-main);
}
.hero-sub { color: #cbd8ec; font-size: 1.1rem; max-width: 640px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn-outline { border-color: var(--white); color: var(--white); }
.hero-actions .btn-outline:hover { background: var(--white); color: var(--navy); }

.hero-slide-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hero-slide-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 0; }
.hero-slide-dots .dot.active { background: var(--white); }

/* ---------- Generic page hero (all non-home pages) ---------- */
.page-hero {
  position: relative;
  background-color: var(--navy-dark);
  background-image: linear-gradient(rgba(0,28,65,0.78), rgba(0,18,45,0.82));
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 64px 0 56px;
  text-align: center;
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--white); margin-bottom: 10px; }
.page-hero p { color: #cbd8ec; max-width: 640px; margin: 0 auto; }
.page-hero p a { color: var(--white); text-decoration: underline; }

/* Per-page hero images */
.page-hero--services,
.page-hero--resources,
.page-hero--expertise,
.page-hero--accounting,
.page-hero--advisory,
.page-hero--governance,
.page-hero--inheritance,
.page-hero--trust,
.page-hero--personal-tax,
.page-hero--contact,
.page-hero--wealth {
  background-size: cover;
  background-position: center;
}
.page-hero--services    { background-image: linear-gradient(rgba(0,28,65,0.65), rgba(0,18,45,0.70)), url('images/hero-services.jpg'); }
.page-hero--expertise   { background-image: linear-gradient(rgba(0,28,65,0.65), rgba(0,18,45,0.70)), url('images/hero-expertise.jpg'); }
.page-hero--accounting  { background-image: linear-gradient(rgba(0,28,65,0.65), rgba(0,18,45,0.70)), url('images/hero-accounting.jpg'); }
.page-hero--advisory    { background-image: linear-gradient(rgba(0,28,65,0.65), rgba(0,18,45,0.70)), url('images/hero-advisory.jpg'); }
.page-hero--governance  { background-image: linear-gradient(rgba(0,28,65,0.60), rgba(0,18,45,0.68)), url('images/hero-governance.jpg'); }
.page-hero--inheritance { background-image: linear-gradient(rgba(0,28,65,0.55), rgba(0,18,45,0.65)), url('images/hero-inheritance.jpg'); }
.page-hero--trust       { background-image: linear-gradient(rgba(0,28,65,0.65), rgba(0,18,45,0.70)), url('images/hero-trust.jpg'); }
.page-hero--personal-tax{ background-image: linear-gradient(rgba(0,28,65,0.65), rgba(0,18,45,0.70)), url('images/hero-personal-tax.jpg'); }
.page-hero--contact     { background-image: linear-gradient(rgba(0,28,65,0.55), rgba(0,18,45,0.65)), url('images/hero-contact.jpg'); }
.page-hero--resources   { background-image: linear-gradient(rgba(0,28,65,0.60), rgba(0,18,45,0.68)), url('images/hero-office.jpg'); }

.page-hero--wealth {
  background-image: linear-gradient(rgba(10,17,32,0.70), rgba(5,8,18,0.80)), url('images/hero-wealth.jpg');
  font-family: var(--font-wealth);
}
.page-hero--wealth p { color: var(--wealth-beige); }

.breadcrumb {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: var(--white); }

.back-link {
  position: absolute;
  top: -34px;
  left: 24px;
  margin: 0;
  text-align: left;
}
.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.back-link a:hover { color: var(--white); text-decoration: underline; }

@media (max-width: 560px) {
  .back-link { position: static; margin-bottom: 14px; }
}

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--section-tint); padding: 40px 0; border-bottom: 1px solid var(--grey-light); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; max-width: 920px; margin: 0 auto; }
.trust-item { display: flex; flex-direction: column; }
.trust-number { font-size: 2.2rem; font-weight: 700; color: var(--navy); font-family: var(--font-display); }
.trust-number--text { font-size: 1.1rem; font-style: italic; color: var(--grey); }
.trust-label { font-size: 0.85rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.contact .split { align-items: start; }
.quote-card {
  background: var(--navy);
  color: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.quote-card p { color: var(--white); font-size: 1.3rem; font-style: italic; margin-bottom: 12px; font-family: var(--font-display); }
.quote-card span { color: #9fc0ff; font-size: 0.85rem; }

/* ---------- Card grids ---------- */
.card-grid { display: grid; gap: 28px; }
.services-grid { grid-template-columns: repeat(3, 1fr); }
.service-card, .person-card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  padding: 30px;
  transition: var(--transition);
}
.service-card:hover, .person-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.service-card--tile { display: block; color: inherit; }
.service-card--tile:hover h3 { color: var(--blue-accent); }
.service-card:hover .service-icon { background: var(--navy); }
.service-card:hover .service-icon .icon-svg { stroke: var(--white); }
.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--off-white);
  border: 1px solid var(--grey-light);
  margin-bottom: 18px;
  transition: var(--transition);
}
.icon-svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: var(--transition);
}
.service-link { display: inline-block; font-size: 0.88rem; margin-top: 4px; }

/* ---------- Wealth Advisory bridge band (services page) ---------- */
.wealth-bridge {
  background: linear-gradient(135deg, var(--wealth-navy), #1a2338);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}
.wealth-bridge .section-tag { color: var(--wealth-gold); }
.wealth-bridge h2 { color: var(--white); }
.wealth-bridge p {
  color: #cbd8ec;
  max-width: 620px;
  margin: 0 auto 28px;
}

/* ---------- Service detail pages ---------- */
.service-detail-body { max-width: 720px; margin: 0 auto 56px; }
.service-includes {
  max-width: 720px;
  margin: 0 auto 56px;
  list-style: none;
  padding: 0;
}
.service-includes li {
  padding: 14px 0 14px 32px;
  border-bottom: 1px solid var(--grey-light);
  position: relative;
  color: var(--black);
}
.service-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--blue-accent);
  border-radius: 50%;
}
.related-services {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.related-services h3 { margin-bottom: 14px; }
.related-services ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-services a { font-weight: 600; }

/* ---------- Sector chips (home expertise teaser) ---------- */
.sector-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 4px 0 32px; }
.sector-chip {
  padding: 10px 22px;
  border-radius: 30px;
  border: 1px solid var(--grey-light);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition);
}
.sector-chip:hover { border-color: var(--blue-accent); color: var(--blue-accent); }

/* ---------- Expertise tabs ---------- */
.tab-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.tab-btn {
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid var(--grey-light);
  background: var(--white);
  color: var(--grey);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.tab-btn:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.tab-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.tab-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.tab-image-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--off-white);
}
.tab-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  animation: fadeIn 0.4s ease;
}
.tab-split-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
  aspect-ratio: 4 / 3;
  animation: fadeIn 0.4s ease;
}
.tab-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tab-image[hidden], .tab-split-grid[hidden] { display: none; }
.tab-image-credit {
  font-size: 0.72rem;
  color: var(--grey);
  font-style: italic;
  text-align: center;
  margin: 8px 0 0;
}
.tab-panels { text-align: left; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }

.expertise-tabs { scroll-margin-top: 96px; }
.sector-points { list-style: none; padding: 0; margin: 18px 0 0; }
.sector-points li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: var(--black);
}
.sector-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--blue-accent);
  border-radius: 50%;
}
.tab-panel .link-arrow { display: inline-block; margin-top: 16px; }

.sector-chips--static .sector-chip { cursor: default; }
.sector-chips--static .sector-chip:hover { border-color: var(--grey-light); color: var(--navy); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Family / team ---------- */
.family { background: var(--section-tint); }
.founders { grid-template-columns: repeat(3, 1fr); margin-bottom: 60px; align-items: stretch; }
.founders .person-card { display: flex; flex-direction: column; }
.founders .person-more-toggle { margin-top: auto; }
/* Match the founders' photo circles to the team members' (100px in the grid layout). */
.founders .avatar { width: 100px; height: 100px; }
.founders.founders--podium { grid-template-columns: repeat(3, 1fr); align-items: start; }
.founders.founders--podium .person-card:nth-child(1) { grid-column: 2; grid-row: 1; }
.founders.founders--podium .person-card:nth-child(2) { grid-column: 1; grid-row: 1; margin-top: 64px; }
.founders.founders--podium .person-card:nth-child(3) { grid-column: 3; grid-row: 1; margin-top: 64px; }
@media (max-width: 900px) {
  .founders.founders--podium { grid-template-columns: 1fr; }
  .founders.founders--podium .person-card:nth-child(1),
  .founders.founders--podium .person-card:nth-child(2),
  .founders.founders--podium .person-card:nth-child(3) {
    grid-column: auto; grid-row: auto; margin-top: 0;
  }
}
/* Team rows: uniform card size across both sections, laid out with centered
   flex-wrap so a row that spills onto a second line stays centred. */
.people-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; margin-bottom: 20px; gap: 16px; transition: margin-bottom 0.2s ease; }
.people-row .person-card.small { flex: 0 0 174px; width: 174px; }
@media (max-width: 560px) {
  .people-row .person-card.small { flex-basis: 42%; width: auto; }
}

/* Management row (6 people): keep all six on a single line on desktop by giving
   them a shared 6-column grid that shrinks the cards to fit; wrap only on small
   screens. Full-bio modes that need wrapping restore flex just below. */
.people-row--6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.people-row--6 .person-card.small { width: auto; }
@media (max-width: 760px) { .people-row--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 440px) { .people-row--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bios-preview .people-row--6,
.bios-full-cascade .people-row--6,
.bios-full-offset .people-row--6 { display: flex; flex-wrap: wrap; }
.person-card { text-align: center; }
.person-card.small { padding: 20px 12px; }
.avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3rem;
  margin: 0 auto 16px;
  font-family: var(--font-display);
  overflow: hidden;
}
.avatar.small { width: 68px; height: 68px; font-size: 1.15rem; margin-bottom: 12px; }
/* Photo avatars: the circular clip lives on this wrapper (a plain box, so the
   edge stays crisp) and the <img> inside just fills it. Rounding a raster
   image's own corners (the old approach) renders a soft, anti-aliased edge in
   most browsers — clipping via a parent's overflow:hidden does not.
   The ring is an INSET box-shadow rather than a real border: combining a real
   border with border-radius + overflow:hidden can leave a faint seam between
   the clipped photo and the border in some browsers; an inset shadow doesn't
   interact with the clip boundary the same way and renders perfectly crisp. */
.avatar--photo { box-shadow: inset 0 0 0 3px var(--grey-light); }
.avatar-photo-fill { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Uniform card internals: name, then a fixed two-line title slot (top-aligned so
   one- and two-line titles share the same baseline), then the Bio button — so
   every card lines up regardless of how long each person's title is. */
.people-row .person-card.small { display: flex; flex-direction: column; }
.people-row .person-summary { display: flex; flex-direction: column; align-items: center; flex: 1; }
.people-row .person-summary h4 { margin-bottom: 8px; }
.people-row .person-role { font-size: 0.75rem; height: 2.7em; display: flex; align-items: flex-start; justify-content: center; text-align: center; line-height: 1.3; margin-bottom: 0; }
.people-row .person-more-toggle { margin-top: 14px; }

/* Bio "speech bubble": floats directly below whichever card was clicked, with a
   pointer running straight down from that card into the box (position set in JS). */
.people-row > .person-more {
  position: absolute;
  width: min(320px, 92%);
  z-index: 5;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  text-align: left;
  animation: fadeIn 0.2s ease;
}
.people-row > .person-more::before {
  content: "";
  position: absolute;
  top: -9px;
  left: var(--arrow-left, 24px);
  width: 16px;
  height: 16px;
  background: var(--white);
  border-left: 1px solid var(--grey-light);
  border-top: 1px solid var(--grey-light);
  transform: rotate(45deg);
}
.people-row > .person-more p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--grey); text-align: justify; text-align-last: center; hyphens: auto; }

/* DEV-ONLY: alternate team-bio layouts (toggled from the design toolbar).
   On-card bio text + read-more button are injected by dev-toolbar.js and stay
   hidden unless the .bios-preview / .bios-full mode class is present, so the
   default (deployed) build is unaffected and keeps the bubble behaviour. */
.person-card-bio, .person-card-readmore { display: none; }

/* Preview: first two lines of the bio on the card, with a Read more toggle */
.bios-preview .person-card.small { flex-basis: 300px; width: 300px; }
.bios-preview .avatar.small { width: 88px; height: 88px; }
.bios-preview .person-more-toggle { display: none; }
.bios-preview .person-card-bio {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 12px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--grey);
  text-align: justify; text-align-last: center; hyphens: auto;
}
.bios-preview .person-card.bio-open .person-card-bio { -webkit-line-clamp: unset; overflow: visible; }
.bios-preview .person-card-readmore {
  display: inline-block; margin-top: 10px; background: none; border: none; cursor: pointer;
  color: var(--blue-accent); font-weight: 700; font-size: 0.8rem; padding: 0;
}

/* Full bio: whole bio shown on every card, no Bio button. Shared by all three
   full-bio layout variants (grid / zigzag / staggered), each toggled from the
   design toolbar. */
.bios-full .person-more-toggle { display: none; }
.bios-full .person-card-bio {
  display: block; margin: 10px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--grey);
  text-align: justify; text-align-last: center; hyphens: auto;
}

/* DEV-ONLY: bio text alignment toggle — centre every bio instead of justifying. */
.family.bio-center .person-card-bio,
.family.bio-center .people-row > .person-more p {
  text-align: center;
  text-align-last: center;
  hyphens: manual;
}

/* Variant 1 — GRID: uniform 3-across cards, all the same size (management 3 + 3). */
.bios-full-grid .avatar.small { width: 100px; height: 100px; }
.bios-full-grid .people-row { align-items: stretch; }
.bios-full-grid .people-row--3 .person-card.small { flex: 0 0 300px; width: 300px; }
.bios-full-grid .people-row--6 {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: center;
  gap: 20px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.bios-full-grid .people-row--6 .person-card.small { width: auto; }
@media (max-width: 900px) { .bios-full-grid .people-row--6 { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 620px) { .bios-full-grid .people-row--6 { grid-template-columns: minmax(0, 1fr); } }
/* On phones a fixed 300px card leaves the bio text only ~260px to wrap into,
   so full paragraphs stack into a tall, narrow ("elongated") column. Letting
   the card fill the available row width gives the text more room per line. */
@media (max-width: 560px) {
  .bios-full-grid .people-row--3 .person-card.small { flex: 1 1 100%; width: 100%; max-width: 420px; }
}

/* Variant 2 — ZIGZAG: split panels that alternate photo side AND slide toward
   their own text side, so each card sits on the same side of the page as its
   bio and the column zigzags left / right down the page. */
.bios-full-zigzag .people-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 20px; max-width: 1120px; margin-left: auto; margin-right: auto;
}
.bios-full-zigzag .person-card.small {
  flex: none; width: 87.5%; max-width: 1000px;
  display: flex; align-items: center; gap: 30px; padding: 28px 36px;
}
.bios-full-zigzag .avatar.small { width: 116px; height: 116px; flex-shrink: 0; margin: 0; }
.bios-full-zigzag .person-summary { flex: 1; }
.bios-full-zigzag .person-role { height: auto; }
/* odd: photo left, text right → card aligned to the right (its text side) */
.bios-full-zigzag .person-card.small:nth-of-type(odd) { align-self: flex-end; flex-direction: row; }
.bios-full-zigzag .person-card.small:nth-of-type(odd) .person-summary { align-items: flex-start; text-align: left; }
/* even: photo right, text left → card aligned to the left (its text side) */
.bios-full-zigzag .person-card.small:nth-of-type(even) { align-self: flex-start; flex-direction: row-reverse; }
.bios-full-zigzag .person-card.small:nth-of-type(even) .person-summary { align-items: flex-end; text-align: right; }
/* The leadership row has 3 cards and ends on the right, so flip the management
   row's parity to carry the zigzag straight on (left, right, left ...). */
.bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(odd) { align-self: flex-start; flex-direction: row-reverse; }
.bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(odd) .person-summary { align-items: flex-end; text-align: right; }
.bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(even) { align-self: flex-end; flex-direction: row; }
.bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(even) .person-summary { align-items: flex-start; text-align: left; }
@media (max-width: 620px) {
  .bios-full-zigzag .person-card.small,
  .bios-full-zigzag .person-card.small:nth-of-type(odd),
  .bios-full-zigzag .person-card.small:nth-of-type(even),
  .bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(odd),
  .bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(even) {
    width: 100%; align-self: stretch; flex-direction: column; text-align: center;
  }
  .bios-full-zigzag .person-summary,
  .bios-full-zigzag .person-card.small:nth-of-type(odd) .person-summary,
  .bios-full-zigzag .person-card.small:nth-of-type(even) .person-summary,
  .bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(odd) .person-summary,
  .bios-full-zigzag .people-row--6 .person-card.small:nth-of-type(even) .person-summary { align-items: center; text-align: center; }
}

/* Variant 3 — PHOTO LIST: uniform horizontal panels, photo always on the left. */
.bios-full-list .people-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 18px; max-width: 720px; margin-left: auto; margin-right: auto;
}
.bios-full-list .person-card.small {
  flex: none; width: auto; display: flex; flex-direction: row; align-items: center;
  gap: 26px; padding: 24px 30px; text-align: left;
}
.bios-full-list .avatar.small { width: 104px; height: 104px; flex-shrink: 0; margin: 0; }
.bios-full-list .person-summary { flex: 1; align-items: flex-start; text-align: left; }
.bios-full-list .person-role { height: auto; }
@media (max-width: 560px) {
  .bios-full-list .people-row { max-width: 380px; }
  .bios-full-list .person-card.small { flex-direction: column; text-align: center; }
  .bios-full-list .person-summary { align-items: center; text-align: center; }
}

/* Variant 4 — TWO COLUMNS: roomy 2-up vertical cards, equal heights. */
.bios-full-2col .avatar.small { width: 104px; height: 104px; }
.bios-full-2col .people-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center; gap: 22px; align-items: stretch;
}
.bios-full-2col .person-card.small { width: auto; }
@media (max-width: 560px) { .bios-full-2col .people-row { grid-template-columns: minmax(0, 340px); } }

/* Variant 5 — CENTRED COLUMN: single narrow centred column of vertical cards. */
.bios-full-centered .avatar.small { width: 108px; height: 108px; }
.bios-full-centered .people-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; max-width: 460px; margin-left: auto; margin-right: auto;
}
.bios-full-centered .person-card.small { flex: none; width: 100%; }

/* Variant 6 — CASCADE: 3-across with a gentle diagonal step down each column. */
.bios-full-cascade .avatar.small { width: 96px; height: 96px; }
.bios-full-cascade .people-row {
  align-items: flex-start; max-width: 812px; margin-left: auto; margin-right: auto; gap: 22px;
}
.bios-full-cascade .person-card.small { flex: 0 0 250px; width: 250px; }
.bios-full-cascade .person-card.small:nth-of-type(3n+2) { margin-top: 22px; }
.bios-full-cascade .person-card.small:nth-of-type(3n) { margin-top: 44px; }
@media (max-width: 812px) {
  .bios-full-cascade .people-row { max-width: 540px; }
  .bios-full-cascade .person-card.small:nth-of-type(3n+2),
  .bios-full-cascade .person-card.small:nth-of-type(3n) { margin-top: 0; }
}
@media (max-width: 560px) { .bios-full-cascade .people-row { max-width: 320px; } }

/* Variant 7 — STAGGERED: 3-across, middle column dropped (gentle). */
.bios-full-offset .avatar.small { width: 96px; height: 96px; }
.bios-full-offset .people-row {
  align-items: flex-start; max-width: 812px; margin-left: auto; margin-right: auto; gap: 22px;
}
.bios-full-offset .person-card.small { flex: 0 0 250px; width: 250px; }
.bios-full-offset .person-card.small:nth-of-type(3n+2) { margin-top: 24px; }
@media (max-width: 812px) {
  .bios-full-offset .people-row { max-width: 540px; }
  .bios-full-offset .person-card.small:nth-of-type(3n+2) { margin-top: 0; }
}
@media (max-width: 560px) { .bios-full-offset .people-row { max-width: 320px; } }

.person-role { display: block; font-size: 0.82rem; color: var(--blue-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.person-role--tbc { color: var(--grey); font-weight: 600; font-style: italic; text-transform: none; letter-spacing: 0; margin-bottom: 0; margin-top: 2px; }
.subgroup-title { text-align: center; margin-top: 40px; color: var(--navy); }
.placeholder-note { color: var(--grey); font-size: 0.85rem; font-style: italic; margin-top: 10px; }

.office-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.office-photo-placeholder--card { margin-top: 0; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.office-photo-caption { text-align: center; font-weight: 600; color: var(--navy); margin: 12px 0 0; }

.person-more-toggle {
  background: none;
  border: 1px solid var(--grey-light);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: var(--transition);
}
.person-more-toggle:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.person-more-toggle[aria-expanded="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.person-more { text-align: left; margin-top: 16px; animation: fadeIn 0.3s ease; }
.person-more dl { margin: 0; font-size: 0.88rem; }
.person-more dt { font-weight: 700; color: var(--navy); margin-top: 10px; }
.person-more dd { margin: 2px 0 0; color: var(--grey); }

/* ---------- Key tax dates ---------- */
.key-dates { background: var(--section-tint); }
.key-dates-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
.date-card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}
.date-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 14px;
}
.date-card h3 { margin-bottom: 6px; font-size: 1.05rem; }
.date-card p { margin-bottom: 0; font-size: 0.88rem; }

/* ---------- Testimonials ---------- */
.testimonial-slider { max-width: 680px; margin: 0 auto; text-align: center; position: relative; }
/* All testimonials stack in the same grid cell so the track's height is set by
   the tallest one and never changes as the slider rotates; align-items:center
   then centres the shorter quotes within that fixed space. */
.testimonial-track { position: relative; display: grid; align-items: center; }
.testimonial {
  grid-row: 1;
  grid-column: 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.testimonial.active { visibility: visible; opacity: 1; pointer-events: auto; animation: fadeIn 0.4s ease; }
.stars { color: var(--wealth-gold); font-size: 1.1rem; letter-spacing: 3px; margin-bottom: 12px; }
.testimonial p { font-size: 1.25rem; font-style: italic; color: var(--navy); font-family: var(--font-display); }
.testimonial cite { font-size: 0.9rem; color: var(--grey); }
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-light); cursor: pointer; border: none; }
.dot.active { background: var(--blue-accent); }

/* ---------- Journey timeline ---------- */
.journey { border-top: 1px solid var(--grey-light); }
.journey-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: journey;
  position: relative;
}
.journey-steps::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--grey-light);
}
.journey-step {
  position: relative;
  text-align: center;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.journey-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  font-family: var(--font-display);
}
.journey-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.journey-step p { font-size: 0.9rem; margin-bottom: 0; }
.journey-step--wealth h3 { color: var(--wealth-brown); }

/* ---------- Wealth Advisory (premium theme) ---------- */
.wealth-section {
  background: linear-gradient(160deg, var(--wealth-navy) 0%, var(--wealth-brown) 100%);
  color: var(--wealth-beige-light);
  font-family: var(--font-wealth);
  position: relative;
}
.wealth-tag { color: var(--wealth-gold); font-family: var(--font-main); }
.wealth-heading { color: var(--wealth-beige-light); font-family: var(--font-wealth); letter-spacing: 0.5px; }
.gold-rule {
  width: 64px;
  height: 2px;
  background: linear-gradient(to right, var(--wealth-gold), var(--wealth-gold-light));
  margin: 0 auto 28px;
}
.wealth-logo { display: block; height: 60px; width: auto; margin: 0 auto 18px; }
.wealth-intro { max-width: 680px; color: var(--wealth-beige); font-size: 1.05rem; }
.wealth-menu {
  list-style: none;
  margin: 56px auto;
  padding: 0;
  max-width: 560px;
  text-align: center;
}
.wealth-menu-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(194, 160, 69, 0.35);
  color: var(--wealth-beige-light);
  font-family: var(--font-wealth);
  font-size: 1.15rem;
  letter-spacing: 0.3px;
  transition: var(--transition);
}
.wealth-menu-item:first-child { border-top: 1px solid rgba(194, 160, 69, 0.35); }
.wealth-menu-item:hover { color: var(--wealth-gold); }
.wealth-closing { max-width: 560px; font-size: 1.15rem; font-style: italic; color: var(--wealth-gold); margin: 0 auto 30px; }
.wealth-cta { margin-top: 10px; }
.wealth-faq { margin-top: 64px; }
.wealth-faq-title { color: var(--wealth-beige-light); font-family: var(--font-wealth); margin-bottom: 24px; }

/* ---------- Wealth service pyramid ---------- */
.wealth-pyramid { margin: 64px auto 56px; max-width: 1020px; }
.pyramid { position: relative; padding-right: 56px; }
.pyramid-tier { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pyramid-tier-label {
  flex: 0 0 72px;
  text-align: right;
  color: var(--wealth-gold);
  font-family: var(--font-wealth);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.pyramid-tier-rows { flex: 1; min-width: 0; }
.pyramid-row { display: flex; justify-content: center; gap: 6px; margin: 6px auto 0; }
.pyramid-row:first-child { margin-top: 0; }
.pyramid-row--w1 { width: 38%; }
.pyramid-row--w2 { width: 52%; }
.pyramid-row--w3 { width: 68%; }
.pyramid-row--w4 { width: 84%; }
.pyramid-row--w5 { width: 100%; }
.pyramid-block {
  flex: 1;
  padding: 13px 8px;
  text-align: center;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid rgba(194, 160, 69, 0.4);
}
.pyramid-tier--summit .pyramid-block {
  background: var(--wealth-gold);
  color: #1c1605;
  font-weight: 700;
  font-size: 0.95rem;
}
.pyramid-tier--three .pyramid-block { background: rgba(194, 160, 69, 0.75); color: #1c1605; }
.pyramid-tier--two .pyramid-block { background: rgba(194, 160, 69, 0.45); color: var(--wealth-beige-light); }
.pyramid-tier--foundation .pyramid-block { background: rgba(194, 160, 69, 0.18); color: var(--wealth-beige); }
a.pyramid-block { text-decoration: none; transition: var(--transition); }
a.pyramid-block:hover {
  transform: translateY(-2px);
  border-color: var(--wealth-gold-light);
  box-shadow: 0 4px 14px rgba(194, 160, 69, 0.35);
}

/* Wealth sub-pages + disclaimer */
.wealth-disclaimer {
  max-width: 640px;
  margin: 30px auto 0;
  font-size: 0.85rem;
  color: var(--wealth-beige);
  opacity: 0.75;
}
.wealth-points {
  list-style: none;
  max-width: 620px;
  margin: 40px auto;
  padding: 0;
  text-align: left;
}
.wealth-points li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  color: var(--wealth-beige);
}
.wealth-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: linear-gradient(to right, var(--wealth-gold), var(--wealth-gold-light));
}
.wealth-back { color: var(--wealth-gold); }
.wealth-back:hover { color: var(--wealth-gold-light); }
.pyramid-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--wealth-gold);
}
.pyramid-axis::before { content: "\25B2"; font-size: 0.7rem; }
.pyramid-axis::after { content: ""; flex: 1; width: 1px; background: linear-gradient(to bottom, var(--wealth-gold), rgba(194, 160, 69, 0.15)); }
.pyramid-axis span {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.68rem;
  font-weight: 600;
}

@media (max-width: 760px) {
  .pyramid { padding-right: 0; }
  .pyramid-axis { display: none; }
  .pyramid-tier { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 26px; }
  .pyramid-tier-label {
    flex: none;
    text-align: left;
    padding-left: 0;
  }
  .pyramid-row { width: 100%; flex-wrap: wrap; }
  .pyramid-block { flex: 1 1 45%; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }

/* ---------- Resources hub ---------- */
.resource-search { max-width: 480px; margin: 0 auto 36px; }
.resource-search input {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 999px;
  transition: var(--transition);
}
.resource-search input:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(58, 110, 183, 0.15);
}
.resource-list { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.resource-card--soon { position: relative; opacity: 0.72; }
.coming-soon-pill {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--blue-accent);
  background: var(--section-tint);
  border: 1px solid var(--grey-light);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
@media (max-width: 560px) {
  .resource-list { grid-template-columns: 1fr; }
}

/* ---------- Legal pages (privacy / cookie policy) ---------- */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--text-muted, #555b66); line-height: 1.7; }
.legal-content ul { margin: 0 0 16px 22px; }
.legal-content li { margin-bottom: 10px; }
.legal-updated { font-style: italic; font-size: 0.9rem; margin-bottom: 28px; }
.faq-item {
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  margin-bottom: 14px;
  background: var(--white);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  position: relative;
  padding-right: 52px;
  transition: var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--blue-accent);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--blue-accent); }
.faq-item p { padding: 0 24px 20px; margin: 0; animation: fadeIn 0.25s ease; }

/* ---------- Contact ---------- */
.contact-details { list-style: none; padding: 0; margin: 24px 0; }
.contact-details li { margin-bottom: 12px; color: var(--grey); }
.contact-map {
  width: 100%;
  height: 280px;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  margin-top: 24px;
  display: block;
}
.office-photo-placeholder {
  margin-top: 24px;
  border: 2px dashed var(--grey-light);
  border-radius: var(--radius);
  padding: 46px 20px;
  text-align: center;
  color: var(--grey);
  font-size: 0.85rem;
  font-style: italic;
  background: var(--off-white);
}
.contact-form {
  background: var(--off-white);
  padding: 32px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
}
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.contact-form input, .contact-form select, .contact-form textarea {
  padding: 11px 14px;
  border: 1px solid var(--grey-light);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--blue-accent);
}
.form-success { color: #1a7a3c; font-weight: 600; margin-top: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #aeb4bd; padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 36px; }
.footer-logo { height: 56px; width: auto; }
.footer-tagline { font-size: 0.9rem; margin-top: 14px; max-width: 260px; }
.footer-icaew { height: 50px; width: auto; display: block; }
.footer-icaew-link { margin-top: auto; padding-top: 24px; }
.footer-grid .footer-col:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 14px; }
.footer-col p { font-size: 0.9rem; margin-bottom: 10px; color: #aeb4bd; }
.footer-col a { color: #aeb4bd; }
.footer-col a:hover { color: var(--white); }
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { color: #aeb4bd; font-size: 0.9rem; }
.footer-nav a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 44px;
  padding-top: 20px;
}
.footer-copy { font-size: 0.8rem; margin: 0; color: #6b7280; }
.footer-legal { font-size: 0.8rem; margin: 0; }
.footer-legal a { color: #6b7280; }
.footer-legal a:hover { color: var(--white); }

.journey-link { display: inline-block; margin-top: auto; padding-top: 10px; font-size: 0.85rem; }

/* ---------- Resources teaser strip (home) ---------- */
.resources-strip { background: var(--section-tint); padding: 22px 0; text-align: center; }
.resources-strip p { margin: 0; font-weight: 600; color: var(--navy); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.3);
  transition: var(--transition);
}
.back-to-top:hover { background: var(--blue-accent); }
.back-to-top .icon-svg { stroke: var(--white); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: none; }
}

/* ---------- Responsive ---------- */
/* Between 1024–1280px the header tightens (smaller gaps, phone number hidden)
   so laptops keep the full nav; below 1024px it becomes the hamburger menu. */
@media (max-width: 1280px) {
  .header-inner { gap: 16px; }
  .main-nav { gap: 14px; }
  .nav-link { font-size: 0.88rem; }
}

@media (max-width: 1024px) {
  .header-cta, .header-phone { display: none; }
  .nav-toggle { display: flex; position: relative; z-index: 5; }
  /* backdrop-filter on an ancestor makes it the containing block for any
     position:fixed descendant — with it left on, the full-screen nav below
     would size itself to the header's own box instead of the viewport. */
  .site-header { backdrop-filter: none; }

  /* Full-screen menu: always in the DOM (not display:none) so the fill-in
     can animate. Closed state is clipped to a dot at the toggle button and
     invisible/non-interactive; opening expands that dot to cover the screen. */
  .main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    position: fixed;
    inset: 0;
    z-index: 1;
    margin: 0;
    background: var(--white);
    padding: 24px;
    clip-path: circle(0% at calc(100% - 46px) 38px);
    pointer-events: none;
    transition: clip-path 0.5s ease;
  }
  .main-nav .nav-link { font-size: 1.3rem; }
  .main-nav.open {
    clip-path: circle(150% at calc(100% - 46px) 38px);
    pointer-events: auto;
  }
}

/* Hamburger <-> close (X) */
.nav-toggle span { transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  /* Once split sections stack, the copy column no longer sits beside its
     visual, so a left-aligned heading reads off-balance against the full-width
     column below it — center the tag/heading (not the body copy or lists). */
  .split-copy > .section-tag,
  .split-copy > h2,
  .split-copy > p { text-align: center; }
  /* Field labels read as mini-headings above each input; center them too, but
     keep the actual typed/selected value left-aligned inside the field. */
  .contact-form label { text-align: center; }
  .contact-form label input,
  .contact-form label select,
  .contact-form label textarea { text-align: left; }
  .office-photos-grid { grid-template-columns: 1fr 1fr; }
  .tab-content-grid { grid-template-columns: 1fr; }
  .tab-panels { text-align: center; }
  .services-grid, .founders { grid-template-columns: 1fr 1fr; }
  .key-dates-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-steps { grid-template-columns: repeat(2, 1fr); }
  .journey-steps::before { display: none; }
  .related-services ul { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .services-grid, .founders, .key-dates-grid, .journey-steps, .office-photos-grid { grid-template-columns: 1fr; }
  .wealth-menu-item { font-size: 1.02rem; }
  .trust-grid { grid-template-columns: 1fr; gap: 24px; }
  .section { padding: 60px 0; }
  .related-services ul { grid-template-columns: 1fr; }
  .hero { padding: 90px 0 70px; }
}