/* ============================================================
   AURELANE — Mont-Fort-inspired atmospheric aesthetic
   ============================================================ */

:root {
  --navy: #2D628C;
  --muted: #81A0BB;
  --tertiary: #A9BFD2;
  --pale: #D1DDE8;
  --cool-grey: #C0C6D6;
  --bg: #FFFFFF;
  --bg-soft: #F6F6F6;
  --green-dark: #013842;
  --white: #FFFFFF;

  --ease: cubic-bezier(.4, 0, .1, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --navy-light: #3D78A6;

  --pad-y: 12rem;
  --wrap: 1320px;

  --font-head: "Josefin Sans", sans-serif;
  --font-body: "Questrial", "Jost", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   WEBGL WORLD — fullscreen fixed canvas behind the whole page
   ============================================================ */
#world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  display: block;
  /* Lazy-loaded: starts hidden, fades in once Three.js is initialized. */
  opacity: 0;
  transition: opacity 700ms ease-out;
  will-change: opacity;
}
#world.is-ready { opacity: 1; }
#world.is-retired { opacity: 0; }

/* Body starts solid black so during lazy-load (before the globe paints) the
   page reads as cinematic space. Once the user reaches Regions, the body
   shifts to a plain solid cream that matches the existing frosted reading
   panels — Regions → Responsibility → Contact → Footer sit on this static
   backdrop, no globe behind. */
body {
  background-color: #e6eef5;
  transition: background-color 600ms ease;
}
body.post-globe { background-color: #f5f7fa; }

/* The DOM scrolls over the world; the page itself is transparent so the fixed
   canvas (z-index:-1) shows through. The canvas paints its own backdrop. */
html { background: transparent; }

/* Photo-background DOM layers are retired — the world replaces them.
   Markup + alt text stay; only the visual layer is removed. */
.hero-bg,
.chapter-bg,
.regions-bg,
.responsibility-bg { display: none !important; }

/* Sections become transparent so the world reads behind every one of them.
   Body stays solid black (declared above) so post-globe sections sit on a
   plain, static backdrop. */
.manifesto,
.process,
.contact,
.footer { background: transparent; }
.hero { background: transparent; }
.regions, .responsibility { background: transparent; }

/* Local text backdrop helper — a soft frosted panel only where text needs
   help reading over the moving world. Mont-Fort feel: text floats on the world. */
.world-panel { position: relative; }
.world-panel::before {
  content: "";
  position: absolute;
  inset: -2rem -2.4rem;
  z-index: -1;
  background: radial-gradient(120% 120% at 30% 40%, rgba(245,247,250,0.78) 0%, rgba(245,247,250,0.5) 55%, rgba(245,247,250,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 4px;
  pointer-events: none;
}

/* Frosted reading panels behind text-heavy light sections so navy copy stays
   legible over the world. Applied to the content wrappers, not the sections,
   so the world still shows through the margins. */
.manifesto .manifesto-grid,
.process .wrap,
.regions .regions-grid,
.responsibility .resp-grid,
.contact .contact-grid {
  position: relative;
  isolation: isolate;
}
.manifesto .manifesto-grid::before,
.process .wrap::before,
.regions .regions-grid::before,
.responsibility .resp-grid::before,
.contact .contact-grid::before {
  content: "";
  position: absolute;
  inset: -3.4rem -3rem;
  z-index: -1;
  background: rgba(245,247,250,0.62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 24px 80px rgba(20,40,60,0.10);
  pointer-events: none;
}
/* Process has no reading panel — typography sits directly on the
   cinematic ocean scene with a soft top-to-bottom vignette so the
   ship still reads. Text becomes luminous-light for contrast. */
.process .wrap::before {
  background: linear-gradient(180deg,
    rgba(4,9,16,0.55) 0%,
    rgba(4,9,16,0.30) 30%,
    rgba(4,9,16,0.20) 60%,
    rgba(4,9,16,0.55) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
/* Process copy goes luminous over the ocean scene */
.process .eyebrow { color: rgba(245,247,250,0.72); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.process .reveal-words,
.process .reveal-words .word-inner,
.process .section-title { color: #F5F7FA !important; text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 6px rgba(0,0,0,0.55); }
.process .pillar { border-top-color: rgba(245,247,250,0.30); }
.process .pillar h3 { color: #F5F7FA; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.process .pillar p { color: rgba(232,238,246,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.process .pillar-num { color: rgba(180,200,220,0.88); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
/* Footer gets a subtle wash too. */
.footer { position: relative; }
.footer::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(245,247,250,0) 0%, rgba(245,247,250,0.78) 38%, rgba(245,247,250,0.92) 100%);
  pointer-events: none;
}

/* Hero wordmark halo — sits over a dark navy globe, so use a luminous fill
   plus a soft dark scrim behind the logo for guaranteed legibility. */
.hero-veil { display: none; }
.hero-logo {
  color: #F5F7FA;
  text-shadow: 0 2px 30px rgba(10,20,35,0.65), 0 1px 6px rgba(10,20,35,0.55);
}
.hero-mark { color: #F5F7FA !important; }
/* Hero halo removed — the stylized dark globe provides clean contrast; the
   wordmark's text-shadow handles legibility. */
.hero-logo::before { display: none; }

/* Chapter text panel — the chapter-veil photo wash is replaced by a compact
   frosted card behind each chapter's text block, since the world orbits behind. */
.chapter-veil { display: none; }
.chapter-inner {
  background: rgba(245,247,250,0.6);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(20,40,60,0.12);
  padding: 3rem 3.2rem !important;
  max-width: 620px;
  margin-left: 5vw;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

@media (hover: none), (pointer: coarse) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 3rem;
}

.section { padding: var(--pad-y) 0; }

/* ---- Type primitives ---- */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 2.2rem;
}
.eyebrow-light { color: var(--white); }

.section-title,
.manifesto-title,
.chapter-title,
.regions-title,
.resp-title,
.contact-title {
  font-family: var(--font-head);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.12;
  color: var(--navy);
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  /* Do NOT transition transform — JS updates it every frame and any
     CSS transition on transform causes the dot to lag behind the mouse. */
  transition: background 0.2s var(--ease), width 0.18s var(--ease), height 0.18s var(--ease);
  mix-blend-mode: normal;
  will-change: transform;
}
/* Scale on mousedown via width/height so JS-driven transform stays clean. */
.cursor-dot.is-down { width: 18px; height: 18px; }
.cursor-dot.on-dark { background: var(--white); }
@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }

/* 3-part composite cursor: side-dot clusters that spread on interactive hover */
.cursor-cluster {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--navy);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-quint);
  will-change: transform, opacity;
}
.cursor-cluster.show { opacity: 0.85; }
@media (hover: none), (pointer: coarse) { .cursor-cluster { display: none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 3rem;
  transition: background 0.6s var(--ease), padding 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  padding: 1.1rem 3rem;
  border-bottom: 1px solid var(--navy);
}

.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--navy); }
.brand-mark { width: 26px; height: 26px; }
.brand-word {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 2.4rem; }
.nav-links a {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--navy);
  cursor: none;
  position: relative;
  z-index: 1600;
}
.nav-toggle-word {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-toggle-dots { display: flex; gap: 4px; }
.nav-toggle-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--navy); }

/* Mobile overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.menu-overlay-links { display: flex; flex-direction: column; gap: 1.8rem; text-align: center; }
.menu-overlay-links a {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 60vh;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Push the wordmark down so it sits ~1.5in (≈144px) above the globe arc.
     Hero is 60vh; globe top arc sits near the bottom of the hero. */
  padding-top: clamp(11rem, 24vh, 18rem);
}
/* Soft atmospheric halo — a wide, low-contrast glow that hugs the curve
   of the globe arc and fades smoothly across the full hero width. The
   ellipse is wider than the hero so there's no horizontal cutoff. */
/* Soft sun-glow under the globe — luminous warm white that diffuses into
   the pale daylight backdrop. */
.hero-halo {
  position: absolute;
  left: 50%;
  bottom: -56vh;
  width: 220vw;
  height: 88vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 46% at 50% 10%,
      rgba(255, 252, 240, 0.55) 0%,
      rgba(245, 240, 220, 0.28) 22%,
      rgba(225, 230, 240, 0.14) 46%,
      rgba(200, 215, 230, 0.05) 70%,
      rgba(255, 255, 255, 0) 88%);
  filter: blur(8px);
  opacity: 0.95;
}
.hero-bg {
  position: absolute;
  inset: -6% 0;
  background: url('../assets/hero-bg.jpg') center/cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}
