/* =====================================================
   VEER PATTA — SITE DESIGN
   =====================================================

   Ported from the Claude Design project "School website
   redesign brief" (d7e45125), and applied at every viewport.

   The source design is a fixed 1360px canvas whose only media
   query is prefers-reduced-motion, so it does not describe its
   own small-screen behaviour. Two properties of it carry down
   honestly and do most of the work:

     - every grid is repeat(auto-fit, minmax(Npx, 1fr)), which
       reflows to fewer columns on its own
     - the container is width: min(1360px, 100%) with a
       clamp() gutter

   What the design could not supply, and is therefore authored
   here rather than copied:

     - spacing is clamp()ed, so a phone does not inherit
       desktop whitespace (84px section padding becomes 44px)
     - the section header stacks below 768px and takes the
       design's side-by-side arrangement above it
     - the two-row header with its nine-tab bar needs width, so
       below 1280px the existing hamburger navigation stands
     - the sticky call bar stays on small screens, where it is
       the primary contact route; the design's header carries
       those actions on desktop

   Load order matters: linked LAST, after style.css,
   animations.css and mobile-deep-optimize.css, so equal
   specificity resolves here. mobile-deep-optimize.css is
   entirely max-width and still wins below 768px where it is
   more specific, which is deliberate — it holds the tuning for
   slow connections.

   The token block below is the single source of the design's
   values. Contrast ratios are recorded against it because
   three of the design's colours fail WCAG AA as text.
   ===================================================== */


/* ---------------------------------------------------
   TOKENS
   Values taken from the design. The comments record
   measured WCAG contrast, because three of the design's
   colours cannot be used for text as drawn.
   --------------------------------------------------- */
:root {
  /* Ink — all safe for body text */
  --d-ink:          #0B1631;  /* 17.90:1 on white */
  --d-navy:         #17466B;  /*  9.88:1 on white */
  --d-slate:        #33455E;  /*  9.75:1 on white */
  --d-muted:        #5A6E88;  /*  5.22:1 on white, 4.89 on tint — smallest text-safe grey */

  /* Text-unsafe. Large display text, borders, fills and icons only. */
  --d-grey-lg:      #7089A6;  /*  3.61:1 — large text only (≥18.66px bold / ≥24px) */
  --d-grey-deco:    #93AAC2;  /*  2.39:1 — decoration only, never text */

  /* Brand blues */
  --d-blue:         #1E7BB8;  /*  4.58:1 on white — but only 4.30 on --d-surface,
                                  so links on tinted panels use --d-navy instead */
  --d-cyan:         #2BA9DE;  /*  2.68:1 — NEVER text, and never with white text on it.
                                  Accent bars, underlines, focus rings, icon fills. */
  --d-cyan-soft:    #7FD3F5;

  /* Surfaces and lines */
  --d-white:        #FFFFFF;
  --d-surface:      #F4F8FC;
  --d-surface-2:    #FBFDFF;
  --d-line:         #E1EBF5;
  --d-line-soft:    #EDF3F9;
  --d-line-2:       #DCEBF7;
  --d-line-3:       #C9DCEF;

  /* Type */
  --d-font-head: 'Bricolage Grotesque', 'Noto Sans Devanagari', 'Poppins', sans-serif;
  --d-font-body: 'Manrope', 'Noto Sans Devanagari', 'Poppins', sans-serif;

  /* Radii */
  --d-r-sm:  10px;
  --d-r-md:  12px;
  --d-r-lg:  16px;
  --d-r-xl:  18px;
  --d-r-pill: 999px;

  /* Elevation */
  --d-shadow-header: 0 1px 0 rgba(11,22,49,0.02), 0 10px 30px -22px rgba(11,22,49,0.28);
  --d-shadow-card:   0 22px 44px -26px rgba(23,70,107,0.4);
  --d-shadow-lift:   0 30px 70px -30px rgba(11,22,49,0.42);

  /* Layout */
  --d-container: 1360px;
  --d-gutter: clamp(16px, 3vw, 40px);

  /* Uppercase kicker tracking, straight from the design */
  --d-track-kicker: 0.16em;
  --d-track-head: -0.02em;
}

/* ---------------------------------------------------
   BASE TYPOGRAPHY
   --------------------------------------------------- */
body {
  font-family: var(--d-font-body);
  color: var(--d-slate);
  background: var(--d-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--d-font-head);
  letter-spacing: var(--d-track-head);
  color: var(--d-ink);
  text-wrap: pretty;
}

p { text-wrap: pretty; }

a { color: var(--d-blue); }
a:hover { color: var(--d-navy); }

/* Hindi needs more leading than the Latin faces. Mirrors the
   existing html[lang="hi"] treatment but for the new stack. */
html[lang="hi"] body,
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4 {
  font-family: 'Noto Sans Devanagari', var(--d-font-body);
  line-height: 1.75;
}

/* Visible focus, using the accent as a ring rather than as text. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--d-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------
   LAYOUT CONTAINER
   Was width: min(1100px, 92vw) with the header sitting in a
   1400px shell — the nav overhung every section beneath it.
   Both are aligned to the design's 1360px here.
   --------------------------------------------------- */
.container {
  width: min(var(--d-container), 100%);
  padding: 0 var(--d-gutter);
}
/* ---------------------------------------------------
   FOOTER
   The design has no footer of its own — it ends at the
   enquiry drawer — so this is derived from its tokens
   rather than copied.
   --------------------------------------------------- */
.site-footer {
  background: var(--d-ink);
  color: var(--d-line);
  border-top: none;
}

.site-footer .container {
  max-width: var(--d-container);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
}

.footer-heading {
  font-family: var(--d-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--d-track-kicker);
  text-transform: uppercase;
  /* On #0B1631 the soft cyan reads at well over 4.5:1 */
  color: var(--d-cyan-soft);
}

