/*
Theme Name: SICB
Theme URI: https://sicb.shivajigroupofinstitutions.in/
Author: SICB Web Team
Description: A modern, lightweight custom theme for Shivaji Inter College, Bhadwara. Built to preserve the institution's existing WordPress content, URLs and plugins while giving the frontend a clean, trustworthy, education-focused redesign.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sicb
Tags: education, custom-logo, custom-menu, featured-images, translation-ready, responsive-layout, threaded-comments
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	/* Color */
	--sicb-navy-900: #081b30;
	--sicb-navy-800: #0f2a4a;
	--sicb-navy-700: #16385f;
	--sicb-navy-600: #1f4d80;
	--sicb-navy-100: #e7edf5;
	--sicb-gold-700: #a3760f;
	--sicb-gold-600: #c9971d;
	--sicb-gold-500: #dcae3f;
	--sicb-gold-100: #faf1dc;
	--sicb-ink-900: #1a2129;
	--sicb-ink-700: #454e58;
	--sicb-ink-500: #6b7280;
	--sicb-ink-300: #a2a9b3;
	--sicb-white: #ffffff;
	--sicb-bg-soft: #f6f8fb;
	--sicb-border: #e2e6ec;
	--sicb-success: #1c7a4a;

	--sicb-color-primary: var(--sicb-navy-800);
	--sicb-color-primary-dark: var(--sicb-navy-900);
	--sicb-color-accent: var(--sicb-gold-600);
	--sicb-color-text: var(--sicb-ink-900);
	--sicb-color-text-muted: var(--sicb-ink-700);
	--sicb-color-bg: var(--sicb-white);
	--sicb-color-bg-alt: var(--sicb-bg-soft);

	/* Typography */
	--sicb-font-heading: Georgia, Cambria, "Times New Roman", serif;
	--sicb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sicb-fs-base: 16px;

	/* Spacing scale */
	--sicb-space-xs: 0.5rem;
	--sicb-space-sm: 1rem;
	--sicb-space-md: 1.75rem;
	--sicb-space-lg: 3rem;
	--sicb-space-xl: 5rem;

	/* Shape */
	--sicb-radius-sm: 6px;
	--sicb-radius-md: 10px;
	--sicb-radius-lg: 16px;
	--sicb-shadow-sm: 0 1px 3px rgba(8, 27, 48, 0.08);
	--sicb-shadow-md: 0 8px 24px rgba(8, 27, 48, 0.10);
	--sicb-shadow-lg: 0 16px 40px rgba(8, 27, 48, 0.16);

	/* Layout */
	--sicb-container: 1180px;
	--sicb-header-h: 84px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sicb-font-body);
	font-size: var(--sicb-fs-base);
	line-height: 1.65;
	color: var(--sicb-color-text);
	background: var(--sicb-color-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sicb-color-primary); text-decoration: none; }
a:hover { color: var(--sicb-color-accent); }
ul, ol { padding-left: 1.25rem; }
figure { margin: 0; }
button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sicb-font-heading);
	color: var(--sicb-navy-900);
	line-height: 1.25;
	margin: 0 0 var(--sicb-space-sm);
	font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 var(--sicb-space-sm); color: var(--sicb-color-text-muted); }

/* Justify only long-form narrative copy -- applying it to every <p> globally
   also overrode text-align:center on short labels (names, classes, score
   captions, centered subtitles) sitting inside centered containers, since an
   element-level rule on <p> wins over an ancestor's inherited text-align. */
