/* ==========================================================================
   FIRMA Advisory — Stylesheet
   Navy-dominant institutional theme with gold accents
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Navy palette */
  --color-navy-900:    #050f1f;   /* deepest — footer */
  --color-navy-800:    #07172d;   /* primary background */
  --color-navy-700:    #0a2342;   /* core brand navy */
  --color-navy-600:    #0f2d56;   /* lifted sections */
  --color-navy-500:    #143769;   /* card backgrounds */
  --color-navy-400:    #1d4378;   /* hover / borders */

  /* Accents */
  --color-gold:        #c19a55;   /* refined warm gold */
  --color-gold-soft:   #d9b87f;
  --color-gold-deep:   #9a7a40;

  /* Neutral */
  --color-white:       #ffffff;
  --color-cream:       #f4f1ea;
  --color-light:       #eef0f4;

  /* Text on dark */
  --color-text:        #ffffff;
  --color-text-body:   rgba(255, 255, 255, 0.78);
  --color-text-soft:   rgba(255, 255, 255, 0.65);
  --color-text-muted:  rgba(255, 255, 255, 0.5);

  /* Lines */
  --color-line:        rgba(255, 255, 255, 0.10);
  --color-line-strong: rgba(255, 255, 255, 0.18);
  --color-line-gold:   rgba(193, 154, 85, 0.35);

  /* Light-theme text (for the rare light sections) */
  --color-text-dark:        #0a2342;
  --color-text-dark-body:   #34425a;
  --color-text-dark-muted:  #6b7589;

  --font-serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1340px;

  --radius-sm: 2px;
  --radius:    4px;

  --shadow-card: 0 10px 40px rgba(0,0,0,0.35);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.2), 0 4px 14px rgba(0,0,0,0.1);

  --transition: 220ms cubic-bezier(.2,.6,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-body);
  background-color: var(--color-navy-800);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--color-gold-soft); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-gold); }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
hr { border: 0; border-top: 1px solid var(--color-line); margin: 3rem 0; }
::selection { background: var(--color-gold); color: var(--color-navy-900); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  line-height: 1.18;
}
h1 { font-size: clamp(2.5rem, 4.8vw, 4rem); font-weight: 500; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.95rem, 3.2vw, 2.75rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 1.1em; color: var(--color-text-body); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.2rem;
}
.lede { font-size: 1.18rem; line-height: 1.7; color: var(--color-text-body); }
.muted { color: var(--color-text-muted); }
.small { font-size: 0.875rem; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.75rem;
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.75rem; }
.container-wide   { max-width: var(--container-wide);   margin: 0 auto; padding: 0 1.75rem; }

.section {
  padding: 6.5rem 0;
  position: relative;
}
.section + .section { border-top: 1px solid var(--color-line); }

.section-lift { background-color: var(--color-navy-700); }
.section-deeper { background-color: var(--color-navy-900); }
.section-light {
  background-color: var(--color-cream);
  color: var(--color-text-dark-body);
}
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--color-text-dark); }
.section-light p { color: var(--color-text-dark-body); }
.section-light .muted { color: var(--color-text-dark-muted); }
.section-light a { color: var(--color-text-dark); border-bottom: 1px solid var(--color-gold); }
.section-light a:hover { color: var(--color-gold-deep); }
.section-light .eyebrow { color: var(--color-gold-deep); }

.section-header {
  max-width: 780px;
  margin-bottom: 3.5rem;
}
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-intro {
  font-size: 1.12rem;
  color: var(--color-text-body);
  margin-top: 0.6rem;
}
.section-light .section-intro { color: var(--color-text-dark-body); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(7, 23, 45, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-line);
}
.site-header.is-scrolled { background-color: rgba(7, 23, 45, 0.98); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--color-text);
}
.brand-logo { width: 38px; height: 38px; }
.brand-wordmark {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-text);
}
.brand-wordmark .brand-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  font-weight: 500;
  color: var(--color-gold);
  margin-top: 4px;
  text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-body);
  letter-spacing: 0.015em;
  padding: 0.4rem 0;
  position: relative;
  border-bottom: none;
}
.nav-link:hover { color: var(--color-text); border-bottom: none; }
.nav-link.is-active { color: var(--color-text); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-gold);
}
.nav-cta {
  font-size: 0.85rem;
  background: var(--color-gold);
  color: var(--color-navy-900);
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all var(--transition);
}
.nav-cta:hover {
  background: var(--color-gold-soft);
  color: var(--color-navy-900);
}

/* Dropdown */
.nav-item { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -1rem;
  min-width: 340px;
  background: var(--color-navy-700);
  border: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-card);
  padding: 0.8rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 180ms ease;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li a {
  display: block;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  color: var(--color-text-body);
}
.dropdown-menu li a:hover {
  background: var(--color-navy-600);
  color: var(--color-gold-soft);
}

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  background: transparent;
}
.menu-toggle-lines,
.menu-toggle-lines::before,
.menu-toggle-lines::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-text);
  position: relative;
}
.menu-toggle-lines::before,
.menu-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle-lines::before { top: -6px; }
.menu-toggle-lines::after  { top: 6px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  padding: 0.95rem 1.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  text-transform: none;
}
.button-primary {
  background: var(--color-gold);
  color: var(--color-navy-900);
  border-color: var(--color-gold);
}
.button-primary:hover {
  background: var(--color-gold-soft);
  border-color: var(--color-gold-soft);
  color: var(--color-navy-900);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(193,154,85,0.25);
}
.button-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line-strong);
}
.button-secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-text);
  color: var(--color-text);
}
.button-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: rgba(255,255,255,0.35);
}
.button-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-text);
}
.button-dark {
  background: var(--color-navy-900);
  color: var(--color-text);
  border-color: var(--color-navy-900);
}
.button-dark:hover { background: var(--color-navy-700); color: var(--color-gold-soft); }
.button-gold { background: var(--color-gold); color: var(--color-navy-900); }
.button-gold:hover { background: var(--color-gold-soft); color: var(--color-navy-900); }

