/* =========================================================================
   LAC CONSULTANCY — Brand Stylesheet
   Editorial · Monochrome · Architectural · Discreet
   ========================================================================= */

:root {
  /* Palette — dark mode (default): obsidian, charcoal, ivory, brass */
  --ink:        #0a0a0b;        /* base black */
  --carbon:     #111114;        /* page background */
  --graphite:   #1b1b1f;        /* elevated surfaces */
  --slate:      #2a2a30;        /* dividers, hairlines */
  --pewter:     #6a6a72;        /* secondary text */
  --silver:     #b4b4ba;        /* tertiary text */
  --bone:       #ececea;        /* primary text on dark */
  --paper:      #f4f3ef;        /* light surface (alt) */
  --brass:      #c47a4a;        /* restrained accent — burnt terracotta orange, used sparingly */
  --brass-soft: #9a5e3a;

  /* Semantic tokens — themable */
  --bg:              var(--carbon);
  --bg-elev:         var(--graphite);
  --hairline:        var(--slate);
  --fg:              var(--bone);
  --fg-secondary:    var(--silver);
  --fg-muted:        var(--pewter);
  --scrim:           rgba(0,0,0,0.60);
  --scrim-hero:      rgba(0,0,0,0.65);
  --overlay-1:       rgba(255,255,255,0.04);
  --overlay-2:       rgba(255,255,255,0.08);
  --overlay-3:       rgba(255,255,255,0.12);
  --form-input-bg:   rgba(255,255,255,0.02);
  --form-input-border: var(--slate);

  /* Type — single sans-serif, no italic */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.875rem;    /* 14 */
  --text-base:  1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    clamp(1.4rem, 1.8vw, 1.8rem);
  --text-2xl:   clamp(2rem, 3.2vw, 3rem);
  --text-3xl:   clamp(2.6rem, 5vw, 4.4rem);
  --text-hero:  clamp(2.4rem, 5.6vw, 4.6rem);
}

/* Light theme override — remaps every brand token so existing rules flip automatically */
[data-theme="light"] {
  --ink:        #ffffff;
  --carbon:     #f7f6f2;         /* light page background */
  --graphite:   #ffffff;         /* elevated surfaces → white cards */
  --slate:      #d9d6cf;         /* hairlines */
  --pewter:     #55575b;         /* secondary text on light */
  --silver:     #6b6e73;         /* tertiary text on light */
  --bone:       #17181a;         /* primary text on light */
  --paper:      #efece5;
  --brass:      #a85f30;         /* slightly darker accent for light-bg contrast */
  --brass-soft: #8a4d24;
  --bg:              #f7f6f2;
  --bg-elev:         #ffffff;
  --hairline:        #d9d6cf;
  --fg:              #17181a;
  --fg-secondary:    #3f4145;
  --fg-muted:        #6b6e73;
  --scrim:           rgba(255,255,255,0.55);
  --scrim-hero:      rgba(255,255,255,0.35);
  --overlay-1:       rgba(0,0,0,0.04);
  --overlay-2:       rgba(0,0,0,0.06);
  --overlay-3:       rgba(0,0,0,0.10);
  --form-input-bg:   rgba(0,0,0,0.02);
  --form-input-border: #d9d6cf;
  color-scheme: light;
}

:root {

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Layout */
  --max:      1280px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --section:  clamp(4rem, 9vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--bone);
  background: var(--carbon);
  font-weight: 300;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* =========================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  /* Uppercase treatment across all section/page headings for the LAC editorial feel.
     Small-cap sizing needs slightly opened letter-spacing to breathe. */
  text-transform: uppercase;
  letter-spacing: 0.035em;
  margin: 0;
  color: var(--bone);
}

h1 { font-size: var(--text-hero); letter-spacing: 0.02em; }
h2 { font-size: var(--text-3xl); letter-spacing: 0.03em; }
h3 { font-size: var(--text-xl); font-weight: 500; line-height: 1.25; letter-spacing: 0.04em; }
h4 { letter-spacing: 0.05em; }

/* Escape hatch: mixed-case narrative-heading opt-out (rarely needed) */
.h-mixed { text-transform: none; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-4); max-width: 60ch; color: var(--bone); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pewter);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.4;
  font-weight: 300;
  color: var(--bone);
  max-width: 38ch;
}

.muted { color: var(--silver); }
.small { font-size: var(--text-sm); }

/* =========================================================================
   Layout primitives
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--wide { max-width: 1480px; }

section {
  padding-top: var(--section);
  padding-bottom: var(--section);
  position: relative;
}

.rule {
  height: 1px;
  background: var(--slate);
  border: 0;
  margin: 0;
}

/* =========================================================================
   Header — sticky, minimal, with language switcher
   ========================================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--s-4) 0;
  background: rgba(17, 17, 20, 0.0);
  backdrop-filter: blur(0px);
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(13, 13, 16, 0.85);
  backdrop-filter: blur(14px);
  padding: var(--s-3) 0;
  border-bottom-color: var(--slate);
}

.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
}

/* Column 1 — nav on the left */
.header-row > .site-nav { justify-self: start; }
/* Column 2 — brand centered */
.header-row > .brand { justify-self: center; }
/* Column 3 — tools on the right */
.header-row > .header-tools { justify-self: end; }

/* Slightly larger centered logo */
.header-row > .brand .brand-image { height: 56px; }
.site-header.is-scrolled .header-row > .brand .brand-image { height: 44px; }

/* Logo */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.brand-mark {
  width: 28px;
  height: 28px;
  color: var(--bone);
  flex-shrink: 0;
}

.brand-name {
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
}

.brand-name .sep {
  color: var(--brass);
  margin: 0 0.25em;
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  position: relative;
  padding: var(--s-2) 0;
}

.site-nav a:hover,
.site-nav a.is-active { color: var(--bone); }

.site-nav a.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brass);
}

/* Language switcher */
.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--slate);
  border-radius: 999px;
  padding: 3px;
}

