.services-page {
    overflow-x: hidden;
    background: #171914;
}

.services-page main { position: relative; }

.services-hero {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: clamp(140px, 18vh, 210px) max(4.5vw, 66px) clamp(65px, 8vh, 95px);
    color: #f4f1e8;
    background: #171914;
}

.services-hero-media,
.services-hero-shade {
    position: absolute;
    inset: 0;
}

.services-hero-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.services-hero-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(15, 17, 14, .9) 0%, rgba(15, 17, 14, .54) 46%, rgba(15, 17, 14, .16) 78%),
        linear-gradient(0deg, rgba(15, 17, 14, .72), transparent 60%);
}

.services-hero-copy,
.services-hero > ul {
    position: relative;
    z-index: 2;
}

.services-hero .video-control {
    z-index: 3;
    bottom: clamp(104px, 12vh, 132px);
}

.services-hero-copy > p:first-child,
.services-section-heading > p {
    margin: 0 0 28px;
    color: #b8ce89;
    font: 600 .72rem/1.2 var(--font-main-en);
    letter-spacing: .16em;
}

.services-hero h1 {
    margin: 0;
    font: 400 clamp(6rem, 14vw, 14rem)/.78 var(--font-main-zh);
    letter-spacing: -.06em;
}

.services-hero h1 span {
    display: inline-block;
    margin-left: .08em;
    font: 500 clamp(3.6rem, 7.4vw, 7.6rem)/1 var(--font-main-en);
    letter-spacing: -.06em;
}

.services-hero-copy > p:last-child {
    margin: clamp(38px, 5vh, 58px) 0 0;
    font: 400 clamp(1.4rem, 2vw, 2rem)/1.55 var(--font-main-zh);
}

.services-hero > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-self: flex-end;
    margin: -48px 0 0;
    padding: 0;
    list-style: none;
}

.services-hero > ul li {
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    font: 600 .68rem/1.2 var(--font-main-en);
    letter-spacing: .08em;
}

.services-panel {
    position: relative;
    z-index: 2;
    margin-top: -48px;
    overflow: hidden;
    padding: clamp(68px, 6.5vw, 100px) max(4.5vw, 66px);
    border-radius: 34px 34px 0 0;
    box-shadow: 0 -22px 55px rgba(15, 17, 14, .12);
}

.services-section-heading {
    display: grid;
    grid-template-columns: minmax(160px, .4fr) minmax(0, 1.6fr);
    gap: 40px;
    align-items: start;
    padding-bottom: clamp(44px, 6vw, 76px);
    border-bottom: 1px solid rgba(35, 38, 31, .24);
}

.services-section-heading h2 {
    margin: 0;
    font: 400 clamp(3.6rem, 7vw, 8rem)/.95 var(--font-main-zh);
    letter-spacing: -.05em;
}

.services-section-heading h2 span {
    display: block;
    margin-top: 18px;
    font: 600 clamp(.9rem, 1.45vw, 1.35rem)/1.3 var(--font-main-en);
    letter-spacing: -.02em;
}

.services-intro {
    color: #24261f;
    background: #ded7c8;
}

.services-intro-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(45px, 8vw, 120px);
    margin-top: clamp(44px, 6vw, 76px);
}

.services-intro-copy p {
    margin: 0;
    font: 400 clamp(1.25rem, 1.75vw, 1.75rem)/1.8 var(--font-main-zh);
}

