/* Vitrina — La Panera's custom public site. Every rule is scoped to #siteShell so the owner
   dashboard (rendered outside the shell) keeps the template's own styling. Loaded after the
   template stylesheets; ties win by specificity (#id .class) and order. */

#siteShell {
  --crema: #F3EEE4; --tinta: #17181A; --petalo: #F2C4CC; --pistacho: #BFE0D2; --mantequilla: #F2DCA6;
  --lila: #D9C9E6; --lampara: #237C87; --gris: #6B655C; --blanco: #FFFFFF;
  --v-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --v-body: Manrope, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --v-radius: 18px; --v-gutter: clamp(20px, 5vw, 64px);
  /* Re-map the template's alias tokens inside the shell so the booking flow that
     experience-upgrade.js renders here harmonizes with the Vitrina palette. */
  --navy: var(--tinta); --blue: var(--lampara); --paper: var(--blanco); --ivory: var(--crema);
  --sand: var(--pistacho); --line: rgba(23, 24, 26, .14); --display: var(--v-display); --ui: var(--v-body);
  --sans: var(--v-body); --font-heading: var(--v-display); --font-body: var(--v-body);
  --ink: var(--tinta); --muted: var(--gris); --surface: var(--blanco); --bg: var(--crema);
  --brand: var(--lampara); --brand-ink: #FFFFFF; --accent: var(--petalo); --radius: 12px;
  background: var(--crema); color: var(--tinta); font: 16px/1.6 var(--v-body);
  -webkit-font-smoothing: antialiased;
}
#siteShell *, #siteShell *::before, #siteShell *::after { box-sizing: border-box; }
#siteShell h1, #siteShell h2, #siteShell h3 { margin: 0; font-family: var(--v-display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
#siteShell h2, #siteShell h1 { font-style: italic; }
#siteShell .eyebrow { margin: 0 0 12px; color: var(--tinta); opacity: .68; font: 600 .72rem/1 var(--v-body); letter-spacing: .16em; text-transform: uppercase; }
#siteShell .button { min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--crema);
  font: 600 .9rem/1 var(--v-body); letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
#siteShell .button:hover { background: #000; transform: translateY(-1px); }
#siteShell .v-pill--cream { background: var(--crema); color: var(--tinta); }
#siteShell .v-pill--cream:hover { background: #fff; }
#siteShell .text-link { display: inline-flex; gap: 10px; margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid currentColor;
  color: var(--tinta); font: 600 .76rem/1 var(--v-body); letter-spacing: .12em; text-transform: uppercase; }
#siteShell a:focus-visible, #siteShell button:focus-visible, #siteShell input:focus-visible, #siteShell select:focus-visible { outline: 3px solid var(--lampara); outline-offset: 3px; }
#siteShell .skip-link { position: fixed; z-index: 99; top: 5px; left: 5px; transform: translateY(-150%); }
#siteShell .skip-link:focus { transform: none; }

/* Header ---------------------------------------------------------------- */
/* Fixed, not sticky: a sticky header sits in flow and pushes the hero down by its own
   height, which meant ~72px of dead scroll before the video scrub could start. Fixed takes
   it out of flow, so the hero begins at scroll 0 and the animation runs from the first pixel.
   It is transparent over the hero (white text on the video, which the hero scrim darkens at
   the top) and picks up the translucent cream ground via .is-solid once the hero is past --
   app.js toggles that class from the hero's own bottom edge. */
/* Its own top scrim, so white nav text clears 4.5:1 over the brightest (midday sky) frame
   without darkening the whole video; it fades out as the header takes its solid ground. */
#siteShell .site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 24, 26, .55) 0%, rgba(23, 24, 26, .32) 45%, rgba(23, 24, 26, 0) 100%); transition: opacity .35s ease; }
#siteShell .site-header.is-solid::before { opacity: 0; }
#siteShell .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; min-height: 72px; padding: 10px var(--v-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s ease, color .35s ease, border-color .35s ease; }
/* Open mobile sheet: the header joins the cream panel instead of leaving a transparent
   strip above it. */
