/* ==========================================================================
   E & O LEARNET — Master Stylesheet
   Design System: Refined Editorial Academic
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour Palette — Refined Cream, Verdant Green & Illuminated Gold
     -----------------------------------------------------------------
     A carefully recalibrated palette drawing upon the visual vocabulary
     of the illuminated manuscript tradition: parchment cream as the
     foundational ground, mature verdant greens articulating primary
     structure, and burnished golden accents carrying the ornamental
     weight. Each tonality has been adjusted for chromatic harmony
     with its neighbours, producing a unified palette of institutional
     warmth and editorial sophistication. */

  /* Ink & text — warmed charcoals rather than cool greys */
  --ink: #1F2E24;
  --charcoal: #3D382F;
  --muted: #726A58;

  /* Green family — verdant, mature, horticulturally resonant */
  --forest: #2A5240;
  --forest-deep: #183826;
  --forest-soft: #457558;
  --sage: #86A18C;
  --sage-light: #B4C7B8;
  --moss: #5A8369;
  --green-accent: #6B9278;

  /* Cream & parchment — warmer, more luminous, manuscript-inspired */
  --parchment: #F3EAD1;
  --cream: #FDF8E9;
  --cream-light: #FEFBF2;
  --beige: #E8D9B6;
  --beige-light: #F0E4C6;
  --ivory: #FEFAEC;

  /* Gold family — illuminated, burnished, amplified luminosity */
  --gold: #D4AB5A;
  --gold-soft: #E5C689;
  --gold-deep: #A67F33;
  --gold-muted: #B8934C;
  --gold-pale: #F2DFB0;
  --gold-bright: #E0B668;

  /* Neutrals with warm undertone — subtle tonal support */
  --stone: #948A74;
  --stone-light: #C2B9A2;

  /* Structural lines — refined to cream-gold harmony */
  --line: rgba(166, 127, 51, 0.16);
  --line-strong: rgba(42, 82, 64, 0.22);
  --line-gold: rgba(212, 171, 90, 0.32);
  --line-cream: rgba(42, 82, 64, 0.08);

  /* Typography */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Type Scale (fluid) */
  --fs-xs: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.08rem);
  --fs-md: clamp(1.12rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.35rem, 1.2rem + 0.75vw, 1.65rem);
  --fs-xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem);
  --fs-2xl: clamp(2.4rem, 1.8rem + 3vw, 3.5rem);
  --fs-3xl: clamp(3rem, 2.2rem + 4vw, 5rem);
  --fs-hero: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* Spacing Scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --max-w: 1360px;
  --max-w-narrow: 960px;
  --max-w-reading: 720px;
  --gutter: clamp(1.25rem, 2vw, 2.5rem);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(15, 31, 26, 0.04), 0 1px 3px rgba(15, 31, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 31, 26, 0.06), 0 2px 6px rgba(15, 31, 26, 0.04);
  --shadow-lg: 0 20px 50px rgba(15, 31, 26, 0.12), 0 8px 20px rgba(15, 31, 26, 0.06);
  --shadow-xl: 0 40px 100px rgba(15, 31, 26, 0.15), 0 20px 40px rgba(15, 31, 26, 0.08);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration: 0.6s;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "kern";
  overflow-x: hidden;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 30;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

em, i { font-style: italic; }

::selection { background: var(--forest); color: var(--cream); }

/* --------------------------------------------------------------------------
   3. Typography Utilities
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-5);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.eyebrow.no-line::before { display: none; }

.display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.display em {
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --------------------------------------------------------------------------
   4. Layout Primitives
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--sp-10) 0;
  position: relative;
}

.section-sm { padding: var(--sp-8) 0; }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 247, 240, 0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease);
}

.site-header.scrolled {
  background: rgba(250, 247, 240, 0.96);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  gap: var(--sp-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  color: var(--cream);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text small {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 2px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu > li { position: relative; }

.nav-menu a {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  padding: 0.5rem 0;
  position: relative;
  display: inline-block;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--ink);
}

.nav-menu a.active::after,
.nav-menu a:hover::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
}

.has-dropdown > a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-right: 4px;
  opacity: 0.6;
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 260px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease);
  list-style: none;
  margin: 0;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown li { display: block; }
.dropdown a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--muted);
}
.dropdown a:hover { background: var(--parchment); color: var(--ink); }
.dropdown a::after { display: none !important; }

.dropdown-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
  padding: 0.4rem 0.9rem 0.25rem;
  display: block;
  font-weight: 400;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  background: var(--forest);
  color: var(--cream) !important;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s var(--ease);
}
.nav-cta:hover { background: var(--ink); transform: translateY(-1px); }
.nav-cta::after { display: none !important; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: var(--ink);
  transition: all 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 85vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 6rem 2rem 2rem;
    background: var(--cream);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { font-size: 1.1rem; }
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    padding: 0.25rem 0 0.25rem 1rem;
    margin-top: 0.5rem;
    border: none;
    background: transparent;
    min-width: 0;
  }
  .dropdown a { padding: 0.4rem 0; font-size: 0.95rem; }
  .has-dropdown > a::before { display: none; }
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 31, 26, 0.4);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
    z-index: 99;
  }
  .nav-overlay.active { opacity: 1; pointer-events: auto; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--forest);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn-gold {
  background: var(--gold);
  color: var(--cream);
}
.btn-gold:hover { background: var(--gold-deep); }

.btn .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Hero Sections
   -------------------------------------------------------------------------- */
.hero {
  padding: calc(var(--sp-10) + 4rem) 0 var(--sp-10);
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.08;
  pointer-events: none;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, var(--forest) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, var(--gold) 0%, transparent 40%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 {
  font-size: var(--fs-hero);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin-bottom: var(--sp-6);
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15, 31, 26, 0.35));
  pointer-events: none;
}

.hero-media .badge {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-5);
  right: var(--sp-5);
  color: var(--cream);
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.25;
}

.hero-meta {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.hero-meta > div {
  flex: 1 1 150px;
}

.hero-meta .num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  line-height: 1;
  color: var(--forest);
  margin-bottom: 0.35rem;
}

.hero-meta .lbl {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.hero-cta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. Page Hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding: calc(var(--sp-9) + 4rem) 0 var(--sp-8);
  background: linear-gradient(180deg, var(--parchment), var(--cream));
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 65%);
  opacity: 0.25;
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  max-width: 820px;
}

.page-hero h1 {
  font-size: var(--fs-3xl);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  margin-bottom: var(--sp-5);
}

.page-hero h1 em {
  font-style: italic;
  color: var(--gold-deep);
}

.breadcrumb {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--stone-light); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.card-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold-deep);
  margin-bottom: var(--sp-3);
  display: block;
}

.card h3 {
  margin-bottom: var(--sp-3);
}

