/* Parent / Student programs — matching the supplied 1536×1024 reference. */
:root { --navy:#061958; --text:#071a56; --electric:#00a9ee; --cyan:#19c1f3; --gold:#f8c31e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text); background:#d6f8ff; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:4px solid #f7c526; outline-offset:3px; }
[hidden] { display:none !important; }
.program-landing { position:relative; isolation:isolate; min-height:100vh; padding:83px clamp(12px,1.55vw,28px) 176px; overflow:hidden; background:#d4f8ff url('assets/parent-waves.jpg') center top / 100% 100% no-repeat; }
.brand-heading { text-align:center; position:relative; z-index:1; }
.brand-heading h1 { margin:0; color:#071959; font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:clamp(43px,7.15vw,112px); letter-spacing:-.05em; line-height:1.18; }
.motto { margin:7px auto 0; display:flex; align-items:center; justify-content:center; gap:clamp(9px,1.42vw,24px); font-weight:800; font-size:clamp(10px,1.96vw,30px); letter-spacing:.21em; white-space:nowrap; }
.motto b { font-weight:800; color:var(--gold); font-size:1.35em; line-height:.5; letter-spacing:0; }
.motto-line { display:inline-block; background:#f5c122; height:4px; width:clamp(25px,7vw,108px); border-radius:5px; }
.program-grid { position:relative; z-index:1; margin:37px auto 0; max-width:1560px; display:grid; grid-template-columns:1.06fr 1fr .97fr 1.04fr 1fr; align-items:start; gap:11px; }
.program-column { min-width:0; }
.category-title { height:155px; margin:0 0 8px; padding:19px 9px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:17px; color:#fff; text-align:center; background:linear-gradient(112deg,#06386f 0%,#005eab 49%,#04b1fa 100%); box-shadow:0px 4px 10px rgba(0,86,174,.23), inset 0 1px 1px rgba(255,255,255,.33); font-family:Impact,'Arial Narrow','Roboto Condensed',Arial,sans-serif; font-stretch:condensed; font-size:clamp(20px,2.15vw,35px); font-weight:800; letter-spacing:-.6px; line-height:1.21; }
.category-title i { margin-top:18px; width:105px; height:4px; max-width:60%; background:#f8c321; border-radius:4px; }
.option-list { display:grid; gap:8px; }
.offering { min-width:0; }
.option-button { width:100%; min-height:98px; position:relative; padding:12px 15px; display:flex; justify-content:center; align-items:center; cursor:pointer; color:#071b5a; text-align:center; border:1.5px solid #25b6ec; border-radius:17px; background:rgba(233,249,255,.82); box-shadow:0 6px 10px rgba(0,90,145,.15),inset 0 1px 1px rgba(255,255,255,.9); font-family:'Arial Narrow','Roboto Condensed','Arial',sans-serif; font-size:clamp(16px,1.97vw,30px); font-stretch:condensed; font-weight:800; line-height:1.16; letter-spacing:-.7px; transition:background .16s,box-shadow .16s,border-color .16s; }
.option-button:hover { background:#fff; border-color:#0379ca; box-shadow:0 9px 17px rgba(1,81,158,.2); }
.option-button[aria-expanded="true"] { background:#fff; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-color:#0078bf; }
.option-chevron { position:absolute; right:9px; bottom:6px; color:#087cad; font-size:14px; opacity:0; transition:transform .18s; }
.option-button:hover .option-chevron,.option-button:focus-visible .option-chevron,.option-button[aria-expanded="true"] .option-chevron { opacity:1; }
.option-button[aria-expanded="true"] .option-chevron { transform:rotate(180deg); }
.workshops .option-button { min-height:80px; }
.option-details { border:1px solid #6acbef; border-top:0; border-radius:0 0 14px 14px; background:rgba(255,255,255,.97); box-shadow:0 8px 14px rgba(9,62,107,.15); padding:17px 16px 18px; margin:-1px 0 3px; color:#243e5e; font:400 14px/1.52 Arial,Helvetica,sans-serif; }
.option-details p { margin:0 0 10px; }
.option-details .detail-note { font-size:12px; color:#62718b; }
.detail-contact { display:inline-block; font-weight:750; text-decoration:none; color:#0079bc; padding-top:3px; }
.detail-contact:hover { text-decoration:underline; }
.program-footer { text-align:center; background:#eafaff; padding:25px 18px 33px; font-size:14px; line-height:1.55; color:#4c6385; }
.program-footer p { margin:0 auto 14px; max-width:800px; }
.home-link,.phone-link { color:#075690; font-weight:700; display:inline-block; padding:8px 14px; }
@media(max-width:1150px) { .program-landing { padding-top:77px; } .category-title { height:132px; font-size:clamp(18px,2.25vw,27px); } .option-button { min-height:84px; padding:9px; font-size:clamp(15px,2.0vw,24px); } .workshops .option-button { min-height:73px; } }
@media(max-width:760px) { .program-landing { min-height:100vh; padding:60px 16px 90px; background-size:cover; } .brand-heading h1 { font-size:clamp(40px,8.1vw,66px); letter-spacing:-.055em; } .motto { margin-top:13px; gap:8px; font-size:clamp(9px,2.2vw,13px); letter-spacing:.12em; } .motto-line { height:3px; width:clamp(10px,4vw,28px); } .program-grid { max-width:610px; display:grid; grid-template-columns:1fr; margin-top:37px; gap:22px; } .category-title { height:auto; min-height:105px; font-size:30px; line-height:1.2; margin-bottom:9px; } .category-title i { margin-top:12px; width:82px; } .option-list { gap:8px; } .option-button, .workshops .option-button { font-size:23px; min-height:72px; } .option-chevron { opacity:.7; } .option-details { font-size:15px; } }
@media(min-width:761px) and (max-width:950px) { .program-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:820px; } .category-title { height:120px; } .program-landing { background-size:cover; padding-bottom:110px; } .option-button { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }