:root{
  --ground:#FCF8F0; --hero:#F3E5C6; --card:#FFFFFF; --ink:#1E3B3D; --soft:#4E6264;
  --accent:#2E6B69; --warm:#E0876A; --warm-text:#A24F33; --leaf:#BBD0C2; --shelf:#F1ECE1;
  --dark:#1E3B3D; --dark-text:#FCF8F0; --dark-soft:#C6D9D5; --dark-line:#35585A; --dark-num:#F3E5C6;
  --game:#2B5A5B; --display:"Bagel Fat One",system-ui,sans-serif; --line:2.5px solid var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito",system-ui,sans-serif;background:var(--ground);color:var(--ink);font-size:18px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.hand{font-family:'Caveat',cursive;font-weight:700}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1}
.h2{font-size:clamp(2.6rem,5.4vw,4.5rem)}
.lead{font-size:1.2rem;color:var(--soft)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:inherit;font-weight:800;font-size:1.1rem;padding:16px 28px;border-radius:999px;border:var(--line);cursor:pointer;min-height:52px;transition:transform .15s ease,box-shadow .15s ease}
.btn-dark{background:var(--ink);color:var(--ground);box-shadow:5px 5px 0 var(--accent)}
.btn-light{background:var(--card);color:var(--ink)}
.btn-sand{background:var(--hero);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px)}
.btn-dark:hover{box-shadow:7px 7px 0 var(--accent)}

/* hero + nav */
.top{background:var(--hero);border-bottom:var(--line)}
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 26px;padding-block:20px}
.logo{text-decoration:none;font-family:var(--display);font-size:2.5rem;font-weight:400;letter-spacing:0;line-height:1}
.logo span{color:var(--accent)}
.nav-links{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;font-weight:700;margin-left:auto}
.nav-links a{text-decoration:none}
.nav-links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav-cta{display:flex;align-items:center;gap:14px;font-weight:700}
.nav-cta .pill{text-decoration:none;background:var(--ink);color:var(--ground);padding:12px 22px;border-radius:999px;white-space:nowrap}
@media (max-width:1000px){
  .nav{gap:14px 12px;padding-block:16px}
  .logo{font-size:2.1rem}
  .nav-cta{order:1;margin-left:auto;gap:10px}
  .nav-links{order:2;flex-basis:100%;margin-left:0;gap:6px 20px;font-size:.95rem}
}
@media (max-width:560px){
  /* phones: only the page links; "The route" and "Slow travel" are sections further down the home page */
  .nav-links{flex-wrap:nowrap;white-space:nowrap;gap:24px;font-size:1rem}
  .nav-links a[href$="#route"],.nav-links a[href$="#eco"]{display:none}
  .nav-cta .pill{padding:9px 15px;font-size:.88rem}
  .nav-cta .lang a{min-width:0;padding:7px 10px}
}
@media (max-width:359px){.nav-cta .pill{display:none}}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:48px 88px}
.hero h1{font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:28px}
.hero h1 mark{display:inline-block;margin-top:.14em;padding:.08em .24em .12em;line-height:1;background:var(--ink);color:var(--hero);border-radius:.2em}
.hero .lead{font-size:1.4rem;max-width:560px;margin-bottom:28px;font-weight:500}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.collage{position:relative;height:620px}
.collage img{position:absolute;border:var(--line);border-radius:14px}
.collage .c1{left:0;top:70px;width:46%;transform:rotate(-9deg);box-shadow:7px 7px 0 var(--ink)}
.collage .c2{right:0;top:110px;width:46%;transform:rotate(8deg);box-shadow:7px 7px 0 var(--ink)}
.collage .c3{left:24%;top:0;width:52%;transform:rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.sticker{position:absolute;right:-6px;top:-14px;width:130px;height:130px;border-radius:50%;background:var(--warm);border:var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:1.05rem;line-height:1.05;animation:bob 3.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-8px)}}
.collage .note{position:absolute;left:-10px;bottom:6px;display:flex;align-items:center;gap:6px;font-size:1.7rem;transform:rotate(-4deg);line-height:1.1}

