/* Jane Travel Agency — Velare demo stylesheet  ·  v2
   Palette: the real velare.ae house palette (orange #E87722 on navy #0A2540).
   Type: Glacial Indifference (SIL OFL, self-hosted) — the velare.ae house typeface.
   Language: geometric, architectural, bold. Built to be its own thing. */

/* ── Glacial Indifference, self-hosted ─────────────────────── */
@font-face{font-family:"Glacial";src:url("../fonts/GlacialIndifference-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glacial";src:url("../fonts/GlacialIndifference-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Glacial";src:url("../fonts/GlacialIndifference-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ── velare.ae house palette ── */
  --navy:#0A2540;         /* brand navy — primary ground */
  --navy-2:#0F2F4E;       /* raised navy surface */
  --navy-3:#1E3A5F;       /* brand mid navy — borders on dark */
  --navy-4:#2B4C74;       /* hairline on dark, hover */
  --orange:#E87722;       /* BRAND ORANGE — the signal colour */
  --orange-d:#C8651D;     /* pressed */
  --orange-l:#F7B27A;     /* light orange, gradient mid-stop */
  --orange-p:#FBE9D7;     /* pale orange wash */
  --paper:#F7F6F2;        /* brand warm off-white */
  --paper-2:#EFEDE6;      /* raised paper surface */
  --line:#E2E0D8;         /* brand warm border */
  --ink:#0A2540;          /* text = navy */
  --muted:#5A6B7D;
  --muted-d:#93A6BC;      /* muted on navy */
  --ok:#2E6B4F;
  --warn:#C8651D;

  /* legacy aliases so existing rules keep working */
  --ink-2:#0F2F4E; --ink-3:#1E3A5F; --sand:#FBE9D7;
  --brass:#E87722; --brass-lo:#C8651D; --oasis:#1E3A5F; --text:#0A2540;

  --r:2px; --r-lg:6px; --r-xl:10px;
  --wrap:1280px;
  --f-display:"Glacial","Futura","Century Gothic",Avenir,sans-serif;
  --f-body:"Glacial","Futura",Avenir,"Helvetica Neue",sans-serif;
  --f-ar:"IBM Plex Sans Arabic","Glacial",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-o:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 2px rgba(10,37,64,.05),0 8px 24px rgba(10,37,64,.07);
  --sh-2:0 2px 8px rgba(10,37,64,.08),0 24px 64px rgba(10,37,64,.16);
  --sh-o:0 10px 34px rgba(232,119,34,.34);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f-body);font-size:16.5px;line-height:1.66;
  font-feature-settings:"kern","liga";font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body[dir="rtl"]{font-family:var(--f-ar)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.006em;line-height:1.1}
h1,h2,h3{font-optical-sizing:auto}
h1,h2,h3{font-family:var(--f-display)}
p{margin:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,34px)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Typography scale ─────────────────────────────────────── */
.display{font-family:var(--f-display);font-size:clamp(2.9rem,7.4vw,5.9rem);line-height:1.0;letter-spacing:-.014em;font-weight:400}
.h1{font-family:var(--f-display);font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.04}
.h2{font-family:var(--f-display);font-size:clamp(1.85rem,3.6vw,2.85rem)}
.h3{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.7rem)}
.lede{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.6;color:var(--muted);max-width:62ch}
.eyebrow{
  font-size:.695rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--brass);display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}
.eyebrow.c{justify-content:center}
.small{font-size:.83rem;color:var(--muted)}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--r);border:1px solid transparent;
  font-size:.86rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  cursor:pointer;transition:all .28s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--brass);color:#fff;border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-lo);border-color:var(--brass-lo);transform:translateY(-1px);box-shadow:0 8px 22px rgba(192,139,78,.3)}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-dark:hover{background:#1a2c3c;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink);background:rgba(11,21,32,.03)}
.btn-ghost-l{background:transparent;color:var(--paper);border-color:rgba(250,247,241,.35)}
.btn-ghost-l:hover{background:rgba(250,247,241,.1);border-color:var(--paper)}
.btn-sm{padding:9px 17px;font-size:.755rem}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.link-u{
  color:var(--brass);font-weight:600;font-size:.87rem;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid rgba(192,139,78,.4);padding-bottom:2px;transition:border-color .25s
}
.link-u:hover{border-color:var(--brass)}

/* ── Header ───────────────────────────────────────────────── */
.topbar{
  background:var(--ink);color:var(--muted-d);font-size:.755rem;letter-spacing:.045em;
  border-bottom:1px solid var(--ink-3)
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.topbar a:hover{color:var(--paper)}
.topbar-r{display:flex;align-items:center;gap:14px}
.selectlite{
  background:transparent;border:1px solid var(--ink-3);color:var(--muted-d);
  border-radius:var(--r);padding:3px 7px;font-size:.72rem;letter-spacing:.05em;cursor:pointer
}
.selectlite:hover{border-color:var(--brass);color:var(--paper)}

.hdr{
  position:sticky;top:0;z-index:60;background:rgba(250,247,241,.9);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s
}
.hdr.stuck{box-shadow:0 1px 24px rgba(11,21,32,.09)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brandmark{display:flex;flex-direction:column;line-height:1;gap:4px}
.brandmark .wm{font-family:var(--f-display);font-size:1.62rem;letter-spacing:.13em}
.brandmark .sb{font-size:.53rem;letter-spacing:.36em;color:var(--brass);font-weight:600}
.nav{display:flex;align-items:center;gap:29px}
.nav a{
  font-size:.845rem;font-weight:500;letter-spacing:.02em;position:relative;padding:6px 0;color:var(--text)
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);
  transition:width .3s var(--ease)
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--brass)}
.hdr-act{display:flex;align-items:center;gap:10px}
.iconbtn{
  width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--line);
  background:transparent;border-radius:var(--r);cursor:pointer;position:relative;transition:all .25s
}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn .cnt{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  background:var(--brass);color:#fff;border-radius:9px;font-size:.63rem;font-weight:700;
  display:none;place-items:center
}
.iconbtn .cnt.on{display:grid}
.burger{display:none}

/* Mobile drawer */
.mdrawer{
  position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);
  transform:translateX(100%);transition:transform .38s var(--ease);
  padding:24px;overflow-y:auto;display:flex;flex-direction:column
}
.mdrawer.open{transform:translateX(0)}
.mdrawer nav{display:flex;flex-direction:column;gap:2px;margin-top:26px}
.mdrawer nav a{
  font-family:var(--f-display);font-size:1.9rem;padding:12px 0;
  border-bottom:1px solid var(--ink-3)
}
.mdrawer-top{display:flex;align-items:center;justify-content:space-between}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:clamp(76px,11vw,132px) 0 clamp(120px,13vw,150px)
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 78% 8%,rgba(192,139,78,.24),transparent 58%),
    radial-gradient(90% 60% at 8% 96%,rgba(14,74,70,.42),transparent 62%);
  pointer-events:none
}
.hero-in{position:relative;max-width:900px}
.hero h1{margin:22px 0 0;color:var(--paper)}
.hero .lede{color:rgba(250,247,241,.72);margin-top:22px;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:11px 30px;margin-top:46px;
  padding-top:26px;border-top:1px solid var(--ink-3);
  font-size:.79rem;letter-spacing:.05em;color:var(--muted-d)
}
.hero-meta b{color:var(--brass);font-weight:600}

/* Search widget */
.searchcard{
  position:relative;margin-top:-70px;z-index:12;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:9px
}
.searchgrid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0}
.sfield{padding:13px 17px;border-right:1px solid var(--line);min-width:0}
body[dir="rtl"] .sfield{border-right:none;border-left:1px solid var(--line)}
.sfield:nth-child(4){border-right:none}
body[dir="rtl"] .sfield:nth-child(4){border-left:none}
.sfield label{
  display:block;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin-bottom:5px
}
.sfield select,.sfield input{
  width:100%;border:0;background:transparent;font-size:.94rem;font-weight:500;
  padding:0;cursor:pointer
}
.sfield select:focus,.sfield input:focus{outline:none}
.searchgrid .btn{margin:4px;border-radius:var(--r)}

/* ── Sections ─────────────────────────────────────────────── */
section{padding:clamp(62px,8.5vw,104px) 0}
.sec-head{margin-bottom:44px;max-width:64ch}
.sec-head.c{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.c .eyebrow{justify-content:center}
.sec-head h2{margin:15px 0 0}
.sec-head p{margin-top:16px;color:var(--muted);font-size:1.02rem}
.sec-head .rule{height:1px;background:var(--brass);width:0;margin-top:22px;transition:width 1s var(--ease) .15s}
.sec-head.in .rule{width:64px}
.sec-head.c .rule{margin-left:auto;margin-right:auto}
.dark{background:var(--ink);color:var(--paper)}
.dark .sec-head p,.dark .lede{color:var(--muted-d)}
.dark h2,.dark h3{color:var(--paper)}
.tinted{background:var(--paper-2)}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.headrow .sec-head{margin-bottom:0}

/* ── Cards: packages ──────────────────────────────────────── */
.grid{display:grid;gap:26px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.pcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:all .38s var(--ease);position:relative
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--sand)}
.pcard-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  display:grid;place-items:center;color:rgba(250,247,241,.9)
}
.pcard-media .glyph{font-family:var(--f-display);font-size:2.5rem;letter-spacing:.1em;opacity:.5}
.pcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(11,21,32,.55))}
.pcard-badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:82%}
body[dir="rtl"] .pcard-badges{left:auto;right:12px}
.badge{
  background:rgba(250,247,241,.94);color:var(--ink);font-size:.66rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:2px
}
.badge.brass{background:var(--brass);color:#fff}
.badge.oasis{background:var(--oasis);color:#fff}
.fav{
  position:absolute;top:11px;right:11px;z-index:3;width:33px;height:33px;border-radius:50%;
  background:rgba(250,247,241,.92);border:0;display:grid;place-items:center;cursor:pointer;
  transition:all .25s
}
body[dir="rtl"] .fav{right:auto;left:11px}
.fav:hover{transform:scale(1.1)}
.fav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7}
.fav.on svg{fill:var(--brass);stroke:var(--brass)}
.pcard-loc{
  position:absolute;bottom:12px;left:14px;z-index:2;color:#fff;font-size:.71rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:600
}
body[dir="rtl"] .pcard-loc{left:auto;right:14px}
.pcard-body{padding:19px 20px 21px;display:flex;flex-direction:column;flex:1;gap:11px}
.pcard-body h3{font-size:1.24rem;line-height:1.2}
.pcard-sum{font-size:.885rem;color:var(--muted);line-height:1.55;flex:1}
.pcard-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.755rem;color:var(--muted);letter-spacing:.03em}
.pcard-facts span{display:inline-flex;align-items:center;gap:5px}
.pcard-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line)
}
.price .was{font-size:.78rem;color:var(--muted);text-decoration:line-through;display:block}
.price .now{font-family:var(--f-display);font-size:1.5rem;color:var(--ink);line-height:1}
.price .per{font-size:.7rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.stars{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted)}
.stars b{color:var(--ink);font-weight:600}

/* ── Destination tiles ────────────────────────────────────── */
.dtile{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:290px;
  display:flex;align-items:flex-end;padding:24px;color:#fff;transition:all .4s var(--ease)
}
.dtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,32,.12) 30%,rgba(11,21,32,.82))}
.dtile:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.dtile-in{position:relative;z-index:2;width:100%}
.dtile h3{color:#fff;font-size:1.6rem}
.dtile .rg{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600}
.dtile p{font-size:.86rem;color:rgba(255,255,255,.78);margin-top:8px;line-height:1.5}
.dtile .df{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.2);font-size:.78rem
}
.dtile .df b{font-family:var(--f-display);font-size:1.15rem;font-weight:400}
.dtile.wide{grid-column:span 2;min-height:330px}

/* ── Filters ──────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:266px 1fr;gap:38px;align-items:start}
.filters{
  position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px
}
.fgroup{padding:15px 0;border-bottom:1px solid var(--line)}
.fgroup:first-child{padding-top:0}
.fgroup:last-child{border-bottom:0;padding-bottom:0}
.fgroup h4{
  font-family:var(--f-body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:11px
}
.chk{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:.885rem}
.chk input{width:15px;height:15px;accent-color:var(--brass);cursor:pointer;flex:none}
.chk:hover{color:var(--brass)}
.rangeout{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:7px}
input[type=range]{width:100%;accent-color:var(--brass);cursor:pointer}
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)
}
.select{
  border:1px solid var(--line);border-radius:var(--r);padding:9px 13px;background:var(--paper);
  font-size:.85rem;cursor:pointer
}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:20px;padding:5px 13px;font-size:.78rem;cursor:pointer
}
.chip:hover{border-color:var(--brass);color:var(--brass)}
.filter-toggle{display:none}
.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty h3{margin-bottom:10px}

/* ── Package detail ───────────────────────────────────────── */
.phero{
  position:relative;min-height:clamp(340px,44vh,470px);display:flex;align-items:flex-end;
  color:#fff;padding:38px 0
}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,32,.3) 25%,rgba(11,21,32,.88))}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;max-width:20ch;margin-top:14px}
.crumbs{font-size:.76rem;letter-spacing:.05em;color:rgba(255,255,255,.72);margin-bottom:6px}
.crumbs a:hover{color:var(--brass)}
.pmeta{display:flex;flex-wrap:wrap;gap:9px 26px;margin-top:20px;font-size:.83rem;color:rgba(255,255,255,.85)}
.pmeta span{display:inline-flex;align-items:center;gap:7px}

