/* ============================================================
   GRAND OAK ADVISORY — Global Stylesheet
   ============================================================ */

/* === DESIGN TOKENS ===
   Grand Oak Advisory Brand Guidelines (2026)
   §03 Colors · §04 Typography
   ------------------------------------------------------------ */
:root {
  /* --- Primary colors (§03) --- */
  --green:       #122D1E;   /* brand primary — deep forest */
  --gold:        #A38641;   /* brand primary — heraldic gold */
  --white:       #FFFFFF;   /* brand primary */

  /* Gold, relit for text contrast. Same hue and saturation as --gold;
     only lightness moves, so the family stays on-brand.
     --gold-deep  5.0:1 on cream · --gold-light  6.9:1 on green */
  --gold-deep:   #7C6631;
  --gold-light:  #C8AF74;
  --gold-rule:   rgba(163, 134, 65, 0.34);
  --gold-rule-2: rgba(163, 134, 65, 0.58);
  --gold-wash:   rgba(163, 134, 65, 0.08);

  /* --- Warm ground (the cream the guideline names as the brand's
         companion to forest green, §01 competitive analysis) --- */
  --cream:       #F6F4EE;
  --cream-2:     #EFEAE0;
  --green-2:     #1E4230;
  --green-3:     #080D0A;
  --ink:         #1F2B25;
  --body:        #2F3B36;
  --muted:       #6B7875;
  --muted-2:     #9CA8A4;
  --on-green:    #F0EDE6;
  --on-green-mu: rgba(240, 237, 230, 0.62);
  --rule:        rgba(18, 45, 30, 0.10);
  --rule-2:      rgba(18, 45, 30, 0.20);
  --rule-green:  rgba(240, 237, 230, 0.14);

  /* --- Grayscale (§03) --- */
  --cloud:       #EDEFF7;
  --smoke:       #D3D6E0;
  --steel:       #BCBFCC;
  --space:       #9DA2B3;
  --graphite:    #6E7180;
  --arsenic:     #40424D;
  --phantom:     #1E1E24;
  --black:       #000000;

  /* --- Typography (§04) --- */
  --sans:        'Manrope', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --display:     var(--sans);
  --serif:       var(--sans);   /* legacy alias — EB Garamond retired */

  /* Type scale (§04): 64 / 48 / 32 / 24 / 18 / 16 */
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(32px, 4vw, 48px);
  --fs-sub-1:    clamp(26px, 2.6vw, 32px);
  --fs-sub-2:    clamp(20px, 1.8vw, 24px);
  --fs-p1:       18px;
  --fs-p2:       16px;

  --container:   1280px;
  --pad-x:       clamp(24px, 5vw, 64px);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--green); color: var(--cream); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* === CONTAINER === */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ============================================================
   NAVIGATION — Desktop
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-wordmark:hover { opacity: 0.75; }
.nav-logo-mark {
  height: 30px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  /* 24, not 32: eight top-level items need the room. At a 32px gap the bar wants
     1182px and everything below that falls to the overlay. */
  gap: 24px;
  list-style: none;
  margin-left: auto;
}

.nav-item { position: relative; }

.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  padding: 4px 0;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-item > a:hover { color: var(--muted); }

.nav-item.nav-cta-item > a { font-weight: 500; color: var(--green); }
.nav-item.nav-cta-item > a:hover { color: var(--muted); }

/* Chevron */
.nav-chevron {
  width: 9px; height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform .2s ease;
}
.nav-item:hover > a .nav-chevron,
.nav-item:focus-within > a .nav-chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: var(--cream);
  border: 1px solid var(--rule-2);
  min-width: 200px;
  padding: 6px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 300;
}
.dropdown.dropdown-right { left: auto; right: 0; }

/* Bridge — keeps dropdown open as cursor travels down */
.dropdown::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.dropdown li a {
  display: block;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.dropdown li a:hover { background: var(--cream-2); color: var(--green); }

/* ============================================================
   NAVIGATION — Mobile Toggle
   ============================================================ */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 36px; height: 36px;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 210;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--green);
  position: absolute;
  left: 7px;
  transition: transform .25s cubic-bezier(.44,0,.56,1),
              opacity .2s,
              top .25s cubic-bezier(.44,0,.56,1);
}
.nav-toggle span:nth-child(1) { top: 11px; }
.nav-toggle span:nth-child(2) { top: 17px; }
.nav-toggle span:nth-child(3) { top: 23px; }
.nav-toggle.open span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

