/* =============================================
   ROYAL PUBLIC SENIOR SECONDARY SCHOOL — Design System
   Ported from the Smart Digital school site design system.
   Modern School Website CSS
   ============================================= */

/* Fonts, brand colours and fluid spacing come from css/tokens.css (a copy of
   shared/tokens.css, loaded first). The names below are this stylesheet's own
   and are kept so the 2,800 lines under them need not change. */

/* --- CSS Custom Properties --- */
:root {
  /* Color Palette */
  --navy:         var(--rp-navy);
  --navy-light:   var(--rp-navy-2);
  --navy-mid:     var(--rp-navy-3);
  --navy-glow:    rgba(11, 26, 59, 0.85);
  --gold:         var(--rp-gold);
  --gold-light:   var(--rp-gold-light);
  --gold-dark:    #D4891A;
  --gold-glow:    rgba(245, 166, 35, 0.20);
  --white:        #FFFFFF;
  --off-white:    #F8F9FF;
  --light-gray:   #EEF1F8;
  --mid-gray:     #C2CAD9;
  --text:         var(--rp-ink);
  --text-muted:   var(--rp-muted);
  --text-light:   #8A9BBC;
  --success:      #22C55E;
  --error:        #EF4444;

  /* Gradients */
  --gradient-hero:    linear-gradient(135deg, #0B1A3B 0%, #162952 55%, #1E3A6B 100%);
  --gradient-gold:    linear-gradient(135deg, #F5A623 0%, #FFC04D 100%);
  --gradient-card:    linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-section: linear-gradient(180deg, #F8F9FF 0%, #EEF1F8 100%);

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(11, 26, 59, 0.06);
  --shadow-sm:   0 2px 10px rgba(11, 26, 59, 0.08);
  --shadow-md:   0 8px 24px rgba(11, 26, 59, 0.12);
  --shadow-lg:   0 16px 48px rgba(11, 26, 59, 0.16);
  --shadow-xl:   0 24px 64px rgba(11, 26, 59, 0.22);
  --shadow-gold: 0 8px 32px rgba(245, 166, 35, 0.30);

  /* Border Radius */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* Typography */
  --font-head: var(--rp-font-head);
  --font-body: var(--rp-font-body);

  /* Spacing */
  --section-pad: var(--rp-space-7);
  --section-pad-sm: var(--rp-space-6);

  /* Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --transition: 0.3s var(--ease);
  --transition-slow: 0.5s var(--ease);

  /* Navbar height */
  --nav-h: 80px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

/* A link inside running text has to look like one, on light and dark
   sections alike: the text keeps its colour, the underline is gold. */
.section p a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.section p a:not([class]):hover { color: var(--gold); }

ul { list-style: none; }

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
}

/* --- Typography Scale --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p  { line-height: 1.75; color: var(--text-muted); }

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rp-gutter);
}

.section {
  padding: var(--section-pad) 0;
}

.section-sm {
  padding: var(--section-pad-sm) 0;
}

.section-dark {
  background: var(--gradient-hero);
  color: var(--white);
}

.section-dark h1, .section-dark h2,
.section-dark h3, .section-dark h4 {
  color: var(--white);
}

.section-dark p { color: rgba(255,255,255,0.75); }

.section-light {
  background: var(--gradient-section);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm { gap: 12px; }
.gap { gap: 20px; }
.gap-lg { gap: 32px; }

.text-center { text-align: center; }
.text-white { color: var(--white) !important; }
.text-gold { color: var(--gold) !important; }
.text-muted { color: var(--text-muted); }

/* --- Section Header --- */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header .label {
  display: inline-block;
  background: var(--gold-glow);
  color: var(--gold-dark);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 166, 35, 0.3);
  margin-bottom: 16px;
}

.section-dark .section-header .label {
  background: rgba(245, 166, 35, 0.15);
  color: var(--gold-light);
  border-color: rgba(245, 166, 35, 0.25);
}

.section-header h2 { margin-bottom: 16px; }

.section-header p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
}

.divider {
  width: 64px;
  height: 4px;
  background: var(--gradient-gold);
  border-radius: 2px;
  margin: 0 auto 24px;
}

/* =============================================
   NAVIGATION
   ============================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: var(--transition);
  padding: 0 var(--rp-gutter);
}

.navbar.scrolled {
  background: rgba(11, 26, 59, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* The school's seal (shared/logo/seal-192.png, round, transparent outside). */
.nav-logo-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav-logo-text .school-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  letter-spacing: 0.01em;
  /* The full name, Kachua Tiniali included, on two even lines beside the seal. */
  max-width: 17.5em;
  text-wrap: balance;
}

.nav-logo-text .school-sub {
  font-size: 0.68rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

.nav-links a.active {
  color: var(--gold);
}

/* Nav CTA */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-gold);
  color: var(--navy) !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold);
  transition: var(--transition);
}

.btn-nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(245, 166, 35, 0.45);
  background: rgba(255,255,255,0.1) !important;
  color: var(--white) !important;
}

/* Login sits beside Apply Now, quieter: an outline, so the gold button stays
   the one new families see first. */
.btn-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--white) !important;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.btn-nav-login:hover {
  border-color: var(--gold);
  color: var(--gold) !important;
}

/* English | অসমীয়া: the same page in the other language (site/as/). In the
   navbar from 1280px, at the top of the mobile menu below that, and in the
   footer everywhere. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 166, 35, 0.55);
  color: var(--gold-light) !important;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: var(--transition);
}
.lang-switch:hover { background: rgba(245, 166, 35, 0.12); border-color: var(--gold); }
.nav-mobile .lang-switch {
  display: flex;
  margin: 4px 0 12px;
  padding: 10px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  border-radius: var(--radius);
  font-size: 1rem;
}
.nav-mobile .lang-switch:hover { padding-left: 10px; }
.footer-bottom .lang-switch { min-height: 32px; padding: 4px 14px; }
.ls-short { display: none; }

/* Assamese pages. Spaced-out capitals suit English labels, but spacing
   Assamese letters apart breaks up the joined letters, so it is turned off;
   and the script needs a little more line height. */
