/* ======================================
   ZON PERFORMANCE — style.css
   Base, layout, sections
   ====================================== */

/* VARIABLES */
:root {
  --c-base:        #100E0C;
  --c-dark:        #0D0B09;
  --c-charcoal:    #1A1815;
  --c-light:       #F4EFE6;
  --c-light-2:     #E9E1D2;
  --c-accent:      #EA580C;
  --c-accent-dark: #C04A22;
  /* Performance door's own accent — cool steel blue, distinct from
     Tactical's ember. Same two-tone pattern: base for dark surfaces,
     -dark for use on light backgrounds (e.g. the Performance card). */
  --c-accent-perf:      #2A8FC7;
  --c-accent-perf-dark: #1D6C99;

  --c-muted-dark:  rgba(244,239,230,0.62);
  --c-muted-dark2: rgba(244,239,230,0.42);
  --c-muted-light: #46403A;
  --c-muted-light2:#3A352E;

  --f-display: 'Saira Condensed', sans-serif;
  --f-body:    'Hanken Grotesk', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --pad-x: clamp(20px, 6vw, 72px);
  --pad-y: clamp(88px, 14vh, 170px);
  --max-w: 1280px;
  --radius: 3px;
  --nav-h: clamp(60px, 8vh, 80px);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background-color: var(--c-base);
  color: var(--c-light);
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: normal; }
ul { list-style: none; }

/* Keyboard focus. The UA ring is close to invisible against this palette,
   so links and buttons get an explicit amber one. :focus-visible, so
   pointer users never see it. Form fields keep their own ring in
   contact.css, which is loaded after this file. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
/* The skip link's target. Focus lands here so the next Tab continues from
   the content rather than the nav; the landmark announcement is the
   feedback, so no ring around the whole page. */
main:focus { outline: none; }

/* Skip link — parked above the viewport until focused. It is the first
   tab stop in the document, so absolute positioning at the page origin is
   enough; it never needs to follow a scrolled viewport. Excluded from the
   smooth-scroll handler in premium.js so native anchor navigation moves
   focus into <main>, not just the scroll position. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  margin: 10px;
  padding: 12px 20px;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-base);
  background-color: var(--c-accent);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* SCROLL PROGRESS BAR */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--c-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 200;
  pointer-events: none;
}

/* ======================================
   NAV
   ====================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(10px, 1.5vw, 16px) var(--pad-x);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.35s cubic-bezier(0.16,0.84,0.34,1);
}
.nav.nav--solid {
  background: rgba(16,14,12,0.92);
  border-color: rgba(244,239,230,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav.nav--hidden {
  transform: translateY(-110%);
}

/* Logo */
.nav-logo {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: var(--c-light);
}
.nav-logo-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 0.78;
  letter-spacing: -0.01em;
  color: var(--c-light);
}
.nav-logo-wordmark--sm { font-size: 30px; }
.logo-o {
  display: block;
  margin: 0 0.02em;
  color: var(--c-light);
}
.nav-logo-sub {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.62);
  padding-left: 1px;
}

/* Nav doors — the two-door system, carried into the bar */
.nav-doors {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
.nav-door {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.6);
  padding: 5px 1px;
  transition: color 0.25s ease;
}
.nav-door-emblem {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--c-accent);
  filter: drop-shadow(0 0 5px rgba(234,88,12,0.4));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-door:hover .nav-door-emblem {
  transform: scale(1.12);
}
.nav-door::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-door:hover {
  color: var(--c-light);
}
.nav-door:hover::after,
.nav-door[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav-door[aria-current="page"] {
  color: var(--c-light);
}
.nav-door-divider {
  width: 1px;
  height: 15px;
  background-color: rgba(244,239,230,0.18);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-base);
  background-color: var(--c-accent);
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn-primary:hover { background-color: var(--c-light); color: var(--c-base); }
.btn-primary.btn-lg { padding: 18px 28px; font-size: 14px; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.55);
  transition: color 0.25s ease;
}
.btn-ghost:hover { color: var(--c-light); }

/* ======================================
   HERO — sticky pin
   ====================================== */
.hero-wrapper {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
}
.hero {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(108px, 13vh, 150px) var(--pad-x) clamp(40px, 6vh, 72px);
  overflow: hidden;
}

/* Video */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08);
}
.hero-gradient-top {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,11,9,0.65) 0%,
    rgba(13,11,9,0.1) 35%,
    rgba(13,11,9,0.0) 55%
  );
}
.hero-gradient-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(13,11,9,1) 0%,
    rgba(13,11,9,0.75) 20%,
    rgba(13,11,9,0) 55%
  );
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    58deg,
    rgba(244,239,230,0.045) 0 1px,
    transparent 1px 78px
  );
  pointer-events: none;
}

