/* ===========================
   CUSTOM PROPERTIES
   =========================== */
:root {
  /* Plouto's brand palette, built from the two logo colours — purple as
     primary (dark enough to anchor headings/nav/buttons), teal as accent
     (the vibrant pop for links, hovers, highlights). Surface/border/shadow
     all carry a subtle lavender tint instead of Complete Capital's blue,
     so the whole site reads as one family, not just the two logo hexes
     dropped into an old palette. */
  --primary: #4B42A2;
  --primary-dark: #12172E;
  --accent: #50C1C2;
  --accent-light: #7ED9DA;
  --white: #FFFFFF;
  --surface: #F4F2FA;
  --surface-dark: #E7E2F4;
  --surface-teal: #F2FAFA;
  --surface-teal-dark: #E2F4F4;
  --text: #2A2733;
  --text-muted: #6E6A7C;
  --border: #DAD3EE;
  --max-width: 1160px;
  --radius: 6px;
  --shadow: 0 2px 12px rgba(75, 66, 162, 0.10);
  --shadow-lg: 0 8px 32px rgba(75, 66, 162, 0.16);
  /* Two-tone poster treatment (.headline-pop) reuses primary and accent
     directly — the logo's purple + teal pairing, used together every time
     rather than alternated, so the effect itself reads as a small brand
     mark. Purple is dark enough for white text (the highlight box); teal
     is too light for that, so it's the shadow instead, where contrast
     doesn't matter. */
  --highlight-bg: var(--primary);
  --pop-shadow: var(--accent);
}

/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Reserve the scrollbar's width permanently so toggling overflow:hidden
   (modals, preloader) never shifts page content sideways. */
html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: 'Albert Sans', sans-serif; color: var(--text); background: var(--white); line-height: 1.7; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ===========================
   TYPOGRAPHY
   =========================== */
h1, h2, h3, h4 { font-family: 'Unbounded', sans-serif; line-height: 1.25; color: var(--primary); font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.5px; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: block;
}
.lead { font-size: 1.1rem; color: var(--text-muted); line-height: 1.85; }

/* ===========================
   LAYOUT
   =========================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: 5rem 0; }
.section--surface { background: var(--surface); }
.section--surface-teal { background: var(--surface-teal); }
.section--primary { background: var(--primary); color: var(--white); }
.section__header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
}
.section__header h2 { margin-bottom: 0.75rem; }

/* ===========================
   SECTION SPLIT — homepage sections: eyebrow/heading/lead in a
   smaller left column, main section content in a wider right column.
   =========================== */
.section-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.section-split__header h2 { margin-bottom: 1.75rem; }
.section-split__header .lead { font-size: 1rem; }

/* Poster-style heading: one highlighted word (solid colour block) with a
   hard, unblurred offset shadow — the shadow sits only on the highlight's
   background block, not the surrounding plain text. Works on both white
   sections and the dark-navy hero/footer backgrounds since the highlight
   box is opaque regardless of what's behind it. */
.headline-pop {
  font-weight: 700;
}
.headline-pop .highlight {
  background: var(--highlight-bg);
  color: var(--white);
  padding: 0 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 6px 6px 0 var(--pop-shadow);
}
/* Smaller-scale variant for compact headings (footer nav columns) — same
   treatment, proportionally smaller offset so it doesn't overpower small text. */
.headline-pop--sm .highlight {
  padding: 0 0.18em;
  box-shadow: 3px 3px 0 var(--pop-shadow);
}
.intro-content p { line-height: 1.75; margin-bottom: 1.5rem; }
.intro-content__motto {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-top: 2.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}
.intro-points { list-style: none; padding: 0; margin-bottom: 1.75rem; }
.intro-points li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; color: var(--text-muted); }
.intro-points li i { color: var(--accent); font-size: 1.15rem; margin-top: 0.1rem; }

/* Sub-brand family — placeholder wordmarks for the 3 Plouto sub-brands,
   each opening a modal via [data-modal] (see main.js). Swap the .brand-family__logo
   text lockup for a real logo image once each sub-brand's mark is designed.
   Lives inside .intro-content (the section-split's second column), so the
   grid columns are narrower than a full-width row. */
