/* ======================================================
   HappyUps Travels: travel components on top of happyups.css
   (the HappyUps design system is loaded unchanged, so colours, type,
   buttons, nav, footer and patterns match the main site exactly)
   ====================================================== */

/* ---------- brand lockup: the HappyUps logo + a quiet "Travels" mark ---------- */
.brand-travels{
  display:inline-flex; align-items:center; margin-left:12px; padding-left:12px; border-left:1.5px solid rgba(49,53,121,.16);
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-text);
  line-height:1;
}
footer .brand-travels{ font-size:12px; }
@media (max-width:520px){ .brand-travels{ margin-left:9px; padding-left:9px; font-size:11px; letter-spacing:.12em; } }
.nav-cta-wrap .btn-teal{ white-space:nowrap; }

/* ---------- helpers ---------- */
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-wa{ background:#25D366; color:#06351B; box-shadow:var(--shadow-card); }
.btn-wa:hover{ filter:brightness(1.05); }
.btn-wa .wa-ico{ width:20px; height:20px; }
.btn-wa-soft .wa-ico{ color:#1FAF55; }
.btn-outline-light .wa-ico{ color:#5BE08C; }
.btn .spark{ width:15px; height:15px; }
.btn-sand .spark{ color:#B8893A; }
.center-cta{ text-align:center; margin-top:clamp(28px,4vw,44px); }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.section-head-row .section-head{ margin-bottom:0; }
.eyebrow--sand{ color:var(--sand-text); }
.eyebrow--sand::before{ background:#C9A24E; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:0; list-style:none; font-size:13px; font-weight:600; color:var(--muted); }
.crumbs li + li::before{ content:"/"; margin-right:6px; opacity:.5; }
.crumbs a{ color:var(--teal-text); }
.crumbs a:hover{ text-decoration:underline; }

/* ---------- home hero ---------- */
.hero-tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-text); background:rgba(255,255,255,.82); border:1px solid rgba(79,188,202,.35);
  padding:8px 16px; border-radius:var(--radius-pill); backdrop-filter:blur(4px);
}
.hero-tag .spark{ width:13px; height:13px; color:var(--teal); }
.page-home .hero h1{ font-size:clamp(46px, min(6.6vw, 10vh), 96px); line-height:1; }
.h1-travels{ display:block; color:var(--teal-text); }
.page-home .hero .lede{ max-width:520px; }
.hero-points{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; }
.hero-points li{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); }
.hero-points svg{ width:22px; height:22px; padding:4px; border-radius:50%; background:var(--teal-soft); color:var(--teal-text); }
@media (max-width:980px){ .hero-points{ margin-top:18px; gap:8px 16px; } .hero-points li{ font-size:13px; } }

/* ---------- destination cards (brand arch) ---------- */
.dest-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,1.8vw,26px); }
.dest-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2vw,28px) clamp(16px,1.8vw,26px); }
.dest-card{ display:block; position:relative; }
.dest-arch{ position:relative; aspect-ratio:4/5; border-radius:999px 999px 28px 28px; overflow:hidden; background:var(--teal-soft); box-shadow:var(--shadow-card); transition:box-shadow .4s ease, transform .4s ease; }
.dest-arch::after{ content:""; position:absolute; inset:7px; border-radius:999px 999px 22px 22px; border:1.5px solid rgba(255,255,255,.75); pointer-events:none; }
.dest-arch img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.dest-card:hover .dest-arch{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.dest-card:hover .dest-arch img{ transform:scale(1.06); }
.dest-copy{ padding:18px 4px 0; }
.dest-copy h3{ font-size:clamp(20px,1.7vw,24px); }
.dest-copy p{ font-size:14.5px; line-height:1.5; margin:6px 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dest-more{
  margin-top:clamp(30px,4vw,48px); display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,2.6vw,34px); align-items:center;
  padding:18px clamp(20px,3vw,40px) 18px 18px; border-radius:var(--radius-xl);
  background:linear-gradient(120deg,#E6F5F8 0%,#DDEFF3 45%,#E3E5F3 100%); border:1px solid rgba(79,188,202,.3); box-shadow:var(--shadow-card);
}
.dest-more img{ width:104px; height:132px; object-fit:cover; border-radius:999px 999px 22px 22px; box-shadow:var(--shadow-card); }
.dest-more h3{ font-size:clamp(22px,2vw,28px); }
.dest-more p{ margin-top:6px; max-width:52ch; }
@media (max-width:1100px){
  .dest-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px){
  .dest-row{ display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:min(56vw,260px); overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px; margin:0 calc(-1 * var(--container-pad)); padding-left:var(--container-pad); padding-right:var(--container-pad); scrollbar-width:none; }
  .dest-row::-webkit-scrollbar{ display:none; }
  .dest-row .dest-card{ scroll-snap-align:start; }
  .dest-more{ grid-template-columns:auto 1fr; }
  .dest-more .btn{ grid-column:1 / -1; justify-self:start; }
}
@media (max-width:640px){
  .dest-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dest-copy p{ font-size:13.5px; }
  .dest-more{ grid-template-columns:1fr; text-align:left; }
  .dest-more img{ display:none; }
}

/* ---------- premium band (home) ---------- */
.premium-band{
  background:radial-gradient(80% 70% at 100% 0%, #F8EDD2 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, var(--sand-soft) 0%, transparent 70%), #FDFBF6;
  border-top:1px solid rgba(138,111,46,.14); border-bottom:1px solid rgba(138,111,46,.14);
}
.tour-layout{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,2.4vw,30px); align-items:stretch; }
.spirit-card{ position:relative; display:flex; flex-direction:column; border-radius:var(--radius-xl); overflow:hidden; transition:transform .35s ease; }
.spirit-card:hover{ transform:translateY(-5px); }
.spirit-media{ position:relative; z-index:1; margin:14px 14px 0; border-radius:calc(var(--radius-xl) - 10px) calc(var(--radius-xl) - 10px) 22px 22px; overflow:hidden; aspect-ratio:16/9; }
.spirit-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.spirit-card:hover .spirit-media img{ transform:scale(1.05); }
.spirit-copy{ position:relative; z-index:1; padding:clamp(22px,2.6vw,34px) clamp(24px,3vw,40px) clamp(26px,3vw,40px); display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.spirit-copy h3{ font-size:clamp(30px,3.2vw,44px); margin:4px 0 12px; }
.spirit-copy p{ color:#6F5E3E; font-size:16.5px; max-width:46ch; margin:0 0 24px; }
.spirit-copy .btn{ margin-top:auto; }
.offer-card--premium h2{ background:linear-gradient(100deg,#2A2F6E 0%,#313579 45%,#8A6424 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tour-stack{ display:grid; gap:clamp(14px,1.6vw,20px); }
.tour-card{
  display:grid; grid-template-columns:clamp(96px,9vw,128px) 1fr; gap:clamp(16px,2vw,24px); align-items:center;
  padding:14px clamp(18px,2vw,26px) 14px 14px; background:#fff; border:1px solid rgba(138,111,46,.16); border-radius:var(--radius-lg);
  box-shadow:0 18px 40px -28px rgba(35,39,85,.35); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tour-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:rgba(201,162,78,.45); }
.tour-media{ aspect-ratio:4/5; border-radius:999px 999px 20px 20px; overflow:hidden; background:var(--sand-soft); }
.tour-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.tour-card:hover .tour-media img{ transform:scale(1.06); }
.tour-copy h3{ font-size:clamp(20px,1.7vw,23px); }
.tour-copy p{ font-size:14.5px; line-height:1.5; margin:6px 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:1100px){ .tour-layout{ grid-template-columns:1fr; } }

/* ---------- finale on tool pages: footer only ---------- */
.finale--slim footer{ padding-top:clamp(40px,5vw,64px); }
.finale--slim .footer-top{ padding-top:0; }
.footer-bottom span:last-child{ opacity:.7; }
.footer-social a .wa-ico{ width:16px; height:16px; }

/* ---------- plan your journey: destination slider ---------- */
.plan-hero{
  position:relative; margin-top:calc(-1 * var(--nav-h)); padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(40px,5vw,72px);
  background:radial-gradient(70% 80% at 90% 10%, var(--teal-soft) 0%, transparent 70%), radial-gradient(60% 60% at 0% 100%, var(--navy-soft) 0%, transparent 70%), var(--bg);
}
.plan-hero-head{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,4vw,60px); align-items:end; margin-bottom:clamp(22px,3vw,34px); }
.plan-hero-head h1{ font-size:clamp(36px, min(4.8vw, 7.4vh), 64px); }
.plan-hero-head .lede{ margin:0; max-width:46ch; }
.ds-frame{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/7; min-height:440px; max-height:72vh; width:100%; box-shadow:var(--shadow-soft); background:var(--navy-deep); }
.ds-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s ease; }
.ds-slide.is-active{ opacity:1; visibility:visible; }
.ds-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 7s ease-out; }
.ds-slide.is-active .ds-img{ transform:scale(1); }
.ds-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(27,30,68,.78) 0%, rgba(27,30,68,.42) 42%, rgba(27,30,68,0) 72%), linear-gradient(0deg, rgba(27,30,68,.55) 0%, rgba(27,30,68,0) 45%); }
.ds-caption{ position:absolute; left:clamp(24px,5vw,72px); right:clamp(24px,5vw,72px); bottom:clamp(30px,5vw,64px); max-width:620px; color:#fff; }
.ds-caption h2{ color:#fff; font-size:clamp(40px, min(6vw, 9vh), 86px); line-height:1; margin:12px 0 10px; }
.ds-caption p{ color:rgba(255,255,255,.88); font-size:clamp(16px,1.4vw,19px); max-width:44ch; margin:0; }
.ds-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ds-tag{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:#fff; padding:6px 13px; border-radius:var(--radius-pill); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.ds-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.ds-slide.is-active .ds-caption > *{ animation:dsUp .8s cubic-bezier(.2,.7,.2,1) both; }
.ds-slide.is-active .ds-caption h2{ animation-delay:.08s; } .ds-slide.is-active .ds-caption p{ animation-delay:.16s; } .ds-slide.is-active .ds-actions{ animation-delay:.24s; }
@keyframes dsUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.ds-arrow{ position:absolute; z-index:3; bottom:clamp(24px,3vw,40px); width:54px; height:54px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); transition:background .2s ease, transform .2s ease; }
.ds-arrow:hover{ background:rgba(255,255,255,.26); transform:scale(1.06); }
.ds-arrow--prev{ right:calc(clamp(24px,3vw,40px) + 66px); }
.ds-arrow--next{ right:clamp(24px,3vw,40px); }
.ds-progress{ position:absolute; z-index:3; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15); }
.ds-progress span{ display:block; height:100%; width:0; background:var(--teal); }
.ds-progress.is-running span{ animation:dsProgress var(--ds-ms,7000ms) linear forwards; }
@keyframes dsProgress{ to{ width:100%; } }
.ds-thumbs{ display:flex; gap:10px; overflow-x:auto; padding:18px 2px 6px; scrollbar-width:none; }
.ds-thumbs::-webkit-scrollbar{ display:none; }
.ds-thumb{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; padding:5px 18px 5px 5px; border-radius:var(--radius-pill); cursor:pointer; background:#fff; border:1.5px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); transition:background .25s ease, color .25s ease, border-color .25s ease; }
.ds-thumb img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.ds-thumb:hover{ border-color:var(--teal); }
.ds-thumb.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
@media (max-width:980px){ .plan-hero-head{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .ds-frame{ aspect-ratio:auto; height:min(78vh,600px); min-height:480px; }
  .ds-shade{ background:linear-gradient(0deg, rgba(27,30,68,.88) 0%, rgba(27,30,68,.5) 45%, rgba(27,30,68,.05) 75%); }
  .ds-caption{ bottom:96px; }
  .ds-actions .btn{ padding:14px 22px; font-size:15px; }
  .ds-arrow{ bottom:24px; width:46px; height:46px; }
  .ds-arrow--prev{ right:auto; left:24px; }
  .ds-arrow--next{ right:auto; left:82px; }
}
@media (prefers-reduced-motion: reduce){ .ds-img, .ds-slide.is-active .ds-caption > *{ transition:none; animation:none; transform:none; } }

/* ---------- destination page ---------- */
.dest-hero h1{ font-size:clamp(44px, min(6vw, 9vh), 86px); }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tag-pill{ display:inline-flex; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--navy); background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:var(--radius-pill); }
.dest-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0 0; }
.dest-facts > div{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:start; padding:13px 15px; border-radius:18px; background:rgba(255,255,255,.8); border:1px solid var(--line); }
.dest-facts svg{ grid-row:span 2; color:var(--teal-text); margin-top:2px; }
.dest-facts dt{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.dest-facts dd{ margin:2px 0 0; font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.35; color:var(--navy); }
@media (max-width:640px){ .dest-facts{ grid-template-columns:1fr; } }

.paths-section{ background:var(--bg); }
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); }
.path-option{ display:flex; flex-direction:column; border-radius:var(--radius-xl); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card); transition:transform .35s ease, box-shadow .35s ease; }
.path-option:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.path-option--a{ background:linear-gradient(160deg,#F3FAFB 0%,#E3F3F6 100%); border-color:rgba(79,188,202,.3); }
.path-option--b{ background:linear-gradient(160deg,#F6F6FB 0%,#E6E7F4 100%); border-color:rgba(49,53,121,.16); }
.po-media{ position:relative; height:clamp(220px,22vw,300px); margin:14px 14px 0; border-radius:calc(var(--radius-xl) - 10px) calc(var(--radius-xl) - 10px) 20px 20px; overflow:hidden; }
.po-media--stack{ display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:6px; }
.po-media--stack img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.po-media--stack img:first-child{ grid-row:span 2; }
.po-media--stack img:only-child{ grid-column:span 2; }
.path-option:hover .po-media img{ transform:scale(1.05); }
.po-media--map{ background:linear-gradient(160deg,#E4F4F7 0%,#D6E6F0 100%); }
.po-media--map .map-svg{ width:100%; height:100%; }
.po-copy{ padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,36px) clamp(26px,3vw,36px); }
.po-label{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-text); }
.path-option--b .po-label{ color:var(--navy); }
.po-copy h3{ font-size:clamp(26px,2.6vw,36px); margin:10px 0 10px; }
.po-copy p{ font-size:16px; max-width:44ch; margin:0 0 18px; }
@media (max-width:860px){ .paths{ grid-template-columns:1fr; } }

/* mini map (the "My Own Journey" card) */
.map-svg--mini .map-sea{ fill:transparent; }
.map-svg--mini .map-context{ fill:#EDE9DF; stroke:none; }
.map-svg--mini .map-land{ fill:#fff; stroke:var(--navy); stroke-width:3; stroke-linejoin:round; }
.mini-pin{ fill:#fff; stroke:var(--navy); stroke-width:5; }
.mini-pin--start{ fill:var(--navy); stroke:#fff; }
.mini-route{ fill:none; stroke:var(--teal); stroke-width:7; stroke-dasharray:16 14; stroke-linecap:round; stroke-linejoin:round; animation:miniDash 1.6s linear infinite; }
@keyframes miniDash{ to{ stroke-dashoffset:-60; } }

/* journeys (packages) */
.pkg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:clamp(18px,2.2vw,28px); }
.pkg-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); scroll-margin-top:calc(var(--nav-h) + 24px); transition:transform .35s ease, box-shadow .35s ease; }
.pkg-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.pkg-media{ margin:12px 12px 0; border-radius:160px 160px 20px 20px; overflow:hidden; aspect-ratio:3/2; background:var(--teal-soft); }
.pkg-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.pkg-card:hover .pkg-media img{ transform:scale(1.05); }
.pkg-body{ display:flex; flex-direction:column; flex:1; padding:20px clamp(20px,2vw,26px) 26px; }
.pkg-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.pkg-meta > span{ font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:5px 11px; border-radius:var(--radius-pill); background:var(--teal-soft); color:var(--teal-text); }
.pkg-meta > span:nth-child(2){ background:var(--navy-soft); color:var(--navy); }
.pkg-tag{ background:var(--sand-soft) !important; color:var(--sand-text) !important; }
.pkg-tag--spiritual{ background:linear-gradient(135deg,#FBEFC6,#E3C47A) !important; color:#3B2A08 !important; }
.pkg-body h3{ font-size:clamp(21px,1.8vw,25px); margin:14px 0 8px; }
.pkg-body > p{ font-size:15px; margin:0; }
.pkg-highlights{ margin-top:14px; display:grid; gap:7px; }
.pkg-highlights li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); line-height:1.45; }
.pkg-highlights li::before{ content:""; flex:none; margin-top:7px; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); }
.pkg-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:22px; }
.pkg-actions .btn{ padding:13px 20px; font-size:15px; }

/* journey outline modal */
.pkg-modal-card{ max-width:720px; }
.pkg-detail-media{ border-radius:26px; overflow:hidden; aspect-ratio:16/8; margin-bottom:22px; }
.pkg-detail-media img{ width:100%; height:100%; object-fit:cover; }
#pkgBody h3{ font-size:clamp(24px,3vw,32px); margin-bottom:10px; padding-right:40px; }
#pkgBody h4{ font-family:var(--font-display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:6px 0 14px; }
.pkg-outline{ list-style:none; margin:0 0 20px; padding:0; position:relative; }
.pkg-outline::before{ content:""; position:absolute; left:7px; top:10px; bottom:10px; border-left:2px dashed rgba(49,53,121,.2); }
.pkg-outline li{ position:relative; display:grid; grid-template-columns:120px 1fr; gap:12px; padding:9px 0 9px 28px; font-size:15px; color:var(--ink); }
.pkg-outline li::before{ content:""; position:absolute; left:1px; top:14px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--teal); }
.pkg-outline li:last-child::before{ background:var(--navy); border-color:var(--navy); }
.pkg-day{ font-family:var(--font-display); font-weight:700; color:var(--teal-text); }
.pkg-note{ font-size:14px; color:var(--sand-text); background:var(--sand-soft); border-left:3px solid var(--sand); padding:12px 16px; border-radius:0 14px 14px 0; margin:0 0 18px; }
@media (max-width:560px){ .pkg-outline li{ grid-template-columns:1fr; gap:2px; } }

/* places strip */
.places-section{ background:var(--surface); border-top:1px solid var(--line); }
.place-row{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(220px,22vw,280px); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; scrollbar-width:thin; scrollbar-color:var(--teal-tint) transparent; }
.place-card{ scroll-snap-align:start; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:24px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.place-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.place-media{ aspect-ratio:3/2; overflow:hidden; }
.place-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.place-card:hover .place-media img{ transform:scale(1.06); }
.place-copy{ display:flex; flex-direction:column; flex:1; padding:14px 16px 16px; }
.place-copy h3{ font-size:18px; }
.place-copy p{ font-size:13.5px; line-height:1.5; margin:6px 0 12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.place-add{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--teal-text); }

/* Appy band */
.appy-band{ padding:clamp(48px,6vw,88px) 0; }
.appy-band-card{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,36px); align-items:center; padding:20px clamp(22px,3vw,40px) 20px 20px; border-radius:var(--radius-xl); background:linear-gradient(120deg,#E6F5F8 0%,#E8E9F6 100%); border:1px solid rgba(79,188,202,.3); box-shadow:var(--shadow-card); }
.appy-band-img{ width:clamp(96px,10vw,128px); height:clamp(96px,10vw,128px); border-radius:50%; object-fit:cover; box-shadow:0 0 0 6px #fff, var(--shadow-card); }
.appy-band-copy h3{ font-size:clamp(22px,2.2vw,30px); }
.appy-band-copy p{ margin-top:6px; max-width:56ch; }
.appy-band-actions{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:980px){ .appy-band-card{ grid-template-columns:auto 1fr; } .appy-band-actions{ grid-column:1 / -1; } }
@media (max-width:560px){ .appy-band-card{ grid-template-columns:1fr; text-align:left; } }

/* ======================================================
   MY OWN JOURNEY: the map route builder
   ====================================================== */
.jb-head{ margin-top:calc(-1 * var(--nav-h)); padding:calc(var(--nav-h) + clamp(24px,3vw,44px)) 0 clamp(18px,2vw,26px);
  background:radial-gradient(70% 90% at 90% 0%, var(--teal-soft) 0%, transparent 70%), var(--bg); }
.jb-head h1{ font-size:clamp(32px, min(4.2vw, 6.6vh), 56px); }
.jb-head .lede{ margin-top:12px; max-width:52ch; font-size:clamp(16px,1.3vw,18.5px); }
.jb-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.jb-steps{ display:flex; gap:4px; list-style:none; margin:0; padding:5px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); box-shadow:var(--shadow-card); }
.jb-steps li{ display:inline-flex; align-items:center; gap:8px; padding:6px 16px 6px 6px; border-radius:var(--radius-pill); font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted); transition:background .3s ease, color .3s ease; }
.jb-steps .num-badge{ width:28px; height:28px; box-shadow:none; }
.jb-steps li.is-current{ background:var(--navy); color:#fff; }
.jb-steps li.is-current .num-badge{ background:#fff; color:var(--navy); }
.jb-steps li.is-done .num-badge{ background:var(--teal); color:#fff; }
@media (max-width:560px){ .jb-steps li{ padding-right:10px; font-size:12.5px; } }

.jb{ padding:8px 0 clamp(60px,8vw,110px); }
.jb-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(330px,.85fr); gap:clamp(18px,2.4vw,30px); align-items:start; }
.jb-map-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-soft); padding:12px; }
.jb-map-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:6px 10px 12px; }
.jb-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--navy); }
.jb-legend li{ display:inline-flex; align-items:center; gap:7px; }
.lg{ display:inline-block; width:13px; height:13px; border-radius:50%; }
.lg--start{ background:var(--navy); box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--navy); }
.lg--place{ background:#fff; border:3px solid var(--navy); }
.lg--stop{ background:var(--teal); border:3px solid var(--navy-deep); }
.jb-hint{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--teal-text); }
.jb-map{
  --mk:1; position:relative; border-radius:calc(var(--radius-xl) - 6px); overflow:hidden;
  background:radial-gradient(rgba(49,53,121,.07) 1.1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(160deg,#E6F5F8 0%,#D7E8F1 100%);
}
.jb-map .map-svg{ display:block; width:100%; height:auto; max-height:min(78vh,860px); margin:0 auto; }
.map-sea{ fill:transparent; }
.map-context{ fill:#EFEBE1; stroke:#D8D1C0; stroke-width:calc(1px * var(--mk)); stroke-linejoin:round; }
.map-land{ fill:#fff; stroke:var(--navy); stroke-width:calc(1.6px * var(--mk)); stroke-linejoin:round; filter:drop-shadow(0 calc(10px * var(--mk)) calc(14px * var(--mk)) rgba(49,53,121,.16)); }
.pin{ cursor:pointer; outline:none; }
.pin-in{ transform:scale(var(--mk)); transition:transform .2s ease; }
.pin-halo{ fill:rgba(79,188,202,0); transition:fill .2s ease; }
.pin-dot{ fill:#fff; stroke:var(--navy); stroke-width:3; transition:fill .2s ease, stroke .2s ease; }
.pin-num{ font-family:var(--font-display); font-weight:700; font-size:10.5px; fill:#fff; text-anchor:middle; pointer-events:none; }
.pin-label{ font-family:var(--font-display); font-weight:700; font-size:13.5px; fill:var(--navy); paint-order:stroke; stroke:#fff; stroke-width:4.5px; stroke-linejoin:round; pointer-events:none; }
.pin-star{ fill:#fff; pointer-events:none; }
.pin:hover .pin-halo, .pin:focus-visible .pin-halo{ fill:rgba(79,188,202,.28); }
.pin:focus-visible .pin-dot{ stroke:var(--teal-text); }
.pin.is-on .pin-dot{ fill:var(--teal); stroke:var(--navy-deep); }
.pin.is-on .pin-label{ fill:var(--teal-text); }
.pin.is-active .pin-halo{ fill:rgba(79,188,202,.36); animation:pinPulse 1.6s ease-out infinite; }
.pin--start .pin-dot{ fill:var(--navy); stroke:#fff; stroke-width:3; }
.pin--start .pin-label{ font-size:14.5px; }
@keyframes pinPulse{ 0%{ r:10px; } 70%{ r:20px; fill:rgba(79,188,202,0); } 100%{ r:10px; fill:rgba(79,188,202,0); } }
.route-glow{ fill:none; stroke:rgba(79,188,202,.38); stroke-width:calc(9px * var(--mk)); stroke-linecap:round; stroke-linejoin:round; }
.route-line{ fill:none; stroke:var(--navy); stroke-width:calc(2.6px * var(--mk)); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:calc(7px * var(--mk)) calc(7px * var(--mk)); animation:routeDash 1.1s linear infinite; }
@keyframes routeDash{ to{ stroke-dashoffset:calc(-14px * var(--mk)); } }
.route-draw{ animation:routeDraw .7s cubic-bezier(.4,0,.2,1) both; }
@keyframes routeDraw{ from{ opacity:0; } to{ opacity:1; } }
.jb-map-note{ font-size:12.5px; color:var(--muted); margin:10px 10px 4px; }

.jb-pop{ position:absolute; z-index:5; width:min(290px, 78%); background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 26px 54px -18px rgba(35,39,85,.5); animation:popIn .22s cubic-bezier(.2,.7,.2,1); }
.jb-pop[hidden]{ display:none; }
@keyframes popIn{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
.jb-pop-media{ aspect-ratio:16/10; overflow:hidden; background:var(--teal-soft); }
.jb-pop-media img{ width:100%; height:100%; object-fit:cover; }
.jb-pop-body{ padding:14px 16px 16px; }
.jb-pop-body h3{ font-size:19px; }
.jb-pop-body p{ font-size:13.5px; line-height:1.5; margin:6px 0 12px; }
.jb-pop-body .btn{ width:100%; }
.jb-pop-body .btn.is-remove{ background:#fff; color:var(--navy); border-color:rgba(49,53,121,.2); box-shadow:none; }
.jb-pop-close{ position:absolute; top:10px; right:10px; z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.92); border:none; color:var(--navy); box-shadow:0 4px 12px -4px rgba(0,0,0,.3); }

.jb-panel{ position:sticky; top:calc(var(--nav-h) + 14px); background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-card); padding:clamp(20px,2.4vw,30px); max-height:calc(100vh - var(--nav-h) - 28px); overflow:auto; overscroll-behavior:contain; }
.jb-pane{ display:none; }
.jb-pane.is-active{ display:block; animation:pathIn .35s ease; }
.jb-pane h2{ font-size:clamp(22px,2vw,27px); margin-bottom:16px; }
.jb-route{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.jb-stop{ display:grid; grid-template-columns:auto 44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 7px 7px 8px; border-radius:16px; background:var(--bg); border:1px solid var(--line); transition:box-shadow .2s ease, opacity .2s ease, background .2s ease; }
.jb-stop[draggable="true"]{ cursor:grab; }
.jb-stop img{ width:44px; height:44px; border-radius:12px; object-fit:cover; }
.jb-stop .num-badge{ width:26px; height:26px; font-size:12px; box-shadow:none; background:var(--teal); color:#fff; }
.jb-stop b{ display:block; font-family:var(--font-display); font-size:15px; color:var(--navy); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jb-stop small{ display:block; font-size:12px; color:var(--muted); font-weight:600; }
.jb-stop--start{ background:var(--navy-soft); border-color:rgba(49,53,121,.14); }
.jb-stop--start .num-badge{ background:var(--navy); }
.jb-stop.is-dragging{ opacity:.45; }
.jb-stop.drop-before{ box-shadow:inset 0 3px 0 var(--teal); }
.jb-stop.drop-after{ box-shadow:inset 0 -3px 0 var(--teal); }
.jb-stop.is-new{ animation:stopIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes stopIn{ from{ opacity:0; transform:translateY(-6px); background:var(--teal-soft); } to{ opacity:1; transform:none; } }
.jb-ctrls{ display:flex; gap:2px; }
.jb-ctrls button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:transparent; border:none; color:var(--muted); transition:background .2s ease, color .2s ease; }
.jb-ctrls button:hover:not(:disabled){ background:#fff; color:var(--navy); }
.jb-ctrls button:disabled{ opacity:.3; cursor:default; }
.jb-ctrls button[data-act="remove"]:hover{ color:var(--coral-text); }
.jb-empty{ padding:16px; border:1.5px dashed rgba(49,53,121,.18); border-radius:16px; text-align:center; font-size:14px; color:var(--muted); }
.jb-days{ display:flex; align-items:center; gap:8px; margin:14px 0 0; padding:10px 14px; border-radius:14px; background:var(--teal-soft); color:var(--teal-text); font-weight:700; font-size:14px; }
.jb-days:empty{ display:none; }
.jb-sub{ font-family:var(--font-display); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px; }
.jb-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.place-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px 7px 9px; border-radius:var(--radius-pill); cursor:pointer; background:#fff; border:1.5px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--navy); transition:background .2s ease, border-color .2s ease, color .2s ease; }
.place-chip svg{ width:15px; height:15px; color:var(--teal-text); }
.place-chip:hover{ border-color:var(--teal); }
.place-chip[aria-pressed="true"]{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-text); }
.jb-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:24px; }
.jb-text-link{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--teal-text); text-decoration:underline; text-underline-offset:3px; }
.jb-field{ margin-bottom:20px; }
.jb-label{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--navy); margin-bottom:10px; }
.jb-label svg{ color:var(--teal-text); }
.jb-label small{ font-weight:600; color:var(--muted); }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ padding:8px 14px; border-radius:var(--radius-pill); cursor:pointer; background:#fff; border:1.5px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--navy); transition:background .2s ease, border-color .2s ease, color .2s ease; }
.chip:hover{ border-color:var(--navy); }
.chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.stepper-row{ display:flex; flex-wrap:wrap; gap:10px; }
.stepper{ display:inline-flex; align-items:center; gap:8px; padding:5px 5px 5px 16px; border:1.5px solid var(--line); border-radius:var(--radius-pill); background:#fff; }
.stepper span{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); margin-right:4px; }
.stepper button{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:var(--navy-soft); color:var(--navy); font-size:18px; font-weight:700; line-height:1; transition:background .2s ease; }
.stepper button:hover{ background:var(--navy-tint); }
.stepper output{ min-width:20px; text-align:center; font-family:var(--font-display); font-weight:700; color:var(--navy); }
.jb-summary{ padding:18px; border-radius:20px; background:linear-gradient(135deg,var(--teal-soft),var(--navy-soft)); border:1px solid rgba(79,188,202,.28); }
.sum-route{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sum-stop{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--navy); background:#fff; padding:6px 12px; border-radius:var(--radius-pill); }
.sum-stop--start{ background:var(--navy); color:#fff; }
.sum-route svg{ color:var(--muted); }
.sum-list{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:16px 0 0; font-size:14.5px; }
.sum-list dt{ font-weight:700; color:var(--muted); }
.sum-list dd{ margin:0; color:var(--navy); font-weight:600; }
.jb-send{ display:grid; gap:10px; margin:20px 0 8px; }
.jb-send .btn{ width:100%; padding:16px 22px; }
.jb-switch{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:28px; font-size:14px; color:var(--muted); font-weight:600; }
.jb-switch a{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--navy); padding:6px 14px; border-radius:var(--radius-pill); background:#fff; border:1px solid var(--line); }
.jb-switch a:hover{ border-color:var(--teal); color:var(--teal-text); }
.jb-switch a[aria-current="page"]{ background:var(--navy); border-color:var(--navy); color:#fff; }

@media (max-width:1100px){
  .jb-grid{ grid-template-columns:1fr; }
  .jb-panel{ position:static; max-height:none; overflow:visible; }
}
@media (max-width:760px){
  .jb-map-card{ padding:8px; border-radius:var(--radius-lg); }
  .jb-map{ border-radius:24px; }
  .jb-pop{ position:fixed; left:12px !important; right:12px; top:auto !important; bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:auto; display:grid; grid-template-columns:120px 1fr; z-index:170; }
  .jb-pop[hidden]{ display:none; }
  .jb-pop-media{ aspect-ratio:auto; height:100%; }
  .jb-legend{ font-size:11.5px; }
  .jb-hint{ display:none; }
}

/* ======================================================
   PREMIUM TOURS
   ====================================================== */
.premium-hero .premium-badge .spark{ width:13px; height:13px; }
.spirit-section{ background:linear-gradient(180deg,#FDFBF6 0%,#F8F0DE 100%); padding-top:clamp(40px,5vw,72px); }
.spirit-feature{ position:relative; display:grid; grid-template-columns:1fr 1.05fr; grid-template-areas:"media copy" "journeys journeys"; gap:clamp(22px,3vw,44px); padding:clamp(18px,2.4vw,34px); border-radius:var(--radius-xl); scroll-margin-top:calc(var(--nav-h) + 20px); }
.sf-media{ grid-area:media; position:relative; z-index:1; }
.sf-media img{ width:100%; height:100%; min-height:380px; object-fit:cover; border-radius:260px 260px 30px 30px; box-shadow:0 30px 60px -30px rgba(138,111,46,.6); }
.sf-media .hm-outline{ left:auto; right:-4%; bottom:-5%; width:28%; stroke:#C9A24E; }
.sf-copy{ grid-area:copy; position:relative; z-index:1; align-self:center; padding:clamp(4px,1vw,12px) clamp(4px,1.6vw,20px) 0 0; }
.sf-copy h2{ font-size:clamp(36px, min(4.4vw, 7vh), 60px); margin:6px 0 14px; }
.sf-lead{ font-size:clamp(16px,1.3vw,18px); color:#6F5E3E; max-width:52ch; }
.sp-points{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:26px; }
.sp-points li{ display:flex; gap:12px; align-items:flex-start; }
.sp-ico{ flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.75); border:1px solid rgba(201,162,78,.35); color:#9A7433; }
.sp-points h4{ font-family:var(--font-display); font-size:16px; color:var(--navy-deep); margin:2px 0 3px; }
.sp-points p{ font-size:14px; line-height:1.5; margin:0; color:#7A6A4A; }
.sf-journeys{ grid-area:journeys; position:relative; z-index:1; background:rgba(255,255,255,.62); border:1px solid rgba(201,162,78,.3); border-radius:28px; padding:clamp(18px,2.4vw,30px); }
.sf-journeys h3{ font-size:20px; margin-bottom:14px; }
.sf-journeys ul{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sp-journey{ display:grid; grid-template-columns:92px 1fr auto; gap:14px; align-items:center; padding:10px 14px 10px 10px; border-radius:20px; background:#fff; border:1px solid rgba(201,162,78,.22); }
.sp-journey img{ width:92px; height:92px; border-radius:16px 46px 16px 16px; object-fit:cover; }
.sp-journey span{ font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sand-text); }
.sp-journey h4{ font-family:var(--font-display); font-size:16.5px; color:var(--navy-deep); margin:2px 0 3px; }
.sp-journey p{ font-size:13.5px; line-height:1.45; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-journey .btn{ padding:10px 16px; font-size:13.5px; }
.sf-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.sf-note{ font-size:13px; color:#7A6640; margin:14px 0 0; max-width:80ch; }
.tour-features{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px); }
.tour-feature{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); scroll-margin-top:calc(var(--nav-h) + 20px); }
.tf-media{ position:relative; margin:12px 12px 0; border-radius:999px 999px 24px 24px; overflow:hidden; aspect-ratio:5/4; }
.tf-media img{ width:100%; height:100%; object-fit:cover; }
.tf-ico{ position:absolute; left:16px; bottom:16px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--navy); box-shadow:var(--shadow-card); }
.tf-copy{ display:flex; flex-direction:column; flex:1; padding:20px clamp(20px,2vw,26px) 26px; }
.tf-copy h3{ font-size:clamp(22px,2vw,27px); }
.tf-copy > p{ font-size:15px; margin:8px 0 0; }
.tf-copy h4{ font-family:var(--font-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:20px 0 6px; }
.tf-list{ margin-bottom:22px; }
.tf-list a{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; transition:color .2s ease; }
.tf-list a b{ font-family:var(--font-display); color:var(--navy); }
.tf-list a span{ flex:none; font-size:12.5px; color:var(--muted); font-weight:600; }
.tf-list a:hover b{ color:var(--teal-text); }
.tf-copy .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:1100px){ .tour-features{ grid-template-columns:1fr 1fr; } }
@media (max-width:980px){
  .spirit-feature{ grid-template-columns:1fr; grid-template-areas:"media" "copy" "journeys"; }
  .sf-media img{ min-height:0; aspect-ratio:4/3.4; }
  .sf-journeys ul{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .tour-features{ grid-template-columns:1fr; }
  .sp-points{ grid-template-columns:1fr; }
  .sp-journey{ grid-template-columns:72px 1fr; }
  .sp-journey img{ width:72px; height:72px; }
  .sp-journey .btn{ grid-column:1 / -1; justify-self:start; }
}

/* ======================================================
   ABOUT
   ====================================================== */
.page-statement p a{ color:var(--teal-text); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.page-about .belief-card p{ margin-top:10px; }

/* ======================================================
   GET A QUOTE
   ====================================================== */
.quote-hero > .container{ grid-template-columns:1fr; }
.quote-hero{ padding-bottom:clamp(24px,3vw,40px); }
.quote-hero .lede{ max-width:46em; }
.quote-section{ padding-top:0; }
.quote-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr); gap:clamp(18px,2.4vw,30px); align-items:start; }
.quote-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-soft); padding:clamp(22px,3.4vw,46px); }
.quote-h{ font-size:clamp(18px,1.6vw,21px); margin:0 0 16px; }
.quote-h:not(:first-child){ margin-top:28px; }
.pf-label{ display:block; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--navy); margin-bottom:6px; }
.path-field--travellers .stepper{ padding:3px 3px 3px 14px; }
.path-field--travellers .stepper button{ width:32px; height:32px; }
.path-field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23313579' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.quote-trip{ position:relative; margin-bottom:26px; padding:18px 20px; border-radius:22px; background:linear-gradient(135deg,var(--teal-soft),var(--navy-soft)); border:1px solid rgba(79,188,202,.3); }
.quote-trip[hidden]{ display:none; }
.quote-trip .qt-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-text); }
.quote-trip h3{ font-size:19px; margin:4px 0 10px; padding-right:80px; }
.quote-trip p{ font-size:14px; margin:8px 0 0; }
.quote-trip .qt-remove{ position:absolute; top:14px; right:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 12px; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer; }
.quote-trip .qt-remove:hover{ color:var(--navy); border-color:var(--navy); }
.quote-trip--appy{ background:linear-gradient(135deg,#FFFDF6,#F3F0FA); border-color:rgba(49,53,121,.16); display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.quote-trip--appy img{ width:60px; height:60px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff; }
.quote-aside{ display:grid; gap:18px; position:sticky; top:calc(var(--nav-h) + 16px); }
.qa-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(20px,2.2vw,28px); box-shadow:var(--shadow-card); }
.qa-card h3{ font-size:20px; }
.qa-steps{ list-style:none; margin:6px 0 0; padding:0; }
.qa-steps li{ display:flex; gap:12px; align-items:flex-start; margin-top:14px; }
.qa-steps .num-badge{ box-shadow:none; }
.qa-steps h4{ font-family:var(--font-display); font-size:15px; color:var(--navy); margin:3px 0 2px; }
.qa-steps p{ font-size:14px; margin:0; line-height:1.5; }
.qa-card--contact{ background:linear-gradient(160deg,#E6F5F8,#E8E9F6); border-color:rgba(79,188,202,.3); }
.qa-card--contact img{ width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff; margin-bottom:12px; }
.qa-card--contact p{ font-size:14.5px; margin:6px 0 14px; }
.qa-card--contact .btn{ width:100%; }
.qa-mail{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--navy); }
.qa-mail:hover{ color:var(--teal-text); }
@media (max-width:980px){ .quote-grid{ grid-template-columns:1fr; } .quote-aside{ position:static; } }

/* ======================================================
   FLOATING: WhatsApp + Ask Appy (every page)
   ====================================================== */
.fab-dock{ position:fixed; right:clamp(14px,2vw,26px); bottom:calc(clamp(14px,2vw,26px) + env(safe-area-inset-bottom,0px)); z-index:150; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.fab{ display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:0 18px 36px -14px rgba(35,39,85,.55); transition:transform .25s ease, box-shadow .25s ease; }
.fab:hover{ transform:translateY(-3px); }
.fab-wa{ width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; }
.fab-wa .wa-ico{ width:28px; height:28px; }
.fab-appy{ gap:10px; padding:6px 22px 6px 6px; border-radius:var(--radius-pill); background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; }
.fab-appy img{ width:42px; height:42px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff; animation:appyBob 3.4s ease-in-out infinite; }
.fab-appy[aria-expanded="true"]{ background:var(--navy-deep); }
@keyframes appyBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px) rotate(-4deg); } }
.appy-panel{ position:fixed; right:clamp(14px,2vw,26px); bottom:calc(clamp(14px,2vw,26px) + 132px + env(safe-area-inset-bottom,0px)); z-index:160; width:min(360px, calc(100vw - 28px)); background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:0 30px 70px -24px rgba(35,39,85,.5); padding:18px; animation:panelIn .26s cubic-bezier(.2,.7,.2,1); transform-origin:bottom right; }
.appy-panel[hidden]{ display:none; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.appy-panel-head{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.appy-panel-head img{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--teal-soft); }
.appy-panel-head h3{ font-size:18px; }
.appy-panel-head p{ font-size:13px; margin:0; }
.appy-close{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:var(--bg); border:1px solid var(--line); color:var(--navy); }
.appy-say{ margin:14px 0 0; padding:12px 14px; border-radius:6px 18px 18px 18px; background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.5; }
.appy-options{ display:grid; gap:8px; margin-top:14px; }
.appy-opt{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:16px; border:1.5px solid var(--line); transition:border-color .2s ease, background .2s ease; }
.appy-opt svg{ flex:none; width:22px; height:22px; color:var(--teal-text); }
.appy-opt b{ display:block; font-family:var(--font-display); font-size:14.5px; color:var(--navy); }
.appy-opt small{ display:block; font-size:12.5px; color:var(--muted); }
.appy-opt:hover{ border-color:var(--teal); background:var(--teal-soft); }
.appy-opt--wa .wa-ico{ color:#1FAF55; }
.appy-opt--gold{ background:linear-gradient(135deg,#FFFDF6,#F8EDD2); border-color:rgba(201,162,78,.4); }
.appy-opt--gold .spark{ color:#B8893A; }
.appy-opt--gold:hover{ border-color:#C9A24E; background:linear-gradient(135deg,#FFFDF6,#F3E2B9); }
.toast{ z-index:220; }
@media (max-width:560px){
  .fab-appy{ padding:6px; }
  .fab-appy span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .fab-wa{ width:50px; height:50px; }
  .appy-panel{ bottom:calc(14px + 124px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion: reduce){ .fab-appy img, .route-line, .mini-route, .pin.is-active .pin-halo{ animation:none; } }

/* ---------- 404 ---------- */
.nf-appy{ width:140px; height:140px; border-radius:50%; object-fit:cover; margin:0 auto 22px; box-shadow:0 0 0 8px #fff, var(--shadow-soft); }

/* centred section tags (the HappyUps eyebrow is inline; centred ones need their own row) */
.eyebrow.center{ display:flex; }
@media (min-width:981px){ .page-home .hero-dots{ right:auto; left:var(--container-pad); bottom:clamp(18px,2.4vw,30px); } }
.page-home .flow-node h4{ font-size:clamp(21px,1.8vw,27px); }
.page-home .flow-node p{ max-width:26ch; }
/* tool panes and cards swap content in place: their headings skip the scroll-in effect */
.js-emphasis main .jb-pane h2, .js-emphasis main .quote-card h2, .js-emphasis main .jb-head h1{ opacity:1; transform:none; filter:none; }
/* map details: sea names and a compass, kept the same size at any map scale */
.map-seas g text{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:calc(12.5px * var(--mk)); letter-spacing:.14em; fill:rgba(49,53,121,.38); text-transform:uppercase; }
.jb-compass{ position:absolute; z-index:2; top:14px; right:14px; width:40px; height:52px; overflow:visible; pointer-events:none; }
.jb-compass circle{ fill:none; stroke:rgba(49,53,121,.18); stroke-width:1.2; }
.jb-compass path{ fill:var(--navy); }
.jb-compass path.half{ fill:var(--teal); }
.jb-compass text{ font-family:var(--font-display); font-weight:700; font-size:11px; fill:var(--navy); }

/* phones: smaller pins and labels so a whole country fits on a narrow map */
@media (max-width:760px){
  .pin-in{ transform:scale(calc(var(--mk) * .82)); }
  .pin-label{ font-size:12.5px; stroke-width:4px; }
  .map-seas g text{ font-size:calc(10px * var(--mk)); }
}

/* ======================================================
   REVIEW 14 OCT: client feedback round two
   ====================================================== */

/* ---------- Appy, animated cut-out: pops in when seen, then idles (wave / bob) ---------- */
.appy-anim{ position:relative; display:inline-block; width:var(--appy-w, 140px); line-height:0; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.appy-anim img{ display:block; width:100%; height:auto; transform-origin:50% 94%; opacity:0; transform:translateY(24px) scale(.6) rotate(-8deg); }
.appy-shadow{ position:absolute; left:20%; right:20%; bottom:1%; height:8%; border-radius:50%; background:radial-gradient(closest-side, rgba(35,39,85,.3), rgba(35,39,85,0)); opacity:0; transition:opacity .6s ease .4s; }
.appy-anim.is-in img{ animation:appyPop .9s cubic-bezier(.34,1.56,.64,1) both, appyIdle 3.8s ease-in-out .9s infinite; }
.appy-anim--wave.is-in img{ animation:appyPop .9s cubic-bezier(.34,1.56,.64,1) both, appyWave 4.2s ease-in-out .9s infinite; }
.appy-anim.is-in .appy-shadow{ opacity:1; animation:appyShadow 3.8s ease-in-out .9s infinite; }
.appy-anim--wave.is-in .appy-shadow{ animation-duration:4.2s; }
.appy-anim:hover{ transform:translateY(-6px); }
@keyframes appyPop{ 0%{ opacity:0; transform:translateY(24px) scale(.6) rotate(-8deg); } 55%{ opacity:1; transform:translateY(-8px) scale(1.06,.95) rotate(3deg); } 80%{ transform:translateY(0) scale(.97,1.03); } 100%{ opacity:1; transform:none; } }
@keyframes appyIdle{ 0%,100%{ transform:translateY(0) scale(1); } 30%{ transform:translateY(-7px) scale(.98,1.02) rotate(-1.5deg); } 55%{ transform:translateY(0) scale(1.03,.97); } 75%{ transform:translateY(-3px) rotate(1.5deg); } }
@keyframes appyWave{ 0%,100%{ transform:rotate(0) translateY(0); } 8%{ transform:rotate(-7deg) translateY(-5px); } 16%{ transform:rotate(6deg) translateY(-7px); } 24%{ transform:rotate(-6deg) translateY(-5px); } 32%{ transform:rotate(4deg) translateY(-3px); } 42%{ transform:rotate(0) translateY(0) scale(1.04,.96); } 50%{ transform:scale(1); } 68%{ transform:translateY(-6px) scale(.98,1.02); } 82%{ transform:translateY(0); } }
@keyframes appyShadow{ 0%,100%{ transform:scaleX(1); opacity:1; } 15%,30%,68%{ transform:scaleX(.8); opacity:.65; } }
.appy-hi{ position:absolute; top:2%; right:-14%; z-index:1; padding:5px 11px; border-radius:14px 14px 14px 4px; background:var(--navy); color:#fff; font:700 13px/1.2 var(--font-display); white-space:nowrap; box-shadow:0 8px 18px -8px rgba(35,39,85,.6); opacity:0; transform:translateY(6px) scale(.8); transform-origin:0 100%; }
.appy-anim.is-in .appy-hi{ animation:appyHi 8.4s ease-in-out 1.4s infinite; }
@keyframes appyHi{ 0%,58%,100%{ opacity:0; transform:translateY(6px) scale(.8); } 6%,48%{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .appy-anim img, .appy-anim.is-in img{ opacity:1; transform:none; animation:none !important; }
  .appy-anim .appy-shadow{ opacity:1; animation:none !important; }
  .appy-hi{ display:none; }
}

/* where Appy lives */
.fab-appy-face{ width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:end center; background:linear-gradient(180deg,#E6F5F8,#CBEAEF); box-shadow:0 0 0 2px #fff; }
.fab-appy .fab-appy-face img{ width:36px; height:auto; margin-bottom:1px; border-radius:0; box-shadow:none; object-fit:contain; transform-origin:50% 94%; animation:appyWave 4.2s ease-in-out infinite; }
.appy-panel-face{ width:58px; height:58px; border-radius:50%; overflow:hidden; display:grid; place-items:end center; background:linear-gradient(180deg,#E6F5F8,#CBEAEF); }
.appy-panel-face .appy-anim{ --appy-w:46px; }
.appy-panel-head .appy-anim img{ width:100%; height:auto; border-radius:0; background:none; object-fit:contain; }
.appy-panel-face .appy-shadow{ display:none; }
.appy-band-figure{ width:clamp(104px,10vw,140px); }
.appy-band-figure .appy-anim{ --appy-w:100%; }
.dest-more-appy{ width:110px; }
.dest-more .appy-anim{ --appy-w:100%; }
.dest-more .appy-anim img{ width:100%; height:auto; border-radius:0; box-shadow:none; object-fit:contain; }
.qa-appy{ display:block; width:92px; margin-bottom:4px; }
.qa-appy .appy-anim{ --appy-w:100%; }
.qa-card--contact .appy-anim img{ width:100%; height:auto; border-radius:0; box-shadow:none; margin:0; object-fit:contain; }
.nf-appy{ width:150px; height:auto; margin:0 auto 18px; border-radius:0; box-shadow:none; }
.nf-appy .appy-anim{ --appy-w:100%; }
@media (max-width:640px){ .dest-more-appy{ display:none; } }

/* ---------- placeholder photography tag ---------- */
.sample-note{
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px); color:var(--muted); font:700 11.5px/1.2 var(--font-display); letter-spacing:.02em;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.35); pointer-events:none; white-space:nowrap;
}
.sample-note svg{ color:var(--teal-text); flex:none; }
.sample-note--hero{ top:calc(var(--nav-h) + 14px); right:var(--container-pad); }
.sample-note--slider{ top:20px; right:20px; }
.sample-note--mosaic, .sample-note--duo{ left:4%; bottom:-14px; }
@media (max-width:980px){ .sample-note--hero{ top:calc(var(--nav-h) + 44px); } }

/* ---------- back button ---------- */
.back-btn{ display:inline-flex; align-items:center; gap:6px; margin-bottom:22px; padding:9px 18px 9px 12px; border-radius:var(--radius-pill); background:#fff; border:1.5px solid rgba(49,53,121,.14); box-shadow:var(--shadow-card); font:700 14.5px var(--font-display); color:var(--navy); transition:border-color .2s ease, transform .2s ease; }
.back-btn:hover{ border-color:var(--navy); transform:translateX(-3px); }
.back-btn svg{ color:var(--teal-text); }

/* ---------- Plan Your Journey: the slider is the first thing you see ---------- */
.plan-hero--slider{ padding-bottom:clamp(28px,3vw,44px); }
.plan-hero--slider .ds-frame{ aspect-ratio:auto; height:min(calc(100svh - var(--nav-h) - 44px), 780px); min-height:500px; max-height:none; }
.ds-label{ position:absolute; z-index:3; top:20px; left:20px; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--radius-pill); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); color:#fff; font:700 12px var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.ds-label .spark{ width:13px; height:13px; color:var(--sand); }
.ds-controls{ position:absolute; z-index:3; right:clamp(24px,3vw,40px); bottom:clamp(24px,3vw,40px); display:flex; align-items:center; gap:12px; }
.ds-controls .ds-arrow{ position:static; }
.ds-dots{ display:flex; align-items:center; gap:7px; margin-right:8px; }
.ds-dot{ width:9px; height:9px; padding:0; border:none; border-radius:var(--radius-pill); background:rgba(255,255,255,.45); cursor:pointer; transition:width .3s ease, background .3s ease; }
.ds-dot:hover{ background:rgba(255,255,255,.8); }
.ds-dot.is-active{ width:28px; background:var(--teal); }
.section-head-row--appy{ align-items:flex-end; }
.plan-appy{ width:clamp(100px,9vw,140px); margin-bottom:-6px; }
.plan-appy .appy-anim{ --appy-w:100%; }
@media (max-width:760px){
  .plan-hero--slider .ds-frame{ height:min(calc(100svh - var(--nav-h) - 30px), 640px); min-height:480px; }
  .ds-controls{ left:24px; right:24px; bottom:24px; justify-content:space-between; }
  .ds-dots{ order:3; margin:0; display:none; }
  .ds-caption{ bottom:94px; }
  .plan-appy{ display:none; }
}

/* ---------- destination: overview with a photo mosaic ---------- */
.dest-mosaic{ position:relative; width:min(100%,560px); aspect-ratio:1/1.02; margin-left:auto; }
.dm{ position:absolute; margin:0; overflow:hidden; background:var(--teal-soft); box-shadow:0 30px 56px -30px rgba(35,39,85,.5); }
.dm img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.dm::after{ content:""; position:absolute; inset:6px; border-radius:inherit; border:1.5px solid rgba(255,255,255,.8); pointer-events:none; }
.dm:hover img{ transform:scale(1.06); }
.dm-a{ left:0; top:0; width:46%; height:78%; border-radius:999px 999px 28px 28px; animation:duoDown .9s cubic-bezier(.2,.7,.2,1) both; }
.dm-b{ right:0; top:3%; width:50%; height:37%; border-radius:30px; animation:duoUp .9s cubic-bezier(.2,.7,.2,1) .1s both; }
.dm-c{ right:5%; top:44%; width:34%; aspect-ratio:1; border-radius:50%; animation:duoUp .9s cubic-bezier(.2,.7,.2,1) .2s both; }
.dm-d{ left:13%; bottom:0; width:54%; height:24%; border-radius:999px; z-index:2; box-shadow:0 0 0 6px var(--bg), 0 30px 56px -30px rgba(35,39,85,.5); animation:duoUp .9s cubic-bezier(.2,.7,.2,1) .3s both; }
@media (max-width:980px){ .page-hero .dest-mosaic{ order:-1; margin:0 auto; width:min(100%,420px); } }
@media (prefers-reduced-motion: reduce){ .dm{ animation:none !important; } }

/* ---------- destination: "plan your own journey" as one clear card ---------- */
.own-section{ background:var(--bg); }
.own-card{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,60px); align-items:center; padding:clamp(14px,1.6vw,22px); border-radius:var(--radius-xl);
  background:linear-gradient(150deg,#F6F6FB 0%,#E6E7F4 100%); border:1px solid rgba(49,53,121,.14); box-shadow:var(--shadow-card); }
.own-map{ position:relative; display:block; height:clamp(300px,32vw,440px); border-radius:calc(var(--radius-xl) - 8px); overflow:hidden;
  background:radial-gradient(rgba(49,53,121,.07) 1.1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(160deg,#E6F5F8 0%,#D7E8F1 100%); transition:transform .4s ease; }
.own-map:hover{ transform:translateY(-4px); }
.own-map .map-svg{ width:100%; height:100%; }
.own-appy{ position:absolute; right:3%; bottom:2%; width:clamp(84px,9vw,128px); }
.own-appy .appy-anim{ --appy-w:100%; }
.own-copy{ padding:clamp(4px,1vw,16px) clamp(4px,2vw,28px) clamp(4px,1vw,16px) 0; }
.own-copy h2{ font-size:clamp(28px, min(3.2vw, 5vh), 42px); }
.own-copy > p{ margin-top:14px; font-size:16.5px; max-width:48ch; }
.own-facts{ display:grid; gap:10px; margin:22px 0 26px; }
.own-facts li{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); }
.own-facts svg{ width:32px; height:32px; padding:7px; border-radius:50%; background:#fff; color:var(--teal-text); flex:none; }
.own-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
@media (max-width:860px){ .own-card{ grid-template-columns:1fr; } .own-copy{ padding:4px 10px 14px; } }

/* ---------- My Own Journey: swipe through the places, add from the card ---------- */
.jp{ padding:6px 0 22px; }
.jp-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.jp-head h2{ font-size:clamp(22px,2vw,28px); }
.jp-head p{ margin:6px 0 0; font-size:15px; max-width:62ch; }
.jp-nav{ display:flex; gap:8px; flex:none; }
.jp-arrow{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:#fff; border:1.5px solid rgba(49,53,121,.14); color:var(--navy); box-shadow:var(--shadow-card); transition:border-color .2s ease, transform .2s ease; }
.jp-arrow:hover{ border-color:var(--navy); transform:scale(1.05); }
.jp-track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,22vw,290px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 16px; scrollbar-width:none; }
.jp-track::-webkit-scrollbar{ display:none; }
.jp-card{ position:relative; scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-card); transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.jp-card:hover{ transform:translateY(-3px); }
.jp-card.is-on{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(79,188,202,.22), var(--shadow-card); }
.jp-card--start{ border-color:rgba(49,53,121,.2); }
.jp-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--teal-soft); }
.jp-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.jp-card:hover .jp-media img{ transform:scale(1.05); }
.jp-start{ position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--radius-pill); background:var(--navy); color:#fff; font:700 12px var(--font-display); }
.jp-card[data-num]::before{ content:attr(data-num); position:absolute; z-index:2; right:10px; top:10px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--teal); color:#fff; font:700 13px var(--font-display); box-shadow:0 0 0 3px #fff; }
.jp-body{ display:flex; flex-direction:column; flex:1; padding:14px 16px 16px; }
.jp-body h3{ font-size:18px; }
.jp-body p{ font-size:13.5px; line-height:1.5; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jp-actions{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:14px; }
.jp-add{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:var(--radius-pill); cursor:pointer; border:1.5px solid var(--navy); background:var(--navy); color:#fff; font:700 13.5px var(--font-display); transition:background .2s ease, color .2s ease, border-color .2s ease; }
.jp-add:hover{ background:var(--navy-deep); }
.jp-add[aria-pressed="true"]{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-text); }
.jp-add:disabled{ background:var(--navy-soft); border-color:transparent; color:var(--navy); cursor:default; }
.jp-add svg{ width:15px; height:15px; }
.jp-view{ display:inline-flex; align-items:center; gap:4px; padding:8px 6px; border:none; background:none; cursor:pointer; color:var(--teal-text); font:700 13px var(--font-display); white-space:nowrap; }
.jp-view:hover{ color:var(--navy); }
@media (max-width:760px){ .jp-nav{ display:none; } .jp-track{ grid-auto-columns:76vw; } }

/* ---------- Premium Tours: every tour reads as a premium tier ---------- */
.premium-badge--head{ margin:0 0 18px; }
.tier-badge{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-bottom:6px; padding:4px 10px; border-radius:var(--radius-pill);
  background:linear-gradient(135deg,#FBEFC6 0%,#E3C47A 55%,#C9A24E 100%); color:#3B2A08; font:700 10.5px var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px -6px rgba(160,118,40,.7); }
.tier-badge .spark{ width:11px; height:11px; }
.tour-card--premium, .tour-feature--premium{ position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,236,176,.45) 0%, transparent 55%), linear-gradient(150deg,#FFFDF8 0%,#F7EDD6 100%);
  border:1.5px solid rgba(201,162,78,.5); box-shadow:0 22px 44px -30px rgba(160,118,40,.65), 0 0 40px -24px rgba(236,200,112,.6); }
.tour-card--premium::after, .tour-feature--premium::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform:translateX(-140%) skewX(-12deg); transition:transform 1s ease; }
.tour-card--premium:hover::after, .tour-feature--premium:hover::after{ transform:translateX(320%) skewX(-12deg); }
.tour-card--premium:hover{ border-color:#C9A24E; }
.tour-card--premium .tour-media, .tour-feature--premium .tf-media{ box-shadow:0 0 0 3px #EBD69F, 0 14px 30px -18px rgba(160,118,40,.7); }
.tour-card--premium h3, .tour-feature--premium h3{ background:linear-gradient(100deg,#2A2F6E 0%,#313579 50%,#8A6424 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tour-card--premium .tour-copy p, .tour-feature--premium .tf-copy > p{ color:#6F5E3E; }
.tour-feature--premium .tf-list a{ border-top-color:rgba(201,162,78,.28); }
.tour-feature--premium .tf-copy{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .tour-card--premium::after, .tour-feature--premium::after{ display:none; } }

/* ---------- About: story, why choose us (a path), journal, vision + mission, values, location ---------- */
.story-section{ position:relative; }
.story-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,80px); align-items:center; }
.story-copy h2{ font-size:clamp(30px, min(3.6vw, 6vh), 48px); margin-bottom:18px; }
.story-copy p{ font-size:16.5px; margin:0 0 14px; max-width:60ch; }
.story-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(26px,3vw,42px); box-shadow:var(--shadow-soft); }
.story-label{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-text); }
.story-card h3{ font-size:clamp(24px,2.4vw,32px); margin:10px 0 12px; max-width:16ch; }
.story-card p{ font-size:15.5px; }
.story-card blockquote{ margin:20px 0 0; padding:4px 0 4px 16px; border-left:4px solid var(--teal); font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.6vw,21px); color:var(--navy); }
.story-appy{ position:absolute; right:-14px; top:-70px; width:112px; }
.story-appy .appy-anim{ --appy-w:100%; }
@media (max-width:980px){ .story-grid{ grid-template-columns:1fr; } .story-card{ margin-top:60px; } .story-appy{ right:8px; } }

.why-path{ position:relative; margin-top:10px; }
.why-line{ position:absolute; left:0; top:0; width:100%; height:190px; overflow:visible; z-index:0; }
.why-line-base{ fill:none; stroke:rgba(49,53,121,.2); stroke-width:2.5; stroke-dasharray:2 10; stroke-linecap:round; }
.why-line-draw{ fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1) .3s; }
.why-path.in-view .why-line-draw{ stroke-dashoffset:0; }
.why-traveller{ fill:var(--navy); stroke:#fff; stroke-width:3; }
.why-steps{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.why-step{ text-align:center; padding:8px 4px 0; opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(.25s + var(--i) * .18s); }
.why-step:nth-child(even){ padding-top:98px; }
.why-path.in-view .why-step{ opacity:1; transform:none; }
.why-icon{ width:84px; height:84px; margin:0 auto 14px; border-radius:999px 999px 26px 26px; display:grid; place-items:center; background:#fff; color:var(--teal-text); border:5px solid var(--bg); box-shadow:var(--shadow-card); transition:transform .3s ease, background .3s ease, color .3s ease; }
.why-step:nth-child(even) .why-icon{ color:var(--navy); }
.why-step:hover .why-icon{ transform:translateY(-6px) rotate(-3deg); background:var(--teal-soft); }
.why-step .num-badge{ display:grid; margin:0 auto 10px; }
.why-step:nth-child(even) .num-badge{ background:var(--navy-soft); color:var(--navy); }
.why-step h3{ font-size:clamp(17px,1.4vw,19px); margin-bottom:6px; }
.why-step p{ font-size:14px; line-height:1.55; margin:0; }
@media (max-width:1100px){ .why-line{ display:none; } .why-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:34px; } .why-step:nth-child(even){ padding-top:8px; } }
@media (max-width:640px){
  .why-steps{ grid-template-columns:1fr; gap:0; position:relative; }
  .why-steps::before{ content:""; position:absolute; left:41px; top:30px; bottom:30px; border-left:2.5px dashed rgba(49,53,121,.2); }
  .why-step{ display:grid; grid-template-columns:84px 1fr; column-gap:16px; text-align:left; padding:10px 0; }
  .why-step .why-icon{ grid-row:span 3; margin:0; width:72px; height:72px; }
  .why-step .num-badge{ margin:0 0 6px; }
}
@media (prefers-reduced-motion: reduce){ .why-step{ opacity:1; transform:none; transition:none; } .why-line-draw{ stroke-dashoffset:0; transition:none; } .why-traveller{ display:none; } }

.journal-section{ background:var(--surface); border-top:1px solid var(--line); }
.journal-soon{ color:var(--muted); font-size:13.5px; }
.journal-note{ font-size:13.5px; color:var(--muted); margin:18px 0 0; }

.vm-section{ background:var(--bg); }
.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); }
.vm{ position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:clamp(28px,3.4vw,48px); }
.vm p{ position:relative; z-index:1; margin:0; font-family:var(--font-display); font-weight:700; line-height:1.35; }
.vm--vision{ background:var(--navy-deep); }
.vm--vision p{ color:#fff; font-size:clamp(21px,2vw,28px); }
.vm--mission{ background:linear-gradient(150deg,#F3FAFB 0%,#DDF1F4 100%); border:1px solid rgba(79,188,202,.3); }
.vm--mission p{ color:var(--navy); font-size:clamp(17px,1.5vw,21px); }
.vm-ico{ position:relative; z-index:1; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px; background:rgba(255,255,255,.12); color:var(--teal); }
.vm--mission .vm-ico{ background:#fff; color:var(--teal-text); }
.vm .half-accent{ position:absolute; z-index:0; pointer-events:none; border-radius:999px; aspect-ratio:1; }
.vm .half-accent--r{ width:280px; right:-120px; top:auto; bottom:-120px; border:2px solid rgba(79,188,202,.3); }
@media (max-width:860px){ .vm-grid{ grid-template-columns:1fr; } }

.values-grid{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.value-card{ flex:0 1 calc(25% - 14px); min-width:170px; display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 18px 26px; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-card); text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.value-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.value-card--teal{ background:linear-gradient(160deg,#F3FAFB 0%,#E3F3F6 100%); border-color:rgba(79,188,202,.3); }
.value-card--navy{ background:linear-gradient(160deg,#F6F6FB 0%,#E8E9F5 100%); border-color:rgba(49,53,121,.14); }
.value-ico{ width:62px; height:62px; border-radius:999px 999px 18px 18px; display:grid; place-items:center; background:#fff; color:var(--teal-text); box-shadow:0 12px 26px -18px rgba(49,53,121,.45); }
.value-card--navy .value-ico{ color:var(--navy); }
.value-card h3{ font-size:20px; }
.values-grid.in-view .value-card{ animation:valueIn .6s cubic-bezier(.2,.7,.2,1) both; }
.values-grid.in-view .value-card:nth-child(2){ animation-delay:.06s; } .values-grid.in-view .value-card:nth-child(3){ animation-delay:.12s; }
.values-grid.in-view .value-card:nth-child(4){ animation-delay:.18s; } .values-grid.in-view .value-card:nth-child(5){ animation-delay:.24s; }
.values-grid.in-view .value-card:nth-child(6){ animation-delay:.30s; } .values-grid.in-view .value-card:nth-child(7){ animation-delay:.36s; }
@keyframes valueIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
@media (max-width:560px){ .value-card{ flex-basis:calc(50% - 9px); min-width:0; } }

.location-section{ background:var(--surface); border-top:1px solid var(--line); }
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); align-items:stretch; }
.loc-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(26px,3vw,42px); box-shadow:var(--shadow-card); }
.loc-pin{ width:54px; height:54px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px; background:var(--teal-soft); color:var(--teal-text); }
.loc-card h3{ font-size:clamp(22px,2vw,26px); }
.loc-address{ margin:10px 0 12px; font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.5; color:var(--navy); }
.loc-contact{ display:grid; gap:10px; margin:18px 0 26px; }
.loc-contact li{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--navy); }
.loc-contact svg{ color:var(--teal-text); }
.loc-contact a:hover{ color:var(--teal-text); }
.loc-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.loc-map-card{ position:relative; min-height:380px; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card);
  background:radial-gradient(rgba(49,53,121,.07) 1.1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(160deg,#E6F5F8 0%,#D7E8F1 100%); }
.loc-map{ position:absolute; inset:18px 18px 70px; width:calc(100% - 36px); height:calc(100% - 88px); }
.loc-ring{ fill:rgba(79,188,202,.35); transform-box:fill-box; transform-origin:center; animation:locPulse 2.2s ease-out infinite; }
@keyframes locPulse{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(2.6); opacity:0; } }
.loc-map-label{ position:absolute; left:18px; bottom:18px; display:grid; gap:2px; padding:12px 18px; border-radius:18px; background:#fff; box-shadow:var(--shadow-card); }
.loc-map-label b{ font-family:var(--font-display); color:var(--navy); font-size:16px; }
.loc-map-label span{ font-size:13px; color:var(--muted); font-weight:600; }
@media (max-width:860px){ .location-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .loc-ring{ animation:none; } .values-grid.in-view .value-card{ animation:none; } }
/* slider: headings show at once; arrows on the sides, dots under the caption (clear of the floating buttons) */
.js-emphasis main .ds-caption h2{ opacity:1; transform:none; filter:none; }
.ds-controls{ position:static; display:contents; }
.ds-controls .ds-arrow{ position:absolute; top:50%; bottom:auto; margin-top:-27px; }
.ds-controls .ds-arrow--prev{ left:clamp(14px,2vw,24px); right:auto; }
.ds-controls .ds-arrow--next{ right:clamp(14px,2vw,24px); left:auto; }
.ds-dots{ position:absolute; z-index:3; left:clamp(24px,5vw,72px); bottom:clamp(22px,2.6vw,32px); margin:0; }
.plan-hero--slider .ds-caption{ bottom:clamp(60px,6vw,84px); left:clamp(84px,7vw,100px); }
@media (max-width:760px){
  .ds-controls .ds-arrow{ top:auto; bottom:24px; margin-top:0; }
  .ds-controls .ds-arrow--prev{ left:24px; } .ds-controls .ds-arrow--next{ left:82px; right:auto; }
  .ds-dots{ display:none; }
  .plan-hero--slider .ds-caption{ left:24px; bottom:94px; }
}
.back-btn{ display:flex; width:max-content; }
.sample-note--mosaic{ left:auto; right:0; bottom:-40px; }
.sample-note--duo{ left:auto; right:0; bottom:-30px; }
.loc-pin-dot{ stroke-width:9; }
@media (max-width:560px){
  .fab-appy .fab-appy-face{ position:static; width:44px; height:44px; clip:auto; overflow:hidden; }
  .sample-note--mosaic, .sample-note--duo{ right:8px; bottom:8px; }
}

/* destination hero: full-width photo slideshow, same as the home hero (Oct 15) */
.page-dest .hero h1{ font-size:clamp(46px, min(6.4vw, 10vh), 92px); line-height:1; }
.page-dest .hero .lede{ max-width:520px; }
.page-dest .hero-canvas{ min-height:min(92svh, 860px); }
@media (min-width:981px){ .page-dest .hero-dots{ right:auto; left:var(--container-pad); bottom:clamp(18px,2.4vw,30px); } }

/* ======================================================
   REVIEW 22 OCT: full-photo heroes, premium core values, journal slideshow
   ====================================================== */

/* photo heroes: the picture fills the hero, no shapes; a navy shade on the text side only */
.photo-hero .hero-scrim{
  background:
    linear-gradient(90deg, rgba(23,26,62,.78) 0%, rgba(23,26,62,.55) 30%, rgba(23,26,62,.18) 55%, rgba(23,26,62,0) 72%),
    linear-gradient(0deg, rgba(23,26,62,.45) 0%, rgba(23,26,62,0) 30%),
    linear-gradient(180deg, rgba(23,26,62,.35) 0%, rgba(23,26,62,0) 22%);
}
.photo-hero .hero-slide{ background-position:center 45%; }
.photo-hero .hero h1, .page-dest .photo-hero .hero h1{ color:#fff; text-shadow:0 2px 24px rgba(10,12,40,.35); }
.photo-hero .h1-travels{ color:#8FDCE5; }
.photo-hero .hero .lede{ color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(10,12,40,.35); }
.photo-hero .hero-copy{ max-width:620px; }
.photo-hero .hero-tag{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#fff; backdrop-filter:blur(8px); }
.photo-hero .hero-tag .spark{ color:#8FDCE5; }
.photo-hero .eyebrow.on-dark{ color:#9BE3EA; }
.photo-hero .hero-points li{ color:#fff; }
.photo-hero .hero-points svg{ background:rgba(255,255,255,.18); color:#fff; }
.photo-hero .tag-pill{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(6px); }
.photo-hero .btn-navy{ background:#fff; color:var(--navy); }
.photo-hero .btn-navy:hover{ background:var(--teal-soft); }
.photo-hero .btn-soft{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.42); backdrop-filter:blur(6px); }
.photo-hero .btn-soft:hover{ background:rgba(255,255,255,.24); border-color:#fff; }
.photo-hero .premium-badge{ background:rgba(230,216,184,.2); border-color:rgba(230,216,184,.5); color:#F3E6C4; }
.photo-hero .hero-dot{ background:rgba(255,255,255,.5); }
.photo-hero .hero-dot[aria-current="true"]{ background:var(--teal); }
@media (min-width:981px){ .photo-hero .hero-dots{ right:auto; left:var(--container-pad); bottom:clamp(18px,2.4vw,30px); } }
.photo-hero .hero-canvas{ min-height:min(92svh, 880px); }
.page-home .photo-hero .hero-canvas{ min-height:100svh; }
@media (max-width:980px){
  .photo-hero .hero-scrim{ background:linear-gradient(180deg, rgba(23,26,62,.35) 0%, rgba(23,26,62,.1) 22%, rgba(23,26,62,.55) 52%, rgba(23,26,62,.88) 100%); }
  .photo-hero .hero-slide{ background-position:center 40%; }
}

/* back button: glass on photos, solid elsewhere; returns to the previous page */
.photo-hero .back-btn, .ds-top .back-btn{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; box-shadow:none; backdrop-filter:blur(8px); }
.photo-hero .back-btn svg, .ds-top .back-btn svg{ color:#fff; }
.photo-hero .back-btn:hover, .ds-top .back-btn:hover{ background:rgba(255,255,255,.26); border-color:#fff; }
.ds-top{ position:absolute; z-index:3; top:20px; left:20px; display:flex; align-items:center; gap:10px; }
.ds-top .back-btn{ margin:0; padding:7px 14px 7px 10px; font-size:13.5px; }
.ds-top .ds-label{ position:static; }
.quote-hero .back-btn{ margin-bottom:18px; }

/* core values: a premium band (navy, gold accents) */
.cv-section{ position:relative; overflow:hidden; background:
  radial-gradient(70% 90% at 100% 0%, rgba(201,162,78,.16) 0%, transparent 60%),
  radial-gradient(60% 80% at 0% 100%, rgba(79,188,202,.14) 0%, transparent 60%), var(--navy-deep); }
.cv-section .half-accent{ position:absolute; z-index:0; pointer-events:none; border-radius:999px; aspect-ratio:1; }
.cv-section .half-accent--l{ width:clamp(220px,24vw,380px); left:calc(-1 * clamp(110px,12vw,190px)); top:12%; background:linear-gradient(150deg, rgba(201,162,78,.18), rgba(201,162,78,0) 70%); }
.cv-section .half-accent--r{ width:clamp(180px,18vw,300px); right:calc(-1 * clamp(90px,9vw,150px)); bottom:8%; border:2px solid rgba(201,162,78,.3); }
.cv-head{ position:relative; z-index:1; text-align:center; max-width:680px; margin:0 auto clamp(36px,4vw,56px); }
.cv-head .premium-badge{ margin:0 auto 18px; }
.cv-head h2{ color:#fff; font-size:clamp(34px, min(4.4vw, 7vh), 58px); }
.cv-head p{ color:rgba(255,255,255,.72); margin-top:14px; font-size:17px; }
.cv-grid{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.cv-card{ position:relative; flex:0 1 calc(25% - 14px); min-width:190px; display:flex; flex-direction:column; align-items:center; gap:16px; padding:34px 20px 30px; text-align:center;
  border-radius:var(--radius-lg); background:linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(201,162,78,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px -30px rgba(0,0,0,.6);
  transition:transform .35s ease, border-color .35s ease, background .35s ease; overflow:hidden; }
.cv-card::before{ content:""; position:absolute; left:20%; right:20%; top:0; height:2px; background:linear-gradient(90deg, transparent, #E3C47A, transparent); }
.cv-card:hover{ transform:translateY(-6px); border-color:rgba(227,196,122,.75); background:linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%); }
.cv-num{ position:absolute; top:14px; right:18px; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.14em; color:rgba(227,196,122,.7); }
.cv-ico{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center; color:#F3DEA6;
  background:radial-gradient(circle at 30% 25%, rgba(255,236,176,.25), rgba(201,162,78,.08) 70%); box-shadow:0 0 0 1.5px rgba(227,196,122,.55), 0 0 30px -6px rgba(236,200,112,.45); }
.cv-card h3{ color:#fff; font-size:clamp(19px,1.6vw,22px); letter-spacing:.01em; }
.cv-grid.in-view .cv-card{ animation:valueIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * .07s); }
@media (max-width:560px){ .cv-card{ flex-basis:calc(50% - 9px); min-width:0; padding:28px 12px 24px; } }
@media (prefers-reduced-motion: reduce){ .cv-grid.in-view .cv-card{ animation:none; } }

/* travel journal: one story at a time, swipe or use the arrows */
.journal-slider{ position:relative; }
.js-nav{ display:flex; gap:8px; }
.js-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; border-radius:var(--radius-xl); }
.js-track::-webkit-scrollbar{ display:none; }
.js-slide{ scroll-snap-align:start; display:grid; grid-template-columns:1.3fr 1fr; min-height:clamp(320px,34vw,440px); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.js-media{ position:relative; overflow:hidden; }
.js-media img{ width:100%; height:100%; object-fit:cover; }
.js-copy{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:clamp(24px,3.4vw,52px); }
.js-copy h3{ font-size:clamp(24px,2.6vw,34px); }
.js-copy p{ margin:0; font-size:16px; max-width:44ch; }
.js-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.js-dot{ width:9px; height:9px; padding:0; border:none; border-radius:var(--radius-pill); background:var(--line); cursor:pointer; transition:width .3s ease, background .3s ease; }
.js-dot.is-active{ width:28px; background:var(--teal); }
@media (max-width:760px){ .js-slide{ grid-template-columns:1fr; } .js-media{ aspect-ratio:16/10; } .js-nav{ display:none; } }

/* official HappyUps Travels logo (Oct 22): two-line lockup, so a little taller than the HappyUps wordmark */
.brand-logo--travels{ height:40px; width:auto; }
.nav .brand{ padding:7px 16px 7px 12px; }
footer .brand-logo--travels{ height:44px; }
@media (max-width:520px){ .brand-logo--travels{ height:32px; } .nav .brand{ padding:6px 12px 6px 9px; } }