/* =========================================================
   LEWIS HUNTER WEBSITE
   Brand Identity V2. Gothic premium. Dark glamour.

   Site default: deep black across every page. Gold accent, navy
   and crimson reserved as accent tokens.
   .reckoning scope: same black surface plus a subtle crimson
   undertone on the body gradient (the show).
   ========================================================= */

/* ---------- 1. Design tokens ---------- */

:root {
  /* V2 Primary palette */
  --navy: #0B2545;
  --navy-deep: #081B33;
  --navy-elev: #112E55;
  --navy-card: #0F2A4D;

  --gold: #D4AF37;
  --gold-bright: #E5C25A;
  --gold-soft: rgba(212, 175, 55, 0.85);

  --black: #0A0A0A;
  --black-elev: #141414;
  --black-card: #1B1B1B;

  --bone: #F5F0E8;
  --bone-dim: rgba(245, 240, 232, 0.72);
  --bone-mute: rgba(245, 240, 232, 0.45);

  --gray-text: #333333;

  --crimson: #6B0F1A;
  --crimson-bright: #8A1622;

  /* Site surfaces. Dark gothic across every page.
     Navy and crimson live as accent tokens only, not as backgrounds. */
  --bg: #0A0A0A;
  --bg-2: #111111;
  --bg-3: #1A1A1A;
  --bg-4: #232323;

  /* Text */
  --text: var(--bone);
  --text-dim: var(--bone-dim);
  --text-mute: var(--bone-mute);

  /* Lines and cards */
  --border: rgba(245, 240, 232, 0.10);
  --border-strong: rgba(245, 240, 232, 0.22);
  --border-gold: rgba(212, 175, 55, 0.45);
  --card: rgba(245, 240, 232, 0.04);
  --card-hover: rgba(245, 240, 232, 0.07);

  /* Type */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;

  /* Spacing */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Radius. Kept restrained per V2. Gothic premium uses less roundness. */
  --r-pill: 999px;
  --r-card: 4px;
  --r-card-lg: 8px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Photo heroes. Every hero that sits copy over a photograph reads from these,
     so they all land in the same place regardless of which hero component is used.
     The source photos vary enormously in exposure: an arena shot is near-black, a lit
     studio shot is near-white. The two modifiers below normalise the source first,
     then the same scrim goes over the top. */
  --hero-photo-opacity: 0.8;
  --hero-photo-filter: saturate(0.9) contrast(1.02);
  --hero-scrim: linear-gradient(180deg,
    rgba(10, 10, 10, 0.36) 0%,
    rgba(10, 10, 10, 0.58) 55%,
    rgba(10, 10, 10, 0.9) 100%);
}

/* With the photos this bright the scrim can no longer guarantee contrast on its own,
   so hero copy carries a shadow. It disappears against dark areas and only does work
   where the image behind it is light. */
.hero--bleed .hero__inner h1,
.hero--bleed .hero__inner .hero__lede,
.hero--bleed .hero__inner .signature,
.hero--bleed .hero__inner .eyebrow,
.reckoning-hero--photo .reckoning-title,
.reckoning-hero--photo .reckoning-tagline,
.reckoning-hero--photo .reckoning-mark {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(0, 0, 0, 0.5);
}

/* Under-exposed source: dark venues, arena and stage lighting. Lift it hard so it
   sits at the same level as the daylight shots. */
.hero--photo-dark {
  --hero-photo-opacity: 0.95;
  --hero-photo-filter: saturate(0.95) contrast(1) brightness(1.5);
}

/* Over-exposed source: white studios, daylight. Only take the edge off, so it stays
   bright rather than being dragged down to meet the darker frames. */
.hero--photo-bright {
  --hero-photo-opacity: 0.84;
  --hero-photo-filter: saturate(0.88) contrast(1.02) brightness(0.92);
}

/* ---------- 2. Reset and base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(212, 175, 55, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(212, 175, 55, 0.03), transparent 60%);
  background-attachment: fixed;
}

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- 3. Typography ---------- */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

h1 {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.1;
  font-weight: 900;
}

h3 {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  font-weight: 900;
}

h4 {
  font-size: clamp(18px, 1.5vw, 22px);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--s-3);
  max-width: 68ch;
  color: var(--text-dim);
}