.brand-family {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 560px) { .brand-family { grid-template-columns: repeat(3, 1fr); } }
.brand-family__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}
.brand-family__item:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.brand-family__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  margin-bottom: 1.25rem;
}
.brand-family__symbol { width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; object-fit: contain; }
.brand-family__logo span {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary);
  line-height: 1.3;
}
.brand-family__logo em {
  display: block;
  font-style: normal;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.25rem;
}
.brand-family__item p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; }
.brand-family__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
}
.brand-family__item:hover .brand-family__link { color: var(--primary); }

.intro-content__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.partners-section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.partners-section h3 { margin-bottom: 0.6rem; }
.partners-section > p { color: var(--text-muted); line-height: 1.75; margin-bottom: 0; }
.partners-group { margin-top: 1.75rem; }
.partners-group .eyebrow { margin-bottom: 1rem; }
.partners-logos { display: flex; flex-wrap: wrap; gap: 1rem; }
.partners-logos__item {
  height: 6rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
}

@media (min-width: 900px) {
  .section-split {
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  /* Pinned below the sticky site-header (71px nav height, same offset the
     hero uses) plus breathing room, for as long as the right column still
     has content scrolling past — releases once the section's grid row ends. */
  .section-split__header {
    position: sticky;
    top: 111px;
  }
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-block;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Albert Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  border: 2px solid transparent;
  line-height: 1;
}
.btn--primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: var(--white); }
.btn--outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn--outline-white:hover { background: var(--white); color: var(--primary); border-color: var(--white); }

/* ===========================
   SITE HEADER / NAV
   =========================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  padding: 1rem 1.5rem;
}
/* Mobile top bar (phone + CTA above logo row) */
.mobile-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.mobile-top-bar__phone,
.mobile-top-bar__cta { font-size: 0.75rem; padding: 0.35rem 0.85rem; }
.mobile-top-bar__phone { background: var(--accent-light); border-color: var(--accent-light); color: var(--white); }
.mobile-top-bar__phone:hover { background: var(--accent); border-color: var(--accent); }
@media (min-width: 1024px) {
  .mobile-top-bar { display: none; }
}

/* Header phone link */
.header-phone { display: none; }
@media (min-width: 1024px) {
  .header-phone {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s;
  }
  .header-phone:hover { color: var(--accent); }
  .header-phone i { font-size: 0.8rem; }
}

/* Utility bar — fixed at top, desktop only */
.header-utility-bar { display: none; }

/* Mobile: nav col is a transparent wrapper; top row hidden */
.header-nav-col { display: contents; }
.header-nav-top { display: none; }
.site-logo { display: flex; align-items: center; }
.site-logo__img { height: 46px; width: auto; display: block; }

/* Footer text logo (dark bg — image not used there) */
.logo-main {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
}
.logo-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}
/* Mobile nav panel — slides in from right */
.site-nav {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 99;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}
.nav-open .site-nav {
  transform: translateX(0);
  visibility: visible;
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary);
  transition: all 0.25s;
  border-radius: 2px;
}
/* Hamburger → X when open */
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-cta { display: none; }

/* Mobile nav list */
.nav-open .nav-list { display: flex; flex-direction: column; gap: 0; }
.nav-open .nav-list > li > a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  border-radius: 0;
}
.nav-open .nav-list > li.active > a { color: var(--accent); font-weight: 700; border-left: 3px solid var(--accent); padding-left: 0.75rem; }

