/* ==========================================================================
   Watbanmee School — public site additions
   A news grid built on top of the Kidzu template: same palette, deeper
   surfaces, softer motion.
   ========================================================================== */

.header-main .main-menu .school-about-menu > .submenu {
    min-width: 340px;
}

.header-main .main-menu .school-about-menu:focus-within > .submenu {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
}

.header-main .main-menu .school-about-menu .submenu a[aria-current="page"],
.mean-container .mean-nav .school-about-menu a[aria-current="page"] {
    background: #f5f7fc;
    color: #14263f;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .header-main .main-menu > nav > ul > li {
        margin-inline-end: 16px;
    }

    .header-main .main-menu > nav > ul > li:last-child {
        margin-inline-end: 0;
    }

    .header-main .main-menu > nav > ul > li > a {
        font-size: 14px;
    }
}

/* Home: programs, admission and teachers ---------------------------------- */

.home-programs__lead,
.home-admission__lead,
.home-team__lead {
    max-width: 560px;
    margin: 14px 0 0;
    color: var(--text);
    line-height: 1.8;
}

.home-team__lead {
    margin-inline: auto;
}

.home-programs__students {
    width: min(540px, 38vw);
}

.home-programs__students > img {
    width: 100%;
    height: auto;
}

.home-programs__identity {
    position: absolute;
    z-index: 2;
    bottom: 110px;
    left: -24px;
    margin: 0;
    padding: 14px 22px 14px 18px;
    border-left: 4px solid var(--theme);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 40px -18px rgba(56, 84, 105, .45);
    color: var(--header);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.home-programs__identity span {
    display: block;
    color: #985521;
    font-size: 13px;
    font-weight: 600;
}

/* The lead paragraph widens the title; keep the contact button from collapsing. */
.home-admission .info-box,
.home-admission .info-box .theme-btn {
    flex-shrink: 0;
}

.home-admission__steps {
    padding: 0;
    list-style: none;
}

.home-team__reasons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 16px;
    padding: 0;
    list-style: none;
}

.home-team__reasons li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(56, 84, 105, .1);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px -14px rgba(56, 84, 105, .4);
    color: var(--header);
    font-weight: 600;
}

.home-team__reasons i {
    color: var(--theme);
}

/* Staff portraits are 724×1024; crop them to the card's mask shape. */
.home-team .team-box-items-3 .thumb img {
    aspect-ratio: 450 / 428;
    object-position: center 18%;
}

.home-team__more {
    margin-top: 36px;
}

@media (max-width: 575px) {
    .home-team__reasons li { padding: 8px 14px; font-size: 14px; }
}

/* News album (Google Drive) ------------------------------------------------ */

.news-album {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(56, 84, 105, .12);
}

.news-album__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.news-album__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 22px;
}

.news-album__title i { color: var(--theme); }

.news-album__count {
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--bg);
    color: #985521;
    font-size: 14px;
    font-weight: 600;
}

.news-album__drive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(56, 84, 105, .15);
    border-radius: 999px;
    color: var(--header);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease;
}

.news-album__drive:hover { border-color: var(--theme); color: #985521; }

.news-album__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-album__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: #f1f4f6;
    box-shadow: 0 8px 20px -14px rgba(56, 84, 105, .5);
}

.news-album__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.news-album__item:hover img,
.news-album__item:focus-visible img { transform: scale(1.05); }

.news-album__item:focus-visible {
    outline: 3px solid var(--theme);
    outline-offset: 3px;
}

.news-album__fallback {
    margin: 0;
    color: var(--text);
}

@media (max-width: 575px) {
    .news-album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .news-album__item img { transition: none; }
}

/* Executive directory ---------------------------------------------------- */

.executive-directory-banner .school-news-breadcrumb {
    height: 360px;
}

.executive-directory {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 64px;
    background:
        radial-gradient(circle at 8% 22%, rgba(243, 159, 95, .12), transparent 28%),
        radial-gradient(circle at 92% 58%, rgba(56, 84, 105, .08), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fffaf0 45%, #f7fafb 100%);
}

.executive-directory::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(rgba(56, 84, 105, .09) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    content: "";
}

.executive-directory__intro {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    overflow: hidden;
    padding: 44px 48px;
    border: 1px solid rgba(243, 159, 95, .18);
    border-radius: 32px;
    background: linear-gradient(115deg, var(--bg), #fffaf1 64%, #edf7fb);
}

.executive-directory__intro::after {
    position: absolute;
    z-index: -1;
    right: -55px;
    bottom: -125px;
    width: 340px;
    height: 340px;
    border: 42px solid rgba(243, 159, 95, .1);
    border-radius: 50%;
    content: "";
}

.executive-directory__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #985521;
    font-size: 15px;
    font-weight: 600;
}

.executive-directory__eyebrow::before {
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--theme);
    content: "";
}

.executive-directory .news-detail-title {
    margin: 16px 0;
    font-size: clamp(28px, 3.3vw, 44px);
    line-height: 1.4;
}

.executive-directory__heading p {
    margin: 0;
    color: var(--text);
    line-height: 1.9;
}

.executive-directory__crest {
    display: grid;
    width: 180px;
    height: 180px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 36px rgba(56, 84, 105, .08);
}

.executive-directory__crest img {
    object-fit: contain;
}

.executive-directory__header {
    max-width: 640px;
    margin: 0 auto 64px;
}

.executive-directory__header .sec_title {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.4;
}

.executive-directory__header .sec_title::after {
    display: block;
    width: 72px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--theme), #ffd24a);
    content: "";
}

.executive-directory__header p {
    margin: 18px 0 0;
    color: var(--text);
    line-height: 1.8;
}

.executive-directory__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 7px 16px;
    border: 1px solid rgba(243, 159, 95, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: #985521;
    font-size: 14px;
}

.executive-directory__grid {
    --executive-columns: 4;
    --executive-gap: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 44px var(--executive-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.executive-portrait {
    flex: 0 0 calc((100% - (var(--executive-columns) - 1) * var(--executive-gap)) / var(--executive-columns));
    min-width: 0;
}

.executive-portrait__link {
    position: relative;
    display: block;
    border-radius: 12px;
}

.executive-portrait__link:focus-visible {
    outline: 3px solid var(--theme);
    outline-offset: 6px;
}

.executive-portrait__order {
    position: absolute;
    z-index: 2;
    top: -14px;
    left: -14px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #f7b27d, var(--theme) 55%, #e0843f);
    box-shadow: 0 6px 14px rgba(152, 85, 33, .3);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: transform .3s ease;
}

.executive-portrait__image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(56, 84, 105, .08),
        0 6px 14px rgba(56, 84, 105, .1),
        0 16px 32px -12px rgba(56, 84, 105, .22);
    transition: transform .35s ease, box-shadow .35s ease;
}

.executive-portrait__image::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(34, 32, 94, 0) 30%, rgba(34, 32, 94, .45));
    opacity: 0;
    content: "";
    transition: opacity .35s ease;
}

.executive-portrait__image::after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    content: "";
}

.executive-portrait__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform .6s ease;
}

