/* ==========================================================================
   STIB Translations — Global Shell v1.0
   Loaded on EVERY page, AFTER any legacy page <style> block.
   Three jobs:
     1. retune the design tokens the legacy pages already use
     2. style the shared header / footer (all selectors prefixed .sh-)
     3. lift the legacy components to the new brand without touching markup
   No JavaScript is required for any content to appear.
   ========================================================================== */

/* ---------- 1. Tokens (override the legacy :root) ---------- */
:root{
  --ink:#05070C;
  --navy:#0F1B33;
  --navy2:#070E1D;
  --paper:#F7F5F0;
  --cyan:#5FD1F5;
  --cyan-deep:#2FBDF0;
  --amber:#C79A3E;
  --line:rgba(238,242,246,.14);
  --text-dim:rgba(238,242,246,.74);

  /* new */
  --sh-slate:#0E141C;
  --sh-slate-line:#1E2732;
  --sh-white:#FFFFFF;
  --sh-paper-line:#E2DED4;
  --sh-text:#141A22;
  --sh-text-2:#525C6B;
  --sh-deep:#0B5F86;          /* accent that passes AA on paper */
  --sh-on-ink:#EEF2F6;
  --sh-on-ink-2:#9CA9B8;
  --sh-max:1160px;
  --sh-r:14px;
  --sh-shadow:0 1px 2px rgba(9,17,28,.05), 0 12px 32px -12px rgba(9,17,28,.18);
  --sh-shadow-lg:0 2px 4px rgba(9,17,28,.06), 0 28px 60px -20px rgba(9,17,28,.28);
  --sh-font:"Archivo","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --sh-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- 2. Typography lift ---------- */
body{font-family:var(--sh-font);background:var(--paper);color:var(--sh-text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--sh-font);letter-spacing:-.02em}
h1{font-weight:700;text-wrap:balance}
h2,h3{font-weight:700}
:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px;border-radius:4px}
::selection{background:rgba(47,189,240,.3)}