/* ============================================================
   NAVIGATION — Mobile Overlay
   ============================================================ */

/* 1159, not 880: the eight-item bar needs 1126px of room even at the tighter
   24px gap, so the overlay has to take over before the links run into the
   wordmark. Keep the JS in every page header on the same number. */
@media (max-width: 1159px) {
  .nav-toggle { display: block; }

  .nav-menu {
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 80px var(--pad-x) 48px;
    margin-left: 0;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.44,0,.56,1);
    z-index: 205;
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateX(0); }

  .nav-item { border-bottom: 1px solid var(--rule); }

  .nav-item > a {
    font-size: 20px;
    font-weight: 300;
    color: var(--green);
    padding: 18px 0;
    width: 100%;
    justify-content: space-between;
    letter-spacing: -0.01em;
  }
  .nav-item > a:hover { color: var(--green); }
  .nav-item.nav-cta-item > a { font-size: 20px; font-weight: 400; }

  /* Mobile accordion */
  .dropdown {
    position: static;
    transform: none !important;
    border: none;
    border-top: 1px solid var(--rule);
    background: transparent;
    padding: 4px 0 16px 16px;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
    transition: none;
    min-width: 0;
  }
  .dropdown::before { display: none; }
  .nav-item.expanded .dropdown { display: block; }
  .nav-item.expanded > a .nav-chevron { transform: rotate(180deg); }

  .dropdown li a {
    font-size: 15px;
    font-weight: 300;
    padding: 10px 0;
    color: var(--muted);
  }
  .dropdown li a:hover { background: transparent; color: var(--green); }

}

@media (max-width: 480px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  background: var(--green) url('../assets/hero.jpg') center / cover no-repeat;
  color: var(--on-green);
  overflow: hidden;
  isolation: isolate;
  height: clamp(500px, 48vw, 720px);
  display: flex;
  align-items: center;
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18,45,32,0.92) 0%, rgba(18,45,32,0.55) 55%, rgba(18,45,32,0.25) 100%),
    linear-gradient(180deg, rgba(18,45,32,0.10) 0%, rgba(8,14,11,0.50) 100%);
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.022) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 65% 50%, rgba(0,0,0,0.45) 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 65% 50%, rgba(0,0,0,0.45) 0%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px var(--pad-x);
  position: relative;
  width: 100%;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 24px;
}

.hero h1 {
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--on-green);
  max-width: 25ch;   /* holds the headline on one line at desktop; wraps below ~900px */
  text-wrap: balance;  /* breaks as "Growth Rooted / in Results", not on the preposition */
  margin-bottom: 44px;
}

.hero-sub {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(240,237,230,0.75);
  max-width: 48ch;
  font-weight: 300;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .hero-inner { padding: 56px var(--pad-x); }
}

/* ============================================================
   SECTOR STRIP
   ============================================================ */

.sector-strip {
  background: var(--green-2);
  border-bottom: 1px solid var(--rule-green);
}

.sector-strip-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.sector-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  flex-shrink: 0;
}

.sector-items {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.sector-items span {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--on-green);
}

.sector-dot {
  width: 3px; height: 3px;
  background: rgba(240,237,230,0.30);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   SPLIT SECTION
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

.split-left {
  padding-top: 96px;
  padding-bottom: 96px;
  padding-right: clamp(40px, 5vw, 72px);
  padding-left: max(
    clamp(24px, 5vw, 64px),
    calc((100vw - 1280px) / 2 + clamp(24px, 5vw, 64px))
  );
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.split-right {
  background: var(--green);
  color: var(--on-green);
  padding: 96px clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.split-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 28px;
}
.split-right .split-eyebrow { color: var(--on-green-mu); }

.split-left p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 18px;
  max-width: 52ch;
}
.split-left p:last-child { margin-bottom: 0; }
.split-left p em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--gold-deep);
}

/* Feature rows */
.feature {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-green);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  align-items: start;
}
.feature:first-of-type { padding-top: 0; }
.feature:last-of-type { border-bottom: none; padding-bottom: 0; }

.feature-icon { width: 28px; height: 28px; color: var(--on-green); margin-top: 2px; }

.feature-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-green);
  margin-bottom: 8px;
  line-height: 1.3;
}

.feature-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-green-mu);
  max-width: 38ch;
}