/* The footer band is dark now, so every inherited ink colour from
   style.css has to be lifted or it lands on near-black. Measured
   against #0B1631, the old values came out at 1.15:1 and 2.63:1.
   style.css uses .footer-column h3.footer-heading (0,2,1), so these
   selectors are deliberately specific enough to win. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer a,
.site-footer .footer-nav-links li a,
.site-footer .footer-nav-links a,
.site-footer .footer-contact,
.site-footer .footer-contact a,
.site-footer .footer-hours {
  color: var(--d-line);
  font-size: 14px;
}

.site-footer .footer-column h3.footer-heading {
  color: var(--d-cyan-soft);
}

.site-footer .footer-nav-links li a:hover,
.site-footer .footer-nav-links a:hover,
.site-footer .footer-contact a:hover,
.site-footer a:hover {
  color: var(--d-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--d-grey-deco);
  font-size: 13px;
}

/* style.css uses .footer-legal-links li a (0,2,0) */
.site-footer .footer-legal-links li a,
.site-footer .footer-legal-links a,
.site-footer .footer-copyright,
.site-footer .footer-trust,
.site-footer .footer-recognition {
  color: var(--d-grey-deco);
}

.site-footer .footer-legal-links li a:hover,
.site-footer .footer-legal-links a:hover { color: var(--d-white); }

/* The skip link is the one control keyboard-only users depend on, and
   it shipped at 4.19:1 on the old brand blue. */
.skip-link,
.skip-link:focus {
  background: var(--d-navy);
  color: var(--d-white);
}

/* ---------------------------------------------------
   SECTION RHYTHM
   The design paces the page at 84px vertical with
   alternating white / #F4F8FC bands. Existing pages wrap
   each section in .container, so the tint is painted with
   a full-bleed clip rather than extra markup.
   --------------------------------------------------- */
section.container {
  /* The design paces at 84px; scale it down rather than
     letting a phone inherit desktop whitespace. */
  padding-top: clamp(44px, 8vw, 84px);
  padding-bottom: clamp(44px, 8vw, 84px);
}

.stats-section,
.trust-badges-section,
.achievements-section,
.testimonials-section {
  position: relative;
  z-index: 0;
}

.stats-section::before,
.trust-badges-section::before,
.achievements-section::before,
.testimonials-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--d-surface);
  /* Full-bleed tint without leaving .container */
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax var(--d-surface);
  z-index: -1;
}

/* ---------------------------------------------------
   SECTION HEADER
   Design: kicker + title on the left (max 620px), a
   supporting paragraph on the right (max 380px), baselines
   aligned. Existing markup is a centred stack, so this
   converts it to the two-column arrangement.
   --------------------------------------------------- */
.section-header-modern {
  /* Stacked by default; the design's side-by-side arrangement
     needs room and is restored at 768px. */
  display: grid;
  gap: 14px;
  text-align: left;
  margin-bottom: clamp(26px, 4vw, 42px);
}

.section-heading-main {
  font-family: var(--d-font-head);
  font-size: clamp(27px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--d-ink);
  max-width: 620px;
  margin: 0;
}

/* The existing .heading-accent span becomes the design's
   uppercase kicker sitting above the title. */
.heading-accent {
  display: block;
  font-family: var(--d-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--d-track-kicker);
  text-transform: uppercase;
  color: var(--d-blue);
  margin-bottom: 14px;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.section-subtitle {
  font-size: 15px;
  line-height: 1.65;
  color: var(--d-muted);
  max-width: 380px;
  margin: 0;
  text-align: left;
}

/* The design uses whitespace, not a rule, between header and grid. */
.section-divider { display: none; }

/* ---------------------------------------------------
   CARD SURFACE
   One shared treatment, since every card class in the
   codebase maps to the same design object.
   --------------------------------------------------- */
.stat-card-modern,
.program-card-modern,
.about-teaser-card,
.why-parents-card,
.achievements-card,
.trust-badge,
.card,
.news-item {
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .28s ease,
              transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card-modern:hover,
.program-card-modern:hover,
.about-teaser-card:hover,
.card:hover,
.news-item:hover {
  border-color: var(--d-cyan);
  box-shadow: var(--d-shadow-card);
  transform: translateY(-3px);
}

/* ---------------------------------------------------
   GRIDS - the design's fluid auto-fit tracks
   --------------------------------------------------- */
.stats-grid,
.stats-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.programs-grid,
.programs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.trust-badges-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  overflow: visible;
}

/* ---------------------------------------------------
   STAT CARDS
   --------------------------------------------------- */
.stat-card-modern {
  padding: clamp(20px, 3.5vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  min-height: 168px;
  justify-content: center;
}

.stat-icon-emoji {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #EDF6FC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}

.stat-number {
  font-family: var(--d-font-head);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--d-track-head);
  color: var(--d-navy);
  /* the old design clipped a gradient through this text */
  background: none;
  -webkit-text-fill-color: currentColor;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* the design's 3.61:1 grey would fail at this size */
  color: var(--d-muted);
}

/* ---------------------------------------------------
   PROGRAM CARDS
   --------------------------------------------------- */
.program-card-modern {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.program-image-wrapper,
.program-image-placeholder {
  border-radius: 0;
  background: var(--d-surface);
  border-bottom: 1px solid var(--d-line);
}

.program-content {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.program-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--d-ink);
  margin: 0;
}

.program-badge-emoji {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #EDF6FC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.program-learn-more {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-blue);
}

/* ---------------------------------------------------
   TRUST BADGES
   --------------------------------------------------- */
.trust-badge {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border-radius: var(--d-r-md);
  background: var(--d-surface-2);
  min-width: 0;
}

.badge-icon,
.trust-badge-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.badge-text,
.trust-badge-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-navy);
  line-height: 1.35;
}

/* ---------------------------------------------------
   LIST CARDS - why-parents, achievements
   --------------------------------------------------- */
.why-parents-card,
.achievements-card {
  padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 36px);
}

.why-parents-list,
.achievements-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 4px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-parents-list li,
.achievements-list li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--d-slate);
  padding: 12px 0;
  border-bottom: 1px solid var(--d-line-soft);
}

.achievement-emoji {
  font-size: 18px;
  margin-right: 10px;
}

/* ---------------------------------------------------
   TEASER CARDS
   Four near-identical blocks on the homepage. The design
   treats these as a quick-answer grid, so their vertical
   rhythm is tightened to read as one band.
   --------------------------------------------------- */
section.container.about-teaser,
section.container.academics-teaser,
section.container.gallery-teaser,
section.container.contact-teaser {
  padding-top: 0;
  padding-bottom: 18px;
}

