/* ============================================================
   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;
  /* The lockup is a single drawn asset now, not an emblem plus CSS text, so the
     spacing between mark and name lives inside the SVG: 57.7 artwork units,
     which is the clearance the official lockup uses between the two. */
  flex-shrink: 0;
}
.nav-wordmark:hover { opacity: 0.75; }
.nav-lockup {
  height: 30px;
  width: auto;
  display: block;
}


.nav-menu {
  display: flex;
  align-items: center;
  /* 26px. The eight items are 655px of text; each 2px of gap costs 14px across
     the bar, so the gap and the overlay breakpoint have to be chosen together.
     At 26 with the overlay starting at 1260 the wordmark never comes closer
     than 90px to the first link. */
  gap: 26px;
  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
   ============================================================ */

/* 1199. The drawn lockup is 156px against the 196px the CSS wordmark took, and
   those 40px come straight off the breakpoint: the bar now clears 79px at 1200
   where it needed 1260 before. Keep the JS in every page header on the same
   number. */
@media (max-width: 1199px) {
  .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);
  color: var(--on-green);
  overflow: hidden;
  isolation: isolate;
  height: clamp(500px, 48vw, 720px);
  display: flex;
  align-items: center;
}

/* The photograph, on its own layer so it can be moved. A slow drift rather than
   a video: the reference (rubiconcapitaladvisors.com) ships a 14.4MB mp4 for an
   11 second loop, which is a lot of bandwidth for atmosphere. This is the same
   effect for the weight of one image.

   <picture> rather than a CSS background with image-set: the CSS fallback
   pattern makes the browser fetch the JPEG *and* the WebP, which costs more
   than it saves. <source> negotiates properly and only one file is requested.

   Linear, not ease-in-out: an eased curve is slowest at the start, which is
   exactly where a visitor lands, so the first seconds looked static. Linear
   holds velocity constant from the moment of landing.

   The source is 3200px rather than 2560 because the zoom reaches 1.21: a 1280px
   hero on a 2x display needs about 3100 device pixels at full zoom, and a
   smaller source would go soft exactly when the image is largest. Scale never
   drops below 1.03 so the pan cannot expose an edge. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  animation: hero-drift 22s linear infinite alternate;
  /* No will-change: a slow linear transform does not need the hint, and
     promoting the texture into a permanent layer costs memory for nothing. */
}
@keyframes hero-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.21) translate3d(-3.2%, -2.4%, 0); }
}
/* Motion is opt-out for anyone who has asked the OS for less of it. */
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; transform: scale(1.03); }
}

.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: 1;
}

/* On a narrow screen the standfirst runs the full width of the hero, so the
   90deg wash is the wrong shape for it: that gradient exists to hold a
   left-hand column dark while letting the right of the photograph breathe,
   and full-width text simply runs out past its dark end into the brightest
   part of the image. Below this width the wash is squared up and deepened so
   the copy keeps its contrast wherever it happens to wrap to. */
@media (max-width: 700px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(18,45,32,0.52) 0%, rgba(18,45,32,0.62) 42%, rgba(8,14,11,0.80) 100%);
  }
}

.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: 2;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  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);
  /* 62ch, not 48. The standfirst now carries the whole proposition rather
     than a single line, and at 48ch that ran six lines in a 452px column
     against a 950px headline, which read as a narrow gutter of text rather
     than a paragraph. 62ch brings it back to four lines and ends the measure
     at about half the hero's width, where the 90deg wash is still near its
     darkest and the text keeps its contrast over the photograph. */
  max-width: 62ch;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* ── Hero: the words arrive ──────────────────────────────────────────────
   The hero is above the fold, so this runs on load rather than on scroll. No
   observer, no arming class, and no no-JS failure mode: where animation is
   unavailable the text simply sits where it lands.

   `both` fill so each line holds its start state through its own delay rather
   than flashing in first. Only opacity and transform move, so the block never
   reflows over the photograph drifting beneath it, and the three lines share
   one keyframe with the travel passed in, since they differ only in how far
   they come and when.

   The headline is given the longest run and the greatest travel: it is the
   thing being said, and the eyebrow above and standfirst below should feel
   like they are settling around it rather than racing it. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(var(--rise, 14px)); }
  to   { opacity: 1; transform: none; }
}
.hero-eyebrow { --rise: 10px; animation: hero-rise .8s cubic-bezier(.22, .61, .36, 1) .15s both; }
.hero h1      { --rise: 20px; animation: hero-rise 1s  cubic-bezier(.22, .61, .36, 1) .28s both; }
.hero-sub     { --rise: 14px; animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) .46s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero h1,
  .hero-sub { animation: none; }
}