.executive-portrait__zoom {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    color: #985521;
    font-size: 20px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
    transition: opacity .3s ease, transform .3s ease;
}

.executive-portrait__link:hover .executive-portrait__image,
.executive-portrait__link:focus-visible .executive-portrait__image {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(56, 84, 105, .08),
        0 14px 28px rgba(56, 84, 105, .14),
        0 32px 56px -18px rgba(56, 84, 105, .34);
}

.executive-portrait__link:hover .executive-portrait__image img,
.executive-portrait__link:focus-visible .executive-portrait__image img { transform: scale(1.04); }

.executive-portrait__link:hover .executive-portrait__image::before,
.executive-portrait__link:focus-visible .executive-portrait__image::before { opacity: 1; }

.executive-portrait__link:hover .executive-portrait__image::after,
.executive-portrait__link:focus-visible .executive-portrait__image::after {
    left: 130%;
    transition: left .8s ease;
}

.executive-portrait__link:hover .executive-portrait__zoom,
.executive-portrait__link:focus-visible .executive-portrait__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.executive-portrait__link:hover .executive-portrait__order,
.executive-portrait__link:focus-visible .executive-portrait__order { transform: translateY(-6px) rotate(-8deg); }

.executive-directory__empty {
    margin-top: 32px;
    padding: 48px 24px;
    border: 1px dashed rgba(56, 84, 105, .2);
    border-radius: 24px;
    text-align: center;
}

.executive-directory__empty i {
    margin-bottom: 16px;
    color: var(--theme);
    font-size: 36px;
}

.executive-directory__empty p {
    margin: 0;
}

/* Basic school information ------------------------------------------------ */

.school-basic {
    color: var(--text);
}

.school-basic__intro {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(30px, 5vw, 72px);
}

.school-basic__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #a85b24;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

.school-basic__eyebrow::before {
    width: 27px;
    height: 2px;
    border-radius: 2px;
    background: var(--theme);
    content: "";
}

.school-basic__intro h2,
.school-basic__section-heading h2,
.school-basic__information h2 {
    color: var(--header);
    line-height: 1.3;
}

.school-basic__intro h2 {
    margin-bottom: 21px;
    font-size: clamp(30px, 2.7vw, 44px);
}

.school-basic__intro-copy p {
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 1.85;
}

.school-basic__intro-copy .school-basic__lead {
    color: #29435f;
    font-size: 19px;
    font-weight: 500;
}

.school-basic__text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: #174684;
    font-weight: 700;
    transition: gap .25s ease, color .25s ease;
}

.school-basic__text-link:hover,
.school-basic__text-link:focus-visible {
    gap: 17px;
    color: var(--theme);
}

.school-basic__photo {
    position: relative;
    min-width: 0;
    aspect-ratio: 1.35;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 30px;
    background: #dceaf3;
    box-shadow: 0 28px 58px -28px rgba(21, 58, 100, .38), 0 10px 25px -15px rgba(31, 77, 139, .2);
}

.school-basic__photo::after {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, rgba(6, 28, 57, .62));
    content: "";
    pointer-events: none;
}

.school-basic__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.school-basic__photo:hover img {
    transform: scale(1.045);
}

.school-basic__photo figcaption {
    position: absolute;
    z-index: 1;
    right: 24px;
    bottom: 22px;
    left: 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.school-basic__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(50px, 6vw, 82px) 0;
    padding: 26px 0;
    border-top: 1px solid rgba(39, 77, 115, .17);
    border-bottom: 1px solid rgba(39, 77, 115, .17);
}

.school-basic__facts > div {
    min-width: 0;
    padding: 6px clamp(16px, 2vw, 30px);
    border-left: 1px solid rgba(39, 77, 115, .14);
}

.school-basic__facts > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.school-basic__facts dt {
    margin-bottom: 8px;
    color: #60738a;
    font-size: 14px;
    font-weight: 600;
}

.school-basic__facts dd {
    margin: 0;
    color: var(--header);
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.5;
}

.school-basic__history {
    scroll-margin-top: 110px;
    padding: clamp(30px, 4vw, 56px);
    border: 1px solid rgba(64, 108, 156, .12);
    border-radius: 30px;
    background: linear-gradient(135deg, #f2f7fd, #f8fbfd 50%, #fffbf4);
}

.school-basic__section-heading {
    max-width: 750px;
}

.school-basic__section-heading h2,
.school-basic__information h2 {
    margin-bottom: 13px;
    font-size: clamp(28px, 2.4vw, 39px);
}

.school-basic__section-heading p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
}

.school-basic__timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.school-basic__timeline li {
    position: relative;
    min-width: 0;
    padding-top: 27px;
    border-top: 1px solid rgba(47, 97, 148, .25);
}

.school-basic__timeline li::before {
    position: absolute;
    top: -6px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f39f5f;
    box-shadow: 0 0 0 5px #e5f0fa;
    content: "";
}

.school-basic__year {
    display: block;
    margin-bottom: 9px;
    color: #a85b24;
    font-size: 15px;
    font-weight: 700;
}

.school-basic__timeline h3 {
    margin-bottom: 9px;
    color: var(--header);
    font-size: 20px;
    line-height: 1.4;
}

.school-basic__timeline p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
}

.school-basic__information {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: start;
    gap: clamp(32px, 5vw, 70px);
    margin-top: clamp(64px, 7vw, 100px);
}

.school-basic__information-list {
    margin: 26px 0 0;
    border-top: 1px solid rgba(39, 77, 115, .15);
}

.school-basic__information-list div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 22px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(39, 77, 115, .15);
}

.school-basic__information-list dt {
    color: var(--header);
    font-weight: 700;
}

.school-basic__information-list dd {
    margin: 0;
    line-height: 1.75;
}

.school-basic__contact {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 3vw, 40px);
    border-radius: 26px;
    background: linear-gradient(140deg, #123c86, #162d60);
    box-shadow: 0 24px 48px -25px rgba(18, 48, 104, .42);
    color: #fff;
}

.school-basic__contact::after {
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 230px;
    height: 230px;
    border: 35px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.school-basic__contact > span {
    color: #f9c194;
    font-size: 14px;
    font-weight: 700;
}

.school-basic__contact h3 {
    margin: 10px 0 26px;
    color: #fff;
    font-size: 26px;
    line-height: 1.4;
}

.school-basic__contact a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
    color: #fff;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.school-basic__contact a:hover,
.school-basic__contact a:focus-visible {
    color: #ffd1ab;
}

.school-basic__contact a i {
    width: 18px;
    flex: 0 0 18px;
    margin-top: 4px;
}

.school-basic__related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
    margin-top: 70px;
    padding-top: 25px;
    border-top: 1px solid rgba(39, 77, 115, .15);
}

.school-basic__related span {
    color: #60738a;
    font-size: 14px;
    font-weight: 600;
}

.school-basic__related a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #174684;
    font-weight: 700;
}

.school-basic__related a:hover,
.school-basic__related a:focus-visible {
    color: var(--theme);
}