.about-teaser-card {
  padding: clamp(20px, 3.5vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-teaser-card h2,
.about-teaser-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--d-ink);
  margin: 0;
}

.about-teaser-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--d-muted);
}

/* ---------------------------------------------------
   BUTTONS
   --------------------------------------------------- */
.btn,
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--d-blue), var(--d-navy));
  color: var(--d-white);
  font-family: var(--d-font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: 11px;
  border: none;
  box-shadow: 0 12px 26px -12px rgba(30, 123, 184, 0.7);
}

.btn:hover,
.btn-hero-primary:hover {
  color: var(--d-white);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(30, 123, 184, 0.9);
}

.btn.btn-secondary,
.btn-secondary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-line-2);
  color: var(--d-navy);
  font-size: 15px;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: 11px;
  box-shadow: none;
}

.btn.btn-secondary:hover,
.btn-secondary:hover,
.btn-hero-secondary:hover {
  border-color: var(--d-cyan);
  background: #EDF6FC;
  color: var(--d-navy);
}

.pill {
  border: 1px solid var(--d-line-2);
  background: var(--d-surface-2);
  color: var(--d-navy);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--d-r-pill);
  padding: 10px 18px;
}

.pill.active,
.pill[aria-selected="true"] {
  background: var(--d-navy);
  border-color: var(--d-navy);
  color: var(--d-white);
}

/* ---------------------------------------------------
   HERO
   --------------------------------------------------- */
.hero {
  background: linear-gradient(160deg, var(--d-surface) 0%, var(--d-white) 62%);
  border: 1px solid var(--d-line);
  border-radius: 24px;
  max-width: var(--d-container);
  margin: clamp(14px, 3vw, 32px) auto 0;
  padding: clamp(38px, 7vw, 72px) clamp(20px, 4vw, 64px);
  text-align: left;
}

.hero h1 {
  font-family: var(--d-font-head);
  font-size: clamp(29px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: var(--d-track-head);
  color: var(--d-ink);
}

.hero-description {
  font-size: 17px;
  line-height: 1.7;
  color: var(--d-muted);
  max-width: 620px;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.trust-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--d-navy);
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-pill);
  padding: 9px 15px;
}

.hero-floating-badge {
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  box-shadow: var(--d-shadow-card);
  color: var(--d-navy);
}

/* The old gradient text-clip fights the new ink colour */
.text-highlight,
.text-highlight.shimmer {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--d-blue);
}

/* ---------------------------------------------------
   TESTIMONIALS
   --------------------------------------------------- */
.testimonial-slide,
.testimonial-content {
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 30px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--d-slate);
}

/* Decorative, but 2BA9DE is 2.68:1 - under the 3.0 large-text floor. */
.quote-icon { color: var(--d-blue); }

.author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--d-navy);
}

.author-location {
  font-size: 12.5px;
  color: var(--d-muted);
}

.testimonial-dot { background: var(--d-line-3); }
.testimonial-dot.active { background: var(--d-cyan); }

/* ---------------------------------------------------
   FAQ ACCORDION
   --------------------------------------------------- */
.faq-item {
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  background: var(--d-white);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--d-ink);
  padding: 20px 24px;
  background: transparent;
}

.faq-question:hover { background: var(--d-surface); }

.faq-answer {
  font-size: 15px;
  line-height: 1.7;
  color: var(--d-muted);
  padding: 0 24px 20px;
}

.faq-icon { color: var(--d-blue); }

.faq-category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--d-track-kicker);
  text-transform: uppercase;
  color: var(--d-blue);
}

/* ---------------------------------------------------
   FORMS - enquiry drawer, wizard
   --------------------------------------------------- */
.form-group label,
.form-row label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-slate);
  margin-bottom: 7px;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-row input,
.form-row select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--d-line-2);
  border-radius: var(--d-r-sm);
  font-size: 14.5px;
  color: var(--d-ink);
  background: var(--d-surface-2);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--d-cyan);
  background: var(--d-white);
}

.required { color: #C0392B; }

.enquiry-drawer {
  border-radius: var(--d-r-xl) 0 0 var(--d-r-xl);
  box-shadow: var(--d-shadow-lift);
}

.drawer-header h3 {
  font-family: var(--d-font-head);
  color: var(--d-ink);
}

.wizard-progress-bar {
  background: var(--d-line);
  border-radius: var(--d-r-pill);
}

.wizard-progress-fill {
  background: linear-gradient(90deg, var(--d-cyan), var(--d-blue));
}

.wizard-progress-text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-muted);
}

.step-number {
  background: var(--d-navy);
  color: var(--d-white);
  border-radius: 50%;
  font-weight: 700;
}

/* ---------------------------------------------------
   NEWS / NOTICES
   --------------------------------------------------- */
.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
}

.news-item { padding: 24px 26px; }

.news-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--d-track-kicker);
  text-transform: uppercase;
  color: var(--d-blue);
}

.news-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--d-ink);
  margin: 8px 0;
}

.news-content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--d-muted);
}
/* ---------------------------------------------------
   MOTION
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .desktop-whatsapp-btn:hover { transform: none; }
}

/* ---------------------------------------------------
   NAVIGATION SWITCH
   There was a dead zone: between 768px and 968px the inline
   critical CSS hid .mobile-menu-btn (its 768px nav swap) while
   style.css's legacy max-width:968px rule still hid
   .desktop-nav, so neither navigation rendered.

   One switch point now. Below 1280px the drawer is the
   navigation, because the design's nine-tab bar needs more
   width than that. At 1280px the tab bar takes over.
   --------------------------------------------------- */
.desktop-nav,
.desktop-lang-switch,
.desktop-whatsapp-btn { display: none; }

.mobile-header-tools { display: flex; }
.mobile-menu-btn { display: flex; }

/* ---------------------------------------------------
   MOBILE CHROME
   The hamburger, language pill and sticky call bar are
   small-screen-only, so the earlier desktop-scoped layer never
   reached them and they kept the old brand: #5375E2 at 4.16:1,
   WhatsApp green at 1.97:1 and #84AC64 at 2.58:1 against white.

   Now that the design applies everywhere they would be the only
   things left wearing the old palette, so they adopt it here.
   That resolves the contrast at the same time.
   --------------------------------------------------- */