.eyebrow{
  font-family:var(--sh-mono) !important;font-size:.72rem !important;font-weight:500 !important;
  letter-spacing:.18em !important;text-transform:uppercase;
}
.breadcrumb{font-family:var(--sh-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.breadcrumb a{color:var(--cyan)}

/* ---------- 3. Shared header ---------- */
.sh-header{background:var(--ink);border-bottom:1px solid var(--sh-slate-line);position:relative;z-index:60}
.sh-header .sh-inner{
  max-width:var(--sh-max);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:1.5rem;min-height:74px;
}
.sh-brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.sh-brand__mark{font-family:var(--sh-font);font-weight:700;font-size:1.3rem;letter-spacing:-.03em;color:#fff}
.sh-brand__mark em{font-style:normal;color:var(--cyan-deep)}
.sh-brand__desc{font-family:var(--sh-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sh-on-ink-2)}
.sh-nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.sh-nav a{color:var(--sh-on-ink);font-size:.93rem;font-weight:500;text-decoration:none}
.sh-nav a:hover{color:var(--cyan-deep)}
.sh-cta{
  background:var(--cyan-deep);color:#04212E !important;font-weight:600;font-size:.88rem;
  padding:.62rem 1.15rem;border-radius:999px;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 26px -14px rgba(47,189,240,.9);transition:background .16s ease,transform .16s ease;
}
.sh-cta:hover{background:#63CDF4;transform:translateY(-1px)}
.sh-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sh-toggle-label{display:none;margin-left:auto;color:#fff;padding:.5rem;cursor:pointer;font-size:1.5rem;line-height:1}
@media (max-width:940px){
  .sh-toggle-label{display:block}
  .sh-nav{
    position:absolute;top:100%;left:0;right:0;margin-left:0;background:var(--ink);
    border-bottom:1px solid var(--sh-slate-line);flex-direction:column;align-items:flex-start;gap:0;
    padding:0 24px;max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .sh-nav a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--sh-slate-line)}
  .sh-nav .sh-cta{margin:1rem 0 1.4rem;border-bottom:0;width:auto;display:inline-block}
  .sh-toggle:checked ~ .sh-nav{max-height:680px}
}

/* ---------- 4. Shared footer ---------- */
.sh-footer{background:var(--ink);color:var(--sh-on-ink-2);padding:3.5rem 0 2rem;border-top:1px solid var(--sh-slate-line);font-size:.93rem;line-height:1.6}
.sh-footer .sh-inner{max-width:var(--sh-max);margin:0 auto;padding:0 24px}
.sh-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.sh-footer h4{font-family:var(--sh-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 1rem}
.sh-footer a{color:var(--sh-on-ink-2);text-decoration:none;display:block;padding:.22rem 0}
.sh-footer a:hover{color:var(--cyan-deep)}
.sh-footer p{margin:0 0 .5rem}
.sh-origin{font-family:var(--sh-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep)}
.sh-fnote{border-top:1px solid var(--sh-slate-line);margin-top:2.5rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.84rem}
.sh-fnote a{display:inline}
@media (max-width:820px){.sh-fgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sh-fgrid{grid-template-columns:1fr}}

/* ---------- 5. Legacy component lift ---------- */
/* Hero: same content, new atmosphere */
section.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#0A1524 0%,var(--ink) 62%) !important;
}
section.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(660px 380px at 80% 6%, rgba(47,189,240,.20), transparent 62%),
    radial-gradient(540px 400px at 2% 96%, rgba(11,95,134,.30), transparent 65%);
}
section.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%);
}
section.hero > .wrap{position:relative;z-index:2}

/* Cards: depth + hover, one rule for every legacy card family */
.hub-card,.mode-card,.oc-card,.oi-card,.os-card,.svc-card,.ind-card,.g-card,
.t-card,.rel-card,.lang-card,.stat-card,.ws-card,.takeaways,.faq-item,.svc-price-card,.factor-item{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hub-card:hover,.mode-card:hover,.oc-card:hover,.oi-card:hover,.os-card:hover,.svc-card:hover,
.ind-card:hover,.g-card:hover,.rel-card:hover,.lang-card:hover,.ws-card:hover,.svc-price-card:hover{
  transform:translateY(-3px);box-shadow:var(--sh-shadow-lg);border-color:#CFC9BB;
}
.takeaways{box-shadow:var(--sh-shadow)}
.takeaways h3{color:var(--sh-deep) !important;font-family:var(--sh-mono) !important;letter-spacing:.14em !important}

/* Buttons: pill system, safe on light and dark */
.btn-primary,.cta-btn{
  background:var(--cyan-deep) !important;color:#04212E !important;font-weight:600;
  border-radius:999px !important;border:1.5px solid transparent !important;
  padding:.8rem 1.45rem !important;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:0 10px 26px -14px rgba(47,189,240,.9);transition:transform .16s ease,background .16s ease;
}
.btn-primary:hover,.cta-btn:hover{background:#63CDF4 !important;transform:translateY(-1px)}
.btn-secondary{
  background:transparent !important;color:inherit !important;
  border:1.5px solid currentColor !important;border-radius:999px !important;
  padding:.8rem 1.45rem !important;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  opacity:.9;transition:opacity .16s ease,transform .16s ease;
}
.btn-secondary:hover{opacity:1;transform:translateY(-1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* Icon tiles: legacy emoji swapped for line icons */
.icon,.ind-icon,.k-icon{color:var(--cyan-deep)}
.icon svg,.ind-icon svg,.k-icon svg{
  width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.icon{background:linear-gradient(150deg,#12202F,#0B1622) !important;border:1px solid rgba(47,189,240,.28)}

/* Chips and numbers */
.reg-chip,.flags span,.pill{
  font-family:var(--sh-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.num,.stat-num,.ws-year{font-family:var(--sh-mono);letter-spacing:-.01em}

/* Link colour on paper: AA contrast */
.article-body a,.body-section a:not(.btn-primary):not(.btn-secondary):not(.rel-card):not(.cta-btn){
  color:var(--sh-deep);
}

/* Legacy header/footer are replaced by .sh-*; neutralise leftovers if any remain */
header.site,footer.site{background:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}