:root {
    --paper: #ffffff;
    --ink: #111111;
    --muted: #555555;
    --line: #d5d5d5;
    --blue: #bfeaff;
    --pink: #fbd7e5;
    --blue-soft: #eef9ff;
    --pink-soft: #fff2f7;
    --brand-wash: linear-gradient(105deg, var(--blue), var(--pink));
    --wash-ink: linear-gradient(105deg, color-mix(in srgb, var(--blue) 55%, var(--ink)), color-mix(in srgb, var(--pink) 55%, var(--ink)));
    --serif: "Noto Serif JP Local", "Yu Mincho", "Hiragino Mincho ProN", serif;
    --stage-height: 100vh;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--serif);
    font-weight: 500;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

img {
    display: block;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

p, h1, h2, h3, h4, h5, ul {
    margin: 0;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
}

button, a {
    touch-action: manipulation;
}

a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 6px;
}

::selection {
    color: var(--paper);
    background: var(--ink);
}

.skip-link {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 20;
    padding: 14px 20px;
    background: var(--paper);
    transform: translateY(-160%);
    clip-path: inset(50%);
}

.skip-link:focus {
    transform: none;
    clip-path: none;
}

/* The mobile composition follows the supplied 2:3 first view. */
.hero {
    position: relative;
    isolation: isolate;
    aspect-ratio: 2 / 3;
    container-type: inline-size;
    overflow: hidden;
    background: var(--blue);
}

.hero__photo, .hero__wash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero__photo {
    object-fit: cover;
}

.hero__wash {
    background: linear-gradient(180deg, #003c4924 53%, rgb(2 64 81 / 37%) 70%, rgb(8 87 101 / 19%) 100%);
}

.hero__brand {
    position: absolute;
    left: 4.5%;
    top: 2.7%;
    letter-spacing: .1em;
    line-height: 1.25;
}

.hero__brand > span {
    font-size: 7.1cqw;
}

.hero__brand p {
    margin-top: .6cqw;
    font-size: 7.3cqw;
    letter-spacing: .035em;
}

.hero__brand p span {
    font-size: 7.3cqw;
    letter-spacing: .08em;
}

.hero__campus {
    position: absolute;
    right: 3.9%;
    top: 6.5%;
    writing-mode: vertical-rl;
    font-size: 13.6cqw;
    line-height: 1;
    letter-spacing: .035em;
    white-space: nowrap;
}

.hero__access {
    position: absolute;
    right: 8.45%;
    top: 51.2%;
    writing-mode: vertical-rl;
    font-size: 3.9cqw;
    line-height: 1;
    letter-spacing: .13em;
}

.hero__access::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2.3cqw);
    height: 7.1cqw;
    width: 1px;
    background: currentColor;
}

.hero__minutes {
    text-orientation: upright;
}

.hero__message {
    position: absolute;
    left: 5.8%;
    right: 3%;
    top: 55.8%;
    color: var(--paper);
    text-shadow: 2px 5px 12px rgb(0 0 0),-3px -1px 12px rgb(0 0 0),0px -5px 12px rgb(0 0 0);
}

.hero__lead {
    font-size: 5.1cqw;
    line-height: 1.55;
    letter-spacing: .06em;
}

.hero__lead > span {
    display: inline-block;
    font-size: 8.85cqw;
    letter-spacing: 2px;
    white-space: nowrap;
    line-height: 1.25;
}

.hero__one-to-one {
    margin-top: 2.4cqw;
    font-size: 5.5cqw;
    letter-spacing: .2em;
    line-height: 1.5;
}

.hero__one-to-one > span {
    display: block;
    font-size: 10.4cqw;
    line-height: 1.16;
    letter-spacing: 4px;
}

.hero__one-to-one b {
    font-family: "Times New Roman", serif;
    font-size: 18.4cqw;
    font-weight: 400;
    line-height: 1;
    position: relative;
    top: 4px;
}

.hero__one-to-one em {
    font-size: 8.9cqw;
    font-style: normal;
    line-height: 1;
}

.hero__audience {
    display: table;
    margin-top: 1.8cqw;
    padding-top: 1.65cqw;
    border-top: 1px solid rgb(255 255 255 / 85%);
    font-size: max(19px, 3.7cqw);
    letter-spacing: .15em;
    line-height: 1.4;
}

.hero__brand, .hero__lead > span, .hero__one-to-one > span {
    font-weight: 700;
}

.hero__scroll, .hero__edition {
    display: none;
}

.introduction {
    padding: 90px 18px 62px;
    text-align: center;
    background: linear-gradient(var(--paper), var(--paper) 70%);
}

.eyebrow {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .2em;
    color: var(--muted);
}

.introduction__rule {
    display: block;
    width: 1px;
    height: 40px;
    margin: 24px auto;
    background: var(--line);
}

.introduction h2 {
    font-size: clamp(23px, 5.8vw, 34px);
    line-height: 1.8;
    letter-spacing: .01em;
}

.introduction__line {
    display: block;
}

.introduction__line > span {
    display: inline-block;
}

.course-index {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 36px auto 0;
    gap: 0;
    font-size: 16px;
}

.course-index a {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 8px;
    border-right: 1px solid var(--line);
    white-space: nowrap;
    transition: color .2s;
}

.course-index a:first-child {
    padding-left: 0;
}

.course-index a:last-child {
    border-right: 0;
    padding-right: 0;
}

.course-index span {
    font-family: "Times New Roman", serif;
    color: var(--muted);
    font-size: 15px;
}

/* One full-viewport photograph stays behind the scrolling course content.

   Its own section bounds the sticky layer, so it releases after course 03. */
@supports (height: 100dvh) {
    :root {
        --stage-height: 100dvh;
    }
}

.courses {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
}

.course-visual {
    position: sticky;
    top: 0;
    height: var(--stage-height);
    z-index: 0;
    pointer-events: none;
}

.course-visual__frame {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: var(--paper);
}

.course-visual__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 64%) 20%, rgb(255 255 255 / 64%) 80%, rgb(255 255 255 / 60%));
}

.course-visual__image {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(1.05);
    opacity: 0;
    transition: opacity 650ms ease-in-out;
}

.course-visual__image.is-active {
    opacity: 1;
}

.course-visual__image[data-course-image="essay"] {
    object-position: 50% 80%;
}

.course-visual__image[data-course-image="interview"] {
    object-position: 50% 85%;
}

.course-content {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--stage-height));
}

.course {
    position: relative;
    min-height: 112svh;
    padding: 13svh 7.5% 16svh;
    scroll-margin-top: 20px;
}

.course__heading, .course__body {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.course__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 17px;
}

.course__number {
    font-family: "Times New Roman", serif;
    font-weight: 400;
    font-size: 66px;
    letter-spacing: 0;
    line-height: 1.06;
}

.course__meta i {
    height: 1px;
    width: 36px;
    background: var(--ink);
}

.course__english {
    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: .2em;
    line-height: 1.65;
    color: var(--ink);
}

.course h3 {
    font-size: clamp(34px, 10.7vw, 51px);
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: 28px;
}

.course__body p {
    font-size: 17px;
    line-height: 1.95;
    letter-spacing: .015em;
    line-break: strict;
    overflow-wrap: anywhere;
}

.course__body p + p {
    margin-top: 22px;
}

.course__topics {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    list-style: none;
    margin: 32px 0 27px;
}

.course__topics li {
    flex: 1;
    border-right: 1px solid var(--line);
    text-align: center;
    padding: 3px 4px;
    font-size: 15px;
    white-space: nowrap;
}

.course__topics li:last-child {
    border-right: 0;
}

.course .text-link {
    background: rgb(255 255 255 / 50%);
    border-color: var(--ink);
}

.course a {
    scroll-margin-top: 24px;
    scroll-margin-bottom: 24px;
}

.text-link {
    border: 1px solid var(--muted);
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: color .25s, background .25s, border-color .25s;
}

.text-link svg {
    width: 29px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    transition: transform .25s;
}

.closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75svh;
    margin-top: 0;
    padding: 100px 7.5%;
    background: linear-gradient(155deg, var(--blue-soft), var(--paper) 65%, var(--paper));
    text-align: center;
}

.closing h2 {
    font-size: clamp(29px, 7.8vw, 46px);
    line-height: 1.8;
    letter-spacing: .02em;
    margin: 28px 0 38px;
}

.closing .text-link {
    max-width: 370px;
}

.footer {
    padding: 28px 7.5%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    letter-spacing: .025em;
}

.footer__campus {
    display: inline-block;
    margin-left: 10px;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    min-height: 44px;
    font-size: 13px;
}

.back-to-top span {
    font-size: 24px;
}

@media (hover: hover) {
    .text-link:hover {
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
    }

    .text-link:hover svg {
        transform: translateX(4px);
    }

    .course-index a:hover, .back-to-top:hover {
        color: var(--ink);
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .hero {
        max-width: 660px;
        margin: 0 auto;
    }
}

@media (min-width: 900px) {
    .hero {
        aspect-ratio: auto;
        height: min(900px, 100svh);
        min-height: 700px;
    }

    .hero__photo {
        left: 26%;
        width: 74%;
        object-position: 50% 36%;
    }

    .hero__wash {
        background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 26%, rgb(238 249 255 / 94%) 29%, rgb(238 249 255 / 62%) 35%, transparent 54%);
    }

    .hero__brand {
        top: 5.2%;
        left: 6%;
    }

    .hero__brand > span {
        font-size: 20px;
    }

    .hero__brand p {
        margin-top: 5px;
        font-size: 33px;
    }

    .hero__brand p span {
        font-size: 39px;
    }

    .hero__campus {
        top: 8%;
        right: 5.4%;
        font-size: clamp(72px, 7.1vw, 112px);
    }

    .hero__access {
        top: auto;
        bottom: 9%;
        right: 7.5%;
        font-size: 23px;
    }

    .hero__access::before {
        height: 47px;
        bottom: calc(100% + 20px);
    }

    .hero__message {
        top: auto;
        bottom: 13%;
        left: 6%;
        right: auto;
        color: var(--ink);
        text-shadow: none;
    }

    .hero__lead {
        font-size: clamp(25px, 2.4vw, 35px);
        line-height: 1.6;
    }

    .hero__lead > span {
        font-size: clamp(40px, 4.15vw, 67px);
        letter-spacing: 0;
    }

    .hero__one-to-one {
        margin-top: 28px;
        font-size: clamp(23px, 2.1vw, 31px);
    }

    .hero__one-to-one > span {
        font-size: 69px;
    }

    .hero__one-to-one b {
        font-size: 109px;
    }

    .hero__one-to-one em {
        font-size: 65px;
    }

    .hero__audience {
        margin-top: 20px;
        padding-top: 18px;
        border-color: var(--ink);
        font-size: 20px;
    }

    .hero__scroll {
        position: absolute;
        bottom: 30px;
        left: 6%;
        display: flex;
        align-items: center;
        gap: 19px;
        min-height: 44px;
        font-family: "Times New Roman", serif;
        font-size: 9px;
        letter-spacing: .24em;
    }

    .hero__scroll i {
        height: 36px;
        width: 1px;
        background: var(--ink);
    }

    .hero__edition {
        display: block;
        position: absolute;
        bottom: 36px;
        right: 5%;
        font-family: "Times New Roman", serif;
        font-size: 9px;
        letter-spacing: .26em;
        color: var(--ink);
    }

    .introduction {
        padding: 120px 24px 80px;
    }

    .eyebrow {
        font-size: 13px;
    }

    .introduction h2 {
        font-size: 36px;
        line-height: 1.9;
        letter-spacing: .04em;
    }

    .introduction__rule {
        height: 48px;
        margin: 26px auto 30px;
    }

    .course-index {
        margin-top: 38px;
        font-size: 16px;
    }

    .course-index a {
        gap: 9px;
        padding: 0 32px;
    }

    .course-index span {
        font-size: 16px;
    }

    .text-link {
        min-height: 59px;
        font-size: 17px;
        gap: 35px;
    }

    .text-link svg {
        width: 36px;
    }

    .closing {
        margin-top: 20px;
    }

    .footer {
        min-height: 100px;
        padding-left: 6%;
        padding-right: 6%;
    }
}

/* A photograph-free chapter: an open comparison table and a quiet fee ledger. */
.fees {
    margin-top: 0;
    padding: 82px 6% 64px;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 22%, var(--paper) 66%, var(--paper) 100%);
}

.fees__inner {
    max-width: 1056px;
    margin: 0 auto;
}

.fees__header {
    padding-bottom: 35px;
    border-bottom: 1px solid var(--blue);
}

.fees .eyebrow {
    color: var(--ink);
}

.fees__header h2, .attendance__copy h3, .fee-comparison > h3, .additional-fees__heading h3 {
    color: var(--ink);
}

.fees__header h2 {
    margin-top: 18px;
    font-size: clamp(28px, 7.7vw, 42px);
    line-height: 1.55;
    letter-spacing: 0;
}

.fees__header h2 span {
    display: inline-block;
}

.attendance {
    padding: 32px 0 46px;
}

.attendance__rhythm {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 26px;
    color: var(--ink);
}

.attendance__rhythm > span {
    font-size: 25px;
    font-weight: 700;
}

.attendance__rhythm strong {
    font-family: "Times New Roman", serif;
    font-size: 86px;
    line-height: 1;
    font-weight: 400;
}

.attendance__rhythm small {
    margin-left: 9px;
    font-size: 17px;
}

.attendance__copy h3 {
    margin-bottom: 19px;
    font-size: clamp(21px, 5.55vw, 28px);
    line-height: 1.7;
}

.attendance__copy h3 span {
    display: inline-block;
}

.attendance__copy p {
    font-size: 16px;
    line-height: 1.95;
}

.attendance__copy p + p {
    margin-top: 15px;
}

.fee-comparison {
    background: var(--paper);
    padding: 26px 14px 22px;
    box-shadow: 0 9px 40px rgb(17 17 17 / 8%);
    border-top: 3px solid var(--blue);
}

.fee-comparison > h3 {
    margin-bottom: 24px;
    font-size: 23px;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
}

.fee-table__label {
    width: 32%;
}

.fee-table th, .fee-table td {
    padding: 17px 6px;
    border-bottom: 1px solid var(--line);
    line-height: 1.7;
}

.fee-table thead th {
    padding: 10px 3px 18px;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 2px solid var(--blue);
}

.fee-table thead span {
    display: block;
}

.fee-table thead span:nth-child(2) {
    font-size: 16px;
    margin-top: 2px;
}

