/* ==========================================================================
   Academic Horizone — Design System Stylesheet
   Shared across every page. Do not duplicate tokens per-page.
   ========================================================================== */

:root{
  --ink:#0B1F3A;
  --ink-soft:#132B4F;
  --paper:#FBFAF7;
  /* Same hue/saturation as --gold, darkened for WCAG AA text contrast (4.57:1 on
     --paper, vs 2.96:1 for --gold). Use for gold TEXT on light backgrounds only —
     --gold itself stays unchanged for buttons/borders/icons where it's paired
     with dark ink text or sits on the dark navy hero (both already pass AA). */
  --gold-text:#8B6E41;
  --paper-alt:#F6F4EE;
  --gold:#B08D57;
  --gold-soft:#D8C4A0;
  --slate:#5C6B7A;
  --sage:#7A8B6F;
  --line:#E3DFD4;
  --radius-sm:8px;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(11,31,58,.04);
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --container:1160px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:40px; --space-6:46px; --space-7:56px; --space-8:72px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
@media(min-width:640px){ .container{ padding:0 32px; } }

/* Skip link — accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:0 0 8px 0;
  font-size:14px; z-index:100;
}
.skip-link:focus{ left:0; top:0; }

/* Focus states — visible everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ===== Type utilities ===== */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
.kicker{ display:flex; align-items:center; gap:10px; margin-bottom:var(--space-2); }
.kicker::before{ content:""; width:22px; height:1px; background:var(--gold); flex-shrink:0; }
.kicker span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); }

.section-heading{ font-size:clamp(26px,4vw,32px); max-width:620px; }
.section-lead{ color:var(--slate); max-width:560px; margin-top:12px; font-size:15px; }