/* Consultation CTA in mobile nav */
.mobile-nav-cta { display: none; }
.nav-open .mobile-nav-cta {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

@media (min-width: 1024px) {
  /* Utility bar — scrolls away, desktop only */
  .header-utility-bar {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .header-utility-bar .container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  /* Sticky header sticks at top */
  .site-header { top: 0; margin-top: 0; }
  .site-header .container { justify-content: space-between; gap: 1.5rem; align-items: center; }
  /* Single-row: site-nav fills remaining space, right-aligned */
  .site-nav {
    position: static;
    transform: none;
    visibility: visible;
    transition: none;
    overflow: visible;
    padding: 0;
    background: none;
    top: auto; right: auto; bottom: auto; left: auto;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    margin-left: 0;
  }
  .nav-toggle { display: none; }
  .nav-cta { display: inline-block; font-size: 0.65rem; padding: 0.2rem 0.75rem; margin-left: 0; }
  .mobile-nav-cta { display: none !important; }
  .nav-list { display: flex; align-items: center; gap: 0; }
  .nav-list > li > a {
    display: block;
    padding: 0.22rem 0.52rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    border-radius: var(--radius);
    transition: background 0.15s;
  }
  .nav-list > li > a:hover { color: var(--accent); }
  .nav-list > li > a::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
    margin-top: 2px;
  }
  .nav-list > li > a:hover::after,
  .nav-list > li.active > a::after { transform: scaleX(1); }
  .nav-list > li.active > a { color: var(--accent); }
}


/* ===========================
   HERO
   =========================== */
.hero {
  background: var(--primary);
  color: var(--white);
  position: relative;
  overflow: hidden;
  /* Full viewport height minus the sticky header (70px + 1px border) so the
     hero + header together fill exactly one screen. min-height (not height)
     lets it grow taller than the viewport if content needs more room on a
     short/narrow screen instead of clipping. */
  min-height: calc(100vh - 71px);
  display: flex;
  align-items: center;
  padding: 6rem 0;
}
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hero h2 { color: var(--white); margin-bottom: 1.25rem; font-weight: 700; }
.hero__byline { color: rgba(255,255,255,0.72); font-size: 1.15rem; line-height: 1.7; margin-top: 0; }
.hero__tagline { color: var(--white); font-size: 1.05rem; line-height: 1.6; margin-top: 1.1rem; letter-spacing: 0.01em; }
.hero .lead { color: rgba(255,255,255,0.82); margin-bottom: 2.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Home intro strip below hero */
.intro-section { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.intro__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* Interior page hero — split layout: solid colour panel carries the text,
   photo (set per-page via the --hero-img custom property) fills the rest.
   Below 900px it's just the solid panel; the photo only appears once
   there's room for a real split, matching the site's other 900px breakpoints. */
.page-hero {
  position: relative;
  background: var(--primary-dark);
  color: var(--white);
  padding: 4rem 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-hero .container { width: 100%; position: relative; z-index: 1; }
.page-hero__inner { position: relative; z-index: 1; max-width: 700px; }
.page-hero h1 { color: var(--white); margin-bottom: 0.85rem; line-height: 1.15; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 1.05rem; margin-bottom: 0; }
.page-hero--minimal { padding: 2.75rem 0; }

@media (min-width: 900px) {
  .page-hero { padding: 0; min-height: 480px; }
  .page-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    left: 44%;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
  }
  .page-hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    left: 44%;
    background: rgba(10, 25, 50, 0.35);
  }
  .page-hero .container { max-width: none; padding: 0; }
  .page-hero__inner { max-width: 44%; padding: 3rem clamp(1.5rem, 4vw, 4rem); }
  .page-hero--minimal { min-height: 280px; }
}

/* Compact page title bar (default template) */
.page-title {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  padding: 3rem 0 2.5rem;
}
.page-title h1 { color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.25rem); margin: 0; }

/* Default page content body */
.content-body { padding: 3.5rem 0 5rem; }

/* Dingo video grid — neutralise injected Foundation classes */
#dingo .row.container {
  max-width: none;
  padding: 0;
  margin: 0 -0.75rem;
  display: flex;
  flex-wrap: wrap;
}
#dingo .columns {
  width: 100%;
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  #dingo .medium-6 { width: 50%; }
}
#dingo .flex-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
#dingo .flex-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#dingo h5 {
  font-family: 'Unbounded', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

/* ===========================
   LIFE EVENTS
   =========================== */
.life-events { padding: 5rem 0; }
.life-events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
/* Horizontal card: icon chip left, content right; max 2 per row */
.life-event-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  transition: box-shadow 0.2s, transform 0.2s;
  color: inherit;
  text-decoration: none;
}
.life-event-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.life-event-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 2rem;
  color: var(--accent);
  line-height: 1;
}
.life-event-card__body { display: flex; flex-direction: column; flex: 1; }
.life-event-card h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.life-event-card p { font-size: 0.93rem; color: var(--text-muted); margin-bottom: 1.1rem; line-height: 1.65; }
.life-event-card__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; margin-top: auto; }

@media (min-width: 900px) { .life-events-grid { grid-template-columns: repeat(2, 1fr); } }
.life-events-grid--single { grid-template-columns: 1fr; }
@media (min-width: 900px) { .life-events-grid--single { grid-template-columns: 1fr; } }