.fee-table tbody th {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fee-table td {
    text-align: center;
}

.fee-table td:nth-child(3), .fee-table th:nth-child(3) {
    background: var(--paper);
}

.fee-table__unit td {
    white-space: nowrap;
    padding-top: 19px;
    padding-bottom: 19px;
    color: var(--ink);
}

.fee-table__unit strong {
    font-family: "Times New Roman", serif;
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    font-variant-numeric: lining-nums tabular-nums;
}

.fee-table__unit td > span {
    font-size: 13px;
    margin-left: 2px;
}

.fee-pending {
    display: inline-block;
    color: var(--muted);
    font-size: 14px;
}

.fee-comparison__note {
    margin-top: 19px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
}

.additional-fees {
    padding: 42px 0 34px;
    border-bottom: 1px solid var(--line);
}

.additional-fees__heading h3 {
    font-size: 25px;
    margin: 9px 0 23px;
}

.additional-fees dl {
    margin: 0;
}

.additional-fees dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.additional-fees dt {
    flex: 0 0 auto;
    font-size: 16px;
}

.additional-fees dd {
    margin: 0;
    font-size: 16px;
    text-align: right;
}

.additional-fees dd strong {
    font-family: "Times New Roman", serif;
    font-size: 31px;
    font-weight: 500;
    margin-right: 3px;
}

.additional-fees__materials dd > span {
    display: block;
}
.enrollment-dates time span {
    position: relative;
    top: -17px;
}
.additional-fees__materials dd > span:first-child {
    font-size: 14px;
    margin-bottom: 8px;
}

.additional-fees__materials dd strong {
    font-size: 24px;
}

.additional-fees__materials i {
    font-style: normal;
    color: var(--ink);
}

.additional-fees__tax {
    margin-top: 15px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.85;
}

.fee-consultation {
    padding-top: 32px;
}

.fee-consultation > p {
    margin-bottom: 24px;
    font-size: 17px;
    line-height: 1.95;
}

.fee-consultation .text-link {
    background: linear-gradient(110deg, var(--pink-soft), var(--pink-soft));
    border-color: var(--pink);
    color: var(--ink);
    font-size: 15px;
    gap: 13px;
    padding: 16px 12px;
    box-shadow: 0 6px 19px rgb(17 17 17 / 12%);
}

.fee-consultation .text-link svg {
    width: 24px;
}

.desktop-break {
    display: none;
}

@media (min-width: 600px) {
    .fees {
        padding: 100px 7.5% 80px;
    }

    .fees__header {
        padding-bottom: 36px;
    }

    .fees__header h2 {
        font-size: 42px;
    }

    .attendance {
        display: grid;
        grid-template-columns: .7fr 2fr;
        align-items: center;
        gap: 40px;
        padding: 46px 0 58px;
    }

    .attendance__rhythm {
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
        margin: 0;
    }

    .attendance__rhythm small {
        flex-basis: 100%;
        text-align: center;
        margin-left: 0;
    }

    .attendance__copy p {
        font-size: 17px;
    }

    .fee-comparison {
        padding: 34px 30px 28px;
    }

    .fee-comparison > h3 {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .fee-table__label {
        width: 30%;
    }

    .fee-table th, .fee-table td {
        padding: 20px 16px;
        font-size: 17px;
    }

    .fee-table tbody th {
        font-size: 16px;
    }

    .fee-table thead th {
        font-size: 31px;
        padding: 12px 8px 24px;
    }

    .fee-table thead span:nth-child(2) {
        font-size: 18px;
    }

    .fee-table__unit strong {
        font-size: 43px;
    }

    .fee-table__unit td > span {
        font-size: 17px;
    }

    .fee-pending {
        font-size: 16px;
    }

    .additional-fees {
        padding: 48px 0 36px;
    }

    .additional-fees__materials dd > span {
        display: inline;
    }

    .additional-fees__materials dd > span:first-child {
        margin-right: 17px;
    }

    .additional-fees__materials dd strong {
        font-size: 27px;
    }

    .fee-consultation .text-link {
        max-width: 430px;
        margin: 0 auto;
        font-size: 17px;
        padding: 18px 16px;
        gap: 24px;
    }
}

@media (min-width: 900px) {
    .fees {
        padding: 112px 60px 84px;
    }

    .fees__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .fees__header h2 {
        font-size: 44px;
        margin-top: 0;
    }

    .attendance {
        grid-template-columns: 250px 1fr;
        gap: 70px;
        padding: 60px 0 70px;
    }

    .attendance__rhythm {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .attendance__rhythm strong {
        font-size: 112px;
    }

    .attendance__rhythm small {
        flex-basis: auto;
        writing-mode: vertical-rl;
        align-self: center;
        margin-left: 12px;
        letter-spacing: .1em;
    }

    .attendance__copy h3 {
        font-size: 28px;
    }

    .attendance__copy p {
        font-size: 18px;
    }

    .fee-comparison {
        padding: 40px 48px 30px;
    }

    .fee-table__label {
        width: 32%;
    }

    .fee-table thead span {
        display: inline;
    }

    .fee-table thead span:nth-child(2) {
        margin-left: 3px;
        font-size: 21px;
    }

    .fee-table th, .fee-table td {
        padding: 22px 24px;
        font-size: 18px;
    }

    .fee-table thead th {
        font-size: 35px;
    }

    .fee-table__unit strong {
        font-size: 52px;
    }

    .fee-table tbody th {
        font-size: 17px;
    }

    .additional-fees {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 70px;
        padding: 55px 0 45px;
    }

    .additional-fees__heading h3 {
        font-size: 29px;
    }

    .additional-fees dl > div:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .additional-fees dt, .additional-fees dd {
        font-size: 18px;
    }

    .fee-consultation {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 55px;
        align-items: center;
        padding-top: 40px;
    }

    .fee-consultation > p {
        font-size: 18px;
        margin-bottom: 0;
    }

    .fee-consultation .text-link {
        font-size: 16px;
        gap: 15px;
    }

    .desktop-break {
        display: initial;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .course {
        padding-left: 14%;
        padding-right: 14%;
    }

    .course__body p {
        font-size: 18px;
    }
}

@media (min-width: 900px) {
    .course {
        min-height: 112svh;
        padding: 12svh 52% 15svh max(6%, calc((100vw - 1260px) / 2));
    }

    .course__heading, .course__body {
        max-width: 560px;
        margin: 0;
    }

    .course__number {
        font-size: 80px;
    }

    .course__meta {
        gap: 26px;
        margin-bottom: 20px;
    }

    .course h3 {
        font-size: clamp(38px, 3.6vw, 54px);
        line-height: 1.5;
    }

    .course__body p {
        font-size: 18px;
        line-height: 2;
    }

    .course__topics li {
        font-size: 17px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .course {
        padding-top: 70px;
        padding-bottom: 90px;
    }
}

@media (hover: hover) {
    .course .text-link:hover {
        background: var(--ink);
    }
}

/* With JavaScript off each article keeps its matching photo in normal flow. */
html:not(.is-enhanced) .course-visual {
    display: none;
}

html:not(.is-enhanced) .course-content {
    margin-top: 0;
}

html:not(.is-enhanced) .course {
    background: linear-gradient(rgb(255 255 255 / 64%), rgb(255 255 255 / 64%)), var(--course-photo) var(--course-position, center) / cover;
}

#subject {
    --course-photo: url("assets/images/subject.webp");
}

#essay {
    --course-photo: url("assets/images/essay.webp");
    --course-position: 50% 80%;
}

#interview {
    --course-photo: url("assets/images/interview.webp");
    --course-position: 50% 85%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

/* The comparison stays concise; the supplied course benefits follow it. */
.fee-table thead th {
    vertical-align: top;
}

.course-popular {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    padding: 2px 8px;
    background: var(--pink-soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
}

@media (min-width: 600px) {
}

@media (min-width: 900px) {
}

/* Spring scenery introduces the admissions results. */
.results {
    position: relative;
    isolation: isolate;
    padding: 84px 7.5% 78px;
    background: radial-gradient(ellipse at 8% 18%, var(--pink-soft) 0%, transparent 44%), radial-gradient(ellipse at 97% 47%, var(--blue-soft) 0%, transparent 50%), var(--paper);
    overflow: hidden;
}

.results::before {
    content: "";
    position: absolute;
    left: -15%;
    top: 90px;
    width: 130%;
    height: 460px;
    border: 1px solid rgb(17 17 17 / 18%);
    border-radius: 50%;
    transform: rotate(-13deg);
    z-index: -1;
}

.results__inner {
    max-width: 1040px;
    margin: 0 auto;
}

.results__header {
    text-align: center;
}

.results__header .eyebrow {
    color: var(--ink);
}

.results__header h2 {
    margin: 22px 0 0;
    font-size: 42px;
    line-height: 1.65;
    letter-spacing: .08em;
    color: var(--ink);
}

.results__header h2 > span {
    display: block;
    font-size: clamp(18px, 4.7vw, 25px);
    letter-spacing: 0;
}

.results__achievement {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: 30px auto 24px;
}

.results__metric {
    position: relative;
    z-index: 1;
    text-align: center;
    font-weight: 500;
}

.results__years {
    display: block;
    font-size: 21px;
    letter-spacing: .05em;
}

.results__count-label {
    display: block;
    font-size: 18px;
    margin-top: 20px;
}

.results__count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    color: var(--ink);
}

.results__count strong {
    font-family: "Times New Roman", serif;
    font-size: clamp(99px, 28vw, 160px);
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 400;
}

.results__count > span {
    font-size: 25px;
}

.results__laurel {
    position: absolute;
    bottom: -8px;
    width: 18%;
    max-width: 110px;
    height: auto;
    color: var(--pink);
    opacity: .9;
}

.results__laurel--left {
    left: -3%;
}

.results__laurel--right {
    right: -3%;
    transform: scaleX(-1);
}

.results__explanation {
    max-width: 680px;
    margin: 27px auto 0;
}

.results__explanation > p {
    font-size: 16px;
    line-height: 2;
    text-wrap: balance;
}

.results__notes {
    margin-top: 17px;
}

.results__notes p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--muted);
}

.results__schools {
    position: relative;
    margin-top: 40px;
    padding: 29px 0 24px;
    border-top: 1px solid var(--pink);
    border-bottom: 1px solid var(--pink);
}

.results__schools h3 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 24px;
}

.results__schools ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 14px;
}

.results__schools li {
    position: relative;
    padding-left: 17px;
    font-size: 16px;
    line-height: 1.85;
}

.results__schools li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .76em;
    width: 6px;
    height: 6px;
    background: var(--ink);
    transform: rotate(45deg);
}

.results__schools > p {
    text-align: right;
    font-size: 14px;
    margin-top: 18px;
}

.results__link {
    max-width: 380px;
    margin: 34px auto 0;
    border-color: var(--pink);
    background: var(--paper);
    color: var(--ink);
}

.results__sparkles {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.results__sparkles i {
    position: absolute;
    width: 10px;
    height: 18px;
    border-radius: 100% 0 100% 0;
    background: var(--pink);
    opacity: .9;
    transform: rotate(22deg);
}

.results__sparkles i:nth-child(1) {
    left: 8%;
    top: 5%;
}

.results__sparkles i:nth-child(2) {
    left: 91%;
    top: 13%;
    transform: rotate(76deg);
}

.results__sparkles i:nth-child(3) {
    left: 3%;
    top: 29%;
    width: 6px;
    height: 10px;
}

.results__sparkles i:nth-child(4) {
    left: 94%;
    top: 40%;
    transform: rotate(54deg);
}

.results__sparkles i:nth-child(5) {
    left: 12%;
    bottom: 8%;
    width: 6px;
    height: 10px;
}

.results__sparkles i:nth-child(6) {
    right: 15%;
    bottom: 4%;
    transform: rotate(64deg);
}

@media (min-width: 600px) {
    .results {
        padding: 100px 10% 90px;
    }

    .results__header h2 {
        font-size: 50px;
    }

    .results__achievement {
        margin-top: 40px;
    }

    .results__count strong {
        font-size: 176px;
    }

    .results__years {
        font-size: 25px;
    }

    .results__laurel {
        bottom: -9px;
    }

    .results__laurel--left {
        left: 0;
    }

    .results__laurel--right {
        right: 0;
    }

    .results__explanation > p {
        font-size: 18px;
    }

    .results__schools ul {
        grid-template-columns: 1fr 1fr;
        gap: 22px 35px;
    }

    .results__schools li {
        font-size: 17px;
    }
}

/* Editorial photographs alternate with the three enrollment steps. */
.enrollment-flow {
    position: relative;
    padding: 75px 7.5% 76px;
    background: var(--paper);
}

.enrollment-flow__inner {
    max-width: 1120px;
    margin: 0 auto;
}

.enrollment-flow__header .eyebrow {
    color: var(--ink);
}

.enrollment-flow__header h2 {
    font-size: clamp(29px,7.8vw,46px);
    line-height: 1.65;
    margin: 17px 0 24px;
    color: var(--ink);
}

.enrollment-flow__header h2 > span {
    display: block;
}

.enrollment-flow__rule {
    display: block;
    width: 68px;
    height: 2px;
    background: var(--pink);
}

.flow-steps {
    list-style: none;
    padding: 0;
    margin: 38px 0 0;
}

.flow-step {
    --step-color: var(--ink);
    position: relative;
    padding-bottom: 51px;
}

.flow-step + .flow-step {
    padding-top: 28px;
    border-top: 1px solid var(--pink);
}

.flow-step:nth-child(2) {
    --step-color: var(--ink);
}

.flow-step:nth-child(3) {
    --step-color: var(--ink);
}

.flow-step__visual {
    position: relative;
    width: calc(100% + 18px);
    margin-left: -18px;
    margin-bottom: 25px;
}

.flow-step__visual::after {
    content: '';
    position: absolute;
    inset: 12px -12px -12px 12px;
    border: 1px solid var(--pink);
    z-index: 0;
    pointer-events: none;
}

.flow-step__visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
}

.flow-step:nth-child(2) .flow-step__visual {
    width: calc(100% + 18px);
    margin-left: 0;
}

.flow-step:nth-child(2) .flow-step__visual::after {
    inset: 12px 12px -12px -12px;
    border-color: var(--line);
}

.flow-step:nth-child(3) .flow-step__visual {
    width: 92%;
    margin-left: -8px;
}

.flow-step:nth-child(3) .flow-step__visual img {
    aspect-ratio: 1.2;
    object-position: 42% center;
}

.flow-step:nth-child(3) .flow-step__visual::after {
    border-color: var(--blue);
}

.flow-step__number {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin-bottom: 17px;
    font-family: 'Times New Roman',serif;
    font-size: 67px;
    line-height: 1;
    color: var(--step-color);
}

.flow-step__number > span {
    font-size: 12px;
    letter-spacing: .16em;
}

.flow-step h3 {
    font-size: 25px;
    line-height: 1.65;
    margin-bottom: 19px;
    color: var(--ink);
}

.flow-step h3 > span {
    display: inline-block;
}

.flow-step__copy > p:not(.flow-step__number) {
    font-size: 17px;
    line-height: 1.95;
}

