/*
Theme Name: Kindori Child – Parkside Enhancements
Description: All Parkside View design enhancements, isolated from the parent Kindori theme. Switch back to Kindori to revert every change from this theme.
Template: kindori
Version: 1.0.0
Text Domain: kindori-child
*/

/* =========================================================
   1. FEES PAGE — pricing tables restyle
   ========================================================= */
.elementor-5765 .eael-data-table-wrap {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(107, 30, 125, .12);
  border: 1px solid #eadcf5;
}
.elementor-5765 .eael-data-table {
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0;
}
.elementor-5765 .eael-data-table thead tr th {
  background: linear-gradient(135deg, #7E2799, #6B1E7D) !important;
  padding: 16px 12px !important;
  font-family: "Fredoka One", Prompt, sans-serif;
  font-weight: 400 !important;
  font-size: 16px;
  letter-spacing: .02em;
  border: 0 !important;
  text-align: center;
}
.elementor-5765 .eael-data-table thead tr th:first-child {
  text-align: left;
}
.elementor-5765 .eael-data-table tbody tr td {
  padding: 16px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #f1e8f8 !important;
  font-size: 17px;
  transition: background .15s ease;
}
/* prices: bigger, bolder, centred */
.elementor-5765 .eael-data-table tbody tr td:not(:first-child) {
  text-align: center;
}
.elementor-5765 .eael-data-table tbody tr td:not(:first-child) .td-content-wrapper {
  display: block;
  text-align: center !important;
  font-size: 18px;
  font-weight: 700;
  color: #3a2c4d;
}
/* soften the harsh lilac striping */
.elementor-5765 .eael-data-table tbody > tr:nth-child(2n) td {
  background: #F6EDFF !important;
}
.elementor-5765 .eael-data-table tbody > tr:nth-child(2n+1) td {
  background: #fff !important;
}
.elementor-5765 .eael-data-table tbody tr:hover td {
  background: #efe0fb !important;
  color: #2b2340 !important;
}
/* first column (session type) = label style */
.elementor-5765 .eael-data-table tbody tr td:first-child .td-content-wrapper {
  font-weight: 700;
  color: #7E2799;
}
/* last column (weekly total) highlighted */
.elementor-5765 .eael-data-table thead tr th:last-child {
  background: linear-gradient(135deg, #ff4880, #d63384) !important;
}
.elementor-5765 .eael-data-table tbody tr td:last-child {
  font-weight: 800;
  color: #6B1E7D !important;
  background: #FFF3F7 !important;
  border-left: 2px dashed #f5c8da !important;
}
.elementor-5765 .eael-data-table tbody tr td:last-child .td-content-wrapper {
  font-size: 20px;
  color: #6B1E7D;
}
/* keep tables usable on small screens */
@media (max-width: 767px) {
  .elementor-5765 .eael-data-table-wrap { overflow-x: auto; }
  .elementor-5765 .eael-data-table { min-width: 560px; }
  .elementor-5765 .eael-data-table tbody tr td { font-size: 15px; }
  .elementor-5765 .eael-data-table tbody tr td:not(:first-child) .td-content-wrapper { font-size: 16px; }
  .elementor-5765 .eael-data-table tbody tr td:last-child .td-content-wrapper { font-size: 17px; }
}
.elementor-5765 .eael-data-table tbody tr:hover td:last-child {
  background: #ffe7f0 !important;
}

/* =========================================================
   1b. FEES PAGE — consistent rhythm between headings & tables
   Same gap above every heading, same gap between a heading
   and its table, regardless of the page's mixed spacer sizes.
   ========================================================= */
.elementor-5765 .elementor-widget-spacer .elementor-spacer-inner {
  height: 0 !important;               /* neutralise the mixed 10/56px spacers */
}
.elementor-5765 .elementor-widget-heading {
  margin: 56px 0 22px !important;     /* uniform: 56 above, 22 below every heading */
}
.elementor-5765 .elementor-widget-heading:first-of-type { margin-top: 34px !important; }
.elementor-5765 .eael-data-table-wrap { margin-bottom: 8px; }

/* =========================================================
   2/3. FEES PAGE — consumables note as info callout
   ========================================================= */
.elementor-5765 .elementor-element-5f5771e .cms-textbox {
  background: #F6F8FB;
  border: 1px solid #E4E9F2;
  border-left: 3px solid #21418F;
  border-radius: 10px;
  padding: 20px 24px;
  position: relative;
}
.elementor-5765 .elementor-element-5f5771e .cms-textbox .box-title {
  color: #21418F;
}

/* =========================================================
   4. HOMEPAGE — hero "Book Your Visit" button to brand pink
   ========================================================= */
.elementor-45 .elementor-element-ca6f653 .elementor-button {
  background: linear-gradient(135deg, #ff4880, #ff6a9c) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 16px 34px !important;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(255, 72, 128, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.elementor-45 .elementor-element-ca6f653 .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(255, 72, 128, .45);
}

/* Fees page "Enquire Now!" button — same treatment for consistency */
.elementor-5765 .elementor-element-c2eb3b0 .elementor-button {
  background: linear-gradient(135deg, #ff4880, #ff6a9c) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(255, 72, 128, .3);
  transition: transform .18s ease;
}
.elementor-5765 .elementor-element-c2eb3b0 .elementor-button:hover {
  transform: translateY(-3px);
}

/* =========================================================
   5/7. HOMEPAGE — cost teaser + trust strip (markup from
        child functions.php, appended after page content)
   ========================================================= */
.pv-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 40px auto 8px;
  max-width: 1140px;
  padding: 0 20px;
}
.pv-trust span {
  background: #fff;
  border: 1px solid #eadcf5;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .92rem;
  font-weight: 600;
  color: #4a3a5e;
  box-shadow: 0 6px 16px rgba(107, 30, 125, .08);
}
.pv-trust span::before {
  content: "✓ ";
  color: #4c9d2e;
  font-weight: 800;
}
.pv-teaser {
  max-width: 1140px;
  margin: 30px auto 60px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .18), transparent 120px),
    linear-gradient(135deg, #6B1E7D, #7E2799 55%, #a54ec4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.pv-teaser h2 {
  margin: 0 0 8px;
  font-family: "Fredoka One", Prompt, sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}
.pv-teaser p {
  margin: 0;
  opacity: .88;
  max-width: 560px;
}
.pv-teaser a.pv-teaser-btn {
  flex: 0 0 auto;
  background: #ffd44b;
  color: #463b12 !important;
  border-radius: 999px;
  padding: 16px 30px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
  transition: transform .18s ease;
}
.pv-teaser a.pv-teaser-btn:hover { transform: translateY(-3px); }

/* =========================================================
   6. HOMEPAGE — testimonial carousel polish
   ========================================================= */
.elementor-45 .cms-testimonial-carousel .item,
.elementor-45 .cms-testimonial-carousel .testimonial-item {
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(107, 30, 125, .10);
}

/* =========================================================
   8/11. Floating "Submit Enquiry" button — brand pill,
         larger tap target on mobile
   ========================================================= */
.floating-button {
  background: linear-gradient(135deg, #ff4880, #ff6a9c) !important;
  border-radius: 999px !important;
  padding: 13px 24px !important;
  font-weight: 700 !important;
  font-family: Prompt, sans-serif;
  box-shadow: 0 12px 28px rgba(255, 72, 128, .4) !important;
  transition: transform .18s ease;
}
.floating-button:hover { transform: translateY(-3px); }
@media (max-width: 720px) {
  .floating-button {
    bottom: 14px !important;
    right: 14px !important;
    padding: 13px 20px !important;
    font-size: .95rem;
  }
}

/* =========================================================
   9. Typography — align Elementor globals with theme fonts
      (kit 4512 defines Roboto; theme uses Fredoka One/Prompt)
   ========================================================= */
body.elementor-kit-4512 {
  --e-global-typography-primary-font-family: "Fredoka One" !important;
  --e-global-typography-primary-font-weight: 400 !important;
  --e-global-typography-secondary-font-family: "Fredoka One" !important;
  --e-global-typography-secondary-font-weight: 400 !important;
  --e-global-typography-text-font-family: "Prompt" !important;
  --e-global-typography-accent-font-family: "Prompt" !important;
}

/* =========================================================
   10. FEES PAGE — FAQ accordion (markup from functions.php)
   ========================================================= */
.pv-faq {
  max-width: 860px;
  margin: 10px auto 70px;
  padding: 0 20px;
}
.pv-faq > h2 {
  text-align: center;
  font-family: "Fredoka One", Prompt, sans-serif;
  font-weight: 400;
  color: #7E2799;
  margin: 0 0 24px;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}
.pv-faq details {
  background: #fff;
  border: 1px solid #eadcf5;
  border-radius: 18px;
  margin-bottom: 12px;
  box-shadow: 0 8px 22px rgba(107, 30, 125, .07);
  overflow: hidden;
}
.pv-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  font-weight: 700;
  color: #2b2340;
  position: relative;
  font-size: 1.02rem;
}
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #F6EDFF;
  color: #7E2799;
  font-weight: 800;
  font-size: 1.2rem;
  transition: transform .2s ease, background .2s ease;
}
.pv-faq details[open] summary::after {
  content: "−";
  background: #7E2799;
  color: #fff;
}
.pv-faq details[open] summary { color: #7E2799; }
.pv-faq .pv-faq-body {
  padding: 0 22px 20px;
  color: #5c5470;
  line-height: 1.6;
}
.pv-faq .pv-faq-body a { color: #ff4880; font-weight: 600; }

/* =========================================================
   12b. Scroll-to-top button removed site-wide — it sat under
   the floating "Submit Enquiry" CTA in the same corner.
   ========================================================= */
.scroll-top { display: none !important; }

/* =========================================================
   12c. FEES PAGE — above-the-fold shortcut to the plan builder
   ========================================================= */
html { scroll-behavior: smooth; }
#plan-builder { scroll-margin-top: 120px; }
.pv-jump {
  max-width: 1100px;
  margin: 18px auto 6px;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(100deg, #6B1E7D, #7E2799 60%, #a54ec4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 10px 28px rgba(107, 30, 125, .25);
}
.pv-jump span { font-size: .95rem; }
.pv-jump b { color: #ffd44b; }
.pv-jump a {
  flex: 0 0 auto;
  background: #ffd44b;
  color: #463b12 !important;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  transition: transform .16s ease;
}
.pv-jump a:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
  /* pill radius curved into the wrapped text on phones — use a card
     radius and roomier padding so nothing clips at the curve */
  .pv-jump {
    margin: 12px 14px 4px;
    justify-content: center;
    text-align: center;
    border-radius: 20px;
    padding: 16px 18px;
  }
}

/* =========================================================
   13/14. MODERN STICKY HEADER (site-wide, Helia-style)
   The theme's pattern (header scrolls away, then re-fixes with
   a 0.95s slide-down) reads as glitchy. Instead: the header
   stays pinned (topbar slides away above it) and smoothly turns
   to frosted glass past 40px. pv-header.js toggles the class.
   ========================================================= */
/* neutralise the theme's fixed-header pop-in entirely — including its
   padding:0 rule, which caused a second 20px height jump mid-scroll */
#site-header.h-fixed {
  position: static !important;
  animation: none !important;
  box-shadow: none !important;
}
#site-header-wrap.header-layout1 .site-header-main.h-fixed {
  padding: 10px 0 !important;
}
.fixed-height { display: none !important; height: 0 !important; }

/* THE sticky root-cause fix: the theme's body{overflow-x:hidden} makes
   body a scroll container (spec forces overflow-y:auto), which breaks
   position:sticky — header scrolled away then "snapped back" late.
   overflow-x:clip clips identically but creates NO scroll container.
   (.site gets the same treatment — the theme applies it there <992px.) */
body:not(.page-id-6328) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* html too: body's hidden used to mask stray overflow (hover dropdowns,
   Elementor's 10px-wide containers) — clip at the viewport instead */
html { overflow-x: clip; }
@media screen and (max-width: 991px) {
  .site { overflow-x: clip !important; }
}

/* sticky element must be #masthead, NOT the wrap inside it: the wrap's
   parent (#masthead) is exactly its own height, so a sticky wrap has zero
   travel and never engages. #masthead's parent is the full-page .site —
   sticking it gives the whole page of travel. Negative top hides the
   topbar once scrolled. */
#masthead.site-header {
  position: sticky !important;
  top: calc(-1 * var(--pv-topbar-h, 44px));
  z-index: 980;
}
#site-header-wrap { position: static !important; }

#site-header {
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
body.pv-header-solid #site-header {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(107, 30, 125, .12);
  border-bottom-color: #f0e7f7;
}

