/* ════════════════════════════════════════════════════════════════
   GLASS LAYER — Anbaalaya Sainik Academy
   ────────────────────────────────────────────────────────────────
   Loaded LAST on every page, after style.css and after each page's
   local <style> blocks, so it wins the cascade at equal specificity.

   It only changes surface treatment: background translucency,
   backdrop blur, hairline highlights and depth shadows.
   It never changes text colour, layout, spacing or type.

   Light surfaces (white/cream/tan cards) become frosted white glass.
   Dark surfaces (navy panels) become frosted navy glass.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Blur strength — reduced on small screens further down */
  --glass-blur: 18px;
  --glass-blur-sm: 12px;
  --glass-sat: 150%;

  /* Light glass (on cream / tan / white sections) */
  --glass-light: linear-gradient(150deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.44) 100%);
  --glass-light-strong: linear-gradient(150deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.62) 100%);
  --glass-light-edge: rgba(255, 255, 255, 0.66);
  --glass-light-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 14px 34px -16px rgba(27, 42, 74, 0.26);

  /* Dark glass (on navy sections, white text) */
  --glass-dark: linear-gradient(150deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
  --glass-dark-edge: rgba(255, 255, 255, 0.16);
  --glass-dark-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 40px -18px rgba(0, 0, 0, 0.55);

  /* Navy glass — solid navy blocks sitting on light sections */
  --glass-navy: linear-gradient(150deg, rgba(27, 42, 74, 0.92) 0%, rgba(15, 26, 48, 0.86) 100%);
  --glass-navy-edge: rgba(201, 168, 76, 0.28);
  --glass-navy-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 44px -18px rgba(15, 26, 48, 0.5);

  /* ── Ink scale ──
     Translucent panels lift text off a lighter, warmer backdrop, so the
     old neutral-grey body text no longer holds AA. These are the same
     navy, just used as ink: deeper, cooler, and consistent with the
     brand rather than the flat greys they replace. */
  --ink:        rgba(20, 30, 52, 0.92);   /* headings, strong text     */
  --ink-body:   rgba(20, 30, 52, 0.78);   /* body copy         7.9 : 1 */
  --ink-muted:  rgba(20, 30, 52, 0.70);   /* meta, fine print  6.0 : 1 */
  --ink-faint:  rgba(20, 30, 52, 0.62);   /* placeholders      4.8 : 1 */

  /* Gold ink — a deeper draw of the brand gold, for small text on light
     surfaces where #C9A84C only reaches 2.2 : 1. Display gold, rules,
     borders, icons and gold-on-navy all stay #C9A84C. */
  --gold-ink: #7A5C1C;                    /* on cream          5.9 : 1 */

  /* Text on dark glass — 0.11 white film over navy is lighter than raw
     navy, so muted whites need lifting to hold AA. */
  --on-dark:       rgba(255, 255, 255, 0.92);
  --on-dark-body:  rgba(255, 255, 255, 0.72);
  --on-dark-muted: rgba(255, 255, 255, 0.64);
}

/* ── 1. Ambient backdrop ─────────────────────────────────────────
   Glass needs something behind it to refract. A fixed, very soft
   navy + gold wash sits behind all content so every frosted panel
   picks up colour as the page scrolls past it. */

html {
  background-color: #FDF8F0;
}

body {
  background: transparent !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62vw 52vh at 10% 6%, rgba(201, 168, 76, 0.20) 0%, transparent 62%),
    radial-gradient(56vw 48vh at 92% 18%, rgba(27, 42, 74, 0.16) 0%, transparent 60%),
    radial-gradient(50vw 46vh at 78% 82%, rgba(201, 168, 76, 0.14) 0%, transparent 62%),
    radial-gradient(64vw 56vh at 20% 96%, rgba(45, 68, 112, 0.12) 0%, transparent 64%),
    linear-gradient(175deg, #FDF8F0 0%, #F7EFE2 48%, #FDF8F0 100%);
}

/* ── 2. Section tints ────────────────────────────────────────────
   Light sections go translucent so the ambient wash shows through.
   Dark sections keep their weight but gain internal gradient so the
   glass panels inside them have something to blur. */

.section-tan {
  background: linear-gradient(170deg, rgba(240, 230, 211, 0.62) 0%, rgba(240, 230, 211, 0.34) 100%);
}

.guarantee-section,
.final-strip {
  background: rgba(253, 248, 240, 0.35);
}