.flow-step__copy > p + p:not(.flow-step__number) {
    margin-top: 15px;
}

.enrollment-flow__link {
    max-width: 480px;
    margin: 8px auto 0;
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
    padding: 19px 12px;
    gap: 12px;
    font-size: 15px;
    box-shadow: 0 8px 22px rgb(17 17 17 / 12%);
}

.enrollment-flow__link svg {
    width: 26px;
}

@media (min-width: 700px) {
    .enrollment-flow {
        padding: 90px 7% 90px;
    }

    .enrollment-flow__header h2 > span {
        display: inline;
    }

    .flow-steps {
        margin-top: 56px;
    }

    .flow-step {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 45px;
        padding-bottom: 65px;
    }

    .flow-step + .flow-step {
        padding-top: 60px;
    }

    .flow-step__visual {
        width: 100%;
        margin: 0;
    }

    .flow-step:nth-child(1) .flow-step__visual img {
        aspect-ratio: .92;
        object-position: 66% center;
    }

    .flow-step:nth-child(2) .flow-step__visual {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin: 0;
    }

    .flow-step:nth-child(2) .flow-step__copy {
        grid-column: 1;
        grid-row: 1;
    }

    .flow-step:nth-child(2) .flow-step__visual img {
        aspect-ratio: 1.3;
    }

    .flow-step:nth-child(3) .flow-step__visual {
        width: 92%;
        margin: 0;
    }

    .flow-step:nth-child(3) .flow-step__visual img {
        aspect-ratio: 1.12;
    }

    .flow-step__number {
        font-size: 80px;
    }

    .flow-step h3 {
        font-size: 26px;
    }

    .enrollment-flow__link {
        font-size: 18px;
        padding: 23px;
        gap: 24px;
    }
}

@media (min-width: 1100px) {
    .enrollment-flow {
        padding: 110px 8% 100px;
    }

    .enrollment-flow__header {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        align-items: start;
    }

    .enrollment-flow__header h2 {
        font-size: 45px;
        margin: 0;
    }

    .enrollment-flow__header h2 > span {
        display: block;
    }

    .enrollment-flow__header .eyebrow {
        padding-top: 20px;
    }

    .enrollment-flow__rule {
        margin-top: -22px;
    }

    .flow-step {
        grid-template-columns: 1.1fr 1fr;
        gap: 90px;
        padding-bottom: 84px;
    }

    .flow-step + .flow-step {
        padding-top: 80px;
    }

    .flow-step:nth-child(2) {
        grid-template-columns: 1fr 1.25fr;
    }

    .flow-step:nth-child(2) .flow-step__copy {
        padding-left: 25px;
    }

    .flow-step:nth-child(2) .flow-step__visual img {
        aspect-ratio: 1.5;
    }

    .flow-step:nth-child(3) .flow-step__visual img {
        aspect-ratio: 1.3;
    }

    .flow-step__number {
        font-size: 94px;
        margin-bottom: 20px;
    }

    .flow-step h3 {
        font-size: 31px;
    }

    .flow-step__copy > p:not(.flow-step__number) {
        font-size: 18px;
    }
}

@media (hover: hover) {
    .enrollment-flow__link:hover {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--paper);
    }

    .fee-consultation .text-link:hover {
        background: var(--pink);
        border-color: var(--pink);
        color: var(--ink);
    }
}

@media (min-width: 1000px) {
    .results {
        padding: 105px 8% 94px;
    }

    .results::before {
        top: 0;
        height: 780px;
    }

    .results__header h2 {
        font-size: 53px;
    }

    .results__header h2 > span {
        font-size: 25px;
    }

    .results__achievement {
        margin-top: 34px;
    }

    .results__count-label {
        font-size: 21px;
    }

    .results__count strong {
        font-size: 200px;
    }

    .results__count > span {
        font-size: 34px;
    }

    .results__laurel {
        max-width: 108px;
    }

    .results__laurel--left {
        left: 6%;
    }

    .results__laurel--right {
        right: 6%;
    }

    .results__explanation {
        text-align: center;
    }

    .results__schools {
        margin-top: 48px;
        padding: 32px 50px 25px;
    }

    .results__schools h3 {
        margin-bottom: 31px;
        font-size: 27px;
    }

    .results__schools ul {
        column-gap: 70px;
    }

    .results__schools li {
        font-size: 18px;
    }
}

.results {
    padding-top: 0;
}

.results::before {
    display: none;
}

.results__panorama {
    position: relative;
    height: 205px;
    margin: 0 -8.824%;
    overflow: hidden;
}

.results__panorama img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 23%;
}

.results__header {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: -30px auto 0;
    padding: 25px 15px 0;
    background: var(--paper);
}

.results__header h2 {
    margin-top: 14px;
}

.results__sparkles {
    top: 220px;
}

.footer {
    flex-wrap: wrap;
}

@media (min-width: 600px) {
    .results__panorama {
        margin: 0 -12.5%;
        height: 290px;
    }

    .results__header {
        padding: 30px 44px 0;
        margin-top: -50px;
    }
}

@media (min-width: 1000px) {
    .results {
        padding-top: 0;
    }

    .results__panorama {
        margin: 0 -9.524%;
        height: 330px;
    }

    .results__header {
        padding: 32px 65px 0;
    }
}

/* A single blue/pink identity. Scale, alignment and space carry the hierarchy. */
::selection {
    color: var(--ink);
    background: var(--pink);
}

a:focus-visible {
    outline-color: var(--ink);
}

.eyebrow {
    color: var(--muted);
    letter-spacing: .16em;
}

.hero, .course-visual__frame, .flow-step__visual, .results__panorama {
    isolation: isolate;
    background: var(--brand-wash);
}

.hero__photo, .course-visual__image, .flow-step__visual img, .results__panorama img {
    filter: none;
    mix-blend-mode: normal;
}

.flow-step:nth-child(2) .flow-step__visual {
    background: linear-gradient(135deg, var(--pink), var(--blue));
}

html:not(.is-enhanced) .course {
    background-color: var(--blue);
    background-blend-mode: normal;
}

.introduction {
    padding-top: 100px;
    padding-bottom: 80px;
    background: linear-gradient(var(--blue-soft), var(--paper) 75%);
}

.introduction h2 {
    font-size: clamp(23px, 6vw, 38px);
    line-height: 1.85;
}

.introduction__rule {
    height: 54px;
    background: var(--ink);
}

.course__number {
    font-size: 78px;
}

.course-index a, .course__topics li {
    border-color: var(--line);
}

.course-index span {
    color: var(--ink);
}

.text-link {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper);
}

.closing {
    background: linear-gradient(140deg, var(--blue-soft), var(--paper) 50%, var(--pink-soft));
}

.closing h2 {
    font-size: clamp(32px, 8.8vw, 66px);
    line-height: 1.6;
}

.fees {
    background: var(--paper);
    padding-top: 88px;
}

.fees .eyebrow {
    color: var(--muted);
}

.fees__header {
    border-color: var(--ink);
    padding-bottom: 34px;
}

.fees__header h2 {
    font-size: clamp(34px, 8.3vw, 68px);
    letter-spacing: 0;
    line-height: 1.5;
}

.attendance {
    padding-top: 46px;
    padding-bottom: 52px;
}

.attendance__rhythm {
    color: var(--ink);
    position: relative;
    isolation: isolate;
    width: fit-content;
}

.attendance__rhythm::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: -16px;
    bottom: 4px;
    height: 32%;
    background: var(--brand-wash);
}

.attendance__rhythm strong {
    font-size: 110px;
    letter-spacing: 0;
}

.attendance__copy h3 {
    font-size: clamp(22px, 5.6vw, 31px);
}

.fee-comparison {
    box-shadow: none;
    border-top: 0;
    padding: 28px 0 0;
}

.fee-comparison > h3 {
    font-size: 30px;
    margin-bottom: 28px;
}

.fee-table th, .fee-table td {
    border-color: var(--line);
}

.fee-table thead th {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
}

.fee-table td:nth-child(2), .fee-table th:nth-child(2) {
    background: var(--pink-soft);
}

.fee-table td:nth-child(3), .fee-table th:nth-child(3) {
    background: var(--blue-soft);
}

.fee-table__unit td {
    color: var(--ink);
    padding-top: 26px;
    padding-bottom: 26px;
}

.fee-table__unit strong {
    font-size: clamp(30px, 8.2vw, 44px);
}

.course-popular {
    color: var(--ink);
    background: var(--pink-soft);
    border-radius: 0;
    font-weight: 700;
    border: 1px solid #333;
}

.additional-fees {
    margin-top: 30px;
    border-color: var(--ink);
}

.additional-fees dl > div {
    border-color: var(--line);
}

.additional-fees__heading h3 {
    font-size: 29px;
}

.fee-consultation {
    padding-top: 36px;
}

.fee-consultation .text-link, .enrollment-flow__link {
    color: var(--ink);
    background: var(--brand-wash);
    border: 1px solid transparent;
    box-shadow: none;
}

.results {
    background: linear-gradient(140deg, var(--blue-soft), var(--paper) 48%, var(--pink-soft));
    padding-bottom: 88px;
}

.results__panorama {
    height: 190px;
}

.results__header {
    margin: 0;
    width: auto;
    padding: 48px 0 0;
    background: transparent;
    text-align: left;
}

.results__header .eyebrow {
    color: var(--muted);
}

.results__header h2 {
    font-size: 52px;
    line-height: 1.5;
    letter-spacing: .03em;
}

.results__header h2 > span {
    font-size: clamp(16px, 4.3vw, 25px);
    margin-bottom: 9px;
    letter-spacing: 0;
}

.results__achievement {
    margin: 39px 0 22px;
}

.results__metric {
    text-align: left;
}

.results__years {
    font-size: 20px;
    letter-spacing: .02em;
}

.results__count-label {
    font-size: 18px;
    margin-top: 19px;
}

.results__count {
    justify-content: flex-start;
    color: var(--ink);
    gap: 12px;
}

.results__count strong {
    font-size: clamp(126px, 39vw, 200px);
    letter-spacing: 0;
    line-height: 1.03;
}

.results__count > span {
    font-size: 30px;
}

.results__laurel {
    display: none;
}

.results__explanation {
    margin-top: 24px;
    text-align: left;
}

.results__notes p {
    color: var(--muted);
}

.results__schools {
    border-color: var(--ink);
    padding-top: 32px;
}

.results__schools h3 {
    text-align: left;
}

.results__schools li::before {
    background: var(--ink);
    width: 4px;
    height: 4px;
}

.results__link {
    background: var(--paper);
    border-color: var(--ink);
    color: var(--ink);
}

.results__sparkles i {
    background: var(--pink);
    opacity: 1;
}

.results__sparkles i:nth-child(2n) {
    background: var(--blue);
}

.enrollment-flow {
    background: var(--paper);
    padding-top: 88px;
}

.enrollment-flow__header .eyebrow {
    color: var(--muted);
}

.enrollment-flow__header h2 {
    font-size: clamp(34px, 9vw, 62px);
    line-height: 1.5;
    letter-spacing: 0;
}

.enrollment-flow__rule {
    width: 100%;
    height: 1px;
    background: var(--ink);
    margin-top: 30px;
}

.flow-step, .flow-step:nth-child(2), .flow-step:nth-child(3) {
    --step-color: var(--ink);
}

.flow-step + .flow-step {
    border-color: var(--line);
    padding-top: 42px;
}

.flow-step__visual::after {
    border: 0;
    background: var(--blue);
    inset: 14px -14px -14px 14px;
}

.flow-step:nth-child(2) .flow-step__visual::after {
    background: var(--pink);
    inset: 14px 14px -14px -14px;
}

.flow-step:nth-child(3) .flow-step__visual::after {
    background: var(--brand-wash);
}

.flow-step__copy {
    margin-top: 32px;
}

.flow-step__number {
    font-size: 99px;
    letter-spacing: 0;
    gap: 15px;
    margin-bottom: 22px;
}

.flow-step__number > span {
    font-size: 13px;
    letter-spacing: .12em;
}

.flow-step h3 {
    font-size: clamp(25px, 6.5vw, 33px);
    line-height: 1.65;
}

.enrollment-flow__link {
    margin-top: 20px;
}

@media (min-width: 600px) {
    .introduction h2 {
        font-size: 36px;
    }

    .fee-table__unit strong {
        font-size: 54px;
    }

    .attendance__rhythm {
        width: auto;
    }

    .results__panorama {
        height: 240px;
    }

    .results__count strong {
        font-size: 225px;
    }
}

@media (min-width: 900px) {
    .introduction {
        padding: 135px 24px 105px;
    }

    .introduction h2 {
        font-size: 43px;
        line-height: 1.85;
        letter-spacing: .015em;
    }

    .course__number {
        font-size: 100px;
    }

    .fees {
        padding-top: 130px;
    }

    .fees__header {
        display: grid;
        grid-template-columns: 190px 1fr;
        gap: 38px;
        align-items: end;
        padding-bottom: 42px;
    }

    .fees__header .eyebrow {
        padding-bottom: 15px;
    }

    .fees__header h2 {
        font-size: clamp(48px, 4.7vw, 68px);
    }

    .attendance {
        padding: 72px 0 75px;
        gap: 62px;
    }

    .attendance__rhythm strong {
        font-size: 150px;
    }

    .fee-comparison {
        padding: 26px 0 0;
    }

    .fee-comparison > h3 {
        font-size: 36px;
    }

    .fee-table__unit strong {
        font-size: 70px;
    }

    .fee-table thead th {
        padding-top: 24px;
        padding-bottom: 27px;
    }

    .additional-fees {
        margin-top: 45px;
    }

    .results {
        padding-bottom: 108px;
    }

    .results__inner {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        column-gap: 64px;
    }

    .results__header {
        grid-column: 1/-1;
        padding-top: 65px;
    }

    .results__header h2 {
        font-size: 68px;
    }

    .results__achievement {
        grid-column: 1;
        margin: 47px 0 0;
    }

    .results__explanation {
        grid-column: 2;
        align-self: end;
        margin: 0 0 16px;
    }

    .results__count strong {
        font-size: clamp(175px, 19vw, 272px);
    }

    .results__count > span {
        font-size: 34px;
    }

    .results__schools {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 210px 1fr;
        column-gap: 42px;
        padding: 38px 0 26px;
        margin-top: 57px;
    }

    .results__schools h3 {
        font-size: 28px;
    }

    .results__schools ul {
        gap: 17px 30px;
    }

    .results__schools > p {
        grid-column: 2;
    }

    .results__link {
        grid-column: 2;
        width: 100%;
        margin: 38px 0 0 auto;
    }

    .enrollment-flow {
        padding-top: 118px;
    }

    .enrollment-flow__header {
        grid-template-columns: .75fr 1.5fr;
        gap: 24px;
    }

    .enrollment-flow__header h2 {
        font-size: clamp(43px, 4.3vw, 62px);
    }

    .enrollment-flow__rule {
        grid-column: 1/-1;
        margin-top: 18px;
    }

    .flow-step + .flow-step {
        padding-top: 76px;
    }

    .flow-step__copy {
        margin-top: 0;
    }

    .flow-step__number {
        font-size: 138px;
        margin-bottom: 25px;
    }

    .flow-step h3 {
        font-size: 32px;
    }
}