.section-light .button-primary { background: var(--color-navy-700); color: #fff; border-color: var(--color-navy-700); }
.section-light .button-primary:hover { background: var(--color-navy-900); color: #fff; }
.section-light .button-secondary { color: var(--color-navy-700); border-color: var(--color-navy-700); }
.section-light .button-secondary:hover { background: var(--color-navy-700); color: #fff; }

.actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  letter-spacing: 0.04em;
  transition: all var(--transition);
}
.text-link::after { content: "→"; transition: transform var(--transition); }
.text-link:hover { color: var(--color-gold-soft); border-color: var(--color-gold-soft); }
.text-link:hover::after { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  padding: 8rem 0 7rem;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(193,154,85,0.10), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(20,55,105,0.6), transparent 50%),
    linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-700) 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, transparent 70%);
}
.hero .container { position: relative; }
.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  max-width: 950px;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}
.hero-lede {
  font-size: 1.22rem;
  line-height: 1.65;
  max-width: 740px;
  color: var(--color-text-body);
}
.hero-meta {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.hero-capabilities {
  margin: 4rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.hero-capabilities > div {
  padding: 1.8rem 1.4rem 0 0;
  border-right: 1px solid var(--color-line);
}
.hero-capabilities > div:last-child { border-right: 0; padding-right: 0; }
.hero-capabilities dt {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-gold-soft);
  margin-bottom: 0.4rem;
}
.hero-capabilities dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-soft);
  line-height: 1.55;
}

/* Page hero (interior) */
.page-hero {
  padding: 6.5rem 0 5rem;
  background:
    radial-gradient(circle at 85% 30%, rgba(193,154,85,0.12), transparent 50%),
    linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-700) 100%);
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--color-text); max-width: 880px; }
.page-hero p { color: var(--color-text-body); max-width: 740px; font-size: 1.12rem; }
.breadcrumbs {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.8rem;
}
.breadcrumbs a { color: var(--color-text-body); border-bottom: none; }
.breadcrumbs a:hover { color: var(--color-gold-soft); }
.breadcrumbs span { margin: 0 0.7rem; opacity: 0.6; }

/* ---------- Grids and cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--color-navy-700);
  border: 1px solid var(--color-line);
  padding: 2.2rem;
  transition: all var(--transition);
  position: relative;
}
.card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.section-light .card { background: #fff; border-color: #e0e3eb; }

.card-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 0.8rem;
  display: block;
}
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: 0.96rem; }
.card-link {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: none;
}
.card-link::after { content: " →"; transition: padding var(--transition); }
.card-link:hover { color: var(--color-gold-soft); }
.card-link:hover::after { padding-left: 4px; }

/* Service cards */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-navy-700);
  border: 1px solid var(--color-line);
  padding: 2.4rem;
  height: 100%;
  transition: all var(--transition);
  position: relative;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--color-gold);
}
.service-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.service-card .service-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 1.6rem;
}
.service-card h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }
.service-card p { font-size: 0.96rem; flex-grow: 1; color: var(--color-text-body); }
.service-card.service-card-feature {
  background: linear-gradient(135deg, var(--color-navy-600), var(--color-navy-500));
  border-color: var(--color-gold);
  justify-content: center;
  text-align: center;
}
.service-card.service-card-feature::before { display: none; }

/* Audience cards */
.audience-card {
  padding: 2.2rem 0;
  border-top: 1px solid var(--color-line);
}
.audience-card .audience-number {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.9rem;
}
.audience-card h3 { margin-bottom: 0.6rem; font-size: 1.25rem; }
.audience-card p { font-size: 0.96rem; }

/* Text card */
.text-card {
  padding: 2rem 1.6rem 2rem 0;
  border-top: 2px solid var(--color-gold);
}
.text-card h3 {
  font-size: 1.12rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.8rem;
  color: var(--color-text);
}
.section-light .text-card { border-top-color: var(--color-gold-deep); }
.section-light .text-card h3 { color: var(--color-text-dark); }
.text-card p { font-size: 0.94rem; }

/* Numbered steps */
.numbered-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  counter-reset: step;
}
.numbered-list .step {
  background: var(--color-navy-700);
  padding: 2.2rem;
  counter-increment: step;
}
.numbered-list .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.8rem;
}
.numbered-list .step h3 {
  font-size: 1.12rem;
  font-family: var(--font-sans);
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--color-text);
}
.numbered-list .step p { font-size: 0.92rem; margin: 0; }

/* Service detail */
.service-feature {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
  padding: 3.8rem 0;
  border-bottom: 1px solid var(--color-line);
}
.service-feature:last-of-type { border-bottom: 0; }
.service-feature-label {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold);
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
  display: block;
}
.service-feature h3 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--color-text);
  margin-bottom: 0;
  font-weight: 500;
}
.service-feature p { font-size: 1.02rem; }
.service-feature ul { padding-left: 0; }
.service-feature ul li {
  list-style: none;
  padding-left: 1.4rem;
  position: relative;
  color: var(--color-text-body);
  margin-bottom: 0.6rem;
  font-size: 0.97rem;
}
.service-feature ul li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--color-gold);
  position: absolute;
  left: 0; top: 0.6rem;
  border-radius: 50%;
}

/* Cases / portfolio */
.case-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3.5rem;
  padding: 3.5rem 0;
  border-top: 1px solid var(--color-line);
}
.case-card:last-of-type { border-bottom: 1px solid var(--color-line); }
.case-meta { font-size: 0.85rem; }
.case-meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}
.case-meta h3 {
  font-size: 1.18rem;
  font-family: var(--font-sans);
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}
.case-meta p { font-size: 0.88rem; color: var(--color-text-soft); margin-bottom: 1rem; }
.case-body h2 { font-size: 1.85rem; margin-bottom: 1.2rem; }
.case-block { margin-bottom: 1.5rem; }
.case-block h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
}
.case-block p { font-size: 0.98rem; margin: 0; color: var(--color-text-body); }

/* About / profiles */
.about-lede {
  font-size: 1.5rem;
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: 1.45;
  max-width: 880px;
  margin: 0 auto 4rem;
  text-align: center;
  font-weight: 500;
}
.profile { padding: 3.5rem 0; border-top: 1px solid var(--color-line); }
.profile-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold);
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.7rem;
  display: block;
}
.profile h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--color-text);
}
.profile p { font-size: 1rem; }
.profile ul { padding-left: 0; }
.profile ul li {
  list-style: none;
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.55rem;
  color: var(--color-text-body);
  font-size: 0.96rem;
}
.profile ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

