/* =====================================================
   PMA Advocates LLP — brand: navy + teal, refined institutional
   ===================================================== */

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 clamp(var(--space-5), 4vw, var(--space-10));
}

/* =========== EYEBROW =========== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-primary);
}
.eyebrow-dot {
  width: 22px;
  height: 2px;
  background: var(--color-teal);
  display: inline-block;
}
.eyebrow-light {
  color: var(--color-teal-soft);
}
.eyebrow-light .eyebrow-dot {
  background: var(--color-teal);
}

/* =========== BUTTONS =========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-sm {
  padding: var(--space-3) var(--space-5);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
}
.btn-lg {
  padding: var(--space-5) var(--space-10);
  font-size: 0.74rem;
}
.btn-primary {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal);
}
.btn-primary:hover {
  background: var(--color-teal-hover);
  border-color: var(--color-teal-hover);
}
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-ghost:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-light {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal);
}
.btn-light:hover {
  background: transparent;
  color: var(--color-teal-soft);
}

/* =========== HEADER =========== */
/* Brand-locked surface tokens.
   The header and footer are brand chrome, NOT themeable surfaces.
   Their background colors are fixed so the logo always has the correct contrast,
   regardless of whether the page body is in light or dark mode. */
:root, [data-theme="dark"] {
  --brand-header-bg: #F7F6F2;     /* warm cream, matches light-mode body */
  --brand-header-text: #1B3A4B;   /* navy */
  --brand-header-muted: #5A6970;
  --brand-header-hairline: #D4D1CA;

  --brand-footer-bg: #1B3A4B;     /* navy — always dark */
  --brand-footer-text: #CDCCCA;
  --brand-footer-muted: rgba(205, 204, 202, 0.65);
  --brand-footer-accent: #189AA4;
  --brand-footer-hairline: rgba(255, 255, 255, 0.15);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Fixed cream masthead — does NOT flip with theme */
  background: color-mix(in oklab, var(--brand-header-bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--brand-header-hairline);
  color: var(--brand-header-text);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
/* Force header text/link colors so they read on the cream surface
   regardless of the page theme. */
.site-header .site-nav-desktop a,
.site-header .site-nav-desktop a:link,
.site-header .site-nav-desktop a:visited {
  color: var(--brand-header-muted);
}
.site-header .site-nav-desktop a:hover,
.site-header .site-nav-desktop a[aria-current="page"] {
  color: var(--brand-header-text);
}
.site-header .theme-toggle {
  color: var(--brand-header-muted);
  border-color: var(--brand-header-hairline);
}
.site-header .theme-toggle:hover {
  color: var(--color-teal);
  border-color: var(--color-teal);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-hairline);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-primary);
}
.logo-mark {
  width: 44px;
  height: 44px;
  color: var(--color-teal);
  flex-shrink: 0;
}
/* Raster/image-based logo (final PMA artwork).

   Design decision: the logo appears on two SURFACES that are locked to fixed
   colors regardless of the page theme, so we never have to swap the logo:
     • Header  → always cream/white surface  → always the DARK (navy+teal) logo
     • Footer  → always navy surface         → always the LIGHT (cream+teal) logo
   This means the theme toggle can flip the body between light and dark, but
   the logo always sits on a surface with proper contrast. No JS, no swap. */
.logo-image {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.logo-image .logo-img {
  display: block;
  height: 54px;
  width: auto;
  max-width: 100%;
}
/* The header always shows the dark logo; the light variant is never rendered. */
.logo-image .logo-img--light { display: none; }
.logo-words {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-firm {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}
.logo-llp {
  font-size: 0.65em;
  letter-spacing: 0.22em;
  color: var(--color-teal);
  margin-left: 6px;
  font-weight: 500;
}
.logo-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-text-faint);
  margin-top: 6px;
  font-weight: 500;
}
.site-nav-desktop {
  display: none;
  gap: clamp(var(--space-5), 2vw, var(--space-8));
}
.site-nav-desktop a {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  padding: var(--space-2) 0;
}
.site-nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.site-nav-desktop a:hover {
  color: var(--color-primary);
}
.site-nav-desktop a:hover::after {
  transform: scaleX(1);
}
.site-nav-desktop a[aria-current='page'] {
  color: var(--color-primary);
}
.site-nav-desktop a[aria-current='page']::after {
  transform: scaleX(1);
  background: var(--color-teal);
}
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 1px solid var(--color-hairline);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover {
  color: var(--color-teal);
  border-color: var(--color-teal);
}
.header-actions .btn-primary {
  display: none;
}
@media (min-width: 900px) {
  .site-nav-desktop {
    display: inline-flex;
  }
  .header-actions .btn-primary {
    display: inline-flex;
  }
}

/* =========== HERO =========== */
.hero {
  position: relative;
  padding-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding-bottom: 0;
  overflow: hidden;
  background: var(--color-bg);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 90% 10%, var(--color-teal-tint) 0%, transparent 60%),
    radial-gradient(50% 60% at 5% 80%, var(--color-teal-tint) 0%, transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  padding-bottom: clamp(var(--space-16), 7vw, var(--space-24));
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  max-width: 18ch;
}
.hero-lede {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 46em;
  font-weight: 400;
}
.hero-lede strong {
  color: var(--color-primary);
  font-weight: 500;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-hairline);
}
.hero-stats dt {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.hero-stats dd {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Portrait */
.hero-portrait {
  position: relative;
}
.portrait-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 460px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}
.portrait-frame::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 20px;
  bottom: -14px;
  width: 20px;
  background: var(--color-teal);
  z-index: -1;
}
.portrait-frame::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: -14px;
  top: 40px;
  left: 30px;
  border: 1px solid var(--color-teal);
  z-index: -1;
  opacity: 0.6;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Wide (landscape) variant — used when the hero image is 16:9 editorial
   photography rather than a portrait. Larger max-width and matching object-fit. */
.portrait-frame--wide {
  aspect-ratio: 4 / 3;
  max-width: 560px;
}
.portrait-frame--wide img {
  object-position: center center;
}
.portrait-caption {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}
.portrait-caption::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-teal);
  margin: 0 auto var(--space-3);
}

