:root {
  --ink: #171713;
  --ink-soft: #54544d;
  --cream: #f6f0e8;
  --cream-2: #ece4d8;
  --paper: #fffdf8;
  --white: #ffffff;
  --plum: #743e4f;
  --plum-dark: #46252f;
  --sage: #66705c;
  --gold: #b79662;
  --line: rgba(23, 23, 19, .14);
  --shadow: 0 28px 80px rgba(31, 24, 27, .14);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.intro-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  padding: 10px 16px;
  border-radius: 999px;
  color: #3a2028;
  background: #e2c2cd;
}
.skip-link:focus { transform: translateY(0); }

.content-wrap { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--plum);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { width: 28px; height: 1px; content: ""; background: currentColor; }

/* Opening film */
.opening-film {
  position: fixed;
  z-index: 1200;
  inset: 0;
  overflow: hidden;
  background: #050505;
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease, visibility .8s ease;
}
.opening-film.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-film video { width: 100%; height: 100%; object-fit: cover; }
.opening-film::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.2));
}
.opening-skip {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 28px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

/* Header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(58, 32, 40, .16);
  color: #3a2028;
  background: rgba(233, 208, 217, .88);
  backdrop-filter: blur(16px);
}

/* On the homepage the navigation belongs to the opening film. It stays hidden
   through the loader and CAPRI reveal, then glides into place over the hero. */
.home-page .site-header {
  position: fixed;
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-105%);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.82,.2,1), visibility .7s ease;
}
.home-page.nav-ready .site-header,
.home-page.hero-instant .site-header {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.header-inner {
  width: min(calc(100% - 44px), var(--max));
  min-height: 82px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 270px 1fr 210px;
  align-items: center;
  gap: 26px;
}
.brand { display: inline-flex; width: max-content; align-items: center; gap: 12px; }
.brand img { width: 72px; height: 54px; object-fit: contain; filter: invert(1); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-family: var(--serif); font-size: 1.22rem; font-weight: 500; letter-spacing: .08em; }
.brand-copy span { margin-top: 5px; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.site-nav { justify-self: center; }
.site-nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.site-nav a { position: relative; font-size: .69rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.site-nav a::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 1px; content: ""; background: #fff; transform: scaleX(0); transition: transform .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.nav-cta, .btn {
  display: inline-flex;
  min-height: 48px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-cta { border-color: rgba(58, 32, 40, .42); }
.nav-cta:hover { color: #3a2028; background: #fff; transform: translateY(-1px); }
.btn-dark { color: #3a2028; background: #c0899a; }
.btn-dark:hover { transform: translateY(-2px); background: #b1798b; }
.btn-light { color: var(--ink); background: #fff; }
.btn-outline { border-color: rgba(58, 32, 40, .42); color: #3a2028; background: rgba(255,255,255,.35); }
.menu-toggle { display: none; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(58, 32, 40, .38); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 15px; height: 1px; content: ""; background: currentColor; }
.menu-toggle span { position: relative; }
.menu-toggle span::before { position: absolute; top: -5px; }
.menu-toggle span::after { position: absolute; top: 5px; }
.mobile-menu { position: fixed; z-index: 900; inset: 0; display: grid; visibility: hidden; place-items: center; color: #3a2028; background: rgba(233, 208, 217, .978); opacity: 0; transition: .25s ease; }
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu nav { display: grid; gap: 18px; text-align: center; }
.mobile-menu nav a { font-family: var(--serif); font-size: clamp(2rem, 8vw, 4rem); }
.mobile-menu-close { position: absolute; top: 26px; right: 26px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; background: transparent; font-size: 1.5rem; cursor: pointer; }

/* Homepage hero */
.hero {
  position: relative;
  min-height: 780px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #1c1719;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(17,13,15,.78) 0%, rgba(17,13,15,.36) 48%, rgba(17,13,15,.16) 100%), linear-gradient(0deg, rgba(17,13,15,.64) 0%, transparent 47%); }
.hero-content { position: relative; z-index: 2; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 0 0 72px; }
.hero-copy { max-width: 760px; }
.hero .eyebrow { color: #eadcc9; }
.hero h1 { max-width: 760px; margin: 18px 0 20px; font-family: var(--serif); font-size: clamp(4.2rem, 9vw, 8.5rem); font-weight: 400; line-height: .84; letter-spacing: -.055em; }
.hero h1 em { color: #e2c2cd; font-weight: 400; }
.hero p { max-width: 600px; margin: 0 0 28px; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { position: absolute; z-index: 3; right: max(24px, calc((100vw - var(--max))/2)); bottom: 72px; width: 260px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: rgba(26,19,23,.35); backdrop-filter: blur(14px); }
.hero-note small { display: block; margin-bottom: 4px; opacity: .7; text-transform: uppercase; letter-spacing: .12em; }
.hero-note strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }

.section { padding: 112px 0; }
.section.alt { background: var(--paper); }
.section.dark { color: #3a2028; background: #e2c2cd; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); align-items: end; gap: 80px; margin-bottom: 48px; }
.section-heading h2, .prose h2 { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(2.7rem, 5.2vw, 5.2rem); font-weight: 400; line-height: .96; letter-spacing: -.04em; }
.section-heading p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.dark .section-heading p, .dark .prose p { color: rgba(58, 32, 40, .74); }
.dark .eyebrow { color: #743e4f; }

.story-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.story-card { position: relative; min-height: 600px; overflow: hidden; border-radius: 28px; background: #ddd; box-shadow: var(--shadow); }
.story-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.story-card:hover img { transform: scale(1.025); }
.story-card .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; color: #fff; background: linear-gradient(0deg, rgba(24,17,20,.76), transparent 60%); }
.story-card h3 { max-width: 540px; margin: 6px 0 8px; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 4.2rem); font-weight: 400; line-height: .94; }
.story-card p { max-width: 560px; margin: 0; color: rgba(255,255,255,.8); }
.story-stack { display: grid; gap: 20px; }
.story-stack .story-card { min-height: 290px; }
.story-stack .story-card h3 { font-size: clamp(2rem, 3vw, 3rem); }

.feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--line); }
.feature { padding: 28px; background: var(--cream); }
.feature strong { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
.split-media { min-height: 560px; overflow: hidden; border-radius: 30px; box-shadow: var(--shadow); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.afternoon-tea-media { min-height: 0; }
.afternoon-tea-media img { height: auto; object-fit: contain; }
.prose .hours-card { margin-top: 24px; }
.prose .hours-card .hours-line { border-top-color: rgba(58, 32, 40, .14); }
.prose p { color: var(--ink-soft); font-size: 1.03rem; }
.prose h3 { margin: 28px 0 8px; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
.prose .btn { margin-top: 18px; }

.hours-card { padding: 34px; border-radius: 26px; color: #3a2028; background: linear-gradient(145deg, #eed6de, #e2c2cd); box-shadow: var(--shadow); }
.hours-card h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.hours-line { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.18); }
.hours-line span:last-child { font-weight: 700; }

.cta-band { padding: 36px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; border-radius: 28px; color: #3a2028; background: linear-gradient(135deg, #eed6de, #e2c2cd); box-shadow: var(--shadow); }
.cta-band h2 { margin: 0 0 5px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; }
.cta-band p { margin: 0; color: rgba(58, 32, 40, .74); }

/* Inner pages */
.page-hero { position: relative; min-height: 500px; display: grid; align-items: end; overflow: hidden; color: #fff; background: #31242b; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(25,17,22,.8), rgba(25,17,22,.18)); }
.page-hero .content-wrap { position: relative; z-index: 2; padding-bottom: 58px; }
.page-hero h1 { max-width: 920px; margin: 10px 0 10px; font-family: var(--serif); font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.page-hero p { max-width: 710px; margin: 0; color: rgba(255,255,255,.8); font-size: 1.05rem; }

.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.menu-card { min-height: 360px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 26px; color: #fff; background-position: center; background-size: cover; box-shadow: var(--shadow); position: relative; }
.menu-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(25,16,21,.78), rgba(25,16,21,.08)); }
.menu-card > * { position: relative; z-index: 1; }
.menu-card h3 { margin: 6px 0; font-family: var(--serif); font-size: 2.5rem; font-weight: 400; }
.menu-card p { max-width: 520px; margin: 0; color: rgba(255,255,255,.82); }
.menu-card .menu-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.notice { padding: 24px 26px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink-soft); background: rgba(255,255,255,.55); }
.notice strong { color: var(--ink); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.info-list { display: grid; gap: 14px; }
.info-box { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.64); }
.info-box strong { display: block; margin-bottom: 5px; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.info-box p, .info-box a { margin: 0; color: var(--ink-soft); }

.form-card { padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid rgba(23,23,19,.18); border-radius: 13px; padding: 13px 14px; color: var(--ink); background: #fcfaf6; outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(116, 62, 79,.1); }
.form-note { margin: 10px 0 0; color: var(--ink-soft); font-size: .82rem; }
.form-note[data-state="success"] { color: #2d6b46; }
.form-note[data-state="error"] { color: #9f3d36; }

.contact-card { padding: 32px; border-radius: 25px; color: #3a2028; background: #e2c2cd; }
.contact-card h3 { margin: 0 0 16px; font-family: var(--serif); font-size: 2.25rem; font-weight: 400; }
.contact-links { display: grid; gap: 10px; }
.contact-links a { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.18); }
.contact-links small { display: block; opacity: .64; text-transform: uppercase; letter-spacing: .1em; }

/* Footer */
.site-footer { padding: 70px 0 26px; color: #3a2028; background: #e2c2cd; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .75fr .9fr .9fr; gap: 44px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 72px; filter: invert(1); }
.footer-brand strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.footer-grid h3 { margin: 0 0 13px; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.footer-grid p { color: rgba(58, 32, 40, .74); font-size: .9rem; }
.footer-links { display: grid; gap: 8px; color: rgba(58, 32, 40, .74); font-size: .9rem; }
.footer-links a:hover { color: #3a2028; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(58, 32, 40, .16); color: rgba(58, 32, 40, .82); font-size: .8rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .header-inner { grid-template-columns: 250px 1fr 150px; }
  .site-nav ul { gap: 20px; }
  .site-nav a { font-size: .64rem; }
  .nav-cta { display: none; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 900px) {
  .content-wrap, .hero-content { width: min(calc(100% - 30px), var(--max)); }
  .header-inner { width: min(calc(100% - 28px), var(--max)); grid-template-columns: 1fr auto; }
  .site-nav, .header-actions .nav-cta { display: none; }
  .menu-toggle { display: grid; }
  .hero { min-height: 700px; }
  .hero-note { display: none; }
  .hero h1 { font-size: clamp(4rem, 16vw, 7rem); }
  .section { padding: 82px 0; }
  .section-heading, .story-grid, .split, .two-col { grid-template-columns: 1fr; gap: 34px; }
  .section-heading { margin-bottom: 34px; }
  .story-card { min-height: 480px; }
  .story-stack { grid-template-columns: 1fr 1fr; }
  .story-stack .story-card { min-height: 300px; }
  .split-media { min-height: 430px; }
  .cta-band { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
}

@media (max-width: 620px) {
  .brand-copy span { display: none; }
  .brand img { width: 64px; }
  .hero-content { padding-bottom: 48px; }
  .hero h1 { margin-top: 12px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .story-stack { grid-template-columns: 1fr; }
  .story-card, .story-stack .story-card { min-height: 390px; }
  .story-card .overlay { padding: 24px; }
  .feature-strip { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .form-card { padding: 24px; }
  .page-hero { min-height: 430px; }
  .page-hero .content-wrap { padding-bottom: 38px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .opening-skip { right: 18px; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* 2026 Cafe Capri Lounge production refresh */
:root {
  --pink: #e2c2cd;
  --pink-deep: #c0899a;
  --rose: #9a5566;
}
.brand img, .footer-brand img { filter: none; object-fit: contain; }
.site-credit a { color: #3a2028; font-weight: 800; }
.site-credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* Three second Capri loader, adapted from the original Capri location experience */
.site-loader.capri-original-loader {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #f6f0e8;
  transition: opacity .72s ease, filter .72s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility .72s ease;
}
.site-loader.capri-original-loader::after {
  position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .08;
  background-image: radial-gradient(circle at 20% 30%, #000 0 .7px, transparent .9px), radial-gradient(circle at 78% 72%, #000 0 .7px, transparent .9px);
  background-size: 13px 13px, 14px 14px; mix-blend-mode: multiply;
}
.site-loader.is-finished { opacity: 0; filter: blur(12px); transform: scale(.94); visibility: hidden; pointer-events: none; }
.loading-background { position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(116, 62, 79,.18), transparent 23rem), radial-gradient(circle at 82% 22%, rgba(232,200,220,.30), transparent 21rem), radial-gradient(circle at 50% 58%, rgba(255,253,248,.94), rgba(246,240,232,.97) 44%, rgba(242,228,236,.82) 72%, #f6f0e8 100%), linear-gradient(180deg, #fffdf8 0%, #e2c2cd 100%); }
.loading-grid { position: absolute; inset: 0; opacity: .17; background: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle at center, black, transparent 75%); }
.loading-blur { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .75; }
.loading-blur-one { left: -8%; bottom: -12%; width: 34rem; height: 34rem; background: rgba(116, 62, 79,.30); }
.loading-blur-two { right: -6%; top: -10%; width: 31rem; height: 31rem; background: rgba(232,200,220,.44); }
.loading-blur-three { left: 50%; top: 50%; width: 28rem; height: 28rem; background: rgba(183,150,98,.18); transform: translate(-50%, -50%); }
.loading-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.loading-orbit-outer { width: min(720px, 82vw); aspect-ratio: 1; border: 1px solid rgba(116, 62, 79,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); opacity: .8; animation: loaderOrbit 18s linear infinite; }
.loading-orbit-middle { width: min(620px, 72vw); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.72); opacity: .7; animation: loaderOrbitReverse 22s linear infinite; }
.loading-orbit-inner { width: min(540px, 63vw); aspect-ratio: 1; border: 1px solid rgba(183,150,98,.24); opacity: .55; animation: loaderOrbit 24s linear infinite; }
.loading-olive { position: absolute; z-index: 4; width: 118px; height: 118px; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(131,126,109,.16)); }
.loading-olive-left { left: calc(50% - 280px); top: calc(50% + 112px); transform: rotate(-28deg); }
.loading-olive-right { right: calc(50% - 300px); top: calc(50% - 78px); transform: rotate(34deg); }
.loading-olive .olive-stem { position: absolute; left: 50%; top: 6px; width: 2px; height: 106px; background: #b79662; transform: translateX(-50%) rotate(20deg); transform-origin: top center; border-radius: 999px; }
.loading-olive .olive-leaf { position: absolute; width: 34px; height: 16px; border-radius: 100% 0 100% 0; background: #c0899a; }
.loading-olive .olive-leaf-a { left: 17px; top: 16px; transform: rotate(-28deg); }
.loading-olive .olive-leaf-b { left: 54px; top: 28px; transform: rotate(28deg); }
.loading-olive .olive-leaf-c { left: 23px; top: 56px; transform: rotate(-36deg); }
.loading-olive .olive-leaf-d { left: 58px; top: 68px; transform: rotate(30deg); }
.loading-olive .olive-berry { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #743e4f; box-shadow: 16px 7px 0 0 #b79662; }
.loading-olive .olive-berry-one { left: 34px; top: 39px; }
.loading-olive .olive-berry-two { left: 40px; top: 82px; transform: scale(.92); opacity: .95; }
.loader-art-wrap { position: relative; z-index: 3; width: clamp(205px, 18vw, 260px); aspect-ratio: 1; display: grid; place-items: center; transform: translateY(-18px); }
.loader-halo { position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.97) 0 34%, rgba(246,240,232,.94) 53%, rgba(232,200,220,.30) 69%, rgba(255,255,255,0) 76%); box-shadow: 0 28px 42px rgba(105,99,80,.10), inset -14px -16px 30px rgba(192,183,158,.12); filter: blur(.6px); opacity: .96; }
.loader-cloche { position: relative; z-index: 4; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 20px 32px rgba(12,18,12,.14)) drop-shadow(0 0 26px rgba(220,180,92,.08)); }
.cloche-knob, .cloche-stem, .cloche-dome, .cloche-tray { fill: none; stroke: #743e4f; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cloche-accent, .cloche-swoosh { fill: none; stroke: #b79662; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cloche-tray-lower { stroke-width: 2.8; opacity: .85; }
.cloche-steam { fill: none; stroke: #c0899a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 150; filter: drop-shadow(0 0 12px rgba(236,216,164,.72)); animation: clocheSteam 1.7s ease-in-out infinite; }
.steam-b { animation-delay: .32s; } .steam-c { animation-delay: .64s; }
.loader-progress { position: absolute; z-index: 5; left: 50%; bottom: clamp(62px, 7.2vh, 88px); width: min(325px, 68vw); height: 7px; transform: translateX(-50%); }
.loader-progress-track, .loader-progress-run, .loader-progress-glow { position: absolute; inset: 0; border-radius: 999px; }
.loader-progress-track { background: rgba(70, 37, 47,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.loader-progress-run { width: 0%; background: linear-gradient(90deg, #46252f 0%, #743e4f 28%, #c0899a 54%, #e2c2cd 72%, #b79662 100%); box-shadow: 0 0 18px rgba(116, 62, 79,.34), 0 0 34px rgba(232,200,220,.38); animation: loadThreeSeconds 3s cubic-bezier(.18,.85,.2,1) forwards; }
.loader-progress-glow { background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); mix-blend-mode: screen; transform: translateX(-100%); animation: loaderGloss 1.05s ease-in-out infinite; }
.loader-caption { position: absolute; left: 50%; bottom: clamp(30px, 4.3vh, 44px); width: min(90vw, 460px); margin: 0; transform: translateX(-50%); text-align: center; color: rgba(70, 37, 47,.82); font-size: .66rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
@keyframes loadThreeSeconds { to { width: 100%; } }
@keyframes loaderGloss { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes loaderOrbit { to { transform: rotate(360deg); } }
@keyframes loaderOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes clocheSteam { 0% { stroke-dashoffset: 150; opacity: 0; transform: translateY(7px); } 35% { opacity: 1; } 75% { stroke-dashoffset: 0; opacity: .85; } 100% { stroke-dashoffset: -150; opacity: 0; transform: translateY(-8px); } }

/* The opening film is the homepage hero itself. There is no second hero after it. */
.video-hero { min-height: 100svh; }
.video-hero .hero-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.012); }
.video-hero .hero-media::after { background: linear-gradient(90deg, rgba(17,13,15,.68) 0%, rgba(17,13,15,.24) 50%, rgba(17,13,15,.06) 100%), linear-gradient(0deg, rgba(17,13,15,.56) 0%, transparent 48%); transition: opacity 1s ease; }
.hero-capri-intro { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(940px, calc(100% - 42px)); transform: translate(-50%, -50%); text-align: center; color: #fff; pointer-events: none; opacity: 0; transition: opacity .75s ease, transform .85s cubic-bezier(.2,.8,.2,1), filter .75s ease; }
.hero-capri-intro.is-live { opacity: 1; }
.hero-capri-intro.is-leaving { opacity: 0; transform: translate(-50%, -50%) scale(1.08); filter: blur(9px); }
.hero-capri-word { display: flex; justify-content: center; gap: 0; padding-inline: 1rem; font-family: var(--serif); font-size: clamp(5.6rem, 15vw, 12rem); font-style: italic; font-weight: 400; line-height: .8; letter-spacing: -.075em; text-shadow: 0 8px 42px rgba(0,0,0,.4); }
.hero-capri-word span { display: inline-block; opacity: 0; filter: blur(15px); transform-origin: 50% 70%; }
.hero-capri-word span + span { margin-left: -.045em; }
.hero-capri-word .from-top { transform: translateY(-120px) rotate(-10deg) scale(.78); }
.hero-capri-word .from-bottom { transform: translateY(120px) rotate(9deg) scale(.78); }
.hero-capri-intro.is-live .hero-capri-word span { animation: heroCapriLetter .9s cubic-bezier(.16,.84,.28,1) forwards; }
.hero-capri-intro.is-live .hero-capri-word span:nth-child(1) { animation-delay: .05s; }
.hero-capri-intro.is-live .hero-capri-word span:nth-child(2) { animation-delay: .15s; }
.hero-capri-intro.is-live .hero-capri-word span:nth-child(3) { animation-delay: .25s; }
.hero-capri-intro.is-live .hero-capri-word span:nth-child(4) { animation-delay: .35s; }
.hero-capri-intro.is-live .hero-capri-word span:nth-child(5) { animation-delay: .45s; }
.hero-capri-flourish { width: min(520px, 68vw); height: 72px; margin-top: -10px; overflow: visible; opacity: 0; }
.hero-capri-flourish path { fill: none; stroke: rgba(235,204,135,.92); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 660; stroke-dashoffset: 660; }
.hero-capri-intro.is-live .hero-capri-flourish { animation: heroFlourishShow .3s .88s ease forwards; }
.hero-capri-intro.is-live .hero-capri-flourish path { animation: heroFlourishDraw 1s .9s cubic-bezier(.25,.78,.2,1) forwards; }
.hero-capri-subtitle { margin-top: -15px; font-size: clamp(.62rem, 1.3vw, .9rem); font-weight: 800; letter-spacing: .42em; text-transform: uppercase; opacity: 0; transform: translateY(12px); text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.hero-capri-subtitle b { color: #e2c2cd; }
.hero-capri-intro.is-live .hero-capri-subtitle { animation: heroSubtitleIn .62s 1s ease forwards; }
@keyframes heroCapriLetter { to { opacity: 1; filter: blur(0); transform: translateY(0) rotate(0) scale(1); } }
@keyframes heroFlourishShow { to { opacity: 1; } }
@keyframes heroFlourishDraw { to { stroke-dashoffset: 0; } }
@keyframes heroSubtitleIn { to { opacity: .92; transform: translateY(0); } }

.home-page [data-hero-copy] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.home-page.hero-ready [data-hero-copy] { opacity: 1; transform: translateY(0); }
.home-page.hero-instant [data-hero-copy] { opacity: 1; transform: none; transition: none; }

@media (max-width: 700px) {
  .loading-olive { display: none; }
  .loader-art-wrap { width: min(210px, 54vw); }
  .loader-progress { bottom: 66px; }
  .loader-caption { bottom: 35px; font-size: .58rem; letter-spacing: .16em; }
  .hero-capri-word { font-size: clamp(5rem, 25vw, 8rem); }
  .hero-capri-subtitle { letter-spacing: .24em; }
}

/* Editorial photography */
.editorial-grid { display: grid; grid-template-columns: 1.12fr .88fr; grid-template-rows: 1fr 1fr; gap: 20px; }
.editorial-card { position: relative; min-height: 320px; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow); color: #fff; background: #24191f; }
.editorial-card.editorial-tall { grid-row: 1 / 3; min-height: 660px; }
.editorial-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.editorial-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(23,15,19,.76), transparent 58%); }
.editorial-card > div { position: absolute; z-index: 2; right: 28px; bottom: 28px; left: 28px; }
.editorial-card span { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.editorial-card h3 { max-width: 530px; margin: 7px 0 0; font-family: var(--serif); font-size: clamp(2rem, 3.8vw, 4rem); font-weight: 400; line-height: .94; }
.editorial-card:hover img { transform: scale(1.025); }
.photo-mosaic { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 280px 280px; gap: 18px; }
.photo-mosaic figure { margin: 0; overflow: hidden; border-radius: 26px; box-shadow: var(--shadow); }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.photo-mosaic .photo-a { grid-row: 1 / 3; }

/* Menu source cards and full HTML menu */
.menu-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.menu-source-card { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(42,28,35,.08); transition: transform .25s ease, box-shadow .25s ease; }
.menu-source-card:hover { transform: translateY(-4px); box-shadow: 0 26px 65px rgba(42,28,35,.13); }
.menu-source-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.menu-source-card > div { padding: 20px; display: grid; gap: 5px; }
.menu-source-card span { color: var(--rose); font-size: .65rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.menu-source-card strong { font-family: var(--serif); font-size: 1.28rem; font-weight: 500; line-height: 1.05; }
.menu-source-card small { margin-top: 8px; color: var(--ink-soft); font-weight: 700; }
.menu-anchor-wrap { position: sticky; z-index: 70; top: 82px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,253,248,.92); backdrop-filter: blur(14px); }
.menu-anchor-nav { display: flex; gap: 10px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.menu-anchor-nav::-webkit-scrollbar { display: none; }
.menu-anchor-nav a { flex: 0 0 auto; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.menu-anchor-nav a:hover { color: #3a2028; background: #e2c2cd; border-color: #c0899a; }
.menu-content { background: linear-gradient(180deg, var(--cream), #f9f4ed); }
.menu-section { padding: 54px 0 28px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.menu-section:first-child { padding-top: 0; }
.menu-section-heading { display: grid; grid-template-columns: minmax(240px, .72fr) 1fr; gap: 42px; align-items: end; margin-bottom: 24px; }
.menu-section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 4.5vw, 4.6rem); font-weight: 400; line-height: .94; letter-spacing: -.035em; }
.menu-section-heading p { max-width: 700px; margin: 0; color: var(--ink-soft); }
.menu-items-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 42px; }
.menu-item { padding: 16px 0; border-bottom: 1px solid rgba(23,23,19,.11); }
.menu-item-line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 18px; }
.menu-item h3 { margin: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.18; }
.menu-price { color: var(--plum); font-weight: 900; white-space: nowrap; }
.menu-item p { max-width: 760px; margin: 6px 0 0; color: var(--ink-soft); font-size: .88rem; }
.kids-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 24px; }
.allergy-panel { margin-top: 40px; padding: 26px 28px; border: 1px solid rgba(154, 85, 102,.24); border-radius: 22px; background: #e2c2cd; }
.allergy-panel strong { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 1.35rem; }
.allergy-panel p { margin: 0; color: #57444e; }

/* Private hire */
.hire-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 72px; }
.price-card { padding: 32px; border: 1px solid rgba(116, 62, 79,.14); border-radius: 26px; background: linear-gradient(145deg, #fff, #e2c2cd); box-shadow: 0 20px 60px rgba(54, 29, 37,.08); }
.price-card span { display: block; min-height: 42px; color: var(--ink-soft); font-size: .78rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.price-card strong { display: block; margin-top: 18px; color: var(--plum-dark); font-family: var(--serif); font-size: clamp(3rem, 5vw, 5rem); font-weight: 400; line-height: .9; }
.price-card small { display: block; margin-top: 8px; color: var(--ink-soft); }
.hire-detail { align-items: center; }
.styled-list { margin: 20px 0 26px; padding: 0; list-style: none; }
.styled-list li { position: relative; padding: 11px 0 11px 28px; border-bottom: 1px solid var(--line); }
.styled-list li::before { position: absolute; left: 0; top: 18px; width: 8px; height: 8px; content: ""; border-radius: 50%; background: var(--pink-deep); }
.text-link { color: var(--plum); font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }

/* FAQ and simple pages */
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.faq-grid article { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.faq-grid h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
.faq-grid p { margin: 0; color: var(--ink-soft); }
.simple-hero { padding: 120px 0 76px; color: #3a2028; background: linear-gradient(135deg, #eed6de, #e2c2cd); }
.simple-hero h1 { margin: 12px 0; font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 400; line-height: .9; }
.simple-hero p { max-width: 700px; color: rgba(58, 32, 40, .74); }
.narrow { max-width: 860px; }
.narrow h2 { margin-top: 36px; }

@media (max-width: 1120px) {
  .menu-source-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-anchor-wrap { top: 82px; }
}
@media (max-width: 900px) {
  .editorial-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .editorial-card.editorial-tall { grid-row: auto; min-height: 500px; }
  .editorial-card { min-height: 420px; }
  .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 260px; }
  .photo-mosaic .photo-a { grid-column: 1 / 3; grid-row: auto; }
  .menu-anchor-wrap { top: 82px; }
  .menu-section-heading { grid-template-columns: 1fr; gap: 10px; }
  .menu-items-grid { grid-template-columns: 1fr; }
  .hire-pricing-grid { grid-template-columns: 1fr; margin-bottom: 50px; }
  .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .loader-capri { font-size: 23vw; }
  .opening-capri { font-size: 24vw; }
  .opening-lounge { letter-spacing: .24em; }
  .menu-source-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .menu-source-card > div { padding: 14px; }
  .menu-source-card strong { font-size: 1rem; }
  .menu-anchor-wrap { top: 82px; }
  .menu-section { padding-top: 42px; }
  .kids-detail-grid { grid-template-columns: 1fr; }
  .photo-mosaic { grid-template-columns: 1fr; grid-template-rows: 390px 260px 260px; }
  .photo-mosaic .photo-a { grid-column: auto; }
  .footer-bottom { gap: 8px; }
}

/* The Reduce Motion rule that used to sit here hid the loading screen and
   the opening film outright. Both are wanted in every motion mode now, so
   it is deleted rather than argued with further down the file. */


/* WhatsApp contact */
.whatsapp-widget { position: fixed; right: 22px; bottom: 22px; z-index: 140; display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 17px 0 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: #fff; background: #8f5265; box-shadow: 0 14px 38px rgba(58, 32, 40,.26); font-size: .78rem; font-weight: 800; letter-spacing: .03em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.whatsapp-widget:hover { transform: translateY(-3px); background: #743e4f; box-shadow: 0 18px 44px rgba(38, 20, 26,.34); }
.whatsapp-widget svg { width: 27px; height: 27px; fill: currentColor; }
@media (max-width: 640px) { .whatsapp-widget { right: 14px; bottom: 14px; width: 54px; height: 54px; min-height: 54px; padding: 0; justify-content: center; } .whatsapp-widget span { display:none; } }

/* Live gallery */
.gallery-hero .page-hero-media img { object-position: center 55%; }
.live-gallery { min-height: 280px; }
.gallery-status { padding: 60px 0; text-align: center; color: var(--muted); }
.gallery-grid { columns: 3 280px; column-gap: 18px; }
.gallery-tile { break-inside: avoid; margin: 0 0 18px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 8px 30px rgba(55,38,49,.08); }
.gallery-tile img { display:block; width:100%; height:auto; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.gallery-tile:hover img { transform: scale(1.025); }
.gallery-tile figcaption { padding: 12px 15px 15px; color: var(--muted); font-size: .84rem; }


/* ============================================================
   Layered homepage stage
   Sits directly below the opening film. Carries the loader's
   cream, plum, pink and gold palette into the page so the two
   read as one continuous piece rather than two designs.
   Every selector here is new, so nothing above is affected.
   ============================================================ */
.capri-stage {
  position: relative;
  z-index: 1;
  /* The hero is the first thing on the page now that the film is an overlay,
     and the homepage header is fixed. The positioned content is offset to
     clear it while the background still runs up behind it. */
  --header-clear: 86px;
  height: calc(846px + var(--header-clear));
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 20%, rgba(116, 62, 79, .16), transparent 42%),
    radial-gradient(circle at 84% 14%, rgba(232, 200, 220, .34), transparent 40%),
    radial-gradient(circle at 52% 82%, rgba(183, 150, 98, .13), transparent 46%),
    linear-gradient(180deg, #fffdf8 0%, #f8f1ea 46%, #e2c2cd 100%);
}
/* The same fine dot texture the loader uses, so the surfaces match. */
.capri-stage::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .07;
  background-image:
    radial-gradient(circle at 20% 30%, #000 0 .7px, transparent .9px),
    radial-gradient(circle at 78% 72%, #000 0 .7px, transparent .9px);
  background-size: 13px 13px, 14px 14px;
  mix-blend-mode: multiply;
}

/* Purple sweep in the top right, replacing the olive shape of the reference layout. */
.stage-plum {
  position: absolute;
  z-index: 0;
  top: -112px;
  right: -74px;
  width: 44%;
  height: 548px;
  overflow: hidden;
  border-radius: 52% 0 0 56%;
  background:
    radial-gradient(circle at 25% 62%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 34%),
    linear-gradient(145deg, #eed6de 0%, #e2c2cd 58%, #d3a9b8 100%);
  transform: rotate(-4deg);
}
.stage-plum::before,
.stage-plum::after {
  position: absolute;
  width: 270px;
  height: 1px;
  content: "";
  background: rgba(232, 200, 220, .22);
  box-shadow: 0 24px rgba(183, 150, 98, .18), 0 48px rgba(255, 255, 255, .07);
  transform: rotate(55deg);
}
.stage-plum::before { top: 132px; right: -38px; }
.stage-plum::after { top: 28px; right: 112px; transform: rotate(68deg); }

/* Faint rings, echoing the orbits on the loading screen. */
.stage-orbit {
  position: absolute;
  z-index: 0;
  top: 46%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.stage-orbit-outer { width: min(780px, 66vw); border: 1px solid rgba(116, 62, 79, .15); animation: stageOrbit 38s linear infinite; }
.stage-orbit-inner { width: min(560px, 48vw); border: 1px solid rgba(183, 150, 98, .17); animation: stageOrbitBack 30s linear infinite; }
@keyframes stageOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes stageOrbitBack { to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* --- The light-up --- */
/* Before the stage is reached the scene sits in shadow. When it enters view a
   warm light blooms in from the upper left, travels across and dissipates,
   a specular pass runs over the plates, and the elements settle in sequence. */
.stage-veil {
  position: absolute;
  z-index: 30;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(135deg, rgba(38, 22, 32, .58) 0%, rgba(58, 34, 49, .34) 48%, rgba(22, 13, 18, .54) 100%);
  transition: opacity 1.8s cubic-bezier(.3, .7, .2, 1);
}
.capri-stage.is-lit .stage-veil { opacity: 0; }

.stage-dawn {
  position: absolute;
  z-index: 2;
  inset: -22%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 247, 231, .95) 0%, rgba(255, 231, 244, .44) 27%, rgba(255, 255, 255, 0) 62%);
  transform: translate3d(-22%, -18%, 0) scale(.3);
}
.capri-stage.is-lit .stage-dawn { animation: stageDawn 3.6s cubic-bezier(.22, .7, .2, 1) forwards; }
@keyframes stageDawn {
  0% { opacity: 0; transform: translate3d(-22%, -18%, 0) scale(.3); }
  24% { opacity: .95; }
  62% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(15%, 11%, 0) scale(1.28); }
}

.stage-sweep { position: absolute; z-index: 24; inset: 0; overflow: hidden; pointer-events: none; }
.stage-sweep::before {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -34%;
  width: 26%;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 252, 240, .58), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  transform: rotate(12deg) translateX(-150%);
}
.capri-stage.is-lit .stage-sweep::before { animation: stageSweep 2.4s .45s cubic-bezier(.4, .08, .2, 1) forwards; }
@keyframes stageSweep {
  0% { opacity: 0; transform: rotate(12deg) translateX(-150%); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: rotate(12deg) translateX(580%); }
}

/* Elements arrive in sequence once the light reaches them. */
[data-stage-item] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--stage-order, 0) * 120ms + 260ms);
}
.capri-stage.is-lit [data-stage-item] { opacity: 1; transform: none; }

/* --- Copy --- */
.stage-copy {
  position: absolute;
  z-index: 8;
  top: calc(var(--header-clear) + 40px);
  left: 5.5%;
  width: 29%;
  max-width: 405px;
}
.stage-copy h2 {
  margin: 22px 0 16px;
  font-family: var(--serif);
  font-size: clamp(3.1rem, 3.9vw, 4.05rem);
  font-weight: 400;
  line-height: .89;
  letter-spacing: -.055em;
}
.stage-copy h2 em { color: var(--rose); font-weight: 400; }
.stage-copy p { max-width: 355px; margin: 0 0 24px; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }

/* --- The two plates --- */
/* The box is sized in percentages with a fixed ratio, so the overlap between
   the two circles holds at every width rather than drifting apart. */
.stage-plates {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-clear) + 26px);
  left: 33.5%;
  width: 54%;
  aspect-ratio: 1.46;
  pointer-events: none;
}
.stage-plate {
  position: absolute;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  transform: translate3d(calc(var(--plate-x, 0px) * var(--depth, 1)), calc(var(--plate-y, 0px) * var(--depth, 1)), 0);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), box-shadow 1.4s ease;
}
.capri-stage.is-settled .stage-plate { transition: transform .26s ease-out, box-shadow .3s ease; }
.stage-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.58) saturate(.55) blur(3px);
  transform: scale(1.06);
  transition: filter 2s ease, transform 2.3s cubic-bezier(.2, .8, .2, 1);
}
.capri-stage.is-lit .stage-plate img { filter: none; transform: scale(1); }
.stage-plate-a {
  z-index: 2;
  top: 0;
  right: 0;
  width: 60%;
  box-shadow: 0 30px 60px rgba(52, 30, 44, .06);
}
.capri-stage.is-lit .stage-plate-a { box-shadow: 0 38px 72px rgba(52, 30, 44, .24); }
.stage-plate-b {
  z-index: 3;
  bottom: 0;
  left: 2%;
  width: 48%;
  border: 6px solid rgba(255, 253, 248, .9);
  box-shadow: 0 22px 44px rgba(52, 30, 44, .06);
}
.capri-stage.is-lit .stage-plate-b { box-shadow: 0 30px 62px rgba(52, 30, 44, .26); }

/* --- Shared card treatment --- */
.stage-card {
  --mx: 0px; --my: 0px; --mrx: 0deg; --mry: 0deg; --lift: 0px; --scroll: 0px;
  position: absolute;
  transform:
    perspective(1000px)
    translate3d(var(--mx), calc(var(--my) + var(--lift) + var(--scroll)), 0)
    rotateX(var(--mrx)) rotateY(var(--mry));
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.capri-stage.is-settled .stage-card { transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease; }
.stage-card:hover, .stage-card:focus-visible { --lift: -7px; }
.stage-glass {
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 18px;
  background: rgba(255, 253, 248, .74);
  box-shadow: 0 14px 34px rgba(52, 30, 44, .10);
  backdrop-filter: blur(18px);
}
.stage-glass:hover, .stage-glass:focus-visible { box-shadow: 0 28px 58px rgba(52, 30, 44, .17); }
.card-label {
  display: block;
  margin-bottom: 13px;
  color: var(--plum);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mini-link { color: var(--rose); font-size: .55rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

/* --- Highlight chips --- */
.stage-highlights {
  position: absolute;
  z-index: 12;
  top: calc(var(--header-clear) + 34px);
  right: 5%;
  display: grid;
  width: 212px;
  gap: 10px;
}
.stage-chip {
  display: grid;
  grid-template-columns: 40px 1fr;
  min-height: 74px;
  padding: 12px 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 13px;
  color: #3a2028;
  background: rgba(255, 253, 248, .58);
  box-shadow: 0 12px 28px rgba(38, 20, 26, .16);
  backdrop-filter: blur(13px);
  transition: background .25s ease, transform .25s ease;
}
.stage-chip:hover, .stage-chip:focus-visible { background: rgba(255, 253, 248, .82); }
.capri-stage.is-lit .stage-chip:hover, .capri-stage.is-lit .stage-chip:focus-visible { transform: translateY(-3px); }
.chip-icon {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--plum-dark);
  background: rgba(255, 253, 248, .92);
  font-size: .7rem;
  font-weight: 900;
}
.chip-icon img { width: 100%; height: 100%; object-fit: cover; }
.stage-chip strong { display: block; font-size: .73rem; line-height: 1.2; }
.stage-chip small { display: block; margin-top: 4px; color: rgba(58, 32, 40, .74); font-size: .5rem; line-height: 1.38; }

/* --- Gallery card, in place of the events board --- */
.stage-gallery {
  z-index: 18;
  top: calc(var(--header-clear) + 430px);
  left: 3.5%;
  width: 330px;
  padding: 20px;
}
.stage-gallery .card-label { font-size: .62rem; }
.gallery-ticket {
  display: flex;
  min-height: 50px;
  padding: 10px 13px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px rgba(52, 30, 44, .08);
}
.gallery-ticket strong { font-size: .76rem; }
.gallery-ticket small { display: block; color: var(--ink-soft); font-size: .55rem; }
.gallery-ticket-link {
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--plum);
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gallery-ticket-link:hover { background: #b1798b; }
.stage-gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.stage-gallery-strip a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(116, 62, 79, .08);
}
.stage-gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.stage-gallery-strip a:hover img { transform: scale(1.08); }
.stage-gallery-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px 14px;
  border: 1px dashed rgba(116, 62, 79, .3);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: .58rem;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

/* --- Food and drink card --- */
.stage-drinks {
  z-index: 19;
  top: calc(var(--header-clear) + 366px);
  right: 4%;
  width: 236px;
  padding: 19px;
}
.stage-drinks img { width: 100%; height: 64px; margin-bottom: 13px; border-radius: 9px; object-fit: cover; }
.stage-drinks h2 { margin: 4px 0 7px; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.stage-drinks p { margin: 0 0 14px; color: var(--ink-soft); font-size: .58rem; line-height: 1.5; }

/* --- Private hire card --- */
.stage-hire {
  z-index: 19;
  top: calc(var(--header-clear) + 636px);
  right: 1.8%;
  display: grid;
  grid-template-columns: 46% 1fr;
  width: 322px;
  min-height: 136px;
  overflow: hidden;
  border-radius: 17px;
  color: #3a2028;
  background: #e2c2cd;
  box-shadow: 0 16px 38px rgba(52, 30, 44, .16);
}
.stage-hire:hover, .stage-hire:focus-visible { box-shadow: 0 30px 62px rgba(40, 23, 34, .3); }
.stage-hire img { width: 100%; height: 100%; object-fit: cover; }
.stage-hire .stage-card-inner { padding: 18px 15px; }
.stage-hire small { font-size: .47rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; opacity: .8; }
.stage-hire h2 { margin: 8px 0 6px; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; line-height: 1.05; }
.stage-hire p { margin: 0 0 12px; color: rgba(58, 32, 40, .74); font-size: .49rem; line-height: 1.5; }
.stage-hire .mini-link { color: var(--pink); }

/* --- Feature row --- */
.stage-features {
  position: absolute;
  z-index: 22;
  right: 27%;
  bottom: 30px;
  left: 29%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stage-feature { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.stage-feature-icon { color: #743e4f; font-family: var(--serif); font-size: 1.15rem; line-height: 1; }
.stage-feature strong { display: block; font-size: .49rem; letter-spacing: .06em; text-transform: uppercase; }
.stage-feature small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .4rem; line-height: 1.45; }

/* --- Narrower desktops --- */
@media (max-width: 1280px) {
  .capri-stage { height: calc(824px + var(--header-clear)); }
  .stage-copy { left: 4%; width: 30%; }
  .stage-plates { left: 34%; width: 52%; }
  .stage-highlights { right: 3.5%; width: 198px; }
  .stage-gallery { left: 2.2%; width: 300px; }
  .stage-drinks { top: calc(var(--header-clear) + 306px); right: 3%; width: 216px; }
  .stage-hire { top: calc(var(--header-clear) + 596px); right: 1.2%; width: 292px; }
  .stage-features { left: 26%; right: 31%; gap: 12px; }
}

/* --- Stacked layout --- */
@media (max-width: 980px) {
  .capri-stage { display: grid; height: auto; padding: 126px 24px 58px; gap: 20px; }
  .stage-plum { top: 0; right: -30%; width: 70%; height: 420px; }
  .stage-orbit { display: none; }
  .stage-copy, .stage-plates, .stage-highlights, .stage-gallery, .stage-drinks, .stage-hire, .stage-features {
    position: relative;
    z-index: 8;
    inset: auto;
    width: auto;
    max-width: none;
  }
  .stage-card { transform: none !important; }
  .stage-copy { width: min(100%, 560px); padding-top: 10px; }
  .stage-copy h2 { font-size: clamp(3.2rem, 11vw, 5.4rem); }
  .stage-copy p { max-width: none; font-size: 1rem; }
  .stage-plates { z-index: 3; width: min(96%, 640px); margin: -24px auto -10px; }
  .stage-highlights { grid-template-columns: repeat(3, 1fr); }
  /* Stacked, the chips no longer sit on the purple shape, so they take
     brand colours on a solid card instead of white on a pale wash. */
  .stage-chip {
    border-color: rgba(116, 62, 79, .16);
    color: var(--plum-dark);
    background: rgba(255, 253, 248, .92);
    box-shadow: 0 10px 26px rgba(52, 30, 44, .09);
  }
  .stage-chip:hover, .stage-chip:focus-visible { background: #fff; }
  .stage-chip small { color: var(--ink-soft); }
  .chip-icon { color: #3a2028; background: #c0899a; }
  .stage-gallery, .stage-drinks { padding: 18px; }
  .stage-drinks img { height: 120px; }
  .stage-features { grid-template-columns: repeat(2, 1fr); padding-top: 6px; }
}

@media (max-width: 620px) {
  .capri-stage { padding: 116px 16px 46px; }
  .stage-plum { top: 380px; right: -48%; width: 112%; height: 340px; border-radius: 55% 0 0 55%; }
  .stage-plates { width: 100%; margin: -10px auto 0; }
  .stage-highlights { grid-template-columns: 1fr; }
  .stage-hire { grid-template-columns: 1fr; }
  .stage-hire img { height: 180px; }
  .stage-features { grid-template-columns: 1fr; }
  .stage-gallery-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-veil, .stage-dawn, .stage-sweep { display: none; }
  .stage-orbit { animation: none; }
  [data-stage-item] { opacity: 1; transform: none; transition: none; }
  .stage-plate img { filter: none; transform: none; transition: none; }
}

/* Gallery page hero now uses the same markup as every other inner page,
   so it picks up the shared .page-hero styling. This keeps the crop. */
.gallery-hero img { object-position: center 55%; }

/* ============================================================
   Reduce Motion.
   The earlier rules hid the loading screen outright. That reads as
   a broken page: the site simply appears with no warning. Reduce
   Motion asks for less movement, not less brand, so the loading
   screen still shows, just still. No orbiting rings, no drifting
   steam, no sweeping progress bar, and it fades away rather than
   blurring and scaling.

   The film now plays under Reduce Motion too. A great many phones
   have Reduce Motion switched on without the owner ever choosing
   it, and skipping the opening left most visitors seeing none of
   it. The film is a slow camera move rather than parallax, zoom or
   flashing, so it is the mild end of motion, and a Skip intro
   button sits over it throughout for anyone who wants it gone.
   Everything else stays suppressed: no parallax, no light sweep,
   no orbiting rings.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .site-loader.capri-original-loader {
    transition: opacity .45s ease, visibility .45s ease !important;
  }
  .site-loader.capri-original-loader.is-finished {
    opacity: 0;
    visibility: hidden;
    filter: none;
    transform: none;
  }
  .loading-orbit,
  .cloche-steam-group,
  .loader-progress-glow { display: none; }
  .loader-progress-run { width: 100%; }
}

/* Skip removes the film immediately rather than fading it. */
.opening-film.is-removed { display: none !important; }

/* Skip control. Always available, not only under Reduce Motion.
   Sized past the 44px tap target so it is easy to hit on a phone. */
.opening-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .5s ease;
}
.opening-film.is-playing .opening-skip { opacity: 1; }
.opening-skip:hover,
.opening-skip:focus-visible { background: rgba(0,0,0,.45); }
@media (max-width: 640px) {
  .opening-skip { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Under Reduce Motion the global rule cuts every transition to almost
   nothing, which would make the opening snap between states rather than
   move between them. A slow crossfade is the gentlest transition there
   is, so it is given back to the film and the wordmark. The letter by
   letter reveal, the scale and the blur stay off. */
@media (prefers-reduced-motion: reduce) {
  .opening-film {
    transition: opacity .6s ease, visibility .6s ease !important;
  }
  .hero-capri-intro {
    transition: opacity .6s ease !important;
  }
  .hero-capri-intro.is-leaving {
    transform: translate(-50%, -50%);
    filter: none;
  }
  .opening-skip { transition: opacity .5s ease !important; }
}

/* ============================================================
   Opening film on portrait screens.
   The clip is 16:9 and a phone held upright is far taller than it
   is wide, so filling the screen crops about three quarters of
   every frame away and leaves a narrow strip of sky and road.
   Fit the whole picture instead and let it sit in the black, the
   way a widescreen film does. Landscape and desktop still fill
   the screen, where the shapes nearly match anyway.
   ============================================================ */

/* ============================================================
   Opening film.
   Two possible elements: a <video>, which is what nearly everyone
   sees, and an <img> holding the animated WebP for phones that
   refuse to autoplay. Both are full bleed by default, and only one
   is ever on screen.
   ============================================================ */
.opening-film img,
.opening-film canvas,
.opening-film video { width: 100%; height: 100%; object-fit: cover; }
.opening-film [hidden] { display: none !important; }

/* Portrait screens: the clip is 16:9 and a phone held upright is far taller
   than it is wide, so filling the screen crops about three quarters of every
   frame away. Fit the whole picture instead, on brand colours rather than
   black so the hand-off to the cream hero is not a jolt. This must come after
   the rule above or it would be overridden by it. */
@media (max-aspect-ratio: 1 / 1) {
  .opening-film { background: linear-gradient(180deg, #d3a9b8 0%, #e2c2cd 50%, #d3a9b8 100%); }
  .opening-film img,
  .opening-film canvas,
  .opening-film video { object-fit: contain; background: transparent; }
}

/* ============================================================
   Footer social links.
   Instagram and Google reviews, sitting under the footer blurb.
   Drawn as inline SVG so they take the footer's own colour and
   stay crisp at any size, and sized past the 44px tap target.
   ============================================================ */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(58, 32, 40, .28);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: rgba(58, 32, 40, .55);
  background: rgba(255, 255, 255, .45);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
/* The camera dot and the review star read better filled than outlined. */
.footer-social svg .dot,
.footer-social a:last-child svg path { fill: currentColor; stroke: none; }

@media (max-width: 640px) {
  .footer-social { gap: 8px; }
  .footer-social a { padding: 0 14px 0 12px; font-size: .74rem; }
}

/* FAQ */
.faq-list { display: grid; gap: 12px; max-width: 920px; }
.faq-item { border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.64); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.3rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { flex: none; content: "+"; font-family: var(--sans); font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p, .faq-item ul { margin: 0; padding: 0 24px 18px; color: var(--ink-soft); }
.faq-item ul { padding-left: 44px; }