/* ==========================================================================
   WFS Advisory · brand.css
   Web translation of the WFS Brand Guidelines (2026) and the homepage
   design target. Single source of truth for colour, type, spacing, and
   component primitives. Every page references these variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* ---- Palette (brand-locked, never #000) ---- */
  --forest:        #1A3A2F;   /* Primary — hero, sections, nav, footer */
  --forest-dk:     #142C24;   /* Deeper green — alt section / divider */
  --forest-soft:   #214A3C;   /* Slightly lighter green — hover/state */
  --navy:          #0D1F38;   /* Secondary dark — formal blocks */
  --navy-dk:       #091529;
  --stone:         #F4EFE6;   /* Light bg — body / page default */
  --stone-warm:    #EDE6D7;   /* Slightly deeper stone for cards on stone */
  --stone-dk:      #E2D9C6;
  --champagne:     #C4A26A;   /* Primary accent — hairlines, KPIs, italics */
  --amber:         #A8854A;   /* Secondary accent — buttons on stone, deeper highlights */

  /* ---- Working text colours ---- */
  --ink:           #142421;   /* Body text on stone (deep green-black, NOT #000) */
  --ink-soft:      #3D4A47;   /* Secondary text on stone */
  --ink-mute:      #6B7370;   /* Tertiary / captions on stone */

  /* ---- On-dark text scale ---- */
  --white:         #F4EFE6;   /* Use stone as our "white" — never pure white */
  --white-90:      rgba(244, 239, 230, 0.92);
  --white-70:      rgba(244, 239, 230, 0.78);
  --white-50:      rgba(244, 239, 230, 0.55);
  --white-30:      rgba(244, 239, 230, 0.32);
  --white-10:      rgba(244, 239, 230, 0.10);

  /* ---- Rules / borders ---- */
  --rule-light:    rgba(20, 36, 33, 0.14);
  --rule-light-strong: rgba(20, 36, 33, 0.28);
  --rule-dark:     rgba(244, 239, 230, 0.18);
  --rule-dark-strong: rgba(244, 239, 230, 0.32);
  --rule-gold:     rgba(196, 162, 106, 0.65);

  /* ---- Typography ---- */
  --font-display:  'EB Garamond', 'Garamond', 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-hero:       clamp(2.75rem, 1.6rem + 5vw, 5.25rem);   /* 44 → 84 */
  --fs-h2:         clamp(2rem,    1.4rem + 2.6vw, 3.25rem); /* 32 → 52 */
  --fs-h3:         clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);/* 22 → 28 */
  --fs-h4:         1.125rem;                                /* 18 */
  --fs-lead:       clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); /* 17 → 20 */
  --fs-body:       1rem;          /* 16 */
  --fs-body-lg:    1.0625rem;     /* 17 */
  --fs-small:      0.875rem;      /* 14 */
  --fs-xsmall:     0.8125rem;     /* 13 */
  --fs-caps:       0.6875rem;     /* 11 */

  --lh-tight:      1.1;
  --lh-display:    1.12;
  --lh-snug:       1.3;
  --lh-body:       1.6;

  --ls-caps:       0.18em;
  --ls-caps-tight: 0.12em;
  --ls-display:    -0.005em;

  /* ---- Spacing scale ---- */
  --space-xs:      0.25rem;
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      1.5rem;
  --space-xl:      2.5rem;
  --space-2xl:     4rem;
  --space-3xl:     6rem;

  --section-y:     clamp(4.5rem, 3rem + 5vw, 7rem);
  --section-y-tight: clamp(3rem, 2rem + 3vw, 4.5rem);

  /* ---- Layout ---- */
  --container:     1280px;
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --nav-height:    96px;

  /* ---- Motion ---- */
  --ease:          cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:        160ms;
  --t-med:         280ms;
  --t-slow:        500ms;

  /* ---- Reveal ---- */
  --reveal-y:      24px;
  --reveal-duration: 700ms;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

button { font-family: inherit; }

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

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. Typography primitives
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
  color: var(--forest);
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0; }

em { font-style: italic; }

strong { font-weight: 600; }

/* Tracked-caps eyebrow label, used everywhere (Why WFS, What we do, etc.) */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  position: relative;
  padding-left: 56px;
  margin-bottom: var(--space-md);
}
.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 1px;
  background: var(--champagne);
}
.section-label.on-dark { color: var(--champagne); }
.section-label.on-dark::before { background: var(--champagne); opacity: 0.7; }

