/* North Cyprus Transfers — shared stylesheet
   GENERATED SOURCE OF TRUTH: this file is hand-maintained; the HTML around it
   comes from _src/build.mjs. Direction: "Gece Konsiyerji" (dark luxury).
   Logical properties throughout so Hebrew (dir=rtl) mirrors without a second sheet. */

:root{
  --bg:#0B0D11;--bg-2:#0E1219;--panel:#141924;--panel-2:#1A2130;
  --ivory:#F3EEE2;--ivory-dim:rgba(243,238,226,.62);--ivory-faint:rgba(243,238,226,.36);
  --copper:#C67A3E;--copper-soft:#E0A265;--copper-bright:#F2C88E;--copper-deep:#9A5A28;
  --line:rgba(243,238,226,.1);--line-copper:rgba(198,122,62,.42);
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
  --z-bg:0;--z-atmo:1;--z-body:2;--z-header:50;--z-bar:100;
  --header-h:140px;
  --sbw:0px; /* vertical scrollbar width, measured in nct.js */
}
/* Hebrew: Cormorant/Inter carry no Hebrew glyphs — swap the whole face,
   and drop tracking (Hebrew letterforms break under positive letter-spacing). */
html[lang="he"]{--serif:'Frank Ruhl Libre',Georgia,serif;--sans:'Heebo',system-ui,sans-serif}
html[lang="he"] .micro,html[lang="he"] .brand-name .s,html[lang="he"] .f-col h4,
html[lang="he"] .field label,html[lang="he"] .mk .tag,html[lang="he"] .topbar{letter-spacing:0}
html[lang="he"] h1,html[lang="he"] h2,html[lang="he"] h3{letter-spacing:0}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
/* overflow-x:hidden is a seatbelt, not a fix: it clips overflow instead of
   preventing it, and it hid a 180px header overrun on every phone. Every
   breakpoint below is expected to fit with the seatbelt off. */
