/* ==========================================================================
   Newton Private School — Harrow-Inspired Prestige Landing Page Styles
   Palette: Royal Navy (#07152b, #0d2040), Imperial Gold (#d4af37, #c59b27, #996515),
   Parchment Cream (#fbf9f5, #f5efe6), Alabaster White (#ffffff), Slate (#334155)
   Typography: Cinzel, Cormorant Garamond, Outfit, Amiri, Cairo
   ========================================================================== */

:root {
  --navy-950: #050d1a;
  --navy-900: #0a192f;
  --navy-850: #0e2240;
  --navy-800: #132a4f;
  --navy-700: #1e3a68;
  --navy-600: #2a4d85;

  --gold-600: #996515;
  --gold-500: #b8860b;
  --gold-400: #c59b27;
  --gold-300: #d4af37;
  --gold-200: #e6ca65;
  --gold-100: #f7edc4;
  --gold-glow: rgba(212, 175, 55, 0.25);

  --cream-50: #ffffff;
  --cream-100: #fcfbfa;
  --cream-200: #f7f4ee;
  --cream-300: #ede7dc;
  --cream-400: #e0d7c7;

  --text-dark: #0f172a;
  --text-muted: #475569;
  --text-light: #94a3b8;
  --text-on-dark: #f8fafc;

  --font-serif: 'Cinzel', 'Playfair Display', 'Cormorant Garamond', 'Amiri', Georgia, serif;
  --font-editorial: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  --font-sans: 'Outfit', 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: 'Cairo', 'Amiri', Tahoma, sans-serif;

  --shadow-sm: 0 2px 8px rgba(5, 13, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(5, 13, 26, 0.12);
  --shadow-lg: 0 16px 40px rgba(5, 13, 26, 0.18);
  --shadow-gold: 0 8px 25px rgba(212, 175, 55, 0.25);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--cream-100);
  color: var(--text-dark);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL Specific enhancements */
[dir="rtl"] {
  font-family: var(--font-arabic);
}
[dir="rtl"] .serif-heading {
  font-family: 'Amiri', var(--font-serif);
}

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

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

/* Utility Top Bar */
.top-utility-bar {
  background: var(--navy-950);
  color: var(--gold-100);
  font-size: 0.8125rem;
  padding: 0.5rem 2rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1001;
  position: relative;
}

.utility-contact {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.utility-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #cbd5e1;
  font-weight: 400;
}
.utility-contact a:hover {
  color: var(--gold-300);
}

.utility-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.utility-link {
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.utility-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.utility-link.highlight {
  color: var(--gold-300);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.1);
  font-weight: 500;
}
.utility-link.highlight:hover {
  background: rgba(212, 175, 55, 0.2);
  color: #ffffff;
}

.lang-switcher-group {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}

.lang-pill {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1;
}

.lang-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.lang-pill.active {
  background: var(--gold-400);
  color: var(--navy-950);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Grand Sticky Navigation */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(10, 25, 47, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  z-index: 1000;
  transition: all var(--transition-smooth);
}

.site-header.scrolled {
  background: rgba(5, 13, 26, 0.98);
  box-shadow: var(--shadow-lg);
  padding: 0.25rem 0;
}

.header-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0.85rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Brand Identity */
.brand-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.crest-logo {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform var(--transition-smooth);
}
.brand-identity:hover .crest-logo {
  transform: scale(1.05);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name-en {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}

.brand-name-ar {
  font-size: 0.85rem;
  color: var(--gold-300);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Navigation Menu */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-item {
  color: #f1f5f9;
  font-size: 0.925rem;
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-200));
  transition: width var(--transition-smooth);
}

[dir="rtl"] .nav-item::after {
  left: auto;
  right: 0;
}

.nav-item:hover {
  color: var(--gold-300);
}
.nav-item:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Premium Buttons */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  color: var(--navy-950);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-200);
  box-shadow: var(--shadow-gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-smooth);
  text-transform: uppercase;
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-200) 50%, var(--gold-400) 100%);
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
  color: #000;
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold-300);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gold-300);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-smooth);
  text-transform: uppercase;
}