/* Gold rule used below section titles */
.rule {
  border: 0;
  height: 1px;
  background: var(--rule-light-strong);
  width: 80px;
  margin: var(--space-lg) 0 var(--space-xl) 0;
}
.on-dark .rule, .on-green .rule, .on-navy .rule, .on-forest-dk .rule {
  background: var(--rule-dark-strong);
}

/* "View all → " style affordance */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 6px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), letter-spacing var(--t-med) var(--ease);
}
.arrow-link:hover {
  color: var(--forest);
  letter-spacing: 0.2em;
}
.on-dark .arrow-link, .on-green .arrow-link, .on-navy .arrow-link, .on-forest-dk .arrow-link {
  color: var(--champagne);
  border-bottom-color: var(--champagne);
}
.on-dark .arrow-link:hover, .on-green .arrow-link:hover, .on-navy .arrow-link:hover, .on-forest-dk .arrow-link:hover {
  color: var(--stone);
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: var(--section-y-tight); }

.on-stone     { background: var(--stone);     color: var(--ink); }
.on-green     { background: var(--forest);    color: var(--white); }
.on-forest-dk { background: var(--forest-dk); color: var(--white); }
.on-navy      { background: var(--navy);      color: var(--white); }

.on-green h2, .on-navy h2, .on-forest-dk h2,
.on-green h3, .on-navy h3, .on-forest-dk h3 { color: var(--stone); }
.on-green em, .on-navy em, .on-forest-dk em { color: var(--champagne); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-med) var(--ease),
              color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--amber);
  color: var(--stone);
  border-color: var(--amber);
}
.btn--primary:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--forest);
}

.btn--ghost {
  background: transparent;
  color: var(--champagne);
  border-color: var(--champagne);
}
.btn--ghost:hover {
  background: var(--champagne);
  color: var(--forest);
}

/* ==========================================================================
   6. Reveal animations (.reveal → .reveal.visible)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-duration) var(--ease-out),
              transform var(--reveal-duration) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.reveal-1 { transition-delay: 80ms; }
.reveal.reveal-2 { transition-delay: 160ms; }
.reveal.reveal-3 { transition-delay: 240ms; }

/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--forest);
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.site-nav.scrolled {
  background: rgba(20, 44, 36, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(196, 162, 106, 0.18);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  color: var(--stone);
  flex-shrink: 0;
}
.nav-brand__mark {
  width: 80px;
  height: 80px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 0.5rem + 2vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white-90);
  padding: 0.6rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--stone); }
.nav-links a[aria-current="page"] {
  color: var(--stone);
  border-bottom-color: var(--champagne);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--white-30);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--stone);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--forest);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-2xl) var(--gutter);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--t-med) var(--ease);
    z-index: 99;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 0.875rem; }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  background: var(--forest);
  color: var(--white);
  overflow: hidden;
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-3xl);
  display: flex;
  align-items: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
  filter: saturate(0.85) contrast(0.95);
}
.hero__media::after {
  /* Strong green wash on the left so headline reads cleanly,
     softens to ~35% on the right where the rings sit. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(20, 44, 36, 0.96) 0%,
      rgba(20, 44, 36, 0.88) 35%,
      rgba(26, 58, 47, 0.62) 70%,
      rgba(26, 58, 47, 0.45) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(20, 44, 36, 0.55) 0%,
      rgba(20, 44, 36, 0.30) 40%,
      rgba(26, 58, 47, 0.55) 100%
    );
  pointer-events: none;
}

.hero__rings {
  position: absolute;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 80vw;
  max-width: 980px;
  aspect-ratio: 1;
  color: var(--champagne);
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 4;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.hero__tag {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 var(--space-lg) 0;
  position: relative;
  padding-left: 64px;
}
.hero__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 1px;
  background: var(--champagne);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--stone);
  margin: 0 0 var(--space-xl) 0;
  max-width: 18ch;
}
.hero__title em {
  color: var(--champagne);
  font-style: italic;
  font-weight: 500;
}

.hero__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--white-90);
  max-width: 56ch;
  margin: 0 0 var(--space-xl) 0;
  font-weight: 300;
}
.hero__lead-accent {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--champagne);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

/* Three metric tiles, bottom-right of hero */
.hero__metrics {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-2xl);
  z-index: 4;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.hero-metric {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-left: 1px solid var(--white-10);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 140px;
}
.hero-metric:first-child { border-left: 0; padding-left: 0; }
.hero-metric__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}
.hero-metric__num em {
  color: var(--champagne);
  font-style: italic;
  font-weight: 500;
}
.hero-metric__lbl {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white-50);
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--white-50);
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--champagne));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -36px;
  left: 0;
  width: 100%;
  height: 36px;
  background: var(--stone);
  animation: scroll-pulse 2.4s var(--ease) infinite;
}
@keyframes scroll-pulse {
  0%   { top: -36px; }
  60%  { top: 36px; }
  100% { top: 36px; }
}

