/* ==========================================================================
   AdriaMeridian — Design tokens
   ========================================================================== */

:root {
  /* Color system */
  --ink: #0E1A2B;
  --ink-soft: #1C2A36; /* ink blended toward slate-surface — the "panel" use of the secondary green */
  --slate-detail: #43524A;
  --slate-surface: #5A7568;
  --bronze: #B4966B;
  --bronze-bright: #C7A97E;
  --off-white: #F4F1EA;
  --stone: #C9C2B0;
  --stone-hairline: rgba(201, 194, 176, 0.4);
  --ink-hairline: rgba(244, 241, 234, 0.14);
  --hairline-detail: rgba(67, 82, 74, 0.3); /* slate-detail — dividers/chart-line use */

  --text-on-light: var(--ink);
  --text-on-light-soft: var(--slate-detail);
  --text-on-dark: var(--off-white);
  --text-on-dark-soft: rgba(244, 241, 234, 0.68);

  /* Type */
  --font-display: 'Domine', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --size-eyebrow: clamp(0.7rem, 0.66rem + 0.15vw, 0.8rem);
  --size-body: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  --size-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --size-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --size-h3: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  --size-h2: clamp(2.1rem, 1.7rem + 1.6vw, 3.25rem);
  --size-h1: clamp(2.6rem, 1.9rem + 2.8vw, 5.25rem);
  --size-stat: clamp(2.4rem, 1.9rem + 2vw, 4rem);

  /* Spacing */
  --space-section: clamp(5rem, 4rem + 4vw, 11.25rem);
  --space-section-sm: clamp(3.5rem, 3rem + 2vw, 6rem);
  --gutter: clamp(1.5rem, 1rem + 2vw, 7.5rem);

  --container-max: 1440px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 600ms;
  --dur-fast: 220ms;
  --dur-hover: 130ms;

  --radius: 0px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

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

body {
  margin: 0;
  background: var(--off-white);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p, figure { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink);
  color: var(--off-white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

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

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

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-detail);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

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

.eyebrow--plain::before { display: none; }

/* Bronze is a single-use signal color — reserved for CTAs, numerals, and
   rule lines. Eyebrows sitting on dark/ink surfaces switch to bronze only
   because the slate greens don't carry enough contrast against ink. */
.hero .eyebrow,
.section--ink .eyebrow,
.image-band .eyebrow,
.mobile-nav .eyebrow,
.stub-hero .eyebrow,
.page-hero .eyebrow,
.insights-hero-feature .eyebrow,
.cta-band .eyebrow {
  color: var(--bronze);
}
.hero .eyebrow::before,
.section--ink .eyebrow::before,
.image-band .eyebrow::before,
.mobile-nav .eyebrow::before,
.stub-hero .eyebrow::before,
.page-hero .eyebrow::before,
.insights-hero-feature .eyebrow::before,
.cta-band .eyebrow::before {
  background: var(--bronze);
}

.display-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-h3);
  line-height: 1.18;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-h4);
  line-height: 1.25;
}

.lede {
  font-size: var(--size-body-lg);
  color: var(--text-on-light-soft);
  line-height: 1.55;
  max-width: 42ch;
}

.on-dark { color: var(--text-on-dark); }
.on-dark .lede,
.on-dark p { color: var(--text-on-dark-soft); }

.numeral {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums oldstyle-nums;
  font-feature-settings: 'onum' 1, 'tnum' 1;
}

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

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

.section--sm { padding-block: var(--space-section-sm); }
.section--top-sm { padding-top: var(--space-section-sm); }
.section--bottom-sm { padding-bottom: var(--space-section-sm); }

.section--ink {
  background: var(--ink);
  color: var(--text-on-dark);
}

.section--surface {
  background: var(--slate-surface);
  color: var(--off-white);
}

.rule {
  height: 1px;
  background: var(--bronze);
  width: 64px;
}

.hairline {
  height: 1px;
  background: var(--stone-hairline);
  border: none;
  margin: 0;
}

.hairline--dark { background: var(--ink-hairline); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3.5rem);
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1rem 1.75rem;
  border: 1px solid currentColor;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  color: var(--bronze);
  border-color: var(--bronze);
}
.btn--primary:hover {
  background: var(--bronze);
  color: var(--ink);
}

.btn--ghost {
  color: var(--off-white);
  border-color: var(--ink-hairline);
}
.btn--ghost:hover {
  border-color: var(--off-white);
}

.btn--dark {
  color: var(--ink);
  border-color: var(--ink);
}
.btn--dark:hover {
  background: var(--ink);
  color: var(--off-white);
}

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding-bottom: 0.2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--dur-fast) var(--ease-out);
}
.link-underline:hover { background-size: 100% 1px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.6rem;
  transition: background var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(14, 26, 43, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  padding-block: 1.1rem;
  border-color: var(--ink-hairline);
}

/* Pages that open directly on a light section (no dark hero for the
   transparent header to float over) keep it solid from the start. */
body.header-solid .site-header {
  background: rgba(14, 26, 43, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  padding-block: 1.1rem;
  border-color: var(--ink-hairline);
}

/* Was `justify-content: space-between` with two children (brand, main-nav).
   Adding .lang-switch as an always-visible third child broke that — with
   three flex items, space-between spreads all three across the row with
   equal gaps instead of clustering main-nav against lang-switch on the
   right. `margin-left: auto` on .main-nav does the clustering instead: it
   eats all the free space in one jump before main-nav, so main-nav,
   lang-switch, and nav-toggle sit together at the end regardless of how
   many of them there are. */
.site-header .container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--off-white);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid var(--bronze);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--bronze);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.brand-tagline {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bronze);
  margin-top: 0.3rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.75rem + 0.55vw, 1.5rem);
  margin-left: auto;
}

.main-nav a {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-on-dark-soft);
  position: relative;
  padding-block: 0.3rem;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--off-white);
}

.main-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bronze);
}

/* .nav-cta is gone — the header's last item is now a plain "Contact" nav link
   like every other one, not a button. */

/* Language switcher — a native <details>/<summary> disclosure, not a JS
   dropdown, in keeping with the site's zero-dependency JS. It's a sibling of
   .main-nav, not a child, so it stays visible at every viewport width
   (.main-nav itself is `display:none` under 900px) — the point is that the
   language control is always reachable without opening the mobile menu. */
.lang-switch {
  position: relative;
  flex-shrink: 0;
  margin-left: clamp(0.25rem, 0.1rem + 0.5vw, 1rem);
}

.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-on-dark-soft);
  border: 1px solid var(--ink-hairline);
  padding: 0.45rem 0.7rem;
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ''; }

.lang-switch summary:hover,
.lang-switch[open] summary {
  color: var(--off-white);
  border-color: var(--bronze);
}

.lang-switch summary svg { width: 9px; height: 6px; transition: transform var(--dur-fast) var(--ease-out); }
.lang-switch[open] summary svg { transform: rotate(180deg); }

/* No backdrop-filter here (unlike the header's own blur) — at 0.97 opacity
   the background is already near-solid, so blur added GPU compositing cost
   (stacked right next to the header's own blur layer when open) for a
   visual difference that was imperceptible. */
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 128px;
  background: rgba(14, 26, 43, 0.99);
  border: 1px solid var(--ink-hairline);
  z-index: 10;
}