.lang button {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  padding: 6px 12px;
  border-radius: 999px;
  transition: all 0.3s var(--ease);
  font-weight: 500;
}

.lang button:hover { color: var(--bone); }

.lang button.is-active {
  background: var(--bone);
  color: var(--ink);
}

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
}

.menu-toggle span {
  width: 18px;
  height: 1px;
  background: var(--bone);
  position: relative;
  transition: transform 0.3s var(--ease);
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: var(--bone);
  transition: transform 0.3s var(--ease);
}
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after  { top: 6px; }

@media (max-width: 880px) {
  .menu-toggle { display: inline-flex; }
  .site-nav ul {
    position: fixed;
    inset: 0 0 0 0;
    background: var(--carbon);
    flex-direction: column;
    justify-content: center;
    gap: var(--s-6);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    z-index: 40;
  }
  .site-nav.is-open ul { transform: translateX(0); }
  .site-nav a { font-size: var(--text-sm); }
  .header-row { gap: var(--s-3); }
  .brand-name { font-size: 13px; letter-spacing: 0.18em; }
  .lang button { padding: 5px 9px; font-size: 10px; letter-spacing: 0.14em; }
}

/* Brand short/long swap */
.brand-short { display: none; }

@media (max-width: 540px) {
  .brand-full  { display: none; }
  .brand-short { display: inline; letter-spacing: 0.24em; font-size: 14px; }
  .lang button { padding: 5px 8px; font-size: 10px; }
}

/* =========================================================================
   Pages — show/hide
   ========================================================================= */

main { padding-top: 0; }

.page { display: none; }
.page.is-current { display: block; animation: pageIn 0.6s var(--ease); }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--s-24);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(100%) contrast(1.05) brightness(0.78);
}

/* ============================================================
   Tactical mission map — SVG hero cartography
   ============================================================ */
.hero-media--map { background: var(--ink); }

.tac-map {
  width: 100%;
  height: 100%;
  display: block;
}

/* Only markers should intercept mouse events. Land paths, grid, labels,
   and pulse rings must let hover fall through to the marker centers. */
.tac-map .tac-grid,
.tac-map .tac-land,
.tac-map .tac-land path,
.tac-map .tac-labels,
.tac-map .tac-pulse,
.tac-map .tac-ring,
.tac-map .tac-glow,
.tac-map .tac-tag { pointer-events: none; }
.tac-map .tac-marker,
.tac-map .tac-marker .tac-dot { pointer-events: auto; }

/* Interactive elements inside .hero-content must keep pointer events
   (parent has pointer-events: none so markers below receive hover).
   Only true click targets are re-enabled — headings and paragraphs
   remain transparent to the mouse so their empty inline space doesn't
   swallow marker interactions. Text selection still works. */
.hero-content .hero-cta,
.hero-content .hero-cta a,
.hero-content .hero-cta button,
.hero-content a,
.hero-content button { pointer-events: auto; }

/* Focus markers — rest state hides tag labels; hover reveals them.
   The dot itself + soft glow stay visible at rest for the ambient
   "mission map" feel. */
.tac-marker { cursor: default; }

.tac-marker .tac-tag {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
/* HQ marker: always label visible */
.tac-marker--hq .tac-tag { opacity: 0.92; transform: none; }

.tac-marker:hover .tac-tag,
.tac-marker:focus-within .tac-tag { opacity: 1; transform: none; }

/* Pulse & HQ ring: animations are baked into the SVG via SMIL <animate>
   elements for maximum cross-browser compatibility (SMIL works in every
   modern browser including Safari, iOS, Firefox, Chrome, Edge). We only
   keep base styles here; no CSS animation is applied so nothing overrides
   the SMIL animations. */
.tac-marker .tac-pulse {
  fill: none;
  stroke: var(--brass);
}

/* Marker dot hover intensifies */
.tac-marker:hover .tac-dot {
  filter: drop-shadow(0 0 6px var(--brass));
}

/* Stagger the pulses so they don't beat in unison */
.tac-markers .tac-marker:nth-child(2) .tac-pulse { animation-delay: 0.4s; }
.tac-markers .tac-marker:nth-child(3) .tac-pulse { animation-delay: 0.9s; }
.tac-markers .tac-marker:nth-child(4) .tac-pulse { animation-delay: 1.4s; }
.tac-markers .tac-marker:nth-child(5) .tac-pulse { animation-delay: 1.9s; }
.tac-markers .tac-marker:nth-child(6) .tac-pulse { animation-delay: 2.4s; }
.tac-markers .tac-marker:nth-child(7) .tac-pulse { animation-delay: 2.9s; }
.tac-markers .tac-marker:nth-child(8) .tac-pulse { animation-delay: 3.4s; }
.tac-markers .tac-marker:nth-child(9) .tac-pulse { animation-delay: 3.9s; }

@media (prefers-reduced-motion: reduce) {
  .tac-marker .tac-pulse,
  .tac-marker--hq .tac-ring { animation: none; }
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.35) 40%, rgba(10,10,11,0.95) 100%),
    linear-gradient(90deg, rgba(10,10,11,0.7) 0%, rgba(10,10,11,0.0) 60%);
  /* Never intercept mouse events — markers below must remain hoverable. */
  pointer-events: none;
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-12);
  /* Layout container is transparent to the mouse; only actual click
     targets inside .hero-content re-enable events. */
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 60ch;
  /* Let mouse events pass through empty space onto the map markers below,
     while text and interactive elements stay clickable/hoverable. */
  pointer-events: none;
}

.hero-mark {
  width: clamp(220px, 26vw, 360px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Nudge right on desktop so the mark clears the Sint Maarten / SSS
     markers on the tactical map behind it. */
  transform: translateX(clamp(24px, 5vw, 96px));
}

@media (max-width: 900px) {
  .hero-mark { transform: none; }
}

.hero-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.55));
}

.hero h1 {
  margin: var(--s-6) 0 var(--s-6);
}

