/* Hooked Bali — design language taken from the archived noboundaries-oman
   site (~/crawls/collections/noboundaries-oman), not invented:

     ground     --color_11  #0E1821   near-black navy, the page floor
     panels     #FAFAFA / #242323     solid light cards, dark grey bands
     teal set   --color_21..25        #053342 #2B8FB3 #50C4ED #86D2ED #ABE0F2
     nav        Spinnaker, #ABE0F2, hover #FF0808   (their literal --txth)
     display    Caudex serif          headings and card titles
     body       Open Sans

   The house move is big photography, very few words, and high-contrast light
   panels sitting on a near-black ground. */

:root {
  /* One ground, three depths of the same water. #242323 used to sit in here
     and it was a warm grey — the only off-palette colour on the page, and a
     large part of why the lower half read as hard slabs. */
  --ink:      #0b1622;
  --ink-2:    #12222f;
  --ink-3:    #16283a;
  --slate:    #516371;
  --mist:     #8293a1;
  --haze:     #c5d0d9;
  --paper:    #fafafa;
  --deep:     #053342;
  --teal:     #2b8fb3;
  --cyan:     #50c4ed;
  --cyan-2:   #86d2ed;
  --cyan-3:   #abe0f2;
  --alert:    #ff0808;
  --line:     rgba(171, 224, 242, .16);
  --wrap:     1180px;
  --radius:   8px;
  --glow:     rgba(80, 196, 237, .09);
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at attribute specificity, which any
   class that sets display beats — .cards { display: grid } made the hidden
   Unavailable panel render anyway. Guard it once, globally. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* A single continuous ground with light falling from the top, so sections
     sit in one space instead of stacking as separate painted panels. */
  background:
    radial-gradient(130% 55% at 50% 0%, #16293a 0%, transparent 58%),
    var(--ink);
  background-attachment: fixed;
  color: var(--haze);
  font: 400 16px/1.7 "Open Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .card-title, .brand-name, .score {
  font-family: Caudex, "Iowan Old Style", Georgia, serif;
  font-weight: 700;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.1; margin: 0 0 .45em; color: #fff; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 0 0 .4em; color: var(--paper); }
h3 { font-size: 1.3rem; margin: 0 0 .35em; color: var(--paper); }

a { color: var(--cyan); }
img { max-width: 100%; display: block; }

.wrap { position: relative; z-index: 1; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Spinnaker does the small structural labels — nav, eyebrows, buttons. */
.eyebrow, .bar-nav a, .btn, .tab, .chips li, .badge, .details dt, .sheet-block h4 {
  font-family: Spinnaker, "Open Sans", sans-serif;
}
.eyebrow {
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cyan-2); margin: 0 0 1em;
}
.lede { font-size: 1.06rem; color: var(--haze); max-width: 58ch; }
.micro { font-size: .88rem; color: var(--mist); }

.skip { position: absolute; left: -9999px; padding: .6rem 1rem; background: var(--cyan); color: var(--ink); z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- header ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  /* Match the content column so the logo sits on the same left edge as every
     heading below it; falls back to a plain gutter on narrow screens. */
  padding: .75rem max(1.25rem, calc((100% - var(--wrap)) / 2));
  background: rgba(11, 22, 34, .72);
  backdrop-filter: blur(14px) saturate(140%);
}
.bar::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--paper); }
.brand-mark {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--cyan-3);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 -8px 0 var(--cyan-3);
}
.brand-name { font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; }
.brand-name em { font-style: normal; color: var(--cyan-3); }

