/* ---------- Steadbook design system ---------- */
:root {
  /* Black + gold + cream palette (refreshed from navy/gold to align with the logo's home) */
  --navy: #1A1A1A;          /* near-black, was deep navy */
  --navy-deep: #000000;     /* pure black for darkest surfaces */
  --gold: #C8A864;
  --gold-soft: #E4D4A8;
  --ivory: #FAF6EE;         /* warm cream, was ivory */
  --ivory-warm: #F0E7D2;    /* warmer cream */
  --charcoal: #2D2D2D;
  --charcoal-soft: #555555;
  --teal: #8B7355;          /* warm bronze, replacing teal accent */
  --white: #FFFFFF;
  --line: #DCD3BD;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; }
.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }

/* Header — selective glassmorphism: stronger blur + saturation for a frosted-glass feel,
   layered over the ivory tone so it stays readable on flat backgrounds and on photo sections. */
header.site-header {
  background: rgba(250, 246, 238, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(220, 211, 189, 0.6);
  position: sticky;
  top: 0;
  z-index: 50;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site-header { background: rgba(247, 244, 238, 0.96); }
}
.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand img { height: 88px; width: auto; display: block; }
.nav { padding-top: 12px; padding-bottom: 12px; }

/* Footer brand: diamond mark + ivory wordmark in elegant serif */
.footer-brand .footer-logo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.footer-brand .footer-diamond { height: 56px; width: auto; }
.footer-brand .footer-wordmark {
  font-family: 'Cinzel', 'Cormorant SC', 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 26px;
  color: var(--ivory);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  color: var(--charcoal);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a.active { color: var(--navy); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}
.nav-links a:hover { color: var(--navy); }

/* ---------- Services dropdown ---------- */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown .nav-trigger { cursor: pointer; }
.nav-dropdown .nav-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  position: relative;
  top: -2px;
  vertical-align: middle;
  transition: transform 0.2s ease, top 0.2s ease;
  opacity: 0.65;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown.is-open .nav-caret {
  transform: rotate(225deg);
  top: 1px;
  opacity: 1;
}
.nav-dropdown .nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  min-width: 240px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown .nav-menu a {
  display: block;
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  border-bottom: none;
}
.nav-dropdown .nav-menu a:hover {
  background: var(--ivory);
  color: var(--navy);
  padding-left: 26px;
}
.nav-dropdown .nav-menu a::after { display: none; }

@media (max-width: 900px) {
  /* Inside the burger menu — flatten the dropdown into nested items */
  .nav-dropdown { width: 100%; }
  .nav-dropdown .nav-trigger { width: 100%; justify-content: space-between; }
  .nav-dropdown .nav-menu {
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 8px 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    min-width: 0;
  }
  .nav-dropdown.is-open .nav-menu { display: block; }
  .nav-dropdown .nav-menu a {
    padding: 10px 0;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }
  .nav-dropdown .nav-menu a:hover { padding-left: 4px; background: transparent; }
}
.lang-toggle {
  font-size: 13px;
  color: var(--teal);
  border-left: 1px solid var(--line);
  padding-left: 22px;
  font-weight: 500;
}
.lang-toggle a { color: var(--teal); text-decoration: none; }

/* Buttons */
.btn-primary {
  background: var(--navy);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid var(--navy);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
}
.btn-primary:hover { background: var(--navy-deep); transform: translateY(-1px); }

/* Navbar button = ghost/outlined style so it doesn't read as a "black box" floating in the header */
.nav-links a.btn-primary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 10px 20px;
  font-weight: 600;
}
.nav-links a.btn-primary:hover {
  background: var(--navy);
  color: var(--white);
  transform: none;
}

/* Shared founders portrait — sits above the bio cards.
   Two-layer shadow: a tight close shadow for grounding, a wider soft shadow for depth. */
.founders-portrait {
  max-width: 760px;
  margin: 0 auto 56px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 18px 48px rgba(26, 26, 26, 0.14),
    0 36px 80px rgba(26, 26, 26, 0.08);
  position: relative;
  background: linear-gradient(135deg, var(--ivory-warm) 0%, var(--gold-soft) 100%);
}
/* Compact variant — renders the source at a smaller display size, which makes the same JPG read sharper */
.founders-portrait.founders-portrait-compact { max-width: 460px; margin-bottom: 36px; }
.founders-portrait img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.founders-portrait .placeholder-text {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  color: var(--charcoal-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 32px;
}
.founders-caption {
  text-align: center;
  margin-top: -32px;
  margin-bottom: 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Leadership bio card (no individual photo — they share the portrait above) */
.leader-card {
  background: var(--white);
  padding: 32px 36px;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-secondary {
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.btn-secondary:hover { color: var(--gold); }
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  padding: 14px 32px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-gold:hover { background: var(--gold-soft); }

/* Page hero (interior pages) */
.page-hero {
  background: var(--ivory);
  padding: 80px 32px 64px;
  border-bottom: 1px solid var(--line);
}
.page-hero-inner { max-width: 1100px; margin: 0 auto; }
.page-hero .breadcrumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.page-hero .breadcrumb a { color: var(--teal); text-decoration: none; }
.page-hero h1 {
  font-size: 48px;
  line-height: 1.1;
  max-width: 880px;
  margin-bottom: 20px;
}
.page-hero .lede {
  font-size: 19px;
  color: var(--charcoal-soft);
  max-width: 720px;
  line-height: 1.5;
}

/* Sections */
section.block { padding: 96px 32px; }
section.block.dark { background: var(--navy); color: var(--ivory); }
section.block.dark h1, section.block.dark h2, section.block.dark h3 { color: var(--white); }
section.block.warm { background: var(--ivory); }
section.block.surface { background: var(--white); }
.section-head {
  max-width: 1100px;
  margin: 0 auto 56px;
}
.section-head.center { text-align: center; }
.section-head .eyebrow {
  display: block;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-head .eyebrow.eyebrow-hero {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  line-height: 1.1;
}
@media (max-width: 900px) { .section-head .eyebrow.eyebrow-hero { font-size: 36px; } }

/* Card icon treatment — small SVG icons that sit above the heading */
.card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  color: var(--gold);
  flex-shrink: 0;
}
.card-icon svg { width: 100%; height: 100%; display: block; }
.dark .card-icon { color: var(--gold); }

/* Hero decorative motif — sits in the hero's right empty space */
.hero-decor {
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  width: 320px;
  max-width: 32%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.hero-decor svg { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) { .hero-decor { display: none; } }
.dark .section-head .eyebrow { color: var(--gold); }
.section-head h2 {
  font-size: 38px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-head p {
  font-size: 17px;
  color: var(--charcoal-soft);
  max-width: 680px;
  line-height: 1.6;
}
.dark .section-head p { color: rgba(247, 244, 238, 0.75); }
.section-head.center p { margin-left: auto; margin-right: auto; }

.container { max-width: 1100px; margin: 0 auto; }

/* HOME — hero */
.hero {
  background: var(--ivory);
  padding: 110px 32px 130px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(200, 168, 100, 0.08) 100%);
  pointer-events: none;
}
.hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.eyebrow {
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: 60px;
  line-height: 1.05;
  max-width: 880px;
  margin-bottom: 28px;
}
.hero h1 .accent { color: var(--gold); font-style: normal; }
.hero p.subhead {
  font-size: 21px;
  color: var(--charcoal-soft);
  max-width: 720px;
  line-height: 1.5;
  margin-bottom: 40px;
}
.hero-cta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

/* Reassurance band */
.reassurance {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 32px;
}
.reassurance-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.reassurance-inner > a {
  justify-self: end;
  white-space: nowrap;
}
.reassurance h2 { font-size: 22px; line-height: 1.3; }
.reassurance p { color: var(--charcoal-soft); font-size: 15px; }

/* Tier grid */
.tier-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tier-card {
  background: var(--white);
  border-top: 3px solid var(--gold);
  padding: 44px 36px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(26, 42, 68, 0.04), 0 4px 16px rgba(26, 42, 68, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.tier-card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(26, 42, 68, 0.06), 0 16px 32px rgba(26, 42, 68, 0.08); }
.tier-card .tier-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.tier-card h3 { font-size: 23px; margin-bottom: 16px; line-height: 1.25; }
.tier-card p { color: var(--charcoal-soft); font-size: 15.5px; margin-bottom: 28px; flex: 1; }
.tier-card .tier-link { color: var(--navy); font-weight: 600; text-decoration: none; font-size: 14.5px; border-bottom: 1px solid var(--gold); padding-bottom: 2px; align-self: flex-start; }
.tier-card .tier-link:hover { color: var(--gold); }

/* Why Steadbook grid */
.why-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(200, 168, 100, 0.18);
}
.why-card { background: var(--navy); padding: 40px 36px; }
/* Generic icon-beside-title head — used by Why Us cards, Pricing input cards, and any other .why-card */
.why-card .card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.why-card .card-head .card-icon { margin-bottom: 0; flex-shrink: 0; }
.why-card .card-head h3 { margin: 0; line-height: 1.15; }
.why-card .num-tag {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 14px;
  letter-spacing: 0.06em;
}
.why-card h3 { color: var(--white); font-size: 20px; margin-bottom: 12px; line-height: 1.3; }
.why-card p { color: rgba(247, 244, 238, 0.82); font-size: 15px; line-height: 1.65; }

/* Steps grid */
.steps {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.step { border-top: 1px solid var(--gold); padding-top: 28px; }
.step .step-num {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { color: var(--charcoal-soft); font-size: 14.5px; line-height: 1.6; }

/* Industry grid */
.industry-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.industry-card {
  background: var(--ivory);
  padding: 36px 32px;
  border-radius: 6px;
  border-left: 3px solid var(--gold);
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.industry-card:hover { background: var(--ivory-warm); transform: translateX(4px); }
.industry-card h3 { font-size: 19px; margin-bottom: 8px; }
.industry-card p { color: var(--charcoal-soft); font-size: 14.5px; }

/* Insights grid */
.insight-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.insight-card {
  background: var(--white);
  border-radius: 6px;
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(26, 42, 68, 0.04);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s, box-shadow 0.2s;
}
.insight-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(26, 42, 68, 0.06), 0 12px 24px rgba(26, 42, 68, 0.06); }
.insight-card .insight-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  margin-bottom: 14px;
  letter-spacing: 0.06em;
}
.insight-card h3 { font-size: 17px; line-height: 1.4; margin-bottom: 12px; }
.insight-card p { color: var(--charcoal-soft); font-size: 14px; line-height: 1.55; }
.center-link { text-align: center; margin-top: 48px; }

/* Closing CTA */
.closing { background: var(--navy); color: var(--ivory); padding: 110px 32px; text-align: center; }
.closing h2 { color: var(--white); font-size: 42px; margin-bottom: 20px; line-height: 1.15; }
.closing p { color: rgba(247, 244, 238, 0.82); font-size: 18px; max-width: 580px; margin: 0 auto 36px; }

/* Service detail page */
.service-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.service-grid h3 { font-size: 22px; margin-bottom: 18px; }
.service-grid ul { list-style: none; padding: 0; }
.service-grid li {
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  position: relative;
  color: var(--charcoal);
}
.service-grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
/* Service-page body — outer container matches the page hero (1100px) so the body content
   shares the same left edge as the title. Inner content is constrained to a comfortable
   760px reading column anchored to the LEFT (margin-left: 0). */
.service-prose { max-width: 1100px; margin: 0 auto; }
.service-prose > p,
.service-prose > h2,
.service-prose > h3,
.service-prose > h4,
.service-prose > ul,
.service-prose > ol,
.service-prose > .related,
.service-prose > div:not(.related-grid) {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
}

/* Generic examples list with gold dash bullets — used on Advisory and elsewhere for "Examples of work" */
.examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.examples-list li {
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  position: relative;
  color: var(--charcoal);
}
.examples-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 14px;
  height: 1px;
  background: var(--gold);
}
.examples-list li:last-child { border-bottom: none; }
.service-prose p { margin-bottom: 22px; font-size: 17px; line-height: 1.7; }
.tier-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  background: var(--ivory-warm);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 16px;
}
.tier-tag.tier-2 { background: var(--gold); color: var(--navy); }
.related {
  border-top: 1px solid var(--line);
  padding-top: 48px;
  margin-top: 48px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.related-card {
  padding: 20px;
  background: var(--ivory);
  border-radius: 4px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 500;
  font-size: 15px;
  border-left: 2px solid var(--gold);
  transition: background 0.2s;
}
.related-card:hover { background: var(--ivory-warm); }

/* Contact form */
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
}
.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-stack label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px; color: var(--charcoal); }
.form-stack input, .form-stack select, .form-stack textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
  color: var(--charcoal);
  transition: border-color 0.2s;
}
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-stack textarea { min-height: 110px; resize: vertical; }
.form-stack .submit-row { margin-top: 8px; }
.contact-info-card {
  background: var(--ivory);
  padding: 36px 32px;
  border-radius: 6px;
  border-left: 3px solid var(--gold);
}
.contact-info-card h3 { font-size: 18px; margin-bottom: 16px; }
.contact-info-card p { font-size: 15px; color: var(--charcoal); margin-bottom: 8px; line-height: 1.55; }
.contact-info-card .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 6px;
  display: block;
}
.contact-info-card a { color: var(--navy); }

/* ---------- About-prose ----------
   Outer container matches the page hero (1100px) so the body content shares
   the same left edge as the page title. Text and the leadership wrapper are
   constrained to 760px and anchored LEFT (margin-left: 0). */
.about-prose {
  max-width: 1100px;
  margin: 0 auto;
}
.about-prose > h2,
.about-prose > h3,
.about-prose > p,
.about-prose > ul,
.about-prose > ol,
.about-prose > .leadership {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
}
.about-prose h2 {
  font-size: 28px;
  margin-top: 48px;
  margin-bottom: 18px;
}
.about-prose p { margin-bottom: 22px; font-size: 17px; line-height: 1.75; }

/* Leadership section — featured layout that breaks out wider than the body text column.
   Photo fills the left column at full height. Each bio card has an internal split:
   name + tag on the left, bio prose on the right. */

/* Heading with a gold dot accent */
.about-prose .leadership-heading {
  font-size: 34px;
  margin-top: 56px;
  margin-bottom: 20px;
  letter-spacing: -0.015em;
}
.about-prose .leadership-heading .leadership-dot { color: inherit; }

/* Override the 760px constraint applied by .about-prose > * — leadership is wider */
.about-prose > .leadership { max-width: 1100px; }

.leadership {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: start;
  margin: 12px 0 48px;
}

/* Photo at fixed-width column — no stretching, no cropping. Natural aspect for max sharpness. */
.leadership .founders-portrait,
.leadership .founders-portrait.founders-portrait-compact {
  margin: 0;
  max-width: 360px;
  height: auto;
}
.leadership .founders-portrait img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
  image-rendering: auto;
}

/* Right column — bio cards stacked vertically */
.leadership .leader-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

/* Individual leader card with internal 2-col split (name | bio) */
.leader-card {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 2.2fr;
  gap: 28px;
  align-items: start;
  background: var(--white);
  padding: 28px 32px;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.leader-card .leader-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.leader-card .leader-name {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.leader-card .leader-bio p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 14px;
  color: var(--charcoal);
}
.leader-card .leader-bio p:last-child { margin-bottom: 0; }

/* Mobile fallback — single column for everything */
@media (max-width: 900px) {
  .about-prose > .leadership { max-width: 760px; }
  .leadership {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .leadership .founders-portrait,
  .leadership .founders-portrait.founders-portrait-compact {
    max-width: 460px;
    margin: 0 auto;
    height: auto;
  }
  .leadership .founders-portrait img {
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  .leader-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 26px;
  }
  .about-prose .leadership-heading { font-size: 28px; }
}

/* Footer */
footer.site-footer {
  background: var(--navy-deep);
  color: rgba(247, 244, 238, 0.7);
  padding: 64px 32px 32px;
  font-size: 14px;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand img { height: 64px; margin-bottom: 16px; }
.footer-brand p { color: rgba(247, 244, 238, 0.55); font-size: 13px; line-height: 1.6; }
footer h4 {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
footer ul { list-style: none; }
footer li { margin-bottom: 8px; }
footer a { color: rgba(247, 244, 238, 0.7); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(200, 168, 100, 0.18);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: rgba(247, 244, 238, 0.5);
}

/* Chat widget — subtle glassmorphism, sits over any background */
.chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(26, 26, 26, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 28px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.1); }
.chat-bubble::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.25); }
}

/* Chat panel — opens from the bubble */
.chat-bubble.hidden { display: none; }

.chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 48px);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 101;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    width 0.25s ease,
    height 0.25s ease,
    bottom 0.25s ease,
    right 0.25s ease,
    top 0.25s ease,
    left 0.25s ease,
    border-radius 0.25s ease;
}
.chat-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--navy-deep);
  color: var(--white);
}
.chat-panel-title {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}
.chat-panel-header .chat-panel-new,
.chat-panel-header .chat-panel-maximize,
.chat-panel-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.chat-panel-close { font-size: 22px; line-height: 1; }
.chat-panel-header .chat-panel-new { margin-left: auto; margin-right: 4px; }
.chat-panel-header .chat-panel-maximize { margin-right: 4px; }
.chat-panel-header .chat-panel-new:hover,
.chat-panel-header .chat-panel-maximize:hover,
.chat-panel-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* ---------- Maximized state (desktop) ---------- */
.chat-panel.maximized {
  width: min(680px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  max-width: none;
  max-height: none;
}

/* ---------- Undo toast (Gmail-style optimistic clear) ---------- */
.chat-panel-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 14px 8px;
  padding: 10px 14px;
  background: var(--navy-deep);
  color: var(--white);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-panel-undo.show {
  opacity: 1;
  transform: translateY(0);
}
.chat-panel-undo[hidden] { display: none; }
.chat-panel-undo-text { flex: 1; min-width: 0; }
.chat-panel-undo-btn {
  background: none;
  border: none;
  color: var(--gold);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}
.chat-panel-undo-btn:hover { background: rgba(255, 255, 255, 0.12); }

.chat-panel-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* Keep scroll energy inside the messages list so iOS Safari doesn't
     bleed it into the page below (which would collapse/expand the
     address bar and make the header / input feel like they're jumping). */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ivory);
}

.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--navy-deep);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant {
  align-self: flex-start;
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom-left-radius: 4px;
}
.chat-msg-assistant a {
  color: var(--navy-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.15s;
}
.chat-msg-assistant a:hover { color: var(--gold); }
.chat-msg-typing {
  color: var(--charcoal-soft);
  font-style: italic;
}
.chat-msg-welcome {
  background: rgba(200, 168, 100, 0.10);
  border-color: rgba(200, 168, 100, 0.30);
  color: var(--charcoal);
}

.chat-panel-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--white);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.chat-panel-attach {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--charcoal-soft);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chat-panel-attach:hover {
  color: var(--navy-deep);
  border-color: var(--gold);
  background: rgba(200, 168, 100, 0.06);
}
.chat-panel-error {
  font-size: 12.5px;
  color: #8a1f1f;
  background: #fdecec;
  padding: 8px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.4;
}
.chat-panel-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 4px;
  background: var(--white);
}
.chat-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.chat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-thumb-remove:hover { background: rgba(0, 0, 0, 0.85); }

