/* ==========================================================================
   Career Gazers — platform stylesheet
   --------------------------------------------------------------------------
   Discovery trace (see docs/ARCHITECTURE for the full record):
     deliverable : multi-page static education platform (public + portals)
     audience    : Indian students 16-25, parents, counsellors, admin staff
     direction   : Dense / Professional  (education-tech portal density)
     display font: serif stack — editorial trust, not generic SaaS sans
     accent      : light mustard, rationed; blue is structural brand colour
     memory point: "verification-first" — every volatile fact carries a
                   provenance stamp instead of a confident fake number

   Tokens first. No raw hex below the :root block except inside SVG data URIs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — supplied by the client (white / professional blue / light mustard).
     The blue is deepened from the logo's vivid #0D7DC0 to a richer ink that
     clears 4.5:1 on white for body text; the logo blue is reserved for the
     mark itself, where contrast rules do not apply. */
  --color-primary:        #0b5aa8;
  --color-primary-dark:   #07407a;
  --color-primary-deep:   #06243f;
  --color-primary-soft:   #eef5fc;
  --color-primary-tint:   #f6fafd;
  --logo-blue:            #0d7dc0;

  --color-accent:         #f2c14e;   /* light mustard — highlights only */
  --color-accent-soft:    #fdf4e0;
  --color-accent-strong:  #d9a326;
  --gold:                 #c9a227;   /* rules and hairlines only */
  --gold-soft:            #f3e7c4;
  --gold-ink:             #8a6410;   /* small gold text, 5.4:1 on white */

  --color-background:     #f8f9fb;
  --color-surface:        #ffffff;
  --color-surface-sunken: #eff2f7;
  --color-ivory:          #fbfaf7;   /* warm panel for premium bands */
  --color-text:           #131c27;
  --color-muted:          #586574;
  --color-faint:          #8695a8;
  --color-border:         #e4e8ef;
  --color-border-strong:  #cfd6e0;
  --hairline:             rgba(9, 30, 66, 0.07);

  --color-success:        #157f4a;
  --color-success-soft:   #e8f5ee;
  --color-warning:        #8a5b0a;
  --color-warning-soft:   #fdf2da;
  --color-danger:         #c0392b;
  --color-danger-soft:    #fdecea;

  --on-primary:           #ffffff;
  --on-accent:            #16202c;
  --on-dark:          #ffffff;   /* text and hairlines on the navy bands */

  /* Type — no webfonts are shipped (strict CSP blocks remote fonts) */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(38px, 4.6vw, 60px);
  --fs-h1: clamp(30px, 3.2vw, 42px);
  --fs-h2: clamp(24px, 2.4vw, 32px);
  --fs-h3: 21px;
  --fs-h4: 17px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-micro: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --elev-ring: 0 0 0 1px var(--color-border);
  --elev-raised: 0 1px 1px rgba(19, 28, 39, 0.03), 0 4px 14px rgba(19, 28, 39, 0.05);
  --elev-lift: 0 2px 4px rgba(19, 28, 39, 0.04), 0 14px 34px rgba(19, 28, 39, 0.09);
  --elev-overlay: 0 18px 48px rgba(9, 30, 66, 0.18);
  --focus-ring: 0 0 0 3px rgba(11, 90, 168, 0.32);

  --motion-fast: 140ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Derived shades. Kept here so nothing below :root carries a raw hex. */
  --accent-border:    #efd9a4;
  --accent-ink:       #7a5504;
  --warning-border:   #eed9a7;
  --primary-border:   #c9def5;
  --success-border:   #bfe0cd;
  --success-ink:      #0d5130;
  --danger-border:    #f3c9c5;
  --danger-ink:       #7d221a;
  --whatsapp:         #1f8a4c;
  --whatsapp-dark:    #176d3c;
  --shimmer-mid:      #e4eaf2;
  --success-on-dark:  #7ddba7;
  --primary-on-dark:  #9cc9f2;
  --danger-on-dark:   #f5a9a1;

  --container: 1240px;
  --container-narrow: 860px;
  --gutter: 20px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* A [hidden] element must actually be hidden. Several components set an
   explicit display (grid/flex), and a class-level declaration beats the
   browser's default [hidden] rule — which silently broke every filter that
   hides result cards. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.15em; }
li + li { margin-top: 4px; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
::selection { background: var(--color-accent-soft); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--color-primary); color: var(--on-primary);
  padding: 10px 16px; border-radius: var(--radius-sm); transition: top var(--motion-fast) var(--ease-standard);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; margin: 0 0 var(--space-4); }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.18; letter-spacing: -0.014em; font-weight: 600; margin: 0 0 var(--space-4); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.32; letter-spacing: -0.008em; font-weight: 650; margin: 0 0 var(--space-3); }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.4; letter-spacing: -0.004em; font-weight: 650; margin: 0 0 var(--space-2); }
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.022em; font-weight: 600; margin: 0 0 var(--space-5); }
.lead { font-size: var(--fs-lead); line-height: 1.58; color: var(--color-muted); max-width: 66ch; margin: 0 0 var(--space-5); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--color-primary); margin: 0 0 var(--space-3); font-weight: 600;
}
.meta, .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); }
.prose ul, .prose ol { margin-bottom: var(--space-5); }
.prose li { margin-top: var(--space-2); }
.prose blockquote {
  margin: var(--space-6) 0; padding: var(--space-4) var(--space-6);
  background: var(--color-surface); border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(36px, 5vw, 64px); }
.section-tight { padding-block: clamp(24px, 3vw, 40px); }
.section-band { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster-sm { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sidebar-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.dash-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.spacer { flex: 1 1 auto; }
.rule { border: 0; border-top: 1px solid var(--color-border); margin: 0; }
.rule-strong { border: 0; border-top: 2px solid var(--color-text); margin: 0; }
.sticky-top { position: sticky; top: calc(var(--header-h) + 10px); }
@media (max-width: 1080px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-layout, .dash-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  :root { --gutter: 16px; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.55; pointer-events: none; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }

.btn-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--color-primary); padding-inline: 10px; }
.btn-ghost:hover { background: var(--color-primary-soft); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--color-muted); padding-inline: 10px; }
.btn-quiet:hover { color: var(--color-text); }

.btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--fs-xs); }
.btn-lg { min-height: 50px; padding: 13px 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { min-width: 42px; padding-inline: 10px; }
.btn-loading { position: relative; color: transparent !important; }
.btn-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: var(--on-dark); border-radius: 50%;
  animation: cg-spin 0.7s linear infinite;
}
@keyframes cg-spin { to { transform: rotate(360deg); } }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--motion-fast) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--color-primary-deep); color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-micro); letter-spacing: 0.01em;
}
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 34px; }
.utility-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.utility-bar .utility-note { display: inline-flex; align-items: center; gap: 7px; }
.dot-accent { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
@media (max-width: 760px) { .utility-bar .utility-links { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 60; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.012em; color: var(--color-primary); }
.brand-tag { font-size: 10px; letter-spacing: 0.055em; text-transform: uppercase; color: var(--color-muted); }

.main-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.main-nav > li { list-style: none; position: relative; }
.main-nav a.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 550; color: var(--color-text); text-decoration: none;
}
.main-nav a.nav-link:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); text-decoration: none; }
.main-nav a.nav-link[aria-current="page"] { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.main-nav .caret { width: 12px; height: 12px; opacity: 0.6; }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; z-index: 70;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--elev-overlay); padding: 8px; margin: 0; list-style: none;
  display: none;
}
.nav-menu.is-open { display: block; }
.nav-menu li + li { margin-top: 0; }
.nav-menu a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text); text-decoration: none; }
.nav-menu a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); text-decoration: none; }
.nav-menu .nav-menu-label {
  padding: 10px 10px 4px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint);
}

.header-search { flex: 1 1 200px; max-width: 340px; position: relative; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }

.nav-toggle {
  display: none; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); font-size: var(--fs-sm); font-weight: 600;
}
@media (max-width: 1140px) {
  .header-search { display: none; }
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .header-actions .btn-primary span.btn-label { display: none; }
  .brand-tag { display: none; }
}

/* Drawer (mobile nav + AI panel share the shell) */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(22, 32, 44, 0.42); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity var(--motion-base) var(--ease-standard), visibility var(--motion-base);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(410px, 92vw); z-index: 100;
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: var(--elev-overlay); transform: translateX(102%);
  transition: transform var(--motion-base) var(--ease-standard);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer-left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--color-border); transform: translateX(-102%); }
.drawer-left.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.drawer-body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1 1 auto; }
.drawer-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-background); }
.drawer-nav { list-style: none; margin: 0; padding: 0; }
.drawer-nav > li + li { margin-top: 2px; }
.drawer-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; color: var(--color-text); text-decoration: none; }
.drawer-nav a:hover { background: var(--color-primary-soft); text-decoration: none; }
.drawer-group-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); padding: var(--space-5) 12px var(--space-2); }

/* --------------------------------------------------------------------------
   7. Mobile bottom bar & floating actions
   -------------------------------------------------------------------------- */
.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-bar ul { display: flex; list-style: none; margin: 0; padding: 0; }
.mobile-bar li { flex: 1 1 0; }
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; font-size: 10.5px; letter-spacing: 0.02em; color: var(--color-muted); text-decoration: none;
}
.mobile-bar a svg { width: 20px; height: 20px; }
.mobile-bar a[aria-current="page"] { color: var(--color-primary); }
.fab-stack { position: fixed; right: 16px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
@media (max-width: 860px) {
  .mobile-bar { display: block; }
  .fab-stack { bottom: 78px; }
  body { padding-bottom: 62px; }
}
.fab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--elev-raised); text-decoration: none;
}
.fab:hover { text-decoration: none; border-color: var(--color-primary); color: var(--color-primary); }
.fab svg { width: 18px; height: 18px; }
.fab-whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--on-dark); }
.fab-whatsapp:hover { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); color: var(--on-dark); }
.fab-counselling { background: var(--color-primary); border-color: var(--color-primary); color: var(--on-primary); }
.fab-counselling:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--on-primary); }
/* AI entry point sits on its own side of the viewport so it never stacks on the
   counselling/WhatsApp pair, and lifts above the mobile action bar on phones. */
.fab-ai {
  position: fixed; left: 16px; bottom: 20px; right: auto; z-index: 70;
  background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-primary-dark);
}
.fab-ai:hover { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary-dark); }
@media (max-width: 860px) { .fab-ai { bottom: 78px; } }
/* The WhatsApp floating action shows the digits only where there is room. */
.fab-num { display: none; }
@media (min-width: 700px) { .fab-num { display: inline; } }

/* --------------------------------------------------------------------------
   8. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.card-pad-lg { padding: var(--space-6); }
.card-flat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card-hover { transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.card-hover:hover { border-color: var(--color-border-strong); box-shadow: var(--elev-raised); }
.card-sunken { background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.card-note { background: var(--color-accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.card-head h2, .card-head h3 { margin: 0; }
.card-foot { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* Institution / result card */
.rcard { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; }
.rcard + .rcard { margin-top: var(--space-4); }
.rcard:hover { border-color: var(--color-border-strong); box-shadow: var(--elev-raised); }
.rcard-media { border-radius: var(--radius-md); overflow: hidden; }
.rcard-body { min-width: 0; }
.rcard-title { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 4px; }
.rcard-title a { color: var(--color-text); text-decoration: none; }
.rcard-title a:hover { color: var(--color-primary); }
.rcard-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0; list-style: none; padding: 0; }
.rcard-facts li { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-xs); }
.rcard-facts dt, .rcard-facts .fact-k { color: var(--color-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.rcard-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
@media (max-width: 700px) {
  .rcard { grid-template-columns: 1fr; gap: var(--space-4); }
  .rcard-media { max-width: 190px; }
}

/* Compact card (courses, exams, scholarships, articles) */
.mini-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; }
.mini-card:hover { border-color: var(--color-border-strong); box-shadow: var(--elev-raised); }
.mini-card h3 { margin: 0; font-size: 17px; }
.mini-card h3 a { color: var(--color-text); text-decoration: none; }
.mini-card h3 a:hover { color: var(--color-primary); }
.mini-card .mini-meta { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); font-size: var(--fs-xs); color: var(--color-muted); }
.mini-card .mini-foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------------------
   9. Chips, pills, badges
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.015em; color: var(--color-muted);
}
.chip svg { width: 13px; height: 13px; }
.chip-accent { background: var(--color-accent-soft); border-color: var(--accent-border); color: var(--accent-ink); }
.chip-primary { background: var(--color-primary-soft); border-color: var(--primary-border); color: var(--color-primary-dark); }
.chip-success { background: var(--color-success-soft); border-color: var(--success-border); color: var(--color-success); }
.chip-warning { background: var(--color-warning-soft); border-color: var(--warning-border); color: var(--color-warning); }
.chip-danger { background: var(--color-danger-soft); border-color: var(--danger-border); color: var(--color-danger); }
.chip-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

