/* ==========================================================================
   BAXTRA — REFINEMENT LAYER
   Loaded after style.css and site-plus.css on every public page. Nothing here
   removes existing behaviour; it tightens type, deepens the chrome and adds
   the components used by refine.js (consent bar, region selector, external
   link notice, pipeline lanes, programme cards, document library, page meta).
   Issued 31 August 2026.
   ========================================================================== */

:root{
  --rf-navy:#0B1730; --rf-navy-2:#122346; --rf-blue:#0F3CC4; --rf-blue-2:#2C5BE8;
  --rf-cyan:#00A3E0; --rf-hair:#E6EAF3; --rf-hair-2:#EEF1F7;
  --rf-ink:#0A1020; --rf-body:#39425A; --rf-mut:#6B7488;
  --rf-shadow:0 1px 2px rgba(11,23,48,.04), 0 12px 34px rgba(11,23,48,.07);
  --rf-shadow-lg:0 2px 4px rgba(11,23,48,.05), 0 28px 70px rgba(11,23,48,.12);
}

/* ---------------------------------------------------- 1. type refinement -- */
body{
  font-size:16.8px; line-height:1.72; color:var(--rf-body);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--rf-ink)}
h1{letter-spacing:-.034em; line-height:1.04}
h2{letter-spacing:-.028em; line-height:1.1}
h3{letter-spacing:-.014em}
.lede{color:#404B63; letter-spacing:-.006em}
.note{color:var(--rf-mut)}
.mono,code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em; letter-spacing:-.01em}
.n,.stat .n,table td.n{font-variant-numeric:tabular-nums}
::selection{background:#D8E2FF; color:var(--rf-ink)}
:focus-visible{outline:2px solid var(--rf-blue); outline-offset:2px; border-radius:2px}

/* the eyebrow rule reads better as a short solid tick */
.eyebrow{font-size:.7rem; letter-spacing:.2em; margin-bottom:16px}
.eyebrow::after{flex:0 0 26px; opacity:.9; height:2px}

/* ------------------------------------------------------- 2. top chrome --- */
.accentbar{height:3px;
  background:linear-gradient(90deg,var(--rf-blue) 0%,var(--rf-blue-2) 45%,var(--rf-cyan) 100%)}
.utility{background:var(--rf-navy); color:#98A3B8; border-bottom:1px solid rgba(255,255,255,.06)}
.utility .wrap{height:38px; gap:22px}
.utility a{color:#98A3B8; position:relative; transition:color .16s}
.utility a:hover{color:#fff}
.utility a::after{content:""; position:absolute; left:0; right:0; bottom:-11px; height:2px;
  background:var(--rf-cyan); transform:scaleX(0); transform-origin:left; transition:transform .18s}
.utility a:hover::after{transform:scaleX(1)}

header.site{background:rgba(255,255,255,.9); backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--rf-hair); transition:box-shadow .2s, background .2s}
body.rf-scrolled header.site{box-shadow:0 1px 0 var(--rf-hair), 0 10px 30px rgba(11,23,48,.06);
  background:rgba(255,255,255,.96)}
nav.main > a{font-size:.845rem; letter-spacing:-.008em}
nav.main > a::after{height:2px;
  background:linear-gradient(90deg,var(--rf-blue),var(--rf-blue-2))}

/* ------------------------------------------------------------- 3. hero --- */
.hero{
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(44,91,232,.42) 0%, rgba(44,91,232,0) 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(0,163,224,.28) 0%, rgba(0,163,224,0) 60%),
    radial-gradient(600px 600px at 60% 110%, rgba(15,60,196,.30) 0%, rgba(15,60,196,0) 65%),
    linear-gradient(168deg,#0A142E 0%,#0C1A3C 48%,#08122A 100%),
    #0A142E;
  padding:104px 0 108px; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* fine engineering grid, very low contrast */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,20,46,0), rgba(6,12,28,.72));
}
.hero h1{max-width:17ch; text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .lede{color:#C9DAF6}
.hero .btn.light{box-shadow:0 8px 26px rgba(0,0,0,.22)}

/* ---------------------------------------------------- 4. page headers ---- */
.page-head{
  background:linear-gradient(180deg,#F7F9FD 0%,#FFF 100%);
  border-bottom:1px solid var(--rf-hair); padding:72px 0 58px; position:relative;
}
.page-head::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--rf-blue) 0%,rgba(15,60,196,0) 42%)}
.crumb{font-size:.78rem; letter-spacing:.03em; color:var(--rf-mut)}
.crumb a{color:var(--rf-mut); border-bottom:1px solid transparent; transition:.15s}
.crumb a:hover{color:var(--rf-blue); border-bottom-color:#B9C6E8; text-decoration:none}

/* ------------------------------------------------------------ 5. cards -- */
.card{border-color:var(--rf-hair); box-shadow:0 1px 2px rgba(11,23,48,.03);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s}
.card:hover{border-color:#C6D2EE; box-shadow:var(--rf-shadow); transform:translateY(-2px)}
.card h3{letter-spacing:-.018em}

/* --------------------------------------------------------- 6. buttons --- */
.btn{border-radius:3px; font-size:.885rem; letter-spacing:.004em;
  box-shadow:0 1px 2px rgba(11,23,48,.08); transition:.16s cubic-bezier(.2,.7,.3,1)}
.btn:not(.ghost):not(.light):not(.outline-light):hover{transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(15,60,196,.24)}
.btn.ghost{box-shadow:none}

/* ----------------------------------------------------------- 7. stats --- */
.stats{border-top:1px solid var(--rf-hair)}
.stats .stat{border-bottom:1px solid var(--rf-hair); position:relative; padding-top:28px}
.stats .stat::before{content:""; position:absolute; left:0; top:-1px; width:34px; height:2px;
  background:var(--rf-blue)}
.stat .n{letter-spacing:-.045em; color:var(--rf-ink)}
.stat .l{color:var(--rf-mut); font-size:.815rem; letter-spacing:.004em}

/* ---------------------------------------------------------- 8. tables --- */
.tablewrap{border-color:var(--rf-hair); border-radius:3px}
.tablewrap table th{
  background:#F6F8FD; color:var(--rf-ink); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; border-bottom:1.5px solid #CBD6F0;
  position:sticky; top:0; z-index:2;
}
.tablewrap table tbody tr{transition:background .12s}
.tablewrap table tbody tr:nth-child(even){background:#FCFDFF}
.tablewrap table tbody tr:hover{background:#F4F7FE}

/* ----------------------------------------------------------- 9. pills --- */
.pill{border-radius:2px; font-size:.655rem; letter-spacing:.09em; padding:4px 9px}

/* ------------------------------------------------------ 10. safety box -- */
.safety{position:relative; border-left:3px solid var(--rf-blue)}
.disclaimer{color:var(--rf-mut)}

/* ------------------------------------------------------- 11. footer ----- */
footer.site{background:linear-gradient(180deg,#0B1730 0%,#080F20 100%);
  border-top:3px solid var(--rf-blue)}
footer.site h4{color:#fff; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}
footer.site .footgrid a{transition:color .15s, padding-left .15s}
footer.site .footgrid a:hover{color:#fff; padding-left:3px; text-decoration:none}
footer.site .legal{border-top:1px solid rgba(255,255,255,.09)}

/* ======================================================================
   NEW COMPONENTS
   ====================================================================== */

/* ------------------------------------------------- 12. page meta bar ---- */
.rf-meta{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--rf-hair); border-bottom:1px solid var(--rf-hair);
  background:#FBFCFE; padding:11px 0}
.rf-meta .wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.rf-meta span,.rf-meta b{font-size:.755rem; color:var(--rf-mut); letter-spacing:.02em}
.rf-meta b{color:var(--rf-ink); font-weight:600}
.rf-meta .sp{flex:1}
.rf-meta button{background:none; border:1px solid var(--rf-hair); border-radius:2px;
  color:var(--rf-body); font:inherit; font-size:.745rem; padding:5px 11px; cursor:pointer;
  transition:.15s; letter-spacing:.01em}
.rf-meta button:hover{border-color:var(--rf-blue); color:var(--rf-blue); background:#F4F7FE}
.rf-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:#1CA36B;
  margin-right:6px; vertical-align:1px; box-shadow:0 0 0 3px rgba(28,163,107,.16)}

/* --------------------------------------------------- 13. consent bar ---- */
.rf-consent{position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:#fff; border-top:3px solid var(--rf-blue);
  box-shadow:0 -18px 50px rgba(11,23,48,.16); transform:translateY(102%);
  transition:transform .34s cubic-bezier(.2,.75,.3,1)}
.rf-consent.on{transform:none}
.rf-consent .in{max-width:1200px; margin:0 auto; padding:20px 28px;
  display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center}
.rf-consent h4{margin:0 0 6px; font-size:.95rem}
.rf-consent p{margin:0; font-size:.815rem; color:var(--rf-mut); line-height:1.6; max-width:78ch}
.rf-consent .acts{display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end}
@media(max-width:820px){.rf-consent .in{grid-template-columns:1fr}
  .rf-consent .acts{justify-content:flex-start}}

/* -------------------------------------------------------- 14. modal ----- */
.rf-scrim{position:fixed; inset:0; background:rgba(8,14,30,.62); backdrop-filter:blur(3px);
  z-index:1300; opacity:0; pointer-events:none; transition:opacity .22s}
.rf-scrim.on{opacity:1; pointer-events:auto}
.rf-modal{position:fixed; z-index:1310; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  width:min(560px,calc(100vw - 40px)); max-height:min(84vh,760px); overflow:auto;
  background:#fff; border-radius:5px; box-shadow:var(--rf-shadow-lg);
  transition:opacity .22s, transform .22s cubic-bezier(.2,.75,.3,1)}
.rf-modal.on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.rf-modal .hd{padding:22px 26px 16px; border-bottom:1px solid var(--rf-hair);
  display:flex; justify-content:space-between; gap:16px; align-items:flex-start}
.rf-modal .hd h3{margin:0 0 4px; font-size:1.18rem}
.rf-modal .hd p{margin:0; font-size:.8rem; color:var(--rf-mut)}
.rf-modal .bd{padding:22px 26px}
.rf-modal .ft{padding:16px 26px 22px; display:flex; gap:9px; justify-content:flex-end;
  flex-wrap:wrap; border-top:1px solid var(--rf-hair); background:#FBFCFE}
.rf-x{background:none; border:0; font-size:1.5rem; line-height:1; color:var(--rf-mut);
  cursor:pointer; padding:0 2px}
.rf-x:hover{color:var(--rf-ink)}
.rf-opt{display:flex; gap:13px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid var(--rf-hair-2)}
.rf-opt:last-child{border-bottom:0}
.rf-opt b{display:block; font-size:.9rem; color:var(--rf-ink)}
.rf-opt span{display:block; font-size:.79rem; color:var(--rf-mut); line-height:1.55}
.rf-opt input{margin-top:5px; accent-color:var(--rf-blue); width:16px; height:16px}

/* --------------------------------------------- 15. pipeline phase lanes - */
.rf-lanes{border:1px solid var(--rf-hair); border-radius:4px; background:#fff;
  overflow:hidden; box-shadow:0 1px 2px rgba(11,23,48,.03)}
.rf-lanes-hd{display:grid; grid-template-columns:230px repeat(5,1fr);
  background:#F6F8FD; border-bottom:1.5px solid #CBD6F0}
.rf-lanes-hd > div{padding:11px 12px; font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; font-weight:700; color:var(--rf-ink);
  border-left:1px solid var(--rf-hair)}
.rf-lanes-hd > div:first-child{border-left:0}
.rf-lane{display:grid; grid-template-columns:230px repeat(5,1fr);
  border-bottom:1px solid var(--rf-hair-2); align-items:stretch}
.rf-lane:last-child{border-bottom:0}
.rf-lane:hover{background:#FAFCFF}
.rf-lane .who{padding:13px 14px; border-right:1px solid var(--rf-hair)}
.rf-lane .who b{display:block; font-size:.86rem; color:var(--rf-ink); letter-spacing:-.01em}
.rf-lane .who span{display:block; font-size:.74rem; color:var(--rf-mut); margin-top:2px}
.rf-lane .cell{border-left:1px solid var(--rf-hair-2); position:relative; min-height:52px}
.rf-lane .cell:first-of-type{border-left:0}
.rf-bar{position:absolute; left:5px; right:5px; top:50%; transform:translateY(-50%);
  height:20px; border-radius:2px; display:flex; align-items:center; padding:0 9px;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; white-space:nowrap; overflow:hidden;
  background:linear-gradient(90deg,var(--rf-blue),var(--rf-blue-2));
  transform-origin:left center; animation:rf-grow .7s cubic-bezier(.2,.8,.3,1) both}
.rf-bar.done{background:linear-gradient(90deg,#1CA36B,#28B87C)}
.rf-bar.ghost{background:repeating-linear-gradient(45deg,#DCE3F5,#DCE3F5 5px,#E9EDF8 5px,#E9EDF8 10px);
  color:var(--rf-mut)}
@keyframes rf-grow{from{transform:translateY(-50%) scaleX(.02); opacity:0}
  to{transform:translateY(-50%) scaleX(1); opacity:1}}
@media(max-width:900px){
  .rf-lanes-hd{display:none}
  .rf-lane{grid-template-columns:1fr}
  .rf-lane .who{border-right:0; border-bottom:1px solid var(--rf-hair-2)}
  .rf-lane .cell{min-height:0; border-left:0; position:static; display:none}
  .rf-lane .cell.has{display:block; padding:0 14px 12px}
  .rf-bar{position:static; transform:none; animation:none; display:inline-flex; height:19px}
}

/* ------------------------------------------------ 16. programme cards --- */
.rf-progs{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px}
.rf-prog{border:1px solid var(--rf-hair); border-radius:4px; background:#fff; padding:20px;
  position:relative; overflow:hidden; transition:transform .2s cubic-bezier(.2,.7,.3,1),
  box-shadow .2s, border-color .2s; display:flex; flex-direction:column; gap:9px}
.rf-prog::before{content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--rf-blue),var(--rf-cyan)); opacity:.85}
.rf-prog:hover{transform:translateY(-3px); box-shadow:var(--rf-shadow); border-color:#C6D2EE}
.rf-prog .id{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--rf-blue)}
.rf-prog h3{margin:0; font-size:1.06rem}
.rf-prog .dis{font-size:.85rem; color:var(--rf-body); margin:0; line-height:1.5}
.rf-prog .mech{font-size:.775rem; color:var(--rf-mut); line-height:1.55; margin:0}
.rf-prog .ft{margin-top:auto; padding-top:11px; border-top:1px solid var(--rf-hair-2);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.74rem}
.rf-prog .ft a{font-weight:600}

/* ------------------------------------------------- 17. document library - */
.rf-docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.rf-doc{display:flex; gap:14px; border:1px solid var(--rf-hair); border-radius:4px;
  padding:17px 18px; background:#fff; text-decoration:none; align-items:flex-start;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s}
.rf-doc:hover{transform:translateY(-2px); box-shadow:var(--rf-shadow); border-color:#C6D2EE;
  text-decoration:none}
.rf-doc .ic{flex:0 0 34px; height:42px; border-radius:2px; background:#F1F4FC;
  border:1px solid #DCE3F5; position:relative; display:grid; place-items:center;
  font-size:.56rem; font-weight:800; letter-spacing:.06em; color:var(--rf-blue)}
.rf-doc .ic::after{content:""; position:absolute; right:0; top:0; width:9px; height:9px;
  background:linear-gradient(225deg,#fff 50%,#DCE3F5 50%)}
.rf-doc b{display:block; font-size:.9rem; color:var(--rf-ink); letter-spacing:-.012em;
  line-height:1.35}
.rf-doc p{margin:5px 0 0; font-size:.775rem; color:var(--rf-mut); line-height:1.55}
.rf-doc .m{margin-top:8px; font-size:.7rem; color:var(--rf-mut); letter-spacing:.03em}
.rf-docbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:0 0 22px}
.rf-chip{background:#fff; border:1px solid var(--rf-hair); border-radius:2px; cursor:pointer;
  font:inherit; font-size:.775rem; padding:7px 14px; color:var(--rf-body); transition:.15s}
.rf-chip:hover{border-color:#B9C6E8; color:var(--rf-blue)}
.rf-chip.on{background:var(--rf-blue); border-color:var(--rf-blue); color:#fff}

/* ------------------------------------------------------- 18. ticker ----- */
.rf-ticker{background:var(--rf-navy); border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07); overflow:hidden; position:relative}
.rf-ticker::before,.rf-ticker::after{content:""; position:absolute; top:0; bottom:0; width:90px;
  z-index:2; pointer-events:none}
.rf-ticker::before{left:0; background:linear-gradient(90deg,var(--rf-navy),transparent)}
.rf-ticker::after{right:0; background:linear-gradient(270deg,var(--rf-navy),transparent)}
.rf-track{display:flex; gap:0; width:max-content; animation:rf-scroll 68s linear infinite}
.rf-ticker:hover .rf-track{animation-play-state:paused}
.rf-tick{display:flex; align-items:center; gap:10px; padding:13px 26px; white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.07); font-size:.775rem; color:#A9B4C9}
.rf-tick b{color:#fff; font-weight:600; letter-spacing:.01em}
.rf-tick i{font-style:normal; color:#7FE0C0; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700}
@keyframes rf-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------------------------------------------------- 19. feedback ------ */
.rf-fb{border:1px solid var(--rf-hair); border-radius:4px; background:#FBFCFE;
  padding:20px 22px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.rf-fb b{font-size:.92rem; color:var(--rf-ink)}
.rf-fb p{margin:3px 0 0; font-size:.79rem; color:var(--rf-mut)}
.rf-fb .sp{flex:1}

/* --------------------------------------------------- 20. CTA band ------- */
.rf-cta{background:linear-gradient(120deg,#0B1730 0%,#132a5c 58%,#0F3CC4 140%);
  color:#fff; position:relative; overflow:hidden}
.rf-cta::before{content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(90% 120% at 20% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(90% 120% at 20% 0%,#000 20%,transparent 75%)}
.rf-cta .wrap{position:relative; z-index:2; padding:64px 28px}
.rf-cta h2{color:#fff; max-width:22ch}
.rf-cta p{color:#C9DAF6; max-width:60ch}
.rf-cta .eyebrow{color:#7FD3FF}
.rf-cta .eyebrow::after{background:#7FD3FF}

/* ---------------------------------------------------- 21. misc ---------- */
.rf-hair{height:1px; background:var(--rf-hair); border:0; margin:0}
.rf-kv{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:.85rem}
.rf-kv dt{color:var(--rf-mut); letter-spacing:.02em}
.rf-kv dd{margin:0; color:var(--rf-ink); font-weight:600}
.rf-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--rf-ink); color:#fff; padding:12px 20px; border-radius:3px; z-index:1400;
  font-size:.84rem; opacity:0; pointer-events:none; transition:.24s;
  box-shadow:0 14px 40px rgba(8,14,30,.35)}
.rf-toast.on{opacity:1; transform:translate(-50%,0)}

/* scrollbars, quietly */
*{scrollbar-width:thin; scrollbar-color:#C3CBDD transparent}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-thumb{background:#C3CBDD; border-radius:8px; border:3px solid #fff}
::-webkit-scrollbar-thumb:hover{background:#A7B1C8}
::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------- 22. motion and print ------- */
@media (prefers-reduced-motion:reduce){
  .rf-track{animation:none}
  .rf-bar{animation:none}
  .rf-consent,.rf-modal,.rf-scrim,.card,.btn,.rf-doc,.rf-prog{transition:none}
}
@media print{
  .rf-consent,.rf-scrim,.rf-modal,.rf-ticker,.rf-fb,.rf-meta button{display:none !important}
  .rf-lanes,.rf-doc,.rf-prog{break-inside:avoid}
  .hero{background:#0C1A3C !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}