body{background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
::selection{background:var(--copper);color:#0B0D11}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.01em;overflow-wrap:break-word}
h1 em,h2 em{font-style:italic;color:var(--copper-soft)}
p,dd,li,figcaption{overflow-wrap:break-word}
.micro{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
/* viewport-fit=cover lets the notch overlap us in landscape; keep copy clear of it */
.wrap{max-width:1280px;margin:0 auto;position:relative;z-index:var(--z-body);
  padding-inline:max(44px, env(safe-area-inset-left)) max(44px, env(safe-area-inset-right))}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper-soft);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- atmosphere ---------- */
#gl{position:fixed;inset:0;z-index:var(--z-bg);display:block;background:radial-gradient(900px 620px at 82% 8%,rgba(198,122,62,.22),transparent 60%),var(--bg)}
.atmo{position:fixed;inset:0;z-index:var(--z-atmo);pointer-events:none}
.atmo.fog{background:linear-gradient(180deg,transparent 62%,rgba(11,13,17,.66) 90%,var(--bg) 100%)}
.atmo.vig{background:radial-gradient(120% 92% at 50% 40%,transparent 56%,rgba(0,0,0,.4))}
.atmo.grain{opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scrollbar{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;background:linear-gradient(90deg,var(--copper),var(--copper-bright));z-index:calc(var(--z-bar) + 1);box-shadow:0 0 12px var(--copper);pointer-events:none}

/* ---------- topbar ---------- */
.topbar{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);padding:10px 16px;border-bottom:1px solid var(--line);text-align:center}
.topbar .tb{display:inline-flex;align-items:center;gap:18px}
.topbar .tb::after{content:"·";color:var(--copper);opacity:.6}
.topbar .tb:last-child::after{content:none}
.topbar b{color:var(--copper-soft);font-weight:600}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-header)}
header{backdrop-filter:blur(12px);background:rgba(11,13,17,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;padding:14px 0}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ivory);min-width:0}
.mono{width:44px;height:44px;flex:none;object-fit:contain}
.brand-name{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-name .t{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name .s{font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--copper-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;gap:24px;margin-inline-start:auto}

/* hamburger + drawer: below 1080px the primary nav is hidden, so this is the
   only route to the fleet, routes, guides, FAQ and the other languages */
.menu-btn{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;background:rgba(243,238,226,.03);cursor:pointer;
  transition:border-color .2s,background .2s}
.menu-btn:hover{border-color:var(--line-copper)}
.menu-btn .bars{display:block;width:19px;height:14px;position:relative}
.menu-btn .bars i{position:absolute;left:0;right:0;height:1.8px;background:var(--ivory);border-radius:2px;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .18s}
.menu-btn .bars i:nth-child(1){top:0}
.menu-btn .bars i:nth-child(2){top:6.1px}
.menu-btn .bars i:nth-child(3){top:12.2px}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu-btn .bars i{transition:none}}

/* absolutely positioned under the sticky header, so opening it overlays the page
   instead of shoving every section down by the height of the panel */
.drawer{position:absolute;top:100%;left:0;right:0;z-index:1;
  background:rgba(11,13,17,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-copper);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85);
  max-height:min(74vh,560px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer[hidden]{display:none}
/* locking the scroll removes the scrollbar and widens the viewport; pad by exactly
   its width so the page does not jump sideways when the menu opens */
body.drawer-open{overflow:hidden;padding-inline-end:var(--sbw)}
.drawer-inner{padding-block:14px calc(20px + env(safe-area-inset-bottom))}
.drawer-links{display:flex;flex-direction:column}
.drawer-links a{display:flex;align-items:center;min-height:52px;text-decoration:none;color:var(--ivory-dim);
  font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.drawer-links a:hover,.drawer-links a:focus-visible{color:var(--ivory)}
.langs--drawer{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:18px 0 6px;background:none}
.langs--drawer .lang{flex:1 1 calc(50% - 4px);min-height:48px;justify-content:flex-start;gap:10px;
  border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.langs--drawer .lang .flag{width:20px;height:20px}
.langs--drawer .lang .name{font-size:14px;font-weight:600;letter-spacing:0}
.langs--drawer .lang .code{margin-inline-start:auto;font-size:10px;opacity:.7}
.langs--drawer .lang.on{border-color:transparent}
.drawer-cta{width:100%;margin-top:14px}
.nav-links a{color:var(--ivory-dim);text-decoration:none;font-size:13.5px;font-weight:500;position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--ivory)}
.nav-links a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:1.5px;background:var(--copper);transition:width .25s}
.nav-links a:hover::after{width:100%}

/* flag language switcher (real links, one per locale) */
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:99px;padding:3px;background:rgba(11,13,17,.4)}
.langs .lang{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.05em;padding:7px 10px;border-radius:99px;color:var(--ivory-faint);transition:background .2s,color .2s;min-height:34px;cursor:pointer}
.langs .lang .flag{display:block;width:17px;height:17px;flex:none;line-height:0}
.langs .lang .flag svg{display:block;width:100%;height:100%;border-radius:50%;opacity:.72;transition:opacity .2s,box-shadow .2s}
.langs .lang:hover{color:var(--ivory);background:rgba(243,238,226,.06)}
.langs .lang:hover .flag svg{opacity:1}
.langs .lang.on{background:var(--copper);color:#160D06}
.langs .lang.on .flag svg{opacity:1;box-shadow:0 0 0 1.5px rgba(22,13,6,.35)}
@media(max-width:1180px){.langs .lang .code{display:none}.langs .lang{padding:7px 9px}}

/* ---------- live rates ticker (sticky, under the nav) ---------- */
.rates-bar{position:relative;overflow:hidden;background:rgba(18,22,31,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
/* A symmetric mask fades both ends without caring which way the text runs,
   so Hebrew (rtl) needs no override and no colour has to match the bar. */
.rates-track{display:flex;width:max-content;animation:rates-slide 42s linear infinite;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
html[dir="rtl"] .rates-track{animation-name:rates-slide-rtl}
.rates-set{display:flex;align-items:center;gap:34px;padding:9px 17px;white-space:nowrap}
.rate-item{display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--ivory-dim)}
.rate-item .pair{font-weight:600;letter-spacing:.1em;color:var(--copper-soft);font-variant-numeric:tabular-nums}
.rate-item .val{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--copper-bright);line-height:1;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.rate-sep{width:5px;height:5px;border-radius:50%;background:var(--copper);opacity:.5;flex:none}
.rates-live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-faint)}
.rates-live i{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulseDot 2s infinite;flex:none}
@keyframes rates-slide{to{transform:translateX(-50%)}}
@keyframes rates-slide-rtl{to{transform:translateX(50%)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
  .rates-track{animation:none;width:100%;justify-content:center;overflow-x:auto}
  .rates-set:nth-child(2){display:none}
  .rates-live i{animation:none}
}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;padding:14px 24px;min-height:48px;border-radius:12px;cursor:pointer;border:0;text-decoration:none;overflow:hidden;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s;isolation:isolate}
.btn-copper{color:#160D06;background:linear-gradient(178deg,var(--copper-bright),var(--copper) 46%,var(--copper-deep));box-shadow:0 1px 0 rgba(255,236,210,.55) inset,0 -8px 16px rgba(90,45,15,.4) inset,0 12px 30px -8px rgba(198,122,62,.6),0 2px 6px rgba(0,0,0,.4)}
.btn-copper::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,248,235,.5) 48%,transparent 66%);transform:translateX(-130%);transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.btn-copper:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,236,210,.6) inset,0 -8px 16px rgba(90,45,15,.4) inset,0 20px 44px -8px rgba(198,122,62,.75),0 4px 10px rgba(0,0,0,.45)}
.btn-copper:hover::before{transform:translateX(130%)}
.btn-copper:active{transform:translateY(0);box-shadow:0 2px 8px rgba(90,45,15,.6) inset}
.btn-ghost{color:var(--ivory);background:transparent;border:1px solid var(--line-copper)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(198,122,62,.18),rgba(198,122,62,.06));transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-ghost:hover{border-color:var(--copper-soft);box-shadow:0 8px 26px -10px rgba(198,122,62,.5)}
.btn-ghost:hover::before{transform:scaleY(1)}
.btn .wa{width:17px;height:17px;fill:currentColor;flex:none}
.btn-sm{padding:11px 18px;min-height:42px;font-size:13px;border-radius:10px}
@media(prefers-reduced-motion:reduce){.btn,.btn::before{transition:none!important;transform:none!important}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:var(--z-body);padding:58px 0 40px}
/* above .cfg-shell, whatever the backdrop does: the chips must never be dimmed by it */
.hero-grid{display:grid;grid-template-columns:1.02fr 1.15fr;gap:56px;align-items:center;perspective:1400px;z-index:3}
.kicker{display:inline-flex;align-items:center;gap:12px;color:var(--copper-soft);margin-bottom:24px}
.kicker::before{content:"";width:34px;height:1.4px;background:linear-gradient(90deg,var(--copper),transparent)}
html[dir="rtl"] .kicker::before{background:linear-gradient(270deg,var(--copper),transparent)}
.hero h1{font-size:clamp(46px,5.4vw,78px);margin-bottom:24px;letter-spacing:-.02em}
.hero h1 .l2{display:block}
.hero-sub{font-size:17px;line-height:1.65;color:var(--ivory-dim);max-width:46ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--ivory-dim);border:1px solid var(--line);border-radius:99px;padding:7px 13px;background:rgba(243,238,226,.02)}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--copper-soft);flex:none;box-shadow:0 0 8px var(--copper)}
.hero-visual{position:relative;transform-style:preserve-3d}
.veh-frame{position:relative;border-radius:22px;overflow:hidden;transform:translateZ(40px);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px var(--line-copper),0 0 60px -10px rgba(198,122,62,.35);will-change:transform}
.veh-frame img{display:block;width:100%;height:auto;filter:saturate(1.05) contrast(1.04)}
.veh-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,13,17,.5)),radial-gradient(120% 80% at 50% 120%,rgba(198,122,62,.2),transparent 60%);pointer-events:none}
.veh-frame::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;background:linear-gradient(140deg,rgba(242,200,142,.7),transparent 40%,transparent 70%,rgba(198,122,62,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.veh-tag{position:absolute;inset-inline-start:22px;bottom:20px;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(11,13,17,.6);backdrop-filter:blur(10px);border:1px solid var(--line-copper)}
.veh-tag .star{width:26px;height:26px;flex:none}
.veh-tag .txt b{font-family:var(--serif);font-size:17px;font-weight:700;display:block;line-height:1.2}
.veh-tag .txt span{font-size:11px;color:var(--ivory-dim);letter-spacing:.04em}
.veh-float{position:absolute;inset-inline-end:16px;top:16px;z-index:4;padding:10px 14px;border-radius:12px;background:rgba(20,25,36,.78);backdrop-filter:blur(8px);border:1px solid var(--line-copper);font-size:11.5px;color:var(--ivory-dim);white-space:nowrap;will-change:transform}
.veh-float b{color:var(--copper-bright);font-weight:600}

/* ---------- booking form ---------- */
/* Larnaca arrivals sits behind the form: full-bleed, masked at both ends, dimmed
   hard enough to read through, and drifting a few pixels as the page scrolls. */
.cfg-shell{position:relative;isolation:isolate}
/* full-bleed: physical props on purpose — a centred backdrop has no reading direction.
   100vw counts the vertical scrollbar but the layout box does not, so a bare 100vw
   overflows by the scrollbar width. --sbw is measured once in nct.js. */
/* Starts level with the form. It used to reach 90px higher, and its dimming scrim
   sat on top of the hero chips ("Prices from £100", "Flight tracked", ...) and
   greyed them out. */
/* The fade lives on the container, not the image. On the image it was measured
   against the image box, which is taller than the container and drifts with the
   parallax, so the top of the photo met the hero on a hard horizontal seam. */
.cfg-bg{position:absolute;top:-18px;bottom:-96px;left:50%;width:calc(100vw - var(--sbw));transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent)}
/* framed on the terminal, not on the roundabout sign — legible signage behind a
   form reads as clutter, and it collided with the trust strip below */
.cfg-bg img{display:block;width:100%;height:138%;margin-top:-19%;object-fit:cover;object-position:center 26%;
  opacity:.4;filter:saturate(.82) contrast(1.06) brightness(1.02);will-change:transform}
/* the scrim only has to protect the copy that sits over the photo — the form has
   its own frosted panel, so it can be lighter than it was */
.cfg-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 46%,rgba(11,13,17,.18),rgba(11,13,17,.78) 82%)}
@media(prefers-reduced-motion:reduce){.cfg-bg img{transform:none!important;will-change:auto}}
@media(max-width:768px){.cfg-bg{inset-block:-14px -70px}.cfg-bg img{opacity:.3}}