@media (max-width: 991px) {
    .school-basic__intro,
    .school-basic__information { grid-template-columns: minmax(0, 1fr); }
    .school-basic__photo { aspect-ratio: 1.7; }
    .school-basic__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .school-basic__facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .school-basic__facts > div:nth-child(n + 3) { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(39, 77, 115, .14); }
    .school-basic__timeline { display: block; margin-left: 6px; padding-left: 26px; border-left: 1px solid rgba(47, 97, 148, .25); }
    .school-basic__timeline li { padding: 0 0 28px; border-top: 0; }
    .school-basic__timeline li:last-child { padding-bottom: 0; }
    .school-basic__timeline li::before { top: 7px; left: -32px; }
}

@media (max-width: 575px) {
    .school-basic__intro-copy .school-basic__lead { font-size: 17px; }
    .school-basic__photo { aspect-ratio: 1.25; border-radius: 22px; }
    .school-basic__photo figcaption { right: 18px; bottom: 16px; left: 18px; font-size: 13px; }
    .school-basic__facts { grid-template-columns: minmax(0, 1fr); padding: 8px 0; }
    .school-basic__facts > div,
    .school-basic__facts > div:nth-child(3),
    .school-basic__facts > div:nth-child(n + 3) { margin: 0; padding: 17px 0; border: 0; border-top: 1px solid rgba(39, 77, 115, .14); }
    .school-basic__facts > div:first-child { border-top: 0; }
    .school-basic__history { padding: 28px 23px; border-radius: 24px; }
    .school-basic__information-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .school-basic__contact { border-radius: 22px; }
    .school-basic__related { margin-top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .school-basic__photo img,
    .school-basic__text-link { transition: none; }
    .school-basic__photo:hover img { transform: none; }
}

.school-personnel__heading {
    margin-bottom: 36px;
}

.school-personnel__staff-heading {
    margin-top: 72px;
}

.school-personnel__member {
    position: relative;
    isolation: isolate;
    perspective: 1200px;
}

.school-personnel__member::before {
    position: absolute;
    z-index: -1;
    top: 1%;
    left: -7%;
    width: 114%;
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    background: radial-gradient(ellipse at 22% 24%, rgba(90, 152, 232, .36), transparent 55%),
                radial-gradient(ellipse at 80% 78%, rgba(235, 181, 128, .25), transparent 58%);
    content: "";
    opacity: .65;
    pointer-events: none;
    transform: translateY(14px) scale(.94);
    transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}

.school-personnel__member .team-image {
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(244, 249, 255, .92);
    border-radius: 24px;
    box-shadow: 0 24px 48px -22px rgba(17, 43, 88, .43),
                0 10px 24px -14px rgba(27, 85, 170, .27),
                0 0 0 1px rgba(99, 145, 204, .08);
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: center 72%;
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), box-shadow .65s ease;
}

.school-personnel__member .team-image::before,
.school-personnel__member .team-image::after {
    position: absolute;
    pointer-events: none;
    content: "";
}

.school-personnel__member .team-image::before {
    z-index: 2;
    inset: 0 auto 0 0;
    width: 52%;
    background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .05) 75%, transparent 95%);
    transform: translateX(-160%) skewX(-16deg);
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.school-personnel__member .team-image::after {
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(155deg, rgba(255, 255, 255, .2), transparent 33%, transparent 65%, rgba(9, 35, 83, .21));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 0 0 1px rgba(255, 255, 255, .2);
    opacity: .62;
    transition: opacity .65s ease;
}

.school-personnel__member .team-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 724 / 1024;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
}

@media (hover: hover) and (pointer: fine) {
    .school-personnel__member:hover {
        z-index: 2;
    }

    .school-personnel__member:hover::before {
        opacity: 1;
        transform: translateY(24px) scale(1.06);
    }

    .school-personnel__member:hover .team-image {
        box-shadow: 0 40px 70px -22px rgba(13, 39, 89, .45),
                    0 17px 34px -14px rgba(37, 104, 198, .3),
                    0 0 0 1px rgba(255, 255, 255, .78);
        transform: translateY(-14px) rotateX(3deg) scale(1.02);
    }

    .school-personnel__member:hover .team-image img {
        filter: saturate(1.035) brightness(1.025);
        transform: scale(1.075);
    }

    .school-personnel__member:hover .team-image::before {
        transform: translateX(280%) skewX(-16deg);
    }

    .school-personnel__member:hover .team-image::after {
        opacity: .8;
    }
}

.school-personnel__member:focus-within .team-image {
    box-shadow: 0 30px 50px -20px rgba(8, 35, 87, .4), 0 14px 28px -16px rgba(17, 83, 173, .36);
    transform: translateY(-8px) scale(1.015);
}

.school-personnel__member:focus-within::before {
    opacity: .9;
    transform: translateY(20px) scale(1.02);
}

.school-personnel__member .team-content {
    margin-top: 22px;
}

.school-personnel__member .team-content h3 {
    margin-bottom: 6px;
    color: var(--header);
    font-size: 23px;
    line-height: 1.4;
}

.school-personnel__member .team-content p {
    margin: 0;
    color: var(--text);
    font-size: 16px;
}

.school-personnel__details {
    display: grid;
    gap: 4px;
    margin: 10px 0 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

.school-personnel__details div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 6px;
}

.school-personnel__details dt {
    font-weight: 600;
}

.school-personnel__details dt::after {
    content: ':';
}

.school-personnel__details dd {
    margin: 0;
}

.school-personnel__details a {
    color: var(--theme);
}

@media (max-width: 575px) {
    .school-personnel__staff-heading { margin-top: 52px; }
    .school-personnel__member .team-content h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .school-personnel__member::before,
    .school-personnel__member .team-image,
    .school-personnel__member .team-image::before,
    .school-personnel__member .team-image::after,
    .school-personnel__member .team-image img { transition: none; }

    .school-personnel__member:hover .team-image,
    .school-personnel__member:focus-within .team-image,
    .school-personnel__member:hover .team-image img,
    .school-personnel__member::before,
    .school-personnel__member:hover::before,
    .school-personnel__member:focus-within::before { transform: none; }

    .school-personnel__member:hover .team-image::before { transform: translateX(-160%) skewX(-16deg); }
}

.mfp-bg.executive-gallery-popup,
.mfp-bg.news-album-popup { z-index: 20000; }
.mfp-wrap.executive-gallery-popup,
.mfp-wrap.news-album-popup { z-index: 20001; }

@media (max-width: 1199px) {
    .executive-directory__grid { --executive-columns: 3; }
}

@media (max-width: 991px) {
    .executive-directory__grid { --executive-columns: 2; --executive-gap: 28px; }
    .executive-directory__intro { padding: 32px; gap: 24px; }
    .executive-directory__crest { width: 140px; height: 140px; }
    .executive-directory__crest img { width: 100px; height: 100px; }
}

