/* ==========================================================================
   Legacy Training & Consulting Group — Stylesheet (Red / Gold / White theme)
   ========================================================================== */

:root {
  --white: #ffffff;
  --cream: #faf7f0;
  --charcoal: #1c1a17;
  --charcoal-2: #262320;
  --ink: #262421;
  --text-muted: #6b665e;
  --gold: #c9a227;
  --gold-dark: #a8841f;
  --gold-light: #e7c866;
  --gold-tint: #fbf1d8;
  --red: #a8232b;
  --red-dark: #841c22;
  --red-tint: #f8e6e4;
  --border: #ece4d3;
  --shadow: 0 12px 30px rgba(28, 26, 23, 0.08);
  --shadow-lg: 0 20px 45px rgba(28, 26, 23, 0.14);
  --radius: 12px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--white);
  color: var(--ink);
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: 'Oswald', 'Segoe UI', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  margin: 0 0 16px;
  line-height: 1.2;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 16px; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--gold-dark); }

img { max-width: 100%; display: block; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.section { padding: 76px 0; }
.section-cream { background: var(--cream); }

.section-tag {
  display: inline-block;
  color: var(--red);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Wider than the old 740px so intro sentences sit on one line on desktop.
   text-wrap:balance keeps any line that must wrap from leaving an orphan. */
.section-head { max-width: 1120px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { text-wrap: balance; }
.section-head p { color: var(--text-muted); text-wrap: balance; }

/* Opt-in: hold a specific sentence/headline on a single line on desktop.
   Paragraph sizes verified against rendered width at a 1180px container. */
.fit-line { max-width: none; }
.section-head p.fit-line, p.fit-line { font-size: 0.92rem; text-wrap: balance; }
@media (min-width: 900px) {
  h2.fit-line { white-space: nowrap; }
}
@media (max-width: 899px) {
  h2.fit-line { white-space: normal; text-wrap: balance; }
}
/* Page-hero intro copy: balanced wrapping, comfortable measure. */
.page-hero p.lead { max-width: 920px; margin: 0 auto; text-wrap: balance; }
/* Services hero: one sentence per line — needs the full container width,
   so it opts out of the 920px measure above. Collapses on narrow screens. */
.page-hero p.lead.lead-lines {
  max-width: none;
  font-size: 0.94rem;      /* sized so sentence 1 holds one line at 1180px */
  text-wrap: wrap;         /* must override the balanced default above */
  text-wrap-style: auto;
}
@media (max-width: 900px) {
  .page-hero p.lead.lead-lines { font-size: 0.95rem; }
  .lead-lines br { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 14px 30px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--charcoal); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--charcoal); }
.btn-red { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--white); }
.btn-red:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--white); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--charcoal); }
.btn-outline-dark { background: transparent; border-color: var(--charcoal); color: var(--charcoal); }
.btn-outline-dark:hover { background: var(--charcoal); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Thin Line (First Responder tribute strip) ---------- */
.thin-line-bar {
  display: flex;
  height: 5px;
  width: 100%;
}
.thin-line-bar span { flex: 1; }
.thin-line-bar .l-charcoal { background: var(--charcoal); }
.thin-line-bar .l-red { background: var(--red); }
.thin-line-bar .l-gold { background: var(--gold); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--charcoal) 0 20%, var(--red) 20% 80%, var(--gold) 80% 100%);
}
.nav-wrap { max-width: var(--max-width); margin: 0 auto; padding: 4px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 158px; width: auto; }
@media (max-width: 880px) {
  .brand img { height: 108px; }
}
@media (max-width: 480px) {
  .brand img { height: 66px; }
}

.header-phone {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.05rem;
  color: var(--charcoal); white-space: nowrap; margin-right: 8px;
}
.header-phone .ic { color: var(--red); font-size: 1.2rem; }
.header-phone span.label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; font-family: 'Inter', sans-serif; font-weight: 400; }
@media (max-width: 1080px) { .header-phone { display: none; } }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--ink);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color: var(--red); border-bottom-color: var(--gold); }
.nav-cta {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 5px;
  border-bottom: none !important;
}
.nav-toggle { display: none; background: none; border: none; color: var(--charcoal); font-size: 1.6rem; cursor: pointer; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 10px 24px 20px; display: none;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-cta { margin-top: 8px; text-align: center; }
}

/* ---------- Trust badge strip ---------- */
.trust-strip { background: var(--charcoal); padding: 14px 0; }
.trust-strip .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.trust-strip .item {
  display: flex; align-items: center; gap: 8px;
  color: var(--gold-light);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.trust-strip .item span.dot { color: var(--red); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(120deg, rgba(28,26,23,0.85), rgba(28,26,23,0.6) 60%, rgba(168,35,43,0.55)), url('../images/hero-banner-home.jpg');
  background-size: cover;
  background-position: center 30%;
  padding: 110px 0 90px;
  text-align: center;
  color: var(--white);
}
.hero h1 { color: var(--white); }
.hero .section-tag { color: var(--gold-light); }
.hero p.lead { max-width: 700px; margin: 0 auto 30px; font-size: 1.15rem; color: #f1efe9; }
.hero .btn-row { justify-content: center; }

.hero-tagline {
  max-width: 1100px;
  margin: 0 auto 18px;
  /* sized so the full tagline holds one line on desktop */
  font-size: clamp(1.4rem, 3.15vw, 2.25rem);
  line-height: 1.25;
  text-wrap: balance;
}
.hero-subhead {
  color: var(--gold-light);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin-bottom: 22px;
  font-weight: 500;
}

.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }
.hero-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(231,200,102,0.6);
  color: var(--white);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  border-radius: 20px;
}