.card p {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Card-list rules have been consolidated in Section 26.2 of this stylesheet.
   See the Alignment Remediation section for the authoritative rules. */

.card.dark {
  background: var(--forest);
  color: var(--beige);
  border-color: var(--forest);
}
.card.dark h3, .card.dark .card-num { color: var(--cream); }
.card.dark .card-num { color: var(--gold-soft); }
.card.dark p { color: rgba(245, 240, 230, 0.75); }
.card.dark .card-list li { border-color: rgba(245, 240, 230, 0.15); color: var(--beige); }

/* --------------------------------------------------------------------------
   10. Section Headers
   -------------------------------------------------------------------------- */
.section-head {
  margin-bottom: var(--sp-8);
  max-width: 820px;
}

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

.section-head h2 {
  font-size: var(--fs-2xl);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  margin-bottom: var(--sp-4);
}

.section-head h2 em {
  font-style: italic;
  color: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   11. Two-column content blocks
   -------------------------------------------------------------------------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (max-width: 900px) {
  .feature-split { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.feature-split.reverse .media { order: 2; }

@media (max-width: 900px) {
  .feature-split.reverse .media { order: unset; }
}

.feature-split .media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Fallback background — visible whenever the image fails to load or before
     it completes. Constructed from a forest-green gradient overlaid with a
     subtle diagonal pattern rendered entirely in CSS. */
  background:
    linear-gradient(135deg, rgba(184, 135, 70, 0.22) 0%, rgba(184, 135, 70, 0) 45%),
    repeating-linear-gradient(45deg, rgba(245, 240, 230, 0.05) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
}

.feature-split .media::after {
  /* Decorative monogram watermark for when the image fails. Large italicised
     "eo" in low-opacity gold, centred within the panel. */
  content: "eo";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 300;
  color: rgba(184, 135, 70, 0.15);
  letter-spacing: -0.06em;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.feature-split .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.feature-split .media-tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--cream);
  color: var(--ink);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--forest-deep);
  color: var(--beige);
  padding: var(--sp-9) 0 var(--sp-5);
  margin-top: var(--sp-10);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(245, 240, 230, 0.15);
}

@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-top { grid-template-columns: 1fr; }
}

.site-footer .brand {
  color: var(--cream);
  margin-bottom: var(--sp-4);
}

.footer-about p {
  font-size: 0.92rem;
  color: rgba(245, 240, 230, 0.7);
  max-width: 320px;
}

.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li { margin-bottom: 0.7rem; }

.footer-col a {
  font-size: 0.9rem;
  color: rgba(245, 240, 230, 0.8);
}

.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  font-size: 0.8rem;
  color: rgba(245, 240, 230, 0.55);
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-bottom .legal {
  display: flex;
  gap: var(--sp-5);
}

/* --------------------------------------------------------------------------
   13. Stats / Metrics
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-block: 1px solid var(--line);
}

.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  line-height: 1;
  color: var(--forest);
  letter-spacing: -0.04em;
}

.stat .num em {
  font-style: italic;
  color: var(--gold-deep);
}

.stat .lbl {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   14. Timeline (for Journey page)
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  padding-left: 2rem;
  max-width: 820px;
  margin: 0 auto;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), var(--line));
}

.timeline-item {
  position: relative;
  padding-bottom: var(--sp-8);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--cream);
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-2);
}

.timeline-item h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

/* --------------------------------------------------------------------------
   15. Profile Cards (Leadership)
   -------------------------------------------------------------------------- */
.profile {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-7);
  align-items: start;
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--line);
}

.profile:first-of-type { border-top: none; padding-top: 0; }

@media (max-width: 780px) {
  .profile { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.profile-image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.03);
}

.profile h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}

.profile .titles {
  margin-bottom: var(--sp-5);
}
.profile .titles .role {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
  font-size: var(--fs-md);
  line-height: 1.4;
}
.profile .titles .sub {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.profile-body p {
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   16. Process Steps
   -------------------------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-5);
  counter-reset: step;
}

.process-step {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: relative;
  transition: all 0.4s var(--ease);
  counter-increment: step;
}

.process-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--gold-soft);
  font-weight: 300;
  opacity: 0.8;
}

.process-step:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.process-step h4 {
  font-size: var(--fs-md);
  margin: var(--sp-5) 0 var(--sp-3);
}

.process-step p {
  font-size: 0.9rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. Units / Services Preview (Home)
   -------------------------------------------------------------------------- */
.unit-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: block;
  transition: transform 0.5s var(--ease);
}

.unit-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.unit-card:hover img { transform: scale(1.05); }
.unit-card:hover { transform: translateY(-4px); }

.unit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 31, 26, 0.85));
}

.unit-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-6);
  color: var(--cream);
  z-index: 2;
}

.unit-card-content .kicker {
  color: var(--gold-soft);
  margin-bottom: var(--sp-3);
}

.unit-card-content h3 {
  color: var(--cream);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}

.unit-card-content p {
  color: rgba(245, 240, 230, 0.85);
  font-size: 0.92rem;
  max-width: 44ch;
}

.unit-card-content .link-arrow {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--cream);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease);
}

.unit-card:hover .link-arrow { gap: 0.9rem; }

/* --------------------------------------------------------------------------
   18. Contact / Form
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info {
  padding: var(--sp-7);
  background: var(--forest);
  color: var(--beige);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.contact-info::before {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 65%);
  opacity: 0.22;
}

.contact-info h3 { color: var(--cream); margin-bottom: var(--sp-5); position: relative; }
.contact-info p { color: rgba(245, 240, 230, 0.75); position: relative; }

.contact-detail {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(245, 240, 230, 0.15);
  position: relative;
}

.contact-detail:first-of-type { border-top: none; }

.contact-detail .icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 240, 230, 0.1);
  color: var(--gold-soft);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1rem;
}

.contact-detail .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 4px;
}

.contact-detail .val {
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-form {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}

.form-group { margin-bottom: var(--sp-5); }

.form-group label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  font: inherit;
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.3s var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   19. Pull Quote / Callout
   -------------------------------------------------------------------------- */
.pullquote {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 52ch;
  margin: var(--sp-7) auto;
  text-align: center;
  position: relative;
  padding: 0 var(--sp-5);
}

.pullquote::before {
  content: "“";
  font-size: 5rem;
  color: var(--gold);
  line-height: 0.5;
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.4;
}

.pullquote .attribution {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   20. Section Divider
   -------------------------------------------------------------------------- */
.divider {
  text-align: center;
  padding: var(--sp-6) 0;
  position: relative;
}

.divider::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: -30px 0 0 var(--gold-soft), 30px 0 0 var(--gold-soft);
}

/* --------------------------------------------------------------------------
   21. Value pillars (Alternating)
   -------------------------------------------------------------------------- */
.pillar {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.pillar:first-of-type { border-top: none; }

.pillar .index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
}

.pillar h4 { margin-bottom: var(--sp-2); }
.pillar p { color: var(--muted); max-width: 60ch; }

/* --------------------------------------------------------------------------
   22. Reveal Animations
   -------------------------------------------------------------------------- */
/* Reveal elements: ALWAYS VISIBLE by default. Any animation is purely
   decorative and must never prevent content from being legible. The
   IntersectionObserver in main.js may add `.in-view` for subtle emphasis,
   but the absence of that class — or of JavaScript altogether — produces
   no adverse visual consequence. */
.reveal {
  /* Always visible. */
}

/* Optional subtle enhancement when JS is available AND the user has not
   requested reduced motion. This applies a gentle CSS keyframe animation
   on page load. Elements begin with a slight translation and fade IN, and
   always settle at full opacity regardless of JS execution timing. */
