/*
Theme Name: Pathrose Law
Theme URI: https://pathrose.com
Author: Pathrose Law
Description: Cinematic dark WordPress theme for Pathrose Law — full-bleed video hero with seamless crossfade, stacked PATHROSE LAW branding, scroll-jacked sections, full-screen menu overlay with world clocks, Impact metrics, Capabilities, and Operational Stories.
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pathrose
Tags: dark, cinematic, portfolio, video, full-width-template
*/

/* =========================================================
   RESET & VARIABLES
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:    #080808;
  --charcoal: #111111;
  --mid:      #1a1a1a;
  --dim:      #2c2c2c;
  --muted:    #555555;
  --white:    #f5f5f0;
  --offwhite: #c8c8c0;

  /* ── Accent: Champagne — per brief item #15 ────────────
     Champagne: warm, refined, sits elegantly on dark bg.
     (British Racing Green alternative: #2d5a3d)
     Toggle by swapping the line below. */
  --accent:   #c8a882;   /* Champagne */
  /* --accent: #2d5a3d; */ /* British Racing Green — uncomment to preview */

  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h:    64px;
  --z-nav:    9100;
  --z-menu:   9200;
  --z-cursor: 9999;
}

/* =========================================================
   BASE
   ========================================================= */
html { font-size: 16px; background: var(--black); scroll-behavior: auto; }
body { font-family: var(--font-sans); color: var(--white); background: var(--black); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.has-mouse { cursor: none; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { border: none; background: none; font-family: inherit; color: inherit; }
body.has-mouse a, body.has-mouse button { cursor: none; }

/* =========================================================
   ADMIN BAR
   ========================================================= */
.admin-bar #site-nav     { top: 32px; }
.admin-bar #menu-overlay { top: 32px; }
.admin-bar #page-curtain { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #site-nav     { top: 46px; }
  .admin-bar #menu-overlay { top: 46px; }
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
#cursor-dot, #cursor-ring {
  position: fixed; top: -200px; left: -200px;
  border-radius: 50%; pointer-events: none;
  z-index: var(--z-cursor); mix-blend-mode: difference;
  transform: translate(-50%, -50%); will-change: left, top;
}
#cursor-dot  { width: 7px; height: 7px; background: var(--white); transition: opacity 0.3s; }
#cursor-ring { width: 38px; height: 38px; border: 1.5px solid rgba(245,245,240,0.45); transition: width 0.28s var(--ease-expo), height 0.28s var(--ease-expo), border-color 0.28s, opacity 0.3s; }
body.cursor-hover #cursor-ring { width: 60px; height: 60px; border-color: var(--white); }

/* =========================================================
   GLOBAL NAV — logo + hamburger only
   ========================================================= */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; z-index: var(--z-nav);
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 0.4s;
}
body.is-front-page #site-nav {
  background: linear-gradient(to bottom, rgba(8,8,8,0.7) 0%, transparent 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.is-front-page #site-nav.scrolled {
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* Logo — PATHROSE LAW */
#nav-logo {
  font-size: clamp(11px, 1vw, 14px); font-weight: 800;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--white); user-select: none; white-space: nowrap;
  line-height: 1.1;
}
#nav-logo .logo-law { display: inline; }
/* Front page: logo fades in after hero scroll */
body.is-front-page #nav-logo { opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-expo); }
body.is-front-page #site-nav.scrolled #nav-logo { opacity: 1; pointer-events: auto; }

/* Hamburger */
#menu-toggle {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; width: 44px; height: 44px; padding: 10px; margin-left: auto;
}
body.has-mouse #menu-toggle { cursor: none; }
#menu-toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--white);
  transition: transform 0.45s var(--ease-circ), opacity 0.3s; transform-origin: center; pointer-events: none;
}
#menu-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================
   MENU OVERLAY
   ========================================================= */
#menu-overlay {
  position: fixed; inset: 0; top: 0; background: #0d0d0d;
  z-index: var(--z-menu); display: flex; flex-direction: column;
  padding: clamp(90px,13vh,120px) 60px 56px; overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(-16px);
  transition: transform 0.7s var(--ease-circ), opacity 0.45s var(--ease-soft), visibility 0s linear 0.7s;
}
#menu-overlay.open {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: transform 0.7s var(--ease-circ), opacity 0.35s var(--ease-soft), visibility 0s linear 0s;
}

