:root {
  --bg: #05070b;
  --bg2: #080c13;
  --panel: #0b1017;
  --ink: #f4f1ea;
  --dim: #8d97a7;
  --dimmer: #5d6674;
  --line: rgba(244, 241, 234, 0.11);
  --brass: #c9a349;
  --brass-lt: #e8cf90;
  --red: #c8202e;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 350;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--brass); color: #10140c; }

/* Fixed atmosphere layers */
.veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}
.veil.vignette {
  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.veil.scan {
  opacity: 0.055;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.7) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: overlay;
}

/* Cinematic scroll wrapper */
#wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  z-index: 1;
}
body.no-lerp #wrap { position: static; transform: none !important; }
body.no-lerp #spacer { display: none; }

/* Progress rail */
.rail {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 70;
  background: rgba(255,255,255,0.05);
}
.rail i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brass), var(--brass-lt));
}

/* Navigation */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px var(--pad);
  transition: background 0.5s, backdrop-filter 0.5s, padding 0.4s;
}
.nav.solid {
  background: rgba(5,7,11,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: 11px;
  padding-bottom: 11px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand b { font-weight: 600; }
.brand span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.navlinks {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}
.navlinks a { transition: color 0.25s; position: relative; padding: 4px 0; }
.navlinks a:hover, .navlinks a.on { color: var(--ink); }
.navlinks a.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--brass);
}
.navcta {
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  white-space: nowrap;
}
.navcta:hover { background: var(--brass); border-color: var(--brass); color: #14180e; }
.burger { display: none; }

/* Layout primitives */
section { position: relative; }
.inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(84px, 11vh, 148px) var(--pad);
}
.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}
.kicker.plain { color: var(--dimmer); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; }
h2.big {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
h3.mid {
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.2;
}
.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  color: #cbd0d9;
  max-width: 62ch;
  margin: 22px 0 0;
}
p.body { color: var(--dim); max-width: 66ch; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.eyebrow-line {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.eyebrow-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Reveal animation */
.rv {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1s cubic-bezier(.16,.8,.3,1), transform 1.1s cubic-bezier(.16,.8,.3,1);
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 0.08s; }
.rv.d2 { transition-delay: 0.16s; }
.rv.d3 { transition-delay: 0.24s; }
.rv.d4 { transition-delay: 0.32s; }
.rv.d5 { transition-delay: 0.4s; }
.rv.blur { filter: blur(9px); }
.rv.blur.in { filter: blur(0); }
/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero .inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  padding-top: 150px;
  padding-bottom: 90px;
}
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 22% 40%, rgba(201,163,73,0.1), rgba(0,0,0,0) 70%),
              linear-gradient(180deg, rgba(5,7,11,0.2), rgba(5,7,11,0.9));
  pointer-events: none;
  z-index: 0;
}
.hero .inner > * { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(3rem, 8.4vw, 7.4rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 6px 0 0;
}
.hero h1 em {
  font-style: italic;
  color: var(--brass-lt);
}
.hero .sub {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  color: #d8d3c6;
  margin: 26px 0 0;
  max-width: 24ch;
  line-height: 1.35;
}
.hero .desc {
  color: var(--dim);
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 16px;
}
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  color: #15180f;
  background: var(--brass);
  transition: transform 0.3s cubic-bezier(.16,.8,.3,1), background 0.3s, color 0.3s;
}
.btn:hover { background: var(--brass-lt); transform: translateY(-2px); }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }
.btn i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel);
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(0.25) contrast(1.06);
}
.portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(5,7,11,0.75));
}
.portrait .cap {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lt);
}
.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dimmer);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scrollcue span { display: block; width: 1px; height: 42px; background: linear-gradient(var(--brass), rgba(0,0,0,0)); animation: cue 2.6s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Ticker band */
.band {
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  overflow: hidden;
  padding: 26px 0;
}
.ticker { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.tick {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 34px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.tick b {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--brass-lt);
  line-height: 1;
}
.tick u {
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.tick i { font-style: normal; font-size: 13px; color: var(--dim); max-width: 34ch; white-space: normal; line-height: 1.35; }

/* Profile */
.profile .inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 76px);
}
.profile .stack { display: flex; flex-direction: column; gap: 20px; }
.framed {
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background: var(--panel);
}
.framed img { width: 100%; filter: grayscale(0.15) contrast(1.04); }
.pull {
  border-left: 2px solid var(--brass);
  padding: 6px 0 6px 24px;
  margin: 34px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.42;
  color: #e4e0d5;
}
.pull small {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.deflist { margin: 34px 0 0; border-top: 1px solid var(--line); }
.deflist div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.deflist dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 3px 0 0;
}
.deflist dd { margin: 0; color: var(--dim); }
/* World map */
.world { background: linear-gradient(180deg, var(--bg), #060a11 40%, var(--bg)); border-top: 1px solid var(--line); }
.maphead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mapcount {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.9;
  color: var(--brass-lt);
}
.mapcount small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-top: 10px;
}
.mapctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 20px; align-items: center; }
.chip {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--dim);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s;
}
.chip:hover { color: var(--ink); border-color: rgba(244,241,234,0.3); }
.chip.on { background: var(--brass); border-color: var(--brass); color: #15180f; }
.searchwrap { margin-left: auto; position: relative; }
.searchwrap input {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 16px 10px 38px;
  width: 250px;
  outline: none;
  transition: border-color 0.25s;
}
.searchwrap input:focus { border-color: var(--brass); }
.searchwrap svg { position: absolute; left: 14px; top: 11px; opacity: 0.5; }
.mapgrid {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 26px;
  align-items: start;
}
.mapstage {
  position: relative;
  border: 1px solid var(--line);
  background: #060a10;
  overflow: hidden;
}
#mapCanvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.tip {
  position: absolute;
  pointer-events: none;
  background: rgba(5,7,11,0.92);
  border: 1px solid var(--brass);
  color: var(--ink);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border-radius: 4px;
  transform: translate(-50%, -140%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 5;
}
.tip.show { opacity: 1; }
.mapnote {
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
  pointer-events: none;
}
.tourbtn {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 5;
}
.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.panel .ph {
  height: 186px;
  background: #0a0e15 center / cover no-repeat;
  position: relative;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.panel .ph::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,11,0.1), rgba(11,16,23,0.95));
}
.panel .ph em {
  position: absolute;
  left: 18px; bottom: 12px;
  z-index: 2;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lt);
}
.panel .pb { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel .reg {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.panel h3 { font-size: 1.6rem; line-height: 1.12; }
.panel .firm {
  font-size: 14px;
  color: #d5d9e0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel .firm span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 5px;
}
.panel .note { font-size: 14.5px; color: var(--dim); margin: 0; }
.panel .hint { margin-top: auto; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dimmer); }
.panel.hot { border-color: rgba(201,163,73,0.45); }

/* Parallax */
.plx {
  position: relative;
  height: min(88vh, 760px);
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.plx .bg {
  position: absolute;
  left: 0; right: 0;
  top: -16%;
  height: 132%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  filter: grayscale(0.4) contrast(1.1) brightness(0.62);
}
.plx::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,11,0.92) 0%, rgba(5,7,11,0.55) 45%, rgba(5,7,11,0.2) 100%);
}
.plx .inner { position: relative; z-index: 2; width: 100%; }
.plx h2 { font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 22ch; }
.plx .lede { max-width: 52ch; }