@media (max-width: 880px) {
  .split-left { padding: 64px var(--pad-x); }
  .split-right { padding: 64px var(--pad-x); }
}

/* ============================================================
   STAT ROW
   ============================================================ */

.stat-row {
  padding: clamp(64px, 9vh, 88px) 0;
  background: var(--cream-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
}

.stat {
  text-align: center;
  padding: 0 clamp(20px, 4vw, 56px);
}

.stat-number {
  font-weight: 300;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 14px;
}

.stat-label {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.5;
  max-width: 22ch;
  margin: 0 auto;
}

.stat-divider {
  width: 1px;
  height: 72px;
  background: var(--rule-2);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .stat-divider { display: none; }
  .stat { padding: 0; }
}

/* ============================================================
   CAPABILITIES (tabbed)
   ============================================================ */

.capabilities-section {
  padding: clamp(64px, 9vh, 96px) 0;
  background: var(--cream);
  border-top: 1px solid var(--rule);
}

.section-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.capabilities-title {
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--green);
  margin-bottom: 48px;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  border: 1px solid var(--rule);
  background: var(--cream-2);
}

.capabilities-tabs {
  background: var(--cream);
  border-right: 1px solid var(--rule);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}

.cap-tab {
  position: relative;
  background: none;
  border: none;
  text-align: left;
  padding: 18px 36px 18px 28px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
  line-height: 1.4;
  width: 100%;
}
.cap-tab:hover { color: var(--green); }
.cap-tab.active {
  color: var(--green);
  font-weight: 400;
  background: rgba(18,45,32,0.04);
}
.cap-tab.active::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--green);
  border-top: 1.5px solid var(--green);
  transform: translateY(-50%) rotate(45deg);
}

.capabilities-content { padding: 48px; }

.cap-panel { display: none; }
.cap-panel.active { display: block; }

.cap-panel h3 {
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--green);
  margin-bottom: 20px;
}

.cap-panel p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  max-width: 64ch;
  margin-bottom: 28px;
}

.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--green);
  background: var(--cream);
  border: 1px solid var(--rule-2);
  padding: 11px 20px;
  border-radius: 2px;
  margin-bottom: 36px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.learn-more:hover { background: var(--green); color: var(--cream); border-color: var(--green); }

.cap-typo {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--green);
  color: var(--on-green);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 4.5vw, 52px);
  overflow: hidden;
}
.cap-typo::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
}

.cap-numeral {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(88px, 13vw, 180px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--gold-light);
  position: relative;
}

.cap-quote {
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.4;
  max-width: 26ch;
  color: var(--on-green);
  letter-spacing: -0.005em;
  text-align: right;
  margin-left: auto;
  position: relative;
}

@media (max-width: 720px) {
  .capabilities-grid { grid-template-columns: 1fr; }
  .capabilities-tabs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0;
  }
  .cap-tab { padding: 15px 20px; white-space: nowrap; border-bottom: 2px solid transparent; }
  .cap-tab.active { border-bottom-color: var(--green); }
  .cap-tab.active::after { display: none; }
  .capabilities-content { padding: 28px 20px; }
}

/* ============================================================
   CTA STRIP
   ============================================================ */

.thesis-strip {
  background: var(--green);
  color: var(--on-green);
  padding: clamp(72px, 10vh, 108px) 0;
  position: relative;
  overflow: hidden;
}
.thesis-strip::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 70%);
}

.thesis-inner {
  position: relative;
  max-width: 780px;
  text-align: center;
}

.thesis-lead {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.015em;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  color: var(--on-green);
  margin-bottom: 20px;
}

.thesis-body {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-green-mu);
  max-width: 62ch;
  margin: 0 auto;
}

.cta-strip {
  background: var(--green);
  color: var(--on-green);
  padding: clamp(64px, 9vh, 96px) 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 70%);
}

.cta-inner { position: relative; }

.cta-strip h2 {
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
  max-width: 22ch;
}

.cta-strip p {
  color: var(--on-green-mu);
  font-size: 17px;
  max-width: 54ch;
  margin: 0 0 40px;
  line-height: 1.6;
}

.btn-light {
  background: var(--cream);
  color: var(--green);
  padding: 15px 32px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background .2s ease;
}
.btn-light:hover { background: var(--cream-2); }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background: var(--green-3);
  color: var(--on-green);
  padding: 80px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 56px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-wordmark {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-green);
}