/* Insights / Blog */
.insight-card {
  display: flex;
  flex-direction: column;
  padding: 2.4rem 0;
  border-top: 1px solid var(--color-line);
  transition: border-color var(--transition);
}
.insight-card:last-of-type { border-bottom: 1px solid var(--color-line); }
.insight-card:hover { border-top-color: var(--color-gold); }
.insight-meta {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.insight-meta span { color: var(--color-text-soft); margin-left: 0.6rem; font-weight: 500; }
.insight-card h3 { font-size: 1.55rem; margin-bottom: 0.7rem; max-width: 760px; }
.insight-card h3 a { color: var(--color-text); border-bottom: none; }
.insight-card h3 a:hover { color: var(--color-gold-soft); }
.insight-card p { font-size: 1rem; max-width: 760px; }

.article-meta {
  display: flex;
  gap: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 1.6rem;
}
.article-meta span:first-child { color: var(--color-gold); font-weight: 600; }
.article-body { max-width: 760px; margin: 0 auto; font-size: 1.05rem; line-height: 1.78; }
.article-body p { font-size: 1.05rem; color: var(--color-text-body); margin-bottom: 1.5rem; }
.article-body h2 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  margin-top: 2.8rem;
  margin-bottom: 1rem;
  color: var(--color-text);
}
.article-body h3 {
  font-size: 1.3rem;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  color: var(--color-text);
}
.article-body blockquote {
  margin: 2.2rem 0;
  padding: 1.5rem 1.8rem;
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-serif);
  font-size: 1.28rem;
  color: var(--color-text);
  background: var(--color-navy-700);
  font-style: italic;
}
.article-body ul, .article-body ol { padding-left: 1.4rem; margin: 1rem 0 1.5rem; color: var(--color-text-body); }
.article-body ul li, .article-body ol li {
  list-style: disc;
  margin-bottom: 0.6rem;
}
.article-body ol li { list-style: decimal; }
.article-body strong, .article-body em { color: var(--color-text); }
.article-body em { color: var(--color-gold-soft); font-style: italic; }
.article-body a { color: var(--color-gold); border-bottom: 1px solid var(--color-gold); }
.article-body a:hover { color: var(--color-gold-soft); border-color: var(--color-gold-soft); }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
}
.contact-info h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.contact-info p, .contact-info a {
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 1.8rem;
  border-bottom: none;
}
.contact-info .contact-block { margin-bottom: 2.4rem; }
.contact-info a:hover { color: var(--color-gold-soft); }

.form-field { margin-bottom: 1.5rem; }
.form-field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.55rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-navy-700);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  transition: border var(--transition);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-gold);
  background: var(--color-navy-600);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-text-muted); }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field select option { color: #000; background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-consent { font-size: 0.82rem; color: var(--color-text-soft); margin-top: 0.8rem; }
.form-consent a { color: var(--color-gold-soft); border-bottom: 1px solid var(--color-line-gold); }

/* Footer */
.site-footer {
  background: var(--color-navy-900);
  color: var(--color-text-body);
  padding: 5rem 0 2rem;
  font-size: 0.92rem;
  border-top: 1px solid var(--color-line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand-line {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.footer-brand-line img { width: 40px; height: 40px; }
.footer-title {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin: 0;
  font-weight: 600;
}
.footer-title .brand-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  font-weight: 500;
  color: var(--color-gold);
  margin-top: 4px;
  text-transform: uppercase;
}
.footer-text { color: var(--color-text-soft); font-size: 0.94rem; max-width: 340px; }
.footer-heading {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 1.4rem;
}
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
  color: var(--color-text-soft);
  font-size: 0.92rem;
  transition: color var(--transition);
  border-bottom: none;
}
.footer-links a:hover { color: var(--color-gold-soft); }
.footer-legal {
  padding: 2rem 0;
  border-top: 1px solid var(--color-line);
}
.footer-disclaimer {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 1000px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom a { color: var(--color-text-soft); border-bottom: none; }
.footer-bottom a:hover { color: var(--color-gold-soft); }

/* Misc components */
.positioning {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.45;
  color: var(--color-text);
  max-width: 980px;
  font-weight: 500;
}
.section-light .positioning { color: var(--color-text-dark); }

.divider {
  width: 60px;
  height: 2px;
  background: var(--color-gold);
  margin: 0 0 1.8rem;
}
.divider-center { margin: 0 auto 1.8rem; }

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1.2rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-band .actions { justify-content: center; }

/* FAQ */
.faq-item {
  padding: 1.8rem 0;
  border-top: 1px solid var(--color-line);
}
.faq-item:last-of-type { border-bottom: 1px solid var(--color-line); }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-text);
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--color-gold);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--color-gold-soft); }
.faq-answer { padding-top: 1rem; color: var(--color-text-body); font-size: 1rem; }

/* Stat / data display */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.stat { padding: 2.2rem 0; border-right: 1px solid var(--color-line); }
.stat:last-child { border-right: 0; }
.stat-value {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--color-gold);
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.stat-label {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* Topic tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-line-strong);
  font-size: 0.78rem;
  color: var(--color-text-body);
  letter-spacing: 0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-3, .grid-4, .grid-5, .hero-capabilities { grid-template-columns: repeat(2, 1fr); }
  .numbered-list { grid-template-columns: repeat(2, 1fr); }
  .service-feature, .case-card, .contact-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--color-line); }
}

@media (max-width: 720px) {
  .section { padding: 4.5rem 0; }
  .hero { padding: 5rem 0 4.5rem; }
  .grid-2, .grid-3, .grid-4, .grid-5, .hero-capabilities { grid-template-columns: 1fr; }
  .numbered-list { grid-template-columns: 1fr; }
  .hero-capabilities > div {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 1.4rem;
    padding-right: 0;
  }
  .hero-capabilities > div:last-child { border-bottom: 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--color-line); }
  .stat:last-child { border-bottom: 0; }

  .menu-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-navy-800);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.8rem 1.75rem 1.4rem;
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-card);
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-link {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-line);
  }
  .nav-cta {
    margin-top: 0.6rem;
    text-align: center;
  }
  .nav-dropdown .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0.6rem 1rem;
    min-width: auto;
    background: transparent;
  }
  .nav-dropdown .dropdown-menu li a { padding: 0.4rem 0; font-size: 0.88rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .case-card { padding: 2.4rem 0; }
}


/* ---------- Mega dropdown section labels ---------- */
.dropdown-menu li.dropdown-section {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: 0.9rem 1.4rem 0.4rem;
  border-top: 1px solid var(--color-line);
  margin-top: 0.3rem;
}
.dropdown-menu li.dropdown-section:first-of-type { border-top: 0; margin-top: 0; }
.dropdown-menu { min-width: 380px; max-height: calc(100vh - 110px); overflow-y: auto; }