/* Timeline */
.tl { position: relative; margin-top: 54px; }
.tl::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(rgba(201,163,73,0.5), var(--line));
}
.tlrow {
  position: relative;
  padding: 0 0 44px 46px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
}
.tlrow::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: var(--bg);
}
.tlrow::after {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0;
  transition: opacity 0.5s;
}
.tlrow.in::after { opacity: 1; }
.tlrow .yr {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 4px;
}
.tlrow h3 { font-size: 1.45rem; line-height: 1.15; }
.tlrow .role {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin: 8px 0 12px;
}
.tlrow p { margin: 0; color: var(--dim); font-size: 15px; max-width: 70ch; }
.tlrow .thumb {
  margin-top: 18px;
  height: 168px;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.4) contrast(1.06) brightness(0.8);
  position: relative;
}
.tlrow .thumb em {
  position: absolute;
  left: 14px; bottom: 10px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-lt);
}
/* Card grids */
.cards { display: grid; gap: 1px; background: var(--line); margin-top: 48px; border: 1px solid var(--line); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--bg);
  padding: 30px 26px 32px;
  transition: background 0.4s;
  position: relative;
}
.card:hover { background: #0a0f17; }
.card .num {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--brass);
  display: block;
  margin-bottom: 18px;
}
.card h4 { font-size: 1.2rem; line-height: 1.25; margin-bottom: 10px; }
.card p { margin: 0; color: var(--dim); font-size: 14.5px; }

/* Broadcast */
.cast { background: var(--bg2); border-top: 1px solid var(--line); }
.castgrid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 56px); margin-top: 46px; align-items: start; }
.vidframe {
  position: relative;
  border: 1px solid var(--line);
  background: #04060a;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.vidframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vidcap { margin-top: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmer); }
.offer { border: 1px solid var(--brass); padding: 28px 26px 30px; background: rgba(201,163,73,0.05); }
.offer h3 { font-size: 1.5rem; line-height: 1.16; }
.offer ul { list-style: none; padding: 0; margin: 20px 0 0; }
.offer li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: #cdd2da;
}
.offer li::before {
  content: "";
  position: absolute;
  left: 0; top: 19px;
  width: 7px; height: 1px;
  background: var(--brass);
}
.offer .close { margin: 20px 0 0; font-size: 13.5px; color: var(--dim); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 42px; }
.pill {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 15px;
  font-size: 12.5px;
  color: var(--dim);
  transition: all 0.3s;
}
.pill:hover { color: var(--ink); border-color: var(--brass); }
.pill b { color: var(--ink); font-weight: 500; }
.pill span { color: var(--dimmer); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 8px; }