.chat-msg-with-images {
  padding: 6px 6px 10px;
}
.chat-user-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.chat-user-images img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  display: block;
}
.chat-user-text {
  padding: 4px 8px 0;
}
.chat-panel-input {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.15s;
}
.chat-panel-input:focus { border-color: var(--gold); }
.chat-panel-input:disabled { opacity: 0.55; }

.chat-panel-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.chat-panel-send:hover { background: #d4b677; transform: scale(1.05); }

.chat-panel-disclaimer {
  font-size: 11px;
  color: var(--charcoal-soft);
  text-align: center;
  padding: 8px 14px 12px;
  background: var(--white);
  line-height: 1.45;
}

/* ---------- Client portal: auth bar (between header and messages) ---------- */
.chat-panel-auth-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  background: rgba(200, 168, 100, 0.10);
  color: var(--charcoal);
  border-bottom: 1px solid rgba(200, 168, 100, 0.25);
}
.chat-panel-auth-bar[data-state="loading"] { display: none; }
.chat-panel-auth-bar[data-state="authed"] {
  background: rgba(33, 80, 113, 0.07);
  border-bottom-color: rgba(33, 80, 113, 0.18);
}
.chat-panel-auth-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-panel-auth-text strong { font-weight: 600; }
.chat-panel-auth-action {
  background: none;
  border: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.chat-panel-auth-action:hover { background: rgba(200, 168, 100, 0.18); }
.chat-panel-auth-bar[data-state="authed"] .chat-panel-auth-action {
  color: var(--navy-deep);
}
.chat-panel-auth-bar[data-state="authed"] .chat-panel-auth-action:hover {
  background: rgba(33, 80, 113, 0.10);
}

/* ---------- Client portal: login card (appears in message stream) ---------- */
.chat-auth-card {
  align-self: stretch;
  max-width: none;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  white-space: normal;
}
.chat-auth-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--charcoal);
}
.chat-auth-card-subtitle {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--charcoal);
  margin-bottom: 2px;
}
.chat-auth-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-auth-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.chat-auth-input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.chat-auth-input:focus {
  outline: none;
  border-color: var(--gold);
}
.chat-auth-code-input {
  font-family: 'Inter Tight', Inter, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chat-auth-otp-input {
  text-align: center;
  letter-spacing: 0.4em;
  font-size: 19px;
  font-family: 'IBM Plex Mono', Menlo, Consolas, monospace;
}
.chat-auth-help {
  font-size: 11.5px;
  color: var(--charcoal-soft);
  line-height: 1.5;
}
.chat-auth-instr {
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 2px;
}
.chat-auth-error {
  font-size: 12.5px;
  color: #c44;
  line-height: 1.4;
  padding: 7px 10px;
  background: rgba(196, 68, 68, 0.08);
  border: 1px solid rgba(196, 68, 68, 0.18);
  border-radius: 6px;
}
.chat-auth-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.chat-auth-primary {
  margin-left: auto;
  background: var(--gold);
  color: var(--white);
  border: 1px solid var(--gold);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
}
.chat-auth-primary:hover { background: #d4b677; border-color: #d4b677; }
.chat-auth-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-auth-cancel,
.chat-auth-back {
  background: none;
  border: none;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--charcoal-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.chat-auth-cancel:hover,
.chat-auth-back:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--charcoal);
}
.chat-auth-resend {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--gold);
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-auth-resend:hover { text-decoration: underline; }
.chat-auth-resend:disabled {
  color: var(--charcoal-soft);
  cursor: default;
}
.chat-auth-resend:disabled:hover { text-decoration: none; }
.chat-auth-consent {
  font-size: 11px;
  color: var(--charcoal-soft);
  line-height: 1.5;
  margin-top: 4px;
}
.chat-auth-entities {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-auth-entity-btn {
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chat-auth-entity-btn:hover {
  background: rgba(200, 168, 100, 0.08);
  border-color: var(--gold);
}

/* ---------- System messages (sign-in / sign-out notices) ---------- */
.chat-msg-system {
  align-self: center;
  max-width: 90%;
  background: transparent;
  color: var(--charcoal-soft);
  font-size: 12px;
  font-style: italic;
  padding: 4px 10px;
  border: none;
  border-radius: 0;
  text-align: center;
}

@media (max-width: 480px) {
  /* Windowed: use dynamic viewport height so iOS Safari's bottom toolbar
     doesn't push the form below the visible area. Falls back to vh on
     browsers without dvh. */
  .chat-panel {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    height: 75vh;
    height: 75dvh;
    max-height: 580px;
  }

  /* Maximized: true fullscreen using dvh + safe-area padding so the
     input stays above the home indicator and Safari toolbar. */
  .chat-panel.maximized {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* WhatsApp-style polish: bigger touch targets, larger text, no iOS zoom-on-focus. */
  .chat-msg { font-size: 15px; line-height: 1.55; }
  .chat-msg-with-images img { max-width: 220px; max-height: 220px; }
  .chat-panel-input {
    font-size: 16px;       /* 16px+ prevents iOS auto-zoom on focus */
    padding: 11px 16px;
  }
  .chat-panel-send,
  .chat-panel-attach {
    width: 42px;
    height: 42px;
  }
  .chat-panel-send { font-size: 20px; }
  .chat-panel-form { padding: 10px 12px; gap: 8px; }
  .chat-panel-disclaimer { font-size: 10.5px; padding: 6px 14px 10px; }

  /* Auth bar slightly taller on mobile so the buttons are easier to tap. */
  .chat-panel-auth-bar { padding: 9px 14px; font-size: 13px; }
  .chat-panel-auth-action { padding: 6px 10px; font-size: 13px; }

  /* Login card / system message font bumps */
  .chat-auth-input { font-size: 16px; padding: 12px 14px; }
  .chat-auth-otp-input { font-size: 22px; letter-spacing: 0.45em; }
  .chat-auth-primary { padding: 10px 18px; font-size: 14px; }
  .chat-auth-cancel,
  .chat-auth-back { padding: 10px 12px; font-size: 14px; }
  .chat-msg-system { font-size: 13px; }

  /* Undo toast slightly chunkier on mobile for thumb comfort */
  .chat-panel-undo { font-size: 14px; padding: 12px 14px; margin: 0 12px 8px; }
  .chat-panel-undo-btn { font-size: 14px; padding: 7px 12px; }
}

/* ---------- Error / thank-you page ---------- */
.error-page {
  background: var(--ivory);
  padding: 96px 32px 120px;
  text-align: center;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}
.error-inner { max-width: 720px; margin: 0 auto; }
.error-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 28px;
}
.error-page h1 {
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 18px;
}
.error-page .lede {
  font-size: 18px;
  color: var(--charcoal-soft);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.55;
}
.error-page .lede a { color: var(--navy); }
.error-links {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.error-help {
  font-size: 14px;
  color: var(--charcoal-soft);
}
.error-help a { color: var(--navy); }
.success-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
  color: var(--gold);
}
.success-mark svg { width: 100%; height: 100%; }

/* ---------- Pricing — input cards (icon BESIDE title) ---------- */
.pricing-inputs .why-card { padding: 36px 32px; }
.pricing-inputs .pricing-input-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.pricing-inputs .pricing-input-head .card-icon { margin-bottom: 0; }
.pricing-inputs .pricing-input-head h3 { margin: 0; font-size: 22px; line-height: 1; }
.pricing-inputs .why-card p { color: rgba(247, 244, 238, 0.82); }

/* ---------- Pricing — illustrative profile cards (warmer, narrative-led) ---------- */
.profile-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.profile-card {
  background: var(--ivory);
  border-top: 3px solid var(--gold);
  padding: 36px 32px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
}
.profile-card .tier-tag { align-self: flex-start; }
.profile-card h3 { font-size: 22px; margin-bottom: 16px; line-height: 1.25; }
.profile-card .profile-portrait {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.profile-card .profile-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.profile-card .profile-section:last-of-type { margin-top: auto; }
.profile-card .profile-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.profile-card .profile-section p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--charcoal);
  margin: 0;
}
.profile-disclaimer {
  max-width: 800px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--charcoal-soft);
  line-height: 1.6;
  font-style: italic;
}
@media (max-width: 1024px) { .profile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .profile-grid { grid-template-columns: 1fr; } }

/* ---------- About page — designed-from-scratch hero (light palette) ----------
   Warm ivory base with a subtle gradient, concentric gold diamonds, and a soft dot grid.
   Light tones match the rest of the site instead of the dramatic dark variant. */
.about-hero-designed {
  background-color: var(--ivory);
  background-image:
    radial-gradient(1100px 520px at 78% 45%, rgba(200, 168, 100, 0.18), transparent 65%),
    radial-gradient(rgba(200, 168, 100, 0.16) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: center, center;
  color: var(--navy);
  padding: 130px 32px 110px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.about-hero-designed .hero-decor-large {
  position: absolute;
  top: 50%;
  right: -6%;
  width: 720px;
  max-width: 58%;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-50%);
}
.about-hero-designed .hero-decor-large svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 50%;
}
/* Slow rotation — applied only to the diamond variant, never the architectural one
   (rotating a building would look wrong). The architectural SVG has its own
   internal animations: sun pulse, antenna beacon, blinking office windows. */
.about-hero-designed .hero-decor-large:not(.hero-decor-architectural) svg {
  animation: heroFloat 12s linear infinite;
}
@keyframes heroFloat {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* The architectural illustration is wider than tall — bump the wrapper width slightly so
   the building reads at the right scale on desktop. */
.about-hero-designed .hero-decor-architectural {
  width: 820px;
  max-width: 64%;
  right: -4%;
}
@media (max-width: 1100px) {
  .about-hero-designed .hero-decor-architectural { right: -8%; max-width: 56%; }
}

/* Woods Square photo variant — user-supplied generated image */
.about-hero-designed .hero-decor-photo {
  width: 720px;
  max-width: 56%;
  right: 0;
}
.about-hero-designed .hero-decor-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);
}
@media (max-width: 1100px) {
  .about-hero-designed .hero-decor-photo { max-width: 50%; right: -4%; }
}
@media (max-width: 900px) {
  .about-hero-designed .hero-decor-photo { display: none; }
}

