/* ============================================================
   UTILITY BAR + HEADER
   ============================================================ */
.utility{
  background:var(--fg-navy-900);color:var(--fg-steel-400);
  font-size:13px;letter-spacing:.01em;
}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:38px}
.utility a:hover{color:#fff}
.utility .u-right{display:flex;align-items:center;gap:22px}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--fg-steel-500);display:inline-block;margin-inline:10px;vertical-align:middle}
@media (max-width:900px){ .utility{display:none} }

.header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--fg-hairline);
}
/* One number, used twice: the bar's height and the offset the mobile menu
   sticks to. They were two literals and would have drifted apart. */
:root{--header-h:62px}
.header .wrap{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.logo img{width:230px;min-width:140px}
@media (max-width:520px){ .logo img{width:170px;min-width:140px} }
.nav{display:flex;align-items:center;gap:28px;margin-inline-start:auto}
/* On the home page the six cards carry these same six destinations, so the
   header repeating them is noise. On every other page the nav is the only way
   across the site, so it stays — and it stays with JavaScript off, where the
   route attribute is never set and the nav simply shows. The burger menu on a
   phone keeps the full list everywhere. */
html[data-route="home"] .nav{display:none}
.nav a{font-size:15px;color:var(--fg-ink-muted);transition:color .15s var(--ease)}
.nav a:hover{color:var(--fg-ink)}
.header-cta{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
@media (min-width:1025px){
  .header-cta{margin-inline-start:0}
  /* the nav was the spacer holding this group against the right edge; with
     the nav hidden on the home page the group needs to push itself */
  html[data-route="home"] .header-cta{margin-inline-start:auto}
}
.lang{
  display:inline-flex;align-items:center;border:1px solid var(--fg-hairline);
  border-radius:var(--r-sm);overflow:hidden;
}
.lang button{
  background:transparent;border:0;padding:7px 12px;font-size:13px;font-weight:500;
  color:var(--fg-ink-muted);cursor:pointer;transition:background .15s,color .15s;
}
.lang button[aria-pressed="true"]{background:var(--fg-navy-800);color:#fff}
/* the account entry sits beside the primary button rather than competing
   with it — one button in the header stays the loudest thing there */
.acctlink{
  font-size:14.5px;font-weight:500;color:var(--fg-ink-muted);white-space:nowrap;
  padding:7px 2px;transition:color .15s var(--ease);
}
.acctlink:hover{color:var(--fg-ink)}
.acctlink.active{color:var(--fg-ink)}
@media (max-width:1180px){ .acctlink{display:none} }
.burger{display:none;background:transparent;border:1px solid var(--fg-hairline);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg-ink);margin:4px 0}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .header-cta .btn--primary{display:none}
}
.mobile-nav{
  display:none;border-bottom:1px solid var(--fg-hairline);background:#fff;
  position:sticky;top:var(--header-h);z-index:55;
}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:16px 24px;border-bottom:1px solid var(--fg-hairline);font-size:16px}
.mobile-nav .btn{margin:20px 24px;width:calc(100% - 48px);justify-content:center}
.mnav-contact{display:grid;gap:10px;padding:4px 24px 24px;font-size:14px;color:var(--fg-ink-muted)}
.mnav-contact a{padding:0;border:0;display:block}
.mnav-contact a:hover{color:var(--fg-ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--fg-navy-900);color:var(--fg-steel-400);padding-block:80px 0;border-top:1px solid rgba(255,255,255,.10)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:48px}
@media (max-width:900px){ .footer__top{grid-template-columns:1fr 1fr;gap:40px} }
@media (max-width:560px){ .footer__top{grid-template-columns:1fr} }
.footer img.flogo{width:250px;margin-bottom:24px}
.footer p.fdesc{font-size:14.5px;max-width:36ch;line-height:1.6}
.footer h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;margin-bottom:20px}
html[dir="rtl"] .footer h5{letter-spacing:.02em;text-transform:none;font-size:15px}
.footer ul{list-style:none;display:grid;gap:12px}
.footer li a{font-size:14.5px;transition:color .15s}
.footer li a:hover{color:#fff}
.fcontact{display:grid;gap:12px;font-size:14.5px}
.fcontact a{display:flex;align-items:center;gap:10px}
.fcontact a:hover{color:#fff}
.footer__legal{
  margin-top:64px;padding-block:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;
}
.footer__legal .regs{display:flex;gap:0 10px;flex-wrap:wrap}
.footer__legal a:hover{color:#fff}
.socials{display:flex;gap:12px;margin-top:24px}
.socials a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  display:grid;place-items:center;transition:border-color .15s,background .15s
}
.socials a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */

/* ============================================================
   MOTION
   ============================================================ */
/* The reveal only applies when JS is running — without it the content stays visible */
html.js .rise{opacity:0;transform:translateY(12px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
html.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}