/* =========== STATEMENT BAND =========== */
.statement-band {
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
}
.statement-band::before,
.statement-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-teal);
  opacity: 0.75;
}
.statement-band::before { top: 8px; }
.statement-band::after { bottom: 8px; }
.statement-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-teal-soft);
  text-align: center;
  margin-bottom: var(--space-8);
  font-weight: 600;
}
.statement-label::before,
.statement-label::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--color-teal);
  vertical-align: middle;
  margin: 0 var(--space-4);
  opacity: 0.7;
}
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.5;
  color: var(--color-text-inverse);
  text-align: center;
  max-width: 52ch;
  margin: 0 auto;
  font-weight: 400;
  letter-spacing: 0.005em;
  font-style: italic;
}

/* =========== SECTIONS =========== */
.section {
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  position: relative;
}
.section-head {
  max-width: 800px;
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-title {
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--color-primary);
  margin-top: var(--space-6);
  max-width: 24ch;
}
.section-head--center .section-title {
  margin-left: auto;
  margin-right: auto;
}
.section-lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  max-width: 62ch;
  line-height: 1.75;
  font-weight: 400;
}

/* =========== ABOUT =========== */
.about {
  background: var(--color-bg);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}
@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1.3fr 0.9fr;
  }
}
.about-copy p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: var(--space-5);
  max-width: 60ch;
}
.about-pillars {
  display: grid;
  gap: var(--space-6);
  position: sticky;
  top: 110px;
}
.pillar {
  padding: var(--space-6) var(--space-6);
  border-left: 2px solid var(--color-teal);
  background: var(--color-surface);
}
.pillar-num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--color-teal);
  letter-spacing: 0.3em;
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-3);
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}
.pillar p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* =========== VISION / MISSION =========== */
.vm {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.vm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 780px) {
  .vm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.vm-card {
  background: var(--color-bg);
  padding: clamp(var(--space-8), 3vw, var(--space-12));
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--color-teal);
}
.vm-card--alt {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  border-top: 3px solid var(--color-teal);
}
.vm-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.3;
  color: var(--color-primary);
  font-weight: 500;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  letter-spacing: 0.005em;
}
.vm-card--alt .vm-title {
  color: var(--color-text-inverse);
}
.vm-card p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.vm-card--alt p {
  color: color-mix(in oklab, var(--color-text-inverse) 82%, transparent);
}

/* =========== PRACTICE GRID =========== */
.practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 2px solid var(--color-teal);
  border-left: 1px solid var(--color-divider);
}
@media (min-width: 640px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .practice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.practice-card {
  padding: clamp(var(--space-8), 2.5vw, var(--space-10)) clamp(var(--space-6), 2vw, var(--space-8));
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  transition: background var(--transition);
  background: var(--color-bg);
}
.practice-card:hover {
  background: var(--color-teal-tint);
}
.practice-card:hover .practice-num {
  color: var(--color-teal-hover);
}
.practice-num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--color-teal);
  display: block;
  margin-bottom: var(--space-6);
  letter-spacing: 0.3em;
  transition: color var(--transition);
  font-weight: 600;
}
.practice-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.practice-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.practice-footnote {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--color-teal-tint);
  border-left: 2px solid var(--color-teal);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-style: italic;
}

/* =========== FEATURED EXPERTISE =========== */
.featured {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.featured-list {
  display: grid;
  gap: var(--space-6);
  max-width: 1020px;
  margin: 0 auto;
}
.featured-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: clamp(var(--space-5), 3vw, var(--space-10));
  padding: clamp(var(--space-8), 3vw, var(--space-10));
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  transition: transform var(--transition), box-shadow var(--transition);
}
.featured-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.featured-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-teal);
  font-weight: 500;
  line-height: 1;
}
.featured-body h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: var(--space-4);
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.featured-body p {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 68ch;
}
.featured-body p + p {
  margin-top: var(--space-4);
}
.featured-tags {
  font-size: 0.78rem !important;
  color: var(--color-teal-hover) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding-top: var(--space-5);
  margin-top: var(--space-5) !important;
  border-top: 1px solid var(--color-divider);
}

/* =========== TEAM =========== */
.team {
  background: var(--color-bg);
}
.team-founder {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
  padding-bottom: clamp(var(--space-12), 5vw, var(--space-16));
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
}
@media (min-width: 900px) {
  .team-founder {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.founder-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  position: relative;
}
.founder-media::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 18px;
  bottom: -12px;
  width: 16px;
  background: var(--color-teal);
  z-index: -1;
}
.founder-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.team-role {
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-teal);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.team-name {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: var(--space-5);
  letter-spacing: 0.005em;
  line-height: 1;
}
.founder-tag {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-teal-hover);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
  max-width: 62ch;   /* match paragraphs so the right edge lines up */
}
.founder-copy p {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: var(--space-5);
  max-width: 62ch;
}
.founder-copy p:first-of-type {
  margin-top: 0;
}

.team-partners {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
}
.team-partner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-teal);
}
@media (min-width: 780px) {
  .team-partner {
    grid-template-columns: 0.4fr 1fr;
    align-items: start;
  }
}
.partner-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface-offset);
}
.partner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.partner-copy .team-name {
  font-size: 1.9rem;
  margin-bottom: var(--space-4);
}
.partner-copy p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-top: var(--space-4);
  max-width: 60ch;
}
.partner-copy p:first-of-type {
  margin-top: 0;
}

.team-anchor-head {
  margin-bottom: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-hairline);
}
.team-anchor-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-primary);
  font-weight: 500;
  margin-top: var(--space-5);
  letter-spacing: 0.005em;
}
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.team-card {
  display: flex;
  flex-direction: column;
}
.team-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  position: relative;
  transition: transform var(--transition);
}
.team-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.team-card:hover .team-photo::after {
  transform: scaleX(1);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover .team-photo img {
  transform: scale(1.03);
}
.team-role--sm {
  font-size: 0.6rem;
  margin-bottom: var(--space-2);
}
.team-name--sm {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.team-bio {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* =========== CHAMBERS =========== */
.chambers {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.chambers::before,
.chambers::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-teal);
  opacity: 0.75;
}
.chambers::before { top: 8px; }
.chambers::after { bottom: 8px; }
.chambers-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 6vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .chambers-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.chambers-lede {
  font-size: var(--text-base);
  color: color-mix(in oklab, var(--color-text-inverse) 80%, transparent);
  margin-top: var(--space-6);
  max-width: 46em;
  line-height: 1.75;
  font-weight: 400;
}
.chambers-lede strong {
  color: var(--color-text-inverse);
  font-weight: 500;
}
/* Chambers detail list — mirrors .contact-list exactly, but on the navy band.
   Every row is label + value, separated by a subtle hairline. */
.chambers-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.chambers-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.chambers-list li:last-child {
  border-bottom: none;
}
.chambers-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-teal-soft);
  font-weight: 600;
}
.chambers-value {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--color-text-inverse);
  letter-spacing: 0.005em;
  line-height: 1.65;
}