/* ===========================
   SERVICES GRID
   =========================== */
.services-section { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.life-events-index { padding: 5rem 0; }
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: box-shadow 0.2s, transform 0.2s;
  color: inherit;
  text-decoration: none;
}
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.service-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.service-card__icon { margin-bottom: 0; }
.service-card h3 { font-size: 1.1rem; margin-bottom: 0; }
.service-card p { font-size: 0.93rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.65; }
.service-card__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; margin-top: auto; }

@media (min-width: 600px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }

.service-category { margin-top: 3rem; scroll-margin-top: var(--header-h, 100px); }
.service-category:first-of-type { margin-top: 0; }
.service-category__header { max-width: 640px; margin-bottom: 1.5rem; }
.service-category__header h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.service-category__header p { color: var(--text-muted); line-height: 1.65; }
/* ===========================
   PRINCIPAL TEASER (meet-the-principal section)
   =========================== */
.principal-teaser { padding: 5rem 0; }
.principal-teaser__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.principal-teaser__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 480px;
}
.principal-teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.principal-teaser__content h2 { margin-bottom: 1.25rem; }
.principal-teaser__content p { color: var(--text-muted); margin-bottom: 1rem; }
.credentials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 1.75rem; }
.credential-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.03em;
}

@media (min-width: 768px) {
  .principal-teaser__inner { grid-template-columns: 0.75fr 1.4fr; }
}

/* ===========================
   NEWS
   =========================== */