@media (max-width: 575px) {
    .executive-directory-banner .school-news-breadcrumb { height: 300px; }
    .executive-directory { padding-top: 40px; }
    .executive-directory__grid { --executive-columns: 1; }
    .executive-portrait { max-width: 340px; }
    .executive-directory__header { margin-bottom: 44px; }
    .executive-directory__intro { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; border-radius: 24px; }
    .executive-directory__crest { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .executive-portrait__order,
    .executive-portrait__image,
    .executive-portrait__image img,
    .executive-portrait__zoom { transition: none; }
    .executive-portrait__image::after { display: none; }
    .executive-portrait__link:hover .executive-portrait__order,
    .executive-portrait__link:focus-visible .executive-portrait__order,
    .executive-portrait__link:hover .executive-portrait__image,
    .executive-portrait__link:focus-visible .executive-portrait__image,
    .executive-portrait__link:hover .executive-portrait__image img,
    .executive-portrait__link:focus-visible .executive-portrait__image img { transform: none; }
}

/* Vision, mission and goals ---------------------------------------------- */

.school-vision {
    --vision-ink: #29435f;
    --vision-line: rgba(39, 77, 115, .12);
    color: var(--text);
}

.school-vision [id] {
    scroll-margin-top: 120px;
}

.school-vision .is-tone-1 { --tone-bg: var(--bg); --tone-ink: #c8641c; }
.school-vision .is-tone-2 { --tone-bg: var(--bg2); --tone-ink: #1a7aa3; }
.school-vision .is-tone-3 { --tone-bg: var(--bg3); --tone-ink: #bf3f70; }
.school-vision .is-tone-4 { --tone-bg: var(--bg4); --tone-ink: #4650b3; }

/* Intro and jump links */

.school-vision__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px 60px;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.school-vision__intro h2 {
    margin: 0 0 12px;
    color: var(--header);
    font-size: clamp(32px, 3.2vw, 50px);
    line-height: 1.25;
}

.school-vision__subtitle {
    margin: 0;
    color: #8a9bb0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.school-vision__jump {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.school-vision__jump a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px 13px 13px;
    border: 1px solid var(--vision-line);
    border-radius: 18px;
    background: #fff;
    color: var(--header);
    font-weight: 700;
    box-shadow: 0 12px 26px -20px rgba(21, 58, 100, .45);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.school-vision__jump a span {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--bg);
    color: #a85b24;
    font-size: 13px;
}

.school-vision__jump a em {
    margin-left: auto;
    color: #8a9bb0;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.school-vision__jump a:hover,
.school-vision__jump a:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(243, 159, 95, .55);
    box-shadow: 0 20px 32px -20px rgba(243, 159, 95, .6);
}

/* Vision statement */

.school-vision__vision {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(36px, 5.5vw, 76px) clamp(26px, 5.5vw, 84px);
    border-radius: 36px;
    background:
        radial-gradient(circle at 88% 10%, rgba(243, 159, 95, .38), transparent 42%),
        radial-gradient(circle at 6% 94%, rgba(79, 160, 214, .3), transparent 46%),
        linear-gradient(135deg, #132640 0%, #1c3c5e 55%, #22567b 100%);
    box-shadow: 0 44px 80px -42px rgba(10, 30, 60, .7);
}

/* Faint dot grid that fades out towards the bottom of the card. */
.school-vision__vision::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 22px 22px;
    content: "";
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
    mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.school-vision__quote {
    position: absolute;
    z-index: -1;
    top: clamp(18px, 3vw, 34px);
    right: clamp(22px, 5vw, 70px);
    color: rgba(243, 159, 95, .22);
    font-size: clamp(84px, 11vw, 160px);
    line-height: 1;
}

.school-vision__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    padding: 7px 18px 7px 7px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 17px;
    line-height: 1.4;
}

.school-vision__label span {
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--theme);
    color: #fff;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.school-vision__statement {
    max-width: 1000px;
    margin: 0;
    padding: 0;
    border: 0;
}

.school-vision__statement p {
    margin: 0;
    color: #fff;
    font-size: clamp(21px, 2.15vw, 31px);
    font-weight: 500;
    line-height: 1.8;
}

/* A highlighter stroke under the key phrases, drawn behind the text. */
.school-vision__statement mark {
    padding: 0 .08em;
    background: linear-gradient(transparent 60%, rgba(243, 159, 95, .55) 60%, rgba(243, 159, 95, .55) 92%, transparent 92%);
    color: #fff;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Thai line breaking splits compounds such as พอ|เพียง; keep them whole. */
.school-vision__keep {
    white-space: nowrap;
}

.school-vision__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
}

.school-vision__foot::before {
    flex: none;
    width: 40px;
    height: 2px;
    border-radius: 2px;
    background: var(--theme);
    content: "";
}

/* Section blocks */

.school-vision__block {
    margin-top: clamp(64px, 8vw, 112px);
}

.school-vision__block--tinted {
    padding: clamp(32px, 5vw, 64px);
    border: 1px solid rgba(64, 108, 156, .12);
    border-radius: 36px;
    background: linear-gradient(135deg, #f2f7fd, #f8fbfd 50%, #fffbf4);
}

.school-vision__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    margin-bottom: 34px;
}

.school-vision__en {
    width: 100%;
    color: #a85b24;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.school-vision__heading h2 {
    margin: 0;
    color: var(--header);
    font-size: clamp(30px, 2.6vw, 42px);
    line-height: 1.25;
}

.school-vision__count {
    margin-bottom: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--bg);
    color: #a85b24;
    font-size: 14px;
    font-weight: 700;
}

.school-vision__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--tone-bg);
    color: var(--tone-ink);
    font-size: 23px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
    transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}

/* Missions */

.school-vision__missions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-vision__mission {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    overflow: hidden;
    padding: 28px 30px;
    border: 1px solid var(--vision-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(20, 38, 56, .03), 0 22px 44px -26px rgba(20, 38, 56, .28);
    transition: transform .45s cubic-bezier(.22, .8, .3, 1), box-shadow .45s ease, border-color .45s ease;
}

/* Oversized outline numeral tucked into the corner of each card. */
.school-vision__mission::after {
    position: absolute;
    z-index: -1;
    right: 16px;
    bottom: -22px;
    color: transparent;
    font-size: 104px;
    font-weight: 800;
    line-height: 1;
    content: attr(data-number);
    -webkit-text-stroke: 1.5px rgba(39, 77, 115, .1);
}

.school-vision__mission:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tone-ink) 30%, transparent);
    box-shadow: 0 4px 8px rgba(20, 38, 56, .04), 0 32px 54px -28px rgba(20, 38, 56, .38);
}

.school-vision__mission:hover .school-vision__icon {
    transform: rotate(-8deg) scale(1.07);
}

.school-vision__mission-no {
    display: block;
    margin-bottom: 6px;
    color: var(--tone-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}

.school-vision__mission p {
    margin: 0;
    color: var(--vision-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
}

/* Goals */

.school-vision__goals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-vision__goal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 28px 22px 24px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 38px -26px rgba(20, 38, 56, .38);
    transition: transform .4s cubic-bezier(.22, .8, .3, 1), box-shadow .4s ease;
}

.school-vision__goal::before {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--tone-ink);
    opacity: .8;
    content: "";
}

.school-vision__goal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.school-vision__goal .school-vision__icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 20px;
}