/* ---------- Article (insights) page styling ----------
   Long-form reading layout: comfortable line-height, narrow text column,
   tasteful typographic accents for tables / quotes / lists. */
.article-hero {
  background: var(--ivory);
  padding: 96px 32px 56px;
  border-bottom: 1px solid var(--line);
}
.article-hero-inner { max-width: 760px; margin: 0 auto; }
.article-hero .breadcrumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.article-hero .breadcrumb a { color: var(--teal); text-decoration: none; }
.article-hero .article-category {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.article-hero h1 {
  font-size: 40px;
  line-height: 1.18;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.article-hero .article-summary {
  font-size: 19px;
  color: var(--charcoal-soft);
  line-height: 1.55;
  margin-bottom: 26px;
}
.article-hero .article-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--charcoal-soft);
  letter-spacing: 0.06em;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.article-hero .article-meta .dot { color: var(--gold); }

.article-body {
  max-width: 760px;
  margin: 0 auto;
}
.article-body p {
  font-size: 17.5px;
  line-height: 1.75;
  margin-bottom: 22px;
  color: var(--charcoal);
}
.article-body h2 {
  font-size: 28px;
  line-height: 1.25;
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.article-body h3 {
  font-size: 21px;
  line-height: 1.3;
  margin-top: 32px;
  margin-bottom: 12px;
}
.article-body ul, .article-body ol {
  margin: 0 0 24px 0;
  padding-left: 22px;
}
.article-body li { font-size: 17px; line-height: 1.75; margin-bottom: 8px; color: var(--charcoal); }
.article-body strong { color: var(--navy); font-weight: 600; }
/* Inline article links — gold underline. Excludes button styles so .btn-primary etc. keep their own design. */
.article-body a:not(.btn-primary):not(.btn-secondary):not(.btn-gold) {
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}
.article-body a:not(.btn-primary):not(.btn-secondary):not(.btn-gold):hover { color: var(--gold); }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 14px 0 14px 24px;
  margin: 28px 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--charcoal);
  font-style: italic;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
}
.article-body th, .article-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.article-body th {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  background: var(--ivory-warm);
  color: var(--navy);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.article-body .callout {
  background: var(--white);
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
  margin: 32px 0;
  border-radius: 0 4px 4px 0;
}
.article-body .callout p:last-child { margin-bottom: 0; }
.article-body .callout-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.article-footer-cta {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .article-hero { padding: 56px 24px 40px; }
  .article-hero h1 { font-size: 30px; }
  .article-hero .article-summary { font-size: 17px; }
  .article-body p, .article-body li { font-size: 16.5px; }
  .article-body h2 { font-size: 24px; margin-top: 36px; }
  .article-body h3 { font-size: 19px; }
}

/* ---------- Utility: visually hidden ----------
   Removes content from the visual layout but keeps it in the DOM so search
   engines and screen readers can still read it. Use for SEO-valuable copy
   that we don't want cluttering the visual design. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Accordion (FAQ + collapsible profile cards) ----------
   Built on native <details>/<summary> — no JS needed, accessible by default. */
.accordion {
  max-width: 880px;
  margin: 0 auto;
}
.accordion details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.accordion details[open] {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 28px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  position: relative;
  transition: background 0.2s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '';
  position: absolute;
  right: 28px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.25s ease;
}
.accordion details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.accordion summary:hover { background: var(--ivory); }
.accordion .accordion-body {
  padding: 4px 28px 24px;
  color: var(--charcoal);
  font-size: 15.5px;
  line-height: 1.7;
}
.accordion .accordion-body p { margin-bottom: 14px; }
.accordion .accordion-body p:last-child { margin-bottom: 0; }
.accordion .accordion-body .profile-meta-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.accordion .accordion-body .profile-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--teal);
  text-transform: uppercase;
  margin: 18px 0 6px;
}