.hero h1 em {
  color: var(--bone);
  font-weight: 400;
}

.hero h1 > span[data-i18n="home.h1.a"] {
  color: var(--brass);
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--silver);
  max-width: 48ch;
  line-height: 1.6;
}

.hero-meta {
  position: absolute;
  bottom: var(--s-8);
  right: var(--gutter);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pewter);
  text-align: right;
  z-index: 1;
}

.hero-meta .coords {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--pewter);
}

@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .hero-mark {
    order: -1;
    width: clamp(160px, 38vw, 220px);
    margin-bottom: var(--s-4);
  }
}

@media (max-width: 640px) {
  .hero { padding-bottom: var(--s-16); min-height: 92vh; }
  .hero-meta { display: none; }
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 26px;
  border: 1px solid var(--slate);
  /* Restrained typewriter feel on UI — keeps display headings serif and premium */
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  transition: all 0.4s var(--ease);
  cursor: pointer;
}

.btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.btn--filled {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn--filled:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

/* Loading state — subtle, keeps the premium restraint */
.btn.is-loading,
.btn:disabled {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.btn.is-loading .arr {
  animation: btn-arr-pulse 1.1s ease-in-out infinite;
}
@keyframes btn-arr-pulse {
  0%, 100% { transform: translateX(0);   opacity: 0.5; }
  50%      { transform: translateX(4px); opacity: 1;   }
}

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

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* =========================================================================
   Pathways — home dual CTA
   ========================================================================= */

.pathways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--slate);
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
}

.pathway {
  position: relative;
  background: var(--carbon);
  padding: var(--s-16) var(--gutter);
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background 0.5s var(--ease);
}

.pathway-img {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease);
  z-index: 0;
  transform: scale(1.02);
}
.pathway-img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  filter: grayscale(100%) contrast(1.02) brightness(0.55);
  transition: filter 0.7s var(--ease);
}
.pathway-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.92) 100%);
  transition: opacity 0.7s var(--ease);
}

.pathway:hover .pathway-img { opacity: 0.55; transform: scale(1); }
.pathway:hover .pathway-img img { filter: grayscale(100%) contrast(1.1) brightness(1.05); }
.pathway:hover .pathway-img::after { opacity: 0.45; }

.pathway > * { position: relative; z-index: 1; }

.pathway-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--pewter);
  letter-spacing: 0.2em;
}

.pathway h2 {
  font-size: var(--text-2xl);
  margin: var(--s-3) 0 var(--s-3);
}

.pathway p {
  color: var(--silver);
  max-width: 36ch;
}

.pathway-link {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 6px;
  align-self: flex-start;
  margin-top: var(--s-8);
}
.pathway-link:hover { color: var(--brass); }

@media (max-width: 760px) {
  .pathways { grid-template-columns: 1fr; }
  .pathway { min-height: 44vh; }
}

/* =========================================================================
   Region — Caribbean & LATAM positioning
   ========================================================================= */

.region-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-16);
  align-items: start;
}

/* Small tactical mission map inside the Regional Footprint section.
   Reuses the same SVG as the hero but scaled down; labels stay hidden
   at rest and reveal on hover, matching the hero interaction. */
.region-map {
  margin-top: var(--s-8);
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--slate);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,10,11,0.6) 0%, rgba(10,10,11,0.9) 100%);
  position: relative;
}
.region-map .tac-map--mini {
  width: 100%;
  height: 100%;
  display: block;
}
/* Mini-map: labels stay hidden at rest, revealed on hover — including HQ
   (its own place is already implied by the section context). */
.region-map .tac-map--mini .tac-tag {
  font-size: 22px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.region-map .tac-map--mini .tac-tag .tac-role {
  font-size: 16px;
}
.region-map:hover .tac-map--mini .tac-marker--hq .tac-tag,
.region-map .tac-map--mini .tac-marker:hover .tac-tag,
.region-map .tac-map--mini .tac-marker:focus-within .tac-tag { opacity: 0.92; }

/* Slightly stronger pulse in mini for legibility */
.region-map .tac-map--mini .tac-dot { r: 3.2; }
@media (max-width: 900px) {
  .region-map { aspect-ratio: 16 / 11; }
}

.region-list {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  columns: 2;
  column-gap: var(--s-12);
}

.region-list li {
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--slate);
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.region-list .iso {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--pewter);
  letter-spacing: 0.1em;
}

@media (max-width: 760px) {
  .region-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .region-list { columns: 1; }
}

/* =========================================================================
   Philosophy — three principles
   ========================================================================= */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-12);
}

.principle {
  border-top: 1px solid var(--slate);
  padding-top: var(--s-6);
}

.principle .n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brass);
  letter-spacing: 0.2em;
}

.principle h3 {
  font-size: var(--text-xl);
  margin: var(--s-3) 0 var(--s-3);
}

.principle p {
  font-size: var(--text-sm);
  color: var(--silver);
  line-height: 1.7;
}

@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* =========================================================================
   Editorial section — text + image
   ========================================================================= */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
}

.editorial--reverse .editorial-img { order: -1; }

.editorial-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.editorial-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}

.editorial-img .caption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,10,11,0.7);
  padding: 4px 8px;
}

.editorial-text h2 { margin-bottom: var(--s-6); }
.editorial-text .lede { margin-bottom: var(--s-6); }

@media (max-width: 880px) {
  .editorial { grid-template-columns: 1fr; gap: var(--s-8); }
  .editorial-img { aspect-ratio: 4/3; }
  .editorial--reverse .editorial-img { order: 0; }
}

/* =========================================================================
   Services list — Consultancy & Academy
   ========================================================================= */

.services {
  margin-top: var(--s-12);
  border-top: 1px solid var(--slate);
}

.service-row {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: var(--s-8);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--slate);
  align-items: start;
  transition: padding 0.4s var(--ease);
}

.service-row:hover {
  padding-left: var(--s-3);
}

.service-row .n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brass);
  letter-spacing: 0.2em;
}

