@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-navy: #1B2A4A;
  --c-navy-deep: #16223C;
  --c-gold: #B8965A;
  --c-bg: #FFFFFF;
  --c-text: #1B2A4A;
  --c-text-muted: #55607A;
  --c-rule: #E1E5EC;
  --c-rule-dark: #33405E;

  --nav-h: 112px;
  --wrap: 1180px;
  --pad-x: clamp(1.5rem, 5vw, 4.5rem);
  --section-y: clamp(6rem, 13vh, 10.5rem);

  /* Scroll distance each pinned chapter owns. The inner pins for
     (--chapter-h - 100vh) of scroll, which is the window the fade curve runs
     across. */
  --chapter-h: 160vh;

  --panel-bg: rgba(255, 255, 255, 0.955);

  --font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
          Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

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

main, .footer { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
}
.skip-link:focus { left: 0; }

/* ---------- Fixed backdrop ---------------------------------------------- */

.backdrop { display: none; }

body[data-hero-mode="scrub"] .backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--c-navy);
}

.backdrop__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.backdrop__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(27, 42, 74, 0.72) 0%,
      rgba(27, 42, 74, 0.46) 45%,
      rgba(27, 42, 74, 0.24) 80%
    ),
    linear-gradient(
      180deg,
      rgba(27, 42, 74, 0.34) 0%,
      rgba(27, 42, 74, 0.28) 45%,
      rgba(27, 42, 74, 0.52) 100%
    );
}

/* ---------- Navigation --------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-rule);
}

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad-x);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__brand { display: block; line-height: 0; }
.nav__brand img { width: 186px; height: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav__links a { text-decoration: none; color: var(--c-text); }
.nav__links a:hover { color: var(--c-gold); }

/* ---------- Chapters -----------------------------------------------------
   In scrub mode each chapter reserves a slice of scroll and pins its content
   for the whole slice. Because every chapter's content is pinned inside its
   own slice and faded to zero before the slice ends, two chapters are never
   legible at once. */

.chapter { position: relative; scroll-margin-top: var(--nav-h); }

.chapter__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

body[data-hero-mode="scrub"] .chapter { height: var(--chapter-h); }

body[data-hero-mode="scrub"] .chapter__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: var(--nav-h);
  display: flex;
  align-items: center;
}

/* Faded-out chapters are still in the layout and overlap their neighbours
   while pinned, so they must not intercept the pointer. JS re-enables this on
   whichever chapter is currently legible. */
body[data-hero-mode="scrub"] .chapter__content {
  width: 100%;
  will-change: opacity, transform;
  pointer-events: none;
}

/* ---------- Hero chapter ------------------------------------------------- */

.hero__video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim { display: none; }

body[data-hero-mode="scrub"] .chapter--hero .hero__video,
body[data-hero-mode="scrub"] .chapter--hero .hero__scrim { display: none; }

