/* Spiral to Anchor — minimal layout fixes (keep template look) */

/* Book title link in topbar */
.s2a-book-title-link {
  color: inherit;
  text-decoration: none;
}
.s2a-book-title-link:hover {
  text-decoration: underline;
  color: inherit;
}

/* Navy "Join Today" button */
/* ── XL button — 50% larger than base ── */
.btn-main.s2a-btn-xl {
  font-size: 22px !important;
  padding: 9px 45px !important;
}

.btn-main.s2a-btn-navy,
.btn-main.s2a-btn-navy:hover {
  background: #363f4b !important;
  border-color: #363f4b !important;
  color: #fff !important;
}
.btn-main.s2a-btn-navy span {
  color: #fff !important;
}

/* ── Custom anchor cursor ── */
html, body {
  cursor: url('../images/cursor-anchor.svg') 16 4, auto;
}
a, button, [role="button"], .btn, .btn-main, .btn-line,
input[type="submit"], input[type="button"], select, label {
  cursor: url('../images/cursor-anchor.svg') 16 4, pointer;
}
/* Prevent Owl Carousel grab cursor on the familiar-section cards */
#sc-carousel,
#sc-carousel .owl-item,
#sc-carousel .owl-stage,
#sc-carousel .item,
#sc-carousel .s2a-story-card {
  cursor: url('../images/cursor-anchor.svg') 16 4, auto !important;
}

/* Single logo in header */
header #logo img.logo-scroll,
header #logo img.logo-mobile {
  display: none !important;
}

header #logo a {
  display: inline-block;
  line-height: 0;
}

header #logo {
  flex-shrink: 0;
  margin-right: 8px;
}

header #logo img.logo-main {
  display: block;
  max-height: 99px;
  max-width: 370px;
  width: auto;
}

header .header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

header .header-inner .de-flex {
  align-items: center;
  min-height: 99px;
}

header #mainmenu > li > a {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* ================================================================
   HOMEPAGE HEADER — TRANSPARENT OVERLAY ON FULL-SCREEN HERO
   The header is position:absolute, floating over the hero.
   Background is transparent so the hero's unbroken cream pattern
   shows through. The header scrolls away with the page as part
   of the hero block — it never becomes fixed/sticky.
   ================================================================ */

/* 1. Always absolute and transparent — never fixed/sticky, never solid white */
header.s2a-header-solid,
header.s2a-header-solid.transparent,
header.s2a-header-solid.header-light,
header.s2a-header-solid.header-light.transparent,
header.s2a-header-solid.smaller,
header.s2a-header-solid.header-light.smaller,
header.s2a-header-solid.clone,
header.s2a-header-solid.scroll-down,
header.s2a-header-solid.scroll-up,
header.s2a-header-solid.scrollOn,
header.s2a-header-solid.scrollOff,
body:not(.side-layout) header.s2a-header-solid:not(.header-mobile).header-light.transparent {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. On mobile, header-mobile class is added — keep it absolute over hero */
header.s2a-header-solid.header-mobile,
header.s2a-header-solid.header-light.header-mobile {
  position: absolute !important;
  top: 0 !important;
  background: transparent !important;
}

/* 3. Nav links readable on cream background */
header.s2a-header-solid #mainmenu > li > a,
header.s2a-header-solid.smaller #mainmenu > li > a {
  color: #363f4b !important;
}

/* 4. Mobile hamburger menu panel: cream bg so content is readable */
header.s2a-header-solid.s2a-nav-compact.menu-open .header-col-mid,
header.s2a-header-solid.menu-open .header-col-mid {
  background: #f6ede8 !important;
}

/* 5. No gap between header (out of normal flow) and content */
header.s2a-header-solid + #content {
  margin-top: 0 !important;
  background: #f6ede8 !important;
}

/* 6. Hero pattern repeats in both directions, covering full height from page top */
body .s2a-hero .swiper-inner::before {
  background-repeat: repeat !important;
  background-size: 719px 719px !important;
  background-position: center top !important;
}

/* "How we can help you" + "Does this sound familiar" sections — same nautical motifs as
   the hero, but baby blue at 12%. */
.s2a-help-pattern,
.s2a-familiar-section {
  position: relative;
  background-color: #FEFAF5;
}
.s2a-help-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/anchor-pattern-coral.svg');
  background-repeat: repeat;
  background-size: 719px 719px;
  background-position: center top;
  opacity: 0.10;
  z-index: 0;
  pointer-events: none;
}
.s2a-familiar-section::before {
  content: none;
}

/* "Your questions, answered plainly" FAQ — coral hairlines under each question */
.s2a-faq {
  position: relative;
  overflow: hidden;
  background-color: #FEFAF5;
}
.s2a-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/anchor-pattern-coral.svg');
  background-repeat: repeat;
  background-size: 719px 719px;
  background-position: center top;
  opacity: 0.10;
  z-index: 0;
  pointer-events: none;
}

.s2a-faq .accordion-section-title {
  border-bottom: solid 1px #eaa68a;
}

/* Dark hero pages — color logo, white nav */
header.s2a-header-dark-hero:not(.header-light):not(.smaller) #mainmenu > li > a {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

header.s2a-header-dark-hero:not(.header-light):not(.smaller) #menu-btn {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

header.s2a-header-dark-hero:not(.header-light):not(.smaller) a.btn-line,
header.s2a-header-dark-hero:not(.header-light):not(.smaller) a.btn-line span {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
}

/* About page — white logo, white nav on dark hero */
header.s2a-header-white-logo:not(.header-light):not(.smaller) #mainmenu > li > a,
header.s2a-header-white-logo:not(.header-light):not(.smaller) #menu-btn {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

header.s2a-header-white-logo:not(.header-light):not(.smaller) a.btn-line,
header.s2a-header-white-logo:not(.header-light):not(.smaller) a.btn-line span {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
}

/* About Joanie hero — slightly taller banner + photo fill */
#subheader.s2a-about-hero {
  background-position: center center;
  background-size: cover;
  padding: 200px 0 150px;
}

/* Program page: crop bear photo so hands/bear are centred */
#subheader.s2a-program-hero,
#subheader.s2a-program-hero .jarallax-img {
  background-position: 40% 55% !important;
  object-position: 40% 55% !important;
}

#subheader.s2a-about-hero .s2a-about-hero-overlay {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(54, 63, 75, 0.72) 0%,
    rgba(54, 63, 75, 0.45) 45%,
    rgba(54, 63, 75, 0.2) 100%
  );
  opacity: 1;
}

#subheader.s2a-about-hero h1,
#subheader.s2a-about-hero .subtitle {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* About Joanie practice section — same coral nautical SVG as homepage hero/FAQ */
.s2a-about-practice-section {
  position: relative;
}
.s2a-about-practice-section > .container {
  position: relative;
  z-index: 1;
}

/* Collapse to hamburger before nav links wrap (wide logo + 7 items + CTA) */
@media (max-width: 1400px) {
  header.s2a-nav-compact #menu-btn,
  #menu-btn {
    display: block !important;
    float: right;
    z-index: 1001;
  }

  header.header-light #menu-btn,
  header.header-light.s2a-nav-compact #menu-btn {
    color: var(--heading-font-color);
  }

  header.s2a-nav-compact:not(.menu-open) .header-col-mid,
  header:not(.menu-open) .header-col-mid {
    display: none !important;
  }

  header.s2a-nav-compact,
  header.s2a-nav-compact.header-mobile {
    overflow: hidden;
    position: relative !important;
  }

  header.s2a-nav-compact.menu-open,
  header.s2a-nav-compact.menu-open.header-mobile,
  header.menu-open {
    overflow: visible !important;
  }

  header.s2a-nav-compact.header-light,
  header.s2a-nav-compact.header-light.transparent,
  header.s2a-nav-compact.header-light.header-mobile {
    background: #fff;
  }

  header.s2a-nav-compact .de-flex {
    flex-wrap: nowrap;
  }

  header.s2a-nav-compact .de-flex > .de-flex-col:first-child {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
  }

  header.s2a-nav-compact .menu_side_area {
    flex-shrink: 0;
    margin-left: auto;
    z-index: 1002;
  }

  header.s2a-nav-compact.menu-open .header-col-mid,
  header.menu-open .header-col-mid {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 4px 24px 32px;
    box-sizing: border-box;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
  }

  header.s2a-nav-compact.menu-open #mainmenu,
  header.menu-open #mainmenu {
    display: block !important;
    position: static;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  header.s2a-nav-compact.menu-open #mainmenu > li,
  header.menu-open #mainmenu > li {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
  }

  header.s2a-nav-compact.menu-open #mainmenu > li::before,
  header.menu-open #mainmenu > li::before {
    display: none;
  }

  header.s2a-nav-compact.menu-open #mainmenu > li > a,
  header.menu-open #mainmenu > li > a {
    display: block;
    text-align: left;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    color: #333 !important;
    text-shadow: none !important;
  }

  header.s2a-nav-compact.menu-open #mainmenu > li:last-child > a,
  header.menu-open #mainmenu > li:last-child > a {
    border-bottom: none;
  }
}

header.smaller #logo img.logo-main {
  max-height: 84px;
  max-width: 312px;
}

header.smaller .header-inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

header.smaller .header-inner .de-flex {
  min-height: 84px;
}

/* Top bar: announcements left, social icons right */
#topbar .container {
  padding-top: 7px;
  padding-bottom: 7px;
}

