/* v4.27.51 — the document itself must never become horizontally scrollable.
 * Components that need a horizontal track keep that overflow inside their
 * own bounded container instead of moving the whole page. */
html,body{overflow-x:clip}

:root{--p:#00566A;--s:#F59E18;--pHover:#004654;--sHover:#DF8A0C;--onP:#fff;--onS:#1A1A1A;--ink:#1A1A1A;--heading:#122D3A;--muted:#5F6B74;--bg:#fff;--alt:#F7F9FA;--surface:#fff;--border:#E4EAED;--subtle:#EEF3F4;--fontScale:1;--content:1170px;--radius:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth;font-size:calc(14px * var(--fontScale))}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,system-ui,sans-serif;font-size:1rem;line-height:1.5}body.no-scroll{overflow:hidden}[hidden]{display:none!important}img{display:block;max-width:100%}svg{display:inline-block;vertical-align:middle;flex-shrink:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}p{margin:0 0 14px;line-height:1.5}h1,h2,h3,h4{margin:0;color:var(--heading);font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;letter-spacing:-.035em;line-height:1.36}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}small,.small{font-size:12px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--s);outline-offset:3px}.container{width:min(calc(100% - 40px),var(--content));margin-inline:auto}.section{padding:64px 0}.section.alt{background:var(--alt)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.45;letter-spacing:.075em;font-weight:800;text-transform:uppercase;color:var(--p);margin-bottom:11px}.eyebrow .bar{width:19px;height:2px;background:var(--s)}.section-heading p,.section-lead{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:550px}.arrow-link{color:var(--p);font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.arrow-link:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:9px;padding:10px 17px;min-height:40px;font-size:12px;font-weight:800;text-align:center;transition:background .15s,border-color .15s,color .15s;line-height:1.4}.btn.primary{background:var(--p);color:var(--onP)}.btn.primary:hover{background:var(--pHover)}.btn.secondary{background:var(--s);color:var(--onS);border-color:var(--s)}.btn.secondary:hover{background:var(--sHover);border-color:var(--sHover)}.btn.outline{border-color:#CCD7DB;background:transparent;color:var(--heading)}.btn.outline:hover{background:var(--alt)}.btn.light{background:#fff;color:var(--p)}.btn.ghost-light{border-color:#A6C5CB;color:#fff;background:transparent}.btn.ghost-light:hover{background:rgba(255,255,255,.12)}
/* header: no shadows, no gradients */
.skip{position:absolute;left:12px;top:-60px;z-index:10000;padding:10px 14px;background:var(--p);color:#fff}.skip:focus{top:8px}.topbar{background:var(--p);color:#fff;font-size:10.5px}.topbar .container{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar-list,.socials{display:flex;align-items:center;gap:17px}.topbar-list a,.topbar-list span{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}.topbar-list svg{color:var(--s)}.socials{gap:15px}.socials a:hover{color:var(--s)}.header{background:var(--surface);border-bottom:3px solid var(--s);position:sticky;top:0;z-index:90}.header-inner{height:75px;display:flex;align-items:center;gap:19px}.brand{display:flex;align-items:center;gap:10px;min-width:248px}.brand img{width:42px;height:42px;object-fit:contain;border-radius:11px}.brand strong{display:block;color:var(--heading);font-size:13px;font-weight:800;letter-spacing:-.03em;line-height:1.25;text-transform:uppercase}.brand small{display:block;font-size:10px;color:var(--p);font-weight:800;letter-spacing:.06em;margin-top:3px}.nav{display:flex;align-items:center;gap:6px;margin-left:auto}.nav-home,.nav-link{display:inline-flex;align-items:center;gap:7px;min-height:39px;padding:10px 8px;background:transparent;border:0;border-radius:7px;color:var(--heading);font-size:11.5px;font-weight:700}.nav-home:hover,.nav-link:hover{color:var(--heading);background:transparent}.nav-home.current,.nav-link.current{color:var(--heading);background:transparent}.nav-group{position:relative}.chevron{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin:0 4px 3px 2px;transition:transform .15s}.nav-group.open .chevron{transform:rotate(225deg) translateY(-1px)}.subnav{position:absolute;z-index:111;left:0;top:calc(100% + 7px);width:215px;display:none;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--s);border-radius:0 0 10px 10px;padding:7px;box-shadow:0 12px 35px #172b3215}.nav-group.open .subnav,.nav-group:focus-within .subnav{display:block}.subnav a{display:block;padding:10px 12px;color:var(--heading);font-size:12px;font-weight:600;border-radius:6px}.subnav a:hover{color:var(--p);background:var(--alt)}.header-tools{display:flex;align-items:center;gap:6px;margin-left:12px}.iconbtn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--heading)}.iconbtn:hover{background:var(--alt);color:var(--p)}.header-cta{margin-left:5px;border-radius:22px!important;white-space:nowrap}.hamburger{display:none}.mobile-nav{display:none}.mobile-nav a,.mobile-nav button{display:block;width:100%;padding:13px 2px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--heading);text-align:left;font-weight:700;font-size:13px}.mobile-sub{padding-left:16px}.mobile-sub a{font-weight:500;font-size:12px}.mobile-head{display:flex;justify-content:space-between;align-items:center}
/* compact balanced hero */
.hero{background:var(--p);color:#fff;overflow:hidden}.hero-inner{min-height:405px;display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center;padding-top:35px;padding-bottom:35px}.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:10.5px;border:1px solid #87ADB5;border-radius:12px;padding:6px 11px;color:#fff;margin-bottom:14px}.hero-kicker:before{display:none}.hero h1{color:#fff;font-size:34px;line-height:1.27;letter-spacing:-.05em;max-width:510px;margin:4px 0 16px}.hero h1 em{font-style:normal;color:var(--s)}.hero p{font-size:13px;line-height:1.6;max-width:480px;color:#E8F0F2;margin-bottom:24px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-art{display:flex;justify-content:flex-end;align-items:center;min-width:0}.art-frame{position:relative;width:min(100%,375px);aspect-ratio:1.15/1;overflow:hidden;border-radius:20px;background:#DCECF1;border:5px solid #fff}.art-frame img{width:100%;height:100%;object-fit:cover}.hero-mini-tag{position:absolute;bottom:12px;left:12px;background:#fff;border-radius:7px;color:var(--heading);font-size:10px;font-weight:800;padding:7px 9px}.hero-index{font-size:10px;letter-spacing:.09em;color:#c4dcdf;display:flex;gap:8px;align-items:center;margin-top:20px}.hero-index span{background:var(--s);height:3px;width:24px}.advantage-strip{border-bottom:1px solid var(--border);background:#fff}.advantages{display:grid;grid-template-columns:repeat(5,1fr)}.advantage{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 8px;color:var(--heading);font-weight:700;font-size:11px;border-right:1px solid var(--border)}.advantage:last-child{border:0}.advantage svg{color:var(--p)}
/* body */
.welcome-grid{display:grid;grid-template-columns:.42fr .58fr;gap:52px;align-items:center}.portrait-placeholder{height:294px;border-radius:18px;background:#ECF3F5;border:1px solid #DCE8EA;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--p);gap:10px}.portrait-placeholder span{font-size:12px;font-weight:700;color:#60747C}.portrait-placeholder small{color:#8DA2AA}.welcome-copy h2{margin-bottom:14px}.welcome-copy p{color:var(--muted);font-size:13px}.signature{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.signature strong{font-size:13px;color:var(--heading)}.signature small{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.card:hover{border-color:#AFCDD3}.card-inner{padding:18px}.card-icon{width:35px;height:35px;border:1px solid #D1E6EA;background:#F3F8F9;border-radius:9px;color:var(--p);display:grid;place-items:center;margin-bottom:14px}.card h3{margin-bottom:8px}.card p{font-size:12.5px;color:var(--muted);margin:0 0 16px}.card a{color:var(--p);font-size:12px;font-weight:800}.card .card-number{color:#9BABB0;font-weight:800;letter-spacing:.05em;font-size:11px;margin-bottom:11px}.stat-panel{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:#fff}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat-row>div{border-right:1px solid var(--border);padding:5px 12px}.stat-row>div:last-child{border:none}.stat-row strong{font-family:'Plus Jakarta Sans';font-size:25px;color:var(--p);display:block}.stat-row span{color:var(--muted);font-size:12px}.chip-list{display:flex;gap:9px;flex-wrap:wrap}.chip{padding:8px 12px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-weight:700;background:var(--surface)}.chip svg{color:var(--p);margin-right:6px}.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:25px}.info-box{padding:24px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.info-box h3{margin-bottom:11px}.notice-list{display:grid;gap:9px}.notice-row{display:flex;gap:13px;align-items:center;padding:13px 15px;border:1px solid var(--border);border-radius:10px;background:#fff}.notice-date{width:44px;height:43px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:7px;background:var(--alt);color:var(--p);font-weight:800;font-size:15px;line-height:1.1}.notice-date small{font-size:9px;font-weight:700;color:var(--muted)}.notice-row strong{font-size:12px;color:var(--heading)}.notice-row small{font-size:11px;color:var(--muted);display:block;margin-top:5px}.empty-state{border:1px dashed #CAD5DA;border-radius:10px;padding:26px;text-align:center;color:var(--muted);background:#fff}.empty-state svg{color:#7A9BA4}.empty-state strong{display:block;color:var(--heading);font-size:13px;margin:7px 0 5px}.empty-state p{font-size:12px;margin:0 auto 12px;max-width:320px}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.award-card{padding:18px;border:1px solid var(--border);border-radius:11px;background:#fff}.award-year{display:inline-block;padding:4px 8px;border-radius:6px;color:var(--p);background:#EEF5F6;font-size:11px;font-weight:800;margin-bottom:9px}.award-card h3{font-size:14px;margin-bottom:6px}.award-card p{font-size:12px;color:var(--muted);margin:0}.news-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.news-placeholder{border:1px dashed #cad5da;border-radius:12px;background:#fff;padding:20px;min-height:142px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--muted);gap:8px}.news-placeholder span{font-size:11px}.cta-band{padding:24px;background:var(--p);border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}.cta-band h2{color:#fff;font-size:19px;margin-bottom:6px}.cta-band p{font-size:12px;margin:0;color:#e3eff1;max-width:590px}.footer{border-top:3px solid var(--s);background:#12333F;color:#E7EEF0;padding:43px 0 0}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:35px}.footer h3{color:#fff;font-size:13px;margin:0 0 13px}.footer p,.footer a{color:#C3D4D9;font-size:11.5px;line-height:1.65}.footer a{display:block;margin:0 0 8px}.footer a:hover{color:#fff}.footer .logo-small{color:#fff;font-weight:800;font-size:14px;line-height:1.5;margin-bottom:12px}.footer .logo-small small{color:#c9d8dc}.footer-bottom{border-top:1px solid #345560;padding:14px 0;display:flex;justify-content:space-between;gap:18px;color:#C0D1D5;font-size:10.5px}
/* inner pages */
.page-banner{background:var(--alt);border-bottom:1px solid var(--border);padding:38px 0}.crumbs{color:var(--muted);font-size:11px;margin-bottom:13px;display:flex;gap:9px;align-items:center}.crumbs a{color:var(--p)}.page-banner h1{margin-bottom:8px}.page-banner p{max-width:680px;color:var(--muted);font-size:13px;margin:0}.page-panel{padding:55px 0 85px}.intro-card{padding:25px;border:1px solid var(--border);border-radius:12px;background:#fff}.intro-card p{color:var(--muted);font-size:13px}.wysiwyg{max-width:820px}.wysiwyg p{color:var(--muted);margin:0 0 14px;font-size:13px}.wysiwyg h2{margin:0 0 15px}.split-detail{display:grid;grid-template-columns:1.05fr .95fr;gap:35px}.info-compact{padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--alt)}.number-list{display:grid;gap:10px}.number-line{display:flex;gap:13px;padding:13px;background:#fff;border:1px solid var(--border);border-radius:10px}.number-line b{font-size:13px;color:var(--p)}.number-line span{color:var(--heading);font-size:13px}.filter-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:20px}.filter-btn{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--muted);font-size:11px;font-weight:700}.filter-btn[aria-pressed=true]{background:var(--p);color:#fff;border-color:var(--p)}.achievement-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.award-list-row{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--border);padding:14px;border-radius:10px}.award-list-row svg{color:var(--p)}.award-list-row strong{display:block;font-size:13px;margin-bottom:5px;color:var(--heading)}.award-list-row small{color:var(--muted);font-size:11.5px}.field{display:flex;flex-direction:column;gap:7px;color:var(--heading);font-size:12px;font-weight:700}.field input,.field select,.field textarea{border:1px solid #CDD7DB;background:#fff;color:var(--heading);padding:12px 13px;border-radius:8px;outline:none;font-size:13px;width:100%}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 12%,transparent)}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:27px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field.full{grid-column:1/-1}.contact-item{display:flex;gap:12px;padding:17px;border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:10px}.contact-item>span{color:var(--p)}.contact-item strong{display:block;font-size:13px;color:var(--heading)}.contact-item p{margin:4px 0;color:var(--muted);font-size:12px}.contact-item a{font-size:11px;font-weight:800;color:var(--p)}.note{font-size:11px;color:var(--muted)}
/* accessibility and design controls */
.access-popup,.color-panel,.search-popup{z-index:190;position:fixed;top:122px;right:max(20px,calc((100% - 1170px)/2));padding:19px;background:#fff;color:#1A1A1A;border:1px solid var(--border);border-radius:11px;box-shadow:0 18px 40px #091B2333;width:min(330px,calc(100vw - 35px))}.access-popup h3,.color-panel h3,.search-popup h3{font-size:14px;margin-bottom:10px}.control-row{display:flex;gap:7px;align-items:center;margin-bottom:13px}.control-row button{border:1px solid var(--border);background:#fff;border-radius:7px;padding:7px 12px}.control-row button:hover{border-color:var(--p)}.control-row label{font-weight:700;font-size:12px;flex:1}.control-row input{width:42px;height:34px;border:0;background:none}.color-panel{top:auto;bottom:20px;right:20px}.color-label{font-size:11px;color:var(--muted)}.color-toggle{position:fixed;right:20px;bottom:18px;z-index:150;display:flex;align-items:center;gap:7px;border-radius:30px;background:var(--p);color:#fff;border:2px solid #fff;padding:11px 16px;box-shadow:0 8px 30px #132E3A26;font-size:12px;font-weight:800}.search-popup input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:13px}.search-results{margin-top:8px;display:grid;gap:2px}.search-results a{padding:9px;border-radius:7px;color:var(--heading);font-size:12px}.search-results a:hover{background:var(--alt)}html[data-mode=dark]{--ink:#E9EFF1;--heading:#F5F8F9;--muted:#B0C1C7;--bg:#14272F;--alt:#1B3039;--surface:#21353E;--border:#41565E;--subtle:#243840}html[data-mode=dark] .header,html[data-mode=dark] .advantage-strip,html[data-mode=dark] .card,html[data-mode=dark] .info-box,html[data-mode=dark] .stat-panel,html[data-mode=dark] .award-card,html[data-mode=dark] .notice-row,html[data-mode=dark] .news-placeholder,html[data-mode=dark] .intro-card,html[data-mode=dark] .facility-pill,html[data-mode=dark] .contact-item{background:var(--surface)}html[data-mode=dark] .advantage,html[data-mode=dark] .section.alt{color:var(--ink)}html[data-mode=dark] .hero{background:#173F4B}html[data-mode=dark] .color-toggle{background:#00566A}
@media(max-width:1250px){.container{width:min(calc(100% - 40px),var(--content))}.brand{min-width:222px}.header-inner{gap:10px}.nav-home,.nav-link{padding:8px 6px;font-size:11px}.header-cta{padding-inline:13px}.header-tools{margin-left:6px}}
@media(max-width:1000px){.nav,.header-cta{display:none}.header-inner{height:68px}.header-tools{margin-left:auto}.hamburger{display:grid}.mobile-nav{display:block;padding:5px 20px 18px;background:var(--surface);border-top:1px solid var(--border);max-height:calc(100vh - 100px);overflow:auto}.hero-inner{gap:26px}.hero h1{font-size:30px}.hero .art-frame{width:min(100%,320px)}.advantages{grid-template-columns:repeat(3,1fr)}.advantage:nth-child(3){border-right:0}.welcome-grid{gap:28px}.footer-main{gap:22px}}
@media(max-width:650px){html{font-size:13.5px}.container{width:calc(100% - 30px)}.topbar .container{min-height:30px}.topbar-list{gap:10px}.topbar-list span.date{display:none}.topbar-list a{font-size:10px}.socials{gap:10px}.header-inner{height:63px}.brand{min-width:0}.brand img{width:38px;height:38px}.brand strong{font-size:11px}.brand small{font-size:9px}.header-tools{gap:5px}.header-tools .iconbtn{width:32px;height:32px}.hero-inner{grid-template-columns:1fr;gap:18px;min-height:0;padding:36px 0 31px}.hero h1{font-size:22px;max-width:460px}.hero p{font-size:13px;max-width:440px}.hero .art-frame{width:100%;max-width:340px;aspect-ratio:1.7/1;border-width:4px;border-radius:13px}.hero-art{justify-content:flex-start}.hero-mini-tag{display:none}.hero-index{margin-top:14px}.advantages{grid-template-columns:repeat(2,1fr)}.advantage{justify-content:flex-start;font-size:10.5px;padding:13px 10px}.advantage:nth-child(3){border-right:1px solid var(--border)}.advantage:nth-child(even){border-right:0}.advantage:last-child{grid-column:1/-1;justify-content:center}.section{padding:45px 0}.page-panel{padding:36px 0 65px}.page-banner{padding:30px 0}.welcome-grid,.info-cols,.split-detail,.contact-grid{grid-template-columns:1fr}.welcome-grid{gap:21px}.portrait-placeholder{height:205px}.section-heading{align-items:flex-start}.section-heading h2{font-size:18px}.card-grid,.achievement-grid,.news-row{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,1fr);row-gap:16px}.stat-row>div:nth-child(2){border-right:0}.info-compact{padding:17px}.achievement-list{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.cta-band{flex-direction:column;align-items:flex-start}.section-heading .arrow-link{font-size:11px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.color-panel{bottom:15px;right:15px}.color-toggle{right:12px;bottom:12px}.access-popup,.search-popup{top:104px;right:12px}}
@media(max-width:370px){.topbar-list a:nth-child(2){display:none}.brand strong{font-size:10px}.header-tools .iconbtn{width:29px;height:29px}.hero h1{font-size:21px}.btn{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){*,*:after,*:before{scroll-behavior:auto!important;transition:none!important}}

/* v4.1 — solid Primary footer, portrait greeting, independent information cards, subtle actions */
.footer{background:var(--p);color:var(--onP);border-top:3px solid var(--s)}
.footer h3,.footer .logo-small,.footer .logo-small small{color:var(--onP)}
.footer p,.footer a,.footer-bottom{color:color-mix(in srgb,var(--onP) 83%,transparent)}
.footer a:hover{color:var(--onP);text-decoration:underline}
.footer-bottom{border-color:color-mix(in srgb,var(--onP) 27%,transparent)}
.footer .logo-small small{opacity:.82}
.welcome-grid{grid-template-columns:minmax(210px,.33fr) minmax(0,.67fr);gap:45px;align-items:center}
.portrait-placeholder.portrait-frame{width:min(100%,260px);height:auto;aspect-ratio:4/5;justify-self:center;display:flex;border-radius:14px;position:relative;overflow:hidden;text-align:center;padding:20px}
.portrait-frame svg{width:64px;height:64px}
.portrait-frame span{max-width:180px}
.portrait-frame small{font-size:10px;max-width:180px}
.welcome-grid > div:nth-child(2){min-width:0}
.welcome-grid .signature{justify-content:flex-start}
.welcome-grid p{line-height:1.55;margin-bottom:11px}
/* Every arrow action is a small outlined button, not a naked text link */
a.mini-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 11px;min-height:34px;width:max-content;max-width:100%;font-size:11.5px;font-weight:750;line-height:1.25;border:1px solid var(--border);border-radius:7px;color:var(--p);background:var(--surface);text-decoration:none;transition:color .15s,border-color .15s,background .15s;white-space:normal}
a.mini-action:hover{color:var(--p);border-color:var(--p);background:var(--alt);text-decoration:none}
a.mini-action svg{width:14px;height:14px;transition:transform .15s}
a.mini-action:hover svg{transform:translateX(2px)}
.card .mini-action,.contact-item .mini-action{font-size:11.5px;font-weight:750}
.contact-item .mini-action{margin-top:5px}
/* Two large, equal-height cards. No invented school events. */
.bulletin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bulletin-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;min-height:256px;overflow:hidden}
.bulletin-top{display:flex;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
.bulletin-icon{width:35px;height:35px;background:var(--p);color:var(--onP);display:grid;place-items:center;border-radius:9px;font-size:18px;font-weight:800}
.bulletin-kicker{display:block;color:var(--p);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:3px}
.bulletin-top h3{margin:0;font-size:16px}
.bulletin-body{padding:17px 20px;flex:1;display:flex;align-items:center}
.bulletin-empty{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.bulletin-empty-symbol{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--alt);border:1px solid var(--border);color:var(--muted);font-size:16px}
.bulletin-empty strong{font-size:12px;color:var(--heading)}
.bulletin-empty p{font-size:12px;color:var(--muted);margin:0;max-width:360px}
.bulletin-foot{padding:12px 20px 18px;display:flex;align-items:center}
/* CTA controls available in the prototype, ready to map to theme settings later */
.color-panel{max-height:min(82vh,640px);overflow-y:auto;width:min(350px,calc(100vw - 32px))}
.settings-divider{height:1px;background:var(--border);margin:14px 0}
.settings-heading{font-size:12px;color:#1A1A1A;margin:0 0 12px}
.settings-checkbox{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.4;margin:12px 0;color:#1A1A1A;cursor:pointer}
.settings-checkbox input{accent-color:var(--p);width:16px;height:16px;flex:0 0 auto}
.settings-field{display:block;font-size:11.5px;font-weight:750;margin-bottom:10px}
.settings-field input{display:block;width:100%;background:#fff;border:1px solid #CDD7DB;border-radius:7px;padding:9px 10px;font-size:12px;margin-top:6px;color:#1A1A1A}
.settings-hint{font-size:10px;color:#66787C;line-height:1.5}
.settings-error{font-size:10px;color:#B52222;margin:0}
.settings-reset{background:#fff;border:1px solid #CDD7DB;color:#182F38;border-radius:7px;padding:9px 12px;font-size:11px;font-weight:700}
html[data-mode=dark] .footer{background:var(--p);color:var(--onP)}
html[data-mode=dark] .bulletin-card{background:var(--surface);border-color:var(--border)}
html[data-mode=dark] a.mini-action{background:var(--surface);border-color:var(--border);color:var(--onP)}
html[data-mode=dark] .bulletin-empty-symbol{background:var(--alt)}
@media(max-width:1000px){.welcome-grid{gap:25px}}

@media(max-width:650px){.welcome-grid{grid-template-columns:1fr;gap:25px}.portrait-placeholder.portrait-frame{width:min(100%,230px);aspect-ratio:4/5;height:auto;justify-self:center}.bulletin-grid{grid-template-columns:1fr}.bulletin-card{min-height:230px}.bulletin-top{padding:15px 16px}.bulletin-body{padding:16px}.bulletin-foot{padding:0 16px 16px}.section-heading .mini-action{font-size:11px}}
/* Keep the Studio toggle outside its expanded panel for touch & mouse users. */
.color-panel{bottom:76px}
@media(max-width:650px){.color-panel{bottom:67px}}


/* v4.2 — fluid screen-based type for 14-inch laptops through large 16.5-inch displays.
   Keep flat/solid brand colors, zero gradients. Font Zoom still multiplies the base size. */
:root{--content:clamp(1170px, 82vw, 1440px);--fluid-type:clamp(13.5px,calc(10.4px + 0.28vw),17.5px)}
html{font-size:calc(var(--fluid-type) * var(--fontScale))}
h1,.page-banner h1{font-size:clamp(22px,1.53vw,32px)}
h2,.section-heading h2,.welcome-grid h2{font-size:clamp(18px,1.2vw,25px)}
h3,.bulletin-top h3,.card h3{font-size:clamp(16px,.9vw,20px)}
p,.welcome-copy p,.welcome-grid p,.wysiwyg p,.card p,.section-lead,.section-heading p,.page-banner p{font-size:1rem;line-height:1.55}
small,.small{font-size:.82rem}
.nav-home,.nav-link{font-size:clamp(11.5px,.68vw,13.5px)}
.subnav a,.mobile-nav a{font-size:clamp(12px,.7vw,14px)}
.topbar{font-size:clamp(10.5px,.62vw,12.5px)}
.brand strong{font-size:clamp(13px,.79vw,16px)}
.brand small{font-size:clamp(10px,.59vw,12px)}
.btn,a.mini-action,button.mini-action{font-size:clamp(12px,.73vw,14px)}
.section{padding-block:clamp(58px,4.1vw,86px)}
.hero-inner{min-height:clamp(405px,29vw,520px);gap:clamp(40px,4vw,80px)}
.hero h1{font-size:clamp(30px,2.18vw,43px);line-height:1.2;max-width:650px}
.hero p{font-size:clamp(13px,.85vw,16px);max-width:590px}
.art-frame{width:min(100%,clamp(375px,25vw,485px))}
.eyebrow{font-size:clamp(11px,.65vw,13px)}
.welcome-grid p{font-size:1rem;line-height:1.63}
.welcome-grid{grid-template-columns:minmax(235px,.32fr) minmax(0,.68fr);gap:clamp(32px,3.3vw,64px)}
.portrait-placeholder.portrait-frame{width:min(100%,clamp(260px,18.6vw,330px));max-width:330px}
/* Minimal bordered arrow buttons with accessible button semantics */
button.mini-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;min-height:37px;width:max-content;max-width:100%;font-weight:750;line-height:1.25;border:1px solid var(--border);border-radius:8px;color:var(--p);background:var(--surface);transition:color .15s,border-color .15s,background .15s;cursor:pointer}
button.mini-action:hover{border-color:var(--p);background:var(--alt)}
button.mini-action svg{transition:transform .15s}
button.mini-action:hover svg{transform:translateX(2px)}
.greeting-trigger{margin:9px 0 4px}
/* Premium greeting dialog; real photo slot is portrait 4:5 */
.greeting-dialog{border:1px solid var(--border);border-radius:18px;padding:0;background:var(--surface);color:var(--ink);width:min(1020px,calc(100vw - 44px));max-width:none;max-height:min(90dvh,820px);box-shadow:0 24px 90px rgba(12,36,49,.24);overflow:auto;overscroll-behavior:contain}
.greeting-dialog::backdrop{background:rgba(4,18,25,.72)}
.greeting-dialog-shell{display:flex;flex-direction:column;min-height:0}
.greeting-dialog-topbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px clamp(20px,3vw,36px);border-bottom:1px solid var(--border);background:var(--surface)}
.greeting-dialog-eyebrow{font-size:clamp(10px,.65vw,12px);letter-spacing:.08em;font-weight:800;color:var(--p);display:flex;align-items:center;gap:9px}
.greeting-dialog-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--s)}
.greeting-dialog-close{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--alt);color:var(--heading)}
.greeting-dialog-close:hover{border-color:var(--p);color:var(--p)}
.greeting-dialog-main{display:grid;grid-template-columns:minmax(205px,280px) minmax(0,1fr);gap:clamp(24px,3vw,46px);padding:clamp(23px,3.2vw,40px)}
.greeting-dialog-photo.portrait-placeholder.portrait-frame{width:100%;max-width:280px;aspect-ratio:4/5;border-radius:14px}
.greeting-dialog-person{min-width:0}
.greeting-dialog-identity{margin-top:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.greeting-dialog-identity strong{font-size:clamp(12px,.78vw,15px);color:var(--heading);line-height:1.4}
.greeting-dialog-identity small{font-size:clamp(11px,.7vw,13px);color:var(--muted)}
.greeting-dialog-kicker{display:inline-block;color:var(--p);font-size:clamp(10px,.66vw,12px);font-weight:800;letter-spacing:.09em;margin-bottom:10px}
.greeting-dialog-content h2{font-size:clamp(20px,1.52vw,29px);line-height:1.3;margin:0 0 9px}
.greeting-dialog-lead{color:var(--muted);font-size:clamp(12px,.75vw,14px)!important;margin-bottom:20px}
.greeting-dialog-prose{border-top:1px solid var(--border);padding-top:17px}
.greeting-dialog-prose p{font-size:1rem;line-height:1.72;color:var(--ink);margin-bottom:14px}
.greeting-dialog-signoff{border-left:3px solid var(--s);padding:5px 0 5px 14px;display:flex;flex-direction:column;gap:4px;margin-top:20px}
.greeting-dialog-signoff span,.greeting-dialog-signoff small{color:var(--muted);font-size:.84rem}
.greeting-dialog-signoff strong{color:var(--heading);font-size:.96rem}
.greeting-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--border);padding:12px clamp(20px,3vw,36px);background:var(--surface)}
.greeting-dialog-footer span{color:var(--muted);font-size:10px;letter-spacing:.08em;font-weight:750}
/* photo injected only when user selects a local image, no server upload */
.portrait-frame .portrait-placeholder-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;height:100%;width:100%}
.portrait-frame img.headmaster-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;position:absolute;inset:0;border-radius:inherit}
.portrait-frame img.headmaster-photo[hidden],.portrait-frame .portrait-placeholder-copy[hidden]{display:none!important}
.portrait-frame.sambutan-page-portrait{position:relative;overflow:hidden;width:min(100%,285px);height:auto;aspect-ratio:4/5}
/* Avoid preexisting dark mode text color issues inside dialog */
html[data-mode=dark] .greeting-dialog{color:var(--ink);background:var(--surface)}
html[data-mode=dark] .greeting-dialog-prose p{color:var(--ink)}
html[data-mode=dark] .greeting-dialog-topbar,html[data-mode=dark] .greeting-dialog-footer{background:var(--surface)}
@media(max-width:1000px){.hero h1{font-size:clamp(26px,3.2vw,34px)}.hero-inner{min-height:400px;gap:26px}.art-frame{width:min(100%,340px)}}
@media(max-width:650px){
 :root{--fluid-type:13.5px}
 .section{padding-block:45px}
 h1,.page-banner h1{font-size:clamp(20px,5.5vw,23px)}
 h2,.section-heading h2,.welcome-grid h2{font-size:clamp(17px,4.6vw,19px)}
 .hero-inner{grid-template-columns:1fr;min-height:0;gap:18px;padding:36px 0 31px}
 .hero h1{font-size:clamp(21px,5.6vw,25px)}
 .hero p{font-size:13.5px}
 .art-frame{width:100%;max-width:340px}
 .welcome-grid{grid-template-columns:1fr;gap:23px}
 .portrait-placeholder.portrait-frame{width:min(100%,225px)}
 .greeting-dialog{width:calc(100vw - 20px);max-height:94dvh;border-radius:13px}
 .greeting-dialog-topbar{padding:12px 15px}
 .greeting-dialog-eyebrow{font-size:9px;letter-spacing:.055em}
 .greeting-dialog-main{grid-template-columns:1fr;gap:17px;padding:18px 18px 24px}
 .greeting-dialog-person{display:grid;grid-template-columns:118px minmax(0,1fr);gap:15px;align-items:center}
 .greeting-dialog-photo.portrait-placeholder.portrait-frame{width:118px;max-width:118px;aspect-ratio:4/5;border-radius:10px}
 .greeting-dialog-photo .portrait-placeholder-copy{gap:3px;padding:8px}
 .greeting-dialog-photo .portrait-placeholder-copy svg{width:30px;height:30px}
 .greeting-dialog-photo .portrait-placeholder-copy span{font-size:9px}
 .greeting-dialog-photo .portrait-placeholder-copy small{font-size:8px}
 .greeting-dialog-identity{text-align:left;align-items:flex-start;margin:0;gap:5px}
 .greeting-dialog-content h2{font-size:20px}
 .greeting-dialog-footer{padding:11px 16px}.greeting-dialog-footer span{font-size:9px}
}

@media(max-width:350px){.greeting-dialog-footer span{display:none}}


/* v4.3 — restored six photo-style extracurricular cards, no gradients. */
.extracurricular-feature-section .activity-heading{margin-bottom:24px}
.extracurricular-feature-section .activity-heading h2{margin:0}
.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.activity-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);transition:border-color .18s,transform .18s}
.activity-card:hover,.activity-card:focus-visible{transform:translateY(-2px);border-color:var(--p)}
.activity-media{min-height:0;aspect-ratio:1.72/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#E8EFF2;color:var(--p);position:relative}
.activity-placeholder-icon{display:grid;place-items:center;width:72px;height:72px;background:#F8FBFC;border:1px solid #CEDDE2;border-radius:18px}
.activity-placeholder-label{font-size:11px;font-weight:700;letter-spacing:.025em;color:#5E7480}
.activity-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:13px 16px;background:var(--p);color:var(--onP)}
.activity-caption h3{margin:0;color:var(--onP);font-size:clamp(13px,.9vw,15px);font-weight:800;line-height:1.3;letter-spacing:-.02em}
.activity-arrow{flex-shrink:0;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--onP) 55%,transparent);width:27px;height:27px;border-radius:7px;font-size:16px;line-height:1}
.activity-card:hover .activity-arrow{background:color-mix(in srgb,var(--onP) 18%,transparent)}
/* Future school photos can replace placeholders within .activity-media, without changing the card. */
.activity-media:has(> img) > .activity-placeholder-icon,.activity-media:has(> img) > .activity-placeholder-label{display:none}
.activity-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-mode=dark] .activity-media{background:#29434F;color:#BCE4ED}
html[data-mode=dark] .activity-placeholder-icon{background:#35525D;border-color:#4F6E7A}
html[data-mode=dark] .activity-placeholder-label{color:#D0DFE5}
@media(max-width:900px){.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:650px){.extracurricular-feature-section .activity-heading{align-items:flex-start}.activity-media{aspect-ratio:1.35/1}.activity-caption{min-height:50px;padding:10px 12px}.activity-caption h3{font-size:12.5px}.activity-placeholder-icon{width:57px;height:57px;border-radius:13px}.activity-placeholder-icon svg{width:32px;height:32px}.activity-placeholder-label{font-size:10px}}
@media(max-width:370px){.activity-grid{grid-template-columns:1fr}.activity-media{aspect-ratio:1.9/1}}


/* Original portal section layout recreated */
.p-trust-strip{background:#fff;border-bottom:1px solid #e6eef7;box-shadow:0 10px 24px #0b2b5c0b}.p-trust-list{display:grid;grid-template-columns:repeat(5,1fr)}.p-trust-list>div{display:flex;align-items:center;justify-content:center;gap:11px;padding:25px 11px;border-right:1px solid #edf1f7}.p-trust-list>div:last-child{border:0}.p-trust-list svg{color:#2161b5}.p-trust-list strong{font-size:.75rem;color:#274671;font-weight:800;line-height:1.45}
.p-section{padding:90px 0}.p-eyebrow{font-weight:800;letter-spacing:.14em;font-size:.7rem;color:#1769c8;text-transform:uppercase}.p-eyebrow.light{color:#9ad7ff}.p-section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:31px}.p-section-heading h2,.p-welcome-copy h2,.p-strength-title h2,.p-cta-band h2{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.048em;line-height:1.22}.p-section-heading h2{font-size:clamp(1.8rem,2.65vw,2.8rem);margin:9px 0 0;color:#122b54}.p-see-all,.p-link{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:#1761b8;white-space:nowrap}.p-see-all{padding-bottom:8px}.p-see-all:hover,.p-link:hover{color:#093c85}.p-light-section,.p-teachers-section{background:#f6f9fe}.p-empty{padding:45px 26px;background:#fff;border:1px dashed #d4e1ef;border-radius:16px;color:#60748e;line-height:1.8;font-size:.88rem;grid-column:1/-1}.p-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#E9F1F8;color:#6994c7;position:relative;min-height:140px}.p-img-placeholder:after{content:"DOKUMENTASI SEKOLAH";position:absolute;bottom:16px;left:16px;font-size:.57rem;letter-spacing:.14em;color:#83a7d2;font-weight:800}
.p-intro-grid{display:grid;grid-template-columns:.81fr 1.19fr;gap:86px;align-items:center}.p-welcome-visual{position:relative;padding:25px 35px 38px 0}.p-welcome-photo{height:445px;background:#DDE9F3;border-radius:22px 100px 22px 22px;overflow:hidden;display:flex;align-items:center;justify-content:center}.p-welcome-photo img{width:100%;height:100%;object-fit:cover;object-position:top}.p-person-placeholder{display:flex;align-items:center;flex-direction:column;gap:22px;color:#5a7eab;max-width:250px;text-align:center;font-size:.76rem;font-weight:700}.p-welcome-sign{position:absolute;right:-15px;bottom:0;display:grid;gap:3px;padding:17px 22px;background:#0e3f89;color:#fff;border-radius:15px;box-shadow:0 16px 32px #0e3f8940;max-width:225px}.p-welcome-sign svg{color:#87cfff}.p-welcome-sign strong{font-size:.76rem;line-height:1.4}.p-welcome-sign>span:last-child{font-size:.62rem;color:#cbdff7}.p-welcome-copy h2{font-size:clamp(2rem,3.25vw,3.15rem);margin:12px 0 17px}.p-welcome-copy h2 em{font-style:normal;color:#1664c2}.p-welcome-copy p{font-size:.93rem;color:#61738b;line-height:1.92;margin-bottom:16px}.p-title-rule{height:3px;width:60px;background:#edb543;border-radius:20px;margin-bottom:24px}.p-signature{display:flex;align-items:center;gap:14px;margin:28px 0}.p-sign-line{height:2px;width:43px;background:#e7b044}.p-signature strong{display:block;font-size:.87rem}.p-signature small{display:block;color:#8593a5;font-size:.73rem;margin-top:3px}
.p-teacher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.p-teacher-card{background:#fff;border:1px solid #e3ebf6;border-radius:16px;overflow:hidden;padding:10px 10px 19px;box-shadow:0 6px 20px #183b7108}.p-teacher-photo{height:235px;border-radius:10px;overflow:hidden}.p-teacher-photo img{width:100%;height:100%;object-fit:cover;object-position:top}.p-teacher-card h3{margin:18px 10px 3px;font-size:.91rem;line-height:1.4;letter-spacing:-.015em}.p-teacher-card>span{margin:0 10px;display:block;color:#6a809c;font-size:.73rem}
.p-strength-section{background:#0c2e6d;color:#fff;padding:82px 0}.p-strength-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:82px;align-items:center}.p-strength-title h2{font-size:clamp(2rem,3vw,3.2rem);margin:15px 0;color:#fff}.p-strength-title h2 em{font-style:normal;color:#8ad0ff}.p-strength-title p{color:#b8d1ef;margin:0 0 25px;font-size:.93rem}.p-strength-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}.p-strength-items article{padding:22px;border-radius:14px;border:1px solid #ffffff20;background:#ffffff0c}.p-strength-items article>span{font-weight:800;color:#8ecaff;font-size:.82rem}.p-strength-items h3{color:#fff;font-size:1rem;margin:10px 0 7px}.p-strength-items p{color:#bed3ef;font-size:.77rem;margin:0;line-height:1.7}
.p-updates-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.p-updates-grid.is-single{grid-template-columns:minmax(0,1fr)}.p-updates-grid .p-section-heading h2{font-size:1.65rem}.p-update-box{border:1px solid #e3ebf4;border-radius:17px;padding:12px 22px;background:#fff}.p-notice-row{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid #edf1f7}.p-notice-row:last-child{border:0}.p-notice-row:hover .p-notice-txt strong{color:#1560b9}.p-notice-date{height:57px;width:57px;flex-shrink:0;border-radius:10px;background:#eaf3ff;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#1b5eb6}.p-notice-date strong{font-size:1.25rem;line-height:1}.p-notice-date small{text-transform:uppercase;font-weight:800;font-size:.64rem}.p-notice-txt{flex:1;min-width:0}.p-notice-txt strong{display:block;color:#264265;font-size:.86rem;line-height:1.5;transition:color .2s}.p-notice-txt small{color:#8293a9;font-size:.7rem}.p-notice-arrow{color:#6595c7}
.p-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.p-photo-tile,.p-facility-card{position:relative;display:block;height:246px;border-radius:16px;overflow:hidden;background:#e3edf9}.p-photo-tile>img,.p-facility-card>img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.p-photo-tile:hover>img,.p-facility-card:hover>img{transform:scale(1.05)}.p-photo-tile:after,.p-facility-card:after{content:"";position:absolute;inset:32% 0 0;background:#DDE9F3}.p-photo-tile>span:last-child,.p-facility-card>span:last-child{position:absolute;left:20px;bottom:17px;right:17px;color:#fff;z-index:2;font-size:1rem;font-weight:800;line-height:1.35}.p-facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.p-facility-card{height:220px}
.p-award-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.p-award-card{background:#fff;padding:24px;border-radius:17px;border:1px solid #e1eaf7;min-height:225px;display:flex;flex-direction:column}.p-award-icon{height:49px;width:49px;border-radius:12px;background:#fff1d2;color:#d49917;display:grid;place-items:center;margin-bottom:16px}.p-award-card>small{color:#6e8bb3;font-size:.72rem;font-weight:800}.p-award-card h3{color:#1b3a64;font-size:.92rem;letter-spacing:-.015em;line-height:1.5;margin:6px 0 16px}.p-article-link{color:#1762bb;font-size:.78rem;font-weight:800;margin-top:auto}
.p-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.p-entry-card,.p-video-card{background:#fff;border:1px solid #e3eaf4;border-radius:18px;overflow:hidden;box-shadow:0 7px 22px #102a550a}.p-entry-image,.p-video-thumb{height:205px;display:block;background:#e7eff8;position:relative;overflow:hidden}.p-entry-image img,.p-video-thumb img{width:100%;height:100%;object-fit:cover}.p-entry-body{padding:23px}.p-entry-meta{display:block;color:#5982b1;font-weight:800;font-size:.72rem;letter-spacing:.025em;margin-bottom:9px}.p-entry-body h3{font-size:1.06rem;line-height:1.48;margin:0 0 12px;color:#193859;letter-spacing:-.025em}.p-entry-body p{font-size:.8rem;color:#718198;margin:0 0 17px;line-height:1.7}.p-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:58px;width:58px;border-radius:50%;display:grid;place-items:center;background:#ffffffeb;color:#0c4d9d;font-size:1.4rem;padding-left:4px}.p-video-card .p-entry-body h3{margin-bottom:6px}
.p-cta-band{background:#DDE9F3;color:#fff;padding:66px 0}.p-cta-band-inner{display:flex;gap:40px;align-items:center;justify-content:space-between}.p-cta-band h2{color:#fff;font-size:clamp(2rem,3vw,3rem);margin:12px 0}.p-cta-band h2 em{font-style:normal;color:#a2d7ff}.p-cta-band p{color:#cddfff;margin:0;font-size:.9rem}

/* Portal lower layout restoration: based on the user's uploaded original.
   Components use solid primary + neutral surfaces, not color-graded backgrounds. */
.p-trust-strip{background:var(--surface);border-bottom:1px solid var(--border)}
.p-trust-list>div{padding:17px 8px}
.p-trust-list svg{color:var(--p)}.p-trust-list strong{color:var(--ink)}
.p-section{padding:clamp(62px,5.8vw,98px) 0;background:var(--surface);}
.p-section.p-light-section,.p-section.p-teachers-section{background:var(--alt)}
.p-section-heading h2,.p-welcome-copy h2{font-family:var(--heading, 'Plus Jakarta Sans',sans-serif);font-size:clamp(22px,2.15vw,35px);line-height:1.22;color:var(--ink)}
.p-section-heading h2{margin:9px 0 0}
.p-eyebrow{color:var(--p)}.p-eyebrow.light{color:#E8F4F5}
.p-see-all,.p-link,.p-article-link{color:var(--p)}
.portal-mini-action{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 11px!important;border:1px solid var(--border)!important;border-radius:9px;background:var(--surface)!important;color:var(--p)!important;cursor:pointer;line-height:1.4;font-size:clamp(12px,.9vw,14px)!important;text-decoration:none;white-space:normal;box-shadow:none!important;transition:border-color .2s,background .2s,transform .2s}
.portal-mini-action:hover{border-color:var(--p)!important;background:var(--alt)!important;transform:translateY(-1px)}
.p-strength-title .portal-mini-action,.p-cta-band .portal-mini-action{background:#fff!important;color:var(--p)!important}
.p-photo-grid,.p-facility-grid{gap:16px}
.p-photo-tile,.p-facility-card{height:clamp(195px,18vw,250px);border:1px solid var(--border);background:#E4EFF5;transition:transform .18s,border-color .18s}
.p-facility-card{height:clamp(170px,16vw,223px)}
.p-photo-tile:hover,.p-facility-card:hover{transform:translateY(-3px);border-color:var(--p)}
.p-img-placeholder{background:#E4EEF7;color:var(--p);height:100%;min-height:0;flex-direction:column;gap:10px}
.p-img-placeholder:after{display:none}
.p-photo-label-mini{position:absolute;top:13px;left:15px;background:#fff;border:1px solid #DCE7ED;border-radius:7px;padding:3px 7px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#58758B}
.p-photo-tile:after,.p-facility-card:after{content:'';position:absolute;inset:auto 0 0;height:56px;background:var(--p)}
.p-photo-tile>span:last-child,.p-facility-card>span:last-child{font-size:clamp(13px,1.1vw,17px);bottom:16px;left:17px;right:12px;color:#fff}
.p-award-card,.p-update-box,.p-empty{background:var(--surface);border-color:var(--border)}
.p-empty{padding:34px 25px;color:var(--muted)}
.p-award-icon{background:var(--alt);color:var(--p)}.p-award-card>small{color:var(--p)}.p-award-card h3{color:var(--ink)}
.p-welcome-copy h2 em{color:var(--p)}.p-welcome-copy p{font-size:clamp(13px,1vw,16px);line-height:1.65;color:var(--muted)}
.p-intro-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(25px,5vw,85px)}
.p-welcome-photo{height:auto;aspect-ratio:4/5;background:#E2EBF2;border-radius:20px;position:relative}
.p-welcome-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.p-person-placeholder{max-width:260px;color:var(--p);gap:10px}.p-person-placeholder strong{font-size:14px}.p-person-placeholder small{font-size:12px;color:var(--muted)}
.p-welcome-sign{background:var(--p);box-shadow:none}.p-welcome-sign svg{color:#fff}.p-welcome-sign>span:last-child{color:#E7F0F3}
.p-strength-section{background:var(--p);color:#fff;padding:clamp(56px,5.7vw,86px) 0}
.p-strength-title h2{font-size:clamp(24px,2.4vw,37px)}.p-strength-title h2 em{color:#fff;text-decoration:underline;text-decoration-color:var(--s);text-underline-offset:5px}
.p-strength-title p,.p-strength-items p{color:rgba(255,255,255,.86)}
.p-strength-items article{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24)}
.p-strength-items article>span{color:#fff}.p-strength-items h3{font-size:clamp(14px,1vw,16px)}
.p-cta-band{background:var(--p);padding:clamp(48px,5.6vw,78px) 0}
.p-cta-band h2{font-size:clamp(23px,2.4vw,37px)}.p-cta-band h2 em{color:#fff}.p-cta-band p{color:rgba(255,255,255,.88)}
/* existing footer remains global and follows primary */
.footer{background:var(--p)!important}
/* responsive without reducing screen visual weight too much */
@media(max-width:1100px){.p-trust-list{grid-template-columns:repeat(3,1fr)}.p-trust-list>div{border-bottom:1px solid var(--border)}.p-photo-grid,.p-facility-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.p-award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p-strength-grid{gap:32px}}
@media(max-width:800px){.p-intro-grid{grid-template-columns:1fr 1.15fr;gap:22px}.p-updates-grid{gap:18px}.p-welcome-visual{padding:10px 15px 24px 0}.p-welcome-sign{right:0}.p-section-heading{gap:12px}.p-section-heading h2{font-size:clamp(20px,3vw,28px)}}
@media(max-width:700px){.p-section{padding:52px 0}.p-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}.p-trust-list>div{justify-content:flex-start;padding:12px 9px}.p-trust-list strong{font-size:12px}.p-intro-grid,.p-strength-grid,.p-updates-grid{grid-template-columns:1fr}.p-welcome-visual{width:min(340px,100%);margin:0 auto}.p-welcome-photo{aspect-ratio:4/5}.p-section-heading{align-items:flex-start;flex-wrap:wrap;gap:9px}.p-section-heading h2{font-size:clamp(20px,5.4vw,26px)}.p-strength-grid{gap:25px}.p-strength-items{grid-template-columns:repeat(2,minmax(0,1fr))}.p-photo-grid,.p-facility-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.p-photo-tile,.p-facility-card{height:clamp(145px,42vw,220px)}.p-photo-tile>span:last-child,.p-facility-card>span:last-child{font-size:13px}.p-award-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.p-award-card{min-height:185px;padding:16px}.p-cta-band-inner{flex-direction:column;align-items:flex-start}.p-empty{font-size:13px}}
@media(max-width:400px){.p-strength-items,.p-award-grid{grid-template-columns:1fr}.p-photo-grid,.p-facility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p-photo-tile>span:last-child,.p-facility-card>span:last-child{left:10px;bottom:13px;font-size:12px}.p-photo-tile:after,.p-facility-card:after{height:50px}}
/* Larger viewport typography; 14-inch and 16.5-inch screens retain distinct scales. */
@media(min-width:1500px){.p-strength-items p,.p-update-box,.p-award-card h3,.p-trust-list strong{font-size:15px}.p-section-heading h2{font-size:35px}}


/* v4.5 — carousel background, compact principal, single-card mobile and fixed mobile tabs */
.hero-carousel{background:var(--p);position:relative;height:clamp(360px,30vw,460px);overflow:hidden;color:#fff}
.hero-carousel-track,.hero-slide,.hero-slide-media,.hero-slide-shade{position:absolute;inset:0}
.hero-slide{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease;isolation:isolate}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero-slide-media{z-index:-2;background-color:var(--p);background-repeat:no-repeat;background-position:center center;background-size:cover;filter:none}
@media(max-width:700px){.hero-slide-media[data-mobile-bg]{background-image:var(--hero-mobile-bg)!important}}
.hero-slide-shade{z-index:-1;background:rgba(0,38,47,.66)}
.hero-slide-inner{height:100%;display:flex;align-items:center;position:relative}
.hero-slide-copy{max-width:600px;position:relative;z-index:1;padding:30px 25px 45px 0}
.hero-slide .hero-kicker{background:rgba(0,30,38,.35);border-color:rgba(255,255,255,.35);color:#fff;font-size:clamp(11px,.8vw,13px);margin-bottom:14px}
.hero-slide h1{font-size:clamp(27px,2.35vw,42px);line-height:1.22;max-width:610px;margin:6px 0 18px;color:#fff;letter-spacing:-.04em}
.hero-slide h1 em{color:#fff;font-style:normal}
.hero-slide p{font-size:clamp(13px,1vw,16px);line-height:1.58;color:#fff;max-width:480px;margin:0 0 24px}
.hero-carousel-toolbar{position:relative;z-index:4;height:100%;display:flex;align-items:flex-end;gap:13px;padding-bottom:23px;pointer-events:none}
.hero-carousel-toolbar button{pointer-events:auto;cursor:pointer}
.hero-carousel-dots{display:flex;gap:8px;align-items:center}
.hero-carousel-dots button{width:27px;height:8px;border-radius:20px;border:1px solid #fff;background:#ffffff75;padding:0;transition:width .18s,background .18s}
.hero-carousel-dots button.active{width:43px;background:var(--s);border-color:var(--s)}
.hero-carousel-arrows{display:flex;gap:8px;margin-left:20px}
.hero-carousel-arrows button{width:33px;height:33px;border:1px solid #ffffff95;background:#0004;border-radius:8px;color:#fff;display:grid;place-items:center;font-size:17px}
.hero-carousel-arrows button:hover{background:var(--s);color:var(--onS)}
.hero-carousel-count{font-size:12px;color:#fff;margin-left:auto;padding-bottom:6px}
.hero-carousel-count strong{font-size:16px}
.hero-slide-cta[hidden]{display:none!important}
/* Headmaster: retain portrait and popup, drastically smaller and lower on homepage */
.p-intro-section{padding:46px 0;background:#f6f9fb}
.p-intro-grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:34px;align-items:center;border:1px solid #e1e7ea;background:#fff;border-radius:18px;padding:26px 30px}
.p-welcome-visual{width:170px;max-width:100%;padding:0!important}
.p-welcome-photo{width:170px;max-width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;overflow:hidden}
.p-welcome-sign{display:none}
.p-person-placeholder{gap:9px;padding:15px;color:#427987}
.p-person-placeholder svg{width:40px;height:40px}
.p-person-placeholder strong{font-size:11px}
.p-person-placeholder small{font-size:10px}
.p-welcome-copy h2{font-size:clamp(20px,1.85vw,28px);margin:6px 0 12px;letter-spacing:-.03em}
.p-welcome-copy h2 em{color:var(--p)}
.p-welcome-copy p{font-size:clamp(13px,.87vw,15px);line-height:1.58;margin-bottom:10px}
.p-welcome-copy p:nth-of-type(2){display:none}
.p-welcome-copy .p-title-rule{margin-bottom:12px;width:40px}
.p-signature{margin:12px 0 12px}
.p-intro-section .portal-mini-action{padding:8px 12px;font-size:12px}
/* Small portal card headlines and content stay readable */
.mobile-bottom-nav{display:none}
.settings-field select,.settings-field input[type=file]{max-width:100%}
@media(max-width:850px){
 .hero-carousel{height:385px}.hero-slide-media{background-size:cover;background-position:center}.hero-slide-shade{background:rgba(0,38,47,.70)}.hero-slide-copy{max-width:470px}
 .p-intro-grid{grid-template-columns:145px minmax(0,1fr)}.p-welcome-visual,.p-welcome-photo{width:145px}
}
@media(max-width:700px){
 html{scroll-padding-bottom:80px}body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
 .hero-carousel{height:348px}.hero-slide-media{background-size:cover;background-position:center}.hero-slide-shade{background:rgba(0,37,47,.76)}
 .hero-slide-copy{max-width:100%;padding:20px 0 50px}.hero-slide h1{font-size:clamp(23px,5.8vw,28px);line-height:1.28;max-width:330px}.hero-slide p{font-size:13px;max-width:315px}.hero-carousel-toolbar{padding-bottom:16px}.hero-carousel-arrows button{width:29px;height:29px}.hero-carousel-arrows{gap:5px}
 .p-intro-section{padding:25px 0}.p-intro-grid{grid-template-columns:100px minmax(0,1fr);gap:15px;padding:16px;border-radius:13px;align-items:start}
 .p-welcome-visual,.p-welcome-photo{width:100px}.p-person-placeholder small{display:none}.p-person-placeholder{padding:9px;gap:7px}.p-person-placeholder strong{font-size:10px;line-height:1.25}.p-welcome-copy h2{font-size:17px;line-height:1.32;margin:4px 0 7px}.p-welcome-copy p{font-size:12.5px;line-height:1.52;margin-bottom:8px}.p-signature{margin:9px 0}.p-signature strong{font-size:11px}.p-signature small{font-size:10px}.p-eyebrow{font-size:10px}.p-welcome-copy .p-title-rule{display:none}
 .p-photo-grid,.p-facility-grid,.p-teacher-grid,.p-award-grid,.p-strength-items,.p-updates-grid{grid-template-columns:minmax(0,1fr)!important}
 .p-photo-tile,.p-facility-card{height:222px}.p-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:250;background:#fff;border-top:1px solid #d9e5e8;box-shadow:0 -3px 14px #00252d14;padding:6px max(5px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));gap:1px;min-height:62px}
 .mobile-bottom-nav a,.mobile-bottom-nav button{border:0;background:transparent;color:#61717b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:49px;text-decoration:none;font-weight:700;font-size:10px;cursor:pointer;border-radius:9px;padding:3px 0}
 .mobile-bottom-nav .is-current,.mobile-bottom-nav a:hover,.mobile-bottom-nav button[aria-expanded=true]{color:var(--p);background:#ecf6f7}
 .mobile-bottom-nav svg{width:19px;height:19px}
 .mobile-nav:not([hidden]){position:fixed;z-index:249;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));top:auto;max-height:min(72vh,550px);overflow-y:auto;box-shadow:0 -16px 35px #00252d35}
 .color-toggle{bottom:calc(79px + env(safe-area-inset-bottom))!important;font-size:0!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;justify-content:center!important}
 .color-panel:not([hidden]){bottom:calc(132px + env(safe-area-inset-bottom))!important;max-height:65dvh;overflow:auto}
 .whatsapp-fab{bottom:calc(96px + env(safe-area-inset-bottom))!important}
}
@media(max-width:370px){.hero-slide h1{font-size:22px}.hero-carousel{height:352px}.p-intro-grid{grid-template-columns:84px 1fr;gap:11px;padding:12px}.p-welcome-visual,.p-welcome-photo{width:84px}.p-welcome-copy h2{font-size:15px}.p-welcome-copy p{font-size:12px}.p-photo-grid,.p-facility-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* v4.6 — four targeted refinements; v4.5 sections remain unchanged. */
:root { --content: min(1200px, 79vw); }
@media (min-width:1001px) and (max-width:1250px){ :root { --content: calc(100vw - 48px); } }
@media (max-width:1000px){ :root { --content: 100%; } }
@media (max-width:650px){ .container{ width:calc(100% - 36px); } }
.hero-carousel-count{display:none!important}
.hero-carousel-arrows{margin-left:auto}
.p-strength-items h3{margin-top:0}
.topbar .socials{gap:12px;flex-shrink:0}
.footer-socials{display:flex!important;flex-wrap:wrap;gap:10px;margin-top:13px}
.footer-socials[hidden]{display:none!important}
.footer .footer-socials a{display:grid;place-items:center;min-width:30px;min-height:30px;margin:0;padding:5px;border:1px solid color-mix(in srgb,var(--onP) 32%,transparent);border-radius:8px;color:var(--onP)}
.footer .footer-socials a:hover{background:color-mix(in srgb,var(--onP) 15%,transparent)}
.socials[hidden]{display:none!important}
.social-setting-item{display:grid;grid-template-columns:1fr;gap:5px;padding:9px 0;border-bottom:1px solid #e5ebee}
.social-setting-toggle{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}
.social-setting-toggle input{accent-color:var(--p)}
.social-setting-item input[type=url]{width:100%;font-size:12px;min-height:32px;border:1px solid #cddadf;background:#fff;color:#1a1a1a;border-radius:7px;padding:6px 9px}
.social-setting-error{font-size:10px;color:#9c3d27;line-height:1.3}
.settings-social{border:1px solid #dce6ea;border-radius:9px;padding:10px 12px;margin-top:10px}
.settings-social summary{font-weight:800;font-size:12px;cursor:pointer;list-style:revert}
.settings-social .settings-hint{margin-top:9px}
.color-panel:not([hidden]){max-height:min(78dvh,720px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:650px){
 .topbar .socials{max-width:95px;overflow-x:auto;gap:9px;scrollbar-width:none}
 .topbar .socials::-webkit-scrollbar{display:none}
 .hero-carousel-toolbar{gap:6px}
 .hero-carousel-arrows{margin-left:auto}
}

/* v4.14 — show the four school levels as a clear, compact homepage section. */
.p-levels-section{background:var(--alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.p-levels-section .p-section-heading{align-items:flex-end}
.p-levels-section .p-section-heading h2{margin-bottom:0}
.p-levels-intro{max-width:620px;margin:12px 0 0;color:var(--muted);font-size:.92rem;line-height:1.65}
.p-level-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.p-level-card{min-height:178px;padding:22px 20px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px rgba(24,59,113,.04)}
.p-level-index{display:block;color:var(--s);font-size:.72rem;font-weight:800;letter-spacing:.08em}
.p-level-card h3{margin:29px 0 8px;color:var(--heading);font-family:var(--heading,'Plus Jakarta Sans',sans-serif);font-size:1.3rem;letter-spacing:-.03em}
.p-level-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.65}
@media(max-width:900px){.p-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
  .p-levels-section .p-section-heading{align-items:flex-start}
  .p-levels-section .p-section-heading>a{margin-top:2px}
  .p-level-grid{grid-template-columns:1fr;gap:10px}
  .p-level-card{min-height:0;padding:17px;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;align-items:start}
  .p-level-index{grid-row:1 / span 2;padding-top:3px}
  .p-level-card h3{margin:0 0 5px;font-size:1.08rem}
  .p-level-card p{grid-column:2;font-size:.8rem}
}



/* v4.7: swipeable card groups on tablets and phones only.
   Desktop layout, hero carousel, colors, content, and CTA are unchanged. */
.card-slider-controls{display:none;align-items:center;justify-content:flex-end;gap:9px;margin-top:13px;min-height:35px}
.card-slider-controls .card-slider-count{font-size:11px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-right:3px}
.card-slider-controls button{width:33px;height:33px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--heading);display:grid;place-items:center;padding:0}
.card-slider-controls button:not(:disabled):hover{color:var(--p);border-color:var(--p)}
.card-slider-controls button:disabled{opacity:.35;cursor:default}
.card-slider-controls button svg{width:16px;height:16px}
@media(max-width:1024px){
  .card-slider-track{
    display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;
    gap:13px!important;overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x mandatory;scroll-padding-inline:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    align-items:stretch;min-width:0;width:100%;max-width:100%;padding:2px 2px 9px;
  }
  .card-slider-track::-webkit-scrollbar{display:none}
  .card-slider-track > *{
    flex:0 0 calc((100% - 20px) / 2.15)!important;
    min-width:0!important;max-width:none!important;
    scroll-snap-align:start;scroll-snap-stop:normal;
    height:auto;
  }
  .card-slider-track > .p-empty,
  .card-slider-track > .empty-state{min-height:175px}
  .card-slider-controls{display:flex}
  .p-trust-list.card-slider-track{gap:7px!important}
  .p-trust-list.card-slider-track > *{flex-basis:calc((100% - 15px) / 2.5)!important;justify-content:center}
  .p-strength-items.card-slider-track > *{min-height:145px}
  .p-updates-grid.card-slider-track > *{display:flex;flex-direction:column}
  .p-updates-grid.card-slider-track .p-update-box{flex:1}
  .p-photo-grid.card-slider-track > .p-photo-tile,
  .p-facility-grid.card-slider-track > .p-facility-card{height:220px!important;min-height:220px}
  .activity-grid.card-slider-track .activity-card{height:auto}
  .bulletin-grid.card-slider-track > *{min-height:200px}
}
@media(max-width:650px){
  .card-slider-track{gap:11px!important}
  .card-slider-track > *{flex-basis:86%!important}
  .p-trust-list.card-slider-track > *{flex-basis:72%!important}
  .card-slider-track .p-photo-tile,
  .card-slider-track .p-facility-card{min-height:210px}
  .card-slider-track .p-award-card{min-height:185px}
  .card-slider-track .card{min-height:190px}
  .card-slider-track .activity-media{aspect-ratio:1.55/1}
  .card-slider-controls{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.card-slider-track{scroll-behavior:auto!important}}




/* v4.8 — Scoped change: inset, rounded catalog panel for the strengths section.
   All other sections remain as in v4.7. Brand color remains flat/solid. */
.p-strength-section {
  background:var(--bg) !important;
  color:#fff;
  padding:clamp(24px,3vw,42px) 0 clamp(18px,2.3vw,34px) !important;
}
.p-strength-section > .p-strength-grid {
  background:var(--p);
  border-radius:26px;
  padding:clamp(30px,3.1vw,48px) clamp(28px,3.6vw,56px);
  gap:clamp(26px,3.1vw,48px);
  overflow:hidden;
}
.p-strength-section .p-strength-title h2 {margin:10px 0 13px;}
.p-strength-section .p-strength-title p {margin-bottom:19px;}
.p-strength-section .p-strength-items article {
  padding:17px 19px;
  border-radius:13px;
}

.p-strength-section .card-slider-controls .card-slider-count{color:rgba(255,255,255,.86)}
.p-strength-section .card-slider-controls button{color:#fff;border-color:rgba(255,255,255,.43);background:rgba(255,255,255,.12)}
.p-strength-section .card-slider-controls button:not(:disabled):hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.2)}
/* Preserve tablet/mobile card swipe while keeping the panel compact. */
@media (max-width:1024px) {
  .p-strength-section > .p-strength-grid {
    grid-template-columns:1fr;
    gap:24px;
    border-radius:22px;
    padding:30px 26px;
  }
  .p-strength-section .card-slider-controls {grid-column:1; margin-top:-10px;}
}
@media (max-width:650px) {
  .p-strength-section {padding:18px 0 24px !important;}
  .p-strength-section > .p-strength-grid {border-radius:18px;padding:26px 19px;gap:18px;}
  .p-strength-section .p-strength-items article {padding:17px;}
}


/* v4.9: ONLY compact principal desktop and demo content. Inherits flat 2-color system. */
@media(min-width:1025px){
 .p-intro-section{padding:35px 0 44px!important;background:var(--alt)!important}
 .p-intro-section .container.p-intro-grid{max-width:min(100% - 60px,1020px);grid-template-columns:132px minmax(0,1fr);gap:26px;min-height:211px;padding:23px 29px;border-radius:19px;box-shadow:0 8px 30px rgba(14,38,60,.035);border:1px solid var(--border);align-items:center}
 .p-intro-section .p-welcome-visual{padding:0;width:132px;margin:0}
 .p-intro-section .p-welcome-photo{width:132px;height:165px;aspect-ratio:4/5;border-radius:12px;background:#E4EDF2}
 .p-intro-section .p-person-placeholder{padding:12px 7px;gap:7px;font-size:11px}
 .p-intro-section .p-person-placeholder svg{width:35px;height:35px}
 .p-intro-section .p-person-placeholder strong{font-size:10px;line-height:1.3}
 .p-intro-section .p-person-placeholder small{font-size:9px;line-height:1.4}
 .p-intro-section .p-welcome-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-width:0}
 .p-intro-section .p-welcome-copy>.p-eyebrow,.p-intro-section .p-welcome-copy>h2,.p-intro-section .p-welcome-copy>.p-title-rule,.p-intro-section .p-welcome-copy>p{grid-column:1/-1}
 .p-intro-section .p-welcome-copy>h2{font-size:clamp(21px,1.8vw,27px);margin:5px 0 7px;letter-spacing:-.04em}
 .p-intro-section .p-welcome-copy>.p-title-rule{width:38px;height:2px;margin:2px 0 10px}
 .p-intro-section .p-welcome-copy>p{font-size:clamp(13px,.9vw,14.5px);line-height:1.5;margin:0 0 12px;max-width:690px}
 .p-intro-section .p-signature{grid-column:1;align-items:center;margin:0}
 .p-intro-section .p-signature strong{font-size:12px}
 .p-intro-section .p-signature small{font-size:11px}
 .p-intro-section .p-sign-line{width:28px}
 .p-intro-section .p-welcome-copy>.portal-mini-action{grid-column:2;margin:0;align-self:center;border:1px solid var(--border);border-radius:9px;font-weight:800;font-size:12px;min-height:38px;padding:9px 13px;background:#fff;white-space:nowrap}
 .p-intro-section .p-welcome-copy>.portal-mini-action:hover{border-color:var(--p);background:var(--alt)}
}
@media(min-width:651px) and (max-width:1024px){
 .p-intro-section .p-intro-grid{grid-template-columns:120px minmax(0,1fr);gap:19px;padding:21px}
 .p-intro-section .p-welcome-photo,.p-intro-section .p-welcome-visual{width:120px}
 .p-intro-section .p-welcome-copy h2{font-size:21px}
 .p-intro-section .p-signature{margin:12px 0}
}
/* Demo content: visible label prevents sample content being mistaken for real school events. */
.demo-disclaimer{background:#FFF7E9;border-block:1px solid #F1E1C1;padding:9px 0;color:#65451A;font-size:12px}
.demo-disclaimer .container{display:flex;align-items:center;gap:10px;line-height:1.45}
.demo-disclaimer strong{background:#F1DBAD;padding:3px 8px;border-radius:6px;font-size:10px;letter-spacing:.06em;white-space:nowrap}
.demo-tag{display:inline-flex;align-items:center;border:1px solid #E4C993;background:#FFF4DF;color:#85571C;font-size:10px;letter-spacing:.07em;font-weight:800;padding:3px 7px;border-radius:6px;text-transform:uppercase;width:max-content}
.demo-media{display:block;position:relative;overflow:hidden;background:#E9F2F3}
.demo-media img{width:100%;height:100%;object-fit:cover;display:block}
.demo-meta{font-size:12px;color:var(--muted);font-weight:600;line-height:1.5}
.demo-card{border:1px solid var(--border);border-radius:15px;background:var(--surface);overflow:hidden;min-width:0;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}
.demo-card:hover{transform:translateY(-3px);border-color:var(--p)}
.demo-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.demo-card h3{font-size:clamp(15px,1.05vw,18px);line-height:1.4;letter-spacing:-.015em;margin:0;color:var(--ink)}
.demo-card p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.demo-card-link{display:inline-flex;align-items:center;color:var(--p);font-size:12px;font-weight:800;margin-top:auto;padding-top:8px;gap:8px}
.demo-card .demo-media{aspect-ratio:16/9}
.demo-card .demo-media.portrait{aspect-ratio:4/5}
.demo-card .demo-media.square{aspect-ratio:4/3}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.demo-grid.teachers{grid-template-columns:repeat(4,minmax(0,1fr))}
.demo-grid.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo-grid.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo-grid .demo-card .demo-media.portrait{aspect-ratio:4/3}
.demo-card.person .demo-media{height:165px;aspect-ratio:auto}
.demo-card.person .demo-media img{object-position:center 15%}
.demo-list-item{display:flex;align-items:center;gap:15px;padding:15px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.demo-list-item:last-child{border-bottom:0}
.demo-list-item:hover{background:var(--alt)}
.demo-dateblock{width:57px;min-width:57px;height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:10px;background:#E8F2F2;color:var(--p)}
.demo-dateblock strong{font-size:19px;line-height:1.15}
.demo-dateblock small{font-size:10px;font-weight:800;text-transform:uppercase}
.demo-list-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.demo-list-copy strong{font-size:14px;line-height:1.4;color:var(--ink)}
.demo-list-copy small{font-size:11px;color:var(--muted)}
.demo-list-arrow{color:var(--p);font-weight:900}
.p-update-box .demo-list-item{background:transparent}
.demo-detail{max-width:840px;margin-inline:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(22px,4vw,45px)}
.demo-detail h2{font-size:clamp(23px,2.5vw,33px);margin:13px 0 12px;line-height:1.3}
.demo-detail p{font-size:clamp(14px,1.1vw,16px);line-height:1.8;color:var(--muted)}
.demo-detail .demo-media{border-radius:13px;aspect-ratio:16/8;margin:20px 0}
.demo-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:12px}
.demo-breadcrumb a{color:var(--p);font-weight:700}
.demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.demo-btn{padding:10px 14px;min-height:39px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--p);font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.demo-btn:hover{border-color:var(--p);background:var(--alt)}
.demo-btn.primary{background:var(--p);color:var(--onP,#fff);border-color:var(--p)}
.demo-media-button{padding:0;border:0;cursor:pointer;text-align:left;width:100%;background:transparent;display:block}
.demo-media-button:focus-visible{outline:3px solid var(--s);outline-offset:2px}
.demo-media-button .demo-media{border-radius:10px 10px 0 0}
.demo-modal{border:none;border-radius:18px;width:min(90vw,850px);max-height:90vh;padding:0;box-shadow:0 20px 90px #001a30a6;overflow:hidden;background:#fff;color:#1A1A1A}
.demo-modal::backdrop{background:rgba(2,19,28,.75)}
.demo-modal-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #e4eaed}
.demo-modal-heading h2{font-size:16px;margin:0;color:#1A1A1A}
.demo-modal-content{padding:16px;max-height:calc(90vh - 66px);overflow:auto}
.demo-modal-content img{max-width:100%;width:100%;max-height:65vh;object-fit:contain;background:#e9f2f3;border-radius:9px}
.demo-modal-content video{max-width:100%;width:100%;aspect-ratio:16/9;border-radius:9px;background:#00566A}
.demo-modal-content p{margin:10px 0 0;font-size:13px;color:#5f6b74;line-height:1.5}
.demo-modal-close{border:1px solid #dee5e8;border-radius:8px;background:#fff;padding:7px 12px;font-weight:700;cursor:pointer}
.demo-demo-form{display:grid;gap:12px;max-width:750px;margin-top:23px}
.demo-demo-form label{display:grid;gap:5px;font-size:13px;font-weight:700}
.demo-demo-form input,.demo-demo-form select,.demo-demo-form textarea{border:1px solid #cfdce0;border-radius:9px;background:#fff;padding:11px 12px;min-height:43px;font:inherit;font-size:14px;color:#1a1a1a}
.demo-demo-form [role=status]{min-height:24px;font-size:12px;color:var(--p);font-weight:700}
/* Let v4.7 script promote demo collections to touch carousels without altering desktop cards. */
.p-gallery-grid,.p-video-grid,.p-news-grid,.p-testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.p-news-grid.is-single{grid-template-columns:minmax(0,420px);max-width:420px}
.p-news-grid.is-single>.demo-card{width:100%}
.p-teacher-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){
 .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .demo-grid.teachers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .demo-grid.gallery,.demo-grid.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .p-gallery-grid.card-slider-track,.p-video-grid.card-slider-track,.p-news-grid.card-slider-track,.p-testimonial-grid.card-slider-track{display:flex}
 .p-gallery-grid.card-slider-track>.demo-card,.p-video-grid.card-slider-track>.demo-card,.p-news-grid.card-slider-track>.demo-card,.p-testimonial-grid.card-slider-track>.demo-card{flex:0 0 46%}
}
@media(max-width:650px){
 .demo-disclaimer{font-size:11px}
 .demo-disclaimer .container{padding-block:2px}
 .demo-grid,.demo-grid.teachers,.demo-grid.gallery,.demo-grid.quotes{grid-template-columns:1fr}
 .p-news-grid.is-single{grid-template-columns:minmax(0,1fr);max-width:none}
 .p-gallery-grid.card-slider-track>.demo-card,.p-video-grid.card-slider-track>.demo-card,.p-news-grid.card-slider-track>.demo-card,.p-testimonial-grid.card-slider-track>.demo-card{flex-basis:86%}
 .demo-detail{padding:18px}
 .demo-list-item{padding:11px;gap:10px}
 .demo-list-copy strong{font-size:12.5px}
 .demo-dateblock{width:48px;min-width:48px;height:50px}
 .p-intro-grid .p-welcome-copy>.portal-mini-action{margin-top:6px}
}
[data-mode=dark] .demo-card,[data-mode=dark] .demo-detail{background:var(--surface);color:var(--ink);border-color:var(--border)}
[data-mode=dark] .demo-card h3,[data-mode=dark] .demo-list-copy strong{color:var(--ink)}

@media(min-width:1025px){.p-intro-section .p-welcome-copy>.portal-mini-action{border:1px solid var(--border)!important;display:inline-flex!important;background:#fff!important;border-radius:9px!important;padding:10px 14px!important;color:var(--p)!important;text-decoration:none!important;min-height:40px;align-items:center;justify-content:center}}

/* v4.9.3 - Dock bounded by the actual visual viewport on mobile browsers.
   Keep this the LAST style layer; design from v4.9 is unchanged. */
:root{--slb-header-height:66px;--slb-dock-height:62px;--slb-dock-visual-shift:0px}
@media(max-width:1024px){
  .header{position:sticky!important;top:0!important;z-index:240!important;overflow:visible}
  html{scroll-padding-top:calc(var(--slb-header-height) + 10px)}
}
@media(max-width:700px){
  html{scroll-padding-bottom:calc(var(--slb-dock-height) + 16px)}
  body{padding-bottom:0!important;min-height:100%;overflow-x:clip}
  .footer{padding-bottom:calc(var(--slb-dock-height) + 24px + env(safe-area-inset-bottom,0px))!important}
  .mobile-bottom-nav{
    display:grid!important;position:fixed!important;
    inset:auto 0 0 0!important;
    width:100%!important;max-width:none!important;margin:0!important;
    z-index:300!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1px;
    padding:6px max(5px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(5px,env(safe-area-inset-left,0px));
    background:#fff;
    border-top:1px solid #d9e5e8;
    box-shadow:0 -3px 14px rgba(0,37,45,.08);
    min-height:62px;overflow:visible;
    transform:translate3d(0,calc(-1 * var(--slb-dock-visual-shift)),0)!important;
    transition:none!important;
    will-change:transform;
  }
  .mobile-bottom-nav a,.mobile-bottom-nav button{min-height:48px;min-width:0;overflow:visible}
  .mobile-nav:not([hidden]){
    position:fixed!important;top:auto!important;
    bottom:calc(var(--slb-dock-height) + var(--slb-dock-visual-shift) + 4px)!important;
    left:8px!important;right:8px!important;z-index:299!important;
    max-height:min(62dvh,calc(100dvh - var(--slb-dock-height) - var(--slb-header-height) - 20px))!important;
    overflow-y:auto!important;overscroll-behavior:contain;
    border:1px solid var(--border);border-radius:14px 14px 0 0;
    box-shadow:0 -12px 28px rgba(0,25,40,.18);background:var(--surface);
  }
  .color-toggle{bottom:calc(var(--slb-dock-height) + var(--slb-dock-visual-shift) + 14px)!important}
  .color-panel:not([hidden]){bottom:calc(var(--slb-dock-height) + var(--slb-dock-visual-shift) + 68px)!important;max-height:min(60dvh,500px);overflow-y:auto}
  .whatsapp-fab{bottom:calc(var(--slb-dock-height) + var(--slb-dock-visual-shift) + 30px)!important}
  html.slb-keyboard-active .mobile-bottom-nav,
  html.slb-keyboard-active .color-toggle,
  html.slb-keyboard-active .whatsapp-fab,
  html.slb-keyboard-active .mobile-nav:not([hidden]){visibility:hidden!important}
}
@media(min-width:701px){.mobile-bottom-nav{display:none!important}}

/* v4.9.4: HEAD ONLY. Keep the tested v4.9.3 bottom navigation untouched.
   Fixed header + in-flow spacer prevent layout jump and dynamic viewport clipping. */
:root { --slb-header-viewport-top:0px; --slb-header-fixed-height:68px; }
.slb-header-spacer { display:none; }
@media (max-width:1024px) {
  .header {
    position:fixed!important;
    inset-inline:0!important;
    width:100%!important;
    top:var(--slb-header-viewport-top)!important;
    bottom:auto!important;
    z-index:240!important;
    overflow:visible!important;
    margin:0!important;
    transform:none!important;
    transition:none!important;
  }
  .slb-header-spacer {
    display:block;
    height:var(--slb-header-fixed-height);
    min-height:0;
    pointer-events:none;
  }
  /* Avoid card/image elements being painted above the header. */
  .header .header-inner { isolation:isolate; }
  html {scroll-padding-top:calc(var(--slb-header-fixed-height) + 10px);}
}
@media (min-width:701px) and (max-width:1024px) {
  .header .mobile-nav:not([hidden]) {
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100dvh - var(--slb-header-fixed-height) - 12px);
    overflow:auto;overscroll-behavior:contain;
    box-shadow:0 16px 25px rgba(0,0,0,.08);
  }
}
@media(min-width:1025px) {.slb-header-spacer {display:none!important}}

/* SLB Portal v4.10 — targeted UI polish, preserve established v4.9.4 design. */
/* Header: social icons belong in the footer/mobile menu, not crowded phone/tablet topbars. */
@media (max-width:1024px){
  .topbar .socials,.topbar [data-social-links]{display:none!important}
  .topbar .container{min-width:0;overflow:hidden}
  .topbar-list{min-width:0;max-width:100%;overflow:hidden}
  .topbar-list a,.topbar-list span{min-width:0}
  /* Keep all five trust highlights in a deliberate three-row composition. */
  .p-trust-list,.advantages{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;overflow:visible!important;max-width:100%;padding:0!important}
  .p-trust-list>div,.advantages>.advantage{min-width:0;max-width:none;white-space:normal;box-sizing:border-box;justify-content:center;text-align:center;flex:initial!important;min-height:66px;padding:13px 9px!important;border-bottom:1px solid var(--border)}
  .p-trust-list>div:first-child,.advantages>.advantage:first-child{grid-column:1/-1;background:var(--alt);border-right:0!important}
  .p-trust-list>div:nth-child(odd):not(:first-child),.advantages>.advantage:nth-child(odd):not(:first-child){border-right:0!important}
  .p-trust-list>div:nth-child(even),.advantages>.advantage:nth-child(even){border-right:1px solid var(--border)!important}
  .p-trust-list>div:nth-last-child(-n+2),.advantages>.advantage:nth-last-child(-n+2){border-bottom:0}
  .p-trust-list strong,.advantages>.advantage{font-size:clamp(11px,1.5vw,13px)!important;line-height:1.35}
  /* All section cards retain touch/trackpad swipe but no demo-style counts/arrows. */
  .card-slider-controls{display:none!important}
}
@media(max-width:650px){
 .topbar-list a[href^="mailto:"]{min-width:0;max-width:calc(100vw - 154px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .p-trust-list>div,.advantages>.advantage{min-height:61px;gap:7px}
 .p-trust-list svg,.advantages svg{width:19px;height:19px}
 .p-trust-list strong,.advantages>.advantage{font-size:11px!important}
}
/* The new 'Lihat Semua' buttons live beneath the content, not in section headings. */
.p-section-action{display:flex;justify-content:center;align-items:center;margin-top:22px;gap:12px}
.p-section-action .p-see-all{display:inline-flex;justify-content:center;align-items:center;min-height:39px;padding:9px 18px;border:1px solid var(--border);background:var(--surface);border-radius:9px;color:var(--p);text-decoration:none;white-space:nowrap;font-size:12px;font-weight:800}
.p-section-action .p-see-all:hover{border-color:var(--p);background:var(--alt);text-decoration:none}
/* Agenda and Pengumuman keep their separate bottom actions in each column. */
.p-update-column{min-width:0;display:flex;flex-direction:column}
.p-update-column .p-update-box{flex:1}
.p-update-column .p-section-action{margin-top:16px;justify-content:center}
@media(max-width:1024px){.p-update-column.card-slider-track{display:flex!important}.p-updates-grid.card-slider-track>.p-update-column{display:flex;flex-direction:column}}



/* v4.11 — principal identity below portrait; rest of the v4.10 layout untouched */
.p-intro-section .container.p-intro-grid{
  grid-template-columns:minmax(0,172px) minmax(0,1fr);
  gap:clamp(22px,2.8vw,35px);align-items:center;
  padding:25px 30px;min-height:0;
}
.p-intro-section .p-welcome-visual{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  width:172px;max-width:100%;padding:0;margin:0;text-align:center;
}
.p-intro-section .p-welcome-photo{
  width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;
  overflow:hidden;background:#E4EDF2;flex:0 0 auto;
}
.p-intro-section .p-principal-identity{width:100%;display:grid;gap:5px;padding:0 2px;min-width:0}
.p-intro-section .p-principal-identity strong{
  display:block;color:var(--ink);font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;
  font-size:clamp(12px,.92vw,14px);font-weight:800;line-height:1.42;
  overflow-wrap:anywhere;
}
.p-intro-section .p-principal-identity small{
  display:block;font-size:clamp(10px,.75vw,12px);font-weight:600;
  line-height:1.45;color:var(--muted);
}
.p-intro-section .p-welcome-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.p-intro-section .p-welcome-copy>.p-eyebrow,
.p-intro-section .p-welcome-copy>h2,
.p-intro-section .p-welcome-copy>.p-title-rule,
.p-intro-section .p-welcome-copy>p{grid-column:auto}
.p-intro-section .p-welcome-copy>.portal-mini-action{
  grid-column:auto;align-self:flex-start;margin:9px 0 0;
  white-space:normal;min-height:38px;
}
@media(min-width:651px) and (max-width:1024px){
  .p-intro-section .container.p-intro-grid{grid-template-columns:154px minmax(0,1fr);gap:22px;padding:23px 24px}
  .p-intro-section .p-welcome-visual{width:154px}
  .p-intro-section .p-principal-identity strong{font-size:12.5px}
}
@media(max-width:650px){
  .p-intro-section .container.p-intro-grid{
    grid-template-columns:128px minmax(0,1fr);gap:16px;
    padding:16px;align-items:center;
  }
  .p-intro-section .p-welcome-visual{width:128px;gap:9px;margin:0}
  .p-intro-section .p-principal-identity strong{font-size:11.5px;line-height:1.42}
  .p-intro-section .p-principal-identity small{font-size:10.5px}
  .p-intro-section .p-welcome-copy h2{font-size:clamp(16px,4.4vw,20px);line-height:1.33;margin:4px 0 9px}
  .p-intro-section .p-welcome-copy p{font-size:12.5px;line-height:1.55;margin-bottom:8px}
  .p-intro-section .p-welcome-copy>.portal-mini-action{margin-top:6px;font-size:11px;min-height:36px;padding:8px 11px}
}
@media(max-width:370px){
  .p-intro-section .container.p-intro-grid{grid-template-columns:106px minmax(0,1fr);gap:12px;padding:13px}
  .p-intro-section .p-welcome-visual{width:106px;gap:8px}
  .p-intro-section .p-principal-identity strong{font-size:10.5px}
  .p-intro-section .p-principal-identity small{font-size:10px}
  .p-intro-section .p-welcome-copy h2{font-size:16px}
  .p-intro-section .p-welcome-copy p{font-size:12px}
  .p-intro-section .p-welcome-copy>.portal-mini-action{font-size:10.5px;padding:7px 8px}
}


/* SLB Portal v4.12 – sambutan portrait & configurable proportions ONLY */
:root {
  --principal-desktop-width: 210px;
  --principal-mobile-width: 132px;
  --principal-photo-ratio: 4 / 5;
  --principal-image-fit: contain;
}
.p-intro-section .container.p-intro-grid {
  display: grid;
  grid-template-columns: var(--principal-desktop-width) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  min-height: 0;
  padding: clamp(21px, 2.3vw, 30px);
}
.p-intro-section .p-welcome-visual {
  width: 100%; max-width:100%; margin:0;
  padding:0!important; display:block; text-align:left;
}
.p-intro-section .p-welcome-visual .p-principal-identity {display:none!important}
.p-intro-section .p-welcome-photo {
  display:block; position:relative; width:100%; height:auto;
  aspect-ratio: var(--principal-photo-ratio);
  border-radius:13px; overflow:hidden;
  background:#E4EDF2;
}
.p-intro-section .p-welcome-photo > img[data-headmaster-image] {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  object-fit:var(--principal-image-fit); object-position:center 12%;
}
.p-intro-section .p-welcome-photo .p-person-placeholder {
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column; gap:11px; padding:clamp(9px,1.5vw,18px);
  border:0;background:transparent;text-align:center;
}
.p-intro-section .p-welcome-photo .p-person-placeholder strong{font-size:clamp(10px,.76vw,13px);line-height:1.4}
.p-intro-section .p-welcome-photo .p-person-placeholder small{font-size:clamp(9px,.7vw,11px);line-height:1.4}
.p-intro-section .p-welcome-copy {
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:0; min-width:0;
}
.p-intro-section .p-welcome-copy>.p-eyebrow,
.p-intro-section .p-welcome-copy>h2,
.p-intro-section .p-welcome-copy>.p-title-rule,
.p-intro-section .p-welcome-copy>p {grid-column:auto}
.p-intro-section .p-welcome-copy>p {max-width:700px;margin:0 0 10px;line-height:1.65}
.p-intro-section .p-principal-identity {
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  margin:3px 0 12px;padding-left:12px;border-left:3px solid var(--s);
  text-align:left;max-width:100%;width:auto;
}
.p-intro-section .p-principal-identity strong {
  font:800 clamp(13px,.95vw,15px)/1.45 'Plus Jakarta Sans',Inter,system-ui,sans-serif;
  color:var(--ink);overflow-wrap:anywhere;
}
.p-intro-section .p-principal-identity small {
  font-size:clamp(11px,.74vw,12px);line-height:1.5;
  font-weight:500;color:var(--muted)
}
.p-intro-section .p-welcome-copy>.portal-mini-action {
  align-self:flex-start;grid-column:auto;margin:0;min-height:38px;
  border:1px solid var(--border)!important;
  background:var(--surface)!important;color:var(--p)!important;
  border-radius:9px;font-size:12px;font-weight:800;
  white-space:normal;padding:9px 13px;
}
.p-intro-section .p-welcome-copy>.portal-mini-action:hover{border-color:var(--p)!important}
/* Full portrait on modal too. */
.greeting-dialog-photo.portrait-frame > img[data-headmaster-image] {
  object-fit:var(--principal-image-fit)!important;
  object-position:center 24%;
}
/* Tablet retains split layout but respects photo width preference. */
@media (min-width:651px) and (max-width:1024px) {
  .p-intro-section .container.p-intro-grid {
    grid-template-columns:min(var(--principal-desktop-width), 32%) minmax(0,1fr);
    gap:20px;padding:23px;
  }
  .p-intro-section .p-welcome-visual,
  .p-intro-section .p-welcome-photo{width:100%}
}
@media(max-width:650px) {
  .p-intro-section .container.p-intro-grid {
    grid-template-columns:min(var(--principal-mobile-width),43%) minmax(0,1fr);
    gap:clamp(12px,3.5vw,17px);
    align-items:center;padding:clamp(13px,4vw,18px);
  }
  .p-intro-section .p-welcome-visual,
  .p-intro-section .p-welcome-photo{width:100%;margin:0}
  .p-intro-section .p-welcome-copy h2 {font-size:clamp(16px,4.25vw,20px);line-height:1.35;margin:4px 0 9px}
  .p-intro-section .p-welcome-copy>p {font-size:clamp(12px,3.25vw,13.5px);line-height:1.55;margin-bottom:9px}
  .p-intro-section .p-welcome-photo .p-person-placeholder{padding:8px;gap:8px}
  .p-intro-section .p-welcome-photo .p-person-placeholder svg{width:32px;height:32px}
  .p-intro-section .p-welcome-photo .p-person-placeholder strong{font-size:10px}
  .p-intro-section .p-welcome-photo .p-person-placeholder small{display:none}
  .p-intro-section .p-principal-identity {margin:1px 0 11px;padding-left:9px;border-left-width:2px}
  .p-intro-section .p-principal-identity strong {font-size:clamp(11px,2.95vw,13px);line-height:1.35}
  .p-intro-section .p-principal-identity small{font-size:10.5px}
  .p-intro-section .p-welcome-copy>.portal-mini-action{font-size:11px;padding:8px 10px;margin-top:0}
}
@media(max-width:370px){
  .p-intro-section .container.p-intro-grid{grid-template-columns:min(var(--principal-mobile-width),40%) minmax(0,1fr);gap:11px;padding:12px}
  .p-intro-section .p-welcome-copy>p{font-size:12px}
  .p-intro-section .p-principal-identity strong{font-size:11px}
}
/* Optional identity placement stays configurable without changing the default. */
.p-intro-section[data-identity-position="photo"] .p-welcome-copy>.p-principal-identity {display:none!important}
.p-intro-section[data-identity-position="photo"] .p-welcome-visual>.p-principal-identity {
  display:flex!important; width:100%;margin:11px 0 0;align-items:flex-start;
}
/* Settings widgets */
.principal-settings summary{font-size:12px;font-weight:800;cursor:pointer;padding:2px 0}
.principal-settings{border:1px solid #dce6ea;border-radius:9px;padding:11px 12px;margin:10px 0}
.principal-settings .settings-field{margin-top:11px}
.principal-settings input[type=range]{width:100%;margin:9px 0 2px;accent-color:var(--p)}
.principal-settings select{width:100%;margin-top:5px;border:1px solid #CDD7DB;border-radius:7px;padding:9px 10px;background:#fff;color:#1A1A1A;font-size:12px}
.principal-settings .setting-value{font-size:11px;font-weight:700;color:var(--p);float:right}

/* Header controls: direct search and light/dark mode, without mobile menu toggles. */
#theme-mode [hidden]{display:none!important}
html[data-mode=dark] .brand small,
html[data-mode=dark] .subnav a:hover,
html[data-mode=dark] .iconbtn:hover{color:#A9E7F0}
html[data-mode=dark] .search-popup{
  background:var(--surface);color:var(--ink);border-color:var(--border)
}
html[data-mode=dark] .search-popup input{
  background:var(--alt);color:var(--ink);border-color:var(--border)
}
html[data-mode=dark] .search-popup input::placeholder{color:var(--muted)}
html[data-mode=dark] .search-results a{color:var(--heading)}
html[data-mode=dark] .advantage svg,
html[data-mode=dark] .p-trust-list svg{color:#62C9D9}
@media(max-width:1024px){
  .nav,.header-cta,.hamburger,.mobile-nav{display:none!important}
  .header-tools{margin-left:auto}
}
@media(max-width:700px){
  .mobile-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html[data-mode=dark] .mobile-bottom-nav{
    background:var(--surface)!important;border-top-color:var(--border)!important;
    box-shadow:0 -3px 14px rgba(0,0,0,.22)
  }
  html[data-mode=dark] .mobile-bottom-nav a{color:var(--muted)}
  html[data-mode=dark] .mobile-bottom-nav .is-current,
  html[data-mode=dark] .mobile-bottom-nav a:hover{
    color:#B9EEF5;background:#193B46
  }
}
/* WordPress CMS view refinements */
.sfb-hidden{display:none!important}.slbp-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0}.slbp-archive-grid .demo-card{min-width:0}.slbp-single{max-width:850px!important}.slbp-single h1{font-size:clamp(24px,3vw,40px);margin:16px 0 26px}.slbp-entry{font-size:16px;line-height:1.75;margin:22px 0}.slbp-entry img{max-width:100%;height:auto}.slbp-demo-warning{padding:10px 15px;background:#fff5df;border:1px solid #edcc88;color:#79500e;border-radius:9px}.slbp-archive-grid .demo-media{aspect-ratio:4/3;overflow:hidden;display:block}.slbp-archive-grid .demo-media img{width:100%;height:100%;object-fit:cover}.slbp-page-content{max-width:900px;margin:0 auto}.socials a{display:grid;place-items:center;min-width:22px;min-height:22px;font-size:12px;font-weight:800}.hero-slide-cta[hidden]{display:none!important}
@media(max-width:1024px){.slbp-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.slbp-archive-grid{grid-template-columns:repeat(1,minmax(0,1fr))}.slbp-single h1{font-size:24px}}
.sblp-wp-menu{display:flex;gap:18px;list-style:none;padding:0;margin:0;align-items:center}.slbp-wp-menu{display:flex;gap:18px;list-style:none;padding:0;margin:0;align-items:center}.slbp-wp-menu li{position:relative;list-style:none}.slbp-wp-menu a{display:block;font-weight:700;font-size:13px;padding:15px 6px;text-decoration:none}.slbp-wp-menu ul.sub-menu{display:none;position:absolute;top:100%;left:0;background:var(--surface,#fff);min-width:210px;box-shadow:0 15px 45px #0002;border:1px solid #e3e7ef;z-index:200;list-style:none;padding:8px 12px;border-radius:12px}.slbp-wp-menu li:hover>ul.sub-menu,.slbp-wp-menu li:focus-within>ul.sub-menu{display:block}.slbp-mobile-wp-menu{list-style:none;padding:10px;margin:0}.slbp-mobile-wp-menu a{display:block;padding:12px;border-bottom:1px solid #eee}.slbp-mobile-wp-menu ul.sub-menu{padding-left:20px;list-style:none}.socials a svg{max-width:18px;max-height:18px}

/* Dark mode surface correction for the compact welcome block. */
html[data-mode=dark] .p-intro-section{background:var(--alt)!important}
html[data-mode=dark] .p-intro-section .p-intro-grid{background:var(--surface)!important;border-color:var(--border)!important}
html[data-mode=dark] .p-intro-section .p-welcome-photo{background:#29434f}
html[data-mode=dark] .p-intro-section .p-person-placeholder{color:#bce4ed}
html[data-mode=dark] .p-intro-section .p-eyebrow,
html[data-mode=dark] .p-eyebrow{color:#8bd7ff}
html[data-mode=dark] .p-intro-section .p-welcome-copy h2,
html[data-mode=dark] .p-section-heading h2{color:var(--heading)}
html[data-mode=dark] .p-intro-section .p-welcome-copy h2 em{color:#9ad7ff}
html[data-mode=dark] .p-intro-section .p-welcome-copy p{color:var(--muted)}
html[data-mode=dark] .p-intro-section .p-principal-identity strong{color:var(--heading)}
html[data-mode=dark] .p-intro-section .p-principal-identity small{color:var(--muted)}
html[data-mode=dark] .p-see-all,
html[data-mode=dark] .p-link{color:#9ad7ff}
html[data-mode=dark] .p-intro-section .p-welcome-copy>.portal-mini-action{-webkit-appearance:none!important;appearance:none!important;color-scheme:dark!important;background:#21353e!important;background-color:#21353e!important;background-image:none!important;color:#bce4ed!important;border:1px solid #41565e!important;border-color:#41565e!important}

/* v4.12.6 — match the compact mobile reference without shrinking the copy column. */
@media(max-width:650px){
  .p-intro-section{padding:18px 0!important}
  .p-intro-section .container.p-intro-grid{
    width:calc(100% - 22px);max-width:none;margin-inline:auto;
  }
  .p-intro-section .p-welcome-copy h2{
    font-size:clamp(18px,4.75vw,20px);line-height:1.28;
  }
}

/* v4.13 — the principal greeting follows the same vertical profile-card pattern as staff on compact viewports. */
.p-intro-section .container.p-intro-grid{
  display:flex!important;flex-direction:column;align-items:stretch;gap:0;
  width:min(calc(100% - 40px),420px)!important;max-width:420px!important;
  margin-inline:auto!important;padding:0!important;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--slbp-radius,16px);
  background:var(--surface);box-shadow:0 6px 20px rgba(24,59,113,.04);
}
.p-intro-section .p-welcome-copy{display:contents!important}
.p-intro-section .p-welcome-copy>.p-eyebrow{
  order:1;padding:18px 16px 0;margin:0;
}
.p-intro-section .p-welcome-copy>h2{
  order:2;padding:0 16px;margin:6px 0 15px;
  font-size:clamp(21px,2.1vw,28px);line-height:1.24;
}
.p-intro-section .p-welcome-visual{
  order:3;width:100%!important;max-width:none;padding:0;margin:0;
}
.p-intro-section .p-welcome-photo{
  width:100%!important;height:clamp(165px,22vw,235px)!important;
  aspect-ratio:auto!important;border-radius:0;background:#e4edf2;
}
.p-intro-section .p-welcome-sign{display:none!important}
.p-intro-section .p-principal-identity{
  order:4;align-self:stretch;width:auto;max-width:none;
  margin:0;padding:17px 16px 0;border:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
}
.p-intro-section .p-principal-identity strong{
  font-size:clamp(16px,1.2vw,18px);line-height:1.4;
}
.p-intro-section .p-principal-identity small{font-size:13px;line-height:1.45}
.p-intro-section .p-welcome-copy>p{
  order:5;padding:0 16px;margin:11px 0 0;
  font-size:clamp(13px,.95vw,15px);line-height:1.65;
}
.p-intro-section .p-welcome-copy>.p-title-rule{display:none!important}
.p-intro-section .p-welcome-copy>.portal-mini-action{
  order:6;align-self:flex-start;margin:18px 16px 20px;
  min-height:39px;
}
@media(max-width:650px){
  .p-intro-section{padding:18px 0!important}
  .p-intro-section .container.p-intro-grid{width:calc(100% - 22px)!important;max-width:none!important}
  .p-intro-section .p-welcome-copy>h2{font-size:clamp(20px,5.2vw,24px);line-height:1.28}
  .p-intro-section .p-welcome-photo{height:165px!important}
  .p-intro-section .p-welcome-copy>p{font-size:13px;line-height:1.6}
  .p-intro-section .p-principal-identity strong{font-size:16px}
  .p-intro-section .p-principal-identity small{font-size:12px}
}

/* v4.13.1 — keep the compact profile on mobile and restore the split desktop card. */
.p-intro-section .p-welcome-copy>.p-eyebrow{display:none!important}
@media(min-width:651px){
  .p-intro-section{padding:35px 0 44px!important;background:var(--alt)!important}
  .p-intro-section .container.p-intro-grid{
    display:grid!important;grid-template-columns:210px minmax(0,1fr);
    gap:26px;align-items:center;width:min(calc(100% - 60px),1020px)!important;
    max-width:1020px!important;margin-inline:auto!important;padding:25px 29px!important;
    overflow:visible;border:1px solid var(--border);border-radius:19px;
    background:var(--surface);box-shadow:0 8px 30px rgba(14,38,60,.035);
  }
  .p-intro-section .p-welcome-visual{
    grid-column:1;order:0;width:210px!important;max-width:100%;padding:0;margin:0;
  }
  .p-intro-section .p-welcome-photo{
    width:210px!important;height:auto!important;aspect-ratio:4/5!important;
    border-radius:12px!important;background:#e4edf2;
  }
  .p-intro-section .p-welcome-copy{
    display:flex!important;grid-column:2;order:0;align-items:flex-start;
    justify-content:center;min-width:0;
  }
  .p-intro-section .p-welcome-copy>h2{
    padding:0;margin:6px 0 12px;font-size:clamp(22px,2.1vw,30px);line-height:1.24;
  }
  .p-intro-section .p-welcome-copy>p{padding:0;margin:0 0 11px;max-width:700px}
  .p-intro-section .p-principal-identity{
    margin:3px 0 12px;padding:0 0 0 12px;border-left:3px solid var(--s);
    width:auto;align-self:flex-start;
  }
  .p-intro-section .p-welcome-copy>.portal-mini-action{margin:0;align-self:flex-start}
}

/* v4.15 — neutral dark surfaces, readable actions, and top-aligned desktop section controls. */
@media(min-width:651px){
  .p-section-heading{align-items:flex-start}
  .p-levels-section .p-section-heading{align-items:flex-start}
  .p-section-heading>.portal-mini-action{margin-top:0}

  /* Put every desktop section action in the same heading row as its title. */
  .p-section:not(.p-intro-section):not(.p-updates-section)>.container{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:25px;align-items:start;
  }
  .p-section:not(.p-intro-section):not(.p-updates-section)>.container>.p-section-heading{
    grid-column:1;grid-row:1;width:auto;
  }
  .p-section:not(.p-intro-section):not(.p-updates-section)>.container>.p-section-action{
    grid-column:2;grid-row:1;align-self:end;margin:0 0 31px;
  }
  .p-section:not(.p-intro-section):not(.p-updates-section)>.container>:is(.p-level-grid,.p-teacher-grid,.p-photo-grid,.p-facility-grid,.p-award-grid,.p-gallery-grid,.p-video-grid,.p-news-grid,.p-testimonials-grid){
    grid-column:1/-1;grid-row:2;width:100%;
  }
  .p-updates-section .p-update-column{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:start;
  }
  .p-updates-section .p-update-column>.p-section-heading{grid-column:1;grid-row:1}
  .p-updates-section .p-update-column>.p-section-action{grid-column:2;grid-row:1;align-self:end;margin:0 0 31px}
  .p-updates-section .p-update-column>.p-update-box{grid-column:1/-1;grid-row:2;width:100%}
}

/* Desktop dropdowns open on hover; removing the gap keeps the pointer path continuous. */
@media (hover:hover) and (min-width:1001px){
  .nav-group:hover .subnav{display:block;top:100%}
  .nav-group:hover .chevron{transform:rotate(225deg) translateY(-1px)}
}
html[data-mode=dark]{
  color-scheme:dark;
  --bg:#090b0f;
  --alt:#101419;
  --surface:#171c23;
  --border:#313a45;
  --subtle:#202731;
  --ink:#edf1f5;
  --heading:#ffffff;
  --muted:#aeb8c4;
  --p:#2f91b6!important;
  --s:var(--slbp-secondary-base,#F59E18)!important;
  --onP:#ffffff;
  --slbp-link:var(--slbp-secondary-base,#F59E18);
}
html[data-mode=dark] body{background:var(--bg);color:var(--ink)}
html[data-mode=dark] .hero{background:#0c1117!important}
html[data-mode=dark] .p-strength-section{background:#0e141b!important}
html[data-mode=dark] .p-cta-band{background:#111820!important}
html[data-mode=dark] .footer{background:#080a0d!important}
html[data-mode=dark] :is(.p-light-section,.p-teachers-section,.p-levels-section){background:#101419!important}
html[data-mode=dark] .p-trust-strip{background:var(--surface)!important;border-color:var(--border)!important}
html[data-mode=dark] :is(.p-update-box,.p-level-card,.demo-card,.p-award-card,.p-empty){background:var(--surface)!important;border-color:var(--border)!important;box-shadow:none}
html[data-mode=dark] :is(.p-section-heading h2,.p-level-card h3,.demo-card h3,.p-award-card h3){color:var(--heading)!important}
html[data-mode=dark] :is(.p-levels-section .p-levels-intro,.p-level-card p,.p-update-box .demo-list-copy small,.p-intro-section .p-welcome-copy p){color:var(--muted)!important}
html[data-mode=dark] :is(.p-eyebrow:not(.light),.eyebrow,.p-see-all,.p-link,.p-article-link,.demo-list-arrow,.demo-card-link,.p-level-index,.p-award-card>small,.p-award-icon,.demo-dateblock){color:var(--slbp-secondary-base,var(--s))!important}
html[data-mode=dark] .demo-dateblock{background:#202833!important}
html[data-mode=dark] .demo-list-item{border-color:var(--border)!important}
html[data-mode=dark] .demo-list-item:hover{background:#202731!important}
html[data-mode=dark] .portal-mini-action,
html[data-mode=dark] .p-intro-section .p-welcome-copy>.portal-mini-action{
  background:#1b222b!important;color:var(--slbp-secondary-base,var(--s))!important;border-color:#5b6775!important;
}
html[data-mode=dark] .portal-mini-action:hover{background:#252e39!important;color:#ffffff!important;border-color:var(--slbp-secondary-base,var(--s))!important}
html[data-mode=dark] :is(.p-strength-title,.p-cta-band) .portal-mini-action{background:var(--slbp-secondary-base,var(--s))!important;color:var(--slbp-button-text,var(--onS,#1A1A1A))!important;border-color:var(--slbp-secondary-base,var(--s))!important}
html[data-mode=dark] .p-intro-section .p-welcome-photo{background:#202832!important}
html[data-mode=dark] .p-intro-section .p-person-placeholder{color:#dbe5ef!important}
html[data-mode=dark] :is(.p-trust-list strong,.p-trust-list svg,.advantage svg){color:var(--slbp-secondary-base,var(--s))!important}

/* v4.16 — keep the carousel hierarchy to one H1 while preserving slide typography. */
.hero-slide :is(h1,h2){font-size:clamp(27px,2.35vw,42px);line-height:1.22;max-width:610px;margin:6px 0 18px;color:#fff;letter-spacing:-.04em}
.hero-slide :is(h1,h2) em{color:#fff;font-style:normal}
@media(max-width:700px){.hero-slide :is(h1,h2){font-size:clamp(23px,5.8vw,28px);line-height:1.28;max-width:330px}}

/* Hero CTA text follows the configurable Studio color in both themes. */
.hero-slide .hero-slide-cta{color:var(--hero-cta-text,var(--slbp-hero-cta-text,#1A1A1A))!important}
html[data-mode=dark] .hero-slide .hero-slide-cta{color:var(--hero-cta-text,var(--slbp-hero-cta-text,#1A1A1A))!important}

/* v4.19 — WordPress menu parents keep the same visible dropdown cue as the legacy navigation. */
@media (min-width:1001px){
  .slbp-wp-menu>li.menu-item-has-children>a{
    display:inline-flex;align-items:center;gap:8px;
  }
  .slbp-wp-menu>li.menu-item-has-children>a::after{
    content:"";width:7px;height:7px;flex:0 0 7px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);margin:0 3px 3px 0;
    transition:transform .15s ease;
  }
  .slbp-wp-menu>li.menu-item-has-children:hover>a::after,
  .slbp-wp-menu>li.menu-item-has-children:focus-within>a::after{
    transform:rotate(225deg) translateY(-1px);
  }
}

/* The Studio color is shared by Hero, header, and section CTA buttons. */
.hero-slide .hero-slide-cta,
.header-cta,
.portal-mini-action,
.p-strength-title .portal-mini-action,
.p-cta-band .portal-mini-action,
.p-intro-section .p-welcome-copy>.portal-mini-action,
.portal-mini-action:hover,
html[data-mode=dark] .portal-mini-action,
html[data-mode=dark] .portal-mini-action:hover,
html[data-mode=dark] :is(.p-strength-title,.p-cta-band) .portal-mini-action,
html[data-mode=dark] .p-intro-section .p-welcome-copy>.portal-mini-action{
  color:var(--hero-cta-text,var(--slbp-cta-text,var(--slbp-hero-cta-text,#1A1A1A)))!important;
}

/* Keep light-mode CTA surfaces readable when the shared text color is light. */
html:not([data-mode=dark]) :is(.portal-mini-action,.p-strength-title .portal-mini-action,.p-cta-band .portal-mini-action,.p-intro-section .p-welcome-copy>.portal-mini-action){
  background:var(--slbp-cta-surface,var(--surface))!important;
  border-color:var(--slbp-cta-border,var(--border))!important;
}
html:not([data-mode=dark]) .portal-mini-action:hover{
  background:var(--slbp-cta-surface,var(--surface))!important;
  border-color:var(--slbp-cta-border,var(--border))!important;
}

/* Keep dark-mode CTA surfaces readable for either custom text color. */
html[data-mode=dark] body .portal-mini-action.portal-mini-action,
html[data-mode=dark] body .portal-mini-action.portal-mini-action:hover{
  color:var(--hero-cta-text,var(--slbp-cta-text,var(--slbp-hero-cta-text,#1A1A1A)))!important;
  background:var(--slbp-cta-surface,#151a21)!important;
  border-color:var(--slbp-cta-border,#46515e)!important;
}

/* Use a secondary-color indicator for hover and active menu states instead of text underlines. */
@media (hover:hover) and (min-width:1001px){
  .slbp-wp-menu>li>a,
  .slbp-wp-menu ul.sub-menu a{
    position:relative;
    color:var(--heading);
    text-decoration:none!important;
  }
  .slbp-wp-menu>li>a::before,
  .slbp-wp-menu ul.sub-menu a::before{
    content:"";
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;
    height:2px;
    border-radius:2px;
    background:var(--s);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .16s ease;
  }
  .slbp-wp-menu ul.sub-menu a::before{
    left:12px;
    right:12px;
    bottom:5px;
  }
  .slbp-wp-menu>li:hover>a,
  .slbp-wp-menu>li:focus-within>a,
  .slbp-wp-menu>li.current-menu-item>a,
  .slbp-wp-menu>li.current-menu-ancestor>a,
  .slbp-wp-menu>li.current-menu-parent>a,
  .slbp-wp-menu ul.sub-menu li:hover>a,
  .slbp-wp-menu ul.sub-menu li:focus-within>a,
  .slbp-wp-menu ul.sub-menu li.current-menu-item>a,
  .slbp-wp-menu ul.sub-menu li.current-menu-ancestor>a,
  .slbp-wp-menu ul.sub-menu li.current-menu-parent>a{
    color:var(--heading)!important;
  }
  .slbp-wp-menu>li:hover>a::before,
  .slbp-wp-menu>li:focus-within>a::before,
  .slbp-wp-menu>li.current-menu-item>a::before,
  .slbp-wp-menu>li.current-menu-ancestor>a::before,
  .slbp-wp-menu>li.current-menu-parent>a::before,
  .slbp-wp-menu ul.sub-menu li:hover>a::before,
  .slbp-wp-menu ul.sub-menu li:focus-within>a::before,
  .slbp-wp-menu ul.sub-menu li.current-menu-item>a::before,
  .slbp-wp-menu ul.sub-menu li.current-menu-ancestor>a::before,
  .slbp-wp-menu ul.sub-menu li.current-menu-parent>a::before{
    transform:scaleX(1);
  }
}

/* v4.26 — all dark-mode accents use the configured Secondary color. */
html body :is(.btn,.portal-mini-action,.p-see-all,.p-btn,.demo-btn,a.mini-action,button.mini-action),
html body .hero-slide .hero-slide-cta,
html body :is(.p-strength-title,.p-cta-band) .portal-mini-action,
html body .p-intro-section .p-welcome-copy>.portal-mini-action{
  background:var(--slbp-secondary-base,var(--s))!important;
  background-color:var(--slbp-secondary-base,var(--s))!important;
  border-color:var(--slbp-secondary-base,var(--s))!important;
  color:var(--slbp-button-text,var(--onS,#1A1A1A))!important;
}
html body :is(.btn,.portal-mini-action,.p-see-all,.p-btn,.demo-btn,a.mini-action,button.mini-action):hover,
html body .hero-slide .hero-slide-cta:hover,
html body :is(.p-strength-title,.p-cta-band) .portal-mini-action:hover,
html body .p-intro-section .p-welcome-copy>.portal-mini-action:hover{
  background:var(--sHover,var(--s))!important;
  background-color:var(--sHover,var(--s))!important;
  border-color:var(--sHover,var(--s))!important;
  color:var(--slbp-button-text,var(--onS,#1A1A1A))!important;
}
html[data-mode=dark] body .portal-mini-action.portal-mini-action,
html[data-mode=dark] body .portal-mini-action.portal-mini-action:hover{
  background:var(--slbp-secondary-base,var(--s))!important;
  background-color:var(--slbp-secondary-base,var(--s))!important;
  border-color:var(--slbp-secondary-base,var(--s))!important;
  color:var(--slbp-button-text,var(--onS,#1A1A1A))!important;
}
html:not([data-mode=dark]) body .portal-mini-action.portal-mini-action.portal-mini-action,
html:not([data-mode=dark]) body .portal-mini-action.portal-mini-action.portal-mini-action:hover,
html[data-mode=dark] body .portal-mini-action.portal-mini-action.portal-mini-action,
html[data-mode=dark] body .portal-mini-action.portal-mini-action.portal-mini-action:hover{
  background:var(--slbp-secondary-base,var(--s))!important;
  background-color:var(--slbp-secondary-base,var(--s))!important;
  border-color:var(--slbp-secondary-base,var(--s))!important;
  color:var(--slbp-button-text,var(--onS,#1A1A1A))!important;
}

/* Page refinements: maps, greeting signature, and inline section labels. */
.profile-map-section{margin-top:34px}.profile-map-block{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}.profile-map-frame{width:100%;aspect-ratio:16/8;min-height:300px;background:var(--alt)}.profile-map-frame iframe{display:block;width:100%;height:100%;min-height:300px;border:0}.profile-map-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}.profile-map-caption span{min-width:0}.profile-map-caption .arrow-link{flex-shrink:0}.profile-map-empty{padding:18px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);background:var(--alt)}.sambutan-section-heading{margin-bottom:20px}.sambutan-page-signature{display:flex;flex-direction:column;gap:3px;margin-top:20px;padding:7px 0 7px 13px;border-left:3px solid var(--s)}.sambutan-page-signature strong{color:var(--heading);font-size:14px;line-height:1.45}.sambutan-page-signature span{color:var(--muted);font-size:12px}.section-heading-inline{align-items:center}.section-heading-inline h2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.section-heading-note{display:inline-flex;align-items:center;gap:8px;color:var(--p);font-size:10px;line-height:1.45;letter-spacing:.075em;font-weight:800;text-transform:uppercase;white-space:nowrap}.section-heading-note .bar{width:19px;height:2px;background:var(--s)}
html[data-mode=dark] .profile-map-block{background:var(--surface);border-color:var(--border)}
html[data-mode=dark] .profile-map-caption{border-color:var(--border);color:var(--muted)}
html[data-mode=dark] .profile-map-empty{background:var(--alt);border-color:var(--border)}
html[data-mode=dark] .sambutan-page-signature strong{color:var(--heading)}
@media(max-width:650px){.profile-map-frame,.profile-map-frame iframe{min-height:240px}.profile-map-caption{align-items:flex-start;flex-direction:column;gap:8px}.section-heading-inline h2{gap:8px}.section-heading-note{font-size:9px}.sambutan-page-signature{margin-top:17px}}

/* Gutenberg is the source of truth for WordPress Page content. */
.slbp-wp-page .page-banner{padding:34px 0}
.slbp-wp-page .page-panel{padding:50px 0 82px}
.slbp-page-content{max-width:var(--content);margin:0 auto}
.slbp-page-content > *{max-width:900px;margin-left:auto;margin-right:auto}
.slbp-page-content > .slbk-data,
.slbp-page-content > .slbk-listing,
.slbp-page-content > .wp-block-columns,
.slbp-page-content > .wp-block-group.alignwide,
.slbp-page-content > .alignwide{max-width:var(--content)}
.slbp-page-content .wp-block-heading{margin:0 0 14px}
.slbp-page-content .wp-block-heading:not(:first-child){margin-top:36px}
.slbp-page-content .wp-block-paragraph{color:var(--muted);line-height:1.75}
.slbp-page-content .wp-block-list{color:var(--muted);padding-left:1.35rem;line-height:1.75}
.slbp-page-content .wp-block-image{margin-top:24px;margin-bottom:24px}
.slbp-page-content .wp-block-image img{height:auto;border-radius:var(--radius)}
.slbp-page-content .wp-block-separator{border-color:var(--border);margin:32px auto}
.slbp-page-content .wp-block-buttons{gap:10px;margin-top:22px}
.slbp-page-content .wp-block-button__link{border-radius:9px;background:var(--s);color:var(--onS);font-size:12px;font-weight:800;padding:10px 17px}
.slbp-page-content .wp-block-button__link:hover{background:var(--sHover);color:var(--onS)}
.slbp-page-content .wp-block-columns{gap:25px;margin-top:24px;margin-bottom:24px}
.slbp-page-content .wp-block-column > :first-child{margin-top:0}
.slbp-page-content .wp-block-column > :last-child{margin-bottom:0}
.slbp-page-content .slbk-listing{margin-top:24px;margin-bottom:28px}
.slbp-page-content .slbk-listing .p-empty{grid-column:1/-1}
.slbp-page-content .slbk-contact-data .profile-map-section{margin-top:0}
html[data-mode=dark] .slbp-page-content .wp-block-paragraph,
html[data-mode=dark] .slbp-page-content .wp-block-list{color:var(--muted)}
html[data-mode=dark] .slbp-page-content .wp-block-table{color:var(--ink)}
@media(max-width:700px){
  .slbp-wp-page .page-panel{padding:36px 0 62px}
  .slbp-page-content > .wp-block-columns{display:block}
  .slbp-page-content .wp-block-column{margin-bottom:22px}
  .slbp-page-content .wp-block-column:last-child{margin-bottom:0}
}

/* Elementor page content uses the same portal tokens as the theme shell. */
.slbp-elementor-page{background:var(--bg);color:var(--ink);min-height:320px}
.slbp-elementor-page .elementor-section{background:transparent}
.slbp-elementor-page .elementor-container{width:min(calc(100% - 40px),var(--content));margin-inline:auto}
.slbp-elementor-page .elementor-widget-heading .elementor-heading-title{color:var(--heading)!important;font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;line-height:1.28;letter-spacing:-.035em}
.slbp-elementor-page .slb-elementor-page-title .elementor-heading-title{font-size:clamp(24px,2.4vw,34px);margin:0}
.slbp-elementor-page .slb-elementor-heading .elementor-heading-title{font-size:clamp(20px,1.9vw,28px);margin:0 0 12px}
.slbp-elementor-page .elementor-widget-text-editor{color:var(--muted);font-size:1rem;line-height:1.65}
.slbp-elementor-page .elementor-widget-text-editor p{color:inherit;font-size:inherit;line-height:inherit;margin:0 0 14px}
.slbp-elementor-page .elementor-widget-text-editor ul,.slbp-elementor-page .elementor-widget-text-editor ol{color:var(--muted);line-height:1.75;margin:0 0 18px;padding-left:1.35rem}
.slbp-elementor-page .elementor-widget-text-editor a{color:var(--p);font-weight:700}
.slbp-elementor-page .slb-elementor-breadcrumb-widget{margin-bottom:12px}
.slbp-elementor-page .slb-elementor-breadcrumb-widget .crumbs{margin:0}
.slbp-elementor-page .slb-elementor-eyebrow{margin-bottom:10px}
.slbp-elementor-page .elementor-widget-button .elementor-button{border-radius:9px;background:var(--s);color:var(--onS);font-size:12px;font-weight:800;padding:10px 17px;line-height:1.4}
.slbp-elementor-page .elementor-widget-button .elementor-button:hover{background:var(--sHover);color:var(--onS)}
.slbp-elementor-page .elementor-widget-image img{border-radius:var(--radius)}
.slbp-elementor-page .slb-elementor-shortcode{width:100%}
html[data-mode=dark] .slbp-elementor-page .elementor-widget-text-editor,html[data-mode=dark] .slbp-elementor-page .elementor-widget-text-editor ul,html[data-mode=dark] .slbp-elementor-page .elementor-widget-text-editor ol{color:var(--muted)}
@media(max-width:650px){
  .slbp-elementor-page .elementor-container{width:calc(100% - 30px)}
  .slbp-elementor-page .elementor-section{padding-left:0!important;padding-right:0!important}
  .slbp-elementor-page .elementor-column{width:100%!important}
  .slbp-elementor-page .slb-elementor-page-title .elementor-heading-title{font-size:clamp(22px,6vw,28px)}
}

/* Keep homepage sections in the normal centered Elementor frame. Only the
 * legacy home hero is allowed to break out to the viewport edges. */
body.home .slbp-elementor-page .slb-elementor-home-renderer > .elementor-widget-container{
  padding-left:0;
  padding-right:0;
}
body.home .slbp-elementor-page .slb-elementor-home-renderer .hero-carousel{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* v4.20 — restore the five-item mobile/tablet dock with a prominent Menu
 * control. The home page keeps its four quick links; all other destinations
 * live in the expandable WordPress menu. */
@media(max-width:1024px){
  :root{--slb-dock-height:72px}
  html{scroll-padding-bottom:calc(var(--slb-dock-height) + 18px)}
  body{padding-bottom:calc(var(--slb-dock-height) + 24px + env(safe-area-inset-bottom,0px))!important}
  .footer{padding-bottom:calc(var(--slb-dock-height) + 24px + env(safe-area-inset-bottom,0px))!important}
  .mobile-bottom-nav{
    display:grid!important;position:fixed!important;inset:auto 0 0 0!important;
    width:100%!important;max-width:none!important;margin:0!important;z-index:300!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:1px;min-height:72px;overflow:visible;
    padding:6px max(5px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(5px,env(safe-area-inset-left,0px));
    background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -5px 18px rgba(0,37,45,.12);
    transform:translate3d(0,calc(-1 * var(--slb-dock-visual-shift)),0)!important;transition:none!important;
  }
  .mobile-bottom-nav a,.mobile-bottom-nav button{min-height:52px;min-width:0;overflow:visible}
  .mobile-bottom-nav a{border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;font-weight:700;font-size:10px;cursor:pointer;border-radius:9px;padding:3px 0}
  .mobile-bottom-nav svg{width:20px;height:20px}
  .mobile-bottom-nav .mobile-menu-trigger{
    position:relative;align-self:flex-start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    width:58px;height:58px;margin:-4px auto 0;border:2px solid var(--s);border-radius:50%;
    background:var(--surface);color:var(--p);box-shadow:0 5px 18px rgba(0,37,45,.22);font-size:10px;font-weight:800;padding:0;line-height:1;
  }
  .mobile-bottom-nav .mobile-menu-trigger svg{width:24px;height:24px}
  .mobile-bottom-nav .mobile-menu-trigger[aria-expanded=true]{background:var(--p);border-color:var(--p);color:var(--onP)}
  .mobile-bottom-nav .is-current,.mobile-bottom-nav a:hover{color:var(--p);background:color-mix(in srgb,var(--s) 10%,transparent)}
  .mobile-nav:not([hidden]){
    display:block!important;position:fixed!important;top:auto!important;left:8px!important;right:8px!important;
    bottom:calc(var(--slb-dock-height) + var(--slb-dock-visual-shift) + 6px)!important;z-index:299!important;
    max-height:min(62dvh,calc(100dvh - var(--slb-dock-height) - var(--slb-header-height) - 20px))!important;
    overflow-y:auto!important;overscroll-behavior:contain;border:1px solid var(--border);border-radius:14px 14px 0 0;
    box-shadow:0 -12px 28px rgba(0,25,40,.18);background:var(--surface);padding:8px 12px 12px;
  }
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu{display:block;list-style:none;padding:0;margin:0}
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu a{display:block;padding:12px;border-bottom:1px solid var(--border);color:var(--heading);font-weight:700;font-size:13px}
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu .slbp-mobile-menu-parent{display:block;padding:12px;border-bottom:1px solid var(--border);color:var(--heading);font-weight:800;font-size:13px;cursor:default}
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu ul.sub-menu{padding:0 0 0 16px;list-style:none}
}
@media(min-width:1025px){.mobile-bottom-nav,.mobile-nav{display:none!important}}

/* v4.27.6 — animate the mobile menu from the dock and keep the quick-link
 * highlight tied to the current WordPress URL. */
@media(max-width:1024px){
  .mobile-nav:not([hidden]){
    opacity:0;visibility:hidden;transform:translateY(24px);pointer-events:none;
    transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;
  }
  .mobile-nav:not([hidden]).is-open{
    opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
    transition-delay:0s;
  }
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-item>a,
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-parent>a,
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-ancestor>a{
    color:var(--p)!important;background:color-mix(in srgb,var(--s) 12%,transparent);
    border-left:3px solid var(--s);padding-left:9px;
  }
}
@media(prefers-reduced-motion:reduce){
  .mobile-nav:not([hidden]),.mobile-nav:not([hidden]).is-open{transition:none!important;transform:none}
}

/* v4.27.7 — smooth same-origin page changes with native View Transitions
 * where available and a short fade fallback in older browsers. */
@view-transition{navigation:auto}
@keyframes slb-page-view-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes slb-page-view-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(root){animation:slb-page-view-out .18s ease both}
::view-transition-new(root){animation:slb-page-view-in .28s cubic-bezier(.2,.75,.2,1) both}
html::after{content:"";position:fixed;inset:0;z-index:2147483646;pointer-events:none;background:var(--surface);opacity:0;transition:opacity .19s ease}
html.slb-page-leaving::after{opacity:.92}
html.slb-page-leaving body{opacity:.35;transition:opacity .19s ease}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  html::after,html.slb-page-leaving body{transition:none!important}
}
/* v4.27.12 — plugin logo in footer and face-safe portrait framing. */
.footer-brand-mark{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.footer-logo{display:block;width:42px;height:42px;flex:0 0 auto;object-fit:contain;border-radius:11px}
.footer-brand-mark .logo-small{margin:0!important}
.p-intro-section .p-welcome-photo > img[data-headmaster-image],
.portrait-frame img.headmaster-photo,
.greeting-dialog-photo img,
.p-welcome-photo img{object-position:center 12%!important}

/* v4.27.19 — keep the footer brand aligned with the header and make the
 * mobile/tablet dock use the primary blue interaction state. */
.footer-brand-mark{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.footer-brand-mark .logo-small{margin:0!important;line-height:1.35}
.footer-brand-mark .logo-small small{display:block;margin-top:2px}
.footer-logo{width:44px;height:44px}
@media(max-width:1024px){
  .mobile-bottom-nav .is-current,
  .mobile-bottom-nav a:hover{background:var(--p)!important;color:var(--onP)!important}
  .mobile-bottom-nav .mobile-menu-trigger{
    align-self:center;width:min(calc(100% - 10px),68px);height:54px;margin:-1px auto 0;
    border:1px solid color-mix(in srgb,var(--p) 78%,#fff);
    border-radius:12px;background:var(--p);color:var(--onP);
    box-shadow:0 5px 14px rgba(0,37,45,.2);line-height:1
  }
  .mobile-bottom-nav .mobile-menu-trigger svg{color:inherit}
  .mobile-bottom-nav .mobile-menu-trigger[aria-expanded=true]{background:var(--pHover);border-color:var(--pHover);color:var(--onP)}
}
@media(max-width:650px){
  .footer-brand-mark{gap:10px}
  .footer-logo{width:40px;height:40px}
  .footer-brand-mark .logo-small{font-size:13px}
}
/* v4.27.23 — make the Menu action use the same dock item treatment.
 * It only receives the primary color while its panel is open.
 */
/* v4.27.22 — keep the Menu action neutral until its panel is open.
 * Only the current destination and an expanded Menu action use blue.
 */
/* v4.27.21 — keep the quick destinations in the bottom dock; the expanded
 * panel is filtered server-side to show only the remaining WordPress items. */
.mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.mobile-bottom-nav .mobile-menu-trigger{width:min(calc(100% - 10px),68px);height:54px;margin:-1px auto 0;border-radius:12px}
@media(max-width:1024px){
  .mobile-bottom-nav .mobile-menu-trigger{
    width:100%;height:auto;min-height:52px;margin:0;padding:3px 0;
    border:0;border-radius:9px;background:transparent!important;color:var(--muted)!important;
    box-shadow:none!important;font-size:10px;font-weight:700;line-height:1.2;
  }
  .mobile-bottom-nav .mobile-menu-trigger svg{width:20px;height:20px}
  .mobile-bottom-nav .mobile-menu-trigger[aria-expanded=true]{background:var(--p)!important;border-color:transparent!important;color:var(--onP)!important;box-shadow:none!important}
}
/* v4.27.28 — menu destinations keep the Menu dock action active even when
 * the panel is closed; while expanded, it remains the only blue dock action. */
@media(max-width:1024px){
  html.slb-mobile-menu-open .mobile-bottom-nav :is(a.is-current,a[aria-current="page"],a:hover){
    background:transparent!important;
    color:var(--muted)!important;
  }
  .mobile-bottom-nav .mobile-menu-trigger.is-current{
    background:var(--p)!important;
    border-color:transparent!important;
    color:var(--onP)!important;
  }
  html.slb-mobile-menu-open .mobile-bottom-nav .mobile-menu-trigger[aria-expanded=true]{
    background:var(--p)!important;
    border-color:transparent!important;
    color:var(--onP)!important;
  }
}
/* v4.27.25 — keep the expanded panel's current-item highlight light; the
 * solid blue state belongs to the Menu trigger while the panel is open. */
.mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-item>a,
.mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-parent>a,
.mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-ancestor>a{
  color:var(--p)!important;
  background:color-mix(in srgb,var(--s) 12%,transparent)!important;
  border-left:3px solid var(--s)!important;
  padding-left:9px;
}
/* v4.27.26 — parent items with a submenu only show the yellow rail. The
 * light surface is reserved for the actual current page item. */
@media(max-width:1024px){
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-parent>a,
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-ancestor>a{
    color:var(--heading)!important;
    background:transparent!important;
    border-left:3px solid var(--s)!important;
    padding-left:9px;
  }
}
/* v4.27.29 — mobile/tablet menu groups are labels, while their child links
 * remain the clickable destinations. Use a bottom yellow rule for the active
 * group and child instead of a left rail. */
@media(max-width:1024px){
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-item>a{
    color:var(--p)!important;
    background:color-mix(in srgb,var(--s) 12%,transparent)!important;
    border-left:0!important;
    border-bottom:3px solid var(--s)!important;
    padding-left:12px!important;
  }
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-parent>.slbp-mobile-menu-parent,
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu li.current-menu-ancestor>.slbp-mobile-menu-parent{
    color:var(--heading)!important;
    background:transparent!important;
    border-left:0!important;
    border-bottom:3px solid var(--s)!important;
    padding-left:12px!important;
  }
}
/* v4.27.30 — keep the active child destination light and blue without a
 * second yellow rule; the parent group carries the active underline. */
@media(max-width:1024px){
  .mobile-nav:not([hidden]) .slbp-mobile-wp-menu ul.sub-menu>li.current-menu-item>a{
    border-bottom:0!important;
  }
}
.p-teacher-photo img,
.demo-card.person .demo-media img{object-position:center 15%!important}
/* v4.27.14 — remove redundant single-page back link and soften hero badge. */
.hero-kicker{border-radius:12px!important}
.hero-kicker::before{display:none!important;content:none!important}
/* v4.27.15 — responsive grids for imported activity albums. */
.slb-asset-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
.slb-asset-gallery figure{margin:0;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.slb-asset-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.slb-asset-gallery figcaption{padding:8px 10px;color:var(--muted);font-size:12px;line-height:1.4}
@media(max-width:760px){.slb-asset-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:480px){.slb-asset-gallery{grid-template-columns:1fr}}

/* v4.27.16 — separate the staff and extracurricular surfaces and clip award cards cleanly. */
.p-section.p-teachers-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.p-section.p-award-section .p-award-card,
.p-award-grid .p-award-card{border-radius:17px!important;overflow:hidden;background:var(--surface);background-clip:padding-box}
html[data-mode=dark] .p-section.p-teachers-section{background:var(--surface)!important;border-color:var(--border)!important}

/* v4.27.17 — keep a single available staff profile readable instead of squeezing it into four columns. */
@media(min-width:701px){
  .p-teacher-grid:has(> .demo-card.person:only-child){grid-template-columns:minmax(300px,360px)!important;justify-content:start}
}
@media(max-width:700px){
  .p-teacher-grid:has(> .demo-card.person:only-child){grid-template-columns:minmax(0,1fr)!important}
}
.p-award-grid .p-award-card{border-radius:18px!important}

/* v4.27.18 — test a flatter homepage rhythm: white sections, quiet rules,
   consistent desktop spacing, and a stronger heading/group boundary. */
@media (min-width:701px){
  .p-section,
  .p-section.p-intro-section{
    padding-top:clamp(64px,5vw,80px)!important;
    padding-bottom:clamp(64px,5vw,80px)!important;
  }
}
html:not([data-mode=dark]) .p-section,
html:not([data-mode=dark]) .p-section.p-light-section,
html:not([data-mode=dark]) .p-section.p-teachers-section,
html:not([data-mode=dark]) .p-intro-section{
  background:var(--surface)!important;
}
.p-section,
.p-strength-section{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.p-section + .p-section,
.p-strength-section + .p-section,
.p-section + .p-strength-section{border-top:0}
.p-section-heading{
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.p-section-heading > div:first-child{
  padding-left:14px;
  border-left:3px solid var(--p);
}
@media(max-width:700px){
  .p-section-heading{padding-bottom:13px}
  .p-section-heading > div:first-child{padding-left:10px;border-left-width:2px}
}

/* v4.27.32 — a clear, branded 404 state that reuses the active primary and
 * secondary colors without turning the error page into a decorative splash. */
.not-found-page{background:var(--bg);min-height:clamp(470px,calc(100vh - 180px),720px)}
.not-found-section{padding:clamp(34px,6vw,78px) 0 clamp(70px,9vw,110px)}
.not-found-card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(270px,.92fr);align-items:stretch;overflow:hidden;border:1px solid var(--border);border-top:4px solid var(--s);border-radius:16px;background:var(--surface);box-shadow:0 14px 36px color-mix(in srgb,var(--p) 10%,transparent)}
.not-found-copy{padding:clamp(27px,5vw,64px)}
.not-found-copy h1{max-width:620px;margin:0 0 15px;font-size:clamp(28px,4.2vw,52px);line-height:1.12;letter-spacing:-.055em}
.not-found-lead{max-width:570px;margin:0;color:var(--muted);font-size:clamp(13px,1.35vw,16px);line-height:1.65}
.not-found-request{display:grid;gap:6px;width:min(100%,560px);margin-top:31px;padding:12px 14px;border-left:3px solid var(--s);background:var(--alt)}
.not-found-request span{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.not-found-request code{overflow-wrap:anywhere;color:var(--heading);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.not-found-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:330px;padding:32px;background:var(--p);color:var(--onP);isolation:isolate}
.not-found-visual::before,.not-found-visual::after{position:absolute;content:"";z-index:-1;border:1px solid color-mix(in srgb,var(--onP) 20%,transparent);border-radius:50%}
.not-found-visual::before{width:260px;height:260px}
.not-found-visual::after{width:185px;height:185px}
.not-found-visual-rule{width:48px;height:4px;margin-bottom:17px;background:var(--s)}
.not-found-visual strong{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;font-size:clamp(86px,12vw,158px);font-weight:800;line-height:.82;letter-spacing:-.1em}
.not-found-visual span{margin-top:21px;color:color-mix(in srgb,var(--onP) 78%,transparent);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
@media(max-width:760px){
  .not-found-page{min-height:0}
  .not-found-section{padding:24px 0 76px}
  .not-found-card{grid-template-columns:1fr;border-top-width:3px}
  .not-found-visual{order:-1;min-height:205px;padding:24px}
  .not-found-visual::before{width:174px;height:174px}
  .not-found-visual::after{width:124px;height:124px}
  .not-found-visual strong{font-size:92px}
  .not-found-visual span{margin-top:14px;font-size:10px}
  .not-found-copy{padding:27px 22px 30px}
  .not-found-copy h1{font-size:clamp(27px,8.4vw,38px)}
  .not-found-request{margin-top:25px}
}


/* v4.27.36 — keep the configurable header CTA reachable from the compact menu. */
@media(max-width:1024px){
  .mobile-nav:not([hidden]) .mobile-menu-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(100% - 24px);
    max-width:100%;
    box-sizing:border-box;
    margin:13px 12px 2px;
    padding:11px 14px;
    border:1px solid var(--p);
    border-radius:9px;
    background:var(--p);
    color:var(--onP);
    font-size:13px;
    font-weight:800;
    text-decoration:none;
  }
  .mobile-nav:not([hidden]) .mobile-menu-cta:hover{
    background:var(--pHover);
    color:var(--onP);
  }
}
/* v4.27.36 — keep the header CTA on the primary surface with readable text. */
html body a.btn.header-cta,
html body a.btn.header-cta:visited{
  background:var(--p)!important;
  background-color:var(--p)!important;
  border-color:var(--p)!important;
  color:var(--onP)!important;
}
html body a.btn.header-cta:hover{
  background:var(--pHover)!important;
  background-color:var(--pHover)!important;
  border-color:var(--pHover)!important;
  color:var(--onP)!important;
}
/* v4.27.40 — unify action buttons on Primary with white text. */
html body :is(
  .btn,
  .portal-mini-action,
  .p-see-all,
  .p-btn,
  .demo-btn,
  a.mini-action,
  button.mini-action,
  .filter-btn,
  .slbp-page-content .wp-block-button__link,
  .slbp-elementor-page .elementor-widget-button .elementor-button,
  .mobile-menu-cta
){
  background:var(--p)!important;
  background-color:var(--p)!important;
  border-color:var(--p)!important;
  color:#fff!important;
}
html body :is(
  .btn,
  .portal-mini-action,
  .p-see-all,
  .p-btn,
  .demo-btn,
  a.mini-action,
  button.mini-action,
  .filter-btn,
  .slbp-page-content .wp-block-button__link,
  .slbp-elementor-page .elementor-widget-button .elementor-button,
  .mobile-menu-cta
):hover{
  background:var(--pHover)!important;
  background-color:var(--pHover)!important;
  border-color:var(--pHover)!important;
  color:#fff!important;
}

/* Card actions keep the Secondary color as a thin keyline. */
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card
) :is(
  .btn,
  .portal-mini-action,
  .p-see-all,
  .p-btn,
  .demo-btn,
  a.mini-action,
  button.mini-action,
  .demo-card-link,
  .p-article-link
){
  background:var(--p)!important;
  background-color:var(--p)!important;
  border:1px solid var(--s)!important;
  border-color:var(--s)!important;
  color:#fff!important;
}
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card
) :is(
  .btn,
  .portal-mini-action,
  .p-see-all,
  .p-btn,
  .demo-btn,
  a.mini-action,
  button.mini-action,
  .demo-card-link,
  .p-article-link
):hover{
  background:var(--pHover)!important;
  background-color:var(--pHover)!important;
  border-color:var(--s)!important;
  color:#fff!important;
}
/* v4.27.41 — win the cascade for the portal action family. */
html:not([data-mode=dark]) body .portal-mini-action.portal-mini-action.portal-mini-action,
html[data-mode=dark] body .portal-mini-action.portal-mini-action.portal-mini-action,
html body .p-section-action .p-see-all.p-see-all{
  background:var(--p)!important;
  background-color:var(--p)!important;
  border-color:var(--p)!important;
  color:#fff!important;
}
html:not([data-mode=dark]) body .portal-mini-action.portal-mini-action.portal-mini-action:hover,
html[data-mode=dark] body .portal-mini-action.portal-mini-action.portal-mini-action:hover,
html body .p-section-action .p-see-all.p-see-all:hover{
  background:var(--pHover)!important;
  background-color:var(--pHover)!important;
  border-color:var(--pHover)!important;
  color:#fff!important;
}

/* Re-apply the Secondary keyline after the high-specificity portal rule. */
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card
) .portal-mini-action.portal-mini-action.portal-mini-action,
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card
) .p-see-all.p-see-all{
  border:1px solid var(--s)!important;
  border-color:var(--s)!important;
}

/* v4.27.42 — the blue strength panel is a card-like surface too. */
html body .p-strength-section .portal-mini-action.portal-mini-action.portal-mini-action,
html body .p-strength-section .p-see-all.p-see-all{
  border:1px solid var(--s)!important;
  border-color:var(--s)!important;
}

/* v4.27.43 — use a white keyline for actions inside cards and panels. */
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card,
  .p-strength-section
) .portal-mini-action.portal-mini-action.portal-mini-action,
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card,
  .p-strength-section
) .p-see-all.p-see-all,
html body :is(
  .card,
  .demo-card,
  .p-update-box,
  .p-level-card,
  .p-facility-card,
  .p-photo-tile,
  .p-award-card,
  .activity-card,
  .bulletin-card,
  .award-card,
  .p-strength-section
) :is(.btn,.p-btn,.demo-btn,a.mini-action,button.mini-action,.demo-card-link,.p-article-link){
  border:1px solid #fff!important;
  border-color:#fff!important;
}

/* v4.27.44 — align section actions with the content on smaller screens. */
@media(max-width:1024px){
  html body .p-section-action,
  html body .p-update-column .p-section-action{
    justify-content:flex-start;
  }
}

/* v4.27.45 — give section actions a more balanced tap target. */
html body .p-section-action .p-see-all{
  min-width:132px;
  box-sizing:border-box;
}

/* v4.27.46 — keep the single copyright line centered in every footer layout. */
.footer-bottom{
  justify-content:center!important;
  text-align:center;
}
.footer-bottom>span{
  display:block;
  width:100%;
  text-align:center;
}

/* v4.27.47 — make Elementor pages fit the real column at tablet/mobile sizes.
 * Elementor can save a fixed "initial" widget width per breakpoint. A saved
 * width larger than the current column otherwise pushes the whole document
 * sideways, which is especially visible on narrow pages such as Sambutan. */
@media(max-width:1024px){
  html body .slbp-elementor-page,
  html body .slbp-elementor-page .elementor,
  html body .slbp-elementor-page .elementor-section,
  html body .slbp-elementor-page .elementor-container,
  html body .slbp-elementor-page .elementor-column,
  html body .slbp-elementor-page .elementor-widget-wrap,
  html body .slbp-elementor-page .elementor-widget,
  html body .slbp-elementor-page .elementor-widget-container{
    min-width:0;
    max-width:100%;
  }
  html body .slbp-elementor-page .elementor-widget-tablet__width-initial,
  html body .slbp-elementor-page .elementor-widget-mobile__width-initial,
  html body .slbp-elementor-page .elementor-widget-tablet__width-auto,
  html body .slbp-elementor-page .elementor-widget-mobile__width-auto{
    width:100%!important;
    max-width:100%!important;
    flex-basis:auto!important;
    flex-shrink:1!important;
  }
  html body .slbp-elementor-page img,
  html body .slbp-elementor-page iframe,
  html body .slbp-elementor-page video,
  html body .slbp-elementor-page table{
    max-width:100%;
  }
}

@media(max-width:650px){
  html body .slbp-elementor-page .elementor-container{
    width:calc(100% - 30px);
  }
  html body .slbp-elementor-page .elementor-column,
  html body .slbp-elementor-page .elementor-widget-wrap{
    width:100%!important;
  }
}

/* v4.27.48 — avoid a scrollbar-sized horizontal surplus from the legacy
 * full-bleed homepage hero on tablet and mobile viewports. */
@media(max-width:1024px){
  body.home .slbp-elementor-page .slb-elementor-home-renderer .hero-carousel{
    width:calc(100% + 40px);
    max-width:calc(100% + 40px);
    margin-left:-20px;
    margin-right:-20px;
  }
}
@media(max-width:650px){
  body.home .slbp-elementor-page .slb-elementor-home-renderer .hero-carousel{
    width:calc(100% + 30px);
    max-width:calc(100% + 30px);
    margin-left:-15px;
    margin-right:-15px;
  }
}

/* v4.27.50 — keep ultra-narrow previews usable when a desktop-style panel
 * reports a viewport below 350px. Footer grid children and the brand row must
 * be allowed to shrink instead of creating a document-wide scrollbar. */
@media(max-width:350px){
  html body .footer-main,
  html body .footer-main>*{
    min-width:0;
    max-width:100%;
  }
  html body .footer-brand-mark{
    min-width:0;
    max-width:100%;
    align-items:flex-start;
  }
  html body .footer-brand-mark .logo-small{
    min-width:0;
    max-width:calc(100% - 54px);
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  html body .footer p,
  html body .footer a,
  html body .footer h3,
  html body .footer .logo-small{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  html body .footer-socials{
    min-width:0;
    max-width:100%;
  }
}

/* v4.27.52 — award actions are full-width card buttons, so retain the
 * button shape instead of rendering a sharp rectangular text strip. */
.p-award-grid .p-award-card .p-article-link{
  display:flex;
  align-items:center;
  width:100%;
  min-height:32px;
  padding:6px 9px;
  box-sizing:border-box;
  border-radius:7px!important;
  line-height:1.3;
}

/* v4.27.53 — use the same rounded action treatment on archive/news cards. */
.demo-card .demo-card-link{
  display:flex;
  align-items:center;
  width:100%;
  min-height:32px;
  padding:6px 9px;
  box-sizing:border-box;
  border-radius:7px!important;
  line-height:1.3;
}

/* v4.27.59 — let the selected mobile dock menu control its own column count. */
@media(max-width:1024px){
  .mobile-bottom-nav{grid-template-columns:repeat(var(--slb-dock-columns,5),minmax(0,1fr))!important}
}