.news-latest { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.videos-section { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.life-events-teaser { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }

.news-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.news-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.news-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.news-card__excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}
.news-card__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; margin-top: auto; }
.news-card--placeholder { cursor: default; }
.news-card--placeholder:hover { box-shadow: none; transform: none; }
.news-card--placeholder .news-card__image { background: var(--surface-dark); }
.news-card--placeholder .news-card__title,
.news-card--placeholder .news-card__excerpt { color: var(--text-muted); }
.news-sidebar__period {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.news-sidebar__older {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.news-sidebar__older-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.news-sidebar__older ul { list-style: none; padding: 0; margin: 0; }
.news-sidebar__older ul li a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.15s;
}
.news-sidebar__older ul li a:hover { color: var(--primary); }
.news-article__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
  flex-shrink: 0;
}
.article-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.article-share__label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-right: 0.35rem;
}
.article-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1rem;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.article-share__btn:hover { background: var(--primary); color: #fff; }
.news-article__intro,
.articledescription {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.news-latest__footer {
  text-align: center;
  margin-top: 2.5rem;
}

/* ===========================
   TEAM
   =========================== */
.team-section { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.team-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--surface-teal-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__photo i { font-size: 2.75rem; color: var(--accent); opacity: 0.6; }
.team-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-card__name { font-size: 1rem; font-weight: 600; color: var(--primary); margin-bottom: 0.2rem; line-height: 1.4; }
.team-card__title { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }
.team-card__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; margin-top: auto; }

.team-card--featured {
  flex-direction: row;
  margin-top: 2.5rem;
}
.team-card--featured .team-card__photo {
  width: 315px;
  aspect-ratio: 3 / 4;
}
.team-card--featured .team-card__body {
  padding: 2rem 2.5rem;
  justify-content: center;
}
.team-card--featured .team-card__name { font-size: 1.5rem; margin-bottom: 0.3rem; }
.team-card__job-title { font-size: 0.9rem; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.team-card--featured .team-card__title { margin-bottom: 1rem; }
.team-card__summary { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; max-width: 46rem; }
@media (max-width: 620px) {
  .team-card--featured { flex-direction: column; }
  .team-card--featured .team-card__photo { width: 100%; }
}

/* ===========================
   CTA BAND
   =========================== */
.cta-band { background: var(--primary); color: var(--white); padding: 5.5rem 0; text-align: center; }
.cta-band h2 { color: var(--white); margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto 2.25rem; font-size: 1.05rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ===========================
   TRUST SIGNALS
   =========================== */
.trust-signals { padding: 2.5rem 0; background: var(--surface); border-top: 1px solid var(--border); }
.trust-signals__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: center;
  align-items: center;
}
.trust-item { text-align: center; }
.trust-item__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.trust-item__value { font-size: 0.88rem; font-weight: 600; color: var(--primary); }

/* ===========================
   ABOUT PAGE
   =========================== */
.bio-section { padding: 5rem 0; }
.bio-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.bio-section__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 500px;
}
.bio-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.bio-section__content h2 { margin-bottom: 1.25rem; }
.bio-section__content p { color: var(--text-muted); margin-bottom: 1rem; }

.charter-block {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.charter-block p { color: var(--text-muted); font-size: 0.93rem; }

.values-section { padding: 5rem 0; }
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.value-item { display: flex; flex-direction: column; }
.value-item__heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.value-item h3 { font-size: 1.1rem; margin: 0; }
.value-item p { font-size: 0.93rem; color: var(--text-muted); }

@media (min-width: 768px) { .bio-section__inner { grid-template-columns: 1fr 2fr; } }
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===========================
   CONTACT PAGE
   =========================== */
.contact-section { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.contact-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}
.contact-info h3 { margin-bottom: 1.25rem; }
.contact-info address {
  font-style: normal;
  color: var(--text-muted);
  line-height: 2;
  margin-bottom: 0.5rem;
}
.office-hours { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 1.5rem; line-height: 1.6; }
.office-hours strong { color: var(--primary); }
.office-label {
  display: inline-block;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--white);
  background: var(--highlight-bg);
  padding: 0.3em 0.65em;
  box-shadow: 3px 3px 0 var(--pop-shadow);
  margin-bottom: 0.6rem;
}
.contact-detail { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.contact-detail a { color: var(--primary); font-weight: 500; font-size: 0.95rem; transition: color 0.15s; }
.contact-detail a:hover { color: var(--accent); }
.contact-map {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 3rem 0;
}
.contact-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Two offices — each map gets its own responsive-embed box side by side,
   instead of the single absolute-fill iframe the base .contact-map uses. */
.contact-map--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 0;
  height: auto;
  overflow: visible;
}
@media (min-width: 900px) {
  .contact-map--split { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.contact-map__item h4 {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.contact-map--split iframe {
  position: static;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

.contact-form h3 { margin-bottom: 1.5rem; }
#error_message_box { padding: 0.9rem 1.1rem; background: #fef4f4; color: #8b1a1a; border: 1px solid #f5c6c6; border-left: 3px solid #c0392b; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.8; }
#message_box { padding: 0.9rem 1.1rem; background: #f0faf4; color: #1a5e38; border: 1px solid #b8e6cc; border-left: 3px solid #27ae60; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.8; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Albert Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(28, 53, 87, 0.08); }
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group select {
  appearance: none;
  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 d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.form-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; }
.visually-trap { position: absolute; left: -9999px; top: -9999px; }

@media (min-width: 768px) {
  .contact-section__inner { grid-template-columns: 1fr 1.4fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ===========================
   SERVICE DETAIL PAGES
   =========================== */
.service-detail { padding: 5rem 0; }
.service-detail__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.service-detail__content h1 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 1.25rem 0 1rem; }
.service-detail__content h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 2rem 0 0.75rem; }
.service-detail__content h3 { font-size: 1.1rem; margin: 1.75rem 0 0.65rem; }
.service-detail__content p { color: var(--text-muted); margin-bottom: 1rem; }
.service-detail__content ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.75rem;
}
.service-detail__content ul li {
  padding: 0.55rem 0 0.55rem 1.5rem;
  position: relative;
  color: var(--text-muted);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.service-detail__content ul li:first-child { border-top: 1px solid var(--border); }
.service-detail__content ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.article-body ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1.25rem;
}
.article-body ul li {
  list-style: disc;
  padding: 0.2rem 0 0.2rem 0.25rem;
  border: none;
  font-size: inherit;
}
.article-body ul li:first-child { border-top: none; }
.article-body ul li::before { content: none; }
.article-body iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 1.5rem 0;
  border: 0;
  border-radius: var(--radius);
}

.service-sidebar {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  align-self: start;
}
.service-sidebar h4 { margin-bottom: 0.5rem; font-size: 0.8rem; font-family: 'Albert Sans', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.service-sidebar ul { list-style: none; padding: 0; }
.service-sidebar ul li { border-bottom: 1px solid var(--border); }
.service-sidebar ul li:last-child { border-bottom: none; }
.service-sidebar ul + h4 {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.service-sidebar ul li a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.15s;
}
.service-sidebar ul li a:hover { color: var(--primary); }
.service-sidebar ul li a.active { color: var(--primary); font-weight: 700; padding-left: 1.85rem; position: relative; }
.service-sidebar ul li a.active::before { content: '→'; position: absolute; left: 0.75rem; color: var(--accent); }
@media (min-width: 1024px) {
  .service-detail__inner { grid-template-columns: 2fr 1fr; }
  .service-sidebar { position: sticky; top: 88px; }
}

/* ===========================
   FOOTER
   =========================== */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,0.65); padding: 4.5rem 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}
.footer-brand .logo-main { color: var(--white); }
.footer-brand p { font-size: 0.875rem; color: rgba(255,255,255,0.45); margin-top: 0.6rem; }
.footer-nav h4,
.footer-contact h4 {
  color: var(--white);
  font-size: 1rem;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-nav ul li { margin-bottom: 0.5rem; }
.footer-nav ul li a { font-size: 0.875rem; color: rgba(255,255,255,0.5); transition: color 0.15s; }
.footer-nav ul li a:hover { color: var(--white); }
.footer-logo { max-width: 160px; margin-bottom: 1rem; display: block; }
.footer-contact address { font-style: normal; font-size: 0.875rem; line-height: 1.9; margin-bottom: 0.75rem; }
.footer-contact p { font-size: 0.875rem; margin-bottom: 0.35rem; }
.footer-contact a:not(.btn) { color: rgba(255,255,255,0.5); transition: color 0.15s; }
.footer-contact a:not(.btn):hover { color: var(--white); }
/* Footer legal band — white section below dark footer */
.footer-legal {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 0;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.footer-links a { font-size: 0.77rem; color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--primary); }
.footer-legal__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.footer-legal__disclaimer {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
  flex: 1;
  min-width: 240px;
}
.footer-legal__copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.footer-copy {
  font-size: 0.77rem;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.footer-legal__copy .site-by {
  font-size: 0.77rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.footer-legal__copy .site-by:hover { color: var(--primary); }

/* ===========================
   MODAL
   =========================== */
.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0,16,40,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.5rem;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  opacity: 0;
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }
/* Wider variant for content-heavy modals (e.g. the calculators grid) — roughly
   90% of the site's container width (var(--max-width): 1160px), not the viewport,
   so it doesn't blow out on large monitors. */
.modal--wide { max-width: 1050px; width: 92%; }
/* Service "at a glance" modals — wider than the 640px default so the points
   list and header image (.modal--has-image) don't feel cramped. */
.modal--service { max-width: 850px; width: 92%; }
/* Sub-brand modals — heading mirrors the .brand-family card (logo symbol +
   wordmark), everything centered to match. */
.modal--brand { text-align: center; }
.modal--brand .brand-family__logo { margin-bottom: 1.5rem; }

/* Our Process modal — light/modal variant (source pattern was a dark full-bleed
   section on another site; adapted colours for a white modal background). */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 600px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .process-steps { grid-template-columns: repeat(3, 1fr); } }
.process-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.process-step__num { font-family: 'Unbounded', sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.6rem; }
.process-step__icon { font-size: 1.5rem; color: var(--primary); opacity: 0.5; margin-bottom: 0.75rem; }
.process-step h3 { font-size: 0.9rem; font-weight: 600; color: var(--primary); margin-bottom: 0.5rem; line-height: 1.3; }
.process-step p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.modal h2 { font-size: 1.4rem; margin-bottom: 1.25rem; color: var(--primary); }
.modal__body p { font-size: 0.93rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
.modal__body p:last-child { margin-bottom: 0; }
.modal__points { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.modal__points li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.modal__points li i { color: var(--accent); font-size: 1.05rem; margin-top: 0.15rem; flex-shrink: 0; }
.modal__points li strong { color: var(--text); }

/* Service modal with a header photo (the 4 services that have a full
   standalone page already) — image bleeds to the modal's edges, content
   scrolls independently below it. */
.modal--has-image {
  padding: 0;
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal--has-image .modal__image {
  width: 100%;
  aspect-ratio: 4 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.modal--has-image .modal__content { padding: 2rem 2.5rem 2.5rem; overflow-y: auto; }
.modal--has-image .modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.modal__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
}
.modal__close:hover { color: var(--primary); }

/* Team profile modal — two columns: full portrait photo, then name/title/bio.
   Stacks to a single column (photo on top) below 620px. */
.modal--team {
  max-width: 1050px;
  width: 92%;
  padding: 0;
  overflow: hidden;
  max-height: 85vh;
}
.modal--team .modal__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .modal--team .modal__grid { grid-template-columns: 0.85fr 1.15fr; }
}
/* Fixed aspect ratio at every breakpoint (not stretched to the content
   column's height) so background-size: cover always frames the same amount
   of the photo, regardless of how long a given person's bio runs. */
.modal--team .modal__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  align-self: start;
  /* Matches .modal__content's padding (2.25rem top/bottom, 2rem left) so the
     photo is inset from the modal's top/bottom/left edges the same amount
     the text column is inset from the right. background-origin/clip:
     content-box keeps the image itself (and the fallback colour) confined
     inside that padding instead of bleeding underneath it. */
  padding: 2.25rem 0 2.25rem 2rem;
  background: var(--surface-teal-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal--team .modal__photo i { font-size: 3.5rem; color: var(--accent); opacity: 0.6; }
.modal--team .modal__content { padding: 2.25rem 2rem; overflow-y: auto; max-height: 85vh; }
/* Below 620px the grid stacks to 1 column, so the photo is no longer beside
   the text column — it's a full-width block above it. The desktop padding
   (top/left only, right:0 to butt against the text column) leaves the photo
   bleeding to the modal's top/right/left edges once stacked. Give it an
   even inset on top/left/right instead, drop its bottom padding since the
   text column's own top padding was stacking with it and pushing the name
   too far down, and tighten that top padding to close the gap. */
@media (max-width: 619px) {
  .modal--team .modal__photo { padding: 1.5rem 1.5rem 0 1.5rem; }
  .modal--team .modal__content { padding: 1rem 1.5rem 2.25rem; }
}
.modal--team .modal__content h2 { margin-bottom: 0.35rem; }
.modal--team .modal__job-title { font-size: 0.85rem; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 0.6rem; }
.modal--team .modal__credential {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.65rem;
  margin: 0 0 1.25rem;
}
.modal--team .modal__languages { font-size: 0.85rem; color: var(--text-muted); margin-top: 1.5rem; }
.modal--team .modal__languages-label { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); margin-right: 0.4rem; }
.modal--team .modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ===========================
   CONTENT PAGES (legal, charter etc)
   =========================== */
.content-page { padding: 4rem 0 5rem; }
.content-page__body { max-width: 760px; }
.content-page__body p { margin-bottom: 1.25rem; color: var(--text); line-height: 1.8; }

/* Footer nav — 6 blocks (3 service categories on row 1, life events split
   across 2 columns + company on row 2), auto-wrapping via a 3-col grid. */
.footer-nav-stack { display: flex; flex-direction: column; gap: 2.5rem; }
.footer-nav-group h4 { margin-bottom: 1.25rem; }
.footer-nav-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .footer-nav-columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-nav-columns { grid-template-columns: repeat(3, 1fr); } }
/* Small uppercase sub-label above each service column, under the shared
   "Services" heading — same treatment the old Financial Planning/Lending
   split used. */
.footer-nav__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 2.5fr; } }

/* ===========================
   PHOSPHOR ICONS
   =========================== */
.service-card__icon i,
.life-event-card__icon i,
.value-item__icon i {
  color: var(--accent);
  display: block;
}
.service-card__icon { font-size: 2rem; }
.life-event-card__icon { font-size: 2rem; }
.value-item__icon { font-size: 1.75rem; }

/* ===========================
   RESOURCE CARDS
   =========================== */
.resources-section { padding: 5rem 0; scroll-margin-top: var(--header-h, 100px); }
.resource-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
@media (min-width: 640px) {
  .resource-card { flex-direction: row; align-items: flex-start; gap: 2rem; }
}
.resource-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.resource-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 2rem;
  color: var(--accent);
}
.resource-card__icon img { width: 2.25rem; height: 2.25rem; }
.resource-card__body { flex: 1; }
.resource-card__body h3 { margin-bottom: 0.5rem; }
.resource-card__body p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
.resource-card__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 0.3rem; }

/* ===========================
   BACK TO TOP
   =========================== */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s;
  box-shadow: var(--shadow-lg);
}
#back-to-top.is-visible { opacity: 1; visibility: visible; }
#back-to-top:hover { background: var(--accent-light); }

