/* =========================================================
   Spitzer Advice — Global Stylesheet
   ========================================================= */

:root{
  /* Brand palette — ONLY these four colors are used anywhere on the site
     (plus opacity variants of them for hairlines / muted text). */
  --navy-deep: #04142B;   /* darkest navy — hero, header, footer, deepest stacked card */
  --navy: #1B283E;        /* secondary navy — panels, alternate stacked cards */
  --cream: #EDEBE0;       /* light sections */
  --olive: #B1AE9C;       /* accent sections + accent text (replaces old gold) */
  --ink: #04142B;
  --paper: #EDEBE0;
  --gold: #B1AE9C;
  --cream-line: rgba(4,20,43,0.16);   /* hairline on cream/olive sections */

  --font-head: 'Libertinus Sans', 'Times New Roman', serif;
  --font-body: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --gutter: clamp(32px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 128px);

  --ease: cubic-bezier(.16,.84,.44,1);
}

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

body{
  margin:0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea{ font-family:inherit; }

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

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  opacity: 0.72;
}
.eyebrow::before{
  content:'';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
  display:inline-block;
}

.display-1{
  font-size: clamp(40px, 6.2vw, 84px);
  letter-spacing: -0.015em;
}
.display-2{
  font-size: clamp(32px, 4.4vw, 56px);
}
.display-3{
  font-size: clamp(26px, 3vw, 38px);
}
h3.h-serif{ font-size: clamp(21px, 2vw, 26px); }

.lede{
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  max-width: 640px;
}

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom:0; }

.rule{
  height:1px;
  width:100%;
  background: var(--cream-line);
  border:0;
  margin: 0;
}
.rule--dark{ background: rgba(237,235,224,0.18); }

/* ---------- Buttons / Links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 1px solid currentColor;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:14px; height:14px; transition: transform .35s var(--ease); flex-shrink:0; }
.btn:hover svg{ transform: translateX(4px); }

.btn--navy{ color: var(--navy); border-color: var(--navy); background: transparent; }
.btn--navy:hover{ background: var(--navy); color: var(--cream); }

.btn--cream{ color: var(--cream); border-color: rgba(237,235,224,0.55); background: transparent; }
.btn--cream:hover{ background: var(--cream); color: var(--navy); border-color: var(--cream); }

.btn--outline-cream{
  color: var(--cream);
  border-color: rgba(237,235,224,0.7);
  background: transparent;
  padding: 11px 22px;
  font-size: 13px;
}
.btn--outline-cream:hover{ background: var(--cream); color: var(--navy-deep); border-color: var(--cream); }

.btn--solid{ background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn--solid:hover{ background: var(--navy-deep); border-color: var(--navy-deep); }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.link-arrow svg{ width:13px; height:13px; transition: transform .3s var(--ease); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(237,235,224,0.14);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 84px;
  gap: 24px;
  max-width: none;
  padding-left: clamp(20px, 3.4vw, 48px);
  padding-right: clamp(20px, 3.4vw, 48px);
}
.brand{ display:flex; align-items:center; }
.brand img{ height: 34px; width:auto; }

.main-nav{ display:flex; align-items:center; gap: clamp(18px, 2.4vw, 38px); }
.main-nav a{
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.78;
  padding: 6px 0;
  position: relative;
  transition: opacity .25s var(--ease);
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a:hover{ opacity:1; }
.main-nav a:hover::after{ transform: scaleX(1); }
.main-nav a.active{ opacity:1; }
.main-nav a.active::after{ transform: scaleX(1); }
.nav-contact-mobile{ display:none; }

.header-cta{ display:flex; align-items:center; gap: 22px; }

.nav-toggle{
  display:none;
  background:none; border:0; padding: 8px;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:22px; height:1px; background:var(--cream); display:block; transition: all .3s var(--ease); }

/* ---------- Mobile nav ---------- */
@media (max-width: 900px){
  .main-nav{
    position: fixed; inset: 84px 0 0 0;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    padding: 36px var(--gutter);
    gap: 22px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events:none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    overflow-y:auto;
  }
  .main-nav.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .main-nav a{ font-size: 20px; font-family: var(--font-head); font-weight: 400; opacity:0.92; }
  .nav-contact-mobile{ display:block; }
  .nav-toggle{ display:flex; }
  .header-cta .btn{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--navy-deep);
  color: var(--cream);
  position: relative;
  overflow:hidden;
  padding: clamp(90px, 13vw, 168px) 0 clamp(70px, 9vw, 120px);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width: 880px; }