.bar-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.bar-nav a {
  color: var(--cyan-3); text-decoration: none;
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
}
/* Their nav hover really is pure red — kept rather than softened. */
.bar-nav a:hover, .bar-nav a:focus { color: var(--alert); }
@media (max-width: 1100px) {
  .bar { gap: 1rem; }
  .bar-nav { gap: .9rem; }
  .bar-nav a { font-size: .76rem; letter-spacing: .1em; }
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: 100px; border: 1px solid transparent;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid { background: var(--cyan); color: var(--ink); }
.btn-solid:hover { background: var(--cyan-2); }
.btn-ghost { border-color: rgba(197, 208, 217, .45); color: var(--haze); }
.btn-ghost:hover { border-color: var(--cyan-3); color: var(--cyan-3); }
.btn-wa { background: #25d366; color: #04231a; }
.btn-wa:hover { background: #43e07d; }
.btn-lg { padding: .95rem 1.9rem; font-size: .9rem; }
@media (max-width: 900px) { .bar-nav { display: none; } .bar-cta { margin-left: auto; } }
@media (max-width: 460px) {
  /* At 375px the brand plus a full-width pill runs past the right edge. */
  .bar { gap: .75rem; padding-inline: 1.25rem; }   /* same gutter as .wrap */
  .brand-name { font-size: 1rem; letter-spacing: .06em; }
  .bar-cta { padding: .55rem .9rem; font-size: .72rem; letter-spacing: .1em; }
}

/* ---------- hero ---------- */
/* Photography carries this section; the copy stays deliberately short. */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; }
.hero-media {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 72% 18%, rgba(80, 196, 237, .16), transparent 62%),
    linear-gradient(180deg, #12293c 0%, #0b1d2b 45%, var(--ink) 100%);
  background-size: cover; background-position: center;
}
.hero-media.has-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 24, 33, .5) 0%, rgba(14, 24, 33, .25) 38%, var(--ink) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  padding: 8rem 0 6rem;
}
.hero .lede { margin-bottom: 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.hero-tag {
  font-family: Spinnaker, sans-serif; color: #fff;
  font-size: .95rem; letter-spacing: .18em; margin: 0 0 1.6rem;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
}
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; width: 22px; height: 34px;
  translate: -50% 0; border: 1px solid rgba(197, 208, 217, .45); border-radius: 12px;
}
.hero-scroll::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px;
  translate: -50% 0; border-radius: 2px; background: var(--cyan-3);
  animation: dip 1.9s ease-in-out infinite;
}
@keyframes dip { 50% { transform: translateY(11px); opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll::after { animation: none; } }
@media (max-height: 800px) {
  .hero { min-height: 88svh; }
  .hero-inner { padding: 6rem 0 4rem; }
}

/* ---------- fishing grounds + trips ---------- */
/* Bands, not slabs. Each tinted section fades in at the top and out at the
   bottom, so no two sections meet on a hard horizontal seam, and a soft glow
   carries the same light the hero has. */
.grounds,
.trips,
.crew,
.gallery-section,
.reviews,
.contact {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: transparent;
}
.trips::before,
.gallery-section::before,
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, var(--band) 12%, var(--band) 88%, transparent 100%);
}
.trips { --band: rgba(18, 34, 47, .85); }
.gallery-section { --band: rgba(22, 40, 58, .8); }
.contact { --band: rgba(18, 34, 47, .9); }

.grounds::after,
.crew::after,
.reviews::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at var(--glow-x, 50%) 40%, var(--glow), transparent 70%);
}
.crew::after { --glow-x: 22%; }
.reviews::after { --glow-x: 78%; }
.map-col { min-width: 0; }
.map-sticky { position: static; }
.map-title { margin-bottom: .25em; }
.map-sub { color: var(--mist); font-size: .93rem; max-width: 40ch; }
.map-wrap {
  margin: 1.3rem 0 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--deep); overflow: hidden;
}
.chart { display: block; width: 100%; height: auto; }
.chart-sea { fill: rgba(43, 143, 179, .32); }
.chart-coast path { stroke: rgba(171, 224, 242, .5); stroke-width: 1.1; }
.chart-spots circle { fill: var(--cyan); }
.chart-spots .halo { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: .5; }
.chart-spots .home circle { fill: var(--alert); }
.chart-spots .home .halo { stroke: var(--alert); }
.chart-spots text {
  font: 400 15px Spinnaker, sans-serif; fill: #e6f4fb;
  paint-order: stroke; stroke: rgba(5, 51, 66, .9); stroke-width: 4px;
}
.spot-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.spot-legend li {
  font-family: Spinnaker, sans-serif; font-size: .76rem; color: var(--mist);
  border: 1px solid var(--line); border-radius: 100px; padding: .24rem .6rem;
}
.spot-legend li.is-home { color: var(--cyan-3); border-color: rgba(171, 224, 242, .4); }