.entry-content p { text-align: justify; text-align-last: left; text-justify: inter-word; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 10000;
	background: var(--sicb-color-primary); color: #fff; padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--sicb-gold-600);
	outline-offset: 2px;
}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.container {
	max-width: var(--sicb-container);
	margin-inline: auto;
	padding-inline: var(--sicb-space-sm);
}
.section { padding-block: var(--sicb-space-xl); }
.section--tight { padding-block: var(--sicb-space-lg); }
.section--alt { background: var(--sicb-color-bg-alt); }
.section--textured-soft { position: relative; overflow: hidden; }
.section--textured-soft::before {
	content: ""; position: absolute; top: 0; left: 0; width: 260px; height: 260px; z-index: 0;
	background-image: radial-gradient(rgba(220,174,63,0.35) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	-webkit-mask-image: radial-gradient(circle at 0 0, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at 0 0, #000 0%, transparent 70%);
}
.section--textured-soft::after {
	content: ""; position: absolute; top: 10%; right: -4%; width: 34%; height: 85%; z-index: 0;
	color: var(--sicb-navy-800); opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' fill='none' stroke='%230f2a4a' stroke-width='1.5'%3E%3Crect x='20' y='55' width='160' height='65'/%3E%3Crect x='10' y='118' width='180' height='6' fill='%230f2a4a' stroke='none'/%3E%3Cpath d='M85 55V30h30v25'/%3E%3Ccircle cx='100' cy='20' r='10'/%3E%3Cpath d='M100 10v-8M92 4l16 0'/%3E%3Crect x='35' y='70' width='14' height='20'/%3E%3Crect x='60' y='70' width='14' height='20'/%3E%3Crect x='126' y='70' width='14' height='20'/%3E%3Crect x='151' y='70' width='14' height='20'/%3E%3Crect x='90' y='95' width='20' height='25'/%3E%3Cpath d='M20 55l80-22 80 22'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-size: contain; background-position: bottom right;
}
.section--textured-soft .container { position: relative; z-index: 1; }
.section-head { max-width: 720px; margin-bottom: var(--sicb-space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
	display: inline-block; text-transform: uppercase; letter-spacing: 0.08em;
	font-size: 0.78rem; font-weight: 700; color: var(--sicb-gold-700);
	margin-bottom: var(--sicb-space-xs);
}
.grid { display: grid; gap: var(--sicb-space-md); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.split { display: grid; gap: var(--sicb-space-lg); align-items: start; }
.split.split--center { align-items: center; }
@media (min-width: 900px) { .split.split--narrow-photo { grid-template-columns: 0.85fr 1.15fr; gap: var(--sicb-space-xl); } }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.85rem 1.6rem; border-radius: var(--sicb-radius-sm);
	font-weight: 700; font-size: 0.95rem; border: 2px solid transparent;
	cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
	line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--sicb-color-accent); color: var(--sicb-navy-900); border-color: var(--sicb-color-accent); }
.btn-primary:hover { background: var(--sicb-gold-700); border-color: var(--sicb-gold-700); color: #fff; }
.btn-outline { background: transparent; color: var(--sicb-white); border-color: rgba(255,255,255,0.6); }
.btn-outline:hover { background: rgba(255,255,255,0.12); color: var(--sicb-white); border-color: #fff; }
.btn-dark { background: var(--sicb-color-primary); color: #fff; border-color: var(--sicb-color-primary); }
.btn-dark:hover { background: var(--sicb-navy-900); border-color: var(--sicb-navy-900); }
.btn-block { width: 100%; }

/* =========================================================
   5. CARDS
   ========================================================= */
.card {
	background: var(--sicb-white); border: 1px solid var(--sicb-border);
	border-radius: var(--sicb-radius-md); box-shadow: var(--sicb-shadow-sm);
	padding: var(--sicb-space-md); transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--sicb-shadow-md); transform: translateY(-4px); }
.card-icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--sicb-navy-100); display: flex; align-items: center; justify-content: center;
	margin-bottom: var(--sicb-space-sm);
}
.card-icon img { width: 30px; height: 30px; }
.card h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.card p:last-child { margin-bottom: 0; }

.card--light { background: var(--sicb-bg-soft); border: 1px solid var(--sicb-border); text-align: center; }
.card-icon--tan {
	background: var(--sicb-gold-100); color: var(--sicb-gold-700); margin-inline: auto;
}
.card--light h3 { font-size: 1.1rem; }

.stat-card { text-align: center; padding: var(--sicb-space-md) var(--sicb-space-sm); }
.stat-card .stat-number {
	font-family: var(--sicb-font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--sicb-gold-600); font-weight: 700; display: block;
}
.stat-card .stat-label { color: rgba(255,255,255,0.85); font-size: 0.95rem; }

/* =========================================================
   6. TOP BAR + HEADER + NAV
   ========================================================= */
.topbar {
	background: var(--sicb-navy-900); color: rgba(255,255,255,0.85);
	font-size: 0.82rem; padding-block: 0.55rem;
}
.topbar .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; }
.topbar-info { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.topbar-info a { color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar-info a:hover { color: var(--sicb-gold-500); }
.topbar-badges { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.topbar-badges span { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(255,255,255,0.85); }
.topbar-badges svg { color: var(--sicb-gold-500); }

.site-header {
	background: var(--sicb-white); border-bottom: 1px solid var(--sicb-border);
	position: sticky; top: 0; z-index: 999; box-shadow: var(--sicb-shadow-sm);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: var(--sicb-space-md); }
@media (min-width: 992px) { .site-header .container { min-height: var(--sicb-header-h); } }
.site-branding { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.site-branding .brand-link { color: inherit; display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.brand-mark {
	flex: none; width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(155deg, var(--sicb-navy-700), var(--sicb-navy-900));
	color: var(--sicb-gold-500); display: flex; align-items: center; justify-content: center;
	box-shadow: var(--sicb-shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text-main {
	font-family: var(--sicb-font-heading); font-weight: 700; font-size: 1.1rem;
	color: var(--sicb-navy-900); letter-spacing: 0.01em;
}
.brand-text-sub { font-size: 0.68rem; font-weight: 700; color: var(--sicb-gold-700); letter-spacing: 0.12em; text-transform: uppercase; }
.site-branding img.custom-logo { max-height: 40px; width: auto; max-width: 100%; }
@media (min-width: 992px) {
	.brand-mark { width: 50px; height: 50px; }
	.brand-text-main { font-size: 1.25rem; }
	.site-branding img.custom-logo { max-height: 52px; }
}

.primary-nav-wrap { display: flex; align-items: center; gap: var(--sicb-space-md); }
.primary-menu { list-style: none; display: none; margin: 0; padding: 0; gap: 1.5rem; align-items: center; }
.primary-menu li { position: relative; }
.primary-menu > li > a {
	display: block; padding: 1.6rem 0; color: var(--sicb-navy-800); font-weight: 600; font-size: 0.95rem;
	border-bottom: 3px solid transparent;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_ancestor > a { color: var(--sicb-color-primary); border-bottom-color: var(--sicb-gold-600); }

/* CTA menu item -- WordPress puts custom nav classes on the <li>, so the
   compact button styling must target the <a> specifically. Styling the li
   itself would stack its padding on top of the anchor's own padding above
   and produce an oversized button. */
.primary-menu li.cta-link { display: flex; align-items: center; }
.primary-menu li.cta-link > a {
	background: var(--sicb-color-accent); color: var(--sicb-navy-900) !important;
	padding: 0.65rem 1.25rem !important; border-radius: var(--sicb-radius-sm); border-bottom: none !important;
}
.primary-menu li.cta-link > a:hover { background: var(--sicb-gold-700); color: #fff !important; }

.primary-menu .sub-menu {
	list-style: none; margin: 0; padding: 0.6rem 0; position: absolute; top: 100%; left: 0;
	margin-top: -3px; padding-top: calc(0.6rem + 3px);
	background: #fff; min-width: 240px; border-radius: var(--sicb-radius-md); box-shadow: var(--sicb-shadow-lg);
	border: 1px solid var(--sicb-border); border-top: 3px solid var(--sicb-gold-600);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu a {
	display: block; padding: 0.7rem 1.2rem; color: var(--sicb-color-text); font-weight: 500;
	border-bottom: none !important; border-left: 3px solid transparent;
}
.primary-menu .sub-menu a:hover { background: var(--sicb-color-bg-alt); color: var(--sicb-color-primary); border-left-color: var(--sicb-gold-600); }
.primary-menu .menu-item-has-children > a::after { content: "\25BE"; font-size: 0.7em; margin-left: 0.4em; }

.menu-toggle {
	display: inline-flex; flex: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-sm);
	background: transparent; cursor: pointer; align-items: center;
}
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--sicb-navy-900); }

.mobile-nav {
	position: fixed; inset: 0; top: 0; background: rgba(8,27,48,0.55); z-index: 1100;
	opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}

/* Desktop: show the inline menu, hide the mobile trigger + panel. Placed
   after the base rules above so it reliably wins the cascade at this
   breakpoint regardless of source order elsewhere in the file. */
@media (min-width: 992px) {
	.primary-menu { display: flex; }
	.menu-toggle, .mobile-nav { display: none; }
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav-panel {
	background: #fff; width: min(320px, 86vw); height: 100%; margin-left: auto;
	padding: var(--sicb-space-md); overflow-y: auto; transform: translateX(16px);
	transition: transform .2s ease; box-shadow: var(--sicb-shadow-lg);
}
.mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; float: right; color: var(--sicb-navy-900); }
.mobile-menu { list-style: none; margin: var(--sicb-space-lg) 0 0; padding: 0; clear: both; }
.mobile-menu li { border-bottom: 1px solid var(--sicb-border); }
.mobile-menu a { display: block; padding: 0.9rem 0.25rem; color: var(--sicb-navy-900); font-weight: 600; }
.mobile-menu .sub-menu { list-style: none; padding-left: 1rem; margin: 0 0 0.5rem; }
.mobile-menu .sub-menu a { font-weight: 500; padding: 0.6rem 0.25rem; color: var(--sicb-color-text-muted); }
.mobile-menu .cta-link a { background: var(--sicb-color-accent); border-radius: var(--sicb-radius-sm); text-align: center; margin-top: 0.5rem; }

/* =========================================================
   7. HERO
   ========================================================= */
.hero {
	background: linear-gradient(120deg, var(--sicb-navy-900), var(--sicb-navy-700));
	color: #fff; padding-block: var(--sicb-space-xl);
	position: relative; overflow: hidden;
}
.hero .container { display: grid; gap: var(--sicb-space-lg); align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .hero .container { grid-template-columns: 1.1fr 0.9fr; } }
.hero-eyebrow { color: var(--sicb-gold-500); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.85rem; }
.hero h1 { color: #fff; margin-block: 0.75rem 1rem; }
.hero h1 .text-gold { color: var(--sicb-gold-500); }
.hero p.lede { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--sicb-space-md); }
.hero-media { border-radius: var(--sicb-radius-lg); overflow: hidden; box-shadow: var(--sicb-shadow-lg); position: relative; z-index: 1; }
.hero-media img { width: 100%; }
.hero-shape {
	display: none; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(120deg, var(--sicb-navy-800), var(--sicb-navy-600));
	clip-path: ellipse(75% 100% at 38% 50%);
}
@media (min-width: 900px) { .hero-shape { display: block; } }

.stat-strip-light { background: var(--sicb-bg-soft); padding-block: var(--sicb-space-lg); border-bottom: 1px solid var(--sicb-border); }
.stat-strip-light .grid-4 { gap: var(--sicb-space-md); }
.stat-card-light { display: flex; align-items: center; gap: 0.9rem; }
.stat-icon {
	flex: none; width: 52px; height: 52px; border-radius: 50%;
	background: var(--sicb-navy-800); color: var(--sicb-gold-500);
	display: flex; align-items: center; justify-content: center;
}
.stat-number-light { display: block; font-family: var(--sicb-font-heading); font-weight: 700; font-size: 1.3rem; color: var(--sicb-navy-900); line-height: 1.2; }
.stat-label-light { display: block; font-size: 0.82rem; color: var(--sicb-color-text-muted); }

/* =========================================================
   8. PAGE HERO (inner pages)
   ========================================================= */
.page-hero {
	background: linear-gradient(120deg, var(--sicb-navy-900), var(--sicb-navy-700));
	color: #fff; padding-block: var(--sicb-space-lg); position: relative; overflow: hidden;
}
.page-hero--compact { padding-block: 2.25rem; }
.page-hero--compact h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.page-hero h1 { color: #fff; margin-bottom: 0.5rem; }
.page-hero .container { position: relative; z-index: 1; text-align: center; }
.page-hero .container p { margin-inline: auto; }
.breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.breadcrumb a { color: rgba(255,255,255,0.75); }
.breadcrumb a:hover { color: var(--sicb-gold-500); }
.page-hero--textured::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(220,174,63,0.18) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
	mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.page-hero--dotgrid::before {
	-webkit-mask-image: none; mask-image: none;
	left: 0; right: auto; width: 90px;
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
	mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
}

/* =========================================================
   9. FEATURE / VALUE LISTS
   ========================================================= */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sicb-space-sm); }
.feature-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.feature-list .tick {
	flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sicb-gold-100);
	color: var(--sicb-gold-700); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}

/* =========================================================
   10. TIMELINE (History page)
   ========================================================= */
.profile-card {
	background: linear-gradient(160deg, var(--sicb-bg-soft), var(--sicb-white));
	border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-lg);
	box-shadow: var(--sicb-shadow-md); padding: var(--sicb-space-lg) var(--sicb-space-md);
	text-align: center; max-width: 400px; width: 100%; margin-inline: auto; position: relative; overflow: hidden;
}
.profile-card::before,
.profile-card::after {
	content: ""; position: absolute; width: 34px; height: 34px; border: 3px solid var(--sicb-gold-500);
}
.profile-card::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.profile-card::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.profile-photo-ring { position: relative; width: 180px; margin-inline: auto; }
.profile-photo-ring::before {
	content: ""; position: absolute; inset: -14px; border-radius: 50%;
	background-image: radial-gradient(var(--sicb-gold-500) 1.4px, transparent 1.4px);
	background-size: 9px 9px; opacity: 0.55;
	-webkit-mask-image: radial-gradient(circle, transparent 62%, #000 64%);
	mask-image: radial-gradient(circle, transparent 62%, #000 64%);
}
.profile-card img {
	width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: top center;
	margin-inline: auto; border: 4px solid var(--sicb-white); box-shadow: var(--sicb-shadow-md);
	outline: 2px solid var(--sicb-gold-500); outline-offset: 4px; position: relative;
}
.profile-card-watermark {
	margin-top: var(--sicb-space-md); color: var(--sicb-gold-500); opacity: 0.35;
	display: flex; justify-content: center;
}
.profile-card .profile-name { font-family: var(--sicb-font-heading); font-weight: 700; font-size: 1.15rem; color: var(--sicb-navy-900); margin: var(--sicb-space-sm) 0 0.15rem; }
.profile-card .profile-title { font-size: 0.85rem; color: var(--sicb-gold-700); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.profile-card .profile-subtitle { font-size: 0.85rem; color: var(--sicb-color-text-muted); margin: 0.1rem 0 0; }
.profile-card .name-divider { margin: var(--sicb-space-sm) auto; }
.profile-badge-icon {
	display: inline-flex; align-items: center; justify-content: center; margin-top: 0.3rem;
	width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--sicb-gold-500); color: var(--sicb-gold-600);
}

.timeline { border-left: 3px solid var(--sicb-border); padding-left: var(--sicb-space-md); display: grid; gap: var(--sicb-space-md); }
.timeline-item { position: relative; }
.timeline-item::before {
	content: ""; position: absolute; left: calc(-1 * var(--sicb-space-md) - 8px); top: 4px;
	width: 14px; height: 14px; border-radius: 50%; background: var(--sicb-gold-600); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--sicb-gold-600);
}
.timeline-item h3 { margin-bottom: 0.25rem; }

/* -- Icon timeline: badge + dotted connector variant -- */
.icon-timeline { display: grid; gap: var(--sicb-space-lg); }
.icon-timeline-item { display: flex; gap: var(--sicb-space-md); position: relative; }
.icon-timeline-item:not(:last-child)::after {
	content: ""; position: absolute; left: 27px; top: 58px; bottom: -1.75rem; width: 0;
	border-left: 2px dotted var(--sicb-gold-500);
}
.icon-timeline-badge {
	flex: none; width: 56px; height: 56px; border-radius: 50%;
	background: var(--sicb-navy-800); border: 3px solid var(--sicb-gold-500); color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: var(--sicb-shadow-sm);
	position: relative; z-index: 1;
}
.icon-timeline-item h3 { margin-bottom: 0.3rem; }
.icon-timeline-item p { margin: 0; }

.icon-timeline--compact { gap: var(--sicb-space-md); margin-top: var(--sicb-space-md); }
.icon-timeline--compact .icon-timeline-badge { width: 44px; height: 44px; border-width: 2px; }
.icon-timeline--compact .icon-timeline-badge svg { width: 18px; height: 18px; }
.icon-timeline--compact .icon-timeline-item:not(:last-child)::after { left: 21px; top: 46px; bottom: -1.25rem; }

/* -- Value badges row (icon + title + subtitle) -- */
.value-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sicb-space-sm); margin-top: var(--sicb-space-lg); }
@media (min-width: 768px) { .value-badges { grid-template-columns: repeat(4, 1fr); } }
.value-badge {
	display: flex; align-items: center; gap: 0.75rem; background: var(--sicb-bg-soft);
	border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md); padding: var(--sicb-space-sm);
}

/* Contained variant: a single bordered panel housing the badges, sized to
   whatever column it sits in (e.g. the Director's Welcome text column)
   rather than stretching edge-to-edge across the whole section. */
.value-badges-panel {
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-lg);
	box-shadow: var(--sicb-shadow-md); padding: var(--sicb-space-md); margin-top: var(--sicb-space-lg);
}
.value-badges-panel .value-badges { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (min-width: 640px) { .value-badges-panel .value-badges { grid-template-columns: repeat(4, 1fr); } }
.value-badges-panel .value-badge { background: var(--sicb-color-bg); border-color: transparent; padding: var(--sicb-space-xs); flex-direction: column; text-align: center; gap: 0.4rem; }
.value-badges-panel .value-badge-icon { margin-inline: auto; }
.value-badge-icon {
	flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--sicb-gold-100);
	color: var(--sicb-gold-700); display: flex; align-items: center; justify-content: center;
}
.value-badge h3 { font-size: 0.92rem; margin-bottom: 0.1rem; }
.value-badge p { font-size: 0.78rem; margin: 0; color: var(--sicb-color-text-muted); }

/* -- Dark 5-icon value strip (Principal's Welcome) -- */
.value-strip-dark {
	background: linear-gradient(160deg, var(--sicb-navy-800), var(--sicb-navy-900));
	border-radius: var(--sicb-radius-lg); box-shadow: var(--sicb-shadow-lg);
	padding: var(--sicb-space-lg) var(--sicb-space-md); border-bottom: 4px solid var(--sicb-gold-500);
}
.value-strip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sicb-space-md); text-align: center; }
@media (min-width: 768px) { .value-strip-grid { grid-template-columns: repeat(5, 1fr); } }
.value-strip-item { position: relative; padding-inline: var(--sicb-space-xs); }
@media (min-width: 768px) {
	.value-strip-item:not(:last-child)::after {
		content: ""; position: absolute; top: 8px; bottom: 8px; right: calc(-1 * var(--sicb-space-md) / 2);
		width: 1px; background: rgba(220,174,63,0.3);
	}
}
.value-strip-icon {
	display: flex; align-items: center; justify-content: center; margin: 0 auto 0.6rem;
	width: 52px; height: 52px; border-radius: 50%; background: var(--sicb-white); color: var(--sicb-gold-600);
	border: 2px solid var(--sicb-gold-500); box-shadow: var(--sicb-shadow-sm);
}
.value-strip-item h3 { color: #fff; font-size: 0.98rem; margin-bottom: 0.25rem; }
.value-strip-item p { color: rgba(255,255,255,0.65); font-size: 0.82rem; margin: 0; }

/* -- Parent-connect card (Principal's Welcome) -- */
.parent-connect-card {
	display: grid; gap: var(--sicb-space-lg); align-items: start; position: relative; overflow: hidden;
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-lg);
	box-shadow: var(--sicb-shadow-lg); padding: var(--sicb-space-lg);
	border-top: 4px solid var(--sicb-gold-500); border-bottom: 4px solid var(--sicb-gold-500);
}
@media (min-width: 768px) { .parent-connect-card { grid-template-columns: 0.6fr 1.4fr; align-items: center; } }
.parent-connect-card::after {
	content: ""; position: absolute; bottom: -40px; right: -40px; width: 140px; height: 140px;
	border-radius: 50%; background: var(--sicb-navy-900); opacity: 0.06; z-index: 0;
}
.parent-connect-illustration { display: flex; justify-content: center; position: relative; z-index: 1; }
.parent-connect-body { position: relative; z-index: 1; }
.parent-connect-body h2 { margin-top: 0.2rem; }

