/* ==================================================================
   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 { padding: 100px 0 !important; }
/* One complete gradient cycle per section: full color at the element's own top,
   fading to the neutral base by its own bottom edge. This previously sat only on
   the first section of each .grad-pair, so a single cycle was stretched across
   two sections and the rhythm drifted wherever their heights differed.
   .grad-band stays in the list because the homepage hero, privacy and thank-you
   wrap their opening content in a plain div that carries the background. */
.section, .hero-text, .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; }
/* The homepage hero is full-bleed, so its band starts flush at the very top and
   the photo runs under the fixed nav, whose rounded bottom corners then reveal
   the image instead of the page background. Scoped to the band holding the hero
   so other pages keep the 84px their headings need to clear the nav. Browsers
   without :has() simply keep the padding, which is the old look. */
.grad-band-first:has(.hero-video-wrapper) { padding-top: 0 !important; }
/* .bg-light used to be flattened to transparent so it read as the neutral half
   of a pair. Every section now carries its own gradient, and each .bg-light
   element is also a .section, so the rule above (which is !important, unlike
   base .bg-light) covers them. Neutralising here would cancel the gradient. */

/* ---- 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: solid full-width bar, flush to the top edge ---- */
.navbar, .navbar.scrolled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* iOS-style squircle (superellipse) corner masks. Unit 100x100 tiles scaled to
   --sq-r at use; each combines two rounded corners with straight fills so only
   one edge is rounded and the opposite edge stays square + flush. Roundness is
   set per element by overriding --sq-r: on .navbar::before (nav) and on
   .sticky-cta (mobile CTA); bigger = rounder. This is just the base default. */
