/* Keeper Landwey — Tours & Activities · v2 design system
   Fonts: Fraunces (display) + Inter (text) · Accent: deep peacock emerald */
:root{
  --ink:#171B23;
  --body:#3A4150;
  --muted:#6D7484;
  --accent:#13544A;
  --accent-dark:#0D3F38;
  --accent-deep:#082E29;
  --accent-tint:#E6EFEC;
  --accent-soft:#F1F7F5;
  --ivory:#FAF9F5;
  --sand:#F4F2EA;
  --border:#E8E5DC;
  --white:#ffffff;
  --green:#2E7D43;
  --red:#A0392E;
  --laurel:#9C8B5D;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1140px;
  --radius:12px;
  --shadow:0 1px 2px rgba(23,27,35,.05),0 10px 30px rgba(23,27,35,.07);
  --shadow-lift:0 3px 6px rgba(23,27,35,.07),0 18px 50px rgba(23,27,35,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--body);background:var(--white);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{color:var(--accent-deep)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3,.serif{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.18;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.5rem,3vw,2.15rem)}
h3{font-size:1.2rem}
.eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:12px}
.accent-rule{width:52px;height:3px;background:var(--accent);border:0;border-radius:2px;margin:18px 0}
.center{text-align:center}
.center .accent-rule{margin-left:auto;margin-right:auto}

/* ============ header ============ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar{background:var(--ink);color:#d6d3c8;font-size:.78rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:14px}
.topbar a{color:#d6d3c8}
.topbar a:hover{color:#fff}
/* one line, always — it is a strip, not a paragraph */
.topbar .tb-award{color:#E4CE97;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar .tb-right{display:flex;gap:18px;white-space:nowrap}
.nav-row{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:18px}
.brand-link img{height:26px;width:auto}
.brand-sub{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);display:block;margin-top:4px}
nav.main-nav{display:flex;align-items:center;gap:28px}
nav.main-nav a{color:var(--ink);font-size:.93rem;font-weight:500}
nav.main-nav a:hover,nav.main-nav a[aria-current]{color:var(--accent)}
.nav-cta{background:var(--accent);color:#fff !important;padding:11px 22px;border-radius:999px;font-weight:600;font-size:.9rem}
.nav-cta:hover{background:var(--accent-dark)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}
@media(max-width:940px){
  .topbar .tb-award{display:none}
  .nav-toggle{display:block}
  nav.main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;padding:18px 22px;gap:16px;box-shadow:var(--shadow)}
  nav.main-nav.open{display:flex}
}