/* Light atmospheric veil — a barely-there warm tint to unify hero + globe.
   Light at top fading to a touch more saturation at the bottom horizon. */
.hero-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(255,250,235,0.08) 0%, rgba(220,228,238,0) 60%),
    linear-gradient(180deg, rgba(255,253,245,0.10) 0%, transparent 40%, transparent 60%, rgba(190,205,222,0.08) 100%);
}
/* Local soft white halo behind the centered wordmark for legibility on the bright hero */
.hero-veil::after { display: none; }
.hero-logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  color: #0e1822;
  opacity: 0;
  text-align: center;
  text-shadow: 0 1px 22px rgba(255,255,255,0.55), 0 1px 2px rgba(255,255,255,0.45);
}
.hero-mark { width: clamp(38px, 4.2vw, 56px); height: clamp(38px, 4.2vw, 56px); color: #F5F7FA; }
.hero-wordmark-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
}
.hero-wordmark {
  position: relative;
  font-family: var(--font-head);
  font-weight: 200;
  font-size: clamp(2.6rem, 8vw, 6rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-left: 0.28em;
  line-height: 1;
}
.hero-wordmark-sub {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: clamp(0.7rem, 1.05vw, 0.95rem);
  letter-spacing: 0.62em;
  text-transform: uppercase;
  padding-left: 0.62em;
  color: #2D628C;
  opacity: 0.88;
  line-height: 1;
  position: relative;
}
.hero-wordmark-sub::before,
.hero-wordmark-sub::after {
  content: "";
  display: inline-block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
  margin: 0 1.1em;
  transform: translateY(-0.1em);
}
/* Tagline beneath wordmark — Cross-Border CPG Trade & Advisory */
.hero-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.78rem, 1.05vw, 0.98rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0e1822;
  opacity: 0.7;
  line-height: 1;
  margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}