:root{
  --sq-r: 60px;
  --sq-tl: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20d='M100%200L100%20100L0%20100L0.15%2062.32L0.61%2050.36L1.38%2041.76L2.46%2034.89L3.86%2029.14L5.59%2024.21L7.67%2019.94L10.11%2016.2L12.94%2012.94L16.2%2010.11L19.94%207.67L24.21%205.59L29.14%203.86L34.89%202.46L41.76%201.38L50.36%200.61L62.32%200.15Z'/%3E%3C/svg%3E");
  --sq-tr: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20d='M100%20100L0%20100L0%200L37.68%200.15L49.64%200.61L58.24%201.38L65.11%202.46L70.86%203.86L75.79%205.59L80.06%207.67L83.8%2010.11L87.06%2012.94L89.89%2016.2L92.33%2019.94L94.41%2024.21L96.14%2029.14L97.54%2034.89L98.62%2041.76L99.39%2050.36L99.85%2062.32Z'/%3E%3C/svg%3E");
  --sq-bl: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20d='M0%200L100%200L100%20100L62.32%2099.85L50.36%2099.39L41.76%2098.62L34.89%2097.54L29.14%2096.14L24.21%2094.41L19.94%2092.33L16.2%2089.89L12.94%2087.06L10.11%2083.8L7.67%2080.06L5.59%2075.79L3.86%2070.86L2.46%2065.11L1.38%2058.24L0.61%2049.64L0.15%2037.68Z'/%3E%3C/svg%3E");
  --sq-br: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20d='M0%20100L0%200L100%200L99.85%2037.68L99.39%2049.64L98.62%2058.24L97.54%2065.11L96.14%2070.86L94.41%2075.79L92.33%2080.06L89.89%2083.8L87.06%2087.06L83.8%2089.89L80.06%2092.33L75.79%2094.41L70.86%2096.14L65.11%2097.54L58.24%2098.62L49.64%2099.39L37.68%2099.85Z'/%3E%3C/svg%3E");
  --sq-mask-top:
    var(--sq-tl) top left / var(--sq-r) var(--sq-r) no-repeat,
    var(--sq-tr) top right / var(--sq-r) var(--sq-r) no-repeat,
    linear-gradient(#fff,#fff) top center / calc(100% - 2 * var(--sq-r)) var(--sq-r) no-repeat,
    linear-gradient(#fff,#fff) bottom left / 100% calc(100% - var(--sq-r)) no-repeat;
  --sq-mask-bottom:
    var(--sq-bl) bottom left / var(--sq-r) var(--sq-r) no-repeat,
    var(--sq-br) bottom right / var(--sq-r) var(--sq-r) no-repeat,
    linear-gradient(#fff,#fff) bottom center / calc(100% - 2 * var(--sq-r)) var(--sq-r) no-repeat,
    linear-gradient(#fff,#fff) top left / 100% calc(100% - var(--sq-r)) no-repeat;
  /* Rounder top corners (superellipse n=2 = a true circular corner, the
     roundest possible) - used only by the mobile CTA. */
  --sqr-tl: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20d='M100%200L100%20100L0%20100L0.38%2091.28L1.52%2082.64L3.41%2074.12L6.03%2065.8L9.37%2057.74L13.4%2050L18.08%2042.64L23.4%2035.72L29.29%2029.29L35.72%2023.4L42.64%2018.08L50%2013.4L57.74%209.37L65.8%206.03L74.12%203.41L82.64%201.52L91.28%200.38Z'/%3E%3C/svg%3E");
  --sqr-tr: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20d='M100%20100L0%20100L0%200L8.72%200.38L17.36%201.52L25.88%203.41L34.2%206.03L42.26%209.37L50%2013.4L57.36%2018.08L64.28%2023.4L70.71%2029.29L76.6%2035.72L81.92%2042.64L86.6%2050L90.63%2057.74L93.97%2065.8L96.59%2074.12L98.48%2082.64L99.62%2091.28Z'/%3E%3C/svg%3E");
  --sq-mask-top-round:
    var(--sqr-tl) top left / var(--sq-r) var(--sq-r) no-repeat,
    var(--sqr-tr) top right / var(--sq-r) var(--sq-r) no-repeat,
    linear-gradient(#fff,#fff) top center / calc(100% - 2 * var(--sq-r)) var(--sq-r) no-repeat,
    linear-gradient(#fff,#fff) bottom left / 100% calc(100% - var(--sq-r)) no-repeat;
}
/* White bar: full width, flush to the top and both side edges, with rounded
   bottom corners. Drawn on a ::before layer so the logo/menu are never clipped. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 0 0 80px 80px;
  filter: drop-shadow(0 3px 7px rgba(58,27,114,0.12));
  z-index: 0;
}
/* On phones, swap the circular bottom corners for true iOS squircles so the
   bar's curve matches the device's screen corners. (The mask clips the drop-
   shadow, so the subtle nav shadow drops on mobile; the hero below gives
   contrast. Fallback on browsers without mask support: square bottom corners.) */
@media (max-width: 1150px){
  .navbar::before{
    --sq-r: 60px;   /* nav is ~62px tall, so this is near its max roundness */
    border-radius: 0;
    filter: none;
    -webkit-mask: var(--sq-mask-bottom);
            mask: var(--sq-mask-bottom);
  }
}
.nav-container {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 13px 26px !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 { background: var(--ev-deep) !important; }
/* The nav "Request Information" button keeps its violet on hover/press/focus -
   no color shift. High specificity + !important overrides style.css's
   nav-cta:hover. (The sticky CTA's body is a masked ::before, so it has no
   hover color to change.) */
.nav-links a.nav-cta:hover, .nav-links a.nav-cta:active, .nav-links a.nav-cta:focus {
  background: var(--ev) !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 {
  /* Full-bleed: fill the viewport top to bottom and let the sides crop.
     dvh is listed second so browsers that support it avoid the mobile
     address-bar height jump; vh is the fallback. */
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* No background reset here: .hero-text is a section-level block, so it takes its
   own gradient cycle from the rule above rather than showing the tail of the
   hero band's (which, spanning the 100dvh photo, had already faded to neutral). */
.hero-text { 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: same full-bleed treatment as desktop. The 3:2 source is
     deliberately taller than 16:9 so a portrait screen crops less width and
     the centred logo stays on screen. */
  .hero img { height: 100dvh !important; width: 100% !important; object-fit: cover !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;
}

/* ---- Footer address + Google Maps minimap ---- */
.footer-address a {
  color: inherit !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.footer-address a:hover { border-bottom-color: rgba(255,255,255,0.7); }
.footer-map {
  margin-top: 14px;
  margin-bottom: 10px; /* matches the 10px gap between the social buttons */
  max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  line-height: 0;
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 160px;
  border: 0;
}

/* Click-to-load: nothing is requested from Google until the visitor opts in */
.footer-map-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 160px;
  padding: 0 16px;
  background: rgba(255,255,255,0.07);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  text-align: center;
  transition: background 0.15s ease;
}
.footer-map-btn:hover { background: rgba(255,255,255,0.13); }
.footer-map-btn .fm-pin { font-size: 1.5rem; line-height: 1; }
.footer-map-btn .fm-label { color: #fff; font-weight: 700; font-size: 0.92rem; }
.footer-map-btn .fm-note { color: rgba(255,255,255,0.6); font-size: 0.72rem; }

/* ---- Lead-inquiry form ---- */
.lead-form { max-width: 560px; margin: 0 auto; text-align: left; }
.lead-form .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .lead-form .lf-row { grid-template-columns: 1fr; } }
.lead-form .lf-field { margin-bottom: 16px; }
.lead-form label {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.lead-form .lf-req { color: var(--red); margin-left: 2px; }
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--lav);
  border-radius: 12px;
  padding: 12px 14px;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--ev);
  box-shadow: 0 0 0 3px rgba(87, 48, 198, 0.12);
}
.lead-form textarea { resize: vertical; }
.lead-form .lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form .lf-actions { text-align: center; margin-top: 8px; }
.lead-form .lf-status { text-align: center; margin-top: 14px; font-family: 'DM Sans', system-ui, sans-serif; }
.lead-form .lf-status.lf-error { color: var(--red); font-weight: 500; }

/* ---- "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%); }
}
/* Sticky-CTA text gleam. Both ends rest on the white base, so every loop is
   identical (no every-other-pass glitch), matching the Wolf Wellness eyebrows. */
@keyframes ctaTextShine {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta .cta-shine { animation: none; }  /* stays solid white, no sweep */
}

/* ---- Mobile sticky "Request Information" CTA (same shine as the nav button) ----
   Shown only once the nav collapses to the hamburger (<=1150px), so ad
   traffic always has a visible, shining call to action on every page. */
.sticky-cta { display: none; }
@media (max-width: 1150px) {
  /* Full-width bar, flush to the bottom and both side edges. The violet body is
     drawn on ::before and masked to an iOS squircle (rounded top corners) so its
     curve matches the phone screen; the parent's drop-shadow (no mask on the
     parent) hugs that squircle, and the ::after shine is clipped to the same
     shape. Fallback without mask support: a plain rectangular button. */
  .sticky-cta {
    --sq-r: 74px;   /* CTA is taller, so it can take a rounder corner */
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    /* trimmed vertical padding (was 16px) so the larger label keeps the button
       at its previous height and just fills more of it */
    padding: 11px 22px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    color: #fff;
    font-family: var(--serif);
    font-weight: 500;   /* lightest self-hosted Source Serif 4 weight - reads regular, not bold */
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-align: center;
    filter: drop-shadow(0 -3px 9px rgba(58,27,114,0.22));
  }
  .sticky-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ev);
    -webkit-mask: var(--sq-mask-top-round);
            mask: var(--sq-mask-top-round);
  }
  /* Text gleam - same recipe as the Wolf Wellness .eyebrow titles, with a purple
     streak (button color) instead of gold and a white base instead of dark green.
     Clipped to the glyphs via background-clip:text, so nothing animates outside
     the letters and the button edges are never revealed. */
  .sticky-cta .cta-shine {
    display: inline-block;
    color: #fff;  /* fallback if background-clip:text is unsupported */
    background-image: linear-gradient(100deg,
      #fff 0%, #fff 42%,
      #ab98e3 50%,   /* light lavender - lighter than the button so letters stay legible on the pass */
      #fff 58%, #fff 100%);
    background-size: 280% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ctaTextShine 6s linear infinite;
  }
  /* keep the footer's last line clear of the floating button */
  .footer { padding-bottom: 96px; }
  /* lift the Silktide cookie icon above the flush sticky CTA (accounts for the
     iPhone home-indicator safe area, which makes the CTA taller) */
  #stcm-wrapper #stcm-icon { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}