/* Hero responsive */
@media (max-width: 1100px) {
  .hero__metrics { gap: 0; right: var(--gutter); bottom: var(--space-xl); }
  .hero-metric { min-width: 120px; padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 880px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-2xl)); padding-bottom: var(--space-2xl); }
  .hero__metrics {
    position: static;
    margin-top: var(--space-xl);
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    border-top: 1px solid var(--white-10);
    padding-top: var(--space-lg);
  }
  .hero-metric { flex: 1 1 33%; min-width: 0; padding: 0 var(--space-md); border-left-color: var(--white-10); }
  .hero-metric:first-child { padding-left: 0; }
  .hero__title { max-width: 100%; }
  .hero__rings { width: 140vw; right: -50%; opacity: 0.18; }
  .hero__scroll { display: none; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   9. INTRO (firm intro section, on stone)
   ========================================================================== */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 960px) {
  .intro-grid {
    grid-template-columns: 1.45fr 1fr;
    gap: var(--space-3xl);
  }
}

.intro-body {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
  max-width: 56ch;
}
.intro-body strong { color: var(--ink); font-weight: 600; }
.intro-body:last-of-type { margin-bottom: var(--space-xl); }

/* Pedigree row — Morgan Stanley · Macquarie · KPMG · ... */
.pedigree-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule-light);
}
.pedigree-row__label {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin-right: var(--space-md);
}
.pedigree-row__item {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.pedigree-row__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne);
  display: inline-block;
}

/* Stat tiles — right column on intro */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
.stat-tile {
  background: var(--stone);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 140px;
  transition: background var(--t-med) var(--ease);
}
.stat-tile:hover { background: var(--stone-warm); }
.stat-tile__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 600;
  color: var(--forest);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}
.stat-tile__num em {
  color: var(--amber);
  font-style: italic;
  font-weight: 500;
  margin: 0 0.05em;
}
.stat-tile__lbl {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ==========================================================================
   10. SERVICES (forest green section)
   ========================================================================== */
.services-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 880px) {
  .services-head {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-2xl);
    align-items: end;
  }
}
.services-head h2 { max-width: 16ch; }
.services-head__intro {
  color: var(--white-70);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.6;
  max-width: 44ch;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
@media (min-width: 720px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }

.service-card {
  background: var(--forest);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: background var(--t-med) var(--ease);
}
.service-card:hover { background: var(--forest-soft); }
.service-card__icon {
  width: 36px;
  height: 36px;
  color: var(--champagne);
  margin-bottom: var(--space-md);
}
.service-card h3 {
  color: var(--stone);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}
.service-card p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--white-70);
  font-weight: 300;
  flex: 1;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--white-10);
}
.service-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 500;
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
  color: var(--champagne);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--white-10);
}

/* ==========================================================================
   11. PILLARS (stone section)
   ========================================================================== */
.pillars-head {
  margin-bottom: var(--space-2xl);
  max-width: 760px;
}
.pillars-head h2 { max-width: 18ch; }

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 880px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); } }

.pillar-card {
  border-top: 2px solid var(--champagne);
  padding-top: var(--space-lg);
  position: relative;
}
.pillar-card__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}
.pillar-card h3 {
  font-size: var(--fs-h3);
  color: var(--forest);
  margin-bottom: var(--space-md);
  max-width: 14ch;
}
.pillar-card p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
}
.pillar-card p strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   12. DEALS (navy section)
   ========================================================================== */
.deals-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (min-width: 720px) {
  .deals-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
  }
}
.deals-head h2 { max-width: 22ch; }

.deals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
@media (min-width: 720px) { .deals-grid { grid-template-columns: repeat(2, 1fr); } }

.deal-card {
  background: var(--navy);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: background var(--t-med) var(--ease);
}
.deal-card:hover { background: var(--navy-dk); }

.deal-card__type {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: var(--space-sm);
}
.deal-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--stone);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  max-width: 26ch;
}
.deal-card__size {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--champagne);
  margin: var(--space-sm) 0;
}
.deal-card__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--white-70);
  font-weight: 300;
  flex: 1;
  margin: var(--space-sm) 0 var(--space-md) 0;
}
.deal-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 500;
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
  color: var(--white-50);
  padding-top: var(--space-md);
  border-top: 1px solid var(--white-10);
}

/* ==========================================================================
   13. NETWORK (forest-dk section)
   ========================================================================== */