/* Close button */
#menu-close {
  position: absolute; top: clamp(18px,3vh,28px); right: 40px;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: transparent; border: 1px solid rgba(245,245,240,0.15);
  color: var(--offwhite); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color 0.3s, color 0.3s, background 0.3s; z-index: 10;
}
body.has-mouse #menu-close { cursor: none; }
#menu-close:hover { border-color: var(--white); color: var(--white); background: rgba(245,245,240,0.06); }
#menu-close span:first-child { font-size: 14px; line-height: 1; }
.menu-close-label { font-size: 9px; letter-spacing: 0.22em; }

/* Overlay nav */
.overlay-nav {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; flex: 1; justify-content: center;
}
.overlay-nav .sub-menu { display: none; }
.overlay-nav li { overflow: hidden; list-style: none; }
.overlay-nav a {
  display: block; font-size: clamp(44px,7.5vw,104px); font-weight: 900;
  line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--white); text-decoration: none; padding: 2px 0;
  transform: translateY(110%); transition: transform 0.75s var(--ease-expo), color 0.3s;
}
#menu-overlay.open .overlay-nav li:nth-child(1) a { transform: translateY(0); transition-delay: 0.10s; }
#menu-overlay.open .overlay-nav li:nth-child(2) a { transform: translateY(0); transition-delay: 0.17s; }
#menu-overlay.open .overlay-nav li:nth-child(3) a { transform: translateY(0); transition-delay: 0.24s; }
#menu-overlay.open .overlay-nav li:nth-child(4) a { transform: translateY(0); transition-delay: 0.31s; }
#menu-overlay.open .overlay-nav li:nth-child(5) a { transform: translateY(0); transition-delay: 0.38s; }
#menu-overlay.open .overlay-nav li:nth-child(6) a { transform: translateY(0); transition-delay: 0.45s; }
.overlay-nav a:hover { color: var(--white); }
.overlay-nav-index { display: inline-block; font-size: 0.15em; font-weight: 400; letter-spacing: 0.14em; vertical-align: super; color: var(--muted); margin-right: 0.5em; }

/* World Clocks */
.world-clocks { display: flex; gap: 48px; padding-top: 32px; border-top: 1px solid var(--dim); margin-top: auto; flex-wrap: wrap; }
.clock-item { display: flex; flex-direction: column; gap: 5px; }
.clock-city { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); }
.clock-time { font-size: clamp(18px,2vw,28px); font-weight: 300; letter-spacing: 0.04em; font-family: var(--font-mono); color: var(--offwhite); font-variant-numeric: tabular-nums; }

/* Overlay watermark — per brief #7: subtle, intentional branding */
.overlay-tagline {
  position: absolute; right: 60px; bottom: 56px;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,245,240,0.12); font-family: var(--font-mono);
  writing-mode: vertical-rl; transform: rotate(180deg);
  user-select: none; pointer-events: none;
}

/* =========================================================
   HERO — Stacked PATHROSE / LAW + crossfade video
   ========================================================= */
#hero {
  position: relative; width: 100vw; height: 100vh;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}

/* Multiple video layers for crossfade — per brief #5 */
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-video-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(8,8,8,0.22) 0%, rgba(8,8,8,0.08) 40%, rgba(8,8,8,0.5) 80%, rgba(8,8,8,0.97) 100%);
}
.hero-video-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.6) brightness(0.8);
  transform: scale(1.06); will-change: transform, opacity;
  opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1;
}
.hero-video-slide.active { opacity: 1; }

/* Stacked hero logo — PATHROSE above LAW below per brief #1 */
#hero-logo {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  user-select: none; will-change: transform, opacity; transform-origin: center;
}
.hero-logo-main {
  display: block; font-size: clamp(42px, 9vw, 132px); font-weight: 900;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--white);
  line-height: 0.9;
}
.hero-logo-law {
  display: block; font-size: clamp(42px, 9vw, 132px); font-weight: 900;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--white);
  line-height: 0.9;
}

.scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.45; animation: scrollPulse 2.8s ease-in-out infinite; }
.scroll-hint-label { font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; font-family: var(--font-mono); }
.scroll-hint-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--white), transparent); }
@keyframes scrollPulse { 0%,100%{opacity:.45;transform:translateX(-50%) translateY(0);}50%{opacity:.18;transform:translateX(-50%) translateY(12px);} }

/* =========================================================
   SNAP SCROLL — per brief #6
   ========================================================= */
body.is-front-page {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#hero          { min-height: 100vh; }
#intro         { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
#work-preview  { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

/* =========================================================
   INTRO
   ========================================================= */
#intro { padding: clamp(80px,10vw,140px) clamp(32px,7vw,120px); }
.intro-eyebrow { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--white); font-family: var(--font-mono); margin-bottom: 28px; }
.intro-headline { font-size: clamp(28px,5vw,72px); font-weight: 700; line-height: 1.06; letter-spacing: -.025em; max-width: 860px; margin-bottom: 36px; }
.intro-headline em { font-style: normal; color: var(--white); }
.intro-body { font-size: clamp(15px,1.2vw,18px); line-height: 1.8; color: var(--offwhite); max-width: 460px; font-weight: 300; }
.intro-rule { width: 44px; height: 1px; background: var(--accent); margin: 44px 0; }

/* =========================================================
   BRAND STATEMENT
   ========================================================= */
#brand-statement {
  padding: clamp(80px,12vw,140px) clamp(32px,7vw,120px);
  background: var(--black);
  border-bottom: 1px solid var(--dim);
}
.brand-statement-inner { max-width: 900px; }
.brand-statement-text {
  font-size: clamp(22px,3.5vw,52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}
.brand-statement-text em {
  font-style: normal;
  color: var(--white);
}

/* =========================================================
   FANTASY-STYLE VIDEO SECTIONS
   ========================================================= */
#video-sections-wrap {
  background: var(--black);
}

.video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Video background */
.video-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.video-section-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.65);
  transform: scale(1.03);
  transition: transform 1.2s var(--ease-expo),
              filter 0.8s var(--ease-soft);
  will-change: transform, filter;
}
.video-section.is-active .video-section-player {
  filter: saturate(0.75) brightness(0.8);
  transform: scale(1.0);
}
.video-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,8,8,0.92) 0%,
    rgba(8,8,8,0.4)  40%,
    rgba(8,8,8,0.1)  70%,
    rgba(8,8,8,0.0)  100%
  );
  z-index: 1;
}

/* Content — editorial text layout, Fantasy.co style */
.video-section-content {
  position: relative;
  z-index: 2;
  padding: clamp(40px,6vw,80px) clamp(40px,6vw,100px) clamp(80px,10vw,120px);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.75s var(--ease-expo),
              opacity 0.65s var(--ease-soft);
}
.video-section.is-active .video-section-content {
  transform: translateY(0);
  opacity: 1;
}

/* Top-left: index + eyebrow */
.video-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.video-section-index {
  font-size: 9px;
  letter-spacing: 0.28em;
  font-family: var(--font-mono);
  color: var(--muted);
}
.video-section-eyebrow {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--white);
}

/* Large statement text — centre of panel, max width, editorial */
.video-section-statement {
  font-size: clamp(18px, 2.8vw, 42px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 700px;
  align-self: flex-end;   /* sits towards bottom */
  margin-bottom: 0;
}

/* Discreet page link — bottom-right corner */
.video-section-pagelink {
  position: absolute;
  bottom: clamp(28px,4vw,48px);
  right: clamp(32px,5vw,80px);
  z-index: 3;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: rgba(245,245,240,0.5);
  transition: color 0.3s;
}
.video-section-pagelink:hover { color: var(--white); }

/* Progress bar */
.video-section-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(245,245,240,0.08);
  z-index: 3;
}
.video-section-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}
.video-section.is-active .video-section-progress-fill {
  width: 100%;
  transition: width 6s linear; /* matches video autoplay window */
}

/* =========================================================
   WORK PREVIEW (kept for non-homepage pages that need it)
   ========================================================= */