.lang-switch__menu a,
.lang-switch__menu span {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.lang-switch__menu a { color: var(--text-on-dark-soft); }
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible { color: var(--off-white); }
.lang-switch__menu span { color: var(--bronze); }

.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink-hairline);
  color: var(--off-white);
  align-items: center;
  justify-content: center;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 420ms var(--ease-out);
}

.mobile-nav.is-open { transform: translateY(0); }

/* Author `display: flex` above beats the UA [hidden] rule by cascade
   origin regardless of specificity, so the `hidden` attribute alone was
   never actually removing this from the render tree — only the transform
   was hiding it, which can slip during viewport-height changes (mobile
   address-bar collapse) or a pre-CSS paint. This makes `hidden` real. */
.mobile-nav[hidden] { display: none; }

/* Decorative glow — purely atmospheric, sits behind everything */
.mobile-nav::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -20%;
  width: 65%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(180, 150, 107, 0.18) 0%, rgba(180, 150, 107, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.mobile-nav .eyebrow,
.mobile-nav ul {
  position: relative;
  z-index: 1;
}

.mobile-nav ul { display: flex; flex-direction: column; gap: 0.85rem; }

.mobile-nav .eyebrow { margin-bottom: 2rem; }

.mobile-nav li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}

.mobile-nav.is-open li { opacity: 1; transform: translateY(0); }

.mobile-nav.is-open li:nth-child(1) { transition-delay: 60ms; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: 100ms; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: 140ms; }
.mobile-nav.is-open li:nth-child(4) { transition-delay: 180ms; }
.mobile-nav.is-open li:nth-child(5) { transition-delay: 220ms; }
.mobile-nav.is-open li:nth-child(6) { transition-delay: 260ms; }
.mobile-nav.is-open li:nth-child(7) { transition-delay: 300ms; }

.mobile-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 2.2vw, 1.95rem);
  color: var(--off-white);
  padding-bottom: 0.2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 280ms var(--ease-out), color 280ms var(--ease-out);
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: var(--bronze-bright);
  background-size: 100% 2px;
}

.mobile-nav-index {
  font-family: var(--font-display);
  font-size: 0.48em;
  color: var(--bronze);
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}

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

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.55) 0%, rgba(14,26,43,0.35) 32%, rgba(14,26,43,0.72) 78%, var(--ink) 100%),
    linear-gradient(90deg, rgba(14,26,43,0.6) 0%, rgba(14,26,43,0.1) 55%);
}

.hero-inner {
  padding-block: clamp(7rem, 5rem + 6vw, 9rem) clamp(3.5rem, 2.5rem + 3vw, 5rem);
  width: 100%;
}

.hero-eyebrow { margin-bottom: 1.75rem; }

@media (max-width: 900px) {
  .eyebrow--hide-mobile { display: none; }
}

.hero .display-1 {
  max-width: 17ch;
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.hero-sub {
  max-width: 46ch;
  font-size: var(--size-body-lg);
  color: var(--text-on-dark-soft);
  margin-bottom: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
}

.hero-actions {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: var(--ink-hairline);
  position: relative;
  overflow: hidden;
}
.scroll-cue .line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0;
  height: 100%;
  background: var(--bronze);
  animation: scrollcue 2.2s var(--ease-out) infinite;
}
@keyframes scrollcue {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ==========================================================================
   Stats strip
   ========================================================================== */

.stats-strip {
  background: var(--ink);
  color: var(--off-white);
  border-top: 1px solid var(--ink-hairline);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  position: relative;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
  border-left: 1px solid var(--ink-hairline);
}
.stat:first-child { border-left: none; }

/* Stat bar — the "surface" green used as a large-block panel accent,
   sized loosely to each stat's relative weight in the set. */
.stat::before {
  content: '';
  position: absolute;
  top: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
  left: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
  width: 44px;
  height: 3px;
  background: var(--slate-surface);
}
.stat:nth-child(2)::before { width: 34px; }
.stat:nth-child(3)::before { width: 24px; }
.stat:nth-child(4)::before { width: 30px; }

.stat-value {
  font-size: var(--size-stat);
  color: var(--bronze-bright);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}

.stat-suffix { font-size: 0.5em; }

.stat-label {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-on-dark-soft);
  max-width: 20ch;
}

/* ==========================================================================
   About teaser
   ========================================================================== */

.about-teaser .grid-12 { align-items: start; }

.about-copy { grid-column: 1 / span 7; }
.about-figure { grid-column: 8 / span 5; }

.about-figure {
  position: relative;
}

/* 4:3 rather than a tall portrait or the old square: the source photo is a
   wide desk composition, and cropping it narrower loses the second laptop
   and the sketched timeline that make the shot legible at all. */
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.15) saturate(0.85) contrast(1.05) brightness(0.96);
}

.about-figure::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% - 2.6rem);
  background: rgba(14, 26, 43, 0.14);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.about-figure figcaption {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-on-light-soft);
  border-top: 1px solid var(--stone-hairline);
  padding-top: 0.75rem;
}

.about-copy p + p { margin-top: 1.25rem; }

.about-copy .lede { max-width: none; margin: 1.75rem 0 2.5rem; }

/* ==========================================================================
   Image band (full-bleed statement break)
   ========================================================================== */

.image-band {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}

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

.image-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.05) brightness(0.95);
}

.image-band-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.78) 0%, rgba(14,26,43,0.5) 45%, rgba(14,26,43,0.82) 100%);
}

.image-band-inner { padding-block: clamp(3.5rem, 3rem + 2vw, 5rem); }

.image-band .display-2 { max-width: 20ch; }

.image-band-cite {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--text-on-dark-soft);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Closing CTA band — the terminal moment on every interior page.

   A low-poly world map sits behind an ink veil that is darkest dead-centre
   (where the copy sits) and opens up toward the edges, so the map reads as
   texture blooming out of the sides rather than a photo with text dumped on
   it. The veil closes to solid --ink at the very bottom so the band
   dissolves straight into the ink footer beneath it with no seam.

   All entrance motion here uses `animation` + `animation-delay`, never
   `transition-delay` — see the note on .reveal further down.
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(27rem, 23rem + 13vw, 38rem);
  padding-block: clamp(5rem, 4rem + 4vw, 8rem);
  background: var(--ink);
  color: var(--text-on-dark);
}

/* --- Layer 1: the map ---------------------------------------------------
   The wrapper carries the JS scroll parallax; the <img> inside carries its
   own slow CSS drift. Two separate elements on purpose so the two motions
   never fight over the same transform property. */
.cta-band__bg {
  position: absolute;
  inset: -9% 0;
  z-index: -3;
  will-change: transform;
}

.cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 55% 50%;
  filter: saturate(1.05) contrast(1.02) brightness(0.86);
  animation: cta-map-drift 40s ease-in-out infinite alternate;
}

@keyframes cta-map-drift {
  from { transform: scale(1.04) translate3d(-0.9%, 0.4%, 0); }
  to   { transform: scale(1.12) translate3d(0.9%, -1.1%, 0); }
}