@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;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Faint artwork behind the panel, same treatment as the page headers. The wash
   is heavier here than on a header: this text is 14px in --on-green-mu, which
   has far less contrast to spare than a heading does. */
.split-right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/headers/firm.svg') center / cover no-repeat;
  pointer-events: none;
}
.split-right::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,45,32,0.95) 0%, rgba(18,45,32,0.92) 55%, rgba(18,45,32,0.48) 100%),
    linear-gradient(to top, rgba(8,14,11,0.35) 0%, rgba(8,14,11,0) 55%);
  pointer-events: none;
}

.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; }

/* ── Why Grand Oak: the rows arrive one at a time ────────────────────────
   The label leads, then each row rises in turn, top to bottom. `.is-armed`
   is added by script, as it is on the Explore bar, so a visitor without
   JavaScript is served the finished panel rather than an empty one. The step
   between rows arrives in --d, set per row where its position is known.

   Opacity carries the row's hairline rule with it, so the panel appears to
   rule itself line by line rather than the rules waiting, already drawn, for
   text that has not arrived. */
.split-right .split-eyebrow,
.split-right .feature {
  transition: opacity .75s ease var(--d, 0s),
              transform .75s cubic-bezier(.22, .61, .36, 1) var(--d, 0s);
}
.split-right .is-armed {
  opacity: 0;
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  .split-right .split-eyebrow,
  .split-right .feature { transition: none; }
}

.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);
  /* 52ch, not 38: the panel is half the viewport, so a 38ch measure left more
     than half the column empty on a wide screen. 52 still reads comfortably
     and fills the space without the line running long. */
  max-width: 52ch;
}

@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 {
  /* Rolled up from zero on entry, so the digits must be fixed width. */
  font-variant-numeric: tabular-nums;
  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;
}

/* Explore Solutions. A navigational sub-hero directly under the fold: for cold
   traffic the fastest way to establish that a firm is real is to show the
   breadth of what it does, in one glance, before asking for anything. */
.explore {
  padding: clamp(56px, 7vh, 84px) 0 clamp(48px, 6vh, 72px);
  background: var(--cream-2);
  border-bottom: 1px solid var(--rule);
}
.explore-head {
  margin-bottom: clamp(28px, 4vh, 44px);
}
.explore-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--green);
  /* No max-width: the line is meant to sit flat across the section rather than
     wrap into a block. It still wraps naturally on narrow screens. */
  max-width: none;
}
.explore-lead {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body);
  max-width: 46ch;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
}
@media (max-width: 900px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .explore-grid { grid-template-columns: 1fr; } }
.explore-col {
  background: var(--cream);
  padding: clamp(24px, 2.4vw, 32px);
}
@media (prefers-reduced-motion: reduce) {
  .explore-links a, .explore-links a::after, .explore-col { transition: none; }
}
.explore-col > a.explore-arm {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: var(--green);
  letter-spacing: -0.01em;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gold-rule);
  transition: color .12s ease;
}
.explore-col > a.explore-arm:hover { color: var(--gold-deep); }
.explore-links { list-style: none; }
.explore-links li { margin-bottom: 9px; }
.explore-links li:last-child { margin-bottom: 0; }
.explore-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 14px;
  font-weight: 300;
  color: var(--body);
  transition: color .12s ease, gap .18s ease;
}
.explore-links a:hover { color: var(--green); gap: 8px; }
/* An arrow that is not there until it is wanted: zero width by default, so the
   list keeps its clean left edge and the row does not reflow on hover. */
.explore-links a::after {
  content: "\2192";
  width: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--gold-deep);
  transition: width .18s ease, opacity .18s ease;
}
.explore-links a:hover::after { width: 12px; opacity: 1; }

/* Gold numerals, the same device the mechanism grids use on the arm pages, so
   the four columns read as a set and the block has a rhythm rather than being
   four equal slabs of text. */