.hero .eyebrow{ color: var(--cream); margin-bottom: 26px; }
.hero h1{ color: var(--cream); }
.hero .lede{ color: rgba(237,235,224,0.82); margin-top: 26px; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap: 40px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(237,235,224,0.18);
}
.hero-meta div{ min-width: 140px; }
.hero-meta .num{ font-family: var(--font-head); font-size: 30px; color: var(--cream); }
.hero-meta .lbl{ font-size: 12.5px; letter-spacing: 0.08em; text-transform:uppercase; opacity:0.68; margin-top:6px; }

.page-hero{
  background: var(--navy-deep);
  color: var(--cream);
  padding: clamp(150px, 16vw, 210px) 0 clamp(56px, 7vw, 90px);
  position:relative;
  overflow:hidden;
}
.page-hero .eyebrow{ color:var(--cream); margin-bottom:22px; }
.page-hero h1{ color:var(--cream); max-width: 820px; }
.page-hero .lede{ color: rgba(237,235,224,0.82); margin-top:22px; max-width: 640px; }

/* Desktop: heroes fill the space beneath the fixed header — headline block
   anchored at the top, stats (home) anchored at the bottom, page copy
   vertically centered — instead of floating in a short content-height box. */
@media (min-width: 900px){
  .hero{
    min-height: calc(100vh - 84px);
    display:flex;
    align-items:stretch;
    padding: clamp(72px, 7vw, 112px) 0 clamp(48px, 6vw, 76px);
  }
  .hero-inner{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap: 40px;
  }
  .hero-meta{ margin-top:0; }

  .page-hero{
    min-height: calc(100vh - 84px);
    display:flex;
    align-items:center;
    padding: clamp(84px, 8vw, 130px) 0;
  }
}

.about-section{ overflow:hidden; }
.about-heading{
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 clamp(32px,5vw,56px);
}
.about-row{
  display:flex;
  flex-direction:column;
  gap: 28px;
}
.about-media{ flex: 0 0 auto; }
.about-media img{ width:100%; height:auto; display:block; }
.about-copy{ max-width: 620px; font-size: 15px; }
.about-copy p{ margin-bottom: 1.7em; }
.about-copy p:last-child{ margin-bottom: 0; }
@media (min-width: 900px){
  .about-row{
    flex-direction:row;
    align-items:flex-start;
    gap: clamp(32px,5vw,64px);
  }
  .about-media{ flex: 0 0 34%; }
  .about-media img{ width:100%; }
  .about-copy{ flex: 1 1 auto; padding-top: clamp(6px,1.2vw,14px); }
}

/* Scroll slide-in — same safety contract as .reveal: visible by default;
   JS opts elements into a hidden "pre" state only once it can animate them
   back in, so nothing ever depends on JS running to be seen. */