/* enquire page: fully static header, logo scrolls away like content */
body.page-id-6328 #masthead.site-header {
  position: static !important;
  top: auto !important;
}

/* logo: full size at the top, gently shrinks once scrolled */
#site-header-wrap .site-branding a img {
  max-height: 130px !important;
  transition: max-height .3s ease;
}
body.pv-header-solid #site-header-wrap .site-branding a img {
  max-height: 92px !important;
}
@media screen and (max-width: 1199px) {
  #site-header-wrap .site-branding a img { max-height: 100px !important; }
  body.pv-header-solid #site-header-wrap .site-branding a img { max-height: 76px !important; }
}

/* menu polish: steadier weight + animated underline on hover */
#mastmenu > li > a { position: relative; font-weight: 600 !important; }
#mastmenu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff4880, #7E2799);
  transition: width .25s ease;
}
#mastmenu > li:hover > a::after { width: 24px; }

/* =========================================================
   15. HOMEPAGE HERO — text placement, readability, CTA
   ========================================================= */
/* nudge the whole text block right so the bird decoration stays visible */
.elementor-45 .elementor-element-21ccc75 > .elementor-widget-wrap {
  margin-left: clamp(60px, 8vw, 190px);
}

/* one consistent left alignment for the whole text block */
.elementor-45 .elementor-element-681fb8f .cms-heading-wrapper,
.elementor-45 .elementor-element-681fb8f .custom-subheading,
.elementor-45 .elementor-element-681fb8f h3.custom-heading,
.elementor-45 .elementor-element-681fb8f .custom-heading-description,
.elementor-45 .elementor-element-0c9f617 .cms-cta {
  text-align: left !important;
}
/* eyebrow line */
.elementor-45 .elementor-element-681fb8f .custom-subheading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* main heading */
.elementor-45 .elementor-element-681fb8f h3.custom-heading {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem) !important;
  line-height: 1.08 !important;
  max-width: 620px;
}
/* description copy: darker + narrower, ragged-right not justified */
.elementor-45 .elementor-element-681fb8f .custom-heading-description,
.elementor-45 .elementor-element-0c9f617 .item--description {
  color: #4a4460 !important;
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 560px;
  margin-left: 0;
  text-align: left !important;
}
/* tighten the stacked spacers between heading and CTA block */
.elementor-45 .elementor-element-1ce8bdf,
.elementor-45 .elementor-element-6f27c83 { display: none; }
/* CTA button: align with the text block (was pushed right), bigger target */
.elementor-45 .elementor-element-ca6f653 .elementor-button-wrapper {
  text-align: left !important;
}
.elementor-45 .elementor-element-ca6f653 .elementor-button {
  padding: 18px 40px !important;
  font-size: 1.05rem !important;
  margin-top: 6px;
}

