/* ============================================================
   Home page "Notebook Purple" reskin — loaded AFTER styles.css,
   on index.html only. Every rule here overrides styles.css for
   this page; checkout.html and intake.html never load this file
   and keep their current look untouched.

   Ported to match the source design canvas (Clear Signal G -
   Notebook Purple v2) as exactly as possible: same type scale,
   spacing, shadows and colors, not just the same palette.

   Also now loaded on checkout.html and the learn-more-*.html pages,
   each with their own small scoped <style> override block for
   anything specific to that page (checkout.html's cream cards on a
   dark purple background, for example). intake.html does not load
   this file yet.
   ============================================================ */

:root {
  --purple: #5c008b;
  --purple-dark: #2e005d;
  --purple-light: #8e008b;
  --purple-pale: #efe0f7;
  --orange: #ff8300;
  --orange-light: #ffb066;
  --orange-pale: #fff1e0;
  --cream: #fdf8f1;
  --warm-white: #2e005d;      /* page background is dark throughout, see body{} */
  --ink: #2e005d;
  --text: #4a2a6b;
  --text-light: #6b4a85;
  --gold: #e8b84b;
  --green: #4caf6a;
  --border: #e0d2e8;
  --shadow: 0 8px 24px rgba(46, 0, 93, 0.1);
  --shadow-lg: 0 10px 30px rgba(46, 0, 93, 0.12);
  --radius: 0px;
  --radius-lg: 0px;
  /* Cream/white cards were sharp-cornered + fully opaque to match the
     mockup exactly. Rounded out and given a touch of transparency (so
     the purple page behind shows through slightly) per Lexie's request —
     applied to every cream/white card site-wide, not the mockup's
     pills/buttons/calendar days, which keep their existing shapes. */
  --card-radius: 16px;
  --card-bg-cream: rgba(253, 248, 241, 0.92);
  --card-bg-white: rgba(255, 255, 255, 0.92);
}