/* One-time cinematic shimmer sweep across the wordmark — navy ink with a soft sheen */
.hero-wordmark.shimmer {
  background: linear-gradient(100deg,
    #0e1822 0%, #0e1822 38%, #2D628C 50%, #0e1822 62%, #0e1822 100%);
  background-size: 280% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wordmarkShimmer 1.6s var(--ease-quint) forwards;
}
@keyframes wordmarkShimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

.scroll-cue {
  position: absolute;
  left: 3rem; bottom: 2.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.scroll-cue span:first-child {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
}
.scroll-cue.pulse { animation: cuePulse 3s ease-in-out infinite; }
@keyframes cuePulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.scroll-underline { width: 64px; height: 1px; background: var(--navy); opacity: 0.6; }
.hero-progress {
  position: absolute;
  right: 3rem; bottom: 3rem;
  width: 90px; height: 1px;
  background: var(--navy);
  opacity: 0.5;
  z-index: 2;
}

/* ============================================================
   SECTION 2 — MANIFESTO
   ============================================================ */
.manifesto { background: var(--bg); }
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.manifesto-title {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  max-width: 28ch;
  line-height: 1.08;
}
.manifesto-aside {
  justify-self: start;
  max-width: 56ch;
}
.aside-body { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.round-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border: 1px solid var(--tertiary);
  border-radius: 50%;
  color: var(--navy);
  font-size: 1.1rem;
  margin-top: 2.4rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.round-arrow:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Word reveal — Mont-Fort recipe: each word in a <span> inside an
   overflow:hidden line; on enter, y:200% -> 0, duration 0.6, power2.out,
   stagger 0.1. The JS builds .reveal-line > .word-mask > .word.word-inner. */
.reveal-words { color: var(--navy); }
.reveal-words .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.26em;
}
.reveal-words .word-inner {
  display: inline-block;
  color: var(--navy);
  will-change: transform;
}
.reveal-words[data-light] .word-inner { color: var(--navy); }

/* ============================================================
   SECTION 3 — HORIZONTAL CHAPTERS
   ============================================================ */
.chapters { position: relative; }
.chapters-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.chapters-track {
  display: flex;
  width: 400vw;
  height: 100%;
  will-change: transform;
}
.chapter {
  position: relative;
  width: 100vw;
  height: 100%;
  flex: 0 0 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.chapter-bg {
  position: absolute;
  inset: -4% 0;
  background-image: var(--cimg);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}
/* Corporate veil: soft white wash on the text (left) side so navy text reads on the bright image */
.chapter-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.18) 58%, rgba(255,255,255,0) 80%),
    radial-gradient(120% 110% at 26% 46%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
}
.chapter-inner {
  position: relative;
  z-index: 2;
  padding: 0 5vw;
  max-width: 760px;
}
.chapter-eyebrow {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.6rem;
}
.chapter-title {
  font-size: clamp(1.7rem, 3.8vw, 3.2rem);
  margin-bottom: 2rem;
  max-width: 17ch;
  color: var(--navy);
  text-shadow: 0 1px 16px rgba(255,255,255,0.6);
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}
.chapter-body {
  color: #324A5E;
  max-width: 380px;
  font-size: 0.98rem;
  margin-bottom: 2.2rem;
}
.chapter-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  font-size: 1.1rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.chapter-cta:hover { background: var(--navy); color: var(--white); }

.chapter-marker {
  position: absolute;
  left: 5vw; bottom: 3.5rem;
  z-index: 2;
}
.diamond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid rgba(45,98,140,0.6);
  background: rgba(255,255,255,0.45);
  transform: rotate(45deg);
}
.diamond i {
  transform: rotate(-45deg);
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--navy);
}