.parent-connect-points { margin-top: var(--sicb-space-md); gap: var(--sicb-space-md) var(--sicb-space-lg); }
.parent-connect-point { display: flex; gap: 0.9rem; align-items: flex-start; }
.parent-connect-point .icon-timeline-badge { width: 44px; height: 44px; border-width: 2px; }
.parent-connect-point .icon-timeline-badge svg { width: 18px; height: 18px; }
.parent-connect-point p { margin: 0; padding-bottom: var(--sicb-space-sm); border-bottom: 1px dashed var(--sicb-border); }

.parent-connect-features {
	grid-column: 1 / -1; position: relative; z-index: 1;
	background: var(--sicb-gold-100); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md);
	padding: var(--sicb-space-md); margin-top: var(--sicb-space-md);
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sicb-space-md);
}
@media (min-width: 768px) { .parent-connect-features { grid-template-columns: repeat(4, 1fr); } }
.parent-connect-feature { display: flex; align-items: center; gap: 0.75rem; }
.parent-connect-feature h3 { font-size: 0.95rem; margin-bottom: 0.15rem; }
.parent-connect-feature p { font-size: 0.8rem; margin: 0; color: var(--sicb-color-text-muted); }

/* -- About Us: mission quote-highlight card -- */
.quote-highlight-card {
	position: relative; background: var(--sicb-gold-100); border: 1px dashed var(--sicb-gold-500);
	border-radius: var(--sicb-radius-lg); padding: var(--sicb-space-lg) var(--sicb-space-md) var(--sicb-space-md);
	margin-top: var(--sicb-space-md);
}
.quote-highlight-icon {
	position: absolute; top: -20px; left: var(--sicb-space-md);
	width: 44px; height: 44px; border-radius: 50%; background: var(--sicb-navy-800); color: var(--sicb-gold-500);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--sicb-shadow-sm);
}
.quote-highlight-card p { margin: 0; font-size: 0.92rem; }