.reveal-slide{ opacity:1; transform:none; }
.reveal-slide.pre{ opacity:0; transform: translateX(64px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-slide.pre.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal-slide.pre{ opacity:1; transform:none; transition:none; } }

/* ---------- Sections ---------- */
section{ position:relative; }
.sec{ padding: var(--section-y) 0; }
.sec--cream{ background: var(--cream); color: var(--navy); }
.sec--paper{ background: var(--paper); color: var(--navy); }
.sec--navy{ background: var(--navy); color: var(--cream); }
.sec--navy .eyebrow{ color: var(--cream); }
.sec--navy-deep{ background: var(--navy-deep); color: var(--cream); }
.sec--navy-deep .eyebrow{ color: var(--cream); }

.sec-head{ max-width: 780px; margin-bottom: clamp(40px,5vw,64px); }
.sec-head .eyebrow{ margin-bottom:20px; }
.sec-head h2{ margin-top: 4px; }
.sec-head .lede{ margin-top:20px; }

.two-col{
  display:grid;
  grid-template-columns: minmax(0,0.86fr) minmax(0,1.14fr);
  gap: clamp(32px, 6vw, 96px);
  align-items:start;
}
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

.col-label{ position: sticky; top: 120px; }

/* ---------- About narrative blocks ---------- */
.narrative + .narrative{ margin-top: clamp(48px, 6vw, 84px); }
.narrative h3{ margin-bottom: 18px; }
.narrative p{ font-weight:300; font-size: 16.5px; color: rgba(4,20,43,0.86); }

/* ---------- "From Knowledge to Impact" — scroll-brightened paragraph ---------- */
.knowledge-section{ padding: clamp(88px,11vw,160px) 0; background: var(--navy-deep); }
.lede-xl{
  font-family: var(--font-head);
  font-size: clamp(23px, 3.1vw, 38px);
  line-height: 1.4;
  max-width: 1080px;
  font-weight: 400;
}
.bw-lead{ color: var(--cream); font-weight: 700; }
.bw{ color: var(--cream); }
/* Only once JS confirms it can drive the scrub does the paragraph dim —
   the default (no-JS) state is fully readable, exactly like the final
   "all bright" state, so nothing is ever lost if JS doesn't run. */
.knowledge-section.js-dim .bw{ color: rgba(237,235,224,0.3); transition: color .2s linear; }
.knowledge-section.js-dim .bw.bright{ color: var(--cream); }

/* ---------- Our Positioning — heading + link left, open list right ---------- */
.positioning-section{ padding-bottom: clamp(96px,12vw,150px); }
.positioning-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(32px,5vw,56px);
}
.positioning-head h2{ font-size: clamp(30px,3.6vw,46px); }
.positioning-head .link-arrow{ margin-top: 22px; color: var(--ink); }
.positioning-media{ margin-top: clamp(24px,3.5vw,36px); max-width: 380px; }
.positioning-media img{ width:100%; height:auto; display:block; }
.positioning-list{ display:flex; flex-direction:column; gap: clamp(30px,4vw,46px); }
.pos-item dt{
  font-family: var(--font-head);
  font-size: clamp(20px,2vw,26px);
  color: var(--ink);
  margin-bottom: 8px;
}
.pos-item dd{ margin:0; font-size: 16px; font-weight:300; color: rgba(4,20,43,0.75); max-width: 560px; line-height:1.6; }
@media (min-width: 860px){
  .positioning-row{ grid-template-columns: 0.85fr 1.3fr; }
}

/* ---------- Who We Work With — full olive band, rounded top corners
   overlapping the section above like a shutter sliding into place ---------- */
.who-section{
  background: var(--olive);
  color: var(--navy-deep);
  border-radius: clamp(24px,4vw,48px) clamp(24px,4vw,48px) 0 0;
  margin-top: clamp(-64px,-6vw,-32px);
  position: relative;
  z-index: 2;
  padding: clamp(72px,9vw,120px) 0 clamp(88px,10vw,130px);
}
.who-section .eyebrow{ opacity:0.7; }
.who-grid{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap: clamp(24px,3vw,40px);
  margin-top: clamp(44px,6vw,68px);
}
.who-grid .n{
  font-family: var(--font-head);
  font-size: clamp(30px,3vw,42px);
  opacity:0.4;
  display:block;
  margin-bottom: 16px;
}
.who-grid p{ font-size: 15px; font-weight:500; line-height:1.45; }
@media (max-width: 980px){ .who-grid{ grid-template-columns: repeat(2,1fr); gap: 36px 24px; } }
@media (max-width: 560px){ .who-grid{ grid-template-columns: 1fr; } }

/* The section right after the olive band rounds its own top corners over
   the olive bottom edge, completing the "shutter" transition. */
.rounds-over-olive{
  border-radius: clamp(24px,4vw,48px) clamp(24px,4vw,48px) 0 0;
  margin-top: clamp(-56px,-5vw,-28px);
  position: relative;
  z-index: 3;
}