/* ==========================================================================
   ENHANCED LIGHT SECTION STYLING + RESPONSIVE TUNING + ALIGNMENT
   ========================================================================== */

/* ---------- Section-light: cards, lists, numbered steps ---------- */
.section-light {
  background-color: var(--color-cream);
  color: var(--color-text-dark);
}
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4 { color: var(--color-text-dark); }
.section-light p { color: var(--color-text-dark-body); }
.section-light .lede { color: var(--color-text-dark-body); }
.section-light .positioning { color: var(--color-text-dark); }
.section-light .section-intro { color: var(--color-text-dark-body); }
.section-light .muted { color: var(--color-text-dark-muted); }
.section-light .eyebrow { color: var(--color-gold-deep); }

/* Card variants in light section */
.section-light .text-card { border-top-color: var(--color-gold-deep); }
.section-light .text-card h3 { color: var(--color-text-dark); }
.section-light .text-card p { color: var(--color-text-dark-body); }

.section-light .service-card {
  background: #ffffff;
  border-color: #e3e6ec;
  color: var(--color-text-dark);
}
.section-light .service-card h3 { color: var(--color-text-dark); }
.section-light .service-card p  { color: var(--color-text-dark-body); }
.section-light .service-card:hover {
  border-color: var(--color-navy-700);
  box-shadow: 0 10px 30px rgba(10,35,66,0.08);
}
.section-light .service-card .card-link { color: var(--color-navy-700); }
.section-light .service-card .card-link:hover { color: var(--color-gold-deep); }
.section-light .service-card-feature {
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-600));
  border-color: var(--color-gold);
  color: #ffffff;
}
.section-light .service-card-feature h3,
.section-light .service-card-feature p { color: #ffffff; }
.section-light .service-card-feature .card-link { color: var(--color-gold-soft); }

/* Audience cards on light */
.section-light .audience-card { border-top-color: rgba(10,35,66,0.12); }
.section-light .audience-card h3 { color: var(--color-text-dark); }
.section-light .audience-card p { color: var(--color-text-dark-body); }

/* Numbered list / steps on light */
.section-light .numbered-list {
  background: rgba(10,35,66,0.08);
  border-color: rgba(10,35,66,0.08);
}
.section-light .numbered-list .step {
  background: #ffffff;
  color: var(--color-text-dark);
}
.section-light .numbered-list .step h3 { color: var(--color-text-dark); }
.section-light .numbered-list .step p  { color: var(--color-text-dark-body); }

/* Service feature blocks on light */
.section-light .service-feature { border-bottom-color: rgba(10,35,66,0.1); }
.section-light .service-feature h3 { color: var(--color-text-dark); }
.section-light .service-feature p  { color: var(--color-text-dark-body); }
.section-light .service-feature ul li { color: var(--color-text-dark-body); }

/* Profile / about on light */
.section-light .profile { border-top-color: rgba(10,35,66,0.1); }
.section-light .profile h3 { color: var(--color-text-dark); }
.section-light .profile p { color: var(--color-text-dark-body); }
.section-light .profile ul li { color: var(--color-text-dark-body); }
.section-light .about-lede { color: var(--color-text-dark); }

/* FAQ on light */
.section-light .faq-item summary { color: var(--color-text-dark); }
.section-light .faq-item summary:hover { color: var(--color-gold-deep); }
.section-light .faq-answer { color: var(--color-text-dark-body); }
.section-light .faq-item { border-top-color: rgba(10,35,66,0.12); }

/* Insight cards on light */
.section-light .insight-card { border-top-color: rgba(10,35,66,0.12); }
.section-light .insight-card h3 a { color: var(--color-text-dark); }
.section-light .insight-card h3 a:hover { color: var(--color-gold-deep); }
.section-light .insight-card p { color: var(--color-text-dark-body); }

/* Article body on light */
.section-light .article-body p { color: var(--color-text-dark); }
.section-light .article-body h2,
.section-light .article-body h3 { color: var(--color-text-dark); }
.section-light .article-body blockquote {
  background: #ffffff;
  color: var(--color-text-dark);
}
.section-light .article-body em { color: var(--color-gold-deep); }
.section-light .article-body a { color: var(--color-gold-deep); border-bottom-color: var(--color-gold-deep); }

/* Case cards on light */
.section-light .case-card { border-top-color: rgba(10,35,66,0.12); }
.section-light .case-meta h3 { color: var(--color-text-dark); }
.section-light .case-meta p { color: var(--color-text-dark-muted); }
.section-light .case-body h2 { color: var(--color-text-dark); }
.section-light .case-block h4 { color: var(--color-graphite, var(--color-text-dark-muted)); }
.section-light .case-block p { color: var(--color-text-dark-body); }

/* Stat grid on light */
.section-light .stat-grid { border-color: rgba(10,35,66,0.1); }
.section-light .stat { border-right-color: rgba(10,35,66,0.1); }
.section-light .stat-value { color: var(--color-gold-deep); }
.section-light .stat-label { color: var(--color-text-dark-muted); }

/* Tag rows on light */
.section-light .tag {
  border-color: rgba(10,35,66,0.18);
  color: var(--color-text-dark-body);
}

/* Section borders on light */
.section-light + .section { border-top-color: rgba(10,35,66,0.08); }
.section + .section-light { border-top-color: rgba(10,35,66,0.08); }

/* Anchor styling inside body text on light sections */
.section-light p a {
  color: var(--color-navy-700);
  border-bottom: 1px solid var(--color-gold);
}
.section-light p a:hover {
  color: var(--color-gold-deep);
  border-bottom-color: var(--color-gold-deep);
}

/* Page hero gradient — keep dark even adjacent to light */
.page-hero + .section-light { border-top: 0; }

/* ---------- Buttons inside light sections ---------- */
.section-light .button-primary {
  background: var(--color-navy-700);
  color: #ffffff;
  border-color: var(--color-navy-700);
}
.section-light .button-primary:hover {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: #ffffff;
}
.section-light .button-secondary {
  background: transparent;
  color: var(--color-navy-700);
  border-color: var(--color-navy-700);
}
.section-light .button-secondary:hover {
  background: var(--color-navy-700);
  color: #ffffff;
}
.section-light .button-ghost {
  color: var(--color-navy-700);
  border-color: rgba(10,35,66,0.3);
}
.section-light .button-ghost:hover {
  background: rgba(10,35,66,0.04);
  border-color: var(--color-navy-700);
  color: var(--color-navy-700);
}
.section-light .text-link {
  color: var(--color-navy-700);
  border-bottom-color: var(--color-gold);
}
.section-light .text-link:hover { color: var(--color-gold-deep); border-color: var(--color-gold-deep); }

/* ---------- Harmonized alignment ---------- */

/* Consistent vertical padding hierarchy */
.section { padding: 7rem 0; }
@media (max-width: 960px) { .section { padding: 5rem 0; } }
@media (max-width: 640px) { .section { padding: 4rem 0; } }

/* Consistent header spacing */
.section-header { margin-bottom: 4rem; }
@media (max-width: 720px) { .section-header { margin-bottom: 2.5rem; } }

/* Make sure card grids align */
.grid > * { display: flex; flex-direction: column; }
.grid .text-card,
.grid .audience-card,
.grid .service-card,
.numbered-list .step { height: 100%; }

/* Audience cards: remove top border on first row of grid (responsive) */
.audience-card,
.text-card,
.insight-card,
.profile,
.faq-item { padding-top: 2rem; }

/* Hero alignment refinements */
.hero { padding: 9rem 0 7rem; }
@media (max-width: 960px) { .hero { padding: 6rem 0 5rem; } }
@media (max-width: 640px) { .hero { padding: 4.5rem 0 4rem; } }

.page-hero { padding: 7rem 0 5rem; }
@media (max-width: 960px) { .page-hero { padding: 5rem 0 4rem; } }
@media (max-width: 640px) { .page-hero { padding: 4rem 0 3rem; } }

/* Container responsive padding */
@media (max-width: 640px) {
  .container,
  .container-narrow,
  .container-wide { padding: 0 1.25rem; }
}

/* Hero capabilities: smaller text on small screens */
@media (max-width: 640px) {
  .hero-capabilities { margin-top: 2.5rem; }
  .hero-capabilities dt { font-size: 1.05rem; }
  .hero-capabilities dd { font-size: 0.86rem; }
}

/* Forms: better mobile sizing */
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* CTA band: stack on mobile */
@media (max-width: 640px) {
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .cta-band .actions .button { width: 100%; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .button { width: 100%; text-align: center; }
}

/* Footer: tighter on mobile */
@media (max-width: 720px) {
  .site-footer { padding: 3.5rem 0 1.5rem; }
  .footer-grid { gap: 2rem; margin-bottom: 2rem; }
  .footer-bottom { font-size: 0.78rem; }
}

/* Service detail: clean left-right alignment */
.service-feature { align-items: start; }
.service-feature > div:first-child { padding-right: 1rem; }
@media (max-width: 960px) {
  .service-feature > div:first-child { padding-right: 0; }
  .service-feature h3 { font-size: 1.55rem; }
}

/* Numbered list — keep equal heights */
.numbered-list .step { display: flex; flex-direction: column; }

/* Service card heights uniform */
.service-card { min-height: 280px; }
@media (max-width: 720px) { .service-card { min-height: 0; } }

/* Insight cards: maintain reading width */
.insight-card { padding: 2.6rem 0; }
@media (max-width: 720px) { .insight-card { padding: 1.8rem 0; } }

/* Article body — better mobile reading */
@media (max-width: 720px) {
  .article-body { font-size: 1rem; line-height: 1.7; }
  .article-body p { font-size: 1rem; }
  .article-body h2 { font-size: 1.5rem; margin-top: 2rem; }
  .article-body blockquote { padding: 1rem 1.2rem; font-size: 1.1rem; }
}

/* Case meta column on mobile */
@media (max-width: 960px) {
  .case-card { gap: 1.4rem; }
  .case-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1.5rem; }
}
@media (max-width: 640px) {
  .case-meta { grid-template-columns: 1fr; gap: 0.4rem; }
  .case-body h2 { font-size: 1.5rem; }
}

/* Contact grid mobile */
@media (max-width: 960px) {
  .contact-grid { gap: 3rem; }
}
@media (max-width: 640px) {
  .contact-grid { gap: 2rem; }
  .contact-info p, .contact-info a { font-size: 0.98rem; margin-bottom: 1.2rem; }
}

/* Hero h1 wrap balance */
.hero h1 { text-wrap: balance; }
.page-hero h1 { text-wrap: balance; }
.section-title { text-wrap: balance; }

/* Header consistency across very narrow widths */
@media (max-width: 380px) {
  .brand-wordmark { font-size: 1.25rem; }
  .brand-wordmark .brand-sub { font-size: 0.6rem; letter-spacing: 0.28em; }
  .nav { min-height: 70px; }
}

/* Eyebrow alignment everywhere */
.eyebrow { display: inline-block; margin-bottom: 1rem; }
.page-hero .eyebrow { margin-bottom: 1.2rem; }

/* Ensure breadcrumbs always render correctly */
.breadcrumbs { line-height: 1.6; }
@media (max-width: 640px) { .breadcrumbs { font-size: 0.72rem; } }

/* Dropdown on mobile — make it open on tap */
@media (max-width: 720px) {
  .dropdown-menu li.dropdown-section {
    border-top: 1px solid var(--color-line);
    padding: 0.6rem 0 0.2rem;
    margin-top: 0.4rem;
    font-size: 0.62rem;
  }
  .dropdown-menu li.dropdown-section:first-of-type { border-top: 0; }
}

/* Stat number wrap balance */
.stat-value { text-wrap: balance; }

/* Force section padding consistency under page-hero */
.page-hero + .section,
.page-hero + .section-lift,
.page-hero + .section-light,
.page-hero + .section-deeper { padding-top: 6rem; }
@media (max-width: 720px) { 
  .page-hero + .section,
  .page-hero + .section-lift,
  .page-hero + .section-light,
  .page-hero + .section-deeper { padding-top: 4rem; }
}

/* Headings inside cards never break awkwardly */
.text-card h3, .service-card h3, .audience-card h3,
.numbered-list .step h3, .insight-card h3 { text-wrap: balance; }

/* Final polish: smooth focus rings for keyboard users */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ---------- Print styles (basic) ---------- */
@media print {
  .site-header, .site-footer, .nav-cta, .actions { display: none; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: var(--color-navy-700); }
}

/* ==========================================================================
   FINAL POLISH — centered hero capabilities + smooth section transitions
   ========================================================================== */

/* ---------- Hero capabilities: center-aligned, symmetric ---------- */
.hero-capabilities {
  margin: 4.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line);
  text-align: center;
}
.hero-capabilities > div {
  padding: 2rem 1.4rem 0;
  border-right: 1px solid var(--color-line);
  text-align: center;
}
.hero-capabilities > div:last-child {
  border-right: 0;
}
.hero-capabilities dt {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-gold-soft);
  margin: 0 0 0.5rem;
  text-align: center;
}
.hero-capabilities dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-soft);
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 960px) {
  .hero-capabilities { grid-template-columns: repeat(2, 1fr); }
  .hero-capabilities > div { padding: 1.6rem 1rem; }
  .hero-capabilities > div:nth-child(2) { border-right: 0; }
  .hero-capabilities > div:nth-child(1),
  .hero-capabilities > div:nth-child(2) {
    border-bottom: 1px solid var(--color-line);
  }
}
@media (max-width: 640px) {
  .hero-capabilities { grid-template-columns: 1fr; }
  .hero-capabilities > div {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
    padding: 1.4rem 1rem;
  }
  .hero-capabilities > div:last-child { border-bottom: 0; }
}

