/* =========================================================
   WISDOM WAREHOUSE — SITE REDESIGN
   static/assets/css/ww.css   (load LAST in base.html)

   Idea: the school is a warehouse full of rooms.
   Thick black outlines + soft sage/orange come from the
   dashboard; doors, folder tabs and an admission ticket come
   from the place itself. Headlines in Bricolage Grotesque,
   reading text in Inter.

   1. Tokens          5. Footer
   2. Base + type     6. Home: hero + doors
   3. Pieces          7. Home: story tabs
   4. Header          8. Home: fit band, visit ticket
========================================================= */


/* =========================================================
   1. TOKENS
========================================================= */

:root {
    --ww-black: #000000;
    --ww-text: #222222;
    --ww-muted: #555555;
    --ww-white: #ffffff;

    --ww-sage: #9cc9ab;
    --ww-sage-tint: #e6f2ea;

    --ww-orange: #feb06c;
    --ww-orange-tint: #fff1e2;

    --ww-pink: #e4a5f9;
    --ww-pink-tint: #fbf2fe;

    --ww-line: 3px solid var(--ww-black);
    --ww-line-thin: 2px solid var(--ww-black);

    --ww-r-lg: 32px;
    --ww-r-md: 20px;
    --ww-r-sm: 14px;

    --ww-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --ww-body: "Inter", system-ui, sans-serif;

    --ww-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   2. BASE + TYPE
========================================================= */

.ww-page {
    background: var(--ww-white);

    color: var(--ww-text);

    font-family: var(--ww-body);
}


.ww-container {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 0 24px;
}


.ww-section {
    padding: 72px 0;

    overflow-x: clip;
}


.ww-display,
.ww-h2,
.ww-h3 {
    margin: 0;

    font-family: var(--ww-display);

    font-weight: 800;

    letter-spacing: -0.035em;

    color: var(--ww-black);
}


.ww-h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.8rem);

    line-height: 1;
}


.ww-h3 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);

    line-height: 1.05;
}


.ww-lead {
    max-width: 34em;

    margin: 0;

    font-size: clamp(1.05rem, 1.3vw, 1.2rem);

    line-height: 1.6;

    color: var(--ww-text);
}


.ww-text {
    max-width: 38em;

    margin: 0;

    font-size: 17px;

    line-height: 1.7;

    color: var(--ww-text);
}


.ww-text + .ww-text {
    margin-top: 14px;
}


/* =========================================================
   3. PIECES
========================================================= */

/* Small line above a heading (e.g. "Let's Get Wise") */

.ww-kicker {
    margin: 0 0 12px;

    font-family: var(--ww-display);

    font-size: 20px;

    font-weight: 700;

    letter-spacing: -0.01em;

    color: var(--ww-black);
}


/* ---------- Buttons ---------- */

.ww-btn {
    box-sizing: border-box;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 14px 28px;

    border: var(--ww-line);
    border-radius: 999px;

    font-family: var(--ww-body);

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 180ms var(--ww-ease),
        box-shadow 180ms var(--ww-ease);
}


.ww-btn-black {
    background: var(--ww-black);

    color: var(--ww-white);
}


.ww-btn-black:hover {
    color: var(--ww-white);
}


.ww-btn-white {
    background: var(--ww-white);

    color: var(--ww-black);
}


.ww-btn-white:hover {
    color: var(--ww-black);
}


/* Press-down feel: a hard shadow that the button sits on */

@media (hover: hover) and (pointer: fine) {

    .ww-btn:hover {
        transform: translate(-2px, -2px);

        box-shadow: 4px 4px 0 var(--ww-black);
    }


    .ww-btn-black:hover {
        box-shadow: 4px 4px 0 var(--ww-orange);
    }

}


.ww-btn:active {
    transform: none;

    box-shadow: none;
}


:where(.ww-btn, .ww-door, .ww-tab, .ww-arrow, .ww-nav-link):focus-visible {
    outline: 3px solid var(--ww-orange);

    outline-offset: 3px;
}


.ww-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


/* ---------- Square arrow (from the dashboard) ---------- */

.ww-arrow {
    flex: 0 0 auto;

    display: inline-grid;

    place-items: center;

    width: 52px;
    height: 52px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);

    color: var(--ww-black);
}


.ww-arrow svg {
    width: 20px;
    height: 20px;
}


/* =========================================================
   4. HEADER
========================================================= */

.ww-header {
    position: sticky;

    top: 0;

    z-index: 1030;

    border-bottom: var(--ww-line);

    background: var(--ww-white);
}


.ww-header-bar {
    display: flex;

    align-items: center;

    gap: 28px;

    min-height: 84px;
}


.ww-logo img {
    display: block;

    width: auto;
    height: 60px;
}


.ww-nav {
    flex: 1 1 auto;
}


.ww-nav-list {
    display: flex;

    justify-content: center;

    gap: 4px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* Active page: a sage pill behind the word */

.ww-nav-link {
    display: inline-block;

    padding: 9px 14px;

    border-radius: 999px;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    color: var(--ww-black);

    transition: background-color 180ms ease;
}


.ww-nav-link:hover {
    background: var(--ww-sage-tint);

    color: var(--ww-black);
}


.ww-nav-link.is-active {
    background: var(--ww-sage);
}


.ww-header-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


.ww-header-actions .ww-btn {
    min-height: 46px;

    padding: 10px 20px;

    border-width: 2px;

    font-size: 15px;
}


.ww-menu-toggle {
    display: none;

    place-items: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);

    cursor: pointer;
}


.ww-menu-toggle span,
.ww-menu-toggle span::before,
.ww-menu-toggle span::after {
    display: block;

    width: 20px;
    height: 2px;

    background: var(--ww-black);
}


.ww-menu-toggle span {
    position: relative;
}


.ww-menu-toggle span::before,
.ww-menu-toggle span::after {
    content: "";

    position: absolute;

    left: 0;
}


.ww-menu-toggle span::before { top: -6px; }
.ww-menu-toggle span::after  { top:  6px; }


.ww-mobile-menu {
    display: none;

    padding: 4px 0 22px;
}


.ww-mobile-menu.is-open {
    display: block;
}


.ww-mobile-list {
    display: grid;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-mobile-list a {
    display: block;

    padding: 15px 20px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-md);

    font-size: 17px;

    font-weight: 600;

    text-decoration: none;

    color: var(--ww-black);
}


.ww-mobile-list a.is-active {
    background: var(--ww-sage);
}


/* =========================================================
   5. FOOTER
========================================================= */

.ww-footer {
    margin-top: 48px;

    border-top: var(--ww-line);

    background: var(--ww-white);
}


/* Big sage block with the invitation */

.ww-footer-invite {
    border-bottom: var(--ww-line);

    background: var(--ww-sage);
}


.ww-footer-invite .ww-container {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 28px;

    padding-top: 64px;
    padding-bottom: 64px;
}


.ww-footer-invite .ww-h2 {
    max-width: 12em;
}


.ww-footer-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.3fr);

    gap: 40px;

    padding: 56px 0 40px;
}


.ww-footer-logo img {
    display: block;

    width: auto;
    height: 84px;
}


.ww-footer-blurb {
    max-width: 24em;

    margin: 18px 0 20px;

    font-size: 16px;

    line-height: 1.7;
}


.ww-footer-heading {
    margin: 0 0 14px;

    font-family: var(--ww-display);

    font-size: 19px;

    font-weight: 700;

    letter-spacing: -0.01em;

    color: var(--ww-black);
}