@media (prefers-reduced-motion: no-preference) {
  html.js-enabled .reveal {
    animation: revealFadeIn 0.7s var(--ease) both;
  }
}

@keyframes revealFadeIn {
  from {
    opacity: 0.4;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   23. Utility classes
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mb-6 { margin-bottom: var(--sp-6); }
.mt-6 { margin-top: var(--sp-6); }
.muted { color: var(--muted); }
.bg-parchment { background: var(--parchment); }
.bg-forest { background: var(--forest); color: var(--beige); }
.bg-forest h2, .bg-forest h3 { color: var(--cream); }
.bg-forest .eyebrow { color: var(--gold-soft); }
.bg-forest .eyebrow::before { background: var(--gold-soft); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: var(--beige-light);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Skip-link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1rem;
  z-index: 200;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 1rem; }

/* --------------------------------------------------------------------------
   24. Extended Components — anchor-nav, feature-split extensions, credentials,
       sectors, CTA panels, pullquote, section variants, contact form, bank,
       map, address
   -------------------------------------------------------------------------- */

/* Section variants */
.section-parchment {
  background: var(--parchment);
  padding: var(--sp-10) 0;
  position: relative;
}

.section-forest {
  background: var(--forest);
  color: var(--beige);
  padding: var(--sp-10) 0;
  position: relative;
}

.section-forest h2,
.section-forest h3,
.section-forest h4 { color: var(--cream); }

.section-forest .lead { color: rgba(245, 240, 230, 0.78); }

.section-forest .eyebrow,
.section-header.light .eyebrow,
.eyebrow.light {
  color: var(--gold-soft);
}
.section-forest .eyebrow::before,
.section-header.light .eyebrow::before,
.eyebrow.light::before { background: var(--gold-soft); }

.section-header { max-width: 760px; }
.section-header.light h2 { color: var(--cream); }
.section-header.light p { color: rgba(245, 240, 230, 0.78); }

/* Anchor / jump navigation */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.anchor-nav a {
  color: var(--ink);
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease);
  text-decoration: none;
}
.anchor-nav a:hover {
  background: var(--cream);
  border-color: var(--gold-soft);
  color: var(--gold-deep);
}

/* Feature-split extension — alias for new body/media children */
.feature-split-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Fallback background — visible when the image has not yet loaded or
     fails to load. Matches the treatment applied to .feature-split .media. */
  background:
    linear-gradient(135deg, rgba(212, 171, 90, 0.22) 0%, rgba(212, 171, 90, 0) 45%),
    repeating-linear-gradient(45deg, rgba(253, 248, 233, 0.05) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.feature-split-media::after {
  content: "eo";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 300;
  color: rgba(184, 135, 70, 0.15);
  letter-spacing: -0.06em;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.feature-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.9s var(--ease);
}
.feature-split-media:hover img { transform: scale(1.04); }
.feature-split-body { padding: var(--sp-2) 0; }
.feature-split.reverse .feature-split-media { order: 2; }
@media (max-width: 900px) {
  .feature-split.reverse .feature-split-media { order: unset; }
}

/* Process card — wide variant spanning grid */
.process-grid .process-card-wide { grid-column: 1 / -1; }

/* Card num — wide feature variant */
.card-num.card-wide-feature {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--beige);
  border-color: transparent;
}
.card-num.card-wide-feature h3 { color: var(--cream); }
.card-num.card-wide-feature p { color: rgba(245, 240, 230, 0.82); }
.card-num.card-wide-feature .card-num-tag {
  color: var(--gold-soft);
  border-color: rgba(184, 135, 70, 0.4);
}

/* Credentials */
.credential-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.credential-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-soft);
}
.credential-icon {
  width: 42px;
  height: 42px;
  color: var(--gold-deep);
  margin-bottom: var(--sp-3);
}
.credential-icon svg { width: 100%; height: 100%; }
.credential-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}
.credential-card p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
}

/* Sector grid + cards */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-5);
}
.sector-card {
  position: relative;
  padding: var(--sp-5);
  background: rgba(250, 247, 240, 0.04);
  border: 1px solid rgba(245, 240, 230, 0.14);
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease);
}
.sector-card:hover {
  background: rgba(250, 247, 240, 0.08);
  border-color: var(--gold-soft);
  transform: translateY(-3px);
}
.sector-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-soft);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.08em;
}
.sector-card h3 {
  color: var(--cream);
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.sector-card p {
  color: rgba(245, 240, 230, 0.72);
  font-size: 0.95rem;
  margin: 0;
}
.sector-card-wide { grid-column: span 2; }
@media (max-width: 800px) { .sector-card-wide { grid-column: auto; } }

/* Pullquote block */
.pullquote-block {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-8) 0;
}

/* CTA panel */
.cta-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(184, 135, 70, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.cta-panel > div { position: relative; }
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (max-width: 800px) {
  .cta-panel { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Fine-print note */
.fine-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  max-width: 72ch;
  line-height: 1.65;
}

/* ================ CONTACT PAGE COMPONENTS ================ */

/* Grid layout */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Contact info dark panel */
.contact-info {
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--beige);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.contact-info::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(184, 135, 70, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.contact-info h2,
.contact-info h4 { color: var(--cream); }
.contact-info p { color: rgba(245, 240, 230, 0.78); }
.contact-info a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid rgba(184, 135, 70, 0.3); }
.contact-info a:hover { color: var(--cream); border-bottom-color: var(--cream); }

.contact-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: relative;
}
.contact-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.contact-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(184, 135, 70, 0.18);
  border: 1px solid rgba(184, 135, 70, 0.35);
  display: grid;
  place-items: center;
  color: var(--gold-soft);
  flex-shrink: 0;
}
.contact-icon svg { width: 20px; height: 20px; }
.contact-list h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.3rem;
  color: rgba(245, 240, 230, 0.6);
}
.contact-list p {
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}

/* Contact form */
.contact-form-wrap { padding-top: var(--sp-2); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.form-field label span[aria-hidden] { color: var(--gold-deep); }

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85rem 1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(184, 135, 70, 0.15);
}

.form-field-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--sp-2);
}
.form-field-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.form-field-check label {
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 400;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.form-status {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold-deep);
  margin: 0;
}
.form-status.success { color: #2e6b4a; }
.form-status.error { color: #a03838; }

/* Bank card */
.bank-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.bank-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold-deep) 0%, var(--gold-soft) 100%);
}
.bank-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
.bank-card-head h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0.3rem 0 0;
  color: var(--ink);
}
.bank-card-badge {
  width: 48px;
  height: 48px;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.bank-card-badge svg { width: 100%; height: 100%; }

.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-6);
}
.field-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-bottom: 0.3rem;
}
.field-value {
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.field-value.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-size: 1rem;
}

/* Map card */
.map-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  background: var(--cream);
}
@media (max-width: 800px) { .map-card { grid-template-columns: 1fr; } }

.map-visual {
  position: relative;
  min-height: 360px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.map-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245, 240, 230, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 240, 230, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.map-pin {
  position: relative;
  width: 64px;
  height: 64px;
  color: var(--gold-soft);
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
.map-pin svg { width: 100%; height: 100%; }
.map-pin-pulse {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 8px;
  background: rgba(184, 135, 70, 0.4);
  border-radius: 50%;
  animation: mapPulse 2.4s var(--ease) infinite;
}
@keyframes mapPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  50% { transform: translateX(-50%) scale(1.6); opacity: 0.1; }
}
.map-label {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-5);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(245, 240, 230, 0.2);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.map-body { padding: var(--sp-6) var(--sp-6); }
.address-block {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--sp-4) 0;
}