/* About hero — constrain headline + lede so the photo never overlaps text */
.about-hero-designed .page-hero-inner h1,
.about-hero-designed .page-hero-inner .lede { max-width: 480px; }
@media (max-width: 1100px) {
  .about-hero-designed .page-hero-inner h1,
  .about-hero-designed .page-hero-inner .lede { max-width: 44%; }
}
@media (max-width: 900px) {
  .about-hero-designed .page-hero-inner h1,
  .about-hero-designed .page-hero-inner .lede { max-width: 100%; }
}

/* ---------- Generic page-hero-with-photo modifier ----------
   Apply to any .page-hero alongside a .hero-decor-side wrapper containing a photo.
   Used by Corporate Advisory and any future service page that wants the same
   floating-photo-on-the-right treatment as About / Contact. */
.page-hero.page-hero-with-photo {
  background-color: var(--ivory);
  background-image:
    radial-gradient(1100px 520px at 78% 45%, rgba(200, 168, 100, 0.18), transparent 65%),
    radial-gradient(rgba(200, 168, 100, 0.16) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: center, center;
  position: relative;
  overflow: hidden;
  padding: 130px 32px 110px;
}
.page-hero-with-photo .hero-decor-side {
  position: absolute;
  top: 50%;
  right: 0;
  width: 720px;
  max-width: 56%;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-50%);
}
.page-hero-with-photo .hero-decor-side .photo-frame {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 24px 48px rgba(0, 0, 0, 0.22),
    0 56px 96px rgba(0, 0, 0, 0.12);
  line-height: 0;
}
.page-hero-with-photo .hero-decor-side .photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.page-hero-with-photo .page-hero-inner { position: relative; z-index: 2; }
.page-hero-with-photo .page-hero-inner h1,
.page-hero-with-photo .page-hero-inner .lede { max-width: 460px; }
@media (max-width: 1100px) {
  .page-hero-with-photo .hero-decor-side { max-width: 50%; right: -4%; }
  .page-hero-with-photo .page-hero-inner h1,
  .page-hero-with-photo .page-hero-inner .lede { max-width: 42%; }
}
@media (max-width: 900px) {
  .page-hero.page-hero-with-photo { padding: 80px 24px 64px; }
  .page-hero-with-photo .hero-decor-side { display: none; }
  .page-hero-with-photo .page-hero-inner h1,
  .page-hero-with-photo .page-hero-inner .lede { max-width: 100%; }
}

