/* ============================================================
   CSS Ltd — design tokens
   Colour sampled from LOGOCSS.PNG (#4FADEA) and CSS_Profile.pdf (#054289).
   Structural angle: 52° measured from the logo letterforms → skewX(-38deg).
   ============================================================ */
:root{
  --navy-900:#041E3E; --navy-800:#062F63; --navy:#054289; --navy-600:#0E5AAE;
  --cyan:#4FADEA; --cyan-300:#A8D9F6; --cyan-100:#E8F5FD;
  --ink:#0F1A2B; --ink-500:#4A5A70; --ink-300:#8798AC;
  --line:#DCE4ED; --surface:#FFFFFF; --surface-alt:#F5F8FB;
  --cut:-38deg; --wrap:1240px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:52px; --s9:72px;
  --ease:cubic-bezier(.2,0,0,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);
  font:400 1rem/1.65 "Public Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;font-weight:600;margin:0;color:var(--navy-900)}
h1{font-size:clamp(2.25rem,1.4rem + 3.5vw,4.3rem);line-height:1.02;letter-spacing:-.024em}
h2{font-size:clamp(1.65rem,1.2rem + 1.75vw,2.7rem);line-height:1.1;letter-spacing:-.018em}
h3{font-size:1.24rem;line-height:1.3;letter-spacing:-.008em}
p{margin:0 0 1rem}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--navy-600)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px;border-radius:2px}
.dark :focus-visible{outline-color:var(--cyan)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:16px}
@media(min-width:768px){.wrap{padding-inline:24px}}
@media(min-width:1280px){.wrap{padding-inline:32px}}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}
.lede{font-size:1.075rem;color:var(--ink-500);max-width:62ch}
.dark .lede{color:#A9C4DC}
.slash{display:inline-block;width:5px;height:22px;background:var(--cyan);
  transform:skewX(var(--cut));margin-bottom:var(--s4)}
section{padding:var(--s8) 0}
@media(min-width:768px){section{padding:var(--s9) 0}}
@media(min-width:1280px){section{padding:88px 0}}
.head{max-width:64ch;margin-bottom:var(--s7)}
.head p{margin-bottom:0}
.alt{background:var(--surface-alt)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 .95rem/1 "Public Sans",sans-serif;padding:15px 26px;border-radius:3px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .13s var(--ease),color .13s var(--ease),border-color .13s var(--ease)}
.btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--primary:hover{background:var(--navy-800);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:#C3D2E2}
.btn--ghost:hover{border-color:var(--navy)}
.btn--cyan{background:var(--cyan);color:var(--navy-900);border-color:var(--cyan)}
.btn--cyan:hover{background:var(--cyan-300);color:var(--navy-900)}
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.09);color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* utility bar */
.util{background:var(--navy-900);color:#C9DBEC;font-size:.82rem}
.util .wrap{display:flex;align-items:center;gap:var(--s4);min-height:40px}
.util a{color:#C9DBEC;text-decoration:none}
.util a:hover{color:#fff;text-decoration:underline}
.util-right{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.langbtn{background:none;border:1px solid rgba(255,255,255,.2);color:#C9DBEC;
  font:500 .82rem/1 "Public Sans",sans-serif;padding:6px 10px;border-radius:2px;cursor:pointer;
  display:flex;align-items:center;gap:6px}
.langbtn:hover{border-color:#fff;color:#fff}
.langwrap{position:relative}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
  border-radius:3px;min-width:170px;padding:4px;display:none;z-index:120;box-shadow:0 8px 28px rgba(4,30,62,.16)}
.langmenu[data-open]{display:block}
.langmenu a{display:block;padding:9px 12px;color:var(--ink);font-size:.88rem;text-decoration:none;border-radius:2px}
.langmenu a:hover{background:var(--cyan-100);color:var(--navy)}
.langmenu a[aria-current]{font-weight:600;color:var(--navy)}
.util .shop{color:var(--cyan);font-weight:600}

/* header */
.hdr{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:var(--s5);min-height:86px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.logo img{height:44px;width:auto;display:block}
@media(min-width:768px){.logo img{height:54px}}
@media(min-width:1280px){.logo img{height:62px}}
footer .flogo img{height:56px;width:auto;margin-bottom:var(--s4)}
.nav{display:none;margin-left:auto;align-items:center;gap:2px;list-style:none;margin-block:0;padding:0}
@media(min-width:1024px){.nav{display:flex}}
.nav > li{position:relative}
.nav a,.nav button{font:500 .95rem/1 "Public Sans",sans-serif;color:var(--ink);background:none;
  border:0;padding:12px 14px;text-decoration:none;cursor:pointer;display:flex;align-items:center;gap:6px;border-radius:2px}
.nav a:hover,.nav button:hover{color:var(--navy);background:var(--surface-alt)}
.nav ul{position:absolute;left:0;top:100%;min-width:252px;background:#fff;border:1px solid var(--line);
  border-top:2px solid var(--cyan);padding:6px;margin:0;list-style:none;display:none;box-shadow:0 12px 32px rgba(4,30,62,.14)}
.nav li:hover > ul,.nav li:focus-within > ul{display:block}
.nav ul a{padding:10px 12px;font-size:.9rem;display:block}
/* Technical carries 12 items: wider, capped height, scrolls rather than clipping
   or running off the bottom of the viewport */
.nav ul.nav-tech{min-width:326px;max-height:min(70vh,470px);overflow-y:auto;
  overscroll-behavior:contain}
.nav ul.nav-tech a{padding:9px 12px;line-height:1.35}
.nav > li:last-child > ul,.nav > li:nth-last-child(2) > ul{left:auto;right:0}
.burger{margin-left:auto;background:none;border:1px solid var(--line);border-radius:2px;
  padding:11px 13px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:19px;height:2px;background:var(--navy)}
.drawer{position:fixed;inset:0;background:#fff;z-index:150;padding:20px;overflow-y:auto;display:none}
.drawer[data-open]{display:block}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5)}
.drawer-close{background:none;border:1px solid var(--line);border-radius:2px;font-size:1.4rem;
  line-height:1;padding:6px 13px;cursor:pointer;color:var(--navy)}
.drawer nav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);
  font:500 1.05rem/1 "Public Sans",sans-serif;color:var(--ink);text-decoration:none}
.drawer-sub{border-bottom:1px solid var(--line)}
.drawer-sub summary{padding:15px 0;font:500 1.05rem/1 "Public Sans",sans-serif;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer-sub summary::-webkit-details-marker{display:none}
.drawer-sub summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);transform:rotate(45deg);margin-right:4px;
  transition:transform .16s var(--ease)}
.drawer-sub[open] summary::after{transform:rotate(-135deg)}
.drawer-sub ul{list-style:none;margin:0 0 var(--s4);padding:0}
.drawer-sub li a{display:block;padding:13px 0 13px 14px;border-bottom:0;font-size:.95rem;
  color:var(--ink-500);text-decoration:none;border-left:2px solid var(--cyan-100)}
.drawer-sub li a:active,.drawer-sub li a:hover{color:var(--navy);border-left-color:var(--cyan)}
.drawer .btnrow{margin-top:var(--s6);flex-direction:column}
.drawer .btn{width:100%}


/* footer */
.ft{background:#061A2F;color:#A9C4DC;padding:var(--s8) 0 var(--s5);font-size:.9rem;
  border-top:1px solid rgba(92,200,255,.12)}
@media(min-width:768px){.ft{padding:var(--s9) 0 var(--s6)}}
.ft-grid{display:grid;gap:var(--s7);padding:var(--s8) 0 var(--s7)}
@media(min-width:640px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.ft-grid{grid-template-columns:1.5fr .95fr 1.2fr 1.35fr;gap:var(--s7)}}

.ft-logo{height:52px;width:auto;margin-bottom:var(--s5)}
@media(min-width:1080px){.ft-logo{height:60px}}
.ft-desc{margin:0 0 var(--s6);max-width:38ch;line-height:1.65;color:#A9C4DC}
.ft-follow{margin:0 0 var(--s4);font:600 .82rem/1 "Public Sans",sans-serif;color:#fff}
.ft-social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.ft-social li{position:relative}
.ft-social a::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);white-space:nowrap;background:#082B4C;color:#EAF2F8;
  border:1px solid rgba(92,200,255,.25);padding:5px 10px;border-radius:5px;font-size:.74rem;
  pointer-events:none;opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.ft-social a:hover::after,.ft-social a:focus-visible::after{opacity:1;transform:translateX(-50%)}
.ft-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:999px;color:#EAF2F8;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);text-decoration:none;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.ft-social a:hover{background:#0077B6;border-color:rgba(92,200,255,.5);color:#fff;
  transform:translateY(-2px)}

.ft h4{color:#fff;font:600 .82rem/1 "Public Sans",sans-serif;margin:0 0 var(--s4);
  letter-spacing:.02em}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{margin-bottom:11px}
.ft a{color:#A9C4DC;text-decoration:none;transition:color .18s var(--ease)}
.ft a:hover{color:#5CC8FF}
.ft-col a{position:relative}
.ft-contact address{font-style:normal;display:grid;gap:10px}
.ft-contact p{margin:0;line-height:1.6}
/* each group stays on one line — no mid-number wrapping */
.ft-nums{display:flex;flex-wrap:nowrap;align-items:baseline;gap:7px;
  white-space:nowrap;font-size:.83rem}
.ft-nums span{color:rgba(169,196,220,.42)}

.ft-bottom{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);justify-content:space-between;
  align-items:center;padding-top:var(--s5);font-size:.83rem;
  border-top:1px solid rgba(255,255,255,.12)}
.ft-bottom p{margin:0}
.ft-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s5);margin:0;padding:0}
@media(prefers-reduced-motion:reduce){
  .ft-social a:hover{transform:none}
  .ft-social a,.ft a{transition:none}
}

/* whatsapp + cookie */
.wa{position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(4,30,62,.28)}
.wa svg{width:28px;height:28px;fill:#fff}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:130;background:#fff;border-top:3px solid var(--cyan);
  box-shadow:0 -8px 30px rgba(4,30,62,.16);padding:var(--s5) 0}
.cookie[hidden]{display:none}
.cookie .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
.cookie p{margin:0;font-size:.88rem;max-width:62ch;color:var(--ink-500)}
.cookie .btn{padding:11px 18px;font-size:.87rem}

/* motion */
@media(prefers-reduced-motion:no-preference){
  .r{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .r.in{opacity:1;transform:none}
  .r[data-d="1"]{transition-delay:.08s}
  .r[data-d="2"]{transition-delay:.16s}
  .r[data-d="3"]{transition-delay:.24s}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .r{opacity:1;transform:none}
}