/* Wordmark */
.wordmark{ font-family:var(--font-display); font-size:20px; color:var(--ink); }
.site-logo-link{ display:inline-flex; align-items:center; }
.site-logo{ height:44px; width:auto; display:block; }
@media(max-width:600px){ .site-logo{ height:36px; } }
.wordmark .horizone{ font-style:italic; position:relative; }
.wordmark .horizone::after{
  content:""; position:absolute; left:0; right:6%; bottom:-4px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.wordmark.on-dark, .wordmark.on-dark .horizone{ color:var(--paper); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-weight:600; font-size:13.5px; padding:13px 24px; border-radius:999px; border:none;
  cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--ink-soft); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:#9c7a49; }
.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline.on-dark{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-outline.on-dark:hover{ background:rgba(255,255,255,.08); }

/* ===== Navigation ===== */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .inner{
  display:flex; align-items:center; justify-content:space-between; padding:16px 0;
}
.nav-links{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  background:none; border:1px solid var(--line); border-radius:8px; padding:9px 11px; cursor:pointer;
}
.nav-toggle .bar{ display:block; width:18px; height:1.5px; background:var(--ink); margin:3.5px 0; }

@media(min-width:900px){
  .nav-links{
    display:flex; gap:28px; font-size:13.5px; color:var(--slate); list-style:none; margin:0; padding:0;
  }
  .nav-links a{ transition:color .15s ease; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a[aria-current="page"]{ color:var(--gold-text); font-weight:600; }
  .nav-toggle{ display:none; }
}

.mobile-panel{
  display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--paper);
}
.mobile-panel.open{ display:flex; }
.mobile-panel a{
  padding:16px 24px; border-bottom:1px solid var(--line); font-size:15px; display:flex; justify-content:space-between;
}
.mobile-panel a.whatsapp{ color:var(--gold-text); font-weight:600; }
.mobile-panel a[aria-current="page"]{ color:var(--gold-text); font-weight:600; }
@media(min-width:900px){ .mobile-panel{ display:none !important; } }

/* ===== Hero ===== */
.hero{
  background:var(--ink); color:var(--paper); padding:var(--space-7) 0 var(--space-6);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero .grid{ display:grid; gap:48px; align-items:center; }
.hero h1{
  font-size:clamp(32px,5.2vw,50px); font-weight:400; line-height:1.12; color:var(--paper); margin-top:16px;
}
.hero h1 em{ font-style:italic; color:var(--gold-soft); }
.hero .sub{ color:#B8C2CE; font-size:16px; max-width:460px; margin-top:20px; }
.hero .ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

.margin-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(216,196,160,.25); border-radius:var(--radius);
  padding:28px;
}
.margin-card .draft{ font-family:var(--font-display); font-style:italic; font-size:16px; color:#E8ECF1; line-height:1.7; }
.margin-card .draft mark{ background:none; color:inherit; background-image:linear-gradient(rgba(216,196,160,.3), rgba(216,196,160,.3)); background-repeat:no-repeat; background-size:100% 40%; background-position:0 88%; }
.margin-card .marker{
  margin-top:18px; padding-top:14px; border-top:1px dashed rgba(216,196,160,.3);
  font-family:var(--font-mono); font-size:12px; color:var(--gold-soft);
}

@media(min-width:900px){
  .hero .grid{ grid-template-columns:1.1fr .9fr; }
}

/* ===== Trust bar ===== */
.trust{ padding:30px 0; border-bottom:1px solid var(--line); }
.trust .row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:center; }
.pillar .k{ font-family:var(--font-display); font-size:15px; }
.pillar .v{ font-size:12px; color:var(--slate); margin-top:4px; }
@media(min-width:760px){ .trust .row{ grid-template-columns:repeat(4,1fr); } }

/* ===== Generic block ===== */
.block{ padding:var(--space-7) 0; }
.block.alt{ background:var(--paper-alt); }

/* Story */
.story-grid{ display:grid; gap:40px; align-items:center; margin-top:26px; }
.story-visual{
  background:linear-gradient(160deg, var(--ink), var(--ink-soft)); border-radius:var(--radius);
  aspect-ratio:4/3; min-height:220px; position:relative; overflow:hidden;
}
.story-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-visual::after{
  content:""; position:absolute; left:10%; right:10%; bottom:32%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.story-grid p{ font-size:15px; color:var(--slate); margin-bottom:14px; }
@media(min-width:860px){ .story-grid{ grid-template-columns:1fr 1fr; gap:60px; } }

/* Cards grid (services) */
.card-grid{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:640px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display:block; cursor:pointer;
}
.svc-card:hover{ box-shadow:0 8px 24px rgba(11,31,58,.06); transform:translateY(-2px); border-color:var(--gold-soft); }
.svc-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.svc-icon{
  width:40px; height:40px; border-radius:10px; background:rgba(176,141,87,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.svc-card h3{ font-size:17px; margin-bottom:6px; }
.svc-card p{ font-size:13.5px; color:var(--slate); }
.svc-card-cta{
  display:block; margin-top:14px; font-family:var(--font-mono); font-size:11.5px;
  color:var(--gold-text); font-weight:600;
}

/* Flash highlight when a service detail is auto-expanded via link */
.faq-item.flash-highlight{ background:rgba(176,141,87,.06); border-radius:10px; }

/* Unified SVG icon system — consistent stroke, size, and colour across every icon on the site */
.icon-svg{
  width:20px; height:20px; fill:none; stroke:var(--gold); stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.outcome-card .icon .icon-svg{ stroke:var(--sage); width:18px; height:18px; }

/* Subject tags */
.subject-cloud{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.subject-tag{
  font-family:var(--font-mono); font-size:12px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--slate); transition:border-color .15s ease, color .15s ease;
}
.subject-tag:hover, .subject-tag.on{ border-color:var(--gold); color:var(--gold-text); }

/* Advisors */
.adv-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; }
.adv-photo{
  width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(160deg, var(--gold-soft), var(--gold));
}
.adv-card h3{ font-size:15px; }
.adv-card .role{ font-size:12px; color:var(--gold-text); margin-top:2px; }
.adv-card .d{ font-size:12.5px; color:var(--slate); margin-top:8px; }

/* Testimonial */
.quote-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,36px); margin-top:26px; }
.quote-card .q{ font-family:var(--font-display); font-style:italic; font-size:clamp(18px,2.4vw,22px); line-height:1.5; max-width:720px; }
.quote-card .meta{ margin-top:18px; font-size:12.5px; color:var(--slate); font-family:var(--font-mono); }

/* Learning hub */
.hub-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s ease; }
.hub-card:hover{ box-shadow:0 8px 24px rgba(11,31,58,.06); }
.hub-card .img{ aspect-ratio:16/9; height:120px; background:linear-gradient(135deg, #EDE7D8, var(--paper-alt)); overflow:hidden; }
.hub-card .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hub-card .body{ padding:20px; }
.hub-card .cat{ font-family:var(--font-mono); font-size:10px; color:var(--gold-text); text-transform:uppercase; letter-spacing:.06em; }
.hub-card h3{ font-size:15px; margin-top:8px; }
.hub-card .meta{ font-size:11.5px; color:var(--slate); margin-top:10px; }

/* FAQ accordion */
.faq-list{ margin-top:26px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:none; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 4px; font-size:14.5px; font-weight:500; color:var(--ink);
}
.faq-q .plus{ color:var(--gold-text); font-family:var(--font-mono); font-size:18px; flex-shrink:0; transition:transform .2s ease; }
.faq-q[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p{ padding:0 4px 20px; font-size:14px; color:var(--slate); max-width:640px; }

/* Book Now button — service detail sections */
.svc-book-btn{
  display:inline-flex; margin:0 4px 20px; padding:10px 20px; font-size:13px;
}
@media(max-width:480px){
  .svc-book-btn{ width:calc(100% - 8px); justify-content:center; }
}

/* Final CTA */
.final-cta{ background:var(--ink); color:var(--paper); padding:var(--space-7) 0; text-align:center; }
.final-cta h2{ color:var(--paper); font-size:clamp(26px,4.5vw,36px); max-width:600px; margin:0 auto; }
.final-cta p{ color:#B8C2CE; margin-top:14px; }
.final-cta .ctas{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

/* Footer */
.site-footer{ background:var(--paper-alt); padding:42px 0 22px; }
.foot-grid{ display:grid; gap:36px; }
.foot-grid h2.wordmark{ font-size:19px; }
.foot-about{ font-size:13px; color:var(--slate); margin-top:14px; max-width:240px; }
.foot-col h4{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin-bottom:14px; }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--slate); list-style:none; }
.foot-col ul a:hover{ color:var(--ink); }
.foot-bottom{
  margin-top:32px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--slate);
}
@media(min-width:640px){ .foot-bottom{ flex-direction:row; justify-content:space-between; } }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }

/* Sticky WhatsApp — mobile */
.sticky-whatsapp{
  position:fixed; right:16px; bottom:16px; z-index:60;
  background:var(--gold); color:var(--ink); border-radius:999px; padding:14px 20px;
  font-size:13px; font-weight:600; box-shadow:0 6px 20px rgba(176,141,87,.35);
  display:flex; align-items:center; gap:8px;
}

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* Visually hidden (screen-reader only) */
.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;
}

/* ==========================================================================
   About Us page — additional components
   ========================================================================== */

/* Centred page hero (About, and future content pages) */
.hero-centered{
  background:var(--ink); color:var(--paper); padding:var(--space-6) 0 var(--space-5);
  text-align:center; position:relative; overflow:hidden;
}
.hero-centered::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-centered h1{
  font-size:clamp(28px,5vw,44px); font-weight:400; line-height:1.15;
  margin:16px auto 0; max-width:700px; color:var(--paper);
}
.hero-centered h1 em{ font-style:italic; color:var(--gold-soft); }
.hero-centered .sub{ color:#B8C2CE; max-width:520px; margin:18px auto 0; font-size:15.5px; }

/* Mission / Vision cards */
.mv-grid{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:700px){ .mv-grid{ grid-template-columns:1fr 1fr; } }
.mv-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.mv-card .tag2{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); text-transform:uppercase; letter-spacing:.08em; }
.mv-card h3{ font-size:20px; margin-top:10px; }
.mv-card p{ font-size:14px; color:var(--slate); margin-top:10px; }

/* Philosophy — before/after rows */
.philosophy{ margin-top:26px; }
.phil-row{
  display:grid; gap:8px; padding:22px 0; border-top:1px solid var(--line); align-items:baseline;
}
.philosophy .phil-row:last-child{ border-bottom:1px solid var(--line); }
.phil-row .before{
  font-family:var(--font-display); font-style:italic; color:var(--slate);
  text-decoration:line-through; text-decoration-color:rgba(92,107,122,.4); font-size:15px;
}
.phil-row .after{ font-family:var(--font-display); font-size:16px; color:var(--ink); }
@media(min-width:760px){ .phil-row{ grid-template-columns:220px 1fr; gap:24px; } }

/* Why we exist — two-tone cards */
.exists-grid{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:700px){ .exists-grid{ grid-template-columns:1fr 1fr; } }
.exists-card{ border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:#fff; }
.exists-card.dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.exists-card .k{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); text-transform:uppercase; }
.exists-card.dark .k{ color:var(--gold-soft); }
.exists-card p{ font-size:14px; color:var(--slate); margin-top:10px; }
.exists-card.dark p{ color:#B8C2CE; }

/* Values grid */
.values-grid{ display:grid; gap:16px; margin-top:26px; }
@media(min-width:600px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .values-grid{ grid-template-columns:repeat(4,1fr); } }
.value-card{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff; transition:box-shadow .2s ease; }
.value-card:hover{ box-shadow:0 8px 24px rgba(11,31,58,.06); }
.value-card .num{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); }
.value-card h3{ font-size:15px; margin-top:10px; }
.value-card p{ font-size:12.5px; color:var(--slate); margin-top:6px; }

/* Support steps */
.support-steps{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:700px){ .support-steps{ grid-template-columns:repeat(3,1fr); } }
.step{ border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:#fff; }
.step .num{ font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--gold-soft); }
.step h3{ font-size:16px; margin-top:10px; }
.step p{ font-size:13px; color:var(--slate); margin-top:8px; }

/* Integrity band */
.integrity-band{
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
  padding:clamp(24px,4vw,40px); margin-top:26px; display:grid; gap:24px; align-items:center;
}
@media(min-width:800px){ .integrity-band{ grid-template-columns:1fr 1fr; gap:32px; } }
.integrity-band h3{ color:var(--paper); font-size:22px; }
.integrity-band p{ color:#B8C2CE; font-size:14px; margin-top:10px; }
.integrity-band .badge{
  display:inline-block; margin-top:16px; font-family:var(--font-mono); font-size:11px;
  color:var(--gold-soft); border:1px solid rgba(216,196,160,.4); border-radius:999px; padding:6px 14px;
}

/* ==========================================================================
   Services page — additional components
   ========================================================================== */

/* Four-column service grid (denser than homepage's 3-col cards) */
@media(min-width:1100px){ .card-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }

/* Levels We Support */
.level-row{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:760px){ .level-row{ grid-template-columns:repeat(3,1fr); } }
.level-card{ border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:#fff; }
.level-card .tag2{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); text-transform:uppercase; }
.level-card h3{ font-size:19px; margin-top:10px; }
.level-card p{ font-size:13.5px; color:var(--slate); margin-top:10px; }

/* Process row — four steps */
.process-row{ display:grid; gap:18px; margin-top:26px; }
@media(min-width:640px){ .process-row{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .process-row{ grid-template-columns:repeat(4,1fr); } }
.proc-card{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff; }
.proc-card .num{ font-family:var(--font-display); font-style:italic; font-size:24px; color:var(--gold-soft); }
.proc-card h3{ font-size:14.5px; margin-top:10px; }
.proc-card p{ font-size:12.5px; color:var(--slate); margin-top:6px; }

/* Pricing */
.pricing-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,5vw,40px);
  background:#fff; margin-top:26px; text-align:center;
}
.pricing-card .tag2{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); text-transform:uppercase; }
.pricing-card h3{ font-size:clamp(18px,3vw,22px); margin-top:12px; max-width:520px; margin-left:auto; margin-right:auto; }
.pricing-card p{ font-size:13.5px; color:var(--slate); margin-top:12px; max-width:480px; margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Blog page — additional components
   ========================================================================== */

/* Search field (decorative, hero) */
.search-input{
  max-width:420px; margin:28px auto 0; border:1px solid rgba(216,196,160,.4); border-radius:999px;
  padding:14px 22px; color:var(--gold-soft); font-family:var(--font-mono); font-size:12.5px; text-align:left;
  background:transparent;
}

/* Featured editorial spotlight */
.spotlight{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; margin-top:26px; }
.spotlight .img{ background:linear-gradient(135deg, var(--ink), var(--ink-soft)); aspect-ratio:16/9; min-height:200px; overflow:hidden; }
.spotlight .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.spotlight .body{ padding:clamp(24px,4vw,40px); }
.spotlight .cat{ font-family:var(--font-mono); font-size:10.5px; color:var(--gold-text); text-transform:uppercase; letter-spacing:.06em; }
.spotlight h2.title{ font-size:clamp(20px,3vw,26px); margin-top:14px; line-height:1.2; }
.spotlight .pull{
  font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--slate);
  margin-top:16px; border-left:2px solid var(--gold); padding-left:16px;
}
.spotlight .meta{ font-size:11.5px; color:var(--slate); margin-top:20px; font-family:var(--font-mono); display:flex; align-items:center; gap:10px; }
.author-dot{ width:26px; height:26px; border-radius:50%; background:linear-gradient(160deg, var(--gold-soft), var(--gold)); flex-shrink:0; }
.author-dot-sm{ width:18px; height:18px; border-radius:50%; background:linear-gradient(160deg, var(--gold-soft), var(--gold)); flex-shrink:0; }
@media(min-width:760px){ .spotlight{ display:grid; grid-template-columns:1.1fr .9fr; } }

/* Blog layout: main + sidebar */
.blog-layout{ display:grid; gap:36px; margin-top:26px; align-items:start; }
@media(min-width:960px){ .blog-layout{ grid-template-columns:1fr 300px; } }

/* Filter row */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.filter-chip{
  font-family:var(--font-mono); font-size:11.5px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); color:var(--slate); background:#fff; cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.filter-chip.on, .filter-chip:hover{ border-color:var(--gold); color:var(--ink); }

/* Article grid */
.article-grid{ display:grid; gap:22px; }
@media(min-width:640px){ .article-grid{ grid-template-columns:1fr 1fr; } }
.art-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s ease; }
.art-card:hover{ box-shadow:0 8px 24px rgba(11,31,58,.06); }
.art-card .img{ aspect-ratio:16/9; height:130px; background:linear-gradient(135deg, #EDE7D8, var(--paper-alt)); overflow:hidden; }
.art-card .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-card .body{ padding:20px; }
.art-card .cat{ font-family:var(--font-mono); font-size:10px; color:var(--gold-text); text-transform:uppercase; letter-spacing:.06em; }
.art-card h3{ font-size:15.5px; margin-top:8px; }
.art-card .meta{ font-size:11.5px; color:var(--slate); margin-top:10px; display:flex; align-items:center; gap:8px; }

/* Pagination */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:26px; list-style:none; padding:0; }
.pagination li a, .pagination li span{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; color:var(--slate);
}
.pagination li a[aria-current="page"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Sidebar */
.sidebar-card{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:#fff; margin-bottom:20px; }
.sidebar-card h3{ font-size:13px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin-bottom:14px; }
.sidebar-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.sidebar-list li{ font-size:13px; display:flex; gap:10px; color:var(--ink); }
.sidebar-list .n{ font-family:var(--font-display); font-style:italic; color:var(--gold-soft); flex-shrink:0; }
.sidebar-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-tags span{ font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--slate); }
.sidebar-card.dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.sidebar-card.dark h3{ color:var(--gold-soft); }
.sidebar-card.dark p{ color:#B8C2CE; font-size:13px; margin-top:8px; }
.sidebar-card.dark .field{
  margin-top:14px; background:rgba(255,255,255,.06); border:1px solid rgba(216,196,160,.3);
  border-radius:999px; padding:11px 16px; font-family:var(--font-mono); font-size:11.5px; color:var(--gold-soft);
}

/* Editorial placeholder note */
.editorial-note{
  border:1px dashed var(--line); border-radius:var(--radius); padding:22px; margin-top:26px;
  font-size:12.5px; color:var(--slate); display:flex; gap:14px; align-items:flex-start;
}
.editorial-note .flag{
  flex-shrink:0; font-family:var(--font-mono); font-size:9.5px; color:var(--slate);
  border:1px dashed var(--line); border-radius:6px; padding:3px 8px;
}

/* ==========================================================================
   Student Success Stories page — additional components
   ========================================================================== */

/* Featured story */
.featured-story{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; margin-top:26px; }
@media(min-width:760px){ .featured-story{ display:grid; grid-template-columns:.9fr 1.1fr; } }
.featured-story .photo{
  background:linear-gradient(160deg, var(--gold-soft), var(--gold)); aspect-ratio:4/3; min-height:220px;
  position:relative; overflow:hidden;
}
.featured-story .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-story .body{ padding:clamp(24px,4vw,40px); }
.featured-story .tag2{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); text-transform:uppercase; }
.featured-story .q{ font-family:var(--font-display); font-style:italic; font-size:clamp(17px,2.6vw,21px); line-height:1.5; margin-top:14px; }
.featured-story .meta{ font-size:12.5px; color:var(--slate); margin-top:18px; font-family:var(--font-mono); }

/* Story grid */
.story-grid{ display:grid; gap:22px; margin-top:24px; }
@media(min-width:640px){ .story-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .story-grid{ grid-template-columns:repeat(3,1fr); } }
.story-card{ border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:#fff; }
.story-card .photo-sm{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(160deg, var(--gold-soft), var(--gold)); margin-bottom:14px;
}
.story-card .q{ font-family:var(--font-display); font-style:italic; font-size:14.5px; color:var(--ink); line-height:1.5; }
.story-card .meta{ font-size:11.5px; color:var(--slate); margin-top:14px; font-family:var(--font-mono); }

/* Outcomes row */
.outcomes-row{ display:grid; gap:16px; margin-top:26px; }
@media(min-width:560px){ .outcomes-row{ grid-template-columns:1fr 1fr; } }
@media(min-width:900px){ .outcomes-row{ grid-template-columns:repeat(4,1fr); } }
.outcome-card{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff; text-align:center; }
.outcome-card .icon{
  width:34px; height:34px; border-radius:50%; background:rgba(122,139,111,.12);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.outcome-card h3{ font-size:13.5px; }

/* Institution region badges */
.inst-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; justify-content:center; }
.inst-badge{
  width:120px; height:60px; border:1px dashed var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:10px; color:var(--slate); text-align:center; padding:8px; line-height:1.4;
}

/* Submit-your-story band */
.submit-band{
  background:var(--ink); border-radius:var(--radius); padding:clamp(24px,4vw,40px); margin-top:26px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; color:var(--paper);
}
.submit-band h3{ color:var(--paper); font-size:20px; max-width:380px; }
.submit-band p{ color:#B8C2CE; font-size:13px; margin-top:8px; max-width:380px; }

/* ==========================================================================
   FAQ page — additional components
   ========================================================================== */

.faq-layout{ display:grid; gap:32px; align-items:start; }
@media(min-width:900px){ .faq-layout{ grid-template-columns:220px 1fr; } }

.faq-nav{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;
}
.faq-nav a{
  font-size:13px; color:var(--slate); padding:9px 14px; border-radius:8px; white-space:nowrap;
  border:1px solid transparent; flex-shrink:0;
}
.faq-nav a.on{ background:#fff; color:var(--ink); font-weight:600; border-color:var(--line); }
@media(min-width:900px){
  .faq-nav{
    position:sticky; top:96px; flex-direction:column; overflow-x:visible; padding-bottom:0;
  }
  .faq-nav a{ white-space:normal; }
}

.cat-group{ margin-bottom:var(--space-6); scroll-margin-top:96px; }
.cat-group h2{
  font-size:22px; display:flex; align-items:center; gap:12px;
}
.cat-group h2 .count{
  font-family:var(--font-mono); font-size:12px; color:var(--gold-text);
  border:1px solid var(--gold-soft); border-radius:999px; padding:2px 10px;
}
.cat-group .faq-list{ margin-top:20px; }

.still-band{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4vw,36px); margin-top:20px; text-align:center;
}
.still-band h3{ font-size:19px; }
.still-band p{ font-size:13.5px; color:var(--slate); margin-top:8px; }
.still-band .ctas{ display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* ==========================================================================
   Contact page — additional components
   ========================================================================== */

/* Contact method cards */
.method-row{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:760px){ .method-row{ grid-template-columns:repeat(3,1fr); } }
.method-card{ border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:#fff; }
.method-card.featured{ border-color:var(--gold); }
.method-card .icon{
  width:38px; height:38px; border-radius:10px; background:rgba(176,141,87,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family:var(--font-mono); font-size:10px; color:var(--gold-text);
}
.method-card h3{ font-size:16px; }
.method-card p{ font-size:13px; color:var(--slate); margin-top:8px; }
.method-card .value{ font-family:var(--font-mono); font-size:13px; color:var(--ink); margin-top:14px; word-break:break-word; }
.method-card a.value{ display:inline-block; }

/* Form + side panel layout */
.contact-layout{ display:grid; gap:32px; margin-top:26px; align-items:start; }
@media(min-width:900px){ .contact-layout{ grid-template-columns:1.2fr .8fr; } }

.form-card{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,36px); background:#fff; }
.field-row{ display:grid; gap:16px; margin-bottom:16px; }
@media(min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);
}
.field input, .field select, .field textarea{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:13.5px;
  color:var(--ink); background:var(--paper); font-family:var(--font-body); width:100%;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
.field.full{ grid-column:1 / -1; }
.field .error{ font-size:11.5px; color:#B3261E; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#B3261E; }
.field.invalid .error{ display:block; }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--slate); margin-top:8px; }
.consent input{ width:16px; height:16px; margin-top:2px; flex-shrink:0; }

.form-status{
  margin-top:16px; padding:14px 16px; border-radius:10px; font-size:13px; display:none;
}
.form-status.success{ display:block; background:rgba(122,139,111,.12); color:var(--sage); border:1px solid var(--sage); }
.form-status.error{ display:block; background:rgba(179,38,30,.08); color:#B3261E; border:1px solid #B3261E; }

/* Button loading / disabled state */
.btn:disabled, .btn.is-loading{
  opacity:.7; cursor:not-allowed; transform:none;
}
.btn.is-loading{
  position:relative; color:transparent;
}
.btn.is-loading::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:16px;
  margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:btn-spin .6s linear infinite;
}
.btn-outline.is-loading::after{ border-color:rgba(11,31,58,.25); border-top-color:var(--ink); }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .btn.is-loading::after{ animation:none; } }

/* Search form row (input + button) */
.search-form-row{
  display:flex; gap:8px; max-width:460px; margin:28px auto 0; flex-wrap:wrap; justify-content:center;
}
.search-form-row .search-input{ margin:0; flex:1; min-width:200px; }
.search-form-row .btn{ flex-shrink:0; }
.search-status{
  margin:12px auto 0; max-width:460px; font-size:12.5px; color:var(--gold-soft); display:none; text-align:center;
}
.search-status.show{ display:block; }

/* Newsletter form row (input + button) */
.newsletter-form-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.newsletter-form-row .field{ flex:1; min-width:180px; }
.newsletter-status{
  width:100%; margin-top:10px; font-size:12px; display:none;
}
.newsletter-status.show{ display:block; }
.newsletter-status.success{ color:var(--sage); }
.newsletter-status.error{ color:#E8A9A3; }
.sidebar-card .newsletter-status.error{ color:#B3261E; }

/* Side panel */
.side-card{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:#fff; margin-bottom:20px; }
.side-card h3{ font-size:15px; }
.side-card ol{ margin:14px 0 0; padding-left:18px; font-size:13px; color:var(--slate); display:flex; flex-direction:column; gap:10px; }
.side-card.alt{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.side-card.alt h3{ color:var(--gold-soft); }
.side-card.alt p{ color:#B8C2CE; font-size:13px; margin-top:8px; }

/* FAQ link band */
.faq-link-band{
  border:1px dashed var(--line); border-radius:var(--radius); padding:24px; margin-top:26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.faq-link-band p{ font-size:13.5px; color:var(--slate); margin:0; }

/* ==========================================================================
   Academic Subjects page — additional components
   ========================================================================== */

/* Category groups */
.subject-category{ margin-top:44px; }
.subject-category:first-of-type{ margin-top:26px; }
.subject-category-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:16px; border-bottom:1px solid var(--line); padding-bottom:12px; gap:12px;
}
.subject-category-head h3{ font-size:18px; }
.subject-category-head .count{ font-family:var(--font-mono); font-size:11px; color:var(--slate); white-space:nowrap; }

/* Subject detail example card */
.subject-detail{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:clamp(24px,4vw,32px); display:grid; gap:28px; margin-top:26px;
}
@media(min-width:760px){ .subject-detail{ grid-template-columns:1fr 1fr; } }
.subject-detail .tag2{ font-family:var(--font-mono); font-size:11px; color:var(--gold-text); text-transform:uppercase; }
.subject-detail h3{ font-size:22px; margin-top:10px; }
.subject-detail p{ font-size:14px; color:var(--slate); margin-top:10px; }
.subject-detail-list{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink); }
.subject-detail-list li::before{ content:"— "; color:var(--gold-text); }
.subject-detail-side{ padding-top:24px; border-top:1px solid var(--line); }
@media(min-width:760px){ .subject-detail-side{ border-top:none; border-left:1px solid var(--line); padding-top:0; padding-left:28px; } }
.adv-mini{ display:flex; gap:12px; align-items:center; }
.adv-photo-sm{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(160deg, var(--gold-soft), var(--gold)); flex-shrink:0;
}

/* Subject matching row */
/* ==========================================================================
   Interactive Subject Matcher (Subjects page)
   ========================================================================== */
.matcher-row{ display:grid; gap:22px; margin-top:26px; align-items:start; }
@media(min-width:760px){ .matcher-row{ grid-template-columns:repeat(3,1fr); } }

.matcher-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:#fff;
  display:flex; flex-direction:column; min-height:100%;
}
.matcher-step{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text);
  margin:0 0 8px;
}
.matcher-card h3{ font-size:17px; }
.matcher-hint{ font-size:12.5px; color:var(--slate); margin-top:8px; }

/* Combobox (subject selector, reused pattern for country selector) */
.combobox{ position:relative; margin-top:16px; }
.combobox-input{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:14px; font-family:var(--font-body); color:var(--ink); background:var(--paper);
}
.combobox-input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold); }
.combobox-listbox{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
  max-height:260px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 28px rgba(11,31,58,.12); list-style:none; margin:0; padding:6px;
}
.combobox-listbox[hidden]{ display:none; }
.combobox-option{
  padding:10px 12px; border-radius:8px; font-size:13.5px; color:var(--ink); cursor:pointer;
}
.combobox-option:hover, .combobox-option.is-active{ background:rgba(176,141,87,.1); color:var(--ink); }
.combobox-option.is-selected{ font-weight:600; color:var(--gold-text); }
.combobox-empty{ padding:10px 12px; font-size:13px; color:var(--slate); }

/* Advisor result */
#advisor-result{ margin-top:16px; flex:1; }
.matcher-empty{ font-size:13px; color:var(--slate); }
.advisor-name{ font-family:var(--font-display); font-size:16px; color:var(--ink); }
.advisor-qual{ font-family:var(--font-mono); font-size:12px; color:var(--gold-text); margin-top:4px; }
.advisor-specialities{
  display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none;
}
.advisor-specialities li{
  font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--slate);
}

/* Match checklist */
.match-checklist{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.match-checklist li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--slate); }
.check-dot{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;
  position:relative; transition:border-color .15s ease, background .15s ease;
}
.match-checklist li.is-done{ color:var(--ink); }
.match-checklist li.is-done .check-dot{ border-color:var(--sage); background:var(--sage); }
.match-checklist li.is-done .check-dot::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

.matcher-book-btn{ width:100%; justify-content:center; margin-top:18px; }
.matcher-book-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.matcher-book-btn:disabled:hover{ background:var(--gold); transform:none; }
#book-btn-hint{ text-align:center; margin-top:8px; }
#book-btn-hint.is-ready{ color:var(--sage); }

/* WhatsApp field — country selector + local number, two genuinely separate inputs */
.whatsapp-field-row{ display:flex; gap:10px; flex-wrap:wrap; }
.country-combobox{ margin-top:0; flex:0 0 170px; min-width:150px; }
.country-combobox-input{ cursor:pointer; }
.whatsapp-number-input{
  flex:1; min-width:160px; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:13.5px; color:var(--ink); background:var(--paper); font-family:var(--font-body);
}
.whatsapp-number-input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold); }
@media(max-width:480px){
  .country-combobox{ flex:1 1 100%; }
  .whatsapp-number-input{ flex:1 1 100%; }
}

/* ==========================================================================
   Resources page — additional components
   ========================================================================== */

/* Category pills with counts */
.cat-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cat-pill{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 18px;
  font-size:13px; color:var(--slate); display:flex; align-items:center; gap:8px;
  transition:border-color .15s ease, color .15s ease;
}
.cat-pill .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--gold-text); }
.cat-pill.on, .cat-pill:hover{ border-color:var(--gold); color:var(--ink); }

