/* ==================================================================
   REDESIGN OVERRIDE LAYER  ·  "Fly.io" editorial style in H&H brand
   Sandbox stylesheet. Linked AFTER style.css (and after any page's own
   inline <style>) so it overrides the live look without editing the
   shared stylesheet. Used by all *-redesign.html sandbox pages.

   Neutral #f1f2f9 canvas, Source Serif display, DM Sans body, single
   bright-purple accent, pill nav + buttons, hairline cards, brand
   green->red->purple gradient bands, midnight-plum footer.
   ================================================================== */

/* ---- Self-hosted fonts (no external request, no load-in glitch) ---- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dmsans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dmsans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dmsans-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/dmsans-400i.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/sourceserif-500.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/sourceserif-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/sourceserif-500i.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/sourceserif-600i.woff2') format('woff2'); }

:root {
  --ev:      #5730C6;   /* navy-bright - the single CTA + accent  */
  --ev-deep: #3A1B72;   /* navy - CTA hover / deepest accent      */
  --ink:     #3A1B72;   /* navy - headings                        */
  --heather: #444668;   /* text-mid - body copy                   */
  --mist:    #ebe7f5;   /* navy-light - footer muted labels       */
  --plum:    #2a1455;   /* navy-dark - footer surface             */
  --lav:     #ebe7f5;   /* navy-light - hairline borders          */
  --iris:    #f1f2f9;   /* page canvas (neutral pause)            */
  --serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --grot:    'DM Sans', system-ui, -apple-system, sans-serif;
  --band:    linear-gradient(120deg, #ebe7f5, #e9f8e2); /* navy-light -> green-light soft band */
  --cta-shadow:  rgba(58,27,114,0.22) 0px 5px 14px -2px, rgba(58,27,114,0.14) 0px 2px 4px -2px;
  --soft-shadow: rgba(58,27,114,0.07) 0px 0px 0px 1px, rgba(58,27,114,0.06) 0px 10px 15px -3px, rgba(58,27,114,0.05) 0px 4px 6px -4px;
}

/* ---- Canvas + gradient bands ---- */
html, body { background: var(--iris) !important; }
.grad-pair { background: transparent !important; }
.section { background: transparent !important; padding: 100px 0 !important; }
/* The gradient lives on the FIRST section of each pair: full color at its
   top, fading to the neutral base by its own bottom edge (the seam). The
   pair's second section stays entirely the neutral base color. */
.grad-band {
  background:
    linear-gradient(180deg, rgba(241,242,249,0) 0%, #f1f2f9 100%),
    linear-gradient(110deg, rgba(104,196,56,0.18) 0%, rgba(232,19,22,0.11) 50%, rgba(87,48,198,0.20) 100%),
    #f1f2f9 !important;
}
.grad-band-first { padding-top: 84px !important; }
.bg-light { background: transparent !important; }

/* ---- Body: humanist grotesque, warm violet ink ---- */
body, p, li, .section-intro, .hero-sub, .program-list li,
.educator-role, .faq-a p {
  font-family: var(--grot) !important;
  color: var(--heather) !important;
  letter-spacing: 0.012em;
}

/* ---- Display: editorial serif, deep ink, tight tracking ---- */
h1, h2, h3, h4, .section-header h2, .hero-text h1, .nav-logo-text {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.16 !important;
}
.hero-text h1 { font-size: clamp(2.6rem, 6vw, 4.4rem) !important; letter-spacing: -0.03em !important; }
.section-header h2 { font-size: clamp(2rem, 4vw, 2.7rem) !important; }
h2 em { font-style: italic !important; font-family: var(--serif) !important; color: var(--ev) !important; }

/* ---- Eyebrow label: violet uppercase, tracked, no pill ---- */
.section-tag {
  background: transparent !important;
  border: none !important;
  color: var(--ev) !important;
  font-family: var(--grot) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  font-size: 0.8rem !important;
  padding: 0 !important;
}

/* ---- "Opening 2026" badge: soft white status pill ---- */
.coming-soon-badge {
  background: #fff !important;
  border: 1px solid var(--lav) !important;
  border-radius: 9999px !important;
  color: var(--ink) !important;
  box-shadow: var(--soft-shadow) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--grot) !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
}