.site-header .mobile-lang-toggle,
.mobile-lang-toggle.language-switch {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  color: var(--d-navy);
  font-weight: 700;
}

.mobile-menu-btn .menu-text { color: var(--d-navy); }
.mobile-menu-btn .hamburger-line { background: var(--d-navy); }

.sticky-cta-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--d-line);
  box-shadow: var(--d-shadow-header);
}

/* 9.88:1 on the bar. The icons keep their own colour below. */
.sticky-cta-bar .cta-btn,
.sticky-cta-bar .cta-btn .cta-label {
  color: var(--d-navy);
}

.sticky-cta-bar .cta-btn svg { color: var(--d-blue); }

/* WhatsApp keeps its brand green as an icon fill, where the
   2.6:1 does not matter, while its label stays navy. */
.sticky-cta-bar .cta-whatsapp svg { color: #1DA851; }

.sticky-cta-bar .cta-btn:active,
.sticky-cta-bar .cta-btn:focus-visible {
  background: var(--d-surface);
}

/* The mobile drawer is the primary navigation below 1280px, so it
   carries the design too. */
.mobile-nav { background: var(--d-white); }
.mobile-nav .mobile-nav-link {
  color: var(--d-slate);
  font-family: var(--d-font-body);
  font-weight: 600;
}
.mobile-nav .mobile-nav-link:hover,
.mobile-nav .mobile-nav-link:focus-visible {
  background: var(--d-surface);
  color: var(--d-navy);
}

/* =====================================================
   >= 768px — the design's side-by-side section header
   ===================================================== */
@media (min-width: 768px) {

  .section-header-modern {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

}

/* =====================================================
   >= 1280px — the design's two-row header
   Row 1: brand (left) + language/WhatsApp (right)
   Row 2: full-width nav tab bar

   Below this the nine-tab bar cannot fit, so style.css's
   hamburger navigation stands instead.
   ===================================================== */
@media (min-width: 1280px) {

  /* The tab bar has room here, so it replaces the drawer. */
  .desktop-nav { display: flex; }
  .desktop-lang-switch { display: block; }
  .desktop-whatsapp-btn { display: inline-flex; }
  .mobile-header-tools,
  .mobile-menu-btn { display: none; }

  /* ---------------------------------------------------
     HEADER — two rows
     Row 1: brand (left) + language/WhatsApp (right)
     Row 2: full-width nav tab bar

     Achieved purely with flex `order` on the existing
     children, so header.html markup is unchanged.
     --------------------------------------------------- */
  .site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--d-line);
    box-shadow: var(--d-shadow-header);
  }

  .site-header.scrolled { box-shadow: var(--d-shadow-header); }

  /* The .shrink class is added on scroll by
     marketing-enhancements.js and collapses the brand and nav
     labels. That fights the design's stable two-row header, so
     it is neutralised here (the class still applies below 1280px). */
  .site-header.shrink .header-container { min-height: 0; padding: 0 var(--d-gutter); gap: 22px; }
  .site-header.shrink .school-logo { width: 54px; height: 54px; }
  .site-header.shrink .brand-name { display: block; font-size: 20px; }
  .site-header.shrink .nav-label { display: inline; }

  .header-container {
    max-width: var(--d-container);
    margin: 0 auto;
    padding: 0 var(--d-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 22px;
    row-gap: 0;
    min-height: 0;
  }

  /* Row 1 — brand */
  .header-logo  { order: 1; flex: none; padding: 13px 0; }
  .header-brand { order: 1; flex: none; padding: 13px 0; }

  .school-logo {
    width: 54px;
    height: 54px;
    border-radius: 0;
    object-fit: contain;
    /* Drops the logo's white JPEG box onto the header tint */
    mix-blend-mode: multiply;
  }

  .brand-name {
    font-family: var(--d-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--d-navy);
    letter-spacing: var(--d-track-head);
    line-height: 1.1;
    white-space: nowrap;
  }

  /* The name is a two-tier lockup at every width; the second tier is
     set smaller so it balances against the 54px logo. */
  .brand-name .brand-suffix { font-size: 0.68em; font-weight: 600; }

  /* Row 1 — right cluster */
  .desktop-lang-switch { order: 2; margin-left: auto; flex: none; padding: 12px 0; }
  .desktop-whatsapp-btn { order: 2; flex: none; }

  .lang-btn {
    display: inline-flex;
    align-items: center;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-navy);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 15px;
    border-radius: var(--d-r-sm);
    text-decoration: none;
  }

  .lang-btn:hover {
    border-color: var(--d-cyan);
    background: #EDF6FC;
    color: var(--d-navy);
  }

  .desktop-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Solid #2BA9DE would put white on a 2.68:1 background.
       The gradient keeps the accent while staying legible. */
    background: linear-gradient(135deg, var(--d-blue), var(--d-navy));
    color: var(--d-white);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 16px;
    border-radius: var(--d-r-sm);
    box-shadow: 0 12px 26px -12px rgba(30, 123, 184, 0.7);
  }

  .desktop-whatsapp-btn:hover {
    color: var(--d-white);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -12px rgba(30, 123, 184, 0.9);
  }

  /* Row 2 — nav tab bar */
  .desktop-nav {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
    border-top: 1px solid var(--d-line-soft);
  }

  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 11px 13px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--d-muted);
    border-radius: 8px 8px 0 0;
    text-decoration: none;
  }

  /* The design's nav is text-only; the icons belong to the
     compact mobile treatment. */
  .nav-icon  { display: none; }
  .nav-label { display: inline; }

  .nav-link:hover {
    background: var(--d-surface);
    color: var(--d-navy);
  }

  /* Active tab underline. Requires aria-current="page", which
     header.html now sets — the desktop nav previously had no
     current-page indicator at all, for sighted or AT users. */
  .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 11px;
    right: 11px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
  }

  .nav-link[aria-current="page"] {
    color: var(--d-navy);
    font-weight: 700;
  }

  .nav-link[aria-current="page"]::after {
    background: var(--d-cyan);
  }
  /* ---------------------------------------------------
     STICKY CTA
     The design carries its actions in the header, so the
     bottom bar is suppressed on desktop and the body padding
     it reserved is released.
     --------------------------------------------------- */
  .sticky-cta-bar { display: none; }
  body { padding-bottom: 0; }

  /* Orphaned float - not included by the layout */
  .whatsapp-float { display: none; }

}