.configurator{position:relative;z-index:5;max-width:1000px;margin:26px auto 0;padding:32px 32px 28px;border-radius:24px;background:linear-gradient(180deg,rgba(26,33,48,.88),rgba(16,20,28,.92));backdrop-filter:blur(18px);border:1px solid var(--line-copper);box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 1px 0 rgba(243,238,226,.06) inset;color-scheme:dark}
.cfg-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:15px;flex-wrap:wrap}
.cfg-title{font-family:var(--serif);font-size:29px;font-weight:700;color:var(--ivory);line-height:1}
.cfg-title b{color:var(--copper-soft);font-style:italic;font-weight:700}
.cfg-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:inline-flex;position:relative;background:rgba(11,13,17,.6);border:1px solid var(--line);border-radius:11px;padding:4px}
.seg button{position:relative;z-index:2;border:0;background:transparent;color:var(--ivory-dim);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;padding:9px 18px;min-height:40px;border-radius:8px;cursor:pointer;transition:color .25s}
.seg button.on{color:#160D06}
.seg .pill{position:absolute;z-index:1;top:4px;bottom:4px;border-radius:8px;background:linear-gradient(178deg,var(--copper-bright),var(--copper));transition:left .3s cubic-bezier(.3,.7,.3,1),width .3s;box-shadow:0 4px 12px -3px rgba(198,122,62,.6)}
.cfg-note{font-size:11.5px;color:var(--ivory-faint);letter-spacing:.02em}
/* nowrap only where there is room for it; on a phone it pushed the form sideways */
@media(min-width:1081px){.cfg-note--fix{white-space:nowrap}}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.cfg-grid .field:last-child{grid-column:1/-1}
.field{position:relative;border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:rgba(11,13,17,.4);transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--copper-soft);box-shadow:0 0 0 3px rgba(198,122,62,.15)}
.field label{display:block;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:3px}
.field .val{display:flex;align-items:center;gap:8px}
/* 16px exactly: iOS Safari zooms the whole page when a focused control is smaller */
.field select,.field input,.field textarea{border:0;outline:0;background:transparent;color:var(--ivory);font-family:var(--sans);font-size:16px;font-weight:500;width:100%;max-width:100%;cursor:pointer;min-height:26px}
.field select option{background:#141924;color:var(--ivory)}
.field .pin{width:13px;height:13px;fill:var(--copper-soft);flex:none}
.field .opt{color:var(--ivory-faint);font-weight:500;letter-spacing:.02em;text-transform:none}
.field input[type=date]{cursor:pointer}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(72%) sepia(38%) saturate(560%) hue-rotate(340deg) brightness(95%);cursor:pointer;opacity:.9}
.field input::placeholder,.field textarea::placeholder{color:var(--ivory-faint)}
.cfg-out{display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.price-chip{display:flex;align-items:baseline;gap:8px}
.price-chip .amt{font-family:var(--serif);font-size:46px;font-weight:700;color:var(--copper-bright);line-height:1;direction:ltr;unicode-bidi:isolate}
.price-chip .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);max-width:14ch;line-height:1.3}
.cfg-out .veh-mini{font-size:12.5px;color:var(--ivory-dim)}
.cfg-out .veh-mini b{color:var(--ivory)}
.cfg-out .spacer{flex:1}
#config{scroll-margin-top:calc(var(--header-h) + 12px)}
#bookBtn{padding:16px 30px;font-size:15px;min-height:56px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(24px);animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}.d5{animation-delay:.54s}.d6{animation-delay:.68s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .rise{animation:none;opacity:1;transform:none}
  .marq{animation:none}
}

