/* Sailing South Haven — plain CSS. System: content/design-brief.md. Restraint on purpose (content/design-review.md):
   no shadows, no hover lifts, no accent-border cards. */
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: optional; src: url(/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-style: normal; font-display: optional; src: url(/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: optional; src: url(/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: optional; src: url(/fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family: "Inter Display"; font-weight: 500; font-style: normal; font-display: optional; src: url(/fonts/inter-display-500.woff2) format('woff2'); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-style: normal; font-display: optional; src: url(/fonts/inter-display-600.woff2) format('woff2'); }

:root {
  --navy: #0b212d;
  --teal: #225269;
  --cyan: #0095c2;
  --cyan-deep: #007599;      /* button background: white text passes AA */
  --cyan-hover: #005f7b;
  --ink: #12262f;            /* neutrals are tinted toward the teal on purpose */
  --body: #2a3d46;
  --muted: #566a73;
  --line: #e3dccf;          /* warm hairlines on the cream page */
  --soft: #f2ece2;          /* warm sand panels */
  --page: #faf7f2;          /* cream page background (owner, 2026-10-02: closer to cream than white) */
  --max: clamp(1080px, 50vw + 280px, 1280px); /* content width: 1080 up to a 1600px screen, 1240 at 1920, stops at 1280 */
  --gutter: clamp(20px, 5vw - 12px, 48px);     /* side margin: 20 on phones, growing to 48 by 1200 */
  --col-gap: clamp(48px, 4.5vw, 64px);         /* the one gap between two desktop columns */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Display", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (max-width: 899px) { html { scroll-padding-bottom: 96px; } }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.65; color: var(--body); background: var(--page); }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } main { flex: 1 0 auto; } /* short pages: the footer sits at the bottom */
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--cyan-hover); }
::selection { background: #c5e3ee; color: var(--ink); }
h1, h2, h3 { margin: 0 0 .6em; font-family: var(--display); font-weight: 600; line-height: 1.15; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.012em; }
@media (min-width: 1440px) { h2 { font-size: clamp(40px, 1.25vw + 22px, 48px); } } /* keeps growing on big screens: 46px at 1920 */
h3 { font-size: 21px; letter-spacing: -0.005em; margin: 2.2em 0 .5em; }
p { margin: 0 0 1em; }
p, li, dd { text-wrap: pretty; } /* no one-word last lines */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--navy); padding: 10px 14px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Buttons: one primary style */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 8px; background: var(--cyan-deep); color: #fff; font: 700 18px/1 var(--font); text-decoration: none; border: 2px solid var(--cyan-deep); cursor: pointer; transition: background .15s, border-color .15s; text-align: center; }
.btn:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); color: #fff; }
.btn--outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--outline:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .25s; background: linear-gradient(rgba(11,33,45,.55), rgba(11,33,45,0)); }
.site-header.is-solid { background: var(--navy); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 214px; height: auto; }
.nav { display: none; align-items: center; gap: 28px; }
.nav a:not(.btn) { color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover { border-bottom-color: var(--cyan); color: #fff; }
.nav .btn { transition: opacity .25s, visibility .25s, background .15s; white-space: nowrap; }
/* Until the hero's own button scrolls away, the header button is invisible but keeps its space, so the menu links sit in
   the same place on every page (owner, 2026-10-08: no jumping links); it then fades in */
.site-header:not(.has-book) .nav .btn { opacity: 0; visibility: hidden; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; content: ""; position: relative; }
.menu-icon::before { position: absolute; top: -8px; } .menu-icon::after { position: absolute; top: 8px; }
.menu-panel { position: absolute; right: 0; top: 56px; width: min(320px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow: auto; background: var(--navy); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 12px; display: grid; gap: 4px; } /* the edge keeps it apart from the navy page header */
.menu-panel a:not(.btn) { color: #fff; font-weight: 600; text-decoration: none; padding: 14px 12px; border-radius: 8px; }
.menu-panel a:not(.btn):hover { background: rgba(255,255,255,.1); }
.menu-panel .btn { margin-top: 8px; }
/* Tablets and up show the three links. Below 900 the booking button lives in the sticky bar, not the header. */
@media (min-width: 600px) { .nav { display: flex; } .menu-nav { display: none; } }
@media (min-width: 600px) and (max-width: 899px) { .nav { gap: 24px; } .nav .btn { display: none; } }
@media (max-width: 599px) { .menu-panel { width: calc(100vw - 40px); } }
@media (max-width: 899px) { .brand img { width: 168px; } .header-inner { height: 68px; } }

/* Hero: the photo does the work. Phones and portrait tablets: the photo sits above the text. Wider: the text sits low
   on the left, on the same line as the logo, over the photo (and the video from 900px). */
.hero { position: relative; min-height: min(70vh, 620px); min-height: min(70svh, 620px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy); }
.hero-media, .hero-shade { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-video { opacity: 0; transition: opacity 1s; }
.hero-video.is-playing { opacity: 1; }
.hero-shade { background: linear-gradient(rgba(11,33,45,.5), rgba(11,33,45,.5)), linear-gradient(180deg, rgba(11,33,45,.5) 0, rgba(11,33,45,0) 22%), linear-gradient(0deg, rgba(11,33,45,.85) 0, rgba(11,33,45,.5) 36%, rgba(11,33,45,0) 70%); }
.hero-copy { position: relative; padding-top: 130px; padding-bottom: clamp(36px, 6vw, 64px); }
.hero-text { max-width: 34rem; }
.kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.hero h1 { color: #fff; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -0.012em; margin-bottom: 14px; }
.lede { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; max-width: 34em; margin: 0 0 26px; color: rgba(255,255,255,.95); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* Three plain facts under the hero button, on the same left edge; no icons or ratings. Stacked below 900px, where one line won't fit. */
.hero-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.hero-facts li { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.9); }
.hero-facts li + li::before { content: "\00B7"; margin: 0 12px; color: rgba(255,255,255,.6); }
@media (max-width: 899px) { .hero-facts { flex-direction: column; gap: 2px; } .hero-facts li + li::before { content: none; } }
/* Desktop: the video is a montage with the boat in different places, so the shade darkens the left and the bottom
   instead of washing out the whole frame. The H1 is the same size as the inner pages' H1. */
@media (min-width: 900px) {
  .hero { min-height: min(84vh, 960px); }
  .hero-copy { padding-bottom: clamp(48px, 6vw, 96px); }
  .hero-text { max-width: 40rem; }
  .hero h1 { font-size: clamp(40px, 2.4vw + 18px, 64px); max-width: 13em; margin-bottom: 20px; }
  .lede { margin-bottom: 32px; }
  .hero-shade { background: linear-gradient(rgba(11,33,45,.22), rgba(11,33,45,.22)), linear-gradient(180deg, rgba(11,33,45,.55) 0, rgba(11,33,45,0) 22%), linear-gradient(90deg, rgba(11,33,45,.72) 0, rgba(11,33,45,.5) 38%, rgba(11,33,45,0) 72%), linear-gradient(0deg, rgba(11,33,45,.6) 0, rgba(11,33,45,0) 50%); }
}
@media (min-width: 1600px) { .lede { font-size: 22px; } }
@media (max-width: 899px) { .hero { min-height: min(82vh, 620px); min-height: min(82svh, 620px); } }
/* Phones: the photo sits above the text, so the boat is never hidden behind the headline. The photo is square when there
   is room and shorter on short screens, so the headline and button fit on the first screen (svh = the height with the
   browser's toolbars showing). */
@media (max-width: 599px) {
  .hero { display: block; min-height: 0; }
  .hero-media, .hero-shade { height: clamp(56vw, calc(100vh - 340px), 100vw); height: clamp(56vw, calc(100svh - 340px), 100vw); }
  .hero-media { position: relative; }
  .hero-shade { inset: 0 0 auto 0; background: linear-gradient(180deg, rgba(11,33,45,.6) 0, rgba(11,33,45,0) 34%); }
  .hero-copy { padding-top: 24px; padding-bottom: 40px; }
}
/* Portrait tablets: there's no video below 900px, so the photo is a still; it sits above the text as on phones */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  .hero { display: block; min-height: 0; }
  .hero-media, .hero-shade { aspect-ratio: 16 / 9; }
  .hero-media { position: relative; }
  .hero-shade { inset: 0 0 auto 0; background: linear-gradient(180deg, rgba(11,33,45,.6) 0, rgba(11,33,45,0) 30%); }
  .hero-copy { padding-top: 36px; padding-bottom: 48px; }
  .hero h1 { font-size: 40px; }
  .lede { font-size: 19px; }
}
@media (max-width: 560px) { .actions .btn { width: 100%; } }
.hero-pause { position: absolute; z-index: 2; right: 20px; top: 92px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(11,33,45,.55); cursor: pointer; }
.hero-pause[hidden] { display: none; }
.hero-pause:hover { background: rgba(11,33,45,.8); }
.hero-pause-icon { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.hero-pause.is-paused .hero-pause-icon { width: 0; height: 0; border: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff; margin-left: 3px; }
/* Desktop: the pause button lines up with the hero button's row (above the facts line), at the right edge of the content column */
@media (min-width: 900px) { .hero-pause { top: auto; bottom: calc(clamp(48px, 6vw, 96px) + 51px); right: max(var(--gutter), calc((100% - var(--max)) / 2)); } }

/* Content blocks */
.block { padding: clamp(56px, 8vw, 104px) 0; }
.block--soft { background: var(--soft); }
/* Two sections on the same cream background: the first one's bottom padding is enough space between them */
main > .block:not(.block--soft) + .block:not(.block--soft) { padding-top: clamp(8px, 2vw, 24px); }
.split { display: grid; gap: 36px; align-items: start; }
.copy { max-width: 36rem; }
.copy--narrow { max-width: 44rem; }
.photo { margin: 0; border-radius: 8px; overflow: hidden; background: var(--soft); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 6 / 7; } .photo--wide { aspect-ratio: 4 / 3; }
.inline-photo { margin: 1.6em 0 1.8em; }
@media (min-width: 900px) {
  .photo--sticky { position: sticky; top: 104px; }
  /* One column system: every two-column section splits 6:5 (About's story 5:6) with the same gap, so the right-hand
     columns all start on the same line */
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--col-gap); }
  .split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Home "listing" (Serenity): photo grid, title and quick facts, then what you'll do beside a plain booking box.
   Modelled on a short experience listing; no icons, ratings, shadows or accent borders. */
/* Phone: photos, title, steps, facts, booking box. Desktop: photos, steps and facts on the left; title, paragraph and
   then the booking box straight under it on the right, so the prices show without a gap. */
.listing-grid { display: grid; gap: 32px; grid-template-areas: "mosaic" "head" "steps" "facts" "box"; }
.mosaic { grid-area: mosaic; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mosaic .photo { aspect-ratio: 1 / 1; }
.mosaic .photo:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.listing-head { grid-area: head; }
.listing-steps { grid-area: steps; }
.listing-facts { grid-area: facts; }
.listing-facts h3 { margin-top: 0; }
.book-box { grid-area: box; }
.eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.listing-head h2 { margin-bottom: .45em; }
.listing-head > p:not(.eyebrow) { font-size: 19px; line-height: 1.55; margin: 0 0 1.3em; }
.listing-steps h3 { margin-top: 0; }
/* What you'll do: one column, a small square photo beside each step (as on an experience listing) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.step-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--soft); }
.steps strong { display: block; font: 600 18px/1.3 var(--display); color: var(--ink); margin-bottom: 3px; text-wrap: balance; }
.steps span { display: block; color: var(--muted); font-size: 16px; line-height: 1.5; }
/* Booking box: a plain card with the two ticket prices side by side, one button, two quiet links */
.book-box { border: 1px solid var(--line); border-radius: 12px; padding: 24px; align-self: start; background: #fff; }
.book-box h3 { margin: 0 0 14px; font-size: 20px; }
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tickets p { margin: 0; padding: 14px 16px; border-radius: 8px; background: var(--soft); }
.tickets span { display: block; font-size: 15px; font-weight: 600; color: var(--muted); }
.tickets strong { display: block; font: 600 30px/1.15 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.book-note { margin: 10px 0 18px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.book-more { margin: 12px 0 0; font-size: 15px; text-align: center; }
.book-more a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .listing-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 var(--col-gap); grid-template-areas: "mosaic head" "mosaic box" "steps box" "facts box"; }
  .listing-steps, .listing-facts { margin-top: 40px; } /* margins, not row gaps: no double gap when the right column is taller */
  .listing-steps h3, .listing-facts h3 { font-size: 24px; margin-bottom: 16px; }
  .book-box { position: sticky; top: 104px; margin-top: 24px; }
  .mosaic { grid-template-columns: 1fr 1fr; align-self: start; }
  .mosaic .photo:first-child { grid-column: auto; aspect-ratio: 1 / 1; }
  .listing-head { padding-top: 4px; }
}

/* Closing band on home: warm sand, signed by the family; the footer is the only dark block below it */
.story-band .eyebrow { color: var(--teal); }
.story-grid { display: grid; gap: 32px; align-items: center; }
.story-photo { margin: 0; }
.story-photo figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.story-copy p { max-width: 36rem; }
.signoff { margin: 1.4em 0 0; font: 600 20px/1.3 var(--display); color: var(--ink); }
.story-link { margin: 4px 0 0; }
.story-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.story-link a::after { content: " \2192"; white-space: pre; }
@media (min-width: 900px) { .story-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--col-gap); } }

/* Desktop: a shorter gap under the hero, so the listing's photos peek in above the fold */
@media (min-width: 900px) { .hero + .block { padding-top: clamp(40px, 3.5vw, 64px); } }
/* Ticket card: the weather line sits under a hairline, smaller */
.book-weather { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--muted); }
/* Private charter card: navy panel with one photo */
.block--tight { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 104px); } /* as much space below the card as above it */
.charter-card { display: grid; background: var(--navy); color: rgba(255,255,255,.88); border-radius: 12px; overflow: hidden; }
.charter-copy { padding: clamp(28px, 4vw, 48px); }
.charter-copy h2 { color: #fff; }
.charter-copy .eyebrow { color: #8fd3ea; }
.charter-copy p { max-width: 32rem; }
.charter-photo { margin: 0; min-height: 240px; }
.charter-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 599px) { .charter-photo { order: -1; min-height: 0; aspect-ratio: 3 / 2; } } /* phones: photo first, so the card ends on its button */
@media (min-width: 600px) { .charter-card { grid-template-columns: 7fr 5fr; align-items: stretch; } .charter-photo { min-height: 0; } }
@media (min-width: 900px) { .charter-card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--col-gap); } .charter-copy { padding-right: 0; } }
/* Home questions: heading on the left, a few questions on the right (the full list is on /faq) */
.faq-split { display: grid; gap: 24px; }
.faq-split .faq-list { max-width: none; }
.faq-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.faq-all a::after { content: " \2192"; white-space: pre; }
.faq-item summary h3 { margin: 0; font: 600 20px/1.3 var(--display); letter-spacing: -0.005em; } /* same size as the FAQ page's questions */
.faq-item summary:hover h3 { color: var(--teal); }
@media (min-width: 900px) { .faq-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: start; } }
/* Stacked: "See all questions" comes after the questions, not between the heading and the first one */
@media (max-width: 899px) {
  .faq-split { display: flex; flex-direction: column; gap: 0; }
  .faq-split > div:first-child { display: contents; }
  .faq-split .faq-list { order: 2; margin-top: 8px; }
  .faq-split .faq-all { order: 3; margin: 12px 0 0; }
}

/* Labeled facts (vessel, your sail): label and fact, hairline rules, no icons */
.glance { margin: 0; border-top: 1px solid var(--line); }
.glance > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); } /* one look for every facts list (home listing, dock, contact) */
@media (max-width: 599px) { .glance > div { grid-template-columns: 6rem 1fr; gap: 12px; } }
.glance dt { font-weight: 600; color: var(--teal); }
.glance dd { margin: 0; }
.glance + p { margin-top: 1.4em; }
.cta-row { margin: 1.4em 0 0; }