html:lang(as) body * { letter-spacing: normal !important; }
html:lang(as) body { line-height: 1.75; }
html:lang(as) h1, html:lang(as) h2, html:lang(as) h3 { line-height: 1.35; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  min-width: var(--rp-tap);
  min-height: var(--rp-tap);
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 24px 28px;
  z-index: 999;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  /* The page behind is locked while the menu is open, so the menu scrolls
     itself: otherwise the last links (Login) sit below a short phone screen. */
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.nav-mobile a {
  display: block;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 1rem;
  transition: var(--transition);
}

.nav-mobile a:hover { color: var(--gold); padding-left: 8px; }
.nav-mobile a:last-child { border-bottom: none; }

.nav-mobile .btn-mobile-login {
  margin-top: 20px;
  text-align: center;
  color: var(--white);
  font-weight: 600;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
}

.nav-mobile .btn-mobile-login:hover { color: var(--gold); border-color: var(--gold); padding-left: 13px; }
.nav-mobile .btn-mobile-login + .btn-mobile { margin-top: 12px; }

.nav-mobile .btn-mobile {
  margin-top: 20px;
  display: block;
  text-align: center;
  background: var(--gradient-gold);
  color: var(--navy);
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 1rem;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  transition: var(--transition);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-gold);
  color: var(--navy);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(245, 166, 35, 0.45);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.35);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-2px);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}

.btn-outline-gold:hover {
  background: var(--gold-glow);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-dark:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-sm {
  padding: 10px 22px;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 18px 40px;
  font-size: 1.05rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;
  font-size: 1.1rem;
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 0;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/uajglo5t/image/upload/f_auto,q_auto,w_1920/v1791830784/Royal_Public_School_Courtyard_Aerial_View_xmbpi7.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,26,59,0.92) 30%, rgba(11,26,59,0.45) 100%);
  z-index: 2;
}

/* On a phone the text runs the full width, so darken the photograph evenly. */
@media (max-width: 768px) {
  .hero-bg-img  { background-image: url('https://res.cloudinary.com/uajglo5t/image/upload/f_auto,q_auto,w_1000/v1791830784/Royal_Public_School_Courtyard_Aerial_View_xmbpi7.png'); }
  .hero-overlay { background: rgba(11,26,59,0.8); }
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: float-particle 8s infinite;
}

@keyframes float-particle {
  0%   { opacity: 0; transform: translateY(100vh) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100px) scale(1.5); }
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 166, 35, 0.15);
  border: 1px solid rgba(245, 166, 35, 0.35);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  animation: fadeInDown 0.6s ease forwards;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
  max-width: 720px;
  animation: fadeInUp 0.7s 0.1s ease both;
}

.hero-title .highlight {
  color: var(--gold);
  position: relative;
  display: inline-block;
}

.hero-title .highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background: var(--gradient-gold);
  border-radius: 2px;
  animation: expandWidth 1s 0.9s ease both;
}

@keyframes expandWidth {
  from { width: 0; }
  to   { width: 100%; }
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.75);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 40px;
  animation: fadeInUp 0.7s 0.2s ease both;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeInUp 0.7s 0.3s ease both;
  margin-bottom: 60px;
}

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  animation: fadeInUp 0.7s 0.4s ease both;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stat .num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}

.hero-stat .label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.hero-stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(255,255,255,0.15);
  align-self: center;
}

/* Hero scroll indicator */
.scroll-down {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce-scroll 2s ease infinite;
}

.scroll-down .arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  transform: rotate(45deg);
}

@keyframes bounce-scroll {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* =============================================
   ANNOUNCEMENT TICKER
   ============================================= */
.ticker {
  background: var(--gold);
  padding: 10px 0;
  overflow: hidden;
}

.ticker-inner {
  display: flex;
  align-items: center;
  gap: 0;
}

.ticker-label {
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 20px;
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 1;
}

.ticker-track {
  overflow: hidden;
  flex: 1;
}

.ticker-items {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  width: max-content;
}

.ticker-items span {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ticker-items span::before {
  content: '◆';
  font-size: 0.5rem;
  opacity: 0.7;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =============================================
   STATS / COUNTER SECTION
   ============================================= */
.stats-bar {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: -50px auto 0;
  position: relative;
  z-index: 10;
  max-width: 1000px;
}

.stat-item {
  text-align: center;
  padding: 0 clamp(6px, 2vw, 20px);
  min-width: 0;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--light-gray);
}

.stat-num {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  overflow-wrap: anywhere;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-num .suffix {
  color: var(--gold);
  font-size: 1.8rem;
}

.stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* =============================================
   ABOUT SECTION (Homepage snapshot)
   ============================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.about-img-wrap {
  position: relative;
}

.about-img-main {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.about-img-main img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.about-img-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--gradient-gold);
  color: var(--navy);
  padding: 20px 24px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-gold);
}

.about-img-badge .badge-num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.about-img-badge .badge-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

.about-content { }

.about-content .label {
  display: inline-block;
  background: var(--gold-glow);
  color: var(--gold-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 166, 35, 0.3);
  margin-bottom: 16px;
}

.about-content h2 { margin-bottom: 20px; }
.about-content p { margin-bottom: 24px; }

.about-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  transition: var(--transition);
}

.about-feature:hover {
  background: var(--light-gray);
  transform: translateX(4px);
}

.about-feature-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.about-feature-text h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.about-feature-text p {
  font-size: 0.85rem;
  margin: 0;
}

/* =============================================
   WHY-US CARDS
   ============================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.why-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-gold);
  opacity: 0;
  transition: var(--transition);
}

.why-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(245, 166, 35, 0.2);
  transform: translateY(-6px);
}

.why-card:hover::before { opacity: 1; }

.why-icon {
  width: 60px;
  height: 60px;
  background: var(--gold-glow);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 24px;
  transition: var(--transition);
}

.why-card:hover .why-icon {
  background: var(--gradient-gold);
  border-color: transparent;
}

.why-icon.photo { width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid var(--gold); border-radius: 50%; }
.why-icon.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.why-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--white); }
.why-card p  { font-size: 0.9rem; color: rgba(255,255,255,0.65); }

/* On light sections the glass card above is white-on-white; give it a solid card look */
.section:not(.section-dark) .why-card {
  background: var(--white);
  border-color: rgba(11, 26, 59, 0.08);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}
.section:not(.section-dark) .why-card:hover {
  background: var(--white);
  border-color: rgba(245, 166, 35, 0.35);
  box-shadow: var(--shadow-md);
}
.section:not(.section-dark) .why-card h3 { color: var(--navy); }
.section:not(.section-dark) .why-card p  { color: var(--text-muted); }

/* =============================================
   LEADERSHIP MESSAGES
   ============================================= */
