@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-500.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format("woff2")}

:root{--navy:#1B2A5A;--navy-deep:#111A38;--red:#C8202A;--muted:#4A5568;--line:#E3E8EF;--bg:#F4F8FA;--soft:#EAF6F8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:#1A2233;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* Logos inside links stay links: no text selection or Live Text over the words in the image. */
a img{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
img{display:block;max-width:100%}
h1,h2{font-family:Outfit,Inter,sans-serif;margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* E1 · hero */
.hero{position:relative;overflow:hidden;background:#0F5E7E;color:#fff}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(8,40,64,.35),rgba(8,40,64,.25))}
.hero-in{position:relative;z-index:1;padding-top:28px;padding-bottom:96px;display:flex;flex-direction:column;gap:56px}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{background:#fff;border-radius:16px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.brand img{height:72px;width:auto;border-radius:10px}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Main button under the headline: the members' login. */
.btn-entra{align-self:flex-start;margin-top:10px;min-height:54px;display:inline-flex;align-items:center;gap:12px;padding:0 28px;background:var(--red);color:#fff;border-radius:999px;font-size:17px;font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:background .2s,transform .2s}
.btn-entra:hover{background:var(--navy);transform:translateY(-2px)}
.legal{background:#fff;border-radius:12px;padding:8px 14px}
.legal img{height:52px;width:auto}
.hero-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.hero-text{flex:1 1 420px;display:flex;flex-direction:column;gap:14px}
.hero h1{font-weight:700;font-size:clamp(38px,5vw,58px);line-height:1.05;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero-text p{margin:0;font-size:16px;line-height:1.5;max-width:520px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.booking{flex:0 1 380px;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:18px;padding:16px 16px 12px;box-shadow:0 20px 50px rgba(0,0,0,.2);transition:transform .2s}
.booking:hover{transform:translateY(-3px)}
.booking img{width:100%;height:auto}
.booking > span{display:flex;justify-content:space-between;font-weight:600;color:var(--navy);padding:0 4px}

/* D2 · partners grouped by type */
.partners{position:relative;z-index:1;margin-top:-48px;padding-bottom:72px;display:flex;flex-direction:column;gap:28px}
.group{background:#fff;border-radius:22px;padding:22px;box-shadow:0 12px 40px rgba(27,42,90,.08);display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.group-photo{position:relative;flex:1 1 260px;max-width:100%;min-height:240px;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;background:var(--navy)}
.group-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.group-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(12,28,58,.75))}
.group-label{position:relative;z-index:1;padding:22px;display:flex;flex-direction:column;gap:4px;color:#fff}
.group-label h2{font-size:28px;line-height:1.15;font-weight:600}
.group-label span{font-size:14px;color:#E3F1F6}
.group-label p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#E3F1F6}
.logos{flex:999 1 640px;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-content:start}
.logo{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s,border-color .2s;outline-offset:3px}
a.logo:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(27,42,90,.12);border-color:#C3CCD8}
span.logo{cursor:default}
.well{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#F7F9FB;overflow:hidden}
.well.dark{background:var(--navy)}
.well.initial{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-family:Outfit,Inter,sans-serif;font-size:44px;font-weight:700}
/* --z: logo size set in the admin area (100 = touches the edges, more = zoomed in). */
.well img{flex:none;width:calc(var(--z,100) * 1%);height:calc(var(--z,100) * 1%);max-width:none;object-fit:contain}
.soon{flex:999 1 640px;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;border:1.5px dashed #C9D3E0;border-radius:16px;background:#F7F9FB;text-align:center}
.soon-mark{width:44px;height:44px;border-radius:999px;background:#fff;color:var(--red);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px rgba(27,42,90,.08)}
.soon p{margin:0;max-width:420px;font-size:16px;line-height:1.5;color:var(--navy);font-weight:500}
.name{font-size:13px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;gap:8px}

/* H3 · destinations map */
.map-block{background:#fff;padding:96px 0 110px}
.split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 32px;margin-bottom:40px}
.split h2{font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.1;color:var(--navy);max-width:620px}
.split p{margin:0;font-size:17px;line-height:1.55;color:var(--muted);max-width:440px}
/* Cards scale with the map (1 design px = 100cqw / 1192) so their footprint matches
   public/map-geometry.js, which keeps featured cards from overlapping. */
.map{position:relative;container-type:inline-size}
.map-img{width:100%;height:auto;opacity:.85}
/* No stacking per pin: open cards above the dots (the rotation in theme-mix.js gives covered dots
   their turn), the hovered card above everything. */
.pin{position:absolute;width:0;height:0}
.pin-dot{z-index:3;transition:width .3s,height .3s,left .3s,top .3s,font-size .3s}
.pin:not(.open) .pin-dot{font-size:0}
.map .pin-card{z-index:1}
.map .pin.open .pin-card{z-index:4}
.map .pin:hover .pin-card,.map .pin:focus-visible .pin-card{z-index:7}
.map .pin:hover .pin-dot,.map .pin:focus-visible .pin-dot{z-index:8}
.pin-dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:999px;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 5px rgba(200,32,42,.18),0 3px 8px rgba(0,0,0,.18);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.pin.open .pin-dot{left:-15px;top:-15px;width:30px;height:30px;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.pin{cursor:pointer;outline:none}
.pin:focus-visible .pin-dot{outline:2px solid var(--navy);outline-offset:3px}
.pin-card{background:#fff;border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(22,24,29,.16);display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.45;color:var(--muted)}
.pin-card img{width:100%;height:96px;object-fit:cover;border-radius:9px}
.pin-card b{font-weight:600;font-size:14px;color:var(--navy)}
.pin-card > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.map .pin-card{--u:calc(100cqw / 1192);position:absolute;top:calc(22 * var(--u));left:calc(-15 * var(--u));width:calc(190 * var(--u));padding:calc(10 * var(--u));border-radius:calc(14 * var(--u));gap:calc(6 * var(--u));font-size:calc(12 * var(--u));visibility:hidden;opacity:0;will-change:opacity;transition:opacity .25s ease .2s,visibility 0s linear .45s,z-index 0s linear .45s}
/* Invisible bridge over the gap between dot and card, so moving the mouse onto the card keeps it open. */
.map .pin-card::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:calc(30 * var(--u))}
.map .pin-card img{height:calc(96 * var(--u));border-radius:calc(9 * var(--u))}
.map .pin-card b{font-size:calc(14 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map .pin.left .pin-card{left:auto;right:calc(-15 * var(--u))}
/* Cards stay open a moment after the mouse leaves, so a slightly off path does not close them. */
/* A card fading out keeps its place on top until it is gone (z-index waits), so it fades as one piece. */
.pin.open .pin-card,.pin:hover .pin-card,.pin:focus-visible .pin-card{visibility:visible;opacity:1;transition:opacity .2s ease,visibility 0s,z-index 0s}
/* While the open cards change turn: the old ones fade out, then the new ones fade in and rise slightly. */
.map.quiet .pin-card{transition:none!important}
.map.turning .pin-card{transition:opacity .8s ease,transform .8s ease,visibility 0s linear .8s,z-index 0s linear .8s;transform:translateY(calc(6 * var(--u)))}
.map.turning .pin.open .pin-card{transition:opacity 1s ease,transform 1s ease,visibility 0s,z-index 0s;transform:none}
.map .pin-card{display:flex}
.pin-list{display:none}
/* Destinations with partners: the card says how many, and a click lists them. */
.pin-more{--a:28px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;font-style:normal;font-weight:600;color:var(--red)}
.avs{display:flex;padding-left:calc(var(--a) * .3)}
.pin-card .av{flex:none;width:var(--a);height:var(--a);margin-left:calc(var(--a) * -.3);border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(22,24,29,.18);display:grid;place-items:center;overflow:hidden;font-size:calc(var(--a) * .4);font-weight:700;color:var(--navy);background:#fff}
.pin-card .av img{width:84%;height:84%;object-fit:contain;border-radius:0}
.pin-card .av.initial{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.pin-card .av.plus{background:var(--navy);color:#fff}
.pin-more .see{white-space:nowrap}
.map .pin-more{--a:calc(26 * var(--u));font-size:calc(12 * var(--u))}
.map .pin-card .av{border-width:calc(2 * var(--u))}
.pin.has-p,.pin-card.has-p{cursor:pointer}
.pin-list .pin-card.has-p{border:1px solid transparent;transition:border-color .2s}
.pin-list .pin-card.has-p:hover{border-color:#C3CCD8}
.dest-dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);color:#1A2233}
.dd-in{padding:24px}
.dest-dialog::backdrop{background:rgba(17,26,56,.55)}
.dd-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dd-head h3{margin:0;font-family:Outfit,Inter,sans-serif;font-size:28px;color:var(--navy)}
.dd-close{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--bg);color:var(--navy);font-size:26px;line-height:1;cursor:pointer}
.dd-close:hover{background:var(--line)}
.dd-note{margin:4px 0 8px;color:var(--muted);font-size:14px}
.dd-body h4{margin:18px 0 10px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dd-body .logos{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* E3 · footer */
footer{background:var(--navy-deep);color:#B5BFD3;font-size:14px;line-height:1.6}
.foot{padding-top:32px;padding-bottom:32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px}
.foot-id{display:flex;align-items:center;gap:18px;flex:1 1 480px}
.foot-logo{flex:none;background:#fff;border-radius:12px;padding:6px}
.foot-logo img{height:44px;width:auto;border-radius:6px}
footer a:hover{color:#fff}
/* Credit to the web agency: small, under the footer line. */
/* Contacts and legal links, with the small credit to the web agency underneath. */
.foot-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.credit{font-size:12px;color:#7F8BA6}
.credit a{color:#9AA6C0;text-decoration:underline;text-underline-offset:2px}

/* /privacy and /cookie */
.legal-page{background:#fff}
.legal-top{border-bottom:1px solid var(--line)}
.legal-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.legal-top .brand{padding:0;box-shadow:none}
.legal-top .brand img{height:52px}
.legal-top .back{min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
.legal-top .back:hover{color:var(--red)}
.legal-body{max-width:760px;padding-top:48px;padding-bottom:72px;color:#2A3346;font-size:16px;line-height:1.65}
.legal-body h1{font-size:clamp(30px,4vw,40px);line-height:1.15;color:var(--navy);margin-bottom:24px}
.legal-body h2{font-size:20px;color:var(--navy);margin:32px 0 8px}
.legal-body p{margin:0 0 12px}
.legal-body ul{margin:0 0 12px;padding-left:22px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal-body .owner{margin-bottom:8px;padding:16px 20px;border-radius:14px;background:var(--bg)}
.legal-body .owner h2{margin-top:0}

#tip{position:fixed;z-index:10;max-width:260px;padding:10px 12px;border-radius:10px;background:var(--navy);color:#fff;font-size:13px;line-height:1.45;box-shadow:0 10px 24px rgba(0,0,0,.2);pointer-events:none}
#tip b{display:block;font-weight:600;margin-bottom:2px}

/* Small laptops: Faro Booking stays next to the title instead of dropping below it. */
@media (max-width:1100px) and (min-width:861px){.hero-text{flex-basis:300px}}
@media (max-width:860px){
  .wrap{padding:0 16px}
  .hero-in{padding-top:16px;padding-bottom:80px;gap:36px}
  .brand img{height:52px}
  .legal{min-height:44px;display:flex;align-items:center}
  .legal img{height:38px}
  /* Text and Faro Booking side by side on tablets and landscape phones, stacked on narrow phones. */
  .hero-text{flex-basis:300px}
  .booking{flex:1 1 300px;max-width:380px}
  .group{padding:14px;gap:16px}
  .group-photo{min-height:150px;flex-basis:100%}
  .group-label{padding:18px}
  .group-label h2{font-size:24px}
  .logos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .soon{min-height:150px;padding:24px 18px}
  .map-block{padding:64px 0 72px}
  .split{margin-bottom:28px}
  .split p{font-size:16px}
  /* The cards are listed below the map, so the pins are only markers. */
  .pin{pointer-events:none}
  .pin .pin-card{display:none!important}
  .pin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:24px}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(32px,10vw,42px)}
  .logos{grid-template-columns:1fr 1fr}
  .well.initial{font-size:36px}
  /* Compact list: photo on the left, text on the right. */
  .pin-list{grid-template-columns:1fr;gap:10px}
  .pin-list .pin-card:has(> img){display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;gap:2px 12px;align-items:start}
  .pin-list .pin-card:has(> img) > img{grid-row:1/3;height:72px}
  .pin-list .pin-card .pin-more{grid-column:1/-1;margin-top:8px}
  .dd-in{padding:18px}
  .dd-head h3{font-size:22px}
  .dd-body .logos{grid-template-columns:1fr 1fr}
  .foot-id{flex-direction:column;align-items:flex-start;gap:12px;flex-basis:100%}
}
@media (max-width:480px){
  /* Logo and Legal Travel share the first row when they fit. */
  .top{gap:12px}
  .top nav{display:contents}
  .hero-in{gap:28px}
}
@media (max-width:420px){.btn-entra{min-height:50px;padding:0 22px;font-size:16px}.legal{padding:4px 8px}}
/* Landscape phones: less vertical padding so the hero fits the short screen. */
@media (max-width:960px) and (max-height:500px) and (orientation:landscape){.hero-in{padding-top:14px;gap:24px}}
/* Touch screens: bigger tap area for the small footer links. */
@media (pointer:coarse){footer .links a{display:inline-block;padding:12px 0}}
@media (max-width:860px){.foot-end{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pin-dot,.map .pin-card,.map.turning .pin-card,.map.turning .pin.open .pin-card{transition:none;transform:none}.booking,.logo,.btn-entra{transition:none}}