/* ---------- Services — sticky stacking cards (home) ----------
   Pure CSS: each card is exactly one viewport tall and position:sticky at
   top:0. As the user scrolls, the next card (later in DOM, so it paints on
   top) slides up from below and progressively covers the pinned card
   beneath it, revealing its rounded top corners — no JS required, so the
   effect degrades gracefully to a plain stacked scroll if sticky is
   unsupported. */
.services-intro{ padding-bottom: clamp(40px,6vw,64px); }
/* .stack-section always needs an explicit background matching the section
   right above it: the very first card's rounded top corners cut away
   before any card is sticky-pinned beneath it, so whatever the section
   itself paints is what shows through that cutout. Relying on the page/body
   background here is fragile — it only happens to look right when the body
   tone matches the first card's tone (cream-on-cream), and shows a stray
   white/cream sliver whenever the surrounding section is dark (e.g. the
   navy-deep Governments intro). Default to the cream page background; pages
   with a dark lead-in override with --navy-deep below. */
.stack-section{ position:relative; background: var(--paper); }
.stack-section--navy-deep{ background: var(--navy-deep); }
.stack-card{
  position: sticky;
  top: 0;
  min-height: 100vh;
  display:flex;
  align-items:center;
  border-top-left-radius: clamp(28px,4vw,56px);
  border-top-right-radius: clamp(28px,4vw,56px);
}
.stack-card-inner{
  padding: clamp(64px,9vw,110px) var(--gutter);
  width:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(20px,3vw,32px);
}
.stack-title{ font-size: clamp(32px,4.4vw,58px); margin:0; line-height:1.15; }
.stack-num{
  display:block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  opacity:0.75;
  margin-bottom: 16px;
}
.stack-desc{ font-size: 16px; font-weight:300; max-width: 520px; line-height:1.65; opacity:0.9; }
.stack-card--navy-deep{ background: var(--navy-deep); color: var(--cream); }
.stack-card--navy{ background: var(--navy); color: var(--cream); }
/* Sector-page variant (e.g. Corporations): light cards with a bulleted list
   instead of a paragraph. Same sticky mechanism, different tone + content. */
.stack-card--cream{ background: var(--cream); color: var(--ink); }
.stack-card--olive{ background: var(--olive); color: var(--ink); }
.stack-card--cream .item-list li::before,
.stack-card--olive .item-list li::before{ background: var(--navy); }
.stack-card--cream .item-list li,
.stack-card--olive .item-list li{ border-color: rgba(4,20,43,0.18); }
/* Dark sector-page variant (e.g. Governments): navy/navy-deep cards need the
   bulleted list re-tinted for light-on-dark instead of the cream-page default. */
.stack-card--navy .item-list li,
.stack-card--navy-deep .item-list li{ color: rgba(237,235,224,0.82); border-color: rgba(237,235,224,0.18); }
.stack-card--navy .item-list li::before,
.stack-card--navy-deep .item-list li::before{ background: var(--olive); }
.stack-card .item-list{ max-width: 560px; }
@media (min-width: 800px){
  .stack-card-inner{
    grid-template-columns: 0.9fr 1fr;
    align-items:start;
    gap: clamp(32px,5vw,72px);
  }
}
@media (prefers-reduced-motion: reduce){
  .stack-card{ position: relative; min-height: auto; padding: 40px 0; }
}

/* ---------- Light sector intro (heading + narrative/photo row) ----------
   Shared by Corporations (.corp-intro-*) and Knowledge Institutions
   (.ki-intro-*) — same cream layout, only the copy/photo differ per page. */