body {
  font-family: 'Instrument Sans', -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* IMPORTANT: in the source mockup, big headlines (h1/h2/h3, prices,
   package names, the month label, etc.) have NO font-family override —
   they inherit the page's default Instrument Sans, just bold. Nunito is
   reserved specifically for small kicker/label/badge/caption text (see
   the individual rules below). Do not add a blanket h1-h4 Nunito rule
   here again — that was wrong and made every headline the wrong font. */
.nb-kicker, .nb-kicker-inline, .logo-accent {
  font-family: 'Nunito', sans-serif;
}

/* ----- Shared "kicker" label (small bold word above a headline) ----- */
.nb-kicker-inline {
  font-weight: 700;
  font-size: 20px;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 8px;
}

/* ----- Headline highlighter -----
   Reusable marker-underline for a key phrase, matching the mockup's
   inline gradient treatment. */
.nb-highlight {
  background: linear-gradient(transparent 70%, var(--orange) 70%, var(--orange) 88%, transparent 88%);
  padding: 0 2px;
}

/* ----- Shared photo-card placeholder (hero + trainer bio) ----- */
.nb-photo-card {
  background: var(--card-bg-white);
  padding: 16px 16px 56px;
  box-shadow: 0 10px 30px rgba(46, 0, 93, 0.12);
  border-radius: var(--card-radius);
}

.nb-photo-placeholder {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg, #f3eadf 0 10px, #f9f2e8 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #6b4a85;
}

.nb-photo-caption {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-top: 12px;
  color: var(--purple);
}

/* Home page has no top-left logo (removed — the hero title already
   says "Clear Signal Dog Training"), so push the links to the right. */
/* .container's shared max-width (1140px, centered) was leaving a gap
   between the nav links and the browser's actual right edge on wider
   screens — this nav isn't meant to line up with the page's content
   column, it should just hug the true right edge. */
.nav-container {
  max-width: none;
  justify-content: flex-end;
  padding-right: clamp(24px, 5vw, 64px);
}

/* ----- Navbar -----
   The purple pill marks the section you're on (set by script.js on
   click + scroll via .is-active), not always "Book A Session". Every
   top-level link gets the same padding so nothing shifts when the pill
   moves; the gap shrinks to compensate. */
.nav-links {
  gap: 6px;
  align-items: center;
}

.nav-links > li > a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-links > li > a.is-active {
  background: var(--purple);
  color: #fff !important;
  font-weight: 600;
}

.nav-links > li > a.is-active:hover {
  background: var(--purple-light);
}

.logo {
  font-weight: 700;
  font-size: 19px;
}

.logo-accent {
  font-weight: 700;
  font-size: 19px;
  color: var(--orange);
}

.nav-links a {
  font-weight: 500;
  font-size: 16px;
}

/* ----- Buttons ----- */
.btn {
  border-radius: 10px;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 700;
}

.btn-primary {
  box-shadow: 3px 3px 0 var(--purple-light);
}

.btn-primary:hover {
  box-shadow: 4px 4px 0 var(--purple-light);
}

/* ----- Hero -----
   Matches design_handoff_home_hero/README.md ("option 6m"): concentric
   orange rings + the dog mark on the left, a two-line brand title and
   copy column on the right, over a solid #2E005D field. Ported into
   the site's own fonts/components (not the reference HTML) per the
   handoff's instructions — same colors, type sizes and ring geometry,
   scaled responsively instead of pinned to the 1280x800 reference
   frame. Below-the-fold sections are untouched. */
.hero {
  background: #2e005d;
  /* Only bottom padding — nb-hero-intro handles its own top spacing.
     This was lost when the intro moved out of .container to go
     full-bleed, which left almost no breathing room before "Packages"
     (just #packages's own 72px), making the whole page read cramped
     below the hero. Restored to the site's standard section rhythm. */
  padding: 0 0 112px;
  position: relative;
  overflow: hidden;
}

.hero-content {
  text-align: left;
  position: relative;
}

/* min-height keeps the title area holding its ground so "Choose A
   Training Service" (step one) starts below the fold on first load.
   This is now a direct child of header.hero (NOT nested inside
   .container) so the art layer below can bleed the full browser
   width instead of being boxed into the 1140px content column —
   that boxing was why the rings/dog looked cramped and centered.
   Two real flex columns (art, then copy) so both center vertically
   together against each other — the previous absolute/full-bleed art
   layer had no relationship to the text's vertical position, which is
   why the dog ended up looking lower than the title. */
/* Horizontal padding "scoots" both columns in from the browser edges
   instead of the art/text running edge-to-edge. */
.nb-hero-intro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  margin-bottom: 56px;
  padding: 120px clamp(24px, 6vw, 96px) 64px;
}

.nb-hero-art-col {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  /* Lets the oversized SVG below bleed past this column's own box —
     into the text column's background on the right, and past the
     hero's left edge (clipped there by .hero's own overflow: hidden)
     — instead of being cut off at the column boundary. */
  overflow: visible;
}

.nb-hero-art {
  position: relative;
  z-index: 0;
  pointer-events: none;
}

/* Bigger than the column itself and centered within it, with
   overflow: visible on both this element and its parent so the outer
   rings actually extend over the text column's background rather
   than stopping at the edge of the left half. */
.nb-hero-art-wide {
  position: absolute;
  left: calc(48% - 1.35vw);
  top: 44%;
  /* Not -50%/-50% — that centers the bounding box, but the dog + ring
     focal point (cx/cy 256,424 in the 1280x800 viewBox) sits well
     left-of-center in that box. Offset by the focal point's own
     fraction of the box (256/1280, 424/800) so THAT point — not the
     box's geometric center — lands on the anchor above, keeping the
     dog itself on the left half, vertically level with the text's
     own vertical center on the right. */
  transform: translate(-20%, -49%);
  width: min(200%, 1500px);
  height: auto;
  aspect-ratio: 1280 / 800;
  overflow: visible;
}

.nb-hero-rings circle {
  fill: none;
  stroke: #ff8a00;
}