.pill-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--color-surface-sunken); border-radius: var(--radius-pill); }
.pill-tabs button {
  border: 0; background: transparent; padding: 7px 16px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.pill-tabs button:hover { color: var(--color-text); }
.pill-tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--on-accent); }

.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-text);
}
.filter-chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--accent-ink); }
.filter-chip .x { color: var(--color-faint); }

/* --------------------------------------------------------------------------
   10. Provenance / verification components — the product's memory point
   -------------------------------------------------------------------------- */
.verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.045em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-sm); border: 1px dashed var(--color-border-strong);
  color: var(--color-muted); background: var(--color-surface);
}
.verified svg { width: 12px; height: 12px; }
.verified-ok { border-style: solid; border-color: var(--success-border); background: var(--color-success-soft); color: var(--color-success); }
.verified-pending { border-color: var(--warning-border); background: var(--color-warning-soft); color: var(--color-warning); }

.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.fact {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-surface);
}
.fact-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-faint); margin-bottom: 6px; }
.fact-v { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.fact-v.is-unverified { font-weight: 500; font-size: var(--fs-sm); color: var(--color-muted); font-style: italic; }
.fact-note { margin-top: 6px; font-size: 11.5px; color: var(--color-faint); font-family: var(--font-mono); }

.placeholder-note {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-background); font-size: var(--fs-sm); color: var(--color-muted);
}
.placeholder-note svg { width: 18px; height: 18px; flex: none; color: var(--color-faint); margin-top: 1px; }

/* --------------------------------------------------------------------------
   11. Hero + search
   -------------------------------------------------------------------------- */
.hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(34px, 5vw, 58px) clamp(30px, 4vw, 48px);
  position: relative; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--space-4); }
.hero .lead { margin-bottom: var(--space-6); }
.hero-highlight { background: linear-gradient(transparent 62%, var(--color-accent-soft) 62%); padding-inline: 2px; }

.search-panel {
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--elev-raised);
}
.search-panel .field-row { display: flex; gap: var(--space-3); align-items: stretch; }
@media (max-width: 620px) { .search-panel .field-row { flex-direction: column; } }
.search-field { position: relative; flex: 1 1 auto; }
.search-field svg.search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-faint); pointer-events: none; }
.search-field input { padding-left: 42px; min-height: 48px; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--elev-overlay); padding: 6px; margin: 0; list-style: none;
  max-height: 330px; overflow-y: auto;
}
.suggest li + li { margin-top: 0; }
.suggest button { width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: var(--radius-sm); display: flex; gap: 10px; align-items: center; }
.suggest button:hover, .suggest button.is-active { background: var(--color-primary-soft); }
.suggest .s-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-faint); margin-left: auto; flex: none; }
.suggest .s-empty { padding: 12px 10px; font-size: var(--fs-sm); color: var(--color-muted); }

.hero-quick { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-5) 0 0; }
.hero-quick a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); text-decoration: none;
}
.hero-quick a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.hero-quick svg { width: 15px; height: 15px; color: var(--color-primary); }