.corp-intro-head, .ki-intro-head{ margin-bottom: clamp(40px,6vw,72px); }
.corp-intro-head h1, .ki-intro-head h1{ margin-top:8px; }
.corp-intro-row, .ki-intro-row{
  display:flex;
  flex-direction:column;
  gap: clamp(32px,5vw,56px);
}
.corp-intro-copy, .ki-intro-copy{ max-width: 460px; }
.corp-intro-subhead, .ki-intro-subhead{
  font-size: clamp(20px,2.2vw,26px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 20px;
}
.corp-intro-copy p, .ki-intro-copy p{ font-size:15px; font-weight:300; line-height:1.75; color: rgba(4,20,43,0.72); margin-bottom:1.4em; }
.corp-intro-copy p:last-child, .ki-intro-copy p:last-child{ margin-bottom:0; }
.corp-intro-media, .ki-intro-media{ width:100%; aspect-ratio: 1.08 / 1; overflow:hidden; }
.corp-intro-media img, .ki-intro-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width: 900px){
  .corp-intro-row, .ki-intro-row{ flex-direction:row; align-items:flex-start; gap: clamp(40px,6vw,80px); }
  .corp-intro-copy, .ki-intro-copy{ flex:0 0 36%; padding-top:4px; }
  .corp-intro-media, .ki-intro-media{ flex:1 1 auto; }
}

/* ---------- Dark sector intro (heading + narrative/photo row, light-on-navy) ----------
   Shared by Governments (.govt-intro-*) and Foundations (.fnd-intro-*) — same
   dark layout, only the copy/photo (and the optional subheading) differ. */
.govt-intro-head, .fnd-intro-head{ margin-bottom: clamp(40px,6vw,72px); }
.govt-intro-head h1, .fnd-intro-head h1{ margin-top:8px; color: var(--cream); }
.govt-intro-row, .fnd-intro-row{
  display:flex;
  flex-direction:column;
  gap: clamp(32px,5vw,56px);
}
.govt-intro-copy, .fnd-intro-copy{ max-width: 460px; }
.govt-intro-subhead, .fnd-intro-subhead{
  font-size: clamp(20px,2.2vw,26px);
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 20px;
}
.govt-intro-copy p, .fnd-intro-copy p{ font-size:15px; font-weight:300; line-height:1.75; color: rgba(237,235,224,0.78); margin-bottom:1.4em; }
.govt-intro-copy p:last-child, .fnd-intro-copy p:last-child{ margin-bottom:0; }
.govt-intro-media, .fnd-intro-media{ width:100%; aspect-ratio: 1.08 / 1; overflow:hidden; }
.govt-intro-media img, .fnd-intro-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width: 900px){
  .govt-intro-row, .fnd-intro-row{ flex-direction:row; align-items:flex-start; gap: clamp(40px,6vw,80px); }
  .govt-intro-copy, .fnd-intro-copy{ flex:0 0 36%; padding-top:4px; }
  .govt-intro-media, .fnd-intro-media{ flex:1 1 auto; }
}

/* ---------- Category blocks (sub-pages) ---------- */
.category{
  padding: clamp(48px,6vw,76px) 0;
  border-bottom: 1px solid var(--cream-line);
}
.category:last-child{ border-bottom:none; }
.category-grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px,5vw,72px);
}
@media (max-width: 820px){ .category-grid{ grid-template-columns:1fr; gap:24px; } }

.category-head .n{
  font-family: var(--font-head);
  font-size: clamp(48px,6vw,68px);
  line-height:1;
  color: var(--navy);
  opacity: 0.14;
  display:block;
  margin-bottom: 18px;
}
.category-head h3{ font-size: clamp(22px,2.4vw,28px); max-width: 300px; }

.item-list{ display:flex; flex-direction:column; }
.item-list li{
  padding: 18px 0;
  border-top: 1px solid var(--cream-line);
  font-size: 16px;
  font-weight: 400;
  display:flex;
  gap:16px;
  align-items:baseline;
  color: rgba(4,20,43,0.92);
}
.item-list li:last-child{ border-bottom: 1px solid var(--cream-line); }
.item-list li::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background: var(--gold);
  flex-shrink:0;
  transform: translateY(-2px);
}