#siteShell .site-header.nav-open { color: var(--tinta); background: var(--crema); border-bottom-color: transparent; }
#siteShell .site-header.nav-open::before { opacity: 0; }
#siteShell .site-header.is-solid { color: var(--tinta); background: rgba(243, 238, 228, .86);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom-color: rgba(23, 24, 26, .08); }
#siteShell .brand img { display: block; width: 116px; height: auto; border-radius: 10px; }
#siteShell .site-nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); font: 600 .72rem/1 var(--v-body); letter-spacing: .1em; text-transform: uppercase; }
#siteShell .site-nav > a:not(.button), #siteShell .site-nav .map-cta { color: inherit; padding: 8px 0; border-bottom: 1px solid transparent; font-weight: 600; }
#siteShell .site-nav > a:not(.button):hover { border-bottom-color: currentColor; }
#siteShell .site-header.is-solid .site-nav > a:not(.button):hover { border-bottom-color: var(--lampara); }
#siteShell .language-toggle { border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: transparent; color: inherit;
  padding: 8px 10px; font: 600 .72rem/1 var(--v-body); letter-spacing: .1em; cursor: pointer; transition: border-color .35s ease; }
#siteShell .site-header.is-solid .language-toggle { border-color: rgba(23, 24, 26, .25); }
#siteShell .button--nav { min-height: 42px; padding: 10px 16px; background: var(--crema); color: var(--tinta); }
#siteShell .button--nav:hover { background: #fff; }
#siteShell .site-header.is-solid .button--nav { background: var(--tinta); color: var(--crema); }
#siteShell .site-header.is-solid .button--nav:hover { background: #000; }
#siteShell .nav-toggle { display: none; width: 44px; height: 44px; padding: 9px; border: 0; background: transparent; color: inherit; cursor: pointer; }
#siteShell .nav-toggle span { display: block; height: 2px; margin: 6px 0; background: currentColor; }
/* The fixed header overlays anchor targets, so every in-page destination reserves room. */
#siteShell #reserve, #siteShell #menu, #siteShell #story, #siteShell #events, #siteShell #about, #siteShell #contact { scroll-margin-top: 84px; }

/* Hero ------------------------------------------------------------------ */
#siteShell .v-hero { position: relative; height: 250vh; height: 250dvh; color: #fff;
  /* Solid ground: only ever visible in stitched full-page captures, never behind the sticky pin. */
  background: var(--tinta); }
#siteShell .v-hero-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--tinta); }
#siteShell .v-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#siteShell .v-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,24,26,.28) 0%, rgba(23,24,26,.12) 12%, rgba(23,24,26,0) 30%, rgba(23,24,26,.58) 74%, rgba(23,24,26,.84) 100%); }
#siteShell .v-hero-copy { position: absolute; left: var(--v-gutter); right: var(--v-gutter); bottom: clamp(88px, 15vh, 160px); max-width: 780px; }
#siteShell .v-hero-copy .eyebrow { color: #fff; opacity: .85; }
#siteShell .v-hero h1 { max-width: 14ch; color: #fff; font-size: clamp(2.5rem, 6.2vw, 5.6rem); text-shadow: 0 2px 28px rgba(0, 0, 0, .28); }
#siteShell .v-hero-sub { margin: 18px 0 26px; max-width: 46ch; color: #fff; font-size: 1.08rem; }
#siteShell .v-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#siteShell .v-pill--ghost { background: rgba(23, 24, 26, .28); border: 1px solid rgba(255, 255, 255, .75); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#siteShell .v-pill--ghost:hover { background: rgba(23, 24, 26, .5); }
/* Scroll-driven reveal: app.js splits the headline into word spans, groups them into rows, and
   adds .is-in to each row / the subline / the actions as the hero's scrub progress passes their
   threshold. Everything is visible when the hero is static (no scrub) or motion is reduced. */
#siteShell .v-hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(1.5deg); transform-origin: left bottom; transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; }
#siteShell .v-hero h1 .w.is-in { opacity: 1; transform: none; }
#siteShell .v-hero .v-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease .05s, transform .7s cubic-bezier(.22, 1, .36, 1) .05s; }
#siteShell .v-hero .v-reveal.is-in { opacity: 1; transform: none; }
#siteShell .v-hero.is-static h1 .w, #siteShell .v-hero.is-static .v-reveal { opacity: 1; transform: none; transition: none; }
#siteShell .v-hero-progress { position: absolute; right: var(--v-gutter); top: 50%; width: 3px; height: 120px; transform: translateY(-50%); border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; }
#siteShell .v-hero-progress i { display: block; width: 100%; height: 100%; background: #fff; transform-origin: top; transform: scaleY(var(--hero-progress, 0)); }
#siteShell .scroll-cue { position: absolute; right: var(--v-gutter); bottom: 26px; display: flex; align-items: center; gap: 9px; color: #fff; font: 600 .68rem/1 var(--v-body); letter-spacing: .12em; text-transform: uppercase; }
#siteShell .scroll-cue span:first-child { width: 36px; height: 1px; background: #fff; }
#siteShell .v-hero.is-static { height: 100vh; height: 100dvh; }
#siteShell .v-hero.is-static .v-hero-pin { position: relative; }
#siteShell .v-hero.is-static .v-hero-progress { display: none; }