.section-title--light {
  color: var(--color-text-inverse);
  max-width: 24ch;
}

.chambers-visual {
  position: relative;
  padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.visual-frame {
  aspect-ratio: 1 / 1;
  max-width: 380px;
  margin: 0 auto;
  border: 1px solid var(--color-teal);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: color-mix(in oklab, var(--color-teal) 10%, transparent);
}
.visual-frame::before {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid var(--color-teal);
  opacity: 0.35;
  pointer-events: none;
}
.visual-monogram {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6rem);
  color: var(--color-teal-soft);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.visual-line {
  width: 60px;
  height: 2px;
  background: var(--color-teal);
  margin: var(--space-6) 0;
}
.visual-label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text-inverse);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 500;
}
.visual-nairobi {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--color-teal-soft);
  text-transform: uppercase;
  margin-top: var(--space-4);
  font-weight: 500;
}

/* =========== CONTACT =========== */
.contact {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-hairline);
  position: relative;
  overflow: hidden;
}
/* When the contact block follows the page hero, tighten the top padding so
   the two blocks read as one continuous flow instead of a floating island. */
.page-hero + .contact {
  padding-top: clamp(var(--space-10), 5vw, var(--space-14));
}
.contact-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-10), 4vw, var(--space-14));
  }
}
.contact .eyebrow-light {
  color: var(--color-teal);
}
.contact .section-title--light {
  color: var(--color-primary);
}
.contact-lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  max-width: 46em;
  line-height: 1.75;
  font-weight: 400;
}
/* Contact details list. Each row is a label + value. The hairline separates
   the section title from the detail rows; keep it aligned to the content. */
.contact-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-hairline);
}
.contact-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.contact-list li:last-child {
  border-bottom: none;
}
.contact-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-teal);
  font-weight: 600;
}
.contact-value {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--color-primary);
  letter-spacing: 0.005em;
  line-height: 1.6;
}
a.contact-value:hover {
  color: var(--color-teal);
}

/* Form */
.contact-form {
  background: var(--color-bg);
  padding: clamp(var(--space-8), 3vw, var(--space-10));
  border-radius: 0;
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--color-teal);
  display: grid;
  gap: var(--space-6);
  box-shadow: var(--shadow-md);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.contact-form label {
  display: grid;
  gap: var(--space-2);
}
.contact-form label > span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-teal);
  font-weight: 600;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-primary);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition);
}
.contact-form select option {
  background: var(--color-bg);
  color: var(--color-primary);
}
.contact-form textarea {
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-bottom-color: var(--color-teal);
}
.form-note {
  font-size: 0.72rem;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  margin-top: 0;
  letter-spacing: 0.01em;
}
.form-thanks {
  font-size: 0.86rem;
  color: var(--color-teal-hover);
  padding: var(--space-4);
  border: 1px solid var(--color-teal);
  background: var(--color-teal-tint);
  border-radius: 0;
  text-align: center;
}
.contact-form .btn-light {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal);
  justify-self: start;
}
.contact-form .btn-light:hover {
  background: var(--color-teal-hover);
  color: #ffffff;
}

/* =========== FOOTER =========== */
/* Footer is brand chrome, locked to navy. It does NOT flip with the theme,
   so the light cream logo always contrasts properly. */
.site-footer {
  background: var(--brand-footer-bg);
  border-top: 2px solid var(--brand-footer-accent);
  padding: clamp(var(--space-12), 5vw, var(--space-16)) 0 var(--space-8);
  color: var(--brand-footer-muted);
}
.site-footer a,
.site-footer a:link,
.site-footer a:visited {
  color: var(--brand-footer-text);
}
.site-footer a:hover {
  color: var(--brand-footer-accent);
}
.site-footer .footer-firm,
.site-footer .footer-heading,
.site-footer .footer-value {
  color: var(--brand-footer-text);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
  }
}
.footer-logo-img {
  display: block;
  height: 80px;
  width: auto;
  margin-bottom: 12px;
  /* Footer is always navy — the light logo variant reads cleanly there. No
     tile background needed. */
}
.footer-brand .logo-mark {
  width: 50px;
  height: 50px;
  color: var(--color-teal);
  margin-bottom: var(--space-5);
}
.footer-firm {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text-inverse);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.footer-sub {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-teal-soft);
  margin-top: var(--space-3);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-teal);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.footer-col a,
.footer-col span {
  font-size: 0.86rem;
  color: color-mix(in oklab, var(--color-text-inverse) 72%, transparent);
  line-height: 1.6;
}
.footer-col a:hover {
  color: var(--color-teal-soft);
}

/* Footer contact list — mirrors .contact-list and .chambers-list so every
   place on the site that shows contact info uses the same lined-up label|value
   grid with hairline dividers. Adapted for the dark navy footer surface. */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-contact-list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-contact-list li:last-child {
  border-bottom: none;
}
.footer-contact-list .fc-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--brand-footer-accent);
  font-weight: 600;
  line-height: 1.6;
}
.footer-contact-list .fc-value {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--brand-footer-text);
  line-height: 1.6;
  letter-spacing: 0.005em;
}
a.fc-value:hover {
  color: var(--brand-footer-accent);
}

.footer-fine {
  font-size: 0.76rem;
  line-height: 1.75;
  color: color-mix(in oklab, var(--color-text-inverse) 55%, transparent);
  max-width: 42ch;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  margin-top: var(--space-12);
  border-top: 1px solid oklch(from var(--color-text-inverse) l c h / 0.15);
  font-size: 0.72rem;
  color: color-mix(in oklab, var(--color-text-inverse) 45%, transparent);
  letter-spacing: 0.02em;
}

/* =========== SCROLL REVEAL =========== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========== RESPONSIVE HELPERS =========== */
@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .featured-item {
    grid-template-columns: 40px 1fr;
    gap: var(--space-4);
  }
  .chambers-list li,
  .contact-list li {
    grid-template-columns: 110px 1fr;
  }
  .header-inner {
    gap: var(--space-3);
  }
  .logo-sub {
    display: none;
  }
  .statement-label::before,
  .statement-label::after {
    width: 18px;
    margin: 0 var(--space-3);
  }
}

/* =====================================================
   MULTI-PAGE ADDITIONS
   ===================================================== */

