/* =========================================================
   WISDOM WAREHOUSE
   Site-specific refinements only.

   Main palette, typography, buttons, cards, navbar,
   Swiper and general theme styling remain in style.css.
========================================================= */


/* =========================================================
   TEMPLATE FIXES
========================================================= */

footer {
    height: auto;
}


/* =========================================================
   HOME HERO
========================================================= */

.wisdom-home-hero {
    position: relative;

    min-height: 500px;

    padding-top: 15rem;
    padding-bottom: 2rem;

    overflow: hidden;
}


/* =========================================================
   HERO INNER
========================================================= */

.wisdom-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1000px;

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

    text-align: center;
}


/* =========================================================
   HERO TITLE
========================================================= */

.wisdom-home-title {
    position: relative;

    margin: 0;

    font-size: clamp(3.5rem, 5.2vw, 5.2rem);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -0.025em;
}


/*
 * Each title line has its own reveal area.
 */

.wisdom-title-line {
    position: relative;

    display: block;

    padding: 0.08em 0 0.12em;

    overflow: hidden;
}


.wisdom-title-reveal {
    display: inline-block;

    opacity: 0;

    will-change:
        transform,
        filter,
        opacity,
        letter-spacing;
}


/* =========================================================
   FIRST TITLE LINE
   "Where Learning And"

   Starts from the left and settles toward the center.
========================================================= */

.wisdom-title-left {
    opacity: 0;

    transform:
        translate3d(-70px, 15px, 0) scale(0.97);

    filter: blur(7px);

    letter-spacing: -0.07em;

    animation:
        wisdomCollisionLeft 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}


/* =========================================================
   SECOND TITLE LINE
   "Creativity Collide"

   Starts from the right and meets the first line.
========================================================= */

.wisdom-title-line-accent {
    width: max-content;
    max-width: 100%;

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

    /*
     * The underline needs to extend outside the normal
     * text line.
     */
    overflow: visible;
}


.wisdom-title-right {
    opacity: 0;

    transform:
        translate3d(70px, 15px, 0) scale(0.97);

    filter: blur(7px);

    letter-spacing: -0.07em;

    animation:
        wisdomCollisionRight 1100ms cubic-bezier(0.16, 1, 0.3, 1) 230ms forwards;
}


/* =========================================================
   ORANGE HAND-DRAWN ACCENT

   Appears after both title lines settle.
========================================================= */

.wisdom-title-underline {
    position: absolute;

    left: 7%;
    right: 6%;
    bottom: -5px;

    height: 9px;

    opacity: 0;

    background:
        var(--accent-color-2);

    border-radius:
        100% 60% 100% 55%;

    transform:
        scaleX(0) rotate(-1.2deg);

    transform-origin: center center;

    clip-path:
        polygon(0 50%,
            9% 32%,
            19% 44%,
            31% 28%,
            45% 45%,
            58% 30%,
            72% 44%,
            85% 29%,
            100% 45%,
            100% 65%,
            85% 58%,
            72% 70%,
            58% 57%,
            44% 71%,
            30% 58%,
            15% 70%,
            0 61%);

    animation:
        wisdomImpactStroke 750ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards;
}


/* =========================================================
   SMALL BRAND MARK BELOW TITLE
========================================================= */

.wisdom-hero-mark {
    position: relative;

    display: flex;

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

    gap: 8px;

    margin-top: 30px;

    opacity: 0;

    transform:
        translateY(12px) scale(0.5);

    animation:
        wisdomImpactMark 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 1350ms forwards;
}


.wisdom-hero-mark span {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--accent-color);
}


.wisdom-hero-mark span:nth-child(2) {
    width: 10px;
    height: 10px;

    background:
        var(--accent-color-2);
}


/* =========================================================
   HERO DECORATIVE SHAPES
========================================================= */

.wisdom-hero-shape {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    border-radius: 50%;
}


/*
 * Large green outline on the left.
 */

.wisdom-hero-shape-left {
    width: 210px;
    height: 210px;

    left: -90px;
    top: 43%;

    opacity: 0;

    border:
        2px solid var(--accent-color);

    animation:
        wisdomShapeRevealLeft 1000ms cubic-bezier(0.16, 1, 0.3, 1) 650ms forwards,

        wisdomShapeFloatLeft 11s ease-in-out 1650ms infinite;
}


/*
 * Smaller orange outline on the right.
 */

.wisdom-hero-shape-right {
    width: 120px;
    height: 120px;

    right: 5%;
    top: 31%;

    opacity: 0;

    border:
        2px solid var(--accent-color-2);

    animation:
        wisdomShapeRevealRight 1000ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards,

        wisdomShapeFloatRight 13s ease-in-out 1800ms infinite;
}


/* =========================================================
   HERO TITLE ANIMATIONS
========================================================= */

@keyframes wisdomCollisionLeft {

    0% {
        opacity: 0;

        transform:
            translate3d(-70px, 15px, 0) scale(0.97);

        filter: blur(7px);

        letter-spacing: -0.07em;
    }


    55% {
        opacity: 1;

        filter: blur(0);
    }


    /*
     * Tiny overshoot creates the "collision".
     */

    82% {
        opacity: 1;

        transform:
            translate3d(4px, 0, 0) scale(1.006);

        filter: blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);

        filter: blur(0);

        letter-spacing: -0.025em;
    }

}


@keyframes wisdomCollisionRight {

    0% {
        opacity: 0;

        transform:
            translate3d(70px, 15px, 0) scale(0.97);

        filter: blur(7px);

        letter-spacing: -0.07em;
    }


    55% {
        opacity: 1;

        filter: blur(0);
    }


    /*
     * Opposite overshoot.
     */

    82% {
        opacity: 1;

        transform:
            translate3d(-4px, 0, 0) scale(1.006);

        filter: blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);

        filter: blur(0);

        letter-spacing: -0.025em;
    }

}


/* =========================================================
   UNDERLINE ANIMATION
========================================================= */

@keyframes wisdomImpactStroke {

    0% {
        opacity: 0;

        transform:
            scaleX(0) rotate(-1.2deg);
    }


    25% {
        opacity: 1;
    }


    /*
     * Slightly overshoots before settling.
     */

    70% {
        opacity: 1;

        transform:
            scaleX(1.04) rotate(-1.2deg);
    }


    100% {
        opacity: 0.85;

        transform:
            scaleX(1) rotate(-1.2deg);
    }

}


/* =========================================================
   BRAND MARK ANIMATION
========================================================= */

@keyframes wisdomImpactMark {

    0% {
        opacity: 0;

        transform:
            translateY(12px) scale(0.5);
    }


    65% {
        opacity: 1;

        transform:
            translateY(-2px) scale(1.12);
    }


    100% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }

}


/* =========================================================
   DECORATIVE SHAPE ENTRANCE
========================================================= */

@keyframes wisdomShapeRevealLeft {

    0% {
        opacity: 0;

        transform:
            translate3d(-20px, 8px, 0) scale(0.8);
    }


    100% {
        opacity: 0.18;

        transform:
            translate3d(0, 0, 0) scale(1);
    }

}


@keyframes wisdomShapeRevealRight {

    0% {
        opacity: 0;

        transform:
            translate3d(20px, -8px, 0) scale(0.8);
    }


    100% {
        opacity: 0.14;

        transform:
            translate3d(0, 0, 0) scale(1);
    }

}


/* =========================================================
   DECORATIVE SHAPE FLOAT

   Very slow on purpose.
========================================================= */

@keyframes wisdomShapeFloatLeft {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }


    50% {
        transform:
            translate3d(13px, -15px, 0);
    }

}


@keyframes wisdomShapeFloatRight {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }


    50% {
        transform:
            translate3d(-11px, 13px, 0);
    }

}


/* =========================================================
   PROGRAMS
========================================================= */

#programs {
    position: relative;
    z-index: 3;
}


/*
 * Keep the Playwize cards exactly as designed.
 * Only add a subtle interaction.
 */

#programs .swiper-slide {
    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    #programs .swiper-slide:hover {
        transform:
            translateY(-6px);
    }

}


/* =========================================================
   LOCATION MAP
========================================================= */

.wisdom-map-wrapper {
    width: 100%;
    height: 100%;

    min-height: 600px;

    overflow: hidden;

    border-radius: 14px;
}


.wisdom-map {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 600px;

    border: 0;
}


/* =========================================================
   SMALL DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .wisdom-home-hero {
        padding-top: 13rem;
        padding-bottom: 19rem;
    }


    .wisdom-map-wrapper,
    .wisdom-map {
        min-height: 500px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .wisdom-home-hero {
        min-height: auto;

        padding-top: 12rem;
        padding-bottom: 18rem;
    }


    .wisdom-hero-inner {
        max-width: 760px;
    }


    .wisdom-home-title {
        font-size:
            clamp(3.1rem,
                8vw,
                4.6rem);
    }


    .wisdom-hero-shape-left {
        width: 160px;
        height: 160px;

        left: -85px;
    }


    .wisdom-hero-shape-right {
        width: 105px;
        height: 105px;

        right: 1%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .wisdom-home-hero {
        padding-top: 10rem;
        padding-bottom: 16rem;
    }


    .wisdom-map-wrapper,
    .wisdom-map {
        min-height: 420px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .wisdom-home-hero {
        min-height: auto;

        padding-top: 9rem;
        padding-bottom: 15rem;
    }


    .wisdom-hero-inner {
        max-width: 100%;
    }


    .wisdom-home-title {
        font-size:
            clamp(2.7rem,
                13vw,
                3.7rem);

        line-height: 1.04;

        letter-spacing: -0.03em;
    }


    .wisdom-title-line {
        padding-bottom: 0.12em;
    }


    .wisdom-title-line-accent {
        width: auto;
    }


    /*
     * Smaller travel distance on phones.
     */

    .wisdom-title-left {
        transform:
            translate3d(-35px, 12px, 0) scale(0.98);
    }


    .wisdom-title-right {
        transform:
            translate3d(35px, 12px, 0) scale(0.98);
    }


    .wisdom-title-underline {
        left: 9%;
        right: 8%;
        bottom: 0;

        height: 6px;
    }


    .wisdom-hero-mark {
        margin-top: 22px;
    }


    .wisdom-hero-shape-left {
        width: 140px;
        height: 140px;

        left: -100px;
        top: 48%;
    }


    .wisdom-hero-shape-right {
        width: 90px;
        height: 90px;

        right: -40px;
        top: 28%;
    }

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    .wisdom-title-left,
    .wisdom-title-right,
    .wisdom-title-underline,
    .wisdom-hero-mark,
    .wisdom-hero-shape {
        animation: none !important;
    }


    .wisdom-title-left,
    .wisdom-title-right {
        opacity: 1;

        transform: none;

        filter: none;

        letter-spacing: -0.025em;
    }


    .wisdom-title-underline {
        opacity: 0.85;

        transform:
            scaleX(1) rotate(-1.2deg);
    }


    .wisdom-hero-mark {
        opacity: 1;

        transform: none;
    }


    .wisdom-hero-shape-left {
        opacity: 0.18;

        transform: none;
    }


    .wisdom-hero-shape-right {
        opacity: 0.14;

        transform: none;
    }


    #programs .swiper-slide {
        transition: none;
    }

}

/* =========================================================
   WISDOM STORY SECTION
========================================================= */

.wisdom-story-section {
    position: relative;

    padding-top: 6rem;
    padding-bottom: 7rem;

    overflow: hidden;
}


/* =========================================================
   THREE-CARD LAYOUT
========================================================= */