.school-vision__goal-no {
    color: rgba(39, 77, 115, .22);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.school-vision__goal p {
    margin: 0;
    color: var(--vision-ink);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.75;
}

.school-vision__goal:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 46px -26px rgba(20, 38, 56, .45);
}

.school-vision__goal:hover .school-vision__icon {
    transform: scale(1.08);
}

/* Strategy roadmap */

.school-vision__roadmap {
    --rail: 88px;
    --rail-x: 32px;
    position: relative;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0 0 0 var(--rail);
    list-style: none;
}

.school-vision__roadmap::before {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: calc(var(--rail-x) - 1.5px);
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--theme), #4f8fc0);
    content: "";
}

.school-vision__step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 22px 28px;
    border: 1px solid var(--vision-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 34px -28px rgba(20, 38, 56, .4);
    transition: transform .4s cubic-bezier(.22, .8, .3, 1), border-color .4s ease, box-shadow .4s ease;
}

.school-vision__node {
    position: absolute;
    top: 50%;
    left: calc(var(--rail-x) - var(--rail));
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #f7b27a, var(--theme));
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 10px 22px -8px rgba(243, 159, 95, .75);
    transform: translate(-50%, -50%);
    transition: transform .4s cubic-bezier(.22, .8, .3, 1);
}

.school-vision__step-label {
    padding: 7px 15px;
    border-radius: 999px;
    background: #f3f7fc;
    color: var(--header);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.school-vision__step p {
    margin: 0;
    color: var(--vision-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
}

.school-vision__step:hover {
    transform: translateX(8px);
    border-color: rgba(243, 159, 95, .45);
    box-shadow: 0 22px 40px -28px rgba(243, 159, 95, .6);
}

.school-vision__step:hover .school-vision__node {
    transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 1199px) {
    .school-vision__goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .school-vision__intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .school-vision__missions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .school-vision__jump { grid-template-columns: minmax(0, 1fr); }
    .school-vision__vision { border-radius: 26px; }
    .school-vision__label { font-size: 15px; }
    .school-vision__block--tinted { padding: 26px 18px; border-radius: 26px; }
    .school-vision__mission { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 22px; border-radius: 22px; }
    .school-vision__mission::after { font-size: 84px; }
    .school-vision__mission p,
    .school-vision__step p { font-size: 16px; }
    .school-vision__goals { grid-template-columns: minmax(0, 1fr); }
    .school-vision__roadmap { --rail: 58px; --rail-x: 22px; }
    .school-vision__node { width: 44px; height: 44px; font-size: 17px; }
    .school-vision__step { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
    .school-vision__step-label { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .school-vision__jump a,
    .school-vision__icon,
    .school-vision__mission,
    .school-vision__goal,
    .school-vision__step,
    .school-vision__node { transition: none; }
    .school-vision__jump a:hover,
    .school-vision__mission:hover,
    .school-vision__goal:hover,
    .school-vision__step:hover { transform: none; }
    .school-vision__mission:hover .school-vision__icon,
    .school-vision__goal:hover .school-vision__icon { transform: none; }
    .school-vision__step:hover .school-vision__node { transform: translate(-50%, -50%); }
}

/* Identity, slogan, logo and colours ---------------------------------------- */

.school-identity {
    --identity-blue: #2c408a;
    --identity-blue-deep: #1b2a63;
    --identity-yellow: #fff24a;
    --identity-line: rgba(44, 64, 138, .12);
    color: var(--text);
}

.school-identity__intro {
    max-width: 760px;
    margin: 0 auto clamp(40px, 5vw, 60px);
    text-align: center;
}

.school-identity__intro h2 {
    margin: 0 0 12px;
    color: var(--header);
    font-size: clamp(32px, 3.2vw, 50px);
    line-height: 1.25;
}

.school-identity__subtitle {
    margin: 0;
    color: #8a9bb0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* The small label above each block: English overline plus Thai heading. */
.school-identity__label {
    margin-bottom: 26px;
}

.school-identity__label span {
    display: block;
    margin-bottom: 6px;
    color: #a85b24;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.school-identity__label h2 {
    margin: 0;
    color: var(--header);
    font-size: clamp(26px, 2.3vw, 36px);
    line-height: 1.25;
}

/* เอกลักษณ์ and อัตลักษณ์ around the students */

.school-identity__traits {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    overflow: hidden;
    padding: clamp(30px, 4vw, 56px) clamp(22px, 4vw, 56px) 0;
    border: 1px solid var(--identity-line);
    border-radius: 36px;
    background:
        radial-gradient(circle at 50% 78%, rgba(255, 242, 74, .5), transparent 36%),
        linear-gradient(135deg, #eef3ff 0%, #f7f9ff 45%, #fffbe6 100%);
}

.school-identity__trait {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(30px, 4vw, 56px);
    padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 32px);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 28px;
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 26px 50px -30px rgba(27, 42, 99, .45);
    text-align: center;
    transition: transform .45s cubic-bezier(.22, .8, .3, 1), box-shadow .45s ease;
}

.school-identity__trait:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -30px rgba(27, 42, 99, .5);
}

.school-identity__trait-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 21px;
    font-size: 27px;
    transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}

.school-identity__trait:hover .school-identity__trait-icon {
    transform: rotate(-8deg) scale(1.08);
}

.school-identity__trait--distinct .school-identity__trait-icon {
    background: linear-gradient(145deg, #4058b5, var(--identity-blue));
    color: #fff;
    box-shadow: 0 14px 26px -12px rgba(44, 64, 138, .7);
}

.school-identity__trait--identity .school-identity__trait-icon {
    background: linear-gradient(145deg, #fff27a, #f6c02f);
    color: var(--identity-blue-deep);
    box-shadow: 0 14px 26px -12px rgba(214, 160, 20, .7);
}

.school-identity__trait h3 {
    margin: 0 0 10px;
    color: #60738a;
    font-size: 16px;
    font-weight: 700;
}

.school-identity__trait-value {
    margin: 0;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.35;
}

.school-identity__trait--distinct .school-identity__trait-value {
    color: var(--identity-blue);
}

.school-identity__trait--identity .school-identity__trait-value {
    background: linear-gradient(135deg, #c47a0a, #a9570a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.school-identity__students {
    position: relative;
    align-self: end;
    margin: 0;
}

/* The school-yellow disc the students stand in front of. */
.school-identity__students::before {
    position: absolute;
    z-index: -1;
    right: 4%;
    bottom: 12%;
    left: 4%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--identity-yellow) 0%, rgba(255, 242, 74, .55) 55%, rgba(255, 242, 74, 0) 72%);
    content: "";
}

.school-identity__students img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 22px 30px rgba(27, 42, 99, .28));
}

/* คำขวัญ */

.school-identity__slogan {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(56px, 7vw, 96px);
    padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px);
    border: 1px solid var(--identity-line);
    border-radius: 36px;
    background: radial-gradient(ellipse at 50% 45%, #fffdf2 0%, #fff7d1 42%, #f3f6ff 100%);
    text-align: center;
}

/* Soft sun rays behind the torch in the slogan artwork. */
.school-identity__slogan::before {
    position: absolute;
    z-index: -1;
    inset: -40%;
    background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(245, 190, 50, .12) 0deg 5deg, transparent 5deg 15deg);
    content: "";
    -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 55%);
    mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 55%);
}

