/* ==========================================================================
   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}
}

/* ---------- AEO: straight-answer box + FAQ block (blog posts) ---------- */
.straight-answer{
  background:var(--sh-white);
  border:1px solid var(--sh-paper-line);
  border-left:4px solid var(--sh-deep);
  border-radius:10px;
  padding:20px 22px;
  margin:0 0 32px;
}
.straight-answer .sa-label{
  font-family:var(--sh-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sh-deep);
  display:block;
  margin:0 0 8px;
}
.straight-answer p{
  font-size:15.5px;
  color:var(--sh-text);
  margin:0;
  font-weight:500;
  line-height:1.55;
}
.faq-section{margin:36px 0 0;}
.faq-section h3{
  font-family:var(--sh-font);font-weight:800;font-size:14.5px;color:var(--navy);
  margin:0 0 14px;letter-spacing:.02em;text-transform:uppercase;
}
.faq-item{
  border-top:1px solid var(--sh-paper-line);
  padding:16px 0;
}
.faq-item:first-of-type{border-top:none;padding-top:0;}
.faq-item .faq-q{
  font-family:var(--sh-font);font-weight:700;font-size:15px;color:var(--sh-text);
  margin:0 0 6px;
}
.faq-item .faq-a{
  font-size:14.5px;color:var(--sh-text-2);margin:0;line-height:1.55;
}

/* ---------- Hover refinements (mouse only) + keyboard parity ---------- */
/* Touch screens: no sticky "lifted" cards after a tap */
@media (hover:none){
  .btn:hover,.btn-primary:hover,.btn-secondary:hover,.cta-btn:hover,.sh-cta:hover,
  .card:hover,.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:none}
}

/* Keyboard focus gets the same lift as the mouse */
.hub-card:focus-visible,.mode-card:focus-visible,.oc-card:focus-visible,.oi-card:focus-visible,.os-card:focus-visible,
.svc-card:focus-visible,.ind-card:focus-visible,.g-card:focus-visible,.rel-card:focus-visible,.lang-card:focus-visible,
.ws-card:focus-visible,.svc-price-card:focus-visible{
  transform:translateY(-3px);box-shadow:var(--sh-shadow-lg);border-color:#CFC9BB;
}

/* Photos: slow, gentle zoom inside a clipped frame */
.feature figure,.hero-figure{overflow:hidden;border-radius:var(--r,12px)}
.feature figure img,.hero-figure img{transition:transform .5s ease}
.feature figcaption,.hero-figure figcaption{position:relative;background:inherit}

/* Card link arrow nudges right */
.hub-card p,.rel-card p{transition:transform .2s ease}

/* FAQ rows: whole row lights up with a cyan edge (mirrors the reference's row highlight) */
.faq-item{transition:background .18s ease,box-shadow .18s ease,padding-left .18s ease}

@media (hover:hover) and (pointer:fine){
  .feature figure:hover img,.hero-figure:hover img{transform:scale(1.04)}

  .hub-card:hover p,.rel-card:hover p{transform:translateX(3px)}

  .faq-item:hover{
    background:rgba(47,189,240,.07);
    box-shadow:inset 3px 0 0 var(--cyan-deep);
    padding-left:14px;
  }

  /* Menu + footer links: underline grows from the left */
  .sh-nav a:not(.sh-cta),.sh-footer a{
    background-image:linear-gradient(var(--cyan-deep),var(--cyan-deep));
    background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
    transition:color .16s ease,background-size .2s ease;
  }
  .sh-nav a:not(.sh-cta){padding-bottom:3px}
  .sh-footer a{width:fit-content}
  .sh-nav a:not(.sh-cta):hover,.sh-footer a:hover{background-size:100% 2px}

  /* In-text links on paper */
  .article-body a:not(.btn-primary):not(.btn-secondary):not(.rel-card):not(.cta-btn),
  .body-section a:not(.btn-primary):not(.btn-secondary):not(.rel-card):not(.cta-btn):not(.hub-card){
    text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease,color .15s ease;
  }
}

/* Same edge + tint for keyboard users inside a FAQ row */
.faq-item:focus-within{background:rgba(47,189,240,.07);box-shadow:inset 3px 0 0 var(--cyan-deep);padding-left:14px}
.sh-nav a:not(.sh-cta):focus-visible,.sh-footer a:focus-visible{background-size:100% 2px}