/* ===========================
   UTILITIES
   =========================== */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }

/* ===========================
   DINGO VIDEO
   Neutralise injected Foundation classes and make iframes responsive
   =========================== */
#dingo .row.container {
  max-width: none;
  padding: 0;
  margin: 0 -0.75rem;
  display: flex;
  flex-wrap: wrap;
}
#dingo .columns {
  width: 100%;
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  #dingo .medium-6 { width: 50%; }
}
#dingo .flex-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
#dingo .flex-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#dingo h5 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

/* ===========================
   DINGO TAX DIARY
   =========================== */
#dingocontent_tax h1 {
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 2px solid var(--accent) !important;
  padding: 2.5rem 0 0.6rem !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: -0.01em;
}
#dingocontent_tax h1:first-child { padding-top: 0 !important; }
#dingocontent_tax h2 {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  font-weight: 400;
  color: var(--primary);
  margin: 1.75rem 0 0.6rem !important;
}
#dingocontent_tax p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 0.85em;
}
#dingocontent_tax blockquote {
  border-left: 3px solid var(--border);
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}
#dingocontent_tax blockquote p { font-size: 0.9rem; }
#dingocontent_tax hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}
#dingocontent_tax li { margin-bottom: 0.5em !important; }
/* Some month headers are hardcoded as <p><strong style="..."> — override inline styles */
#dingocontent_tax p:has(> strong[style]) {
  border-bottom: 2px solid var(--accent);
  padding: 2.5rem 0 0.6rem;
  margin-bottom: 0.5rem !important;
}
#dingocontent_tax p:has(> strong[style]):first-child { padding-top: 0; }
#dingocontent_tax p > strong[style] {
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
}