.network-head {
  margin-bottom: var(--space-2xl);
  max-width: 720px;
}
.network-head h2 { margin-bottom: var(--space-md); }
.network-head p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--white-70);
  font-weight: 300;
  max-width: 60ch;
}

.network-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 880px) { .network-grid { grid-template-columns: repeat(3, 1fr); } }

.network-card {
  background: rgba(244, 239, 230, 0.025);
  border: 1px solid var(--rule-dark);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.network-card:hover {
  background: rgba(244, 239, 230, 0.05);
  border-color: var(--rule-dark-strong);
}
.network-card__firm {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--champagne);
  margin-bottom: var(--space-sm);
}
.network-card h3 {
  color: var(--stone);
  font-size: 1.4rem;
  margin: 0 0 var(--space-xs) 0;
  max-width: 18ch;
}
.network-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white-50);
  margin-bottom: var(--space-md);
}
.network-card p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--white-70);
  font-weight: 300;
  flex: 1;
  margin-bottom: var(--space-md);
}
.network-card__focus {
  font-family: var(--font-body);
  font-size: var(--fs-xsmall);
  color: var(--white-50);
  padding-top: var(--space-md);
  border-top: 1px solid var(--white-10);
}
.network-card__focus strong {
  color: var(--champagne);
  font-weight: 500;
}

/* ==========================================================================
   14. CONTACT PREVIEW (stone section)
   ========================================================================== */
.contact-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 880px) {
  .contact-preview {
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(4rem, 2rem + 6vw, 9rem);
  }
}
.contact-preview__left h2 { margin-bottom: var(--space-md); max-width: 22ch; font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem); line-height: 1.2; color: var(--forest); }
.contact-preview__left h2 em { color: var(--amber); font-style: italic; font-weight: 500; }
.contact-preview__left p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-top: var(--space-md);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.contact-list__item {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule-light);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-list__item:last-child { border-bottom: 1px solid var(--rule-light); }
.contact-list__item label {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-xs);
}
.contact-list__item a {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.contact-list__item a:hover { color: var(--amber); }
.contact-list__item a.contact-list__item-phone {
  font-size: 1rem;
  font-style: italic;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.25rem;
}
.contact-list__item a.contact-list__item-phone:hover { color: var(--forest); }
.contact-list__item a.contact-list__item-phone::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.52 3.48A11.78 11.78 0 0 0 12.06 0C5.46 0 .12 5.34.12 11.94c0 2.1.55 4.16 1.6 5.97L0 24l6.27-1.64a11.94 11.94 0 0 0 5.78 1.47h.01c6.6 0 11.94-5.34 11.94-11.94 0-3.19-1.24-6.19-3.48-8.41zM12.06 21.86h-.01a9.94 9.94 0 0 1-5.06-1.39l-.36-.21-3.72.97 1-3.62-.24-.37a9.92 9.92 0 0 1-1.51-5.3c0-5.49 4.47-9.96 9.96-9.96a9.9 9.9 0 0 1 7.04 2.92 9.9 9.9 0 0 1 2.92 7.04c0 5.49-4.47 9.96-9.96 9.96zm5.46-7.46c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.1 3.21 5.09 4.5.71.31 1.27.49 1.7.63.71.23 1.36.19 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.52 3.48A11.78 11.78 0 0 0 12.06 0C5.46 0 .12 5.34.12 11.94c0 2.1.55 4.16 1.6 5.97L0 24l6.27-1.64a11.94 11.94 0 0 0 5.78 1.47h.01c6.6 0 11.94-5.34 11.94-11.94 0-3.19-1.24-6.19-3.48-8.41zM12.06 21.86h-.01a9.94 9.94 0 0 1-5.06-1.39l-.36-.21-3.72.97 1-3.62-.24-.37a9.92 9.92 0 0 1-1.51-5.3c0-5.49 4.47-9.96 9.96-9.96a9.9 9.9 0 0 1 7.04 2.92 9.9 9.9 0 0 1 2.92 7.04c0 5.49-4.47 9.96-9.96 9.96zm5.46-7.46c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.1 3.21 5.09 4.5.71.31 1.27.49 1.7.63.71.23 1.36.19 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z'/></svg>") no-repeat center / contain;
}
.contact-list__item span {
  font-size: var(--fs-small);
  color: var(--ink-mute);
}

/* ==========================================================================
   15. FOOTER (forest green per brand rule)
   ========================================================================== */
.site-footer {
  background: var(--forest);
  color: var(--white);
  padding: var(--space-3xl) 0 var(--space-xl);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--champagne) 30%, var(--champagne) 70%, transparent);
}

.footer-top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-xl); }
}