.ww-footer-list {
    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-footer-list a,
.ww-footer-list span {
    font-size: 16px;

    line-height: 1.5;

    text-decoration: none;

    color: var(--ww-text);

    /* long email address wraps instead of widening the page */
    overflow-wrap: anywhere;
}


.ww-footer-list a:hover {
    color: var(--ww-black);

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


.ww-footer-bottom {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 12px 24px;

    padding: 20px 0 28px;

    border-top: var(--ww-line-thin);

    font-size: 14px;
}


.ww-footer-bottom a {
    margin-left: 20px;

    text-decoration: none;

    color: var(--ww-text);
}


.ww-footer-bottom a:hover {
    text-decoration: underline;
}


/* =========================================================
   6. HOME — HERO + DOORS
========================================================= */

.ww-hero {
    padding: 64px 0 80px;

    text-align: center;
}


/* Collision headline keeps its animation; new letters */

.ww-hero .wisdom-home-title {
    font-family: var(--ww-display);

    font-size: clamp(2.8rem, 7.4vw, 6.6rem);

    font-weight: 800;

    line-height: 0.95;

    color: var(--ww-black);
}


.ww-hero .wisdom-title-line-accent {
    color: var(--ww-black);
}


.ww-hero .wisdom-title-underline {
    height: 14px;

    background: var(--ww-orange);
}


.ww-hero .ww-lead {
    margin: 30px auto 0;
}


.ww-hero .ww-actions {
    justify-content: center;

    margin-top: 32px;
}


/* ---------- The doors ---------- */

.ww-doors-title {
    margin-top: 88px;

    text-align: center;
}


.ww-doors {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 36px;

    text-align: left;
}


/* Frame = the doorway; what you see "inside" when it opens */

.ww-door {
    position: relative;

    display: block;

    height: 420px;

    border: var(--ww-line);
    border-radius: 999px 999px var(--ww-r-md) var(--ww-r-md);

    background: var(--ww-black);

    text-decoration: none;

    color: var(--ww-black);

    perspective: 1200px;

    /* doors rise in once, right after the headline lands */
    opacity: 0;

    transform: translateY(30px);

    animation: wwDoorIn 700ms var(--ww-ease) forwards;
}


.ww-door:nth-child(1) { animation-delay: 1350ms; }
.ww-door:nth-child(2) { animation-delay: 1450ms; }
.ww-door:nth-child(3) { animation-delay: 1550ms; }
.ww-door:nth-child(4) { animation-delay: 1650ms; }


@keyframes wwDoorIn {
    to {
        opacity: 1;
        transform: none;
    }
}


/* What's behind the door */

.ww-door-inside {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: inherit;
}


.ww-door-inside img {
    position: absolute;

    right: -10%;
    bottom: 0;

    width: 90%;
    height: auto;

    object-fit: contain;
}


/* The panel that swings */

.ww-door-panel {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    padding: 92px 26px 26px;

    border-radius: inherit;

    transform-origin: left center;

    transition: transform 600ms var(--ww-ease);
}


.ww-door.is-sage   .ww-door-panel { background: linear-gradient(180deg, var(--ww-sage) 0%, var(--ww-sage-tint) 100%); }
.ww-door.is-orange .ww-door-panel { background: linear-gradient(180deg, var(--ww-orange) 0%, var(--ww-orange-tint) 100%); }
.ww-door.is-white  .ww-door-panel { background: var(--ww-white); }
.ww-door.is-pink   .ww-door-panel { background: linear-gradient(180deg, var(--ww-pink) 0%, var(--ww-pink-tint) 100%); }


.ww-door.is-black .ww-door-panel {
    background: var(--ww-black);

    color: var(--ww-white);
}


.ww-door.is-black .ww-door-title,
.ww-door.is-black .ww-door-text {
    color: var(--ww-white);
}


.ww-door.is-black {
    border-color: var(--ww-black);

    background: var(--ww-sage);
}


/* Door knob */

.ww-door-panel::after {
    content: "";

    position: absolute;

    right: 18px;
    top: 56%;

    width: 16px;
    height: 16px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);
}


.ww-door.is-black .ww-door-panel::after {
    border-color: var(--ww-white);

    background: var(--ww-orange);
}


.ww-door-who {
    margin: 0 0 10px;

    font-size: 15px;

    font-weight: 600;

    color: inherit;
}


.ww-door-title {
    margin: 0;

    font-family: var(--ww-display);

    font-size: clamp(1.8rem, 2.4vw, 2.3rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.035em;

    color: var(--ww-black);
}


.ww-door-text {
    margin: 14px 0 0;

    padding-right: 18px;

    font-size: 16px;

    line-height: 1.55;

    color: var(--ww-text);
}


.ww-door .ww-arrow {
    margin-top: auto;
}


@media (hover: hover) and (pointer: fine) {

    .ww-door:hover .ww-door-panel {
        transform: rotateY(-28deg);
    }

}


.ww-door:focus-visible .ww-door-panel {
    transform: rotateY(-28deg);
}


/* =========================================================
   7. HOME — STORY TABS (folder tabs)
========================================================= */

.ww-story-head {
    margin-bottom: 28px;
}


.ww-tabs {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 6px;

    margin-bottom: -3px;

    padding-left: 28px;

    /* never a scroll area (stops a stray scrollbar showing) */
    overflow: visible;
}


.ww-tab {
    position: relative;

    flex: 0 0 auto;

    padding: 14px 24px 16px;

    border: var(--ww-line);
    border-bottom: 0;
    border-radius: var(--ww-r-md) var(--ww-r-md) 0 0;

    background: var(--ww-sage-tint);

    font-family: var(--ww-body);

    font-size: 16px;

    font-weight: 600;

    color: var(--ww-black);

    cursor: pointer;
}


/* Selected tab joins the folder (covers its top line) */
.ww-tab[aria-selected="true"] {
    padding-bottom: 19px;

    background: var(--ww-white);

    box-shadow: 0 3px 0 var(--ww-white);
}


.ww-folder {
    position: relative;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-panel {
    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

    gap: 40px;

    align-items: center;

    padding: 48px;
}


.ww-panel[hidden] {
    display: none;
}


.ww-panel .ww-h2 {
    margin-bottom: 20px;

    font-size: clamp(1.9rem, 3.4vw, 3rem);
}


/* Photo sits on a soft color shape */

.ww-panel-photo {
    position: relative;

    display: grid;

    place-items: center;

    min-height: 320px;

    border-radius: var(--ww-r-lg);

    background: var(--ww-orange-tint);
}


.ww-panel:nth-child(odd) .ww-panel-photo {
    background: var(--ww-sage-tint);
}


.ww-panel-photo img {
    display: block;

    width: 82%;
    max-height: 340px;

    object-fit: contain;
}


/* =========================================================
   8. HOME — FIT BAND + VISIT TICKET
========================================================= */

/* ---------- Fit: full-width sage band ---------- */

.ww-band {
    border-top: var(--ww-line);
    border-bottom: var(--ww-line);

    background: var(--ww-sage);
}


.ww-fit {
    display: grid;

    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    gap: 56px;

    align-items: start;
}


.ww-fit-intro .ww-h2 {
    margin-bottom: 20px;
}


.ww-fit-list-title {
    margin: 0 0 14px;

    font-size: 17px;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-fit-list {
    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-fit-list li {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 18px 22px;

    border: var(--ww-line);
    border-radius: var(--ww-r-md);

    background: var(--ww-white);

    font-size: 17px;

    line-height: 1.45;

    color: var(--ww-black);
}


/* Round check mark */

.ww-fit-list li::before {
    content: "";

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        var(--ww-orange)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 18px no-repeat;
}


/* ---------- Visit: map + admission ticket ---------- */

.ww-visit {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 24px;

    align-items: stretch;
}


.ww-map {
    position: relative;

    min-height: 460px;

    overflow: hidden;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);
}


.ww-map iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* Ticket: orange card with two punched notches */

.ww-ticket {
    position: relative;

    /* keeps the punched notches from poking past the screen edge */
    overflow: hidden;

    display: flex;

    flex-direction: column;

    gap: 22px;

    padding: 40px 44px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-orange);
}


.ww-ticket::before,
.ww-ticket::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 40px;
    height: 40px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);

    transform: translateY(-50%);
}


.ww-ticket::before { left: -23px;  clip-path: inset(0 0 0 50%); }
.ww-ticket::after  { right: -23px; clip-path: inset(0 50% 0 0); }


.ww-ticket-rows {
    display: grid;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

    font-size: 17px;

    line-height: 1.5;

    color: var(--ww-black);
}


.ww-ticket-rows a {
    color: var(--ww-black);

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;

    overflow-wrap: break-word;
}


.ww-ticket-label {
    margin: 0 0 10px;

    font-family: var(--ww-display);

    font-size: 20px;

    font-weight: 700;

    color: var(--ww-black);
}


/* Perforated line splitting the ticket */

.ww-ticket-cut {
    border-top: 3px dashed var(--ww-black);
}


.ww-hours {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 8px 20px;

    margin: 0;

    font-size: 17px;

    color: var(--ww-black);
}


.ww-hours dt {
    font-weight: 400;
}


.ww-hours dd {
    margin: 0;

    font-weight: 600;

    text-align: right;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {

    .ww-nav,
    .ww-header-actions .ww-btn-white {
        display: none;
    }


    .ww-menu-toggle {
        display: inline-grid;
    }


    .ww-header-actions {
        margin-left: auto;
    }


    .ww-doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .ww-door {
        height: 380px;
    }


    .ww-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .ww-footer-brand {
        grid-column: 1 / -1;
    }

}


@media (max-width: 991.98px) {

    .ww-panel,
    .ww-fit,
    .ww-visit {
        grid-template-columns: 1fr;
    }


    .ww-panel {
        padding: 32px;
    }


    .ww-map {
        min-height: 320px;
    }

}


@media (max-width: 767.98px) {

    .ww-section {
        padding: 48px 0;
    }


    .ww-container {
        padding: 0 16px;
    }


    .ww-hero {
        padding: 40px 0 56px;
    }


    .ww-doors {
        gap: 12px;

        margin-top: 28px;
    }


    .ww-doors-title {
        margin-top: 56px;
    }


    .ww-door {
        height: 300px;
    }


    .ww-door-panel {
        padding: 66px 16px 16px;
    }


    .ww-door-text {
        display: none;
    }


    .ww-door-title {
        font-size: 1.45rem;
    }


    .ww-door .ww-arrow {
        width: 44px;
        height: 44px;
    }


    .ww-tabs {
        gap: 4px;

        padding: 0 8px;
    }


    /* Three equal tabs that always fit the screen */
    .ww-tab {
        flex: 1 1 0;

        min-width: 0;

        padding: 11px 6px 13px;

        font-size: 13.5px;

        line-height: 1.2;

        text-align: center;
    }


    .ww-panel {
        padding: 24px 20px;
    }


    .ww-panel-photo {
        min-height: 220px;
    }


    .ww-ticket {
        padding: 30px 26px;
    }


    .ww-header-bar {
        min-height: 72px;
    }


    .ww-logo img {
        height: 50px;
    }


    .ww-footer-invite .ww-container {
        padding-top: 44px;
        padding-bottom: 44px;
    }


    .ww-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 28px;
    }


    .ww-footer-bottom a {
        margin: 0 20px 0 0;
    }

}


@media (max-width: 575.98px) {

    .ww-actions {
        flex-direction: column;

        width: 100%;
    }


    .ww-actions .ww-btn {
        width: 100%;
    }


    .ww-fit-list li {
        padding: 14px 16px;

        font-size: 16px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .ww-door {
        opacity: 1;

        transform: none;

        animation: none;
    }


    .ww-door-panel,
    .ww-btn {
        transition: none;
    }


    .ww-door:hover .ww-door-panel,
    .ww-door:focus-visible .ww-door-panel {
        transform: none;
    }

}


/* =========================================================
   9. SCHOOLING PAGE
   Doorway photo, hanging price tags, Step Up stamp,
   school-day timeline, afternoon options, apply panel.
========================================================= */

/* ---------- Shared bits used here ---------- */

.ww-head-center {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    margin-bottom: 40px;

    text-align: center;
}


.ww-head-center .ww-lead {
    margin: 0 auto;
}


.ww-band.is-pink {
    background: var(--ww-pink);
}


.ww-band.is-orange {
    background: var(--ww-orange);
}


.ww-btn-orange {
    background: var(--ww-orange);

    color: var(--ww-black);
}


.ww-btn-orange:hover {
    color: var(--ww-black);
}


@media (hover: hover) and (pointer: fine) {

    .ww-btn-orange:hover {
        box-shadow: 4px 4px 0 var(--ww-white);
    }

}


/* ---------- Hero ---------- */

.ww-sch-hero {
    padding-top: 56px;
}


.ww-sch-hero-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: 56px;

    align-items: center;
}


.ww-sch-title {
    margin-bottom: 26px;

    font-size: clamp(2.5rem, 5vw, 4.4rem);

    line-height: 0.98;
}


.ww-sch-hero .ww-actions {
    margin-top: 32px;
}


/* Photo inside an arched doorway (same shape as the Home doors) */

.ww-doorway {
    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border: var(--ww-line);
    border-radius: 999px 999px var(--ww-r-md) var(--ww-r-md);

    background: var(--ww-sage-tint);
}


.ww-doorway img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ww-doorway.is-on-dark {
    border-color: var(--ww-white);
}


/* ---------- Full-time / part-time splits ---------- */

.ww-sch-split {
    display: grid;

    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 64px;

    align-items: start;
}


.ww-sch-side .ww-h2 {
    margin-bottom: 20px;

    font-size: clamp(2rem, 3.4vw, 3rem);
}


.ww-sch-copy .ww-text + .ww-text {
    margin-top: 18px;
}


.ww-sch-blocks {
    display: grid;

    gap: 18px;
}


.ww-sch-block {
    padding: 30px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-sch-block .ww-h3 {
    margin-bottom: 12px;
}


/* ---------- Hanging price tags ---------- */

.ww-tags-title {
    margin: 32px 0 0;

    font-family: var(--ww-display);

    font-size: 20px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 24px 28px;

    margin-top: 40px;
}


.ww-tags-title + .ww-tags {
    margin-top: 34px;
}


.ww-pricetag {
    position: relative;

    display: inline-flex;

    flex-direction: column;

    gap: 2px;

    min-width: 200px;

    padding: 26px 28px 22px 52px;

    border: var(--ww-line);
    border-radius: 12px 22px 22px 12px;

    background: var(--ww-white);

    color: var(--ww-black);

    rotate: -3deg;

    transform-origin: 26px 50%;
}


.ww-pricetag.is-sage {
    background: var(--ww-sage);
}


.ww-pricetag.is-tilt {
    rotate: 3deg;
}


/* Punched hole */

.ww-pricetag::before {
    content: "";

    position: absolute;

    left: 18px;
    top: 50%;

    width: 16px;
    height: 16px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);

    transform: translateY(-50%);
}


/* String: runs up and out of the punched hole */

.ww-pricetag::after {
    content: "";

    position: absolute;

    left: 25px;
    top: calc(50% - 56px);

    width: 2px;
    height: 56px;

    background: var(--ww-black);

    transform: rotate(-28deg);
    transform-origin: bottom center;
}


.ww-pricetag-name {
    font-size: 15px;

    font-weight: 600;
}


.ww-pricetag-price {
    font-family: var(--ww-display);

    font-size: 46px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.03em;
}


.ww-pricetag-per,
.ww-pricetag-note {
    font-size: 14px;
}


.ww-pricetag-note {
    margin-top: 6px;

    padding-top: 8px;

    border-top: 2px dashed var(--ww-black);

    font-weight: 600;
}


/* ---------- Step Up stamp ---------- */

.ww-stepup {
    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: 32px;

    align-items: center;

    padding: 32px 40px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-sage-tint);
}


.ww-stepup .ww-h3 {
    margin-bottom: 10px;

    font-size: clamp(1.3rem, 2vw, 1.7rem);
}


.ww-stamp {
    position: relative;

    display: grid;

    place-items: center;

    width: 128px;
    height: 128px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);

    rotate: -10deg;
}


.ww-stamp svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.ww-stamp text {
    font-family: var(--ww-body);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    fill: var(--ww-black);
}


.ww-stamp-check {
    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: var(--ww-orange);

    font-size: 24px;

    font-weight: 800;

    color: var(--ww-black);
}


/* ---------- School-day timeline ---------- */

.ww-day {
    max-width: 980px;

    margin: 0 auto;
}


.ww-day-track {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    height: 72px;

    overflow: hidden;

    border: var(--ww-line);
    border-radius: 999px;
}


.ww-day-seg {
    display: grid;

    place-items: center;

    padding: 0 8px;

    font-size: 16px;

    font-weight: 600;

    text-align: center;

    color: var(--ww-black);
}


.ww-day-seg.is-core {
    grid-column: span 4;

    background: var(--ww-sage);
}


/* one extended block from 2:30 to 4:30 (the 3:30 label stays below) */
.ww-day-seg.is-ext {
    grid-column: span 2;

    border-left: var(--ww-line);

    background: var(--ww-orange);
}


.ww-day-seg.is-ext2 {
    border-left: 3px dashed var(--ww-black);

    background:
        repeating-linear-gradient(
            -45deg,
            var(--ww-orange-tint) 0 10px,
            var(--ww-white) 10px 20px
        );
}


/* Hour labels sit exactly under each hour line */

.ww-day-ticks {
    position: relative;

    height: 34px;

    margin-top: 10px;
}


.ww-day-ticks span {
    position: absolute;

    top: 0;

    font-size: 14px;

    font-weight: 600;

    color: var(--ww-black);

    transform: translateX(-50%);
}


.ww-day-ticks span:nth-child(1) { left: 0;          transform: none; }
.ww-day-ticks span:nth-child(2) { left: 16.666%; }
.ww-day-ticks span:nth-child(3) { left: 33.333%; }
.ww-day-ticks span:nth-child(4) { left: 50%; }
.ww-day-ticks span:nth-child(5) { left: 66.666%; }
.ww-day-ticks span:nth-child(6) { left: 83.333%; }
.ww-day-ticks span:nth-child(7) { left: auto; right: 0; transform: none; }


.ww-sch-mix {
    max-width: 34em;

    margin: 26px auto 36px;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.6;

    text-align: center;

    color: var(--ww-black);
}


/* ---------- Afternoon options ---------- */

.ww-options {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    max-width: 980px;

    margin: 0 auto;
}


.ww-option {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    min-height: 170px;

    padding: 28px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);

    text-decoration: none;

    color: var(--ww-black);

    transition:
        transform 200ms var(--ww-ease),
        box-shadow 200ms var(--ww-ease);
}


.ww-option.is-sage   { background: var(--ww-sage); }
.ww-option.is-orange { background: var(--ww-orange); }
.ww-option.is-pink   { background: var(--ww-pink); }


.ww-option:hover {
    color: var(--ww-black);
}


.ww-option:focus-visible {
    outline: 3px solid var(--ww-orange);

    outline-offset: 3px;
}


@media (hover: hover) and (pointer: fine) {

    .ww-option:hover {
        transform: translate(-3px, -3px);

        box-shadow: 6px 6px 0 var(--ww-black);
    }

}


/* ---------- Apply panel ---------- */

.ww-apply {
    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: 56px;

    align-items: center;

    padding: 56px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-black);

    color: var(--ww-white);
}


.ww-apply .ww-h2,
.ww-apply .ww-lead {
    color: var(--ww-white);
}


.ww-apply .ww-h2 {
    margin-bottom: 18px;
}


.ww-apply-sub {
    margin: 16px 0 0;

    font-size: 17px;

    font-weight: 600;

    color: var(--ww-orange);
}


.ww-apply-points {
    display: grid;

    gap: 12px;

    margin: 26px 0 32px;

    padding: 0;

    list-style: none;
}


.ww-apply-points li {
    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 17px;

    color: var(--ww-white);
}


.ww-apply-points li::before {
    content: "";

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background:
        var(--ww-sage)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 17px no-repeat;
}


.ww-apply .ww-doorway {
    width: 100%;
    max-width: 380px;

    margin-left: auto;
}


/* ---------- Gallery heading spacing on this page ---------- */