/* Testimonials */
.voices { border-top: 1px solid var(--line); }
.tgrid { columns: 3; column-gap: 22px; margin-top: 48px; }
.quote {
  break-inside: avoid;
  border: 1px solid var(--line);
  background: var(--bg2);
  padding: 26px 24px 22px;
  margin-bottom: 22px;
  transition: border-color 0.35s, transform 0.5s cubic-bezier(.16,.8,.3,1);
}
.quote:hover { border-color: rgba(201,163,73,0.4); transform: translateY(-3px); }
.quote .mark {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.6;
  color: rgba(201,163,73,0.4);
  display: block;
  margin-bottom: 12px;
  height: 22px;
}
.quote p { margin: 0; font-size: 14.5px; color: #c8ccd4; }
.quote .who { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.av {
  width: 52px; height: 52px;
  border-radius: 50%;
  flex: none;
  background-repeat: no-repeat;
  background-color: #11161f;
  filter: grayscale(0.2) contrast(1.05);
}
.av.mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 17px;
  color: var(--brass);
  border: 1px solid rgba(201,163,73,0.35);
  background: rgba(201,163,73,0.07);
}
.quote .who b { display: block; font-weight: 500; font-size: 14.5px; }
.quote .who i { font-style: normal; display: block; font-size: 11.5px; color: var(--dimmer); letter-spacing: 0.04em; margin-top: 3px; }
.more { text-align: center; margin-top: 12px; }
.trunc { max-height: 190px; overflow: hidden; position: relative; }
.trunc::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(rgba(8,12,19,0), var(--bg2));
}
.qexp {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
}

/* Fire One */
.fire { background: var(--bg2); border-top: 1px solid var(--line); }
.firegrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.firelogo { width: 92px; margin-bottom: 24px; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 140px; gap: 10px; }
.mosaic div { background-size: cover; background-position: center; border: 1px solid var(--line); filter: grayscale(0.15) contrast(1.05); }
.mosaic div:first-child { grid-column: span 2; }
.facts { margin-top: 34px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts > div { background: var(--bg2); padding: 18px 20px; }
.facts b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; }
.facts span { font-size: 14px; color: var(--dim); }
.smallnote { font-size: 11.5px; letter-spacing: 0.1em; color: var(--dimmer); margin-top: 22px; }

/* Trail */
.trail { border-top: 1px solid var(--line); }
.trailgrid { display: grid; grid-template-columns: 0.55fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.trailpics { display: grid; gap: 10px; }
.trailpics div { height: 210px; background-size: cover; background-position: center; border: 1px solid var(--line); filter: grayscale(0.2); }
.tiny { list-style: none; padding: 0; margin: 26px 0 0; }
.tiny li {
  padding: 11px 0 11px 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--dim);
  position: relative;
}
.tiny li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 1px; background: var(--brass); }