.chapters-progress {
  position: absolute;
  right: 5vw; bottom: 3.9rem;
  z-index: 3;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.cp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(45,98,140,0.7);
  background: rgba(255,255,255,0.4);
  transition: background 0.4s var(--ease);
}
.cp-dot.is-active { background: var(--navy); }

/* ============================================================
   SECTION 4 — PROCESS
   ============================================================ */
.process { background: transparent; }
.process-head { margin-bottom: 5rem; }
.section-title { font-size: clamp(2rem, 4.6vw, 4rem); max-width: 18ch; }
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
.pillar { border-top: 1px solid var(--pale); padding-top: 2rem; }
.pillar-num {
  font-family: var(--font-head);
  font-weight: 200;
  font-size: 2.4rem;
  color: var(--tertiary);
  display: block;
  margin-bottom: 1.2rem;
}
.pillar h3 {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1rem;
}
.pillar p { color: var(--muted); font-size: 0.96rem; }

/* ============================================================
   SECTION 5 — REGIONS
   ============================================================ */

/* Register --regions-p as a real <number> so it participates in
   calc(), color-mix(), and opacity math. Without @property, custom
   properties are treated as unparsed strings and math silently fails. */
@property --regions-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.regions {
  position: relative;
  min-height: 130vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--pad-y) 0;
  /* Scroll-driven tint progress: 0 = light (top of section), 1 = deep navy (bottom) */
  --regions-p: 0;
  /* Deep navy target for the gradient wash + border tone */
  --regions-deep: #0c2845;
}

/* Full-section wash that fades from transparent → deep navy as the
   user scrolls through. A uniform navy fill whose opacity is driven
   by scroll progress — gives a smooth, cinematic darkening reveal
   across the entire section. z-index sits above the frosted reading
   card (which is at z-index -1 inside .regions-grid) so the whole
   section — including the card — darkens uniformly. */
.regions-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* Cinematic vertical gradient — lifted slightly at top, near-black at
     bottom — so full scroll reads filmic rather than flat. */
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(16,38,72,0.55), transparent 70%),
    linear-gradient(180deg, var(--regions-deep) 0%, var(--regions-deep-2) 100%);
  opacity: var(--regions-p);
  transition: opacity 0.15s linear;
  will-change: opacity;
}

/* The regions grid intentionally has NO isolated stacking context so
   the section-wide tint (z-index 3) can overlay both the frosted
   reading-card ::before AND the background, while text (positioned
   siblings with their own z-index) stays above the tint. */
.regions .regions-grid { position: relative; z-index: auto; isolation: auto; }
/* The frosted reading-card panel fades on scroll so the darkening
   tint can wash the whole section uniformly. */
.regions .regions-grid::before {
  opacity: calc(1 - var(--regions-p));
  transition: opacity 0.15s linear;
}
/* Lift the interactive/text content above the tint by giving each
   text container its own positioned context above z-index: 3. */
.regions .regions-grid > * {
  position: relative;
  z-index: 4;
}