/* Reservation band ------------------------------------------------------- */
#siteShell .reservation-bar { display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: 20px 28px; align-items: end; padding: 36px var(--v-gutter); background: var(--tinta); color: var(--crema); }
#siteShell .reservation-bar .eyebrow { margin-bottom: 6px; color: var(--crema); opacity: .7; }
#siteShell .reservation-bar h2 { color: var(--crema); font-size: clamp(1.8rem, 2.8vw, 2.7rem); }
#siteShell .booking-form { display: grid; grid-template-columns: 1.2fr .7fr 1fr auto; gap: 10px; align-items: end; }
#siteShell .booking-form label { color: var(--crema); opacity: .82; font: 600 .68rem/1 var(--v-body); letter-spacing: .1em; text-transform: uppercase; }
#siteShell .booking-form label span { display: block; margin-bottom: 7px; }
#siteShell .booking-form input, #siteShell .booking-form select { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--crema); color: var(--tinta); font: 500 .95rem var(--v-body); }
#siteShell .booking-form .button { height: 50px; padding: 0 22px; background: var(--lampara); color: #fff; white-space: nowrap; }
#siteShell .booking-form .button:hover { background: #26767F; transform: none; }
#siteShell .form-note { grid-column: 1 / -1; margin: 0; color: var(--petalo); font-size: .85rem; }
#siteShell .booking-experience { grid-column: 1 / -1; margin-top: 6px; padding: clamp(18px, 3vw, 32px); border-radius: var(--v-radius); background: var(--blanco); color: var(--tinta); }
#siteShell .booking-experience .eyebrow { color: var(--tinta); }
#siteShell .booking-experience h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

/* Menu: the vitrina ------------------------------------------------------ */
#siteShell .v-menu { padding: clamp(72px, 10vw, 140px) var(--v-gutter) clamp(80px, 10vw, 150px); background: var(--crema); }
#siteShell .v-intro { max-width: 720px; }
#siteShell .v-intro h2 { margin-bottom: 14px; font-size: clamp(2.4rem, 5vw, 4.6rem); }
#siteShell .v-intro p:not(.eyebrow) { max-width: 50ch; color: var(--gris); font-size: 1.02rem; }
#siteShell .menu-tabs { display: flex; gap: 10px; margin: 36px 0 16px; border: 0; }
#siteShell .tab { padding: 11px 18px; border: 1px solid rgba(23, 24, 26, .22); border-radius: 999px; background: transparent; color: var(--tinta); font: 600 .74rem/1 var(--v-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
#siteShell .tab.active { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }
#siteShell .v-chips { display: flex; gap: 8px; margin-bottom: 14px; padding: 4px 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#siteShell .v-chips::-webkit-scrollbar { display: none; }
#siteShell .v-chips:empty { display: none; }
#siteShell .v-chip { flex: 0 0 auto; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--petalo); color: var(--tinta); font: 600 .78rem/1 var(--v-body); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
#siteShell .v-chip--1 { background: var(--pistacho); }
#siteShell .v-chip--2 { background: var(--mantequilla); }
#siteShell .v-chip--3 { background: var(--lila); }
#siteShell .v-chip:hover, #siteShell .v-chip.is-active { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--tinta); }
#siteShell .menu-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(24px, 5vw, 72px); }
#siteShell .menu-group { padding: 0; border: 0; scroll-margin-top: 96px; }
#siteShell .menu-group h3 { position: relative; margin: 26px 0 12px; padding-left: 18px; font: 400 1.7rem/1.1 var(--v-display); font-style: normal; }
#siteShell .menu-group h3::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .14em; width: 6px; border-radius: 3px; background: var(--petalo); }
#siteShell .menu-group:nth-child(4n+2) h3::before { background: var(--pistacho); }
#siteShell .menu-group:nth-child(4n+3) h3::before { background: var(--mantequilla); }
#siteShell .menu-group:nth-child(4n+4) h3::before { background: var(--lila); }
#siteShell .menu-dish { margin: 0; border-bottom: 1px solid rgba(23, 24, 26, .12); }
#siteShell .menu-dish-trigger { padding: 12px 0; gap: 4px 14px; }
#siteShell .menu-dish-trigger strong { font: 600 1rem/1.3 var(--v-body); color: var(--tinta); }
#siteShell .menu-dish-trigger b { color: var(--tinta); font: 600 .95rem/1.3 var(--v-body); font-variant-numeric: tabular-nums; }
#siteShell .menu-dish-trigger i { color: var(--lampara); }
#siteShell .menu-dish-trigger small { color: var(--gris); }
#siteShell .menu-dish-detail { padding: 14px 0 16px; border-top: 1px dashed rgba(23, 24, 26, .2); }
#siteShell .menu-dish-detail img { border-radius: 14px; }
#siteShell .empty-message { color: var(--gris); }

