/* ============================================================
   EUPDB, 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 site typeface (IBM Plex Sans)
   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 EUPDB "EUPDB" wordmark. ---- */
:root {
  --brand-navy: #0B1622;
  --brand-sky:  #B8924A;
  --brand-sky-soft: #E8DBB8;
  --brand-tint: #EEF0F2;
  /* 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
   IBM Plex Sans on headings + big display numbers, the same face
   as body copy and UI controls. Hierarchy comes from weight, size
   and colour. Weights are left to the existing rules, 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,
.entry-title, .result-h,
.modal-title, .plan-modal-title, .sim-title, .wl-title {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

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

/* Eyebrows / kickers: 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: 'IBM Plex Sans', 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; }
}