.messages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.message-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--light-gray);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.message-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.message-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: var(--font-head);
  font-size: 8rem;
  font-weight: 900;
  color: var(--gold);
  opacity: 0.08;
  line-height: 1;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.message-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  border: 3px solid var(--gold);
}

/* Leadership photos print as passport-size portraits (35 × 45 mm, 7:9). */
.message-avatar.photo { width: 105px; height: 135px; border-radius: 6px; padding: 0; overflow: hidden; background: var(--light-gray); }
.message-avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.message-meta .name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}

.message-meta .role {
  font-size: 0.8rem;
  color: var(--gold-dark);
  font-weight: 600;
  margin-top: 2px;
}

.message-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* =============================================
   FACILITIES SECTION
   ============================================= */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.facility-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light-gray);
  transition: var(--transition);
  group: true;
}

.facility-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: var(--gold);
}

.facility-card-img {
  height: 200px;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
  overflow: hidden;
}

.facility-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.facility-card:hover .facility-card-img img {
  transform: scale(1.06);
}

.facility-card-icon {
  position: absolute;
  bottom: -20px;
  left: 24px;
  width: 48px;
  height: 48px;
  background: var(--gradient-gold);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-gold);
  z-index: 2;
}

.facility-card-body {
  padding: 32px 24px 24px;
}

.facility-card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.facility-card-body p {
  font-size: 0.87rem;
  line-height: 1.65;
}

/* Facility full page */
.facilities-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.facility-full-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light-gray);
  text-align: center;
  transition: var(--transition);
}

.facility-full-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--gold);
}

.facility-full-card .icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
  display: block;
}

.facility-full-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.facility-full-card p { font-size: 0.85rem; }

/* =============================================
   GALLERY
   ============================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--light-gray);
  position: relative;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,26,59,0.7) 0%, transparent 60%);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.gallery-item:hover .gallery-item-overlay { opacity: 1; }

.gallery-item-overlay span {
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Gallery page large */
.gallery-masonry {
  columns: 3;
  column-gap: 16px;
}

.gallery-masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  aspect-ratio: unset;
  height: auto;
}

.gallery-masonry .gallery-item img {
  height: auto;
}

/* =============================================
   ADMISSIONS
   ============================================= */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 50px;
  left: calc(33.33% - 32px);
  width: calc(33.33% + 64px);
  height: 2px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold-light) 100%);
  z-index: 0;
}

.step-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--light-gray);
  text-align: center;
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.step-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 auto 24px;
  box-shadow: var(--shadow-gold);
}

.step-card h3 { margin-bottom: 12px; }
.step-card p  { font-size: 0.9rem; }

/* Docs list */
.docs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  transition: var(--transition);
}

.doc-item:hover { background: var(--light-gray); }

.doc-item .doc-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.doc-item span { font-size: 0.88rem; font-weight: 500; color: var(--text); }

/* =============================================
   DOWNLOADS
   ============================================= */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light-gray);
  transition: var(--transition);
  cursor: pointer;
}

.download-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
  transform: translateX(4px);
}

.download-icon {
  width: 44px;
  height: 44px;
  background: var(--gold-glow);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.download-info .title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 2px;
}

.download-info .subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.download-arrow {
  margin-left: auto;
  color: var(--gold-dark);
  font-size: 1rem;
  flex-shrink: 0;
}

/* =============================================
   SUBJECTS TABLE
   ============================================= */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--light-gray);
  padding-bottom: 0;
}

.tab-btn {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px 22px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.tab-btn.active,
.tab-btn:hover {
  color: var(--navy);
  border-bottom-color: var(--gold);
  background: rgba(245,166,35,0.06);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.subjects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  overflow: hidden;
}

.subjects-table thead {
  background: var(--gradient-hero);
  color: var(--white);
}

.subjects-table th {
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.subjects-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--light-gray);
  color: var(--text);
}

.subjects-table tbody tr:last-child td { border-bottom: none; }

.subjects-table tbody tr:hover { background: var(--off-white); }

.subject-tag {
  display: inline-block;
  background: var(--gold-glow);
  color: var(--gold-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin: 2px;
}

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
  background: var(--gradient-hero);
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(245,166,35,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner h2, .cta-banner p {
  position: relative;
  z-index: 1;
}

.cta-banner h2 { color: var(--white); margin-bottom: 16px; }
.cta-banner p  { color: rgba(255,255,255,0.7); margin-bottom: 36px; max-width: 540px; margin-left: auto; margin-right: auto; }

.cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================
   CONTACT SECTION
   ============================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

.contact-info h3 {
  margin-bottom: 24px;
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-item-icon {
  width: 48px;
  height: 48px;
  background: var(--gold-glow);
  border: 1px solid rgba(245,166,35,0.2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-item-text .ci-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}

.contact-item-text .ci-value {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

.contact-item-text a.ci-value:hover { color: var(--navy); }

/* Contact form */
.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--light-gray);
}

.contact-form h3 { margin-bottom: 28px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 13px 18px;
  border: 2px solid var(--light-gray);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  color: var(--text);
  background: var(--off-white);
  transition: var(--transition);
  outline: none;
  appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--gold-glow);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Map embed */
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: 32px;
  height: 280px;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--navy);
  color: var(--white);
  padding: 80px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .nav-logo {
  margin-bottom: 20px;
}

.footer-brand p {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
}

.footer-social-btn:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-col ul li a:hover {
  color: var(--white);
  padding-left: 6px;
}

.footer-col ul li a::before {
  content: '›';
  color: var(--gold);
  font-size: 1rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.footer-contact-item .icon { font-size: 1rem; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.footer-contact-item .text { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.5; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}

.footer-bottom a { color: var(--gold); }

/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
.page-hero {
  background: var(--gradient-hero);
  padding: 140px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/uajglo5t/image/upload/f_auto,q_auto,w_1600/v1791830784/Royal_Public_School_Courtyard_Aerial_View_xmbpi7.png');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  z-index: 0;
}

.page-hero-content {
  position: relative;
  z-index: 1;
}

.page-hero .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}

.page-hero .breadcrumb a { color: var(--gold); }
.page-hero .breadcrumb span { color: rgba(255,255,255,0.3); }

.page-hero h1 { color: var(--white); margin-bottom: 16px; }
.page-hero p  { color: rgba(255,255,255,0.7); font-size: 1.05rem; max-width: 540px; margin: 0 auto; }

/* =============================================
   ACCORDION
   ============================================= */
.accordion { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--light-gray); }

.accordion-item { border-bottom: 1px solid var(--light-gray); }
.accordion-item:last-child { border-bottom: none; }

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  background: var(--white);
  transition: var(--transition);
  gap: 12px;
}

.accordion-header:hover { background: var(--off-white); }

.accordion-header h4 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
}