/* ==========================================================================
   SMOOTH GRADIENT TRANSITIONS — navy <-> cream
   ========================================================================== */

/* Light sections get an 80px feathered band at top and bottom that fades
   from the section's cream color into transparent, allowing the adjacent
   navy section to show through gradually. This creates a soft visual
   transition between the two color worlds. */

.section-light {
  background-color: var(--color-cream);
  position: relative;
  z-index: 1;
}

.section-light::before,
.section-light::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 3;
}

.section-light::before {
  top: -90px;
  background: linear-gradient(
    to bottom,
    rgba(244, 241, 234, 0) 0%,
    rgba(244, 241, 234, 0.35) 45%,
    rgba(244, 241, 234, 0.85) 80%,
    rgba(244, 241, 234, 1) 100%
  );
}

.section-light::after {
  bottom: -90px;
  background: linear-gradient(
    to top,
    rgba(244, 241, 234, 0) 0%,
    rgba(244, 241, 234, 0.35) 45%,
    rgba(244, 241, 234, 0.85) 80%,
    rgba(244, 241, 234, 1) 100%
  );
}

/* The container in section-light needs to sit above the gradient bands,
   so its content is visible and not visually washed out. */
.section-light > .container,
.section-light > .container-narrow,
.section-light > .container-wide {
  position: relative;
  z-index: 4;
}