.m-gallery.ww-section .ww-head-center {
    margin-bottom: 32px;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-sch-hero-grid,
    .ww-sch-split,
    .ww-apply {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .ww-sch-hero .ww-doorway {
        max-width: 420px;
    }


    .ww-apply {
        padding: 40px 32px;
    }


    .ww-apply .ww-doorway {
        margin: 0;
    }


    .ww-options {
        grid-template-columns: 1fr;
    }


    .ww-option {
        min-height: 0;

        align-items: center;
    }

}


@media (max-width: 767.98px) {

    .ww-stepup {
        grid-template-columns: 1fr;

        justify-items: start;

        gap: 20px;

        padding: 26px 22px;
    }


    .ww-stamp {
        width: 104px;
        height: 104px;
    }


    .ww-sch-block {
        padding: 22px;
    }


    .ww-day-track {
        height: 60px;
    }


    .ww-day-seg {
        padding: 0 4px;

        font-size: 12px;

        line-height: 1.15;
    }


    .ww-day-ticks span {
        font-size: 11px;
    }


    .ww-apply {
        padding: 30px 22px;
    }


    .ww-pricetag {
        min-width: 0;

        padding: 22px 22px 18px 48px;
    }


    .ww-pricetag-price {
        font-size: 38px;
    }

}


/* =========================================================
   10. SCHOOL APPLICATION FORM
   Folder-tab sections, step list, big clear fields,
   ticket-style thank-you.
========================================================= */

.ww-app-hero {
    padding-bottom: 24px;

    text-align: center;
}


.ww-app-title {
    max-width: 14em;

    margin: 0 auto 20px;

    font-size: clamp(2.4rem, 5vw, 4.2rem);

    line-height: 0.98;
}


.ww-app-hero .ww-lead {
    margin: 0 auto;
}


.ww-app {
    padding-top: 32px;
}


.ww-app-layout {
    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    gap: 40px;

    align-items: start;
}


/* ---------- Step list ---------- */

.ww-app-progress {
    position: sticky;

    top: 112px;

    padding: 24px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-app-progress-title {
    margin: 0 0 14px;

    font-family: var(--ww-display);

    font-size: 20px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-app-progress-list {
    display: grid;

    gap: 6px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-app-progress-list a {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 9px 10px;

    border-radius: var(--ww-r-sm);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;

    color: var(--ww-black);

    transition: background-color 180ms ease;
}


.ww-app-progress-list a:hover {
    background: var(--ww-sage-tint);

    color: var(--ww-black);
}


.ww-app-progress-list a.is-active {
    background: var(--ww-sage);
}


/* Round step number (used in the list and on folder tabs) */

.ww-app-step {
    flex: 0 0 auto;

    display: inline-grid;

    place-items: center;

    width: 30px;
    height: 30px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);

    font-size: 13px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-app-progress-list a.is-active .ww-app-step {
    background: var(--ww-black);

    color: var(--ww-white);
}


.ww-app-note {
    margin-top: 20px;

    padding: 16px;

    border-radius: var(--ww-r-md);

    background: var(--ww-orange-tint);
}


.ww-app-note strong {
    display: block;

    margin-bottom: 4px;

    font-size: 15px;

    color: var(--ww-black);
}


.ww-app-note p {
    margin: 0;

    font-size: 14px;

    line-height: 1.55;

    color: var(--ww-text);
}


/* ---------- Alerts ---------- */

.ww-app-alert {
    margin-bottom: 24px;

    padding: 16px 20px;

    border: var(--ww-line);
    border-radius: var(--ww-r-md);

    background: var(--ww-sage-tint);
}


.ww-app-alert.is-error {
    background: #ffe3dc;
}


.ww-app-alert p {
    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: var(--ww-black);
}


/* ---------- Folder sections ---------- */

.ww-folder-set {
    min-width: 0;

    margin: 0 0 40px;

    padding: 0;

    border: 0;

    scroll-margin-top: 112px;
}


/* The legend becomes the folder's tab */

.ww-folder-tab {
    float: left;

    /* Bootstrap makes every <legend> full width; keep the tab tight */
    width: auto;
    max-width: calc(100% - 24px);

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 -3px 24px;

    padding: 12px 22px 14px 14px;

    border: var(--ww-line);
    border-bottom: 0;
    border-radius: var(--ww-r-md) var(--ww-r-md) 0 0;

    background: var(--ww-sage);

    font-family: var(--ww-display);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.2;

    color: var(--ww-black);

    position: relative;

    z-index: 1;
}


.ww-folder-body {
    clear: both;

    padding: 32px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-app-intro {
    max-width: 40em;

    margin: 0 0 24px;

    font-size: 16px;

    line-height: 1.65;

    color: var(--ww-text);
}


/* ---------- Fields ---------- */

.ww-app-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px 20px;
}


.ww-field {
    display: flex;

    flex-direction: column;

    gap: 8px;

    min-width: 0;
}


.ww-field.is-wide {
    grid-column: 1 / -1;
}


.ww-field[hidden] {
    display: none;
}


.ww-label {
    font-size: 15px;

    font-weight: 600;

    line-height: 1.4;

    color: var(--ww-black);
}


.ww-req {
    color: #c2410c;
}


.ww-form input[type="text"],
.ww-form input[type="email"],
.ww-form input[type="tel"],
.ww-form input[type="number"],
.ww-form input[type="date"],
.ww-form input[type="url"],
.ww-form input[type="password"],
.ww-form input[type="search"],
.ww-form select,
.ww-form textarea {
    box-sizing: border-box;

    width: 100%;
    min-height: 52px;

    padding: 12px 16px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);

    font-family: var(--ww-body);

    font-size: 16px;

    line-height: 1.4;

    color: var(--ww-black);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.ww-form textarea {
    min-height: 120px;

    resize: vertical;
}


.ww-form input::placeholder,
.ww-form textarea::placeholder {
    color: #8a8a8a;
}


.ww-form input:focus,
.ww-form select:focus,
.ww-form textarea:focus {
    outline: none;

    box-shadow: 0 0 0 4px var(--ww-orange);
}


.ww-field.has-error input,
.ww-field.has-error select,
.ww-field.has-error textarea {
    border-color: #c2410c;

    background: #fff6f3;
}


.ww-help {
    font-size: 14px;

    line-height: 1.5;

    color: var(--ww-muted);
}


.ww-error {
    font-size: 14px;

    font-weight: 600;

    color: #c2410c;
}


/* ---------- Choice pills (radio / checkbox) ---------- */

.ww-choices {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.ww-choice {
    position: relative;

    display: inline-flex;

    align-items: center;

    cursor: pointer;
}


.ww-choice input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.ww-choice span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 48px;

    padding: 10px 18px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-size: 15px;

    font-weight: 600;

    color: var(--ww-black);

    transition: background-color 150ms ease;
}


.ww-choice:hover span {
    background: var(--ww-sage-tint);
}


.ww-choice input:checked + span {
    background: var(--ww-sage);
}


.ww-choice input:checked + span::before {
    content: "✓";

    font-weight: 800;
}


.ww-choice input:focus-visible + span {
    box-shadow: 0 0 0 4px var(--ww-orange);
}


/* ---------- Actions ---------- */

.ww-app-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 18px 24px;

    padding: 24px 28px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-orange-tint);
}


.ww-app-actions p {
    max-width: 26em;

    margin: 0;

    font-size: 15px;

    line-height: 1.55;

    color: var(--ww-text);
}


/* ---------- Thank-you ticket ---------- */

.ww-app-ticket {
    max-width: 760px;

    margin: 0 auto;

    padding: 48px;
}


.ww-app-stamp {
    display: grid;

    place-items: center;

    width: 76px;
    height: 76px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);

    font-size: 34px;

    font-weight: 800;

    color: var(--ww-black);

    rotate: -8deg;
}


.ww-app-ticket .ww-h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}


.ww-app-ticket .ww-text {
    color: var(--ww-black);
}


.ww-app-steps {
    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;

    counter-reset: step;

    list-style: none;
}


.ww-app-steps li {
    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 17px;

    color: var(--ww-black);

    counter-increment: step;
}


.ww-app-steps li::before {
    content: counter(step);

    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);

    font-size: 14px;

    font-weight: 700;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-app-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: 28px;
    }


    .ww-app-progress,
    .ww-app-main {
        min-width: 0;
    }


    /* Steps become a horizontal scroll strip on top */
    .ww-app-progress {
        position: static;

        padding: 16px;
    }


    .ww-app-progress-list {
        display: flex;

        gap: 6px;

        overflow-x: auto;
    }


    .ww-app-progress-list a {
        white-space: nowrap;
    }


    .ww-app-note {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .ww-app-grid {
        grid-template-columns: 1fr;
    }


    .ww-folder-body {
        padding: 22px 18px;
    }


    .ww-folder-tab {
        margin-left: 12px;

        font-size: 17px;
    }


    .ww-app-actions {
        padding: 20px;
    }


    .ww-app-actions .ww-actions {
        width: 100%;
    }


    .ww-app-ticket {
        padding: 32px 24px;
    }

}


/* =========================================================
   11. TUTORING PAGE
   Pills, 4-stop path, assessment ticket + booking form,
   restyled scheduler and subject tabs (old JS hooks kept).
========================================================= */

/* ---------- Hero bits ---------- */

.ww-tut-sub {
    margin: 0 0 18px;

    font-family: var(--ww-display);

    font-size: clamp(1.3rem, 2vw, 1.7rem);

    font-weight: 700;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-tut-lead2 {
    margin-top: 14px;
}


/* Outlined pills for plain facts */

.ww-pills {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 26px 0 0;

    padding: 0;

    list-style: none;
}


.ww-pills li {
    padding: 8px 16px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-size: 15px;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-pills.is-on-orange li {
    background: var(--ww-orange-tint);
}


.ww-sch-hero .ww-pills + .ww-actions {
    margin-top: 28px;
}


/* ---------- 4-stop path ---------- */

.ww-path {
    position: relative;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* Dashed road joining the stops */

.ww-path::before {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    top: 34px;

    border-top: 3px dashed var(--ww-black);
}


.ww-stop {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    text-align: center;
}


.ww-stop-num {
    position: relative;

    z-index: 1;

    display: grid;

    place-items: center;

    width: 68px;
    height: 68px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);

    font-family: var(--ww-display);

    font-size: 28px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-stop:first-child .ww-stop-num {
    background: var(--ww-orange);
}


.ww-stop:nth-child(3) .ww-stop-num {
    background: var(--ww-pink);
}


.ww-stop-title {
    margin: 6px 0 0;

    font-family: var(--ww-display);

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-stop .ww-text {
    max-width: 18em;

    font-size: 16px;

    color: var(--ww-black);
}


.ww-path-cta {
    margin: 40px 0 0;
}


/* ---------- Assessment layout ---------- */

.ww-assess-layout {
    display: grid;

    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    gap: 40px;

    align-items: start;
}


.ww-assess-ticket {
    position: sticky;

    top: 112px;
}


.ww-assess-ticket .ww-h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.5rem);
}


.ww-assess-ticket .ww-text {
    font-size: 16px;

    color: var(--ww-black);
}


.ww-assess-ticket .ww-pills {
    margin-top: 0;
}


.ww-assess-price {
    display: flex;

    align-items: baseline;

    gap: 12px;
}


.ww-assess-price strong {
    font-family: var(--ww-display);

    font-size: 56px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.03em;

    color: var(--ww-black);
}


.ww-assess-price span {
    font-size: 16px;

    font-weight: 600;

    color: var(--ww-black);
}


/* Check list (white checks on orange) */

.ww-checks {
    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-checks li {
    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 16px;

    color: var(--ww-black);
}


.ww-checks li::before {
    content: "";

    flex: 0 0 auto;

    width: 26px;
    height: 26px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background:
        var(--ww-white)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 15px no-repeat;
}


.ww-assess-intro {
    margin-bottom: 30px;
}


.ww-assess-intro .ww-h3 {
    margin-bottom: 8px;
}


.ww-optional {
    margin-left: 4px;

    font-family: var(--ww-body);

    font-size: 13px;

    font-weight: 500;

    color: var(--ww-text);
}


/* ---------- Choice cards (subjects, photo permission) ---------- */

.ww-choice-cards {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.ww-choice-card {
    position: relative;

    cursor: pointer;
}


.ww-choice-card input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.ww-choice-card > span {
    display: flex;

    flex-direction: column;

    gap: 2px;

    height: 100%;

    padding: 16px 18px 16px 56px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-md);

    background: var(--ww-white);

    transition: background-color 150ms ease;
}


/* Tick box drawn on the left of the card */

.ww-choice-card > span::before {
    content: "";

    position: absolute;

    left: 18px;
    top: 50%;

    width: 24px;
    height: 24px;

    border: var(--ww-line-thin);
    border-radius: 7px;

    background: var(--ww-white);

    transform: translateY(-50%);
}


.ww-choice-card input[type="radio"] + span::before {
    border-radius: 50%;
}


.ww-choice-card strong {
    font-size: 16px;

    color: var(--ww-black);
}


.ww-choice-card small {
    font-size: 14px;

    color: var(--ww-text);
}


.ww-choice-card:hover > span {
    background: var(--ww-sage-tint);
}


.ww-choice-card input:checked + span {
    background: var(--ww-sage);
}


.ww-choice-card input:checked + span::before {
    background:
        var(--ww-black)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px no-repeat;
}


.ww-choice-card input:focus-visible + span {
    box-shadow: 0 0 0 4px var(--ww-orange);
}


/* ---------- Scheduler (old markup, new look) ---------- */

.ww-assess .wisdom-assessment-scheduler {
    display: grid;

    gap: 20px;
}


.ww-assess .wisdom-assessment-scheduler-date {
    display: flex;

    flex-direction: column;

    gap: 8px;

    max-width: 320px;
}


.ww-assess .wisdom-assessment-date-input {
    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);
}


.ww-assess .wisdom-assessment-times {
    padding: 18px;

    border: 2px dashed var(--ww-black);
    border-radius: var(--ww-r-md);

    background: var(--ww-white);
}


.ww-assess .wisdom-assessment-times-heading {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 6px 16px;

    margin-bottom: 14px;
}


.ww-assess .wisdom-assessment-times-heading strong {
    font-family: var(--ww-display);

    font-size: 18px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-assess .wisdom-assessment-times-heading span {
    font-size: 14px;

    color: var(--ww-text);
}


.ww-assess .wisdom-assessment-time-options {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));

    gap: 10px;
}


.ww-assess .wisdom-assessment-time-button {
    min-height: 48px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-body);

    font-size: 15px;

    font-weight: 600;

    color: var(--ww-black);

    box-shadow: none;
}


.ww-assess .wisdom-assessment-time-button:hover {
    transform: none;

    border-color: var(--ww-black);

    background: var(--ww-sage-tint);
}


.ww-assess .wisdom-assessment-time-button.is-selected {
    border-color: var(--ww-black);

    background: var(--ww-black);

    color: var(--ww-white);

    box-shadow: none;
}


.ww-assess .wisdom-assessment-time-message {
    font-size: 15px;

    color: var(--ww-text);
}


.ww-assess .wisdom-assessment-selected-slot {
    border: var(--ww-line);
    border-radius: var(--ww-r-md);

    background: var(--ww-sage);
}


.ww-assess .wisdom-assessment-selected-check {
    background: var(--ww-black);
}


.ww-assess .wisdom-assessment-selected-slot strong {
    font-size: 16px;

    color: var(--ww-black);
}


.ww-assess .wisdom-assessment-selected-slot small {
    color: var(--ww-black);
}


/* ---------- Summary + checkout ---------- */

.ww-assess-summary {
    align-items: stretch;
}


.ww-assess-total {
    flex: 1 1 260px;

    display: grid;

    gap: 8px;

    margin: 0;
}


.ww-assess-total div {
    display: flex;

    justify-content: space-between;

    gap: 16px;

    font-size: 16px;

    color: var(--ww-black);
}


.ww-assess-total dt {
    font-weight: 400;
}


.ww-assess-total dd {
    margin: 0;

    font-weight: 600;
}


.ww-assess-total .is-total {
    padding-top: 10px;

    border-top: 2px dashed var(--ww-black);

    font-family: var(--ww-display);

    font-size: 22px;

    font-weight: 800;
}


.ww-assess-total .is-total dt,
.ww-assess-total .is-total dd {
    font-weight: 800;
}


.ww-assess-go {
    flex: 1 1 260px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    gap: 10px;
}


.ww-assess-go p {
    margin: 0;

    font-size: 14px;
}


/* ---------- Subject tabs (old JS hooks, new look) ---------- */

.ww-subjects .wisdom-personalized-tabs {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    max-width: none;

    margin: 0 0 28px;

    padding: 0;

    border-radius: 0;

    background: none;
}


.ww-subjects .wisdom-personalized-tab {
    min-height: 52px;

    padding: 12px 22px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-body);

    font-size: 16px;

    font-weight: 600;

    color: var(--ww-black);

    box-shadow: none;

    transform: none;
}


.ww-subjects .wisdom-personalized-tab:not(.is-active):hover {
    background: var(--ww-sage-tint);

    transform: none;
}


.ww-subjects .wisdom-personalized-tab.is-active {
    background: var(--ww-black);

    color: var(--ww-white);

    box-shadow: none;

    transform: none;
}


.ww-subjects .wisdom-personalized-tab:focus-visible {
    outline: 3px solid var(--ww-orange);

    outline-offset: 3px;
}


.ww-subjects .wisdom-personalized-stage {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    max-width: none;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);

    box-shadow: none;
}


.ww-subjects .wisdom-personalized-image {
    min-height: 460px;

    padding: 0;

    border-right: var(--ww-line);

    background: var(--ww-sage);
}


/* Old number badge and repeated subject label: not needed here
   (your tab script still updates them in the background) */
.ww-subjects .wisdom-personalized-image-label,
.ww-subjects .wisdom-personalized-content-kicker {
    display: none;
}