.dlayout{display:grid;grid-template-columns:1fr 366px;gap:44px;align-items:start}
.bookbox{
  position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden
}
.bookbox-h{padding:20px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.bookbox-b{padding:20px;display:flex;flex-direction:column;gap:15px}
.field label{
  display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:6px
}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;
  background:var(--paper);font-size:.92rem;transition:border-color .2s
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.field textarea{min-height:104px;resize:vertical;font-family:inherit}
.field .err{color:#A33;font-size:.76rem;margin-top:5px;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#A33}
.field.bad .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pricerow{display:flex;justify-content:space-between;font-size:.885rem;padding:5px 0}
.pricerow.total{
  border-top:1px solid var(--line);margin-top:6px;padding-top:13px;font-weight:600;font-size:1.02rem
}
.pricerow.total b{font-family:var(--f-display);font-size:1.5rem;font-weight:400}

.daybar{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.day{border-bottom:1px solid var(--line)}
.day:last-child{border-bottom:0}
.day-h{
  width:100%;display:flex;align-items:center;gap:16px;padding:17px 20px;background:transparent;
  border:0;cursor:pointer;text-align:start;transition:background .25s
}
.day-h:hover{background:var(--paper-2)}
.day-n{
  font-family:var(--f-display);font-size:.83rem;letter-spacing:.1em;color:var(--brass);
  min-width:64px;flex:none;text-transform:uppercase
}
.day-t{font-weight:600;font-size:1rem;flex:1}
.day-h .caret{transition:transform .3s var(--ease);flex:none;color:var(--muted)}
.day.open .caret{transform:rotate(180deg)}
.day-b{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.day-b p{padding:0 20px 20px 100px;color:var(--muted);font-size:.93rem}
body[dir="rtl"] .day-b p{padding:0 100px 20px 20px}

.inclist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.inclist li{display:flex;gap:11px;font-size:.925rem;line-height:1.5}
.inclist li::before{content:"";width:16px;height:16px;flex:none;margin-top:4px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.inclist.ex li::before{background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery div{aspect-ratio:1;border-radius:var(--r);display:grid;place-items:center;
  font-family:var(--f-display);color:rgba(255,255,255,.55);font-size:.8rem;letter-spacing:.1em}
.gallery div:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* ── Tabs / anchors ───────────────────────────────────────── */
.anchors{
  display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:34px;
  overflow-x:auto;scrollbar-width:none
}
.anchors::-webkit-scrollbar{display:none}
.anchors a{
  padding:14px 0;font-size:.83rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:all .25s
}
.anchors a:hover,.anchors a.on{color:var(--brass);border-color:var(--brass)}
.block{padding:0 0 46px;scroll-margin-top:100px}
.block h2{margin-bottom:18px}

/* ── Steps / process ──────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--ink-3)}
.dark .steps{background:var(--ink-3)}
.step{background:var(--ink);padding:30px 28px;position:relative}
.step::before{
  counter-increment:s;content:"0" counter(s);font-family:var(--f-display);font-size:2.4rem;
  color:var(--brass);opacity:.65;display:block;margin-bottom:14px;line-height:1
}
.step h3{font-size:1.22rem;margin-bottom:9px}
.step p{color:var(--muted-d);font-size:.9rem;line-height:1.58}

/* ── Stats ────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--paper);padding:28px 22px;text-align:center}
.dark .stats{background:var(--ink-3)}
.dark .stat{background:var(--ink)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.9rem);color:var(--brass);line-height:1}
.stat span{display:block;margin-top:9px;font-size:.755rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dark .stat span{color:var(--muted-d)}

/* ── Reviews ──────────────────────────────────────────────── */
.rcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;gap:14px
}
.rcard .q{font-family:var(--f-display);font-size:1.06rem;line-height:1.5;color:var(--text)}
.rcard .who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.av{
  width:38px;height:38px;border-radius:50%;background:var(--oasis);color:#fff;display:grid;
  place-items:center;font-weight:600;font-size:.85rem;flex:none
}
.starrow{color:var(--brass);letter-spacing:2px;font-size:.85rem}

/* ── Visa / list rows ─────────────────────────────────────── */
.rowcard{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;background:var(--paper);
  transition:all .3s var(--ease)
}
.rowcard:hover{border-color:var(--sand);box-shadow:var(--sh-1)}
.rowcard h3{font-size:1.14rem;margin-bottom:7px}
.rowcard .who{font-size:.85rem;color:var(--muted)}
.rowcard .rt{text-align:end;flex:none}
.docs{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.doc{background:var(--paper-2);border:1px solid var(--line);border-radius:2px;padding:4px 10px;font-size:.755rem;color:var(--muted)}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{border-bottom:1px solid var(--line)}
.faq-h{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;background:transparent;border:0;cursor:pointer;text-align:start;
  font-size:1.04rem;font-weight:500;transition:color .25s
}
.faq-h:hover{color:var(--brass)}
.faq-h .pm{flex:none;color:var(--brass);transition:transform .3s var(--ease)}
.faq.open .pm{transform:rotate(45deg)}
.faq-b{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-b p{padding:0 0 22px;color:var(--muted);max-width:76ch}

/* ── Multi-step enquiry ───────────────────────────────────── */
.stepbar{display:flex;gap:0;margin-bottom:36px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stepbar div{
  flex:1;padding:14px 12px;text-align:center;font-size:.755rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--muted);background:var(--paper-2);
  border-right:1px solid var(--line);position:relative
}
.stepbar div:last-child{border-right:0}
.stepbar div.on{background:var(--ink);color:var(--paper)}
.stepbar div.done{background:var(--brass);color:#fff}
.pane{display:none;animation:fade .4s var(--ease)}
.pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.opt{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;cursor:pointer;
  transition:all .25s;background:var(--paper);text-align:center
}
.opt:hover{border-color:var(--brass)}
.opt.sel{border-color:var(--brass);background:rgba(192,139,78,.07);box-shadow:0 0 0 1px var(--brass) inset}
.opt b{display:block;font-size:.95rem;margin-bottom:4px}
.opt span{font-size:.78rem;color:var(--muted)}
.formnav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}

/* ── Drawer (saved trips / enquiry list) ──────────────────── */
.scrim{position:fixed;inset:0;background:rgba(11,21,32,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;inset-inline-end:0;height:100%;width:min(408px,100%);background:var(--paper);
  z-index:95;transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column
}
body[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.open{transform:translateX(0)!important}
.drawer-h{padding:20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer-b{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.drawer-f{padding:20px;border-top:1px solid var(--line);background:var(--paper-2)}
.mini{display:flex;gap:13px;align-items:flex-start}
.mini-th{width:64px;height:64px;border-radius:var(--r);flex:none}
.mini h4{font-size:.925rem;font-weight:600;font-family:var(--f-body);margin-bottom:4px}
.mini .mp{font-size:.85rem;color:var(--brass);font-weight:600}
.mini button{background:none;border:0;color:var(--muted);font-size:.755rem;cursor:pointer;text-decoration:underline;padding:0;margin-top:5px}

/* ── Footer ───────────────────────────────────────────────── */
.ftr{background:var(--ink);color:var(--muted-d);padding:66px 0 0;font-size:.885rem}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px}
.ftr h4{
  font-family:var(--f-body);font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--paper);font-weight:700;margin-bottom:16px
}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ftr a:hover{color:var(--brass)}
.ftr .brandmark .wm{color:var(--paper)}
.ftr-blurb{margin-top:16px;max-width:34ch;line-height:1.62}
.newsletter{display:flex;gap:8px;margin-top:16px}
.newsletter input{
  flex:1;background:transparent;border:1px solid var(--ink-3);border-radius:var(--r);
  padding:11px 13px;color:var(--paper);font-size:.85rem
}
.newsletter input:focus{outline:none;border-color:var(--brass)}
.trust{
  display:flex;flex-wrap:wrap;gap:10px 22px;padding:22px 0;border-top:1px solid var(--ink-3);
  font-size:.755rem;letter-spacing:.06em
}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust b{color:var(--paper);font-weight:600}
.ftr-btm{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 0 26px;border-top:1px solid var(--ink-3);font-size:.79rem
}
.velare{
  display:inline-flex;align-items:center;gap:8px;color:var(--brass);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;font-size:.72rem
}
.paylogos{display:flex;gap:8px;flex-wrap:wrap}
.paylogos span{
  border:1px solid var(--ink-3);border-radius:3px;padding:4px 9px;font-size:.66rem;
  letter-spacing:.08em;color:var(--muted-d)
}

/* ── Floating / sticky ────────────────────────────────────── */
.wa{
  position:fixed;inset-inline-end:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 6px 24px rgba(37,211,102,.42);
  transition:transform .28s var(--ease)
}
.wa:hover{transform:scale(1.08)}
.stickycta{display:none}
.cookie{
  position:fixed;inset-inline:16px;bottom:16px;z-index:88;background:var(--ink);color:var(--paper);
  border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-2);max-width:560px;
  margin-inline:auto;display:none;align-items:center;gap:18px;flex-wrap:wrap
}
.cookie.on{display:flex}
.cookie p{font-size:.83rem;color:var(--muted-d);flex:1;min-width:220px}
.demo-note{
  background:var(--warn);color:#fff;text-align:center;padding:8px 16px;font-size:.755rem;
  letter-spacing:.08em;font-weight:600
}

/* ── Reveal animation ─────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  [data-anim]{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
  [data-anim="up"]{transform:translateY(24px)}
  [data-anim="rise"]{transform:translateY(38px)}
  [data-anim="scale"]{transform:scale(.965)}
  [data-anim].in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
  .sec-head .rule{width:64px;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .dlayout{grid-template-columns:1fr}
  .bookbox{position:static}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav{display:none}
  .burger{display:grid}
  .searchgrid{grid-template-columns:1fr 1fr}
  .sfield{border-right:none!important;border-left:none!important;border-bottom:1px solid var(--line)}
  .searchgrid .btn{grid-column:span 2}
  .layout{grid-template-columns:1fr}
  .filters{position:static;display:none}
  .filters.open{display:block}
  .filter-toggle{display:inline-flex}
  .g3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .dtile.wide{grid-column:span 1}
}
@media (max-width:680px){
  body{font-size:16px}
  .g3,.g2,.g4{grid-template-columns:1fr}
  .searchgrid{grid-template-columns:1fr}
  .searchgrid .btn{grid-column:span 1}
  .topbar-in{font-size:.7rem}
  .row2{grid-template-columns:1fr}
  .rowcard{grid-template-columns:1fr}
  .rowcard .rt{text-align:start}
  .ftr-grid{grid-template-columns:1fr}
  .day-b p{padding-inline:20px!important}
  .day-n{min-width:auto}
  .wa{bottom:78px}
  .stickycta{
    display:flex;position:fixed;inset-inline:0;bottom:0;z-index:69;background:var(--paper);
    border-top:1px solid var(--line);padding:11px 14px;gap:11px;align-items:center;
    box-shadow:0 -4px 20px rgba(11,21,32,.1)
  }
  .stickycta .btn{flex:1}
  .stepbar div{font-size:.6rem;padding:11px 5px;letter-spacing:.05em}
}
@media print{
  .hdr,.topbar,.ftr,.wa,.stickycta,.cookie,.filters{display:none}
  body{background:#fff}
}

/* ══════════════════════════════════════════════════════════════
   PRESENTATION & MOTION LAYER
   Real photography, editorial layouts, scroll-driven animation.
   ══════════════════════════════════════════════════════════════ */

/* ── Photographic media ───────────────────────────────────── */
.ph{position:relative;overflow:hidden;background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none}
.ph-grad::after{background:linear-gradient(180deg,transparent 38%,rgba(11,21,32,.72))}
.ph-grad-s::after{background:linear-gradient(180deg,rgba(11,21,32,.34) 0%,rgba(11,21,32,.14) 40%,rgba(11,21,32,.8))}

/* Ken Burns on hero stills */
@media (prefers-reduced-motion:no-preference){
  .kb img{animation:kb 26s var(--ease) infinite alternate;will-change:transform}
  @keyframes kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1.6%,0)}}
}

/* Card image zoom on hover */
.pcard-media img{transition:transform 1.05s var(--ease),filter .6s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.07)}
.dtile img{transition:transform 1.1s var(--ease)}
.dtile:hover img{transform:scale(1.08)}

/* Scroll-linked drift — compositor only, no JS */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .drift img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes drift{from{transform:scale(1.14) translateY(-2.6%)}to{transform:scale(1.14) translateY(2.6%)}}
    .settle img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes settle{from{transform:scale(1.16)}to{transform:scale(1.0)}}
  }
}

/* ── Split-text headline reveal ───────────────────────────── */
.split{display:block}
.split .ln{display:block;overflow:hidden}
.split .ln > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.split.in .ln > span{transform:translateY(0)}
.split .ln:nth-child(2) > span{transition-delay:.09s}
.split .ln:nth-child(3) > span{transition-delay:.18s}
.split .ln:nth-child(4) > span{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){ .split .ln > span{transform:none!important} }

/* Brass italic emphasis inside display type */
.em{font-style:italic;color:var(--brass)}

/* ── Marquee / ticker ─────────────────────────────────────── */
.marquee{
  overflow:hidden;border-block:1px solid var(--ink-3);background:var(--ink);
  padding:16px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)
}
.marquee-t{display:flex;width:max-content;gap:0;will-change:transform}
@media (prefers-reduced-motion:no-preference){ .marquee-t{animation:mq 46s linear infinite} }
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-t span{
  font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.15rem);color:var(--paper);
  padding:0 30px;display:inline-flex;align-items:center;gap:30px;white-space:nowrap;opacity:.86
}
.marquee-t span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}

/* ── Editorial split section ──────────────────────────────── */
.split-sec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.split-sec.rev .ss-media{order:2}
.ss-media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5}
.ss-media.wide{aspect-ratio:5/4}
.ss-copy h2{margin:16px 0 18px}
.ss-copy p{color:var(--muted);margin-bottom:16px;max-width:52ch}
.dark .ss-copy p{color:var(--muted-d)}
.ss-copy .btn{margin-top:12px}
/* stacked photo pair */
.ss-stack{position:relative;aspect-ratio:1/1}
.ss-stack .a,.ss-stack .b{position:absolute;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.ss-stack .a{inset:0 26% 22% 0}
.ss-stack .b{inset:38% 0 0 34%;border:6px solid var(--paper)}
.dark .ss-stack .b{border-color:var(--ink)}

/* ── Numbered feature list ────────────────────────────────── */
.numlist{counter-reset:n;display:flex;flex-direction:column}
.numitem{
  counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:26px;
  padding:28px 0;border-top:1px solid var(--line);align-items:start
}
.dark .numitem{border-color:var(--ink-3)}
.numitem::before{
  content:"0" counter(n);font-family:var(--f-display);font-size:1.5rem;color:var(--brass);line-height:1.2
}
.numitem h3{font-size:1.35rem;margin-bottom:8px}
.numitem p{color:var(--muted);font-size:.95rem;max-width:62ch}
.dark .numitem p{color:var(--muted-d)}

/* ── Pull quote ───────────────────────────────────────────── */
.pull{
  font-family:var(--f-display);font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.28;
  max-width:22ch;margin:0 auto;text-align:center;position:relative;padding:18px 0
}
.pull::before{
  content:"“";position:absolute;top:-.32em;left:50%;transform:translateX(-50%);
  font-size:4.5em;color:var(--brass);opacity:.18;line-height:1;pointer-events:none
}

/* ── Horizontal destination rail ──────────────────────────── */
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:16px;scrollbar-width:thin;scroll-padding-inline:clamp(18px,4vw,34px)
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--brass);border-radius:2px}
.rail::-webkit-scrollbar-track{background:var(--line)}
.rail > *{flex:0 0 min(330px,78vw);scroll-snap-align:start}
.rail-nav{display:flex;gap:8px}
.rail-nav button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;
  cursor:pointer;display:grid;place-items:center;transition:all .25s
}
.rail-nav button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .rail-nav button{border-color:var(--ink-3);color:var(--paper)}
.dark .rail-nav button:hover{background:var(--brass);border-color:var(--brass)}