#topbar .col-lg-12.d-flex {
  width: 100%;
  align-items: center;
}

#topbar .social-icons {
  margin-left: auto;
  flex-shrink: 0;
}

.s2a-topbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2.75rem;
  row-gap: 4px;
  min-width: 0;
}

#topbar .topbar-widget {
  font-size: 16px;
  padding: 6px 0;
  align-items: center;
}

#topbar .topbar-widget i {
  font-size: 30px;
  margin-top: 0;
  margin-right: 10px;
  line-height: 1;
  width: 30px;
  text-align: center;
}

#topbar .social-icons i,
#topbar .social-icons i.fa-lg {
  font-size: 22px;
  padding: 10px 8px;
  height: auto;
  width: auto;
  margin-top: 0;
}

.s2a-topbar-app-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.3;
}

#subheader.s2a-booking-hero {
  background-position: center 30% !important;
}

.s2a-topbar-app-label img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
}

header.smaller #topbar {
  margin-top: -50px;
}

/* ===== HOMEPAGE TOPBAR ===== */
#topbar.s2a-topbar-restyled {
  background: #202020 !important;
  border-bottom: none !important;
  height: auto !important;
  padding: 0 !important;
}

.s2a-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 46px;
  font-size: 13px;
  color: #cfc9c2;
}

.s2a-topbar-announcements {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 auto;
}

.s2a-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #cfc9c2;
}

.s2a-topbar-item a {
  color: #cfc9c2;
  text-decoration: none;
}

.s2a-topbar-icon {
  color: #eaa68a !important;
  font-size: 15px;
}

.s2a-topbar-icon-img {
  opacity: 0.8;
  display: block;
}

.s2a-book-title {
  font-style: italic;
  color: #efe9e2;
}

.s2a-topbar-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  flex-shrink: 0;
  display: inline-block;
}

.s2a-topbar-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.s2a-topbar-socials a {
  color: #a39e98 !important;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 15px;
}

.s2a-topbar-socials a:hover {
  color: #eaa68a !important;
}

/* ===== HEADER NAV — coral underline ===== */
header ul#mainmenu li a.menu-item {
  position: relative;
  padding-bottom: 4px;
}

header ul#mainmenu li a.menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #eaa68a;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

header ul#mainmenu li a.menu-item:hover::after,
header ul#mainmenu li a.menu-item.active::after {
  transform: scaleX(1);
}

/* Header consult button — aligned with nav items */
.menu_side_area {
  display: flex;
  align-items: center;
}

/* Header consult button — coral outlined pill */
.s2a-consult-btn {
  display: inline-block;
  border: 1.5px solid #363f4b !important;
  color: #FEFAF5 !important;
  background: #363f4b !important;
  border-radius: 999px !important;
  padding: 11px 26px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.22s ease, color 0.22s ease !important;
  white-space: nowrap;
}

.s2a-consult-btn:hover {
  background: #FEFAF5 !important;
  color: #363f4b !important;
  border-color: #363f4b !important;
}

/* ===== HEADLINE ACCENT ===== */
.hl-accent {
  color: #df9270;
  font-style: italic;
}

/* ===== CTA ROW ===== */
.cta-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 0;
}

.cta-row .btn-text {
  display: inline-block;
  width: fit-content;
  font-size: 15px;
  color: #373e4b;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid #eaa68a;
  padding-bottom: 3px;
  transition: color 0.2s ease;
  white-space: nowrap;
  align-self: center;
}

.cta-row .btn-text:hover {
  color: #df9270;
}

.cta-row .btn-text::after {
  display: none !important;
  content: none !important;
}

/* ===== FOOTER — Centered & Airy ===== */
.sta-footer {
  background: #14181e;
  color: rgba(255,255,255,0.7);
  padding: 0;
}

.sta-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 44px;
  text-align: center;
}

.sta-top {
  margin-bottom: 48px;
}

.sta-logo {
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}

.sta-mission {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,0.55);
  max-width: 580px;
  margin: 0 auto;
}

.sta-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  margin-bottom: 64px;
}

.sta-nav a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  padding: 0 18px;
  border-right: 1px solid rgba(255,255,255,0.18);
  line-height: 1;
  transition: color 0.2s;
}

.sta-nav a:last-child {
  border-right: none;
}

.sta-nav a:hover {
  color: #fff;
}

.sta-nav-cta {
  color: #d4a98a !important;
  font-weight: 600;
}

.sta-nav-cta:hover {
  color: #e5c3a8 !important;
}

.sta-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 52px;
}

.sta-email {
  text-decoration: none;
  color: inherit;
}

.sta-mail-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  transition: background 0.2s, border-color 0.2s;
}

.sta-email:hover .sta-mail-chip {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.26);
}

.sta-socials {
  display: flex;
  gap: 14px;
}

.sta-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.sta-socials a:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

.sta-foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 28px;
}

.sta-disclaimer {
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255,255,255,0.35);
  max-width: 640px;
  margin: 0 auto 20px;
}

.sta-foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
}

.sta-foot-legal a {
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color 0.2s;
}

.sta-foot-legal a:hover {
  color: rgba(255,255,255,0.7);
}

@media (max-width: 576px) {
  .sta-inner {
    padding: 52px 20px 36px;
  }
  .sta-nav {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .sta-nav a {
    border-right: none;
    padding: 0;
  }
  .sta-foot-legal {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

.bg-dark-1 .s2a-testimonial p {
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
}

.bg-dark-1 .s2a-testimonial p:last-child {
  margin-bottom: 0;
}

/* Slower header transitions */
header,
header div#logo,
header nav a {
  transition: all 0.8s ease !important;
}

/* Section eyebrow labels — e.g. HIGH-CONFLICT CO-PARENTING SUPPORT */
.subtitle {
  font-size: 13px;
}

.s2a-meet-photos img {
  display: block;
  object-fit: cover;
  aspect-ratio: 2 / 3;
}

.s2a-meet-photos .s2a-meet-portrait {
  top: 52px;
}

/* About page — compassionate support photo with sticky scroll */
.s2a-about-support-photo {
  position: relative;
  max-width: 520px;
  margin-left: auto;
  padding: 0 32px 40px 0;
}

.s2a-about-support-card {
  position: absolute;
  top: 36px;
  right: 0;
  bottom: 0;
  left: 36px;
  z-index: 0;
}

.s2a-about-support-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 7px;
  background: var(--bg-dark-1);
  border-radius: 8px;
}

.s2a-about-support-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}

@media (min-width: 992px) {
  .s2a-about-practice-section {
    overflow: visible;
  }

  .s2a-about-practice-row {
    align-items: stretch;
  }

  .s2a-about-practice-photo-col {
    display: flex;
    min-height: 100%;
  }

  .s2a-about-photo-sticky-track {
    flex: 1;
    width: 100%;
  }

  .s2a-about-support-photo {
    position: relative;
    top: auto;
    margin-top: 0;
    margin-left: auto;
    width: 100%;
    will-change: transform;
  }
}

@media (max-width: 991px) {
  .s2a-about-support-photo {
    margin: 0 auto;
    padding-right: 24px;
  }
}

/* Care team cards — staggered framed photos */
.s2a-care-team-photo {
  position: relative;
  max-width: 100%;
  margin: 0 auto 0.5rem;
  padding: 0 24px 32px 0;
}

.s2a-care-team-card {
  position: absolute;
  top: 28px;
  right: 0;
  bottom: 0;
  left: 28px;
  z-index: 0;
}

.s2a-care-team-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: clamp(7px, 1vw, 12px);
  background: var(--bg-dark-1);
  border-radius: 8px;
  box-shadow: 0 24px 56px -20px rgba(54, 63, 75, .5);
}

.s2a-care-team-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

/* Homepage hero — taller section, breathing room below menu */
.s2a-hero {
  overflow: visible !important;
  position: relative;
  z-index: 3;
}

/* The hero sizes itself to its content, with 860px as a FLOOR rather than a
   fixed height. The theme ships this block absolutely positioned at a locked
   height, which means any copy change overflows the box instead of growing it —
   and because the caption is centred, that overflow escapes in BOTH directions:
   upward under the logo and downward into the next section. Keeping the whole
   chain in normal flow (flex + min-height + height:auto) means longer or shorter
   copy simply makes the hero taller or shorter, and the paddings always hold. */
.s2a-hero .mh-800 {
  position: relative;
  min-height: 860px;
  display: flex;
  overflow: visible;
}

.s2a-hero .swiper-inner {
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  background: #C9AD80;
  overflow: visible;
}

.s2a-hero .swiper-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/anchor-pattern-navy.svg');
  background-repeat: repeat;
  background-size: 719px 719px;
  background-position: center top;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

/* Parents page — one continuous pale blue anchor pattern tiled across the whole page.
   Painted on a fixed body::before overlay (a pseudo-element) rather than the body
   background: the body background renders the same SVG ~3x larger (a body-bg quirk),
   whereas a pseudo-element tiles it at the true 460px size — matching the homepage hero.
   Fixed + full-viewport keeps it seamless with no reset at section boundaries. The photo
   hero (#subheader) and dark CTA carry their own backgrounds and cover it where needed. */
body.page-parents {
  background: transparent;
}
body.page-parents::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  background-image: url('../images/anchor-pattern-blue.svg');
  background-repeat: repeat;
  background-size: 719px 719px;
  background-position: top center;
  z-index: -1;
  pointer-events: none;
}

