/* Same visual tokens as the approved preview; layout and behaviours stay native. */
:root {
    --play-paper:#fffefa; --play-ink:#14251e; --play-blue:#064cc7; --play-blue-dark:#04399a;
    --play-yellow:#ffcf32; --play-mint:#eaf7ee; --play-sky:#dceffa;
    --play-line:#8ba28b; --play-whatsapp:#0b6b3a;
    /* The parent's green brand tokens become blue so leftover parent rules match this palette. */
    --color-primary:#064cc7; --color-primary-dark:#04399a; --color-primary-light:#2f6fe0;
    --color-accent:#ffcf32; --color-accent-dark:#efbd1f;
    --color-text-dark:#14251e; --color-text-medium:#375542;
    --color-text-light:#52675e; --color-bg-light:#fffefa;
    --color-bg-light2:#fff2b5; --color-border:#8ba28b;
    --hp-cream:#fffefa; --hp-green:#064cc7; --hp-green-dark:#04399a; --hp-green-light:#dceffa;
    --hp-text:#14251e; --hp-yellow:#ffcf32; --hp-blue:#064cc7;
    --pla-paper:#fffefa; --pla-ink:#14251e; --pla-line:#8ba28b;
    --radius-md:24px; --shadow-card:4px 4px 0 #14251e;
}
.pla-playful { background:var(--play-paper); color:var(--play-ink); color-scheme:light; }
.pla-playful :is(h1,h2,h3) { letter-spacing:-.03em; text-wrap:balance; }
.pla-playful :is(.section-title,.hp-section-title) { color:var(--play-ink); text-transform:none; line-height:1.18; font-weight:800; }
.pla-playful :is(.section-eyebrow,.hp-section-eyebrow,.hero-eyebrow) {
    display:inline-block; background:var(--play-yellow); color:var(--play-ink);
    padding:5px 12px; border-radius:4px 10px 4px 8px; font-weight:700;
}
.pla-playful .top-bar { background:var(--play-mint); color:var(--play-ink); }
.pla-playful .top-bar a { color:var(--play-ink); }
.pla-playful .top-bar .social-icon { color:var(--play-ink); }
.pla-playful .main-header { background:var(--play-paper); border-bottom:2px solid var(--play-ink); }
/* The parent's sticky nav never sticks because its <header> wrapper is only as tall as the nav.
   Dissolving the wrapper box lets the nav stick to the page while the top bar scrolls away. */
@media screen { .pla-playful .site-header { display:contents; } }
.pla-playful .main-header { position:sticky; top:0; z-index:1000; }
.pla-playful.admin-bar .main-header { top:32px; }
@media(max-width:782px) { .pla-playful.admin-bar .main-header { top:46px; } }
@media(max-width:600px) { .pla-playful.admin-bar .main-header { top:0; } }
.pla-playful .nav-link { color:var(--play-ink); }
.pla-playful .nav-link { border-radius:9px; }
.pla-playful .nav-link:is(:hover,:focus-visible),
.pla-playful .has-dropdown:is(:hover,:focus-within) > .nav-link { background:#fff2b5; color:var(--play-ink); }
.pla-playful .nav-link.active,
.pla-playful .has-dropdown:is(:hover,:focus-within) > .nav-link.active { background:var(--play-yellow); color:var(--play-ink); }
.pla-playful .dropdown { border:2px solid var(--play-ink); border-radius:14px; box-shadow:4px 4px 0 var(--play-ink); background:#fffefa; }
.pla-playful .dropdown a:is(:hover,:focus-visible) { background:#fff2b5; color:var(--play-ink); }
.pla-playful :is(.btn,.wpcf7-submit),
.pla-playful .contact-form input[type=submit],
.pla-playful .holiday-signup-form input[type=submit] {
    /* Separate selectors prevent form specificity from overriding every variant.
       Important colours counter the parent's legacy important button colours. */
    background:var(--play-blue); color:#fff !important; border:2px solid var(--play-blue);
    border-radius:14px 14px 14px 4px; box-shadow:4px 4px 0 var(--play-ink);
    min-height:48px; font-weight:700; line-height:1.4; text-shadow:none;
    transition:transform .15s,box-shadow .15s; white-space:normal;
}
.pla-playful :is(.btn,.wpcf7-submit):is(:hover,:focus-visible) { background:#04399a; color:#fff !important; transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--play-ink); }
.pla-playful :is(.btn-outline,.btn-secondary,.hp-btn-hero-outline) { background:#fff; color:var(--play-blue) !important; border-color:var(--play-blue); }
.pla-playful :is(.btn-outline,.btn-secondary,.hp-btn-hero-outline):is(:hover,:focus-visible) { background:#eaf0ff; color:#04399a !important; }
.pla-playful :is(.btn-accent,.btn-yellow) { background:var(--play-yellow); color:var(--play-ink) !important; border-color:var(--play-ink); }
.pla-playful :is(.btn-accent,.btn-yellow):is(:hover,:focus-visible) { background:#efbd1f; color:var(--play-ink) !important; }
.pla-playful .btn-whatsapp { background:var(--play-whatsapp); color:#fff !important; border-color:var(--play-whatsapp); }
.pla-playful .btn-whatsapp:is(:hover,:focus-visible) { background:#085029; color:#fff !important; }
.pla-playful :is(a,button,summary,input,select,textarea):focus-visible { outline:3px solid var(--play-blue); outline-offset:5px; }

/* Open paper hero, playful colour shapes, and the existing Percy artwork. */
.pla-playful.home .hp-hero {
    background:radial-gradient(ellipse at 100% 0%,#ffdb59 0%,#ffdb59 20%,transparent 20.2%),
      radial-gradient(ellipse at 0% 100%,#d6edda 0%,#d6edda 22%,transparent 22.2%),var(--play-paper);
    padding:64px 0 70px; min-height:0; overflow:hidden;
}
.pla-playful .hp-hero-blob,.pla-playful .hp-wave { display:none; }
.pla-playful.home .hp-hero-inner { grid-template-columns:1.1fr 1fr; gap:45px; }
.pla-playful.home .hp-hero-content { background:transparent; padding:0; border-radius:0; text-align:left; }
.pla-playful.home .hp-hero .hp-hero-title { color:var(--play-ink); font-size:clamp(2.5rem,5.5vw,4.2rem); font-weight:900; line-height:1.07; }
.pla-playful.home .hp-hero .hp-hero-title em {
    color:var(--play-ink); font-style:normal; background:var(--play-yellow); padding:0 10px;
    border-radius:4px 10px 4px 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.pla-playful.home .hp-hero .hp-hero-sub { color:#375542; font-size:1.05rem; max-width:490px; }
.pla-playful.home .hp-hero .hp-btn-hero-primary { background:var(--play-blue); color:#fff; box-shadow:4px 4px 0 var(--play-ink); }
.pla-playful.home .hp-hero .hp-hero-ctas { justify-content:flex-start; }
.pla-playful.home .hp-hero-trust { justify-content:flex-start; gap:10px; }
.pla-playful.home .hp-hero-trust span { background:#fff; border:1px solid #8ba28b; border-radius:20px; padding:5px 10px; color:var(--play-ink); font-size:.8rem; }
.pla-playful.home .hp-hero-mascot { min-height:370px; padding-top:85px; margin:0; }
.pla-playful.home .hp-mascot-img { animation:none; max-width:290px; filter:drop-shadow(0 14px 16px #07552c20); }
.pla-playful.home .hp-hero-mascot .hp-hero-float-badge { top:auto; bottom:30px; right:0; background:var(--play-blue); color:#fff; border-radius:50% 50% 50% 6px; padding:22px; transform:rotate(7deg); box-shadow:none; animation:none; }
.pla-playful .hp-float-txt { color:#fff; }
.pla-playful .hp-learning-symbol { text-shadow:none; font-size:42px; }
.pla-playful .hp-symbol-cluster--letters .hp-learning-symbol:nth-child(1),
.pla-playful .hp-symbol-cluster--maths .hp-learning-symbol:nth-child(2) { color:#c02e54; }
.pla-playful .hp-symbol-cluster--letters .hp-learning-symbol:nth-child(2),
.pla-playful .hp-symbol-cluster--maths .hp-learning-symbol:nth-child(3) { color:#07552c; }
.pla-playful .hp-symbol-cluster--letters .hp-learning-symbol:nth-child(3),
.pla-playful .hp-symbol-cluster--maths .hp-learning-symbol:nth-child(1) { color:#064cc7; }
.pla-playful .hp-symbol-cluster--maths .hp-learning-symbol:nth-child(n+4) { color:#14251e; }
.pla-playful.home .hp-learning-symbols { top:0; height:100px; }

/* Existing programme and utility pages share the new design system. */
.pla-playful :is(.page-hero,.holiday-hero) {
    background:radial-gradient(ellipse at 100% 0%,#ffdb59 0%,#ffdb59 24%,transparent 24.2%),var(--play-paper);
    color:var(--play-ink); padding-block:64px;
}
.pla-playful .page-hero-overlay { background:none; }
.pla-playful :is(.page-hero-title,.holiday-hero h1) { color:var(--play-ink); font-weight:900; font-size:clamp(2.2rem,5.2vw,4rem); line-height:1.1; text-shadow:none; }
.pla-playful :is(.page-hero-subtitle,.holiday-hero p) { color:#375542; text-shadow:none; }
.pla-playful .proof-bar { background:#fff; color:var(--play-ink); border-block:2px solid var(--play-ink); }
.pla-playful :is(.proof-number,.proof-label) { color:var(--play-ink); }
.pla-playful .proof-divider { background:#8ba28b; }
.pla-playful :is(.bg-light,.hp-shared-teaching,.hp-gallery,.pla-learning-path) { background:var(--play-mint); }
.pla-playful :is(.hp-subjects,.hp-testi,.hp-blog,.pla-reading-start,.pla-guides) { background:var(--play-paper); }
.pla-playful :is(.hp-subject-card,.program-card,.hp-program-card,.step-card,.hp-why-card,.hp-testi-card,.testi-card,.blog-card,.hp-blog-card,.pla-guide-card,.pla-price-card,.contact-quick-card,.location-card) {
    border:2px solid var(--play-ink); border-radius:24px; box-shadow:4px 4px 0 var(--play-ink); background:#fff;
}
.pla-playful .hp-subject-card { background:var(--play-mint); }
.pla-playful .hp-subject-card > img { border-bottom:2px solid var(--play-ink); }
.pla-playful .hp-subject-card--maths { background:#fff2b5; }
.pla-playful :is(.pla-reading-start-grid,.pla-online-feedback-grid,.pla-progress-grid,.pla-guide-grid) > article,
.pla-playful .pla-skill-path li { border:2px solid var(--play-ink); border-radius:24px; padding:26px; background:#fff; box-shadow:3px 3px 0 var(--play-ink); }
/* Card sets stay white so they read as one group; the step number carries the colour. */
.pla-playful .pla-reading-page .pla-reading-label { display:inline-grid; place-items:center; min-width:44px; padding:4px 10px; background:var(--play-yellow); color:var(--play-ink); border:2px solid var(--play-ink); border-radius:10px 10px 10px 3px; font-size:.95rem; line-height:1.3; }
.pla-playful .pla-step-label { color:var(--play-blue); }
/* Step cards: a "Step n" tab sits on the card edge, the icon gets its own tile, text reads left to right. */
.pla-playful .steps-row { margin-top:44px; row-gap:38px; }
.pla-playful .step-card { position:relative; overflow:visible; text-align:left; padding:40px 28px 28px; }
.pla-playful .step-number { position:absolute; top:-18px; left:24px; width:auto; height:auto; margin:0; padding:5px 14px; display:block; background:var(--play-yellow); color:var(--play-ink); border:2px solid var(--play-ink); border-radius:12px 12px 12px 4px; box-shadow:3px 3px 0 var(--play-ink); font-size:.95rem; font-weight:800; line-height:1.3; letter-spacing:.04em; text-transform:uppercase; }
.pla-playful .step-number::before { content:"Step "; }
.pla-playful .step-icon { display:grid; place-items:center; width:60px; height:60px; margin:0 0 16px; background:var(--play-sky); border:2px solid var(--play-ink); border-radius:18px 18px 18px 6px; font-size:1.7rem; line-height:1; }
/* nth-of-type counts the hidden connector divs between cards, so the cards are 1, 3 and 5. */
.pla-playful .step-card:nth-of-type(3) .step-icon { background:#fff2b5; }
.pla-playful .step-card:nth-of-type(5) .step-icon { background:var(--play-mint); }
.pla-playful .step-card h3 { font-size:1.25rem; margin-bottom:8px; }
.pla-playful .step-card p { font-size:.98rem; line-height:1.6; margin:0; }
.pla-playful :is(.content-image img,.content-image video,.pain-image img,.hp-approach-image img) { border:2px solid var(--play-ink); border-radius:32px; box-shadow:6px 6px 0 var(--play-yellow); }
.pla-playful :is(.holiday-video-wrap,.calendly-wrapper) { border:2px solid var(--play-ink); border-radius:24px; box-shadow:4px 4px 0 var(--play-ink); overflow:hidden; }
.pla-playful .pla-video-preview span { background:var(--play-blue); color:#fff; border-radius:12px; }
.pla-playful :is(.assessment-cta-banner,.final-cta-section,.hp-booking-section,.holiday-mid-cta) { background:#fff2b5; color:var(--play-ink); }
.pla-playful .hp-next-steps { background:#fff2b5; color:var(--play-ink); }
.pla-playful .hp-next-steps .hp-section-eyebrow { color:var(--play-ink); }
.pla-playful .hp-next-grid article { border:2px solid var(--play-ink); border-radius:24px; box-shadow:4px 4px 0 var(--play-ink); background:var(--play-mint); }
.pla-playful .hp-next-grid article + article { background:#fff; }
.pla-playful :is(.assessment-cta-banner,.final-cta-section,.hp-booking-section,.holiday-mid-cta) :is(h2,h3,p) { color:var(--play-ink); }
.pla-playful .final-cta-section .btn-whatsapp { color:var(--play-ink) !important; background:#fff; }
.pla-playful .final-cta-section .btn-whatsapp:is(:hover,:focus-visible) { background:var(--play-mint); color:#064024 !important; }
.pla-playful .final-cta-badge { background:var(--play-yellow); color:var(--play-ink); }
.pla-playful :is(.hp-testi-stars-top,.testi-stars,.htc-stars) { color:#805800; }
.pla-playful .lc-badge-my { color:#064cc7; }
.pla-playful :is(.banner-badge,.hero-split-badge) { background:var(--play-yellow); color:var(--play-ink); border:1px solid var(--play-ink); }
.pla-playful :is(.pla-online-trial,.pla-reading-trial) { background:#fff2b5; border:2px dashed var(--play-ink); border-radius:24px; }
.pla-playful .hp-testi-card--featured { background:var(--play-sky); color:var(--play-ink); }
.pla-playful :is(.hp-testi-quote,.hp-testi-info strong) { color:var(--play-ink); }
.pla-playful :is(.hp-booking-form-wrap,.booking-form-wrapper,.contact-form-card) { background:#fff; border:2px solid var(--play-ink); border-radius:24px; box-shadow:4px 4px 0 var(--play-ink); }
.pla-playful :is(.contact-form,.booking-form-wrapper,.hp-booking-form-wrap,.wpcf7) :is(input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
    border:1px solid #8ba28b; border-radius:10px; background:#fff; color:var(--play-ink); font-size:16px; max-width:100%;
}
.pla-playful .faq-item { border-color:#8ba28b; background:transparent; }
.pla-playful .faq-item summary { color:var(--play-ink); }
.pla-playful .site-footer { background:var(--play-ink); color:#fff; border-top:5px solid var(--play-yellow); }
.pla-playful .site-footer a { color:#fff; }
.pla-playful .site-footer a:hover { color:var(--play-yellow); }
.pla-playful .fade-in { opacity:1; transform:none; }


/* Palette clean-up: headings and labels use ink, interactive accents use blue, and
   highlights use yellow. Green is kept only for WhatsApp actions and the logo. */
.pla-playful.pla-playful :is(h1,h2,h3,h4,h5,h6,dt,.booking-form-title,.cdc-title):not(.site-footer *) { color:var(--play-ink); }
.pla-playful #inside-a-lesson h3 { color:var(--play-ink); }
.pla-playful :is(.hero-split-content,.ol-hero) h1 :is(span,em) { color:var(--play-ink); font-style:normal; background:linear-gradient(transparent 58%,var(--play-yellow) 58%); }
.pla-playful .top-separator { color:var(--play-ink); }
.pla-playful .skip-link { background:var(--play-ink); color:#fff; }
.pla-playful .nav-link.active::after { background:var(--play-ink); }
.pla-playful .back-to-top { background:var(--play-blue); color:#fff; border:2px solid var(--play-ink); }
.pla-playful .faq-icon { background:var(--play-yellow); color:var(--play-ink); border:2px solid var(--play-ink); }
.pla-playful :is(.program-age,.booking-instant-badge,.calendly-frame-badge,.page-numbers.current) { background:var(--play-yellow); color:var(--play-ink); border:1px solid var(--play-ink); }
.pla-playful :is(.hiw-step-num,.testi-avatar,.htc-avatar) { background:var(--play-yellow); color:var(--play-ink); border:2px solid var(--play-ink); }
.pla-playful .hiw-connector { color:var(--play-ink); }
.pla-playful :is(.hp-text-link,.hiw-link,.blog-card-readmore,.pla-media-link,.epayment-section a,.pla-reading-online-note a) { color:var(--play-blue); }
.pla-playful :is(.hp-text-link,.hiw-link,.blog-card-readmore,.pla-media-link):is(:hover,:focus-visible) { color:var(--play-blue-dark); }
.pla-playful .pla-media-link { background:#fff; border-top:2px solid var(--play-ink); }
.pla-playful .pla-video-preview { background:var(--play-ink); }
.pla-playful :is(.hp-programme-detail,.pla-online-badges li,.pla-reading-trial-badges li,.booking-pill,.pain-image-badge :is(.badge-num,.badge-txt)) { color:var(--play-ink); }
.pla-playful .hp-programme-detail { border-color:var(--play-line); background:#fff; }
.pla-playful .hp-programme-detail > span { border-left-color:var(--play-line); }
.pla-playful .pla-reading-page .pla-blending-example > span:not(.pla-blending-arrow) { background:var(--play-yellow); color:var(--play-ink); border:2px solid var(--play-ink); }
.pla-playful .pla-reading-page .pla-blending-example strong { background:var(--play-blue); color:#fff; border:2px solid var(--play-ink); }
.pla-playful :is(.pla-maths-example,.outcome-card,.skill-item,.role-card,.contact-booking-nudge,.online-next-steps,.pain-close-text) { border-color:var(--play-ink); }
.pla-playful .pla-maths-page .pla-maths-example { background:var(--play-sky); border-left-color:var(--play-blue); }
.pla-playful .skill-item { background:#fff; }
/* Important: these two carry inline green colours in the parent template. */
.pla-playful .bank-badge { background:var(--play-mint) !important; color:var(--play-ink) !important; }
.pla-playful main p > a[href*="wa.me"] { color:var(--play-blue) !important; }
.pla-playful .booking-form-section::before { background:var(--play-yellow); }
.pla-playful .booking-tab-btn.active { background:var(--play-sky); border-color:var(--play-ink); box-shadow:3px 3px 0 var(--play-ink); }
.pla-playful .calendly-frame-header { background:var(--play-ink); }
.pla-playful .calendly-frame-title { color:#fff; }
.pla-playful .hp-symbol-cluster--letters .hp-learning-symbol:nth-child(2),
.pla-playful .hp-symbol-cluster--maths .hp-learning-symbol:nth-child(3) { color:#b56b00; }
.pla-playful .ol-sticker { background:var(--play-blue); color:#fff; }

/* Formerly solid green blocks become light panels with ink text. */
.pla-playful .why-pla-section { background:var(--play-sky); color:var(--play-ink); }
.pla-playful .why-pla-section :is(.section-title,.section-intro) { color:var(--play-ink); }
.pla-playful .why-pla-card { background:#fff; border:2px solid var(--play-ink); border-radius:24px; box-shadow:4px 4px 0 var(--play-ink); }
.pla-playful .why-pla-card :is(h3,p) { color:var(--play-ink); }
.pla-playful .sidebar-cta { background:#fff2b5; color:var(--play-ink); }
.pla-playful .sidebar-cta :is(h3,p) { color:var(--play-ink); }

/* Labels keep their natural width, and centre with the heading they introduce. */
.pla-playful :is(.section-eyebrow,.hp-section-eyebrow,.hero-eyebrow) { width:fit-content; max-width:100%; }
.pla-playful :is(.section-eyebrow,.hero-eyebrow).text-center,
.pla-playful .text-center > :is(.section-eyebrow,.hero-eyebrow),
.pla-playful .page-hero:not(.holiday-hero) .hero-eyebrow { display:block; margin-inline:auto; text-align:center; text-wrap:balance; }
.pla-playful .hp-testi-card--featured .hp-testi-footer { justify-content:center; }
.pla-playful .hp-testi-card--featured .hp-testi-info { align-items:center; text-align:center; }
.pla-playful .holiday-hero-text { text-align:left; }
.pla-playful .faq-section :is(.section-title,.section-intro) { text-align:center; margin-inline:auto; }

/* Tighter vertical rhythm: the parent stacks hero, section and heading gaps. */
.pla-playful .page-hero { padding-block:56px 48px; }
.pla-playful .page-section { padding-block:64px; }
.pla-playful :is(.faq-section,.how-it-works,.outcomes-section,.why-pla-section,.assessment-testimonials,.pain-points).page-section,
.pla-playful :is(.faq-section,.how-it-works,.outcomes-section,.why-pla-section,.assessment-testimonials,.pain-points,.booking-form-section,.final-cta-section,.content-section) { padding-block:64px; }
.pla-playful .mid-cta-section { padding-block:72px; }
.pla-playful .page-hero + .page-section { padding-top:40px; }
.pla-playful .hiw-steps { margin-top:1.5rem; }
.pla-playful .hiw-step { padding-block:1rem; }
.pla-playful .faq-section .section-intro { margin-bottom:32px; }
.pla-playful section > .container > :last-child { margin-bottom:0; }

/* Assessment hero: the photo becomes a framed card on the paper background, like the other page images. */
.pla-playful .hero-split { min-height:0; gap:48px; align-items:center; padding:56px max(24px,calc(50% - 537px)); background:radial-gradient(ellipse at 100% 0%,#ffdb59 0%,#ffdb59 22%,transparent 22.2%),var(--play-paper); }
.pla-playful .hero-split-image { min-height:0; aspect-ratio:1/1; background-position:center 30%; border:2px solid var(--play-ink); border-radius:32px; box-shadow:6px 6px 0 var(--play-yellow); overflow:hidden; }
.pla-playful .hero-split-image-overlay { display:none; }
.pla-playful .hero-split-content { background:transparent; padding:0; }
@media(max-width:768px) {
    .pla-playful .hero-split { gap:24px; padding:28px 20px 36px; }
    .pla-playful .hero-split-image { aspect-ratio:4/3; border-radius:24px; }
}

/* Percy the parrot appears once per page at decision points. All of these are decorative. */
.pla-playful .assessment-cta-banner .container::before { content:""; display:block; width:92px; aspect-ratio:1; margin:0 auto 6px; background:url(mascot/percy-think.webp) center/contain no-repeat; }
@media(min-width:1000px) {
    .pla-playful .assessment-cta-banner .container::before { position:absolute; left:4%; bottom:0; width:150px; margin:0; }
}
.pla-playful :is(.booking-info,.online-booking-info):not(:has(img))::after { content:""; display:block; width:130px; aspect-ratio:1; margin-top:8px; background:url(mascot/percy-point.webp) center/contain no-repeat; }
.pla-playful #inside-a-lesson .content-image { position:relative; }
.pla-playful .content-image video { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; background:var(--play-ink); }
.pla-playful #inside-a-lesson .content-image::after { content:""; position:absolute; left:-38px; top:-46px; width:120px; pointer-events:none; aspect-ratio:1; background:url(mascot/percy-read.webp) center/contain no-repeat; filter:drop-shadow(0 6px 8px #14251e33); }
.pla-playful .sidebar-cta { position:relative; padding-top:100px; }
.pla-playful .sidebar-cta::before { content:""; position:absolute; top:12px; left:18px; width:84px; aspect-ratio:1; background:url(mascot/percy-guide.webp) center/contain no-repeat; }
.pla-playful .wpcf7-form.sent .wpcf7-response-output { min-height:76px; display:flex; align-items:center; padding:12px 16px 12px 84px; background:var(--play-mint) url(mascot/percy-thumbsup.webp) 12px center/60px no-repeat; color:var(--play-ink); border:2px solid var(--play-ink) !important; border-radius:16px; }
@media(max-width:760px) {
    .pla-playful #inside-a-lesson .content-image::after { left:-8px; top:-40px; width:88px; }
    .pla-playful :is(.booking-info,.online-booking-info):not(:has(img))::after { width:100px; }
}

/* Online booking: "After you book" is a white card with numbered badges, and Percy stands on it pointing at the calendar. */
.pla-playful .online-booking-info.online-booking-info::after { display:none; }
.pla-playful .online-next-steps { position:relative; margin-top:92px; padding:24px 24px 14px; background:#fff; border:2px solid var(--play-ink); border-radius:24px; box-shadow:4px 4px 0 var(--play-ink); }
.pla-playful .online-next-steps::after { content:""; position:absolute; right:20px; top:-90px; width:104px; aspect-ratio:1; background:url(mascot/percy-point.webp) center/contain no-repeat; pointer-events:none; }
.pla-playful .online-next-title { font-family:var(--font-heading,'League Spartan',sans-serif); font-size:1.2rem; font-weight:800; color:var(--play-ink); margin-bottom:14px; }
.pla-playful .online-next-list { list-style:none; margin:0; padding:0; counter-reset:pla-next; }
.pla-playful .online-next-list li { counter-increment:pla-next; position:relative; min-height:32px; margin-bottom:12px; padding-left:46px; }
.pla-playful .online-next-list li::before { content:counter(pla-next); position:absolute; left:0; top:-1px; display:grid; place-items:center; width:32px; height:32px; background:var(--play-yellow); color:var(--play-ink); border:2px solid var(--play-ink); border-radius:10px 10px 10px 3px; font-weight:800; font-size:.9rem; line-height:1; }
.pla-playful.online-assessment-landing .booking-section-header { max-width:760px; margin:0 auto 40px; text-align:center; }
.pla-playful.online-assessment-landing .online-booking-info h3 { font-family:'League Spartan',Inter,Arial,sans-serif; }
@media(min-width:1001px) {
    .pla-playful.online-assessment-landing .online-booking-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; }
}

/* Student videos: clear thumbnails everywhere; on the gallery page one featured player with a list. */
.pla-playful .pla-video-preview img { opacity:1; object-fit:cover; }
.pla-playful .pla-video-preview span { border:2px solid var(--play-ink); box-shadow:3px 3px 0 var(--play-ink); }
.pla-playful .pla-video-feature { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:start; margin-top:2rem; }
.pla-playful .pla-video-stage { background:#fff; }
.pla-playful .pla-video-player :is(.pla-video-preview,iframe) { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; }
.pla-playful .pla-video-player .pla-video-preview { display:grid; }
.pla-playful .pla-video-caption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; padding:14px 18px; border-top:2px solid var(--play-ink); }
.pla-playful .pla-video-title { margin:0; color:var(--play-ink); font-size:1.05rem; }
.pla-playful .pla-video-youtube { color:var(--play-blue); font-weight:600; font-size:.9rem; }
.pla-playful .pla-video-list { display:grid; gap:12px; }
.pla-playful .pla-video-thumb { display:grid; grid-template-columns:118px minmax(0,1fr); gap:12px; align-items:center; padding:8px; text-align:left; cursor:pointer; background:#fff; color:var(--play-ink); border:2px solid var(--play-ink); border-radius:16px; font:inherit; transition:transform .15s,box-shadow .15s; }
.pla-playful .pla-video-thumb:is(:hover,:focus-visible) { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--play-ink); }
.pla-playful .pla-video-thumb.is-current { background:var(--play-yellow); box-shadow:3px 3px 0 var(--play-ink); }
.pla-playful .pla-video-thumb-img { display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--play-ink); }
.pla-playful .pla-video-thumb-img img { display:block; width:100%; height:100%; object-fit:cover; }
.pla-playful .pla-video-thumb-text { display:grid; gap:2px; line-height:1.3; }
.pla-playful .pla-video-thumb-text strong { font-size:1rem; }
.pla-playful .pla-video-thumb-text span { font-size:.85rem; color:#375542; }
.pla-playful .pla-video-thumb.is-current .pla-video-thumb-text span { color:var(--play-ink); }
@media(max-width:900px) {
    .pla-playful .pla-video-feature { grid-template-columns:minmax(0,1fr); gap:16px; }
    .pla-playful .pla-video-list { grid-auto-flow:column; grid-auto-columns:minmax(150px,44%); overflow-x:auto; padding:2px 4px 8px 2px; scroll-snap-type:x proximity; }
    .pla-playful .pla-video-thumb { grid-template-columns:minmax(0,1fr); align-content:start; scroll-snap-align:start; }
}

/* Gallery carousel: two full-width rows drifting in opposite directions. */
.pla-playful .pla-gallery-carousel { width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; display:grid; gap:18px; padding-block:6px 10px; }
.pla-playful .pla-gallery-row { overflow:hidden; }
.pla-playful section:has(> .container > .pla-gallery-carousel) { overflow-x:clip; }
.pla-playful .pla-gallery-track { display:flex; width:max-content; animation:pla-gallery-drift 70s linear infinite; }
.pla-playful .pla-gallery-row--reverse .pla-gallery-track { animation-direction:reverse; animation-duration:85s; }
.pla-playful .pla-gallery-carousel:is(:hover,.is-paused) .pla-gallery-track { animation-play-state:paused; }
.pla-playful .pla-gallery-track .gallery-item { flex:none; width:clamp(230px,24vw,340px); margin-right:18px; border:2px solid var(--play-ink); border-radius:20px; box-shadow:4px 4px 0 var(--play-ink); margin-bottom:5px; }
@keyframes pla-gallery-drift { to { transform:translateX(-50%); } }

/* Holiday enquiry landing page: one clear flow, with optional extra proof. */
.pla-playful .holiday-conversion-page .holiday-suitability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.pla-playful .holiday-conversion-page .holiday-highlight-card { border:2px solid var(--play-ink); background:#fff; border-radius:24px; box-shadow:3px 3px 0 var(--play-ink); }
.pla-playful .holiday-conversion-page .hhc-icon { color:var(--play-blue); font-family:var(--font-heading,sans-serif); font-weight:800; }
.pla-playful .holiday-conversion-page .course-details-card { border:2px solid var(--play-ink); box-shadow:4px 4px 0 var(--play-ink); }
.pla-playful .holiday-conversion-page .cdc-title { font-size:1.25rem; }
.pla-playful .holiday-conversion-page .holiday-hero-actions { align-items:center; }
.pla-playful .holiday-conversion-page .holiday-hero-actions .btn { min-width:0; }
.pla-playful .holiday-conversion-page .hero-reassurance { font-weight:600; }
.pla-playful .holiday-details-link { display:block; margin-top:20px; color:var(--play-blue); font-weight:700; }
.pla-playful .holiday-more-examples { margin-top:28px; }
.pla-playful .holiday-more-examples > summary { width:fit-content; margin-inline:auto; padding:12px 18px; color:var(--play-blue); font-weight:700; cursor:pointer; border:1px solid var(--play-line); border-radius:12px; background:#fff; }
.pla-playful .holiday-more-examples[open] > summary { margin-bottom:24px; }
.pla-playful .holiday-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:960px; margin:0 auto; }
.pla-playful .holiday-facts > div { padding:20px; border:1px solid var(--play-line); border-radius:16px; background:#fff; }
.pla-playful .holiday-facts dt { font-size:.85rem; font-weight:700; margin-bottom:6px; }
.pla-playful .holiday-facts dd { margin:0; font-weight:600; }
.pla-playful .holiday-details-note { max-width:760px; margin:24px auto; text-align:center; }
.pla-playful .holiday-programme-details { background:var(--play-mint); scroll-margin-top:110px; }
.pla-playful .holiday-faq-list { max-width:800px; margin:24px auto 0; }
.pla-playful .holiday-faq-list details { border-bottom:1px solid var(--play-line); padding:18px 0; }
.pla-playful .holiday-faq-list summary { cursor:pointer; font-weight:700; }
.pla-playful .holiday-faq-list p { margin:12px 0 0; }
.pla-playful .holiday-conversion-page #sign-up-form { scroll-margin-top:110px; }
@media(max-width:760px) {
    .pla-playful .holiday-conversion-page .holiday-suitability-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    .pla-playful .holiday-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .pla-playful .holiday-facts > div { padding:16px; }
    .pla-playful .holiday-conversion-page .holiday-hero-actions { flex-direction:column; align-items:stretch; }
}
@media(max-width:380px) { .pla-playful .holiday-facts { grid-template-columns:minmax(0,1fr); } }

/* Quiet accents, not a wallpaper: selected learning sections only. Forms, FAQ,
   payment and policy content deliberately keep their existing plain surfaces. */
.pla-playful :is(.hp-subjects,.hp-shared-teaching,.holiday-videos-section,.pla-reading-start,#levels,#online-feedback,#topics,#maths-feedback,.locations-section) :is(.section-title,.hp-section-title,.section-header > h2)::after {
    content:""; display:block; width:76px; height:7px; margin:14px auto 0;
    background:var(--play-yellow); border-radius:65% 25% 55% 30%; transform:rotate(-2deg);
    pointer-events:none;
}
.pla-playful :is(.hp-shared-teaching,.holiday-videos-section) .holiday-video-wrap {
    border-width:1.5px; box-shadow:3px 3px 0 #14251e99;
}
/* Doodles sit outside the content column and disappear before the margins shrink.
   Empty pseudo-elements are decorative, static and never intercept clicks. */
@media(min-width:1440px) {
    .pla-playful :is(.hp-shared-teaching,.holiday-videos-section,.pla-reading-start,#online-feedback,#topics) { position:relative; }
    .pla-playful :is(.hp-shared-teaching,.holiday-videos-section,.pla-reading-start,#online-feedback,#topics)::before,
    .pla-playful :is(.hp-shared-teaching,.holiday-videos-section,.pla-reading-start,#online-feedback,#topics)::after {
        content:""; position:absolute; top:64px; left:max(16px,calc(50% - 690px));
        width:64px; height:96px; background:url(doodles/learning.svg) center/contain no-repeat;
        opacity:.22; pointer-events:none;
    }
    .pla-playful :is(.hp-shared-teaching,.holiday-videos-section,.pla-reading-start,#online-feedback,#topics)::after {
        left:auto; right:max(16px,calc(50% - 690px)); top:auto; bottom:60px;
        transform:rotate(12deg);
    }
    .pla-playful #topics::before,.pla-playful #topics::after { background-image:url(doodles/numbers.svg); }
}

@media(max-width:900px) {
    .pla-playful.home .hp-hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:24px; }
    .pla-playful.home .hp-hero-ctas .btn { min-width:0; padding:14px 18px; }
}
@media(max-width:760px) {
    .pla-playful.home .hp-hero { padding:36px 0 44px; }
    .pla-playful.home .hp-hero-inner { grid-template-columns:minmax(0,1fr); gap:30px; }
    .pla-playful.home .hp-hero-content { padding:0; text-align:left; }
    .pla-playful.home .hp-hero-title { font-size:clamp(2.5rem,10.5vw,3.7rem); }
    .pla-playful.home .hp-hero-trust { align-items:flex-start; }
    .pla-playful.home .hp-hero-mascot { display:flex; position:relative; min-height:320px; padding:85px 10px 30px; max-width:360px; justify-content:center; margin:auto; }
    .pla-playful.home .hp-hero-mascot .hp-mascot-img { width:230px; max-width:230px; }
    .pla-playful.home .hp-hero-mascot .hp-learning-symbols { position:absolute; inset:0 5% auto; margin:0; width:90%; height:85px; }
    .pla-playful.home .hp-hero-mascot .hp-hero-float-badge { position:absolute; right:0; bottom:0; padding:16px; font-size:1rem; }
    .pla-playful :is(.page-hero,.holiday-hero) { padding-block:36px 32px; }
    .pla-playful .page-section,
    .pla-playful :is(.faq-section,.how-it-works,.outcomes-section,.why-pla-section,.assessment-testimonials,.pain-points).page-section,
    .pla-playful :is(.faq-section,.how-it-works,.outcomes-section,.why-pla-section,.assessment-testimonials,.pain-points,.booking-form-section,.final-cta-section,.content-section,.mid-cta-section) { padding-block:44px; }
    .pla-playful .page-hero + .page-section { padding-top:28px; }
    .pla-playful .holiday-hero-text { text-align:center; }
    .pla-playful .holiday-hero-text .hero-eyebrow { margin-inline:auto; }
    .pla-playful .holiday-hero-actions { justify-content:center; }
    .pla-playful :is(.hp-subject-card,.step-card,.pla-guide-card,.hp-testi-card) { box-shadow:3px 3px 0 var(--play-ink); }
    .pla-playful .pla-gallery-carousel { gap:12px; }
    .pla-playful .pla-gallery-track .gallery-item { width:62vw; margin-right:12px; box-shadow:3px 3px 0 var(--play-ink); }
}
@media(prefers-reduced-motion:reduce) {
    .pla-playful .pla-gallery-row { overflow-x:auto; scroll-snap-type:x proximity; }
    .pla-playful .pla-gallery-track .gallery-item { scroll-snap-align:start; }
    .pla-playful .pla-gallery-track [aria-hidden=true] { display:none; }
    .pla-playful *, .pla-playful *::before, .pla-playful *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Refinement pass: three emphasis levels. Quiet content cards, framed programme
   choices, and bold primary actions. Keep the playful palette without boxing
   every label or making every surface compete with the booking action. */
.pla-playful .holiday-format-intro { font-weight:700; margin:16px 0 24px; }
.pla-playful .holiday-format-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:960px; margin:24px auto 0; }
.pla-playful .holiday-format-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px; border:1px solid #aec1b4; border-radius:20px; background:var(--play-mint); }
.pla-playful .holiday-format-card:nth-child(2) { background:var(--play-sky); }
.pla-playful .holiday-format-card h3 { margin:0 0 12px; }
.pla-playful .holiday-format-card p { margin:0 0 16px; }
.pla-playful .holiday-format-card .btn { margin-top:auto; max-width:100%; white-space:normal; }
@media(max-width:760px) { .pla-playful .holiday-format-grid { grid-template-columns:minmax(0,1fr); gap:16px; } .pla-playful .holiday-format-card { padding:24px; } }
.pla-playful.pla-playful :is(.page-hero-title,.holiday-hero h1,.hero-split h1,.section-title,.hp-section-title,.section-header h2,.program-card h3,.hp-program-card h3) {
    text-transform:none; letter-spacing:-.025em; text-wrap:balance;
}
.pla-playful.pla-playful .page-hero-title { font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.12; }
.pla-playful.pla-playful .holiday-hero-text .page-hero-title { font-size:clamp(2rem,3.6vw,3.15rem); line-height:1.14; }
.pla-playful.pla-playful :is(.section-title,.hp-section-title,.section-header h2) { line-height:1.2; }
.pla-playful.pla-playful :is(.section-eyebrow,.hp-section-eyebrow) {
    background:transparent; border:0; border-radius:0; padding:0;
    color:#375542; letter-spacing:.085em; font-size:.78rem; line-height:1.5;
}
.pla-playful.pla-playful :is(.hero-eyebrow,.ol-eyebrow,.banner-badge,.hero-split-badge) { max-width:100%; text-wrap:balance; }

.pla-playful.pla-playful :is(.program-card,.hp-program-card,.step-card,.hp-why-card,.hp-testi-card,.testi-card,.blog-card,.hp-blog-card,.pla-guide-card,.pla-price-card,.contact-quick-card,.location-card,.why-pla-card,.holiday-highlight-card,.holiday-testimonial-card,.course-details-card,.holiday-form-wrap,.hp-booking-form-wrap,.booking-form-wrapper,.contact-form-card,.online-next-steps) {
    border:1px solid #aec1b4; border-radius:20px; box-shadow:0 3px 12px #14251e0a;
}
.pla-playful.pla-playful :is(.pla-reading-start-grid,.pla-online-feedback-grid,.pla-progress-grid,.pla-guide-grid) > article,
.pla-playful.pla-playful .pla-skill-path li {
    border:1px solid #aec1b4; border-radius:20px; box-shadow:0 3px 12px #14251e0a;
}
/* The subject choices retain a little brand character; ordinary cards do not. */
.pla-playful.pla-playful :is(.hp-subject-card,.hp-next-grid article) {
    border:1.5px solid var(--play-ink); border-radius:24px; box-shadow:3px 3px 0 #14251e66;
}
.pla-playful.pla-playful .hp-subject-card > img { border-bottom:1px solid #aec1b4; }
.pla-playful.pla-playful .hp-testi-card--featured { background:var(--play-sky); }
.pla-playful.pla-playful :is(.content-image img,.content-image video,.pain-image img,.hp-approach-image img,.hero-split-image) {
    border-width:1px; box-shadow:4px 4px 0 #ffcf3280;
}
.pla-playful.pla-playful :is(.holiday-video-wrap,.calendly-wrapper) {
    border:1px solid #aec1b4; border-radius:20px; box-shadow:0 3px 12px #14251e0a;
}
.pla-playful.pla-playful .pla-gallery-track .gallery-item { border:1px solid #aec1b4; box-shadow:0 3px 12px #14251e0a; }
.pla-playful.pla-playful :is(.step-number,.step-icon) { border-width:1px; box-shadow:none; }
.pla-playful.pla-playful :is(.holiday-highlight-card,.program-card,.hp-program-card,.blog-card):hover { box-shadow:0 5px 16px #14251e12; transform:translateY(-2px); }
.pla-playful.pla-playful :is(.btn-outline,.btn-secondary,.hp-btn-hero-outline) { box-shadow:none; }
.pla-playful.pla-playful :is(.page-hero,.holiday-hero) .btn-accent { background:var(--play-blue); border-color:var(--play-blue); color:#fff !important; }
.pla-playful.pla-playful :is(.page-hero,.holiday-hero) .btn-accent:is(:hover,:focus-visible) { background:var(--play-blue-dark); color:#fff !important; }
.pla-playful.pla-playful :is(.page-hero-subtitle,.holiday-hero-sub) { line-height:1.65; }
.pla-playful.pla-playful .page-hero:not(.holiday-hero) .page-hero-content { max-width:880px; margin-inline:auto; }
.pla-playful.pla-playful .section-header { margin-bottom:32px; }
.pla-playful.pla-playful :is(.holiday-help-grid,.holiday-testimonials-grid,.holiday-highlights-grid) { margin-top:28px; }
.pla-playful.pla-playful .holiday-conversion-page .holiday-testimonials-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pla-playful.pla-playful .holiday-help-card { background:var(--play-mint); border:1px solid #aec1b4; border-radius:20px; }
.pla-playful.pla-playful .hhelpcard-num { color:#14251e; opacity:.12; }
@media(max-width:760px) {
    .pla-playful.pla-playful .page-hero-title { font-size:clamp(2rem,7.7vw,2.7rem); }
    .pla-playful.pla-playful .holiday-hero-text .page-hero-title { font-size:clamp(2rem,7.5vw,2.5rem); }
    .pla-playful.pla-playful .section-header { margin-bottom:24px; }
    .pla-playful.pla-playful .holiday-conversion-page .holiday-testimonials-grid { grid-template-columns:minmax(0,1fr); }
}