.footer-brand__mark {
  width: 80px;
  height: 80px;
  color: var(--stone);
  margin-bottom: var(--space-lg);
}
.footer-brand__statement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--stone);
  max-width: 32ch;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 var(--space-md) 0;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-col li,
.footer-col a {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--white-70);
  font-family: var(--font-body);
}
.footer-col a:hover { color: var(--champagne); }

.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-lg) var(--gutter) 0;
  border-top: 1px solid var(--white-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 720px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.footer-bottom__legal {
  font-size: var(--fs-xsmall);
  color: var(--white-70);
  font-weight: 500;
  margin: 0;
}
.footer-bottom__disclaimer {
  font-size: var(--fs-xsmall);
  color: var(--white-50);
  font-weight: 300;
  line-height: 1.5;
  max-width: 64ch;
  margin: 0;
}

/* ==========================================================================
   16. Page-level adjustments — push body content past the fixed nav
   ========================================================================== */
main { display: block; }
/* Hero already accounts for the fixed nav via its top padding;
   non-hero pages should add scroll-margin so anchored sections clear it. */
section[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }

/* ==========================================================================
   17. INTERIOR PAGE HERO
   Smaller than homepage hero — typography only, no photo.
   Used on About, Services, Deals, Team, Network, Contact.
   ========================================================================== */
.page-hero {
  background: var(--forest);
  color: var(--white);
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-3xl);
  position: relative;
  overflow: hidden;
}
.page-hero--navy { background: var(--navy); }
.page-hero--stone {
  background: var(--stone);
  color: var(--ink);
}

.page-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--stone);
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 22ch;
}
.page-hero--stone .page-hero__title { color: var(--forest); }
.page-hero__title em {
  color: var(--champagne);
  font-style: italic;
  font-weight: 500;
}
.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--white-90);
  font-weight: 300;
  max-width: 60ch;
}
.page-hero--stone .page-hero__lead { color: var(--ink-soft); }

/* Faint axis line at base of page hero (echoes brand E-W axis) */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(196, 162, 106, 0)   0%,
    rgba(196, 162, 106, 0.3) 35%,
    rgba(196, 162, 106, 0.7) 100%);
  pointer-events: none;
}
.page-hero--stone::after {
  background: linear-gradient(to right,
    rgba(168, 133, 74, 0)   0%,
    rgba(168, 133, 74, 0.3) 35%,
    rgba(168, 133, 74, 0.6) 100%);
}

/* ==========================================================================
   18. PROSE BLOCK
   Wide readable prose for About-style pages.
   ========================================================================== */
.prose {
  max-width: 68ch;
}
.prose p {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}
.prose p:last-child { margin-bottom: 0; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose p em { color: var(--amber); font-style: italic; }
.prose h2 {
  font-size: var(--fs-h2);
  margin: var(--space-2xl) 0 var(--space-lg);
}
.prose h3 {
  font-size: var(--fs-h3);
  margin: var(--space-xl) 0 var(--space-md);
}

.on-green .prose p,
.on-navy .prose p,
.on-forest-dk .prose p { color: var(--white-90); }

/* Pull-quote style for emphasis paragraph */
.prose__pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.4;
  color: var(--forest);
  border-left: 2px solid var(--champagne);
  padding-left: var(--space-lg);
  margin: var(--space-2xl) 0;
  max-width: 56ch;
}
.on-green .prose__pull,
.on-navy .prose__pull,
.on-forest-dk .prose__pull { color: var(--stone); border-left-color: var(--champagne); }

/* ==========================================================================
   19. TEAM CARDS
   Used on team.html — name, title, location, bio, contact.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 720px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }

.team-card {
  background: var(--stone);
  border-top: 2px solid var(--champagne);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.team-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
  margin: var(--space-xs) 0 0 0;
}
.team-card__location {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--amber);
  margin-bottom: var(--space-md);
}
.team-card__bio {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}
.team-card__pedigree {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-mute);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-light);
  margin-bottom: var(--space-md);
}
.team-card__pedigree strong { color: var(--ink); font-weight: 500; }
.team-card__email {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--forest);
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.team-card__email:hover { color: var(--amber); }

/* ==========================================================================
   20. SECTOR LIST (services.html)
   Four sector verticals — clean numbered list.
   ========================================================================== */
.sector-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sector {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--rule-light);
  align-items: baseline;
}
.sector:last-child { border-bottom: 1px solid var(--rule-light); }
.on-green .sector,
.on-navy .sector,
.on-forest-dk .sector { border-top-color: var(--rule-dark); }
.on-green .sector:last-child,
.on-navy .sector:last-child,
.on-forest-dk .sector:last-child { border-bottom-color: var(--rule-dark); }