.footer-tagline {
  font-size: 14px;
  font-weight: 300;
  color: var(--on-green-mu);
  line-height: 1.6;
  max-width: 28ch;
}

.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--rule-green);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-green);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover {
  background: var(--on-green);
  color: var(--green-3);
  border-color: var(--on-green);
}
.footer-social svg { width: 15px; height: 15px; }

.footer-col h4 {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--on-green);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li {
  margin-bottom: 11px;
  font-size: 13.5px;
  color: var(--on-green-mu);
  line-height: 1.55;
}
.footer-col a { color: var(--on-green-mu); transition: color .15s ease; }
.footer-col a:hover { color: var(--on-green); }
.footer-col p {
  font-size: 13.5px;
  color: var(--on-green-mu);
  line-height: 1.6;
  margin-bottom: 18px;
}

.footer-disclaimer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-green);
}
.footer-disclaimer h5 {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--on-green);
  margin-bottom: 12px;
}
.footer-disclaimer p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--on-green-mu);
  max-width: 90ch;
}

.footer-copyright {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-green);
  font-size: 12px;
  color: var(--on-green-mu);
  letter-spacing: 0.01em;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  footer { padding: 60px 0 28px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-disclaimer { margin-top: 36px; }
}

/* ============================================================
   SHARED UTILITIES
   ============================================================ */

.text-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .2s ease;
}
.text-link:hover { gap: 14px; }

/* ============================================================
   PLACEHOLDER PAGES
   ============================================================ */

.placeholder {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vh, 120px) 0;
}
.placeholder-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 24px;
}
.placeholder-title {
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--green);
  margin-bottom: 20px;
  max-width: 18ch;
}
.placeholder-sub {
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 40px;
  max-width: 44ch;
  line-height: 1.6;
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */

/* Page header — dark green, compact */
.page-header {
  background: var(--green);
  color: var(--on-green);
  padding: clamp(72px, 10vh, 112px) 0 clamp(64px, 9vh, 96px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Restored: the grid texture every page header carries. */
.page-header::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 70% 50%, rgba(0,0,0,0.35) 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, rgba(0,0,0,0.35) 0%, transparent 65%);
  z-index: -1;
  pointer-events: none;
}

/* Page header with a photograph behind it. Same idea as the homepage hero: the
   image sits under a directional green wash so the type stays legible and the
   picture reads as ground rather than decoration.

   Usage: add the modifier and point the custom property at the file.
     <header class="page-header page-header--image"
             style="--header-image:url('/assets/headers/legal.jpg')">

   Without --header-image the modifier is inert, so the plain green header stays
   the default and nothing breaks if an image is missing. The photo goes on
   ::before because ::after already carries the grid texture; on an image header
   the wash replaces that grid, since over a photograph the grid is redundant. */
.page-header--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--header-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.page-header--image::after {
  background-image:
    linear-gradient(90deg, rgba(18,45,32,0.96) 0%, rgba(18,45,32,0.88) 38%, rgba(18,45,32,0.34) 100%),
    linear-gradient(to top, rgba(8,14,11,0.42) 0%, rgba(8,14,11,0.04) 62%);
  background-size: auto, auto;
  mask-image: none;
  -webkit-mask-image: none;
}
/* Narrow screens lose the horizontal falloff: there is no room for the image to
   read, and the type needs the full wash behind it. */
@media (max-width: 720px) {
  .page-header--image::after {
    background-image: linear-gradient(90deg, rgba(18,45,32,0.96), rgba(18,45,32,0.90));
  }
}


.page-header-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 24px;
}
.page-header h1 {
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--on-green);
  max-width: 20ch;
  margin-bottom: 24px;
}
.page-header-sub {
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--on-green-mu);
  max-width: 52ch;
}

/* Service overview — 2-col cream */
.svc-overview {
  padding: clamp(64px, 9vh, 96px) 0;
  border-top: none;
}
.svc-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}
@media (max-width: 880px) {
  .svc-overview-grid { grid-template-columns: 1fr; gap: 48px; }
}
.svc-overview-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 18px;
  max-width: 52ch;
}
.svc-overview-body p:last-child { margin-bottom: 0; }
.svc-overview-body p em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--gold-deep);
}
.svc-includes-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.svc-includes {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.svc-includes li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
}
.svc-includes li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--green);
  flex-shrink: 0;
}