.nb-hero-art-narrow {
  display: none;
}

.nb-hero-intro > .container {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;
}

.nb-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero h1.nb-hero-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #fff;
  letter-spacing: -0.05em;
  margin: 0 0 22px;
  text-shadow: 0 2px 6px rgba(22, 0, 48, 0.85), 0 0 22px rgba(22, 0, 48, 0.9), 0 0 44px rgba(22, 0, 48, 0.7);
}

.nb-hero-title-line {
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.nb-hero-title-line:first-child {
  font-size: clamp(36px, 6.9vw, 88px);
  margin-left: -0.085em;
}

.nb-hero-title-line:last-child {
  font-size: clamp(36px, 6.9vw, 88px);
  margin-left: -0.07em;
}

/* Tagline: smaller second line under the title. Balanced wrapping keeps a
   long tagline from leaving a single word on its last line. */
.slogan {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.1vw, 26px);
  text-wrap: balance;
  line-height: 1.15;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
  margin: 0;
  text-shadow: 0 2px 6px rgba(22, 0, 48, 0.85), 0 0 22px rgba(22, 0, 48, 0.9), 0 0 44px rgba(22, 0, 48, 0.7);
}

.hero .slogan .nb-highlight {
  background: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #ff8a00;
  text-decoration-thickness: 5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

/* Location is now a small pill (pin icon + text) instead of plain
   text — reads as a quick fact you can glance at, not another line of
   body copy. */
.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.3;
  color: #f0e6fa;
  font-weight: 600;
  margin: 0 0 32px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

.hero-location-pin {
  display: inline-flex;
  color: #ff8a00;
  flex-shrink: 0;
}

/* Staggered fade/slide-up entrance for the title, tagline, location
   pill and CTAs — each element sets its own --reveal-delay inline so
   they land one after another instead of all popping in at once.
   Respects reduced-motion below. */
@keyframes nb-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nb-reveal {
  animation: nb-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .nb-reveal {
    animation: none;
  }
}

.nb-hero-photo {
  position: relative;
  padding: 24px;
}

/* >=900px: rings + dog mark sit on the left, copy column pushed right
   to clear them, matching the handoff's left:600/1280 column edge. */
@media (min-width: 900px) {
  .nb-hero-copy {
    max-width: 700px;
    margin-left: auto;
    padding-right: clamp(0px, 4.7vw, 70px);
    text-align: center;
  }

  .hero h1.nb-hero-title {
    align-items: center;
  }
}

/* ----- Sections: the whole page sits on the dark purple background,
   only Contact gets a richer purple panel — matching the mockup's
   two-tone dark treatment instead of the old light/dark alternation. ----- */
.section {
  padding: 112px 0;
}

.section-alt {
  background: var(--purple-dark);
}

/* Packages sits right after the booking section, which is the same
   --purple-dark background all the way down — give Packages its own
   shade (same treatment as Contact) so there's a visible seam between
   them instead of one continuous, undifferentiated purple block. */
#packages {
  background: var(--purple);
  /* .section's 112px top/bottom padding, plus the equal-height cards
     below, made this section feel a lot taller than the "Packages"
     title at the top of it — trimmed just here. */
  padding: 72px 0;
}

#packages .section-header {
  margin-bottom: 28px;
}

.section-header h2 {
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin-bottom: 14px;
}

.section-header {
  text-align: left;
  margin-bottom: 40px;
}

.nb-header-left .section-subtitle,
.section-header .section-subtitle {
  text-align: left;
  margin: 0;
  max-width: 36em;
  color: rgba(253, 248, 241, 0.85);
  font-size: 17px;
}

.section-header .section-subtitle a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

.section-header .section-subtitle a:hover {
  text-decoration: underline;
}

.divider {
  display: none;
}

/* ----- Booking wrapper + service selection cards -----
   Cream cards floating on the dark hero, matching the mockup's
   svc/svcOn treatment (solid card + hard shadow when selected). */