p.lead {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--text);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}

.eyebrow.on-dark { color: var(--gold); }

/* Italic gold emphasis in display headings */
h1 em, h2 em, h3 em, .hero h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 900;
}

strong { color: var(--text); font-weight: 700; }

::selection {
  background: rgba(212, 175, 55, 0.28);
  color: var(--bone);
}

.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.35;
  color: var(--bone);
  border-left: 2px solid var(--gold);
  padding-left: var(--s-3);
  margin: var(--s-4) 0;
}

/* ---------- 4. Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container.wide { max-width: var(--container-wide); }

section {
  padding: var(--s-7) 0;
  position: relative;
}

section.tight { padding: var(--s-6) 0; }

.section-head {
  max-width: 760px;
  margin-bottom: var(--s-6);
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Section backgrounds */
.bg-cream-alt,
.bg-alt { background: var(--bg-2); }

.bg-navy,
.bg-deep {
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: var(--text); }

.bg-navy p, .bg-deep p { color: var(--text-dim); }

.bg-black {
  background: var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4 { color: var(--bone); }
.bg-black p { color: var(--bone-dim); }

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

.rule-gold {
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: var(--s-4) 0;
  opacity: 0.6;
}

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #0A0A0A;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              color 0.2s var(--ease),
              transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(212, 175, 55, 0.16);
}

.btn:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 32px rgba(212, 175, 55, 0.28);
}

.btn--outline {
  background: transparent;
  color: var(--bone);
  border-color: rgba(245, 240, 232, 0.28);
  box-shadow: none;
}

.btn--outline:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: none;
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #0A0A0A;
}

.btn--gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn--on-dark {
  background: var(--gold);
  border-color: var(--gold);
  color: #0A0A0A;
}

.btn--on-dark:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn--ghost-dark {
  background: transparent;
  border-color: rgba(245, 240, 232, 0.28);
  color: var(--bone);
  box-shadow: none;
}

.btn--ghost-dark:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn--crimson {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--bone);
  box-shadow: 0 4px 24px rgba(107, 15, 26, 0.32);
}

.btn--crimson:hover {
  background: var(--crimson-bright);
  border-color: var(--crimson-bright);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 4px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.link-arrow::after { content: "\2192"; }
.link-arrow:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

.link-arrow.on-dark { color: var(--gold); border-color: var(--border-gold); }
.link-arrow.on-dark:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* ---------- 6. Navigation ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.site-nav.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(10, 10, 10, 0.95);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.brand .dot {
  color: var(--gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--bone-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s var(--ease);
}

.nav-links a:hover { color: var(--bone); }

.nav-links a[aria-current="page"] {
  color: var(--bone);
}

.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--bone-dim);
  padding: var(--s-7) 0 var(--s-5);
  margin-top: var(--s-7);
  border-top: 1px solid var(--border);
}

.site-footer .container {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-5);
}

.site-footer__brand .brand {
  color: var(--bone);
  font-size: 28px;
}

.site-footer__brand p {
  margin-top: var(--s-3);
  max-width: 36ch;
  color: var(--bone-dim);
}

.site-footer h5 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-3);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.site-footer a {
  color: var(--bone-dim);
  font-size: 15px;
}

.site-footer a:hover { color: var(--bone); }

.site-footer__newsletter p {
  margin: 0 0 var(--s-2);
  font-size: 14px;
  color: var(--bone-dim);
  max-width: 32ch;
}

.site-footer__base {
  border-top: 1px solid var(--border);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--bone-mute);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- 8. Hero ---------- */

.hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-6);
}

.hero--split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-6);
  align-items: center;
}

.hero__content { max-width: 640px; }

.hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0) 50%,
    rgba(10, 10, 10, 0.55) 100%);
  pointer-events: none;
}

.hero h1 {
  margin-bottom: var(--s-3);
}

.hero__identity {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
  padding: 7px 18px;
  border: 1px solid var(--border-gold);
  border-radius: var(--r-pill);
  background: rgba(212, 175, 55, 0.06);
}

.hero__lede {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 56ch;
}

.hero--centered {
  text-align: center;
  padding-top: var(--s-7);
  padding-bottom: var(--s-6);
}