/* ---- Nav: floating white pill, hairline + soft shadow ---- */
.navbar, .navbar.scrolled { background: transparent !important; border: none !important; box-shadow: none !important; padding-top: 14px !important; }
.nav-container {
  background: #fff !important;
  border: 1px solid var(--lav) !important;
  border-radius: 9999px !important;
  box-shadow: var(--soft-shadow) !important;
  padding: 8px 14px 8px 22px !important;
}
.nav-logo-text { font-family: var(--serif) !important; color: var(--ink) !important; }
.nav-links a { font-family: var(--grot) !important; color: var(--ink) !important; font-weight: 500 !important; letter-spacing: 0.01em; }
/* Mobile menu is a dark-purple overlay, so its links must be light */
@media (max-width: 1150px) {
  .nav-links a { color: #fff !important; }
}
.nav-menu-hero img { border-radius: 16px !important; }

/* ---- Buttons: pill shape, one violet fill + violet outline ---- */
.btn-primary, .nav-cta {
  background: var(--ev) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--grot) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  box-shadow: var(--cta-shadow) !important;
}
.btn-primary { padding: 14px 32px !important; }
.btn-primary:hover, .nav-cta:hover { background: var(--ev-deep) !important; }
.btn-secondary-dark, .btn-secondary {
  background: transparent !important;
  color: var(--ev) !important;
  border: 1.5px solid var(--ev) !important;
  border-radius: 9999px !important;
  font-family: var(--grot) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}
.btn-secondary-dark:hover, .btn-secondary:hover { background: rgba(87,48,198,0.08) !important; }

/* ---- Cards: white paper, 16px, hairline border, subtle lift ---- */
.about-card, .why-item, .approach-step, .program-card,
.educator-card, .faq-item, .value-card, .pay-card, .cost-card,
.scholarship-box, .finaid-box, .no-fees, .feature-card, .event-card {
  background: #fff !important;
  border: 1px solid var(--lav) !important;
  border-radius: 16px !important;
  box-shadow: var(--soft-shadow) !important;
  transition: transform 0.16s ease !important;
}
.about-card:hover, .why-item:hover, .approach-step:hover,
.program-card:hover, .educator-card:hover { transform: translateY(-4px); }
.featured-card { border: none !important; }
.featured-ribbon {
  position: static !important;
  transform: none !important;
  display: inline-block !important;
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  padding: 6px 18px !important;
  font-family: var(--grot) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 16px !important;
}

/* ==================================================================
   FLY.IO LAYOUT  ·  alternating two-column feature rows (homepage)
   ================================================================== */
.about-cards, .approach-steps, .programs-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 88px !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
}
.about-card, .approach-step, .program-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 56px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.about-card:hover, .approach-step:hover, .program-card:hover { transform: none !important; }
.about-img-wrap, .approach-img-wrap, .program-img-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--soft-shadow) !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  position: relative !important;
}
.about-img-wrap img, .approach-img-wrap img, .program-img-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  filter: none !important;
}
.about-card:nth-child(even) .about-img-wrap,
.approach-step:nth-child(even) .approach-img-wrap,
.program-card:nth-child(even) .program-img-wrap { order: 2 !important; }
.about-card-body, .approach-step-body, .program-card-body { padding: 0 !important; text-align: left !important; }
.about-card-body h3, .program-card-body h3, .approach-step-body h4 {
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  margin-bottom: 0 !important;
}
.about-card-body h3::after, .program-card-body h3::after, .approach-step-body h4::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--ev);
  margin: 16px 0 18px;
}

/* program / feature bullets -> green checkmark list */
.program-list { list-style: none !important; padding: 0 !important; margin-top: 20px !important; }
.program-list li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 11px !important;
  color: var(--heather) !important;
}
.program-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* Why-microschool: centered stat strip */
.why-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 56px 64px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
.why-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex-direction: column !important;
  text-align: center !important;
  max-width: 200px !important;
}
.why-item:hover { transform: none !important; }
.why-number { font-size: clamp(2.6rem, 5vw, 3.4rem) !important; }

/* Hero */
.hero-video-wrapper { margin-top: 0 !important; padding-top: 0 !important; background: transparent !important; }
.hero { background: transparent !important; text-align: center !important; }
.hero img {
  height: 46vh !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
}
.hero-text { background: transparent !important; text-align: center !important; }
.hero-text .hero-sub { max-width: 580px !important; margin-left: auto !important; margin-right: auto !important; }
.hero-actions { justify-content: center !important; }
.hero-text .btn-secondary-dark { display: none !important; }
.hero-stats {
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid var(--lav) !important;
  box-shadow: var(--soft-shadow) !important;
  border-radius: 9999px !important;
  padding: 16px 34px !important;
}
.hero-stat strong { color: var(--ink) !important; }
.hero-stat span { color: var(--heather) !important; }
.hero-stat-divider { background: var(--lav) !important; }

/* Contained video block */
.video-section { display: block !important; }
.video-section .section-header { text-align: center !important; }
.video-section .video-wrap {
  max-width: 1000px !important;
  width: 100% !important;
  margin: 0 auto !important;
  height: auto !important;
  max-height: none !important;
}