.hero-art { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); letter-spacing: 0.005em; }
.field-hint { font-size: var(--fs-micro); color: var(--color-muted); }
.field-req { color: var(--color-danger); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 13px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); font-size: 15px; color: var(--color-text);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--color-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6879' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22); }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-micro); color: var(--color-danger); font-weight: 600; }
.field-error:empty { display: none; }
.field-error svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); flex: none; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radio-card {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); font-size: var(--fs-sm); font-weight: 600;
}
.radio-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-dark); }
.radio-card input { accent-color: var(--color-primary); }
.form-status { border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--fs-sm); display: flex; gap: 10px; align-items: flex-start; }
.form-status svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form-status.is-error { background: var(--color-danger-soft); border: 1px solid var(--danger-border); color: var(--danger-ink); }
.form-status.is-success { background: var(--color-success-soft); border: 1px solid var(--success-border); color: var(--success-ink); }
.error-summary { border: 1px solid var(--danger-border); background: var(--color-danger-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.error-summary h2 { font-family: var(--font-body); font-size: var(--fs-h4); margin: 0 0 var(--space-2); color: var(--danger-ink); }
.error-summary ul { margin: 0; padding-left: 1.1em; }
.error-summary a { color: var(--danger-ink); }

/* --------------------------------------------------------------------------
   13. Filters & results
   -------------------------------------------------------------------------- */
.filter-rail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.filter-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.filter-rail-head h2 { margin: 0; font-family: var(--font-body); font-size: var(--fs-h4); }
.filter-group { border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { font-size: var(--fs-sm); font-weight: 650; margin: 0 0 var(--space-3); display: flex; align-items: center; justify-content: space-between; }
.filter-options { display: flex; flex-direction: column; gap: 7px; max-height: 218px; overflow-y: auto; }
.filter-options.cols { flex-direction: row; flex-wrap: wrap; gap: 6px; max-height: none; }
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.range-row .input { min-height: 38px; }

.results-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.results-count { font-size: var(--fs-sm); color: var(--color-muted); }
.applied-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.mobile-filter-btn { display: none; }
@media (max-width: 1080px) {
  .filter-rail { position: fixed; inset: 0; z-index: 100; border-radius: 0; overflow-y: auto; transform: translateY(104%); transition: transform var(--motion-base) var(--ease-standard); }
  .filter-rail.is-open { transform: translateY(0); }
  .mobile-filter-btn { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   14. Tabs / sticky sub-nav
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: thin; }
.tabs button, .tabs a {
  border: 0; background: transparent; padding: 11px 15px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.tabs button:hover, .tabs a:hover { color: var(--color-text); text-decoration: none; }
.tabs button[aria-selected="true"], .tabs a[aria-current="true"] { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
.tabpanel[hidden] { display: none; }

.subnav {
  position: sticky; top: var(--header-h); z-index: 50;
  background: color-mix(in oklab, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.subnav .container { display: flex; gap: 2px; overflow-x: auto; }
.subnav a { padding: 12px 13px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-muted); white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none; }
.subnav a:hover { color: var(--color-primary); text-decoration: none; }
.subnav a.is-active { color: var(--color-primary-dark); border-bottom-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 620px; }
table.data caption { text-align: left; padding: var(--space-4) var(--space-5) 0; color: var(--color-muted); font-size: var(--fs-xs); }
table.data th, table.data td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.data thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted); background: var(--color-surface-sunken); position: sticky; top: 0; z-index: 1;
}
table.data tbody tr:hover { background: var(--color-primary-tint); }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
table.data tfoot td { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); background: var(--color-surface-sunken); }
@media (max-width: 700px) {
  table.data.stack { min-width: 0; }
  table.data.stack thead { display: none; }
  table.data.stack tr { display: block; border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }
  table.data.stack tr:last-child { border-bottom: 0; }
  table.data.stack td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: 5px 0; }
  table.data.stack td::before { content: attr(data-th); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); flex: none; }
}

/* Compare table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-sm); }
table.compare th, table.compare td { padding: 13px 16px; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); vertical-align: top; }
table.compare th:last-child, table.compare td:last-child { border-right: 0; }
table.compare thead th { background: var(--color-surface-sunken); text-align: left; }
table.compare thead th.attr-col { width: 190px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
table.compare tbody th { text-align: left; font-weight: 600; background: var(--color-background); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
table.compare .col-head { display: flex; flex-direction: column; gap: 6px; }
table.compare .col-head strong { font-size: var(--fs-sm); }
table.compare tr.is-diff td { background: var(--color-accent-soft); }

/* --------------------------------------------------------------------------
   16. Timeline (application stages)
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 var(--space-6) 34px; }
.timeline li::before {
  content: ""; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 2px; background: var(--color-border);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot {
  position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--color-border-strong); background: var(--color-surface);
}
.timeline .is-done .tl-dot { border-color: var(--color-success); background: var(--color-success); }
.timeline .is-done::before { background: var(--success-border); }
.timeline .is-current .tl-dot { border-color: var(--color-primary); background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.timeline .tl-title { font-weight: 650; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline .tl-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-faint); margin-top: 3px; }
.timeline .tl-note { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 6px; }

.stage-track { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.stage-track li { font-size: 11px; font-family: var(--font-mono); padding: 4px 9px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-muted); }
.stage-track li.is-done { background: var(--color-success-soft); color: var(--color-success); }
.stage-track li.is-current { background: var(--color-accent); color: var(--on-accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   17. Dashboard
   -------------------------------------------------------------------------- */
.dash-side { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.dash-side h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); margin: var(--space-4) 0 var(--space-2); }
.dash-side h2:first-child { margin-top: 0; }
.dash-side ul { list-style: none; margin: 0; padding: 0; }
.dash-side a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text); text-decoration: none; }
.dash-side a:hover { background: var(--color-primary-soft); text-decoration: none; }
.dash-side a[aria-current="page"] { background: var(--color-primary); color: var(--on-primary); }
.dash-side a svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.dash-side a .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: var(--color-surface-sunken); color: var(--color-muted); padding: 1px 7px; border-radius: var(--radius-pill); }
.dash-side a[aria-current="page"] .count { background: rgba(255, 255, 255, 0.22); color: var(--on-dark); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.kpi .kpi-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.055em; text-transform: uppercase; color: var(--color-muted); }
.kpi .kpi-v { font-family: var(--font-display); font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 8px; font-weight: 600; }
.kpi .kpi-d { font-size: var(--fs-micro); color: var(--color-muted); margin-top: 6px; }
.kpi.is-highlight { background: var(--color-accent-soft); border-color: var(--accent-border); }

.trend { display: flex; align-items: flex-end; gap: 5px; height: 96px; margin-top: var(--space-4); }
.trend-bar { flex: 1 1 0; background: var(--color-primary-soft); border-radius: 3px 3px 0 0; min-height: 3px; position: relative; }
.trend-bar span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--color-faint); }
.trend-bar.is-peak { background: var(--color-accent); }

.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li + li { margin-top: var(--space-3); }
.bar-list .bl-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-xs); margin-bottom: 5px; }
.bar-list .bl-track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.bar-list .bl-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }
.bar-list li.is-accent .bl-fill { background: var(--color-accent); }

.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.funnel li { display: grid; grid-template-columns: 150px 1fr 62px; gap: var(--space-3); align-items: center; font-size: var(--fs-xs); }
.funnel .f-bar { height: 22px; border-radius: var(--radius-sm); background: var(--color-primary); opacity: 0.9; }
.funnel .f-val { font-family: var(--font-mono); text-align: right; color: var(--color-muted); }
@media (max-width: 620px) { .funnel li { grid-template-columns: 110px 1fr 52px; } }

.donut { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.donut svg { width: 132px; height: 132px; flex: none; }
.donut legend, .donut .legend { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.donut .legend li { display: flex; align-items: center; gap: 8px; }
.donut .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* --------------------------------------------------------------------------
   18. Empty / loading / error states
   -------------------------------------------------------------------------- */
.state {
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: var(--space-10) var(--space-6); text-align: center;
}
.state svg.state-icon { width: 40px; height: 40px; margin: 0 auto var(--space-4); color: var(--color-faint); }
.state h3 { margin-bottom: var(--space-2); }
.state p { color: var(--color-muted); max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-5); }
.state-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--fs-sm); border: 1px solid var(--color-border); background: var(--color-surface); }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert h3 { font-size: var(--fs-h4); margin: 0 0 4px; }
.alert p:last-child { margin-bottom: 0; }
.alert-info { background: var(--color-primary-tint); border-color: var(--primary-border); }
.alert-info svg { color: var(--color-primary); }
.alert-warn { background: var(--color-warning-soft); border-color: var(--warning-border); }
.alert-warn svg { color: var(--color-warning); }
.alert-danger { background: var(--color-danger-soft); border-color: var(--danger-border); }
.alert-danger svg { color: var(--color-danger); }
.alert-success { background: var(--color-success-soft); border-color: var(--success-border); }
.alert-success svg { color: var(--color-success); }

.skeleton { background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--shimmer-mid) 50%, var(--color-surface-sunken) 75%); background-size: 220% 100%; animation: cg-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); }
.skeleton-line { height: 12px; margin-bottom: 9px; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-block { height: 84px; border-radius: var(--radius-md); }
@keyframes cg-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
[aria-busy="true"] { cursor: progress; }

.toast-region { position: fixed; right: 18px; bottom: 92px; z-index: 130; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 36px)); }
.toast {
  display: flex; gap: 11px; align-items: flex-start; background: var(--color-text); color: var(--on-dark);
  border-radius: var(--radius-md); padding: 13px 15px; box-shadow: var(--elev-overlay); font-size: var(--fs-sm);
  animation: cg-toast-in var(--motion-base) var(--ease-standard);
}
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast a { color: var(--on-dark); text-decoration: underline; }
.toast-success svg { color: var(--success-on-dark); }
.toast-info svg { color: var(--primary-on-dark); }
.toast-error svg { color: var(--danger-on-dark); }
@keyframes cg-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   19. AI counsellor panel
   -------------------------------------------------------------------------- */