/* =========== MOBILE MENU DRAWER =========== */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-hairline);
  color: var(--color-primary);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.menu-toggle span {
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; position: relative; z-index: 62; }
  .header-actions .btn-primary { display: none; }
  .site-nav-desktop { display: none !important; }
  .site-header { z-index: 60; }
}

/* Mobile drawer (lives at body-level so it's not trapped by header backdrop-filter) */
.site-nav-drawer {
  display: none;
}
@media (max-width: 899px) {
  .site-nav-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--color-bg);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .site-nav-drawer {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }

  .drawer-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 180px var(--space-6) var(--space-10);
    max-width: 560px;
    margin: 0 auto;
  }
  .site-nav-drawer a[data-nav] {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--color-primary);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-divider);
    line-height: 1;
    text-decoration: none;
    transition: color var(--transition), padding-left var(--transition);
  }
  .site-nav-drawer a[data-nav]:hover {
    color: var(--color-teal);
    padding-left: var(--space-3);
  }
  .site-nav-drawer a[data-nav][aria-current='page'] {
    color: var(--color-teal);
  }
  .drawer-cta {
    margin-top: var(--space-8);
    justify-content: center;
    text-align: center;
  }
  .drawer-wa {
    margin-top: var(--space-3);
    justify-content: center;
    text-align: center;
    color: #25d366 !important;
    border-color: #25d366 !important;
    display: inline-flex;
    gap: var(--space-3);
  }
  .drawer-wa svg { color: currentColor; }
}

/* =========== PAGE HERO (sub-pages) =========== */
.page-hero {
  background: var(--color-bg);
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0 clamp(var(--space-12), 6vw, var(--space-16));
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-divider);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 100% 0%, var(--color-teal-tint) 0%, transparent 55%),
    radial-gradient(50% 60% at 0% 100%, var(--color-teal-tint) 0%, transparent 50%);
  opacity: 0.55;
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.page-lede {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 60ch;
  font-weight: 400;
}
.page-lede strong {
  color: var(--color-primary);
  font-weight: 500;
}

/* =========== PREVIEW GRID (home) =========== */
.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
@media (min-width: 640px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .preview-grid { grid-template-columns: repeat(3, 1fr); } }
.preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-6), 2vw, var(--space-8));
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-top: 3px solid transparent;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  color: inherit;
  text-decoration: none;
}
.preview-card:hover {
  border-top-color: var(--color-teal);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.preview-num {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--color-teal);
  letter-spacing: 0.3em;
  font-weight: 600;
}
.preview-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.preview-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}
.preview-link {
  font-family: var(--font-body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-teal);
  font-weight: 600;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-2);
}

/* =========== SECTION CTA (below preview grids) =========== */
.section-cta {
  margin-top: var(--space-12);
  text-align: center;
}

/* =========== TEAM PREVIEW (home) =========== */
.team-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
@media (min-width: 640px) { .team-preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .team-preview-grid { grid-template-columns: repeat(4, 1fr); } }
.team-preview-card {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: transform var(--transition);
}
.team-preview-card:hover { transform: translateY(-3px); }
.team-preview-card .team-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
  position: relative;
}
.team-preview-card .team-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.team-preview-card:hover .team-photo::after { transform: scaleX(1); }
.team-preview-card .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.team-preview-card:hover .team-photo img { transform: scale(1.03); }
.team-preview-card.is-lead .team-photo {
  border-top: 3px solid var(--color-teal);
  border-color: var(--color-teal);
}

/* =========== EDITORIAL BANDS + FIGURES =========== */
.editorial-band {
  padding: 0;
  overflow: hidden;
}
.editorial-band img {
  width: 100%;
  height: clamp(280px, 40vh, 480px);
  object-fit: cover;
  display: block;
}
.editorial-band--tall img { height: clamp(360px, 55vh, 620px); }

.editorial-figure {
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0;
  position: relative;
}
.editorial-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid var(--color-hairline);
}
.editorial-figure figcaption {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-4);
  font-weight: 500;
}
.editorial-figure figcaption::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-teal);
  vertical-align: middle;
  margin-right: var(--space-3);
}

/* =========== TEXT LINK =========== */
.text-link {
  color: var(--color-teal);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--transition);
}
.text-link:hover { color: var(--color-teal-hover); }

/* =========== STAT BLOCK (about page) =========== */
.stat-block {
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--color-teal);
  position: sticky;
  top: 110px;
}
.stat-eyebrow {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-teal);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.stat-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.stat-list li {
  font-size: 0.92rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.5;
}
.stat-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--color-teal);
}

/* =========== FULL TEAM GRID (team page) =========== */
.team-grid--full {
  gap: var(--space-10);
}
@media (min-width: 640px) { .team-grid--full { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .team-grid--full { grid-template-columns: repeat(3, 1fr); } }

/* =========== CTA BAND =========== */
.cta-band {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: clamp(var(--space-12), 6vw, var(--space-16)) 0;
  position: relative;
}
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-teal);
  opacity: 0.75;
}
.cta-band::before { top: 8px; }
.cta-band::after { bottom: 8px; }
.cta-band .eyebrow-light { color: var(--color-teal-soft); }
.cta-band-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 780px) {
  .cta-band-inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-12);
  }
}
.cta-band .section-title--light {
  max-width: 32ch;
  margin-top: var(--space-4);
}
.cta-band .btn-light {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #ffffff;
  justify-self: start;
}
.cta-band .btn-light:hover {
  background: var(--color-teal-hover);
  color: #ffffff;
}

/* =========== MAP CALLOUT (chambers page) =========== */
.map-callout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: clamp(var(--space-8), 3vw, var(--space-12));
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-teal);
  align-items: center;
}
@media (min-width: 780px) {
  .map-callout { grid-template-columns: 1fr auto; }
}
.map-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  color: var(--color-primary);
  font-weight: 500;
  margin-top: var(--space-4);
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.map-copy {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: var(--space-4);
  max-width: 56ch;
}

/* Contact page: form + info side-by-side */
.contact .contact-lede { display: none; }

/* =====================================================
   WORLD-CLASS UPGRADE — trust, motion, reviews, WhatsApp
   ===================================================== */

/* -------- CREDENTIALS STRIP (top of every page) -------- */
.credentials-strip {
  background: var(--color-primary);
  color: var(--color-teal-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--space-3) 0;
  border-bottom: 1px solid oklch(from var(--color-teal) l c h / 0.35);
  overflow: hidden;
  font-weight: 500;
}
.credentials-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-5), 4vw, var(--space-10));
  row-gap: var(--space-2);
}
.cred-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: color-mix(in oklab, var(--color-text-inverse) 75%, transparent);
  white-space: nowrap;
}
.cred-item svg {
  color: var(--color-teal);
  flex-shrink: 0;
}
@media (max-width: 780px) {
  .credentials-strip {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    padding: var(--space-2) 0;
  }
  .cred-item svg { width: 12px; height: 12px; }
}