/* Dock photo: fills the column beside the directions */
.dock-photo { margin: 0; }
.photo--dock { aspect-ratio: 4 / 3; }
.dock-photo figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
@media (min-width: 900px) { .photo--dock { aspect-ratio: 1 / 1; } }

/* Review: one plain pull quote */
.copy .quote { margin-top: 2.4em; }
.copy .quote + p { margin-top: 2em; }
.quote { margin: 0; padding-top: 20px; border-top: 2px solid var(--teal); }
.quote blockquote { margin: 0 0 14px; }
.quote p { font: 500 20px/1.55 var(--display); color: var(--ink); margin: 0; }
.quote figcaption { font-size: 15px; font-weight: 500; color: var(--muted); }

/* Link list (404) */
.tips-list { list-style: none; padding: 0; margin: 1.6em 0 1.8em; display: grid; gap: 0 56px; }
.tips-list li { display: grid; gap: 0; padding: 8px 0 16px; border-top: 1px solid var(--line); align-content: start; }
.tips-list a { display: flex; align-items: center; min-height: 44px; font: 600 20px/1.3 var(--display); text-decoration: none; color: var(--teal); }
.tips-list a:hover { text-decoration: underline; }
.tips-list span { color: var(--muted); font-size: 16px; line-height: 1.5; }
@media (min-width: 700px) { .tips-list { grid-template-columns: 1fr 1fr; } }