.ai-msg { display: flex; gap: 10px; margin-bottom: var(--space-4); }
.ai-msg .ai-avatar { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-primary-soft); display: grid; place-items: center; flex: none; }
.ai-msg .ai-avatar svg { width: 16px; height: 16px; color: var(--color-primary); }
.ai-bubble { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: 11px 13px; font-size: var(--fs-sm); max-width: 92%; }
.ai-msg.is-user { flex-direction: row-reverse; }
.ai-msg.is-user .ai-bubble { background: var(--color-primary); color: var(--on-primary); }
.ai-msg.is-user .ai-avatar { background: var(--color-primary); }
.ai-msg.is-user .ai-avatar svg { color: var(--on-primary); }
.ai-cite { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-border-strong); font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.ai-chips button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--fs-micro); font-weight: 600; }
.ai-chips button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-faint); animation: cg-blink 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: 0.2s; }
.ai-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes cg-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-primary-deep); color: rgba(255, 255, 255, 0.78); margin-top: var(--space-16); }
.site-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-top { padding-block: var(--space-12) var(--space-8); display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-top h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 var(--space-4); }
.footer-top ul { list-style: none; margin: 0; padding: 0; }
.footer-top li + li { margin-top: 9px; }
.footer-top ul a { font-size: var(--fs-sm); }
.footer-brand .brand-name { color: var(--on-dark); }
.footer-brand .brand-tag { color: rgba(255, 255, 255, 0.6); }
.footer-brand p { font-size: var(--fs-sm); max-width: 42ch; margin-top: var(--space-4); }
.footer-data { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: var(--space-5); font-size: var(--fs-micro); display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-micro); }
.footer-bottom ul { list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: 0; flex-wrap: wrap; }
.footer-bottom li + li { margin-top: 0; }

/* --------------------------------------------------------------------------
   21. Misc
   -------------------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--color-muted); margin-bottom: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--color-faint); }
.breadcrumb a { color: var(--color-muted); }

.page-head { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding-block: clamp(26px, 3.4vw, 44px); }
.page-head h1 { margin-bottom: var(--space-3); }
.page-head .lead { margin-bottom: 0; }

.notice-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--color-accent-soft); border: 1px solid var(--accent-border);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--fs-xs); color: var(--accent-ink);
}
.notice-strip svg { width: 16px; height: 16px; flex: none; }

.quote-block { border-left: 3px solid var(--color-accent); padding-left: var(--space-5); margin: var(--space-5) 0; }
.quote-block p { font-family: var(--font-display); font-size: 20px; line-height: 1.42; margin-bottom: var(--space-2); }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); }
.stat-strip .stat-v { font-family: var(--font-display); font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
.stat-strip .stat-k { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 4px; }
.stat-strip .stat-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); margin-top: 6px; }

.log-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: var(--space-6); padding: var(--space-5) 0; border-top: 1px solid var(--color-border); align-items: baseline; }
.log-row:last-child { border-bottom: 1px solid var(--color-border); }
@media (max-width: 700px) { .log-row { grid-template-columns: 1fr; gap: var(--space-2); } }

.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.accordion details + details { border-top: 1px solid var(--color-border); }
.accordion summary {
  cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 600; font-size: var(--fs-sm);
  list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-faint); font-size: 18px; }
.accordion details[open] summary::after { content: "–"; }
.accordion .acc-body { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-sm); color: var(--color-muted); }
.accordion .acc-body :last-child { margin-bottom: 0; }

.media-ph {
  background:
    linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-sunken));
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  display: grid; place-items: center; text-align: center; padding: var(--space-4);
  color: var(--color-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  aspect-ratio: 16 / 10;
}
.media-ph.tall { aspect-ratio: 4 / 5; }
.media-ph.wide { aspect-ratio: 16 / 7; }
.media-ph.hero-art-ph { border-radius: var(--radius-lg); }
.media-ph svg { width: 28px; height: 28px; margin-bottom: 8px; opacity: 0.7; }

.two-col-list { columns: 2; column-gap: var(--space-8); }
@media (max-width: 640px) { .two-col-list { columns: 1; } }

.icon-cell { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); flex: none; }
.icon-cell svg { width: 19px; height: 19px; }
.icon-cell.accent { background: var(--color-accent-soft); color: var(--accent-ink); }

@media print {
  .site-header, .mobile-bar, .fab-stack, .drawer, .drawer-backdrop, .utility-bar, .toast-region { display: none !important; }
  body { background: var(--color-surface); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==========================================================================
   22. Premium layer
   --------------------------------------------------------------------------
   Read as: more air, finer rules, deeper colour where it carries meaning, and
   one restrained metallic accent. Nothing here changes the information
   architecture — it changes the bearing.
   ========================================================================== */

/* --- 22.1 Surface depth -------------------------------------------------- */
body {
  background-image: radial-gradient(1200px 520px at 50% -220px, var(--color-primary-tint), transparent 70%);
  background-repeat: no-repeat;
}

.rule-gold { border: 0; border-top: 1px solid var(--gold); opacity: 0.5; margin: 0; }

.kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-ink); font-weight: 600;
  margin: 0 0 var(--space-4);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold); flex: none; }
.eyebrow { color: var(--gold-ink); letter-spacing: 0.14em; }
.eyebrow::after { content: ""; display: block; width: 28px; height: 1px; background: var(--gold); margin-top: 8px; opacity: 0.7; }

/* Section headings get a hairline and room to breathe. */
.section { padding-block: clamp(44px, 6vw, 84px); }
.section > .container > .split > div > h2,
.section > .container > .split > div > .h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.02em;
}

/* --- 22.2 Utility bar and header ---------------------------------------- */
.utility-bar { background: var(--color-primary-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.utility-bar .container { min-height: 36px; letter-spacing: 0.02em; }
.utility-bar .dot-accent { background: var(--gold); }

.site-header { box-shadow: 0 1px 0 var(--hairline); transition: box-shadow var(--motion-base) var(--ease-standard); }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--hairline), 0 10px 30px rgba(9, 30, 66, 0.08); }
.site-header .container { min-height: var(--header-h); gap: var(--space-5); }