/* ── Animated counters ────────────────────────────────────── */
.stat b{font-variant-numeric:tabular-nums}

/* ── Progress bar (reading / scroll) ──────────────────────── */
.sprog{
  position:fixed;top:0;inset-inline:0;height:2px;background:var(--brass);z-index:99;
  transform-origin:0 50%;transform:scaleX(0);will-change:transform
}
body[dir="rtl"] .sprog{transform-origin:100% 50%}

/* ── Gallery lightbox ─────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(11,21,32,.94);display:none;
  align-items:center;justify-content:center;padding:24px
}
.lb.on{display:flex;animation:fade .3s var(--ease)}
.lb img{max-width:min(1200px,94vw);max-height:88vh;object-fit:contain;border-radius:var(--r-lg)}
.lb-x{position:absolute;top:20px;inset-inline-end:20px;background:none;border:0;color:var(--paper);cursor:pointer}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(250,247,241,.12);
  border:0;color:var(--paper);width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center
}
.lb-nav.prev{inset-inline-start:20px} .lb-nav.next{inset-inline-end:20px}
.lb-nav:hover{background:var(--brass)}
.lb-cap{position:absolute;bottom:20px;inset-inline:24px;text-align:center;color:var(--muted-d);font-size:.78rem}
.gallery div{cursor:zoom-in;position:relative}

/* ── Section transitions & flourishes ─────────────────────── */
.hero-scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(250,247,241,.55);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:9px
}
.hero-scroll::after{
  content:"";width:1px;height:36px;background:linear-gradient(var(--brass),transparent)
}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll::after{animation:sdown 2.1s var(--ease) infinite}
  @keyframes sdown{0%{opacity:0;transform:scaleY(.2)}42%{opacity:1}100%{opacity:0;transform:scaleY(1) translateY(14px)}}
}
.rule-x{height:1px;background:var(--line);margin:0}
.dark .rule-x{background:var(--ink-3)}

/* Reveal variants */
@media (prefers-reduced-motion:no-preference){
  [data-anim="left"]{transform:translateX(-30px)}
  [data-anim="right"]{transform:translateX(30px)}
  [data-anim="clip"]{clip-path:inset(0 0 100% 0);opacity:1;transition:clip-path 1.05s var(--ease)}
  [data-anim="clip"].in{clip-path:inset(0 0 0 0)}
}

@media (max-width:960px){
  .split-sec{grid-template-columns:1fr}
  .split-sec.rev .ss-media{order:0}
  .ss-media{aspect-ratio:16/10}
  .ss-stack{aspect-ratio:4/3}
}

/* ── Fix: banner/phero images must fill the band, not set its height ── */
.phero{overflow:hidden;position:relative}
.phero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0
}
.phero::after{z-index:1}
.phero > .wrap{position:relative;z-index:2}
.phero .h1,.phero .display{color:#fff}

/* hero section image layer already absolute — keep it behind content */
.hero > .ph{z-index:0}
/* stronger scrim so breadcrumbs/eyebrow stay legible over bright photography */
.phero.ph-grad-s::after{
  background:linear-gradient(180deg,rgba(11,21,32,.62) 0%,rgba(11,21,32,.30) 42%,rgba(11,21,32,.88) 100%)
}

/* ── Mobile topbar: drop hours + phone, keep currency and language ── */
@media (max-width:760px){
  .topbar-in{height:auto;padding:6px 0;gap:10px;justify-content:flex-end}
  .topbar-in > span{display:none}
  .topbar-r a[href^="tel:"]{display:none}
  .demo-note{font-size:.66rem;letter-spacing:.04em;padding:7px 12px;line-height:1.4}
  .brandmark .wm{font-size:1.34rem;letter-spacing:.1em}
  .brandmark .sb{font-size:.48rem;letter-spacing:.28em;white-space:nowrap}
  .hdr-in{height:64px;gap:10px}
  .hdr-act .btn{padding:10px 14px;font-size:.7rem}
}
@media (max-width:400px){
  .hdr-act .btn{display:none}
}

/* ══════════════════════════════════════════════════════════════
   v2 — VELARE HOUSE. Orange on navy. Glacial Indifference.
   Geometric, architectural, bold. Scale and structure carry it.
   ══════════════════════════════════════════════════════════════ */

body{font-family:var(--f-body);font-weight:400;letter-spacing:-.008em;color:var(--ink);background:var(--paper)}

/* ── Type scale: geometric, tight, big ────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.display{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(3.1rem,8.6vw,7.4rem);line-height:.9;letter-spacing:-.045em;text-wrap:balance
}
.h1{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:.96;letter-spacing:-.04em;font-weight:700}
.h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1;letter-spacing:-.038em;font-weight:700}
.h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.14;letter-spacing:-.025em;font-weight:700}
.lede{font-size:clamp(1.06rem,1.4vw,1.24rem);line-height:1.56;color:var(--muted);max-width:56ch;letter-spacing:-.006em}

/* micro-label: the architectural tell */
.eyebrow{
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  color:var(--orange);display:flex;align-items:center;gap:13px
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--orange);flex:none}

/* orange sheen through a heading — velare.ae's signature, pushed */
.sheen{
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 32%,var(--orange) 50%,var(--navy) 68%,var(--navy) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent
}
.dark .sheen,.hero .sheen{
  background:linear-gradient(100deg,#fff 0%,#fff 30%,var(--orange-l) 48%,var(--orange) 58%,#fff 76%,#fff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent
}
@media (prefers-reduced-motion:no-preference){
  .sheen{animation:sheen 7s var(--ease) infinite}
  @keyframes sheen{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
}
.em{color:var(--orange);font-style:normal}

/* ── Buttons: squared, engineered ─────────────────────────── */
.btn{
  border-radius:var(--r);font-weight:700;letter-spacing:.13em;font-size:.735rem;
  padding:15px 30px;text-transform:uppercase;position:relative;overflow:hidden;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)
}
.btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);transform:translateY(-2px);box-shadow:var(--sh-o)}
.btn-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-3);border-color:var(--navy-3);transform:translateY(-2px)}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:var(--paper);transform:translateY(-2px)}
.btn-ghost-l{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost-l:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:11px 19px;font-size:.685rem}
.link-u{
  color:var(--orange);font-weight:700;font-size:.735rem;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:2px solid rgba(232,119,34,.28);padding-bottom:3px
}
.link-u:hover{border-color:var(--orange)}