@media (hover: hover) {
    .text-link:hover, .course .text-link:hover, .fee-consultation .text-link:hover, .enrollment-flow__link:hover {
        color: var(--ink);
        background: linear-gradient(105deg, var(--pink), var(--blue));
        border-color: var(--ink);
    }

    .course-index a:hover, .back-to-top:hover {
        color: var(--ink);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 6px;
    }
}

/* Each decorative window follows a rendered text line, including responsive wraps. */
[data-scroll-wash].scroll-wash {
    position: relative;
    isolation: isolate;
    color: var(--ink);
    background-image: var(--wash-ink);
    background-clip: text;
    -webkit-background-clip: text;
    --wash-pass: 650;
}

[data-scroll-wash].scroll-wash > :not(.scroll-wash__line) {
    color: inherit;
}

.scroll-wash__line {
    position: absolute;
    z-index: 2;
    display: block !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    user-select: none;
}

.scroll-wash__band {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--brand-wash);
    transform: translateX(-104%);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-scroll-wash].scroll-wash {
        color: var(--ink);
        background-image: none;
    }

    .scroll-wash__line {
        display: none !important;
    }
}

@media print {
    [data-scroll-wash].scroll-wash {
        color: var(--ink) !important;
        background-image: none !important;
    }

    .scroll-wash__line {
        display: none !important;
    }
}

/* Photos always retain their original color; only a temporary overlay passes over them. */
.hero__photo, .course-visual__image, .benefit-plan__photo img, .flow-step__visual img, .results__panorama img {
    filter: none;
    mix-blend-mode: normal;
}

html:not(.is-enhanced) .course {
    background-blend-mode: normal;
}

[data-photo-reveal] {
    position: relative;
    isolation: isolate;
}

.photo-reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.photo-reveal__band {
    position: absolute;
    inset: 0;
    background: var(--brand-wash);
    opacity: 0;
    transform: translateX(-105%);
    pointer-events: none;
}

.hero > .photo-reveal {
    z-index: -1;
}

@media (min-width: 900px) {
    .hero > .photo-reveal {
        left: 26%;
    }
}

/* A full-width backdrop changes with the reading position; white rows stay readable. */
.fees {
    overflow: clip;
}

.course-benefits {
    position: relative;
    isolation: isolate;
    margin-top: 82px;
    padding: 62px 0 65px;
    scroll-margin-top: 0;
}

.course-benefits::before, .course-benefits::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
}

.course-benefits::before {
    background: linear-gradient(180deg, var(--blue), var(--pink));
}

.course-benefits::after {
    display: none;
    background: var(--pink);
    opacity: var(--benefit-progress, 0);
}

.course-benefits.has-scroll-palette::before {
    background: var(--blue);
}

.course-benefits.has-scroll-palette::after {
    display: block;
}

.course-benefits__header {
    display: block;
    margin-bottom: 44px;
}

.course-benefits__header .eyebrow {
    color: var(--ink);
    font-size: 12px;
    padding: 0;
}

.course-benefits__header h3 {
    margin-top: 16px;
    font-size: clamp(27px, 6.8vw, 42px);
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--ink);
}

.course-benefits__grid {
    display: grid;
    gap: 64px;
}

.benefit-plan {
    min-width: 0;
    color: var(--ink);
}

.benefit-plan__hero {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 26px;
}

.benefit-plan__intro {
    min-width: 0;
}

.benefit-plan h4 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 6px;
    line-height: 1.2;
    font-weight: 700;
}

.benefit-plan h4 strong {
    font-family: 'Times New Roman', serif;
    font-size: 83px;
    line-height: .95;
    letter-spacing: 0;
    font-weight: 400;
}

.benefit-plan h4 > span {
    font-size: 23px;
    white-space: nowrap;
}

.benefit-plan__offer {
    display: table;
    margin-top: 19px;
    padding-top: 12px;
    border-top: 1px solid var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

.benefit-plan__photo {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}

.benefit-plan__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: .95;
    object-fit: cover;
    object-position: 65% center;
}

.benefit-plan--64 .benefit-plan__photo img {
    object-position: 55% 20%;
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.benefit-list > li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 13px;
    row-gap: 18px;
    align-items: baseline;
    background: var(--paper);
    padding: 24px 18px 22px;
}

.benefit-list__number {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--muted);
}

.benefit-list__content {
    min-width: 0;
}

.benefit-list h5 {
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
}

.essay-materials {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
}

.essay-materials li {
    position: relative;
    padding-left: 13px;
}

.essay-materials li + li {
    margin-top: 8px;
}

.essay-materials li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .85em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink);
}

.benefit-price {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 13px;
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    white-space: nowrap;
}

.benefit-price > span {
    color: var(--muted);
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.benefit-price i {
    font-style: normal;
    font-size: 20px;
}

.benefit-price strong {
    color: var(--ink);
    font-family: 'Times New Roman', serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1;
    letter-spacing: 0;
}

.benefit-price small {
    font-family: var(--serif);
    font-size: 20px;
    margin-left: 4px;
    font-weight: 700;
}

.additional-fees {
    margin-top: 22px;
}

@media (max-width: 359px) {
    .benefit-list > li {
        grid-template-columns: 1fr;
        padding: 22px 18px;
        row-gap: 10px;
    }

    .benefit-price {
        grid-column: 1;
        margin-top: 5px;
    }

    .benefit-plan__hero {
        gap: 16px;
    }

    .benefit-plan h4 strong {
        font-size: 74px;
    }

    .benefit-plan h4 > span {
        font-size: 21px;
    }
}

@media (min-width: 600px) {
    .course-benefits {
        margin-top: 98px;
        padding-top: 80px;
        padding-bottom: 86px;
    }

    .course-benefits__header {
        margin-bottom: 53px;
    }

    .course-benefits__grid {
        gap: 86px;
    }

    .benefit-plan__hero {
        grid-template-columns: 1.15fr 1fr;
        margin-bottom: 34px;
        gap: 40px;
    }

    .benefit-plan h4 strong {
        font-size: 107px;
    }

    .benefit-plan h4 > span {
        font-size: 29px;
    }

    .benefit-plan__offer {
        font-size: 18px;
        margin-top: 24px;
    }

    .benefit-plan__photo img {
        aspect-ratio: 1.65;
    }

    .benefit-list > li {
        grid-template-columns: 47px minmax(0, 1fr) 114px;
        gap: 20px;
        padding: 29px 27px;
    }

    .benefit-list__number {
        font-size: 15px;
    }

    .benefit-list h5 {
        font-size: 24px;
    }

    .essay-materials {
        font-size: 17px;
    }

    .benefit-price {
        grid-column: 3;
        display: grid;
        grid-template-columns: 20px auto;
        justify-content: end;
        gap: 7px 12px;
        align-self: center;
        padding: 0 0 0 13px;
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    .benefit-price > span {
        grid-column: 1/-1;
        font-size: 17px;
    }

    .benefit-price strong {
        font-size: 60px;
    }

    .benefit-price small {
        font-size: 21px;
    }
}

@media (min-width: 1000px) {
    .course-benefits {
        margin-top: 120px;
        padding-top: 94px;
        padding-bottom: 104px;
    }

    .course-benefits__header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 32px;
        margin-bottom: 68px;
    }

    .course-benefits__header h3 {
        font-size: 42px;
        margin-top: 0;
    }

    .course-benefits__grid {
        gap: 112px;
    }

    .benefit-plan {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr);
        gap: 44px;
        align-items: start;
    }

    .benefit-plan__hero {
        display: block;
        margin: 0;
    }

    .benefit-plan h4 strong {
        font-size: 112px;
    }

    .benefit-plan h4 > span {
        font-size: 27px;
    }

    .benefit-plan__offer {
        margin-top: 26px;
    }

    .benefit-plan__photo {
        margin-top: 28px;
    }

    .benefit-plan__photo img {
        aspect-ratio: 1.12;
    }

    .benefit-list {
        gap: 14px;
    }

    .benefit-list > li {
        padding: 29px 24px;
        grid-template-columns: 43px minmax(0, 1fr) 113px;
        column-gap: 17px;
    }

    .benefit-list h5 {
        font-size: 24px;
    }

    .benefit-price strong {
        font-size: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-reveal {
        display: none;
    }

    .course-benefits.has-scroll-palette::before {
        background: linear-gradient(180deg, var(--blue), var(--pink));
    }

    .course-benefits.has-scroll-palette::after {
        display: none;
    }
}

@media print {
    .photo-reveal {
        display: none;
    }

    .course-benefits::before, .course-benefits::after {
        display: none;
    }
}

/* Motion is assigned by role; static content is visible without JavaScript. */
:root {
    letter-spacing: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.reveal-pending {
    opacity: 0;
}

.handwritten-note {
    width: min(100%, 300px);
    color: var(--ink);
    letter-spacing: 0;
    line-height: 1;
}

.handwritten-note svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.handwritten-note__underline {
    stroke-width: 1.35;
    opacity: .65;
}

.enrollment-flow__header .handwritten-note {
    padding: 0;
    margin-bottom: 18px;
    transform: rotate(-3deg);
}

.closing .handwritten-note {
    width: min(100%, 336px);
    transform: rotate(-3deg);
}

.benefit-list h5 {
    text-wrap: balance;
}

.fees__header h2, .course-benefits__header h3 {
    text-wrap: balance;
}

.introduction__rule, .enrollment-flow__rule {
    transform-origin: left center;
}

.introduction__rule {
    transform-origin: center top;
}

.has-scroll-tone {
    position: relative;
    isolation: isolate;
    background: var(--tone-start);
}

.has-scroll-tone::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tone-end);
    opacity: var(--tone-progress, 0);
    pointer-events: none;
}

.introduction {
    --tone-start: var(--paper);
    --tone-end: var(--blue-soft);
}

.fees {
    --tone-start: var(--blue-soft);
    --tone-end: var(--paper);
}

.results {
    --tone-start: var(--paper);
    --tone-end: var(--pink-soft);
}

.enrollment-flow {
    --tone-start: var(--pink-soft);
    --tone-end: var(--blue-soft);
}

.closing {
    --tone-start: var(--blue);
    --tone-end: var(--pink);
}

.results__count {
    position: relative;
}

.results__count strong {
    font-variant-numeric: lining-nums tabular-nums;
}

.results__count .is-shuffling {
    opacity: 0;
}

.results__count > .results__shuffle {
    position: absolute;
    display: flex;
    gap: 0;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: 0;
    pointer-events: none;
    user-select: none;
}

.results__digit {
    flex: 1 1 0;
    min-width: 0;
    height: var(--digit-height);
    overflow: hidden;
}

.results__reel, .results__reel > span {
    display: block;
}

.results__reel > span {
    height: var(--digit-height);
    line-height: var(--digit-height);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 599px) {
    .benefit-list > li {
        grid-template-columns: 1fr;
        row-gap: 11px;
    }

    .benefit-price {
        grid-column: 1;
        margin-top: 5px;
    }

    .benefit-plan h4 > span {
        font-size: 22px;
    }
		.introduction__connection br {
    display: none;
}

p.introduction__connection {
    text-align: left;
}
}

@media (min-width: 900px) {
    .handwritten-note {
        width: min(100%, 325px);
    }

    .enrollment-flow__header .handwritten-note {
        align-self: center;
        margin: 0;
    }

    .closing .handwritten-note {
        width: 380px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-pending {
        opacity: 1 !important;
    }

    .has-scroll-tone::after {
        opacity: .5;
    }

    .handwritten-note :is(path, use) {
        stroke-dashoffset: 0 !important;
    }
}

@media print {
    .results__shuffle {
        display: none !important;
    }

    .results__count .is-shuffling {
        opacity: 1 !important;
    }

    .reveal-pending {
        opacity: 1 !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .handwritten-note :is(path, use) {
        stroke-dashoffset: 0 !important;
    }

    .has-scroll-tone::after {
        display: none;
    }
}

/* v11: native sticky chapters. Photos and copy have distinct scroll rhythms. */
.hero__glint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    color: transparent;
    background: linear-gradient(105deg, transparent 25%, var(--blue) 40%, var(--pink) 50%, var(--paper) 55%, transparent 70%);
    background-size: 260% 100%;
    background-position: 150% 0;
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 0;
}

.hero__glint * {
    color: transparent !important;
    border-color: transparent !important;
}

.hero > .photo-reveal {
    left: 0;
}

.scroll-wash {
    background-size: 230% 100%;
    background-position: 100% 0;
}

.handwritten-note {
    width: min(100%, 330px);
    color: var(--ink);
}

.handwritten-note__script {
    display: block;
    font-family: 'Editorial Script', cursive;
    font-size: clamp(62px, 16vw, 92px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0;
    white-space: nowrap;
}

.handwritten-note__flourish {
    height: 17px;
    margin-top: -9px;
}

.handwritten-note__flourish :is(path, use) {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}

.enrollment-flow__header .handwritten-note, .closing .handwritten-note {
    transform: rotate(-5deg);
}

.closing .handwritten-note {
    width: min(100%, 380px);
}

.closing .handwritten-note__script {
    font-size: clamp(57px, 14.5vw, 85px);
}

.results {
    --ink: var(--paper);
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 0;
    background: var(--blue);
    color: var(--paper);
}

.results__backdrop {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    z-index: 0;
}

.results__backdrop picture, .results__backdrop img {
    display: block;
    width: 100%;
    height: 100%;
}

.results__backdrop img {
    object-fit: cover;
    object-position: center top;
}

.results__backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(0 0 0 / 24%) 25%, rgb(0 0 0 / 24%) 75%, transparent);
}

.results__inner {
    position: relative;
    z-index: 1;
    display: block;
    width: min(74%, 720px);
    margin: -100svh auto 0;
    padding: 0 0 19svh;
    text-align: center;
    text-shadow: 0 1px 3px rgb(0 0 0 / 48%);
}

.results__header {
    width: 100%;
    margin: 0;
    padding: 25svh 0 0;
    text-align: center;
    background: none;
}

.results__header .eyebrow {
    color: var(--paper);
    font-size: 12px;
    letter-spacing: .18em;
}

.results__header h2 {
    color: var(--paper);
    font-size: clamp(50px, 13vw, 90px);
    line-height: 1.4;
    letter-spacing: .04em;
    margin-top: 24px;
}