/* -------- WHATSAPP FAB -------- */
.whatsapp-fab {
  position: fixed;
  bottom: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  background: #25d366;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.28), 0 4px 10px oklch(0 0 0 / 0.16);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 90;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.whatsapp-fab:hover {
  transform: translateY(-2px);
  background: #1ebe57;
  box-shadow: 0 14px 40px oklch(0 0 0 / 0.32), 0 6px 12px oklch(0 0 0 / 0.2);
}
.whatsapp-fab svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .whatsapp-fab-label { display: none; }
  .whatsapp-fab {
    padding: 14px;
    width: 56px;
    height: 56px;
    justify-content: center;
  }
}

/* -------- RECENT WORK -------- */
.recent-work { background: var(--color-bg); }
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-teal);
}
@media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card {
  padding: clamp(var(--space-8), 3vw, var(--space-10));
  border-bottom: 1px solid var(--color-divider);
  border-right: 1px solid var(--color-divider);
  background: var(--color-bg);
  transition: background var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.work-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.work-card:hover { background: var(--color-teal-tint); }
.work-card:hover::before { transform: scaleY(1); }
@media (min-width: 640px) { .work-card:nth-child(2n) { border-right: none; } }
@media (min-width: 1020px) {
  .work-card:nth-child(2n) { border-right: 1px solid var(--color-divider); }
  .work-card:nth-child(3n) { border-right: none; }
}
.work-tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-teal);
  font-weight: 600;
  align-self: flex-start;
}
.work-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.005em;
  line-height: 1.35;
}
.work-meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-weight: 500;
}

/* -------- REVIEWS: STRIP (home) -------- */
.reviews-strip-section { background: var(--color-surface-offset); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }
.strip-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
}
.strip-summary-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.reviews-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
@media (min-width: 780px) { .reviews-strip { grid-template-columns: repeat(3, 1fr); } }

/* -------- REVIEWS: PAGE -------- */
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-hairline);
}
.reviews-avg {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.reviews-avg-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--color-primary);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.reviews-avg-stars { display: inline-flex; }
.reviews-avg-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.reviews-page-section { background: var(--color-bg); }
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .review-card--featured { grid-column: span 2; grid-row: span 2; }
}
.reviews-loading, .reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16);
  font-family: var(--font-body);
  color: var(--color-text-muted);
}
.reviews-empty p { margin-bottom: var(--space-5); }

/* -------- REVIEW CARD -------- */
.review-card {
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.review-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-hairline); }
.review-card:hover::before { transform: scaleX(1); }
.review-card--featured {
  background: linear-gradient(150deg, var(--color-teal-tint), var(--color-bg) 60%);
  border-color: var(--color-teal);
}
.review-card--featured::before { transform: scaleX(1); }
.review-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--color-hairline);
  flex-shrink: 0;
}
.review-avatar--mono {
  background: var(--color-primary);
  color: var(--color-teal-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.review-who { min-width: 0; }
.review-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-role {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stars {
  display: inline-flex;
  gap: 2px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-hairline);
}
.stars--lg { font-size: 1.35rem; }
.star--on { color: var(--color-teal); }
.review-body {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-primary);
  font-style: italic;
  font-weight: 400;
  flex: 1;
}
.review-card--featured .review-body {
  font-size: 1.2rem;
  line-height: 1.55;
}
.review-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-faint);
  font-weight: 500;
}
.review-tag { color: var(--color-teal); }

/* -------- REVIEW SUBMISSION FORM -------- */
.review-form-section { background: var(--color-surface-offset); }
.review-form-wrap { max-width: 720px; margin: 0 auto; }
.review-form {
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--color-teal);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  display: grid;
  gap: var(--space-6);
  box-shadow: var(--shadow-md);
}
.review-form.is-submitted > *:not([data-form-thanks]) { opacity: 0.5; pointer-events: none; }
.review-form label { display: grid; gap: var(--space-2); }
.review-form label > span,
.review-form legend span,
.upload-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-teal);
  font-weight: 600;
}
.review-form input[type=text],
.review-form input[type=email],
.review-form input[type=tel],
.review-form textarea,
.review-form select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-primary);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  outline: none;
  transition: border-color var(--transition);
}
.review-form input[type=text]:focus,
.review-form textarea:focus,
.review-form select:focus { border-bottom-color: var(--color-teal); }
.review-form textarea { resize: vertical; min-height: 140px; }
.field-hint {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
  text-align: right;
}

.rating-field {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.rating-field legend { padding: 0; margin-bottom: var(--space-3); }
.rating-stars {
  display: flex;
  gap: var(--space-2);
}
.rating-stars button {
  font-size: 2.2rem;
  color: var(--color-hairline);
  line-height: 1;
  padding: 4px 8px;
  transition: color var(--transition), transform var(--transition);
  background: transparent;
  border: none;
  cursor: pointer;
}
.rating-stars button:hover { transform: scale(1.1); }
.rating-stars button.is-on,
.rating-stars button.is-hover { color: var(--color-teal); }
.rating-hint {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
  font-style: italic;
}

.photo-upload { display: grid; gap: var(--space-3); }
.upload-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 2px dashed var(--color-hairline);
  padding: var(--space-6);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
  overflow: hidden;
}
.upload-drop:hover { border-color: var(--color-teal); background: var(--color-teal-tint); }
.upload-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  text-align: center;
}
.upload-drop-icon { color: var(--color-teal); }
.upload-drop-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.upload-preview {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
}
.upload-preview[hidden] { display: none !important; }
.upload-clear {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  font-weight: 600;
  padding: 0;
  align-self: flex-start;
  text-decoration: underline;
  cursor: pointer;
}