/* ---------- trust strip ---------- */
.trust{position:relative;z-index:var(--z-body);margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .row{display:flex;justify-content:space-between;gap:14px;padding:18px 0;flex-wrap:wrap}
.trust .item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ivory-dim)}
.trust .item svg{width:16px;height:16px;stroke:var(--copper-soft);fill:none;stroke-width:1.6;flex:none}

/* ---------- sections ---------- */
section.blk{position:relative;z-index:var(--z-body);padding:96px 0;scroll-margin-top:calc(var(--header-h) + 8px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:48px}
.sec-head h2{font-size:clamp(32px,3.8vw,50px)}
.sec-head .lead{max-width:360px;font-size:14px;color:var(--ivory-dim);padding-bottom:6px}
@media(max-width:860px){.sec-head{flex-direction:column;align-items:flex-start;gap:16px}.sec-head .lead{max-width:none}}

/* fleet */
.vito{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.vito h2 .big{font-size:clamp(38px,4.6vw,62px);display:block}
.vito .intro{font-size:15px;color:var(--ivory-dim);margin:18px 0 26px;max-width:46ch;line-height:1.7}
.vito .intro b{color:var(--copper-soft);font-weight:600}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.feats .f{background:var(--bg-2);padding:16px 18px}
.feats .f .k{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--copper-bright)}
.feats .f .d{font-size:12px;color:var(--ivory-dim);margin-top:2px}
.one-note{margin-top:22px;font-size:13px;color:var(--ivory-faint);border-inline-start:2px solid var(--copper);padding-inline-start:12px;font-style:italic;font-family:var(--serif)}
.vito-gallery{position:relative;padding-bottom:6px}
.vg-main{border-radius:20px;overflow:hidden;border:1px solid var(--line-copper);box-shadow:0 34px 80px -30px rgba(0,0,0,.85),0 0 60px -24px rgba(198,122,62,.4);position:relative;margin:0}
.vg-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(11,13,17,.4));pointer-events:none}
.vg-main img{display:block;width:100%;height:auto;filter:saturate(1.03) contrast(1.02)}
.vg-inset{position:absolute;inset-inline-end:-16px;bottom:-20px;width:44%;border-radius:14px;overflow:hidden;border:1px solid var(--line-copper);box-shadow:0 22px 50px -16px rgba(0,0,0,.9);background:var(--bg-2);margin:0}
.vg-inset img{display:block;width:100%;height:auto}
.vg-badge{position:absolute;inset-inline-start:15px;top:15px;z-index:3;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-bright);background:rgba(11,13,17,.55);backdrop-filter:blur(8px);border:1px solid var(--line-copper);border-radius:99px;padding:8px 13px}
#vito{background:radial-gradient(680px 460px at 12% 26%,rgba(198,122,62,.09),transparent 62%)}
@media(max-width:1080px){.vg-inset{width:40%;inset-inline-end:2px;bottom:-14px}}
@media(max-width:560px){.vg-inset{position:static;width:66%;margin:-34px auto 0;inset-inline-end:auto;bottom:auto}}

