/* ============================================================
   Bostock Capitals — Beige & White Light Theme
   Warm cream surfaces · bronze metallic accents · soft luminosity
   Liquid glass + 4D icons translated to a light palette.
   ============================================================ */

:root {
  /* Surface palette — blue beige + white */
  --bg-deep:   #d8cdb4;   /* deeper cool beige (footer, accent areas) */
  --bg-mid:    #e8dec7;   /* mid blue-beige */
  --bg-warm:   #f3ecda;   /* soft warm beige */
  --bg-white:  #ffffff;   /* pure white */
  --bg-veil:   rgba(232, 222, 199, 0.55);

  /* Glass tokens — light translucent overlays with cool blue undertones */
  --glass-1:   rgba(255, 255, 255, 0.55);
  --glass-2:   rgba(255, 255, 255, 0.78);
  --glass-edge-top: rgba(255, 255, 255, 0.95);
  --glass-edge-bot: rgba(61, 86, 115, 0.06);
  --glass-inset-top: rgba(255, 255, 255, 0.75);
  --glass-inset-bot: rgba(61, 86, 115, 0.05);

  /* Dusty slate blue accent — sophisticated coastal */
  --accent:        #6f88a1;   /* dusty slate blue */
  --accent-bright: #b8c8d8;   /* pale dusty blue */
  --accent-soft:   #93a8bd;   /* mid dusty blue */
  --accent-deep:   #3d5673;   /* deep slate blue */
  --platinum:      #ffffff;
  --platinum-mid:  #d8cdb4;
  --platinum-deep: #93876c;

  /* Legacy variable aliases (existing rules still reference these) */
  --gold:        var(--accent);
  --gold-bright: var(--accent-bright);
  --gold-soft:   var(--accent-soft);
  --gold-deep:   var(--accent-deep);
  --teal:        var(--accent);
  --teal-bright: #e0c89a;
  --on-gold:     #ffffff;
  --on-accent:   #ffffff;

  /* Text — high-contrast for readability on the beige surfaces */
  --ivory:      #0f1825;   /* near-black navy for headings */
  --text-strong:#08101c;
  --text-soft:  #1f2a3a;   /* darkened for body text */
  --text-mute:  #43505f;   /* darkened for meta, captions, footer text */
  --text-faint: #6e7886;   /* darkened for placeholders / footnotes */

  /* Lines */
  --line:       rgba(61, 86, 115, 0.14);
  --line-soft:  rgba(61, 86, 115, 0.07);
  --line-dark:  rgba(61, 86, 115, 0.28);

  /* Shadows + glows (cool blue) */
  --shadow-glass: 0 8px 30px rgba(61, 86, 115, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-elev:  0 30px 60px -20px rgba(61, 86, 115, 0.22);
  --shadow-pop:   0 14px 40px -10px rgba(61, 86, 115, 0.18);
  --glow-accent:  0 0 50px rgba(111, 136, 161, 0.28);
  --glow-cyan:    0 0 50px rgba(184, 200, 216, 0.30);

  /* Typography */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Geometry */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --max:        1200px;
  --max-narrow: 880px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-soft);
  background:
    radial-gradient(ellipse 80% 60% at 12% 5%,  rgba(184, 200, 216, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 50% at 88% 22%, rgba(216, 205, 180, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 55% at 50% 70%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 95%, rgba(147, 168, 189, 0.20), transparent 60%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-mid) 40%, var(--bg-warm) 70%, var(--bg-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-deep); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
a:hover { color: var(--accent); text-shadow: 0 0 12px rgba(184, 200, 216, 0.5); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 .5em;
}

h1 {
  font-size: clamp(2.4rem, 4.8vw, 4rem); font-weight: 400;
  background: linear-gradient(180deg, #1f2a3a 0%, #3a4655 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 80px rgba(184, 200, 216, 0.35);
}
h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 400; color: var(--ivory); }
h3 { font-size: 1.4rem; color: var(--ivory); }
h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.02em; color: var(--text-strong); }

p { margin: 0 0 1em; max-width: 65ch; color: var(--text-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  text-shadow: 0 0 24px rgba(111, 136, 161, 0.25);
}
.eyebrow--light {
  background: linear-gradient(90deg, var(--accent-bright), var(--platinum));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--max-narrow); }
section { padding: 96px 0; position: relative; }
section.tight { padding: 64px 0; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent-deep); color: var(--bg-white);
  padding: .75rem 1rem; z-index: 1000; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glass);
}
.skip:focus { left: 12px; top: 12px; }

/* ============================================================
   GLASS HEADER + TOPBAR (light)
   ============================================================ */