.accordion-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid rgba(245,166,35,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--gold-dark);
  transition: var(--transition);
}

.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--navy);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

.accordion-body-inner {
  padding: 0 24px 24px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scroll-triggered reveals */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* =============================================
   RESPONSIVE — NAVIGATION (< 1280px)
   The full desktop menu plus the school name needs about 1,200px. Below the
   1280 breakpoint it becomes the hamburger drawer; tools/responsive.js found
   it overflowing at 1152px when it switched at 1024.
   ============================================= */
/* Nine links fit the full bar from 1280px only with a little less room each
   (the School Shop link, 0030, was the ninth), and up to 1599px since the
   school's name is shown in full (2026-09-26). */
@media (min-width: 1280px) and (max-width: 1599px) {
  .nav-links a { padding: 8px 6px; font-size: 0.84rem; }
  .navbar-inner { gap: 16px; }
  /* The Login button (2026-09-27) fits here only as its icon; the label is
     still its aria-label and title. */
  .nav-cta { gap: 8px; }
  .btn-nav-login { padding: 9px; }
  .btn-nav-login span { display: none; }
  /* The language switch shrinks to one letter here (অ / EN). */
  .nav-cta .lang-switch { min-width: 36px; padding: 6px 9px; }
  .nav-cta .ls-full { display: none; }
  .nav-cta .ls-short { display: inline; }
  /* Assamese menu words run longer than the English. */
  html:lang(as) .nav-links a { padding: 8px 4px; font-size: 0.82rem; }
}

@media (max-width: 1279px) {
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .hamburger { display: flex; }
  .nav-mobile { display: block; }
}

/* =============================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {
  :root {
    --nav-h: 72px;   /* section padding is fluid (tokens.css), no override */
  }

  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .why-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: repeat(2, 1fr); }
  .stats-bar     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px; }
  .stats-bar .stat-item:nth-child(2)::after { display: none; }

  .about-grid    { grid-template-columns: 1fr; gap: 48px; }
  .about-img-badge { bottom: -20px; right: 0; }
  .contact-grid  { grid-template-columns: 1fr; }
  .messages-grid { grid-template-columns: 1fr; }
}

/* =============================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================= */
@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
  }

  .hero-stats { gap: 24px; }
  .hero-stat-divider { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }

  .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -30px 0 0;
    padding: 28px 20px;
  }

  .stats-bar .stat-item:nth-child(2)::after { display: none; }
  .stats-bar .stat-item:nth-child(even)::after { display: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .why-grid        { grid-template-columns: 1fr; }
  .facilities-grid { grid-template-columns: 1fr; }
  .gallery-grid    { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 2; }
  .steps-grid      { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }
  .docs-list       { grid-template-columns: 1fr; }
  .downloads-grid  { grid-template-columns: 1fr; }
  .form-row        { grid-template-columns: 1fr; }
  .messages-grid   { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom   { flex-direction: column; text-align: center; }

  .facilities-full-grid { grid-template-columns: repeat(2, 1fr); }

  .section-header  { margin-bottom: 40px; }

  .cta-actions { flex-direction: column; align-items: center; }
  .btn-lg { width: 100%; }

  .contact-form { padding: 28px 20px; }
  .message-card { padding: 28px 22px; }

  /* Phones: the full school name wraps onto two or three lines, and the bar
     scrolls away with the page instead of staying fixed over it (decided
     2026-09-26). It grows to fit the name; the drawer opens under it
     (js/main.js puts it there). */
  .navbar { position: absolute; height: auto; min-height: var(--nav-h); padding-top: 8px; padding-bottom: 8px; }
  .navbar-inner { height: auto; min-height: calc(var(--nav-h) - 16px); gap: 12px; }
  .nav-logo { flex-shrink: 1; min-width: 0; }
  .nav-logo-text .school-name { font-size: 0.82rem; line-height: 1.2; text-wrap: balance; }
  .nav-logo-icon { width: 46px; height: 46px; }
  .hamburger { flex-shrink: 0; }

  .page-hero { padding: 120px 16px 60px; }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================= */
@media (max-width: 480px) {
  .gallery-grid    { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
  .facilities-full-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 12px; }
  .stat-item::after { display: none !important; }
  .hero-badge { font-size: 0.7rem; }
}

/* =============================================
   UTILITY — MISC
   ============================================= */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.badge-gold { background: var(--gold-glow); color: var(--gold-dark); }
.badge-navy { background: rgba(11,26,59,0.1); color: var(--navy); }
.badge-success { background: rgba(34,197,94,0.12); color: #16A34A; }

.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: 12px !important; }
.mb { margin-bottom: 24px !important; }
.mb-lg { margin-bottom: 40px !important; }
.mt-lg { margin-top: 40px !important; }
.mt-xl { margin-top: 60px !important; }

.w-full { width: 100%; }

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================
   GALLERY — FULL PAGE
   ============================================= */
.gallery-section-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  padding: 0 0 12px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  margin-bottom: 28px;
}

.gallery-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-item-lg {
  grid-column: span 2;
}

.video-placeholder {
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.video-placeholder-inner {
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.5);
}

.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--navy);
  box-shadow: var(--shadow-gold);
  transition: var(--transition);
  cursor: pointer;
}

.play-btn:hover { transform: scale(1.1); }

.video-placeholder-inner p {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}

.video-placeholder-inner span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
}

/* =============================================
   QUICK ACTION CARDS (Contact page)
   ============================================= */
.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.quick-action-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}

.quick-action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.quick-action-card:hover::before { transform: scaleX(1); }

.qa-icon { font-size: 2rem; }

