/* Wrenlow Cottage — first-party holiday-let template (S112).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking.
   Structural system shared with estate-listing-studio; palette + art are coastal and distinct. */

:root {
  /* Theming for the shared accessibility panel (library/shared/a11y/). */
  --a11y-ink: var(--ink);
  --a11y-surface: var(--card);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);

  --ink: #12303a;
  --sea: #1f6b74;
  --sea-deep: #16505a;
  --sand: #f4ede0;
  --shell: #fbf7f0;
  --card: #ffffff;
  --line: #dfd4c1;
  --coral: #b05333;
  --coral-bright: #e8794f;
  --muted: #4a6870;
  --radius: 12px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; color: var(--ink); background: var(--shell); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 10; background: var(--ink); color: var(--shell); padding: 0.5rem 1rem; border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; transition: top 0.15s ease; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; background: var(--shell); border-bottom: 1px solid var(--line); position: relative; }
.wordmark { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; text-decoration: none; color: var(--sea-deep); white-space: nowrap; }
.nav-disclosure summary { list-style: none; cursor: pointer; user-select: none; font-weight: 600; padding: 0.5rem 1rem; border: 1.5px solid var(--sea); border-radius: var(--radius); color: var(--sea-deep); }
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--sea); color: var(--shell); }
.nav-disclosure nav { position: absolute; right: 1rem; left: 1rem; top: calc(100% + 0.4rem); z-index: 9; display: flex; flex-direction: column; gap: 0.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem; box-shadow: 0 10px 24px rgba(18, 48, 58, 0.14); }
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 600; padding: 0.55rem 0.75rem; border-radius: 8px; }
.nav-disclosure nav a:not(.button):hover { background: var(--sand); }

/* A closed <details> does not render its children, so pure CSS cannot inline the menu at desktop;
   main.js opts in with .nav-inline + [open]. Without JS the summary button stays usable. */
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav { position: static; flex-direction: row; align-items: center; gap: 0.35rem; background: none; border: 0; padding: 0; box-shadow: none; }
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.7rem; }

.header-call { display: none; }
@media (max-width: 799px) { .site-header { gap: 0.6rem; } .header-call { display: inline-block; margin-left: auto; } }
@media (max-width: 479px) { .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; } .wordmark { font-size: 1.05rem; } .header-call { font-size: 0.9rem; } .nav-disclosure summary { padding: 0.42rem 0.75rem; font-size: 0.95rem; } }

/* S301 parity repair: Blue Bay opens with a compact utility line and a dense category row
   before the search-led hero. These are Marisol's own labels and contact details; the geometry
   carries the reference role without implying a real travel accreditation. */