.form-thanks[data-form-thanks] {
  padding: var(--space-8);
  text-align: center;
  border: 1px solid var(--color-teal);
  background: var(--color-teal-tint);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  pointer-events: auto !important;
  opacity: 1 !important;
}
.form-thanks h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-primary);
  font-weight: 500;
}
.form-thanks p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.form-error {
  padding: var(--space-3) var(--space-4);
  background: oklch(from #b91c1c l c h / 0.08);
  border-left: 3px solid #b91c1c;
  color: #7f1010;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* -------- GSAP-friendly hero title reveal -------- */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.reveal-line-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* -------- Header behaviour tweak (deeper scroll = tighter header) -------- */
body.is-scrolled-deep .site-header {
  box-shadow: var(--shadow-sm);
}
body.is-scrolled-deep .credentials-strip {
  transform: translateY(-100%);
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms, height 380ms cubic-bezier(0.16, 1, 0.3, 1), padding 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.credentials-strip {
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms;
}

/* -------- Hero portrait 3D transform prep -------- */
.hero-portrait .portrait-frame {
  transform-style: preserve-3d;
  will-change: transform;
}

/* -------- Small polish -------- */
.section-cta .btn + .btn { margin-left: var(--space-3); }


/* ============================================================
   INSIGHTS + EVENTS SHARED HUB TEMPLATE
   ============================================================ */

/* Hero band — same for insights & events */
.hub-hero {
  background: var(--color-primary);
  color: var(--color-surface);
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px);
  border-bottom: 4px solid var(--color-teal);
}
.hub-hero .eyebrow {
  color: var(--color-teal-soft);
}
.hub-hero .eyebrow-dot {
  background: var(--color-teal);
}
.hub-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-surface);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 22ch;
}
.hub-hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-teal-soft);
  max-width: 60ch;
  margin: 0;
}

/* Filter bar */
.hub-filter-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
  padding: var(--space-5) 0;
  position: sticky;
  top: 0;
  z-index: 20;
}
.hub-filter-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}
.hub-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-filter-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  font-weight: 500;
}
.hub-filter-select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-primary);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--color-primary);
  padding: 4px 20px 4px 0;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231B3A4B' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
}
.hub-filter-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Grid section */
.hub-grid-section {
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 120px);
  background: var(--color-background);
}
.hub-grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .hub-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Card */
.hub-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}
.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(27, 58, 75, 0.25);
  border-color: var(--color-teal);
}
.hub-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-teal-tint);
}
.hub-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hub-card:hover .hub-card-media img {
  transform: scale(1.04);
}
.hub-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--color-primary);
}
.hub-card-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hub-card-meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-teal);
  margin: 0;
  font-weight: 500;
}
.hub-card-dot { margin: 0 6px; color: var(--color-text-faint); }
.hub-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0;
}
.hub-card-deck {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.hub-card-byline {
  margin: auto 0 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.hub-card-author {
  color: var(--color-primary);
  font-weight: 500;
}

/* Empty state on the hub grid */
.hub-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}
.hub-empty p { margin-bottom: var(--space-4); font-size: 1rem; }

/* -------- DOWNLOAD BAND (below insights list) -------- */
.hub-download-band {
  background: var(--color-primary);
  color: var(--color-surface);
  padding: clamp(60px, 8vw, 90px) 0;
  border-top: 4px solid var(--color-teal);
}
.hub-download-inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .hub-download-inner { grid-template-columns: 1.6fr 1fr; }
  .hub-download-inner .btn { justify-self: end; }
}
.hub-download-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin: var(--space-3) 0;
  color: var(--color-surface);
}
.hub-download-lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-teal-soft);
  max-width: 55ch;
  margin: 0;
}

/* ============================================================
   EVENTS — empty state + past section
   ============================================================ */
.events-empty-hero {
  text-align: center;
  padding: clamp(60px, 8vw, 100px) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  max-width: 780px;
  margin: 0 auto;
}
.events-empty-icon {
  color: var(--color-teal);
  margin-bottom: var(--space-5);
  display: inline-flex;
}
.events-empty-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 500;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
}
.events-empty-lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 55ch;
  margin: 0 auto var(--space-6);
}
.events-empty-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.events-past-section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-hairline);
}
.events-past-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  font-weight: 500;
}
.events-past-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-faint);
  margin: 0;
}

/* ============================================================
   INDIVIDUAL ARTICLE PAGE — hero + body typography
   ============================================================ */
.article-page {
  background: var(--color-background);
}
.article-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-surface);
  padding: clamp(80px, 12vw, 160px) 0 clamp(50px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}
.article-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--article-hero-image);
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.article-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 37, 48, 0.35) 0%,
    rgba(15, 37, 48, 0.55) 40%,
    rgba(15, 37, 48, 0.92) 100%);
  z-index: -1;
}
.article-hero-inner { max-width: 900px; }
.article-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 37, 48, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-teal-soft);
  margin-bottom: var(--space-5);
}
.article-hero-meta-dot { color: var(--color-teal); }
.article-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-surface);
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}
.article-hero-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-teal-soft);
  margin: 0 0 var(--space-6);
  max-width: 55ch;
}
.article-hero-byline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-surface);
}
.article-hero-byline a {
  color: var(--color-teal-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-teal);
}
.article-hero-byline a:hover { color: var(--color-surface); }

/* Body */
.article-body {
  padding: clamp(60px, 8vw, 100px) 0;
}
.article-body-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}
.article-body-inner p { margin: 0 0 var(--space-5); }
.article-body-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary);
  margin: var(--space-8) 0 var(--space-4);
}
.article-body-inner h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-primary);
  margin: var(--space-6) 0 var(--space-3);
}
.article-body-inner ul,
.article-body-inner ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
}
.article-body-inner li { margin-bottom: var(--space-2); }
.article-body-inner strong { color: var(--color-primary); font-weight: 600; }
.article-body-inner em { font-style: italic; }
.article-body-inner blockquote,
.article-body-inner .article-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--color-primary);
  border-left: 3px solid var(--color-teal);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  margin: var(--space-7) 0;
  max-width: none;
}
.article-body-inner hr {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-7) 0;
}

/* Article CTA — bottom of every insight */
.article-cta {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-hairline);
  padding: var(--space-6);
  margin: var(--space-8) 0 0;
  display: grid;
  gap: var(--space-4);
}
.article-cta-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-teal);
  margin: 0;
  font-weight: 500;
}
.article-cta-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-primary);
  margin: 0;
}
.article-cta-lede {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Related insights strip */
.related-insights {
  padding: clamp(60px, 8vw, 90px) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
}
.related-insights-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
}

/* ------------- DARK MODE tweaks for hub components ------------- */
[data-theme="dark"] .hub-filter-select {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CDCCCA' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
}
[data-theme="dark"] .hub-card {
  background: var(--color-surface);
  border-color: var(--color-hairline);
}
[data-theme="dark"] .hub-card-badge {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-text);
}