#work-preview { padding: 0 clamp(32px,5vw,90px) clamp(60px,8vw,100px); }
.section-label { display: flex; align-items: center; gap: 18px; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); margin-bottom: 44px; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--dim); }
.work-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.work-row.asymmetric { grid-template-columns: 5fr 3fr; }
.work-card { position: relative; overflow: hidden; background: var(--mid); aspect-ratio: 16/9; }
.work-card video, .work-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.6); transform: scale(1.04); transition: filter .7s var(--ease-soft), transform .9s var(--ease-expo); }
.work-card:hover video, .work-card:hover img { filter: grayscale(20%) brightness(0.88); transform: scale(1.1); }
.work-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 24px; background: linear-gradient(to top, rgba(8,8,8,.9) 0%, transparent 100%); transform: translateY(6px); opacity: 0; transition: opacity .4s var(--ease-soft), transform .45s var(--ease-expo); }
.work-card:hover .work-card-info { opacity: 1; transform: translateY(0); }
.work-card-cat { font-size: 8px; letter-spacing: .25em; text-transform: uppercase; color: var(--white); font-family: var(--font-mono); margin-bottom: 5px; }
.work-card-title { font-size: clamp(13px,1.3vw,18px); font-weight: 600; letter-spacing: .03em; }

/* =========================================================
   ARCHIVE PAGE
   ========================================================= */
.page-archive-header { padding: clamp(110px,14vw,190px) clamp(32px,6vw,100px) 56px; }
.page-archive-header h1 { font-size: clamp(52px,8.5vw,120px); font-weight: 900; letter-spacing: -.03em; line-height: .92; text-transform: uppercase; }
.page-archive-header p { margin-top: 28px; font-size: clamp(14px,1.2vw,17px); color: var(--offwhite); font-weight: 300; max-width: 420px; line-height: 1.72; }
.archive-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 clamp(32px,6vw,100px) 44px; }
.filter-btn { padding: 9px 20px; border: 1px solid var(--dim); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--font-mono); color: var(--muted); background: transparent; transition: border-color .3s, color .3s, background .3s; }
body.has-mouse .filter-btn { cursor: none; }
.filter-btn:hover, .filter-btn.active { border-color: var(--white); color: var(--white); background: rgba(245,245,240,.04); }
.archive-grid { columns: 4; column-gap: 14px; padding: 0 clamp(20px,4vw,80px) 80px; }
@media(max-width:1200px){.archive-grid{columns:3;}}
@media(max-width:768px){.archive-grid{columns:2;}}
@media(max-width:480px){.archive-grid{columns:1;}}
.archive-item { break-inside: avoid; margin-bottom: 14px; position: relative; overflow: hidden; background: var(--mid); transition: opacity .38s var(--ease-soft), transform .38s var(--ease-soft); }
.archive-item video, .archive-item img { width: 100%; display: block; filter: grayscale(100%) brightness(0.58) contrast(1.08); transform: scale(1.02); transition: filter .75s var(--ease-soft), transform .95s var(--ease-expo); }
.archive-item:hover video, .archive-item:hover img { filter: grayscale(10%) brightness(0.9); transform: scale(1.08); }
.archive-item-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: linear-gradient(to top, rgba(8,8,8,.86) 0%, transparent 55%); opacity: 0; transition: opacity .4s var(--ease-soft); }
.archive-item:hover .archive-item-overlay { opacity: 1; }
.archive-item-cat { font-size: 7px; letter-spacing: .25em; text-transform: uppercase; color: var(--white); font-family: var(--font-mono); margin-bottom: 4px; }
.archive-item-name { font-size: clamp(11px,1vw,15px); font-weight: 600; line-height: 1.25; }

/* =========================================================
   IMPACT PAGE
   ========================================================= */
.mpact-hero { min-height: 58vh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(120px,15vw,200px) clamp(32px,6vw,100px) 72px; border-bottom: 1px solid var(--dim); }
.mpact-hero h1 { font-size: clamp(56px,9.5vw,134px); font-weight: 900; letter-spacing: -.03em; line-height: .93; text-transform: uppercase; }
.mpact-hero p { margin-top: 32px; font-size: clamp(14px,1.2vw,18px); color: var(--offwhite); font-weight: 300; max-width: 460px; line-height: 1.72; }

/* Impact split layout — Fantasy.co style: video left / stat right */
.impact-metrics { background: var(--black); }