.quick-action-card h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.quick-action-card p {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.qa-arrow {
  font-size: 1.1rem;
  color: var(--gold-dark);
  font-weight: 700;
  transition: var(--transition);
}

.quick-action-card:hover .qa-arrow { transform: translateX(4px); }

/* =============================================
   GALLERY RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .gallery-full-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item-lg { grid-column: span 1; }
}

@media (max-width: 480px) {
  .gallery-full-grid { grid-template-columns: 1fr; }
  .quick-action-card { padding: 22px 18px; }
}


/* =============================================================================
   ADDITIONS FOR ROYAL PUBLIC SENIOR SECONDARY SCHOOL
   -----------------------------------------------------------------------------
   Everything above this line is the ported design system, unchanged.
   Everything below is new: the placeholder system, and the components needed by
   the six pages this school has that the source site did not — Messages,
   Faculty, Video gallery, Notice board, Events & calendar, and Downloads.
   ========================================================================== */


/* =============================================
   PLACEHOLDER SYSTEM
   ---------------------------------------------
   The school has not opened. Almost nothing on this site is a real fact yet.
   Anything wrapped in .ph is content we are waiting on, and it is marked
   visibly so it cannot reach the public by accident.

   To preview the site as the school will see it, add class="ph-off" to <body>,
   or press the toggle in the corner. Marks are ON by default on purpose.
   ============================================= */
.ph {
  background: rgba(245, 166, 35, 0.16);
  border-bottom: 2px dotted var(--gold-dark);
  border-radius: 3px;
  padding: 0 3px;
  color: inherit;
}
.section-dark .ph,
.hero .ph,
.page-hero .ph,
.cta-banner .ph,
.footer .ph {
  background: rgba(245, 166, 35, 0.26);
  border-bottom-color: var(--gold-light);
}
body.ph-off .ph {
  background: none;
  border-bottom: none;
  padding: 0;
}

/* The floating toggle, injected by js/placeholders.js */
.ph-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}
.ph-toggle:hover { background: var(--navy-mid); transform: translateY(-2px); }
.ph-toggle .ph-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
}

/* A block standing in for a photograph we do not have yet. */
.img-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg,
      rgba(11, 26, 59, 0.035) 0px,
      rgba(11, 26, 59, 0.035) 10px,
      transparent 10px,
      transparent 20px),
    var(--light-gray);
  border: 2px dashed var(--mid-gray);
  color: var(--text-muted);
}
.img-ph .icon { font-size: 2rem; opacity: 0.55; }
.img-ph .what {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.img-ph .hint { font-size: 0.78rem; color: var(--text-light); max-width: 30ch; }
.img-ph.tall  { min-height: 380px; }
.img-ph.short { min-height: 150px; }
.img-ph.square { aspect-ratio: 1 / 1; min-height: 0; }
.img-ph.wide  { aspect-ratio: 16 / 9; min-height: 0; }
body.ph-off .img-ph { border-style: solid; border-color: var(--light-gray); }


/* =============================================
   LEADERSHIP MESSAGES — full page variant
   ============================================= */
.msg-full-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.msg-full {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light-gray);
  transition: var(--transition);
}
.msg-full:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.msg-full-photo { border-radius: var(--radius); overflow: hidden; }
.msg-full-photo img { width: 100%; display: block; border-radius: var(--radius); }
.msg-full-body .role {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--gold-glow);
  color: var(--gold-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.msg-full-body h3 { margin-bottom: 4px; font-size: 1.4rem; }
.msg-full-body .designation {
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.msg-full-body p { margin-bottom: 14px; }
.msg-full-body .signoff {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--light-gray);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
}


/* =============================================
   FACULTY
   ============================================= */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.faculty-card {
  padding: 22px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.faculty-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.faculty-photo {
  width: 108px;
  height: 108px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--light-gray);
  background: var(--light-gray);
}
.faculty-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faculty-photo .img-ph { min-height: 0; height: 100%; border: none; border-radius: 50%; padding: 6px; }
.faculty-photo .img-ph .icon { font-size: 1.5rem; }
.faculty-name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--navy); }
.faculty-role { margin-top: 3px; font-size: 0.82rem; color: var(--gold-dark); font-weight: 600; }
.faculty-sub  { margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); }

/* The "we are hiring" card that stands where staff are not appointed yet. */
.faculty-card.vacancy {
  border-style: dashed;
  border-color: var(--mid-gray);
  background: var(--off-white);
}
.faculty-card.vacancy .faculty-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: var(--mid-gray);
  font-size: 1.8rem;
  color: var(--text-light);
}


/* =============================================
   NOTICE BOARD
   ============================================= */
.notice-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.notice-filter {
  padding: 8px 18px;
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.notice-filter:hover { border-color: var(--navy); color: var(--navy); }
.notice-filter.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.notice-list { display: flex; flex-direction: column; gap: 16px; }
.notice-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: start;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-left: 4px solid var(--gold);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.notice-row:hover { box-shadow: var(--shadow-md); transform: translateX(3px); }
.notice-row.pinned { border-left-color: var(--navy); background: var(--off-white); }

.notice-date {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--light-gray);
}
.notice-date .d { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1; }
.notice-date .m { display: block; margin-top: 3px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.notice-date .y { display: block; font-size: 0.68rem; color: var(--text-light); }

.notice-body h3 { margin-bottom: 6px; font-size: 1.08rem; }
.notice-body p  { margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.notice-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.notice-tag {
  padding: 3px 11px;
  border-radius: var(--radius-full);
  background: var(--light-gray);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notice-tag.exam      { background: rgba(239, 68, 68, 0.12);  color: #B91C1C; }
.notice-tag.admission { background: rgba(34, 197, 94, 0.14);  color: #15803D; }
.notice-tag.holiday   { background: rgba(245, 166, 35, 0.18); color: var(--gold-dark); }
.notice-tag.event     { background: rgba(30, 58, 107, 0.10);  color: var(--navy-mid); }
.notice-pin { font-size: 0.9rem; color: var(--navy); white-space: nowrap; }


/* =============================================
   EVENTS & ACADEMIC CALENDAR
   ============================================= */
.cal-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }

.cal-card {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-sm);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-head h3 { margin: 0; font-size: 1.2rem; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 34px; height: 34px;
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}
.cal-nav button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow {
  padding: 8px 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}
.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  background: var(--off-white);
}
.cal-day.muted   { color: var(--text-light); background: transparent; }
.cal-day.today   { background: var(--navy); color: var(--white); }
.cal-day.holiday { background: rgba(239, 68, 68, 0.12); color: #B91C1C; }
.cal-day.event   { background: var(--gold-glow); color: var(--gold-dark); }
.cal-day.has-dot::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 0.76rem; color: var(--text-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.event-list { display: flex; flex-direction: column; gap: 14px; }
.event-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--light-gray);
  transition: var(--transition);
}
.event-row:hover { box-shadow: var(--shadow-sm); }
.event-when {
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: var(--gradient-gold);
  color: var(--navy);
}
.event-when .d { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; line-height: 1; }
.event-when .m { display: block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.event-what h4 { margin: 0 0 3px; font-size: 0.98rem; }
.event-what p  { margin: 0; font-size: 0.82rem; color: var(--text-muted); }


/* =============================================
   DOWNLOADS
   ============================================= */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dl-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.dl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--gold); }
.dl-icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gold-glow);
  font-size: 1.4rem;
}
.dl-meta h4 { margin: 0 0 3px; font-size: 1rem; }
.dl-meta p  { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.dl-card.unavailable { opacity: 0.62; pointer-events: none; border-style: dashed; }
.dl-card.unavailable .dl-icon { background: var(--light-gray); }


/* =============================================
   VIDEO GALLERY
   ============================================= */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.video-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.video-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb .img-ph { height: 100%; min-height: 0; border: none; border-radius: 0; }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 26, 59, 0.34);
  color: var(--white);
  font-size: 2.4rem;
  transition: var(--transition);
}
.video-card:hover .video-play { background: rgba(11, 26, 59, 0.5); }
.video-body { padding: 18px 20px; }
.video-body h4 { margin: 0 0 4px; font-size: 1rem; }
.video-body p  { margin: 0; font-size: 0.8rem; color: var(--text-muted); }