/* --- Layer 2: the veil --------------------------------------------------
   The veil is a green-black pulled out of the image's own darkest tone, not
   --ink. Laying navy over the map neutralised its green entirely and the
   band just read as another ink section with noise in it; keeping the veil
   in the image's own hue family lets the low-poly green survive.

   Radial darkens the centre where the copy sits (every text colour here
   clears 4.8:1 against the composite, measured on the lightest polygon in
   the image); the linear seals top and bottom back to solid --ink so the
   band meets the light section above with a clean edge and dissolves into
   the ink footer below with no visible seam. */
.cta-band__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 70% at 50% 50%,
      rgba(18, 30, 26, 0.68) 0%,
      rgba(18, 30, 26, 0.38) 62%,
      rgba(18, 30, 26, 0.24) 100%),
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(18, 30, 26, 0.22) 22%,
      rgba(18, 30, 26, 0.22) 64%,
      var(--ink) 100%);
}

/* --- Layer 3: the meridian net -----------------------------------------
   Two bronze arcs meeting at a hub — the Adriatic corridor reaching west.
   pathLength="500" normalises both paths so one set of dash keyframes
   drives arcs of different real lengths. */
.cta-band__net {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  /* Erase the net across the middle of the band so neither the hairlines nor
     the travelling signal ever tracks across the copy — the arcs read as
     passing behind the text and re-emerging on the far side. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 17%, transparent 27%, transparent 73%, #000 83%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 17%, transparent 27%, transparent 73%, #000 83%, #000 100%);
}

.cta-band.is-visible .cta-band__net {
  animation: cta-fade-in 900ms var(--ease-out) 220ms forwards;
}

.cta-arc {
  fill: none;
  stroke: var(--bronze);
  stroke-width: 1;
  stroke-opacity: 0.42;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.cta-band.is-visible .cta-arc {
  animation: cta-draw 1700ms var(--ease-out) 320ms forwards;
}
.cta-band.is-visible .cta-arc:nth-of-type(2) { animation-delay: 520ms; }

/* The travelling signal: a short bright dash chasing each arc, forever. */
.cta-arc--signal {
  stroke: var(--bronze-bright);
  stroke-opacity: 0.9;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 7 493;
}

.cta-band.is-visible .cta-arc--signal {
  animation: cta-signal 5.5s linear 1600ms infinite;
}
.cta-band.is-visible .cta-arc--signal:nth-of-type(2) { animation-delay: 3.6s; }

.cta-node,
.cta-node-ring {
  transform-box: fill-box;
  transform-origin: center;
}

.cta-node {
  fill: var(--bronze-bright);
  opacity: 0.85;
}
.cta-node--hub { fill: var(--off-white); }

.cta-node-ring {
  fill: none;
  stroke: var(--bronze);
  stroke-width: 1;
  opacity: 0;
}

.cta-band.is-visible .cta-node-ring {
  animation: cta-pulse 4.4s var(--ease-out) 1.4s infinite;
}
.cta-band.is-visible .cta-node-ring:nth-of-type(2) { animation-delay: 3.2s; }

/* --- The descending thread ---------------------------------------------
   A single bronze hairline dropping in from the top edge — draws the eye
   down into the band before anything else moves. */
.cta-band__thread {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  background: linear-gradient(180deg, rgba(180, 150, 107, 0) 0%, var(--bronze) 100%);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
}

.cta-band.is-visible .cta-band__thread {
  animation: cta-thread 900ms var(--ease-out) 80ms forwards;
}

/* --- Content ------------------------------------------------------------ */

.cta-band__inner {
  position: relative;
  max-width: min(46rem, 100%);
  margin-inline: auto;
  text-align: center;
}

/* The map lifts the composite behind this eyebrow past what plain --bronze
   can carry at 12.5px. This one instance steps up to --bronze-bright, which
   clears 5.5:1 even against the lightest polygon in the image. */
.cta-band .eyebrow,
.cta-band .eyebrow::before,
.cta-band__eyebrow::after {
  color: var(--bronze-bright);
  background-color: var(--bronze-bright);
}
.cta-band .eyebrow { background-color: transparent; }

/* Centred eyebrow gets a mirrored rule so it stays symmetrical. */
.cta-band__eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  display: inline-block;
}

.cta-band__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.15rem, 1.65rem + 2.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 1.5rem 0 0;
  text-wrap: balance;
}

/* Each line is its own mask so the text slides up from behind a hard edge. */
.cta-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.cta-line > span {
  display: block;
  transform: translateY(115%);
}

.cta-band.is-visible .cta-line > span {
  animation: cta-line-in 900ms var(--ease-out) forwards;
}
.cta-band.is-visible .cta-line:nth-child(1) > span { animation-delay: 260ms; }
.cta-band.is-visible .cta-line:nth-child(2) > span { animation-delay: 370ms; }
.cta-band.is-visible .cta-line:nth-child(3) > span { animation-delay: 480ms; }

.cta-band__lede {
  font-size: var(--size-body-lg);
  line-height: 1.55;
  color: var(--text-on-dark-soft);
  max-width: 44ch;
  margin: 1.75rem auto 0;
  text-wrap: pretty;
}

.cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem 2.25rem;
  margin-top: clamp(2.25rem, 1.9rem + 1.2vw, 3.25rem);
}

/* Bronze wash behind the primary button so it reads as a lit object on the
   map rather than an outline floating over it. */
.cta-band__actions .btn--primary {
  background: rgba(14, 26, 43, 0.6);
  box-shadow: 0 0 0 0 rgba(180, 150, 107, 0.4);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.cta-band__actions .btn--primary:hover {
  background: var(--bronze);
  color: var(--ink);
  box-shadow: 0 0 0 6px rgba(180, 150, 107, 0.14);
}

.cta-band__mail {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  background-image: linear-gradient(var(--bronze), var(--bronze));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 3px;
  transition: background-size 280ms var(--ease-out), color 280ms var(--ease-out);
}
.cta-band__mail:hover {
  color: var(--bronze-bright);
  background-size: 100% 1px;
}

.cta-band__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* Column gap is tuned so the group separator occupies the same ~17px as an
     inline "·" between two cities — at 1rem it was 35px and read as a hole in
     the middle of the line. */
  gap: 0.5rem 0.43rem;
  margin: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.62);
}

/* Divider between the regional cities and the capital-reach cities. It was
   bronze, which made one dot in an otherwise even line jump out as a highlight;
   it now matches the surrounding text so the whole line reads as one rhythm. */
.cta-band__meta-sep {
  width: 3px;
  height: 3px;
  background: rgba(244, 241, 234, 0.62);
  display: inline-block;
}

/* Staggered entrance for everything that isn't line-masked. */
.cta-band__eyebrow,
.cta-band__lede,
.cta-band__actions,
.cta-band__meta {
  opacity: 0;
}

.cta-band.is-visible .cta-band__eyebrow { animation: cta-rise 700ms var(--ease-out) 140ms forwards; }
.cta-band.is-visible .cta-band__lede    { animation: cta-rise 700ms var(--ease-out) 560ms forwards; }
.cta-band.is-visible .cta-band__actions { animation: cta-rise 700ms var(--ease-out) 680ms forwards; }
.cta-band.is-visible .cta-band__meta    { animation: cta-rise 700ms var(--ease-out) 800ms forwards; }

