/* Miranda shell, extracted from the approved homepage by tools/extract_shell.py. Do not edit here. */
/* ============ TOKENS ============ */
:root{
  --navy:#002F6D; --deep:#00224F; --night:#001A3E; --blue:#0074C8; --bright:#39B5E6; --cyan:#60D0E4;
  --teal:#0AA5B5; --violet:#7C7CCE; --royal:#5E7FD0;
  --mist:#E9EEF0; --ink:#33404F; --mute:#5B6B7C; --line:rgba(0,46,109,.16); --line2:rgba(0,46,109,.09);
  --ff:'Orkney','Hanken Grotesk',system-ui,sans-serif;
  --gut:clamp(1.25rem,4.5vw,4rem); --max:1360px;
  --s3:clamp(2.6rem,5vw,4rem); --s4:clamp(4rem,8vw,7rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --skew:104deg; /* the M's own diagonal */
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{font-family:var(--ff); font-size:1.02rem; line-height:1.6; color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; overflow-x:clip; touch-action:manipulation}
h1,h2,h3{color:var(--navy); letter-spacing:0; text-wrap:balance; font-weight:700}
h2{font-weight:300; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.1; letter-spacing:-.016em}
p{text-wrap:pretty}
a{color:var(--blue)}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:fixed; top:0; left:-200%; z-index:900; background:var(--navy); color:#fff; padding:.8rem 1.2rem; text-decoration:none}
.skip:focus-visible{left:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.dkbg :focus-visible{outline-color:var(--cyan)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* reveals: visible by default; .js gates them off pre-view */
.io{opacity:1; transform:none}
html.js:not(.rm) .io:not(.in){opacity:0; transform:translateY(16px)}
html.js:not(.rm) .io{transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js:not(.rm) .stag > *{transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms)}
html.js:not(.rm) .stag:not(.in) > *{opacity:0; transform:translateY(14px)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff); font-size:.98rem; font-weight:700;
  padding:.95rem 1.5rem; text-decoration:none; border:1px solid var(--navy); color:var(--navy); background:transparent;
  cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease}
.btn:hover{background:var(--navy); color:#fff}
.btn.solid{background:var(--navy); color:#fff}
.btn.solid:hover{background:var(--blue); border-color:var(--blue)}
.btn.inv{border-color:#fff; color:#fff}
.btn.inv:hover{background:#fff; color:var(--navy)}
.btn.inv.solid{background:#fff; color:var(--navy); border-color:#fff}
.btn.inv.solid:hover{background:var(--cyan); border-color:var(--cyan)}
.arw{display:inline-block; transition:transform .35s var(--ease)}
.btn:hover .arw,a:hover .arw{transform:translateX(5px)}

.cite{font-size:.6rem; vertical-align:super; color:var(--blue); text-decoration:none; font-weight:700;
  padding:.7em .55em; margin:-.7em -.3em; position:relative}
.mist .cite,.notes .cite{color:var(--navy)}
.dkbg .cite{color:var(--cyan)}
.from{display:inline-block; background:var(--teal); color:#fff; font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:.28em .6em}

/* ============ HEADER ============ */
.hdr{position:fixed; inset:0 0 auto 0; z-index:600; transition:background .4s ease, box-shadow .4s ease}
.hdr::before{content:""; position:absolute; inset:0 0 -34px 0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(0,20,48,.78), rgba(0,20,48,0)); transition:opacity .4s ease}
.hdr.on::before,.mnav-open .hdr::before{opacity:0}
.hdr.on{background:rgba(255,255,255,.96); box-shadow:0 1px 0 var(--line2)}
.hdr-in{max-width:1500px; margin-inline:auto; padding:.95rem var(--gut); display:flex; align-items:center; gap:2rem}
.lg{display:flex; flex:none; position:relative}
.lg img{height:40px; width:auto; display:block; transition:opacity .3s ease}
/* the supplied white artwork sits over the hero; the colour artwork takes over
   once the header goes solid, and while the mobile menu is open */
.lg .lg-c{position:absolute; left:0; top:0; opacity:0}
.hdr.on .lg .lg-w{opacity:0}
.hdr.on .lg .lg-c{opacity:1}
.nav{display:flex; align-items:center; gap:1.7rem; margin-left:auto}
.nav > a,.nav button{font-family:var(--ff); font-size:.98rem; font-weight:500; color:#fff; text-decoration:none;
  background:none; border:0; -webkit-appearance:none; appearance:none; cursor:pointer; padding:.35rem 0}
.hdr.on .nav > a,.hdr.on .nav button{color:var(--navy)}
.nav > a:hover,.nav button:hover{color:var(--cyan)}
.hdr.on .nav > a:hover,.hdr.on .nav button:hover{color:var(--blue)}
.lang{display:flex; gap:.7rem; padding-left:1.4rem; border-left:1px solid rgba(255,255,255,.35); font-size:.9rem}
.hdr.on .lang{border-left-color:var(--line)}
.lang b{color:#fff; font-weight:700}
.hdr.on .lang b{color:var(--navy)}
.lang a{color:rgba(255,255,255,.85); text-decoration:none; font-weight:400}
.hdr.on .lang a{color:var(--mute)}
.hdr .btn{padding:.7rem 1.15rem; font-size:.9rem}
.hdr:not(.on) .hcta{border-color:#fff; color:#fff}
.hdr:not(.on) .hcta:hover{background:#fff; color:var(--navy)}
.svc{position:relative}
.svc-menu{position:fixed; left:0; right:0; top:64px; z-index:590; background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,20,50,.14); display:none}
.svc-menu.open{display:block}
.svc-in{max-width:var(--max); margin-inline:auto; padding:1.6rem var(--gut) 1.9rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem 2rem}
.svc-in a{display:flex; align-items:baseline; gap:.7rem; padding:.55rem .4rem; text-decoration:none; color:var(--navy); font-weight:700}
.svc-in a i{flex:none; width:8px; height:8px; background:var(--dc); transform:translateY(-1px)}
.svc-in a span{font-weight:400; color:var(--mute); font-size:.88rem}
.svc-in a:hover{background:var(--mist)}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.5rem; z-index:660}
.burger i{display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:transform .3s ease, opacity .3s ease, background .3s ease}
.hdr.on .burger i,.mnav-open .burger i{background:var(--navy)}
.mnav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-open .burger i:nth-child(2){opacity:0}
.mnav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:1319px){
  .nav{display:none}
  .burger{display:block}
  .mnav{display:none; position:fixed; inset:0; z-index:560; background:#fff; padding:6rem var(--gut) 3rem; overflow:auto; overscroll-behavior:contain}
  .mnav-open .hdr{background:rgba(255,255,255,.98)}
  .mnav-open .lg .lg-w{opacity:0}
  .mnav-open .lg .lg-c{opacity:1}
  .mnav-open .mnav{display:block}
  .mnav a{display:block; font-size:1.35rem; font-weight:700; color:var(--navy); text-decoration:none;
    padding:.75rem 0; border-bottom:1px solid var(--line2)}
  .mnav a.sm{font-size:1rem; font-weight:400; color:var(--ink)}
  .mnav .mlang{margin-top:1.6rem; font-size:.95rem; color:var(--mute)}
  .mnav .mlang b{color:var(--navy)}
  .mnav .mlang a{display:inline; border:0; padding:0 0 0 .8rem; font-size:.95rem; font-weight:400; color:var(--mute)}
}

/* ============ NOTES + FOOTER ============ */
.notes{background:var(--mist); border-top:1px solid var(--line2)}
.notes .wrap{padding-block:2.6rem}
.notes h2{font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.notes ol{margin:1rem 0 0 1.1rem; font-size:.8rem; line-height:1.6; color:var(--mute); max-width:70rem}
.notes li{margin-bottom:.5rem}
.ft{background:var(--deep); color:#B5C1D4}
.ft .wrap{padding-block:3.4rem 2.4rem}
.ft-top{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.8fr)); gap:2.5rem}
.ft .lg2 img{height:42px; width:auto; display:block}
.ft p{font-size:.9rem; margin-top:1rem; max-width:24rem}
.ft h3{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem}
.ft ul{list-style:none; display:flex; flex-direction:column; gap:.45rem}
.ft a{color:#B5C1D4; text-decoration:none; font-size:.92rem; display:inline-block; padding:.15rem 0}
.ft a:hover{color:#fff}
.ft-btm{margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(182,194,214,.18);
  display:flex; flex-wrap:wrap; gap:1rem 3rem; justify-content:space-between; font-size:.82rem}
.ft-btm address{font-style:normal; line-height:1.6}
@media (max-width:900px){ .ft-top{grid-template-columns:1fr 1fr} }

/* ============ CONSENT: banner and policies ============ */
.ckb{position:fixed; left:0; right:0; bottom:0; z-index:800; background:var(--night); color:#C8D3E2;
  border-top:2px solid var(--blue); box-shadow:0 -14px 40px rgba(0,16,40,.3);
  transform:translateY(101%); transition:transform .55s var(--ease)}
.ckb.up{transform:none}
.ckb[hidden]{display:none}
.ckb-in{max-width:var(--max); margin-inline:auto; padding:1.15rem var(--gut) 1.25rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.9rem 2.4rem; align-items:center}
.ckb p{font-size:.9rem; line-height:1.55; max-width:46rem}
.ckb-l{margin-top:.5rem; display:flex; gap:1.2rem; font-size:.8rem}
.ckb-a{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end}
.ckb-a button{font-family:inherit; font-size:.82rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  padding:.72em 1.25em; border:1px solid rgba(200,211,226,.42); background:transparent; color:#DCE5F0;
  transition:background .25s ease, color .25s ease, border-color .25s ease}
.ckb-a button:hover{border-color:#fff; color:#fff}
.ckb-a button.solid{background:var(--blue); border-color:var(--blue); color:#fff}
.ckb-a button.solid:hover{background:var(--bright); border-color:var(--bright)}
.lnk{font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}
.ckb .lnk{color:#9FB4CE}
.ckb .lnk:hover{color:#fff}
.ckb-pref{grid-column:1/-1; display:none; border-top:1px solid rgba(200,211,226,.16); margin-top:.4rem; padding-top:1rem}
.ckb.open .ckb-pref{display:block}
.ckb-pref label{display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-size:.86rem}
.ckb-pref input{margin-top:.28rem; width:1rem; height:1rem; accent-color:var(--bright); flex:none}
.ckb-pref span b{display:block; color:#fff; font-weight:700}
.ckb-pref span i{font-style:normal; color:#93A7C0}
@media (max-width:820px){
  .ckb-in{grid-template-columns:1fr}
  .ckb-a{justify-content:flex-start}
}
dialog.pol{width:min(46rem,calc(100vw - 2rem)); max-height:min(80vh,44rem); margin:auto; border:0; padding:0; color:var(--ink);
  background:#fff; box-shadow:0 30px 80px rgba(0,20,50,.35); border-top:3px solid var(--blue)}
dialog.pol::backdrop{background:rgba(0,26,62,.62)}
.pol-in{padding:2.2rem clamp(1.4rem,4vw,2.6rem) 2.4rem; overflow:auto; max-height:inherit}
.pol h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.pol p{margin-top:1rem; font-size:.95rem; line-height:1.68; max-width:38rem}
.pol .upd{margin-top:1.7rem; padding-top:1rem; border-top:1px solid var(--line2);
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mute)}
.pol-x{position:absolute; top:.65rem; right:.65rem; width:2.4rem; height:2.4rem; cursor:pointer;
  border:0; background:none; color:var(--mute); font-size:1.5rem; line-height:1; font-family:inherit}
.pol-x:hover{color:var(--navy)}
/* the consent block sits on the white form panel, not the dark section */
.consent{grid-column:1/-1; margin:.4rem 0 .3rem; padding-top:1rem; border-top:1px solid var(--line2)}
.consent label{display:flex; gap:.75rem; align-items:flex-start; padding:.4rem 0; font-size:.85rem; line-height:1.5;
  color:var(--ink); cursor:pointer}
.consent input{margin-top:.22rem; width:1rem; height:1rem; accent-color:var(--blue); flex:none}
.consent .lnk{color:var(--blue); font-weight:700}
.consent .req{color:#B0402E; font-weight:700}
@media (prefers-reduced-motion:reduce){ .ckb{transition:none} }

/* interaction polish: lift, shine, press */
.rep{transition:transform .5s var(--ease)}
.rep:hover{transform:translateY(-4px)}
.rep .th{transition:box-shadow .5s var(--ease)}
.rep:hover .th{box-shadow:0 18px 34px rgba(0,20,50,.18)}
.dcard figure::before{content:""; position:absolute; top:0; bottom:0; left:-80%; width:45%; z-index:2;
  background:linear-gradient(104deg, transparent, rgba(255,255,255,.3), transparent); pointer-events:none}
.dcard:hover figure::before{left:135%; transition:left 1s var(--ease)}
/* gradient CTAs (ported from the KokonutUI gradient-button component) */
.btn{transition:background .3s ease, color .3s ease, border-color .3s ease, transform .18s ease, box-shadow .4s ease}
.btn:active{transform:scale(.97)}
.btn.solid{border:1px solid transparent;
  background:linear-gradient(var(--navy), var(--navy)) padding-box,
             linear-gradient(120deg, #0074C8, #60D0E4 55%, #002F6D) border-box}
.btn.solid:hover{color:#fff;
  background:linear-gradient(var(--blue), var(--blue)) padding-box,
             linear-gradient(120deg, #60D0E4, #0074C8 55%, #0AA5B5) border-box;
  box-shadow:0 10px 26px rgba(30,124,214,.32)}
.btn.inv.solid{border:1px solid transparent; color:var(--navy);
  background:linear-gradient(#fff, #fff) padding-box,
             linear-gradient(120deg, #60D0E4, #FFFFFF 45%, #0074C8) border-box}
.btn.inv.solid:hover{color:var(--navy);
  background:linear-gradient(var(--cyan), var(--cyan)) padding-box,
             linear-gradient(120deg, #FFFFFF, #60D0E4 55%, #0074C8) border-box;
  box-shadow:0 10px 26px rgba(96,208,228,.35)}

@media (prefers-reduced-motion:reduce){
  html .io,html .stag > *,html .hl{opacity:1!important; transform:none!important; transition:none!important}
  .rep .th img,.hero-ph,.car-prog i,.dcard figure img,.swb-s,.swb-r i,.rep{transition:none!important}
  html.js .dcard{opacity:1!important; transform:none!important; transition:none!important}
  .fx > *,.fx circle,.fx path,.fx i,.fxg,.sits-bg path{animation:none!important}
  .dcard:hover figure::before{transition:none!important}
}
/* one header for every Miranda page (3 Oct 2026): the same logo size, bar height, link size and link
   spacing on each page. Spacing tightens below 1440px, and every page switches to the menu at 1319px */
.hdr-in{min-height:78px}
.lg img{height:36px}
.nav{gap:1.7rem}
.nav > a,.nav .lang{white-space:nowrap}
.nav > a,.nav button{font-size:.98rem}
@media (max-width:1439px){ .nav{gap:1.15rem} }
@media (max-width:1319px){ .lg img{height:30px} }