.sector__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--champagne);
  letter-spacing: 0.04em;
  min-width: 2.5ch;
}
.sector__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 var(--space-sm) 0;
}
.on-green .sector__name,
.on-navy .sector__name,
.on-forest-dk .sector__name { color: var(--stone); }
.sector__desc {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}
.on-green .sector__desc,
.on-navy .sector__desc,
.on-forest-dk .sector__desc { color: var(--white-70); }

/* ==========================================================================
   21. EXPANDED DEAL CARD (deals.html)
   Same as homepage deal-card but designed to look balanced when listing
   all 8 engagements in a 2-column grid with longer descriptors.
   ========================================================================== */
.deals-grid--full { gap: 1px; }
.deals-grid--full .deal-card {
  min-height: 280px;
  padding: var(--space-2xl) var(--space-xl);
}

/* ==========================================================================
   22b. ABOUT — single-screen, single-column
   One consolidated section containing everything: eyebrow + headline +
   body + numbered differentiators + Backgrounds + wayfinding.
   ========================================================================== */
.about-single {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-md));
  padding-bottom: var(--space-lg);
}
.about-single__inner {
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter);
}
/* Wider container when the inner uses a 2-col grid (about / contact). */
.about-single__inner:has(.about-grid) {
  max-width: 1180px;
}
.about-single__inner:has(.contact-preview) {
  max-width: 1280px;
}
.about-single__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 600;
  color: var(--forest);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 22ch;
}
.about-single__title em {
  color: var(--amber);
  font-style: italic;
  font-weight: 500;
}
.about-single__body {
  margin-bottom: var(--space-md);
}
.about-single__body p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-md) 0;
  max-width: 64ch;
}
.about-single__body p:last-child { margin-bottom: 0; }

/* Numbered differentiator strip */
.about-diff {
  list-style: none;
  margin: 0 0 var(--space-xl) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.about-diff__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule-light);
  align-items: baseline;
}
.about-diff__item:last-child { border-bottom: 1px solid var(--rule-light); }
.about-diff__num {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.04em;
  min-width: 2.4ch;
}
.about-diff__item h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 0.2rem 0;
  line-height: 1.3;
}
.about-diff__item p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* Backgrounds row (was Pedigree) */
.about-backgrounds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: var(--space-md);
}
.about-backgrounds__label {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin-right: 0.5rem;
}
.about-backgrounds__firm {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.about-backgrounds__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne);
  display: inline-block;
}

.about-single__cta { margin: 0; }

@media (max-width: 720px) {
  .about-single { min-height: auto; }
  .about-diff__item { grid-template-columns: 1fr; gap: var(--space-xs); }
  .about-diff__num { font-size: 0.8125rem; }
}

/* --- Two-column variant: prose left, stats + differentiator boxes right --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 960px) {
  .about-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-3xl);
  }
}
.about-grid__main { min-width: 0; }
.about-grid__side { min-width: 0; }

/* When inside the two-col grid, the title and body shouldn't have their own
   max-width capping — the column width does the capping. */
.about-grid__main .about-single__title { max-width: none; }
.about-grid__main .about-single__body p { max-width: none; }

/* Stats row at top of right column */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--rule-light);
}
.about-stat {
  padding: 0 var(--space-md);
  border-left: 1px solid var(--rule-light);
}
.about-stat:first-child { border-left: 0; padding-left: 0; }
.about-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 0.95rem + 1.4vw, 1.875rem);
  line-height: 1.05;
  color: var(--forest);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}
.about-stat__num em {
  color: var(--amber);
  font-style: italic;
  font-weight: 500;
}
.about-stat__lbl {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.3;
}

/* Differentiator boxes */
.diff-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.diff-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--rule-light-strong);
  background: rgba(255, 255, 255, 0.45);
  transition: border-color var(--t-med) var(--ease),
              background var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
  align-items: baseline;
}
.diff-box:hover {
  border-color: var(--champagne);
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}
.diff-box__num {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.04em;
  min-width: 2.4ch;
}
.diff-box h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}
.diff-box p {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
/* Inline tag for box headings (e.g. "Primary focus" on Capital Raising) */
.diff-box__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin-left: 0.5rem;
  vertical-align: 0.18em;
  font-style: normal;
}

/* ==========================================================================
   SERVICES — single-screen, forest-green with 4 icon cards
   Distinct visual from About so users register a new section.
   ========================================================================== */