/* =============================================
   SMALL SHARED BITS
   ============================================= */
.empty-state {
  padding: 56px 28px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--off-white);
  border: 2px dashed var(--mid-gray);
}
.empty-state .icon { font-size: 2.6rem; opacity: 0.5; }
.empty-state h3 { margin: 14px 0 8px; }
.empty-state p  { margin: 0 auto; max-width: 48ch; color: var(--text-muted); font-size: 0.92rem; }

.note-strip {
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--gold-glow);
  border-left: 4px solid var(--gold);
  font-size: 0.9rem;
}
.note-strip .icon { font-size: 1.1rem; }


/* =============================================
   RESPONSIVE — the new components
   ============================================= */
@media (max-width: 1024px) {
  .faculty-grid { grid-template-columns: repeat(3, 1fr); }
  .dl-grid      { grid-template-columns: repeat(2, 1fr); }
  .video-grid   { grid-template-columns: repeat(2, 1fr); }
  .cal-layout   { grid-template-columns: 1fr; gap: 32px; }
  .msg-full     { grid-template-columns: 200px 1fr; gap: 24px; }
}

@media (max-width: 768px) {
  .faculty-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .dl-grid      { grid-template-columns: 1fr; }
  .video-grid   { grid-template-columns: 1fr; }

  .msg-full        { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .msg-full-photo  { max-width: 200px; }

  .notice-row     { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px; }
  .notice-pin     { grid-column: 1 / -1; }
  .notice-date .d { font-size: 1.2rem; }

  .cal-card { padding: 18px; }
  .cal-day  { font-size: 0.76rem; }

  .ph-toggle { right: 12px; bottom: 12px; padding: 8px 13px; font-size: 0.74rem; }
}

@media (max-width: 480px) {
  .faculty-grid { grid-template-columns: 1fr; }
}


/* =============================================
   NAV DROPDOWNS
   ---------------------------------------------
   This school has twelve pages where the source design had seven, so three of
   the top-level items open a short submenu. Hover on desktop, and on touch the
   whole navbar collapses to the mobile drawer below 1024px, where every page is
   listed flat and nothing is hidden behind a hover.
   ============================================= */
.nav-item { position: relative; display: inline-flex; align-items: center; }

.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-item > a .caret {
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.75;
  transition: var(--transition);
}
.nav-item:hover > a .caret,
.nav-item:focus-within > a .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 232px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(11, 26, 59, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Keeps the pointer from falling through the gap under the navbar. */
.nav-drop::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}

.nav-drop a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}
.nav-drop a:hover,
.nav-drop a:focus-visible { background: rgba(245, 166, 35, 0.16); color: var(--gold); }
.nav-drop a.active { color: var(--gold); font-weight: 700; }

/* The mobile drawer groups the same pages under small headings. */
.nav-mobile .nav-mobile-group {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Outline button for LIGHT backgrounds.
   .btn-outline is white-on-transparent and is meant for dark sections; used on
   a light panel it renders white text on near-white and disappears. This is its
   counterpart, for empty states and light call-to-action rows. */
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--mid-gray);
}
.btn-ghost:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

/* =============================================
   DRAFT TEXT
   ---------------------------------------------
   .draft = text Smart Digital has WRITTEN for the school (the About story,
   the three messages) that the school has not yet approved. Form J1: "please
   draft it and we will correct it". Blue, so it reads differently from the
   amber .ph (information still missing). Both must reach zero before launch;
   tools/check.js counts them.
   ============================================= */
.draft {
  background: rgba(59, 130, 246, 0.10);
  border-left: 3px solid rgba(59, 130, 246, 0.55);
  border-radius: 3px;
  padding: 2px 8px;
}
.section-dark .draft, .hero .draft, .page-hero .draft, .cta-banner .draft {
  background: rgba(96, 165, 250, 0.18);
}
body.ph-off .draft { background: none; border-left: none; padding: 0; }

/* =============================================
   DATA TABLES — fees, subjects, examinations, grades
   Built from shared/academics.json (tools/partials.js). Wrapped in
   .rp-scroll-x, so on a phone a wide table scrolls inside its own box.
   ============================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  font-size: 0.92rem;
}
.data-table th, .data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--light-gray);
  vertical-align: top;
}
.data-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.data-table thead th small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  opacity: 0.75;
}
.data-table tbody th { font-weight: 600; color: var(--navy); white-space: nowrap; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--off-white); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-note { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); }
/* A price the office has already set to change later in the session (js/live.js). */
.data-table td small { display: block; font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 480px) {
  .data-table th, .data-table td { padding: 10px 12px; }
  .data-table tbody th { white-space: normal; }
}

/* =============================================
   LIVE NOTICES AND CALENDAR (js/live.js)
   Posted by the office in the portal; read here with the public key.
   ============================================= */