.results__header h2 > span {
    display: block;
    font-size: clamp(15px, 3.9vw, 23px);
    line-height: 1.8;
    margin-bottom: 10px;
    color: var(--paper);
}

.results__achievement {
    display: block;
    margin: 64px 0 0;
}

.results__metric {
    text-align: center;
}

.results__years {
    display: inline-block;
    color: var(--paper);
    font-size: clamp(21px, 5.5vw, 30px);
    padding: 0 10px 12px;
    border-bottom: 2px solid var(--pink);
}

.results__count-label {
    font-size: 20px;
    margin-top: 29px;
    color: var(--paper);
}

.results__count {
    justify-content: center;
    color: var(--paper);
    gap: 10px;
}

.results__count strong {
    font-size: clamp(120px, 38vw, 272px);
    line-height: 1.08;
    color: var(--paper);
}

.results__count > span {
    color: var(--paper);
    font-size: clamp(25px, 7vw, 38px);
}

.results__count > .results__shuffle {
    color: var(--paper);
}

.results__explanation {
    width: min(100%, 560px);
    margin: 38px auto 0;
    text-align: center;
}

.results__explanation > p {
    font-size: clamp(17px, 3.8vw, 20px);
    line-height: 2;
    color: var(--paper);
}

.results__notes {
    margin-top: 23px;
}

.results__notes p {
    color: var(--paper);
    font-size: 13px;
    line-height: 1.9;
}

.results__schools {
    display: block;
    margin: 80px auto 0;
    padding: 38px 0;
    border-top: 1px solid rgb(255 255 255 / 65%);
    border-bottom: 1px solid rgb(255 255 255 / 65%);
}

.results__schools h3 {
    color: var(--paper);
    text-align: center;
    font-size: 27px;
}

.results__schools ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 17px;
    margin-top: 30px;
}

.results__schools li {
    color: var(--paper);
    padding: 0;
    font-size: 16px;
    line-height: 1.8;
}

.results__schools li::before {
    display: none;
}

.results__schools > p {
    color: var(--paper);
    margin-top: 20px;
    text-align: center;
}

.results__link {
    width: min(100%, 400px);
    margin: 45px auto 0;
    color: var(--paper);
    background: transparent;
    border-color: var(--paper);
}

.results__link:hover {
    color: #111111;
    background: var(--brand-wash);
    border-color: var(--paper);
}

.benefit-plan__stage {
    min-width: 0;
}

.benefit-plan {
    display: block;
}

.benefit-plan + .benefit-plan {
    margin-top: 55px;
}

.course-benefits__grid {
    display: block;
}

.deck-controls {
    display: none;
}

.is-pinned {
    height: calc(var(--pin-height) + var(--pin-distance));
}

.is-pinned > .pin-stage {
    position: sticky;
    top: 0;
    min-height: var(--pin-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 0;
    gap: 22px;
}

.benefit-plan.is-pinned .benefit-plan__hero {
    display: grid;
    grid-template-columns: 1fr 110px;
    align-items: center;
    gap: 24px;
    margin: 0;
}

.benefit-plan.is-pinned h4 strong {
    font-size: 65px;
}

.benefit-plan.is-pinned h4 > span {
    font-size: 22px;
}

.benefit-plan.is-pinned .benefit-plan__offer {
    margin-top: 12px;
    padding-top: 8px;
    font-size: 15px;
}

.benefit-plan.is-pinned .benefit-plan__photo {
    margin: 0;
}

.benefit-plan.is-pinned .benefit-plan__photo img {
    aspect-ratio: 1;
}

.benefit-plan.is-pinned .benefit-list {
    display: grid;
    gap: 0;
    perspective: 1200px;
}

.benefit-plan.is-pinned .benefit-list > li {
    grid-area: 1 / 1;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: var(--card-height, 338px);
    height: 100%;
    padding: 24px;
    gap: 16px;
    align-items: start;
    transform-origin: 50% 0;
    backface-visibility: hidden;
    box-shadow: 0 10px 32px rgb(0 0 0 / 6%);
    transition: transform 620ms cubic-bezier(.23,.75,.2,1), opacity 480ms ease;
}

.benefit-plan.is-pinned .benefit-list h5 {
    font-size: 24px;
}

.benefit-plan.is-pinned .benefit-price {
    grid-column: 1;
    display: flex;
    align-self: end;
    padding: 16px 0 0;
    margin: 0;
    gap: 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
}

.benefit-plan.is-pinned .benefit-price strong {
    font-size: 58px;
}

.benefit-plan.is-pinned .essay-materials {
    font-size: 16px;
}

.benefit-plan.is-pinned .benefit-list > li[data-panel-state='before'] {
    opacity: 0;
    transform: translateY(-35px) rotateX(85deg) rotateZ(-2deg);
    pointer-events: none;
}

.benefit-plan.is-pinned .benefit-list > li[data-panel-state='after'] {
    opacity: 0;
    transform: translateY(24px) rotateX(-12deg) scale(.97);
    pointer-events: none;
}

.benefit-plan.is-pinned .benefit-list > li[data-panel-state='active'] {
    opacity: 1;
    transform: none;
}

.is-pinned .deck-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    color: var(--ink);
}

.deck-controls__count {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: 'Times New Roman', serif;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.deck-controls__count strong {
    font-size: 28px;
    font-weight: 400;
}

.deck-controls__track {
    flex: 1;
    height: 1px;
    background: rgb(17 17 17 / 20%);
    position: relative;
    margin: 0 7px;
}

.deck-controls__track::after {
    content: '';
    display: block;
    width: var(--panel-progress, 33.333%);
    height: 1px;
    background: var(--ink);
    transition: width .5s ease;
}

.deck-controls button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    font-size: 23px;
    line-height: 1;
    font-family: sans-serif;
}

.deck-controls button:disabled {
    opacity: .3;
    cursor: default;
}

.deck-controls button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

.flow-story .flow-steps {
    margin: 0;
}