.list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.5rem; }
.list-head h2 { margin: 0; }
.tabs { display: flex; gap: .35rem; margin-left: auto; }
.tab {
  background: none; cursor: pointer; color: var(--cyan-3);
  border: 1px solid var(--line); border-radius: 100px; padding: .5rem 1.1rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.tab[aria-selected="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.tab:disabled { opacity: .35; cursor: default; }
.tab-count { opacity: .65; }

/* Solid light tiles on the near-black ground — the reference's core move.
   Covers arrive at wildly different ratios (1036x1290 through 1600x884), so
   nothing is cropped to a fixed frame: each tile keeps its own shape and
   app.js sizes the grid rows to match. */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.3rem; grid-auto-rows: 8px; align-items: start; margin: 1.6rem 0 0;
}
.card {
  display: flex; flex-direction: column; text-align: left; padding: 0;
  background: var(--paper); border: 0; cursor: pointer; color: var(--ink);
  font: inherit; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  transition: box-shadow .22s ease, transform .22s ease;
}
.card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .46); transform: translateY(-3px); }
.card-cover { overflow: hidden; background: linear-gradient(150deg, var(--teal), var(--deep)); }
.card-cover img { width: 100%; height: auto; display: block; }
/* No cover: a plain block rather than a collapsed sliver. */
.card-cover:empty { aspect-ratio: 4 / 3; }
.card-body { padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.card-title { font-size: 1.18rem; line-height: 1.25; margin: 0 0 .4rem; color: var(--ink); }
.card-meta { font-size: .82rem; color: var(--slate); margin: 0 0 .7rem; }
.card-meta span + span::before { content: "·"; margin: 0 .4rem; opacity: .6; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.chips li {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(14, 24, 33, .18); border-radius: 3px;
  padding: .2rem .45rem; color: var(--slate);
}
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .84rem; margin: auto 0 0; }
.slots { color: var(--teal); font-weight: 600; }
.card.is-hot .card-title { color: var(--alert); }
.badge {
  font-family: Spinnaker, sans-serif;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .24rem .55rem; background: var(--alert); color: #fff;
}
.badge-grey { background: rgba(14, 24, 33, .1); color: var(--slate); }
/* Unavailable trips stay legible but read as inactive. */
.cards.is-closed .card { opacity: .45; filter: saturate(.3); }
.cards.is-closed .card:hover { opacity: .75; filter: saturate(.6); }

.state { color: var(--mist); font-size: .92rem; margin: 1.2rem 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--cyan); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.list-foot { margin-top: 1.6rem; font-size: .86rem; color: var(--mist); }

/* One legend chip per line wastes most of a phone screen; drop the region
   suffix and let them sit two or three abreast. */
@media (max-width: 560px) {
  .spot-legend li { font-size: .72rem; padding: .2rem .5rem; }
  .spot-legend li .region { display: none; }
}

@media (max-width: 960px) {
  .list-head h2 { width: 100%; }
  .tabs { margin-left: 0; }
}

/* ---------- captain ---------- */

.skipper {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.skipper-photo {
  width: 100%; aspect-ratio: 1;
  border-radius: 50%; border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--teal), var(--deep));
  background-size: cover; background-position: center;
}
.skipper-copy .lede { max-width: 58ch; }
@media (max-width: 700px) {
  .skipper { grid-template-columns: 140px minmax(0, 1fr); gap: 1.2rem; }
}