.page-home .s2a-hero .swiper-inner {
  background: #FEFAF5;
}

.page-home .s2a-hero .swiper-inner::before {
  background-image: url('../images/anchor-pattern-coral.svg');
  opacity: 0.10;
}


/* Center the image column against the full text block */
.s2a-hero .sw-caption .row > div:last-child {
  align-self: center;
}

/* Hero navy frame — solid navy matte, sharp corners */
.hero-navy-frame {
  display: block;
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  background: #363f4b;
  padding: clamp(7px, 1vw, 12px);
  box-shadow: 0 24px 56px -20px rgba(54, 63, 75, .5);
  border-radius: 8px;
}
.hero-navy-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Desktop hero: let the frame fill the right column properly */
.s2a-hero .hero-navy-frame {
  max-width: 100%;
}

.s2a-hero .sw-caption {
  top: auto;
  transform: none;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 260px 0 120px;
  box-sizing: border-box;
  z-index: 3;
  position: relative;
}

.s2a-hero .sw-caption .container {
  padding-top: 0;
  transform: none;
}

.s2a-hero .sw-text-wrapper {
  margin-bottom: 1.5rem;
}

.s2a-hero h1 {
  font-size: 72px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #363f4b;
}

.s2a-hero .lead {
  margin-bottom: 2rem;
  color: #363f4b;
}

.s2a-hero .subtitle {
  color: rgba(54, 63, 75, 0.75);
}

.s2a-hero .cta-row .btn-text,
.s2a-hero .cta-row .btn-text:hover {
  color: #363f4b;
}

.s2a-hero .btn-main,
.s2a-cta-section .btn-main {
  white-space: nowrap;
  flex-shrink: 0;
}

.s2a-hero a.btn-main,
.s2a-hero a.btn-main:visited,
.s2a-hero a.btn-main:focus,
.s2a-hero a.btn-main:active,
.s2a-cta-section a.btn-main,
.s2a-cta-section a.btn-main:active,
.s2a-cta-section a.btn-main:focus,
.s2a-cta-section a.btn-main:visited,
body.page-home a.btn-main,
body.page-home a.btn-main:visited,
body.page-home a.btn-main:focus,
body.page-home a.btn-main:active {
  background: #FEFAF5;
  border: 1.5px solid #363f4b;
  color: #363f4b;
}

.s2a-hero a.btn-main:hover,
.s2a-cta-section a.btn-main:hover,
body.page-home a.btn-main:hover {
  background: #363f4b;
  border-color: #363f4b;
  color: #FEFAF5;
}

.s2a-cta-section .de-flex {
  flex-wrap: wrap;
  gap: 1rem;
}

.s2a-hero .btn-main {
  margin-top: calc(0.5rem - 14px);
}

@media (max-width: 991px) {
  header #logo img.logo-main {
    max-height: 84px;
    max-width: 312px;
  }

  header .header-inner .de-flex {
    min-height: 84px;
  }

  /* Hero sizing below 992px is owned by the mobile block at the end of this
     file, where the header sits in normal flow. Deliberately nothing
     hero-geometry related here — duplicate floors/paddings at this breakpoint
     were dead but would silently reactivate the old overflow bug if the
     mobile block's !important ever came off. */

  .s2a-hero h1 {
    font-size: 48px;
    line-height: 1.1;
  }
}

/* CTA band — custom abstract background */
.s2a-cta-section {
  position: relative;
  overflow: hidden;
  background-color: #ecf5f9 !important;
}

.s2a-cta-section .jarallax-img {
  opacity: 0;
}

.s2a-cta-section .s2a-cta-overlay {
  display: none;
}

.s2a-cta-section .col-lg-6 > h2,
.s2a-cta-section .col-lg-6 > p,
.s2a-cta-section .col-lg-6 .de-flex p.text-white {
  color: #363f4b;
  text-shadow: none;
}

.s2a-cta-section .col-lg-6 > p {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.65;
}

.s2a-cta-section .s2a-cta-row {
  align-items: flex-end;
}

.s2a-cta-section .col-lg-5 {
  padding-top: 0.25in;
}

.s2a-cta-section .s2a-cta-portrait-wrap {
  width: 54%;
  margin: 0 auto;
}

.s2a-cta-section .s2a-cta-portrait-wrap img {
  width: 100%;
  display: block;
  transform: translateY(0.35in);
}

@media (max-width: 991px) {
  .s2a-cta-section .col-lg-5 {
    padding-top: 0;
  }

  .s2a-cta-section .s2a-cta-portrait-wrap {
    margin: 2rem auto 0;
  }

  .s2a-cta-section .s2a-cta-portrait-wrap img {
    transform: none;
  }
}

/* Does any of this sound familiar — flip cards */
.s2a-familiar-section .s2a-story-card {
  perspective: 1200px;
  background: #363f4b;
}

.s2a-familiar-section .s2a-story-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s ease;
}

.s2a-familiar-section .s2a-story-card:hover .s2a-story-card-inner {
  transform: rotateY(180deg);
}

.s2a-familiar-section .s2a-story-card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.s2a-familiar-section .s2a-story-card-front {
  position: relative;
  transform: rotateY(0deg);
}

.s2a-familiar-section .s2a-story-card-back {
  position: absolute;
  inset: 0;
  background: #363f4b;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2a-familiar-section .s2a-story-card-back-inner {
  padding: 1.75rem 1.25rem;
}

.s2a-familiar-section .s2a-story-card-back p {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.s2a-familiar-section .s2a-story-card-back .btn-line {
  color: #fff;
}

.s2a-familiar-section .s2a-story-card-front-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
}

.s2a-familiar-section .s2a-story-card-front-title h3 {
  color: #fff;
  margin: 0;
}


/* ================================================================
   RESPONSIVE — Spiral to Anchor mobile / tablet refinements
   ================================================================ */

/* ── Global foundation ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

body {
  overflow-x: hidden;
}

/* ── Fix: logo-main stays visible on all screen sizes ────────── */
/* Template hides .logo-main and shows .logo-mobile at 767px.
   We suppress logo-mobile, so we must keep logo-main alive. */
@media (max-width: 767px) {
  header #logo img.logo-main {
    display: block !important;
    max-height: 70px;
    max-width: 240px;
  }
}

@media (max-width: 480px) {
  header #logo img.logo-main {
    max-height: 58px;
    max-width: 200px;
  }
}

/* ── Header consult button — shrink / hide at small sizes ─────── */
@media (max-width: 767px) {
  .s2a-consult-btn {
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .s2a-consult-btn {
    display: none !important;
  }
}

/* ── Hero section ─────────────────────────────────────────────── */

/* 1024px — small laptop */
@media (max-width: 1024px) {
  .s2a-hero .mh-800 {
    min-height: 920px;
  }

  /* The header is still an absolute overlay in this range (it only rejoins the
     flow below 992px), so the top padding has to clear it just like on desktop.
     165px left only ~7px under the logo once the hero started sizing to content. */
  .s2a-hero .sw-caption {
    padding: 260px 0 140px;
  }

  .s2a-hero h1 {
    font-size: 56px;
  }
}

/* 768px — tablet */
@media (max-width: 768px) {
  .s2a-hero h1 {
    font-size: 44px;
    line-height: 1.12;
  }

  .s2a-hero .lead {
    font-size: 16px;
    margin-bottom: 1.5rem;
  }

  .cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* 576px — large phone */
@media (max-width: 576px) {
  .s2a-hero h1 {
    font-size: 38px;
    line-height: 1.13;
  }

  .cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .cta-row .btn-text {
    white-space: normal;
  }
}

/* 480px — small phone */
@media (max-width: 480px) {
  .s2a-hero h1 {
    font-size: 34px;
    line-height: 1.14;
  }
}

/* ── Inner-page subheader heroes ─────────────────────────────── */
@media (max-width: 767px) {
  #subheader.s2a-about-hero {
    padding: 130px 0 90px;
  }

  #subheader {
    padding: 100px 0 60px !important;
  }
}

@media (max-width: 480px) {
  #subheader.s2a-about-hero {
    padding: 100px 0 60px;
  }

  #subheader {
    padding: 80px 0 50px !important;
  }
}

/* ── Section spacing on mobile ───────────────────────────────── */
@media (max-width: 576px) {
  section {
    padding-left: 0;
    padding-right: 0;
  }

  .p-40 {
    padding: 28px !important;
  }
}

