:root {
  --navy: #0d3b57;
  --sea: #1c86b5;
  --sand: #f7f3ea;
  --sun: #f4a259;
  --ink: #14222e;
  --muted: #56697a;
  --radius: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--ink); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
header nav a { color: #fff; text-decoration: none; margin-left: 22px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.3); }

.hero { position: relative; min-height: min(92vh, 760px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .text { position: relative; padding: 0 0 72px; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 0; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.hero p { font-size: 1.2rem; max-width: 560px; margin: 12px 0 24px; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.btn { display: inline-block; background: var(--sun); color: var(--ink); padding: 13px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; }

section { padding: 72px 0; }
section h2 { font-size: 2rem; margin: 0 0 8px; }
section .lead { color: var(--muted); margin: 0 0 32px; }

.trips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.trip { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 24px rgba(13,59,87,.08); }
.trip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.trip .body { padding: 18px 20px 22px; }
.trip h3 { margin: 0 0 6px; }
.trip .meta { color: var(--muted); font-size: .95rem; }
.trip .price { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin-top: 10px; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.gallery button:hover img { transform: scale(1.05); }

.lightbox { position: fixed; inset: 0; background: rgba(5,20,30,.92); display: none; place-items: center; z-index: 50; padding: 20px; }
.lightbox.open { display: grid; }
.lightbox img { max-height: 86vh; border-radius: 12px; }
.lightbox button { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; }

.contact { background: var(--navy); color: #e6f1f7; }
.contact a { color: var(--sun); }
.contact .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

footer { background: #082838; color: #9fb8c8; padding: 22px 0; font-size: .9rem; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 720px) {
  header nav { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}