.explore-num {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

/* The column answers the cursor rather than sitting inert. */
.explore-col {
  transition: background .18s ease, box-shadow .18s ease;
}
.explore-col:hover {
  background: #FBFAF7;
  box-shadow: inset 0 2px 0 var(--gold-rule-2);
}

/* ── Explore bar: assembly on entry ──────────────────────────────────────
   The bar builds itself rather than simply appearing. The hairline frame
   develops first, then each column's content rises into it, left to right.
   Everything animated is a colour, an opacity or a transform, so nothing
   reflows and the section holds its height from first paint.

   `.is-armed` carries the pre-animation state and is added by script, so a
   visitor without JavaScript is served the finished bar rather than a blank
   one.

   The stagger travels in `--d` rather than in `transition-delay`. Two rules
   here already set a `transition` shorthand of their own at awkward
   specificities, `.explore-col > a.explore-arm` at (0,2,1) and `.explore-num`
   at (0,1,0), and any shorthand resets the delay to zero. A custom property
   is read where the shorthand is used, so it survives all of that and the
   delays do not have to win a specificity race they keep losing. */
.explore-grid {
  transition: background-color .9s ease, border-color .9s ease;
}
.explore-grid.is-armed {
  /* The gaps and border take the section's own colour, so no rule is drawn
     yet. Resolving them to the rule colour reads as the frame developing. */
  background-color: var(--cream-2);
  border-color: transparent;
}

/* The arm is named explicitly: `.explore-grid .explore-col > *` is only
   (0,2,0), since the universal selector adds nothing, and would lose to the
   arm's own (0,2,1) rule. Its colour transition is folded in for the same
   reason. */
.explore-grid .explore-col > *,
.explore-grid .explore-col > a.explore-arm {
  transition: opacity .7s ease var(--d, 0s),
              transform .7s cubic-bezier(.22, .61, .36, 1) var(--d, 0s),
              color .12s ease;
}
.explore-grid.is-armed .explore-col > * {
  opacity: 0;
  transform: translateY(14px);
}

/* The numeral is the one element that scales, so the eye lands on it before
   the words arrive. It overshoots very slightly on the way in. */
.explore-grid .explore-num {
  transform-origin: left bottom;
  /* The count runs 00 through to the column's own number, so the glyphs must
     not change width underneath it. */
  font-variant-numeric: tabular-nums;
  transition: opacity .7s ease var(--d, 0s),
              transform .7s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s);
}
.explore-grid.is-armed .explore-num {
  opacity: 0;
  transform: translateY(14px) scale(.55);
}

/* Columns follow one another, and inside a column the numeral leads. The
   frame is given its first .15s alone before any content moves. */
.explore-col                                { --col-delay: 0s; }
.explore-col:nth-child(2)                   { --col-delay: .09s; }
.explore-col:nth-child(3)                   { --col-delay: .18s; }
.explore-col:nth-child(4)                   { --col-delay: .27s; }
.explore-grid .explore-col > *:nth-child(1) { --d: calc(.15s + var(--col-delay)); }
.explore-grid .explore-col > *:nth-child(2) { --d: calc(.24s + var(--col-delay)); }
.explore-grid .explore-col > *:nth-child(3) { --d: calc(.31s + var(--col-delay)); }

@media (prefers-reduced-motion: reduce) {
  .explore-grid,
  .explore-grid .explore-col > *,
  .explore-grid .explore-col > a.explore-arm,
  .explore-grid .explore-num { transition: none; }
}

/* The enquiry band that follows it. Same form, moved up the page so a visitor
   who is already convinced does not have to scroll the whole site to say so. */
/* The band needs separating from the green half of the split below it, or the
   two read as one slab. A cream break rather than a gold rule: cream is the
   page's own ground, so it reads as the sections parting rather than as a line
   drawn over them. Nothing is needed at the top, where cream already sits. */
.enquiry-band {
  background: var(--green);
  color: var(--on-green);
  padding: clamp(56px, 8vh, 88px) 0;
  border-bottom: 14px solid var(--cream);
  position: relative;
}
.enquiry-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .enquiry-grid { grid-template-columns: 1fr; } }
.enquiry-band h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 18px;
  max-width: 18ch;
}
.enquiry-band p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-green-mu);
  max-width: 44ch;
}
.enquiry-band .cta-form { margin-top: 0; max-width: none; }

/* Inline enquiry form. Replaces the "get in touch" button at the foot of every
   page: the same ask, but answerable on the spot rather than after a click.
   Sits on the green CTA ground, so inputs are outlined rather than filled. */
.cta-form {
  margin-top: 34px;
  max-width: 720px;
  text-align: left;
}
.cta-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 680px) {
  .cta-form-row { grid-template-columns: 1fr; }
}
.cta-form input,
.cta-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--on-green);
  background: rgba(240, 237, 230, 0.05);
  border: 1px solid var(--rule-green);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color .15s ease, background .15s ease;
}
.cta-form textarea { min-height: 92px; resize: vertical; display: block; }
.cta-form input::placeholder,
.cta-form textarea::placeholder { color: var(--on-green-mu); }
.cta-form input:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--gold-light);
  background: rgba(240, 237, 230, 0.09);
}
.cta-form-actions {
  display: flex;
  align-items: center;
  margin-top: 18px;
}
/* Sits under the button rather than beside it, and quieter than body copy:
   this is a footnote about what happens next, not part of the ask.

   Scoped to .cta-form deliberately. Both .cta-strip p and .enquiry-band p are
   (0,1,1) and would otherwise outrank a bare .cta-form-note at (0,1,0), so the
   note inherited the section's paragraph size and colour instead of its own. */