.brand-logo { display: block; height: 48px; width: auto; }
@media (max-width: 600px) { .brand-logo { height: 40px; } }

.main-nav a.nav-link { font-size: 13px; font-weight: 550; letter-spacing: 0.005em; padding: 10px 9px; white-space: nowrap; }
.main-nav a.nav-link[aria-current="page"] { background: transparent; color: var(--color-primary-dark); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.main-nav a.nav-link:hover { background: var(--color-primary-tint); }

.nav-menu {
  border-top: 2px solid var(--gold);
  padding: 10px; box-shadow: var(--elev-lift);
}

.header-search .input { background: var(--color-surface-sunken); border-color: transparent; min-height: 40px; }
.header-search .input:focus { background: var(--color-surface); border-color: var(--color-primary); }

/* --- 22.3 Hero ----------------------------------------------------------- */
.hero {
  padding-block: clamp(48px, 6vw, 84px) clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--color-border);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(60% 70% at 78% 30%, rgba(0, 0, 0, 0.55), transparent 75%);
  mask-image: radial-gradient(60% 70% at 78% 30%, rgba(0, 0, 0, 0.55), transparent 75%);
}
.hero > .container { position: relative; z-index: 1; }
.hero .display { font-size: clamp(40px, 5.1vw, 66px); letter-spacing: -0.028em; line-height: 1.03; }
.hero-highlight { background: linear-gradient(transparent 58%, var(--gold-soft) 58%); }

.search-panel {
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-lift);
  padding: var(--space-6);
}
.search-panel .field-row .input { min-height: 52px; }

.hero-quick a { border-color: var(--color-border); }
.hero-quick a:hover { border-color: var(--gold); background: var(--color-accent-soft); color: var(--gold-ink); }

/* --- 22.4 Cards ---------------------------------------------------------- */
.card { box-shadow: var(--elev-raised); }
.mini-card, .rcard { box-shadow: none; transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.mini-card::after, .rcard::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-base) var(--ease-standard);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.mini-card:hover, .rcard:hover { box-shadow: var(--elev-lift); transform: translateY(-2px); }
.mini-card:hover::after, .rcard:hover::after { transform: scaleX(1); }
.rcard-body { position: relative; }

.card-note { background: var(--color-accent-soft); border-color: var(--accent-border); }

/* --- 22.5 Buttons -------------------------------------------------------- */
.btn { letter-spacing: 0.012em; }
.btn-primary {
  background: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(9, 30, 66, 0.16);
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-gold {
  background: var(--color-accent); border-color: var(--gold); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(9, 30, 66, 0.12);
}
.btn-gold:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.34); color: var(--on-dark); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }

/* --- 22.6 Dark band ------------------------------------------------------ */
.band-dark {
  background: var(--color-primary-deep);
  color: rgba(255, 255, 255, 0.82);
  position: relative; overflow: hidden;
}
.band-dark::before {
  content: ""; position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-dark > .container { position: relative; z-index: 1; }
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark .lead, .band-dark p { color: rgba(255, 255, 255, 0.76); }
.band-dark a { color: rgba(255, 255, 255, 0.92); }
.band-dark .kicker, .band-dark .eyebrow { color: var(--gold); }
.band-dark .card, .band-dark .mini-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
}
.band-dark .card h3, .band-dark .mini-card h3 { color: var(--on-dark); }
.band-dark .chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.82); }
.band-dark .icon-cell { background: rgba(255, 255, 255, 0.1); color: var(--gold); }
.band-dark .stat-v { color: var(--on-dark); }
.band-dark .stat-k { color: rgba(255, 255, 255, 0.66); }

/* Trust row */
.trust-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-5); padding-top: var(--space-6);
  border-top: 1px solid var(--gold); margin-top: var(--space-8);
}
.trust-row > div { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-xs); color: var(--color-muted); }
.trust-row svg { width: 16px; height: 16px; color: var(--gold-ink); flex: none; margin-top: 1px; }
.band-dark .trust-row { border-top-color: rgba(255, 255, 255, 0.18); }
.band-dark .trust-row > div { color: rgba(255, 255, 255, 0.74); }
.band-dark .trust-row svg { color: var(--gold); }

/* --- 22.7 Hero media ----------------------------------------------------- */
.hero-art .media-ph { border-radius: var(--radius-md); aspect-ratio: 4 / 3.6; }
.hero-stats { border-top: 1px solid var(--gold); border-radius: 0; box-shadow: none; background: transparent; padding: var(--space-5) 0 0; }
.hero-stats .fact-k { color: var(--gold-ink); }
.hero-stats .fact-v { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }

/* --- 22.8 Footer --------------------------------------------------------- */
.site-footer { background: var(--color-primary-deep); margin-top: var(--space-16); position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gold); opacity: 0.85; }
.footer-top { padding-block: var(--space-16) var(--space-10); gap: var(--space-10); }
.footer-top h2 { color: var(--gold); letter-spacing: 0.12em; }
.footer-top ul a { font-size: 14px; line-height: 1.5; }
.logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); border-radius: var(--radius-md); padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); margin-bottom: var(--space-5);
}
.logo-plate img { height: 42px; width: auto; display: block; }
.footer-brand p { color: rgba(255, 255, 255, 0.72); }
.footer-brand ul li { display: flex; gap: 9px; align-items: flex-start; color: rgba(255, 255, 255, 0.8); font-size: 14px; }
.footer-brand ul svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--gold); }
.footer-data { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-data strong { color: var(--gold); }

/* --- 22.9 Detail-page polish -------------------------------------------- */
.page-head { padding-block: clamp(32px, 4vw, 56px); background: var(--color-surface); position: relative; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); opacity: 0.35; }

.subnav { box-shadow: 0 6px 18px rgba(9, 30, 66, 0.04); }
.subnav a.is-active { border-bottom-color: var(--gold); }

.kpi { box-shadow: var(--elev-raised); }
.kpi.is-highlight { background: var(--color-accent-soft); border-color: var(--accent-border); }
.fact { background: var(--color-ivory); }
.fact-k { color: var(--gold-ink); opacity: 0.8; }