/* Decorative reticle */
.hero-reticle-bg {
  position: absolute;
  top: 48%;
  right: -6%;
  width: min(62vw, 640px);
  transform: translateY(-50%);
  color: rgba(244,239,230,0.06);
  pointer-events: none;
  animation: reticlePulse 9s ease-in-out infinite;
}

/* Caption */
/* Scroll hint — a non-interactive cue, not a button */
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.45);
  pointer-events: none;
  user-select: none;
}
.scroll-hint-arrow {
  display: inline-block;
  animation: scrollBob 1.9s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow { animation: none; }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  /* Push content to the hero floor when it fits; when the headline is
     tall enough to overflow, start from the top padding instead of
     riding up under the nav. */
  margin-top: auto;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: clamp(20px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.eyebrow-divider { color: rgba(244,239,230,0.3); }
.hero-headline {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 11.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.015em;
  color: var(--c-light);
  text-wrap: balance;
  margin-bottom: 0;
}
.hero-headline em { color: var(--c-accent); }
.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px);
}
.hero-sub {
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(244,239,230,0.74);
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ======================================
   SITE MAIN (slides over hero)
   ====================================== */
.site-main {
  position: relative;
  z-index: 10;
}

/* First section gets rounded top corners for the "slide over" feel */
.site-main > section:first-child {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}

/* ======================================
   SHARED SECTION PATTERNS
   ====================================== */
.section {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
}
.section--light {
  background-color: var(--c-light);
  color: var(--c-charcoal);
}
.section--dark-alt {
  background-color: var(--c-dark);
  color: var(--c-light);
}
.section--cta {
  background-color: var(--c-charcoal);
  color: var(--c-light);
}

/* Noise texture overlay */
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
}
.container--narrow { max-width: 760px; }

/* Section labels */
.section-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label--dark { color: var(--c-accent); }
.section-label--light { color: var(--c-accent-dark); }
.label-line {
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--c-charcoal);
  opacity: 0.4;
  flex-shrink: 0;
}
.label-line--amber {
  background-color: var(--c-accent);
  opacity: 0.6;
}

/* Display headings */
.display-heading {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--c-light);
  text-wrap: balance;
}
.display-heading--light { color: var(--c-charcoal); }
.accent-text { color: var(--c-accent); }

/* Body large */
.body-large {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--c-muted-light2);
}
.body-large strong {
  font-weight: 600;
  color: var(--c-charcoal);
}

/* ======================================
   PHILOSOPHY
   ====================================== */
.philosophy-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 6vw, 72px);
  max-width: 980px;
}

/* ======================================
   TWO DOORS
   ====================================== */
.two-doors-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.doors-sub {
  max-width: 34ch;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  color: rgba(244,239,230,0.6);
}
.doors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.doors-footnote {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.42);
}

/* Door cards */
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 560px;
  transition: transform 0.5s cubic-bezier(0.16,0.84,0.34,1),
              border-color 0.5s ease;
}
.door--tactical {
  color: var(--c-light);
  background: linear-gradient(165deg, #1C1916 0%, #100E0C 100%);
  border: 1px solid rgba(244,239,230,0.1);
}
.door--tactical:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.door--performance {
  color: var(--c-charcoal);
  background: linear-gradient(165deg, #F6F1E8 0%, #E9E1D2 100%);
  border: 1px solid rgba(26,24,21,0.1);
}
.door--performance:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c-accent-perf) 70%, transparent);
}

/* Door ambient glow — each door's own accent color */
.door--tactical::before {
  content: '';
  position: absolute;
  right: -14%; top: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 65%);
  pointer-events: none;
}
.door--performance::before {
  content: '';
  position: absolute;
  right: -14%; top: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent-perf) 26%, transparent), transparent 65%);
  pointer-events: none;
}

.door-inner {
  position: relative;
  padding: clamp(28px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: clamp(20px, 2.4vw, 30px);
}
.door-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.door-number {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--c-accent);
}
.door-number--light { color: var(--c-accent-dark); }
.door-label-right {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.4);
}
.door-label-right--light { color: rgba(26,24,21,0.45); }

/* Door video */
.door-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08);
}