/* ── Footer refinements ──────────────────────────────────────── */
@media (max-width: 768px) {
  .sta-inner {
    padding: 56px 20px 36px;
  }

  .sta-nav {
    gap: 12px 0;
  }

  .sta-mail-chip {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .sta-inner {
    padding: 44px 16px 30px;
  }

  .sta-mail-chip {
    font-size: 12px;
    padding: 9px 16px;
  }

  .sta-nav {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .sta-nav a {
    border-right: none;
    padding: 0;
  }

  .sta-foot-legal {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* ── About page support photo ────────────────────────────────── */
@media (max-width: 768px) {
  .s2a-about-support-photo {
    padding: 0 16px 24px 0;
    max-width: 100%;
  }
}

/* ── Booking form — full width on mobile ─────────────────────── */
@media (max-width: 576px) {
  .s2a-booking-form .col-lg-8 {
    padding: 0 8px;
  }
}


/* ================================================================
   HOW IT WORKS — four-step section
   ================================================================ */
.hiw{ background:var(--hiw-cream,#FEFAF5); color:var(--hiw-slate,#404a59);
  --hiw-ink:#373e4b; --hiw-slate:#404a59; --hiw-cream:#FEFAF5; --hiw-coral:#eaa68a; --hiw-coral-deep:#df9270;
  position:relative; overflow:hidden; }
.hiw::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('../images/anchor-pattern.svg');
  background-repeat:repeat;
  background-size:719px 719px;
  background-position:center top;
  opacity:0.12;
  z-index:0;
  pointer-events:none;
}
.hiw a{ text-decoration:none; }
.hiw-inner{ max-width:1440px; margin:0 auto; padding:78px 40px 86px; position:relative; z-index:1; }

.hiw-eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:13px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--hiw-coral); margin:0; }
.hiw-tick{ width:30px; height:2px; background:var(--hiw-coral); border-radius:2px; }
.hiw-title{ text-align:center; color:var(--hiw-ink); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(32px,4.5vw,50px); line-height:1.1; margin:18px 0 0; }
.hiw-ital{ font-style:italic; color:var(--hiw-coral-deep); }
.hiw-sub{ text-align:center; font-size:17px; line-height:1.7; color:var(--hiw-slate);
  max-width:600px; margin:18px auto 0; }

.hiw-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:58px; }
.hiw-connector{ position:absolute; top:64px; left:11%; right:11%; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg,var(--hiw-coral) 0 7px,transparent 7px 16px); opacity:.5; }

.hiw-card{ position:relative; z-index:1; background:#fffdfb; border:1px solid rgba(234,166,138,.28);
  border-radius:20px; padding:30px 28px 32px; display:flex; flex-direction:column;
  box-shadow:0 24px 44px -34px rgba(55,62,75,.45); transition:transform .25s ease, box-shadow .25s ease; }
.hiw-card:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -32px rgba(55,62,75,.5); }
.hiw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.hiw-num{ font-size:46px; font-weight:600; line-height:1; color:var(--hiw-coral); }
.hiw-ic{ width:50px; height:50px; flex:0 0 50px; border-radius:50%; display:grid; place-items:center;
  background:rgba(234,166,138,.14); color:var(--hiw-coral-deep); }
.hiw-ct{ font-size:26px; font-weight:600; color:var(--hiw-ink); margin:0 0 14px; line-height:1.12; letter-spacing:-.005em; }
.hiw-cb{ font-size:14.5px; line-height:1.68; color:var(--hiw-slate); margin:0; }

.hiw-cta{ display:flex; justify-content:center; margin-top:54px; }
.hiw-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--hiw-coral); color:#fff;
  font-size:15px; font-weight:500; padding:15px 30px; border-radius:999px;
  box-shadow:0 12px 26px -12px rgba(223,146,112,.8); transition:transform .22s ease, background .22s ease; }
.hiw-btn:hover{ background:var(--hiw-coral-deep); color:#fff; transform:translateY(-2px); }
.hiw-btn svg{ transition:transform .22s ease; }
.hiw-btn:hover svg{ transform:translateX(3px); }

/* ---------- TABLET: 2 × 2 grid, hide connector ---------- */
@media (max-width:1000px){
  .hiw-inner{ padding:64px 32px 70px; }
  .hiw-grid{ grid-template-columns:repeat(2,1fr); gap:22px; margin-top:46px; }
  .hiw-connector{ display:none; }
}

/* ---------- MOBILE: single column ---------- */
@media (max-width:600px){
  .hiw-inner{ padding:52px 20px 60px; }
  .hiw-grid{ grid-template-columns:1fr; gap:18px; margin-top:38px; }
  .hiw-sub{ font-size:16px; }
  .hiw-card{ padding:26px 24px 28px; }
  .hiw-num{ font-size:40px; }
  .hiw-ct{ font-size:23px; }
  .hiw-btn{ width:100%; justify-content:center; }
}


/* ── Mission / Vision / Values — divider above closing paragraphs ── */
.s2a-mvv-divider {
  border: 0;
  height: 1px;
  background: rgba(234, 166, 138, 0.45);
  margin: 28px 0 30px;
  opacity: 1;
}

/* Tab nav border — match the coral of the anchor/steering wheel motifs */
.s2a-about-practice-section .d-tab-nav.border-bottom {
  border-bottom-color: rgba(234, 166, 138, 0.45) !important;
}


/* ================================================================
   FOR PARENTS — left-anchored hero (page hero / subheader)
   ================================================================ */

/* The photo is set here rather than via data-bgimage. The theme's customBg()
   writes data-bgimage into an INLINE background shorthand, which cannot be
   overridden per breakpoint — so the focal point could never adapt. Declaring
   it in CSS keeps the subject framable at every width.
   Focal point of this photo (the two faces) sits at ~64% x / ~20% y.
   NOTE: if this photo is ever swapped out, the three background-position values
   tuned to it — here, in the 992-1199 block, and on the <=991 photo band — must
   each be retuned to the new subject, or it will be cropped out again. */
#subheader.s2a-ph-hero {
  background-image: url(../images/slider/hero-parents.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 68% 20%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
}

/* Left-to-right legibility scrim */
.ph-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(95deg,
    rgba(38,40,42,.86) 0%,
    rgba(38,40,42,.72) 34%,
    rgba(38,40,42,.28) 58%,
    rgba(38,40,42,0) 78%);
}

/* Content block */
.ph-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  /* Top padding must clear the absolutely-positioned header (topbar + logo bar
     ≈ 165px) so the eyebrow/title never slide under the logo, no matter how
     long or short the copy is — content grows downward from this fixed line. */
  padding: 200px 60px 110px;
}

.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #f3c7b4;
  margin: 0 0 22px;
}

.ph-tick {
  width: 28px;
  height: 2px;
  background: #eaa68a;
  border-radius: 2px;
  display: inline-block;
}

.ph-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.07;
  margin: 0;
  max-width: 560px;
}

.ph-lede {
  color: rgba(255,255,255,.9);
  font-size: 17px;
  line-height: 1.7;
  margin: 24px 0 0;
  max-width: 480px;
}

.ph-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #eaa68a;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 999px;
  box-shadow: 0 12px 26px -12px rgba(223,146,112,.8);
  transition: background .22s ease, transform .22s ease;
}

.ph-btn:hover { background: #df9270; color: #fff; transform: translateY(-2px); }
.ph-btn svg { transition: transform .22s ease; }
.ph-btn:hover svg { transform: translateX(3px); }

.ph-link {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1.5px solid #eaa68a;
  padding-bottom: 3px;
  transition: color .2s ease;
}

.ph-link:hover { color: #f3c7b4; }

/* ---------- TABLET ----------
   991px, not 1000px: the header only rejoins normal flow below 992px, so the
   reduced top padding is only safe once the header no longer overlays the hero. */
@media (max-width: 991px) {
  .ph-scrim {
    background: linear-gradient(95deg,
      rgba(38,40,42,.9) 0%, rgba(38,40,42,.78) 45%,
      rgba(38,40,42,.4) 75%, rgba(38,40,42,.15) 100%);
  }
  .ph-content { padding: 72px 40px 90px; max-width: 80%; }
}

/* Close the white gap between the cream header and hero on mobile.
   The template injects margin-top:50px on #content at ≤767px, and #content
   has a white background. When s2a-header-solid is in normal flow (not absolute),
   that creates a visible white seam. Zero the margin and match the hero background. */
@media (max-width: 767.98px) {
  header.s2a-header-solid + #content {
    margin-top: 0 !important;
  }
  header.s2a-header-solid ~ #content,
  header.s2a-header-solid + #content {
    background: #f6ede8 !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .ph-scrim {
    background: linear-gradient(180deg, rgba(38,40,42,.55) 0%, rgba(38,40,42,.8) 100%);
  }
  .ph-content { padding: 56px 22px 64px; max-width: 100%; }
  .ph-lede { font-size: 16px; }
  .ph-cta { gap: 18px; }
  .ph-btn { width: 100%; justify-content: center; }
  .ph-link { width: 100%; }
}

/* ================================================================
   DISCLAIMER PAGE
   ================================================================ */
.s2a-disclaimer-body {
  background: #EAF5F9;
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
}
.s2a-disclaimer-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/anchor-pattern-blue.svg');
  background-repeat: repeat;
  background-size: auto 1060px;
  background-position: left top;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}
.s2a-disclaimer-body > .container {
  position: relative;
  z-index: 1;
}
.s2a-disc-intro {
  max-width: 700px;
  margin: 0 auto 52px;
  text-align: center;
}
.s2a-disc-intro p {
  font-size: 17px;
  line-height: 1.85;
  color: #404a59;
}
.s2a-disc-card {
  background: #fff;
  border: 1px solid rgba(137,207,240,0.4);
  border-radius: 14px;
  padding: 32px 36px;
  margin-bottom: 20px;
}
.s2a-disc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #69b8d8;
  margin: 0 0 12px;
}
.s2a-disc-card p {
  font-size: 15px;
  line-height: 1.82;
  color: #404a59;
  margin: 0;
}
.s2a-disc-emergency {
  background: #363f4b;
  border-radius: 14px;
  padding: 32px 36px;
  margin-top: 8px;
}
.s2a-disc-emergency .s2a-disc-label {
  color: rgba(137,207,240,0.8);
}
.s2a-disc-emergency p {
  font-size: 15px;
  line-height: 1.82;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.s2a-disc-emergency strong {
  color: #fff;
}
@media (max-width: 576px) {
  .s2a-disc-card    { padding: 24px 22px; }
  .s2a-disc-emergency { padding: 24px 22px; }
  .s2a-disclaimer-body { padding: 52px 0 64px; }
}

/* ================================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   Same chrome + backdrop as the disclaimer page; long-form copy
   lives in a single white card.
   ================================================================ */
.s2a-legal-body {
  background: #EAF5F9;
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
}
.s2a-legal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/anchor-pattern-blue.svg');
  background-repeat: repeat;
  background-size: auto 1060px;
  background-position: left top;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}
