/* Generated by tools/build.py from css/*.css - do not edit this file. */
/* ===== css/01-base.css ===== */
/* BASE */
:root{
--paper:#FBF8F1;
--paper-2:#F4EFE4;
--ink:#141118;
--ink-bg:#132019; /* deep forest - dark sections */
--ink-bg-2:#0D1712; /* a shade deeper, for panels inside them */
--ink-soft:#514C58;
--mute:#9B9FA9;
--hair:rgba(20,23,31,.14);
--holo-a:#A07A28;
--holo-b:#C79F4C;
--holo-c:#EAD8A4;
--display:'Fraunces',serif;
--body:'Outfit',sans-serif;
--max:1360px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],header[id]{scroll-margin-top:76px}
body{
background:var(--paper);color:var(--ink);
font-family:var(--body);font-weight:400;line-height:1.65;
overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--holo-a);outline-offset:3px;border-radius:4px}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.label{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);font-weight:700}
.holo-text{
background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 45%,var(--holo-c) 80%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Reveal-on-scroll only hides content when JS is running */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html.js .rv{opacity:1;transform:none;transition:none}
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}
/* ===== css/02-nav.css ===== */
/* NAV */
/* ---------------- NAV ---------------- */
nav{
position:fixed;top:0;left:0;right:0;z-index:100;
display:flex;align-items:center;justify-content:space-between;
gap:clamp(14px,1.1vw,20px);
padding:20px clamp(20px,4vw,64px);
transition:.4s;
}
nav.scrolled{background:rgba(250,248,243,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hair);padding-block:14px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand .logo-img{height:58px;width:auto;display:block;transition:filter .4s}
nav:not(.scrolled) .brand .logo-img{filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 2px 14px rgba(255,255,255,.3))}
nav.scrolled .brand .logo-img{filter:none}
@media (max-width:640px){.brand .logo-img{height:45px}}
.brand .dot{
width:12px;height:12px;border-radius:50%;flex-shrink:0;
background:conic-gradient(from 120deg,var(--holo-a),var(--holo-b),var(--holo-c),var(--holo-a));
animation:spin 9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-menu{display:flex;align-items:center;gap:clamp(9px,calc(1.3vw - 8.6px),22px);flex-wrap:nowrap}
/* The reset further down sets min-width:0 on everything, which lets a flex
item be squashed NARROWER THAN ITS OWN TEXT - the boxes keep their gaps
while the words themselves run together. Opt the menu out of that. */
/* display:flex here does two jobs: it blockifies the label so the box is
exactly the height of the word, and align-items:center then puts that
box on the bar's centre line - the same line the logo and the buttons
are on. Without it the uppercase line box sits about 1px low. */
/* `nav` is in the selector on purpose: .nav-preview-wrap further down sets
display:inline-block at the same specificity and would otherwise win on
source order, leaving the label in a 26px line box sitting 1px low. */
nav .nav-menu>*{flex-shrink:0;min-width:auto;display:flex;align-items:center}
/* The bar grows with the window instead of stepping between fixed sizes.
The low end of each clamp is what the narrowest desktop can actually hold
- see the width sweep in test/run7.js - and the high end is what looks
right on a large screen. line-height:1 puts the label exactly on the
centre line of the bar; without it the uppercase line box sits ~1px low
against the buttons and the logo. */
.nav-menu a{font-size:clamp(11px,calc(.72vw + 1.1px),14px);
letter-spacing:clamp(.44px,calc(.09vw - .77px),.98px);line-height:1;
text-transform:uppercase;font-weight:500;color:var(--ink-soft);transition:color .3s;white-space:nowrap}
.nav-menu a:hover{color:#c8a24e;text-shadow:0 0 12px rgba(200,162,78,.4)}
.pill{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
background:var(--ink);color:var(--paper);
padding:13px 26px;border-radius:100px;border:1px solid var(--ink);
cursor:pointer;transition:.35s;white-space:nowrap;
}
.pill:hover{background:transparent;color:var(--ink)}
.pill.line{background:transparent;color:var(--ink)}
.pill.line:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:none;cursor:pointer;z-index:120;flex-shrink:0}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:.35s;border-radius:2px}
/* ===== css/03-hero.css ===== */
/* HERO */
/* ---------------- HERO ---------------- */
.hero{
min-height:100svh;
display:flex;flex-direction:column;justify-content:center;
position:relative;overflow:hidden;
padding-top:clamp(96px,12vh,140px);
padding-bottom:clamp(70px,9vh,120px);
}
.ribbon{position:absolute;inset:0;z-index:0;pointer-events:none}
.ribbon img{width:100%;height:100%;object-fit:cover}
.ribbon video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;background:transparent;transition:opacity 1.2s ease}
.ribbon video.on{opacity:1;z-index:1}
.ribbon video.leaving{opacity:1;z-index:0}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,16,.62),rgba(12,11,16,.32) 45%,rgba(12,11,16,.66))}
.hero .label{color:var(--holo-c)}
.hero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .pill.line{border-color:rgba(255,255,255,.55);color:#fff}
.hero .pill.line:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero .sb-trav,.hero .sb-trav select,.hero .adv-toggle{color:rgba(250,248,243,.92)}
.hero .adv-toggle:hover{color:#fff}
nav:not(.scrolled) .nav-menu a{color:rgba(255,255,255,.85)}
nav:not(.scrolled) .nav-menu a:hover{color:#d4af37;text-shadow:0 0 14px rgba(212,175,55,.45)}
nav:not(.scrolled) .brand{color:#fff}
nav:not(.scrolled) .burger span{background:#fff}
@media (max-width:1349px){nav .nav-menu a{color:var(--ink-soft)!important}}
.hero-grid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero h1{
font-family:var(--display);font-weight:500;letter-spacing:0;
font-size:clamp(30px,5.4vw,84px);line-height:1.12;letter-spacing:-.01em;
}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .line span{display:block;white-space:nowrap;animation:rise 1.1s cubic-bezier(.2,.65,.2,1) both}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{from{transform:translateY(115%)}to{transform:none}}
.hero .sub{margin-top:32px;max-width:46ch;color:var(--ink-soft);font-size:clamp(15px,1.15vw,17px);animation:fade 1s .5s both}
.hero-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;justify-content:center;animation:fade 1s .65s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-panel{
position:relative;border-radius:28px;overflow:hidden;
width:min(100%,350px);height:clamp(280px,42vh,420px);
justify-self:end;
box-shadow:0 40px 80px -40px rgba(20,23,31,.35);
animation:fade 1.2s .4s both;
}
.hero-panel svg{width:100%;height:100%;display:block}
.hero-panel .tag{
position:absolute;left:18px;bottom:18px;right:18px;
background:rgba(250,248,243,.75);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.6);border-radius:16px;
padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.hero-panel .tag b{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.04em}
.hero-panel .tag span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
/* ===== css/04-marquee.css ===== */
/* MARQUEE */
/* ---------------- MARQUEE ---------------- */
.strip{border-block:1px solid var(--hair);overflow:hidden;background:var(--paper-2);padding:18px 0}
.strip-track{display:flex;align-items:center;width:max-content;animation:mq 44s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip .item{
font-family:var(--display);font-size:13.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--ink-soft);white-space:nowrap;padding:0 30px;
}
.strip .sep{color:var(--holo-b);font-size:11px;font-style:normal;flex-shrink:0}
@keyframes mq{to{transform:translateX(-50%)}}
/* ===== css/05-destination-index.css ===== */
/* DESTINATION INDEX */
/* ---------------- DESTINATION INDEX ---------------- */
.index{padding:clamp(48px,5vw,64px) 0 clamp(90px,11vw,160px)}
.index-head{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:30px;align-items:center;margin-bottom:clamp(48px,5vw,64px)}
.index-head h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;font-size:clamp(30px,3.6vw,52px);line-height:1.05;padding-left:0}
.index-head p{color:var(--ink-soft);max-width:68ch;font-size:18.5px;line-height:1.5;justify-self:start;align-self:center}
.dest-list{border-top:1px solid var(--hair)}
.row{
display:grid;
grid-template-columns:64px minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) 52px;
gap:20px;align-items:center;
padding:30px 0;border-bottom:1px solid var(--hair);
position:relative;cursor:pointer;transition:padding .4s;
}
.row{padding-left:0}
.row:hover{padding-left:14px}
@media (prefers-reduced-motion:reduce){.row:hover{padding-left:0}}
.row .no{font-size:12px;letter-spacing:.2em;color:var(--mute)}
.row h3{
font-family:var(--display);font-weight:500;
font-size:clamp(24px,2.8vw,40px);letter-spacing:.01em;line-height:1.15;
transition:.4s;overflow-wrap:break-word;
}
.row:hover h3{background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 45%,var(--holo-c) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.row .kind,.row .dur{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}
.row .arr{
width:52px;height:52px;border:1px solid var(--hair);border-radius:50%;
display:grid;place-items:center;font-size:18px;transition:.4s;flex-shrink:0;
}
.row:hover .arr{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-45deg)}
.preview{
position:fixed;z-index:60;width:240px;height:300px;border-radius:18px;overflow:hidden;
pointer-events:none;opacity:0;
transition:opacity .25s;
box-shadow:0 30px 60px -20px rgba(20,23,31,.4);
top:0;left:0;will-change:transform;
}
.preview.on{opacity:1}
.preview svg{width:100%;height:100%;display:block}
/* ===== css/06-pillars.css ===== */
/* PILLARS */
/* ---------------- PILLARS ---------------- */
.pillars{background:var(--ink-bg);color:var(--paper);padding:clamp(50px,6vw,90px) 0 clamp(60px,7vw,100px);position:relative;overflow:hidden}
.pillars::before{
content:"";position:absolute;top:-260px;right:-200px;width:640px;height:640px;border-radius:50%;
background:radial-gradient(circle,rgba(207,168,87,.22),rgba(169,129,47,.1) 50%,transparent 70%);
filter:blur(30px);pointer-events:none;
}
.pillars .label{color:rgba(250,248,243,.5)}
.pillars h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;font-size:clamp(34px,4.2vw,62px);line-height:1.1;margin-top:18px;max-width:16ch}
.pillars-head{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(24px,3.5vw,56px);align-items:center;position:relative;z-index:2}
.pillars-photo{width:70%;justify-self:end;aspect-ratio:16/10;object-fit:cover;border-radius:22px;border:1px solid rgba(250,248,243,.14)}
@media (max-width:860px){.pillars-head{grid-template-columns:1fr}}
.p-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:72px}
.p-cell{border-top:1px solid rgba(250,248,243,.18);padding-top:26px;transition:border-color .4s}
.p-cell:hover{border-color:var(--holo-c)}
.p-cell .num{font-family:var(--display);font-size:15px;letter-spacing:.05em;color:var(--holo-c)}
.p-cell h3{font-family:var(--display);font-weight:600;font-size:17px;margin:15px 0 10px;letter-spacing:.02em;white-space:nowrap}
.p-cell p{font-size:14px;color:rgba(250,248,243,.62);font-weight:300}
/* ===== css/07-signature.css ===== */
/* SIGNATURE */
/* ---------------- SIGNATURE ---------------- */
.signature{background:var(--ink-bg);color:var(--paper);
padding:clamp(70px,9vw,120px) 0 clamp(90px,11vw,150px)}
.sig-card{
background:linear-gradient(135deg,#FFFFFF 0%,var(--paper-2) 100%);
border:1px solid var(--hair);border-radius:32px;color:var(--ink);
box-shadow:0 24px 60px rgba(20,17,24,.07);
padding:clamp(32px,5vw,72px);
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);
position:relative;overflow:hidden;
}
.sig-card::after{
content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;
background:radial-gradient(circle,rgba(199,159,76,.16),transparent 65%);filter:blur(20px);pointer-events:none;
}
.sig-copy{position:relative;z-index:2}
.sig-card .holo-text{background:linear-gradient(110deg,#8A671E,var(--holo-a) 45%,var(--holo-b) 85%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.sig-card h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,52px);line-height:1.1;margin-top:16px}
.sig-card h2 .holo-text{white-space:nowrap;display:inline-block}
.sig-card .lede{color:var(--ink-soft);margin-top:22px;font-weight:300;max-width:44ch}
.steps{display:flex;flex-direction:column;position:relative;z-index:2}
.step{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:start}
.step:last-child{border:none}
.step .d{font-family:var(--display);font-size:14px;letter-spacing:.1em;color:var(--holo-a);padding-top:3px;white-space:nowrap}
.step h3,.step h4{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.02em}
.step p{font-size:13.5px;color:var(--ink-soft);font-weight:300;margin-top:4px}
/* ===== css/08-quote.css ===== */
/* QUOTE */
/* ---------------- QUOTE ---------------- */
.quote{padding:clamp(100px,12vw,170px) 0;text-align:center;position:relative}
.quote blockquote{font-family:var(--display);font-weight:400;font-style:normal;font-size:clamp(22px,3vw,42px);line-height:1.4;max-width:30ch;margin:28px auto 0;letter-spacing:.005em}
.quote cite{display:block;font-style:normal;margin-top:32px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.q-nav{display:flex;gap:12px;justify-content:center;margin-top:42px}
.q-nav button{
width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:transparent;
cursor:pointer;font-size:16px;color:var(--ink);transition:.3s;
}
.q-nav button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fadeq{transition:opacity .35s;min-height:220px}
.fadeq.out{opacity:0}
/* ===== css/09-cta.css ===== */
/* CTA */
/* ---------------- CTA ---------------- */
.cta{
margin:0 clamp(14px,2.5vw,40px) clamp(14px,2.5vw,40px);
border-radius:36px;padding:clamp(70px,9vw,130px) clamp(24px,5vw,80px);
background:
radial-gradient(70% 110% at 15% 0%,rgba(201,162,75,.3),transparent 55%),
radial-gradient(70% 110% at 85% 100%,rgba(235,217,168,.5),transparent 55%),
radial-gradient(60% 100% at 80% 0%,rgba(169,129,47,.2),transparent 60%),
var(--paper-2);
text-align:center;position:relative;overflow:hidden;
}
.cta h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;font-size:clamp(36px,5vw,72px);line-height:1.08;max-width:16ch;margin:22px auto 24px}
.cta p{color:var(--ink-soft);max-width:46ch;margin:0 auto 42px}
.cta-form{
display:flex;gap:10px;max-width:540px;margin:0 auto;
background:rgba(250,248,243,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(20,23,31,.12);border-radius:100px;padding:8px 8px 8px 26px;
}
.cta-form input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--body);font-size:14px;color:var(--ink)}
.cta-form input::placeholder{color:var(--mute)}
.cta small{display:block;margin-top:20px;font-size:11.5px;color:var(--mute);letter-spacing:.04em}
/* ===== css/10-footer.css ===== */
/* FOOTER */
/* ---------------- FOOTER ---------------- */
footer.site{padding:74px 0 40px}
/* The link columns need enough width that no label wraps - a wrapped label
is the one thing that stops the rows lining up across the columns. */
.f-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.75fr);
gap:clamp(36px,4.5vw,72px);align-items:start}
.f-brand .f-logo{height:55px;width:auto;display:block;margin-bottom:20px}
.f-brand p{font-size:15px;color:var(--ink-soft);max-width:38ch;line-height:1.75}
.f-social{display:flex;gap:22px;margin-top:22px}
.f-social a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:600;position:relative;transition:color .3s}
.f-social a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--holo-a);transition:width .3s}
.f-social a:hover{color:var(--holo-a)}
.f-social a:hover::after{width:100%}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:start}
.f-cols h3,.f-cols h5{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:22px}
.f-cols ul{list-style:none}
/* every row the same height in every column, so the four lists read as one
grid rather than four lists that happen to sit side by side */
.f-cols li{margin-bottom:14px;font-size:15px;color:var(--ink-soft);line-height:1.5;
white-space:nowrap}
.f-cols li:last-child{margin-bottom:0}
.f-cols li a{font-size:15px;color:var(--ink-soft);transition:.3s}
.f-cols li a:hover{color:var(--holo-a);padding-left:4px}
/* ---- where the office is: two panels side by side ---------------------
The map on the left and the address on the right, the same height, the
same corner and the same border, so they read as one pair rather than a
picture with some text next to it. */
.f-place{
margin-top:52px;padding-top:36px;border-top:1px solid var(--hair);
display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
gap:clamp(22px,2.4vw,34px);align-items:stretch;
}
.f-address{
align-self:stretch;display:flex;flex-direction:column;justify-content:center;
align-items:center;
padding:clamp(24px,2.4vw,38px);
border:1px solid var(--hair);border-radius:16px;
/* the solid colour first, so the page's own background decorations do not
show through the translucent half of the gradient */
background-color:var(--paper-2);
background-image:linear-gradient(140deg,transparent,rgba(160,122,40,.07));
font-size:15px;color:var(--ink-soft);line-height:1.85;text-align:center;
}
/* a heading on its own line, set like the column headings above it, with the
address underneath rather than running on from the label */
.f-address strong{display:block;margin:0 0 18px;color:var(--ink);font-weight:600;
font-size:14px;line-height:1;letter-spacing:.2em;text-transform:uppercase}
.f-address span{display:block}
/* a flex column stretches its children, which drew the link's underline the
whole width of the panel - it belongs under the words, not the panel */
.f-address .f-map-go{align-self:center}
/* the plain statement of what is different about a service */
.usp{margin:34px 0 40px;padding:30px clamp(20px,3vw,36px);border-radius:20px;
background:linear-gradient(140deg,rgba(160,122,40,.09),rgba(160,122,40,.02));
border:1px solid rgba(160,122,40,.25)}
.usp-eyebrow{font:600 10.5px var(--body);letter-spacing:.18em;text-transform:uppercase;
color:var(--holo-a);margin:0 0 10px}
.usp-head{font-family:var(--display);font-weight:300;font-size:clamp(22px,3vw,34px);
line-height:1.22;letter-spacing:-.01em;margin:0 0 22px}
.usp-head em{font-style:italic;color:var(--holo-a)}
.usp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 28px}
.usp-item b{display:block;font:600 14.5px var(--body);color:var(--ink);margin-bottom:5px}
.usp-item span{display:block;font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.wc-usp{margin:14px 0 4px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);max-width:62ch}
.wc-usp b{color:var(--ink);font-weight:600}
/* One statement, not a grid of points.
Two earlier shapes did not work. Left-aligned in a full-width panel left
half of it empty. Splitting it into two columns put a display heading on
one side and small print on the other with a gulf between them, and the
panel was a 1520x220 letterbox either way.
A statement like this wants to be a statement: narrow, centred, with air
around it, and the whitespace symmetric so it reads as deliberate. */
.usp-say{
max-width:820px;margin-inline:auto;text-align:center;
padding:clamp(34px,4vw,52px) clamp(26px,4vw,56px);
}
.usp-say .usp-eyebrow{margin:0 0 16px}
.usp-say .usp-head{
max-width:21ch;margin:0 auto 18px;
font-size:clamp(23px,2.7vw,32px);line-height:1.2;
text-wrap:pretty;text-wrap:balance; /* never a word alone on line two */
}
.usp-say .wc-usp{max-width:58ch;margin:0 auto;font-size:14.5px;line-height:1.8;
/* on a phone this runs to seven lines and was stranding a word on the
last one; pretty pulls a word down rather than leaving one alone */
text-wrap:pretty}
/* a hairline above the words, so the panel reads as a remark and not a box */
/* On a phone the sentence runs to seven lines, which is past the point where
a browser will balance them, and the last line kept being a single word.
A hair smaller fits it into six, and six can be balanced. */
@media (max-width:520px){
.usp-say .wc-usp{font-size:13.6px;text-wrap:balance}
}
.usp-say .usp-eyebrow::before{
content:"";display:block;width:34px;height:2px;border-radius:2px;
background:var(--holo-a);opacity:.65;margin:0 auto 16px;
}
.q-placeholder{margin-top:16px;font:600 10.5px var(--body);letter-spacing:.14em;
text-transform:uppercase;color:var(--mute);opacity:.85}
.q-placeholder[hidden]{display:none}
/* reviews, in the admin panel */
.adm-rev{border:1px solid var(--hair);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.adm-rev textarea{width:100%;min-height:70px;padding:9px 11px;border:1px solid var(--hair);
border-radius:9px;font:400 13.5px var(--body);color:var(--ink);outline:none;resize:vertical}
.adm-rev input{width:100%;margin-top:8px;padding:9px 11px;border:1px solid var(--hair);
border-radius:9px;font:400 13px var(--body);color:var(--ink);outline:none}
.adm-rev textarea:focus,.adm-rev input:focus{border-color:var(--holo-a)}
.adm-rev-x{margin-top:8px;border:1px solid var(--hair);background:none;border-radius:100px;
padding:5px 12px;font:600 10.5px var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.adm-rev-x:hover{border-color:#B4442F;color:#B4442F}
.f-map{min-width:0}
.f-map-frame{position:relative;border:1px solid var(--hair);border-radius:16px;
overflow:hidden;aspect-ratio:16/7;background:var(--paper-2)}
/* inset rather than height:100% - the height then comes from the frame's own
resolved box and never depends on a percentage resolving against it */
/* No opacity trick and no script needed: an iframe that has not loaded yet is
transparent, so the placeholder underneath shows through, and Google's page
paints straight over it the moment it arrives. If the script below decides
the map is never coming it adds .out and the placeholder takes the frame. */
.f-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
filter:saturate(.9);z-index:1}
/* still there, still able to paint - just not eating the link's clicks */
.f-map-frame iframe.idle{pointer-events:none}
.f-map-holder{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:7px;text-align:center;padding:20px;
color:var(--ink-soft);text-decoration:none;
background:linear-gradient(140deg,var(--paper-2),rgba(160,122,40,.07))}
.f-map-holder svg{width:30px;height:30px;color:var(--holo-a);opacity:.8}
.f-map-holder b{font:600 13.5px var(--body);color:var(--ink);letter-spacing:.02em}
.f-map-holder em{font:400 12px var(--body);font-style:normal;color:var(--mute)}
.f-map-holder:hover b{color:var(--holo-a)}
.f-map-go{display:inline-block;margin-top:20px;font:600 11.5px var(--body);letter-spacing:.12em;
text-transform:uppercase;color:var(--holo-a);text-decoration:none;border-bottom:1px solid currentColor;
padding-bottom:3px}
.f-map-go:hover{color:var(--ink)}
/* stack below the width where the address still has a comfortable measure
beside the map; the map keeps the lead, the address sits under it */
@media (max-width:900px){
.f-place{grid-template-columns:1fr;gap:22px}
.f-map-frame,.f-address{max-width:720px}
}
@media (max-width:560px){
.f-map-frame{aspect-ratio:4/3}
/* On a small phone the last written line - the longest, at about 302px -
is wider than the panel, so it has to wrap again. Let it, but balance
what is left so no single word ends up alone. */
.f-address{padding:22px}
.f-address span{text-wrap:pretty;text-wrap:balance}
}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--hair);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* Four across needs about 880px of footer for the longest label to sit on
one line with room to spare; below that go two-by-two, which still gives
two even rows of two rather than a ragged run. */
@media (max-width:1259px){
.f-top{grid-template-columns:1fr;gap:44px}
.f-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}
}
@media (max-width:480px){
.f-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px} /* 2×2 on phones */
.f-cols li{white-space:normal}
}
/* ===== css/11-responsive.css ===== */
/* RESPONSIVE */
/* ---------------- RESPONSIVE ---------------- */
/* Collapse the nav into the burger while the bar can still hold every label
at a readable size. Measured: ten uppercase labels plus their gaps need
about 562px, and the bar only offers that from roughly 1350px up. */
@media (max-width:1349px){
.nav-menu{
/* No backdrop-filter here. It made this element the containing block for
its own fixed ::after, which the scroller then dragged out of view -
and at 97% opaque there was nothing behind it left to blur anyway. */
position:fixed;inset:0;background:#FAF8F3;
flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,26px);
opacity:0;pointer-events:none;transition:opacity .4s;
/* Eleven entries do not fit above the fold on a short phone or a laptop
in landscape - the first and last were being cut off the screen with
no way to reach them. Let the sheet scroll, and leave room for the bar
at the top and the home indicator at the bottom. "safe center" keeps
the list centred when it fits without hiding the top when it doesn't;
browsers that don't know it fall back to plain centring. */
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
justify-content:center;
justify-content:safe center;
padding:calc(var(--navh,66px) + 14px + env(safe-area-inset-top,0px)) 20px
calc(28px + env(safe-area-inset-bottom,0px));
}
.nav-menu.open{opacity:1;pointer-events:auto}
/* An entry scrolled up behind the bar was showing through between the
buttons. ::after is the last child, so it paints over the entries -
and .nav-right, being a later sibling of the sheet, still paints over
it, which keeps the buttons visible. */
.nav-menu::after{
content:'';position:fixed;top:0;left:0;right:0;pointer-events:none;
height:calc(var(--navh,66px) + env(safe-area-inset-top,0px));
background:#FAF8F3;
}
.nav-menu a{font-size:16px}
nav > .pill, nav .nav-right > .pill{display:none}
.burger{display:block}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
/* While the sheet is open nothing may float above it. The assistant bubble,
the WhatsApp button and the callback tab all sit at z-index 200 and were
covering three of the entries outright. */
/* the ✕ is white while the page is at the top, which is right over the hero
photograph and invisible over the open sheet */
body.menu-open nav:not(.scrolled) .burger span{background:var(--ink)}
body.menu-open .bot-fab,
body.menu-open .bot-panel,
body.menu-open .bot-teaser,
body.menu-open .wa-float,
body.menu-open .cb-tab,
body.menu-open .btt{display:none!important}
/* a short screen - a small phone, or any laptop turned on its side */
@media (max-width:1349px) and (max-height:720px){
.nav-menu{gap:10px;padding-top:calc(var(--navh,66px) + 6px + env(safe-area-inset-top,0px))}
.nav-menu a{font-size:15px}
}
@media (max-width:1020px){
.hero{min-height:0}
.hero-grid{grid-template-columns:1fr}
.hero h1{font-size:clamp(28px,8vw,60px)}
.hero-panel{justify-self:start;width:min(100%,360px);height:clamp(240px,32vh,320px)}
.index-head{grid-template-columns:1fr}
.index-head h2{padding-left:0}
.index-head p{justify-self:start}
.p-grid{grid-template-columns:1fr 1fr}
.sig-card{grid-template-columns:1fr}
.sig-card h2{font-size:clamp(28px,6.4vw,44px)}
.preview{display:none}
.row{grid-template-columns:44px minmax(0,1fr) 52px;row-gap:6px}
.row .no{grid-row:1;grid-column:1}
.row h3{grid-row:1;grid-column:2}
.row .arr{grid-row:1 / span 2;grid-column:3;align-self:center}
.row .kind{display:none}
.row .dur{display:block;grid-row:2;grid-column:2}
}
@media (max-width:640px){
.step{grid-template-columns:80px minmax(0,1fr);gap:14px}
.step .d{font-size:13px}
.row .arr{width:42px;height:42px;font-size:15px}
.row{grid-template-columns:36px minmax(0,1fr) 42px;gap:14px}
.p-grid{grid-template-columns:1fr}
.cta-form{flex-direction:column;border-radius:24px;padding:14px}
.cta-form input{padding:12px 6px}
.cta-form .pill{width:100%}
.fadeq{min-height:0}
}
/* floating WhatsApp */
.wa-float{
position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:205;
width:56px;height:56px;border-radius:50%;
background:#25D366;display:grid;place-items:center;
box-shadow:0 12px 30px -8px rgba(37,211,102,.55);
transition:transform .3s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}
/* ===== css/12-tour-categories.css ===== */
/* TOUR CATEGORIES */
/* ---------------- TOUR CATEGORIES ---------------- */
.cats{background:var(--ink-bg);color:var(--paper);padding:clamp(90px,11vw,160px) 0 clamp(70px,8vw,110px);border-radius:44px 44px 0 0;position:relative;overflow:hidden}
.cats .label{color:rgba(250,248,243,.5);display:block;margin-bottom:10px}
.cats h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,42px);margin-bottom:38px}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cat{
position:relative;border-radius:24px;overflow:hidden;display:block;
border:1px solid rgba(250,248,243,.12);min-height:clamp(220px,26vw,300px);
transition:transform .45s cubic-bezier(.2,.65,.2,1),border-color .45s;
}
.cat:hover{transform:translateY(-7px);border-color:var(--holo-c)}
.cat > svg,.cat > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.65,.2,1)}
.cat:hover > svg,.cat:hover > img{transform:scale(1.05)}
.cat .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,9,16,.88))}
.cat-body{position:absolute;left:28px;bottom:24px;right:28px}
.cat-body h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,34px);letter-spacing:.02em}
.cat-body p{font-size:13.5px;color:rgba(250,248,243,.78);letter-spacing:.05em;margin-top:5px}
.cat .cat-arr{
position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;
border:1px solid rgba(250,248,243,.3);display:grid;place-items:center;
color:var(--paper);background:rgba(7,9,16,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
opacity:0;transform:translateY(-6px);transition:.4s;
}
.cat:hover .cat-arr{opacity:1;transform:none;border-color:var(--holo-c);color:var(--holo-c)}
@media (max-width:820px){.cat-grid{grid-template-columns:1fr}}
/* ===== css/13-search-bar.css ===== */
/* SEARCH BAR */
/* ---------------- SEARCH BAR ---------------- */
.sb-wrap{position:relative;z-index:2;width:100%;margin-top:clamp(34px,4.5vh,56px);animation:fade 1s .8s both}
.searchbar{
display:flex;align-items:stretch;max-width:1000px;margin:0 auto;
background:rgba(250,248,243,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid var(--hair);border-radius:100px;padding:10px;
box-shadow:0 28px 70px -34px rgba(20,23,31,.4);
}
.sb-field{display:flex;flex-direction:column;gap:3px;padding:7px 24px;flex:1;min-width:0;justify-content:center}
.sb-field label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:600}
.sb-field select,.sb-field input{
border:none;background:transparent;outline:none;width:100%;
font-family:var(--body);font-size:14.5px;color:var(--ink);font-weight:500;cursor:pointer;
}
.sb-field input{cursor:text}
.sb-field input::placeholder{color:var(--mute);font-weight:400}
.sb-sep{width:1px;background:var(--hair);margin:10px 0;flex-shrink:0}
.sb-btn{
border:none;cursor:pointer;border-radius:100px;padding:0 36px;flex-shrink:0;
font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
color:#fff;background:linear-gradient(110deg,#8F6C24,var(--holo-a) 45%,var(--holo-b));
transition:filter .3s,transform .3s;
}
.sb-btn:hover{filter:brightness(1.07) saturate(1.1);transform:translateY(-1px)}
.sb-under{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
max-width:1000px;margin:13px auto 0;padding:0 12px;
}
.sb-trav{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px;font-weight:600}
.sb-trav svg{width:17px;height:17px;stroke:var(--ink-soft)}
.sb-trav select{border:none;background:transparent;font:600 13px var(--body);color:var(--ink-soft);cursor:pointer;outline:none}
.adv-toggle{
border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:8px;
font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s;
}
.adv-toggle:hover{color:var(--ink)}
.adv-toggle svg{width:16px;height:16px;stroke:currentColor}
.sb-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:14px auto 0}
.sb-chips[hidden]{display:none}
.chip{
border:1px solid var(--hair);border-radius:100px;padding:8px 18px;cursor:pointer;
font:500 12px var(--body);letter-spacing:.08em;color:var(--ink-soft);
background:rgba(250,248,243,.75);transition:.3s;
}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter-note{margin:-28px 0 32px;font-size:14.5px;color:var(--ink-soft)}
.filter-note b{color:var(--ink)}
.filter-note a{color:var(--holo-a);font-weight:600;cursor:pointer}
.row-hide{display:none!important}
@media (max-width:860px){
.searchbar{flex-direction:column;border-radius:26px;padding:12px}
.sb-sep{display:none}
.sb-field{padding:12px 14px;border-bottom:1px solid var(--hair)}
.sb-field:last-of-type{border-bottom:none}
.sb-btn{padding:16px;margin-top:6px}
}
/* ===== css/14-package-cards.css ===== */
/* PACKAGE CARDS */
/* ---------------- PACKAGE CARDS ---------------- */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}
.pcard{
background:#FFFFFF;border:1px solid var(--hair);border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;
transition:transform .45s cubic-bezier(.2,.65,.2,1),box-shadow .45s;
}
.pcard:hover{transform:translateY(-8px);box-shadow:0 32px 60px -32px rgba(20,23,31,.4)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;position:relative}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.65,.2,1)}
.pcard:hover .ph img{transform:scale(1.08)}
.pcard .ph .days{
position:absolute;right:12px;bottom:12px;
background:rgba(12,11,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--holo-c);
font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;
padding:6px 12px;border-radius:100px;
}
.pcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard h3{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:.01em}
.pcard .meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600}
.pcard .places{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.pcard .enq{
margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;
font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--holo-a);
}
.pcard .enq .arrow{transition:transform .3s}
.pcard:hover .enq .arrow{transform:translateX(5px)}
.sig-photo{width:90%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-top:28px;border:1px solid var(--hair)}
/* ===== css/15-gallery.css ===== */
/* GALLERY */
/* ---------------- GALLERY ---------------- */
.gallery{padding:clamp(80px,10vw,140px) 0 0}
.g-head{text-align:center;margin-bottom:44px}
.g-head .label{justify-content:center;display:flex}
.g-head h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.8vw,52px);margin-top:14px}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-grid figure{margin:0;overflow:hidden;border-radius:16px;aspect-ratio:4/3}
.g-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.65,.2,1)}
.g-grid figure:hover img{transform:scale(1.06)}
@media (max-width:700px){.g-grid{grid-template-columns:1fr 1fr}}
/* ===== css/16-stats.css ===== */
/* STATS */
/* ---------------- STATS ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:20px;overflow:hidden;margin-top:70px;position:relative;z-index:2;box-shadow:0 18px 46px rgba(0,0,0,.18)}
.stat{background:linear-gradient(160deg,#FFFFFF 0%,var(--paper) 100%);padding:30px 24px;text-align:center}
.stat b{font-family:var(--display);font-weight:500;font-size:clamp(30px,3vw,46px);color:var(--holo-a);display:block;line-height:1}
.stat span{display:block;margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}
/* ===== css/17-mobile-fixes.css ===== */
/* MOBILE FIXES */
/* ---------------- MOBILE FIXES ---------------- */
@media (max-width:860px){
/* iOS zooms the page when focusing inputs under 16px — prevent that */
.sb-field input,.sb-field select,.cta-form input{font-size:16px}
/* larger tap targets */
.adv-toggle{padding:10px 6px}
.sb-trav select{padding:6px 2px}
.chip{padding:10px 20px}
/* photos fill width when sections stack */
.pillars-photo{width:100%;justify-self:start}
.sig-photo{width:100%}
/* hero headline safe on the narrowest phones */
.hero h1{font-size:clamp(24px,7.6vw,56px)}
/* stats readable in two columns */
.stat{padding:24px 14px}
.stat span{letter-spacing:.16em}
/* travelers row centers under the stacked search card */
.sb-under{justify-content:center;gap:16px}
}
@media (max-width:380px){
.hero h1{font-size:clamp(22px,7.4vw,30px)}
.hero-actions .pill{padding:13px 20px;font-size:11px}
}
/* ===== css/18-itinerary-page.css ===== */
/* ITINERARY PAGE */
/* ---------------- FULL-PAGE ITINERARY — PREMIUM ---------------- */
/* A closed itinerary page MUST NOT be paintable.
This is the bug that stopped the site working on iPhones. There are 62 of
these pages and every one is position:fixed, inset:0 and overflow-y:auto.
They were hidden with opacity:0 alone, which hides a thing from your eyes
but not from the renderer: iOS Safari still gave each one a full-screen
scrolling layer with its own backing store. Sixty-two of those at retina
resolution runs to hundreds of megabytes for pages nobody has opened, and
iOS kills the tab long before that - which is why the site showed a white
screen or reloaded itself on a real phone while being perfectly happy on a
desktop with memory to burn.
visibility:hidden is the fix: WebKit does not paint a hidden subtree and
never allocates the layer, so the 62 pages cost nothing until one opens.
The fade survives because visibility flips to visible instantly on open,
and on close waits out the .4s fade before hiding.
content-visibility:hidden would skip the layout too, but it cannot be
transitioned - it would cut the fade-out dead. The layout of these pages
is cheap; the layers were not. So visibility alone. */
.itin-page{position:fixed;inset:0;z-index:200;background:#FDFBF7;overflow-y:auto;
opacity:0;pointer-events:none;visibility:hidden;
transition:opacity .4s,visibility 0s linear .4s}
.itin-page.open{opacity:1;pointer-events:auto;visibility:visible;
transition:opacity .4s,visibility 0s linear 0s}
/* hero — cinematic full-bleed */
.ip-hero{position:relative;width:100%;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.ip-hero img.ip-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ip-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,3,.08) 0%,rgba(8,6,3,.65) 60%,rgba(8,6,3,.88) 100%)}
.ip-hero-content{position:relative;z-index:2;width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(24px,5vw,72px) clamp(56px,8vh,100px)}
.ip-back{position:fixed;top:clamp(20px,3vh,36px);left:clamp(24px,5vw,72px);z-index:210;display:inline-flex;align-items:center;gap:10px;font:500 11px var(--body);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 26px;border-radius:100px;border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:.4s;text-decoration:none}
.ip-back:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.ip-badge{display:inline-block;font:400 11.5px var(--body);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:20px}
.ip-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(38px,7vw,88px);line-height:1.05;letter-spacing:-.02em;color:#fff;max-width:14ch}
.ip-hero .ip-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.ip-hero .ip-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.2);padding:7px 16px;border-radius:100px}
/* body */
.ip-wrap{max-width:860px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(24px,5vw,72px)}
.ip-overview{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.5vw,22px);line-height:1.9;color:var(--ink-soft);font-style:italic;letter-spacing:.01em}
/* quick facts — refined */
.ip-facts{display:flex;justify-content:center;gap:clamp(28px,4vw,56px);margin:48px 0;padding:36px 0;border-top:1px solid rgba(20,17,24,.08);border-bottom:1px solid rgba(20,17,24,.08)}
.ip-fact{text-align:center;min-width:80px}
.ip-fact b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(28px,3vw,42px);color:var(--ink);line-height:1;letter-spacing:-.01em}
.ip-fact span{display:block;margin-top:8px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-weight:500}
@media(max-width:480px){.ip-facts{flex-wrap:wrap;gap:24px 40px}}
/* section titles — elegant */
.ip-section-title{font-family:var(--display);font-weight:300;font-size:clamp(13px,1vw,14px);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-bottom:36px;position:relative;display:flex;align-items:center;gap:20px}
.ip-section-title::after{content:"";flex:1;height:1px;background:rgba(20,17,24,.1)}
/* highlights — clean grid */
.ip-hl{margin:56px 0 64px}
.ip-hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,64px)}
.ip-hl-item{display:flex;align-items:center;gap:16px;font-family:var(--display);font-weight:400;font-size:16px;color:var(--ink);padding:14px 0;border-bottom:1px solid rgba(20,17,24,.06);letter-spacing:.01em}
.ip-hl-item::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--holo-a),var(--holo-b));flex-shrink:0}
@media(max-width:560px){.ip-hl-grid{grid-template-columns:1fr}}
/* day-by-day — editorial */
.ip-days{margin:64px 0}
.ip-day{position:relative;padding:0 0 0 clamp(0px,12vw,130px);border-bottom:1px solid rgba(20,17,24,.06)}
.ip-day:last-child{border:none}
.ip-day-num{position:absolute;left:0;top:36px;font-family:var(--body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-weight:500;width:clamp(0px,10vw,110px)}
.ip-day-inner{padding:32px 0 36px}
.ip-day h4{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.01em;line-height:1.25;margin-bottom:14px;color:var(--ink)}
.ip-day p{color:var(--ink-soft);font-size:15px;line-height:2;font-weight:300}
.ip-day-img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:12px;margin-top:24px}
.ip-day-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.ip-day-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
@media(max-width:640px){.ip-day-imgs{grid-template-columns:1fr} .ip-day{padding-left:0} .ip-day-num{position:relative;top:0;margin-bottom:4px;display:block}}
/* inclusions — refined */
.ip-inc{margin:64px 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
@media(max-width:560px){.ip-inc{grid-template-columns:1fr}}
.ip-inc h3{font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.ip-inc ul{list-style:none;padding:0}
.ip-inc li{font-size:14.5px;color:var(--ink-soft);padding:9px 0;padding-left:28px;position:relative;line-height:1.65;font-weight:300;border-bottom:1px solid rgba(20,17,24,.04)}
.ip-inc li:last-child{border:none}
.ip-inc .ip-yes li::before{content:"✓";position:absolute;left:0;color:#3a8a5c;font-weight:500;font-size:14px}
.ip-inc .ip-no li::before{content:"—";position:absolute;left:2px;color:var(--mute);font-weight:400;font-size:14px}
/* CTA — understated luxury */
.ip-cta{margin:32px 0 64px;padding:clamp(40px,6vw,72px);background:#fff;border:1px solid rgba(20,17,24,.08);border-radius:20px;text-align:center}
.ip-cta h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em}
.ip-cta p{color:var(--mute);font-size:14px;margin:16px auto 36px;max-width:40ch;line-height:1.8;letter-spacing:.02em}
#cat-medical .ip-cta p{max-width:64ch}
.ip-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ip-cta .pill{font-size:11px;padding:15px 32px;letter-spacing:.18em}
.ip-cta .wa-btn{background:#25D366;color:#fff;border-color:#25D366}
.ip-cta .wa-btn:hover{background:#1eba58;border-color:#1eba58;color:#fff}
/* ===== css/19-category-pages.css ===== */
/* CATEGORY PAGES */
/* CATEGORY + UNESCO PAGES */
.cat-page{position:fixed;inset:0;z-index:190;background:#FDFBF7;overflow-y:auto;display:none}
/* a state page opens on top of the picker it was launched from */
.cat-page[id^="cat-state-"],
.cat-page[id^="cat-region-"],
.cat-page[id^="cat-fleet-"]{z-index:196}
.cat-page.open{display:block}
.cp-hero{position:relative;width:100%;min-height:clamp(385px,66vh,660px);overflow:hidden;display:flex;align-items:flex-end}
.cp-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cp-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,3,.1) 0%,rgba(8,6,3,.78) 100%);pointer-events:none}
.cp-hero-content{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,72px) clamp(40px,6vh,64px)}
.cp-back{position:fixed;top:clamp(20px,3vh,36px);left:clamp(24px,5vw,72px);z-index:210;display:inline-flex;align-items:center;gap:10px;font:500 11px var(--body);letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(20,17,24,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 26px;border-radius:100px;border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:.4s;text-decoration:none}
.cp-back:hover{background:rgba(20,17,24,.9)}
.cp-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(34px,6vw,72px);line-height:1.08;color:#fff;letter-spacing:-.02em}
.cp-hero p{color:rgba(255,255,255,.7);font-size:16px;margin-top:12px;max-width:80ch;line-height:1.7;font-weight:300}
.cp-wrap{max-width:var(--max);margin:0 auto;padding:clamp(10px,1.5vw,18px) clamp(24px,5vw,72px) clamp(60px,8vw,100px)}
.cp-wrap .pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.pw-section{margin-top:64px;padding-top:48px;border-top:1px solid rgba(20,17,24,.08)}
.pw-label{font-family:var(--body);font-weight:500;font-size:21px;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);margin-bottom:20px;text-align:center;padding-top:16px}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pw-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/2;cursor:default}
.pw-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pw-card:hover img{transform:scale(1.06)}
.pw-card-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,6,3,.7) 100%);pointer-events:none}
.pw-card-body{position:absolute;inset:0;z-index:2;padding:16px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.pw-card h4{font-family:var(--display);font-weight:500;font-size:20px;color:#fff;align-self:flex-end;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pw-card span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.5)}
#cat-unesco .cp-hero{min-height:clamp(490px,82vh,820px)}
#cat-medical .cp-hero{min-height:clamp(495px,84vh,840px)}
/* ===== css/20-travels-section.css ===== */
/* TRAVELS SECTION */
/* TRAVELS SECTION */
.travels-section{background:linear-gradient(175deg,#f4f1ec 0%,#eae5dc 100%);padding:clamp(70px,10vw,130px) 0}
.ts-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:center;margin-bottom:clamp(48px,6vw,72px)}
@media(max-width:820px){.ts-head{grid-template-columns:1fr}}
.ts-head h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.2vw,56px);line-height:1.1;letter-spacing:-.02em}
.ts-head p{color:var(--ink-soft);font-size:16px;line-height:1.75;max-width:72ch}
.ts-vehicles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
@media(max-width:960px){.ts-vehicles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ts-vehicles{grid-template-columns:1fr}}
.ts-v{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;text-decoration:none;color:#fff;display:block}
.ts-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ts-v:hover img{transform:scale(1.06)}
.ts-v-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,3,.8) 0%,rgba(8,6,3,.2) 60%,transparent 100%);pointer-events:none}
.ts-v-body{position:absolute;bottom:0;left:0;right:0;padding:20px 22px;z-index:2}
.ts-v h4{font-family:var(--display);font-weight:400;font-size:18px;margin-bottom:4px}
.ts-v span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ts-cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:48px}
#cat-travels .cp-hero{min-height:clamp(360px,60vh,600px)}
/* ===== css/21-travels-page.css ===== */
/* TRAVELS PAGE */
/* TRAVELS PAGE */
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-bottom:56px}
.fleet-item{background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(20,17,24,.06);transition:transform .3s,box-shadow .3s}
.fleet-item:hover{transform:translateY(-5px);box-shadow:0 16px 48px -12px rgba(20,17,24,.14)}
.fleet-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.fleet-info{padding:22px 24px 26px}
.fleet-info h4{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.25}
.fleet-info p{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.6}
.fleet-meta{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap}
.fleet-badge{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:100px;background:rgba(20,17,24,.05);color:var(--ink)}
.route-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:32px 0 56px}
.route-chip{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:16px 20px;border:1px solid rgba(20,17,24,.06);transition:box-shadow .3s}
.route-chip:hover{box-shadow:0 6px 24px -8px rgba(20,17,24,.1)}
.route-chip span{font-family:var(--display);font-weight:400;font-size:15px;color:var(--ink)}
.route-chip small{font-size:11px;color:var(--mute);display:block;margin-top:2px;font-family:var(--body)}
.why-fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0 56px}
/* four of them belong on one line rather than three and a stranded fourth */
@media(min-width:1100px){.why-fleet.four{grid-template-columns:repeat(4,1fr);gap:20px}}
@media(min-width:700px) and (max-width:1099px){.why-fleet.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.why-fleet{grid-template-columns:1fr}}
.why-fleet-card{padding:32px 28px;border-radius:16px;background:linear-gradient(135deg,rgba(20,17,24,.03) 0%,rgba(20,17,24,.01) 100%);border:1px solid rgba(20,17,24,.06)}
.why-fleet-card h4{font-family:var(--display);font-weight:400;font-size:18px;margin-bottom:10px}
.why-fleet-card p{font-size:13px;color:var(--ink-soft);line-height:1.65}
.why-fleet-card .wf-icon{font-size:28px;margin-bottom:14px;display:block}
.featured-cats{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
@media (max-width:820px){.featured-cats{grid-template-columns:1fr}}
.feat-card{position:relative;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:#fff;cursor:pointer;min-height:440px;border:1px solid rgba(255,255,255,.08)}
.feat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.feat-card:hover img{transform:scale(1.05)}
.feat-card .veil{display:none}
.feat-card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.85) 0%,rgba(10,8,6,.4) 50%,rgba(10,8,6,.1) 100%);pointer-events:none}
.feat-card-body{position:relative;z-index:2;margin-top:auto;padding:clamp(24px,3vw,36px)}
.feat-card h3{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:-.01em}
.feat-card p{color:rgba(255,255,255,.6);font-size:13px;margin-top:10px;line-height:1.65;max-width:36ch}
.feat-card .feat-pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 22px;border-radius:100px;transition:.3s;width:fit-content;border:1px solid rgba(255,255,255,.15)}
.feat-card:hover .feat-pill{background:rgba(255,255,255,.22)}
.feat-card .feat-arrow{display:none}
/* ===== css/22-nav-hover-previews.css ===== */
/* NAV HOVER PREVIEWS */
/* NAV HOVER PREVIEWS */
.nav-preview-wrap{position:relative;display:inline-block}
.nav-preview{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);width:220px;background:rgba(20,17,24,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;padding:12px 16px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;pointer-events:none;z-index:999}
.nav-preview-wrap:hover .nav-preview{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-preview p{font-size:12px;color:rgba(255,255,255,.75);line-height:1.55;margin:0}
.nav-preview::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:rgba(20,17,24,.92)}
.un-type-label{font:700 13px var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--holo-a);margin:48px 0 24px;padding-bottom:12px;border-bottom:1px solid rgba(20,17,24,.08)}
.un-type-label:first-child{margin-top:0}
.un-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-bottom:48px}
.un-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(20,17,24,.06);transition:transform .3s,box-shadow .3s;text-decoration:none;color:var(--ink);display:block;cursor:pointer}
.un-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px -12px rgba(20,17,24,.12)}
.un-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.un-card-body{padding:16px 20px 20px}
.un-card h4{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.35}
.un-card .un-meta{font-size:12px;color:var(--mute);margin-top:6px}
.un-card .un-tag{display:inline-block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:100px;margin-top:8px}
.un-card .un-cultural{background:rgba(160,122,40,.1);color:var(--holo-a)}
.un-card .un-natural{background:rgba(40,130,70,.1);color:#287a3c}
.un-card .un-mixed{background:rgba(100,60,160,.1);color:#6a3ca0}
.un-stats{display:flex;justify-content:center;gap:clamp(28px,5vw,64px);margin:0 0 36px;padding:20px 0;border-bottom:1px solid rgba(20,17,24,.08)}
.un-stat{text-align:center}
.un-stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(32px,4vw,52px);color:var(--ink);line-height:1}
.un-stat span{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-weight:500}
.lang-strip{padding:clamp(36px,4vw,52px) 0;text-align:center;border-top:1px solid rgba(255,255,255,.06);margin-top:clamp(40px,5vw,64px)}
.lang-strip h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,44px);color:#fff;line-height:1.25;margin-bottom:16px}
.lang-strip h3 span{color:#d4af37}
.lang-strip p{color:rgba(255,255,255,.45);font-size:14.5px;line-height:1.7;max-width:90ch;margin:0 auto}
.med-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:48px}
.med-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(20,17,24,.06);transition:transform .3s,box-shadow .3s}
.med-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px -12px rgba(20,17,24,.12)}
.med-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.med-card-body{padding:20px 24px 24px}
.med-card h4{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.3}
.med-card p{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.6}
.med-card .med-tag{display:inline-block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:100px;margin-top:12px;background:rgba(40,100,180,.1);color:#2864b4}
.med-stats{display:flex;justify-content:center;gap:clamp(28px,5vw,64px);margin:0 0 48px;padding:20px 0;border-bottom:1px solid rgba(20,17,24,.08)}
.med-stat{text-align:center}
.med-stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(28px,3.5vw,44px);color:var(--ink);line-height:1}
.med-stat span{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-weight:500}
.med-why{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:48px 0}
.med-why-card{background:rgba(40,100,180,.04);border-radius:14px;padding:28px 24px;border:1px solid rgba(40,100,180,.08)}
.med-why-card h4{font-family:var(--display);font-weight:400;font-size:17px;margin-bottom:8px}
.med-why-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.65}
.btt{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:24px;z-index:180;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 4px 20px rgba(0,0,0,.2)}.btt.show{opacity:.85;visibility:visible;transform:translateY(0)}.btt:hover{opacity:1;transform:translateY(-2px)}.site-nav.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.08);background:rgba(253,251,247,.97)}@media print{.site-nav,.btt,.wa-float,.preloader,.burger,.footer,.cta,.signature{display:none!important}}
/* ===== css/23-assistant.css ===== */
/* ASSISTANT */
/* ===== ASSISTANT ===== */
.bot-fab{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:200;width:56px;height:56px;border-radius:50%;border:1px solid rgba(20,17,24,.10);cursor:pointer;background:var(--paper);color:var(--ink);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.35);transition:transform .25s,background .25s}
.bot-fab:hover{transform:translateY(-2px)}
.bot-fab .bot-robot{width:48px;height:48px;display:block;object-fit:contain}
.bot-fab .bot-x{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.bot-fab .bot-x{display:none}
.bot-fab.open .bot-x{display:block}
.bot-fab.open .bot-robot{display:none}
.bot-fab .bot-robot{animation:botBob 3s ease-in-out infinite}
@keyframes botBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@media(prefers-reduced-motion:reduce){.bot-fab .bot-robot{animation:none}}
.bot-dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:var(--holo-a);border:2px solid #fff;box-shadow:0 0 0 1px rgba(20,17,24,.12)}
.bot-fab.open .bot-dot{display:none}
.bot-panel{position:fixed;right:18px;bottom:calc(156px + env(safe-area-inset-bottom,0px));z-index:201;width:370px;max-width:calc(100vw - 36px);height:min(520px,calc(100vh - 200px));background:var(--paper);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.4);border:1px solid rgba(20,17,24,.08);display:none;flex-direction:column;overflow:hidden}
.bot-panel.open{display:flex}
@media(max-width:520px){.bot-panel{left:12px;right:12px;width:auto;bottom:calc(152px + env(safe-area-inset-bottom,0px));height:min(62vh,460px)}}
.bot-head{background:var(--ink);color:var(--paper);padding:16px 18px;display:flex;align-items:center;gap:11px;flex-shrink:0}
.bot-head .bot-avatar{width:34px;height:34px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--ink);flex-shrink:0}
.bot-head .bot-avatar img{width:27px;height:27px;display:block;object-fit:contain}
.bot-head h4{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.2}
.bot-head span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,248,243,.5);margin-top:2px}
.bot-close{margin-left:auto;background:none;border:none;color:rgba(250,248,243,.6);cursor:pointer;font-size:20px;line-height:1;padding:4px 6px;border-radius:6px}
.bot-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.bot-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.bot-msg{max-width:86%;font-size:13.5px;line-height:1.65;padding:11px 14px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word}
.bot-msg.bot{background:#fff;border:1px solid rgba(20,17,24,.07);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px}
.bot-msg.me{background:var(--ink);color:var(--paper);align-self:flex-end;border-bottom-right-radius:5px}
.bot-msg b{font-weight:600}
.bot-msg a.bot-link{color:var(--holo-a);text-decoration:underline;cursor:pointer}
.bot-acts{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:92%}
.bot-act{font-size:11.5px;font-weight:500;padding:7px 14px;border-radius:100px;background:rgba(160,122,40,.1);color:var(--holo-a);border:1px solid rgba(160,122,40,.22);cursor:pointer;transition:.2s;text-decoration:none}
.bot-act:hover{background:var(--holo-a);color:#fff;border-color:var(--holo-a)}
.bot-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:#fff;border:1px solid rgba(20,17,24,.07);border-radius:14px;border-bottom-left-radius:5px}
.bot-typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:botDot .9s ease-in-out infinite alternate}
.bot-typing i:nth-child(2){animation-delay:.15s}
.bot-typing i:nth-child(3){animation-delay:.3s}
@keyframes botDot{to{opacity:.25;transform:translateY(-3px)}}
.bot-chips{display:flex;gap:7px;padding:0 14px 10px;overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.bot-chips::-webkit-scrollbar{display:none}
.bot-chip{white-space:nowrap;font-size:11.5px;padding:7px 13px;border-radius:100px;background:rgba(20,17,24,.05);border:1px solid rgba(20,17,24,.08);color:var(--ink-soft);cursor:pointer;transition:.2s;flex-shrink:0}
.bot-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bot-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(20,17,24,.07);background:#fff;flex-shrink:0}
.bot-in{flex:1;border:1px solid rgba(20,17,24,.12);border-radius:100px;padding:10px 16px;font:400 13.5px var(--body);color:var(--ink);background:var(--paper);outline:none}
.bot-in:focus{border-color:var(--holo-a)}
.bot-send{width:38px;height:38px;border-radius:50%;border:none;background:var(--ink);color:var(--paper);cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:.2s}
.bot-send:hover{background:var(--holo-a)}
.bot-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media print{.bot-fab,.bot-panel{display:none!important}}
/* ===== css/24-mobile.css ===== */
/* MOBILE */
/* ==================== MOBILE ==================== */
/* the picture element must not introduce a layout box, or images sized with
height:100% (the main hero) would collapse against an auto-height wrapper */
picture{display:contents}
/* Only ONE of html/body may clip horizontally. Setting overflow-x on an element
forces its overflow-y from visible to auto, so styling both made html AND body
scroll containers -> two scrollbars, and it also stopped body's overflow from
propagating to the viewport, which is what the modal scroll-lock relies on. */
/* The back button was inside .ip-hero / .cp-hero, which are overflow:hidden.
A fixed child of a clipping box gets cut off once the page scrolls, so the
buttons are moved out to be direct children of the scrolling overlay and
pinned there. */
.itin-page > .ip-back,.cat-page > .cp-back{position:fixed;z-index:260}
/* The itinerary back button was translucent WHITE, so it vanished the moment it
scrolled over the cream page (1.0:1 contrast). Same pill, same size and type --
only the fill is now dark so white text reads on any background it passes over. */
.ip-back,.cp-back{
background:rgba(20,17,24,.82);
color:#fff;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 6px 22px -8px rgba(0,0,0,.5);
}
.ip-back:hover,.cp-back:hover{
background:rgba(20,17,24,.95);
border-color:rgba(255,255,255,.34);
}
body{max-width:100%;overflow-x:hidden}
img,video,svg,iframe{max-width:100%}
*,*::before,*::after{min-width:0}
p,h1,h2,h3,h4,h5,li,span,a,td{overflow-wrap:break-word}
/* a grid track must never be wider than the screen itself */
.pkg-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.fleet-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.med-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.med-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.med-grid{grid-template-columns:1fr}}
.un-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.pw-grid{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
/* 'Why India' reads best as two even rows of three, not 4 + 2 */
.med-why{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.med-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.med-why{grid-template-columns:1fr}}
.route-strip{grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr))}
/* stat rows wrap rather than pushing the page sideways */
.un-stats,.med-stats,.ip-facts{flex-wrap:wrap}
/* hover previews cannot work on a touch screen -- a tap would only reveal them */
@media(hover:none){.nav-preview{display:none!important}}
@media(max-width:960px){
.p-cell h3{white-space:normal}
.ip-inc,.ip-hl-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
.un-stats,.med-stats,.ip-facts{display:grid;grid-template-columns:repeat(2,1fr);
gap:20px 12px;text-align:center;justify-content:stretch}
.ip-cta-actions{flex-direction:column;align-items:stretch}
.ip-cta-actions .pill{width:100%;justify-content:center;text-align:center}
.ip-day-imgs{grid-template-columns:1fr}
.cat-grid{grid-template-columns:1fr}
/* heroes: tall enough to feel cinematic, short enough to show content below */
.cp-hero{min-height:clamp(320px,58vh,520px)}
#cat-unesco .cp-hero,#cat-medical .cp-hero{min-height:clamp(340px,62vh,560px)}
#cat-travels .cp-hero{min-height:clamp(300px,52vh,480px)}
.ip-hero{min-height:clamp(320px,58vh,540px)}
/* back buttons clear of the notch and easy to hit */
.cp-back,.ip-back{top:calc(12px + env(safe-area-inset-top,0px));left:12px;
padding:11px 18px;font-size:10px}
/* comfortable tap targets */
.nav-menu a,.f-links a,.bot-chip,.bot-act,.ts-route{min-height:42px;
display:inline-flex;align-items:center}
.pw-card h4{font-size:17px}
}
@media(max-width:420px){
.un-stats,.med-stats,.ip-facts{gap:16px 8px}
.cp-hero h1{font-size:clamp(26px,8vw,34px)}
.bot-panel{left:8px;right:8px}
}
/* dvh keeps the hero steady while mobile browser chrome hides and shows */
@supports(height:100dvh){
@media(max-width:760px){
.cp-hero{min-height:clamp(320px,58dvh,520px)}
#cat-unesco .cp-hero,#cat-medical .cp-hero{min-height:clamp(340px,62dvh,560px)}
#cat-travels .cp-hero{min-height:clamp(300px,52dvh,480px)}
.ip-hero{min-height:clamp(320px,58dvh,540px)}
}
}
.trek-more{margin:28px 0 0;font-size:14.5px;color:var(--ink-soft)}.trek-more a{color:var(--holo-a);font-weight:600;text-decoration:none}
/* ===== css/25-trip-planner.css ===== */
/* TRIP PLANNER */
/* ============ TRIP PLANNER ============ */
html.tp-open,body.tp-open{overflow:hidden}
/* Build My Trip is a button on the desktop bar and a menu entry in the ☰
sheet. Same specificity as the display rule on .nav-menu > * so this can
still win on source order. */
nav .nav-menu>.nav-plan-item{display:none}
@media (max-width:1349px){nav .nav-menu>.nav-plan-item{display:flex}}
.tp{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:clamp(10px,3vh,44px) 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tp.open{display:flex}
.tp-bd{position:fixed;inset:0;background:rgba(20,17,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tp-card{position:relative;width:100%;max-width:690px;margin:auto;background:var(--paper);border:1px solid var(--hair);border-radius:22px;box-shadow:0 40px 90px rgba(20,17,24,.3);overflow:hidden;animation:tpIn .45s cubic-bezier(.2,.65,.2,1) both}
@keyframes tpIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.tp-head{padding:26px clamp(20px,4vw,34px) 0;position:relative}
.tp-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);background:transparent;cursor:pointer;font:400 22px/1 var(--body);color:var(--ink-soft);display:grid;place-items:center;transition:.2s}
.tp-x:hover{background:var(--paper-2);color:var(--ink)}
.tp-head h3{font-family:var(--display);font-weight:500;font-size:clamp(23px,3.2vw,31px);line-height:1.15;margin-top:8px}
.tp-head .tp-sub{color:var(--ink-soft);font-size:14px;margin-top:8px;line-height:1.55}
.tp-steps{display:flex;gap:6px;margin-top:20px}
.tp-steps i{height:3px;flex:1;border-radius:3px;background:var(--hair);transition:.45s}
.tp-steps i.on{background:linear-gradient(90deg,var(--holo-a),var(--holo-b))}
.tp-body{padding:24px clamp(20px,4vw,34px) 0}
.tp-step{display:none}
.tp-step.on{display:block;animation:tpFade .35s both}
@keyframes tpFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tp-lab{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 10px}
.tp-f{margin-bottom:20px}
.tp-row{display:flex;gap:12px;flex-wrap:wrap}
.tp-row>.tp-f{flex:1;min-width:150px}
.tp-f select,.tp-f input,.tp-f textarea{width:100%;padding:13px 14px;border:1px solid var(--hair);border-radius:12px;background:#fff;font:400 15px/1.3 var(--body);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;transition:.2s}
.tp-f textarea{min-height:86px;resize:vertical}
.tp-f select{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.tp-f input:focus,.tp-f select:focus,.tp-f textarea:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.13)}
/* ---- destination picker: a search over every package on the site ---- */
.tp-pick{position:relative}
.tp-pick input{padding-right:38px}
.tp-pick-x{position:absolute;top:11px;right:9px;width:24px;height:24px;border:none;
background:transparent;color:var(--mute);font-size:19px;line-height:1;cursor:pointer;
border-radius:50%}
.tp-pick-x:hover{background:var(--paper-2);color:var(--ink)}
.tp-pick-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;
background:#fff;border:1px solid var(--hair);border-radius:12px;
box-shadow:0 14px 40px rgba(20,17,24,.14);padding:6px}
.tp-pick-list[hidden]{display:none}
.tp-pick-opt{display:block;width:100%;text-align:left;border:none;background:none;
padding:9px 11px;border-radius:9px;cursor:pointer;font:400 14.5px/1.35 var(--body);
color:var(--ink)}
.tp-pick-opt small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.tp-pick-opt:hover,.tp-pick-opt.on{background:var(--paper-2)}
.tp-pick-opt.is-group{font-weight:600}
.tp-pick-head{padding:9px 11px 5px;font:600 10.5px var(--body);letter-spacing:.16em;
text-transform:uppercase;color:var(--mute)}
.tp-pick-none{padding:12px 11px;font-size:13.5px;color:var(--mute)}
.tp-pick-hint{margin:8px 2px 0;font-size:12px;color:var(--mute)}
.tp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.tp-opt{border:1px solid var(--hair);border-radius:14px;padding:13px 14px;background:#fff;cursor:pointer;text-align:left;font:500 14px var(--body);color:var(--ink);transition:.25s;display:flex;flex-direction:column;gap:3px}
.tp-opt small{font-weight:400;font-size:12px;color:var(--mute)}
.tp-opt:hover{border-color:var(--holo-b);transform:translateY(-1px)}
.tp-opt.sel{border-color:var(--holo-a);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--holo-a)}
.tp-chips{display:flex;flex-wrap:wrap;gap:8px}
.tp-chip{border:1px solid var(--hair);background:#fff;border-radius:999px;padding:9px 15px;font:500 13px var(--body);color:var(--ink-soft);cursor:pointer;transition:.22s}
.tp-chip:hover{border-color:var(--holo-b);color:var(--ink)}
.tp-chip.sel{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tp-count{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--hair);border-radius:12px;padding:8px 10px 8px 15px;background:#fff}
.tp-count>span{font:500 14px var(--body)}
.tp-count>span small{display:block;font-size:11px;color:var(--mute);font-weight:400}
.tp-count div{display:flex;align-items:center;gap:9px}
.tp-count button{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);background:var(--paper);cursor:pointer;font:400 18px/1 var(--body);color:var(--ink);transition:.2s}
.tp-count button:hover{background:var(--paper-2);border-color:var(--holo-b)}
.tp-count b{min-width:20px;text-align:center;font-weight:600;font-size:15px}
.tp-err{color:#B4443A;font-size:13px;margin:-10px 0 14px;display:none}
.tp-err.on{display:block}
.tp-foot{display:flex;align-items:center;gap:10px;padding:18px clamp(20px,4vw,34px) 26px}
.tp-back{background:transparent;border:none;font:600 14px var(--body);color:var(--ink-soft);cursor:pointer;padding:12px 2px}
.tp-back:hover{color:var(--ink)}
.tp-back[hidden]{display:none}
.tp-next{margin-left:auto;border:none;cursor:pointer;border-radius:999px;padding:14px 30px;font:600 14px var(--body);background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 60%,var(--holo-c));color:#fff;transition:.25s}
.tp-next:hover{filter:brightness(1.08) saturate(1.05);transform:translateY(-1px)}
.tp-next[hidden]{display:none}
.tp-sum{border:1px solid var(--hair);border-radius:14px;background:#fff;overflow:hidden}
.tp-sum p{display:flex;justify-content:space-between;gap:18px;padding:12px 15px;font-size:14px;border-bottom:1px solid var(--hair);margin:0}
.tp-sum p:last-child{border-bottom:none}
.tp-sum span{color:var(--mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;flex-shrink:0;padding-top:2px}
.tp-sum b{font-weight:500;text-align:right;line-height:1.45}
.tp-send{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tp-post{background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 60%,var(--holo-c));color:#fff;border:none}
.tp-post:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tp-post[disabled]{opacity:.65;cursor:default;transform:none;filter:none}
.tp-post.done{background:#2E7D52;filter:none}
.tp-or{text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:6px 0 2px}
.tp-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border-radius:999px;font:600 15px var(--body);cursor:pointer;border:1px solid var(--hair);text-decoration:none;transition:.25s}
.tp-btn svg{width:19px;height:19px;flex-shrink:0}
.tp-wa{background:#25D366;border-color:#25D366;color:#fff}
.tp-wa:hover{filter:brightness(1.06);transform:translateY(-1px)}
.tp-mail{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tp-mail:hover{filter:brightness(1.35);transform:translateY(-1px)}
.tp-call{background:transparent;color:var(--ink)}
.tp-call:hover{background:var(--paper-2)}
.tp-fine{font-size:12px;color:var(--mute);text-align:center;margin-top:14px;line-height:1.6}
@media(max-width:640px){
.tp{padding:0}
.tp-card{border-radius:0;border:none;min-height:100%;max-width:none}
.tp-f input,.tp-f select,.tp-f textarea{font-size:16px}
.tp-opts{grid-template-columns:1fr 1fr}
}
/* ===== css/26-luxury-trains-women-chauffeurs.css ===== */
/* LUXURY TRAINS WOMEN CHAUFFEURS */
/* ============ LUXURY TRAINS + WOMEN CHAUFFEURS ============ */
@media (min-width:821px){
.featured-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat-card{min-height:400px}
}
/* four across on wide screens: UNESCO, Medical, Trekking, Travel Guide */
@media (min-width:1100px){
.featured-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.feat-card{min-height:460px}
.feat-card-body{padding:26px 24px}
.feat-card h3{font-size:clamp(22px,1.9vw,27px)}
.feat-card p{font-size:12.5px;max-width:none;min-height:calc(1.65em * 3)}
.feat-card h3{min-height:calc(1.15em * 2)}
.feat-card .feat-pill{margin-top:16px}
}
.feat-hidden{display:none} /* these now have their own section above */
.wc-band{
display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,3vw,42px);align-items:center;
background:linear-gradient(135deg,#fff 0%,var(--paper) 100%);
border:1px solid var(--hair);border-radius:22px;padding:clamp(16px,2.2vw,24px);
margin-top:clamp(40px,5vw,64px);
}
.wc-band img{width:100%;height:100%;min-height:270px;object-fit:cover;border-radius:16px;display:block}
.wc-copy h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.12;margin:10px 0 12px}
.wc-copy .wc-lede{font-size:15px;color:var(--ink-soft);line-height:1.72;max-width:58ch}
.wc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.wc-tags span{
font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);
border:1px solid var(--hair);border-radius:100px;padding:7px 13px;background:var(--paper-2);
}
.wc-actions{display:flex;gap:12px;flex-wrap:wrap}
.wc-band--page{margin-top:8px;margin-bottom:44px}
@media (max-width:820px){
.wc-band{grid-template-columns:1fr}
.wc-band img{min-height:210px}
}
.lt-note{font-size:12.5px;color:var(--mute);line-height:1.65;margin:4px 0 44px}
/* safety options grid */
.sf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 52px}
.sf-item{display:flex;gap:12px;align-items:flex-start;padding:16px 16px;border:1px solid var(--hair);
border-radius:14px;background:linear-gradient(135deg,#fff 0%,var(--paper) 100%)}
.sf-item .sf-ic{font-size:19px;line-height:1.2;flex-shrink:0}
.sf-item h5{font-family:var(--body);font-weight:600;font-size:13.5px;margin:0 0 4px;letter-spacing:.01em}
.sf-item p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:0}
@media (max-width:1100px){.sf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sf-grid{grid-template-columns:1fr}}
.sf-line{font-size:12.5px;color:var(--mute);line-height:1.65;margin:-36px 0 48px}
/* ===== css/27-currency-picker.css ===== */
/* CURRENCY PICKER */
/* ============ COUNTRY / CURRENCY PICKER ============ */
.nav-right{display:flex;align-items:center;gap:clamp(6px,0.7vw,10px);flex-shrink:0}
.nav-menu{margin-inline:auto}
/* set by the script above; 0 until it runs, and 0 on the burger layout */
nav > .brand{margin-right:var(--navshift,0px);transform:translateX(calc(var(--logoshift,0px) - var(--barshift,0px)))}
nav > #navMenu,nav > .nav-right{transform:translateX(calc(-1 * var(--barshift,0px)))}
/* Below the desktop breakpoint, no transform on these — a transform makes
.nav-right the containing block for the account panel's position:fixed,
which was throwing the sign-in panel off the right edge on phones. */
@media (max-width:1349px){ nav > #navMenu, nav > .nav-right{transform:none} }
/* Desktop: menu centred with equal space between the logo and the icons,
logo and icons equidistant from the edges (overrides the brand-nudge above). */
@media (min-width:1350px){
nav{justify-content:center} /* centre the whole logo + menu + icons cluster on the page */
nav > .brand{margin-right:0;margin-left:0;transform:none}
nav > #navMenu,nav > .nav-right{transform:none;margin-left:0;margin-right:0}
.nav-menu{flex:none;justify-content:flex-start;margin-inline:0} /* keep the cluster tightly grouped */
}
.cur{position:relative;flex-shrink:0}
.cur-globe{width:15px;height:15px;opacity:.6;flex-shrink:0}
.cur-cc{
font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);
border:1px solid var(--hair);border-radius:5px;padding:3px 5px;background:var(--paper-2);
min-width:26px;text-align:center;flex-shrink:0;
}
.cur-btn{
display:flex;align-items:center;gap:7px;cursor:pointer;
border:1px solid var(--hair);background:rgba(255,255,255,.55);
border-radius:100px;padding:9px 12px 9px 13px;color:var(--ink);
font:600 12px/1 var(--body);letter-spacing:.08em;transition:.25s;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cur-btn:hover{border-color:var(--holo-b);background:#fff}
.cur-btn svg{width:14px;height:14px;opacity:.55;transition:transform .25s}
.cur.open .cur-btn svg{transform:rotate(180deg)}
.cur-flag{font-size:15px;line-height:1}
nav:not(.scrolled) .cur-btn{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.14)}
nav:not(.scrolled) .cur-btn:hover{background:rgba(255,255,255,.24)}
@media (max-width:1349px){nav .cur-btn{color:var(--ink)!important;border-color:var(--hair)!important;background:rgba(255,255,255,.7)!important}}
.cur-panel{
position:absolute;top:calc(100% + 10px);right:0;width:288px;z-index:120;
background:var(--paper);border:1px solid var(--hair);border-radius:16px;
box-shadow:0 26px 60px rgba(20,17,24,.18);padding:12px;
opacity:0;pointer-events:none;transform:translateY(-8px);transition:.28s cubic-bezier(.2,.65,.2,1);
}
.cur.open .cur-panel{opacity:1;pointer-events:auto;transform:none}
#curSearch{
width:100%;padding:10px 12px;border:1px solid var(--hair);border-radius:10px;background:#fff;
font:400 14px var(--body);color:var(--ink);outline:none;
}
#curSearch:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.cur-list{max-height:264px;overflow-y:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
.cur-opt{
display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
border:none;background:transparent;border-radius:10px;padding:9px 10px;
font:500 13.5px var(--body);color:var(--ink);transition:.15s;
}
.cur-opt:hover{background:var(--paper-2)}
.cur-opt.sel{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--holo-a)}
.cur-opt em{font-style:normal;margin-left:auto;font-size:11px;letter-spacing:.1em;color:var(--mute);font-weight:600}
.cur-opt.sel .cur-cc{border-color:var(--holo-a);color:var(--ink)}
.cur-none{padding:14px 10px;font-size:13px;color:var(--mute)}
.cur-note{font-size:11px;line-height:1.55;color:var(--mute);margin:10px 4px 2px;border-top:1px solid var(--hair);padding-top:9px}
.px{white-space:nowrap}
.img-missing{
background:linear-gradient(135deg,var(--paper-2) 0%,#E6DED0 100%);
color:transparent;font-size:0;object-fit:cover;
}
/* keep the desktop bar from crowding once the picker is in */
/* the menu's own sizing for narrow desktops lives in one place now - see
the "narrow desktop" block further down */
@media (max-width:560px){
.cur-btn{padding:8px 10px;font-size:11px}
.cur-panel{width:min(84vw,288px)}
}
/* ===== css/28-mobile-performance.css ===== */
/* MOBILE PERFORMANCE */
/* iOS Safari runs out of memory with many blurred layers - drop them on phones */
@media (max-width:820px){
nav, nav.scrolled, .bot-panel, .cur-btn, .cur-panel, .tp-bd, .sb-wrap, .pill{
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
nav.scrolled{background:rgba(250,248,243,.97)}
.tp-bd{background:rgba(20,17,24,.72)}
}
/* ===== css/29-account.css ===== */
/* ACCOUNT */
/* ============ ACCOUNT / SIGN IN ============ */
.acct{position:relative;flex-shrink:0}
.acct-btn{
width:38px;height:38px;border-radius:50%;cursor:pointer;padding:0;
border:1px solid var(--hair);background:rgba(255,255,255,.55);color:var(--ink);
display:grid;place-items:center;transition:.25s;overflow:hidden;
}
.acct-btn:hover{border-color:var(--holo-b);background:#fff}
.acct-btn svg{width:19px;height:19px}
.acct-ava{display:grid;place-items:center;width:100%;height:100%;font:600 13px var(--body);letter-spacing:.02em}
.acct-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acct-btn.on{border-color:var(--holo-a);background:var(--paper-2)}
nav:not(.scrolled) .acct-btn{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.14)}
nav:not(.scrolled) .acct-btn:hover{background:rgba(255,255,255,.24)}
@media (max-width:1349px){nav .acct-btn{color:var(--ink)!important;border-color:var(--hair)!important;background:rgba(255,255,255,.7)!important}}
.acct-panel{
position:absolute;top:calc(100% + 10px);right:0;width:300px;z-index:130;
background:var(--paper);border:1px solid var(--hair);border-radius:16px;
box-shadow:0 26px 60px rgba(20,17,24,.18);padding:18px;
opacity:0;pointer-events:none;transform:translateY(-8px);transition:.28s cubic-bezier(.2,.65,.2,1);
}
.acct.open .acct-panel{opacity:1;pointer-events:auto;transform:none}
.acct-panel h2,.acct-panel h4{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.2;margin-bottom:7px}
.acct-panel p{font-size:13px;color:var(--ink-soft);line-height:1.6}
.acct-google{
display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;cursor:pointer;
border:1px solid var(--hair);background:#fff;border-radius:100px;padding:12px 16px;
font:600 14px var(--body);color:var(--ink);text-decoration:none;transition:.22s;
}
.acct-google:hover{border-color:var(--holo-a);box-shadow:0 6px 18px rgba(20,17,24,.08)}
.acct-google svg{width:18px;height:18px;flex-shrink:0}
.acct-google[disabled]{opacity:.6;cursor:default}
.acct-fine{font-size:11px!important;color:var(--mute)!important;margin-top:12px;line-height:1.55}
.acct-fine a{color:var(--holo-a)}
.acct-me{display:flex;align-items:center;gap:11px;padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid var(--hair)}
.acct-me-ava{width:40px;height:40px;border-radius:50%;background:var(--paper-2);flex-shrink:0;
display:grid;place-items:center;font:600 15px var(--body);color:var(--ink-soft);overflow:hidden}
.acct-me-ava img{width:100%;height:100%;object-fit:cover}
.acct-me b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;word-break:break-all}
.acct-me small{display:block;font-size:12px;color:var(--mute);margin-top:1px}
.acct-f{margin:16px 0 2px}
.acct-f-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.acct-edit{background:none;border:none;cursor:pointer;padding:0;
font:600 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--holo-a)}
.acct-edit:hover{text-decoration:underline}
.acct-val{font:500 15px var(--body);color:var(--ink);margin:2px 0 0;letter-spacing:.01em}
.acct-f label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:6px}
.acct-f input{width:100%;padding:10px 12px;border:1px solid var(--hair);border-radius:10px;background:#fff;
font:400 14px var(--body);color:var(--ink);outline:none}
.acct-f input:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.acct-save{margin-top:8px;width:100%;cursor:pointer;border:none;border-radius:100px;padding:10px;
font:600 13px var(--body);background:var(--ink);color:var(--paper);transition:.2s}
.acct-save:hover{filter:brightness(1.3)}
.acct-save.ok{background:#2E7D52}
.acct-lab{font-size:10.5px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)!important;
font-weight:600;margin:18px 0 8px}
.acct-trips{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.acct-trip{border:1px solid var(--hair);border-radius:12px;background:#fff;padding:10px 12px}
.acct-trip b{display:block;font-size:13.5px;font-weight:600}
.acct-trip small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px;line-height:1.5}
.acct-empty{font-size:12.5px!important;color:var(--mute)!important}
.acct-out{width:100%;margin-top:16px;cursor:pointer;background:transparent;border:1px solid var(--hair);
border-radius:100px;padding:10px;font:600 12.5px var(--body);color:var(--ink-soft);transition:.2s}
.acct-out:hover{border-color:var(--ink);color:var(--ink)}
/* ---- narrow desktop: the one place the menu is tightened -------------
Between the burger cut-off and 1599px the bar is not wide enough for the
full-size labels, so the type and the gaps come down together. Above that
the sizes in .nav-menu / .nav-menu a apply unchanged. The numbers here
are measured, not guessed: see the nav check in test/run7.js. */
/* ---- narrow desktop ---------------------------------------------------
The type and the gaps are fluid now, so nothing is stepped here. What is
still worth claiming back at these widths is the bar's own margin and the
spacing between the right-hand controls - that is 70px the menu can have
without any of the labels getting smaller. */
@media (min-width:1350px){
/* Fluid like everything else in the bar, so there is no width at which the
margins suddenly jump. Narrow desktops give the margin to the menu;
wide ones get the full 64px back. */
nav{padding-inline:0.5cm} /* fixed 0.5cm (~19px) margin on both sides */
/* The whole bar, one centimetre towards the left edge - logo, menu and
buttons together, each carrying the same transform so their spacing is
untouched.
Worked out here rather than in JavaScript, from the very expression above
that sets the padding. Every attempt to measure it in the centring code
read a rectangle that already had a transform on it, so the answer lagged
a step behind the window and dragging from 1920 down to 1440 left the logo
hard against the edge of the screen. CSS has no such problem: the browser
re-evaluates it on every width, instantly and identically every time.
It can never take more than the padding less 16px, so whatever else moves,
the logo cannot finish nearer than 16px to the edge. Below 1280 the menu is
a burger and there is no room to give away. */
:root{--barshift:0px}
@media (min-width:1280px){
:root{--barshift:clamp(0px,calc(clamp(20px,calc(10vw - 115px),64px) - 16px),37.8px)}
}
.nav-right{gap:clamp(6px,0.65vw,9px)}
}
/* ---- the right-hand controls, sized for the desktop bar --------------
Search, currency, Build My Trip, Saved and the account avatar were
sized for a touch screen and looked heavy next to the menu. Everything
below is the original figure times 0.88 - down 20%, then back up 10%.
It is deliberately NOT applied under
1350px: that is the burger layout, where these same controls are tapped
with a thumb and need to stay a comfortable size. */
@media (min-width:1350px){
nav .nav-search-btn{width:33px;height:33px}
nav .nav-search-btn svg{width:14.9px;height:14.9px}
nav .cur-btn{padding:7.7px 11px 7.7px 11.6px;gap:6px;font-size:10.6px}
nav .cur-globe{width:13.2px;height:13.2px}
nav .cur-btn svg{width:12.1px;height:12.1px}
nav .cur-cc{font-size:8.8px;padding:2.8px 4.4px;min-width:23px}
nav > .pill, nav .nav-right .pill{font-size:10.6px;padding:11.6px 23px;gap:8.8px}
nav .nav-save{width:35px;height:35px}
nav .nav-save svg{width:16.5px;height:16.5px}
nav .nav-save-n{min-width:16px;height:16px;padding:0 4.4px;font-size:9.2px;top:-3px;right:-3px}
nav .acct-btn{width:33px;height:33px}
nav .acct-btn svg{width:16.5px;height:16.5px}
nav .acct-ava{font-size:11.4px}
}
@media (max-width:620px){
/* the button sits mid-bar on phones, so pin the panel to the viewport
instead of the button or it hangs off the left edge */
.acct-panel{position:fixed;top:calc(100% + 0px);top:70px;left:10px;right:10px;width:auto}
}
/* ===== css/30-callback-tab.css ===== */
/* CALLBACK TAB */
/* ============ STICKY CALLBACK TAB ============ */
.cb-tab{
position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:205;
border:none;cursor:pointer;padding:20px 11px;
border-radius:0 14px 14px 0;
background:linear-gradient(180deg,var(--holo-b) 0%,var(--holo-a) 55%,#7A5A18 100%);
color:#fff;font:600 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
writing-mode:vertical-rl;
box-shadow:0 10px 30px rgba(20,17,24,.22);
transition:padding-left .25s,box-shadow .25s,filter .25s;
}
.cb-tab:hover{padding-left:16px;filter:brightness(1.06);box-shadow:0 14px 38px rgba(20,17,24,.3)}
.cb-tab:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.cb-tab span{display:inline-block;transform:rotate(180deg)}
@media (max-width:820px){
.cb-tab{padding:16px 9px;font-size:11px;letter-spacing:.12em;top:44%}
}
@media print{.cb-tab{display:none}}
/* ---- the panel it opens ---- */
.cb{position:fixed;inset:0;z-index:310;display:none;align-items:center;justify-content:center;padding:18px}
.cb.open{display:flex}
.cb-bd{position:fixed;inset:0;background:rgba(20,17,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cb-card{
position:relative;width:100%;max-width:420px;background:var(--paper);
border:1px solid var(--hair);border-radius:20px;padding:26px clamp(20px,4vw,28px);
box-shadow:0 40px 90px rgba(20,17,24,.3);
animation:cbIn .4s cubic-bezier(.2,.65,.2,1) both;max-height:94vh;overflow-y:auto;
}
@keyframes cbIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.cb-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
border:1px solid var(--hair);background:transparent;cursor:pointer;font:400 20px/1 var(--body);
color:var(--ink-soft);display:grid;place-items:center}
.cb-x:hover{background:var(--paper-2);color:var(--ink)}
.cb-card h3{font-family:var(--display);font-weight:500;font-size:clamp(21px,3vw,26px);line-height:1.15;margin:6px 0 8px}
.cb-card .cb-sub{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:20px}
.cb-f{margin-bottom:15px}
.cb-f label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--mute);font-weight:600;margin-bottom:7px}
.cb-f input{width:100%;padding:12px 14px;border:1px solid var(--hair);border-radius:11px;background:#fff;
font:400 15px var(--body);color:var(--ink);outline:none;-webkit-appearance:none}
.cb-f input:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.cb-times{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cb-time{border:1px solid var(--hair);background:#fff;border-radius:11px;padding:11px 8px;cursor:pointer;
font:500 13px var(--body);color:var(--ink);transition:.2s}
.cb-time:hover{border-color:var(--holo-b)}
.cb-time.sel{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cb-go{width:100%;margin-top:6px;border:none;cursor:pointer;border-radius:100px;padding:14px;
font:600 14.5px var(--body);color:#fff;
background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 60%,var(--holo-c));transition:.25s}
.cb-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.cb-go[disabled]{opacity:.65;cursor:default;transform:none;filter:none}
.cb-go.done{background:#2E7D52;filter:none}
.cb-err{color:#B4443A;font-size:13px;margin:-6px 0 12px;display:none}
.cb-err.on{display:block}
.cb-alt{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--ink-soft);text-decoration:none}
.cb-alt b{color:var(--holo-a)}
.cb-fine{font-size:11.5px;color:var(--mute);text-align:center;line-height:1.6;margin-top:14px}
@media (max-width:520px){.cb-f input{font-size:16px}}
/* ===== css/31-assistant-entrance.css ===== */
/* ASSISTANT ENTRANCE */
/* ============ ROBOT ENTRANCE ============ */
.bot-fab{opacity:0} /* hidden until it flies in */
.bot-fab.arrived{opacity:1}
.bot-fab.pop{animation:botPop .55s cubic-bezier(.2,.8,.3,1.4) both}
@keyframes botPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.bot-fab.fly{animation:botFly .95s cubic-bezier(.18,.9,.3,1.25) both}
@keyframes botFly{
0%{opacity:0;transform:translateY(160px) scale(.7)}
60%{opacity:1}
75%{transform:translateY(-10px) scale(1.04)}
88%{transform:translateY(3px) scale(.99)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
/* a couple of friendly wiggles once it lands */
.bot-fab.wave{animation:botWave 1.5s ease-in-out 2}
@keyframes botWave{
0%,60%,100%{transform:rotate(0)}
68%{transform:rotate(-11deg)}
76%{transform:rotate(9deg)}
84%{transform:rotate(-6deg)}
92%{transform:rotate(3deg)}
}
/* soft ring that pulses out twice to draw the eye */
.bot-fab::after{
content:'';position:absolute;inset:-3px;border-radius:50%;
border:2px solid var(--holo-a);opacity:0;pointer-events:none;
}
.bot-fab.ping::after{animation:botPing 1.7s ease-out 2}
@keyframes botPing{
0%{opacity:.55;transform:scale(1)}
70%{opacity:0;transform:scale(1.5)}
100%{opacity:0;transform:scale(1.5)}
}
/* the little teaser bubble */
.bot-teaser{
position:fixed;right:84px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:199;
max-width:236px;background:var(--paper);border:1px solid var(--hair);border-radius:16px 16px 4px 16px;
padding:13px 15px;box-shadow:0 16px 40px rgba(20,17,24,.18);cursor:pointer;
opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
transition:.45s cubic-bezier(.2,.65,.2,1);text-align:left;
}
.bot-teaser.show{opacity:1;transform:none;pointer-events:auto}
.bot-teaser{cursor:default;padding:14px 15px 13px;max-width:270px}
.bot-teaser-x{position:absolute;top:5px;right:6px;width:24px;height:24px;border:none;background:transparent;
cursor:pointer;font:400 17px/1 var(--body);color:var(--mute);border-radius:50%}
.bot-teaser-x:hover{background:var(--paper-2);color:var(--ink)}
.bot-teaser-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.bot-teaser-head img{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.bot-teaser-head b{display:block;font:600 12.5px var(--body);color:var(--ink);line-height:1.25}
.bot-teaser-head em{display:flex;align-items:center;gap:5px;font-style:normal;font:500 10.5px var(--body);color:var(--mute)}
.bot-teaser-head em::before{content:"";width:6px;height:6px;border-radius:50%;background:#2E7D52;
box-shadow:0 0 0 2px rgba(46,125,82,.18)}
.bot-teaser-msg{font:400 13.5px/1.5 var(--body);color:var(--ink);margin:0 0 11px}
.bot-teaser-chips{display:flex;flex-wrap:wrap;gap:6px}
.bot-teaser-chips button{border:1px solid var(--hair);background:var(--paper-2);border-radius:100px;
padding:6px 11px;font:500 11.5px var(--body);color:var(--ink-soft);cursor:pointer;transition:.2s}
.bot-teaser-chips button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (max-width:520px){
.bot-teaser{right:78px;max-width:min(62vw,220px);padding:11px 13px}
.bot-teaser b{font-size:12.5px}
.bot-teaser span{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
.bot-fab{opacity:1}
.bot-fab.fly,.bot-fab.wave,.bot-fab.ping::after{animation:none}
.bot-teaser{transition:none}
}
/* ===== css/32-photo-strip.css ===== */
/* PHOTO STRIP */
/* ============ SCROLLING PHOTO STRIP ============ */
.collage{padding:clamp(24px,4vw,60px) 0 clamp(46px,6vw,84px);background:var(--paper-2);overflow:hidden}
.collage-head{text-align:center;margin-bottom:clamp(22px,3vw,38px)}
.collage-head h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.6vw,46px);line-height:1.12;margin-top:10px}
.collage-head h2 span{color:var(--holo-a)}
.cm-wrap{
position:relative;overflow:hidden;padding:34px 0 30px;
width:100vw;max-width:100vw;margin-left:calc(50% - 50vw); /* full bleed */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cm-track{display:flex;align-items:center;width:max-content;animation:cmScroll 60s linear infinite}
.cm-wrap:hover .cm-track{animation-play-state:paused}
@keyframes cmScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cm-card{
position:relative;margin:0 -14px;flex:0 0 auto;border-radius:10px;overflow:hidden;
background:var(--paper);box-shadow:0 16px 40px rgba(20,17,24,.17);
transition:transform .4s cubic-bezier(.2,.65,.2,1),box-shadow .4s;
}
.cm-card img{display:block;width:100%;height:100%;object-fit:cover}
.cm-b{width:clamp(260px,26vw,400px);aspect-ratio:16/10;z-index:2}
.cm-s{width:clamp(190px,19vw,280px);aspect-ratio:4/3;z-index:1}
.cm-up{transform:translateY(-20px) rotate(-1.4deg)}
.cm-dn{transform:translateY(20px) rotate(1.4deg)}
.cm-card:hover{z-index:5;box-shadow:0 26px 58px rgba(20,17,24,.27)}
.cm-up:hover{transform:translateY(-28px) rotate(-1.4deg) scale(1.04)}
.cm-dn:hover{transform:translateY(12px) rotate(1.4deg) scale(1.04)}
.cm-card figcaption{
position:absolute;left:0;right:0;bottom:0;padding:24px 13px 11px;
background:linear-gradient(180deg,transparent,rgba(15,13,18,.75));
color:#fff;font:600 10.5px var(--body);letter-spacing:.16em;text-transform:uppercase;
}
@media (max-width:820px){
/* phones get a plain swipeable strip: a 4000px animated layer is far too
much texture memory for mobile Safari and was crashing the tab */
.cm-wrap{
padding:18px 14px 16px;width:auto;max-width:none;margin-left:0;
-webkit-mask-image:none;mask-image:none;
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.cm-wrap::-webkit-scrollbar{display:none}
/* animation:none — on phones a JS auto-scroll drives the native strip
instead (light on memory), and it can still be swiped by hand. The
loop clones stay in the DOM so the auto-scroll loops seamlessly. */
.cm-track{animation:none;width:max-content;gap:10px;padding-right:14px}
.cm-card{margin:0;transform:none!important;
box-shadow:0 10px 24px rgba(20,17,24,.15)}
.cm-b{width:62vw}
.cm-s{width:44vw}
.cm-card figcaption{font-size:9.5px;letter-spacing:.1em;padding:18px 9px 8px}
}
@media (prefers-reduced-motion:reduce){
.cm-track{animation:none}
.cm-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ===== css/33-assistant-heart.css ===== */
/* ASSISTANT HEART */
/* ============ ROBOT'S HEART ENTRANCE ============ */
.hb-flight{
--s:1;
position:fixed;
right:calc(46px - 46px * var(--s));
bottom:calc(116px - 116px * var(--s) + env(safe-area-inset-bottom,0px));
width:360px;height:310px;
transform:scale(var(--s));transform-origin:100% 100%;
z-index:201;pointer-events:none;opacity:0;transition:opacity .5s ease;
}
.hb-flight.on{opacity:1}
.hb-flight svg{position:absolute;inset:0;width:360px;height:310px;overflow:visible}
.hb-trail{fill:none;stroke:var(--holo-a);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:3 8}
.hb-mask-line{fill:none;stroke:#fff;stroke-width:22;stroke-linecap:round}
.hb-bot{
position:absolute;top:0;left:0;width:44px;height:44px;object-fit:contain;
offset-path:path("M4 300 C58 296 118 278 170.0 250.3 L170.0 250.1 L169.9 249.5 L169.7 248.5 L169.4 247.0 L168.8 245.3 L167.9 243.1 L166.7 240.7 L165.2 237.9 L163.2 234.9 L160.9 231.7 L158.2 228.2 L155.1 224.6 L151.6 220.8 L147.7 216.9 L143.5 212.9 L139.0 208.8 L134.2 204.6 L129.3 200.3 L124.2 195.9 L119.0 191.5 L113.8 187.0 L108.7 182.5 L103.7 177.8 L98.9 173.0 L94.5 168.2 L90.3 163.2 L86.6 158.2 L83.4 153.0 L80.6 147.8 L78.5 142.5 L76.9 137.1 L75.9 131.8 L75.6 126.4 L75.9 121.1 L76.9 115.9 L78.5 110.8 L80.6 106.0 L83.4 101.4 L86.6 97.1 L90.3 93.2 L94.5 89.7 L98.9 86.7 L103.7 84.1 L108.7 82.2 L113.8 80.7 L119.0 79.9 L124.2 79.7 L129.3 80.0 L134.2 80.9 L139.0 82.3 L143.5 84.2 L147.7 86.5 L151.6 89.2 L155.1 92.2 L158.2 95.4 L160.9 98.7 L163.2 102.0 L165.2 105.3 L166.7 108.5 L167.9 111.4 L168.8 114.0 L169.4 116.3 L169.7 118.1 L169.9 119.4 L170.0 120.2 L170.0 120.5 L170.0 120.2 L170.1 119.4 L170.3 118.1 L170.6 116.3 L171.2 114.0 L172.1 111.4 L173.3 108.5 L174.8 105.3 L176.8 102.0 L179.1 98.7 L181.8 95.4 L184.9 92.2 L188.4 89.2 L192.3 86.5 L196.5 84.2 L201.0 82.3 L205.8 80.9 L210.7 80.0 L215.8 79.7 L221.0 79.9 L226.2 80.7 L231.3 82.1 L236.3 84.1 L241.1 86.7 L245.5 89.7 L249.7 93.2 L253.4 97.1 L256.6 101.4 L259.4 106.0 L261.5 110.8 L263.1 115.9 L264.1 121.1 L264.4 126.4 L264.1 131.8 L263.1 137.1 L261.5 142.5 L259.4 147.8 L256.6 153.0 L253.4 158.2 L249.7 163.2 L245.5 168.2 L241.1 173.0 L236.3 177.8 L231.3 182.5 L226.2 187.0 L221.0 191.5 L215.8 195.9 L210.7 200.3 L205.8 204.6 L201.0 208.8 L196.5 212.9 L192.3 216.9 L188.4 220.8 L184.9 224.6 L181.8 228.2 L179.1 231.7 L176.8 234.9 L174.8 237.9 L173.3 240.7 L172.1 243.1 L171.2 245.3 L170.6 247.0 L170.3 248.5 L170.1 249.5 L170.0 250.1 L170.0 250.3 C212 258 264 232 314 194");
offset-rotate:0deg;offset-distance:0%;
filter:drop-shadow(0 6px 14px rgba(20,17,24,.28));
}
@media (max-width:900px){.hb-flight{--s:.62}}
@media (max-width:700px){.hb-flight{display:none}}
@media (prefers-reduced-motion:reduce){.hb-flight{display:none}}
/* ===== css/34-page-notes.css ===== */
/* PAGE NOTES */
.cp-note{max-width:78ch;margin:-8px auto 26px;text-align:center;font-size:13px;line-height:1.7;color:var(--mute)}
#cat-cruises .pkg-grid,#cat-trains .pkg-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
#cat-cruises .pcard .places,#cat-trains .pcard .places{font-size:13px}
/* named versions of styles that used to be written inline in the HTML
(!important keeps them exactly as strong as the inline style was) */
.pw-label.pw-label-tight{margin-top:6px !important}
.pill.pill-dark{background:var(--ink) !important;color:var(--paper) !important;border-color:var(--ink) !important}
/* ===== css/35-enquiry-subscribe.css ===== */
/* ENQUIRY SUBSCRIBE */
/* ---- subscribe row under the CTA ---- */
.cta-more{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.cta-more a{font:600 12.5px var(--body);letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:.22s}
.cta-more a:hover{color:var(--holo-a);border-bottom-color:var(--holo-a)}
.cta-more span{color:var(--mute)}
.cta-form.sent input{opacity:.5}
#ctaGo.done{background:#2E7D52;border-color:#2E7D52;color:#fff}
#note.err{color:#B4443A}
#note.ok{color:#2E7D52}
/* ---- contact modal ---- */
.cf{position:fixed;inset:0;z-index:305;display:none;align-items:flex-start;justify-content:center;
padding:clamp(10px,3vh,40px) 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cf.open{display:flex}
.cf-bd{position:fixed;inset:0;background:rgba(20,17,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cf-card{position:relative;width:100%;max-width:520px;margin:auto;background:var(--paper);
border:1px solid var(--hair);border-radius:20px;padding:26px clamp(20px,4vw,30px);
box-shadow:0 40px 90px rgba(20,17,24,.3);animation:cbIn .4s cubic-bezier(.2,.65,.2,1) both}
.cf-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
border:1px solid var(--hair);background:transparent;cursor:pointer;font:400 20px/1 var(--body);
color:var(--ink-soft);display:grid;place-items:center}
.cf-x:hover{background:var(--paper-2);color:var(--ink)}
.cf-card h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,3vw,28px);line-height:1.15;margin:6px 0 8px}
.cf-sub{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:20px}
.cf-row{display:flex;gap:12px;flex-wrap:wrap}
.cf-row>.cf-f{flex:1;min-width:150px}
.cf-f{margin-bottom:15px}
.cf-f label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--mute);font-weight:600;margin-bottom:7px}
.cf-f label span{text-transform:none;letter-spacing:0;font-weight:400}
.cf-f input,.cf-f select,.cf-f textarea{width:100%;padding:12px 14px;border:1px solid var(--hair);
border-radius:11px;background:#fff;font:400 15px var(--body);color:var(--ink);outline:none;-webkit-appearance:none}
.cf-f textarea{min-height:104px;resize:vertical;line-height:1.6}
.cf-f select{background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.cf-f input:focus,.cf-f select:focus,.cf-f textarea:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.cf-err{color:#B4443A;font-size:13px;margin:-6px 0 12px;display:none}
.cf-err.on{display:block}
.cf-go{width:100%;border:none;cursor:pointer;border-radius:100px;padding:14px;
font:600 14.5px var(--body);color:#fff;
background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 60%,var(--holo-c));transition:.25s}
.cf-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.cf-go[disabled]{opacity:.65;cursor:default;transform:none;filter:none}
.cf-go.done{background:#2E7D52;filter:none}
.cf-alt{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--ink-soft);text-decoration:none}
.cf-alt b{color:var(--holo-a)}
.cf-fine{font-size:11.5px;color:var(--mute);text-align:center;line-height:1.6;margin-top:14px}
@media (max-width:520px){.cf-f input,.cf-f select,.cf-f textarea{font-size:16px}}
/* ===== css/36-categories-alt.css ===== */
/* CATEGORIES ALT */
.cats-alt{padding-top:clamp(20px,3vw,44px);border-radius:0}
@media (min-width:900px){.cats-alt .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cats-alt .label{color:var(--holo-c)}
/* ===== css/37-package-more.css ===== */
/* PACKAGE MORE */
.pkg-more{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px)}
/* ===== css/38-category-search.css ===== */
/* CATEGORY SEARCH */
.cat-find{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.cat-find-in{flex:1;min-width:220px;max-width:460px;padding:13px 16px;border:1px solid var(--hair);
border-radius:100px;background:#fff;font:400 15px var(--body);color:var(--ink);outline:none;-webkit-appearance:none}
.cat-find-in:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.cat-find-count{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pcard.find-hide{display:none}
@media (max-width:520px){.cat-find-in{font-size:16px}}
/* ===== css/39-pager.css ===== */
/* PAGER */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:clamp(28px,4vw,44px) 0 8px}
.pager button{
min-width:40px;height:40px;padding:0 12px;border:1px solid var(--hair);background:#fff;
border-radius:100px;cursor:pointer;font:600 13.5px var(--body);color:var(--ink);transition:.2s;
}
.pager button:hover:not(:disabled){border-color:var(--holo-a);color:var(--holo-a)}
.pager button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager button:disabled{opacity:.35;cursor:default}
.pager .gap{color:var(--mute);padding:0 2px;font-weight:600}
.pager .pg-nav{font-weight:600;letter-spacing:.04em}
.pcard.page-hide{display:none}
@media (max-width:520px){
.pager button{min-width:36px;height:36px;padding:0 9px;font-size:12.5px}
}
/* ===== css/40-destination-index-grid.css ===== */
/* DESTINATION INDEX GRID */
.dest-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(18px,2.4vw,30px);margin-bottom:clamp(30px,4vw,46px)}
.dest-group h4{font:600 11px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--holo-a);
margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.dest-chips{display:flex;flex-wrap:wrap;gap:7px}
.dest-chip{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:7px 12px;cursor:pointer;
font:500 13px var(--body);color:var(--ink);transition:.2s;display:inline-flex;align-items:center;gap:6px}
.dest-chip:hover{border-color:var(--holo-a);color:var(--holo-a)}
.dest-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dest-chip i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--mute);
background:var(--paper-2);border-radius:100px;padding:1px 6px;min-width:18px;text-align:center}
.dest-chip:hover i{background:var(--paper)}
.dest-chip.on i{background:rgba(255,255,255,.18);color:var(--paper)}
.dest-clear{display:none;margin-left:4px;background:none;border:none;cursor:pointer;
font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--holo-a)}
.dest-clear.on{display:inline}
@media (max-width:520px){.dest-index{grid-template-columns:1fr}}
/* ===== css/41-destination-drilldown.css ===== */
/* DESTINATION DRILLDOWN */
.dest-nav{margin:6px 0 clamp(26px,3.4vw,40px)}
.dest-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;
font:600 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dest-crumb button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--holo-a)}
.dest-crumb button:hover{text-decoration:underline}
.dest-crumb span.sep{color:var(--hair)}
.dest-crumb span.here{color:var(--ink)}
.dest-level{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dest-tile{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
border:1px solid var(--hair);background:#fff;border-radius:14px;padding:13px 15px;transition:.2s}
.dest-tile:hover{border-color:var(--holo-a);transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,17,24,.07)}
.dest-tile b{font:600 14.5px var(--body);color:var(--ink)}
.dest-tile span{font:400 11.5px var(--body);color:var(--mute);letter-spacing:.02em}
.dest-tile.on{background:var(--ink);border-color:var(--ink)}
.dest-tile.on b{color:var(--paper)} .dest-tile.on span{color:rgba(251,248,241,.7)}
.pkg-heading{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,26px);
margin:clamp(26px,3.4vw,40px) 0 6px}
.pkg-sub{font-size:13px;color:var(--mute);margin:0 0 20px}
@media (max-width:520px){.dest-level{grid-template-columns:1fr 1fr}.dest-tile{padding:11px 12px}}
/* ===== css/42-destination-tiles.css ===== */
/* DESTINATION TILES */
.dest-level{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.dest-tile{position:relative;padding:0;border:none;border-radius:16px;overflow:hidden;
aspect-ratio:16/10;display:block;background:var(--paper-2);box-shadow:0 6px 18px rgba(20,17,24,.10)}
.dest-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.2,.65,.2,1)}
.dest-tile .dt-veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,13,18,.05) 30%,rgba(15,13,18,.72) 100%)}
.dest-tile .dt-body{position:absolute;left:0;right:0;bottom:0;padding:14px 15px;text-align:left;
display:flex;flex-direction:column;gap:2px}
.dest-tile .dt-body b{font-family:var(--display);font-weight:500;font-size:18px;color:#fff;line-height:1.15}
.dest-tile .dt-body span{font:500 11px var(--body);letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.82)}
.dest-tile:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(20,17,24,.2)}
.dest-tile:hover img{transform:scale(1.06)}
.dest-tile.on{outline:2px solid var(--holo-a);outline-offset:2px}
@media (max-width:520px){
.dest-level{grid-template-columns:1fr 1fr;gap:9px}
.dest-tile .dt-body{padding:11px 12px}
.dest-tile .dt-body b{font-size:15px}
.dest-tile .dt-body span{font-size:9.5px;letter-spacing:.07em}
}
/* ===== css/43-state-pages.css ===== */
/* STATE PAGES */
.state-wrap{padding-top:clamp(70px,8vw,110px)}
.state-h1{font-family:var(--display);font-weight:300;font-size:clamp(32px,5vw,54px);line-height:1.08;
letter-spacing:-.02em;margin:8px 0 6px}
.state-sub{color:var(--ink-soft);font-size:15px;margin:0 0 clamp(24px,3vw,34px)}
.city-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.4vw,38px)}
.city-chip{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:9px 15px;cursor:pointer;
font:500 13.5px var(--body);color:var(--ink);transition:.2s;display:inline-flex;align-items:center;gap:7px}
.city-chip:hover{border-color:var(--holo-a);color:var(--holo-a)}
.city-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.city-chip i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--mute);
background:var(--paper-2);border-radius:100px;padding:1px 6px;min-width:18px;text-align:center}
.city-chip.on i{background:rgba(255,255,255,.18);color:var(--paper)}
/* ===== css/44-region-photo-cards.css ===== */
/* REGION PHOTO CARDS */
/* Outbound region country pickers rendered as photo cards (reuse .dest-tile look) */
.geo-grid{margin-bottom:clamp(26px,3.4vw,38px)}
.geo-grid.dest-level{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:520px){.geo-grid.dest-level{grid-template-columns:1fr 1fr}}
/* ===== css/45-tile-tone.css ===== */
/* TILE TONE */
.dest-tile .dt-veil{opacity:1}
.dest-tile .dt-veil.dt-plain{background:linear-gradient(150deg,#2E4A6B 0%,#5C87B0 100%)}
.dest-tile .dt-body{background:linear-gradient(180deg,transparent,rgba(10,9,12,.45))}
.dest-tile:hover .dt-veil{filter:brightness(1.12)}
/* ===== css/46-itinerary-days.css ===== */
/* ITINERARY DAYS */
#page-itin .ip-days{max-width:820px}
.itin-day{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:start;
padding:20px 0;border-top:1px solid var(--hair)}
.itin-day:first-child{border-top:none}
.itin-day-num{font:600 10.5px var(--body);letter-spacing:.16em;text-transform:uppercase;
color:var(--holo-a);padding-top:6px;white-space:nowrap}
.itin-day-body{min-width:0}
.itin-day-body h4{font-family:var(--display);font-weight:500;font-size:18.5px;
margin:0 0 6px;line-height:1.3;color:var(--ink)}
.itin-day-body p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.7}
@media (max-width:560px){
.itin-day{grid-template-columns:1fr;gap:4px;padding:16px 0}
.itin-day-num{padding-top:0}
.itin-day-body h4{font-size:17px}
}
.itin-on-request{color:var(--ink-soft);line-height:1.7;margin:0}
/* ===== css/47-popular-search.css ===== */
/* POPULAR SEARCH */
.pop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin:clamp(26px,3.4vw,40px) 0 8px}
.pop-head .pkg-heading{margin:0}
.pop-head .pkg-sub{margin:6px 0 0;max-width:none}
.pop-head>div:first-child{flex:1 1 100%}
.pop-search{position:relative;flex:0 0 auto;width:min(340px,100%)}
.pop-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
color:var(--mute);pointer-events:none}
.pop-find{width:100%;padding:12px 38px 12px 40px;border:1px solid var(--hair);border-radius:100px;
background:#fff;font:400 14.5px var(--body);color:var(--ink);outline:none;-webkit-appearance:none}
.pop-find:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.pop-find::-webkit-search-cancel-button{display:none}
.pop-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;
border:none;background:none;cursor:pointer;color:var(--mute);font-size:19px;line-height:1;border-radius:50%}
.pop-clear:hover{background:var(--paper-2);color:var(--ink)}
.pop-count{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
margin:0 0 14px}
.pcard.pop-hide{display:none}
@media (max-width:820px){
.pop-head{align-items:stretch}
.pop-search{width:100%}
}
@media (max-width:520px){.pop-find{font-size:16px}}
/* ===== css/48-one-line-text.css ===== */
/* ONE LINE TEXT */
/* intro lines sit on one line where they fit; longer ones never leave a lone word behind */
.cp-hero p{max-width:none;text-wrap:balance}
.sf-line{text-wrap:balance}
.dest-tile .dt-body span{white-space:nowrap;letter-spacing:.06em}
@media (max-width:560px){.dest-tile .dt-body{padding-left:10px;padding-right:10px}.dest-tile .dt-body span{font-size:9px;letter-spacing:.02em}}
.cp-note{max-width:none}
p{text-wrap:pretty}
/* ===== css/49-directors.css ===== */
/* DIRECTORS */
.directors{padding:clamp(64px,8vw,110px) 0;background:var(--paper-2)}
.dir-title{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.6vw,50px);
line-height:1.05;letter-spacing:-.02em;margin:10px 0 0}
.dir-title em{font-style:italic;color:var(--holo-a)}
.dir-head{display:grid;grid-template-columns:1fr;gap:14px;align-items:end}
@media (min-width:900px){
.dir-head{grid-template-columns:minmax(0,420px) minmax(0,1fr);
gap:clamp(26px,3.4vw,46px)}
}
.dir-intro{max-width:46ch;color:var(--ink-soft);
font-size:clamp(17px,1.5vw,20px);line-height:1.55;margin:0;padding-bottom:8px}
@media (max-width:899px){.dir-intro{padding-bottom:0}}
.dir-feature{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,46px);
align-items:stretch;margin-top:clamp(34px,4.4vw,54px)}
@media (min-width:900px){.dir-feature{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
.dir-frame{margin:0;position:relative;border-radius:20px;overflow:hidden;
background:var(--paper);border:1px solid var(--hair);
box-shadow:0 18px 46px rgba(20,17,24,.13);
display:flex;flex-direction:column;height:100%}
.dir-frame img{display:block;width:100%;flex:1 1 auto;min-height:0;
aspect-ratio:960/909;object-fit:cover;object-position:center 42%;background:var(--paper-2)}
.dir-frame figcaption{padding:15px 18px;font:600 11.5px var(--body);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-soft);background:var(--paper);
border-top:1px solid var(--hair);text-align:center;
display:flex;flex-direction:column;gap:3px}
.dir-frame figcaption .cap-amp{color:var(--holo-a);font-size:12px;letter-spacing:0}
/* grid rather than flex, so both profile cards are always the same height */
.dir-people{display:grid;grid-auto-rows:1fr;gap:clamp(22px,2.6vw,30px);height:100%}
.dir-person{background:var(--paper);border:1px solid var(--hair);border-radius:18px;
padding:clamp(20px,2.4vw,26px);transition:transform .3s,box-shadow .3s;
display:flex;flex-direction:column;justify-content:center}
.dir-person:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,17,24,.08)}
.dir-person h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.25;margin:0 0 3px}
.dir-qual{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--holo-a);white-space:nowrap}
.dir-role{font:600 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;
color:var(--mute);margin:0 0 14px}
.dir-facts{margin:0}
.dir-facts dt{font:600 10.5px var(--body);letter-spacing:.16em;text-transform:uppercase;
color:var(--holo-a);margin-top:12px}
.dir-facts dt:first-child{margin-top:0}
.dir-facts dd{margin:4px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
@media (max-width:560px){
.dir-frame figcaption{font-size:10px;letter-spacing:.1em;padding:11px 14px}
}
/* ===== css/50-promise.css ===== */
/* PROMISE */
.promise{padding:clamp(64px,8vw,110px) 0}
.pr-title{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.6vw,50px);
line-height:1.05;letter-spacing:-.02em;margin:10px 0 0}
.pr-title em{font-style:italic;color:var(--holo-a)}
.pr-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px);
margin-top:clamp(34px,4.4vw,54px)}
@media (min-width:880px){.pr-grid{grid-template-columns:repeat(3,1fr)}}
.pr-card{position:relative;background:var(--paper);border:1px solid var(--hair);
border-radius:20px;padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;
transition:transform .3s,box-shadow .3s}
.pr-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(20,17,24,.1)}
.pr-num{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.2em;
color:var(--holo-a);display:block;margin-bottom:12px}
.pr-card h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.25;margin:0 0 10px}
.pr-card > p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;margin:0}
.pr-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:7px}
.pr-list li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-soft)}
.pr-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--holo-a);font-weight:700;font-size:12px}
.pr-link{margin-top:auto;padding-top:20px;font:600 11.5px var(--body);letter-spacing:.14em;
text-transform:uppercase;color:var(--holo-a);cursor:pointer}
.pr-link:hover{text-decoration:underline}
.pr-card.is-tappable{cursor:pointer}
.pr-card.is-tappable:focus-visible{outline:2px solid var(--holo-a);outline-offset:3px}
.pr-card.is-tappable:hover .pr-link{color:var(--ink)}
.pr-link{transition:color .25s,transform .25s}
.pr-card.is-tappable:hover .pr-link{transform:translateX(3px)}
/* ===== css/51-tariff.css ===== */
/* TARIFF */
.tariff-h{font-family:var(--display);font-weight:500;font-size:20px;margin:clamp(28px,3.4vw,40px) 0 4px}
.tariff-note{font-size:13.5px;color:var(--mute);margin:0 0 12px}
.tariff-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hair);
border-radius:14px;background:#fff}
.tariff{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
.tariff thead th{background:var(--paper-2);text-align:left;padding:12px 14px;
font:600 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
white-space:nowrap;border-bottom:1px solid var(--hair)}
.tariff td,.tariff tbody th{padding:11px 14px;border-bottom:1px solid rgba(20,17,24,.06);
text-align:left;vertical-align:middle}
.tariff tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.tariff td{color:var(--ink-soft);white-space:nowrap}
.tariff tbody tr:last-child td,.tariff tbody tr:last-child th{border-bottom:none}
.tariff tbody tr:hover td,.tariff tbody tr:hover th{background:var(--paper)}
.tariff-foot{font-size:12.5px;color:var(--mute);line-height:1.7;margin:14px 0 0;max-width:80ch}
@media (max-width:820px){
.tariff-scroll::after{content:"";display:block}
.tariff{font-size:13px}
}
/* ===== css/52-vehicle-list.css ===== */
/* VEHICLE LIST */
.veh{display:flex;align-items:center;gap:12px}
.veh-art{flex:0 0 auto;width:52px;height:30px;display:grid;place-items:center;
background:var(--paper-2);border-radius:8px;padding:3px}
.veh-art svg{width:100%;height:100%;fill:none;stroke:var(--ink-soft);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.veh-art svg .g{fill:rgba(160,122,40,.16);stroke-width:1.2}
.veh-art svg .s{stroke:var(--holo-a);stroke-width:2}
.veh-lux svg{stroke:var(--holo-a)}
.veh-name{font-weight:600;color:var(--ink)}
.tariff-row{cursor:pointer;transition:background .18s}
.tariff-row:hover{background:var(--paper)}
.tariff-row:hover .veh-art{background:#fff}
/* the enquire column stays put while the rates scroll under it */
.tariff-cta{text-align:right;white-space:nowrap;position:sticky;right:0;
background:#fff;box-shadow:-10px 0 12px -8px rgba(20,17,24,.12)}
.tariff-row:hover .tariff-cta{background:var(--paper)}
.tariff thead th:last-child{position:sticky;right:0;background:var(--paper-2);
box-shadow:-10px 0 12px -8px rgba(20,17,24,.12)}
.veh-book{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;
background:#25D366;color:#fff;font:600 11px var(--body);letter-spacing:.1em;text-transform:uppercase;
transition:filter .2s,transform .2s}
.veh-book::before{content:"";width:13px;height:13px;flex:0 0 auto;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.veh-book:hover{filter:brightness(1.06);transform:translateY(-1px)}
.sr-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tariff{min-width:900px}
@media (max-width:520px){
.veh-art{width:44px;height:26px}
.veh-book{padding:6px 11px;font-size:10px}
}
/* ===== css/53-ticket-form.css ===== */
/* TICKET FORM */
.tk-form{margin-top:6px}
.tk-mode{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.tk-opt{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:10px 20px;cursor:pointer;
font:600 13px var(--body);color:var(--ink);transition:.2s}
.tk-opt:hover{border-color:var(--holo-a)}
.tk-opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.tk-f{display:flex;flex-direction:column;gap:6px}
.tk-f > span{font:600 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.tk-f > span em{font-style:normal;color:var(--mute);letter-spacing:.08em}
.tk-f input,.tk-f select,.tk-f textarea{width:100%;padding:12px 14px;border:1px solid var(--hair);
border-radius:12px;background:#fff;font:400 14.5px var(--body);color:var(--ink);outline:none;
-webkit-appearance:none;appearance:none}
.tk-f select{background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:34px}
.tk-f textarea{resize:vertical;line-height:1.6}
.tk-f input:focus,.tk-f select:focus,.tk-f textarea:focus{border-color:var(--holo-a);
box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.tk-wide{margin-top:16px}
.tk-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}
.tk-send{border:none;cursor:pointer;background:var(--ink);color:var(--paper);border-radius:100px;
padding:14px 30px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.tk-send:hover{background:var(--holo-a)}
.tk-send:disabled{opacity:.55;cursor:default}
.tk-msg{margin:14px 0 0;font-size:14px}
.tk-msg.ok{color:#1F7A3D}
.tk-msg.err{color:#B4442F}
@media (max-width:520px){.tk-f input,.tk-f select,.tk-f textarea{font-size:16px}}
/* ===== css/54-ticketing.css ===== */
/* TICKETING */
.ticketing{background:var(--ink-bg);color:var(--paper);
padding:clamp(64px,8vw,110px) 0;position:relative;overflow:hidden}
.ticketing .label{color:var(--mute)}
.tkt-head{display:grid;grid-template-columns:1fr;gap:16px;align-items:end}
@media (min-width:900px){
.tkt-head{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(26px,3.4vw,52px)}
}
.tkt-head h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.6vw,50px);
line-height:1.06;letter-spacing:-.02em;margin:10px 0 0;color:var(--paper)}
.tkt-head h2 em{font-style:italic;color:var(--holo-c)}
.tkt-intro{color:rgba(251,248,241,.72);font-size:clamp(15.5px,1.35vw,17.5px);
line-height:1.65;margin:0;padding-bottom:6px;max-width:46ch}
.tkt-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,26px);
margin-top:clamp(34px,4.4vw,52px)}
/* four cards now: two across on a tablet, four on a desktop */
@media (min-width:700px){.tkt-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.tkt-grid{grid-template-columns:repeat(4,1fr)}}
.tkt-card{background:rgba(251,248,241,.05);border:1px solid rgba(251,248,241,.12);
border-radius:20px;padding:clamp(24px,2.8vw,32px);transition:transform .3s,border-color .3s,background .3s}
.tkt-card:hover{transform:translateY(-3px);background:rgba(251,248,241,.08);
border-color:rgba(234,216,164,.4)}
.tkt-ico{font-size:26px;line-height:1;display:block;margin-bottom:14px}
.tkt-card h3{font-family:var(--display);font-weight:500;font-size:21px;margin:0 0 10px;color:var(--paper)}
.tkt-card > p{color:rgba(251,248,241,.68);font-size:14.5px;line-height:1.7;margin:0}
.tkt-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:7px}
.tkt-list li{position:relative;padding-left:20px;font-size:13.5px;color:rgba(251,248,241,.82)}
.tkt-list li::before{content:"\2713";position:absolute;left:0;color:var(--holo-c);font-weight:700;font-size:12px}
.tkt-card.is-tappable{cursor:pointer;display:flex;flex-direction:column}
.tkt-card.is-tappable:focus-visible{outline:2px solid var(--holo-c);outline-offset:3px}
.tkt-go-in{margin-top:auto;padding-top:18px;font:600 11px var(--body);letter-spacing:.14em;
text-transform:uppercase;color:var(--holo-c);opacity:.85;transition:opacity .25s,transform .25s}
.tkt-card.is-tappable:hover .tkt-go-in{opacity:1;transform:translateX(3px)}
.tkt-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
margin-top:clamp(28px,3.4vw,40px)}
.tkt-go{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tkt-go:hover{background:var(--holo-c);border-color:var(--holo-c)}
.ticketing .pill.line{border-color:rgba(251,248,241,.35);color:var(--paper)}
.ticketing .pill.line:hover{border-color:var(--holo-c);color:var(--holo-c)}
/* ===== css/55-trip-builder.css ===== */
/* TRIP BUILDER */
.tb-wrap{padding-bottom:clamp(60px,7vw,100px)}
.tb-steps{list-style:none;display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:0 0 clamp(26px,3.4vw,38px)}
.tb-steps li{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;
border:1px solid var(--hair);background:#fff;font:600 11.5px var(--body);letter-spacing:.06em;
color:var(--mute);transition:.25s}
.tb-steps li span{width:20px;height:20px;border-radius:50%;background:var(--paper-2);color:var(--ink-soft);
display:grid;place-items:center;font-size:10.5px}
.tb-steps li.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.tb-steps li.on span{background:var(--holo-a);color:#fff}
.tb-steps li.done{border-color:var(--holo-a);color:var(--holo-a)}
.tb-steps li.done span{background:var(--holo-a);color:#fff}
.tb-layout{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,38px);align-items:start}
@media (min-width:960px){.tb-layout{grid-template-columns:minmax(0,1fr) minmax(0,330px)}}
.tb-panel{display:none}
.tb-panel.on{display:block}
.tb-panel h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,29px);margin:0 0 6px}
.tb-note{color:var(--ink-soft);font-size:14.5px;line-height:1.65;margin:0 0 20px;max-width:62ch}
.tb-choices{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.tb-choice{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:12px 22px;cursor:pointer;
font:600 13.5px var(--body);color:var(--ink);transition:.2s}
.tb-choice:hover{border-color:var(--holo-a)}
.tb-choice.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tb-f{display:flex;flex-direction:column;gap:6px}
.tb-f > span{font:600 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.tb-f > span em{font-style:normal;color:var(--mute)}
.tb-f input,.tb-f select,.tb-f textarea{width:100%;padding:12px 14px;border:1px solid var(--hair);
border-radius:12px;background:#fff;font:400 14.5px var(--body);color:var(--ink);outline:none;-webkit-appearance:none}
.tb-f textarea{resize:vertical;line-height:1.6}
.tb-f input:focus,.tb-f select:focus,.tb-f textarea:focus{border-color:var(--holo-a);
box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.tb-wide{margin-top:16px}
.tb-search input{width:100%;max-width:460px;padding:12px 16px;border:1px solid var(--hair);
border-radius:100px;background:#fff;font:400 14.5px var(--body);outline:none;-webkit-appearance:none}
.tb-search input:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.tb-list{display:flex;flex-direction:column;gap:8px;margin:16px 0 18px;max-height:420px;overflow-y:auto;
padding-right:4px}
.tb-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--hair);
border-radius:14px;background:#fff;cursor:pointer;text-align:left;transition:.2s;width:100%}
.tb-item:hover{border-color:var(--holo-a);transform:translateX(2px)}
.tb-item.on{border-color:var(--ink);background:var(--paper-2)}
.tb-item b{display:block;font:600 14.5px var(--body);color:var(--ink)}
.tb-item small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.tb-item .tb-rate{margin-left:auto;font:600 13.5px var(--body);color:var(--holo-a);white-space:nowrap}
.tb-none{color:var(--mute);font-size:14px;padding:14px 2px}
.tb-skip{background:none;border:none;cursor:pointer;padding:0;font:600 11.5px var(--body);
letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tb-skip:hover{color:var(--holo-a);text-decoration:underline}
.tb-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:clamp(24px,3vw,34px);
padding-top:22px;border-top:1px solid var(--hair)}
.tb-next,.tb-send{border:none;cursor:pointer;background:var(--ink);color:var(--paper);border-radius:100px;
padding:14px 30px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.tb-next:hover,.tb-send:hover{background:var(--holo-a)}
.tb-send{background:#25D366}
.tb-send:hover{background:#1eb959}
.tb-back{background:none;border:none;cursor:pointer;font:600 11.5px var(--body);letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-soft)}
.tb-back:hover{color:var(--holo-a)}
.tb-msg{margin:16px 0 0;font-size:14px}
.tb-msg.ok{color:#1F7A3D}.tb-msg.err{color:#B4442F}
.tb-cart{background:var(--paper-2);border:1px solid var(--hair);border-radius:20px;
padding:clamp(20px,2.4vw,26px);position:sticky;top:110px}
.tb-cart h3{font-family:var(--display);font-weight:500;font-size:18px;margin:0 0 14px}
.tb-cart-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.tb-cart-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);
padding-bottom:12px;border-bottom:1px solid var(--hair)}
.tb-cart-list li:last-child{border-bottom:none;padding-bottom:0}
.tb-cart-list li .tb-tick{color:var(--holo-a);font-weight:700;flex:0 0 auto}
.tb-cart-list li b{display:block;color:var(--ink);font-weight:600}
.tb-empty{color:var(--mute);font-style:italic}
.tb-total{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.tb-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.tb-total-row b{font-size:17px;color:var(--ink)}
.tb-total-note{font-size:12px;color:var(--mute);line-height:1.6;margin:10px 0 0}
@media (max-width:959px){.tb-cart{position:static}}
/* ===== css/56-commitments.css ===== */
/* COMMITMENTS */
.commit{padding:clamp(64px,8vw,110px) 0;background:var(--paper)}
.st-head{display:grid;grid-template-columns:1fr;gap:14px;align-items:end}
@media (min-width:900px){
.st-head{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(26px,3.4vw,46px)}
}
.st-head h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.6vw,50px);
line-height:1.05;letter-spacing:-.02em;margin:10px 0 0}
.st-head h2 em{font-style:italic;color:var(--holo-a);display:block}
.st-intro{max-width:46ch;color:var(--ink-soft);font-size:clamp(16px,1.4vw,18.5px);
line-height:1.6;margin:0;padding-bottom:8px}
.st-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);
margin-top:clamp(34px,4.4vw,52px);align-items:stretch}
@media (min-width:880px){.st-grid{grid-template-columns:repeat(3,1fr)}}
.st-card{background:var(--paper-2);border:1px solid var(--hair);border-radius:20px;
padding:clamp(24px,2.6vw,30px);display:flex;flex-direction:column;
transition:transform .3s,box-shadow .3s,border-color .3s}
.st-card h3{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;
margin:0 0 12px;letter-spacing:.005em}
.st-card p{color:var(--ink-soft);font-size:14px;line-height:1.72;margin:0}
.st-card.is-tappable{cursor:pointer}
.st-card.is-tappable:hover{transform:translateY(-3px);border-color:var(--holo-a);
box-shadow:0 16px 40px rgba(20,17,24,.09)}
.st-card.is-tappable:focus-visible{outline:2px solid var(--holo-a);outline-offset:3px}
.st-go{margin-top:auto;padding-top:18px;font:600 11px var(--body);letter-spacing:.14em;
text-transform:uppercase;color:var(--holo-a);transition:transform .25s}
.st-card.is-tappable:hover .st-go{transform:translateX(3px)}
/* ===== css/57-vehicle-chips.css ===== */
/* VEHICLE CHIPS */
.veh-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:14px;
border-top:1px solid var(--hair)}
.veh-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);
background:var(--paper);border-radius:100px;padding:6px 12px;
font:500 12.5px var(--body);color:var(--ink);transition:.2s;white-space:nowrap}
.veh-chip:hover{border-color:#25D366;background:#fff;transform:translateY(-1px)}
.veh-chip i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--mute);
background:var(--paper-2);border-radius:100px;padding:1px 7px}
.veh-chip:hover i{color:var(--ink-soft)}
/* ===== css/58-fleet-grid.css ===== */
/* FLEET GRID */
.flt-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,24px);
grid-auto-rows:1fr;align-items:stretch}
@media (min-width:660px){.flt-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.flt-grid{grid-template-columns:repeat(4,1fr)}}
.flt-card{display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;
background:var(--paper);border:1px solid var(--hair);border-radius:20px;overflow:hidden;
transition:transform .3s,box-shadow .3s,border-color .3s}
.flt-card:hover{transform:translateY(-4px);border-color:var(--holo-a);
box-shadow:0 20px 46px rgba(20,17,24,.12)}
.flt-card:focus-visible{outline:2px solid var(--holo-a);outline-offset:3px}
.flt-ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.flt-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.65,.2,1)}
.flt-card:hover .flt-ph img{transform:scale(1.05)}
.flt-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.flt-count{font:600 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--holo-a)}
.flt-body b{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.25;color:var(--ink)}
.flt-blurb{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.flt-go{margin-top:auto;padding-top:14px;font:600 11px var(--body);letter-spacing:.14em;
text-transform:uppercase;color:var(--holo-a);transition:transform .25s}
.flt-card:hover .flt-go{transform:translateX(3px)}
.flv-list{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.flv-list{grid-template-columns:1fr 1fr}}
.flv-row{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;
border:1px solid var(--hair);border-radius:14px;transition:border-color .2s}
.flv-row:hover{border-color:var(--holo-a)}
.flv-name{font:600 15px var(--body);color:var(--ink);display:flex;flex-direction:column;gap:2px}
.flv-name i{font-style:normal;font-size:12px;font-weight:500;color:var(--mute)}
.flv-ask{margin-left:auto;flex:0 0 auto;background:#25D366;color:#fff;border-radius:100px;
padding:8px 16px;font:600 11px var(--body);letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.flv-ask:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* ===== css/59-fleet-drawings.css ===== */
/* FLEET DRAWINGS */
/* Drawn vehicles rather than stock photography: a picture of a temple where a
car should be is worse than no picture at all. */
.flt-art{display:grid;place-items:center;aspect-ratio:4/3;padding:22px;
background:linear-gradient(150deg,var(--paper-2),#fff)}
.flt-art svg{width:78%;max-width:210px;height:auto;fill:none;stroke:var(--ink-soft);
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
transition:transform .5s cubic-bezier(.2,.65,.2,1)}
.flt-art svg .g{fill:rgba(160,122,40,.14);stroke-width:1.1}
.flt-art svg .s{stroke:var(--holo-a);stroke-width:2}
/* An empty slot waiting for a photograph of the real vehicle - the line
drawing stands in until one is put there from the admin panel.
These need to outrank ".flt-ph img{display:block}" just above, or an
empty slot renders as a broken picture. */
.flt-ph .flt-photo{display:none}
.flt-ph .flt-photo[src]{display:block;position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;z-index:1}
.flt-ph:has(.flt-photo[src]) svg{display:none}
.flt-ph:has(.flt-photo[src]){padding:0}
.flt-card:hover .flt-art svg{transform:scale(1.05)}
.flt-lux{background:linear-gradient(150deg,#F3EAD6,#fff)}
.flt-lux svg{stroke:var(--holo-a)}
.flt-bus{background:linear-gradient(150deg,#E7EDEA,#fff)}
.flt-van{background:linear-gradient(150deg,#EAEAF0,#fff)}
/* ===== css/60-header-search.css ===== */
/* HEADER SEARCH */
/* the burger always sits last; on mobile the account tucks in before it */
.nav-right{display:flex;align-items:center}
.nav-right #navSave{order:7} /* after Build My Trip, before the avatar */
.nav-right #burger{order:9}
.nav-right #acctPick{order:8}
.nav-right .pill{order:7}
.nav-right #curPick{order:6}
.nav-right #navSearchBtn{order:5}
.nav-right #navCart{order:4} /* cart sits first, before search */
.nav-search-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);
background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);
transition:.2s;flex:0 0 auto}
.nav-search-btn svg{width:17px;height:17px}
.nav-search-btn:hover{border-color:var(--holo-a);color:var(--holo-a)}
.nav.solid .nav-search-btn,.site-nav.solid .nav-search-btn{color:var(--ink)}
.nsearch{position:fixed;inset:0;z-index:320;display:none}
.nsearch.open{display:block}
.nsearch-bd{position:absolute;inset:0;background:rgba(12,11,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.nsearch-card{position:relative;max-width:720px;margin:clamp(60px,10vh,120px) auto 0;
background:var(--paper);border:1px solid var(--hair);border-radius:20px;overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.35);max-height:78vh;display:flex;flex-direction:column}
.nsearch-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.nsearch-top svg{width:19px;height:19px;color:var(--mute);flex:0 0 auto}
.nsearch-top input{flex:1;border:none;background:none;outline:none;font:400 16.5px var(--body);color:var(--ink)}
.nsearch-top input::-webkit-search-cancel-button{display:none}
.nsearch-x{border:none;background:none;font-size:26px;line-height:1;color:var(--mute);cursor:pointer;
padding:0 4px;border-radius:8px}
.nsearch-x:hover{color:var(--ink)}
.nsearch-hint{margin:0;padding:12px 18px;font-size:12.5px;color:var(--mute);border-bottom:1px solid var(--hair)}
.nsearch-results{overflow-y:auto;padding:8px}
.ns-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;
border:none;background:none;cursor:pointer;border-radius:12px;transition:background .15s}
.ns-row:hover,.ns-row:focus-visible{background:var(--paper-2);outline:none}
.ns-row b{display:block;font:600 14.5px var(--body);color:var(--ink)}
.ns-row small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.ns-kind{margin-left:auto;flex:0 0 auto;font:600 9.5px var(--body);letter-spacing:.12em;
text-transform:uppercase;color:var(--holo-a);background:var(--paper-2);border-radius:100px;padding:3px 9px}
.ns-none{padding:22px 18px;color:var(--mute);font-size:14px}
@media (max-width:560px){
.nsearch-card{margin:0;max-width:none;height:100%;max-height:100%;border-radius:0;border:none}
.nsearch-top input{font-size:16px}
}
/* ===== css/61-nav-fit-mobile.css ===== */
/* NAV FIT MOBILE */
/* Four controls plus a burger is tight on a phone: shrink them rather than
dropping any, and hide the globe glyph which carries no information. */
@media (max-width:460px){
.nav-right{gap:6px}
.nav-search-btn{width:33px;height:33px}
.nav-search-btn svg{width:15px;height:15px}
.acct-btn{width:33px;height:33px}
.cur-btn{padding:6px 9px;font-size:11.5px}
.cur-btn svg:first-child{display:none}
}
@media (max-width:400px){
/* the wordmark and the side padding both give up width so every control fits.
.brand .logo-img is needed to beat the 640px rule's specificity. */
.brand .logo-img{height:36px}
#nav{padding-left:12px;padding-right:12px}
.nav-right{gap:5px}
.cur-btn{padding:5px 7px;font-size:11px}
.nav-search-btn,.acct-btn{width:31px;height:31px}
}
@media (max-width:370px){
.nav-right{gap:4px}
.cur-btn{padding:5px 6px;font-size:10.5px}
.brand .logo-img{height:33px}
}
@media (max-width:480px){
/* on phones the currency pill steps aside so the bar doesn't overflow —
currency still auto-detects from the visitor's location. */
.nav-right #curPick{display:none}
}
/* ===== css/62-account-password.css ===== */
/* ACCOUNT PASSWORD */
.acct-admin{width:100%;margin-bottom:8px;border:1px solid var(--holo-a);background:none;color:var(--holo-a);border-radius:10px;padding:10px;cursor:pointer;font:600 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase}
.acct-admin:hover{background:var(--holo-a);color:#fff}
.acct-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;
font:600 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.acct-or::before,.acct-or::after{content:"";flex:1;height:1px;background:var(--hair)}
.acct-form{display:flex;flex-direction:column;gap:8px}
.acct-form input,#acctCredEditor input{width:100%;padding:10px 12px;border:1px solid var(--hair);
border-radius:10px;background:#fff;font:400 14px var(--body);color:var(--ink);outline:none;-webkit-appearance:none}
.acct-form input:focus,#acctCredEditor input:focus{border-color:var(--holo-a);
box-shadow:0 0 0 3px rgba(160,122,40,.12)}
#acctCredEditor{display:flex;flex-direction:column;gap:8px}
.acct-primary{border:none;cursor:pointer;background:var(--ink);color:var(--paper);border-radius:10px;
padding:11px 16px;font:600 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;transition:.2s}
.acct-primary:hover{background:var(--holo-a)}
.acct-primary:disabled{opacity:.55;cursor:default}
.acct-msg{margin:2px 0 0;font-size:12.5px;line-height:1.5}
.acct-msg.err{color:#B4442F}
.acct-fix{margin-top:12px;padding:12px 14px;border:1px solid var(--holo-a);border-radius:12px;
background:rgba(160,122,40,.06);font-size:12.5px;line-height:1.6}
.acct-fix b{font-weight:700}
.acct-fix ol{margin:7px 0 8px;padding-left:19px}
.acct-fix li{margin:3px 0}
.acct-fix a{color:var(--holo-a);text-decoration:underline}
.acct-msg.ok{color:#1F7A3D}
@media (max-width:520px){.acct-form input,#acctCredEditor input{font-size:16px}}
/* ===== css/63-saved-packages.css ===== */
/* SAVED PACKAGES */
/* ---- the Saved button in the navigation ---- */
.nav-save{position:relative;width:40px;height:40px;flex:none;display:inline-flex;align-items:center;
justify-content:center;border:1px solid var(--hair);background:#fff;border-radius:50%;
color:var(--ink);cursor:pointer;transition:.25s}
.nav-save svg{width:19px;height:19px}
.nav-save:hover{border-color:var(--holo-a);color:var(--holo-a)}
.nav-save.has svg{fill:#D8455F;stroke:#D8455F}
.nav-save-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
border-radius:100px;background:#D8455F;color:#fff;font:700 10.5px var(--body);
display:flex;align-items:center;justify-content:center;letter-spacing:0}
.nav-save-n[hidden]{display:none}
/* ---- the heart on a package card ---- */
.pcard{position:relative}
.pk-like{position:absolute;top:10px;right:10px;z-index:5;width:34px;height:34px;border:none;
border-radius:50%;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;
box-shadow:0 3px 12px rgba(20,17,24,.18);transition:transform .18s,background .25s}
.pk-like svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.7;transition:.2s}
.pk-like:hover{transform:scale(1.09)}
.pk-like.on svg{fill:#D8455F;stroke:#D8455F}
.pk-like:focus-visible{outline:2px solid var(--holo-a);outline-offset:2px}
@keyframes pk-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.pk-like.pop{animation:pk-pop .32s ease}
/* ---- the page ---- */
#cat-allpackages .ap-wrap{max-width:1320px;margin:0 auto;
padding:clamp(90px,12vh,140px) clamp(20px,5vw,72px) 80px}
.ap-head{margin-bottom:26px}
.ap-head h1{font-family:var(--display);font-weight:300;font-size:clamp(32px,5vw,58px);
line-height:1.08;letter-spacing:-.02em;margin-top:8px}
.ap-sub{color:var(--ink-soft);font-size:14.5px;margin-top:10px}
.ap-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--hair);padding-bottom:14px}
.ap-tab{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:10px 20px;
cursor:pointer;font:600 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-soft);transition:.22s;display:inline-flex;align-items:center;gap:8px}
.ap-tab:hover{border-color:var(--ink);color:var(--ink)}
.ap-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ap-tab-n{background:rgba(20,17,24,.1);border-radius:100px;padding:1px 7px;font-size:10.5px;letter-spacing:0}
.ap-tab.on .ap-tab-n{background:rgba(255,255,255,.22)}
.ap-filters{margin-bottom:24px}
.ap-search{position:relative;max-width:520px}
.ap-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
width:18px;height:18px;color:var(--mute);pointer-events:none}
.ap-search input{width:100%;padding:14px 18px 14px 46px;border:1px solid var(--hair);
border-radius:100px;background:#fff;font:400 15px var(--body);color:var(--ink);outline:none}
.ap-search input:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.ap-search input::-webkit-search-cancel-button{display:none}
.ap-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.ap-chip{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:9px 17px;
cursor:pointer;font:500 13px var(--body);color:var(--ink-soft);transition:.2s}
/* a heading above each part of the site the results came from */
.ap-group{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;
margin:26px 0 -4px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.ap-group:first-child{margin-top:4px}
.ap-group b{font:600 11.5px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.ap-group span{font-size:12.5px;color:var(--mute)}
.ap-chip:hover{border-color:var(--ink);color:var(--ink)}
.ap-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* country + trip-length dropdown filters */
.ap-selects{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.ap-sel{display:flex;flex-direction:column;gap:6px}
.ap-sel>span{font:600 10.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ap-sel select{appearance:none;-webkit-appearance:none;border:1px solid var(--hair);
background:#fff url("data:image/svg+xml;utf8,") no-repeat right 15px center;
border-radius:100px;padding:11px 40px 11px 18px;font:500 13.5px var(--body);color:var(--ink);
cursor:pointer;outline:none;min-width:172px}
.ap-sel select:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.ap-clear{margin-top:14px;border:none;background:none;padding:0;cursor:pointer;
font:600 12px var(--body);color:var(--holo-a);text-decoration:underline;letter-spacing:.04em}
.ap-clear[hidden]{display:none}
.ap-grid{margin-top:6px}
.ap-none{margin:40px 0;font-size:15px;color:var(--ink-soft);line-height:1.7}
.ap-none b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);
font-weight:400;margin-bottom:6px}
.ap-more-wrap{display:flex;justify-content:center;margin-top:36px}
.ap-more{border:1px solid var(--ink);background:none;color:var(--ink);border-radius:100px;
padding:13px 34px;cursor:pointer;font:600 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase}
.ap-more:hover{background:var(--ink);color:var(--paper)}
.ap-more[hidden]{display:none}
@media (max-width:820px){
#cat-allpackages .ap-wrap{padding-top:clamp(84px,14vh,110px)}
.ap-tabs{overflow-x:auto;scrollbar-width:none}
.ap-tabs::-webkit-scrollbar{display:none}
.ap-search input{font-size:16px}
}
/* ===== css/64-site-admin.css ===== */
/* SITE ADMIN */
.adm{position:fixed;inset:0;z-index:340;display:block}
.adm[hidden]{display:none}
.adm-bd{position:absolute;inset:0;background:rgba(12,11,16,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.adm-card{position:relative;max-width:620px;margin:clamp(40px,7vh,90px) auto 0;background:var(--paper);
border:1px solid var(--hair);border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);
max-height:82vh;display:flex;flex-direction:column}
.adm-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.adm-head b{display:block;font-family:var(--display);font-weight:500;font-size:18px}
.adm-head small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.adm-x{margin-left:auto;border:none;background:none;font-size:26px;line-height:1;color:var(--mute);cursor:pointer}
.adm-x:hover{color:var(--ink)}
.adm-tabs{display:flex;gap:6px;padding:12px 18px 0}
.adm-tab{border:1px solid var(--hair);background:#fff;border-radius:100px;padding:8px 15px;cursor:pointer;
font:600 11.5px var(--body);color:var(--ink-soft)}
.adm-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.adm-body{padding:16px 18px 20px;overflow-y:auto}
.adm-pane{display:none}.adm-pane.on{display:block}
.adm-note{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px}
.adm-switch{display:inline-flex;align-items:center;gap:9px;font:600 13px var(--body);cursor:pointer}
.adm-switch input{width:18px;height:18px;accent-color:var(--holo-a)}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adm-f{display:flex;flex-direction:column;gap:5px}
.adm-f.adm-wide{grid-column:1/-1}
.adm-f > span{font:600 10px var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.adm-f > span em{font-style:normal;color:var(--mute)}
.adm-f input,.adm-f select{width:100%;padding:10px 12px;border:1px solid var(--hair);border-radius:10px;
background:#fff;font:400 14px var(--body);color:var(--ink);outline:none}
.adm-f input:focus,.adm-f select:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.adm-go{margin-top:14px;border:none;cursor:pointer;background:var(--ink);color:var(--paper);border-radius:100px;
padding:12px 26px;font:600 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase}
.adm-go:hover{background:var(--holo-a)}
.adm-go:disabled{opacity:.55;cursor:default}
/* an added package with no picture yet: the slot is there, waiting */
.pk-photo{display:none}
.pk-photo[src]{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .ph:has(.pk-photo[src]) .ph-blank{display:none}
.adm-rule{border:none;border-top:1px solid var(--hair);margin:18px 0 14px}
.adm-ghost{background:none;border:1px solid var(--ink);color:var(--ink)}
.adm-ghost:hover{background:var(--ink);color:var(--paper)}
.adm-check{margin-top:14px;font-size:13px;line-height:1.6}
.adm-check .row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--hair)}
.adm-check .row:last-child{border-bottom:none}
.adm-check .tick{flex:none;width:17px;text-align:center;font-weight:700}
.adm-check .yes{color:#1F7A3D}.adm-check .no{color:#B4442F}.adm-check .wait{color:var(--mute)}
.adm-check .fix{display:block;color:var(--ink-soft);margin-top:3px}
.adm-fixbox{margin-top:16px;padding:14px 16px;border:1px solid var(--holo-a);border-radius:12px;
background:rgba(160,122,40,.06);font-size:13px;line-height:1.6}
.adm-fixbox b{font-weight:700}
.adm-fixbox ol{margin:8px 0 12px;padding-left:20px}
.adm-fixbox li{margin:4px 0}
.adm-fixbox a{color:var(--holo-a);text-decoration:underline}
.adm-copied{margin-left:10px;font:600 11px var(--body);color:#1F7A3D;letter-spacing:.1em;text-transform:uppercase}
.adm-msg{margin:12px 0 0;font-size:13px}
.adm-msg.ok{color:#1F7A3D}.adm-msg.err{color:#B4442F}
.adm-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--hair);
border-radius:10px;margin-bottom:8px;font-size:13px;background:#fff}
.adm-row b{font-weight:600}
.adm-undo{margin-left:auto;border:1px solid var(--hair);background:none;border-radius:100px;
padding:5px 12px;font:600 10.5px var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.adm-undo:hover{border-color:#B4442F;color:#B4442F}
/* the page behind the panel must not scroll away under it */
html.adm-open,body.adm-open{overflow:hidden}
/* edit mode on the live site */
/* Every editable picture gets its own button while edit mode is on.
Relying on a tap landing on the picture itself was never going to work:
the hero sits behind the headline, the category and journey tiles wear a
tinted veil, the feature cards put their title over the photograph. A tap
reached the thing on top and edit mode looked broken. The button is
unambiguous - it cannot be covered and it cannot hijack anything else. */
#admMarks{position:fixed;inset:0;z-index:335;pointer-events:none}
.adm-mark{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:6px;
border:none;border-radius:100px;padding:7px 12px 7px 9px;cursor:pointer;
background:var(--ink);color:var(--paper);box-shadow:0 6px 18px rgba(0,0,0,.35);
font:600 10.5px var(--body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.adm-mark:hover,.adm-mark:focus-visible{background:var(--holo-a);outline:none}
.adm-mark svg{width:14px;height:14px;flex:none}
.adm-mark.tiny{padding:7px;gap:0}
.adm-mark.tiny span{display:none}
/* images only - the search filter chips use data-k for something else */
body.adm-editing img[data-k]{outline:2px dashed rgba(160,122,40,.8);outline-offset:2px;cursor:pointer}
body.adm-editing img[data-k]:hover{outline-color:#25D366;outline-style:solid}
/* the panels, and the temporary search copies, stay as they are */
body.adm-editing #admPanel img[data-k],
body.adm-editing #acctPick img[data-k],
body.adm-editing [data-clone] img[data-k]{outline:none;cursor:auto}
body.adm-editing [data-clone] .adm-del{display:none}
body.adm-editing .pcard{position:relative}
.adm-del{position:absolute;top:8px;left:8px;z-index:4;width:26px;height:26px;border-radius:50%;
border:none;background:#B4442F;color:#fff;font-size:15px;line-height:1;cursor:pointer;display:none}
body.adm-editing .adm-del{display:block}
/* Two separate things. The hint bar sits there for as long as edit mode
is on. The toast is shown and hidden from script and must not be pinned
open by a CSS rule, which is what used to keep the last message stuck
on screen for the whole session. */
.adm-hint,.adm-flag{position:fixed;left:50%;transform:translateX(-50%);
background:var(--ink);color:var(--paper);border-radius:100px;padding:10px 20px;
font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;display:none;
max-width:88vw;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.adm-hint{bottom:18px;z-index:330;text-transform:none;letter-spacing:.04em;font-weight:500}
.adm-hint b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
body.adm-editing .adm-hint{display:block}
body.adm-open .adm-hint{display:none}
.adm-flag{bottom:66px;z-index:400;background:var(--holo-a)}
@media (max-width:560px){
.adm-card{margin:0;max-width:none;height:100%;max-height:100%;border-radius:0}
.adm-grid{grid-template-columns:1fr}
.adm-f input,.adm-f select{font-size:16px}
}
/* ===== css/65-vehicle-cards.css ===== */
/* VEHICLE CARDS */
.veh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:clamp(12px,1.8vw,18px);margin:6px 0 4px}
.veh-card{display:flex;flex-direction:column;padding:0;cursor:pointer;text-align:left;
background:#fff;border:1px solid var(--hair);border-radius:16px;overflow:hidden;
transition:transform .28s,box-shadow .28s,border-color .28s}
.veh-card:hover{transform:translateY(-3px);border-color:var(--holo-a);
box-shadow:0 14px 34px rgba(20,17,24,.11)}
.veh-card:focus-visible{outline:2px solid var(--holo-a);outline-offset:3px}
.veh-ph{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;
background:linear-gradient(150deg,var(--paper-2),#fff);padding:16px}
.veh-ph svg{width:80%;max-width:170px;height:auto;fill:none;stroke:var(--ink-soft);
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.veh-ph svg .g{fill:rgba(160,122,40,.14);stroke-width:1.1}
.veh-ph svg .s{stroke:var(--holo-a);stroke-width:2}
.veh-lux svg{stroke:var(--holo-a)}
.veh-photo{display:none}
.veh-photo[src]{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}
.veh-ph:has(.veh-photo[src]) svg{display:none}
.veh-ph:has(.veh-photo[src]){padding:0}
.veh-info{padding:13px 15px 15px}
.veh-info b{display:block;font:600 14.5px var(--body);color:var(--ink);line-height:1.3}
.veh-info small{display:block;font-size:12px;color:var(--mute);margin-top:3px}
.vsheet{position:fixed;inset:0;z-index:330}
.vsheet[hidden]{display:none}
.vsheet-bd{position:absolute;inset:0;background:rgba(12,11,16,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.vsheet-card{position:relative;max-width:460px;margin:clamp(50px,9vh,110px) auto 0;background:var(--paper);
border:1px solid var(--hair);border-radius:20px;padding:clamp(22px,3vw,30px);
box-shadow:0 30px 80px rgba(0,0,0,.4);max-height:80vh;overflow-y:auto}
.vsheet-x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:26px;line-height:1;
color:var(--mute);cursor:pointer}
.vsheet-x:hover{color:var(--ink)}
.vsheet-ph{display:grid;place-items:center;height:120px;margin-bottom:14px;border-radius:14px;
background:linear-gradient(150deg,var(--paper-2),#fff);overflow:hidden}
.vsheet-ph svg{width:60%;max-width:190px;fill:none;stroke:var(--ink-soft);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.vsheet-ph svg .g{fill:rgba(160,122,40,.14);stroke-width:1.1}
.vsheet-ph img{width:100%;height:100%;object-fit:cover}
.vsheet-card h3{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 2px}
.vsheet-sub{font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.vsheet-rates{margin:0 0 14px;display:grid;grid-template-columns:1fr auto;gap:0}
.vsheet-rates dt{padding:9px 0;font-size:13.5px;color:var(--ink-soft);border-bottom:1px solid var(--hair)}
.vsheet-rates dd{padding:9px 0;margin:0;font:600 14px var(--body);color:var(--ink);text-align:right;
border-bottom:1px solid var(--hair)}
.vsheet-note{font-size:12px;color:var(--mute);line-height:1.6;margin:0 0 16px}
.vsheet-cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){
.vsheet-card{margin:0;max-width:none;min-height:100%;border-radius:0}
.veh-grid{grid-template-columns:1fr 1fr}
}
/* ------------------------------------------------------------------
The hidden attribute has to actually hide things.
Several controls here are shown and hidden from script with
element.hidden = true/false, but their own CSS sets a display value -
.acct-google is display:flex, #acctCredEditor is display:flex, .pill is
display:inline-flex - and a class rule beats the browser's built-in
[hidden] rule. So they stayed on screen no matter what the script said:
two Google buttons at once, the "choose a username" form still sitting
under the username you had already chosen, and the Send on WhatsApp
button showing on every step of the trip builder instead of the last.
One rule fixes all of them, and anything added later. */
[hidden]{display:none!important}
/* ---- suggestions under Tour Place ----
The list is put on and positioned by hand rather than sitting
inside the field. It has to be: .hero is overflow:hidden, and the search
bar sits near the bottom of it, so a dropdown in the normal flow would be
sliced off at the fold. Fixed to the window, it cannot be clipped by
anything, and it flips above the field when there is more room up there. */
.sbq-list{
/* above the floating assistant (200), WhatsApp and the callback tab (205),
which otherwise print themselves over the middle of the list on a phone;
below the back buttons on the full-page overlays (260). */
position:fixed;z-index:210;max-height:min(46vh,330px);overflow-y:auto;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
background:#fff;border:1px solid var(--hair);border-radius:14px;
box-shadow:0 18px 50px rgba(20,17,24,.18);padding:6px;
}
.sbq-list[hidden]{display:none}
.sbq-opt{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
width:100%;text-align:left;border:none;background:none;padding:9px 11px;
border-radius:9px;cursor:pointer;font:400 15px/1.35 var(--body);color:var(--ink);
}
.sbq-opt small{color:var(--mute);font-size:12.5px;white-space:nowrap;flex-shrink:0}
.sbq-opt:hover,.sbq-opt.on{background:var(--paper-2)}
.sbq-opt b{font-weight:600}
.sbq-head{margin:6px 10px 4px;font:600 11px/1 var(--body);letter-spacing:.12em;
text-transform:uppercase;color:var(--mute)}
.sbq-none{margin:0;padding:12px 11px;color:var(--mute);font:400 14px/1.4 var(--body)}
/* ==================================================================
iPhone and iPad — things Safari needs that no other browser does.
Last stylesheet on the page on purpose, so these win any tie.
================================================================== */
/* 1. THE ZOOM. iOS Safari zooms the whole page in whenever you tap a
text field whose type is smaller than 16px, and it does not zoom
back out afterwards. Every field on this site was between 13 and
15px, so tapping any of them - the search, the trip builder, the
enquiry forms - left the site zoomed in and running off the side
of the screen, with no obvious way back. It reads exactly like a
broken website.
16px on touch screens is the only cure; Safari has no opt-out
that does not also stop people pinch-zooming, which would be
worse. Desktop keeps the smaller, tidier type. */
@media (max-width:1024px),(hover:none) and (pointer:coarse){
input,select,textarea,
input[type=text],input[type=tel],input[type=email],input[type=date],
input[type=number],input[type=search],input[type=password]{
font-size:16px!important;
}
/* the fields grow a little at 16px, so give them room to breathe */
.tp-f select,.tp-f input,.tp-f textarea{padding:12px 13px}
}
/* 2. iOS inflates text on its own when you turn the phone sideways.
This keeps the sizes we chose. */
html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
/* 3. Safari flashes a grey box over anything you tap. Ours already
have their own pressed states. */
a,button,summary,[role=button],.pcard,.cat,.pill{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/* 4. Scrolling to the end of a panel used to drag the page behind it
as well, and on iOS could pull the whole site down off screen. */
.itin-page,.cat-page,.bot-panel,.acct-panel,.cur-panel,.tp,.nav-menu{
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
/* 5. Held sideways, a notched iPhone puts a black bar down one edge and
the page can run underneath it. viewport-fit=cover in the head turns
these values on.
Two things this rule has to get right, because the first version of
it got both wrong and pushed the whole desktop layout to the edges:
- max(), not a plain value. Writing padding-left:env(...) REPLACES
the padding the element already had; on any screen with no notch
that resolves to 0 and the gutter disappears. max() can only ever
widen it.
- touch screens only. "landscape" is true of every desktop monitor
on earth, so an orientation query on its own is not a phone
query. This one cannot match a desktop at all. */
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
.wrap{
padding-left:max(20px,env(safe-area-inset-left,0px));
padding-right:max(20px,env(safe-area-inset-right,0px));
}
#nav{
padding-left:max(12px,env(safe-area-inset-left,0px));
padding-right:max(12px,env(safe-area-inset-right,0px));
}
}
/* 5b. Two floating things were landing on top of the buttons they were
meant to sit beside, which on a phone reads as a site that does not
work at all.
The assistant's teaser bubble is 270px wide and anchored 84px from
the right edge. On a 390px screen that is most of the width, and it
came to rest directly over the SEARCH button on the home page and
over CONTINUE in the trip builder - the two buttons a visitor needs
first. The robot itself stays, so the assistant is still one tap
away; only the bubble that covers things goes.
The callback tab is fixed to the left edge at half height. On the
wide screen it sits in the margin; on a phone there is no margin and
it printed itself over the text of whatever page you opened. It
stays on the home page, where it works, and steps aside while you
are reading something. */
@media (max-width:820px){
.bot-teaser{display:none!important}
body.tp-open .cb-tab{display:none!important}
}
/* 5c. A place tile already has a colour block painted underneath its
photograph, and that block is the fallback. The site's usual
treatment for a picture that never arrived paints a pale panel
instead - which here would cover the colour and leave white type on
cream. Inside these tiles the missing picture just gets out of the
way. */
.dest-tile img.img-missing{background:transparent}
/* 6. Momentum scrolling inside a fixed overlay only behaves on iOS
when the overlay is its own scroll container, which these are;
this just stops the rubber-band showing the page underneath. */
html.no-scroll,body.no-scroll{overscroll-behavior:none}
/* ===== css/66-car-rental-routes.css ===== */
/* CAR RENTAL ROUTES */
.crr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--paper-2);border:1px solid rgba(20,17,24,.08);border-radius:22px;padding:30px 34px;margin:-24px 0 8px}.crr h4{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:0 0 8px;color:var(--ink)}.crr p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:none}.crr-links{display:flex;flex-wrap:wrap;gap:8px}.crr-links a{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(20,17,24,.12);border-radius:100px;padding:8px 14px;font:500 13.5px var(--body);color:var(--ink);text-decoration:none}.crr-links a small{color:var(--mute);font-size:11.5px}.crr-links a:hover{border-color:var(--holo-a);color:var(--holo-a)}.crr-links a.all{background:var(--ink);color:var(--paper);border-color:var(--ink)}.crr-links a.all:hover{color:var(--holo-c)}@media (max-width:760px){.crr{grid-template-columns:1fr;padding:24px 20px;gap:18px}}
/* ===== css/67-footer-seo-links.css ===== */
/* FOOTER SEO LINKS */
.f-seo{border-top:1px solid var(--hair);margin-top:30px;padding-top:26px}
.f-seo h3,.f-seo h5{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 18px}
.f-seo .grp{margin-top:20px}
.f-seo .grp:first-of-type{margin-top:0}
.f-seo .lbl{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 11px}
.f-seo a{display:inline-block;font-size:14px;color:var(--ink-soft);text-decoration:none;padding:7px 15px;margin:0 8px 9px 0;border:1px solid var(--hair);border-radius:100px;transition:color .3s,border-color .3s}
.f-seo a:hover{color:var(--holo-a);border-color:var(--holo-a)}
/* ===== css/68-payments.css ===== */
/* PAYMENTS */
.pay-ov{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
background:rgba(20,17,24,.55);backdrop-filter:blur(4px);padding:20px;overflow-y:auto}
.pay-ov.open{display:flex}
.pay-card{background:var(--paper);width:100%;max-width:460px;border-radius:20px;
border:1px solid var(--hair);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
padding:26px 26px 22px;position:relative;font-family:var(--body);color:var(--ink);
animation:payIn .3s ease}
@keyframes payIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pay-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
border:1px solid var(--hair);background:transparent;cursor:pointer;font:400 21px/1 var(--body);
color:var(--ink-soft);display:grid;place-items:center;transition:.2s}
.pay-x:hover{background:#fff;color:var(--ink)}
.pay-badge{display:inline-flex;align-items:center;gap:7px;font:600 10.5px var(--body);
letter-spacing:.12em;text-transform:uppercase;color:var(--holo-a);
background:rgba(160,122,40,.1);border:1px solid rgba(160,122,40,.22);
padding:5px 11px;border-radius:100px;margin-bottom:12px}
.pay-badge svg{width:13px;height:13px}
.pay-card h2{font:600 22px/1.2 var(--body);margin:0 0 5px}
.pay-sub{font:400 13.5px/1.5 var(--body);color:var(--ink-soft);margin:0 0 18px}
.pay-f{display:block;margin-bottom:13px}
.pay-f span{display:block;font:600 12px var(--body);color:var(--ink-soft);margin-bottom:6px}
.pay-f input{width:100%;box-sizing:border-box;border:1px solid var(--hair);border-radius:11px;
padding:12px 13px;font:500 14.5px var(--body);color:var(--ink);background:#fff;outline:none;transition:.2s}
.pay-f input:focus{border-color:var(--holo-b);box-shadow:0 0 0 3px rgba(199,159,76,.15)}
.pay-amount-wrap{position:relative}
.pay-amount-wrap .pay-cc{position:absolute;left:13px;top:50%;transform:translateY(-50%);
font:600 13px var(--body);color:var(--mute);pointer-events:none}
.pay-amount-wrap input{padding-left:52px}
.pay-seg{display:flex;gap:8px;margin:2px 0 16px}
.pay-seg button{flex:1;border:1px solid var(--hair);background:#fff;border-radius:12px;
padding:11px 8px;cursor:pointer;font:600 13px var(--body);color:var(--ink-soft);
transition:.2s;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.pay-seg button small{font:500 11px var(--body);color:var(--mute)}
.pay-seg button.on{border-color:var(--holo-a);background:rgba(160,122,40,.07);color:var(--ink)}
.pay-seg button.on small{color:var(--holo-a)}
.pay-total-line{display:flex;justify-content:space-between;align-items:baseline;
padding:14px 15px;border-radius:13px;background:rgba(20,17,24,.04);margin-bottom:16px}
.pay-total-line span{font:500 13px var(--body);color:var(--ink-soft)}
.pay-total-line b{font:700 21px var(--body);color:var(--ink)}
.pay-go{width:100%;border:none;cursor:pointer;border-radius:100px;padding:15px;
font:600 15.5px var(--body);color:#fff;
background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 60%,var(--holo-c));
transition:.25s;display:flex;align-items:center;justify-content:center;gap:9px}
.pay-go:hover{filter:brightness(1.05);transform:translateY(-1px)}
.pay-go[disabled]{opacity:.6;cursor:default;transform:none;filter:none}
.pay-note{font:400 11.5px/1.5 var(--body);color:var(--mute);text-align:center;margin:12px 0 0}
.pay-secure{display:flex;align-items:center;justify-content:center;gap:6px;
font:500 11.5px var(--body);color:var(--ink-soft);margin-top:11px}
.pay-secure svg{width:13px;height:13px;color:var(--holo-a)}
.pay-msg{font:500 13px/1.5 var(--body);border-radius:11px;padding:11px 13px;margin-bottom:14px;display:none}
.pay-msg.err{display:block;background:#fdecec;color:#a23b3b;border:1px solid #f3c7c7}
.pay-msg.ok{display:block;background:#eaf6ee;color:#26714a;border:1px solid #bfe3cd}
.pay-done{text-align:center;padding:8px 0 4px}
.pay-done .pay-tick{width:62px;height:62px;border-radius:50%;background:rgba(38,113,74,.1);
display:grid;place-items:center;margin:0 auto 16px}
.pay-done .pay-tick svg{width:30px;height:30px;color:#26714a}
.pay-done h2{margin-bottom:6px}
.pay-done .pay-ref{font:500 12.5px var(--body);color:var(--ink-soft);
background:rgba(20,17,24,.04);border-radius:9px;padding:9px 12px;margin:14px 0 4px;word-break:break-all}
@media (max-width:520px){.pay-card{padding:22px 18px 18px;border-radius:16px}}
/* ===== css/69-cart.css ===== */
/* CART */
.nav-cart.has svg{stroke:var(--holo-a)}
.nav-cart-n{background:var(--holo-a)}
/* the "Add to cart" button that sits on each package card, left of the heart */
.pk-cart{position:absolute;top:10px;right:52px;z-index:5;width:34px;height:34px;border:none;
border-radius:50%;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
box-shadow:0 3px 12px rgba(20,17,24,.18);transition:transform .18s,background .25s}
.pk-cart svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.7;transition:.2s}
.pk-cart:hover{transform:scale(1.09)}
.pk-cart.on{background:var(--holo-a)}
.pk-cart.on svg{stroke:#fff}
.pk-cart.on .c-plus{display:none}
.pk-cart .c-tick{display:none}
.pk-cart.on .c-tick{display:block}
.pk-cart:focus-visible{outline:2px solid var(--holo-a);outline-offset:2px}
.pk-cart.pop{animation:pk-pop .32s ease}
/* right-hand drawer */
.cart-ov{position:fixed;inset:0;z-index:410;display:none;background:rgba(20,17,24,.5);
backdrop-filter:blur(3px)}
.cart-ov.open{display:block}
.cart-drawer{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);
background:var(--paper);box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);display:flex;flex-direction:column;
font-family:var(--body);color:var(--ink);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.cart-ov.open .cart-drawer{transform:none}
.cart-head{display:flex;align-items:center;gap:10px;padding:20px 22px 16px;border-bottom:1px solid var(--hair)}
.cart-head h2{font:600 19px var(--body);margin:0}
.cart-head .cart-n{font:600 12px var(--body);color:var(--holo-a);background:rgba(160,122,40,.1);
border:1px solid rgba(160,122,40,.22);border-radius:100px;padding:2px 9px}
.cart-x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);
background:transparent;cursor:pointer;font:400 21px/1 var(--body);color:var(--ink-soft);display:grid;place-items:center;transition:.2s}
.cart-x:hover{background:#fff;color:var(--ink)}
.cart-body{flex:1;overflow-y:auto;padding:14px 22px}
.cart-item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--hair)}
.cart-item-main{flex:1;min-width:0}
.cart-item h4{font:600 14.5px/1.35 var(--body);margin:0 0 3px;color:var(--ink)}
.cart-item .cart-days{font:500 12px var(--body);color:var(--mute)}
.cart-rm{border:none;background:none;cursor:pointer;color:var(--mute);font:400 20px/1 var(--body);
padding:2px 4px;border-radius:7px;transition:.2s;flex-shrink:0}
.cart-rm:hover{color:#a23b3b;background:#fdecec}
.cart-empty{text-align:center;padding:48px 16px;color:var(--ink-soft)}
.cart-empty svg{width:46px;height:46px;stroke:var(--mute);fill:none;stroke-width:1.4;margin-bottom:14px}
.cart-empty b{display:block;font:600 16px var(--body);color:var(--ink);margin-bottom:6px}
.cart-empty p{font:400 13.5px/1.6 var(--body);margin:0 0 14px}
.cart-empty a{color:var(--holo-a);font-weight:600;cursor:pointer;text-decoration:underline}
.cart-foot{border-top:1px solid var(--hair);padding:16px 22px 20px;background:#fff}
.cart-foot .cart-hint{font:400 12px/1.5 var(--body);color:var(--ink-soft);margin:0 0 12px}
.cart-pay{width:100%;border:none;cursor:pointer;border-radius:100px;padding:15px;
font:600 15px var(--body);color:#fff;
background:linear-gradient(110deg,var(--holo-a),var(--holo-b) 60%,var(--holo-c));
transition:.25s;display:flex;align-items:center;justify-content:center;gap:9px}
.cart-pay:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cart-clear{display:block;width:100%;text-align:center;margin-top:10px;background:none;border:none;
cursor:pointer;font:500 12.5px var(--body);color:var(--mute);text-decoration:underline}
.cart-clear:hover{color:var(--ink-soft)}
/* little toast */
.cart-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:#fff;font:600 13px var(--body);padding:11px 18px;border-radius:100px;
box-shadow:0 12px 30px -8px rgba(0,0,0,.4);z-index:420;opacity:0;pointer-events:none;transition:.28s;
display:flex;align-items:center;gap:8px}
.cart-toast.show{opacity:1;transform:translateX(-50%)}
.cart-toast svg{width:15px;height:15px;stroke:var(--holo-c);fill:none;stroke-width:2.2}
@media (max-width:520px){.cart-drawer{width:100%}}
/* ===== css/70-overnight-stays.css ===== */
/* OVERNIGHT STAYS */
/* ---- Where you'll stay: overnight town per day + a stop-by-stop summary ---- */
.ip-stays{margin:52px 0 0}
.ip-stays[hidden]{display:none}
.stay-route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;counter-reset:stop}
.stay-stop{position:relative;background:#fff;border:1px solid var(--hair);border-radius:16px;padding:18px 18px 16px;counter-increment:stop;
display:flex;flex-direction:column;gap:6px;min-width:0}
.stay-stop::before{content:counter(stop,decimal-leading-zero);font:600 10px var(--body);letter-spacing:.18em;color:var(--mute)}
.stay-stop b{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.stay-stop .sn{font:600 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--holo-a,#a07a28)}
.stay-stop .sd{font-size:12.5px;color:var(--mute)}
.stay-stop.is-special{background:#fbf6ea;border-color:rgba(160,122,40,.35)}
.stay-foot{margin:16px 0 0;font-size:13px;color:var(--mute);line-height:1.6}
.stay-note{margin:0;padding:18px 20px;border:1px dashed var(--hair);border-radius:14px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.itin-stay{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.4}
.itin-stay svg{width:15px;height:15px;flex:0 0 auto;color:var(--holo-a,#a07a28)}
.itin-stay em{font-style:normal;font:600 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.itin-stay strong{font-weight:600;color:var(--ink)}
.itin-stay.is-end strong{font-weight:500;color:var(--mute)}
.ip-day-inner .itin-stay{margin-top:10px}
@media (max-width:640px){
.stay-route{grid-template-columns:1fr;gap:0;border:1px solid var(--hair);border-radius:16px;background:#fff;overflow:hidden}
.stay-stop{border:none;border-radius:0;border-top:1px solid var(--hair);display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;column-gap:10px;row-gap:2px;padding:14px 16px}
.stay-stop:first-child{border-top:none}
.stay-stop::before{grid-row:1/3}
.stay-stop b{font-size:17px}
.stay-stop .sn{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}
.stay-stop .sd{grid-column:2/4}
}
/* ===== css/71-hub-filter.css ===== */
/* HUB FILTER BAR - Inbound / Outbound (and shared by the page filter bar) */
.hub-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 10px}
.hub-filters{display:flex;align-items:center;gap:10px;flex:1 1 560px;min-width:0;flex-wrap:wrap}
.hub-filters>.hf-title{font:600 10.5px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 4px 0 0;display:flex;align-items:center;gap:7px}
.hub-filters>.hf-title svg{width:15px;height:15px}
.hub-fg{flex:1 1 130px;min-width:0;max-width:200px;position:relative}
.hub-fg select{appearance:none;-webkit-appearance:none;width:100%;height:46px;border:1px solid var(--hair);background:#fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;border-radius:100px;padding:0 34px 0 16px;font:500 13.5px var(--body);color:var(--ink);cursor:pointer;outline:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.hub-fg select:focus{border-color:var(--holo-a);box-shadow:0 0 0 3px rgba(160,122,40,.12)}
.hub-fg select.on{border-color:var(--holo-a,#a07a28);background-color:#fbf6ea}
.hub-fg select:disabled{opacity:.55;cursor:not-allowed}
.hub-clear{border:none;background:none;padding:0 2px;cursor:pointer;white-space:nowrap;font:600 12.5px var(--body);color:var(--holo-a,#a07a28);text-decoration:underline;text-underline-offset:3px}
.hub-clear[hidden]{display:none}
.hub-bar .pop-search{flex:0 1 330px;width:auto;margin-left:auto}
.hub-bar .pop-find{height:46px;padding-top:0;padding-bottom:0}
@media (max-width:1080px){.hub-filters{flex-basis:100%}.hub-fg{max-width:none}.hub-bar .pop-search{flex:1 1 100%;margin-left:0}}
@media (max-width:640px){.hub-filters{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hub-filters>.hf-title{grid-column:1/-1}.hub-clear{grid-column:1/-1;justify-self:start}.hub-fg select{font-size:14px;height:44px}}
/* ===== css/72-page-filter.css ===== */
/* PAGE FILTER BAR - every other package listing page */
.cat-page .pf-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 40px}
.cat-page .pf-bar .hub-filters{flex:1 1 520px}
.cat-page .pf-bar .cat-find{position:relative;flex:0 1 360px;margin:0 0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.cat-page .pf-bar .cat-find-in{flex:1 1 200px;min-width:0;max-width:none;height:46px;padding:0 18px;border-radius:100px}
.cat-page .pf-bar .cat-find-count{position:absolute;left:18px;top:100%;margin-top:7px;white-space:nowrap}
.pcard.flt-hide{display:none}
@media (max-width:1080px){.cat-page .pf-bar .cat-find{flex:1 1 100%;margin:0}}
/* ===== css/73-package-share.css ===== */
/* PACKAGE SHARE - button and "link copied" toast */
.pk-share{cursor:pointer}
.pk-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:#141118;color:#FDFBF7;padding:12px 22px;border-radius:100px;font:500 13px/1 system-ui,-apple-system,sans-serif;z-index:100000;opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.pk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ===== css/74-action-rail.css ===== */
/* ACTION RAIL - Save / Cart / Account pinned on the right of inner pages */
.fab-rail{position:fixed;right:clamp(12px,2vw,22px);top:50%;transform:translateY(-50%);z-index:270;display:flex;flex-direction:column;gap:12px}
.fab-btn{position:relative;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair,rgba(20,17,24,.1));box-shadow:0 6px 22px rgba(20,17,24,.16);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink,#141118);transition:transform .2s ease,box-shadow .2s ease}
.fab-btn:hover{transform:translateY(-2px);box-shadow:0 11px 28px rgba(20,17,24,.22)}
.fab-btn svg{width:22px;height:22px;display:block}
.fab-btn.pop{animation:fabpop .4s ease}
@keyframes fabpop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.fab-n{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:100px;background:var(--holo-a,#a07a28);color:#fff;font:600 10px/18px var(--body,sans-serif);text-align:center}
.fab-n[hidden]{display:none}
@media (max-width:560px){.fab-rail{right:10px;gap:10px}.fab-btn{width:44px;height:44px}.fab-btn svg{width:20px;height:20px}}
.fab-rail{display:none}
html.fab-on .fab-rail{display:flex}
@media print{.fab-rail{display:none}}
nav.fab-lift{z-index:300 !important}
/* ===== css/75-detail-actions.css ===== */
/* PACKAGE PAGE ACTIONS - Save / Add to cart beside the title */
.pk-det{display:inline-flex;align-items:center;gap:8px}
.pk-det svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
.pk-det-save.on{border-color:#D8455F;color:#D8455F;background:rgba(216,69,95,.06)}
.pk-det-save.on svg{fill:#D8455F;stroke:#D8455F}
.pk-det-cart.on{border-color:var(--holo-a,#a07a28);color:var(--holo-a,#a07a28);background:rgba(160,122,40,.07)}
.pk-det.pop{animation:fabpop .4s ease}
.ip-header{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap}
.ip-header-text{flex:1 1 320px;min-width:0}
.ip-top-actions{display:flex;flex-wrap:wrap;gap:11px;justify-content:flex-end;align-items:center;flex:0 0 auto;padding-top:8px}
.ip-top-actions .pill{font-size:11px;padding:13px 24px;letter-spacing:.15em}
@media(max-width:640px){.ip-top-actions{justify-content:flex-start;width:100%;padding-top:2px}}