.service-row h3 {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 400;
}

.service-row p {
  font-size: var(--text-sm);
  color: var(--silver);
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}

@media (max-width: 760px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .service-row .n { font-size: 10px; }
}

/* =========================================================================
   Section heading block
   ========================================================================= */

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-12);
  align-items: end;
  margin-bottom: var(--s-12);
}
.section-head h2 { font-size: var(--text-3xl); }
.section-head .lede { margin: 0; }

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* =========================================================================
   About — credentials grid
   ========================================================================= */

.credentials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--slate);
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
  margin-top: var(--s-12);
}

.credential {
  background: var(--carbon);
  padding: var(--s-8) var(--s-4);
  text-align: center;
}

.credential .v {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--bone);
  display: block;
  line-height: 1;
}

.credential .l {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pewter);
  margin-top: var(--s-3);
  display: block;
}

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

/* =========================================================================
   Contact
   ========================================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-16);
}

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

.contact-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-4) var(--s-6);
}
.contact-info dt {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pewter);
}
.contact-info dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--bone);
}

.form {
  display: grid;
  gap: var(--s-6);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pewter);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--bone);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--slate);
  padding: var(--s-3) 0;
  outline: none;
  transition: border-color 0.3s var(--ease);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--brass); }

.field select option { background: var(--carbon); color: var(--bone); }

.form-note {
  font-size: var(--text-xs);
  color: var(--pewter);
  letter-spacing: 0.04em;
  line-height: 1.7;
  border-top: 1px solid var(--slate);
  padding-top: var(--s-4);
}

/* =========================================================================
   Footer
   ========================================================================= */

footer.site-footer {
  border-top: 1px solid var(--slate);
  padding: var(--s-16) 0 var(--s-8);
  margin-top: var(--s-24);
  background: var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pewter);
  margin-bottom: var(--s-4);
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.footer-col a {
  font-size: var(--text-sm);
  color: var(--silver);
}
.footer-col a:hover { color: var(--bone); }

.footer-bottom {
  border-top: 1px solid var(--slate);
  padding-top: var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--pewter);
  letter-spacing: 0.04em;
}

.footer-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* =========================================================================
   LinkedIn icon — minimal, discreet
   ========================================================================= */

.li-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.08em;
  color: var(--pewter);
  opacity: 0.72;
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.li-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* In the footer-social context force pixel-based sizing so the icons
   never inherit an oversized em context. */
.footer-social .li-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  font-size: 20px;
}
.footer-social .li-icon svg {
  width: 20px;
  height: 20px;
}
.li-icon:hover,
.li-icon:focus-visible {
  color: var(--brass);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

/* =========================================================================
   Capacity mark — large editorial numeral for “Our Capacity”
   ========================================================================= */

.capacity {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-16);
  align-items: center;
}
.capacity-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(9rem, 18vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--bone);
  display: flex;
  align-items: flex-start;
  gap: 0.02em;
  position: relative;
}
.capacity-mark .cap-num {
  background: linear-gradient(180deg, var(--bone) 0%, var(--silver) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Cormorant’s lining figures make “1” read as “I” — force lining tabular
     figures and a slightly heavier weight so “12” is unambiguous. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  font-weight: 500;
}
.capacity-mark .cap-plus {
  font-size: 0.55em;
  color: var(--brass);
  line-height: 1;
  margin-top: 0.1em;
  margin-left: 0.05em;
  font-weight: 300;
}
.capacity-mark .cap-label {
  position: absolute;
  left: 0;
  bottom: -1.6em;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pewter);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .capacity {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }
  .capacity-mark {
    justify-content: flex-start;
    /* Reserve space for the absolutely-positioned label so it doesn’t
       overlap the following eyebrow / heading on narrow viewports. */
    margin-bottom: 2.6em;
  }
}

/* Profile variant — anchored below the portrait, right-aligned, prominent */
.editorial-img--profile { position: relative; overflow: visible; }
.li-icon--profile {
  position: absolute;
  right: 0;
  bottom: -44px;
  width: 32px;
  height: 32px;
  margin-left: 0;
  color: var(--bone);
  opacity: 0.85;
}
.li-icon--profile:hover,
.li-icon--profile:focus-visible {
  color: var(--brass);
  opacity: 1;
  transform: translateY(-2px);
}

/* Footer variant — sits with the mark row, spaced from privacy links */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.footer-social .li-icon {
  width: 20px;
  height: 20px;
  margin-left: 0;
  color: var(--bone);
  opacity: 0.85;
}
.footer-social .li-icon + .li-icon { margin-left: var(--s-3); }
.footer-social .li-icon:hover,
.footer-social .li-icon:focus-visible {
  color: var(--brass);
  opacity: 1;
}

/* =========================================================================
   Contact page — social icon row under Office block
   ========================================================================= */
.contact-social {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--slate);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
}
.contact-social > a {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
}
.contact-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  color: var(--silver);
  opacity: 0.85;
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact-social .social-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}
.contact-social .social-icon:hover,
.contact-social .social-icon:focus-visible {
  color: var(--brass);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

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

/* =========================================================================
   Page intro band (interior pages)
   ========================================================================= */

.page-intro {
  padding-top: calc(var(--section) + 60px);
  padding-bottom: var(--s-16);
  border-bottom: 1px solid var(--slate);
}

.page-intro .eyebrow { margin-bottom: var(--s-6); }
.page-intro h1 {
  /* Wider, more editorial page-intro heading — breathes across the full column
     on desktop while still balanced on mobile. */
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  max-width: 22ch;
  margin-bottom: var(--s-6);
}

/* The About page uses a horizontally-composed three-part heading with pipe
   dividers — give it the whole content column so it reads as one continuous
   line where the layout allows, and wraps gracefully below. */
#about .page-intro h1,
.page-intro h1.h-wide {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  max-width: none;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.page-intro .lede { max-width: 58ch; }

/* =========================================================================
   V3 ADDITIONS — Consultancy status, Academy products, About narrative
   Built on the existing v1 design language: monochrome, restrained, brass-only-where-needed
   ========================================================================= */

/* ------- Status pill (Consultancy "Coming Soon") ------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 22px;
  border: 1px solid var(--slate);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(255,255,255,0.02);
}
.status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 rgba(196,122,74,0.5);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(196,122,74,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(196,122,74,0);    }
  100% { box-shadow: 0 0 0 0   rgba(196,122,74,0);    }
}

/* ------- Editorial figure (single image with caption, full container width) ------- */
.editorial-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.editorial-figure-img {
  position: absolute;
  inset: 0;
}
.editorial-figure-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #0a0a0b;
  filter: grayscale(100%) contrast(1.05);
}
[data-theme="light"] .editorial-figure-img img {
  background: #f7f6f2;
}
.editorial-figure .caption {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,10,11,0.7);
  padding: 4px 10px;
}
@media (max-width: 760px) {
  .editorial-figure { aspect-ratio: 4/3.5; }
}