/* ---------- Intl experience: two big stats + region list (cream) ---------- */
.intl-section{ background: var(--cream); color: var(--navy-deep); overflow:hidden; }
.intl-section > .container > h2{ margin-bottom: clamp(8px,1vw,12px); }
.intl-stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 6vw, 90px);
  margin: clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px);
}
.intl-stat .stat-num{
  display:block;
  font-family: var(--font-head);
  font-size: clamp(56px, 8vw, 116px);
  line-height:1;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.intl-stat p{
  margin-top: 20px;
  font-size: 16px;
  font-weight:300;
  max-width: 340px;
  line-height:1.6;
  color: rgba(4,20,43,0.78);
}
@media (max-width: 640px){ .intl-stats{ grid-template-columns: 1fr; gap:40px; } }

/* Region breakdown — open, unboxed list beneath the headline stats */
.region-list{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(56px,7vw,96px);
  border-bottom: 1px solid var(--cream-line);
}
.region h4{
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight:700;
  color: var(--navy-deep);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cream-line);
}
.region p{ font-size: 15px; font-weight:300; line-height:1.75; color: rgba(4,20,43,0.72); }
@media (max-width: 1080px){ .region-list{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .region-list{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .region-list{ grid-template-columns: 1fr; } }

.member-note{
  margin-top: clamp(40px,5vw,64px);
  font-size: 14.5px;
  font-weight:300;
  color: rgba(4,20,43,0.65);
  max-width: 760px;
  line-height:1.7;
}


/* ---------- CTA band ---------- */
.cta-band{
  background: var(--navy);
  color: var(--cream);
  padding: clamp(64px,8vw,110px) 0;
}
.cta-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
}
.cta-inner h2{ color: var(--cream); max-width: 620px; }
.cta-band--cream{ background: var(--cream); color: var(--ink); }
.cta-band--cream .eyebrow{ color: var(--ink); }
.cta-band--cream .cta-inner h2{ color: var(--ink); }

/* ---------- Contact page ---------- */
.contact-section{ overflow:hidden; }
.contact-row{
  display:flex;
  flex-direction:column;
  gap: 32px;
}
.contact-heading{
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 400;
  color: var(--ink);
  margin:0;
  flex: 0 0 auto;
}
.contact-info{ max-width: 820px; }
@media (min-width: 900px){
  .contact-row{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap: clamp(24px,4vw,64px);
  }
  .contact-info{ flex: 1 1 auto; padding-top: clamp(6px,1.2vw,14px); }
}

.offices-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
@media (min-width: 560px){
  .offices-grid{ grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,96px); }
}

.office-card{ margin-bottom: 36px; }
.offices-grid .office-card{ margin-bottom: 0; }
.office-card--email{ margin-bottom: 32px; }
.office-h{
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
}
.office-card address{ font-style:normal; font-family: var(--font-body); font-size: 15px; line-height:1.6; color: var(--ink); }
.office-card address a{ color: var(--ink); }
.office-card .meta{ margin-top:10px; font-size:13.5px; line-height:1.55; opacity:0.62; }

.contact-cta{
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-size: 14.5px;
  padding: 13px 22px;
}

.founder{ margin-top: clamp(48px,6vw,72px); }
.founder-photo{
  display:block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 900 / 1051;
  object-fit: cover;
  margin-bottom: 22px;
}
.founder-name{ font-family: var(--font-head); font-size: 17px; color: var(--ink); margin:0; }
.founder-title{ font-size: 14px; margin: 4px 0 0; opacity:0.62; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy-deep);
  color: var(--cream);
  padding: clamp(56px,7vw,88px) 0 32px;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px,5vw,56px);
  padding-bottom: clamp(40px,5vw,64px);
}
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

.footer-brand img{ height: 30px; margin-bottom: 20px; }
.footer-brand p{ font-size:14.5px; font-weight:300; color: rgba(237,235,224,0.68); max-width: 300px; line-height:1.65; }

.footer-col h5{
  font-size: 12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; opacity:0.55; margin-bottom:18px;
}
.footer-col ul{ display:flex; flex-direction:column; gap: 12px; }
.footer-col a, .footer-col address{ font-size:14.5px; font-weight:300; font-style:normal; color: rgba(237,235,224,0.82); line-height:1.6; }
.footer-col a:hover{ color: var(--cream); text-decoration: underline; text-underline-offset:3px; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top: 28px;
  border-top: 1px solid rgba(237,235,224,0.14);
  font-size: 12.5px;
  color: rgba(237,235,224,0.55);
}