.booking-wrapper {
  background: transparent;
  border: none;
  padding: 0;
}

.booking-wrapper .nb-kicker-inline {
  color: var(--orange);
}

.booking-wrapper .packages-title {
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin-bottom: 14px;
}

.booking-blurb {
  color: #e6d3f2;
  font-size: 17px;
  line-height: 1.6;
  max-width: 36em;
  margin-bottom: 0;
}

.booking-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 6px 0 4px;
}

.booking-price-line .price-amount {
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.booking-price-line .price-unit {
  font-size: 16px;
  font-weight: 500;
  color: #e6d3f2;
}

.options-grid {
  gap: 36px;
  margin-top: 28px;
}

/* Service option cards — "ticket" layout: solid purple header band
   with the title + price, cream body with an orange-check list, and a
   Select button at the bottom that flips to "Selected ✓" on the chosen
   card. The whole card stays clickable (onclick on .option-card). */
.step-card.option-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg-cream);
  border: 2px solid transparent;
  box-shadow: var(--shadow);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.step-card.option-card:hover {
  background: var(--card-bg-cream);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.step-card.option-card.selected {
  border-color: var(--purple);
  box-shadow: 6px 6px 0 var(--orange);
  background: var(--card-bg-cream);
  transform: none;
}

.option-card .step-header {
  background: var(--purple);
  padding: 26px 30px 24px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.option-card .step-label {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.option-card .step-selection {
  white-space: nowrap;
}

.option-card .price-amount {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.option-card .price-unit {
  font-size: 14px;
  font-weight: 500;
  color: #e6d3f2;
}

.option-card .step-body {
  padding: 26px 30px 8px;
  flex: 1;
}

/* Cards used to lead with a tagline + description paragraph before
   "How It Works" — simplified to just the header (title/price) and the
   How It Works list, so .step-tagline/.step-desc are unused here now. */
.option-card .step-subhead {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0;
  margin-bottom: 6px;
}

.option-card .step-list li {
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px 0 10px 36px;
  border-bottom: 1px dashed var(--border);
}

.option-card .step-list li:last-child {
  border-bottom: none;
}

.option-card .step-list li::before {
  content: '\2713';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.option-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Matches .step-body's own 8px bottom padding above, so "Learn More"
     sits with equal space between the last bullet and itself, and
     between itself and "Book Now". */
  gap: 16px;
  margin: 8px 30px 28px;
}

/* Small, quiet text link above the main CTA — different font (Nunito,
   same family as the site's small kicker/label text) and noticeably
   smaller than "Book Now" so it doesn't compete with it. */
.option-learn-more {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-light);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.option-learn-more:hover {
  color: var(--purple);
}

.option-cta {
  flex: none;
  width: 100%;
  padding: 13px 20px;
  border: 2px solid var(--purple);
  border-radius: 10px;
  color: var(--purple);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.option-card:hover .option-cta {
  background: var(--purple-pale);
}

.option-card.selected .option-cta {
  background: var(--purple);
  color: #fff;
}

.option-cta-selected,
.option-card.selected .option-cta-idle {
  display: none;
}

.option-card.selected .option-cta-selected {
  display: inline;
}

/* ----- Booking lower: calendar becomes a cream card; the time-slot
   step drops its card chrome and sits directly on the dark panel,
   matching the mockup's two-column split. ----- */
.booking-lower {
  margin-top: 96px;
  padding-top: 0;
  border-top: none;
}

/* 32px was fine between the two side-by-side columns' text, but when
   they stack (narrow screens) it jammed "What to Expect" right up
   under the scheduling note. Separate the row and column gaps. */
.booking-lower-grid {
  column-gap: 72px;
  row-gap: 96px;
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

.booking-lower-left .packages-title,
.booking-lower-right .packages-title {
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin-bottom: 28px;
}

.step-card[data-step="calendar"] {
  background: var(--card-bg-cream);
  border: none;
  box-shadow: 6px 6px 0 var(--purple-dark);
  border-radius: var(--card-radius);
  /* Base .step-card margin-bottom is 12px, sized for the old compact
     accordion look. Too tight for a hard-shadow card handing off to
     plain text on the dark panel below — give it room to breathe. */
  margin-bottom: 32px;
}

/* Base .step-card.completed:hover (styles.css) tints the whole card a
   translucent purple so a collapsed step reads as clickable — that was
   designed for the old dark accordion cards. On this cream calendar
   card it made the collapsed "Select a Date" summary turn a muddy
   purple with barely-readable pink text on hover. Keep it cream. */
.step-card[data-step="calendar"].completed:hover {
  background: var(--card-bg-cream);
}

.step-card[data-step="calendar"] .step-header {
  padding: 28px 28px 16px;
}

/* The open card's header has a short 16px bottom pad because the
   calendar grid sits right under it. Collapsed, there's nothing below,
   so the "Select a Date" row sat high in the card — even it out. */
.step-card[data-step="calendar"].collapsed .step-header {
  padding: 22px 28px;
}

.step-card[data-step="calendar"] .step-body {
  padding: 0 28px 28px;
}

.step-card[data-step="calendar"] .step-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--orange);
}

.step-card[data-step="calendar"] .step-selection {
  color: var(--purple-light);
}

.step-card[data-step="time"] {
  background: transparent;
  border: none;
  margin-bottom: 0;
}

/* Once a time is picked the step becomes .completed, and the base
   styles (styles.css) give it a pointer cursor + a purple tint over the
   whole block on hover. It never collapses here, so that "clickable"
   hint is just noise — no hover effect at all. The time-slot buttons
   inside keep their own pointer/hover. */
.step-card[data-step="time"].completed {
  cursor: default;
}

.step-card[data-step="time"].completed:hover {
  background: transparent;
}

.step-card[data-step="time"] .step-header {
  padding: 0 0 18px;
}

.step-card[data-step="time"] .step-body {
  padding: 0;
}

.step-card[data-step="time"] .step-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--orange-light);
}

.calendar {
  background: transparent;
  border: none;
  padding: 0;
}

.calendar-header {
  margin-bottom: 16px;
}

.calendar-header h3 {
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}

.cal-nav {
  background: var(--purple-pale);
  color: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.cal-nav:hover {
  background: var(--orange);
  color: #fff;
}

.day-label {
  color: var(--text-light);
  font-size: 12px;
  font-weight: 600;
}

.calendar-grid {
  gap: 8px;
}

.cal-day {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.cal-day:hover:not(.disabled):not(.empty) {
  background: var(--orange-pale);
  color: var(--ink);
  /* Base styles.css scales hover'd days up 10% (transform: scale(1.1)),
     designed for a wider-gapped grid. At this grid's 4px gap that scale-up
     makes neighboring circles visually overlap — cancel it here. */
  transform: none;
}

.cal-day.today {
  color: var(--purple-light);
  font-weight: 700;
}

.cal-day.selected {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--ink);
  /* Same overlap issue as the hover state above (base scale(1.05)). */
  transform: none;
}

.cal-day.disabled {
  color: rgba(46, 0, 93, 0.18);
}

[data-time-grid] {
  gap: 10px;
}

.time-slot {
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
}

.time-slot.selected {
  color: var(--ink);
}

.time-loading,
.time-empty {
  color: rgba(253, 248, 241, 0.75);
}

.scheduling-note {
  color: #ecd9f5;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 32px;
}

/* Continue panel — was a flat, sharp-cornered solid orange box that
   looked out of place next to the rounded cards. Now a cream card
   like the rest (rounded, softened) with the same purple hard shadow
   as the calendar card above it — no orange left on this panel. */
.continue-panel {
  background: var(--card-bg-cream);
  border-top: none;
  border-radius: var(--card-radius);
  box-shadow: 6px 6px 0 var(--purple-dark);
  padding: 24px 26px;
  margin-top: 20px;
}

.continue-summary {
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  text-align: left;
  margin-bottom: 12px;
}

.continue-summary strong {
  color: var(--purple);
}

.continue-panel .btn-primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 3px 3px 0 var(--purple-light);
  align-self: flex-start;
  display: inline-block;
  padding: 13px 24px;
  font-size: 15px;
}

.continue-panel .btn-primary:hover {
  background: var(--purple-dark);
  box-shadow: 4px 4px 0 var(--purple-light);
  transform: none;
}

/* ----- What to Expect -----
   This column never got its own pass — it was still using the old
   compact dark-accordion styling (tiny 0.88rem uppercase subheads,
   4px paragraph margins), which is why it felt cramped next to
   everything else on this now-spacious page. Restyled to match the
   option-card treatment on the left (normal-case bold subheads,
   17px body copy), recolored for sitting directly on the dark
   purple panel instead of a cream card. */
.booking-lower-right .nb-kicker-inline {
  display: none;
}

.expect-content .step-subhead {
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--orange-light);
  margin-top: 36px;
  margin-bottom: 10px;
}

.expect-content h4.step-subhead:first-child {
  margin-top: 0;
}

.expect-content .step-desc {
  color: #e6d3f2;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ----- Teaching Style: two-column, kicker + big statement on the left,
   a cream card with the supporting copy on the right. ----- */
.nb-teaching {
  background: var(--orange);
  color: var(--ink);
}

.nb-teaching-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
}

.nb-teaching .nb-kicker-inline {
  color: var(--ink);
  font-size: 22px;
  margin-bottom: 10px;
}

.nb-teaching-statement {
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}

.nb-teaching-card {
  background: var(--card-bg-cream);
  padding: 32px;
  box-shadow: 6px 6px 0 var(--purple-dark);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nb-teaching-card p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

.teaching-tagline {
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--purple);
  margin-top: 8px;
}

/* ----- Common Examples: dark purple, alternating with the lighter
   Packages section above it.
   Cream cards with a hard orange offset shadow and an orange "tape"
   strip so the blurbs pop against the purple. ----- */
.nb-examples {
  background: var(--purple-dark);
}

#session-styles .section-header {
  text-align: left;
}