/* marquee */
.marquee{background:var(--dark);color:var(--dark-text);overflow:hidden;padding:16px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;font-family:var(--display);font-size:1.5rem;white-space:nowrap}
.marquee-track span{padding-right:36px}
.marquee-track b{color:var(--dark-num)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* route */
.section{padding-block:104px}
.route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.map{position:relative;width:100%;max-width:560px;aspect-ratio:1;justify-self:center}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.pin i{font-style:normal;font-family:var(--display);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--ground);font-weight:800;border:3px solid var(--ground);box-shadow:0 0 0 2.5px var(--ink)}
.pin span{background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:0 8px;font-weight:800;font-size:.85rem}
.map .hand{position:absolute;left:-8px;bottom:-40px;font-size:1.5rem;transform:rotate(-3deg);color:var(--soft)}
.route h2{margin-bottom:24px}
.route .lead{margin-bottom:24px}
.stops{list-style:none;border-top:var(--line)}
.stops li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1.5px solid var(--ink)}
.stops li:last-child{border-bottom:0;color:var(--soft)}
.stops .n{font-family:var(--display);font-size:1.7rem;color:var(--accent)}
.stops li:last-child .n{color:var(--soft)}
.stops strong{font-size:1.35rem;font-weight:900}
.stops small{font-size:1rem;color:var(--soft)}
.stops .soon{font-size:1.4rem;color:var(--warm-text)}

/* eco ladder */
.eco .head-row{margin-bottom:40px}
.ladder{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.mode{position:relative;background:var(--card);border:var(--line);border-radius:18px;padding:22px 18px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 var(--ink)}
.mode:nth-child(1){background:var(--leaf)}
.mode:nth-child(2){background:#D3E1D6}
.mode:nth-child(3){background:#E6EDE2}
.mode:nth-child(4){background:var(--hero)}
.mode h3{font-size:1.45rem;line-height:1.05}
.mode p{font-size:.98rem;color:var(--soft);line-height:1.4}
.mode svg{color:var(--accent)}
.mode .rank{position:absolute;top:-14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--ground);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.1rem}
.mode.last{background:transparent;border-style:dashed;box-shadow:none}
.mode.last h3,.mode.last svg{color:var(--soft)}
.mode.last .rank{background:var(--soft)}
.eco-note{margin-top:28px;font-size:1.6rem;color:var(--warm-text);transform:rotate(-1.5deg)}
@media (max-width:1100px){.ladder{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}}
@media (max-width:560px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* honest bit */
.dark{background:var(--dark);color:var(--dark-text)}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:48px}
.head-row p{max-width:380px}
.dark .head-row p{color:var(--dark-soft)}
.beliefs{list-style:none}
.beliefs li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:28px 0;border-top:1.5px solid var(--dark-line);align-items:baseline}
.beliefs .n{font-family:var(--display);font-size:4.2rem;line-height:.9;color:var(--dark-num)}
.beliefs h3{font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.1;margin-bottom:6px}
.beliefs p{color:var(--dark-soft);font-size:1.08rem}

/* questions */
.questions{text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.questions h2{max-width:900px;font-size:clamp(2.4rem,5vw,4rem)}
.questions .lead{max-width:620px}
.bubbles{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;max-width:1000px;margin-top:12px}
.bubbles span{background:var(--card);border:var(--line);border-radius:28px 28px 28px 6px;padding:14px 24px;font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:900}
.bubbles span:nth-child(1){transform:rotate(-3deg)}
.bubbles span:nth-child(2){background:var(--hero);border-radius:28px 28px 6px 28px;transform:rotate(2deg)}
.bubbles span:nth-child(3){transform:rotate(-1deg)}
.bubbles span:nth-child(4){background:var(--leaf);border-radius:28px 28px 6px 28px;transform:rotate(3deg)}
.bubbles span:nth-child(5){background:var(--warm);font-size:clamp(1.6rem,3.2vw,2.5rem);padding:18px 30px;transform:rotate(-2deg)}

/* reel */
.reel{background:var(--shelf);border-top:var(--line)}
.reel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:64px;align-items:center}
.reel-grid h2{margin-bottom:20px}
.reel-grid .lead{margin-bottom:28px;max-width:520px}
.reel-player{width:100%;max-width:380px;justify-self:center;border:var(--line);border-radius:22px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);background:var(--dark)}