/* Footer */
.site-footer { background: var(--teal); color: #fff; padding: 64px 0 28px; font-size: 16px; }
.footer-title { font: 600 15px var(--font); margin: 0 0 .8em; color: rgba(255,255,255,.75); }
.site-footer a { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer p a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-grid { display: grid; gap: 32px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 44px; padding-top: 22px; position: relative; color: rgba(255,255,255,.85); }
.footer-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(255,255,255,.2); } /* the hairline spans the text, not the padding */
.footer-base p { margin: 0; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.25fr .75fr; } } /* the Contact column fits the email address */
/* Phones and tablets: no second logo (the header has it), less padding; two columns on phones, three on tablets */
@media (max-width: 899px) {
  .site-footer { padding-top: 40px; }
  .footer-grid > :first-child { display: none; }
  .footer-base { margin-top: 24px; }
}
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .footer-grid > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .site-footer { padding-top: 48px; }
  .footer-grid { grid-template-columns: auto auto auto; justify-content: space-between; gap: 8px 24px; }
  .footer-base { margin-top: 32px; }
}

/* Mobile sticky booking bar (appears after the hero) */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--navy); transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
.cta-bar.is-visible { transform: none; visibility: visible; transition: transform .25s; }
.cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cta-price { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; white-space: nowrap; }
.cta-price strong { color: #fff; font-size: 18px; }
.cta-price span { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
@media (min-width: 900px) { .cta-bar { display: none; } }
@media (max-width: 899px) { .site-footer { padding-bottom: 96px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .hero-video { display: none; } }
/* Page changes: the new page fades in over the old one instead of a hard cut (browsers without support, and visitors who
   ask for less motion, get a normal page load). The old page stays solid underneath and blends normally, so nothing
   behind the two pages can ever show through (a plain crossfade dips toward white midway in some browsers, e.g. Arc).
   The header is the same on every page, so it simply switches. */
html { background: var(--page); }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-fade-in .2s ease-out both; }
  ::view-transition-group(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(site-header) { display: none; }
}
@keyframes vt-fade-in { from { opacity: 0; } }

/* ==========================================================================
   Inner pages: About, FAQ, Contact, Privacy, 404.
   Same system: Inter Display headlines, teal-tinted neutrals, 8px photos, no shadows, no hover lifts.
   ========================================================================== */

/* Current page in the nav */
.nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--cyan); }
.menu-panel a[aria-current="page"]:not(.btn) { background: rgba(255,255,255,.12); }