.hero__content { max-width: 46rem; color: #fff; }

.hero__title {
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.hero__rule {
  display: block;
  width: 76px;
  height: 2px;
  background: var(--c-gold);
  margin: clamp(1.75rem, 3.5vh, 2.5rem) 0;
}

.hero__tagline {
  font-size: clamp(1.0625rem, 1.65vw, 1.375rem);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  max-width: 34rem;
}

/* ---------- Panels -------------------------------------------------------
   Opaque enough to read against a busy image. Deliberately no backdrop-filter:
   blurring the skyline through the panel would read as frosted glass. */

body[data-hero-mode="scrub"] .panel {
  background: var(--panel-bg);
  padding: clamp(2.5rem, 5vh, 3.75rem) clamp(2rem, 4vw, 3.5rem);
}

/* Pinned content has only the viewport to work with, so vertical rhythm is
   tightened here. Without this the Why Work With Us panel overruns the pinned
   area and its last row is clipped. */
body[data-hero-mode="scrub"] .eyebrow { margin-bottom: clamp(1.25rem, 2.5vh, 2rem); }
body[data-hero-mode="scrub"] .section__title { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }
body[data-hero-mode="scrub"] .values__item { padding-block: clamp(1.125rem, 2.2vh, 1.75rem); }
body[data-hero-mode="scrub"] .lead { margin-bottom: 1.5rem; }

/* ---------- Shared type -------------------------------------------------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: clamp(2.25rem, 5vh, 3.5rem);
}

.section__title {
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.018em;
  max-width: 24ch;
  margin-bottom: clamp(3rem, 6vh, 4.5rem);
}

.prose { max-width: 40rem; }

.lead {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.48;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 2rem;
}

.prose p + p { color: var(--c-text-muted); }

.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 7vw, 6rem);
}

.values__item {
  border-top: 1px solid var(--c-rule);
  padding-block: clamp(2rem, 4vh, 2.75rem);
}

.values__index {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--c-gold);
  margin-bottom: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.values__name {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin-bottom: 0.625rem;
}

.values__body {
  color: var(--c-text-muted);
  max-width: 34rem;
}

/* ---------- Static mode --------------------------------------------------
   Small screens, reduced motion, and Save-Data. Chapters collapse back into
   ordinary stacked sections on a plain white page: nothing pins, nothing
   fades, and there is no fixed backdrop to jank. */

body[data-hero-mode="static"] .chapter { height: auto; }

body[data-hero-mode="static"] .chapter__inner {
  position: static;
  height: auto;
  display: block;
  padding-top: 0;
}

body[data-hero-mode="static"] .chapter:not(.chapter--hero) {
  padding-block: var(--section-y);
}

body[data-hero-mode="static"] .chapter:not(.chapter--hero)
  + .chapter:not(.chapter--hero) {
  border-top: 1px solid var(--c-rule);
}

body[data-hero-mode="static"] .chapter--hero {
  height: 100vh;
  overflow: hidden;
  background: var(--c-navy);
}

body[data-hero-mode="static"] .chapter--hero .chapter__inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
}

body[data-hero-mode="static"] .chapter--hero .hero__video { display: block; }

body[data-hero-mode="static"] .chapter--hero .hero__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(27, 42, 74, 0.74) 0%,
      rgba(27, 42, 74, 0.44) 42%,
      rgba(27, 42, 74, 0.10) 78%
    ),
    linear-gradient(
      180deg,
      rgba(27, 42, 74, 0.42) 0%,
      rgba(27, 42, 74, 0.22) 42%,
      rgba(27, 42, 74, 0.72) 100%
    );
}

/* ---------- Contact, the landing ---------------------------------------- */

.section { scroll-margin-top: var(--nav-h); }

.section--land {
  background: var(--c-navy);
  color: #fff;
  padding-block: var(--section-y);
}

/* The last chapter unpins exactly where the chapters container ends, so
   without this gap the navy slab would slide up over a still fully visible
   panel. This buys the final chapter room to fade out first, and reads as the
   same skyline breath that separates the chapters from each other. Must stay
   comfortably above the fade distance (GONE in hero-scrub.js, 0.34vh). */
body[data-hero-mode="scrub"] .section--land { margin-top: 50vh; }

.contact__title { margin-bottom: 1.25rem; color: #fff; }

.contact__body {
  color: rgba(255, 255, 255, 0.68);
  max-width: 34rem;
  margin-bottom: clamp(2.25rem, 4.5vh, 3rem);
}

.contact__link {
  display: inline-block;
  font-size: clamp(1.375rem, 3.4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}

.contact__link:hover {
  color: var(--c-gold);
  text-decoration-color: var(--c-gold);
}

/* ---------- Footer ------------------------------------------------------- */

.footer {
  background: var(--c-navy-deep);
  color: #fff;
  padding-block: clamp(3.5rem, 7vh, 5.5rem);
}

.footer__mark {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer__meta {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer__legal {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-rule-dark);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.52);
  max-width: 60rem;
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 768px) {
  :root { --nav-h: 80px; }

  body { font-size: 1rem; }

  .nav__brand img { width: 148px; }

  /* Three uppercase links will not sit beside the lockup at this width. This
     is a single scrolling page, so the contact link is the one worth keeping. */
  .nav__links a:not(.nav__links-contact) { display: none; }

  .values { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}