/* When a section-light sits next to any other section, hide the hard
   1px border-top divider — the gradient handles the transition. */
.section + .section-light,
.section-lift + .section-light,
.section-deeper + .section-light,
.hero + .section-light,
.page-hero + .section-light,
.section-light + .section,
.section-light + .section-lift,
.section-light + .section-deeper {
  border-top: 0;
}

/* Navy section adjacent to section-light needs extra bottom/top padding
   so its content does not run into the gradient overlay. The gradient
   bands sit in the previous/next section's padding zone. */
.section:has(+ .section-light),
.section-lift:has(+ .section-light),
.section-deeper:has(+ .section-light),
.hero:has(+ .section-light),
.page-hero:has(+ .section-light) {
  padding-bottom: calc(7rem + 30px);
}
.section-light + .section,
.section-light + .section-lift,
.section-light + .section-deeper {
  padding-top: calc(7rem + 30px);
}

/* Adjacent navy-section transitions: subtle 1px hairline using gold tint
   so navy-to-navy boundaries feel intentional rather than mechanical. */
.section + .section,
.section + .section-lift,
.section-lift + .section,
.section-lift + .section-deeper,
.section + .section-deeper,
.section-deeper + .section {
  border-top: 1px solid var(--color-line-gold);
}

/* Soft inner-glow at top of section-deeper to give the CTA band a
   subtle vignette and visual stop. */
.section-deeper {
  background:
    radial-gradient(circle at 50% 0%, rgba(193,154,85,0.06), transparent 50%),
    var(--color-navy-900);
}

/* Hero gradient bottom blends into whatever section follows */
.hero {
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(7, 23, 45, 0.4) 100%
  );
}

/* Subtle gradient under page-hero to ease into next section */
.page-hero {
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(7, 23, 45, 0.35) 100%
  );
}

/* Tiny mobile adjustments for the gradient bands */
@media (max-width: 720px) {
  .section-light::before,
  .section-light::after { height: 60px; }
  .section-light::before { top: -60px; }
  .section-light::after  { bottom: -60px; }
  .section:has(+ .section-light),
  .section-lift:has(+ .section-light),
  .section-deeper:has(+ .section-light),
  .hero:has(+ .section-light),
  .page-hero:has(+ .section-light) {
    padding-bottom: calc(5rem + 20px);
  }
  .section-light + .section,
  .section-light + .section-lift,
  .section-light + .section-deeper {
    padding-top: calc(5rem + 20px);
  }
}

/* Fallback for browsers without :has() — apply general extra padding */
@supports not selector(:has(*)) {
  .section, .section-lift, .section-deeper { padding-bottom: calc(7rem + 30px); padding-top: calc(7rem + 30px); }
}

/* ==========================================================================
   ALL-NAVY THEME — soft gradients between navy variants, gold detailing
   ========================================================================== */

:root {
  --color-navy-650: #0c2a4d;   /* mid-tone between navy-700 and navy-600 */
}

/* ---------- Body background as a slow vertical gradient ---------- */
body {
  background:
    radial-gradient(ellipse at top, rgba(193,154,85,0.04), transparent 60%),
    linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-700) 100%);
  background-attachment: fixed;
}

/* ---------- Section variants ---------- */
.section {
  background: transparent;
  position: relative;
}

.section-lift {
  background:
    linear-gradient(180deg, var(--color-navy-700) 0%, var(--color-navy-650) 100%);
}

.section-mid {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(193,154,85,0.05), transparent 55%),
    linear-gradient(180deg, var(--color-navy-650) 0%, var(--color-navy-600) 100%);
}

.section-deeper {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(193,154,85,0.06), transparent 50%),
    linear-gradient(180deg, var(--color-navy-700) 0%, var(--color-navy-900) 100%);
}