.wisdom-story-grid {
    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   STORY CARD
========================================================= */

.wisdom-story-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 700px;

    padding:
        34px 28px 26px;

    overflow: hidden;

    border-radius: 22px;

    transition:
        transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   EXISTING WISDOM / PLAYWIZE PALETTE
========================================================= */

.wisdom-story-card-green {
    background:
        var(--accent-color);
}


.wisdom-story-card-purple {
    background:
        var(--accent-color-3);
}


.wisdom-story-card-orange {
    background:
        var(--accent-color-2);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.wisdom-story-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    flex: 1;
}


/* =========================================================
   TITLE
========================================================= */

.wisdom-story-title {
    margin:
        0 0 20px;

    font-family:
        var(--font-1);

    font-size:
        clamp(1.8rem,
            2.1vw,
            2.35rem);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.025em;

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


/* =========================================================
   BODY
========================================================= */

.wisdom-story-text {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;

    color:
        var(--text-color);

    opacity: 0.9;
}


/* =========================================================
   IMAGE AREA
========================================================= */
.wisdom-story-image {
    position: relative;

    width: 100%;
    height: 255px;

    margin-top: auto;
    padding-top: 28px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: visible;

    background: transparent;
}

.wisdom-story-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;

    transition:
        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   SUBTLE CARD DETAIL

   Gives the cards a little depth without changing the
   Playwize graphic language.
========================================================= */

.wisdom-story-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -95px;
    top: -100px;

    border:

        2px solid rgba(255, 255, 255, 0.32);

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-story-card::after {
    content: "";

    position: absolute;

    width: 85px;
    height: 85px;

    right: -35px;
    top: -28px;

    border:

        2px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

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

    .wisdom-story-card:hover {
        transform:
            translateY(-8px);

        box-shadow:
            0 18px 40px rgba(11, 1, 24, 0.10);
    }


    .wisdom-story-card:hover .wisdom-story-image img {
        transform:
            scale(1.035);
    }

}


/* =========================================================
   MEDIUM DESKTOP / TABLET
========================================================= */

@media (max-width: 1199.98px) {

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


    .wisdom-story-card {
        min-height: 670px;
    }


    /*
     * Third card can use the full available width.
     */

    .wisdom-story-card:last-child {
        grid-column:
            1 / -1;
    }


    .wisdom-story-card:last-child .wisdom-story-image {
        height: 330px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 767.98px) {

    .wisdom-story-section {
        padding-top: 4rem;
        padding-bottom: 5rem;
    }


    .wisdom-story-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .wisdom-story-card,
    .wisdom-story-card:last-child {
        grid-column: auto;

        min-height: auto;

        padding:
            30px 24px 24px;
    }


    .wisdom-story-card:last-child .wisdom-story-image,
    .wisdom-story-image {
        height: 290px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .wisdom-story-card {
        padding:
            26px 20px 20px;

        border-radius: 18px;
    }


    .wisdom-story-title {
        margin-bottom: 16px;

        font-size: 1.8rem;
    }


    .wisdom-story-text {
        font-size: 15px;

        line-height: 1.7;
    }


    .wisdom-story-image,
    .wisdom-story-card:last-child .wisdom-story-image {
        height: 240px;

        margin-top: 24px;

        border-radius: 14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-story-card,
    .wisdom-story-image img {
        transition: none;
    }

}

/* =========================================================
   RIGHT FIT SECTION
========================================================= */

.wisdom-fit-section {
    position: relative;

    padding-top: 7rem;
    padding-bottom: 7rem;
}


/* =========================================================
   OUTER SHELL
========================================================= */

.wisdom-fit-shell {
    display: grid;

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

    gap: 80px;

    align-items: start;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.wisdom-fit-intro {
    position: sticky;

    top: 130px;
}


/* Small playful label */

.wisdom-fit-kicker {
    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.02em;

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


/* Main title */

.wisdom-fit-title {
    max-width: 620px;

    margin:
        0 0 28px;

    font-family:
        var(--font-1);

    font-size:
        clamp(2.8rem,
            4.4vw,
            4.5rem);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -0.035em;

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


/* Paragraphs */

.wisdom-fit-copy {
    max-width: 610px;
}


.wisdom-fit-copy p {
    margin:
        0 0 20px;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


.wisdom-fit-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.wisdom-fit-list {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background:
        var(--accent-color-4);

    padding:
        36px 36px 22px;
}


/* Soft decorative circle */

.wisdom-fit-list::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -115px;

    border:
        2px solid var(--accent-color-2);

    border-radius: 50%;

    opacity: 0.18;

    pointer-events: none;
}


/* =========================================================
   LIST HEADING
========================================================= */

.wisdom-fit-list-heading {
    position: relative;
    z-index: 1;

    max-width: 520px;

    margin-bottom: 22px;

    font-family:
        var(--font-1);

    font-size:
        clamp(1.65rem,
            2vw,
            2.15rem);

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.025em;

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


/* =========================================================
   INDIVIDUAL FIT ITEM
========================================================= */

.wisdom-fit-item {
    position: relative;

    display: grid;

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

    gap: 20px;

    align-items: start;

    padding:
        25px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.10);
}


/* Number */

.wisdom-fit-number {
    display: flex;

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

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 800;

    color:
        var(--text-color);

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* Statement */

.wisdom-fit-item p {
    margin: 0;

    padding-top: 7px;

    font-family:
        var(--font-3);

    font-size: 17px;

    font-weight: 500;

    line-height: 1.65;

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


/* =========================================================
   HOVER
========================================================= */

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

    .wisdom-fit-item:hover .wisdom-fit-number {
        transform:
            scale(1.08) rotate(-4deg);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .wisdom-fit-shell {
        grid-template-columns: 1fr;

        gap: 48px;
    }


    .wisdom-fit-intro {
        position: static;
    }


    .wisdom-fit-title {
        max-width: 760px;
    }


    .wisdom-fit-copy {
        max-width: 760px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .wisdom-fit-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }


    .wisdom-fit-list {
        padding:
            28px 24px 14px;

        border-radius: 20px;
    }


    .wisdom-fit-item {
        grid-template-columns:
            46px minmax(0, 1fr);

        gap: 16px;

        padding:
            22px 0;
    }


    .wisdom-fit-number {
        width: 42px;
        height: 42px;
    }


    .wisdom-fit-item p {
        padding-top: 5px;

        font-size: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .wisdom-fit-title {
        font-size:
            clamp(2.5rem,
                11vw,
                3.3rem);
    }


    .wisdom-fit-copy p {
        font-size: 16px;

        line-height: 1.75;
    }


    .wisdom-fit-list {
        padding:
            24px 20px 10px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-fit-number {
        transition: none;
    }

}

/* =========================================================
   EXPLORE PROGRAMS
========================================================= */

.wisdom-explore-section {
    position: relative;

    padding-top: 7rem;
    padding-bottom: 8rem;

    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.wisdom-explore-heading {
    max-width: 900px;

    margin:
        0 auto 54px;

    text-align: center;
}


.wisdom-explore-kicker {
    display: inline-flex;

    margin-bottom: 18px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.02em;

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


.wisdom-explore-title {
    margin: 0;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -0.04em;

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


/* =========================================================
   GRID
========================================================= */

.wisdom-explore-grid {
    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PROGRAM TILE
========================================================= */

.wisdom-program-tile {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 390px;

    padding:
        28px 26px 26px;

    overflow: hidden;

    border-radius: 22px;

    text-decoration: none;

    color:
        var(--text-color);

    /*
     * IMPORTANT:
     * Visible by default.
     *
     * If JS ever fails, the cards still appear.
     */
    opacity: 1;

    transform: none;

    transition:
        transform 400ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   CARD COLORS
========================================================= */

.wisdom-program-tile-green {
    background:
        var(--accent-color);
}


.wisdom-program-tile-purple {
    background:
        var(--accent-color-3);
}


.wisdom-program-tile-orange {
    background:
        var(--accent-color-2);
}


.wisdom-program-tile-sage-green {
    background:
        var(--accent-color-1);
}


/* =========================================================
   LARGE DECORATIVE CIRCLE
========================================================= */

.wisdom-program-tile::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -95px;
    bottom: -100px;

    border:
        2px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    pointer-events: none;

    transition:
        transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* Small second decorative circle */

.wisdom-program-tile::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -30px;
    bottom: -35px;

    border:
        2px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.wisdom-program-icon {
    position: relative;
    z-index: 2;

    display: flex;

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

    width: 56px;
    height: 56px;

    margin-bottom: 38px;

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.58);

    font-size: 23px;

    color:
        var(--text-color);

    transition:
        transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   CONTENT
========================================================= */

.wisdom-program-content {
    position: relative;
    z-index: 2;

    flex: 1;
}


.wisdom-program-index {
    display: block;

    margin-bottom: 9px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.12em;

    color:
        var(--text-color);

    opacity: 0.5;
}


.wisdom-program-content h3 {
    margin:
        0 0 16px;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.025em;

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


.wisdom-program-content p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 15px;

    line-height: 1.65;

    color:
        var(--text-color);

    opacity: 0.82;
}


/* =========================================================
   ARROW
========================================================= */

.wisdom-program-arrow {
    position: relative;
    z-index: 2;

    display: flex;

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

    width: 46px;
    height: 46px;

    margin-top: 28px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.62);

    font-size: 16px;

    color:
        var(--text-color);

    transition:
        transform 350ms cubic-bezier(0.16, 1, 0.3, 1),

        background 350ms ease;
}


/* =========================================================
   ANIMATION-ENABLED STATE

   Cards only become hidden when JavaScript has explicitly
   told the page that animation support is running.
========================================================= */

.program-animation-ready .wisdom-program-tile {
    opacity: 0;

    transform:
        translateY(46px) scale(0.965);
}


/*
 * Once observed, reveal it.
 */

.program-animation-ready .wisdom-program-tile.is-visible {
    animation:
        wisdomProgramReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* Stagger */

.program-animation-ready .wisdom-program-tile:nth-child(1).is-visible {
    animation-delay: 0ms;
}


.program-animation-ready .wisdom-program-tile:nth-child(2).is-visible {
    animation-delay: 100ms;
}


.program-animation-ready .wisdom-program-tile:nth-child(3).is-visible {
    animation-delay: 200ms;
}


.program-animation-ready .wisdom-program-tile:nth-child(4).is-visible {
    animation-delay: 300ms;
}


/* =========================================================
   REVEAL
========================================================= */

@keyframes wisdomProgramReveal {

    0% {
        opacity: 0;

        transform:
            translateY(46px) scale(0.965);
    }


    70% {
        opacity: 1;

        transform:
            translateY(-5px) scale(1.006);
    }


    100% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }

}


/* =========================================================
   HOVER
========================================================= */

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

    .wisdom-program-tile:hover {
        transform:
            translateY(-8px);

        box-shadow:
            0 20px 45px rgba(11, 1, 24, 0.10);
    }


    .wisdom-program-tile:hover::before {
        transform:
            scale(1.12) translate(-6px, -6px);
    }


    .wisdom-program-tile:hover .wisdom-program-icon {
        transform:
            translateY(-4px) rotate(-3deg);
    }


    .wisdom-program-tile:hover .wisdom-program-arrow {
        transform:
            translateX(5px);
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

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


    .wisdom-program-tile {
        min-height: 350px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .wisdom-explore-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }


    .wisdom-explore-heading {
        margin-bottom: 38px;
    }


    .wisdom-explore-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .wisdom-program-tile {
        min-height: auto;

        padding:
            26px 22px 22px;
    }


    .wisdom-program-icon {
        margin-bottom: 28px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .program-animation-ready .wisdom-program-tile,

    .program-animation-ready .wisdom-program-tile.is-visible {
        opacity: 1;

        transform: none;

        animation: none;
    }


    .wisdom-program-tile,
    .wisdom-program-icon,
    .wisdom-program-arrow,
    .wisdom-program-tile::before {
        transition: none;
    }

}

/* =========================================================
   SCHOOLING PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.wisdom-school-hero {
    position: relative;

    min-height: 500px;

    padding-top: 15rem;
    padding-bottom: 2rem;

    overflow: hidden;
}


.wisdom-school-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr) minmax(420px, 0.95fr);

    gap: 80px;

    align-items: center;
}


/* =========================================================
   HERO COPY
========================================================= */

.wisdom-school-hero-copy {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


.wisdom-school-kicker {
    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

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


.wisdom-school-title {
    margin:
        0 0 28px;

    font-family:
        var(--font-1);

    font-size:
        clamp(3.3rem,
            5vw,
            5.25rem);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -0.045em;

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


.wisdom-school-lead {
    max-width: 690px;

    margin:
        0 0 38px;

    font-family:
        var(--font-3);

    font-size: 18px;

    line-height: 1.8;

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


/* =========================================================
   HERO FACTS
========================================================= */

.wisdom-school-facts {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.wisdom-school-fact {
    display: flex;

    flex-direction: column;

    min-width: 135px;

    padding:
        16px 18px;

    border-radius: 16px;

    background:
        var(--accent-color-4);
}


.wisdom-school-fact-label {
    margin-bottom: 3px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.55;
}


.wisdom-school-fact strong {
    font-family:
        var(--font-1);

    font-size: 18px;

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


/* =========================================================
   HERO IMAGE
========================================================= */

.wisdom-school-hero-visual {
    position: relative;

    padding:
        18px 18px 54px 54px;
}


.wisdom-school-hero-visual::before {
    content: "";

    position: absolute;

    width: 72%;

    height: 78%;

    left: 0;
    bottom: 0;

    border-radius: 28px;

    background:
        var(--accent-color);

    opacity: 0.7;
}


.wisdom-school-image-frame {
    position: relative;
    z-index: 2;

    height: 520px;

    overflow: hidden;

    border-radius: 26px;
}


.wisdom-school-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   FLOATING CARD
========================================================= */

.wisdom-school-floating-card {
    position: absolute;

    z-index: 3;

    left: 5px;
    bottom: 22px;

    display: flex;

    flex-direction: column;

    max-width: 270px;

    padding:
        18px 22px;

    border-radius: 18px;

    background:
        var(--accent-color-2);

    box-shadow:
        0 18px 40px rgba(11, 1, 24, 0.10);
}


.wisdom-school-floating-card span {
    margin-bottom: 2px;

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 600;
}


.wisdom-school-floating-card strong {
    font-family:
        var(--font-1);

    font-size: 20px;

    line-height: 1.15;
}


/* =========================================================
   FULL-TIME SECTION
========================================================= */

.wisdom-fulltime-section {
    padding-top: 7rem;
    padding-bottom: 8rem;
}


.wisdom-fulltime-shell {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.8fr) minmax(0, 1.2fr);

    gap: 90px;

    align-items: start;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.wisdom-fulltime-intro {
    position: sticky;

    top: 130px;
}


.wisdom-fulltime-title {
    margin:
        0 0 22px;

    font-family:
        var(--font-1);

    font-size:
        clamp(2.7rem,
            4vw,
            4.25rem);

    line-height: 1.04;

    letter-spacing: -0.04em;

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


.wisdom-fulltime-subtitle {
    max-width: 500px;

    margin:
        0 0 36px;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.7;

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


/* =========================================================
   PRICE
========================================================= */

.wisdom-fulltime-price {
    display: inline-flex;

    flex-direction: column;

    min-width: 265px;

    padding:
        24px 26px;

    border-radius: 22px;

    background:
        var(--accent-color);
}


.wisdom-price-label {
    margin-bottom: 8px;

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.6;
}


.wisdom-price-value {
    display: flex;

    align-items: baseline;

    gap: 3px;
}


.wisdom-price-dollar {
    font-family:
        var(--font-1);

    font-size: 24px;

    font-weight: 700;
}


.wisdom-price-value strong {
    font-family:
        var(--font-1);

    font-size: 48px;

    line-height: 1;
}


.wisdom-price-period {
    margin-left: 3px;

    font-family:
        var(--font-3);

    font-size: 14px;
}


/* =========================================================
   FULL-TIME CONTENT
========================================================= */

.wisdom-fulltime-copy {
    max-width: 760px;
}


.wisdom-fulltime-copy p {
    margin:
        0 0 24px;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.85;

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


/* =========================================================
   HIGHLIGHTS
========================================================= */

.wisdom-fulltime-highlights {
    display: grid;

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

    gap: 16px;

    margin-top: 42px;
}


.wisdom-fulltime-highlight {
    position: relative;

    min-height: 220px;

    padding:
        24px 22px;

    border-radius: 20px;

    background:
        var(--accent-color-4);
}


.wisdom-fulltime-highlight:nth-child(2) {
    background:
        var(--accent-color-7);
}


.wisdom-fulltime-highlight:nth-child(3) {
    background:
        var(--accent-color-3);
}


.wisdom-highlight-number {
    display: block;

    margin-bottom: 22px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.12em;

    opacity: 0.5;
}


.wisdom-fulltime-highlight strong {
    display: block;

    margin-bottom: 10px;

    font-family:
        var(--font-1);

    font-size: 20px;

    line-height: 1.2;

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


.wisdom-fulltime-highlight p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.6;

    color:
        var(--text-color);

    opacity: 0.8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .wisdom-school-hero-grid {
        gap: 50px;
    }


    .wisdom-school-image-frame {
        height: 460px;
    }


    .wisdom-fulltime-shell {
        gap: 55px;
    }

}


@media (max-width: 991.98px) {

    .wisdom-school-hero {
        padding-top: 11rem;
    }


    .wisdom-school-hero-grid {
        grid-template-columns: 1fr;
    }


    .wisdom-school-hero-copy {
        max-width: 850px;
    }


    .wisdom-school-hero-visual {
        max-width: 720px;
    }


    .wisdom-fulltime-shell {
        grid-template-columns: 1fr;
    }


    .wisdom-fulltime-intro {
        position: static;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .wisdom-school-hero {
        padding-top: 9rem;
        padding-bottom: 5rem;
    }


    .wisdom-school-title {
        font-size:
            clamp(2.8rem,
                12vw,
                3.8rem);
    }


    .wisdom-school-lead {
        font-size: 16px;
    }


    .wisdom-school-hero-visual {
        padding:
            10px 10px 45px 35px;
    }


    .wisdom-school-image-frame {
        height: 390px;

        border-radius: 22px;
    }


    .wisdom-school-floating-card {
        left: 0;

        max-width: 245px;
    }


    .wisdom-fulltime-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }


    .wisdom-fulltime-highlights {
        grid-template-columns: 1fr;
    }


    .wisdom-fulltime-highlight {
        min-height: auto;
    }

}

/* =========================================================
   PART-TIME SCHOOLING
========================================================= */

.wisdom-parttime-section {
    position: relative;

    padding-top: 8rem;
    padding-bottom: 8rem;

    background:
        var(--accent-color-5);
}


.wisdom-parttime-shell {
    display: grid;

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

    gap: 90px;

    align-items: start;
}


/* =========================================================
   PRICING
========================================================= */

.wisdom-parttime-pricing {
    position: sticky;

    top: 130px;

    padding:
        32px 30px;

    border:
        2px solid rgba(11, 1, 24, 0.9);

    border-radius: 22px;

    background:
        var(--accent-color);
}


.wisdom-parttime-pricing-head {
    display: flex;

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

    padding-bottom: 24px;

    border-bottom:
        1px solid rgba(11, 1, 24, 0.35);

    font-family:
        var(--font-1);

    font-size: 24px;

    font-weight: 700;
}


.wisdom-parttime-dollar {
    font-size: 46px;

    line-height: 1;
}


.wisdom-parttime-price-row {
    display: flex;

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

    gap: 20px;

    padding:
        22px 0;

    border-bottom:
        1px solid rgba(11, 1, 24, 0.25);

    font-family:
        var(--font-3);

    font-size: 17px;
}


.wisdom-parttime-price-row:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}


.wisdom-parttime-price-row strong {
    font-family:
        var(--font-1);

    font-size: 20px;
}


/* =========================================================
   PART-TIME COPY
========================================================= */

.wisdom-parttime-kicker {
    display: inline-flex;

    margin-bottom: 20px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;
}


.wisdom-parttime-title {
    max-width: 800px;

    margin:
        0 0 28px;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -0.04em;

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


.wisdom-parttime-lead {
    max-width: 740px;

    margin:
        0 0 48px;

    font-family:
        var(--font-3);

    font-size: 18px;

    line-height: 1.8;

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


.wisdom-parttime-block {
    padding:
        32px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.10);
}


.wisdom-parttime-block h3 {
    margin:
        0 0 18px;

    font-family:
        var(--font-1);

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

    line-height: 1.1;

    letter-spacing: -0.03em;
}


.wisdom-parttime-block p {
    max-width: 760px;

    margin: 0;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


/* =========================================================
   STEP UP
========================================================= */

.wisdom-stepup-section {
    padding-top: 2rem;
    padding-bottom: 4rem;
}


.wisdom-stepup-card {
    display: flex;

    align-items: center;

    gap: 24px;

    padding:
        28px 34px;

    border-radius: 22px;

    background:
        var(--accent-color-4);
}


.wisdom-stepup-icon {
    display: flex;

    flex: 0 0 auto;

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

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-1);

    font-size: 25px;

    font-weight: 800;
}


.wisdom-stepup-copy strong {
    display: block;

    margin-bottom: 6px;

    font-family:
        var(--font-1);

    font-size: 20px;
}


.wisdom-stepup-copy p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.7;

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


/* =========================================================
   EXTEND THE DAY
========================================================= */

.wisdom-extend-section {
    padding-top: 3rem;
    padding-bottom: 7rem;
}


.wisdom-extend-shell {
    position: relative;

    min-height: 600px;

    overflow: hidden;

    border-radius: 28px;

    background:
        url("https://wisdomwarehousemiami.com/wp-content/uploads/2025/04/Screenshot-2025-03-28-at-4.57.29-PM.png"
        ) center center / cover no-repeat;
}


.wisdom-extend-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(11, 1, 24, 0.60);
}


.wisdom-extend-content {
    position: relative;

    z-index: 2;

    padding:
        64px 54px;
}


.wisdom-extend-heading {
    max-width: 850px;

    margin:
        0 auto 48px;

    text-align: center;

    color:
        #ffffff;
}


.wisdom-extend-kicker {
    display: inline-flex;

    margin-bottom: 16px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.18);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;
}


.wisdom-extend-heading h2 {
    margin:
        0 0 20px;

    font-family:
        var(--font-1);

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

    line-height: 1;

    letter-spacing: -0.04em;

    color:
        #ffffff;
}


.wisdom-extend-heading h2 span {
    color:
        var(--accent-color-2);
}


.wisdom-extend-heading p {
    margin:
        0 0 7px;

    font-family:
        var(--font-3);

    font-size: 18px;

    line-height: 1.7;
}


.wisdom-extend-heading strong {
    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.7;
}


.wisdom-extend-grid {
    display: grid;

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

    gap: 22px;
}


.wisdom-extend-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 230px;

    padding:
        28px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.93);

    text-decoration: none;

    color:
        var(--text-color);

    transition:
        transform 350ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 350ms ease;
}


.wisdom-extend-card-green {
    background:
        var(--accent-color);
}


.wisdom-extend-icon {
    display: flex;

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

    width: 54px;
    height: 54px;

    margin-bottom: 42px;

    border-radius: 16px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-1);

    font-size: 20px;

    font-weight: 700;
}


.wisdom-extend-card h3 {
    max-width: 260px;

    margin:
        auto 0 0;

    font-family:
        var(--font-1);

    font-size: 22px;

    line-height: 1.15;
}


.wisdom-extend-arrow {
    position: absolute;

    right: 24px;
    bottom: 24px;

    font-size: 21px;

    transition:
        transform 300ms ease;
}


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

    .wisdom-extend-card:hover {
        transform:
            translateY(-8px);

        box-shadow:
            0 20px 40px rgba(11, 1, 24, 0.16);
    }


    .wisdom-extend-card:hover .wisdom-extend-arrow {
        transform:
            translateX(5px);
    }

}


/* =========================================================
   APPLICATION CTA
========================================================= */

.wisdom-application-section {
    padding-top: 7rem;
    padding-bottom: 8rem;
}


.wisdom-application-shell {
    position: relative;

    display: grid;

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

    gap: 80px;

    align-items: center;

    padding:
        64px;

    overflow: hidden;

    border-radius: 28px;

    background:
        var(--accent-color-4);
}


.wisdom-application-shell::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    top: -120px;

    border:
        2px solid var(--accent-color-2);

    border-radius: 50%;

    opacity: 0.18;
}


.wisdom-application-kicker {
    display: inline-flex;

    margin-bottom: 18px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;
}


.wisdom-application-copy h2 {
    max-width: 760px;

    margin:
        0 0 24px;

    font-family:
        var(--font-1);

    font-size:
        clamp(3rem,
            5vw,
            4.8rem);

    line-height: 1.02;

    letter-spacing: -0.045em;
}


.wisdom-application-intro {
    margin:
        0 0 24px;

    font-family:
        var(--font-3);

    font-size: 18px;

    line-height: 1.75;

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


.wisdom-application-subtitle {
    display: block;

    margin-bottom: 28px;

    font-family:
        var(--font-1);

    font-size: 19px;
}


.wisdom-application-points {
    margin-bottom: 34px;
}


.wisdom-application-point {
    display: grid;

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

    gap: 16px;

    align-items: center;

    padding:
        13px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.1);
}


.wisdom-application-point span {
    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;
}


.wisdom-application-point p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    font-weight: 500;
}


.wisdom-application-button {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        15px 22px;

    border-radius: 999px;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    color:
        var(--text-color);

    transition:
        transform 300ms ease;
}


.wisdom-application-button span {
    font-size: 18px;
}


.wisdom-application-visual {
    position: relative;

    padding:
        28px 28px 52px 52px;
}


.wisdom-application-image-wrap {
    position: relative;

    z-index: 2;

    height: 440px;

    overflow: hidden;

    border-radius: 24px;
}


.wisdom-application-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.wisdom-application-note {
    position: absolute;

    z-index: 3;

    left: 4px;
    bottom: 18px;

    padding:
        17px 20px;

    border-radius: 17px;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-1);

    font-size: 19px;

    line-height: 1.15;
}


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

@media (max-width: 991.98px) {

    .wisdom-parttime-shell,
    .wisdom-application-shell {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .wisdom-parttime-pricing {
        position: static;
    }


    .wisdom-extend-grid {
        grid-template-columns: 1fr;
    }


    .wisdom-extend-card {
        min-height: 190px;
    }


    .wisdom-application-visual {
        max-width: 700px;
    }

}


@media (max-width: 767.98px) {

    .wisdom-parttime-section,
    .wisdom-application-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }


    .wisdom-stepup-card {
        align-items: flex-start;

        padding:
            24px;
    }


    .wisdom-extend-content {
        padding:
            48px 24px;
    }


    .wisdom-application-shell {
        padding:
            38px 26px;

        border-radius: 22px;
    }


    .wisdom-application-visual {
        padding:
            15px 15px 45px 35px;
    }


    .wisdom-application-image-wrap {
        height: 360px;
    }

}


@media (max-width: 575.98px) {

    .wisdom-parttime-pricing {
        padding:
            26px 22px;
    }


    .wisdom-parttime-price-row {
        font-size: 15px;
    }


    .wisdom-stepup-card {
        flex-direction: column;
    }


    .wisdom-extend-heading h2 {
        font-size:
            clamp(2.7rem,
                12vw,
                3.8rem);
    }


    .wisdom-application-copy h2 {
        font-size:
            clamp(2.7rem,
                12vw,
                3.8rem);
    }

}

/* =========================================================
   SCHOOLING PAGE — MOTION SYSTEM
========================================================= */


/* =========================================================
   HERO ENTRANCE
========================================================= */

.wisdom-school-animate {
    opacity: 0;

    will-change:
        transform,
        opacity,
        filter;
}


.wisdom-school-animate-up {
    transform:
        translate3d(0, 42px, 0);

    filter:
        blur(6px);

    animation:
        wisdomSchoolHeroUp 950ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}


.wisdom-school-animate-right {
    transform:
        translate3d(60px, 10px, 0) scale(0.965);

    filter:
        blur(5px);

    animation:
        wisdomSchoolHeroRight 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards;
}


@keyframes wisdomSchoolHeroUp {

    0% {
        opacity: 0;

        transform:
            translate3d(0, 42px, 0);

        filter:
            blur(6px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(0, -4px, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


@keyframes wisdomSchoolHeroRight {

    0% {
        opacity: 0;

        transform:
            translate3d(60px, 10px, 0) scale(0.965);

        filter:
            blur(5px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(-5px, 0, 0) scale(1.006);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);

        filter:
            blur(0);
    }

}


/* =========================================================
   HERO FACTS
========================================================= */

.wisdom-school-fact {
    animation:
        wisdomSchoolFactEntrance 650ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}


.wisdom-school-fact:nth-child(1) {
    animation-delay: 620ms;
}


.wisdom-school-fact:nth-child(2) {
    animation-delay: 720ms;
}


.wisdom-school-fact:nth-child(3) {
    animation-delay: 820ms;
}


@keyframes wisdomSchoolFactEntrance {

    from {
        opacity: 0;

        transform:
            translateY(18px) scale(0.98);
    }


    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }

}


/* =========================================================
   HERO FLOATING CARD
========================================================= */

.wisdom-school-floating-card {
    animation:
        wisdomSchoolFloatingCardEntrance 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 880ms backwards;
}


@keyframes wisdomSchoolFloatingCardEntrance {

    from {
        opacity: 0;

        transform:
            translate3d(-18px, 20px, 0) rotate(-2deg) scale(0.93);
    }


    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) rotate(0) scale(1);
    }

}


/* =========================================================
   SCROLL REVEAL BASE

   Visible by default.
   JS activates the hidden state.
========================================================= */

.wisdom-school-scroll,
.wisdom-school-scroll-card {
    opacity: 1;

    transform: none;
}


.school-motion-ready .wisdom-school-scroll {
    opacity: 0;

    transform:
        translate3d(0, 42px, 0);

    filter:
        blur(4px);
}


.school-motion-ready .wisdom-school-scroll-left {
    transform:
        translate3d(-48px, 20px, 0);
}


.school-motion-ready .wisdom-school-scroll-right {
    transform:
        translate3d(48px, 20px, 0);
}


.school-motion-ready .wisdom-school-scroll.is-visible {
    animation:
        wisdomSchoolScrollReveal 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.school-motion-ready .wisdom-school-scroll-left.is-visible {
    animation-name:
        wisdomSchoolScrollRevealLeft;
}


.school-motion-ready .wisdom-school-scroll-right.is-visible {
    animation-name:
        wisdomSchoolScrollRevealRight;
}


@keyframes wisdomSchoolScrollReveal {

    0% {
        opacity: 0;

        transform:
            translate3d(0, 42px, 0);

        filter:
            blur(4px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(0, -4px, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


@keyframes wisdomSchoolScrollRevealLeft {

    0% {
        opacity: 0;

        transform:
            translate3d(-48px, 20px, 0);

        filter:
            blur(4px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(4px, 0, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


@keyframes wisdomSchoolScrollRevealRight {

    0% {
        opacity: 0;

        transform:
            translate3d(48px, 20px, 0);

        filter:
            blur(4px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(-4px, 0, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


/* =========================================================
   SCROLL CARD STAGGER
========================================================= */

.school-motion-ready .wisdom-school-scroll-card {
    opacity: 0;

    transform:
        translate3d(0, 34px, 0) scale(0.97);
}


.school-motion-ready .wisdom-school-scroll-card.is-visible {
    animation:
        wisdomSchoolCardReveal 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.school-motion-ready .wisdom-school-scroll-card:nth-child(1).is-visible {
    animation-delay: 0ms;
}


.school-motion-ready .wisdom-school-scroll-card:nth-child(2).is-visible {
    animation-delay: 110ms;
}


.school-motion-ready .wisdom-school-scroll-card:nth-child(3).is-visible {
    animation-delay: 220ms;
}


@keyframes wisdomSchoolCardReveal {

    0% {
        opacity: 0;

        transform:
            translate3d(0, 34px, 0) scale(0.97);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(0, -5px, 0) scale(1.006);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);
    }

}


/* =========================================================
   PART-TIME PRICING MICRO-INTERACTION
========================================================= */

.wisdom-parttime-price-row {
    transition:
        padding-left 300ms cubic-bezier(0.16, 1, 0.3, 1),

        padding-right 300ms cubic-bezier(0.16, 1, 0.3, 1),

        background 300ms ease;
}


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

    .wisdom-parttime-price-row:hover {
        padding-left: 10px;
        padding-right: 10px;

        background:
            rgba(255, 255, 255, 0.16);
    }

}


/* =========================================================
   STEP UP ICON
========================================================= */

.wisdom-stepup-icon {
    transition:
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


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

    .wisdom-stepup-card:hover .wisdom-stepup-icon {
        transform:
            rotate(-6deg) scale(1.08);
    }

}


/* =========================================================
   EXTEND CARDS
========================================================= */

.wisdom-extend-card {
    transition:
        transform 380ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1);
}


.wisdom-extend-icon {
    transition:
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


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

    .wisdom-extend-card:hover {
        transform:
            translateY(-8px);

        box-shadow:
            0 22px 46px rgba(11, 1, 24, 0.18);
    }


    .wisdom-extend-card:hover .wisdom-extend-icon {
        transform:
            translateY(-4px) rotate(-4deg) scale(1.04);
    }

}


/* =========================================================
   APPLICATION IMAGE
========================================================= */

.wisdom-application-image-wrap img {
    transition:
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    .wisdom-application-visual:hover .wisdom-application-image-wrap img {
        transform:
            scale(1.03);
    }

}


/* =========================================================
   APPLICATION BUTTON
========================================================= */

.wisdom-application-button {
    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 300ms ease;
}


.wisdom-application-button span {
    transition:
        transform 300ms ease;
}


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

    .wisdom-application-button:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 12px 28px rgba(11, 1, 24, 0.10);
    }


    .wisdom-application-button:hover span {
        transform:
            translateX(5px);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-school-animate,
    .wisdom-school-fact,
    .wisdom-school-floating-card,
    .school-motion-ready .wisdom-school-scroll,
    .school-motion-ready .wisdom-school-scroll-card {
        opacity: 1;

        transform: none;

        filter: none;

        animation: none;
    }


    .wisdom-parttime-price-row,
    .wisdom-stepup-icon,
    .wisdom-extend-card,
    .wisdom-extend-icon,
    .wisdom-application-image-wrap img,
    .wisdom-application-button,
    .wisdom-application-button span {
        transition: none;
    }

}

/* =========================================================
   SCHOOLING GALLERY
========================================================= */

.wisdom-gallery-section {
    position: relative;

    padding-top: 8rem;
    padding-bottom: 9rem;

    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.wisdom-gallery-heading {
    max-width: 830px;

    margin:
        0 auto 56px;

    text-align: center;
}


.wisdom-gallery-kicker {
    display: inline-flex;

    margin-bottom: 18px;

    padding:
        9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;
}


.wisdom-gallery-title {
    margin:
        0 0 22px;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -0.045em;

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


.wisdom-gallery-lead {
    max-width: 700px;

    margin:
        0 auto;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


/* =========================================================
   MASONRY GRID
========================================================= */

.wisdom-gallery-grid {
    column-count: 4;

    column-gap: 18px;
}


.wisdom-gallery-item {
    position: relative;

    display: inline-block;

    width: 100%;

    margin:
        0 0 18px;

    overflow: hidden;

    border-radius: 20px;

    background:
        var(--accent-color-4);

    break-inside: avoid;

    text-decoration: none;

    opacity: 1;

    transform: none;

    transition:
        transform 450ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* Reserve visual space before image decoding */

.wisdom-gallery-item:nth-child(4n + 1) {
    aspect-ratio: 4 / 5;
}


.wisdom-gallery-item:nth-child(4n + 2) {
    aspect-ratio: 4 / 3;
}


.wisdom-gallery-item:nth-child(4n + 3) {
    aspect-ratio: 1 / 1;
}


.wisdom-gallery-item:nth-child(4n + 4) {
    aspect-ratio: 3 / 4;
}


.wisdom-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 800ms cubic-bezier(0.16, 1, 0.3, 1),

        filter 500ms ease;
}


/* Small overlay */

.wisdom-gallery-item::after {
    content: "View";

    position: absolute;

    right: 14px;
    bottom: 14px;

    display: flex;

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

    min-width: 58px;
    height: 34px;

    padding:
        0 14px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.88);

    backdrop-filter:
        blur(8px);

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

    color:
        var(--text-color);

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 300ms ease,

        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   HOVER
========================================================= */

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

    .wisdom-gallery-item:hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 18px 38px rgba(11, 1, 24, 0.10);
    }


    .wisdom-gallery-item:hover img {
        transform:
            scale(1.035);
    }


    .wisdom-gallery-item:hover::after {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   HIDDEN ITEMS
========================================================= */

.wisdom-gallery-hidden {
    display: none;
}


.wisdom-gallery-hidden.is-gallery-visible {
    display: inline-block;

    animation:
        wisdomGalleryLoad 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes wisdomGalleryLoad {

    from {
        opacity: 0;

        transform:
            translateY(24px) scale(0.98);
    }


    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }

}


/* =========================================================
   LOAD MORE
========================================================= */

.wisdom-gallery-actions {
    display: flex;

    justify-content: center;

    margin-top: 46px;
}


.wisdom-gallery-more {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        14px 22px;

    border: 0;

    border-radius: 999px;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 15px;

    font-weight: 700;

    color:
        var(--text-color);

    cursor: pointer;

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 300ms ease;
}


.wisdom-gallery-more-icon {
    font-size: 18px;

    transition:
        transform 300ms ease;
}


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

    .wisdom-gallery-more:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 12px 28px rgba(11, 1, 24, 0.10);
    }


    .wisdom-gallery-more:hover .wisdom-gallery-more-icon {
        transform:
            translateY(3px);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .wisdom-gallery-grid {
        column-count: 3;
    }

}


@media (max-width: 767.98px) {

    .wisdom-gallery-section {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }


    .wisdom-gallery-heading {
        margin-bottom: 40px;
    }


    .wisdom-gallery-grid {
        column-count: 2;

        column-gap: 14px;
    }


    .wisdom-gallery-item {
        margin-bottom: 14px;

        border-radius: 16px;
    }

}


@media (max-width: 480px) {

    .wisdom-gallery-grid {
        column-count: 1;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-gallery-item,
    .wisdom-gallery-item img,
    .wisdom-gallery-item::after,
    .wisdom-gallery-more,
    .wisdom-gallery-more-icon {
        transition: none;

        animation: none;
    }

}

/* =========================================================
   TUTORING PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.wisdom-tutoring-hero {
    position: relative;

    min-height: 720px;

    padding-top: 14rem;
    overflow: hidden;
}


.wisdom-tutoring-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr) minmax(420px, 0.95fr);

    gap: 80px;

    align-items: center;
}


.wisdom-tutoring-copy {
    position: relative;

    z-index: 2;
}


.wisdom-tutoring-kicker,
.wisdom-tutoring-section-kicker,
.wisdom-tutoring-assessment-kicker {
    display: inline-flex;

    align-items: center;

    padding: 9px 16px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;

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


.wisdom-tutoring-kicker {
    margin-bottom: 20px;
}


.wisdom-tutoring-title {
    max-width: 820px;

    margin:
        0 0 20px;

    font-family:
        var(--font-1);

    font-size:
        clamp(3.4rem,
            5.2vw,
            5.35rem);

    font-weight: 700;

    line-height: 1.01;

    letter-spacing:
        -0.048em;

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


.wisdom-tutoring-title .accent-color {
    position: relative;

    display: inline-block;
}


.wisdom-tutoring-title .accent-color::after {
    content: "";

    position: absolute;

    left: 2%;
    right: 2%;
    bottom: -6px;

    height: 6px;

    border-radius:
        100% 50% 100% 60%;

    background:
        var(--accent-color-2);

    opacity: 0;

    transform:
        scaleX(0) rotate(-1deg);

    transform-origin:
        left center;

    animation:
        wisdomTutoringUnderline 750ms cubic-bezier(0.16, 1, 0.3, 1) 850ms forwards;
}


.wisdom-tutoring-subtitle {
    margin:
        0 0 25px;

    font-family:
        var(--font-1);

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

    font-weight: 600;

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


.wisdom-tutoring-lead {
    max-width: 720px;

    margin:
        0 0 18px;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


.wisdom-tutoring-lead-secondary {
    margin-bottom: 34px;
}

.wisdom-assessment-scheduler {
    display: grid;
    gap: 22px;
}

.wisdom-assessment-scheduler-date {
    display: grid;
    gap: 9px;
}

.wisdom-assessment-scheduler-date label {
    font-family: var(--font-3);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.wisdom-assessment-scheduler-date label > span {
    color: var(--accent-color-6);
}

.wisdom-assessment-date-input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid rgba(11, 1, 24, 0.14);
    border-radius: 14px;
    background: var(--accent-color-5);
    color: var(--text-color);
    font-family: var(--font-3);
    font-size: 15px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.wisdom-assessment-date-input:focus {
    border-color: var(--accent-color);
    box-shadow:
        0 0 0 4px rgba(156, 201, 171, 0.18);
}

.wisdom-assessment-times {
    padding: 20px;
    border: 1px solid rgba(11, 1, 24, 0.09);
    border-radius: 18px;
    background: rgba(156, 201, 171, 0.08);
}

.wisdom-assessment-times-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.wisdom-assessment-times-heading strong {
    color: var(--text-color);
    font-family: var(--font-1);
    font-size: 15px;
}

.wisdom-assessment-times-heading span {
    color: var(--text-color-2);
    font-family: var(--font-3);
    font-size: 13px;
    text-align: right;
}

.wisdom-assessment-time-options {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.wisdom-assessment-time-button {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(11, 1, 24, 0.12);
    border-radius: 12px;
    background: var(--accent-color-5);
    color: var(--text-color);
    font-family: var(--font-3);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.wisdom-assessment-time-button:hover {
    transform: translateY(-1px);
    border-color: var(--accent-color);
}

.wisdom-assessment-time-button.is-selected {
    border-color: var(--accent-color-9);
    background: var(--accent-color);
    box-shadow:
        0 6px 18px rgba(67, 165, 116, 0.14);
}

.wisdom-assessment-time-message {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 4px;
    color: var(--text-color-2);
    font-family: var(--font-3);
    font-size: 14px;
}

.wisdom-assessment-selected-slot {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid rgba(67, 165, 116, 0.24);
    border-radius: 16px;
    background: rgba(156, 201, 171, 0.13);
}

.wisdom-assessment-selected-slot[hidden] {
    display: none;
}

.wisdom-assessment-selected-check {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-color-9);
    color: #fff;
    font-weight: 800;
}

.wisdom-assessment-selected-slot div {
    display: grid;
    gap: 2px;
}

.wisdom-assessment-selected-slot small {
    color: var(--text-color-2);
    font-family: var(--font-3);
    font-size: 12px;
}

.wisdom-assessment-selected-slot strong {
    color: var(--text-color);
    font-family: var(--font-3);
    font-size: 14px;
}

@media (max-width: 767px) {
    .wisdom-assessment-time-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .wisdom-assessment-times-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .wisdom-assessment-times-heading span {
        text-align: left;
    }
}
/* =========================================================
   HERO FACTS
========================================================= */

.wisdom-tutoring-facts {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 32px;
}


.wisdom-tutoring-fact {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 140px;

    padding:
        15px 18px;

    overflow: hidden;

    border-radius: 16px;

    background:
        var(--accent-color-4);
}


.wisdom-tutoring-fact::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: -35px;
    top: -38px;

    border:
        1px solid var(--accent-color-2);

    border-radius: 50%;

    opacity: 0.15;
}


.wisdom-tutoring-fact span {
    margin-bottom: 3px;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.5;
}


.wisdom-tutoring-fact strong {
    font-family:
        var(--font-1);

    font-size: 18px;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.wisdom-tutoring-primary-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        15px 22px;

    overflow: hidden;

    border-radius: 999px;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    color:
        var(--text-color);

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 300ms ease;
}


.wisdom-tutoring-primary-button::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    left: -125px;
    top: 50%;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.28);

    transform:
        translateY(-50%);

    transition:
        left 550ms cubic-bezier(0.16, 1, 0.3, 1);
}


.wisdom-tutoring-primary-button>* {
    position: relative;

    z-index: 2;
}


.wisdom-tutoring-primary-button span {
    position: relative;

    z-index: 2;

    font-size: 18px;

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    .wisdom-tutoring-primary-button:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 14px 30px rgba(11, 1, 24, 0.10);
    }


    .wisdom-tutoring-primary-button:hover::before {
        left:
            calc(100% + 20px);
    }


    .wisdom-tutoring-primary-button:hover span {
        transform:
            translateX(5px);
    }

}


/* =========================================================
   HERO VISUAL
========================================================= */

.wisdom-tutoring-hero-visual {
    position: relative;

    padding:
        20px 20px 58px 58px;
}


.wisdom-tutoring-image-backdrop {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 72%;
    height: 78%;

    border-radius: 28px;

    background:
        var(--accent-color-3);

    opacity: 0.75;
}


.wisdom-tutoring-image-frame {
    position: relative;

    z-index: 2;

    height: 540px;

    overflow: hidden;

    border-radius: 26px;
}


.wisdom-tutoring-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    .wisdom-tutoring-hero-visual:hover .wisdom-tutoring-image-frame img {
        transform:
            scale(1.025);
    }

}


.wisdom-tutoring-floating-card {
    position: absolute;

    z-index: 3;

    left: 4px;
    bottom: 22px;

    display: flex;

    flex-direction: column;

    max-width: 280px;

    padding:
        18px 22px;

    border-radius: 18px;

    background:
        var(--accent-color-2);

    box-shadow:
        0 18px 40px rgba(11, 1, 24, 0.10);
}


.wisdom-tutoring-floating-card span {
    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 600;
}


.wisdom-tutoring-floating-card strong {
    font-family:
        var(--font-1);

    font-size: 20px;

    line-height: 1.15;
}


/* =========================================================
   HERO DECORATIVE SHAPES
========================================================= */

.wisdom-tutoring-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-tutoring-shape-left {
    width: 240px;
    height: 240px;

    left: -125px;
    top: 38%;

    border:
        2px solid var(--accent-color);

    opacity: 0.16;

    animation:
        wisdomTutoringShapeLeft 14s ease-in-out infinite;
}


.wisdom-tutoring-shape-right {
    width: 120px;
    height: 120px;

    right: 4%;
    top: 18%;

    border:
        2px solid var(--accent-color-2);

    opacity: 0.15;

    animation:
        wisdomTutoringShapeRight 16s ease-in-out infinite;
}


/* =========================================================
   APPOINTMENT SECTION
========================================================= */

.wisdom-tutoring-assessment-section {
    position: relative;

    padding-top: 8rem;
    padding-bottom: 8rem;
}


.wisdom-tutoring-assessment-shell {
    display: grid;

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

    gap: 70px;

    align-items: center;

    padding:
        70px;

    border-radius: 30px;

    background:
        var(--accent-color-4);

    overflow: hidden;
}


.wisdom-tutoring-assessment-copy {
    position: relative;
}


.wisdom-tutoring-assessment-copy h2 {
    margin:
        22px 0 18px;

    font-family:
        var(--font-1);

    font-size:
        clamp(3rem,
            4.5vw,
            4.6rem);

    line-height: 1.02;

    letter-spacing:
        -0.045em;
}


.wisdom-tutoring-assessment-copy>p {
    max-width: 560px;

    margin:
        0 0 35px;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


.wisdom-assessment-detail {
    display: grid;

    grid-template-columns:
        48px 1fr;

    gap: 17px;

    padding:
        20px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.10);
}


.wisdom-assessment-detail>span {
    display: flex;

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

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;
}


.wisdom-assessment-detail strong {
    display: block;

    margin-bottom: 4px;

    font-family:
        var(--font-1);

    font-size: 18px;
}


.wisdom-assessment-detail p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.65;

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


/* =========================================================
   APPOINTMENT FORM
========================================================= */

.wisdom-tutoring-form-card {
    position: relative;

    padding:
        36px;

    border-radius: 24px;

    background:
        var(--accent-color-5);

    box-shadow:
        0 20px 50px rgba(11, 1, 24, 0.07);
}


.wisdom-tutoring-form-grid {
    display: grid;

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

    gap:
        20px 18px;
}


.wisdom-tutoring-form-group {
    display: flex;

    flex-direction: column;
}


.wisdom-form-full {
    grid-column:
        1 / -1;
}


.wisdom-tutoring-form-group label {
    margin-bottom: 8px;

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;

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


.wisdom-tutoring-form-group input,
.wisdom-tutoring-form-group textarea {
    width: 100%;

    padding:
        14px 15px;

    border:
        1px solid rgba(11, 1, 24, 0.14);

    border-radius: 12px;

    outline: none;

    background:
        var(--accent-color-5);

    font-family:
        var(--font-3);

    font-size: 14px;

    color:
        var(--text-color);

    transition:
        border-color 250ms ease,

        box-shadow 250ms ease,

        background 250ms ease;
}


.wisdom-tutoring-form-group textarea {
    resize: vertical;

    min-height: 125px;
}


.wisdom-tutoring-form-group input:focus,
.wisdom-tutoring-form-group textarea:focus {
    border-color:
        var(--accent-color);

    box-shadow:
        0 0 0 4px rgba(156, 201, 171, 0.18);

    background:
        #fff;
}


.wisdom-tutoring-form-notice {
    margin:
        18px 0;

    font-family:
        var(--font-3);

    font-size: 11px;

    line-height: 1.6;

    color:
        var(--text-color-2);

    opacity: 0.7;
}


.wisdom-tutoring-submit {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 145px;

    padding:
        14px 22px;

    border: 0;

    border-radius: 999px;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 800;

    color:
        var(--text-color);

    cursor: pointer;

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 300ms ease;
}


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

    .wisdom-tutoring-submit:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 12px 28px rgba(11, 1, 24, 0.10);
    }

}


/* =========================================================
   TUTORING JOURNEY
========================================================= */

.wisdom-tutoring-journey-section {
    position: relative;

    padding-top: 8rem;
    padding-bottom: 8rem;

    background:
        var(--accent-color-4);
}


.wisdom-tutoring-journey-heading {
    max-width: 850px;

    margin:
        0 auto 60px;

    text-align: center;
}


.wisdom-tutoring-journey-heading h2 {
    margin:
        20px 0;

    font-family:
        var(--font-1);

    font-size:
        clamp(3rem,
            5vw,
            4.8rem);

    line-height: 1.03;

    letter-spacing:
        -0.045em;
}


.wisdom-tutoring-journey-heading p {
    max-width: 690px;

    margin:
        0 auto;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


.wisdom-tutoring-journey {
    position: relative;

    display: grid;

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

    gap: 22px;

    max-width: 1180px;

    margin:
        0 auto;
}


.wisdom-journey-line {
    position: absolute;

    left: 7%;
    right: 7%;
    top: 30px;

    height: 2px;

    overflow: hidden;

    background:
        rgba(11, 1, 24, 0.10);
}


.wisdom-journey-line span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        var(--accent-color);

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.wisdom-journey-step {
    position: relative;

    z-index: 2;

    min-height: 290px;

    padding:
        0 4px;
}


.wisdom-journey-number {
    display: flex;

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

    width: 60px;
    height: 60px;

    margin:
        0 0 27px;

    border-radius: 50%;

    background:
        var(--accent-color-5);

    border:
        7px solid var(--accent-color-4);

    box-shadow:
        0 5px 18px rgba(11, 1, 24, 0.07);

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    transition:
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),

        background 300ms ease;
}


.wisdom-journey-content {
    padding:
        26px;

    border-radius: 22px;

    background:
        var(--accent-color-5);

    min-height: 220px;

    transition:
        transform 380ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 380ms ease;
}


.wisdom-journey-step:nth-child(3) .wisdom-journey-content {
    background:
        var(--accent-color);
}


.wisdom-journey-step:nth-child(4) .wisdom-journey-content {
    background:
        var(--accent-color-7);
}


.wisdom-journey-step:nth-child(5) .wisdom-journey-content {
    background:
        var(--accent-color-3);
}


.wisdom-journey-label {
    display: inline-block;

    margin-bottom: 15px;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing:
        0.08em;

    opacity: 0.55;
}


.wisdom-journey-content h3 {
    margin:
        0 0 14px;

    font-family:
        var(--font-1);

    font-size:
        22px;

    line-height: 1.15;
}


.wisdom-journey-content p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.7;

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


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

    .wisdom-journey-step:hover .wisdom-journey-number {
        transform:
            scale(1.08) rotate(-5deg);

        background:
            var(--accent-color-2);
    }


    .wisdom-journey-step:hover .wisdom-journey-content {
        transform:
            translateY(-7px);

        box-shadow:
            0 18px 40px rgba(11, 1, 24, 0.08);
    }

}


.wisdom-tutoring-journey-action {
    display: flex;

    justify-content: center;

    margin-top: 50px;
}


/* =========================================================
   PERSONALIZED TUTORING
========================================================= */

.wisdom-personalized-section {
    position: relative;

    padding-top: 8rem;
    padding-bottom: 9rem;

    overflow: hidden;
}


.wisdom-personalized-heading {
    max-width: 900px;

    margin:
        0 auto 52px;

    text-align: center;
}


.wisdom-personalized-heading h2 {
    margin:
        20px 0 22px;

    font-family:
        var(--font-1);

    font-size:
        clamp(3rem,
            5vw,
            4.8rem);

    line-height: 1.03;

    letter-spacing:
        -0.045em;

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


.wisdom-personalized-heading p {
    max-width: 760px;

    margin:
        0 auto;

    font-family:
        var(--font-3);

    font-size: 17px;

    line-height: 1.8;

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


/* =========================================================
   PERSONALIZED TABS
========================================================= */

.wisdom-personalized-tabs {
    display: grid;

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

    gap: 10px;

    max-width: 1040px;

    margin:
        0 auto 40px;

    padding: 8px;

    border-radius: 21px;

    background:
        var(--accent-color-4);
}


.wisdom-personalized-tab {
    position: relative;

    display: flex;

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

    gap: 9px;

    min-height: 60px;

    padding:
        12px 15px;

    border: 0;

    border-radius: 15px;

    background:
        transparent;

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    color:
        var(--text-color);

    cursor: pointer;

    transition:
        background 300ms ease,

        color 300ms ease,

        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 300ms ease;
}


.wisdom-tab-number {
    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        0.08em;

    opacity: 0.45;
}


.wisdom-personalized-tab.is-active {
    background:
        var(--accent-color);

    box-shadow:
        0 9px 22px rgba(11, 1, 24, 0.08);

    transform:
        translateY(-2px);
}


.wisdom-personalized-tab.is-active .wisdom-tab-number {
    opacity: 0.8;
}


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

    .wisdom-personalized-tab:not(.is-active):hover {
        background:
            rgba(255, 255, 255, 0.68);

        transform:
            translateY(-2px);
    }

}


/* =========================================================
   PERSONALIZED STAGE
========================================================= */

.wisdom-personalized-stage {
    display: grid;

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

    max-width: 1180px;

    margin:
        0 auto;

    overflow: hidden;

    border-radius: 28px;

    background:
        var(--accent-color-5);

    box-shadow:
        0 24px 65px rgba(11, 1, 24, 0.07);
}


/* =========================================================
   PERSONALIZED IMAGE
========================================================= */

.wisdom-personalized-image {
    position: relative;

    min-height: 575px;

    padding: 18px;

    background:
        var(--accent-color);
}


.wisdom-personalized-image-inner {
    position: absolute;

    inset: 18px;

    overflow: hidden;

    border-radius: 20px;
}


.wisdom-personalized-image-inner::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to top,
            rgba(11, 1, 24, 0.18),
            transparent 38%);

    pointer-events: none;
}


.wisdom-personalized-image-inner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity 260ms ease,

        transform 750ms cubic-bezier(0.16, 1, 0.3, 1),

        filter 260ms ease;
}


.wisdom-personalized-image::before {
    content: "";

    position: absolute;

    z-index: 2;

    width: 180px;
    height: 180px;

    left: -70px;
    bottom: -78px;

    border:
        2px solid rgba(255, 255, 255, 0.52);

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-personalized-image-label {
    position: absolute;

    z-index: 4;

    left: 34px;
    bottom: 34px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        10px 15px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.91);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 25px rgba(11, 1, 24, 0.10);
}


.wisdom-personalized-image-label span {
    display: flex;

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

    width: 33px;
    height: 33px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;
}


.wisdom-personalized-image-label small {
    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

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


/* =========================================================
   PERSONALIZED CONTENT
========================================================= */

.wisdom-personalized-content {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 575px;

    padding:
        64px 58px;
}


.wisdom-personalized-content::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -88px;
    top: -90px;

    border:
        2px solid var(--accent-color-2);

    border-radius: 50%;

    opacity: 0.14;

    pointer-events: none;
}


.wisdom-personalized-content-kicker {
    display: inline-flex;

    align-self: flex-start;

    margin-bottom: 18px;

    padding:
        7px 12px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing:
        0.07em;
}


.wisdom-personalized-content h3 {
    margin:
        0 0 24px;

    font-family:
        var(--font-1);

    font-size:
        clamp(2.6rem,
            4vw,
            4rem);

    line-height: 1;

    letter-spacing:
        -0.045em;

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


.wisdom-personalized-content>p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.85;

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


/* =========================================================
   PERSONALIZED PROGRESS
========================================================= */

.wisdom-personalized-progress {
    margin-top: 46px;
}


.wisdom-personalized-progress-top {
    display: flex;

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

    margin-bottom: 10px;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing:
        0.08em;
}


.wisdom-personalized-progress-top span {
    opacity: 0.5;
}


.wisdom-personalized-progress-track {
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        var(--accent-color-12);
}


.wisdom-personalized-progress-track span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        var(--accent-color-2);

    transition:
        width 650ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   TAB CONTENT CHANGE ANIMATION
========================================================= */

.wisdom-personalized-stage .wisdom-personalized-content-kicker,

.wisdom-personalized-stage .wisdom-personalized-content h3,

.wisdom-personalized-stage .wisdom-personalized-content>p,

.wisdom-personalized-stage .wisdom-personalized-image-label {
    transition:
        opacity 260ms ease,

        transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}


.wisdom-personalized-stage.is-changing .wisdom-personalized-image-inner img {
    opacity: 0;

    filter:
        blur(5px);

    transform:
        scale(1.035);
}


.wisdom-personalized-stage.is-changing .wisdom-personalized-content-kicker,

.wisdom-personalized-stage.is-changing .wisdom-personalized-content h3,

.wisdom-personalized-stage.is-changing .wisdom-personalized-content>p {
    opacity: 0;

    transform:
        translateY(13px);
}


.wisdom-personalized-stage.is-changing .wisdom-personalized-image-label {
    opacity: 0;

    transform:
        translateY(8px);
}


/* =========================================================
   HERO LOAD ANIMATIONS
========================================================= */

.wisdom-tutoring-hero-copy-animate {
    opacity: 0;

    transform:
        translate3d(-48px, 18px, 0);

    filter:
        blur(6px);

    animation:
        wisdomTutoringHeroCopy 1000ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}


.wisdom-tutoring-hero-visual-animate {
    opacity: 0;

    transform:
        translate3d(58px, 12px, 0) scale(0.96);

    filter:
        blur(5px);

    animation:
        wisdomTutoringHeroVisual 1100ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
}


.wisdom-tutoring-fact {
    opacity: 0;

    transform:
        translateY(17px) scale(0.98);

    animation:
        wisdomTutoringFactReveal 650ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.wisdom-tutoring-fact:nth-child(1) {
    animation-delay:
        610ms;
}


.wisdom-tutoring-fact:nth-child(2) {
    animation-delay:
        720ms;
}


.wisdom-tutoring-fact:nth-child(3) {
    animation-delay:
        830ms;
}


.wisdom-tutoring-floating-card {
    opacity: 0;

    transform:
        translate3d(-18px, 20px, 0) rotate(-2deg) scale(0.94);

    animation:
        wisdomTutoringFloatingCard 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 900ms forwards;
}


/* =========================================================
   SCROLL REVEALS
========================================================= */

.wisdom-tutoring-scroll,
.wisdom-tutoring-process-reveal,
.wisdom-personalized-stage {
    opacity: 1;

    transform: none;
}


.tutoring-motion-ready .wisdom-tutoring-scroll {
    opacity: 0;

    transform:
        translate3d(0, 40px, 0);

    filter:
        blur(4px);
}


.tutoring-motion-ready .wisdom-tutoring-scroll.is-visible {
    animation:
        wisdomTutoringScrollReveal 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.tutoring-motion-ready .wisdom-tutoring-process-reveal {
    opacity: 0;

    transform:
        translateY(34px) scale(0.97);
}


.tutoring-motion-ready .wisdom-tutoring-process-reveal.is-visible {
    animation:
        wisdomTutoringProcessReveal 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.tutoring-motion-ready .wisdom-tutoring-process-reveal:nth-of-type(1).is-visible {
    animation-delay:
        0ms;
}


.tutoring-motion-ready .wisdom-tutoring-process-reveal:nth-of-type(2).is-visible {
    animation-delay:
        110ms;
}


.tutoring-motion-ready .wisdom-tutoring-process-reveal:nth-of-type(3).is-visible {
    animation-delay:
        220ms;
}


.tutoring-motion-ready .wisdom-tutoring-process-reveal:nth-of-type(4).is-visible {
    animation-delay:
        330ms;
}


/* Journey line draws when section appears */

.tutoring-motion-ready .wisdom-tutoring-journey.is-visible .wisdom-journey-line span {
    animation:
        wisdomTutoringJourneyLine 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes wisdomTutoringUnderline {

    0% {
        opacity: 0;

        transform:
            scaleX(0) rotate(-1deg);
    }


    45% {
        opacity: 0.8;
    }


    75% {
        transform:
            scaleX(1.04) rotate(-1deg);
    }


    100% {
        opacity: 0.82;

        transform:
            scaleX(1) rotate(-1deg);
    }

}


@keyframes wisdomTutoringHeroCopy {

    0% {
        opacity: 0;

        transform:
            translate3d(-48px, 18px, 0);

        filter:
            blur(6px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(4px, 0, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


@keyframes wisdomTutoringHeroVisual {

    0% {
        opacity: 0;

        transform:
            translate3d(58px, 12px, 0) scale(0.96);

        filter:
            blur(5px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(-5px, 0, 0) scale(1.006);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);

        filter:
            blur(0);
    }

}


@keyframes wisdomTutoringFactReveal {

    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }

}


@keyframes wisdomTutoringFloatingCard {

    0% {
        opacity: 0;

        transform:
            translate3d(-18px, 20px, 0) rotate(-2deg) scale(0.94);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(2px, -2px, 0) rotate(0.5deg) scale(1.02);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) rotate(0) scale(1);
    }

}


@keyframes wisdomTutoringShapeLeft {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }


    50% {
        transform:
            translate3d(18px, -14px, 0);
    }

}


@keyframes wisdomTutoringShapeRight {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }


    50% {
        transform:
            translate3d(-14px, 18px, 0);
    }

}


@keyframes wisdomTutoringScrollReveal {

    0% {
        opacity: 0;

        transform:
            translate3d(0, 40px, 0);

        filter:
            blur(4px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(0, -4px, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


@keyframes wisdomTutoringProcessReveal {

    0% {
        opacity: 0;

        transform:
            translateY(34px) scale(0.97);
    }


    70% {
        opacity: 1;

        transform:
            translateY(-5px) scale(1.006);
    }


    100% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }

}


@keyframes wisdomTutoringJourneyLine {

    from {
        transform:
            scaleX(0);
    }


    to {
        transform:
            scaleX(1);
    }

}


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

@media (max-width: 1199.98px) {

    .wisdom-tutoring-hero-grid {
        gap: 50px;
    }


    .wisdom-tutoring-assessment-shell {
        gap: 45px;

        padding:
            55px;
    }


    .wisdom-tutoring-journey {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .wisdom-journey-line {
        display: none;
    }

}


@media (max-width: 991.98px) {

    .wisdom-tutoring-hero {
        padding-top: 11rem;
    }


    .wisdom-tutoring-hero-grid {
        grid-template-columns:
            1fr;
    }


    .wisdom-tutoring-hero-visual {
        max-width: 720px;

        margin:
            0 auto;
    }


    .wisdom-tutoring-assessment-shell {
        grid-template-columns:
            1fr;
    }


    .wisdom-personalized-tabs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


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


    .wisdom-personalized-image {
        min-height: 500px;
    }


    .wisdom-personalized-content {
        min-height: auto;

        padding:
            50px 42px;
    }

}


@media (max-width: 767.98px) {

    .wisdom-tutoring-hero {
        padding-top: 9rem;
        padding-bottom: 5rem;
    }


    .wisdom-tutoring-assessment-section,
    .wisdom-tutoring-journey-section,
    .wisdom-personalized-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }


    .wisdom-tutoring-assessment-shell {
        padding:
            36px 24px;

        border-radius: 24px;
    }


    .wisdom-tutoring-form-card {
        padding:
            27px 22px;
    }


    .wisdom-tutoring-form-grid {
        grid-template-columns:
            1fr;
    }


    .wisdom-form-full {
        grid-column:
            auto;
    }


    .wisdom-tutoring-journey {
        grid-template-columns:
            1fr;
    }


    .wisdom-journey-step {
        min-height: auto;
    }


    .wisdom-journey-number {
        margin-bottom: 15px;
    }


    .wisdom-personalized-tabs {
        grid-template-columns:
            1fr;

        padding: 6px;
    }


    .wisdom-personalized-tab {
        justify-content:
            flex-start;

        padding-left: 20px;
    }


    .wisdom-personalized-image {
        min-height: 400px;

        padding: 12px;
    }


    .wisdom-personalized-image-inner {
        inset: 12px;

        border-radius: 17px;
    }


    .wisdom-personalized-image-label {
        left: 24px;
        bottom: 24px;
    }


    .wisdom-personalized-content {
        padding:
            40px 25px;
    }

}


@media (max-width: 575.98px) {

    .wisdom-tutoring-title {
        font-size:
            clamp(2.8rem,
                12vw,
                4rem);
    }


    .wisdom-tutoring-facts {
        display: grid;

        grid-template-columns:
            1fr;
    }


    .wisdom-tutoring-fact {
        width: 100%;
    }


    .wisdom-tutoring-hero-visual {
        padding:
            10px 10px 50px 35px;
    }


    .wisdom-tutoring-image-frame {
        height: 420px;
    }


    .wisdom-tutoring-floating-card {
        max-width: 230px;

        left: 0;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-tutoring-hero-copy-animate,
    .wisdom-tutoring-hero-visual-animate,
    .wisdom-tutoring-fact,
    .wisdom-tutoring-floating-card,
    .wisdom-tutoring-title .accent-color::after,

    .tutoring-motion-ready .wisdom-tutoring-scroll,

    .tutoring-motion-ready .wisdom-tutoring-process-reveal {
        opacity: 1;

        transform: none;

        filter: none;

        animation: none;
    }


    .wisdom-tutoring-shape-left,
    .wisdom-tutoring-shape-right {
        animation: none;
    }


    .wisdom-personalized-tab,
    .wisdom-personalized-image-inner img,
    .wisdom-personalized-progress-track span,
    .wisdom-personalized-content-kicker,
    .wisdom-personalized-content h3,
    .wisdom-personalized-content>p,
    .wisdom-personalized-image-label,
    .wisdom-tutoring-primary-button,
    .wisdom-tutoring-submit,
    .wisdom-journey-number,
    .wisdom-journey-content {
        transition: none;
    }

}
}

/* =========================================================
   ASSESSMENT BOOKING SECTION
========================================================= */

.wisdom-assessment-booking-section {
    position: relative;

    padding-top: 8rem;
    padding-bottom: 9rem;

    overflow: hidden;
}


.wisdom-assessment-booking-shell {
    display: grid;

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

    gap: 46px;

    align-items: start;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.wisdom-assessment-product-card {
    position: sticky;

    top: 130px;

    padding:
        42px;

    overflow: hidden;

    border-radius: 28px;

    background:
        var(--accent-color-4);
}


.wisdom-assessment-product-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -115px;
    top: -105px;

    border:
        2px solid var(--accent-color);

    border-radius: 50%;

    opacity: 0.2;

    pointer-events: none;
}


.wisdom-assessment-product-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -25px;
    top: -18px;

    border:
        2px solid var(--accent-color-2);

    border-radius: 50%;

    opacity: 0.16;

    pointer-events: none;
}


.wisdom-assessment-kicker {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    padding:
        8px 14px;

    border-radius: 999px;

    background:
        var(--accent-color-7);

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;

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


.wisdom-assessment-title {
    position: relative;

    z-index: 2;

    margin:
        0 0 24px;

    font-family:
        var(--font-1);

    font-size:
        clamp(2.7rem,
            4vw,
            4.2rem);

    line-height: 1.02;

    letter-spacing:
        -0.045em;

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


.wisdom-assessment-description {
    position: relative;

    z-index: 2;

    margin:
        0 0 18px;

    font-family:
        var(--font-3);

    font-size: 15px;

    line-height: 1.8;

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


/* =========================================================
   SUBJECT PREVIEW
========================================================= */

.wisdom-assessment-subject-preview {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
    margin-bottom: 30px;
}


.wisdom-assessment-subject-preview span {
    display: inline-flex;

    align-items: center;

    padding:
        8px 12px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

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


/* =========================================================
   PRICE
========================================================= */

.wisdom-assessment-price-block {
    position: relative;

    z-index: 2;

    display: flex;

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

    gap: 20px;

    margin-top: 8px;

    padding:
        24px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.10);

    border-bottom:
        1px solid rgba(11, 1, 24, 0.10);
}


.wisdom-assessment-price-block>div {
    display: flex;

    flex-direction: column;
}


.wisdom-assessment-price-label {
    margin-bottom: 4px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    opacity: 0.55;
}


.wisdom-assessment-price {
    font-family:
        var(--font-1);

    font-size:
        clamp(2.4rem,
            4vw,
            3.7rem);

    line-height: 1;

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


.wisdom-assessment-price-note {
    padding-bottom: 5px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

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


/* =========================================================
   INCLUDED
========================================================= */

.wisdom-assessment-included {
    position: relative;

    z-index: 2;

    margin-top: 28px;
}


.wisdom-assessment-included-item {
    display: grid;

    grid-template-columns:
        38px 1fr;

    gap: 12px;

    align-items: center;

    padding:
        12px 0;
}


.wisdom-assessment-included-item span {
    display: flex;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 10px;

    font-weight: 800;
}


.wisdom-assessment-included-item p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.55;

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


/* =========================================================
   FORM CARD
========================================================= */

.wisdom-assessment-form-card {
    position: relative;

    padding:
        44px;

    border-radius: 28px;

    background:
        var(--accent-color-5);

    box-shadow:
        0 22px 58px rgba(11, 1, 24, 0.07);
}


.wisdom-assessment-form-heading {
    margin-bottom: 34px;
}


.wisdom-assessment-form-heading>span {
    display: inline-block;

    margin-bottom: 10px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color:
        var(--accent-color-9);
}


.wisdom-assessment-form-heading h3 {
    margin:
        0 0 10px;

    font-family:
        var(--font-1);

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

    line-height: 1.05;

    letter-spacing:
        -0.035em;

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


.wisdom-assessment-form-heading p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.7;

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


/* =========================================================
   FIELDSETS
========================================================= */

.wisdom-assessment-fieldset {
    margin: 0;

    padding:
        30px 0;

    border: 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.09);
}


.wisdom-assessment-fieldset:first-of-type {
    border-top: 0;

    padding-top: 0;
}


.wisdom-assessment-fieldset legend {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin-bottom: 20px;

    padding: 0;

    font-family:
        var(--font-1);

    font-size: 19px;

    font-weight: 700;

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


.wisdom-assessment-fieldset legend>span {
    display: flex;

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

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 10px;

    font-weight: 800;
}


.wisdom-assessment-fieldset legend small {
    margin-left: auto;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 700;

    color:
        var(--text-color-2);

    opacity: 0.6;
}


.wisdom-assessment-field-help {
    margin:
        -8px 0 18px;

    font-family:
        var(--font-3);

    font-size: 13px;

    line-height: 1.65;

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


/* =========================================================
   FORM GRID
========================================================= */

.wisdom-assessment-form-grid {
    display: grid;

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

    gap: 18px;
}


.wisdom-assessment-field {
    display: flex;

    flex-direction: column;
}


.wisdom-assessment-field label {
    margin-bottom: 8px;

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;

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


.wisdom-assessment-field label>span {
    color:
        var(--accent-color-13);
}


.wisdom-assessment-field input,
.wisdom-assessment-field textarea,
.wisdom-assessment-field select {
    width: 100%;

    padding:
        14px 15px;

    border:
        1px solid rgba(11, 1, 24, 0.13);

    border-radius: 13px;

    outline: none;

    background:
        var(--accent-color-5);

    font-family:
        var(--font-3);

    font-size: 14px;

    color:
        var(--text-color);

    transition:
        border-color 250ms ease,

        box-shadow 250ms ease,

        background 250ms ease;
}


.wisdom-assessment-field textarea {
    min-height: 130px;

    resize: vertical;
}


.wisdom-assessment-field input:focus,
.wisdom-assessment-field textarea:focus,
.wisdom-assessment-field select:focus {
    border-color:
        var(--accent-color);

    box-shadow:
        0 0 0 4px rgba(156, 201, 171, 0.16);

    background:
        #fff;
}


/* =========================================================
   SUBJECT / PERMISSION CHOICES
========================================================= */

.wisdom-assessment-subject-options,
.wisdom-assessment-permission-options {
    display: grid;

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

    gap: 12px;
}


.wisdom-assessment-choice {
    position: relative;

    display: block;

    cursor: pointer;
}


.wisdom-assessment-choice input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.wisdom-assessment-choice>span {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 86px;

    padding:
        16px 17px;

    border:
        1px solid rgba(11, 1, 24, 0.11);

    border-radius: 16px;

    background:
        var(--accent-color-5);

    transition:
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),

        border-color 280ms ease,

        background 280ms ease,

        box-shadow 280ms ease;
}


.wisdom-assessment-choice>span::after {
    content: "✓";

    position: absolute;

    right: 13px;
    top: 13px;

    display: flex;

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

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 900;

    opacity: 0;

    transform:
        scale(0.75);

    transition:
        opacity 220ms ease,

        transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


.wisdom-assessment-choice strong {
    padding-right: 32px;

    font-family:
        var(--font-1);

    font-size: 16px;

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


.wisdom-assessment-choice small {
    margin-top: 5px;

    font-family:
        var(--font-3);

    font-size: 11px;

    line-height: 1.5;

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


.wisdom-assessment-choice input:checked+span {
    border-color:
        var(--accent-color);

    background:
        rgba(156, 201, 171, 0.14);

    box-shadow:
        0 8px 22px rgba(11, 1, 24, 0.05);
}


.wisdom-assessment-choice input:checked+span::after {
    opacity: 1;

    transform:
        scale(1);
}


.wisdom-assessment-choice input:focus-visible+span {
    outline:
        3px solid rgba(156, 201, 171, 0.28);

    outline-offset: 2px;
}


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

    .wisdom-assessment-choice:hover>span {
        transform:
            translateY(-3px);

        border-color:
            rgba(156, 201, 171, 0.8);
    }

}


/* =========================================================
   WEEKDAY CHOICES
========================================================= */

.wisdom-assessment-weekdays {
    display: grid;

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

    gap: 9px;
}


.wisdom-assessment-weekdays label {
    position: relative;

    cursor: pointer;
}


.wisdom-assessment-weekdays input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.wisdom-assessment-weekdays span {
    display: flex;

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

    min-height: 48px;

    padding:
        10px 8px;

    border:
        1px solid rgba(11, 1, 24, 0.11);

    border-radius: 13px;

    background:
        var(--accent-color-5);

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

    transition:
        background 250ms ease,

        border-color 250ms ease,

        transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}


.wisdom-assessment-weekdays input:checked+span {
    border-color:
        var(--accent-color);

    background:
        var(--accent-color);

    transform:
        translateY(-2px);
}


.wisdom-assessment-weekdays input:focus-visible+span {
    outline:
        3px solid rgba(156, 201, 171, 0.28);

    outline-offset: 2px;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.wisdom-assessment-order-summary {
    margin-top: 10px;

    padding:
        20px 22px;

    border-radius: 18px;

    background:
        var(--accent-color-4);
}


.wisdom-assessment-order-summary>div {
    display: flex;

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

    gap: 20px;

    font-family:
        var(--font-3);

    font-size: 14px;
}


.wisdom-assessment-order-summary strong {
    font-family:
        var(--font-1);

    font-size: 18px;
}


.wisdom-assessment-total-row {
    margin-top: 14px;

    padding-top: 14px;

    border-top:
        1px solid rgba(11, 1, 24, 0.10);
}


.wisdom-assessment-total-row span {
    font-weight: 800;
}


.wisdom-assessment-total-row strong {
    font-size: 23px;
}


/* =========================================================
   FORM ACTION
========================================================= */

.wisdom-assessment-form-action {
    display: flex;

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

    gap: 20px;

    margin-top: 24px;
}


.wisdom-assessment-secure-note {
    display: flex;

    align-items: center;

    gap: 8px;
}


.wisdom-assessment-secure-note>span {
    display: flex;

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

    width: 28px;
    height: 28px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--accent-color);

    font-size: 11px;

    font-weight: 900;
}


.wisdom-assessment-secure-note p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 11px;

    line-height: 1.5;

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


.wisdom-assessment-checkout-button {
    position: relative;

    display: inline-flex;

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

    gap: 13px;

    min-height: 52px;

    padding:
        14px 22px;

    overflow: hidden;

    border: 0;

    border-radius: 999px;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 800;

    color:
        var(--text-color);

    cursor: pointer;

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 300ms ease;
}


.wisdom-assessment-checkout-button::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    left: -130px;
    top: 50%;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.28);

    transform:
        translateY(-50%);

    transition:
        left 520ms cubic-bezier(0.16, 1, 0.3, 1);
}


.wisdom-assessment-checkout-button>* {
    position: relative;

    z-index: 2;
}


.wisdom-assessment-checkout-button>span {
    position: relative;

    z-index: 2;

    font-size: 18px;

    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    .wisdom-assessment-checkout-button:hover {
        transform:
            translateY(-3px);

        box-shadow:
            0 14px 30px rgba(11, 1, 24, 0.10);
    }


    .wisdom-assessment-checkout-button:hover::before {
        left:
            calc(100% + 20px);
    }


    .wisdom-assessment-checkout-button:hover>span {
        transform:
            translateX(5px);
    }

}


/* =========================================================
   ASSESSMENT SCROLL ANIMATION
========================================================= */

/*
 * Visible by default.
 * Your existing tutoring observer adds
 * tutoring-motion-ready only when JS works.
 */

.wisdom-assessment-product-card,
.wisdom-assessment-form-card {
    opacity: 1;

    transform: none;
}


.tutoring-motion-ready .wisdom-assessment-product-card {
    opacity: 0;

    transform:
        translate3d(-45px, 24px, 0);

    filter:
        blur(4px);
}


.tutoring-motion-ready .wisdom-assessment-form-card {
    opacity: 0;

    transform:
        translate3d(45px, 24px, 0);

    filter:
        blur(4px);
}


.tutoring-motion-ready .wisdom-assessment-product-card.is-visible {
    animation:
        wisdomAssessmentProductReveal 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.tutoring-motion-ready .wisdom-assessment-form-card.is-visible {
    animation:
        wisdomAssessmentFormReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}


@keyframes wisdomAssessmentProductReveal {

    0% {
        opacity: 0;

        transform:
            translate3d(-45px, 24px, 0);

        filter:
            blur(4px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(4px, 0, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


@keyframes wisdomAssessmentFormReveal {

    0% {
        opacity: 0;

        transform:
            translate3d(45px, 24px, 0);

        filter:
            blur(4px);
    }


    70% {
        opacity: 1;

        transform:
            translate3d(-4px, 0, 0);

        filter:
            blur(0);
    }


    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);
    }

}


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

@media (max-width: 1199.98px) {

    .wisdom-assessment-booking-shell {
        grid-template-columns:
            minmax(0, 0.9fr) minmax(0, 1.1fr);

        gap: 30px;
    }


    .wisdom-assessment-product-card {
        padding: 34px;
    }


    .wisdom-assessment-form-card {
        padding: 36px;
    }


    .wisdom-assessment-weekdays {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 991.98px) {

    .wisdom-assessment-booking-shell {
        grid-template-columns:
            1fr;
    }


    .wisdom-assessment-product-card {
        position: relative;

        top: auto;
    }

}


@media (max-width: 767.98px) {

    .wisdom-assessment-booking-section {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }


    .wisdom-assessment-product-card,
    .wisdom-assessment-form-card {
        padding:
            30px 24px;

        border-radius: 22px;
    }


    .wisdom-assessment-form-grid,
    .wisdom-assessment-subject-options,
    .wisdom-assessment-permission-options {
        grid-template-columns:
            1fr;
    }


    .wisdom-assessment-weekdays {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .wisdom-assessment-form-action {
        flex-direction: column;

        align-items: stretch;
    }


    .wisdom-assessment-checkout-button {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .wisdom-assessment-weekdays {
        grid-template-columns:
            1fr;
    }


    .wisdom-assessment-price-block {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .tutoring-motion-ready .wisdom-assessment-product-card,

    .tutoring-motion-ready .wisdom-assessment-form-card {
        opacity: 1;

        transform: none;

        filter: none;

        animation: none;
    }


    .wisdom-assessment-choice>span,
    .wisdom-assessment-choice>span::after,
    .wisdom-assessment-weekdays span,
    .wisdom-assessment-checkout-button,
    .wisdom-assessment-checkout-button>span {
        transition: none;
    }

}

/* =========================================================
   ASSESSMENT FORM ERRORS
========================================================= */

.wisdom-assessment-form-errors {
    margin-bottom: 26px;

    padding:
        14px 16px;

    border-radius: 14px;

    background:
        rgba(154, 57, 11, 0.08);
}


.wisdom-assessment-form-errors p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.6;

    color:
        var(--accent-color-13);
}


.wisdom-assessment-field-errors {
    margin-top: 7px;
}


.wisdom-assessment-field-errors span {
    display: block;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.5;

    color:
        var(--accent-color-13);
}

/* =========================================================
   PREMIUM AUTH
========================================================= */

.wisdom-auth-premium-section {
    position: relative;

    min-height: 100vh;

    padding:
        15rem 0 6rem;

    background:
        linear-gradient(180deg,
            var(--primary) 0%,
            #ffffff 100%);

    overflow: hidden;
}


.wisdom-auth-premium-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -240px;
    top: 90px;

    border-radius: 50%;

    background:
        rgba(156, 201, 171, 0.15);

    filter:
        blur(8px);
}


.wisdom-auth-premium-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(234, 153, 60, 0.11);
}


.wisdom-auth-premium-shell {
    position: relative;

    z-index: 2;

    display: grid;

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

    min-height: 720px;

    border:
        1px solid rgba(11, 1, 24, 0.08);

    border-radius: 34px;

    overflow: hidden;

    background:
        #ffffff;

    box-shadow:
        0 40px 100px rgba(11, 1, 24, 0.09);
}


/* =========================================================
   STORY PANEL
========================================================= */

.wisdom-auth-story-panel {
    position: relative;

    display: flex;

    align-items: center;

    padding:
        72px 68px;

    background:
        linear-gradient(145deg,
            var(--accent-color-4) 0%,
            #f4fbf6 48%,
            var(--accent-color-7) 145%);

    overflow: hidden;
}


.wisdom-auth-story-panel::before {
    content: "";

    position: absolute;

    width: 370px;
    height: 370px;

    right: -160px;
    top: -130px;

    border-radius: 50%;

    border:
        2px solid rgba(67, 165, 116, 0.24);
}


.wisdom-auth-story-panel::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -150px;
    bottom: -130px;

    border-radius: 50%;

    border:
        2px solid rgba(234, 153, 60, 0.32);
}


.wisdom-auth-story-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-auth-shape-one {
    width: 60px;
    height: 60px;

    top: 80px;
    right: 95px;

    background:
        var(--accent-color-2);

    opacity: 0.92;
}


.wisdom-auth-shape-two {
    width: 26px;
    height: 26px;

    top: 150px;
    right: 67px;

    background:
        var(--accent-color);
}


.wisdom-auth-shape-three {
    width: 14px;
    height: 14px;

    top: 126px;
    right: 142px;

    background:
        var(--accent-color-3);
}


.wisdom-auth-story-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 560px;
}


.wisdom-auth-story-kicker {
    display: inline-flex;

    align-items: center;

    margin-bottom: 24px;

    padding:
        9px 15px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid rgba(11, 1, 24, 0.07);

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.12em;

    text-transform: uppercase;

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


.wisdom-auth-story-title {
    max-width: 520px;

    margin:
        0 0 24px;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 0.97;

    letter-spacing:
        -0.052em;

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


.wisdom-auth-story-title span {
    display: block;

    color:
        var(--accent-color-9);
}


.wisdom-auth-story-copy {
    max-width: 500px;

    margin:
        0 0 34px;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.85;

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


.wisdom-auth-story-divider {
    width: 100%;

    height: 1px;

    margin-bottom: 30px;

    background:
        rgba(11, 1, 24, 0.09);
}


/* =========================================================
   STORY POINTS
========================================================= */

.wisdom-auth-story-points {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


.wisdom-auth-story-point {
    display: grid;

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

    gap: 15px;

    align-items: start;
}


.wisdom-auth-story-point-number {
    display: flex;

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

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-3);

    font-size: 10px;

    font-weight: 800;

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


.wisdom-auth-story-point strong {
    display: block;

    margin-bottom: 4px;

    font-family:
        var(--font-1);

    font-size: 15px;

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


.wisdom-auth-story-point p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 12px;

    line-height: 1.65;

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


.wisdom-auth-story-note {
    display: flex;

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

    gap: 20px;

    margin-top: 40px;

    padding-top: 22px;

    border-top:
        1px solid rgba(11, 1, 24, 0.09);
}


.wisdom-auth-story-note span {
    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.09em;

    text-transform: uppercase;

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


.wisdom-auth-story-note strong {
    font-family:
        var(--font-2);

    font-size: 18px;

    font-weight: 400;

    color:
        var(--accent-color-9);
}


/* =========================================================
   ACCESS PANEL
========================================================= */

.wisdom-auth-access-panel {
    display: flex;

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

    padding:
        72px 68px;

    background:
        #ffffff;
}


.wisdom-auth-access-inner {
    width: 100%;

    max-width: 470px;
}


.wisdom-auth-access-top {
    margin-bottom: 36px;
}


.wisdom-auth-access-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.13em;

    text-transform: uppercase;

    color:
        var(--accent-color-9);
}


.wisdom-auth-access-top h2 {
    margin:
        0 0 14px;

    font-family:
        var(--font-1);

    font-size:
        clamp(2.6rem,
            4vw,
            4rem);

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        -0.05em;

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


.wisdom-auth-access-top p {
    max-width: 430px;

    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.8;

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


/* =========================================================
   GOOGLE BUTTON
========================================================= */

.wisdom-auth-google-wrap {
    margin-bottom: 22px;
}


.wisdom-auth-google-premium {
    display: grid;

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

    align-items: center;

    gap: 14px;

    width: 100%;

    min-height: 64px;

    padding:
        9px 18px 9px 10px;

    border:
        1px solid rgba(11, 1, 24, 0.13);

    border-radius: 18px;

    background:
        #ffffff;

    text-decoration: none;

    box-shadow:
        0 8px 26px rgba(11, 1, 24, 0.04);

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


.wisdom-auth-google-premium:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--accent-color);

    box-shadow:
        0 16px 34px rgba(11, 1, 24, 0.08);

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


.wisdom-auth-google-logo {
    display: flex;

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

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background:
        var(--primary);
}


.wisdom-auth-google-text {
    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 800;

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


.wisdom-auth-google-arrow {
    font-family:
        var(--font-3);

    font-size: 18px;

    color:
        var(--accent-color-9);

    transition:
        transform 180ms ease;
}


.wisdom-auth-google-premium:hover .wisdom-auth-google-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   TRUST
========================================================= */

.wisdom-auth-trust-row {
    display: grid;

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

    gap: 12px;

    align-items: start;

    padding:
        16px 17px;

    border-radius: 16px;

    background:
        var(--accent-color-4);
}


.wisdom-auth-trust-icon {
    display: flex;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        var(--accent-color);

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 900;

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


.wisdom-auth-trust-row strong {
    display: block;

    margin-bottom: 3px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

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


.wisdom-auth-trust-row p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 11px;

    line-height: 1.55;

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


/* =========================================================
   DIVIDER
========================================================= */

.wisdom-auth-access-divider {
    position: relative;

    display: flex;

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

    margin:
        30px 0 22px;
}


.wisdom-auth-access-divider::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background:
        rgba(11, 1, 24, 0.08);
}


.wisdom-auth-access-divider span {
    position: relative;

    z-index: 2;

    padding:
        0 12px;

    background:
        #ffffff;

    font-family:
        var(--font-3);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.08em;

    text-transform: uppercase;

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


/* =========================================================
   META
========================================================= */

.wisdom-auth-access-meta {
    display: grid;

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

    gap: 10px;
}


.wisdom-auth-access-meta div {
    padding:
        13px 14px;

    border-radius: 14px;

    background:
        var(--primary);

    border:
        1px solid rgba(11, 1, 24, 0.06);
}


.wisdom-auth-access-meta span {
    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.45;

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


/* =========================================================
   SWITCH
========================================================= */

.wisdom-auth-access-switch {
    display: flex;

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

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 28px;

    padding-top: 24px;

    border-top:
        1px solid rgba(11, 1, 24, 0.08);

    font-family:
        var(--font-3);

    font-size: 13px;

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


.wisdom-auth-access-switch a {
    font-weight: 800;

    color:
        var(--accent-color-9);

    text-decoration: none;
}


.wisdom-auth-access-switch a:hover {
    text-decoration: underline;
}


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

@media (max-width: 1199.98px) {

    .wisdom-auth-story-panel,
    .wisdom-auth-access-panel {
        padding:
            60px 48px;
    }

}


@media (max-width: 991.98px) {

    .wisdom-auth-premium-section {
        padding-top: 8.5rem;
    }


    .wisdom-auth-premium-shell {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .wisdom-auth-story-panel {
        min-height: 620px;
    }


    .wisdom-auth-story-content {
        max-width: 680px;
    }


    .wisdom-auth-access-inner {
        max-width: 620px;
    }

}


@media (max-width: 767.98px) {

    .wisdom-auth-premium-section {
        padding:
            7rem 0 4rem;
    }


    .wisdom-auth-premium-shell {
        border-radius: 24px;
    }


    .wisdom-auth-story-panel,
    .wisdom-auth-access-panel {
        padding:
            44px 28px;
    }


    .wisdom-auth-story-panel {
        min-height: auto;
    }


    .wisdom-auth-story-title {
        font-size: 2.8rem;
    }


    .wisdom-auth-story-note {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 520px) {

    .wisdom-auth-story-point {
        grid-template-columns:
            38px minmax(0, 1fr);
    }


    .wisdom-auth-story-point-number {
        width: 36px;
        height: 36px;
    }


    .wisdom-auth-access-meta {
        grid-template-columns: 1fr;
    }


    .wisdom-auth-google-premium {
        grid-template-columns:
            40px minmax(0, 1fr) 20px;

        min-height: 60px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-auth-google-premium,
    .wisdom-auth-google-arrow {
        transition: none;
    }

}
}
/* =========================================================
   HEADER ACCOUNT BUTTON
========================================================= */

.wisdom-account-button {
    min-width: 158px;

    min-height: 58px;

    padding-left: 26px !important;
    padding-right: 6px !important;

    gap: 18px !important;

    border:
        1.5px solid
        var(--accent-color) !important;

    border-radius:
        999px !important;

    background:
        var(--accent-color) !important;

    color:
        var(--text-color) !important;

    box-shadow:
        0 8px 22px
        rgba(67, 165, 116, 0.12);

    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease !important;
}


/* TEXT */

.wisdom-account-button-label {
    font-family:
        var(--font-3);

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    color:
        var(--text-color);

    transition:
        color 220ms ease;
}


/* =========================================================
   ARROW CIRCLE
========================================================= */

.wisdom-account-button .icon-box {
    display: flex;

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

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.72);

    color:
        var(--text-color);

    transition:
        transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 220ms ease,
        color 220ms ease;
}


.wisdom-account-button .icon-box i {
    font-size: 17px;

    transition:
        transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   HOVER
========================================================= */

.wisdom-account-button:hover {
    background:
        var(--accent-color) !important;

    border-color:
        var(--accent-color) !important;

    color:
        var(--text-color) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px
        rgba(67, 165, 116, 0.20);
}


.wisdom-account-button:hover
.wisdom-account-button-label {
    color:
        var(--text-color);
}


.wisdom-account-button:hover
.icon-box {
    background:
        var(--text-color);

    color:
        #ffffff;

    transform:
        rotate(5deg);
}


.wisdom-account-button:hover
.icon-box i {
    transform:
        translate(2px, -2px);
}


/* =========================================================
   ACTIVE
========================================================= */

.wisdom-account-button:active {
    transform:
        translateY(0)
        scale(0.98);

    box-shadow:
        0 6px 16px
        rgba(67, 165, 116, 0.14);
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.wisdom-account-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(156, 201, 171, 0.28),
        0 10px 25px
        rgba(67, 165, 116, 0.16);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-account-button,
    .wisdom-account-button-label,
    .wisdom-account-button .icon-box,
    .wisdom-account-button .icon-box i {
        transition: none !important;
    }

}
.wisdom-auth-google-premium {
    width: 100%;
    border: none;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    /* keep all your existing styles below */
}
/* =========================================================
   WISDOM WAREHOUSE — CHECKOUT
   ========================================================= */

.wisdom-checkout {
    position: relative;
    padding: 250px 24px 96px;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(156, 201, 171, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(234, 153, 60, 0.12),
            transparent 24%
        ),
        var(--primary);
}

.wisdom-checkout__container {
    width: min(1180px, 100%);
    margin: 0 auto;
}
.wisdom-workshop-choice-meta b {
    margin-left: auto;
}


.wisdom-workshop-session-when .wisdom-workshop-session-next {
    margin-top: 4px;

    font-weight: 600;

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

/* Heading */

.wisdom-checkout__heading {
    max-width: 670px;
    margin-bottom: 42px;
}

.wisdom-checkout__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    font-family: var(--font-2);
    font-size: 18px;
    color: var(--accent-color-9);
}

.wisdom-checkout__heading h1 {
    margin: 0 0 14px;
    font-family: var(--font-1);
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-color);
}

.wisdom-checkout__heading p {
    max-width: 590px;
    margin: 0;
    font-family: var(--font-3);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-color-2);
}


/* Main layout */

.wisdom-checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    gap: 28px;
    align-items: start;
}

.wisdom-checkout__payment,
.wisdom-checkout__summary {
    min-width: 0;
}

.wisdom-checkout__summary {
    position: sticky;
    top: 28px;
}


/* Shared card */

.wisdom-checkout__card {
    padding: 32px;
    border: 1px solid rgba(11, 1, 24, 0.09);
    border-radius: 28px;
    background: rgba(254, 254, 254, 0.92);
    box-shadow:
        0 20px 55px rgba(11, 1, 24, 0.06),
        0 3px 10px rgba(11, 1, 24, 0.03);
}

.wisdom-checkout__card-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 28px;
}

.wisdom-checkout__step {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-color);
    font-family: var(--font-1);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.wisdom-checkout__card-heading h2 {
    margin: 1px 0 5px;
    font-family: var(--font-1);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-color);
}

.wisdom-checkout__card-heading p {
    margin: 0;
    font-family: var(--font-3);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-color-2);
}


/* Square card */

.wisdom-square-card {
    min-height: 90px;
    margin-top: 8px;
    padding: 4px 0;
}

/*
   Square renders the sensitive payment fields itself.
   Style the surrounding area rather than trying to target
   fields inside Square's iframe.
*/


/* Payment errors */

.wisdom-checkout__error {
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid rgba(154, 57, 11, 0.18);
    border-radius: 12px;
    background: rgba(255, 133, 75, 0.08);
    font-family: var(--font-3);
    font-size: 14px;
    line-height: 1.55;
    color: var(--accent-color-13);
}

.wisdom-checkout__error[hidden] {
    display: none;
}


/* Pay button */

.wisdom-checkout__pay-button {
    display: flex;
    width: 100%;
    min-height: 58px;
    margin-top: 22px;
    padding: 15px 21px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border: 0;
    border-radius: 15px;
    background: var(--text-color);

    font-family: var(--font-3);
    font-size: 15px;
    font-weight: 600;
    color: #fff;

    cursor: pointer;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.wisdom-checkout__pay-button strong {
    font-family: var(--font-1);
    font-size: 17px;
    font-weight: 600;
    color: var(--accent-color);
}

.wisdom-checkout__pay-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(11, 1, 24, 0.18);
}

.wisdom-checkout__pay-button:active:not(:disabled) {
    transform: translateY(0);
}

.wisdom-checkout__pay-button:disabled {
    cursor: wait;
    opacity: 0.68;
}


/* Registration items */

.wisdom-checkout__items {
    display: flex;
    flex-direction: column;
}

.wisdom-checkout-item {
    padding: 23px 0;
    border-top: 1px solid rgba(11, 1, 24, 0.08);
}

.wisdom-checkout-item:first-child {
    padding-top: 4px;
    border-top: 0;
}

.wisdom-checkout-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.wisdom-checkout-item__type {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--font-3);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-color-9);
}

.wisdom-checkout-item__top h3 {
    margin: 0;
    font-family: var(--font-1);
    font-size: 18px;
    line-height: 1.35;
    color: var(--text-color);
}

.wisdom-checkout-item__price {
    flex-shrink: 0;
    font-family: var(--font-1);
    font-size: 17px;
    color: var(--text-color);
}


/* Registration metadata */

.wisdom-checkout-item__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.wisdom-checkout-item__details > div {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(156, 201, 171, 0.09);
}

.wisdom-checkout-item__details span,
.wisdom-checkout-item__details strong {
    display: block;
}

.wisdom-checkout-item__details span {
    margin-bottom: 3px;
    font-family: var(--font-3);
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-color-2);
}

.wisdom-checkout-item__details strong {
    overflow-wrap: anywhere;
    font-family: var(--font-3);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text-color);
}


/* Total */

.wisdom-checkout__total {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 2px solid var(--text-color);
}

.wisdom-checkout__total > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wisdom-checkout__total span {
    font-family: var(--font-1);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.wisdom-checkout__total strong {
    font-family: var(--font-1);
    font-size: 27px;
    line-height: 1;
    color: var(--text-color);
}

.wisdom-checkout__total p {
    margin: 7px 0 0;
    text-align: right;
    font-family: var(--font-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-color-2);
}


/* Empty cart */

.wisdom-checkout__empty {
    padding: 70px 30px;
    border: 1px solid rgba(11, 1, 24, 0.08);
    border-radius: 28px;
    background: var(--accent-color-5);
    text-align: center;
}

.wisdom-checkout__empty h2 {
    margin: 0 0 10px;
    font-family: var(--font-1);
    font-size: 30px;
    color: var(--text-color);
}

.wisdom-checkout__empty p {
    max-width: 480px;
    margin: 0 auto;
    font-family: var(--font-3);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-color-2);
}
/* =========================================================
   CHECKOUT SUCCESS
   ========================================================= */

.wisdom-success {
    position: relative;
    min-height: calc(100vh - 100px);

    /*
     * More separation from the navigation.
     * The confirmation should feel like its own page.
     */
    padding: 150px 32px 120px;

    background:
        radial-gradient(
            circle at 14% 15%,
            rgba(156, 201, 171, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(234, 153, 60, 0.10),
            transparent 25%
        ),
        var(--primary);
}


/* Wider than the previous 780px */

.wisdom-success__container {
    width: min(1040px, 100%);
    margin: 0 auto;
}


/* Main confirmation panel */

.wisdom-success__card {
    position: relative;
    overflow: hidden;

    padding: 64px 68px 58px;

    border: 1px solid rgba(11, 1, 24, 0.08);
    border-radius: 30px;

    background: rgba(254, 254, 254, 0.96);

    box-shadow:
        0 30px 80px rgba(11, 1, 24, 0.07),
        0 4px 16px rgba(11, 1, 24, 0.025);
}


/* Soft decorative detail */

.wisdom-success__card::before {
    content: "";

    position: absolute;
    top: -105px;
    right: -90px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(234, 153, 60, 0.11);

    pointer-events: none;
}


/* Small second decorative shape */

.wisdom-success__card::after {
    content: "";

    position: absolute;
    top: 0;
    right: 95px;

    width: 90px;
    height: 7px;

    border-radius: 0 0 10px 10px;

    background: var(--accent-color);

    pointer-events: none;
}


/* =========================================================
   CONFIRMATION HEADER
   ========================================================= */

.wisdom-success__icon {
    display: flex;

    width: 62px;
    height: 62px;

    margin-bottom: 26px;

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

    border-radius: 18px;

    background: var(--accent-color);

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


.wisdom-success__eyebrow {
    display: block;

    margin-bottom: 10px;

    font-family: var(--font-2);
    font-size: 18px;

    color: var(--accent-color-9);
}


.wisdom-success h1 {
    max-width: 760px;

    margin: 0 0 16px;

    font-family: var(--font-1);

    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.05;

    letter-spacing: -0.045em;

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


.wisdom-success__intro {
    max-width: 680px;

    margin: 0;

    font-family: var(--font-3);

    font-size: 16px;
    line-height: 1.75;

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


/* =========================================================
   ORDER NUMBER
   ========================================================= */

.wisdom-success__order-number {
    display: inline-flex;

    margin-top: 28px;
    padding: 10px 15px;

    align-items: center;
    gap: 8px;

    border: 1px solid rgba(11, 1, 24, 0.06);
    border-radius: 10px;

    background: var(--background-color);

    font-family: var(--font-3);
    font-size: 13px;

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


.wisdom-success__order-number strong {
    font-weight: 700;
    color: var(--text-color);
}


/* =========================================================
   REGISTRATION
   ========================================================= */

.wisdom-success__registrations {
    margin-top: 46px;

    border-top: 1px solid rgba(11, 1, 24, 0.10);
}


.wisdom-success-item {
    padding: 34px 0;

    border-bottom: 1px solid rgba(11, 1, 24, 0.10);
}


.wisdom-success-item__heading {
    display: flex;

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

    gap: 32px;
}


.wisdom-success-item__type {
    display: inline-block;

    margin-bottom: 7px;

    font-family: var(--font-3);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--accent-color-9);
}


.wisdom-success-item h2 {
    margin: 0;

    font-family: var(--font-1);

    font-size: 23px;
    line-height: 1.3;

    letter-spacing: -0.02em;

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


.wisdom-success-item__price {
    flex-shrink: 0;

    font-family: var(--font-1);

    font-size: 20px;
    font-weight: 600;

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


/* Details */

.wisdom-success-item__details {
    display: grid;

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

    gap: 18px;

    margin-top: 28px;
}


.wisdom-success-item__details > div {
    padding: 15px 16px;

    border-radius: 12px;

    background: rgba(156, 201, 171, 0.08);
}


.wisdom-success-item__details span,
.wisdom-success-item__details strong {
    display: block;
}


.wisdom-success-item__details span {
    margin-bottom: 5px;

    font-family: var(--font-3);

    font-size: 11px;
    line-height: 1.4;

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


.wisdom-success-item__details strong {
    font-family: var(--font-3);

    font-size: 13px;
    line-height: 1.5;

    font-weight: 600;

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


/* =========================================================
   TOTAL
   ========================================================= */

.wisdom-success__total {
    display: flex;

    margin-top: 10px;
    padding: 30px 0 24px;

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

    gap: 20px;
}


.wisdom-success__total > div span {
    display: block;

    margin-bottom: 7px;

    font-family: var(--font-3);

    font-size: 12px;

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


.wisdom-success__total > div strong {
    font-family: var(--font-1);

    font-size: 36px;
    line-height: 1;

    letter-spacing: -0.025em;

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


.wisdom-success__currency {
    padding-bottom: 3px;

    font-family: var(--font-3);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.08em;

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


/* =========================================================
   CONFIRMATION NOTICE
   ========================================================= */

.wisdom-success__notice {
    display: flex;

    margin-top: 4px;
    padding: 18px 20px;

    align-items: center;

    gap: 13px;

    border: 1px solid rgba(67, 165, 116, 0.10);
    border-radius: 14px;

    background: rgba(156, 201, 171, 0.13);
}


.wisdom-success__notice-icon {
    display: flex;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    background: var(--accent-color);

    font-family: var(--font-1);

    font-size: 12px;
    font-weight: 700;

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


.wisdom-success__notice p {
    margin: 0;

    font-family: var(--font-3);

    font-size: 13px;
    line-height: 1.6;

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


/* =========================================================
   ACTIONS
   ========================================================= */

.wisdom-success__actions {
    display: flex;

    margin-top: 30px;

    align-items: center;

    gap: 12px;
}


.wisdom-success__primary-action {
    display: inline-flex;

    min-height: 52px;

    padding: 14px 24px;

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

    border-radius: 13px;

    background: var(--text-color);

    font-family: var(--font-3);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    color: #fff;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}


.wisdom-success__primary-action:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(11, 1, 24, 0.16);

    color: #fff;
}


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

@media (max-width: 900px) {

    .wisdom-success {
        padding-top: 120px;
    }

    .wisdom-success__container {
        width: min(760px, 100%);
    }

    .wisdom-success__card {
        padding: 50px 42px;
    }

    .wisdom-success-item__details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 640px) {

    .wisdom-success {
        padding:
            90px
            16px
            70px;
    }

    .wisdom-success__card {
        padding: 32px 20px;

        border-radius: 22px;
    }

    .wisdom-success__card::after {
        right: 45px;

        width: 65px;
    }

    .wisdom-success__icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;
    }

    .wisdom-success h1 {
        font-size: 38px;
    }

    .wisdom-success__intro {
        font-size: 15px;
    }

    .wisdom-success__registrations {
        margin-top: 36px;
    }

    .wisdom-success-item__heading {
        gap: 15px;
    }

    .wisdom-success-item__details {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .wisdom-success__actions {
        flex-direction: column;

        align-items: stretch;
    }

    .wisdom-success__primary-action {
        width: 100%;
    }
}}

/* =========================================================
   CREATIVE WORKSHOPS PAGE

   Builds on classes already in wisdom.css:
   - Hero:          .wisdom-school-hero-*
   - Headings:      .wisdom-explore-heading / -kicker / -title
   - Registration:  .wisdom-assessment-* (booking shell, product
                    card, form card, fieldsets, choices, errors,
                    order summary, checkout button)

   Only workshop-specific pieces live here.
========================================================= */


/* =========================================================
   HERO
========================================================= */

/* Sage backdrop to match the Creative Workshops tile on Home */

.wisdom-workshop-hero .wisdom-school-hero-visual::before {
    background:
        var(--accent-color-1);
}


.wisdom-workshop-hero-button {
    margin-top: 32px;
}


/* =========================================================
   LISTING SECTION
========================================================= */

.wisdom-workshop-list-section {
    position: relative;

    padding-top: 7rem;
    padding-bottom: 8rem;

    scroll-margin-top: 110px;
}


.wisdom-workshop-list {
    display: grid;

    gap: 26px;
}


/* =========================================================
   WORKSHOP CARD
========================================================= */

.wisdom-workshop-card {
    position: relative;

    display: grid;

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

    gap: 44px;

    align-items: start;

    padding:
        44px;

    overflow: hidden;

    border-radius: 28px;

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


.wisdom-workshop-card-sage {
    background:
        var(--accent-color-1);
}


.wisdom-workshop-card-purple {
    background:
        var(--accent-color-3);
}


.wisdom-workshop-card-orange {
    background:
        var(--accent-color-2);
}


.wisdom-workshop-card-green {
    background:
        var(--accent-color);
}


/* Same outline circles as the program tiles */

.wisdom-workshop-card::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: -120px;
    bottom: -130px;

    border:
        2px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-workshop-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    left: -40px;
    bottom: -50px;

    border:
        2px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   CARD INFO
========================================================= */

.wisdom-workshop-info {
    position: relative;

    z-index: 2;
}


.wisdom-workshop-name {
    margin:
        0 0 18px;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -0.035em;

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


.wisdom-workshop-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;
}


.wisdom-workshop-badge {
    display: inline-flex;

    align-items: center;

    padding:
        8px 13px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.62);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;

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


.wisdom-workshop-description {
    max-width: 480px;

    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.75;

    color:
        var(--text-color);

    opacity: 0.85;
}


/* =========================================================
   SESSIONS
========================================================= */

.wisdom-workshop-sessions {
    position: relative;

    z-index: 2;

    display: grid;

    gap: 10px;
}


.wisdom-workshop-session {
    display: grid;

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

    gap: 20px;

    align-items: center;

    padding:
        18px 18px 18px 22px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.86);
}


.wisdom-workshop-session-when {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.wisdom-workshop-session-when strong {
    font-family:
        var(--font-1);

    font-size: 18px;

    line-height: 1.25;

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


.wisdom-workshop-session-when > span {
    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.5;

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


.wisdom-workshop-session-when .wisdom-workshop-session-status {
    margin-top: 4px;

    font-weight: 700;

    color:
        var(--accent-color-9);
}


.wisdom-workshop-session-when .wisdom-workshop-session-deadline {
    font-size: 12px;
}


.wisdom-workshop-session-side {
    display: flex;

    align-items: center;

    gap: 16px;
}


.wisdom-workshop-session-price {
    font-family:
        var(--font-1);

    font-size: 22px;

    line-height: 1;

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


/* Reserve button */

.wisdom-workshop-session-button {
    display: inline-flex;

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

    min-width: 104px;
    min-height: 46px;

    padding:
        11px 20px;

    border-radius: 999px;

    background:
        var(--text-color);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    color:
        #ffffff;

    transition:
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 250ms ease;
}


.wisdom-workshop-session-button:hover {
    color:
        #ffffff;
}


.wisdom-workshop-session-button:focus-visible {
    outline:
        3px solid var(--accent-color-2);

    outline-offset: 3px;
}


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

    .wisdom-workshop-session-button:not(.is-disabled):hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 10px 22px rgba(11, 1, 24, 0.16);
    }

}


/* Full sessions */

.wisdom-workshop-session.is-full {
    background:
        rgba(255, 255, 255, 0.5);
}


.wisdom-workshop-session.is-full .wisdom-workshop-session-when strong,
.wisdom-workshop-session.is-full .wisdom-workshop-session-price {
    opacity: 0.55;
}


.wisdom-workshop-session.is-full .wisdom-workshop-session-status {
    color:
        var(--accent-color-13);
}


.wisdom-workshop-session-button.is-disabled {
    background:
        transparent;

    border:
        1.5px solid rgba(11, 1, 24, 0.25);

    color:
        var(--text-color-2);

    cursor: default;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.wisdom-workshop-empty {
    max-width: 720px;

    margin:
        0 auto;

    padding:
        60px 40px;

    border-radius: 28px;

    background:
        var(--accent-color-4);

    text-align: center;
}


.wisdom-workshop-empty h3 {
    margin:
        0 0 12px;

    font-family:
        var(--font-1);

    font-size: 30px;

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


.wisdom-workshop-empty p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.75;

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


.wisdom-workshop-empty a {
    font-weight: 700;

    color:
        var(--accent-color-9);
}


/* =========================================================
   REGISTRATION SECTION
========================================================= */

.wisdom-workshop-registration-section {
    padding-top: 2rem;

    scroll-margin-top: 110px;
}


/* Selected session in the left card */

.wisdom-workshop-selected {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin:
        28px 0 22px;

    padding:
        18px 20px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.72);
}


.wisdom-workshop-selected strong {
    font-family:
        var(--font-1);

    font-size: 20px;

    line-height: 1.25;

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


.wisdom-workshop-selected > span:last-child {
    font-family:
        var(--font-3);

    font-size: 14px;

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


/* What to expect */

.wisdom-workshop-expect {
    position: relative;

    z-index: 2;

    margin:
        26px 0 0;

    padding: 0;

    list-style: none;
}


.wisdom-workshop-expect li {
    position: relative;

    padding:
        10px 0 10px 30px;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.55;

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


.wisdom-workshop-expect li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 14px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(--accent-color-2);
}


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

@media (max-width: 1199.98px) {

    .wisdom-workshop-card {
        gap: 32px;

        padding:
            36px;
    }

}


@media (max-width: 991.98px) {

    .wisdom-workshop-card {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767.98px) {

    .wisdom-workshop-list-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }


    .wisdom-workshop-card {
        padding:
            28px 22px;

        border-radius: 22px;
    }


    .wisdom-workshop-empty {
        padding:
            44px 24px;
    }

}


@media (max-width: 575.98px) {

    .wisdom-workshop-session {
        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            18px;
    }


    .wisdom-workshop-session-side {
        justify-content: space-between;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-workshop-session-button {
        transition: none;
    }

}


/* =========================================================
   CARD PRICE: "per class"
========================================================= */

.wisdom-workshop-session-price small {
    display: block;

    margin-top: 3px;

    font-family:
        var(--font-3);

    font-size: 11px;

    font-weight: 600;

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


/* =========================================================
   SWIPE HINT (phones)
========================================================= */

.wisdom-workshop-grid-hint {
    display: none;

    margin:
        0 0 8px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 600;

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


@media (max-width: 767.98px) {

    .wisdom-workshop-grid-hint {
        display: block;
    }

}


/* =========================================================
   WEEKLY CLASS GRID
========================================================= */

.wisdom-workshop-grid-wrap {
    overflow-x: auto;

    margin:
        0 -4px;

    padding:
        4px;

    -webkit-overflow-scrolling: touch;
}


.wisdom-workshop-grid {
    width: 100%;

    min-width: 640px;

    border-collapse: separate;

    border-spacing: 6px;

    font-family:
        var(--font-3);
}


/* Column headers: day, workshop, time, price */

.wisdom-workshop-grid thead th {
    padding:
        10px 6px 12px;

    vertical-align: bottom;

    text-align: center;

    font-weight: 400;
}


.wisdom-workshop-grid thead th strong {
    display: block;

    font-family:
        var(--font-1);

    font-size: 13px;

    line-height: 1.25;

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


.wisdom-workshop-grid thead th small {
    display: block;

    margin-top: 2px;

    font-size: 11px;

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


.wisdom-workshop-grid-day {
    display: inline-block;

    margin-bottom: 6px;

    padding:
        3px 10px;

    border-radius: 999px;

    background:
        var(--accent-color-4);

    font-size: 11px;

    font-weight: 800;

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


.wisdom-workshop-grid-price {
    font-weight: 700;
}


/* Week labels (first column) */

.wisdom-workshop-grid-week {
    position: sticky;

    left: 0;

    z-index: 1;

    min-width: 104px;

    padding:
        0 8px 0 0;

    background:
        var(--accent-color-5);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.3;

    text-align: left;

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


.wisdom-workshop-grid td {
    padding: 0;

    text-align: center;
}


/* A class cell: a card you tick */

.wisdom-workshop-slot {
    position: relative;

    display: block;

    cursor: pointer;
}


.wisdom-workshop-slot input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.wisdom-workshop-slot > span {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    min-height: 58px;

    justify-content: center;

    padding:
        8px 4px;

    border:
        1px solid rgba(11, 1, 24, 0.12);

    border-radius: 12px;

    background:
        #ffffff;

    transition:
        background 160ms ease,

        border-color 160ms ease;
}


.wisdom-workshop-slot b {
    font-size: 13px;

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


.wisdom-workshop-slot small {
    font-size: 11px;

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


.wisdom-workshop-slot:hover > span {
    border-color:
        var(--accent-color);
}


.wisdom-workshop-slot input:checked + span {
    border-color:
        var(--accent-color-9);

    background:
        var(--accent-color);
}


.wisdom-workshop-slot input:checked + span small {
    color:
        var(--text-color);
}


.wisdom-workshop-slot input:checked + span::after {
    content: "✓";

    position: absolute;

    top: 4px;
    right: 7px;

    font-size: 11px;

    font-weight: 900;

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


.wisdom-workshop-slot input:focus-visible + span {
    outline:
        3px solid rgba(156, 201, 171, 0.6);

    outline-offset: 2px;
}


.wisdom-workshop-slot.is-full {
    cursor: not-allowed;
}


.wisdom-workshop-slot.is-full > span {
    border-style: dashed;

    background:
        rgba(11, 1, 24, 0.03);

    opacity: 0.6;
}


.wisdom-workshop-slot-none {
    display: block;

    color:
        rgba(11, 1, 24, 0.25);
}


/* "Whole week" / "Every Mon" buttons */

.wisdom-workshop-grid-toggle {
    width: 100%;

    padding:
        7px 8px;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    color:
        var(--accent-color-9);

    cursor: pointer;
}


.wisdom-workshop-grid-toggle:hover {
    background:
        rgba(156, 201, 171, 0.18);
}


.wisdom-workshop-grid-toggle:focus-visible {
    outline:
        3px solid rgba(156, 201, 171, 0.6);
}


.wisdom-workshop-grid-action {
    min-width: 96px;
}


/* Selection list in the left card */

.wisdom-workshop-selected-list {
    margin:
        8px 0 0;

    padding: 0;

    list-style: none;
}


.wisdom-workshop-selected-list li {
    display: flex;

    flex-direction: column;

    padding:
        8px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.08);

    font-family:
        var(--font-3);
}


.wisdom-workshop-selected-list strong {
    font-size: 14px;
}


.wisdom-workshop-selected-list span {
    font-size: 12px;

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


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

    .wisdom-workshop-slot > span {
        transition: none;
    }

}

/* =========================================================
   CAMPS PAGE

   Builds on classes already in wisdom.css:
   - Hero:          .wisdom-school-hero-*
   - Headings:      .wisdom-explore-heading / -kicker / -title
   - Registration:  .wisdom-assessment-* (booking shell, product
                    card, form card, fieldsets, choices, errors,
                    order summary, checkout button)

   Only camp-specific pieces live here.
========================================================= */


/* =========================================================
   HERO
========================================================= */

.wisdom-camp-hero .wisdom-school-hero-visual::before {
    background:
        var(--accent-color-2);
}


.wisdom-camp-hero-button {
    margin-top: 32px;
}


/* =========================================================
   HALF-DAY / FULL-DAY
========================================================= */

.wisdom-camp-format-section {
    padding-top: 7rem;
    padding-bottom: 3rem;
}


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

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

    gap: 22px;
}


.wisdom-camp-format-card {
    position: relative;

    padding:
        38px 36px;

    overflow: hidden;

    border-radius: 26px;

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


.wisdom-camp-format-card-half {
    background:
        var(--accent-color-4);
}


.wisdom-camp-format-card-full {
    background:
        var(--accent-color);
}


.wisdom-camp-format-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    border:
        2px solid rgba(255, 255, 255, 0.45);

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-camp-format-time {
    display: inline-flex;

    margin-bottom: 18px;

    padding:
        8px 14px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 800;
}


.wisdom-camp-format-card h3 {
    margin:
        0 0 14px;

    font-family:
        var(--font-1);

    font-size:
        clamp(1.9rem,
            2.6vw,
            2.5rem);

    line-height: 1.05;

    letter-spacing: -0.03em;
}


.wisdom-camp-format-card p {
    max-width: 520px;

    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.75;

    opacity: 0.88;
}


/* =========================================================
   LISTING SECTION
========================================================= */

.wisdom-camp-list-section {
    padding-top: 5rem;
    padding-bottom: 8rem;

    scroll-margin-top: 110px;
}


.wisdom-camp-list {
    display: grid;

    gap: 26px;
}


/* =========================================================
   CAMP CARD
========================================================= */

.wisdom-camp-card {
    position: relative;

    display: grid;

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

    gap: 44px;

    align-items: start;

    padding:
        44px;

    overflow: hidden;

    border-radius: 28px;

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


.wisdom-camp-card-orange {
    background:
        var(--accent-color-2);
}


.wisdom-camp-card-green {
    background:
        var(--accent-color);
}


.wisdom-camp-card-purple {
    background:
        var(--accent-color-3);
}


.wisdom-camp-card-sage {
    background:
        var(--accent-color-1);
}


.wisdom-camp-card::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: -120px;
    bottom: -130px;

    border:
        2px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    pointer-events: none;
}


.wisdom-camp-info,
.wisdom-camp-weeks {
    position: relative;

    z-index: 2;
}


.wisdom-camp-name {
    margin:
        0 0 18px;

    font-family:
        var(--font-1);

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

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.wisdom-camp-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
}


.wisdom-camp-badge {
    display: inline-flex;

    padding:
        8px 13px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.62);

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 700;
}


.wisdom-camp-description {
    max-width: 480px;

    margin:
        0 0 24px;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.75;

    opacity: 0.85;
}


/* =========================================================
   PRICE OPTIONS (on the card)
========================================================= */

.wisdom-camp-prices {
    max-width: 420px;

    padding:
        6px 20px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.72);
}


.wisdom-camp-price-row {
    display: flex;

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

    gap: 16px;

    padding:
        12px 0;

    border-top:
        1px solid rgba(11, 1, 24, 0.08);

    font-family:
        var(--font-3);

    font-size: 15px;
}


.wisdom-camp-price-row:first-child {
    border-top: 0;
}


.wisdom-camp-price-row strong {
    font-family:
        var(--font-1);

    font-size: 18px;
}


.wisdom-camp-prices-soon {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    opacity: 0.7;
}


/* =========================================================
   WEEKS
========================================================= */

.wisdom-camp-weeks {
    display: grid;

    gap: 10px;
}


.wisdom-camp-week {
    display: flex;

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

    gap: 18px;

    padding:
        18px 18px 18px 22px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.86);
}


.wisdom-camp-week-when {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.wisdom-camp-week-when strong {
    font-family:
        var(--font-1);

    font-size: 18px;

    line-height: 1.25;
}


.wisdom-camp-week-status {
    margin-top: 3px;

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    color:
        var(--accent-color-9);
}


.wisdom-camp-week-status.is-full {
    color:
        var(--accent-color-13);
}


.wisdom-camp-week-deadline {
    font-family:
        var(--font-3);

    font-size: 12px;

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


.wisdom-camp-week-button {
    display: inline-flex;

    flex: 0 0 auto;

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

    min-width: 104px;
    min-height: 46px;

    padding:
        11px 20px;

    border-radius: 999px;

    background:
        var(--text-color);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    color:
        #ffffff;

    transition:
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 250ms ease;
}


.wisdom-camp-week-button:hover {
    color:
        #ffffff;
}


.wisdom-camp-week-button:focus-visible {
    outline:
        3px solid var(--accent-color-2);

    outline-offset: 3px;
}


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

    .wisdom-camp-week-button:not(.is-disabled):hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 10px 22px rgba(11, 1, 24, 0.16);
    }

}


.wisdom-camp-week.is-full {
    background:
        rgba(255, 255, 255, 0.5);
}


.wisdom-camp-week.is-full .wisdom-camp-week-when strong {
    opacity: 0.55;
}


.wisdom-camp-week-button.is-disabled {
    background:
        transparent;

    border:
        1.5px solid rgba(11, 1, 24, 0.25);

    color:
        var(--text-color-2);

    cursor: default;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.wisdom-camp-empty {
    max-width: 720px;

    margin:
        0 auto;

    padding:
        60px 40px;

    border-radius: 28px;

    background:
        var(--accent-color-4);

    text-align: center;
}


.wisdom-camp-empty h3 {
    margin:
        0 0 12px;

    font-family:
        var(--font-1);

    font-size: 30px;
}


.wisdom-camp-empty p {
    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.75;

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


.wisdom-camp-empty a {
    font-weight: 700;

    color:
        var(--accent-color-9);
}


/* =========================================================
   REGISTRATION
========================================================= */

.wisdom-camp-registration-section {
    padding-top: 2rem;

    scroll-margin-top: 110px;
}


/* Selection summary in the left card */

.wisdom-camp-selected {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin:
        28px 0 22px;

    padding:
        18px 20px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.72);
}


.wisdom-camp-selected strong {
    font-family:
        var(--font-1);

    font-size: 20px;

    line-height: 1.25;
}


.wisdom-camp-selected > span {
    font-family:
        var(--font-3);

    font-size: 14px;

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


.wisdom-camp-selected .wisdom-camp-selected-option {
    margin-top: 6px;

    font-weight: 700;

    color:
        var(--accent-color-9);
}


/* Day formats list */

.wisdom-camp-expect {
    position: relative;

    z-index: 2;

    margin:
        26px 0 0;

    padding: 0;

    list-style: none;
}


.wisdom-camp-expect li {
    position: relative;

    padding:
        10px 0 10px 30px;

    font-family:
        var(--font-3);

    font-size: 14px;

    line-height: 1.55;
}


.wisdom-camp-expect li strong {
    display: block;

    font-family:
        var(--font-1);

    font-size: 15px;
}


.wisdom-camp-expect li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(--accent-color-2);
}


/* =========================================================
   FORM CHOICES
========================================================= */

.wisdom-camp-session-options,
.wisdom-camp-option-grid {
    display: grid;

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

    gap: 12px;
}


.wisdom-camp-choice-meta {
    margin-top: 10px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 700;

    color:
        var(--accent-color-9);
}


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


.wisdom-camp-option-group[hidden] {
    display: none;
}


.wisdom-camp-option-group-title {
    display: block;

    margin-bottom: 10px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;

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


/* With JS, only one camp's options show, so no title needed */

.is-enhanced .wisdom-camp-option-group-title {
    display: none;
}


.wisdom-camp-option-price {
    margin-top: 12px;

    padding-top: 10px;

    border-top:
        1px solid rgba(11, 1, 24, 0.08);

    font-family:
        var(--font-1);

    font-size: 18px;
}


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

@media (max-width: 1199.98px) {

    .wisdom-camp-card {
        gap: 32px;

        padding:
            36px;
    }

}


@media (max-width: 991.98px) {

    .wisdom-camp-card,
    .wisdom-camp-format-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767.98px) {

    .wisdom-camp-format-section {
        padding-top: 5rem;
    }


    .wisdom-camp-list-section {
        padding-bottom: 5rem;
    }


    .wisdom-camp-card,
    .wisdom-camp-format-card {
        padding:
            28px 22px;

        border-radius: 22px;
    }


    .wisdom-camp-session-options,
    .wisdom-camp-option-grid {
        grid-template-columns: 1fr;
    }


    .wisdom-camp-empty {
        padding:
            44px 24px;
    }

}


@media (max-width: 575.98px) {

    .wisdom-camp-week {
        flex-direction: column;

        align-items: stretch;
    }


    .wisdom-camp-week-button {
        width: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-camp-week-button {
        transition: none;
    }

}
.wisdom-camp-week-label {
    display: block;

    margin:
        16px 0 8px;

    font-family:
        var(--font-3);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;

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


.wisdom-camp-day-grid + .wisdom-camp-week-label {
    margin-top: 20px;
}
/* =========================================================
   DAY PICKER
========================================================= */

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


.wisdom-camp-day-group[hidden] {
    display: none;
}


.wisdom-camp-day-grid {
    display: grid;

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

    gap: 10px;
}


.wisdom-camp-day {
    position: relative;

    display: block;

    cursor: pointer;
}


/* Hide the native radio; the card below is the control */

.wisdom-camp-day input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.wisdom-camp-day > span {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    padding:
        14px 8px;

    border:
        1px solid rgba(11, 1, 24, 0.12);

    border-radius: 14px;

    background:
        var(--accent-color-5);

    text-align: center;

    transition:
        background 220ms ease,

        border-color 220ms ease,

        transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}


.wisdom-camp-day strong {
    font-family:
        var(--font-1);

    font-size: 15px;
}


.wisdom-camp-day small {
    font-family:
        var(--font-3);

    font-size: 12px;

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


.wisdom-camp-day input:checked + span {
    border-color:
        var(--accent-color);

    background:
        var(--accent-color);

    transform:
        translateY(-2px);
}


.wisdom-camp-day input:checked + span small {
    color:
        var(--text-color);
}


.wisdom-camp-day input:focus-visible + span {
    outline:
        3px solid rgba(156, 201, 171, 0.35);

    outline-offset: 2px;
}


/* Start days the option can't fit into */

.wisdom-camp-day input:disabled + span {
    opacity: 0.45;

    cursor: not-allowed;
}


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

    .wisdom-camp-day input:not(:disabled) + span:hover {
        border-color:
            var(--accent-color);
    }

}


@media (max-width: 767.98px) {

    .wisdom-camp-day-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


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

    .wisdom-camp-day > span {
        transition: none;
    }

}
/* =========================================================
   STORY CARDS: STICKER FINISH

   The artwork images already have playful shapes (stamp,
   arches, confetti). This frames them in the same spirit:
   a white die-cut edge that follows each shape, a soft
   shadow, the same size in every card and a slight
   hand-placed tilt. The corner rings become confetti dots
   that match the stickers in the images.
========================================================= */

/* ---------- Image: same size, sticker edge ---------- */

.wisdom-story-image {
    height: 300px;

    padding-top: 32px;

    /*
     * Four 0-blur shadows draw a white outline that follows
     * the transparent edges of the PNG; the last one is the
     * soft shadow underneath.
     */
    filter:
        drop-shadow(4px 0 0 #ffffff)
        drop-shadow(-4px 0 0 #ffffff)
        drop-shadow(0 4px 0 #ffffff)
        drop-shadow(0 -4px 0 #ffffff)
        drop-shadow(0 14px 18px rgba(11, 1, 24, 0.16));
}


.wisdom-story-image img {
    --story-tilt: 0deg;
    --story-scale: 1;

    max-width: 94%;

    transform:
        rotate(var(--story-tilt))
        scale(var(--story-scale));

    transform-origin:
        center bottom;
}


.wisdom-story-card:nth-child(1) .wisdom-story-image img {
    --story-tilt: -2deg;
}


.wisdom-story-card:nth-child(2) .wisdom-story-image img {
    --story-tilt: 1.5deg;
}


.wisdom-story-card:nth-child(3) .wisdom-story-image img {
    --story-tilt: -1.2deg;
}


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

    /* The sticker straightens and lifts a touch */
    .wisdom-story-card:hover .wisdom-story-image img {
        --story-tilt: 0deg;
        --story-scale: 1.035;

        transform:
            rotate(var(--story-tilt))
            scale(var(--story-scale));
    }

}


/* ---------- Corner confetti (replaces the rings) ---------- */

.wisdom-story-card::before,
.wisdom-story-card::after {
    border: 3px solid #ffffff;

    box-shadow:
        0 4px 10px rgba(11, 1, 24, 0.10);
}


/* Larger dot */

.wisdom-story-card::before {
    width: 34px;
    height: 34px;

    right: 26px;
    top: 24px;
}


/* Smaller dot */

.wisdom-story-card::after {
    width: 18px;
    height: 18px;

    right: 66px;
    top: 16px;
}


/* Contrasting colors per card, from the brand palette */

.wisdom-story-card-green::before {
    background: var(--accent-color-2);
}

.wisdom-story-card-green::after {
    background: var(--accent-color-3);
}


.wisdom-story-card-purple::before {
    background: var(--accent-color);
}

.wisdom-story-card-purple::after {
    background: var(--accent-color-2);
}


.wisdom-story-card-orange::before {
    background: var(--accent-color-3);
}

.wisdom-story-card-orange::after {
    background: var(--accent-color);
}


/* Keep titles clear of the confetti */

.wisdom-story-title {
    padding-right: 72px;
}


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

@media (max-width: 1199.98px) {

    /* Third card spans the full row: keep its image the
       same size as the others. */
    .wisdom-story-card:last-child .wisdom-story-image {
        height: 300px;
    }

}


@media (max-width: 767.98px) {

    .wisdom-story-image,
    .wisdom-story-card:last-child .wisdom-story-image {
        height: 280px;
    }

}


@media (max-width: 575.98px) {

    .wisdom-story-image,
    .wisdom-story-card:last-child .wisdom-story-image {
        height: 240px;

        border-radius: 0;
    }


    .wisdom-story-image {
        filter:
            drop-shadow(3px 0 0 #ffffff)
            drop-shadow(-3px 0 0 #ffffff)
            drop-shadow(0 3px 0 #ffffff)
            drop-shadow(0 -3px 0 #ffffff)
            drop-shadow(0 10px 14px rgba(11, 1, 24, 0.14));
    }


    .wisdom-story-card::before {
        width: 28px;
        height: 28px;

        right: 20px;
        top: 20px;
    }


    .wisdom-story-card::after {
        width: 15px;
        height: 15px;

        right: 54px;
        top: 14px;
    }


    .wisdom-story-title {
        padding-right: 60px;
    }

}


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

    .wisdom-story-card:hover .wisdom-story-image img {
        --story-scale: 1;
    }

}
/* =========================================================
   STORY CARDS: FIGURE WRAPPER (used by all options)
========================================================= */

.wisdom-story-figure {
    position: relative;

    margin:
        auto 0 0;
}


/* Tape and caption only show in scrapbook mode */

.wisdom-story-tape,
.wisdom-story-caption {
    display: none;
}


/* =========================================================
   OPTION 1: SCRAPBOOK
   Turn on with class="... wisdom-story-section is-scrapbook"
========================================================= */

/* The image keeps its natural height so the tape always
   lands on its top edge. */

.is-scrapbook .wisdom-story-image {
    height: auto;

    padding-top: 30px;
}


.is-scrapbook .wisdom-story-image img {
    width: auto;
    height: auto;

    max-width: 90%;
    max-height: 270px;
}


/* Washi tape: striped, see-through, torn ends */

.is-scrapbook .wisdom-story-tape {
    --tape-color: rgba(255, 239, 198, 0.88);

    position: absolute;

    z-index: 3;

    top: 14px;
    left: 50%;

    display: block;

    width: 118px;
    height: 30px;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.38) 0 6px,
            transparent 6px 12px
        ),
        var(--tape-color);

    box-shadow:
        0 2px 6px rgba(11, 1, 24, 0.10);

    /* Zig-zag "torn" ends */
    clip-path:
        polygon(
            0 0, 4% 16%, 0 33%, 4% 50%, 0 67%, 4% 84%, 0 100%,
            100% 100%, 96% 84%, 100% 67%, 96% 50%, 100% 33%, 96% 16%, 100% 0
        );

    transform:
        translateX(-50%) rotate(-4deg);

    pointer-events: none;
}


/* Contrasting tape per card */

.is-scrapbook .wisdom-story-card-green .wisdom-story-tape {
    --tape-color: rgba(254, 176, 108, 0.85);
}


.is-scrapbook .wisdom-story-card-purple .wisdom-story-tape {
    --tape-color: rgba(156, 201, 171, 0.88);

    transform:
        translateX(-50%) rotate(3deg);
}


.is-scrapbook .wisdom-story-card-orange .wisdom-story-tape {
    --tape-color: rgba(212, 171, 208, 0.9);

    transform:
        translateX(-50%) rotate(-2deg);
}


/* Handwritten caption */

.is-scrapbook .wisdom-story-caption {
    display: block;

    margin-top: 14px;

    font-family:
        var(--font-2), "Segoe Print", "Bradley Hand", cursive;

    font-size: 24px;

    line-height: 1.1;

    text-align: center;

    color:
        var(--text-color);

    transform:
        rotate(-2deg);
}


.is-scrapbook .wisdom-story-card-purple .wisdom-story-caption {
    transform:
        rotate(1.5deg);
}


/* Corner confetti would compete with the tape: hide it */

.is-scrapbook .wisdom-story-card::before,
.is-scrapbook .wisdom-story-card::after {
    display: none;
}


.is-scrapbook .wisdom-story-title {
    padding-right: 0;
}


@media (max-width: 575.98px) {

    .is-scrapbook .wisdom-story-image img {
        max-height: 220px;
    }


    .is-scrapbook .wisdom-story-tape {
        width: 96px;
        height: 26px;
    }


    .is-scrapbook .wisdom-story-caption {
        font-size: 21px;
    }

}
/* =========================================================
   OPTION 2: DOODLE PATTERN
   Turn on with class="... wisdom-story-section is-doodle"
   (can also be combined: "is-scrapbook is-doodle")

   A faint pattern of the same doodles as the artwork
   (sparkles, rings, squiggles, plus signs, scallops, dots)
   covers each card, fading out behind the text.
========================================================= */

.is-doodle .wisdom-story-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    display: block;

    width: auto;
    height: auto;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    background-color: transparent;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 18 L31 27 L40 30 L31 33 L28 42 L25 33 L16 30 L25 27 Z'/%3E%3Ccircle cx='118' cy='30' r='7'/%3E%3Cpath d='M66 74 q8 -10 16 0 t16 0 t16 0'/%3E%3Cpath d='M30 110 v14 M23 117 h14'/%3E%3Cpath d='M94 132 a8 8 0 0 1 16 0 a8 8 0 0 1 16 0'/%3E%3Ccircle cx='140' cy='88' r='3' fill='white'/%3E%3Ccircle cx='58' cy='146' r='2.5' fill='white'/%3E%3C/svg%3E");

    background-size: 160px 160px;

    opacity: 0.45;

    /* Fade the pattern out behind the text */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 30%,
        #000 70%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 30%,
        #000 70%
    );

    pointer-events: none;
}


/* Offset each card's pattern so they don't repeat in sync */

.is-doodle .wisdom-story-card:nth-child(2)::before {
    background-position: 54px 38px;
}


.is-doodle .wisdom-story-card:nth-child(3)::before {
    background-position: 108px 76px;
}


/* The second pseudo-element isn't needed here */

.is-doodle .wisdom-story-card::after {
    display: none;
}


/* Keep text and image above the pattern */

.is-doodle .wisdom-story-content,
.is-doodle .wisdom-story-figure {
    position: relative;

    z-index: 2;
}


.is-doodle .wisdom-story-title {
    padding-right: 0;
}


@media (max-width: 575.98px) {

    .is-doodle .wisdom-story-card::before {
        background-size: 130px 130px;

        opacity: 0.4;
    }

}
/* =========================================================
   OPTION 3: BREAK-OUT IMAGES
   Turn on with class="... wisdom-story-section is-breakout"
   (combines well with "is-doodle")

   Each image moves to the top of its card and pops out
   over the card's top edge; title and text sit below.
========================================================= */

/* Room above the cards for the pop-out */

.is-breakout .wisdom-story-grid {
    padding-top: 130px;

    /* Rows that wrap (tablet/mobile) need room too */
    row-gap: 150px;
}


.is-breakout .wisdom-story-card {
    min-height: auto;

    padding-top: 0;

    /* Let the image overflow the top edge */
    overflow: visible;
}


/* Image first, pulled up over the edge */

.is-breakout .wisdom-story-figure {
    order: -1;

    margin:
        -130px 0 26px;
}


.is-breakout .wisdom-story-image {
    height: 290px;

    padding-top: 0;
}


.is-breakout .wisdom-story-content {
    flex: 1;
}


.is-breakout .wisdom-story-title {
    padding-right: 0;
}


/* Corner confetti moves to the bottom-right corner,
   away from the image */

.is-breakout .wisdom-story-card::before {
    top: auto;
    bottom: 24px;
}


.is-breakout .wisdom-story-card::after {
    top: auto;
    bottom: 64px;
    right: 30px;
}


/* With the doodle pattern: strongest at the top, around
   the image, fading out behind the text */

.is-breakout.is-doodle .wisdom-story-card::before {
    top: 0;
    bottom: 0;

    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        transparent 45%,
        #000 85%
    );
    mask-image: linear-gradient(
        to top,
        transparent 0%,
        transparent 45%,
        #000 85%
    );
}


/* Tablet: third card spans the row */

@media (max-width: 1199.98px) {

    .is-breakout .wisdom-story-card:last-child .wisdom-story-image {
        height: 290px;
    }

}


/* Mobile: a smaller pop-out */

@media (max-width: 767.98px) {

    .is-breakout .wisdom-story-grid {
        padding-top: 100px;

        row-gap: 120px;
    }


    .is-breakout .wisdom-story-figure {
        margin:
            -100px 0 22px;
    }


    .is-breakout .wisdom-story-image,
    .is-breakout .wisdom-story-card:last-child .wisdom-story-image {
        height: 250px;
    }

}


@media (max-width: 575.98px) {

    .is-breakout .wisdom-story-grid {
        padding-top: 80px;

        row-gap: 100px;
    }


    .is-breakout .wisdom-story-figure {
        margin:
            -80px 0 20px;
    }


    .is-breakout .wisdom-story-image,
    .is-breakout .wisdom-story-card:last-child .wisdom-story-image {
        height: 210px;
    }

}
/* =========================================================
   HOME HERO — V2
   Paste at the END of wisdom.css.

   Keeps the existing collision title (.wisdom-title-*),
   the floating outline circles (.wisdom-hero-shape-*) and
   their animations. Everything new is scoped to
   .wisdom-home-hero.is-v2 so it wins over the old
   responsive padding without touching the old rules.

   Timeline (title is already 120ms → ~1750ms):
     kicker      0ms
     lead     1250ms
     buttons  1400ms
     trust    1550ms
     stickers 1500ms → 1950ms (staggered pop)
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.wisdom-home-hero.is-v2 {
    min-height: 0;

    padding-top: 14rem;
    padding-bottom: 7rem;
}


.wisdom-hero-stage {
    position: relative;

    max-width: 1280px;

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


.wisdom-home-hero.is-v2 .wisdom-hero-inner {
    max-width: 960px;
}


/* =========================================================
   KICKER
========================================================= */

.wisdom-hero-kicker {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 22px;

    padding: 8px 16px 8px 12px;

    border-radius: 999px;

    background:
        var(--accent-color-4);

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.02em;

    color:
        var(--text-color);

    opacity: 0;

    animation:
        wisdomHeroRise 700ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;
}


.wisdom-hero-kicker-dot {
    position: relative;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--accent-color-9);
}


/* Soft "live" pulse around the dot */

.wisdom-hero-kicker-dot::after {
    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border:
        2px solid var(--accent-color-9);

    opacity: 0;

    animation:
        wisdomHeroPulse 2.4s ease-out 1.2s infinite;
}


/* =========================================================
   LEAD
========================================================= */

.wisdom-hero-lead {
    max-width: 600px;

    margin: 34px auto 0;

    font-family:
        var(--font-3);

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

    line-height: 1.7;

    color:
        var(--text-color-2);

    opacity: 0;

    animation:
        wisdomHeroRise 800ms cubic-bezier(0.16, 1, 0.3, 1) 1250ms forwards;
}


/* =========================================================
   BUTTONS
========================================================= */

.wisdom-hero-actions {
    display: flex;

    flex-wrap: wrap;

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

    gap: 14px;

    margin-top: 34px;

    opacity: 0;

    animation:
        wisdomHeroRise 800ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms forwards;
}


.wisdom-hero-cta {
    box-sizing: border-box;

    display: inline-flex;

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

    gap: 10px;

    min-height: 54px;

    padding: 14px 28px;

    border-radius: 999px;

    font-family:
        var(--font-3);

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 250ms ease,
        background-color 250ms ease,
        color 250ms ease;
}


.wisdom-hero-cta.is-primary {
    background:
        var(--text-color);

    color: #ffffff;

    /* small orange "offset print" shadow */
    box-shadow:
        4px 4px 0 var(--accent-color-2);
}


.wisdom-hero-cta.is-primary:hover {
    color: #ffffff;
}


.wisdom-hero-cta.is-secondary {
    background:
        transparent;

    border:
        2px solid var(--text-color);

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


.wisdom-hero-cta.is-secondary:hover {
    background:
        var(--text-color);

    color: #ffffff;
}


.wisdom-hero-cta:focus-visible {
    outline:
        3px solid var(--accent-color-2);

    outline-offset: 4px;
}


.wisdom-hero-cta-arrow {
    display: inline-block;

    transition:
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    .wisdom-hero-cta.is-primary:hover {
        transform:
            translate(-2px, -2px);

        box-shadow:
            6px 6px 0 var(--accent-color-2);
    }


    .wisdom-hero-cta.is-primary:hover .wisdom-hero-cta-arrow {
        transform:
            translateX(4px);
    }


    .wisdom-hero-cta.is-secondary:hover {
        transform:
            translateY(-2px);
    }

}


/* =========================================================
   TRUST ROW
========================================================= */

.wisdom-hero-trust {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px 26px;

    margin: 34px 0 0;

    padding: 0;

    list-style: none;

    opacity: 0;

    animation:
        wisdomHeroRise 800ms cubic-bezier(0.16, 1, 0.3, 1) 1550ms forwards;
}


.wisdom-hero-trust li {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family:
        var(--font-3);

    font-size: 14px;

    font-weight: 600;

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


/* Little green check */

.wisdom-hero-trust li::before {
    content: "";

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        var(--accent-color)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230b0118' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 12px 12px no-repeat;
}


/* =========================================================
   STICKERS — shared
   Wrapper owns position + tilt (rotate),
   animations use scale / translate so they don't fight.
========================================================= */

.wisdom-hero-sticker {
    position: absolute;

    z-index: 3;

    pointer-events: none;

    opacity: 0;

    scale: 0.6;
}


/* Die-cut photo stickers: same outline as the story cards */

.wisdom-hero-sticker-photo img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(4px 0 0 #ffffff)
        drop-shadow(-4px 0 0 #ffffff)
        drop-shadow(0 4px 0 #ffffff)
        drop-shadow(0 -4px 0 #ffffff)
        drop-shadow(0 14px 18px rgba(11, 1, 24, 0.16));
}


.wisdom-hero-sticker-photo.is-left {
    width: clamp(150px, 13vw, 210px);

    top: -20px;
    left: 0;

    rotate: -8deg;

    animation:
        wisdomHeroPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1500ms forwards,
        wisdomHeroBob 7s ease-in-out 2300ms infinite;
}


.wisdom-hero-sticker-photo.is-right {
    width: clamp(150px, 13vw, 210px);

    right: 0;
    bottom: 10px;

    rotate: 7deg;

    animation:
        wisdomHeroPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1650ms forwards,
        wisdomHeroBob 8s ease-in-out 2500ms infinite reverse;
}


/* =========================================================
   STAMP (rotating text ring)
========================================================= */

.wisdom-hero-stamp {
    top: -40px;
    right: 7%;

    width: 124px;
    height: 124px;

    border-radius: 50%;

    background:
        var(--accent-color-7);

    box-shadow:
        0 0 0 4px #ffffff,
        0 12px 22px rgba(11, 1, 24, 0.12);

    rotate: 10deg;

    animation:
        wisdomHeroPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1800ms forwards;
}


.wisdom-hero-stamp-ring {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    animation:
        wisdomHeroSpin 22s linear infinite;
}


.wisdom-hero-stamp-ring text {
    font-family:
        var(--font-3);

    font-size: 10.5px;

    font-weight: 700;

    text-transform: uppercase;

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


.wisdom-hero-stamp-core {
    position: absolute;

    top: 50%;
    left: 50%;

    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background:
        var(--accent-color-2);

    font-family:
        var(--font-1);

    font-size: 17px;

    font-weight: 700;

    color:
        var(--text-color);

    transform:
        translate(-50%, -50%);
}


/* =========================================================
   PAPER LABEL (taped note)
========================================================= */

.wisdom-hero-label {
    left: 3%;
    bottom: 60px;

    padding: 18px 22px 16px;

    border-radius: 6px;

    background:
        var(--accent-color-3);

    box-shadow:
        0 0 0 4px #ffffff,
        0 12px 20px rgba(11, 1, 24, 0.12);

    font-family:
        var(--font-2);

    font-size: 20px;

    line-height: 1.15;

    text-align: center;

    color:
        var(--text-color);

    rotate: -5deg;

    animation:
        wisdomHeroPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1950ms forwards;
}


/* Washi tape strip */

.wisdom-hero-label::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 64px;
    height: 20px;

    background:
        rgba(254, 176, 108, 0.75);

    transform:
        translateX(-50%) rotate(3deg);

    clip-path:
        polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 0,
                100% 92%, 94% 100%, 88% 90%, 82% 100%, 76% 92%, 0 100%);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes wisdomHeroRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes wisdomHeroPop {
    0% {
        opacity: 0;
        scale: 0.6;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}


@keyframes wisdomHeroBob {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}


@keyframes wisdomHeroSpin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes wisdomHeroPulse {
    0% {
        opacity: 0.7;
        transform: scale(0.6);
    }

    80%,
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


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

/* Not enough room beside the headline: drop the photos
   and the label, keep only the stamp. */

@media (max-width: 1199.98px) {

    .wisdom-home-hero.is-v2 {
        padding-top: 12rem;
        padding-bottom: 6rem;
    }


    .wisdom-hero-sticker-photo,
    .wisdom-hero-label {
        display: none;
    }


    .wisdom-hero-stamp {
        top: -70px;
        right: 0;

        width: 108px;
        height: 108px;
    }

}


@media (max-width: 991.98px) {

    .wisdom-home-hero.is-v2 {
        padding-top: 11rem;
        padding-bottom: 5rem;
    }


    .wisdom-hero-stamp {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .wisdom-home-hero.is-v2 {
        padding-top: 9.5rem;
        padding-bottom: 4.5rem;
    }


    .wisdom-hero-lead {
        margin-top: 26px;
    }

}


@media (max-width: 575.98px) {

    .wisdom-home-hero.is-v2 {
        padding-top: 8.5rem;
        padding-bottom: 4rem;
    }


    .wisdom-hero-kicker {
        font-size: 13px;
    }


    .wisdom-hero-actions {
        flex-direction: column;
        align-items: stretch;

        max-width: 340px;

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


    .wisdom-hero-cta {
        width: 100%;
    }


    .wisdom-hero-trust {
        gap: 10px 18px;
    }


    .wisdom-hero-trust li {
        font-size: 13px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wisdom-hero-kicker,
    .wisdom-hero-lead,
    .wisdom-hero-actions,
    .wisdom-hero-trust,
    .wisdom-hero-sticker,
    .wisdom-hero-stamp-ring,
    .wisdom-hero-kicker-dot::after {
        animation: none !important;
    }


    .wisdom-hero-kicker,
    .wisdom-hero-lead,
    .wisdom-hero-actions,
    .wisdom-hero-trust,
    .wisdom-hero-sticker {
        opacity: 1;

        transform: none;

        scale: 1;
    }


    .wisdom-hero-cta,
    .wisdom-hero-cta-arrow {
        transition: none;
    }

}
/* =========================================================
   HOME HERO — OPTION 2: COLLIDE
   Paste at the END of wisdom.css.
   Standalone: only reuses the title animation already in
   wisdom.css (.wisdom-home-title / .wisdom-title-*).

   Timeline
     0ms     sides start sliding in (title lines too)
     ~950ms  sides meet = title lines meet
     1000ms  confetti burst
     1100ms+ doodles draw in, tags, photos
     1250ms+ lead, buttons
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.wh-collide {
    position: relative;

    padding-top: 13rem;
    padding-bottom: 8rem;

    overflow: hidden;
}


/* Background stage with rounded bottom corners */

.wh-collide-bg {
    position: absolute;

    inset: 0 0 0 0;

    z-index: 0;

    overflow: hidden;

    border-radius: 0 0 48px 48px;

    pointer-events: none;
}


/* =========================================================
   THE TWO SIDES
========================================================= */

.wh-collide-side {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;
}


/* Learning: notebook grid paper */

.wh-collide-side.is-learning {
    left: 0;

    background-color:
        var(--accent-color-4);

    background-image:
        linear-gradient(rgba(67, 165, 116, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 165, 116, 0.11) 1px, transparent 1px);

    background-size: 30px 30px;

    transform: translateX(-14%);

    opacity: 0;

    animation:
        whCollideInLeft 950ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;
}


/* Notebook margin line */

.wh-collide-side.is-learning::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 64px;

    width: 2px;

    background:
        rgba(212, 171, 208, 0.55);
}


/* Creativity: warm paper with paint splotches at the edge */

.wh-collide-side.is-creativity {
    right: 0;

    background-color:
        var(--accent-color-7);

    background-image:
        radial-gradient(circle at 92% 18%, rgba(254, 176, 108, 0.55) 0, rgba(254, 176, 108, 0) 22%),
        radial-gradient(circle at 80% 78%, rgba(212, 171, 208, 0.55) 0, rgba(212, 171, 208, 0) 24%),
        radial-gradient(circle at 104% 52%, rgba(156, 201, 171, 0.5) 0, rgba(156, 201, 171, 0) 20%);

    transform: translateX(14%);

    opacity: 0;

    animation:
        whCollideInRight 950ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;
}


/* Wavy seam where the two worlds meet */

.wh-collide-side.is-creativity::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -12px;

    width: 24px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'%3E%3Cpath d='M24 0 L12 0 C0 20 0 20 12 40 C24 60 24 60 12 80 L24 80 Z' fill='%23FFEFC6'/%3E%3C/svg%3E")
        repeat-y;

    background-size: 24px 80px;
}


/* =========================================================
   DOODLES (outer gutters only, centre stays clean)
========================================================= */

.wh-collide-doodle,
.wh-collide-tag,
.wh-collide-photo {
    position: absolute;

    z-index: 1;

    opacity: 0;
}


/* Handwritten text doodles */

.wh-collide-doodle.is-abc,
.wh-collide-doodle.is-math {
    font-family:
        var(--font-2);

    line-height: 1;

    color:
        var(--accent-color-9);

    animation:
        whCollideFade 600ms ease-out forwards;
}


.wh-collide-doodle.is-abc {
    top: 24%;
    left: 6%;

    font-size: 44px;

    letter-spacing: 0.08em;

    rotate: -8deg;

    animation-delay: 1150ms;
}


.wh-collide-doodle.is-math {
    top: 54%;
    left: 9%;

    font-size: 30px;

    color:
        var(--text-color-2);

    rotate: 5deg;

    animation-delay: 1300ms;
}


/* Line-drawn SVG doodles */

.wh-collide-doodle svg,
svg.wh-collide-doodle {
    overflow: visible;
}


svg.wh-collide-doodle path,
svg.wh-collide-doodle rect {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}


svg.wh-collide-doodle {
    opacity: 1;
}


.wh-collide-doodle.is-ruler {
    top: 66%;
    left: 3%;

    width: 150px;

    rotate: -14deg;
}


.wh-collide-doodle.is-ruler rect,
.wh-collide-doodle.is-ruler path {
    stroke:
        var(--accent-color-9);

    stroke-width: 2;

    animation:
        whCollideDraw 1200ms ease-out 1400ms forwards;
}


.wh-collide-doodle.is-stars {
    top: 22%;
    right: 7%;

    width: 90px;
}


.wh-collide-doodle.is-stars path {
    fill:
        var(--accent-color-2);

    fill-opacity: 0;

    stroke:
        var(--accent-color-13);

    stroke-width: 2;

    animation:
        whCollideDraw 900ms ease-out 1200ms forwards,
        whCollideFill 500ms ease-out 1900ms forwards;
}


.wh-collide-doodle.is-squiggle {
    top: 60%;
    right: 6%;

    width: 140px;
}


.wh-collide-doodle.is-squiggle path {
    stroke:
        var(--accent-color-3);

    stroke-width: 6;

    animation:
        whCollideDraw 1100ms ease-out 1350ms forwards;
}


/* "learning →" / "← creativity" handwritten tags */

.wh-collide-tag {
    top: 41%;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-family:
        var(--font-2);

    font-size: 24px;

    color:
        var(--accent-color-13);

    animation:
        whCollideFade 600ms ease-out 1600ms forwards;
}


.wh-collide-tag.is-learning {
    left: 4%;

    rotate: -4deg;
}


.wh-collide-tag.is-creativity {
    right: 4%;

    rotate: 4deg;
}


.wh-collide-tag svg {
    width: 52px;
    height: 26px;

    overflow: visible;
}


.wh-collide-tag svg path {
    fill: none;

    stroke:
        var(--accent-color-13);

    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Photo stickers */

.wh-collide-photo {
    bottom: 6%;

    width: clamp(130px, 12vw, 190px);

    scale: 0.6;

    animation:
        whCollidePop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        whCollideBob 7s ease-in-out 2600ms infinite;
}


.wh-collide-photo.is-left {
    left: 2.5%;

    rotate: -7deg;

    animation-delay: 1700ms, 2600ms;
}


.wh-collide-photo.is-right {
    right: 2.5%;

    rotate: 6deg;

    animation-delay: 1850ms, 2800ms;
}


.wh-collide-photo img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(4px 0 0 #ffffff)
        drop-shadow(-4px 0 0 #ffffff)
        drop-shadow(0 4px 0 #ffffff)
        drop-shadow(0 -4px 0 #ffffff)
        drop-shadow(0 14px 18px rgba(11, 1, 24, 0.16));
}


/* =========================================================
   CONTENT
========================================================= */

.wh-collide-inner {
    position: relative;

    z-index: 2;

    max-width: 960px;

    margin: 0 auto;

    text-align: center;
}


.wh-collide-eyebrow {
    display: inline-block;

    margin: 0 0 24px;

    padding: 8px 16px;

    border-radius: 8px;

    background:
        var(--text-color);

    font-family:
        var(--font-3);

    font-size: 12.5px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: #ffffff;

    rotate: -1.5deg;

    opacity: 0;

    animation:
        whCollideRise 700ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;
}


.wh-collide-title-wrap {
    position: relative;
}


/* =========================================================
   CONFETTI BURST
========================================================= */

.wh-collide-burst {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: -1;

    width: 0;
    height: 0;
}


.wh-collide-burst i {
    position: absolute;

    top: -5px;
    left: -5px;

    width: 10px;
    height: 10px;

    border-radius: 3px;

    background:
        var(--c);

    opacity: 0;

    transform:
        rotate(var(--a)) translateX(0) scale(0.4);

    animation:
        whCollideBurst 900ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards;
}


.wh-collide-burst i:nth-child(odd) {
    border-radius: 50%;
}


/* =========================================================
   LEAD + BUTTONS
========================================================= */

.wh-collide-lead {
    max-width: 580px;

    margin: 32px auto 0;

    font-family:
        var(--font-3);

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

    line-height: 1.75;

    color:
        var(--text-color-2);

    opacity: 0;

    animation:
        whCollideRise 800ms cubic-bezier(0.16, 1, 0.3, 1) 1250ms forwards;
}


.wh-collide-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    margin-top: 34px;

    opacity: 0;

    animation:
        whCollideRise 800ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms forwards;
}


.wh-collide-btn {
    box-sizing: border-box;

    display: inline-flex;

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

    gap: 10px;

    min-height: 54px;

    padding: 14px 28px;

    border-radius: 999px;

    font-family:
        var(--font-3);

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 250ms ease,
        background-color 250ms ease,
        color 250ms ease;
}


.wh-collide-btn.is-primary {
    background:
        var(--text-color);

    box-shadow:
        4px 4px 0 var(--accent-color-2);

    color: #ffffff;
}


.wh-collide-btn.is-primary:hover {
    color: #ffffff;
}


.wh-collide-btn.is-ghost {
    border:
        2px solid var(--text-color);

    background:
        rgba(255, 255, 255, 0.7);

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


.wh-collide-btn.is-ghost:hover {
    background:
        var(--text-color);

    color: #ffffff;
}


.wh-collide-btn:focus-visible {
    outline:
        3px solid var(--accent-color-2);

    outline-offset: 4px;
}


.wh-collide-btn-arrow {
    display: inline-block;

    transition:
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}


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

    .wh-collide-btn.is-primary:hover {
        transform: translate(-2px, -2px);

        box-shadow:
            6px 6px 0 var(--accent-color-2);
    }


    .wh-collide-btn.is-primary:hover .wh-collide-btn-arrow {
        transform: translateX(4px);
    }


    .wh-collide-btn.is-ghost:hover {
        transform: translateY(-2px);
    }

}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes whCollideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes whCollideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes whCollideRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes whCollideFade {
    from {
        opacity: 0;
        translate: 0 8px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}


@keyframes whCollideDraw {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes whCollideFill {
    to {
        fill-opacity: 1;
    }
}


@keyframes whCollidePop {
    from {
        opacity: 0;
        scale: 0.6;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}


@keyframes whCollideBob {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }
}


@keyframes whCollideBurst {
    0% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(0) scale(0.4);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(min(34vw, 380px)) scale(1);
    }
}


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

/* Less gutter room: drop the extra doodles */

@media (max-width: 1299.98px) {

    .wh-collide-doodle.is-ruler,
    .wh-collide-doodle.is-squiggle {
        display: none;
    }


    .wh-collide-tag {
        font-size: 20px;
    }

}


@media (max-width: 1199.98px) {

    .wh-collide {
        padding-top: 12rem;
        padding-bottom: 7rem;
    }


    .wh-collide-tag,
    .wh-collide-doodle.is-math {
        display: none;
    }

}


/* Tablet: keep the two worlds, move photos to the bottom */

@media (max-width: 991.98px) {

    .wh-collide {
        padding-top: 10.5rem;
        padding-bottom: 14rem;
    }


    .wh-collide-bg {
        border-radius: 0 0 36px 36px;
    }


    .wh-collide-doodle.is-abc {
        top: 15%;
        left: 4%;

        font-size: 30px;
    }


    .wh-collide-doodle.is-stars {
        top: 14%;
        right: 4%;

        width: 60px;
    }


    .wh-collide-photo {
        bottom: 3%;

        width: 140px;
    }


    .wh-collide-photo.is-left {
        left: 14%;
    }


    .wh-collide-photo.is-right {
        right: 14%;
    }

}


@media (max-width: 767.98px) {

    .wh-collide-side.is-learning::before {
        left: 28px;
    }

}


@media (max-width: 575.98px) {

    .wh-collide {
        padding-top: 9rem;
        padding-bottom: 12rem;
    }


    .wh-collide-bg {
        border-radius: 0 0 28px 28px;
    }


    .wh-collide-doodle.is-abc {
        display: none;
    }


    .wh-collide-doodle.is-stars {
        top: 11%;

        width: 46px;
    }


    .wh-collide-eyebrow {
        font-size: 11px;

        letter-spacing: 0.12em;
    }


    .wh-collide-actions {
        flex-direction: column;

        align-items: stretch;

        max-width: 340px;

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


    .wh-collide-btn {
        width: 100%;
    }


    .wh-collide-photo {
        width: 116px;
    }


    .wh-collide-photo.is-left {
        left: 8%;
    }


    .wh-collide-photo.is-right {
        right: 8%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .wh-collide-side,
    .wh-collide-doodle,
    .wh-collide-doodle path,
    .wh-collide-doodle rect,
    .wh-collide-tag,
    .wh-collide-photo,
    .wh-collide-eyebrow,
    .wh-collide-lead,
    .wh-collide-actions,
    .wh-collide-burst i {
        animation: none !important;
    }


    .wh-collide-side,
    .wh-collide-doodle,
    .wh-collide-tag,
    .wh-collide-photo,
    .wh-collide-eyebrow,
    .wh-collide-lead,
    .wh-collide-actions {
        opacity: 1;

        transform: none;

        scale: 1;
    }


    .wh-collide-doodle path,
    .wh-collide-doodle rect {
        stroke-dashoffset: 0;
    }


    .wh-collide-doodle.is-stars path {
        fill-opacity: 1;
    }


    .wh-collide-btn,
    .wh-collide-btn-arrow {
        transition: none;
    }

}
/* =========================================================
   GALLERY — staggered columns (minimal)
   Paste at the END of wisdom.css.
   Self-contained: needs nothing else from the minimal hero.
========================================================= */

:root {
    --m-green: #9cc9ab;
    --m-orange: #feb06c;
    --m-ink: #111111;
    --m-muted: #5c5c5c;
    --m-line: #e6e6e6;
    --m-white: #ffffff;
    --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


.m-gallery {
    padding-top: 6rem;
    padding-bottom: 6rem;
}


/* =========================================================
   HEADING
========================================================= */

.m-gallery-head {
    display: flex;

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

    gap: 16px 32px;

    margin-bottom: 36px;
}


.m-gallery-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 18px;

    font-family:
        var(--font-3);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--m-ink);
}


.m-gallery-eyebrow::before {
    content: "";

    width: 24px;
    height: 2px;

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


.m-gallery-title {
    margin: 0;

    font-family:
        var(--font-1);

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

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.03em;

    color:
        var(--m-ink);
}


.m-gallery-lead {
    max-width: 420px;

    margin: 0;

    font-family:
        var(--font-3);

    font-size: 16px;

    line-height: 1.65;

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


/* Sage highlighter (same as the hero; repeated so this file
   works on its own) */

.m-mark {
    background:
        linear-gradient(transparent 58%, var(--m-green) 58%, var(--m-green) 92%, transparent 92%);

    padding: 0 0.06em;
}


/* =========================================================
   STAGGERED COLUMNS
   3 equal columns, every photo full column width (no crop),
   middle column starts lower for a calm rhythm.
========================================================= */

.m-gallery-cols {
    display: grid;

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

    gap: 28px;

    align-items: start;
}


.m-gallery-col {
    display: flex;

    flex-direction: column;

    gap: 28px;
}


.m-gallery-col.is-2 {
    margin-top: 88px;
}


.m-gallery-col.is-3 {
    margin-top: 36px;
}


.m-gallery-item {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: zoom-in;

    transition:
        transform 450ms var(--m-ease),
        filter 450ms var(--m-ease);
}


.m-gallery-item[hidden] {
    display: none;
}


.m-gallery-item img {
    display: block;

    width: 100%;
    height: auto;
}


/* Newly revealed photos fade up */

.m-gallery-item.is-new {
    animation:
        mGalleryIn 650ms var(--m-ease) both;
}


@keyframes mGalleryIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


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

    .m-gallery-item:hover {
        transform: translateY(-6px);

        filter:
            drop-shadow(0 18px 24px rgba(17, 17, 17, 0.14));
    }

}


.m-gallery-item:focus-visible {
    outline:
        2px solid var(--m-orange);

    outline-offset: 4px;

    border-radius: 12px;
}


/* ---------------------------------------------------------
   See more
--------------------------------------------------------- */

.m-gallery-more-wrap {
    display: flex;

    justify-content: center;

    margin-top: 36px;
}


.m-gallery-more {
    box-sizing: border-box;

    display: inline-flex;

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

    gap: 12px;

    min-height: 52px;

    padding: 12px 14px 12px 26px;

    border:
        1.5px solid var(--m-ink);

    border-radius: 999px;

    background: transparent;

    font-family:
        var(--font-3);

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    color:
        var(--m-ink);

    cursor: pointer;

    transition:
        background-color 200ms ease,
        color 200ms ease;
}


.m-gallery-more:hover {
    background:
        var(--m-ink);

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


.m-gallery-more:focus-visible {
    outline:
        2px solid var(--m-orange);

    outline-offset: 3px;
}


.m-gallery-more[hidden] {
    display: none;
}


.m-gallery-more-count {
    display: inline-grid;

    place-items: center;

    min-width: 26px;
    height: 26px;

    padding: 0 7px;

    border-radius: 999px;

    background:
        var(--m-orange);

    font-size: 13px;

    color:
        var(--m-ink);
}


/* =========================================================
   VIEWER
========================================================= */

.m-viewer {
    width: 100vw;
    height: 100dvh;

    max-width: none;
    max-height: none;

    margin: 0;

    padding: 0;

    border: 0;

    background:
        rgba(10, 10, 10, 0.94);

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


.m-viewer[open] {
    display: flex;

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

    animation:
        mViewerIn 250ms ease;
}


.m-viewer::backdrop {
    background: transparent;
}


@keyframes mViewerIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.m-viewer-top {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    display: flex;

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

    padding: 18px 22px;
}


.m-viewer-counter {
    font-family:
        var(--font-3);

    font-size: 14px;

    letter-spacing: 0.06em;

    color:
        rgba(255, 255, 255, 0.7);
}


.m-viewer-figure {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    max-width: min(1200px, 88vw);

    margin: 0;
}


.m-viewer-figure img {
    display: block;

    max-width: 100%;
    max-height: 78dvh;

    object-fit: contain;
}


.m-viewer-figure figcaption {
    font-family:
        var(--font-3);

    font-size: 15px;

    text-align: center;

    color:
        rgba(255, 255, 255, 0.85);
}


.m-viewer-figure figcaption:empty {
    display: none;
}


.m-viewer-btn {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50%;

    background: transparent;

    font-size: 18px;

    color:
        var(--m-white);

    cursor: pointer;

    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
}


.m-viewer-btn:hover {
    border-color:
        var(--m-orange);

    background:
        var(--m-orange);

    color:
        var(--m-ink);
}


.m-viewer-btn:focus-visible {
    outline:
        2px solid var(--m-orange);

    outline-offset: 3px;
}


.m-viewer-prev,
.m-viewer-next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);
}


.m-viewer-prev { left: 22px; }
.m-viewer-next { right: 22px; }


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

/* Phones / small tablets: 2 columns in reading order */

@media (max-width: 767.98px) {

    .m-gallery-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    /* Columns dissolve; items keep their order (inline "order") */
    .m-gallery-col {
        display: contents;
    }


    .m-gallery-col.is-2,
    .m-gallery-col.is-3 {
        margin-top: 0;
    }


    /* Right-hand items sit a little lower for the same rhythm */
    .m-gallery-item[data-i] {
        align-self: start;
    }

}


@media (max-width: 575.98px) {

    .m-gallery {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }


    .m-gallery-head {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 24px;
    }


    .m-gallery-more {
        width: 100%;
    }


    /* Arrows move to the bottom on phones */
    .m-viewer-prev,
    .m-viewer-next {
        top: auto;
        bottom: 22px;

        transform: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .m-gallery-item,
    .m-gallery-more,
    .m-viewer-btn {
        transition: none;
    }


    .m-gallery-item.is-new {
        animation: none;
    }


    .m-viewer[open] {
        animation: none;
    }

}