/* ── Header ───────────────────────────────────────────────── */
.demo-note{background:var(--navy-3);color:var(--orange-l);letter-spacing:.13em;font-weight:700;font-size:.66rem}
.topbar{background:var(--navy);color:var(--muted-d);border-bottom:1px solid var(--navy-3)}
.selectlite{border-color:var(--navy-3);color:var(--muted-d);border-radius:var(--r);font-weight:500}
.selectlite:hover{border-color:var(--orange);color:#fff}
.hdr{background:rgba(247,246,242,.94);border-bottom:1px solid var(--line)}
.hdr-in{height:82px}
.brandmark .wm{
  font-family:var(--f-display);font-weight:700;font-size:1.56rem;letter-spacing:.02em;color:var(--navy)
}
.brandmark .sb{font-size:.545rem;letter-spacing:.42em;color:var(--orange);font-weight:700}
.nav a{font-weight:500;font-size:.845rem;letter-spacing:.01em;color:var(--navy)}
.nav a::after{height:2px;background:var(--orange)}
.nav a[aria-current="page"]{color:var(--orange)}
.iconbtn{border-radius:var(--r);border-color:var(--line)}
.iconbtn:hover{border-color:var(--navy);background:var(--navy);color:var(--paper)}
.iconbtn .cnt{background:var(--orange);border-radius:2px}
.mdrawer{background:var(--navy)}
.mdrawer nav a{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;border-color:var(--navy-3)}
.mdrawer nav a:hover{color:var(--orange)}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{background:var(--navy)}
.hero::before{
  background:
    linear-gradient(180deg,rgba(10,37,64,.62) 0%,rgba(10,37,64,.22) 38%,rgba(10,37,64,.94) 100%),
    radial-gradient(105% 72% at 82% 6%,rgba(232,119,34,.30),transparent 58%)
}
.hero .lede{color:rgba(255,255,255,.78)}
.hero-meta{
  border-top:1px solid rgba(255,255,255,.16);gap:0;padding-top:0;margin-top:52px;
  display:grid;grid-template-columns:repeat(3,1fr)
}
.hero-meta span{
  padding:22px 26px 6px 0;border-left:1px solid rgba(255,255,255,.16);padding-left:26px;
  font-size:.8rem;color:var(--muted-d);letter-spacing:0;display:block
}
.hero-meta span:first-child{border-left:0;padding-left:0}
.hero-meta b{
  display:block;color:var(--orange);font-family:var(--f-display);font-weight:700;
  font-size:1.9rem;letter-spacing:-.04em;margin-bottom:5px
}
.hero-scroll{color:rgba(255,255,255,.5);letter-spacing:.28em;font-weight:700;font-size:.62rem}
.hero-scroll::after{background:linear-gradient(var(--orange),transparent)}

/* ── Search card ──────────────────────────────────────────── */
.searchcard{
  background:var(--paper);border:0;border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:0;margin-top:-58px;border-top:3px solid var(--orange)
}
.sfield{padding:18px 22px;border-right:1px solid var(--line)}
.sfield label{
  font-size:.62rem;letter-spacing:.24em;color:var(--muted);font-weight:700;margin-bottom:7px
}
.sfield select,.sfield input{font-weight:500;font-size:.95rem;color:var(--navy)}
.searchgrid .btn{margin:0;border-radius:0;align-self:stretch;padding-inline:38px}

/* ── Sections ─────────────────────────────────────────────── */
section{padding:clamp(72px,9.5vw,124px) 0}
.sec-head h2{margin-top:20px}
.sec-head .rule{background:var(--orange);height:2px}
.sec-head.in .rule{width:74px}
.dark{background:var(--navy)}
.dark .sec-head p,.dark .lede{color:var(--muted-d)}
.tinted{background:var(--paper-2)}

/* ── Marquee ──────────────────────────────────────────────── */
.marquee{background:var(--navy);border-block:1px solid var(--navy-3);padding:20px 0}
.marquee-t span{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;color:#fff;opacity:.9;
  text-transform:uppercase;font-size:clamp(1.35rem,2.4vw,2rem)
}
.marquee-t span::after{background:var(--orange);width:7px;height:7px;border-radius:0;transform:rotate(45deg)}

/* ── Package cards ────────────────────────────────────────── */
.pcard{
  border-radius:var(--r-lg);border-color:var(--line);background:var(--paper);
  transition:transform .5s var(--ease-o),box-shadow .5s var(--ease-o),border-color .4s
}
.pcard::after{
  content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--orange);
  transition:width .55s var(--ease-o);z-index:4
}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--sh-2);border-color:var(--navy-4)}
.pcard:hover::after{width:100%}
.pcard-media::after{background:linear-gradient(180deg,transparent 40%,rgba(10,37,64,.82))}
.badge{
  border-radius:2px;font-weight:700;letter-spacing:.12em;font-size:.615rem;
  background:rgba(255,255,255,.95);color:var(--navy);padding:5px 10px
}
.badge.brass{background:var(--orange);color:#fff}
.badge.oasis{background:var(--navy);color:#fff}
.fav{border-radius:2px;background:rgba(255,255,255,.94);width:34px;height:34px}
.fav svg{stroke:var(--navy)}
.fav.on svg{fill:var(--orange);stroke:var(--orange)}
.pcard-loc{letter-spacing:.2em;font-weight:700;font-size:.655rem}
.pcard-body{padding:22px 23px 24px}
.pcard-body h3{font-size:1.28rem;letter-spacing:-.03em;line-height:1.1}
.pcard-sum{font-size:.895rem;color:var(--muted);line-height:1.58}
.pcard-facts{font-size:.735rem;letter-spacing:.02em;color:var(--muted)}
.pcard-foot{border-top:1px solid var(--line);padding-top:16px}
.price .now{
  font-family:var(--f-display);font-weight:700;font-size:1.62rem;letter-spacing:-.04em;color:var(--navy)
}
.price .per{font-size:.635rem;letter-spacing:.18em;font-weight:700;color:var(--muted)}
.price .was{font-size:.75rem}
.stars b{color:var(--navy)}
.stars{color:var(--orange)}

/* ── Destination tiles ────────────────────────────────────── */
.dtile{border-radius:var(--r-lg);min-height:330px;padding:28px}
.dtile::after{background:linear-gradient(180deg,rgba(10,37,64,.08) 26%,rgba(10,37,64,.9))}
.dtile:hover{transform:translateY(-6px)}
.dtile h3{font-size:1.9rem;letter-spacing:-.04em;margin-top:5px}
.dtile .rg{letter-spacing:.24em;font-weight:700;font-size:.63rem;color:var(--orange-l)}
.dtile .df{border-top:1px solid rgba(255,255,255,.26);font-size:.76rem;font-weight:500}
.dtile .df b{
  font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.04em;color:var(--orange-l)
}

/* ── Numbered list: oversized orange numerals ─────────────── */
.numitem{gap:32px;padding:32px 0}
.numitem::before{
  font-family:var(--f-display);font-weight:700;font-size:2.5rem;letter-spacing:-.05em;
  color:var(--orange);opacity:.9;line-height:.9;min-width:64px
}
.numitem h3{font-size:1.4rem;margin-bottom:10px}

/* ── Steps ────────────────────────────────────────────────── */
.step{background:var(--navy);padding:36px 32px}
.step::before{
  font-family:var(--f-display);font-weight:700;font-size:3rem;letter-spacing:-.05em;
  color:var(--orange);opacity:1;margin-bottom:18px
}
.step h3{font-size:1.28rem;color:#fff}

/* ── Stats ────────────────────────────────────────────────── */
.stats{background:var(--line)}
.dark .stats{background:var(--navy-3)}
.stat{padding:38px 24px}
.stat b{
  font-family:var(--f-display);font-weight:700;color:var(--orange);
  font-size:clamp(2.6rem,4.6vw,4rem);letter-spacing:-.05em
}
.stat span{font-size:.665rem;letter-spacing:.22em;font-weight:700;margin-top:12px}

/* ── Reviews ──────────────────────────────────────────────── */
.rcard{border-radius:var(--r-lg);padding:30px;border-color:var(--line)}
.rcard .q{
  font-family:var(--f-display);font-weight:500;font-size:1.1rem;line-height:1.44;
  letter-spacing:-.022em;color:var(--navy)
}
.av{border-radius:2px;background:var(--navy);font-weight:700}
.starrow{color:var(--orange);letter-spacing:3px}

/* ── Pull quote ───────────────────────────────────────────── */
.pull{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.042em;line-height:1.08;
  font-size:clamp(1.9rem,4.4vw,3.5rem);max-width:19ch;color:var(--navy)
}
.pull::before{content:none}
.pull::after{
  content:"";display:block;width:64px;height:3px;background:var(--orange);margin:26px auto 0
}

/* ── Filters / toolbar ────────────────────────────────────── */
.filters{border-radius:var(--r-lg);border-color:var(--line);padding:24px}
.fgroup h4{letter-spacing:.22em;font-size:.645rem;font-weight:700;color:var(--muted)}
.chk input{accent-color:var(--orange)}
.chk:hover{color:var(--orange)}
input[type=range]{accent-color:var(--orange)}
.select{border-radius:var(--r);border-color:var(--line);font-weight:500}
.chip{border-radius:2px;background:var(--paper-2);border-color:var(--line);font-weight:500;font-size:.78rem}
.chip:hover{border-color:var(--orange);color:var(--orange)}

/* ── Package detail ───────────────────────────────────────── */
.anchors a{letter-spacing:.14em;font-weight:700;font-size:.715rem}
.anchors a:hover,.anchors a.on{color:var(--orange);border-color:var(--orange)}
.bookbox{border-radius:var(--r-lg);border-color:var(--line);border-top:3px solid var(--orange)}
.bookbox-h{background:var(--paper-2);border-color:var(--line)}
.field label{letter-spacing:.2em;font-size:.625rem;font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{border-radius:var(--r);border-color:var(--line);font-weight:500}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange)}
.pricerow.total b{font-family:var(--f-display);font-weight:700;font-size:1.62rem;letter-spacing:-.04em}
.daybar{border-radius:var(--r-lg);border-color:var(--line)}
.day{border-color:var(--line)}
.day-n{
  font-family:var(--f-display);font-weight:700;letter-spacing:.1em;color:var(--orange);font-size:.75rem
}
.day-t{font-weight:700;letter-spacing:-.02em}
.day-h:hover{background:var(--orange-p)}
.inclist li::before{background:var(--orange)}
.gallery div{border-radius:var(--r)}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-h{font-weight:700;font-size:1.06rem;letter-spacing:-.024em;color:var(--navy)}
.faq-h:hover{color:var(--orange)}
.faq-h .pm{color:var(--orange)}

/* ── Enquiry stepper ──────────────────────────────────────── */
.stepbar{border-radius:var(--r-lg);border-color:var(--line)}
.stepbar div{letter-spacing:.16em;font-weight:700;font-size:.665rem;background:var(--paper-2);border-color:var(--line)}
.stepbar div.on{background:var(--navy);color:#fff}
.stepbar div.done{background:var(--orange);color:#fff}
.opt{border-radius:var(--r-lg);border-color:var(--line)}
.opt:hover{border-color:var(--orange)}
.opt.sel{border-color:var(--orange);background:var(--orange-p);box-shadow:0 0 0 1px var(--orange) inset}
.opt b{font-weight:700;letter-spacing:-.02em}

/* ── Rows / visas ─────────────────────────────────────────── */
.rowcard{border-radius:var(--r-lg);border-color:var(--line);padding:26px 28px}
.rowcard:hover{border-color:var(--navy-4);box-shadow:var(--sh-1)}
.doc{border-radius:2px;background:var(--paper-2);border-color:var(--line)}

/* ── Rail ─────────────────────────────────────────────────── */
.rail::-webkit-scrollbar-thumb{background:var(--orange)}
.rail-nav button{border-radius:2px;border-color:var(--line)}
.rail-nav button:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.dark .rail-nav button{border-color:var(--navy-3)}

/* ── Drawer / mini ────────────────────────────────────────── */
.drawer-h{border-color:var(--line)}
.drawer-f{background:var(--paper-2);border-color:var(--line)}
.mini-th{border-radius:var(--r)}
.mini .mp{color:var(--orange);font-weight:700}

/* ── Footer ───────────────────────────────────────────────── */
.ftr{background:var(--navy);color:var(--muted-d);padding-top:78px}
.ftr h4{letter-spacing:.22em;font-size:.645rem;font-weight:700;color:#fff}
.ftr a:hover{color:var(--orange)}
.ftr .brandmark .wm{color:#fff}
.newsletter input{border-color:var(--navy-3);border-radius:var(--r);color:#fff}
.newsletter input:focus{border-color:var(--orange)}
.trust{border-color:var(--navy-3);letter-spacing:.1em;font-weight:500}
.trust b{color:var(--orange-l)}
.ftr-btm{border-color:var(--navy-3)}
.velare{color:var(--orange);letter-spacing:.16em;font-weight:700}
.paylogos span{border-color:var(--navy-3);border-radius:2px;letter-spacing:.12em;font-weight:500}

/* ── Misc ─────────────────────────────────────────────────── */
.cookie{background:var(--navy);border-radius:var(--r-lg)}
.sprog{background:var(--orange);height:3px}
.stickycta{border-color:var(--line)}
.empty h3{font-size:1.5rem}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.phero .h1,.phero .display{color:#fff}
.phero.ph-grad-s::after{
  background:linear-gradient(180deg,rgba(10,37,64,.66) 0%,rgba(10,37,64,.30) 42%,rgba(10,37,64,.92) 100%)
}

/* ── Section index numerals — architectural spine ─────────── */
.sec-no{
  display:flex;align-items:baseline;gap:16px;margin-bottom:6px;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--orange)
}
.sec-no i{
  font-style:normal;font-family:var(--f-display);font-size:.94rem;font-weight:700;letter-spacing:.02em;
  color:var(--orange);padding-right:16px;border-right:1px solid var(--line)
}
.dark .sec-no i{border-color:var(--navy-3)}

/* ── Trust bar ────────────────────────────────────────────── */
.trustbar{background:var(--navy);border-bottom:1px solid var(--navy-3)}
.trustbar-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.trustbar-in > div{
  padding:26px 28px;border-left:1px solid var(--navy-3);
}
.trustbar-in > div:first-child{border-left:0;padding-left:0}
.trustbar b{
  display:block;color:#fff;font-family:var(--f-display);font-weight:700;font-size:.98rem;
  letter-spacing:-.02em;margin-bottom:6px
}
.trustbar span{display:block;font-size:.78rem;color:var(--muted-d);line-height:1.5}
@media (max-width:860px){
  .trustbar-in{grid-template-columns:1fr 1fr}
  .trustbar-in > div:nth-child(3){border-left:0;padding-left:0}
  .trustbar-in > div{padding:20px 18px}
  .trustbar-in > div:nth-child(-n+2){border-bottom:1px solid var(--navy-3)}
}
@media (max-width:520px){
  .trustbar-in{grid-template-columns:1fr}
  .trustbar-in > div{border-left:0;padding-left:0;border-bottom:1px solid var(--navy-3)}
  .hero-meta{grid-template-columns:1fr}
  .hero-meta span{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);padding-block:16px 4px}
  .hero-meta span:first-child{border-top:0}
}

/* ── CTA band ─────────────────────────────────────────────── */
.ctaband{background:var(--navy);position:relative;overflow:hidden}
.ctaband::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(78% 120% at 50% 0%,rgba(232,119,34,.34),transparent 62%);pointer-events:none;z-index:1
}

/* ── Hero legibility: directional scrim behind the copy column ── */
.hero::before{
  background:
    linear-gradient(90deg,rgba(10,37,64,.90) 0%,rgba(10,37,64,.74) 34%,rgba(10,37,64,.28) 62%,rgba(10,37,64,.12) 100%),
    linear-gradient(180deg,rgba(10,37,64,.70) 0%,rgba(10,37,64,.10) 34%,rgba(10,37,64,.30) 62%,rgba(10,37,64,.95) 100%),
    radial-gradient(96% 68% at 88% 8%,rgba(232,119,34,.26),transparent 60%)
}
body[dir="rtl"] .hero::before{
  background:
    linear-gradient(270deg,rgba(10,37,64,.90) 0%,rgba(10,37,64,.74) 34%,rgba(10,37,64,.28) 62%,rgba(10,37,64,.12) 100%),
    linear-gradient(180deg,rgba(10,37,64,.70) 0%,rgba(10,37,64,.10) 34%,rgba(10,37,64,.30) 62%,rgba(10,37,64,.95) 100%),
    radial-gradient(96% 68% at 12% 8%,rgba(232,119,34,.26),transparent 60%)
}
.hero .eyebrow,.hero .sec-no{color:var(--orange-l)}
.hero .eyebrow::before{background:var(--orange-l)}
.hero h1{text-shadow:0 2px 40px rgba(10,37,64,.5)}

/* marquee: mask the moving track, not the navy band */
.marquee{-webkit-mask:none;mask:none;position:relative}
.marquee-t{
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
/* the search card occupies the scroll-cue's space */
.hero-scroll{display:none}

/* price lockup: figure, then a spaced unit label */
.price{display:flex;flex-direction:column;gap:2px}
.price .was{display:block;margin-bottom:1px}
.price .now{display:inline}
.price .per{display:block;margin-top:3px}
.pcard-foot{align-items:flex-end}

/* ── Editorial stack, v2: orange register mark + caption plate ── */
.ss-stack{aspect-ratio:5/5.2}
.ss-stack .a{inset:0 22% 26% 0;border-radius:var(--r-lg)}
.ss-stack .b{
  inset:44% 0 0 38%;border:8px solid var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-2)
}
.tinted .ss-stack .b{border-color:var(--paper-2)}
/* orange register mark behind the stack */
.ss-stack::before{
  content:"";position:absolute;z-index:-1;inset:-14px 44% 62% -14px;
  border-left:3px solid var(--orange);border-top:3px solid var(--orange);border-radius:var(--r-lg) 0 0 0
}
/* caption plate */
.ss-plate{
  position:absolute;z-index:3;left:0;bottom:6%;background:var(--navy);color:#fff;
  padding:16px 20px;border-radius:var(--r-lg);box-shadow:var(--sh-2);max-width:44%
}
.ss-plate b{
  display:block;font-family:var(--f-display);font-weight:700;color:var(--orange);
  font-size:1.7rem;letter-spacing:-.04em;line-height:1
}
.ss-plate span{display:block;font-size:.72rem;color:var(--muted-d);margin-top:5px;line-height:1.4}
@media (max-width:960px){
  .ss-stack::before{inset:-10px 50% 66% -10px}
  .ss-plate{max-width:56%}
}

/* register mark must sit in the stack's own context, not behind the section */
.ss-stack{position:relative;z-index:0;isolation:isolate}
.ss-stack::before{z-index:0}
.ss-stack .a{z-index:1}
.ss-stack .b{z-index:2}
.ss-plate{z-index:3}

/* ── Destination tiles: image must fill, not act as a flex child ── */
.dtile{position:relative;overflow:hidden;isolation:isolate}
.dtile > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--ease-o)
}
.dtile::after{z-index:1}
.dtile-in{position:relative;z-index:2}
.dtile:hover > img{transform:scale(1.07)}

/* dtile scrim: strong enough for the brightest photography */
.dtile::after{
  background:linear-gradient(180deg,rgba(10,37,64,.10) 18%,rgba(10,37,64,.58) 52%,rgba(10,37,64,.94) 100%)
}
.dtile .rg{color:var(--orange-l);text-shadow:0 1px 8px rgba(10,37,64,.7)}
.dtile p{color:rgba(255,255,255,.86)}
.dtile .df b{white-space:nowrap}
.dtile .df{gap:14px;align-items:baseline}
.dtile .df span{min-width:0}

/* ══════════════════════════════════════════════════════════════
   v3 — MATCH velare.ae EXACTLY
   Harvested from the live site's computed styles, 2026-08-26.
   Rounded geometry, orange glow, gradient sheen, aurora darks.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* velare.ae's actual radii */
  --r:6px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  /* velare.ae's actual shadows */
  --sh-1:0 1px 2px rgba(10,37,64,.04);
  --sh-2:0 20px 40px -20px rgba(10,37,64,.25);
  --sh-card:0 4px 6px -1px rgba(0,0,0,.06),0 10px 15px -3px rgba(0,0,0,.06);
  --sh-o:0 10px 30px -10px rgba(232,119,34,.6);
  --sh-oglow:0 0 20px 4px rgba(232,119,34,.6);
  /* velare.ae's signature gradients */
  --g-brand:linear-gradient(100deg,#E87722,#F7B27A 50%,#E87722);
  --g-heading:linear-gradient(100deg,#0A2540,#0A2540 38%,#E87722 50%,#0A2540 62%,#0A2540);
  --g-hero:linear-gradient(to top,#0A2540,rgba(10,37,64,.3),rgba(10,37,64,.6));
  --g-rule:linear-gradient(to right,transparent,rgba(232,119,34,.6),transparent);
  --g-tile:linear-gradient(to right bottom,rgba(232,119,34,.35),rgba(232,119,34,.1));
  --g-aurora:radial-gradient(340px at 50% 0%,rgba(232,119,34,.14),transparent 60%);
  --dots:radial-gradient(rgba(255,255,255,.06) 1px,transparent 0);
}

/* ── Eyebrow: plain orange caps, no leading rule (velare.ae) ── */
.eyebrow{
  font-size:.715rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  color:var(--orange);display:block
}
.eyebrow::before{content:none}
.eyebrow.c{text-align:center}
.sec-no{
  display:block;font-size:.715rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:700;color:var(--orange);margin-bottom:0
}
.sec-no i{display:none}

/* ── Headings: orange leading word + the gradient sweep ────── */
.sheen{
  background:var(--g-heading);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.dark .sheen,.hero .sheen,.ctaband .sheen{
  background:linear-gradient(100deg,#fff,#fff 34%,#F7B27A 48%,#E87722 56%,#fff 72%,#fff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent
}
.em{color:var(--orange)}
.hero .em,.dark .em,.ctaband .em{color:var(--orange)}

/* ── Buttons: rounded, sentence case, orange glow ─────────── */
.btn{
  border-radius:var(--r-lg);text-transform:none;letter-spacing:.005em;font-weight:500;
  font-size:.935rem;padding:14px 26px
}
.btn-primary{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:var(--sh-o)}
.btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);box-shadow:var(--sh-oglow);transform:translateY(-2px)}
.btn-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-3);border-color:var(--navy-3);transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--navy);background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-ghost-l{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost-l:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-sm{padding:10px 18px;font-size:.855rem;border-radius:var(--r)}
.link-u{
  color:var(--navy);font-weight:500;font-size:.9rem;letter-spacing:0;text-transform:none;
  border-bottom:0;display:inline-flex;align-items:center;gap:7px
}
.link-u:hover{color:var(--orange)}

/* ── Header ───────────────────────────────────────────────── */
.hdr{background:rgba(247,246,242,.94)}
.nav a{font-weight:400;font-size:.925rem;letter-spacing:0}
.nav a::after{height:2px;bottom:-2px}
.iconbtn{border-radius:var(--r)}
.hdr-act .btn-dark{border-radius:var(--r-lg)}
.demo-note{background:var(--navy-3);color:var(--orange-l);letter-spacing:.1em;text-transform:none;font-weight:500;font-size:.7rem}
.selectlite{border-radius:var(--r)}

/* ── Hero: velare.ae's exact overlay + dot texture ────────── */
.hero::before{
  background:
    var(--g-hero),
    linear-gradient(90deg,rgba(10,37,64,.72) 0%,rgba(10,37,64,.42) 46%,rgba(10,37,64,.10) 100%),
    var(--dots);
  background-size:auto,auto,22px 22px
}
body[dir="rtl"] .hero::before{
  background:
    var(--g-hero),
    linear-gradient(270deg,rgba(10,37,64,.72) 0%,rgba(10,37,64,.42) 46%,rgba(10,37,64,.10) 100%),
    var(--dots);
  background-size:auto,auto,22px 22px
}
.hero h1{text-shadow:none}
.hero .eyebrow{color:var(--orange)}
.hero-meta{border-top:1px solid rgba(255,255,255,.14)}
.hero-meta b{color:var(--orange)}

/* ── Ticker: light band, small caps, orange dots ──────────── */
.marquee{
  background:#fff;border-block:1px solid var(--line);padding:17px 0
}
.marquee-t span{
  font-family:var(--f-body);font-weight:500;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.19em;color:var(--muted);opacity:1;padding:0 26px;gap:26px
}
.marquee-t span::after{
  background:var(--orange);width:5px;height:5px;border-radius:50%;transform:none
}

/* ── Cards: white, generous, rounded, soft shadow ─────────── */
.pcard{
  background:#fff;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-1)
}
.pcard:hover{box-shadow:var(--sh-card);transform:translateY(-5px);border-color:var(--line)}
.pcard::after{border-radius:var(--r-xl) var(--r-xl) 0 0;height:3px}
.pcard-media{border-radius:var(--r-xl) var(--r-xl) 0 0}
.pcard-body{padding:26px 28px 28px}
.pcard-body h3{font-size:1.3rem}
.badge{border-radius:var(--r);font-weight:600;letter-spacing:.1em;padding:5px 11px}
.fav{border-radius:var(--r)}
.rcard{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:32px}
.rowcard{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-1)}
.rowcard:hover{box-shadow:var(--sh-card);border-color:var(--line)}
.opt,.filters,.bookbox,.daybar,.stepbar,.mini-th,.gallery div,.chip,.select,
.field input,.field select,.field textarea,.doc,.searchcard,.cookie,.paylogos span{border-radius:var(--r-lg)}
.chip,.doc{border-radius:var(--r-pill)}
.dtile{border-radius:var(--r-xl)}
.ss-media,.ss-stack .a,.ss-stack .b,.ss-plate{border-radius:var(--r-xl)}

/* pale-orange icon plate — velare.ae's card device */
.iplate{
  width:46px;height:46px;border-radius:var(--r-lg);background:var(--orange-p);
  display:grid;place-items:center;color:var(--navy);margin-bottom:20px
}

/* ── Numbered items: small orange 01 + short rule ─────────── */
.numlist{counter-reset:n}
.numitem{
  display:block;padding:30px 0 34px;border-top:1px solid var(--line)
}
.numitem::before{content:none}
.numitem .nlabel{
  counter-increment:n;content:"";display:flex;align-items:center;gap:14px;margin-bottom:16px;
  font-size:.735rem;font-weight:700;letter-spacing:.14em;color:var(--orange)
}
.numitem .nlabel::before{content:"0" counter(n)}
.numitem .nlabel::after{content:"";width:30px;height:1px;background:var(--line)}
.numitem h3{font-size:1.32rem;margin-bottom:10px;letter-spacing:-.03em}
.numitem p{color:var(--muted)}
.dark .numitem{border-color:var(--navy-3)}
.dark .numitem .nlabel::after{background:var(--navy-3)}

/* ── Steps: cards, not slabs ──────────────────────────────── */
.steps{background:transparent;gap:20px}
.step{
  background:rgba(255,255,255,.04);border:1px solid var(--navy-3);border-radius:var(--r-xl);
  padding:32px 30px
}
.step::before{
  font-family:var(--f-body);font-size:.735rem;font-weight:700;letter-spacing:.14em;
  color:var(--orange);margin-bottom:16px
}
.grid.g3 .step{background:rgba(255,255,255,.04)}

/* ── Stats ────────────────────────────────────────────────── */
.stats{background:transparent;gap:0}
.stat{background:transparent;border-left:1px solid var(--navy-3)}
.stat:first-child{border-left:0}
.dark .stats,.dark .stat{background:transparent}
.stat b{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted-d);letter-spacing:.19em;font-weight:600}

/* ── Dark sections get the aurora ─────────────────────────── */
.dark,.ctaband{position:relative}
.dark::before{
  content:"";position:absolute;inset:0;background:var(--g-aurora);pointer-events:none;z-index:0
}
.dark > *{position:relative;z-index:1}
.ctaband::before{background:var(--g-aurora),var(--dots);background-size:auto,22px 22px}

/* ── Divider rule, velare.ae style ────────────────────────── */
.sec-head .rule{height:1px;background:var(--g-rule);width:0}
.sec-head.in .rule{width:150px}

/* ── Pull quote ───────────────────────────────────────────── */
.pull::after{background:var(--g-brand);height:2px;width:150px}

/* ── FAQ / accordions ─────────────────────────────────────── */
.day-h:hover{background:var(--orange-p)}
.faq-h .pm,.day-n{color:var(--orange)}

/* ── WhatsApp: navy circle, as on velare.ae ───────────────── */
.wa{background:var(--navy);box-shadow:0 8px 24px rgba(10,37,64,.32)}
.wa:hover{background:var(--orange);box-shadow:var(--sh-o)}

/* ── Cookie: light, rounded, orange border ────────────────── */
.cookie{
  background:var(--paper);color:var(--navy);border:1px solid var(--orange);
  border-radius:var(--r-xl);box-shadow:var(--sh-card)
}
.cookie p{color:var(--muted)}
.cookie .btn-ghost-l{border-color:var(--line);color:var(--navy);background:transparent}
.cookie .btn-ghost-l:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── Footer ───────────────────────────────────────────────── */
.ftr{background:var(--navy)}
.trust b{color:var(--orange-l)}
.velare{letter-spacing:.1em;text-transform:none;font-weight:600}

/* ── Search card ──────────────────────────────────────────── */
.searchcard{border-top:0;box-shadow:var(--sh-2);border:1px solid var(--line)}
.searchgrid .btn{border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:none}
.searchgrid .btn:hover{box-shadow:none}
body[dir="rtl"] .searchgrid .btn{border-radius:var(--r-lg) 0 0 var(--r-lg)}
@media (max-width:960px){ .searchgrid .btn{border-radius:0 0 var(--r-lg) var(--r-lg)} }

/* ── Trust bar ────────────────────────────────────────────── */
.trustbar{background:#fff;border-block:1px solid var(--line)}
.trustbar-in > div{border-left:1px solid var(--line)}
.trustbar b{color:var(--navy)}
.trustbar span{color:var(--muted)}
@media (max-width:860px){ .trustbar-in > div:nth-child(-n+2){border-bottom:1px solid var(--line)} }
@media (max-width:520px){ .trustbar-in > div{border-bottom:1px solid var(--line)} }

/* our hero photograph is far brighter than velare.ae's — deepen the copy side */
.hero::before{
  background:
    var(--g-hero),
    linear-gradient(90deg,rgba(10,37,64,.88) 0%,rgba(10,37,64,.66) 40%,rgba(10,37,64,.18) 78%,transparent 100%),
    radial-gradient(72% 58% at 22% 30%,rgba(10,37,64,.55),transparent 70%),
    var(--dots);
  background-size:auto,auto,auto,22px 22px
}
body[dir="rtl"] .hero::before{
  background:
    var(--g-hero),
    linear-gradient(270deg,rgba(10,37,64,.88) 0%,rgba(10,37,64,.66) 40%,rgba(10,37,64,.18) 78%,transparent 100%),
    radial-gradient(72% 58% at 78% 30%,rgba(10,37,64,.55),transparent 70%),
    var(--dots);
  background-size:auto,auto,auto,22px 22px
}
/* only .nlabel may increment; .numitem carried a legacy counter-increment */
.numitem{counter-increment:none}

/* ══════════════════════════════════════════════════════════════
   v4 — ALIVE. A travel site, not a compliance site.
   Orange gradient ribbon, gradient headline word, warm washes,
   tinted hovers, drifting aurora. All reduced-motion safe.
   ══════════════════════════════════════════════════════════════ */

/* ── Headline word: the brand gradient, animated ──────────── */
.hero .em,.ctaband .em{
  background:linear-gradient(100deg,#E87722,#F7B27A 45%,#FFD9B3 55%,#F7B27A 65%,#E87722);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent
}
@media (prefers-reduced-motion:no-preference){
  .hero .em,.ctaband .em{animation:emflow 5.5s var(--ease) infinite alternate}
  @keyframes emflow{from{background-position:0% 0}to{background-position:100% 0}}
}

/* ── Drifting aurora blobs in the hero ────────────────────── */
.hero .blob{
  position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;opacity:.5
}
.hero .blob.b1{width:520px;height:520px;right:-6%;top:-18%;
  background:radial-gradient(circle,rgba(232,119,34,.55),transparent 65%)}
.hero .blob.b2{width:420px;height:420px;right:18%;bottom:-24%;
  background:radial-gradient(circle,rgba(247,178,122,.4),transparent 65%)}
@media (prefers-reduced-motion:no-preference){
  .hero .blob.b1{animation:drift1 14s var(--ease) infinite alternate}
  .hero .blob.b2{animation:drift2 18s var(--ease) infinite alternate}
  @keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:transl3d(-60px,40px,0) scale(1.15)}}
  @keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.15)}}
  @keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-30px) scale(1.1)}}
}