.mistake-section {
  background: linear-gradient(180deg, rgba(240, 230, 211, 0.6) 0%, rgba(253, 248, 240, 0.25) 100%);
}

.section-dark,
.awards-section {
  background: linear-gradient(160deg, rgba(15, 26, 48, 0.97) 0%, rgba(27, 42, 74, 0.94) 46%, rgba(45, 68, 112, 0.9) 100%);
}

.cta-section {
  background: linear-gradient(160deg, rgba(27, 42, 74, 0.96) 0%, rgba(15, 26, 48, 0.94) 100%);
}

/* Inline-styled sections in the programme pages */
.section[style*="background:var(--white)"],
.section[style*="background: var(--white)"] {
  background: rgba(255, 255, 255, 0.42) !important;
}
.section[style*="background:var(--cream)"],
.section[style*="background: var(--cream)"] {
  background: rgba(253, 248, 240, 0.34) !important;
}

/* ── 3. Light glass panels ───────────────────────────────────────
   Every card, box and panel that used to be flat white, cream or
   tan on a light section. */

.problem-stat-card,
.advantage-card,
.program-card,
.residential-card,
.trust-card,
.testimonial-card,
.testimonial-video-card,
.blog-card,
.tip-card,
.pillar-card,
.compare-card,
.step-card,
.story-card,
.office-card,
.docs-card,
.docs-box,
.packing-category,
.mission-pillar,
.modal-card,
.info-box,
.contact-box,
.legal-content .contact-box,
.stat-big,
.diff-item,
.next-strip,
.contact-bar,
.form-bonus,
.testimonial-placeholder,
.carousel-btn,
.scoreboard-table,
.rms-photo,
.faq-category {
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-light-edge);
  box-shadow: var(--glass-light-shadow);
}

/* List rows repeat 10–40× per page. They take the same translucent fill
   and hairline, but no backdrop-filter of their own — blur cost scales
   with the number of blurred layers, and they already sit on a blurred
   panel. Visually identical, far cheaper to paint. */
.mistake-list li,
.steps-list li,
.for-list li {
  background: var(--glass-light);
  border-color: var(--glass-light-edge);
  box-shadow: var(--glass-light-shadow);
}

/* Panels that keep a gold structural edge — glass fill, gold frame */
.guarantee-box,
.bonus-box,
.value-item,
.tamil-block,
.program-card.featured {
  background: var(--glass-light-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 40px -18px rgba(27, 42, 74, 0.24);
}

/* Featured programme card keeps its gold ring */
.program-card.featured {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px var(--gold),
    0 16px 44px -18px rgba(201, 168, 76, 0.4);
}

/* Several of those panel classes also appear inside navy sections
   (advantage cards on residential-coaching, faq categories on faq.html).
   There they must take the dark fill, or white text lands on white glass.
   Two nested :is() give this higher specificity than the rules above, so
   the dark context always wins. */
:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .footer-strip,
    .awards-section, .soft-cta, .rms-spotlight, .address-box, .stack-close,
    .top-ribbon, .sticky-bar, .marquee-wrap) :is(
  .problem-stat-card, .advantage-card, .program-card, .residential-card,
  .trust-card, .testimonial-card, .testimonial-video-card, .blog-card,
  .tip-card, .pillar-card, .compare-card, .step-card, .story-card,
  .office-card, .docs-card, .docs-box, .packing-category, .mission-pillar,
  .info-box, .contact-box, .stat-big, .diff-item, .next-strip, .contact-bar,
  .form-bonus, .testimonial-placeholder, .mistake-list li, .steps-list li,
  .for-list li, .faq-category, .guarantee-box, .value-item, .tamil-block,
  .badge, .scoreboard-table
) {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  box-shadow: var(--glass-dark-shadow);
}

/* Gold chips read against a lighter field once the panel behind them is
   frosted, so on navy they get a deeper backing plate. */
:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .soft-cta,
    .rms-spotlight, .awards-section) :is(
  .faq-category-label, .score-badge, .rms-spotlight-badge, .article-tag,
  .table-scroll-hint, .student-highlight-info .badge
) {
  background: rgba(15, 26, 48, 0.45);
}

/* Small chips — icon wells, badges, pills. Highlight only: chips repeat
   many times per page and sit on already-blurred panels, so they get the
   glass edge without paying for another blur pass. */