/* Pull panel — dark green editorial break */
.pull-panel {
  background: var(--green);
  color: var(--on-green);
  padding: clamp(64px, 9vh, 96px) 0;
  position: relative;
  overflow: hidden;
}
.pull-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
}
.pull-panel-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.pull-numeral {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(100px, 14vw, 200px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--gold-light);
  margin-bottom: 32px;
}
.pull-statement {
  font-weight: 300;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--on-green);
  max-width: 26ch;
  margin-left: auto;
  text-align: right;
}
.pull-numeral--compact {
  font-size: clamp(58px, 8vw, 116px);
  letter-spacing: -0.03em;
}

/* Statement-only pull panel — for pages where there is no verified figure to
   lead with. Left-aligned so the empty numeral slot is not felt. */
.pull-panel--quote .pull-panel-inner { min-height: 0; }
.pull-panel--quote .pull-statement {
  margin-left: 0;
  text-align: left;
  max-width: 30ch;
  font-size: clamp(26px, 3.6vw, 46px);
}
.pull-panel--quote .pull-note {
  margin-top: 30px;
  max-width: 52ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-green-mu);
}

/* How it works — numbered steps */
.how-it-works {
  padding: clamp(64px, 9vh, 96px) 0;
  border-top: 1px solid var(--rule);
}
.how-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 56px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--rule);
}
@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  padding: 0 clamp(24px, 3.5vw, 44px) 0 clamp(24px, 3.5vw, 44px);
  border-right: 1px solid var(--rule);
}
@media (max-width: 880px) {
  .step {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .step:nth-child(2n) { border-right: none; }
}
@media (max-width: 540px) {
  .step { border-right: none; border-bottom: 1px solid var(--rule); padding: 32px 0; margin-bottom: 0; }
  .step:last-child { border-bottom: none; }
}
.step-number {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(52px, 6vw, 80px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 24px;
  opacity:  0.75;
}
.step-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.step-body {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
  max-width: 28ch;
}

/* ============================================================
   APPROACH / ABOUT PAGE
   ============================================================ */

.approach-intro {
  padding: clamp(64px, 9vh, 96px) 0;
}
.approach-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) {
  .approach-intro-grid { grid-template-columns: 1fr; }
}
.approach-intro-img {
  position: sticky;
  top: calc(62px + 32px);
}
.approach-intro-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.approach-firm-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 28px;
}
.approach-intro-body > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 18px;
  max-width: 52ch;
}
.approach-intro-body > p:last-child { margin-bottom: 0; }
.approach-intro-body p em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--gold-deep);
}

/* Credentials strip — 3-col on dark green */
.credentials-strip {
  background: var(--green);
  color: var(--on-green);
  padding: clamp(64px, 9vh, 96px) 0;
  position: relative;
  overflow: hidden;
}
.credentials-strip::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,237,230,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%);
  pointer-events: none;
}
.credentials-inner {
  position: relative;
}
.credentials-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 56px;
}
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--rule-green);
}
.credential {
  padding: 0 clamp(28px, 3.5vw, 52px);
  border-right: 1px solid var(--rule-green);
}
.credential-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
}
.credential-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-green);
  max-width: 32ch;
}
@media (max-width: 880px) {
  .credentials-grid {
    grid-template-columns: 1fr;
    border-left: none;
  }
  .credential {
    border-right: none;
    border-bottom: 1px solid var(--rule-green);
    padding: 32px 0;
  }
  .credential:last-child { border-bottom: none; }
}

.certifications {
  position: relative;
  margin-top: clamp(48px, 6vh, 72px);
  padding-top: clamp(40px, 5vh, 56px);
  border-top: 1px solid var(--rule-green);
}
.certifications-eyebrow {
  margin-bottom: 28px;
}
.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.cert-badge {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--on-green);
  padding: 8px 16px;
  border: 1px solid var(--rule-green);
  border-radius: 999px;
  white-space: nowrap;
}
.cert-note {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-green);
  max-width: 70ch;
}

.proprietary-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(240,237,230,0.15);
}

.proprietary-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-green);
  max-width: 70ch;
  margin-top: 12px;
}

/* ============================================================
   ENTERPRISE OUTCOMES (service pages)
   ============================================================ */