.btn-outline-gold:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.btn-navy {
  background: var(--navy-900);
  color: var(--gold-100);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-smooth);
}

.btn-navy:hover {
  background: var(--navy-800);
  border-color: var(--gold-300);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Mobile Menu Toggle */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold-300);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6rem 2rem 5rem;
  background-image: url("../images/real_school/12_school_hallway_lockers.3269c197c713.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

/* The film sits between the still background and the darkening overlay, so the
   gold type keeps the same contrast whether the video plays, fails, or is
   never fetched at all. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

/* Set once the first frame is actually decoded — fading in from the poster
   rather than flashing black while the file buffers. */
.hero-video.is-playing {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 25, 47, 0.65) 0%, rgba(5, 13, 26, 0.92) 85%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-crest-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(10, 25, 47, 0.8);
  border: 1px solid var(--gold-400);
  color: var(--gold-300);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: 1px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hero-title span.gold {
  color: var(--gold-300);
  font-style: italic;
  font-family: var(--font-editorial);
  font-weight: 400;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: #e2e8f0;
  max-width: 760px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Third hero action: quieter than the two gold buttons, because it is an
   invitation to look rather than a call to act. */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.75rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast);
}

.btn-play:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--gold-400);
  transform: translateY(-2px);
}

.btn-play:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
}

/* The gold disc keeps the play triangle readable against the moving film. */
.btn-play__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-400);
  color: var(--navy-900);
  flex-shrink: 0;
}

/* The RTL page would otherwise mirror the triangle into a rewind arrow. */
[dir="rtl"] .btn-play__icon svg {
  transform: scaleX(-1);
}

/* Phone numbers are Latin digits inside Arabic and Kurdish sentences. Without
   isolation the bidi algorithm reorders the dash-separated groups, so a reader
   sees 0006-246-0776 and dials the wrong number. */
.tel-num {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* Hero Stats Ticker */
.hero-ticker {
  position: relative;
  z-index: 2;
  margin-top: 4rem;
  width: 100%;
  max-width: 1100px;
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.ticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.ticker-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.75rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(212, 175, 55, 0.2);
}

[dir="rtl"] .ticker-item:not(:last-child)::after {
  right: auto;
  left: -0.75rem;
}

.ticker-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-300);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.ticker-label {
  font-size: 0.825rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Section Common Styles */
.section {
  padding: 6rem 2rem;
}

.section-dark {
  background-color: var(--navy-900);
  color: var(--text-on-dark);
}

.section-cream {
  background-color: var(--cream-200);
}

.section-white {
  background-color: #ffffff;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
}

.section-head {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 4rem;
}

.sub-tag {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.75rem;
}

.section-dark .sub-tag {
  color: var(--gold-300);
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy-900);
  margin-bottom: 1rem;
}

.section-dark .section-title {
  color: #ffffff;
}

.section-desc {
  font-size: 1.075rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.section-dark .section-desc {
  color: #94a3b8;
}

/* Headmaster Welcome / Editorial Layout */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.editorial-image-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.editorial-image-frame img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.editorial-image-frame:hover img {
  transform: scale(1.03);
}

.frame-gold-border {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold-300);
  pointer-events: none;
  z-index: 2;
  border-radius: 4px;
}

.quote-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(10, 25, 47, 0.9);
  border: 1px solid var(--gold-400);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--gold-200);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.1rem;
  z-index: 3;
  box-shadow: var(--shadow-md);
}

[dir="rtl"] .quote-badge {
  right: auto;
  left: 20px;
}

.editorial-body h3 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--navy-900);
  margin-bottom: 1.25rem;
  line-height: 1.35;
}

.editorial-body p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