/* Social handles sit with the person, not stranded in the footer. */
.socials { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 1rem; }
.social {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 100px;
  color: var(--cyan-3); text-decoration: none; font-size: .85rem;
}
.social svg { width: 18px; height: 18px; flex: 0 0 auto; }
.social:hover { border-color: var(--cyan); background: var(--cyan); color: var(--ink); }
.foot-links a { display: inline-flex; align-items: center; gap: .4rem; }
.foot-links svg { width: 15px; height: 15px; }

/* ---------- gallery ---------- */
/* Borrowed wholesale from bohofish.com: a small fixed mosaic rather than every
   photo laid out flat. One tall feature tile plus square tiles, and each tile
   pages through its own group of photos in place. That keeps the frame count
   low and the edges flush while still showing everything the crew uploads. */

.gallery-column { min-width: 0; }
.gallery-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1rem;
}
.catch-grid { display: contents; }

.shot,
.boat-shot,
.film {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius); background: #08131c; aspect-ratio: 1;
}
.shot { cursor: zoom-in; }
/* The feature tile carries both rows, so its height comes from the squares
   beside it — roughly 3:4, which suits the portrait phone shots. */
.shot.is-feature { grid-row: span 2; aspect-ratio: auto; }

.strip {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.strip::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; position: relative; height: 100%; scroll-snap-align: center; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.shot:hover .slide img { transform: scale(1.03); }

.boat-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* At rest a portrait film in a square tile is mostly black bars, so the poster
   is cropped to fill. The moment it plays the frame switches to contain,
   because then nothing may be cut. */
.gallery-card video,
.film video {
  width: 100%; height: 100%; object-fit: cover; display: block; background: #000;
}
.gallery-card video.is-playing,
.film video.is-playing { object-fit: contain; }

.slide figcaption,
.boat-shot figcaption,
.film figcaption {
  position: absolute; z-index: 2; top: 0; left: 0; margin: 0; padding: .45rem .75rem;
  background: linear-gradient(180deg, rgba(6, 14, 22, .85), rgba(6, 14, 22, 0));
  padding-bottom: 1.7rem; color: var(--cyan-3);
  font-family: Spinnaker, sans-serif; font-size: .76rem; letter-spacing: .055em;
  width: 100%;
}
.film figcaption { pointer-events: none; }

/* Per-tile paging, only rendered when a tile actually holds more than one. */
.shot-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(14, 24, 33, .72); color: var(--cyan-3);
  display: grid; place-items: center; opacity: 0; transition: opacity .2s ease;
}
.shot:hover .shot-nav, .shot:focus-within .shot-nav { opacity: 1; }
.shot-nav svg { width: 18px; height: 18px; }
.shot-nav:hover { background: var(--cyan); color: var(--ink); }
.shot-nav.prev { left: .5rem; }
.shot-nav.next { right: .5rem; }

.shot-dots {
  position: absolute; z-index: 3; inset: auto 0 .6rem 0;
  display: flex; justify-content: center; gap: .35rem;
}
.shot-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .45);
}
.shot-dots button.on { background: var(--cyan); }

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 94vw; max-height: 94vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(4, 12, 20, .9); backdrop-filter: blur(4px); }
.lightbox img {
  max-width: 94vw; max-height: 88vh; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: var(--cyan); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

.release {
  margin: .65rem 0 0; font-size: .78rem; line-height: 1.5;
  color: var(--mist); text-align: right;
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .shot.is-feature { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .shot.is-feature { aspect-ratio: 1; }
  .shot-nav { opacity: 1; }   /* no hover on touch */
}

/* ---------- google reviews ---------- */

.google-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem; }
.google-head h2 { margin: 0; }
.google-score { display: flex; align-items: center; gap: .5rem; margin: 0; }
.score { font-size: 1.6rem; color: var(--paper); }
.stars { color: #ffc857; letter-spacing: .1em; }
.count { color: var(--mist); font-size: .86rem; }

/* Arrows live outside the frames rather than sitting on top of the text. */
.rev-gallery { position: relative; margin: 1.8rem 0 1rem; padding-inline: 3.6rem; }
.rev-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2rem) / 3);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* proximity, not mandatory: mandatory snap fights smooth programmatic
   scrolling and drags the arrows' jump straight back to where it started. */