/* ------- Academy products (expandable) ------- */
.products {
  margin-top: var(--s-12);
  border-top: 1px solid var(--slate);
}
.product {
  border-bottom: 1px solid var(--slate);
  transition: background 0.4s var(--ease);
}
.product[open] {
  background: var(--graphite);
}
.product-summary {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: var(--s-8);
  padding: var(--s-8) 0;
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: padding 0.4s var(--ease);
}
.product[open] .product-summary { padding-left: var(--s-6); padding-right: var(--s-6); }
.product:hover .product-summary { padding-left: var(--s-3); }
.product-summary::-webkit-details-marker { display: none; }
.product-summary .n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brass);
  letter-spacing: 0.2em;
}
.product-title h3 {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0 0 var(--s-2);
}
.product-title p {
  font-size: var(--text-sm);
  color: var(--silver);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.product-toggle {
  justify-self: end;
  width: 28px;
  height: 28px;
  position: relative;
  border: 1px solid var(--slate);
  border-radius: 50%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.product:hover .product-toggle { border-color: var(--brass); }
.product-toggle .plus,
.product-toggle .plus::before {
  position: absolute;
  background: var(--bone);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.product-toggle .plus {
  top: 50%; left: 25%;
  width: 50%; height: 1px;
  transform: translateY(-50%);
}
.product-toggle .plus::before {
  content: '';
  top: -7px; left: 50%;
  width: 1px; height: 15px;
  transform: translateX(-50%);
}
.product[open] .product-toggle .plus::before { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.product:hover .product-toggle .plus,
.product:hover .product-toggle .plus::before { background: var(--brass); }

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  padding: 0 var(--s-6) var(--s-12);
  align-items: start;
}
.product-detail-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.product-detail-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}
.product-detail-img .caption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,10,11,0.7);
  padding: 4px 8px;
}
.product-detail-text { padding-top: var(--s-2); }
.product-detail-text .eyebrow { display: block; margin-bottom: var(--s-3); }
.product-audience {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.5;
  margin-bottom: var(--s-6);
  max-width: 50ch;
}
.product-detail-text p:not(.product-audience) {
  color: var(--silver);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 56ch;
}

.product-detail-text .topics-label {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--s-4);
  margin-bottom: var(--s-3);
}
.product-detail-text .topics-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6);
  max-width: 56ch;
  border-top: 1px solid rgba(236,236,234,0.08);
}
.product-detail-text .topics-list li {
  color: var(--silver);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--s-2) 0 var(--s-2) 24px;
  border-bottom: 1px solid rgba(236,236,234,0.08);
  position: relative;
}
.product-detail-text .topics-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--brass);
  transform: translateY(-50%);
}
.product-detail-text .product-bonus {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--brass);
  background: rgba(196,122,74,0.04);
}
.product-detail-text .product-origin {
  color: var(--pewter);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(236,236,234,0.08);
  max-width: 56ch;
}

@media (max-width: 880px) {
  .product-detail { grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-8); }
}
@media (max-width: 760px) {
  .product-summary {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
    padding-left: 0;
    padding-right: 0;
  }
  .product[open] .product-summary { padding-left: var(--s-3); padding-right: var(--s-3); }
  .product-detail { padding-left: 0; padding-right: 0; }
}

/* ------- About: Lac Cay full-bleed hero strip ------- */
.about-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  overflow: hidden;
  margin: var(--s-8) 0 var(--s-16);
}
.about-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}
.about-hero .caption {
  position: absolute;
  bottom: var(--s-4);
  right: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,10,11,0.7);
  padding: 4px 10px;
}
@media (max-width: 760px) {
  .about-hero { aspect-ratio: 16/10; }
}

/* ------- About: narrative blocks ------- */
.about-block {
  max-width: 78ch;
  margin: 0 auto;
}
.about-block .eyebrow {
  display: block;
  margin-bottom: var(--s-6);
}
.about-block h2 {
  margin-bottom: var(--s-8);
}
.about-block p {
  color: var(--silver);
  font-size: var(--text-base);
  line-height: 1.85;
  max-width: none;
  margin-bottom: var(--s-6);
}
.about-block p.lede {
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.65;
}

/* ------- About: specialised unit groups ------- */
.unit-group {
  margin: var(--s-8) 0 var(--s-6);
  padding-left: var(--s-6);
  border-left: 1px solid var(--brass);
}
.unit-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: var(--s-4);
}
.unit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.unit-list li {
  color: var(--bone);
  font-size: var(--text-sm);
  line-height: 1.7;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--slate);
}
.unit-list li:last-child { border-bottom: none; }

.allies {
  margin: var(--s-6) 0 0;
  padding: var(--s-6) var(--s-6);
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  line-height: 2;
  color: var(--silver);
  text-transform: uppercase;
}

/* ------- About: "LAC facilitates." closing line ------- */
.facilitates {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--bone);
  letter-spacing: -0.005em;
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--brass);
  max-width: 14ch;
}