/* crossing */
.crossing{background:linear-gradient(180deg,transparent,rgba(20,25,36,.5) 40%,transparent)}
.review-card legend{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:0}
.cross-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.step{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .no{font-family:var(--serif);font-size:32px;font-weight:600;font-style:italic;color:var(--copper-soft);min-width:48px;line-height:1}
.step h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--ivory-dim);line-height:1.65;max-width:44ch}
.cross-map{border:1px solid var(--line-copper);border-radius:20px;padding:34px 30px 26px;background:rgba(11,13,17,.4)}
.cross-map .micro{color:var(--copper-soft);display:block;margin-bottom:20px}
/* The map is geography, not prose: it never mirrors, whatever the language does.
   Clipped to the viewBox — the coastline runs past the frame, as a map crop should,
   and every label sits inside the box, so nothing is lost to the clip. */
.cmap{display:block;width:100%;height:auto;direction:ltr;overflow:hidden;border-radius:14px;
  box-shadow:0 0 0 1px rgba(198,122,62,.16) inset}
.cmap-halo{fill:none;stroke:rgba(198,122,62,.55);stroke-width:7;stroke-linejoin:round;filter:blur(7px);opacity:.5}
.cmap-land{stroke:rgba(224,162,101,.5);stroke-width:1.5;stroke-linejoin:round}

/* three passes over the same geometry:
   base   — the road is always there, faint
   route  — draws itself in when the section arrives
   runner — a short bright dash that keeps travelling it, Larnaca to Kyrenia */
.cmap-route-base{fill:none;stroke:rgba(224,162,101,.36);stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round}
.cmap-route{fill:none;stroke:var(--copper-bright);stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 11px rgba(224,162,101,.75));
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.crossing.seen .cmap-route{stroke-dashoffset:0}
.cmap-runner{fill:none;stroke:#FFF6EA;stroke-width:6.2;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 12px rgba(255,228,186,1));
  stroke-dasharray:34 calc(var(--len) - 34);stroke-dashoffset:var(--len)}
.crossing.seen .cmap-runner{opacity:1;animation:cmap-run 4.6s linear 2.4s infinite}
@keyframes cmap-run{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

.cmap-dot{fill:var(--copper-bright)}
.cmap-ring{fill:none;stroke:rgba(224,162,101,.55);stroke-width:1.5}
.cmap-ping{fill:none;stroke:var(--copper-soft);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.crossing.seen .cmap-ping{animation:cmap-ping 3.2s cubic-bezier(.2,.7,.2,1) 2.6s infinite}
.crossing.seen .cmap-ping--slow{animation-delay:4.2s}
@keyframes cmap-ping{0%{transform:scale(.6);opacity:.85}70%{opacity:0}100%{transform:scale(2.6);opacity:0}}
.cmap-diamond{fill:var(--bg-2);stroke:var(--copper-bright);stroke-width:2.6}

/* a dark outline behind the type keeps it readable wherever it crosses the coast */
.cmap-label,.cmap-sub,.cmap-stat{paint-order:stroke fill;stroke:rgba(8,10,14,.72);stroke-linejoin:round}
.cmap-label{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:#FFF6E9;stroke-width:5}
.cmap-sub{font-family:var(--sans);font-size:17px;fill:rgba(243,238,226,.62);letter-spacing:.03em;stroke-width:4}
.cmap-label--end{text-anchor:end}
.cmap-stat{font-family:var(--serif);font-size:26px;font-weight:700;fill:var(--copper-bright);text-anchor:middle;stroke-width:5}
html[lang="he"] .cmap-label{letter-spacing:0}
.cmap-credit{margin-top:16px;font-size:10.5px;color:var(--ivory-faint);letter-spacing:.03em}
@media(prefers-reduced-motion:reduce){
  .cmap-route{stroke-dashoffset:0!important;transition:none}
  .cmap-runner{display:none}
  .cmap-ping{display:none}
}
/* the viewBox is 900 units wide but only ~314px on a phone, so type set in user
   units shrinks with it — scale it back up to stay readable */
@media(max-width:900px){
  .cmap-label{font-size:26px}
  .cmap-sub{font-size:22px}
  .cmap-stat{font-size:34px}
}
@media(max-width:560px){
  .cross-map{padding:24px 18px 20px}
  .cmap-label{font-size:34px;letter-spacing:.06em}
  .cmap-sub{font-size:26px}
  .cmap-stat{font-size:42px}
}

/* ---------- route cards (real pages) ---------- */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(26,33,48,.55),rgba(16,20,28,.55));text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.rcard:hover{transform:translateY(-5px);border-color:var(--line-copper);box-shadow:0 26px 54px -24px rgba(0,0,0,.82)}
.rcard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.rcard-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .rcard-img img{transform:scale(1.05)}
.rcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,13,17,.85))}
.rcard-meta{position:absolute;inset-inline-start:14px;bottom:12px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.rcard-meta span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory);background:rgba(11,13,17,.62);backdrop-filter:blur(6px);border:1px solid var(--line-copper);border-radius:99px;padding:5px 10px}
.rcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.rcard-body h3{font-size:23px;font-weight:700;line-height:1.2;margin-bottom:9px}
.rcard-body p{font-size:12.8px;color:var(--ivory-dim);line-height:1.6;flex:1}
.rcard-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rcard-price{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--copper-bright);direction:ltr;unicode-bidi:isolate}
.rcard-price small{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-faint);display:block;margin-bottom:2px}
/* Arrows live in CSS, not in the copy, so they point the way the language reads. */
.rcard-go{font-size:12px;font-weight:600;color:var(--copper-soft);white-space:nowrap}
.rcard-go::after{content:" →"}
html[dir="rtl"] .rcard-go::after{content:" ←"}
html[dir="rtl"] .btn svg:not(.wa){transform:scaleX(-1)}
@media(max-width:1080px){.route-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.route-grid{grid-template-columns:1fr}}