.ww-subjects .wisdom-personalized-image::before,
.ww-subjects .wisdom-personalized-content::after,
.ww-subjects .wisdom-personalized-image-inner::after {
    display: none;
}


.ww-subjects .wisdom-personalized-image-inner {
    inset: 22px;

    border: var(--ww-line);
    border-radius: 999px 999px var(--ww-r-md) var(--ww-r-md);

    overflow: hidden;
}


.ww-subjects .wisdom-personalized-image-inner img {
    width: 100%;
    height: 100%;

    border-radius: 0;

    object-fit: cover;
}


.ww-subjects .wisdom-personalized-content {
    min-height: 460px;

    padding: 48px;
}


.ww-subjects .wisdom-personalized-content-kicker {
    margin-bottom: 12px;

    padding: 0;

    border-radius: 0;

    background: none;

    font-family: var(--ww-display);

    font-size: 20px;

    font-weight: 700;

    letter-spacing: -0.01em;

    text-transform: none;
}


.ww-subjects .wisdom-personalized-content h3 {
    margin: 0 0 20px;

    font-family: var(--ww-display);

    font-size: clamp(2rem, 3.4vw, 3rem);

    font-weight: 800;

    letter-spacing: -0.035em;

    color: var(--ww-black);
}


.ww-subjects .wisdom-personalized-content > p {
    font-family: var(--ww-body);

    font-size: 17px;

    line-height: 1.7;

    color: var(--ww-text);
}


.ww-subjects .wisdom-personalized-progress {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 36px;
}


.ww-subjects .wisdom-personalized-progress strong {
    font-size: 14px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-subjects .wisdom-personalized-progress-track {
    flex: 1 1 auto;

    height: 12px;

    border: var(--ww-line-thin);

    background: var(--ww-white);
}


.ww-subjects .wisdom-personalized-progress-track span {
    background: var(--ww-orange);
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-path {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 36px;
    }


    .ww-path::before {
        display: none;
    }


    .ww-assess-layout {
        grid-template-columns: minmax(0, 1fr);
    }


    .ww-assess-ticket {
        position: relative;

        top: auto;
    }


    .ww-subjects .wisdom-personalized-stage {
        grid-template-columns: 1fr;
    }


    .ww-subjects .wisdom-personalized-image {
        min-height: 340px;

        border-right: 0;
        border-bottom: var(--ww-line);
    }


    .ww-subjects .wisdom-personalized-content {
        min-height: 0;

        padding: 32px 26px;
    }

}


@media (max-width: 767.98px) {

    .ww-path {
        grid-template-columns: 1fr;
    }


    /* Stops become a vertical list with the number on the left */
    .ww-stop {
        display: grid;

        grid-template-columns: 56px minmax(0, 1fr);

        column-gap: 16px;

        align-items: start;

        text-align: left;
    }


    .ww-stop-num {
        grid-row: span 2;

        width: 56px;
        height: 56px;

        font-size: 22px;
    }


    .ww-stop-title {
        margin-top: 8px;
    }


    .ww-choice-cards {
        grid-template-columns: 1fr;
    }


    .ww-assess-go {
        align-items: stretch;
    }


    .ww-assess-go .ww-btn {
        width: 100%;
    }


    .ww-subjects .wisdom-personalized-tab {
        flex: 1 1 calc(50% - 8px);

        padding: 10px 12px;

        font-size: 14px;
    }


    .ww-subjects .wisdom-personalized-image {
        min-height: 280px;
    }

}


/* =========================================================
   12. CREATIVE WORKSHOPS PAGE
   Spotlight band, workshop cards, weekly class grid.
   (Registration reuses the tutoring ticket + form pieces.)
========================================================= */

/* ---------- Spotlight band ---------- */

.ww-spot {
    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    gap: 56px;

    align-items: center;
}


.ww-spot .ww-h2 {
    margin-bottom: 12px;
}


.ww-spot .ww-text {
    max-width: 34em;

    color: var(--ww-black);
}


.ww-spot-facts {
    display: grid;

    gap: 14px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* each fact is a small card, slightly turned like pinned notes */

.ww-spot-facts li {
    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 18px 22px;

    border: var(--ww-line);
    border-radius: var(--ww-r-md);

    background: var(--ww-white);

    transform: rotate(-1.2deg);
}


.ww-spot-facts li:nth-child(2) {
    margin-left: 28px;

    background: var(--ww-orange);

    transform: rotate(1deg);
}


.ww-spot-facts li:nth-child(3) {
    background: var(--ww-pink);

    transform: rotate(-0.4deg);
}


.ww-spot-facts strong {
    font-family: var(--ww-display);

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-spot-facts span {
    font-size: 16px;

    color: var(--ww-black);
}


/* ---------- Workshop cards ---------- */

.ww-ws-list {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 24px;

    margin-top: 40px;
}


.ww-ws-card {
    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);

    transition: transform 220ms var(--ww-ease), box-shadow 220ms var(--ww-ease);
}


.ww-ws-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 8px 0 var(--ww-black);
}


.ww-ws-top {
    flex: 1 1 auto;

    padding: 28px 28px 24px;

    border-bottom: var(--ww-line);
}


.ww-ws-card.is-sage   .ww-ws-top { background: var(--ww-sage); }
.ww-ws-card.is-orange .ww-ws-top { background: var(--ww-orange); }
.ww-ws-card.is-white  .ww-ws-top { background: var(--ww-sage-tint); }
.ww-ws-card.is-pink   .ww-ws-top { background: var(--ww-pink); }


.ww-ws-name {
    margin: 0 0 14px;

    font-family: var(--ww-display);

    font-size: 28px;

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-ws-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0 0 16px;

    padding: 0;

    list-style: none;
}


.ww-ws-badges:empty {
    display: none;
}


.ww-ws-badges li {
    padding: 6px 14px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-size: 14px;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-ws-desc {
    margin: 0;

    font-size: 16px;

    line-height: 1.65;

    color: var(--ww-black);
}


.ww-ws-sessions {
    display: grid;
}


.ww-ws-session {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 20px 28px;
}


.ww-ws-session + .ww-ws-session {
    border-top: 2px dashed var(--ww-black);
}


.ww-ws-when {
    display: grid;

    gap: 3px;

    min-width: 0;

    font-size: 15px;

    color: var(--ww-text);
}


.ww-ws-when strong {
    font-size: 17px;

    color: var(--ww-black);
}


.ww-ws-status {
    font-weight: 600;

    color: var(--ww-black);
}


.ww-ws-note {
    font-size: 14px;
}


.ww-ws-buy {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

    flex: 0 0 auto;
}


.ww-ws-price {
    font-family: var(--ww-display);

    font-size: 30px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-ws-price small {
    margin-left: 6px;

    font-family: var(--ww-body);

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0;
}


.ww-ws-buy .ww-btn {
    min-height: 46px;

    padding: 10px 24px;
}


.ww-ws-session.is-full {
    background: repeating-linear-gradient(-45deg, #f4f4f4 0 10px, var(--ww-white) 10px 20px);
}


.ww-ws-session.is-full .ww-ws-price {
    opacity: 0.45;
}


.ww-btn.is-disabled {
    cursor: not-allowed;

    opacity: 0.5;

    pointer-events: none;
}


.ww-ws-empty {
    max-width: 640px;

    margin: 40px auto 0;

    text-align: center;
}


.ww-ws-empty a {
    font-weight: 600;

    color: var(--ww-black);
}


/* ---------- Ticket: live selection ---------- */

.ww-ws-picked {
    display: grid;

    gap: 6px;

    padding: 16px 18px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-orange-tint);

    color: var(--ww-black);
}


.ww-ws-picked-label {
    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.ww-ws-picked > strong {
    font-family: var(--ww-display);

    font-size: 20px;

    font-weight: 800;
}


.ww-ws-picked ul {
    display: grid;

    gap: 8px;

    margin: 4px 0 0;

    padding: 0;

    list-style: none;
}


.ww-ws-picked ul:empty {
    display: none;
}


.ww-ws-picked li {
    display: grid;

    gap: 1px;

    padding-top: 8px;

    border-top: 1px solid rgba(0, 0, 0, 0.18);

    font-size: 14px;
}


.ww-ws-picked li strong {
    font-size: 15px;
}


/* ---------- Weekly class grid ---------- */

/* fieldsets grow to fit wide content by default; this lets the
   class grid scroll inside its box instead of widening the page */
.ww-folder-set,
.ww-folder-body {
    min-width: 0;
}

.ww-ws-swipe {
    display: none;

    margin: -6px 0 12px;

    font-size: 14px;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-ws-grid-wrap {
    /* keeps hidden screen-reader labels inside the scroll box */
    position: relative;

    overflow-x: auto;

    margin: 0 -4px;

    padding: 4px 4px 10px;

    -webkit-overflow-scrolling: touch;
}


.ww-ws-grid {
    width: 100%;

    border-collapse: separate;

    border-spacing: 8px;

    margin: -8px;
}


.ww-ws-grid th,
.ww-ws-grid td {
    padding: 0;

    vertical-align: middle;

    text-align: center;
}


.ww-ws-grid thead th {
    min-width: 96px;

    padding: 10px 8px 12px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-sage-tint);

    vertical-align: top;
}


.ww-ws-grid thead th.ww-ws-corner {
    min-width: 0;

    border: 0;
    border-radius: 0;

    background: none;
}


.ww-ws-grid thead strong {
    display: block;

    margin: 6px 0 4px;

    font-size: 14px;

    line-height: 1.25;

    color: var(--ww-black);
}


.ww-ws-grid thead small {
    display: block;

    font-size: 12px;

    color: var(--ww-text);
}


.ww-ws-day {
    display: inline-block;

    padding: 3px 10px;

    border-radius: 999px;

    background: var(--ww-black);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--ww-white);
}


.ww-ws-week {
    padding-right: 6px !important;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;

    text-align: left !important;

    white-space: nowrap;

    color: var(--ww-black);
}


.ww-ws-week .ww-ws-toggle {
    display: block;

    min-height: 30px;

    margin-top: 6px;

    padding: 4px 10px;

    font-size: 12px;
}


/* the class grid needs a wider form column than tutoring */
.ww-ws-reg .ww-assess-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}


/* one class = one tickable tile */

.ww-ws-slot {
    position: relative;

    display: block;

    margin: 0;

    cursor: pointer;
}


.ww-ws-slot input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.ww-ws-slot-face {
    display: grid;

    gap: 2px;

    padding: 10px 6px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);

    transition: background 150ms var(--ww-ease), transform 150ms var(--ww-ease);
}


.ww-ws-slot-face b {
    font-size: 15px;

    color: var(--ww-black);
}


.ww-ws-slot-face small {
    font-size: 12px;

    color: var(--ww-text);
}


.ww-ws-slot:hover .ww-ws-slot-face {
    transform: translateY(-2px);
}


.ww-ws-slot input:checked + .ww-ws-slot-face {
    border-width: 3px;

    background: var(--ww-sage);
}


.ww-ws-slot input:checked + .ww-ws-slot-face small::before {
    content: "✓ ";

    font-weight: 800;

    color: var(--ww-black);
}


.ww-ws-slot input:focus-visible + .ww-ws-slot-face {
    outline: 3px solid var(--ww-orange);
    outline-offset: 2px;
}


.ww-ws-slot.is-full {
    cursor: not-allowed;
}


.ww-ws-slot.is-full .ww-ws-slot-face {
    border-style: dashed;

    background: #f4f4f4;

    opacity: 0.6;
}


.ww-ws-none {
    color: var(--ww-text);
}


.ww-ws-toggle {
    min-height: 36px;

    padding: 6px 12px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-body);

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    color: var(--ww-black);

    cursor: pointer;
}


.ww-ws-toggle:hover {
    background: var(--ww-orange);
}


/* ---------- Responsive ---------- */

@media (max-width: 991px) {

    .ww-ws-reg .ww-assess-layout {
        grid-template-columns: minmax(0, 1fr);
    }


    .ww-spot {
        grid-template-columns: minmax(0, 1fr);

        gap: 32px;
    }

}


@media (max-width: 767px) {

    .ww-ws-list {
        grid-template-columns: minmax(0, 1fr);
    }


    .ww-ws-top {
        padding: 24px 22px 20px;
    }


    .ww-ws-session {
        padding: 18px 22px;
    }


    .ww-ws-swipe {
        display: block;
    }


    /* week labels stay put while the classes scroll sideways */
    .ww-ws-grid .ww-ws-week,
    .ww-ws-grid thead th.ww-ws-corner {
        position: sticky;

        left: 0;

        z-index: 2;

        background: var(--ww-white);

        box-shadow: -8px 0 0 var(--ww-white), 8px 0 0 var(--ww-white);
    }


    .ww-spot-facts li:nth-child(2) {
        margin-left: 14px;
    }

}


/* =========================================================
   13. PHOTOS + PAGE HEROES
   Your photos already have their own edges and drawings, so
   they are shown as they are: straight, uncropped, no frame,
   no shadow, no overlap.
     .ww-hero-photo  Schooling — one photo beside the text
     .ww-trio        Tutoring  — centred text, 3 photos in a row
     .ww-reel        Workshops — slowly moving strip of photos
========================================================= */

.ww-cut {
    display: block;

    margin: 0;
}


.ww-cut img {
    display: block;

    width: 100%;
    height: auto;
}


/* ---------- Schooling: one photo ---------- */

.ww-hero-photo {
    width: 100%;
    max-width: 540px;

    margin-left: auto;
}


/* ---------- Tutoring: centred text + row of 3 ---------- */

.ww-hero-center {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.ww-hero-center .ww-lead {
    max-width: 44em;

    margin-left: auto;
    margin-right: auto;
}


.ww-hero-center .ww-pills,
.ww-hero-center .ww-actions {
    justify-content: center;
}


.ww-trio {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 32px;

    margin: 56px auto 0;
}


.ww-trio .ww-cut {
    flex: 0 1 auto;

    min-width: 0;
}


/* same height for all three keeps the row tidy */
.ww-trio .ww-cut img {
    width: auto;
    max-width: 100%;
    height: 280px;

    object-fit: contain;
}


/* ---------- Workshops: moving photo strip ---------- */

.ww-reel {
    position: relative;

    margin-top: 56px;

    padding: 36px 0;

    overflow: hidden;

    border-top: var(--ww-line);
    border-bottom: var(--ww-line);

    background: var(--ww-pink-tint);
}


.ww-reel-track {
    display: flex;

    align-items: center;

    gap: 40px;

    width: max-content;

    /* same as the gap, so the copy lines up for a seamless loop */
    padding-right: 40px;

    animation: ww-reel 60s linear infinite;
}


.ww-reel-copy {
    display: contents;
}


.ww-reel:hover .ww-reel-track {
    animation-play-state: paused;
}


.ww-reel .ww-cut {
    flex: 0 0 auto;
}


.ww-reel .ww-cut img {
    width: auto;
    height: 240px;
}


@keyframes ww-reel {
    to { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce) {

    .ww-reel-track {
        animation: none;
    }


    .ww-reel {
        overflow-x: auto;
    }

}


/* ---------- Schooling apply panel photo ---------- */

.ww-apply .ww-cut {
    width: 100%;
    max-width: 440px;

    margin-left: auto;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-hero-photo,
    .ww-apply .ww-cut {
        margin: 0 auto;
    }


    .ww-trio .ww-cut img {
        height: 200px;
    }

}


@media (max-width: 767px) {

    /* phone: one photo on top, two below, all straight */
    .ww-trio {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 16px;

        margin-top: 40px;
    }


    .ww-trio .ww-cut:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
    }


    .ww-trio .ww-cut img {
        width: 100%;
        height: auto;
    }


    .ww-reel {
        padding: 24px 0;
    }


    .ww-reel .ww-cut img {
        height: 160px;
    }


    .ww-reel-track {
        gap: 24px;

        padding-right: 24px;
    }

}


/* =========================================================
   14. CAMPS PAGE
   Hero panel, half/full-day cards, camp cards (reuse the
   workshop card pieces), registration options + day tiles.
========================================================= */

/* ---------- Hero: one sage panel ---------- */

.ww-camp-hero {
    padding-top: 40px;
}


.ww-camp-panel {
    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

    gap: 48px;

    align-items: center;

    padding: 56px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-sage);
}