/* ------- Founder portrait — taller, since portrait orientation ------- */
.editorial-img--portrait {
  aspect-ratio: 4/5;
  max-width: 460px;
  justify-self: end;
}
@media (max-width: 880px) {
  .editorial-img--portrait { aspect-ratio: 4/5; max-width: 100%; justify-self: stretch; }
}

/* =========================================================================
   v4 — Image logo, page logos, CSS-built Academy mark
   ========================================================================= */

/* Nav + footer image brand */
.brand--image { line-height: 0; }
.brand-image {
  display: block;
  height: 44px;          /* sits in the existing header row neatly */
  width: auto;
  /* The PNG is already near-bone on transparent; keep it crisp */
  image-rendering: -webkit-optimize-contrast;
}
.brand-image--footer { height: 56px; }

.site-header.is-scrolled .brand-image { height: 38px; transition: height 220ms var(--ease); }
.brand-image { transition: height 220ms var(--ease); }

@media (max-width: 720px) {
  .brand-image { height: 36px; }
  .brand-image--footer { height: 48px; }
}

/* Visually hidden — for retained semantic H1s when logo replaces the heading */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Page-level logo (Consultancy / Academy intro) */
.page-logo {
  margin-top: var(--s-8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.page-logo img {
  height: clamp(140px, 22vw, 220px);
  width: auto;
  display: block;
}

/* CSS-built Academy logo — matched to the LAC Consultancy mark:
   tall sans "LAC" stacked over a hairline rule and matching wide-set label */
.cssmark {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.6rem, 1vw, 0.9rem);
}
.cssmark-top {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(4.4rem, 9vw, 7rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--bone);
  display: block;
}
.cssmark-bar {
  display: block;
  width: clamp(200px, 28vw, 320px);
  height: 1.5px;
  background: var(--bone);
}
.cssmark-bot {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--bone);
  display: block;
}

@media (max-width: 720px) {
  .cssmark { gap: 0.55rem; }
  .page-logo img { height: clamp(120px, 36vw, 180px); }
}

/* ------- Prose block (centered, single-column, restrained) ------- */
.prose-block {
  max-width: 62ch;
  margin: 0 auto;
}
.prose-block .eyebrow {
  display: block;
  margin-bottom: var(--s-4);
}
.prose-block p + p { margin-top: var(--s-4); }

/* =========================================================================
   Instagram — official Instagram post embed in Contact sidebar
   Wraps the white Instagram widget with a discreet dark bezel so it sits
   harmoniously in the LAC dark surface without altering the widget itself.
   ========================================================================= */

.ig-live {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(236, 236, 234, 0.15);
}

.ig-live__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.ig-live__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pewter);
}

.ig-live__handle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--silver);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.ig-live__handle:hover { color: var(--brass); }

/* Container that hosts the Instagram <blockquote> / iframe. Provides the
   dark bezel and keeps the widget within the sidebar column width. */
.ig-embed {
  padding: 10px;
  background: var(--graphite, #141416);
  border: 1px solid rgba(236, 236, 234, 0.08);
}

/* Do not restyle the widget itself — Instagram’s script generates the
   iframe with its own styling. We only ensure it fills the column. */
.ig-embed .instagram-media {
  margin: 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 540px !important;
}
.ig-embed iframe.instagram-media {
  min-width: 0 !important;
  width: 100% !important;
}

/* ==============================================================
   ILCOR badge + Protocol line — First Aid / EFR training card
   Discrete, executive-protection tone. No flashy colors.
   ============================================================== */
.product-protocol {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  margin-top: var(--s-4);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--fg, #ececea);
}
.product-protocol .eyebrow {
  margin: 0;
}
.product-protocol > span:last-child {
  color: var(--fg, #ececea);
  font-weight: 500;
}

.ilcor-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-5);
  padding: 12px 16px 12px 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  text-decoration: none;
  max-width: 420px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.ilcor-badge:hover,
.ilcor-badge:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  outline: none;
}
.ilcor-badge img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.ilcor-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ilcor-badge__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.ilcor-badge__name {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .ilcor-badge {
    max-width: 100%;
  }
  .ilcor-badge img {
    width: 48px;
    height: 48px;
  }
  .ilcor-badge__name {
    font-size: 0.82rem;
  }
}

/* =========================================================================
   Theme toggle button (dark ↔ light)
   ========================================================================= */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: var(--s-2);
  background: transparent;
  border: 1px solid var(--slate);
  color: var(--bone);
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.theme-toggle:hover { border-color: var(--brass); color: var(--brass); }
.theme-toggle .theme-icon { display: block; }
.theme-toggle .theme-icon--sun { display: none; }
[data-theme="light"] .theme-toggle .theme-icon--moon { display: none; }
[data-theme="light"] .theme-toggle .theme-icon--sun  { display: block; }

/* =========================================================================
   Hero — themable H1 colors, tighter scale so title + CTA fit above the fold
   ========================================================================= */
.hero-h1 {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s-6);
}
.hero-h1__accent { color: var(--brass); }
.hero-h1__second { color: var(--bone); font-weight: 400; }
.hero-sub { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.55; max-width: 56ch; }

/* Give hero content a bit more room so full block is above the fold */
.hero-content { max-width: 60ch; }

/* =========================================================================
   Inline ILCOR badge on Academy summary — visible without opening the card
   ========================================================================= */
.ilcor-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--slate);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--overlay-1);
  width: fit-content;
}
.ilcor-inline img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

/* =========================================================================
   Footer tag on 3 lines — clean spacing
   ========================================================================= */
.footer-tag-3 { line-height: 1.55; }
.footer-tag-3 br + * { display: inline; }

/* =========================================================================
   LAC logo image — SVG uses currentColor, so tint via color
   ========================================================================= */
/* PNG logo is white — no color inheritance needed. Light-mode inversion
   handled by the [data-theme="light"] filter rule below. */

