/* The landing contact scene is isolated from school contact pages. */
#contact-us.contactScene {
    --contact-ink: #302051;
    --contact-muted: #655b85;
    scroll-margin-top: 100px;
    padding: 64px 20px 76px;
    background: radial-gradient(ellipse at 50% 65%, #eeedf9 0, transparent 48%), #f4fbff;
}
#contact-us .sectionTitle { position: relative; padding-bottom: 24px; text-align: center; }
#contact-us .sectionTitle::before { content: none; }
#contact-us .sectionTitle::after {
    content: ''; position: absolute; bottom: 0; left: 30%; right: 30%; width: auto; height: 2px; transform: none; border-radius: 0;
    background: linear-gradient(90deg, #d5d0e7 44%, #8476b1 44%, #8476b1 56%, #d5d0e7 56%);
}
#contact-us .sectionTitle .greenText { color: var(--contact-ink); }
#contact-us .sectionTitle > span:last-child { color: var(--contact-muted); }
#contact-us .contactScene__layout {
    display: grid; grid-template-columns: minmax(0, 1.15fr) 320px minmax(0, 1fr);
    align-items: center; gap: 28px; margin-top: 36px;
}
#contact-us .contactScene__action { min-width: 0; }
#contact-us .publicWhatsappContact {
    padding: 20px 0; min-height: 0; gap: 20px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
#contact-us .publicWhatsappContact__icon {
    width: 86px; height: 86px; font-size: 46px;
    background: linear-gradient(145deg, #168548, #087237);
    box-shadow: inset 0 2px 3px #ffffff25, 0 12px 24px #137f4315;
}
#contact-us .publicWhatsappContact h3 { color: var(--contact-ink); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.7; }
#contact-us .publicWhatsappContact p { color: var(--contact-muted); line-height: 1.9; }
#contact-us .publicWhatsappContact .publicWhatsappContact__button {
    min-width: 0; width: 100%; max-width: 350px; min-height: 60px; padding: 14px 20px;
    border-radius: 40px !important; corner-shape: round; background: #128044; border-color: #128044;
    box-shadow: 0 12px 26px #12804420; font-size: 18px; white-space: normal;
}
#contact-us .publicWhatsappContact .publicWhatsappContact__button:hover { background: #096a35; border-color: #096a35; }
#contact-us .contactScene__info { padding: 0; gap: 0; min-width: 0; }
#contact-us .infoWrapper { padding: 28px 0; gap: 20px; background: transparent; box-shadow: none; border-radius: 0 !important; }
#contact-us .infoWrapper + .infoWrapper { border-top: 1px solid #dcd8ed; }
#contact-us .infoWrapper .icon {
    width: 62px; height: 62px; line-height: 62px; background: linear-gradient(145deg, #8374b1, #5c4d8a);
    box-shadow: 0 8px 16px #65538c1a;
}
#contact-us .infoWrapper div:last-child { min-width: 0; gap: 10px; }
#contact-us .infoWrapper div:last-child span:first-child { color: var(--contact-ink); font-size: 23px; }
#contact-us .infoWrapper div:last-child span:last-child { color: var(--contact-muted); line-height: 1.9; overflow-wrap: anywhere; }