/* ---------- language cards ---------- */
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mk{position:relative;border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:linear-gradient(180deg,rgba(26,33,48,.5),rgba(16,20,28,.5));min-height:250px;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.mk:hover{transform:translateY(-5px);border-color:var(--line-copper);box-shadow:0 26px 54px -24px rgba(0,0,0,.82)}
.mk::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--copper),transparent)}
.mk .tag{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-soft);margin-bottom:16px}
.mk h3{font-size:22px;font-weight:700;line-height:1.22;margin-bottom:10px}
.mk p{font-size:12.5px;color:var(--ivory-dim);flex:1;line-height:1.55}
.mk .cta{margin-top:14px;font-size:12px;font-weight:600;color:var(--copper-soft);width:max-content;border-bottom:1px solid var(--line-copper);padding-bottom:2px}

/* ---------- promo film ---------- */
.film{background:radial-gradient(620px 420px at 78% 40%,rgba(198,122,62,.08),transparent 64%)}
.film-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:60px;align-items:center}
.film-card{margin:0;position:relative;max-width:330px;border-radius:22px;overflow:hidden;
  border:1px solid var(--line-copper);background:var(--bg-2);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9),0 0 70px -30px rgba(198,122,62,.45)}
.film-card video{display:block;width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;background:var(--bg-2)}
.film-copy .micro{color:var(--copper-soft);display:block;margin-bottom:16px}
.film-copy h2{font-size:clamp(32px,3.8vw,52px);margin-bottom:18px}
.film-copy p{font-size:15.5px;line-height:1.75;color:var(--ivory-dim);max-width:46ch;margin-bottom:28px}
@media(max-width:900px){
  .film-grid{grid-template-columns:1fr;gap:34px;justify-items:center;text-align:center}
  .film-copy p{margin-inline:auto}
  .film-card{max-width:280px}
}

/* ---------- resorts marquee ---------- */
.resorts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;overflow:hidden;position:relative;z-index:var(--z-body)}
.resorts .micro{text-align:center;color:var(--copper-soft);display:block;margin-bottom:24px}
.marq{display:flex;width:max-content;animation:slide 44s linear infinite}
.marq-t{display:flex;align-items:center;gap:44px;padding-inline-end:44px}
.marq-t span{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ivory-dim);white-space:nowrap}
.marq-t i{width:6px;height:6px;border-radius:50%;background:var(--copper);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.faq{border:1px solid var(--line);border-radius:16px;padding:28px 26px;background:rgba(20,25,36,.4);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.faq:hover{transform:translateY(-4px);border-color:var(--line-copper)}
.faq h3{font-size:20px;font-weight:700;line-height:1.25;margin-bottom:12px}
.faq p{font-size:13px;color:var(--ivory-dim);line-height:1.65}
.faq p b{color:var(--copper-soft)}
@media(max-width:1080px){.faq-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.faq-grid{grid-template-columns:1fr}}

/* ---------- review / rate-us ---------- */
.review-sec{background:radial-gradient(720px 420px at 18% 30%,rgba(198,122,62,.08),transparent 62%)}
.review-card{max-width:720px;margin:0 auto;padding:34px 34px 30px;border-radius:22px;border:1px solid var(--line-copper);background:linear-gradient(180deg,rgba(26,33,48,.82),rgba(16,20,28,.88));box-shadow:0 40px 90px -34px rgba(0,0,0,.8);color-scheme:dark}
/* DOM order is 5→1 and the row is reversed, so the visual order reads 1→5 and the
   `~` sibling selector can light every star below the one you touch. */
.stars{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;margin-bottom:20px}
html[dir="rtl"] .stars{justify-content:flex-start}
/* 16px even though they are invisible: focusing a smaller control still makes iOS zoom */
.stars input{position:absolute;inset-inline-start:0;top:0;opacity:0;width:1px;height:1px;pointer-events:none;font-size:16px}
.stars label{cursor:pointer;line-height:0;padding:2px;border-radius:6px}
.stars svg{width:34px;height:34px;fill:rgba(243,238,226,.16);transition:fill .18s,transform .18s}
.stars label:hover svg,.stars label:hover ~ label svg,
.stars input:checked ~ label svg{fill:var(--copper-bright)}
.stars label:hover svg{transform:scale(1.12)}
.stars input:focus-visible + label{outline:2px solid var(--copper-soft);outline-offset:2px}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field textarea{resize:vertical;min-height:88px;line-height:1.6;cursor:text;font-size:16px}
.review-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px}
.review-foot .note{font-size:11.5px;color:var(--ivory-faint);max-width:38ch;line-height:1.5}
@media(max-width:640px){.review-grid{grid-template-columns:1fr}.review-card{padding:26px 20px 24px}.stars svg{width:30px;height:30px}}

/* ---------- route page ---------- */
.crumbs{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ivory-faint);margin-bottom:26px}
.crumbs a{color:var(--ivory-faint);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--copper-soft)}
.rp-hero{position:relative;z-index:var(--z-body);padding:52px 0 34px}
.rp-hero h1{font-size:clamp(36px,4.6vw,66px);margin-bottom:20px;letter-spacing:-.02em}
/* The glyph itself is already direction-correct (routes.common.arrow) — do not flip it. */
.rp-hero h1 .arrow{color:var(--copper);font-style:normal;padding:0 .12em}
.rp-teaser{font-size:17px;line-height:1.65;color:var(--ivory-dim);max-width:62ch;margin-bottom:32px}
.rp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);margin-bottom:30px;max-width:900px}
.rp-facts>div{background:var(--bg-2);padding:16px 18px}
.rp-facts dt{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:6px}
.rp-facts dd{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ivory);line-height:1.2}
.rp-facts dd.accent{color:var(--copper-bright)}
.rp-pricenote{font-size:12px;color:var(--ivory-faint);max-width:64ch;line-height:1.6;margin-top:18px}
.rp-shot{position:relative;z-index:var(--z-body);max-width:1280px;margin:0 auto;padding:0 44px}
.rp-shot img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:22px;border:1px solid var(--line-copper);box-shadow:0 40px 90px -34px rgba(0,0,0,.85)}
.rp-block{padding:76px 0}
.rp-cols{display:grid;grid-template-columns:1.5fr .85fr;gap:56px;align-items:start}
.rp-prose h2{font-size:clamp(28px,3vw,40px);margin-bottom:22px}
.rp-prose p{font-size:15.5px;line-height:1.8;color:var(--ivory-dim);margin-bottom:18px;max-width:66ch}
.rp-prose p b{color:var(--copper-soft);font-weight:600}
.rp-aside{border:1px solid var(--line-copper);border-radius:18px;padding:26px 24px;background:rgba(20,25,36,.5);position:sticky;top:calc(var(--header-h) + 20px)}
.rp-aside h3{font-size:19px;margin-bottom:18px}
.rp-list{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rp-list li{background:var(--bg-2);padding:12px 14px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.rp-list b{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-faint);white-space:nowrap}
.rp-list span{font-size:13px;color:var(--ivory);text-align:end}
.rp-note{font-size:12px;color:var(--ivory-faint);line-height:1.65;margin-top:16px}
.rp-note--flag{border-inline-start:2px solid var(--copper);padding-inline-start:11px;font-style:italic;font-family:var(--serif);font-size:13px}
.rp-hotels{background:radial-gradient(700px 440px at 82% 24%,rgba(198,122,62,.07),transparent 62%)}
.hotel-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hotel{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:linear-gradient(180deg,rgba(26,33,48,.5),rgba(16,20,28,.5));transition:border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.hotel:hover{border-color:var(--line-copper);transform:translateY(-3px)}
.hotel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.hotel-top h3{font-size:20px;font-weight:700;line-height:1.25}
.hotel-tag{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-soft);border:1px solid var(--line-copper);border-radius:99px;padding:5px 10px;white-space:nowrap}
.hotel-area{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ivory-faint);margin-bottom:10px}
.hotel-area svg{width:12px;height:12px;fill:var(--copper-soft);flex:none}
.hotel-desc{font-size:13px;color:var(--ivory-dim);line-height:1.65}
.poi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.poi{background:var(--bg-2);padding:26px 26px}
.poi h3{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--copper-bright)}
.poi p{font-size:13px;color:var(--ivory-dim);line-height:1.7}
.rp-map figure,.rp-map{margin:0}
/* full-bleed the map fills a 1280 column and swamps the page; it is a supporting
   figure, not the hero */