/* -- About Us: full-width pull quote -- */
.pull-quote-band {
	display: flex; align-items: flex-start; gap: var(--sicb-space-md);
	background: var(--sicb-gold-100); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-lg);
	padding: var(--sicb-space-lg); margin-top: var(--sicb-space-xl);
}
.pull-quote-icon { flex: none; color: var(--sicb-gold-500); }
.pull-quote-band p { margin: 0; font-size: 1.1rem; font-style: italic; color: var(--sicb-navy-900); line-height: 1.6; }

/* -- About Us: trust cards (white, gold-ring icon) -- */
.trust-card {
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md);
	box-shadow: var(--sicb-shadow-sm); padding: var(--sicb-space-lg) var(--sicb-space-sm); text-align: center;
	transition: box-shadow .2s ease, transform .2s ease;
}
.trust-card:hover { box-shadow: var(--sicb-shadow-md); transform: translateY(-4px); }
.trust-card-icon {
	display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem;
	width: 52px; height: 52px; border-radius: 50%; background: var(--sicb-white);
	border: 2px solid var(--sicb-gold-500); color: var(--sicb-gold-600);
}
.trust-card .stat-number { display: block; font-family: var(--sicb-font-heading); font-weight: 700; font-size: 1.6rem; }
.trust-card .stat-label { display: block; font-size: 0.85rem; }
.trust-card h3 { font-size: 1.02rem; margin: 0; }