/* ---------- Contact hero — mirrors the About hero treatment exactly ----------
   Wide panoramic photo (2106x747) sits on the right with rounded corners and
   the same two-layer drop shadow. Original composite + earlier square crop
   kept as -source.png and -cropped.png for reference. */
.contact-hero-photo {
  background-color: var(--ivory);
  background-image:
    radial-gradient(1100px 520px at 78% 45%, rgba(200, 168, 100, 0.18), transparent 65%),
    radial-gradient(rgba(200, 168, 100, 0.16) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: center, center;
  position: relative;
  overflow: hidden;
  padding: 130px 32px 110px;
}
.contact-hero-photo .hero-decor-contact {
  position: absolute;
  top: 50%;
  right: 0;
  width: 720px;
  max-width: 56%;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-50%);
}
.contact-hero-photo .contact-photo-frame {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  /* Three-layer drop shadow — stronger and more grounded underneath the image */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 24px 48px rgba(0, 0, 0, 0.22),
    0 56px 96px rgba(0, 0, 0, 0.12);
  line-height: 0;
}
.contact-hero-photo .contact-photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.contact-hero-photo .page-hero-inner { position: relative; z-index: 2; }
/* Constrain the headline and lede so they always wrap before reaching the floating image.
   The image takes up to 56% of the hero width on the right; the text gets the left ~40%. */