/* Pillars (used in publishing.html) — safeguarding add if missing */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.pillars .pillar {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

/* ==========================================================================
   25. AUDIT REMEDIATION — Comprehensive layout corrections
   Applied following systematic visual audit of the entire site corpus.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25.1  Section spacing calibration
   Resolves the vertical crowding observed between successive sections on
   the About page (page-hero → Who We Are) and the Home page (hero → stats).
   -------------------------------------------------------------------------- */
.section {
  padding: calc(var(--sp-10) + 2rem) 0;
}

.section-sm {
  padding: calc(var(--sp-8) + 1rem) 0;
}

.page-hero {
  padding: calc(var(--sp-9) + 5rem) 0 calc(var(--sp-8) + 2rem);
}

/* Add margin between hero and the section immediately following it */
.hero + .section,
.page-hero + .section,
.page-hero + .section-sm {
  padding-top: calc(var(--sp-10) + 2rem);
}

/* --------------------------------------------------------------------------
   25.2  Unit-card corrections — Home page
   The branded composition images are 1200×800 with text anchored at the
   left edge. A 4:5 aspect ratio crops this content. Altering to 5:4 permits
   the full composition to display, while object-position ensures the text
   region remains visible.
   -------------------------------------------------------------------------- */
.unit-card {
  aspect-ratio: 5 / 4;
  min-height: 360px;
}

.unit-card img {
  object-position: left center;
}

.unit-card::after {
  background: linear-gradient(
    180deg,
    rgba(15, 31, 26, 0.2) 0%,
    rgba(15, 31, 26, 0.45) 45%,
    rgba(15, 31, 26, 0.92) 100%
  );
}

.unit-card-content {
  padding: calc(var(--sp-6) + 0.5rem);
}

.unit-card-content h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   25.3  Feature-split proportion corrections — Manpower Services page
   The service-domain feature-splits displayed cramped text columns.
   Rebalance the grid to favour textual content and reduce aspect ratio.
   -------------------------------------------------------------------------- */
.feature-split {
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--sp-8) + 1rem);
}

.feature-split .media,
.feature-split-media {
  aspect-ratio: 5 / 4;
  min-height: 320px;
}

/* Service-specific feature-splits benefit from tighter image panels */
.section[id="talent"] .feature-split,
.section[id="deployment"] .feature-split,
.section[id="hr"] .feature-split,
.section[id="training"] .feature-split,
.section[id="advisory"] .feature-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Ensure card-lists within feature-split bodies have adequate breathing room */
.feature-split-body .card-list {
  margin-top: 1.8rem;
}

.feature-split-body .card-list li {
  padding: 0.85rem 0 0.85rem 1.5rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   25.4  Contact-page pathway grid — restore intended 4-column layout
   The "How to engage with the organisation" section should present as
   a grid, not a vertical list.
   -------------------------------------------------------------------------- */
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.pathway-card {
  padding: var(--sp-5);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pathway-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-soft);
}

.pathway-card .kicker {
  color: var(--gold-deep);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.pathway-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}

.pathway-card p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   25.5  Hero media corrections — prevent clipping
   -------------------------------------------------------------------------- */
.hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-media .badge {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  background: rgba(15, 31, 26, 0.85);
  color: var(--cream);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   25.6  Mobile responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .feature-split {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .section[id="talent"] .feature-split,
  .section[id="deployment"] .feature-split,
  .section[id="hr"] .feature-split,
  .section[id="training"] .feature-split,
  .section[id="advisory"] .feature-split {
    grid-template-columns: 1fr;
  }
  .unit-card {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }
}

/* --------------------------------------------------------------------------
   25.7  Profile section corrections — Leadership page
   Ensures the profile-image containers render their portrait assets
   at the correct aspect ratio with proper image-fitting behaviour.
   -------------------------------------------------------------------------- */
.profile-image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   26. ALIGNMENT REMEDIATION
   Systematic corrections to horizontal and vertical alignment anomalies
   identified in the dedicated alignment audit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   26.1  Container consistency — establish a single canonical content width
   All principal containers share identical max-width and horizontal padding
   so that left-edges align consistently across sections and the footer.
   -------------------------------------------------------------------------- */
.container {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  width: 100%;
  box-sizing: border-box;
}

.container-narrow {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   26.2  Card-list realignment — precise bullet-to-text alignment
   A single-column layout with consistent bullet positioning anchored to
   the first line of text regardless of whether items contain <strong>
   labels or plain text.
   -------------------------------------------------------------------------- */
.card-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  font-size: 0.95rem;
}

.card-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--charcoal);
  line-height: 1.6;
  display: block;
}

.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-deep);
  transform: translateY(-50%);
}

.card-list li strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline;
}

/* When card-list appears inside forest-green section, adjust colours */
.section-forest .card-list li,
.card-dark .card-list li {
  color: rgba(245, 240, 230, 0.82);
  border-top-color: rgba(245, 240, 230, 0.12);
}
.section-forest .card-list li strong,
.card-dark .card-list li strong {
  color: var(--cream);
}
.section-forest .card-list li::before,
.card-dark .card-list li::before {
  background: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   26.3  Pillar enumeration alignment — Publishing page
   Six pillars with Roman numerals must align consistently — numeral position
   fixed, pillar title left-aligned to the same x-coordinate as its body text.
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5) var(--sp-5);
  margin-top: var(--sp-6);
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .pillars { grid-template-columns: 1fr; }
}

.pillars .pillar {
  padding: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--gold-soft);
  padding-top: var(--sp-4);
  position: relative;
}

.pillars .pillar .num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-3);
  font-style: normal;
}

.pillars .pillar h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: var(--sp-3);
  color: var(--ink);
  font-weight: 400;
}

.pillars .pillar p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   26.4  Card-grid row alignment — enforce consistent card heights
   Within any grid of cards, cards in the same row share a uniform height,
   with their top and bottom edges aligning precisely. Achieved through
   grid stretch alignment plus explicit height inheritance on child cards.
   -------------------------------------------------------------------------- */
.grid,
.grid-2,
.grid-3,
.grid-4 {
  align-items: stretch;
}

.grid > .card,
.grid-2 > .card,
.grid-3 > .card,
.grid-4 > .card,
.grid > .card-dark,
.grid-3 > .card-dark,
.grid-4 > .card-dark,
.grid-3 > .credential-card,
.grid-4 > .credential-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Spacing normalization inside cards */
.card,
.card-dark,
.credential-card {
  padding: var(--sp-5);
}

.card h3,
.card-dark h3,
.credential-card h3 {
  margin-top: 0;
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.card p,
.card-dark p,
.credential-card p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.6;
}