.badge,
.value-item .icon-box,
.reason-icon,
.modal-close,
.trust-icon,
.advantage-number,
.step-num,
.diff-item-num,
.tip-num,
.guarantee-shield,
.guarantee-badge-icon,
.story-feature-icon,
.score-badge,
.article-tag,
.faq-category-label,
.table-scroll-hint,
.check-pill,
.rms-spotlight-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* These few float over photos or video, where the blur does real work. */
.caption-pill,
.hero-badge,
.page-hero-badge {
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.badge {
  background: var(--glass-light-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 14px -6px rgba(27, 42, 74, 0.2);
}

.trust-icon,
.value-item .icon-box,
.reason-icon,
.modal-close {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.42) 100%);
}

/* Tinted note strips keep their gold/navy wash, gain frost */
.guarantee-badge,
.faq-still-questions,
.for-note,
.step-note,
.instalment-note,
.calendar-note,
.program-fee-note,
.residential-bottom,
.school-item,
.comparison-rec,
.tamil-quote,
.hero-tamil-quote .tamil-quote,
.article-content .info-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── 4. Dark glass panels ────────────────────────────────────────
   Panels that already sat on navy with white text. */

/* Cards: blurred. */
.diff-card,
.rms-card,
.video-card,
.video-testimonial-card,
.schedule-card,
.contact-method,
.student-highlight {
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border-color: var(--glass-dark-edge);
  box-shadow: var(--glass-dark-shadow);
}

/* Repeated rows: same glass surface, no extra blur pass. The results
   columns alone run to 100+ cards per page. */
.scroll-result-card,
.carousel-result-card,
.result-card,
.stat-item,
.trust-signal,
.included-item,
.section-dark .tamil-quote {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  box-shadow: var(--glass-dark-shadow);
}

/* FAQ items are dark on most pages but light on online-coaching, so the
   glass fill is scoped to the dark contexts only. */
:is(.section-dark, .cta-section, .hero, .page-hero, .footer) .faq-item {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  box-shadow: var(--glass-dark-shadow);
}

:is(.section-dark, .cta-section, .hero, .page-hero, .footer) .faq-item.open {
  background: linear-gradient(150deg, rgba(201, 168, 76, 0.16) 0%, rgba(201, 168, 76, 0.06) 100%);
  border-color: rgba(201, 168, 76, 0.42);
}

/* ── 5. Navy glass blocks on light sections ──────────────────────
   Solid navy call-outs become frosted navy so the page reads through. */

.soft-cta,
.rms-spotlight,
.address-box,
.stack-close,
.footer-strip,
.top-ribbon {
  background: var(--glass-navy);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  box-shadow: var(--glass-navy-shadow);
}

/* ── 6. Chrome — nav, bars, footer, overlays ─────────────────────*/

/* The nav floats over both cream and navy sections, so it stays weighted
   enough that its white labels hold AA against anything behind it. */