@keyframes cta-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cta-line-in {
  from { transform: translateY(115%); }
  to   { transform: translateY(0); }
}

@keyframes cta-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cta-thread {
  from { transform: translateX(-50%) scaleY(0); }
  to   { transform: translateX(-50%) scaleY(1); }
}

@keyframes cta-draw {
  from { stroke-dashoffset: 500; }
  to   { stroke-dashoffset: 0; }
}

@keyframes cta-signal {
  from { stroke-dashoffset: 500; }
  to   { stroke-dashoffset: 0; }
}

@keyframes cta-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  55%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* No perpetual motion for anyone who's asked us to stop. The global
   reduced-motion block already collapses the entrance animations to their
   end state; these rules kill the looping ones outright. */
@media (prefers-reduced-motion: reduce) {
  .cta-band__bg img,
  .cta-band.is-visible .cta-arc--signal,
  .cta-band.is-visible .cta-node-ring {
    animation: none !important;
  }
  .cta-band__bg img { transform: scale(1.06); }
  .cta-band__net { opacity: 1; }
  .cta-arc { stroke-dashoffset: 0; }
}

@media (max-width: 900px) {
  .cta-band { min-height: 0; }
  .cta-band__inner { max-width: 34ch; }
  .cta-band__lede { max-width: 40ch; }
}

@media (max-width: 700px) {
  .cta-band__actions { flex-direction: column; gap: 1.5rem; }
  .cta-band__actions .btn { width: 100%; justify-content: center; }

  /* Stacked, so the bronze separator dot would just dangle off the end of
     the first line — drop it and let the two coverage lines sit as rows. */
  .cta-band__meta { flex-direction: column; gap: 0.45rem; font-size: 0.72rem; letter-spacing: 0.12em; }
  .cta-band__meta-sep { display: none; }
}

/* ==========================================================================
   Sector expertise
   ========================================================================== */

.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-detail);
  border: 1px solid var(--hairline-detail);
}

.sector-card {
  background: var(--off-white);
  padding: clamp(1.75rem, 1.4rem + 1vw, 2.75rem);
  transition: background var(--dur-hover) var(--ease-out);
}

.sector-card:hover { background: #DBDDD5; }

.sector-icon-wrap {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--slate-surface);
  margin-bottom: 1.5rem;
  transition: background var(--dur-hover) var(--ease-out);
}

.sector-card:hover .sector-icon-wrap { background: var(--slate-detail); }

.sector-icon {
  width: 26px;
  height: 26px;
  color: var(--off-white);
}

.sector-card h4 { font-size: var(--size-body-lg); margin-bottom: 0.6rem; }

.sector-card p {
  color: var(--text-on-light-soft);
  font-size: 0.92rem;
}

/* Closing CTA bar — sits flush against the bottom edge of .sector-grid so the
   two read as one block. Deliberately kept light: an ink bar against the
   off-white page read as a hard slab and pulled more attention than the grid
   above it. It then went bronze, which stood apart from its surroundings for
   the same reason — nothing else in this section is bronze. It's now built from
   the slate greens the sector grid already uses, so the bar reads as the last
   row of the grid rather than as a separate object: the button picks up the
   exact green of the card icon tiles directly above it. */
.sector-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  flex-wrap: wrap;
  background: rgba(90, 117, 104, 0.1);
  color: var(--text-on-light);
  padding: clamp(1.75rem, 1.4rem + 1vw, 2.75rem);
  border: 1px solid var(--hairline-detail);
  border-top: 0;
  transition: background var(--dur-fast) var(--ease-out);
}

.sector-cta:hover { background: rgba(90, 117, 104, 0.17); }

.sector-cta .eyebrow { color: var(--slate-detail); }
.sector-cta__copy { max-width: 46ch; }

.sector-cta__copy p {
  margin-top: 0.75rem;
  font-size: var(--size-body-lg);
  font-family: var(--font-display);
  line-height: 1.4;
}

.sector-cta__action {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  background: var(--slate-surface);
  color: var(--off-white);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1rem 1.75rem;
  border: 1px solid var(--slate-surface);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.sector-cta__action svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.sector-cta:hover .sector-cta__action {
  background: var(--slate-detail);
  border-color: var(--slate-detail);
  color: var(--off-white);
}
.sector-cta:hover .sector-cta__action svg { transform: translateX(4px); }

/* ==========================================================================
   Track record / tombstones
   ========================================================================== */

.tombstone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-hairline);
  border: 1px solid var(--ink-hairline);
}

.tombstone {
  background: var(--ink-soft);
  padding: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tombstone-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.tombstone-tag {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze-bright);
  border: 1px solid rgba(196, 166, 122, 0.4);
  padding: 0.35rem 0.7rem;
}

.tombstone-size {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--off-white);
}

.tombstone h4 {
  color: var(--off-white);
  font-size: var(--size-body-lg);
  line-height: 1.35;
}

.tombstone-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-on-dark-soft);
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-hairline);
}

.tombstone-meta span { display: block; }
.tombstone-meta strong {
  display: block;
  color: var(--off-white);
  font-weight: 500;
  margin-top: 0.2rem;
}

.tombstone-note {
  margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  font-size: 0.85rem;
  color: var(--text-on-dark-soft);
  max-width: 60ch;
}

/* ==========================================================================
   Team
   ========================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.team-card { border-top: 1px solid var(--hairline-detail); padding-top: 1.75rem; }

.team-initials {
  width: 64px;
  height: 64px;
  border: 1px solid var(--bronze);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--bronze);
  margin-bottom: 1.5rem;
}

.team-card h4 { margin-bottom: 0.15rem; }

.team-role {
  color: var(--slate-surface);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
}

.team-bio {
  color: var(--text-on-light-soft);
  font-size: 0.92rem;
}

/* ==========================================================================
   Insights
   ========================================================================== */

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.insight-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-meta {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.insight-tag {
  display: inline-block;
  background: var(--slate-surface);
  color: var(--off-white);
  padding: 0.4rem 0.75rem;
  letter-spacing: 0.06em;
}

.insight-date {
  color: var(--text-on-light-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.insight-card h4 { font-size: var(--size-body-lg); }

.insight-card p { color: var(--text-on-light-soft); font-size: 0.92rem; }

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

/* There is deliberately no contact form on this site — the two channels below
   ARE the contact page. Everything that used to style a form (.field,
   .form-status, .hp-field and friends) was removed rather than left dead.
   If a form ever comes back, it comes back with its own CSS. */

/* DOM order is intro → channels → meta, so that on a phone (one column) the
   email and phone land directly under the heading instead of behind the
   coverage/LinkedIn block. Desktop puts them back side by side via areas,
   with the channels column spanning both rows. */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-areas:
    "intro channels"
    "meta  channels";
  gap: var(--gutter);
  align-items: start;
  align-content: start;
}

.contact-intro { grid-area: intro; }
.contact-channels { grid-area: channels; }
.contact-meta { grid-area: meta; }

.contact-info-item + .contact-info-item {
  margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  padding-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  border-top: 1px solid var(--ink-hairline);
}

.contact-info-item .eyebrow { margin-bottom: 0.9rem; }
.contact-info-item a,
.contact-info-item p { color: var(--text-on-dark-soft); }
.contact-info-item a:hover { color: var(--off-white); }

/* --------------------------------------------------------------------------
   Contact channels — the email address and phone number, made the loudest
   thing on the page.

   Each channel is a single large <a>. The whole block is the link, so the tap
   target is the full card on a phone rather than a line of text.
   -------------------------------------------------------------------------- */

.contact-channels {
  display: grid;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.contact-channel {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  border: 1px solid var(--ink-hairline);
  background: rgba(180, 150, 107, 0.04);
  color: var(--off-white);
  transition: background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}

.contact-channel:hover,
.contact-channel:focus-visible {
  background: rgba(180, 150, 107, 0.1);
  border-color: var(--bronze);
  transform: translateY(-2px);
}

/* A bronze rule that wipes across the top edge on hover. Scale-x from the
   left rather than a width transition so it never triggers layout. */
.contact-channel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

.contact-channel:hover::before,
.contact-channel:focus-visible::before { transform: scaleX(1); }

.contact-channel__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bronze);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The "live line" dot. Two elements: a solid core and a ring that expands and
   fades out from under it, so the channel reads as open rather than static. */
.contact-channel__dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bronze);
}