/* ---------- Page banner: beating heart on a cardiac monitor ----------
   Layering, back to front:
     z0  .hero-ecg    full-width monitor trace, sweeping left to right
     z1  ::before     the heart, pulsing
     z2  ::after      scrim that keeps the headline readable
     z3  .container   the copy
   The two animations are locked together by construction - see the
   timing note above @keyframes heart-beat. */
.page-hero {
  padding: 72px 0;
  min-height: 340px;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 42%, #2a2320 0%, #1c1a17 55%, #141210 100%);
  color: var(--white);
}
/* The artwork sits right behind the copy, so the type carries its own
   shadow instead of the scrim being cranked up - a heavier scrim was
   muddying the heart. */
.page-hero h1 {
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0,0,0,0.75), 0 0 22px rgba(0,0,0,0.65);
}
.page-hero .section-tag {
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.8);
}
.page-hero p.lead {
  color: #f1efe9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.7);
}

/* The heart is opt-in via .has-heart (Contact and Register). About and
   Services carry their own banner artwork instead, so they get the plain
   dark gradient and no monitor trace. */
/* The source artwork is cropped at the apex, so the heart is deliberately
   hung past the bottom edge - overflow:hidden takes the flat cut with it. */
.page-hero.has-heart::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -14%;
  height: 132%;
  aspect-ratio: 473 / 700;
  transform: translateX(-50%);
  transform-origin: 50% 62%;
  background-image: url('../images/heart-banner.png');
  background-image: image-set(url('../images/heart-banner.webp') type('image/webp'),
                              url('../images/heart-banner.png')  type('image/png'));
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  filter: drop-shadow(0 0 30px rgba(190, 30, 40, 0.55))
          drop-shadow(0 0 90px rgba(190, 30, 40, 0.45));
  animation: heart-beat 0.8s ease-out 0.625s infinite;
  z-index: 1;
  pointer-events: none;
}
.page-hero.has-heart::after {
  content: '';
  position: absolute; inset: 0;
  /* A wide, flat veil sitting only on the band the copy occupies. A round
     scrim large enough to cover the text also dulled the whole heart. */
  background: radial-gradient(46% 18% at 50% 52%, rgba(16,14,12,0.62) 0%, rgba(16,14,12,0.31) 55%, rgba(16,14,12,0) 100%);
  z-index: 2;
  pointer-events: none;
}
/* width:100% because .page-hero is a flex row - without it the container
   shrinks to its content and the centred copy drifts off-axis. */
.page-hero .container { position: relative; z-index: 3; width: 100%; }

/* ---- photographic page banner (About, Services) ----
   The artwork is a wide 16:9 composite, so it is cover-fitted and pulled to
   the top third: the faces and equipment sit high in both files and a plain
   centre crop cut through them. The scrim is a horizontal gradient rather
   than the heart's flat veil - these images are busy edge to edge and the
   headline needs a consistent floor of contrast behind it. */
.page-hero.has-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-position: center var(--banner-y, 32%);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
/* The fire helmet and Marine cover sit at 50-70% down the source image, so
   this crop is biased well below centre; 32% was showing mostly sky. */
.page-hero.banner-about::before   { background-image: url('../images/about-banner.jpg'); --banner-y: 65%; }
.page-hero.banner-services::before { background-image: url('../images/services-banner.jpg'); }
/* Contact reuses the About artwork and Register reuses the Services artwork,
   at Maria's request. Pointing at the same file rather than duplicating it
   means one download serves both - but see the note in the review: two pages
   sharing a banner is a deliberate choice, not an oversight. */