.s2a-legal-body > .container {
  position: relative;
  z-index: 1;
}
.s2a-legal-card {
  background: #fff;
  border: 1px solid rgba(137,207,240,0.4);
  border-radius: 14px;
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 52px;
}
.s2a-legal-card .s2a-legal-effective {
  font-size: 14px;
  color: #6b7684;
  margin: 0 0 32px;
}
.s2a-legal-card h2 {
  font-size: 19px;
  font-weight: 700;
  color: #363f4b;
  margin: 36px 0 10px;
}
.s2a-legal-card p {
  font-size: 15px;
  line-height: 1.82;
  color: #404a59;
  margin: 0 0 16px;
}
.s2a-legal-card ul {
  margin: 0 0 16px 24px;
  padding: 0;
}
.s2a-legal-card ul li {
  font-size: 15px;
  line-height: 1.82;
  color: #404a59;
  margin-bottom: 6px;
}
.s2a-legal-card a {
  color: #363f4b;
}
@media (max-width: 576px) {
  .s2a-legal-card { padding: 28px 22px; }
  .s2a-legal-body { padding: 52px 0 64px; }
}


/* ================================================================
   RESPONSIVE OVERHAUL — full-site layout fixes
   ================================================================ */

/* ── 0. Global baseline ──────────────────────────────────────────── */
/* Ensure all headings can wrap and never overflow */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Split-text plugins add white-space:nowrap to the parent element
   which prevents multi-word headings from wrapping. Override it. */
h1.split,
h2.split,
h3.split {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Split word/char spans: keep inline-block but ensure wrapping */
h1.split span,
h2.split span,
h3.split span,
.split .word,
.split .char {
  white-space: normal !important;
}

/* Flex / grid children must be able to shrink below content-size */
.row > [class*="col-"],
.de-flex > * {
  min-width: 0;
}

/* No element wider than the viewport */
html { overflow-x: hidden; }

/* ── 1. Topbar — single-line at tablet and mobile ───────────────── */
@media (max-width: 991px) {
  .s2a-topbar-inner {
    padding: 0 24px;
    font-size: 12.5px;
  }
  .s2a-topbar-announcements {
    gap: 14px;
  }
}

/* At tablet/mobile keep only the first announcement item */
@media (max-width: 768px) {
  .s2a-topbar-dot ~ .s2a-topbar-item {
    display: none !important;
  }
  .s2a-topbar-dot {
    display: none !important;
  }
  .s2a-topbar-inner {
    padding: 0 16px;
    font-size: 12px;
    min-height: 40px;
    height: auto;
  }
  .s2a-topbar-announcements {
    gap: 0;
    justify-content: center;
  }
}

/* ── 2. Fluid h2 / h3 at tablet and mobile ──────────────────────── */
/* Override the template's --h2-font-size: 48px variable */
@media (max-width: 1024px) {
  :root { --h2-font-size: 40px; --h3-font-size: 30px; }
  h2 { font-size: 40px; }
}

@media (max-width: 768px) {
  :root { --h2-font-size: 32px; --h3-font-size: 24px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
}

@media (max-width: 576px) {
  :root { --h2-font-size: 28px; --h3-font-size: 21px; }
  h2 { font-size: 28px; }
  h3 { font-size: 21px; }
}

@media (max-width: 400px) {
  :root { --h2-font-size: 24px; --h3-font-size: 19px; }
  h2 { font-size: 24px; }
  h3 { font-size: 19px; }
}

/* ── 3. Scrim-hero h1 (service, program, about subheaders) ────────── */
@media (max-width: 768px) {
  #subheader h1,
  .s2a-ph-hero h1,
  .s2a-about-hero h1 {
    font-size: clamp(30px, 8vw, 52px);
    line-height: 1.1;
  }
}

@media (max-width: 480px) {
  #subheader h1,
  .s2a-ph-hero h1,
  .s2a-about-hero h1 {
    font-size: clamp(26px, 9vw, 40px);
  }
}

/* ── 4. Inner-page scrim hero — For Parents ──────────────────────────
   The copy overlays the photo only while there is room for both side by
   side. Narrower than that, the text would sit on top of the faces, so the
   hero stops overlaying and stacks instead: photo band on top, copy below
   on solid navy. That guarantees the subject is visible at every width. */

/* Squeeze point: text column still overlays, so push the subject further
   right and give the copy less room rather than letting them collide. */
@media (min-width: 992px) and (max-width: 1199px) {
  #subheader.s2a-ph-hero {
    background-position: 76% 20%;
    /* The vendor's mobile query is max-width:992px while the stacked layout
       starts at 991px. Without this, that 1px seam would apply the vendor's
       !important padding to the overlay layout and jog the copy down 40px. */
    padding: 0 !important;
  }
  #subheader.s2a-ph-hero .ph-content {
    max-width: 500px;
    padding-right: 40px;
  }
}

/* Stacked: photo band above the copy, no overlap at all. One custom
   property drives both the band height and the space reserved for it, so
   the two cannot drift apart. */
@media (max-width: 991px) {
  #subheader.s2a-ph-hero {
    --ph-photo-h: clamp(240px, 60vw, 380px);
    background-image: none;
    background-color: #2f3947;
    justify-content: flex-start;
    min-height: 0;
    /* !important is required: the vendor theme sets `#subheader { padding: ...
       !important }` inside its own mobile query, which otherwise eats the space
       reserved for the photo band and drops the copy on top of the faces. */
    padding: var(--ph-photo-h) 0 0 !important;
  }

  #subheader.s2a-ph-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ph-photo-h);
    background-image: url(../images/slider/hero-parents.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* Centre the two faces in the band */
    background-position: 64% 18%;
    z-index: 0;
  }

  /* Copy sits on solid navy now, so the legibility scrim is redundant */
  #subheader.s2a-ph-hero .ph-scrim {
    display: none;
  }

  #subheader.s2a-ph-hero .ph-content {
    max-width: 100%;
    padding: 30px 24px 54px;
    position: relative;
    z-index: 2;
  }
}

/* ── 5. Content sections — comfortable padding on small screens ──── */
@media (max-width: 768px) {
  section {
    overflow-x: hidden;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── 6. About page — practice section heading ────────────────────── */
@media (max-width: 768px) {
  .s2a-about-practice-section h2 {
    font-size: 30px !important;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .s2a-about-practice-section h2 {
    font-size: 26px !important;
  }
}

/* ── 7. About — two-column practice row stacks cleanly on tablet ─── */
@media (max-width: 991px) {
  .s2a-about-practice-row .col-lg-6:first-child {
    margin-bottom: 2rem;
  }
}

/* ── 8. CTA section — portrait image responsive ──────────────────── */
@media (max-width: 768px) {
  .s2a-cta-section .s2a-cta-portrait-wrap {
    width: 55%;
    margin: 28px auto 0;
  }
}

@media (max-width: 576px) {
  .s2a-cta-section .s2a-cta-portrait-wrap {
    width: 70%;
  }
}

/* ── 9. How It Works section — inner padding ────────────────────── */
@media (max-width: 768px) {
  .hiw-inner {
    padding: 52px 24px 60px;
  }
}

@media (max-width: 480px) {
  .hiw-inner {
    padding: 40px 16px 48px;
  }
}

/* ── 10. Feature / story cards — ensure full-width on mobile ──────── */
@media (max-width: 576px) {
  .s2a-familiar-section .row > .col-md-4,
  .row > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── 11. Booking form — full-width fields, prevent iOS zoom ──────── */
@media (max-width: 576px) {
  .s2a-booking-form .col-lg-8,
  .s2a-booking-form .col-md-8 {
    padding-left: 4px;
    padding-right: 4px;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
  }
}

/* ── 12. Disclaimer cards — comfortable on small phones ─────────── */
@media (max-width: 400px) {
  .s2a-disc-card,
  .s2a-disc-emergency {
    padding: 20px 16px;
  }
}

/* ── 13. Footer — tighter at very small sizes ────────────────────── */
@media (max-width: 400px) {
  .sta-inner {
    padding: 36px 12px 28px;
  }
}

/* ── 14. Topbar — keep topbar social icons accessible on mobile ──── */
@media (max-width: 480px) {
  .s2a-topbar-socials {
    gap: 10px;
  }
  .s2a-topbar-socials a {
    font-size: 14px;
  }
}

/* ── Services carousel — hide nav arrows when all 3 items are visible ── */
@media (min-width: 1200px) {
  .de-custom-nav[data-target="#services-carousel"] {
    display: none !important;
  }
}

/* ── Services carousel — consistent, smaller circles with even spacing ── */
#services-carousel .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#services-carousel .hover.circle {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 240px;
}
#services-carousel .hover.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── 15. Button tap targets — comfortable on mobile ─────────────── */
@media (max-width: 576px) {
  .btn-main,
  .btn-line,
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ================================================================
   CHILDREN'S BOOK — Arlo's Tale of Two Islands (childrens-book.html)
   ================================================================ */

/* ---------- HERO ---------- */
.book-hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 180px 20px 210px;
  background:
    radial-gradient(70% 52% at 50% 72%, rgba(242,205,168,.55), rgba(242,205,168,0) 72%),
    linear-gradient(180deg, #2b333d 0%, #34404c 24%, #47565f 44%, #7e8a87 62%, #cf9d80 82%, #e7b89c 100%);
}
.book-hero-scene {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 46%;
  min-height: 230px;
  z-index: 1;
  pointer-events: none;
}
.book-hero-scene svg { display: block; width: 100%; height: 100%; }
.book-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(38,42,48,.55) 0%, rgba(38,42,48,.12) 22%, rgba(38,42,48,0) 46%);
}
.book-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
}
.book-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f3c7b4;
  margin: 0 0 22px;
}
.book-tick {
  width: 26px;
  height: 2px;
  background: #eaa68a;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.book-hero-title {
  font-family: var(--heading-font);
  color: #fff;
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1.06;
  margin: 0;
}
.book-hero-sub {
  font-family: var(--heading-font);
  font-style: italic;
  color: #f3c7b4;
  font-size: clamp(19px, 2.4vw, 26px);
  margin: 14px 0 0;
}
.book-hero-intro {
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.7;
  margin: 22px auto 0;
  max-width: 540px;
}
.book-hero-cta { margin-top: 34px; }
.book-hero-support {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  margin: 16px 0 0;
}