/* =====================================================
   DESIGN COMPONENTS (dc-*)
   =====================================================

   The design's own sections, translated from its inline styles.
   Prefixed dc- so they never collide with the legacy classes in
   style.css, which still serve pages not yet rebuilt.

   Values are the design's. Where it specifies a fixed size that
   would break a phone, a clamp() is used with the design's value
   as the maximum — the design has no breakpoints of its own.
   ===================================================== */

.dc-wrap {
  max-width: var(--d-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
}

.dc-band { background: var(--d-white); padding: clamp(48px, 8vw, 90px) 0; }
.dc-band-tint { background: var(--d-surface); }

.dc-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--d-track-kicker);
  text-transform: uppercase;
  color: var(--d-blue);
}

.dc-h2 {
  font-family: var(--d-font-head);
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 700;
  color: var(--d-ink);
  line-height: 1.1;
  margin: 14px 0 0;
  letter-spacing: -0.02em;
}

.dc-h3 {
  font-family: var(--d-font-head);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  color: var(--d-ink);
  margin: 12px 0 0;
}

.dc-lead { font-size: 16px; line-height: 1.68; color: var(--d-muted); margin-top: 16px; }

.dc-head { display: grid; gap: 16px; }
.dc-head-main { max-width: 620px; }
.dc-head-sub { font-size: 15px; line-height: 1.65; color: var(--d-muted); max-width: 380px; margin: 0; }
.dc-head-stack { max-width: 660px; }
.dc-head-center { text-align: center; max-width: 640px; margin: 0 auto; }

.dc-grid { display: grid; gap: 18px; }
.dc-grid-290 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.dc-grid-210 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.dc-mt-32 { margin-top: 32px; }
.dc-mt-44 { margin-top: clamp(28px, 4vw, 44px); }
.dc-mt-46 { margin-top: clamp(28px, 4vw, 46px); }

.dc-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
}

/* --- buttons ------------------------------------------------------ */
.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--d-font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 16px 26px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .28s cubic-bezier(0.16,1,0.3,1), background-color .18s ease;
}

.dc-btn-light { background: var(--d-white); color: #12295E; box-shadow: 0 20px 40px -18px rgba(0,0,0,0.6); }
.dc-btn-light:hover { color: #12295E; transform: translateY(-2px); }

.dc-btn-glass {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--d-white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
}
.dc-btn-glass:hover { background: rgba(255,255,255,0.18); color: var(--d-white); }

.dc-btn-navy { background: var(--d-navy); color: var(--d-white); font-size: 14.5px; padding: 15px 24px; }
.dc-btn-navy:hover { background: #12295E; color: var(--d-white); }

.dc-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-blue);
  text-decoration: none;
}
.dc-link:hover { color: var(--d-navy); }

/* --- 1. hero ------------------------------------------------------ */
.dc-hero {
  position: relative;
  overflow: hidden;
  background: var(--d-ink);
  padding: clamp(40px, 6vw, 54px) 0;
  /* clamp() has no `auto`; the design's 620px is a desktop floor only. */
  min-height: 620px;
}

.dc-hero-drift { position: absolute; inset: 0; animation: dcDrift 26s ease-in-out infinite alternate; }
.dc-hero-wash { position: absolute; inset: 0; background: linear-gradient(145deg, #12295E 0%, var(--d-navy) 45%, var(--d-blue) 100%); }
.dc-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,22,49,0.93) 0%, rgba(11,22,49,0.78) 42%, rgba(11,22,49,0.24) 100%); }
.dc-hero-scrim-b { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,22,49,0.65) 0%, rgba(11,22,49,0) 55%); }

@keyframes dcDrift {
  from { transform: translate3d(0,0,0) scale(1.04); }
  to   { transform: translate3d(-2%,-1.5%,0) scale(1.12); }
}

.dc-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.dc-hero-copy { max-width: 700px; }

.dc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 11px;
  border-radius: var(--d-r-pill);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #DCE8F5;
}
.dc-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--d-cyan-soft); flex: none; }

.dc-hero-title {
  font-family: var(--d-font-head);
  font-size: clamp(30px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--d-white);
  margin: 24px 0 0;
  letter-spacing: -0.035em;
}

.dc-hero-sub { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; color: var(--d-line-3); margin-top: 20px; max-width: 560px; }
/* Governing trust, stated on the home hero. Reads a step quieter than
   .dc-hero-sub above it but stays well clear of the 4.5:1 floor on the
   hero's dark ground. */
.dc-hero-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  max-width: 560px;
  font-size: clamp(13.5px, 1.15vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--d-line-2);
}
.dc-hero-trust svg { flex: none; opacity: 0.75; }

.dc-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }

.dc-hero-aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
@media (max-width: 767px) {
  .dc-hero { min-height: 0; }
  .dc-hero-aside { align-items: stretch; }
}

.dc-slot {
  border: 1.5px dashed rgba(255,255,255,0.34);
  border-radius: 14px;
  padding: 18px 22px;
  background: rgba(11,22,49,0.34);
  width: 100%;
}
.dc-slot-video { max-width: 340px; }
.dc-slot-kicker { font-size: 10px; font-weight: 700; letter-spacing: var(--d-track-kicker); text-transform: uppercase; color: var(--d-cyan-soft); }
.dc-slot-title { font-family: var(--d-font-head); font-size: 14.5px; font-weight: 600; color: var(--d-white); margin-top: 9px; line-height: 1.4; }
.dc-slot-note { font-size: 11.5px; color: #B9D3E9; margin-top: 9px; line-height: 1.45; }

.dc-seats {
  width: 100%;
  max-width: 340px;
  background: rgba(255,255,255,0.97);
  border-radius: var(--d-r-lg);
  padding: 22px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55);
}
.dc-seats-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); }
.dc-seats-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.dc-seats-num { font-family: var(--d-font-head); font-size: 40px; font-weight: 700; color: var(--d-navy); line-height: 1; }
.dc-seats-per { font-size: 13px; font-weight: 600; color: var(--d-muted); }
.dc-seats-bar { height: 6px; border-radius: 3px; background: var(--d-line); margin-top: 14px; overflow: hidden; }
.dc-seats-fill { width: 72%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--d-cyan), var(--d-blue)); }
.dc-seats-note { font-size: 12px; color: var(--d-muted); margin-top: 10px; line-height: 1.45; }