.live-list { display: grid; gap: 16px; }
.live-empty {
  padding: 28px 24px;
  text-align: center;
  color: var(--text-muted);
  background: var(--off-white);
  border: 1px dashed var(--mid-gray);
  border-radius: var(--radius);
}
.live-notice {
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-left: 4px solid var(--navy-mid);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.live-notice.pinned { border-left-color: var(--gold); }
.live-notice h3 { font-size: var(--rp-h4); margin: 8px 0 6px; }
.live-notice p { font-size: 0.95rem; margin: 0; }
.live-notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.live-tag, .live-pin {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--light-gray);
  color: var(--navy);
}
.live-pin { background: var(--gold-glow); color: var(--rp-gold-dark); }
.tag-urgent { background: #FDECEC; color: #B42318; }
.tag-exam, .tag-result { background: #EAF1FE; color: #1D4ED8; }
.tag-admission { background: #E7F6EC; color: #15803D; }
.tag-holiday { background: #FDF3E3; color: #B45309; }
.live-notice-meta time { margin-left: auto; }

.live-event {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm);
}
.live-event time { font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.live-event h4 { margin: 0 0 4px; font-size: 1rem; }
.live-event p { margin: 0; font-size: 0.88rem; }
.live-event.type-holiday { border-left: 4px solid var(--gold); }
.live-event.type-exam { border-left: 4px solid #1D4ED8; }
.live-event.type-event { border-left: 4px solid var(--navy-mid); }
.live-event.type-sports { border-left: 4px solid #15803D; }
.live-event.type-cultural { border-left: 4px solid #BE123C; }
.live-event.type-meeting { border-left: 4px solid #475569; }
.live-event.type-other { border-left: 4px solid var(--mid-gray); }
@media (max-width: 480px) {
  .live-event { grid-template-columns: 1fr; gap: 4px; }
  .live-notice-meta time { margin-left: 0; width: 100%; }
}

/* The month grid (js/live.js calendarGrid): the portal's calendar, public.
   Each kind of day has one colour, used for its label, its dot and the key. */
.mcal {
  --k-holiday: #B45309; --k-exam: #1D4ED8; --k-sports: #15803D; --k-cultural: #BE123C;
  --k-meeting: #475569; --k-event: var(--navy-mid); --k-other: #8A9BBC;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(14px, 2.5vw, 24px);
  margin-bottom: 40px;
}
.mcal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mcal-month { flex: 1; margin: 0; text-align: center; font-size: var(--rp-h4); color: var(--navy); }
.mcal-nav, .mcal-today {
  min-width: 44px; min-height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--mid-gray); background: var(--white); color: var(--navy);
  font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s;
}
.mcal-nav { font-size: 1.5rem; line-height: 1; }
.mcal-today { padding: 0 16px; font-size: 0.85rem; }
.mcal-nav:hover, .mcal-today:hover { background: var(--off-white); border-color: var(--navy-mid); }
.mcal-nav:focus-visible, .mcal-today:focus-visible, .mcal-d:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.mcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mcal-h { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; }
.mcal-d {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-height: 96px; min-width: 0; padding: 6px; text-align: left;
  background: var(--white); border: 1px solid var(--light-gray); border-radius: 10px;
  font: inherit; color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.mcal-d:hover { border-color: var(--navy-mid); box-shadow: var(--shadow-xs); }
.mcal-d.blank { background: transparent; border: 0; cursor: default; box-shadow: none; }
.mcal-d.sun { background: #F3F5FA; }
.mcal-d.hol { background: #FDF3E3; border-color: #F4D9A8; }
.mcal-d.today { border: 2px solid var(--gold); }
.mcal-d.picked { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.mcal-n { font-weight: 700; font-size: 0.9rem; color: var(--navy); }
.mcal-d.sun .mcal-n, .mcal-d.hol .mcal-n { color: #B45309; }
.mcal-d.today .mcal-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); }
.mcal-ev {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 2px 6px; border-radius: 5px; font-size: 0.72rem; font-weight: 600; line-height: 1.35; color: #fff;
}
.mcal-dots { display: none; gap: 3px; justify-content: center; margin-top: auto; }
.mcal-dots i, .mcal-key i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.k-holiday { background: var(--k-holiday); } .k-exam { background: var(--k-exam); } .k-sports { background: var(--k-sports); }
.k-cultural { background: var(--k-cultural); } .k-meeting { background: var(--k-meeting); } .k-event { background: var(--k-event); }
.k-other { background: var(--k-other); }

.mcal-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 0.82rem; color: var(--text-muted); }
.mcal-key span { display: inline-flex; align-items: center; gap: 6px; }
.mcal-key i { width: 10px; height: 10px; }
.mcal-key-note { flex-basis: 100%; }
.mcal-day { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--light-gray); display: grid; gap: 10px; }
.mcal-day > h4 { margin: 0; color: var(--navy); }
.mcal-day small { font-weight: 500; color: var(--text-muted); }
.mcal-none { margin: 0; color: var(--text-muted); }
.mcal-sub { margin: 0 0 16px; color: var(--navy); font-size: var(--rp-h4); }

/* Tablet and phone: each day a square with its number and a dot per event;
   the names are under the grid, for the day tapped. */
@media (max-width: 768px) {
  .mcal-grid { gap: 4px; }
  .mcal-d { min-height: 0; aspect-ratio: 1; align-items: center; justify-content: flex-start; padding: 4px 2px; border-radius: 8px; }
  .mcal-ev { display: none; }
  .mcal-dots { display: flex; flex-wrap: wrap; }
  .mcal-n { font-size: 0.85rem; }
  .mcal-d.today .mcal-n { width: 22px; height: 22px; }
  .mcal-h { font-size: 0.68rem; letter-spacing: 0; }
}
@media (max-width: 480px) {
  .mcal-bar { flex-wrap: wrap; }
  .mcal-month { order: -1; flex-basis: 100%; margin-bottom: 4px; }
  .mcal-today { margin-left: auto; }
  .mcal-grid { gap: 3px; }
  .mcal-dots i { width: 5px; height: 5px; }
}

/* WhatsApp enquiry forms (js/enquiry.js) */
.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #E7F6EC;
  color: #14532D;
  font-size: 0.88rem;
}
.form-hint { margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); text-align: center; }

/* A short list of rules or points, each with a gold marker. */
.check-list { list-style: none; margin: 14px 0 18px; display: grid; gap: 10px; }
.check-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  line-height: 1.6;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.check-list strong { color: var(--navy); }

/* Grid columns may shrink below their content. Without this a wide table or
   the school's 41-character email address sets the column's minimum width
   and pushes the page past a 320px phone (tools/responsive.js caught both). */
.about-grid > *, .contact-grid > *, .why-grid > *, .facilities-grid > *,
.messages-grid > *, .msg-full-grid > *, .faculty-grid > *, .dl-grid > *,
.footer-grid > *, .cal-layout > *, .docs-list > * { min-width: 0; }
.form-hint, .ci-value { overflow-wrap: anywhere; }

/* =============================================
   SCHOOL SHOP (shop.html, filled by js/live.js from the portal, 0030)
   ============================================= */
.shop-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.shop-chip {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rp-line, #dfe4ee); background: var(--white);
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--navy); cursor: pointer; min-height: 40px;
}
.shop-chip.on { background: var(--navy); color: var(--white); border-color: var(--navy); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 22px; }
.shop-card {
  display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition);
}
.shop-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.shop-card.is-out { opacity: .7; }
.shop-pic { aspect-ratio: 4 / 3; background: #F1F4F9; display: flex; align-items: center; justify-content: center; }
.shop-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-pic span { font-size: 0.85rem; color: #8A97AE; }
.shop-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shop-cat { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); }
.shop-body h3 { font-size: 1.05rem; color: var(--navy); margin: 0; }
.shop-body p { font-size: 0.9rem; color: #5A6A8A; margin: 0; line-height: 1.5; }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.shop-price { font-family: var(--font-head); font-size: 1.25rem; color: var(--navy); }
.shop-left { font-size: 0.8rem; font-weight: 600; color: #1B6B3A; background: #E7F5EC; padding: 4px 10px; border-radius: 999px; }
.shop-left.low { color: #8A5A00; background: #FFF3D6; }
.shop-left.out { color: #B42318; background: #FDECEC; }
.shop-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.shop-empty b { display: block; color: var(--navy); margin-bottom: 4px; }
.shop-empty span { color: #5A6A8A; }


/* =============================================
   APPLY ONLINE (apply.html, js/admission.js) — 2026-09-26
   The form a family fills; after sending, the printed form (css/admission-
   sheet.css) shown scaled to the screen, and printed alone.
   ============================================= */
.adm-wrap { max-width: 980px; }
/* The page shows and hides its parts with [hidden]; a display rule below must never undo that. */
.adm-wrap [hidden] { display: none !important; }
.adm-fs .form-hint { text-align: left; margin: 0 0 14px; }
.adm-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; counter-reset: none; }
.adm-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm);
  background: var(--off-white); border: 1px solid var(--light-gray); font-size: 0.88rem; line-height: 1.45; color: var(--text); }
.adm-steps li b { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); }
.req { color: #B42318; font-style: normal; }
.adm-note { padding: 16px 20px; border-radius: var(--radius-sm); background: var(--off-white); border-left: 4px solid var(--navy);
  margin-bottom: 24px; line-height: 1.55; }
.adm-note:empty { display: none; }
.adm-note.warn { background: var(--gold-glow); border-left-color: var(--gold); }
.adm-note b { display: block; font-family: var(--font-head); margin-bottom: 2px; }

.adm-form { display: flex; flex-direction: column; gap: 22px; }
.adm-fs { border: 1px solid var(--light-gray); border-radius: var(--radius); padding: 22px 24px 6px; background: var(--white);
  box-shadow: var(--shadow-xs); min-width: 0; }
.adm-fs legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-family: var(--font-head); font-weight: 700;
  font-size: 1.1rem; color: var(--navy); }
.adm-fs legend b { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.adm-sub { font-size: 0.98rem; color: var(--navy); margin: 4px 0 12px; }
.adm-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-form .form-row > * { min-width: 0; }
.adm-form .form-group input.bad, .adm-form .form-group select.bad { border-color: var(--error); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
.adm-with-photo { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: start; }
.adm-photo-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; }
.adm-photo { width: 120px; height: 144px; border: 2px dashed var(--mid-gray); border-radius: var(--radius-xs); overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.8rem; color: var(--text-muted); background: var(--off-white); }
.adm-photo img { width: 100%; height: 100%; object-fit: cover; }
.adm-btn2 { background: var(--white); color: var(--navy); border: 2px solid var(--navy); }
.adm-btn2:hover { background: var(--navy); color: var(--white); }
.adm-photo-btn { padding: 9px 18px; font-size: 0.85rem; }
.adm-link { background: none; color: var(--error); font-size: 0.85rem; text-decoration: underline; padding: 6px; min-height: 36px; }
.adm-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 0.93rem; line-height: 1.5; cursor: pointer; }
.adm-check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--navy); }
.adm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.adm-error { padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(239, 68, 68, 0.08); border-left: 4px solid var(--error);
  color: #9B1C1C; font-weight: 500; }
.adm-send { align-self: flex-start; min-width: 240px; }
.adm-send[disabled] { opacity: .6; cursor: wait; }

.adm-done { scroll-margin-top: 24px; }
.adm-done-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
  padding: 24px; border-radius: var(--radius); background: var(--off-white); border: 1px solid var(--light-gray); margin-bottom: 20px; }
.adm-done-head > div:first-child { flex: 1 1 380px; min-width: 0; }
.adm-done-head h2 { font-size: 1.5rem; margin: 6px 0 8px; }
.adm-no { color: var(--gold-dark); white-space: nowrap; }
.adm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; background: #D9DEE8;
  border-radius: var(--radius); overflow: hidden; }
.adm-preview .as-page { box-shadow: var(--shadow-md); }

.adm-again { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--light-gray); }
.adm-again h2 { font-size: 1.4rem; margin-bottom: 4px; }
.adm-again > p { color: var(--text-muted); margin-bottom: 16px; }
.adm-find { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.adm-find .btn { margin-bottom: 20px; }
#adm-found .adm-actions { margin-bottom: 16px; }

/* Printing: only the form, full size, nothing of the website around it. */
#adm-print { display: none; }
@media print {
  body.adm-printing > *:not(#adm-print) { display: none !important; }
  body.adm-printing #adm-print { display: block; }
  body.adm-printing { background: #fff; }
}

@media (max-width: 900px) {
  .adm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-find { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .adm-row3 { grid-template-columns: 1fr; }
  .adm-fs { padding: 18px 16px 4px; }
  .adm-send { align-self: stretch; }
}
@media (max-width: 560px) {
  .adm-steps { grid-template-columns: 1fr; }
  .adm-with-photo { grid-template-columns: 1fr; }
  .adm-photo-pick { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .adm-find { grid-template-columns: 1fr; }
  .adm-preview { padding: 8px; }
}