.nav {
  background: linear-gradient(150deg, rgba(15, 26, 48, 0.9) 0%, rgba(27, 42, 74, 0.82) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border-color: rgba(201, 168, 76, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 44px -20px rgba(15, 26, 48, 0.6);
}

.nav-item {
  color: var(--on-dark-body);
}
.nav-item:hover {
  color: #FFFFFF;
  background: rgba(201, 168, 76, 0.14);
}

#nav-brand,
#nav-phone,
.nav-hamburger {
  background: linear-gradient(150deg, rgba(15, 26, 48, 0.92) 0%, rgba(27, 42, 74, 0.84) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px -14px rgba(15, 26, 48, 0.55);
}

#nav-phone:hover {
  background: linear-gradient(150deg, rgba(45, 68, 112, 0.92) 0%, rgba(27, 42, 74, 0.86) 100%);
}

.nav-overlay {
  background: rgba(15, 26, 48, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal-backdrop,
.awards-modal {
  background: rgba(11, 18, 34, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.awards-modal-close,
.awards-modal-nav {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.marquee-wrap {
  background: linear-gradient(90deg, rgba(15, 26, 48, 0.9) 0%, rgba(27, 42, 74, 0.84) 50%, rgba(15, 26, 48, 0.9) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.footer {
  background: linear-gradient(180deg, rgba(15, 26, 48, 0.92) 0%, rgba(15, 26, 48, 0.86) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.14);
}

.sticky-bar {
  background: linear-gradient(150deg, rgba(15, 26, 48, 0.86) 0%, rgba(27, 42, 74, 0.74) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  /* Mobile drawer and floating call bar */
  .nav {
    background: linear-gradient(180deg, rgba(15, 26, 48, 0.9) 0%, rgba(27, 42, 74, 0.84) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: -18px 0 48px -20px rgba(15, 26, 48, 0.6);
  }

  #mobile-call-bar {
    background: linear-gradient(150deg, rgba(15, 26, 48, 0.92) 0%, rgba(27, 42, 74, 0.86) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 14px 38px -14px rgba(0, 0, 0, 0.5);
  }

  /* 10px gold on a translucent bar needs the lighter gold */
  #mobile-call-bar .call-hint {
    color: var(--gold-light);
  }
}

/* ── 7. Forms ────────────────────────────────────────────────────*/

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea,
.form-row input {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.56) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-row input:focus {
  background: rgba(255, 255, 255, 0.92);
}

/* ── 8. Secondary buttons and tabs ───────────────────────────────
   Primary gold CTAs stay solid — conversion elements must not
   lose contrast. */

/* Light glass only where the button sits on a light section — inside navy
   sections .btn-outline is drawn in gold and must stay on a dark field. */
.btn-outline {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-outline:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.46) 100%);
}

:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .awards-section, .soft-cta) .btn-outline {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  /* #C9A84C only reaches 3.9 : 1 on the frosted navy field */
  color: var(--gold-light);
  border-color: rgba(223, 194, 119, 0.45);
}
:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .awards-section, .soft-cta) .btn-outline:hover {
  background: linear-gradient(150deg, rgba(201, 168, 76, 0.2) 0%, rgba(201, 168, 76, 0.08) 100%);
}

.btn-secondary {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 26px -12px rgba(15, 26, 48, 0.5);
}

.program-tabs {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(27, 42, 74, 0.06);
}

/* Kept out of the :is() ink list above — that list's specificity would
   otherwise beat .program-tab.active and darken the selected tab. */
.program-tab { color: var(--ink-muted); }
.program-tab.active { color: #FFFFFF; }

.program-tab.active {
  background: linear-gradient(150deg, rgba(27, 42, 74, 0.94) 0%, rgba(15, 26, 48, 0.86) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 6px 18px -8px rgba(27, 42, 74, 0.5);
}

.carousel-btn:hover {
  background: var(--gold);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── 9. Media frames ─────────────────────────────────────────────*/

.hero-video,
.blog-card-image,
.image-placeholder,
.story-image-placeholder,
.campus-photo,
.awards-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 60px -24px rgba(15, 26, 48, 0.45);
}

.testimonial-video-thumb,
.video-thumb-btn {
  background: linear-gradient(150deg, rgba(27, 42, 74, 0.9) 0%, rgba(15, 26, 48, 0.82) 100%);
}

/* ── 10. Tables ──────────────────────────────────────────────────*/

.scoreboard-table thead th,
.exam-table thead th,
.elig-table thead th,
.comparison-table thead th,
.calendar-table thead th,
.program-overview-table thead th {
  background: linear-gradient(150deg, rgba(27, 42, 74, 0.94) 0%, rgba(15, 26, 48, 0.88) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
}

/* ── 11. Contrast — ink on glass ─────────────────────────────────
   Frosted panels sit lighter and warmer than the flat white cards they
   replaced, and the ambient wash tints everything slightly. The muted
   greys in the original palette drop below WCAG AA on that backdrop, so
   body and meta text is redrawn in navy ink. Same brand family, more
   weight. Measured against the composited surface, not the raw token. */

body :is(
  .section-subtitle,
  .section-sub,
  .advantage-card p,
  .trust-card p,
  .pillar-card p,
  .tip-card p,
  .diff-item p,
  .story-card p,
  .mission-pillar p,
  .office-card p,
  .step p,
  .step-card p,
  .steps-list .step-content p,
  .two-col-text p,
  .how-step p,
  .guarantee-box p,
  .guarantee-badge-text,
  .program-card-desc,
  .program-card-features li,
  .residential-card-features li,
  .compare-card ul li,
  .docs-card ul li,
  .packing-category ul li,
  .blog-card-excerpt,
  .testimonial-card .attribution,
  .testimonial-placeholder p,
  .testimonial-placeholder .attribution,
  .testimonial-video-detail,
  .faq-answer-inner,
  .residential-bottom p,
  .comparison-rec,
  .instalment-note,
  .calendar-note,
  .program-fee-note,
  .step-note,
  .form-note,
  .form-group label
) {
  color: var(--ink-body);
}

body :is(
  .problem-stat-card .label,
  .problem-stat-card .stat-sub,
  .stat-big .lbl,
  .residential-card-for,
  .program-card-price span,
  .blog-card-meta,
  .article-date,
  .article-reading-time,
  .tamil-quote .translation,
  .comparison-table .dash,
  .translation,
  .subtitle,
  .attribution,
  .tamil-meaning,
  .scoreboard-table .rank-cell,
  .rank-cell,
  .office-card .landmark-note,
  .legal-content .last-updated,
  .call-line,
  .wa-sub
) {
  color: var(--ink-muted);
}

input::placeholder,
textarea::placeholder,
.form-row input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-faint);
}

/* Small gold text on light surfaces uses the deeper gold ink.
   Underlines, borders, icons and display gold are untouched. */
body :is(
  .section-label,
  .program-card-per-day,
  .residential-card-duration,
  .blog-card-tag,
  .blog-card-read,
  .article-tag,
  .table-scroll-hint,
  .included-section-title,
  .step-label,
  .modal-eyebrow,
  .hero-text .eyebrow,
  .score-badge,
  .comparison-table .check,
  .scoreboard-table .score-cell,
  .story-card-score,
  .school-item .school-num,
  .results-footer strong,
  .results-more a,
  .legal-content a,
  .faq-still-contact-item strong,
  .faq-category-label,
  .advantage-number,
  .diff-item-num,
  .step-num,
  .tip-num
) {
  color: var(--gold-ink);
}

/* On navy, restore the true brand gold and lift muted whites.
   These selectors are more specific than the light rules above, so the
   dark contexts always win regardless of source order. */
:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .footer-strip,
    .soft-cta, .rms-spotlight, .address-box, .stack-close, .awards-section,
    .top-ribbon, .sticky-bar, .marquee-wrap, .nav) :is(
  .section-label,
  .table-scroll-hint,
  .score-badge,
  .story-card-score,
  .results-footer strong,
  .results-more a,
  .step-label,
  .included-section-title,
  .modal-eyebrow,
  .article-tag,
  /* small gold text: #C9A84C reaches only 3.95 : 1 on frosted navy */
  .contact-detail,
  .contact-method .contact-detail,
  .trust-signal p strong,
  .faq-still-contact-item strong,
  .stack-close strong,
  .top-ribbon strong,
  .address-box-text strong,
  .schedule-card-time,
  .rms-spotlight .score-highlight,
  .details-table td:first-child,
  .footer-contact-item span
) {
  color: var(--gold-light);
}

/* Mirror of the light ink list: anything inside a navy context is drawn in
   white instead. Keep this list in step with the two ink lists above. */
:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .footer-strip,
    .soft-cta, .rms-spotlight, .address-box, .stack-close, .awards-section,
    .top-ribbon, .sticky-bar, .marquee-wrap) :is(
  .section-subtitle, .section-sub, .faq-answer-inner,
  .advantage-card p, .trust-card p, .pillar-card p, .tip-card p, .diff-item p,
  .story-card p, .mission-pillar p, .office-card p, .step p, .step-card p,
  .steps-list .step-content p, .two-col-text p, .how-step p, .guarantee-box p,
  .guarantee-badge-text, .program-card-desc, .program-card-features li,
  .residential-card-features li, .compare-card ul li, .docs-card ul li,
  .packing-category ul li, .blog-card-excerpt, .testimonial-card .attribution,
  .testimonial-placeholder p, .testimonial-placeholder .attribution,
  .testimonial-video-detail, .residential-bottom p, .comparison-rec,
  .instalment-note, .calendar-note, .program-fee-note, .step-note, .form-note,
  .form-group label, .problem-stat-card .label, .problem-stat-card .stat-sub,
  .stat-big .lbl, .residential-card-for, .program-card-price span,
  .blog-card-meta, .article-date, .article-reading-time, .translation,
  .tamil-quote .translation, .subtitle, .attribution,
  .story-text p, .diff-card p, .trust-signal p, .contact-method p,
  .stat-item .label, .student-highlight-info p, .schedule-card ul li,
  .included-item, .rms-line
) {
  color: var(--on-dark-body);
}

/* And the gold: on navy the small-text gold reverts to gold-light, never
   the deep gold ink used on cream. */
:is(.section-dark, .cta-section, .hero, .page-hero, .footer, .footer-strip,
    .soft-cta, .rms-spotlight, .address-box, .stack-close, .awards-section,
    .top-ribbon, .sticky-bar, .marquee-wrap) :is(
  .program-card-per-day, .residential-card-duration, .blog-card-tag,
  .blog-card-read, .advantage-number, .diff-item-num, .step-num, .tip-num,
  .comparison-table .check, .scoreboard-table .score-cell,
  .school-item .school-num, .legal-content a, .faq-category-label,
  .hero-text .eyebrow, .eyebrow
) {
  color: var(--gold-light);
}

/* Fine print on navy — was 0.3–0.45 white, which fails at 11–14px. */
.footer-brand p,
.footer-links a,
.footer-contact-item,
.footer-bottom p,
.footer-bottom-links a,
.footer-meta,
.marquee-item,
.hero-stat-label,
.page-hero-proof,
.cta-contact,
.cta-contact p,
.cta-contact span,
.cta-address,
.cta-small,
.scroll-indicator span,
.scroll-result-card .card-meta,
.scroll-result-card .card-score-total,
.carousel-card-meta,
.carousel-card-total,
.result-card .out-of,
.results-more p,
.testimonial-video-placeholder,
.contact-method .contact-note {
  color: var(--on-dark-muted);
}

.footer-links a:hover,
.footer-bottom-links a:hover {
  color: var(--gold-light);
}

/* ── 12. Graceful degradation ────────────────────────────────────*/

/* No backdrop-filter support: fall back to near-opaque surfaces so
   nothing becomes unreadable. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .problem-stat-card,
  .advantage-card,
  .program-card,
  .residential-card,
  .trust-card,
  .testimonial-card,
  .testimonial-video-card,
  .blog-card,
  .tip-card,
  .pillar-card,
  .compare-card,
  .step-card,
  .story-card,
  .office-card,
  .docs-card,
  .docs-box,
  .packing-category,
  .mission-pillar,
  .modal-card,
  .info-box,
  .contact-box,
  .stat-big,
  .diff-item,
  .guarantee-box,
  .bonus-box,
  .value-item,
  .tamil-block,
  .badge,
  .mistake-list li,
  .steps-list li,
  .for-list li,
  .program-tabs,
  .btn-outline,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .form-row input {
    background: rgba(255, 255, 255, 0.95);
  }

  .nav,
  #nav-brand,
  #nav-phone,
  .nav-hamburger,
  #mobile-call-bar,
  .sticky-bar,
  .marquee-wrap,
  .footer,
  .soft-cta,
  .rms-spotlight,
  .address-box,
  .stack-close,
  .footer-strip,
  .top-ribbon,
  .program-tab.active {
    background: #0F1A30;
  }

  .section-dark,
  .awards-section,
  .cta-section {
    background: #1B2A4A;
  }
}

/* Users who ask the OS to reduce transparency get solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  body { background: #FDF8F0 !important; }

  .problem-stat-card,
  .advantage-card,
  .program-card,
  .residential-card,
  .trust-card,
  .testimonial-card,
  .testimonial-video-card,
  .blog-card,
  .tip-card,
  .pillar-card,
  .compare-card,
  .story-card,
  .office-card,
  .docs-card,
  .docs-box,
  .modal-card,
  .guarantee-box,
  .bonus-box,
  .value-item,
  .tamil-block,
  .badge {
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav,
  #nav-brand,
  #nav-phone,
  .nav-hamburger,
  #mobile-call-bar,
  .footer,
  .marquee-wrap,
  .sticky-bar,
  .top-ribbon,
  .soft-cta,
  .rms-spotlight,
  .address-box,
  .stack-close {
    background: #0F1A30;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .section-dark,
  .awards-section,
  .cta-section { background: #1B2A4A; }
  .section-tan { background: #F0E6D3; }
}

/* Smaller screens: lighter blur so scrolling stays smooth on
   low-end phones and slow connections. */
@media (max-width: 900px) {
  :root {
    --glass-blur: 12px;
    --glass-blur-sm: 8px;
    --glass-sat: 135%;
  }
}

@media (max-width: 480px) {
  :root {
    --glass-blur: 10px;
    --glass-blur-sm: 6px;
  }

  /* Fewer stacked blur layers in the ambient wash on small screens */
  body::before {
    background:
      radial-gradient(80vw 40vh at 12% 4%, rgba(201, 168, 76, 0.18) 0%, transparent 62%),
      radial-gradient(80vw 40vh at 88% 84%, rgba(27, 42, 74, 0.14) 0%, transparent 62%),
      linear-gradient(175deg, #FDF8F0 0%, #F7EFE2 50%, #FDF8F0 100%);
  }
}