.hero--centered .hero__content {
  margin: 0 auto;
}

.hero--centered .eyebrow,
.hero--centered .hero__identity {
  display: inline-block;
}

/* ---------- 9. Editorial blocks ---------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-6);
  align-items: start;
}

.two-col--reversed {
  grid-template-columns: 1.2fr 1fr;
}

.prose p { font-size: 17px; color: var(--text-dim); }
.prose p + p { margin-top: 0; }

.prose p.lead { color: var(--text); }

.bg-navy .prose p,
.bg-deep .prose p { color: var(--text-dim); }

/* ---------- 10. Cards and tiles ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--s-5);
  border-radius: var(--r-card);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.card:hover {
  border-color: var(--border-gold);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.split-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.tile {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.tile:hover {
  border-color: var(--border-gold);
  background: var(--card-hover);
  transform: translateY(-3px);
}

.tile--dark {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text);
}

.tile--dark h3 { color: var(--text); }
.tile--dark p { color: var(--text-dim); }

.tile .eyebrow {
  margin-bottom: var(--s-2);
}

.tile h3 { margin-bottom: var(--s-3); }

/* ---------- 11. Engine block ---------- */

.engine {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
}

.engine:last-child { border-bottom: 1px solid var(--border); }

.engine__number {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.engine__body { max-width: 720px; }

.engine__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s-4);
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.engine__meta dt {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.engine__meta dd {
  margin: 0;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}

.engine .quote {
  margin-top: var(--s-4);
}

/* ---------- 12. Quote / pullquote ---------- */

.quote {
  position: relative;
  padding-left: var(--s-3);
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  color: var(--text);
}

.bg-navy .quote,
.bg-deep .quote { color: var(--text); }

.quote-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--s-5);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.quote-card:hover {
  border-color: var(--border-gold);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.quote-card__mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.8;
  color: var(--gold);
  margin-bottom: var(--s-2);
  opacity: 0.85;
  font-weight: 900;
}

.quote-card blockquote {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--text);
  font-style: italic;
  font-weight: 500;
  flex-grow: 1;
}

.quote-card cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

/* ---------- 13. Testimonials carousel ---------- */

.testimonials {
  background: var(--bg-2);
  color: var(--text);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.testimonials h2 { color: var(--text); }

.testimonial-slider {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.testimonial-track {
  display: grid;
  grid-template-areas: "slide";
  position: relative;
}

.testimonial-slide {
  grid-area: slide;
  padding: 0 var(--s-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}

.testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0s;
}

.testimonial-slide blockquote {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.45;
  color: var(--text);
  position: relative;
}

.testimonial-slide blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 72px;
  color: var(--gold);
  line-height: 0.6;
  margin-bottom: var(--s-2);
  opacity: 0.7;
  font-weight: 900;
}

.testimonial-slide cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.testimonial-slide cite span {
  display: block;
  margin-top: 4px;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 14px;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.slider-controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.slider-controls button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #0A0A0A;
}

.slider-dots {
  display: flex;
  gap: 6px;
}

.slider-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(245, 240, 232, 0.22);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.slider-dots button.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

/* ---------- 14. Seen With carousel ---------- */

.seen-with {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.seen-with-track {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.seen-with-track::-webkit-scrollbar { height: 6px; }
.seen-with-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
.seen-with-track::-webkit-scrollbar-track { background: transparent; }

.seen-with-card {
  flex: 0 0 clamp(240px, 28vw, 320px);
  scroll-snap-align: start;
  border: 1px solid var(--border);
  background: var(--bg-3);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.seen-with-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}

.seen-with-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-4);
}

.seen-with-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seen-with-card__name {
  padding: var(--s-2) var(--s-3) 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
}

/* Credential line under a name. Says why the person matters, no claim about the relationship. */
.seen-with-card__role {
  padding: 0 var(--s-3) var(--s-3);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  text-align: center;
}

/* ---------- 15. Book block ---------- */

.book-block {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-6);
  align-items: center;
}

.book-cover {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
}

.book-cover img {
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
              0 10px 30px rgba(212, 175, 55, 0.15);
  border-radius: 4px;
}

.book-meta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}

/* ---------- 16. Forms ---------- */

