.portal-contact-strip { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; padding:5px clamp(12px,3vw,36px); background:#113e53; color:#f6fbff; font-size:.78rem; }
.portal-contact-strip a { text-decoration:underline; }
.navbar { position:sticky; }
.navbar-brand .brand-text strong { color:#133b50; }
.navbar-links { gap:clamp(8px,1vw,18px); }
.navbar-links a { white-space:nowrap; }
.portal-register { display:none; padding:8px 12px; border-radius:10px; background:#08747c; color:white; font-weight:700; white-space:nowrap; }
@media(min-width:730px) { .portal-register { display:inline-flex; } }
.hero { margin-top:0; min-height:clamp(400px,43vw,560px); }
.hero-overlay { background:linear-gradient(to left,#0a3046f5 0%,#0a3046cb 32%,#0a304640 73%); }
[dir=ltr] .hero-overlay { background:linear-gradient(to right,#0a3046f5 0%,#0a3046cb 32%,#0a304640 73%); }
.hero-content { align-items:flex-start; text-align:start; padding:clamp(18px,5vw,64px); padding-block-end:64px; }
.hero-logo { width:70px; height:82px; margin-bottom:8px; }
.hero-title { font-size:clamp(27px,4vw,54px); }
.hero-subtitle { color:#fff2cf; margin-bottom:18px; }
.hero-actions { justify-content:flex-start; }
.hero-actions a { border-radius:10px; padding:10px 16px; }
.hero-actions .btn-hero-primary { color:#1f2930; background:#ffcf68; }
.hero-actions .btn-hero-secondary:last-child { background:#126e79; }
.stats-bar { background:#eef5fa; padding:16px clamp(12px,3vw,36px); }
.stats-inner { max-width:1440px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stat-item { background:#fff; border:1px solid #d9e6f1; border-radius:14px; color:#123b51; padding:14px 8px; box-shadow:0 3px 10px #1d456411; }
.portal-hub { display:grid; grid-template-columns:minmax(230px,1fr) minmax(290px,1.2fr) minmax(220px,.9fr); align-items:start; gap:14px; padding:0 clamp(12px,3vw,36px) 22px; background:#eef5fa; }
.portal-card { background:#fff; color:#163449; border:1px solid #d9e6f1; border-radius:16px; padding:14px; min-width:0; box-shadow:0 5px 14px #1d456411; }
.portal-card h2 { margin:0 0 12px; font-size:clamp(1.05rem,2vw,1.35rem); }
.portal-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.portal-services a { min-height:78px; display:grid; align-content:center; justify-items:center; text-align:center; padding:8px 4px; border-radius:10px; font-size:.8rem; font-weight:800; color:#113c50; background:#dff4f5; }
.portal-services a:nth-child(3n+1) { background:#fff1d5; }
.portal-services a:nth-child(3n+2) { background:#e6efff; }
.portal-services span { font-size:1.35rem; line-height:1.2; }
.portal-services a:hover { box-shadow:inset 0 0 0 2px #138691; }
#news .posts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-height:350px; overflow:auto; }
#news .post-img { height:86px; }
#news .post-body { padding:8px; overflow-wrap:anywhere; }
#news .post-body p { display:none; }
.portal-calendar-controls { display:flex; align-items:center; justify-content:space-between; gap:6px; background:#eaf3fa; border-radius:8px; margin-block-end:8px; }
.portal-calendar-controls button,.portal-calendar-grid button,[data-calendar-events] button { font:inherit; cursor:pointer; color:#123f52; background:transparent; border:0; min-height:36px; border-radius:6px; }
.portal-calendar-controls button { width:40px; font-size:1.3rem; }
.portal-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; text-align:center; font-size:.8rem; }
.portal-calendar-month-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-block:8px 12px; }
.portal-calendar-month-shortcuts button { min-height:44px; padding:5px 3px; border:1px solid #cde0e8; border-radius:8px; background:#edf6f8; color:#16465a; font:800 .75rem/1.35 Cairo,system-ui,sans-serif; cursor:pointer; }
.portal-calendar-month-shortcuts [aria-pressed=true] { background:#13586d; color:white; border-color:#13586d; }
.portal-calendar-month-shortcuts button:focus-visible { outline:2px solid #a96000; outline-offset:2px; }
.portal-academic-year { margin:16px; padding:12px 16px; border:1px solid #cde0e8; border-radius:14px; background:#f2f9fb; color:#123d51; }
.portal-academic-year summary { font-weight:900; cursor:pointer; padding-block:8px; }
.portal-academic-year p { margin-block:8px; }
.portal-academic-summary,.portal-year-months { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr)); gap:10px; }
.portal-academic-summary > div,.portal-year-months > section { padding:10px; border-radius:10px; border:1px solid #cde0e8; background:white; }
.portal-academic-summary bdi { display:block; color:#13586d; font-weight:800; }
.portal-year-months h3 { margin:0 0 8px; }
.portal-year-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; text-align:center; align-items:center; }
.portal-year-days button { border:1px solid transparent; min-height:32px; border-radius:6px; background:#f1f5f9; color:#123d51; font:inherit; cursor:pointer; padding:0; }
.portal-year-days [data-event-kind=holiday] { background:#d8e9ff; color:#123e75; }
.portal-year-days [data-event-kind=exam] { background:#ffe4e5; color:#8b1830; }
.portal-year-days [data-event-kind=activity] { background:#d9f4e6; color:#15563a; }
.portal-year-days [data-event-kind=meeting] { background:#efe5ff; color:#5e297c; }
.portal-year-days [aria-current=date],.portal-year-days button:focus-visible { border-color:#9f6500; outline:1px solid #9f6500; }
.portal-calendar-grid button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:44px; line-height:1.25; }
.portal-calendar-hijri { font-size:.75em; font-weight:500; opacity:.85; }
.portal-calendar-hijri:empty { display:none; }
.portal-calendar-grid strong { overflow-wrap:anywhere; background:#f1f5fa; }
.portal-calendar-grid .has-event { background:#d7f3ee; color:#075e60; font-weight:900; }
.portal-calendar-grid [aria-pressed=true] { background:#13586d; color:#fff; }
[data-calendar-events] { margin-block:8px; max-height:135px; overflow:auto; font-size:.82rem; }
[data-calendar-events] a { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; padding:6px; border-block-end:1px solid #d9e6f1; }
[data-calendar-events] time { direction:ltr; }
.portal-calendar-more { display:block; text-align:center; border-radius:8px; background:#eaf3fa; padding:6px; font-weight:700; }
#services,#school-calendar,#news { scroll-margin-top:85px; }
@media(max-width:1000px) { .portal-hub { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:630px) {
  .hero-overlay,[dir=ltr] .hero-overlay { background:#0a3046c9; }
  .hero-actions { gap:6px; }
  .hero-actions a { padding:8px 10px; }
  .portal-hub { grid-template-columns:minmax(0,1fr); }
  .stats-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Compact public landing composition. */
.hero { min-height:clamp(335px,28vw,435px); }
.hero-content { padding-inline:clamp(26px,7vw,112px); padding-block:28px 56px; }
.hero-badge { margin-bottom:9px; }
.hero-title { margin-bottom:9px; max-width:18ch; }
.hero-overlay { background:linear-gradient(to left,#092b41f5 0%,#0b3249dc 33%,#0b324938 67%,transparent 90%); }
[dir=ltr] .hero-overlay { background:linear-gradient(to right,#092b41f5 0%,#0b3249dc 33%,#0b324938 67%,transparent 90%); }
.hero-dots[hidden],.portal-slide-arrow[hidden] { display:none; }
.portal-slide-arrow { position:absolute; z-index:4; inset-block-start:50%; transform:translateY(-50%); width:42px; height:42px; background:#0f4158dc; color:white; border:1px solid #e8f5ff; border-radius:50%; font:700 27px/1 system-ui; cursor:pointer; }
.portal-slide-pause { position:absolute; z-index:4; inset-block-end:12px; inset-inline-end:clamp(55px,8vw,120px); width:44px; height:44px; border-radius:50%; border:1px solid #e8f5ff; background:#0f4158; color:white; font:700 18px/1 system-ui; cursor:pointer; }
.portal-slide-pause[hidden] { display:none; }
.portal-slide-pause:focus-visible,.drawer-close:focus-visible { outline:3px solid #ffc655; outline-offset:3px; }
.portal-slide-prev { inset-inline-end:12px; }
.portal-slide-next { inset-inline-start:12px; }
[dir=ltr] .portal-slide-arrow { scale:-1 1; }
.stats-bar { position:relative; z-index:5; margin-top:-12px; border-radius:18px 18px 0 0; }
.stat-item { display:grid; align-content:center; min-height:82px; }
.portal-hub { align-items:stretch; }
.portal-card-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.portal-card-heading a { color:#176576; font-size:.77rem; font-weight:800; }
#news .posts-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-auto-rows:minmax(60px,auto); max-height:300px; }
#news .portal-featured-post { grid-row:span 3; }
#news .portal-featured-post .post-img { height:clamp(110px,11vw,174px); }
#news .portal-featured-post .post-body p { display:block; font-size:.8rem; }
#news .post-card:not(.portal-featured-post) .post-img { height:64px; }
.portal-services a:nth-child(4) { background:#e8e7ff; }
.portal-services a:nth-child(5) { background:#fbe6eb; }
@media(max-width:630px) {
  .hero-content { padding-inline:18px; padding-block-end:72px; }
  .hero-overlay,[dir=ltr] .hero-overlay { background:#0a3046d6; }
  .portal-slide-arrow { inset-block-start:auto; inset-block-end:20px; transform:none; width:36px; height:36px; }
}
@media(prefers-reduced-motion:reduce) { .hero-slide { transition:none; } }
.portal-hub { grid-template-columns:minmax(0,1fr); padding-block-end:14px; }
.portal-hub .portal-services { grid-template-columns:repeat(4,minmax(0,1fr)); }
.portal-editions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; background:#eef5fa; padding:0 clamp(12px,3vw,36px) 26px; }
.portal-edition { padding:0 14px 14px; overflow:hidden; background:linear-gradient(145deg,#fff,#ecf8fb); }
.portal-edition > header { margin:0 -14px 14px; padding:18px 18px 14px; color:#fff; background:radial-gradient(ellipse at 15% 90%,#13a3ad 0,transparent 55%),linear-gradient(125deg,#065c70,#093850); border-block-end:3px solid #f2bc4b; }
.portal-edition > header h2 { margin:0; }
.portal-edition > header p { margin:3px 0 0; font-size:.85rem; color:#e9f9ff; }
.portal-calendar-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px; align-items:start; }
.portal-calendar-agenda { background:#fff; padding:8px; border:1px solid #d9e6f1; border-radius:10px; }
.portal-calendar-agenda h3 { margin:0; font-size:.95rem; }
.portal-calendar-controls { background:#086b78; color:#fff; }
.portal-calendar-controls button { color:#fff; }
.portal-news-filters { display:flex; flex-wrap:wrap; gap:6px; margin-block-end:10px; }
.portal-news-filters button { cursor:pointer; font:inherit; font-size:.8rem; font-weight:800; min-height:40px; padding:6px 10px; border:1px solid #bcd5e5; border-radius:8px; background:#eff7fb; color:#173d53; }
.portal-news-filters [aria-pressed=true] { background:#0b6c79; border-color:#0b6c79; color:white; }
#news .posts-grid,#starsGrid,#libraryGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:none; overflow:visible; }
#news .post-card .post-img,#starsGrid .post-img,#libraryGrid .post-img { height:clamp(78px,9vw,144px); }
.portal-edition .post-card { background:#fff; overflow:hidden; border:1px solid #d9e6f1; border-radius:10px; }
.portal-edition .post-body { padding:8px; overflow-wrap:anywhere; }
.portal-edition .post-type { color:#075864; background:#e2f6f5; }
.portal-edition time { font-size:.75rem; }
.portal-parent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-block-end:12px; }
.portal-parent-grid span { display:grid; place-items:center; text-align:center; padding:8px; min-height:54px; border:1px solid #d9e6f1; background:#fff; border-radius:10px; font-weight:800; font-size:.85rem; }
.portal-edition-cta { display:inline-block; background:#f3bd53; color:#123345; border-radius:9px; padding:8px 14px; font-weight:900; }
#contact.cta-section { background:radial-gradient(ellipse at 15% 10%,#10818f 0,transparent 50%),#0c465d; padding-block:clamp(28px,5vw,66px); }
#contact .reg-form { border-radius:18px; }
#parent-services,#school-stars,#library { scroll-margin-top:85px; }
@media(max-width:850px) { .portal-editions { grid-template-columns:minmax(0,1fr); } }
@media(max-width:530px) {
  .portal-hub .portal-services,.portal-parent-grid,#news .posts-grid,#starsGrid,#libraryGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-calendar-layout { grid-template-columns:minmax(0,1fr); }
}
@media(min-width:631px) { .stats-inner { grid-template-columns:repeat(5,minmax(0,1fr)); } }
.portal-reg-panel { border:0; padding:0; margin:0; min-width:0; }
.portal-reg-panel[hidden] { display:none; }
.portal-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.portal-reg-steps { display:flex; list-style:none; gap:8px; padding:0; margin:0 0 14px; }
.portal-reg-steps li { padding:6px 10px; border-radius:8px; background:#edf5fa; color:#123c50; font-weight:700; }
.portal-reg-steps [aria-current=step] { background:#0b6c79; color:white; }
.portal-reg-back { font:inherit; font-weight:700; color:#103f54; background:#e4f1f6; border:0; border-radius:8px; padding:8px 12px; margin-block-end:8px; cursor:pointer; }
#contact { scroll-margin-top:80px; color:#fff; }
#contact > .wrap { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); gap:clamp(20px,5vw,64px); align-items:start; }
#contact .cta-header { margin:0; text-align:start; }
#contact .cta-header h2 { color:#fff; margin-block:8px; }
#contact .cta-header p { margin:0 0 16px; color:#eaf6ff; }
#contact .cta-buttons { justify-content:flex-start; margin:0; gap:8px; }
#contact .cta-buttons a { padding:8px 12px; border-radius:9px; background:#ffffff17; border:1px solid #ffffff65; box-shadow:none; }
#contact .reg-form { min-width:0; width:100%; padding:clamp(14px,3vw,28px); margin:0; background:#fff; color:#163449; border:1px solid #d8e6ef; box-shadow:0 8px 26px #072e4530; }
#contact .reg-form h3 { color:#163449; margin-block-end:12px; }
#contact .form-group { min-width:0; }
#contact .form-group label { color:#243f53; }
#contact .form-group :is(input,select) { width:100%; min-width:0; min-height:44px; color:#143245; background:#f4f8fb; border-color:#b9cedd; }
#contact .form-group :is(input,select):focus { outline:2px solid #0b6c79; outline-offset:2px; }
#contact .form-group select option { background:#fff; color:#143245; }
#contact .submit-btn { color:#222b33; border-radius:10px; min-height:44px; }
#contact .form-msg:empty { display:none; }
#contact .form-msg.ok { color:#11645b; }
#contact .form-msg.err { color:#9b2730; }
.site-footer { background:#102c3d; color:#eef6fa; padding-block:32px 20px; }
.footer-brand img { width:72px; height:84px; object-fit:contain; }
.footer-brand p,.footer-col a,.footer-bottom { color:#c4d9e4; }
.footer-grid { margin-block-end:22px; }
#about,#stages,#contact-us { padding-block:clamp(26px,5vw,52px); }
#about .section-header,#stages .section-header,#contact-us .section-header { margin-block-end:20px; }
#about :is(.vision-card,.about-card),#stages .value-card { border-radius:14px; }
.section:has(.portal-empty) { padding-block:22px; }
.section:has(.portal-empty) .section-header { margin-block-end:10px; }
.portal-empty { grid-column:1/-1; padding:10px; margin:0; text-align:center; color:#4d687b; background:#edf5fa; border-radius:9px; font-size:.86rem; }
@media(max-width:760px) { #contact > .wrap { grid-template-columns:minmax(0,1fr); } }
/* Public identity, admission and support. */
:root { --portal-ink:#102846; --portal-teal:#086b78; --portal-gold:#f4b840; --portal-border:#cadfeb; }
.navbar-brand .brand-text strong { color:var(--portal-ink); }
.hero-badge { border-color:#ffe198; color:#ffe198; }
.hero-subtitle { display:inline-block; padding:5px 12px; background:#ffcc65; color:#102846; border-radius:9px; font-weight:800; }
.stat-item,.portal-services a { box-shadow:0 5px 12px #17466a16; }
#about,#values,#stages,#contact-us { background:radial-gradient(ellipse at 5% 0%,#bdeaf1 0%,transparent 54%),linear-gradient(145deg,#effafd,#fff 66%); }
#about,#contact-us { border-block-start:3px solid #efc253; }
#about .section-title,#values .section-title,#stages .section-title,#contact-us .section-title { color:var(--portal-ink); }
#about .section-title span,#values .section-title span,#stages .section-title span,#contact-us .section-title span { color:#986000; }
#about :is(.vision-card,.about-card),#values .value-card,#stages .value-card,.portal-help-card { background:linear-gradient(155deg,#fff,#eef8fd); border-color:var(--portal-border); box-shadow:0 5px 12px #164d6814; }
.portal-help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-block-end:14px; }
.portal-help-card { display:grid; gap:6px; align-content:start; padding:14px; border:1px solid var(--portal-border); border-radius:12px; color:var(--portal-ink); }
.portal-help-card summary { cursor:pointer; font-weight:800; }
.portal-help-card span,.portal-help-card p { color:#435e73; font-size:.88rem; }
.portal-help-card details a,.portal-help-card > a { color:#085a69; text-decoration:underline; }
#contact.cta-section { background:radial-gradient(ellipse at 8% 12%,#b0e5ef 0,transparent 65%),linear-gradient(125deg,#eaf8ff,#f9fcff); border-block-start:4px solid #efbe50; }
#contact .cta-header h2 { color:var(--portal-ink); }
#contact .cta-header h2 span { color:#986000; }
#contact .cta-header p { color:#284861; }
#contact .cta-buttons a { color:#fff; background:#116774; border-color:#116774; }
.portal-reg-steps { flex-wrap:wrap; }
.portal-reg-steps [aria-current=step] { background:#ffd172; color:#222b33; }
.portal-reg-steps .is-complete { background:#d4f1ee; color:#105361; }
.portal-reg-review { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
.portal-reg-review div { padding:9px; background:#edf6fb; border-radius:8px; overflow-wrap:anywhere; }
.portal-reg-review dt { font-weight:800; font-size:.85rem; }
.portal-reg-review dd { margin:2px 0 0; }
.site-footer { background:linear-gradient(135deg,#063e52,#0b2639); border-block-start:3px solid #efbe50; }
@media(min-width:900px) { .footer-grid { grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); gap:20px; } }
@media(max-width:600px) { .portal-help-grid,.portal-reg-review { grid-template-columns:minmax(0,1fr); } }
.hero-content { z-index:3; max-width:67%; }
.portal-reference-admission { display:block; width:min(100%,400px); height:auto; margin-block:8px 16px; border-radius:14px; overflow:hidden; }
@media(max-width:630px) {
  .hero-content { max-width:none; }
  .hero-dots { inset-inline-start:22%; left:auto; transform:none; }
}
.portal-contact-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; }
.portal-contact-strip a { text-decoration:none; }
.portal-contact-strip a:hover { text-decoration:underline; }
#about > .wrap,#contact-us > .wrap { position:relative; }
#about .section-header,#contact-us .section-header { position:relative; z-index:1; }
#about .vision-grid { gap:16px; }
#about .vision-card { padding:16px; text-align:center; border:1px solid #c1dbe6; box-shadow:0 5px 0 #0d647520,0 9px 18px #123e5310; }
.portal-vision-heading { display:flex; justify-content:center; align-items:center; gap:10px; border-radius:9px; padding:5px; background:#e8f3f7; }
#about .portal-vision-heading :is(h3,.vision-icon) { margin:0; }
#about .vision-card p { margin:10px auto 0; color:#153749; }
#values { padding-block:22px 32px; }
#values .section-header { margin-block-end:16px; }
#valuesGrid { grid-template-columns:repeat(auto-fit,minmax(min(100%,125px),1fr)); gap:10px; }
#valuesGrid .value-card { padding:12px; text-align:center; }
#valuesGrid .value-icon { margin:0 auto 5px; }
#stages .section-title { display:inline-block; border-radius:100px; color:#fff; background:linear-gradient(110deg,#087887,#08425d); padding:4px 28px; }
#stagesGrid .value-card { box-shadow:0 4px 0 #0d647520,0 8px 16px #123e5310; text-align:center; }
#stagesGrid .value-icon { margin-inline:auto; }
.portal-support-art { display:block; width:86px; height:auto; margin:0 auto 8px; border-radius:50%; }
.portal-help-card { text-align:center; justify-items:center; padding:18px 12px; }
.portal-admission-notes { list-style:none; padding:10px 14px; margin:0 0 14px; display:grid; gap:5px; background:#ffffffc9; color:#173c52; border:1px solid #bdd9e6; border-radius:12px; }
.portal-admission-notes li::before { content:"✓"; color:#08736c; font-weight:900; margin-inline-end:7px; }
#stagesGrid { grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); gap:12px; }
#stagesGrid .portal-stage-card { display:grid; grid-template-columns:minmax(0,1fr) clamp(64px,9vw,104px); gap:10px; align-items:center; min-height:110px; padding:12px; text-align:start; }
.portal-stage-copy { min-width:0; overflow-wrap:anywhere; }
.portal-stage-art { width:100%; height:auto; border-radius:12px; }
.portal-demo-banner { padding:8px 12px; text-align:center; background:#ffdf8d; color:#362605; font-weight:800; }
.portal-demo-label { display:inline-block; padding:2px 6px; margin-block-end:6px; background:#fff0cf; color:#694600; border-radius:5px; font-size:.72rem; }

.hero-content .portal-hero-welcome { margin-block-end:clamp(14px,2vw,24px); padding:5px 14px; }
.portal-demo-event { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:6px; border-block-end:1px solid #d9e6f1; }
.portal-calendar-grid [aria-current=date] { outline:2px solid #ac6b00; outline-offset:-2px; box-shadow:inset 0 -3px #efb647; font-weight:900; }
.portal-character { position:relative; align-self:center; }
.portal-character-art { display:block; width:100%; height:auto; }
.portal-character-emblem { position:absolute; top:var(--emblem-top); left:var(--emblem-left); width:var(--emblem-size); height:auto; transform:translate(-50%,-50%); filter:drop-shadow(0 1px 1px #16264138); }
.portal-character-admission { --emblem-top:59%; --emblem-left:56%; --emblem-size:7%; }
.portal-character-kindergarten { --emblem-top:63%; --emblem-left:78%; --emblem-size:7%; }
.portal-character-primary { --emblem-top:61%; --emblem-left:37%; --emblem-size:12%; }
.portal-character-middle { --emblem-top:52%; --emblem-left:58%; --emblem-size:10%; }
.portal-contact-links:has(.portal-social-icon) { gap:6px; }
.portal-social-icon { position:relative; display:inline-grid; place-items:center; width:38px; min-height:38px; color:#fff; border:1px solid #ffffff40; border-radius:8px; background:#ffffff15; }
.portal-social-icon[hidden] { display:none; }
.portal-social-icon svg { width:18px; height:18px; }
.portal-social-icon:hover,.portal-social-icon:focus-visible { background:#207486; }
.portal-social-branch { position:absolute; inset-inline-end:2px; inset-block-end:0; font-size:.65rem; line-height:1; color:#ffdf8e; font-weight:900; }
.portal-identity-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:center; gap:clamp(10px,3vw,36px); margin-block-end:18px; }
#about .portal-identity-intro .section-header { margin:0; text-align:start; }
.portal-identity-art { display:block; width:100%; max-width:420px; height:auto; justify-self:center; }
@media(max-width:620px) {
  .portal-identity-intro { grid-template-columns:minmax(0,1fr); }
  #about .portal-identity-intro .section-header { text-align:center; }
  .portal-identity-art { max-width:260px; }
}
/* Recognition, calendar, and family portal. */
#school-stars { grid-column:1/-1; background:radial-gradient(ellipse at 75% 0%,#d7f5f3,transparent 68%),#fcf9ee; }
.portal-stars-shell { position:relative; }
.portal-stars-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(145px,1fr); gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding:10px 20px 16px; }
.portal-star-card { scroll-snap-align:start; display:grid; justify-items:center; align-content:start; gap:7px; min-width:0; text-align:center; }
.portal-star-frame { display:grid; place-items:center; width:clamp(100px,15vw,160px); aspect-ratio:1; overflow:hidden; border-radius:50%; border:5px double #c08412; background:#fffbef; box-shadow:0 4px 14px #60451130; }
.portal-star-frame img { width:100%; height:100%; object-fit:cover; }
.portal-star-frame .portal-star-placeholder { width:76%; height:76%; object-fit:contain; }
.portal-star-ribbon { display:block; color:#2f2205; background:linear-gradient(135deg,#f6c759,#fff0a5,#e6a32d); border-radius:6px; padding:5px 9px; max-width:100%; overflow-wrap:anywhere; }
.portal-stars-arrow { position:absolute; z-index:1; inset-block-start:40%; min-width:32px; min-height:32px; border-radius:50%; border:1px solid white; background:#086b78; color:white; font:700 20px system-ui; cursor:pointer; }
.portal-stars-arrow[data-stars-step="-1"] { inset-inline-start:0; }
.portal-stars-arrow[data-stars-step="1"] { inset-inline-end:0; }
#school-calendar { grid-column:1/-1; }
.portal-calendar-layout { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(145px,.65fr); }
.portal-calendar-filters { background:#fff; padding:10px; border:1px solid #d9e6f1; border-radius:10px; }
.portal-calendar-filters h3 { font-size:.95rem; margin:0 0 6px; }
.portal-calendar-filters label { display:grid; gap:4px; margin-block:7px; font-size:.82rem; }
.portal-calendar-filters select { width:100%; min-width:0; padding:5px; border:1px solid #b6cfdd; border-radius:7px; font:inherit; background:#f4f9fc; color:#133a52; }
.portal-calendar-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-block:8px; font-size:.78rem; }
[data-event-kind=exam] { --event-color:#fbdde4; }
[data-event-kind=activity] { --event-color:#d9f3e5; }
[data-event-kind=holiday] { --event-color:#dcefff; }
[data-event-kind=meeting] { --event-color:#eee4ff; }
.portal-calendar-legend span,.portal-calendar-grid .has-event { background:var(--event-color,#e5f6f4); border-radius:7px; padding:2px 5px; }
.portal-calendar-grid [aria-pressed=true] { background:#13586d; color:#fff; }
[data-calendar-events] .portal-calendar-event { display:grid; grid-template-columns:auto 1fr; column-gap:8px; background:var(--event-color,#f3f8fb); padding:8px; margin:0 0 5px; border-radius:8px; }
.portal-calendar-event time { grid-column:2; justify-self:start; font-size:.75rem; }
.portal-parent-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:center; gap:10px; }
.portal-parent-art { width:100%; height:auto; align-self:end; }
.portal-parent-grid b { font-size:1.25rem; }
.hero-content { z-index:3; }
.stats-inner { grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr)); }
.stat-item { display:flex; gap:9px; align-items:center; justify-content:center; }
.stat-item[hidden] { display:none; }
.stat-item i { font-style:normal; display:grid; place-items:center; border-radius:50%; width:42px; height:42px; flex-shrink:0; background:#e1f4f7; font-size:1.2rem; }
.stat-item:nth-child(even) i { background:#fff0ce; }
.article-carousel .article-img { width:100%; max-height:520px; object-fit:contain; background:#eaf4f8; }
.article-carousel-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0; }
.article-carousel-controls button { min-height:40px; padding:6px 10px; border:1px solid #b9d6e3; border-radius:8px; font:inherit; color:#123b50; background:#eef7fb; cursor:pointer; }
.portal-character-admission { --emblem-top:66%; --emblem-left:85%; --emblem-size:10%; }
.portal-character-admission .portal-character-emblem { transform:translate(-50%,-50%) skew(-10deg,-3deg); }
@media(max-width:900px) { .portal-calendar-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .portal-calendar-filters { grid-column:1/-1; } }
@media(max-width:630px) {
  .hero-content { padding-block-end:150px; }
  .portal-calendar-layout,.portal-parent-layout { grid-template-columns:minmax(0,1fr); }
  .portal-parent-art { max-width:240px; justify-self:center; }
  .stats-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Place the school crest beside the shortcuts. */
.portal-hero-quick { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,29%); background:linear-gradient(140deg,#fff,#e3f2f6); border-radius:22px 22px 0 0; }
.portal-hero-quick-content { grid-column:1; grid-row:1; min-width:0; }
.portal-hero-quick .stats-bar { margin:0; border-radius:0; background:none; padding:12px 14px 0; }
.portal-hero-quick .portal-hub { margin:0; padding:12px 14px 16px; width:100%; max-width:none; }
.portal-hero-quick #services { background:transparent; box-shadow:none; border:0; padding:0; }
.portal-hero-quick #services h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.portal-hero-quick .portal-services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.portal-hero-quick .portal-services a { display:grid; justify-items:center; text-align:center; padding:9px 4px; background:linear-gradient(145deg,#fff,#edf7fb); box-shadow:0 3px 8px #0b4d6320; }
.portal-hero-description { color:white; max-width:46ch; margin:0 0 14px; }
.portal-social-icon.portal-social-facebook,.portal-social-icon.portal-social-instagram { color:white; border:0; }
.portal-social-icon.portal-social-facebook { background:#1877f2; }
.portal-social-icon.portal-social-instagram { background:radial-gradient(circle at 26% 105%,#feda75 6%,#fa7e1e 24%,#d62976 52%,#962fbf 72%,#4f5bd5 93%); }
.portal-social-icon.portal-social-facebook:hover,.portal-social-icon.portal-social-instagram:hover { color:white; filter:brightness(1.12); }
@media(max-width:780px) {
  .portal-hero-quick { grid-template-columns:minmax(0,1fr) minmax(112px,24%); }
  .portal-hero-quick .portal-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px) {
  .portal-hero-quick { display:flex; flex-direction:column; }
  .portal-hero-quick .portal-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.portal-community { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:1280px; margin:24px auto; padding-inline:clamp(12px,3vw,28px); }
.portal-community .section { padding:clamp(14px,2vw,24px); background:#f5fafc; border:1px solid #dbe6ee; border-radius:18px; min-width:0; }
.portal-community .section .wrap { padding:0; }
.portal-community .section-header { text-align:start; margin-bottom:12px; }
.portal-community .section-title { font-size:clamp(1.15rem,2vw,1.6rem); margin-block:4px; }
.portal-community .eyebrow { display:none; }
.portal-community .section-desc { margin:0; font-size:.86rem; }
.portal-community :is(.values-grid,.testimonials-grid) { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.portal-community :is(.value-card,.testimonial-card,.branch-card) { padding:10px 14px; text-align:start; border-radius:12px; box-shadow:none; }
.portal-community .value-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; align-items:center; }
.portal-community .value-icon { grid-row:span 2; width:36px; height:36px; font-size:16px; margin:0; }
.portal-community .value-card h4,.portal-community .t-stars,.portal-community .t-content { margin:0; }
.portal-community .t-stars { color:#a86400; }
#branches { grid-column:1/-1; }
#branches .branches-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:none; margin:0; }
#branches .branch-icon { width:36px; height:36px; margin-block-end:4px; }
#branches .branch-card h4 { margin-block:4px; }
#school-stars { grid-column:auto; }
#starsGrid.portal-stars-grid { grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr)); overflow:visible; gap:10px; }
#starsGrid .portal-star-frame { max-width:115px; }
.portal-reg-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.portal-reg-steps li { text-align:center; font-size:clamp(.72rem,1.5vw,.94rem); }
.portal-reg-steps li span { display:block; }
.portal-reg-panel h4 { margin-block:0 10px; }
.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; flex:none; }
.contact-card-box { gap:10px; flex-wrap:wrap; }
.contact-actions .contact-action { display:grid; place-items:center; min-width:44px; min-height:44px; border-radius:10px; }
.contact-actions .contact-action svg { width:22px; height:22px; }
.contact-actions .contact-action-whatsapp { color:#fff; background:#147c46; }
.contact-actions .contact-action-call { color:#0d5261; background:#e1f3f5; }
.contact-actions .contact-action:focus-visible { outline:2px solid #c27b08; outline-offset:2px; }
#footerContacts .contact-line { gap:10px; }
@media(max-width:700px) {
  .portal-community { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:420px) {
  .portal-reg-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:780px){
 .portal-hero-quick{display:flex;flex-direction:column}
 .navbar-brand{min-width:0}
 .navbar-brand .brand-text{min-width:0}
 .navbar-brand .brand-text strong{overflow-wrap:normal;word-break:normal;line-height:1.5}
}

/* Unified banner, local brand typography and aligned mobile drawer. */
.navbar-brand .brand-text strong,.hero-title{font-family:Cairo,sans-serif!important;font-weight:900!important}
.navbar-brand .brand-text{gap:7px;line-height:1.45}
.navbar-brand .brand-text span:first-child{margin-block-end:2px;color:#586b79}
.navbar-brand img{width:58px!important;height:66px!important;filter:drop-shadow(0 2px 2px #b3853530)}
.hero .portal-hero-welcome{margin-block:0 24px}
.portal-services a.is-selected,.portal-services a:active{background:#0a7180!important;color:white!important;border-color:#e5b747!important;box-shadow:0 0 0 2px #e5b747!important}
@media(max-width:780px){
.navbar-brand img{width:46px!important;height:54px!important}.navbar-brand .brand-text{gap:6px}
}

.portal-star-frame .portal-star-placeholder{width:100%;height:100%;object-fit:cover;object-position:center 27%}

/* Full-width school photography with a readable text overlay. */
.hero .hero-slides { position:absolute; inset:0; }
.hero .hero-slide { background-size:cover; background-position:center 38%; background-repeat:no-repeat; }
.hero .hero-content { width:100%; margin-inline-start:0; padding-inline:clamp(48px,5vw,96px); }
.navbar-links a { border-radius:10px; padding:9px 8px; }
.navbar-links a.is-selected, .drawer-nav a.is-selected { background:#124f61; color:#fff; }
@media(max-width:780px) {
  .hero .hero-content { max-width:none; padding-inline:clamp(22px,8vw,48px); }
  .hero .portal-slide-arrow { top:auto; bottom:12px; }
}

/* Anchor the drawer to the menu button's actual side. */
html .drawer-panel {
  inset:0 auto 0 0!important;
  width:min(300px, calc(100% - 24px));
  box-sizing:border-box;
  visibility:hidden;
  pointer-events:none;
  transition:none;
  --drawer-entry:-100%;
}
html .drawer-panel[data-side="right"] {
  inset:0 0 0 auto!important;
  --drawer-entry:100%;
}
html .drawer-panel.open {
  visibility:visible;
  pointer-events:auto;
  animation:drawer-enter .22s ease-out both;
}
@keyframes drawer-enter {
  from { transform:translateX(var(--drawer-entry)); }
  to { transform:translateX(0); }
}
@media(prefers-reduced-motion:reduce) {
  html .drawer-panel.open { animation:none; }
}
@media (max-width:1279px), (orientation:portrait) {
  .navbar .navbar-actions { order:-1; }
  .navbar .btn-menu { order:-1; }
}

/* Remove both layers from rendering as soon as the menu closes. */
html .drawer-panel:not(.open),
html .drawer-overlay:not(.open) { display:none; }

/* Leave clear space for the carousel controls on tablet and phone. */
@media (max-width:1100px) {
  .hero .hero-content { padding-inline:clamp(24px,5vw,56px); padding-block-end:76px; }
  .hero .portal-slide-arrow { inset-block-start:auto; inset-block-end:14px; transform:none; }
  .navbar-brand .brand-text strong { line-height:1.4; }
}

/* Floating school crest in the former portrait slot. */
.portal-logo-stage {
  grid-column:2; grid-row:1; position:relative; z-index:2; isolation:isolate;
  align-self:center; justify-self:center; display:grid; place-items:center;
  width:min(90%,370px); min-height:clamp(235px,22vw,300px); margin-block:12px 20px;
}
.portal-logo-plaque {
  position:absolute; inset:14px 8px; border-radius:26px; transform:rotate(-3deg);
  background:radial-gradient(ellipse at 50% 38%,#165262,#103249 57%,#0a2136);
  box-shadow:0 24px 40px #081a3890,inset 0 0 0 1px #70b1bb57;
}
.portal-logo-ring {
  position:absolute; width:min(69%,245px); aspect-ratio:1; border:1px solid #78d8d644;
  border-radius:50%; box-shadow:0 0 0 13px #78d8d612,0 0 0 26px #78d8d608;
}
.portal-logo-shadow {
  position:absolute; inset-block-end:40px; width:52%; height:18px;
  border-radius:50%; background:#020c1d9e; filter:blur(12px);
  animation:portal-logo-shadow 6s ease-in-out infinite;
}
.portal-logo-scene { position:relative; width:min(51%,176px); aspect-ratio:590/694; perspective:880px; }
.portal-logo-float {
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:portal-logo-float 6s ease-in-out infinite;
}
.portal-logo-float img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.portal-logo-edge { transform:translateZ(var(--depth)); filter:brightness(.51) saturate(.87); }
.portal-logo-face { filter:drop-shadow(0 0 1px #ffe7a7aa) brightness(1.12); }
.portal-logo-spark {
  position:absolute; inset-inline-start:13%; inset-block-start:23%; width:9px; aspect-ratio:1;
  border-radius:50%; background:#ffd074; box-shadow:0 0 16px #ffd074;
  animation:portal-logo-spark 4s ease-in-out infinite;
}
.portal-logo-spark + .portal-logo-spark {
  inset-inline:auto 12%; inset-block-start:74%; width:6px;
  background:#70dbda; box-shadow:0 0 16px #70dbda; animation-delay:-1.4s;
}
.portal-logo-stage:not([data-motion=on]) * { animation:none; }
@keyframes portal-logo-float {
  0%,100% { transform:translateY(3px) rotateX(4deg) rotateY(-13deg) rotateZ(-1.5deg); }
  50% { transform:translateY(-13px) rotateX(-5deg) rotateY(13deg) rotateZ(1.5deg); }
}
@keyframes portal-logo-shadow { 50% { transform:scaleX(.79); opacity:.55; } }
@keyframes portal-logo-spark { 50% { transform:translateY(-11px); opacity:.65; } }
@media (max-width:780px) {
  .portal-logo-stage { order:1; width:min(78%,300px); min-height:238px; margin-block:2px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .portal-logo-stage * { animation:none; }
}


:is(#valuesGrid,#whyUsGrid) .value-card { min-width:0; overflow-wrap:anywhere; }