:root { --ink:#183942; --deep:#0d2931; --sand:#f4f0e8; --gold:#bd8e50; --gold-light:#dec199; --line:rgba(24,57,66,.16); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .container { width:min(1180px,calc(100% - 64px)); margin:0 auto; } .eyebrow { margin:0 0 14px; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; } .site-header { position:absolute; top:0; right:0; left:0; z-index:10; color:#fff; border-bottom:1px solid rgba(255,255,255,.25); transition:.25s ease; } .site-header.scrolled { position:fixed; color:var(--ink); background:#fff; border-color:#dfe5e2; } .nav-wrap { display:flex; align-items:center; width:min(1180px,calc(100% - 64px)); min-height:70px; margin:0 auto; } .brand { display:inline-flex; align-items:baseline; font-family:"Montserrat",sans-serif; font-size:22px; font-weight:800; letter-spacing:-.1em; } .brand b { color:var(--gold-light); font-size:15px; } .site-header.scrolled .brand b { color:var(--gold); } .nav-links { display:flex; align-items:center; height:70px; margin-left:auto; } .nav-links a { display:flex; height:100%; align-items:center; padding:0 20px; border-left:1px solid rgba(255,255,255,.24); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .scrolled .nav-links a { border-color:#e0e6e4; } .nav-links .is-active { color:var(--gold-light); } .scrolled .nav-links .is-active { color:var(--gold); } .nav-links .nav-contact { height:auto; margin-left:15px; padding:10px 14px; border:1px solid rgba(255,255,255,.7); } .scrolled .nav-contact { border-color:var(--ink); } .menu-toggle { display:none; margin-left:auto; padding:7px 0 7px 14px; color:inherit; border:0; background:transparent; } .menu-toggle span { display:block; width:25px; height:1px; margin:5px 0; background:currentColor; } .mobile-menu { display:none; } .hero { position:relative; display:flex; min-height:720px; height:100svh; align-items:flex-end; overflow:hidden; color:#fff; } .hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,22,28,.84),rgba(4,22,28,.04) 67%),linear-gradient(90deg,rgba(4,22,28,.45),transparent 65%); } .hero-content { position:relative; z-index:1; width:min(1180px,calc(100% - 64px)); margin:0 auto; padding-bottom:92px; } .breadcrumb { display:flex; gap:9px; margin-bottom:45px; color:rgba(255,255,255,.72); font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .breadcrumb a:hover { color:#fff; } .hero .eyebrow { color:var(--gold-light); } .hero h1 { margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(80px,13vw,180px); font-weight:600; letter-spacing:-.1em; line-height:.78; } .hero h1 em { color:var(--gold-light); font-style:normal; } .hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-top:35px; } .hero-bottom>p { margin:0; font-size:19px; line-height:1.42; } .hero-tags { display:flex; max-width:550px; justify-content:flex-end; flex-wrap:wrap; gap:8px; } .hero-tags span { padding:8px 12px; border:1px solid rgba(255,255,255,.35); background:rgba(13,41,49,.2); backdrop-filter:blur(8px); font-size:11px; } .scroll-cue { position:absolute; right:calc((100% - min(1180px,calc(100% - 64px))) / 2); bottom:33px; z-index:1; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.72); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } .scroll-cue span { width:36px; height:1px; background:var(--gold-light); } .essence { padding:130px 0; background:var(--sand); } .essence-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:120px; } h2 { margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(39px,4.8vw,65px); font-weight:400; letter-spacing:-.065em; line-height:.99; } h2 strong { color:var(--gold); font-weight:700; } .body-copy { max-width:620px; margin:28px 0 0; color:#52676d; font-size:17px; line-height:1.75; } .dark-link { display:inline-flex; gap:12px; margin-top:33px; padding-bottom:6px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; } .facts { display:grid; align-self:start; margin:0; border-top:1px solid var(--line); } .facts div { padding:23px 0; border-bottom:1px solid var(--line); } .facts dt { margin-bottom:7px; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .facts dd { margin:0; font-size:16px; line-height:1.4; } .full-image { position:relative; height:min(68vw,760px); min-height:460px; overflow:hidden; } .full-image img { width:100%; height:100%; object-fit:cover; } .full-image::after { position:absolute; inset:0; content:""; background:rgba(7,25,31,.36); } blockquote { position:absolute; z-index:1; top:50%; left:50%; width:min(820px,calc(100% - 64px)); margin:0; color:#fff; font-family:"Montserrat",sans-serif; font-size:clamp(29px,4vw,54px); font-weight:500; letter-spacing:-.055em; line-height:1.12; text-align:center; transform:translate(-50%,-50%); } .signature { padding:125px 0; color:#fff; background:var(--deep); } .signature .eyebrow { color:var(--gold-light); } .signature h2 strong { color:var(--gold-light); } .signature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px; background:rgba(255,255,255,.14); } .signature article { padding:31px 25px; background:var(--deep); transition:background .25s ease; } .signature article:hover { background:#173b45; } .signature article b { color:rgba(255,255,255,.22); font-family:"Montserrat",sans-serif; font-size:34px; } .signature h3 { margin:36px 0 11px; font-family:"Montserrat",sans-serif; font-size:19px; } .signature article p { margin:0; color:rgba(255,255,255,.67); font-size:14px; line-height:1.65; } .itinerary { padding:130px 0; background:#fff; } .itinerary-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .itinerary-image { position:relative; } .itinerary-image img { height:650px; width:100%; object-fit:cover; } .itinerary-image span { position:absolute; bottom:19px; left:19px; padding:8px 11px; color:var(--ink); background:#fff; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } ol { margin:38px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); } ol li { display:grid; grid-template-columns:65px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); } ol b { color:var(--gold); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } ol h3 { margin:0 0 5px; font-size:17px; } ol p { margin:0; color:#5a6e73; font-size:14px; line-height:1.55; } .gallery { display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; align-items:center; padding:120px max(32px,calc((100% - 1180px)/2)); background:var(--sand); } .gallery-copy h2 { font-size:clamp(35px,4vw,53px); } .gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .gallery-grid img { width:100%; height:240px; object-fit:cover; } .gallery-grid img:first-child { grid-row:span 2; height:495px; } .travel-info { padding:120px 0; } .season-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px; background:var(--line); } .season-grid article { padding:28px 23px; background:#fff; } .season-grid .featured-season { color:#fff; background:var(--gold); } .season-grid span { display:block; margin-bottom:18px; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } .season-grid b { display:block; margin-bottom:15px; font-size:21px; } .season-grid p { margin:0; color:#597075; font-size:14px; line-height:1.6; } .featured-season p { color:rgba(255,255,255,.86); } .final-cta { padding:130px 0; color:#fff; text-align:center; background:linear-gradient(rgba(9,35,42,.87),rgba(9,35,42,.87)),url("https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=2000&q=85") center/cover; } .final-cta .eyebrow { color:var(--gold-light); } .final-cta h2 strong { color:var(--gold-light); } .final-cta p:not(.eyebrow) { max-width:575px; margin:25px auto 31px; color:rgba(255,255,255,.8); font-size:16px; line-height:1.65; } .final-cta>div>div { display:flex; justify-content:center; gap:12px; } .cta-main,.cta-alt { display:inline-flex; min-height:49px; align-items:center; justify-content:center; padding:0 21px; font-size:11px; font-weight:700; } .cta-main { gap:12px; color:var(--ink); background:#fff; } .cta-alt { border:1px solid rgba(255,255,255,.65); } .footer { padding:47px 0 28px; color:#bdcdce; background:#0a2229; } .footer-inner { display:grid; grid-template-columns:1fr 1.7fr auto; align-items:center; gap:26px; } .footer .brand { color:#fff; } .footer p,.footer span { margin:0; font-size:12px; } .footer span { color:#80989b; } .reveal { opacity:0; transform:translateY(23px); transition:opacity .6s ease,transform .6s ease; } .reveal.visible { opacity:1; transform:none; } @media (max-width:900px) { .essence-grid,.itinerary-grid,.gallery { grid-template-columns:1fr; gap:55px; } .signature-grid { grid-template-columns:1fr 1fr; } .gallery { padding:80px 32px; } .itinerary-image img { height:480px; } } @media (max-width:700px) { .container,.nav-wrap,.hero-content { width:min(100% - 40px,1180px); } .nav-links { display:none; } .menu-toggle { display:block; } .mobile-menu { position:fixed; inset:70px 0 auto; z-index:9; padding:15px 20px; color:#fff; background:var(--deep); opacity:0; pointer-events:none; transform:translateY(-10px); transition:.2s; } .mobile-menu.open { opacity:1; pointer-events:auto; transform:none; } .mobile-menu a { display:block; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14); } .hero { min-height:650px; } .hero-content { padding-bottom:70px; } .hero-bottom { display:block; } .hero-tags { justify-content:flex-start; margin-top:25px; } .scroll-cue { display:none; } .essence,.signature,.itinerary,.travel-info,.final-cta { padding:75px 0; } .full-image { min-height:390px; } .signature-grid,.season-grid { grid-template-columns:1fr; } .gallery { padding:75px 20px; } .gallery-grid { gap:9px; } .gallery-grid img { height:150px; } .gallery-grid img:first-child { height:309px; } .footer-inner { grid-template-columns:1fr; } .final-cta>div>div { flex-direction:column; align-items:center; } .cta-main,.cta-alt { width:min(260px,100%); } }