.form {
  display: grid;
  gap: var(--s-3);
}

.form-row {
  display: grid;
  gap: 8px;
}

.form-row label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.bg-navy .form-row label,
.bg-deep .form-row label,
.tile--dark .form-row label {
  color: var(--gold);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 16px 20px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  color: var(--text);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  width: 100%;
}

.form-row textarea {
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-body);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--text-mute);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
  background: var(--bg-4);
}

.form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23D4AF37' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 10px;
  padding-right: 44px;
}

.form-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}

.form-inline input[type="email"] {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.25s var(--ease);
}

.form-inline input[type="email"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.form-inline input[type="email"]::placeholder { color: var(--text-mute); }

.form-inline .btn { width: 100%; padding: 12px 24px; }

/* GDPR consent row (newsletter + contact forms) */
.form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: left;
}

.form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}

.form-consent a {
  color: var(--gold);
  border-bottom: 1px solid var(--border-gold);
}

.form-note {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: var(--s-2);
}

.bg-navy .form-note,
.bg-deep .form-note { color: var(--text-mute); }

.form-success {
  display: none;
  padding: var(--s-3) var(--s-4);
  background: rgba(212, 175, 55, 0.08);
  color: var(--text);
  font-size: 15px;
  border: 1px solid var(--border-gold);
  border-radius: var(--r-card);
}

.form-success.is-visible { display: block; }

/* ---------- 17. Photo strip ---------- */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}

.photo-strip__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
}

.photo-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  filter: saturate(0.85) contrast(1.05);
}

/* Feature variant for the Engine 2 section. Three columns instead of four so each
   image is around a third larger, and a landscape crop rather than portrait because
   these shots need to show the room, not just the person in front of it. */
.photo-strip--feature {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.photo-strip--feature .photo-strip__item {
  aspect-ratio: 3 / 2;
}

.photo-strip__item:hover img { transform: scale(1.05); }

.stage-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-2);
  height: 640px;
}

.stage-gallery__item {
  overflow: hidden;
  background: var(--bg-3);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  min-width: 0;
  min-height: 0;
}

.stage-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  filter: saturate(0.85) contrast(1.05);
}

.stage-gallery__item:hover img { transform: scale(1.05); }

.stage-gallery__item:first-child {
  grid-row: span 2;
}

/* A single landscape photo with a caption under it. Used where one picture carries
   the point on its own and a grid would be overkill, e.g. the two authors together. */
.photo-feature {
  margin: 0 0 var(--s-4);
}

.photo-feature__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
}

.photo-feature__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

.photo-feature figcaption {
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dim);
}

/* ---------- 18. Credibility strip ---------- */

.credibility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.credibility__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.credibility__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.credibility__items li {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}

.credibility__items li:hover { color: var(--gold); }

/* ---------- 19. Speaking topic list ---------- */

.topic {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-5);
  align-items: start;
}

.topic:last-child { border-bottom: 1px solid var(--border); }

.topic h3 { margin-bottom: var(--s-2); }

.topic__best {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s-3);
}

.topic__best span {
  display: block;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 14px;
  margin-top: 4px;
}

/* ---------- 20. FAQ ---------- */

.faq-item {
  border-top: 1px solid var(--border);
  padding: var(--s-4) 0;
}

.faq-item:last-child { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  letter-spacing: -0.01em;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--gold);
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item__answer {
  padding-top: var(--s-3);
  color: var(--text-dim);
  font-size: 17px;
  max-width: 64ch;
}

/* ---------- 21. CTA banner ---------- */

.cta-banner {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-card-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.08), transparent 70%);
  pointer-events: none;
}

.cta-banner > * { position: relative; z-index: 1; }

.cta-banner h2 { color: var(--text); }
.cta-banner p { color: var(--text-dim); max-width: 56ch; margin: 0 auto var(--s-4); }

/* ---------- 22. Principles list ---------- */

.principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.principle {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}

.principle h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--text);
  margin-bottom: var(--s-1);
  letter-spacing: -0.01em;
}

.principle p {
  font-size: 16px;
  color: var(--text-dim);
  margin: 0;
}

/* ---------- 23. Today list (About) ---------- */

.today-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
}

.today-list .principle h4 {
  color: var(--text);
}

