:root {
	--color-primary: #0734a6;
	--color-primary-dark: #051c58;
	--color-accent: #f5c400;
	--color-danger: #e30613;
	--color-text: #182033;
	--color-muted: #687086;
	--color-surface: #ffffff;
	--color-background: #f5f7fb;
	--container-width: 1240px;
	--space-page: clamp(1rem, 3vw, 2rem);
	--shadow-soft: 0 14px 40px rgba(5, 28, 88, 0.10);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--color-text);
	background: var(--color-background);
	line-height: 1.6;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

button,
input {
	font: inherit;
}

button {
	cursor: pointer;
}

.site-container {
	width: min(100% - (var(--space-page) * 2), var(--container-width));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	margin: 0;
	clip: auto;
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
}

.site-header {
	position: relative;
	z-index: 100;
	background: var(--color-surface);
	box-shadow: 0 1px 0 rgba(5, 28, 88, 0.08);
}

.header-topbar {
	background: var(--color-primary-dark);
	color: #ffffff;
}

.header-topbar__inner {
	display: flex;
	min-height: 34px;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.78rem;
}

.header-topbar__official {
	margin: 0;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.header-topbar__contact {
	display: flex;
	gap: 1rem;
}

.header-topbar__contact a {
	text-decoration: none;
}

.header-main__inner {
	display: flex;
	min-height: 92px;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.school-brand {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
}

.school-brand__logo {
	width: 70px;
	height: 70px;
	flex: 0 0 auto;
	object-fit: contain;
}

.school-brand__text {
	display: grid;
	gap: 0.12rem;
	min-width: 0;
}

.school-brand__eyebrow {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.school-brand__name {
	font-size: clamp(1.08rem, 2vw, 1.55rem);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.search-toggle,
.menu-toggle {
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(7, 52, 166, 0.16);
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-primary-dark);
}

.search-toggle {
	font-size: 1.5rem;
	font-weight: 700;
}

.lapor-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding-inline: 1.15rem;
	border-radius: 999px;
	background: var(--color-danger);
	box-shadow: 0 8px 20px rgba(227, 6, 19, 0.18);
	font-size: 0.85rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: #ffffff;
}

.header-navigation-row {
	border-top: 1px solid rgba(5, 28, 88, 0.08);
}

.site-navigation__menu {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 1vw, 1rem);
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-navigation__menu > li > a {
	display: block;
	padding: 0.9rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 750;
	text-decoration: none;
	color: var(--color-text);
}

.site-navigation__menu > li.current-menu-item > a,
.site-navigation__menu > li > a:hover,
.site-navigation__menu > li > a:focus-visible {
	color: var(--color-primary);
}

.header-search-panel {
	padding-block: 1rem;
	border-top: 1px solid rgba(5, 28, 88, 0.08);
	background: #ffffff;
}

.header-search-panel form {
	display: flex;
	gap: 0.75rem;
}

.header-search-panel input[type="search"] {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 1rem;
	border: 1px solid rgba(7, 52, 166, 0.2);
	border-radius: 0.75rem;
}

.header-search-panel input[type="submit"] {
	min-height: 48px;
	padding-inline: 1.2rem;
	border: 0;
	border-radius: 0.75rem;
	background: var(--color-primary);
	font-weight: 800;
	color: #ffffff;
}

.menu-toggle {
	display: none;
	gap: 4px;
	align-content: center;
}

.menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.foundation-hero {
	display: grid;
	min-height: 62vh;
	place-items: center;
	padding-block: 5rem;
	background:
		radial-gradient(circle at 85% 15%, rgba(245, 196, 0, 0.22), transparent 28%),
		linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	color: #ffffff;
}

.foundation-hero__inner {
	max-width: 920px;
	text-align: center;
}

.foundation-hero__badge {
	display: inline-flex;
	padding: 0.5rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.8rem;
	font-weight: 800;
}

.foundation-hero__eyebrow {
	margin: 1.25rem 0 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.foundation-hero h1 {
	margin: 0;
	font-size: clamp(2.5rem, 7vw, 5.3rem);
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.foundation-hero__text {
	max-width: 760px;
	margin: 1.5rem auto 0;
	font-size: clamp(1rem, 2vw, 1.18rem);
	color: rgba(255, 255, 255, 0.86);
}

.content-area {
	padding-block: 4rem;
}

.content-card {
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	background: var(--color-surface);
	border-radius: 1rem;
}

.site-footer {
	background: #061944;
	color: #ffffff;
}

.site-footer__inner {
	display: flex;
	min-height: 78px;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site-footer a {
	font-weight: 900;
	color: var(--color-accent);
}

@media (max-width: 980px) {
	.header-navigation-row {
		border-top: 0;
	}

	.menu-toggle {
		display: grid;
	}

	.site-navigation {
		display: none;
		padding-bottom: 1rem;
	}

	.site-navigation.is-open {
		display: block;
	}

	.site-navigation__menu {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.site-navigation__menu > li > a {
		padding: 0.75rem 0;
		border-top: 1px solid rgba(5, 28, 88, 0.08);
	}
}

@media (max-width: 640px) {
	.header-topbar__contact {
		display: none;
	}

	.header-topbar__inner {
		justify-content: center;
	}

	.header-main__inner {
		min-height: 80px;
		gap: 0.75rem;
	}

	.school-brand {
		gap: 0.65rem;
	}

	.school-brand__logo {
		width: 54px;
		height: 54px;
	}

	.school-brand__eyebrow {
		font-size: 0.58rem;
	}

	.school-brand__name {
		max-width: 190px;
		font-size: 0.92rem;
	}

	.search-toggle {
		display: none;
	}

	.lapor-button {
		min-height: 40px;
		padding-inline: 0.85rem;
		font-size: 0.75rem;
	}

	.menu-toggle {
		width: 40px;
		height: 40px;
	}

	.foundation-hero {
		min-height: 55vh;
		padding-block: 4rem;
	}

	.site-footer__inner {
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		padding-block: 1.25rem;
	}
}

/* Homepage v0.3.0 */
.home-hero{position:relative;display:grid;min-height:clamp(560px,72vh,760px);align-items:center;overflow:hidden;background-image:var(--hero-image);background-position:center;background-size:cover;color:#fff}.home-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,20,65,.92) 0%,rgba(3,28,91,.78) 48%,rgba(3,28,91,.42) 100%)}.home-hero__inner{position:relative;z-index:1;padding-block:5rem}.home-hero__eyebrow,.section-heading__eyebrow{margin:0 0 .7rem;font-size:.78rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent)}.home-hero h1{max-width:900px;margin:0;font-size:clamp(3rem,8vw,6.4rem);line-height:.95;letter-spacing:-.055em;text-transform:uppercase}.home-hero__text{max-width:720px;margin:1.45rem 0 0;font-size:clamp(1.08rem,2vw,1.35rem);color:rgba(255,255,255,.88)}.home-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.home-hero__temporary-note{max-width:620px;margin:1rem 0 0;font-size:.76rem;color:rgba(255,255,255,.62)}.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:.78rem 1.15rem;border:1px solid transparent;border-radius:999px;font-weight:850;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-1px)}.button--accent{background:var(--color-accent);color:var(--color-primary-dark);box-shadow:0 12px 30px rgba(245,196,0,.25)}.button--ghost{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff}.button--primary{background:var(--color-primary);color:#fff}.button--outline{border-color:rgba(7,52,166,.25);background:#fff;color:var(--color-primary)}.home-section{padding-block:clamp(3.5rem,7vw,6.5rem);background:#fff}.home-section--soft{background:#f4f7ff}.home-section--announcement{background:#f8faff}.home-section--ppdb{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));color:#fff}.section-heading{margin-bottom:2rem}.section-heading--inline{display:flex;align-items:end;justify-content:space-between;gap:1.2rem}.section-heading h2,.service-card h2,.ppdb-panel h2{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.035em;color:var(--color-primary-dark)}.home-section--ppdb .section-heading__eyebrow,.home-section--ppdb h2{color:#fff}.text-link{font-weight:800;text-decoration:none;color:var(--color-primary)}.announcement-list{display:grid;gap:1rem}.announcement-card{display:grid;grid-template-columns:150px minmax(230px,1fr) minmax(260px,1.4fr);gap:1.4rem;align-items:center;padding:1.25rem 1.35rem;border:1px solid rgba(7,52,166,.1);border-radius:1rem;background:#fff;box-shadow:0 8px 24px rgba(5,28,88,.05)}.announcement-card time{font-size:.82rem;font-weight:850;color:var(--color-primary)}.announcement-card h3{margin:0;font-size:1.12rem;line-height:1.3}.announcement-card h3 a{text-decoration:none}.announcement-card p{margin:0;color:var(--color-muted)}.card-grid{display:grid;gap:1.4rem}.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.story-card,.achievement-card,.service-card{overflow:hidden;border:1px solid rgba(7,52,166,.09);border-radius:1.25rem;background:#fff;box-shadow:var(--shadow-soft)}.story-card__media{display:grid;aspect-ratio:16/10;place-items:center;overflow:hidden;background:linear-gradient(135deg,#dbe5ff,#f6f8ff);text-decoration:none}.story-card__media img,.achievement-card>img,.gallery-tile img{width:100%;height:100%;object-fit:cover}.media-placeholder{font-weight:850;color:rgba(7,52,166,.46)}.story-card__body{padding:1.25rem}.card-meta{margin:0 0 .55rem;font-size:.78rem;font-weight:850;color:var(--color-primary)}.story-card h3,.achievement-card h3{margin:0;font-size:1.25rem;line-height:1.3}.story-card h3 a,.achievement-card h3 a{text-decoration:none}.story-card p,.achievement-card p,.service-card p,.ppdb-panel p{color:var(--color-muted)}.ppdb-panel{display:flex;align-items:center;justify-content:space-between;gap:2rem}.ppdb-panel>div{max-width:760px}.ppdb-panel p{margin-bottom:0;color:rgba(255,255,255,.78)}.achievement-card{display:grid;grid-template-rows:auto 1fr}.achievement-card>img{aspect-ratio:16/9}.achievement-card>div{padding:1.4rem}.achievement-card__icon{display:inline-grid;width:38px;height:38px;place-items:center;margin-bottom:.8rem;border-radius:50%;background:rgba(245,196,0,.18);color:#b68a00}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.gallery-tile{position:relative;display:grid;aspect-ratio:4/3;place-items:center;overflow:hidden;border-radius:1rem;background:linear-gradient(135deg,#dbe5ff,#eef3ff);text-decoration:none}.gallery-tile span:last-child:not(.media-placeholder){position:absolute;right:.7rem;bottom:.7rem;left:.7rem;padding:.55rem .7rem;border-radius:.65rem;background:rgba(3,20,65,.78);font-weight:800;color:#fff}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}.service-card{padding:clamp(1.5rem,4vw,2.5rem)}.service-card--contact{background:linear-gradient(145deg,#f2f6ff,#fff)}
@media (max-width:900px){.card-grid--3,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.announcement-card{grid-template-columns:120px 1fr}.announcement-card p{grid-column:1/-1}.ppdb-panel{align-items:flex-start;flex-direction:column}.service-grid{grid-template-columns:1fr}}
@media (max-width:640px){.home-hero{min-height:590px}.home-hero__overlay{background:linear-gradient(180deg,rgba(3,20,65,.9),rgba(3,28,91,.74))}.home-hero h1{font-size:clamp(2.7rem,15vw,4.4rem)}.section-heading--inline{align-items:flex-start;flex-direction:column}.announcement-card{grid-template-columns:1fr;gap:.45rem}.announcement-card p{grid-column:auto}.card-grid--3,.gallery-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero__actions .button{width:100%}}