.school-identity__slogan figure {
    margin: 0;
}

.school-identity__slogan img {
    width: 100%;
    max-width: 900px;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(27, 42, 99, .22));
}

.school-identity__slogan figcaption {
    margin-top: 18px;
    color: var(--identity-blue);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
}

/* ตราสัญลักษณ์ and สีประจำโรงเรียน */

.school-identity__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 26px;
}

.school-identity__logo,
.school-identity__colors {
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(39, 77, 115, .1);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 26px 52px -34px rgba(20, 38, 56, .38);
}

.school-identity__logo {
    background: radial-gradient(circle at 50% 60%, rgba(255, 242, 74, .42), transparent 52%), #fff;
    text-align: center;
}

.school-identity__logo figure {
    margin: 0;
}

.school-identity__logo img {
    width: min(100%, 300px);
    height: auto;
    filter: drop-shadow(0 22px 30px rgba(27, 42, 99, .3));
    transition: transform .6s cubic-bezier(.22, .8, .3, 1);
}

.school-identity__logo:hover img {
    transform: rotate(-4deg) scale(1.04);
}

.school-identity__flag {
    height: 150px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(to bottom, var(--identity-blue) 50%, var(--identity-yellow) 50%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 34px -20px rgba(27, 42, 99, .5);
}

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

.school-identity__swatch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 12px 18px 12px 12px;
    border: 1px solid rgba(39, 77, 115, .1);
    border-radius: 20px;
    background: #fbfcfe;
}

.school-identity__swatch-chip {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 20px -10px rgba(0, 0, 0, .35);
}

.school-identity__swatch--blue .school-identity__swatch-chip { background: var(--identity-blue); }
.school-identity__swatch--yellow .school-identity__swatch-chip { background: var(--identity-yellow); }

.school-identity__swatch-name {
    color: var(--header);
    font-size: 20px;
    font-weight: 800;
}

.school-identity__swatch-hex {
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2f7;
    color: #52657b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

/* ปรัชญา */

.school-identity__philosophy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(56px, 7vw, 96px);
    padding: clamp(40px, 6vw, 84px) clamp(22px, 5vw, 72px);
    border-radius: 36px;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 242, 74, .22), transparent 40%),
        radial-gradient(circle at 86% 86%, rgba(243, 159, 95, .3), transparent 45%),
        linear-gradient(135deg, var(--identity-blue-deep) 0%, var(--identity-blue) 60%, #3653a3 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 44px 80px -42px rgba(27, 42, 99, .75);
}

.school-identity__wheel {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    color: rgba(255, 242, 74, .08);
    font-size: clamp(220px, 28vw, 380px);
    transform: translate(-50%, -50%);
    animation: school-identity-turn 80s linear infinite;
}

@keyframes school-identity-turn {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.school-identity__philosophy-label {
    display: inline-block;
    margin: 0 0 26px;
    padding: 7px 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 17px;
    letter-spacing: .08em;
}

.school-identity__philosophy blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.school-identity__pali {
    margin: 0 0 14px;
    color: var(--identity-yellow);
    font-size: clamp(34px, 4.4vw, 64px);
    font-weight: 800;
    line-height: 1.3;
    text-shadow: 0 8px 32px rgba(255, 242, 74, .25);
}

.school-identity__meaning {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 500;
}

@media (max-width: 991px) {
    .school-identity__traits {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 0;
    }

    .school-identity__trait { margin-bottom: 0; }
    .school-identity__students { order: 3; }
    .school-identity__students img { max-width: 300px; }
    .school-identity__pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .school-identity__traits,
    .school-identity__slogan,
    .school-identity__philosophy { border-radius: 26px; }
    .school-identity__logo,
    .school-identity__colors { border-radius: 26px; }
    .school-identity__flag { height: 110px; }
    .school-identity__swatch { gap: 12px; padding-right: 12px; }
    .school-identity__swatch-chip { width: 46px; height: 46px; border-radius: 13px; }
    .school-identity__swatch-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .school-identity__trait,
    .school-identity__trait-icon,
    .school-identity__logo img { transition: none; }
    .school-identity__trait:hover,
    .school-identity__trait:hover .school-identity__trait-icon,
    .school-identity__logo:hover img { transform: none; }
    .school-identity__wheel { animation: none; }
}

/* Hairstyle regulations ------------------------------------------------------ */

.school-hair {
    --hair-line: rgba(39, 77, 115, .12);
    --hair-ink: #29435f;
    color: var(--text);
}

.school-hair [id] {
    scroll-margin-top: 120px;
}

.school-hair__group--boys,
.school-hair__switch-link--boys {
    --group-ink: #2c408a;
    --group-ink-2: #4058b5;
    --group-soft: #edf1ff;
}

.school-hair__group--girls,
.school-hair__switch-link--girls {
    --group-ink: #b8356f;
    --group-ink-2: #db5b91;
    --group-soft: #fdeef4;
}

/* Intro */

.school-hair__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px 48px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.school-hair__intro h2 {
    margin: 0 0 8px;
    color: var(--header);
    font-size: clamp(32px, 3.2vw, 50px);
    line-height: 1.25;
}

.school-hair__school {
    margin: 0;
    color: #60738a;
    font-size: 18px;
    font-weight: 600;
}

.school-hair__switch {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.school-hair__switch-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px 12px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--group-ink-2), var(--group-ink));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 16px 30px -16px var(--group-ink);
    transition: transform .3s ease, box-shadow .3s ease;
}

.school-hair__switch-link i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    font-size: 19px;
}

.school-hair__switch-link small {
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    font-weight: 600;
}

.school-hair__switch-link:hover,
.school-hair__switch-link:focus-visible {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 36px -16px var(--group-ink);
}

/* Key measurements */

.school-hair__figures {
    padding: clamp(22px, 3vw, 32px) clamp(22px, 3.5vw, 40px);
    border: 1px solid rgba(243, 159, 95, .25);
    border-radius: 28px;
    background: linear-gradient(115deg, var(--bg), #fffaf1 60%, #f3f8fd);
}

.school-hair__figures-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #a85b24;
    font-size: 16px;
    font-weight: 700;
}

.school-hair__figures dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.school-hair__figures dl > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    padding: 4px clamp(14px, 2vw, 26px);
    border-left: 1px solid rgba(168, 91, 36, .18);
}

.school-hair__figures dl > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.school-hair__figures dt {
    color: #60738a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.school-hair__figures dd {
    margin: 0;
    color: var(--header);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.2;
}

/* A group: boys or girls */

.school-hair__group {
    margin-top: clamp(56px, 7vw, 96px);
}

.school-hair__group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 26px;
}

.school-hair__group-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 19px;
    background: linear-gradient(145deg, var(--group-ink-2), var(--group-ink));
    color: #fff;
    font-size: 25px;
    box-shadow: 0 14px 26px -14px var(--group-ink);
}

