/* ============================================================
   EUCCDB — brand-2026.css
   The validated 2026 brand language, applied site-wide. Loaded
   AFTER css/md3.css so it refines the shared surface. Pure CSS,
   additive. Its main job is the display typeface (Montserrat,
   matching the logo wordmark) plus a few reusable brand helpers.
   Page-specific treatments (hero bands, floating feature cards,
   scroll motion) live in each page's own styles so they never
   leak into lookalike classes on other pages. Remove this <link>
   from the page heads to fully revert.
   ============================================================ */

/* ---- Self-hosted variable display face (SIL OFL), latin subset.
        Geometric sans that matches the EUCCDB "EUCCDB" wordmark. ---- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/montserrat-var.woff2) format('woff2');
}

:root {
  --brand-navy: #0A2240;
  --brand-sky:  #0099CC;
  --brand-sky-soft: #8FD4EF;
  --brand-tint: #F4F7FB;
  /* soft, navy-tinted elevation for floating surfaces (feature cards) */
  --brand-float:
     0 2px 4px rgba(10,34,64,.04),
     0 16px 32px -10px rgba(10,34,64,.16),
     0 34px 64px -28px rgba(10,34,64,.20);
  --brand-float-hover:
     0 6px 14px rgba(10,34,64,.07),
     0 26px 48px -12px rgba(10,34,64,.22),
     0 52px 92px -30px rgba(10,34,64,.26);
}

/* ============================================================
   DISPLAY TYPOGRAPHY
   Montserrat on headings + big display numbers; Inter stays for
   body copy and UI controls. This is the single strongest brand
   cue and it carries across every page. Weights are left to the
   existing rules (Montserrat is a 300..800 variable face, so any
   inherited weight renders correctly); we only set the family,
   a touch of tracking, and balanced wrapping.
   ============================================================ */
h1, h2, h3,
.hero-h, .hero-right-headline, .page-header-h, .hiw-hero-h, .hiw-h,
.why-h, .news-h, .platform-h2, .eu-heading, .cta-h2,
.selector-h, .selector-title, .attest-h, .attest-why-h, .section-h,
.plan-modal-title, .plan-name, .plan-title,
.card-h, .reg-h, .reg-title, .success-h, .success-title,
.profile-hero-name, .um-name, .drawer-title,
.school-card-name, .entry-title, .result-h,
.modal-title, .plan-modal-title, .sim-title, .wl-title {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Big display numbers read best in Montserrat with lined figures */
.metric-card-value, .metric-value, .stat-value, .intro-stat-num,
.fact-value, .um-stat-value, .kpi-value {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Eyebrows / kickers: Montserrat, tracked out */
.eyebrow, .hero-eyebrow, .page-header-eyebrow, .platform-eyebrow,
.cta-eyebrow, .why-label, .hero-right-tag, .fact-label, .section-eyebrow,
.hiw-eyebrow, .selector-eyebrow {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ============================================================
   REUSABLE BRAND HELPERS (opt-in; mapped onto specific elements
   per page). These do not change any element on their own.
   ============================================================ */

/* Floating feature card: rounded, soft navy-tinted shadow, lift */
.brand-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--brand-float);
  transition: transform .45s var(--md-ease-decel, cubic-bezier(.05,.7,.1,1)),
              box-shadow .45s ease;
}
.brand-card:hover { transform: translateY(-8px); box-shadow: var(--brand-float-hover); }

/* Lightly tinted section to float cards on */
.brand-tint-section { background: var(--brand-tint); }

/* Flat institutional band: solid navy + a single sky accent rule */
.brand-band { background: var(--brand-navy); border-bottom: 3px solid var(--brand-sky); }

/* Full-colour documentary photo, rounded */
.brand-photo { border-radius: 12px; }

/* ============================================================
   MOTION primitives (reused by page-level reveals). md3.css
   already honours prefers-reduced-motion by near-zeroing every
   transition/animation duration, so these stay a11y-safe.
   ============================================================ */
@keyframes brand-in   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes brand-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes brand-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes brand-draw { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .brand-card:hover { transform: none; }
}