/* Ferroni Traveling — site stylesheet */
.ft{
  --navy:#263163; --navy-deep:#161C3D; --navy-ink:#1C2348;
  --green:#568B33; --green-ink:#3F6C22; --yellow:#F9D11B; --red:#E2381F;
  --g0:#FFFFFF; --g1:#FAFAF8; --g2:#F2F3F4; --g3:#E4E6E9; --g4:#C8CCD3; --g6:#5A6072; --g8:#2A2F40; --ink:#171B2B;
  --serif:'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
  --ease:cubic-bezier(.22,.8,.18,1);
  container: site / inline-size;
  font-family:var(--sans); color:var(--ink); background:var(--g1);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; overflow-x:clip;
}
.ft *{box-sizing:border-box}
.ft img{display:block; max-width:100%}
.ft a{text-decoration:none}
.ft a:where(:not(.nav-link,.board-cta,.btn,.link-arrow,.gal-item,.pk-btn)){color:inherit}
.ft button{font:inherit; cursor:pointer}
.ft h1,.ft h2,.ft h3,.ft h4,.ft p{margin:0}
.wrap{width:100%; max-width:1320px; margin:0 auto; padding:0 56px}

/* ---------- type ---------- */
.eyebrow{font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:600; color:var(--green-ink); display:flex; align-items:center; gap:14px}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
.eyebrow.light{color:#E9EDD9}
.display{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.02}
.display em{font-style:italic; color:var(--green)}
.h-xl{font-size:clamp(46px, 7.2cqi, 108px)}
.h-lg{font-size:clamp(38px, 4.6cqi, 68px); line-height:1.06}
.h-md{font-size:clamp(28px, 2.8cqi, 40px); line-height:1.12}
.lead{font-size:18px; line-height:1.75; color:var(--g6); font-weight:400; max-width:56ch; text-wrap:pretty}
.muted{color:var(--g6)}
.num{font-family:var(--serif); font-style:italic; color:var(--green); font-size:22px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 30px; border-radius:999px; border:1px solid transparent; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); position:relative; overflow:hidden; white-space:nowrap}
.btn svg{transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary::after{content:""; position:absolute; inset:0; background:var(--green); transform:translateY(101%); transition:transform .6s var(--ease); z-index:0}
.btn-primary:hover::after{transform:translateY(0)}
.btn > *{position:relative; z-index:1}
.btn-ghost-light{border-color:rgba(255,255,255,.55); color:#fff; backdrop-filter:blur(6px); background:rgba(255,255,255,.06)}
.btn-ghost-light:hover{background:#fff; color:var(--navy)}
.btn-ghost{border-color:var(--g4); color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy); background:var(--navy); color:#fff}
.btn-wa{background:var(--green); color:#fff}
.btn-wa:hover{background:var(--green-ink)}
.link-arrow{display:inline-flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--navy); padding:8px 0; background:linear-gradient(currentColor,currentColor) 0 100%/0% 1px no-repeat; transition:background-size .6s var(--ease)}
.link-arrow:hover{background-size:100% 1px}
.link-arrow svg{transition:transform .5s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(250,250,248,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid rgba(23,27,43,.06)}
.hdr-row{display:flex; align-items:center; justify-content:space-between; gap:24px; height:104px}
.hdr-logo{display:flex; align-items:center; background:none; border:0; padding:0}
.hdr-logo img{height:68px; width:auto; transition:transform .6s var(--ease)}
.hdr-logo:hover img{transform:scale(1.03)}
.nav{display:flex; align-items:center; gap:34px}
.nav-link{background:none; border:0; padding:10px 0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--g8); position:relative}
.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--green); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1); transform-origin:left}
.nav-link.is-active{color:var(--navy); font-weight:600}
.hdr-actions{display:flex; align-items:center; gap:16px}
.lang{display:flex; border:1px solid var(--g3); border-radius:999px; padding:3px; background:#fff}
.lang button{border:0; background:transparent; min-width:44px; height:34px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--g6); transition:all .4s var(--ease)}
.lang button.is-on{background:var(--navy); color:#fff}
.hdr-cta{min-height:44px; padding:0 22px}
.burger{display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--g3); background:#fff; align-items:center; justify-content:center; color:var(--navy)}
.mnav{display:none}

/* ---------- page transition ---------- */
.page{animation:pageIn .9s var(--ease) both}
@keyframes pageIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* ---------- hero ---------- */
.hero{position:relative; min-height:760px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--navy-deep)}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; animation:kenburns 22s var(--ease) both}
@keyframes kenburns{from{transform:scale(1.16) translateY(-1.5%)} to{transform:scale(1.02)}}
.hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,28,61,.35) 0%, rgba(22,28,61,.05) 35%, rgba(22,28,61,.72) 100%)}
.hero-topo{position:absolute; inset:0; background:url(../img/topo-white.png) center/1100px auto repeat; opacity:.07; mix-blend-mode:screen}
.hero-inner{position:relative; width:100%; padding-bottom:150px; padding-top:140px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:64px; align-items:end}
.hero h1{margin-top:28px}
.line{display:block; overflow:hidden; padding-bottom:.06em}
.line > span{display:block; animation:lineUp 1.3s var(--ease) both}
.line:nth-child(2) > span{animation-delay:.12s}
.line:nth-child(3) > span{animation-delay:.24s}
@keyframes lineUp{from{transform:translateY(105%)} to{transform:none}}
.fade-in{animation:fadeUp 1.2s var(--ease) .5s both}
.fade-in.d2{animation-delay:.7s}
.fade-in.d3{animation-delay:.9s}
@keyframes fadeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.hero-sub{font-size:17px; line-height:1.75; color:rgba(255,255,255,.86); max-width:44ch}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.scroll-cue{position:absolute; left:56px; bottom:44px; display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.scroll-cue i{display:block; width:1px; height:46px; background:rgba(255,255,255,.3); position:relative; overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:#fff; animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* compass mark */
.compass{position:absolute; right:56px; top:120px; width:120px; height:120px; opacity:.9}
.compass .ring{position:absolute; inset:0; border:1px solid rgba(255,255,255,.35); border-radius:50%}
.compass .ring.dash{inset:12px; border-style:dashed; border-color:rgba(255,255,255,.25); animation:spin 60s linear infinite}
.compass .needle{position:absolute; inset:0; animation:sway 6s ease-in-out infinite}
.compass .cl{position:absolute; font-size:10px; font-weight:600; letter-spacing:.1em; color:rgba(255,255,255,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sway{0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(18deg)}}

/* quick quote */
.qq{position:relative; z-index:5; margin-top:-64px}
.qq-card{background:#fff; border-radius:22px; box-shadow:0 30px 80px -30px rgba(22,28,61,.35), 0 1px 0 rgba(22,28,61,.04); padding:14px; display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:6px; align-items:stretch}
.qq-field{display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 22px; border-radius:14px; transition:background .4s var(--ease)}
.qq-field:hover,.qq-field:focus-within{background:var(--g2)}
.qq-field + .qq-field{border-left:1px solid var(--g3)}
.qq-field label{font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--g6)}
.qq-field input,.qq-field select{border:0; background:transparent; font:inherit; font-size:16px; color:var(--ink); padding:2px 0; outline:none; width:100%}
.qq .btn{min-height:64px; border-radius:14px; padding:0 34px}

/* ---------- marquee ---------- */
.marquee{padding:84px 0 30px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex; gap:56px; width:max-content; animation:marq 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex; align-items:center; gap:56px; font-family:var(--serif); font-style:italic; font-size:44px; color:var(--g4); white-space:nowrap; transition:color .4s}
.marquee-item:hover{color:var(--navy)}
.marquee-item::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--yellow)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:120px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:64px; flex-wrap:wrap}
.sec-head .display{margin-top:20px; max-width:16ch}

/* scroll reveal (progressive) */
@supports (animation-timeline: view()){
  .sr{animation:srIn linear both; animation-timeline:view(); animation-range:entry 0% cover 28%}
  .sr-img{animation:srClip linear both; animation-timeline:view(); animation-range:entry 0% cover 40%}
  .parallax img{animation:para linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
}
@keyframes srIn{from{opacity:0; transform:translateY(48px)} to{opacity:1; transform:none}}
@keyframes srClip{from{clip-path:inset(18% 10% 18% 10% round 24px)} to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes para{from{transform:scale(1.18) translateY(-6%)} to{transform:scale(1.18) translateY(6%)}}

/* intro */
.intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:96px; align-items:center}
.intro-text .display{margin:22px 0 30px}
.intro-text .lead + .lead{margin-top:18px}
.intro-text .link-arrow{margin-top:34px}
.intro-media{position:relative}
.frame{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:var(--g3)}
.frame img{width:100%; height:100%; object-fit:cover}
.intro-badge{position:absolute; left:-48px; bottom:56px; background:#fff; border-radius:18px; padding:22px 26px; box-shadow:0 24px 60px -24px rgba(22,28,61,.35); display:flex; gap:16px; align-items:center; max-width:300px; animation:float 7s ease-in-out infinite}
.intro-badge img{width:40px; height:40px}
.intro-badge p{font-size:13px; line-height:1.5; color:var(--g8); font-weight:500}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
.topo-deco{position:absolute; right:-80px; top:-70px; width:340px; height:340px; background:url(../img/topo-navy.png) center/700px auto; opacity:.22; border-radius:50%; z-index:-1; mask-image:radial-gradient(circle, #000 40%, transparent 70%)}

/* services cards */
.svc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.svc-card{position:relative; background:#fff; border:1px solid var(--g3); border-radius:22px; padding:40px 36px 36px; min-height:340px; display:flex; flex-direction:column; gap:18px; overflow:hidden; transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s}
.svc-card::before{content:""; position:absolute; inset:0; background:url(../img/topo-navy.png) center/800px auto; opacity:0; transition:opacity .8s var(--ease)}
.svc-card:hover{transform:translateY(-8px); box-shadow:0 40px 80px -40px rgba(22,28,61,.35); border-color:transparent}
.svc-card:hover::before{opacity:.08}
.svc-card > *{position:relative}
.svc-card .num{font-size:20px}
.svc-icon{width:52px; height:52px; border-radius:50%; background:var(--g2); display:flex; align-items:center; justify-content:center; transition:background .6s var(--ease), transform .7s var(--ease)}
.svc-icon img{width:28px; height:28px}
.svc-card:hover .svc-icon{background:#EEF4E8; transform:rotate(-12deg)}
.svc-card h3{font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.1; color:var(--navy)}
.svc-card p{font-size:15px; line-height:1.7; color:var(--g6)}
.svc-card .link-arrow{margin-top:auto; align-self:flex-start; background-color:transparent; border:0; cursor:pointer}

/* tours */
.tour-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px}
.tour{display:flex; flex-direction:column; gap:20px}
.tour-media{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--g3)}
.tour-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.4s var(--ease)}
.tour:hover .tour-media img{transform:scale(1.1)}
.tour-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(22,28,61,.55))}
.tour-tag{position:absolute; top:18px; left:18px; z-index:2; background:rgba(255,255,255,.92); color:var(--navy); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:8px 14px; border-radius:999px}
.tour-dur{position:absolute; left:22px; bottom:20px; z-index:2; color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; display:flex; gap:8px; align-items:center}
.tour-quick{position:absolute; right:18px; bottom:18px; z-index:2; width:52px; height:52px; border-radius:50%; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; border:0; transform:scale(.6) rotate(-45deg); opacity:0; transition:all .6s var(--ease)}
.tour:hover .tour-quick,.tour-quick:focus-visible{transform:none; opacity:1}
.tour h3{font-family:var(--serif); font-size:32px; font-weight:500; line-height:1.08; color:var(--navy)}
.tour p{font-size:15px; color:var(--g6); line-height:1.7}
.tour-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; border-top:1px solid var(--g3); flex-wrap:wrap}
.price{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--g6)}
.price b{display:block; font-family:var(--serif); font-size:26px; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:500}
.tour-btns{display:flex; gap:10px}
.icon-btn{width:48px; height:48px; border-radius:50%; border:1px solid var(--g3); background:#fff; color:var(--green-ink); display:inline-flex; align-items:center; justify-content:center; transition:all .4s var(--ease)}
.icon-btn:hover{background:var(--green); border-color:var(--green); color:#fff}
.btn-sm{min-height:48px; padding:0 22px; font-size:11px}

/* filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:56px}
.chip{border:1px solid var(--g3); background:#fff; color:var(--g8); min-height:44px; padding:0 22px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:all .4s var(--ease)}
.chip:hover{border-color:var(--navy)}
.chip.is-on{background:var(--navy); color:#fff; border-color:var(--navy)}

/* process */
.process{background:#fff; border-top:1px solid var(--g3); border-bottom:1px solid var(--g3); position:relative; overflow:hidden}
.flight{position:relative; height:40px; margin:0 0 40px}
.flight::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1.5px dashed var(--g4)}
.flight .plane{position:absolute; top:50%; left:0; color:var(--yellow); animation:fly 9s var(--ease) infinite}
.flight .plane svg{display:block; transform:translateY(-50%) rotate(45deg); filter:drop-shadow(0 4px 6px rgba(22,28,61,.2))}
@keyframes fly{0%{left:0; opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{left:calc(100% - 28px); opacity:0}}
.flight .dot{position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:#fff; border:2px solid var(--green)}
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px}
.step .num{font-size:44px; line-height:1}
.step h4{font-size:15px; letter-spacing:.06em; font-weight:600; color:var(--navy); margin:16px 0 10px}
.step p{font-size:14.5px; line-height:1.7; color:var(--g6)}

/* CTA band */
.cta-band{position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:130px 0}
.cta-band .topo{position:absolute; inset:-10%; background:url(../img/topo-white.png) center/1200px auto; opacity:.09; animation:drift 60s linear infinite alternate}
@keyframes drift{to{transform:translate3d(-6%, 4%, 0) rotate(2deg)}}
.cta-band .inner{position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:64px; align-items:end}
.cta-band .display{font-size:clamp(40px, 5cqi, 76px)}
.cta-band .display em{color:var(--yellow)}
.cta-band p{color:rgba(255,255,255,.78); font-size:17px; line-height:1.75; max-width:42ch}
.cta-band .btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.cta-band .btn-primary{background:#fff; color:var(--navy)}
.cta-band .btn-primary::after{background:var(--yellow)}

/* sub hero for inner pages */
.sub-hero{position:relative; min-height:560px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--navy-deep)}
.sub-hero .hero-media img{animation:kenburns 18s var(--ease) both}
.sub-hero .hero-inner{padding:180px 0 90px}
.sub-hero .display{margin-top:22px; font-size:clamp(46px, 6.4cqi, 96px); max-width:14ch}
.sub-hero .hero-sub{margin-top:22px}
.crumbs{position:absolute; right:56px; bottom:94px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.72)}

/* services page rows */
.svc-rows{border-top:1px solid var(--g3)}
.svc-row{display:grid; grid-template-columns:120px minmax(0,1.1fr) minmax(0,1.3fr) auto; gap:48px; padding:56px 0; border-bottom:1px solid var(--g3); align-items:start; transition:background .6s var(--ease); position:relative}
.svc-row::before{content:""; position:absolute; left:-56px; right:-56px; top:0; bottom:0; background:#fff; opacity:0; transition:opacity .6s var(--ease); z-index:-1}
.svc-row:hover::before{opacity:1}
.svc-row .num{font-size:56px; line-height:1}
.svc-row h3{font-family:var(--serif); font-size:40px; font-weight:500; line-height:1.08; color:var(--navy)}
.svc-row p{font-size:16px; line-height:1.75; color:var(--g6)}
.incl{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.incl span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--g8); background:var(--g2); padding:8px 14px; border-radius:999px}

/* about */
.story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:96px; align-items:start}
.story .display{margin-top:22px}
.story .lead + .lead{margin-top:20px}
.quote{font-family:var(--serif); font-style:italic; font-size:clamp(30px, 3cqi, 44px); line-height:1.25; color:var(--navy); padding-left:36px; position:relative}
.quote::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:4px; background:linear-gradient(var(--red) 0 25%, var(--yellow) 25% 50%, var(--navy) 50% 75%, var(--green) 75% 100%)}
.points{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; border:1px solid var(--g3); border-radius:26px; overflow:hidden; background:#fff}
.point{padding:52px 48px; position:relative; min-height:300px; display:flex; flex-direction:column; gap:16px; transition:background .6s var(--ease)}
.point:nth-child(1),.point:nth-child(2){border-bottom:1px solid var(--g3)}
.point:nth-child(odd){border-right:1px solid var(--g3)}
.point:hover{background:var(--g1)}
.point .cardinal{font-family:var(--sans); font-weight:800; font-size:72px; line-height:.9; color:var(--g2); position:absolute; right:40px; top:36px; transition:color .6s var(--ease)}
.point:hover .cardinal{color:var(--g3)}
.point .bar{width:36px; height:4px; border-radius:4px}
.point h3{font-family:var(--serif); font-size:34px; font-weight:500; color:var(--navy); line-height:1.1}
.point p{font-size:15.5px; line-height:1.75; color:var(--g6); max-width:40ch}
.visit{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-radius:26px; overflow:hidden; background:var(--navy); color:#fff}
.visit-map{position:relative; min-height:420px; background:#EEF0F2 url(../img/topo-navy.png) center/900px auto}
.visit-map .pin{position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px; border-radius:50%; background:var(--red); box-shadow:0 0 0 6px rgba(226,56,31,.18)}
.visit-map .pin::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--red); animation:ping 2.4s var(--ease) infinite}
@keyframes ping{from{transform:scale(.6); opacity:1} to{transform:scale(3.2); opacity:0}}
.visit-body{padding:64px; display:flex; flex-direction:column; gap:20px; justify-content:center; position:relative}
.visit-body .display{font-size:44px}
.visit-body p{color:rgba(255,255,255,.8); font-size:16px; line-height:1.75}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:56px; align-items:start}
.info-card{position:sticky; top:130px; background:var(--navy); color:#fff; border-radius:26px; padding:48px 42px; overflow:hidden}
.info-card .turing{position:absolute; right:-60px; bottom:-60px; width:260px; height:260px; background:url(../img/turing-white.png) center/340px auto; opacity:.08; border-radius:50%}
.info-card h3{font-family:var(--serif); font-size:38px; font-weight:400; line-height:1.1; margin:18px 0 14px}
.info-card > p{color:rgba(255,255,255,.75); font-size:15px; line-height:1.7}
.info-list{list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; position:relative}
.info-list li{display:flex; gap:16px; align-items:flex-start; font-size:14.5px; line-height:1.6}
.info-list .ic{flex:none; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; color:var(--yellow)}
.info-list small{display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:2px}
.info-card .btn{margin-top:36px; width:100%}
.brandbar{display:flex; height:4px; margin-top:36px; border-radius:4px; overflow:hidden}
.brandbar i{flex:1}

.form-card{background:#fff; border:1px solid var(--g3); border-radius:26px; padding:52px}
.form-card > h2{font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.08; color:var(--navy); margin:16px 0 8px}
fieldset{border:0; padding:0; margin:44px 0 0}
legend{display:flex; align-items:center; gap:14px; padding:0; margin-bottom:22px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--navy); width:100%}
legend::after{content:""; flex:1; height:1px; background:var(--g3)}
legend .num{font-size:20px; letter-spacing:0; text-transform:none}
.fgrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 20px}
.fgrid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.full{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:8px}
.field label,.field .lbl{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--g8)}
.field label .req{color:var(--red); margin-left:4px}
.field input,.field select,.field textarea{font:inherit; font-size:15px; color:var(--ink); background:var(--g1); border:1px solid var(--g3); border-radius:12px; min-height:52px; padding:12px 16px; outline:none; transition:border-color .3s, box-shadow .3s, background .3s; width:100%}
.field textarea{min-height:130px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy); background:#fff; box-shadow:0 0 0 4px rgba(38,49,99,.08)}
.field.err input,.field.err select{border-color:var(--red); background:#FFF7F5}
.field .msg{font-size:12px; color:#B42318}
.checks{display:flex; flex-wrap:wrap; gap:10px}
.check{position:relative}
.check input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.check span{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--g3); background:#fff; font-size:13px; color:var(--g8); transition:all .35s var(--ease)}
.check span::before{content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--g4); transition:all .35s var(--ease)}
.check input:checked + span{border-color:var(--navy); background:var(--navy); color:#fff}
.check input:checked + span::before{border-color:var(--yellow); background:var(--yellow); box-shadow:inset 0 0 0 2px var(--navy)}
.check input:focus-visible + span{outline:2px solid var(--green); outline-offset:2px}
.toggle-row{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--g8); min-height:44px}
.toggle-row input{width:20px; height:20px; accent-color:var(--navy)}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--g6); line-height:1.6; margin-top:34px}
.consent input{width:20px; height:20px; margin-top:2px; accent-color:var(--navy); flex:none}
.consent.err{color:#B42318}
.form-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:32px}
.form-note{font-size:12.5px; color:var(--g6); margin-top:16px}
.success{text-align:center; padding:40px 10px; animation:pageIn .8s var(--ease) both}
.success .seal{width:96px; height:96px; margin:0 auto 26px; border-radius:50%; background:#EEF4E8; display:flex; align-items:center; justify-content:center; color:var(--green)}
.success .seal svg{stroke-dasharray:40; stroke-dashoffset:40; animation:draw 1s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h2{font-family:var(--serif); font-size:44px; font-weight:400; color:var(--navy); line-height:1.1}
.success p{color:var(--g6); max-width:46ch; margin:16px auto 0; font-size:16px; line-height:1.7}
.success .form-actions{justify-content:center}

/* footer */
.ftr{position:relative; background:var(--navy-deep); color:rgba(255,255,255,.78); padding:96px 0 0; overflow:hidden}
.ftr .turing{position:absolute; left:0; top:0; width:120px; height:100%; background:url(../img/turing-white.png) center/260px auto; opacity:.06}
.ftr-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap:48px; padding-bottom:72px}
.ftr-logo{height:64px; width:auto}
.ftr p{font-size:14.5px; line-height:1.75; margin-top:22px; max-width:34ch}
.ftr h5{margin:0 0 20px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#fff; font-weight:600}
.ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14px}
.ftr ul button{background:none; border:0; padding:0; color:inherit; font-size:14px; text-align:left; transition:color .3s}
.ftr ul button:hover,.ftr ul a:hover{color:var(--yellow)}
.ftr-bottom{position:relative; border-top:1px solid rgba(255,255,255,.1); padding:26px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.55)}
.ftr .brandbar{margin:0; border-radius:0; height:5px}

