@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#071A2C;--blue:#15497A;--cyan:#71B7F0;--orange:#FFC846;--ink:#102A42;--paper:#ECEAE5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:disabled{opacity:.6;cursor:wait}:focus-visible{outline:3px solid #FFC846;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif}h2{font-size:clamp(36px,4.1vw,60px);font-weight:600;letter-spacing:-2.6px;line-height:1.14}em{font-family:Georgia,serif;font-weight:400}p{line-height:1.75}img{max-width:100%}.header{height:94px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#071A2C;color:#fff;position:relative;z-index:10;border-bottom:1px solid #ffffff18}.logo{width:210px;height:auto;display:block}.nav{display:flex;gap:34px;font-size:14px;color:#D3DDE5}.nav a:hover{color:var(--cyan)}.nav-join{border:1px solid #989384;border-radius:7px;background:transparent;color:#fff;padding:13px 23px;font-size:14px}.nav-join:hover{background:#ffffff12}.menu{display:none}.hero{background:#071A2C;color:white;position:relative;min-height:770px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;padding:72px 7% 112px;align-items:center}.hero-landscape{position:absolute;inset:0;background:linear-gradient(90deg,#071e2cf5 1%,#071e2cb8 45%,#071e2c48 100%),linear-gradient(0deg,#071A2C 0%,transparent 50%),url('assets/landscape.jpg') center 60%/cover;opacity:.85}.hero-content{position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:12px}.tiny-line{display:block;width:25px;height:1px;background:var(--orange)}h1{font-size:clamp(60px,6.9vw,100px);font-weight:600;line-height:1.035;letter-spacing:-5px;margin:26px 0}h1 em{color:var(--orange);font-size:1.13em;line-height:.85}.hero-content>p{color:#D6DEE5;font-size:17px;margin-top:32px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:30px}.button{display:inline-flex;justify-content:center;align-items:center;padding:17px 27px;border-radius:7px;font-size:15px;font-weight:700;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px)}.orange{background:var(--orange);color:#172734;box-shadow:0 8px 28px #ff883d16}.orange:hover{background:#FFD063}.text-link{background:none;color:white;display:inline-flex;gap:18px;align-items:center;padding:8px 0;font-size:14px;font-weight:600}.text-link span{font-size:22px}.early-note{font-size:12px;color:#B4C3D0;display:flex;gap:9px;align-items:center;margin-top:24px}.small-orbit{width:10px;height:10px;border:1px solid var(--cyan);border-radius:50%}.phone-scene{height:580px;position:relative;perspective:1000px;display:flex;align-items:center;justify-content:center}.phone-float{animation:float 7s ease-in-out infinite;z-index:2}.phone{width:257px;border:5px solid #25323E;border-radius:35px;overflow:hidden;transform:rotateY(-14deg) rotateX(5deg) rotateZ(6deg);box-shadow:15px 18px 0 -8px #06111C,25px 38px 60px #0009;transition:transform .35s;position:relative;background:#0A0D10}.phone img{display:block;width:100%;border-radius:28px}.phone-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff0b 42%,transparent 60%)}.orbit{position:absolute;width:490px;height:490px;border:1px solid #78d6ed25;border-radius:50%;transform:rotateX(60deg) rotateZ(-25deg)}.orbit-two{width:570px;height:570px;transform:rotateX(60deg) rotateZ(25deg);border-color:#ff883d28}.floating-tag{position:absolute;z-index:3;background:#123245ed;border:1px solid #85cce331;box-shadow:0 15px 40px #0003;border-radius:12px;backdrop-filter:blur(12px);display:flex;align-items:center;gap:12px;padding:15px 19px;font-size:14px;animation:float 8s ease-in-out infinite}.tag-one{top:155px;left:-5px;transform:rotate(-5deg)}.tag-icon{display:grid;place-items:center;background:#72d7ef20;border-radius:50%;width:38px;height:38px;color:var(--cyan)}.floating-tag small{display:block;font-size:12px;color:#B6C7D7;margin-top:3px}.tag-two{bottom:65px;right:-14px;transform:rotate(5deg);font-size:12px;animation-delay:-3s}.tag-two>span{font-size:25px;color:var(--orange)}.preview-label{position:absolute;bottom:-8px;font-size:10px;letter-spacing:2px;color:#C8C6BE}.hero-bottom{position:absolute;bottom:30px;left:7%;right:7%;display:flex;justify-content:space-between;padding-top:23px;border-top:1px solid #ffffff28;font-size:10px;letter-spacing:2px;color:#B7C8D6}.hero-bottom a{display:flex;gap:22px}.section{padding:100px 7%}.blue{color:#32638C}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px}.handwritten{font:italic 20px Georgia;color:#648290}.intro-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:100px;align-items:center}.intro-grid h2{font-size:clamp(32px,3.5vw,50px)}.muted{color:#A5A193}.intro-grid>p{max-width:420px;color:#526974;font-size:16px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:72px}.principles article{border-top:1px solid #CDD7DF;padding-top:26px;position:relative}.principle-icon{color:#22659B;display:inline-flex;align-items:center;justify-content:center;background:#E4EBF0;padding:13px;border-radius:14px}.number{position:absolute;right:0;top:36px;font-size:12px;color:#9F9B8D}.principles h3{font-size:21px;margin:24px 0 12px;letter-spacing:-.6px}.principles p{font-size:15px;color:#667C86;line-height:1.8}.escapes{background:#0B2339;color:#fff}.escape-heading{display:flex;justify-content:space-between;align-items:end}.escape-heading h2{margin-top:24px}.escape-heading h2 em{color:var(--cyan)}.escape-heading>p{color:#B5C7D5;font-size:16px;padding-bottom:8px}.mood-tabs{display:flex;gap:12px;margin:35px 0 26px;flex-wrap:wrap}.mood-tabs button{display:flex;align-items:center;gap:10px;padding:13px 20px;background:transparent;border:1px solid #475B6E;color:#CEDCE8;border-radius:30px;font-size:14px}.mood-tabs .selected{background:var(--cyan);color:#0A2A48;border-color:var(--cyan)}.destination{height:440px;border-radius:12px;overflow:hidden;position:relative}.destination>img{height:100%;width:100%;object-fit:cover;animation:fade .6s}.destination-shade{position:absolute;inset:0;background:linear-gradient(0deg,#031924e8,transparent 85%)}.destination-top{position:absolute;top:25px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px}.destination-top>span:first-child{display:flex;align-items:center;gap:8px}.destination-copy{position:absolute;bottom:36px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:end;gap:24px}.destination-copy h3{font-size:52px;letter-spacing:-2px;margin-top:16px;font-weight:500}.destination-copy p{color:#D6DFE6;font-size:15px}.destination-tags{display:flex;gap:8px}.destination-tags span{font-size:11px;padding:5px 12px;border-radius:20px;background:#ffffff20;border:1px solid #ffffff30}.white{background:#fff;color:var(--ink);flex-shrink:0}.inspiration-note{font-size:12px;color:#9CB1C3;margin-top:16px}.vibe{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;overflow:hidden}.vibe-art{min-height:420px;position:relative;border-radius:50%;background:radial-gradient(ellipse,#cdebf090,transparent 67%)}.vibe-art>.eyebrow{position:relative;z-index:2;font-size:10px;justify-content:center}.vibe-mark{position:absolute;width:210px;top:120px;left:calc(50% - 105px);filter:drop-shadow(0 25px 25px #14456322);animation:float 7s infinite ease-in-out}.vibe-tile{position:absolute;background:white;border:1px solid #DAE2E8;padding:16px 22px;box-shadow:0 14px 30px #1e516310;display:flex;gap:12px;align-items:center;border-radius:10px;font-size:14px;z-index:2}.vibe-tile svg{width:19px;color:#F7C247}.vibe-tile.one{top:67px;left:0;transform:rotate(-9deg)}.vibe-tile.two{right:0;top:200px;transform:rotate(8deg)}.vibe-tile.three{left:10px;bottom:23px;transform:rotate(-4deg)}.vibe-copy h2{margin:20px 0 24px}.vibe-copy h2 em{color:#246EAA}.vibe-copy p{color:#526D7B}.vibe-copy .vibe-small{font-size:14px;margin:16px 0;color:#979283}.dark{color:var(--ink);border-bottom:1px solid #A1B2C1}.registration{background:#071A2C;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:8%;position:relative;overflow:hidden}.registration h2{font-size:clamp(40px,4.5vw,66px);margin:25px 0}.registration h2 em{color:var(--orange)}.registration-copy>p{color:#A9BCCC}.registration-note{display:flex;align-items:center;gap:9px;color:#BED0DE;font-size:13px;margin-top:27px}.registration-note svg{color:var(--cyan)}.registration-mark{position:absolute;width:220px;bottom:-110px;opacity:.1}.registration-card{background:#ECEAE5;border-radius:16px;color:var(--ink);padding:30px}.role-tabs{display:flex;border-radius:7px;background:#E4EAEF;padding:5px;margin-bottom:30px}.role-tabs button{flex:1;background:transparent;color:#667D88;padding:12px 5px;border-radius:5px;font-size:14px}.role-tabs .active{background:white;color:var(--ink);box-shadow:0 2px 8px #09273812;font-weight:600}.registration-card h3{font-size:24px;letter-spacing:-.8px}.registration-card>p{font-size:14px;color:#718894;margin:7px 0 24px}form label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;margin-bottom:18px}input,select{width:100%;background:white;border:1px solid #CCD6DF;border-radius:6px;padding:13px 12px;color:#143149;min-width:0;font-size:14px;min-height:46px}input::placeholder{color:#A29D8F}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.consent{flex-direction:row;align-items:flex-start;font-size:12px;font-weight:400;line-height:1.6;color:#5D7582}.consent input{width:16px;height:16px;min-height:0;flex-shrink:0;margin:3px 0;accent-color:#22649A}.submit{width:100%;margin-top:4px}.privacy-note{font-size:11px!important;color:#9A9586;line-height:1.6;margin-top:12px}.honey{position:absolute;left:-10000px}.form-status{color:#B98C22;font-size:13px;margin-top:10px}.success{min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}.success>span{display:grid;place-items:center;width:65px;height:65px;background:#D8E6F1;border-radius:50%;color:#175B92}.success p{color:#637F8C}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:50px}.faq h2{margin-top:24px;font-size:44px}.questions details{border-bottom:1px solid #D0DAE2;padding:25px 0}.questions details:first-child{padding-top:0}.questions summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:16px;gap:25px}.questions summary::-webkit-details-marker{display:none}.questions summary span{font-size:24px;color:#5B7D99;font-weight:400}.questions details[open] summary span{transform:rotate(45deg)}.questions p{font-size:15px;color:#637D8A;margin-top:18px;max-width:520px}footer{background:#071A2C;padding:50px 7%;display:flex;justify-content:space-between;align-items:center;color:#C8D7E3;gap:25px}footer p{font:italic 22px/1.4 Georgia}footer>div{display:flex;flex-direction:column;gap:18px;font-size:14px}footer small{font-size:11px;color:#A09C8D}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}@keyframes fade{from{opacity:.5}to{opacity:1}}
@media(min-width:1600px){.hero,.section,footer{padding-left:max(7%,calc((100vw - 1320px)/2));padding-right:max(7%,calc((100vw - 1320px)/2))}}@media(max-width:1000px){.nav{gap:20px}.header{padding:0 5%}.logo{width:175px}.hero{padding:60px 6% 100px;min-height:740px}h1{font-size:72px}.phone{width:225px}.tag-one{left:-30px;top:145px}.tag-two{right:-25px;bottom:105px}.floating-tag{padding:11px 14px;font-size:12px}.section{padding:75px 6%}.intro-grid{gap:40px}.principles{gap:25px}.registration{gap:5%}.registration-card{padding:23px}.vibe{gap:6%}.vibe-tile{padding:13px;font-size:12px}.vibe-tile.two{right:-20px}.hero-actions{gap:20px}.hero-actions .button{padding:16px 20px}.handwritten{font-size:16px}}
@media(max-width:760px){.header{height:78px;padding:0 6%;gap:15px}.logo{width:162px}.nav{display:none}.nav.open{position:absolute;top:78px;left:0;right:0;display:flex;flex-direction:column;padding:25px;background:#0A2239;gap:24px}.nav-join{margin-left:auto;font-size:12px;padding:10px 12px}.menu{display:block;background:none;color:white;padding:4px}.menu svg{width:22px}.hero{grid-template-columns:1fr;padding:44px 7% 75px;gap:10px}.hero-content{max-width:500px}h1{font-size:clamp(59px,12vw,82px);letter-spacing:-3.6px;margin-top:23px}.hero-content>p{font-size:16px;margin-top:27px}.eyebrow{font-size:10px;letter-spacing:1.6px}.hero-actions{gap:24px}.hero-actions .button{font-size:14px}.text-link{font-size:13px}.early-note{font-size:11px}.phone-scene{height:510px;margin-top:5px;max-width:440px;width:100%;justify-self:center}.phone{width:215px}.tag-one{left:0;top:125px}.tag-two{right:0;bottom:45px}.preview-label{bottom:1px;font-size:8px}.orbit{width:370px;height:370px}.orbit-two{width:420px;height:420px}.hero-bottom{font-size:8px;letter-spacing:1px;bottom:22px;left:7%;right:7%}.section{padding:65px 7%}.section-top{margin-bottom:28px}.handwritten{display:none}.intro-grid{grid-template-columns:1fr;gap:24px}.intro-grid h2{font-size:35px;letter-spacing:-1.6px}.intro-grid>p{font-size:15px}.principles{grid-template-columns:1fr;gap:28px;margin-top:37px}.principles article{padding-left:68px;min-height:130px}.principle-icon{position:absolute;left:0;top:28px;padding:11px}.principles h3{margin:4px 25px 12px 0;font-size:20px}.principles p{font-size:14px}.number{top:32px}.escape-heading{display:block}.escape-heading>p{margin-top:24px;font-size:14px}h2{font-size:44px;letter-spacing:-1.8px}.mood-tabs{gap:8px;margin-top:24px}.mood-tabs button{font-size:11px;padding:10px 12px;gap:7px}.mood-tabs svg{width:14px}.destination{height:440px}.destination-copy{left:22px;right:22px;bottom:25px;flex-direction:column;align-items:start;gap:20px}.destination-copy h3{font-size:40px}.destination-copy p{font-size:14px}.destination-copy .button{font-size:13px;padding:13px 20px}.destination-top{left:22px;right:22px;font-size:8px;letter-spacing:1px}.inspiration-note{font-size:11px}.vibe{grid-template-columns:1fr;gap:35px}.vibe-art{min-height:350px;max-width:380px;width:100%;justify-self:center}.vibe-mark{width:170px;left:calc(50% - 85px);top:90px}.vibe-tile.two{right:0;top:180px}.vibe-tile.one{top:45px}.vibe-tile.three{bottom:10px}.vibe-copy{max-width:450px}.registration{grid-template-columns:1fr;gap:35px}.registration h2{font-size:50px}.registration-card{padding:22px}.registration-card h3{font-size:22px}.registration-card>p{font-size:13px}.registration-copy>p{font-size:15px}.registration-note{font-size:12px}.faq{grid-template-columns:1fr;gap:38px}.faq h2{font-size:38px}.questions summary{font-size:15px}.questions p{font-size:14px}footer{flex-wrap:wrap;padding:40px 7%;gap:35px}footer>p{font-size:20px}footer>div{width:100%;flex-direction:row;align-items:center;justify-content:space-between;font-size:12px}.desktop{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.phone{transform:rotateZ(4deg)!important}}
/* WanderAlong campaign redesign */
:root{--paper:#EEF2F6;--orange:#FFC848;--cyan:#8AC5F5}.header{position:absolute;top:0;left:0;right:0;background:transparent;height:100px;padding:0 5%;border-bottom:1px solid #ffffff1a}.header .logo{width:225px}.nav{font-size:14px;gap:26px}.nav-join{background:var(--orange);color:#102232;border:0;font-weight:700;padding:15px 24px}.campaign-hero{padding:160px 6% 110px;min-height:850px;height:min(940px,100svh);grid-template-columns:1.05fr 1fr;background:#06192B;isolation:isolate;overflow:hidden}.campaign-hero .hero-landscape{opacity:.48;background:linear-gradient(90deg,#061b2be8,#061b2b45),linear-gradient(0deg,#06192B 2%,transparent 80%),url('assets/landscape.jpg') center/cover;transform:scale(1.08) translateY(calc(var(--progress,0)*40px))}.hero-grain{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 60%,#197c9766,transparent 55%)}.campaign-hero .hero-content{align-self:center;z-index:4;max-width:710px;transform:translateY(calc(var(--progress,0)*-50px))}.campaign-hero h1{font-size:clamp(64px,6.8vw,104px);letter-spacing:-5px;line-height:1.02;font-weight:800;margin:32px 0}.campaign-hero h1 em{display:inline-block;font-size:1.12em;color:var(--orange);white-space:nowrap}.campaign-hero .hero-content>p{max-width:510px;font-size:18px;color:#C3D2DE}.hero-actions{margin-top:32px}.hero-secondary{font-size:15px;display:flex;align-items:center;gap:12px}.hero-secondary svg{border:1px solid #ffffff70;box-sizing:content-box;padding:10px;border-radius:50%}.button{border-radius:9px;font-size:16px;padding:20px 30px}.hero-store-line{margin-top:30px;display:flex;align-items:center;gap:9px;color:#B4C8D8;font-size:12px;flex-wrap:wrap}.hero-store-line a{color:#8AC5F5;border-bottom:1px solid #8be6f450;margin-left:24px;flex-basis:fit-content}.hero-store-line>span{display:none}.hero-store-line a{margin-left:0}.hero-collage{height:630px;position:relative;perspective:1100px;align-self:end;margin-left:-60px;transform-style:preserve-3d}.sun-disc{position:absolute;width:460px;height:460px;background:linear-gradient(145deg,#FFD77B,#F6BC36 80%);border-radius:50%;top:52px;left:calc(50% - 230px);box-shadow:0 0 100px #e0822930;transform:translateY(calc(var(--progress,0)*-75px))}.sun-disc:after{content:'';position:absolute;inset:-28px;border:1px solid #f8b06b3b;border-radius:50%}.traveller-cutout{position:absolute;bottom:-40px;left:calc(50% - 230px);height:690px;width:460px;object-fit:contain;object-position:bottom;z-index:4;filter:drop-shadow(10px 20px 28px #0007);transform:translateY(calc(var(--progress,0)*65px)) scale(calc(1 + var(--progress,0)*.1));transform-origin:bottom}.hero-coordinate{position:absolute;right:0;top:50%;writing-mode:vertical-rl;font-size:10px;letter-spacing:2px;color:#B9D0E2;z-index:5}.photo-cutout{position:absolute;width:170px;background:#ECEAE5;padding:8px 8px 12px;box-shadow:0 16px 40px #0006;z-index:3;transform-style:preserve-3d}.photo-cutout img{height:156px;width:100%;object-fit:cover;display:block}.photo-cutout span{display:block;color:#20384C;font:italic 14px Georgia;margin-top:10px;text-align:center}.photo-cutout.back{left:0;top:72px;transform:rotate(-16deg) rotateY(14deg) translateY(calc(var(--progress,0)*-110px))}.photo-cutout.front{right:-20px;top:305px;transform:rotate(13deg) rotateY(-20deg) translateY(calc(var(--progress,0)*-70px));z-index:5;width:160px}.campaign-sticker{position:absolute;right:0;top:20px;z-index:6;background:var(--cyan);color:#062A48;padding:23px 18px;width:123px;height:123px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;transform:rotate(15deg);box-shadow:4px 6px 0 #021a2866}.campaign-sticker span{font-size:10px;font-weight:800;line-height:1.3;letter-spacing:1px;text-align:center}.hero-pass{position:absolute;z-index:7;bottom:22px;left:2%;display:flex;align-items:center;gap:14px;background:#F8F7F0;color:#152F47;padding:18px 24px;box-shadow:8px 12px 0 #03121c70;transform:rotate(-6deg) translateY(calc(var(--progress,0)*-45px));border-radius:8px}.pass-icon{display:grid;place-items:center;width:43px;height:43px;border:1px solid #A7BDCF;border-radius:50%;color:#28689D}.hero-pass>div{font-weight:700;font-size:17px}.hero-pass small{display:block;font-size:8px;letter-spacing:1px;font-weight:500;margin-top:5px}.pass-punch{height:38px;width:2px;border-left:2px dashed #C3C1B8;margin-left:8px}.campaign-hero .hero-bottom{left:6%;right:6%;bottom:30px;z-index:8}.campaign-ribbon{background:var(--orange);color:#092540;overflow:hidden;padding:22px 0;transform:rotate(-1.5deg) scale(1.02);position:relative;z-index:8;margin-top:-10px;box-shadow:0 10px 25px #071e2c18}.campaign-ribbon>div{display:flex;width:max-content;animation:marquee 38s linear infinite}.campaign-ribbon span{font-family:Manrope,sans-serif;font-size:24px;letter-spacing:-.6px;font-weight:800;white-space:nowrap}.campaign-ribbon b{margin:0 30px;font-size:32px;font-weight:400;vertical-align:middle}.why{padding-top:115px;padding-bottom:95px;background:#EEF2F6}.why .intro-grid h2{font-size:clamp(38px,4vw,59px);font-weight:700;letter-spacing:-2.5px}.principles{gap:20px;margin-top:56px}.principles article{padding:32px;background:#fff;border:1px solid #D8E1E9;border-radius:18px;box-shadow:0 14px 35px #173b4905;transition:transform .4s,box-shadow .4s}.principles article:hover{transform:perspective(800px) rotateX(4deg) translateY(-9px);box-shadow:0 23px 40px #12374a15}.principles article:nth-child(2){background:#D2E4F3;transform:rotate(-2deg)}.principles article:nth-child(3){background:#FFF7E5;transform:rotate(2deg)}.principles .number{right:28px;top:38px}.principles h3{font-size:23px;line-height:1.3}.principles p{font-size:16px}.principle-icon{background:#08233C;color:#90C6F3;padding:14px}.scroll-story{height:185vh;min-height:1100px;position:relative;background:#071A2C;color:#fff;--progress:0;scroll-margin-top:0}.story-sticky{position:sticky;top:0;height:100vh;min-height:780px;max-height:1100px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:50px 6% 26px;background:radial-gradient(ellipse at 50% 65%,#19566a66,transparent 56%)}.story-heading{text-align:center;position:relative;z-index:4}.story-heading .eyebrow{justify-content:center;color:#8BBFE9;font-size:11px}.story-heading h2{font-size:clamp(38px,3.8vw,58px);margin:17px 0 12px;letter-spacing:-2px}.story-heading h2 em{color:#FFD677}.story-heading p{font-size:15px;color:#A7BFD3}.story-scene{position:relative;height:540px;width:100%;max-width:1100px;margin:0 auto;perspective:1400px;transform-style:preserve-3d;flex-shrink:0}.story-word{position:absolute;top:140px;left:50%;transform:translateX(-50%);font-family:Manrope,sans-serif;font-size:210px;font-weight:800;color:#93dcef07;letter-spacing:20px;white-space:nowrap}.story-orbit{position:absolute;width:780px;height:450px;left:calc(50% - 390px);top:65px;border:1px solid #8bdbea33;border-radius:50%;transform:rotateX(60deg) rotateZ(calc(-20deg + var(--progress)*40deg))}.story-phone{position:absolute;left:calc(50% - 112px);top:30px;z-index:4;transform:translateY(calc(30px - var(--progress)*50px)) rotateY(calc(-28deg + var(--progress)*56deg)) rotateZ(calc(-8deg + var(--progress)*16deg));transform-style:preserve-3d;will-change:transform}.story-phone .phone{width:224px;transform:none!important;border-radius:32px;border-width:4px;box-shadow:9px 10px 0 -3px #020D18,25px 35px 55px #0008}.story-card{position:absolute;width:270px;z-index:3;box-shadow:0 22px 60px #0005;transform-style:preserve-3d;will-change:transform;border:1px solid #6ec5d947;border-radius:19px}.story-left{left:calc(50% - 440px);top:110px;background:#A1CCF0;color:#122E49;padding:29px;transform:translateX(calc(60px - var(--progress)*100px)) translateY(calc(50px - var(--progress)*95px)) rotateY(calc(24deg - var(--progress)*35deg)) rotateZ(-8deg)}.story-card-icon{display:inline-flex;padding:13px;border-radius:50%;background:#092C48;color:#A1CCF0;margin-bottom:27px}.story-card .eyebrow{font-size:9px;letter-spacing:1.3px}.story-card h3{font-size:26px;line-height:1.16;letter-spacing:-1px;margin:15px 0}.story-card p{font-size:14px;color:#305472;line-height:1.7}.mini-personas{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}.mini-personas span{font-size:10px;background:#ffffff70;padding:7px 10px;border-radius:5px}.story-right{right:calc(50% - 440px);top:88px;background:#F5F4ED;color:#112E4A;overflow:hidden;transform:translateX(calc(-60px + var(--progress)*100px)) translateY(calc(-15px + var(--progress)*90px)) rotateY(calc(-24deg + var(--progress)*35deg)) rotateZ(9deg)}.story-right>img{height:180px;width:100%;object-fit:cover;display:block}.story-right>div{padding:24px}.mini-place{display:flex;align-items:center;font-size:10px;gap:5px}.story-pill{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;padding:13px 20px;border-radius:30px;color:#FFDE90;background:#182E43;border:1px solid #ffb98433;font-size:12px;z-index:6}.story-foot{max-width:1100px;margin:25px auto 0;width:100%;display:flex;justify-content:space-between;color:#A2B9CB;font-size:12px;border-top:1px solid #ffffff22;padding-top:20px}.story-foot a{color:#89C3F2}.escapes{background:#EFF3F6;color:#122E49;position:relative}.escapes .eyebrow{color:#39719F}.escape-heading h2{font-size:62px;font-weight:700}.escape-heading h2 em{color:#2167A0}.escape-heading>p{color:#607F8E}.mood-tabs button{color:#425F76;border-color:#B7C6D3;font-size:14px}.mood-tabs .selected{background:#103451;color:#fff;border-color:#103451}.destination{height:510px;border-radius:24px;box-shadow:0 24px 45px #143b491a;transform:perspective(1400px) rotateX(1deg);color:#fff}.destination-copy h3{font-size:70px;font-weight:700}.destination-top{font-size:12px}.inspiration-note{color:#657E8A}.vibe{background:#FFF2D4;position:relative;padding-top:90px;padding-bottom:90px}.vibe h2{font-size:65px;font-weight:700}.vibe-copy h2 em{color:#C29222}.vibe-art{background:radial-gradient(ellipse,#e7985670,transparent 67%)}.vibe-tile{box-shadow:10px 15px 0 #a9572510;border-color:#ECEAE5;animation:float 7s ease-in-out infinite}.vibe-tile.two{animation-delay:-3s}.vibe-tile.three{animation-delay:-1.5s}.vibe-copy .eyebrow{color:#A27F2E}.vibe-copy p{color:#7E6B41}.vibe-copy .vibe-small{color:#92725E}.download-section{background:#0C2945;color:white;position:relative;overflow:hidden;padding-top:100px;padding-bottom:110px}.download-section:before{content:'';position:absolute;width:650px;height:650px;border:1px solid #a1e5f222;border-radius:50%;top:-360px;right:-160px;pointer-events:none}.download-heading{text-align:center}.download-heading .eyebrow{justify-content:center;color:#8EC1EB}.download-heading h2{font-size:clamp(45px,5.3vw,76px);font-weight:700;margin:25px 0}.download-heading h2 em{color:var(--cyan)}.download-heading>p{color:#B2C6D6;font-size:18px}.download-grid{display:grid;grid-template-columns:1fr 1fr .85fr;gap:24px;margin-top:55px;align-items:stretch;perspective:1000px}.store-tile{padding:32px;border-radius:22px;border:1px solid #6694a755;transition:transform .45s,box-shadow .45s;box-shadow:0 20px 45px #0002;background:linear-gradient(135deg,#154368,#0B2238);display:flex;flex-direction:column;align-items:start}.store-tile:hover{transform:rotateX(5deg) rotateY(-4deg) translateY(-10px);box-shadow:0 35px 55px #0004}.play-tile{background:linear-gradient(135deg,#9FCDF3,#63A6DC);color:#112F48;border-color:#B1D8F8;transform:rotate(2deg)}.store-top{display:flex;width:100%;justify-content:space-between;align-items:center;gap:15px}.coming-badge{font-size:9px;letter-spacing:1.2px;border:1px solid #d8f5ff70;padding:7px 10px;border-radius:20px;white-space:nowrap}.play-tile .coming-badge{border-color:#12374755}.store-name{margin-top:43px}.store-name small{font-size:13px;opacity:.65}.store-name h3{font-size:34px;letter-spacing:-1.3px;margin-top:5px}.store-tile p{font-size:14px;color:#A6BFD7;margin-top:24px;margin-bottom:28px}.play-tile p{color:#375C7A}.store-tile button{width:100%;border:1px solid #ffffff50;color:#fff;background:#ffffff0c;padding:16px;border-radius:8px;font-size:14px;margin-top:auto}.store-tile button:hover{background:#ffffff20}.play-tile button{background:#0B2C4B;color:#fff;border-color:#0B2C4B}.scan-tile{background:#F3F5F7;border-radius:22px;padding:26px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#14324F;justify-content:center;border:1px solid #ffffff50}.scan-art{width:138px;height:138px;position:relative;display:grid;place-items:center;background:#E1E8EE;border-radius:13px;color:#A5A194;margin-bottom:23px}.scan-art>svg:last-child{position:absolute;opacity:.35}.scan-tile h3{font-size:22px;letter-spacing:-.6px}.scan-status{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#537897;margin-top:12px}.scan-tile p{font-size:13px;color:#6F8690;margin:14px 0 18px}.scan-tile a{font-size:13px;color:#1C5C90;border-bottom:1px solid #A8C0D4;padding-bottom:4px}.registration{grid-template-columns:.85fr 1.25fr;gap:6%;padding:115px 5%;background:#06192B;align-items:start}.registration h2{font-size:clamp(48px,5vw,72px);font-weight:700;line-height:1.12;letter-spacing:-3px;margin:30px 0}.registration-copy{position:sticky;top:50px}.registration-copy>p{font-size:18px;color:#B5C7D5}.registration-benefits{display:flex;flex-direction:column;gap:17px;margin-top:30px;color:#B8CFE2;font-size:14px}.registration-benefits span{display:flex;align-items:center;gap:12px}.registration-benefits svg{width:18px;color:#87C2F2}.registration-photo{margin-top:40px;width:85%;height:215px;border-radius:14px;overflow:hidden;transform:rotate(-4deg);border:6px solid #F0F1E9;position:relative;box-shadow:15px 20px 0 #0C2C4A}.registration-photo img{width:100%;height:100%;object-fit:cover}.registration-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#061b2bbc,transparent 60%)}.registration-photo>span{position:absolute;bottom:18px;left:20px;font-size:10px;letter-spacing:1.7px;color:white;z-index:1}.registration-mark{display:none}.registration-card{padding:45px;border-radius:24px;background:#ECEAE5;box-shadow:0 25px 80px #0005;border:1px solid #fff;position:relative;z-index:2}.form-eyebrow{display:block;color:#51799A;font-size:10px;letter-spacing:1.8px;font-weight:700;margin-bottom:25px}.role-tabs{padding:6px;gap:6px;margin-bottom:32px;border-radius:12px}.role-tabs button{display:flex;gap:12px;align-items:center;justify-content:flex-start;text-align:left;padding:18px 14px;font-size:16px;border-radius:8px}.role-tabs button>svg{flex-shrink:0}.role-tabs small{display:block;font-size:10px;font-weight:400;margin-top:5px;color:#959181}.role-tabs .active{background:#113552;color:#fff}.role-tabs .active small{color:#A4C4DF}.registration-card h3{font-size:31px;line-height:1.3;letter-spacing:-1px}.registration-card>p{font-size:16px;margin:12px 0 32px}.registration-card form label{font-size:14px;margin-bottom:23px;gap:10px}.registration-card input,.registration-card select{font-size:16px;min-height:58px;padding:17px 16px;border-radius:9px;border-color:#C4D3DF}.registration-card .form-row{gap:20px}.registration-card .consent{font-size:13px;gap:12px;margin-top:8px}.registration-card .consent input{min-height:0;width:19px;height:19px;padding:0;margin-top:2px}.registration-card .submit{font-size:17px;padding:21px;margin-top:5px}.registration-card .privacy-note{font-size:12px!important;text-align:center;margin-top:20px}.registration-card .form-status{font-size:14px}.success{min-height:440px}.faq{padding-top:95px;padding-bottom:95px}.faq h2{font-size:54px;font-weight:700}.questions details{padding:29px 0}.questions summary{font-size:18px}.questions p{font-size:16px}footer{padding-top:65px;padding-bottom:65px}footer p{font-size:29px}footer .logo{width:240px}[data-reveal]{transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1)}@supports(animation-timeline:view()){[data-reveal]{animation:reveal both;animation-timeline:view();animation-range:entry 0% entry 22%}}@keyframes reveal{from{opacity:.3;translate:0 36px}to{opacity:1;translate:0 0}}@keyframes marquee{to{transform:translateX(-25%)}}
@media(min-width:1600px){.campaign-hero,.registration{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}}
@media(max-width:1150px){.campaign-hero{min-height:780px}.campaign-hero h1{font-size:76px}.hero-collage{margin-left:-45px;height:550px}.sun-disc{width:380px;height:380px;left:calc(50% - 190px);top:75px}.traveller-cutout{height:610px;width:406px;left:calc(50% - 203px)}.photo-cutout.back{width:130px;left:-10px;top:100px}.photo-cutout img{height:120px}.photo-cutout.front{width:125px;right:-15px}.photo-cutout span{font-size:11px}.campaign-sticker{width:100px;height:100px;right:10px}.hero-pass{left:0;padding:13px 16px}.hero-pass>div{font-size:14px}.header .logo{width:190px}.nav{gap:18px;font-size:12px}.nav-join{font-size:13px}.story-left{left:calc(50% - 370px);width:240px}.story-right{right:calc(50% - 370px);width:240px}.download-grid{gap:18px;grid-template-columns:1fr 1fr .85fr}.store-tile{padding:25px}.store-name h3{font-size:29px}.coming-badge{font-size:8px;padding:6px}.registration{gap:4%;padding-left:4%;padding-right:4%}.registration-card{padding:30px}.role-tabs button{font-size:14px;padding:15px 10px;gap:8px}.role-tabs small{font-size:9px}.registration-card h3{font-size:28px}.registration h2{font-size:56px}}
@media(max-width:850px) and (min-width:761px){.nav{display:none}.hero-collage{margin-left:-80px}.campaign-hero h1{font-size:68px}.campaign-hero .hero-content>p{font-size:16px;max-width:350px}.hero-actions{gap:18px}.hero-actions .button{padding:17px;font-size:14px}.hero-secondary{font-size:12px}.photo-cutout.front{right:-30px}.campaign-sticker{right:-15px}.download-grid{grid-template-columns:1fr 1fr}.scan-tile{grid-column:1/-1;flex-direction:row;gap:25px;text-align:left;flex-wrap:wrap}.scan-art{margin:0;width:90px;height:90px}.scan-tile p{max-width:250px}.registration{grid-template-columns:1fr;gap:50px;padding:75px 8%}.registration-copy{position:relative;top:0}.registration-photo{display:none}.registration-card{padding:40px}.registration h2 br:nth-child(2){display:none}}
@media(max-width:760px){.header{height:82px;padding:0 6%;gap:12px}.header .logo{width:160px}.header .nav-join{font-size:11px;padding:12px}.nav.open{top:82px;font-size:16px;background:#071A2C}.campaign-hero{height:auto;min-height:0;padding:128px 7% 78px;grid-template-columns:1fr;gap:0}.campaign-hero .hero-content{transform:none;max-width:550px}.campaign-hero h1{font-size:clamp(53px,10.8vw,80px);letter-spacing:-3px;line-height:1.08;margin:26px 0}.campaign-hero h1 em{font-size:1.18em}.campaign-hero .hero-content>p{font-size:16px;line-height:1.8;margin-top:24px}.campaign-hero .eyebrow{font-size:9px;letter-spacing:1.4px}.hero-actions{gap:18px;margin-top:25px}.hero-actions .button{font-size:13px;padding:17px 19px}.hero-secondary{font-size:12px;gap:8px}.hero-secondary svg{width:11px;height:11px;padding:8px}.hero-store-line{font-size:11px;margin-top:21px}.hero-collage{margin:35px -15px 0;height:500px;max-width:470px;width:calc(100% + 30px);justify-self:center}.sun-disc{width:320px;height:320px;left:calc(50% - 160px);top:90px}.traveller-cutout{height:545px;width:363px;left:calc(50% - 181px);bottom:-28px}.photo-cutout.back{left:0;top:100px;width:120px}.photo-cutout.front{right:0;top:290px;width:116px}.photo-cutout img{height:115px}.photo-cutout span{font-size:10px}.campaign-sticker{right:12px;top:10px;width:94px;height:94px;padding:12px}.campaign-sticker span{font-size:8px}.campaign-sticker svg{width:19px}.hero-coordinate{display:none}.hero-pass{bottom:0;left:0;padding:12px 16px;gap:10px}.hero-pass>div{font-size:14px}.hero-pass small{font-size:7px}.pass-icon{width:33px;height:33px}.campaign-hero .hero-bottom{font-size:7px;letter-spacing:1px;left:7%;right:7%;bottom:25px}.campaign-ribbon{padding:15px 0}.campaign-ribbon span{font-size:17px}.campaign-ribbon b{font-size:23px;margin:0 18px}.why{padding-top:75px;padding-bottom:65px}.why .intro-grid h2{font-size:36px;letter-spacing:-1.7px}.principles{gap:18px;margin-top:40px}.principles article{padding:27px 25px 27px 84px;min-height:170px}.principle-icon{left:20px;top:27px;padding:11px}.principles h3{font-size:20px;margin:3px 10px 10px 0}.principles p{font-size:14px}.principles .number{font-size:10px;right:18px;top:16px}.scroll-story{height:150vh;min-height:1070px}.story-sticky{height:100svh;min-height:700px;padding:40px 0 22px;max-height:900px}.story-heading{padding:0 7%}.story-heading .eyebrow{font-size:8px;letter-spacing:1.1px;line-height:1.6}.story-heading h2{font-size:36px;letter-spacing:-1.6px;margin:18px 0 12px}.story-heading p{font-size:13px}.story-scene{height:430px;margin-top:17px}.story-phone{left:calc(50% - 88px);top:16px;transform:translateY(calc(10px - var(--progress)*16px)) rotateY(calc(-23deg + var(--progress)*46deg)) rotateZ(calc(-7deg + var(--progress)*14deg))}.story-phone .phone{width:176px;border-radius:25px;border-width:3px}.story-card{width:166px;border-radius:13px}.story-left{left:calc(50% - 235px);top:98px;padding:18px;transform:translateX(calc(26px - var(--progress)*15px)) translateY(calc(35px - var(--progress)*55px)) rotateY(15deg) rotateZ(-11deg)}.story-right{right:calc(50% - 235px);top:95px;transform:translateX(calc(-26px + var(--progress)*15px)) translateY(calc(-12px + var(--progress)*50px)) rotateY(-15deg) rotateZ(12deg)}.story-card h3{font-size:19px;letter-spacing:-.5px;margin:10px 0}.story-card .eyebrow{font-size:7px}.story-card p{font-size:11px}.story-card-icon{padding:9px;margin-bottom:14px}.story-card-icon svg{width:19px;height:19px}.mini-personas{gap:5px;margin-top:15px}.mini-personas span{font-size:8px;padding:5px 6px}.story-right>img{height:125px}.story-right>div{padding:16px}.mini-place{font-size:8px}.story-pill{font-size:10px;padding:11px 14px;bottom:3px}.story-pill svg{width:14px}.story-orbit{width:450px;left:calc(50% - 225px);height:300px}.story-word{font-size:100px;letter-spacing:5px;top:150px}.story-foot{width:86%;margin-top:17px;font-size:10px;gap:20px;line-height:1.6}.story-foot span{max-width:185px}.story-foot a{max-width:120px;text-align:right}.escape-heading h2{font-size:48px}.destination{height:470px;border-radius:18px}.destination-copy h3{font-size:46px}.destination-top{font-size:8px}.mood-tabs button{font-size:12px}.vibe{padding-top:65px;padding-bottom:65px;gap:35px}.vibe h2{font-size:50px}.vibe-art{min-height:330px}.vibe-tile{font-size:12px}.download-section{padding-top:70px;padding-bottom:70px}.download-heading h2{font-size:49px;letter-spacing:-2px;margin:22px 0}.download-heading .eyebrow{font-size:9px}.download-heading>p{font-size:15px}.download-grid{grid-template-columns:1fr;gap:23px;margin-top:36px;max-width:500px;margin-left:auto;margin-right:auto}.store-tile{padding:30px;border-radius:18px}.play-tile{transform:rotate(1.5deg)}.store-top>svg{width:32px}.coming-badge{font-size:10px;padding:8px 11px}.store-name{margin-top:28px}.store-name small{font-size:13px}.store-name h3{font-size:37px;margin-top:8px}.store-tile p{font-size:15px;margin-top:18px;margin-bottom:25px}.store-tile button{font-size:15px;padding:17px}.scan-tile{padding:30px}.scan-art{height:125px;width:125px;margin-bottom:20px}.scan-tile p{font-size:14px;max-width:250px}.scan-tile h3{font-size:25px}.scan-status{font-size:10px}.scan-tile a{font-size:14px}.registration{grid-template-columns:1fr;padding:70px 5%;gap:40px}.registration-copy{position:relative;top:0;padding:0 2%}.registration-copy .eyebrow{font-size:9px}.registration h2{font-size:52px;letter-spacing:-2.3px;margin:25px 0}.registration-copy>p{font-size:16px}.registration-benefits{font-size:13px;gap:14px;margin-top:27px}.registration-photo{display:none}.registration-card{padding:26px 22px;border-radius:20px}.form-eyebrow{font-size:8px;letter-spacing:1.4px;line-height:1.7;margin-bottom:20px}.role-tabs{gap:4px;padding:4px;margin-bottom:27px}.role-tabs button{padding:14px 8px;font-size:13px;gap:7px;align-items:center}.role-tabs button>svg{width:18px}.role-tabs small{font-size:8px;line-height:1.4;max-width:100px}.registration-card h3{font-size:27px;letter-spacing:-1px}.registration-card>p{font-size:14px;margin:12px 0 28px}.registration-card .form-row{grid-template-columns:1fr;gap:0}.registration-card form label{font-size:14px;margin-bottom:22px}.registration-card input,.registration-card select{font-size:16px;min-height:58px;padding:16px 14px}.registration-card .consent{font-size:12px;line-height:1.7;margin-bottom:20px}.registration-card .submit{font-size:16px;padding:20px}.registration-card .privacy-note{font-size:11px!important}.faq{padding-top:65px;padding-bottom:65px}.faq h2{font-size:43px}.questions summary{font-size:16px}.questions p{font-size:15px}footer{padding-top:45px;padding-bottom:45px}footer .logo{width:190px}footer p{font-size:24px}}
@media(prefers-reduced-motion:reduce){.campaign-hero .hero-content,.hero-collage *,.story-phone,.story-left,.story-right,.story-orbit{will-change:auto!important}.scroll-story{height:auto;min-height:0}.story-sticky{position:relative;height:auto;min-height:780px}.traveller-cutout{transform:none!important}.campaign-ribbon>div{animation:none!important}}
body{overflow-x:clip}
@media(min-width:761px) and (max-height:850px){.story-sticky{min-height:650px;padding-top:30px;padding-bottom:20px}.story-heading h2{font-size:42px;margin:12px 0 9px}.story-heading p{font-size:13px}.story-scene{height:425px;margin-top:8px}.story-phone{top:12px;left:calc(50% - 88px)}.story-phone .phone{width:176px;border-radius:27px}.story-left{top:55px;padding:23px;width:240px;left:calc(50% - 390px)}.story-right{top:60px;width:240px;right:calc(50% - 390px)}.story-right>img{height:135px}.story-card-icon{margin-bottom:15px}.story-card h3{font-size:24px}.story-card p{font-size:13px}.mini-personas{margin-top:17px}.story-pill{bottom:1px}.story-foot{margin-top:12px;padding-top:13px}.story-word{top:115px;font-size:160px}}
@media(max-height:680px){.scroll-story{height:auto;min-height:0}.story-sticky{position:relative;height:auto;min-height:720px}}
/* V3: sharper message, compact app access, deeper photographic sections */
html{overflow-x:clip}.brand-lockup{position:relative;display:block;width:260px;height:48px}.brand-lockup>img{display:block;width:290px;max-width:none;height:auto;clip-path:polygon(0 0,100% 0,100% 52%,29% 52%,29% 100%,0 100%)}.brand-tagline{position:absolute;left:86px;top:28px;font-size:8px;letter-spacing:1.4px;font-weight:700;color:#FFDB87;white-space:nowrap}.brand-tagline b{color:#fff;margin:0 4px}.header{background:#08111de0;backdrop-filter:blur(12px)}.campaign-hero{background:#081119;min-height:820px;padding-top:125px;padding-bottom:85px;grid-template-columns:1.1fr 1fr}.campaign-hero .hero-landscape{opacity:.3;background:linear-gradient(90deg,#080f19f5,#080f1990),linear-gradient(0deg,#081119,transparent),url('assets/landscape.jpg') center/cover}.hero-grain{background:radial-gradient(ellipse at 78% 55%,#365b7660,transparent 60%)}.campaign-hero h1{font-size:clamp(65px,6.2vw,94px);line-height:.99;margin:24px 0;letter-spacing:-4px}.campaign-hero h1 em{font-size:1.15em}.campaign-hero .hero-content>p{font-size:17px;max-width:500px;margin-top:24px;line-height:1.7}.campaign-hero .eyebrow{font-size:10px;letter-spacing:1.6px;color:#E0E7EE}.hero-reasons{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px}.hero-reasons span{display:flex;align-items:center;gap:7px;font-size:12px;color:#D5E1ED}.hero-reasons svg{color:#FFD779}.campaign-hero .hero-actions{margin-top:24px}.campaign-hero .hero-store-line{margin-top:20px}.hero-collage{height:610px}.sun-disc{background:linear-gradient(135deg,#DCB251,#F0B62E);box-shadow:0 0 90px #f8862320}.why{background:#fff;padding-top:70px;padding-bottom:65px}.section-top{margin-bottom:25px}.intro-grid{gap:65px;grid-template-columns:1.15fr 1fr}.why .intro-grid h2{font-size:48px;line-height:1.2}.principles{margin-top:36px}.principles article{padding:26px;background:#F5F8FA}.principles article:nth-child(2){background:#EDF4FB;transform:none}.principles article:nth-child(3){background:#FFF7E5;transform:none}.principles h3{font-size:22px;margin-top:20px}.principles p{font-size:15px}.scroll-story{background:#081119;height:160vh}.story-sticky{background:radial-gradient(ellipse at 50% 60%,#20394e80,transparent 60%)}.story-heading h2{font-size:46px}.story-heading p{margin-bottom:14px}.glimpse-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.glimpse-tabs button{padding:9px 15px;border:1px solid #ffffff30;border-radius:30px;background:#ffffff08;color:#B8C9D8;font-size:12px}.glimpse-tabs .active{background:#FFD063;color:#14293C;border-color:#FFD063;font-weight:700}.story-phone img{animation:fade .35s}.story-heading{z-index:7}.story-scene{height:480px}.story-phone .phone{width:200px}.story-phone{left:calc(50% - 100px)}.story-left{top:90px}.story-right{top:70px}.escapes{background:#F6F8FA;padding-top:65px;padding-bottom:65px}.escape-heading h2{font-size:52px}.destination{height:450px}.vibe{padding:65px 7%;grid-template-columns:1.1fr 1fr;gap:5%;min-height:650px;background:#111920;color:white;position:relative;isolation:isolate;overflow:hidden}.vibe-photo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1420f5 10%,#0b1420a6 65%,#0b1420b8),url('assets/manali.jpg') center/cover}.vibe-copy{max-width:600px}.vibe-copy .eyebrow{color:#FFDC8B;font-size:10px}.vibe h2{font-size:54px;margin:22px 0;letter-spacing:-2px}.vibe h2 em{color:#FFD572}.vibe-copy p{color:#C1CFDD;font-size:16px;max-width:500px}.compatibility-list{margin:27px 0;display:grid;gap:17px}.compatibility-list>div{display:flex;gap:15px;align-items:start}.compatibility-list svg{width:20px;height:20px;color:#88C1EF;margin-top:3px;flex-shrink:0}.compatibility-list span{font-size:13px;line-height:1.6;color:#B2C3D3}.compatibility-list strong{display:block;color:white;font-size:15px;margin-bottom:2px}.vibe .button{padding:16px 24px;font-size:14px}.vibe-screen-cluster{position:relative;height:510px;perspective:1000px;transform-style:preserve-3d}.vibe-screen{position:absolute;width:215px;border:4px solid #293541;border-radius:28px;overflow:hidden;background:#050A0E;box-shadow:12px 23px 45px #0008;animation:float 7s ease-in-out infinite}.vibe-screen img{display:block;width:100%}.front-screen{left:8%;top:60px;transform:rotate(-10deg) rotateY(12deg);z-index:2}.back-screen{right:0;top:5px;transform:rotate(11deg) rotateY(-13deg);animation-delay:-3s}.vibe-caption{position:absolute;bottom:0;left:5%;right:0;background:#E8F2FB;color:#20364A;box-shadow:0 12px 30px #0004;border-radius:8px;display:flex;align-items:center;gap:10px;justify-content:center;padding:14px;font-size:12px;z-index:4;transform:rotate(-3deg)}.download-section{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:8%;background:#fff;color:#102A42;padding:65px 8%;min-height:590px}.download-section:before{display:none}.download-heading{text-align:left}.download-heading .eyebrow{justify-content:flex-start;color:#476C8E;font-size:10px}.download-heading h2{font-size:51px;letter-spacing:-2px;margin:20px 0;line-height:1.15}.download-heading h2 em{color:#EBB32F}.download-heading>p{font-size:16px;color:#69808F;line-height:1.7}.compact-store-stack{display:flex;flex-direction:column;gap:12px;max-width:355px;margin-top:27px}.compact-store{width:100%;display:flex;align-items:center;gap:16px;text-align:left;background:#101B25;color:white;border:1px solid #293847;border-radius:12px;padding:17px 19px;transition:transform .25s,background .25s;box-shadow:0 7px 18px #11293b12}.compact-store:hover{transform:translateX(5px);background:#1B3043}.compact-store>img{width:29px;height:32px;object-fit:contain}.compact-store small{display:block;font-size:8px;letter-spacing:1.2px;color:#BCCAD8;margin-bottom:3px}.compact-store strong{font-family:Manrope,sans-serif;font-size:23px;font-weight:600;line-height:1.2}.store-notify{margin-left:auto;font-size:11px;color:#FFDA82;padding-left:12px;border-left:1px solid #ffffff30}.download-preview{height:465px;position:relative;perspective:1200px}.download-preview:before{content:'';position:absolute;inset:20px -10px 35px 0;background:radial-gradient(ellipse,#c9e4f180,transparent 67%);border-radius:50%}.download-phone{position:absolute;top:0;left:calc(50% - 103px);width:207px;border:4px solid #25384A;border-radius:29px;overflow:hidden;transform:rotate(10deg) rotateY(-17deg);box-shadow:14px 24px 38px #0d2b4940;animation:float 8s infinite ease-in-out}.download-phone img{width:100%;display:block}.download-note{position:absolute;left:-10px;top:115px;background:#E8F4FF;border:1px solid #C5D8EA;border-radius:12px;display:flex;align-items:center;gap:12px;padding:16px;color:#274A6A;transform:rotate(-8deg);box-shadow:0 10px 30px #193e5915}.download-note span{font-size:14px;font-weight:700}.download-note small{display:block;font-size:11px;font-weight:400;margin-top:4px}.compact-scan{position:absolute;bottom:0;left:0;right:-15px;display:flex;align-items:center;gap:18px;padding:20px 24px;border:1px solid #D9E1E8;background:#fff;box-shadow:0 15px 40px #1d3d5117;border-radius:14px;z-index:3}.compact-scan>svg{color:#8AA0B4;flex-shrink:0}.compact-scan strong{font-size:17px}.compact-scan p{font-size:12px;color:#9A9687;margin:4px 0}.compact-scan a{font-size:12px;color:#346490;text-decoration:underline;text-underline-offset:3px}.registration{background:#0A131C;padding-top:80px;padding-bottom:80px}.faq{background:#F6F8FA;padding-top:65px;padding-bottom:65px}footer{background:#081119}.nav.open{background:#081119}
@media(max-width:1100px){.brand-lockup{width:205px;height:43px}.brand-lockup>img{width:250px}.brand-tagline{left:74px;top:25px;font-size:7px;letter-spacing:1px}.nav{gap:17px}.campaign-hero h1{font-size:72px}.hero-collage{height:580px}.hero-reasons{gap:10px;font-size:11px}.hero-reasons span{font-size:10px}.vibe h2{font-size:45px}.vibe-screen{width:185px}.vibe-screen-cluster{height:460px}.download-heading h2{font-size:43px}.why .intro-grid h2{font-size:41px}.download-note{left:-20px;top:110px}.compact-scan{right:-10px;padding:18px}.vibe-caption{font-size:11px}}
@media(min-width:761px) and (max-height:850px){.story-sticky{padding-top:24px}.story-heading h2{font-size:35px;margin:9px 0}.story-heading p{font-size:12px;margin-bottom:10px}.glimpse-tabs button{font-size:11px;padding:7px 12px}.story-scene{height:385px;margin-top:8px}.story-phone{left:calc(50% - 79px);top:8px}.story-phone .phone{width:158px}.story-left{top:42px}.story-right{top:40px}.story-foot{margin-top:8px}}
@media(max-width:760px){.brand-lockup{width:155px;height:36px}.brand-lockup>img{width:189px}.brand-tagline{left:56px;top:19px;font-size:5.5px;letter-spacing:.7px}.brand-tagline b{margin:0 2px}.header{height:78px}.campaign-hero{padding-top:110px;padding-bottom:75px;min-height:0}.campaign-hero h1{font-size:66px;letter-spacing:-3px;line-height:1.01;margin:24px 0}.campaign-hero .eyebrow{font-size:8px;letter-spacing:1px;line-height:1.5}.campaign-hero .hero-content>p{font-size:15px;margin-top:20px}.hero-reasons{gap:9px 14px;margin-top:18px}.hero-reasons span{font-size:10px}.hero-reasons svg{width:13px;height:13px}.hero-collage{height:490px;margin-top:20px}.campaign-hero .hero-actions{margin-top:22px}.why{padding-top:55px;padding-bottom:50px}.why .intro-grid h2{font-size:35px;letter-spacing:-1.4px}.intro-grid{gap:20px}.principles article{padding:25px 22px 25px 77px}.principles h3{font-size:20px;margin:1px 0 10px}.principles p{font-size:14px}.principle-icon{left:18px}.scroll-story{height:145vh;min-height:1050px}.story-heading h2{font-size:33px}.story-heading p{font-size:12px}.glimpse-tabs{gap:6px}.glimpse-tabs button{font-size:10px;padding:8px 10px}.story-scene{height:410px}.story-phone{left:calc(50% - 82px)}.story-phone .phone{width:164px}.story-left{top:98px}.story-right{top:95px}.story-foot{font-size:9px}.escapes{padding-top:50px;padding-bottom:50px}.escape-heading h2{font-size:44px}.destination{height:420px}.vibe{grid-template-columns:1fr;padding:50px 7%;gap:28px}.vibe h2{font-size:42px;letter-spacing:-1.7px}.vibe-copy p{font-size:15px}.vibe-copy .eyebrow{font-size:9px;line-height:1.6}.compatibility-list{gap:15px;margin:24px 0}.compatibility-list span{font-size:12px}.compatibility-list strong{font-size:14px}.vibe-screen-cluster{height:430px;max-width:380px;width:100%;justify-self:center}.vibe-screen{width:172px;border-width:3px;border-radius:23px}.front-screen{left:6%;top:42px}.back-screen{right:2%;top:0}.vibe-caption{bottom:0;left:0;font-size:11px;padding:12px}.download-section{grid-template-columns:1fr;padding:50px 7%;gap:32px}.download-heading{text-align:left}.download-heading .eyebrow{font-size:9px}.download-heading h2{font-size:41px;letter-spacing:-1.7px;margin:18px 0}.download-heading>p{font-size:15px}.compact-store-stack{max-width:100%;margin-top:23px;gap:10px}.compact-store{padding:15px 18px;gap:15px}.compact-store strong{font-size:23px}.compact-store small{font-size:8px}.compact-store>img{width:27px;height:30px}.store-notify{font-size:11px}.download-preview{height:430px;width:100%;max-width:380px;justify-self:center}.download-phone{width:181px;left:calc(50% - 80px);border-radius:24px}.download-note{left:0;top:100px;padding:13px;gap:8px}.download-note span{font-size:12px}.download-note small{font-size:10px}.compact-scan{left:0;right:0;padding:17px;gap:15px}.compact-scan strong{font-size:16px}.compact-scan p,.compact-scan a{font-size:11px}.registration{padding-top:55px;padding-bottom:55px}.faq{padding-top:50px;padding-bottom:50px}footer .brand-lockup{width:200px;height:45px}footer .brand-lockup>img{width:240px}footer .brand-tagline{left:72px;top:24px;font-size:7px;letter-spacing:.8px}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto;min-height:0}}
@media(max-width:760px){.campaign-hero{grid-template-columns:1fr;height:auto;gap:0}.campaign-hero .hero-content{width:100%;max-width:none}.hero-collage{width:calc(100% + 30px);margin:20px -15px 0;justify-self:center}.campaign-hero h1{font-size:clamp(54px,16.3vw,66px)}}

/* ===========================================================================
   WanderAlong — enhancement layer
   Loaded after globals.css. Repairs first, then the new sections, then polish.
   Nothing here changes the brand: same navy, orange, cyan, cream and the
   Georgia italic accent. It fixes what was broken and fills what was empty.
   =========================================================================== */

:root{
  --ink-2:#2D4861;
  --line-soft:#DBE3EA;
  --orange-deep:#F4B82A;
  --navy-2:#0B243C;
  --radius-lg:22px;
  --ease:cubic-bezier(.22,.8,.3,1);
}

/* ---------------------------------------------------------------------------
   1. The preview scene
   `transform-style:preserve-3d` makes z-index inert, so the phone was painting
   over the left card's text and over the pill. Flattening the stack restores
   normal layering, and the cards get room for the words that were spilling.
   ------------------------------------------------------------------------ */
.story-scene,
.story-card,
.story-phone,
.story-phone .phone{transform-style:flat}

.story-scene{overflow:visible}

.story-card{
  width:286px;
  border-radius:20px;
  box-shadow:0 30px 70px -22px #000a;
}
.story-card h3{font-size:24px;letter-spacing:-.6px;line-height:1.18;margin:14px 0 10px}
.story-card p{font-size:13.5px;line-height:1.6}

.story-left{
  z-index:3;
  left:calc(50% - 452px);
  top:58px;
  padding:26px 24px 24px;
  transform:translateX(calc(42px - var(--progress)*74px))
            translateY(calc(40px - var(--progress)*74px))
            rotate(-7deg);
}
.story-left .story-card-icon{margin-bottom:18px;padding:11px}
.mini-personas{margin-top:18px}
.mini-personas span{background:#ffffffa8;font-size:10.5px;padding:7px 11px;border-radius:7px}

.story-right{
  z-index:3;
  right:calc(50% - 452px);
  top:52px;
  transform:translateX(calc(-42px + var(--progress)*74px))
            translateY(calc(-16px + var(--progress)*78px))
            rotate(7deg);
}
.story-right{overflow:hidden;border-radius:20px}
.story-right>img{height:168px}
.story-right>div{padding:22px 24px 24px}
.story-right h3{margin-top:12px}
.mini-place{margin-top:12px;font-size:11px;color:#436380}

.story-phone{z-index:5}
.story-phone .phone{
  box-shadow:0 40px 80px -24px #000c, 0 0 0 1px #ffffff14;
}

/* the pill sat inside the 3-D stack and was painted over by the phone */
.story-pill{
  z-index:9;
  bottom:-10px;
  padding:13px 22px;
  background:#15384aee;
  backdrop-filter:blur(10px);
  border-color:#ffb98455;
  box-shadow:0 18px 36px -14px #000a;
}

/* the sticky runway was longer than the content, which read as dead space
   on the way out of the section */
.scroll-story{height:auto;min-height:0;padding-bottom:4px}
.story-sticky{position:sticky;top:0;height:100vh;min-height:720px;max-height:980px}
.story-foot{margin-top:30px;padding-top:18px}

/* ---------------------------------------------------------------------------
   2. Hero collage: the polaroid captions were running out of their frames
   ------------------------------------------------------------------------ */
.photo-cutout{width:182px;padding:9px 9px 10px}
.photo-cutout img{height:150px}
.photo-cutout span{
  font-size:12.5px;line-height:1.3;margin-top:9px;
  white-space:normal;overflow-wrap:break-word;padding:0 2px;
}
.photo-cutout.back{left:-14px;top:58px;width:176px}
/* the right polaroid was hanging off the canvas, so its caption was cut */
.photo-cutout.front{right:10px;top:296px;width:176px}
.photo-cutout span{text-wrap:balance}

/* The collage had the same 3-D stacking problem as the preview scene: the sun
   disc and the vertical label were painting over the polaroid captions. */
.hero-collage,.photo-cutout{transform-style:flat}
.sun-disc{z-index:1}
.photo-cutout{z-index:5}
.traveller-cutout{z-index:6}
.campaign-sticker,.hero-pass{z-index:7}
.hero-coordinate{display:none}

/* ---------------------------------------------------------------------------
   3. Vibe cluster: the caption was half under the phones
   ------------------------------------------------------------------------ */
.vibe-caption{
  left:auto;right:0;bottom:-6px;width:max-content;max-width:88%;
  padding:13px 20px;border-radius:30px;font-size:12.5px;
  box-shadow:0 16px 34px -10px #0006;
}

/* ---------------------------------------------------------------------------
   4. New section — the plan
   Two bands: a launch rail, then what the first release actually contains.
   ------------------------------------------------------------------------ */
.plan{
  background:
    radial-gradient(900px 420px at 15% 0%, #15577a26, transparent 70%),
    radial-gradient(700px 380px at 92% 86%, #ff883d1f, transparent 70%),
    var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.plan:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#ffffff0e 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(#000,transparent 72%);
}
.plan>*{position:relative;z-index:2}

.plan-head{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:end}
.plan-head h2{font-size:46px;line-height:1.06;letter-spacing:-1.6px;margin:18px 0 0}
.plan-head h2 em{font-family:Georgia,serif;font-style:italic;color:var(--orange);font-weight:400}
.plan-head p{color:#A8BFD1;font-size:16px;line-height:1.7;margin:0}

.plan-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px}
.plan-step{position:relative;padding:34px 26px 30px 0}
.plan-step:before{
  content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:#ffffff1c;
}
.plan-step.now:before{background:linear-gradient(90deg,var(--orange),#ff883d22)}
.plan-step .dot{
  position:absolute;left:0;top:-6px;width:14px;height:14px;border-radius:50%;
  background:var(--navy);border:2px solid #ffffff30;
}
.plan-step.now .dot{
  border-color:var(--orange);background:var(--orange);
  box-shadow:0 0 0 6px #ff883d26;
}
.plan-when{
  display:inline-block;font-size:10.5px;letter-spacing:2px;font-weight:700;
  color:#7E9EB9;margin-bottom:12px;
}
.plan-step.now .plan-when{color:var(--orange)}
.plan-step h3{font-size:20px;letter-spacing:-.4px;margin:0 0 9px;font-weight:700}
.plan-step p{font-size:14px;line-height:1.65;color:#9DB2C6;margin:0}

.plan-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;
}
.plan-card{
  background:#ffffff09;border:1px solid #ffffff14;border-radius:var(--radius-lg);
  padding:26px 24px 24px;transition:.38s var(--ease);
}
.plan-card:hover{
  background:#ffffff0f;border-color:#72d7ef4d;transform:translateY(-4px);
  box-shadow:0 26px 50px -24px #000c;
}
.plan-card .ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:#72d7ef1f;color:var(--cyan);margin-bottom:18px;
}
.plan-card:nth-child(2) .ic{background:#ff883d1f;color:var(--orange)}
.plan-card:nth-child(4) .ic{background:#ff883d1f;color:var(--orange)}
.plan-card h4{font-size:17px;margin:0 0 8px;letter-spacing:-.3px;font-weight:700}
.plan-card p{font-size:13.5px;line-height:1.65;color:#9DB2C6;margin:0}

.plan-foot{
  margin-top:38px;padding-top:26px;border-top:1px solid #ffffff1a;
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
}
.plan-foot p{margin:0;color:#A8BFD1;font-size:14.5px;max-width:560px;line-height:1.65}
.plan-foot p b{color:#fff;font-weight:600}

/* ---------------------------------------------------------------------------
   5. FAQ — the left column was a heading and 280px of nothing
   ------------------------------------------------------------------------ */
.faq{align-items:start}
.faq-side p{
  color:var(--ink-2);font-size:15.5px;line-height:1.75;margin:20px 0 0;max-width:330px;
}
.faq-contact{
  margin-top:30px;padding:24px;border-radius:var(--radius-lg);
  background:#fff;border:1px solid var(--line-soft);
  box-shadow:0 18px 40px -28px #0b2a3c40;max-width:360px;
}
.faq-contact strong{display:block;font-size:16px;color:var(--navy);margin-bottom:6px}
.faq-contact span{display:block;font-size:14px;color:var(--ink-2);line-height:1.6}
.faq-contact a{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;
  border-bottom:1.5px solid #15577a40;padding-bottom:2px;transition:.25s var(--ease);
}
.faq-contact a:hover{border-color:var(--blue);gap:11px}

.questions details{transition:.3s var(--ease)}
.questions summary{font-size:17px;color:var(--navy);transition:.25s var(--ease)}
.questions summary:hover{color:var(--blue)}
.questions summary span{
  transition:transform .3s var(--ease);display:inline-block;flex:none;line-height:1;
}
.questions details[open] summary span{transform:rotate(45deg);color:var(--orange)}
.questions details p{
  margin:14px 0 0;font-size:15px;line-height:1.75;color:var(--ink-2);max-width:62ch;
  animation:faqIn .34s var(--ease);
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   6. Footer — three floating items became a real footer
   ------------------------------------------------------------------------ */
footer{
  display:block;padding:68px 7% 34px;
  background:
    radial-gradient(700px 300px at 80% 0%, #15577a1f, transparent 70%),
    var(--navy);
  border-top:1px solid #ffffff12;
}
.foot-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid #ffffff14;
}
.foot-brand p{
  font:italic 21px/1.45 Georgia;color:#DCE6EF;margin:20px 0 0;max-width:260px;
}
.foot-brand .foot-note{
  font:400 13.5px/1.7 'DM Sans',sans-serif;color:#869EB5;margin-top:16px;max-width:280px;
}
.foot-col h5{
  font-size:10.5px;letter-spacing:2px;color:#7E9EB9;margin:0 0 18px;font-weight:700;
}
.foot-col a{
  display:block;color:#C8D7E3;font-size:14.5px;text-decoration:none;margin-bottom:12px;
  width:fit-content;transition:.22s var(--ease);
}
.foot-col a:hover{color:var(--cyan);transform:translateX(3px)}

.foot-cta{
  background:#ffffff0a;border:1px solid #ffffff17;border-radius:var(--radius-lg);
  padding:24px;
}
.foot-cta strong{display:block;font-size:16.5px;color:#fff;margin-bottom:7px}
.foot-cta span{display:block;font-size:13.5px;color:#9DB2C6;line-height:1.6}
.foot-cta a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;width:100%;height:46px;border-radius:12px;
  background:var(--orange);color:#2C1F00;font-weight:700;font-size:14.5px;
  text-decoration:none;transition:.25s var(--ease);
}
.foot-cta a:hover{background:#FFD36D;transform:translateY(-2px)}

.foot-bottom{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  gap:20px;padding-top:26px;flex-wrap:wrap;
}
footer>.foot-top,footer>.foot-bottom{flex-direction:row}
.foot-bottom small{color:#6F89A1;font-size:13px}
.foot-legal{display:flex;gap:24px;flex-wrap:wrap}
.foot-legal a{color:#8FA8BC;font-size:13px;text-decoration:none;transition:.2s}
.foot-legal a:hover{color:var(--cyan)}

/* ---------------------------------------------------------------------------
   7. Polish across the page
   ------------------------------------------------------------------------ */

/* cards lift on hover instead of sitting flat */
.why .card,.why article{transition:.4s var(--ease)}
.why article:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px #0b2a3c59}

/* the primary button gets a little more presence */
.button.orange{
  box-shadow:0 14px 30px -14px #ff883d8c;
  transition:.28s var(--ease);
}
.button.orange:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 38px -14px #ff883da6;
  background:#FFD36D;
}
.button.white:hover{transform:translateY(-2px)}

/* The page already reveals with a scroll-driven `animation-timeline:view()`.
   Leave that alone; just make sure nothing stays invisible without it. */
@supports not (animation-timeline:view()){
  [data-reveal]{opacity:1!important;translate:none!important}
}

@media (prefers-reduced-motion:reduce){
  .plan-card:hover,.why article:hover,.button.orange:hover{transform:none}
}

/* focus states that are actually visible on both backgrounds */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;
}

/* ---------------------------------------------------------------------------
   8. Responsive
   ------------------------------------------------------------------------ */
@media (max-width:1180px){
  .plan-rail{grid-template-columns:repeat(2,1fr);gap:0 30px}
  .plan-step{padding-bottom:34px}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:900px){
  .plan-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .plan-head h2{font-size:40px}
  .story-card{width:230px}
  .story-left{left:calc(50% - 300px)}
  .story-right{right:calc(50% - 300px)}
}
@media (max-width:720px){
  .plan-rail,.plan-grid{grid-template-columns:1fr}
  .plan-head h2{font-size:34px;letter-spacing:-1.1px}
  .plan-foot{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .foot-brand p{font-size:19px}
  .vibe-caption{position:static;width:100%;max-width:none;margin-top:16px;transform:none}
  .story-pill{bottom:-4px;max-width:92%;white-space:normal;text-align:center}
}


/* ---------------------------------------------------------------------------
   9. Small screens: the overlapping collages become stacks
   ------------------------------------------------------------------------ */
@media (max-width:760px){
  /* preview scene: phone first, cards underneath, no absolute positioning */
  .story-sticky{position:relative;height:auto;min-height:0;max-height:none;padding:46px 0 30px}
  .story-scene{
    height:auto;display:flex;flex-direction:column;align-items:center;gap:18px;
    perspective:none;margin-top:26px;padding:0 20px;
  }
  .story-orbit,.story-word{display:none}
  .story-phone{position:static;transform:none!important;order:1}
  .story-phone .phone{width:214px}
  .story-pill{
    position:static;order:2;transform:none;white-space:normal;text-align:center;
    max-width:100%;justify-content:center;
  }
  .story-card{
    position:static;transform:none!important;width:100%;max-width:340px;order:3;
  }
  .story-right{order:4}
  .story-left{padding:22px}
  .story-right>img{height:150px}
  .story-foot{flex-direction:column;gap:10px;text-align:center;align-items:center;width:100%}
  .story-foot span{max-width:none}

  /* hero collage: keep the polaroids fully on screen */
  .hero-collage{overflow:visible}
  .photo-cutout{width:118px;padding:6px 6px 7px}
  .photo-cutout img{height:96px}
  .photo-cutout span{font-size:9.5px;margin-top:6px}
  .photo-cutout.back{left:2px;top:46px}
  .photo-cutout.front{right:2px;top:270px;width:118px}
  .campaign-sticker{transform:scale(.8);transform-origin:top right}

  /* vibe cluster */
  .vibe-caption{position:static;width:100%;max-width:none;margin-top:14px;transform:none}
}

@media (max-width:420px){
  .photo-cutout{width:104px}
  .photo-cutout img{height:84px}
  .photo-cutout.front{top:250px;width:104px}
}


/* ---------------------------------------------------------------------------
   10. Why we are building this
   Dark, photographic, editorial. Two picture cards carry the weight and two
   glass stat cards sit between them. Every figure links to its source.
   ------------------------------------------------------------------------ */
.reading{
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
}
.reading-wash{
  position:absolute;inset:0;background:url(assets/coorg.jpg) center/cover;
  opacity:.1;filter:blur(2px) saturate(.5);pointer-events:none;
}
.reading:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 480px at 10% -10%, #15577a3d, transparent 68%),
    radial-gradient(760px 420px at 96% 104%, #ff883d26, transparent 70%),
    linear-gradient(180deg,#071e2ccc,#071e2ce6);
}
.reading>*:not(.reading-wash){position:relative;z-index:2}

.reading-head{display:grid;grid-template-columns:1fr .82fr;gap:60px;align-items:end}
.reading-head h2{
  font-size:54px;line-height:1.04;letter-spacing:-2px;margin:18px 0 0;color:#fff;
}
.reading-head h2 em{font-family:Georgia,serif;font-style:italic;color:var(--cyan);font-weight:400}
.reading-head p{font-size:16.5px;line-height:1.75;color:#A8BFD1;margin:0}

.reading-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:54px;
}
.read-card{
  position:relative;overflow:hidden;border-radius:26px;text-decoration:none;color:#fff;
  display:flex;align-items:flex-end;min-height:330px;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.read-card.wide{grid-column:span 7}
.read-card.stat{grid-column:span 5}
.reading-grid>.read-card:nth-child(3){grid-column:span 5}
.reading-grid>.read-card:nth-child(4){grid-column:span 7}
.read-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -34px #000d}

/* picture cards */
.read-card.photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease);
}
.read-card.photo:hover img{transform:scale(1.07)}
.rc-shade{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#04131d33 0%,#04131d3d 26%,#04131dd6 68%,#04131df7 100%);
}
/* each photo is cropped to the part that carries the meaning */
.reading-grid>.read-card:nth-child(1) img{object-position:center 88%;filter:contrast(1.08) saturate(.88)}
.reading-grid>.read-card:nth-child(4) img{object-position:center bottom}
.read-card.warm .rc-shade{
  background:linear-gradient(180deg,#2a0f0047 0%,#1b0c0133 26%,#140a02d6 66%,#0b0601fa 100%);
}
.read-card.warm img{filter:saturate(1.15) contrast(1.04)}

/* glass stat cards */
.read-card.stat{
  background:linear-gradient(165deg,#ffffff12,#ffffff05);
  border:1px solid #ffffff1c;backdrop-filter:blur(6px);
}
.read-card.stat:hover{border-color:#72d7ef55}

.rc-body{display:block;padding:30px 30px 28px}
.rc-num{
  display:block;font-family:Manrope,sans-serif;font-weight:800;
  font-size:66px;line-height:.92;letter-spacing:-3px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(170deg,#fff,#BEDCF4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.read-card.warm .rc-num{background:linear-gradient(170deg,#FFEAB8,var(--orange))
  ;-webkit-background-clip:text;background-clip:text;color:transparent}
.read-card.stat .rc-num{font-size:58px}
.rc-body h3{
  font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:13px 0 11px;font-weight:700;
}
.rc-body p{font-size:14.5px;line-height:1.65;color:#C0D1DE;margin:0 0 20px;max-width:46ch}
.read-card.stat .rc-body p{color:#9DB2C6}
.rc-src{
  display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:1.3px;
  font-weight:700;color:#8FAAC0;padding:7px 12px;border-radius:30px;
  background:#ffffff0f;border:1px solid #ffffff1a;transition:.3s var(--ease);
}
.rc-src svg{flex:none;transition:transform .3s var(--ease)}
.read-card:hover .rc-src{background:#ffffff1c;color:#fff}
.read-card:hover .rc-src svg{transform:translate(2px,-2px)}
.read-card.warm:hover .rc-src{background:#ff883d2e;color:#FFE8B3;border-color:#ff883d59}

/* a small data visual so the two glass cards are not just text */
.rc-viz{display:flex;align-items:flex-end;gap:5px;margin:0 0 12px}
.rc-viz.ticks i{
  width:4px;height:16px;border-radius:2px;background:#ffffff1f;display:block;
}
.rc-viz.ticks i:nth-child(3n+1){background:#72d7ef5c;height:22px}
.rc-viz.dots{gap:7px}
.rc-viz.dots i{
  width:15px;height:15px;border-radius:50%;display:block;
  border:1.6px solid #ffffff2b;
}
.rc-viz.dots i.on{background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 4px #72d7ef1f}
.rc-cap{
  display:block;font-family:'PlexMono','DM Sans',monospace;font-size:9px;
  letter-spacing:1.8px;color:#6F8BA5;margin-bottom:18px;
}
.read-card.stat:before{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,#72d7ef1c,transparent 68%);
  pointer-events:none;
}

.rc-flip{
  position:absolute;top:22px;left:30px;z-index:3;
  font-family:'PlexMono','DM Sans',monospace;font-size:10px;letter-spacing:2.2px;
  font-weight:700;color:#0F0B00;background:var(--orange);
  padding:7px 13px;border-radius:30px;
}

.reading-note{
  margin:42px 0 0;padding-left:18px;border-left:2px solid var(--orange);
  font-size:16.5px;line-height:1.75;color:#B6C8D9;max-width:780px;
}
.reading-note b{color:#fff}

/* ---------------------------------------------------------------------------
   11. The registration panel answers the traveller / host toggle
   ------------------------------------------------------------------------ */
.registration-copy>p{color:#CAD7E4}          /* was too dim against the navy */
.registration-benefits{color:#D3E1EC}
.registration-copy h2,.registration-copy .eyebrow{transition:.3s var(--ease)}

.registration-photo{transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.registration-photo img{animation:photoIn .55s var(--ease)}
@keyframes photoIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
.registration-photo.r-host{transform:rotate(3deg);box-shadow:-15px 20px 0 #0C2C4A}
/* the host photo is a sunset silhouette, so bias the crop toward the light */
.registration-photo.r-host img{object-position:center 38%}
.registration-photo.r-host:after{background:linear-gradient(0deg,#061b2b9e,transparent 52%)}

/* the inactive half of the toggle was hard to read */
.role-tabs button:not(.active){color:#2D4861}
.role-tabs button:not(.active) small{color:#5B778E}
.role-tabs button{transition:.28s var(--ease)}

/* "Notify me" should read as the control it is */
.store-notify{
  color:var(--orange);font-weight:700;transition:.25s var(--ease);
}
.compact-store:hover .store-notify{color:#FFD87E;text-decoration:underline}
.compact-store{transition:.28s var(--ease)}
.compact-store:hover{transform:translateY(-2px)}

@media (max-width:1180px){
  .reading-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .reading-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .reading-head h2{font-size:40px}
  .plan-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .reading-grid{grid-template-columns:1fr}
  .reading-head h2{font-size:34px;letter-spacing:-1.1px}
  .reading-note{font-size:15px}
}


/* ---------------------------------------------------------------------------
   13. A darker canvas
   The dark bands were #071A2C, a navy. They are now near-black with a navy
   cast, which makes the orange and the photography carry much further.
   ------------------------------------------------------------------------ */
:root{
  --navy:#03090E;          /* was #071A2C */
  --ink-black:#02060A;
  --panel:#0A131B;
  --panel-2:#0E1822;
}
.scroll-story{background:var(--ink-black)}
.reading{background:var(--navy)}
footer{background:
  radial-gradient(700px 300px at 80% 0%, #15577a1a, transparent 70%),
  var(--ink-black)}
.plan{background:
  radial-gradient(900px 420px at 15% 0%, #15577a1f, transparent 70%),
  radial-gradient(700px 380px at 92% 86%, #ff883d17, transparent 70%),
  var(--navy)}
.reading:after{
  background:
    radial-gradient(900px 480px at 10% -10%, #15577a33, transparent 68%),
    radial-gradient(760px 420px at 96% 104%, #ff883d1f, transparent 70%),
    linear-gradient(180deg,#03090ed6,#03090eed);
}
.read-card.stat{background:linear-gradient(165deg,#ffffff0f,#ffffff04)}
.story-sticky{background:radial-gradient(ellipse at 50% 62%,#12455733,transparent 58%)}

/* ---------------------------------------------------------------------------
   15. Make the parallax cheap enough to stay smooth
   ------------------------------------------------------------------------ */
.traveller-cutout,.sun-disc,.photo-cutout,.hero-landscape,.campaign-sticker,.hero-pass{
  will-change:transform;backface-visibility:hidden;
}
/* a drop-shadow re-rasterises on every scale step, so the zoom is reduced and
   the layer is promoted once rather than re-filtered each frame */
.traveller-cutout{
  transform:translateY(calc(var(--progress,0)*55px)) scale(calc(1 + var(--progress,0)*.045));
  filter:drop-shadow(8px 16px 22px #00000080);
}

@media (prefers-reduced-motion:reduce){
  .deck-slide{transition:none}
  .traveller-cutout,.sun-disc,.photo-cutout,.hero-landscape{will-change:auto}
}

@media (max-width:980px){
  .deck{gap:14px}
  .deck-stage{width:420px;height:400px}
  .deck-slide.is-next{transform:translateX(112px) scale(.8) rotateY(-16deg)}
  .deck-slide.is-prev{transform:translateX(-112px) scale(.8) rotateY(16deg)}
}
@media (max-width:720px){
  .deck{gap:6px;margin-top:26px}
  .deck-arrow{width:46px;height:46px}
  .deck-arrow svg{width:19px;height:19px}
  .deck-stage{width:min(260px,58vw);height:370px}
  .deck-phone{width:186px;height:352px;border-radius:28px;border-width:3px}
  .deck-slide.is-next,.deck-slide.is-prev{opacity:0;transform:scale(.8)}
  .deck-caption{margin-top:24px;padding:0 18px}
  .deck-caption h3{font-size:21px}
  .story-heading p{font-size:14.5px}
}


/* ---------------------------------------------------------------------------
   16. One section: the three ways, and the app showing each of them
   The principles and the app preview were telling the same story twice. They
   are now a single tablist: choose a way to travel on the left, the phone and
   the backdrop answer on the right.
   ------------------------------------------------------------------------ */
.ways{
  position:relative;overflow:hidden;background:var(--ink-black);color:#fff;
  padding:clamp(70px,8vw,116px) 7% clamp(56px,6vw,84px);
}
.anchor-peek{position:absolute;top:-100px}

.ways-bg{position:absolute;inset:0;z-index:0}
.ways-bgi{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity 1.1s var(--ease),transform 1.6s var(--ease);
}
.ways-bgi.on{opacity:.62;transform:scale(1)}
.ways-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(880px 540px at 76% 46%, #02060a0a, #02060a7a 50%, #02060ad6 84%),
    linear-gradient(100deg,#02060af7 0%,#02060ae6 32%,#02060a73 66%,#02060aad 100%);
}
.ways-inner{position:relative;z-index:2}

.ways-head{display:grid;grid-template-columns:1fr .78fr;gap:60px;align-items:end}
.ways-head h2{
  font-size:clamp(34px,4.4vw,56px);line-height:1.03;letter-spacing:-2px;margin:18px 0 0;
}
.ways-head h2 em{font-family:Georgia,serif;font-style:italic;color:var(--orange);font-weight:400}
.ways-head p{font-size:16.5px;line-height:1.75;color:#9DB0C2;margin:0}

.ways-body{
  display:grid;grid-template-columns:1fr 430px;gap:clamp(40px,6vw,88px);
  align-items:center;margin-top:clamp(34px,4vw,52px);
}

/* the list */
.ways-list{display:flex;flex-direction:column;gap:4px}
.way{
  display:flex;gap:20px;text-align:left;background:none;border:0;cursor:pointer;
  padding:20px 0;color:inherit;font-family:inherit;position:relative;
  border-top:1px solid #ffffff14;
}
.way:last-child{border-bottom:1px solid #ffffff14}
.way-rail{
  width:2px;flex:none;align-self:stretch;background:#ffffff1a;border-radius:2px;
  position:relative;overflow:hidden;
}
.way-rail i{
  position:absolute;left:0;right:0;top:0;height:0;background:var(--orange);
  border-radius:2px;
}
.way.on .way-rail{background:#ffffff26}
.way.on .way-rail i{height:100%;animation:wayFill linear forwards}
@keyframes wayFill{from{height:0}to{height:100%}}
.way-main{flex:1;min-width:0}
.way-top{display:flex;align-items:center;gap:14px}
.way-n{
  font-family:'PlexMono','DM Sans',monospace;font-size:11px;letter-spacing:1.6px;
  color:#55708A;transition:.3s var(--ease);
}
.way-ic{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:#ffffff0d;border:1px solid #ffffff1a;color:#8EACC5;transition:.35s var(--ease);
}
.way-t{
  font-size:clamp(19px,2.1vw,25px);font-weight:700;letter-spacing:-.5px;
  color:#A9A597;transition:.35s var(--ease);
}
.way:hover .way-t{color:#CFDAE5}
.way.on .way-n{color:var(--orange)}
.way.on .way-ic{background:var(--orange);border-color:var(--orange);color:#2C1F00;
  box-shadow:0 10px 26px -10px #ff883d9e}
.way.on .way-t{color:#fff}

.way-more{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease);
}
.way.on .way-more{grid-template-rows:1fr;opacity:1}
.way-inner{overflow:hidden;min-height:0}
.way-p{
  display:block;font-size:14.5px;line-height:1.7;color:#A5B7C8;
  padding-top:12px;max-width:50ch;margin:0;
}
.way-tag{
  display:inline-flex;width:fit-content;margin-top:14px;
  font-family:'PlexMono','DM Sans',monospace;
  font-size:9.5px;letter-spacing:1.8px;font-weight:700;color:var(--orange);
  background:#ff883d1f;border:1px solid #ff883d3d;padding:7px 12px;border-radius:30px;
}

/* the phone */
.ways-stage{position:relative;height:534px;display:grid;place-items:center}
.ways-glow{
  position:absolute;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,#ff883d26,transparent 66%);filter:blur(16px);
}
.ways-screen{
  position:absolute;width:234px;height:444px;border-radius:36px;overflow:hidden;
  margin-bottom:46px;
  border:5px solid #16212B;background:#000;
  box-shadow:0 50px 90px -30px #000, 0 0 0 1px #ffffff17;
  transition:transform .66s var(--ease),opacity .55s var(--ease);
  will-change:transform,opacity;
}
.ways-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ways-screen.on{transform:translateX(0) scale(1) rotate(0);opacity:1;z-index:3}
.ways-screen.future{transform:translateX(64px) scale(.9) rotate(5deg);opacity:0;z-index:1}
.ways-screen.past{transform:translateX(-64px) scale(.9) rotate(-5deg);opacity:0;z-index:1}

.ways-nav{
  position:absolute;bottom:2px;display:flex;align-items:center;gap:16px;z-index:5;
}
.ways-nav button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#0c1920cc;border:1px solid #ffffff1f;color:#D6E2ED;backdrop-filter:blur(8px);
  transition:.28s var(--ease);
}
.ways-nav button:hover{background:var(--orange);border-color:var(--orange);color:#2C1F00}
.ways-step{
  font-family:'PlexMono','DM Sans',monospace;font-size:12px;letter-spacing:1.6px;
  color:#fff;font-weight:700;min-width:62px;text-align:center;
}
.ways-step i{font-style:normal;color:#5D7A8B}

.ways-foot{
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,62px);padding-top:22px;border-top:1px solid #ffffff14;
  font-size:13px;color:#7E95AB;
}
.ways-foot a{color:var(--orange);text-decoration:none;font-weight:600}
.ways-foot a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .way.on .way-rail i{animation:none;height:100%}
  .ways-bgi,.ways-screen{transition:none}
}

@media (max-width:1100px){
  .ways-body{grid-template-columns:1fr 340px;gap:44px}
  .ways-stage{height:492px}
  .ways-screen{width:208px;height:396px;border-radius:32px}
  .ways-glow{width:340px;height:340px}
}
@media (max-width:860px){
  .ways-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .ways-body{grid-template-columns:1fr;gap:38px}
  .ways-stage{height:470px;order:-1}
  .ways-foot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:560px){
  .ways{padding-left:22px;padding-right:22px}
  .ways-stage{height:436px}
  .ways-screen{width:192px;height:364px;border-radius:28px;border-width:4px}
  .ways-glow{width:280px;height:280px}
  .way{gap:14px;padding:17px 0}
  .way-ic{width:34px;height:34px;border-radius:10px}
  .way-p{font-size:13.5px}
}

/* ---------------------------------------------------------------------------
   17. A warm canvas
   The light sections were #ECEAE5, a cool grey-blue. They are cream now, which
   sits far better against the orange and the near-black bands.
   ------------------------------------------------------------------------ */
:root{
  --paper:#F9F5EC;        /* was #ECEAE5 */
  --paper-2:#FAF5EA;      /* raised surfaces on cream */
  --paper-line:#E8E1D2;
}
body{background:var(--paper)}
.why,.reading.light,.faq,.download-section{background:var(--paper)}
.registration-card{background:var(--paper-2)!important;border-color:#fff}

/* cards that used to sit as white-on-cool-grey get the warm pairing */
.faq-contact{background:var(--paper-2);border-color:var(--paper-line)}
.questions details{border-bottom-color:var(--paper-line)}
.principles article{background:var(--paper-2);border-color:var(--paper-line)}
.read-tile{background:var(--paper-2);border-color:var(--paper-line)}
.intro-grid .muted{color:#B1AEA2}

/* form fields read as warm paper, not cold white */
.registration-card input,
.registration-card select,
.registration-card textarea{
  background:#fff;border-color:var(--paper-line);
}
.registration-card input::placeholder{color:#9AA79C}
.role-tabs{background:#F5F0E4}
.role-tabs button:not(.active){color:#2D4861}

.inspiration-note,.privacy-note{color:#8A8172}
.section-top{border-color:var(--paper-line)}

/* ---------------------------------------------------------------------------
   18. The hero asks the one question that routes everything
   Traveller or host, decided before anyone scrolls, and both land on the form
   with the right side already selected.
   ------------------------------------------------------------------------ */
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.big-cta{
  display:flex;align-items:center;gap:15px;cursor:pointer;
  padding:17px 24px 17px 19px;border-radius:18px;font-family:inherit;text-align:left;
  transition:.3s var(--ease);border:1.5px solid transparent;min-width:252px;
}
.big-cta .bc-ic{
  width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  transition:.3s var(--ease);
}
.big-cta .bc-tx{flex:1;min-width:0}
.big-cta .bc-tx b{display:block;font-size:19px;font-weight:700;letter-spacing:-.3px}
.big-cta .bc-tx small{
  display:block;font-family:'PlexMono','DM Sans',monospace;font-size:9.5px;
  letter-spacing:1.7px;font-weight:700;margin-top:4px;opacity:.72;
}
.big-cta .bc-go{flex:none;display:grid;place-items:center;transition:.3s var(--ease)}

.big-cta.traveller{
  background:linear-gradient(180deg,#FFD062,var(--orange));color:#2C1F00;
  box-shadow:0 18px 38px -16px #ff883da8;
}
.big-cta.traveller .bc-ic{background:#2b140024;color:#2C1F00}
.big-cta.traveller:hover{
  transform:translateY(-3px);box-shadow:0 26px 48px -16px #ff883dc4;
  background:linear-gradient(180deg,#FFD87C,#FFC94A);
}
.big-cta.traveller:hover .bc-go{transform:translate(3px,-3px)}

.big-cta.host{
  background:#ffffff0f;border-color:#ffffff2e;color:#EAF1F8;backdrop-filter:blur(8px);
}
.big-cta.host .bc-ic{background:#ffffff14;color:var(--cyan)}
.big-cta.host:hover{
  background:#ffffff1a;border-color:var(--cyan);transform:translateY(-3px);
}
.big-cta.host:hover .bc-ic{background:#72d7ef26}
.big-cta.host:hover .bc-go{transform:translate(3px,-3px)}

.hero-secondary{margin-top:18px;display:inline-flex}

@media (max-width:1240px){
  .big-cta{min-width:0;flex:1 1 220px;padding:15px 20px 15px 16px}
  .big-cta .bc-tx b{font-size:17.5px}
}
@media (max-width:520px){
  /* in a column the inherited flex-grow was stretching the buttons vertically */
  .hero-actions{flex-direction:column;gap:11px;align-items:stretch}
  .big-cta{width:100%;flex:0 0 auto}
}

/* ===========================================================================
   19. THE BRAND THEME
   Pulled from the logo and the app board rather than invented: the mark is sky
   blue, amber and lime; the board is near-black on bone. The hue remap above
   carried the old tonal relationships across; these are the anchor values.
   =========================================================================== */
:root{
  /* light ground */
  --bone:#E9E7E0;
  --bone-2:#F3F1EB;
  --bone-3:#FAF9F5;
  --bone-line:#D6D3C9;
  --paper:#E9E7E0;
  --ink:#13171A;
  --ink-2:#5E645F;
  --olive:#5C6E59;

  /* dark ground */
  --black:#080B0D;
  --ink-black:#080B0D;
  --navy:#0E1113;
  --surface:#121719;
  --card-blue:#1D3447;
  --card-green:#23342F;

  /* brand */
  --amber:#FEC43C;
  --amber-hi:#FFD66E;
  --amber-deep:#E0A41C;
  --orange:#FEC43C;          /* every old --orange reference lands on amber */
  --sky:#309CFE;
  --sky-soft:#5CBDFF;
  --cyan:#5CBDFF;
  --blue:#1D6FB8;
  --lime:#99CC6F;
}

/* amber is a dark-ground colour; on bone it needs the deep tone to stay legible */
.faq-contact a,.ways-foot a,.foot-legal a:hover{color:var(--blue)}
.read-tile .read-n{color:var(--amber-deep)}
.eyebrow.blue{color:var(--olive)}
.inspiration-note,.privacy-note{color:#8A8778}

/* buttons: amber fill, near-black label */
.button.orange,.big-cta.traveller,.foot-cta a,.l-btn{
  background:linear-gradient(180deg,var(--amber-hi),var(--amber));
  color:#20170A;
}
.button.orange:hover,.big-cta.traveller:hover,.foot-cta a:hover{
  background:linear-gradient(180deg,#FFE08F,var(--amber-hi));
}
.button.orange{box-shadow:0 14px 30px -14px #fec43c7a}
.button.orange:hover{box-shadow:0 20px 38px -14px #fec43c9e}
.big-cta.traveller{box-shadow:0 18px 38px -16px #fec43c8f}
.big-cta.traveller:hover{box-shadow:0 26px 48px -16px #fec43cb0}
.big-cta.traveller .bc-ic{background:#20170a26;color:#20170A}
.big-cta.host .bc-ic{color:var(--sky-soft)}
.big-cta.host:hover{border-color:var(--sky-soft)}
.big-cta.host:hover .bc-ic{background:#309cfe2b}

/* the hero ribbon and the hairline under it */
.campaign-ribbon{background:var(--amber)}
.campaign-ribbon div span{color:#20170A}

/* the ways selector */
.way.on .way-ic{background:var(--amber);color:#20170A;
  box-shadow:0 10px 26px -10px #fec43c9e}
.way.on .way-rail i{background:var(--amber)}
.way.on .way-n,.ways-step,.deck-step{color:var(--amber)}
.way-tag{color:var(--amber);background:#fec43c1f;border-color:#fec43c42}
.ways-nav button:hover{background:var(--amber);border-color:var(--amber);color:#20170A}
.ways-head h2 em{color:var(--amber)}
.ways-glow{background:radial-gradient(circle,#fec43c24,transparent 66%)}

/* research cards */
.rc-flip{background:var(--amber);color:#20170A}
.read-card.warm .rc-num{background:linear-gradient(170deg,#FFE4AE,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.read-card.warm:hover .rc-src{background:#fec43c2e;color:#FFE1A8;border-color:#fec43c5c}
.rc-viz.dots i.on{background:var(--sky-soft);border-color:var(--sky-soft);
  box-shadow:0 0 0 4px #5cbdff1f}
.rc-viz.ticks i:nth-child(3n+1){background:#5cbdff5c}
.reading-head h2 em{color:var(--sky-soft)}
.reading-note{border-left-color:var(--amber)}

/* plan + registration + footer accents */
.plan-head h2 em,.download-heading h2 em,.registration-copy h2 em,
.hero h1 em,.vibe-copy h2 em,footer p em{color:var(--amber)}
.plan-step.now .dot{border-color:var(--amber);background:var(--amber);
  box-shadow:0 0 0 6px #fec43c26}
.plan-step.now .plan-when{color:var(--amber)}
.plan-step.now:before{background:linear-gradient(90deg,var(--amber),#fec43c22)}
.plan-card .ic{background:#5cbdff1f;color:var(--sky-soft)}
.plan-card:nth-child(2) .ic,.plan-card:nth-child(4) .ic{
  background:#fec43c1f;color:var(--amber)}
.plan-card:hover{border-color:#5cbdff4d}
.questions details[open] summary span{color:var(--amber-deep)}
.registration-benefits svg{color:var(--lime)}
.store-notify{color:var(--amber)}
.compact-store:hover .store-notify{color:var(--amber-hi)}
.hero-secondary{color:#CFE4F2}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{outline-color:var(--amber)}

/* lime earns its place on the things that mean "good to go" */
.hero-reasons svg,.registration-benefits svg{color:var(--lime)}
.f-mine.get,.p-tag{color:inherit}

/* ---------------------------------------------------------------------------
   20. The hero leads with a group, in an arch, not a couple on a disc
   The cutout was two people, which undersold the whole premise. This is the
   group shot. It sits in a portrait arch rather than a circle so the people
   along the bottom edge stay whole, and the sun behind it became a soft halo
   so it stops eating the polaroid captions.
   ------------------------------------------------------------------------ */
.hero-group .sun-disc{
  width:620px;height:620px;left:calc(50% - 310px);top:-10px;
  background:radial-gradient(circle at 50% 44%,
    #FFD66E8a 0%, #FEC43C52 30%, #E89F2A24 52%, transparent 70%);
  box-shadow:none;filter:blur(2px);z-index:1;
}
.hero-group-photo{
  position:absolute;left:calc(50% - 204px);top:30px;width:408px;height:524px;
  border-radius:204px 204px 30px 30px;overflow:hidden;z-index:4;
  border:7px solid #0E1113;
  box-shadow:0 48px 96px -30px #000000e0, 0 0 0 1px #ffffff14;
  transform:translateY(calc(var(--progress,0)*38px)) scale(calc(1 + var(--progress,0)*.035));
  will-change:transform;backface-visibility:hidden;
}
.hero-group-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;
}
.hero-group-photo::after{            /* keeps the caption-free bottom readable */
  content:"";position:absolute;inset:auto 0 0;height:20%;
  background:linear-gradient(0deg,#060a0c42,transparent);pointer-events:none;
}
.hgp-ring{
  position:absolute;left:calc(50% - 223px);top:11px;width:446px;height:562px;
  border-radius:223px 223px 48px 48px;z-index:3;pointer-events:none;
  border:1.5px solid #fec43cb3;box-shadow:0 0 50px -8px #fec43c40;
  transform:translateY(calc(var(--progress,0)*30px));
}
.hgp-ring::before{
  content:"";position:absolute;inset:-21px;border-radius:245px 245px 70px 70px;
  border:1px solid #fec43c3d;
}
.hero-group .campaign-sticker{z-index:9}
.hero-group .hero-pass{z-index:9;bottom:2px;left:-6px}
.hero-group .hero-coordinate{z-index:9}
.hero-group .photo-cutout.back{top:92px;left:-40px;z-index:7}
.hero-group .photo-cutout.front{top:368px;right:-26px;z-index:7}

@media (max-width:1240px){
  .hero-group-photo{width:348px;height:470px;left:calc(50% - 174px);top:44px;
    border-radius:174px 174px 26px 26px}
  .hgp-ring{left:calc(50% - 189px);top:29px;width:378px;height:500px;
    border-radius:189px 189px 41px 41px}
  .hgp-ring::before{inset:-18px;border-radius:208px 208px 59px 59px}
  .hero-group .sun-disc{width:520px;height:520px;left:calc(50% - 260px);top:0}
  .hero-group .photo-cutout.back{top:80px;left:-26px}
  .hero-group .photo-cutout.front{top:320px;right:-16px}
}
@media (max-width:760px){
  .hero-group-photo{width:252px;height:338px;left:calc(50% - 126px);top:52px;
    border-width:5px;border-radius:126px 126px 20px 20px}
  .hgp-ring{left:calc(50% - 137px);top:41px;width:274px;height:360px;
    border-radius:137px 137px 31px 31px}
  .hgp-ring::before{display:none}
  .hero-group .sun-disc{width:380px;height:380px;left:calc(50% - 190px);top:14px}
  .hero-group .photo-cutout.back{top:66px;left:-6px}
  .hero-group .photo-cutout.front{top:258px;right:-6px}
}

/* ---------------------------------------------------------------------------
   21. Theme clean-up after the hue remap
   Amber at full strength is unreadable on bone, photographs that came through
   the remap flat needed their contrast back, and the "good to go" marks were
   left reading as structure blue instead of sage.
   ------------------------------------------------------------------------ */
/* amber italics on a bone ground drop to the deep tone */
.download-section h2 em,
.plan h2 em,
.questions h2 em{color:var(--amber-deep)}

/* completion marks are sage, structure stays blue */
.plan-card:nth-child(3) .ic{background:#99cc6f1f;color:var(--lime)}
.plan-card:nth-child(3) .ic svg{stroke:var(--lime)}

/* photographs that flattened out in the remap */
.read-card.photo img{filter:contrast(1.1) saturate(1.08)}
.registration-photo img{filter:contrast(1.14) saturate(1.2) brightness(1.06)}
.registration-photo:not(.r-host) img{object-position:center 92%}
.registration-photo:after{background:linear-gradient(0deg,#060a0cd1,transparent 58%)}
.registration-photo{border-color:var(--bone-3);box-shadow:15px 20px 0 var(--card-blue)}
.registration-photo.r-host{box-shadow:-15px 20px 0 var(--card-blue)}

/* the ways section had lost its photograph to the darkening pass */
.ways-bgi.on{opacity:.74}
.ways-veil{
  background:
    radial-gradient(900px 560px at 74% 44%, #02060a00, #02060a5c 48%, #02060ac4 84%),
    linear-gradient(100deg,#02060af2 0%,#02060ad9 30%,#02060a4d 62%,#02060a99 100%);
}

/* bone sections: body copy wants the warm ink, not the cool one */
.download-section p,.questions .q-side p{color:#4C5450}

/* ---------------------------------------------------------------------------
   22. The hero stacks earlier
   Between 761 and 1040 the two-column hero put the collage on top of the body
   copy. It now stacks the way it already did on a phone, with a wider frame.
   ------------------------------------------------------------------------ */
@media (max-width:1040px) and (min-width:761px){
  .campaign-hero{
    grid-template-columns:1fr;height:auto;min-height:0;
    padding:130px 7% 86px;row-gap:12px;
  }
  .campaign-hero .hero-content{max-width:none}
  .hero-collage{
    margin:28px auto 0;height:560px;max-width:540px;width:100%;
    justify-self:center;align-self:start;
  }
  .hero-group-photo{width:392px;height:520px;left:calc(50% - 196px);top:30px;
    border-radius:196px 196px 28px 28px}
  .hgp-ring{left:calc(50% - 213px);top:13px;width:426px;height:554px;
    border-radius:213px 213px 45px 45px}
  .hero-group .sun-disc{width:560px;height:560px;left:calc(50% - 280px);top:-8px}
  .hero-group .photo-cutout.back{top:78px;left:-16px;width:196px}
  .hero-group .photo-cutout.front{top:342px;right:-22px;width:196px}
  .hero-group .hero-pass{left:-16px;bottom:10px}
  .hero-group .campaign-sticker{top:0}
}

/* ---------------------------------------------------------------------------
   23. The supplied logo, and the colours taken straight off it
   The header was still on the old archive logo. The new lockup was cut off its
   indigo ground and its own colours sampled, so the page accents and the logo
   are now the same values rather than near-misses.

     mark blue   #3599F6   wordmark blue #60BAFA
     mark green  #9BCD75   sun / "Along" #F7C649
   ------------------------------------------------------------------------ */
:root{
  --amber:#F7C649; --amber-hi:#FFD873; --amber-deep:#D9A526; --orange:#F7C649;
  --sky:#3599F6; --sky-soft:#60BAFA; --cyan:#60BAFA; --blue:#1F6FC4;
  --lime:#9BCD75;
}
.brand-logo{display:block;width:248px;height:auto;max-width:none}
.header a:has(>.brand-logo){display:flex;align-items:center}
footer .brand-logo{width:214px}
@media (max-width:1100px){.brand-logo{width:208px}}
@media (max-width:760px){.brand-logo{width:150px}footer .brand-logo{width:184px}}
@media (max-width:420px){.brand-logo{width:132px}}

/* ---------------------------------------------------------------------------
   24. The hero scales with the viewport instead of overrunning it
   .campaign-hero is height:min(940px,100svh) but the collage inside it was a
   fixed 630px. On any laptop shorter than about 900px the collage ran past
   the bottom and the boarding pass sat on top of the "stop waiting for the
   group chat" rule. The collage is now fluid, and everything in it is sized
   as a share of that height, so the whole arrangement shrinks together.
   ------------------------------------------------------------------------ */
@media (min-width:1041px){
  .campaign-hero{padding-bottom:clamp(96px,11svh,124px)}
  .hero-collage{height:clamp(420px, calc(100svh - 342px), 604px);margin-bottom:26px}

  .hero-group-photo{
    left:auto;top:4%;height:86%;width:auto;aspect-ratio:408/524;
    right:calc(50% - 204px);
    border-radius:50% 50% 6% 6% / 39% 39% 4% 4%;
  }
  .hgp-ring{
    left:auto;top:0;height:95%;width:auto;aspect-ratio:446/562;
    right:calc(50% - 223px);
    border-radius:50% 50% 8% 8% / 40% 40% 6% 6%;
  }
  .hgp-ring::before{
    inset:-3.4%;border-radius:50% 50% 11% 11% / 40% 40% 9% 9%;
  }
  .hero-group .sun-disc{
    height:106%;width:auto;aspect-ratio:1;left:auto;right:calc(50% - 310px);top:-3%;
  }
  .hero-group .photo-cutout{width:clamp(136px,13.6svh,176px)}
  .hero-group .photo-cutout.back {top:11%;left:-24px;bottom:auto}
  .hero-group .photo-cutout.front{bottom:7%;top:auto;right:-14px}
  .hero-group .hero-pass{bottom:12px;left:-4px;z-index:9}
}
/* short laptops: the copy column gives up its top padding first */
@media (min-width:1041px) and (max-height:880px){
  .campaign-hero{padding-top:clamp(124px,16svh,160px)}
  .campaign-hero h1{font-size:clamp(54px,5.4vw,80px);margin:24px 0}
  .campaign-hero .hero-content>p{font-size:17px}
  .hero-group .hero-pass{padding:13px 18px}
  .hero-group .hero-pass>div{font-size:15px}
}
/* nothing in the collage may paint over the closing rule */
.hero-bottom{z-index:12;background:linear-gradient(0deg,#060A0Ce8 72%,transparent)}
.campaign-hero{padding-bottom:max(96px,var(--hero-pb,96px))}

/* ---------------------------------------------------------------------------
   25. Section two, compacted, and made scannable
   It was 1,033px tall on desktop for three lines of content, and two of the
   three ways showed nothing but a dim title until you clicked them. Someone
   skimming the page read one way out of three.

   The stage lost 110px, the padding 70px, and every row now carries a
   one-line summary whether or not it is open, so all three ways read at a
   glance and the expanded paragraph is the reward for stopping.
   ------------------------------------------------------------------------ */
.ways{padding:clamp(58px,6vw,78px) 7% clamp(44px,4.4vw,58px)}
.ways-head h2{font-size:clamp(32px,3.7vw,46px);letter-spacing:-1.6px;margin:12px 0 0}
.ways-head p{font-size:15.5px;line-height:1.68}
.ways-body{margin-top:clamp(26px,2.8vw,36px);grid-template-columns:1fr 388px;
  gap:clamp(36px,4.6vw,66px)}

.ways-stage{height:430px}
.ways-screen{width:206px;height:392px;border-radius:32px;margin-bottom:42px}
.ways-glow{width:372px;height:372px}
.ways-nav button{width:40px;height:40px}

.way{padding:15px 0}
.way-ic{width:34px;height:34px;border-radius:11px}
.way-t{font-size:clamp(18px,1.9vw,23px);color:#BCC6CE}
.way:hover .way-t{color:#E4EBF0}
.way-sub{
  display:block;margin-top:7px;padding-left:48px;font-size:13.5px;line-height:1.5;
  color:#7F93A4;transition:color .3s var(--ease),opacity .3s var(--ease);
}
.way.on .way-sub{color:#F7C649;opacity:.92}
.way-p{padding-top:10px;font-size:14px;line-height:1.65;padding-left:48px}
.way-tag{margin-top:11px;margin-left:48px}

.ways-foot{margin-top:clamp(28px,3vw,40px);padding-top:18px;font-size:12.5px}

@media (max-width:1100px){
  .ways-body{grid-template-columns:1fr 312px}
  .ways-stage{height:400px}
  .ways-screen{width:188px;height:358px;border-radius:28px;margin-bottom:38px}
  .ways-glow{width:300px;height:300px}
}
@media (max-width:860px){
  .ways-body{grid-template-columns:1fr;gap:34px}
  .ways-stage{height:392px;order:-1}
}
@media (max-width:560px){
  .ways-stage{height:356px}
  .ways-screen{width:172px;height:326px;border-radius:26px;margin-bottom:34px}
  .ways-glow{width:250px;height:250px}
  .way-sub,.way-p,.way-tag{padding-left:0;margin-left:0}
  .way-sub{font-size:13px}
}

/* the closing rule in the hero no longer needs a scrim under it */
.hero-bottom{background:none}

/* ---------------------------------------------------------------------------
   26. The trust strip
   A pre-launch travel marketplace invites exactly three suspicions: who are
   these hosts, when do you take my money, and am I committing to something.
   The thin caption at the foot of section two was answering none of them, so
   it now answers all three, in the space it already occupied.
   ------------------------------------------------------------------------ */
.trust-strip{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 30px;align-items:center;
}
.trust-strip li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:#A9BCCB;line-height:1.4;
}
.trust-strip svg{color:var(--lime);flex:none}
.trust-strip li:nth-child(2) svg{color:var(--amber)}
.trust-strip li:nth-child(3) svg{color:var(--sky-soft)}
@media (max-width:860px){
  .trust-strip{flex-direction:column;align-items:flex-start;gap:9px}
}

/* ---------------------------------------------------------------------------
   27. Vertical rhythm
   The page was 7,257px for nine sections. Nothing was cut; the air between
   things was. Section padding, the gap under every section heading, and the
   two tallest blocks all came down a notch, which pulls roughly a screen and
   a half out of the scroll.
   ------------------------------------------------------------------------ */
/* only the two sections still on the generic 100px. Every other section has
   its own tuned padding (and often a min-height) that must not be clobbered. */
.reading,.plan{padding-top:clamp(62px,6.4vw,84px);padding-bottom:clamp(62px,6.4vw,84px)}

.reading-head h2{font-size:clamp(34px,3.8vw,47px);letter-spacing:-1.7px;margin:12px 0 0}
.reading-head p{font-size:15.5px;line-height:1.68}
.reading-grid{margin-top:36px;gap:16px}
.read-card{min-height:292px;border-radius:22px}
.rc-num{font-size:56px;letter-spacing:-2.5px}
.rc-body{padding:26px 26px 24px}
.reading-note{margin-top:34px}

.plan-head h2{font-size:clamp(32px,3.6vw,45px);letter-spacing:-1.6px}
.plan-grid{margin-top:32px}
.plan-card{padding:22px 22px 20px}
.plan-foot{margin-top:28px;padding-top:22px}


/* photographs in the research cards: crop to the subject, and keep the type
   off the blown-out part of the sky */
.reading-grid>.read-card:nth-child(1) img{object-position:center 62%;filter:contrast(1.06) saturate(.95)}
.read-card.warm .rc-shade{
  background:linear-gradient(180deg,#160b01a6 0%,#160b0180 28%,#0f0701e6 66%,#070400fc 100%);
}

/* ---------------------------------------------------------------------------
   28. The lockup is composed, so the tagline is live text
   The supplied logo bakes "PEOPLE · TRAVEL · STORIES" into the image at a
   sage so dark it disappears on the near-black header, and the middle word
   is wrong: the product sells trips, not travel. The mark and the wordmark
   are now two images and the tagline is HTML, so it can be read, corrected
   and re-coloured without touching the artwork.
   ------------------------------------------------------------------------ */
.brand{display:inline-flex;align-items:center;gap:14px;line-height:0}
.brand-mark{width:64px;height:auto;display:block;flex:none}
.brand-stack{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.brand-word{width:196px;height:auto;display:block}
.brand-tag{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:8.6px;font-weight:700;letter-spacing:.16em;line-height:1;
  color:#B9E58C;padding-right:1px;
}
.brand-tag b{color:var(--amber);font-weight:700;font-size:1.25em;line-height:0}

footer .brand-mark{width:58px}
footer .brand-word{width:178px}
footer .brand-tag{font-size:7.9px}

@media (max-width:1100px){
  .brand-mark{width:56px}.brand-word{width:168px}
  .brand-tag{font-size:7.4px;letter-spacing:.15em}
}
@media (max-width:760px){
  .brand{gap:10px}
  .brand-mark{width:40px}.brand-word{width:118px}
  .brand-tag{font-size:5.4px;letter-spacing:.12em}
  footer .brand-mark{width:52px}footer .brand-word{width:158px}
  footer .brand-tag{font-size:7px}
}


/* ---------------------------------------------------------------------------
   29. "Why we are building this" is an argument now, not a stat wall
   Four research cards read as a public-health poster someone had pinned to a
   travel site. The section leads with the reason in plain words and keeps two
   figures as evidence underneath it, where evidence belongs. 1,134px to ~780.
   ------------------------------------------------------------------------ */
.why-body{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(36px,4.6vw,66px);align-items:start;margin-top:clamp(30px,3.4vw,44px);
}
.why-photo{
  position:relative;margin:0;border-radius:20px;overflow:hidden;
  box-shadow:0 36px 72px -32px #000c, 0 0 0 1px #ffffff14;
}
.why-photo img{
  display:block;width:100%;height:clamp(320px,38vw,452px);object-fit:cover;
  object-position:center 46%;filter:contrast(1.06) saturate(.94);
}
.why-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;
  font-family:Georgia,serif;font-style:italic;font-size:16px;color:#E6EDF2;
  background:linear-gradient(0deg,#040d14e8,transparent);
}

.why-copy{max-width:60ch}
.why-copy p{margin:0 0 16px;font-size:16.5px;line-height:1.72;color:#9FB4C5}
.why-copy p b{color:#fff;font-weight:700}
.why-lead{
  font-size:clamp(20px,2.1vw,25px)!important;line-height:1.46!important;
  color:#E8EFF4!important;letter-spacing:-.3px;margin-bottom:18px!important;
}

.why-evidence{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.ev{
  display:block;text-decoration:none;border-radius:16px;padding:18px 18px 15px;
  background:linear-gradient(165deg,#ffffff0f,#ffffff05);
  border:1px solid #ffffff17;transition:.35s var(--ease);
}
.ev:hover{border-color:#3599f659;transform:translateY(-3px)}
.ev b{
  display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:34px;
  line-height:1;letter-spacing:-1.4px;color:#DCEBF7;font-variant-numeric:tabular-nums;
}
.ev.good b{color:var(--amber)}
.ev.good:hover{border-color:#f7c64959}
.ev span{display:block;margin-top:9px;font-size:13.5px;line-height:1.56;color:#A3B6C6}
.ev em{
  display:flex;align-items:center;gap:6px;margin-top:13px;font-style:normal;
  font-family:'PlexMono','DM Sans',monospace;font-size:9px;letter-spacing:.12em;
  color:#6C8699;
}
.ev:hover em{color:var(--sky-soft)}

.reading-note{margin-top:clamp(28px,3vw,38px)}

@media (max-width:980px){
  .why-body{grid-template-columns:1fr;gap:30px}
  .why-photo img{height:280px;object-position:center 42%}
  .why-copy{max-width:none}
}
@media (max-width:560px){
  .why-evidence{grid-template-columns:1fr}
  .why-photo img{height:230px}
}

/* keep the subject of each backdrop clear of the copy column */
.ways-bgi{background-position:74% center}
.why-copy{max-width:none}
.why-copy p{max-width:62ch}
.ev em{white-space:nowrap}


/* ---------------------------------------------------------------------------
   30. Marketing pass: show the product, and show the mechanism
   Two things every conversion page needs and this one did not have.

   (a) Nobody could picture a single actual trip. "Escapes" and "tribes" are
       our words, not the visitor's. The new escapes section shows three
       published departures exactly as the app renders them: dates, a price
       band, seats taken, a named verified host. Labelled as examples, because
       nothing is bookable yet.
   (b) Nobody knew what happens after they sign up. The "Same destination,
       your wavelength" section was restating way 01 of section two, so it is
       now the three steps, in the same furniture.

   The order is the funnel: what it is, how it works, what you get, why we
   care, when it opens, sign up. The escapes section is bone so five dark
   bands in a row stop reading as one long band.
   ------------------------------------------------------------------------ */

/* --- how it works, in the vibe section's clothes --- */
.how-list{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:18px}
.how-list li{display:flex;gap:16px;align-items:flex-start}
.how-list b{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:'PlexMono','DM Sans',monospace;font-size:11px;font-weight:700;
  background:#f7c6491f;color:var(--amber);border:1px solid #f7c64942;margin-top:1px;
}
.how-list span{display:block;font-size:13.5px;line-height:1.62;color:#B2C3D3;max-width:46ch}
.how-list strong{display:block;color:#fff;font-size:15.5px;margin-bottom:3px;letter-spacing:-.2px}

/* --- the escapes section --- */
.escapes{
  background:var(--bone);color:var(--ink);
  padding:clamp(58px,6vw,80px) 7%;position:relative;
}
.esc-head{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:end}
.esc-head h2{
  font-size:clamp(32px,3.7vw,46px);line-height:1.06;letter-spacing:-1.7px;
  margin:12px 0 0;color:var(--ink);
}
.esc-head h2 em{font-family:Georgia,serif;font-style:italic;color:var(--amber-deep);font-weight:400}
.esc-head p{font-size:15.5px;line-height:1.68;color:#4C5450;margin:0}
.escapes .eyebrow{color:#7A8A80}

.esc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:clamp(28px,3.2vw,42px);
}
.esc{
  background:var(--black);color:#fff;border-radius:20px;padding:22px 22px 20px;
  border:1px solid #ffffff14;display:flex;flex-direction:column;
  box-shadow:0 26px 54px -30px #0f141aa6;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.esc:hover{transform:translateY(-5px);box-shadow:0 36px 64px -30px #0f141ac4}
.esc-top{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:'PlexMono','DM Sans',monospace;font-size:9px;letter-spacing:.14em;
  color:var(--lime);background:#9bcd751a;border:1px solid #9bcd7536;
  padding:5px 10px 5px 6px;border-radius:999px;
}
.esc-top i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:#9bcd752e;color:var(--lime)}
.esc h3{font-size:21px;line-height:1.2;letter-spacing:-.5px;margin:15px 0 0;color:#fff}
.esc-where{margin:6px 0 0;font-size:13px;color:#8EA0AE}

.esc-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0;
  padding:15px 0 0;border-top:1px solid #ffffff14;
}
.esc-facts div{margin:0}
.esc-facts dt{
  font-family:'PlexMono','DM Sans',monospace;font-size:8.5px;letter-spacing:.14em;
  color:#6E8494;margin:0 0 5px;
}
.esc-facts dd{margin:0;font-size:14.5px;font-weight:700;color:#EAF1F6;letter-spacing:-.2px}
.esc-facts div:last-child dd{color:var(--amber)}

.esc-seats{margin-top:18px}
.esc-bar{display:block;height:5px;border-radius:5px;background:#ffffff14;overflow:hidden}
.esc-bar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--amber),var(--amber-hi))}
.esc-seatline{display:block;margin-top:8px;font-size:12px;color:#8EA0AE}
.esc-seatline b{color:#fff;font-weight:700}
.esc-host{
  margin:16px 0 0;padding-top:14px;border-top:1px solid #ffffff0f;
  font-size:12.5px;color:#9FB0BD;
}

.esc-foot{
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,38px);padding-top:20px;border-top:1px solid var(--bone-line);
}
.esc-foot p{margin:0;font-size:13.5px;color:#5E645F;max-width:62ch;line-height:1.6}
.esc-foot p b{color:var(--ink)}

@media (max-width:1000px){
  .esc-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .esc-grid{grid-template-columns:1fr 1fr}
  .esc-grid>.esc:last-child{grid-column:1 / -1}
}
@media (max-width:660px){
  .esc-grid{grid-template-columns:1fr}
  .esc-grid>.esc:last-child{grid-column:auto}
  .esc-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .esc-foot .button{width:100%}
}

/* --- fewer photographs, used on purpose --- */
.plan:before,.plan:after{display:none}
.reading-wash{display:none}

/* --- the tagline reads as one unit, not three words pushed apart --- */
.brand-tag{justify-content:flex-start;gap:.5em;letter-spacing:.12em;padding-right:0}
.brand-tag b{margin:0 -.1em}
@media (max-width:1100px){.brand-tag{letter-spacing:.1em;gap:.45em}}
@media (max-width:760px){.brand-tag{letter-spacing:.09em;gap:.4em}}

/* --- 31. trimming back what the new sections cost --- */
.how-list{margin:22px 0 26px;gap:15px}
.how-list span{font-size:13px;line-height:1.58}
.how-list strong{font-size:15px}
.vibe{min-height:0}
.vibe-copy h2{font-size:clamp(30px,3.4vw,44px)!important;margin:16px 0 0!important;letter-spacing:-1.6px}
.vibe-copy>p{margin-top:14px}

.esc{padding:20px 20px 18px}
.esc h3{font-size:20px;margin-top:13px}
.esc-facts{margin-top:15px;padding-top:13px}
.esc-seats{margin-top:15px}
.esc-host{margin-top:13px;padding-top:12px}

/* the download band carried a QR panel that said "available at launch" and a
   phone, in 595px. The panel is gone and the band is shorter. */
.download-section{min-height:0;padding-top:clamp(54px,5.4vw,70px);padding-bottom:clamp(54px,5.4vw,70px)}
.download-preview{height:380px}
.download-heading h2{font-size:clamp(30px,3.4vw,44px);margin:16px 0}
.download-phone{width:184px;left:calc(50% - 92px)}

@media (min-width:861px){
  .vibe-caption{left:auto;right:-10px;width:max-content;max-width:86%;bottom:-6px}
}
@media (max-width:860px){
  .vibe-screen-cluster{height:520px}
  .vibe-caption{position:absolute;bottom:-10px;left:0;right:0;width:auto;max-width:none}
}

/* ===========================================================================
   32. v15
   ======================================================================== */

/* --- section two: the backdrops are a colour wash, not a photograph to
   inspect. The three files are swap slots (ways-1/2/3.jpg); drop a sharp
   HD photograph in and set --ways-blur to 0. --- */
.ways{--ways-blur:7px}
.ways-bgi{filter:blur(var(--ways-blur)) saturate(1.12);transform:scale(1.12)}
.ways-bgi.on{transform:scale(1.06)}

/* --- how it works: no low-resolution photograph behind it any more --- */
.vibe-photo{
  background:
    radial-gradient(760px 520px at 82% 30%, #3599f624, transparent 70%),
    radial-gradient(620px 460px at 10% 96%, #f7c6491c, transparent 70%),
    linear-gradient(180deg,#0B1116,#0E1418);
}

/* ===========================================================================
   33. WHY: the argument as tiles, each with its own small animated drawing
   ======================================================================== */
.why-bento{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;
  margin-top:clamp(28px,3.2vw,40px);
}
.wt{
  position:relative;border-radius:22px;padding:22px 22px 22px;overflow:hidden;
  background:linear-gradient(165deg,#ffffff10,#ffffff04);
  border:1px solid #ffffff17;color:#fff;text-decoration:none;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.wt:hover{transform:translateY(-4px);border-color:#ffffff2e}
.wt h3{font-size:19px;line-height:1.25;letter-spacing:-.4px;margin:14px 0 0;color:#fff}
.wt p{font-size:13.8px;line-height:1.6;color:#A5B8C7;margin:8px 0 0}
.wt-art{display:block;width:100%;height:auto;max-height:128px}

.wt-list {grid-column:span 4}
.wt-alone{grid-column:span 4}
.wt-chat {grid-column:span 4}
.wt-stat {grid-column:span 4}
.wt-built{grid-column:span 8}
.why-bento>.wt-stat:last-child{grid-column:span 4}

/* row 2 = built (8) + +50% (4); 17–21% sits in row 2 on wide screens */
@media (min-width:1101px){
  .why-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .wt-list,.wt-alone,.wt-chat{grid-column:span 4}
  .wt-stat{grid-column:span 3}
  .wt-built{grid-column:span 6}
}

/* ---- drawing 1: the someday list ---- */
.a-card{fill:#0F161B;stroke:#ffffff1f}
.a-cap{font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;fill:#6E8494}
.a-item{font:500 10.5px 'DM Sans',system-ui,sans-serif;fill:#DCE5EC}
.a-box{fill:none;stroke:#F7C649;stroke-width:1.4}
.a-row{opacity:0;animation:aRow 6s var(--ease) infinite}
@keyframes aRow{0%{opacity:0;transform:translateX(-6px)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
.a-pin circle{fill:#f7c64924}.a-pin path{fill:#F7C649}
.a-pin{transform-box:fill-box;transform-origin:center;animation:aPulse 2.4s ease-in-out infinite}
@keyframes aPulse{50%{transform:scale(1.1)}}
.a-tag{fill:#3599f626;stroke:#3599f655}
.a-tagt{font:600 8.6px 'DM Sans',system-ui,sans-serif;fill:#8CCBFF}

/* ---- drawing 2: going alone ---- */
.a-sun{fill:#F7C649;opacity:.9;transform-box:fill-box;transform-origin:center;animation:aSun 6s ease-in-out infinite}
@keyframes aSun{0%,100%{transform:translateY(6px)}50%{transform:translateY(-2px)}}
.a-hill{fill:#1C2934}.a-hill2{fill:#24384A}.a-road{fill:#0E151B}
.a-walker{fill:#EAF1F6;animation:aWalk 1.1s ease-in-out infinite}
@keyframes aWalk{50%{transform:translateY(-1.4px)}}
.a-think rect{fill:#0F161B;stroke:#ffffff2e;stroke-dasharray:3 3}
.a-think text{font:italic 500 9.5px Georgia,serif;fill:#C9D6E0}
.a-think{animation:aFade 4s ease-in-out infinite}
@keyframes aFade{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- drawing 3: the group chat ---- */
.a-b rect{fill:#1C2731}
.a-b text{font:500 10.5px 'DM Sans',system-ui,sans-serif;fill:#DCE5EC}
.a-b.me rect{fill:#F7C649}.a-b.me text{fill:#20170A;font-weight:700}
.a-b{opacity:0;animation:aMsg 7s var(--ease) infinite}
.a-b1{animation-delay:0s}.a-b2{animation-delay:.6s}.a-b3{animation-delay:1.4s}.a-b4{animation-delay:2.2s}
@keyframes aMsg{0%{opacity:0;transform:translateY(6px)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
.a-dot{fill:#8EA0AE;animation:aDot 1.2s ease-in-out infinite}
.a-dot:nth-of-type(2){animation-delay:.15s}.a-dot:nth-of-type(3){animation-delay:.3s}
@keyframes aDot{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.a-seen{font:500 8.5px 'DM Sans',system-ui,sans-serif;fill:#6E8494}

/* ---- the big amber tile: scattered people find each other ---- */
.wt-built{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:center;
  background:linear-gradient(135deg,#F7C649,#F0B12E 62%,#E3A021);
  border-color:transparent;color:var(--ink);
  box-shadow:0 30px 70px -34px #f7c6498c;
}
.wt-built:hover{border-color:transparent}
.wt-kick{font:700 10px 'PlexMono','DM Sans',monospace;letter-spacing:.16em;color:#5A4108}
.wt-built h3{font-size:clamp(22px,2.2vw,27px);color:#13171A;margin-top:8px;letter-spacing:-.7px}
.wt-built p{color:#3B3220;font-size:14px}
.wt-art.big{max-height:150px}
.a-p{fill:#13171A;animation:aMeet 5.5s var(--ease) infinite}
.a-p circle,.a-p rect{fill:#13171A}
@keyframes aMeet{
  0%,8%{transform:translate(var(--dx),var(--dy));opacity:.55}
  38%,82%{transform:none;opacity:1}
  100%{transform:translate(var(--dx),var(--dy));opacity:.55}
}
.a-links line{stroke:#13171A;stroke-width:1.4;stroke-dasharray:3 4;opacity:0;animation:aLinks 5.5s var(--ease) infinite}
@keyframes aLinks{0%,34%{opacity:0}46%,80%{opacity:.5}92%,100%{opacity:0}}

/* ---- the two stat tiles ---- */
.wt-stat{display:flex;flex-direction:column}
.wt-num{
  font-family:Manrope,sans-serif;font-weight:800;font-size:44px;line-height:1;letter-spacing:-2px;
  color:#DCEBF7;font-variant-numeric:tabular-nums;
}
.wt-stat.good .wt-num{color:var(--amber)}
.wt-dots{display:flex;gap:5px;margin-top:14px}
.wt-dots i{width:11px;height:11px;border-radius:50%;border:1px solid #ffffff38}
.wt-dots i.on{background:var(--sky-soft);border-color:var(--sky-soft);box-shadow:0 0 12px #60bafa80}
.wt-bar{display:block;height:8px;border-radius:8px;background:#ffffff14;margin-top:16px;overflow:hidden}
.wt-bar i{display:block;height:100%;width:66.6%;border-radius:8px;
  background:linear-gradient(90deg,var(--amber),var(--amber-hi));animation:aBar 3.2s var(--ease) infinite alternate}
@keyframes aBar{from{width:44.4%}to{width:66.6%}}
.wt-stat p{flex:1}
.wt-stat em{
  display:flex;align-items:center;gap:6px;margin-top:14px;font-style:normal;white-space:nowrap;
  font:700 9px 'PlexMono','DM Sans',monospace;letter-spacing:.12em;color:#6C8699;
}
.wt-stat:hover em{color:var(--sky-soft)}

@media (max-width:1100px){
  .wt-list,.wt-alone,.wt-chat,.wt-stat,.why-bento>.wt-stat:last-child{grid-column:span 6}
  .wt-built{grid-column:span 12}
}
@media (max-width:640px){
  .why-bento{grid-template-columns:1fr}
  .wt-list,.wt-alone,.wt-chat,.wt-stat,.wt-built,.why-bento>.wt-stat:last-child{grid-column:auto}
  .wt-built{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wt-art *,.wt-bar i{animation:none!important;opacity:1!important;transform:none!important}
}

/* ===========================================================================
   34. EARLY ACCESS: the boarding pass
   The section that asks for the commitment should be the best thing on the
   page. It is now a ticket the visitor fills in: pick a city, watch the pass
   change (FROM, GATE as the city's airport code), claim the spot. The pick
   carries into the form's city field, so the first question is already
   answered when they arrive there.
   ======================================================================== */
.plan{
  background:
    radial-gradient(900px 520px at 78% 40%, #f7c6491f, transparent 68%),
    radial-gradient(700px 480px at 6% 100%, #3599f61a, transparent 70%),
    #0A0F13!important;
  overflow:hidden;
}
.plan:before{
  display:block!important;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(#ffffff12 1px, transparent 1.2px);
  background-size:22px 22px;background-repeat:repeat;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse at 70% 45%,#000 20%,transparent 72%);
          mask-image:radial-gradient(ellipse at 70% 45%,#000 20%,transparent 72%);
}
.plan:after{display:none!important}
.plan>*{position:relative;z-index:2}
.plan-flight{
  position:absolute!important;z-index:1!important;left:-10%;right:-10%;top:16%;height:260px;pointer-events:none;
  border-top:2px dashed #f7c64930;border-radius:50%;transform:rotate(-4deg);
}

.plan-grid2{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,74px);align-items:center;
}
.plan-intro h2{
  font-size:clamp(40px,5vw,66px)!important;line-height:1!important;letter-spacing:-2.6px!important;margin:14px 0 0;
}
.plan-intro h2 em{color:var(--amber)!important}
.plan-intro>p{font-size:16.5px;line-height:1.7;color:#AFC0CD;margin:20px 0 0;max-width:46ch}
.plan-promises{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.plan-promises li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;color:#9FB2C1}
.plan-promises svg{flex:none;color:var(--amber);margin-top:2px}
.plan-promises b{color:#fff}

/* the ticket */
.pass{
  display:grid;grid-template-columns:minmax(0,1fr) 150px;
  filter:drop-shadow(0 40px 60px #000000b0);
  transform:rotate(-1.2deg);transition:transform .6s var(--ease);
}
.pass:hover{transform:rotate(0)}
.pass-main,.pass-stub{background:#F4F1E8;color:#13171A;position:relative}
.pass-main{
  border-radius:22px 0 0 22px;padding:24px 26px 24px;
  -webkit-mask:radial-gradient(circle 13px at 100% 0,#0000 98%,#000) top right/100% 51% no-repeat,
               radial-gradient(circle 13px at 100% 100%,#0000 98%,#000) bottom right/100% 51% no-repeat;
          mask:radial-gradient(circle 13px at 100% 0,#0000 98%,#000) top right/100% 51% no-repeat,
               radial-gradient(circle 13px at 100% 100%,#0000 98%,#000) bottom right/100% 51% no-repeat;
}
.pass-stub{
  border-radius:0 22px 22px 0;padding:24px 18px;display:flex;flex-direction:column;gap:14px;
  border-left:2px dashed #13171a33;
  -webkit-mask:radial-gradient(circle 13px at 0 0,#0000 98%,#000) top left/100% 51% no-repeat,
               radial-gradient(circle 13px at 0 100%,#0000 98%,#000) bottom left/100% 51% no-repeat;
          mask:radial-gradient(circle 13px at 0 0,#0000 98%,#000) top left/100% 51% no-repeat,
               radial-gradient(circle 13px at 0 100%,#0000 98%,#000) bottom left/100% 51% no-repeat;
}
.pass small{display:block;font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.16em;color:#7B8079}
.pass b{display:block;font-weight:800;letter-spacing:-.3px}

.pass-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid #13171a1a}
.pass-brand{display:flex;align-items:center;gap:8px;font:800 11px 'DM Sans',system-ui,sans-serif;letter-spacing:.16em}
.pass-brand img{width:30px;height:auto}
.pass-kind{font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.16em;color:#7B8079}

.pass-route{display:grid;grid-template-columns:1fr 150px 1fr;align-items:end;gap:10px;margin-top:18px}
.pass-route b{font-size:clamp(20px,2.1vw,27px);line-height:1.1;margin-top:5px;transition:color .3s}
.pass-route b.muted{color:#A7AA9F}
.pass-route .to{text-align:right}
.pass-path{width:100%;height:auto;overflow:visible;margin-bottom:6px}
.pp-line{fill:none;stroke:#13171a40;stroke-width:1.6;stroke-dasharray:4 5}
.pp-plane path{fill:#D9A526}
.pp-plane{offset-path:path('M6 38 Q80 -14 154 38');offset-rotate:auto;animation:ppFly 4.2s var(--ease) infinite}
@keyframes ppFly{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}

.pass-pick{margin-top:20px;padding-top:16px;border-top:1px solid #13171a1a}
.city-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.city-chips button{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:600 13px 'DM Sans',system-ui,sans-serif;color:#2A302C;
  background:#fff;border:1px solid #13171a26;border-radius:999px;padding:8px 12px 8px 14px;
  transition:.25s var(--ease);
}
.city-chips button span{font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.1em;color:#9AA096}
.city-chips button:hover{border-color:#13171a66;transform:translateY(-1px)}
.city-chips button.on{background:#13171A;color:#fff;border-color:#13171A;box-shadow:0 8px 18px -8px #13171a99}
.city-chips button.on span{color:var(--amber)}
.city-chips button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.pass-note{display:block;margin-top:9px;font-size:12px;color:#8A8F86}

.pass-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;
  padding-top:16px;border-top:1px solid #13171a1a}
.pass-meta b{font-size:15px;margin-top:4px}

/* the button the whole page has been leading up to */
.claim{
  position:relative;overflow:hidden;margin-top:20px;width:100%;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 10px 10px 26px;min-height:66px;border:0;border-radius:16px;
  background:linear-gradient(135deg,#FFD873,#F7C649 45%,#EDB02C);
  color:#1B1406;font:800 19px 'DM Sans',system-ui,sans-serif;letter-spacing:-.3px;text-align:left;
  box-shadow:0 18px 34px -16px #d9a526cc, inset 0 1px 0 #ffffffa0, inset 0 -2px 0 #00000014;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.claim:hover{transform:translateY(-2px);box-shadow:0 26px 40px -16px #d9a526e6, inset 0 1px 0 #ffffffa0}
.claim:active{transform:translateY(0)}
.claim:focus-visible{outline:3px solid #13171A;outline-offset:3px}
.claim-txt{position:relative;z-index:1}
.claim-ic{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:46px;height:46px;
  border-radius:12px;background:#13171A;color:var(--amber);transition:transform .3s var(--ease)}
.claim:hover .claim-ic{transform:translateX(4px)}
.claim-shine{position:absolute;inset:0;z-index:0;
  background:linear-gradient(105deg,transparent 30%,#ffffff8c 48%,transparent 62%);
  transform:translateX(-120%);animation:claimShine 3.6s ease-in-out infinite}
@keyframes claimShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

.pass-stub b{font-size:16px;margin-top:4px}
.pass-stub b.gate{font:800 30px 'Manrope',sans-serif;letter-spacing:1px;color:#13171A}
.barcode{display:block;flex:1;min-height:70px;margin-top:4px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#13171A 0 2px,transparent 2px 4px,#13171A 4px 5px,transparent 5px 8px,#13171A 8px 11px,transparent 11px 13px)}
.pass-stub .admit{font-size:7.5px;line-height:1.5;color:#8A8F86}

.plan-fine{margin:30px 0 0;text-align:center;font-size:13px;color:#7F93A4}
.plan-fine b{color:#DCE5EC}

@media (max-width:1040px){
  .plan-grid2{grid-template-columns:1fr}
  .pass{max-width:660px;width:100%;justify-self:center}
}
@media (max-width:600px){
  .pass{grid-template-columns:1fr;transform:none}
  .pass-main{border-radius:20px 20px 0 0;-webkit-mask:none;mask:none;padding:20px 18px}
  .pass-stub{border-radius:0 0 20px 20px;border-left:0;border-top:2px dashed #13171a33;
    -webkit-mask:none;mask:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:16px 18px 18px}
  .barcode{flex:1 1 100%;min-height:38px}
  .pass-route{grid-template-columns:1fr 80px 1fr}
  .claim{font-size:17px;min-height:60px}
  .pass-kind{display:none}
}
@media (prefers-reduced-motion:reduce){
  .claim-shine,.pp-plane{animation:none}
}

/* ===========================================================================
   35. Footer socials
   ======================================================================== */
.foot-social{display:flex;align-items:center;gap:10px;margin-top:18px}
.foot-social span{font:700 9.5px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;color:#6E8494;margin-right:4px}
.foot-social a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  color:#DCE5EC;background:#ffffff0d;border:1px solid #ffffff1a;transition:.25s var(--ease);
}
.foot-social a:hover{color:#13171A;background:var(--amber);border-color:var(--amber);transform:translateY(-2px)}

/* v15 fixes: the bento row adds to 12, and the people are people */
@media (min-width:1101px){
  .why-bento>.wt-stat:last-child{grid-column:span 3}
}
.wt-art.big{max-height:170px}
.a-ring{fill:none;stroke:#13171a2e;stroke-width:1.2;stroke-dasharray:2 5}
.a-p{fill:#13171A;transform-box:view-box;animation:aMeet 6s var(--ease) infinite}
.a-p circle,.a-p path{fill:#13171A}
@keyframes aMeet{
  0%,6%{transform:translate(var(--dx),var(--dy));opacity:.25}
  34%,84%{transform:none;opacity:1}
  100%{transform:translate(var(--dx),var(--dy));opacity:.25}
}
.a-links line{stroke:#13171A;stroke-width:1.6;stroke-dasharray:3 4;opacity:0;animation:aLinks 6s var(--ease) infinite}
@keyframes aLinks{0%,30%{opacity:0}42%,80%{opacity:.55}92%,100%{opacity:0}}
.a-you circle,.a-you path{fill:#FFF8E6}
.a-you .a-you-ring{fill:#13171A}
.a-you{animation:aYou 6s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes aYou{0%,30%{transform:scale(.94)}42%,84%{transform:scale(1.04)}100%{transform:scale(.94)}}
.a-you-t{font:700 9px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;fill:#5A4108;text-transform:uppercase}
.a-hill{fill:#1A2833}.a-hill2{fill:#22384A}.a-road{fill:#0C1217}
.a-thinkdot{fill:#ffffff40}
.a-think rect{fill:#0F161B;stroke:#ffffff38;stroke-dasharray:none}
.foot-cta{align-self:start}

/* ===========================================================================
   36. Section two backdrops: Edinburgh, the Highlands, Cornwall
   Vector scenes (public/assets/ways-1..3.svg), so they are sharp at any
   screen size and weigh a fraction of a photograph. No blur. The veil is
   lighter on the right so the landmark reads around the phone.
   ======================================================================== */
.ways{--ways-blur:0px}
.ways-bgi{filter:none;transform:scale(1.04);background-position:70% 46%}
.ways-bgi.on{opacity:1;transform:scale(1)}
.ways-veil{
  background:
    linear-gradient(100deg,#05090df5 0%,#05090de6 28%,#05090d99 50%,#05090d38 70%,#05090d33 100%),
    linear-gradient(180deg,#05090d73 0%,transparent 22%,transparent 70%,#05090dcc 100%);
}
.ways-scene{
  position:absolute;right:clamp(16px,2.4vw,40px);bottom:clamp(14px,2vw,26px);z-index:3;
  font:700 9.5px 'PlexMono','DM Sans',monospace;letter-spacing:.16em;color:#ffffffb3;
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
.ways-scene:before{content:"";width:18px;height:1px;background:#ffffff80}

/* ===========================================================================
   37. Section three: who is coming with you
   People do not shop for "escapes". They shop for a trip with a specific set
   of people, and they decide in a second whether a page is for them. Three
   columns, all visible at once, one per situation: just me, with friends,
   with family. Each shows the trip the way the app shows it for that
   situation, so the visitor sees their own case rather than ours.
   Friends is the middle, raised column: it is the largest group and the one
   the group-chat problem in the hero speaks to.
   ======================================================================== */
.escapes .esc-head h2{font-size:clamp(32px,3.7vw,48px)}
.who-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;
  margin-top:clamp(30px,3.4vw,46px);
}
.who{
  position:relative;display:flex;flex-direction:column;
  background:#FBFAF6;border:1px solid var(--bone-line);border-radius:24px;
  padding:24px 22px 22px;box-shadow:0 22px 50px -36px #13171a66;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.who:hover{transform:translateY(-6px);box-shadow:0 34px 64px -36px #13171a8c;border-color:#13171a33}
.who-friends{
  background:#13171A;color:#fff;border-color:#13171A;
  transform:translateY(-14px);box-shadow:0 40px 80px -40px #13171ad9;
}
.who-friends:hover{transform:translateY(-20px);border-color:#13171A}
.who-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:700 9.5px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;
  background:var(--amber);color:#1B1406;padding:7px 12px;border-radius:999px;
  box-shadow:0 10px 22px -10px #d9a526cc;
}

.who-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.who-ppl{width:112px;height:auto;flex:none}
.who-ppl .me{fill:#13171A;animation:whoBob 3.2s ease-in-out infinite}
.who-friends .who-ppl .me{fill:var(--amber)}
.who-family .who-ppl .me:nth-child(3),.who-family .who-ppl .me:nth-child(4){fill:#3599F6}
.who-ppl .ghost{fill:none;stroke:#13171a40;stroke-width:1.4;stroke-dasharray:3 3}
@keyframes whoBob{50%{transform:translateY(-2px)}}
.who-chip{
  font:700 9.5px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;
  color:#5E645F;background:#13171a0d;border:1px solid #13171a1a;padding:6px 10px;border-radius:999px;
}
.who-friends .who-chip{color:var(--amber);background:#f7c6491a;border-color:#f7c64947}

.who h3{font-size:clamp(20px,1.8vw,23px);line-height:1.18;letter-spacing:-.6px;margin:18px 0 0;color:var(--ink)}
.who-friends h3{color:#fff}
.who-line{font-size:14px;line-height:1.58;color:#5E645F;margin:8px 0 0}
.who-friends .who-line{color:#A9BAC7}

/* the mini ticket inside each card */
.tix{
  margin-top:18px;border-radius:16px;padding:16px 16px 14px;
  background:#13171A;color:#fff;border:1px solid #ffffff12;position:relative;
}
.who-friends .tix{background:#1C2329;border-color:#ffffff1a}
.tix-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tix-row b{font-size:15.5px;letter-spacing:-.3px}
.tix-tag{
  font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.12em;white-space:nowrap;
  color:var(--amber);background:#f7c6491a;border:1px solid #f7c64940;padding:4px 8px;border-radius:999px;
}
.tix-tag.ok{color:var(--lime);background:#9bcd751a;border-color:#9bcd7540}
.tix-tag.priv{color:#8CCBFF;background:#3599f61f;border-color:#3599f64d}
.tix-sub{margin:5px 0 0;font-size:12.5px;color:#8EA0AE}
.tix-foot{margin:10px 0 0;font-size:12px;color:#8EA0AE}
.tix-foot b{color:#fff}
.tix-foot b.hl{color:var(--amber)}
.tix-price{
  margin:12px 0 0;padding-top:11px;border-top:1px solid #ffffff14;
  font-weight:800;font-size:16px;color:var(--amber);letter-spacing:-.3px;
}
.tix-price span{font-weight:500;font-size:12px;color:#8EA0AE;margin-left:4px}

.av{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font:800 11px 'DM Sans',system-ui,sans-serif;color:#13171A;border:2px solid #13171A;flex:none;
}
.tix-avs{display:flex;margin-top:14px}
.tix-avs .av{margin-right:-7px}
.tix-avs .av.more{background:#2A333B;color:#C9D6E0;font-size:10px}
.tix-avs .av.you{
  width:auto;padding:0 10px;border-radius:999px;margin-left:12px;margin-right:0;
  background:transparent;color:var(--amber);border:1.5px dashed #f7c64999;font-size:10.5px;
  animation:youPulse 2.4s ease-in-out infinite;
}
@keyframes youPulse{50%{border-color:var(--amber);box-shadow:0 0 0 4px #f7c6491f}}
.tix-bar{height:5px;border-radius:5px;background:#ffffff14;margin-top:13px;overflow:hidden}
.tix-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--amber),var(--amber-hi))}

.tix-pay{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.tix-pay li{display:flex;align-items:center;gap:10px;font-size:13px;color:#DCE5EC}
.tix-pay .av{width:24px;height:24px;font-size:10px;border-width:0}
.tix-pay em{
  margin-left:auto;font-style:normal;font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.1em;
  padding:3px 8px;border-radius:999px;
}
.tix-pay em.paid{color:var(--lime);background:#9bcd751f}
.tix-pay em.wait{color:var(--amber);background:#f7c6491f;animation:youPulse 2.4s ease-in-out infinite}

.tix-quotes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.tix-quotes li{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;font-size:12.5px;color:#C9D6E0}
.tix-quotes i{display:block;height:6px;border-radius:6px;background:linear-gradient(90deg,#3599F6,#60BAFA);opacity:.85}
.tix-quotes li:first-child i{background:linear-gradient(90deg,var(--amber),var(--amber-hi));opacity:1}
.tix-quotes li:first-child b{color:var(--amber)}
.tix-quotes b{font-weight:800;color:#fff}

.who-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;flex:1}
.who-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.8px;line-height:1.45;color:#3F4642}
.who-list svg{flex:none;margin-top:2px;color:#4E8A3A}
.who-friends .who-list li{color:#C9D6E0}
.who-friends .who-list svg{color:var(--lime)}

.who-cta{
  margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:15px 18px;border-radius:14px;cursor:pointer;
  font:800 15px 'DM Sans',system-ui,sans-serif;letter-spacing:-.2px;
  background:#13171A;color:#fff;border:0;transition:transform .3s var(--ease),background .3s var(--ease);
}
.who-cta svg{transition:transform .3s var(--ease)}
.who-cta:hover{transform:translateY(-2px)}
.who-cta:hover svg{transform:translateX(4px)}
.who-friends .who-cta{
  background:linear-gradient(135deg,#FFD873,#F7C649 45%,#EDB02C);color:#1B1406;
  box-shadow:0 16px 30px -16px #d9a526cc;
}
.who-cta:focus-visible{outline:3px solid var(--amber-deep);outline-offset:3px}

.escapes .esc-foot{justify-content:center;text-align:center;border-top:0;padding-top:0;margin-top:clamp(30px,3vw,40px)}
.escapes .esc-foot p{max-width:none}

@media (max-width:1060px){
  .who-grid{grid-template-columns:1fr 1fr}
  .who-friends{transform:none;grid-column:1 / -1;order:-1}
  .who-friends:hover{transform:translateY(-6px)}
}
@media (max-width:700px){
  .who-grid{grid-template-columns:1fr;gap:26px}
  .who-friends{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .who-ppl .me,.tix-avs .av.you,.tix-pay em.wait{animation:none}
}
.who-list{flex:none}
.who-cta{margin-top:auto}
.who-list{margin-bottom:22px}

/* ===========================================================================
   38. v17 — the auto-advance, made visible again
   The cycle ran from page load, so by the time anyone scrolled down it was
   either mid-way or, after one click, switched off for good; and the 2px rail
   was easy to miss over the new scenes. Progress is now one CSS variable
   (--wprog, 0 to 1) written each frame while the section is on screen.
   ======================================================================== */
.way-rail{width:3px}
.way.on .way-rail{background:#ffffff1f}
.way .way-rail i{animation:none!important;height:0}
.way.on .way-rail i{
  height:calc(var(--wprog,0) * 100%);
  background:linear-gradient(180deg,var(--amber-hi),var(--amber));
  box-shadow:0 0 12px #f7c64999;
}
.ways-stories{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;
  width:206px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.ways-stories span{height:3px;border-radius:3px;background:#ffffff2e;overflow:hidden}
.ways-stories i{display:block;height:100%;width:0;border-radius:3px;background:var(--amber)}
.ways-stories span.done i{width:100%}
.ways-stories span.now i{width:calc(var(--wprog,0) * 100%)}
.ways-screen{margin-top:14px}
@media (max-width:1100px){.ways-stories{width:188px}}
@media (max-width:560px){.ways-stories{width:172px}}

/* ===========================================================================
   39. A colour step between 01 and 02
   Both were near-black, so the eye read them as one long band. 02 now sits on
   a deep brand blue, lifted from the logo's mark, with the amber glow kept.
   No rule, no divider: the change of temperature does the separating.
   ======================================================================== */
.vibe{background:#0F2236}
.vibe-photo{
  background:
    radial-gradient(820px 560px at 84% 26%, #3599f638, transparent 70%),
    radial-gradient(640px 480px at 6% 100%, #f7c64924, transparent 70%),
    linear-gradient(180deg,#132B45 0%,#0F2338 60%,#0C1C2E 100%)!important;
}
.vibe .how-list span{color:#B9CCDD}
.vibe-copy>p{color:#C3D3E1}
.vibe .vibe-screen{border-color:#2B4560}

/* ===========================================================================
   40. Section three, the friends card: "have it your way"
   The custom trip is the product's real differentiator and section three
   never showed it. The friends card now carries a two-way switch, As listed /
   Made ours, which flips on its own while the card is on screen. Made ours
   shows the edits a group actually makes: moved dates, a different stay, a
   stop added, a stop dropped, and hosts re-quoting on that version.
   ======================================================================== */
.mode-switch{
  position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:12px;
  background:#0E1317;border:1px solid #ffffff17;border-radius:999px;padding:3px;
}
.mode-switch button{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:0;background:none;cursor:pointer;padding:8px 10px;border-radius:999px;
  font:700 12px 'DM Sans',system-ui,sans-serif;color:#8EA0AE;transition:color .35s var(--ease);
}
.mode-switch button.on{color:#1B1406}
.mode-switch button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mode-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;
  background:linear-gradient(135deg,#FFD873,#F7C649);box-shadow:0 6px 16px -8px #d9a526;
  transition:transform .5s var(--ease);
}
.mode-ours .mode-thumb{transform:translateX(100%)}

.tix-edits{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.tix-edits li{
  display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:12.5px;
  transition:opacity .45s var(--ease),max-height .45s var(--ease);
}
.tix-edits li>span{font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.12em;color:#6E8494;text-transform:uppercase}
.tix-edits b{position:relative;display:block;font-weight:600;color:#DCE5EC;min-height:18px}
.tix-edits s,.tix-edits em{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.tix-edits s{text-decoration:none;color:#DCE5EC}
.tix-edits em{font-style:normal;color:var(--amber);opacity:0;transform:translateY(4px)}
.tix-edits li.add em{color:var(--lime)}
.tix-edits li.cut em{color:#FF9A86}
/* listed: base values; added/dropped rows fade back */
.mode-listed .tix-edits li.add,.mode-listed .tix-edits li.cut{opacity:.18}
/* made ours: the edits take over, the originals step aside */
.mode-ours .tix-edits s{opacity:0;transform:translateY(-4px)}
.mode-ours .tix-edits em{opacity:1;transform:none}
.mode-ours .tix-edits li:not(.add):not(.cut) b:after{
  content:"CHANGED";position:absolute;right:0;top:1px;
  font:700 8px 'PlexMono','DM Sans',monospace;letter-spacing:.1em;color:#1B1406;
  background:var(--amber);padding:2px 6px;border-radius:999px;
}

.tix-tribe{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid #ffffff14}
.tix-tribe .tix-foot{margin:0}
.tix-avs.sm{margin-top:0}
.tix-avs.sm .av{width:24px;height:24px;font-size:10px;position:relative}
.tix-avs.sm .av i{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--lime);border:2px solid #1C2329}

.tix-custom .tix-price{position:relative;min-height:22px}
.tix-custom .p-listed,.tix-custom .p-ours{position:absolute;left:0;top:11px;transition:opacity .4s var(--ease)}
.mode-ours .p-listed{opacity:0}.mode-listed .p-ours{opacity:0}
.tix-custom .tix-price{padding-bottom:4px}
.tix-edits s,.tix-edits em{font-family:'DM Sans',system-ui,sans-serif;font-size:12.5px;font-weight:600}
.tix-custom .tix-price>.p-listed,.tix-custom .tix-price>.p-ours{
  font-size:16px;font-weight:800;color:var(--amber);margin:0;letter-spacing:-.3px;
}
.tix-custom .tix-price>span>span{font-size:12px;font-weight:500;color:#8EA0AE;margin-left:4px;letter-spacing:0}
.tix-custom .tix-price{min-height:34px}
.mode-listed .tix-edits li.add,.mode-listed .tix-edits li.cut{opacity:.55}
.mode-listed .tix-edits li.add s,.mode-listed .tix-edits li.cut s{color:#7F93A4}
@media (max-width:860px){
  .ways-veil{background:linear-gradient(180deg,#05090dd9 0%,#05090d8c 30%,#05090d73 46%,#05090de6 60%,#05090df2 100%)}
  .ways-bgi{background-position:70% 30%}
}

/* ===========================================================================
   41. v18 — real photographs, full resolution, no blur
   Supplied by the founder. Served as the original AVIF files, untouched, with
   a quality-94 JPEG (4:4:4) for browsers without AVIF. Nothing is upscaled at
   common desktop widths: the files are ~2070px wide, the section 1440–1920.
   ======================================================================== */
.ways-bgi{filter:none!important;background-size:cover;background-repeat:no-repeat}
.ways-bgi.b1{background-image:url('assets/ways-1.jpg');
  background-position:58% 62%}
.ways-bgi.b2{background-image:url('assets/ways-2.jpg');
  background-position:50% 40%}
.ways-bgi.b3{background-image:url('assets/ways-3.jpg');
  background-position:50% 30%}
.ways-bgi.on{opacity:1}
/* the shade only sits where the words are; the right half is the photograph */
.ways-veil{
  background:
    linear-gradient(100deg,#05090df0 0%,#05090de0 30%,#05090d8c 52%,#05090d26 72%,#05090d14 100%),
    linear-gradient(180deg,#05090d80 0%,transparent 20%,transparent 72%,#05090dd9 100%)!important;
}
@media (max-width:860px){
  .ways-veil{background:linear-gradient(180deg,#05090dcc 0%,#05090d66 26%,#05090d40 42%,#05090de6 58%,#05090df2 100%)!important}
  .ways-bgi.b1{background-position:72% 40%}
  .ways-bgi.b2{background-position:46% 40%}
  .ways-bgi.b3{background-position:56% 30%}
}

/* ===========================================================================
   42. Early access opens on a photograph of people
   Section 04 and 05 were both dark tiles on dark, and read as one block. 05
   now opens with four friends laughing on a mountain, full width, fading into
   the section. It is the emotional beat right before the ask.
   ======================================================================== */
.plan{padding-top:0!important}
.plan-photo{
  position:relative!important;z-index:1!important;display:block;
  margin:0 calc(-7vw - 1px) clamp(-150px,-11vw,-90px);
  height:clamp(300px,38vw,560px);
  background-image:url('assets/early-access.jpg');
  background-size:cover;background-position:50% 34%;
}
.plan-photo:after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,#0A0F1300 0%,#0A0F1300 46%,#0A0F13b3 74%,#0A0F13 100%),
    linear-gradient(90deg,#0A0F1366 0%,transparent 30%,transparent 70%,#0A0F1366 100%);
}
.plan .plan-flight{top:auto;bottom:22%}
.plan:before{top:30%}
@media (max-width:760px){
  .plan-photo{margin:0 -7% -60px;height:300px;background-position:52% 30%}
}
/* keep the copy over the photograph legible without dimming the photograph */
.ways-veil{
  background:
    linear-gradient(100deg,#05090df0 0%,#05090de0 30%,#05090d8c 52%,#05090d26 72%,#05090d14 100%),
    linear-gradient(180deg,#05090dd9 0%,#05090d80 16%,transparent 32%,transparent 72%,#05090de0 100%)!important;
}
.ways-head p{color:#E3EBF1;text-shadow:0 1px 14px #000c,0 0 2px #0009}
.ways-foot a,.ways-scene{text-shadow:0 1px 10px #000c}
.plan-photo{background-position:50% 44%;margin-bottom:clamp(-118px,-8vw,-64px)}
@media (max-width:860px){
  .ways-veil{background:linear-gradient(180deg,#05090dd9 0%,#05090d73 24%,#05090d4d 40%,#05090de6 56%,#05090df5 100%)!important}
}
.plan-photo{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw}

/* ===========================================================================
   43. v20 — the phones show original screens, not the product's real ones
   Drawn for the site from the app's look (palette, logo, card shapes) but with
   their own layouts and nothing that explains how the product works: people
   on your wavelength, a weekend worth saying yes to, sliders for pace and
   budget, a home screen, a vibe question, trip mode. Source: mocks/build.py
   in the build folder. No overlay, no blur, no labels.
   ======================================================================== */
.vibe-screen,.download-phone{overflow:hidden}
.vibe-screen img,.download-phone img{display:block;width:100%}

/* ===========================================================================
   44. Hero: "Apps coming soon", made worth noticing
   ======================================================================== */
.apps-soon{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  padding:7px 16px 7px 8px;border-radius:999px;text-decoration:none;
  background:linear-gradient(135deg,#ffffff14,#ffffff06);
  border:1px solid #ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -18px #000c;transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.apps-soon:hover{transform:translateY(-2px);border-color:#f7c64966}
.as-icons{display:flex}
.as-ic{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:#0E1317;border:1.5px solid #ffffff2e;
}
.as-ic.android{margin-left:-9px;background:#0E1A14;border-color:#3ddc8459}
.as-ic.apple svg{margin-top:-1px}
.as-txt{display:flex;flex-direction:column;line-height:1.15}
.as-txt b{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px}
.as-txt small{font-size:11px;color:#9FB2C1;margin-top:2px}
.as-live{
  display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding-left:14px;
  border-left:1px solid #ffffff24;
  font:700 9px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;color:var(--amber);
}
.as-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 #9bcd75aa;animation:asPulse 2s ease-out infinite}
@keyframes asPulse{0%{box-shadow:0 0 0 0 #9bcd75aa}80%,100%{box-shadow:0 0 0 8px #9bcd7500}}
@media (max-width:520px){
  .apps-soon{padding-right:12px;gap:10px}
  .as-live{display:none}
}
@media (prefers-reduced-motion:reduce){.as-live i{animation:none}}

/* the store buttons: the Play mark is in its own colours now */
.compact-store>img[src*="googleplay"]{filter:none}
.hero-secondary{display:inline-flex!important;vertical-align:middle}
.apps-soon{display:inline-flex;vertical-align:middle;margin:22px 0 0 28px}
@media (max-width:1100px){.apps-soon{display:flex;width:fit-content;margin:20px 0 0}}
@media (max-width:1380px){.as-live{display:none}.apps-soon{padding-right:18px}}
.apps-soon{position:relative;z-index:10}

/* ===========================================================================
   45. v21 — the download band: compact, side by side, and a hand that shows
   what to do. A pointer glides to the App Store button and taps it, a
   "Notify me" bubble pops, then it does the same on Google Play. 7s loop,
   only while the band is on screen, off under reduced motion. The phone on
   the right gets two notifications sliding in, so the band shows the app
   working, not just two badges.
   ======================================================================== */
.download-section{
  display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  gap:clamp(30px,5vw,80px)!important;align-items:center!important;
  padding-top:clamp(46px,4.6vw,62px)!important;padding-bottom:clamp(46px,4.6vw,62px)!important;
  min-height:0!important;overflow:hidden;
}
.dl-copy .eyebrow{color:#476C8E}
.dl-copy h2{font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-1.6px;margin:14px 0 0;color:#132B45}
.dl-copy h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--amber-deep)}
.dl-copy>p{font-size:15.5px;line-height:1.65;color:#4C5450;margin:14px 0 0;max-width:44ch}

.dl-stores{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;max-width:520px}
.dl-store{
  position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;
  padding:13px 16px;border-radius:16px;border:1px solid #13171A;background:#13171A;color:#fff;
  box-shadow:0 16px 30px -18px #13171ab3;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  animation:dlPress 7s var(--ease) infinite;animation-play-state:var(--dl-run,paused);
}
.dl-store.play{animation-delay:1.82s}
.dl-store:hover{transform:translateY(-3px);box-shadow:0 22px 36px -18px #13171acc}
.dl-store>img,.dl-store>svg{flex:none;width:26px;height:26px}
.dl-store span{display:flex;flex-direction:column;line-height:1.15}
.dl-store small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#AEB9C2}
.dl-store strong{font:700 19px 'DM Sans',system-ui,sans-serif;letter-spacing:-.3px;margin-top:2px}
.dl-store:after{                         /* the ripple on tap */
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 0 #f7c649aa;
  animation:dlRipple 7s ease-out infinite;animation-play-state:var(--dl-run,paused);
}
.dl-store.play:after{animation-delay:1.82s}
.dl-pop{
  position:absolute;left:50%;top:-14px;transform:translate(-50%,-100%) scale(.6);opacity:0;
  font:700 11px 'DM Sans',system-ui,sans-serif;font-style:normal;white-space:nowrap;
  background:var(--amber);color:#1B1406;padding:6px 11px;border-radius:999px;
  box-shadow:0 10px 20px -10px #d9a526;
  animation:dlPop 7s var(--ease) infinite;animation-play-state:var(--dl-run,paused);
}
.dl-pop:after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:var(--amber);transform:translateX(-50%) rotate(45deg)}
.dl-store.play .dl-pop{animation-delay:1.82s}

/* the hand */
.dl-hand{
  position:absolute;z-index:5;pointer-events:none;width:38px;height:38px;color:#13171A;
  left:18%;top:110%;opacity:0;
  filter:drop-shadow(0 6px 10px #13171a59);
  animation:dlHand 7s var(--ease) infinite;animation-play-state:var(--dl-run,paused);
}
.dl-hand svg{fill:#fff;stroke:#13171A;transform:rotate(-12deg)}
@keyframes dlHand{
  0%   {left:14%;top:150%;opacity:0;transform:scale(1)}
  8%   {opacity:1}
  18%  {left:22%;top:46%;transform:scale(1)}
  21%  {left:22%;top:46%;transform:scale(.82)}
  25%  {left:22%;top:46%;transform:scale(1)}
  44%  {left:72%;top:46%;transform:scale(1)}
  47%  {left:72%;top:46%;transform:scale(.82)}
  51%  {left:72%;top:46%;transform:scale(1)}
  66%  {left:84%;top:150%;opacity:1}
  72%,100%{left:84%;top:150%;opacity:0}
}
@keyframes dlPress{0%,19%,25%,100%{transform:none}21%{transform:translateY(2px) scale(.97)}}
@keyframes dlRipple{0%,20%{box-shadow:0 0 0 0 #f7c649b3}32%,100%{box-shadow:0 0 0 14px #f7c64900}}
@keyframes dlPop{0%,20%{opacity:0;transform:translate(-50%,-90%) scale(.6)}24%,40%{opacity:1;transform:translate(-50%,-100%) scale(1)}46%,100%{opacity:0;transform:translate(-50%,-110%) scale(.9)}}

.dl-note{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13px;color:#5E645F}
.dl-note svg{color:var(--amber-deep)}

/* the phone and its notifications */
.dl-preview{position:relative;height:clamp(330px,30vw,400px)}
.dl-glow{position:absolute;left:50%;top:50%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#f7c64938,#3599f61a 45%,transparent 70%)}
.dl-phone{
  position:absolute!important;left:calc(50% - 90px)!important;top:50%!important;width:180px!important;
  transform:translateY(-50%) rotate(6deg)!important;border:5px solid #1E2933!important;border-radius:30px!important;
  box-shadow:0 34px 60px -26px #0d2b4973!important;animation:none!important;overflow:hidden;background:#0A1016;
}
.dl-phone img{display:block;width:100%}
.dl-toast{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;width:248px;
  padding:11px 13px;border-radius:16px;background:#ffffffeb;border:1px solid #13171a14;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 36px -18px #13171a73;font-size:12px;color:#4C5450;
  opacity:0;animation:dlToast 7s var(--ease) infinite;animation-play-state:var(--dl-run,paused);
}
.dl-toast img{width:30px;height:auto;flex:none}
.dl-toast span{display:flex;flex-direction:column;line-height:1.35}
.dl-toast b{font-size:13px;color:#13171A}
.dl-toast.t1{left:2%;top:16%;animation-delay:.9s}
.dl-toast.t2{right:0;bottom:16%;width:210px;animation-delay:3s}
.dl-dot{flex:none;width:30px;height:30px;border-radius:50%;background:#9BCD75;
  box-shadow:inset 0 0 0 9px #9BCD75,inset 0 0 0 30px #fff}
@keyframes dlToast{0%{opacity:0;transform:translateY(12px) scale(.96)}6%,62%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(-6px)}}

@media (max-width:900px){
  .download-section{grid-template-columns:1fr!important}
  .dl-preview{height:340px}
}
@media (max-width:520px){
  .dl-stores{grid-template-columns:1fr 1fr;gap:10px}
  .dl-store{padding:11px 12px;gap:9px}
  .dl-store strong{font-size:15.5px}
  .dl-store small{font-size:8px}
  .dl-store>img,.dl-store>svg{width:22px;height:22px}
  .dl-toast{width:220px}
  .dl-toast.t2{width:190px}
}
@media (prefers-reduced-motion:reduce){
  .dl-hand{display:none}
  .dl-store,.dl-store:after,.dl-pop{animation:none}
  .dl-toast{animation:none;opacity:1}
}
@media (max-width:520px){
  .dl-preview{height:380px}
  .dl-phone{width:160px!important;left:calc(50% - 80px)!important}
}

/* ===========================================================================
   46. v22 — section three: placeholder prices, smaller cards
   Real figures are not final, so every amount reads ₹XX,XXX. The cards lost
   about a fifth of their height: tighter padding, smaller type, shorter gaps.
   ======================================================================== */
.who-grid{gap:16px;margin-top:clamp(24px,2.8vw,36px);max-width:1120px;margin-left:auto;margin-right:auto}
.who{padding:18px 18px 18px;border-radius:20px}
.who-friends{transform:translateY(-10px)}
.who-friends:hover{transform:translateY(-14px)}
.who-ppl{width:92px}
.who-chip{font-size:8.5px;padding:5px 9px}
.who h3{font-size:clamp(17px,1.5vw,19.5px);margin-top:13px}
.who-line{font-size:13px;line-height:1.5;margin-top:6px}
.tix{margin-top:14px;padding:13px 13px 11px;border-radius:14px}
.tix-row b{font-size:14px}
.tix-sub{font-size:11.5px}
.tix-avs{margin-top:10px}
.tix-avs .av{width:24px;height:24px;font-size:10px}
.tix-bar{margin-top:10px}
.tix-foot{font-size:11px;margin-top:8px}
.tix-price{font-size:14.5px;margin-top:9px;padding-top:9px}
.tix-pay{gap:5px;margin-top:9px}
.tix-pay li{font-size:12px}
.tix-quotes{gap:6px;margin-top:9px}
.tix-quotes li{font-size:11.5px}
.mode-switch{margin-top:10px}
.mode-switch button{padding:6px 8px;font-size:11.5px}
.tix-edits{gap:5px;margin-top:10px}
.tix-edits li,.tix-edits s,.tix-edits em{font-size:11.5px}
.tix-tribe{margin-top:10px;padding-top:9px}
.tix-custom .tix-price{min-height:28px}
.tix-custom .tix-price>.p-listed,.tix-custom .tix-price>.p-ours{font-size:14.5px;top:9px}
.who-list{gap:6px;margin-top:14px;margin-bottom:16px}
.who-list li{font-size:12.8px}
.who-cta{padding:12px 15px;font-size:14px;border-radius:12px}
.who-flag{font-size:8.5px;padding:6px 10px;top:-12px}
.escapes .esc-foot{margin-top:clamp(22px,2.4vw,30px)}

/* ===========================================================================
   47. v22: real faces in avatars, a second phone in the download band
   Avatars use cropped photos (public/assets/face-*.jpg) instead of initials.
   The download band shows two phones: the group chat behind, trip mode in front.
   ======================================================================== */
.av.ph{padding:0;background:#1C2329;overflow:visible;position:relative}
.av.ph img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.dl-toast img.dl-face{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #9BCD75}

.dl-phone{left:calc(50% - 36px)!important;z-index:2}
.dl-phone.p2{left:calc(50% - 168px)!important;width:164px!important;z-index:1;
  transform:translateY(-44%) rotate(-7deg)!important;filter:saturate(.95);
  box-shadow:0 30px 50px -28px #0d2b4966!important}
.dl-toast.t1{left:-7%;top:40%}
.dl-toast.t2{right:-3%;bottom:7%}
.tix-avs .av.ph{width:28px;height:28px}
.tix-avs.sm .av.ph{width:27px;height:27px}
@media (max-width:520px){
  .dl-phone{width:150px!important;left:calc(50% - 22px)!important}
  .dl-phone.p2{width:136px!important;left:calc(50% - 142px)!important}
  .dl-toast.t1{left:0;top:38%}
  .dl-toast.t2{right:0;bottom:2%}
}
@media (max-width:520px){
  .tix-custom .tix-price{min-height:46px}
  .tix-custom .tix-price>span>span{display:block;margin:3px 0 0}
}

/* ===========================================================================
   48. v23 — hero: the small pieces keep moving
   The scroll parallax stays. On top of it the polaroids, the boarding pass,
   the sticker and the halo now drift on their own loops, so the hero is alive
   even when nobody scrolls. The arch photograph stays still on purpose.
   Uses the individual translate / rotate / scale properties, which compose
   with the existing scroll-driven transform instead of overwriting it.
   ======================================================================== */
.hero-group .photo-cutout.back{animation:hcFloatA 7.5s ease-in-out infinite}
.hero-group .photo-cutout.front{animation:hcFloatB 8.5s ease-in-out -2.5s infinite}
.hero-group .hero-pass{animation:hcPass 6.5s ease-in-out -1s infinite}
.hero-group .campaign-sticker{animation:hcSticker 9s ease-in-out infinite}
.hero-group .sun-disc{animation:hcHalo 6s ease-in-out infinite}
@keyframes hcFloatA{
  0%,100%{translate:0 0;rotate:0deg}
  25%{translate:-4px -10px;rotate:-2.4deg}
  50%{translate:2px -16px;rotate:.8deg}
  75%{translate:5px -6px;rotate:2.2deg}
}
@keyframes hcFloatB{
  0%,100%{translate:0 0;rotate:0deg}
  30%{translate:5px -12px;rotate:2.6deg}
  60%{translate:-3px -18px;rotate:-1.2deg}
  80%{translate:-5px -6px;rotate:-2.4deg}
}
@keyframes hcPass{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:6px -9px;rotate:1.6deg}
}
@keyframes hcSticker{
  0%,100%{rotate:0deg;scale:1}
  20%{rotate:-10deg;scale:1.05}
  45%{rotate:8deg;scale:.98}
  70%{rotate:-4deg;scale:1.04}
}
@keyframes hcHalo{0%,100%{scale:1;opacity:1}50%{scale:1.035;opacity:.82}}

/* a slow glint across each polaroid */
.hero-group .photo-cutout{overflow:hidden}
.hero-group .photo-cutout::after{
  content:"";position:absolute;inset:-20% auto -20% 0;width:45%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent,#ffffff59 50%,transparent);
  transform:translateX(-160%) skewX(-14deg);animation:hcGlint 7s ease-in-out infinite;
}
.hero-group .photo-cutout.front::after{animation-delay:3.5s}
@keyframes hcGlint{0%,62%{transform:translateX(-160%) skewX(-14deg)}84%,100%{transform:translateX(330%) skewX(-14deg)}}

@media (prefers-reduced-motion:reduce){
  .hero-group .photo-cutout,.hero-group .hero-pass,.hero-group .campaign-sticker,.hero-group .sun-disc,
  .hero-group .photo-cutout::after{animation:none}
}

/* ===========================================================================
   49. v24 — the Apple and Android marks hop along the "Apps coming soon" pill
   Apple leads, Android follows, left to right in small hops, then fade out.
   Absolutely positioned above the pill's top edge: no size or layout change.
   ======================================================================== */
.as-walk{position:absolute;left:22px;right:30px;top:-24px;height:24px;pointer-events:none;z-index:2}
.as-hopper{position:absolute;bottom:0;left:0;width:18px;height:24px;opacity:0;
  animation:asTravel 11s linear infinite}
.as-hopper.h-android{animation-delay:1s}
@keyframes asTravel{
  0%{left:0%;opacity:0;translate:-50% 0}
  4%{opacity:1}
  70%{opacity:1}
  76%{left:100%;opacity:0;translate:-50% 0}
  100%{left:100%;opacity:0}
}
.hp-body{position:absolute;left:0;right:0;bottom:1px;display:flex;justify-content:center;align-items:flex-end;
  transform-origin:50% 100%;filter:drop-shadow(0 2px 3px #000a);animation:hpHop .55s cubic-bezier(.3,0,.4,1) infinite}
.h-android .hp-body{animation-delay:-.27s}
.hp-body svg{display:block}
.hp-shadow{position:absolute;left:50%;bottom:-1px;width:12px;height:3px;margin-left:-6px;border-radius:50%;
  background:#000;opacity:.45;animation:hpShadow .55s cubic-bezier(.3,0,.4,1) infinite}
.h-android .hp-shadow{animation-delay:-.27s}
@keyframes hpHop{
  0%{translate:0 0;scale:1.18 .8}
  14%{translate:0 0;scale:.92 1.1}
  50%{translate:0 -11px;scale:1 1}
  86%{translate:0 0;scale:.96 1.05}
  100%{translate:0 0;scale:1.18 .8}
}
@keyframes hpShadow{0%,100%{scale:1.1;opacity:.45}50%{scale:.5;opacity:.18}}
@media (prefers-reduced-motion:reduce){.as-walk{display:none}}

/* ===========================================================================
   50. v23 — compaction: why, early access, the form, FAQ
   Same content, less air. The form now fits a 900px-tall laptop screen.
   ======================================================================== */
/* 04 why */
.reading{padding-top:58px!important;padding-bottom:56px!important}
.why-bento{margin-top:24px;gap:14px}
.wt{padding:16px 18px}
.wt h3{margin-top:10px;font-size:18px}
.wt p{margin-top:5px;font-size:13.5px;line-height:1.55}
.wt-art{max-height:104px}
.wt-built .wt-art{max-height:118px}
.reading-note{margin-top:24px!important;font-size:15px!important}

/* 05 early access */
.plan-photo{height:clamp(260px,29vw,430px)!important;background-position:50% 62%!important;margin-bottom:clamp(-96px,-6.6vw,-56px)!important}
.plan{padding-bottom:52px!important}
.plan-fine{margin-top:16px!important}
.plan h2{font-size:clamp(44px,4.4vw,60px)!important}

/* the form */
.registration{padding-top:56px!important;padding-bottom:56px!important}
.registration h2{font-size:clamp(44px,4.3vw,60px)!important;margin:20px 0!important}
.registration-benefits{margin-top:20px!important;gap:12px!important}
.registration-photo{margin-top:28px!important;max-width:360px}
.registration-photo img{height:150px!important}
.registration-card{padding:30px 36px!important}
.registration-card .form-eyebrow{margin-bottom:16px!important}
.registration-card h3{font-size:26px!important}
.registration-card label{margin-bottom:14px!important;gap:7px!important}
.registration-card input:not([type=checkbox]):not([type=radio]),.registration-card select{min-height:48px!important;height:48px;padding:12px 15px!important}
.registration-card button[type=submit]{padding:15px!important}

/* FAQ */
.faq{padding-top:48px!important;padding-bottom:48px!important}
.faq-side h2{font-size:clamp(38px,3.6vw,46px)!important;margin-top:16px!important}
.questions details{padding:17px 0!important}
.questions details:first-child{padding-top:0!important}
.questions details p{margin-top:10px!important}

@media (max-width:760px){
  .reading,.registration,.faq{padding-top:44px!important;padding-bottom:44px!important}
  .plan-photo{height:240px!important}
  .registration h2{font-size:40px!important}
  .registration-card{padding:24px 20px!important}
  .faq-side h2{font-size:36px!important}
}

/* ===========================================================================
   51. v25 — hero copy, centred logo tagline, a hand on the two CTAs,
   and the Founding 100 merch offer
   ======================================================================== */
/* the tagline sits centred under the wordmark (header and footer) */
.brand-tag{justify-content:center!important;padding-left:.12em;padding-right:0}

/* headline: "Got the wanderlust? Now wander along." */
.campaign-hero h1 em{white-space:nowrap;font-size:.86em}

/* "Now wander along." in the wordmark's colours: wander in blue, along in amber */
.campaign-hero h1 em{color:#fff}
.campaign-hero h1 em .h-wander{color:#60BAFA}
.campaign-hero h1 em .h-along{color:var(--amber)}

/* Founding 100 merch offer, in early access */
.merch-offer{
  display:flex;align-items:center;gap:16px;margin-top:22px;max-width:500px;
  padding:14px 18px 14px 14px;border-radius:18px;
  background:linear-gradient(135deg,#f7c6491f,#f7c64908);border:1px solid #f7c64966;
  box-shadow:0 18px 34px -24px #000;
}
.merch-art{position:relative;flex:none;width:86px;height:72px}
.merch-tee{position:absolute;left:0;top:2px;width:78px;height:70px;filter:drop-shadow(0 6px 8px #0007);
  animation:merchTee 5s ease-in-out infinite}
.merch-tee-mark{position:absolute;left:28px;top:26px;width:22px;height:auto;animation:merchTee 5s ease-in-out infinite}
.merch-patch{position:absolute;right:-2px;bottom:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:#13171A;border:2px solid var(--amber);
  box-shadow:0 0 0 3px #13171A,0 6px 12px #000a;animation:merchPatch 5s ease-in-out infinite}
.merch-patch img{width:20px;height:auto}
@keyframes merchTee{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3px;rotate:-2deg}}
@keyframes merchPatch{0%,100%{rotate:-8deg;scale:1}50%{rotate:10deg;scale:1.08}}
.mo-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.mo-kick{font:700 9.5px 'PlexMono','DM Sans',monospace;letter-spacing:.14em;color:var(--amber)}
.mo-copy b{font-size:16px;color:#fff;letter-spacing:-.2px}
.mo-copy>span:last-child{font-size:12.8px;line-height:1.5;color:#B8C6D2}
@media (prefers-reduced-motion:reduce){.merch-tee,.merch-tee-mark,.merch-patch{animation:none}}
@media (max-width:520px){.merch-offer{gap:12px;padding:12px}.merch-art{width:74px;height:64px}.merch-tee{width:68px;height:61px}.merch-tee-mark{left:24px;top:22px;width:19px}}

/* registration keeps its height with the fourth benefit */
.registration-photo img{height:128px!important}
/* a stamp on the boarding pass for the merch offer */
.pass{position:relative}
.pass-stamp{
  position:absolute;z-index:4;right:-46px;top:-54px;width:100px;height:100px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:var(--amber);color:#1B1406;rotate:-14deg;
  box-shadow:0 0 0 4px #13171A,0 0 0 5.5px #f7c64999,0 14px 24px -8px #000c;
  animation:stampIn 6s ease-in-out infinite;
}
.pass-stamp:before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed #1b140666}
.pass-stamp b{font:800 24px/1 'DM Sans',system-ui,sans-serif;letter-spacing:-.5px}
.pass-stamp small{font:700 8.4px/1.2 'PlexMono','DM Sans',monospace;letter-spacing:.12em}
@keyframes stampIn{0%,100%{scale:1;rotate:-14deg}50%{scale:1.06;rotate:-8deg}}
@media (max-width:760px){.pass-stamp{left:auto;right:8px;top:-36px;width:80px;height:80px}.pass-stamp b{font-size:19px}.pass-stamp small{font-size:6.6px}}
@media (prefers-reduced-motion:reduce){.pass-stamp{animation:none}}
@media (max-width:760px){.campaign-hero h1 em{white-space:normal}}
@media (max-width:420px){.campaign-hero h1{font-size:58px!important;letter-spacing:-2.6px!important}}

/* ===========================================================================
   52. v27 — quiet merch link in the nav, brand-coloured socials,
   a contact column, and a few hardening touches
   ======================================================================== */
.nav-offer{
  display:inline-flex;align-items:center;gap:7px;margin-right:14px;padding:7px 12px;border-radius:999px;
  font:600 12px 'DM Sans',system-ui,sans-serif;color:#B9C7D3;text-decoration:none;white-space:nowrap;
  border:1px solid #ffffff1c;background:#ffffff08;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.nav-offer svg{color:#d9b65e}
.nav-offer small{font:700 8.5px 'PlexMono','DM Sans',monospace;letter-spacing:.12em;color:#7F93A3;
  padding-left:8px;border-left:1px solid #ffffff1f}
.nav-offer:hover{color:#fff;border-color:#f7c64959}
.nav-merch-m{display:none!important}
@media (max-width:1240px){.nav-offer small{display:none}}
@media (max-width:1100px){.nav-offer{display:none}}
@media (max-width:760px){.nav.open .nav-merch-m{display:block!important;color:#d9b65e!important}}

/* socials in their real brand colours */
.foot-social a{width:40px;height:40px;padding:0;border:0;background:none;border-radius:11px;overflow:hidden;
  box-shadow:0 8px 18px -10px #000c}
.foot-social a svg{display:block;width:40px;height:40px}
.foot-social a:hover{background:none;transform:translateY(-2px);box-shadow:0 12px 22px -10px #000}

/* contact column: plain lines, not a button */
.foot-top{grid-template-columns:1.4fr .9fr .9fr 1fr 1.2fr}
.foot-contact .fc-line{display:flex;align-items:center;gap:9px;font-size:14px;color:#C8D7E3}
.foot-contact .fc-line svg{color:#7E9EB9;flex:none}
.foot-contact .fc-line:hover{transform:none;color:#fff}
@media (max-width:1100px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}}

/* images are not draggable out of the page */
img{-webkit-user-drag:none;user-select:none}

/* ===========================================================================
   53. v28 — email chooser, host switch link, and the host page (/host)
   ======================================================================== */
/* email chooser: a mailto plus Gmail, Outlook and copy, for computers with no mail app */
.email-pick{position:relative;display:inline-flex}
.email-pick>button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:inherit;font:inherit}
.email-pick>button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.foot-contact .email-pick>button{gap:9px;font-size:14px;color:#C8D7E3}
.foot-contact .email-pick>button svg{color:#7E9EB9}
.foot-legal .email-pick>button{color:#8FA8BC;font-size:13px}
.foot-legal .email-pick>button:hover,.foot-contact .email-pick>button:hover{color:#fff}
.faq-contact .email-pick>button{color:var(--blue);font-weight:700;font-size:14px;margin-top:10px;border-bottom:1px solid currentColor;padding-bottom:2px}
.ep-menu{position:absolute;z-index:40;left:0;bottom:calc(100% + 10px);min-width:210px;display:flex;flex-direction:column;padding:6px;
  border-radius:14px;background:#141C23;border:1px solid #ffffff1f;box-shadow:0 24px 50px -18px #000;animation:epIn .18s var(--ease)}
.faq-contact .ep-menu,.host-contact .ep-menu{top:calc(100% + 8px);bottom:auto}
.ep-menu a,.ep-menu button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font:500 13.5px 'DM Sans',system-ui,sans-serif;color:#DCE5EC;white-space:nowrap}
.ep-menu a:hover,.ep-menu button:hover,.ep-menu a:focus-visible,.ep-menu button:focus-visible{background:#ffffff12;color:#fff}
.ep-menu svg{color:var(--amber);flex:none}
@keyframes epIn{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* home form: the door to the host page */
.host-switch{display:flex;align-items:center;gap:12px;margin-top:18px;padding:13px 16px;border-radius:14px;text-decoration:none;
  background:#13171A0a;border:1px dashed #13171A33;color:#3D4A55;font-size:13px;line-height:1.45;transition:.25s var(--ease)}
.host-switch b{color:#13171A}
.host-switch>svg:first-child{flex:none;color:#2D6DA8}
.host-switch>svg:last-child{flex:none;margin-left:auto;transition:.25s var(--ease)}
.host-switch:hover{border-color:#13171A66;background:#13171A12}
.host-switch:hover>svg:last-child{translate:4px 0}

/* ---- host page (v29: shorter, clearer, animated) ---- */
.host-page{background:#081119}
.host-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;
  padding:clamp(124px,13vw,150px) 7% clamp(56px,6vw,80px);color:#fff;overflow:hidden;
  background:radial-gradient(900px 500px at 85% 40%,#1d344766,transparent 70%),radial-gradient(700px 400px at 10% 100%,#f7c6491a,transparent 70%),#081119}
.hh-copy .eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1.6px;color:#E0E7EE;font-weight:700}
.hh-copy .tiny-line{display:inline-block;width:26px;height:1px;background:var(--amber)}
.hh-copy h1{font-size:clamp(44px,5vw,74px);line-height:1.02;letter-spacing:-2.6px;margin:20px 0 0}
.hh-copy h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-1.6px;color:var(--amber)}
.hh-copy>p{font-size:17px;line-height:1.6;color:#C6D4E0;max-width:470px;margin:18px 0 0}
.hh-gains{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:600px}
.hh-gains li{display:flex;align-items:center;gap:11px;padding:12px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff17;
  opacity:0;animation:hgIn .6s var(--ease) forwards}
.hg-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--amber);color:#13171A}
.hh-gains b{display:block;font-size:13.5px;letter-spacing:-.2px}
.hh-gains small{display:block;font-size:11.5px;color:#9FB2C1;margin-top:2px;line-height:1.3}
@keyframes hgIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.hh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.hh-actions .button{gap:10px;border-radius:14px;padding:17px 24px;font-size:16px}
.hh-ghost{display:inline-flex;align-items:center;gap:8px;color:#DCE5EC;text-decoration:none;font-weight:600;font-size:15px}
.hh-ghost:hover{color:#fff}

/* the animated trip: seats fill up while you watch */
@property --sc-n{syntax:'<integer>';initial-value:6;inherits:false}
.hh-visual{position:relative;height:430px;display:grid;place-items:center}
.seat-card{position:relative;width:min(400px,92%);padding:22px;border-radius:24px;background:#121A21;border:1px solid #ffffff17;
  box-shadow:0 30px 60px -28px #000;rotate:-2deg}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sc-top b{display:block;font-size:18px;letter-spacing:-.3px}
.sc-top small{display:block;color:#8FA2B1;font-size:12.5px;margin-top:4px}
.sc-live{font:700 9.5px 'PlexMono',monospace;letter-spacing:.14em;color:#0E1113;background:var(--lime);padding:4px 8px;border-radius:999px}
.sc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px}
.seat{position:relative;aspect-ratio:1;border-radius:14px;border:1.5px dashed #ffffff2b;background:#ffffff06;overflow:hidden}
.seat img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:11px;object-fit:cover}
.seat.booked{border:1.5px solid #ffffff1f}
.seat.fills img{opacity:0;scale:.6;animation:seatFill 9s var(--ease) infinite}
.seat.fills{animation:seatRing 9s var(--ease) infinite}
.seat.fills:nth-child(8),.seat.fills:nth-child(8) img{animation-delay:1.1s}
.seat.fills:nth-child(9),.seat.fills:nth-child(9) img{animation-delay:2.2s}
@keyframes seatFill{0%,8%{opacity:0;scale:.6}14%,88%{opacity:1;scale:1}95%,100%{opacity:0;scale:.6}}
@keyframes seatRing{0%,8%{border-color:#ffffff2b;box-shadow:none}12%{border-color:var(--amber);box-shadow:0 0 0 4px #f7c64933}24%,88%{border-color:#ffffff1f;box-shadow:none}100%{border-color:#ffffff2b}}
.sc-bar{height:6px;border-radius:6px;background:#ffffff14;margin-top:18px;overflow:hidden}
.sc-bar i{display:block;height:100%;width:50%;border-radius:6px;background:linear-gradient(90deg,var(--amber),var(--amber-hi));animation:scBar 9s var(--ease) infinite}
@keyframes scBar{0%,8%{width:50%}14%,20%{width:58.3%}26%,32%{width:66.6%}38%,88%{width:75%}100%{width:50%}}
.sc-foot{display:flex;justify-content:space-between;margin-top:10px;font-size:12.5px;color:#9FB2C1}
.sc-count{color:#fff;font-size:15px;animation:scCount 9s steps(1) infinite;counter-reset:n var(--sc-n)}
.sc-count:before{content:counter(n)}
@keyframes scCount{0%{--sc-n:6}14%{--sc-n:7}26%{--sc-n:8}38%{--sc-n:9}96%{--sc-n:6}}
.sc-up{color:var(--lime);font-weight:700}
.sc-pop{position:absolute;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 11px;border-radius:16px;
  background:#ffffffee;color:#4C5450;font-size:12px;box-shadow:0 20px 40px -20px #000;opacity:0}
.sc-pop img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--lime)}
.sc-pop span:last-child{display:flex;flex-direction:column;line-height:1.35}
.sc-pop b{color:#13171A;font-size:13px}
.sc-pop-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#13171A;color:var(--amber)}
.sc-pop-a{left:0;bottom:30px;animation:scPop 9s var(--ease) 1.4s infinite}
.sc-pop-b{right:0;top:22px;animation:scPop 9s var(--ease) 4.6s infinite}
@keyframes scPop{0%{opacity:0;translate:0 12px}6%,40%{opacity:1;translate:0 0}48%,100%{opacity:0;translate:0 -6px}}

/* five steps: one track, one line each, lit in turn */
.host-steps{background:linear-gradient(180deg,#0B1A28,#081119);color:#fff;padding:clamp(56px,6vw,80px) 7% clamp(60px,6.5vw,86px);scroll-margin-top:60px}
.hs-head{text-align:center}
.hs-head .eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#9FB2C1}
.hs-head h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-1.5px;margin:12px 0 0}
.hs-head h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--amber)}
.hs-track{position:relative;list-style:none;margin:46px auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hs-line{position:absolute;left:10%;right:10%;top:38px;height:3px;border-radius:3px;background:#ffffff14;overflow:hidden}
.hs-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber-hi));animation:hsLine 10s linear infinite}
@keyframes hsLine{0%{width:0}80%,100%{width:100%}}
.hs-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
.hs-badge{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:24px;background:#13202C;border:1.5px solid #ffffff1f;
  color:#C9D6E0;animation:hsLit 10s var(--ease) infinite;animation-delay:calc(var(--i) * 2s - .2s)}
.hs-badge em{position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:800 11.5px 'DM Sans',sans-serif;font-style:normal;background:#081119;border:1.5px solid var(--amber);color:var(--amber)}
@keyframes hsLit{0%{background:#13202C;color:#C9D6E0;border-color:#ffffff1f;scale:1}
  4%{background:var(--amber);color:#13171A;border-color:var(--amber);scale:1.12;box-shadow:0 0 0 8px #f7c6491f}
  12%{scale:1;box-shadow:0 0 0 0 #f7c64900}
  16%,100%{background:#1d2a36;color:var(--amber);border-color:#f7c64966;scale:1}}
.hs-step b{margin-top:16px;font-size:16.5px;letter-spacing:-.3px}
.hs-step small{margin-top:5px;font-size:13px;line-height:1.45;color:#A8B9C6;max-width:170px}
.hs-tag{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:5px 9px;border-radius:999px;background:#f7c6491f;border:1px solid #f7c64966;
  color:var(--amber);font:700 10.5px 'DM Sans',sans-serif}
.hs-step:hover .hs-badge{translate:0 -3px}

.host-reg{scroll-margin-top:60px}
.host-reg .registration-copy h2 em{color:var(--amber)}
.host-contact{display:flex;flex-direction:column;gap:9px;margin-top:26px;padding-top:20px;border-top:1px solid #ffffff1a}
.host-contact>.hc-label{font:700 9.5px 'PlexMono',monospace;letter-spacing:.14em;color:#8FA2B1}
.host-contact .hc-line,.host-contact .email-pick>button{display:inline-flex;align-items:center;gap:9px;color:#E3EBF1;font-size:15px;text-decoration:none}
.host-contact .hc-line:hover,.host-contact .email-pick>button:hover{color:var(--amber)}
.host-faq{scroll-margin-top:60px}

/* form messages are errors: show them in red */
.form-status:not(:empty){color:#C2362B!important;background:#c2362b12;border:1px solid #c2362b40;border-radius:10px;padding:10px 12px;font-weight:600;font-size:13.5px}

@media (max-width:1100px){
  .host-hero{grid-template-columns:1fr}
  .hh-visual{max-width:520px;width:100%;justify-self:center}
  .hs-track{grid-template-columns:1fr;gap:14px;max-width:460px}
  .hs-line{left:38px;right:auto;top:20px;bottom:20px;width:3px;height:auto}
  .hs-line i{width:100%!important;height:0;animation-name:hsLineV}
  @keyframes hsLineV{0%{height:0}80%,100%{height:100%}}
  .hs-step{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:4px 16px;padding:0}
  .hs-badge{width:76px;height:76px;flex:none;grid-row:span 2}
  .hs-step b{margin:0;flex:1}
  .hs-step{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:2px}
  .hs-step small{margin:0;max-width:none;grid-column:2}
  .hs-tag{grid-column:2;justify-self:start;margin-top:6px}
  .hs-badge{grid-row:1 / span 3}
}
@media (max-width:620px){
  .hh-gains{grid-template-columns:1fr}
  .hh-visual{height:400px}
  .host-reg .form-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hh-gains li{animation:none;opacity:1}
  .seat.fills img{animation:none;opacity:1;scale:1}.seat.fills,.sc-bar i,.sc-count,.hs-line i,.hs-badge{animation:none}
  .sc-pop{animation:none;opacity:1}.hs-line i{width:100%}
}
.hs-head .eyebrow{display:flex;justify-content:center}
@media (max-width:620px){.hh-visual{height:370px}}

/* ===========================================================================
   54. v30 — host page: "why we are different", and a photo in the hero
   ======================================================================== */
.sc-photo{position:absolute;left:0;top:40px;margin:0;width:150px;padding:7px 7px 9px;background:#F7F4EC;border-radius:6px;rotate:-9deg;
  box-shadow:0 18px 34px -16px #000;z-index:0;animation:hmFloat 8s ease-in-out infinite}
.sc-photo img{display:block;width:100%;height:118px;object-fit:cover;object-position:50% 70%;border-radius:3px}
.sc-photo figcaption{font:italic 12.5px Georgia,serif;color:#33404A;text-align:center;margin-top:6px}
.seat-card{z-index:1;justify-self:end}
.sc-pop{z-index:2}

@media (max-width:620px){
  .sc-photo{width:104px;top:0;padding:5px 5px 7px}.sc-photo img{height:78px}.sc-photo figcaption{font-size:10.5px}
  .hh-visual{height:460px}.seat-card{align-self:end;margin-bottom:62px}.sc-pop-a{bottom:0}
}
@media (prefers-reduced-motion:reduce){.sc-photo,.hd-hold{animation:none}.hd-date{animation:none;opacity:1}}

/* ===========================================================================
   55. v31 — Instagram mark drawn with a CSS gradient (identical on every page)
   ======================================================================== */
.ig-svg{border-radius:11px;background:
  radial-gradient(circle at 30% 107%,#FFDD55 0%,#FFDD55 8%,#FF543E 45%,#C837AB 75%,#6B2FD6 100%)}

/* ===========================================================================
   56. v31 — "Why WanderAlong is different", made the standout of the host page
   Dark band with a warm glow, a big centred headline, and four cards. Each card
   shows what hosts usually get (struck through) and what they get here. Cards
   reveal in turn as the section scrolls in; the visual keeps moving.
   ======================================================================== */
.host-diff{position:relative;overflow:hidden;isolation:isolate;padding:clamp(64px,7vw,104px) 7%;color:#fff;scroll-margin-top:60px;
  background:linear-gradient(180deg,#0A1622 0%,#0E1F2E 55%,#0A1622 100%)}
.hd-glow{position:absolute;z-index:-1;inset:-20% -10% auto auto;width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle,#f7c64930,#f7c64910 40%,transparent 68%);animation:hdGlow 9s ease-in-out infinite}
@keyframes hdGlow{0%,100%{translate:0 0;scale:1}50%{translate:-80px 60px;scale:1.12}}
.hd-head{text-align:center;max-width:860px;margin:0 auto}
.hd-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #f7c64966;background:#f7c64914;
  color:var(--amber);font:700 10.5px 'PlexMono','DM Sans',monospace;letter-spacing:.14em}
.hd-head h2{font-size:clamp(38px,4.6vw,64px);line-height:1.04;letter-spacing:-2.2px;margin:18px 0 0}
.hd-head h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--amber);letter-spacing:-1.4px}
.hd-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,72px);align-items:center;margin-top:clamp(36px,4vw,56px)}

.hd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hd-list li{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,#ffffff12,#ffffff05);border:1px solid #ffffff1c;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  animation:hdCardIn .7s var(--ease) both;animation-delay:calc(var(--i) * .14s)}
.hd-list li:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,#f7c64924 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;
  animation:hdSheen 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s + 1s)}
.hd-list li:hover{transform:translateY(-5px);border-color:#f7c64980;box-shadow:0 24px 44px -24px #000,0 0 0 1px #f7c64933}
@keyframes hdCardIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes hdSheen{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
.hd-ic{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--amber);color:#13171A}
.hd-ic:after{content:"";position:absolute;inset:-5px;border-radius:18px;border:2px solid var(--amber);opacity:0;
  animation:hdPing 3.2s ease-out infinite;animation-delay:calc(var(--i) * .8s)}
@keyframes hdPing{0%{opacity:.7;scale:.9}70%,100%{opacity:0;scale:1.35}}
.hd-list li:hover .hd-ic{rotate:-8deg;scale:1.06;transition:.3s var(--ease)}
.hd-tx{display:flex;flex-direction:column}
.hd-usual{position:relative;align-self:flex-start;text-decoration:none;font:600 11.5px 'DM Sans',sans-serif;color:#8193A2;padding:2px 0;margin-bottom:6px}
.hd-usual:before{content:"Usually: ";color:#5F7180}
.hd-usual:after{content:"";position:absolute;left:0;top:50%;height:1.5px;width:0;background:#E2665B;
  animation:hdStrike .6s var(--ease) forwards;animation-delay:calc(var(--i) * .14s + .7s)}
@keyframes hdStrike{to{width:100%}}
.hd-tx b{font-size:17px;letter-spacing:-.3px}
.hd-tx small{font-size:13.5px;line-height:1.55;color:#B4C3CF;margin-top:5px}

/* visual */
.hd-visual{position:relative;height:440px;max-width:460px;width:100%;justify-self:center}
.hd-photo{position:absolute;left:0;top:0;width:80%;height:350px;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -26px #000;border:1px solid #ffffff1c}
.hd-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 75%;animation:hdZoom 16s ease-in-out infinite alternate}
@keyframes hdZoom{from{scale:1}to{scale:1.12;translate:-2% -2%}}
.hd-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 50%,#000a)}
.hd-chip{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:7px;font:700 9.5px 'PlexMono',monospace;letter-spacing:.12em;color:#fff;
  background:#13171Acc;padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.hd-chip i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #9bcd75aa;animation:asPulse 2s ease-out infinite}
.hd-hold{position:absolute;right:-4%;top:184px;z-index:2;display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:18px;
  background:#fff;color:#13171A;box-shadow:0 26px 46px -20px #000;animation:hmFloat 7s ease-in-out infinite}
.hd-hold-ic{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#13171A;color:var(--amber)}
.hd-hold-tx b{display:block;font-size:14px}
.hd-hold-tx small{display:block;font-size:12px;color:#66707A;margin-top:1px}
.hd-avs{display:flex;margin-top:7px}
.hd-avs img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-right:-7px;opacity:0;scale:.5;
  animation:hdAv 7s var(--ease) infinite}
@keyframes hdAv{0%{opacity:0;scale:.5}6%,88%{opacity:1;scale:1}96%,100%{opacity:0;scale:.5}}
.hd-ok{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font:700 10.5px 'DM Sans',sans-serif;color:#2F7A2A;background:#9bcd7540;
  padding:4px 8px;border-radius:999px;animation:hdOk 7s var(--ease) infinite}
@keyframes hdOk{0%,24%{opacity:0;scale:.6}30%{opacity:1;scale:1.15}36%,88%{opacity:1;scale:1}96%,100%{opacity:0;scale:.6}}
.hd-dates{position:absolute;left:6%;bottom:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:94%;padding:13px 15px;border-radius:18px;
  background:#13171A;border:1px solid #ffffff1f;color:#fff;box-shadow:0 26px 46px -20px #000}

/* reveal as the section scrolls in, where the browser supports it */
@supports (animation-timeline: view()){
  .hd-list li{animation-timeline:view();animation-range:entry 0% cover 30%;animation-delay:0s}
  .hd-usual:after{animation-timeline:view();animation-range:entry 20% cover 40%;animation-delay:0s}
}

@media (max-width:1100px){
  .hd-body{grid-template-columns:1fr}
  .hd-visual{order:2}
}
@media (max-width:620px){
  .hd-list{grid-template-columns:1fr}
  .hd-visual{height:410px}
  .hd-photo{width:88%;height:300px}
  .hd-hold{top:160px;right:0}
  .hd-glow{width:480px;height:480px}
}
@media (prefers-reduced-motion:reduce){
  .hd-glow,.hd-photo img,.hd-list li:after,.hd-ic:after,.hd-hold{animation:none}
  .hd-list li{animation:none}
  .hd-usual:after{animation:none;width:100%}
  .hd-avs img,.hd-ok{animation:none;opacity:1;scale:1}
}
.hd-dates-t{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;margin-right:4px;color:var(--amber)}
.hd-date{font:700 12px 'DM Sans',sans-serif;padding:6px 10px;border-radius:10px;background:#ffffff14;border:1px solid #ffffff1f;color:#fff;
  opacity:0;animation:hdDate 8s var(--ease) infinite}
.hd-date.d1{animation-delay:.4s}.hd-date.d2{animation-delay:1.4s}.hd-date.d3{animation-delay:2.4s}
@keyframes hdDate{0%{opacity:0;scale:.7}6%{opacity:1;scale:1.08;background:var(--amber);color:#13171A}12%,85%{opacity:1;scale:1;background:#ffffff14;color:#fff}95%,100%{opacity:0;scale:.9}}
@keyframes hdOk{0%,10%{opacity:0;scale:.6}16%{opacity:1;scale:1.15}22%,90%{opacity:1;scale:1}97%,100%{opacity:0;scale:.6}}
.hd-usual{font-size:12px;color:#A3B2BE}
.hd-usual:before{color:#7D8E9C}
@media (prefers-reduced-motion:reduce){.hd-date{animation:none;opacity:1}}
@media (max-width:620px){.hd-head h2{font-size:33px;letter-spacing:-1.2px}}

/* ===========================================================================
   57. v32 — socials marked "coming soon" (accounts not live yet)
   ======================================================================== */
.foot-social.soon{display:flex;align-items:center;gap:14px;margin-top:20px}
.fs-icons{display:flex;gap:8px;flex:none}
.fs-ic{display:block;width:40px;height:40px;border-radius:11px;overflow:hidden;box-shadow:0 8px 18px -10px #000c;opacity:.92}
.fs-ic svg{display:block;width:40px;height:40px}
.foot-social .fs-text{display:flex;flex-direction:column;gap:2px;font:400 12.5px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:0;color:#8FA2B1;margin:0}
.fs-text b{font-weight:700;font-size:13.5px;color:#DCE6EF}
.fs-text em{align-self:flex-start;margin-top:5px;font:700 9px 'PlexMono','DM Sans',monospace;font-style:normal;letter-spacing:.14em;
  color:var(--amber);padding:3px 8px;border-radius:999px;border:1px solid #f7c64966;background:#f7c64912}

/* ===========================================================================
   58. v33 — "Now WanderAlong." capitalised like the logo, the two words set close
   ======================================================================== */
.campaign-hero h1 em .h-along{margin-left:.1em}

/* ===========================================================================
   59. v34 — every way to travel, as a short static list under the headline
   (replaced the v33 rotator). Small text, no animation.
   ======================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-ways{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:7px;max-width:560px}
.hero-ways li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;color:#B9C8D4}
.hero-ways b{color:#fff;font-weight:700}
.hw-ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#f7c6491a;border:1px solid #f7c6494d;color:var(--amber)}
.hw-ic svg{width:13px;height:13px}
.hero-reasons{gap:10px 16px}
@media (max-width:760px){
  .hero-ways{gap:9px}
  .hero-ways li{font-size:13px;align-items:flex-start}
  .hw-ic{margin-top:1px}
}
.hero-ways{margin-top:16px;gap:5px}
.hero-ways li{font-size:13.5px}
.campaign-hero .hero-reasons{margin-top:16px}
/* nav: keep each link on one line now that "For hosts" is in it */
.header .nav a{white-space:nowrap}
@media (max-width:1360px){.nav-offer{display:none}.header .nav{gap:22px}}
@media (max-width:1180px){.header .nav{gap:16px}.header .nav a{font-size:13.5px}}
.header .nav-join{white-space:nowrap}
@media (min-width:761px) and (max-width:1000px){.header .nav a:first-child{display:none}.header .nav{gap:13px}.header .nav a{font-size:13px}}
/* 761-850px: the links were hidden with no menu button; show the menu there too */
@media (min-width:761px) and (max-width:850px){
  .header .menu{display:block;background:none;color:#fff;padding:4px;border:0;cursor:pointer}
  .header .nav.open{display:flex;position:absolute;top:100px;left:0;right:0;flex-direction:column;padding:25px;gap:22px;background:#081119}
  .header .nav.open a:first-child{display:block}
}

/* ===========================================================================
   60. v35 — hero: one row of five tags, the answer appears on hover or tap
   (replaces the five-line list and the four small points)
   ======================================================================== */
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:600px}
.ht{all:unset;position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 7px;border-radius:999px;
  font:600 13px 'DM Sans',system-ui,sans-serif;color:#DCE6EF;background:#ffffff0d;border:1px solid #ffffff21;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.ht-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f7c6491f;color:var(--amber)}
.ht-ic svg{width:12px;height:12px}
.ht:hover,.ht.open,.ht:focus-visible{background:#f7c6491a;border-color:#f7c64980;color:#fff}
.ht:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ht-tip{position:absolute;z-index:20;left:0;bottom:calc(100% + 10px);width:max-content;max-width:260px;white-space:normal;
  padding:10px 12px;border-radius:12px;background:#F7F4EC;color:#13171A;font:500 12.5px/1.45 'DM Sans',system-ui,sans-serif;
  box-shadow:0 18px 34px -16px #000;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .2s var(--ease),translate .2s var(--ease)}
.ht-tip:after{content:"";position:absolute;left:18px;bottom:-5px;width:10px;height:10px;background:#F7F4EC;rotate:45deg}
.ht.right .ht-tip{left:auto;right:0}.ht.right .ht-tip:after{left:auto;right:18px}
.ht:hover .ht-tip,.ht.open .ht-tip,.ht:focus-visible .ht-tip{opacity:1;translate:0 0}
@media (hover:none){.ht:hover:not(.open) .ht-tip{opacity:0}}
@media (max-width:760px){.hero-tags{gap:7px}.ht{font-size:12.5px}.ht-tip{max-width:230px}}
.hero-tags{max-width:none;gap:6px}
.ht{padding:6px 11px 6px 6px;font-size:12.5px;gap:6px}
@media (max-width:1180px){.hero-tags{flex-wrap:wrap}}
/* phones: the answer opens above the whole row, full width, so it never runs off-screen */
@media (max-width:760px){
  .hero-tags{position:relative}
  .ht{position:static}
  .ht-tip,.ht.right .ht-tip{left:0;right:0;max-width:none;width:auto}
  .ht-tip:after{display:none}
}
/* all sizes: the answer opens above the start of the row, so it is never cut off when the row wraps */
.hero-tags{position:relative}
.ht{position:static}
.ht-tip,.ht.right .ht-tip{left:0;right:auto;width:max-content;max-width:min(420px,100%)}
.ht-tip:after{display:none}
@media (max-width:760px){.ht-tip,.ht.right .ht-tip{right:0;width:auto;max-width:none}}

/* ===========================================================================
   61. v36 — hero: four ways, a hand-drawn brace, and "We've got you."
   (replaces the v35 tags). The brace and arrow draw in once on load.
   ======================================================================== */
.hero-brace{display:flex;align-items:center;gap:6px;margin-top:22px;width:fit-content;max-width:100%}
.hb-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.hb-list li{font:600 15px/1.5 'DM Sans',system-ui,sans-serif;color:#E3EBF1;white-space:nowrap;opacity:0;animation:hbIn .5s var(--ease) forwards}
.hb-list li:nth-child(1){animation-delay:.15s}.hb-list li:nth-child(2){animation-delay:.27s}
.hb-list li:nth-child(3){animation-delay:.39s}.hb-list li:nth-child(4){animation-delay:.51s}
@keyframes hbIn{from{opacity:0;translate:-8px 0}to{opacity:1;translate:0 0}}
.hb-svg{flex:none;width:118px;height:104px;overflow:visible}
.hb-svg path{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hb-brace{stroke-dasharray:160;stroke-dashoffset:160;animation:hbDraw .8s var(--ease) .7s forwards}
.hb-arrow{stroke-dasharray:80;stroke-dashoffset:80;animation:hbDraw .5s var(--ease) 1.4s forwards}
.hb-head{stroke-dasharray:30;stroke-dashoffset:30;animation:hbDraw .25s var(--ease) 1.85s forwards}
@keyframes hbDraw{to{stroke-dashoffset:0}}
.hb-got{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(24px,2.3vw,32px);color:var(--amber);white-space:nowrap;
  letter-spacing:-.5px;opacity:0;animation:hbIn .5s var(--ease) 2s forwards}
@media (max-width:760px){
  .hero-brace{gap:4px}
  .hb-list li{font-size:13.5px}
  .hb-svg{width:78px;height:90px}
  .hb-got{font-size:21px}
}
@media (max-width:380px){.hb-svg{width:60px}.hb-got{font-size:19px}}
@media (prefers-reduced-motion:reduce){
  .hb-list li,.hb-got{animation:none;opacity:1}
  .hb-brace,.hb-arrow,.hb-head{animation:none;stroke-dashoffset:0}
}

/* ===========================================================================
   62. v37 — the brace, livelier: coloured icon per way, a gold spark that runs
   along the brace into the arrow every few seconds, a swash under "We've got you."
   ======================================================================== */
.hero-brace{gap:4px;margin-top:20px}
.hb-list{gap:5px}
.hb-list li{display:flex;align-items:center;gap:9px;font:700 15px/1 'DM Sans',system-ui,sans-serif;color:#fff;letter-spacing:-.1px}
.hb-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;flex:none;
  background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);color:var(--c);
  animation:hbIcon 4.8s ease-in-out 2.4s infinite}
.hb-list li:nth-child(1) .hb-ic{animation-delay:2.4s}
.hb-list li:nth-child(2) .hb-ic{animation-delay:2.55s}
.hb-list li:nth-child(3) .hb-ic{animation-delay:2.7s}
.hb-list li:nth-child(4) .hb-ic{animation-delay:2.85s}
@keyframes hbIcon{0%,100%{scale:1;box-shadow:0 0 0 0 transparent}6%{scale:1.14;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}14%{scale:1;box-shadow:0 0 0 0 transparent}}
.hb-svg{width:104px;height:116px}
.hb-spark{fill:#FFE7A3;filter:drop-shadow(0 0 4px #F7C649) drop-shadow(0 0 8px #F7C649aa);opacity:0;animation:hbSparkOn 0s 2.4s forwards}
@keyframes hbSparkOn{to{opacity:1}}
.hb-got{position:relative;display:inline-flex;align-items:center;padding:8px 26px 12px 14px;margin-left:2px;border-radius:16px;
  background:linear-gradient(135deg,#f7c6491f,#f7c64908);border:1px solid #f7c64959;
  font-size:clamp(23px,2.1vw,30px);animation:hbIn .5s var(--ease) 2s forwards,hbGot 4.8s ease-in-out 2.4s infinite}
@keyframes hbGot{0%,30%,100%{box-shadow:0 0 0 0 #f7c64900}36%{box-shadow:0 0 0 6px #f7c64926}46%{box-shadow:0 0 0 0 #f7c64900}}
.hb-swash{position:absolute;left:14px;right:24px;bottom:5px;height:10px;width:auto;overflow:visible}
.hb-swash path{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:220;stroke-dashoffset:220;animation:hbDraw .6s var(--ease) 2.3s forwards}
.hb-sparkle{position:absolute;right:6px;top:4px;color:var(--amber);opacity:0;animation:hbSpk 4.8s ease-in-out 2.4s infinite}
@keyframes hbSpk{0%,30%{opacity:0;scale:.4;rotate:0deg}38%{opacity:1;scale:1.1;rotate:20deg}60%{opacity:.85;scale:1}80%,100%{opacity:0;scale:.6}}
@media (max-width:760px){
  .hb-list li{font-size:13.5px;gap:7px}
  .hb-ic{width:22px;height:22px;border-radius:7px}
  .hb-ic svg{width:12px;height:12px}
  .hb-svg{width:58px;height:104px}
  .hb-got{font-size:18px;padding:6px 20px 10px 10px;border-radius:12px}
  .hb-swash{left:10px;right:18px;bottom:4px}
  .hb-sparkle{width:13px;height:13px;right:4px;top:2px}
}
@media (max-width:380px){.hb-svg{width:44px}.hb-got{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  .hb-spark,.hb-sparkle{display:none}
  .hb-ic,.hb-got{animation:none}.hb-got{opacity:1}
  .hb-swash path{animation:none;stroke-dashoffset:0}
}
.hb-swash{width:calc(100% - 38px)}
@media (max-width:760px){.hb-swash{width:calc(100% - 28px)}}