.impact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  border-bottom: 1px solid var(--dim);
}
.impact-split--reverse { direction: rtl; }
.impact-split--reverse > * { direction: ltr; }

.impact-split-media {
  position: relative;
  overflow: hidden;
  background: var(--mid);
}
.impact-split-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.75);
  transform: scale(1.04);
  transition: transform 0.8s var(--ease-expo);
}
.impact-split:hover .impact-split-media video { transform: scale(1.08); }

.impact-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px,8vw,100px) clamp(40px,6vw,80px);
  border-left: 1px solid var(--dim);
}
.impact-split--reverse .impact-split-content { border-left: none; border-right: 1px solid var(--dim); }

.impact-split-label {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-mono); margin-bottom: 20px;
}
/* Story title replaces old metric number */
.impact-split-story-title {
  font-size: clamp(22px,3vw,44px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
  color: var(--white); margin-bottom: 20px;
}
.impact-split-desc {
  font-size: clamp(14px,1.15vw,17px); line-height: 1.8;
  color: var(--offwhite); font-weight: 300; max-width: 420px;
}
.impact-split-bar {
  width: 0; height: 1.5px; background: var(--accent); margin-top: 32px;
  transition: width 1.1s var(--ease-expo);
}
.impact-split.in-view .impact-split-bar { width: 80%; }

/* Metrics summary grid */
.metrics-grid-bottom { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--dim); border-bottom: 1px solid var(--dim); }
.metrics-grid-cell { padding: clamp(32px,4vw,56px) clamp(20px,3vw,40px); border-right: 1px solid var(--dim); }
.metrics-grid-cell:last-child { border-right: none; }
.metrics-grid-cell-num { font-size: clamp(24px,3.5vw,48px); font-weight: 900; letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; }
.metrics-grid-cell-label { font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); line-height: 1.6; margin-bottom: 12px; }
.metrics-grid-cell-desc { font-size: clamp(11px,.9vw,13px); line-height: 1.65; color: var(--offwhite); font-weight: 300; }

/* =========================================================
   OPERATIONAL STORIES
   ========================================================= */
.operational-stories {
  padding: clamp(80px,12vw,140px) clamp(32px,6vw,100px);
  border-top: 1px solid var(--dim);
}
.stories-header { margin-bottom: clamp(56px,8vw,96px); }
.stories-headline {
  font-size: clamp(32px,5vw,64px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.0; max-width: 700px;
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--dim);
}
.story-card {
  background: var(--black);
  padding: clamp(36px,4vw,56px) clamp(28px,3vw,44px);
  display: flex; flex-direction: column; gap: 16px;
  transition: background 0.4s var(--ease-soft);
}
.story-card:hover { background: var(--mid); }
.story-metric {
  font-size: clamp(14px,1.4vw,20px); font-weight: 700;
  line-height: 1.2; letter-spacing: -.01em; color: var(--white);
}
.story-body {
  font-size: clamp(13px,1vw,15px); line-height: 1.75;
  color: var(--offwhite); font-weight: 300; flex: 1;
}

/* =========================================================
   CAPABILITIES PAGE
   ========================================================= */
/* =========================================================
   CAPABILITIES / MOTION PAGE — video-backed sections
   ========================================================= */

/* ── Hero header with video background ── */
.cap-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.cap-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cap-hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.65);
  transform: scale(1.03);
}
.cap-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,8,8,0.95) 0%,
    rgba(8,8,8,0.5)  50%,
    rgba(8,8,8,0.2)  100%
  );
  z-index: 1;
}
.cap-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(120px,15vw,190px) clamp(32px,6vw,100px) clamp(56px,7vw,80px);
  width: 100%;
}
.cap-hero-content h1 {
  font-size: clamp(56px,9vw,130px); font-weight: 900;
  letter-spacing: -.03em; line-height: .93; text-transform: uppercase;
  margin-top: 16px;
}