/* =========================================================
   15b. ENQUIRE PAGE — no floating CTA at any width
   (you're already on the enquiry page, it's just noise)
   ========================================================= */
.page-id-6328 .floating-button { display: none !important; }

/* =========================================================
   16. ENQUIRE PAGE — fixed app-like screen (desktop)
   No page scrolling: minimal header (small logo + Home only),
   every wizard step fits the viewport. Phones keep natural
   scrolling — a locked viewport fights the on-screen keyboard.
   ========================================================= */
.elementor-6328 .elementor-element-pvq00sec {
  padding-top: 18px !important;
  padding-bottom: 20px !important;
}
.page-id-6328 .pvq-wrap { max-width: 840px; }
.page-id-6328 .pvq-hero { margin-bottom: 12px; }
.page-id-6328 .pvq-hero h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 8px 0 4px; }

@media (min-width: 768px) {
  /* lock the page */
  body.page-id-6328 { overflow: hidden; height: 100vh; height: 100dvh; }
  .page-id-6328 footer#colophon,
  .page-id-6328 .scroll-top,
  .page-id-6328 #ht-ctc-chat,
  .page-id-6328 .floating-button { display: none !important; }

  /* minimal header: no topbar, small logo, Home only */
  .page-id-6328 #site-topbar { display: none; }
  .page-id-6328 #site-header-wrap { position: relative !important; top: 0 !important; }
  .page-id-6328 #site-header-wrap .site-branding a img { max-height: 52px !important; }
  .page-id-6328 #mastmenu > li { display: none; }
  .page-id-6328 #mastmenu > li.menu-item-home { display: list-item; }

  /* condense the wizard chrome */
  .page-id-6328 .pvq-kicker,
  .page-id-6328 .pvq-trust,
  .page-id-6328 .pvq-hero p { display: none; }
  .page-id-6328 .pvq-hero { margin-bottom: 8px; }
  .page-id-6328 .pvq-progress { margin-bottom: 10px; }
  .page-id-6328 .pvq-plan { padding: 10px 14px; margin-bottom: 10px; }
  .page-id-6328 .pvq-plan pre { font-size: .82rem; }

  /* the card gets the remaining height; internal scroll only as a
     small-laptop safety valve */
  .page-id-6328 .pvq-card {
    padding: 20px 28px;
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    overflow: auto;
  }
  .page-id-6328 .pvq-step h3 { font-size: 1.3rem; }
  .page-id-6328 .pvq-step > p { margin-bottom: 14px; font-size: .9rem; }
  .page-id-6328 .pvq-encourage { margin-bottom: 12px; padding: 8px 12px; font-size: .82rem; }
  .page-id-6328 .pvq-opt { padding: 12px 15px; min-height: 0; }
  .page-id-6328 .pvq-opt .pvq-emoji { font-size: 1.1rem; display: inline; margin-right: 7px; }
  .page-id-6328 .pvq-opt strong { display: inline; font-size: .95rem; }
  .page-id-6328 .pvq-opt small { display: block; margin-top: 2px; }
  .page-id-6328 .pvq-sub { margin: 16px 0 10px; }
  .page-id-6328 .pvq-nav { margin-top: 14px; }
  .page-id-6328 .pvq-note { margin-top: 12px; padding: 9px 12px; font-size: .8rem; }

  /* compact form fields on the final step */
  .page-id-6328 .pvq-form-slot .wpforms-field { padding: 4px 0 !important; }
  .page-id-6328 .pvq-form-slot input[type=text],
  .page-id-6328 .pvq-form-slot input[type=email],
  .page-id-6328 .pvq-form-slot input[type=tel] { padding: 10px 14px !important; }
  .page-id-6328 .pvq-form-slot textarea { height: 74px !important; min-height: 74px !important; padding: 9px 14px !important; }
  .page-id-6328 .pvq-form-slot button[type=submit] { padding: 12px 30px !important; margin-top: 2px; }
  .page-id-6328 .pvq-chips { margin-bottom: 10px; }
  .page-id-6328 .pvq-chips span { padding: 5px 11px; font-size: .78rem; }
  .page-id-6328 .pvq-alt { margin-top: 10px; font-size: .82rem; }
}

/* =========================================================================
   ★ PALETTE: CRAYON BOX ★
   Site-wide recolour: cobalt blue leads, crayon red fires buttons,
   school-bus yellow highlights, green + pink in details, warm paper
   surfaces. Delete or swap THIS BLOCK ONLY to change/revert the palette.
   ========================================================================= */
