/*
Theme Name: ACE CDL Academy
Theme URI: https://acecdl.academy
Author: ACE CDL Academy
Description: Custom single-page WordPress theme for ACE CDL Academy.
Version: 1.3.5
Text Domain: ace-cdl-academy
*/

:root {
  --ink: #090a08;
  --panel: #111310;
  --paper: #f4efe5;
  --cream: #e8dfd0;
  --yellow: #f5d641;
  --red: #e31313;
  --muted: #aaa89f;
  --line: rgba(255, 255, 255, 0.14);
  font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
  color: var(--paper);
  background: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); }
body.admin-bar .site-header { top: 32px; }
a { color: inherit; }
button, input, textarea { font: inherit; }
img { max-width: 100%; }
::selection { color: #111; background: var(--yellow); }

.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .8rem 1rem; color: #111; background: var(--yellow); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 90; top: 1rem; left: 50%; width: min(94vw, 88rem); transform: translateX(-50%); }
.nav { display: grid; grid-template-columns: minmax(13rem,1fr) auto minmax(13rem,1fr); align-items: center; gap: 2rem; min-height: 4.9rem; padding: .5rem .65rem .5rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(9,10,8,.78); box-shadow: 0 1.4rem 4rem rgba(0,0,0,.32); backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: .65rem; width: fit-content; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .12em; line-height: 1.1; text-decoration: none; text-transform: uppercase; }
.brand img { width: 2.85rem; height: 3.45rem; object-fit: contain; filter: drop-shadow(0 0 .7rem rgba(227,19,19,.3)); }
.brand span { max-width: 8.5rem; }
.nav-links { display: flex; justify-content: center; gap: clamp(1rem,2.5vw,2.5rem); }
.nav-links a { color: rgba(255,255,255,.72); font-size: .86rem; text-decoration: none; }
.nav-links a:hover, .nav-links a:focus-visible { color: #fff; }
.nav-cta { justify-self: end; display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.15rem; border-radius: .7rem; color: #111; background: var(--yellow); font-size: .82rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.menu-toggle { display: none; justify-self: end; width: 3.2rem; height: 3.2rem; border: 1px solid var(--line); border-radius: .7rem; color: #fff; background: transparent; font-size: 1.4rem; cursor: pointer; }
.mobile-nav { display: none; margin-top: .6rem; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(9,10,8,.96); }
.mobile-nav.is-open { display: grid; }
.mobile-nav a { padding: .85rem; text-decoration: none; }

.hero { position: relative; display: grid; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero-media, .hero-overlay, .hero-grain { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { background: linear-gradient(180deg,rgba(5,6,5,.55),rgba(5,6,5,.82) 75%,#090a08), radial-gradient(circle at 50% 35%,transparent,rgba(0,0,0,.6)); }
.hero-grain { opacity: .18; background-image: radial-gradient(rgba(255,255,255,.35) .6px, transparent .7px); background-size: 4px 4px; mix-blend-mode: soft-light; }
.hero-inner { position: relative; z-index: 2; display: flex; align-self: center; flex-direction: column; align-items: center; width: min(94vw,90rem); margin: 0 auto; padding: 9.5rem 0 7rem; text-align: center; }
.hero-logo { width: clamp(7.4rem,11vw,10rem); margin-bottom: 1.25rem; filter: drop-shadow(0 1.4rem 2.6rem rgba(0,0,0,.55)); }
.eyebrow, .kicker, .overline { margin: 0 0 1.3rem; color: var(--yellow); font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(3.7rem,8.7vw,8.8rem); font-weight: 600; letter-spacing: -.055em; line-height: .84; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero-copy { max-width: 39rem; margin: 2rem auto 0; color: rgba(255,255,255,.72); font-size: clamp(1.05rem,1.8vw,1.3rem); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0 1.35rem; border: 1px solid rgba(255,255,255,.25); border-radius: .75rem; color: #fff; font-weight: 700; text-decoration: none; }
.button.primary { border-color: var(--yellow); color: #111; background: var(--yellow); }
.hero-foot { position: absolute; z-index: 3; right: 4vw; bottom: 2rem; left: 4vw; display: flex; justify-content: space-between; color: rgba(255,255,255,.48); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.section { padding: clamp(5rem,9vw,9rem) 4vw; }
.shell { width: min(92vw,82rem); margin: 0 auto; }
.section h2 { max-width: 64rem; margin: 0; font-size: clamp(2.7rem,6vw,6.2rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; text-transform: uppercase; }
.lead { max-width: 44rem; margin: 2rem 0 0 auto; color: rgba(255,255,255,.62); font-size: 1.1rem; line-height: 1.65; }

.program { background: radial-gradient(circle at 18% 20%,rgba(245,214,65,.08),transparent 28rem),#090a08; }
.cards { display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; margin-top: 4rem; }
.card { display: flex; min-height: 22rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.4rem; overflow: hidden; flex-direction: column; justify-content: space-between; }
.card.large { grid-column: span 7; }
.card.small { grid-column: span 5; }
.card.dark { background: linear-gradient(145deg,#171915,#0b0c0a); }
.card.red { background: radial-gradient(circle at 90% 12%,rgba(227,19,19,.45),transparent 18rem),#18110f; }
.card.light { color: #151612; background: var(--paper); }
.card.cream { color: #151612; background: var(--cream); }
.card .icon { color: var(--yellow); font-size: 2.4rem; }
.card.light .icon, .card.cream .icon { color: #a58d16; }
.card h3 { max-width: 28rem; margin: 1.5rem 0 .8rem; font-size: clamp(1.75rem,3vw,3rem); line-height: 1; }
.card p { max-width: 34rem; margin: 0; opacity: .72; line-height: 1.6; }
.card a { margin-top: 1.5rem; font-weight: 700; text-decoration: none; }
.checks { display: grid; gap: .8rem; padding: 0; list-style: none; }
.checks li::before { content: "✓"; margin-right: .7rem; font-weight: 900; }

.chapters { background: #11120f; }
.heading-row { display: grid; grid-template-columns: 1.4fr .6fr; gap: 4rem; align-items: end; }
.heading-row > p { margin: 0; color: rgba(255,255,255,.6); line-height: 1.6; }
.chapter-list { display: grid; grid-template-columns: repeat(4,1fr); min-height: 32rem; margin-top: 4rem; border-radius: 1.4rem; overflow: hidden; }
.chapter { position: relative; display: flex; padding: 1.5rem; border: 0; border-right: 1px solid rgba(255,255,255,.14); color: #fff; background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.88)),url("assets/images/training-yard-hero.png") center/cover; cursor: pointer; flex-direction: column; justify-content: space-between; text-align: left; transition: flex .35s,filter .35s; filter: saturate(.55) brightness(.72); }
.chapter.is-active { filter: none; }
.chapter strong { font-size: 1.5rem; line-height: 1.05; }
.chapter-copy { max-height: 0; overflow: hidden; opacity: 0; transition: .35s; }
.chapter.is-active .chapter-copy { max-height: 15rem; opacity: 1; }
.chapter-copy span { display: block; margin-top: .6rem; color: rgba(255,255,255,.7); line-height: 1.55; }

.journey { background: #0b0c0a; }
.journey-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 6vw; }
.journey-intro { position: sticky; top: 8rem; align-self: start; }
.journey-intro p:last-child { max-width: 34rem; color: rgba(255,255,255,.6); line-height: 1.65; }
.stack { display: grid; gap: 1rem; }
.step { min-height: 20rem; padding: 2.2rem; border: 1px solid var(--line); border-radius: 1.3rem; background: linear-gradient(145deg,#171915,#0e0f0c); }
.step-top { display: flex; justify-content: space-between; color: var(--yellow); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.step h3 { margin: 5rem 0 .8rem; font-size: clamp(2rem,4vw,3.8rem); line-height: .95; }
.step p { max-width: 34rem; color: rgba(255,255,255,.62); line-height: 1.6; }
.wide-image { margin-top: 6rem; }
.wide-image img { width: 100%; max-height: 42rem; border-radius: 1.5rem; object-fit: cover; filter: brightness(.78); }
.wide-image figcaption { margin-top: .8rem; color: rgba(255,255,255,.4); font-size: .72rem; }

.questions { color: #161712; background: var(--paper); }
.questions .kicker { color: #8a7510; }
.question-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; }
.question-box { padding: 2.5rem; border: 1px solid rgba(0,0,0,.15); border-radius: 1.3rem; background: #fff; }
.question-count { color: #8c7918; font-weight: 800; }
.question-text { margin: 2rem 0 1rem; font-size: clamp(1.7rem,3vw,2.8rem); font-weight: 600; line-height: 1.08; }
.answer { color: rgba(0,0,0,.62); line-height: 1.65; }
.question-controls { display: flex; gap: .6rem; margin-top: 2rem; }
.question-controls button { width: 3rem; height: 3rem; border: 1px solid rgba(0,0,0,.22); border-radius: 50%; background: transparent; cursor: pointer; }

.contact { position: relative; overflow: hidden; background: #090a08; }
.contact::before { position: absolute; width: 38rem; height: 38rem; top: -18rem; right: -10rem; border-radius: 50%; background: rgba(227,19,19,.18); filter: blur(80px); content: ""; }
.contact-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; }
.contact-lead { max-width: 37rem; color: rgba(255,255,255,.58); line-height: 1.65; }
.contact-form { display: grid; gap: 1rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.3rem; background: rgba(255,255,255,.035); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label { display: grid; gap: .5rem; color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: .6rem; padding: .9rem; color: #fff; background: rgba(255,255,255,.05); outline: none; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--yellow); }
.contact-form button { min-height: 3.5rem; border: 0; border-radius: .65rem; color: #111; background: var(--yellow); font-weight: 800; cursor: pointer; }
.form-note, .form-status { margin: 0; color: rgba(255,255,255,.45); font-size: .76rem; line-height: 1.5; }

.footer { padding: 5rem 4vw 2rem; border-top: 1px solid var(--line); background: #070806; }
.footer-main { display: grid; grid-template-columns: minmax(12rem,.75fr) 1fr auto; gap: 4rem; width: min(92vw,82rem); margin: 0 auto 4rem; }
.footer-brand { display: flex; align-items: center; gap: .8rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.footer-brand img { width: 4.4rem; }
.footer-brand span { max-width: 8rem; line-height: 1.15; }
.footer-main > p { max-width: 30rem; margin: 0; color: rgba(255,255,255,.52); line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.footer-links a { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-legal { display: flex; justify-content: space-between; gap: 3rem; width: min(92vw,82rem); margin: 0 auto; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.footer-legal p { max-width: 38rem; margin: 0; color: rgba(255,255,255,.35); font-size: .7rem; line-height: 1.55; }

@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .heading-row, .journey-grid, .question-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .journey-intro { position: static; }
  .chapter-list { grid-template-columns: 1fr 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > p { grid-column: 1/-1; grid-row: 2; }
}

@media (max-width: 720px) {
  body.admin-bar .site-header { top: 46px; }
  .site-header { top: .6rem; }
  .nav { min-height: 4rem; padding: .3rem .35rem .3rem .75rem; }
  .brand img { width: 2.35rem; height: 2.9rem; }
  .brand span { max-width: 6.8rem; font-size: .68rem; }
  .hero-inner { align-items: flex-start; padding-top: 8.5rem; text-align: left; }
  .hero-logo { width: 6.8rem; }
  .hero h1 { font-size: clamp(3.1rem,14vw,5.2rem); line-height: .93; }
  .hero-copy { margin-left: 0; }
  .actions, .button { width: 100%; }
  .hero-foot { display: none; }
  .card.large, .card.small { grid-column: 1/-1; }
  .card { min-height: 19rem; }
  .chapter-list { grid-template-columns: 1fr; }
  .chapter { min-height: 15rem; }
  .field-row { grid-template-columns: 1fr; }
  .footer-main, .footer-legal { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .footer-main > p { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Titanium + red brand direction */
:root {
  --paper: #edf0f2;
  --cream: #aeb4b9;
  --yellow: #f01812;
  --red: #f01812;
  --titanium: #cbd0d4;
  --titanium-dark: #656b70;
  --line: rgba(218, 224, 228, .22);
}

body {
  background:
    radial-gradient(circle at 15% 12%, rgba(240, 24, 18, .1), transparent 24rem),
    repeating-linear-gradient(105deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    #080909;
}

::selection { color: #fff; background: var(--red); }

.nav {
  border-color: rgba(224, 230, 234, .34);
  background: linear-gradient(120deg, rgba(8,9,10,.94), rgba(48,51,54,.84) 48%, rgba(8,9,10,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 1.2rem 3.5rem rgba(0,0,0,.5), 0 0 1.4rem rgba(240,24,18,.08);
}

.nav::after {
  position: absolute;
  right: 1rem;
  bottom: -1px;
  left: 1rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 12px rgba(240,24,18,.9);
  content: "";
}

.nav-cta,
.button.primary,
.contact-form button {
  border-color: #ff514c;
  color: #fff;
  background: linear-gradient(180deg, #ff2a24, #b70703);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 1.2rem rgba(240,24,18,.35);
}

.hero { min-height: clamp(42rem, 56.25vw, 68rem); background: #050505; }
.hero-media { inset: 0; }
.hero-media img { object-position: center; filter: contrast(1.05) saturate(1.05); }
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 38%, rgba(0,0,0,.76) 100%),
    linear-gradient(90deg, transparent 48%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.32));
}
.hero-grain { opacity: .09; }
.hero-inner {
  align-self: end;
  align-items: flex-end;
  width: min(92vw, 88rem);
  padding: 8rem 0 4.8rem;
  text-align: right;
}
.hero-inner > * { max-width: 31rem; }
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: 0 3px 20px #000;
}
.hero-copy { margin: 1.15rem 0 0; color: rgba(255,255,255,.82); }
.hero .eyebrow { margin-bottom: .9rem; color: #ff322c; text-shadow: 0 0 14px rgba(240,24,18,.7); }
.actions { justify-content: flex-end; margin-top: 1.35rem; }
.button { border-color: rgba(218,224,228,.45); background: linear-gradient(180deg, rgba(81,86,90,.7), rgba(20,21,22,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }

.kicker, .overline, .card .icon, .step-top { color: #ff322c; }
.program,
.journey,
.contact {
  background:
    linear-gradient(110deg, rgba(255,255,255,.025), transparent 32%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.016) 0 1px, transparent 1px 8px),
    #080909;
}
.chapters { background: linear-gradient(135deg, #151719, #070808 70%); }
.card,
.step,
.contact-form {
  border-color: rgba(218,224,228,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1.25rem 3rem rgba(0,0,0,.3);
}
.card.dark,
.step { background: linear-gradient(145deg, #2d3033 0%, #111213 45%, #080909 100%); }
.card.red { background: radial-gradient(circle at 84% 14%, rgba(240,24,18,.52), transparent 17rem), linear-gradient(145deg,#292c2e,#090a0b); }
.card.light { color: #111; background: linear-gradient(135deg, #f3f5f6, #aeb4b9); }
.card.cream { color: #111; background: linear-gradient(145deg, #dfe3e5, #7d8388); }
.chapter { border-color: rgba(227,232,235,.25); box-shadow: inset 0 -2px 0 rgba(240,24,18,.32); }
.chapter.is-active { box-shadow: inset 0 -3px 0 var(--red), inset 0 0 3rem rgba(240,24,18,.18); }
.wide-image img { border: 1px solid rgba(218,224,228,.32); box-shadow: 0 0 0 1px #050505, 0 1.5rem 4rem rgba(0,0,0,.55); }
.questions { color: #111; background: linear-gradient(135deg, #f1f3f4, #9ea4a9 60%, #6e7479); }
.questions .kicker, .question-count { color: #b40703; }
.question-box { border-color: rgba(255,255,255,.55); background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(210,214,217,.68)); box-shadow: inset 0 1px 0 #fff, 0 1rem 3rem rgba(0,0,0,.18); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,24,18,.16); }
.footer { background: linear-gradient(145deg,#161819,#050505 65%); }

@media (max-width: 720px) {
  .hero { min-height: 48rem; }
  .hero-media img { object-position: 27% center; }
  .hero-overlay { background: linear-gradient(180deg, transparent 24%, rgba(0,0,0,.22) 50%, #060707 86%); }
  .hero-inner { align-items: flex-start; padding: 27rem 0 3rem; text-align: left; }
  .hero-inner > * { max-width: 100%; }
  .hero h1 { font-size: clamp(2.8rem,13vw,4.8rem); }
  .actions { justify-content: flex-start; }
}

/* Keep the supplied banner unobstructed and fully visible at every width. */
.hero {
  display: block;
  min-height: 0;
  padding-top: min(52.45vw, 57rem);
  overflow: hidden;
}
.hero-media,
.hero-overlay,
.hero-grain {
  inset: 0 0 auto;
  height: min(52.45vw, 57rem);
}
.hero-media img {
  object-fit: contain;
  object-position: center top;
}
.hero-overlay {
  background: linear-gradient(180deg, transparent 70%, #080909 100%);
}
.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: clamp(2.8rem, 5vw, 5rem) 4vw;
  border-top: 1px solid rgba(224,230,234,.22);
  background: linear-gradient(115deg, #080909, #24272a 52%, #080909);
  text-align: center;
}
.hero-inner::before {
  position: absolute;
  top: -2px;
  right: 8vw;
  left: 8vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f01812, transparent);
  box-shadow: 0 0 18px rgba(240,24,18,.85);
  content: "";
}
.hero-inner > * { max-width: 48rem; }
.hero-copy { margin-right: auto; margin-left: auto; }
.actions { justify-content: center; }
.hero-foot { display: none; }

@media (max-width: 720px) {
  .hero {
    min-height: 0;
    padding-top: 52.45vw;
  }
  .hero-media,
  .hero-overlay,
  .hero-grain { height: 52.45vw; }
  .hero-media img {
    object-fit: contain;
    object-position: center top;
  }
  .hero-inner {
    align-items: center;
    padding: 2.4rem 6vw 3rem;
    text-align: center;
  }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .actions { justify-content: center; }
}

/* Right-offset, half-width desktop navigation. */
@media (min-width: 1180px) {
  .site-header {
    right: 3vw;
    left: auto;
    width: min(50vw, 50rem);
    transform: none;
  }
  .nav {
    grid-template-columns: auto 1fr auto;
    gap: clamp(.8rem, 1.4vw, 1.4rem);
    padding-left: .8rem;
  }
  .nav-links { gap: clamp(.75rem, 1.25vw, 1.35rem); }
  .brand span { max-width: 6.5rem; font-size: .7rem; }
  .nav-cta { padding-right: .9rem; padding-left: .9rem; white-space: nowrap; }
}

/* Continuous dark-road canvas and titanium playing-card chapters. */
body {
  position: relative;
  isolation: isolate;
  background: #050606;
}
body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 22%, transparent 78%, rgba(0,0,0,.72)),
    repeating-linear-gradient(103deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, #080909 0 18%, #131516 18% 82%, #080909 82%);
  content: "";
}
body::after {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: .28rem;
  background: repeating-linear-gradient(180deg, rgba(225,229,231,.25) 0 3.5rem, transparent 3.5rem 7rem);
  box-shadow: 0 0 1.2rem rgba(255,255,255,.06);
  content: "";
  transform: translateX(-50%);
}
.program,.chapters,.journey,.questions,.contact,.footer {
  position: relative;
  background: rgba(5,6,6,.84);
  backdrop-filter: blur(1px);
}
.chapters,.journey,.contact { background: rgba(8,9,9,.78); }
.questions { color: #f2f4f5; background: rgba(9,10,10,.88); }
.questions .kicker,.question-count { color: #ff322c; }
.question-box {
  border-color: rgba(221,226,229,.28);
  color: #f4f5f6;
  background: linear-gradient(145deg,rgba(70,74,77,.88),rgba(12,13,14,.94));
}
.answer { color: rgba(255,255,255,.68); }
.question-controls button { border-color: rgba(255,255,255,.28); color: #fff; }

.hero-inner {
  align-items: flex-start;
  text-align: left;
}
.hero-inner > * { margin-right: 0; margin-left: 0; }
.hero-copy { margin-right: 0; margin-left: 0; }
.actions { justify-content: flex-start; }

.chapter-list {
  gap: 1rem;
  overflow: visible;
  transition: grid-template-columns .65s cubic-bezier(.16,1,.3,1);
}
.chapter-list:has(.chapter:nth-child(1).is-active) { grid-template-columns: 2.8fr 1fr 1fr 1fr; }
.chapter-list:has(.chapter:nth-child(2).is-active) { grid-template-columns: 1fr 2.8fr 1fr 1fr; }
.chapter-list:has(.chapter:nth-child(3).is-active) { grid-template-columns: 1fr 1fr 2.8fr 1fr; }
.chapter-list:has(.chapter:nth-child(4).is-active) { grid-template-columns: 1fr 1fr 1fr 2.8fr; }
.chapter {
  min-width: 0;
  border: 2px solid #9ca2a7;
  border-radius: 1.35rem;
  background:
    linear-gradient(135deg,rgba(255,255,255,.19),transparent 28%),
    repeating-linear-gradient(102deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px),
    linear-gradient(145deg,#777d82,#24272a 42%,#0b0c0d 88%);
  box-shadow: inset 0 0 0 3px #111, inset 0 0 0 4px rgba(235,239,241,.45), inset 0 1px 0 rgba(255,255,255,.7), 0 1.5rem 3rem rgba(0,0,0,.45);
  filter: none;
  transform: translateY(0);
}
.chapter::before {
  position: absolute;
  top: 2.65rem;
  left: 1.45rem;
  color: #f01812;
  font-size: 1.3rem;
  text-shadow: 0 0 .75rem rgba(240,24,18,.75);
  content: "♠";
}
.chapter::after {
  position: absolute;
  right: .9rem;
  bottom: .8rem;
  color: rgba(240,24,18,.7);
  font-size: 1.2rem;
  content: "♠";
  transform: rotate(180deg);
}
.chapter.is-active {
  border-color: #e7ebed;
  box-shadow: inset 0 0 0 3px #111, inset 0 0 0 4px rgba(255,255,255,.72), inset 0 1px 0 #fff, 0 0 1.8rem rgba(240,24,18,.24), 0 1.8rem 4rem rgba(0,0,0,.55);
  transform: translateY(-.7rem);
}
.chapter > span:first-child { color: #f5f6f7; font-size: 1.1rem; font-weight: 900; }
.chapter-copy { z-index: 2; }

@media (max-width: 720px) {
  body::after { opacity: .45; }
  .chapter-list,
  .chapter-list:has(.chapter:nth-child(1).is-active),
  .chapter-list:has(.chapter:nth-child(2).is-active),
  .chapter-list:has(.chapter:nth-child(3).is-active),
  .chapter-list:has(.chapter:nth-child(4).is-active) {
    grid-template-columns: 1fr;
  }
  .chapter.is-active { transform: none; }
}

/* v1.2.1 — one continuous futuristic road canvas. */
body {
  position: relative;
  isolation: isolate;
  background: #030404;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0 7%, transparent 24% 76%, rgba(0,0,0,.9) 93% 100%),
    linear-gradient(90deg, transparent 15.8%, rgba(240,24,18,.42) 16%, rgba(255,111,106,.12) 16.12%, transparent 16.3% 83.7%, rgba(255,111,106,.12) 83.88%, rgba(240,24,18,.42) 84%, transparent 84.2%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.028) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, #050606 0 16%, #17191a 16% 50%, #121415 50% 84%, #050606 84% 100%);
  box-shadow: inset 0 0 9rem rgba(0,0,0,.78);
  content: "";
}

body::after {
  position: fixed;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: .32rem;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(230,234,236,.56) 0 3.8rem, transparent 3.8rem 7.8rem);
  box-shadow: 0 0 1.4rem rgba(255,255,255,.13);
  content: "";
  transform: translateX(-50%);
}

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

.site-header { position: fixed; z-index: 90; }
.hero { background: transparent; }

.hero-inner,
.program,
.chapters,
.journey,
.questions,
.contact,
.footer {
  border-top: 1px solid rgba(225,230,233,.22);
  background:
    linear-gradient(112deg, rgba(255,255,255,.045), transparent 28%, rgba(240,24,18,.025) 72%, transparent),
    rgba(5,6,7,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 2px 0 rgba(240,24,18,.1),
    0 -1rem 4rem rgba(0,0,0,.22);
  backdrop-filter: blur(3px) saturate(1.15);
}

.hero-inner { background: linear-gradient(115deg, rgba(5,6,7,.76), rgba(37,40,42,.68) 52%, rgba(5,6,7,.76)); }
.chapters,
.journey,
.contact { background-color: rgba(7,8,9,.54); }
.questions { color: #f2f4f5; background-color: rgba(9,10,11,.6); }

.program h2,
.chapters h2,
.journey h2,
.questions h2,
.contact h2 {
  color: #e8ecef;
  text-shadow: 0 1px 0 #fff, 0 5px 18px rgba(0,0,0,.72), 0 0 1.6rem rgba(240,24,18,.08);
}

@media (max-width: 980px) {
  .site-header {
    right: .65rem;
    left: auto;
    width: min(84vw, 23rem);
    transform: none;
  }

  .mobile-nav { margin-left: auto; }
}

@media (max-width: 720px) {
  .site-header {
    top: .6rem;
    right: .55rem;
    left: auto;
    width: min(42vw, 10.5rem);
  }

  .nav {
    grid-template-columns: auto auto;
    gap: .3rem;
    min-height: 3.35rem;
    padding: .25rem;
  }

  .brand span { display: none; }
  .brand img { width: 1.8rem; height: 2.35rem; }
  .menu-toggle { width: 2.7rem; height: 2.7rem; }
  .mobile-nav { width: 100%; margin-top: .35rem; padding: .4rem; }
  .mobile-nav a { padding: .65rem .55rem; font-size: .78rem; }

  body.admin-bar .site-header { top: 46px; }

  body::before {
    background:
      linear-gradient(90deg, rgba(0,0,0,.84), transparent 18% 82%, rgba(0,0,0,.84)),
      linear-gradient(90deg, transparent 7.5%, rgba(240,24,18,.4) 7.8%, transparent 8.2% 91.8%, rgba(240,24,18,.4) 92.2%, transparent 92.5%),
      repeating-linear-gradient(103deg, rgba(255,255,255,.026) 0 1px, transparent 1px 7px),
      linear-gradient(90deg, #050606 0 8%, #161819 8% 92%, #050606 92%);
  }
}

/* v1.3.3 — attention-focused instructor experience panel. */
.hero-inner > .hero-experience { max-width: 52rem; }

.hero-experience {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 1.4rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(220, 226, 230, .38);
  border-left: 4px solid #f01812;
  border-radius: .9rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(145deg, rgba(72,77,81,.78), rgba(9,10,11,.9) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 1.8rem rgba(240,24,18,.12), 0 1rem 2.5rem rgba(0,0,0,.3);
}

.hero-experience-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 1rem;
  border-right: 1px solid rgba(255,255,255,.18);
}

.hero-experience-stat strong {
  color: #f4f6f7;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .85;
  text-shadow: 0 0 1.1rem rgba(240,24,18,.35);
}

.hero-experience-stat span {
  margin-top: .65rem;
  color: #ff4a44;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.45;
  text-transform: uppercase;
}

.hero-experience-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -.015em;
}

.hero-experience-copy p {
  margin: .55rem 0 0;
  color: rgba(255,255,255,.8);
  font-size: clamp(.9rem, 1.3vw, 1rem);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .hero-experience { grid-template-columns: 1fr; }
  .hero-experience-stat {
    padding: 0 0 .9rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  .hero-experience-stat strong { font-size: 3.4rem; }
}

/* v1.3 — red semi in the right lane with brighter road markings. */
body::before {
  background-image:
    url("assets/images/red-semi-topdown-banner.png"),
    linear-gradient(90deg, rgba(0,0,0,.9) 0 7%, transparent 24% 76%, rgba(0,0,0,.9) 93% 100%),
    linear-gradient(90deg, transparent 19%, rgba(248,250,251,.95) 19.15%, rgba(255,255,255,.95) 19.45%, transparent 19.65% 80.35%, rgba(255,255,255,.95) 80.55%, rgba(248,250,251,.95) 80.85%, transparent 81%),
    linear-gradient(90deg, transparent 15.8%, rgba(240,24,18,.46) 16%, rgba(255,111,106,.15) 16.12%, transparent 16.3% 83.7%, rgba(255,111,106,.15) 83.88%, rgba(240,24,18,.46) 84%, transparent 84.2%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.032) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, #050606 0 16%, #191b1c 16% 50%, #141617 50% 84%, #050606 84% 100%);
  background-position: 71% 68%, center, center, center, center, center;
  background-size: clamp(12rem, 18vw, 20rem) auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

body::after {
  width: .5rem;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.94) 0 4.2rem, transparent 4.2rem 7.6rem);
  box-shadow: 0 0 .45rem rgba(255,255,255,.72), 0 0 1.5rem rgba(255,255,255,.22);
}

@media (max-width: 720px) {
  body::before {
    background-image:
      url("assets/images/red-semi-topdown-banner.png"),
      linear-gradient(90deg, rgba(0,0,0,.84), transparent 18% 82%, rgba(0,0,0,.84)),
      linear-gradient(90deg, transparent 12%, rgba(255,255,255,.92) 12.25%, rgba(255,255,255,.92) 12.75%, transparent 13% 87%, rgba(255,255,255,.92) 87.25%, rgba(255,255,255,.92) 87.75%, transparent 88%),
      linear-gradient(90deg, transparent 7.5%, rgba(240,24,18,.44) 7.8%, transparent 8.2% 91.8%, rgba(240,24,18,.44) 92.2%, transparent 92.5%),
      repeating-linear-gradient(103deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px),
      linear-gradient(90deg, #050606 0 8%, #17191a 8% 50%, #131516 50% 92%, #050606 92%);
    background-position: 72% 72%, center, center, center, center, center;
    background-size: clamp(7.25rem, 30vw, 9.5rem) auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }

  body::after {
    width: .42rem;
    opacity: .9;
  }
}