.ent-proof {
  padding: clamp(64px, 9vh, 104px) 0;
  background: var(--cream);
}
.ent-proof-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--green);
  margin: 16px 0 20px;
  max-width: 20ch;
}
.ent-proof-intro {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body);
  max-width: 64ch;
  margin-bottom: clamp(40px, 5vh, 64px);
}
.ent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
}
.ent-card {
  background: var(--cream);
  padding: clamp(28px, 3vw, 44px);
}
.ent-metric {
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
}
.ent-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.ent-desc {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--body);
  max-width: 46ch;
}
/* Mechanisms — the channel cards on a service-arm overview page. */
.mech-section {
  padding: clamp(64px, 9vh, 104px) 0;
  border-top: 1px solid var(--rule);
}
.mech-intro {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body);
  max-width: 62ch;
  margin: 16px 0 clamp(36px, 5vh, 56px);
}
.mech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
}
.mech-card {
  background: var(--cream);
  padding: clamp(28px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
}
.mech-numeral {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.mech-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--green);
  margin-bottom: 14px;
}
.mech-desc {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--body);
  margin-bottom: 28px;
  flex: 1;
}
.mech-card .learn-more { align-self: flex-start; }
/* Industry context on a case study — the sector reading behind the result. */
.industry-context {
  padding: clamp(56px, 7vh, 88px) 0;
  border-top: 1px solid var(--rule);
}
.industry-context .case-h { margin: 14px 0 22px; max-width: 26ch; }
.industry-context p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body);
  max-width: 64ch;
  margin-bottom: 18px;
}
.industry-context p:last-of-type { margin-bottom: 28px; }

/* PDF download — the one-page version of a case study, for forwarding on. */
.case-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 11px 20px;
  border: 1px solid var(--gold-rule-2);
  color: var(--on-green);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: background .15s ease, border-color .15s ease;
}
.case-download:hover { background: var(--gold-wash); border-color: var(--gold-light); }
.case-download svg { width: 15px; height: 15px; flex-shrink: 0; }
.case-download .case-download-meta { color: var(--on-green-mu); font-weight: 300; }

/* Same control on a cream ground (the index cards) */
.case-download--light { color: var(--green); border-color: var(--gold-rule); }
.case-download--light:hover { background: var(--gold-wash); border-color: var(--gold-rule-2); }
.case-download--light .case-download-meta { color: var(--muted); }

/* Four mechanisms read better 2x2 than 3+1 */
.mech-grid--two { grid-template-columns: repeat(2, 1fr); }

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

/* Card without a headline figure — a gold rule carries the top edge instead. */
.ent-card--nometric { border-top: 2px solid var(--gold-rule-2); }
.ent-card--nometric .ent-label {
  font-size: 17px;
  font-weight: 400;
  color: var(--green);
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .ent-grid { grid-template-columns: 1fr; }
}
.gtm-outcome {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding: clamp(40px, 5vw, 64px);
  border: 1px solid var(--rule-2);
}
.gtm-outcome-metric {
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1;
}
.gtm-outcome-body { max-width: 52ch; }
.gtm-outcome-body .ent-label { font-size: 16px; margin-bottom: 12px; }
.gtm-outcome-body .ent-desc { font-size: 15px; max-width: none; }
@media (max-width: 600px) {
  .gtm-outcome { flex-direction: column; }
}

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