/* Compact page header: solid navy (or a photo band on About). The site header above it is already solid. */
.page-head { position: relative; background: var(--navy); color: #fff; padding: calc(76px + clamp(36px, 5vw, 60px)) 0 clamp(36px, 5vw, 60px); overflow: hidden; }
@media (max-width: 899px) { .page-head { padding-top: calc(68px + 36px); } }
.page-head-inner { position: relative; }
.page-head h1 { color: #fff; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 14px; max-width: 18em; }
@media (min-width: 900px) { .page-head h1 { font-size: clamp(40px, 2.4vw + 18px, 64px); } } /* same size as the home hero's H1 */
.page-intro { margin: 0; max-width: 34em; font-size: clamp(18px, 2vw, 20px); line-height: 1.55; color: rgba(255,255,255,.92); }
.page-head-media { position: absolute; inset: 0; }
.page-head-media img { position: absolute; left: 0; top: 0; width: 135%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 86%; transform: scaleX(-1); } /* mirrored and widened so the sun sits at the far right, clear of the text */
.page-head-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,33,45,.92) 0, rgba(11,33,45,.84) 52%, rgba(11,33,45,.18) 100%); }
@media (max-width: 899px) { .page-head--photo { padding-bottom: 76px; } .page-head-media::after { background: linear-gradient(180deg, rgba(11,33,45,.9) 0, rgba(11,33,45,.82) 74%, rgba(11,33,45,.05) 100%); } }