/* ---- Latest insights by [author] on team profile ---- */
.founder-insights {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}
.founder-insights-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 0;
}
.founder-insights-list li {
  border-bottom: 1px solid var(--color-divider);
}
.founder-insights-list li:last-child {
  border-bottom: none;
}
.founder-insights-list a {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: var(--color-primary);
  align-items: baseline;
  transition: color 0.2s ease;
}
.founder-insights-list a:hover { color: var(--color-teal); }
.fi-date {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.fi-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  color: currentColor;
}
.fi-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-teal);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .founder-insights-list a {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .fi-tag { justify-self: start; }
}
.founder-insights-more {
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin: var(--space-4) 0 0;
}
.founder-insights-more a {
  color: var(--color-teal);
  text-decoration: none;
  font-weight: 500;
}
.founder-insights-more a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Header nav dropdown ---- */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.nav-dropdown-toggle:hover {
  color: var(--color-teal);
}
.nav-dropdown-toggle svg {
  transition: transform 0.2s ease;
}
.nav-dropdown[data-open="true"] .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 20px 40px -20px rgba(27, 58, 75, 0.25);
  padding: var(--space-3) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 60;
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-panel a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  transition: background 0.2s ease;
}
.nav-dropdown-panel a:hover {
  background: var(--color-teal-tint);
}
.nav-dd-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-primary);
  text-transform: none;
  letter-spacing: 0;
}
.nav-dd-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Footer working-hours line — small separation from the address block */
.footer-col .footer-hours {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-teal-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
}


/* ============================================================
   THE BRIEF (e-book landing) — premium, editorial, Uzazi pattern.
   Structure: centered intro (breadcrumb + eyebrow + title + lede)
   + one integrated rounded card containing:
     LEFT column  — book-cover-styled portrait with FREE chip
     RIGHT column — eyebrow, serif title, subtitle, body, features, form.
   ============================================================ */

/* --- BASE --- */
.brief-page { background: var(--color-bg); }

/* --- INTRO (centered breadcrumb + hero) --- */
.brief-intro {
  padding: clamp(var(--space-14), 6vw, var(--space-20)) 0 clamp(var(--space-10), 4vw, var(--space-14));
  text-align: center;
  background: var(--color-bg);
}
.brief-intro-inner {
  max-width: 720px;
  margin: 0 auto;
}
.brief-crumbs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
}
.brief-crumbs a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.brief-crumbs a:hover { color: var(--color-teal); }
.brief-crumbs > span[aria-hidden] { color: var(--color-text-faint); }
.brief-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-teal);
  font-weight: 600;
  margin: 0 0 var(--space-6);
}
.brief-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0 0 var(--space-6);
}
.brief-lede {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* --- OFFER CARD --- */
.brief-offer {
  padding: 0 0 clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-bg);
}
.brief-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: 20px;
  padding: clamp(var(--space-8), 4vw, var(--space-14));
  box-shadow:
    0 30px 60px -30px rgba(15, 37, 48, 0.15),
    0 12px 24px -12px rgba(15, 37, 48, 0.08);
  overflow: hidden;
  position: relative;
}
.brief-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .brief-card-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* --- LEFT: book cover --- */
.brief-cover-col {
  position: relative;
  padding: clamp(var(--space-4), 2vw, var(--space-6));
}
.brief-cover-frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-hairline);
  padding: clamp(var(--space-3), 1.5vw, var(--space-5));
  border-radius: 6px;
  box-shadow:
    0 24px 40px -24px rgba(15, 37, 48, 0.35),
    0 8px 16px -8px rgba(15, 37, 48, 0.20);
  isolation: isolate;
}
/* Thin teal spine on the left edge — echoes the letterhead */
.brief-cover-frame::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--color-teal);
  border-radius: 6px 0 0 6px;
  opacity: 0.85;
}
.brief-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 4px;
}
.brief-cover-tag {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  border-radius: 999px;
  box-shadow: 0 8px 16px -8px rgba(15, 37, 48, 0.4);
}

/* --- RIGHT: copy + form --- */
.brief-copy-col {
  min-width: 0; /* let the column shrink so inputs don't overflow */
}
.brief-card-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-teal);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
.brief-card-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0 0 var(--space-3);
}
.brief-card-subtitle {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-teal-hover);
  margin: 0 0 var(--space-6);
  font-weight: 400;
}
.brief-card-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-8);
}
.brief-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-6);
}
@media (min-width: 560px) {
  .brief-features { grid-template-columns: 1fr 1fr; }
}
.brief-features li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
}
.brief-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
}

/* --- FORM (aligned label|input rows, no wrapping issues) --- */
.brief-form {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}
.brief-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 560px) {
  .brief-form-row { grid-template-columns: 1fr 1fr; }
}
.brief-form label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.brief-form label > span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}
.brief-form input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  color: var(--color-primary);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: 0.98rem;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
  min-width: 0;
}
.brief-form input::placeholder {
  color: var(--color-text-faint);
}
.brief-form input:hover {
  border-color: var(--color-text-faint);
}
.brief-form input:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-teal) 20%, transparent);
  background: var(--color-bg);
}
.brief-form-full { display: grid; }
.brief-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.brief-submit {
  border-radius: 999px;
  padding: var(--space-4) var(--space-8);
}
.brief-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Reuse the existing thanks state, but styled for the card context */
.brief-form-status {
  min-height: 0;
  margin: 0;
}
.brief-form-thanks {
  padding: var(--space-6) 0 0;
  text-align: left;
}

/* Legacy classes kept below for compat with existing status/thanks patterns */

.ebook-page {
  background: var(--color-bg);
}

/* -------- HERO -------- */
.ebook-hero {
  position: relative;
  padding: clamp(var(--space-12), 7vw, var(--space-24)) 0
           clamp(var(--space-16), 8vw, var(--space-24));
  overflow: hidden;
  background: var(--color-bg);
}
.ebook-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 90% 10%, var(--color-teal-tint) 0%, transparent 60%),
    radial-gradient(50% 60% at 5% 80%, var(--color-teal-tint) 0%, transparent 55%);
  opacity: 0.55;
  pointer-events: none;
}
.ebook-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}
@media (min-width: 900px) {
  .ebook-hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.ebook-hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-teal);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.ebook-hero-copy .eyebrow-rule {
  width: 30px;
  height: 1px;
  background: var(--color-teal);
  display: inline-block;
}
.ebook-hero .display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
  max-width: 14ch;
}
.ebook-lead {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 44em;
  font-weight: 400;
  margin: 0 0 var(--space-10);
}
.ebook-lead strong {
  color: var(--color-primary);
  font-weight: 500;
}
.ebook-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* -------- BOOK COVER (right column) --------
   The portrait is framed like an actual book: a warm cream mat, a thin
   navy border, subtle drop shadow, a hint of a spine on the left edge,
   and a small teal caption plate underneath. */