/* Downloadable materials */
.download-row{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:700px){ .download-row{ grid-template-columns:repeat(3,1fr); } }
.dl-card{ border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:#fff; }
.dl-card .icon{
  width:38px; height:38px; border-radius:10px; background:rgba(176,141,87,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family:var(--font-mono); font-size:11px; color:var(--gold-text);
}
.dl-card h3{ font-size:15.5px; }
.dl-card p{ font-size:13px; color:var(--slate); margin-top:8px; }

/* Learning tools */
.tool-row{ display:grid; gap:22px; margin-top:26px; }
@media(min-width:700px){ .tool-row{ grid-template-columns:1fr 1fr; } }
.tool-card{ border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:#fff; }
.tool-card h3{ font-size:17px; }
.tool-card p{ font-size:13.5px; color:var(--slate); margin-top:10px; }

/* Newsletter band (dark, inline) */
.newsletter-band{
  background:var(--ink); border-radius:var(--radius); padding:clamp(24px,4vw,40px); margin-top:26px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; color:var(--paper);
}
.newsletter-band h3{ color:var(--paper); font-size:20px; max-width:360px; }
.newsletter-band p{ color:#B8C2CE; font-size:13px; margin-top:8px; max-width:360px; }
.newsletter-band .field{
  background:rgba(255,255,255,.06); border:1px solid rgba(216,196,160,.3); border-radius:999px;
  padding:12px 20px; font-family:var(--font-mono); font-size:12px; color:var(--gold-soft); min-width:240px;
}

/* ==========================================================================
   Legal pages (Integrity, Privacy, Terms, Cookie, Disclaimer) — shared components
   ========================================================================== */

.hero-legal{
  background:var(--ink); color:var(--paper); padding:40px 0 34px; text-align:center;
  position:relative; overflow:hidden;
}
.hero-legal::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-legal h1{ font-size:clamp(24px,4vw,36px); font-weight:400; margin:14px auto 0; max-width:640px; color:var(--paper); }
.hero-legal .sub{ color:#B8C2CE; max-width:480px; margin:14px auto 0; font-size:14.5px; }
.hero-legal .updated{ margin-top:16px; font-family:var(--font-mono); font-size:11px; color:var(--gold-soft); }

.legal-layout{ display:grid; gap:32px; align-items:start; }
@media(min-width:900px){ .legal-layout{ grid-template-columns:220px 1fr; } }

.legal-nav{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.legal-nav a{
  font-size:13px; color:var(--slate); padding:9px 14px; border-radius:8px; white-space:nowrap;
  border:1px solid transparent; flex-shrink:0;
}
.legal-nav a.on{ background:#fff; color:var(--ink); font-weight:600; border-color:var(--line); }
@media(min-width:900px){
  .legal-nav{ position:sticky; top:96px; flex-direction:column; overflow-x:visible; padding-bottom:0; }
  .legal-nav a{ white-space:normal; }
}

.legal-section{ margin-bottom:var(--space-6); scroll-margin-top:96px; }
.legal-section h2{ font-size:19px; display:flex; align-items:center; gap:10px; }
.legal-section h2 .n{
  font-family:var(--font-mono); font-size:11px; color:var(--gold-text);
  border:1px solid var(--gold-soft); border-radius:999px; padding:2px 9px;
}
.legal-section p{ font-size:14px; color:var(--slate); margin-top:12px; max-width:680px; }
.legal-section ul{ margin:12px 0 0; padding-left:18px; font-size:14px; color:var(--slate); max-width:680px; }
.legal-section li{ margin-bottom:6px; }

.callout{
  border:1px solid var(--gold-soft); background:#fff; border-radius:var(--radius);
  padding:22px; margin-top:14px; font-size:13.5px; color:var(--ink); max-width:680px;
}

table.data-table{ width:100%; max-width:680px; border-collapse:collapse; margin-top:14px; font-size:13px; }
table.data-table th, table.data-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--slate); }
table.data-table th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--gold-text); }

/* Cookie preference toggles */
.toggle-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-top:12px; max-width:680px; background:#fff;
}
.toggle-row .label{ font-size:13.5px; font-weight:500; }
.toggle-row .desc{ font-size:12px; color:var(--slate); margin-top:2px; }
.toggle-switch{
  width:36px; height:20px; border-radius:999px; background:var(--line); position:relative; flex-shrink:0;
  border:none; padding:0; cursor:pointer; transition:background .15s ease; flex-shrink:0;
}
.toggle-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition:left .15s ease;
}
.toggle-switch[aria-checked="true"]{ background:var(--gold); }
.toggle-switch[aria-checked="true"]::after{ left:18px; }
.toggle-switch[disabled]{ background:var(--sage); cursor:not-allowed; opacity:.9; }

/* ==========================================================================
   404 page
   ========================================================================== */
.error-hero{
  background:var(--ink); color:var(--paper); padding:72px 0 64px; text-align:center;
  position:relative; overflow:hidden; min-height:60vh; display:flex; align-items:center;
}
.error-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.error-code{ font-family:var(--font-display); font-style:italic; font-size:clamp(64px,12vw,120px); color:var(--gold-soft); line-height:1; }
.error-hero h1{ font-size:clamp(24px,3.6vw,32px); font-weight:400; margin:18px auto 0; max-width:560px; color:var(--paper); }
.error-hero .sub{ color:#B8C2CE; max-width:480px; margin:16px auto 0; font-size:15px; }
.margin-note-404{
  display:inline-block; margin-top:24px; font-family:var(--font-mono); font-size:12px; color:var(--gold-soft);
  border-left:2px solid var(--gold); padding-left:14px; text-align:left; max-width:360px;
}
.quick-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.quick-links a{ font-size:13px; color:var(--gold-soft); border:1px solid rgba(216,196,160,.35); border-radius:999px; padding:9px 18px; }

/* ==========================================================================
   Research Finder page
   ========================================================================== */
.rf-search-bar{ max-width:760px; margin:32px auto 0; }
.rf-query-input{
  width:100%; border:1px solid rgba(216,196,160,.4); border-radius:14px; padding:16px 20px;
  font-size:15px; font-family:var(--font-body); color:var(--paper); background:rgba(255,255,255,.06);
}
.rf-query-input::placeholder{ color:#8C97A6; }
.rf-query-input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.rf-selectors{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.rf-combobox{ margin-top:0; flex:1 1 200px; min-width:160px; }
.rf-combobox .combobox-input{
  background:rgba(255,255,255,.06); border-color:rgba(216,196,160,.4); color:var(--paper); cursor:pointer;
}
.rf-combobox .combobox-input::placeholder{ color:var(--gold-soft); }
.rf-search-btn{ flex:1 1 140px; }

@media(max-width:640px){
  .rf-selectors{ flex-direction:column; }
  .rf-combobox, .rf-search-btn{ flex:1 1 100%; }
}

/* Subject cards as buttons (Browse by Subject) — reuse svc-card visuals, add button reset */
.rf-subject-card{
  width:100%; text-align:left; font-family:inherit; border:1px solid var(--line); background:#fff;
  cursor:pointer;
}
.rf-subject-card:hover{ border-color:var(--gold-soft); }
.rf-subject-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Quick search + topic active states reuse existing .cat-pill.on / .subject-tag.on styling */

/* ==========================================================================
   Compact header clock — every page, beside the language switcher.
   Hidden below the desktop nav breakpoint (900px): a mobile header already
   holds logo + language switcher + Contact + hamburger, and a vertical
   3-line clock has nowhere safe to go without crowding or overflow there.
   ========================================================================== */
.header-clock{
  display:none; flex-direction:column; line-height:1.35; padding:6px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper-alt);
  font-family:var(--font-mono); white-space:nowrap;
}
@media(min-width:900px){ .header-clock{ display:flex; } }
.header-clock .hc-time{ font-size:12.5px; font-weight:600; color:var(--ink); }
.header-clock .hc-date{ font-size:10px; color:var(--slate); }
.header-clock .hc-tz{ font-size:9.5px; color:var(--gold-text); text-transform:uppercase; letter-spacing:.03em; }
@media(min-width:900px) and (max-width:1150px){ .header-clock .hc-tz{ display:none; } }
[dir="rtl"] .header-clock{ text-align:right; }
/* ==========================================================================
   Language switcher
   ========================================================================== */
.lang-switcher{ position:relative; }
.lang-trigger{
  display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px; font-family:var(--font-mono); font-size:12px; color:var(--ink);
  cursor:pointer;
}
.lang-trigger:hover{ border-color:var(--gold-soft); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:150; min-width:220px; max-height:320px;
  overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(11,31,58,.14); padding:6px; list-style:none;
}
.lang-option{
  display:block; width:100%; text-align:left; background:none; border:none; border-radius:8px;
  padding:10px 12px; font-size:13.5px; color:var(--ink); cursor:pointer; font-family:var(--font-body);
}
.lang-option:hover{ background:rgba(176,141,87,.1); }

/* ==========================================================================
   Login dropdown (nav item — desktop) and login group (mobile panel)
   ========================================================================== */
.login-dropdown{ position:relative; }
.login-dropdown-trigger{
  display:inline-flex; align-items:center; gap:5px; background:none; border:none; padding:0;
  font-family:var(--font-body); font-size:13.5px; color:var(--slate); cursor:pointer; transition:color .15s ease;
}
.login-dropdown-trigger:hover{ color:var(--ink); }
.login-dropdown-trigger .caret{ font-size:10px; color:var(--gold-text); transition:transform .15s ease; }
.login-dropdown-trigger[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.login-dropdown-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:150; min-width:220px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(11,31,58,.14); padding:6px; list-style:none;
}
.login-dropdown-menu a{
  display:block; padding:11px 13px; border-radius:8px; font-size:13.5px; color:var(--ink);
  font-family:var(--font-body); font-weight:400;
}
.login-dropdown-menu a:hover{ background:rgba(176,141,87,.1); color:var(--ink); }
[dir="rtl"] .login-dropdown-menu{ right:auto; left:0; }

.mobile-login-group{ border-bottom:1px solid var(--line); }
.mobile-login-group a{ padding-left:40px; font-size:14px; color:var(--slate); border-bottom:none; }
.mobile-login-group a:last-child{ padding-bottom:16px; }
[dir="rtl"] .mobile-login-group a{ padding-left:24px; padding-right:40px; }

/* ==========================================================================
   RTL (Arabic) overrides — flexbox row direction and text-align already
   follow [dir] automatically per the CSS spec; these are only the rules
   that hardcode a direction explicitly and would otherwise fight that.
   ========================================================================== */
[dir="rtl"] .faq-q{ text-align:right; }
[dir="rtl"] .quick-links a{ text-align:right; }
[dir="rtl"] table.data-table th, [dir="rtl"] table.data-table td{ text-align:right; }
[dir="rtl"] .margin-note-404{ border-left:none; border-right:2px solid var(--gold); padding-left:0; padding-right:14px; text-align:right; }
[dir="rtl"] .rf-subject-card{ text-align:right; }
[dir="rtl"] .lang-menu{ right:auto; left:0; }
[dir="rtl"] .lang-option{ text-align:right; }

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:16px 20px;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(11,31,58,.2);
}
#cookie-banner p{ font-size:13px; margin:0; max-width:560px; color:rgba(251,250,247,.9); }
.cookie-banner-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.cookie-banner-actions a{ font-size:12.5px; color:var(--gold-soft); text-decoration:underline; }
#cookie-banner-accept{ padding:9px 20px; font-size:13px; }
@media(max-width:640px){
  #cookie-banner{ flex-direction:column; text-align:center; padding:16px; }
  #cookie-banner p{ max-width:100%; }
}