/* Push last child (ofte a link or CTA) to the bottom of the card */
.card > *:last-child,
.card-dark > *:last-child {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   26.5  Section-head baseline alignment
   Section headings share a consistent left-edge, eyebrow-to-heading
   spacing, and heading-to-paragraph spacing throughout the site.
   -------------------------------------------------------------------------- */
.section-head,
.section-header {
  max-width: 780px;
  margin-bottom: var(--sp-7);
}

.section-head .eyebrow,
.section-header .eyebrow,
.section-head.center .eyebrow,
.section-header.center .eyebrow {
  margin-bottom: var(--sp-3);
}

.section-head h2,
.section-header h2,
.section-head .display-sm,
.section-header .display-sm {
  margin-bottom: var(--sp-4);
  line-height: 1.15;
}

.section-head .lead,
.section-header .lead {
  margin: 0;
  max-width: 58ch;
}

.section-head.center,
.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .lead,
.section-header.center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   26.6  Feature-split vertical centring
   The textual and media columns within a feature-split should share a
   common vertical midline, resolving the audit finding of irregular
   vertical offsets between successive sections.
   -------------------------------------------------------------------------- */
.feature-split {
  align-items: center;
}

.feature-split-body,
.feature-split > div:not(.media):not(.feature-split-media) {
  padding: var(--sp-4) 0;
}

.feature-split-body h2,
.feature-split > div h2 {
  margin-top: 0;
  margin-bottom: var(--sp-4);
}

.feature-split-body .eyebrow,
.feature-split > div .eyebrow {
  margin-bottom: var(--sp-3);
}

/* --------------------------------------------------------------------------
   26.7  Stats band — uniform distribution and centred numerals
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
  text-align: left;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.stats .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--forest);
  letter-spacing: -0.02em;
}

.stats .num em {
  color: var(--gold-deep);
  font-style: italic;
}

.stats .lbl {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   26.8  Footer alignment with main content
   Footer columns must align with the main content grid established
   by the .container rule.
   -------------------------------------------------------------------------- */
.site-footer .container {
  max-width: 1240px;
}

.footer-top {
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

.footer-col h5 {
  margin-bottom: var(--sp-4);
  padding-bottom: 0;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* --------------------------------------------------------------------------
   26.9  Button alignment — uniform baseline across hero-cta clusters
   -------------------------------------------------------------------------- */
.hero-cta,
.cta-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   26.10  Breadcrumb alignment
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  letter-spacing: 0.04em;
}

.breadcrumb a,
.breadcrumb span { line-height: 1; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-deep); }
.breadcrumb .sep,
.breadcrumb [aria-hidden="true"] { color: var(--line); }

/* ==========================================================================
   27. ENRICHED PALETTE INTEGRATION
   Amplifies the tricolour chromatic synthesis across surface treatments,
   ensuring balanced visibility of cream, green, and gold throughout.
   ========================================================================== */

/* Refined base body background with subtle warm undertone */
body {
  background: var(--cream);
  color: var(--ink);
}

/* Parchment sections receive enriched tonal depth */
.bg-parchment,
.section-parchment {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream-warm, #F7EFD9) 100%);
  position: relative;
}

.bg-parchment::before,
.section-parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(201, 162, 76, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(201, 162, 76, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.bg-parchment > *,
.section-parchment > * {
  position: relative;
}

/* Section-forest now incorporates subtle golden radial warmth */
.section-forest,
.bg-forest {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 162, 76, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(201, 162, 76, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  position: relative;
}

/* Enhanced section-forest headings with gold accent shadows */
.section-forest h2,
.section-forest .display-sm {
  color: var(--cream);
}

.section-forest h2 em,
.section-forest .display-sm em {
  color: var(--gold-soft);
}

/* Eyebrow treatments consistently use gold for prominence */
.eyebrow {
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
}

.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}

/* Display heading em elements use rich gold throughout */
h1 em, h2 em, h3 em, .display em, .display-sm em {
  color: var(--gold-deep);
  font-style: italic;
  font-weight: inherit;
}

/* Button refinements — gold primary variant */
.btn-primary {
  background: var(--forest);
  color: var(--cream);
  border: 1px solid var(--forest);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background: var(--forest-deep);
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(35, 72, 56, 0.22), 0 0 0 1px rgba(201, 162, 76, 0.25);
}

.btn-gold {
  background: var(--gold);
  color: var(--forest-deep);
  border: 1px solid var(--gold);
  font-weight: 600;
}

.btn-gold:hover {
  background: var(--gold-deep);
  color: var(--cream);
  border-color: var(--gold-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
  background: var(--cream-warm, #F7EFD9);
  border-color: var(--gold);
  color: var(--forest-deep);
}

/* Card surfaces with subtle gold border accents on hover */
.card {
  background: var(--cream-light, var(--cream));
  border: 1px solid var(--line);
  transition: all 0.3s var(--ease);
}

.card:hover {
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card-dark treatment with gold accents */
.card-dark {
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  border: 1px solid rgba(201, 162, 76, 0.18);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.card-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
}

.card-dark h3,
.card-dark h4 { color: var(--cream); }
.card-dark p { color: rgba(251, 246, 234, 0.82); }

/* Credential cards with warm tones and gold-bordered icons */
.credential-card {
  background: var(--cream-light, var(--cream));
  border: 1px solid var(--line);
}

.credential-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(35, 72, 56, 0.08);
}

.credential-icon {
  color: var(--gold-deep);
  background: linear-gradient(135deg, var(--cream) 0%, var(--beige-light) 100%);
  border: 1px solid var(--line-gold, var(--line));
  padding: 0.8rem;
  border-radius: 12px;
}

/* Section dividers gain gold detailing */
.divider span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  max-width: 200px;
  margin: 0 auto;
}

/* Footer colour enrichment */
.site-footer {
  background: linear-gradient(180deg, var(--forest-deep) 0%, var(--ink) 100%);
  color: rgba(251, 246, 234, 0.82);
  border-top: 3px solid var(--gold);
}

.site-footer .brand-mark {
  background: var(--gold);
  color: var(--forest-deep);
}

.site-footer a {
  color: rgba(251, 246, 234, 0.78);
  transition: color 0.25s var(--ease);
}

.site-footer a:hover {
  color: var(--gold-soft);
}

.site-footer .footer-col h5 {
  color: var(--gold-soft);
  letter-spacing: 0.12em;
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(201, 162, 76, 0.15);
  color: rgba(251, 246, 234, 0.55);
}

/* Hero section tonal enrichment */
.hero {
  background: linear-gradient(180deg, var(--cream-warm, #F7EFD9) 0%, var(--parchment) 100%);
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 162, 76, 0.14) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(35, 72, 56, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.hero > * { position: relative; }

/* Page hero tonal enrichment */
.page-hero {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
}

/* Navigation bar refinements */
.site-header {
  background: rgba(251, 246, 234, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header.scrolled {
  background: rgba(251, 246, 234, 0.98);
  box-shadow: 0 2px 20px rgba(35, 72, 56, 0.06);
  border-bottom-color: var(--line-strong);
}

.nav-menu a {
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--gold-deep);
}

.nav-menu a.active {
  position: relative;
}

.nav-menu a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

.nav-cta {
  background: var(--forest);
  color: var(--cream);
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  transition: all 0.25s var(--ease);
}

.nav-cta:hover {
  background: var(--forest-deep);
  color: var(--gold-soft);
  box-shadow: 0 4px 14px rgba(35, 72, 56, 0.2);
}

/* Brand treatment enhancement */
.brand-mark {
  background: var(--forest);
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.brand-text {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.brand-text small {
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Stats band refinement */
.stats .num {
  background: linear-gradient(135deg, var(--forest) 0%, var(--gold-deep) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pullquote with enhanced gold accent */
.pullquote-block {
  background: linear-gradient(160deg, var(--cream) 0%, var(--parchment) 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--sp-7);
  position: relative;
}

.pullquote .quote-mark {
  color: var(--gold);
  opacity: 0.6;
  font-size: 4rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
}

/* Media-tag refinement */
.media-tag,
.feature-split-media .media-tag {
  background: var(--cream);
  color: var(--forest-deep);
  border: 1px solid var(--gold-soft);
  padding: 0.4rem 0.9rem;
  font-weight: 500;
}

/* Form-field focus rings with gold accent */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.18);
  outline: none;
}

/* ==========================================================================
   27. CHROMATIC HARMONY ENHANCEMENTS
   Systematic deployment of the refined cream-green-gold palette across
   all principal surface treatments and interactive elements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1  Body and principal surface treatment
   -------------------------------------------------------------------------- */
body {
  background: var(--cream);
  color: var(--ink);
}

/* Subtle cream-to-parchment gradient on hero regions */
.hero,
.page-hero {
  background: linear-gradient(180deg, var(--cream-light) 0%, var(--parchment) 100%);
}

.hero::before,
.page-hero::before {
  background: radial-gradient(circle, var(--gold-pale) 0%, transparent 70%);
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   27.2  Header refinement with gold bottom accent
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(253, 248, 233, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-cream);
}

.site-header.scrolled {
  background: rgba(253, 248, 233, 0.95);
  box-shadow: 0 1px 0 var(--line-gold), 0 8px 24px rgba(42, 82, 64, 0.06);
}

.nav a {
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.nav a:hover,
.nav a.active {
  color: var(--forest);
}

.nav a.active::after {
  background: var(--gold);
}

.brand-mark {
  background: var(--forest);
  color: var(--cream);
  box-shadow: 0 0 0 2px var(--gold-soft), 0 2px 8px rgba(42, 82, 64, 0.15);
}

/* --------------------------------------------------------------------------
   27.3  Button refinements — warmer golds and verdant greens
   -------------------------------------------------------------------------- */
.btn-primary {
  background: var(--forest);
  color: var(--cream);
  box-shadow: 0 2px 10px rgba(42, 82, 64, 0.20);
  transition: all 0.3s var(--ease);
}

.btn-primary:hover {
  background: var(--forest-deep);
  box-shadow: 0 4px 18px rgba(42, 82, 64, 0.30);
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--forest-deep);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(166, 127, 51, 0.25);
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--cream);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--forest);
}

.btn-ghost:hover {
  background: var(--forest);
  color: var(--cream);
}

.nav-cta {
  background: var(--forest);
  color: var(--cream) !important;
  border: 1px solid var(--gold-soft);
  padding: 0.7rem 1.4rem;
  border-radius: 100px;
}

.nav-cta:hover {
  background: var(--gold);
  color: var(--forest-deep) !important;
  border-color: var(--gold);
}

/* --------------------------------------------------------------------------
   27.4  Card refinements — cream grounds with gold accents
   -------------------------------------------------------------------------- */
.card {
  background: var(--cream-light);
  border: 1px solid var(--line-cream);
  border-top: 3px solid var(--gold-soft);
  border-radius: 4px;
  transition: all 0.4s var(--ease);
}

.card:hover {
  background: var(--cream);
  border-top-color: var(--gold);
  box-shadow: 0 8px 28px rgba(166, 127, 51, 0.10);
  transform: translateY(-3px);
}

.card-dark {
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream);
  border: 1px solid var(--line-gold);
  border-top: 3px solid var(--gold);
}

.card-dark h3,
.card-dark h4 {
  color: var(--cream);
}

.card-dark p {
  color: rgba(253, 248, 233, 0.85);
}

.credential-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}

.credential-card:hover {
  background: var(--cream);
  border-left-color: var(--forest);
}

.credential-icon {
  color: var(--forest);
  background: var(--gold-pale);
  padding: 10px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   27.5  Section backgrounds — alternating parchment warmth
   -------------------------------------------------------------------------- */
.section-parchment,
.bg-parchment {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--beige-light) 100%);
  position: relative;
}

.section-forest,
.bg-forest {
  background:
    radial-gradient(ellipse at top right, rgba(212, 171, 90, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream);
}

.section-forest .eyebrow,
.bg-forest .eyebrow {
  color: var(--gold-soft);
}

.section-forest .eyebrow::before,
.bg-forest .eyebrow::before {
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   27.6  Eyebrow & display accents — gold-forward treatment
   -------------------------------------------------------------------------- */
.eyebrow {
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.eyebrow::before {
  background: var(--gold);
}

h1 em,
h2 em,
h3 em,
.display em,
.display-sm em {
  color: var(--gold-deep);
  font-style: italic;
}

.section-forest h1 em,
.section-forest h2 em,
.bg-forest h1 em,
.bg-forest h2 em,
.card-dark h2 em,
.card-dark h3 em {
  color: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   27.7  Card-list bullet refinement
   -------------------------------------------------------------------------- */
.card-list li::before {
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
}

.section-forest .card-list li::before,
.card-dark .card-list li::before,
.bg-forest .card-list li::before {
  background: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(212, 171, 90, 0.18);
}

/* --------------------------------------------------------------------------
   27.8  Footer refinement — deep forest with gold accents
   -------------------------------------------------------------------------- */
.site-footer {
  background:
    linear-gradient(180deg, var(--forest-deep) 0%, #0F2419 100%);
  color: var(--cream);
  position: relative;
  border-top: 3px solid var(--gold);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.site-footer a {
  color: var(--cream);
  transition: color 0.25s var(--ease);
}

.site-footer a:hover {
  color: var(--gold-soft);
}

.footer-col h5 {
  color: var(--gold-soft);
  letter-spacing: 0.15em;
}

.footer-bottom {
  border-top-color: rgba(212, 171, 90, 0.15);
  color: rgba(253, 248, 233, 0.55);
}

/* --------------------------------------------------------------------------
   27.9  Form refinement — warmer inputs
   -------------------------------------------------------------------------- */
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--cream-light);
  border: 1px solid var(--line);
  color: var(--ink);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
  background: var(--cream);
}

/* --------------------------------------------------------------------------
   27.10  Divider refinement
   -------------------------------------------------------------------------- */
.divider span,
hr {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  height: 1px;
  border: none;
}

/* --------------------------------------------------------------------------
   27.11  Unit-card overlay treatment
   -------------------------------------------------------------------------- */
.unit-card::after {
  background: linear-gradient(
    180deg,
    rgba(24, 56, 38, 0.15) 0%,
    rgba(24, 56, 38, 0.55) 50%,
    rgba(15, 36, 25, 0.95) 100%
  );
}

.unit-card-content .kicker {
  color: var(--gold-bright);
}

.unit-card-content h3 {
  color: var(--cream);
}

.unit-card-content .link-arrow {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}

.unit-card-content .link-arrow:hover {
  color: var(--cream);
  gap: 0.8rem;
}

/* --------------------------------------------------------------------------
   27.12  Stats band chromatic treatment
   -------------------------------------------------------------------------- */
.stats {
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}

.stats .num {
  color: var(--forest);
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stats .num em {
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
}

.stats .lbl {
  color: var(--muted);
}

/* ==========================================================================
   28. MANPOWER PROCESS PAGE — Dedicated sophistication layer
   Architectural styling for the reconstructed process page, employing the
   enriched cream-green-gold chromatic vocabulary throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   28.1  Process hero — dual column with institutional registry panel
   -------------------------------------------------------------------------- */
.process-hero {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(201, 162, 76, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(35, 72, 56, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--parchment) 0%, var(--cream-warm, var(--cream)) 100%);
}

.process-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .process-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.process-hero-grid .hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.8rem 0 0;
  border-top: 1px solid var(--line);
}

.process-hero-grid .hero-meta .num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--forest);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.process-hero-grid .hero-meta .num em {
  color: var(--gold-deep);
  font-style: italic;
}

.process-hero-grid .hero-meta .lbl {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Registry panel in hero */
.process-hero-panel {
  background: linear-gradient(165deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: 14px;
  padding: 2.2rem;
  color: var(--cream);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(22, 48, 31, 0.22), 0 0 0 1px rgba(201, 162, 76, 0.22);
}

.process-hero-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-soft) 100%);
}

.process-hero-panel .panel-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(201, 162, 76, 0.28);
  margin-bottom: 1.4rem;
  width: 100%;
}

.process-hero-panel .panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.process-hero-panel .panel-list li {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.process-hero-panel .panel-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-soft);
  background: rgba(201, 162, 76, 0.1);
  border: 1px solid rgba(201, 162, 76, 0.32);
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
  font-weight: 500;
  flex-shrink: 0;
}

.process-hero-panel .panel-footer {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201, 162, 76, 0.18);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(251, 246, 234, 0.72);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   28.2  Intro band — philosophy introduction
   -------------------------------------------------------------------------- */
.intro-band {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 800px) {
  .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.intro-meta .display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--forest);
  line-height: 1.2;
  font-weight: 400;
  margin: 0.6rem 0 0;
}

.intro-meta .display-sm em {
  color: var(--gold-deep);
  font-style: italic;
}

.intro-body p {
  color: var(--charcoal);
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.intro-body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   28.3  Process stages — two-column with marker sidebar
   -------------------------------------------------------------------------- */
.process-stage {
  padding: 5rem 0;
  position: relative;
}

.process-stage.section-alt {
  background: linear-gradient(180deg, var(--cream-warm, var(--parchment)) 0%, var(--parchment) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stage-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .stage-layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* Stage marker sidebar */
.stage-marker {
  position: sticky;
  top: 120px;
  padding: 2rem;
  background: linear-gradient(165deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: 14px;
  color: var(--cream);
  box-shadow: 0 12px 36px rgba(22, 48, 31, 0.2), 0 0 0 1px rgba(201, 162, 76, 0.2);
  overflow: hidden;
}

.stage-marker::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-deep) 100%);
}

.stage-marker .stage-chip {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(201, 162, 76, 0.18);
  border: 1px solid rgba(201, 162, 76, 0.38);
  color: var(--gold-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.stage-marker .stage-num-lg {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.04em;
  margin-bottom: 1.2rem;
  font-style: italic;
}

.stage-marker .stage-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 1.8rem;
}

.stage-marker .stage-duration {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201, 162, 76, 0.22);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(251, 246, 234, 0.72);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.stage-marker .duration-dot {
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.22);
}

/* Stage content area */
.stage-content {
  padding-top: 0.4rem;
}

.stage-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  color: var(--forest-deep);
  font-weight: 400;
  margin: 0.8rem 0 1.2rem;
}

.stage-content h2 em {
  color: var(--gold-deep);
  font-style: italic;
}

.stage-content .lead {
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 58ch;
}

/* Stage modules grid */
.stage-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 700px) {
  .stage-modules { grid-template-columns: 1fr; }
}

.stage-module {
  padding: 1.6rem 1.8rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all 0.3s var(--ease);
  position: relative;
}

.stage-module:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 8px 24px rgba(35, 72, 56, 0.06);
  transform: translateY(-2px);
}

.stage-module::before {
  content: "";
  position: absolute;
  top: 0; left: 1.8rem;
  width: 32px;
  height: 2px;
  background: var(--gold);
  transform: translateY(-1px);
}

.stage-module .module-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
}

.stage-module .module-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold-deep);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.stage-module h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--forest-deep);
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.stage-module p {
  color: var(--charcoal);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* Stage deliverable callout */
.stage-deliverable {
  padding: 1.5rem 1.8rem;
  background: linear-gradient(135deg, rgba(201, 162, 76, 0.1) 0%, rgba(201, 162, 76, 0.04) 100%);
  border: 1px solid var(--line-gold, rgba(201, 162, 76, 0.32));
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .stage-deliverable { flex-direction: column; gap: 0.6rem; }
}

.stage-deliverable .deliv-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 0.25rem;
  font-weight: 500;
  min-width: 130px;
}

