:root { --ink:#102f46; --blue:#125f8b; --pale:#edf6fb; --line:#d6e4ed; --text:#415c6d; --radius:12px; --nav-height:80px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-height) + 24px); }
body { margin:0; background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.65; }
button,input,textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.gallery:focus-visible { outline:3px solid #1686ba; outline-offset:5px; }
img { display:block; max-width:100%; object-fit:cover; }
p { margin:0 0 20px; color:var(--text); }
h1,h2,h3 { margin:0; line-height:1.12; letter-spacing:-.035em; }
h2 { font-size:clamp(36px,4.5vw,60px); font-weight:500; margin-bottom:22px; }
h3 { font-size:25px; font-weight:500; margin-bottom:15px; line-height:1.25; }
.wrap { max-width:1320px; margin:auto; padding-left:48px; padding-right:48px; }
.section { padding-top:90px; padding-bottom:90px; }
.section-intro { max-width:760px; margin-bottom:42px; }
.section-intro p { max-width:670px; font-size:18px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.12em; margin-bottom:22px; }
.button { display:inline-flex; align-items:center; justify-content:center; background:var(--blue); color:white; padding:14px 25px; border:1px solid transparent; border-radius:var(--radius); font-weight:600; font-size:15px; cursor:pointer; white-space:nowrap; min-height:50px; transition:background .2s,transform .2s; }
.button:hover { background:#0b466a; transform:translateY(-2px); }
.button.light { background:white; color:var(--ink); }
.button.light:hover { background:var(--pale); }
.text-link { font-weight:600; border-bottom:1px solid var(--blue); padding-bottom:5px; }
.skip { position:fixed; top:-100px; left:20px; z-index:99; background:#fff; padding:12px; }
.skip:focus { top:15px; }
header { position:sticky; top:0; background:#fff; z-index:20; border-bottom:1px solid var(--line); }
.nav { height:var(--nav-height); display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:33px; letter-spacing:.035em; line-height:1; font-weight:700; display:inline-flex; gap:8px; align-items:baseline; }
.logo span { font-size:12px; letter-spacing:.14em; }
nav { display:flex; gap:30px; align-items:center; font-size:14px; font-weight:600; }
nav a:not(.button):hover { color:var(--blue); }
.menu { display:none; }
.hero { position:relative; isolation:isolate; min-height:610px; display:flex; align-items:center; overflow:hidden; }
.hero-image { position:absolute; inset:0; z-index:-2; background:#163e58; }
.hero-image img { height:100%; width:100%; object-position:center 50%; }
.hero:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,28,44,.83),rgba(5,28,44,.25) 65%,rgba(5,28,44,.06)); }
.hero-inner { width:100%; padding-top:60px; padding-bottom:60px; }
.hero h1 { font-size:clamp(43px,5.2vw,71px); color:white; max-width:1050px; font-weight:500; margin-bottom:26px; }
.hero .eyebrow { color:white; }
.hero-description { color:white; max-width:510px; font-size:19px; margin-bottom:32px; }
.intro-strip { display:flex; justify-content:space-between; gap:20px; padding-top:24px; padding-bottom:24px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.tour-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.tour-visual { height:540px; overflow:hidden; border-radius:var(--radius); }
.tour-visual img { width:100%; height:100%; }
.tour-copy h3 { font-size:32px; }
.facts { margin:26px 0; }
.facts div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.facts dt { color:var(--text); }
.facts dd { margin:0; text-align:right; font-weight:600; }
/* The scene and content share one grid row. No negative margins or escaping layer. */
.itinerary { position:relative; isolation:isolate; display:grid; overflow:clip; background:#102f46; color:white; }
.route-scene { grid-area:1 / 1; position:sticky; top:var(--nav-height); align-self:start; height:calc(100dvh - var(--nav-height)); min-height:450px; margin:0; z-index:0; overflow:hidden; pointer-events:none; }
.route-scene:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,28,43,.86),rgba(7,28,43,.72) 45%,rgba(7,28,43,.57)); }
.route-backdrop { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s ease; }
.route-backdrop.active { opacity:1; }
.route-layout { grid-area:1 / 1; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:90px; width:100%; padding-top:48px; padding-bottom:48px; }
.route-heading { position:sticky; top:calc(var(--nav-height) + 32px); align-self:start; padding:15px 0 25px; }
.route-heading h2 { font-size:clamp(39px,4.1vw,56px); color:white; }
.route-heading p { color:#eef6fb; max-width:400px; }
.schedule-note { margin-top:26px; border-top:1px solid #ffffff55; padding-top:22px; max-width:400px; }
.schedule-note strong { font-size:14px; }
.schedule-note p { font-size:14px; line-height:1.6; margin:8px 0 0; }
.route-caption { font-size:12px; line-height:1.6; margin:20px 0 0; }
.route-stops { min-width:0; }
.route-stop { min-height:440px; display:flex; flex-direction:column; justify-content:center; padding:56px 0; border-bottom:1px solid #ffffff3b; }
.route-stop:last-child { border-bottom:0; }
.route-stop h3 { font-size:clamp(29px,3.1vw,40px); color:white; max-width:470px; }
.route-stop p { color:#f0f7fc; max-width:450px; }
.route-stop .stop-time { font-size:16px; color:#c6e8ff; font-weight:600; margin-bottom:18px; }
.stop-duration { font-size:14px; color:#e4f3fe; line-height:1.6; }
.route-stop.active .stop-time { color:white; }
.experience { position:relative; z-index:1; background:var(--pale); }
.destinations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:start; }
.destination { min-width:0; }
.destination img { width:100%; aspect-ratio:4 / 3; height:auto; border-radius:var(--radius); margin-bottom:24px; }
.destination h3 { font-size:24px; }
.destination p { font-size:15px; margin-bottom:0; }
.caption { font-size:13px; line-height:1.6; margin-top:25px; margin-bottom:0; max-width:850px; }
.day { padding-top:75px; padding-bottom:75px; }
.day-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; }
.day-steps article { border-top:1px solid var(--line); padding-top:24px; }
.day-steps h3 { font-size:22px; }
.day-steps p { font-size:15px; margin-bottom:0; }
.about { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; border-top:1px solid var(--line); }
.about-photo img { aspect-ratio:5 / 6; height:auto; width:100%; border-radius:var(--radius); }
.about-copy h2 { font-size:clamp(36px,4vw,50px); }
.gallery-section { padding-top:25px; }
.gallery-section .section-intro { margin-bottom:22px; }
.gallery-controls { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.gallery-controls button { border:1px solid #bfd3e1; border-radius:8px; background:white; color:var(--ink); padding:9px 15px; font-size:14px; cursor:pointer; min-height:44px; }
.gallery-controls button:hover { background:var(--pale); }
.gallery { display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; padding:4px 0; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }
.gallery::-webkit-scrollbar { display:none; }
.gallery-item { flex:0 0 360px; border:0; padding:0; border-radius:var(--radius); overflow:hidden; background:var(--pale); cursor:zoom-in; }
.gallery-item img { width:100%; aspect-ratio:4 / 3; height:auto; transition:transform .35s ease; }
.gallery-item:hover img { transform:scale(1.03); }
.gallery-item:focus-visible { outline-offset:-4px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; }
.contact-copy p { max-width:460px; }
.contact-note { font-size:14px; border-left:3px solid var(--blue); padding-left:16px; margin-top:26px; }
form { border:1px solid var(--line); padding:32px; border-radius:var(--radius); background:#f8fbfd; }
label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
label span { font-weight:400; color:var(--text); }
input,textarea { display:block; width:100%; border:1px solid #bccfdd; border-radius:8px; background:white; padding:12px; color:var(--ink); margin-bottom:20px; min-width:0; }
textarea { resize:vertical; }
.form-note { font-size:13px; margin:16px 0 0; }
#draft-panel { margin-top:30px; border-top:1px solid var(--line); padding-top:24px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
#copy-status { margin-top:15px; font-size:14px; }
footer { border-top:1px solid var(--line); padding-top:45px; padding-bottom:30px; }
.footer-top { display:flex; justify-content:space-between; gap:40px; margin-bottom:30px; }
.footer-top p { font-size:14px; margin-top:15px; }
.footer-bottom { display:flex; justify-content:space-between; font-size:12px; color:var(--text); border-top:1px solid var(--line); padding-top:24px; }
dialog { border:0; border-radius:var(--radius); padding:16px; max-width:90vw; max-height:92dvh; background:white; color:var(--ink); }
dialog::backdrop { background:rgba(4,24,40,.84); }
dialog img { max-height:73dvh; max-width:84vw; width:auto; object-fit:contain; }
dialog button { display:block; margin:0 0 12px auto; border:1px solid var(--line); background:white; color:var(--ink); padding:8px 18px; border-radius:8px; cursor:pointer; }
dialog p { font-size:14px; margin:12px 0 0; }
.motion-ready .reveal-item { opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
.motion-ready .reveal-item.visible { opacity:1; transform:none; }
[hidden] { display:none!important; }
@media(min-width:1600px) { .hero { min-height:690px; } }
@media(max-width:1100px) { .wrap { padding-left:30px; padding-right:30px; } .tour-grid,.about,.contact-grid { gap:35px; } .route-layout { gap:45px; } .route-heading h2 { font-size:42px; } .day-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } nav { gap:20px; } .destinations { gap:22px; } }
@media(max-height:700px) and (min-width:768px) { .route-heading { position:static; } }
@media(max-width:767px) {
 :root { --nav-height:70px; }
 .wrap { padding-left:22px; padding-right:22px; }
 .logo { font-size:29px; }
 .menu { display:block; border:1px solid var(--line); background:white; color:var(--ink); border-radius:8px; padding:9px 16px; font-size:14px; }
 .nav nav { display:none; position:absolute; left:0; right:0; top:var(--nav-height); background:white; padding:25px; box-shadow:0 20px 30px #102f4612; align-items:stretch; }
 .nav nav.open { display:flex; flex-direction:column; gap:22px; }
 .hero { min-height:570px; align-items:end; }
 .hero-inner { padding-top:55px; padding-bottom:45px; }
 .hero h1 { font-size:40px; }
 .hero-image img { object-position:62% center; }
 .hero:after { background:linear-gradient(0deg,rgba(5,28,44,.87),rgba(5,28,44,.35) 70%,rgba(5,28,44,.07)); }
 .hero-description { font-size:17px; max-width:365px; }
 .eyebrow { font-size:12px; letter-spacing:.08em; }
 .intro-strip { gap:12px; font-size:12px; align-items:center; text-align:center; line-height:1.5; padding-top:20px; padding-bottom:20px; }
 .section { padding-top:58px; padding-bottom:58px; }
 .section-intro { margin-bottom:30px; }
 .section-intro p { font-size:16px; }
 h2 { font-size:34px; }
 .tour-grid,.about,.contact-grid { grid-template-columns:1fr; gap:30px; }
 .tour-visual { height:330px; }
 .tour-copy h3 { font-size:28px; }
 .route-layout { grid-template-columns:1fr; gap:0; padding-top:38px; padding-bottom:20px; }
 .route-heading { position:static; padding:0 0 22px; }
 .route-heading h2 { font-size:36px; }
 .route-stop { min-height:330px; padding:40px 0; }
 .route-stop h3 { font-size:30px; }
 .route-scene:after { background:rgba(7,28,43,.77); }
 .destinations { grid-template-columns:1fr; gap:34px; }
 .destination img { aspect-ratio:4 / 3; height:auto; }
 .day-steps { gap:25px; }
 .day-steps h3 { font-size:21px; }
 .about-photo img { aspect-ratio:4 / 3; }
 .gallery-section { padding-top:25px; }
 .gallery-controls { justify-content:flex-start; gap:8px; }
 .gallery-controls button { font-size:13px; padding:9px 11px; }
 .gallery { gap:16px; }
 .gallery-item { flex-basis:280px; }
 form { padding:22px; }
 .footer-top { flex-direction:column; gap:15px; }
 .footer-top nav { flex-wrap:wrap; gap:16px; font-size:13px; }
 .footer-bottom { gap:20px; align-items:start; }
 .facts div { font-size:13px; }
}
@media(max-width:380px) { .day-steps { grid-template-columns:1fr; } .hero h1 { font-size:36px; } .gallery-item { flex-basis:250px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } .motion-ready .reveal-item { opacity:1; transform:none; } }
@keyframes hero-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) { .hero-inner { animation:hero-enter .7s ease-out both; } }