/* ---------- Cayman Islands themed topbar ---------- */
.topbar {
  background:
    radial-gradient(ellipse 80% 100% at 20% 50%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #012169 0%, #00164a 100%);
  color: #d8e0ee;
  font-size: .82rem;
  padding: 11px 0 13px;
  position: relative; z-index: 60;
  border-bottom: none;
}
/* Tri-color flag stripe at the bottom of the topbar */
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background:
    linear-gradient(90deg,
      #C8102E 0%, #C8102E 33.33%,
      #ffffff 33.33%, #ffffff 66.66%,
      #012169 66.66%, #012169 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.topbar-left {
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; letter-spacing: 0.01em;
}
.topbar-left span { white-space: nowrap; }
.topbar-left strong {
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #d8e0ee 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(255,255,255,0.4);
  padding: 0 2px;
}
.topbar a {
  color: #c2cee0;
  position: relative;
  transition: color .15s ease, text-shadow .15s ease;
}
.topbar a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255,255,255,0.45);
}
.topbar-right { display: flex; gap: 20px; align-items: center; }
.topbar-right a:not(:last-child)::after {
  content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: rgba(255,255,255,0.20);
}
/* The inline Cayman flag SVG */
.cayman-flag {
  width: 30px; height: 15px;
  display: block; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 2px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: hidden;
}
@media (max-width: 760px) {
  .topbar-left { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .topbar-left span { white-space: normal; text-align: center; }
}

.site-header {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  color: var(--ivory);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 8px 24px rgba(61, 86, 115, 0.10);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
  gap: 28px;
  max-width: 1420px;
}

/* ---------- Brand (real logo, shown BOLDLY) ---------- */
.brand {
  display: flex; align-items: center; gap: 16px;
  color: var(--ivory); font-family: var(--font-serif);
  font-size: 1.65rem; font-weight: 600; letter-spacing: -0.005em;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.brand span {
  white-space: nowrap;
  background: linear-gradient(180deg, #1f2a3a 0%, #3a4655 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand:hover { text-shadow: 0 2px 22px rgba(111, 136, 161, 0.45); }
.brand-logo {
  height: 64px; width: auto; display: block;
  filter:
    drop-shadow(0 4px 14px rgba(61, 86, 115, 0.25))
    drop-shadow(0 0 22px rgba(184, 200, 216, 0.35));
  flex-shrink: 0;
}
.brand-sub {
  font-family: var(--font-sans); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 600;
  padding-left: 14px; border-left: 1px solid var(--line);
  align-self: center;
  white-space: nowrap;
  display: none;
}
@media (min-width: 1600px) { .brand-sub { display: inline-block; } }

/* Legacy 4D monogram (fallback) */
.brand-mark {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600;
  color: var(--bg-white);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 50%),
    linear-gradient(160deg, var(--accent-bright) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 4px rgba(61, 86, 115, 0.28),
    0 6px 16px rgba(111, 136, 161, 0.35);
}

/* ---------- Navigation ---------- */
nav.primary {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
nav.primary ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 20px; align-items: center;
  flex-wrap: nowrap;
}
nav.primary li { flex-shrink: 0; }
nav.primary a {
  color: var(--text-strong); font-size: .88rem; font-weight: 500;
  position: relative; padding: 8px 2px;
  transition: color .2s ease;
  white-space: nowrap;
}
nav.primary a:hover { color: var(--accent-deep); text-shadow: 0 0 12px rgba(184, 200, 216, 0.4); }
nav.primary a.active {
  background: linear-gradient(180deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
nav.primary a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px rgba(111, 136, 161, 0.6);
}

/* ---------- 4D Gel Nav Button (warm bronze) ---------- */
.btn-nav {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
  color: var(--bg-white) !important;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    0 8px 22px -4px rgba(61, 86, 115, 0.45),
    0 0 28px -8px rgba(184, 200, 216, 0.4);
  text-shadow: 0 1px 0 rgba(61, 86, 115, 0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-nav:hover {
  transform: translateY(-1px);
  color: var(--bg-white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    0 12px 28px -4px rgba(61, 86, 115, 0.55),
    0 0 36px -8px rgba(184, 200, 216, 0.5);
}
.btn-nav::before {
  content: ""; position: absolute; inset: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
  border-radius: 999px; pointer-events: none;
}

.nav-toggle {
  display: none; background: rgba(255,255,255,0.6); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ivory); width: 44px; height: 44px; cursor: pointer;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glass);
  font-size: 1.2rem;
}

/* ============================================================
   4D BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  font-family: var(--font-sans);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: ""; position: absolute; inset: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 55%);
  pointer-events: none;
}
.btn-primary {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45), transparent 50%),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--bg-white);
  border-color: rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    0 10px 26px -6px rgba(61, 86, 115, 0.45),
    0 0 34px -10px rgba(184, 200, 216, 0.50);
  text-shadow: 0 1px 0 rgba(61, 86, 115, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  color: var(--bg-white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    0 14px 32px -6px rgba(61, 86, 115, 0.55),
    0 0 44px -10px rgba(184, 200, 216, 0.60);
}

.btn-outline {
  background: var(--glass-2);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--ivory);
  border-color: var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 8px 22px -8px rgba(61, 86, 115, 0.20);
}
.btn-outline:hover {
  background: var(--bg-white);
  color: var(--accent-deep);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 12px 28px -8px rgba(61, 86, 115, 0.28),
    0 0 22px -6px rgba(184, 200, 216, 0.4);
}

.btn-outline-dark {
  background: var(--glass-2);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--ivory);
  border-color: var(--line-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(61, 86, 115, 0.15);
}
.btn-outline-dark:hover { background: var(--bg-white); color: var(--accent-deep); transform: translateY(-2px); }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   HERO (light)
   ============================================================ */
.hero {
  padding: 150px 0 120px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle 800px at 25% 30%, rgba(184, 200, 216, 0.35), transparent 60%),
    radial-gradient(circle 700px at 75% 60%, rgba(111, 136, 161, 0.18), transparent 60%),
    radial-gradient(circle 500px at 50% 95%, rgba(255, 255, 255, 0.50), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(61, 86, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 86, 115, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 50%, transparent 100%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 26px; max-width: 18ch; }
.hero p.lede {
  font-size: 1.25rem; color: var(--text-soft);
  max-width: 56ch; margin-bottom: 38px; line-height: 1.55;
}
.hero-meta {
  display: flex; gap: 56px; margin-top: 52px; padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glass);
  flex-wrap: wrap;
}
.hero-meta-item { display: flex; flex-direction: column; }
.hero-meta-value {
  font-family: var(--font-serif); font-size: 2.4rem;
  background: linear-gradient(180deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(111, 136, 161, 0.25);
}
.hero-meta-label {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header {
  padding: 110px 0 80px; position: relative; overflow: hidden;
}
.page-header::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle 600px at 80% 20%, rgba(184, 200, 216, 0.25), transparent 60%),
    radial-gradient(circle 500px at 20% 80%, rgba(184, 200, 216, 0.25), transparent 60%);
  filter: blur(30px); pointer-events: none;
}
.page-header .container { position: relative; z-index: 2; }
.page-header h1 { margin-bottom: 18px; }
.page-header p { color: var(--text-soft); font-size: 1.18rem; max-width: 60ch; }
.crumbs { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 18px; font-weight: 600; }
.crumbs a { color: var(--text-mute); }
.crumbs a:hover { color: var(--accent-deep); }

/* ============================================================
   GLASS CARDS
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 36px -10px rgba(61, 86, 115, 0.18);
}
.card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 50%);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 18px 48px -12px rgba(61, 86, 115, 0.25),
    0 0 24px -8px rgba(184, 200, 216, 0.40);
}
.card .num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  background: linear-gradient(180deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(111, 136, 161, 0.25);
  display: block; margin-bottom: 12px; font-weight: 500;
}
.card h3 { margin-bottom: 12px; color: var(--ivory); }
.card p { color: var(--text-soft); margin: 0; }

/* ============================================================
   SPLIT
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.split-img {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(184, 200, 216, 0.45), rgba(216, 205, 180, 0.55));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elev), inset 0 1px 0 rgba(255,255,255,0.7);
  position: relative; overflow: hidden;
}
.split-img::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111, 136, 161, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 136, 161, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
}
.split-img.gold-tint, .split-img.cyan-tint { background: linear-gradient(135deg, rgba(111, 136, 161, 0.35), rgba(253, 250, 242, 0.6)); }
.split-img.teal-tint { background: linear-gradient(135deg, rgba(184, 200, 216, 0.50), rgba(253, 250, 242, 0.65)); }
.split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-elev); border: 1px solid var(--line); }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats { padding: 70px 0; position: relative; }
.stats .container > .grid-4 {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 40px 24px;
  box-shadow: var(--shadow-glass), var(--shadow-elev);
  gap: 0;
}
.stat-cell { text-align: center; padding: 0 20px; border-right: 1px solid var(--line-soft); }
.stat-cell:last-child { border-right: none; }
.stat-val {
  font-family: var(--font-serif); font-size: 2.8rem;
  background: linear-gradient(180deg, var(--accent-deep) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 10px;
  text-shadow: 0 0 24px rgba(111, 136, 161, 0.28);
  font-weight: 500;
}
.stat-lbl { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }

/* ============================================================
   Section title + bg variants
   ============================================================ */
.section-title { margin-bottom: 56px; max-width: 760px; }
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title p { font-size: 1.1rem; color: var(--text-soft); }

.bg-ivory, .bg-paper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(253, 250, 242, 0.4));
  position: relative;
}
.bg-ivory::before, .bg-paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 70% 30%, rgba(184, 200, 216, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(255, 255, 255, 0.5), transparent 60%);
}
.bg-ivory > .container, .bg-paper > .container { position: relative; z-index: 1; }

/* Dark accent section: deep navy for contrast */
.bg-navy {
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(111, 136, 161, 0.25), transparent 60%),
    linear-gradient(180deg, #1c2735 0%, #2c3a4d 50%, #1c2735 100%);
  color: #d2dae5;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* ---- comprehensive readability overrides for dark sections ---- */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #ffffff; }
.bg-navy p, .bg-navy li { color: #d2dae5; }
.bg-navy strong { color: #ffffff; }
.bg-navy .section-title p { color: #c2cdda; }
.bg-navy .eyebrow {
  background: linear-gradient(90deg, var(--accent-bright) 0%, #ffffff 50%, var(--accent-bright) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(184, 200, 216, 0.35);
}
.bg-navy a { color: var(--accent-bright); }
.bg-navy a:hover { color: #ffffff; text-shadow: 0 0 14px rgba(184, 200, 216, 0.6); }
.bg-navy .form-note,
.bg-navy .crumbs,
.bg-navy .crumbs a { color: #b0bbcc; }
.bg-navy .post-meta,
.bg-navy .article-meta,
.bg-navy .who-role,
.bg-navy .stat-lbl { color: #b0bbcc; }
.bg-navy .num,
.bg-navy .stat-val,
.bg-navy .hero-meta-value {
  background: linear-gradient(180deg, var(--accent-bright), #ffffff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(184, 200, 216, 0.45);
}
.bg-navy .card,
.bg-navy .testimonial,
.bg-navy .post-card,
.bg-navy .strategy {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: #d2dae5;
}
.bg-navy .card h3,
.bg-navy .testimonial blockquote,
.bg-navy .post-card h3 a { color: #ffffff; }
.bg-navy .card p,
.bg-navy .post-card p { color: #c2cdda; }
.bg-navy .testimonial .who-name { color: #ffffff; }
.bg-navy .btn-outline,
.bg-navy .btn-outline-dark {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.30);
}
.bg-navy .btn-outline:hover,
.bg-navy .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  border-color: var(--accent-bright);
}
/* feature-list inside dark sections */
.bg-navy .feature-list li { border-bottom-color: rgba(255,255,255,0.08); }
.bg-navy .feature-list .marker { color: #ffffff; }

/* Case-side block (dark navy strip on portfolio.html) */
.case-side a { color: var(--accent-bright); }
.case-side a:hover { color: #ffffff; }
.case-side strong:not(.case-stats strong) { color: #ffffff; }

/* CTA band: text on glass over the body bg — explicit so the band reads on
   both light and dark page contexts */
.cta-band p { color: var(--text-soft); }
.cta-band h2 { color: var(--ivory); }

/* ============================================================
   4D Feature-list markers
   ============================================================ */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  padding: 22px 0; border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list .marker {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1rem; font-weight: 600;
  color: var(--bg-white);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.18),
    0 6px 16px -2px rgba(61, 86, 115, 0.38),
    0 0 18px -4px rgba(184, 200, 216, 0.40);
  text-shadow: 0 1px 1px rgba(61, 86, 115, 0.38);
}
.feature-list .marker::after {
  content: ""; position: absolute; top: 2px; left: 5px; right: 5px;
  height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
}
.feature-list strong { display: block; color: var(--ivory); margin-bottom: 4px; font-weight: 600; }
.feature-list span.desc { color: var(--text-soft); font-size: .95rem; }

/* In dark sections, light the marker against the dark bg */
.bg-navy .feature-list strong { color: #ffffff; }
.bg-navy .feature-list span.desc { color: #d2dae5; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-glass), var(--shadow-pop);
}
.testimonial::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 14px rgba(111, 136, 161, 0.45);
}
.testimonial blockquote {
  margin: 0 0 20px; font-family: var(--font-serif);
  font-size: 1.22rem; color: var(--ivory); line-height: 1.45; font-weight: 400;
}
.testimonial blockquote::before { content: '"'; color: var(--accent); margin-right: 4px; font-size: 1.3em; }
.testimonial blockquote::after { content: '"'; color: var(--accent); margin-left: 2px; font-size: 1.3em; }
.testimonial .who { display: flex; align-items: center; gap: 14px; }
.testimonial .avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(160deg, var(--accent-bright), var(--accent) 50%, var(--accent-deep));
  color: var(--bg-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(61, 86, 115, 0.2),
    0 4px 14px rgba(111, 136, 161, 0.35);
  text-shadow: 0 1px 0 rgba(61, 86, 115, 0.38);
}
.testimonial .who-meta { line-height: 1.3; }
.testimonial .who-name { font-weight: 600; color: var(--ivory); }
.testimonial .who-role { font-size: .85rem; color: var(--text-mute); }
.testimonial .stars {
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 2px; font-size: .92rem; margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(111, 136, 161, 0.3);
}

/* ============================================================
   TEAM (light glass portraits)
   ============================================================ */
.team-card { text-align: left; }
.team-portrait {
  aspect-ratio: 3/4; margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(184, 200, 216, 0.50), transparent 60%),
    linear-gradient(160deg, rgba(253, 250, 242, 0.9), rgba(221, 210, 187, 0.6));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elev), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative; overflow: hidden;
}
.team-portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 40%);
  pointer-events: none;
}
.team-portrait .monogram {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 4rem;
  background: linear-gradient(180deg, var(--accent-deep), var(--accent) 60%, var(--accent-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 50px rgba(111, 136, 161, 0.35);
  font-weight: 500;
}
.team-card h3 { margin-bottom: 4px; }
.team-card .role {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
  font-weight: 600;
}
.team-card p { font-size: .95rem; color: var(--text-soft); }

/* ============================================================
   INSIGHTS / POST CARDS
   ============================================================ */
.post-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: var(--shadow-glass), 0 10px 28px -10px rgba(61, 86, 115, 0.18);
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-glass), 0 18px 48px -12px rgba(61, 86, 115, 0.25), 0 0 24px -8px rgba(184, 200, 216, 0.4);
}
.post-thumb {
  aspect-ratio: 16/9;
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
}
.post-thumb::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
}
.post-thumb .topic {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--accent-deep);
  padding: 7px 14px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(61, 86, 115, 0.2);
}
.post-body { padding: 26px; }
.post-meta { font-size: .78rem; color: var(--text-mute); margin-bottom: 10px; letter-spacing: .04em; font-weight: 500; }
.post-card h3 { margin: 0 0 12px; font-size: 1.25rem; }
.post-card h3 a { color: var(--ivory); }
.post-card h3 a:hover { color: var(--accent-deep); text-shadow: 0 0 10px rgba(184, 200, 216, 0.4); }
.post-card p { color: var(--text-soft); font-size: .95rem; margin: 0 0 14px; }
.post-readmore {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-hero {
  height: 380px;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elev);
}
.article-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
}
.article-body { max-width: 720px; margin: 56px auto 0; }
.article-body p { font-size: 1.08rem; line-height: 1.75; color: var(--text-soft); margin-bottom: 1.25em; }
.article-body h2 { font-size: 1.7rem; margin: 56px 0 18px; color: var(--ivory); }
.article-body h3 { font-size: 1.25rem; margin: 36px 0 14px; color: var(--ivory); }
.article-body blockquote {
  margin: 32px 0; padding: 24px 28px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif); font-size: 1.2rem; color: var(--ivory);
}
.article-meta {
  color: var(--text-mute); font-size: .85rem; letter-spacing: .04em;
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.article-meta .dot { color: var(--accent); }
.article-tag {
  display: inline-block;
  background: rgba(184, 200, 216, 0.28); color: var(--accent-deep);
  border: 1px solid rgba(111, 136, 161, 0.35);
  padding: 5px 12px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; font-weight: 600;
}

/* ============================================================
   STRATEGY panels
   ============================================================ */
.strategy {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-glass), 0 12px 32px -10px rgba(61, 86, 115, 0.18);
}
.strategy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 50%);
}
.strategy .badge {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--bg-white);
  padding: 7px 16px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700;
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  box-shadow: 0 4px 14px rgba(61, 86, 115, 0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(61, 86, 115, 0.4);
}
.strategy h3 { margin-bottom: 8px; }
.strategy .tag {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 16px; font-weight: 600;
}
.strategy p { color: var(--text-soft); }
.strategy ul { list-style: none; padding: 0; margin: 16px 0 0; }
.strategy ul li { padding: 9px 0 9px 22px; position: relative; font-size: .94rem; color: var(--text-soft); }
.strategy ul li::before {
  content: "→"; position: absolute; left: 0;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.strategy ul li strong { color: var(--ivory); }

/* Strategy variants on dark accent areas */
.strategy[style*="navy"] {
  background: linear-gradient(180deg, #1c2735, #2c3a4d) !important;
  color: #d6cdb4 !important;
}
.strategy[style*="navy"] h3 { color: #ffffff !important; }
.strategy[style*="navy"] p,
.strategy[style*="navy"] ul li { color: #c2cdda !important; }
.strategy[style*="navy"] strong { color: #ffffff !important; }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 290px 1fr; gap: 0; overflow: hidden;
  margin-bottom: 28px;
  box-shadow: var(--shadow-glass), 0 12px 32px -12px rgba(61, 86, 115, 0.18);
}
.case-side {
  background: linear-gradient(180deg, #1c2735, #2c3a4d);
  color: #ffffff;
  padding: 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between;
}
.case-side h3 { color: #ffffff; margin-bottom: 4px; }
.case-side .case-meta {
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600;
}
.case-stats { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-stats div { font-size: .72rem; color: #c2cdda; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.case-stats strong {
  display: block;
  font-family: var(--font-serif);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 1.4rem; letter-spacing: 0; text-transform: none; margin-top: 4px; font-weight: 500;
}
.case-body { padding: 32px; }
.case-body h4 { color: var(--text-mute); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin: 20px 0 6px; font-weight: 600; }
.case-body h4:first-child { margin-top: 0; }
.case-body p { font-size: .95rem; color: var(--text-soft); margin: 0 0 8px; }

/* ============================================================
   CTA BAND (light)
   ============================================================ */
.cta-band { text-align: center; padding: 110px 0; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle 600px at 30% 50%, rgba(184, 200, 216, 0.35), transparent 60%),
    radial-gradient(circle 500px at 75% 50%, rgba(255, 255, 255, 0.50), transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.cta-band .container--narrow {
  position: relative; z-index: 2;
  padding: 60px 40px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass), var(--shadow-elev);
}
.cta-band h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-band p { color: var(--text-soft); max-width: 50ch; margin-left: auto; margin-right: auto; font-size: 1.1rem; margin-bottom: 32px; }
.cta-band .btn-row { justify-content: center; }

/* ============================================================
   FORM
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: .82rem; font-weight: 600; color: var(--ivory); letter-spacing: .03em; }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--line);
  padding: 13px 16px;
  font-family: var(--font-sans); font-size: 1rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ivory);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #8b94a3; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(184, 200, 216, 0.28), 0 0 18px rgba(184, 200, 216, 0.20);
}
.form-field select option { background: #ffffff; color: var(--ivory); }
.form-note { font-size: .82rem; color: var(--text-mute); }

/* details / FAQ */
details { border-bottom: 1px solid var(--line); padding: 20px 0; }
details summary {
  cursor: pointer; font-weight: 600; color: var(--ivory); font-size: 1.05rem;
  list-style: none; position: relative; padding-right: 32px;
  transition: color .2s ease;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 0; top: -2px;
  color: var(--accent-deep); font-size: 1.5rem; font-weight: 300;
  transition: transform .2s ease;
}
details[open] summary::after { content: "−"; }
details summary:hover { color: var(--accent-deep); }
details p { color: var(--text-soft); margin-top: 14px; }

/* table */
table {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glass) !important;
}
table thead tr { background: linear-gradient(180deg, #1c2735, #2c3a4d) !important; }
table thead th { color: #ffffff !important; }
table tbody tr { border-bottom: 1px solid var(--line-soft) !important; }
table tbody td { color: var(--text-soft); }
table tbody td strong { color: var(--ivory); }

/* ============================================================
   FOOTER (warm sand)
   ============================================================ */
.site-footer {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184, 200, 216, 0.35), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 100%);
  color: var(--text-soft);
  padding: 80px 0 24px;
  border-top: 1px solid var(--line);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand { font-family: var(--font-serif); color: var(--ivory); font-size: 1.5rem; margin-bottom: 12px; }
.footer-brand-sub {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600;
}
.site-footer h5 {
  font-family: var(--font-sans); color: var(--ivory);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul a { color: var(--text-soft); font-size: .92rem; }
.site-footer ul a:hover { color: var(--accent-deep); }

/* 4D social icon buttons */
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,0.7), rgba(253, 250, 242, 0.9));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--line);
  color: var(--accent-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 2px rgba(61, 86, 115, 0.12),
    0 6px 14px rgba(61, 86, 115, 0.15);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a::after {
  content: ""; position: absolute; top: 2px; left: 5px; right: 5px; height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  border-radius: 50%;
  pointer-events: none;
}
.footer-social a:hover {
  transform: translateY(-2px);
  color: var(--accent-deep);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 10px 22px rgba(61, 86, 115, 0.28),
    0 0 24px rgba(184, 200, 216, 0.40);
}
.footer-social svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 1px rgba(61, 86, 115, 0.2)); }

.disclosure {
  font-size: .78rem; color: var(--text-mute); line-height: 1.6;
  padding: 24px 0; border-top: 1px solid var(--line);
  max-width: 100%;
}
.disclosure strong { color: var(--ivory) !important; }
.copyright {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--text-mute); flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   Utility
   ============================================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ============================================================
   REVIEW GALLERY (masonry columns)
   ============================================================ */
.review-gallery { column-count: 3; column-gap: 20px; }
@media (max-width: 1000px) { .review-gallery { column-count: 2; } }
@media (max-width: 640px)  { .review-gallery { column-count: 1; } }
.review-gallery figure {
  margin: 0 0 20px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glass), 0 12px 28px -10px rgba(61, 86, 115, 0.18);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: block;
}
.review-gallery figure:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--accent);
  box-shadow: var(--shadow-glass), 0 16px 36px -10px rgba(61, 86, 115, 0.25), 0 0 28px -8px rgba(184, 200, 216, 0.4);
}
.review-gallery a { display: block; }
.review-gallery img { width: 100%; height: auto; display: block; }

/* ============================================================
   Legal pages
   ============================================================ */
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body h2 { font-size: 1.5rem; margin: 48px 0 16px; color: var(--ivory); }
.legal-body h3 { font-size: 1.15rem; margin: 32px 0 12px; color: var(--ivory); }
.legal-body p, .legal-body li { color: var(--text-soft); line-height: 1.75; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--ivory); }
.legal-toc {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 40px;
}
.legal-toc h4 { margin: 0 0 12px; color: var(--ivory); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.legal-toc ul { list-style: none; padding: 0; margin: 0; }
.legal-toc li { margin-bottom: 6px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1500px) {
  nav.primary ul { gap: 16px; }
  nav.primary a { font-size: .85rem; }
}
@media (max-width: 1360px) {
  nav.primary ul { gap: 14px; }
  nav.primary a { font-size: .82rem; }
  .btn-nav { padding: 8px 14px; font-size: .82rem !important; }
  .brand { font-size: 1.45rem; }
  .brand-logo { height: 56px; }
}
@media (max-width: 1240px) {
  nav.primary {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    padding: 16px 24px;
    display: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
    box-shadow: 0 12px 30px rgba(61, 86, 115, 0.15);
  }
  nav.primary.open { display: block; }
  nav.primary ul { flex-direction: column; align-items: stretch; gap: 4px; flex-wrap: wrap; }
  nav.primary a { padding: 12px 0; display: block; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .btn-nav { padding: 12px 20px !important; font-size: .9rem !important; }
}
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats .container > .grid-4 .stat-cell { padding-bottom: 24px; }
  .stats .container > .grid-4 .stat-cell:nth-child(2n) { border-right: none; }
}
@media (max-width: 760px) {
  section { padding: 64px 0; }
  .hero { padding: 96px 0 80px; }
  .hero-meta { gap: 28px; padding: 24px; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-img { aspect-ratio: 4/3; }
  .form-grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-cell { border-right: none; padding-bottom: 28px; }
  .topbar .container { justify-content: center; }
  .copyright { flex-direction: column; text-align: center; }
  .cta-band .container--narrow { padding: 40px 24px; }
  .brand { font-size: 1.25rem; gap: 12px; }
  .brand-logo { height: 48px; }
}

/* ============================================================
   Focus + reduced motion
   ============================================================ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Backdrop-filter fallback
   ============================================================ */
@supports not (backdrop-filter: blur(10px)) {
  .site-header, .topbar { background: rgba(255, 255, 255, 0.96); }
  .site-footer { background: var(--bg-deep); }
  .card, .strategy, .testimonial, .post-card, .case, .hero-meta { background: #ffffff; }
}


/* ============================================================
   Press strip + press feature (Forbes-style cover)
   ============================================================ */
.press-strip {
  padding: 56px 0 64px;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.30));
}
.press-strip__label {
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 28px;
}
.press-strip__row {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(28px, 6vw, 64px);
  flex-wrap: wrap;
}
.press-mark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--ivory);
  opacity: 1;
  transition: opacity .2s ease, transform .2s ease;
  text-decoration: none;
  position: relative;
  padding: 4px 6px;
}
.press-mark:hover { transform: translateY(-1px); color: var(--accent-deep); }
.press-mark--forbes      { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; }
.press-mark--yahoo       { font-weight: 700; font-style: italic; }
.press-mark--benzinga    { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.press-mark--marketwatch { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -0.005em; }
.press-mark--marketwatch::first-letter { color: var(--accent-deep); }

/* Press feature block (Forbes cover style) */
.press-feature {
  display: grid; grid-template-columns: 5fr 7fr; gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glass), var(--shadow-elev);
}
.press-feature__img {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,0.85), rgba(232,222,199,0.55));
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  overflow: hidden;
}
.press-feature__img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow:
    0 18px 40px -10px rgba(15, 24, 37, 0.35),
    0 0 0 1px rgba(15, 24, 37, 0.06);
}
@media (max-width: 860px) {
  .press-feature__img { padding: 20px; min-height: auto; }
  .press-feature__img img { max-height: 520px; }
}
.press-feature__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.20) 100%);
}
.press-feature__badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: rgba(255,255,255,0.92);
  color: var(--ivory);
  padding: 6px 12px;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.press-feature__body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.press-feature__meta {
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700; margin-bottom: 18px;
}
.press-feature__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.18;
  font-weight: 500;
  color: var(--ivory);
  margin: 0 0 22px;
}
.press-feature__excerpt { font-size: 1rem; color: var(--text-soft); margin-bottom: 28px; max-width: 50ch; }
.press-feature__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-deep);
}
.press-feature__cta:hover { color: var(--accent); }
@media (max-width: 860px) {
  .press-feature { grid-template-columns: 1fr; }
  .press-feature__img { min-height: 360px; }
  .press-feature__body { padding: 32px 28px; }
}