.ebook-hero-cover--portrait {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(var(--space-4), 1.5vw, var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow:
    0 30px 60px -30px rgba(15, 37, 48, 0.25),
    0 12px 24px -12px rgba(15, 37, 48, 0.18);
  isolation: isolate;
}
/* Spine on the left edge — one-pixel teal rule, echoes the letterhead */
.ebook-hero-cover--portrait::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: linear-gradient(to right, var(--color-teal), transparent);
  opacity: 0.85;
}
/* Offset shadow rectangle behind, gives depth like a stacked book */
.ebook-hero-cover--portrait::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--color-teal);
  opacity: 0.28;
  z-index: -1;
  pointer-events: none;
}
.ebook-cover-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
}

/* -------- LEAD CAPTURE -------- */
.ebook-capture {
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
}
.ebook-capture::before,
.ebook-capture::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-teal);
  opacity: 0.75;
}
.ebook-capture::before { top: 8px; }
.ebook-capture::after  { bottom: 8px; }
.ebook-capture-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .ebook-capture-inner {
    grid-template-columns: 1fr 1fr;
  }
}
.ebook-capture-side .eyebrow-invert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-teal-soft);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.ebook-capture-side .eyebrow-invert .eyebrow-rule {
  width: 30px;
  height: 1px;
  background: var(--color-teal-soft);
  display: inline-block;
}
.capture-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-6);
}
.capture-lede {
  font-size: var(--text-base);
  line-height: 1.75;
  color: color-mix(in oklab, var(--color-text-inverse) 78%, transparent);
  max-width: 42em;
  margin: 0;
}

/* Form on the navy band — cream card */
.ebook-form {
  background: var(--color-bg);
  color: var(--color-primary);
  padding: clamp(var(--space-8), 3vw, var(--space-10));
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--color-teal);
  display: grid;
  gap: var(--space-5);
  box-shadow: var(--shadow-md);
}
.ebook-form label {
  display: grid;
  gap: var(--space-2);
}
.ebook-form label > span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-teal);
  font-weight: 600;
}
.ebook-form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-primary);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition);
}
.ebook-form input:focus {
  border-bottom-color: var(--color-teal);
}
.ebook-submit {
  justify-self: start;
  margin-top: var(--space-2);
}
.ebook-form-status {
  font-size: 0.82rem;
  color: var(--color-teal-hover);
  min-height: 1.2em;
}
.ebook-form-status--error {
  color: #A12C7B;
}
.ebook-form-thanks {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.ebook-form-thanks .thanks-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-teal);
  color: var(--color-teal);
  font-size: 1.5rem;
  line-height: 44px;
  margin: 0 auto var(--space-5);
}
.ebook-form-thanks h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  font-weight: 500;
}
.ebook-form-thanks p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}


/* ============================================================
   ABOUT PAGE — repositioned narrative
   Adds: consistent-note callout, "Beyond the immediate matter" split,
   "Our commitment" flow, and a closing tagline band.
   ============================================================ */

.eyebrow-center {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.about-consistent-note {
  margin: clamp(var(--space-10), 4vw, var(--space-14)) auto 0;
  max-width: 68ch;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--color-bg);
  border-left: 2px solid var(--color-teal);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
  font-style: italic;
}

/* -- Beyond the immediate matter -- */
.beyond {
  background: var(--color-bg);
}
.beyond-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}
@media (min-width: 900px) {
  .beyond-grid {
    grid-template-columns: 1.25fr 0.85fr;
  }
}
.beyond-copy p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-top: var(--space-5);
  max-width: 62ch;
}
.beyond-copy p strong {
  color: var(--color-primary);
  font-weight: 500;
}
.beyond-list {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-teal);
  position: sticky;
  top: 110px;
}
.beyond-list-eyebrow {
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-teal);
  font-weight: 600;
  margin: 0 0 var(--space-5);
}
.beyond-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.beyond-list li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.beyond-list li:last-child { border-bottom: none; }
.beyond-list li span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-primary);
  font-weight: 500;
  display: inline-block;
  margin-right: 6px;
}

/* -- Our commitment flow -- */
.commit {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}
.commit-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 auto clamp(var(--space-8), 4vw, var(--space-10));
  max-width: 1000px;
}
.commit-step {
  flex: 0 1 auto;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-top: 2px solid var(--color-teal);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.commit-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.commit-step:last-child {
  flex-basis: 100%;
  max-width: 640px;
  font-style: italic;
  color: var(--color-teal-hover);
  border-top-color: var(--color-teal);
}
@media (min-width: 780px) {
  .commit-step:last-child {
    flex-basis: auto;
  }
}
.commit-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 42ch;
  margin: 0 auto;
}

/* -- Closing tagline band -- */
.closing-band {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  position: relative;
}
.closing-band::before,
.closing-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-teal);
  opacity: 0.75;
}
.closing-band::before { top: 8px; }
.closing-band::after { bottom: 8px; }
.closing-band-inner {
  max-width: 800px;
  margin: 0 auto;
}
.closing-firm {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--color-teal-soft);
  margin: 0 0 var(--space-6);
  font-weight: 600;
}
.closing-tag {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-inverse);
  margin: 0;
  letter-spacing: 0.005em;
  font-style: italic;
}


/* ============================================================
   ABOUT — v3: three principles cards (Quality · Unity · Integrity)
   Replaces the older commit-flow chip layout.
   ============================================================ */
.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 780px) {
  .principles-grid { grid-template-columns: repeat(3, 1fr); }
}
.principle-card {
  padding: clamp(var(--space-8), 3vw, var(--space-10));
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--color-teal);
  transition: transform var(--transition), box-shadow var(--transition);
}
.principle-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.principle-card--accent {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  border-top-color: var(--color-teal);
}
.principle-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-teal);
  font-weight: 600;
  margin: 0 0 var(--space-5);
}
.principle-card--accent .principle-label { color: var(--color-teal-soft); }
.principle-copy {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0;
}
.principle-card--accent .principle-copy { color: var(--color-text-inverse); }

/* Beyond list: phrase variant (behind X is Y) */
.beyond-list--phrases li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-primary);
  line-height: 1.6;
}
.beyond-list--phrases li span {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-teal);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}