.contact-channel__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  animation: channel-ping 2.6s var(--ease-out) infinite;
}

@keyframes channel-ping {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* The number/address itself. Sized off the viewport because
   info@adriameridian.com is 22 characters and must not break the layout on a
   narrow phone — see the overflow-wrap rule below. */
.contact-channel__value {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.7vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--off-white);
  overflow-wrap: anywhere;
  transition: color var(--dur-hover) var(--ease-out);
}

.contact-channel:hover .contact-channel__value,
.contact-channel:focus-visible .contact-channel__value { color: var(--bronze-bright); }

.contact-channel__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  color: var(--text-on-dark-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.contact-channel__cue svg {
  width: 16px;
  height: 10px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.contact-channel:hover .contact-channel__cue svg,
.contact-channel:focus-visible .contact-channel__cue svg { transform: translateX(5px); }

/* The pulse is ambient decoration, so it goes entirely when motion is
   reduced. Hover and focus states are user-initiated and stay. */
@media (prefers-reduced-motion: reduce) {
  .contact-channel__dot::after { animation: none; }
  .contact-channel { transition: background var(--dur-hover) linear; }
  .contact-channel:hover,
  .contact-channel:focus-visible { transform: none; }
}

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

.site-footer {
  background: var(--ink);
  color: var(--text-on-dark-soft);
  padding-top: var(--space-section-sm);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--gutter);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.footer-brand .brand { margin-bottom: 1.25rem; }
.footer-brand p { max-width: 32ch; font-size: 0.9rem; }

.footer-col h5 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-col a:hover { color: var(--off-white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.75rem;
  font-size: 0.8rem;
}

.footer-bottom ul { display: flex; gap: 1.75rem; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Entrance uses `animation`, deliberately not `transition` — transition-delay
   is a single cascading property that applies cyclically to every
   transitioned property on an element, not just the one that set it. A
   stagger delay set this way was leaking into hover-triggered transitions
   (background, accent lines, etc.) on the same element, making later grid
   items feel sluggish to respond to hover long after they'd already
   revealed. animation-delay is a fully separate mechanism and can't leak
   into `transition` this way. */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(12px);
}
.reveal.is-visible {
  animation: reveal-in var(--dur-reveal) var(--ease-out) forwards;
}
.reveal-group .reveal:nth-child(1) { animation-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { animation-delay: 90ms; }
.reveal-group .reveal:nth-child(3) { animation-delay: 180ms; }
.reveal-group .reveal:nth-child(4) { animation-delay: 270ms; }
.reveal-group .reveal:nth-child(5) { animation-delay: 360ms; }
.reveal-group .reveal:nth-child(6) { animation-delay: 450ms; }
.reveal-group .reveal:nth-child(7) { animation-delay: 540ms; }
.reveal-group .reveal:nth-child(8) { animation-delay: 630ms; }
.reveal-group .reveal:nth-child(9) { animation-delay: 720ms; }

/* ==========================================================================
   Page hero — full-bleed image hero for interior pages (shorter than the
   home hero, same photographic grade/overlay formula)
   ========================================================================== */

.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}

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

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.06) brightness(0.92);
}

.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.62) 0%, rgba(14,26,43,0.38) 35%, rgba(14,26,43,0.8) 82%, var(--ink) 100%),
    linear-gradient(90deg, rgba(14,26,43,0.55) 0%, rgba(14,26,43,0.05) 55%);
}

.page-hero-inner {
  padding-block: clamp(7rem, 5rem + 4vw, 9rem) clamp(3rem, 2rem + 2vw, 4.5rem);
  width: 100%;
}

.page-hero .display-2 { max-width: 22ch; margin-top: 1.25rem; }
.page-hero .lede { margin-top: 1.5rem; max-width: 52ch; }

/* ==========================================================================
   Service cards — animated grid for the Services page
   ========================================================================== */

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-detail);
  border: 1px solid var(--hairline-detail);
}

.service-card {
  background: var(--off-white);
  padding: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-hover) var(--ease-out);
}

.service-card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--slate-surface);
  transition: width var(--dur-hover) var(--ease-out);
}

.service-card:hover { background: #DBDDD5; }
.service-card:hover::after { width: 100%; }
.service-card:hover .service-card-index { color: var(--bronze-bright); }

.service-card-index {
  display: block;
  font-family: var(--font-display);
  color: var(--bronze);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  transition: color var(--dur-hover) var(--ease-out);
}

.service-card h4 { font-size: var(--size-body-lg); margin-bottom: 0.6rem; }
.service-card p { color: var(--text-on-light-soft); font-size: 0.92rem; }

@media (max-width: 1023px) {
  .service-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .service-card-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sectors page — sticky split layout + editorial row list.
   Deliberately not a card grid: a pinned image column runs alongside a
   scrolling list of rows, closer to an editorial report than a UI grid.
   ========================================================================== */

.sector-split {
  padding-top: clamp(9rem, 7rem + 4vw, 11rem);
}

.sector-split-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--gutter);
  /* No align-items override: the media column must stay stretched to the
     height of the (taller) row list, or its sticky child has no room to
     travel and unsticks almost immediately. */
}

.sector-split-intro { max-width: 46ch; }
.sector-split-intro .lede { margin-top: 1.5rem; }

.sector-list { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

.sector-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: clamp(1rem, 0.8rem + 1vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  border-top: 1px solid var(--hairline-detail);
}
.sector-list .sector-row:last-child { border-bottom: 1px solid var(--hairline-detail); }

.sector-row-index {
  font-family: var(--font-display);
  color: var(--bronze);
  font-size: 1.05rem;
}

.sector-row-body h3 {
  font-size: var(--size-h4);
  margin-bottom: 0.5rem;
}

.sector-row-body p {
  color: var(--text-on-light-soft);
  font-size: 0.94rem;
  max-width: 52ch;
}

/* Sticky media column */
.sector-split-media { position: relative; }

.sector-split-media-inner {
  position: sticky;
  top: clamp(6rem, 5rem + 2vw, 7.5rem);
  height: 72vh;
  min-height: 420px;
  max-height: 720px;
  overflow: hidden;
  isolation: isolate;
}

.sector-split-media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08) brightness(0.98);
}