/* Product summary title colors adapt to theme */
.product-title h3 { color: var(--bone); }
.product-title p  { color: var(--pewter); }

/* Site header background adapts */
.site-header { background: var(--carbon); border-color: var(--slate); }

/* Ensure hero mark stays visible on both themes — handled by filter rule further down. */

/* Small refinements: eyebrow captions and links inherit correct token */
.eyebrow { color: var(--pewter); }

/* =========================================================================
   Header layout override — nav on the left, LAC logo centered, tools on the right
   ========================================================================= */
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
}
.site-nav {
  justify-self: start;
}
.brand.brand--image {
  justify-self: center;
  order: 0;
}
/* Right-hand tools cluster — language + theme + hamburger stacked horizontally */
.header-tools {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
/* Legacy fallback if wrapper missing */
.header-row > .lang, .header-row > .theme-toggle, .header-row > .menu-toggle {
  justify-self: end;
}

/* Bigger, more visible LAC wordmark */
.brand-image {
  height: 60px;
  width: auto;
  display: block;
}
/* In light mode the wordmark PNG is white — invert to near-black. */
[data-theme="light"] .brand-image,
[data-theme="light"] .brand-image--footer,
[data-theme="light"] .hero-mark img,
[data-theme="light"] .page-logo img {
  filter: brightness(0) saturate(100%);
}
.site-header.is-scrolled .brand-image { height: 48px; }

@media (max-width: 900px) {
  .header-row {
    grid-template-columns: auto 1fr auto;
  }
  .site-nav { grid-column: 1; }
  .brand.brand--image { grid-column: 2; justify-self: center; }
  .brand-image { height: 48px; }
}

@media (max-width: 720px) {
  .header-row {
    grid-template-columns: 1fr auto 1fr;
  }
  .brand-image { height: 42px; }
  .site-header.is-scrolled .brand-image { height: 36px; }
}

/* ============================================================
   LIGHT MODE — Hero scrim + tactical map inversion
   The hero uses a dark linear-gradient scrim (::after) and a
   dark tactical map SVG. Both must be inverted in light mode
   so headings remain legible on a light hero.
   ============================================================ */
[data-theme="light"] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(247,246,242,0.55) 0%, rgba(247,246,242,0.30) 40%, rgba(247,246,242,0.95) 100%),
    linear-gradient(90deg, rgba(247,246,242,0.75) 0%, rgba(247,246,242,0.0) 60%);
}
[data-theme="light"] .hero-media--map { background: #f7f6f2; }
[data-theme="light"] .tac-map .tac-land path { stroke: rgba(23,24,26,0.35); fill: rgba(23,24,26,0.05); }
[data-theme="light"] .tac-map .tac-grid line,
[data-theme="light"] .tac-map .tac-grid path { stroke: rgba(23,24,26,0.12); }
[data-theme="light"] .tac-map .tac-labels text { fill: rgba(23,24,26,0.55); }
[data-theme="light"] .tac-map .tac-tag text,
[data-theme="light"] .tac-map .tac-tag rect { fill: rgba(23,24,26,0.85); }
[data-theme="light"] .tac-map .tac-dot { fill: #a85f30; }
[data-theme="light"] .tac-map .tac-ring { stroke: #a85f30; }
[data-theme="light"] .tac-map .tac-glow { fill: #a85f30; opacity: 0.15; }

/* Ghost buttons in light mode: dark border/text; filled buttons keep
   their dark bg with white text so contrast holds on light hero. */
[data-theme="light"] .btn:not(.btn--filled),
[data-theme="light"] .btn-ghost {
  color: var(--fg);
  border-color: var(--fg);
}
[data-theme="light"] .btn:not(.btn--filled):hover {
  color: var(--brass);
  border-color: var(--brass);
}
[data-theme="light"] .btn--filled {
  background: var(--fg);
  color: #ffffff;
  border-color: var(--fg);
}
[data-theme="light"] .btn--filled:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #ffffff;
}

/* Academy page sub-brand: LAC wordmark + ACADEMY label */
.page-logo--academy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.page-logo--academy img {
  height: 90px;
  width: auto;
}
.page-logo--academy .page-logo-tag {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--pewter);
  font-weight: 500;
  padding-left: 4px;
}
[data-theme="light"] .page-logo--academy .page-logo-tag { color: #55575b; }

/* Coming Soon pathway — balanced with a subtle centered LAC mark */
.pathway--soon .pathway-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  opacity: 0.12;
  transition: opacity 0.6s var(--ease);
}
.pathway--soon .pathway-mark img {
  width: 42%;
  max-width: 260px;
  height: auto;
  filter: none;
}
.pathway--soon:hover .pathway-mark { opacity: 0.22; }
[data-theme="light"] .pathway--soon .pathway-mark img { filter: brightness(0); }

/* =====================================================================
   Coming Soon page — clean centered layout
   ===================================================================== */
.page-intro--soon {
  padding-top: clamp(4rem, 10vh, 8rem);
  padding-bottom: clamp(4rem, 10vh, 8rem);
}
.soon-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
  max-width: 640px;
}
.soon-stack .page-logo--soon {
  margin: 0 0 var(--s-4) 0;
  justify-content: center;
}
.page-logo--soon img {
  height: clamp(90px, 12vw, 130px);
  width: auto;
}
.soon-stack h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.soon-stack .lede {
  max-width: 42ch;
  margin: 0;
}

/* =====================================================================
   Academy page — heritage LAC Academy mark (image-based, not stacked)
   ===================================================================== */
.page-logo--academy {
  justify-content: flex-start;
  margin-top: var(--s-8);
}
.page-logo--academy img {
  height: clamp(120px, 16vw, 180px);
  width: auto;
  display: block;
}
/* Light-mode: original mark is white-on-transparent — invert to black */
[data-theme="light"] .page-logo--academy img {
  filter: brightness(0);
}

/* =====================================================================
   LIGHT MODE FIXES — cards and pathway tiles
   Photos and tile backgrounds were inheriting a dark-mode filter that made
   them look washed out / weird in light theme.
   ===================================================================== */

/* Pathway tiles (home) — in light theme, the tile becomes a photo card with
   a white surface below, so the photo reads fully visible instead of ghosted.
   The border is intentionally strong in light mode so the two cards read as
   distinct panels against the cream page background. */
[data-theme="light"] .pathways {
  gap: 2px;
  background: #17181a;
  border-top: 1.5px solid #17181a;
  border-bottom: 1.5px solid #17181a;
}
[data-theme="light"] .pathway {
  background: #ffffff;
  border: 0;
}
[data-theme="light"] .pathway-img {
  opacity: 1;
  transform: none;
}
[data-theme="light"] .pathway-img img {
  filter: grayscale(100%) contrast(1.03) brightness(1);
  object-position: center 30%;
}
[data-theme="light"] .pathway-img::after {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, rgba(255,255,255,0.30) 88%, rgba(255,255,255,0.75) 100%);
}
[data-theme="light"] .pathway:hover .pathway-img { opacity: 1; transform: none; }
[data-theme="light"] .pathway:hover .pathway-img img { filter: grayscale(100%) contrast(1.05) brightness(1.02); }
[data-theme="light"] .pathway:hover .pathway-img::after { opacity: 1; }
[data-theme="light"] .pathway h2,
[data-theme="light"] .pathway p,
[data-theme="light"] .pathway .pathway-num,
[data-theme="light"] .pathway .pathway-link { color: #1a1a1a; }

/* Editorial figure — filter tuning (light mode slightly softer) */
[data-theme="light"] .editorial-figure-img img {
  filter: grayscale(100%) contrast(1.02) brightness(0.98);
  background: #f7f6f2;
}


/* Principle cards (three small cards below hero) — stronger separators in light mode */
[data-theme="light"] .principle {
  border-top: 1.5px solid #17181a;
}
[data-theme="light"] .principle p {
  color: #3f4145;
}

/* =====================================================================
   Centered page-intro (Academy + Coming Soon share this layout)
   ===================================================================== */
.page-intro--centered {
  padding-top: clamp(3rem, 8vh, 6rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
.page-intro--centered .soon-stack h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 22ch;
}
.page-intro--centered .soon-stack .lede {
  max-width: 52ch;
}
.page-logo--centered {
  justify-content: center;
  margin: 0 auto var(--s-4) auto;
}
.page-logo--academy.page-logo--centered img {
  height: clamp(110px, 15vw, 160px);
}

/* =====================================================================
   LIGHT MODE — Pathway tiles: framed cards with thick dark border for
   maximum separation on cream background. Belt-and-braces: also add
   individual border to each tile so the frame is guaranteed visible.
   ===================================================================== */
[data-theme="light"] .pathways {
  gap: 0;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
}
[data-theme="light"] .pathway {
  background: #ffffff;
  outline: 2px solid #17181a;
  outline-offset: -2px;
}
[data-theme="light"] .pathway + .pathway {
  border-left: 0;
}
[data-theme="light"] .pathway:first-child { margin-right: -1px; }

/* =====================================================================
   LIGHT MODE — Regional/Hero map: light card treatment
   The dark background from `.region-map` and `.hero-media--map` looked
   like an orphan black block in light mode. Override with cream surface,
   dark landmass contours, warm-orange dots.
   ===================================================================== */

/* Hero background map — subtle cream wash with visible landmass outlines */
[data-theme="light"] .hero-media--map {
  background: #efece5;
}
[data-theme="light"] .hero-media--map .tac-map .tac-land path {
  stroke: rgba(23,24,26,0.55);
  stroke-width: 0.9;
  fill: rgba(23,24,26,0.08);
}
[data-theme="light"] .hero-media::after {
  background: linear-gradient(90deg,
    rgba(247,246,242,0.92) 0%,
    rgba(247,246,242,0.55) 45%,
    rgba(247,246,242,0.2) 100%);
}

/* Regional footprint mini-map — cream card, dark contours */
[data-theme="light"] .region-map {
  background: #ffffff;
  border: 1.5px solid #17181a;
  border-radius: 4px;
}
[data-theme="light"] .region-map .tac-map--mini .tac-land path {
  stroke: rgba(23,24,26,0.65);
  stroke-width: 1;
  fill: rgba(23,24,26,0.06);
}
[data-theme="light"] .region-map .tac-map--mini .tac-grid line,
[data-theme="light"] .region-map .tac-map--mini .tac-grid path {
  stroke: rgba(23,24,26,0.10);
}
[data-theme="light"] .region-map .tac-map--mini .tac-labels text {
  fill: rgba(23,24,26,0.65);
}
[data-theme="light"] .region-map .tac-map--mini .tac-tag rect {
  fill: rgba(23,24,26,0.90);
}
[data-theme="light"] .region-map .tac-map--mini .tac-tag text {
  fill: #f7f6f2;
}
[data-theme="light"] .region-map .tac-map--mini .tac-dot {
  fill: #c85a1a;
}
[data-theme="light"] .region-map .tac-map--mini .tac-ring {
  stroke: #c85a1a;
}
[data-theme="light"] .region-map .tac-map--mini .tac-glow {
  fill: #c85a1a;
  opacity: 0.22;
}

/* Hide dark SVG overlays in light-mode (they were baked-in as #0a0a0b) */
[data-theme="light"] .tac-map .tac-vignette-overlay,
[data-theme="light"] .tac-map .tac-fade-overlay {
  display: none;
}

/* =====================================================================
   Original-color photo exception (e.g. tarmac photo with orange privacy
   bars) — keep true colors, skip the grayscale treatment applied to
   other pathway tile images, in every theme/state.
   ===================================================================== */
.pathway-img--original img,
.pathway:hover .pathway-img--original img,
[data-theme="light"] .pathway-img--original img,
[data-theme="light"] .pathway:hover .pathway-img--original img {
  filter: none;
}