.table-wrap { box-shadow: var(--elev-raised); }
table.data thead th { background: var(--color-ivory); color: var(--gold-ink); }
table.compare thead th.attr-col, table.compare tbody th { background: var(--color-ivory); color: var(--gold-ink); }

.fab-ai, .fab { transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.fab:hover { box-shadow: var(--elev-lift); transform: translateY(-1px); }
.fab-whatsapp { box-shadow: 0 8px 22px rgba(31, 138, 76, 0.28); }

.mobile-bar { box-shadow: 0 -6px 20px rgba(9, 30, 66, 0.06); }

/* Toast and drawer sit above the gold rule layer without inheriting it. */
.drawer { box-shadow: -18px 0 48px rgba(9, 30, 66, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .mini-card:hover, .rcard:hover, .fab:hover { transform: none; }
}

/* ==========================================================================
   23. Motion layer
   --------------------------------------------------------------------------
   Motion rules applied here, deliberately:
     * one choreographed hero entrance (staggered, one-shot, ~700 ms total);
     * progress feedback while scrolling and while filtering;
     * state confirmation on hover, press, disclosure and menu opening;
     * nothing loops except the loading shimmer, which stops when content lands.
   No blanket scroll-fade on every section — that is the pattern the design
   rules flag. Elements only hide while JS is present and able to reveal them,
   so a failed script degrades to a fully visible page.
   ========================================================================== */

:root {
  --motion-instant: 90ms;
  --motion-enter: 420ms;
  --motion-reveal: 460ms;
}

/* In-page anchors should land below the sticky header and sub-navigation
   rather than underneath them. */
html { scroll-padding-top: calc(var(--header-h) + 72px); }

@keyframes cg-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cg-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- 23.1 Reading progress ---------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  pointer-events: none; background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: var(--gold);
  transition: width 90ms linear;
}

/* --- 23.2 Hero entrance (the one choreographed moment) ------------------ */
.hero-stagger > * { animation: cg-rise var(--motion-enter) var(--ease-standard) both; }
.hero-stagger > *:nth-child(1) { animation-delay: 0ms; }
.hero-stagger > *:nth-child(2) { animation-delay: 55ms; }
.hero-stagger > *:nth-child(3) { animation-delay: 110ms; }
.hero-stagger > *:nth-child(4) { animation-delay: 165ms; }
.hero-stagger > *:nth-child(5) { animation-delay: 220ms; }
.hero-stagger > *:nth-child(6) { animation-delay: 275ms; }
.hero-art { animation: cg-rise 520ms var(--ease-standard) 120ms both; }

/* --- 23.3 Reveal on first entry (bounded, not per-section) -------------- */
html.cg-motion :is(.reveal, .kpi-row, .stat-strip) { opacity: 0; transform: translateY(14px); }
html.cg-motion :is(.reveal, .kpi-row, .stat-strip).is-in {
  opacity: 1; transform: none;
  transition: opacity var(--motion-reveal) var(--ease-standard),
              transform var(--motion-reveal) var(--ease-standard);
}
/* A hairline that draws itself in when its block arrives. */
html.cg-motion .reveal .kicker::before { transform: scaleX(0); transform-origin: left; }
html.cg-motion .reveal.is-in .kicker::before {
  transform: scaleX(1);
  transition: transform 520ms var(--ease-standard) 120ms;
}

/* --- 23.4 State confirmation -------------------------------------------- */
.btn:active { transition-duration: 60ms; }

.icon-cell svg { transition: transform 180ms var(--ease-standard); }
.mini-card:hover .icon-cell svg,
.rcard:hover .icon-cell svg { transform: translateY(-1px); }

.nav-menu {
  display: block; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard),
              visibility 160ms var(--ease-standard);
}
.nav-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.suggest { animation: cg-fade 140ms var(--ease-standard) both; }

.subnav a { transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }

.accordion details[open] .acc-body { animation: cg-fade 220ms var(--ease-standard) both; }
.accordion summary { transition: background var(--motion-fast) var(--ease-standard); }
.accordion summary:hover { background: var(--color-primary-tint); }

/* Filtering must feel acknowledged, not silent. */
[data-results].is-updating, [data-finder-results].is-updating { opacity: 0.55; transition: opacity 90ms linear; }

.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin-right: 7px;
}

/* --- 23.5 Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.cg-motion :is(.reveal, .kpi-row, .stat-strip) { opacity: 1; transform: none; }
  html.cg-motion .reveal .kicker::before { transform: scaleX(1); }
  .hero-stagger > *, .hero-art { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  .icon-cell svg, .mini-card:hover .icon-cell svg, .rcard:hover .icon-cell svg { transform: none; }
  .nav-menu { transform: none; }
}

/* ==========================================================================
   24. Campus gallery carousel
   --------------------------------------------------------------------------
   A CSS scroll-snap carousel first: without script it is still a swipeable,
   fully readable row of slides. The script layer adds autoplay, prev/next and
   the counter.
   ========================================================================== */
.campus-carousel { display: flex; flex-direction: column; gap: var(--space-4); }
.cc-topbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.cc-status {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted); margin: 0;
}
.cc-controls { display: flex; align-items: center; gap: 6px; }
.cc-controls .btn-icon { min-width: 38px; min-height: 38px; }

.cc-track {
  list-style: none; margin: 0; padding: 0 0 8px;
  display: flex; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.cc-track:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 5px; border-radius: var(--radius-md); }
.cc-slide { flex: 0 0 calc((100% - var(--space-4) * 2) / 3); scroll-snap-align: start; }
@media (max-width: 1080px) { .cc-slide { flex-basis: calc((100% - var(--space-4)) / 2); } }
@media (max-width: 700px) { .cc-slide { flex-basis: 100%; } }