.sector-split-media-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(14,26,43,0.05) 0%, rgba(14,26,43,0.15) 45%, rgba(14,26,43,0.88) 100%);
}

.sector-split-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  color: var(--off-white);
}

.sector-split-caption .eyebrow { color: var(--bronze); margin-bottom: 0.85rem; }
.sector-split-caption .eyebrow::before { background: var(--bronze); }
.sector-split-caption p { font-size: 0.95rem; color: var(--text-on-dark-soft); max-width: 34ch; }

@media (max-width: 1023px) {
  .sector-split-grid { grid-template-columns: 1fr; }
  .sector-split-media-inner {
    position: relative;
    top: 0;
    height: 46vh;
    min-height: 320px;
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  }
  .sector-row { grid-template-columns: 2.5rem 1fr; }
}

@media (max-width: 640px) {
  .sector-row-body h3 { font-size: 1.2rem; }
}

/* ==========================================================================
   Team page — founder spotlight (contained portrait, not full-bleed) +
   a genuine scroll-snap carousel for affiliate partners. Captions stay
   visible at all times; hover only moves the image.
   ========================================================================== */

.leader-spotlight {
  padding-top: clamp(9rem, 7rem + 4vw, 11rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 4rem);
}

/* Copy column is stretched, not centred, so its top edge lines up with the top
   of the portrait and the leftover vertical space collects at the bottom —
   where .leader-cta then sits on `margin-top: auto`. Centring left a soft gap
   above and below the copy and nowhere to put the profile link. */
.leader-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: stretch;
}

.leader-copy {
  display: flex;
  flex-direction: column;
}

.leader-portrait-wrap {
  position: relative;
}

.leader-portrait-wrap::before {
  content: '';
  position: absolute;
  top: -22px;
  right: -22px;
  width: 100%;
  height: 100%;
  background: var(--slate-surface);
  z-index: 0;
}

.leader-portrait {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--hairline-detail);
  background: var(--stone);
}

.leader-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.03);
}

.leader-portrait.is-placeholder {
  display: grid;
  place-items: center;
}

.leader-portrait-initials {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--bronze);
}

/* Deliberately smaller than .display-2 — at h2 scale a two-word name outweighed
   the portrait next to it and forced the copy to start halfway down the block. */
.leader-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.55rem + 1.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 1.25rem;
}

.leader-role {
  color: var(--slate-surface);
  font-weight: 700;
  font-size: 1rem;
  margin: 0.5rem 0 1.5rem;
}

.leader-copy p + p { margin-top: 1.1rem; }
.leader-copy p { color: var(--text-on-light-soft); max-width: 54ch; }

/* Sits in the space freed by shrinking the name and top-aligning the copy;
   `margin-top: auto` pins it to the bottom of the column so it lands level with
   the base of the portrait however long the bio runs. */
.leader-cta {
  margin-top: auto;
  padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-top: 1px solid var(--hairline-detail);
}

/* Scoped through .leader-copy so it outranks `.leader-copy p`'s soft grey.
   Body font, not display — per the user this line should read as the same
   voice as the rest of the page copy, not as a pull-quote. */
.leader-copy .leader-cta__hook {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: 1.25rem;
}

/* Affiliate partners intro */
.partners-intro { max-width: 60ch; }
.partners-intro .lede { margin-top: 1.25rem; }

.partners-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 2.4rem + 3vw, 5rem);
}

.carousel-nav { display: flex; gap: 0.6rem; }

.carousel-nav button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline-detail);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.carousel-nav button:hover { background: var(--ink); color: var(--off-white); border-color: var(--ink); }
.carousel-nav button:disabled { opacity: 0.35; pointer-events: none; }

/* Carousel track */
.partner-carousel { margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); }

.partner-track {
  display: flex;
  justify-content: safe center;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.partner-track::-webkit-scrollbar { display: none; }

/* Now an <a> wrapping the whole card — display:block because a flex item that
   is an inline element still needs a block box for the media aspect-ratio. */
.partner-card {
  display: block;
  flex: 0 0 min(360px, 78vw);
  scroll-snap-align: start;
}

.partner-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--slate-surface);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.partner-card-more svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.partner-card:hover .partner-card-more svg { transform: translateX(4px); }

.partner-card:hover h4 { color: var(--slate-surface); }
.partner-card h4 { transition: color var(--dur-hover) var(--ease-out); }

.partner-card-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.partner-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.92) contrast(1.02);
  transform: scale(1);
  transition: transform 480ms var(--ease-out), filter 480ms var(--ease-out);
}

.partner-card:hover .partner-card-media img {
  transform: scale(1.1);
  filter: saturate(1.05) contrast(1.05);
}

.partner-card-tag {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  background: var(--slate-surface);
  color: var(--off-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
}

.partner-card-body { padding-top: 1.25rem; text-align: center; }
.partner-card-body h4 { font-size: var(--size-body-lg); margin-bottom: 0.3rem; }

.partner-card-specialty {
  color: var(--slate-detail);
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}

.partner-card-body p:last-child {
  color: var(--text-on-light-soft);
  font-size: 0.9rem;
}

/* Single-affiliate spotlight — stands in for the carousel above while only
   one affiliate partner (Alisa Mujkić) is confirmed live. Sanela Pašić and
   Haris Jahić are pulled from team.html, not deleted: their profile pages,
   photos, and the .partner-track/.carousel-nav carousel CSS above are left
   exactly as they were, so the day either is reconfirmed the fix is to swap
   this block back for the three-card carousel markup — nothing here needs
   unwinding first. Portrait sits opposite the founder spotlight's (right
   instead of left) so the two sections don't read as repeats of each other.

   Three grid items, not two: header (name/role), portrait, body (bio +
   creds + CTA). Named `grid-template-areas` place the portrait spanning
   both text rows on desktop, and — the actual reason for the split — let it
   drop to sit between header and body on mobile without any DOM reordering
   or an `order` hack; the areas *are* the reading order there. Portrait
   track is a fixed 360px (the same width the old carousel used for a single
   card), not a fr-share of the grid — a fr-share scaled it up to the
   founder-portrait's full size once; a flat 260px read as too small once
   trimmed back the other way. 360px is the settled middle.

   Text column is `fit-content(60ch)`, not `1fr` — it shrink-wraps to the
   copy's actual width (bounded by the 60ch paragraph measure) instead of
   stretching to fill the grid track. That leaves the *second* column
   holding all the leftover page width, and the portrait is centred inside
   that column with `justify-self: center` rather than pinned to its end —
   so it sits in the middle of the empty space between the text and the
   edge of the page, not flush against the edge with the empty space
   stranded on one side of it. */
.partner-spotlight {
  display: grid;
  grid-template-columns: fit-content(60ch) 1fr;
  grid-template-areas:
    "header  portrait"
    "body    portrait";
  column-gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: start;
  margin-top: clamp(3rem, 2.4rem + 3vw, 5rem);
}

.partner-spotlight-header { grid-area: header; }
.partner-spotlight-body { grid-area: body; }

.partner-spotlight-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.6rem + 1.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.partner-spotlight-role {
  color: var(--slate-surface);
  font-weight: 700;
  font-size: 1rem;
  margin: 0.5rem 0 1.5rem;
}

.partner-spotlight-body p { color: var(--text-on-light-soft); max-width: 60ch; }
.partner-spotlight-body p + p { margin-top: 1.1rem; }

.partner-spotlight-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
  max-width: 60ch;
}