/* --- 2. partners -------------------------------------------------- */
.dc-partners { background: var(--d-white); border-bottom: 1px solid var(--d-line); }
.dc-partners-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding-top: 26px; padding-bottom: 26px; }
.dc-partners-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); max-width: 150px; line-height: 1.5; }
.dc-partners-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.dc-partner { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border: 1px solid var(--d-line); border-radius: var(--d-r-md); background: var(--d-surface-2); }
.dc-partner-logo { flex: none; width: 44px; height: 44px; border-radius: 9px; border: 1.5px dashed #C6DAEB; background: var(--d-surface); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--d-grey-deco); letter-spacing: 0.06em; }
.dc-partner-name { font-size: 13.5px; font-weight: 700; color: var(--d-navy); }
.dc-partner-note { font-size: 11.5px; color: var(--d-muted); margin-top: 2px; }

/* --- 3. answers --------------------------------------------------- */
.dc-answer {
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 208px;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .28s ease, transform .28s cubic-bezier(0.16,1,0.3,1);
}
.dc-answer:hover { border-color: var(--d-cyan); box-shadow: var(--d-shadow-card); transform: translateY(-3px); }
.dc-answer-top { display: flex; align-items: center; justify-content: space-between; }
.dc-icon { width: 42px; height: 42px; border-radius: 11px; background: #EDF6FC; display: flex; align-items: center; justify-content: center; color: var(--d-blue); }
.dc-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.dc-answer-q { font-family: var(--d-font-head); font-size: 20px; font-weight: 700; color: var(--d-ink); margin: 4px 0 0; }
.dc-answer-body { font-size: 14.5px; line-height: 1.6; color: var(--d-muted); flex: 1; margin: 0; }

/* --- 4. stats (dark) ---------------------------------------------- */
.dc-stats { background: var(--d-ink); padding: clamp(44px, 6vw, 70px) 0; position: relative; overflow: hidden; }
.dc-stats-glow { position: absolute; top: -140px; right: -80px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(43,169,222,0.24) 0%, rgba(43,169,222,0) 70%); }
.dc-stats-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 30px; }
.dc-stat { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; border-left: 2px solid rgba(43,169,222,0.4); }
.dc-stat-value { font-family: var(--d-font-head); font-size: clamp(32px, 3.4vw, 52px); font-weight: 700; color: var(--d-white); line-height: 1; letter-spacing: -0.04em; }
.dc-stat-label { font-size: 14.5px; font-weight: 700; color: var(--d-cyan-soft); }
.dc-stat-note { font-size: 13px; color: #8FA8C2; line-height: 1.5; }

/* --- 5. journey --------------------------------------------------- */
.dc-stage { border: 1px solid var(--d-line); border-radius: var(--d-r-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--d-white); transition: border-color .18s ease, box-shadow .28s ease; }
.dc-stage:hover { border-color: var(--d-cyan); box-shadow: 0 20px 40px -26px rgba(23,70,107,0.4); }
.dc-stage-shot { min-height: 118px; background: var(--d-surface); border-bottom: 1px dashed #C6DAEB; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 12px; }
.dc-stage-shot .dc-slot-kicker { color: var(--d-grey-deco); font-size: 9.5px; letter-spacing: 0.14em; }
.dc-stage-shot-note { font-size: 11.5px; color: var(--d-muted); line-height: 1.4; }
.dc-stage-body { padding: 18px; }
.dc-stage-name { font-family: var(--d-font-head); font-size: 16px; font-weight: 700; color: var(--d-ink); }
.dc-stage-years { font-size: 12.5px; font-weight: 700; color: var(--d-blue); margin-top: 4px; }
.dc-stage-note { font-size: 13px; line-height: 1.5; color: var(--d-muted); margin-top: 6px; }

/* --- 6. digital --------------------------------------------------- */
.dc-points { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.dc-point { display: flex; gap: 14px; align-items: flex-start; }
.dc-point-tick { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--d-white); border: 1px solid var(--d-line-2); display: flex; align-items: center; justify-content: center; color: var(--d-blue); }
.dc-point-title { font-size: 15px; font-weight: 700; color: var(--d-ink); }
.dc-point-body { font-size: 14px; line-height: 1.55; color: var(--d-muted); margin-top: 3px; }

.dc-digital-panel { border-radius: 20px; overflow: hidden; border: 1px solid var(--d-line-2); background: var(--d-white); box-shadow: 0 40px 80px -40px rgba(23,70,107,0.5); }
.dc-slot-wide {
  min-height: clamp(200px, 30vw, 340px);
  background: linear-gradient(140deg, #EDF6FC, var(--d-line-2));
  border: none;
  border-bottom: 1px dashed #C6DAEB;
  border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
}
.dc-slot-wide .dc-slot-kicker { color: var(--d-grey-deco); font-size: 10.5px; }
.dc-slot-wide .dc-slot-title { color: var(--d-navy); font-size: 17px; max-width: 320px; }
.dc-apps { padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.dc-app { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--d-r-sm); background: var(--d-surface); border: 1px solid var(--d-line); }
.dc-app-initials { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--d-white); border: 1px solid var(--d-line-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--d-navy); }
.dc-app-name { font-size: 12.5px; font-weight: 600; color: var(--d-navy); }

/* --- 7. notices + calendar ---------------------------------------- */
.dc-notices { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.dc-notice { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-white); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.dc-notice:hover { border-color: var(--d-cyan); background: var(--d-surface-2); }
.dc-notice-date { flex: none; width: 58px; text-align: center; border-right: 1px solid var(--d-line); padding-right: 16px; }
.dc-notice-day { font-family: var(--d-font-head); font-size: 24px; font-weight: 700; color: var(--d-navy); line-height: 1; }
.dc-notice-mon { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-grey-deco); margin-top: 4px; }
.dc-notice-body { flex: 1; min-width: 0; }
.dc-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--d-r-pill); }
.dc-notice-title { font-size: 15.5px; font-weight: 700; color: var(--d-ink); margin-top: 8px; }
.dc-notice-text { font-size: 13.5px; color: var(--d-muted); margin-top: 4px; line-height: 1.5; }
.dc-notice-arrow { flex: none; color: var(--d-grey-deco); }