/* ===========================
   DINGO CALCULATORS
   Neutralise injected Foundation classes and apply site styling
   =========================== */
/* The source groups calculator categories into pairs via .row (2-per-row).
   display:contents dissolves each .row as a box so its .columns children
   join the .article flex container directly, letting all categories reflow
   as one continuous 3-per-row grid regardless of how they're paired in the
   source markup. */
#dingo_calcs .article { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; }
#dingo_calcs .row { display: contents; }
#dingo_calcs .columns {
  width: 100%;
  padding: 0 0.75rem;
  margin-bottom: 2.5rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  #dingo_calcs .medium-6 { width: 50%; }
}
@media (min-width: 900px) {
  #dingo_calcs .medium-6 { width: 33.333%; }
}
#dingo_calcs h3.headline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
}
#dingo_calcs ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
#dingo_calcs ul li { font-size: 0.68rem; color: var(--text-muted); }
#dingo_calcs ul li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem !important;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  line-height: 1;
}
#dingo_calcs ul li a::after { content: ' →'; font-size: 0.75em; opacity: 0.6; }
#dingo_calcs ul li a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
#dingo_calcs .article > p {
  width: 100%;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  max-width: 760px;
}

/* ===========================
   DINGO JOB LIST (tax deductions by job)
   Same neutralisation as dingo_calcs above — same source family.
   =========================== */
#dingo_list .article { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; }
#dingo_list .row { display: contents; }
#dingo_list .columns {
  width: 100%;
  padding: 0 0.75rem;
  margin-bottom: 2.5rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  #dingo_list .medium-6 { width: 50%; }
}
@media (min-width: 900px) {
  #dingo_list .medium-6 { width: 33.333%; }
}
#dingo_list h3.headline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
}
#dingo_list ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
#dingo_list ul li { font-size: 0.68rem; color: var(--text-muted); }
#dingo_list ul li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem !important;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  line-height: 1;
}
#dingo_list ul li a::after { content: ' →'; font-size: 0.75em; opacity: 0.6; }
#dingo_list ul li a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
#dingo_list .article > p {
  width: 100%;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  max-width: 760px;
}

.mt-lg { margin-top: 3rem; }