/* Separate the floating motion from the handset's fixed perspective. */
.contactPhone { position: relative; width: 320px; max-width: 100%; height: 550px; margin: auto; perspective: 1400px; pointer-events: none; }
.contactPhone, .contactPhone * { box-sizing: border-box; }
.contactPhone__shadow {
    position: absolute; left: 14%; bottom: 17px; width: 72%; height: 22px;
    background: radial-gradient(ellipse, #51407524, #7569940a 48%, transparent 72%);
    filter: blur(9px); opacity: .65; transform: scale(1);
}
.contactPhone__float { position: absolute; inset: 0; transform-style: preserve-3d; }
.contactPhone__device {
    position: absolute; top: 24px; left: calc(50% - 116px); width: 232px; height: 480px; padding: 3px;
    border: 1px solid #f1edf9; border-radius: 39px;
    background: linear-gradient(110deg, #f0edf8 0%, #aaa2b9 8%, #dfdbe8 35%, #b4aabe 75%, #f6f3fa 100%);
    transform: rotateY(-13deg) rotateX(3deg) rotateZ(-6deg); transform-style: preserve-3d;
    box-shadow: -1px 0 0 #82788f, -2px 1px 0 #c8c1d3, -3px 1px 0 #b2a8bf,
        -4px 2px 0 #a298af, -5px 2px 0 #91869e, -6px 3px 0 #71667e,
        -7px 3px 0 #b5aabd, -8px 4px 0 #817589, 1px 0 0 #706778,
        0 2px 3px #30243c12, inset 1px 0 1px #fff, inset -1px 0 1px #fff;
}
.contactPhone__bezel { position: relative; width: 100%; height: 100%; padding: 5px; border-radius: 35px; background: #17161d; box-shadow: inset 0 0 0 1px #39353f; }
.contactPhone__screen {
    position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 30px;
    color: #18251e; background: #efeae2 url('../images/contact-chat-wallpaper.svg') repeat center 99px / 180px 216px; font-family: inherit;
}
.contactPhone__screen::after {
    content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit;
    background: linear-gradient(115deg, #ffffff15, transparent 35%, transparent 68%, #ffffff0d);
    pointer-events: none;
}
.contactPhone__status { position: absolute; top: 15px; left: 15px; right: 12px; display: flex; align-items: center; justify-content: space-between; color: #24202c; font: 600 9px/12px system-ui, sans-serif; }
.contactPhone__status-icons { display: flex; align-items: center; gap: 3px; font-size: 8px; }
.contactPhone__status-icons .fa-battery-full { font-size: 12px; }
.contactPhone__island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 66px; height: 20px; border-radius: 14px; background: #111116; box-shadow: inset 0 0 0 1px #25232c; z-index: 4; }
.contactPhone__camera { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 37% 32%, #586888 0, #203044 23%, #11111d 49%, #292932 70%, #0c0c11 100%); }
.contactPhone__antenna { position: absolute; left: -7px; width: 6px; height: 3px; background: #d8d2dd; box-shadow: 0 1px 0 #5c526a40; }
.contactPhone__antenna--top { top: 47px; }
.contactPhone__antenna--bottom { bottom: 49px; }
.contactPhone__key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #71667f, #c8c0d1 60%, #9b91a7); box-shadow: -1px 0 0 #65586f; }
.contactPhone__key--mute { left: -8px; top: 83px; height: 18px; }
.contactPhone__key--volume { left: -8px; top: 121px; height: 32px; }
.contactPhone__key--volume-down { left: -8px; top: 164px; height: 32px; }
.contactPhone__key--power { right: -3px; top: 131px; height: 48px; }
.contactPhone__header { display: flex; align-items: center; gap: 6px; padding: 49px 10px 12px; background: #fafcfb; border-bottom: 1px solid #d9dfd9; }
.contactPhone__avatar {
    display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 20px;
    background: #128c7e;
}
.contactPhone__identity { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.contactPhone__name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contactPhone__subtitle { color: #78837d; font-size: 8px; line-height: 1.4; }
.contactPhone__back { color: #008069; font-size: 13px; }
.contactPhone__calls { display: flex; gap: 12px; color: #008069; font-size: 11px; }
.contactPhone__conversation { position: relative; height: 268px; margin: 12px 12px 0; }
.contactPhone__date { display: block; width: fit-content; margin: auto; padding: 3px 9px; border-radius: 5px; background: #fffdf3; color: #667268; font-size: 8px; box-shadow: 0 1px 2px #26362c12; }
.contactPhone__bubble { width: fit-content; max-width: 100%; padding: 8px 10px 5px; font-size: 13px; line-height: 1.8; border-radius: 8px; }
.contactPhone__sent { position: absolute; top: 44px; right: 0; transform: translateY(-10px); }
.contactPhone__bubble--sent { position: relative; background: #d9fdd3; box-shadow: 0 1px 2px #26362c1a; border-top-right-radius: 0; }
.contactPhone__bubble--sent::before { content: ''; position: absolute; top: 0; right: -5px; border-top: 7px solid #d9fdd3; border-right: 6px solid transparent; }
.contactPhone__message-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; color: #748078; font: 8px/12px system-ui, sans-serif; }
.contactPhone__read { color: #53bdeb; font-size: 10px; }
.contactPhone__reply {
    position: absolute; top: 132px; left: 0; max-width: 94%; background: #fff;
    border-top-left-radius: 0; box-shadow: 0 1px 2px #26362c1a;
}
.contactPhone__reply::before { content: ''; position: absolute; top: 0; left: -5px; border-top: 7px solid #fff; border-left: 6px solid transparent; }
.contactPhone__typing {
    position: absolute; top: 137px; left: 0; display: flex; gap: 5px; padding: 13px;
    border-radius: 0 8px 8px 8px; background: #fff; opacity: 0; box-shadow: 0 1px 2px #26362c1a;
}
.contactPhone__typing span { width: 5px; height: 5px; border-radius: 50%; background: #89958c; }
.contactPhone__composer {
    position: absolute; bottom: 28px; left: 10px; right: 10px; height: 38px; padding: 4px 6px;
    display: flex; align-items: center; gap: 8px; border: 1px solid #e3e7df; border-radius: 20px;
    background: #fff; box-shadow: 0 1px 2px #26362c12;
}
.contactPhone__send { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #008069; color: #fff; font-size: 12px; }
.contactPhone__input { flex: 1; color: #869087; font-size: 11px; }
.contactPhone__attach { color: #7f8b83; font-size: 16px; }
.contactPhone__home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 76px; height: 3px; border-radius: 4px; background: #24212b; }

/* Only six pixels of travel, with a quieter shadow as the phone rises. */
.contactPhone.is-playing .contactPhone__float { animation: contact-float 5.5s ease-in-out infinite; }
.contactPhone.is-playing .contactPhone__shadow { animation: contact-shadow 5.5s ease-in-out infinite; }
@keyframes contact-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes contact-shadow {
    0%, 100% { transform: scale(1); opacity: .65; }
    50% { transform: scale(1.06); opacity: .45; }
}

/* All tracks share a 7s clock: greeting 0–1, typing 1–2.5,
   reply/shift 2.5–3.5, reading 3.5–6.5, gentle fade 6.5–7. */
.contactPhone.is-playing .contactPhone__sent { animation: contact-sent 7s infinite; }
.contactPhone.is-playing .contactPhone__typing { animation: contact-typing 7s infinite; }
.contactPhone.is-playing .contactPhone__reply { animation: contact-reply 7s infinite; }
.contactPhone.is-playing .contactPhone__typing span { animation: contact-dot 7s infinite; }
.contactPhone.is-playing .contactPhone__typing span:nth-child(2) { animation-delay: .13s; }
.contactPhone.is-playing .contactPhone__typing span:nth-child(3) { animation-delay: .26s; }
@keyframes contact-sent {
    0% { opacity: 0; transform: translateY(18px); }
    14.286%, 35.714% { opacity: 1; transform: translateY(0); }
    50%, 92.857% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes contact-typing {
    0%, 14.286% { opacity: 0; transform: translateY(8px); }
    18%, 33% { opacity: 1; transform: translateY(0); }
    35.714%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes contact-reply {
    0%, 35.714% { opacity: 0; transform: translateY(16px); }
    50%, 92.857% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes contact-dot {
    0%, 14.286%, 22%, 30%, 38%, 100% { transform: translateY(0); }
    18%, 26%, 34% { transform: translateY(-5px); }
}
@media (max-width: 1199px) and (min-width: 992px) {
    #contact-us .contactScene__layout { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 16px; }
    .contactPhone { width: 280px; }
    #contact-us .infoWrapper { gap: 12px; }
}
@media (max-width: 991px) {
    #contact-us .contactScene__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
    #contact-us .contactScene__info { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
    #contact-us .infoWrapper + .infoWrapper { border-top: 0; }
}
@media (max-width: 767px) {
    #contact-us.contactScene { padding: 44px 12px; }
    #contact-us .contactScene__layout { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
    #contact-us .contactScene__action { order: 1; width: 100%; max-width: 440px; }
    #contact-us .contactScene__info { order: 2; display: flex; gap: 0; width: 100%; max-width: 440px; }
    #contact-us .infoWrapper + .infoWrapper { border-top: 1px solid #dcd8ed; }
    #contact-us .sectionTitle .greenText { font-size: 30px !important; }
    #contact-us .sectionTitle::after { left: 15%; right: 15%; }
    #contact-us .publicWhatsappContact { gap: 16px; }
    .contactPhone { width: 280px; height: 475px; }
    .contactPhone__device { transform: scale(.88) rotateY(-13deg) rotateX(3deg) rotateZ(-6deg); transform-origin: center top; }
    .contactPhone__shadow { bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .contactPhone.is-playing .contactPhone__float,
    .contactPhone.is-playing .contactPhone__shadow,
    .contactPhone.is-playing .contactPhone__sent,
    .contactPhone.is-playing .contactPhone__reply,
    .contactPhone.is-playing .contactPhone__typing,
    .contactPhone.is-playing .contactPhone__typing span { animation: none; }
}