:root {
  --ink: #171713;
  --ink-soft: #54544d;
  --cream: #f6f0e8;
  --cream-2: #ece4d8;
  --paper: #fffdf8;
  --white: #ffffff;
  --plum: #6c405d;
  --plum-dark: #402639;
  --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%; }
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: #fff;
  background: var(--plum-dark);
}
.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(255,255,255,.16);
  color: #fff;
  background: rgba(31, 23, 29, .84);
  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(255,255,255,.54); }
.nav-cta:hover { color: var(--plum-dark); background: #fff; transform: translateY(-1px); }
.btn-dark { color: #fff; background: var(--plum-dark); }
.btn-dark:hover { transform: translateY(-2px); background: var(--plum); }
.btn-light { color: var(--ink); background: #fff; }
.btn-outline { border-color: rgba(255,255,255,.52); color: #fff; background: rgba(0,0,0,.05); }
.menu-toggle { display: none; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(255,255,255,.45); 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: #fff; background: rgba(49, 29, 43, .98); 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: #e8c8dc; 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: #fff; background: var(--plum-dark); }
.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(255,255,255,.76); }
.dark .eyebrow { color: #e8c8dc; }

.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; }
.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: #fff; background: linear-gradient(145deg, var(--plum), var(--plum-dark)); 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: #fff; background: linear-gradient(135deg, #5e3752, #33202f); 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(255,255,255,.75); }

/* 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(108,64,93,.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: #fff; background: var(--plum-dark); }
.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: #f7f0e8; background: #1f181c; }
.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(255,255,255,.65); font-size: .9rem; }
.footer-links { display: grid; gap: 8px; color: rgba(255,255,255,.72); font-size: .9rem; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); 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; }
  .opening-film { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* 2026 Cafe Capri Lounge production refresh */
:root {
  --pink: #ead0d9;
  --pink-deep: #b47a8f;
  --rose: #8d5368;
}
.brand img, .footer-brand img { filter: none; object-fit: contain; }
.site-credit a { color: #fff; 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(108,64,93,.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%, #f3e6ed 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(108,64,93,.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(108,64,93,.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: #a87392; }
.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: #6c405d; 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: #6c405d; 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: #c895ad; 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(64,38,57,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.loader-progress-run { width: 0%; background: linear-gradient(90deg, #402639 0%, #6c405d 28%, #c895ad 54%, #e8c8dc 72%, #b79662 100%); box-shadow: 0 0 18px rgba(108,64,93,.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(64,38,57,.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: #f0d3df; }
.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: #fff; background: var(--plum-dark); border-color: var(--plum-dark); }
.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(141,83,104,.24); border-radius: 22px; background: #f2e2e7; }
.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(108,64,93,.14); border-radius: 26px; background: linear-gradient(145deg, #fff, #f7edf1); box-shadow: 0 20px 60px rgba(50,30,42,.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: #fff; background: linear-gradient(135deg, #2b1b24, #6c405d); }
.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(255,255,255,.78); }
.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; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader, .opening-film { display: none !important; }
}


/* 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: #402639; box-shadow: 0 14px 38px rgba(35,20,30,.28); 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: #6c405d; box-shadow: 0 18px 44px rgba(35,20,30,.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(108, 64, 93, .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%, #f3e6ed 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, #6c405d 0%, #402639 58%, #2b1926 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(108, 64, 93, .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: #fff;
  background: rgba(108, 64, 93, .26);
  box-shadow: 0 12px 28px rgba(35, 20, 30, .16);
  backdrop-filter: blur(13px);
  transition: background .25s ease, transform .25s ease;
}
.stage-chip:hover, .stage-chip:focus-visible { background: rgba(108, 64, 93, .46); }
.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(255, 255, 255, .8); 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: var(--plum-dark); }
.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(108, 64, 93, .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(108, 64, 93, .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 h3 { 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: #fff;
  background: var(--plum-dark);
  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 h3 { 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(255, 255, 255, .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: var(--gold); 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(108, 64, 93, .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: #fff; background: var(--plum); }
  .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%; }