.issues-grid {
  gap: 32px;
}

.issue-card {
  position: relative;
  background: var(--card-bg-cream);
  border: none;
  box-shadow: 6px 6px 0 var(--orange);
  border-radius: var(--card-radius);
  padding: 36px 28px 28px;
  overflow: visible;
}

.issue-card::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 24px;
  width: 84px;
  height: 24px;
  background: var(--orange);
  opacity: 0.95;
}

.issue-card:hover {
  background: var(--card-bg-cream);
  transform: translateY(-4px);
}

.issue-card .nb-kicker-inline {
  font-size: 19px;
  color: #c24a00;
  margin-bottom: 8px;
}

.issue-card h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}

.menu-divider {
  display: none;
}

.issue-desc {
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

/* ----- Packages ----- */
.packages-foot {
  color: #e6d3f2;
  margin-top: 28px;
  font-size: 17px;
}

.packages-foot a {
  color: var(--orange-light);
}

.pkg-service-choice {
  margin: 28px 0 8px;
}

.pkg-service-label {
  color: #e6d3f2;
  font-size: 17px;
  margin: 0 0 12px;
}

.package-toggle {
  background: none;
  border: none;
  gap: 10px;
  padding: 0;
  display: inline-flex;
}

.package-toggle button {
  border: 2px solid var(--cream);
  color: var(--cream);
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}

.package-toggle button.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  box-shadow: none;
}