.ww-camp-panel .ww-lead {
    color: var(--ww-black);
}


.ww-camp-panel-photo {
    width: 100%;
}


/* two "day tickets" with the times */

.ww-camp-times {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}


.ww-camp-time {
    display: grid;

    gap: 2px;

    min-width: 170px;

    padding: 14px 22px;

    border: var(--ww-line);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);
}


.ww-camp-time.is-pink {
    background: var(--ww-pink);
}


.ww-camp-time.is-orange {
    background: var(--ww-orange);
}


.ww-camp-time span {
    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--ww-black);
}


.ww-camp-time strong {
    font-family: var(--ww-display);

    font-size: 30px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-camp-panel .ww-actions {
    margin-top: 28px;
}


/* ---------- Half-day / full-day ---------- */

.ww-camp-formats .ww-head-center .ww-h2 {
    max-width: 18em;

    margin-left: auto;
    margin-right: auto;
}


.ww-camp-format-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-top: 40px;
}


.ww-camp-format {
    padding: 36px 36px 38px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-camp-format.is-full-day {
    background: var(--ww-pink-tint);
}


.ww-camp-format-time {
    display: inline-block;

    margin: 0 0 18px;

    padding: 6px 14px;

    border-radius: 999px;

    background: var(--ww-black);

    font-size: 14px;

    font-weight: 700;

    color: var(--ww-white);
}


.ww-camp-format .ww-h3 {
    margin-bottom: 12px;
}


.ww-camp-format .ww-text {
    margin: 0;

    color: var(--ww-black);
}


/* ---------- Camp cards: price list ---------- */

.ww-camp-prices {
    display: grid;

    gap: 8px;

    margin: 18px 0 0;

    padding: 14px 16px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);
}


.ww-camp-prices div {
    display: flex;

    align-items: baseline;

    gap: 8px;
}


/* dotted leader between name and price */
.ww-camp-prices div::after {
    content: "";

    order: 1;

    flex: 1 1 auto;

    border-bottom: 2px dotted rgba(0, 0, 0, 0.35);
}


.ww-camp-prices dt {
    font-size: 15px;

    font-weight: 500;

    color: var(--ww-black);
}


.ww-camp-prices dd {
    order: 2;

    margin: 0;

    font-family: var(--ww-display);

    font-size: 18px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-camp-soon {
    margin: 16px 0 0;

    font-weight: 600;

    color: var(--ww-black);
}


/* ---------- Registration ---------- */

.ww-camp-picked .ww-camp-picked-option {
    font-weight: 700;
}


.ww-camp-weeks .ww-camp-meta {
    font-weight: 600;

    color: var(--ww-black);
}


.ww-camp-group + .ww-camp-group {
    margin-top: 22px;
}


.ww-camp-group[hidden] {
    display: none;
}


.ww-camp-group-title {
    display: block;

    margin: 0 0 10px;

    font-family: var(--ww-display);

    font-size: 18px;

    font-weight: 800;

    color: var(--ww-black);
}


/* with JS only the chosen camp's group shows, so no title needed */
.is-enhanced .ww-camp-group-title {
    display: none;
}


.ww-camp-option-price {
    margin-top: 4px;

    font-family: var(--ww-display);

    font-size: 22px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-camp-week-label {
    display: block;

    margin: 14px 0 8px;

    font-size: 14px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-camp-days {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));

    gap: 10px;
}


.ww-camp-day .ww-ws-slot-face {
    padding: 14px 6px;

    text-align: center;
}


/* the days after the start day that the child also attends */
.ww-camp-day.is-attending .ww-ws-slot-face {
    background: var(--ww-sage-tint);

    border-style: dashed;
}


.ww-camp-day input:disabled + .ww-ws-slot-face {
    cursor: not-allowed;

    opacity: 0.35;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-camp-panel {
        grid-template-columns: minmax(0, 1fr);

        padding: 40px 32px;
    }


    .ww-camp-panel-photo {
        max-width: 520px;

        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .ww-camp-panel {
        padding: 32px 22px;

        border-radius: var(--ww-r-md);
    }


    .ww-camp-time {
        flex: 1 1 0;

        min-width: 0;

        padding: 12px 16px;
    }


    .ww-camp-time strong {
        font-size: 22px;

        white-space: nowrap;
    }


    .ww-camp-format-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .ww-camp-format {
        padding: 28px 24px;
    }


    .ww-camp-weeks {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* =========================================================
   15. CURRICULUM PAGE
   Circled headline word, photo with pinned notes, philosophy
   rows, statement band, licensing panel.
========================================================= */

/* ---------- Hand-drawn circle around a headline word ---------- */

.ww-circled {
    position: relative;

    display: inline-block;

    white-space: nowrap;
}


.ww-circled svg {
    position: absolute;

    left: -6%;
    top: -14%;

    width: 112%;
    height: 128%;

    overflow: visible;

    pointer-events: none;

    fill: none;

    stroke: var(--ww-orange);
    stroke-width: 4;
    stroke-linecap: round;

    vector-effect: non-scaling-stroke;
}


/* ---------- Photo with small notes on its edges ---------- */

.ww-noted {
    position: relative;

    width: 100%;
    max-width: 480px;

    margin: 0 auto;
    padding: 20px 0;
}


/* the photo keeps its shape even while it loads,
   so the notes never pile up */
.ww-noted .ww-cut {
    aspect-ratio: 420 / 512;
}


.ww-noted .ww-cut img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.ww-noted[hidden] {
    display: none;
}


.ww-note {
    position: absolute;

    z-index: 1;

    padding: 8px 16px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-display);

    font-size: 17px;

    font-weight: 700;

    white-space: nowrap;

    color: var(--ww-black);
}


.ww-note.is-one {
    left: -32px;
    top: 14%;

    background: var(--ww-orange);
}


.ww-note.is-two {
    right: -24px;
    top: 46%;

    background: var(--ww-sage);
}


.ww-note.is-three {
    left: 8%;
    bottom: 0;

    background: var(--ww-pink);
}


/* ---------- Philosophy rows ---------- */

.ww-cur-rows {
    margin: 0;

    padding: 0;

    list-style: none;

    border-top: var(--ww-line);
}


.ww-cur-row {
    display: grid;

    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);

    gap: 48px;

    padding: 36px 0;

    border-bottom: var(--ww-line);
}


.ww-cur-label {
    margin: 0;

    font-family: var(--ww-display);

    font-size: clamp(1.4rem, 2.2vw, 1.9rem);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.02em;

    color: var(--ww-black);
}


.ww-cur-copy {
    margin: 0;

    font-size: 19px;

    line-height: 1.7;

    color: var(--ww-text);
}


.ww-cur-copy mark {
    padding: 1px 4px;

    border-radius: 4px;

    background: var(--ww-pink-tint);

    box-shadow: inset 0 -0.45em 0 var(--ww-pink);

    color: var(--ww-black);
}


/* ---------- Statement band ---------- */

.ww-cur-statement .ww-container {
    max-width: 980px;

    text-align: center;
}


.ww-cur-big {
    margin: 0 0 24px;

    font-family: var(--ww-display);

    font-size: clamp(2rem, 4.4vw, 3.6rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.03em;

    color: var(--ww-black);
}


.ww-cur-big span {
    display: block;

    margin-top: 6px;

    color: var(--ww-white);

    -webkit-text-stroke: 2px var(--ww-black);
    paint-order: stroke fill;
}


.ww-cur-statement .ww-lead {
    max-width: 44em;

    margin: 0 auto;

    color: var(--ww-black);
}


/* ---------- Licensing panel ---------- */

.ww-cur-license {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
}


.ww-cur-license-photo {
    margin: 0;

    overflow: hidden;

    border: 3px solid var(--ww-white);
    border-radius: var(--ww-r-md);
}


.ww-cur-license-photo img {
    display: block;

    width: 100%;
    height: auto;
}


.ww-cur-license .ww-btn {
    margin-top: 28px;

    height: auto;

    line-height: 1.3;

    text-align: center;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-cur-license {
        grid-template-columns: minmax(0, 1fr);
    }


    .ww-cur-license-photo {
        max-width: 360px;
    }

}


@media (max-width: 767px) {

    .ww-cur-row {
        grid-template-columns: minmax(0, 1fr);

        gap: 12px;

        padding: 28px 0;
    }


    .ww-cur-copy {
        font-size: 17px;
    }


    .ww-note {
        font-size: 14px;

        padding: 6px 12px;
    }


    .ww-note.is-one { left: 0; }
    .ww-note.is-two { right: 0; }


    .ww-circled {
        white-space: normal;
    }

}


/* =========================================================
   16. TEAM PAGE
   Name tags hero, person rows, Huck ticket.
========================================================= */

/* ---------- Hero: name tags ---------- */

.ww-team-hero {
    text-align: center;
}


.ww-team-title {
    margin: 0 0 44px;

    font-size: clamp(2.8rem, 6vw, 5rem);
}


.ww-nametags {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

    max-width: 1000px;

    margin: 0 auto;
}


.ww-nametag {
    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: var(--ww-line);
    border-radius: var(--ww-r-md);

    background: var(--ww-white);

    text-decoration: none;

    color: var(--ww-black);

    transition: transform 200ms var(--ww-ease), box-shadow 200ms var(--ww-ease);
}


.ww-nametag:hover {
    transform: translateY(-4px);

    box-shadow: 0 6px 0 var(--ww-black);

    color: var(--ww-black);
}


.ww-nametag-band {
    display: grid;

    padding: 12px 10px 10px;

    border-bottom: var(--ww-line);

    line-height: 1.1;
}


.ww-nametag.is-sage   .ww-nametag-band { background: var(--ww-sage); }
.ww-nametag.is-orange .ww-nametag-band { background: var(--ww-orange); }
.ww-nametag.is-black  .ww-nametag-band { background: var(--ww-black); color: var(--ww-white); }
.ww-nametag.is-white  .ww-nametag-band { background: var(--ww-sage-tint); }
.ww-nametag.is-pink   .ww-nametag-band { background: var(--ww-pink); }


.ww-nametag-band b {
    font-family: var(--ww-display);

    font-size: 26px;

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;
}


.ww-nametag-band small {
    font-size: 13px;

    font-weight: 600;
}


.ww-nametag-name {
    padding: 22px 10px 24px;

    font-family: var(--ww-display);

    font-size: clamp(1.8rem, 3vw, 2.4rem);

    font-weight: 800;

    letter-spacing: -0.02em;
}


/* ---------- People ---------- */

.ww-team-people .ww-container {
    display: grid;

    gap: 88px;
}


.ww-person {
    display: grid;

    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

    gap: 56px;

    align-items: center;

    scroll-margin-top: 110px;
}


.ww-person.is-founder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}


.ww-person.is-reversed .ww-person-photo {
    order: 2;
}


.ww-person-photo {
    position: relative;

    margin: 0;

    padding: 14px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-sage);
}


.ww-person-photo.is-pink {
    background: var(--ww-pink);
}


.ww-person-photo.is-orange {
    background: var(--ww-orange);
}


.ww-person-photo img {
    display: block;

    width: 100%;
    height: auto;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-md);
}


.ww-person-bio .ww-h2 {
    margin-bottom: 18px;
}


.ww-person-bio .ww-text {
    color: var(--ww-text);
}


.ww-person-bio .ww-text + .ww-text {
    margin-top: 14px;
}


.ww-person-bio .ww-pills {
    margin-top: 24px;
}


/* ---------- Huckleberry ---------- */

#huckleberry {
    scroll-margin-top: 90px;
}


.ww-huck {
    display: grid;

    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);

    gap: 48px;

    align-items: center;
}


.ww-huck-photo {
    margin: 0;
}


.ww-huck-photo img {
    display: block;

    width: 100%;
    aspect-ratio: 1;

    object-fit: cover;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);
}


.ww-huck-copy .ww-text {
    max-width: 36em;

    color: var(--ww-black);
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-person,
    .ww-person.is-founder,
    .ww-huck {
        grid-template-columns: minmax(0, 1fr);

        gap: 28px;
    }


    .ww-person.is-reversed .ww-person-photo {
        order: 0;
    }


    .ww-person-photo {
        max-width: 520px;
    }


    .ww-huck-photo {
        max-width: 280px;
    }

}


@media (max-width: 767px) {

    .ww-nametags {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    .ww-team-people .ww-container {
        gap: 64px;
    }


    .ww-person-photo {
        padding: 10px;
    }

}


/* =========================================================
   17. SIGN IN / CREATE ACCOUNT (Google)
========================================================= */

.ww-auth-layout {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    overflow: hidden;

    max-width: 1120px;

    margin: 0 auto;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


/* ---------- Story panel ---------- */

.ww-auth-side {
    display: flex;

    flex-direction: column;

    padding: 52px 44px;

    border-right: var(--ww-line);

    background: var(--ww-sage);
}


.ww-auth-side .ww-kicker {
    margin-bottom: 10px;
}


.ww-auth-side-title {
    margin: 0 0 16px;

    font-family: var(--ww-display);

    font-size: clamp(2rem, 3.4vw, 2.8rem);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -0.03em;

    color: var(--ww-black);
}


.ww-auth-side-copy {
    margin: 0 0 28px;

    font-size: 17px;

    line-height: 1.6;

    color: var(--ww-black);
}


.ww-auth-points {
    display: grid;

    gap: 18px;

    margin: 0;

    padding: 24px 0 0;

    border-top: 2px dashed var(--ww-black);

    list-style: none;
}


.ww-auth-points li {
    display: flex;

    gap: 14px;

    align-items: flex-start;
}


.ww-auth-num {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);

    font-family: var(--ww-display);

    font-weight: 800;

    color: var(--ww-black);
}


.ww-auth-points li:first-child .ww-auth-num {
    background: var(--ww-orange);
}


.ww-auth-points li:nth-child(2) .ww-auth-num {
    background: var(--ww-pink);
}


.ww-auth-points strong {
    display: block;

    font-size: 17px;

    color: var(--ww-black);
}


.ww-auth-points p {
    margin: 2px 0 0;

    font-size: 15px;

    line-height: 1.5;

    color: var(--ww-black);
}


.ww-auth-note {
    align-self: flex-start;

    margin: 32px 0 0;

    padding: 10px 18px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-display);

    font-size: 17px;

    font-weight: 700;

    color: var(--ww-black);
}