.flow-story .flow-step .flow-step__visual {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.flow-story .flow-step__visual::after {
    display: none;
}

.flow-story .flow-step__visual img {
    aspect-ratio: 1.8;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.flow-story .flow-step:nth-child(1) .flow-step__visual img {
    object-position: 50% 14%;
}

.flow-story .flow-step:nth-child(3) .flow-step__visual img {
    object-position: 60% 10%;
}

.flow-story.is-pinned .flow-steps {
    display: grid;
    gap: 0;
}

.flow-story.is-pinned .flow-step {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    grid-area: 1 / 1;
    gap: 23px;
    padding: 0;
    margin: 0;
    border: 0;
}

.flow-story.is-pinned .flow-step__visual {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.flow-story.is-pinned .flow-step__visual img {
    aspect-ratio: 1.8;
    transition: clip-path 550ms cubic-bezier(.22,.75,.2,1), transform 650ms cubic-bezier(.22,.75,.2,1);
}

.flow-story.is-pinned .flow-step__copy {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    margin: 0;
    transition: opacity 350ms ease, transform 450ms ease;
}

.flow-story.is-pinned .flow-step__number {
    font-size: 49px;
    line-height: 1;
    margin-bottom: 15px;
}

.flow-story.is-pinned .flow-step h3 {
    font-size: 25px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.flow-story.is-pinned .flow-step h3 > span {
    display: inline;
}

.flow-story.is-pinned .flow-step__copy > p:not(.flow-step__number) {
    font-size: 17px;
    line-height: 1.85;
}

.flow-story.is-pinned .flow-step__copy > p + p {
    margin-top: 14px;
}

.flow-story.is-pinned .flow-step[data-panel-state='before'] .flow-step__visual img {
    clip-path: inset(0 0 0 100%);
    transform: translateX(10%);
}

.flow-story.is-pinned .flow-step[data-panel-state='after'] .flow-step__visual img {
    clip-path: inset(0 100% 0 0);
    transform: translateX(-8%);
}

.flow-story.is-pinned .flow-step[data-panel-state='active'] .flow-step__visual img {
    clip-path: inset(0);
    transform: none;
}

.flow-story.is-pinned .flow-step:not([data-panel-state='active']) .flow-step__copy {
    opacity: 0;
    transform: translateY(14px);
}

.flow-story.is-pinned .flow-step:not([data-panel-state='active']) {
    pointer-events: none;
}

@media (min-width: 700px) {
    .results__schools ul {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .handwritten-note {
        width: min(100%, 380px);
    }
}

@media (min-width: 900px) {
    .benefit-plan.is-pinned > .pin-stage {
        display: grid;
        grid-template-columns: .85fr 1.15fr;
        grid-template-rows: 1fr auto;
        column-gap: 70px;
        align-content: center;
        align-items: center;
        padding: max(40px, 10svh) 0;
    }

    .benefit-plan.is-pinned .benefit-plan__hero {
        grid-column: 1;
        grid-row: 1 / 3;
        display: block;
    }

    .benefit-plan.is-pinned h4 strong {
        font-size: 112px;
    }

    .benefit-plan.is-pinned h4 > span {
        font-size: 27px;
    }

    .benefit-plan.is-pinned .benefit-plan__offer {
        margin-top: 24px;
        font-size: 18px;
    }

    .benefit-plan.is-pinned .benefit-plan__photo {
        margin-top: 32px;
        max-width: 370px;
    }

    .benefit-plan.is-pinned .benefit-plan__photo img {
        aspect-ratio: 1.45;
    }

    .benefit-plan.is-pinned .benefit-list {
        grid-column: 2;
        align-self: end;
    }

    .benefit-plan.is-pinned .benefit-list > li {
        min-height: var(--card-height, 455px);
        padding: 38px;
        gap: 22px;
    }

    .benefit-plan.is-pinned .benefit-list h5 {
        font-size: 29px;
    }

    .benefit-plan.is-pinned .essay-materials {
        font-size: 18px;
    }

    .benefit-plan.is-pinned .benefit-price strong {
        font-size: 79px;
    }

    .benefit-plan.is-pinned .deck-controls {
        grid-column: 2;
        align-self: start;
    }

    .flow-story.is-pinned .flow-step {
        grid-template-columns: 1fr 1fr;
        column-gap: 65px;
        align-items: center;
    }

    .flow-story.is-pinned .flow-step__visual {
        grid-column: 2;
        grid-row: 1;
    }

    .flow-story.is-pinned .flow-step__visual img {
        aspect-ratio: .9;
    }

    .flow-story.is-pinned .flow-step__copy {
        grid-column: 1;
        grid-row: 1;
    }

    .flow-story.is-pinned .flow-step__number {
        font-size: 100px;
        margin-bottom: 25px;
    }

    .flow-story.is-pinned .flow-step h3 {
        font-size: 32px;
        margin-bottom: 25px;
    }

    .flow-story.is-pinned .flow-step__copy > p:not(.flow-step__number) {
        font-size: 18px;
    }

    .flow-story.is-pinned .deck-controls {
        width: calc(50% - 32px);
    }
}

@media (max-width: 359px) {
    .benefit-plan.is-pinned .benefit-list > li {
        padding: 21px 19px;
    }

    .benefit-plan.is-pinned .benefit-list h5 {
        font-size: 22px;
    }

    .benefit-plan.is-pinned .benefit-plan__hero {
        grid-template-columns: 1fr 92px;
        gap: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__glint {
        display: none;
    }

    .handwritten-note__script {
        clip-path: none !important;
    }
}

@media print {
    .results__backdrop {
        display: none;
    }

    .results {
        --ink: #111111;
        color: #111111;
        background: var(--paper);
    }

    .results__inner {
        margin: 0 auto;
        width: 90%;
        padding: 30px 0;
    }

    .results__inner * {
        color: #111111 !important;
        border-color: var(--line);
    }

    .results__header {
        padding-top: 0;
    }

    .is-pinned {
        height: auto !important;
    }

    .is-pinned > .pin-stage {
        position: static;
        min-height: 0;
        display: block !important;
        padding: 0;
    }

    .is-pinned .benefit-list, .is-pinned .flow-steps {
        display: block !important;
    }

    .is-pinned [data-panel-state] {
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 24px !important;
    }

    .is-pinned .flow-step__copy, .is-pinned .flow-step__visual img {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .deck-controls, .hero__glint {
        display: none !important;
    }
}

.hero__glint, .hero__glint * {
    text-shadow: none;
}

/* v14 — five editorial benefits, one reading stage. */
.course-benefits {
    padding: 0;
}

.course-benefits::before {
    background: linear-gradient(145deg, var(--blue-soft), var(--pink-soft));
}

.benefit-deck__stage {
    padding: 65px 0;
}

.benefit-deck .course-benefits__header {
    display: block;
    margin: 0 0 26px;
}

.benefit-deck .course-benefits__header .eyebrow {
    font-size: 10px;
    letter-spacing: .14em;
}

.benefit-deck .course-benefits__header h3 {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 12px 0 0;
    font-size: 26px;
    line-height: 1.15;
}

.benefit-deck .course-benefits__header h3 > span {
    font-size: 16px;
    margin-right: 8px;
}

.benefit-deck .course-benefits__header h3 > strong {
    font-family: 'Times New Roman', serif;
    font-size: 58px;
    font-weight: 400;
}

.benefit-cards {
    list-style: none;
    display: grid;
    gap: 25px;
    padding: 0;
    margin: 0;
}

.benefit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 340px;
    padding: 24px 0 38px;
    border-top: 1px solid rgb(17 17 17 / 22%);
}

.benefit-card__number {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 28px;
    font-family: 'Times New Roman', serif;
    font-size: 72px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
}

.benefit-card__number > span {
    font-size: 10px;
    letter-spacing: .16em;
    writing-mode: vertical-rl;
}

.benefit-card h4 {
    position: relative;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0;
}

.benefit-card__lead {
    display: block;
    font-size: clamp(19px, 4.8vw, 30px);
    line-height: 1.7;
    margin-bottom: 9px;
}

.benefit-card__title {
    display: block;
    font-size: clamp(26px, 8.1vw, 66px);
    line-height: 1.65;
    white-space: nowrap;
}

.benefit-card__amount {
    font-family: 'Times New Roman', serif;
    font-size: 1.6em;
    font-weight: 400;
    margin-left: .2em;
    white-space: nowrap;
}

.benefit-card__amount > span {
    font-family: var(--serif);
    font-size: .55em;
    font-weight: 700;
}

.benefit-marker {
    position: relative;
    isolation: isolate;
    display: inline-block;
}

.benefit-marker svg {
    position: absolute;
    z-index: -1;
    left: -2%;
    bottom: .08em;
    width: 104%;
    height: .62em;
    overflow: visible;
    pointer-events: none;
}

.benefit-marker :is(path, use) {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 14px;
}

.benefit-marker__blue {
    stroke: var(--blue);
}

.benefit-marker__pink {
    stroke: var(--pink);
    opacity: .8;
}

.marker-ready .benefit-marker :is(path, use) {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.marker-ready .is-marked .benefit-marker :is(path, use) {
    animation: benefit-mark 420ms cubic-bezier(.15,.65,.3,1) 180ms both;
}

.marker-ready .is-marked .benefit-marker__pink {
    animation-delay: 240ms;
}

@keyframes benefit-mark {
    to {
        stroke-dashoffset: 0;
    }
}

.benefit-deck.is-pinned > .pin-stage {
    gap: 22px;
    padding: 25px 0;
}

.benefit-deck.is-pinned .benefit-cards {
    gap: 0;
}

.benefit-deck.is-pinned .benefit-card {
    grid-area: 1 / 1;
    min-height: var(--card-height, 340px);
    height: 100%;
    transition: opacity 300ms ease, transform 480ms cubic-bezier(.2,.8,.2,1);
}

.benefit-deck.is-pinned [data-panel-state='before'] {
    opacity: 0;
    transform: translateY(-32px);
    pointer-events: none;
}

.benefit-deck.is-pinned [data-panel-state='after'] {
    opacity: 0;
    transform: translateY(32px);
    pointer-events: none;
}

.benefit-deck.is-pinned [data-panel-state='active'] {
    opacity: 1;
    transform: none;
}

.benefit-deck.is-pinned .course-benefits__header {
    margin: 0;
}

.benefit-deck .deck-controls {
    max-width: 520px;
    align-self: flex-end;
}

/* Enrollment photographs fill a bounded sticky chapter, just like subjects 01–03. */
.enrollment-flow {
    padding: 80px 0 0;
    overflow: visible;
}

.enrollment-flow > .enrollment-flow__inner {
    width: min(85%, 1120px);
}

.enrollment-flow__header {
    margin-bottom: 55px;
}

.flow-background-story {
    position: relative;
    isolation: isolate;
}

.flow-backdrop {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    background: var(--blue-soft);
}

.flow-backdrop__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 43%;
    opacity: 0;
    transition: opacity 650ms ease;
    filter: none;
}

.flow-backdrop__image.is-active {
    opacity: 1;
}

.flow-backdrop__image:nth-child(2) {
    object-position: 50% 34%;
}

.flow-backdrop__image:nth-child(3) {
    object-position: 50% 69%;
}

.flow-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(255 255 255 / 48%), rgb(255 255 255 / 72%) 30%, rgb(255 255 255 / 68%) 76%, rgb(255 255 255 / 52%));
}

.flow-scenes {
    list-style: none;
    margin: -100svh 0 0;
    padding: 0;
}

.flow-scene {
    display: flex;
    align-items: center;
    min-height: 112svh;
    padding: 15svh 7.5% 18svh;
}

.flow-scene__copy {
    width: 100%;
    max-width: 520px;
}

.flow-scene .flow-step__number {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 0 0 27px;
    font-family: 'Times New Roman', serif;
    font-size: clamp(90px, 25vw, 150px);
    line-height: 1;
    font-weight: 400;
    color: var(--ink);
}

.flow-scene .flow-step__number > span {
    font-size: 12px;
    letter-spacing: .16em;
}

.flow-scene h3 {
    font-size: clamp(29px, 7.3vw, 44px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 24px;
}

.flow-scene h3 > span {
    display: block;
}

.flow-scene__copy > p:not(.flow-step__number) {
    font-size: 18px;
    line-height: 2;
    margin-top: 19px;
}

.enrollment-flow__bottom {
    padding: 45px 0 70px;
}

.enrollment-flow__bottom .enrollment-flow__link {
    margin-top: 0;
}

html:not(.is-enhanced) .flow-backdrop {
    display: none;
}

html:not(.is-enhanced) .flow-scenes {
    margin: 0;
}

html:not(.is-enhanced) .flow-scene {
    background: linear-gradient(rgb(255 255 255 / 72%), rgb(255 255 255 / 72%)), var(--flow-photo) center / cover;
}

.flow-scene:nth-child(1) {
    --flow-photo: url('assets/images/flow-apply.webp');
}

.flow-scene:nth-child(2) {
    --flow-photo: url('assets/images/flow-talk.webp');
}

.flow-scene:nth-child(3) {
    --flow-photo: url('assets/images/flow-start.webp');
}

/* Real photographic canopy sits in front of copy; petals remain behind it. */
.results__canopy {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100%;
    margin-top: -100svh;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    mask-image: linear-gradient(#000 0 27%, transparent 40%);
}

.results__canopy picture, .results__canopy img {
    display: block;
    width: 100%;
    height: 100%;
}

.results__canopy picture {
    mask-image: url("assets/images/results-canopy-mask.webp");
    mask-mode: luminance;
    mask-size: cover;
    mask-position: center top;
    mask-repeat: no-repeat;
}

.results__canopy img {
    object-fit: cover;
    object-position: center top;
}

.results__inner {
    z-index: 2;
}

.results__backdrop > picture, .results__canopy > picture {
    transform-origin: 50% 8%;
    animation: sakura-sway 15s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.results.is-moving .results__backdrop > picture, .results.is-moving .results__canopy > picture {
    animation-play-state: running;
}

@keyframes sakura-sway {
    0% {
        transform: scale(1.025) rotate(-.22deg) translateX(-.12%);
    }

    55% {
        transform: scale(1.025) rotate(.16deg) translateX(.12%);
    }

    100% {
        transform: scale(1.025) rotate(-.08deg) translateX(.2%);
    }
}

.results__petals {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.sakura-petal {
    position: absolute;
    top: 12%;
    left: var(--petal-left);
    width: var(--petal-size, 13px);
    height: var(--petal-size, 13px);
    opacity: 0;
    animation: petal-fall var(--petal-time, 18s) linear var(--petal-delay, 0s) infinite;
    animation-play-state: paused;
}

.sakura-petal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: petal-flutter 3.7s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.results.is-moving .sakura-petal, .results.is-moving .sakura-petal img {
    animation-play-state: running;
}

.sakura-petal--1 {
    --petal-left: 23%;
    --petal-time: 19s;
    --petal-delay: 1s;
    --petal-size: 12px;
}

.sakura-petal--2 {
    --petal-left: 76%;
    --petal-time: 23s;
    --petal-delay: 5s;
    --petal-size: 15px;
}

.sakura-petal--3 {
    --petal-left: 45%;
    --petal-time: 26s;
    --petal-delay: 11s;
    --petal-size: 9px;
}

.sakura-petal--4 {
    --petal-left: 65%;
    --petal-time: 21s;
    --petal-delay: 15s;
    --petal-size: 11px;
}

.sakura-petal--5 {
    --petal-left: 14%;
    --petal-time: 28s;
    --petal-delay: 19s;
    --petal-size: 10px;
}

@keyframes petal-fall {
    0% {
        opacity: 0;
        transform: translate(0, -20px);
    }

    5% {
        opacity: .8;
    }

    30% {
        transform: translate(35px, 42svh);
    }

    55% {
        opacity: .75;
        transform: translate(-15px, 83svh);
    }

    66%, 100% {
        opacity: 0;
        transform: translate(28px, 101svh);
    }
}

@keyframes petal-flutter {
    0% {
        transform: rotate(0deg) rotateY(-45deg);
    }

    50% {
        transform: rotate(95deg) rotateY(30deg);
    }

    100% {
        transform: rotate(190deg) rotateY(-20deg);
    }
}

@media (max-width: 699px) {
    .results__canopy picture {
        mask-image: url("assets/images/results-canopy-mask-mobile.webp");
    }
}

@media (min-width: 700px) {
    .benefit-card__title {
        font-size: clamp(45px, 5.8vw, 74px);
    }

    .benefit-card {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6%;
        min-height: 360px;
    }

    .benefit-card__number {
        font-size: clamp(110px, 17vw, 215px);
        margin: 0;
        gap: 18px;
    }

    .benefit-card__number > span {
        font-size: 12px;
    }

    .benefit-deck .course-benefits__header h3 {
        font-size: 33px;
    }

    .benefit-deck .course-benefits__header h3 > span {
        font-size: 22px;
        margin-right: 15px;
    }

    .benefit-deck .course-benefits__header h3 > strong {
        font-size: 74px;
    }
}

@media (min-width: 900px) {
    .flow-scene {
        padding: 13svh 52% 16svh max(6%, calc((100vw - 1260px) / 2));
    }

    .flow-backdrop::after {
        background: linear-gradient(90deg, rgb(255 255 255 / 78%) 0%, rgb(255 255 255 / 75%) 42%, rgb(255 255 255 / 22%) 80%);
    }

    .flow-backdrop__image {
        object-position: 50% 38%;
    }

    .enrollment-flow {
        padding-top: 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-ready .benefit-marker :is(path, use) {
        animation: none !important;
        stroke-dashoffset: 0;
    }

    .flow-backdrop__image {
        transition: none;
    }

    .results__backdrop > picture, .results__canopy > picture {
        animation: none;
    }

    .results__petals {
        display: none;
    }
}

@media print {
    .benefit-cards {
        display: block !important;
    }

    .benefit-card {
        break-inside: avoid;
        min-height: 0 !important;
    }

    .benefit-marker :is(path, use) {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }

    .flow-backdrop, .results__canopy, .results__petals {
        display: none;
    }

    .flow-scenes {
        margin: 0;
    }

    .flow-scene {
        min-height: 0;
        padding: 30px 7.5%;
        break-inside: avoid;
    }
}

/* Access is an ordinary reading section between the scroll story and closing CTA. */
.campus-access {
    position: relative;
    padding: clamp(76px, 9vw, 138px) 7.5% clamp(70px, 8vw, 116px);
    color: var(--ink);
    background: linear-gradient(135deg, #fff 50%, var(--blue-soft) 100%);
    overflow: clip;
}

.campus-access__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.campus-access__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: clamp(35px, 5vw, 70px);
    padding-bottom: 25px;
    border-bottom: 1px solid var(--blue);
}

.campus-access__eyebrow {
    margin: 0;
    font: 400 clamp(34px, 6.6vw, 88px)/.9 "Times New Roman", serif;
    letter-spacing: .025em;
}

.campus-access__header h2 {
    margin: 0;
    font-size: clamp(29px, 3.8vw, 44px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .025em;
}

.campus-access__header h2 > span {
    display: inline-block;
}

.campus-access__layout {
    display: grid;
    gap: 36px;
    align-items: start;
}

.campus-access__photo {
    margin: 0;
    min-width: 0;
}

.campus-access__photo img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 8px solid var(--pink);
}

.campus-access__photo figcaption {
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: .025em;
}

.campus-access__details {
    min-width: 0;
}

.campus-access__campus {
    margin: 0 0 18px;
    font-size: clamp(20px, 2.2vw, 25px);
    line-height: 1.7;
    font-weight: 700;
    letter-spacing: .01em;
}

.campus-access__address {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0;
}

.campus-access__stations {
    list-style: none;
    margin: 23px 0 0;
    padding: 0;
}

.campus-access__stations li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    justify-content: space-between;
    padding: 11px 0;
    border-top: 1px solid rgb(17 17 17 / 13%);
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0;
}

.campus-access__stations li:last-child {
    border-bottom: 1px solid rgb(17 17 17 / 13%);
}

.campus-access__contact {
    margin-top: 30px;
}

.campus-access__contact h3 {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .025em;
}

.campus-access__contact a {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: inherit;
    font: 400 clamp(30px, 3.4vw, 43px)/1.4 "Times New Roman", serif;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
}

.campus-access__phone-arrow {
    display: inline-block;
    font: 400 23px/1 var(--serif);
    transition: transform 220ms ease;
}

.campus-access__map {
    position: relative;
    margin-top: clamp(35px, 5vw, 65px);
    padding-top: 12px;
    background: linear-gradient(90deg, var(--blue), var(--pink));
}

.campus-access__map iframe {
    display: block;
    width: 100%;
    height: clamp(310px, 36vw, 470px);
    border: 0;
    background: var(--blue-soft);
}

@media (min-width: 900px) {
    .campus-access__layout {
        grid-template-columns: 1.1fr 1fr;
        gap: 7%;
    }

    .campus-access__photo {
        padding-top: 9px;
    }

    .campus-access__stations li {
        font-size: 15px;
    }
}

@media (max-width: 599px) {
    .campus-access__header {
        display: block;
        padding-bottom: 21px;
    }

    .campus-access__eyebrow {
        margin-bottom: 22px;
        font-size: 46px;
    }

    .campus-access__header h2 {
        font-size: 30px;
    }

    .campus-access__contact a {
        gap: 10px;
    }

    .campus-access__stations li {
        justify-content: flex-start;
    }

    .campus-access__stations li > span:first-child {
        flex-basis: 100%;
    }

    .campus-access__map iframe {
        height: 330px;
    }
}

@media (hover: hover) {
    .campus-access__contact a:hover .campus-access__phone-arrow {
        transform: translate(3px, -3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .campus-access__phone-arrow {
        transition: none;
    }
}

@media print {
    .campus-access {
        break-before: page;
        padding: 30px 0;
        background: #fff;
    }

    .campus-access__map {
        display: none;
    }
}

/* v15: luminous paper, drifting satin light and a fine ink gesture. */
.course-benefits {
    isolation: isolate;
}

.course-benefits::before {
    background: linear-gradient(150deg, var(--blue-soft), var(--pink-soft));
}

.benefit-deck__stage {
    position: relative;
    isolation: isolate;
}

.benefit-ambience {
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 50%;
    width: 100vw;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(150deg, #f5fcff 15%, #fff8fb 75%);
}

.benefit-ambience > span {
    position: absolute;
    display: block;
    pointer-events: none;
    transition: transform 1900ms cubic-bezier(.2,.65,.2,1), opacity 1500ms ease;
}

.benefit-ambience__blue {
    width: 140%;
    height: 135%;
    top: -48%;
    left: -60%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(191 234 255 / 90%), rgb(191 234 255 / 54%) 30%, rgb(191 234 255 / 0%) 69%);
    transform: translate3d(0,0,0);
}

.benefit-ambience__pink {
    width: 125%;
    height: 125%;
    top: 27%;
    right: -59%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(251 215 229 / 90%), rgb(251 215 229 / 42%) 38%, rgb(251 215 229 / 0%) 70%);
    transform: translate3d(0,0,0);
}

.benefit-ambience__ribbon {
    width: 140%;
    height: 78%;
    left: -15%;
    top: -31%;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 95%);
    background: linear-gradient(170deg, transparent 54%, rgb(255 255 255 / 66%) 70%, rgb(255 255 255 / 8%) 85%);
    box-shadow: 0 12px 38px rgb(191 234 255 / 28%), inset 0 -12px 30px rgb(255 255 255 / 68%);
    transform: rotate(-19deg);
}

.benefit-ambience__ribbon--fine {
    width: 130%;
    height: 68%;
    top: auto;
    bottom: -45%;
    left: -16%;
    opacity: .8;
    background: transparent;
    box-shadow: 0 -10px 30px rgb(255 255 255 / 70%);
    transform: rotate(-21deg);
}

.benefit-deck[data-active-panel='2'] .benefit-ambience__blue {
    transform: translate3d(45%, 30%, 0);
}

.benefit-deck[data-active-panel='2'] .benefit-ambience__pink {
    transform: translate3d(-55%, -20%, 0);
}

.benefit-deck[data-active-panel='2'] .benefit-ambience__ribbon {
    transform: translate3d(0,12%,0) rotate(18deg);
}

.benefit-deck[data-active-panel='3'] .benefit-ambience__blue {
    transform: translate3d(12%, 60%, 0);
}

.benefit-deck[data-active-panel='3'] .benefit-ambience__pink {
    transform: translate3d(-15%, -55%, 0);
}

.benefit-deck[data-active-panel='3'] .benefit-ambience__ribbon {
    transform: translate3d(-10%,3%,0) rotate(-9deg) scale(1.1);
}

.benefit-deck[data-active-panel='4'] .benefit-ambience__blue {
    transform: translate3d(45%, 10%, 0);
}

.benefit-deck[data-active-panel='4'] .benefit-ambience__pink {
    transform: translate3d(-50%, 5%, 0);
}

.benefit-deck[data-active-panel='4'] .benefit-ambience__ribbon {
    transform: translate3d(7%,19%,0) rotate(22deg);
}

.benefit-deck[data-active-panel='5'] .benefit-ambience__blue {
    transform: translate3d(10%, 35%, 0);
}

.benefit-deck[data-active-panel='5'] .benefit-ambience__pink {
    transform: translate3d(-25%, -28%, 0);
}

.benefit-deck[data-active-panel='5'] .benefit-ambience__ribbon {
    transform: translate3d(-3%,10%,0) rotate(-25deg) scale(1.13);
}

.benefit-deck .course-benefits__header {
    position: relative;
}

.benefit-deck .course-benefits__header .eyebrow {
    font-size: 10px;
    letter-spacing: .1em;
}

.benefit-deck .course-benefits__header h3 {
    font-size: 27px;
}

.benefit-deck .course-benefits__header h3 > strong {
    font-size: 66px;
    margin-left: 4px;
}

.benefit-card {
    isolation: isolate;
    border: 0;
    min-height: 360px;
    padding: 28px 0;
}

.benefit-card__number {
    position: relative;
    gap: 18px;
    font-size: 114px;
    margin-bottom: 22px;
    line-height: .95;
}

.benefit-card__number > span {
    font-size: 10px;
    letter-spacing: .14em;
}

.benefit-card h4 {
    z-index: 1;
}

.benefit-card__lead {
    font-size: clamp(19px, 5.1vw, 30px);
    margin-bottom: 12px;
}

.benefit-card__title {
    font-size: clamp(28px, 9vw, 72px);
    line-height: 1.55;
}

.benefit-marker svg {
    left: -1%;
    bottom: -.14em;
    width: 102%;
    height: .44em;
    z-index: 0;
}

.benefit-marker :is(path, use) {
    stroke: #333;
    stroke-width: 1.5px;
    opacity: .9;
}

.marker-ready .is-marked .benefit-marker :is(path, use) {
    animation: benefit-mark 580ms cubic-bezier(.2,.65,.18,1) 250ms both;
}

.benefit-card__gloss {
    position: absolute;
    inset: -25% -5%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.benefit-card__gloss::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(110deg, transparent 24%, rgb(255 255 255 / 70%) 43%, rgb(255 255 255 / 0%) 58%);
    transform: translate3d(-85%,0,0);
}

.benefit-card.is-marked .benefit-card__gloss::before {
    animation: benefit-satin-pass 1800ms cubic-bezier(.2,.65,.25,1) 80ms both;
}

@keyframes benefit-satin-pass {
    0% {
        opacity: 0;
        transform: translate3d(-85%,0,0);
    }

    25% {
        opacity: .9;
    }

    68% {
        opacity: .7;
    }

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

.benefit-deck.is-pinned > .pin-stage {
    gap: 20px;
}

.benefit-deck .deck-controls {
    border-top: 1px solid rgb(17 17 17 / 20%);
    padding-top: 22px;
}

.benefit-deck .deck-controls button {
    background: rgb(255 255 255 / 36%);
}

.benefit-deck .deck-controls button:hover:enabled {
    background: rgb(255 255 255 / 80%);
}

.benefit-deck:not(.is-pinned) .benefit-ambience {
    display: none;
}

.benefit-deck:not(.is-pinned) .benefit-card {
    padding: 32px 18px;
    background: linear-gradient(125deg, var(--blue-soft), var(--pink-soft));
}

.benefit-deck:not(.is-pinned) .benefit-card:nth-child(even) {
    background: linear-gradient(125deg, var(--pink-soft), var(--blue-soft));
}

/* More petals, each with its own flutter period and lateral direction. */
.sakura-petal img {
    animation-duration: var(--flutter-time, 3.7s);
}

@keyframes petal-fall {
    0% {
        opacity: 0;
        transform: translate3d(0,-30px,0);
    }

    7% {
        opacity: .78;
    }

    20% {
        transform: translate3d(calc(25px * var(--drift, 1)),20svh,0);
    }

    40% {
        transform: translate3d(calc(-17px * var(--drift, 1)),46svh,0);
    }

    60% {
        opacity: .78;
        transform: translate3d(calc(39px * var(--drift, 1)),74svh,0);
    }

    77% {
        opacity: 0;
        transform: translate3d(calc(8px * var(--drift, 1)),101svh,0);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(8px * var(--drift, 1)),101svh,0);
    }
}

@keyframes petal-flutter {
    0% {
        transform: rotate(-32deg) rotateY(-55deg) rotateX(12deg);
    }

    50% {
        transform: rotate(42deg) rotateY(35deg) rotateX(-15deg);
    }

    100% {
        transform: rotate(119deg) rotateY(-40deg) rotateX(18deg);
    }
}

.closing__consultation {
    width: min(100%, 530px);
    margin: 35px auto 0;
}

.closing .closing__consultation > span {
    white-space: normal;
}

.campus-access__stations li {
    font-size: 16px;
}

.campus-access__photo figcaption {
    font-size: 14px;
}

@media (min-width: 700px) {
    .benefit-card__number {
        font-size: clamp(140px, 19vw, 240px);
        margin: 0;
    }

    .benefit-card__title {
        font-size: clamp(43px, 5.5vw, 72px);
    }

    .benefit-card {
        gap: 6%;
        min-height: 380px;
    }

    .benefit-deck .course-benefits__header h3 {
        font-size: 34px;
    }

    .benefit-deck .course-benefits__header h3 > strong {
        font-size: 83px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .benefit-ambience > span {
        transition: none;
    }

    .benefit-card__gloss {
        display: none;
    }

    .marker-ready .is-marked .benefit-marker :is(path, use) {
        animation: none;
        stroke-dashoffset: 0;
    }
}

@media print {
    .benefit-ambience, .benefit-card__gloss {
        display: none;
    }

    .benefit-deck:not(.is-pinned) .benefit-card {
        background: none;
    }
}

/* v16 — one campus course, a September invitation, four included gifts. */
.introduction__connection {
    max-width: 650px;
    margin: 30px auto 0;
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 2;
}

.course {
    min-height: 92svh;
    padding-top: 8svh;
    padding-bottom: 9svh;
}

.flow-scene {
    min-height: 90svh;
    padding-top: 8svh;
    padding-bottom: 9svh;
}

.course-visual__image, .flow-backdrop__image {
    transition-duration: 480ms;
}

.course-overview {
    margin: 35px 0 65px;
}

.course-overview__label {
    margin-bottom: 18px;
    font-size: 16px;
}

.course-overview h3 {
    font-size: clamp(27px, 3.6vw, 44px);
    line-height: 1.7;
    letter-spacing: 0;
}

.course-overview h3 > span {
    display: block;
}

.course-overview__accent {
    width: fit-content;
    margin-top: 9px;
    background: linear-gradient(transparent 67%, var(--blue) 67%, var(--pink) 95%, transparent 95%);
}

.course-overview__body {
    display: grid;
    gap: 20px 50px;
    margin-top: 28px;
}

.course-overview__body p {
    font-size: 17px;
    line-height: 2;
}

.course-overview__facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 35px 0 0;
    padding: 22px 0;
    border-block: 1px solid rgb(17 17 17 / 25%); }

.course-overview__facts li {
    padding: 0 10px;
    text-align: center;
    border-right: 1px solid rgb(17 17 17 / 20%);
}

.course-overview__facts li:last-child {
    border: 0;
}

.course-overview__facts small {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.6;
}

.course-overview__facts strong {
    display: block;
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.4;
    white-space: nowrap;
}

.course-overview__facts strong span {
    font-size: .6em;
}

.fee-comparison, .fee-table, .fee-comparison .fee-table :is(th, td) {
    background: transparent;
}

.campaign.course-benefits {
    margin-top: 48px;
}

.campaign .benefit-deck__stage {
    padding: 44px 0;
}

.campaign .campaign__header {
    position: relative;
    text-align: center;
}

.campaign__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.campaign__tags > span {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid rgb(17 17 17 / 30%);
    border-radius: 2px;
    background: rgb(255 255 255 / 35%);
}

.campaign__tags > span:last-child {
    background: var(--pink);
    border-color: transparent;
}

.campaign__header h3 {
    margin: 14px 0 0;
    font-size: clamp(22px, 3.2vw, 36px);
    line-height: 1.6;
}

.campaign__header h3 > span {
    display: inline-block;
}

.campaign__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 3px 0 0;
    white-space: nowrap;
}

.campaign__amount > span {
    font-size: clamp(15px, 2vw, 24px);
    font-weight: 700;
}

.campaign__amount strong {
    position: relative;
    font: 400 clamp(58px, 14.5vw, 128px)/1.05 'Times New Roman', serif;
    letter-spacing: 0;
}

.campaign__amount strong::after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 5%;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(90deg, var(--blue), var(--pink));
}

.campaign .benefit-cards {
    margin-top: 18px;
}

.campaign .benefit-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    min-height: 220px;
    padding: 24px 0;
    border-block: 1px solid rgb(17 17 17 / 22%); }

.campaign .benefit-card__number {
    align-self: flex-start;
    flex-direction: column-reverse;
    gap: 12px;
    margin: 0;
    font-size: clamp(55px, 9vw, 110px);
    line-height: 1;
    min-width: 65px;
}

.campaign .benefit-card__number > span {
    writing-mode: vertical-rl;
    font-size: 9px;
    letter-spacing: .12em;
}

.campaign-card__copy {
    min-width: 0;
    flex: 1;
}

.campaign-card__caption {
    margin: 0 0 9px;
    font-size: 13px;
    line-height: 1.7;
}

.campaign .benefit-card__title {
    font-size: clamp(28px, 6.8vw, 59px);
    line-height: 1.6;
    white-space: normal;
}

.campaign-card__detail {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.85;
}

.campaign-card__gift {
    display: inline-block;
    margin-top: 15px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(100deg, var(--blue), var(--pink));
}

.campaign .benefit-marker {
    white-space: nowrap;
}

.campaign .benefit-deck.is-pinned > .pin-stage {
    gap: 12px;
    padding: 24px 0;
}

.campaign .benefit-deck.is-pinned .benefit-card {
    min-height: var(--card-height, 220px);
}

.campaign .benefit-deck .deck-controls {
    max-width: none;
    border: 0;
    padding-top: 0;
    margin-top: 32px;
}

.campaign .deck-controls button {
    width: 44px;
    height: 44px;
    display: none;
}

.campaign__eligibility {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

.campaign .benefit-ambience__ribbon {
    opacity: .85;
}

.campaign .benefit-deck:not(.is-pinned) .benefit-card {
    margin-bottom: 15px;
    padding: 28px 18px;
}

.campaign .benefit-deck:not(.is-pinned) .campaign__eligibility {
    margin-top: 26px;
}

.enrollment-dates {
    display: grid;
    gap: 28px;
    position: relative;
    margin: 64px 0;
    padding: 34px 0;
    border-block: 1px solid rgb(17 17 17 / 25%); }

.enrollment-dates header .eyebrow {
    font-size: 11px;
    letter-spacing: .13em;
}

.enrollment-dates h3 {
    margin: 13px 0 20px;
    font-size: 26px;
    line-height: 1.4;
}

.enrollment-dates h3 > span {
    display: block;
    font-size: 30px;
}

.enrollment-dates h3 strong {
    font: 400 80px/1.1 'Times New Roman', serif;
    margin-right: 5px;
}

.enrollment-dates header > p:last-child {
    font-size: 16px;
    font-weight: 700;
}

.enrollment-dates__body ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
}

.enrollment-dates__body li {
    text-align: center;
    border-right: 1px solid rgb(17 17 17 / 20%);
}

.enrollment-dates__body li:last-child {
    border: 0;
}

.enrollment-dates time {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: baseline;
    font: 400 clamp(34px, 2.5vw, 30px)/1.3 'Times New Roman', serif;
}

.enrollment-dates time strong {
    font-weight: 400;
    font-size: clamp(48px, 7vw, 68px);
    margin-left: 5px;
}

.enrollment-dates time small {
    display: block;
    width: 100%;
    margin-top: 8px;
    font: 500 14px/1.4 var(--serif);
}

.enrollment-dates__time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    font: 400 30px/1.5 'Times New Roman', serif;
}

.enrollment-dates__time span {
    font: 500 14px/1.7 var(--serif);
    padding: 1px 12px;
    background: var(--blue);
}

.enrollment-dates .text-link {
    width: 100%;
    max-width: none;
    background: linear-gradient(110deg, var(--blue), var(--pink));
    font-size: 15px;
    padding: 17px 13px;
}

.mobile-reservation {
    display: none;
}

@media (min-width: 700px) {
    .course-overview__body {
        grid-template-columns: 1fr 1fr;
    }

    .campaign .benefit-card {
        padding: 20px 4%;
        gap: 6%;
        min-height: 240px;
    }

    .campaign .benefit-card__number {
        align-self: center;
        flex-direction: row;
        gap: 18px;
    }

    .campaign-card__caption {
        font-size: 15px;
    }

    .campaign-card__detail {
        font-size: 19px;
    }

    .campaign-card__gift {
        font-size: 14px;
    }

    .campaign .benefit-deck:not(.is-pinned) .benefit-card {
        padding-inline: 5%; }

    .enrollment-dates {
        grid-template-columns: .9fr 1.4fr;
        align-items: center;
        gap: 5%;
        padding: 45px 0;
    }
}

@media (min-width: 900px) {
    .course, .flow-scene {
        min-height: 92svh;
        padding-top: 8svh;
        padding-bottom: 9svh;
    }
}

@media (max-width: 767px) {
    :root {
        --reservation-clearance: calc(86px + env(safe-area-inset-bottom, 0px));
    }

    html {
        scroll-padding-bottom: var(--reservation-clearance);
    }

    body {
        padding-bottom: var(--reservation-clearance);
    }

    .mobile-reservation {
        display: block;
        position: fixed;
        z-index: 50;
        inset: auto 0 0;
        padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(transparent, rgb(255 255 255 / 94%) 22%);
    }

    .mobile-reservation a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 14px 17px;
        border: 1px solid rgb(17 17 17 / 30%);
        border-radius: 4px;
        color: var(--ink);
        background: linear-gradient(105deg, var(--blue), var(--pink));
        box-shadow: 0 4px 16px rgb(17 17 17 / 10%);
        font-size: clamp(14px, 3.85vw, 16px);
        line-height: 1.5;
        font-weight: 700;
    }

    .mobile-reservation svg {
        flex: 0 0 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
    }

    .mobile-reservation a:active {
        transform: translateY(1px);
    }

    .campaign .benefit-deck.is-pinned > .pin-stage {
        padding-bottom: var(--reservation-clearance);
    }

    .course-overview__facts strong span {
        display: block;
        margin-top: 5px;
    }

    .campaign__header h3 {
        font-size: clamp(18px, 5.4vw, 24px);
    }

    .campaign .benefit-card {
        gap: 14px;
    }

    .campaign-card__caption {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-visual__image, .flow-backdrop__image {
        transition: none;
    }
}

@media print {
    body {
        padding-bottom: 0;
    }

    .mobile-reservation {
        display: none;
    }

    .course, .flow-scene {
        min-height: 0;
        padding-block: 30px; }

    .campaign .benefit-deck > .pin-stage {
        min-height: 0;
        padding: 20px 0;
    }
}

.course-overview__accent > span {
    display: inline-block;
}

@media (max-width: 767px) {
    .course-overview__accent {
        font-size: 24px;
    }
}

/* v17 — a compact fixed menu and a distinct reservation capsule. */
.site-menu-toggle {
    position: fixed;
    z-index: 70;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgb(17 17 17 / 22%);
    background: #fff;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    box-shadow: 0 2px 12px rgb(17 17 17 / 8%);
    cursor: pointer;
    font: 500 8px/1 Arial, sans-serif;
    letter-spacing: .1em;
}

.site-menu-toggle[hidden] {
    display: none;
}

.site-menu-toggle__lines {
    display: grid;
    gap: 5px;
    width: 21px;
}

.site-menu-toggle__lines i {
    display: block;
    height: 1px;
    width: 100%;
    background: currentColor;
    transition: transform 220ms ease;
}

.site-menu-toggle__lines i:last-child {
    width: 15px;
    justify-self: end;
}

.site-menu-toggle:focus-visible, .site-menu__close:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

.site-menu {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    padding: 0;
    width: min(560px, 100%);
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    color: var(--ink);
    background: linear-gradient(145deg, #fff 18%, var(--blue-soft) 62%, var(--pink-soft));
    overflow: auto;
    overscroll-behavior: contain;
}

.site-menu::backdrop {
    background: rgb(17 17 17 / 25%);
    backdrop-filter: blur(5px);
}

.site-menu__sheet {
    min-height: 100%;
    position: relative;
    padding: max(68px, calc(env(safe-area-inset-top, 0px) + 60px)) clamp(24px, 6vw, 58px) max(30px, env(safe-area-inset-bottom, 0px));
}

.site-menu__close {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: 12px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgb(17 17 17 / 25%);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font: 300 32px/1 Arial, sans-serif;
}

.site-menu__edition {
    font: 500 10px/1.5 Arial, sans-serif;
    letter-spacing: .15em;
}

.site-menu h2 {
    margin: 16px 0 25px;
    font: 400 clamp(66px, 14vw, 105px)/1 'Times New Roman', serif;
    letter-spacing: 0;
}

.site-menu h2 span {
    color: var(--pink);
}

.site-menu__links {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgb(17 17 17 / 25%);
}

.site-menu__links a {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    min-height: 66px;
    border-bottom: 1px solid rgb(17 17 17 / 18%);
    font-size: clamp(20px, 4.8vw, 25px);
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
}

.site-menu__number {
    font: 400 12px/1.4 'Times New Roman', serif;
}

.site-menu__arrow {
    font: 400 23px/1.4 Arial, sans-serif;
    transition: transform 200ms ease;
}

.site-menu__links li:last-child a {
    margin-top: 17px;
    border: 0;
    padding: 16px 12px;
    background: linear-gradient(105deg, var(--blue), var(--pink));
}

.site-menu__note {
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.8;
}

.site-menu-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 18px;
    background: var(--blue-soft);
    font-size: 14px;
}

@media (hover: hover) {
    .site-menu-toggle:hover .site-menu-toggle__lines i:last-child {
        transform: translateX(-6px);
    }

    .site-menu__links a:hover .site-menu__arrow {
        transform: translate(3px, -3px);
    }
}

@media (max-width: 699px) {
    .hero__campus {
        top: max(64px, 6.5%);
        font-size: 12cqw;
    }
}

@media (max-width: 359px) {
    .hero__campus {
        top: 62px;
        font-size: 11.5cqw;
    }
}

@media (max-width: 767px) {
    :root {
        --reservation-clearance: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-reservation {
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(transparent, rgb(255 255 255 / 86%) 70%);
    }

    .mobile-reservation a {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 68px;
        padding: 9px 10px 9px 23px;
        border: 2px solid transparent;
        border-radius: 50px;
        background: linear-gradient(var(--ink), var(--ink)) padding-box, linear-gradient(105deg, var(--blue), var(--pink)) border-box;
        color: #fff;
        box-shadow: 0 5px 18px rgb(17 17 17 / 24%), 0 0 0 2px #fff;
    }

    .mobile-reservation__copy {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
    }

    .mobile-reservation__copy small {
        color: var(--blue);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: .06em;
    }

    .mobile-reservation__copy strong {
        font-size: clamp(16px, 4.4vw, 19px);
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: 0;
    }

    .mobile-reservation__arrow {
        position: relative;
        z-index: 1;
        flex: 0 0 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--ink);
        background: linear-gradient(135deg, var(--blue), var(--pink));
    }

    .mobile-reservation .mobile-reservation__arrow svg {
        width: 25px;
    }

    .mobile-reservation a::after {
        content: '';
        pointer-events: none;
        position: absolute;
        z-index: 0;
        inset: -25% -40%;
        background: linear-gradient(110deg, transparent 30%, rgb(191 234 255 / 13%) 44%, rgb(251 215 229 / 23%) 51%, transparent 63%);
        transform: translateX(-90%);
        animation: reservation-gloss 1300ms cubic-bezier(.2,.65,.2,1) 2600ms both;
    }
}

@keyframes reservation-gloss {
    from {
        transform: translateX(-90%);
    }

    to {
        transform: translateX(90%);
    }
}

@media (max-height: 699px) {
    .site-menu__sheet {
        padding-top: 60px;
    }

    .site-menu h2 {
        font-size: 64px;
        margin: 10px 0 18px;
    }

    .site-menu__links a {
        min-height: 55px;
        padding-block: 14px; }

    .site-menu__note {
        margin-top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-menu-toggle__lines i, .site-menu__arrow {
        transition: none;
    }

    .mobile-reservation a::after {
        animation: none;
        display: none;
    }
}

@media print {
    .site-menu-toggle, .site-menu, .site-menu-fallback {
        display: none !important;
    }
}

/* v17: temporary light clipped to the original letter shapes, following the photo pass. */
.hero__glint {
    display: block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    text-shadow: none;
    pointer-events: none;
    user-select: none;
}

.hero__glint * {
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.hero__glint--vertical {
    writing-mode: inherit;
    text-orientation: inherit;
    background-image: linear-gradient(180deg, transparent 25%, var(--blue) 40%, var(--pink) 50%, var(--paper) 55%, transparent 70%);
    background-size: 100% 260%;
    background-position: 0% 150%;
}

.hero__glint--horizontal {
    background-size: 260% 100%;
    background-position: 150% 0%;
}

@media (prefers-reduced-motion: reduce) {
    .hero__glint {
        display: none;
    }
}

@media print {
    .hero__glint {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mobile-reservation a {
        color: var(--ink);
        background: linear-gradient(110deg, #c4ebff 0%, #e4ebff 45%, #fbd7e5 100%) padding-box, linear-gradient(105deg, #fff, var(--pink)) border-box;
        box-shadow: 0 5px 20px rgb(17 17 17 / 14%), 0 0 0 2px #fff;
    }

    .mobile-reservation__copy small {
        color: var(--ink);
    }

    .mobile-reservation__arrow {
        color: var(--ink);
        background: rgb(255 255 255 / 90%);
    }

    .mobile-reservation a::after {
        background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 68%) 50%, transparent 63%);
    }
}

/* The head bootstrap class covers the photo even before the deferred script loads. */
.hero-intro-pending .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, var(--blue), var(--pink));
}

.hero > .photo-reveal .photo-reveal__band {
    background: linear-gradient(105deg, var(--blue), var(--pink));
    opacity: 1;
    transform: translateX(105%);
}

.hero > .photo-reveal.is-covering .photo-reveal__band {
    transform: translateX(0%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-intro-pending .hero::after {
        content: none;
    }

    .hero > .photo-reveal {
        display: none;
    }
}

@media print {
    .hero-intro-pending .hero::after {
        content: none;
    }

    .hero > .photo-reveal {
        display: none;
    }
}

/* Benefit card changeover: one full card slides out and the next slides in.
   Applies only to the four included gifts; the 01-03 photographic stories stay separate. */
.campaign .benefit-deck {
    --benefit-slide-duration: 620ms;
    --benefit-slide-distance: 108%;
    --benefit-accent: #185f7b;
}

.campaign .benefit-deck[data-active-panel='2'] { --benefit-accent: #984965; }
.campaign .benefit-deck[data-active-panel='3'] { --benefit-accent: #3d5c91; }
.campaign .benefit-deck[data-active-panel='4'] { --benefit-accent: #86405f; }

.campaign .benefit-deck.is-pinned .benefit-cards {
    position: relative;
    overflow: clip;
    padding: 8px 0;
    margin-top: 10px;
    isolation: isolate;
}

.campaign .benefit-deck.is-pinned .benefit-card {
    --card-accent: #185f7b;
    --card-tint: #eefaff;
    border: 1px solid color-mix(in srgb, var(--card-accent) 28%, white);
    border-left: 5px solid var(--card-accent);
    border-radius: 16px;
    background: linear-gradient(115deg, #fff 25%, var(--card-tint));
    padding: 22px clamp(16px, 3vw, 34px);
    box-shadow: 0 5px 0 rgb(29 46 65 / 7%);
    transform-origin: 50% 50%;
    transition: transform var(--benefit-slide-duration) cubic-bezier(.22,.72,.18,1), opacity 320ms ease;
    backface-visibility: hidden;
}

.campaign .benefit-deck.is-pinned .benefit-card:nth-child(2) { --card-accent: #984965; --card-tint: #fff0f5; }
.campaign .benefit-deck.is-pinned .benefit-card:nth-child(3) { --card-accent: #3d5c91; --card-tint: #f0f4ff; }
.campaign .benefit-deck.is-pinned .benefit-card:nth-child(4) { --card-accent: #86405f; --card-tint: #fff0f7; }

.campaign .benefit-deck.is-pinned [data-panel-state='before'] {
    opacity: 0;
    transform: translateX(calc(var(--benefit-slide-distance) * -1)) scale(.96);
    pointer-events: none;
}

.campaign .benefit-deck.is-pinned [data-panel-state='after'] {
    opacity: 0;
    transform: translateX(var(--benefit-slide-distance)) scale(.96);
    pointer-events: none;
}

.campaign .benefit-deck.is-pinned [data-panel-state='active'] {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.campaign .benefit-deck.is-pinned .benefit-card__number {
    color: var(--card-accent);
}

.campaign .benefit-deck.is-pinned .deck-controls {
    gap: 10px;
    margin-top: 12px;
    min-height: 44px;
}

.campaign .benefit-deck.is-pinned .deck-controls__count {
    gap: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.campaign .benefit-deck.is-pinned .deck-controls__count strong {
    display: inline-block;
    font-size: 38px;
    color: var(--benefit-accent);
    transition: color 250ms ease;
}

.campaign .benefit-deck.is-pinned .deck-controls__track {
    height: 7px;
    margin: 0 5px;
    border-radius: 4px;
    overflow: hidden;
    background: rgb(27 51 66 / 14%);
    /* Four equal segments remain recognizable in addition to the numeric count. */
    clip-path: polygon(0 0,calc(25% - 2px) 0,calc(25% - 2px) 100%,calc(25% + 2px) 100%,calc(25% + 2px) 0,calc(50% - 2px) 0,calc(50% - 2px) 100%,calc(50% + 2px) 100%,calc(50% + 2px) 0,calc(75% - 2px) 0,calc(75% - 2px) 100%,calc(75% + 2px) 100%,calc(75% + 2px) 0,100% 0,100% 100%,0 100%);
}

.campaign .benefit-deck.is-pinned .deck-controls__track::after {
    height: 100%;
    background: var(--benefit-accent);
    transition: width 400ms ease, background-color 250ms ease;
}

.campaign .benefit-deck.is-pinned .deck-controls button {
    display: grid;
    flex: 0 0 44px;
    background: #fff;
    border-color: var(--benefit-accent);
    color: var(--benefit-accent);
}

.campaign .benefit-deck.is-pinned .deck-controls button:hover:enabled {
    background: var(--benefit-accent);
    color: #fff;
}

@media (max-width: 767px) {
    .campaign .benefit-deck.is-pinned .benefit-card {
        gap: 12px;
        padding: 20px 14px;
    }

    .campaign .benefit-deck.is-pinned .benefit-card__number {
        min-width: 42px;
        font-size: 48px;
    }

    .campaign .benefit-deck.is-pinned .benefit-card__title {
        font-size: clamp(24px, 6.5vw, 36px);
    }

    .campaign .benefit-deck.is-pinned .campaign-card__gift {
        padding-inline: 6px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign .benefit-deck.is-pinned .benefit-card,
    .campaign .benefit-deck.is-pinned .deck-controls__count strong,
    .campaign .benefit-deck.is-pinned .deck-controls__track::after {
        transition: none;
    }
}

@media print {
    .campaign .benefit-deck.is-pinned .benefit-cards { overflow: visible; }
    .campaign .benefit-deck.is-pinned .benefit-card {
        transform: none !important;
        opacity: 1 !important;
        transition: none;
    }
    .campaign .benefit-deck .deck-controls { display: none; }
}