/* ==========================================================================
   CPR in Motion — progressive enhancement layer
   Layered on top of the locked brand system (inline <style> in each page).
   Adds: keyboard focus, sticky-nav anchor offset, brand selection,
   pressed states, and a calm staggered reveal. No brand tokens overridden.
   ========================================================================== */

/* --- Sticky-nav anchor offset -------------------------------------------- */
/* The nav is position:sticky at 74px; jump-links must clear it so the target
   heading isn't hidden under the bar. */
:where(section[id], [id].panel, #area, #top){ scroll-margin-top: 96px; }

/* --- Keyboard focus ------------------------------------------------------- */
/* Mouse users see nothing; keyboard users get a clear brand-red ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* On the dark booking form, the red ring can sit close to red inputs — give
   it a halo so it reads on #16243a. */
.booking :where(input, select):focus-visible{
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 28%, transparent);
}

/* --- Hero badge anchor (stacked layout) ----------------------------------- */
/* When the hero photo stacks under the copy it becomes position:static, which
   would let the absolute .badge anchor to the whole hero section and float up
   over the headline. Re-anchor it to the photo. */
@media (max-width: 860px){
  .hero-photo{ position: relative; }
}

/* --- Service-area map embed ----------------------------------------------- */
.map-embed{
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--cream);
}
.map-embed iframe{ width: 100%; }

/* --- Brand text selection ------------------------------------------------- */
::selection{ background: var(--accent); color:#fff; }

/* --- Pressed feedback ----------------------------------------------------- */
/* Buttons already transition .18s; add a subtle, non-layout press. */
.btn{ transition: background .18s, color .18s, border-color .18s, transform .12s; }
.btn:active{ transform: translateY(1px); }
.card, .pkg, .aud{ transition: border-color .18s, transform .18s, box-shadow .18s; }
.card:active{ transform: translateY(1px); }

/* --- Tabular figures ------------------------------------------------------ */
/* Stats and prices align cleanly column-to-column. No-op where unsupported. */
.hero .trust b, .card .price, .pkg .amt, .strip .item b{
  font-variant-numeric: tabular-nums;
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link{
  position: absolute; left: 12px; top: -120px; z-index: 100;
  background: var(--ink); color:#fff; font-family: var(--font-display);
  font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 6px;
  box-shadow: var(--shadow); transition: top .18s ease;
}
.skip-link:focus{ top: 12px; }

/* --- Staggered reveal ----------------------------------------------------- */
/* The .reveal class is added by JS only, so without JS everything is visible.
   Calm: short distance, soft ease-out, honors reduced-motion. */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s cubic-bezier(.22,.7,.2,1),
    transform .7s cubic-bezier(.22,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .skip-link{ transition: none; }
  .btn, .card{ transition: none; }
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-sec{ padding: 64px 0; border-bottom: 1px solid var(--border); }
.about-sec:last-of-type{ border-bottom: 0; }
.about-sec.alt{ background: var(--cream); }
.about-narrow{ max-width: 760px; }
.big-lead{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.42; color: var(--ink);
  max-width: 40ch;
}
.about-h2{ font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; margin-top: 10px; max-width: 22ch; }
.about-p{ margin-top: 18px; font-size: 17px; line-height: 1.62; color: var(--muted); max-width: 68ch; }
.about-p + .about-p{ margin-top: 14px; }

.offer-grid{ margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.offer{ background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.offer h3{ font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.offer p{ margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.instructor-card-img{
  margin-top: 22px;
  width: 100%;
  max-width: 940px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* Instructor card placed in the dark booking section's left column */
.booking-card{ margin-top: 24px; max-width: 100%; border-color: rgba(255,255,255,.14); }