.page-hero.banner-contact::before  { background-image: url('../images/contact-banner.jpg'); --banner-y: 50%; }
.page-hero.banner-register::before { background-image: url('../images/register-banner.jpg'); --banner-y: 50%; }
.page-hero.has-banner::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(16,14,12,0.62) 0%, rgba(16,14,12,0.40) 40%, rgba(16,14,12,0.72) 100%),
    radial-gradient(58% 42% at 50% 52%, rgba(16,14,12,0.58) 0%, rgba(16,14,12,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.page-hero.has-banner .container { z-index: 3; }

/* ---- monitor trace across the full width of the banner ---- */
.hero-ecg {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 170px;
  width: 100%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}
.hero-ecg-line {
  fill: none;
  stroke: rgba(168, 35, 43, 0.42);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.hero-ecg-sweep {
  fill: none;
  stroke: #ff3b47;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px #ff2b38) drop-shadow(0 0 9px rgba(255, 59, 71, 0.9));
  stroke-dasharray: 120 880;
  animation: hero-ecg-sweep 4s linear infinite;
}
@keyframes hero-ecg-sweep {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Timing, so this stays correct if anyone retunes it:
   the trace carries 5 identical PQRST complexes and its R peaks sit at
   exactly 200 pathLength units apart out of 1000, so at a 4s sweep the
   bright dash crosses one spike every 4 x 200/1000 = 0.8s. The heart runs
   on that same 0.8s period (75 bpm). The dash's leading edge reaches the
   centre spike at t = 1.489s; the heart's contraction peaks 8% into its
   cycle, so a delay of 1.489 - 0.08 x 0.8 = 0.625s (mod 0.8) puts every
   contraction on a spike. Change the sweep duration and this delay must
   be recomputed as (0.8 x crossing - 0.064) mod 0.8. */
@keyframes heart-beat {
  0%   { transform: translateX(-50%) scale(1); }
  8%   { transform: translateX(-50%) scale(1.085); }  /* lub */
  17%  { transform: translateX(-50%) scale(1.012); }
  27%  { transform: translateX(-50%) scale(1.05); }   /* dub */
  40%  { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero.has-heart::before { animation: none; }
  .hero-ecg-sweep { animation: none; stroke-dasharray: none; opacity: 0.9; }
}
@media (max-width: 720px) {
  .page-hero { min-height: 250px; padding: 52px 0; }
  .page-hero.has-heart::before { height: 118%; bottom: -16%; }
  .hero-ecg { height: 110px; }
}

@media (max-width: 720px) {
  .hero { padding: 64px 0 52px; }
  /* .page-hero sizing is set in the banner block above - don't re-declare
     padding here or it overrides the min-height/flex layout. */
  .hero-badge { font-size: 0.66rem; padding: 7px 12px; }
  .hero p.lead, .page-hero p.lead { font-size: 1rem; }
}
@media (max-width: 480px) {
  .section { padding: 52px 0; }
  .btn { padding: 13px 22px; font-size: 0.85rem; }
}

/* ---------- Stats ---------- */
.stats-bar { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 0; }
.stat { text-align: center; }
.stat .num { font-family: 'Oswald', sans-serif; font-size: 2.1rem; color: var(--red); font-weight: 700; }
.stat .label { color: var(--text-muted); text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.07em; }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Hero-inline trust strip / stats (homepage condensed layout) ---------- */
.trust-strip-inline {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(231,200,102,0.35);
  border-radius: 10px;
  padding: 14px 20px;
  margin-top: 34px;
}
.trust-strip-inline.trust-strip .container { padding: 0; }
.stats-grid-inline { margin-top: 20px; padding-top: 0; border-top: none; }
.stats-grid-inline.stats-grid { padding: 20px 0 0; }
.stats-grid-inline .stat .num { color: var(--gold-light); }
.stats-grid-inline .stat .label { color: rgba(255,255,255,0.75); }

/* ---------- Tagline callout ---------- */
.tagline-callout {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-light);
  max-width: 640px;
  margin: 0 auto 28px;
  padding: 12px 0;
  border-top: 1px solid rgba(231,200,102,0.35);
  border-bottom: 1px solid rgba(231,200,102,0.35);
}
@media (max-width: 720px) { .tagline-callout { font-size: 0.98rem; } }

/* ---------- Heartbeat pulse strip ---------- */
/* A glowing neon pulse sweeps left-to-right along the cardiogram trace,
   rising and falling through each peak like a real heart monitor. The dim
   full trace stays visible underneath; the bright dash is the sweep. */
.heartbeat-strip {
  width: 100%;
  height: 34px;
  overflow: hidden;
  background: #140f0f;
  border-bottom: 2px solid var(--gold);
  line-height: 0;
}
.heartbeat-svg { width: 100%; height: 100%; display: block; }
.hb-line {
  fill: none;
  stroke: rgba(168, 35, 43, 0.45);
  stroke-width: 1.6;
}
.hb-sweep {
  fill: none;
  stroke: #ff3b47;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #ff2b38) drop-shadow(0 0 6px rgba(255, 59, 71, 0.85));
  stroke-dasharray: 150 850;
  animation: hb-sweep 4s linear infinite;
}
@keyframes hb-sweep {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-sweep { animation: none; stroke-dasharray: none; opacity: 0.9; }
}

/* ---------- Cards / Grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-5 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold-tint);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 16px; color: var(--red);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-muted); margin-bottom: 0; font-size: 0.95rem; }
.value-card { text-align: center; padding: 26px 16px; }

/* Shield/badge icon variant — first-responder motif */
.icon-badge {
  width: 56px; height: 62px;
  background: linear-gradient(160deg, var(--red), var(--red-dark));
  border: 1px solid var(--gold);
  clip-path: polygon(50% 0%, 100% 15%, 100% 62%, 50% 100%, 0% 62%, 0% 15%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 16px; color: var(--gold-light);
}

/* ---------- Dark section variant ---------- */
.section-dark { background: var(--charcoal); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .section-head p { color: #b4ae9f; }
.section-dark .section-tag { color: var(--gold-light); }
.card-dark {
  background: var(--charcoal-2);
  border: 1px solid rgba(231,200,102,0.25);
  border-top: 3px solid var(--red);
}
.card-dark h3 { color: var(--white); }
.card-dark p { color: #b4ae9f; }

/* Diagonal chevron strip — emergency-vehicle tribute stripe */
.chevron-strip {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(135deg, var(--red) 0 16px, var(--gold) 16px 32px);
}

/* ---------- Photo & Video Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 4/5; box-shadow: var(--shadow);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.82), transparent);
  padding: 26px 16px 14px; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--white);
}
@media (max-width: 720px) { .gallery-grid { grid-template-columns: 1fr; } }

.video-placeholder {
  background: var(--charcoal);
  border-radius: var(--radius);
  border: 1px dashed var(--gold);
  aspect-ratio: 16/9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gold-light);
  text-align: center;
  padding: 30px;
}
.video-placeholder .play {
  width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 14px;
}
.video-placeholder p { color: #cfc9bd; font-size: 0.9rem; max-width: 380px; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 620px;
  margin: 0 auto;
}
.video-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--charcoal);
}
.video-card video {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  display: block;
  background: #000;
}
.video-card .video-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.82), transparent);
  padding: 22px 14px 12px; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--white);
  pointer-events: none;
}
@media (max-width: 560px) {
  .video-grid { grid-template-columns: 1fr; max-width: 320px; }
}

/* ---------- Upcoming Classes (CTA highlight cards) ---------- */
.upcoming-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 44px; }
@media (max-width: 720px) { .upcoming-grid { grid-template-columns: 1fr; } }
.upcoming-card {
  position: relative;
  background: var(--charcoal);
  border: 1px solid rgba(231,200,102,0.3);
  border-radius: var(--radius);
  padding: 30px 28px;
  color: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.upcoming-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(135deg, var(--red) 0 12px, var(--gold) 12px 24px);
}
.upcoming-card .up-tag {
  display: inline-block; background: var(--red); color: var(--white);
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.upcoming-card h3 { color: var(--white); margin-bottom: 6px; }
.upcoming-card .up-date { color: var(--gold-light); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1rem; margin-bottom: 10px; }
.upcoming-card p { color: #cfc9bd; font-size: 0.92rem; margin-bottom: 18px; }

/* ---------- Hero feature checklist ---------- */
.hero-feature-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
.hero-feature-list li { display: flex; align-items: flex-start; gap: 10px; color: #f1efe9; font-size: 0.92rem; }
.hero-feature-list li .chk { color: var(--gold-light); font-weight: 700; flex-shrink: 0; line-height: 1.5; }
/* Title on its own line with the description beneath it. Running them
   inline let the description wrap back under the checkmark, which read as
   though it belonged to the next bullet. */
.hero-feature-list li .feat-body { display: block; }
.hero-feature-list li .feat-body strong {
  display: block;
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 620px) { .hero-feature-list { grid-template-columns: 1fr; } }

/* ---------- Comparison table (vs. competitors) ---------- */
.compare-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--white); }
.compare-table th {
  background: var(--charcoal); color: var(--gold-light); text-transform: uppercase;
  font-family: 'Oswald', sans-serif; font-size: 0.76rem; letter-spacing: 0.07em;
  padding: 18px 16px; text-align: left;
}
.compare-table th:first-child { color: rgba(255,255,255,0.65); }
.compare-table th:last-child { color: var(--white); background: var(--red); }
.compare-table td { padding: 18px 16px; border-bottom: 1px solid var(--border); font-size: 0.92rem; vertical-align: top; }
.compare-table td:first-child {
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.02em;
  color: var(--charcoal); white-space: nowrap;
}
.compare-table tbody tr:nth-child(even) td:not(:last-child) { background: rgba(28,26,23,0.025); }
.compare-table td:last-child { background: var(--gold-tint); font-weight: 600; color: var(--charcoal); position: relative; padding-left: 42px; }
.compare-table td:last-child::before {
  content: '\2713'; position: absolute; left: 15px; top: 18px;
  color: var(--red); font-weight: 700; font-size: 1rem;
}
.compare-table tr:last-child td { border-bottom: none; }

/* ---------- Enlarged icon variants ---------- */
/* Frameless large icon — no circle. The .icon-img artwork fills its whole
   92px box, so the emoji needs a font-size close to that box height to read
   at the same visual size; 3.5rem left it noticeably smaller. */
.icon.icon-lg {
  width: 92px; height: 92px;
  background: none; border: none; border-radius: 0; padding: 0;
  font-size: 5.4rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.icon-badge.icon-badge-lg {
  width: 76px; height: 84px;
  font-size: 2.1rem;
}
@media (max-width: 620px) {
  .icon.icon-lg { width: 74px; height: 74px; font-size: 4.3rem; }
  .icon-badge.icon-badge-lg { width: 64px; height: 70px; font-size: 1.8rem; }
}

/* ---------- Photo-background feature cards ---------- */
/* The photo sits behind a heavy scrim so headline + body copy keep well
   above WCAG AA contrast. Image URL comes from the --card-photo variable
   set inline on each card. If the image fails to load the scrim colour
   remains and the card is still perfectly readable. */
.card-photo {
  position: relative;
  overflow: hidden;
  border-top-color: var(--gold);
  background-color: var(--charcoal);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-photo::before {
  content: '';
  position: absolute; inset: 0;
  /* actual image comes from the .photo-* rules further down */
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 0.5s ease;
}
.card-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,26,23,0.52) 0%, rgba(28,26,23,0.78) 45%, rgba(28,26,23,0.92) 100%);
}
.card-photo:hover::before { transform: scale(1.07); }
.card-photo h3, .card-photo p { position: relative; z-index: 1; }
.card-photo h3 { color: var(--white); }
.card-photo p { color: #e9e5dc; }


/* Image-based icon (supplied brand artwork) — sits in the same slot as the
   emoji icons but with no circular chrome, so the artwork reads cleanly. */
.icon.icon-img {
  width: 92px; height: 92px;
  background: none; border: none; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; padding: 0;
}
.icon.icon-img img { width: 100%; height: 100%; object-fit: contain; }

/* The artwork is gold-on-dark and carries its own dark backdrop, so it is
   framed as a dark chip with a thin gold edge. Restored at Maria's request
   after briefly trying a frameless circular version. */
.icon.icon-img.icon-tile {
  background: var(--charcoal);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(28, 26, 23, 0.18);
}
.icon.icon-img.icon-tile img { object-fit: cover; }
@media (max-width: 620px) {
  .icon.icon-img, .icon.icon-img.icon-tile { width: 74px; height: 74px; }
}
@media (max-width: 620px) { .icon.icon-img { width: 74px; height: 74px; } }

/* Step number badge for photo cards that replaced numbered icons */
.card-photo .step-num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: var(--white);
  font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
/* Dark industry cards already sit on charcoal; keep their photo scrim a touch
   stronger so the smaller body copy stays legible. */
.card-dark.card-photo::after {
  background: linear-gradient(180deg, rgba(28,26,23,0.62) 0%, rgba(28,26,23,0.84) 45%, rgba(28,26,23,0.94) 100%);
}
.card-dark.card-photo h3 { color: var(--white); }
.card-dark.card-photo p { color: #e4e0d7; }


/* Card photo backgrounds.
   Declared here rather than as an inline custom property: a relative url()
   inside a custom property is resolved against whichever sheet declared it,
   which is ambiguous across browsers. Declaring it in this stylesheet makes
   '../images/' resolve predictably every time. */
.photo-home-expert-led-instruction::before { background-image: url('../images/home-expert-led-instruction.jpg'); }
.photo-home-hands-on-training::before { background-image: url('../images/home-hands-on-training.jpg'); }
.photo-home-training-consulting::before { background-image: url('../images/home-training-consulting.jpg'); }
.photo-how-confirm-schedule::before { background-image: url('../images/how-confirm-schedule.jpg'); }
.photo-how-show-up-ready::before { background-image: url('../images/how-show-up-ready.jpg'); }
.photo-how-tell-us::before { background-image: url('../images/how-tell-us.jpg'); }
.photo-ind-healthcare-first-responders::before { background-image: url('../images/ind-healthcare-first-responders.jpg'); }
.photo-ind-schools::before { background-image: url('../images/ind-schools.jpg'); }
.photo-ind-medical-offices::before { background-image: url('../images/ind-medical-offices.jpg'); }
.photo-ind-private-organizations::before { background-image: url('../images/ind-private-organizations.jpg'); }
.photo-ind-individual-learners::before { background-image: url('../images/ind-individual-learners.jpg'); }
.photo-ind-emt-paramedic-students::before { background-image: url('../images/ind-emt-paramedic-students.jpg'); }
.photo-mob-custom-scheduling::before { background-image: url('../images/mob-custom-scheduling.jpg'); }
.photo-mob-minimized-downtime::before { background-image: url('../images/mob-minimized-downtime.jpg'); }
.photo-mob-team-scenarios::before { background-image: url('../images/mob-team-scenarios.jpg'); }
.photo-mob-zero-travel::before { background-image: url('../images/mob-zero-travel.jpg'); }
.photo-svc-acls::before { background-image: url('../images/svc-acls.jpg'); }
.photo-svc-aha-oversight::before { background-image: url('../images/svc-aha-oversight.jpg'); }
.photo-svc-bls::before { background-image: url('../images/svc-bls.jpg'); }
.photo-svc-emt-tutoring::before { background-image: url('../images/svc-emt-tutoring.jpg'); }
.photo-svc-heartsaver::before { background-image: url('../images/svc-heartsaver.jpg'); }
.photo-svc-pals::before { background-image: url('../images/svc-pals.jpg'); }
.photo-svc-standby-medical::before { background-image: url('../images/svc-standby-medical.jpg'); }

/* ---------- Interactive class calendar ---------- */
.cal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 20px;
}
.cal-head { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 18px; }
.cal-title { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); min-width: 260px; text-align: center; }
.cal-nav {
  background: var(--cream); border: 1px solid var(--border); border-radius: 8px;
  width: 42px; height: 42px; cursor: pointer; color: var(--charcoal);
  font-size: 1rem; line-height: 1; transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-nav:hover { background: var(--gold-tint); border-color: var(--gold); }
.cal-nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { gap: 6px; margin-bottom: 6px; }
.cal-dow span {
  text-align: center; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); padding-bottom: 6px;
}
.cal-grid { gap: 6px; }
.cal-cell {
  min-height: 104px; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px; background: var(--white); display: flex; flex-direction: column; gap: 4px;
}
.cal-cell.is-out { background: #fbfaf7; }
.cal-cell.is-out .cal-num { color: #c9c4ba; }
.cal-cell.is-today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cal-num { font-family: 'Oswald', sans-serif; font-size: 0.86rem; color: var(--charcoal); }

/* Stacked layout: class name on top, seats underneath. Laying them side by side
   made a day with a class wider than an empty one, which pushed the whole
   calendar grid out of alignment. Stacking keeps every column the same width. */
.cal-badge {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--white);
  padding: 5px 6px; border-radius: 12px; line-height: 1.2;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.cal-badge-title {
  display: block; width: 100%; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-badge:hover, .cal-badge:focus-visible {
  transform: translateY(-1px); filter: brightness(1.12);
  box-shadow: 0 3px 10px rgba(0,0,0,0.28); outline: none;
}
/* Course colours follow the AHA convention so the calendar is readable at a
   glance to anyone who already knows the certifications:
     BLS  blue   ·  ACLS  red   ·  PALS  purple
   Heartsaver has no AHA colour of its own, so it keeps a distinct green -
   it is the only non-clinical course on the calendar. All four were checked
   for contrast against white badge text. */
.badge-bls        { background: #1668b8; }   /* AHA blue   */
.badge-acls       { background: #c1272d; }   /* AHA red    */
.badge-pals       { background: #6b3fa0; }   /* AHA purple */
.badge-heartsaver { background: #1f7a5a; }   /* green - non-AHA-coded */

.cal-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 18px; }
.cal-legend span { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-muted); }
.cal-legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-bls { background: #1668b8; }
.dot-acls { background: #c1272d; }
.dot-pals { background: #6b3fa0; }
.dot-heartsaver { background: #1f7a5a; }
.cal-note { text-align: center; font-size: 0.82rem; color: var(--text-muted); margin: 14px 0 0; }

/* Preferred Training Date - four dropdowns, 25 Aug 2026.
   auto-fit keeps all four on one row on desktop and lets them wrap to two
   columns on a phone rather than squeezing to unreadable widths. */
.date-select-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.date-select-group select { width: 100%; }
.field-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* Call to action that replaced the class calendar, 25 Aug 2026. */
.schedule-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 26px 0 0;
}
@media (max-width: 520px) {
  .schedule-cta { flex-direction: column; align-items: stretch; }
  .schedule-cta .btn { width: 100%; text-align: center; }
}

.cal-tooltip {
  position: absolute; z-index: 60; pointer-events: none;
  background: var(--charcoal); color: var(--white);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 10px 13px; max-width: 280px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.32);
  opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease;
  font-size: 0.82rem; line-height: 1.5;
}
.cal-tooltip.show { opacity: 1; transform: translateY(0); }
.cal-tooltip strong { display: block; font-family: 'Oswald', sans-serif; color: var(--gold-light); margin-bottom: 3px; }
.cal-tooltip span { display: block; color: #ddd8cd; }
.cal-tooltip .tip-seats {
  display: block;
  color: var(--gold-light);
  font-weight: 600;
  margin-top: 2px;
}
.cal-tooltip em { display: block; margin-top: 6px; font-style: normal; font-size: 0.74rem; color: var(--gold-light); }

@media (max-width: 780px) {
  .cal { padding: 16px 12px 14px; }
  .cal-cell { min-height: 78px; padding: 4px; }
  .cal-badge { font-size: 0.58rem; padding: 4px 5px; }
  .cal-dow span { font-size: 0.62rem; }
}
@media (max-width: 520px) {
  /* Badges get unreadable in tiny cells — show the class colour as a bar and
     rely on the tooltip/tap target instead of the full title. */
  .cal-cell { min-height: 62px; }
  .cal-badge { font-size: 0; padding: 6px 4px; border-radius: 4px; }
}

/* ---------- FAQ Accordion ---------- */
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--white); }
.accordion-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 22px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--charcoal); display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.accordion-q .plus { color: var(--red); font-size: 1.3rem; flex-shrink: 0; transition: transform 0.2s ease; }
.accordion-item.open .accordion-q .plus { transform: rotate(45deg); }
.accordion-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0 22px; }
.accordion-item.open .accordion-a { max-height: 320px; padding: 0 22px 20px; }
.accordion-a p { color: var(--text-muted); margin: 0; font-size: 0.94rem; }

/* ---------- Schedule / Calendar ---------- */
.schedule-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 880px) { .schedule-wrap { grid-template-columns: 1fr; } }

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.schedule-table {
  width: 100%; min-width: 760px; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 620px) {
  .table-scroll { box-shadow: none; border: 1px solid var(--border); }
  .schedule-table { box-shadow: none; }
}
.schedule-table th {
  background: var(--charcoal); color: var(--gold-light);
  text-transform: uppercase; font-family: 'Oswald', sans-serif;
  font-size: 0.76rem; letter-spacing: 0.08em; text-align: left; padding: 14px 16px;
}
.schedule-table td { padding: 16px; border-bottom: 1px solid var(--border); font-size: 0.94rem; vertical-align: top; }
.schedule-table td.loc-cell { font-size: 0.82rem; color: var(--text-muted); max-width: 230px; }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr:nth-child(even) { background: var(--cream); }
.course-pill {
  display: inline-block; background: var(--red-tint); color: var(--red);
  border: 1px solid var(--red); border-radius: 20px; padding: 3px 12px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.schedule-note { color: var(--text-muted); font-size: 0.85rem; margin-top: 14px; }


/* ---------- Limited seats notice ---------- */
.seats-notice {
  display: flex; align-items: center; gap: 12px; background: var(--red-tint);
  border: 1px solid var(--red); border-left: 5px solid var(--red); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 30px; color: var(--red-dark); font-size: 0.94rem;
}
.seats-notice .bell { font-size: 1.3rem; flex-shrink: 0; }

/* Quiet variant, used above the home-page calendar. The boxed red panel read
   as a warning there and pulled focus off the schedule. The register page
   keeps the boxed treatment, where it is a payment condition worth flagging. */
.seats-notice.is-quiet {
  justify-content: center;
  gap: 10px;
  background: none; border: none; padding: 0;
  margin: 0 auto 26px; max-width: 780px;
  color: var(--text-muted); font-size: 0.9rem; text-align: center;
}
.seats-notice.is-quiet strong { color: var(--charcoal); font-weight: 600; }
.seats-notice.is-quiet .bell { font-size: 1.05rem; opacity: 0.7; }
.btn-square {
  background: #1a1a1a; color: var(--white); display: inline-flex; align-items: center; gap: 8px;
}
.btn-square:hover { color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
.row-register-link {
  display: inline-block; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.72rem; letter-spacing: 0.05em; font-weight: 600; color: var(--red);
  border: 1px solid var(--red); border-radius: 20px; padding: 5px 14px; white-space: nowrap;
}
.row-register-link:hover { background: var(--red); color: var(--white); }

/* ---------- Seats remaining ----------
   Only rendered once the live count arrives, so nothing shifts on load if the
   endpoint is unavailable. */
.seat-pill {
  display: inline-block;
  margin-left: 0;              /* stacked beneath the class name, not beside it */
  padding: 1px 8px;
  border-radius: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.seat-pill.is-low  { background: var(--gold); color: var(--charcoal); font-weight: 600; }
.seat-pill.is-full { background: var(--charcoal); color: var(--gold-light); }

.cal-badge.is-full { opacity: 0.55; }

/* On the register page the pills sit on a light card, so they need their own
   colours rather than the translucent white used on the calendar. */
.class-option .seat-pill {
  margin-left: 8px;            /* register page keeps it inline beside the class */
  background: var(--cream);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 0.64rem;
}
.class-option .seat-pill.is-low  { background: var(--gold-tint); color: #8a6f10; border-color: var(--gold); }
.class-option .seat-pill.is-full { background: var(--charcoal); color: var(--gold-light); border-color: var(--charcoal); }
.class-option.is-full { opacity: 0.55; }
.class-option.is-full:hover { cursor: not-allowed; }
.seat-note {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 12px 0 0;
}

/* Highlights the class the visitor clicked in the home-page calendar, so it's
   obvious which one carried across to the registration page. */
.is-preselected {
  background: var(--gold-tint);
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.35);
}

/* ---------- Class selector (Contact page) ---------- */
.class-select-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.class-option {
  display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; cursor: pointer; background: var(--cream);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.class-option:hover { border-color: var(--gold); }
.class-option input[type="radio"] { margin-top: 4px; accent-color: var(--red); flex-shrink: 0; }
.class-option.selected { border-color: var(--red); background: var(--red-tint); }
.class-option .co-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.94rem; color: var(--charcoal); }
.class-option .co-date { color: var(--red); font-size: 0.85rem; font-weight: 600; }
.class-option .co-time { color: var(--text-muted); font-size: 0.82rem; }

/* ---------- Team ---------- */
/* Five cards now stack, so they need spacing between them - previously the
   two cards carried an inline margin on the first one. */
.team-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: grid; grid-template-columns: 280px 1fr; box-shadow: var(--shadow);
  margin-bottom: 34px;
}
.team-card:last-child { margin-bottom: 0; }
/* All five headshots are normalised to 3:4 with the face on a common axis,
   so a fixed column width keeps every portrait the same size down the page. */
.team-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.team-info { padding: 32px; }
.team-info .role {
  color: var(--red); text-transform: uppercase; font-family: 'Oswald', sans-serif;
  font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 14px;
}
.badge-list { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.badge-list li { font-size: 0.85rem; color: var(--ink); padding-left: 20px; position: relative; }
.badge-list li::before { content: "\2713"; color: var(--gold-dark); position: absolute; left: 0; font-weight: 700; }
.patriot-strip {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
  background: var(--red-tint); border-left: 3px solid var(--red);
  padding: 10px 14px; border-radius: 6px; font-size: 0.85rem; color: var(--red-dark);
}
@media (max-width: 720px) {
  .team-card { grid-template-columns: 1fr; }
  .team-card img { max-height: 340px; }
  .badge-list { grid-template-columns: 1fr; }
}

/* ---------- Services list layout ---------- */
.service-category { margin-bottom: 60px; }
.service-category-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.service-category-head .tag {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; padding: 8px 18px; border-radius: 20px; color: var(--white);
}
.tag-training { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.tag-consulting { background: linear-gradient(135deg, var(--charcoal-2), var(--charcoal)); }

/* ---------- Mobile-service banner ---------- */
.mobile-banner {
  background: linear-gradient(120deg, var(--red), var(--red-dark));
  color: var(--white); padding: 54px 0; text-align: center;
}
.mobile-banner h2 { color: var(--white); }
.mobile-banner p { color: #f5d9d7; max-width: 640px; margin: 0 auto 20px; }
.mobile-banner .icon-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 30px; }
.mobile-banner .icon-row div { max-width: 160px; text-align: center; font-size: 0.85rem; color: var(--white); }
.mobile-banner .icon-row .ic { font-size: 1.8rem; margin-bottom: 8px; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.testimonial-card .stars { color: var(--gold); margin-bottom: 10px; letter-spacing: 2px; }
.testimonial-card p { color: var(--ink); font-style: italic; }
.testimonial-card .who { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--charcoal-2), var(--charcoal));
  padding: 60px 0; text-align: center; color: var(--white);
}
.cta-banner h2 { color: var(--white); margin-bottom: 10px; }
.cta-banner p { color: #cfc9bd; max-width: 600px; margin: 0 auto 26px; }

/* ---------- Contact / Forms ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.contact-info-card .row { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info-card .row .ico {
  width: 42px; height: 42px; border-radius: 50%; background: var(--gold-tint);
  border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
  color: var(--red); flex-shrink: 0;
}
.contact-info-card .row div h4 { margin: 0 0 4px; font-size: 1rem; text-transform: none; letter-spacing: 0; }
.contact-info-card .row div p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.hub-callout {
  color: var(--red) !important; font-weight: 700; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; font-size: 0.85rem !important; letter-spacing: 0.03em;
  margin: 4px 0 10px !important;
}
.coverage-list { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 0.92rem; }
.coverage-list li { margin-bottom: 6px; }
.coverage-list strong { color: var(--charcoal); }
.map-footnote { font-size: 0.76rem; font-style: italic; color: var(--text-muted); max-width: 640px; margin: 10px auto 0 !important; }

form.contact-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.contact-form label {
  display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-muted); margin: 16px 0 6px;
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: var(--cream); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; color: var(--ink); font-family: inherit; font-size: 0.95rem;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form button { margin-top: 22px; width: 100%; }
.form-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; }
.form-success {
  display: none; background: var(--gold-tint); border: 1px solid var(--gold);
  border-radius: 8px; padding: 16px 18px; margin-top: 18px; color: var(--charcoal); font-size: 0.92rem;
}
.form-success.show { display: block; }

/* ---------- Registration confirmation ----------
   Replaces the form outright once a request is submitted. The filled-in
   fields used to stay on screen behind the thank-you note, which read as
   "not finished yet" and invited a second click on Submit - producing a
   duplicate registration and a duplicate seat hold. */
.reg-confirmed {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  text-align: center;
}
.reg-confirmed-tick {
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--gold-tint);
  border: 2px solid var(--gold);
  color: var(--gold-dark);
  font-size: 2rem; line-height: 58px;
}
.reg-confirmed h3 { font-size: 1.5rem; margin-bottom: 10px; }
.reg-confirmed p { color: var(--text-muted); max-width: 520px; margin-left: auto; margin-right: auto; }
.reg-confirmed .reg-confirmed-class {
  font-family: 'Oswald', sans-serif;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-block;
  padding: 9px 18px;
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.reg-confirmed .reg-confirmed-note {
  background: var(--red-tint);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  padding: 13px 17px;
  text-align: left;
  color: var(--red-dark);
  font-size: 0.88rem;
  margin-top: 22px;
}
.reg-confirmed-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 6px;
}
@media (max-width: 560px) {
  .reg-confirmed { padding: 30px 22px; }
  .reg-confirmed-actions .btn { width: 100%; text-align: center; }
}
.checkbox-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  background: var(--cream); border: 1px solid var(--border); border-radius: 6px;
  padding: 14px 16px;
}
@media (max-width: 560px) { .checkbox-group { grid-template-columns: 1fr; } }
.checkbox-group label {
  display: flex; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif;
  font-size: 0.9rem; color: var(--ink); margin: 0; font-weight: 400;
}
.checkbox-group input[type="checkbox"] { width: auto; accent-color: var(--red); }

/* ---------- Coverage Map ---------- */
.map-card {
  background: var(--charcoal); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 30px; border: 1px solid rgba(231,200,102,0.25);
}
.map-card h3 { color: var(--white); margin-bottom: 4px; }
.map-card > p { color: #b4ae9f; font-size: 0.9rem; margin-bottom: 22px; }
.map-svg-wrap { max-width: 460px; margin: 0 auto; }
.map-svg-wrap.map-svg-wrap-us { max-width: 780px; }
.map-pin-hq { fill: var(--gold); stroke: var(--white); stroke-width: 2; }
.map-pin { fill: var(--red); stroke: var(--gold-light); stroke-width: 1.2; }

/* US coverage map: state outlines load progressively (see js/script.js).
   Florida, the pins and the hub are static in the markup, so if the state
   outlines can't load the map still renders as a Florida coverage map. */
.us-states { fill: rgba(255,255,255,0.07); stroke: rgba(231,200,102,0.32); stroke-width: 1; }
.us-state-fl { fill: rgba(201,162,39,0.30); stroke: var(--gold); stroke-width: 1.8; }
.map-hub-halo { fill: var(--gold); opacity: 0.22; }
.map-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 780px) { .map-legend { grid-template-columns: repeat(2, 1fr); } }
.map-legend h4 { color: var(--gold-light); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; font-family: 'Oswald', sans-serif; }
.map-legend p { color: #d9d4c8; font-size: 0.84rem; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); border-top: 4px solid var(--gold); padding: 50px 0 24px; color: #d9d4c8; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 30px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--gold-light); font-size: 0.95rem; margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul a { color: #d9d4c8; font-size: 0.92rem; }
.footer-grid ul a:hover { color: var(--gold-light); }
.footer-logo { height: 130px; margin-bottom: 14px; }
.footer-tagline { color: var(--gold-light); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: #b4ae9f; font-size: 0.82rem;
}
.footer-bottom a { color: #b4ae9f; }

/* ---------- Logo watermark background (About / Services / Contact) ---------- */
/* WATERMARK — VERSION B: wide Header wordmark logo.
   Official Legacy crest watermark (About / Services / Contact).
   The white layer sits ON TOP of the logo and dials its strength down to
   ~28% (this wordmark is light silver/gold, so it needs more strength
   than the dark crest to read at the same visual weight), so the crest reads clearly as a background mark without competing
   with body copy. It's fixed, so it stays centred as the page scrolls. */
body.watermark-logo {
  background-image:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
    url('../images/header-logo-watermark.png');
  background-repeat: no-repeat, no-repeat;
  /* Nudged below centre so the sticky header never clips the top of the
     shield/'L'. Size trimmed so it still clears on short viewports. */
  background-position: center center, center calc(50% + 80px);
  background-size: cover, min(74vw, 740px) auto;
  background-attachment: fixed, fixed;
}
/* Let the crest show faintly through the tinted sections too, while cards
   keep solid backgrounds so their text stays crisp. */
body.watermark-logo .section-cream { background: rgba(250, 247, 240, 0.82); }
/* :not(.section-dark) matters — without it the dark section loses its
   charcoal background and its white headings vanish into the page. */
body.watermark-logo .section:not(.section-dark) { background-color: transparent; }
@media (max-width: 720px) {
  /* fixed backgrounds are unreliable on mobile browsers */
  body.watermark-logo { background-attachment: scroll, scroll; background-size: cover, 92vw auto; }
}

/* ---------- Misc ---------- */
.divider-gold { width: 70px; height: 3px; background: linear-gradient(90deg, var(--red), var(--gold)); margin: 0 auto 20px; border-radius: 2px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Organization Type — 29 options, so a single column would dominate the form.
   Multi-column with a capped height keeps the form scannable without hiding
   the fields below it.
   --------------------------------------------------------------------------- */
.org-type-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 14px;
  max-height: 232px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}
.org-type-group label { font-size: 0.9rem; }
@media (max-width: 600px) {
  .org-type-group { grid-template-columns: 1fr; max-height: 200px; }
}

/* Consent. Given room to breathe so it reads as a deliberate choice rather
   than fine print, and never pre-ticked. */
.consent-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 4px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--cream);
  font-size: 0.88rem; line-height: 1.45;
  text-transform: none; letter-spacing: 0;
}
.consent-check input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* Footer social icons */
.footer-social { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--gold-light); background: rgba(255,255,255,0.08);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
  background: var(--gold); color: var(--charcoal); transform: translateY(-2px); outline: none;
}

/* H1 now carries the keyword-rich service description; the original tagline
   sits beneath it as a subheading so the brand line is kept without competing
   with the H1 for search relevance. */
.hero-subtagline {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold-light); margin: 6px 0 18px; text-align: center;
}
.schedule-subhead {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  letter-spacing: 0.02em; color: var(--text-muted);
  margin: 2px 0 10px; text-align: center; text-transform: none;
}

/* ---------------------------------------------------------------------------
   Legal documents (privacy.html), added 26 Aug 2026.
   Narrower measure than the marketing pages: long statutory prose is hard to
   read at full container width.
   --------------------------------------------------------------------------- */
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-doc h2 {
  font-size: 1.25rem;
  margin: 38px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #e3ddd2);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-doc h3 { font-size: 1.02rem; margin: 24px 0 8px; }
.legal-doc p,
.legal-doc li { line-height: 1.75; }
.legal-doc ul,
.legal-doc ol { margin: 0 0 16px 22px; }
.legal-doc li { margin-bottom: 9px; }
.legal-dates {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line, #e3ddd2);
}