.contact-page { --focus: var(--text); }
.contact-page .primary-nav a[aria-current]::after { transform: scaleX(1); }
.contact-main { overflow: clip; }
.contact-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:44% minmax(0,1fr); padding:195px 0 45px; }
.contact-map-stage { position:relative; grid-column:2; grid-row:1; height:470px; min-width:0; z-index:0; overflow:hidden; }
#contact-map { width: 100%; height: 100%; background: var(--page); }
.map-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--page) 0%, rgba(var(--page-rgb),.98) 23%, rgba(var(--page-rgb),.9) 34%, rgba(var(--page-rgb),.28) 55%, transparent 73%), linear-gradient(180deg, var(--page) 0%, rgba(var(--page-rgb),.86) 14%, transparent 33%, transparent 54%, rgba(var(--page-rgb),.9) 81%, var(--page) 100%); }
.contact-hero-content { display:contents; }
.contact-intro { grid-column:1; grid-row:1 / 5; min-width:0; margin:55px 25px 0 var(--gutter); pointer-events:auto; }
.contact-intro h1 { font-size: clamp(70px, 7.7vw, 110px); line-height: 1.05; font-weight: 500; letter-spacing: -.045em; }
.contact-person { margin-top: 42px; font: 400 25px/1.3 Urbanist, Arial, sans-serif; color: var(--muted); }
.contact-phone { display: inline-flex; align-items: center; gap: 18px; margin-top: 14px; font: 400 clamp(28px, 2.75vw, 38px)/1.35 Urbanist, Arial, sans-serif; letter-spacing: -.02em; border-radius: 5px; }
.contact-action-icon { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background .2s,color .2s; }
.contact-phone:hover .contact-action-icon { background: var(--text); color: var(--page); }
.contact-phone-row { margin-top: 20px; }
.phone-caption { display: block; font-size: 13px; color: var(--subtle); }
.contact-phone-row .contact-phone { margin-top: 5px; }
.contact-office-phone { font-size: clamp(25px,2.2vw,31px); }
.contact-action-icon svg { width: 26px; height: 26px; transform: rotate(-40deg); }
.contact-email { display: flex; align-items: center; gap: 13px; width: fit-content; max-width: 100%; margin-top: 21px; font-size: clamp(16px, 1.55vw, 21px); overflow-wrap: anywhere; border-radius: 4px; }
.contact-email svg { width: 22px; height: 22px; flex: 0 0 auto; transform: rotate(-40deg); }
.contact-email:hover { text-decoration: underline; text-underline-offset: 6px; }
.contact-write { display: inline-flex; align-items: center; gap: 24px; margin-top: 64px; font: 500 21px/1.5 Urbanist,Arial,sans-serif; border-radius: 4px; }
.contact-write svg { width: 22px; height: 22px; transition: transform .2s; }
.contact-write:hover svg { transform: translateY(4px); }
.contact-location { position:relative; grid-column:2; grid-row:2; margin:24px var(--gutter) 0 38px; min-width:0; pointer-events:auto; }
.location-eyebrow { color: var(--subtle); font-size: 14px; margin-bottom: 10px; }
.contact-location h2 { font-size: 29px; line-height: 1.25; font-weight: 500; margin-bottom: 12px; }
.contact-location address { font-size: 15px; font-style: normal; color: var(--muted); line-height: 1.75; }
.location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 22px; }
.directions-link { display: inline-flex; align-items: center; gap: 18px; font: 500 22px/1.2 Urbanist,Arial,sans-serif; padding-block: 9px; border-radius: 4px; }
.directions-link svg { width: 25px; height: 25px; transform: rotate(-40deg); transition: transform .2s; }
.directions-link:hover svg { transform: rotate(-40deg) translateX(4px); }
.copy-address { border: 0; padding: 11px 0; background: none; color: var(--muted); font-size: 14px; border-radius: 4px; }
.copy-address:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.copy-status { position: absolute; bottom: -24px; font-size: 13px; color: var(--muted); }
.map-tools { position:absolute; right:20px; bottom:25px; display:flex; flex-direction:column; padding:3px; border:1px solid var(--line); border-radius:28px; background:var(--surface); z-index:6; }
.map-tools button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; }
.map-tools button:hover { background: var(--field-hover); }
.map-tools svg { width: 21px; height: 21px; }
.map-hint { grid-column:2; grid-row:3; margin:24px var(--gutter) 0 38px; color:var(--subtle); font-size:12px; }
.map-credits { grid-column:2; grid-row:4; margin:10px var(--gutter) 0 38px; color:var(--subtle); font:11px/1.5 Inter,Arial,sans-serif; }
.map-credits a { border-radius: 2px; text-decoration: underline; text-underline-offset: 3px; }
.map-loading { position:absolute; left:12%; top:43%; width:76%; color:var(--muted); font-size:15px; text-align:center; }
.map-no-script { position:absolute; left:12%; top:35%; width:76%; color:var(--muted); font-size:16px; text-align:center; }
.map-retry { position:absolute; z-index:7; left:50%; top:64%; transform:translateX(-50%); min-height:44px; padding:10px 18px; border:1px solid var(--line); border-radius:24px; color:var(--text); background:var(--page); }
#contact-map[data-map-state='unavailable'] .maplibregl-marker { visibility:hidden; }
.contact-map-marker { display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: Urbanist,Arial,sans-serif; color: var(--text); pointer-events: none; }
.map-pin-label { display: block; padding: 10px 17px; font-size: 20px; font-weight: 500; white-space: nowrap; border-radius: 14px; color: var(--text); background: var(--page); border: 1px solid var(--line); box-shadow: 0 6px 24px #0002; }
.map-pin-dot { display: block; width: 17px; height: 17px; border: 4px solid var(--page); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1px var(--text),0 0 0 8px rgba(var(--page-rgb),.4); }
.contact-inquiry { margin-top: 42px; padding-top: 35px; padding-bottom: 20px; }
.contact-page .site-footer { padding-top: 82px; padding-bottom: 65px; }
.contact-page .maplibregl-canvas:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.contact-page .maplibregl-cooperative-gesture-screen { background: rgba(var(--page-rgb),.85); color: var(--text); font-family: Inter,Arial,sans-serif; }
.map-shade { display: none; }
.contact-page .maplibregl-canvas { mask-image:linear-gradient(90deg,transparent,#000 7%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent); mask-composite:intersect; }
.contact-map-marker { z-index: 2; }
.transit-marker { z-index: 3; border: 1px solid var(--line); color: var(--text); background: var(--page); padding: 9px 12px; min-height: 38px; border-radius: 12px; white-space: nowrap; font: 500 13px/1.35 Inter,Arial,sans-serif; box-shadow: 0 4px 16px #0002; }
.transit-marker:hover,.transit-marker[aria-expanded="true"] { color: var(--page); background: var(--text); }
.transit-marker::after { content: ''; position: absolute; width: 7px; height: 7px; background: var(--text); border: 2px solid var(--page); border-radius: 50%; }
.transit-left::after { right: -6px; bottom: -6px; }
.transit-right::after { left: -6px; bottom: -6px; }
.transit-bottom::after { top: -6px; left: calc(50% - 4px); }
.transit-metrobus::after { left: auto; right: -4px; }
.transit-metro::after { left: auto; right: -4px; }
.transit-metro { font-weight: 600; }
.contact-page .maplibregl-popup { z-index: 5; }
.contact-page .maplibregl-popup-content { color: var(--text); background: var(--page); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 16px 40px #0004; font-family: Inter,Arial,sans-serif; }
.contact-page .maplibregl-popup-close-button { color: var(--text); font-size: 25px; width: 38px; height: 38px; right: 5px; top: 3px; border-radius: 50%; }
.contact-page .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--page); }
.contact-page .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--page); }
.transit-type,.transit-caption,.transit-note { color: var(--muted); font-size: 12px; line-height: 1.55; }
.transit-type { padding-right: 17px; }
.transit-title { font: 500 23px/1.2 Urbanist,Arial,sans-serif; margin-top: 7px; }
.transit-direction { margin: 7px 0 15px; font-size: 13px; }
.transit-routes { padding: 0; list-style: none; margin: 12px 0; display: grid; gap: 12px; }
.transit-route { display: grid; grid-template-columns: 44px 1fr; gap: 10px; }
.transit-code { align-self: start; background: var(--field); border-radius: 6px; padding: 3px; text-align: center; font-size: 12px; }
.transit-route-name { font-size: 12px; line-height: 1.5; }
.transit-source { display: block; margin-top: 16px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.contact-transit-hint { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 12px; }
@media(max-width:1100px) and (min-width:761px) {
  .contact-intro h1 { font-size: 76px; }
  .contact-phone { font-size: 27px; gap: 10px; }
  .contact-action-icon { width: 37px; height: 37px; }
  .contact-email { font-size: 16px; }
  .contact-location address { font-size: 14px; }
  .contact-inquiry { gap: 35px; }
}
@media(max-width:1100px) {
  .contact-hero { min-height:0; padding:191px 0 60px; display:flex; flex-direction:column; }
  .contact-hero-content { display: contents; }
  .contact-intro { order:0; width:calc(100% - var(--gutter)*2); max-width:none; margin:0 auto; padding:0; }
  .contact-intro h1 { font-size: clamp(60px,14vw,88px); }
  .contact-person { margin-top: 27px; font-size: 22px; }
  .contact-phone { font-size: clamp(27px,6vw,36px); gap: 13px; }
  .contact-action-icon { width: 38px; height: 38px; }
  .contact-email { font-size: clamp(15px,3.8vw,20px); margin-top: 17px; gap: 8px; }
  .contact-email svg { width: 18px; height: 18px; }
  .contact-write { margin-top: 29px; font-size: 20px; }
  .contact-map-stage { position:relative; order:1; inset:auto; height:470px; margin-top:28px; z-index:0; }
  .map-shade { background: linear-gradient(180deg,var(--page) 0%,rgba(var(--page-rgb),.1) 22%,transparent 45%,rgba(var(--page-rgb),.22) 72%,var(--page) 100%); }
  .contact-location { order:2; position:relative; width:calc(100% - var(--gutter)*2); margin:28px auto 0; }
  .contact-location h2 { font-size: 28px; }
  .contact-location address { font-size: 15px; }
  .map-tools { top: auto; bottom: 15px; right: var(--gutter); z-index: 6; }
  .map-loading,.map-no-script { top: 38%; left: var(--gutter); width: calc(100% - var(--gutter)*2); max-width: none; text-align: center; }
  .map-hint { position: static; order: 3; max-width: none; margin: 36px var(--gutter) 0; font-size: 11px; }
  .map-credits { position: static; order: 4; margin: 10px var(--gutter) 0; font-size: 10px; }
  .contact-inquiry { margin-top: 0; padding-top: 10px; gap: 32px; }
  .map-pin-label { font-size: 19px; }
  .transit-marker { font-size: 11px; padding: 7px 8px; }
  .transit-bottom { max-width: 145px; white-space: normal; text-align: left; }
  .contact-page .maplibregl-canvas { mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent); mask-composite:add; }
}
@media(prefers-reduced-motion:reduce) {
  .contact-page *, .contact-page *::before, .contact-page *::after { scroll-behavior: auto; transition: none !important; }
}
.transit-marker { display:flex; align-items:center; gap:8px; }
.transit-symbol { display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:29px; min-height:29px; }
.transit-provider-icon { width:22px; height:28px; object-fit:contain; }
html[data-theme='dark'] .transit-provider-icon { filter:brightness(0) invert(1); }
.transit-line-badge { display:grid; place-items:center; width:32px; height:28px; background:#c52734; color:white; font:700 11px/1 Inter,Arial,sans-serif; border-radius:8px; }
.transit-label { white-space:normal; }
.transit-marker:hover .transit-provider-icon,.transit-marker[aria-expanded='true'] .transit-provider-icon { filter:brightness(0) invert(1); }
html[data-theme='dark'] .transit-marker:hover .transit-provider-icon,html[data-theme='dark'] .transit-marker[aria-expanded='true'] .transit-provider-icon { filter:brightness(0); }
.contact-page .maplibregl-popup-content { max-height:300px; overflow-y:auto; }
@media(max-width:760px){
 .transit-symbol { width:23px; min-height:24px; }
 .transit-provider-icon { width:18px; height:24px; }
 .transit-line-badge { width:27px; height:24px; font-size:10px; }
 .transit-marker { gap:5px; max-width:155px; }
 .contact-map-stage { height:470px; }
 .contact-page .maplibregl-popup-content { max-height:300px; }
}
/* Semantic zoom: location transforms remain solely owned by MapLibre. */
.contact-map-marker { z-index:4; }
.school-pin-visual { display:flex; flex-direction:column; align-items:center; gap:10px; transform:scale(var(--school-scale,1)); transform-origin:center bottom; }
.contact-map-marker .map-pin-label { display:flex; align-items:center; gap:11px; padding:9px 17px 9px 9px; border-radius:18px; background:var(--text); color:var(--page); border:1px solid var(--page); box-shadow:0 8px 24px #0003; }
.school-pin-emblem { width:40px; height:40px; object-fit:cover; object-position:left center; background:#f7f3eb; border-radius:10px; padding:4px; box-sizing:content-box; }
.school-pin-name { font-weight:600; }
.contact-map-marker .map-pin-dot { background:#c3212e; box-shadow:0 0 0 1px var(--text),0 0 0 6px rgba(var(--page-rgb),.4); }
.transit-marker { --marker-font:13px; --marker-pad-y:9px; --marker-pad-x:12px; font-size:calc(var(--marker-font)*var(--transit-scale,1)); padding:calc(var(--marker-pad-y)*var(--transit-scale,1)) calc(var(--marker-pad-x)*var(--transit-scale,1)); gap:calc(8px*var(--transit-scale,1)); min-height:calc(38px*var(--transit-scale,1)); }
.transit-symbol { width:calc(29px*var(--transit-scale,1)); min-height:calc(29px*var(--transit-scale,1)); }
.transit-provider-icon { width:calc(22px*var(--transit-scale,1)); height:calc(28px*var(--transit-scale,1)); }
.transit-line-badge { width:calc(32px*var(--transit-scale,1)); height:calc(28px*var(--transit-scale,1)); font-size:calc(11px*var(--transit-scale,1)); }
[data-marker-detail='compact'] .transit-label { display:none; }
[data-marker-detail='compact'] .transit-marker { min-width:32px; min-height:32px; justify-content:center; }
.transit-marker[hidden],.transit-cluster[hidden] { display:none!important; }
.transit-cluster { z-index:3; display:flex; align-items:center; gap:7px; padding:5px 10px 5px 5px; min-height:36px; color:var(--text); background:var(--page); border:1px solid var(--line); border-radius:20px; box-shadow:0 3px 12px #0002; font:500 12px/1.3 Inter,Arial,sans-serif; }
.transit-cluster-count { display:grid; place-items:center; min-width:26px; height:26px; border-radius:50%; background:var(--field); font-weight:600; }
.transit-cluster:hover { background:var(--text); color:var(--page); }
.transit-cluster:hover .transit-cluster-count { background:var(--page); color:var(--text); }
@media(max-width:760px){
 .transit-marker { --marker-font:11px; --marker-pad-y:7px; --marker-pad-x:8px; gap:calc(5px*var(--transit-scale,1)); }
 .school-pin-emblem { width:33px; height:36px; }
 .contact-map-marker .map-pin-label { font-size:18px; }
}