.packages-grid {
  gap: 28px;
  max-width: none;
}

.package-card {
  background: var(--card-bg-white);
  border: 2px solid transparent;
  box-shadow: var(--shadow);
  border-radius: var(--card-radius);
  padding: 28px;
  gap: 12px;
}

.package-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: none;
}

.package-card.selected {
  border-color: var(--purple);
  background: var(--card-bg-white);
  box-shadow: 6px 6px 0 var(--orange);
}

.package-top {
  margin-bottom: 0;
}

.package-badge {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--orange);
  text-transform: none;
  letter-spacing: normal;
}

/* The 5/8-class and 5/8-day cards dropped their second "5 Private
   Coaching classes" line, so the badge is now the only title in that
   corner (:only-child catches this without touching the Pay As You Go
   cards, which still pair the badge with a "Single Class"/"Single Day"
   line below it). Sized and recolored to read as a real title rather
   than a small label. */
.package-badge:only-child {
  font-family: 'Instrument Sans', -apple-system, sans-serif;
  font-size: 24px;
  color: var(--ink);
}

.package-sessions {
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.package-price {
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.package-per {
  font-size: 14px;
  color: var(--text-light);
}


/* Auto top+bottom margins center the description in whatever room is
   left between the header and the save/note + CTA block below — cards
   in a row stretch to equal height, so short descriptions used to
   just sit at the top with a lot of dead space underneath them. */
.package-desc {
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  margin-top: auto;
  margin-bottom: auto;
}

/* Package cards now go straight from the description to their "Save
   $X" pill, same as Pay As You Go goes from description to this note.
   Both rely on the normal card gap (12px) rather than their own
   margin, so they sit snug against the CTA's dashed line below —
   .package-desc's auto margins do all the pushing/centering above. */
.package-note {
  color: var(--text-light);
  margin-top: 0;
}

.package-save {
  background: rgba(76, 175, 106, 0.15);
  color: #2f8f52;
  margin-top: 0;
}

.package-cta {
  /* Base styles.css pins this to the bottom with margin-top: auto —
     not needed now that .package-desc's auto margins already do the
     centering, and it was adding extra space between the save/note
     badge and the dashed line instead of keeping them snug. */
  margin-top: 0;
  border-top: 2px dashed var(--border);
  padding-top: 14px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
}

.package-card:hover .package-cta {
  color: var(--orange);
}

#pkgBookingContext {
  color: var(--orange-light);
}

/* "You're booking: <package>" intro line — featured (bigger, brighter,
   orange accent bar) rather than reading as fine print under the title. */
.pkg-booking-blurb {
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--cream);
  max-width: 34em;
  margin-top: 8px;
  padding-left: 18px;
  border-left: 4px solid var(--orange);
}