.school-hair__group-en {
    display: block;
    color: var(--group-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.school-hair__group-head h2 {
    margin: 0;
    color: var(--header);
    font-size: clamp(26px, 2.4vw, 38px);
    line-height: 1.25;
}

.school-hair__group-count {
    margin-left: auto;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--group-soft);
    color: var(--group-ink);
    font-size: 14px;
    font-weight: 700;
}

/* The official notice, opened full size in the template's lightbox. */
.school-hair__sheet {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--hair-line);
    border-radius: 28px;
    background: #eef2f7;
    box-shadow: 0 30px 60px -36px rgba(20, 38, 56, .5);
}

.school-hair__sheet img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s cubic-bezier(.22, .8, .3, 1);
}

.school-hair__sheet:hover img,
.school-hair__sheet:focus-visible img {
    transform: scale(1.025);
}

/* Dims the notice and shows the zoom hint only while pointed at, so the hint
   never hides any of the notice's own wording. */
.school-hair__sheet::after {
    position: absolute;
    inset: 0;
    background: rgba(14, 30, 54, .38);
    opacity: 0;
    content: "";
    transition: opacity .35s ease;
}

.school-hair__sheet-zoom {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--group-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translate(-50%, -30%);
    transition: opacity .35s ease, transform .35s ease;
}

.school-hair__sheet:hover::after,
.school-hair__sheet:focus-visible::after {
    opacity: 1;
}

.school-hair__sheet:hover .school-hair__sheet-zoom,
.school-hair__sheet:focus-visible .school-hair__sheet-zoom {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Style cards */

.school-hair__styles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
    margin-top: 26px;
}

.school-hair__style {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--hair-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(20, 38, 56, .03), 0 22px 44px -28px rgba(20, 38, 56, .35);
    transition: transform .45s cubic-bezier(.22, .8, .3, 1), box-shadow .45s ease;
}

.school-hair__style:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 8px rgba(20, 38, 56, .04), 0 32px 54px -28px rgba(20, 38, 56, .42);
}

.school-hair__photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    background: #e9edf2;
}

.school-hair__photos figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 5 / 6;
}

.school-hair__photos.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.school-hair__photos.is-single figure {
    aspect-ratio: 5 / 3;
}

.school-hair__photos img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .6s cubic-bezier(.22, .8, .3, 1);
}

.school-hair__style:hover .school-hair__photos img {
    transform: scale(1.05);
}

.school-hair__photos figcaption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--header);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(20, 38, 56, .14);
}

.school-hair__style-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 24px 26px;
}

.school-hair__case {
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--group-soft);
    color: var(--group-ink);
    font-size: 13px;
    font-weight: 700;
}

.school-hair__style h3 {
    margin: 0 0 16px;
    color: var(--header);
    font-size: 24px;
    line-height: 1.35;
}

.school-hair__rules {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-hair__rules li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    color: var(--hair-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.school-hair__rules i {
    margin-top: 5px;
    font-size: 16px;
}

.school-hair__rules .is-do i {
    color: var(--group-ink);
}

.school-hair__rules .is-limit {
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #fff5ec;
    color: #8a4414;
    font-weight: 700;
}

.school-hair__rules .is-limit i {
    color: var(--theme);
}

.school-hair__bans {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(214, 48, 49, .18);
    border-radius: 18px;
    background: #fff4f4;
}

.school-hair__bans-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #c0262d;
    font-size: 15px;
    font-weight: 800;
}

.school-hair__bans ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-hair__bans li {
    position: relative;
    padding-left: 20px;
    color: #8f2a2e;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.65;
}

.school-hair__bans li::before {
    position: absolute;
    top: 0;
    left: 2px;
    color: #d6453f;
    font-weight: 800;
    content: "×";
}

.school-hair__source {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 44px 0 0;
    color: #60738a;
    font-size: 14px;
}

.school-hair__source i {
    color: var(--theme);
}

@media (max-width: 991px) {
    .school-hair__intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .school-hair__figures dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .school-hair__figures dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 575px) {
    .school-hair__switch-link { flex: 1 1 100%; }
    .school-hair__figures { border-radius: 22px; }
    .school-hair__figures dl { grid-template-columns: minmax(0, 1fr); }
    .school-hair__figures dl > div,
    .school-hair__figures dl > div:nth-child(3) { padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(168, 91, 36, .18); }
    .school-hair__figures dl > div:first-child { padding-top: 0; border-top: 0; }
    .school-hair__group-count { margin-left: 0; }
    .school-hair__sheet { border-radius: 20px; }
    .school-hair__style { border-radius: 22px; }
    .school-hair__style-body { padding: 20px; }
}

@media (hover: none) {
    .school-hair__sheet-zoom,
    .school-hair__sheet::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .school-hair__switch-link,
    .school-hair__sheet img,
    .school-hair__style,
    .school-hair__photos img { transition: none; }
    .school-hair__switch-link:hover,
    .school-hair__sheet:hover img,
    .school-hair__style:hover,
    .school-hair__style:hover .school-hair__photos img { transform: none; }
}

.news-grid-section {
    position: relative;
    z-index: 2;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.news-grid-image {
    display: block;
    min-width: 0;
    align-self: start;
    border-radius: 18px;
}

.news-grid-image:focus-visible {
    outline: 3px solid #f39f5f;
    outline-offset: 5px;
}

.news-grid-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    filter: drop-shadow(0 12px 16px rgba(20, 38, 56, .2));
    transition: transform .25s ease, filter .25s ease;
}

.news-grid-image:hover img,
.news-grid-image:focus-visible img {
    transform: translateY(-5px);
    filter: drop-shadow(0 18px 22px rgba(20, 38, 56, .27));
}

/* Load more --------------------------------------------------------------- */

.news-grid-more {
    margin-top: 44px;
    text-align: center;
}

.news-grid-more__button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #385469, #1f394f);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(31, 57, 79, .28);
    transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.news-grid-more__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(31, 57, 79, .34);
}

.news-grid-more__button[disabled] {
    cursor: default;
    opacity: .65;
    transform: none;
}

.news-grid-more__button i {
    transition: transform .3s ease;
}

.news-grid-more__button:hover i {
    transform: translateY(2px);
}

.news-grid-more__button.is-loading i {
    animation: news-grid-spin .8s linear infinite;
}

@keyframes news-grid-spin {
    to { transform: rotate(360deg); }
}

.news-grid-more__done {
    color: #8b98a6;
    font-size: 14px;
}

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

@media (max-width: 1199px) {
    .news-grid { gap: 24px; }
}

@media (max-width: 991px) {
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .news-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .news-grid-image img,
    .news-grid-more__button { transition: none; }
    .news-grid-image:hover img,
    .news-grid-image:focus-visible img { transform: none; }
}