/* Text color interpolation: navy → warm cream as tint deepens. */
.regions .eyebrow,
.regions-title,
.regions-body,
.rl-head,
.rl-sub {
  transition: color 0.15s linear, border-color 0.15s linear, text-shadow 0.15s linear;
}
.rl-sub {
  color: color-mix(in oklab, var(--muted) calc((1 - var(--regions-p)) * 100%), #b8c8d8);
}
.regions .eyebrow {
  color: color-mix(in oklab, var(--navy) calc((1 - var(--regions-p)) * 100%), #cfe0f0);
}
.regions-title {
  color: color-mix(in oklab, var(--navy) calc((1 - var(--regions-p)) * 100%), #f4ece0);
  text-shadow: 0 1px 16px rgba(255, 255, 255, calc(0.6 * (1 - var(--regions-p))));
}
.regions-body {
  color: color-mix(in oklab, #324A5E calc((1 - var(--regions-p)) * 100%), #d8e2ec);
}
.rl-head {
  color: color-mix(in oklab, var(--navy) calc((1 - var(--regions-p)) * 100%), #f4ece0);
}
.regions-list li {
  transition: border-color 0.15s linear;
  border-top-color: color-mix(in srgb, rgba(45,98,140,0.28) calc((1 - var(--regions-p)) * 100%), rgba(244,236,224,0.35));
}
.regions-bg {
  position: absolute;
  inset: -5% 0;
  background: url('../assets/regions-bg.jpg') center/cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}
.regions-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.66) 40%, rgba(255,255,255,0.34) 70%, rgba(255,255,255,0.16) 100%),
    radial-gradient(120% 110% at 28% 45%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 62%);
}
.regions-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: center;
}
.regions-title { font-size: clamp(2rem, 4.2vw, 3.6rem); max-width: 16ch; margin-bottom: 2rem; }
.regions-body { max-width: 460px; font-size: 1rem; }
.regions-list { display: flex; flex-direction: column; gap: 1.6rem; }
.regions-list li { padding-top: 1rem; }
.rl-head {
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.rl-sub {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   SECTION 6 — RESPONSIBILITY (light corporate QC)
   ============================================================ */
.responsibility {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--pad-y) 0;
  color: var(--navy);
}
.responsibility-bg {
  position: absolute;
  inset: -5% 0;
  background: url('../assets/responsibility-bg.jpg') center/cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}
.responsibility-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.4) 100%),
    radial-gradient(120% 110% at 32% 45%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0.45) 100%);
}
.resp-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
.responsibility .eyebrow-light { color: var(--navy); }
.resp-title { color: var(--navy); font-size: clamp(1.9rem, 4vw, 3.4rem); max-width: 24ch; line-height: 1.1; text-shadow: 0 1px 16px rgba(255,255,255,0.6); }
.resp-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
  padding-top: 0.5rem;
  max-width: 1100px;
}
.resp-cols p { color: #324A5E; font-size: 1rem; line-height: 1.65; max-width: 36ch; margin: 0; }
@media (max-width: 900px) {
  .resp-cols { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ============================================================
   SECTION 7 — CONTACT
   ============================================================ */
.contact { background: var(--bg); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}
.contact-title { font-size: clamp(2rem, 4.4vw, 4rem); max-width: 14ch; margin-bottom: 2rem; }
.contact-body { color: var(--muted); margin-bottom: 1.4rem; }
.contact-email {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--navy);
  border-bottom: 1px solid var(--tertiary);
  padding-bottom: 2px;
  transition: border-color 0.4s var(--ease);
}
.contact-email:hover { border-color: var(--navy); }
.contact-figure {
  margin-top: 3.5rem;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.contact-figure img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; }

.contact-form { display: flex; flex-direction: column; gap: 2rem; padding-top: 1rem; }
.field { display: flex; flex-direction: column; }
.field label {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.field input, .field textarea {
  background: none;
  border: none;
  border-bottom: 1px solid var(--pale);
  padding: 0.6rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy);
  outline: none;
  transition: border-color 0.4s var(--ease);
  resize: none;
  cursor: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--cool-grey); }
.field input:focus, .field textarea:focus { border-color: var(--navy); }
.send-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  cursor: none;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.send-btn:hover { background: var(--navy); color: var(--white); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg); padding: 6rem 0 3rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.9rem; }
.footer-col a, .footer-line, .footer-head {
  font-family: var(--font-head);
  font-weight: 300;
  letter-spacing: 0.12em;
}
.footer-col > a {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--navy);
  position: relative;
  width: fit-content;
}
.footer-col > a:hover { color: var(--muted); }
.footer-head {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: 0.18em;
  margin-bottom: 0.4rem;
}
.footer-line { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; }
.footer-line a { color: var(--muted); }
.footer-line a:hover { color: var(--navy); }