/* ---------- Replace hard borders with feathered gradients ---------- */
.section + .section,
.section + .section-lift,
.section + .section-mid,
.section + .section-deeper,
.section-lift + .section,
.section-lift + .section-lift,
.section-lift + .section-mid,
.section-lift + .section-deeper,
.section-mid + .section,
.section-mid + .section-lift,
.section-mid + .section-mid,
.section-mid + .section-deeper,
.section-deeper + .section,
.section-deeper + .section-lift,
.section-deeper + .section-mid,
.section-deeper + .section-deeper {
  border-top: 0;
}

/* Top fade-in band for any lifted/mid/deeper section so it blends from the section above */
.section-lift::before,
.section-mid::before,
.section-deeper::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 1;
}

.section-lift::before {
  background: linear-gradient(to bottom, transparent 0%, var(--color-navy-700) 100%);
}
.section-mid::before {
  background: linear-gradient(to bottom, transparent 0%, var(--color-navy-650) 100%);
}
.section-deeper::before {
  background: linear-gradient(to bottom, transparent 0%, var(--color-navy-700) 100%);
}

/* Bottom fade-out band so the section eases into the next */
.section-lift::after,
.section-mid::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 1;
}
.section-lift::after  { background: linear-gradient(to top, transparent 0%, var(--color-navy-650) 100%); }
.section-mid::after   { background: linear-gradient(to top, transparent 0%, var(--color-navy-600) 100%); }

/* Make sure container content sits above the gradient bands */
.section-lift > .container,
.section-mid > .container,
.section-deeper > .container,
.section-lift > .container-narrow,
.section-mid > .container-narrow,
.section-deeper > .container-narrow,
.section-lift > .container-wide,
.section-mid > .container-wide,
.section-deeper > .container-wide {
  position: relative;
  z-index: 2;
}

/* Disable any cream-section styling that may still match */
.section-light { display: none !important; } /* failsafe — should not appear */

/* ---------- Stronger gold detailing ---------- */

/* Section titles get a tiny gold rule before them */
.section-header { position: relative; }
.section-header .section-title {
  position: relative;
}
.section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.section-header .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--color-gold);
}

/* Card backgrounds — pick up navy with subtle gold border on hover */
.card,
.service-card,
.text-card,
.audience-card,
.numbered-list .step {
  background-color: rgba(255,255,255,0.025);
  border-color: rgba(193,154,85,0.18);
}
.card:hover,
.service-card:hover {
  border-color: var(--color-gold);
  background-color: rgba(193,154,85,0.04);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.text-card { border-top: 2px solid var(--color-gold); background: transparent; padding-left: 0; padding-right: 0;}
.text-card h3 { color: #ffffff; }
.audience-card { border-top-color: rgba(193,154,85,0.3); }

/* Gold accents on H2/H3 first letter */
.section-title { color: #ffffff; }
.section-title::first-letter { color: var(--color-gold); }

/* Numbered step counters in gold */
.numbered-list .step::before {
  color: var(--color-gold) !important;
  font-size: 1.1rem;
}

/* Service feature labels — italic gold */
.service-feature-label { color: var(--color-gold); font-style: italic; }

/* Stronger gold under-rule on hover for nav links */
.nav-link:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-gold-soft);
}

/* Hero overlay refinements */
.hero {
  background:
    radial-gradient(ellipse at 75% 15%, rgba(193,154,85,0.12), transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(15,45,86,0.7), transparent 50%),
    linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-700) 100%);
}

/* Hero capabilities get gold-lit underline */
.hero-capabilities {
  border-top: 1px solid var(--color-line-gold);
}
.hero-capabilities > div {
  border-right-color: var(--color-line-gold);
}

/* Footer rim with gold accent */
.site-footer {
  border-top: 1px solid var(--color-line-gold);
  background:
    radial-gradient(ellipse at top, rgba(193,154,85,0.04), transparent 50%),
    var(--color-navy-900);
}

/* Insight cards: gold top accent on hover */
.insight-card { border-top-color: rgba(193,154,85,0.16); }
.insight-card:hover { border-top-color: var(--color-gold); }

/* Case meta-label more prominent gold */
.case-meta-label { color: var(--color-gold); }

/* Quote / positioning block — gold left rule */
.positioning {
  padding-left: 2rem;
  border-left: 3px solid var(--color-gold);
}
@media (max-width: 720px) {
  .positioning { padding-left: 1.2rem; }
}

/* About lede gets a centered gold rule above it */
.about-lede {
  position: relative;
  padding-top: 2.6rem;
}
.about-lede::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-gold);
  margin: 0 auto 1.8rem;
}

/* Anchor link styling — gold underline always */
.article-body a,
.faq-answer a,
.contact-info a,
.dropdown-menu a:hover {
  color: var(--color-gold-soft);
}
.article-body a { border-bottom-color: var(--color-gold); }

/* Section-deeper CTA gold band on top */
.section-deeper {
  position: relative;
}
.section-deeper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: var(--color-gold);
  z-index: 3;
}

/* Mobile adjustments for the new gradient bands */
@media (max-width: 720px) {
  .section-lift::before,
  .section-mid::before,
  .section-deeper::before { height: 70px; top: -70px; }
  .section-lift::after,
  .section-mid::after { height: 70px; bottom: -70px; }
}

/* Footer wordmark gold accent under the title */
.footer-title { position: relative; padding-bottom: 0.7rem; }
.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--color-gold);
}

/* Eyebrow inside hero gets gold accent line */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1.5px;
  background: var(--color-gold);
}

/* Page-hero breadcrumb gold separator dots */
.breadcrumbs span { color: var(--color-gold); opacity: 0.5; }

/* ==========================================================================
   HEADER — WHITE TREATMENT (to host the canonical logo natively)
   The site body remains navy; the header bar is white so the canonical
   logo (white background, navy letters, gold accent) sits in its proper
   environment. This is the only white surface on the site.
   ========================================================================== */

.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(10, 35, 66, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(10, 35, 66, 0.08);
}

/* Brand label */
.brand-wordmark {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy-700);
}
.brand-wordmark .brand-sub {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--color-navy-700);
  text-transform: none;
  margin-top: 4px;
  opacity: 0.78;
}

/* Nav links on light header */
.nav-link {
  color: var(--color-navy-700);
}
.nav-link:hover { color: var(--color-gold-deep); }
.nav-link.is-active { color: var(--color-navy-700); }
.nav-link.is-active::after { background: var(--color-gold); }