/* ── Individual capability sections with video background ── */
.cap-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(245,245,240,0.08);
}
.cap-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cap-section-bg video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.45) brightness(0.5);
  transform: scale(1.03);
  transition: transform 0.8s var(--ease-expo);
}
.cap-section:hover .cap-section-bg video {
  transform: scale(1.06);
  filter: saturate(0.55) brightness(0.6);
}
.cap-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8,8,8,0.88) 0%,
    rgba(8,8,8,0.72) 60%,
    rgba(8,8,8,0.55) 100%
  );
  z-index: 1;
}

/* Content sits above video */
.cap-section-content {
  position: relative;
  z-index: 2;
}

/* Override capability-row to remove plain bg hover (video does it now) */
.cap-section .capability-row {
  background: transparent !important;
  border-top: none;
  padding: clamp(56px,7vw,96px) clamp(32px,6vw,100px);
}

/* Keep text readable over dark video */
.cap-section .capability-index { color: rgba(245,245,240,0.4); }
.cap-section .capability-body  { color: rgba(245,245,240,0.85); }
.cap-section .capability-aside-bullets li { color: rgba(245,245,240,0.75); border-top-color: rgba(245,245,240,0.12); }

/* Legacy styles still used by other elements referencing these classes */
.capabilities-header {
  padding: clamp(120px,15vw,190px) clamp(32px,6vw,100px) clamp(56px,7vw,80px);
  border-bottom: 1px solid var(--dim);
}
.capabilities-header h1 {
  font-size: clamp(56px,9vw,130px); font-weight: 900;
  letter-spacing: -.03em; line-height: .93; text-transform: uppercase;
  margin-top: 16px;
}
.capabilities-sub {
  margin-top: 20px; font-size: clamp(20px,2.5vw,32px);
  color: var(--white); font-weight: 700; letter-spacing: -.01em;
}
.capabilities-tagline {
  margin-top: 20px; font-size: clamp(14px,1.2vw,18px);
  color: var(--offwhite); font-weight: 300; max-width: 560px; line-height: 1.75;
}

.capabilities-list { border-bottom: 1px solid var(--dim); }
.capability-row {
  display: grid;
  grid-template-columns: 80px 1fr 280px;
  gap: 0 clamp(32px,4vw,64px);
  padding: clamp(48px,6vw,80px) clamp(32px,6vw,100px);
  border-top: 1px solid var(--dim);
  align-items: start;
  transition: background 0.35s var(--ease-soft);
}
.capability-row:hover { background: var(--mid); }
.capability-index {
  font-size: 11px; letter-spacing: 0.2em; font-family: var(--font-mono);
  color: var(--muted); padding-top: 6px;
}
.capability-title {
  font-size: clamp(28px,4vw,54px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.0; text-transform: uppercase;
  margin-bottom: 20px;
}
.capability-body {
  font-size: clamp(14px,1.1vw,16px); line-height: 1.78;
  color: var(--white); font-weight: 400; font-style: italic;
  max-width: 480px; margin-bottom: 20px;
}
.capability-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.capability-bullets li {
  font-size: clamp(13px,1vw,15px); line-height: 1.7;
  color: var(--offwhite); font-weight: 300;
}
.capability-bullets li strong { color: var(--white); font-weight: 600; }
.capability-aside {
  display: flex; flex-direction: column; gap: 0; padding-top: 8px;
}
.capability-aside-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.capability-aside-bullets li {
  font-size: clamp(13px,1vw,15px); line-height: 1.7;
  color: var(--offwhite); font-weight: 300;
  padding-top: 14px; border-top: 1px solid var(--dim);
}
.capability-aside-bullets li:first-child { border-top: none; padding-top: 0; }
.capability-aside-bullets li strong { color: var(--white); font-weight: 600; }



/* Archive item description on hover */
.archive-item-desc {
  font-size: clamp(10px,.85vw,12px); line-height: 1.6;
  color: var(--offwhite); font-weight: 300; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================
   ENGAGE SECTION — minimalist, headline only
   ========================================================= */
#engage {
  padding: clamp(100px,14vw,180px) clamp(32px,6vw,100px) clamp(80px,10vw,120px);
  border-top: 1px solid var(--dim);
}
.contact-eyebrow { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--white); font-family: var(--font-mono); margin-bottom: 36px; }
.contact-headline { font-size: clamp(38px,7vw,98px); font-weight: 900; letter-spacing: -.025em; line-height: .95; text-transform: uppercase; max-width: 860px; }