.partner-spotlight-creds span {
  border: 1px solid var(--hairline-detail);
  color: var(--text-on-light-soft);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.7rem;
}

.partner-spotlight-cta { margin-top: 2rem; }

.partner-spotlight-portrait-wrap { grid-area: portrait; position: relative; width: 360px; justify-self: center; }

/* Offset block in slate-detail (not the founder's slate-surface) and on the
   opposite corner, so the two portraits echo the same device without
   looking identical side by side on this page. */
.partner-spotlight-portrait-wrap::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background: var(--slate-detail);
  z-index: 0;
}

.partner-spotlight-portrait {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--hairline-detail);
  background: var(--stone);
}

.partner-spotlight-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.94) contrast(1.03);
}

.partner-spotlight-tag {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  bottom: -1px;
  background: var(--slate-surface);
  color: var(--off-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
}

@media (max-width: 900px) {
  .leader-grid { grid-template-columns: 1fr; }
  .leader-portrait-wrap { max-width: 320px; }
  .leader-portrait-wrap::before { top: -14px; right: -14px; }

  /* Single column, but the named areas keep the portrait between the title
     and the bio — "header, portrait, body" — rather than falling back to
     source order (header, body, portrait), which would strand the image
     under the CTA button. */
  .partner-spotlight {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "portrait" "body";
    row-gap: 1rem;
  }
  /* Centred (not left-flush) so the offset block below has room on both
     sides instead of overhanging the container's padding. The role's own
     bottom margin is trimmed here so the portrait sits closer under the
     title ("pushed up"), while `.partner-spotlight-body`'s margin-top below
     restores clear space before the bio starts — the two ends of the gap
     don't need to match. */
  .partner-spotlight-portrait-wrap { width: 240px; max-width: 60vw; margin: 0 auto; }
  .partner-spotlight-portrait-wrap::before { bottom: -14px; left: -14px; }
  .partner-spotlight-role { margin-bottom: 0.75rem; }
  .partner-spotlight-body { margin-top: 1rem; }
}

/* NOTE: the profile-page breakpoints used to live here too, but the
   `.profile-*` base rules are declared *further down* this file — media
   queries add no specificity, so the later base rules were winning and the
   profile hero never collapsed on mobile (portrait squeezed into an 0.8fr
   column, copy wrapping one word per line). They now sit in the Responsive
   section at the end of the file, after their base rules. Keep them there. */

/* ==========================================================================
   Insights page — asymmetric mosaic hero (two stacked frames + one large
   feature panel, parallax on the feature image only) and a date-led
   editorial index grouped by category. No cards, no sticky column, no
   carousel — a different composition from every other page.
   ========================================================================== */

.insights-hero {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  grid-template-areas: "stack feature";
  gap: 4px;
  min-height: 86vh;
  background: var(--ink);
}

.insights-hero-stack {
  grid-area: stack;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.insights-hero-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.insights-hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.08) brightness(0.88);
}

.insights-hero-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0) 55%, rgba(14,26,43,0.8) 100%);
}

.insights-hero-caption {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 1;
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  color: var(--off-white);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.insights-hero-feature {
  grid-area: feature;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.insights-hero-feature img {
  position: absolute;
  inset: -4% 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  object-position: center 68%;
  filter: saturate(0.82) contrast(1.08) brightness(0.86);
  transform: scale(1.06);
}

.insights-hero-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.05) 0%, rgba(14,26,43,0.22) 45%, rgba(14,26,43,0.94) 100%);
}

.insights-hero-feature-content {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  color: var(--off-white);
  width: 100%;
}

.insights-hero-feature-content .lede { margin-top: 1.25rem; color: var(--text-on-dark-soft); }
.insights-hero-feature .insights-hero-caption { font-size: 0.78rem; }

/* Desktop/laptop only — lift the text block off the bottom edge for more
   breathing room; mobile keeps its own tighter, edge-anchored spacing. */
@media (min-width: 901px) {
  .insights-hero-feature-content {
    padding-bottom: clamp(4.5rem, 3rem + 6vw, 8rem);
  }
}

@media (max-width: 900px) {
  .insights-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "feature" "stack";
    min-height: auto;
  }
  .insights-hero-feature { min-height: 62vh; }
  .insights-hero-stack { min-height: 46vh; }
  /* Headline + lede already carry the panel's identity at this size —
     the caption just crowds them. */
  .insights-hero-feature .insights-hero-caption { display: none; }
}

/* Editorial index */
.insights-index { padding-block: var(--space-section); }

.insights-category { margin-bottom: clamp(3rem, 2.4rem + 3vw, 5rem); }
.insights-category:last-child { margin-bottom: 0; }

.insights-category-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
}

.insights-category-head .eyebrow { margin: 0; }

.insights-category-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline-detail);
}

.insights-entry {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1.25rem, 1rem + 1vw, 2.5rem);
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-top: 1px solid var(--hairline-detail);
}
.insights-category .insights-entry:last-child { border-bottom: 1px solid var(--hairline-detail); }

.insights-entry-date {
  font-family: var(--font-display);
  color: var(--bronze);
  font-size: 0.92rem;
}

.insights-entry-title {
  display: inline-block;
  font-size: var(--size-h4);
  margin-bottom: 0.5rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--dur-fast) var(--ease-out);
}
a.insights-entry-link:hover .insights-entry-title { background-size: 100% 1px; }

.insights-entry-dek { color: var(--text-on-light-soft); font-size: 0.95rem; max-width: 58ch; }