/* ── Marquee: the orange ribbon ───────────────────────────── */
.marquee{
  background:linear-gradient(100deg,#E87722,#F7B27A 50%,#E87722);
  background-size:200% 100%;border-block:0;padding:18px 0
}
@media (prefers-reduced-motion:no-preference){
  .marquee{animation:ribbon 9s linear infinite alternate}
  @keyframes ribbon{from{background-position:0% 0}to{background-position:100% 0}}
}
.marquee-t span{color:var(--navy);font-weight:700;letter-spacing:.21em}
.marquee-t span::after{background:#fff}

/* ── Warm washes: light sections stop being flat ──────────── */
.tinted{
  background:
    radial-gradient(640px at 88% 0%,rgba(232,119,34,.10),transparent 60%),
    radial-gradient(520px at 4% 100%,rgba(232,119,34,.07),transparent 60%),
    var(--paper-2)
}
section:not(.dark):not(.tinted):not(.ctaband){position:relative}

/* ── Card & tile hovers: orange comes up through the photo ── */
.pcard-media::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(to right bottom,rgba(232,119,34,.38),rgba(232,119,34,.08));
  transition:opacity .5s var(--ease);pointer-events:none
}
.pcard:hover .pcard-media::before{opacity:1}
.dtile::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(to right bottom,rgba(232,119,34,.42),rgba(232,119,34,.1));
  transition:opacity .5s var(--ease);pointer-events:none
}
.dtile:hover::before{opacity:1}