.cta-form .cta-form-note {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(240, 237, 230, 0.45);
  max-width: 46ch;
}
.cta-form button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--green);
  border: 1px solid var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cta-form button:hover { background: transparent; color: var(--cream); }
.cta-form button[disabled] { opacity: 0.55; cursor: default; }
.cta-form-feedback {
  display: none;
  margin-top: 18px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 300;
  border-left: 2px solid var(--gold-light);
  background: rgba(240, 237, 230, 0.07);
  color: var(--on-green);
}
.cta-form-feedback.is-error { border-left-color: #C9736A; }
.cta-form-feedback.is-shown { display: block; }
/* Labels exist for assistive tech; the placeholders carry them visually. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.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 { display: inline-block; }
/* Emblem alone down here. The name is already in the notice and the copyright
   line, so repeating it in the lockup adds nothing, and the mark on its own is
   quieter. The artwork gold clears 5.64:1 on --green-3, so no relit tint. */
.footer-emblem {
  height: 42px;
  width: auto;
  display: block;
}

.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;
  /* Email and telephone are one block of contact detail, so they sit tight to
     each other and the gap goes before the links that follow. */
  margin-bottom: 6px;
}
.footer-col p + ul { margin-top: 16px; }
/* The postal address is a separate fact from the email and telephone, so it
   takes the gap that block otherwise withholds. */
.footer-col .footer-address { margin-top: 14px; }

.footer-col p a { color: inherit; transition: color .12s ease; }
.footer-col p a:hover { color: var(--on-green); }

.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;
}
/* The statutory disclosure carries the copyright line, and sits a shade
   quieter than it: it is a legal requirement, not a claim we are making. */
.footer-copyright p { margin: 0; }
.footer-copyright .footer-legal {
  margin-bottom: 8px;
  color: rgba(240, 237, 230, 0.42);
}

@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 */
/* Section joins where both sides land on the same ground and nothing marks the
   boundary, so two sections read as one continuous field. .how-it-works,
   .mech-section and .industry-context already carry this hairline; these four
   pairs were the ones that did not. Sibling selectors, so each fires only where
   the adjacency exists.

   Found by walking every page and comparing the *effective* background of each
   pair, resolving transparent to the body colour: a transparent section over
   cream renders identically to one painted cream, which is why the join was
   invisible in the stylesheet but obvious on the page. */
.svc-overview + .split,
.ent-proof + .split,
.how-it-works + .ent-proof { border-top: 1px solid var(--rule); }
/* This pair is green on green, so it needs the light rule, not the dark one. */
.pull-panel + .cta-strip { border-top: 1px solid var(--rule-green); }

/* A split runs its right half in green. Where a full-width green panel follows
   it, the two merge into one slab down the right side. Same cream break used
   between the enquiry band and the split on the homepage. Sibling selector, so
   it only fires where the adjacency actually exists. */
.split + .pull-panel { border-top: 14px solid var(--cream); }

.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: 32px;
  border-top: 1px solid rgba(240,237,230,0.15);
}
/* .credentials-eyebrow carries a 56px bottom margin because elsewhere it heads
   the whole credentials grid. Here it sits directly above one paragraph, and
   that margin collapses against the body's 12px to leave a 56px hole. */
.proprietary-block .credentials-eyebrow { margin-bottom: 16px; }

.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 {
  /* Rolled up from zero on entry, so the digits must be fixed width. */
  font-variant-numeric: tabular-nums;
  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); }
/* The link needs air under the copy: .ent-desc carries no bottom margin, so
   without this the button sits directly against the last line of text. */
.ent-card .learn-more { margin-top: 26px; }
.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 {
  /* Rolled up from zero on entry, so the digits must be fixed width. */
  font-variant-numeric: tabular-nums;
  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); }
/* The address matches the email and telephone in weight, but it is not a
   link, so it carries none of their underline. */
.contact-address {
  font-size: 15px;
  font-weight: 300;
  font-style: normal;
  color: var(--ink);
  line-height: 1.75;
}

.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; }