.footer-rule { height: 1px; background: var(--pale); }
.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
}
.footer-copy {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-quint), transform 1.2s var(--ease-quint);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   CINEMATIC LETTERBOX BARS — removed for corporate tone
   ============================================================ */
.letterbox { display: none !important; }

/* ============================================================
   CHAPTER TIMESTAMP — film slate (subtle navy)
   ============================================================ */
.chapter-slate {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 1850;
  font-family: var(--font-head);
  font-weight: 200;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0;
  transition: opacity 0.6s var(--ease-quint), color 0.4s var(--ease);
  pointer-events: none;
  mix-blend-mode: normal;
}
.chapter-slate.show { opacity: 0.35; }
.chapter-slate.on-dark { color: var(--navy); }

/* (Section-cut hairline removed per request — no more horizontal line under cursor on scroll.) */
.section-cut { display: none !important; }

/* ============================================================
   CURSOR VIEW RING
   ============================================================ */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 72px; height: 72px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s var(--ease-quint), border-color 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cursor-ring span {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cursor-ring.active { opacity: 1; border-color: rgba(45,98,140,0.8); }
.cursor-ring span { display: none; }
.cursor-ring.active span { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .pillars { grid-template-columns: 1fr; gap: 2.5rem; }
  .regions-grid, .resp-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .manifesto-aside { justify-self: start; }
}

@media (max-width: 768px) {
  :root { --pad-y: 7.5rem; }
  .wrap { padding: 0 1.6rem; }
  .nav { padding: 1.4rem 1.6rem; }
  .nav.scrolled { padding: 1rem 1.6rem; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .scroll-cue { left: 1.6rem; }
  .hero-progress { right: 1.6rem; }

  /* Horizontal chapters collapse to stacked vertical */
  .chapters-pin { height: auto; overflow: visible; }
  .chapters-track {
    flex-direction: column;
    width: 100%;
    height: auto;
    transform: none !important;
  }
  .chapter { width: 100%; flex: none; height: 100vh; min-height: 560px; }
  .chapter-inner { padding: 2rem 1.6rem !important; margin-left: 0; max-width: none; border-radius: 0; }
  .chapter-marker { left: 1.6rem; }
  .chapter-veil { background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0.85) 100%),
    radial-gradient(130% 90% at 50% 55%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%); }
  .chapters-progress { display: none; }

  .manifesto-title { font-size: clamp(2rem, 9vw, 3rem); }

  /* Frosted reading panels bleed -3rem horizontally on desktop; on narrow
     viewports that bleed would push past the screen edge and create
     horizontal overflow. Clamp the horizontal inset to the wrap padding. */
  .manifesto .manifesto-grid::before,
  .process .wrap::before,
  .regions .regions-grid::before,
  .responsibility .resp-grid::before,
  .contact .contact-grid::before {
    inset: -1.6rem -1.2rem;
  }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}

@media (max-width: 420px) {
  .hero-wordmark { letter-spacing: 0.18em; font-size: clamp(1.8rem, 9.5vw, 2.6rem); }
  .hero-wordmark-sub { letter-spacing: 0.42em; font-size: 0.62rem; padding-left: 0.42em; }
  .hero-wordmark-sub::before, .hero-wordmark-sub::after { width: 22px; margin: 0 0.7em; }
  .hero-wordmark-stack { gap: 0.7rem; }
  .hero-logo { gap: 1.4rem; }
  .hero-mark { width: 34px; height: 34px; }
  .chapter-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal-words .word-inner { transform: none !important; opacity: 1 !important; color: var(--navy) !important; }
  .reveal-words[data-light] .word-inner { color: var(--navy) !important; }
  .hero-logo { opacity: 1 !important; }
  .hero-wordmark.shimmer { animation: none !important; -webkit-text-fill-color: #2D628C; color: #2D628C; }
  .scroll-cue.pulse { animation: none !important; }
  .chapters-track { transform: none !important; }
}