.dc-calendar { margin-top: 26px; border: 1px solid var(--d-line); border-radius: var(--d-r-lg); overflow: hidden; }
.dc-cal-row { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--d-line-soft); align-items: center; }
.dc-cal-bar { flex: none; width: 4px; height: 34px; border-radius: 2px; }
.dc-cal-main { flex: 1; min-width: 0; }
.dc-cal-title { font-size: 14.5px; font-weight: 700; color: var(--d-ink); }
.dc-cal-kind { font-size: 12.5px; color: var(--d-muted); margin-top: 2px; }
.dc-cal-date { flex: none; font-size: 13px; font-weight: 700; color: var(--d-navy); }
.dc-cal-foot { padding: 16px 18px; background: var(--d-surface); }

/* --- 8. voices ---------------------------------------------------- */
.dc-voice { background: var(--d-white); border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.dc-voice-quote { font-family: var(--d-font-head); font-size: 46px; font-weight: 700; color: var(--d-line-2); line-height: 0.6; height: 22px; }
.dc-voice-text { font-size: 15px; line-height: 1.7; color: var(--d-slate); flex: 1; margin: 0; }
.dc-voice-by { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid var(--d-line-soft); }
.dc-voice-photo { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px dashed #C6DAEB; background: var(--d-surface); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: var(--d-grey-deco); }
.dc-voice-name { font-size: 14.5px; font-weight: 700; color: var(--d-ink); }
.dc-voice-detail { font-size: 12.5px; color: var(--d-muted); margin-top: 2px; }

/* --- 9. life mosaic ----------------------------------------------- */
.dc-mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); grid-auto-rows: 200px; gap: 14px; margin-top: 40px; }
.dc-mosaic-hero { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) { .dc-mosaic-hero { grid-column: span 1; grid-row: span 1; } }
.dc-tile, .dc-mosaic-hero {
  border-radius: var(--d-r-lg);
  border: 1.5px dashed #C6DAEB;
  background: linear-gradient(140deg, var(--d-surface), #EDF6FC);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 18px;
}
.dc-tile .dc-slot-kicker, .dc-mosaic-hero .dc-slot-kicker { color: var(--d-grey-deco); }
.dc-mosaic-hero .dc-slot-title { color: var(--d-navy); font-size: 18px; max-width: 300px; }
.dc-tile-note { font-family: var(--d-font-head); font-size: 13.5px; font-weight: 600; color: var(--d-navy); line-height: 1.4; }

/* --- 10. admit ---------------------------------------------------- */
.dc-admit { background: linear-gradient(140deg, #12295E 0%, var(--d-navy) 55%, var(--d-blue) 100%); padding: clamp(44px, 7vw, 84px) 0; }
.dc-admit-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; }
.dc-admit-title { font-family: var(--d-font-head); font-size: clamp(26px, 3vw, 42px); font-weight: 700; color: var(--d-white); line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
.dc-admit-sub { font-size: 16px; line-height: 1.65; color: var(--d-line-3); margin-top: 16px; max-width: 560px; }
.dc-admit-actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (min-width: 768px) {
  .dc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .dc-admit-actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-hero-drift { animation: none; }
  .dc-btn-light:hover, .dc-answer:hover { transform: none; }
}

/* --- contrast corrections on the design's own values --------------- */

/* The token block records that #1E7BB8 is 4.58:1 on white but only
   4.30:1 on the tint. The design uses it on both; on tinted bands it
   steps to navy. */
.dc-band-tint .dc-kicker,
.dc-band-tint .dc-link,
/* the calendar footer is a tinted panel inside a white band */
.dc-cal-foot .dc-link,
.dc-band-tint .dc-answer-top ~ * .dc-link { color: var(--d-navy); }

/* #93AAC2 is 2.39:1 - the token block says decoration only, never
   text. These are text. */
.dc-notice-mon,
.dc-tag { color: var(--d-muted); }

/* Placeholder labels are instructions to whoever supplies the photos,
   so they have to be readable rather than ghosted. */
.dc-partner-logo,
.dc-slot-kicker,
.dc-voice-photo,
.dc-stage-shot .dc-slot-kicker,
.dc-tile .dc-slot-kicker,
.dc-mosaic-hero .dc-slot-kicker { color: var(--d-muted); }

/* On the dark hero the slot kicker keeps the design's soft cyan, which
   is 8.9:1 there. */
.dc-hero .dc-slot-kicker { color: var(--d-cyan-soft); }

/* =====================================================
   DESIGN COMPONENTS — inner screens
   ===================================================== */

/* --- page head (every screen except home) -------------------------- */
.dc-pagehead {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #12295E 0%, var(--d-navy) 55%, var(--d-blue) 100%);
  padding: clamp(44px, 7vw, 88px) 0;
}
.dc-pagehead-glow {
  position: absolute; top: -160px; right: -100px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,169,222,0.28) 0%, rgba(43,169,222,0) 70%);
}
.dc-pagehead .dc-wrap { position: relative; }
.dc-pagehead-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: var(--d-track-kicker);
  text-transform: uppercase; color: var(--d-cyan-soft);
}
.dc-pagehead-title {
  font-family: var(--d-font-head);
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 700; line-height: 1.08; color: var(--d-white);
  margin: 14px 0 0; letter-spacing: -0.03em; max-width: 900px;
}
.dc-pagehead-sub {
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.65;
  color: var(--d-line-3); margin-top: 18px; max-width: 640px;
}

/* --- grids ---------------------------------------------------------- */
.dc-grid-230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* --- step number ---------------------------------------------------- */
.dc-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--d-navy); color: var(--d-white);
  font-size: 13px; font-weight: 700; flex: none;
}

/* --- timeline (about) ---------------------------------------------- */
.dc-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--d-line-2); }
.dc-timeline-item { position: relative; display: grid; gap: 4px; padding: 0 0 26px 26px; }
.dc-timeline-item::before {
  content: ""; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--d-cyan); border: 2px solid var(--d-white);
}
.dc-timeline-year { font-family: var(--d-font-head); font-size: 16px; font-weight: 700; color: var(--d-navy); }
.dc-timeline-body { font-size: 14.5px; line-height: 1.6; color: var(--d-muted); }