/* Story (pistacho) ------------------------------------------------------- */
#siteShell .v-story { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(72px, 10vw, 140px) var(--v-gutter); background: var(--pistacho); }
#siteShell .v-story-image { margin: 0; }
#siteShell .v-story-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--v-radius); }
#siteShell .v-story-image figcaption { margin-top: 12px; color: var(--tinta); opacity: .7; font: 600 .68rem/1.4 var(--v-body); letter-spacing: .12em; text-transform: uppercase; }
#siteShell .v-story-copy h2 { margin-bottom: 18px; font-size: clamp(2.2rem, 4.4vw, 4rem); }
#siteShell .v-story-copy p:not(.eyebrow) { max-width: 52ch; font-size: 1.04rem; }

/* Reel (counter walk) ---------------------------------------------------- */
#siteShell .coastal-reel { height: 170vh; background: var(--tinta); }
#siteShell .reel-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
#siteShell .reel-frame { position: absolute; inset: 0; }
#siteShell .reel-frame img { width: 100%; height: 100%; object-fit: cover; }
#siteShell .reel-frame--two { clip-path: inset(100% 0 0); }
#siteShell .reel-sticky::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(23,24,26,.78) 0%, rgba(23,24,26,.34) 42%, transparent 72%); }
#siteShell .reel-line { position: absolute; z-index: 2; left: var(--v-gutter); bottom: 12vh; max-width: 14ch; margin: 0; color: #fff; font: italic 400 clamp(2rem, 5vw, 5.4rem)/1.05 var(--v-display); }

/* Reviews (lila) --------------------------------------------------------- */
#siteShell .v-reviews { padding: clamp(72px, 10vw, 140px) var(--v-gutter); background: var(--lila); }
#siteShell .v-reviews-head { margin-bottom: 32px; }
#siteShell .v-reviews-head h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); }
#siteShell .v-review-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#siteShell .reviews-aggregate { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 6px; color: var(--tinta); font: italic 400 clamp(1.6rem, 3vw, 2.4rem)/1 var(--v-display); }
#siteShell .v-review-list blockquote { margin: 0; padding: 24px; border-radius: var(--v-radius); background: var(--blanco); color: var(--tinta); font: 400 1.02rem/1.5 var(--v-body); }
#siteShell .v-review-list blockquote::before { content: "★★★★★"; display: block; margin-bottom: 12px; color: var(--lampara); font-size: .8rem; letter-spacing: .14em; }
#siteShell .v-review-list cite { display: block; margin-top: 16px; color: var(--gris); font: 600 .7rem/1 var(--v-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* Celebrations (mantequilla) --------------------------------------------- */
#siteShell .v-events { display: grid; grid-template-columns: 1fr 1fr; background: var(--mantequilla); color: var(--tinta); }
#siteShell .v-events-photo img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
#siteShell .v-events-copy { align-self: center; padding: clamp(56px, 8vw, 120px) var(--v-gutter); }
#siteShell .v-events-copy h2 { margin-bottom: 16px; font-size: clamp(2.2rem, 4.4vw, 4rem); }
#siteShell .v-events-copy p:not(.eyebrow) { max-width: 46ch; font-size: 1.04rem; }
#siteShell .v-events-copy .button { margin-top: 22px; }

/* Hours (petalo) --------------------------------------------------------- */
#siteShell .v-about { padding: clamp(72px, 10vw, 130px) var(--v-gutter); background: var(--petalo); text-align: center; }
#siteShell .v-about h2 { max-width: 32ch; margin: 0 auto 14px; font-size: clamp(1.7rem, 3.2vw, 3rem); }
#siteShell .v-about p:not(.eyebrow) { max-width: 48ch; margin: 0 auto; font-size: 1.04rem; }

/* Footer (tinta) --------------------------------------------------------- */
#siteShell footer { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 32px; padding: 56px var(--v-gutter) 64px; background: var(--tinta); color: var(--crema); }
#siteShell .footer-logo { display: block; width: 120px; height: auto; padding: 10px; border-radius: 12px; background: var(--crema); }
#siteShell footer p { max-width: 30ch; margin: 16px 0 0; opacity: .85; font-size: .95rem; }
#siteShell footer address { font-style: normal; font-size: .95rem; line-height: 1.9; opacity: .92; }
#siteShell footer a { color: var(--crema); }
#siteShell .map-link { display: inline-block; margin: 6px 0; border-bottom: 1px solid var(--lampara); font-weight: 600; }
#siteShell .footer-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#siteShell .button--outline { border: 1px solid rgba(243, 238, 228, .4); background: transparent; color: var(--crema); }
#siteShell .button--outline:hover { background: rgba(243, 238, 228, .12); }