/* CTA button — navy on white */
.nav-cta {
  background: var(--color-navy-700);
  color: #ffffff;
}
.nav-cta:hover {
  background: var(--color-navy-900);
  color: #ffffff;
}

/* Dropdown — white surface */
.dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(10, 35, 66, 0.12);
  box-shadow: 0 8px 24px rgba(10, 35, 66, 0.10);
}
.dropdown-menu li a {
  color: var(--color-navy-700);
}
.dropdown-menu li a:hover {
  background: rgba(193, 154, 85, 0.08);
  color: var(--color-gold-deep);
}
.dropdown-menu li.dropdown-section {
  color: var(--color-gold-deep);
  border-top: 1px solid rgba(10, 35, 66, 0.08);
}
.dropdown-menu li.dropdown-section:first-of-type { border-top: 0; }

/* Mobile menu toggle on white */
.menu-toggle { border-color: rgba(10, 35, 66, 0.18); }
.menu-toggle-lines,
.menu-toggle-lines::before,
.menu-toggle-lines::after { background: var(--color-navy-700); }

/* Mobile nav drawer */
@media (max-width: 720px) {
  .nav-links {
    background: #ffffff;
    border-bottom-color: rgba(10, 35, 66, 0.12);
  }
  .nav-links .nav-link { border-bottom-color: rgba(10, 35, 66, 0.08); }
}

/* Brand logo image sizing: a touch larger to read clearly */
.brand-logo {
  width: 42px;
  height: 42px;
}

/* Apply Instrument fonts where applicable, with graceful fallback */
@font-face {
  font-family: 'Instrument Sans';
  font-weight: 700;
  src: local('Instrument Sans Bold'),
       url('https://fonts.gstatic.com/s/instrumentsans/v1/pxiHypQg5g7ZGzZJDFrhTFOgQfvKLI-NJg.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  src: local('Instrument Serif Italic'),
       url('https://fonts.gstatic.com/s/instrumentserif/v1/pxiHypag5g7ZGzZJDFrhTFOgQfvL.woff2') format('woff2');
  font-display: swap;
}

/* Pull tagline/italic touches to Instrument Serif Italic where it appears */
.profile-eyebrow,
.service-feature-label,
.numbered-list .step::before,
.service-card .service-number {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}

/* Wordmark-style elements pick up Instrument Sans Bold for unified look */
.eyebrow,
.section-light .eyebrow,
.case-meta-label,
.card-eyebrow,
.footer-heading,
.stat-label,
.breadcrumbs,
.article-meta,
.dropdown-menu li.dropdown-section {
  font-family: 'Instrument Sans', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
}

/* ==========================================================================
   HEADER LOGO — horizontal lockup (website_header.png is 960x160, 6:1 ratio)
   ========================================================================== */
.brand-logo {
  width: auto;
  height: 52px;
  max-height: 52px;
  display: block;
}
@media (max-width: 720px) {
  .brand-logo { height: 42px; }
}
@media (max-width: 480px) {
  .brand-logo { height: 36px; }
}

/* The wordmark text is now part of the image; hide if any pages still have it */
.brand-wordmark { display: none; }

/* Slightly more padding around the header to give the logo breathing room */
.nav { min-height: 92px; gap: 1.5rem; }
@media (max-width: 720px) {
  .nav { min-height: 76px; }
}

/* ==========================================================================
   STANDARDIZED CARD SYSTEM — only 2 styles site-wide
   Style A: .service-card  → service grids, audience grids, distinct items
   Style B: .text-card     → principles, outcomes, short statements
   ========================================================================== */

/* Style A — service-card: balanced height + uniform spacing */
.service-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(193, 154, 85, 0.18);
  padding: 2.4rem;
  position: relative;
  min-height: 240px;
  transition: all var(--transition);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--color-gold);
}
.service-card h3 {
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.service-card p {
  color: var(--color-text-body);
  font-size: 0.96rem;
  flex-grow: 1;
  margin-bottom: 1rem;
}
.service-card .service-number { display: none; }
.service-card:hover {
  border-color: var(--color-gold);
  background-color: rgba(193, 154, 85, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

/* Style B — text-card: cleaner, gold top rule, no background */
.text-card {
  background: transparent;
  padding: 1.8rem 1.4rem 1.8rem 0;
  border-top: 2px solid var(--color-gold);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}
.text-card h3 {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.75rem;
}
.text-card p {
  color: var(--color-text-body);
  font-size: 0.94rem;
}

/* Numbered-list / step blocks now use text-card visual language */
.numbered-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
  background: transparent;
  border: 0;
  counter-reset: step;
}
.numbered-list .step {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--color-gold);
  padding: 1.6rem 1rem 0 0;
  counter-increment: step;
}
.numbered-list .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.5rem;
}
.numbered-list .step h3 {
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.6rem;
}
.numbered-list .step p {
  color: var(--color-text-body);
  font-size: 0.94rem;
  margin: 0;
}
@media (max-width: 960px) { .numbered-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .numbered-list { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Service feature blocks (on service detail pages) inherit the same calm style */
.service-feature h3 { color: #ffffff; }

/* Audience cards no longer used — class kept as a safety alias for any stragglers */
.audience-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(193, 154, 85, 0.18);
  padding: 2.4rem;
  position: relative;
  min-height: 240px;
}
.audience-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--color-gold);
}
.audience-card .audience-number { display: none; }
.audience-card h3 { color: #ffffff; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; }
.audience-card p { color: var(--color-text-body); font-size: 0.96rem; }

/* ==========================================================================
   REMOVE GOLD FIRST-LETTER ON SECTION TITLES (titles fully white)
   ========================================================================== */
.section-title::first-letter,
h1::first-letter,
h2::first-letter,
h3::first-letter {
  color: inherit;
}

/* ==========================================================================
   CONTACT FORM STATUS MESSAGE
   ========================================================================== */
.form-status {
  display: none;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--color-gold);
  background: rgba(193, 154, 85, 0.08);
  font-size: 0.95rem;
  color: var(--color-text);
}
.form-status:not(:empty) { display: block; }
.form-status-ok   { border-left-color: var(--color-gold); }
.form-status-err  { border-left-color: #c14a4a; background: rgba(193, 74, 74, 0.08); }

/* ==========================================================================
   FOOTER — 5-column layout for additional "For Clients" section
   ========================================================================== */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1.1fr 1.1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}