/* Contact */
.contact { background: linear-gradient(180deg, var(--bg2), #04060a); border-top: 1px solid var(--line); }
.cgrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.cbig {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 26px;
}
.crow { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 15px; }
.crow span { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); padding-top: 4px; }
.crow a:hover { color: var(--brass-lt); }
.links { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.links a { background: var(--bg2); padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
.links a:hover { background: #0d131c; }
.links a b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.links a em { font-style: normal; font-size: 12px; color: var(--dimmer); display: block; margin-top: 3px; }
.links a i { font-style: normal; color: var(--brass); font-size: 18px; }

footer { border-top: 1px solid var(--line); background: #04060a; }
footer .inner { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dimmer); letter-spacing: 0.06em; }
/* Responsive */
@media (max-width: 1180px) {
  .mapgrid { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
  .tgrid { columns: 2; }
}
@media (max-width: 980px) {
  .navlinks { display: none; }
  .burger {
    display: flex;
    margin-left: auto;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    cursor: pointer;
  }
  .burger span { display: block; width: 16px; height: 1px; background: var(--ink); position: relative; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--ink); }
  .burger span::before { top: -5px; }
  .burger span::after { top: 5px; }
  .sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(5,7,11,0.97);
    backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 40px var(--pad);
  }
  .sheet.open { display: flex; }
  .sheet a {
    font-family: var(--display);
    font-size: 1.9rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .sheet .x { position: absolute; top: 22px; right: var(--pad); font-size: 26px; color: var(--dim); background: none; border: 0; cursor: pointer; }
  .hero .inner { grid-template-columns: 1fr; padding-top: 128px; }
  .portrait { max-width: 420px; }
  .profile .inner, .castgrid, .firegrid, .trailgrid, .cgrid { grid-template-columns: 1fr; }
  .cards.c3 { grid-template-columns: repeat(2, 1fr); }
  .deflist div { grid-template-columns: 1fr; gap: 4px; }
  .searchwrap { margin-left: 0; width: 100%; }
  .searchwrap input { width: 100%; }
  .tlrow { grid-template-columns: 1fr; gap: 8px; padding-left: 36px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .tgrid { columns: 1; }
  .cards.c3, .cards.c2 { grid-template-columns: 1fr; }
  .mosaic { grid-template-rows: 160px 110px; }
  .plx { height: 76vh; }
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; filter: none; }
  .ticker { animation: none; }
  .scrollcue span { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Mobile sheet stays hidden on wide screens */
.sheet { display: none; }
/* Fill the trailing cell when a three column grid holds five cards */
.cards.c3 > .card:nth-child(5):last-child { grid-column: span 2; }
/* Wide documentary shot inside the broadcast section */
.wideshot {
  position: relative;
  margin: 64px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.wideshot img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 26%;
  filter: saturate(0.9) contrast(1.04) brightness(0.92);
  transform: scale(1.01);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.2s;
}
.wideshot:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.02) brightness(1); }
.wideshot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 7, 11, 0.88) 0%, rgba(5, 7, 11, 0.1) 46%, rgba(5, 7, 11, 0.34) 100%);
}
.wideshot figcaption {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.wideshot figcaption b { color: var(--brass-lt); font-weight: 500; }

@media (max-width: 980px) {
  .wideshot img { height: 300px; }
  .cards.c3 > .card:nth-child(5):last-child { grid-column: auto; }
}

/* ==================================================================
   Centropy brand. August 2026.

   The palette and type move from the original near black ground to the
   Centropy Group identity: white, cherry red, deep navy, Poppins for
   display and Source Sans for text. This block overrides the sheet
   above rather than editing it, so the original dark treatment stays
   readable in one place if it is ever wanted again.
   ================================================================== */

:root {
  --bg: #ffffff;
  --bg2: #f6f7f8;
  --panel: #ffffff;
  --ink: #14181f;
  --dim: #5c6472;
  --dimmer: #8d94a1;
  --line: rgba(18, 24, 33, 0.14);
  --brass: #c2002d;
  --brass-lt: #8c0020;
  --red: #c2002d;
  --red-dk: #8c0020;
  --navy: #010847;
  --display: "Poppins", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html, body { background: var(--bg); color: var(--ink); }
::selection { background: rgba(194, 0, 45, 0.16); color: #14181f; }

/* the film grain and vignette were there to hold up a black page */
.veil.vignette, .veil.scan { display: none; }

.rail { background: var(--line); }
.rail i { background: var(--red); }

h1, h2, h3, h4, .big, .display { letter-spacing: -0.025em; }
.kicker { color: var(--red); }
.lede { color: var(--dim); }
.eyebrow-line { color: var(--dimmer); border-color: var(--line); }
.pull { color: var(--navy); border-color: var(--red); background: var(--bg2); }

header.nav {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand b { color: var(--ink); }
.brand span { color: var(--red); }
.navlinks a { color: var(--dim); }
.navlinks a:hover, .navlinks a.on { color: var(--red); }
.navcta { background: var(--red); border-color: var(--red); color: #ffffff; }
.navcta:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.burger span, .burger span::before, .burger span::after { background: var(--ink); }
.sheet { background: rgba(255, 255, 255, 0.97); }
.sheet a { color: var(--ink); border-color: var(--line); }
.sheet .x { color: var(--ink); }

.btn {
  background: var(--red);
  border: 1px solid var(--red);
  color: #ffffff;
  box-shadow: 0 14px 30px -18px rgba(194, 0, 45, 0.7);
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { border-color: var(--red); color: var(--red); background: transparent; }
.btn.light { background: #ffffff; border-color: #ffffff; color: var(--red); box-shadow: none; }
.btn.light:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.btn.ghost.light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #ffffff; }
.btn.ghost.light:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.1); color: #ffffff; }

/* ---------------------------------------------------------- the hero */

.hero { background: var(--bg); }
.hero::after { background: none; content: none; }
.hero .sub { color: var(--navy); }
.hero .desc { color: var(--dim); }

/* the dot world behind the name, recolored to the brand red */
#heroCanvas {
  opacity: 0.5;
  filter: grayscale(1) brightness(0.62) sepia(1) saturate(8) hue-rotate(-30deg);
}

.scrollcue { color: var(--dimmer); }
.scrollcue span { background: linear-gradient(to bottom, rgba(194, 0, 45, 0), var(--red)); }

/* portrait: the studio sweep is knocked out in brand.js, so he stands
   on a shaped ground instead of inside a white rectangle */
.portrait.staged {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.portrait.staged::before, .portrait.staged::after { content: none; display: none; }
.portrait.staged img {
  position: relative;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 99%);
          mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 99%);
}
.portrait.blend img { mix-blend-mode: multiply; }
.pshapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pdisc {
  position: absolute;
  left: 11%;
  top: 13%;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: linear-gradient(155deg, var(--red) 0%, var(--red) 45%, var(--red-dk) 100%);
}
.pring {
  position: absolute;
  left: 3%;
  top: 24%;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid rgba(1, 8, 71, 0.22);
}
.pblock {
  position: absolute;
  right: 2%;
  bottom: 12%;
  width: 26%;
  height: 3px;
  background: var(--navy);
}
.portrait .cap { position: relative; z-index: 3; color: var(--dimmer); }

/* -------------------------------------------------- surfaces and cards */

.band { background: var(--navy); border-color: transparent; }
.band, .ticker, .ticker * { color: rgba(255, 255, 255, 0.9); }
.ticker b, .ticker strong { color: #ffffff; }
.ticker i, .ticker em { color: rgba(244, 185, 198, 0.95); }

.profile, .cast, .voices, #journey, #work { background: var(--bg); }
.cards { background: var(--line); }
.card { background: var(--panel); }
.card:hover { background: #fbfbfc; }
.card .num { color: var(--red); }
.card h4 { color: var(--ink); }
.card p { color: var(--dim); }

.cards.quad { grid-template-columns: repeat(2, 1fr); }
.cards.quad .card { padding: clamp(26px, 3vw, 44px); }
.cards.quad .card h4 { font-size: clamp(19px, 1.9vw, 24px); }

figure, .shot, .thumb, .wideshot { border-color: var(--line); }
.vidframe { background: var(--navy); border-color: var(--navy); }
.deflist dt { color: var(--dimmer); }
.deflist dd { color: var(--ink); }
.deflist { border-color: var(--line); }
.pill, .guest { border-color: var(--line); color: var(--dim); background: #ffffff; }
.pill:hover, .guest:hover { border-color: var(--red); color: var(--red); }

.vcard, .voice { background: var(--panel); border-color: var(--line); }
.vcard p, .voice p { color: var(--dim); }
.mono, .initials { background: var(--bg2); color: var(--red); border-color: var(--line); }
.more, .readrest { color: var(--red); }

.fire, .trail { background: var(--bg2); }
.contact { background: var(--bg2); color: var(--ink); }
.contact a { color: var(--ink); }
.contact a:hover { color: var(--red); }
footer { background: var(--bg); border-top: 1px solid var(--line); color: var(--dimmer); }

/* the legacy dot map section is kept in the document but not rendered */
#world-legacy { display: none !important; }

/* -------------------------------------------------------- the timeline */

.tlhead { display: flex; gap: clamp(14px, 1.6vw, 22px); align-items: flex-start; margin-bottom: 14px; }
.tllogo {
  flex: none;
  display: block;
  width: 124px;
  height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  transition: border-color 0.25s ease, transform 0.35s ease;
}
.tlrow:hover .tllogo { border-color: rgba(194, 0, 45, 0.42); transform: translateY(-2px); }
.tlword {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  min-height: 68px;
  padding: 10px 9px;
  text-align: center;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  background: #ffffff;
  color: var(--navy);
  font: 700 9.5px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tlbody h3 { margin: 0 0 4px; }
.tlplace {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-top: 8px;
}
.tlpts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.tlpts li {
  position: relative;
  padding-left: 22px;
  font: 400 14.5px/1.55 var(--sans);
  color: var(--dim);
}
.tlpts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 9px;
  height: 1px;
  background: var(--red);
}
.tlrow .thumb, .tlrow figure { display: none; }

/* --------------------------------------------------- engagements band */

.engage {
  background: var(--red);
  color: #ffffff;
  padding-top: clamp(72px, 9vw, 132px);
  padding-bottom: clamp(72px, 9vw, 132px);
}
.engage .kicker { color: rgba(255, 255, 255, 0.6); }
.engage h2, .engage .big { color: #ffffff; }
.engage .lede { color: rgba(255, 255, 255, 0.84); }
.svclist {
  list-style: none;
  margin: clamp(34px, 4vw, 58px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}
.svcrow {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 30px) 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.svcrow:hover { background: rgba(255, 255, 255, 0.07); padding-left: 14px; }
.svcn {
  font: 600 12px/1.7 var(--sans);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.58);
}
.svcrow h4 {
  margin: 0 0 7px;
  font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--display);
  letter-spacing: -0.02em;
  color: #ffffff;
}
.svcrow p {
  margin: 0;
  font: 400 15px/1.62 var(--sans);
  color: rgba(255, 255, 255, 0.82);
  max-width: 64ch;
}
.svcfoot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 50px); }

/* ------------------------------------------------------------- globe */

.world.globe {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 46%, #ffffff 100%);
  padding-top: clamp(74px, 9vw, 140px);
  padding-bottom: clamp(66px, 8vw, 120px);
}
.ghead {
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.gbig { text-align: right; }
.gbig b {
  display: block;
  font: 600 clamp(58px, 7.4vw, 112px)/0.88 var(--display);
  letter-spacing: -0.045em;
  color: var(--red);
}
.gbig span {
  display: block;
  margin-top: 8px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}
.gbig i {
  display: block;
  margin: 12px 0 0 auto;
  max-width: 24ch;
  font: 400 12.5px/1.5 var(--sans);
  font-style: normal;
  color: var(--dimmer);
}

.gbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 54px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.gchips { display: flex; gap: 8px; flex-wrap: wrap; }
.gchip {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--dim);
  cursor: pointer;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.22s ease;
}
.gchip:hover { border-color: var(--red); color: var(--red); }
.gchip.on { background: var(--red); border-color: var(--red); color: #ffffff; }
.gfind { display: flex; align-items: center; gap: 12px; }
.gfind input {
  width: clamp(210px, 26vw, 330px);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: 400 14px/1 var(--sans);
  -webkit-appearance: none;
  appearance: none;
}
.gfind input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(194, 0, 45, 0.1);
}
.gfindn {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.gwrap {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
  margin-top: clamp(26px, 3.6vw, 46px);
}
.gstage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gstage::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 3%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 24, 32, 0.15), rgba(20, 24, 32, 0) 70%);
}
#gcv { position: relative; z-index: 1; touch-action: none; cursor: grab; }
#gcv.grabbing { cursor: grabbing; }
.gtip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -142%);
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--navy);
  color: #ffffff;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(1, 8, 71, 0.5);
}
.gtip b { display: block; font: 600 12.5px/1.25 var(--sans); }
.gtip span { display: block; font: 400 11px/1.35 var(--sans); color: rgba(255, 255, 255, 0.75); }
.gtip i { display: block; margin-top: 2px; font: 400 11px/1.35 var(--sans); font-style: normal; color: #f2adbc; }
.gctl { position: absolute; left: 0; bottom: 0; z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; }
.gbtn {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.gbtn:hover { border-color: var(--red); color: var(--red); }
.ghint {
  position: absolute;
  right: 0;
  bottom: 6px;
  z-index: 4;
  margin: 0;
  max-width: 17ch;
  text-align: right;
  font: 400 11.5px/1.45 var(--sans);
  color: var(--dimmer);
}

.gpanel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  min-height: 430px;
  box-shadow: 0 26px 54px -34px rgba(18, 24, 33, 0.34);
}
.gempty { padding: 46px 30px; text-align: center; color: var(--dimmer); }
.gempty p { margin: 0; font: 400 14px/1.6 var(--sans); max-width: 30ch; margin-inline: auto; }
.gemptyi {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px dashed var(--line);
}
.gcard { padding: clamp(20px, 2.2vw, 28px); }
.gcardtop { display: flex; gap: 16px; align-items: flex-start; }
.gflag {
  flex: none;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1f2f4;
  border: 1px solid var(--line);
}
.gflag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gflag.big { width: 58px; height: 58px; }
.gflag.none {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--sans);
  color: var(--dim);
}
.gcardtop h3 {
  margin: 0;
  font: 600 clamp(22px, 2.4vw, 31px)/1.08 var(--display);
  letter-spacing: -0.028em;
  color: var(--ink);
}
.gsub { margin-top: 4px; font: 400 13px/1.35 var(--sans); color: var(--dim); }
.greg {
  margin-top: 9px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.gdl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 20px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.gdl dt {
  font: 600 9.5px/1.7 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.gdl dd { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink); }
.gstory { margin: 18px 0 0; font: 400 14px/1.62 var(--sans); color: var(--dim); }
.gstory.quiet { color: var(--dimmer); font-style: italic; }
.gphoto {
  position: relative;
  margin: 20px 0 0;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.gphoto.on { opacity: 1; }
.gphoto img { display: block; width: 100%; height: 200px; object-fit: cover; }
.gphoto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 11px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(to top, rgba(1, 8, 71, 0.8), rgba(1, 8, 71, 0));
}

.gflagwrap {
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.gflaghead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.gflaghead em { font-style: normal; color: var(--red); }
.gflags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
  max-height: 258px;
  overflow-y: auto;
  padding: 4px 4px 12px;
  scrollbar-width: thin;
}
.gflagbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 11px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  transition: all 0.18s ease;
}
.gflagbtn:hover { border-color: var(--line); background: #fafbfc; }
.gflagbtn.on { border-color: var(--red); background: rgba(194, 0, 45, 0.05); }
.gflagbtn em {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 11ch;
  text-align: center;
  font: 500 10px/1.28 var(--sans);
  font-style: normal;
  color: var(--dim);
}
.gflagbtn.on em { color: var(--red); font-weight: 700; }
.gflagbtn[hidden] { display: none; }

/* ------------------------------------------------------- narrow views */

@media (max-width: 1080px) {
  .ghead { grid-template-columns: 1fr; align-items: start; }
  .gbig { text-align: left; }
  .gbig i { margin-left: 0; }
  .gwrap { grid-template-columns: 1fr; }
  .gstage { max-height: none; max-width: 560px; margin-inline: auto; width: 100%; }
  .gpanel { min-height: 0; }
}

@media (max-width: 820px) {
  .cards.quad { grid-template-columns: 1fr; }
  .tlhead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .svcrow { grid-template-columns: 1fr; gap: 4px; }
  .svcn { letter-spacing: 0.2em; }
}

@media (max-width: 640px) {
  .gbar { gap: 14px; }
  .gfind, .gfind input { width: 100%; }
  .gchip { padding: 9px 12px; letter-spacing: 0.12em; }
  .gctl { position: static; margin-top: 14px; justify-content: center; }
  .ghint { position: static; text-align: center; max-width: none; margin: 10px auto 0; }
  .gstage { aspect-ratio: auto; }
  .gflags { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); max-height: 230px; }
  .tllogo, .tlword { width: 104px; }
  .pdisc { left: 14%; width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .svcrow, .tllogo, .gchip, .gbtn, .gflagbtn { transition: none; }
}


/* ---------------------------------------------- brand corrections pass */

/* the sticky header picks up a .solid class on scroll, which carried the
   old near black ground */
header.nav.solid {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
}

/* the timeline paragraph was narrower than the bullet list under it */
.tlbody > p { max-width: 66ch; }

/* engagements read better as title and description side by side */
@media (min-width: 900px) {
  .svcrow > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 52px);
    align-items: baseline;
  }
  .svcrow h4 { margin: 0; }
  .svcrow p { max-width: none; }
}

