@font-face{font-family:"Barlow Condensed";src:url("../fonts/bc-800i.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/bc-700i.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --orange:#E57004;--orange-d:#C45F00;--orange-soft:#FFF1E4;
  --teal:#498C9D;--teal-d:#2F6E7E;--teal-dd:#1F4E5A;--teal-soft:#EAF3F5;
  --ink:#1E2A30;--ink2:#3E4B52;--muted:#5E6B72;--line:#DCE6E9;--paper:#FFFFFF;--sand:#F8F6F2;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,sans-serif;
  --wrap:1200px;--pad:32px;--r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--teal-d)}a:hover{color:var(--orange-d)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;line-height:1.02}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:120px;padding-bottom:120px}
.sand{background:var(--sand)}
.tealbg{background:var(--teal-dd);color:#fff}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}.skip:focus{left:16px}

/* type */
.display{font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.005em}
.h1{font-size:96px;line-height:.92}
.h2{font-size:64px;line-height:.95}
.h3{font-family:var(--display);font-weight:700;font-style:italic;font-size:30px;line-height:1.05}
.o{color:var(--orange)}.t{color:var(--teal)}
.lead{font-size:21px;line-height:1.55;color:var(--ink2)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--teal-d);margin-bottom:18px}
.kicker svg{width:16px;height:20px}
.head{max-width:760px;margin-bottom:56px}
.head .lead{margin-top:18px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:18px;padding:16px 28px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background-color .2s}
.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-d);color:#fff}
.btn-line{color:var(--teal-d);box-shadow:inset 0 0 0 2px var(--teal)}.btn-line:hover{background:var(--teal-soft);color:var(--teal-dd)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo img{height:50px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;font-weight:600;font-size:16px}
.nav-links a{color:var(--ink2);text-decoration:none}.nav-links a:hover{color:var(--orange-d)}
.nav-links .btn{font-size:16px;padding:11px 20px;color:#fff}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:var(--teal-soft);color:var(--teal-dd);border-radius:12px;cursor:pointer;align-items:center;justify-content:center}

/* hero */
.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:96px}
.hero .lead{max-width:30em;margin:26px 0 36px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{margin-top:22px;font-size:15px;color:var(--muted)}
.hero-route{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-route path{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:3 9;opacity:.35}

/* route card */
.trip{background:#fff;border-radius:28px;box-shadow:0 2px 6px rgba(30,42,48,.05),0 30px 80px rgba(31,78,90,.16);padding:28px 28px 24px;position:relative}
.trip-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.trip-head strong{font-family:var(--display);font-style:italic;font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:.01em}
.trip-head span{font-size:13px;font-weight:600;color:var(--teal-d);background:var(--teal-soft);padding:5px 10px;border-radius:999px}
.trip-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.legs{position:relative}
.legs::before{content:"";position:absolute;left:21px;top:24px;bottom:24px;border-left:2px dashed var(--teal);opacity:.5}
.leg{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:10px 0}
.leg-ico{width:44px;height:44px;border-radius:14px;background:var(--teal);display:grid;place-items:center;color:#fff;position:relative;z-index:1}
.leg-ico svg{width:24px;height:24px}
.leg b{display:block;font-size:16px;font-weight:700}
.leg small{display:block;font-size:13.5px;color:var(--muted)}
.leg .price{font-family:var(--display);font-style:italic;font-weight:700;font-size:24px;color:var(--ink)}
.trip-total{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:2px dashed var(--line);margin-top:10px;padding-top:16px}
.trip-total .lbl{font-size:14px;color:var(--muted)}
.trip-total .sum{font-family:var(--display);font-style:italic;font-weight:800;font-size:52px;line-height:.9;color:var(--orange)}
.trip-total .vs{text-align:right;font-size:14px;color:var(--muted)}
.trip-total .vs s{display:block;font-family:var(--display);font-style:italic;font-weight:700;font-size:26px;color:var(--muted)}
.save-badge{position:absolute;top:-16px;right:24px;background:var(--orange);color:#fff;font-family:var(--display);font-style:italic;font-weight:800;font-size:22px;text-transform:uppercase;padding:8px 16px;border-radius:12px;transform:rotate(4deg);box-shadow:0 10px 24px rgba(229,112,4,.3)}
.traveller{position:absolute;left:15px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(229,112,4,.2);z-index:2}
.illus{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center}

/* modes strip */
.modes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.mode{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:24px 18px;text-align:center;transition:border-color .2s,transform .25s}
.mode:hover{border-color:var(--teal);transform:translateY(-3px)}
.mode-ico{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal)}
.mode-ico svg{width:34px;height:34px}
.mode h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase}
.mode p{font-size:14.5px;color:var(--muted);margin-top:4px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;position:relative}
.step{position:relative;background:#fff;border-radius:var(--r);padding:34px 30px}
.step-n{font-family:var(--display);font-style:italic;font-weight:800;font-size:80px;line-height:.8;color:var(--orange);margin-bottom:18px}
.step h3{margin-bottom:10px}
.step p{color:var(--ink2);font-size:17px}
.step-path{position:absolute;left:12%;right:12%;top:60px;height:2px;border-top:2px dashed var(--teal);opacity:.4;z-index:0}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cmp{border-radius:28px;padding:36px}
.cmp-std{background:var(--sand)}
.cmp-ct{background:var(--teal-dd);color:#fff}
.cmp h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:30px;text-transform:uppercase;margin-bottom:6px}
.cmp .sub{font-size:15px;opacity:.8;margin-bottom:24px}
.cmp-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(94,107,114,.35);font-size:16px}
.cmp-ct .cmp-row{border-bottom-color:rgba(255,255,255,.25)}
.cmp-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px}
.cmp-total b{font-family:var(--display);font-style:italic;font-weight:800;font-size:56px;line-height:1}
.cmp-ct .cmp-total b{color:#FFB46B}
.cmp-note{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* why */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.why-card{padding:32px 30px;border-radius:var(--r);background:var(--teal-soft)}
.why-card:nth-child(2n){background:var(--orange-soft)}
.why-card svg{width:40px;height:40px;color:var(--teal-d);margin-bottom:18px}
.why-card:nth-child(2n) svg{color:var(--orange-d)}
.why-card h3{margin-bottom:8px}
.why-card p{color:var(--ink2);font-size:16.5px}

/* routes */
.routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.route{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .2s,transform .25s,box-shadow .25s}
.route:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 18px 40px rgba(31,78,90,.12);color:var(--ink)}
.route-cities{font-family:var(--display);font-style:italic;font-weight:800;font-size:26px;text-transform:uppercase;line-height:1.05}
.route-cities span{color:var(--orange)}
.route-line{display:flex;align-items:center;gap:6px;margin:14px 0 12px;color:var(--teal)}
.route-line svg{width:22px;height:22px;flex-shrink:0}
.route-line i{flex:1;border-top:2px dashed var(--line)}
.route small{font-size:14px;color:var(--muted)}

/* tips */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tip{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tip-top{height:120px;display:grid;place-items:center;background:var(--teal);color:#fff}
.tip:nth-child(3n+2) .tip-top{background:var(--orange)}
.tip:nth-child(3n) .tip-top{background:var(--teal-dd)}
.tip-top svg{width:52px;height:52px}
.tip-body{padding:24px 26px 28px}
.tip-body h3{font-size:26px;margin-bottom:10px}
.tip-body p{font-size:16.5px;color:var(--ink2)}

/* audience */
.who{display:flex;flex-wrap:wrap;gap:12px}
.who span{font-family:var(--display);font-style:italic;font-weight:700;font-size:24px;text-transform:uppercase;padding:10px 22px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff}
.who span:nth-child(2n){background:var(--orange)}

/* app + partners */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo-card{border-radius:28px;padding:44px}
.duo-app{background:var(--orange);color:#fff}
.duo-app .lead{color:#FFF1E4}
.duo-partners{background:var(--teal-soft)}
.duo-card .h2{font-size:48px;margin-bottom:16px}
.duo-card .lead{margin-bottom:28px;font-size:19px}
.store{display:inline-flex;align-items:center;gap:12px;background:#111;color:#fff;border-radius:14px;padding:10px 20px;text-decoration:none}
.store:hover{background:#000;color:#fff}
.store svg{width:26px;height:26px}
.store small{display:block;font-size:11px;opacity:.8;line-height:1}
.store b{display:block;font-size:19px;line-height:1.1}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border-radius:18px;margin-bottom:12px;padding:0 26px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--orange-soft);color:var(--orange-d);display:grid;place-items:center;font-size:22px;font-weight:700;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--ink2)}

/* final cta + footer */
.final{text-align:center}
.final .h1{font-size:110px}
.final .lead{max-width:34em;margin:24px auto 36px}
.footer{background:var(--teal-dd);color:#CFE2E7;font-size:15px}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center;padding-top:56px;padding-bottom:40px}
.footer-logo{background:#fff;border-radius:22px;padding:14px}
.footer-logo img{width:130px;height:auto}
.footer a{color:#fff}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:600}
.footer-nav a{text-decoration:none}.footer-nav a:hover{color:#FFB46B}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;padding-bottom:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

/* motion */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .trip .leg,.js .trip .trip-total{opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .5s ease}
.js .trip.play .leg,.js .trip.play .trip-total{opacity:1;transform:none}
.js .trip.play .leg:nth-child(2){transition-delay:.45s}.js .trip.play .leg:nth-child(3){transition-delay:.9s}.js .trip.play .leg:nth-child(4){transition-delay:1.35s}
.js .trip.play .trip-total{transition-delay:1.8s}
.js .save-badge{opacity:0;transform:rotate(4deg) scale(.6);transition:opacity .4s ease 2.3s,transform .5s cubic-bezier(.3,1.6,.5,1) 2.3s}
.js .trip.play .save-badge{opacity:1;transform:rotate(4deg) scale(1)}
.traveller{transition:top .6s cubic-bezier(.5,0,.3,1)}
.hero-route path{animation:dash 30s linear infinite}
@keyframes dash{to{stroke-dashoffset:-600}}

/* responsive */
@media (max-width:1100px){
  .h1{font-size:76px}.h2{font-size:52px}
  .modes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .routes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--pad:20px}
  .section{padding-top:84px;padding-bottom:84px}
  .h1{font-size:58px}.h2{font-size:44px}.final .h1{font-size:68px}.lead{font-size:19px}
  .hero-inner{grid-template-columns:1fr;padding-top:40px;padding-bottom:64px}
  .steps,.compare,.why,.tips,.duo{grid-template-columns:1fr}
  .step-path{display:none}
  .duo-card{padding:32px}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:6px var(--pad) 20px}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav-links .btn{margin-top:14px;justify-content:center;border-bottom:0;padding:14px}
  .nav.open .nav-links{display:flex}
}
@media (max-width:560px){
  .h1{font-size:48px}.final .h1{font-size:54px}
  .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .routes{grid-template-columns:1fr}
  .trip{padding:22px 18px}
  .trip-total .sum{font-size:42px}
  .nav-logo img{height:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .trip .leg,.js .trip .trip-total,.js .save-badge{opacity:1;transform:none}
  .js .save-badge{transform:rotate(4deg)}
}

/* trip link */
.trip-link{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px;font-weight:700;font-size:15px;text-decoration:none;color:var(--teal-d)}
.trip-link svg{width:16px;height:16px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18)}
.stat b{display:block;font-family:var(--display);font-style:italic;font-weight:800;font-size:64px;line-height:.9;color:#FFB46B}
.stat span{display:block;margin-top:8px;font-size:16px;color:#CFE2E7}

/* city guides */
.gfeat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gcard{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;padding:26px;border-radius:var(--r);background:var(--teal-dd);color:#fff;text-decoration:none;isolation:isolate;transition:transform .25s,box-shadow .25s}
.gcard:nth-child(2n){background:var(--orange)}
.gcard:nth-child(3){background:var(--teal)}
.gcard:hover{color:#fff;transform:translateY(-4px);box-shadow:0 20px 44px rgba(31,78,90,.22)}
.gcard .gl{position:absolute;right:-10px;top:-34px;font-family:var(--display);font-style:italic;font-weight:800;font-size:240px;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);z-index:-1;user-select:none}
.gcard svg.land{position:absolute;right:20px;top:22px;width:84px;height:110px;color:rgba(255,255,255,.9);z-index:-1}
.gcard small{font-size:14px;font-weight:600;opacity:.85}
.gcard h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:46px;text-transform:uppercase;line-height:.95;margin:2px 0 12px}
.gcard .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.gcard .go svg{width:16px;height:16px;transition:transform .2s}
.gcard:hover .go svg{transform:translateX(4px)}
.gcats{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0}
.gcats span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:600;font-size:15px;color:var(--ink2)}
.gcats svg{width:18px;height:18px;color:var(--orange)}
.atoz{background:#fff;border-radius:28px;padding:32px 34px 20px}
.atoz-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.atoz-top h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:32px;text-transform:uppercase}
.atoz-top h3 span{color:var(--orange)}
.search{position:relative;flex:0 1 340px}
.search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--teal)}
.search input{width:100%;font:500 17px var(--body);color:var(--ink);padding:13px 18px 13px 46px;border:2px solid var(--line);border-radius:999px;background:var(--sand);outline:0;transition:border-color .2s}
.search input:focus{border-color:var(--teal);background:#fff}
.az{columns:5 180px;column-gap:28px;max-height:440px;overflow:auto;padding-right:8px;scrollbar-width:thin}
.az-g{break-inside:avoid;margin-bottom:16px}
.az-g b{display:block;font-family:var(--display);font-style:italic;font-weight:800;font-size:26px;color:var(--orange);line-height:1;margin-bottom:4px}
.az-g a{display:block;font-size:15.5px;line-height:1.75;color:var(--ink2);text-decoration:none}
.az-g a:hover{color:var(--orange-d);text-decoration:underline}
.az-empty{display:none;padding:20px 0;color:var(--muted)}
.atoz-foot{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:36px;font-weight:700;text-decoration:none}
.more-link svg{width:18px;height:18px}

@media (max-width:1100px){.gfeat{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gfeat{grid-template-columns:1fr}.gcard{min-height:220px}.atoz{padding:24px 18px 14px}.az{columns:2;max-height:380px}.stat b{font-size:50px}.search{flex-basis:100%}}
.trip-head em{font-style:inherit;color:var(--orange)}
[hidden]{display:none!important}
.step h3,.why-card h3,.tip-body h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:30px;line-height:1.02;text-transform:uppercase;letter-spacing:.005em}
.legs{padding-left:26px}
.legs::before{left:6px}
.traveller{left:0}
.az{columns:auto}
.az-cols{columns:5 170px;column-gap:28px}
@media (max-width:560px){.az-cols{columns:2}}
.tip{border:1.5px solid var(--line)}
.footer-bottom{border-top:0;position:relative}
.footer-bottom::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid rgba(255,255,255,.15)}
@media (max-width:560px){.trip-head{flex-wrap:wrap}.trip-head strong{font-size:26px}.trip{margin-top:12px}}