@media (max-width: 820px) {
  .about-card, .approach-step, .program-card {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .about-card:nth-child(even) .about-img-wrap,
  .approach-step:nth-child(even) .approach-img-wrap,
  .program-card:nth-child(even) .program-img-wrap { order: 0 !important; }
  .about-img-wrap, .approach-img-wrap, .program-img-wrap { max-width: 100% !important; }
  .about-cards, .approach-steps, .programs-grid { gap: 56px !important; }
  /* Mobile hero: full-width at natural height (no 46vh letterbox bands) */
  .hero img { height: auto !important; width: 100% !important; }
}

/* ---- Tags: soft lavender / green pills ---- */
.tag { border-radius: 9999px !important; border: none !important; font-family: var(--grot) !important; font-weight: 500 !important; }
.navy-tag { background: var(--lav) !important; color: var(--ink) !important; }
.green-tag { background: var(--green-light) !important; color: #357a16 !important; }

/* ---- "Why" numbers + hero stats in serif ink ---- */
.why-number, .hero-stat strong { font-family: var(--serif) !important; color: var(--ink) !important; }

/* ---- FAQ ---- */
.faq-q span { color: var(--ink) !important; font-weight: 500 !important; font-family: var(--grot) !important; }
.faq-chevron { color: var(--ev) !important; }

/* ---- Waitlist band ---- */
.waitlist { background: var(--iris) !important; }
.waitlist-bg { background: var(--band) !important; opacity: 1 !important; }

/* ---- Footer: midnight plum terminal ---- */
.footer { background: var(--plum) !important; }
.footer, .footer p, .footer a { color: var(--mist) !important; }
.footer h4 { color: #fff !important; }
.footer-opening, .footer-legal { color: var(--mist) !important; }

/* ==================================================================
   SECONDARY-PAGE HELPERS  ·  tuition / events / programs / privacy
   Tile grids on inner pages keep their own grid but pick up the new
   card chrome, serif headings, pills, and gradient bands.
   ================================================================== */

/* tuition cost figures + accents in brand purple */
.pay-amount, .cost-row.total, .cost-row.total .amount-big,
.cost-monthly strong { color: var(--ev) !important; }
.cost-card-head { background: var(--ink) !important; }
.cost-row.discount span:last-child, .program-list li::before { color: var(--green) !important; }
.no-fees { border: 1px solid var(--lav) !important; }
.scholarship-box { background: #fff !important; border-left: 4px solid var(--ev) !important; }
.finaid-box { background: #fff !important; border-left: 4px solid var(--green) !important; }
.optional-callout { background: #fff !important; border: 1px solid var(--lav) !important; border-radius: 16px !important; }
.optional-badge { background: var(--ev) !important; color: #fff !important; }

/* page hero banners (tuition-hero, legal-hero, programs hero) keep a
   solid deep-purple panel but adopt the serif + neutral rhythm */
.tuition-hero, .legal-hero, .events-hero, .programs-hero {
  background: var(--plum) !important;
}
.tuition-hero h1, .legal-hero h1, .events-hero h1, .programs-hero h1 { color: #fff !important; }
.tuition-hero p, .legal-hero p, .events-hero p, .programs-hero p { color: rgba(255,255,255,0.9) !important; }
.tuition-hero .section-tag, .legal-hero .section-tag,
.events-hero .section-tag, .programs-hero .section-tag { color: #fff !important; }
.events-hero h1 em, .programs-hero h1 em { color: var(--green) !important; }

/* ---- Programs page: hours banner as a solid white card (contrast fix) ---- */
.hours-banner {
  background: #fff !important;
  border: 1px solid var(--lav) !important;
  box-shadow: var(--soft-shadow) !important;
  border-radius: 16px !important;
  color: var(--ink) !important;
}
.hours-banner span { color: var(--heather) !important; }

/* ---- Programs page: feature-grids -> alternating image + text rows ---- */
.feature-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 88px !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
}
.feature-card.has-img {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 56px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.feature-card.has-img:hover { transform: none !important; }
.feature-img {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--soft-shadow) !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
}
.feature-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.feature-card.has-img:nth-child(even) .feature-img { order: 2 !important; }
.feature-card-body { text-align: left !important; padding: 0 !important; }
.feature-card-body h3 { font-size: clamp(1.6rem, 3vw, 2.3rem) !important; margin-bottom: 0 !important; }
.feature-card-body h3::after {
  content: ""; display: block; width: 64px; height: 2px;
  background: var(--ev); margin: 16px 0 18px;
}
@media (max-width: 820px) {
  .feature-card.has-img { grid-template-columns: 1fr !important; gap: 22px !important; }
  .feature-card.has-img:nth-child(even) .feature-img { order: 0 !important; }
  .feature-img { max-width: 100% !important; }
  .feature-grid { gap: 56px !important; }
}

/* ---- Fix stray "4" at page top: base style.css absolutely-positions
   .step-num (top:-14px; left:50%), which leaks onto the programs page's
   "How to Join" step circles and flings the number to the top of the page
   on load. Reset it to a normal in-row flex badge. ---- */
.step-num {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* ---- "Request Information" nav button: endless white shine sweep ----
   A white streak (110% of the button's width) passes across once every
   5 seconds, forever. */
.nav-cta {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}
.nav-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-110%);
  animation: navCtaShine 5s linear infinite;
}
@keyframes navCtaShine {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}