.editorial-signature {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-top: 1px solid var(--cream-300);
  padding-top: 1.5rem;
}

.sig-title {
  font-weight: 700;
  color: var(--navy-900);
}
.sig-role {
  font-size: 0.85rem;
  color: var(--gold-600);
}

/* Four Pillars Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.pillar-card {
  background: var(--navy-850);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transform: scaleX(0);
  transition: transform var(--transition-smooth);
}

.pillar-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-400);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

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

.pillar-icon {
  width: 54px;
  height: 54px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--gold-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.pillar-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 0.85rem;
  font-weight: 700;
}

.pillar-desc {
  color: #cbd5e1;
  font-size: 0.925rem;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.pillar-link {
  color: var(--gold-300);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pillar-link:hover {
  color: #ffffff;
}

/* Campus Life Showcase with Tabs */
.tab-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.tab-btn {
  background: var(--cream-200);
  border: 1px solid var(--cream-300);
  color: var(--text-dark);
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-btn:hover {
  background: #ffffff;
  border-color: var(--gold-400);
  color: var(--gold-600);
}

.tab-btn.active {
  background: var(--navy-900);
  border-color: var(--gold-400);
  color: var(--gold-300);
  box-shadow: var(--shadow-sm);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.facility-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--cream-300);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

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

.facility-media {
  position: relative;
  height: 240px;
  overflow: hidden;
}

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

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

.facility-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(10, 25, 47, 0.85);
  color: var(--gold-300);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

[dir="rtl"] .facility-tag {
  left: auto;
  right: 15px;
}

.facility-content {
  padding: 1.5rem;
}

.facility-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy-900);
  margin-bottom: 0.5rem;
}

.facility-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Admissions Journey 4-Steps */
.journey-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  margin-top: 3rem;
}

.journey-step {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  border: 1px solid var(--cream-300);
  box-shadow: var(--shadow-sm);
  position: relative;
  text-align: center;
  transition: all var(--transition-smooth);
}

.journey-step:hover {
  transform: translateY(-6px);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--navy-900);
  color: var(--gold-300);
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 1.25rem;
}

.step-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy-900);
  margin-bottom: 0.65rem;
}

.step-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Admissions Banner CTA */
.admissions-banner {
  margin-top: 4rem;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-850) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.admissions-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at right top, rgba(212, 175, 55, 0.15), transparent 60%);
  pointer-events: none;
}

.admissions-banner-text h3 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: #ffffff;
  margin-bottom: 0.65rem;
}

.admissions-banner-text p {
  color: #cbd5e1;
  font-size: 1.05rem;
  max-width: 600px;
}

/* Testimonials / Voices of Excellence */
.testimonial-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 2.5rem;
  border: 1px solid var(--cream-300);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.testimonial-quote {
  font-family: var(--font-editorial);
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-dark);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-serif);
}

.author-name {
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.95rem;
}

.author-info {
  font-size: 0.825rem;
  color: var(--text-muted);
}

/* Grand Footer */
.site-footer {
  background: var(--navy-950);
  color: #cbd5e1;
  padding: 5rem 2rem 2rem;
  border-top: 3px solid var(--gold-400);
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3.5rem;
  margin-bottom: 4rem;
}

.footer-brand .brand-identity {
  margin-bottom: 1.5rem;
}

.footer-motto {
  font-family: var(--font-serif);
  color: var(--gold-300);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.footer-desc {
  font-size: 0.925rem;
  line-height: 1.7;
  color: #94a3b8;
  margin-bottom: 1.5rem;
}

.footer-title {
  font-family: var(--font-serif);
  color: #ffffff;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--gold-400);
}

[dir="rtl"] .footer-title::after {
  left: auto;
  right: 0;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: #94a3b8;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.footer-links a:hover {
  color: var(--gold-300);
  transform: translateX(4px);
}

[dir="rtl"] .footer-links a:hover {
  transform: translateX(-4px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #64748b;
}

/* Modal Popup for Admissions Inquiry / Tour Booking */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 26, 0.8);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.modal-backdrop.active {
  display: flex;
  opacity: 1;
}

.modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 620px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gold-300);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transform: translateY(20px);
  transition: transform var(--transition-smooth);
  position: relative;
}