/* ---------- 24. Bullet list ---------- */

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}

.bullet-list li {
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  color: var(--text);
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 14px;
  height: 1.5px;
  background: var(--gold);
}

.bg-navy .bullet-list li,
.bg-deep .bullet-list li { color: var(--text); }

/* ---------- 25. Utility ---------- */

.hidden { display: none !important; }
.center-text { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.no-margin-bottom { margin-bottom: 0; }

/* ---------- 26. Reckoning scope ---------- */
/*
  The Reckoning is the gothic black expression of the brand.
  Apply .reckoning to <body> or a page wrapper to swap the surface tokens.
  Crimson is unlocked here only.
*/

/* The whole site already sits on this dark surface. The .reckoning scope
   adds the crimson undertone that only belongs to the show. */
body.reckoning,
.reckoning {
  background: var(--black);
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(212, 175, 55, 0.06), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(107, 15, 26, 0.12), transparent 70%);
}

body.reckoning .site-nav,
body.reckoning .site-nav.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
}

.reckoning-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.reckoning-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(107, 15, 26, 0.12), transparent 70%),
    radial-gradient(ellipse 70% 50% at 20% 100%, rgba(212, 175, 55, 0.06), transparent 70%);
  pointer-events: none;
}

/* Photographic variant of the Reckoning hero. Add .reckoning-hero--photo to the section
   and an <img class="reckoning-hero__bg"> as its first child. The gradient sits between
   the photo and the copy so the title stays readable over a busy frame. */
.reckoning-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  opacity: var(--hero-photo-opacity);
  filter: var(--hero-photo-filter);
}

.reckoning-hero--photo::before {
  z-index: 1;
  background:
    var(--hero-scrim),
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(107, 15, 26, 0.16), transparent 70%);
}

.reckoning-hero--photo .reckoning-hero__inner {
  z-index: 2;
}

.reckoning-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.reckoning-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
  display: inline-block;
}

.reckoning-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(54px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0 0 var(--s-4);
  text-shadow: 0 1px 60px rgba(212, 175, 55, 0.12);
}

.reckoning-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 900;
}

.reckoning-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--bone);
  max-width: 32ch;
  margin: 0 auto var(--s-5);
  line-height: 1.4;
}

.reckoning-section {
  background: var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-7) 0;
}

.reckoning-section--elev {
  background: var(--black-elev);
}

.reckoning-card {
  background: var(--black-card);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--r-card-lg);
  padding: var(--s-5);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.reckoning-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.reckoning-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto var(--s-4);
  opacity: 0.7;
}

.crimson-accent {
  color: var(--crimson-bright);
}

.embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black-elev);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--r-card-lg);
  overflow: hidden;
}

.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-frame--spotify {
  aspect-ratio: 16 / 9;
}

.embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4);
  color: var(--bone-dim);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(107, 15, 26, 0.08));
}

.embed-placeholder strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--bone);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-1);
}