.cc-figure {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.cc-slide:hover .cc-figure { border-color: var(--color-border-strong); box-shadow: var(--elev-raised); }
.cc-frame { position: relative; aspect-ratio: 16 / 10; background: var(--color-surface-sunken); }
.cc-frame img { width: 100%; height: 100%; object-fit: cover; }
.cc-ph {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-4);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--hairline) 9px 10px);
}
.cc-mono {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(34px, 4vw, 54px); color: var(--color-primary); opacity: 0.26;
}
.cc-ph-tag {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px 9px;
}
.cc-caption { padding: var(--space-5); display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.cc-name { font-size: 17px; margin: 0; letter-spacing: -0.008em; }
.cc-city { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.cc-chips { margin: 0; }
.cc-pending, .cc-credit { font-size: 11.5px; color: var(--color-muted); margin: 0; display: flex; gap: 7px; align-items: flex-start; line-height: 1.5; }
.cc-pending svg, .cc-credit svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.cc-credit svg { color: var(--color-success); }
.cc-pending code { font-family: var(--font-mono); font-size: 10.5px; background: var(--color-surface-sunken); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.cc-caption .link-arrow { margin-top: auto; padding-top: var(--space-2); }
.cc-progressbar { height: 2px; background: var(--color-surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.cc-progressbar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 200ms var(--ease-standard); }

/* Hero variant: one slide at a time, tighter. */
.is-compact .cc-track { gap: var(--space-3); }
.is-compact .cc-slide { flex-basis: 100%; }
.is-compact .cc-frame { aspect-ratio: 16 / 9; }
.is-compact .cc-name { font-size: 16px; }
.is-compact .cc-caption { padding: var(--space-4); }
.is-compact .cc-pending { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-track { scroll-behavior: auto; }
  .cc-progressbar span { transition: none; }
}

/* When the hero media slot holds the carousel, the frame must not clip it. */
.hero-art-plain { border: 0; border-radius: 0; overflow: visible; }

/* --- 25.6 Directory search ---------------------------------------------- */
.dir-search { flex: 1 1 260px; max-width: 400px; text-align: left; }
.dir-search .input { min-height: 42px; }
.results-bar { align-items: center; }
.results-bar .dir-search { margin-right: auto; }
.results-bar .results-count { flex: 0 1 auto; }
[data-directory-more] { margin: calc(var(--space-3) * -1) 0 var(--space-4); }
[data-directory-more] a { font-weight: 600; }
@media (max-width: 700px) {
  .results-bar { align-items: stretch; }
  .dir-search { max-width: none; }
}
/* --- 25.5 Campus grid --------------------------------------------------- */
.campus-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--space-5);
}
.cg-card figure {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.cg-card:hover figure { border-color: var(--color-border-strong); box-shadow: var(--elev-lift); }
.cg-frame {
  display: block; position: relative; aspect-ratio: 16 / 10;
  background: var(--color-surface-sunken); overflow: hidden;
}
.cg-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 520ms var(--ease-standard);
}
.cg-card:hover .cg-frame img { transform: scale(1.035); }
.cg-frame .cg-ph { position: absolute; inset: 0; }
.cg-frame svg { display: block; width: 100%; height: 100%; }
.cg-card figcaption {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto;
}
.cg-card h3 { font-size: 15.5px; margin: 0; letter-spacing: -0.006em; }
.cg-city { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.cg-card .link-arrow { margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .cg-card:hover .cg-frame img { transform: none; } }

/* ==========================================================================
   25. Header line, campus artwork and search
   ========================================================================== */

/* --- 25.1 Keep the primary navigation on one line ----------------------- */
.main-nav > li { flex: none; }
.brand { min-width: 0; }
.header-search { max-width: 210px; }
.header-search .input { min-height: 38px; font-size: 14px; }
/* Between the drawer breakpoint and a comfortable desktop width, the search
   box is the first thing to go so Contact never wraps to a second line. */
/* Between the drawer breakpoint and a comfortable desktop width the search box
   would push Contact onto a second line. Instead of hiding it, it becomes a
   toggleable bar that drops below the header — search stays reachable at every
   width. */
.site-header .container { position: relative; }
.header-search-toggle { display: none; }
@media (max-width: 1320px) {
  .header-search {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    max-width: none; padding: var(--space-4) var(--gutter);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--elev-lift); z-index: 55;
  }
  .header-search.is-open { display: block; }
  .header-search-toggle { display: inline-flex; }
}

/* --- 25.2 Campus artwork ------------------------------------------------ */
.cc-frame { display: block; }
.cc-art-svg { display: block; width: 100%; height: 100%; }
.cc-badge {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-muted); background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px 9px;
}
.cc-badge-ok { color: var(--color-success); border-color: var(--success-border); background: color-mix(in oklab, var(--color-surface) 88%, transparent); }
.cc-slide:hover .cc-art-svg { transform: scale(1.015); }
.cc-art-svg { transition: transform 500ms var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { .cc-slide:hover .cc-art-svg { transform: none; } }

/* --- 25.3 Autocomplete -------------------------------------------------- */
.suggest { padding: 7px; max-height: 428px; }
.suggest .s-group {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-ink); padding: 10px 12px 4px; margin-top: 2px;
  border-top: 1px solid var(--color-border);
}
.suggest .s-group:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.suggest mark { background: var(--color-accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.search-hit {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text);
}
.search-hit:hover, .search-hit:focus-visible { background: var(--color-primary-tint); text-decoration: none; }
.search-hit-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.search-hit-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
.search-hit-meta { font-size: var(--fs-micro); color: var(--color-muted); }
.search-hit-side { display: flex; align-items: center; gap: 8px; flex: none; }
.search-hit-side .s-kind { margin-left: 0; }
.suggest .s-all {
  border-top: 1px solid var(--color-border); margin-top: 5px; padding-top: 5px;
}
.suggest .s-all a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 650;
  color: var(--color-primary); text-decoration: none;
}
.suggest .s-all a:hover { background: var(--color-primary-soft); }
.suggest .s-all svg { width: 14px; height: 14px; }
.suggest .s-hint {
  padding: 8px 12px 2px; font-size: var(--fs-micro); color: var(--color-muted);
}
.suggest .s-hint strong { color: var(--gold-ink); font-weight: 650; }
.suggest .s-empty a { color: var(--color-primary); }

/* --- 25.4 Search results page ------------------------------------------- */
.search-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  flex-wrap: wrap; margin-bottom: var(--space-6);
}
.search-group + .search-group { margin-top: var(--space-8); }
.search-group-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.search-group-list { display: flex; flex-direction: column; gap: 2px; }
.search-group-list .search-hit { border: 1px solid transparent; }
.search-group-list .search-hit:hover { border-color: var(--color-border); background: var(--color-surface); box-shadow: var(--elev-raised); }
.search-group-list .search-hit .search-hit-title { font-size: 16px; }
.search-group-list .search-hit.is-ext { border-left: 2px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.search-group-list .search-hit.is-ext .search-hit-title { font-weight: 550; }

@media (max-width: 700px) {
  .search-hit { flex-direction: column; align-items: flex-start; gap: 8px; }
  .search-hit-side { flex-wrap: wrap; }
  .cc-badge { left: 8px; bottom: 8px; }
}