/* ── Trust bar: warm it up ────────────────────────────────── */
.trustbar{
  background:linear-gradient(180deg,#fff,var(--orange-p) 220%);
}
.trustbar b::before{content:"— ";color:var(--orange)}

/* ── Stats: bigger, prouder ───────────────────────────────── */
.stat b{font-size:clamp(3rem,5.6vw,4.8rem)}

/* ── Section heads: orange first word device ──────────────── */
.sec-head h2 .ow,.h1 .ow,h2 .ow{color:var(--orange)}
.dark .sec-head h2 .ow{
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent
}

/* ── Journal / experience badges: gradient chips ──────────── */
.badge.brass{
  background:linear-gradient(100deg,#E87722,#C8651D);box-shadow:0 3px 10px rgba(232,119,34,.35)
}

/* ── CTA band: full aurora treatment ──────────────────────── */
.ctaband::before{
  background:
    radial-gradient(560px at 50% -8%,rgba(232,119,34,.4),transparent 62%),
    radial-gradient(420px at 82% 110%,rgba(232,119,34,.22),transparent 60%),
    var(--dots);
  background-size:auto,auto,22px 22px
}
/* hero eyebrow: readable over the sunburst, whatever the photo does */
.hero .eyebrow{
  color:#FFD9B3;text-shadow:0 1px 3px rgba(10,37,64,.9),0 2px 18px rgba(10,37,64,.8);
  font-weight:700
}

/* ══════════════════════════════════════════════════════════════
   v5 — BANNER LEGIBILITY. Every page hero readable over ANY photo.
   Three layers: base gradient + directional copy-side shade +
   soft text shadows. Applied uniformly to .phero and .hero.
   ══════════════════════════════════════════════════════════════ */

.phero::after{
  background:
    linear-gradient(90deg,rgba(10,37,64,.82) 0%,rgba(10,37,64,.55) 44%,rgba(10,37,64,.18) 80%,rgba(10,37,64,.10) 100%),
    linear-gradient(180deg,rgba(10,37,64,.55) 0%,rgba(10,37,64,.22) 45%,rgba(10,37,64,.92) 100%)
}
body[dir="rtl"] .phero::after{
  background:
    linear-gradient(270deg,rgba(10,37,64,.82) 0%,rgba(10,37,64,.55) 44%,rgba(10,37,64,.18) 80%,rgba(10,37,64,.10) 100%),
    linear-gradient(180deg,rgba(10,37,64,.55) 0%,rgba(10,37,64,.22) 45%,rgba(10,37,64,.92) 100%)
}

/* one consistent text kit on photography */
.phero .crumbs,.hero .crumbs{
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(10,37,64,.85);font-weight:500
}
.phero .crumbs a:hover,.hero .crumbs a:hover{color:#FFD9B3}
.phero .eyebrow{
  color:#FFD9B3!important;font-weight:700;
  text-shadow:0 1px 3px rgba(10,37,64,.9),0 2px 18px rgba(10,37,64,.8)
}
.phero h1,.phero .h1{
  color:#fff;text-shadow:0 2px 6px rgba(10,37,64,.55),0 8px 40px rgba(10,37,64,.45)
}
.phero .lede{
  color:rgba(255,255,255,.94)!important;text-shadow:0 1px 4px rgba(10,37,64,.7)
}
.phero .pmeta{color:rgba(255,255,255,.95)}
.phero .pmeta span{text-shadow:0 1px 3px rgba(10,37,64,.8)}
/* photographs in banners carry text — pull their brightness down a notch */
.phero > img{filter:brightness(.76) saturate(1.06)}

/* ── Legal pages: quiet headings, small orange numerals ────── */
.legal .lh{
  font-size:1.3rem;letter-spacing:-.02em;line-height:1.25;margin:40px 0 12px;
  display:flex;align-items:baseline;gap:13px;color:var(--navy)
}
.legal .lnum{
  flex:none;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--orange);
  padding:4px 9px;border:1px solid var(--orange-p);background:var(--orange-p);border-radius:var(--r)
}
.legal p{font-size:.965rem;line-height:1.72}

/* ══════════════════════════════════════════════════════════════
   v6 — GRADIENT HOVER (the velare.ae text effect) + INDIA ACCENTS
   Saffron #FF9933 leads the hover gradient; India green #138808
   takes the savings badges. Tricolor as accent, not repaint.
   ══════════════════════════════════════════════════════════════ */
:root{ --saffron:#FF9933; --igreen:#138808; --igreen-d:#0E6606; }

/* text turns to the gradient when you move over it — headings */
.sec-head h2,.pcard-body h3 a,.dtile h3,.lh,.numitem h3,.rowcard h3,
.jrn h3,.faq-h,.step h3{transition:color .25s var(--ease)}
.sec-head h2:hover,.numitem h3:hover,.lh:hover,.rowcard:hover h3{
  background:linear-gradient(100deg,var(--saffron),var(--orange) 45%,var(--orange-d));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.pcard-body h3 a:hover{
  background:linear-gradient(100deg,var(--saffron),var(--orange) 55%,var(--orange-d));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.dark .sec-head h2:hover,.dtile:hover h3,.step:hover h3{
  background:linear-gradient(100deg,#FFD9B3,var(--saffron) 45%,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* nav links: gradient fill on hover, like velare.ae */
.nav a:hover{
  background:linear-gradient(100deg,var(--saffron),var(--orange) 60%,var(--orange-d));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.ftr a:hover{color:var(--saffron)}
.link-u:hover{
  background:linear-gradient(100deg,var(--saffron),var(--orange-d));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* hover gradient sweep on big display headings too */
h1.split:hover .ln > span, .pull:hover{transition:none}
.pull:hover{
  background:linear-gradient(100deg,var(--saffron),var(--orange) 40%,var(--navy) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* ── India green: the savings/success colour ──────────────── */
.badge.oasis{
  background:linear-gradient(100deg,var(--igreen),var(--igreen-d));color:#fff;
  box-shadow:0 3px 10px rgba(19,136,8,.3)
}
.inclist li::before{background:var(--igreen)}
.pricerow [id="bDep"],.pricerow.total + .pricerow span:last-child{color:var(--igreen)}
#nlMsg{color:var(--igreen)!important}

/* saffron highlight in the brand gradient set — livelier sweep */
.hero .em,.ctaband .em{
  background:linear-gradient(100deg,var(--saffron),#F7B27A 40%,#FFD9B3 52%,var(--saffron) 66%,var(--orange));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent
}
.stat b{
  background:linear-gradient(100deg,var(--saffron),var(--orange) 55%,#F7B27A);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* ── Package fact cards: coloured icon plates, alive ───────── */
.factgrid{gap:16px}
.factcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:20px;display:flex;flex-direction:column;gap:6px;overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.factcard:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.factcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.f-ic{width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;margin-bottom:8px}
.f-ic svg{width:21px;height:21px}
.f-lb{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.f-vl{font-weight:700;font-size:.95rem;color:var(--navy);letter-spacing:-.015em;line-height:1.35}
.f-or::before{background:linear-gradient(90deg,var(--saffron),var(--orange))}
.f-or .f-ic{background:linear-gradient(135deg,var(--saffron),var(--orange-d));box-shadow:0 6px 16px rgba(232,119,34,.35)}
.f-nv::before{background:linear-gradient(90deg,var(--navy-3),var(--navy))}
.f-nv .f-ic{background:linear-gradient(135deg,var(--navy-4),var(--navy));box-shadow:0 6px 16px rgba(10,37,64,.3)}
.f-gr::before{background:linear-gradient(90deg,#1FA80C,var(--igreen))}
.f-gr .f-ic{background:linear-gradient(135deg,#1FA80C,var(--igreen-d));box-shadow:0 6px 16px rgba(19,136,8,.3)}
.f-sa::before{background:linear-gradient(90deg,#FFB763,var(--saffron))}
.f-sa .f-ic{background:linear-gradient(135deg,#FFB763,var(--orange));box-shadow:0 6px 16px rgba(255,153,51,.4)}
@media (max-width:680px){ .factgrid{grid-template-columns:1fr 1fr;gap:12px} }

/* ══════════════════════════════════════════════════════════════
   v7 — THE DEPARTURES WALL HERO. Visual, cursor-reactive, no copy.
   ══════════════════════════════════════════════════════════════ */
.hero-deck{
  min-height:min(88vh,820px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:38px;padding:64px 0 74px;overflow:hidden
}
.hero-deck::before{
  background:
    radial-gradient(700px at 50% -10%,rgba(232,119,34,.30),transparent 62%),
    radial-gradient(520px at 12% 110%,rgba(232,119,34,.14),transparent 60%),
    var(--dots);
  background-size:auto,auto,22px 22px
}
#dust{position:absolute;inset:0;z-index:2;pointer-events:none}
.route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-deck .blob{z-index:0}

.deck{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:center;
  gap:clamp(-34px,-2vw,-20px);width:100%;max-width:1180px;padding:0 20px
}
.polar{
  margin:0;flex:0 0 clamp(150px,17vw,236px);background:#fff;border-radius:10px;
  padding:9px 9px 13px;box-shadow:0 20px 40px -20px rgba(4,14,26,.7);
  transform:rotate(var(--rz)) translateY(var(--fy,0));
  transition:box-shadow .4s var(--ease);will-change:transform
}
.polar img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;display:block}
.polar figcaption{
  text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);padding-top:9px
}
.polar.hi{flex-basis:clamp(180px,20vw,280px);z-index:4}
.polar:hover{box-shadow:0 0 20px 4px rgba(232,119,34,.45),0 26px 50px -20px rgba(4,14,26,.8);z-index:6}
@media (prefers-reduced-motion:no-preference){
  .polar{animation:pfloat 6.5s var(--ease) infinite alternate}
  .polar:nth-child(2n){animation-duration:7.8s;animation-delay:-2s}
  .polar:nth-child(3n){animation-duration:9s;animation-delay:-4s}
  @keyframes pfloat{from{--fy:0px}to{--fy:-14px}}
  @property --fy{syntax:"<length>";inherits:false;initial-value:0px}
}
.deck-cta{position:relative;z-index:5;justify-content:center;margin-top:0}
@media (max-width:760px){
  .hero-deck{min-height:74vh;gap:30px}
  .deck{flex-wrap:nowrap}
  .polar:nth-child(1),.polar:nth-child(5){display:none}
  .polar{flex-basis:clamp(130px,28vw,180px)}
  .route{display:none}
}
.polar-link{display:contents}
.polar{cursor:pointer}

/* ── Season bar: the "when to go" strip ────────────────────── */
.seasonbox{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,3vw,34px);box-shadow:var(--sh-1)
}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
.mpill{
  text-align:center;padding:12px 4px;border-radius:var(--r-lg);font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper-2);
  border:1px solid var(--line);transition:transform .3s var(--ease)
}
.mpill.on{
  background:linear-gradient(135deg,var(--saffron),var(--orange-d));color:#fff;border-color:transparent;
  box-shadow:0 6px 16px rgba(232,119,34,.35)
}
.mpill:hover{transform:translateY(-3px)}
@media (max-width:760px){ .months{grid-template-columns:repeat(6,1fr)} }

/* FIX: polaroids are wrapped in .polar-link — hide by link position on mobile */
@media (max-width:760px){
  .polar:nth-child(1),.polar:nth-child(5){display:block}
  .polar-link:nth-child(1),.polar-link:nth-child(5){display:none}
  .deck{gap:0}
  .polar{flex:0 0 30vw}
}

/* ── Trust strip v2: gradient icon cards, not empty boxes ──── */
.trustbar{background:transparent;border:0;position:relative;z-index:5}
.trustbar-in{gap:16px}
.trustbar-in > div{
  border:1px solid var(--line)!important;border-radius:var(--r-xl);background:#fff;
  padding:22px!important;box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.trustbar-in > div:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.trustbar-in > div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.trustbar-in > div:nth-child(1)::before{background:linear-gradient(90deg,var(--saffron),var(--orange))}
.trustbar-in > div:nth-child(2)::before{background:linear-gradient(90deg,#1FA80C,var(--igreen))}
.trustbar-in > div:nth-child(3)::before{background:linear-gradient(90deg,var(--navy-4),var(--navy))}
.trustbar-in > div:nth-child(4)::before{background:linear-gradient(90deg,#FFB763,var(--saffron))}
.trustbar b::before{content:none}
.t-ic{width:42px;height:42px;border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;margin-bottom:12px}
.t-ic svg{width:20px;height:20px}
.trustbar-in > div:nth-child(1) .t-ic{background:linear-gradient(135deg,var(--saffron),var(--orange-d));box-shadow:0 6px 16px rgba(232,119,34,.35)}
.trustbar-in > div:nth-child(2) .t-ic{background:linear-gradient(135deg,#1FA80C,var(--igreen-d));box-shadow:0 6px 16px rgba(19,136,8,.3)}
.trustbar-in > div:nth-child(3) .t-ic{background:linear-gradient(135deg,var(--navy-4),var(--navy));box-shadow:0 6px 16px rgba(10,37,64,.3)}
.trustbar-in > div:nth-child(4) .t-ic{background:linear-gradient(135deg,#FFB763,var(--orange));box-shadow:0 6px 16px rgba(255,153,51,.4)}
@media (max-width:860px){
  .trustbar-in{grid-template-columns:1fr 1fr;gap:12px}
  .trustbar-in > div{border-bottom:1px solid var(--line)!important;padding:16px!important}
}
@media (max-width:520px){ .trustbar-in{grid-template-columns:1fr 1fr} }

/* hero → page transition: fade the navy into paper instead of a hard cut */
.hero-deck::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,37,64,.55) 55%,var(--navy))
}
@media (max-width:760px){
  .searchcard{margin-inline:6px;margin-top:-40px}
  .hero-deck{padding-bottom:96px}
  .deck-cta .btn{padding:13px 22px}
}

/* ── The four-step flow: connected, coloured, at a glance ──── */
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative
}
.flow::before{
  content:"";position:absolute;top:44px;left:10%;right:10%;height:0;z-index:0;
  border-top:2px dashed var(--line)
}
.fstep{
  position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:24px 22px;box-shadow:var(--sh-1);text-align:center;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.fstep:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
.fstep::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.fstep .f-ic{margin:0 auto 12px}
.fs-no{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px
}
.fstep h3{font-size:1.18rem;margin-bottom:8px}
.fstep p{font-size:.885rem;color:var(--muted);line-height:1.55}
.fstep p b{color:var(--navy)}
.f-sa::before{background:linear-gradient(90deg,#FFB763,var(--saffron))}
.f-nv::before{background:linear-gradient(90deg,var(--navy-4),var(--navy))}
.f-gr::before{background:linear-gradient(90deg,#1FA80C,var(--igreen))}
.f-or::before{background:linear-gradient(90deg,var(--saffron),var(--orange))}
@media (max-width:960px){
  .flow{grid-template-columns:1fr 1fr}
  .flow::before{display:none}
}
@media (max-width:520px){ .flow{grid-template-columns:1fr} }

/* FIX: .trustbar span{color:muted} was overriding the icon colour —
   icons rendered dark-on-dark inside their plates */
.trustbar span.t-ic{color:#fff}
.trustbar span.t-ic svg{width:21px;height:21px;display:block}

/* trust cards: no hover lift (a lifted card reads as misaligned) + hard alignment */
.trustbar-in > div:hover{transform:none;box-shadow:var(--sh-card)}
.trustbar-in > div{display:flex;flex-direction:column;align-items:flex-start}
.trustbar span.t-ic{flex:none}
.trustbar b{min-height:2.5em;display:flex;align-items:flex-start;margin-bottom:2px}
@media (max-width:860px){
  /* phone: icon left, text right — everything on one baseline grid */
  .trustbar-in > div{flex-direction:row;gap:14px;align-items:flex-start}
  .trustbar span.t-ic{width:38px;height:38px;margin-bottom:0;margin-top:2px}
  .trustbar b{min-height:0;margin-bottom:4px;display:block}
  .trustbar-in{grid-template-columns:1fr}
  .trustbar-in > div > div{flex:1}
}

/* FIX: component hover transitions were REPLACING the reveal transition —
   opacity had no transition left, so cards popped in with no animation.
   Merge them: reveal (opacity/transform) + hover (transform/shadow) together. */
@media (prefers-reduced-motion:no-preference){
  .pcard[data-anim],.dtile[data-anim],.factcard[data-anim],.fstep[data-anim],
  .rowcard[data-anim],.rcard[data-anim]{
    transition:opacity .8s var(--ease),transform .6s var(--ease-o),box-shadow .45s var(--ease)
  }
}

/* FIX: split-line mask was cropping descenders (g, j, y) —
   extend each line's mask window below the baseline */
.split .ln{padding-bottom:.14em;margin-bottom:-.14em}
.split .ln > span{padding-bottom:.14em;margin-bottom:-.14em}

/* ══════════════════════════════════════════════════════════════
   v8 — THE 3D LAYER. Perspective staging, pointer tilt, glare.
   ══════════════════════════════════════════════════════════════ */

/* grids become 3D stages */
.grid,.factgrid,.flow,.trustbar-in,.rail,.dlayout{perspective:1100px}
.t3d{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform
}
.t3d.tilting{transition:box-shadow .3s var(--ease)}
/* tilt + reveal compose: reveal moves opacity, tilt owns transform once .in */
[data-anim].t3d.in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.t3d.tilting{box-shadow:0 30px 60px -24px rgba(10,37,64,.35)}

/* the moving light glare */
.t3d::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;
  opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.32),rgba(255,217,179,.06) 45%,transparent 70%)
}
.t3d.tilting::after{opacity:1}
/* dark cards get a warmer glare */
.dtile.t3d::after,.fstep.t3d::after{
  background:radial-gradient(420px at var(--gx,50%) var(--gy,50%),rgba(255,217,179,.28),transparent 65%)
}

/* children lift off the card plane while tilting */
.t3d .f-ic,.t3d .t-ic{transform:translateZ(0);transition:transform .4s var(--ease)}
.t3d.tilting .f-ic,.t3d.tilting .t-ic{transform:translateZ(34px)}
.pcard.t3d .pcard-body h3{transition:transform .4s var(--ease)}
.pcard.t3d.tilting .pcard-body h3{transform:translateZ(26px)}
.pcard.t3d .price .now{transition:transform .4s var(--ease);display:inline-block}
.pcard.t3d.tilting .price .now{transform:translateZ(30px)}
.pcard.t3d .pcard-body, .factcard.t3d, .fstep.t3d{transform-style:preserve-3d}

/* cards ENTER from depth, not just from below */
@media (prefers-reduced-motion:no-preference){
  .pcard[data-anim]:not(.in),.dtile[data-anim]:not(.in),.factcard[data-anim]:not(.in),
  .fstep[data-anim]:not(.in){
    transform:perspective(1000px) translateY(30px) rotateX(9deg);transform-origin:50% 100%
  }
}

/* ── Hero deck in true 3D space ───────────────────────────── */
.deck{perspective:1300px;transform-style:preserve-3d}
.polar{transform-style:preserve-3d}
.polar-link:nth-child(1) .polar{--ryy:16deg}
.polar-link:nth-child(2) .polar{--ryy:8deg}
.polar-link:nth-child(3) .polar{--ryy:0deg}
.polar-link:nth-child(4) .polar{--ryy:-8deg}
.polar-link:nth-child(5) .polar{--ryy:-16deg}
.polar{transform:rotate(var(--rz)) rotateY(var(--ryy,0deg)) translateY(var(--fy,0))}
.polar:hover{transform:rotate(var(--rz)) rotateY(0deg) translateY(var(--fy,0)) scale(1.05)}
.polar{transition:box-shadow .4s var(--ease),transform .5s var(--ease-o)}

/* 3D button press */
.btn{transform-style:preserve-3d}
.btn:active{transform:translateY(1px) scale(.985)}

/* ══════════════════════════════════════════════════════════════
   v9 — SCROLL PARALLAX. Layers move at different speeds.
   Uses the `translate` property, so it composes with tilt (transform)
   and reveals without fighting them. Compositor-only, no scroll JS.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){

  /* 1 · Banner photographs scroll slower than the page (classic parallax) */
  .phero{overflow:hidden}
  .phero > img{
    scale:1.22;
    animation:pxBanner linear both;animation-timeline:view();
    animation-range:entry 0% exit 100%
  }
  @keyframes pxBanner{from{translate:0 -7%}to{translate:0 9%}}

  /* 2 · Card grids: middle column drifts against its neighbours */
  .g3 > *:nth-child(3n+2){
    animation:pxCol linear both;animation-timeline:view();animation-range:entry 0% exit 100%
  }
  .g4 > *:nth-child(4n+2),.g4 > *:nth-child(4n+4){
    animation:pxColS linear both;animation-timeline:view();animation-range:entry 0% exit 100%
  }
  .layout .g2 > *:nth-child(2n){
    animation:pxColS linear both;animation-timeline:view();animation-range:entry 0% exit 100%
  }
  @keyframes pxCol{from{translate:0 44px}to{translate:0 -44px}}
  @keyframes pxColS{from{translate:0 28px}to{translate:0 -28px}}

  /* 3 · Editorial photo stacks: the two photos separate in depth */
  .ss-stack .a{animation:pxSlow linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .ss-stack .b{animation:pxFast linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .ss-plate{animation:pxPlate linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes pxSlow{from{translate:0 26px}to{translate:0 -26px}}
  @keyframes pxFast{from{translate:0 62px}to{translate:0 -62px}}
  @keyframes pxPlate{from{translate:0 84px}to{translate:0 -84px}}

  /* 4 · Dark sections: the aurora glow slides across the section */
  .dark::before,.ctaband::before{
    animation:pxAurora linear both;animation-timeline:view();animation-range:entry 0% exit 100%
  }
  @keyframes pxAurora{from{translate:0 -70px}to{translate:0 70px}}

  /* 5 · Pull quote and stats float gently against their sections */
  .pull{animation:pxColS linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .stat b{display:inline-block;animation:pxStat linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  @keyframes pxStat{from{translate:0 26px}to{translate:0 0}}

  /* 6 · Single editorial images keep their stronger drift */
  .ss-media.drift img,.ss-media.settle img{animation-range:entry 0% exit 100%}
}
}

/* ── The route globe ──────────────────────────────────────── */
.globesec{overflow:hidden}
.globewrap{position:relative;margin-top:34px}
#globe{width:100%;display:block;cursor:grab;touch-action:pan-y}
#globe:active{cursor:grabbing}
.globelegend{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:18px
}
.globelegend a{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d)
}
.globelegend a:hover{color:var(--orange-l)}

/* ── Cinematic scroll journey ─────────────────────────────── */
.journey{height:420vh;padding:0;background:var(--navy);position:relative}
.j-stick{position:sticky;top:0;height:100vh;overflow:hidden}
.j-slide{position:absolute;inset:0;opacity:0}
.j-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.7) saturate(1.05)
}
.j-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,37,64,.5),transparent 40%,rgba(10,37,64,.86))
}
.j-cap{
  position:absolute;left:clamp(20px,6vw,90px);bottom:clamp(60px,12vh,130px);z-index:2;
  color:#fff;max-width:34ch
}
.j-no{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--orange-l);margin-bottom:12px
}
.j-cap h3{font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.035em;color:#fff;margin-bottom:10px}
.j-cap p{font-size:1.05rem;color:rgba(255,255,255,.85);line-height:1.55}
.j-hint{
  position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:3;
  font-size:.64rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55)
}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
  .journey{view-timeline-name:--jt;view-timeline-axis:block}
  .j-slide{
    animation:jslide linear both;
    animation-timeline:--jt
    /* per-slide animation-range set inline */
  }
  .j-slide img{animation:jzoom linear both;animation-timeline:--jt;animation-range:inherit}
  .journey .j-cap{animation:jcap linear both;animation-timeline:--jt;animation-range:inherit}
  @keyframes jslide{0%{opacity:0}18%{opacity:1}82%{opacity:1}100%{opacity:0}}
  @keyframes jzoom{from{scale:1.14}to{scale:1}}
  @keyframes jcap{0%{translate:0 46px;opacity:0}22%{translate:0 0;opacity:1}78%{opacity:1}100%{opacity:0}}
}
}
/* fallback (no scroll-timeline / reduced motion): stacked stills */
@supports not (animation-timeline: view()){
  .journey{height:auto}
  .j-stick{position:static;height:auto;display:grid;gap:2px}
  .j-slide{position:relative;opacity:1;height:70vh}
  .j-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .journey{height:auto}
  .j-stick{position:static;height:auto;display:grid;gap:2px}
  .j-slide{position:relative;opacity:1;height:70vh}
  .j-hint{display:none}
}
/* stronger banner parallax */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
  @keyframes pxBanner{from{translate:0 -12%}to{translate:0 14%}}
}
}

/* ══════════════════════════════════════════════════════════════
   v10 — THE DIVE HERO (JS-driven). You scroll INTO the photograph
   and arrive at the deck. Layout here; motion in the hero rAF loop.
   ══════════════════════════════════════════════════════════════ */
.dive{position:relative}
.dive-stick{position:relative}
.dive-img{display:none}

@media (prefers-reduced-motion:no-preference){
  .dive{height:250vh}
  .dive-stick{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--navy)}
  .dive-stick .hero-deck{position:absolute;inset:0;min-height:0;height:100%;padding:40px 0}
  .dive-img{display:block;position:absolute;inset:0;z-index:6;pointer-events:none}
  .dive-img img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transform-origin:63% 34%;will-change:transform,opacity
  }
  .dive-img::after{
    content:"";position:absolute;inset:0;opacity:var(--veil,1);
    background:linear-gradient(180deg,rgba(10,37,64,.42),transparent 40%,rgba(10,37,64,.6))
  }
  .dive-hint{
    position:absolute;bottom:30px;left:50%;translate:-50% 0;color:#fff;z-index:2;
    font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    text-shadow:0 1px 6px rgba(10,37,64,.8);opacity:var(--hint,1)
  }
  .dive-hint::after{
    content:"";position:absolute;left:50%;top:-46px;width:1px;height:34px;
    background:linear-gradient(transparent,var(--orange));
    animation:sdown2 2s var(--ease) infinite
  }
  @keyframes sdown2{0%{opacity:0;transform:scaleY(.3)}45%{opacity:1}100%{opacity:0;transform:scaleY(1) translateY(12px)}}
}
/* reduced motion: no pin, no dive — the deck hero as-is */
@media (prefers-reduced-motion:reduce){
  .dive-img{display:none!important}
}
/* banner dust canvas sits above the photo/scrim, below the text */
.dust-b{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.phero > .wrap{z-index:3}

/* ══ Trust cards, definitive. Plate is an <i> — no span rule can touch it. ══ */
.trustbar-in > div{
  display:grid!important;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;
  padding:20px 22px!important
}
.tb-ic{
  grid-row:1 / span 2;width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;font-style:normal
}
.tb-ic svg{width:23px;height:23px;display:block;color:#fff;stroke:#fff}
.trustbar b{min-height:0;margin:0;display:block;font-size:1.02rem;letter-spacing:-.02em;align-self:end}
.trustbar-in > div > span:not(.tb-ic){align-self:start}
.trustbar-in > div:nth-child(1) .tb-ic{background:linear-gradient(135deg,var(--saffron),var(--orange-d));box-shadow:0 6px 16px rgba(232,119,34,.35)}
.trustbar-in > div:nth-child(2) .tb-ic{background:linear-gradient(135deg,#1FA80C,var(--igreen-d));box-shadow:0 6px 16px rgba(19,136,8,.3)}
.trustbar-in > div:nth-child(3) .tb-ic{background:linear-gradient(135deg,var(--navy-4),var(--navy));box-shadow:0 6px 16px rgba(10,37,64,.3)}
.trustbar-in > div:nth-child(4) .tb-ic{background:linear-gradient(135deg,#FFB763,var(--orange));box-shadow:0 6px 16px rgba(255,153,51,.4)}
@media (max-width:860px){
  .trustbar-in > div{padding:16px!important}
  .tb-ic{width:40px;height:40px;border-radius:11px}
  .tb-ic svg{width:19px;height:19px}
}

/* ══ Scene-hero: five journey-style scenes before the deck ══ */
.dive-seq{display:none}
@media (prefers-reduced-motion:no-preference){
  .dive{height:520vh}
  .dive-seq{display:block;position:absolute;inset:0;z-index:6;pointer-events:none}
  .dv-s{position:absolute;inset:0;margin:0;opacity:1}
  .dv-s img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transform-origin:58% 40%;will-change:transform;filter:brightness(.82) saturate(1.06)
  }
  .dv-s::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,37,64,.42),transparent 42%,rgba(10,37,64,.72))
  }
  .dv-s .j-cap{z-index:2;will-change:opacity,translate}
  .dive-seq .dive-hint{z-index:3}
}
@media (prefers-reduced-motion:reduce){ .dive-seq{display:none!important} }

/* ══ Deck CTA: anchored, centred, clear of the cards ══ */
.dive-stick .hero-deck{justify-content:center;gap:0}
.dive-stick .deck{translate:0 -26px}
.deck-cta{
  position:absolute;left:50%;bottom:52px;translate:-50% 0;margin:0;z-index:7;
  display:flex;gap:14px;justify-content:center;width:max-content;max-width:94vw;flex-wrap:wrap
}
@media (max-width:760px){
  .deck-cta{bottom:24px;gap:10px}
  .dive{height:460vh}
}

/* ── Pin exit seam: search card no longer climbs into the hero ── */
.searchcard{margin-top:36px}
@media (max-width:760px){ .searchcard{margin-top:20px;margin-inline:6px} }
/* trim dead scroll after the deck reveal */
@media (prefers-reduced-motion:no-preference){
  .dive{height:440vh}
  @media (max-width:760px){ .dive{height:420vh} }
}

/* ── ctaband is a dark surface: text must always be light ──── */
.ctaband h1,.ctaband h2,.ctaband h3,.ctaband .h1,.ctaband .h2{color:#fff}
.ctaband .lede{color:var(--muted-d)}
.ctaband .sheen{
  background:linear-gradient(100deg,#fff,#fff 34%,#F7B27A 48%,#E87722 56%,#fff 72%,#fff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent
}
/* steady the ctaband contrast over its photograph */
.ctaband > .ph{opacity:.15!important}
.ctaband::before{
  background:
    linear-gradient(180deg,rgba(10,37,64,.35),rgba(10,37,64,.15) 40%,rgba(10,37,64,.45)),
    radial-gradient(560px at 50% -8%,rgba(232,119,34,.4),transparent 62%),
    var(--dots);
  background-size:auto,auto,22px 22px
}
.ctaband .lede{color:#B9C7D6}

/* ── Scene captions: small site-intro lines ────────────────── */
.dv-cap{max-width:44ch}
.dv-cap .j-no{font-size:.66rem;letter-spacing:.3em;margin-bottom:10px;color:var(--orange-l)}
.dv-line{
  font-size:clamp(1.05rem,1.8vw,1.42rem);line-height:1.5;color:#fff;font-weight:500;
  letter-spacing:-.01em;text-shadow:0 1px 6px rgba(10,37,64,.7);margin:0
}

/* ── Scenes are ALIVE: continuous Ken Burns drift under the scroll-zoom.
     CSS animates `translate`; JS owns `scale` — they compose. ── */
@media (prefers-reduced-motion:no-preference){
  .dv-s img{animation:kbA 13s ease-in-out infinite alternate;will-change:transform,translate}
  .dv-s:nth-child(2n) img{animation-name:kbB;animation-duration:15s}
  .dv-s:nth-child(3n) img{animation-name:kbC;animation-duration:17s}
  @keyframes kbA{from{translate:-1.2% -0.8%}to{translate:1.4% 1.0%}}
  @keyframes kbB{from{translate:1.3% 0.6%}to{translate:-1.2% -1.1%}}
  @keyframes kbC{from{translate:0.8% 1.2%}to{translate:-1.4% -0.6%}}
}

/* ══ v11 — SECTION FIXES ══ */

/* 1 · destination tiles: text always readable, whatever the photo */
.dtile::after{
  background:linear-gradient(180deg,rgba(10,37,64,.16) 6%,rgba(10,37,64,.55) 40%,rgba(10,37,64,.96) 100%)
}
.dtile h3,.dtile p,.dtile .df{text-shadow:0 1px 4px rgba(10,37,64,.85)}
.dtile .rg{text-shadow:0 1px 4px rgba(10,37,64,.9)}

/* 2 · destination grid replaces the scroll rail */
.dgrid{grid-template-columns:repeat(4,1fr);gap:16px}
.dtile-sm{min-height:236px;padding:18px}
.dtile-sm h3{font-size:1.4rem}
.dtile-sm p{display:none}
.dtile-sm .df{margin-top:10px;padding-top:10px}
@media (max-width:1080px){ .dgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .dgrid{grid-template-columns:repeat(2,1fr);gap:10px} .dtile-sm{min-height:190px;padding:14px} .dtile-sm h3{font-size:1.1rem} }

/* 3 · globe section: compact */
.globesec{padding-block:clamp(44px,5.5vw,64px)}
.globewrap{max-width:780px;margin:10px auto 0}
.globelegend{margin-top:8px;gap:6px 16px}

/* 4 · deliverables showcase (replaces the process image) */
.delivbox{
  background:var(--navy);border:1px solid var(--navy-3);border-radius:var(--r-xl);
  padding:26px 26px 14px;box-shadow:var(--sh-2);position:relative;overflow:hidden
}
.delivbox::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px at 85% -10%,rgba(232,119,34,.25),transparent 60%)
}
.delivbox-h{margin-bottom:14px;position:relative}
.deliv{
  display:flex;gap:16px;align-items:baseline;padding:13px 0;position:relative;
  border-top:1px solid var(--navy-3)
}
.deliv i{
  font-style:normal;font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--orange);flex:none
}
.deliv b{display:block;color:#fff;font-size:1.02rem;letter-spacing:-.015em}
.deliv span{display:block;color:var(--muted-d);font-size:.83rem;margin-top:2px}
.deliv:hover b{
  background:linear-gradient(100deg,var(--saffron),var(--orange-l));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
/* destination tiles: just the place name (+ small from-price) */
.dtile-sm .rg{display:none}
.dtile-sm .df span{display:none}
.dtile-sm .df{border-top:0;padding-top:0;margin-top:6px;justify-content:flex-start}
.dtile-sm .df b{font-size:1.02rem;color:var(--orange-l)}
.dtile-sm::after{
  background:linear-gradient(180deg,rgba(10,37,64,.12) 4%,rgba(10,37,64,.62) 44%,rgba(10,37,64,.97) 100%)
}

/* ══ Route board: globe + flight list, one tight section ══ */
.globewrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,52px);
  align-items:center;max-width:1080px;margin:18px auto 0
}
.routeboard{display:flex;flex-direction:column}
.rb-row{
  display:grid;grid-template-columns:auto auto 1fr auto auto;gap:12px;align-items:baseline;
  padding:11px 12px;border-top:1px solid var(--navy-3);border-radius:var(--r);
  transition:background .25s var(--ease)
}
.rb-row:first-child{border-top:0}
.rb-row:hover{background:rgba(232,119,34,.10)}
.rb-code{font-size:.66rem;font-weight:700;letter-spacing:.16em;color:var(--muted-d)}
.rb-arrow{color:var(--orange);font-weight:700}
.rb-name{color:#fff;font-weight:700;letter-spacing:-.015em;font-size:1rem}
.rb-row:hover .rb-name{
  background:linear-gradient(100deg,var(--saffron),var(--orange-l));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.rb-time{font-size:.76rem;color:var(--muted-d);font-variant-numeric:tabular-nums}
.rb-price{font-size:.8rem;font-weight:700;color:var(--orange-l);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .globewrap{grid-template-columns:1fr}
  #globe{max-width:420px;margin:0 auto}
  .rb-row{padding:9px 8px}
}

/* ── Scene captions: just the name, big, dead centre ───────── */
.dv-cap{
  left:0!important;right:0!important;bottom:auto!important;top:50%!important;
  translate:0 -50%!important;max-width:none;text-align:center;padding:0 20px
}
.dv-name{
  font-size:clamp(3.4rem,10vw,8.5rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  color:#fff;margin:0;text-shadow:0 4px 30px rgba(10,37,64,.65),0 1px 8px rgba(10,37,64,.5)
}
.dv-cap h3.dv-name{
  font-size:clamp(3.4rem,10vw,8.5rem);line-height:1;letter-spacing:-.04em;color:#fff;margin:0
}

/* ══════════════════════════════════════════════════════════════
   v12 — THE FILM. One continuous dark atmosphere (oryzo-style),
   HUD chrome, flying courier, motion-blur type, grain.
   Scoped to body.cine (the homepage).
   ══════════════════════════════════════════════════════════════ */
body.cine{background:var(--navy);color:#E8EEF5}
.cine section,.cine .tinted{background:transparent}
.cine section:not(.dark):not(.ctaband){position:relative}
.cine h2,.cine h3:not(.dv-name),.cine .h1,.cine .h2{color:#fff}
.cine .sec-head p,.cine .lede{color:var(--muted-d)}
.cine .sec-no i{border-color:var(--navy-3)}
.cine .headrow .link-u{color:var(--orange-l)}
.cine .sheen{
  background:linear-gradient(100deg,#fff,#fff 34%,#F7B27A 48%,#E87722 56%,#fff 72%,#fff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent
}
.cine .ow{color:var(--orange)}

/* glass components on the dark ground */
.cine .searchcard{
  background:rgba(15,47,78,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12)
}
.cine .sfield{border-color:rgba(255,255,255,.10)}
.cine .sfield label{color:var(--orange-l)}
.cine .sfield select,.cine .sfield input{color:#fff;background:transparent}
.cine .sfield select option{color:var(--navy);background:#fff}
.cine .trustbar{background:transparent;border:0}
.cine .trustbar-in > div{
  background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none
}
.cine .trustbar b{color:#fff}
.cine .trustbar-in > div > div > span,.cine .trustbar span:not(.tb-ic){color:var(--muted-d)}
.cine .pcard,.cine .rcard{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none
}
.cine .pcard-body h3,.cine .pcard-body h3 a{color:#fff}
.cine .pcard-sum,.cine .pcard-facts,.cine .stars{color:var(--muted-d)}
.cine .price .now{color:var(--orange-l)}
.cine .price .was,.cine .price .per{color:var(--muted-d)}
.cine .pcard-foot{border-color:rgba(255,255,255,.12)}
.cine .rcard .q{color:#E8EEF5}
.cine .rcard .who{border-color:rgba(255,255,255,.12)}
.cine .rcard .who b{color:#fff}
.cine .small{color:var(--muted-d)}
.cine .numitem{border-color:var(--navy-3)}
.cine .numitem p{color:var(--muted-d)}
.cine .numitem .nlabel::after{background:var(--navy-3)}
.cine .btn-outline{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.cine .btn-outline:hover{background:#fff;color:var(--navy)}
.cine .stat{border-color:var(--navy-3)}
.cine .stat span{color:var(--muted-d)}
.cine .sec-head .rule{background:var(--g-rule)}
.cine .marquee{border-block:0}

/* HUD nav: dotted underline, oryzo-style */
.cine .nav a::after{content:none}
.cine .nav a{padding-bottom:4px;border-bottom:1px dotted transparent}
.cine .nav a:hover,.cine .nav a[aria-current="page"]{
  border-bottom-color:var(--orange);background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--orange)
}

/* chapter rail (right edge) */
.chapters{
  position:fixed;right:18px;top:50%;translate:0 -50%;z-index:66;
  display:flex;flex-direction:column;gap:16px
}
.chapters a{
  display:flex;align-items:center;gap:9px;justify-content:flex-end;
  font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d)
}
.chapters a::after{
  content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--muted-d);flex:none;
  transition:background .3s,border-color .3s,box-shadow .3s
}
.chapters a span{opacity:0;translate:6px 0;transition:opacity .3s,translate .3s}
.chapters a:hover span,.chapters a.on span{opacity:1;translate:0 0}
.chapters a.on{color:var(--orange-l)}
.chapters a.on::after{background:var(--orange);border-color:var(--orange);box-shadow:0 0 10px 2px rgba(232,119,34,.6)}
@media (max-width:1120px){ .chapters{display:none} }

/* the flying courier */
.flyer{
  position:fixed;left:0;top:0;z-index:64;pointer-events:none;opacity:0;
  filter:drop-shadow(0 4px 14px rgba(232,119,34,.45));will-change:transform,opacity
}
@media (max-width:900px){ .flyer{display:none} }
@media (prefers-reduced-motion:reduce){ .flyer,.chapters{display:none} }

/* film grain over everything */
body.cine::after{
  content:"";position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")
}

/* motion-blur on type entrances (the oryzo streak) */
@media (prefers-reduced-motion:no-preference){
  .split .ln > span{filter:blur(0);transition:transform 1s var(--ease),filter 1s var(--ease)}
  .split:not(.in) .ln > span{filter:blur(12px)}
  [data-anim="up"]:not(.in),[data-anim="rise"]:not(.in){filter:blur(8px)}
  [data-anim].in{filter:blur(0)}
  [data-anim]{transition-property:opacity,transform,filter}
}

/* ── Mobile optimization: comfortable tap targets everywhere ── */
@media (max-width:760px){
  .btn,.btn-sm{min-height:42px;display:inline-flex;align-items:center}
  .rb-row{padding-block:12px}
  .faq-h,.day-h{min-height:46px}
  .chip{min-height:34px;display:inline-flex;align-items:center}
}

/* ── Pull quote on the dark homepage: light base, light-ending hover ── */
.cine .pull{color:#fff}
.cine .pull:hover{
  background:linear-gradient(100deg,#FFD9B3,var(--saffron) 38%,var(--orange-l) 62%,#fff 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* ══ Scene 0: the JANE title card ══ */
.dv-title{
  position:absolute;inset:0;z-index:16;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,37,64,.66),rgba(10,37,64,.5) 45%,rgba(10,37,64,.78));
  will-change:opacity,scale,filter
}
.ttl-jane{
  display:flex;font-size:clamp(5.2rem,19vw,14.5rem);letter-spacing:.05em;line-height:.9;
  font-weight:700;margin:0
}
.ttl-jane span{
  background:linear-gradient(100deg,#fff 8%,#FFD9B3 30%,#F7B27A 44%,#E87722 56%,#fff 82%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(232,119,34,.35))
}
.ttl-sub{
  font-size:clamp(.78rem,2vw,1.08rem);letter-spacing:.6em;text-indent:.6em;color:#F7B27A;
  text-transform:uppercase;font-weight:700
}
.ttl-enter{
  margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:13px;
  color:rgba(255,255,255,.78);font-size:.7rem;letter-spacing:.32em;text-indent:.32em;
  text-transform:uppercase;font-weight:700
}
.ttl-enter i{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(247,178,122,.65);
  display:grid;place-items:center;color:var(--orange-l);font-style:normal
}
@media (prefers-reduced-motion:no-preference){
  .ttl-jane span{
    animation:ttlIn .95s var(--ease-o) backwards, ttlFlow 4.5s linear infinite alternate,
              ttlFloat 5.6s ease-in-out infinite alternate
  }
  .ttl-jane span:nth-child(1){animation-delay:.08s,0s,0s}
  .ttl-jane span:nth-child(2){animation-delay:.18s,.3s,-1.4s}
  .ttl-jane span:nth-child(3){animation-delay:.28s,.6s,-2.8s}
  .ttl-jane span:nth-child(4){animation-delay:.38s,.9s,-4.2s}
  @keyframes ttlIn{from{opacity:0;transform:translateY(70px);filter:blur(16px)}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 6px 30px rgba(232,119,34,.35))}}
  @keyframes ttlFlow{from{background-position:0% 0}to{background-position:100% 0}}
  @keyframes ttlFloat{from{translate:0 -5px}to{translate:0 5px}}
  .ttl-sub{animation:ttlUp 1s .62s var(--ease-o) backwards}
  .ttl-enter{animation:ttlUp 1s .95s var(--ease-o) backwards}
  @keyframes ttlUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  .ttl-enter i{animation:ringPulse 2.2s var(--ease) infinite}
  .ttl-enter i svg{animation:chevBob 2.2s var(--ease) infinite}
  @keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,119,34,.45)}50%{box-shadow:0 0 0 12px rgba(232,119,34,0)}}
  @keyframes chevBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
  .dive{height:490vh}
  @media (max-width:760px){ .dive{height:468vh} }
}
/* header icon buttons: always navy on the light header, whatever the page theme */
.hdr .iconbtn{color:var(--navy)}
.hdr .iconbtn:hover{color:var(--paper)}

/* FIX: .anchors' nowrap scroll content tripped Chrome mobile's
   viewport-expansion heuristic → innerWidth 778 → all media queries dead.
   On mobile the anchors wrap as chips instead of scrolling. */
@media (max-width:760px){
  .anchors{flex-wrap:wrap;overflow:visible;gap:2px 18px;padding-bottom:6px}
  .anchors a{padding:8px 0;font-size:.68rem}
}