/* ---------- Google card ---------- */

.ww-auth-main {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 52px;
}


.ww-auth-main .ww-kicker {
    margin-bottom: 8px;
}


.ww-auth-title {
    margin: 0 0 12px;

    font-size: clamp(2.2rem, 4vw, 3.2rem);
}


.ww-auth-main > .ww-lead {
    margin-bottom: 28px;
}


.ww-google {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;
    min-height: 64px;

    padding: 8px 8px 8px 10px;

    border: var(--ww-line);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-body);

    font-size: 17px;

    font-weight: 600;

    color: var(--ww-black);

    cursor: pointer;

    transition: transform 180ms var(--ww-ease), box-shadow 180ms var(--ww-ease);
}


.ww-google:hover {
    transform: translateY(-2px);

    box-shadow: 0 5px 0 var(--ww-black);
}


.ww-google:focus-visible {
    outline: 3px solid var(--ww-orange);
    outline-offset: 3px;
}


.ww-google-logo {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);
}


.ww-google-text {
    flex: 1 1 auto;

    text-align: left;
}


.ww-google .ww-arrow {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: var(--ww-black);

    color: var(--ww-white);
}


.ww-google .ww-arrow svg {
    width: 20px;
    height: 20px;
}


.ww-auth-trust {
    display: flex;

    gap: 14px;

    align-items: flex-start;

    margin-top: 24px;

    padding: 16px 18px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-sage-tint);
}


.ww-auth-trust-icon {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--ww-black);

    font-weight: 800;

    color: var(--ww-white);
}


.ww-auth-trust strong {
    font-size: 16px;

    color: var(--ww-black);
}


.ww-auth-trust p {
    margin: 2px 0 0;

    font-size: 15px;

    line-height: 1.5;

    color: var(--ww-text);
}


.ww-auth-meta {
    margin-top: 20px;
}


.ww-auth-switch {
    margin: 28px 0 0;

    padding-top: 20px;

    border-top: 2px dashed rgba(0, 0, 0, 0.25);

    font-size: 15px;

    color: var(--ww-text);
}


.ww-auth-switch a {
    margin-left: 4px;

    font-weight: 700;

    color: var(--ww-black);

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-auth-layout {
        grid-template-columns: minmax(0, 1fr);
    }


    /* sign-in button first on phones and tablets */
    .ww-auth-side {
        order: 2;

        border-right: 0;
        border-top: var(--ww-line);
    }

}


@media (max-width: 767px) {

    .ww-auth-main,
    .ww-auth-side {
        padding: 32px 22px;
    }


    .ww-auth-layout {
        border-radius: var(--ww-r-md);
    }

}



/* ---------- Curriculum: numbered rows (no titles, as on the live site) ---------- */

.ww-cur-rows {
    counter-reset: ww-cur;
}


.ww-cur-row {
    grid-template-columns: 64px minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


.ww-cur-num {
    display: grid;

    place-items: center;

    width: 56px;
    height: 56px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-sage);

    font-family: var(--ww-display);

    font-size: 24px;

    font-weight: 800;

    color: var(--ww-black);

    counter-increment: ww-cur;
}


.ww-cur-num::before {
    content: counter(ww-cur);
}


.ww-cur-row:nth-child(2) .ww-cur-num { background: var(--ww-pink); }
.ww-cur-row:nth-child(3) .ww-cur-num { background: var(--ww-orange); }


.ww-cur-row .ww-cur-copy {
    font-size: 20px;
}


/* ---------- Curriculum: consulting ---------- */

.ww-cur-consult-head {
    display: grid;

    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 48px;

    align-items: start;

    margin-bottom: 40px;
}


.ww-cur-consult-head .ww-text {
    margin-top: 14px;
}


.ww-cur-consult-head em {
    font-style: normal;

    font-weight: 700;

    color: var(--ww-black);

    box-shadow: inset 0 -0.45em 0 var(--ww-pink);
}


.ww-cur-services {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.ww-cur-service {
    padding: 28px 24px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-cur-service.is-sage   { background: var(--ww-sage); }
.ww-cur-service.is-orange { background: var(--ww-orange); }
.ww-cur-service.is-pink   { background: var(--ww-pink); }


.ww-cur-service .ww-h3 {
    margin-bottom: 12px;

    font-size: 22px;
}


.ww-cur-service .ww-text {
    margin: 0;

    font-size: 16px;

    color: var(--ww-black);
}


.ww-cur-consult-cta {
    margin: 40px 0 0;
}


@media (max-width: 1199.98px) {

    .ww-cur-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 991.98px) {

    .ww-cur-consult-head {
        grid-template-columns: minmax(0, 1fr);

        gap: 16px;
    }

}


@media (max-width: 767px) {

    .ww-cur-row {
        grid-template-columns: 44px minmax(0, 1fr);

        gap: 16px;
    }


    .ww-cur-num {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }


    .ww-cur-row .ww-cur-copy {
        font-size: 17px;
    }


    .ww-cur-services {
        grid-template-columns: minmax(0, 1fr);
    }

}



/* ---------- Workshops: illustration at the top of each card ----------
   Kept minimal: the drawing, a soft shadow to ground it, and a small
   hop on hover. */

.ww-ws-ill {
    position: relative;

    display: flex;

    justify-content: center;
    align-items: flex-end;

    height: 178px;

    margin: -6px 0 18px;
}


.ww-ws-ill[hidden] {
    display: none;
}


/* soft shadow the drawing stands on */
.ww-ws-ill::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 120px;
    height: 14px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.14);

    transform: translateX(-50%);

    transition: transform 300ms var(--ww-ease), opacity 300ms var(--ww-ease);
}


.ww-ws-ill img {
    position: relative;

    z-index: 1;

    display: block;

    width: auto;
    max-width: 100%;
    height: 166px;

    margin-bottom: 6px;

    object-fit: contain;

    transition: transform 300ms var(--ww-ease);
}


.ww-ws-card:hover .ww-ws-ill img {
    transform: translateY(-8px);
}


.ww-ws-card:hover .ww-ws-ill::after {
    opacity: 0.7;

    transform: translateX(-50%) scale(0.8);
}


@media (prefers-reduced-motion: reduce) {

    .ww-ws-ill img,
    .ww-ws-ill::after {
        transition: none;
    }

}


@media (max-width: 767px) {

    .ww-ws-ill {
        height: 148px;
    }


    .ww-ws-ill img {
        height: 136px;
    }

}



/* =========================================================
   18. HOME DOORS — title only (no description)
   Shorter doors, a big title at the bottom, and a thin inner
   "moulding" line so the door still feels detailed.
========================================================= */

.ww-door {
    height: 360px;
}


.ww-door-panel {
    justify-content: flex-end;

    padding: 30px 28px 28px;
}


/* thin inner arch, like a door moulding */
.ww-door-panel::before {
    content: "";

    position: absolute;

    inset: 14px;

    border: 2px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px 999px 12px 12px;

    pointer-events: none;
}


.ww-door.is-black .ww-door-panel::before {
    border-color: rgba(255, 255, 255, 0.28);
}


/* knob sits above the title now */
.ww-door-panel::after {
    top: 42%;
}


.ww-door-title {
    position: relative;

    margin-bottom: 20px;

    font-size: clamp(2rem, 2.8vw, 2.7rem);
}


.ww-door .ww-arrow {
    position: relative;

    margin-top: 0;
}


@media (max-width: 1199.98px) {

    .ww-door {
        height: 320px;
    }

}


@media (max-width: 767px) {

    .ww-door {
        height: 250px;
    }


    .ww-door-panel {
        padding: 20px 16px 16px;
    }


    .ww-door-panel::before {
        inset: 9px;
    }


    .ww-door-title {
        margin-bottom: 14px;

        font-size: 1.5rem;
    }

}



/* ---------- Team: five name tags in one row ---------- */

.ww-nametags {
    grid-template-columns: repeat(5, minmax(0, 1fr));

    max-width: 1180px;
}


@media (max-width: 991.98px) {

    .ww-nametags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 767px) {

    .ww-nametags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* Huck, the fifth tag, sits centred on its own row */
    .ww-nametag:last-child:nth-child(odd) {
        grid-column: 1 / -1;

        justify-self: center;

        width: calc(50% - 7px);
    }

}


/* =========================================================
   19. MY ACCOUNT
   Shell (sidebar + page head) and overview cards. Shared by
   every account page.
========================================================= */

.ww-acct {
    padding-top: 48px;
}


.ww-acct-layout {
    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    gap: 40px;

    align-items: start;
}


/* ---------- Sidebar ---------- */

.ww-acct-side {
    position: sticky;

    top: 110px;

    display: grid;

    gap: 18px;

    padding: 22px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-sage-tint);
}


.ww-acct-who {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 18px;

    border-bottom: 2px dashed rgba(0, 0, 0, 0.25);
}


.ww-acct-me {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    overflow: hidden;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-orange);

    font-family: var(--ww-display);

    font-size: 22px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-acct-me img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ww-acct-who-text {
    display: grid;

    min-width: 0;
}


.ww-acct-who-text strong {
    font-size: 16px;

    color: var(--ww-black);
}


.ww-acct-who-text span {
    overflow: hidden;

    font-size: 13px;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--ww-text);
}


.ww-acct-nav {
    display: grid;

    gap: 6px;
}


.ww-acct-nav a {
    padding: 11px 16px;

    border: 2px solid transparent;
    border-radius: var(--ww-r-sm);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    color: var(--ww-black);

    transition: background-color 150ms ease, border-color 150ms ease;
}


.ww-acct-nav a:hover {
    background: var(--ww-white);

    color: var(--ww-black);
}


.ww-acct-nav a.is-active {
    border-color: var(--ww-black);

    background: var(--ww-sage);
}


.ww-acct-signout {
    margin: 0;
}


.ww-acct-signout button {
    width: 100%;

    padding: 10px 16px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-family: var(--ww-body);

    font-size: 14px;

    font-weight: 600;

    color: var(--ww-black);

    cursor: pointer;
}


.ww-acct-signout button:hover {
    background: var(--ww-pink);
}


/* ---------- Page head ---------- */

.ww-acct-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.ww-acct-title {
    margin: 0;

    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
}


.ww-acct-sub p {
    margin: 8px 0 0;

    font-size: 18px;

    color: var(--ww-text);
}


.ww-acct-actions:empty {
    display: none;
}


.ww-acct-messages {
    display: grid;

    gap: 8px;

    margin-bottom: 20px;
}


.ww-acct-messages p {
    margin: 0;

    padding: 14px 18px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-sage-tint);

    font-weight: 600;

    color: var(--ww-black);
}


.ww-acct-messages p.is-error,
.ww-acct-messages p.is-warning {
    background: var(--ww-pink-tint);
}


.ww-acct-body {
    display: grid;

    gap: 24px;
}


/* ---------- Needs-attention strips ---------- */

.ww-acct-alerts {
    display: grid;

    gap: 12px;
}


.ww-acct-alert {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 22px;

    border: var(--ww-line);
    border-radius: var(--ww-r-md);
}


.ww-acct-alert.is-orange { background: var(--ww-orange); }
.ww-acct-alert.is-sage   { background: var(--ww-sage); }
.ww-acct-alert.is-pink   { background: var(--ww-pink); }


.ww-acct-alert p {
    margin: 0;

    font-size: 16px;

    line-height: 1.5;

    color: var(--ww-black);
}


.ww-acct-alert .ww-btn {
    flex: 0 0 auto;

    min-height: 46px;

    padding: 10px 22px;
}


/* ---------- Cards ---------- */