/* -- About Us: framed photo with overlapping badge -- */
.framed-photo { position: relative; }
.framed-photo::before {
	content: ""; position: absolute; inset: -10px auto auto -10px; width: 100%; height: 100%;
	border: 2px dashed var(--sicb-gold-500); border-radius: var(--sicb-radius-lg); z-index: -1;
}
.framed-photo img { border-radius: var(--sicb-radius-lg); box-shadow: var(--sicb-shadow-md); }
.framed-photo-badge {
	position: absolute; top: -16px; left: -16px; z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; background: var(--sicb-gold-600); color: var(--sicb-navy-900);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--sicb-shadow-md);
	border: 3px solid var(--sicb-white);
}

/* -- Why SICB: feature highlight cards -- */
.feature-highlight-card {
	background: var(--sicb-gold-100); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-lg);
	padding: var(--sicb-space-lg) var(--sicb-space-md);
}
.feature-highlight-icon {
	display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem;
	width: 50px; height: 50px; border-radius: 50%; background: var(--sicb-navy-800); color: var(--sicb-gold-500);
	box-shadow: var(--sicb-shadow-sm);
}
.feature-highlight-card h3 { color: var(--sicb-gold-700); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem; margin-bottom: 0.6rem; }
.feature-highlight-card p { margin: 0; font-size: 0.92rem; }

/* -- Why SICB: 4 value mini-cards -- */
.value-mini-card {
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md);
	box-shadow: var(--sicb-shadow-sm); padding: var(--sicb-space-md) var(--sicb-space-sm); text-align: center;
	transition: box-shadow .2s ease, transform .2s ease;
}
.value-mini-card:hover { box-shadow: var(--sicb-shadow-md); transform: translateY(-4px); }
.value-mini-icon {
	display: flex; align-items: center; justify-content: center; margin: 0 auto 0.7rem;
	width: 50px; height: 50px; border-radius: 50%; background: var(--sicb-navy-800); color: var(--sicb-gold-500);
}
.value-mini-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.value-mini-card p { font-size: 0.85rem; margin: 0 0 0.6rem; }
.value-mini-card::after { content: ""; display: block; width: 26px; height: 2px; background: var(--sicb-gold-500); margin-inline: auto; }

/* -- Why SICB: leadership card -- */
.leader-card {
	max-width: 220px; margin-inline: auto; text-align: center; background: var(--sicb-white);
	border: 1px dashed var(--sicb-gold-500); border-radius: var(--sicb-radius-lg);
	padding: var(--sicb-space-lg) var(--sicb-space-sm); box-shadow: var(--sicb-shadow-sm);
}
.leader-card-icon { display: flex; justify-content: center; color: var(--sicb-gold-600); margin-bottom: 0.5rem; }
.leader-card h3 { margin-bottom: 0.15rem; font-size: 1.05rem; }
.leader-card p { margin: 0; font-size: 0.85rem; }

/* -- Academics: photo with corner-bracket accents -- */
.framed-photo--corners { position: relative; }
.framed-photo--corners::before {
	content: ""; position: absolute; top: -10px; left: -10px; width: 34px; height: 34px;
	border-top: 3px solid var(--sicb-gold-500); border-left: 3px solid var(--sicb-gold-500);
	background: none; border-radius: 0;
}
.framed-photo--corners::after {
	content: ""; position: absolute; bottom: -10px; right: -10px; width: 34px; height: 34px;
	border-bottom: 3px solid var(--sicb-gold-500); border-right: 3px solid var(--sicb-gold-500);
}

/* -- Academics: mini navy value strip under photo -- */
.mini-value-strip {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: var(--sicb-space-md);
	background: var(--sicb-navy-900); border-radius: var(--sicb-radius-md); overflow: hidden; box-shadow: var(--sicb-shadow-sm);
}
@media (min-width: 480px) { .mini-value-strip { grid-template-columns: repeat(4, 1fr); } }
.mini-value-strip-item { padding: var(--sicb-space-sm) var(--sicb-space-xs); text-align: center; }
.mini-value-strip-item span { display: flex; justify-content: center; color: var(--sicb-gold-500); margin-bottom: 0.4rem; }
.mini-value-strip-item p { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.78rem; font-weight: 600; }

/* -- Academics: activity cards (icon + text inline) -- */
.activity-card {
	display: flex; align-items: center; gap: 0.75rem;
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md);
	box-shadow: var(--sicb-shadow-sm); padding: var(--sicb-space-sm) var(--sicb-space-md);
}
.activity-card-icon {
	flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--sicb-navy-100);
	color: var(--sicb-color-primary); display: flex; align-items: center; justify-content: center;
}
.activity-card h3 { font-size: 0.95rem; margin: 0; }

/* -- Academics: floating icon columns -- */
.floating-icon-col { position: relative; }
.floating-icon-badge {
	display: none; position: absolute; top: 0; width: 64px; height: 64px; border-radius: 50%;
	background: var(--sicb-navy-800); color: var(--sicb-gold-500); border: 3px solid var(--sicb-gold-500);
	align-items: center; justify-content: center; box-shadow: var(--sicb-shadow-md);
}
.floating-icon-badge--left { left: -32px; }
.floating-icon-badge--right { right: -32px; }
@media (min-width: 1180px) { .floating-icon-badge { display: flex; } }

.feature-list--boxed li {
	border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md);
	padding: 0.85rem 1.1rem; background: var(--sicb-white);
}

/* -- CTA band with a faint decorative watermark -- */
.cta-band--textured { position: relative; overflow: hidden; }
.cta-band--textured::after {
	content: ""; position: absolute; top: -20%; right: -5%; width: 45%; height: 140%;
	background-image: radial-gradient(rgba(10,32,54,0.12) 1.5px, transparent 1.5px);
	background-size: 16px 16px; pointer-events: none;
}

/* -- Toppers: decorative header -- */
.toppers-header { position: relative; }
.toppers-wreath { color: var(--sicb-gold-500); margin-bottom: 0.5rem; }
.toppers-divider { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.toppers-divider span { width: 36px; height: 1px; background: var(--sicb-gold-500); }
.toppers-divider i { width: 6px; height: 6px; background: var(--sicb-gold-600); transform: rotate(45deg); display: block; }

/* -- Toppers: podium (top 3) -- */
.topper-podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--sicb-space-md); flex-wrap: wrap; margin-bottom: var(--sicb-space-xl); }
.topper-podium-card {
	width: 250px; text-align: center; background: var(--sicb-white); border-radius: var(--sicb-radius-lg);
	box-shadow: var(--sicb-shadow-md); padding: var(--sicb-space-lg) var(--sicb-space-sm) var(--sicb-space-md);
	border: 1px solid var(--sicb-border); position: relative;
	transition: box-shadow .25s ease, transform .25s ease;
}
.topper-podium-card:hover { box-shadow: var(--sicb-shadow-lg); transform: translateY(-5px); }
.topper-podium-card.is-first {
	width: 290px; padding-top: calc(var(--sicb-space-lg) + 0.75rem); margin-bottom: 1.25rem;
	background: linear-gradient(165deg, var(--sicb-navy-800), var(--sicb-navy-900));
	border: 2px solid var(--sicb-gold-500); box-shadow: var(--sicb-shadow-lg); z-index: 1;
}