.rp-map img{display:block;width:100%;max-width:780px;margin:0 auto;height:auto;border-radius:18px;border:1px solid var(--line-copper);background:var(--bg-2)}
.rp-map figcaption{margin-top:12px;font-size:11.5px;color:var(--ivory-faint);text-align:center;letter-spacing:.04em}
.rp-sources{position:relative;z-index:var(--z-body);border-top:1px solid var(--line);padding:38px 0}
.rp-sources h2{color:var(--copper-soft);margin-bottom:14px;font-family:var(--sans)}
.rp-sources ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px}
.rp-sources a{font-size:12.5px;color:var(--ivory-dim);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.rp-sources a:hover{color:var(--copper-soft);border-color:var(--line-copper)}
@media(max-width:1080px){
  .rp-cols{grid-template-columns:1fr;gap:36px}
  .rp-aside{position:static}
  .rp-facts{grid-template-columns:1fr 1fr}
  .hotel-grid,.poi-grid{grid-template-columns:1fr}
  .rp-shot{padding:0 26px}
  .rp-block{padding:56px 0}
}
@media(max-width:560px){
  .rp-facts{grid-template-columns:1fr}
  .rp-shot img{aspect-ratio:4/3;border-radius:16px}
  .hotel-top{flex-direction:column;gap:8px}
}


/* ---------- cta band ---------- */
.cta-band{position:relative;z-index:var(--z-body);text-align:center;padding:90px 0;background:radial-gradient(720px 400px at 50% 0%,rgba(198,122,62,.12),transparent 64%);isolation:isolate;overflow:hidden}
.cta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.26;filter:saturate(.8) contrast(1.02)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(11,13,17,.78) 34%,rgba(11,13,17,.82) 66%,var(--bg))}
.cta-band h2{font-size:clamp(32px,4vw,54px);margin-bottom:16px}
.cta-band p{color:var(--ivory-dim);max-width:54ch;margin:0 auto 30px;font-size:16px}
.cta-band .btn{margin:0 6px 10px}

/* ---------- footer ---------- */
footer{position:relative;z-index:var(--z-body);border-top:1px solid var(--line);background:rgba(8,10,14,.6);
  padding:64px 0 calc(34px + env(safe-area-inset-bottom))}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid var(--line)}