.ww-acct-card {
    padding: 28px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-acct-card-head {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;
}


.ww-acct-card-head .ww-h3 {
    margin: 0;
}


.ww-acct-link {
    font-size: 15px;

    font-weight: 700;

    color: var(--ww-black);

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


.ww-acct-cols {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
}


.ww-acct-muted {
    margin: 0;

    color: var(--ww-text);
}


/* ---------- Rows (orders, children, bookings) ---------- */

.ww-acct-list {
    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-acct-list > li + li,
.ww-acct-bookings > * + * {
    border-top: 2px dashed rgba(0, 0, 0, 0.2);
}


.ww-acct-row {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 4px;

    text-decoration: none;

    color: var(--ww-black);
}


a.ww-acct-row {
    border-radius: var(--ww-r-sm);

    transition: background-color 150ms ease;
}


a.ww-acct-row:hover {
    background: var(--ww-sage-tint);

    color: var(--ww-black);
}


.ww-acct-row-main {
    display: grid;

    flex: 1 1 auto;

    min-width: 0;
}


.ww-acct-row-main strong {
    font-size: 16px;
}


.ww-acct-row-main small {
    font-size: 14px;

    color: var(--ww-text);
}


.ww-acct-row-end {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 auto;
}


.ww-acct-row-end strong {
    font-family: var(--ww-display);

    font-size: 19px;

    font-weight: 800;
}


/* Status pill: tone names from the view (success, warning, …) */
.ww-acct-badge {
    padding: 4px 12px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


.ww-acct-badge.is-success,
.ww-acct-badge.is-paid,
.ww-acct-badge.is-green     { background: var(--ww-sage); }

.ww-acct-badge.is-warning,
.ww-acct-badge.is-pending,
.ww-acct-badge.is-orange    { background: var(--ww-orange); }

.ww-acct-badge.is-danger,
.ww-acct-badge.is-error,
.ww-acct-badge.is-cancelled,
.ww-acct-badge.is-pink      { background: var(--ww-pink); }

.ww-acct-badge.is-muted,
.ww-acct-badge.is-neutral   { background: #f1f1f1; }


.ww-acct-avatar {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    font-family: var(--ww-display);

    font-size: 19px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-acct-avatar.is-sage   { background: var(--ww-sage); }
.ww-acct-avatar.is-orange { background: var(--ww-orange); }
.ww-acct-avatar.is-pink   { background: var(--ww-pink); }


/* ---------- Empty state ---------- */

.ww-acct-empty p {
    margin: 0 0 16px;

    color: var(--ww-text);
}


.ww-acct-empty-links {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.ww-acct-chip {
    padding: 12px 20px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    font-weight: 700;

    text-decoration: none;

    color: var(--ww-black);

    transition: transform 150ms var(--ww-ease);
}


.ww-acct-chip:hover {
    transform: translateY(-2px);

    color: var(--ww-black);
}


.ww-acct-chip.is-sage   { background: var(--ww-sage); }
.ww-acct-chip.is-orange { background: var(--ww-orange); }
.ww-acct-chip.is-pink   { background: var(--ww-pink); }


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .ww-acct-cols {
        grid-template-columns: minmax(0, 1fr);
    }


    /* sidebar becomes a top bar: who + sign out, then a pill menu */
    .ww-acct-layout {
        grid-template-columns: minmax(0, 1fr);

        gap: 24px;
    }


    .ww-acct-side {
        position: static;

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: center;

        padding: 16px;
    }


    .ww-acct-who {
        padding-bottom: 0;

        border-bottom: 0;
    }


    .ww-acct-signout {
        grid-column: 2;
        grid-row: 1;
    }


    .ww-acct-signout button {
        width: auto;
    }


    .ww-acct-nav {
        grid-column: 1 / -1;

        display: flex;

        gap: 6px;

        overflow-x: auto;

        padding-top: 14px;

        border-top: 2px dashed rgba(0, 0, 0, 0.25);
    }


    .ww-acct-nav a {
        flex: 0 0 auto;

        padding: 9px 14px;

        border: var(--ww-line-thin);
        border-radius: 999px;

        background: var(--ww-white);

        font-size: 14px;

        white-space: nowrap;
    }

}


@media (max-width: 767px) {

    .ww-acct {
        padding-top: 32px;
    }


    .ww-acct-head {
        flex-direction: column;

        align-items: flex-start;
    }


    .ww-acct-alert {
        flex-direction: column;

        align-items: flex-start;
    }


    .ww-acct-card {
        padding: 22px 18px;

        border-radius: var(--ww-r-md);
    }


    .ww-acct-row-end {
        flex-direction: column;

        align-items: flex-end;

        gap: 4px;
    }

}


/* ---------- Account: tables (orders, bookings…) ---------- */

.ww-acct-card.is-flush {
    padding: 0;

    overflow: hidden;
}


.ww-acct-empty.is-padded {
    padding: 28px;
}


.ww-acct-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 15px;

    color: var(--ww-black);
}


.ww-acct-table thead th {
    padding: 16px 18px;

    border-bottom: var(--ww-line);

    background: var(--ww-sage-tint);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-align: left;

    text-transform: uppercase;
}


.ww-acct-table td {
    padding: 16px 18px;

    vertical-align: middle;
}


.ww-acct-table tbody tr + tr td {
    border-top: 2px dashed rgba(0, 0, 0, 0.18);
}


.ww-acct-table tbody tr:hover td {
    background: #fafafa;
}


.ww-acct-table .is-number {
    text-align: right;

    white-space: nowrap;
}


.ww-acct-table td.is-number strong {
    font-family: var(--ww-display);

    font-size: 18px;

    font-weight: 800;
}


.ww-acct-table .is-action {
    text-align: right;

    white-space: nowrap;
}


.ww-acct-table .is-action .ww-btn {
    min-height: 40px;

    padding: 8px 16px;

    font-size: 14px;
}


.ww-acct-items span {
    display: block;

    font-size: 14px;

    line-height: 1.45;
}


/* phones: each row becomes a small card, labels on the left */
@media (max-width: 767px) {

    .ww-acct-table thead {
        position: absolute;

        width: 1px;
        height: 1px;

        overflow: hidden;

        clip: rect(0, 0, 0, 0);
    }


    .ww-acct-table,
    .ww-acct-table tbody,
    .ww-acct-table tr,
    .ww-acct-table td {
        display: block;
    }


    .ww-acct-table tbody tr {
        padding: 14px 18px;
    }


    .ww-acct-table tbody tr + tr {
        border-top: 2px dashed rgba(0, 0, 0, 0.2);
    }


    .ww-acct-table tbody tr + tr td {
        border-top: 0;
    }


    .ww-acct-table td {
        display: flex;

        justify-content: space-between;
        align-items: baseline;

        gap: 16px;

        padding: 6px 0;

        text-align: right;
    }


    .ww-acct-table td[data-label]::before {
        content: attr(data-label);

        flex: 0 0 auto;

        font-size: 13px;

        font-weight: 700;

        color: var(--ww-text);

        text-align: left;
    }


    /* label on the left, item names stacked on the right */
    .ww-acct-table td.ww-acct-items {
        display: grid;

        grid-template-columns: auto minmax(0, 1fr);

        gap: 2px 16px;
    }


    .ww-acct-table td.ww-acct-items::before {
        grid-column: 1;
        grid-row: 1;
    }


    .ww-acct-items span {
        grid-column: 2;

        text-align: right;
    }


    .ww-acct-table .is-action {
        padding-top: 10px;
    }


    .ww-acct-table .is-action .ww-btn {
        width: 100%;
    }


    .ww-acct-table tbody tr:hover td {
        background: none;
    }

}


/* ---------- Account: order receipt ---------- */

.ww-acct-head-actions {
    display: flex;

    align-items: center;

    gap: 16px;
}


.ww-acct-head-actions .ww-btn {
    min-height: 44px;

    padding: 10px 20px;

    font-size: 15px;
}


.ww-receipt {
    position: relative;

    max-width: 760px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-receipt-head {
    display: flex;

    justify-content: space-between;

    gap: 24px;

    padding: 28px 30px;
}


.ww-receipt-head > div {
    display: grid;

    gap: 2px;
}


.ww-receipt-head strong {
    font-size: 17px;

    color: var(--ww-black);
}


.ww-receipt-head span {
    color: var(--ww-text);
}


.ww-receipt-status {
    justify-items: end;
}


.ww-receipt-label {
    margin-bottom: 4px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--ww-text);
}


/* dashed tear line with punched notches on both edges */
.ww-receipt-cut {
    position: relative;

    height: 0;

    margin: 0 22px;

    border-top: 2px dashed var(--ww-black);
}


.ww-receipt-cut::before,
.ww-receipt-cut::after {
    content: "";

    position: absolute;

    top: -14px;

    width: 26px;
    height: 26px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);
}


.ww-receipt-cut::before {
    left: -38px;

    clip-path: inset(0 0 0 50%);
}


.ww-receipt-cut::after {
    right: -38px;

    clip-path: inset(0 50% 0 0);
}


.ww-receipt-table thead th {
    border-bottom: 2px solid var(--ww-black);

    background: none;
}


.ww-receipt-table th:first-child,
.ww-receipt-table td:first-child {
    padding-left: 30px;
}


.ww-receipt-table th:last-child,
.ww-receipt-table td:last-child {
    padding-right: 30px;
}


.ww-receipt-totals {
    display: grid;

    gap: 8px;

    margin: 0;

    padding: 22px 30px 8px;
}


.ww-receipt-totals div {
    display: flex;

    justify-content: space-between;

    gap: 16px;
}


.ww-receipt-totals dt {
    font-weight: 500;

    color: var(--ww-text);
}


.ww-receipt-totals dd {
    margin: 0;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-receipt-totals .is-total {
    margin-top: 6px;

    padding-top: 12px;

    border-top: 2px solid var(--ww-black);
}


.ww-receipt-totals .is-total dt,
.ww-receipt-totals .is-total dd {
    font-family: var(--ww-display);

    font-size: 26px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-receipt-totals small {
    font-family: var(--ww-body);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    color: var(--ww-text);
}


.ww-receipt-foot {
    margin: 0;

    padding: 14px 30px 24px;

    font-size: 13px;

    color: var(--ww-text);
}


@media (max-width: 767px) {

    .ww-acct-head-actions {
        width: 100%;

        justify-content: space-between;
    }


    .ww-receipt-head {
        flex-direction: column;

        gap: 16px;

        padding: 22px 20px;
    }


    .ww-receipt-status {
        justify-items: start;
    }


    .ww-receipt-cut {
        margin: 0 14px;
    }


    .ww-receipt-cut::before { left: -30px; }
    .ww-receipt-cut::after  { right: -30px; }


    .ww-receipt-table th:first-child,
    .ww-receipt-table td:first-child,
    .ww-receipt-table th:last-child,
    .ww-receipt-table td:last-child {
        padding-left: 0;
        padding-right: 0;
    }


    .ww-receipt-table tbody tr {
        padding: 12px 20px;
    }


    .ww-receipt-totals,
    .ww-receipt-foot {
        padding-left: 20px;
        padding-right: 20px;
    }

}


/* ---------- Printing a receipt: only the receipt ---------- */

@media print {

    .ww-header,
    .ww-footer,
    .ww-footer-invite,
    .ww-acct-side,
    .ww-acct-actions,
    .ww-acct-alerts,
    .ww-acct-messages {
        display: none !important;
    }


    .ww-acct,
    .ww-section {
        padding: 0 !important;
    }


    .ww-acct-layout {
        display: block;
    }


    .ww-receipt {
        max-width: none;

        break-inside: avoid;
    }


    .ww-acct-title {
        font-size: 28px;
    }

}


/* ---------- Account: Family & profile ---------- */

.ww-fam {
    scroll-margin-top: 100px;
}


.ww-fam .ww-acct-card-head {
    justify-content: flex-start;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
}


.ww-fam-count {
    display: grid;

    place-items: center;

    min-width: 30px;
    height: 30px;

    padding: 0 8px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-sage);

    font-size: 14px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-fam-note {
    margin: 0 0 18px;

    font-size: 15px;

    color: var(--ww-text);
}


.ww-fam-form {
    display: grid;

    gap: 20px;
}


/* photo row */
.ww-fam-photo-row {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-md);

    background: var(--ww-sage-tint);
}


.ww-acct-me.is-big {
    width: 64px;
    height: 64px;

    font-size: 26px;
}


.ww-fam-photo-note {
    display: grid;

    gap: 2px;

    margin: 0;
}


.ww-fam-photo-note strong {
    font-size: 17px;

    color: var(--ww-black);
}


.ww-fam-photo-note small {
    font-size: 14px;

    color: var(--ww-text);
}


.ww-fam-static {
    display: grid;

    gap: 2px;

    margin: 0;

    padding: 12px 16px;

    border: 2px dashed rgba(0, 0, 0, 0.3);
    border-radius: var(--ww-r-sm);

    font-weight: 600;

    color: var(--ww-black);
}


.ww-fam-static small {
    font-size: 13px;

    font-weight: 500;

    color: var(--ww-text);
}


.ww-fam-fieldset {
    min-width: 0;

    margin: 0;

    padding: 0;

    border: 0;
}


.ww-fam-legend {
    float: none;

    width: auto;

    margin: 0 0 12px;

    padding: 0;

    font-family: var(--ww-display);

    font-size: 19px;

    font-weight: 800;

    color: var(--ww-black);
}


/* state + ZIP side by side in one grid cell */
.ww-fam-pair {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 14px;
}


.ww-fam-actions {
    display: flex;

    justify-content: flex-end;
}


/* people lists (children, contacts) */
.ww-fam-people {
    margin: 0 0 14px;

    padding: 0;

    list-style: none;
}


.ww-fam-person {
    position: relative;

    padding: 14px 0;
}


.ww-fam-person + .ww-fam-person {
    border-top: 2px dashed rgba(0, 0, 0, 0.2);
}


.ww-fam-summary {
    display: flex;

    align-items: center;

    gap: 14px;

    padding-right: 90px;
}


.ww-fam-summary strong {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}


.ww-acct-avatar.is-white {
    background: var(--ww-white);
}


.ww-fam-empty {
    margin: 0 0 16px;
}


/* "Edit" pill sits on the right of each person; the form opens below */
.ww-fam-editor > summary {
    list-style: none;

    cursor: pointer;
}


.ww-fam-editor > summary::-webkit-details-marker {
    display: none;
}


.ww-fam-person > .ww-fam-editor > summary {
    position: absolute;

    right: 0;
    top: 20px;

    padding: 6px 16px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-size: 14px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-fam-person > .ww-fam-editor > summary:hover,
.ww-fam-person > .ww-fam-editor[open] > summary {
    background: var(--ww-sage);
}


.ww-fam-person > .ww-fam-editor[open] > summary::after {
    content: " ✕";
}


.ww-fam-editor > form,
.ww-fam-editor > .ww-fam-delete {
    margin-top: 16px;
}


.ww-fam-person > .ww-fam-editor[open] {
    padding: 18px;

    margin-top: 14px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-md);

    background: #fafafa;
}


.ww-fam-person > .ww-fam-editor[open] > form:first-of-type {
    margin-top: 0;
}


/* "Add a child" / "Add an emergency contact" */
.ww-fam-editor.is-add {
    margin-top: 8px;
}


.ww-fam-editor.is-add > summary {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border: 2px dashed var(--ww-black);
    border-radius: 999px;

    font-size: 15px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-fam-editor.is-add > summary::before {
    content: "+";

    font-size: 20px;

    line-height: 1;
}


.ww-fam-editor.is-add > summary:hover {
    background: var(--ww-orange-tint);
}


.ww-fam-editor.is-add[open] > summary {
    border-style: solid;

    background: var(--ww-orange);
}


.ww-fam-editor.is-add[open] > form {
    padding: 18px;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-md);

    background: var(--ww-orange-tint);
}


.ww-fam-check {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 600;

    color: var(--ww-black);

    cursor: pointer;
}


.ww-fam-check input {
    width: 22px;
    height: 22px;

    margin: 0;

    accent-color: var(--ww-black);
}


.ww-fam-delete {
    display: flex;

    justify-content: flex-end;
}


.ww-fam-danger {
    padding: 0;

    border: 0;

    background: none;

    font-family: var(--ww-body);

    font-size: 14px;

    font-weight: 700;

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;

    color: #b3261e;

    cursor: pointer;
}


@media (max-width: 767px) {

    .ww-fam-pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }


    .ww-fam-actions .ww-btn {
        width: 100%;
    }


    .ww-fam-summary {
        padding-right: 76px;
    }

}


/* Family page wraps its cards in one <div data-open-editor> */
.ww-acct-body > [data-open-editor] {
    display: grid;

    gap: 24px;
}


/* ---------- Account: bookings ---------- */

.ww-acct-card-head.is-left {
    justify-content: flex-start;

    align-items: center;

    gap: 10px;
}


.ww-acct-card-head .ww-btn {
    min-height: 44px;

    padding: 10px 20px;

    font-size: 15px;
}


.ww-acct-card.is-cart {
    background: var(--ww-orange-tint);
}


.ww-fam-count.is-grey {
    background: #f1f1f1;
}


/* filter pills */
.ww-acct-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.ww-acct-filter a {
    padding: 8px 18px;

    border: var(--ww-line-thin);
    border-radius: 999px;

    background: var(--ww-white);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    color: var(--ww-black);
}


.ww-acct-filter a:hover {
    background: var(--ww-sage-tint);

    color: var(--ww-black);
}


.ww-acct-filter a.is-active {
    background: var(--ww-black);

    color: var(--ww-white);
}


/* one booking row */
.ww-booking {
    display: grid;

    grid-template-columns: 64px minmax(0, 1fr) auto;

    gap: 18px;

    align-items: center;

    padding: 16px 0;
}


.ww-booking-date {
    display: grid;

    overflow: hidden;

    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);

    background: var(--ww-white);

    text-align: center;
}


.ww-booking-date span {
    padding: 3px 0;

    border-bottom: var(--ww-line-thin);

    background: var(--ww-orange);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--ww-black);
}


.ww-booking-date strong {
    padding: 4px 0 6px;

    font-family: var(--ww-display);

    font-size: 26px;

    font-weight: 800;

    line-height: 1.1;

    color: var(--ww-black);
}


.ww-booking-date.is-empty span {
    background: #f1f1f1;
}


.ww-booking-main {
    display: grid;

    gap: 3px;

    min-width: 0;
}


.ww-booking-main p {
    margin: 0;
}


.ww-booking-title {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}


.ww-booking-title strong {
    font-size: 17px;

    color: var(--ww-black);
}


.ww-booking-type {
    padding: 2px 10px;

    border-radius: 999px;

    background: var(--ww-sage-tint);

    font-size: 12px;

    font-weight: 700;

    color: var(--ww-black);
}


.ww-booking-meta {
    font-size: 15px;

    color: var(--ww-black);
}


.ww-booking-detail {
    font-size: 14px;

    color: var(--ww-text);
}


.ww-booking-end {
    display: grid;

    justify-items: end;

    gap: 6px;
}


.ww-booking-price {
    font-family: var(--ww-display);

    font-size: 18px;

    font-weight: 800;

    color: var(--ww-black);
}


/* past + cancelled: softer */
.ww-acct-bookings.is-quiet .ww-booking-date span {
    background: #f1f1f1;
}


.ww-acct-bookings.is-quiet .ww-booking-title strong,
.ww-acct-bookings.is-quiet .ww-booking-meta,
.ww-acct-bookings.is-quiet .ww-booking-price {
    color: #555;
}


/* cancelled list folds away */
.ww-acct-fold > summary {
    display: flex;

    align-items: center;

    gap: 10px;

    list-style: none;

    cursor: pointer;
}


.ww-acct-fold > summary::-webkit-details-marker {
    display: none;
}


.ww-acct-fold > summary .ww-h3 {
    margin: 0;
}


.ww-acct-fold > summary::after {
    content: "";

    width: 10px;
    height: 10px;

    margin-left: auto;

    border-right: 3px solid var(--ww-black);
    border-bottom: 3px solid var(--ww-black);

    transform: rotate(45deg);

    transition: transform 200ms var(--ww-ease);
}


.ww-acct-fold[open] > summary::after {
    transform: rotate(-135deg);
}


.ww-acct-fold[open] > summary {
    margin-bottom: 10px;
}


@media (max-width: 767px) {

    .ww-booking {
        grid-template-columns: 56px minmax(0, 1fr);

        gap: 12px 14px;
    }


    .ww-booking-end {
        grid-column: 2;

        display: flex;

        justify-content: space-between;
        align-items: center;
    }


    .ww-acct-card-head {
        flex-wrap: wrap;
    }

}


/* ---------- Account: applications ---------- */

.ww-acct-head-btn {
    min-height: 46px;

    padding: 10px 22px;

    font-size: 15px;
}


.ww-app-card {
    display: grid;

    gap: 24px;
}


.ww-app-card-head {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;
}


.ww-app-card-head .ww-h3 {
    margin: 0 0 6px;
}


.ww-app-card-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin: 0;
}


.ww-app-card-meta span {
    padding: 3px 12px;

    border-radius: 999px;

    background: var(--ww-sage-tint);

    font-size: 13px;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-app-card-foot {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 16px;

    padding-top: 18px;

    border-top: 2px dashed rgba(0, 0, 0, 0.2);
}


.ww-app-card-foot .ww-btn {
    min-height: 46px;

    padding: 10px 22px;

    font-size: 15px;
}


/* progress tracker: dots joined by a line */
.ww-tracker {
    display: flex;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ww-tracker li {
    position: relative;

    flex: 1 1 0;

    display: grid;

    justify-items: center;

    gap: 8px;

    min-width: 0;

    text-align: center;
}


/* the line to the previous step */
.ww-tracker li + li::before {
    content: "";

    position: absolute;

    top: 13px;
    right: 50%;

    width: 100%;

    border-top: 3px dashed rgba(0, 0, 0, 0.25);
}


.ww-tracker-dot {
    position: relative;

    z-index: 1;

    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    border: var(--ww-line-thin);
    border-radius: 50%;

    background: var(--ww-white);

    font-size: 15px;

    font-weight: 800;

    color: var(--ww-black);
}


.ww-tracker-label {
    padding: 0 4px;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.3;

    color: var(--ww-text);
}


/* done */
.ww-tracker li:is(.is-done, .is-complete, .is-completed, .is-past) .ww-tracker-dot {
    background: var(--ww-sage);
}


.ww-tracker li:is(.is-done, .is-complete, .is-completed, .is-past) .ww-tracker-dot::after {
    content: "✓";
}


.ww-tracker li:is(.is-done, .is-complete, .is-completed, .is-past, .is-current, .is-active)::before {
    border-top-style: solid;
    border-top-color: var(--ww-black);
}


/* current */
.ww-tracker li:is(.is-current, .is-active) .ww-tracker-dot {
    width: 34px;
    height: 34px;

    margin-top: -2px;

    border-width: 3px;

    background: var(--ww-orange);
}


.ww-tracker li:is(.is-done, .is-complete, .is-completed, .is-past, .is-current, .is-active) .ww-tracker-label {
    color: var(--ww-black);
}


.ww-tracker li:is(.is-current, .is-active) .ww-tracker-label {
    font-weight: 800;
}


/* answers on the detail page */
.ww-answers {
    margin: 0;
}


.ww-answers > div {
    display: grid;

    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 24px;

    padding: 14px 0;
}


.ww-answers > div + div {
    border-top: 2px dashed rgba(0, 0, 0, 0.18);
}


.ww-answers dt {
    font-size: 15px;

    font-weight: 600;

    color: var(--ww-text);
}


.ww-answers dd {
    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: var(--ww-black);
}


.ww-acct-footnote {
    margin: 0;

    padding: 18px 22px;

    border: 2px dashed rgba(0, 0, 0, 0.3);
    border-radius: var(--ww-r-md);

    font-size: 15px;

    color: var(--ww-text);
}


.ww-acct-footnote a {
    font-weight: 700;

    color: var(--ww-black);
}


@media (max-width: 767px) {

    .ww-app-card-head,
    .ww-app-card-foot {
        flex-direction: column;

        align-items: flex-start;
    }


    .ww-app-card-foot .ww-btn {
        width: 100%;
    }


    /* tracker turns vertical on phones */
    .ww-tracker {
        flex-direction: column;

        gap: 16px;
    }


    .ww-tracker li {
        display: flex;

        align-items: center;

        gap: 12px;

        text-align: left;
    }


    .ww-tracker li + li::before {
        top: auto;
        bottom: 50%;
        left: 14px;
        right: auto;

        width: 0;
        height: calc(100% + 16px);

        border-top: 0;
        border-left: 3px dashed rgba(0, 0, 0, 0.25);
    }


    .ww-tracker li:is(.is-done, .is-complete, .is-completed, .is-past, .is-current, .is-active)::before {
        border-left-style: solid;
        border-left-color: var(--ww-black);
    }


    .ww-tracker li:is(.is-current, .is-active) .ww-tracker-dot {
        margin: 0 -2px;
    }


    .ww-tracker-label {
        font-size: 15px;
    }


    .ww-answers > div {
        grid-template-columns: minmax(0, 1fr);

        gap: 4px;
    }

}



/* =========================================================
   20. HOME — hero illustration under the headline
========================================================= */

.ww-hero-scene {
    max-width: 1000px;

    margin: 44px auto 0;

    overflow: hidden;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);

    /* rises in after the headline, before the doors */
    opacity: 0;

    transform: translateY(24px);

    animation: wwDoorIn 700ms var(--ww-ease) 1150ms forwards;
}


.ww-hero-scene img {
    display: block;

    width: 100%;
    height: auto;
}


@media (prefers-reduced-motion: reduce) {

    .ww-hero-scene {
        opacity: 1;

        transform: none;

        animation: none;
    }

}


@media (max-width: 767px) {

    .ww-hero-scene {
        margin-top: 30px;

        border-radius: var(--ww-r-md);
    }

}



/* =========================================================
   21. CAMPS — photos pinned to a washing line
   A thin sagging line with small coloured pegs. Each photo
   hangs at the height of the curve and sways very gently.
========================================================= */

.ww-line-section {
    padding: 24px 0 72px;

    overflow: hidden;
}


.ww-line {
    position: relative;

    max-width: 1320px;

    margin: 0 auto;

    padding: 0 24px;
}


.ww-line-string {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 80px;

    overflow: visible;
}


.ww-line-string path {
    fill: none;

    stroke: var(--ww-black);
    stroke-width: 3;

    vector-effect: non-scaling-stroke;
}


.ww-line-photos {
    position: relative;

    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 18px;
}


.ww-line-photo {
    position: relative;

    flex: 0 1 auto;

    min-width: 0;

    margin: 0;

    padding-top: 14px;

    transform-origin: 50% 0;

    animation: wwSway 6s ease-in-out infinite;
}


.ww-line-photo[hidden] {
    display: none;
}


.ww-line-photo img {
    display: block;

    width: auto;
    max-width: 100%;
    height: 190px;

    object-fit: contain;
}


/* the peg */
.ww-line-photo::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    z-index: 1;

    width: 14px;
    height: 30px;

    border: var(--ww-line-thin);
    border-radius: 4px;

    background: var(--ww-orange);

    transform: translateX(-50%);
}


/* each photo hangs where the line dips */
.ww-line-photo:nth-child(1) { margin-top: 18px; --tilt: -3deg; animation-delay: 0s; }
.ww-line-photo:nth-child(2) { margin-top: 42px; --tilt:  2deg; animation-delay: -1s; }
.ww-line-photo:nth-child(3) { margin-top: 54px; --tilt: -2deg; animation-delay: -2.4s; }
.ww-line-photo:nth-child(4) { margin-top: 54px; --tilt:  3deg; animation-delay: -3.1s; }
.ww-line-photo:nth-child(5) { margin-top: 42px; --tilt: -2deg; animation-delay: -4.2s; }
.ww-line-photo:nth-child(6) { margin-top: 18px; --tilt:  2deg; animation-delay: -5s; }

.ww-line-photo:nth-child(3n+2)::before { background: var(--ww-sage); }
.ww-line-photo:nth-child(3n)::before   { background: var(--ww-pink); }


@keyframes wwSway {
    0%, 100% { transform: rotate(var(--tilt, 0deg)); }
    50%      { transform: rotate(calc(var(--tilt, 0deg) * -0.4)); }
}


@media (prefers-reduced-motion: reduce) {

    .ww-line-photo {
        animation: none;

        transform: rotate(var(--tilt, 0deg));
    }

}


@media (max-width: 1199.98px) {

    .ww-line-photo img {
        height: 150px;
    }

}


/* phones: a straight line you can swipe along */
@media (max-width: 767px) {

    .ww-line-section {
        padding-bottom: 48px;
    }


    .ww-line {
        padding: 0;
    }


    .ww-line-string {
        display: none;
    }


    .ww-line-photos {
        justify-content: flex-start;

        gap: 16px;

        padding: 0 16px 12px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        border-top: 3px solid var(--ww-black);

        -webkit-overflow-scrolling: touch;
    }


    .ww-line-photo {
        flex: 0 0 auto;

        margin-top: 0 !important;

        scroll-snap-align: center;
    }


    .ww-line-photo::before {
        top: -3px;
    }


    .ww-line-photo img {
        height: 170px;
    }

}



/* =========================================================
   22. APPLICATION — "Your journey" intro + 3 steps
========================================================= */

.ww-journey {
    padding-top: 56px;
}


.ww-journey-title {
    margin: 0 0 18px;

    font-size: clamp(2.4rem, 5vw, 4.2rem);

    line-height: 1;
}


.ww-journey-intro {
    max-width: 860px;

    margin: 0 auto 72px;

    text-align: center;
}


.ww-journey-intro .ww-actions {
    justify-content: center;
}


.ww-journey-intro .ww-lead,
.ww-journey-intro .ww-text {
    max-width: 44em;

    margin-left: auto;
    margin-right: auto;
}


.ww-journey-intro .ww-h2 {
    margin-bottom: 16px;
}


.ww-journey-intro .ww-text {
    margin-top: 14px;

    color: var(--ww-black);
}


.ww-journey-intro .ww-actions {
    margin-top: 22px;
}


.ww-journey-steps {
    position: relative;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    margin: 36px 0 0;

    padding: 0;

    list-style: none;
}


/* dashed path joining the three steps */
.ww-journey-steps::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    border-top: 3px dashed var(--ww-black);
}