/* shelf */
.shelf{background:var(--shelf);border-top:var(--line);border-bottom:var(--line)}
.head-row .price-line{font-size:1.15rem;font-weight:700;max-width:none}
.posters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.poster{position:relative;background:var(--card);border:var(--line);border-radius:18px;box-shadow:7px 7px 0 var(--ink);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease}
.poster:hover{transform:translate(-3px,-3px) rotate(-.6deg)}
.poster .frame{aspect-ratio:4/5;background:#EFE7D8;border-bottom:var(--line);display:flex;align-items:center;justify-content:center;padding:22px}
.poster .frame img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:3px;box-shadow:0 12px 20px -12px rgba(30,59,61,.55),0 0 0 6px #FFFFFF}
.poster .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px}
.poster .title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.poster h3{font-size:1.55rem;line-height:1.1}
.poster p{font-size:.95rem;color:var(--soft);line-height:1.4}
.poster .kind{font-size:.85rem;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.06em}
.poster .tag{flex:none;background:var(--hero);border:var(--line);border-radius:999px;padding:2px 12px;font-family:var(--display);font-weight:400;font-size:1.05rem;transform:rotate(4deg)}
.poster:nth-child(4n+2) .tag{background:var(--card)}
.poster:nth-child(4n+3) .tag{background:var(--warm)}
.poster:nth-child(4n+4) .tag{background:var(--leaf)}
.poster.soon{border-style:dashed;box-shadow:none;background:transparent;justify-content:center;align-items:center;text-align:center;padding:32px;min-height:320px}
.poster.soon h3{margin-bottom:8px}
.poster.soon p{margin-bottom:16px}

/* game */
.game{background:var(--game);color:var(--dark-text);border-bottom:var(--line)}
.game-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:center}
.game h2{font-size:clamp(3rem,6.5vw,5.25rem);margin-bottom:22px}
.game p{font-size:1.4rem;max-width:620px;font-weight:500;margin-bottom:22px}
.levels{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.levels li{border:2px solid rgba(252,248,240,.45);border-radius:999px;padding:6px 16px;font-weight:600;font-size:1rem}
.levels b{font-weight:900;color:var(--hero);margin-right:6px}
.badge{justify-self:center;position:relative;width:260px;height:300px}
.badge::before{content:"";position:absolute;inset:0;background:#FAF0E4;border:var(--line);border-radius:50%;box-shadow:9px 9px 0 var(--ink)}
.badge img{position:absolute;left:50%;top:50%;width:136px;height:auto;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.badge::after{content:"";position:absolute;left:50%;top:79%;width:110px;height:16px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(30,59,61,.18),transparent);pointer-events:none}
.badge .hand{position:absolute;left:-110px;top:18px;font-size:2.1rem;color:var(--hero);transform:rotate(-10deg);white-space:nowrap}

/* guides */
.guide-list{border-top:var(--line)}
.guide-list a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:26px 0;border-bottom:var(--line);text-decoration:none}
.guide-list strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.15}
.guide-list small{display:block;font-size:1.08rem;color:var(--soft);margin-top:2px}
.guide-list .arrow{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:var(--line);background:var(--hero);flex:none;transition:transform .2s ease}
.guide-list a:hover .arrow{transform:translateX(6px)}
.guides-more{margin-top:28px}

/* final */
.final{background:var(--hero);border-top:var(--line);text-align:center}
.final .inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:28px;align-items:center}
.final h2{font-size:clamp(2.8rem,7.4vw,6.5rem);line-height:1}
.signup{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;max-width:620px}
.signup input{flex:1 1 260px;font:inherit;font-size:1.15rem;padding:14px 22px;border:var(--line);border-radius:999px;background:var(--card);color:var(--ink);min-height:56px}
.signup .btn{box-shadow:none}
.signup-msg{min-height:1.5em;font-weight:700;color:var(--soft)}

/* footer */
footer{background:var(--dark);color:var(--dark-soft);padding-block:40px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;font-size:1rem}
footer strong{color:var(--dark-text);font-family:var(--display);font-weight:400;font-size:1.6rem}
footer nav{display:flex;flex-wrap:wrap;gap:22px;font-weight:700}
footer nav a{color:var(--dark-text)}

@media (max-width:960px){
  .hero,.route,.reel-grid,.game-grid{grid-template-columns:minmax(0,1fr)}
  .posters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collage{height:520px;max-width:520px;width:100%;justify-self:center}
  .beliefs li{grid-template-columns:90px minmax(0,1fr)}
  .beliefs .n{font-size:3.2rem}
}
@media (max-width:560px){
  body{font-size:17px}
  .posters{grid-template-columns:minmax(0,1fr)}
  .collage{height:420px}
  .collage .note,.map .hand{display:none}
  .beliefs li{grid-template-columns:minmax(0,1fr);gap:8px}
  .section{padding-block:72px}
  .badge .hand{left:-20px;top:-24px}
}
@media (prefers-reduced-motion:reduce){
  .sticker,.marquee-track{animation:none}
  html{scroll-behavior:auto}
  .btn,.poster,.guide-list .arrow{transition:none}
}