/* the flag grid scrolls, so say so at the edge */
.gflagwrap { position: relative; }
.gflagwrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(to top, #ffffff 8%, rgba(255, 255, 255, 0));
}
.gflags::-webkit-scrollbar { width: 8px; }
.gflags::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* the ring reads as a separate shape rather than a line across the disc */
.pring {
  left: -2%;
  top: 30%;
  width: 62%;
  border-color: rgba(1, 8, 71, 0.16);
}
.portrait .cap {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  padding-left: 16px;
  background: none;
  color: var(--dim);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.portrait.staged .cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}


/* the globe is the centerpiece of the page, so give it more room */
@media (min-width: 1081px) {
  .gwrap { grid-template-columns: 1.3fr 0.7fr; }
  .gstage { max-height: 78vh; }
  .gpanel { min-height: 470px; }
}

/* ==================================================================
   Legibility and profile pass. August 2026.
   Darker greys on white, light type wherever copy sits on top of a
   photograph, logos floating without a box, and the journey laid out
   the way a professional profile page reads.
   ================================================================== */

:root {
  --dim: #4a5260;
  --dimmer: #626b7a;
}

/* Grey copy on a white ground was far too light to read. */
.quote p,
.vcard p,
.voice p,
.offer li,
.tlrow p,
.tlpts li,
.rzrole p { color: #3f4654; }

.quote .mark { color: rgba(194, 0, 45, 0.45); }
.quote .who i { color: var(--dimmer); }
.offer .close { color: var(--dim); }
.tlplace,
.vidcap,
.eyebrow-line,
.smallnote,
.ghint,
.gsub { color: var(--dimmer); }

/* Cherry red on navy inside the numbers band could not be read. */
.band .tick u { color: rgba(255, 255, 255, 0.74); }

/* The parallax band sits on a photograph, so the type goes light and
   the scrim carries the brand navy instead of near black. */
.plx::after {
  background: linear-gradient(90deg, rgba(1, 8, 71, 0.94) 0%, rgba(1, 8, 71, 0.7) 45%, rgba(1, 8, 71, 0.32) 100%);
}
.plx .bg { filter: grayscale(0.35) contrast(1.06) brightness(0.5); }
.plx .kicker { color: #f4b9c6; }
.plx h2 { color: #ffffff; text-shadow: 0 2px 30px rgba(1, 8, 71, 0.65); }
.plx .lede { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 20px rgba(1, 8, 71, 0.7); }

/* Same treatment for the wide documentary photograph caption. */
.wideshot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(1, 8, 71, 0.88), rgba(1, 8, 71, 0));
}
.wideshot figcaption { color: rgba(255, 255, 255, 0.88); }
.wideshot figcaption b { color: #ffffff; }

/* Logos float on the page rather than sitting inside a white tile. */
.tllogo {
  width: 132px;
  height: 74px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  mix-blend-mode: multiply;
}
.tlword {
  width: 132px;
  min-height: 74px;
  border-radius: 0;
  background: transparent;
}
.rzgroup:hover .tllogo { transform: translateY(-2px); }

/* ------------------------------------------------------------------
   Journey laid out as a profile page. One block per organization,
   roles nested underneath, most recent organization first.
   ------------------------------------------------------------------ */
.rz { position: relative; margin-top: 46px; }
.rz::before { content: none; }

.rzgroup { padding: 36px 0 34px; border-top: 1px solid var(--line); }
.rzgroup:first-child { border-top: 0; padding-top: 6px; }

.rzhead {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(16px, 2vw, 30px);
  align-items: center;
}
.rzident h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.32rem, 2.1vw, 1.72rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.rzspan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 11px;
  margin-top: 8px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.rzten { color: var(--dimmer); padding-left: 11px; border-left: 1px solid var(--line); }
.rzcount {
  margin-top: 9px;
  font: 400 12.5px/1 var(--sans);
  color: var(--dimmer);
}

.rzroles {
  list-style: none;
  margin: 22px 0 0 calc(132px + clamp(16px, 2vw, 30px));
  padding: 0;
  display: grid;
  gap: 28px;
}
.rzgroup.multi .rzroles { padding-left: 28px; border-left: 1px solid var(--line); }
.rzrole { position: relative; }
.rzgroup.multi .rzrole::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}
.rzrole h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.26;
  color: var(--ink);
}
.rzdate {
  margin-top: 6px;
  font: 600 10.5px/1.4 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.rzwhere { margin-top: 4px; font: 400 12.5px/1.4 var(--sans); color: var(--dimmer); }
.rzrole p { margin: 14px 0 0; max-width: 74ch; font-size: 15px; line-height: 1.62; }
.rzrole .tlpts { margin-top: 15px; }

.rzsect {
  margin: 6px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
}
.rzgroup.edu { border-top: 0; padding-top: 24px; }

@media (max-width: 760px) {
  .rzhead { grid-template-columns: 1fr; gap: 14px; }
  .rzroles { margin-left: 0; }
  .rzgroup.multi .rzroles { padding-left: 22px; }
  .rzgroup.multi .rzrole::before { left: -27px; }
}

/* The base rule for this overlay uses inset zero, so the top edge has
   to be released or the scrim lands at the top of the photograph
   instead of behind the caption at the bottom. */
.wideshot::after { inset: auto 0 0 0; height: 62%; }

/* Organizations with a single role carry the job title in the header,
   the way a profile page does, so nothing repeats underneath. */
.rzrole1 {
  margin-top: 7px;
  font: 400 15.5px/1.35 var(--sans);
  color: var(--ink);
}
.rzgroup:not(.multi) .rzroles { margin-top: 16px; }
.rzgroup:not(.multi) .rzwhere { margin-top: 0; }

/* The wordmarks for the four brands with no surviving logo are set as
   type on a red rule, with no box around them. */
.tlword {
  border: 0;
  border-left: 3px solid var(--red);
}


/* ==================================================================
   Selected work reel, the video lightbox, and the quote filter.
   August 2026.
================================================================== */

.reelhead { max-width: 820px; }
.reelhead h3 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.reelhead .lede { margin-top: 14px; }

.reel {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 1080px) { .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .reel { grid-template-columns: minmax(0, 1fr); } }

.reelcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.35s, transform 0.5s cubic-bezier(.16,.8,.3,1), box-shadow 0.35s;
}
.reelcard:hover {
  border-color: rgba(194, 0, 45, 0.42);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(1, 8, 71, 0.10);
}