.services-screen {
  background: var(--forest);
  color: var(--white);
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + var(--space-md));
  padding-bottom: var(--space-lg);
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.services-screen::after {
  /* Faint axis hairline at base — echoes the brand E-W axis. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(196, 162, 106, 0)   0%,
    rgba(196, 162, 106, 0.3) 35%,
    rgba(196, 162, 106, 0.7) 100%);
  pointer-events: none;
}
.services-screen__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}
.services-screen h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--stone);
  margin: 0;
  letter-spacing: -0.005em;
  max-width: 30ch;
}
.services-screen h1 em {
  color: var(--champagne);
  font-style: italic;
  font-weight: 500;
}

/* Tighter card sizing on the single-screen Services page. */
/* Override the homepage's grid behaviour — eyebrow sits above its own row. */
.services-screen .services-head {
  display: block;
  margin-bottom: var(--space-md);
}
.services-screen .services-head .section-label {
  display: inline-block;
  margin-bottom: var(--space-sm);
}
.services-screen .services-head__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 880px) {
  .services-screen .services-head__row {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
}
.services-screen .service-card { padding: var(--space-md); }
.services-screen .service-card h3 { font-size: 1.125rem; margin-bottom: var(--space-xs); }
.services-screen .service-card p { font-size: var(--fs-xsmall); line-height: 1.5; }
.services-screen .service-card__icon { margin-bottom: var(--space-sm); }
.services-screen .service-tags { gap: 0.3rem; margin-top: var(--space-sm); padding-top: var(--space-sm); }
.services-screen .service-tag { padding: 0.2rem 0.45rem; font-size: 0.625rem; }

/* Sectors row + CTA at bottom of page. */
.services-screen__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* When the Backgrounds row is used on a dark surface, recolour it. */
.services-screen .about-backgrounds__label { color: var(--champagne); }
.services-screen .about-backgrounds__firm { color: var(--stone); }

@media (max-width: 1100px) {
  .services-screen { min-height: auto; }
}

/* ==========================================================================
   DEALS — single-screen, navy with 4×2 compact card grid
   ========================================================================== */
.deals-screen {
  background: var(--navy);
  color: var(--white);
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + var(--space-md));
  padding-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.deals-screen::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(196, 162, 106, 0)   0%,
    rgba(196, 162, 106, 0.3) 35%,
    rgba(196, 162, 106, 0.7) 100%);
  pointer-events: none;
}
.deals-screen__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}
.deals-screen h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  line-height: 1.15;
  font-weight: 600;
  color: var(--stone);
  margin: var(--space-md) 0 0;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.deals-screen h1 em {
  color: var(--champagne);
  font-style: italic;
  font-weight: 500;
}

.deals-screen__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
@media (min-width: 880px) {
  .deals-screen__head {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-2xl);
    align-items: end;
  }
}
.deals-screen__intro {
  color: var(--white-70);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.55;
  max-width: 48ch;
}

/* 4×2 compact card grid */
.deals-screen .deals-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .deals-screen .deals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .deals-screen .deals-grid { grid-template-columns: 1fr; }
}

/* Compact card overrides — name + size group at top, role anchored to bottom. */
.deals-screen .deal-card {
  padding: var(--space-sm) var(--space-md);
  min-height: 140px;
  gap: 0;
}
.deals-screen .deal-card__type {
  font-size: 0.625rem;
  margin: 0 0 0.5rem 0;
}
.deals-screen .deal-card__name {
  font-size: 1.0625rem;
  line-height: 1.3;
  max-width: 100%;
  flex: 0 0 auto;          /* override base flex:1 — don't push size away */
  margin: 0 0 0.4rem 0;
}
.deals-screen .deal-card__size {
  font-size: 1rem;
  margin: 0;
}
.deals-screen .deal-card__role {
  font-size: 0.625rem;
  padding-top: var(--space-md);
  margin-top: auto;        /* anchor to card bottom */
  border-top-color: var(--white-10);
}

.deals-screen__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-dark);
}

@media (max-width: 1100px) {
  .deals-screen { min-height: auto; }
}

/* ==========================================================================
   TEAM & PARTNERS — single-screen, stone surface, merged team + advisers + partners
   Layout: header → 2-col (team grid + advisers sidebar) → partners row
   ========================================================================== */
.team-screen {
  background: var(--stone);
  color: var(--ink);
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + var(--space-sm));
  padding-bottom: var(--space-md);
  display: flex;
  align-items: center;
}
.team-screen__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.team-screen h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 600;
  color: var(--forest);
  margin: var(--space-sm) 0 var(--space-sm) 0;
  max-width: 24ch;
}
.team-screen h1 em {
  color: var(--amber);
  font-style: italic;
  font-weight: 500;
}
.team-screen__lead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 var(--space-md) 0;
}

/* Small uppercase header for "WFS Advisory Team" / "Senior Advisers" / "Strategic Partners" */
.team-screen__section-title {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule-light);
}