.modal-backdrop.active .modal-card {
  transform: translateY(0);
}

.modal-head {
  background: var(--navy-900);
  color: #ffffff;
  padding: 1.75rem 2rem;
  border-bottom: 2px solid var(--gold-400);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-head h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--gold-300);
  margin-bottom: 0.25rem;
}

.modal-head p {
  font-size: 0.85rem;
  color: #cbd5e1;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem;
  transition: color var(--transition-fast);
}
.modal-close-btn:hover {
  color: var(--gold-300);
}

.modal-body {
  padding: 2rem;
  max-height: 75vh;
  overflow-y: auto;
}

/* --- Campus tour player --- */
.modal-card--video {
  max-width: 960px;
}

/* Black, not white: the film's own letterboxing should disappear into the card. */
.modal-body--video {
  padding: 0;
  background: #000000;
  line-height: 0;
}

.tour-video {
  display: block;
  width: 100%;
  max-height: 76vh;
  background: #000000;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy-900);
  margin-bottom: 0.4rem;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.925rem;
  color: var(--text-dark);
  background: #f8fafc;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold-400);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Healthcare & Wellbeing Section */
.healthcare-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.healthcare-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

.healthcare-feature-item {
  background: #ffffff;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.healthcare-feature-item:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}

.healthcare-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.healthcare-feature-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--navy-900);
  margin-bottom: 0.4rem;
}

.healthcare-feature-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Animations */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .editorial-grid, .healthcare-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .journey-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-ticker {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .top-utility-bar {
    display: none;
  }
  .main-nav, .nav-actions .btn-outline-gold {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
  .pillars-grid, .showcase-grid, .journey-timeline {
    grid-template-columns: 1fr;
  }
  .hero-ticker {
    grid-template-columns: 1fr 1fr;
    padding: 1.25rem 1rem;
    gap: 1rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .admissions-banner {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile navigation drawer -----------------------------------------------
   Only reachable below 768px (the hamburger button that opens it is display:none
   above that width already), so this needs no breakpoint of its own — it is
   off-canvas by default and slides in on `.active`. Anchored to the inline-end
   edge like the AI panel, so it opens from the same side the page reads toward. */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 26, 0.6);
  z-index: 1400;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-smooth);
}
.mobile-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 1450;
  width: min(320px, 85vw);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
}
html[dir="rtl"] .mobile-drawer { transform: translateX(-100%); }
.mobile-drawer.active { transform: translateX(0); }

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.mobile-drawer__close {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.mobile-drawer__close:hover { color: var(--gold-300); }

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.mobile-drawer__nav .nav-item {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 1rem;
}

.mobile-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.25rem;
  margin-top: auto;
}
.mobile-drawer__actions .btn-gold,
.mobile-drawer__actions .btn-outline-gold {
  width: 100%;
  justify-content: center;
}