/* --- albums (gallery) ----------------------------------------------- */
.dc-album {
  border: 1px solid var(--d-line); border-radius: var(--d-r-lg); overflow: hidden;
  background: var(--d-white); display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .28s ease;
}
.dc-album:hover { border-color: var(--d-cyan); box-shadow: var(--d-shadow-card); }
.dc-album-shot {
  min-height: 150px; background: linear-gradient(140deg, var(--d-surface), #EDF6FC);
  border-bottom: 1px dashed #C6DAEB;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
}
.dc-album-body { padding: 18px; display: grid; gap: 4px; }
.dc-album-count { font-size: 12.5px; font-weight: 700; color: var(--d-blue); }

/* --- app tiles (digital) -------------------------------------------- */
.dc-app-lg { padding: 16px 18px; }
.dc-app-meta { display: grid; gap: 2px; }

/* --- filters (notices, gallery) ------------------------------------- */
.dc-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.dc-chip-btn {
  border: 1px solid var(--chip-bd, var(--d-line-2));
  background: var(--chip-bg, var(--d-surface-2));
  color: var(--d-navy);
  font-family: var(--d-font-body);
  font-size: 13px; font-weight: 700;
  padding: 9px 16px; border-radius: var(--d-r-pill); cursor: pointer;
}
.dc-chip-btn.is-active { background: var(--d-navy); border-color: var(--d-navy); color: var(--d-white); }
.dc-notice[hidden] { display: none; }

/* --- month list (notices) ------------------------------------------- */
.dc-month-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dc-month-list li {
  font-size: 14px; line-height: 1.55; color: var(--d-muted);
  padding-left: 16px; position: relative;
}
.dc-month-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--d-cyan);
}

/* --- result cards (notices) ----------------------------------------- */
.dc-result {
  background: var(--d-white); border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg); padding: 26px; display: grid; gap: 6px;
}
.dc-result-value {
  font-family: var(--d-font-head); font-size: clamp(30px, 3vw, 42px);
  font-weight: 700; color: var(--d-navy); line-height: 1; letter-spacing: -0.03em;
}
.dc-result-label { font-size: 14.5px; font-weight: 700; color: var(--d-ink); }
.dc-result-note { font-size: 13px; line-height: 1.5; color: var(--d-muted); }

/* --- tables (admissions) -------------------------------------------- */
.dc-table-wrap { overflow-x: auto; border: 1px solid var(--d-line); border-radius: var(--d-r-lg); background: var(--d-white); }
.dc-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.dc-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: var(--d-track-kicker); text-transform: uppercase;
  color: var(--d-muted); padding: 16px 18px; border-bottom: 1px solid var(--d-line);
  background: var(--d-surface);
}
.dc-table td { padding: 16px 18px; border-bottom: 1px solid var(--d-line-soft); font-size: 14.5px; color: var(--d-slate); }
.dc-table tr:last-child td { border-bottom: none; }
.dc-td-strong { font-weight: 700; color: var(--d-ink); }
.dc-td-note { color: var(--d-muted); font-size: 13.5px; }
.dc-td-amount { font-family: var(--d-font-head); font-weight: 700; color: var(--d-navy); white-space: nowrap; text-align: right; }

/* --- wizard shell (admissions) -------------------------------------- */
.dc-wizard { background: var(--d-white); border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: clamp(20px, 3vw, 30px); }
.dc-wizard-steps { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; }
.dc-wizard-step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--d-muted); }
.dc-wizard-step.is-active { color: var(--d-navy); font-weight: 700; }
.dc-wizard-step .dc-step-n { background: var(--d-line); color: var(--d-navy); }
.dc-wizard-step.is-active .dc-step-n { background: var(--d-navy); color: var(--d-white); }

/* --- faq (admissions) ------------------------------------------------ */
.dc-faq .faq-item {
  border: 1px solid var(--d-line); border-radius: var(--d-r-md);
  background: var(--d-white); margin-bottom: 12px; overflow: hidden;
}
.dc-faq .faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--d-font-body); font-size: 16px; font-weight: 700;
  color: var(--d-ink); padding: 20px 24px; background: transparent;
  border: none; cursor: pointer; text-align: left;
}
.dc-faq .faq-question:hover { background: var(--d-surface); }
.dc-faq .faq-icon { color: var(--d-blue); font-size: 20px; flex: none; }
.dc-faq .faq-answer { padding: 0 24px 20px; }
.dc-faq .faq-answer p { font-size: 15px; line-height: 1.7; color: var(--d-muted); margin: 0; }

/* --- contact --------------------------------------------------------- */
.dc-contact-list { display: grid; gap: 12px; }
.dc-contact-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-white);
  text-decoration: none; transition: border-color .18s ease, background-color .18s ease;
}
.dc-contact-row:hover { border-color: var(--d-cyan); background: var(--d-surface-2); }
.dc-contact-row > span:last-child { display: grid; gap: 2px; }
.dc-visit { border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: 22px; background: var(--d-surface-2); }
.dc-slot-map {
  border: 1.5px dashed #C6DAEB; background: var(--d-surface);
  min-height: 200px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.dc-slot-map .dc-slot-kicker { color: var(--d-muted); }
.dc-slot-map .dc-slot-title { color: var(--d-navy); }

/* --- forms ------------------------------------------------------------ */
.dc-form-wrap { max-width: 640px; }
.dc-form { display: grid; gap: 16px; }
.dc-form .form-group { display: grid; gap: 7px; }
.dc-form label { font-size: 12.5px; font-weight: 700; color: var(--d-slate); }
.dc-form input, .dc-form select {
  width: 100%; padding: 14px 15px; border: 1px solid var(--d-line-2);
  border-radius: var(--d-r-sm); font-size: 14.5px; color: var(--d-ink);
  background: var(--d-surface-2); font-family: var(--d-font-body);
}
.dc-form input:focus, .dc-form select:focus { border-color: var(--d-cyan); background: var(--d-white); }
.dc-form .dc-btn { justify-self: start; }