/* 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: swap; src: url(/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family: "Inter Display"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/inter-display-500.woff2) format('woff2'); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-style: normal; font-display: swap; 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: 1120px;
  --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); }
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; }
h3 { font-size: 21px; letter-spacing: -0.005em; margin: 2.2em 0 .5em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.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: rgba(11,33,45,.97); }
.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, background .15s, max-width .3s, padding .3s, margin .3s; max-width: 20rem; overflow: hidden; white-space: nowrap; }
/* Until the hero's own button scrolls away, the header button is collapsed (no reserved gap); it then slides in */
.site-header:not(.has-book) .nav .btn { opacity: 0; visibility: hidden; max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; margin-left: -28px; }
.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-radius: 10px; padding: 12px; display: grid; gap: 4px; }
.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; }
@media (min-width: 900px) { .nav { display: flex; } .menu-nav { display: none; } }
@media (max-width: 899px) { .brand img { width: 168px; } .header-inner { height: 68px; } }

/* Hero: the photo does the work; text sits on open water so the sailboat and lighthouse stay clear */
.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; text-wrap: pretty; }
.lede { font-size: clamp(17px, 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; }
@media (min-width: 900px) {
  .hero-copy { display: flex; justify-content: flex-end; }
  .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(270deg, rgba(11,33,45,.66) 0, rgba(11,33,45,.45) 34%, rgba(11,33,45,0) 62%), linear-gradient(0deg, rgba(11,33,45,.4) 0, rgba(11,33,45,0) 40%); }
}
@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 */
@media (max-width: 599px) {
  .hero { display: block; min-height: 0; }
  .hero-media { position: relative; aspect-ratio: 1 / 1; }
  .hero-shade { inset: 0 0 auto 0; aspect-ratio: 1 / 1; background: linear-gradient(180deg, rgba(11,33,45,.6) 0, rgba(11,33,45,0) 34%); }
  .hero-copy { padding-top: 24px; padding-bottom: 40px; }
}
@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; }

/* 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 (max-width: 899px) { .split > figure, .split > .photo-stack { max-width: 36rem; } } /* one column: photos line up with the text */
@media (min-width: 900px) {
  .photo--sticky { position: sticky; top: 104px; }
  .split { grid-template-columns: 5fr 6fr; gap: 80px; }
  .split--flip { grid-template-columns: 6fr 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 and facts, steps, booking box. Desktop: photos then steps on the left; title, facts, then the
   booking box on the right (the title column spans two rows so the steps sit right under the photos). */
.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: center; }
.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; }
.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: 7fr 5fr; gap: 40px 56px; grid-template-areas: "mosaic head" "steps box" "facts box"; }
  .book-box { position: sticky; top: 104px; }
  .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 (max-width: 899px) { .story-photo { max-width: 36rem; } }
@media (min-width: 900px) { .story-grid { grid-template-columns: 6fr 5fr; gap: 64px; } }

/* Trust strip under the home hero: three plain facts, no icons or ratings */
.trust { border-bottom: 1px solid var(--line); }
.trust ul { list-style: none; margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
.trust li { font-size: 15px; font-weight: 600; color: var(--teal); }
.trust li + li::before { content: "\00B7"; margin: 0 14px; color: var(--muted); }
@media (max-width: 599px) { .trust ul { flex-direction: column; align-items: center; } .trust li + li::before { content: none; } }
/* 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; }
.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 (min-width: 900px) { .charter-card { grid-template-columns: 7fr 5fr; align-items: stretch; } }
/* 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 19px/1.3 var(--display); letter-spacing: -0.005em; text-wrap: pretty; }
.faq-item summary:hover h3 { color: var(--teal); }
@media (min-width: 900px) { .faq-split { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }

/* 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) */
.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; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.footer-base p { margin: 0; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
/* Phones and tablets: no second logo (the header has it), two columns, less padding */
@media (max-width: 799px) {
  .site-footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .footer-grid > :first-child { display: none; }
  .footer-grid > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .footer-base { margin-top: 24px; }
}

/* 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: rgba(11,33,45,.96); 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; } }

/* ==========================================================================
   Inner pages: About, FAQ, Contact, Privacy, 404.
   Appended after the approved home styles; nothing above this line is changed.
   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; text-wrap: pretty; }
.page-intro { margin: 0; max-width: 34em; font-size: clamp(17px, 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, 1fr) 380px; gap: 80px; } }
.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 0; 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; text-wrap: pretty; }
.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; max-width: 380px; }
@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: 800px) { .tips-list--three { grid-template-columns: repeat(3, 1fr); } }

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

/* 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 { 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; }