.services-offer { color: #24261f; }
.services-offer--activity { z-index: 3; background: #bed09a; }
.services-offer--study { z-index: 4; background: #f1ede6; }

.services-offer-grid {
    display: grid;
    grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr);
    gap: clamp(60px, 10vw, 150px);
    margin-top: clamp(44px, 6vw, 76px);
}

.services-offer-lead > p {
    margin: 0;
    font: 400 clamp(1.35rem, 1.9vw, 1.9rem)/1.7 var(--font-main-zh);
}

.services-offer-lead blockquote {
    margin: 55px 0 0;
    padding-left: 24px;
    border-left: 2px solid #627a46;
    font: 400 clamp(1.75rem, 2.7vw, 3.15rem)/1.45 var(--font-main-zh);
}

.services-offer-details {
    border-top: 1px solid rgba(35, 38, 31, .25);
}

.services-offer-details article {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 30px;
    padding: 34px 0;
    border-bottom: 1px solid rgba(35, 38, 31, .25);
}

.services-offer-details h3 {
    margin: 0;
    color: #627a46;
    font: 600 clamp(.86rem, 1vw, .98rem)/1.35 var(--font-main-zh);
    letter-spacing: .04em;
}

.services-offer-details h3 > .bilingual-en {
    margin-top: .28em;
    color: #3e512e;
    font: 700 clamp(1rem, 1.25vw, 1.2rem)/1.2 var(--font-main-en);
    letter-spacing: .01em;
    opacity: .92;
}

.services-offer-details p,
.services-offer-details ul {
    margin: 0;
    padding: 0;
    font: 400 1rem/1.75 var(--font-main-zh);
}

.services-offer-details ul { list-style: none; }
.services-offer-details li { padding: 3px 0; }
.services-offer-details li::before { content: "— "; color: #627a46; }

.services-contact {
    z-index: 5;
    color: #f4f1e8;
    background: #171914;
}

.services-contact .services-section-heading {
    border-color: rgba(255, 255, 255, .22);
}

.services-contact-grid {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: clamp(60px, 10vw, 150px);
    margin-top: clamp(44px, 6vw, 76px);
}

.services-contact-copy > p {
    margin: 0;
    color: rgba(244, 241, 232, .75);
    font: 400 1.08rem/1.8 var(--font-main-zh);
}

.services-contact-copy address {
    display: grid;
    gap: 12px;
    margin-top: 45px;
    font-style: normal;
}

.services-contact-copy address a {
    color: inherit;
    font: 500 clamp(1.25rem, 1.8vw, 1.65rem)/1.4 var(--font-main-en);
    text-decoration: none;
}

.services-contact-copy address span {
    color: rgba(244, 241, 232, .58);
    font: 500 .76rem/1.4 var(--font-main-en);
    letter-spacing: .08em;
}

.services-form {
    display: grid;
    gap: 26px;
}

.services-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.services-form label {
    display: grid;
    gap: 10px;
    color: rgba(244, 241, 232, .72);
    font: 600 .7rem/1.4 var(--font-main-en), var(--font-main-zh);
    letter-spacing: .06em;
}

.services-form input,
.services-form select,
.services-form textarea {
    width: 100%;
    min-width: 0;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    border-radius: 0;
    outline: 0;
    color: #f4f1e8;
    background: transparent;
    font: 400 1rem/1.5 var(--font-main-zh), var(--font-main-en);
}

.services-form select { color-scheme: dark; }
.services-form textarea { resize: vertical; }
.services-form input:focus,
.services-form select:focus,
.services-form textarea:focus { border-color: #b8ce89; }

.services-consent {
    display: flex !important;
    grid-template-columns: none;
    align-items: flex-start;
    gap: 12px !important;
    color: rgba(244, 241, 232, .62) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.services-consent input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 1px 0 0;
    accent-color: #a9bd7c;
}

.services-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.services-form-actions button {
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    color: #f4f1e8;
    background: transparent;
    cursor: pointer;
    font: 600 .74rem/1.2 var(--font-main-en), var(--font-main-zh);
    letter-spacing: .05em;
}

.services-form-actions button:first-child {
    color: #171914;
    border-color: #b8ce89;
    background: #b8ce89;
}

.services-form-actions button:hover,
.services-form-actions button:focus-visible { border-color: #b8ce89; }

.services-form-status {
    min-height: 1.5em;
    margin: 0;
    color: #b8ce89;
    font: 500 .84rem/1.5 var(--font-main-zh);
}

.services-page footer { position: relative; z-index: 6; }

@media (max-width: 900px) {
    .services-hero { position: relative; padding-inline: 32px; }
    .services-panel { margin-top: -36px; padding-inline: 32px; }
    .services-section-heading { grid-template-columns: 125px minmax(0, 1fr); }
    .services-offer-grid,
    .services-contact-grid { gap: 50px; }
}

@media (max-width: 640px) {
    .services-hero { min-height: 100svh; padding: 125px 20px 55px; }
    .services-hero-media video { object-position: 58% center; }
    .services-hero-shade {
        background:
            linear-gradient(0deg, rgba(15, 17, 14, .96), rgba(15, 17, 14, .4) 70%, rgba(15, 17, 14, .18)),
            linear-gradient(90deg, rgba(15, 17, 14, .54), transparent);
    }
    .services-hero h1 { font-size: clamp(5.4rem, 27vw, 7.2rem); }
    .services-hero h1 span { display: block; margin: 8px 0 0; font-size: 3.1rem; }
    .services-hero > ul { align-self: flex-start; margin: 42px 0 0; }
    .services-panel { margin-top: -30px; padding: 78px 20px 88px; border-radius: 24px 24px 0 0; }
    .services-section-heading { display: block; padding-bottom: 38px; }
    .services-section-heading > p { margin-bottom: 22px; }
    .services-section-heading h2 { font-size: clamp(3rem, 14.5vw, 4.5rem); }
    .services-intro-copy,
    .services-offer-grid,
    .services-contact-grid { grid-template-columns: 1fr; gap: 42px; margin-top: 38px; }
    .services-intro-copy p { font-size: 1.15rem; }
    .services-offer-lead blockquote { font-size: 1.9rem; margin-top: 36px; }
    .services-offer-details article { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
    .services-form-row { grid-template-columns: 1fr; }
    .services-form-actions { align-items: stretch; flex-direction: column; }
    .services-form-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .services-hero { position: relative; background: #171914 url("assets/images/services/hero-services-poster.jpg") center / cover no-repeat; }
    .services-hero-media,
    .services-hero .hero-video,
    .services-hero .video-control { display: none; }
    .services-panel { animation: none !important; transform: none !important; }
}