.stage-deliverable p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--forest-deep);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   28.4  Support pillars — Stage 05
   -------------------------------------------------------------------------- */
.support-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 2rem 0 2.5rem;
}

@media (max-width: 800px) {
  .support-pillars { grid-template-columns: 1fr; }
}

.pillar-card {
  padding: 1.8rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all 0.3s var(--ease);
  position: relative;
}

.pillar-card:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 8px 24px rgba(35, 72, 56, 0.06);
  transform: translateY(-3px);
}

.pillar-icon {
  width: 44px;
  height: 44px;
  color: var(--gold-deep);
  background: var(--beige-light);
  border: 1px solid var(--line-gold, var(--line));
  border-radius: 10px;
  padding: 0.5rem;
  margin-bottom: 1.1rem;
  display: grid;
  place-items: center;
}

.pillar-icon svg { width: 100%; height: 100%; }

.pillar-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--forest-deep);
  font-weight: 500;
  margin: 0 0 0.9rem;
  line-height: 1.3;
}

.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
  color: var(--charcoal);
}

.pillar-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.2rem;
  line-height: 1.55;
  border-top: 1px solid var(--line-subtle, rgba(138, 96, 48, 0.08));
}

.pillar-list li:first-child {
  border-top: none;
  padding-top: 0.25rem;
}

.pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateY(-50%);
}

.pillar-list li:first-child::before {
  top: 0.75rem;
}

/* --------------------------------------------------------------------------
   28.5  Principles section — forest green with refined typography
   -------------------------------------------------------------------------- */
.principles-section {
  padding: 6rem 0;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .principle-grid { grid-template-columns: 1fr; }
}

.principle-card {
  padding: 2rem 1.8rem;
  background: rgba(251, 246, 234, 0.04);
  border: 1px solid rgba(201, 162, 76, 0.18);
  border-radius: 10px;
  position: relative;
  transition: all 0.3s var(--ease);
}

.principle-card:hover {
  background: rgba(251, 246, 234, 0.07);
  border-color: var(--gold);
  transform: translateY(-3px);
}

.principle-card .principle-index {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.principle-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cream);
  font-weight: 400;
  margin: 0 0 0.8rem;
  line-height: 1.3;
}

.principle-card p {
  color: rgba(251, 246, 234, 0.72);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* --------------------------------------------------------------------------
   28.6  Commitments section
   -------------------------------------------------------------------------- */
.commitments-section {
  background: var(--cream);
}

.commitment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.5rem;
  margin-top: 3rem;
}

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

.commitment-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.commitment-item .commit-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  padding-top: 0.2rem;
}