/* =========================================================
   DEFAULT PAGE (prose)
   ========================================================= */
.page-prose { min-height: 100vh; padding: clamp(120px,15vw,180px) clamp(32px,6vw,100px) clamp(80px,10vw,120px); }
.page-prose-inner { max-width: 760px; }
.page-prose-eyebrow { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--white); font-family: var(--font-mono); margin-bottom: 24px; }
.page-prose-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); margin-bottom: 48px; }
.page-prose-meta::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.page-prose h1 { font-size: clamp(36px,5.5vw,72px); font-weight: 900; letter-spacing: -.03em; line-height: .95; text-transform: uppercase; margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--dim); }
.page-prose-content { font-size: clamp(15px,1.2vw,17px); line-height: 1.85; color: var(--offwhite); font-weight: 300; }
.page-prose-content h2 { font-size: clamp(20px,2.2vw,30px); font-weight: 700; letter-spacing: -.02em; color: var(--white); margin: 56px 0 20px; padding-top: 40px; border-top: 1px solid var(--dim); }
.page-prose-content h3 { font-size: clamp(15px,1.5vw,20px); font-weight: 600; color: var(--white); margin: 36px 0 14px; }
.page-prose-content p { margin-bottom: 24px; }
.page-prose-content p:last-child { margin-bottom: 0; }
.page-prose-content a { color: var(--white); border-bottom: 1px solid rgba(245,245,240,0.25); padding-bottom: 1px; transition: border-color .3s, color .3s; }
.page-prose-content a:hover { color: var(--white); border-color: var(--white); }
.page-prose-content ul, .page-prose-content ol { padding-left: 24px; margin-bottom: 24px; }
.page-prose-content li { margin-bottom: 10px; color: var(--offwhite); }
.page-prose-content strong { font-weight: 600; color: var(--white); }

/* =========================================================
   SITE FOOTER
   ========================================================= */
#site-footer { background: var(--charcoal); padding: 32px clamp(32px,6vw,100px); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--dim); }
.footer-logo { font-size: 12px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; }
.footer-copy { font-size: 10px; letter-spacing: .1em; color: var(--muted); font-family: var(--font-mono); }
.footer-links { list-style: none; display: flex; gap: 22px; }
.footer-links a { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); transition: color .3s; }
.footer-links a:hover { color: var(--white); }

/* =========================================================
   PAGE CURTAIN
   ========================================================= */
#page-curtain { position: fixed; inset: 0; background: var(--black); z-index: 10000; transform: scaleY(1); transform-origin: top; pointer-events: none; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .10s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal-delay-3 { transition-delay: .38s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  #site-nav { padding: 0 20px; }
  #menu-overlay { padding: clamp(80px,12vh,110px) 32px 48px; }
  .overlay-tagline { display: none; }
  .overlay-nav a { font-size: clamp(38px,10vw,68px); }
  .world-clocks { gap: 28px; }
  /* Impact split — stack vertically on mobile */
  .impact-split { grid-template-columns: 1fr; min-height: auto; }
  .impact-split--reverse { direction: ltr; }
  .impact-split-media { min-height: 50vw; }
  .impact-split-content { border-left: none !important; border-right: none !important; border-top: 1px solid var(--dim); }
  .metrics-grid-bottom { grid-template-columns: repeat(3,1fr); }
  .work-row,.work-row.asymmetric { grid-template-columns: 1fr; }
  #site-footer { flex-direction: column; gap: 20px; text-align: center; }
  .stories-grid { grid-template-columns: 1fr; gap: 0; }
  .capability-row { grid-template-columns: 1fr; gap: 24px; }
  .capability-aside { flex-direction: row; flex-wrap: wrap; }
}
@media(max-width:700px){
  .metrics-grid-bottom { grid-template-columns: repeat(2,1fr); }
  .metrics-grid-cell:nth-child(even) { border-right: none; }
  .stories-grid { grid-template-columns: 1fr; }
}
@media(max-width:480px){
  .metrics-grid-bottom { grid-template-columns: 1fr; }
  .metrics-grid-cell { border-right: none !important; }
}

/* =========================================================
   UTILITIES
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.no-scroll { overflow: hidden; }