.reelshot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--navy);
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
}
.reelart {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  filter: saturate(0.94);
  transition: transform 0.7s cubic-bezier(.16,.8,.3,1), filter 0.5s;
}
.reelart.sq { background-size: contain; background-color: var(--navy); }
.reelcard:hover .reelart { transform: scale(1.045); filter: saturate(1.06); }

.reelart.word {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 26px;
  background: var(--bg2);
  border-left: 3px solid var(--red);
}
.reelart.word b {
  font-family: var(--display);
  font-size: clamp(1.02rem, 2vw, 1.38rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 74%;
}

.reelplay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 26px rgba(1, 8, 71, 0.34);
  transition: transform 0.4s cubic-bezier(.16,.8,.3,1);
}
.reelplay::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 20px;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #ffffff;
}
.reelcard:hover .reelplay { transform: scale(1.1); }
.reelart.word + .reelplay { left: auto; right: 22px; margin-left: 0; background: var(--navy); }

.reelbody {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.reelkind {
  margin: 0;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.reelbody h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.reelorg { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--dimmer); }
.reelc { margin: 4px 0 0; font-size: 14px; line-height: 1.56; color: var(--dim); }
.reeleps { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.reelep {
  position: relative;
  padding-left: 17px;
  font: 600 12.5px/1.45 var(--sans);
  color: var(--red);
  text-decoration: none;
}
.reelep::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.reelep:hover { text-decoration: underline; }

.lbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 58px);
  background: rgba(1, 8, 71, 0.90);
}
.lbox.on { display: flex; }
.lbframe {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 16 / 9;
  background: #000000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lbframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lbclose {
  position: absolute;
  top: clamp(12px, 3vw, 26px);
  right: clamp(12px, 3vw, 26px);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font: 400 22px/1 var(--sans);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.lbclose:hover { background: var(--red); border-color: var(--red); }

.tfilter { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.tchip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.03em;
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.tchip:hover { color: var(--ink); border-color: rgba(194, 0, 45, 0.45); }
.tchip.on { background: var(--red); border-color: var(--red); color: #ffffff; }
.quote.hidden { display: none; }
.qcat {
  display: block;
  margin-top: 6px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   How a channel gets built. The four production stages.
   August 2026.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.buildhead { max-width: 820px; }
.buildhead h3 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.buildhead .lede { margin-top: 14px; }

.build {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 860px) { .build { grid-template-columns: minmax(0, 1fr); } }

.buildcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  padding: 30px 30px 26px 32px;
  overflow: hidden;
}
.buildcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.75s cubic-bezier(.16,.8,.3,1) 0.15s;
}
.buildcard.in::before { transform: scaleY(1); }

.buildnum {
  display: block;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--red);
}
.buildcard h4 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.buildcard p {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--dim);
}
.buildcard ul {
  margin: 20px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.buildcard li {
  position: relative;
  padding-left: 20px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--dim);
}
.buildcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--red);
}

.buildnote {
  margin: 30px 0 0;
  max-width: 780px;
  padding-left: 18px;
  border-left: 3px solid var(--line);
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--dim);
}