.contact-hero-photo .page-hero-inner h1,
.contact-hero-photo .page-hero-inner .lede {
  max-width: 460px;
}
@media (max-width: 1100px) {
  .contact-hero-photo .hero-decor-contact { max-width: 50%; right: -4%; }
  .contact-hero-photo .page-hero-inner h1,
  .contact-hero-photo .page-hero-inner .lede { max-width: 42%; }
}
@media (max-width: 900px) {
  .contact-hero-photo { padding: 80px 24px 64px; }
  .contact-hero-photo .hero-decor-contact { display: none; }
  .contact-hero-photo .page-hero-inner h1,
  .contact-hero-photo .page-hero-inner .lede { max-width: 100%; }
}
.about-hero-designed .page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}
.about-hero-designed .breadcrumb,
.about-hero-designed .breadcrumb a { color: var(--teal); }
.about-hero-designed h1 {
  color: var(--navy);
  font-size: 56px;
  line-height: 1.05;
  margin-bottom: 22px;
  max-width: 720px;
}
.about-hero-designed .lede {
  color: var(--charcoal-soft);
  font-size: 19px;
  max-width: 620px;
  line-height: 1.55;
}

/* Frosted-glass credibility chip — sits over the dark hero, makes glassmorphism clearly visible */
.hero-glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(200, 168, 100, 0.28);
  border-radius: 28px;
  color: rgba(247, 244, 238, 0.88);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-glass-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(200, 168, 100, 0.6);
  animation: chipPulse 2.4s ease-in-out infinite;
}
@keyframes chipPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.25); }
}
.hero-glass-chip .chip-sep { opacity: 0.3; }