/* ---------- Utilities ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.text-muted{ opacity:0.7; }
/* Content is always visible — never gated behind JS or scroll position.
   .in (added by IntersectionObserver, with fallbacks — see main.js) layers
   on a subtle fade-up as a finishing touch only, nothing depends on it. */
.reveal{ opacity:1; transform:none; }
.reveal.pre{ opacity:0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.pre.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal.pre{ opacity:1; transform:none; transition:none; } }

/* ---------- Preloader — cream splash → navy splash → reveal ----------
   Safe-by-default: the overlay's BASE state is invisible (opacity:0,
   visibility:hidden, pointer-events:none), so if animations are disabled,
   unsupported, or reduced-motion is requested, the homepage is simply
   visible immediately underneath with no intro — never stuck, never
   blocking. Only inside the no-preference media query does it become
   visible and run its short, self-terminating timeline. Pure CSS, no JS
   dependency at all. */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--cream); /* solid backstop — see note below */
}
.preloader-phase{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Both phases are fully opaque the instant they're visible — the reveal is a
   hard-edged clip-path wipe, never an opacity crossfade. This is deliberate:
   a crossfade window where both layers are simultaneously semi-transparent
   would let the real page flash through underneath for a few frames (this
   happened before). A solid cream layer topped by a solid navy layer that
   wipes down via clip-path guarantees 100% opaque coverage at every single
   frame of the animation. */
.preloader-phase--cream{ background: var(--cream); opacity:0; }
.preloader-phase--navy{
  background: var(--navy-deep);
  opacity:0;
  clip-path: inset(0 0 100% 0);
}
.preloader-logo{ height: clamp(38px,5.5vw,58px); width:auto; opacity:0; }

@media (prefers-reduced-motion: no-preference){
  .preloader{
    visibility: visible;
    animation: preloaderOut 2.6s cubic-bezier(.6,0,.2,1) forwards;
  }
  .preloader-phase--cream{ animation: preloaderCreamIn 2.6s cubic-bezier(.6,0,.2,1) forwards; }
  .preloader-phase--navy{ animation: preloaderNavyWipe 2.6s cubic-bezier(.6,0,.2,1) forwards; }
  .preloader-phase--cream .preloader-logo{ animation: logoCream 2.6s cubic-bezier(.6,0,.2,1) forwards; }
  .preloader-phase--navy .preloader-logo{ animation: logoNavy 2.6s cubic-bezier(.6,0,.2,1) forwards; }
}
@keyframes preloaderOut{
  0%, 82%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; }
}
/* Cream layer: snaps to fully opaque immediately and just stays there — it
   never fades, it simply gets covered by the navy curtain wiping down over
   it, so there's no moment where it's partially see-through. */
@keyframes preloaderCreamIn{
  0%{ opacity:1; }
  100%{ opacity:1; }
}
/* Navy layer: opaque from the first frame, revealed top-to-bottom by
   animating the clip-path — a solid curtain sliding down, not a fade. */
@keyframes preloaderNavyWipe{
  0%, 42%{ opacity:1; clip-path: inset(0 0 100% 0); }
  58%{ opacity:1; clip-path: inset(0 0 0% 0); }
  100%{ opacity:1; clip-path: inset(0 0 0% 0); }
}
@keyframes logoCream{
  0%{ opacity:0; transform:scale(.92); }
  8%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes logoNavy{
  0%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}
/* NOTE: deliberately no overflow-x:hidden on body/html — setting overflow on
   either axis forces browsers to auto-promote the other axis to a scroll
   container too, which makes body the sticky-positioning context instead of
   the viewport and breaks the Services sticky-stacking cards (only the first
   card would ever "stick"). The giant wordmark bleed is already clipped
   locally by .hero/.about-section's own overflow:hidden, so this isn't needed. */