/* ----- Trainer bio ----- */
/* Backgrounds alternate down the page: Packages (light purple),
   Trainer Bio (dark), Contact (light). */
#trainer-bio {
  background: var(--purple-dark);
}

.trainer-content {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 56px;
  max-width: 1160px;
  align-items: center;
}

.trainer-photo-placeholder {
  width: 100%;
  height: auto;
  max-width: 420px;
  background: var(--card-bg-white);
  padding: 14px 14px 52px;
  box-shadow: var(--shadow-lg);
  border: none;
  border-radius: var(--card-radius);
}

.trainer-content .nb-kicker-inline {
  color: var(--orange);
}

.trainer-text h3 {
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--cream);
  margin-bottom: 24px;
}

.trainer-text p {
  color: #e6d3f2;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.trainer-placeholder {
  max-width: none;
  /* Sits right under the shorter of the two trainer-content columns
     (the photo card) with almost no gap at margin-top:0 — give it the
     same breathing room as other section-ending notes. */
  margin-top: 40px;
  border: none;
  background: transparent;
  color: #e6d3f2;
  font-style: normal;
  font-weight: 600;
  text-align: left;
  padding: 0;
}

/* ----- Contact: rich-purple panel with the same heading + subtitle sizing
   as every other section, and the form on a full-width cream card. ----- */
#contact {
  background: var(--purple);
  color: #fff;
  padding: 96px 0;
}

#contact .section-header {
  text-align: left;
  margin-bottom: 28px;
}

#contact .section-header .section-subtitle {
  color: var(--orange);
}