.contact-section {
  padding: clamp(64px, 9vh, 96px) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-meta-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 28px;
}
.contact-meta h2 {
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 18ch;
}
.contact-meta-body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 16px;
  max-width: 44ch;
}
.contact-meta-body p:last-child { margin-bottom: 0; }
.contact-direct {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}
.contact-direct-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.contact-direct a {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.contact-direct a:hover { border-color: var(--green); }
.contact-response-note {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

/* Form elements */
.form-group { margin-bottom: 24px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.form-label .req {
  color: var(--muted);
  margin-left: 2px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.form-input,
.form-textarea {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted-2); }
.form-input:focus,
.form-textarea:focus { border-color: var(--green); }
.form-textarea {
  resize: vertical;
  min-height: 148px;
  line-height: 1.65;
}
.form-submit {
  width: 100%;
  background: var(--green);
  color: var(--on-green);
  border: none;
  border-radius: 2px;
  padding: 17px 32px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.form-submit:hover:not(:disabled) { background: var(--green-2); }
.form-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.form-feedback {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  display: none;
}
.form-feedback.success {
  background: rgba(18, 45, 32, 0.06);
  border: 1px solid rgba(18, 45, 32, 0.2);
  color: var(--green);
}
.form-feedback.error {
  background: rgba(160, 30, 30, 0.05);
  border: 1px solid rgba(160, 30, 30, 0.2);
  color: #7a1a1a;
}

/* ============================================================
   LEGAL PAGES (Privacy Policy, Terms of Service)
   ============================================================ */
.legal-section {
  padding: 80px 0 108px;
  background: var(--cream);
}
.legal-body {
  max-width: 700px;
}
.legal-updated {
  font-size: 13px;
  color: rgba(18,45,32,0.42);
  margin-bottom: 52px;
  font-style: italic;
  letter-spacing: 0.01em;
}
.legal-body h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin: 44px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18,45,32,0.12);
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p {
  font-size: 15px;
  line-height: 1.78;
  color: #2F3B36;
  margin-bottom: 16px;
}
.legal-body ul {
  margin: 4px 0 20px 0;
  padding-left: 22px;
}
.legal-body ul li {
  font-size: 15px;
  line-height: 1.75;
  color: #2F3B36;
  margin-bottom: 8px;
}
.legal-body a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-body a:hover { opacity: 0.72; }

/* ============================================================
   INSIGHTS — index listing + long-form article
   ============================================================ */

/* --- Index listing --- */
.insights-list {
  padding: clamp(56px, 8vh, 88px) 0 clamp(64px, 9vh, 96px);
}
.insight-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(24px, 5vw, 64px);
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.insight-row:first-child { border-top: none; padding-top: 0; }
.insight-meta-col {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
}
.insight-meta-col .insight-cat { color: var(--green); display: block; margin-bottom: 6px; }
.insight-row h2 {
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 26ch;
  margin-bottom: 14px;
}
.insight-row h2 a:hover { color: var(--green-2); }
.insight-row p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  max-width: 60ch;
  margin-bottom: 18px;
}
.insights-empty {
  font-size: 16px;
  color: var(--muted);
  padding: 24px 0;
}

/* --- Article header meta --- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-green-mu);
}
.article-meta span { white-space: nowrap; }

/* --- Article body (long-form prose) --- */
.article-body {
  padding: clamp(56px, 8vh, 88px) 0 clamp(40px, 6vh, 64px);
}
.article-prose {
  max-width: 680px;
  margin: 0 auto;
}
.article-prose > .article-lede {
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 36px;
}
.article-prose h2 {
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 48px 0 18px;
}
.article-prose h3 {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 36px 0 12px;
}
.article-prose p {
  font-size: 17px;
  line-height: 1.78;
  color: var(--body);
  margin-bottom: 22px;
}
.article-prose ul, .article-prose ol {
  margin: 4px 0 24px 0;
  padding-left: 22px;
}
.article-prose li {
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 10px;
}
.article-prose a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-prose a:hover { opacity: 0.72; }
.article-prose blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.01em;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}
.article-prose figure { margin: 32px 0; }
.article-prose figure img { border-radius: 2px; width: 100%; }
.article-prose figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}
.article-prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 44px 0;
}
.article-prose strong { font-weight: 600; color: var(--ink); }

/* Key-takeaways / pull box inside an article */
.article-keybox {
  background: var(--cream-2);
  border-left: 2px solid var(--green);
  padding: 28px 32px;
  margin: 36px 0;
  border-radius: 2px;
}
.article-keybox .keybox-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.article-keybox ul { margin: 0; padding-left: 20px; }
.article-keybox li { font-size: 15px; line-height: 1.6; margin-bottom: 8px; }

/* Sources / footnotes block */
.article-sources {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.article-sources h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.article-sources ol { padding-left: 20px; }
.article-sources li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 10px;
}
.article-sources a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* Author byline footer */
.article-byline {
  max-width: 680px;
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}
.article-byline strong { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .insight-row { grid-template-columns: 1fr; gap: 12px; }
}

/* === CASE STUDIES ===
   Additive only. Introduces new .case-* selectors and does not modify
   any existing rule, so no other page is affected.
   ------------------------------------------------------------ */
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-green);
  max-width: 72ch;
}
.case-meta span {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-green-mu);
}
.case-h {
  font-size: var(--fs-sub-2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--green);
  margin-bottom: 20px;
  max-width: 34ch;
  text-wrap: balance;
}
.case-lead {
  font-size: var(--fs-p1);
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 48px;
}
.case-body p {
  font-size: var(--fs-p1);
  font-weight: 300;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 18px;
  max-width: 56ch;
}
.case-body p:last-child { margin-bottom: 0; }