/* Layout helpers */
.split--center { align-items: center; }
.story-next { margin-top: clamp(48px, 6vw, 72px); }

/* About: the photos beside the story stretch to the text's height, so no dead gap */
.photo-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.photo-stack .photo { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .photo-stack { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); align-items: stretch; align-self: stretch; gap: 16px; }
  .photo-stack .photo { aspect-ratio: auto; position: relative; min-height: 240px; }
  .photo-stack .photo img { position: absolute; inset: 0; }
}

/* FAQ: native details/summary accordion */
.split--faq { gap: 48px; }
@media (min-width: 900px) { .split--faq { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--col-gap); } }
.faq-list { border-top: 1px solid var(--line); max-width: 44rem; }
.faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 12px 8px; margin: 0 -8px; cursor: pointer; list-style: none; border-radius: 4px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-item summary h2 { margin: 0; font: 600 20px/1.3 var(--display); letter-spacing: -0.005em; }
.faq-item summary:hover h2 { color: var(--teal); }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq-answer { padding: 0 0 22px; max-width: 38rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.photo--faq { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .photo--faq { aspect-ratio: 1 / 1; } }
@media (max-width: 899px) { .photo--faq { display: none; } } /* on phones it would sit alone between the questions and "Still have a question?" */

/* Contact */
.contact-list .glance > div { padding: 6px 0; align-items: center; }
.contact-list .glance dd { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4em; }
.contact-list .glance dd a { display: inline-flex; align-items: center; min-height: 44px; font: 600 20px/1.3 var(--display); overflow-wrap: anywhere; }
.side { display: grid; gap: clamp(36px, 5vw, 56px); align-content: start; }
.side-note p:last-of-type { margin-bottom: 0; }

/* Privacy: short sections, heading left and text right on wide screens */
.block--doc { padding-top: clamp(40px, 6vw, 72px); }
.doc-row { display: grid; gap: 12px 56px; padding: 32px 0; border-top: 1px solid var(--line); }
.doc-row:first-child { border-top: 0; padding-top: 0; }
.doc-row h2 { margin: 0; font-size: 26px; }
.doc-body { max-width: 38rem; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-updated { margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
@media (min-width: 900px) { .doc-row { grid-template-columns: 4fr 7fr; } }

/* 404 */
.tips-list--three { margin-top: 0; }
@media (min-width: 700px) { .tips-list--three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) and (max-width: 899px) { .tips-list--three { column-gap: 32px; } }

/* Pages without the sticky booking bar keep the normal footer padding */
@media (max-width: 899px) { .no-bar .site-footer { padding-bottom: 28px; } }

/* Tablets (600-899px): one centred 640px column, so text, photos and cards share the same two edges, with headings a
   step up from phones. Desktop and phones are untouched. */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --max: 40rem; --gutter: 32px; }
  .copy, .copy--narrow, .story-copy p { max-width: none; }
  h2 { font-size: 32px; }
  .page-head h1 { font-size: 40px; }
  .cta-bar { padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--max)) / 2)); }
}

/* Print: plain dark text on white, no site chrome (site.js opens the FAQ answers) */
@media print {
  .site-header, .cta-bar, .menu, .skip, .hero-pause, .hero-video { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .hero, .page-head { min-height: 0; padding: 0 0 12pt; background: none; color: #000; }
  .hero-media, .hero-shade, .page-head-media { display: none; }
  .hero h1, .page-head h1, .hero .lede, .page-intro, .kicker, .hero-facts li { color: #000; }
  .hero-copy { padding-top: 0; }
  .actions, .cta-row { display: none; }
  .block { padding: 18pt 0; }
  .site-footer { background: none; color: #000; padding: 12pt 0; }
  .site-footer a, .footer-title, .footer-base { color: #000; }
  a { color: #000; }
}
a[href^="tel:"] { white-space: nowrap; }