/* ============================================================
   Founder presentation banner (full-bleed)
   ============================================================ */
.founder-band {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0c1320;
}
.founder-band__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: cover;
  object-position: center 25%;
}
.founder-band__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 56px 0 48px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(15, 24, 37, 0.65) 50%,
    rgba(15, 24, 37, 0.90) 100%
  );
  color: #ffffff;
}
.founder-band__overlay .eyebrow,
.founder-band__overlay .eyebrow--light {
  background: linear-gradient(90deg, #ffffff, #d2dae5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}
.founder-band__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: #ffffff;
  margin: 8px 0 14px;
  max-width: 32ch;
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.founder-band__caption {
  font-size: .98rem;
  color: #e2e6ee;
  max-width: 60ch;
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .founder-band__img { max-height: 520px; }
  .founder-band__overlay { padding: 36px 0 28px; }
}
@media (max-width: 560px) {
  .founder-band__img { max-height: 380px; object-position: center 30%; }
}


/* ============================================================
   Hero split layout (text + presentation photo)
   ============================================================ */
.hero--split { padding: 100px 0 80px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-copy h1 { margin-bottom: 22px; max-width: 18ch; }
.hero-copy .lede {
  font-size: 1.18rem;
  color: var(--text-soft);
  max-width: 48ch;
  margin-bottom: 32px;
  line-height: 1.55;
}

.hero-photo {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow:
    var(--shadow-elev),
    0 0 0 8px rgba(255, 255, 255, 0.5),
    0 0 60px -10px rgba(61, 86, 115, 0.25);
  transform: rotate(-0.5deg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.hero-photo:hover { transform: rotate(0deg) translateY(-2px); }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-photo figcaption {
  display: block;
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,236,218,0.95));
  border-top: 1px solid var(--line);
}
.hero-photo__eyebrow {
  display: block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.hero-photo__caption {
  display: block;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.5;
  max-width: 50ch;
}

/* Stats bar sits below the split, full width of container */
.hero--split .hero-meta { margin-top: 56px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-photo { transform: none; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero--split { padding: 72px 0 56px; }
  .hero-photo__caption { font-size: .85rem; }
}


/* ============================================================
   Readability patch — ensure all body and meta text reads clearly
   on the beige + white surfaces.
   ============================================================ */
body { color: var(--text-soft); }
p, li { color: var(--text-soft); }
.card p, .post-card p, .strategy p, .testimonial blockquote, .case-body p { color: var(--text-soft); }
.section-title p, .page-header p, .hero p.lede { color: var(--text-soft); }

/* Meta / supporting text */
.post-meta, .article-meta, .who-role,
.stat-lbl, .hero-meta-label,
.crumbs, .crumbs a,
.form-note { color: var(--text-mute); font-weight: 500; }

/* Footer text on warm beige sand */
.site-footer ul a { color: var(--text-soft); }
.site-footer ul a:hover { color: var(--accent-deep); }
.disclosure { color: var(--text-mute); }
.copyright { color: var(--text-mute); }

/* Topbar text on Cayman navy — bright */
.topbar { color: #e8eef7; }
.topbar a { color: #c6d2e3; }
.topbar a:hover { color: #ffffff; }

/* Article body bumps */
.article-body p { color: var(--text-soft); }
.article-body h2, .article-body h3 { color: var(--ivory); }
.article-body blockquote { color: var(--ivory); }

/* FAQ summaries and answers */
details summary { color: var(--ivory); }
details p { color: var(--text-soft); }

/* Strategy bullet text */
.strategy ul li { color: var(--text-soft); }

/* Legal pages */
.legal-body p, .legal-body li { color: var(--text-soft); }
.legal-body strong { color: var(--ivory); }
.legal-toc li a { color: var(--accent-deep); }
.legal-toc li a:hover { color: var(--accent); }

/* Table body cells */
table tbody td { color: var(--text-soft); }
table tbody td strong { color: var(--ivory); }

/* Press feature body */
.press-feature__excerpt { color: var(--text-soft); }
.press-feature__meta { color: var(--accent-deep); }


/* ============================================================
   "What we do" editorial block (sits under the hero)
   ============================================================ */
.whatwedo {
  padding: 88px 0;
  position: relative;
}
.whatwedo::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.whatwedo .container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.whatwedo__header {
  position: sticky; top: 100px;
}
.whatwedo__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 8px 0 0;
  max-width: 22ch;
}
.whatwedo__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-soft);
}
.whatwedo__body p {
  margin: 0 0 1.3em;
  max-width: 60ch;
}
.whatwedo__body p:first-child {
  font-size: 1.18rem;
  color: var(--ivory);
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.6;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  margin-bottom: 1.6em;
}
.whatwedo__cta { margin-top: 28px; }

@media (max-width: 900px) {
  .whatwedo .container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .whatwedo__header { position: static; }
  .whatwedo__title { max-width: 34ch; }
}


/* ============================================================
   Final readability + header layout patch
   ============================================================ */

/* Hide the "Management" sub-label entirely so it never overlaps
   the nav. The brand text "Bostock Capitals" + logo is enough. */
.brand-sub { display: none !important; }

/* .eyebrow--light was designed for dark backgrounds. On the light
   beige hero / CTA band it renders pale-on-pale and disappears.
   Render it dark by default; .bg-navy override still makes it
   light on dark sections (defined earlier). */
.eyebrow--light {
  background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 50%, var(--accent-deep) 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(61, 86, 115, 0.18);
}
/* Restore the light treatment when it sits inside a dark section */
.bg-navy .eyebrow--light,
.cta-band .eyebrow--light,
.case-side .eyebrow--light,
.founder-band .eyebrow--light {
  background: linear-gradient(90deg, var(--accent-bright) 0%, #ffffff 50%, var(--accent-bright) 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(184, 200, 216, 0.35);
}

/* Hero-photo caption block — force readable navy text */
.hero-photo__eyebrow {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-photo__caption {
  color: var(--text-soft) !important;
}

/* Hero meta labels — make them clearly visible */
.hero-meta-label { color: var(--text-mute) !important; font-weight: 600; }
.hero-meta-value {
  background: linear-gradient(180deg, var(--accent-deep), var(--accent)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stats cell labels (lower band) */
.stat-lbl { color: var(--text-mute) !important; font-weight: 600; }
.stat-val {
  background: linear-gradient(180deg, var(--accent-deep), var(--accent)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card numbers and section labels everywhere */
.card .num,
.case-stats strong,
.team-card .role,
.case-meta {
  background: linear-gradient(180deg, var(--accent-deep), var(--accent)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Post readmore + press-feature CTA links — solid colour, not gradient */
.post-readmore,
.press-feature__cta,
.press-feature__meta {
  color: var(--accent-deep) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent-deep) !important;
}

/* Section-title intro paragraph */
.section-title p { color: var(--text-soft) !important; }

/* Crumbs (breadcrumbs) — visible muted */
.crumbs, .crumbs a { color: var(--text-mute) !important; font-weight: 500; }
.crumbs a:hover { color: var(--accent-deep) !important; }

/* Brand text — ensure the dark gradient stays dark even on dark
   sections (header is always light, but just to be safe) */
.brand span {
  background: linear-gradient(180deg, #0f1825 0%, #2c3a4d 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tighten the header now that brand-sub is gone */
.site-header .container { gap: 24px; }
@media (max-width: 1500px) { .brand { font-size: 1.55rem; } }


/* ============================================================
   Premium polish layer — glass + high-end finish
   ============================================================ */

/* Subtle paper-grain texture across the entire body — barely visible,
   gives the surface a tactile expensive feel like fine print stock */
body {
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
main, .topbar, .site-header, .site-footer { position: relative; z-index: 2; }

/* Frosted glass surfaces — stronger blur, brighter saturation,
   layered borders for premium depth */
.card,
.testimonial,
.post-card,
.strategy,
.case,
.press-feature,
.hero-meta,
.review-gallery figure,
.legal-toc,
.cta-band .container--narrow,
.stats .container > .grid-4 {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 100%) !important;
  backdrop-filter: blur(32px) saturate(170%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) brightness(1.02) !important;
  border: 1px solid rgba(61, 86, 115, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(61, 86, 115, 0.05),
    0 1px 2px rgba(61, 86, 115, 0.04),
    0 18px 50px -18px rgba(61, 86, 115, 0.22) !important;
  position: relative;
}
/* Top hairline highlight (the "lit edge" of premium glass) */
.card::after,
.testimonial::after,
.post-card::after,
.strategy::after,
.press-feature::after,
.review-gallery figure::after {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
  pointer-events: none;
}

/* Hover state — subtle lift with cool glow */
.card:hover,
.post-card:hover,
.strategy:hover,
.press-feature:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(61, 86, 115, 0.05),
    0 2px 4px rgba(61, 86, 115, 0.05),
    0 24px 60px -16px rgba(61, 86, 115, 0.30),
    0 0 60px -10px rgba(184, 200, 216, 0.40) !important;
}

/* Refined buttons — multi-layer glass gel */
.btn { letter-spacing: 0.04em; }
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 1px rgba(15, 24, 37, 0.18),
    0 2px 4px rgba(61, 86, 115, 0.20),
    0 14px 32px -8px rgba(61, 86, 115, 0.42),
    0 0 0 1px rgba(61, 86, 115, 0.08) !important;
  text-shadow: 0 1px 0 rgba(15, 24, 37, 0.30);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 1px rgba(15, 24, 37, 0.18),
    0 2px 4px rgba(61, 86, 115, 0.20),
    0 18px 40px -8px rgba(61, 86, 115, 0.55),
    0 0 0 1px rgba(61, 86, 115, 0.10),
    0 0 40px -8px rgba(184, 200, 216, 0.50) !important;
}
.btn-outline, .btn-outline-dark {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.62) 100%) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  border: 1px solid rgba(61, 86, 115, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 20px -8px rgba(61, 86, 115, 0.18) !important;
}

/* Premium 4D markers — gel with light from above */
.feature-list .marker {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(15, 24, 37, 0.25),
    0 2px 4px rgba(61, 86, 115, 0.20),
    0 8px 18px -4px rgba(61, 86, 115, 0.30) !important;
  text-shadow: 0 1px 1px rgba(15, 24, 37, 0.30) !important;
}

/* Hero photo frame — double-frame premium polaroid look */
.hero-photo {
  background: #ffffff !important;
  border: 1px solid rgba(61, 86, 115, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(61, 86, 115, 0.08),
    0 30px 80px -20px rgba(61, 86, 115, 0.35),
    0 0 0 10px rgba(255,255,255,0.85),
    0 0 0 11px rgba(61, 86, 115, 0.06),
    0 0 80px -20px rgba(184, 200, 216, 0.55) !important;
}

/* Testimonial blockquote — refined typography */
.testimonial blockquote {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.testimonial blockquote::before {
  font-family: var(--font-serif);
  font-size: 1.8em;
  line-height: 0;
  vertical-align: -0.35em;
  color: var(--accent-soft);
  margin-right: 6px;
}
.testimonial blockquote::after {
  font-family: var(--font-serif);
  font-size: 1.8em;
  line-height: 0;
  vertical-align: -0.35em;
  color: var(--accent-soft);
  margin-left: 2px;
}

/* Editorial section dividers — hairline gold-toned gradient */
section + section:not(.bg-navy):not(.bg-ivory):not(.bg-paper):not(.cta-band):not(.press-strip)::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(61, 86, 115, 0.12) 30%,
    rgba(61, 86, 115, 0.12) 70%,
    transparent);
  max-width: 1100px;
  margin: 0 auto;
}

/* Typography refinement — better hierarchy + tighter premium feel */
h1, h2, h3 { letter-spacing: -0.015em; }
h1 { line-height: 1.08; font-weight: 400; }
h2 { line-height: 1.15; font-weight: 400; }
p { letter-spacing: -0.002em; }
.eyebrow { letter-spacing: 0.24em; font-weight: 600; }

/* Refined image treatment — every img inside .split gets premium frame */
.split img,
.whatwedo__body img {
  border: 1px solid rgba(61, 86, 115, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(61, 86, 115, 0.08),
    0 28px 70px -18px rgba(61, 86, 115, 0.35) !important;
  border-radius: 18px !important;
}

/* Smooth scroll behavior */
html { scroll-behavior: smooth; }

/* Refined focus states — sophisticated gold-blue ring */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 4px !important;
  border-radius: 6px;
  transition: outline-offset 0.15s ease;
}

/* Cards in the .bg-navy dark sections — premium frosted dark glass */
.bg-navy .card,
.bg-navy .testimonial,
.bg-navy .post-card,
.bg-navy .strategy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 20px 50px -16px rgba(0, 0, 0, 0.45) !important;
}

/* Stats panel — premium frosted glass with brighter inner glow */
.stats .container > .grid-4 {
  border-radius: 28px !important;
  padding: 48px 32px !important;
  position: relative;
}
.stats .container > .grid-4::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184, 200, 216, 0.18), transparent 60%);
}

/* Topbar — strengthen the Cayman navy with subtle inner highlight */
.topbar {
  background:
    radial-gradient(ellipse 60% 100% at 20% 50%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, #012169 0%, #001540 100%) !important;
  border-bottom: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Header — refined backdrop with subtle border bottom highlight */
.site-header {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(32px) saturate(180%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.02) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(61, 86, 115, 0.10),
    0 1px 2px rgba(61, 86, 115, 0.04),
    0 12px 32px -16px rgba(61, 86, 115, 0.18) !important;
}

/* Footer — refined warm sand with deeper depth */
.site-footer {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(184, 200, 216, 0.22), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, #c8bb9c 100%) !important;
  border-top: 1px solid rgba(61, 86, 115, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

/* CTA band container — premium glass with golden inner glow */
.cta-band .container--narrow {
  border-radius: 36px !important;
  padding: 72px 48px !important;
  position: relative;
}
.cta-band .container--narrow::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 35px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%);
}

/* Disabled body padding/border on press-feature__img on small screens */
@media (max-width: 860px) {
  .press-feature__img { min-height: 320px; }
}

/* Subtle link underline animation on body links */
.article-body a,
.legal-body a:not(.btn) {
  position: relative;
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
  padding-bottom: 1px;
}
.article-body a:hover,
.legal-body a:not(.btn):hover {
  background-size: 100% 2px;
}

/* Section padding refinement — more editorial breathing room */
section { padding: 110px 0; }
section.tight { padding: 72px 0; }
@media (max-width: 760px) { section { padding: 72px 0; } }


/* ============================================================
   PREMIUM REFINEMENT v2 — fix darkened text + elevate typography
   ============================================================ */

/* KILL the noise overlay that was darkening text via mix-blend-mode */
body::before { display: none !important; content: none !important; }

/* Force gradient-text elements to have a solid colour as well — so
   the text is always readable even if background-clip:text fails or
   gets clipped to black by a blend mode. The gradient still wins
   when supported; the solid colour is the safety net. */
.brand span {
  color: #0f1825 !important;
  background: none !important;
  -webkit-text-fill-color: #0f1825 !important;
}
h1 {
  color: #0f1825 !important;
  background: none !important;
  -webkit-text-fill-color: #0f1825 !important;
}
.eyebrow,
.eyebrow--light,
.hero-photo__eyebrow,
.press-feature__meta,
.team-card .role,
.case-meta,
.post-readmore,
.strategy .tag {
  color: var(--accent-deep) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent-deep) !important;
}
.bg-navy .eyebrow,
.cta-band .eyebrow--light,
.case-side .eyebrow--light,
.case-side .case-meta {
  color: #d8e0ee !important;
  background: none !important;
  -webkit-text-fill-color: #d8e0ee !important;
}
.hero-meta-value,
.stat-val,
.card .num,
.case-stats strong {
  color: var(--accent-deep) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent-deep) !important;
}

/* ============================================================
   ELEVATED TYPOGRAPHY — true high-end editorial feel
   ============================================================ */

/* Larger, lighter, more refined headlines (Cormorant looks
   significantly more luxurious at 300 weight with proper tracking) */
h1 {
  font-weight: 300 !important;
  font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}
h2 {
  font-weight: 300 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.018em !important;
}
h3 {
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.01em !important;
}
.whatwedo__title {
  font-weight: 300 !important;
  letter-spacing: -0.022em !important;
  font-size: clamp(1.85rem, 2.8vw, 2.5rem) !important;
}
.press-feature__title {
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}
.testimonial blockquote {
  font-weight: 300 !important;
  letter-spacing: -0.008em !important;
}
.hero-photo__caption {
  font-weight: 400;
  letter-spacing: -0.002em;
}

/* Refined eyebrow caps — wider tracking, smaller, gold-toned hairline */
.eyebrow {
  font-size: .68rem !important;
  letter-spacing: 0.32em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Body type — slightly larger, more breath, softer colour */
body, p, li {
  font-feature-settings: "kern", "liga", "calt";
}
.lede, .hero p.lede {
  font-weight: 300 !important;
  font-size: 1.32rem !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  color: var(--text-soft) !important;
}
.whatwedo__body p:first-child {
  font-weight: 300 !important;
  font-size: 1.32rem !important;
  letter-spacing: -0.005em !important;
  line-height: 1.55 !important;
}

/* Refined section titles — centered intro paragraphs read more like
   editorial introductions when slightly smaller and lighter */
.section-title p {
  font-weight: 400 !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
}

/* Italic accent on quote marks for premium magazine feel */
.testimonial blockquote::before,
.testimonial blockquote::after {
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2em !important;
  color: var(--accent) !important;
  line-height: 0 !important;
  vertical-align: -0.4em !important;
}

/* Reduce maximum container width slightly — luxury sites use
   narrower columns to feel curated, not bursting */
.container { max-width: 1180px; }
.container--narrow { max-width: 820px; }

/* Buttons — refined with confident letter-spacing + thinner ring */
.btn {
  font-size: .88rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  padding: 16px 32px !important;
}
.btn-primary { padding: 17px 34px !important; }

/* Card numbers — bigger, more confident serif */
.card .num {
  font-size: 2rem !important;
  font-weight: 300 !important;
  font-family: var(--font-serif) !important;
  letter-spacing: -0.02em;
}

/* Stat values — larger and more refined */
.stat-val, .hero-meta-value {
  font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  font-family: var(--font-serif) !important;
  letter-spacing: -0.025em !important;
}
.stat-lbl, .hero-meta-label {
  font-size: .68rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 600 !important;
}

/* Smaller, lighter footer text */
.disclosure, .copyright { font-weight: 400; }

/* Refined cards — slightly more padding for luxury breathing room */
.card { padding: 40px !important; }
.strategy { padding: 44px !important; }
.testimonial { padding: 36px !important; }

/* Subtle italic on the first letter of certain headline elements
   gives that "luxury serif magazine" feel */
.whatwedo__title::first-letter,
.hero h1::first-letter {
  font-style: italic;
  font-weight: 400;
}

/* Drop the previously-added pseudo-element hairline highlight that
   may have caused visual artifacts. Use simpler border instead. */
.card::after, .testimonial::after, .post-card::after,
.strategy::after, .press-feature::after,
.review-gallery figure::after {
  display: none !important;
}

/* Strengthen the actual border to make it visible as a clean line */
.card, .testimonial, .post-card, .strategy, .press-feature,
.case, .review-gallery figure, .legal-toc,
.cta-band .container--narrow {
  border: 1px solid rgba(61, 86, 115, 0.12) !important;
  border-radius: 18px !important;
}

/* Section padding — even more generous for luxury feel */
section { padding: 130px 0 !important; }
section.tight { padding: 80px 0 !important; }
.whatwedo { padding: 110px 0 !important; }
@media (max-width: 760px) {
  section { padding: 80px 0 !important; }
  .card { padding: 28px !important; }
}

/* Hover refinement — smoother, slower, more confident */
.card, .post-card, .strategy, .press-feature, .btn {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease,
              color 0.2s ease !important;
}

/* Subtle text rendering improvements */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1; }


/* ============================================================
   Dark section text — override inline styles forcing light colour
   Several pages (about, testimonials, portfolio) use inline
   style="color: var(--ivory)" that worked under the old dark
   palette but renders invisible on the new dark-navy bg-navy
   surfaces. Force light text with !important so inline styles
   can't darken it.
   ============================================================ */

.bg-navy *,
.bg-navy p,
.bg-navy li,
.bg-navy span,
.bg-navy div { color: #d8e0ee !important; }

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-navy strong { color: #ffffff !important; }

.bg-navy .eyebrow,
.bg-navy .eyebrow--light {
  color: #d8e0ee !important;
  background: none !important;
  -webkit-text-fill-color: #d8e0ee !important;
}

.bg-navy .feature-list strong,
.bg-navy .feature-list .desc,
.bg-navy .feature-list span,
.bg-navy ul li[style] strong,
.bg-navy ul li[style] span,
.bg-navy ul li[style] .desc,
.bg-navy .section-title p {
  color: #d8e0ee !important;
}

.bg-navy .feature-list strong { color: #ffffff !important; }

.bg-navy a:not(.btn) {
  color: var(--accent-bright) !important;
  -webkit-text-fill-color: var(--accent-bright) !important;
}
.bg-navy a:not(.btn):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Markers inside bg-navy keep their gel — but force the digit/check
   inside them to white for legibility */
.bg-navy .feature-list .marker {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
}

/* Same treatment for the case-side dark strips on portfolio.html */
.case-side *,
.case-side p, .case-side li, .case-side span, .case-side div { color: #d2dae5 !important; }
.case-side h1, .case-side h2, .case-side h3, .case-side strong { color: #ffffff !important; }
.case-side .case-meta { color: var(--accent-bright) !important; -webkit-text-fill-color: var(--accent-bright) !important; }
.case-side .case-stats strong { color: var(--accent-bright) !important; -webkit-text-fill-color: var(--accent-bright) !important; }

/* Border-color overrides — `--line-dark` is now dark-on-light;
   inside dark sections force border-bottom to be a soft white tint */
.bg-navy .feature-list li,
.bg-navy .feature-list li[style] { border-bottom: 1px solid rgba(255,255,255,0.10) !important; }

/* Topbar text — make sure the navy bar text always stays light */
.topbar *,
.topbar span,
.topbar div { color: #e8eef7 !important; }
.topbar strong {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
.topbar a { color: #c2cee0 !important; -webkit-text-fill-color: #c2cee0 !important; }
.topbar a:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }


/* ============================================================
   Density correction — tighten the over-generous spacing so the
   site reads as confident rather than empty.
   ============================================================ */

section { padding: 72px 0 !important; }
section.tight { padding: 56px 0 !important; }
.whatwedo { padding: 72px 0 !important; }
.hero, .hero--split { padding: 88px 0 64px !important; }
.page-header { padding: 72px 0 48px !important; }
.cta-band { padding: 80px 0 !important; }
.press-strip { padding: 40px 0 48px !important; }
.stats { padding: 48px 0 !important; }

.cta-band .container--narrow { padding: 48px 36px !important; border-radius: 22px !important; }
.stats .container > .grid-4 { padding: 32px 24px !important; border-radius: 22px !important; }

.card { padding: 28px !important; border-radius: 14px !important; }
.strategy { padding: 30px !important; border-radius: 14px !important; }
.testimonial { padding: 26px !important; border-radius: 14px !important; }
.post-card { border-radius: 14px !important; }
.post-body { padding: 22px !important; }
.case { border-radius: 14px !important; margin-bottom: 20px !important; }
.case-side { padding: 26px !important; }
.case-body { padding: 26px !important; }
.review-gallery figure { border-radius: 12px !important; margin: 0 0 16px !important; }
.review-gallery { column-gap: 16px !important; }
.press-feature { border-radius: 16px !important; }
.press-feature__body { padding: 36px 32px !important; }
.press-feature__img { padding: 20px !important; }
.legal-toc { padding: 18px 22px !important; margin-bottom: 28px !important; }
.hero-meta { padding: 20px 26px !important; margin-top: 36px !important; gap: 40px !important; }

.section-title { margin-bottom: 36px !important; }
.feature-list li { padding: 16px 0 !important; }
.btn { padding: 12px 26px !important; }
.btn-primary { padding: 13px 28px !important; }

/* WhatWeDo block — tighter columns + less first-paragraph weight */
.whatwedo .container { gap: clamp(28px, 4vw, 60px) !important; }
.whatwedo__body p:first-child { padding-left: 14px !important; margin-bottom: 1.2em !important; font-size: 1.18rem !important; }
.whatwedo__body p { margin-bottom: 1em !important; }
.whatwedo__header { top: 90px !important; }

/* Hero — closer copy + photo, less air below buttons */
.hero-grid { gap: clamp(28px, 4vw, 56px) !important; align-items: center !important; }
.hero-copy h1 { margin-bottom: 18px !important; }
.hero-copy .lede { margin-bottom: 24px !important; }

/* Smaller, denser headings — still premium but less empty */
h1 { font-size: clamp(2.2rem, 4.2vw, 3.8rem) !important; line-height: 1.08 !important; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important; line-height: 1.15 !important; }
h3 { font-size: 1.32rem !important; }
.whatwedo__title { font-size: clamp(1.55rem, 2.4vw, 2.05rem) !important; }
.lede, .hero p.lede { font-size: 1.15rem !important; line-height: 1.5 !important; }

/* Footer trim */
.site-footer { padding: 56px 0 20px !important; }
.footer-grid { gap: 32px !important; margin-bottom: 36px !important; }

/* Grid gaps - tighter */
.grid { gap: 18px !important; }

/* Mobile keeps things even tighter */
@media (max-width: 760px) {
  section { padding: 48px 0 !important; }
  .hero, .hero--split { padding: 56px 0 40px !important; }
  .page-header { padding: 48px 0 32px !important; }
  .cta-band .container--narrow { padding: 36px 22px !important; }
  .card, .strategy { padding: 22px !important; }
  .hero-meta { padding: 16px 20px !important; gap: 20px !important; }
}


/* ============================================================
   Bolder card sub-headings — make each service / pillar /
   programme card title easy to spot at a glance
   ============================================================ */
.card h3,
.team-card h3,
.post-card h3,
.strategy h3 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.005em !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  margin-bottom: 10px !important;
  line-height: 1.3;
}
/* Slightly subtler treatment when the card sits inside a dark section */
.bg-navy .card h3,
.bg-navy .post-card h3,
.bg-navy .strategy h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}