@media (max-width: 1100px) {
  .about-hero-designed h1 { font-size: 48px; }
  .about-hero-designed .hero-decor-large { right: -10%; max-width: 50%; }
}
@media (max-width: 900px) {
  .about-hero-designed { padding: 80px 24px 72px; }
  .about-hero-designed h1 { font-size: 36px; }
  .about-hero-designed .lede { font-size: 17px; }
  .about-hero-designed .hero-decor-large { display: none; }
  .hero-glass-chip { font-size: 11.5px; padding: 9px 16px; gap: 8px; }
}
/* Note: hero rotation deliberately kept on even when the OS reports prefers-reduced-motion,
   per explicit design choice. The motion is slow (12s/rev) and gentle. */

/* ---------- About page — atmospheric hero photo with overlay (legacy, still available) ---------- */
.about-hero-photo {
  position: relative;
  background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%), var(--about-hero-bg, none);
  background-size: cover;
  background-position: center;
  color: var(--ivory);
  padding: 120px 32px 96px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.about-hero-photo .page-hero-inner { max-width: 1100px; margin: 0 auto; }
.about-hero-photo .breadcrumb,
.about-hero-photo .breadcrumb a { color: rgba(228, 212, 168, 0.85); }
.about-hero-photo h1 { color: var(--white); font-size: 48px; line-height: 1.1; margin-bottom: 20px; }
.about-hero-photo .lede { color: rgba(247, 244, 238, 0.86); font-size: 19px; max-width: 720px; line-height: 1.55; }
.about-hero-photo .photo-credit {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(247, 244, 238, 0.45);
  letter-spacing: 0.06em;
}
.about-hero-photo .photo-credit a { color: inherit; text-decoration: underline; }