.tabs {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.tabs button {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: transparent;
  border: 0;
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.tabs button[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tabs button:hover { color: var(--bone); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- 27. Responsive ---------- */

@media (max-width: 960px) {
  section { padding: var(--s-6) 0; }

  .hero { padding: var(--s-5) 0 var(--s-5); }

  .hero--split {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .hero__photo { aspect-ratio: 4 / 3; order: -1; }

  .two-col,
  .two-col--reversed,
  .book-block,
  .split-tiles,
  .principles,
  .today-list {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .topic {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }

  .engine {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .engine__number { font-size: 56px; }

  .engine__meta {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .quote-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stage-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .stage-gallery__item {
    aspect-ratio: 4 / 3;
  }

  .stage-gallery__item:first-child {
    grid-row: auto;
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }

  .site-footer .container {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .site-footer__base {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Mobile nav */
  .nav-toggle { display: block; }

  /* The bar's backdrop-filter makes it a containing block for position: fixed, which
     collapsed the open menu to the height of the bar: the panel painted nothing and the
     links floated over the page. Drop the filter on mobile so the panel resolves against
     the viewport, and make the bar itself opaque since it no longer blurs what's behind. */
  .site-nav,
  .site-nav.is-scrolled,
  body.reckoning .site-nav,
  body.reckoning .site-nav.is-scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-links {
    position: fixed;
    inset: 80px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--s-5) var(--gutter);
    gap: var(--s-3);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    border-top: 1px solid var(--border);
  }

  body.reckoning .nav-links {
    background: var(--bg);
  }

  body.nav-open .nav-links {
    transform: translateX(0);
  }

  /* Stop the page scrolling behind the open menu. */
  body.nav-open {
    overflow: hidden;
  }

  .nav-links a {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--bone);
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-card);
    padding: 8px;
  }

  .form-inline input { text-align: center; }

  .credibility {
    gap: var(--s-3);
  }

  .reckoning-hero { min-height: 70vh; }
}

@media (max-width: 560px) {
  .quote-grid {
    grid-template-columns: 1fr;
  }

  .stage-gallery {
    grid-template-columns: 1fr;
  }

  .stage-gallery__item:first-child {
    grid-column: auto;
  }

  .photo-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 28. Print ---------- */

@media print {
  .site-nav, .site-footer, .nav-toggle, .slider-controls { display: none !important; }
  body { background: white; color: var(--gray-text); }
  body::after { display: none; }
  .bg-navy, .bg-deep, .testimonials, .seen-with, .bg-cream-alt, .bg-alt, .bg-black { background: white !important; color: var(--gray-text) !important; }
}

/* ---------- 29. Full-bleed hero variant ---------- */

.hero--bleed {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: var(--s-7) 0 var(--s-6);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero--bleed .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: var(--hero-photo-opacity);
  filter: var(--hero-photo-filter);
}

.hero--bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: 1;
  pointer-events: none;
}

body.reckoning .hero--bleed::after {
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.6) 0%,
    rgba(107, 15, 26, 0.18) 50%,
    rgba(10, 10, 10, 0.96) 100%);
}

.hero--bleed .hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero--bleed .hero__inner .btn-row {
  justify-content: center;
}

/* ---------- 30. Feature band ---------- */

.feature-band {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.feature-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.4;
  filter: saturate(0.7) contrast(1.1);
}

.feature-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.65) 0%,
    rgba(10, 10, 10, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.feature-band__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--s-7) var(--gutter);
  max-width: 920px;
}

.feature-band__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
  padding: 7px 18px;
  border: 1px solid var(--border-gold);
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px);
}

.feature-band__line {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 900;
  color: var(--bone);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
}

.feature-band__line em {
  color: var(--gold);
  font-style: italic;
}

@media (max-width: 960px) {
  .hero--bleed { min-height: 70vh; }
  .feature-band { min-height: 40vh; }
  .feature-band__inner { padding: var(--s-5) var(--gutter); }
}

/* ---------- 31. Redesign components (Podcast + Speaking) ---------- */

/* Section surfaces: a real navy band and a light bone band, to break the
   all-black rhythm. These are the two new colour grounds. */
.band-navy {
  background: radial-gradient(120% 120% at 0% 0%, var(--navy-elev), var(--navy-deep) 65%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.band-bone {
  background:
    radial-gradient(140% 90% at 50% -10%, #FBF8F1 0%, rgba(251, 248, 241, 0) 55%),
    linear-gradient(180deg, #F6F1E9 0%, #ECE4D6 100%);
  border-top: 1px solid rgba(20, 15, 5, 0.08);
  border-bottom: 1px solid rgba(20, 15, 5, 0.08);
}
.band-bone h1, .band-bone h2, .band-bone h3, .band-bone h4 { color: #161310; }
.band-bone p { color: #514C44; }
.band-bone .eyebrow { color: #9A7B1E; }
.band-bone .section-head p { color: #6A655C; }

/* Floating proof bar. Sits in a plain .container just after a bleed hero
   and pulls up to overlap it. */
.proofbar {
  position: relative;
  z-index: 3;
  margin: -46px auto 0;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-card-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.proofbar__stat {
  padding: 26px 22px;
  text-align: center;
  border-right: 1px solid rgba(245, 240, 232, 0.1);
}
.proofbar__stat:last-child { border-right: 0; }
.proofbar__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--gold-bright);
  line-height: 1;
}
.proofbar__stat span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
@media (max-width: 720px) {
  .proofbar { grid-template-columns: 1fr 1fr; }
  .proofbar__stat:nth-child(2) { border-right: 0; }
  .proofbar__stat:nth-child(1), .proofbar__stat:nth-child(2) { border-bottom: 1px solid rgba(245, 240, 232, 0.1); }
}

/* Numbered guest-topic cards */
.gtopics { display: grid; gap: var(--s-3); }
.gtopic {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: 34px 34px 34px 30px;
  background: linear-gradient(120deg, rgba(245, 240, 232, 0.05), rgba(245, 240, 232, 0.015));
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-card-lg);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.gtopic:hover {
  transform: translateY(-3px);
  border-left-color: var(--gold-bright);
  background: linear-gradient(120deg, rgba(245, 240, 232, 0.08), rgba(245, 240, 232, 0.03));
}
.gtopic__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--gold-soft);
  letter-spacing: -0.03em;
}
.gtopic h3 { margin-bottom: 10px; }
.gtopic p { margin: 0; }
@media (max-width: 600px) {
  .gtopic { grid-template-columns: 1fr; gap: var(--s-2); padding: 26px 24px; }
}

.also-note {
  margin-top: var(--s-5);
  padding: 22px 26px;
  border: 1px dashed var(--border-gold);
  border-radius: var(--r-card-lg);
  background: rgba(212, 175, 55, 0.05);
  color: var(--bone-dim);
  font-size: 15.5px;
  max-width: none;
}
.also-note b { color: var(--gold-bright); font-weight: 700; }

/* Sample-question cards (live on a bone section) */
.qcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.qcard {
  background: #FFFDF9;
  border: 1px solid rgba(20, 15, 5, 0.07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 15, 5, 0.05), 0 28px 52px -34px rgba(20, 15, 5, 0.42);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.qcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(20, 15, 5, 0.06), 0 40px 66px -36px rgba(20, 15, 5, 0.5);
}
.qcard__head {
  padding: 16px 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.qcard--1 .qcard__head { background: linear-gradient(90deg, var(--navy), var(--navy-elev)); }
.qcard--2 .qcard__head { background: linear-gradient(90deg, #9A7B1E, var(--gold)); }
.qcard--3 .qcard__head { background: linear-gradient(90deg, var(--crimson), var(--crimson-bright)); }
.qcard--4 .qcard__head { background: linear-gradient(90deg, #1D1D1D, #3A3A3A); }
.qcard ul { list-style: none; margin: 0; padding: 14px 22px 20px; display: grid; gap: 12px; }
.qcard li {
  position: relative;
  padding-left: 26px;
  color: #161310;
  font-size: 15.5px;
  line-height: 1.45;
}
.qcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
@media (max-width: 760px) { .qcards { grid-template-columns: 1fr; } }

/* What-to-expect cards (live on a navy band) */
.xcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.xcard {
  padding: 30px 26px;
  background: rgba(245, 240, 232, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
}
.xcard__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
}
.xcard h4 { font-family: var(--font-body); font-weight: 700; font-size: 19px; color: var(--bone); margin-bottom: 8px; }
.xcard p { color: var(--bone-dim); font-size: 15.5px; margin: 0; }
@media (max-width: 760px) { .xcards { grid-template-columns: 1fr; } }

/* Full gold CTA moment */
.cta-gold {
  background: radial-gradient(120% 140% at 50% 0%, var(--gold-bright), var(--gold) 55%, #B8922B 100%);
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.cta-gold .eyebrow { color: #5C4708; }
.cta-gold h2 { color: #1A1406; }
.cta-gold p { color: #3A2E0C; max-width: 52ch; margin: var(--s-2) auto var(--s-4); }
.cta-gold .btn-row { justify-content: center; margin-top: 0; }

.btn--ink {
  background: var(--black);
  border-color: var(--black);
  color: var(--bone);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn--ink:hover { background: #000; border-color: #000; color: var(--bone); }

/* Hero centre rule */
.hero-rule { width: 60px; height: 2px; background: var(--gold); margin: 0 auto var(--s-3); }

/* Stage word strip (Speaking) */
.stages { display: flex; flex-wrap: wrap; gap: 14px 42px; align-items: center; justify-content: center; }
.stages span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--bone);
  letter-spacing: -0.01em;
}
.stages .dot { color: var(--gold); font-size: 0.6em; vertical-align: middle; }

/* Speaking topic list (live on a bone section) */
.sp-list { display: grid; }
.sp-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--s-5);
  padding: 30px 0;
  border-top: 1px solid #E0D8C8;
}
.sp-row:last-child { border-bottom: 1px solid #E0D8C8; }
.sp-row h3 { color: #161310; margin: 0; }
.sp-row .best { margin-top: 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #9A7B1E; font-weight: 700; }
.sp-row p { color: #4A4640; margin: 0; }
@media (max-width: 720px) { .sp-row { grid-template-columns: 1fr; gap: var(--s-2); } }

/* Standalone proof/stat bar (not overlapping a hero) */
.proofbar--flat { margin-top: 0; }

/* Reusable responsive card grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Dark content card (for black/navy sections) */
.dcard {
  padding: 30px 28px;
  background: rgba(245, 240, 232, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dcard:hover { transform: translateY(-3px); border-color: var(--border-gold); background: rgba(245, 240, 232, 0.06); }
.dcard h3, .dcard h4 { color: var(--bone); }
.dcard p { color: var(--bone-dim); margin: 0; }
.dcard__num { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--gold); line-height: 1; margin-bottom: 14px; }

/* A dcard that is itself a link, used for the route index on the Partner page. The whole
   card is the target, so the arrow inside is a span rather than a nested anchor. Column
   layout with the arrow pushed to the bottom keeps the arrows aligned across the row when
   the copy runs to different lengths. */
.route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: inherit;
}
.route-card h4 { margin: 0; }
.route-card .link-arrow { margin-top: auto; padding-top: 6px; }
.route-card:hover .link-arrow { color: var(--gold-bright); border-color: var(--gold-bright); }

/* The nav is sticky, so anchored sections need to clear it when jumped to. */
#equity, #acquisition, #capital { scroll-margin-top: 80px; }

/* Light content card (for bone sections) */
.lcard {
  position: relative;
  padding: 34px 32px;
  background: #FFFDF9;
  border: 1px solid rgba(20, 15, 5, 0.07);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 15, 5, 0.05), 0 28px 52px -34px rgba(20, 15, 5, 0.42);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(20, 15, 5, 0.06), 0 40px 66px -36px rgba(20, 15, 5, 0.5);
}
.lcard h3, .lcard h4 { color: #161310; }
.lcard p { color: #514C44; margin: 0; }
.lcard h3 + p, .lcard h4 + p { margin-top: 10px; }
.lcard__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--gold-soft);
  line-height: 0.9;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

/* Bullet list on a bone section */
.band-bone .bullet-list li { color: #161310; }
.band-bone .bullet-list li::before { background: var(--gold); }

/* Quote cards on a bone section */
.band-bone .quote-card {
  background: #FFFDF9;
  border-color: rgba(20, 15, 5, 0.07);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 15, 5, 0.05), 0 28px 52px -34px rgba(20, 15, 5, 0.42);
}
.band-bone .quote-card:hover { border-color: var(--border-gold); box-shadow: 0 2px 6px rgba(20, 15, 5, 0.06), 0 40px 66px -36px rgba(20, 15, 5, 0.5); }
.band-bone .quote-card blockquote { color: #211D18; }
.band-bone .quote-card cite { color: #6A655C; }
.band-bone .quote-card__mark { color: #C6A02E; opacity: 1; }

/* Aside note on a bone section */
.band-bone .also-note { color: #514C44; border-color: rgba(20, 15, 5, 0.2); background: rgba(212, 175, 55, 0.1); }
.band-bone .also-note b { color: #9A7B1E; }

/* Topic-row list reads crisper on the elevated cream */
.band-bone .sp-row { border-color: rgba(20, 15, 5, 0.1); }

/* The Reckoning: large centred pull-quote */
.reckoning-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.reckoning-quote__rule { display: block; width: 48px; height: 2px; background: var(--crimson-bright); margin: 0 auto var(--s-4); }
.reckoning-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-wrap: balance;
}
.reckoning-quote blockquote .qm { color: var(--crimson-bright); }
.reckoning-quote cite {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}