:root {
  --pv-blue: #21418F;
  --pv-blue-deep: #1A3474;
  --pv-blue-bright: #3558C9;
  --pv-red: #E94F37;
  --pv-red-soft: #FF6A54;
  --pv-red-dark: #C93A24;
  --pv-yellow: #FFC233;
  --pv-yellow-ink: #4C3A08;
  --pv-green: #1D6E42;
  --pv-paper: #FFF8EA;
  --pv-tint: #EAF1FF;
  --pv-tint-line: #D6E1F7;
  --pv-ink: #21315C;
  --pv-muted: #4D5878;
}

/* ---- global text + links (was pink #ff4880) ---- */
body a { color: var(--pv-red); }
body a:hover, body a:active { color: var(--pv-red-dark); }

/* ---- Elementor global colours (was blue/green defaults) ---- */
body.elementor-kit-4512 {
  --e-global-color-primary: var(--pv-blue) !important;
  --e-global-color-secondary: var(--pv-blue-deep) !important;
  --e-global-color-accent: var(--pv-red) !important;
  --e-global-color-text: var(--pv-muted) !important;
}

/* ---- topbar + menu ---- */
#site-topbar { background-color: var(--pv-ink) !important; }
#mastmenu li.current-menu-item > a,
#mastmenu li.current_page_item > a {
  background: var(--pv-red) !important;
  color: #fff !important;
  border-radius: 999px;
}
#mastmenu > li > a::after { background: linear-gradient(90deg, var(--pv-red), var(--pv-blue)); }
body.pv-header-solid #site-header { box-shadow: 0 8px 30px rgba(33, 65, 143, .14); border-bottom-color: var(--pv-tint-line); }

/* ---- homepage headings / eyebrows / decor ---- */
.elementor-45 .elementor-widget-cms_heading .custom-heading,
.elementor-45 .elementor-widget-cms_heading .custom-heading a { color: var(--pv-blue) !important; }
.elementor-45 .custom-subheading { color: var(--pv-red) !important; }
.elementor-45 .elementor-element-0c9f617 .inner-cms-cta :is(h1,h2,h3,h4,h5,strong) { color: var(--pv-red) !important; }
.elementor-45 .elementor-element-b8d9e40 { background-color: var(--pv-red) !important; }

/* ---- primary buttons (hero, fees, floating) ---- */
.elementor-45 .elementor-element-ca6f653 .elementor-button,
.elementor-5765 .elementor-element-c2eb3b0 .elementor-button {
  background: linear-gradient(135deg, var(--pv-red), var(--pv-red-soft)) !important;
  box-shadow: 0 12px 26px rgba(233, 79, 55, .35) !important;
}
.floating-button {
  background: linear-gradient(135deg, var(--pv-red), var(--pv-red-soft)) !important;
  box-shadow: 0 12px 28px rgba(233, 79, 55, .4) !important;
}