/* Door image placeholder */
.door-image-placeholder {
  aspect-ratio: 16/8;
  border-radius: 2px;
  background: linear-gradient(150deg, #221E19, #0D0B09);
  border: 1px solid rgba(244,239,230,0.08);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.door-image-placeholder--light {
  background: linear-gradient(150deg, #EFE8DA, #DDD3C2);
  border-color: rgba(26,24,21,0.08);
}

/* Door content */
.door-title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--c-light);
}
.door-title--light { color: var(--c-charcoal); }
.door-title em { color: var(--c-accent); }
.door-title--light em { color: var(--c-accent-dark); }

.door-body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244,239,230,0.74);
}
.door-body--light { color: var(--c-muted-light); }

/* Tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.66);
  border: 1px solid rgba(244,239,230,0.16);
  border-radius: 999px;
  padding: 6px 11px;
}
.tag--light {
  color: rgba(26,24,21,0.66);
  border-color: rgba(26,24,21,0.18);
}

.door-benefits {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244,239,230,0.5);
}
.door-benefits--light { color: rgba(26,24,21,0.55); }

.door-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.door-cta--light { color: var(--c-accent-dark); }

/* ======================================
   HOW WE TRAIN
   ====================================== */
.how-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.how-sub {
  max-width: 32ch;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--c-muted-light);
}
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.mode {
  border-top: 2px solid var(--c-charcoal);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mode-number {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-accent);
}
.mode-title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 0.96;
  letter-spacing: -0.005em;
  color: var(--c-charcoal);
}
.mode-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted-light);
}

/* ======================================
   CREDENTIALS
   ====================================== */
.creds-heading { max-width: 18ch; }
.creds-sub {
  max-width: 56ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.62;
  color: var(--c-muted-dark);
  margin: clamp(8px, 1.4vw, 16px) 0 clamp(44px, 6vw, 72px);
}
.creds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background-color: rgba(244,239,230,0.1);
  border: 1px solid rgba(244,239,230,0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.cred {
  background-color: var(--c-base);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}
.cred-number {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-accent);
}
.cred-title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  line-height: 0.96;
  color: var(--c-light);
}
.cred-body {
  margin-top: auto;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244,239,230,0.6);
}

/* ======================================
   ABOUT COLE
   ====================================== */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.about-image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #15120F;
  border: 1px solid rgba(26,24,21,0.12);
}
.about-image-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* The real photos ship with a warm cinematic grade that already sits
     in the brand palette — keep it, with only a light desaturation so
     it still reads alongside the B&W hero footage. Swap back to
     grayscale(100%) if the fully monochrome look is preferred. */
  filter: saturate(0.85) contrast(1.04);
}
.about-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(234,88,12,0.8);
  border-style: solid;
}
.about-corner--tl { top: 14px; left: 14px; border-width: 1.5px 0 0 1.5px; }
.about-corner--br { bottom: 14px; right: 14px; border-width: 0 1.5px 1.5px 0; }

/* ----- About media column: portrait + Cole's film -----
   The 4:5 portrait and the 16:9 film stack to roughly the height of the
   bio beside them, which is what the column was missing. On mobile the
   grid collapses and they simply stack above the text. */
.about-media {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  align-content: start;
}
.about-film { position: relative; }
/* Fixed 16:9 box. The facade and the iframe that replaces it both fill
   this, so pressing play cannot shift the page. */
.film-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--c-base);
  border: 1px solid rgba(26,24,21,0.12);
}
.film-facade {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.film-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same treatment as the portrait directly above it — both are frames
     from the same graded shoot, so they should share a grade. */
  filter: saturate(0.85) contrast(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.film-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,11,9,0.15) 0%,
    rgba(13,11,9,0.30) 55%,
    rgba(13,11,9,0.72) 100%
  );
}
.film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-accent);
  filter: drop-shadow(0 2px 14px rgba(8,6,4,0.55));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-play svg { display: block; }
.film-cue {
  position: absolute;
  left: clamp(14px, 2vw, 20px);
  bottom: clamp(12px, 1.6vw, 18px);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-light);
}
.film-facade:hover .film-poster {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.07);
}
.film-facade:hover .film-play { transform: translate(-50%, -50%) scale(1.09); }
/* The iframe that replaces the facade on click. */
.film-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.about-film-caption {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-muted-light);
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}
.about-name {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin-bottom: clamp(4px, 1vw, 12px);
}
.about-quote {
  margin-top: clamp(32px, 4vw, 48px);
  padding-left: 24px;
  border-left: 2px solid var(--c-accent);
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--c-charcoal);
}

/* ======================================
   PROOF & RESULTS
   ====================================== */
.proof-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.proof-sub {
  max-width: 30ch;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  color: rgba(244,239,230,0.6);
}

/* Result tags */
.result-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.result-tag--hired { background: rgba(234,88,12,0.2); color: var(--c-accent); }
/* Performance tags carry the Performance door's own steel blue, lightened
   toward the warm off-white so it stays legible on the dark sections these
   tags actually appear in. Derived from the var, not a second hardcoded blue. */
.result-tag--performance {
  background: color-mix(in srgb, var(--c-accent-perf) 15%, transparent);
  color: color-mix(in srgb, var(--c-accent-perf), var(--c-light) 45%);
}
/* .testimonial is a flex column, so a stretched tag would run the full
   card width. Keep it hugging its own text. */
.testimonial .result-tag { align-self: flex-start; }

/* Featured testimonial */
.testimonial-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  background: linear-gradient(150deg, #1C1916, #100E0C);
  border: 1px solid rgba(234,88,12,0.35);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.testimonial-quote {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-light);
  margin-bottom: 16px;
}
.testimonial-quote--sm { font-size: clamp(1.2rem, 2.2vw, 1.8rem); }

.testimonial-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244,239,230,0.55);
  max-width: 44ch;
  margin-bottom: 24px;
}
.testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-name {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.testimonial-detail {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244,239,230,0.42);
}

/* Secondary testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2vw, 24px);
}
.testimonial {
  background: rgba(244,239,230,0.04);
  border: 1px solid rgba(244,239,230,0.08);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
}
.testimonial .testimonial-footer { margin-top: auto; padding-top: 20px; }

/* ======================================
   CTA SECTION
   ====================================== */
.cta-heading {
  font-size: clamp(2.8rem, 7.5vw, 7rem);
  line-height: 0.88;
  margin: clamp(12px, 2vw, 24px) 0 clamp(20px, 3vw, 32px);
}
.cta-body {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--c-muted-dark);
  max-width: 48ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.cta-actions { margin-bottom: clamp(16px, 2vw, 24px); }
/* Price sits with the CTA so the fee is never a surprise on arrival
   at the booking page — and always paired with the credit-back line. */
.cta-price {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(244,239,230,0.5);
}
.cta-location {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.38);
}

/* Cross-link between the two path pages (tactical <-> performance) */
.cta-crosslink {
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(244,239,230,0.5);
}
.cta-crosslink a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.cta-crosslink a:hover { border-color: var(--c-accent); }

/* ======================================
   PHOTO-BACKED SECTION
   A normal section that carries a photo behind its own content
   instead of a flat colour. The section keeps its background-color
   as a fallback (it paints beneath the negative z-index layers).
   ====================================== */
.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
  filter: saturate(0.8) contrast(1.02);
}
.section-photo-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(16,14,12,0.90) 0%, rgba(16,14,12,0.74) 45%, rgba(16,14,12,0.62) 100%);
}
/* Denser variant for text-heavy sections (headings + card grids),
   where the copy has to stay fully legible over the photo. Kept
   lighter than it looks like it needs to be, because the content
   blocks below carry their own translucent bed. */
.section--photo-deep .section-photo-scrim {
  background:
    linear-gradient(to top, rgba(13,11,9,0.84) 0%, rgba(13,11,9,0.66) 45%, rgba(13,11,9,0.56) 100%);
}

/* Content blocks inside a photo-backed section go translucent, so the
   photograph reads through and between them instead of being hidden
   by a wall of opaque cards. The backdrop blur keeps the copy crisp,
   which is what lets the scrim above stay light. Scoped to
   .section--photo so the same cards stay solid everywhere else. */
.section--photo .cred,
.section--photo .cred:hover {
  background-color: rgba(16,14,12,0.52);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.section--photo .cred:hover {
  background-color: rgba(22,19,16,0.68);
}
.section--photo .creds-grid {
  background-color: rgba(244,239,230,0.14);
  border-color: rgba(244,239,230,0.16);
}
.section--photo .testimonial-featured {
  background: linear-gradient(150deg, rgba(28,25,22,0.6), rgba(16,14,12,0.72));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Supporting photo inside the Proof & Results section */
.proof-photo {
  margin: clamp(28px, 4vw, 48px) 0 0;
}
.proof-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius);
  border: 1px solid rgba(244,239,230,0.1);
  filter: saturate(0.85) contrast(1.03);
}
.proof-photo figcaption {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.36);
}

/* ======================================
   FULL-BLEED PHOTO STATEMENT
   Edge-to-edge image with a scrim and overlaid copy.
   Used for the homepage break and the Tactical "your guide"
   moment. The photo is a real <img> (not a CSS background) so
   it can lazy-load and carry alt text.
   ====================================== */