.rank-badge {
	position: absolute; top: var(--sicb-space-sm); right: var(--sicb-space-sm);
	background: var(--sicb-navy-800); color: #fff; font-weight: 700; font-size: 0.8rem;
	padding: 0.3rem 0.8rem; border-radius: 999px; box-shadow: var(--sicb-shadow-sm);
}
.top-performer-badge {
	position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
	background: var(--sicb-gold-600); color: var(--sicb-navy-900); font-weight: 700; font-size: 0.72rem;
	text-transform: uppercase; letter-spacing: 0.04em; padding: 0.4rem 0.9rem; border-radius: 999px;
	box-shadow: var(--sicb-shadow-md); z-index: 3;
}

.topper-photo-row { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--sicb-space-sm); }
.topper-laurel { color: var(--sicb-gold-500); opacity: 0.85; flex: none; margin-top: 1.5rem; }
.topper-laurel.is-right { transform: scaleX(-1); }

.topper-photo-wrap {
	position: relative; width: 130px; aspect-ratio: 1/1; margin: 0 auto var(--sicb-space-sm);
	border-radius: 50%; overflow: hidden; border: 4px solid var(--sicb-white);
	box-shadow: var(--sicb-shadow-md); outline: 3px solid var(--sicb-gold-500); outline-offset: 2px;
}
.topper-photo-row .topper-photo-wrap { margin-bottom: 0; }
.is-first .topper-photo-wrap { width: 150px; outline-color: var(--sicb-gold-500); }
.topper-photo-wrap img {
	width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
	transition: transform .4s ease;
}
.topper-podium-card:hover .topper-photo-wrap img,
.topper-mini-card:hover .topper-photo-wrap img { transform: scale(1.15); }

.name-divider { width: 30px; height: 2px; background: var(--sicb-gold-500); margin: 0.3rem auto 0.45rem; }
.topper-podium-card .profile-name, .topper-mini-card .profile-name { font-family: var(--sicb-font-heading); font-weight: 700; color: var(--sicb-navy-900); margin: 0; font-size: 1.05rem; }
.is-first .profile-name { color: #fff; }
.topper-podium-card .topper-class { font-size: 0.82rem; color: var(--sicb-color-text-muted); margin-bottom: 0.75rem; }
.is-first .topper-class { color: rgba(255,255,255,0.7); }
.topper-score-pill {
	display: inline-block; background: var(--sicb-navy-800); color: #fff; font-weight: 700; font-size: 0.88rem;
	padding: 0.35rem 1.1rem; border-radius: 999px;
}
.is-first .topper-score-pill { background: var(--sicb-gold-600); color: var(--sicb-navy-900); font-size: 0.95rem; }

/* -- Toppers: honors grid (rest) -- */
.topper-honors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sicb-space-sm); }
@media (min-width: 768px) { .topper-honors-grid { grid-template-columns: repeat(4, 1fr); } }
.topper-mini-card {
	text-align: center; background: var(--tile-bg, var(--sicb-white)); border-radius: var(--sicb-radius-md);
	box-shadow: var(--sicb-shadow-sm); border: 1px solid var(--sicb-border);
	padding: var(--sicb-space-md) var(--sicb-space-xs); transition: box-shadow .25s ease, transform .25s ease;
}
.topper-mini-card:hover { box-shadow: var(--sicb-shadow-md); transform: translateY(-4px); }
.topper-mini-card .topper-photo-wrap { width: 96px; outline-width: 2px; outline-offset: 2px; border-width: 3px; }
.topper-mini-card .profile-name { font-size: 1rem; }
.topper-mini-card .topper-class { font-size: 0.78rem; color: var(--sicb-color-text-muted); margin-bottom: 0.6rem; }

/* -- Toppers: closing CTA bar -- */
.toppers-cta {
	display: flex; align-items: center; gap: var(--sicb-space-md); flex-wrap: wrap;
	background: linear-gradient(120deg, var(--sicb-navy-900), var(--sicb-navy-700));
	border-radius: var(--sicb-radius-lg); padding: var(--sicb-space-md) var(--sicb-space-lg);
	margin-top: var(--sicb-space-xl);
}
.toppers-cta-icon {
	flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(220,174,63,0.15);
	color: var(--sicb-gold-500); display: flex; align-items: center; justify-content: center;
}
.toppers-cta-text { flex: 1 1 260px; }
.toppers-cta-text .toppers-cta-heading { font-family: var(--sicb-font-heading); color: var(--sicb-gold-500); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.2rem; }
.toppers-cta-text p.toppers-cta-sub { color: rgba(255,255,255,0.75); margin: 0; font-size: 0.92rem; }
.toppers-cta .btn { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; }

/* =========================================================
   11. GALLERY
   ========================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sicb-space-xs); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid figure { border-radius: var(--sicb-radius-md); overflow: hidden; aspect-ratio: 4/3; margin: 0; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-grid a:hover img { transform: scale(1.06); }

/* =========================================================
   12. CTA BAND
   ========================================================= */
.cta-band {
	background: var(--sicb-gold-600); color: var(--sicb-navy-900);
	padding-block: var(--sicb-space-lg); text-align: center;
}
.cta-band h2 { color: var(--sicb-navy-900); margin: 0 0 0.25rem; }
.cta-band .btn-dark:hover { background: var(--sicb-navy-800); }
.cta-band-row { display: flex; align-items: center; gap: var(--sicb-space-md); flex-wrap: wrap; text-align: left; }
.cta-band-row .cta-band-text { flex: 1 1 320px; }
.cta-band-row .cta-band-text p { margin: 0; color: rgba(10,32,54,0.75); }
.cta-band-icon {
	flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.35);
	color: var(--sicb-navy-900); display: flex; align-items: center; justify-content: center;
}
.cta-band-row .btn { flex: none; }
@media (max-width: 640px) { .cta-band-row { justify-content: center; text-align: center; } .cta-band-row .cta-band-text { text-align: center; } }

/* =========================================================
   13. CONTACT
   ========================================================= */
.contact-card { display: flex; gap: 1rem; align-items: flex-start; }
.contact-card .icon {
	flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sicb-navy-100);
	display: flex; align-items: center; justify-content: center; color: var(--sicb-color-primary); font-weight: 700;
}
.contact-card h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }
.contact-card p { margin: 0; }
.map-embed { border-radius: var(--sicb-radius-md); overflow: hidden; box-shadow: var(--sicb-shadow-sm); border: 1px solid var(--sicb-border); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

/* -- Contact page: info tiles, message card, institution crest card -- */
.contact-tile-grid { margin-top: var(--sicb-space-md); align-items: stretch; }
.contact-tile {
	display: flex; gap: 0.85rem; align-items: center; min-height: 92px;
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-md);
	box-shadow: var(--sicb-shadow-sm); padding: var(--sicb-space-sm) var(--sicb-space-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}
.contact-tile:hover { box-shadow: var(--sicb-shadow-md); transform: translateY(-3px); }
.contact-tile .icon {
	flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sicb-navy-100);
	display: flex; align-items: center; justify-content: center; color: var(--sicb-color-primary);
}
.contact-tile h3 { font-size: 0.94rem; margin-bottom: 0.2rem; }
.contact-tile p { margin: 0; font-size: 0.86rem; line-height: 1.4; }