/* ---------- SHARED BUTTON ---------- */
.book-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #eaa68a;
  color: #fff;
  text-decoration: none;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(223,146,112,.85);
  transition: background .22s ease, transform .22s ease;
}
.book-btn:hover { background: #df9270; color: #fff; transform: translateY(-2px); }
.book-btn svg { transition: transform .22s ease; }
.book-btn:hover svg { transform: translateX(3px); }

/* ---------- SECTION KICKER ---------- */
.book-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #df9270;
  margin: 0 0 18px;
}
.book-kicker-center { justify-content: center; }
.book-kicker-light { color: #f3c7b4; }

/* ---------- BOOK COVER ---------- */
.book-cover-section { background: #f6ede8; padding: 0; }
.book-cover-wrap {
  position: relative;
  z-index: 5;
  margin-top: -120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}
.book-cover {
  position: relative;
  width: 300px;
  max-width: 76vw;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  transform: rotate(-1.5deg);
  box-shadow: 0 34px 64px -28px rgba(38,42,48,.65), 0 10px 24px -12px rgba(38,42,48,.4);
}
.book-cover-art { position: absolute; inset: 0; }
.book-cover-art svg { width: 100%; height: 100%; display: block; }
.book-cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px;
  background: linear-gradient(180deg, rgba(38,42,48,.45) 0%, rgba(38,42,48,0) 32%, rgba(38,42,48,0) 62%, rgba(38,42,48,.55) 100%);
}
.book-cover-tag {
  font-family: var(--body-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(234,166,138,.92);
  padding: 5px 12px;
  border-radius: 999px;
}
.book-cover-title {
  font-family: var(--heading-font);
  color: #fff;
  font-size: 25px;
  line-height: 1.12;
  margin: 16px 0 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.book-cover-sub {
  font-family: var(--heading-font);
  font-style: italic;
  color: #f3c7b4;
  font-size: 14px;
  margin: 8px 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.book-cover-author {
  margin-top: auto;
  font-family: var(--body-font);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.book-cover-caption {
  margin: 22px 0 0;
  font-size: 13px;
  color: #8a7f76;
  font-style: italic;
}

/* ---------- PROMO VIDEO ---------- */
.book-video-section {
  background: #f6ede8;
  padding: 60px 0 96px;
  text-align: center;
}
.book-video-frame {
  width: min(94vw, 1320px);
  margin: 24px auto 0;
  background: #363f4b;
  padding: clamp(10px, 1.4vw, 20px);
  border-radius: 16px;
  box-shadow: 0 34px 74px -34px rgba(38,42,48,.7);
}
.book-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
}
.book-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- CONTENT SECTIONS ---------- */
.book-section { position: relative; padding: 92px 0; }
.book-story  { background: #f6ede8; }
.book-diff   { background: #ffffff; }
.book-aud    { background: #EAF5F9; }
.book-fits   { background: #f6ede8; }
.book-author { background: #ffffff; }
.book-section h2 {
  color: #363f4b;
  margin: 0 0 8px;
}
.book-section p {
  color: #414b5a;
  font-size: 17px;
  line-height: 1.78;
}
.book-section-head { margin-bottom: 30px; }
.book-section-head h2 { margin-bottom: 0; }

/* ---------- ILLUSTRATION SLOTS ---------- */
.book-slot {
  position: relative;
  border-radius: 16px;
  background: #EAF5F9;
  border: 2px dashed rgba(54,63,75,.26);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  height: 100%;
}
.book-slot-icon { color: #557083; opacity: .85; margin-bottom: 12px; display: inline-flex; }
.book-slot-label {
  font-family: var(--heading-font);
  color: #363f4b;
  font-size: 19px;
  margin: 0;
}
.book-slot-sub {
  font-family: var(--body-font);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a8794;
  margin: 9px 0 0;
}

/* ---------- ISLAND DUALITY ---------- */
.island-duo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 22px;
  margin-top: 56px;
}
.island-slot-calm { background: #f7ede3; border-color: rgba(223,146,112,.4); }
.island-slot-calm .book-slot-icon { color: #df9270; }
.island-slot-wild { background: #e4edf1; border-color: rgba(54,63,75,.32); }
.island-slot-wild .book-slot-icon { color: #46624f; }
.island-cross {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #557083;
}
.island-cross-label {
  font-family: var(--body-font);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7a8794;
  white-space: nowrap;
}
.book-slot-storm {
  min-height: 320px;
  background: linear-gradient(180deg, #d7e3e9, #c6d4db);
  border-color: rgba(54,63,75,.3);
}
.book-slot-storm .book-slot-icon { color: #3c5a63; }

/* ---------- WHO IT IS FOR ---------- */
.book-aud-grid { margin-top: 16px; }
.book-aud-card {
  background: #fff;
  border-radius: 18px;
  padding: 40px 32px;
  height: 100%;
  text-align: center;
  box-shadow: 0 20px 44px -30px rgba(38,42,48,.45);
}
.book-aud-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eaa68a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.book-aud-card p { font-size: 16px; color: #414b5a; margin: 0; line-height: 1.7; }

/* ---------- AUTHOR ---------- */
.book-author-photo { aspect-ratio: 4 / 5; min-height: 0; }

/* ---------- FINAL CTA / WAITLIST ---------- */
.book-final {
  position: relative;
  background: #363f4b;
  padding: 98px 0;
  text-align: center;
}
.book-final h2 { color: #fff; margin: 0 0 14px; }
.book-final-lede {
  color: rgba(255,255,255,.88);
  font-size: 17px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}
.book-waitlist-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 32px auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.book-waitlist-input {
  flex: 1 1 260px;
  min-width: 0;
  background: #fff;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 15px 24px;
  font-family: var(--body-font);
  font-size: 15px;
  color: #363f4b;
}
.book-waitlist-input::placeholder { color: #8a93a0; }
.book-waitlist-input:focus {
  outline: none;
  border-color: #eaa68a;
  box-shadow: 0 0 0 3px rgba(234,166,138,.35);
}
.book-waitlist-btn {
  flex: 0 0 auto;
  background: #eaa68a;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .22s ease, transform .22s ease;
}
.book-waitlist-btn:hover { background: #df9270; transform: translateY(-2px); }
.book-waitlist-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 17px;
  margin: 30px auto 0;
  max-width: 520px;
}
.book-final-support {
  color: rgba(255,255,255,.7);
  font-size: 13.5px;
  margin: 16px 0 0;
}

/* ---------- DISCLAIMER + SAFETY NOTE ---------- */
.book-safety { background: #1d242b; padding: 34px 0 46px; }
.book-safety-text {
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0 0 10px;
  text-align: center;
}
.book-safety-text:last-child { margin-bottom: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .book-hero { min-height: 80vh; padding: 150px 18px 170px; }
}
@media (max-width: 768px) {
  .island-duo { grid-template-columns: 1fr; gap: 16px; }
  .island-cross { padding: 6px 0; }
  .island-cross svg { transform: rotate(90deg); }
  .book-section { padding: 70px 0; }
  .book-cover-wrap { margin-top: -96px; }
}
@media (max-width: 600px) {
  .book-hero { padding: 132px 16px 150px; }
  .book-hero-intro { font-size: 16px; }
  .book-btn { width: 100%; justify-content: center; }
  .book-waitlist-form { flex-direction: column; }
  /* The desktop 260px flex-basis becomes the item's height once the
     form switches to a column. Reset it so this remains a normal-height
     email field rather than expanding into a large white panel. */
  .book-waitlist-input {
    flex: 0 0 auto;
    width: 100%;
    border-radius: 10px;
  }
  .book-waitlist-btn {
    width: 100%;
    border-radius: 10px;
  }
  .book-video-section { padding: 44px 0 70px; }
}

/* ---------- BOOK COVER PHOTO (framed, between hero and video) ---------- */
.book-cover-section {
  background: #f6ede8;
  padding: 72px 20px;
  text-align: center;
}
.book-cover-frame {
  display: inline-block;
  background: #363f4b;
  padding: clamp(7px, 1vw, 12px);
  border-radius: 8px;
  box-shadow: 0 34px 74px -34px rgba(38,42,48,.7);
  max-width: min(88vw, 560px);
}
.pink-frame {
  display: block;
  background: #f6ede8;
  padding: clamp(7px, 1vw, 12px);
  border-radius: 8px;
  box-shadow: 0 24px 56px -20px rgba(234,166,138,.35);
}
.pink-frame img {
  display: block;
  width: 100%;
  border-radius: 4px;
}
.navy-frame {
  display: block;
  background: #363f4b;
  padding: clamp(7px, 1vw, 12px);
  border-radius: 8px;
  box-shadow: 0 24px 56px -20px rgba(54,63,75,.5);
}
.navy-frame img {
  display: block;
  width: 100%;
  border-radius: 4px;
}
.book-cover-img {
  display: block;
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- BOOK COVER inside story section ---------- */
.story-cover-wrap {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

/* ---------- AUTHOR PHOTO — landscape override ---------- */
.book-author-img {
  aspect-ratio: 3 / 2;
}

/* ---------- TRIO CARDS (icons removed) ---------- */
.s2a-trio-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  padding: 56px 48px !important;
}

.s2a-trio-card .hs-3 {
  font-size: 28px;
  line-height: 1.32;
  margin-bottom: 16px;
}

.s2a-trio-card p {
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .s2a-trio-card {
    min-height: 0;
    padding: 44px 32px !important;
  }

  .s2a-trio-card .hs-3 {
    font-size: 24px;
  }
}

/* ── For Parents — "What Spiral to Anchor helps" section ── */
.s2a-ph-help-section {
  position: relative;
  background-color: #FEFAF5;
  padding-bottom: 3rem;
}
.s2a-ph-help-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/anchor-pattern-coral.svg');
  background-repeat: repeat;
  background-size: 719px 719px;
  background-position: left top;
  opacity: 0.10;
  z-index: 0;
  pointer-events: none;
}
.s2a-ph-help-section > section {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ── Testimonial photo — fill column edge-to-edge with no white strip ── */
.s2a-testi-photo-col {
  position: absolute !important;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  padding: 0 !important;
  overflow: hidden;
}
.s2a-testi-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.s2a-testi-photo-col .triangle-bottomright-dark {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

/* ── Children's book — preserve blue audience section inside coral wrapper ── */
.s2a-ph-help-section .book-aud {
  background: #EAF5F9 !important;
}

/* ── About — Our History section: dark background matching footer ── */
.s2a-about-history-section {
  background: #1c1f26 !important;
}


/* ════════════════════════════════════════════════════════════════════
   MOBILE — HOME HERO
   Scoped to <=991px. Desktop (>=992px) is deliberately untouched.
   Appended last so it wins over the earlier hero breakpoint rules.

   IMPORTANT — why this un-does the theme's positioning:
   The theme builds the hero as a slider, so `.swiper-inner` is
   `position:absolute; height:100%` and `.sw-caption` is
   `position:absolute; top:50%; translateY(-50%)`. ALL hero content is
   therefore out of flow, and `.mh-800{min-height:800px}` is the only
   thing giving the hero any height.
   Consequences on mobile if you leave that alone:
     - shrinking/removing that min-height collapses the hero to 0 and the
       caption spills over the following section;
     - because the caption is vertically CENTRED, adding padding-top grows
       it in both directions instead of pushing content down, so it never
       clears the absolutely-positioned header.
   So on mobile we return both to normal flow and let content set the
   height. Do not reintroduce `min-height` here without also restoring
   the absolute positioning.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* 1. Topbar — the template hides it on phones in TWO places, and both must
        be beaten or the bar silently disappears below 767px:
          a) `#topbar{display:none}` at <=767px AND again at <=360px, and
          b) the `.xs-hide` class on the inner div at <=767px.
        Overriding only (b) is not enough — the hidden parent wins. */
  #topbar.s2a-topbar-restyled {
    display: block !important;
  }

  #topbar.s2a-topbar-restyled .s2a-topbar-inner.xs-hide {
    display: flex !important;
  }

  /* 1b. Header joins the NORMAL FLOW on mobile, as a solid bar.
        Site-wide CSS pins the header `position:absolute` over the hero so the
        hero pattern can run underneath it. That works on desktop but on a
        phone it forces every hero to guess the header's height in padding —
        and any mismatch drops the logo straight onto the headline.
        In flow, the hero simply starts after the header and can never slide
        under it. `.clone` is the theme's sticky duplicate: it must stay
        fixed, so it is excluded here. */
  header.s2a-header-solid:not(.clone),
  header.s2a-header-solid.transparent:not(.clone),
  header.s2a-header-solid.header-light:not(.clone),
  header.s2a-header-solid.header-light.transparent:not(.clone),
  header.s2a-header-solid.smaller:not(.clone),
  header.s2a-header-solid.header-mobile:not(.clone),
  header.s2a-header-solid.header-light.header-mobile:not(.clone),
  body:not(.side-layout) header.s2a-header-solid:not(.header-mobile):not(.clone).header-light.transparent {
    position: relative !important;
    background: #FEFAF5 !important;
  }

  /* 2. Hero back into normal document flow */
  .s2a-hero .mh-800 {
    min-height: 0 !important;
    height: auto;
  }

  .s2a-hero .swiper-inner {
    position: relative !important;
    height: auto !important;
    top: auto !important;
  }

  .s2a-hero .sw-caption {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    /* Header is in flow above us now, so this is plain breathing room —
       it no longer has to account for the header's height. */
    padding: 40px 0 64px !important;
  }

  /* The desktop optical nudge must not apply once we are in flow */
  .s2a-hero .sw-caption .container {
    transform: none !important;
  }

  /* 3. Hero photo, below the title. Capped so this portrait crop cannot
        swallow the viewport before the copy and CTA are reachable. */
  .s2a-hero-photo-mobile {
    margin: 26px 0 30px;
  }

  .s2a-hero-photo-mobile .hero-navy-frame {
    /* Grows with the column at tablet widths so the stacked hero does not
       leave a large dead area to the right of the photo. */
    max-width: min(420px, 100%);
    margin-left: 0;
    margin-right: auto;
  }

  /* Keep both hero CTAs hard left with the rest of the stacked copy */
  .s2a-hero .cta-row {
    align-items: flex-start;
    text-align: left;
  }

  .s2a-hero .cta-row .btn-text {
    align-self: flex-start;
  }

  .s2a-hero-photo-mobile .hero-navy-frame img {
    max-height: 300px;
    object-fit: cover;
    object-position: center 30%;
  }

  /* 4. .col-lg-10 is full width here; drop its gutter so the copy lines up
        flush with the title and photo above it. */
  .s2a-hero .sw-caption .col-lg-10 {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .s2a-hero .sw-caption {
    padding: 32px 0 56px !important;
  }
  .s2a-hero-photo-mobile .hero-navy-frame {
    max-width: 300px;
  }
  .s2a-hero-photo-mobile .hero-navy-frame img {
    max-height: 260px;
  }
}

@media (max-width: 480px) {
  .s2a-hero .sw-caption {
    padding: 28px 0 48px !important;
  }
  .s2a-hero-photo-mobile {
    margin: 22px 0 26px;
  }
  .s2a-hero-photo-mobile .hero-navy-frame {
    max-width: 100%;
  }
  .s2a-hero-photo-mobile .hero-navy-frame img {
    max-height: 240px;
  }
}

/* ─── Inline navy-framed photos (For Parents page) ─── */
.s2a-inline-photo {
  margin: 40px auto;
  max-width: 560px;
}

/* Full-width variant — spans the whole column, natural image height */
.s2a-inline-photo.s2a-inline-photo--full {
  max-width: 100%;
  margin: 40px 0;
}
.s2a-inline-photo.s2a-inline-photo--full img {
  height: auto;
  object-fit: unset;
}

.s2a-inline-photo .navy-frame {
  width: 100%;
}

.s2a-inline-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 767px) {
  .s2a-inline-photo {
    margin: 28px auto;
  }
  .s2a-inline-photo img {
    height: 240px;
  }
}

/* ============================================================
   CHILDREN'S BOOK — THE ARLO SERIES (upcoming titles grid)
   ============================================================ */
/* No background declared on purpose: `.s2a-ph-help-section > section` forces
   `background: transparent !important`, so this section shows the wrapper's
   coral anchor tile like its neighbours. Only `.book-aud` opts out of that. */
.book-series .book-series-lede { max-width: 660px; margin: 0 auto; }
.book-series-grid { margin-top: 48px; }

.book-series-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}
.book-series-frame {
  width: 100%;
  background: #363f4b;
  padding: 7px;
  border-radius: 8px;
  box-shadow: 0 22px 46px -22px rgba(38, 42, 48, .6);
  transition: transform .35s ease, box-shadow .35s ease;
}
.book-series-card:hover .book-series-frame {
  transform: translateY(-6px);
  box-shadow: 0 30px 58px -22px rgba(38, 42, 48, .72);
}
.book-series-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
.book-series-badge {
  display: inline-block;
  margin-top: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(234, 166, 138, .2);
  border: 1px solid rgba(223, 146, 112, .45);
  color: #b26744;
  font-family: var(--body-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.book-series-title {
  margin: 13px 0 5px;
  font-size: 18px;
  line-height: 1.3;
  color: #363f4b;
}
.book-series .book-series-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5b6675;
}
.book-series .book-series-note {
  margin: 46px 0 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.7;
  color: #5b6675;
}
.book-series .book-series-note a {
  color: #b26744;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.book-series .book-series-note a:hover { color: #363f4b; }

@media (max-width: 1199px) {
  .book-series-title { font-size: 16.5px; }
  .book-series .book-series-sub { font-size: 13.5px; }
}
@media (max-width: 991px) {
  .book-series-grid { margin-top: 34px; }
  .book-series-title { font-size: 18px; }
  .book-series .book-series-sub { font-size: 14.5px; }
  .book-series .book-series-note { margin-top: 34px; }
}
@media (max-width: 575px) {
  .book-series-badge { margin-top: 14px; font-size: 9.5px; letter-spacing: .12em; padding: 4px 9px; }
  .book-series-title { margin-top: 11px; font-size: 15.5px; }
  .book-series .book-series-sub { font-size: 13px; }
}

/* ================================================================
   HOMEPAGE HEADER ON MOBILE — KEEP IT IN FLOW *AFTER SCROLLING* TOO
   The theme's scroll handler permanently adds `.clone` to the header
   on the first scroll. The mobile in-flow block above excludes
   `.clone` (that exclusion protects pages with a real sticky bar),
   so once `.clone` appears, the homepage variant fell back to the
   site-wide `absolute; top:0; background:transparent` overlay rules:
   the page shifted up by the header's height and the hero headline
   slid under the logo and hamburger.
   The homepage header has NO sticky behaviour by design ("it scrolls
   away with the page"), so its clone state loses nothing by staying
   in flow. Selectors mirror every matching combo of the overlay
   group; `.clone.header-light.transparent` (0,4,1) outranks the
   overlay's strongest matcher (0,3,1), and file order settles ties.
   Only index.html uses s2a-header-solid, so inner pages are
   untouched. Scoped ≤991px: at 992px+ the header is an overlay in
   BOTH states, so desktop/tablet behaviour is identical either way.
   ================================================================ */
@media (max-width: 991px) {
  header.s2a-header-solid.clone,
  header.s2a-header-solid.clone.transparent,
  header.s2a-header-solid.clone.header-light,
  header.s2a-header-solid.clone.header-light.transparent,
  header.s2a-header-solid.clone.header-mobile,
  header.s2a-header-solid.clone.header-light.header-mobile,
  header.s2a-header-solid.clone.scroll-down,
  header.s2a-header-solid.clone.scroll-up,
  header.s2a-header-solid.clone.scrollOn,
  header.s2a-header-solid.clone.scrollOff,
  header.s2a-header-solid.clone.nav-up {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    /* Same cream as the pre-scroll mobile header, so the first scroll
       causes no visible change at all. */
    background: #FEFAF5 !important;
  }
}

/* ================================================================
   HOMEPAGE MOBILE HEADER — CARRY THE CORAL PATTERN TO THE TOP
   On desktop the header floats over the hero, so the hero's own
   pattern shows through it. On mobile the header sits in normal
   flow (that is what stops it overlapping the headline), so the
   hero's pattern can only start below it and the logo row read as
   a bare off-white band.
   Rather than moving the header back over the hero, the header
   paints the same tile itself. Anchoring it to `bottom` is the
   whole trick: the tile grid ENDS exactly at the header's bottom
   edge, which is exactly where the hero's `center top` grid
   BEGINS (measured gap between them is 0 at every phone width),
   so the two meet seamlessly with no height arithmetic to go
   stale if the header or logo ever resizes.
   The header keeps its opaque cream background; `z-index:-1` puts
   the tile above that background but below the topbar, logo and
   hamburger. That relies on the header being a stacking context,
   which the theme already guarantees via its own `z-index:1001` —
   deliberately NOT restated here, because declaring a lower value
   would drop the header (and the open menu inside it) beneath
   anything sitting between that level and the new one.
   Only index.html uses s2a-header-solid, so no other page moves.
   ================================================================ */
@media (max-width: 991px) {
  header.s2a-header-solid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/anchor-pattern-coral.svg');
    background-repeat: repeat;
    background-size: 719px 719px;
    background-position: center bottom;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
  }
}

/* ================================================================
   "HOW WE CAN HELP YOU" CAROUSEL — STACK ON PHONES, DROP THE ARROWS
   The slider shows 3 items at 1200+, 2 from 600px and 1 below that,
   so on a phone the three circles were a cramped, clipped row you
   had to page through. Stacked, every option is visible at once and
   the prev/next arrows have nothing left to reveal.
   Owl writes its sliding geometry as INLINE styles (stage width and
   translate3d, per-item pixel widths and gutters). An author
   `!important` declaration outranks a non-important style attribute,
   so these rules neutralise the slider without destroying it: the
   markup, the init call and every wider breakpoint are untouched,
   and the normal carousel resumes on its own above 991px. Nothing
   here can leak upward — it is all inside the media query.
   `loop:false` on this carousel means Owl clones no items, so there
   are exactly three to stack and no duplicates appear.
   ================================================================ */
@media (max-width: 991px) {
  .de-custom-nav[data-target="#services-carousel"] {
    display: none !important;
  }

  /* Owl's default `overflow:hidden` on .owl-stage-outer is deliberately
     left alone: once the floats, widths and transform below are
     neutralised the stage takes its natural height, so nothing is
     clipped vertically, and keeping it contained means no future
     oversized card can push a sideways scrollbar onto a phone. */
  #services-carousel .owl-stage {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  #services-carousel .owl-item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  #services-carousel .owl-item + .owl-item {
    margin-top: 44px;
  }

  /* The staggered entrance (0s / .9s / 1.8s) was timed for three
     items sliding in together. Stacked, each scrolls into view on
     its own, so the inherited delay just leaves a blank gap where
     the photo should be. */
  #services-carousel .item {
    animation-delay: 0s !important;
  }
}

/* ================================================================
   TESTIMONIAL SECTION — STACK PHOTO BELOW THE QUOTE ON MOBILE
   The photo column is `position:absolute; left:50%; right:0` with
   no breakpoint, which is right at >=992px where the quote genuinely
   occupies the left half. Below that the two Bootstrap columns fall
   into one column, but the photo stayed absolute and simply lay on
   top of the quote — white text over a bright photo, unreadable.
   (It also over-constrained itself: with left, right AND Bootstrap's
   width:100% all set, `right` is ignored, so it ran off-screen.)
   Here the photo returns to normal flow at full width. The row is a
   flex container, so `order` puts the quote first and the photo
   below it without touching the HTML — which keeps the desktop
   source order (photo left, text right) exactly as it was.
   ================================================================ */
@media (max-width: 991px) {
  .s2a-testi-photo-col {
    position: relative !important;
    inset: auto !important;
    order: 2;
    /* Bleed the photo past the row's narrow mobile gutters so its crop
       reaches both viewport edges with no exposed strip on the right. */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    padding: 0 !important;
    /* A landscape band rather than the full 693x959 portrait, which
       would run over 500px tall on a phone and dwarf the quote.
       The cap matters at the top of this range: 4:3 of a 991px-wide
       column is 743px of photo, which would push the quote right off
       the screen. Phones stay well under it and are unaffected. */
    aspect-ratio: 4 / 3;
    max-height: 480px;
  }

  /* Bias the crop down slightly from centre: the two faces sit just
     below the middle of the frame, with the bunting above them. */
  .s2a-testi-photo {
    object-position: center 45%;
  }

  .s2a-testi-photo-col ~ .col-lg-5 {
    order: 1;
  }

  /* The quote block carries desktop-sized padding AND margin (py-5
     my-5 = ~96px top and bottom). Stacked, that reads as the photo
     having drifted away from the quote it belongs to. */
  .s2a-testi-photo-col ~ .col-lg-5 .py-5.my-5 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ================================================================
   FOOTER NAV — RESTORE THE MISSING LINKS ON PHONES
   The base .sta-nav is `display:flex; flex-wrap:wrap` (a centred
   row that wraps on medium widths). At <=576px it switches to
   `flex-direction: column` but the inherited `wrap` stays. A
   WRAPPING COLUMN container with no fixed height is degenerate:
   each link wraps into its own new column, so the "column" renders
   as one horizontal line running off the right edge — only the
   first four links fit in the viewport, and The Program /
   Children's Book / Disclaimer / the booking CTA were pushed out
   of sight. Same links, same markup; they were just off-screen.
   `nowrap` makes the column an actual vertical stack again.
   ================================================================ */
@media (max-width: 576px) {
  .sta-nav {
    flex-wrap: nowrap;
  }
}

/* The theme's style.css contains `nav { height: 0 }` at <=992px —
   aimed at its header menu, which collapses into the hamburger at
   that width, but it hits EVERY bare <nav>, including this footer
   one. A zero-height nav with `justify-content: center` spills its
   links half above (over the mission text) and half below (over
   the social icons). The class selector outranks the theme's bare
   element selector at any width, and `auto` is what desktop
   already computes, so no media query is needed. */
.sta-nav {
  height: auto;
}