/* Owner PIN gate ---------------------------------------------------------- */
/* The gate submits itself on the fourth typed digit (site/app.js), so the explicit button is
   redundant for someone typing. It stays in the DOM -- keyboard reachable, announced by
   assistive tech, revealed on keyboard focus -- and is still the completion step for paste,
   autofill and programmatic entry. The dialog sits outside #siteShell, so this is unscoped. */
#ownerPinForm [data-test="owner-pin-submit"] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; opacity: 0; overflow: hidden; }
#ownerPinForm [data-test="owner-pin-submit"]:focus-visible { position: static; width: auto; height: auto; min-height: 48px; padding: 12px 22px; opacity: 1; overflow: visible; }

/* Motion ----------------------------------------------------------------- */
#siteShell .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
#siteShell .reveal.visible { opacity: 1; transform: none; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  #siteShell .site-nav { gap: 12px; font-size: .66rem; }
  #siteShell .site-nav > a, #siteShell .site-nav .map-cta, #siteShell .button--nav { white-space: nowrap; }
  #siteShell .button--nav { padding: 9px 12px; }
  #siteShell .brand img { width: 96px; }
  #siteShell .reservation-bar, #siteShell .v-story, #siteShell .v-events { grid-template-columns: 1fr; }
  #siteShell .v-story { gap: 32px; }
  #siteShell .v-events-photo img { min-height: 340px; }
  #siteShell .menu-content { grid-template-columns: 1fr; }
  #siteShell .v-review-list { grid-template-columns: repeat(2, 1fr); }
  #siteShell footer { grid-template-columns: 1fr; }
  #siteShell .footer-actions { align-items: flex-start; }
}
@media (max-width: 640px) {
  #siteShell .nav-toggle { display: block; }
  #siteShell .site-nav { color: var(--tinta); display: none; position: absolute; inset: 72px 0 auto 0; grid-template-columns: 1fr; gap: 6px; padding: 18px var(--v-gutter) 26px; background: var(--crema); border-bottom: 1px solid rgba(23, 24, 26, .1); box-shadow: 0 24px 40px rgba(23, 24, 26, .12); }
  #siteShell .site-nav.open { display: grid; }
  #siteShell .site-nav > a:not(.button), #siteShell .site-nav .map-cta { display: block; padding: 12px 0; font-size: .9rem; }
  #siteShell .language-toggle { justify-self: start; border-color: rgba(23, 24, 26, .25); }
  #siteShell .button--nav { background: var(--tinta); color: var(--crema); }
  #siteShell .v-hero h1 { font-size: clamp(2.3rem, 10.4vw, 3.4rem); max-width: 12ch; }
  #siteShell .v-hero-copy { bottom: 88px; }
  #siteShell .v-hero-copy .eyebrow { font-size: .58rem; letter-spacing: .12em; max-width: 44ch; }
  #siteShell .v-hero-sub { font-size: 1rem; }
  #siteShell .v-hero-progress { display: none; }
  #siteShell .scroll-cue { left: var(--v-gutter); right: auto; }
  #siteShell .booking-form { grid-template-columns: 1fr 1fr; }
  #siteShell .booking-form label:last-of-type, #siteShell .booking-form .button { grid-column: span 2; }
  #siteShell .v-review-list { grid-template-columns: 1fr; }
  #siteShell .coastal-reel { height: 150vh; }
}
@media (prefers-reduced-motion: reduce) {
  #siteShell .reveal { opacity: 1; transform: none; transition: none; }
  #siteShell .v-hero { height: 100vh; height: 100dvh; }
  #siteShell .v-hero-pin { position: relative; }
  #siteShell .v-hero-progress { display: none; }
  #siteShell .coastal-reel { height: auto; }
  #siteShell .reel-sticky { position: static; height: auto; }
  #siteShell .reel-frame { position: relative; }
  #siteShell .reel-frame--two { display: none; }
  #siteShell .reel-frame img { height: 420px; }
  #siteShell .reel-line { position: relative; left: auto; bottom: auto; padding: 35px var(--v-gutter); }
  #siteShell .v-hero h1 .w, #siteShell .v-hero .v-reveal { opacity: 1; transform: none; transition: none; }
}