.get-in-touch-heading { font-size: clamp(1.8rem, 3vw, 2.3rem); }

.split--stretch { align-items: stretch; }
.message-card {
	background: var(--sicb-white); border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-lg);
	box-shadow: var(--sicb-shadow-md); padding: var(--sicb-space-lg);
	display: flex; flex-direction: column; height: 100%;
}
.split--stretch .crest-card { height: 100%; }
.message-card .sicb-form-wrap { flex: 1; }

/* -- Premium photo frame variant (Contact page) -- */
.framed-photo--premium img { box-shadow: var(--sicb-shadow-lg); }
.framed-photo--premium::before,
.framed-photo--premium::after { border-color: var(--sicb-gold-600); width: 40px; height: 40px; }

.crest-card {
	background: linear-gradient(160deg, var(--sicb-navy-800), var(--sicb-navy-900));
	border: 1px solid var(--sicb-navy-700); border-radius: var(--sicb-radius-lg);
	box-shadow: var(--sicb-shadow-md); padding: var(--sicb-space-lg); text-align: center;
}
.crest-card-logo { max-width: 260px; margin-inline: auto; }
.crest-card-tagline { font-family: var(--sicb-font-heading); font-weight: 700; color: #fff; margin: 0 0 0.15rem; }
.crest-card-since { font-size: 0.85rem; color: var(--sicb-gold-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.crest-card .map-embed { border-color: var(--sicb-navy-700); }
.crest-card {
	display: flex; flex-direction: column; justify-content: center; min-height: 100%;
	position: relative; border-top: 3px solid var(--sicb-gold-500);
}
.crest-card-est {
	position: absolute; top: var(--sicb-space-sm); right: var(--sicb-space-sm);
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--sicb-navy-900); background: var(--sicb-gold-500); padding: 0.3rem 0.7rem; border-radius: 999px;
}
.crest-card-links { list-style: none; margin: var(--sicb-space-md) 0 0; padding: 0; display: grid; gap: 0.7rem; text-align: left; }
.crest-card-links li { display: flex; gap: 0.6rem; align-items: flex-start; color: rgba(255,255,255,0.8); font-size: 0.88rem; }
.crest-card-links li svg { flex: none; color: var(--sicb-gold-500); margin-top: 0.15rem; }
.crest-card-links a { color: rgba(255,255,255,0.8); }
.crest-card-links a:hover { color: var(--sicb-gold-500); }
.crest-card-social { display: flex; justify-content: center; gap: 0.75rem; margin-top: var(--sicb-space-md); }
.crest-card-social a {
	width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.crest-card-social a:hover { background: var(--sicb-gold-600); border-color: var(--sicb-gold-600); color: var(--sicb-navy-900); }

/* -- Contact page: quick-contact strip -- */
.quick-contact-strip {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
	background: var(--sicb-navy-900); border-radius: var(--sicb-radius-lg); overflow: hidden;
	box-shadow: var(--sicb-shadow-md); margin-top: calc(-1 * var(--sicb-space-lg)); position: relative; z-index: 2;
}
@media (min-width: 768px) { .quick-contact-strip { grid-template-columns: repeat(4, 1fr); } }
.quick-contact-item { display: flex; align-items: center; gap: 0.75rem; padding: var(--sicb-space-md) var(--sicb-space-sm); background: var(--sicb-navy-900); }
.quick-contact-item span {
	flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(220,174,63,0.15); color: var(--sicb-gold-500);
	display: flex; align-items: center; justify-content: center;
}
.quick-contact-item h3 { color: #fff; font-size: 0.88rem; margin-bottom: 0.1rem; }
.quick-contact-item p { color: rgba(255,255,255,0.65); font-size: 0.82rem; margin: 0; }

.cta-band--compact { padding-block: var(--sicb-space-md); }

/* -- Generic form styling -- applies to whatever the_content() renders,
   whether that's the live site's Elementor form or the local preview form,
   so the theme never needs to know which plugin produced the markup. -- */
.sicb-form-wrap { margin-top: var(--sicb-space-md); }
.sicb-form-row { display: grid; gap: var(--sicb-space-sm); }
@media (min-width: 480px) { .sicb-form-row { grid-template-columns: 1fr 1fr; } }
.entry-content form p { margin-bottom: var(--sicb-space-sm); }
.entry-content form label {
	display: block; font-size: 0.85rem; font-weight: 600; color: var(--sicb-navy-800); margin-bottom: 0.35rem;
}
.entry-content form input[type="text"],
.entry-content form input[type="email"],
.entry-content form input[type="tel"],
.entry-content form input[type="url"],
.entry-content form input[type="number"],
.entry-content form input[type="search"],
.entry-content form input[type="date"],
.entry-content form textarea,
.entry-content form select {
	display: block; width: 100%; padding: 0.8rem 1rem; margin-bottom: var(--sicb-space-sm);
	border: 1px solid var(--sicb-border); border-radius: var(--sicb-radius-sm);
	font-family: var(--sicb-font-body); font-size: 0.95rem; color: var(--sicb-color-text); background: var(--sicb-white);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.entry-content form input:focus,
.entry-content form textarea:focus,
.entry-content form select:focus {
	outline: none; border-color: var(--sicb-gold-500); box-shadow: 0 0 0 3px rgba(220,174,63,0.18);
}
.entry-content form textarea { resize: vertical; min-height: 120px; }
.entry-content form button,
.entry-content form input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	background: var(--sicb-color-primary); color: #fff; border: 2px solid var(--sicb-color-primary);
	padding: 0.85rem 1.8rem; border-radius: var(--sicb-radius-sm); font-weight: 700; font-size: 0.95rem;
	cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.entry-content form button:hover,
.entry-content form input[type="submit"]:hover { background: var(--sicb-navy-900); transform: translateY(-2px); }

.contact-strip-section { padding-block: var(--sicb-space-lg); }
.contact-strip { display: grid; gap: var(--sicb-space-md); }
@media (min-width: 768px) { .contact-strip { grid-template-columns: repeat(3, 1fr); } }
.contact-strip-item {
	display: flex; gap: 1rem; align-items: flex-start; padding: var(--sicb-space-sm) var(--sicb-space-md);
	border-left: 3px solid var(--sicb-gold-500);
}
.contact-strip-item .icon {
	flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sicb-navy-100);
	display: flex; align-items: center; justify-content: center; color: var(--sicb-color-primary);
}
.contact-strip-item h3 { margin-bottom: 0.2rem; font-size: 1rem; }
.contact-strip-item p { margin: 0; }

/* -- Director's Welcome section: split navy/white background -- */
.director-section { position: relative; overflow: hidden; }
.director-shape {
	display: none; position: absolute; inset: 0; left: 0; width: 48%; z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 900' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L260,0 C170,90 320,180 230,280 C150,370 300,460 210,560 C130,650 280,740 190,900 L0,900 Z' fill='%230f2a4a'/%3E%3Cpath d='M260,0 C170,90 320,180 230,280 C150,370 300,460 210,560 C130,650 280,740 190,900' fill='none' stroke='%23dcae3f' stroke-width='5'/%3E%3C/svg%3E");
	background-size: 100% 100%; background-repeat: no-repeat;
}
.director-shape::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(220,174,63,0.3) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	-webkit-mask-image: radial-gradient(circle at 12% 15%, #000 0%, transparent 32%);
	mask-image: radial-gradient(circle at 12% 15%, #000 0%, transparent 32%);
}
@media (min-width: 900px) { .director-shape { display: block; } }
.director-section .container { position: relative; z-index: 1; }
.director-bubbles-canvas {
	position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
	pointer-events: none; display: block;
}

/* Mouse-parallax targets (see assets/js/director-parallax.js). The JS never
   attaches on touch devices or when prefers-reduced-motion is set, so these
   elements simply never receive an inline transform there -- this CSS alone
   has no visible effect without the script running. */
.director-section .has-parallax { transition: transform 0.15s ease-out; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	.director-section .has-parallax { transition: none; }
}

/* -- Director's Welcome: unified photo + caption card -- */
.director-photo-block { max-width: 440px; width: 100%; margin-inline: auto; position: relative; }
.director-card {
	position: relative; border-radius: var(--sicb-radius-lg); overflow: hidden;
	box-shadow: var(--sicb-shadow-lg); background: var(--sicb-navy-900);
	border: 3px solid var(--sicb-gold-500);
}
.director-photo-block::before {
	content: ""; position: absolute; bottom: -8%; right: -14%; width: 65%; height: 45%;
	background: var(--sicb-bg-soft); border-radius: 50%; z-index: -1;
}
.director-photo-frame img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; object-position: top center; }
.director-caption { text-align: center; padding: var(--sicb-space-md) var(--sicb-space-sm); }
.director-caption .profile-name { color: var(--sicb-gold-500); font-size: 1.25rem; margin: 0 0 0.15rem; }
.director-caption .profile-title { color: rgba(255,255,255,0.85); font-size: 0.88rem; font-weight: 500; text-transform: none; letter-spacing: normal; line-height: 1.4; }
.director-caption .name-divider { background: var(--sicb-gold-500); }
.director-signature {
	display: block; margin-top: 0.4rem; color: var(--sicb-gold-500); font-size: 1.35rem; font-style: italic;
	font-family: 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive;
}

.director-header { text-align: center; margin-bottom: 0.6rem; }
.director-wreath { color: var(--sicb-gold-500); display: flex; justify-content: center; margin-bottom: 0.3rem; }
.director-header .toppers-divider { margin: 0.3rem 0; }
.divider-dot {
	display: block; width: 6px; height: 6px; background: var(--sicb-gold-600);
	transform: rotate(45deg); margin: 0 auto 0.5rem;
}

.mini-timeline { display: grid; gap: var(--sicb-space-sm); }
.mini-timeline p { position: relative; margin: 0; padding-left: var(--sicb-space-md); }
.mini-timeline p::before {
	content: ""; position: absolute; left: 0; top: 8px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--sicb-gold-600);
}

/* -- Toppers stat card (homepage teaser, alongside the podium) -- */
.topper-stat-card {
	width: 200px; text-align: center; background: linear-gradient(165deg, var(--sicb-navy-800), var(--sicb-navy-900));
	border-radius: var(--sicb-radius-lg); box-shadow: var(--sicb-shadow-md); padding: var(--sicb-space-lg) var(--sicb-space-sm);
	display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.topper-stat-icon {
	width: 46px; height: 46px; border-radius: 50%; background: rgba(220,174,63,0.18); color: var(--sicb-gold-500);
	display: flex; align-items: center; justify-content: center; margin-bottom: 0.3rem;
}
.topper-stat-number { font-family: var(--sicb-font-heading); font-weight: 700; font-size: 1.7rem; color: #fff; }
.topper-stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* Elementor form widget restyle -- keeps the existing form widget/markup, only visual tokens change */
.entry-content .elementor-field-group { margin-bottom: 1rem; }
.entry-content .elementor-field-textual {
	border: 1px solid var(--sicb-border) !important; border-radius: var(--sicb-radius-sm) !important;
	padding: 0.75rem 1rem !important; font-family: var(--sicb-font-body) !important;
}
.entry-content .elementor-button {
	background: var(--sicb-color-primary) !important; border-radius: var(--sicb-radius-sm) !important;
	font-weight: 700 !important;
}

/* =========================================================
   14. FOOTER
   ========================================================= */
.site-footer {
	position: relative;
	background:
		radial-gradient(ellipse 900px 500px at 15% 0%, rgba(220,174,63,0.10), transparent 60%),
		radial-gradient(ellipse 700px 500px at 100% 100%, rgba(31,77,128,0.35), transparent 60%),
		var(--sicb-navy-900);
	color: rgba(255,255,255,0.8);
}
.site-footer::before {
	content: ""; display: block; height: 4px;
	background: linear-gradient(90deg, var(--sicb-navy-700), var(--sicb-gold-600), var(--sicb-navy-700));
}
.footer-top { padding-block: var(--sicb-space-xl); }
.footer-grid { display: grid; gap: var(--sicb-space-lg); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 0.9fr 0.9fr 1.1fr; } }
.footer-grid h3 {
	color: #fff; font-size: 1rem; margin-bottom: var(--sicb-space-sm); text-transform: uppercase;
	letter-spacing: 0.05em; position: relative; padding-bottom: 0.6rem;
}
.footer-grid h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--sicb-gold-600); }
.footer-about img.custom-logo { max-height: 48px; width: auto; margin-bottom: var(--sicb-space-sm); filter: brightness(0) invert(1); }
.footer-about p { color: rgba(255,255,255,0.65); font-size: 0.93rem; }
.footer-affiliation { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: var(--sicb-space-sm) 0; }
.footer-affiliation span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--sicb-gold-500); font-weight: 600; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.93rem; }
.footer-links a { color: rgba(255,255,255,0.75); }
.footer-links a:hover { color: var(--sicb-gold-500); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 0.55rem; color: rgba(255,255,255,0.75); }
.footer-contact-item svg { flex: none; margin-top: 0.2rem; color: var(--sicb-gold-500); }
.footer-social { display: flex; gap: 0.75rem; margin-top: var(--sicb-space-sm); }
.footer-social a {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.footer-social a:hover { background: var(--sicb-gold-600); border-color: var(--sicb-gold-600); color: var(--sicb-navy-900); }
.footer-bottom { position: relative; border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--sicb-space-sm); font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.footer-bottom p { margin: 0; color: inherit; }

/* =========================================================
   15. UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.visually-hidden { position: absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.entry-content { max-width: 860px; margin-inline: auto; }
.entry-content h2 { margin-top: var(--sicb-space-md); }
.entry-content ul { display: grid; gap: 0.5rem; }
/* Contact form wrapper reuses .entry-content for its base text styling, but
   it already sits inside a sized column (.message-card) instead of a
   full-width article -- the inherited auto-centering there was making
   WPForms' own container-width responsive check measure the form as
   narrower than it is, so it always rendered its stacked/mobile layout even
   on wide screens. Un-setting it here only for the form wrapper; the normal
   .sicb-form-row breakpoint above still handles mobile vs desktop columns. */
.entry-content.sicb-form-wrap { margin-inline: 0; }