.ww-journey-step {
    position: relative;

    padding: 0 28px 30px;

    border: var(--ww-line);
    border-radius: var(--ww-r-lg);

    background: var(--ww-white);
}


.ww-journey-step.is-sage   { background: var(--ww-sage-tint); }
.ww-journey-step.is-orange { background: var(--ww-orange-tint); }
.ww-journey-step.is-pink   { background: var(--ww-pink-tint); }


.ww-journey-num {
    position: relative;

    display: grid;

    place-items: center;

    width: 68px;
    height: 68px;

    /* sits on the card's top edge, over the dashed path */
    margin: -36px 0 16px;

    border: var(--ww-line);
    border-radius: 50%;

    background: var(--ww-white);

    font-family: var(--ww-display);

    font-size: 30px;

    font-weight: 800;

    color: var(--ww-black);
}



.ww-journey-step.is-sage   .ww-journey-num { background: var(--ww-sage); }
.ww-journey-step.is-orange .ww-journey-num { background: var(--ww-orange); }
.ww-journey-step.is-pink   .ww-journey-num { background: var(--ww-pink); }


.ww-journey-step .ww-h3 {
    margin-bottom: 10px;
}


.ww-journey-step .ww-text {
    margin: 0;

    font-size: 16px;

    color: var(--ww-black);
}


@media (max-width: 991.98px) {

    .ww-journey-steps {
        grid-template-columns: minmax(0, 1fr);

        gap: 52px;
    }


    .ww-journey-steps::before {
        display: none;
    }

}
/* =========================================================
   23. GET IN TOUCH — contact form
========================================================= */

.ww-touch-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}

.ww-touch-copy .ww-h2 {
    margin-bottom: 14px;
}

.ww-touch-direct {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.ww-touch-direct li {
    display: grid;
    gap: 2px;
    padding-top: 14px;
    border-top: 2px dashed rgba(0, 0, 0, 0.2);
    font-size: 16px;
    color: var(--ww-black);
}

.ww-touch-direct span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-text);
}

.ww-touch-direct a {
    font-weight: 600;
    color: var(--ww-black);
    overflow-wrap: anywhere;
}

.ww-touch-card {
    padding: 32px;
    border: var(--ww-line);
    border-radius: var(--ww-r-lg);
    background: var(--ww-sage-tint);
}

.ww-touch-form {
    display: grid;
    gap: 20px;
}

/* honeypot: moved off-screen (not display:none — some bots check that) */
.ww-touch-trap {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ww-touch-note {
    margin-bottom: 18px;
    padding: 14px 18px;
    border: var(--ww-line-thin);
    border-radius: var(--ww-r-sm);
    background: var(--ww-sage);
    font-weight: 600;
    color: var(--ww-black);
}

.ww-touch-note.is-error {
    background: var(--ww-pink);
}

.ww-touch-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ww-touch-actions p {
    margin: 0;
    font-size: 14px;
    color: var(--ww-text);
}

.ww-touch-form .cf-turnstile {
    min-height: 65px;
}

@media (max-width: 991.98px) {
    .ww-touch-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 767px) {
    .ww-touch-card {
        padding: 22px 18px;
        border-radius: var(--ww-r-md);
    }

    .ww-touch-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ww-touch-actions .ww-btn {
        width: 100%;
    }
}