.f-brand p{font-size:13px;color:var(--ivory-dim);line-height:1.7;margin-top:16px;max-width:32ch}
.f-col h4{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-soft);margin-bottom:16px}
.f-col a{display:block;color:var(--ivory-dim);text-decoration:none;font-size:13.5px;padding:6px 0;transition:color .2s}
.f-col a:hover{color:var(--ivory)}
.f-bot{display:flex;justify-content:space-between;padding-top:24px;font-size:11.5px;color:var(--ivory-faint);flex-wrap:wrap;gap:8px}
.f-bot a{color:var(--copper-soft);text-decoration:none}

/* ---------- responsive ----------
   Verified with the header seatbelt (overflow-x:hidden) disabled at
   320 / 360 / 375 / 390 / 412 / 768 px, portrait and landscape, in all four
   languages including RTL. */
@media(max-width:1080px){
  :root{--header-h:118px}
  .wrap{padding-inline:max(26px, env(safe-area-inset-left)) max(26px, env(safe-area-inset-right))}
  .nav{gap:14px}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .wa-btn{margin-inline-start:auto}
  .langs--bar{margin-inline-start:0}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .veh-frame{transform:none!important}
  .hero-visual{transform:none}
  .cfg-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cfg-grid .btn{grid-column:1/-1}
  .vito,.cross-grid{grid-template-columns:1fr;gap:40px}
  .mk-grid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  section.blk{padding:72px 0}
  /* comfortable thumb targets — 44px is the smallest a thumb reliably hits */
  .f-col a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  .langs--bar .lang{min-height:44px}
  .drawer .langs--drawer .lang{min-height:48px}
  .brand{min-height:44px}
  .wa-btn,.menu-btn{flex:none}
  .seg button{min-height:44px}
  .field{padding:11px 14px}
  .field select,.field input:not([type=radio]){min-height:44px}
  .field .val{align-items:stretch}
  .field .pin{align-self:center}
  a.rcard-go{display:inline-flex;align-items:center;min-height:44px}
}
@media(min-width:1081px){
  .langs--drawer,.drawer,.menu-btn{display:none!important}
}
/* Below this the bar cannot hold four flags, a CTA and a burger. Languages move
   into the drawer, where they get a name and a 48px row instead. */
@media(max-width:820px){
  .langs--bar{display:none}
}
@media(max-width:720px){
  :root{--header-h:110px}
  .topbar{font-size:10px;letter-spacing:.14em;gap:4px 12px}
  .topbar .tb{gap:12px}
  .topbar .tb--opt{display:none}
  /* the separator hangs off whichever item is last *visible*, not last in the DOM */
  .topbar .tb:nth-child(2)::after{content:none}
  .cfg-out{gap:14px}
  .cfg-out .veh-mini{order:3;flex-basis:100%}
  .cfg-out .spacer{display:none}
  #bookBtn{width:100%}
}
@media(max-width:560px){
  :root{--header-h:104px}
  .wrap{padding-inline:max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right))}
  .hero{padding:34px 0 28px}
  .hero h1{font-size:clamp(34px,9.4vw,42px)}
  .hero-sub{font-size:16px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%}
  .mk-grid{grid-template-columns:1fr}
  .cfg-grid{grid-template-columns:1fr}
  .brand-name .t{font-size:15.5px}
  .brand-name .s{font-size:8px;letter-spacing:.16em}
  .mono{width:36px;height:36px}
  .wa-btn{padding:0;width:44px;height:44px;min-height:44px;border-radius:12px}
  .wa-btn .wa-label{display:none}
  .wa-btn .wa{width:19px;height:19px}
  .configurator{padding:22px 16px 20px;border-radius:18px}
  .cfg-head{gap:8px}
  .cfg-title{font-size:25px}
  .seg{width:100%}
  .seg button{flex:1;padding:9px 10px;font-size:12.5px}
  .price-chip .amt{font-size:34px}
  .f-grid{grid-template-columns:1fr;gap:28px}
  .trust .row{justify-content:flex-start;gap:12px 18px}
  .sec-head{margin-bottom:32px}
  .resorts{padding:40px 0}
  .marq-t span{font-size:21px}
  .marq-t{gap:30px;padding-inline-end:30px}
  .cta-band{padding:64px 0}
  .cta-band .btn{width:100%;margin:0 0 10px}
  .step{gap:14px}
  .step .no{min-width:36px;font-size:26px}
  .cross-map{padding:26px 18px}
  .review-card{padding:22px 16px 20px}
  .review-foot .btn{width:100%}
  /* keep languages two-up: stacked, they pushed the WhatsApp CTA below the fold */
  .langs--drawer{gap:8px}
  .langs--drawer .lang{padding:8px 10px}
  .langs--drawer .lang .name{font-size:13px}
  .drawer-links a{min-height:48px;font-size:15.5px}
}
/* a truncated tagline reads as a bug; drop it rather than clip it */
@media(max-width:430px){
  .brand-name .s{display:none}
  .langs--drawer .lang .code{display:none}
}
@media(max-width:360px){
  .topbar{display:none}
}
/* Landscape phones: the sticky header must not eat the screen */
@media(max-height:520px) and (orientation:landscape){
  :root{--header-h:92px}
  .topbar{display:none}
  .drawer{max-height:62vh}
  .hero{padding:26px 0 20px}
}