@media (max-width: 640px) {
  .insights-entry { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ==========================================================================
   Legal document layout — Privacy Policy / Legal Notice
   ========================================================================== */

.legal-jump {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(3rem, 2.4rem + 3vw, 5rem);
}

.legal-jump a {
  border: 1px solid var(--hairline-detail);
  padding: 0.75rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.legal-jump a:hover { background: var(--ink); color: var(--off-white); border-color: var(--ink); }

.legal-doc { max-width: 68ch; }

.legal-doc section + section {
  margin-top: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
  padding-top: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
  border-top: 1px solid var(--hairline-detail);
}

.legal-doc h2 { margin-bottom: 0.5rem; }
.legal-doc .legal-updated {
  display: block;
  color: var(--slate-detail);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}

.legal-doc h3 {
  font-size: var(--size-body-lg);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.legal-doc p, .legal-doc li {
  color: var(--text-on-light-soft);
  margin-bottom: 1rem;
}

.legal-doc ul { padding-left: 1.25rem; list-style: disc; }
.legal-doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.legal-doc-note {
  border-left: 2px solid var(--bronze);
  padding: 0.9rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--slate-detail);
  background: rgba(180, 150, 107, 0.08);
}

/* ==========================================================================
   Placeholder page shell (About/Services/etc. stubs)
   ========================================================================== */

.stub-hero {
  padding-top: clamp(9rem, 7rem + 4vw, 11rem);
  padding-bottom: var(--space-section-sm);
  background: var(--ink);
  color: var(--off-white);
}

.stub-hero .display-2 { max-width: 20ch; margin-top: 1.25rem; }
.stub-hero .lede { color: var(--text-on-dark-soft); margin-top: 1.5rem; max-width: 50ch; }

.stub-body { padding-block: var(--space-section-sm); }
.stub-body .lede { max-width: 60ch; }
.stub-body .btn { margin-top: 2.5rem; }

/* ==========================================================================
   Profile pages (profile-lana-mujanovic.html and the three affiliate partners)

   One shared component across all four so the founder and the affiliates read
   as the same kind of document. Structure per page: ink hero (portrait + name
   + positioning line) → narrative "Background" in plain English → a dated
   career timeline → a two-column credentials/selected-work block → closing CTA.

   The source CVs are academic and two of the three are in Bosnian; everything
   surfaced here is translated and compressed. Anything that reads as a claim
   about a real person's credentials must be traceable to the PDF in the
   project root — do not embellish these.
   ========================================================================== */

.profile-hero {
  padding-top: clamp(9rem, 7rem + 4vw, 11rem);
  padding-bottom: var(--space-section-sm);
  background: var(--ink);
  color: var(--off-white);
}

.profile-hero-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}

.profile-portrait-wrap { position: relative; }

/* Mirrors .leader-portrait-wrap's offset block, but in bronze — the slate green
   used on the team page disappears against ink. */
.profile-portrait-wrap::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(180, 150, 107, 0.45);
  z-index: 0;
}

.profile-portrait {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--slate-detail);
}

.profile-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.94) contrast(1.03);
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.7rem + 1.7vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 1.25rem;
}

.profile-role {
  color: var(--bronze);
  font-weight: 700;
  font-size: 1rem;
  margin: 0.75rem 0 1.5rem;
}

.profile-hero .lede { color: var(--text-on-dark-soft); max-width: 52ch; }

/* Compact credential strip under the hero copy — degree, licence, base. */
.profile-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.profile-creds span {
  border: 1px solid var(--ink-hairline);
  color: var(--text-on-dark-soft);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
}

.profile-narrative { max-width: 68ch; }
.profile-narrative p + p { margin-top: 1.2rem; }
.profile-narrative p { color: var(--text-on-light-soft); }

/* Dated career rows — same numeral/hairline rhythm as .sector-row. */
.profile-timeline { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

.profile-tl-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(1rem, 0.8rem + 1vw, 2rem);
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-top: 1px solid var(--hairline-detail);
}
.profile-timeline .profile-tl-row:last-child { border-bottom: 1px solid var(--hairline-detail); }

.profile-tl-when {
  font-family: var(--font-display);
  color: var(--bronze);
  font-size: 0.98rem;
  line-height: 1.5;
}

.profile-tl-what h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.profile-tl-what p {
  color: var(--text-on-light-soft);
  font-size: 0.94rem;
  max-width: 60ch;
}

.profile-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.profile-col h3 {
  font-size: 1.15rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline-detail);
  margin-bottom: 1.25rem;
}

.profile-list li {
  color: var(--text-on-light-soft);
  font-size: 0.94rem;
  line-height: 1.6;
  padding-left: 1.1rem;
  position: relative;
}
.profile-list li + li { margin-top: 0.9rem; }

.profile-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 1px;
  background: var(--bronze);
}

.profile-list strong { color: var(--text-on-light); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .about-copy { grid-column: 1 / span 12; }
  .about-figure { grid-column: 1 / span 12; margin-top: 2.5rem; }
  .about-figure img { aspect-ratio: 16 / 9; }

  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 1.6rem + 1vw, 3rem); }

  /* Single column, and the areas must be redeclared or the two-row desktop
     template survives and leaves an empty track. */
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "channels" "meta";
    gap: clamp(2.5rem, 2rem + 2vw, 4rem);
  }

  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* .main-nav (which normally carries the `margin-left: auto` that clusters
     it against the header's right edge) is hidden here, so .lang-switch
     picks up that job instead — otherwise it would collapse back against
     the brand on the left. */
  .lang-switch { margin-left: auto; }
  /* .container's 2rem gap is sized for a roomy desktop row of nav links.
     With only brand / lang-switch / nav-toggle left in flow here, two full
     2rem gaps (lang-switch's own auto-margin already does the brand-side
     spacing) pushed nav-toggle off the right edge of a 375px viewport
     entirely — it was rendering, just past the visible viewport. */
  .site-header .container { gap: 0.6rem; }
}

/* Separate, narrower breakpoint: the header row (brand + lang-switch +
   nav-toggle, all non-shrinking — see .brand's min-content floor and the
   explicit `flex-shrink: 0` on .lang-switch/.nav-toggle below) needs ~392px
   to fit the full "ADRIAMERIDIAN" wordmark. That's not a safe margin — it
   put the nav-toggle button *past the edge of the viewport, unclickable and
   invisible* at common phone widths (390px iPhones overflow by a couple of
   pixels on paper, and 375px cleared by single-digit pixels, which a real
   device's own font metrics can erase). Reported as "the mobile menu icon
   disappeared" after the language switcher was added — the switcher didn't
   cause this, it just used up the last few pixels of a margin that was
   already too thin. Fix: drop the wordmark + tagline entirely below 480px
   (a deliberately generous cutoff, well past the ~392px danger zone) and
   keep just the "AM" mark as the brand link — same aria-label, so nothing
   is lost for screen readers, only the visible wordmark. This frees ~190px,
   turning a single-digit-pixel margin into a three-digit one. */
@media (max-width: 480px) {
  .brand-text { display: none; }
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--ink-hairline); }

  .tombstone-grid { grid-template-columns: 1fr; }

  /* Profile pages — must stay after the `.profile-*` base rules above, not in
     the earlier component-local breakpoint block. See the note there. */
  .profile-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 1.75rem + 2vw, 3rem);
    align-items: start;
  }
  .profile-portrait-wrap { max-width: 300px; }
  .profile-portrait-wrap::before { top: -14px; left: -14px; }
  .profile-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .profile-hero { padding-top: clamp(7.5rem, 6rem + 6vw, 9rem); }
  /* The offset frame sits 14px outside the portrait on the left; the container
     gutter bottoms out at 1.5rem, so it stays inside the page either way. */
  .profile-portrait-wrap { max-width: min(300px, 78%); }
  .profile-tl-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .profile-creds { gap: 0.4rem; }
  .profile-creds span { font-size: 0.7rem; padding: 0.4rem 0.65rem; }

  .sector-grid { grid-template-columns: 1fr; }
  .sector-cta__action { width: 100%; justify-content: center; }
  .team-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero { min-height: 100dvh; }
}

@media (min-width: 1921px) {
  :root { --container-max: 1600px; }
}