/* floating whatsapp */
.wa-float{position:fixed; right:28px; bottom:28px; z-index:60; display:flex; align-items:center; gap:12px}
.wa-float .bubble{background:#fff; color:var(--navy); font-size:13px; font-weight:500; padding:12px 18px; border-radius:999px; box-shadow:0 18px 40px -16px rgba(22,28,61,.35); opacity:0; transform:translateX(10px); transition:all .5s var(--ease); pointer-events:none; white-space:nowrap}
.wa-float:hover .bubble{opacity:1; transform:none}
.wa-btn{position:relative; width:64px; height:64px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 40px -14px rgba(86,139,51,.7)}
.wa-btn::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--green); animation:ping 2.6s var(--ease) infinite}

/* ================= TABLET ================= */
@container site (max-width: 1100px){
  .wrap{padding:0 36px}
  .nav{gap:22px}
  .nav{gap:20px}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:28px}
  .hero{min-height:720px}
  .compass{right:36px}
  .scroll-cue{left:36px}
  .qq-card{grid-template-columns:repeat(2, minmax(0,1fr))}
  .qq-field + .qq-field{border-left:0}
  .qq .btn{grid-column:1 / -1}
  .intro{grid-template-columns:minmax(0,1fr); gap:72px}
  .intro-media{max-width:620px; margin-left:auto}
  .svc-grid,.tour-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .flight{display:none}
  .cta-band .inner{grid-template-columns:minmax(0,1fr); gap:20px}
  .svc-row{grid-template-columns:90px minmax(0,1fr); gap:24px 32px}
  .svc-row > .desc{grid-column:2}
  .svc-row > .act{grid-column:2}
  .story{grid-template-columns:minmax(0,1fr); gap:48px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .info-card{position:relative; top:0}
  .ftr-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
  .ftr-grid > :first-child{grid-column:1 / -1}
  .crumbs{right:36px}
}
@container site (max-width: 860px){
  .nav,.hdr-actions .lang.desk{display:none}
  .burger{display:inline-flex}
  .mnav{display:block; position:absolute; left:0; right:0; top:104px; background:var(--g1); border-bottom:1px solid var(--g3); box-shadow:0 30px 60px -30px rgba(22,28,61,.3); padding:12px 36px 32px; animation:fadeUp .5s var(--ease) both}
  .mnav button.nav-link{display:block; width:100%; text-align:left; font-family:var(--serif); font-size:34px; letter-spacing:0; text-transform:none; font-weight:400; padding:14px 0; border-bottom:1px solid var(--g3); color:var(--navy)}
  .mnav button.nav-link::after{display:none}
  .mnav button.nav-link.is-active{color:var(--green)}
  .mnav .row{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:24px; flex-wrap:wrap}
  .visit{grid-template-columns:minmax(0,1fr)}
  .visit-map{min-height:280px}
  .points{grid-template-columns:minmax(0,1fr)}
  .point:nth-child(odd){border-right:0}
  .point{border-bottom:1px solid var(--g3)}
  .point:last-child{border-bottom:0}
}
/* ================= MOBILE ================= */
@container site (max-width: 600px){
  .wrap{padding:0 20px}
  .hdr-row{height:84px}
  .hdr-logo img{height:54px}
  .hdr-actions > .hdr-cta{display:none}
  .mnav{top:84px; padding:8px 20px 28px}
  .hero{min-height:680px}
  .hero-inner{padding-bottom:110px; padding-top:150px}
  .compass{width:84px; height:84px; right:20px; top:96px}
  .scroll-cue{display:none}
  .hero-sub{font-size:16px}
  .hero-ctas .btn{width:100%}
  .qq{margin-top:-48px}
  .qq-card{grid-template-columns:minmax(0,1fr); padding:10px}
  .qq-field{padding:12px 16px}
  .qq-field + .qq-field{border-top:1px solid var(--g3)}
  .marquee{padding:64px 0 10px}
  .marquee-item{font-size:32px; gap:36px}
  .marquee-track{gap:36px}
  .sec{padding:84px 0}
  .sec-head{margin-bottom:44px}
  .intro{gap:56px}
  .intro-badge{left:16px; right:16px; bottom:16px; max-width:none}
  .svc-grid,.tour-grid,.steps{grid-template-columns:minmax(0,1fr)}
  .svc-card{min-height:0; padding:32px 26px}
  .cta-band{padding:90px 0}
  .cta-band .btn{width:100%}
  .sub-hero{min-height:480px}
  .sub-hero .hero-inner{padding:150px 0 64px}
  .crumbs{display:none}
  .svc-row{grid-template-columns:minmax(0,1fr); gap:14px; padding:44px 0}
  .svc-row > .desc,.svc-row > .act{grid-column:1}
  .svc-row .num{font-size:40px}
  .svc-row h3{font-size:32px}
  .point{padding:40px 26px; min-height:0}
  .point .cardinal{font-size:54px; right:24px; top:28px}
  .visit-body{padding:40px 26px}
  .visit-body .display{font-size:36px}
  .form-card{padding:32px 22px; border-radius:20px}
  .form-card > h2{font-size:36px}
  .fgrid,.fgrid.three{grid-template-columns:minmax(0,1fr)}
  .info-card{padding:40px 26px}
  .form-actions .btn{width:100%}
  .ftr{padding-top:72px}
  .ftr-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 24px}
  .wa-float{right:16px; bottom:16px}
  .wa-btn{width:58px; height:58px}
  .tour-quick{opacity:1; transform:none; width:46px; height:46px}
}
@media (prefers-reduced-motion: reduce){
  .ft *,.ft *::before,.ft *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- privacy modal ---------- */
.ftr-legal{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.ftr-legal button{background:none; border:0; padding:10px 0; color:rgba(255,255,255,.8); font-size:12px; letter-spacing:.06em; display:inline-flex; align-items:center; gap:8px; min-height:44px; background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-position:0 75%; background-repeat:no-repeat; transition:background-size .5s var(--ease), color .3s}
.ftr-legal button:hover{color:var(--yellow); background-size:100% 1px}
.consent-link{background:none; border:0; padding:0; color:var(--navy); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.consent-link:hover{color:var(--green)}
.pv{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px}
.pv-backdrop{position:absolute; inset:0; border:0; padding:0; background:rgba(22,28,61,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer; animation:pvFade .45s var(--ease) both}
.pv-panel{position:relative; width:100%; max-width:840px; max-height:min(86vh, 920px); background:#fff; border-radius:26px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 60px 120px -40px rgba(10,14,34,.6); animation:pvIn .7s var(--ease) both}
@keyframes pvFade{from{opacity:0}}
@keyframes pvIn{from{opacity:0; transform:translateY(40px) scale(.97)}}
.pv-head{position:relative; padding:36px 44px 28px; border-bottom:1px solid var(--g3); overflow:hidden}
.pv-head::before{content:""; position:absolute; inset:0; background:url(../img/topo-navy.png) center/900px auto; opacity:.07}
.pv-head > *{position:relative}
.pv-head h2{font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.05; color:var(--navy); margin-top:14px}
.pv-head p{font-size:13px; color:var(--g6); margin-top:10px}
.pv-close{position:absolute; top:24px; right:24px; width:48px; height:48px; border-radius:50%; border:1px solid var(--g3); background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); z-index:2}
.pv-close:hover{background:var(--navy); color:#fff; transform:rotate(90deg)}
.pv-body{overflow-y:auto; padding:12px 44px 40px; overscroll-behavior:contain}
.pv-sec{padding:28px 0; border-bottom:1px solid var(--g2); display:grid; grid-template-columns:56px minmax(0,1fr); gap:8px 20px}
.pv-sec:last-child{border-bottom:0}
.pv-sec .num{font-size:22px; line-height:1.3}
.pv-sec h3{font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.2; color:var(--navy); margin-bottom:10px}
.pv-sec p{font-size:14.5px; line-height:1.75; color:var(--g8); margin-top:10px}
.pv-sec ul{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.pv-sec li{font-size:14.5px; line-height:1.65; color:var(--g8); padding-left:20px; position:relative}
.pv-sec li::before{content:""; position:absolute; left:2px; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--green)}
.pv-foot{padding:18px 44px; border-top:1px solid var(--g3); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--g1)}
.pv-foot small{font-size:12px; color:var(--g6)}
@container site (max-width: 600px){
  .pv{padding:0; align-items:flex-end}
  .pv-panel{max-height:92vh; border-radius:22px 22px 0 0}
  .pv-head{padding:28px 22px 22px}
  .pv-head h2{font-size:34px; padding-right:48px}
  .pv-close{top:18px; right:16px}
  .pv-body{padding:4px 22px 28px}
  .pv-sec{grid-template-columns:minmax(0,1fr); gap:4px}
  .pv-foot{padding:16px 22px}
  .pv-foot .btn{width:100%}
}

/* =====================================================================
   POLISH v2 — calmer type, travel-vernacular details, one signature motion
   ===================================================================== */
/* typography: sentence case everywhere, no tracked caps */
.ft .btn{font-size:14.5px; font-weight:500; letter-spacing:.005em; text-transform:none}
.ft .btn-sm{font-size:14px}
.ft .nav-link{font-size:14.5px; letter-spacing:.005em; text-transform:none; font-weight:500}
.ft .nav-link.is-active{font-weight:600}
.ft .link-arrow{font-size:15px; letter-spacing:0; text-transform:none; font-weight:500}
.ft .eyebrow{font-size:14px; letter-spacing:.01em; text-transform:none; font-weight:500}
.ft .eyebrow::before{display:none}
.ft .field label,.ft .field .lbl,.ft .qq-field label{font-size:13px; letter-spacing:.005em; text-transform:none; font-weight:600}
.ft legend{font-size:14px; letter-spacing:.005em; text-transform:none}
.ft .chip,.ft .tour-tag,.ft .incl span{text-transform:none; letter-spacing:.005em; font-size:13px}
.ft .tour-dur{text-transform:none; letter-spacing:.01em; font-size:13.5px}
.ft .price{text-transform:none; letter-spacing:0; font-size:13px}
.ft .ftr h5{text-transform:none; letter-spacing:.01em; font-size:15px; font-family:var(--serif); font-weight:500}
.ft .info-list small{text-transform:none; letter-spacing:.01em; font-size:12.5px}
.ft .lang button{letter-spacing:.06em}
.ft .display em{font-style:italic; color:inherit}
.ft .h-lg{max-width:18ch}
.ft .sec-head{align-items:flex-end}
.ft .sec-head > .display{margin-top:0}
.ft .lead{font-size:17.5px}

/* radius hierarchy: imagery & panels crisp, controls soft */
.ft .frame,.ft .tour-media{border-radius:6px}
.ft .form-card,.ft .info-card,.ft .points,.ft .visit{border-radius:10px}
.ft .svc-card{border-radius:8px}
.ft .field input,.ft .field select,.ft .field textarea{border-radius:8px}
.ft .pv-panel{border-radius:14px}
@supports (animation-timeline: view()){
  @keyframes srClip{from{clip-path:inset(14% 8% 14% 8% round 6px)} to{clip-path:inset(0 0 0 0 round 6px)}}
  @keyframes srIn{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
}

/* header: scroll-linked flight route */
.hdr-route{position:absolute; left:0; right:0; bottom:-1px; height:1px; background:repeating-linear-gradient(90deg, rgba(38,49,99,.22) 0 4px, transparent 4px 10px); pointer-events:none}
.hr-fill{position:absolute; inset:0; background:var(--green); transform-origin:left; transform:scaleX(0)}
.hr-plane{position:absolute; top:-8px; left:0; color:var(--green); opacity:0}
.hr-plane svg{display:block; transform:rotate(90deg)}
@supports (animation-timeline: scroll()){
  .hr-fill{animation:hrFill linear both; animation-timeline:scroll(root)}
  .hr-plane{animation:hrPlane linear both; animation-timeline:scroll(root)}
}
@keyframes hrFill{to{transform:scaleX(1)}}
@keyframes hrPlane{0%{left:0; opacity:0} 3%{opacity:1} 97%{opacity:1} 100%{left:calc(100% - 16px); opacity:0}}

/* hero */
.hero{min-height:820px}
.hero-shade{background:linear-gradient(180deg, rgba(22,28,61,.45) 0%, rgba(22,28,61,.08) 38%, rgba(22,28,61,.78) 100%)}
.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:72px}
.hero-kicker{font-size:15px; color:rgba(255,255,255,.82); font-weight:500; letter-spacing:.01em}
.hero h1{margin-top:20px}
.hero .display em{color:#fff; font-weight:400}
.hero-inner{padding-bottom:160px}

/* departure board */
.board{position:relative; background:rgba(14,19,44,.55); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:26px 26px 22px; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); color:#fff; box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.route{position:relative; width:440px; height:150px; max-width:100%; margin:-6px 0 8px}
.route-svg{display:block; overflow:visible}
.route-draw{stroke-dasharray:1; stroke-dashoffset:1; animation:routeDraw 3.6s var(--ease) infinite}
@keyframes routeDraw{0%{stroke-dashoffset:1; opacity:1} 70%{stroke-dashoffset:0; opacity:1} 92%{stroke-dashoffset:0; opacity:0} 100%{stroke-dashoffset:1; opacity:0}}
.route-dest{transform-box:fill-box; transform-origin:center; animation:destPulse 3.6s var(--ease) infinite}
@keyframes destPulse{0%,62%{transform:scale(1)} 72%{transform:scale(1.9)} 84%,100%{transform:scale(1)}}
.route-plane{position:absolute; left:0; top:0; color:#F9D11B; offset-path:path('M24 122 C 130 4, 300 0, 414 78'); offset-rotate:auto 90deg; animation:routeFly 3.6s var(--ease) infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.route-plane svg{display:block}
@keyframes routeFly{0%{offset-distance:0%; opacity:0} 8%{opacity:1} 70%{offset-distance:100%; opacity:1} 86%,100%{offset-distance:100%; opacity:0}}
.board-row{display:flex; gap:22px; align-items:flex-end; border-top:1px dashed rgba(255,255,255,.2); padding-top:18px}
.board-cell{display:flex; flex-direction:column; gap:6px; min-width:0}
.board-cell.grow{flex:1}
.board-cell small{font-size:12.5px; color:rgba(255,255,255,.65)}
.board-cell b{font-family:var(--serif); font-weight:500; font-size:28px; line-height:1}
.board-cell .code{font-size:12px; letter-spacing:.18em; color:#F9D11B; font-weight:600}
.flap{display:flex; gap:3px; perspective:400px}
.flap-c{position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:32px; border-radius:3px; background:linear-gradient(#1d2550 0 50%, #172046 50% 100%); font-family:var(--sans); font-weight:600; font-size:17px; color:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,.35); transform-origin:50% 50%; animation:flip .55s cubic-bezier(.3,.7,.3,1) both}
.flap-c::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.45)}
@keyframes flip{0%{transform:rotateX(90deg); filter:brightness(1.8)} 60%{transform:rotateX(-12deg)} 100%{transform:none; filter:none}}
.board-cta{margin-top:20px; width:100%; min-height:50px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 22px; font-size:14.5px; font-weight:500; transition:background .5s var(--ease), color .5s var(--ease)}
.board-cta svg{transition:transform .5s var(--ease)}
.board-cta:hover{background:#F9D11B}
.board-cta:hover svg{transform:translateX(4px)}

/* quick quote as a ticket stub */
.qq-card{border-radius:14px; position:relative; grid-template-columns:1.4fr 1fr 1fr auto; padding:12px 12px 12px 12px}
.qq-card::before,.qq-card::after{content:""; position:absolute; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--g1)}
.qq-card::before{left:-11px}
.qq-card::after{right:-11px}
.qq .btn{border-radius:10px}

/* services: editorial list with cursor-following preview */
.svc-list{position:relative; border-top:1px solid var(--g3)}
.svc-item{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto; gap:40px; align-items:center; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--g3); padding:34px 0; color:inherit; transition:opacity .5s var(--ease)}
.svc-thumb{display:none}
.svc-item-title{font-family:var(--serif); font-size:clamp(28px, 3cqi, 42px); line-height:1.1; color:var(--navy); transition:transform .6s var(--ease), color .4s}
.svc-item-desc{font-size:15.5px; line-height:1.7; color:var(--g6); max-width:46ch}
.svc-item-go{font-size:14.5px; font-weight:500; color:var(--navy); display:inline-flex; align-items:center; gap:10px; opacity:.0; transform:translateX(-8px); transition:all .5s var(--ease)}
.svc-item-go::after{content:""; width:28px; height:1px; background:currentColor}
.svc-list:hover .svc-item{opacity:.38}
.svc-list:hover .svc-item.is-on,.svc-item:focus-visible{opacity:1}
.svc-item.is-on .svc-item-title,.svc-item:focus-visible .svc-item-title{transform:translateX(14px); color:var(--green-ink)}
.svc-item.is-on .svc-item-go,.svc-item:focus-visible .svc-item-go{opacity:1; transform:none}
.svc-preview{position:absolute; left:-150px; top:-105px; width:300px; height:210px; z-index:2; pointer-events:none; border-radius:6px; overflow:hidden; opacity:0; scale:.85; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .4s var(--ease), scale .5s var(--ease); box-shadow:0 30px 60px -20px rgba(22,28,61,.45)}
.svc-preview.on{opacity:1; scale:1}
.svc-preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.15); transition:opacity .5s var(--ease), transform 1.2s var(--ease)}
.svc-preview img.on{opacity:1; transform:none}
@media (hover:none){ .svc-preview{display:none} .svc-list:hover .svc-item{opacity:1} .svc-item-go{opacity:1; transform:none} }
.svc-icon-lg{width:64px; height:64px}
.svc-icon-lg img{width:32px; height:32px}

/* tours: quieter cards */
.ft .tour-tag{background:rgba(255,255,255,.94); padding:7px 12px}
.ft .tour h3{font-size:30px}

/* cta band headline */
.ft .cta-band .display em{color:#fff}

@container site (max-width: 1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .board{max-width:520px}
  .svc-item{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:20px 32px}
  .svc-item-go{display:none}
  .qq-card{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@container site (max-width: 600px){
  .hero{min-height:0}
  .hero-inner{padding-bottom:120px}
  .board{padding:20px 16px 16px}
  .route{width:440px; max-width:none; height:150px; transform:scale(.68); transform-origin:left top; margin-bottom:-42px}
  .flap{gap:2px}
  .flap-c{width:18px; height:28px; font-size:14px}
  .board-row{gap:14px}
  .board-cell b{font-size:22px}
  .svc-item{grid-template-columns:72px minmax(0,1fr); gap:6px 16px; padding:22px 0; align-items:start}
  .svc-thumb{display:block; grid-row:span 2; width:72px; height:72px; object-fit:cover; border-radius:6px}
  .svc-item-title{font-size:24px}
  .svc-item-desc{font-size:14.5px}
  .svc-item.is-on .svc-item-title{transform:none}
  .qq-card{grid-template-columns:minmax(0,1fr)}
  .qq-card::before,.qq-card::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .route-draw{stroke-dashoffset:0}
  .route-plane{offset-distance:100%; opacity:1}
}

/* services on home: 3 x 2 bubbles, type-led, no imagery */
.svc-bubbles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.svc-bubble{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:left; width:100%; min-height:0; padding:30px 30px 28px; border-radius:28px; border:1px solid var(--g3); background:#fff; color:inherit; overflow:hidden; transition:border-color .5s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease)}
.svc-bubble::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, #EEF4E8 0%, rgba(238,244,232,0) 55%); opacity:0; transition:opacity .6s var(--ease)}
.svc-bubble > *{position:relative}
.svc-bubble:hover,.svc-bubble:focus-visible{border-color:transparent; box-shadow:0 26px 60px -34px rgba(22,28,61,.4); transform:translateY(-4px)}
.svc-bubble:hover::before,.svc-bubble:focus-visible::before{opacity:1}
.svc-bubble:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.svc-bubble-head{display:flex; width:100%; align-items:center; justify-content:space-between; margin-bottom:6px}
.svc-bubble .svc-icon{width:48px; height:48px}
.svc-bubble .svc-icon img{width:26px; height:26px}
.svc-bubble:hover .svc-icon{background:#EEF4E8; transform:rotate(-12deg)}
.svc-bubble-go{width:38px; height:38px; border-radius:50%; border:1px solid var(--g3); display:flex; align-items:center; justify-content:center; color:var(--navy); transition:all .5s var(--ease)}
.svc-bubble:hover .svc-bubble-go{background:var(--navy); border-color:var(--navy); color:#fff; transform:rotate(45deg)}
.svc-bubble-title{font-family:var(--serif); font-weight:500; font-size:28px; line-height:1.1; color:var(--navy); text-wrap:balance}
.svc-bubble-desc{font-size:14.5px; line-height:1.65; color:var(--g6); text-wrap:pretty}
.svc-bubble .incl{margin-top:6px; gap:6px}
.svc-bubble .incl span{font-size:12px; padding:6px 11px; background:var(--g2)}
@container site (max-width: 1100px){ .svc-bubbles{grid-template-columns:repeat(2, minmax(0,1fr))} }
@container site (max-width: 600px){ .svc-bubbles{grid-template-columns:minmax(0,1fr); gap:12px} .svc-bubble{padding:24px 22px; border-radius:22px} .svc-bubble-title{font-size:25px} }

/* ================= HOME HERO: window fly-through on scroll ================= */
.hero-fly .hero-media{overflow:hidden}
.hero-fly .hero-media img{object-position:50% 50%; transform-origin:52% 52%; animation:windowIntro 2.4s var(--ease) both}
@keyframes windowIntro{from{scale:1.14; filter:blur(6px) brightness(.8)} to{scale:1; filter:none}}
.hero-fly .hero-shade{background:linear-gradient(180deg, rgba(22,28,61,.35) 0%, rgba(22,28,61,0) 36%, rgba(22,28,61,.25) 62%, rgba(22,28,61,.82) 100%)}
.hero-fly .hero-vignette{position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 70% at 52% 50%, transparent 55%, rgba(10,14,34,.35) 100%); opacity:0}
.hero-fly .hero-topo{display:none}
@supports (animation-timeline: scroll()){
  /* the camera pushes through the window as you scroll */
  .hero-fly .hero-media img{animation:windowIntro 2.4s var(--ease) both, flyThrough linear both; animation-timeline:auto, scroll(root); animation-range:normal, 0px 820px}
  .hero-fly .hero-vignette{animation:vignetteIn linear both; animation-timeline:scroll(root); animation-range:0px 820px}
  .hero-fly .hero-grid > :first-child{animation:heroTextOut linear both; animation-timeline:scroll(root); animation-range:0px 620px}
  .hero-fly .board{animation:boardOut linear both; animation-timeline:scroll(root); animation-range:0px 720px}
}
@keyframes flyThrough{
  0%{transform:none; filter:none}
  60%{filter:saturate(1.1)}
  100%{transform:scale(2.15) translate(1.5%, 2%); filter:saturate(1.15) brightness(1.08)}
}
@keyframes vignetteIn{to{opacity:1}}
@keyframes heroTextOut{to{transform:translateY(-140px); opacity:0}}
@keyframes boardOut{to{transform:translateY(-70px) scale(.96); opacity:.15}}
@media (prefers-reduced-motion: reduce){ .hero-fly .hero-media img,.hero-fly .hero-grid > :first-child,.hero-fly .board{animation:none !important} }

/* price "per person" */
.ft .price .pp{display:block; font-style:normal; font-size:12px; color:var(--g6); margin-top:2px}

/* ================= CHECKOUT ================= */
.co{position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:24px}
.co-backdrop{position:absolute; inset:0; border:0; padding:0; background:rgba(22,28,61,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:pvFade .45s var(--ease) both; cursor:pointer}
.co-panel{position:relative; width:100%; max-width:1080px; max-height:min(92vh, 860px); background:var(--g1); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 60px 120px -40px rgba(10,14,34,.6); animation:pvIn .7s var(--ease) both}
.co-top{display:flex; align-items:center; gap:28px; padding:22px 28px 22px 36px; border-bottom:1px solid var(--g3); background:#fff}
.co-top h2{font-family:var(--serif); font-weight:500; font-size:30px; color:var(--navy); line-height:1.1; margin-right:auto}
.co-steps{display:flex; gap:8px; list-style:none; margin:0; padding:0; counter-reset:none}
.co-steps li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--g6); padding:0 14px 0 0; position:relative}
.co-steps li + li::before{content:""; width:28px; height:1px; background:var(--g4); margin-right:6px}
.co-dot{width:28px; height:28px; border-radius:50%; border:1px solid var(--g4); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; transition:all .4s var(--ease)}
.co-steps li.is-on{color:var(--navy); font-weight:600}
.co-steps li.is-on .co-dot{background:var(--navy); border-color:var(--navy); color:#fff}
.co-steps li.is-done .co-dot{background:var(--green); border-color:var(--green); color:#fff}
.co-x{width:44px; height:44px; border-radius:50%; border:1px solid var(--g3); background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); flex:none}
.co-x:hover{background:var(--navy); color:#fff; transform:rotate(90deg)}
.co-body{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); flex:1; min-height:0; overflow:hidden}
.co-main{overflow-y:auto; padding:36px 40px 40px; overscroll-behavior:contain}
.co-step{animation:coStep .55s var(--ease) both}
@keyframes coStep{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}
.co-h{font-family:var(--serif); font-weight:400; font-size:36px; line-height:1.1; color:var(--navy); margin-bottom:26px}
.co-grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 20px; margin-top:18px}
.co-step > .field + .co-grid2{margin-top:18px}
.co-note{font-size:13.5px; color:var(--g6); line-height:1.6; margin-top:18px}
.co-lbl{display:block; font-size:13px; font-weight:600; color:var(--g8); margin-bottom:10px}
.co-mini{display:none}
.stepper{display:flex; align-items:center; justify-content:space-between; min-height:52px; border:1px solid var(--g3); border-radius:8px; background:#fff; padding:4px}
.stepper button{width:44px; height:44px; border-radius:6px; border:0; background:var(--g2); color:var(--navy); display:flex; align-items:center; justify-content:center; transition:background .3s}
.stepper button:hover{background:var(--g3)}
.stepper output{font-family:var(--serif); font-size:26px; color:var(--navy); min-width:40px; text-align:center}
.tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.tile{position:relative; display:flex; flex-direction:column; gap:4px; padding:18px 20px; border:1.5px solid var(--g3); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .35s var(--ease), box-shadow .35s var(--ease)}
.tile input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.tile:hover{border-color:var(--g4)}
.tile.is-on{border-color:var(--navy); box-shadow:0 0 0 3px rgba(38,49,99,.08)}
.tile:focus-within{outline:2px solid var(--green); outline-offset:2px}
.tile::after{content:""; position:absolute; top:16px; right:16px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--g4); transition:all .3s}
.tile.is-on::after{border-color:var(--navy); background:var(--navy); box-shadow:inset 0 0 0 3px #fff}
.tile-t{font-size:14.5px; font-weight:600; color:var(--ink); padding-right:26px}
.tile-v{font-family:var(--serif); font-size:28px; color:var(--navy); line-height:1.1}
.tile-s{font-size:12.5px; color:var(--g6)}
.tile-row{flex-direction:row; align-items:center; gap:12px; color:var(--navy)}
.co-card{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 18px; margin-top:22px; padding:22px; border-radius:10px; background:#fff; border:1px solid var(--g3); animation:coStep .5s var(--ease) both}
.co-card .full{grid-column:1 / -1}
.co-info{margin-top:22px; padding:18px 20px; border-radius:10px; background:#EEF4E8; color:var(--green-ink); font-size:14.5px; line-height:1.65}
.co-secure{display:flex; align-items:center; gap:10px; margin-top:20px; font-size:13px; color:var(--g6)}
.co-secure svg{color:var(--green); flex:none}
.co-sum{background:#fff; border-left:1px solid var(--g3); overflow-y:auto}
.co-sum-img{position:relative; aspect-ratio:16/10; overflow:hidden}
.co-sum-img img{width:100%; height:100%; object-fit:cover}
.co-sum-img .tour-tag{position:absolute; top:14px; left:14px}
.co-sum-body{padding:26px 30px 30px}
.co-sum-body h4{font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.1; color:var(--navy); margin:0 0 4px}
.co-sum dl{margin:22px 0 0; display:flex; flex-direction:column}
.co-sum dl > div,.co-sum dl sc-if > div{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--g3); font-size:14.5px}
.co-sum dt{color:var(--g6)}
.co-sum dd{margin:0; color:var(--ink); font-weight:500; text-align:right}
.co-sum .co-total dd{font-family:var(--serif); font-size:24px; font-weight:500; color:var(--navy)}
.co-sum .co-today{background:#EEF4E8; margin:6px -12px 0; padding:11px 12px !important; border-radius:8px; border-bottom:0 !important}
.co-sum .co-today dt,.co-sum .co-today dd{color:var(--green-ink); font-weight:600}
.co-foot{display:flex; align-items:center; gap:16px; padding:16px 28px; border-top:1px solid var(--g3); background:#fff}
.co-foot-total{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; line-height:1.2}
.co-foot-total small{font-size:12px; color:var(--g6)}
.co-foot-total b{font-family:var(--serif); font-size:24px; font-weight:500; color:var(--navy)}
.co-done{text-align:center; padding:30px 0 10px}
.co-done .seal{width:96px; height:96px; margin:0 auto 22px; border-radius:50%; background:#EEF4E8; display:flex; align-items:center; justify-content:center; color:var(--green)}
.co-done .seal svg{stroke-dasharray:40; stroke-dashoffset:40; animation:draw 1s var(--ease) .3s forwards}
.co-done h3{font-family:var(--serif); font-weight:400; font-size:42px; color:var(--navy); line-height:1.1}
.co-code{display:inline-flex; flex-direction:column; gap:4px; margin:22px auto 0; padding:14px 26px; border:1.5px dashed var(--navy); border-radius:10px}
.co-code small{font-size:12px; color:var(--g6)}
.co-code b{font-size:22px; letter-spacing:.14em; color:var(--navy)}
.co-done-p{max-width:46ch; margin:18px auto 0; color:var(--g6); font-size:15.5px; line-height:1.7}
@container site (max-width: 860px){
  .co{padding:0; align-items:stretch}
  .co-panel{max-height:none; height:100%; border-radius:0}
  .co-top{flex-wrap:wrap; gap:12px 16px; padding:16px 18px}
  .co-top h2{font-size:24px}
  .co-steps{order:3; width:100%; justify-content:space-between}
  .co-steps li{padding:0; font-size:13px}
  .co-steps li + li::before{width:16px}
  .co-body{grid-template-columns:minmax(0,1fr)}
  .co-sum{display:none}
  .co-mini{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:-8px 0 22px; padding:12px 16px; border-radius:10px; background:#fff; border:1px solid var(--g3); font-size:14px}
  .co-mini b{font-family:var(--serif); font-size:20px; font-weight:500; color:var(--navy); white-space:nowrap}
  .co-main{padding:26px 18px 28px}
  .co-h{font-size:30px}
  .co-foot{padding:12px 16px; gap:10px}
  .co-foot .btn-primary{padding:0 20px}
}
@container site (max-width: 600px){
  .co-grid2,.tiles,.co-card{grid-template-columns:minmax(0,1fr)}
  .co-step-l{display:none}
  .co-steps li.is-on .co-step-l{display:inline}
  .co-foot-total b{font-size:20px}
  .co-done h3{font-size:34px}
}

/* home hero back to the alpine dawn, keeping the scroll push-in */
.hero-fly.hero-alps .hero-topo{display:block}
.hero-fly.hero-alps .hero-shade{background:linear-gradient(180deg, rgba(22,28,61,.45) 0%, rgba(22,28,61,.08) 38%, rgba(22,28,61,.78) 100%)}
.hero-fly.hero-alps .hero-media img{transform-origin:68% 58%}
@keyframes flyThroughAlps{
  0%{transform:none}
  100%{transform:scale(1.7) translateY(3%)}
}
@supports (animation-timeline: scroll()){
  .hero-fly.hero-alps .hero-media img{animation:windowIntro 2.4s var(--ease) both, flyThroughAlps linear both; animation-timeline:auto, scroll(root); animation-range:normal, 0px 820px}
  .hero-fly.hero-alps .hero-topo{animation:topoDrift linear both; animation-timeline:scroll(root); animation-range:0px 820px}
}
@keyframes topoDrift{to{transform:scale(1.25); opacity:0}}

/* =====================================================================
   V3 — "Business card" system: Montserrat, charcoal + turing panels,
   topographic light grounds, four-colour brand rails, film hero
   ===================================================================== */
.ft{--serif:'Montserrat','Helvetica Neue',Helvetica,sans-serif; --char:#454545; --char-d:#343434; --g1:#F2F2F1; --tur-d:url(../img/turing-dark.png); --tur-w:url(../img/turing-white.png); --topo-g:url(../img/topo-gray.png)}
.ft .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.ft .display{font-weight:500; letter-spacing:-.035em; line-height:1.02}
.ft .display em{font-style:normal; font-weight:700; color:inherit}
.ft .h-xl{font-size:clamp(44px, 6.6cqi, 108px)}
.ft .h-lg{font-size:clamp(32px, 3.9cqi, 58px); line-height:1.06}
.ft .num{font-style:normal; font-weight:600; font-size:18px; letter-spacing:.02em}
.ft h3,.ft h4,.ft .svc-bubble-title,.ft .tour h3,.ft .co-h,.ft .board-cell b{letter-spacing:-.02em}
.ft .quote{font-style:normal; font-weight:500; letter-spacing:-.02em}
.ft .svc-bubble-title{font-weight:600; font-size:24px}
.ft .tour h3{font-weight:600; font-size:26px}
.ft .svc-row h3{font-weight:600; font-size:34px}
.ft .point h3{font-weight:600; font-size:28px}
.ft .form-card > h2,.ft .info-card h3,.ft .visit-body .display,.ft .pv-head h2,.ft .success h2{font-weight:600; letter-spacing:-.03em}

/* four-colour brand pieces (from the stationery) */
.c-red{background:#E2381F} .c-yel{background:#F9C21B} .c-navy{background:#263163} .c-green{background:#4E8A2E}
.brand-rail{position:absolute; left:0; top:0; bottom:0; width:14px; z-index:3; display:flex; flex-direction:column}
.brand-rail i{flex:1; position:relative; transform-origin:top}
.brand-rail i::after,.hero-curtain i::after,.ft .brandbar i::after,.hdr-brand i::after{content:""; position:absolute; inset:0; background:var(--tur-d) center/160px auto; opacity:.22; mix-blend-mode:multiply}
.hdr-brand{display:flex; height:4px}
.hdr-brand i{flex:1; position:relative}
.ft .brandbar{height:10px}
.ft .brandbar i{position:relative}

/* topographic light ground */
.ft .topo-sec{position:relative; isolation:isolate}
.ft .topo-sec::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--topo-g) center/1300px auto; opacity:.45; -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent)}

/* ---------- HOME HERO (film) ---------- */
.hero-v3{position:relative; min-height:880px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#0e2a33}
.hero-v3 .hero-film{position:absolute; inset:0; overflow:hidden}
.hero-v3 .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-v3 .hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,30,30,.45) 0%, rgba(30,30,30,.05) 34%, rgba(30,30,30,.12) 58%, rgba(36,36,36,.86) 100%), linear-gradient(90deg, rgba(36,36,36,.45) 0%, rgba(36,36,36,0) 55%)}
.hero-grain{position:absolute; inset:0; background:var(--tur-w) center/420px auto; opacity:.045; pointer-events:none}
.hero-curtain{position:absolute; inset:0; z-index:6; display:grid; grid-template-columns:repeat(4, 1fr); pointer-events:none}
.hero-curtain i{position:relative; transform:translateY(-101%)}
.hero-v3 .hero-inner{position:relative; z-index:4; padding:170px 0 150px 0}
.hero-v3 .wrap{padding-left:84px}
.hero-v3 .hero-kicker{font-size:14px; letter-spacing:.02em; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:14px}
.hero-v3 .hero-kicker::before{content:""; width:36px; height:2px; background:linear-gradient(90deg,#E2381F 0 25%,#F9C21B 25% 50%,#4E8A2E 50% 75%,#fff 75%)}
.hero-title{margin-top:22px}
.hero-title .tl{display:block}
.hero-title .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-right:.24em}
.hero-title .wi{display:inline-block; transform-origin:0 100%}
.hero-title .tl-b{font-weight:700}
.hero-v3 .hero-sub{color:rgba(255,255,255,.88); max-width:46ch}
.hero-v3 .board{background:rgba(52,52,52,.62); border-color:rgba(255,255,255,.16)}
.hero-v3 .board::before{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--tur-w) center/300px auto; opacity:.05; pointer-events:none}
.hero-v3 .board > *{position:relative}
.hero-v3 .flap-c{background:linear-gradient(#3e3e3e 0 50%, #353535 50% 100%)}
@supports (animation-timeline: scroll()){
  .hero-v3 .hero-film{animation:filmFrame linear both; animation-timeline:scroll(root); animation-range:0px 760px}
  .hero-v3 .hero-video{animation:filmPush linear both; animation-timeline:scroll(root); animation-range:0px 760px}
  .hero-v3 .hero-grid > :first-child{animation:heroTextOut linear both; animation-timeline:scroll(root); animation-range:0px 600px}
  .hero-v3 .board{animation:boardOut linear both; animation-timeline:scroll(root); animation-range:0px 700px}
}
@keyframes filmFrame{to{clip-path:inset(0 2.5% 7% 2.5% round 0 0 28px 28px)}}
@keyframes filmPush{to{transform:scale(1.14) translateY(3%)}}
@media (prefers-reduced-motion: reduce){ .hero-v3 .hero-film,.hero-v3 .hero-video,.hero-v3 .hero-grid > :first-child,.hero-v3 .board{animation:none !important} }

/* ---------- page heroes ---------- */
.ft .sub-hero{min-height:600px}
.ft .sub-hero .hero-shade{background:linear-gradient(180deg, rgba(40,40,40,.45) 0%, rgba(40,40,40,.1) 40%, rgba(40,40,40,.82) 100%), linear-gradient(90deg, rgba(40,40,40,.5), rgba(40,40,40,0) 60%)}
.ft .sub-hero .hero-topo{opacity:.05}
.ft .sub-hero .wrap{padding-left:84px}
.ft .sub-hero .display em{font-weight:700}
.ft .sub-split{background:#E3E3DE; color:var(--char); min-height:600px}
.ft .sub-split .hero-media{left:auto; right:0; width:46%}
.ft .sub-split .hero-media img{object-fit:cover}
.ft .sub-split .hero-shade,.ft .sub-split .hero-topo{display:none}
.ft .sub-split .display{color:var(--char)}
.ft .sub-split::after{content:""; position:absolute; inset:0 46% 0 0; background:var(--topo-g) center/1100px auto; opacity:.5; z-index:0}
.ft .sub-split .hero-inner{z-index:2; position:relative}

/* ---------- charcoal panels (turing) ---------- */
.ft .cta-band{background:var(--char)}
.ft .cta-band .topo{background:var(--tur-w) center/380px auto; opacity:.06; animation:none; inset:0}
.ft .cta-band .btn-primary{background:#fff; color:var(--char)}
.ft .ftr{background:var(--char-d)}
.ft .ftr .turing{width:100%; opacity:.045; background-size:380px auto}
.ft .info-card{background:var(--char); border-radius:14px}
.ft .info-card .turing{inset:0; width:auto; height:auto; right:0; bottom:0; border-radius:0; background-size:320px auto; opacity:.06}
.ft .info-list .ic{background:#fff; border:0; color:var(--char); width:44px; height:44px}
.ft .process{background:#fff}

/* tours + cards */
.ft .tour-media img{filter:saturate(.92) contrast(1.04)}
.ft .tour-tag{background:var(--char); color:#fff}
.ft .tour-media::before{content:""; position:absolute; inset:0; z-index:1; background:var(--topo-g) center/700px auto; opacity:.12; mix-blend-mode:screen; pointer-events:none}
.ft .svc-bubble{border-radius:20px}
.ft .chip.is-on{background:var(--char); border-color:var(--char)}

@container site (max-width: 1100px){
  .hero-v3 .wrap,.ft .sub-hero .wrap{padding-left:60px}
}
@container site (max-width: 860px){
  .ft .sub-split .hero-media{width:100%; opacity:.28}
  .ft .sub-split::after{inset:0}
}
@container site (max-width: 600px){
  .brand-rail{width:8px}
  .hero-v3{min-height:760px}
  .hero-v3 .wrap,.ft .sub-hero .wrap{padding-left:30px}
  .hero-v3 .hero-inner{padding:130px 0 110px}
  .ft .sub-hero{min-height:500px}
}

/* =====================================================================
   V4 — clean imagery, textures only on charcoal (scaled, never tiled),
   scroll-scrubbed film, inspiration gallery
   ===================================================================== */
/* colour pieces stay flat */
.brand-rail i::after,.hero-curtain i::after,.ft .brandbar i::after,.hdr-brand i::after{display:none}
/* no texture over photos or light grounds */
.ft .hero-topo,.ft .topo-deco,.ft .hero-grain{display:none}
.ft .topo-sec::before,.ft .sub-split::after,.ft .tour-media::before,.ft .pv-head::before,.ft .svc-card::before{display:none}
/* turing only on charcoal, stretched to fit (no repeat seams) */
.ft .ftr .turing{left:0; right:0; top:0; bottom:0; width:auto; height:auto; background:var(--tur-w) center/cover no-repeat; opacity:.05}
.ft .info-card .turing{inset:0; background:var(--tur-w) center/cover no-repeat; opacity:.06}
.hero-v3 .board::before{background:var(--tur-w) center/cover no-repeat; opacity:.05}

/* ---------- pinned, scroll-scrubbed hero film ---------- */
.hero-scroll{position:relative; height:2700px}
.hero-v3.hero-pin{position:sticky; top:0; height:min(100vh, 1000px); min-height:700px; --p:0; --q:clamp(0, calc((var(--p) - .72) * 3.6), 1); --s:clamp(0, calc((var(--p) - .38) * 4), 1)}
.hero-v3 .hero-film{animation:none !important; clip-path:inset(0 calc(var(--q) * 3%) calc(var(--q) * 5%) calc(var(--q) * 3%) round 0 0 calc(var(--q) * 26px) calc(var(--q) * 26px)); background:#0d3b44}
.hero-v3 .hero-video{animation:none !important; transform:scale(calc(1.02 + var(--p) * .1)); will-change:transform}
.hero-v3 .hero-shade{background:linear-gradient(180deg, rgba(20,24,30,.42) 0%, rgba(20,24,30,0) 30%, rgba(20,24,30,0) 55%, rgba(20,24,30,.72) 100%), linear-gradient(90deg, rgba(20,24,30,.38) 0%, rgba(20,24,30,0) 55%)}
.hero-v3 .hero-shade::after{content:""; position:absolute; inset:0; background:rgba(20,24,30,.38); opacity:var(--s)}
.hero-v3 .hero-grid > :first-child{animation:none !important; opacity:clamp(0, calc(1 - var(--p) * 3.4), 1); transform:translateY(calc(var(--p) * -170px))}
.hero-v3 .board{animation:none !important; opacity:clamp(0, calc(1 - var(--p) * 3), 1); transform:translateY(calc(var(--p) * -110px))}
.hero-statement{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; text-align:center; padding:0 24px; opacity:var(--s); transform:translateY(calc((1 - var(--s)) * 46px)); pointer-events:none}
.hero-statement .display{font-size:clamp(38px, 5.6cqi, 88px); color:#fff; max-width:16ch; text-shadow:0 10px 40px rgba(0,0,0,.25)}
.hero-statement .btn{pointer-events:auto; visibility:visible}
.hero-progress{position:absolute; right:40px; bottom:48px; z-index:5; display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.8); opacity:clamp(0, calc(1 - var(--q) * 2), 1)}
.hero-progress i{display:block; width:2px; height:64px; background:rgba(255,255,255,.25); border-radius:2px; overflow:hidden}
.hero-progress b{display:block; width:100%; height:100%; background:#fff; transform-origin:top; transform:scaleY(var(--p))}
@media (prefers-reduced-motion: reduce){ .hero-scroll{height:auto} .hero-v3.hero-pin{position:relative} .hero-statement,.hero-progress{display:none} }

/* ---------- page heroes: photo + gradient only ---------- */
.ft .sub-split{background:#E3E3DE; min-height:680px; align-items:flex-end}
.ft .sub-split .hero-media{inset:0; left:0; right:0; width:auto; opacity:1}
.ft .sub-split .hero-media img{object-fit:cover; object-position:50% 66% !important}
.ft .sub-split .hero-shade{display:block; background:linear-gradient(180deg, rgba(227,227,222,0) 50%, rgba(227,227,222,.92) 86%)}
.ft .sub-split .hero-inner{text-align:center; padding-bottom:64px}
.ft .sub-split .display{margin-left:auto; margin-right:auto; max-width:none}
.ft .sub-split .brand-rail{display:flex}

/* ---------- inspiration gallery (expanding panels) ---------- */
.gal{display:flex; gap:12px; height:600px}
.gal-item{position:relative; flex:1 1 0; min-width:0; padding:0; border:0; border-radius:10px; overflow:hidden; background:#2c2c2c; color:#fff; text-align:left; cursor:pointer; transition:flex-grow .9s cubic-bezier(.16,1,.3,1)}
.gal-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.gal-item::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%)}
.gal:not(:hover) .gal-item:first-child,.gal-item:hover,.gal-item:focus-visible{flex-grow:3.6}
.gal:not(:hover) .gal-item:first-child img,.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1)}
.gal-item:focus-visible{outline:3px solid var(--green); outline-offset:3px}
.gal-cap{position:absolute; left:26px; right:26px; bottom:24px; z-index:2; display:flex; flex-direction:column; gap:6px}
.gal-place{font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.8)}
.gal-title{font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; white-space:nowrap}
.gal-go{display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-size:14px; font-weight:500; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .6s cubic-bezier(.16,1,.3,1)}
.gal-item:not(:hover):not(:focus-visible) .gal-title{font-size:18px}
.gal:hover .gal-item:not(:hover) .gal-place,.gal:not(:hover) .gal-item:not(:first-child) .gal-place{opacity:0}
.gal:not(:hover) .gal-item:first-child .gal-title{font-size:26px}
.gal:not(:hover) .gal-item:first-child .gal-go,.gal-item:hover .gal-go,.gal-item:focus-visible .gal-go{opacity:1; transform:none}

/* ---------- CTA band on the aurora ---------- */
.ft .cta-band{background:#0b1a1f; overflow:hidden}
.cta-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.cta-shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,16,22,.82) 0%, rgba(10,16,22,.55) 55%, rgba(10,16,22,.25) 100%)}
.ft .cta-band .inner{z-index:1}

/* ---------- About: visit panel image ---------- */
.ft .visit-map{background:#2c2c2c; overflow:hidden}
.ft .visit-map img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

@container site (max-width: 860px){
  .gal{height:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; -webkit-overflow-scrolling:touch}
  .gal-item{flex:0 0 74%; height:460px; scroll-snap-align:start}
  .gal-item img{transform:none}
  .gal .gal-item .gal-place,.gal .gal-item .gal-go{opacity:1 !important; transform:none}
  .gal .gal-item .gal-title{font-size:24px !important}
  .hero-scroll{height:2200px}
}
@container site (max-width: 600px){
  .hero-v3.hero-pin{min-height:640px}
  .hero-progress{right:20px; bottom:28px}
  .ft .sub-split{min-height:560px}
  .ft .sub-split .hero-media img{object-position:50% 58% !important}
}

/* =====================================================================
   V5 — GSAP + ScrollTrigger + Lenis own the motion when present
   ===================================================================== */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* hand CSS-driven entrances over to GSAP so one system controls each property */
html.gsap-on .ft .sr,html.gsap-on .ft .sr-img,html.gsap-on .ft .parallax img,html.gsap-on .ft .fade-in,
html.gsap-on .ft .tour.page,html.gsap-on .ft .hero-title .w,html.gsap-on .ft .sub-hero .hero-media img,
html.gsap-on .ft .sub-hero .line > span{animation:none}
html.gsap-on .ft .intro .frame img,html.gsap-on .ft .cta-img,html.gsap-on .ft .visit-map img{will-change:transform}

/* V6 — slower 16 s film, end dissolves into the page (no frame), no quick-quote bar */
.hero-scroll{height:3400px}
.hero-v3 .hero-film{clip-path:none !important; border-radius:0}
.hero-v3 .hero-video{transform:scale(calc(1.02 + var(--p) * .06))}
.hero-v3 .hero-shade{opacity:calc(1 - var(--q) * .85)}
.hero-fade{position:absolute; left:0; right:0; bottom:0; height:70%; z-index:3; pointer-events:none; background:linear-gradient(180deg, rgba(242,242,241,0) 0%, rgba(242,242,241,.55) 45%, #F2F2F1 100%); opacity:var(--q); transform:translateY(calc((1 - var(--q)) * 30%))}
.hero-statement{opacity:calc(var(--s) * (1 - var(--q)))}
.hero-v3 .brand-rail{opacity:calc(1 - var(--q))}
.hero-progress{opacity:calc(1 - var(--q) * 1.6)}
.ft .gal-sec{padding-top:40px}
@container site (max-width: 860px){ .hero-scroll{height:2700px} }

/* =====================================================================
   V7 — header: transparent + white over the hero, solid + colour on scroll
   ===================================================================== */
.ft .hdr{position:sticky; top:0; margin-bottom:-108px; transition:background-color .5s ease, border-color .5s ease, box-shadow .5s ease, backdrop-filter .5s ease}
.ft .hdr .logo-white{display:none}
.ft .hdr.is-top{background:transparent; border-bottom-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.ft .hdr.is-top .logo-color{display:none}
.ft .hdr.is-top .logo-white{display:block}
.ft .hdr.is-top .nav-link{color:#fff}
.ft .hdr.is-top .nav-link::after{background:#fff}
.ft .hdr.is-top .lang{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35)}
.ft .hdr.is-top .lang button{color:#fff}
.ft .hdr.is-top .lang button.is-on{background:#fff; color:var(--navy)}
.ft .hdr.is-top .hdr-cta{background:#fff; color:var(--navy)}
.ft .hdr.is-top .burger{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}
.ft .hdr.is-top .hdr-route{opacity:0}
.ft .hdr.is-solid{box-shadow:0 10px 30px -20px rgba(20,24,30,.35)}
.ft .hdr .hdr-logo img{transition:opacity .4s}
@container site (max-width: 600px){ .ft .hdr{margin-bottom:-88px} }

/* "Conoce Nuestros Paquetes" — large pill CTA */
.pk-sec{padding:30px 0 130px}
.pk-wrap{display:flex; justify-content:center}
.pk-btn{position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:30px; padding:16px 16px 16px 46px; border-radius:999px; border:1.5px solid var(--char); background:transparent; color:var(--char); font-family:var(--sans); font-size:clamp(22px, 2.3cqi, 34px); font-weight:600; letter-spacing:-.02em; transition:color .6s ease, border-color .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
.pk-fill{position:absolute; inset:0; z-index:-1; background:var(--char); border-radius:inherit; transform:translateY(102%); transition:transform .75s cubic-bezier(.16,1,.3,1)}
.pk-ico{position:relative; flex:none; width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--char); color:#fff; transition:transform .75s cubic-bezier(.16,1,.3,1), background .5s, color .5s}
.pk-ico::before{content:""; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(#E2381F 0 25%, #F9C21B 0 50%, #263163 0 75%, #4E8A2E 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation:pkSpin 5s linear infinite paused}
@keyframes pkSpin{to{transform:rotate(360deg)}}
.pk-btn:hover,.pk-btn:focus-visible{color:#fff; transform:translateY(-3px)}
.pk-btn:hover .pk-fill,.pk-btn:focus-visible .pk-fill{transform:none}
.pk-btn:hover .pk-ico,.pk-btn:focus-visible .pk-ico{background:#fff; color:var(--char); transform:rotate(45deg)}
.pk-btn:hover .pk-ico::before,.pk-btn:focus-visible .pk-ico::before{animation-play-state:running}
.pk-btn:focus-visible{outline:3px solid var(--green); outline-offset:4px}
@container site (max-width: 600px){ .pk-btn{gap:16px; padding:10px 10px 10px 26px; font-size:19px} .pk-ico{width:56px; height:56px} .pk-sec{padding:20px 0 90px} }
@media (prefers-reduced-motion: reduce){ .pk-ico::before{animation:none} }

/* =====================================================================
   V8 — MegaTravel packages: cards + light detail modal
   ===================================================================== */
.pkg-count{font-size:14px; color:var(--g6); margin:-28px 0 26px}
.ft .pkg-grid{gap:26px}
.pkg{display:flex; flex-direction:column; background:#fff; border:1px solid var(--g3); border-radius:12px; overflow:hidden; transition:box-shadow .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
.pkg:hover{box-shadow:0 30px 60px -36px rgba(20,24,30,.45); transform:translateY(-4px)}
.pkg-media{position:relative; display:block; width:100%; aspect-ratio:1024/575; padding:0; border:0; background:var(--g2); overflow:hidden; cursor:pointer}
.pkg-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pkg:hover .pkg-media img{transform:scale(1.05)}
.pkg-media:focus-visible{outline:3px solid var(--green); outline-offset:-3px}
.pkg-days{position:absolute; left:12px; bottom:12px; background:var(--char); color:#fff; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px}
.pkg-body{display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1}
.pkg-region{font-size:12.5px; font-weight:600; color:var(--green-ink); letter-spacing:.01em}
.pkg h3{font-size:20px; font-weight:600; line-height:1.25; color:var(--ink); letter-spacing:-.015em; text-wrap:balance}
.pkg-countries{font-size:14px; line-height:1.55; color:var(--g6)}
.pkg-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:auto; padding-top:14px; border-top:1px solid var(--g2)}
.pkg-price{display:flex; flex-direction:column; line-height:1.2}
.pkg-price small{font-size:12px; color:var(--g6)}
.pkg-price b{font-size:22px; font-weight:700; color:var(--navy); letter-spacing:-.02em}
.pkg-price em{font-style:normal; font-size:12px; color:var(--g6)}
.pkg-more{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:8px 0; min-height:44px; font-size:14px; font-weight:600; color:var(--navy); cursor:pointer}
.pkg-more svg{transition:transform .4s ease}
.pkg-more:hover svg{transform:translateX(4px)}
.pkg-book{width:100%; margin-top:10px}

/* detail modal */
.pkm-panel{max-width:960px; max-height:min(90vh, 900px)}
.pkm .pv-close{z-index:5; background:rgba(255,255,255,.92)}
.pkm-scroll{overflow-y:auto; overscroll-behavior:contain}
.pkm-media{aspect-ratio:1024/575; background:var(--g2)}
.pkm-media img{width:100%; height:100%; object-fit:cover; display:block}
.pkm-body{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px; padding:32px 40px 40px}
.pkm-main h2{font-size:clamp(26px, 2.6cqi, 36px); font-weight:600; letter-spacing:-.03em; line-height:1.1; color:var(--ink); margin:8px 0 24px}
.pkm-main h4{font-size:13px; font-weight:600; color:var(--g6); margin:22px 0 10px; letter-spacing:.02em}
.pkm-route{list-style:none; margin:0; padding:0; counter-reset:stop; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 20px}
.pkm-route li{counter-increment:stop; display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed var(--g3); font-size:14.5px; color:var(--g8)}
.pkm-route li::before{content:counter(stop); flex:none; width:24px; height:24px; border-radius:50%; background:var(--g2); color:var(--navy); font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.pkm-side{align-self:start; position:sticky; top:20px; display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:12px; background:var(--char); color:#fff}
.pkm-from{font-size:13px; color:rgba(255,255,255,.7)}
.pkm-price{font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1}
.pkm-tax{font-size:13.5px; color:rgba(255,255,255,.8)}
.pkm-note{font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.65); margin:8px 0 10px}
.pkm-side .btn{width:100%}
.pkm-side .btn-ghost{border-color:rgba(255,255,255,.4); color:#fff}
.pkm-side .btn-ghost:hover{background:#fff; color:var(--char)}
.pkm-code{font-size:12px; color:rgba(255,255,255,.55); margin-top:6px}
@container site (max-width: 860px){
  .pkm-body{grid-template-columns:minmax(0,1fr); padding:24px 22px 28px; gap:24px}
  .pkm-side{position:static}
  .pkm-route{grid-template-columns:minmax(0,1fr)}
}

/* V9 — gallery shows MegaTravel packages; clean heroes */
.ft .gal{height:520px}
.ft .gal-item img{object-position:50% 60%}
.ft .gal-item::after{background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%)}
.gal-title{white-space:normal; max-width:22ch; text-wrap:balance}
.gal-price{font-size:15px; font-weight:600; color:#fff; opacity:0; transition:opacity .5s}
.gal:not(:hover) .gal-item:first-child .gal-price,.gal-item:hover .gal-price,.gal-item:focus-visible .gal-price{opacity:1}
.gal-item:not(:hover):not(:focus-visible) .gal-title{max-width:14ch}
.ft .brand-rail{display:none}
@container site (max-width: 860px){ .ft .gal .gal-item .gal-price{opacity:1} .ft .gal-item{height:420px} }