.section-bleed {
  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 72vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(40px, 8vw, 96px) var(--pad-x);
  background-color: var(--c-base);
  overflow: hidden;
}
.section-bleed-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* These are 16:9 stills in sections that are usually shorter than
     16:9, so ~15–20% of the height gets cropped. Bias slightly up so
     the crop takes it off the floor rather than off the subject. */
  object-position: center 38%;
  z-index: -2;
  filter: saturate(0.9) contrast(1.04);
}
/* For frames where the subject's head sits right at the top edge
   (the helmet shot) — take the whole vertical crop off the bottom. */
.section-bleed--focus-top .section-bleed-photo {
  object-position: center top;
}
/* Dark scrim, weighted to the bottom where the copy sits. */
.section-bleed-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(16,14,12,0.94) 0%, rgba(16,14,12,0.72) 34%, rgba(16,14,12,0.28) 68%, rgba(16,14,12,0.35) 100%);
}
.section-bleed-inner {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
}

/* --- Variants ---------------------------------------------------
   --tall  : more presence for a hero-weight statement
   --right : copy sits in the right column, for photos whose
             subject is framed left. Adds a left-to-right scrim so
             the type has a dark bed without hiding the subject.
   --card  : decorative title card — no message to read, just three
             words centred over the photo. Even vignette instead of
             a bottom-weighted scrim, since nothing is anchored to
             the bottom edge. */
.section-bleed--card {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(360px, 56vh, 620px);
}
.section-bleed--card .section-bleed-scrim {
  background:
    radial-gradient(ellipse 80% 70% at center, rgba(16,14,12,0.25) 0%, rgba(16,14,12,0.6) 100%),
    linear-gradient(to top, rgba(16,14,12,0.55) 0%, rgba(16,14,12,0.3) 40%, rgba(16,14,12,0.4) 100%);
}
.section-bleed--card .section-bleed-inner {
  display: flex;
  justify-content: center;
}
.title-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.32em;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--c-light);
  text-shadow: 0 2px 30px rgba(16,14,12,0.6);
}
.title-card-word--accent { color: var(--c-accent); }
/* Reveal: a slow, small lift and fade — one word at a time.
   Deliberately opacity + transform only: animating letter-spacing
   (or anything else layout-affecting) reflows the flex row every
   frame and shoves the neighbouring words sideways, which is what
   makes this kind of title card feel jumpy. The rise is kept small
   and the duration long so it reads as a settle, not a pop.
   Selector is scoped ([data-reveal] repeated) to out-specificity
   the shared [data-reveal] rule in premium.css regardless of
   stylesheet load order. */
.title-card-word[data-reveal] {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.title-card-word[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .title-card-word[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================
   FOOTER
   ====================================== */
.footer {
  background-color: var(--c-base);
  padding: clamp(40px, 6vw, 64px) var(--pad-x);
  border-top: 1px solid rgba(244,239,230,0.08);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.footer-logo {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: var(--c-light);
}
.footer-copy {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.38);
}
.footer-tagline {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.24);
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: rgba(244,239,230,0.52);
  transition: color 0.3s ease;
}
.footer-social:hover { color: var(--c-accent); }
.footer-social svg { flex-shrink: 0; }

/* Studio credit — quiet line under the main footer row */
.footer-credit {
  max-width: var(--max-w);
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(244,239,230,0.07);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.26);
}
.footer-credit a {
  color: rgba(244,239,230,0.46);
  text-decoration: none;
  border-bottom: 1px solid rgba(244,239,230,0.2);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.footer-credit a:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* ======================================
   RESPONSIVE
   ====================================== */
@media (max-width: 640px) {
  .nav-cta { display: none; } /* hide nav CTA on mobile, hero has it */
  /* Doors become a full-width second row inside the nav — the two-door
     switcher carried onto mobile. Hairline appears once the nav goes solid. */
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav-doors {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 28px;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid transparent;
    transition: border-color 0.4s ease;
  }
  .nav.nav--solid .nav-doors { border-top-color: rgba(244,239,230,0.1); }
  .nav-door { font-size: 12px; padding: 6px 1px; }
  /* Taller two-row nav needs more hero clearance */
  .hero { padding-top: 140px; }
  .hero-headline { font-size: clamp(3rem, 14vw, 5rem); }
  /* Stack the two-column headers and keep their sub-text flush-left
     (the desktop `align-items: flex-end` otherwise right-aligns it) */
  .two-doors-header,
  .proof-header,
  .how-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-main > section:first-child { border-radius: 10px 10px 0 0; }
}