/* language switch */
.lang{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;font-weight:900;font-size:.9rem}
.lang a{text-decoration:none;padding:9px 13px;min-width:44px;text-align:center}
.lang a[aria-current="true"]{background:var(--ink);color:var(--ground)}
.lang a:not([aria-current="true"]):hover{background:rgba(30,59,61,.1);text-decoration:none}

/* longer headlines (French) */
.hero h1.h1-long{font-size:clamp(2.4rem,4.6vw,4.4rem)}

/* currency switch (English pages) */
.cur{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;font-weight:900;font-size:.9rem}
.cur button{font:inherit;border:0;background:transparent;color:var(--ink);padding:9px 12px;min-width:44px;cursor:pointer}
.cur button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.cur button:not([aria-pressed="true"]):hover{background:rgba(30,59,61,.1)}

/* round price sticker: one centred text block, two lines */
.sticker .sticker-text{display:block;padding:0 12px;line-height:1.1;font-size:1rem}

/* home map: Bordeaux is the next stop */
.pin-soon{opacity:.75}
.pin-soon i{background:var(--ground);color:var(--ink);border-style:dashed}

/* phones: the poster shelf becomes a swipeable row instead of a long column */
@media (max-width:700px){
  .posters{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-24px;padding:4px 24px 18px;scroll-padding-inline:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .posters::-webkit-scrollbar{display:none}
  .poster{flex:0 0 74%;scroll-snap-align:start;box-shadow:5px 5px 0 var(--ink)}
  .poster:hover{transform:none}
  .poster .frame{padding:16px}
}

/* hero: three room scenes instead of loose posters */
.collage.rooms{height:680px}
.collage .scene{position:absolute;width:76%;aspect-ratio:3/2;object-fit:cover;border:var(--line);border-radius:18px;box-shadow:8px 8px 0 var(--ink);background:var(--hero)}
.collage .scene.s1{left:0;top:0;transform:rotate(-2deg);z-index:1}
.collage .scene.s2{right:0;top:27%;transform:rotate(2.5deg);z-index:2}
.collage .scene.s3{left:5%;top:53%;transform:rotate(-1deg);z-index:3}
.collage.rooms .sticker{z-index:4}
.collage.rooms .note{bottom:0;z-index:4}
@media (max-width:960px){.collage.rooms{height:600px}}
@media (max-width:560px){.collage.rooms{height:440px}.collage .scene{width:82%;box-shadow:5px 5px 0 var(--ink)}}

/* hero: two room photos, each showing a different city poster */
.hero:has(.collage.photos){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.collage.photos{height:730px}
.collage picture{display:contents}
.collage .photo{position:absolute;width:70%;aspect-ratio:4/5;object-fit:cover;border:var(--line);border-radius:22px;box-shadow:9px 9px 0 var(--ink);background:var(--hero)}
.collage .photo.p1{left:0;top:0;transform:rotate(-4deg);z-index:1}
.collage .photo.p2{right:0;top:16%;transform:rotate(3deg);z-index:2}
.collage.photos .sticker{z-index:4;right:-10px;top:-18px}
.collage.photos .note{z-index:4;bottom:-6px}
@media (max-width:960px){.hero:has(.collage.photos){grid-template-columns:minmax(0,1fr)}.collage.photos{height:640px;max-width:560px;width:100%;justify-self:center}}
@media (max-width:560px){.collage.photos{height:440px}.collage .photo{width:72%;box-shadow:5px 5px 0 var(--ink);border-radius:16px}}
/* keep both city posters fully visible: less overlap between the two photos */
.collage .photo{width:62%}
.collage .photo.p2{left:38%;right:auto;top:20%}
@media (max-width:560px){.collage .photo{width:62%}}

/* prices in A$, US$ and € on the English home page */
.price-all{font-weight:900;font-size:.95rem;color:var(--ink);white-space:nowrap}
.stops .price-all{font-size:.9rem}
.sticker{width:150px;height:150px}
.sticker .sticker-text{font-size:.95rem}
.sticker small{font-size:.8rem;font-weight:800}
@media (max-width:560px){.stops li{grid-template-columns:40px minmax(0,1fr)}.stops .price-all{grid-column:2;font-size:.85rem}}