/* ---------- Toolbox strip — "On your tools, in your cloud" ---------- */
.toolbox {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 32px;
}
.toolbox-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.toolbox-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  flex-shrink: 0;
}
.toolbox-list {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.toolbox-list li {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 17px;
  color: var(--charcoal);
  opacity: 0.78;
}
.toolbox-list li .dot { color: var(--gold); margin-right: 8px; }
@media (max-width: 640px) {
  .toolbox-list { gap: 18px; }
  .toolbox-list li { font-size: 15px; }
}

/* ---------- Scroll-reveal — sections fade up as they enter the viewport ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Mobile navigation toggle — hidden on desktop, replaces .nav-links on small screens */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive ---------- */

/* Small laptop / large tablet */
@media (max-width: 1100px) {
  .hero { padding: 90px 32px 100px; }
  .hero h1 { font-size: 50px; }
  .hero p.subhead { font-size: 19px; }
  .page-hero h1 { font-size: 40px; }
  .closing h2 { font-size: 36px; }
  .nav { padding: 12px 24px; }
  section.block { padding: 80px 32px; }
}

/* iPad landscape / smaller laptops */
@media (max-width: 1024px) {
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .reassurance-inner { grid-template-columns: 1fr auto; gap: 32px; }
  .reassurance-inner > a { justify-self: end; }
}

/* iPad portrait — the breakpoint where the desktop nav stops fitting cleanly */
@media (max-width: 900px) {
  .nav {
    padding: 14px 64px 14px 20px;
    gap: 16px;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-burger {
    display: flex;
    position: absolute;
    top: 18px;
    right: 16px;
    margin-left: 0;
  }
  .brand img { height: 64px; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    padding: 4px 20px 12px;
    margin: 0 -20px -14px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 16px 4px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .nav-links a.active::after { display: none; }
  .nav-links a.btn-primary {
    margin-top: 14px;
    text-align: center;
    background: var(--navy-deep);
    color: var(--white);
    border: 0;
    border-radius: 6px;
    padding: 14px 20px;
    font-weight: 600;
  }
  .nav-links a.btn-primary:hover { background: var(--navy); color: var(--white); }
  .lang-toggle {
    border-left: 0;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
    color: var(--charcoal-soft);
    display: block;
  }
  .lang-toggle a { display: inline; padding: 0; border: 0; }

  .hero { padding: 64px 24px 72px; }
  .hero h1 { font-size: 38px; }
  .hero p.subhead { font-size: 17px; }
  .hero-cta { gap: 20px; }
  .page-hero { padding: 56px 24px 48px; }
  .page-hero h1 { font-size: 32px; }
  .page-hero .lede { font-size: 17px; }

  section.block { padding: 64px 24px; }
  .closing { padding: 80px 24px; }

  .tier-grid, .why-grid, .industry-grid, .insight-grid, .service-grid, .contact-grid, .steps, .related-grid { grid-template-columns: 1fr; gap: 20px; }
  .reassurance { padding: 48px 24px; }
  .reassurance-inner { grid-template-columns: 1fr; gap: 16px; }
  .reassurance-inner > a { justify-self: start; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 8px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .section-head { margin-bottom: 40px; }
  .section-head h2, .closing h2 { font-size: 28px; }
  .about-prose h2 { font-size: 24px; margin-top: 36px; }
  .founders-portrait, .founders-portrait.founders-portrait-compact { max-width: 360px; }
}

/* Phones */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 32px; }
  .page-hero h1 { font-size: 28px; }
  .hero-cta { gap: 14px; }
  .hero-cta .btn-primary, .hero-cta .btn-secondary { width: 100%; text-align: center; }
  section.block { padding: 56px 20px; }
  .nav { padding: 10px 16px; }
  .closing { padding: 64px 20px; }
  .closing h2 { font-size: 26px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 0; }
  .tier-card, .leader-card, .contact-info-card { padding: 28px 24px; }
  .why-card { padding: 32px 24px; }
  .chat-bubble { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13px; }
  .founders-portrait, .founders-portrait.founders-portrait-compact { max-width: 280px; margin-bottom: 28px; }
}

/* Small phones */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .hero p.subhead { font-size: 16px; }
  .page-hero h1 { font-size: 24px; }
  .section-head h2, .closing h2 { font-size: 24px; }
}