/* Contact --------------------------------------------------------------- */
.school-contact { --contact-ink: #193450; --contact-blue: #205ba2; --contact-muted: #53677c; }
.school-contact__lead { max-width: 720px; margin: 12px 0 38px; color: var(--contact-muted); font-size: 18px; line-height: 1.9; }
.school-contact__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.school-contact__details { min-width: 0; }
.school-contact__photo { position: relative; overflow: hidden; margin: 0 0 30px; border-radius: 26px; box-shadow: 0 16px 38px -20px #21496c80, 0 1px 0 #fff inset; isolation: isolate; }
.school-contact__photo::after { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(180deg, transparent 25%, #0d254be6); pointer-events: none; }
.school-contact__photo img { display: block; width: 100%; height: 255px; object-fit: cover; transition: transform .65s ease; }
.school-contact__photo figcaption { position: absolute; z-index: 1; bottom: 26px; left: 28px; right: 24px; color: #fff; }
.school-contact__photo figcaption span { display: block; font-size: 14px; margin-bottom: 6px; }
.school-contact__photo figcaption strong { display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.5; }
.school-contact__channels { padding: 0; margin: 0; list-style: none; }
.school-contact__channels li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding: 23px 0; border-bottom: 1px solid #dce5ef; }
.school-contact__channels li:first-child { padding-top: 0; }
.school-contact__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--contact-blue); background: linear-gradient(145deg, #fff, #e6effa); border: 1px solid #fff; box-shadow: 0 4px 12px #204e7210; }
.school-contact__channels h2 { font-size: 17px; color: var(--contact-ink); margin-bottom: 8px; }
.school-contact__channels address { color: var(--contact-muted); font-style: normal; margin: 0; line-height: 1.9; }
.school-contact__channels a { color: var(--contact-blue); overflow-wrap: anywhere; }
.school-contact__channels a:hover { text-decoration: underline; text-underline-offset: 4px; }
.school-contact__phone { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin-top: 6px; font-size: 18px; font-weight: 600; }
.school-contact__phone span { color: var(--contact-muted); font-size: 13px; font-weight: 400; }
.school-contact__social { display: flex; align-items: center; gap: 16px; padding: 22px 0; color: var(--contact-blue); }
.school-contact__social > i:first-child { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #eaf1fa; }
.school-contact__social span { flex: 1; font-weight: 600; line-height: 1.5; }
.school-contact__social small { display: block; margin-top: 5px; color: var(--contact-muted); font-size: 13px; font-weight: 400; }
.school-contact__social > i:last-child { font-size: 13px; }
.school-contact__form-panel { position: relative; padding: clamp(25px, 3vw, 44px); border: 1px solid #e0e8f2; border-radius: 30px; background: linear-gradient(145deg, #fff 55%, #f2f7fd); box-shadow: 0 24px 70px -35px #254a7247, 0 3px 12px #254a7206; scroll-margin-top: 130px; }
.school-contact__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--contact-blue); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.school-contact__form-panel h2, .school-contact__map-heading h2 { margin-bottom: 12px; color: var(--contact-ink); font-size: clamp(25px, 2.6vw, 34px); line-height: 1.45; }
.school-contact__form-intro { margin-bottom: 26px; color: var(--contact-muted); font-size: 15px; line-height: 1.85; }
.school-contact__form { display: grid; gap: 20px; }
.school-contact__field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.school-contact__field { min-width: 0; display: grid; gap: 8px; align-content: start; }
.school-contact__field label { color: var(--contact-ink); font-weight: 600; font-size: 15px; }
.school-contact__field label span { color: #b83b45; }
.school-contact__field input, .school-contact__field textarea { width: 100%; padding: 13px 16px; background: #f9fbfe; border: 1px solid #d4dfeb; border-radius: 12px; color: #233e59; font: inherit; font-size: 15px; line-height: 1.7; outline: none; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.school-contact__field textarea { resize: vertical; min-height: 145px; }
.school-contact__field input::placeholder, .school-contact__field textarea::placeholder { color: #78899c; opacity: 1; }
.school-contact__field input:focus, .school-contact__field textarea:focus { background: #fff; border-color: #4a83cb; box-shadow: 0 0 0 4px #4483ce1c; }
.school-contact__field [aria-invalid="true"] { border-color: #c55463; }
.school-contact__hint { margin: 0; font-size: 12px; color: var(--contact-muted); line-height: 1.75; }
.school-contact__field-row + .school-contact__hint { margin-top: -12px; }
.school-contact__field .school-contact__error { font-size: 13px; color: #ac2c3c; margin: 0; line-height: 1.6; }
.school-contact__privacy { display: flex; gap: 10px; margin: 0; color: var(--contact-muted); font-size: 12px; line-height: 1.8; }
.school-contact__privacy i { margin-top: 5px; color: #527397; }
.school-contact__submit, .school-contact__directions { display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 15px 25px; border-radius: 13px; border: 1px solid #265fa7; background: linear-gradient(135deg, #2866b2, #18467f); color: #fff; font: inherit; font-weight: 600; line-height: 1.5; box-shadow: 0 8px 20px -9px #205da6a6; transition: transform .2s ease, box-shadow .2s ease; }
.school-contact__submit { width: 100%; }
.school-contact__submit:disabled { cursor: wait; opacity: .65; }
.school-contact__submit:hover:not(:disabled), .school-contact__directions:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -9px #205da6a6; }
.school-contact a:focus-visible, .school-contact button:focus-visible { outline: 3px solid #619de5; outline-offset: 4px; }
.school-contact__notice { display: flex; align-items: flex-start; gap: 12px; padding: 18px; margin: 0 0 24px; border-radius: 14px; font-size: 14px; line-height: 1.8; }
.school-contact__notice p { margin: 0; }
.school-contact__notice > i { margin-top: 5px; }
.school-contact__notice--success { background: #eaf6ef; color: #236246; border: 1px solid #b7dec8; }
.school-contact__notice--error { background: #fff1f2; color: #972c40; border: 1px solid #f3cbd4; }
.school-contact__notice ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.school-contact__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.school-contact__map-section { margin-top: clamp(48px, 6vw, 80px); }
.school-contact__map-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.school-contact__map-heading p { margin: 0; color: var(--contact-muted); }
.school-contact__directions { flex: none; background: #eff5fc; color: var(--contact-blue); box-shadow: none; border-color: #d1e0f2; font-size: 14px; }
.school-contact__directions:hover { color: var(--contact-blue); }
.school-contact__map { overflow: hidden; border: 1px solid #dae5f1; border-radius: 26px; background: #eef3f9; box-shadow: 0 15px 35px -26px #254a7280; }
.school-contact__map iframe { display: block; border: 0; width: 100%; height: 380px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .school-contact__photo:hover img { transform: scale(1.045); } }
@media (max-width: 991px) { .school-contact__layout { grid-template-columns: 1fr; gap: 32px; } .school-contact__photo img { height: 300px; } }
@media (max-width: 575px) {
    .school-contact__lead { font-size: 16px; margin-bottom: 28px; }
    .school-contact__photo img { height: 225px; }
    .school-contact__form-panel { padding: 24px 20px; border-radius: 22px; }
    .school-contact__field-row { grid-template-columns: 1fr; gap: 20px; }
    .school-contact__map-heading { flex-direction: column; align-items: flex-start; }
    .school-contact__map iframe { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
    .school-contact *, .school-contact *::before, .school-contact *::after { transition: none !important; }
    .school-contact__submit:hover, .school-contact__directions:hover { transform: none; }
}