/* ============ hero ============ */
.hero{position:relative;color:#fff;min-height:560px;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:72% 62%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(8,14,12,.86) 0%,rgba(8,14,12,.74) 34%,rgba(8,14,12,.30) 58%,rgba(8,14,12,0) 80%);z-index:-1}
.hero .container{padding-top:84px;padding-bottom:96px;width:100%}
.hero .container>*{max-width:470px}
.hero .eyebrow{color:#BCDDD2}
/* the headline is two full sentences, each meant to hold its own line, so it needs
   more room than the narrow 470px column the list and buttons sit in */
.hero h1{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);text-shadow:0 2px 24px rgba(0,0,0,.4)}
/* .hero .container>* caps every child at 470px; the headline needs to outrank that */
.hero .container>h1{max-width:min(900px,100%)}
/* the headline is two sentences and the break between them is the line itself — it holds
   on a phone too, where the second sentence starts a new line rather than running on */
.hero h1 .h1-line2{display:block}
.hero p.lead{font-size:1.08rem;margin-top:18px;color:#EDEBE2;text-shadow:0 1px 14px rgba(0,0,0,.45)}
/* the hero carries a short list instead of a paragraph. One column: the hero text
   sits in a narrow column, and two columns wrapped every point onto two lines. */
.hero-ticks{list-style:none;display:grid;gap:8px;margin-top:20px;font-size:.92rem;
  font-weight:500;color:#F1EFE6;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-ticks li{display:flex;gap:9px;align-items:flex-start;line-height:1.35}
.hero-ticks li::before{content:"✓";color:#8CC9B8;font-weight:700;flex:none}
.hero-ticks li.wide{font-weight:700;color:#fff}
@media(max-width:820px){.hero .hero-bg{background-position:60% 62%}.hero::after{background:linear-gradient(180deg,rgba(8,14,12,.55) 0%,rgba(8,14,12,.8) 100%)}.hero .container>*{max-width:none}}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-block;padding:14px 30px;border-radius:999px;font-weight:600;font-size:.96rem;border:1.5px solid transparent;cursor:pointer;transition:.15s;font-family:var(--sans)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--ivory);color:var(--ink)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-whatsapp{background:#1FA855;color:#fff}
.btn-whatsapp:hover{background:#178A45;color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ============ awards ============ */
.awards-strip{background:var(--ivory);border-bottom:1px solid var(--border)}
/* the three awards must sit on ONE line on desktop — tighter gaps and type buy the
   room, and the badge keeps its size. Below 1080px they wrap, which is fine. */
.awards-strip .container{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;padding-top:20px;padding-bottom:20px}
.award{display:flex;align-items:center;gap:11px}
.award svg{width:40px;height:40px;flex:none}
.aw-badge{width:auto;height:52px;flex:none}
/* each company's own mark, sized so the three read as one row */
.aw-logo{width:auto;flex:none;display:block}
.aw-logo.via{height:21px}
.aw-logo.gyg{height:34px}
.award-chip .aw-logo.via{height:13px}
.award-chip .aw-logo.gyg{height:19px}

/* Hero: this year's award only — the badge is gold on transparency, so no white
   or black paper block sits on the photograph. Earlier years live in the footer. */
.hero-award{display:inline-flex;align-items:center;gap:16px;margin-top:22px;padding:12px 22px 12px 16px;
  background:linear-gradient(120deg,rgba(212,168,60,.20),rgba(212,168,60,.06));
  border:1px solid rgba(212,168,60,.55);border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.10) inset,0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(4px);width:max-content;max-width:100%}
.hero-award img{height:64px;width:auto;flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.hero-award span{display:flex;flex-direction:column;line-height:1.35;font-size:.8rem;color:#E7D9B6}
.hero-award b{font-family:var(--serif);font-size:1.06rem;color:#F3DFAE;letter-spacing:.01em}
@media(max-width:820px){.hero-award{width:auto;gap:12px;padding:10px 16px 10px 12px}
  .hero-award img{height:52px}}
.award .aw-text small{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.award .aw-text strong{font-family:var(--serif);font-size:.93rem;color:var(--ink);font-weight:600}
/* nowrap only where the one-line strip is the goal — on a phone it must be free to wrap */
@media(min-width:900px){.award .aw-text strong{white-space:nowrap}}
.awards-inline{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.award-chip{display:inline-flex;align-items:center;gap:7px;background:var(--ivory);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:600;color:var(--ink)}
.award-chip svg{width:15px;height:15px}
/* the badge is a 200x220 artwork — inside a pill it has to come down to chip size */
.award-chip .aw-badge{height:26px}

/* ============ sections ============ */
section.block{padding:76px 0}
section.block.tint{background:var(--ivory);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-head{margin-bottom:40px;max-width:66ch}

/* ============ tour cards (compact, OTA-style) ============ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:20px}
.tour-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.18s;box-shadow:var(--shadow)}
.tour-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tc-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#eceadf,#ddd8c6);overflow:hidden;display:block}
.tc-media .tc-art{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.tour-card:hover .tc-art{transform:scale(1.045)}
.tc-flag{position:absolute;top:10px;left:10px;background:rgba(23,27,35,.85);color:#fff;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;font-weight:600;z-index:1}
.tc-duration{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.95);color:var(--ink);font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:999px;z-index:1}
.tc-body{padding:14px 16px 15px;display:flex;flex-direction:column;flex:1}
/* Every card reserves exactly two lines for the title, whether or not the title fills
   them. That is what makes Duration and Route start at the same height right across a
   row — the ragged look came from one-line titles sitting beside two-line ones. */
.tc-body h3{font-size:.99rem;margin-bottom:5px;line-height:1.3;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-body h3 a{color:var(--ink)}
.tc-body h3 a:hover{color:var(--accent)}
.tc-route{font-size:.78rem;color:var(--muted);flex:1;letter-spacing:.01em}
.tc-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.tc-price small{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.tc-price strong{font-family:var(--serif);font-size:1.16rem;color:var(--accent-dark)}
.tc-price span{font-size:.72rem;color:var(--muted)}
.tc-more{font-size:.8rem;font-weight:700;color:var(--accent);white-space:nowrap}

/* ============ trust ============ */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.trust-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.trust-item .ti-num{font-family:var(--serif);font-size:1.8rem;color:var(--accent);font-weight:600}
.trust-item h3{font-size:1.02rem;margin:8px 0 7px}
.trust-item p{font-size:.88rem;color:var(--muted)}

/* ============ breadcrumbs ============ */
.crumbs{font-size:.8rem;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}

/* ============ product page ============ */
.product-hero{padding:20px 0 30px}
.ph-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.chip{background:var(--ivory);border:1px solid var(--border);border-radius:999px;font-size:.79rem;padding:6px 14px;color:var(--body);font-weight:500}
.chip strong{color:var(--ink)}
.chip.chip-accent{background:var(--accent-tint);border-color:#cfe5de;color:var(--accent-deep)}

/* gallery */
.gallery{display:grid;grid-template-columns:2.05fr 1fr 1fr;grid-template-rows:210px 210px;gap:10px;border-radius:var(--radius);overflow:hidden;margin-top:22px}
.gallery a,.gallery button.lb-open{display:block;position:relative;overflow:hidden;padding:0;border:0;background:none;cursor:zoom-in}
.gallery a:first-child{grid-row:1/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery a:hover img,.gallery button:hover img{transform:scale(1.04)}
.gallery.cells-5 a:first-child,.gallery.cells-5 button:first-child{grid-row:1/3}
.gallery.cells-4{grid-template-columns:2.05fr 1fr 1fr}
.gallery.cells-4 button:first-child{grid-row:1/3}
.gallery.cells-4 button:nth-child(4){grid-column:2/4}
.gallery.cells-3{grid-template-columns:2.05fr 1fr}
.gallery.cells-3 button:first-child{grid-row:1/3}
.gallery.cells-2{grid-template-columns:1fr 1fr;grid-template-rows:300px}
.gallery.cells-1{grid-template-columns:1fr;grid-template-rows:340px}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;grid-template-rows:220px 110px}.gallery a:first-child,.gallery button:first-child{grid-column:1/3;grid-row:1}.gallery a:nth-child(n+4),.gallery button:nth-child(n+4){display:none}}

/* ---- Best Seller medal ----------------------------------------------------
   Sits over the first gallery photograph on a best-selling tour. The badge is
   fully visible in plain HTML; only the drop-in and the shine sweep are gated on
   `.motion`, so a crawler, a reader mode, or a failed script still sees it. */
.gallery{position:relative}
.bs-medal{
  position:absolute;top:14px;left:14px;z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:10px;overflow:hidden;
  padding:8px 16px 8px 11px;border-radius:999px;
  background:linear-gradient(180deg,rgba(8,46,41,.84),rgba(8,46,41,.95));
  border:1px solid rgba(220,183,85,.62);
  box-shadow:0 8px 26px rgba(8,20,18,.40),inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* where a tour has no gallery the medal drops under the headline instead */
.bs-medal.bsm-inline{position:static;display:inline-flex;margin-top:14px}
.bs-medal .bsm-ico{flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.38))}
.bsm-txt{display:flex;flex-direction:column;line-height:1.16}
.bsm-txt b{font-family:var(--serif);font-size:1rem;font-weight:600;color:#F7E7B4;letter-spacing:.01em}
.bsm-txt small{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.64)}
/* the sweep is parked off the left edge and clipped, so it is invisible when still */
.bsm-shine{position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.40) 49%,transparent 64%)}
@media (prefers-reduced-motion: no-preference){
  .motion .bs-medal{animation:bsm-drop .74s cubic-bezier(.2,.9,.28,1.1) .38s backwards}
  .motion .bs-medal .bsm-shine{animation:bsm-shine 1.6s ease-in-out 1.25s 2}
}
@keyframes bsm-drop{
  0%  {opacity:0;transform:translateY(-16px) scale(.8) rotate(-9deg)}
  58% {opacity:1;transform:translateY(0) scale(1.07) rotate(2.5deg)}
  100%{opacity:1;transform:none}
}
@keyframes bsm-shine{0%{transform:translateX(-130%)}58%,100%{transform:translateX(150%)}}
@media(max-width:560px){
  .bs-medal{top:10px;left:10px;gap:8px;padding:6px 13px 6px 9px}
  .bs-medal .bsm-ico{width:22px;height:26px}
  .bsm-txt b{font-size:.88rem}
  .bsm-txt small{font-size:.6rem}
}

.product-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:48px;padding:40px 0 84px;align-items:start}
@media(max-width:980px){.product-layout{grid-template-columns:1fr}}
.p-section{margin-bottom:44px}
.p-section>h2{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-size:1.45rem}
.p-section>h2::after{content:"";height:1px;background:var(--border);flex:1}
.p-section p+p{margin-top:14px}

/* highlights */
.highlights{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
@media(max-width:640px){.highlights{grid-template-columns:1fr}}
.highlights li{padding-left:26px;position:relative;font-size:.95rem}
.highlights li::before{content:"";position:absolute;left:2px;top:.52em;width:10px;height:10px;border-radius:50%;background:var(--accent-tint);border:2.5px solid var(--accent)}

/* details table */
.details-table{width:100%;border:1px solid var(--border);border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden;font-size:.92rem}
.details-table th{background:var(--ivory);text-align:left;font-weight:600;color:var(--ink);width:31%;vertical-align:top}
.details-table th,.details-table td{padding:11px 16px;border-top:1px solid var(--border)}
.details-table tr:first-child th,.details-table tr:first-child td{border-top:0}
.details-table td{white-space:pre-line}

/* itinerary accordion */
.itin-acc{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.itin-acc details{border-top:1px solid var(--border)}
.itin-acc details:first-child{border-top:0}
.itin-acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:17px 20px;background:var(--ivory);font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--ink)}
.itin-acc summary::-webkit-details-marker{display:none}
.itin-acc summary .day-chip{flex:none;background:var(--accent);color:#fff;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.itin-acc summary::after{content:"+";margin-left:auto;color:var(--accent);font-size:1.3rem;font-family:var(--sans)}
.itin-acc details[open] summary::after{content:"–"}
.itin-body{padding:6px 22px 18px}
.stop{padding:14px 0;border-bottom:1px dashed var(--border)}
.stop:last-child{border-bottom:0}
.stop h3{color:var(--accent-dark);font-size:1.02rem;margin-bottom:6px}
.stop p{font-size:.94rem;white-space:pre-line}
.callout,.notebox{border-radius:10px;padding:18px 20px;margin:16px 0}
.callout{background:var(--accent-soft);border:1px solid #d5e7e1;border-left:4px solid var(--accent)}
.notebox{background:var(--sand);border-left:4px solid var(--laurel)}
.callout h4,.notebox h4{font-size:.98rem;color:var(--accent-deep);margin-bottom:6px;font-family:var(--serif)}
.notebox h4{color:#6b5c33}
.callout .co-price{margin-top:10px;font-weight:700;color:var(--accent-deep);font-size:.92rem}
.callout p,.notebox p{font-size:.93rem;white-space:pre-line}

/* collapsible plain sections */
.fold{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;background:#fff}
.fold summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;color:var(--ink);display:flex;gap:12px;font-size:.98rem}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";margin-left:auto;color:var(--accent);font-size:1.2rem}
.fold[open] summary::after{content:"–"}
.fold .fold-body{padding:0 20px 18px}

/* notes & lists */
.note-list{list-style:none}
.note-list li{padding:8px 0 8px 24px;position:relative;font-size:.93rem;border-bottom:1px solid #f0eee6}
.note-list li:last-child{border-bottom:0}
.note-list li::before{content:"•";position:absolute;left:6px;color:var(--accent);font-weight:700}
.inc-list,.exc-list{list-style:none}
.inc-list li,.exc-list li{padding:8px 0 8px 30px;position:relative;font-size:.94rem}
.inc-list li::before{content:"✓";position:absolute;left:4px;color:var(--green);font-weight:700}
.exc-list li::before{content:"✗";position:absolute;left:4px;color:var(--red);font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:720px){.two-col{grid-template-columns:1fr}}

/* tables (meals etc.) */
.plain-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.9rem}
.plain-table th{background:var(--ink);color:#fff;padding:10px 14px;text-align:left;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.plain-table td{padding:10px 14px;border-top:1px solid var(--border)}
.plain-table tr:nth-child(even) td{background:var(--ivory)}
.table-note{font-size:.83rem;color:var(--muted);font-style:italic;margin-top:10px}
.table-scroll{overflow-x:auto}

/* FAQ */
.faq details{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:600;color:var(--ink);font-size:.96rem;list-style:none;display:flex;gap:12px}
.faq summary::before{content:"+";color:var(--accent);font-weight:700;font-size:1.05rem;line-height:1.5}
.faq details[open] summary::before{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq .faq-a{padding:0 18px 16px 42px;font-size:.93rem}

/* ============ booking widget ============ */
/* No inner scrollbar: the panel is never taller than its own content, and main.js
   raises `top` when the panel is taller than the viewport so the last button stays reachable. */
.book-widget{position:sticky;top:100px;margin-bottom:26px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lift)}
.book-widget .bw-body{padding-bottom:22px}
.bw-head{background:var(--accent-deep);color:#fff;padding:18px 22px}
.bw-head small{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#8CC9B8;font-weight:700}
.bw-head .bw-price{font-family:var(--serif);font-size:1.85rem;margin-top:2px}
.bw-head .bw-price span{font-size:.82rem;font-family:var(--sans);color:#BFD9D0}
.bw-body{padding:20px 22px 24px}
.bw-body label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:14px 0 6px}
.bw-body label:first-child{margin-top:0}
.bw-body input,.bw-body select,.bw-body textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:9px;font-family:var(--sans);font-size:.94rem;background:#fff;color:var(--ink)}
.bw-body input:focus,.bw-body select:focus,.bw-body textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.bw-addons{margin-top:16px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.bw-addons .ba-head{background:var(--ivory);padding:10px 14px;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.bw-addons label.ba-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-top:1px solid var(--border);margin:0;font-size:.86rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--body);cursor:pointer}
.bw-addons label.ba-item input{width:auto;margin-top:3px;accent-color:var(--accent)}
.bw-addons .ba-price{margin-left:auto;font-weight:700;color:var(--accent-dark);white-space:nowrap;font-size:.84rem}
.bw-total{display:flex;justify-content:space-between;align-items:baseline;background:var(--accent-soft);border:1px solid #d5e7e1;border-radius:10px;padding:13px 15px;margin-top:18px}
.bw-total .t-label{font-size:.8rem;color:var(--muted)}
.bw-total .t-value{font-family:var(--serif);font-size:1.5rem;color:var(--accent-deep);font-weight:700}
.bw-total .t-pp{font-size:.76rem;color:var(--muted)}
.bw-actions{margin-top:16px;display:grid;gap:10px}
.bw-actions .btn{width:100%;text-align:center}
.bw-note{font-size:.77rem;color:var(--muted);margin-top:12px;line-height:1.55}
.bw-trust{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:.79rem}
.bw-trust span::before{content:"✓ ";color:var(--green);font-weight:700}
.bw-status{display:none;margin-top:12px;font-size:.84rem;padding:10px 12px;border-radius:9px}
.bw-status.ok{display:block;background:#eef7ee;color:var(--green);border:1px solid #cfe6cf}
.bw-status.err{display:block;background:#fbeeec;color:var(--red);border:1px solid #eccfc9}

/* ============ CTA band / footer ============ */
.cta-band{background:var(--accent-deep);color:#CFE0DA;padding:66px 0}
.cta-band h2{color:#fff}
.cta-band p{max-width:60ch;margin-top:10px}
footer{background:#121821;color:#9aa0ab;font-size:.87rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:56px 0 40px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-family:var(--sans)}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:#9aa0ab}
footer a:hover{color:#8CC9B8}
.footer-brand img{height:24px;filter:invert(1) brightness(1.7);margin-bottom:14px}
/* the award reads as a badge, not a long yellow sentence */
.footer-award{display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 16px 12px 13px;
  background:rgba(212,168,60,.09);border:1px solid rgba(212,168,60,.32);border-radius:12px}
.footer-award img{height:54px;width:auto;flex:none;margin:0;filter:none}
.footer-award span{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:#9aa0ab;line-height:1.5}
.footer-award b{font-family:var(--serif);font-size:.98rem;color:#E4CE97;font-weight:600}
.footer-award i{font-style:normal;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#B99B58;font-weight:700}
.footer-bottom{border-top:1px solid #232a35;padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.77rem}

/* ============ misc pages ============ */
.page-hero{background:linear-gradient(180deg,var(--ivory),#fff);border-bottom:1px solid var(--border);padding:60px 0 48px}
.page-hero p.lead{font-size:1.05rem;color:var(--body)}
.prose{max-width:70ch}
.prose p+p{margin-top:14px}
.prose h2{margin:34px 0 12px}
.prose ul{margin:12px 0 12px 22px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.contact-card ul{list-style:none}
.contact-card li{padding:10px 0;border-bottom:1px solid var(--border);font-size:.94rem}
.contact-card li:last-child{border-bottom:0}
.contact-card li strong{display:block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}

/* ============ v3: awards years line · home rows · teasers · reviews ============ */
/* just the review counts — each award's own span of time sits with the award itself */
.aw-years{flex-basis:100%;text-align:center;margin-top:2px}
.aw-years span{font-size:.8rem;color:var(--muted);font-weight:500}
.tc-best{position:absolute;top:38px;left:10px;background:#B9861F;color:#fff;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;font-weight:700;z-index:1}
.home-row{padding:56px 0}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.row-head h2{margin-top:2px}
.row-blurb{max-width:62ch;margin-top:8px;color:var(--muted);font-size:.95rem}
.row-link{white-space:nowrap;font-weight:700;font-size:.9rem;color:var(--accent);padding-bottom:4px}
@media(max-width:640px){.row-head{flex-direction:column;align-items:flex-start;gap:8px}}
.teaser-card h3{font-size:.99rem}
.teaser-card .tc-art{opacity:.85}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.reviews-band{background:var(--accent-soft);border-top:1px solid #d5e7e1;border-bottom:1px solid #d5e7e1}
.review-card{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:.15s;color:var(--body)}
.review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);color:var(--body)}
.rc-stars{display:flex;align-items:center;gap:10px}
.rc-stars svg{width:26px;height:26px}
.rc-stars span{color:#00AA6C;letter-spacing:3px;font-size:.85rem}
.review-card blockquote{font-family:var(--serif);font-size:1.12rem;line-height:1.45;color:var(--ink);border:0;flex:1}
.rc-link{font-size:.8rem;font-weight:700;color:var(--accent)}
.rating-line{font-size:1.02rem;color:var(--body);margin:-6px 0 10px}
.rating-line strong{font-family:var(--serif);font-size:1.3rem;color:#00AA6C}

/* ============ v5: ribbon, card meta, rails, gallery, facts, booking modal ============ */
/* The category flag sits opposite the medal. It is capped so a long name such as
   "Multi-Day Tours" can never run off the card's right edge. */
.tc-flag{left:auto;right:9px;top:9px;font-size:.56rem;letter-spacing:.08em;padding:4px 9px;
  max-width:calc(100% - 130px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Best Seller badge — the same gold medal the product page carries.
   It replaced a diagonal corner ribbon, which clipped its own text against the card's
   rounded corner at every width we tried. A horizontal pill cannot clip. */
/* The medal shares the top of the photo with the category flag, so both are kept
   deliberately small. Their combined width has to clear the narrowest card we render
   (about 259px in the home rails) or one of them clips off the edge. */
.tc-best{position:absolute;top:9px;left:9px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px 4px 5px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(8,46,41,.9),rgba(8,46,41,.97));
  border:1px solid rgba(220,183,85,.55);
  box-shadow:0 3px 9px rgba(8,20,18,.3);
  font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#F7E7B4}
.tc-best svg{flex:none;width:14px;height:17px}
/* duration / route — bold black label, plain gray value, columns aligned */
.tc-route{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:baseline}
.tc-line{display:contents}
.tc-line small{font-size:.72rem;color:var(--ink);font-weight:700;white-space:nowrap}
.tc-line b{font-size:.78rem;color:var(--muted);font-weight:400;line-height:1.35}

/* horizontal card rail with arrows over the first and last card */
.rail-wrap{position:relative}
.rail-wrap>button{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;
  border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink);font-size:1.5rem;
  line-height:1;cursor:pointer;transition:.15s;box-shadow:0 3px 14px rgba(23,27,35,.22);display:flex;
  align-items:center;justify-content:center;padding-bottom:3px}
.rail-wrap>button:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
.rail-wrap>button:disabled,.rail-wrap>button.is-off{opacity:0;pointer-events:none}
.rail-wrap .row-prev{left:-18px}
.rail-wrap .row-next{right:-18px}
@media(max-width:1200px){.rail-wrap .row-prev{left:4px}.rail-wrap .row-next{right:4px}}
/* The rail scrolls HORIZONTALLY only. overflow-x:auto forces the vertical axis to
   become scrollable too, and the rise-in cards waiting off to the right sit 22px
   low until the viewport reaches them — so the rail grew a vertical scrollbar and
   the row could be nudged upward, hiding the Best Seller medal and category tag
   behind the top edge. overflow-y:hidden is the fix. The padding/negative-margin
   pair gives the hover lift (translateY(-4px)) and its shadow room to breathe
   without clipping, while keeping the row's outer spacing exactly as before. */
.card-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px 0 20px;margin:-14px 0 -14px;scrollbar-width:none}
.card-rail::-webkit-scrollbar{display:none}
.card-rail .slide{scroll-snap-align:start;display:flex}
.card-rail .slide>.tour-card{width:100%}
@media(max-width:1000px){.card-rail{grid-auto-columns:calc((100% - 40px)/3)}}
@media(max-width:760px){.card-rail{grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:520px){.card-rail{grid-auto-columns:82%}}

/* quick facts as a compact list */
.fact-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:6px 24px;margin-bottom:34px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--ivory)}
.fact-list li{display:flex;gap:9px;align-items:baseline;font-size:.87rem;padding:3px 0}
.fact-list li::before{content:"✓";color:var(--accent);font-weight:700;flex:none}
.fact-list small{flex:none;font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;min-width:78px}
.fact-list span{color:var(--ink);font-weight:500}

/* gallery — one tall image left, four right, last opens the slider */
.gal-more{position:absolute;inset:0;background:rgba(15,22,19,.62);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.82rem;font-weight:600;pointer-events:none;backdrop-filter:blur(1.5px)}
.gal-more b{font-family:var(--serif);font-size:1.5rem;font-weight:600}

/* short intro */
.readmore{margin-top:10px}
.readmore summary{cursor:pointer;list-style:none;font-weight:700;color:var(--accent);font-size:.9rem}
.readmore summary::-webkit-details-marker{display:none}
.readmore[open] summary{margin-bottom:10px}
.readmore[open] summary::after{content:" — less"}

/* traveler steppers */
.stepper{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.stepper b{display:block;font-size:.92rem;color:var(--ink)}
.stepper small{font-size:.74rem;color:var(--muted)}
.stp{display:flex;align-items:center;gap:12px}
.stp button{width:32px;height:32px;border-radius:999px;border:1.5px solid var(--accent);background:#fff;color:var(--accent);font-size:1.1rem;line-height:1;cursor:pointer;font-weight:700}
.stp button:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--muted)}
.stp output{min-width:20px;text-align:center;font-weight:700;color:var(--ink)}

/* booking modal */
.bkmodal{position:fixed;inset:0;z-index:210;background:rgba(12,18,16,.62);display:none;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(3px)}
.bkmodal.open{display:flex}
.bk-panel{background:#fff;border-radius:16px;width:min(720px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.4);overflow:hidden}
.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 14px}
.bk-kicker{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:4px}
.bk-head h3{font-size:1.24rem}
.bk-close{background:none;border:0;font-size:1.9rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.bk-steps{display:flex;gap:8px;padding:0 24px 14px;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.bk-steps span{padding:5px 12px;border-radius:999px;background:var(--ivory)}
.bk-steps span.on{background:var(--accent);color:#fff}
.bk-steps span.done{background:var(--accent-tint);color:var(--accent-deep)}
.bk-body{padding:4px 24px 20px;overflow-y:auto;flex:1}
.bk-intro{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.bk-none{font-size:.9rem;padding:16px;background:var(--ivory);border-radius:10px}
.bk-opt,.bk-add{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--border);border-radius:12px;padding:15px 16px;margin-bottom:10px;cursor:pointer;transition:.15s}
.bk-opt:hover,.bk-add:hover{border-color:var(--accent)}
.bk-opt.sel,.bk-add.sel{border-color:var(--accent);background:var(--accent-soft)}
.bk-opt input,.bk-add input{margin-top:4px;accent-color:var(--accent);flex:none;width:18px;height:18px}
.bk-opt-main,.bk-add-main{flex:1;display:flex;flex-direction:column;gap:5px}
.bk-opt-main b,.bk-add-main b{font-size:1rem;color:var(--ink)}
.bk-opt-blurb{font-size:.86rem;color:var(--body)}
.bk-opt-meta{display:flex;flex-direction:column;gap:3px;font-size:.79rem;color:var(--muted);margin-top:3px}
/* what actually differs between options */
.bk-opt-pts{display:flex;flex-direction:column;gap:4px;margin-top:7px}
.bk-opt-pts span{position:relative;padding-left:21px;font-size:.82rem;line-height:1.4}
.bk-opt-pts .yes{color:var(--body)}
.bk-opt-pts .yes::before{content:"✓";position:absolute;left:2px;color:var(--green);font-weight:700}
.bk-opt-pts .no{color:var(--muted)}
.bk-opt-pts .no::before{content:"✗";position:absolute;left:2px;color:var(--red);font-weight:700}
.bk-opt-more{display:block;margin-top:7px}
.bk-opt-readmore{background:none;border:0;padding:0;color:var(--accent);font-weight:700;font-size:.8rem;
  cursor:pointer;font-family:var(--sans);text-decoration:underline}
.bk-opt-full{display:block;margin-top:6px;font-size:.8rem;color:var(--muted);line-height:1.5}
.bk-opt-full[hidden]{display:none}   /* the class rule would otherwise beat [hidden] */
.bk-opt-bullets{list-style:none;display:grid;gap:5px;margin-top:2px}
.bk-opt-bullets li{position:relative;padding-left:16px;font-size:.81rem;color:var(--body);line-height:1.45}
.bk-opt-bullets li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.bk-opt-price{flex:none;text-align:right}
.bk-opt-price b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--accent-deep)}
.bk-opt-price small{font-size:.7rem;color:var(--muted)}
.bk-summary{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px}
.bk-summary>div{background:#fff;padding:12px 16px;display:flex;justify-content:space-between;gap:16px;font-size:.92rem}
.bk-summary small{color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.bk-summary span{color:var(--ink);font-weight:500;text-align:right}
.bk-chosen{margin:14px 0 4px}
.bk-chosen>small{display:block;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.bk-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.bk-chip{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--accent-soft);
  border:1px solid #d5e7e1;border-radius:10px;padding:11px 13px}
.bk-chip b{font-size:.88rem;color:var(--ink);font-weight:600}
.bk-chip i{font-style:normal;font-size:.82rem;font-weight:700;color:var(--accent-deep);white-space:nowrap}
.bk-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--border);background:var(--ivory);flex-wrap:wrap}
.bk-total small{display:block;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bk-total strong{font-family:var(--serif);font-size:1.55rem;color:var(--accent-deep)}
.bk-total span{font-size:.78rem;color:var(--muted);margin-left:8px}
.bk-btns{display:flex;gap:10px}
.bk-btns .btn{padding:12px 24px}
@media(max-width:560px){.bk-opt,.bk-add{flex-wrap:wrap}.bk-opt-price{text-align:left}.bk-foot{flex-direction:column;align-items:stretch}.bk-btns .btn{flex:1}}

/* booking page */
.bkp-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
/* min-width:auto on grid items lets the recommendations track (width:400%) push the
   whole column past the viewport on a phone */
.bkp-grid>*{min-width:0}
@media(max-width:860px){.bkp-grid{grid-template-columns:1fr}}
.bkp-summary{background:var(--ivory);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.bkp-addons{padding:11px 0;border-bottom:1px solid var(--border)}
.bkp-addons small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.bkp-addons ul{list-style:none;display:grid;gap:4px}
.bkp-addons li{position:relative;padding-left:20px;font-size:.9rem;color:var(--ink)}
.bkp-addons li::before{content:"✓";position:absolute;left:2px;color:var(--green);font-weight:700}
.bkp-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.92rem}
.bkp-row small{color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;flex:none}
.bkp-row span{text-align:right;color:var(--ink);font-weight:500}
.bkp-total{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:6px}
.bkp-total small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bkp-sub{font-size:.78rem;color:var(--muted)}
.bkp-total strong{font-family:var(--serif);font-size:1.9rem;color:var(--accent-deep)}

/* itinerary day summary */
.itin-hint{font-size:.86rem;color:var(--muted);margin:-8px 0 14px}
.itin-acc summary .day-title{flex:1}
.itin-acc summary .day-count{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap}
.itin-acc summary::after{margin-left:12px}
@media(max-width:520px){.itin-acc summary .day-count{display:none}}

/* itinerary stop with photo */
.stop.has-img,.callout.has-img{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start}
.stop-thumb{padding:0;border:0;background:none;cursor:zoom-in;border-radius:9px;overflow:hidden;display:block;line-height:0}
.stop-thumb img{width:132px;height:92px;object-fit:cover;transition:transform .35s}
.stop-thumb:hover img{transform:scale(1.06)}
@media(max-width:560px){.stop.has-img,.callout.has-img{grid-template-columns:1fr}.stop-thumb img{width:100%;height:170px}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,16,14,.94);display:none;align-items:center;justify-content:center;padding:26px}
.lightbox.open{display:flex}
.lb-stage{width:min(1120px,94vw);display:flex;flex-direction:column;align-items:center;gap:12px}
/* one fixed frame, so paging never resizes the box — tall shots and wide shots
   both sit inside the same rectangle */
.lb-stage img{width:100%;height:min(72vh,640px);object-fit:contain;background:#0b0f0d;
  border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
@media(max-width:760px){.lb-stage img{height:min(64vh,460px)}}
.lb-count{color:#cfd6d2;font-size:.82rem;letter-spacing:.12em}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:.15s;backdrop-filter:blur(4px)}
.lightbox button:hover{background:rgba(255,255,255,.26)}
.lb-close{top:20px;right:22px;width:44px;height:44px;font-size:1.8rem;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.1rem;line-height:1;padding-bottom:5px}
.lb-prev{left:20px}
.lb-next{right:20px}
@media(max-width:640px){.lb-prev,.lb-next{width:42px;height:42px;font-size:1.7rem}.lb-prev{left:8px}.lb-next{right:8px}}

/* ============ v6: premium date picker, OTA links, cross-sell, quick view ============ */
.kl-date{position:relative}
.kl-date-field{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);
  border-radius:9px;background:#fff;cursor:pointer;font-family:var(--sans);font-size:.94rem;color:var(--ink);text-align:left;transition:.15s}
.kl-date-field:hover{border-color:var(--accent)}
.kl-date-field.empty .kl-date-text{color:var(--muted)}
.kl-date-icon{flex:none;width:19px;height:19px;color:var(--accent)}
.kl-date-icon svg{width:100%;height:100%}
.kl-cal{position:absolute;z-index:120;top:calc(100% + 8px);left:0;width:302px;background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 50px rgba(23,27,35,.22);padding:14px}
.kl-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kl-cal-head strong{font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
.kl-cal-head button{width:30px;height:30px;border-radius:999px;border:1px solid var(--border);background:#fff;
  color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer;transition:.15s}
.kl-cal-head button:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
.kl-cal-head button:disabled{opacity:.28;cursor:default}
.kl-dow,.kl-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.kl-dow span{text-align:center;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-bottom:5px}
.kl-day{aspect-ratio:1;border:0;background:none;border-radius:9px;cursor:pointer;font-family:var(--sans);
  font-size:.86rem;color:var(--ink);transition:.12s}
.kl-day:hover:not(:disabled){background:var(--accent-tint);color:var(--accent-deep)}
.kl-day.off{color:#c7ccc9;cursor:default}
.kl-day.sel{background:var(--accent);color:#fff;font-weight:700}
.kl-pad{aspect-ratio:1}
.kl-cal-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
.kl-hint{font-size:.72rem;color:var(--muted)}
.kl-hint::before{content:"✓ ";color:var(--green);font-weight:700}

/* OTA member links — same footprint as Check Availability, in each brand's own color */
.ota-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

/* meals, shown inside the add-ons step */
.bk-meals{border:1.5px solid var(--border);border-radius:12px;margin-top:4px;background:#fff}
.bk-meals summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;color:var(--ink);font-size:.95rem;display:flex}
.bk-meals summary::-webkit-details-marker{display:none}
.bk-meals summary::after{content:"+";margin-left:auto;color:var(--accent);font-size:1.2rem;line-height:1}
.bk-meals[open] summary::after{content:"–"}
.bk-meals-body{padding:0 16px 16px}
.bk-meal-ask{margin-top:12px;margin-bottom:0}
.ota-note{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--ink);margin-bottom:11px;
  line-height:1.45;background:#FFF6E8;border:1px solid #F0DCBB;border-left:4px solid #E0A33A;
  border-radius:9px;padding:9px 12px;font-weight:500}
.ota-note b{color:#8A5A11}
.ota-btns{display:grid;gap:10px}
/* all three booking buttons share one height so the block reads as a set */
.ota-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 18px;
  min-height:52px;border:1.5px solid transparent;border-radius:999px;font-weight:700;font-size:.96rem;
  color:#fff;transition:.15s;line-height:1;white-space:nowrap}
.bw-body .btn{min-height:52px;display:flex;align-items:center;justify-content:center}
.ota-btn>span{font-size:.9rem;font-weight:600;opacity:.95}
.ota-logo{flex:none;width:auto;display:block}
/* GetYourGuide's wordmark is stacked (tall), Viator's is a single line (wide) */
.gyg-logo{height:30px}
.via-logo{height:20px}
.ota-btn.gyg{background:#FF5533}
.ota-btn.gyg:hover{background:#E63F1F;color:#fff}
.ota-btn.via{background:#0E7C68}
.ota-btn.via:hover{background:#0A6555;color:#fff}

/* booking page: extras + recommendations */
.bkp-extra{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.bkp-extra b{display:block;font-size:.94rem;color:var(--ink)}
.bkp-extra small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.bkp-extra-right{text-align:right;white-space:nowrap}
.bkp-extra-right span{font-family:var(--serif);font-size:1.06rem;color:var(--accent-deep);font-weight:700}
.bkp-remove{display:block;margin-top:3px;background:none;border:0;color:var(--muted);font-size:.74rem;cursor:pointer;text-decoration:underline}
.bkp-remove:hover{color:var(--red)}
/* the whole booking page is kept tight so the summary, the form and the extras fit together */
.bk-hero{padding:34px 0 22px}
.bk-hero h1{font-size:clamp(1.6rem,3vw,2.1rem)}
.bk-hero .lead{font-size:.92rem;max-width:70ch;margin-top:8px}
.bk-section{padding:26px 0 54px}
.bk-section .bw-body label{margin:9px 0 4px}
.bk-section .bw-body input,.bk-section .bw-body textarea{padding:9px 12px}
.bk-section .bw-actions{margin-top:13px;gap:8px}
.bk-section .contact-card{padding:22px}
/* the form follows you down the page, so booking is always one click away */
@media(min-width:861px){.bk-section .contact-card{position:sticky;top:96px}}
.bk-section .bw-trust{margin-top:11px;padding-top:11px}
.bkp-recs{margin-top:20px}
.bkp-recs h2{font-size:1.12rem}
.bkp-recs-sub{font-size:.84rem;color:var(--muted);margin:5px 0 11px}
.bkp-rec-view{overflow:hidden}
.bkp-rec-track{display:flex;transition:transform .55s cubic-bezier(.33,.9,.34,1)}
.bkp-rec-page{flex:1 0 auto;display:grid;gap:8px;padding-right:2px}
.bkp-rec-page{width:calc(100% / var(--pages, 1))}
@media(prefers-reduced-motion:reduce){.bkp-rec-track{transition:none}}
.bkp-rec-grid{display:grid;gap:8px}
.bkp-rec{display:flex;gap:12px;align-items:center;text-align:left;padding:8px;border:1px solid var(--border);
  border-radius:11px;background:#fff;cursor:pointer;transition:.15s;font-family:var(--sans);width:100%}
.bkp-rec:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.bkp-rec-img{flex:none;width:74px;height:54px;border-radius:7px;background:var(--sand) center/cover}
.bkp-rec-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.bkp-rec-body b{font-size:.95rem;color:var(--ink)}
.bkp-rec-body small{font-size:.77rem;color:var(--muted)}
.bkp-rec-price{font-size:.8rem;font-weight:700;color:var(--accent-dark);margin-top:2px}

/* recommendation slider */
.bkp-recs-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.bkp-rec-next{flex:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:#fff;
  color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;transition:.15s}
.bkp-rec-next:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.bkp-rec-dots{display:flex;gap:6px;justify-content:center;margin-top:11px}
.bkp-rec-dots span{width:7px;height:7px;border-radius:999px;background:var(--border)}
.bkp-rec-dots span.on{background:var(--accent);width:18px}

/* quick view */
.qv-panel{width:min(640px,100%)}
.qv-shots{margin:-24px -24px 16px}
.qv-stage{position:relative;background:var(--sand);line-height:0}
.qv-stage img{width:100%;height:300px;object-fit:cover;object-position:center 45%;display:block;image-rendering:auto}
.qv-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:0;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;padding-bottom:3px}
.qv-nav:hover{background:#fff}
.qv-prev{left:10px}
.qv-next{right:10px}
.qv-count{position:absolute;right:12px;bottom:12px;background:rgba(23,27,35,.8);color:#fff;font-size:.74rem;
  padding:4px 10px;border-radius:999px;line-height:1.4}
.qv-thumbs{display:flex;gap:6px;padding:8px 24px 0}
.qv-thumb{width:56px;height:40px;border-radius:6px;border:2px solid transparent;background-size:cover;
  background-position:center;cursor:pointer;padding:0;opacity:.62;transition:.15s}
.qv-thumb.on,.qv-thumb:hover{opacity:1;border-color:var(--accent)}
.qv-title{margin-bottom:14px;padding-right:34px}
.qv-title h3{font-size:1.28rem;margin:2px 0 5px}
.qv-itin{list-style:none;counter-reset:s;display:grid;gap:3px}
.qv-itin li{position:relative;padding-left:22px;font-size:.87rem;color:var(--body)}
.qv-itin li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:.15em;width:16px;height:16px;
  border-radius:999px;background:var(--accent-tint);color:var(--accent-deep);font-size:.64rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.qv-itin li.qv-day{counter-reset:s;padding-left:0;font-weight:700;color:var(--ink);margin-top:8px;font-size:.83rem}
.qv-itin li.qv-day::before{content:none}
.qv-panel .bk-close{position:absolute;top:14px;right:16px;z-index:2}
.bkmodal .qv-panel{position:relative}
.qv-body{padding:24px 24px 18px;overflow-y:auto;flex:1}
.qv-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;padding-right:34px}
.qv-img{flex:none;width:120px;height:88px;border-radius:10px;background:var(--sand) center/cover}
.qv-head h3{font-size:1.28rem;margin:2px 0 5px}
.qv-meta{font-size:.83rem;color:var(--muted)}
.qv-pickup{color:var(--accent-dark);font-weight:600}
.qv-over{font-size:.92rem;margin-bottom:16px}
.qv-sec{margin-bottom:16px}
.qv-sec h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:800;margin-bottom:8px}
.qv-list,.qv-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
@media(max-width:560px){.qv-list,.qv-inc{grid-template-columns:1fr}.qv-head{flex-direction:column}}
.qv-list li,.qv-inc li{position:relative;padding-left:20px;font-size:.87rem}
.qv-list li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--accent-tint);border:2px solid var(--accent)}
.qv-inc li::before{content:"✓";position:absolute;left:2px;color:var(--green);font-weight:700}
.qv-opts{display:grid;gap:8px;margin-bottom:16px}
.qv-opt{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer}
.qv-opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.qv-opt input{margin-top:3px;accent-color:var(--accent)}
.qv-opt b{display:block;font-size:.93rem;color:var(--ink)}
.qv-opt small{font-size:.8rem;color:var(--muted)}
.qv-pax{font-size:.85rem;color:var(--muted);margin-bottom:9px}
.qv-pax b{color:var(--ink)}
.qv-date{max-width:320px}
.qv-link{font-size:.84rem;font-weight:700;margin-top:4px}
.qv-total{font-family:var(--serif);font-size:1.5rem;color:var(--accent-deep)}

.bk-add-note{display:block;font-size:.83rem;color:var(--muted);margin-top:3px;line-height:1.45}
.bk-add-more{background:none;border:0;padding:0;margin-top:3px;color:var(--accent);font-weight:700;
  font-size:.8rem;cursor:pointer;font-family:var(--sans);text-decoration:underline}
/* waiting state stays firmly green — muted, not washed out */
.btn.is-waiting{background:#7FB3A6;color:#fff;cursor:not-allowed;border-color:transparent}
.btn.is-waiting:hover{background:#7FB3A6;color:#fff}

/* city pages */
.city-hero{position:relative;color:#fff;padding:70px 0 58px;isolation:isolate;overflow:hidden}
.city-hero .city-bg{position:absolute;inset:0;background-size:cover;background-position:center 60%;z-index:-2}
.city-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(8,14,12,.88) 0%,rgba(8,14,12,.74) 40%,rgba(8,14,12,.34) 70%,rgba(8,14,12,.12) 100%)}
.city-hero .eyebrow{color:#BCDDD2}
.city-hero h1{color:#fff;max-width:16ch}
.city-hero .lead{color:#EDEBE2;max-width:60ch;font-size:1.04rem}
.city-pickup{margin-top:14px;font-size:.86rem;color:#CBD5CF;max-width:64ch;padding-left:14px;border-left:3px solid var(--accent)}
.city-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.city-cards{grid-template-columns:1fr}}
.city-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:190px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.city-card .cc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.city-card:hover .cc-bg{transform:scale(1.06)}
.city-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,12,.05),rgba(8,14,12,.82))}
.city-card span{position:relative;z-index:1;padding:20px;display:block}
.city-card b{display:block;font-family:var(--serif);font-size:1.35rem}
.city-card small{font-size:.82rem;color:#D6DEDA}

/* ============ v9: WhatsApp glyph, Plan My Trip, city cards, rec carousel ============ */
/* one rule for both cases: flex buttons center it themselves and ignore vertical-align,
   inline-block buttons use the offset to sit it on the text's optical center */
.wa-ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-.28em}
.btn-whatsapp,.nav-cta,.wa-float{display:inline-flex;align-items:center;justify-content:center;gap:9px}

/* animated Plan My Trip button */
.plan-cta{position:relative;overflow:hidden}
.plan-cta::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:planSheen 3.6s ease-in-out infinite}
@keyframes planSheen{0%{left:-60%}55%{left:120%}100%{left:120%}}
.plan-spark{width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;
  --spark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l1.9 5.7L19.6 9l-5.7 1.9L12 16.6l-1.9-5.7L4.4 9l5.7-1.3L12 2zm6.5 11l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9.9-2.6z'/></svg>");
  animation:sparkPulse 2.4s ease-in-out infinite}
@keyframes sparkPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
@media(prefers-reduced-motion:reduce){.plan-cta::after,.plan-spark{animation:none}}

/* floating WhatsApp — friendlier */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:70;background:#1FA855;color:#fff;border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:.88rem;box-shadow:0 6px 26px rgba(31,168,85,.42);line-height:1.15}
.wa-float:hover{background:#178A45;color:#fff;transform:translateY(-2px)}
.wa-float span{display:block}
@media(max-width:640px){.wa-float{padding:11px 16px;font-size:.8rem}}

/* city cards — the label sits on its own panel so it reads over any photo */
.city-card{min-height:210px;align-items:flex-end}
.city-card::after{background:linear-gradient(180deg,rgba(8,14,12,0) 40%,rgba(8,14,12,.34) 100%)}
.cc-text{padding:16px;width:100%}
.cc-text>b,.cc-text>small{display:block}
.cc-text{background:linear-gradient(180deg,rgba(8,14,12,0),rgba(8,14,12,.86) 55%)}
.city-card b,.city-card:hover b,.city-card:focus b{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.city-card small,.city-card:hover small{color:#E4EAE7;text-shadow:0 1px 8px rgba(0,0,0,.7);font-size:.84rem}
.city-card:hover{color:#fff}

/* recommendation carousel — arrows either side, auto-advancing */
.bkp-rec-wrap{position:relative}
.bkp-rec-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;
  border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink);font-size:1.25rem;
  line-height:1;cursor:pointer;transition:.15s;box-shadow:0 3px 12px rgba(23,27,35,.2);padding-bottom:2px}
.bkp-rec-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.bkp-rec-prev{left:-15px}
.bkp-rec-next2{right:-15px}
@media(max-width:1100px){.bkp-rec-prev{left:2px}.bkp-rec-next2{right:2px}}

/* Plan My Trip page */
.plan-hero{padding:44px 0 30px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr}}
.plan-side{position:sticky;top:96px}
.plan-intro h2{font-size:1.3rem;margin-bottom:14px}
.plan-steps{list-style:none;counter-reset:p;display:grid;gap:16px}
.plan-steps li{position:relative;padding-left:44px}
.plan-steps li::before{counter-increment:p;content:counter(p);position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:999px;background:var(--accent-tint);color:var(--accent-deep);font-weight:800;font-size:.86rem;
  display:flex;align-items:center;justify-content:center}
.plan-steps b{display:block;color:var(--ink);font-size:.98rem}
.plan-steps span{font-size:.88rem;color:var(--muted)}
.plan-note{margin-top:20px;padding:14px 16px;background:var(--accent-soft);border:1px solid #d5e7e1;
  border-radius:10px;font-size:.87rem}
.plan-stage{background:var(--ivory);border:1px solid var(--border);border-radius:var(--radius);padding:44px 26px;text-align:center}
.plan-anim{display:flex;justify-content:center;gap:9px;margin-bottom:18px}
.plan-anim span{width:13px;height:13px;border-radius:999px;background:var(--accent);animation:planBounce 1.1s ease-in-out infinite}
.plan-anim span:nth-child(2){animation-delay:.16s}
.plan-anim span:nth-child(3){animation-delay:.32s}
@keyframes planBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-11px);opacity:1}}
.plan-step{font-family:var(--serif);font-size:1.06rem;color:var(--ink)}
.plan-result{background:var(--accent-soft);border:1px solid #d5e7e1;border-radius:var(--radius);padding:26px}
.plan-result h2{font-size:1.3rem;margin-bottom:10px}
.plan-result p+p{margin-top:10px}

/* ============ listing filters ============ */
.listing-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:34px;align-items:start}
@media(max-width:899px){.listing-layout{grid-template-columns:1fr;gap:18px}
  /* a sticky panel that opens to full height would trap the page on a phone */
  .ls-filters{position:static}}
.ls-filters{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 18px 20px;position:sticky;top:100px}
.ls-filters>summary{cursor:pointer;list-style:none;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center}
.ls-filters>summary::-webkit-details-marker{display:none}
.ls-filters>summary::after{content:"+";margin-left:auto;font-size:1.2rem;line-height:1;color:var(--accent)}
.ls-filters[open]>summary::after{content:"\2013"}
.ls-filters[open]>summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
@media(min-width:900px){.ls-filters>summary{display:none}.ls-filters{position:sticky}}
.lsf-group+.lsf-group{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.lsf-group h3{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:9px}
.ls-opt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.89rem;cursor:pointer;color:var(--ink)}
.ls-opt input{width:16px;height:16px;accent-color:var(--accent);flex:none;margin:0;cursor:pointer}
.ls-opt span{flex:1;min-width:0}
.ls-opt em{font-style:normal;font-size:.75rem;color:var(--muted)}
.ls-opt:hover span{color:var(--accent)}
.ls-clear{margin-top:16px;background:none;border:1px solid var(--border);border-radius:999px;
  padding:7px 15px;font-size:.79rem;font-weight:600;cursor:pointer;color:var(--ink);font-family:var(--sans)}
.ls-clear:hover{border-color:var(--accent);color:var(--accent)}
.ls-count{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.ls-count b{color:var(--ink)}
.ls-empty{padding:34px 0;color:var(--muted);font-size:.95rem}
.ls-group+.ls-group{margin-top:38px}
.ls-group .row-head{margin-bottom:18px}
.tour-card[hidden],.ls-group[hidden]{display:none!important}

/* ============ social band ============ */
/* Built to read as an Instagram feed: profile bar, then photographs only.
   Nothing is written over the pictures. */
.social-band{background:var(--ivory)}
.ig-card{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--border);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lift)}
.ig-head{display:flex;align-items:center;gap:15px;padding:16px 20px}
.ig-avatar{width:58px;height:58px;flex:none;border-radius:50%;padding:3px;
  background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.ig-avatar i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--accent-deep);color:#fff;font-family:var(--serif);font-size:1.02rem;
  font-weight:700;font-style:normal;letter-spacing:.04em;border:2px solid #fff}
.ig-id{min-width:0}
.ig-id b{display:block;font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1.2}
.ig-id small{display:block;font-size:.86rem;color:var(--muted);margin-top:2px}
.ig-stats{display:flex;gap:26px;margin-left:22px}
.ig-stats span{text-align:center}
.ig-stats b{display:block;font-size:1rem;font-weight:700;color:var(--ink);line-height:1.2}
.ig-stats small{display:block;font-size:.78rem;color:var(--muted)}
.ig-follow{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none;
  background:#0095F6;color:#fff;border-radius:10px;padding:10px 18px;font-weight:700;font-size:.92rem}
.ig-follow:hover{background:#0077C6;color:#fff}
.ig-follow svg{width:19px;height:19px;flex:none}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:var(--border)}
.ig-tile{display:block;overflow:hidden;background:#e8e6dd;aspect-ratio:1}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ig-tile:hover img{transform:scale(1.06)}
@media(max-width:680px){
  .ig-head{flex-wrap:wrap;gap:12px;padding:14px 15px}
  .ig-avatar{width:50px;height:50px}
  .ig-stats{margin-left:0;order:3;flex-basis:100%;justify-content:space-around;gap:0}
  .ig-follow{padding:9px 15px;font-size:.86rem}
}

/* ============ footer contact icons ============ */
.footer-contact{margin-top:20px;padding-top:16px;border-top:1px solid #232a35;
  display:flex;gap:10px;flex-wrap:wrap}
.fc-ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid #2b3340;background:#1a212b;color:#cfd4dc;transition:.15s}
.fc-ico:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.fc-ico.wa:hover{background:#1FA855;border-color:#1FA855}
.fc-ico .wa-ico{width:19px;height:19px;vertical-align:0}

/* An itinerary stop opens one photograph — no arrows, no counter, just a close button.
   The gallery under the title keeps the full slider. */
.lightbox.is-single .lb-prev,.lightbox.is-single .lb-next,.lightbox.is-single .lb-count{display:none}

/* ============ contact tiles (About + Contact) ============ */
.ct-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ct-tile{display:flex;align-items:center;gap:14px;padding:15px 18px;background:#fff;
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);transition:.15s}
.ct-tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.ct-ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--ivory);color:var(--accent-deep);border:1px solid var(--border)}
.ct-ico.wa{background:#1FA855;color:#fff;border-color:#1FA855}
.ct-ico .wa-ico{width:21px;height:21px;vertical-align:0}
.ct-txt{min-width:0}
.ct-txt small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.ct-txt b{display:block;font-size:.95rem;color:var(--ink);font-weight:600;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis}
.ct-tile:hover .ct-txt b{color:var(--accent)}
.ct-note{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:.87rem;color:var(--muted)}
.ct-note .wa-ico{width:17px;height:17px;vertical-align:0;color:var(--accent)}
.ct-facts{list-style:none;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.ct-facts li{padding:9px 0;font-size:.94rem;color:var(--ink)}
.ct-facts strong{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;font-weight:700}
/* the contact page card holds the tiles in one column — the grid outside is already two-up */
.contact-card .ct-tiles{grid-template-columns:1fr}

/* ============ vehicles page ============ */
.veh-nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.veh-nav a{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 16px;
  font-size:.83rem;font-weight:600;color:var(--ink)}
.veh-nav a:hover{border-color:var(--accent);color:var(--accent)}
.veh-row{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.veh-row.flip .veh-shot{order:2}
@media(max-width:880px){.veh-row{grid-template-columns:1fr;gap:24px}.veh-row.flip .veh-shot{order:0}}
.veh-shot{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);
  border:1px solid var(--border);background:#fff}
.veh-shot img{display:block;width:100%;height:auto}
.veh-copy h2{margin-top:4px}
.veh-copy p{margin-top:12px;color:var(--body)}
.veh-facts{list-style:none;margin-top:20px;border-top:1px solid var(--border)}
.veh-facts li{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border)}
.veh-facts small{flex:none;width:44%;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.veh-facts span{font-size:.94rem;color:var(--ink)}
@media(max-width:520px){.veh-facts li{flex-direction:column;gap:3px}.veh-facts small{width:auto}}

/* ============ cart: header button, drawer, checkout lines ============ */
.cart-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--border);background:#fff;border-radius:50%;cursor:pointer;color:var(--ink);
  margin-left:14px;transition:.15s}
.cart-btn:hover{border-color:var(--accent);color:var(--accent)}
.cart-btn svg{width:21px;height:21px}
.cart-btn.has-items{border-color:var(--accent);color:var(--accent)}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
@keyframes cart-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.cart-btn.bump{animation:cart-bump .34s ease}
@media(max-width:940px){.cart-btn{margin-left:auto;margin-right:8px;order:-1}}

.cart-drawer{position:fixed;inset:0;z-index:210;display:none}
.cart-drawer.open{display:block}
.cd-scrim{position:absolute;inset:0;background:rgba(12,16,14,.5)}
.cd-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--ivory);
  display:flex;flex-direction:column;box-shadow:-18px 0 60px rgba(0,0,0,.28);animation:cd-in .22s ease}
@keyframes cd-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.cd-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  background:var(--accent-deep);color:#fff}
.cd-head h2{font-family:var(--serif);font-size:1.2rem;color:#fff}
.cd-close{background:none;border:0;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;padding:0 4px}
.cd-body{flex:1;overflow-y:auto;padding:18px}
.cd-empty{text-align:center;padding:44px 14px;color:var(--muted)}
.cd-empty b{color:var(--ink)}
.cd-empty .btn{margin-top:18px}
.cd-item{display:grid;grid-template-columns:88px 1fr;gap:13px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:13px;margin-bottom:13px}
.cd-thumb{display:block;border-radius:9px;overflow:hidden;aspect-ratio:1;background:#e8e6dd}
.cd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cd-main{min-width:0}
.cd-main h3{font-size:.97rem;line-height:1.3}
.cd-main h3 a{color:var(--ink)}
.cd-main h3 a:hover{color:var(--accent)}
.cd-opt{font-size:.8rem;color:var(--muted);margin-top:2px}
.cd-date{margin-top:9px}
.cd-date .kl-date-field{padding:8px 10px;font-size:.83rem}
.cd-steppers{display:flex;gap:10px;margin-top:9px;flex-wrap:wrap}
.cd-stp small{display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.cd-stp>span{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:#fff}
.cd-stp button{width:28px;height:28px;border:0;background:none;cursor:pointer;font-size:1rem;color:var(--ink);line-height:1}
.cd-stp button:hover{color:var(--accent)}
.cd-stp output{min-width:20px;text-align:center;font-size:.86rem;font-weight:600}
.cd-chips,.bkp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.cd-chip,.bkp-chip{background:var(--ivory);border:1px solid var(--border);border-radius:999px;
  padding:3px 9px;font-size:.72rem;color:var(--muted)}
.cd-line-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:11px}
.cd-price b{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.cd-price small{display:block;font-size:.72rem;color:var(--muted)}
.cd-remove,.bkp-remove{background:none;border:0;padding:0;font-size:.78rem;color:var(--muted);
  cursor:pointer;text-decoration:underline;font-family:var(--sans)}
.cd-remove:hover,.bkp-remove:hover{color:var(--red)}
.cd-foot{padding:16px 18px 20px;background:#fff;border-top:1px solid var(--border)}
.cd-sum{display:flex;align-items:baseline;justify-content:space-between}
.cd-sum small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cd-total{font-family:var(--serif);font-size:1.5rem;color:var(--ink)}
.cd-note{font-size:.76rem;color:var(--muted);margin:8px 0 12px}
.cd-checkout{display:block;text-align:center}
.cd-keep{display:block;width:100%;margin-top:9px;background:none;border:0;font-size:.83rem;
  color:var(--muted);cursor:pointer;text-decoration:underline;font-family:var(--sans)}

/* checkout lines on /booking/ */
.bkp-line{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.bkp-line:first-child{padding-top:0}
.bkp-thumb{display:block;border-radius:10px;overflow:hidden;aspect-ratio:1;background:#e8e6dd}
.bkp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bkp-line-main{min-width:0}
.bkp-line-main h3{font-size:1rem}
.bkp-line-main h3 a{color:var(--ink)}
.bkp-opt{font-size:.83rem;color:var(--muted);margin-top:2px}
.bkp-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:11px}
.bkp-date{min-width:210px}
.bkp-date .kl-date-field{padding:8px 11px;font-size:.85rem}
.bkp-stp small{display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.bkp-stp>span{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:#fff}
.bkp-stp button{width:30px;height:30px;border:0;background:none;cursor:pointer;font-size:1.05rem;color:var(--ink)}
.bkp-stp button:hover{color:var(--accent)}
.bkp-stp output{min-width:22px;text-align:center;font-size:.88rem;font-weight:600}
.bkp-line-price{text-align:right;white-space:nowrap}
.bkp-line-price b{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.bkp-line-price small{display:block;font-size:.74rem;color:var(--muted);margin-bottom:6px}
@media(max-width:620px){
  .bkp-line{grid-template-columns:70px minmax(0,1fr);gap:11px}
  .bkp-line-price{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:12px}
  .bkp-line-price small{margin-bottom:0}
  /* flex-basis, not min-width — min-width:100% on a flex item resolves against the
     content-sized row and blows the layout out past the viewport */
  .bkp-date{flex:1 1 100%;min-width:0}
}

/* ============ Bokun card (the second booking card type) ============ */
.bokun-card .bokun-body{padding:18px 20px 22px}
.bokun-slot{min-height:320px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.bokun-frame{display:block;width:100%;height:560px;border:0}
.bokun-note{font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:14px}
.bokun-demo{font-size:.76rem;background:#FFF6E8;border:1px solid #F0DCBB;border-left:4px solid #E0A33A;
  border-radius:9px;padding:9px 12px;margin-bottom:12px;color:#8A5A11}
.bokun-demo code{font-size:.72rem;background:rgba(0,0,0,.05);padding:1px 4px;border-radius:4px}
.bokun-wa{display:flex;width:100%;margin-top:14px}

/* ============ header menus ============ */
/* Opens on hover and on keyboard focus. The panel is always in the DOM and only
   fades/lifts, so the transition is quick (150ms) and never janky. A padded bridge
   above it means the pointer can travel from the label to the panel without a gap. */
.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  cursor:pointer;font-family:var(--sans);font-size:.93rem;font-weight:500;color:var(--ink);
  line-height:inherit}
.nav-top:hover,.nav-item:hover .nav-top,.nav-item.is-active .nav-top{color:var(--accent)}
.nav-caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .16s ease}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(225deg) translate(-2px,-2px)}
.nav-menu{position:absolute;top:100%;left:50%;z-index:60;padding-top:14px;
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.nav-menu-in{min-width:230px;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 44px rgba(15,22,19,.16);padding:8px;display:flex;flex-direction:column}
.nav-menu-in a{display:block;padding:10px 14px;border-radius:9px;font-size:.92rem;
  color:var(--ink);white-space:nowrap;transition:background .12s ease,color .12s ease}
.nav-menu-in a:hover{background:var(--ivory);color:var(--accent)}
.nav-menu-in a[aria-current]{color:var(--accent);font-weight:600}
.nav-menu-in .nm-all{margin-top:6px;padding-top:12px;border-top:1px solid var(--border);
  border-radius:0 0 9px 9px;font-size:.83rem;font-weight:600;color:var(--muted)}
.nav-menu-in .nm-all:hover{background:none;color:var(--accent)}

@media(max-width:940px){
  /* no hover on a phone: the label becomes a tap-to-open row */
  .nav-item{width:100%}
  .nav-top{width:100%;justify-content:space-between;padding:6px 0;font-size:1rem}
  .nav-caret{transform:rotate(45deg)}
  .nav-item.open .nav-caret{transform:rotate(225deg) translate(-2px,-2px)}
  .nav-menu{position:static;transform:none;opacity:1;visibility:visible;padding-top:0;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
  .nav-item.open .nav-menu{grid-template-rows:1fr}
  .nav-menu-in{overflow:hidden;min-width:0;border:0;box-shadow:none;padding:0 0 0 12px;
    border-left:2px solid var(--border);margin:2px 0 8px;border-radius:0}
  .nav-menu-in a{padding:9px 6px;white-space:normal}
  .nav-menu-in .nm-all{border-top:0;padding-top:9px;margin-top:0}
}

/* ============ header layout: brand left, menus centre-left, actions right ============ */
.nav-row{gap:26px}
.main-nav{margin-right:auto}
.nav-actions{display:flex;align-items:center;gap:14px;flex:none}
.desk-only{display:inline-flex}
.mob-only{display:none}
.cart-btn{margin-left:0}
@media(max-width:940px){
  .desk-only{display:none}
  .mob-only{display:block}
  .main-nav .nav-cta.mob-only{display:inline-flex;margin-top:6px}
  .nav-actions{margin-left:auto}
}

/* ============ awards strip: logo above, one line of proof below ============ */
.awards-strip .container{gap:20px 60px;padding-top:26px;padding-bottom:26px}
.award{flex-direction:column;align-items:center;gap:11px;text-align:center;max-width:280px}
.award strong{font-family:var(--serif);font-size:.95rem;color:var(--ink);font-weight:600;white-space:normal}
.aw-logo{width:auto;flex:none;display:block}
.aw-logo.ta{height:23px}
.aw-logo.via{height:23px}
.aw-logo.gyg{height:34px}
.award-chip{gap:9px}
.award-chip .aw-logo.ta,.award-chip .aw-logo.via{height:14px}
.award-chip .aw-logo.gyg{height:20px}
@media(max-width:760px){.awards-strip .container{gap:22px 30px}.award{max-width:none;flex-basis:100%}}

/* ============ vehicle picker on the product page ============ */
.vp-intro{color:var(--body);margin-bottom:16px}
.veh-picker{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.vp-item+.vp-item{border-top:1px solid var(--border)}
.vp-head{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;background:none;
  border:0;cursor:pointer;font-family:var(--sans);text-align:left;transition:background .15s ease}
.vp-head:hover{background:var(--ivory)}
.vp-name{font-weight:600;font-size:.98rem;color:var(--ink)}
.vp-pax{font-size:.83rem;color:var(--muted);margin-left:auto}
.vp-caret{width:9px;height:9px;flex:none;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease}
.vp-item.open .vp-head{background:var(--ivory)}
.vp-item.open .vp-name{color:var(--accent)}
.vp-item.open .vp-caret{transform:rotate(225deg) translate(-3px,-3px);border-color:var(--accent)}
/* 0fr -> 1fr gives a real height animation without measuring anything in JS */
.vp-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.vp-item.open .vp-panel{grid-template-rows:1fr}
.vp-panel-in{overflow:hidden;min-height:0}
.vp-panel-in img{display:block;width:100%;height:auto;border-top:1px solid var(--border)}
.vp-panel-in p{padding:13px 18px 16px;font-size:.9rem;color:var(--body);background:var(--ivory)}
.vp-foot{margin-top:14px;font-size:.86rem;color:var(--muted)}

/* ============ quick-view traveler steppers ============ */
.qv-group{background:var(--ivory);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:10px}
.qv-pax{font-size:.83rem;color:var(--muted);margin-bottom:12px}
.qv-steppers{display:grid;gap:10px}
.qv-stp{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.qv-stp-label b{display:block;font-size:.92rem;color:var(--ink)}
.qv-stp-label small{display:block;font-size:.75rem;color:var(--muted)}
.qv-stp-ctl{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;flex:none}
.qv-stp-ctl button{width:32px;height:32px;border:0;background:none;cursor:pointer;font-size:1.05rem;color:var(--ink)}
.qv-stp-ctl button:hover{color:var(--accent)}
.qv-stp-ctl output{min-width:24px;text-align:center;font-size:.92rem;font-weight:600}

/* ============ options outrank add-ons ============ */
/* Zaidu: the option is the big decision, the add-on is a small extra — the type sizes
   have to say so, on the product page and in the quick-view alike. */
.bk-opt{padding:18px 20px;margin-bottom:12px;border-width:2px}
.bk-opt-main b{font-size:1.12rem;font-family:var(--serif);font-weight:600;letter-spacing:.01em}
.bk-opt-blurb{font-size:.92rem}
.bk-opt input{width:20px;height:20px;margin-top:3px}
.bk-opt-price b{font-size:1.25rem}

.bk-add{padding:12px 14px;margin-bottom:8px;border-width:1px}
.bk-add-main b{font-size:.94rem;font-weight:600}
.bk-add-note{font-size:.8rem}
.bk-add input{width:17px;height:17px}
.bk-add .bk-opt-price b{font-size:1.02rem}

/* the same order of importance inside the quick-view */
.qv-opt{padding:16px 18px;border-width:2px}
.qv-opt span b{font-size:1.1rem;font-family:var(--serif);font-weight:600}
.qv-opt span small{font-size:.9rem}
.qv-step-opts>h4,.qv-sec>h4{font-size:.74rem}
.qv-step-opts>h4{font-size:.8rem;color:var(--ink)}

/* ============ quick-view group block ============ */
.qv-pax b{color:var(--accent-deep);font-weight:700}
.qv-pax{font-size:.86rem;line-height:1.5}
.qv-group{margin-bottom:18px}
.qv-sec .qv-date{margin-top:4px}

/* ============ header: brand alone on the left, everything else on the right ============ */
/* Zaidu: the menus must not sit next to the logo — they travel right and sit with
   Plan My Trip and the cart as one group. */
.nav-row{gap:22px;justify-content:space-between}
.main-nav{margin-left:auto;margin-right:0;gap:26px}
.nav-actions{gap:16px}
@media(min-width:941px){
  .main-nav{margin-right:8px}
}
@media(max-width:940px){
  .main-nav{margin-left:0}
}

/* ============ awards strip: one line each, real gaps between the marks ============ */
.awards-strip .container{gap:18px 54px;padding-top:24px;padding-bottom:24px;flex-wrap:nowrap}
.award{max-width:none;gap:12px}
.award strong{font-size:.9rem;white-space:nowrap}
.aw-logo.ta{height:26px}
.aw-logo.via{height:22px}
.aw-logo.gyg{height:32px}
@media(max-width:1080px){
  .awards-strip .container{flex-wrap:wrap;gap:22px 34px}
  .award strong{white-space:normal}
}

/* vehicle intro sits on one line */
.vp-intro{font-size:.92rem}

/* ============ footer contact icons: each one wakes up in its own brand colour ============ */
.brand-grads{position:absolute;width:0;height:0;overflow:hidden}
.fc-ico:hover{background:#fff;border-color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
/* the envelope takes Gmail's four colours; the stroke can reference an SVG gradient by id */
.fc-ico.mail:hover svg{stroke:url(#gmailGrad)}
/* the classic call green */
.fc-ico.tel:hover{color:#34C759}
.fc-ico.wa:hover{background:#fff;border-color:#fff;color:#25D366}
.fc-ico.ig:hover svg{stroke:url(#igGrad)}
.fc-ico.ig:hover{color:#D62976}

/* ============ awards: one shared logo slot so the three columns line up ============ */
/* GetYourGuide's mark is stacked and taller than the two wordmarks, which pushed its
   caption lower. A fixed-height row centres every mark and puts all three captions
   on the same line. */
.award{display:grid;grid-template-rows:36px auto;align-items:center;justify-items:center;gap:12px}
.award>img{align-self:center}
.aw-logo.gyg{height:30px}

/* ============ motion ============ */
/* Every rule here is gated on `.motion`, which motion.js only adds when JavaScript runs
   and the traveler has not asked for reduced motion. Without it the page is fully
   visible and completely still — which is what a crawler and a screen reader get. */

/* the hero settles in on load: eyebrow, headline, list, award, buttons, in that order */
@media (prefers-reduced-motion: no-preference) {
  .motion .hero .eyebrow,
  .motion .hero h1,
  .motion .hero-ticks li,
  .motion .hero-award,
  .motion .hero .btn-row {
    animation: kl-rise .62s cubic-bezier(.22,.68,.32,1) backwards;
  }
  .motion .hero .eyebrow   { animation-delay: .05s }
  .motion .hero h1         { animation-delay: .13s }
  .motion .hero-ticks li:nth-child(1) { animation-delay: .26s }
  .motion .hero-ticks li:nth-child(2) { animation-delay: .32s }
  .motion .hero-ticks li:nth-child(3) { animation-delay: .38s }
  .motion .hero-ticks li:nth-child(4) { animation-delay: .44s }
  .motion .hero-ticks li:nth-child(5) { animation-delay: .50s }
  .motion .hero-award      { animation-delay: .58s }
  .motion .hero .btn-row   { animation-delay: .68s }
}
@keyframes kl-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0) }
  to   { opacity: 1; transform: none }
}

/* anything further down rises as it enters the viewport */
.motion .rise {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.68,.32,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.motion .rise.in { opacity: 1; transform: none; will-change: auto }

/* cards lean toward the pointer — transform only, so nothing reflows */
.motion .tilt {
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,.68,.32,1), box-shadow .3s ease;
}
.motion .tour-card.tilt:hover { box-shadow: 0 22px 48px rgba(15,22,19,.20) }
.motion .ig-tile.tilt:hover   { box-shadow: 0 20px 44px rgba(15,22,19,.24) }
/* the photo inside a tilted card lifts a touch further, which is what reads as depth */
.motion .tour-card.tilt .tc-art { transition: transform .45s cubic-bezier(.22,.68,.32,1) }
.motion .tour-card.tilt:hover .tc-art { transform: scale(1.05) translateZ(18px) }

/* the hero photograph drifts slower than the words on top of it */
.motion .hero .hero-bg { will-change: transform }

/* small lifts that make the page feel answerable */
.motion .award { transition: transform .3s cubic-bezier(.22,.68,.32,1) }
.motion .award:hover { transform: translateY(-3px) }
.motion .vp-item .vp-head { transition: background .15s ease, padding-left .22s ease }
.motion .vp-item:hover .vp-head { padding-left: 22px }

/* touch devices get the reveals but never the tilt or the parallax */
@media (hover: none), (pointer: coarse) {
  .motion .tilt { transform: none !important; transition: box-shadow .3s ease }
  .motion .tour-card.tilt:hover .tc-art { transform: none }
}

/* the parallax transform scales the hero photograph past its own box; without this the
   image spilled down over the awards strip and hid the three logos */
.motion .hero{overflow:hidden}

/* ============ Plan My Trip ============================================
   Four questions, a 3D assembly while it builds, then an itinerary written in
   the same language as a tour page. Everything below is plain CSS — the whole
   planner adds no library to the page. */

.plan-block{padding-top:30px}
.plan-card{background:var(--white);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:8px 30px 28px;max-width:880px;margin:0 auto;
  transition:opacity .25s ease}
.plan-card.is-busy{opacity:.42;pointer-events:none}
.pl-qs{list-style:none;margin:0;padding:0}
.pl-q{padding:26px 0;border-bottom:1px solid var(--border)}
.pl-q:last-child{border-bottom:0}
.pl-qhead{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.pl-num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:.9rem;font-weight:600;margin-top:1px}
.pl-qhead b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--ink);line-height:1.3}
.pl-qhead small{display:block;color:var(--muted);font-size:.9rem;margin-top:2px;line-height:1.5}

/* --- 1. destinations --- */
.pl-dest{border:1px solid var(--border);border-radius:11px;padding:8px 10px;background:var(--ivory);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;transition:border-color .16s,box-shadow .16s}
.pl-dest:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.pl-tags{display:contents}
.pl-tag{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;
  border-radius:999px;padding:5px 6px 5px 13px;font-size:.9rem;font-weight:500;white-space:nowrap}
.pl-tag button{background:rgba(255,255,255,.2);border:0;color:#fff;width:19px;height:19px;border-radius:50%;
  cursor:pointer;font-size:.95rem;line-height:1;display:grid;place-items:center;padding:0}
.pl-tag button:hover{background:rgba(255,255,255,.36)}
#pl-dest{flex:1 1 190px;min-width:150px;border:0;background:none;outline:0;padding:7px 4px;
  font:inherit;font-size:.98rem;color:var(--ink)}
.pl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pl-chip{border:1px solid var(--border);background:var(--white);border-radius:999px;padding:6px 14px;
  font:inherit;font-size:.88rem;color:var(--body);cursor:pointer;transition:all .15s}
.pl-chip:hover{border-color:var(--accent);color:var(--accent-dark)}
.pl-chip.is-on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-dark);font-weight:500}

/* --- 2. when --- */
.pl-seg{display:inline-flex;background:var(--sand);border-radius:10px;padding:4px;gap:4px;margin-bottom:16px}
.pl-segbtn{border:0;background:none;font:inherit;font-size:.92rem;padding:8px 16px;border-radius:7px;
  cursor:pointer;color:var(--muted);transition:all .16s}
.pl-segbtn.is-on{background:var(--white);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(23,27,35,.12)}
.pl-months{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.pl-month{border:1px solid var(--border);background:var(--white);border-radius:9px;padding:11px 4px;
  font:inherit;font-size:.9rem;color:var(--body);cursor:pointer;transition:all .15s}
.pl-month:hover{border-color:var(--accent)}
.pl-month.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pl-yr{display:flex;align-items:center;gap:10px;margin-top:12px}
.pl-yr label{font-size:.9rem;color:var(--muted);margin:0}
.pl-yr select,.pl-len select{border:1px solid var(--border);border-radius:9px;padding:9px 12px;
  font:inherit;font-size:.95rem;background:var(--white);color:var(--ink)}
.pl-len{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px dashed var(--border)}
.pl-len label{font-size:.95rem;color:var(--body);margin:0}
.pl-season{margin-top:14px;display:grid;gap:8px}
.pl-season span{display:block;background:#FFF8E8;border:1px solid #EBD9A8;border-left:3px solid var(--laurel);
  border-radius:8px;padding:10px 13px;font-size:.88rem;color:#5C4A1E;line-height:1.55}

/* --- 3. travelers --- */
.pl-pax{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pl-veh{margin-top:12px;font-size:.9rem;color:var(--accent-dark);font-weight:500}

/* --- 4. free text --- */
#pl-notes{width:100%;border:1px solid var(--border);border-radius:11px;padding:13px 14px;font:inherit;
  font-size:.98rem;background:var(--ivory);color:var(--ink);resize:vertical;line-height:1.6}
#pl-notes:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}

.pl-go{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn-lg{padding:15px 30px;font-size:1.02rem}
.pl-fine{margin-top:14px;font-size:.84rem;color:var(--muted);line-height:1.6}

@media(max-width:640px){
  .plan-card{padding:4px 18px 22px;border-radius:13px}
  .pl-months{grid-template-columns:repeat(4,1fr)}
  .pl-pax{grid-template-columns:1fr}
  .pl-go .btn{width:100%;justify-content:center}
}

/* ---- the 3D assembly -------------------------------------------------
   Cards carrying the traveler's own answers fly in and stack into a route.
   Transform and opacity only, so it is free to run. With reduced motion the
   cards simply sit in place and the step text carries the news instead. */
.plan-stage{max-width:880px;margin:0 auto;text-align:center;padding:18px 20px 30px}
.asm{position:relative;height:238px;perspective:900px;perspective-origin:50% 38%}
.asm-scene{position:absolute;inset:0;transform-style:preserve-3d}
.asm-plate{position:absolute;left:50%;bottom:26px;width:270px;height:34px;margin-left:-135px;
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(19,84,74,.16),transparent 70%)}
.asm-card{position:absolute;left:50%;top:50%;width:214px;margin:-30px 0 0 -107px;
  padding:9px 15px;border-radius:10px;text-align:left;
  background:linear-gradient(180deg,#fff,#FCFBF7);border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(23,27,35,.13);transform-style:preserve-3d;
  animation:asm-fly 3.8s cubic-bezier(.32,.78,.36,1) infinite backwards;
  animation-delay:calc(var(--i) * .26s)}
.asm-card b{display:block;font-family:var(--serif);font-size:.98rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asm-card span{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@keyframes asm-fly{
  0%   {opacity:0;transform:translate3d(-90px,-170px,-520px) rotateX(58deg) rotateZ(-14deg) scale(.86)}
  26%  {opacity:1}
  54%  {opacity:1;transform:translate3d(0,calc(var(--i) * 15px - 48px),calc(var(--i) * 9px)) rotateX(47deg) rotateZ(0deg) scale(1)}
  88%  {opacity:1;transform:translate3d(0,calc(var(--i) * 15px - 48px),calc(var(--i) * 9px)) rotateX(47deg) rotateZ(0deg) scale(1)}
  100% {opacity:0;transform:translate3d(0,calc(var(--i) * 15px - 62px),calc(var(--i) * 9px + 40px)) rotateX(47deg) scale(1.02)}
}
.asm-step{font-family:var(--serif);font-size:1.14rem;color:var(--ink);margin-top:4px}
.asm-bar{width:min(420px,80%);height:4px;border-radius:4px;background:var(--sand);margin:16px auto 0;overflow:hidden}
.asm-bar i{display:block;height:100%;width:6%;border-radius:4px;background:var(--accent);
  transition:width .9s cubic-bezier(.3,.8,.4,1)}
.asm-cancel{margin-top:16px;background:none;border:0;font:inherit;font-size:.86rem;color:var(--muted);
  text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion: reduce){
  .asm-card{animation:none;opacity:1;
    transform:translate3d(0,calc(var(--i) * 15px - 48px),0) scale(.96)}
}

/* ---- the itinerary --------------------------------------------------- */
.plan-result{max-width:880px;margin:0 auto;padding-top:8px}
.pr-head{border-bottom:1px solid var(--border);padding-bottom:22px;margin-bottom:8px}
.pr-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--ink);margin:4px 0 16px}
.pr-meta{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;padding:0;margin:0 0 16px}
.pr-meta li{background:var(--accent-soft);border-radius:10px;padding:11px 14px}
.pr-meta small{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-meta span{display:block;font-weight:600;color:var(--ink);font-size:.96rem;margin-top:2px}
.pr-intro{color:var(--body);line-height:1.75;max-width:68ch}
.pr-season{background:#FFF8E8;border:1px solid #EBD9A8;border-radius:11px;padding:15px 18px;margin:20px 0}
.pr-season b{display:block;font-family:var(--serif);color:#5C4A1E;margin-bottom:6px}
.pr-season ul{margin:0;padding-left:19px;color:#5C4A1E;font-size:.91rem;line-height:1.65}
.pr-sec{padding:28px 0;border-bottom:1px solid var(--border)}
.pr-sec:last-child{border-bottom:0}
.pr-sec h3{font-family:var(--serif);font-size:1.42rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.pr-sub{color:var(--muted);font-size:.94rem;margin-bottom:16px;line-height:1.65}

.pr-days{display:grid;gap:9px;margin-top:14px}
.pr-day{border:1px solid var(--border);border-radius:11px;background:var(--white);overflow:hidden}
.pr-day summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 17px;transition:background .15s}
.pr-day summary::-webkit-details-marker{display:none}
.pr-day summary:hover{background:var(--accent-soft)}
.pr-dnum{flex:none;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:var(--accent);border-radius:5px;padding:4px 8px;font-weight:600}
.pr-dtitle{flex:1;font-weight:600;color:var(--ink);font-size:1rem}
.pr-tag{flex:none;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  border-radius:5px;padding:4px 8px;font-weight:600}
.pr-ours{background:var(--accent-tint);color:var(--accent-dark)}
.pr-custom{background:#F3EEE1;color:#7A6634}
.pr-dbody{padding:2px 17px 17px 17px;border-top:1px solid var(--border)}
.pr-dbody p{color:var(--body);line-height:1.7;margin:12px 0}
.pr-stops{margin:12px 0 0;padding-left:20px;color:var(--body);line-height:1.75}
.pr-stops li{margin-bottom:5px}
.pr-link{display:inline-block;margin-top:13px;font-weight:600;font-size:.92rem}

.pr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.pr-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--white);
  display:block;transition:transform .22s,box-shadow .22s}
.pr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.pr-cart{display:block;height:106px;background-size:cover;background-position:center}
.pr-cbody{display:block;padding:12px 14px 14px}
.pr-cbody b{display:block;color:var(--ink);font-size:.95rem;line-height:1.35}
.pr-cbody small{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.pr-cbody em{display:block;font-style:normal;font-weight:600;color:var(--accent-dark);font-size:.9rem;margin-top:7px}

.pr-know{margin:14px 0 0;padding-left:20px;color:var(--body);line-height:1.75}
.pr-know li{margin-bottom:9px}

.pr-ptable{width:100%;border-collapse:collapse;margin-top:14px;font-size:.95rem}
.pr-ptable th,.pr-ptable td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--border)}
.pr-ptable thead th{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pr-ptable td small{color:var(--muted);font-size:.82rem}
.pr-ptable tfoot th{font-size:1.05rem;color:var(--ink);border-bottom:0;border-top:2px solid var(--ink)}
.pr-pnote{margin-top:12px;font-size:.87rem;color:var(--muted);line-height:1.65}
.pr-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.pr-qform{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:6px;align-items:end}
.pr-f label{display:block;font-size:.86rem;color:var(--muted);margin-bottom:5px}
.pr-f input{width:100%;border:1px solid var(--border);border-radius:9px;padding:11px 13px;
  font:inherit;font-size:.96rem;background:var(--white)}
.pr-f input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
#pq-send{grid-column:1/-1;justify-self:start}
.pr-qstatus{margin-top:11px;font-size:.9rem;color:var(--muted)}
.pr-qstatus.is-ok{color:var(--green);font-weight:500}
.pr-qstatus.is-warn{color:var(--red)}
.pr-shbtns{display:flex;gap:10px;flex-wrap:wrap}
.pr-copied{margin-top:10px;font-size:.88rem;color:var(--green);font-weight:500}
.pr-again{text-align:center;padding:24px 0 8px}
@media(max-width:640px){
  .pr-qform{grid-template-columns:1fr}
  .pr-shbtns .btn{flex:1 1 100%;justify-content:center}
  .pr-day summary{flex-wrap:wrap;gap:8px}
  .pr-dtitle{flex:1 1 100%;order:3}
}

/* print-only chrome, hidden on screen */
.pr-print-head,.pr-print-foot{display:none}



/* ---- Plan My Trip: the guided flow -----------------------------------
   One question at a time. The rail is both the progress bar and the answers so
   far — every finished step shows what was said and takes you back to it. */

.pw-rail{padding:22px 0 4px}
.pw-track{position:relative;height:3px;border-radius:3px;background:var(--sand);margin:0 6% 16px}
.pw-track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--accent);
  transition:width .45s cubic-bezier(.3,.8,.35,1)}
.pw-dots{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0}
.pw-dot{width:100%;background:none;border:0;font:inherit;cursor:pointer;padding:6px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:10px;transition:background .16s}
.pw-dot:hover{background:var(--accent-soft)}
.pw-dot i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.82rem;font-weight:600;background:var(--sand);color:var(--muted);
  transition:background .25s,color .25s,transform .25s}
.pw-dot span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pw-dot em{font-style:normal;font-size:.8rem;color:var(--ink);max-width:100%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.pw-dot.is-on i{background:var(--accent);color:#fff;transform:scale(1.1)}
.pw-dot.is-on span{color:var(--accent-dark)}
.pw-dot.is-done i{background:var(--accent-tint);color:var(--accent-dark)}
.pw-dot.is-done i::before{content:"\2713"}
.pw-dot.is-done i{font-size:0}
.pw-dot.is-done i::before{font-size:.86rem}

.pw-stage{padding:8px 0 4px;min-height:330px}
.pw-step{display:none}
.pw-step.is-on{display:block}
.pw-step.from-right{animation:pw-in-r .4s cubic-bezier(.22,.72,.3,1) both}
.pw-step.from-left{animation:pw-in-l .4s cubic-bezier(.22,.72,.3,1) both}
@keyframes pw-in-r{from{opacity:0;transform:translate3d(34px,0,0)}to{opacity:1;transform:none}}
@keyframes pw-in-l{from{opacity:0;transform:translate3d(-34px,0,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .pw-step.from-right,.pw-step.from-left{animation:none}
}

.pw-ask{font-family:var(--serif);font-size:clamp(1.45rem,3vw,1.9rem);font-weight:600;
  color:var(--ink);line-height:1.25;margin:6px 0 6px}
.pw-hint{color:var(--muted);font-size:.95rem;line-height:1.65;margin-bottom:20px;max-width:56ch}
.pw-orsome{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:18px 0 9px;font-weight:600}

.pw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.pw-navr{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.pw-back{background:none;border:0;font:inherit;font-size:.94rem;color:var(--muted);cursor:pointer;
  padding:10px 2px;transition:color .15s}
.pw-back:hover{color:var(--accent-dark)}

/* the destination field grew a typeahead */
.pl-dest{position:relative}
.pl-sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;list-style:none;margin:0;padding:5px;
  background:var(--white);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-lift)}
.pl-sugg li{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.95rem;color:var(--body)}
.pl-sugg li b{color:var(--accent-dark);font-weight:700}
.pl-sugg li.is-on,.pl-sugg li:hover{background:var(--accent-soft);color:var(--ink)}

/* the route draws itself as places go in */
.pl-route{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;
  padding:13px 15px;background:var(--accent-soft);border-radius:11px}
.plr-node{background:var(--white);border:1px solid var(--accent-tint);border-radius:999px;
  padding:5px 13px;font-size:.87rem;font-weight:500;color:var(--accent-dark);white-space:nowrap;
  animation:plr-pop .34s cubic-bezier(.2,.9,.3,1.1) backwards;animation-delay:calc(var(--i) * 50ms)}
.plr-arrow{color:var(--accent);font-size:.95rem;opacity:.7}
@keyframes plr-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.plr-node{animation:none}}

/* the vehicle answers back when the group size changes */
.pl-vehcard{display:flex;align-items:center;gap:14px;margin-top:18px;padding:15px 18px;
  background:var(--accent-soft);border:1px solid var(--accent-tint);border-radius:12px}
.pv-ico{flex:none;width:46px;height:46px;border-radius:11px;background:var(--white);
  display:grid;place-items:center;color:var(--accent-dark);border:1px solid var(--accent-tint)}
.pl-vehcard b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.pl-vehcard small{display:block;font-size:.87rem;color:var(--muted);margin-top:1px}
.pl-vehcard.is-swap{animation:pv-swap .42s cubic-bezier(.2,.9,.3,1.05)}
@keyframes pv-swap{
  0%{transform:scale(.97);background:var(--accent-tint)}
  55%{transform:scale(1.012)}
  100%{transform:none;background:var(--accent-soft)}
}
@media (prefers-reduced-motion: reduce){.pl-vehcard.is-swap{animation:none}}

/* one-tap phrases under the free-text box */
.pl-moods{display:flex;flex-wrap:wrap;gap:8px}
.pl-mood{border:1px solid var(--border);background:var(--white);border-radius:999px;padding:7px 14px;
  font:inherit;font-size:.86rem;color:var(--body);cursor:pointer;transition:all .15s}
.pl-mood:hover{border-color:var(--accent);color:var(--accent-dark)}
.pl-mood.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}

@media(max-width:640px){
  .pw-stage{min-height:300px}
  .pw-dot span{display:none}
  .pw-dot em{font-size:.72rem}
  .pw-nav{flex-direction:column-reverse;align-items:stretch}
  .pw-navr{margin-left:0;flex-direction:column}
  .pw-navr .btn{width:100%;justify-content:center}
  .pw-back{text-align:center}
}

/* the nudge shown when Build is pressed with a question still open */
.pw-nudge{background:#FFF4E5;border:1px solid #F0D6A8;border-left:3px solid #C98A2B;
  border-radius:9px;padding:11px 14px;margin:0 0 18px;color:#7A5518;font-size:.92rem;line-height:1.55;
  text-align:left}
.pw-nudge.is-shake{animation:pw-shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes pw-shake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}
}
@media (prefers-reduced-motion: reduce){.pw-nudge.is-shake{animation:none}}
/* an answer nobody has given reads as unset, never as a value */
.pw-dot em:empty::before{content:"Not set yet"}

/* ============ Plan My Trip: centered flow, assembly, document ============ */

/* everything on this page reads down the middle */
.plan-hero .container{text-align:center}
.plan-hero .lead{margin-left:auto;margin-right:auto;max-width:58ch}
.plan-hero .accent-rule{margin-left:auto;margin-right:auto}
.plan-card{text-align:center}
.pw-ask{text-align:center}
.pw-hint{margin-left:auto;margin-right:auto;text-align:center}
.pw-orsome{text-align:center}
.pl-chips,.pl-moods,.pl-route,.pl-seg,.pl-months,.pl-yr,.pl-len{justify-content:center}
.pl-months{max-width:520px;margin-left:auto;margin-right:auto}
.pl-dest{max-width:620px;margin-left:auto;margin-right:auto;justify-content:center}
.pl-route{max-width:620px;margin-left:auto;margin-right:auto}
.pl-pax{max-width:560px;margin-left:auto;margin-right:auto}
.pl-vehcard{max-width:420px;margin-left:auto;margin-right:auto;text-align:left}
#pl-notes{max-width:620px;margin-left:auto;margin-right:auto;text-align:left}
.pl-moods{max-width:660px;margin-left:auto;margin-right:auto}
.pw-nav{justify-content:center}
.pw-navr{margin-left:0}
.pw-nudge{max-width:560px;margin-left:auto;margin-right:auto}
.pl-fine{text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}
.pl-chips{max-width:640px;margin-left:auto;margin-right:auto}

/* ---- the assembly: the pieces of a trip flying together ---- */
.plan-stage{max-width:760px;margin:0 auto;text-align:center;padding:26px 20px 40px}
.asm{position:relative;height:300px;display:grid;place-items:center}
.asm-scene{position:absolute;inset:0}
/* the brand sits at the center of the build — a white medallion with the logo */
.asm-core{width:172px;height:172px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--border);
  box-shadow:0 14px 40px rgba(8,46,41,.2),0 0 0 8px rgba(19,84,74,.05);
  position:relative;z-index:2;animation:asm-breathe 3.4s ease-in-out infinite}
.asm-core img{width:130px;height:auto}
@keyframes asm-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.asm-orbit{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.asm-orbit i{position:absolute;border:1px dashed var(--accent-tint);border-radius:50%}
.asm-orbit i:nth-child(1){width:250px;height:250px;animation:asm-spin 18s linear infinite}
.asm-orbit i:nth-child(2){width:330px;height:330px;animation:asm-spin 28s linear infinite reverse}
@keyframes asm-spin{to{transform:rotate(360deg)}}

/* each piece flies in from its own angle and locks onto the ring */
.asm-piece{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:7px;
  padding:6px 12px 6px 6px;border-radius:999px;white-space:nowrap;
  background:var(--white);border:1px solid var(--border);box-shadow:0 6px 18px rgba(23,27,35,.12);
  font-size:.76rem;font-weight:600;color:var(--ink);
  --a:calc(var(--i) * (360deg / var(--n)));
  --r:158px;
  /* slow on purpose: each piece takes 1.5s to arrive and they come one at a time,
     so every label can actually be read as it lands */
  animation:asm-land 1.5s cubic-bezier(.22,.75,.3,1) backwards;
  animation-delay:calc(var(--i) * .5s);
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1))}
.asm-piece .ap-ico{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-dark);display:grid;place-items:center;flex:none}
@keyframes asm-land{
  from{opacity:0;
    transform:translate(-50%,-50%) rotate(var(--a)) translateX(340px) rotate(calc(var(--a) * -1)) scale(.7)}
  60%{opacity:1}
  to{opacity:1;
    transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .asm-piece{animation:none}
  .asm-orbit i{animation:none}
}
@media(max-width:700px){
  .asm{height:280px}
  .asm-piece{--r:118px;font-size:.66rem;padding:4px 9px 4px 4px;gap:5px}
  .asm-piece .ap-ico{width:22px;height:22px}
  .asm-piece .ap-ico svg{width:14px;height:14px}
  .asm-core{width:120px;height:120px}
  .asm-core img{width:92px}
  .asm-orbit i:nth-child(1){width:180px;height:180px}
  .asm-orbit i:nth-child(2){width:246px;height:246px}
}

/* ---- the itinerary document -------------------------------------------
   Built to the same spec as the PDFs we already send: A4 proportions, logo top
   left, heavy title, dark section bands of letter-spaced capitals, cream label
   column, contact line at the foot. */
.doc-shell{max-width:940px;margin:0 auto;padding:18px 20px 70px}
.doc-shell.is-in{animation:doc-in .5s cubic-bezier(.22,.72,.3,1) both}
@keyframes doc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.doc-shell.is-in{animation:none}}

.doc-bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:11px 0;margin-bottom:14px;background:var(--white);border-bottom:1px solid var(--border)}
.docb-r{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.docb{border:1px solid var(--border);background:var(--white);border-radius:9px;padding:8px 14px;
  font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;transition:all .15s;text-decoration:none;
  display:inline-flex;align-items:center}
.docb:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-soft)}
.docb-wa{background:#25D366;border-color:#25D366;color:#fff;font-weight:600}
.docb-wa:hover{background:#1FBA59;border-color:#1FBA59;color:#fff}
.doc-copied{margin-top:12px;text-align:center;color:var(--green);font-weight:500;font-size:.92rem}

.doc{background:var(--white);border:1px solid var(--border);border-radius:4px;
  box-shadow:0 2px 6px rgba(23,27,35,.06),0 18px 50px rgba(23,27,35,.09);
  padding:44px 52px 30px;color:#1A1F2A;font-size:.95rem;line-height:1.62}
.doc-head{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;margin-bottom:26px;
  border-bottom:1px solid #E3E0D6}
.doc-logo{width:216px;height:auto}
.doc-tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8A8778}
.doc-title{font-family:var(--sans);font-weight:800;font-size:1.72rem;line-height:1.22;
  color:#1A1F2A;letter-spacing:-.005em;margin-bottom:5px}
.doc-sub{color:#6D7484;font-size:.9rem;margin-bottom:26px}
.doc-loading{padding:60px 0;text-align:center;color:var(--muted)}

/* the section band — the signature of these documents */
.doc-band{background:#1A1F2A;color:#fff;font-family:var(--sans);font-weight:700;font-size:.72rem;
  letter-spacing:.28em;padding:9px 16px;margin:30px 0 16px;border-radius:2px}

.doc-facts{width:100%;border-collapse:collapse;margin-bottom:6px}
.doc-facts th{width:168px;text-align:left;vertical-align:top;background:#F4F0E6;color:#1A1F2A;
  font-weight:700;font-size:.84rem;padding:9px 14px;border-bottom:2px solid var(--white)}
.doc-facts td{padding:9px 14px;border-bottom:1px solid #EFEDE4;font-size:.9rem;color:#3A4150}
.doc-p{margin-bottom:12px;color:#3A4150}
.doc-fine{font-size:.83rem;color:#6D7484;margin-top:10px}

.doc-note{border:1px solid #EBD9A8;background:#FFFBF0;border-left:3px solid #C98A2B;
  border-radius:4px;padding:15px 18px;margin:22px 0}
.doc-note b{display:block;color:#7A5518;margin-bottom:5px;font-size:.98rem}
.doc-note p{color:#6B5423;font-size:.89rem;line-height:1.65;margin:0}

.doc-day{margin-bottom:20px;break-inside:avoid;page-break-inside:avoid}
.doc-day h3{font-size:1.02rem;font-weight:700;color:#1A1F2A;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:7px}
.doc-day h3 span{background:#1A1F2A;color:#fff;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:3px;font-weight:700}
.doc-day h3 em{font-style:normal;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;font-weight:700}
.doc-ours{background:var(--accent-tint);color:var(--accent-dark)}
.doc-custom{background:#F3EEE1;color:#7A6634}
.doc-stops{margin:8px 0 0 0;padding-left:20px;color:#3A4150}
.doc-stops li{margin-bottom:4px}
.doc-bullets{padding-left:20px;color:#3A4150}
.doc-bullets li{margin-bottom:8px}
.doc-check,.doc-cross{list-style:none;padding:0;margin:0 0 10px;color:#3A4150}
.doc-check li,.doc-cross li{padding-left:24px;position:relative;margin-bottom:6px}
.doc-check li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:700}
.doc-cross li::before{content:"\2717";position:absolute;left:0;color:#A0392E;font-weight:700}

.doc-price{width:100%;border-collapse:collapse;margin-top:6px;font-size:.9rem}
.doc-price th,.doc-price td{text-align:left;padding:9px 14px;border-bottom:1px solid #EFEDE4}
.doc-price thead th{background:#F4F0E6;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:#1A1F2A;font-weight:700}
.doc-price tfoot th{border-top:2px solid #1A1F2A;border-bottom:0;font-size:1rem;color:#1A1F2A}

.doc-faq{margin-bottom:14px;break-inside:avoid}
.doc-faq b{display:block;color:#1A1F2A;margin-bottom:3px;font-size:.92rem}
.doc-faq p{color:#3A4150;font-size:.89rem;margin:0}

.doc-quote{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px;align-items:end;
  background:var(--accent-soft);padding:18px;border-radius:6px}
.dq-f label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px}
.dq-f input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  font:inherit;font-size:.94rem;background:var(--white)}
.doc-quote button{grid-column:1/-1;justify-self:start}
.doc-quote .pr-qstatus{grid-column:1/-1}

.doc-foot{margin-top:34px;padding-top:14px;border-top:1px solid #E3E0D6;
  font-size:.8rem;color:#6D7484;text-align:center}

@media(max-width:760px){
  .doc{padding:26px 20px 20px;border-radius:3px}
  .doc-logo{width:170px}
  .doc-title{font-size:1.4rem}
  .doc-facts th{width:120px;font-size:.78rem;padding:8px 10px}
  .doc-facts td{padding:8px 10px;font-size:.85rem}
  .doc-band{letter-spacing:.18em;font-size:.66rem;padding:8px 12px}
  .doc-quote{grid-template-columns:1fr}
  .doc-bar .docb{flex:1 1 auto;justify-content:center}
  .doc-shell{padding:12px 12px 50px}
}

/* ---- print: this is the PDF ---- */
@media print{
  body.printing-plan{background:#fff}
  body.printing-plan .site-header,
  body.printing-plan .site-footer,
  body.printing-plan .topbar,
  body.printing-plan .crumbs,
  body.printing-plan .page-hero,
  body.printing-plan #pl-block,
  body.printing-plan .doc-bar,
  body.printing-plan .doc-copied,
  body.printing-plan .doc-quote,
  body.printing-plan .cart-drawer{display:none !important}
  body.printing-plan .doc-shell{max-width:none;padding:0}
  body.printing-plan .doc{border:0;box-shadow:none;padding:0;font-size:10pt;line-height:1.5}
  body.printing-plan .doc-title{font-size:19pt}
  body.printing-plan .doc-band{background:#1A1F2A !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:9pt;letter-spacing:.26em}
  body.printing-plan .doc-facts th,
  body.printing-plan .doc-price thead th{background:#F4F0E6 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.printing-plan .dd-num{background:#1A1F2A !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.printing-plan .doc-note{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* the contact line repeats at the foot of every printed page */
  body.printing-plan .doc-foot{position:fixed;bottom:0;left:0;right:0;margin:0;
    border-top:1px solid #ddd;background:#fff;padding:5px 0;font-size:8pt}
  @page{margin:14mm 12mm 18mm}
}

/* ---- Plan My Trip: date pair, vehicle photo cards, day cards, footer ---- */

/* duration leads; the calendar is the same KLDate control as the tour pages */
.pl-len-first{margin:0 auto 20px;padding:0 0 20px;border-top:0;border-bottom:1px dashed var(--border);
  max-width:420px;justify-content:center}
.pl-daterow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.pl-datecol{min-width:250px;text-align:left}
.pl-datecol>small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:7px;text-align:center}
.pl-dateend{border:1px solid var(--border);border-radius:11px;background:var(--sand);
  padding:13px 16px;font-size:.95rem;color:var(--ink);font-weight:500;text-align:center;
  min-height:50px;display:grid;place-items:center}
.pl-datehint{margin-top:12px;font-size:.88rem;color:var(--accent-dark);font-weight:500;text-align:center}

/* vehicle cards with the fleet photographs */
.pl-vehwrap{display:grid;grid-template-columns:minmax(0,420px);justify-content:center;gap:14px}
.pl-vehwrap.is-two{grid-template-columns:repeat(2,minmax(0,340px))}
.pl-vcard{border:2px solid var(--border);border-radius:14px;overflow:hidden;background:var(--white);
  padding:0;font:inherit;cursor:default;text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s}
.is-two .pl-vcard{cursor:pointer}
.is-two .pl-vcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.pl-vcard.is-on{border-color:var(--accent)}
.is-two .pl-vcard.is-on{box-shadow:0 0 0 3px var(--accent-tint)}
/* the whole fleet panel, at its own proportions — cropping it cut the car in half */
.pv-art{display:block;width:100%;height:auto;object-fit:contain}
.pv-body{display:block;padding:12px 16px 14px;text-align:center}
.pv-body b{display:block;font-family:var(--serif);font-size:1.14rem;color:var(--ink)}
.pv-body em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;margin-top:6px;color:var(--muted)}
.pl-vcard.is-on .pv-body em{color:var(--accent-dark)}
.pl-vehwrap.is-swap .pl-vcard{animation:pv-swap .42s cubic-bezier(.2,.9,.3,1.05)}
@media(max-width:700px){
  .pl-vehwrap.is-two{grid-template-columns:1fr}
}

/* itinerary days as separate cards inside the document */
.doc-days{display:grid;gap:14px}
.doc-day{border:1px solid #E3E0D6;border-radius:8px;padding:16px 20px;background:#FDFCF9}
.dd-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.dd-num{flex:none;background:#1A1F2A;color:#fff;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:4px;font-weight:700}
.dd-head h3{font-size:1.04rem;font-weight:700;color:#1A1F2A;margin:0;line-height:1.35}

/* the contact line at the foot — three clean pieces, evenly separated */
.doc-foot{margin-top:34px;padding-top:16px;border-top:1px solid #E3E0D6;
  display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;text-align:center}
.doc-foot span{font-size:.82rem;color:#3A4150;letter-spacing:.02em;white-space:nowrap}
.doc-foot i{width:4px;height:4px;border-radius:50%;background:#C9C4B4;flex:none}
@media(max-width:560px){
  .doc-foot{flex-direction:column;gap:6px}
  .doc-foot i{display:none}
}

/* ---- Plan My Trip fits one screen -------------------------------------
   The complaint was that the page "crawls" top to bottom. On a tool page the
   marketing hero is the waste: it was 323px of a 720px screen before a single
   question appeared. Everything below is tightened so the headline, the rail,
   the question and the buttons sit together without scrolling. */
.plan-hero{padding:22px 0 14px}
.plan-hero .eyebrow{margin-bottom:4px}
.plan-hero h1{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2}
.plan-hero .lead{font-size:.95rem;margin-top:8px}
/* breadcrumbs are for content pages; here they only push the tool down */
body.is-planner .crumbs{display:none}

.plan-block{padding-top:14px;padding-bottom:26px}
.plan-card{padding:4px 26px 18px}
.pw-rail{padding:14px 0 2px}
.pw-track{margin:0 6% 11px}
.pw-dot{padding:3px 4px;gap:1px}
.pw-dot i{width:23px;height:23px;font-size:.76rem}
.pw-dot span{font-size:.66rem}
.pw-dot em{font-size:.75rem}
.pw-stage{padding:6px 0 2px;min-height:286px}
.pw-ask{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:2px 0 4px}
.pw-hint{font-size:.9rem;margin-bottom:14px}
.pw-orsome{margin:12px 0 7px}
.pw-nav{margin-top:14px;padding-top:14px}
.pl-fine{margin-top:9px;font-size:.78rem}
.pl-q{padding:18px 0}
.pl-chips{gap:6px;margin-top:9px}
.pl-chip{padding:5px 12px;font-size:.85rem}
.pl-len-first{margin:0 auto 14px;padding-bottom:14px}
.pl-months{gap:6px}
.pl-month{padding:9px 4px}
.pl-route{margin-top:12px;padding:10px 13px}
#pl-notes{padding:11px 13px}
.pl-moods{gap:6px}
.pl-mood{padding:6px 12px;font-size:.83rem}

@media(max-width:640px){
  .plan-hero{padding:16px 0 10px}
  .plan-card{padding:2px 16px 16px}
  .pw-stage{min-height:260px}
}

/* ---- header without the Plan My Trip button ---------------------------
   The CTA used to sit between the menus and the cart. With it gone the three
   menus slide right and end beside the cart, so the row reads brand ... menus,
   cart — no gap where the button was. */
.nav-row{gap:20px}
.main-nav{margin-left:auto;margin-right:0}
.nav-actions{margin-left:18px}
@media(max-width:1024px){
  .main-nav{margin-left:auto}
  .nav-actions{margin-left:12px}
}

/* final pass: the tool sits inside one screen on a laptop */
.pw-rail{padding:10px 0 0}
.pw-track{margin:0 6% 9px;height:3px}
.pw-dot i{width:21px;height:21px;font-size:.72rem}
.pw-dot span{font-size:.62rem;letter-spacing:.08em}
.pw-dot em{font-size:.72rem}
.pw-stage{min-height:238px;padding:4px 0 0}
.pw-ask{font-size:clamp(1.25rem,2.4vw,1.55rem);margin:0 0 3px}
.pw-hint{font-size:.87rem;margin-bottom:11px;line-height:1.55}
.pw-orsome{margin:10px 0 6px;font-size:.7rem}
.pw-nav{margin-top:11px;padding-top:11px}
.pl-fine{margin-top:7px;font-size:.75rem;line-height:1.5}
.plan-block{padding-top:10px;padding-bottom:20px}
.plan-card{padding:2px 26px 14px}
.pl-dest{padding:6px 9px}
#pl-dest{padding:6px 4px}
.pl-route{margin-top:10px;padding:9px 12px}
.pl-len-first{margin:0 auto 12px;padding-bottom:12px}
.pl-vehwrap{max-width:400px;margin:0 auto}
/* no max-height: capping it letterboxed the panel, which is the cropping we removed.
   The card's own width is what sets the size; the photo keeps its own proportions. */
@media(max-height:760px){
  .plan-hero{padding:14px 0 8px}
  .plan-hero .lead{display:none}
  .pw-stage{min-height:220px}
}

/* Step 3 is the tallest, and the stage locks to the tallest — so trimming the
   vehicle panel here shortens the whole card on every step. */
.pl-vehwrap{max-width:330px}
.pl-vehwrap.is-two{max-width:none}
.pv-body{padding:9px 14px 11px}
.pv-body b{font-size:1.05rem}
.pv-body em{margin-top:4px}
.pl-pax{gap:10px}
.stepper{padding:10px 12px}

/* the headline folds away the moment the traveler starts answering, so the tool
   lifts up under the header and the whole thing sits on one screen */
.plan-hero{transition:padding .34s ease, opacity .28s ease}
.plan-hero .eyebrow,.plan-hero h1,.plan-hero .lead{
  transition:opacity .24s ease, transform .3s ease, margin .3s ease, font-size .3s ease}
.plan-hero.is-folded{padding:10px 0 0}
.plan-hero.is-folded .lead{display:none}
.plan-hero.is-folded .eyebrow{margin:0;font-size:.66rem}
.plan-hero.is-folded h1{font-size:1.02rem;line-height:1.3;color:var(--muted);font-family:var(--sans);
  font-weight:500;margin:0}
.plan-hero.is-folded h1 .h1-line2{display:none}
@media (prefers-reduced-motion: reduce){
  .plan-hero,.plan-hero .eyebrow,.plan-hero h1,.plan-hero .lead{transition:none}
}

/* Step 3 side by side on a wide screen: travelers left, vehicle right. The photo
   keeps its full size — stacking them was what made this the tallest step and set
   the height of all four. */
@media(min-width:820px){
  .pw-step[data-step="3"] .pl-pax{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
    max-width:380px;margin:0 0 0 auto}
  .pw-step[data-step="3"] .pl-3col{
    display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:center;
    max-width:760px;margin:0 auto;text-align:left}
  .pw-step[data-step="3"] .pl-3col>*{min-width:0}
  .pw-step[data-step="3"] #pl-vehlabel{margin:0 0 7px;text-align:left}
  .pw-step[data-step="3"] .pl-vehwrap{max-width:340px;margin:0}
  .pw-step[data-step="3"] .pl-vehwrap.is-two{max-width:none;grid-template-columns:1fr}
  .pw-step[data-step="3"] .pl-vehwrap.is-two .pv-art{max-height:120px;object-fit:cover}
}

/* ============ Plan My Trip: the planner sits on India, not on white =======
   The complaint was that the page felt static and unattractive. It was a white
   form on a white page — nothing in it said travel, or India, or Keeper Landwey.
   The planner now floats on a darkened photograph of the country, the way the
   homepage hero does, and the card warms to ivory so it reads as paper laid on
   a table rather than a form embedded in a website.
   Palette is the brand's own: emerald ground (#082E29), ivory card (#FAF9F5),
   laurel gold (#9C8B5D) for progress — the same gold as the Best Seller medal. */

body.is-planner{background:#08221E}
body.is-planner .plan-ground{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url(/assets/img/hero.jpg);
  background-size:cover;background-position:center 38%;
  filter:saturate(.55) brightness(.42)}
body.is-planner .plan-ground::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,34,30,.62) 0%,rgba(8,34,30,.86) 46%,#08221E 100%)}
body.is-planner main{position:relative;z-index:1}
body.is-planner .site-header{position:relative;z-index:2}

/* the headline reads on the dark ground */
body.is-planner .plan-hero{background:none}
body.is-planner .plan-hero .eyebrow{color:#BCDDD2}
body.is-planner .plan-hero h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.35)}
body.is-planner .plan-hero .lead{color:rgba(255,255,255,.82)}
body.is-planner .plan-hero.is-folded h1{color:rgba(255,255,255,.7)}

/* the card is paper on a table */
body.is-planner .plan-card{
  background:var(--ivory);border:0;border-radius:20px;
  box-shadow:0 2px 4px rgba(0,0,0,.16),0 26px 70px rgba(0,0,0,.42),
             inset 0 1px 0 rgba(255,255,255,.9)}

/* progress reads in the brand's gold, echoing the Best Seller medal */
body.is-planner .pw-track{background:rgba(19,84,74,.14)}
body.is-planner .pw-track i{background:linear-gradient(90deg,#B99A4E,#DCB755)}
body.is-planner .pw-dot.is-on i{background:var(--accent);box-shadow:0 0 0 4px rgba(19,84,74,.12)}
body.is-planner .pw-dot.is-done i{background:#EDE3C8;color:#7A6634}

/* controls sit on ivory, so they lift to white instead of blending in */
body.is-planner .pl-dest,
body.is-planner #pl-notes{background:#fff;border-color:#E2DED0}
body.is-planner .pl-chip,
body.is-planner .pl-mood,
body.is-planner .pl-month{background:#fff;border-color:#E2DED0}
body.is-planner .pl-seg{background:#EBE7DA}
body.is-planner .stepper{background:#fff;border:1px solid #E9E5D8;border-radius:12px}
body.is-planner .pl-vcard{background:#fff}

/* the build runs on the same dark ground; the logo medallion glows against it */
body.is-planner .plan-stage{color:#fff}
body.is-planner .asm-step{color:#fff}
body.is-planner .asm-bar{background:rgba(255,255,255,.16)}
body.is-planner .asm-bar i{background:linear-gradient(90deg,#B99A4E,#DCB755)}
body.is-planner .asm-cancel{color:rgba(255,255,255,.65)}
body.is-planner .asm-orbit i{border-color:rgba(220,183,85,.22)}
body.is-planner .asm-core{box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 10px rgba(255,255,255,.06)}

/* the itinerary is a document — it goes back to white paper */
body.is-planner .doc-shell{position:relative;z-index:1}
body.is-planner .doc{background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45)}
body.is-planner .doc-bar .docb{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)}
body.is-planner .doc-bar .docb:hover{background:rgba(255,255,255,.18)}
body.is-planner .doc-copied{color:#DCB755}

@media print{ body.is-planner .plan-ground{display:none} body.is-planner{background:#fff} }

/* what we think they meant, shown as a photograph */
.plr-art{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:9px}
.plr-shot{margin:0;width:104px;border-radius:11px;overflow:hidden;background:#fff;
  box-shadow:0 4px 14px rgba(23,27,35,.16);
  animation:plr-rise .42s cubic-bezier(.2,.85,.3,1.05) backwards;
  animation-delay:calc(var(--i) * 70ms)}
.plr-shot>span{display:block;height:62px;background-size:cover;background-position:center}
.plr-shot figcaption{display:block;font-size:.66rem;line-height:1.25;padding:5px 6px 6px;
  color:var(--ink);font-weight:600;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes plr-rise{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.plr-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
@media (prefers-reduced-motion: reduce){.plr-shot{animation:none}}
@media(max-width:640px){
  .plr-shot{width:92px}
  .plr-shot>span{height:62px}
}

/* a photograph on each day of the shared itinerary */
.doc-day.has-art{display:grid;grid-template-columns:188px 1fr;gap:18px;align-items:start}
.dd-art{position:relative;border-radius:6px;overflow:hidden;background:#EFEBDF}
.dd-art>span{display:block;height:132px;background-size:cover;background-position:center}
.dd-art em{position:absolute;left:0;right:0;bottom:0;display:block;font-style:normal;
  font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#fff;
  padding:16px 9px 7px;background:linear-gradient(180deg,transparent,rgba(10,20,18,.82));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-main{min-width:0}
@media(max-width:640px){
  .doc-day.has-art{grid-template-columns:1fr;gap:12px}
  .dd-art>span{height:150px}
}
@media print{
  body.printing-plan .doc-day.has-art{grid-template-columns:150px 1fr;gap:14px}
  body.printing-plan .dd-art>span{height:104px}
  body.printing-plan .dd-art{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* the status line changes as each piece lands — a small lift so the eye follows it */
.asm-step.is-in{animation:asm-line .34s cubic-bezier(.2,.85,.3,1.05)}
@keyframes asm-line{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.asm-step.is-in{animation:none}}