.mobile-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}
.mobile-drawer__contact a { color: #cbd5e1; }
.mobile-drawer__contact a:hover { color: var(--gold-300); }

/* --- AI assistant ---------------------------------------------------------
   Anchored to the inline edge so it flips with the page: bottom-left in the
   Arabic/Kurdish RTL layout, bottom-right in English and Turkish. */
.ai-launcher {
  position: fixed;
  bottom: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.3rem;
  border: 1px solid var(--gold-400);
  border-radius: var(--radius-full);
  background: var(--navy-900);
  color: var(--gold-300);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(5, 13, 26, 0.45);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.ai-launcher:hover { transform: translateY(-2px); background: #0d2340; }
.ai-launcher:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

.ai-panel {
  position: fixed;
  bottom: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 1300;
  width: min(390px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 2rem));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid var(--gold-300);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.ai-panel[hidden] { display: none; }

.ai-panel__head {
  background: var(--navy-900);
  color: #fff;
  padding: 0.9rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.ai-panel__head h2 { font-family: var(--font-serif); font-size: 1.05rem; color: var(--gold-300); margin: 0; }
.ai-panel__head p { font-size: 0.75rem; color: #cbd5e1; margin: 0.15rem 0 0; }
.ai-close { background: none; border: none; color: #cbd5e1; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.ai-close:hover { color: var(--gold-300); }

.ai-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #f8fafc;
  min-height: 180px;
}
.ai-msg {
  max-width: 85%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg--bot  { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
.ai-msg--user { align-self: flex-end; background: var(--navy-900); color: #fff; }
.ai-msg--error { align-self: flex-start; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Three dots while the model thinks; the cloud model can take a few seconds. */
.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #94a3b8;
  animation: aiBlink 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ai-typing span { animation: none; opacity: .6 } }

.ai-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1rem .6rem; background: #f8fafc; }
.ai-chip {
  border: 1px solid var(--gold-300); background: #fff; color: var(--navy-900);
  border-radius: var(--radius-full); padding: .3rem .7rem;
  font-family: inherit; font-size: .78rem; cursor: pointer;
}
.ai-chip:hover { background: var(--gold-100, #fdf6e3); }

.ai-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #e2e8f0; }
.ai-input {
  flex: 1; border: 1px solid #cbd5e1; border-radius: var(--radius-full);
  padding: .6rem .95rem; font-family: inherit; font-size: .9rem;
}
.ai-input:focus { outline: 2px solid var(--gold-400); outline-offset: 1px; }
.ai-send {
  border: none; background: var(--navy-900); color: var(--gold-300);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-send:disabled { opacity: .5; cursor: not-allowed; }
/* The paper-plane points forward; in RTL "forward" is the other way. */
[dir="rtl"] .ai-send svg { transform: scaleX(-1); }

.ai-note { font-size: .7rem; color: #64748b; padding: 0 1rem .75rem; margin: 0; text-align: center; }

@media (max-width: 480px) {
  .ai-launcher span { display: none; }
  .ai-launcher { padding: .85rem; }
  .ai-panel { inset-inline: 1rem; width: auto; }
}

/* --- Kurdish-safe Arabic face ---------------------------------------------
   Cairo lacks ڕ ڵ ۆ ێ ە. When a font is missing a letter the browser fetches
   just that glyph from elsewhere, so a Kurdish word ends up rendered by two
   fonts at once and the letters stop joining. Noto covers the whole Arabic
   block, so anything Kurdish is drawn by one font from start to finish. */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/noto-sans-arabic-var.24794b313a2d.woff2") format("woff2-variations"),
       url("../fonts/noto-sans-arabic-var.24794b313a2d.woff2") format("woff2");
}

/* The whole page, when the visitor picked Kurdish. */
html[lang="ku"] body,
html[lang="ku"] .ai-panel,
html[lang="ku"] .hero-subtitle,
html[lang="ku"] .section p {
  font-family: "Noto Sans Arabic", var(--font-arabic);
}

/* Anything containing Kurdish, whatever language the page is in: a reply
   bubble, a swapped label, or the box the visitor is typing into. The
   assistant answers in the visitor's language, so Kurdish turns up on the
   Arabic site — including while it is still being typed. */
.ku-text,
.ku-text * {
  font-family: "Noto Sans Arabic", var(--font-arabic) !important;
}

/* The placeholder is swapped by the language switcher, so it needs the font
   whenever the site itself is Kurdish — the typed-text check cannot see it. */
html[lang="ku"] .ai-input,
html[lang="ku"] .ai-input::placeholder {
  font-family: "Noto Sans Arabic", var(--font-arabic);
}