.rev-strip::-webkit-scrollbar { display: none; }
/* Uniform frames. An 800-character review scrolls inside its own box rather
   than stretching the row — Google forbids trimming the text itself. */
.review {
  scroll-snap-align: start; background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
  padding: 1.2rem; height: 19rem; overflow-y: auto; overscroll-behavior: contain;
}
.review-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.review-top img, .avatar-fallback { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.avatar-fallback {
  display: grid; place-items: center; background: var(--teal); color: #fff;
  font-family: Caudex, Georgia, serif; font-size: 1rem;
}
.review-who { font-weight: 600; font-size: .9rem; }
.review-when { color: var(--slate); font-size: .78rem; }
.review p { margin: 0; font-size: .9rem; color: #33414c; }

.rev-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(14, 24, 33, .9); color: var(--cyan-3);
  display: grid; place-items: center;
}
.rev-nav svg { width: 26px; height: 26px; }
.rev-nav:hover { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.rev-nav:disabled { opacity: .28; cursor: default; }
.rev-nav:disabled:hover { background: rgba(14, 24, 33, .9); color: var(--cyan-3); border-color: var(--line); }
.rev-nav.prev { left: 0; }
.rev-nav.next { right: 0; }

.rev-dots { display: flex; justify-content: center; gap: .45rem; margin: 0 0 1.2rem; }
.rev-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(171, 224, 242, .3);
}
.rev-dots button.on { background: var(--cyan); }
.google-more { margin: 0; font-size: .88rem; }

@media (max-width: 900px) { .rev-strip { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 620px) {
  .rev-gallery { padding-inline: 0; }
  .rev-strip { grid-auto-columns: 88%; }
  .rev-nav { display: none; }
}

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.contact-cta { margin: 1.8rem 0 .8rem; }
.details { margin: 0; }
.details dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan-2); margin-top: 1.3rem; }
.details dt:first-child { margin-top: 0; }
.details dd { margin: .3rem 0 0; color: var(--haze); font-size: .95rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { position: relative; padding: 2rem 0; background: transparent; }
.foot::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; font-size: .84rem; color: var(--mist); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.foot-links a { color: var(--mist); text-decoration: none; }
.foot-links a:hover { color: var(--cyan-3); }

/* ---------- trip sheet ---------- */
/* A light panel, like the reference's content tiles — not a dark modal. */
.sheet {
  width: min(100% - 2rem, 780px); max-height: 88vh; padding: 0;
  border: 0; border-radius: calc(var(--radius) * 1.6); overflow: hidden;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.sheet::backdrop { background: rgba(5, 20, 30, .82); }
.sheet-body { max-height: 88vh; overflow-y: auto; padding: 0 0 1.8rem; }
.sheet-close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(14, 24, 33, .75); color: #fff; font-size: 1.5rem; line-height: 1;
}
.sheet-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: .4rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.sheet-shots img { scroll-snap-align: center; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sheet-main { padding: 1.5rem clamp(1.2rem, 3vw, 2.2rem) 0; }
.sheet-main h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); }
.sheet-main .card-meta { font-size: .88rem; }
.sheet-main .lede { color: #33414c; }
.sheet-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .9rem;
  margin: 1.3rem 0; padding: 1.1rem 0; border-block: 1px solid rgba(14, 24, 33, .14);
}
.sheet-facts div span {
  display: block; font-family: Spinnaker, sans-serif; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
}
.sheet-facts div strong { font-family: Caudex, Georgia, serif; font-weight: 700; font-size: 1.15rem; }
.sheet-price strong { color: var(--deep); }
.sheet-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.3rem 2rem; }
.sheet-block h4 {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 .6rem;
}
.sheet-block ul { margin: 0; padding-left: 1.1rem; font-size: .91rem; color: #33414c; }
.sheet-block p { margin: 0; font-size: .91rem; color: #33414c; white-space: pre-line; }
.sheet-cta { margin: 1.8rem 0 0; }