.travel-utility { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .42rem clamp(1rem, 4vw, 3rem); color: #fff; background: var(--sea-deep); font-size: .72rem; letter-spacing: .04em; }
.travel-utility a { color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; }
.travel-utility__label { color: #f2c9a0; font-weight: 800; letter-spacing: .12em; }
.travel-tabs { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 0 clamp(1rem, 4vw, 3rem); background: #fff; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.travel-tabs a { flex: 0 0 auto; padding: .78rem 1rem; color: var(--sea-deep); font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.travel-tabs a:hover, .travel-tabs a[aria-current="page"] { color: var(--coral); box-shadow: inset 0 -3px 0 var(--coral); }
.travel-tabs a:last-child { margin-left: auto; color: var(--coral); }
@media (max-width: 620px) { .travel-utility { align-items: flex-start; flex-direction: column; gap: .2rem; padding-block: .55rem; } .travel-tabs a { padding-inline: .75rem; } .travel-tabs a:last-child { margin-left: 0; } }

/* S301 reference-detail closeout — Blue Bay exposes its credibility row before the
   booking desk. Marisol keeps the same visual rhythm while every unverified role is
   marked as a cue for the fictional rebrand. */
.travel-trust-desk { display:grid; grid-template-columns:minmax(12rem,1.35fr) repeat(3,minmax(10rem,1fr)); align-items:center; gap:0; padding:.65rem clamp(1rem,4vw,3rem); color:#fff; background:#0a6280; }
.travel-trust-desk__brand { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.45rem; align-items:center; color:#fff; text-decoration:none; }
.travel-trust-desk__brand > span { grid-row:1 / -1; display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(255,255,255,.8); border-radius:.25rem; font-size:1.1rem; }
.travel-trust-desk__brand strong { font-family:var(--serif); font-size:1.15rem; line-height:1; }
.travel-trust-desk__brand small { color:#f2c9a0; font-size:.53rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.travel-trust-desk__cue { display:grid; align-content:center; gap:.15rem; min-height:2.65rem; padding:.2rem .8rem; border-left:1px solid rgba(255,255,255,.24); }
.travel-trust-desk__cue strong { color:#f7d35f; font-size:.82rem; letter-spacing:.08em; line-height:1; }
.travel-trust-desk__cue span { color:rgba(255,255,255,.78); font-size:.52rem; font-weight:800; letter-spacing:.08em; }
@media (max-width:760px) { .travel-trust-desk { display:flex; align-items:stretch; overflow-x:auto; padding-inline:1rem; scrollbar-width:none; } .travel-trust-desk::-webkit-scrollbar { display:none; } .travel-trust-desk__brand, .travel-trust-desk__cue { flex:0 0 auto; min-width:10rem; } .travel-trust-desk__brand { min-width:11.5rem; } }

/* ---------- Buttons ---------- */
.button { display: inline-block; text-decoration: none; text-align: center; font-weight: 700; font-family: var(--sans); font-size: 1rem; background: var(--coral); color: #fff; border: 1.5px solid var(--coral); border-radius: var(--radius); padding: 0.8rem 1.4rem; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; }
.button:hover { background: var(--coral-bright); transform: translateY(-1px); }
.button-small { padding: 0.5rem 0.9rem; font-size: 0.95rem; }
.button-ghost { background: transparent; color: var(--sea-deep); border-color: var(--sea); }
.button-ghost:hover { background: rgba(31, 107, 116, 0.08); }
.button-light { background: var(--shell); color: var(--sea-deep); border-color: var(--shell); }
.button-light:hover { background: #fff; }
.call-link { font-weight: 700; color: var(--sea); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
/* Full-bleed photographic hero: a firelit interior stands in for the establishing postcard
   shot, with an overlaid text panel and a small inset "collage" card carrying the location
   detail the old boxed-image layout had no room for. Panel sits on its own scrim so contrast
   holds regardless of the source photo — not on the raw photograph. */
.hero { position: relative; overflow: hidden; min-height: min(46rem, 100vh); display: flex; background: var(--ink); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15, 38, 46, 0.94) 0%, rgba(15, 38, 46, 0.78) 32%, rgba(15, 38, 46, 0.22) 62%, rgba(15, 38, 46, 0.05) 78%),
    linear-gradient(0deg, rgba(10, 26, 32, 0.55) 0%, rgba(10, 26, 32, 0) 32%);
}
.hero-frame { position: relative; z-index: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: 5.5rem 1.5rem 3rem; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.hero-place {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
  margin-bottom: auto; padding: 0.5rem 0.95rem;
  background: rgba(15, 38, 46, 0.45); border: 1px solid rgba(242, 201, 160, 0.4); border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; color: #f2c9a0;
  backdrop-filter: blur(6px);
}
.hero-place-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--coral-bright); flex: none; }
.hero-copy { max-width: 38rem; margin-top: 2.5rem; }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f2c9a0; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); max-width: 16ch; color: var(--shell); text-shadow: 0 2px 18px rgba(6, 16, 20, 0.35); }
.hero-sub { margin-top: 1.1rem; font-size: 1.13rem; max-width: 42ch; color: #d9e6e6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.65rem; }
.hero .button-ghost { color: var(--shell); border-color: rgba(251, 247, 240, 0.65); }
.hero .button-ghost:hover { background: rgba(251, 247, 240, 0.14); border-color: var(--shell); }
.hero-trust { margin-top: 1.15rem; font-size: 0.92rem; color: #b8cdd0; font-weight: 600; }
.hero-inset {
  position: absolute; right: 1.5rem; bottom: 1.5rem; width: 11.5rem;
  background: var(--shell); border-radius: 10px; padding: 0.4rem 0.4rem 0.65rem;
  box-shadow: 0 18px 34px rgba(6, 16, 20, 0.4); transform: rotate(2deg);
}
.hero-inset img { width: 100%; height: 6.4rem; object-fit: cover; border-radius: 6px; display: block; }
.hero-inset figcaption { margin-top: 0.5rem; padding: 0 0.15rem; font-size: 0.74rem; font-weight: 700; color: var(--sea-deep); }
.hero-inset figcaption span { display: block; font-weight: 500; color: var(--muted); }
@media (max-width: 900px) { .hero-inset { display: none; } }
@media (max-width: 640px) {
  .hero { min-height: min(38rem, 100vh); }
  .hero-frame { padding: 4.5rem 1.1rem 2.25rem; }
  .hero-copy { margin-top: 1.75rem; }
  .hero-photo { object-position: 68% 32%; }
}

/* ---------- Badges ---------- */
.badges { background: var(--sea-deep); }
.badge-row { max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; color: var(--shell); font-weight: 600; }
.badge-row li { display: flex; align-items: baseline; gap: 0.4rem; }
.badge-num { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #f2c9a0; }

/* ---------- The space ---------- */
.the-space, .nearby { max-width: 72rem; margin: 0 auto; padding: 2.75rem 1.25rem; }
.the-space h2, .nearby h2, .book-direct h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.space-head { max-width: 60ch; }
.space-head p { margin-top: 0.75rem; color: #33505a; }

.gallery { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.gallery-main { min-height: 260px; border-radius: var(--radius); }
.gallery-wide .gallery-main { min-height: 320px; }
.gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.gallery-thumbs-four { grid-template-columns: 1fr 1fr 1fr 1fr; }
.gallery-thumbs .card-art { height: 120px; border-radius: 10px; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.feature-grid h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }

/* ---------- Nearby ---------- */
.nearby { background: var(--sand); max-width: none; }
.nearby > * { max-width: 72rem; margin-left: auto; margin-right: auto; }
.nearby-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .nearby-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .nearby-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.nearby-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.nearby-dist { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); }
.nearby-grid h3 { font-size: 1.15rem; margin: 0.3rem 0 0.4rem; }

/* ---------- CSS artwork (all imagery is authored gradients) ---------- */
.card-art { background-color: #dfe7e6; background-repeat: no-repeat; display: block; width: 100%; object-fit: cover;}
/* ---------- Book-direct band ---------- */
.book-direct { background: var(--sea-deep); color: var(--shell); }
.book-direct { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.75rem 1.25rem; }
.book-direct > * { max-width: 72rem; }
.book-direct > div { flex: 1 1 30rem; margin: 0 auto; }
.book-direct p { margin-top: 0.6rem; max-width: 52ch; color: #d5e6e7; }
.tick-list { margin-top: 1rem; display: grid; gap: 0.5rem; }
.tick-list li { padding-left: 1.6rem; position: relative; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: #f2c9a0; font-weight: 700; }

/* ---------- Detail page ---------- */
.detail-page, .book-page { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--sea-deep); }
.breadcrumb a:hover { text-decoration: underline; }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; margin-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.detail-head h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.detail-sub { margin-top: 0.4rem; color: var(--muted); font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.chip-row li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.9rem; font-weight: 600; }
.detail-cta { text-align: right; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.rate-from { color: var(--muted); }
.rate-from strong { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }

.detail-body { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.75rem; }
@media (min-width: 860px) { .detail-body { grid-template-columns: 1.6fr 1fr; } }
.detail-body h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.detail-body h3 { font-size: 1.15rem; margin: 1.2rem 0 0.4rem; }
.detail-body p + p { margin-top: 0.75rem; }
.feature-list li { padding-left: 1.2rem; position: relative; margin-top: 0.35rem; }
.feature-list li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--coral); font-weight: 700; }
.amenity-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.amenity-list li { padding-left: 1.4rem; position: relative; font-weight: 500; }
.amenity-list li::before { content: "✓"; position: absolute; left: 0; color: var(--sea); font-weight: 700; }

/* ---------- Forms (preview-safe) ---------- */
.inquiry { margin-top: 2.5rem; padding: 1.75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.inquiry > p { max-width: 56ch; margin-top: 0.4rem; }
.inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.75rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.inquiry-form .button { grid-column: 1 / -1; justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--sea-deep); min-height: 1.4em; }

/* ---------- Book page ---------- */
.book-hero { padding: 1.5rem 0 1rem; }
.book-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.book-body { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .book-body { grid-template-columns: 1.5fr 1fr; } }
.book-body .inquiry-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-top: 0; align-self: start; }
.book-aside h2 { font-size: 1.4rem; }
.book-aside .tick-list li::before { color: var(--coral); }
.book-aside .tick-list li { color: var(--ink); }
.book-reassure { margin-top: 1rem; color: var(--muted); }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: #c6d6d8; padding: 2.25rem 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; }
.wordmark-footer { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--shell); }
footer .call-link { color: #7fb8bd; }
.footer-truth { max-width: 36ch; font-size: 0.88rem; color: #8aa2a6; align-self: end; }

/* ---------- Guest reviews (S287) — illustrative, see footer notice ----------
   Featured-first (one wide sea-tinted testimonial + two standard) breaks the 3-up rhythm; a category
   rating bar (Cleanliness / Location / Check-in / Value) is the authentic holiday-let trust idiom and
   keeps this demo distinct from the estate template's standards discs. */
.guests { max-width: 72rem; margin: 0 auto; padding: 2.75rem 1.25rem; }
.guests-head { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
@media (min-width: 720px) { .guests-head { grid-template-columns: 1fr auto; align-items: end; } }
.guests-head h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin-top: 0.35rem; max-width: 18ch; }
.guests-score { display: grid; gap: 0.15rem; align-content: start; }
@media (min-width: 720px) { .guests-score { justify-items: end; text-align: right; } }
.guests-stars { color: var(--coral-bright); font-size: 1.15rem; letter-spacing: 0.12em; }
.guests-num { font-size: 1rem; color: var(--muted); }
.guests-num strong { font-family: var(--serif); font-size: 2rem; color: var(--sea-deep); font-weight: 700; }
.guests-sub { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.guests-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .guests-grid { grid-template-columns: 1.5fr 1fr; grid-auto-rows: 1fr; } }
.guest {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: 0.6rem; align-content: start;
}
.guest-stars { color: var(--coral-bright); font-size: 0.9rem; letter-spacing: 0.1em; }
.guest blockquote { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.guest-by { font-size: 0.85rem; font-weight: 700; color: var(--sea-deep); }
.guest-by span { color: var(--muted); font-weight: 400; }
@media (min-width: 820px) { .guest-featured { grid-column: 1 / -1; } }
.guest-featured { background: var(--sea-deep); border-color: var(--sea-deep); color: var(--shell); padding: 1.7rem 1.8rem 1.8rem; }
.guest-featured blockquote { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; color: #f2ede2; }
.guest-featured .guest-by { color: #e5c0a6; }
.guest-featured .guest-by span { color: #a9c2c4; }

/* Category rating bar */
.ratings { margin-top: 1.6rem; display: grid; gap: 0.85rem 2rem; grid-template-columns: 1fr; border-top: 1px solid var(--line); padding-top: 1.5rem; }
@media (min-width: 680px) { .ratings { grid-template-columns: 1fr 1fr; } }
.ratings li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.8rem; align-items: center; }
.rating-label { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.rating-bar { height: 0.5rem; border-radius: 999px; background: var(--sand); overflow: hidden; }
.rating-fill { display: block; height: 100%; border-radius: 999px; background: var(--sea); }
.rating-val { font-size: 0.86rem; font-weight: 700; color: var(--sea-deep); font-variant-numeric: tabular-nums; }

/* ---------- Motion (S287) — slow Ken-Burns on the firelit hero; cards, reviews and rating bars
   settle in as they enter. Native view()/compositor-only (no JS), transform/opacity only → zero CLS.
   The rating fills grow from 0 as they scroll into view (scaleX, so no reflow). ---------- */
@keyframes wc-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes wc-enter { from { clip-path: inset(0 100% 0 0); transform: translateX(-18px) rotate(-0.8deg); opacity: 0; } to { clip-path: inset(0); transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes wc-fill { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo { animation: wc-kenburns linear both; animation-timeline: view(); animation-range: cover; transform-origin: 62% 38%; }
    .nearby-grid > li, .guests-grid > .guest, .ratings > li {
      animation: wc-enter linear both; animation-timeline: view(); animation-range: entry 4% cover 26%;
    }
    .nearby-grid > li:nth-child(2), .guests-grid > .guest:nth-child(2), .ratings > li:nth-child(2) { animation-range: entry 9% cover 30%; }
    .nearby-grid > li:nth-child(3), .guests-grid > .guest:nth-child(3), .ratings > li:nth-child(3) { animation-range: entry 13% cover 34%; }
    .nearby-grid > li:nth-child(4), .ratings > li:nth-child(4) { animation-range: entry 17% cover 38%; }
    .rating-fill { transform-origin: left; animation: wc-fill linear both; animation-timeline: view(); animation-range: entry 6% cover 40%; }
  }
}

/* Card image zoom on hover/focus (premium gallery feel; hover/focus only — no idle, no CLS). */
.card { overflow: hidden; }
.card .card-art { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-art, .card:focus-within .card-art { transform: scale(1.05); }

/* ---- S9+2 signature — a calm TIDE LINE drifting along the hero base (slow, ambient, transform-
   only) plus a one-shot SUN-GLINT sweep across the firelit photo on load, and the "at a glance"
   badge row filling in with a coral tideline as it scrolls into view — the booking-confidence
   beat this template's stats row didn't have. Distinct family from wc-kenburns/wc-enter/wc-fill
   already on the page: those ease content in, this one is the coastal-light motif that makes
   THIS hero read as a seaside cottage rather than any other photo-led demo in the library. */
.hero { isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: 0; bottom: 0; width: 42%; height: 4px;
  background: linear-gradient(90deg, transparent 0%, rgba(242, 201, 160, 0.85) 45%, #fff 50%, rgba(242, 201, 160, 0.85) 55%, transparent 100%);
  will-change: transform;
}
@keyframes wc-tide-drift { from { transform: translateX(-140%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: wc-tide-drift 16s linear infinite; }
}

.hero::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 0; left: 0; bottom: 0; width: 46%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.42) 47%, rgba(255, 255, 255, 0.14) 53%, transparent 68%);
  transform: translateX(-170%) skewX(-12deg);
}
@keyframes wc-glint-sweep { from { transform: translateX(-170%) skewX(-12deg); } to { transform: translateX(260%) skewX(-12deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: wc-glint-sweep 2.2s cubic-bezier(0.3, 0.7, 0.3, 1) 0.5s 1 both; }
}

.badges { position: relative; overflow: hidden; }
.badges::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--coral-bright), #f2c9a0);
  transform-origin: left; transform: scaleX(0);
}
@keyframes wc-badge-fill { to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .badges::after { animation: wc-badge-fill linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .button:hover { transform: none; }
  .hero-photo, .nearby-grid > li, .guests-grid > .guest, .ratings > li, .rating-fill {
    animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important;
  }
  .card .card-art, .card:hover .card-art, .card:focus-within .card-art { transition: none; transform: none; }
  .hero::before, .hero::after { animation: none !important; opacity: 0 !important; }
  .badges::after { animation: none !important; transform: scaleX(1) !important; }
}

/* Build credit — carried by every template in this library, matching the deployed demos.
   Colour is inherited rather than fixed so this single rule works on every footer palette. */
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; opacity: 0.8; }
.footer-powered a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { opacity: 0.85; }

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. These two must name THIS template's own variables — the 20
   templates do not share a vocabulary. check-library-a11y.mjs fails the build without both.
   ⚠ A boundary token goes to INK even when its value is light. */
html[data-a11y-contrast="high"] {
  --ink: #000; --sea: #000; --sea-deep: #000; --coral: #000; --coral-bright: #000;
  --muted: #000; --line: #000;
  --sand: #fff; --shell: #fff; --card: #fff;
}
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] .footer-truth,
html[data-a11y-contrast="high"] .footer-powered { color: #fff; }

/* Okabe-Ito. ⚠ Sea teal and coral is a cyan/red pair that narrows under protanopia, and on a
   direct-booking site the coral IS the book-now signal. */
html[data-a11y-colour="safe"] {
  --sea: #23282a; --sea-deep: #16191a; --coral: #0072b2; --coral-bright: #3a97ce;
}

/* ⛔ S293 — book.html's hero sits on the LIGHT cream page, but .hero-sub (#d9e6e6) and .eyebrow
   (#f2c9a0) were coloured for the DARK homepage hero, so they printed near-invisible on cream (a blind
   render judge flagged the intro paragraph as looking broken). Re-ink them for the light book hero. */
.book-hero .hero-sub { color: var(--muted); }
.book-hero .eyebrow { color: var(--coral); }

/* ============ S297 — Marisol Travel conversion (distinct effects: ken-burns, card-zoom, video outro) ============ */
.site-header { position: sticky; top: 0; z-index: 100; }
.wordmark-light { color: var(--sea); font-weight: 600; }

/* Loading intro — a FADE (this demo's signature; estate used a curtain-lift) */
.intro { position: fixed; inset: 0; z-index: 9999; background: var(--sea-deep); display: grid; place-items: center; animation: introFade 0.8s ease 1.5s forwards; }
.intro-mark { text-align: center; padding: 1rem; }
.intro-word { display: block; font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700; color: #fff; opacity: 0; transform: scale(1.06); animation: introMark 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.intro-amp { color: var(--coral-bright); font-style: italic; }
.intro-rule { display: block; height: 2px; width: 0; background: var(--coral-bright); margin: 1.1rem auto 0.95rem; animation: introRule 0.75s ease 0.55s forwards; }
.intro-sub { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.24em; color: #bcd0d2; opacity: 0; animation: introMark 0.6s ease 0.95s forwards; }
.intro.intro-skip { display: none; }
@keyframes introMark { to { opacity: 1; transform: none; } }
@keyframes introRule { to { width: 190px; } }
@keyframes introFade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* Ken-Burns hero + copy rise */
.hero { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: kenburns 18s ease-out both; }
  .hero-copy > * { animation: heroRise 0.8s cubic-bezier(0.22,1,0.36,1) both; }
  .hero-copy .eyebrow { animation-delay: 0.1s; } .hero-copy h1 { animation-delay: 0.2s; }
  .hero-copy .hero-sub { animation-delay: 0.34s; } .hero-copy .holiday-search { animation-delay: 0.46s; } .hero-copy .hero-trust { animation-delay: 0.58s; }
}
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1; transform: none; } .hero-photo { animation: none; } }

/* Hero holiday search */
.holiday-search { display: flex; flex-wrap: wrap; gap: 0.6rem; background: rgba(255,255,255,0.96); border-radius: var(--radius); padding: 0.8rem; margin: 1.5rem 0 1rem; max-width: 660px; box-shadow: 0 24px 44px -26px rgba(0,0,0,0.55); }
.hs-field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 135px; }
.hs-field label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hs-field select { padding: 0.55rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 0.92rem; }
.holiday-search .button { align-self: flex-end; white-space: nowrap; }
.holiday-search .form-status { flex-basis: 100%; margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--sea-deep); }

/* Destinations grid — zoom-on-hover cards */
.destinations { max-width: 1160px; margin: 0 auto; padding: 3rem 1.25rem; }
.content-page .destinations { max-width: none; padding: 2.4rem 0; }
.destinations .section-head { margin-bottom: 0.4rem; padding: 0; max-width: none; }
.dest-grid { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dest-card a { display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(0,0,0,0.4); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; }
.dest-card a:hover, .dest-card a:focus-visible { transform: translateY(-6px); box-shadow: 0 26px 46px -24px rgba(18,48,58,0.5); }
.dest-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.dest-card a:hover img { transform: scale(1.07); }
.dest-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem 1.2rem; }
.dest-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--sea-deep); }
.dest-from { font-size: 0.88rem; color: var(--muted); }
.dest-note { max-width: 1160px; margin: 1.25rem auto 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 860px) { .dest-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dest-grid { grid-template-columns: 1fr; } }

/* Holiday types */
.types { max-width: 1160px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.types h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1.4rem; }
.type-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.type-grid li { background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.type-grid h3 { font-size: 1.1rem; color: var(--sea-deep); margin-bottom: 0.4rem; }
.type-grid p { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 860px) { .type-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .type-grid { grid-template-columns: 1fr; } }

/* How we work */
.how { max-width: 1160px; margin: 0 auto; padding: 3rem 1.25rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.how-copy h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0.4rem 0 0.8rem; }
.how-copy p { color: var(--ink); max-width: 56ch; margin-bottom: 1rem; }
.how-media img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(18,48,58,0.55); }
.how-media figcaption { font-size: 0.76rem; color: var(--muted); margin-top: 0.5rem; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Footer video scroll-out */
.video-outro { position: relative; min-height: 68vh; display: grid; place-items: center; overflow: hidden; text-align: center; color: #fff; }
.outro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outro-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,48,58,0.4), rgba(18,48,58,0.62)); }
.outro-inner { position: relative; padding: 2rem 1.25rem; max-width: 640px; }
.outro-inner h2 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.6rem; }
.outro-inner p { font-size: 1.05rem; margin-bottom: 1.4rem; opacity: 0.95; }
.reveal-ready .video-outro[data-reveal] { opacity: 0; }
.reveal-ready .video-outro[data-reveal].is-revealed { opacity: 1; transition: opacity 1s ease; }

/* Content pages (destinations / enquire) */
.content-page { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
.content-hero { padding: 2.75rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.content-hero h1 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0.5rem 0; }
.content-hero .hero-sub { max-width: 60ch; }
.content-page .hero-sub { color: var(--muted); }
.content-hero__action { margin-top: 1.3rem; }
.content-hero__action .button { display: inline-flex; align-items: center; gap: .55rem; }
.content-page > section { padding: 2.4rem 0; }
.valuation-band { background: var(--sea-deep); color: #fff; border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; }
.valuation-band h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.5rem; }
.valuation-band p { max-width: 52ch; margin: 0 auto 1.2rem; opacity: 0.95; }

/* Enquire contact + form */
.contact-body { display: grid; grid-template-columns: 340px 1fr; gap: 2.5rem; padding: 2rem 0 3rem; align-items: start; }
.contact-details h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.contact-lines { font-style: normal; } .contact-lines p { margin-bottom: 0.7rem; line-height: 1.55; }
.contact-lines .footer-hours { color: var(--muted); }
.contact-lines .footer-mail, .contact-lines .call-link { color: var(--coral); }
.contact-note { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
.inquiry-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.inquiry-form .field { display: flex; flex-direction: column; gap: 0.3rem; }
.inquiry-form .field-wide { grid-column: 1 / -1; }
.inquiry-form label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.inquiry-form input, .inquiry-form textarea, .inquiry-form select { padding: 0.6rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.95rem; font-family: inherit; }
.inquiry-form .button { grid-column: 1 / -1; }
.label-optional { font-weight: 400; color: var(--muted); }
.form-status { grid-column: 1 / -1; font-size: 0.9rem; color: var(--sea-deep); }
@media (max-width: 720px) { .contact-body { grid-template-columns: 1fr; } .inquiry-form { grid-template-columns: 1fr; } }

/* Deep footer */
.site-footer { background: var(--ink); color: #cfd8d0; padding: 2.75rem 1.25rem 1.75rem; margin-top: 0; display: block; }
.footer-trust { max-width: 1160px; margin: 0 auto 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(244,237,224,0.14); }
.footer-trust-inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: space-between; }
.footer-portals-label { font-size: 0.82rem; color: #9fb0b3; margin-bottom: 0.5rem; }
.footer-portals ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; padding: 0; margin: 0; }
.footer-portals ul li { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--sand); }
.footer-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; padding: 0; margin: 0; }
.footer-badges li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: #cfd8d0; }
.fbadge { display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; padding: 0 0.4rem; border: 1px solid var(--coral-bright); border-radius: 4px; color: var(--coral-bright); font-size: 0.66rem; font-weight: 700; }
.footer-cols { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 1.75rem 2rem; }
.footer-brand { max-width: 40ch; }
.wordmark-footer { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--sand); margin-bottom: 0.4rem; }
.footer-line { font-size: 0.9rem; color: #9fb0b3; margin-bottom: 0.85rem; }
.footer-contact { font-style: normal; font-size: 0.9rem; line-height: 1.6; } .footer-contact p { margin: 0.1rem 0; }
.footer-hours { color: #9fb0b3; }
.footer-mail { color: var(--coral-bright); text-decoration: underline; text-underline-offset: 2px; }
footer .call-link { color: var(--coral-bright); }
.footer-social { margin-top: 0.9rem; font-size: 0.82rem; color: #9fb0b3; }
.footer-social span { color: var(--coral-bright); }
.footer-heading { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sand); margin-bottom: 0.7rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-nav a { color: #cfd8d0; text-decoration: none; font-size: 0.9rem; line-height: 1.35; }
.footer-nav a:hover { color: var(--sand); text-decoration: underline; text-underline-offset: 2px; }
.footer-bar { max-width: 1160px; margin: 1.9rem auto 0; padding-top: 1.3rem; border-top: 1px solid rgba(244,237,224,0.14); display: flex; flex-direction: column; gap: 0.55rem; }
.footer-reg { max-width: 92ch; font-size: 0.76rem; color: #7f969b; }
.footer-truth { max-width: 92ch; font-size: 0.82rem; color: #9fb0b3; }
.footer-powered { font-size: 0.85rem; opacity: 0.85; }
.footer-powered a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

/* S297 fix — the sand accent (#f2c9a0) is for the DARK hero only; on cream sections it went
   near-invisible. Eyebrows/ticks on light backgrounds use coral so they are actually visible. */
.eyebrow { color: var(--coral); }
.hero .eyebrow, .video-outro .eyebrow { color: #f2c9a0; }
.tick-list li::before { color: var(--coral); }

/* ============ S297 WOW PASS — full-viewport video hero + staggered reveals ============ */
.hero { position: relative; min-height: 94vh; display: flex; align-items: center; overflow: hidden; }
.hero-video, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(15,38,46,0.80) 0%, rgba(15,38,46,0.52) 42%, rgba(15,38,46,0.12) 100%); }
.hero-frame { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
.hero-copy { max-width: 640px; color: #fff; }
.hero-copy h1 { color: #fff; font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; }
.hero-copy .hero-sub { color: rgba(255,255,255,0.94); font-size: 1.12rem; max-width: 46ch; }
.hero-copy .hero-trust { color: rgba(255,255,255,0.85); }
.hero-copy .eyebrow { color: #f2c9a0; }
/* static scroll cue (no infinite loop — S121) */
.hero::after { content: ""; position: absolute; bottom: 1.6rem; left: 50%; width: 22px; height: 22px; border-right: 2px solid rgba(255,255,255,0.65); border-bottom: 2px solid rgba(255,255,255,0.65); transform: translateX(-50%) rotate(45deg); z-index: 2; }

/* Staggered destination reveals */
.reveal-ready .dest-card[data-reveal] { opacity: 0; transform: translateY(26px); }
.reveal-ready .dest-card[data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.dest-grid .dest-card:nth-child(2) { transition-delay: 0.07s; }
.dest-grid .dest-card:nth-child(3) { transition-delay: 0.14s; }
.dest-grid .dest-card:nth-child(4) { transition-delay: 0.21s; }
.dest-grid .dest-card:nth-child(5) { transition-delay: 0.28s; }
.dest-grid .dest-card:nth-child(6) { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) { .reveal-ready .dest-card[data-reveal] { opacity: 1; transform: none; } }

/* ============ S297 CINEMATIC hero — slow video push-in + clip-reveal headline + brand chevron ============ */
@media (prefers-reduced-motion: no-preference) {
  .hero-video { animation: heroZoom 22s ease-out both; }
  .hero-copy h1 { animation: heroClip 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
}
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes heroClip { from { opacity: 0; clip-path: inset(0 0 108% 0); transform: translateY(8px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
/* Giant faint brand chevron sitting behind the page (owner: "chevron of the brand in the back") */
.hero-frame::before { content: ""; position: absolute; right: 2%; top: 8%; width: 46vh; height: 46vh; max-width: 520px; max-height: 520px; transform: rotate(45deg); border-right: 3px solid rgba(255,255,255,0.16); border-bottom: 3px solid rgba(255,255,255,0.16); z-index: -1; pointer-events: none; }
.types { position: relative; overflow: hidden; }
.types::after { content: ""; position: absolute; left: -70px; bottom: -90px; width: 320px; height: 320px; transform: rotate(45deg); border-left: 40px solid rgba(31,107,116,0.05); border-top: 40px solid rgba(31,107,116,0.05); z-index: 0; pointer-events: none; }
.types > * { position: relative; z-index: 1; }

/* Cookie consent — slides up with a reveal (S297) */
.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 660px; margin: 0 auto; z-index: 200; background: var(--ink); color: #e6ece9; border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; justify-content: space-between; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55); transform: translateY(150%); opacity: 0; transition: transform 0.65s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease; }
.cookie-bar.is-shown { transform: translateY(0); opacity: 1; }
.cookie-text { font-size: 0.85rem; flex: 1; min-width: 230px; margin: 0; }
.cookie-actions { display: flex; gap: 0.5rem; }

/* ============ S297 uplift — full page width + bright social icons + trade badges ============ */
.destinations, .types, .how, .footer-cols, .footer-trust, .footer-bar { max-width: 1320px; }
.hero-frame { max-width: 1320px; }
.content-page { max-width: 1180px; }
.cookie-bar { max-width: 1100px; }
/* social icon buttons — brighten the footer */
.footer-social { display: flex; gap: 0.7rem; margin-top: 1rem; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.09); color: #cfd8d0; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.footer-social a:hover { background: var(--coral-bright); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
/* trade trust badges — filled coral roundels (unique per trade: ATOL/ABTA/IATA/PTS) */
.footer-badges { gap: 0.6rem 0.9rem; }
.footer-badges li { background: rgba(255,255,255,0.06); border-radius: 999px; padding: 0.35rem 0.85rem 0.35rem 0.4rem; }
.fbadge { min-width: 2.2rem; height: 1.7rem; border-radius: 999px; background: var(--coral-bright); color: var(--ink); border: none; font-size: 0.68rem; letter-spacing: 0.02em; }

/* ============ S297 — search results + plane loader + logo mark + motifs + footer reveal ============ */
.hs-results { flex-basis: 100%; margin-top: 0.4rem; }
.hs-results[hidden] { display: none; }
.hs-results-lead { font-size: 0.82rem; color: var(--sea-deep); font-weight: 700; margin: 0 0 0.4rem; }
.hs-results ul { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.3rem; max-height: 170px; overflow: auto; }
.hs-results li { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.85rem; padding: 0.3rem 0.55rem; background: var(--shell); border-radius: 6px; }
.hs-route { font-weight: 700; color: var(--ink); }
.hs-airline { color: var(--muted); }
.hs-loading { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; color: var(--sea-deep); font-size: 0.9rem; overflow: hidden; }
.hs-plane { font-size: 1.4rem; }
@media (prefers-reduced-motion: no-preference) { .hs-plane { animation: planeFly 1.4s ease-in-out; } }
@keyframes planeFly { 0% { transform: translateX(-30px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(130px); opacity: 0; } }

.brand-mark { display: inline-flex; width: 26px; height: 26px; margin-right: 0.5rem; vertical-align: -6px; }
.brand-mark svg { width: 100%; height: 100%; }
.intro .brand-mark { width: 46px; height: 46px; margin: 0 auto 0.7rem; display: block; }

.destinations, .how, .guests { position: relative; overflow: hidden; }
.destinations::before, .guests::before { content: ""; position: absolute; width: 320px; height: 320px; transform: rotate(45deg); border-right: 34px solid rgba(31,107,116,0.045); border-bottom: 34px solid rgba(31,107,116,0.045); z-index: 0; pointer-events: none; }
.destinations::before { right: -90px; top: -70px; }
.guests::before { left: -100px; bottom: -80px; }
.destinations > *, .how > *, .guests > * { position: relative; z-index: 1; }
.reveal-ready .site-footer[data-reveal] { opacity: 0; transform: translateY(34px); }
.reveal-ready .site-footer[data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22,1,0.36,1); }
/* S301 parity repair — make Blue Bay's search/promotion density visible without copying claims. */
.travel-hero-promo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; max-width:46rem; margin:1rem 0 0; padding:.55rem; border:1px solid rgba(255,255,255,.55); background:rgba(18,75,82,.72); color:#fff; font-size:.67rem; line-height:1.35; }
.travel-hero-promo span { display:grid; gap:.16rem; padding:.45rem .6rem; border-left:2px solid #e8794f; }
.travel-hero-promo strong { color:#f7d35f; font-size:.58rem; letter-spacing:.12em; }
@media (max-width:680px) { .travel-hero-promo { grid-template-columns:1fr; margin-top:.8rem; font-size:.62rem; } }

/* S301 opening parity — Blue Bay leads with a compact row of trust/protection roles near
   the holiday search. Keep Marisol's rebrand and label every unapproved proof cue honestly. */
.travel-proof-row { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; max-width:52rem; margin-top:.7rem; color:#fff; }
.travel-proof-row span { display:inline-flex; align-items:center; min-height:1.8rem; padding:.38rem .55rem; border:1px solid rgba(255,255,255,.58); background:rgba(18,75,82,.72); font-size:.56rem; font-weight:900; letter-spacing:.09em; }
.travel-proof-row__brand { color:#f7d35f; background:rgba(18,75,82,.92)!important; border-color:#f7d35f!important; }
@media (max-width:680px) { .travel-proof-row { overflow-x:auto; flex-wrap:nowrap; max-width:calc(100vw - 2.5rem); padding-bottom:.15rem; scrollbar-width:none; } .travel-proof-row::-webkit-scrollbar { display:none; } .travel-proof-row span { flex:0 0 auto; font-size:.5rem; } }

/* S301 opening-parity repair — restore the reference's compact booking-desk grammar after
   the main search, while keeping protection wording explicitly approval-bound. */
.travel-booking-dock { display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)) auto; align-items:stretch; gap:0; max-width:58rem; margin-top:.65rem; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.94); color:#164b52; box-shadow:0 .75rem 1.8rem rgba(0,0,0,.14); }
.travel-booking-dock > span, .travel-booking-dock > a { display:grid; align-content:center; gap:.18rem; min-height:3.2rem; padding:.5rem .65rem; border-right:1px solid rgba(22,75,82,.18); font-size:.63rem; }
.travel-booking-dock small { color:#5b7477; font-size:.52rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.travel-booking-dock strong { font-size:.67rem; }
.travel-booking-dock__label { color:#fff!important; background:#1f6b74; font-weight:900; letter-spacing:.11em; }
.travel-booking-dock a { color:#164b52; font-weight:900; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }
.travel-booking-dock a:hover { color:#fff; background:#e8794f; }
@media (max-width:700px) { .travel-booking-dock { grid-template-columns:1fr 1fr; } .travel-booking-dock > span, .travel-booking-dock > a { min-height:2.8rem; } .travel-booking-dock__label { grid-column:1 / -1; } .travel-booking-dock a { border-right:0; } }

/* S301 reference-detail closeout — Blue Bay opens with a centred consent notice over the
   search-and-hero stack. Keep the fictional Marisol rebrand and make the panel preview-safe. */
.travel-privacy-backdrop { position:fixed; inset:0; z-index:88; background:rgba(17,26,39,.48); }
.travel-privacy { position:fixed; top:50%; left:50%; z-index:89; width:min(28rem,calc(100% - 2rem)); padding:0 1rem 1rem; transform:translate(-50%,-50%); background:#fff; color:#151d2b; box-shadow:0 1rem 3rem rgba(0,0,0,.3); }
.travel-privacy-head { display:flex; align-items:center; gap:.55rem; margin-inline:-1rem 0; padding:1rem; color:#fff; background:#1198d2; font-size:1.2rem; }
.travel-privacy-head span { display:grid; place-items:center; width:2rem; height:2rem; border:2px solid currentColor; border-radius:.3rem; font-size:1.2rem; }
.travel-privacy h2 { margin-top:1.4rem; font-size:1rem; }
.travel-privacy p { margin-top:.6rem; font-size:.8rem; line-height:1.45; }
.travel-privacy-actions { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:1rem; }
.travel-privacy-actions button { min-height:2.4rem; padding:.5rem .65rem; border:0; border-radius:99px; background:#e6f3f8; color:#1198d2; font:800 .72rem/1.2 inherit; cursor:pointer; }
.travel-privacy-actions button:nth-child(2) { background:#8bc641; color:#fff; }
.travel-privacy-actions button:last-child { grid-column:1 / -1; background:#aaa; color:#fff; }
@media (max-width:560px) { .travel-privacy { padding-inline:.85rem; } .travel-privacy-head { margin-inline:-.85rem 0; } .travel-privacy p { font-size:.74rem; } }
/* S301 universal parity repair — make the holiday search the opening instrument rather
   than a late line beneath an oversized cinematic lock-up. Trust and association/award-style
   cues remain visible, but no live credential is implied. */
@media (min-width:900px) {
  .hero { min-height:clamp(38rem,78vh,46rem); align-items:flex-start; }
  .hero-frame { max-width:1320px; padding-top:7.25rem; padding-bottom:3.5rem; }
  .hero-copy { display:grid; grid-template-columns:minmax(17rem,.78fr) minmax(36rem,1.22fr); column-gap:clamp(2rem,5vw,6rem); align-items:end; max-width:none; }
  .hero-copy > .eyebrow, .hero-copy > h1, .hero-copy > .hero-sub, .hero-copy > .hero-trust { grid-column:1; }
  .hero-copy > .holiday-search { grid-column:2; grid-row:1 / span 4; align-self:end; width:100%; max-width:none; margin:0; padding:1rem; }
  .hero-copy > .travel-proof-row { grid-column:1 / -1; }
  .hero-copy > .travel-hero-promo { grid-column:1; }
  .hero-copy > .travel-booking-dock { grid-column:1 / -1; }
  .holiday-search .hs-field { min-width:0; }
  .travel-booking-dock { max-width:none; }
}
@media (max-width:899px) {
  .hero { min-height:calc(100vh - 11rem); }
  .hero-frame { padding-top:3.5rem; padding-bottom:3rem; }
}
@media (max-width:760px) {
  .travel-trust-desk { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem; overflow:visible; padding:.55rem 1rem .65rem; }
  .travel-trust-desk__brand { grid-column:1 / -1; min-width:0; }
  .travel-trust-desk__cue { min-width:0; min-height:2.4rem; padding:.3rem .25rem; border-top:1px solid rgba(255,255,255,.22); border-left:0; }
  .travel-trust-desk__cue strong { font-size:.48rem; line-height:1.15; }
  .travel-trust-desk__cue span { font-size:.4rem; line-height:1.2; letter-spacing:.04em; }
}

/* S301 parity refinement — Blue Bay's first post-hero beat is a row of coloured confidence
   tiles. Make Marisol's fictional/preview-safe cues read as that same visual rail rather than
   a plain list, while keeping every approval-bound claim explicitly labelled. */
.badges { background:#075b7b; }
.badge-row { max-width:84rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; }
.badge-row li { min-height:4.35rem; padding:.75rem clamp(.65rem,2vw,1.35rem); align-items:center; border-right:1px solid rgba(255,255,255,.18); color:#fff; font-size:.7rem; line-height:1.25; }
.badge-row li:last-child { border-right:0; }
.badge-row li:nth-child(1) { background:#0c6d9c; }
.badge-row li:nth-child(2) { background:#1c4b9a; }
.badge-row li:nth-child(3) { background:#76b943; color:#133f29; }
.badge-row li:nth-child(4) { background:#e8794f; }
.badge-row li:nth-child(5) { display:none; }
.badge-num { display:inline-grid; place-items:center; min-width:2.1rem; min-height:2.1rem; margin-right:.35rem; border:1px solid currentColor; border-radius:50%; font-family:var(--sans); font-size:.58rem; letter-spacing:.03em; line-height:1; }
@media (max-width:700px) {
  .badge-row { grid-template-columns:repeat(4,minmax(8.5rem,1fr)); overflow-x:auto; scrollbar-width:none; }
  .badge-row::-webkit-scrollbar { display:none; }
  .badge-row li { min-width:8.5rem; min-height:4rem; padding:.62rem .7rem; font-size:.62rem; }
}

/* The reference keeps its opening instrument lean: one prominent search strip, then the
   coloured confidence rail. The extra preview cards remain useful content but were making
   Marisol's first frame taller and busier than Blue Bay's, especially on mobile. */
.travel-hero-promo, .travel-booking-dock { display:none; }
@media (min-width:900px) {
  .hero { min-height:34rem; }
  .hero-frame { padding-top:4rem; padding-bottom:2.25rem; }
}