/* Two-column main: team on left, advisers on right */
.team-screen__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
@media (min-width: 960px) {
  .team-screen__main {
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-xl);
  }
}

/* Team cards 2x2 grid */
.team-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md) var(--space-lg);
}
@media (min-width: 640px) {
  .team-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

.team-card-compact {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--rule-light);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  align-items: start;
}
/* Circular team photo. Initials inside as fallback if image fails. */
.team-card-compact__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(196, 162, 106, 0.4);
  position: relative;
  overflow: hidden;
}
.team-card-compact__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.team-card-compact__body { min-width: 0; }
.team-card-compact__role {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-xs);
}
.team-card-compact__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
  margin: 0;
}
.team-card-compact__location {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--amber);
  margin: 0.25rem 0 var(--space-sm) 0;
}
.team-card-compact__bio {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* Advisers sidebar */
.advisers-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.adviser-card {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule-light-strong);
  background: rgba(255, 255, 255, 0.5);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  align-items: start;
}
.adviser-card:hover {
  border-color: var(--champagne);
  background: rgba(255, 255, 255, 0.8);
}
.adviser-card__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(196, 162, 106, 0.4);
  grid-row: span 3;
  position: relative;
  overflow: hidden;
}
.adviser-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.adviser-card__body { min-width: 0; grid-column: 2; }
.adviser-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
  margin: 0;
}
.adviser-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--amber);
  margin: 0.2rem 0 var(--space-sm) 0;
}
.adviser-card__bio {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* Strategic partners — full-width row below */
.team-screen__partners {
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-light);
}
.partner-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (min-width: 880px) {
  .partner-cards-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
.partner-card {
  padding: 0;
  border-left: 2px solid var(--champagne);
  background: transparent;
}
.partner-card__link {
  display: block;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  height: 100%;
}
.partner-card__link:hover {
  background: rgba(196, 162, 106, 0.06);
}
.partner-card__link:hover .partner-card__visit {
  letter-spacing: 0.2em;
  color: var(--forest);
}
/* Logo placeholder — stylised wordmark. Replace with <img> when actual logo files arrive. */
.partner-card__logo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--rule-light-strong);
  padding: 0.4rem 0.7rem;
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.4);
}
.partner-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
  margin: 0;
}
.partner-card__region {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin: 0.3rem 0 var(--space-sm) 0;
}
.partner-card__focus {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--space-sm) 0;
}
.partner-card__visit {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 3px;
  transition: color var(--t-fast) var(--ease), letter-spacing var(--t-med) var(--ease);
}

@media (max-width: 1100px) {
  .team-screen { min-height: auto; }
}

@media (max-width: 720px) {
  .about-stats { gap: 0; padding-bottom: var(--space-sm); }
  .about-stat { padding: 0 0.5rem; }
  .about-stat:first-child { padding-left: 0; }
  .diff-box { padding: var(--space-md); }
}

/* ==========================================================================
   22. CONTACT BLOCK (contact.html — full version)
   Larger than the homepage preview.
   ========================================================================== */
.contact-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 880px) {
  .contact-block { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
}
.contact-block__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.contact-block__group {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--rule-light);
}
.contact-block__group:last-child { border-bottom: 1px solid var(--rule-light); }
.contact-block__label {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-sm);
}
.contact-block__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--forest);
  font-weight: 500;
  display: inline-block;
  transition: color var(--t-fast) var(--ease);
}
a.contact-block__value:hover { color: var(--amber); }
.contact-block__sub {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin-top: var(--space-xs);
}

/* ---- Mobile polish for logo strips & partner tiles (added) ---- */
@media (max-width: 560px) {
  .pedigree-logo, .bg-logo { height: 18px; max-width: 104px; }
  .partner-card__logo { height: 60px; padding: 10px 14px; }
  .services-screen .services-head__intro { max-width: 100%; }
}


/* ---- Services: sectors band (added) ---- */
.sectors-band { margin-top: var(--space-2xl); }
.sectors-band__head { margin-bottom: var(--space-lg); }
.sectors-band__head h2 { color: var(--stone); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.2; margin-top: var(--space-xs); }
.sectors-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark); }
@media (min-width:720px){ .sectors-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .sectors-grid{ grid-template-columns:repeat(4,1fr); } }
.sector-card { background:var(--forest); padding:var(--space-lg); }
.sector-card h3 { color:var(--stone); font-size:1.0625rem; margin-bottom:var(--space-xs); }
.sector-card p { color:rgba(244,239,230,0.78); font-size:0.9375rem; line-height:1.6; margin:0; }