.commitment-item h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--forest-deep);
  font-weight: 500;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.commitment-item p {
  color: var(--charcoal);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   28.7  Consultation prompt — closing CTA
   -------------------------------------------------------------------------- */
.consultation-prompt {
  padding-bottom: 6rem;
}

.consultation-card {
  background: linear-gradient(165deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: 18px;
  padding: 3.5rem;
  color: var(--cream);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(22, 48, 31, 0.2), 0 0 0 1px rgba(201, 162, 76, 0.2);
}

.consultation-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
}

.consultation-card::after {
  content: "eo";
  position: absolute;
  right: -20px;
  bottom: -80px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 20rem;
  color: rgba(201, 162, 76, 0.06);
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 900px) {
  .consultation-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem;
  }
}

.consultation-content {
  position: relative;
  z-index: 1;
}

.consultation-content .eyebrow {
  color: var(--gold-soft);
}

.consultation-content .eyebrow::before {
  background: var(--gold-soft);
}

.consultation-content .display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.2;
  margin: 0.6rem 0 0;
}

.consultation-content .display-sm em {
  color: var(--gold-soft);
  font-style: italic;
}

.consultation-content .lead {
  color: rgba(251, 246, 234, 0.82);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 52ch;
}

.consultation-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 162, 76, 0.22);
}

@media (max-width: 600px) {
  .consultation-meta { grid-template-columns: 1fr; gap: 0.8rem; }
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.meta-item .meta-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 162, 76, 0.72);
}

.meta-item .meta-value {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--cream);
  font-weight: 400;
}

.consultation-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  z-index: 1;
}

.consultation-card .btn-ghost {
  color: var(--cream);
  border-color: rgba(251, 246, 234, 0.3);
  background: transparent;
}

.consultation-card .btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(201, 162, 76, 0.06);
}

/* ==========================================================================
   27. CONSOLIDATING REFINEMENTS
   Remaining polish applied following a comprehensive anticipatory audit
   of all pages in the corpus.
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1  Statistical band — enhanced visual hierarchy
   -------------------------------------------------------------------------- */
.stats {
  padding: calc(var(--sp-6) + 0.5rem) 0;
  gap: var(--sp-7);
}

.stats .stat {
  padding-right: var(--sp-5);
  position: relative;
}

.stats .stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--line);
}

@media (max-width: 640px) {
  .stats .stat::after { display: none !important; }
}

/* --------------------------------------------------------------------------
   27.2  Contact page — banking card & form refinement
   -------------------------------------------------------------------------- */
.bank-card {
  padding: calc(var(--sp-6) + 0.5rem);
}

.bank-card-head {
  padding-bottom: calc(var(--sp-5) + 0.5rem);
  margin-bottom: calc(var(--sp-5) + 0.5rem);
  align-items: center;
}

.bank-card-head h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  letter-spacing: 0.02em;
}

.bank-card .kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 0.4rem;
}

.bank-grid {
  gap: calc(var(--sp-4) + 0.2rem) var(--sp-7);
}

.field-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}

.field-value {
  font-size: 1.05rem;
  line-height: 1.4;
}

.field-value.mono {
  font-size: 1.02rem;
  letter-spacing: 0.08em;
}

/* Form field improvements */
.contact-form {
  gap: var(--sp-5);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.95rem 1.1rem;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

.form-field label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.form-field-check {
  padding: var(--sp-3) 0;
}

.form-field-check label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   27.3  Hero media badge positioning refinement
   -------------------------------------------------------------------------- */
.hero-media .badge {
  background: rgba(15, 31, 26, 0.9);
  padding: var(--sp-4) calc(var(--sp-4) + 0.2rem);
  font-size: 0.92rem;
  line-height: 1.55;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   27.4  Page hero — top breathing room
   Ensures breadcrumbs and hero titles do not press against the site header.
   -------------------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--sp-9) + 6rem);
  padding-bottom: calc(var(--sp-8) + 2.5rem);
}

/* --------------------------------------------------------------------------
   27.5  Feature-split internal padding on container
   -------------------------------------------------------------------------- */
.feature-split {
  padding: 0;
}

.feature-split > div:not(.media):not(.feature-split-media) {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

/* --------------------------------------------------------------------------
   27.6  Card-list with strong labels — improve visual structure
   When a list item carries a <strong> label, present it inline with the
   description using improved typographic rhythm.
   -------------------------------------------------------------------------- */
.card-list li strong {
  display: inline;
  margin-right: 0.35rem;
}

/* --------------------------------------------------------------------------
   27.7  Section heading rhythm — consistent spacing across all pages
   -------------------------------------------------------------------------- */
.section-head,
.section-header {
  margin-bottom: calc(var(--sp-6) + 0.8rem);
}

.section-head .eyebrow,
.section-header .eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
}

.section-head h2,
.section-header h2,
.section-head .display-sm,
.section-header .display-sm {
  margin-top: 0;
  margin-bottom: var(--sp-4);
}

.section-head .lead,
.section-header .lead {
  max-width: 62ch;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   27.8  Button touch targets — ensure 44px minimum height (accessibility)
   -------------------------------------------------------------------------- */
.btn {
  min-height: 44px;
  padding: 0.85rem 1.5rem;
}

.btn-primary {
  padding: 0.9rem 1.6rem;
}

/* --------------------------------------------------------------------------
   27.9  Pillar gold rule above numerals — enhanced visibility
   -------------------------------------------------------------------------- */
.pillars .pillar {
  padding-top: calc(var(--sp-4) + 0.2rem);
}

.pillars .pillar::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-deep);
  margin-bottom: var(--sp-3);
  position: absolute;
  top: 0;
  left: 0;
}

.pillars .pillar {
  border-top: none;
}

/* --------------------------------------------------------------------------
   27.10  Divider element — subtle rule between sections
   -------------------------------------------------------------------------- */
.divider {
  padding: 0;
}

.divider .container {
  padding-top: 0;
  padding-bottom: 0;
}

.divider span {
  display: block;
  height: 1px;
  background: var(--line);
  margin: 0 auto;
  max-width: 140px;
}

/* --------------------------------------------------------------------------
   27.11  Card grid — consistent card styling across the corpus
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-soft);
}

.card .card-num,
.card .card-num-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  margin-bottom: var(--sp-3);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: var(--sp-3);
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   27.12  Forest card — consistent styling for dark-background cards
   -------------------------------------------------------------------------- */
.card-dark {
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--beige);
  border: 1px solid rgba(184, 135, 70, 0.25);
  border-radius: var(--radius-md);
}

.card-dark h3 {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--sp-3);
}

.card-dark p {
  color: rgba(245, 240, 230, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.card-dark .card-num,
.card-dark .card-num-tag {
  color: var(--gold-soft);
}