.tb-page {
    --tb-blue: #264d7a;
    --tb-deep-blue: #304271;
    --tb-turquoise: #15a8ab;
    --tb-gray: #6d6d6d;
    --tb-pale: #f3f8fb;

    color: var(--tb-gray);
    font-family: 'Bai Jamjuree', sans-serif;

    &, & *, & *::before, & *::after {
        box-sizing: border-box;
    }

    & h1, & h2, & h3, & p, & ul {
        margin: 0;
        padding: 0;
    }

    & h1, & h2, & h3 {
        font-weight: 700;
        line-height: 1.3;
    }

    & p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        text-wrap: pretty;
    }

    & img {
        display: block;
        max-width: 100%;
    }

    & a {
        text-decoration: none;
    }

    & .tb-animated-word {
        display: inline-block;
        transform-origin: center;
    }

    & .tb-container {
        width: min(calc(100% - 40px), 1200px);
        margin-inline: auto;
    }

    & .tb-section {
        padding-block: 32px;
    }

    & .tb-band {
        background: var(--tb-pale);
    }

    & .tb-button {
        width: fit-content;
        min-width: 118px;
        min-height: 42px;
        padding: 10px 20px;
        border-radius: 11px;
        background: var(--tb-turquoise);
        color: #fff;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.3;
        text-align: center;
        transition: transform .2s ease, background-color .2s ease;

        &:hover {
            background: #128e91;
            color: #fff;
            transform: scale(1.035);
        }

        &:focus-visible {
            outline: 3px solid var(--tb-blue);
            outline-offset: 3px;
        }
    }

    & .tb-hero {
        background: #f2f9fd;

        & .tb-hero-media {
            height: 200px;
            overflow: hidden;

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: right center;
            }
        }

        & .tb-hero-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            padding-block: 24px 32px;

            & > * {
                max-width: 100%;
            }

            & h1 {
                color: var(--tb-blue);
                font-size: 30px;
            }

            & h2 {
                color: var(--tb-turquoise);
                font-size: 22px;
                font-weight: 600;
            }

            & p {
                color: var(--tb-blue);
            }
        }
    }

    & .tb-split {
        display: grid;
        align-items: center;
        gap: 20px;
    }

    & .tb-knowledge-content, & .tb-explainer-content {
        display: grid;
        gap: 16px;

        & h2 {
            color: var(--tb-turquoise);
            font-size: 28px;
        }
    }

    & .tb-organic {
        width: 100%;
        max-width: 456px;
        aspect-ratio: 456 / 445;
        justify-self: center;
        overflow: hidden;
        border-radius: 68% 9% 54% 68%;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .tb-knowledge-photo {
        order: -1;

        & img {
            object-position: center;
        }
    }

    & .tb-pillars {
        display: grid;
        gap: 12px;
        margin-top: 4px;

        & .tb-pillar {
            display: flex;
            align-items: center;
            gap: 16px;
            min-height: 72px;
            padding: 15px 16px;
            border: 1px solid #eee;
            border-radius: 12px;
            background: #fff;

            & img {
                flex: none;
                width: 40px;
                height: 40px;
                object-fit: contain;
            }

            & h3 {
                color: var(--tb-turquoise);
                font-size: 18px;
            }
        }
    }

    & .tb-explainer-content {
        & p {
            max-width: 580px;
        }
    }

    & .tb-decisions {
        & .tb-decisions-card {
            display: flex;
            flex-direction: column;
            max-width: 960px;
            margin-inline: auto;
            overflow: hidden;
            border-radius: 35px;
            background: #fff;
            box-shadow: 0 4px 9px -4px rgb(0 0 0 / 25%);

            & > img {
                order: -1;
                width: 100%;
                height: 296px;
                object-fit: cover;
                object-position: center;
            }

            & .tb-decisions-content {
                display: grid;
                gap: 16px;
                padding: 28px 24px;

                & h2 {
                    color: var(--tb-turquoise);
                    font-size: 24px;
                }
            }
        }
    }

    & .tb-schedule {
        text-align: center;

        & .tb-pill {
            width: fit-content;
            max-width: 100%;
            margin-inline: auto;
            padding: 10px 16px;
            border-radius: 19px;
            background: var(--tb-deep-blue);
            color: #fff;
            font-size: 20px;
            text-align: center;
        }

        & .tb-schedule-intro {
            display: grid;
            gap: 16px;
            max-width: 780px;
            margin-inline: auto;

            & strong {
                font-weight: 700;
            }
        }

        & #tb-schedule-title {
            margin-top: 24px;
            color: var(--tb-turquoise);
            font-size: 28px;
        }

        & .tb-schedule-lead {
            max-width: 710px;
            margin: 14px auto 0;
        }

        & .tb-schedule-grid {
            display: grid;
            gap: 16px;
            margin-top: 20px;

            & .tb-schedule-card {
                min-width: 0;
                padding: 20px;
                border-radius: 26px;
                background: #fff;
                box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
                text-align: left;

                & h3 {
                    margin-bottom: 12px;
                    color: var(--tb-blue);
                    font-size: 20px;
                    text-align: center;
                }

                & ul {
                    display: grid;
                    gap: 8px;
                    list-style: none;

                    & li {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-size: 18px;
                        font-weight: 600;
                        line-height: 1.3;

                        & img {
                            flex: none;
                            width: 28px;
                            height: 28px;
                            object-fit: contain;
                        }
                    }
                }
            }
        }
    }

    & .tb-participation {
        text-align: center;

        & h2 {
            color: var(--tb-blue);
            font-size: 28px;
        }

        & .tb-participation-lead {
            max-width: 620px;
            margin: 16px auto 0;
        }

        & .tb-participation-grid {
            display: grid;
            gap: 16px;
            max-width: 740px;
            margin: 22px auto 0;

            & .tb-participation-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-width: 0;
                min-height: 164px;
                padding: 20px;
                border-radius: 26px;
                background: #fff;
                box-shadow: 0 3px 6px rgb(0 0 0 / 16%);

                & img {
                    width: 80px;
                    height: 80px;
                    object-fit: contain;
                }

                & h3 {
                    margin-top: 10px;
                    color: var(--tb-blue);
                    font-size: 19px;
                }

                & p {
                    margin-top: 6px;
                    font-size: 15px;
                }

                & .tb-address {
                    max-width: 260px;
                    margin-top: 8px;

                    & span {
                        display: block;
                    }
                }
            }
        }
    }

    & .tb-signup {
        text-align: center;

        & .tb-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: fit-content;
            max-width: 100%;
            margin-inline: auto;
            padding: 10px 16px;
            border-radius: 18px;
            background: var(--tb-deep-blue);
            color: #fff;
            font-size: 20px;
            text-align: center;

            & img {
                flex: none;
                width: 27px;
                height: 27px;
            }
        }

        & p {
            max-width: 650px;
            margin: 16px auto 0;
        }

        & .tb-button {
            margin-top: 18px;
        }

        & .tb-contact-grid {
            display: grid;
            gap: 12px;
            margin-top: 26px;

            & .tb-contact {
                display: flex;
                align-items: center;
                gap: 12px;
                min-width: 0;
                min-height: 70px;
                padding: 12px 16px;
                border-radius: 19px;
                background: #fff;
                box-shadow: 0 3px 7px rgb(0 0 0 / 16%);
                color: var(--tb-gray);
                text-align: left;
                transition: transform .2s ease, box-shadow .2s ease;

                &:hover {
                    color: var(--tb-gray);
                    transform: translateY(-3px);
                    box-shadow: 0 5px 12px rgb(0 0 0 / 20%);
                }

                &:focus-visible {
                    outline: 3px solid var(--tb-blue);
                    outline-offset: 3px;
                }

                & img {
                    flex: none;
                    width: 32px;
                    height: 32px;
                    object-fit: contain;
                }

                & span {
                    display: grid;
                    min-width: 0;
                    gap: 2px;

                    & strong {
                        color: var(--tb-turquoise);
                        font-size: 16px;
                        line-height: 1.3;
                    }

                    & small {
                        min-width: 0;
                        font-size: 15px;
                        line-height: 1.3;
                        overflow-wrap: anywhere;
                    }
                }
            }
        }
    }

    @media (min-width: 480px) {
        & .tb-container {
            width: min(calc(100% - 48px), 1200px);
        }

        & .tb-hero .tb-hero-media {
            height: 240px;
        }
    }

    @media (min-width: 576px) {
        & .tb-hero .tb-hero-media {
            height: 290px;
        }

        & .tb-pillars {
            grid-template-columns: repeat(3, minmax(0, 1fr));

            & .tb-pillar {
                flex-direction: column;
                justify-content: center;
                min-height: 132px;
                gap: 8px;
                text-align: center;

                & h3 {
                    font-size: 15px;
                }
            }
        }

        & .tb-schedule .tb-schedule-grid,
        & .tb-participation .tb-participation-grid,
        & .tb-signup .tb-contact-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 768px) {
        & .tb-container {
            width: min(calc(100% - 56px), 1200px);
        }

        & .tb-section {
            padding-block: 45px;
        }

        & .tb-hero {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 469px;

            & .tb-hero-media {
                position: absolute;
                inset: 0;
                height: 100%;

                & img {
                    object-position: center;
                }
            }

            & .tb-hero-content {
                position: relative;
                z-index: 1;
                width: min(calc(100% - 56px), 1064px);
                padding-block: 35px;

                & > * {
                    max-width: 547px;
                }
            }
        }

        & .tb-schedule .tb-schedule-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        & .tb-signup .tb-contact-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 992px) {
        & p {
            font-size: 16px;
        }

        & .tb-hero {
            & .tb-hero-content {
                & h1 {
                    font-size: 40px;
                }

                & p {
                    font-size: 18px;
                }
            }
        }

        & .tb-split {
            max-width: 1000px;
            grid-template-columns: minmax(0, 512fr) minmax(0, 456fr);
            gap: 32px;
        }

        & .tb-knowledge-photo {
            order: 0;
        }

        & .tb-knowledge-content, & .tb-explainer-content {
            gap: 20px;

            & h2 {
                font-size: 30px;
            }
        }

        & .tb-pillars .tb-pillar {
            min-height: 118px;
        }

        & .tb-explainer .tb-split {
            grid-template-columns: minmax(0, 456fr) minmax(0, 475fr);
        }

        & .tb-decisions .tb-decisions-card {
            display: grid;
            grid-template-columns: minmax(0, 468fr) minmax(0, 492fr);
            align-items: center;

            & > img {
                order: 0;
                height: 413px;
            }

            & .tb-decisions-content {
                gap: 20px;
                padding: 30px 40px;
            }
        }

        & .tb-schedule .tb-schedule-grid {
            max-width: 980px;
            margin-inline: auto;
        }

        & .tb-signup .tb-contact-grid {
            max-width: 1000px;
            margin-inline: auto;
            margin-top: 26px;
        }
    }

    @media (min-width: 1200px) {
        & .tb-split {
            gap: 40px;
        }

        & .tb-schedule .tb-schedule-grid {
            gap: 22px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        & *, & *::before, & *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            transition-duration: .01ms !important;
        }
    }
}

html.tb-motion-preparing .tb-page {
    & .tb-hero-content > *,
    & .tb-reveal,
    & .tb-schedule > .tb-container > h2,
    & .tb-participation > .tb-container > h2,
    & .tb-decisions-card > img,
    & .tb-schedule-card li {
        visibility: hidden;
    }
}