/* ---- fees page: headings, tables, jump bar, callout ---- */
.elementor-5765 .elementor-heading-title { color: var(--pv-blue) !important; }
.elementor-5765 .eael-data-table thead tr th {
  background: linear-gradient(135deg, var(--pv-blue), var(--pv-blue-deep)) !important;
}
.elementor-5765 .eael-data-table thead tr th:last-child {
  background: linear-gradient(135deg, var(--pv-red), var(--pv-red-dark)) !important;
}
.elementor-5765 .eael-data-table tbody > tr:nth-child(2n) td { background: var(--pv-tint) !important; }
.elementor-5765 .eael-data-table tbody tr td { border-bottom-color: #e7edf9 !important; }
.elementor-5765 .eael-data-table tbody tr:hover td { background: #dce7fb !important; }
.elementor-5765 .eael-data-table tbody tr td:first-child .td-content-wrapper { color: var(--pv-blue); }
.elementor-5765 .eael-data-table tbody tr td:last-child {
  color: var(--pv-blue-deep) !important;
  background: #FFF6DE !important;
  border-left-color: #F2D27E !important;
}
.elementor-5765 .eael-data-table tbody tr:hover td:last-child { background: #FFEFC5 !important; }
.elementor-5765 .eael-data-table tbody tr td:last-child .td-content-wrapper { color: var(--pv-blue-deep); }
.elementor-5765 .eael-data-table-wrap { border-color: var(--pv-tint-line); box-shadow: 0 14px 40px rgba(33, 65, 143, .1); }
/* plan builder canvas: plain white — the cream wash read as a random
   background change mid-page */
.elementor-5765 .elementor-element-pvc00sec { background-color: #fff !important; }
.pv-jump { background: linear-gradient(100deg, var(--pv-blue-deep), var(--pv-blue) 60%, var(--pv-blue-bright)); box-shadow: 0 10px 28px rgba(33, 65, 143, .3); }
.pv-jump b { color: var(--pv-yellow); }
.pv-jump a { background: var(--pv-yellow); color: var(--pv-yellow-ink) !important; }

/* ---- FAQ accordion ---- */
.pv-faq > h2 { color: var(--pv-blue); }
.pv-faq details { border-color: var(--pv-tint-line); box-shadow: 0 8px 22px rgba(33, 65, 143, .08); }
.pv-faq summary::after { background: var(--pv-tint); color: var(--pv-blue); }
.pv-faq details[open] summary::after { background: var(--pv-blue); color: #fff; }
.pv-faq details[open] summary { color: var(--pv-blue); }
.pv-faq .pv-faq-body a { color: var(--pv-red); }

/* ---- homepage trust strip + teaser ---- */
.pv-trust span { border-color: var(--pv-tint-line); color: var(--pv-ink); box-shadow: 0 6px 16px rgba(33, 65, 143, .08); }
.pv-trust span::before { color: var(--pv-green); }
.pv-teaser { background: radial-gradient(circle at 92% 10%, rgba(255,255,255,.16), transparent 120px), linear-gradient(135deg, var(--pv-blue-deep), var(--pv-blue) 55%, var(--pv-blue-bright)); }
.pv-teaser a.pv-teaser-btn { background: var(--pv-yellow); color: var(--pv-yellow-ink) !important; }

/* ---- fee calculator (pvc) — var-driven, one override ---- */
.pvc-wrap {
  --pvc-purple: var(--pv-blue);
  --pvc-purple-deep: var(--pv-blue-deep);
  --pvc-lilac: #BFD3FF;
  --pvc-lilac-soft: var(--pv-tint);
  --pvc-pink: var(--pv-red);
  --pvc-line: var(--pv-tint-line);
  --pvc-green: var(--pv-green);
}

/* ---- enquiry wizard (pvq) — var-driven, one override ---- */
.pvq-wrap {
  --q-purple: var(--pv-blue);
  --q-purple-deep: var(--pv-blue-deep);
  --q-lilac: var(--pv-tint);
  --q-pink: var(--pv-red);
  --q-line: var(--pv-tint-line);
  --q-yellow: var(--pv-yellow);
  --q-ink: var(--pv-ink);
}
.elementor-6328 .elementor-element-pvq00sec { background-color: var(--pv-paper) !important; }

/* ---- 404 ---- */
.pv-404 h1 { color: var(--pv-blue); }
.pv-404-links .pv-a1 { background: linear-gradient(135deg, var(--pv-red), var(--pv-red-soft)); box-shadow: 0 10px 22px rgba(233, 79, 55, .3); }
.pv-404-links .pv-a2 { background: var(--pv-tint); color: var(--pv-blue) !important; border-color: var(--pv-tint-line); }
/* ======================= END PALETTE: CRAYON BOX ======================= */

/* =========================================================================
   17. UI LIFE PACK — mobile hero, photo strip, action bar, reveals,
       mobile fee cards, trust marquee, ambient touches
   ========================================================================= */

/* ---- 17a. mobile hero: the WHOLE hero section (06481c4) carries
       elementor-hidden classes — phones got a blank void then a wall
       of text. Un-hide the section AND its text column, compact. ---- */
@media (max-width: 1024px) {
  .elementor-45 .elementor-element-06481c4.elementor-hidden-mobile,
  .elementor-45 .elementor-element-06481c4.elementor-hidden-tablet,
  .elementor-45 .elementor-element-06481c4 {
    display: block !important;
    min-height: 0 !important;
  }
  /* Elementor puts the min-height on the CONTAINER, not the section —
     collapse it, then leave a controlled photo band under the button */
  .elementor-45 .elementor-element-06481c4 > .elementor-container { min-height: 0 !important; }
  .elementor-45 .elementor-element-06481c4 { padding-bottom: 140px !important; }
  .elementor-45 .elementor-element-21ccc75.elementor-hidden-tablet,
  .elementor-45 .elementor-element-21ccc75.elementor-hidden-mobile,
  .elementor-45 .elementor-element-21ccc75 {
    display: flex !important;
    width: 100%;
  }
  /* the empty right-hand column only adds height on phones */
  .elementor-45 .elementor-element-099e703 { display: none !important; }
  /* ---- EXPERIMENT (revert = restore the plain gradient below) ----
     photo hero on mobile with a heavy white gradient for readability */
  .elementor-45 .elementor-element-06481c4:not(.elementor-motion-effects-element-type-background) {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.72) 100%),
      url('/wp-content/uploads/2020/08/bg-home-top-section.png') !important;
    background-size: cover !important;
    background-position: 72% center !important;
    background-repeat: no-repeat !important;
  }
  /* previous version (plain gradient):
  .elementor-45 .elementor-element-06481c4:not(.elementor-motion-effects-element-type-background) {
    background-image: linear-gradient(170deg, #EAF1FF 0%, #FFF8EA 78%) !important;
  } */
  /* lighter landing: drop the funded-places block + its spacer on
     phones so the CTA sits right after the intro */
  .elementor-45 .elementor-element-0c9f617,
  .elementor-45 .elementor-element-f71a300 { display: none !important; }
  .elementor-45 .elementor-element-ca6f653 { margin-top: 4px; }
  /* -------------------- END EXPERIMENT -------------------- */
  .elementor-45 .elementor-element-06481c4 { padding: 0 0 140px 0 !important; }
  .elementor-45 .elementor-element-811492b { padding: 0 !important; margin: 0 !important; }
  .elementor-45 .elementor-element-21ccc75 > .elementor-widget-wrap {
    margin-left: 0;
    padding: 30px 22px 34px;
    background: none;
  }
  .elementor-45 .elementor-element-b1cabe7 { display: none; }  /* big top spacer */
  .elementor-45 .elementor-element-681fb8f h3.custom-heading { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .elementor-45 .elementor-element-681fb8f .custom-heading-description { font-size: .98rem; }
}

/* ---- 17b. photo strip carousel (homepage) ---- */
.pv-strip {
  overflow: hidden;
  margin: 44px 0 8px;
  padding: 14px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pv-strip-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: pv-drift 55s linear infinite;
}
/* !important needed: Elementor's `.elementor img{height:auto}` ties on
   specificity and loads later — without it the photos render full-size */
.pv-strip img {
  height: 190px !important;
  width: auto !important;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(33, 65, 143, .18);
  border: 4px solid #fff;
  object-fit: cover;
}
.pv-strip img:nth-child(odd) { transform: rotate(-1.3deg); }
.pv-strip img:nth-child(even) { transform: rotate(1.1deg); }
@keyframes pv-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) { .pv-strip img { height: 140px !important; } }
@media (prefers-reduced-motion: reduce) {
  .pv-strip { overflow-x: auto; }
  .pv-strip-track { animation: none; }
}

/* ---- 17c. sticky mobile action bar ---- */
.pv-actionbar { display: none; }
@media (max-width: 767px) {
  .pv-actionbar {
    position: fixed;
    z-index: 997;
    left: 10px; right: 10px; bottom: 10px;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(26, 52, 116, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(15, 28, 70, .4);
  }
  .pv-actionbar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 999px;
    color: #fff !important;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
  }
  .pv-actionbar a svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .pv-actionbar .pv-ab-main { background: linear-gradient(135deg, var(--pv-red), var(--pv-red-soft)); box-shadow: 0 8px 18px rgba(233, 79, 55, .4); }
  /* the bar replaces the floating bubbles on phones */
  .floating-button, #ht-ctc-chat { display: none !important; }
  /* keep the fee-calculator mini bar above the action bar */
  .pvc-mobile-bar { bottom: 78px; }
  body { padding-bottom: 74px; }
}

/* ---- 17d. scroll reveals (JS adds pv-reveal/pv-in; html.pv-anim gates
       so content is never hidden without JS) ---- */
html.pv-anim .pv-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
}
html.pv-anim .pv-reveal.pv-in { opacity: 1; transform: none; }

/* ---- 17e. fees tables -> swipeable day cards on phones ---- */
.pv-daycards { display: none; }
@media (max-width: 767px) {
  .elementor-5765 .eael-data-table-wrap { display: none; }
  .pv-daycards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* full-bleed: escape the column's 35px gutters so cards swipe
       edge-to-edge — no more abrupt chop at an invisible inner box */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4px 16px 14px;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .pv-daycard {
    flex: 0 0 78%;
    max-width: 300px;
    scroll-snap-align: center;
    background: #fff;
    border: 2px solid var(--pv-tint-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(33, 65, 143, .12);
  }
  .pv-dc-day {
    background: linear-gradient(135deg, var(--pv-blue), var(--pv-blue-deep));
    color: #fff;
    font-family: "Fredoka One", Prompt, sans-serif;
    font-weight: 400;
    text-align: center;
    padding: 11px 10px;
    font-size: .95rem;
  }
  .pv-daycard-total .pv-dc-day { background: linear-gradient(135deg, var(--pv-red), var(--pv-red-dark)); }
  .pv-daycard-total { border-color: #F2D27E; }
  .pv-daycard-total .pv-dc-row { background: #FFF9E8; }
  .pv-dc-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #eef2fb;
    font-size: .9rem;
  }
  .pv-dc-row:last-child { border-bottom: 0; }
  .pv-dc-row b { color: var(--pv-blue-deep); font-size: 1rem; }
}

/* ---- 17f. trust chips marquee on phones ---- */
@media (max-width: 720px) {
  .pv-trust.pv-trust-marquee {
    display: block;
    overflow: hidden;
    padding: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .pv-trust-track {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: pv-drift 26s linear infinite;
    padding: 4px 0;
  }
  .pv-trust-track span { white-space: nowrap; }
}
@media (min-width: 721px) {
  .pv-trust-track { display: contents; }
}

/* ---- 17g. ambient touches ---- */
.cms-fancy-box:hover img,
.cms-fancy-box:hover i {
  animation: pv-wiggle .5s ease;
}
@keyframes pv-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg) scale(1.06); }
  70% { transform: rotate(5deg) scale(1.04); }
}
.elementor-45 img[src*="sun"],
.elementor-45 img[src*="cloud"],
.elementor-45 img[src*="bird"],
.elementor-45 img[src*="balloon"] {
  animation: pv-float 6s ease-in-out infinite;
}
@keyframes pv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-strip-track, .pv-trust-track,
  .elementor-45 img[src*="sun"], .elementor-45 img[src*="cloud"],
  .elementor-45 img[src*="bird"], .elementor-45 img[src*="balloon"] { animation: none !important; }
}
/* ===================== END UI LIFE PACK ===================== */

/* =========================================================================
   18. HOMEPAGE "OUR CLASSES" — Crayon Box rework
   The dark aubergine came from the theme's .cms-bg-secondary (#271344);
   the pink "+" from the parent stylesheet. Everything re-keyed to brand.
   ========================================================================= */
.cms-bg-secondary { background-color: var(--pv-blue-deep) !important; }

/* eyebrow + heading on the dark block: yellow / white (the generic
   homepage heading rule would make this cobalt-on-cobalt) */
.elementor-45 .elementor-element-821699b .cms-heading-wrapper .custom-subheading { color: var(--pv-yellow) !important; }
.elementor-45 .elementor-element-821699b .cms-heading-wrapper .custom-heading { color: #fff !important; }

/* accordion: separated rounded cards instead of one joined block */
.elementor-45 .elementor-element-15434f1 .cms-accordion-item {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 12px 28px rgba(8, 16, 48, .28);
  transition: transform .18s ease;
}
.elementor-45 .elementor-element-15434f1 .cms-accordion-item:hover { transform: translateY(-2px); }

/* title row */
.elementor-45 .cms-accordion.layout3 .cms-ac-title-text { color: var(--pv-ink); font-weight: 700; }
.elementor-45 .cms-accordion.layout3 .cms-ac-title.active .cms-ac-title-text { color: var(--pv-blue); }

/* icon chip: alternating brand tints (was pink/yellow) */
.elementor-45 .cms-accordion.layout3 .cms-accordion-item:nth-child(odd) .cms-ac-title .image-icon { background: var(--pv-tint) !important; border-right: 0 !important; }
.elementor-45 .cms-accordion.layout3 .cms-accordion-item:nth-child(even) .cms-ac-title .image-icon { background: #FFF3CF !important; border-right: 0 !important; }

/* toggle circle: closed = cobalt +, open = school-bus yellow x */
.elementor-45 .cms-accordion.layout3 .cms-ac-title:before {
  background-color: var(--pv-blue) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(33, 65, 143, .35);
  transition: transform .2s ease, background-color .2s ease;
}
.elementor-45 .cms-accordion.layout3 .cms-ac-title:hover:before {
  transform: translateY(-50%) scale(1.12);
}
.elementor-45 .cms-accordion.layout3 .cms-ac-title.active:before {
  background-color: var(--pv-yellow) !important;
  color: var(--pv-blue-deep) !important;
  box-shadow: 0 5px 12px rgba(255, 194, 51, .4);
}

/* open content body */
.elementor-45 .cms-accordion.layout3 .cms-ac-content { color: var(--pv-muted); }
/* ================= END "OUR CLASSES" REWORK ================= */

/* =========================================================================
   19. WHITESPACE + PILL BAR + ENQUIRE POLISH
   ========================================================================= */
/* the theme pads every page's content area 110px top and bottom —
   far too much air under the sticky header. Full-width Elementor
   templates (like the homepage) zero this themselves — leave them be. */
body:not(.page-template-elementor_header_footer) .site-content { padding-top: 40px !important; }
.page-id-6328 .site-content { padding-top: 8px !important; padding-bottom: 0 !important; }

/* fees jump bar: compact pill, sits snug under the header */
.pv-jump {
  max-width: 920px;
  margin: 4px auto 10px;
  padding: 8px 9px 8px 22px;
  gap: 14px;
}
.pv-jump span { font-size: .88rem; }
.pv-jump a { padding: 8px 17px; font-size: .84rem; }

/* enquire page: zero every theme wrapper so the wizard truly starts
   under the header, and give the bottom real breathing room */
.page-id-6328 #content,
.page-id-6328 .content-inner,
.page-id-6328 .content-container,
.page-id-6328 .content-row,
.page-id-6328 #primary,
.page-id-6328 .site-main,
.page-id-6328 .hentry,
.page-id-6328 .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.elementor-6328 .elementor-element.elementor-element-pvq00sec {
  padding: 16px 0 30px 0 !important;
  min-height: calc(100vh - 130px);
  min-height: calc(100dvh - 130px);
}
.page-id-6328 #site-header { padding: 6px 0 !important; }

/* enquire page: recap card on-brand (was a leftover green/lilac gradient) */
.page-id-6328 .pvq-plan {
  background: #fff;
  border: 2px solid var(--pv-tint-line);
  border-left: 6px solid var(--pv-yellow);
  border-radius: 14px;
}
.page-id-6328 .pvq-plan strong { color: var(--pv-blue); }
.page-id-6328 .pvq-plan pre { color: var(--pv-ink); }
/* tighter hero rhythm now the dead space is gone */
.page-id-6328 .pvq-hero h2 { margin-top: 0; }
.page-id-6328 .pvq-card { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
/* slimmer header on the enquire page */
.page-id-6328 #site-header .container { padding-top: 0; padding-bottom: 0; }
/* on the locked desktop view, drop the field helper lines and
   sublabels — they cost ~70px the viewport doesn't have */
@media (min-width: 768px) {
  .page-id-6328 .pvq-form-slot .wpforms-field-description,
  .page-id-6328 .pvq-form-slot .wpforms-field-sublabel { display: none !important; }
  .page-id-6328 .pvq-nav { margin-bottom: 2px; }
}
/* ================= END SECTION 19 ================= */

/* =========================================================================
   20. FOOTER + FIXES (chips duplicate, fees spacing)
   ========================================================================= */
/* trust chips: the marquee clones are for the mobile loop only —
   on desktop they rendered as a duplicate second row */
@media (min-width: 721px) {
  .pv-trust span[aria-hidden="true"] { display: none; }
}

/* ---- site footer ---- */
.pv-footer {
  background: linear-gradient(180deg, var(--pv-blue-deep), #142a5e);
  color: #cfd9f2;
  padding: 54px 24px 0;
  margin-top: 60px;
}
.pv-footer-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 34px;
}
@media (max-width: 900px) { .pv-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pv-footer-grid { grid-template-columns: 1fr; } }
.pv-f-col h4 {
  color: var(--pv-yellow);
  font-family: "Fredoka One", Prompt, sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  margin: 0 0 14px;
}
.pv-f-col p { margin: 0 0 12px; font-size: .92rem; line-height: 1.6; color: #cfd9f2; }
.pv-f-col b { color: #fff; }
.pv-f-col a {
  display: block;
  color: #cfd9f2 !important;
  text-decoration: none;
  font-size: .92rem;
  padding: 4px 0;
  transition: color .15s ease, transform .15s ease;
}
.pv-f-col a:hover { color: var(--pv-yellow) !important; transform: translateX(3px); }
.pv-f-logo { font-family: "Fredoka One", Prompt, sans-serif; color: #fff; font-size: 1.25rem; margin-bottom: 10px; }
.pv-footer-base {
  max-width: 1140px;
  margin: 36px auto 0;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem;
  color: #9fb0d9;
  text-align: center;
}
/* the theme's own footer area is empty — keep it collapsed */
footer#colophon { display: none; }
@media (max-width: 767px) { .pv-footer { padding-bottom: 60px; } }

/* ---- fees page: consumables callout + plan-builder section rhythm ---- */
.elementor-5765 .elementor-element-5f5771e { max-width: 1140px; margin: 0 auto 34px !important; }
.elementor-5765 .elementor-element.elementor-element-pvc00sec { padding: 34px 0 56px 0 !important; }
.elementor-5765 .elementor-element-pvc00hd1 { margin: 8px 0 10px !important; }
.elementor-5765 .elementor-element-pvc00hd2 { margin-bottom: 6px !important; }
/* ================= END SECTION 20 ================= */

/* screen-reader-only (used by the injected H1s) */
.pv-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   21. MOBILE-ONLY PASS (≤767px, tablet notes at ≤1024px)
   Every rule here lives inside a max-width query — zero effect on desktop.
   ========================================================================= */
@media (max-width: 767px) {

  /* ---- global guards ---- */
  img { max-width: 100%; height: auto; }
  .elementor-widget-google_maps iframe { height: 260px !important; }

  /* ---- topbar: phone + socials only, one tidy row ---- */
  #site-topbar .item-adderess,
  #site-topbar .item-time { display: none !important; }
  #site-topbar .inner-container { justify-content: center; }
  #site-topbar { font-size: .85rem; }

  /* ---- homepage hero ---- */
  .elementor-45 .elementor-element-681fb8f h3.custom-heading {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
    line-height: 1.12 !important;
  }
  .elementor-45 .elementor-element-681fb8f .custom-heading-description,
  .elementor-45 .elementor-element-0c9f617 .item--description { font-size: .95rem; }
  .elementor-45 .elementor-element-ca6f653 .elementor-button {
    display: block;
    text-align: center;
    padding: 15px 20px !important;
  }

  /* ---- photo strip: smaller frames, tighter rhythm ---- */
  .pv-strip { margin: 26px 0 4px; padding: 8px 0 12px; }
  .pv-strip-track { gap: 10px; animation-duration: 38s; }
  .pv-strip img { height: 112px !important; border-width: 3px; border-radius: 12px; }

  /* ---- headings rhythm across homepage sections ---- */
  .elementor-45 .cms-heading-wrapper .custom-heading { font-size: clamp(1.45rem, 6.4vw, 1.9rem) !important; }
  .elementor-45 .elementor-element-6516ee7 { margin-bottom: 44px !important; }

  /* ---- plan-builder teaser ---- */
  .pv-teaser { padding: 24px 20px; margin: 20px 14px 40px; text-align: center; justify-content: center; }
  .pv-teaser h2 { font-size: 1.4rem; }
  .pv-teaser p { font-size: .92rem; }
  .pv-teaser a.pv-teaser-btn { width: 100%; text-align: center; padding: 14px 20px; }

  /* ---- enrolling banner: centred, sane sizes ---- */
  .elementor-45 .elementor-element-47a15647 .cms-cta { text-align: center; }
  .elementor-45 .elementor-element-47a15647 .cms-cta :is(h1,h2,h3,h4,h5,strong) { font-size: clamp(1.3rem, 6vw, 1.7rem) !important; }

  /* ---- fees page ---- */
  .pv-jump span { font-size: .84rem; }
  .elementor-5765 .elementor-widget-heading { margin: 38px 0 16px !important; }
  .elementor-5765 .elementor-heading-title { font-size: clamp(1.35rem, 6vw, 1.7rem) !important; }
  /* calculator */
  .pvc-step { padding: 18px 14px !important; }
  .pvc-summary-body { padding: 18px 16px 20px !important; }
  .pvc-summary-top { padding: 18px 16px 14px !important; }
  .pvc-total-row strong { font-size: 1.9rem !important; }
  .pvc-step-head h3 { font-size: 1.15rem !important; }

  /* ---- enquiry wizard ---- */
  /* card is a transparent wrapper now — padding just ate screen width */
  .pvq-card { padding: 0 !important; }
  .pvq-hero h2 { font-size: 1.35rem !important; }
  .pvq-kicker { font-size: .72rem; }
  .pvq-trust span { font-size: .78rem; padding: 6px 12px; }
  .pvq-step h3 { font-size: 1.15rem !important; }

  /* ---- FAQ ---- */
  .pv-faq { padding: 0 14px; margin-bottom: 46px; }
  .pv-faq summary { padding: 15px 48px 15px 16px; font-size: .95rem; }
  .pv-faq .pv-faq-body { padding: 0 16px 16px; font-size: .92rem; }

  /* ---- footer ---- */
  .pv-footer { padding: 38px 20px 0; margin-top: 40px; }
  .pv-footer-grid { gap: 24px; }
  .pv-footer-base { margin-top: 24px; font-size: .76rem; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* tablet: hero text needs the scrim treatment too (column was unhidden) */
  .elementor-45 .elementor-element-681fb8f h3.custom-heading { font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important; }
  .pv-strip img { height: 160px !important; }
}
/* ===================== END MOBILE-ONLY PASS ===================== */

/* 21b. mobile-only: comfortable side gutters everywhere */
@media (max-width: 767px) {
  .elementor-top-section > .elementor-container { padding-left: 20px; padding-right: 20px; }
  .elementor-45 .elementor-element-21ccc75 > .elementor-widget-wrap { padding-left: 24px; padding-right: 24px; }
  .entry-content > :not(.elementor):not(.pv-jump):not(.pv-faq) { padding-left: 20px; padding-right: 20px; }
  .pv-trust { padding: 0 20px; }
}

/* 21c. mobile-only: the four feature cards become a swipe carousel
   (a peek of the next card invites the swipe) */
@media (max-width: 767px) {
  .elementor-45 .elementor-element-73812581 > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 4px 16px;
    scrollbar-width: none;
  }
  .elementor-45 .elementor-element-73812581 > .elementor-container::-webkit-scrollbar { display: none; }
  .elementor-45 .elementor-element-73812581 .elementor-column {
    flex: 0 0 76% !important;
    max-width: 76% !important;
    width: 76% !important;
    scroll-snap-align: center;
  }
  .elementor-45 .elementor-element-73812581 .cms-fancy-box { height: 100%; }

  /* about page: same treatment for its four stacked feature cards */
  .elementor-element-fe1d118 > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 4px 16px;
    scrollbar-width: none;
  }
  .elementor-element-fe1d118 > .elementor-container::-webkit-scrollbar { display: none; }
  .elementor-element-fe1d118 .elementor-column {
    flex: 0 0 76% !important;
    max-width: 76% !important;
    width: 76% !important;
    scroll-snap-align: center;
  }
  .elementor-element-fe1d118 .cms-fancy-box { height: 100%; }
}

/* 21d. mobile-only: ~20% less white space at the top of the page
   (the logo is most of the header's height) */
@media (max-width: 767px) {
  #site-header-wrap .site-branding a img { max-height: 80px !important; }
  body.pv-header-solid #site-header-wrap .site-branding a img { max-height: 62px !important; }
  #site-header .row { min-height: 0; }
  .elementor-45 .elementor-element-21ccc75 > .elementor-widget-wrap { padding-top: 20px; }
}

/* 22. funding page "Attention" items: honour the line break and make
   the first line read as a heading (the widget escapes real HTML) */
.elementor-4675 .cms-attention li {
  white-space: pre-line;
  margin-bottom: 14px;
}
.elementor-4675 .cms-attention li::first-line {
  font-weight: 700;
  color: #21418F;
}

/* =========================================================================
   23. SCATTERED ILLUSTRATIONS — theme-bundled artwork placed as pure
   decoration (pointer-events: none everywhere; remove any block freely)
   ========================================================================= */

/* fees page: bunting + sun over the plan-builder section */
.elementor-5765 .elementor-element-pvc00sec { position: relative; }
.elementor-5765 .elementor-element-pvc00sec::before {
  content: "";
  position: absolute;
  top: 10px; left: 6%;
  width: 300px; height: 130px;
  background: url('/wp-content/uploads/2020/08/image-bg-left.png') no-repeat center / contain;
  pointer-events: none;
}
/* (floating sun removed — the plan builder keeps a clean canvas) */

/* enquiry wizard: bunting strung over the title */
.pvq-hero { position: relative; }
.pvq-hero::before {
  content: "";
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 110px;
  background: url('/wp-content/uploads/2020/08/image-bg-left.png') no-repeat center / contain;
  pointer-events: none;
  opacity: .95;
}
.page-id-6328 .pvq-hero { padding-top: 52px; }

/* plan-builder teaser: small bunting in the corner */
.pv-teaser { position: relative; overflow: hidden; }
.pv-teaser::before {
  content: "";
  position: absolute;
  top: -6px; left: 18px;
  width: 190px; height: 84px;
  background: url('/wp-content/uploads/2020/08/image-bg-left.png') no-repeat center / contain;
  pointer-events: none;
  opacity: .85;
}

/* FAQ: the bee buzzes beside the heading */
.pv-faq > h2 { position: relative; display: block; }
.pv-faq > h2::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 92px; height: 42px;
  margin-left: 12px;
  background: url('/wp-content/uploads/2020/08/image-bee-1.png') no-repeat center / contain;
  pointer-events: none;
}

/* homepage: the school-walk banner as a divider above the footer */
body.home .pv-footer { margin-top: 0; }
body.home .pv-footer::before {
  content: "";
  display: block;
  height: 170px;
  margin: 0 0 0;
  background: url('/wp-content/uploads/2020/08/bg-bottom.png.webp') no-repeat center bottom / contain #fff;
  pointer-events: none;
}

/* 404: sun + cloud in the corners */
.pv-404 { position: relative; }
.pv-404::before,
.pv-404::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.pv-404::before {
  top: 30px; left: 4%;
  width: 110px; height: 70px;
  background: url('/wp-content/uploads/2020/08/image-clound.png') no-repeat center / contain;
}
.pv-404::after {
  top: 24px; right: 5%;
  width: 84px; height: 84px;
  background: url('/wp-content/uploads/2020/08/the-sun.png') no-repeat center / contain;
  animation: pv-float 6s ease-in-out infinite;
}

/* About: crab doodle by the page title; Team: drifting cloud */
.page-id-12 #pagetitle,
.page-id-18 #pagetitle { position: relative; overflow: hidden; }
.page-id-12 #pagetitle::after {
  content: "";
  position: absolute;
  bottom: 12px; right: 6%;
  width: 74px; height: 74px;
  background: url('/wp-content/uploads/2020/08/image-home-1.png') no-repeat center / contain;
  opacity: .85;
  pointer-events: none;
}
.page-id-18 #pagetitle::after {
  content: "";
  position: absolute;
  top: 20px; right: 8%;
  width: 110px; height: 66px;
  background: url('/wp-content/uploads/2020/08/image-clound.png') no-repeat center / contain;
  opacity: .8;
  pointer-events: none;
}

/* phones: keep only the lightweight ones, shrink the rest */
@media (max-width: 767px) {
  .elementor-5765 .elementor-element-pvc00sec::before { width: 190px; height: 84px; left: 4%; }
  .elementor-5765 .elementor-element-pvc00sec::after { display: none; }
  .pvq-hero::before { width: 210px; height: 84px; top: -10px; }
  .page-id-6328 .pvq-hero { padding-top: 44px; }
  .pv-teaser::before { display: none; }
  .pv-faq > h2::after { width: 64px; height: 30px; margin-left: 8px; }
  body.home .pv-footer::before { height: 110px; }
}
/* ===================== END SCATTERED ILLUSTRATIONS ===================== */