/* Two columns that share the section: "Contact" (form) next to
   "Location" (map). The columns are top-aligned and independent in height. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

.contact-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Fixed 6:5 shape (the image's own proportions) so the map never grows
   when the form does, e.g. when the message box is dragged taller. */
.map-card {
  flex: none;
  aspect-ratio: 6 / 5;
  position: relative;
  overflow: hidden;
  background: var(--card-bg-cream);
  box-shadow: 6px 6px 0 var(--orange);
  border-radius: var(--card-radius);
}

.map-card a,
.map-card img {
  display: block;
  width: 100%;
  height: 100%;
}

.map-card a {
  position: absolute;
  inset: 0;
}

.map-card img {
  object-fit: cover;
}

.contact-form {
  display: flex;
  flex-direction: column;
  background: var(--card-bg-cream);
  box-shadow: 6px 6px 0 var(--orange);
  border-radius: var(--card-radius);
  padding: clamp(20px, 3vw, 32px);
}

/* Each field is a row: label in a fixed left column, field filling the
   rest with its own single underline. On narrow screens the field wraps
   under its label on its own. */
.contact-form .form-group {
  margin-bottom: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 14px 0;
}

.contact-form .form-group:first-child {
  padding-top: 0;
}

.contact-form .form-group:has(textarea) {
  align-items: flex-start;
}

.contact-form label {
  flex: 0 0 64px;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-size: 18px;
  margin-bottom: 0;
}

/* The message label gets its own row so its ruled lines can run the full
   width underneath it instead of leaving a label-sized gap on the left. */
.contact-form .form-group:has(textarea) label {
  flex: 0 0 100%;
}

.contact-form input,
.contact-form textarea {
  flex: 1 1 160px;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 10px 0 0;
  line-height: 1.1;
  color: var(--ink);
  font-size: 18px;
}

.contact-form textarea {
  flex: 1 1 100%;
  border-bottom: none;
  background: repeating-linear-gradient(transparent 0 31px, var(--border) 31px 32px);
  line-height: 32px;
  padding: 0;
  font-size: 18px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: transparent;
}

.contact-form textarea:focus {
  background: repeating-linear-gradient(transparent 0 31px, var(--border) 31px 32px);
}

.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-error {
  color: #c0392b;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.contact-error:empty {
  display: none;
}

.contact-form .btn-primary {
  align-self: flex-end;
  margin-top: 16px;
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 17px;
  padding: 14px 36px;
  box-shadow: 4px 4px 0 var(--ink);
}

.contact-form .btn-primary:hover {
  box-shadow: 5px 5px 0 var(--ink);
}

/* ----- Footer ----- */
.footer {
  background: var(--purple-dark);
  padding: 28px 0 96px;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-content p {
  color: #cdb8df;
  font-size: 14px;
  margin-top: 4px;
}

.footer-brand {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.copyright {
  margin-top: 0 !important;
}

/* <900px: stacked layout per the handoff — dog mark centered with
   simple rings behind it (no diagonal clip), copy centered below. */
@media (max-width: 899px) {
  .nb-hero-intro {
    min-height: 0;
    margin-bottom: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 96px 0 0;
    gap: 24px;
  }

  .nb-hero-art-col {
    flex: none;
  }

  .nb-hero-art-wide {
    display: none;
  }

  .nb-hero-art-narrow {
    display: block;
    position: relative;
    width: 240px;
    height: 240px;
    flex-shrink: 0;
  }

  /* Same shrink-to-fit concern as .nb-hero-art-col above — the
     column-direction flex container's align-items: center would
     otherwise size this to fit its content instead of the full
     centered row width. */
  .nb-hero-intro > .container {
    width: 100%;
    flex: none;
  }

  .nb-hero-copy {
    text-align: center;
  }

  .hero h1.nb-hero-title {
    align-items: center;
  }

  .nb-hero-title-line:first-child,
  .nb-hero-title-line:last-child {
    font-size: clamp(32px, 10vw, 52px);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 0 0 72px;
  }

  .section {
    padding: 72px 0;
  }

  #contact {
    padding: 64px 0;
  }
}