/* ==========================================================================
   MILANI CAFE SAMOA — SHARED STYLESHEET
   Reused across all 5 pages. Sections marked SHARED are page-agnostic
   (variables, reset, nav, footer, buttons, reveal utilities).
   Sections marked PAGE: HOME are specific to index.html.
   ========================================================================== */

/* ---------- SHARED: Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html:not(.lite) { scroll-behavior: smooth; } }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea { font: inherit; }

/* Metric-matched fallbacks so text barely moves when web fonts arrive
   (approximate values; fine-tune in DevTools if a jump is visible). */
@font-face { font-family: 'Jost Fallback'; src: local('Arial'); size-adjust: 96%; ascent-override: 111%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: 'Playfair Fallback'; src: local('Georgia'); size-adjust: 105%; ascent-override: 103%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'); size-adjust: 85%; ascent-override: 109%; descent-override: 34%; line-gap-override: 0%; }

/* ---------- SHARED: Brand variables ---------- */
:root {
  --color-cream: #FAF7F2;
  --color-teal: #5FCFB0;
  --color-teal-dark: #2B2F3A;
  --color-pink: #F4A6B7;
  /* Text-safe tints of the brand colours: the pure teal/pink are under 2:1
     on cream, so small text and links use these (5.2:1 and 5.5:1 on cream). */
  --color-teal-deep: #1B7560;
  --color-pink-deep: #A83F5C;

  --color-teal-rgb: 95, 207, 176;
  --color-pink-rgb: 244, 166, 183;
  --color-teal-dark-rgb: 43, 47, 58;

  --font-heading: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Jost Fallback', 'Segoe UI', system-ui, sans-serif;

  --container-width: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --space-xs: 0.5rem;
  --space-sm: 0.9rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 4.5rem;

  /* Section vertical rhythm: 44px mobile → 64px tablet → 72px desktop */
  --section-pad: 2.75rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --shadow-soft: 0 20px 50px -20px rgba(43, 47, 58, 0.25);
  --shadow-tight: 0 8px 20px -10px rgba(43, 47, 58, 0.3);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.25s var(--ease-out);
  --transition-med: 0.5s var(--ease-out);

  --header-height: 84px;
  --header-height-scrolled: 68px;
  --notice-h: 0px; /* set by main.js while the announcement bar shows */
}
@media (min-width: 768px) { :root { --section-pad: 4rem; } }
@media (min-width: 1280px) { :root { --section-pad: 4.5rem; } }

/* ---------- SHARED: Base ---------- */
body {
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-teal-dark);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-teal-dark);
}

h2 { font-size: clamp(2rem, 4vw, 2.85rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }

p { max-width: 60ch; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -60px; left: 1rem;
  background: var(--color-teal-dark);
  color: var(--color-cream);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

/* Visible focus states everywhere (deep teal on light, pink on dark: both
   pass the 3:1 non-text contrast check) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer :focus-visible, .mobile-nav :focus-visible, .testimonial-section :focus-visible,
.info-bar :focus-visible, .page-hero :focus-visible, .hero :focus-visible, .lightbox :focus-visible,
.site-notice :focus-visible, .experience-section :focus-visible { outline-color: var(--color-pink); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-pink-deep);
  margin-bottom: 0.6rem;
}
.eyebrow--light { color: var(--color-teal); }
/* On photos the brand teal is too dark for 13px text; a lighter tint of it keeps the accent and passes */
.hero .eyebrow--light, .page-hero .eyebrow--light { color: #B5ECDD; }
/* Eyebrows on photos sit on a small dark pill so they pass on any photo */
.page-hero:not(.page-hero--plain) .eyebrow { display: inline-block; padding: 0.35em 0.9em 0.3em 1.05em; border-radius: 999px; background: rgba(30, 33, 41, 0.72); text-shadow: none; }

/* ---------- SHARED: Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  will-change: transform;
}
.btn--pink {
  background: var(--color-pink);
  color: var(--color-teal-dark);
  box-shadow: var(--shadow-tight);
}
.btn--pink:hover, .btn--pink:focus-visible {
  background: var(--color-teal-dark);
  color: var(--color-cream);
  transform: translateY(-3px) scale(1.02);
}
.btn--teal {
  background: var(--color-teal);
  color: var(--color-teal-dark);
}
.btn--teal:hover, .btn--teal:focus-visible {
  background: var(--color-teal-dark);
  color: var(--color-cream);
  transform: translateY(-3px) scale(1.02);
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--color-teal-dark);
  padding-bottom: 3px;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--color-pink);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.text-link:hover::after, .text-link:focus-visible::after {
  transform: scaleX(1);
  background: var(--color-teal);
}
.text-link span { transition: transform var(--transition-fast); }
.text-link:hover span { transform: translateX(4px); }

.text-link--light { color: var(--color-cream); }
.text-link--light::after { background: var(--color-teal); }

/* ==========================================================================
   SHARED: LOADING SCREEN
   ========================================================================== */
body.is-loading { overflow: hidden; }

/* Shown only when the inline <head> script decided this is the first page of
   the session (html.is-loading), so it is there from first paint, never
   flashes in late, and never appears at all on later pages. The CSS
   animation is a failsafe: even if every script fails, it clears by 4s. */
.loader { display: none; }
html.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  animation: loader-failsafe 0.4s linear 4s forwards;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.loader__logo img {
  width: clamp(200px, 32vw, 320px);
  height: auto;
  aspect-ratio: 11 / 3;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   SHARED: Custom cursor. Native cursor is left completely alone until
   main.js confirms a fine/hover-capable pointer AND real mouse movement —
   only then does html.custom-cursor-active get added (see main.js), which
   is the sole thing that switches cursor to none anywhere on the page.
   ========================================================================== */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  will-change: transform;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--color-teal);
  transition: opacity 0.2s ease;
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-teal);
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.25s ease;
}
.cursor-ring.is-hovering { border-color: var(--color-pink); }
.cursor-ring.has-label { background: var(--color-pink); border-color: var(--color-pink); }
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 10001;
  pointer-events: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor-label.is-on { opacity: 1; }

html.custom-cursor-active .cursor-dot { opacity: 1; }
html.custom-cursor-active .cursor-ring { opacity: 0.6; }
html.custom-cursor-active .cursor-ring.has-label { opacity: 0.95; }
/* Over form fields and the map the native cursor comes back */
html.cursor-native .cursor-dot,
html.cursor-native .cursor-ring,
html.cursor-native .cursor-label { opacity: 0 !important; }

html.custom-cursor-active,
html.custom-cursor-active a,
html.custom-cursor-active button,
html.custom-cursor-active summary,
html.custom-cursor-active label {
  cursor: none;
}
html.cursor-native,
html.cursor-native a,
html.cursor-native button,
html.cursor-native label { cursor: auto; }

/* ==========================================================================
   SHARED: HEADER / NAV
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition-med), box-shadow var(--transition-med), height var(--transition-med), transform 0.24s var(--ease-out);
  transform: translateY(var(--notice-h));
  view-transition-name: site-header;
}
/* Contrast fix: soft dark fade behind the transparent header so the nav reads over bright photo tops */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 33, 41, 0.86) 0%, rgba(30, 33, 41, 0.56) 55%, rgba(30, 33, 41, 0) 100%);
  transition: opacity var(--transition-med);
}
.site-header.is-scrolled::before, .site-header.is-solid::before { opacity: 0; }
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px -10px rgba(43,47,58,0.15);
  height: var(--header-height-scrolled);
}
.site-header.is-solid:not(.is-scrolled) { height: var(--header-height); }

/* 2px reading-progress hairline (scroll-driven; hidden where unsupported) */
.site-header__progress { display: none; }
@supports (animation-timeline: scroll()) {
  .site-header__progress {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-teal), var(--color-pink));
    transform-origin: left;
    transform: scaleX(0);
    animation: header-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes header-progress { to { transform: scaleX(1); } }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-logo img {
  height: 40px;
  width: auto;
  aspect-ratio: 11 / 3;
  object-fit: cover;
  object-position: center;
  filter: brightness(0) invert(1);
  transition: filter var(--transition-med);
}
.site-header.is-scrolled .site-logo img,
.site-header.is-solid .site-logo img { filter: none; }

.site-nav__list {
  display: none;
}

@media (min-width: 900px) {
  .site-nav__list {
    display: flex;
    gap: var(--space-lg);
  }
  .site-nav__list a {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-cream);
    position: relative;
    padding-bottom: 4px;
    transition: color var(--transition-fast);
  }
  .site-header.is-scrolled .site-nav__list a,
  .site-header.is-solid .site-nav__list a { color: var(--color-teal-dark); }
  .site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--color-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible,
  .site-nav__list a[aria-current="page"] { color: var(--color-teal); }
  .site-header.is-scrolled .site-nav__list a:hover,
  .site-header.is-scrolled .site-nav__list a:focus-visible,
  .site-header.is-scrolled .site-nav__list a[aria-current="page"],
  .site-header.is-solid .site-nav__list a:hover,
  .site-header.is-solid .site-nav__list a:focus-visible,
  .site-header.is-solid .site-nav__list a[aria-current="page"] { color: var(--color-teal-deep); }
  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after,
  .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Hamburger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  z-index: 300;
  position: relative;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-cream);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}
.site-header.is-scrolled .nav-toggle__bar,
.site-header.is-solid .nav-toggle__bar { background: var(--color-teal-dark); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: var(--color-cream); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--color-teal-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--transition-med), transform var(--transition-med), visibility 0s linear var(--transition-med);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition-med), transform var(--transition-med), visibility 0s;
}
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.mobile-nav__list a {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 6vw, 2.75rem);
  color: var(--color-cream);
  transition: color var(--transition-fast);
}
.mobile-nav__list a:hover, .mobile-nav__list a:focus-visible, .mobile-nav__list a[aria-current="page"] { color: var(--color-teal); }
.mobile-nav__socials {
  display: flex;
  gap: var(--space-md);
}
.mobile-nav__socials a {
  color: var(--color-teal);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .mobile-nav { display: none; }
}

/* ==========================================================================
   PAGE: HOME — HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 88vh;
  height: 88svh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-teal-dark);
}

.hero__bg {
  position: absolute;
  inset: -10% -10% -10% -10%; /* headroom for Ken Burns scale + parallax translate */
  z-index: 1;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Contrast fix: darker at the top (transparent header's nav) and behind the text block.
     Measured from real pixels against the lightest 10% of each photo. */
  background: linear-gradient(180deg, rgba(43,47,58,0.77) 0%, rgba(43,47,58,0.63) 45%, rgba(43,47,58,0.76) 100%);
}
/* Soft shadow so small text on photos holds up over bright patches (headline included for consistency) */
.hero__content, .page-hero:not(.page-hero--plain) .hero__content,
.site-header:not(.is-scrolled):not(.is-solid) .site-nav__list a { text-shadow: 0 1px 2px rgba(20, 22, 28, 0.5), 0 0 18px rgba(20, 22, 28, 0.4); }
.page-hero--plain .hero__content, .hero__content .btn { text-shadow: none; }
.site-header:not(.is-scrolled):not(.is-solid) .site-nav__list a { text-shadow: 0 1px 2px rgba(20, 22, 28, 0.6), 0 0 10px rgba(20, 22, 28, 0.55), 0 0 22px rgba(20, 22, 28, 0.4); }

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--color-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--header-height);
}

/* Hero photo fill (fix, Oct 2026). The <picture> was an ordinary block, so the photo always rendered at its own
   ~16:9 shape, top-aligned. Wherever the hero is narrower than ~1.56:1 (phones in portrait, tablets, short
   landscape windows) it stopped short and the dark hero background showed below it. Scoped to exactly those
   viewports, so standard desktop windows (1280x720, 1366x768, 1440x900, 1920x1080) render as before.
   The image keeps its inline object-position (the photo's focal point). */
@media (max-width: 767px), (max-aspect-ratio: 25/16), (max-height: 600px) {
  .hero__bg picture { position: absolute; inset: 0; display: block; }
  .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* Phones: full-screen hero (svh, vh fallback) with the address/hours line laid over the bottom of the photo.
   min-height (not height) so taller content on small phones grows the hero instead of being clipped. */
@media (max-width: 767px) {
  :root { --hero-info-h: 5.5rem; }
  .hero { height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: var(--hero-info-h); }
  .hero__content { padding-bottom: var(--space-md); }
  /* Phones only: the full-height photo puts lighter plate/cup areas behind the headline; slightly deeper middle stop keeps every line at 4.5:1+ */
  .hero .hero__overlay { background: linear-gradient(180deg, rgba(43,47,58,0.77) 0%, rgba(43,47,58,0.77) 45%, rgba(43,47,58,0.78) 100%); }
  /* .hero + .info-bar: more specific than the base .info-bar rules further down, which would otherwise win */
  .hero + .info-bar { position: relative; z-index: 4; display: flex; align-items: center; height: var(--hero-info-h); margin-top: calc(-1 * var(--hero-info-h)); background: transparent; text-shadow: 0 1px 2px rgba(20, 22, 28, 0.6), 0 0 14px rgba(20, 22, 28, 0.5); }
  .hero + .info-bar p { padding-block: 0; }
}

/* Homepage hero scroll parallax (CSS scroll-driven, replaces ScrollTrigger).
   Range = hero top at viewport top → hero bottom at viewport top. Desktop only;
   off under reduced motion, lite mode and in browsers without support. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not(.lite) #hero { view-timeline: --home-hero block; }
    html:not(.lite) #heroBg,
    html:not(.lite) #heroContent { animation: linear both; animation-timeline: --home-hero; animation-range: exit 0% exit 100%; }
    html:not(.lite) #heroBg { animation-name: home-hero-bg; }
    html:not(.lite) #heroContent { animation-name: home-hero-content; }
    @keyframes home-hero-bg { to { transform: translateY(18%); } }
    @keyframes home-hero-content { to { transform: translateY(-30%); opacity: 0.4; } }
  }
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--color-cream);
  text-wrap: balance; /* mobile wraps as "Samoa Based. / Italian Grown." rather than orphaning a word */
  margin-bottom: var(--space-sm);
}
.hero__headline .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.hero__headline .word-inner { display: inline-block; will-change: transform; }

.hero__subhead {
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   PAGE: HOME — UTILITY INFO BAR (address / hours, below hero)
   ========================================================================== */
.info-bar {
  background: var(--color-teal-dark);
  color: var(--color-cream);
}
.info-bar p {
  max-width: none;
  padding-block: var(--space-sm);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.info-bar__dot { color: var(--color-teal); margin-inline: 0.5em; }

/* ==========================================================================
   SHARED: Generic section rhythm + split (image/text) layout
   Reusable on Menu / Experience / About pages too.
   ========================================================================== */
.section {
  padding-block: var(--section-pad);
  /* Pre-reveal children sit translated ±40px; clip so they never cause
     sideways scrolling on narrow screens. */
  overflow-x: clip;
}
.section--tint, .split-section--tint { background: rgba(var(--color-teal-rgb), 0.08); }

.split-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}

.split-section__media {
  position: relative;
}
/* height:auto is required — the width/height attributes on these <img>s
   otherwise win over aspect-ratio and render every photo 1100px tall. */
.split-section__media img { height: auto; }
.split-section__media .media-primary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split-section__media .media-secondary {
  display: none;
}

.split-section__text { max-width: 52ch; }
.split-section__text h2 { margin-bottom: var(--space-sm); }
.split-section__text p { margin-bottom: 1.1rem; }

@media (min-width: 768px) {
  .split-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  .split-section--reverse .split-section__inner { direction: rtl; }
  .split-section--reverse .split-section__inner > * { direction: ltr; }

  .split-section__media .media-primary {
    aspect-ratio: 1 / 1;
    max-height: 540px;
  }
  .split-section__media .media-secondary {
    display: block;
    position: absolute;
    width: 50%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    bottom: -6%;
    right: -6%;
    border: 6px solid var(--color-cream);
  }
  .split-section--reverse .split-section__media .media-secondary {
    right: auto;
    left: -6%;
  }
}

@media (min-width: 1280px) {
  .split-section__inner { gap: var(--space-xl); }
  .split-section__text { padding-inline: var(--space-md); }
}

/* ==========================================================================
   PAGE: HOME — EXPERIENCE (dark, image background section)
   ========================================================================== */
.experience-section {
  position: relative;
  color: var(--color-cream);
  overflow: hidden;
}
.experience-section__bg {
  position: absolute; inset: 0;
}
.experience-section__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.experience-section__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,47,58,0.92) 0%, rgba(43,47,58,0.85) 100%);
}
.experience-section__inner {
  position: relative;
  display: grid;
  gap: var(--space-lg);
}
.experience-section h2 { color: var(--color-cream); margin-bottom: var(--space-sm); }
.experience-section__copy {
  max-width: 60ch;
  color: rgba(250,247,242,0.88);
  margin-bottom: 1.1rem;
}

.voucher-card {
  background: var(--color-cream);
  color: var(--color-teal-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  max-width: 46ch;
}
.voucher-card h3 { margin-bottom: 0.5rem; }
.voucher-card p { margin-bottom: 1.1rem; }

@media (min-width: 900px) {
  .experience-section__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-xl);
    align-items: center;
  }
  .voucher-card { padding: var(--space-lg); }
}

/* ==========================================================================
   PAGE: HOME — FAQ
   ========================================================================== */
.faq-section__inner { max-width: 820px; }
.faq-list { margin-top: var(--space-sm); }

.faq-item {
  border-bottom: 1px solid rgba(var(--color-teal-dark-rgb), 0.15);
  padding-block: 1.1rem;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-pink);
  transition: transform var(--transition-fast);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__content { padding-top: 0.5rem; }
.faq-item__content p { max-width: 60ch; color: rgba(43,47,58,0.85); }

/* ==========================================================================
   PAGE: HOME — TESTIMONIAL
   ========================================================================== */
.testimonial-section { background: var(--color-teal-dark); position: relative; overflow: hidden; }
.testimonial-section__inner { text-align: center; position: relative; z-index: 1; }
.testimonial {
  max-width: 44ch;
  margin-inline: auto;
}
.testimonial p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  max-width: none;
}
.testimonial footer {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-teal);
}

/* ==========================================================================
   SHARED: FOOTER
   ========================================================================== */
/* Contrast on #2B2F3A: cream 12.5:1, cream 75% 7.8:1, cream 65% 6.3:1, teal 7.0:1, pink 7.0:1 (all pass AA) */
.site-footer {
  background: var(--color-teal-dark);
  color: var(--color-cream);
  padding-top: 2.5rem;
  font-size: 0.95rem;
}
/* Under 600px: one column, logo first, tight spacing */
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 1.75rem;
}
.site-footer__col { min-width: 0; }
.site-footer__brand img {
  width: min(220px, 100%);
  height: auto;
  aspect-ratio: 11 / 3;
  object-fit: cover;
  object-position: center;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-sm);
}
.site-footer__brand p { color: rgba(250,247,242,0.75); font-family: var(--font-heading); font-style: italic; }

.site-footer__heading { margin-bottom: 0.75rem; line-height: 1.3; }
.site-footer__list {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
}
.site-footer__text {
  font-style: normal;
  color: rgba(250,247,242,0.75);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}
/* Same draw-in underline as .link, in cream/teal for the dark background */
.site-footer__link {
  color: var(--color-cream);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: color var(--transition-fast), background-size 0.3s var(--ease-out);
}
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--color-teal); background-size: 100% 1.5px; }
.site-footer__link--social { color: var(--color-pink); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid rgba(250,247,242,0.15);
  font-size: 0.85rem;
  color: rgba(250,247,242,0.65);
}
.site-footer__bottom p { max-width: none; }
.site-footer__legal { display: flex; gap: 1.5rem; }
.site-footer__legal .site-footer__link { color: rgba(250,247,242,0.8); display: inline-flex; align-items: center; min-height: 44px; }

/* 600–1023px: 2×2 */
@media (min-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem 40px; }
}
/* 1024px and up: four columns */
@media (min-width: 1024px) {
  .site-footer { padding-top: 3.5rem; }
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; padding-bottom: 2.5rem; }
}

/* ==========================================================================
   SHARED: Polynesian flower motif — decorative background layer.
   Lights up via the same .reveal/.is-visible IntersectionObserver trigger
   used for section content reveal (see main.js) — no extra JS needed.
   ========================================================================== */
.split-section, .faq-section { position: relative; }
.split-section__inner, .faq-section__inner { position: relative; z-index: 1; }

.flower-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Flower bloom. Every symbol path carries pathLength="1", so one rule draws
   any shape. Paths read their dash offset from --draw (inherited through
   <use>), and their stagger from --i set on each path inside the symbol.
   main.js gives each flower two layers: .f-base (faint full outline, the
   "unlit" look) and .f-draw (draws on, then fills). Without JS a flower is
   simply its faint outline + soft fill. */
.flower-motif {
  position: absolute;
  width: 160px;
  height: 160px;
  color: var(--color-teal);
  fill: currentColor;
  fill-opacity: 0;
  overflow: visible;
}
.flower-motif--pink { color: var(--color-pink); }
.flower-motif use { opacity: 0.14; }
.flower-sym path {
  stroke-dasharray: 1 1.2;
  stroke-dashoffset: var(--draw, 0);
  transition: stroke-dashoffset 1.6s var(--ease-out) calc(var(--i, 0) * 60ms);
}
html:not(.js) .flower-motif { fill-opacity: 0.1; }
.flower-motif .f-draw {
  --draw: 1.1;
  opacity: 0.55;
  fill-opacity: 0;
  transition: fill-opacity 1s var(--ease-out) 1.2s;
}
.flower-motif.is-lit .f-draw { --draw: 0; fill-opacity: 0.26; }
.flower-motif.is-lit.is-inview { filter: drop-shadow(0 0 14px rgba(var(--color-teal-rgb), 0.3)); }
.flower-motif--pink.is-lit.is-inview { filter: drop-shadow(0 0 14px rgba(var(--color-pink-rgb), 0.35)); }

/* Alive but calm: sway (time) + drift (scroll), only while on screen */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.lite) .flower-motif.is-lit {
    animation: flower-sway 9s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  html.js:not(.lite) .flower-motif.is-lit.is-inview { animation-play-state: running; }
  @supports (animation-timeline: view()) {
    html.js:not(.lite) .flower-field { animation: flower-drift linear both; animation-timeline: view(); }
  }
}
@keyframes flower-sway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
@keyframes flower-drift { from { translate: 0 -18px; } to { translate: 0 18px; } }

/* Inner pages place flowers with custom properties instead of numbered classes */
.fl {
  top: var(--t, auto); right: var(--r, auto); bottom: var(--b, auto); left: var(--l, auto);
  width: var(--w, 140px);
  height: auto;
  aspect-ratio: var(--ar, 1);
  transform: rotate(var(--rot, 0deg));
}
.fl.flower-motif--tall { --ar: 5 / 7; }
@media (max-width: 767px) { .fl { width: calc(var(--w, 140px) * 0.6); } }

/* Positions tuned for the compact (~450–700px desktop) section heights:
   each section's flowers sit in different corners/edges so they read as
   spread down the page rather than stacked on one side. */
.flower--pos-1 { top: -8%; right: -4%; width: 190px; height: 190px; transform: rotate(8deg); }
.flower--pos-2 { bottom: 2%; left: -5%; width: 130px; height: 182px; transform: rotate(-14deg); }
.flower--pos-3 { top: 4%; left: -5%; width: 150px; height: 210px; transform: rotate(10deg); }
.flower--pos-4 { bottom: -10%; right: -4%; width: 200px; height: 200px; transform: rotate(-6deg); }
.flower--pos-5 { top: 10%; right: 3%; width: 100px; height: 100px; transform: rotate(20deg); }
.flower--pos-6 { top: -10%; left: 46%; width: 140px; height: 196px; transform: rotate(-10deg); }
.flower--pos-7 { bottom: -8%; left: -4%; width: 160px; height: 160px; transform: rotate(14deg); }
.flower--pos-8 { top: 34%; left: -3%; width: 80px; height: 80px; transform: rotate(-8deg); }
.flower--pos-9 { bottom: -8%; right: 8%; width: 110px; height: 154px; transform: rotate(18deg); }
.flower--pos-10 { bottom: -8%; right: -5%; width: 170px; height: 170px; transform: rotate(-12deg); }
.flower--pos-11 { top: 8%; right: 12%; width: 80px; height: 80px; transform: rotate(6deg); }
.flower--pos-12 { top: -10%; left: 4%; width: 120px; height: 168px; transform: rotate(-16deg); }
.flower--pos-13 { bottom: 4%; left: -5%; width: 100px; height: 100px; transform: rotate(10deg); }
.flower--pos-14 { top: -8%; left: -4%; width: 170px; height: 170px; transform: rotate(6deg); }
.flower--pos-15 { bottom: -10%; right: -3%; width: 130px; height: 182px; transform: rotate(-10deg); }
.flower--pos-16 { top: -8%; right: 6%; width: 130px; height: 182px; transform: rotate(12deg); }
.flower--pos-17 { bottom: 12%; right: 4%; width: 90px; height: 90px; transform: rotate(-14deg); }
.flower--pos-18 { top: -18%; left: 6%; width: 170px; height: 170px; transform: rotate(4deg); }
.flower--pos-19 { bottom: -6%; right: 8%; width: 110px; height: 154px; transform: rotate(-18deg); }

@media (max-width: 767px) {
  .flower-motif { transform: scale(0.65) rotate(0deg) !important; }
  .flower--pos-1 { top: -4%; right: -8%; }
  .flower--pos-2 { bottom: 2%; left: -10%; }
  .flower--pos-3 { top: 2%; left: -10%; }
  .flower--pos-4 { bottom: -6%; right: -10%; }
  .flower--pos-6 { top: -6%; left: auto; right: -6%; }
  .flower--pos-7 { bottom: -2%; left: -8%; }
  .flower--pos-9 { bottom: -4%; right: -6%; }
  .flower--pos-10 { bottom: -4%; right: -10%; }
  .flower--pos-12 { top: -6%; left: -8%; }
  .flower--pos-14 { top: -4%; left: -8%; }
  .flower--pos-15 { bottom: -4%; right: -8%; }
  .flower--pos-16 { top: -4%; right: -6%; }
  .flower--pos-18 { top: -12%; left: -8%; }
}

/* ==========================================================================
   SHARED: Scroll-reveal utility (vanilla JS + IntersectionObserver)
   ========================================================================== */
/* Content is only hidden for reveal when JS is confirmed running (html.js,
   set by the inline <head> script and withdrawn if main.js never starts). */
.js .reveal-child {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .reveal-child[data-reveal="left"] { transform: translateX(-40px); }
.js .reveal-child[data-reveal="right"] { transform: translateX(40px); }
.js .reveal-child[data-reveal="up"] { transform: translateY(40px); }

.reveal.is-visible .reveal-child {
  opacity: 1;
  transform: translate(0, 0);
}

/* ==========================================================================
   Reduced motion — required, not optional
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg img { transform: none !important; }
  .js .reveal-child {
    opacity: 1;
    transform: none;
  }

  .loader { display: none !important; }

  .cursor-dot, .cursor-ring, .cursor-label { display: none !important; }
  html.custom-cursor-active,
  html.custom-cursor-active a,
  html.custom-cursor-active button,
  html.custom-cursor-active summary,
  html.custom-cursor-active label {
    cursor: auto;
  }
}
/* Reduced motion OR lite mode: flowers sit in their lit state, no drawing,
   glow, sway or drift. */
@media (prefers-reduced-motion: reduce) {
  .flower-motif .f-draw { --draw: 0; fill-opacity: 0.26; }
  .flower-motif { filter: none !important; }
}
html.lite .flower-motif .f-draw { --draw: 0; fill-opacity: 0.26; transition: none; }
html.lite .flower-sym path { transition: none; }
html.lite .flower-motif { filter: none !important; }

/* ==========================================================================
   INNER PAGES (menu, experience, about, contact, blog, privacy, 404)
   Shared components first, then page-specific blocks. Everything here is
   additive: homepage rules above are untouched apart from the contrast,
   resilience and shared-upgrade changes.
   ========================================================================== */
:root { --currency-note: "Prices in Samoan tala (WST)"; /* EDIT: menu currency wording, used once per menu section */ }
.voucher-card :focus-visible { outline-color: var(--color-teal-deep); }
html.tab-hidden *, html.tab-hidden *::before, html.tab-hidden *::after { animation-play-state: paused !important; }
.glyph, .map-orn, .kids-card__flower, .gift-card__flower, .marquee__group svg { fill: none; }
.js .stagger.reveal-child { opacity: 1; transform: none; }
.stagger.stagger-done > * { transition-delay: 0s !important; }
.story__text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: var(--space-sm); }
.nf__flower.flower-motif { position: relative; }
.has-flowers { position: relative; }
.has-flowers > .container { position: relative; z-index: 1; }
.section--tint { background: rgba(var(--color-teal-rgb), 0.08); }
.section--compact { padding-block: calc(var(--section-pad) * 0.75); }
.center { text-align: center; }
.center p { margin-inline: auto; }
.lead-in { max-width: 60ch; margin: 0 auto var(--space-lg); text-align: center; }
.lead-in h2 { margin-bottom: var(--space-sm); }
main { display: block; }
#main:focus { outline: none; }
.print-only { display: none; }
[id] { scroll-margin-top: calc(var(--header-height-scrolled) + var(--notice-h) + 24px); }

/* ---------- Photos: dominant-colour placeholder, fade in when loaded ---------- */
.ph { display: block; background: var(--bg, rgba(var(--color-teal-dark-rgb), 0.08)); overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.js .ph img.fade { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.js .ph img.fade.is-loaded { opacity: 1; }
.split-section__media .ph { border-radius: var(--radius-lg); background-color: var(--bg); }

/* ---------- Buttons: sheen, ghost, magnetic ---------- */
.btn--pink, .btn--teal { position: relative; overflow: hidden; isolation: isolate; }
.btn--pink::before, .btn--teal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease-out);
}
.btn--pink:hover::before, .btn--teal:hover::before { transform: translateX(120%); }
.btn--ghost { border: 1.5px solid currentColor; color: var(--color-teal-dark); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--color-teal-dark); color: var(--color-cream); border-color: var(--color-teal-dark); }
.btn--ghost-light { border: 1.5px solid rgba(250, 247, 242, 0.6); color: var(--color-cream); }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: var(--color-cream); color: var(--color-teal-dark); }
.btn--sm { padding: 0.7rem 1.35rem; min-height: 44px; font-size: 0.9rem; }
.btn[data-magnetic] { transition: transform var(--transition-fast), translate 0.35s var(--ease-out), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.center .btn-row { justify-content: center; }
.link { color: var(--color-teal-deep); font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.3s var(--ease-out); padding-bottom: 2px; }
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }

/* ---------- Announcement bar (SITE_NOTICE in main.js) ---------- */
.site-notice {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.5rem 3.25rem; text-align: center;
  background: var(--color-teal-dark); color: var(--color-cream); font-size: 0.85rem;
  transform: translateY(-100%); transition: transform 0.24s var(--ease-out);
}
.site-notice.is-shown { transform: none; }
.site-notice p { max-width: none; }
.site-notice a { color: var(--color-teal); text-decoration: underline; text-underline-offset: 3px; }
.site-notice__close { position: absolute; right: 0.25rem; top: 50%; translate: 0 -50%; width: 44px; height: 44px; font-size: 1.3rem; line-height: 1; }

/* ---------- Back to top with progress ring ---------- */
.to-top {
  position: fixed; z-index: 150;
  right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 247, 242, 0.94); color: var(--color-teal-dark); box-shadow: var(--shadow-tight);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
.to-top:hover { transform: translateY(-3px); }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2; }
.to-top__ring circle:first-child { stroke: rgba(var(--color-teal-dark-rgb), 0.12); }
.to-top__ring circle + circle { stroke: var(--color-pink-deep); stroke-dasharray: 1; stroke-dashoffset: 0; }
@supports (animation-timeline: scroll()) {
  .to-top__ring circle + circle { animation: ring-fill linear both; animation-timeline: scroll(root); }
  @keyframes ring-fill { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

/* ---------- Page hero (compact, inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  min-height: clamp(320px, 50vh, 480px); min-height: clamp(320px, 50svh, 480px);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-teal-dark);
}
.page-hero__media { position: absolute; inset: 0; z-index: 1; }
.page-hero__media .ph { width: 100%; height: 100%; }
.page-hero__media img { transform-origin: 50% 50%; }
.page-hero .hero__content { padding-block: calc(var(--header-height) + var(--notice-h) + 0.5rem) clamp(2rem, 5vw, 3rem); }
.page-hero .eyebrow { margin-bottom: 0.9rem; }
.page-hero .hero__subhead { margin-bottom: 0; }
/* Hero entrance is staged by GSAP. Until it takes over (.hero-gsap), these
   are hidden only briefly: a CSS fallback reveals them if GSAP never loads. */
.js .ph-anim { opacity: 0; animation: ph-fallback 0.6s var(--ease-out) 1.6s forwards; }
html.no-gsap .ph-anim { animation-delay: 0s; }
html.hero-gsap .ph-anim { animation: none; opacity: 1; }
@keyframes ph-fallback { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not(.lite) .page-hero__media { animation: hero-parallax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes hero-parallax { to { transform: translateY(14%); } }
  }
}
.page-hero--plain { background: var(--color-cream); min-height: 0; }
.page-hero--plain .hero__content { color: var(--color-teal-dark); padding-top: calc(var(--header-height) + var(--notice-h) + 2.5rem); padding-bottom: 0; }
.page-hero--plain .hero__headline { color: var(--color-teal-dark); }
.page-hero--plain .hero__subhead { color: rgba(var(--color-teal-dark-rgb), 0.8); }

/* ---------- Intro lede ---------- */
.intro__lede { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.45; max-width: 56ch; margin-inline: auto; text-align: center; }
.intro__lede + .intro__lede { margin-top: var(--space-sm); }
.intro { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* ---------- Word-rise headings ---------- */
.wr-w { display: inline-block; }
.js .wr .wr-w { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
.js .wr.is-in .wr-w { opacity: 1; transform: none; filter: none; }
html.lite .wr .wr-w { filter: none; }

/* ---------- Story rows (photo / text, alternating, sticky photo) ---------- */
.story { display: grid; gap: var(--space-md); align-items: center; }
.story + .story { margin-top: clamp(2rem, 4vw, 3rem); }
.story__media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
.story__text { max-width: 52ch; }
.story__text h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--space-sm); }
.story__text p + p { margin-top: 0.9rem; }
@media (min-width: 600px) and (max-width: 899px) { .story__media .ph { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) {
  .story { grid-template-columns: 1.05fr 1fr; gap: var(--space-xl); }
  .story--flip .story__media { order: 2; }
  .story__media { position: sticky; top: calc(var(--header-height-scrolled) + var(--notice-h) + 24px); }
  .story__media .ph { max-height: 420px; }
}
/* Mask reveal for photos, sliding in from their own side */
.js .reveal-child[data-reveal="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateX(var(--dx, -24px)); transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.js .reveal-child[data-reveal="mask"] img { transform: scale(1.15); transition: transform 1.1s var(--ease-out), opacity 0.6s var(--ease-out); }
.js .story--flip .reveal-child[data-reveal="mask"] { --dx: 24px; }
.reveal.is-visible .reveal-child[data-reveal="mask"] { clip-path: inset(0); transform: none; }
.reveal.is-visible .reveal-child[data-reveal="mask"] img { transform: none; }
@media (max-width: 899px) { .js .reveal-child[data-reveal="mask"] { --dx: 0px !important; } }

/* ---------- Marquee divider ---------- */
.marquee { overflow: hidden; padding-block: 0.85rem; border-block: 1px solid rgba(var(--color-teal-dark-rgb), 0.08); background: var(--color-cream); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; animation-play-state: paused; }
.marquee.is-inview .marquee__track { animation-play-state: running; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }
.marquee__group span { padding-inline: 1.4rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: 0.05em; white-space: nowrap; }
.marquee__group svg { width: 18px; height: 18px; color: var(--color-pink-deep); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
html.lite .marquee__track { animation: none; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } }

/* ---------- Petal divider ---------- */
.petal-divider { display: block; width: 100%; height: 32px; color: rgba(var(--color-teal-rgb), 0.08); margin-bottom: -1px; }
.petal-divider path { fill: currentColor; }

/* ---------- Testimonial (inner): quote mark draws in ---------- */
.quote-mark { width: 46px; height: 36px; margin: 0 auto var(--space-sm); color: var(--color-pink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.quote-mark path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.js .quote-mark path { stroke-dashoffset: 1.1; transition: stroke-dashoffset 0.9s var(--ease-out); }
.js .reveal.is-visible .quote-mark path { stroke-dashoffset: 0; }
.js .reveal .testimonial footer.reveal-child { transition-delay: 0.45s !important; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; }
.cta-band h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-md); }

/* ---------- Open / closed badge ---------- */
.open-badge { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 32px; padding: 0.3rem 0.85rem; border-radius: 999px; background: rgba(var(--color-teal-dark-rgb), 0.07); font-size: 0.88rem; font-weight: 500; }
.open-badge[hidden] { display: none; }
.open-badge__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--color-pink-deep); flex: none; }
.open-badge.is-open .open-badge__dot { background: var(--color-teal-deep); }
.open-badge.is-open .open-badge__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-teal); animation: pulse 2s var(--ease-out) infinite; animation-play-state: paused; }
.open-badge.is-open.is-inview .open-badge__dot::after { animation-play-state: running; }
html.lite .open-badge__dot::after { animation: none !important; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.8); opacity: 0; } }

/* ---------- Visit strip ---------- */
.visit-strip { background: rgba(var(--color-teal-rgb), 0.12); padding-block: var(--space-lg); }
.visit-strip__inner { display: grid; gap: var(--space-md); align-items: center; }
.visit-strip__info { display: grid; gap: 0.35rem; }
.visit-strip__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; }
.visit-strip address { font-style: normal; }
.visit-strip__hours { font-size: 0.95rem; color: rgba(var(--color-teal-dark-rgb), 0.85); }
.visit-strip .open-badge { justify-self: start; margin-top: 0.25rem; }
@media (min-width: 900px) { .visit-strip__inner { grid-template-columns: 1fr auto; } }

/* ---------- FAQ (inner pages) ---------- */
.faq-section__inner { margin-inline: auto; }

/* ---------- MENU: sticky tabs with gliding pill ---------- */
.menu-tabs { position: sticky; z-index: 60; top: calc(var(--header-height-scrolled) + var(--notice-h)); padding-block: 0.55rem; background: rgba(250, 247, 242, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--color-teal-dark-rgb), 0.08); }
.menu-tabs__list { position: relative; display: flex; width: max-content; max-width: 100%; margin-inline: auto; padding: 0.25rem; gap: 0.15rem; border-radius: 999px; background: rgba(var(--color-teal-dark-rgb), 0.06); }
.menu-tabs__list a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding-inline: clamp(0.9rem, 3vw, 1.5rem); border-radius: 999px; font-weight: 500; font-size: 0.95rem; transition: color 0.3s var(--ease-in-out); }
.menu-tabs__list a.is-active { color: var(--color-cream); }
.menu-tabs__pill { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 0; border-radius: 999px; background: var(--color-teal-dark); transition: transform 0.45s var(--ease-in-out), width 0.45s var(--ease-in-out); }
.menu-tabs__pill.no-anim { transition: none; }
.menu-page [id="food"], .menu-page [id="breakfast"], .menu-page [id="lunch"], .menu-page [id="drinks"] { scroll-margin-top: calc(var(--header-height-scrolled) + var(--notice-h) + 72px); }

/* ---------- MENU: legend, filter chips ---------- */
.menu-tools { display: grid; gap: 0.9rem; margin-bottom: var(--space-lg); justify-items: center; text-align: center; }
.menu-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; font-size: 0.88rem; color: rgba(var(--color-teal-dark-rgb), 0.85); max-width: none; }
.diet-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.chip { min-height: 44px; padding-inline: 1.15rem; border-radius: 999px; border: 1.5px solid rgba(var(--color-teal-dark-rgb), 0.22); font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.chip:hover { border-color: var(--color-teal-dark); }
.chip[aria-pressed="true"] { background: var(--color-teal-dark); border-color: var(--color-teal-dark); color: var(--color-cream); }
.filter-status { font-size: 0.88rem; min-height: 1.3em; color: var(--color-teal-deep); }
/* Chips need JS; without it the full menu simply shows */
html.no-js .diet-filter, html.no-js .filter-status { display: none; }
.badge { display: inline-flex; align-items: center; height: 1.3rem; padding-inline: 0.45rem; border-radius: 999px; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; vertical-align: 0.2em; color: var(--color-teal-dark); }
.badge--veg { background: rgba(var(--color-teal-rgb), 0.3); }
.badge--gf { background: rgba(var(--color-teal-dark-rgb), 0.1); }
.badge--vegan { background: rgba(var(--color-pink-rgb), 0.45); }

/* ---------- MENU: lists ---------- */
.menu-block + .menu-block, .stories + .menu-block { margin-top: var(--space-2xl); }
/* Performance: the long drinks list and the FAQ skip layout/paint until they near the viewport (menu was the slowest first paint on mid-range phones).
   Only blocks BELOW the #drinks anchor: skipped content above a tab target would make the tab jump land in the wrong place. */
.menu-page .menu-block--drinks, .menu-page .faq-section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.menu-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; padding-bottom: 0.75rem; margin-bottom: var(--space-sm); border-bottom: 1px solid rgba(var(--color-teal-dark-rgb), 0.15); }
.menu-block__head :is(h2, h3) { display: flex; align-items: center; gap: 0.6rem; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.glyph { width: 26px; height: 26px; color: var(--color-pink-deep); flex: none; }
.currency-note { font-size: 0.85rem; color: rgba(var(--color-teal-dark-rgb), 0.75); }
.currency-note::before { content: var(--currency-note); }
.dish-grid { display: grid; gap: 0.1rem 3rem; }
@media (min-width: 900px) { .dish-grid { grid-template-columns: 1fr 1fr; } }
.dish { padding: 0.8rem 0.75rem; margin-inline: -0.75rem; border-radius: var(--radius-md); transition: transform 0.25s var(--ease-out), background-color 0.25s, opacity 0.25s var(--ease-in-out); }
.dish:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, 0.7); }
.dish__head { display: flex; align-items: baseline; gap: 0.6rem; }
.dish__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.dish__name .badge { margin-left: 0.2rem; }
.dish__leader { flex: 1; min-width: 1.25rem; height: 0; border-bottom: 2px dotted rgba(var(--color-teal-dark-rgb), 0.3); transform: translateY(-0.3em) scaleX(0.9); transform-origin: right; transition: transform 0.4s var(--ease-out), border-color 0.25s; }
.dish:hover .dish__leader { transform: translateY(-0.3em) scaleX(1); border-color: var(--color-pink); }
.dish__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 0.25s; }
.dish:hover .dish__price { color: var(--color-pink-deep); }
.dish__desc { margin-top: 0.2rem; font-size: 0.95rem; color: rgba(var(--color-teal-dark-rgb), 0.75); max-width: 54ch; }
.dish__extra { margin-top: 0.25rem; font-size: 0.88rem; color: var(--color-teal-deep); }
.price-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; padding: 0; list-style: none; }
.price-chips li { font-size: 0.82rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(var(--color-teal-dark-rgb), 0.06); }
.price-chips b { font-weight: 600; }
.menu-filtering .dish:not(.is-match) { opacity: 0.25; }
.stagger > * { transition-delay: calc(min(var(--i, 0), 10) * 60ms); }
.js .stagger.reveal-child > * { opacity: 0; transform: translateY(14px); transition-property: opacity, transform, background-color; transition-duration: 0.6s; }
.reveal.is-visible .stagger.reveal-child > * { opacity: 1; transform: none; }
.reveal.is-visible .stagger.reveal-child > .dish:hover { transform: translateY(-2px); }
.menu-filtering .stagger.reveal-child > .dish:not(.is-match) { opacity: 0.25; }
/* Kids meals card */
.kids-card { position: relative; overflow: hidden; margin-top: var(--space-lg); padding: var(--space-md) clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-lg); background: rgba(var(--color-pink-rgb), 0.18); border: 1.5px dashed rgba(168, 63, 92, 0.35); }
.kids-card :is(h3, h4) { font-family: var(--font-heading); font-size: 1.35rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.kids-card .dish-grid { gap: 0 2.5rem; }
.kids-card__flower { position: absolute; right: -24px; top: -24px; width: 120px; height: 120px; color: var(--color-pink); opacity: 0.35; transform: rotate(14deg); }
/* Display-fridge callout */
.fridge-note { display: flex; align-items: center; gap: 0.9rem; margin-top: var(--space-md); padding: 0.9rem 1.2rem; border-radius: var(--radius-md); background: #fff; border-left: 4px solid var(--color-pink); box-shadow: var(--shadow-tight); max-width: 34rem; font-weight: 500; }
.fridge-note svg { width: 28px; height: 28px; flex: none; color: var(--color-pink-deep); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Drinks: denser, two balanced columns */
.drinks-cols { columns: 2 320px; column-gap: 3rem; }
.drink-group { break-inside: avoid; margin-bottom: var(--space-lg); }
.drink-group h3 { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.4rem; padding-bottom: 0.45rem; margin-bottom: 0.35rem; border-bottom: 1px solid rgba(var(--color-teal-dark-rgb), 0.15); }
.drink-group h3 .glyph { width: 20px; height: 20px; align-self: center; }
.drink-group__price { margin-left: auto; font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.drink-group__note { font-size: 0.88rem; color: var(--color-teal-deep); margin-block: 0.2rem 0.35rem; }
.drink-group .dish { padding-block: 0.45rem; }
.drink-group .dish__name { font-size: 1.02rem; }
.name-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; padding: 0.4rem 0; list-style: none; margin: 0; }
.name-list li { padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(var(--color-teal-dark-rgb), 0.06); font-size: 0.92rem; }
.addons { margin-top: 0.6rem; }
.addons__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-pink-deep); }
.addons .price-chips li { background: rgba(var(--color-pink-rgb), 0.25); }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-xl); } }
.card { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.25rem); box-shadow: var(--shadow-soft); }
.card h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: var(--space-sm); }
.contact-list { display: grid; gap: 0.35rem; margin-bottom: var(--space-md); }
.contact-list li { display: flex; gap: 0.75rem; align-items: baseline; }
.contact-list dt, .contact-list .k { min-width: 6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--color-teal-dark-rgb), 0.7); }
.contact-list address { font-style: normal; }
.hours-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: var(--space-md); }
.hours-head h3 { font-size: 1.25rem; }
.hours { width: 100%; border-collapse: collapse; margin-block: 0.6rem var(--space-md); font-size: 0.97rem; }
.hours th, .hours td { padding: 0.5rem 0.7rem; text-align: left; font-weight: 400; border-bottom: 1px solid rgba(var(--color-teal-dark-rgb), 0.08); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { background: rgba(var(--color-teal-rgb), 0.18); font-weight: 600; }
.hours tr.is-today th { border-radius: 10px 0 0 10px; }
.hours tr.is-today td { border-radius: 0 10px 10px 0; }
/* WhatsApp card (replaces the email form; number lives in build.ps1) */
.wa-card { text-align: center; padding-block: clamp(2rem, 4vw, 3rem); }
.wa-card .wa-card__icon { display: block; width: 44px; height: 44px; margin: 0 auto var(--space-sm); color: var(--color-teal-deep); }
.wa-card__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 2.6rem) !important; line-height: 1.1; }
.wa-card__text { max-width: 36ch; margin: 0 auto var(--space-md); }
.wa-card__btn { min-height: 56px; padding-inline: clamp(1.25rem, 4vw, 2.4rem); font-size: clamp(0.98rem, 2.6vw, 1.05rem); justify-content: center; white-space: nowrap; max-width: 100%; }
.wa-card__number { margin-top: 0.9rem; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-teal-deep); font-variant-numeric: tabular-nums; }
/* Line-art chat icon used on every WhatsApp link (not the WhatsApp logo) */
.icon-chat { width: 1.25em; height: 1.25em; flex: none; }
.btn .icon-chat { margin-left: -0.25rem; }
.link--wa { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
/* Inline phone/WhatsApp links: 44px+ tap area via padding, cancelled by negative margin so the text doesn't move */
.contact-list a[href^="tel:"], .contact-list a[href^="https://wa.me/"],
.prose a[href^="tel:"], .prose a[href^="https://wa.me/"] { display: inline-block; padding-block: 11px; margin-block: -11px; }
/* Map */
.map-wrap { position: relative; }
.contact-map { position: relative; z-index: 1; margin-top: var(--space-xl); }
@media (min-width: 900px) { .contact-map .map-frame { aspect-ratio: auto; height: 400px; } }
.map-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 7; min-height: 320px; background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.28), rgba(var(--color-pink-rgb), 0.24)); }
.map-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 2px 22px rgba(var(--color-teal-dark-rgb), 0.18), inset 0 0 0 1px rgba(var(--color-teal-dark-rgb), 0.08); }
.map-frame iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.js .map-frame iframe { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.js .map-frame.is-loaded iframe { opacity: 1; }
.js .map-placeholder { z-index: 2; } /* above the still-transparent iframe so its button is tappable; without JS the map shows on top */
.map-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-sm); text-align: center; padding: var(--space-md); }
.map-placeholder p { font-family: var(--font-heading); font-size: 1.2rem; }
.map-frame.is-loaded .map-placeholder { visibility: hidden; }
.map-orn { position: absolute; z-index: 3; width: 70px; height: 70px; color: var(--color-pink); pointer-events: none; }
.map-orn--tl { top: -24px; left: -18px; transform: rotate(-12deg); }
.map-orn--br { bottom: -24px; right: -18px; transform: rotate(20deg); color: var(--color-teal); }
.map-orn use { opacity: 0.6; }
.map-actions { margin-top: var(--space-md); display: flex; justify-content: center; }

/* ---------- EXPERIENCE: gallery + lightbox ---------- */
.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, clamp(150px, 14vw, 200px)); grid-template-areas: "a b c" "a d c" "e e f"; padding: 0; margin: 0; list-style: none; }
.gallery li:nth-child(1) { grid-area: a; } .gallery li:nth-child(2) { grid-area: b; } .gallery li:nth-child(3) { grid-area: c; }
.gallery li:nth-child(4) { grid-area: d; } .gallery li:nth-child(5) { grid-area: e; } .gallery li:nth-child(6) { grid-area: f; }
.g-tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border-radius: var(--radius-md); text-align: left; }
.g-tile .ph { width: 100%; height: 100%; }
.g-tile img { transition: transform 0.9s var(--ease-out), opacity 0.6s var(--ease-out); }
.g-tile:hover img, .g-tile:focus-visible img { transform: scale(1.05); }
.g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem 0.8rem; color: var(--color-cream); font-size: 0.9rem; background: linear-gradient(transparent, rgba(var(--color-teal-dark-rgb), 0.8)); opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.g-tile:hover .g-cap, .g-tile:focus-visible .g-cap, .no-js .g-cap { opacity: 1; transform: none; }
.g-dots { display: none; }
@media (max-width: 767px) {
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; grid-template-areas: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery li { flex: 0 0 82%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .g-cap { opacity: 1; transform: none; }
  .g-dots { display: flex; justify-content: center; margin-top: 0.5rem; }
  .g-dots button { width: 44px; height: 44px; display: grid; place-items: center; }
  .g-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--color-teal-dark-rgb), 0.25); transition: transform 0.25s, background-color 0.25s; }
  .g-dots button[aria-current="true"]::before { background: var(--color-teal-deep); transform: scale(1.4); }
}
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-cream); overflow: hidden; }
.lightbox::backdrop { background: rgba(29, 32, 40, 0.94); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in 0.3s var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin: 0; padding: 4.5rem 1rem 5.5rem; max-width: 100%; touch-action: pan-y; }
.lightbox__img { max-width: min(1200px, 100%); max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); width: auto; height: auto; border-radius: var(--radius-md); background: var(--bg, transparent); transition: opacity 0.25s; }
.lightbox__img.is-swapping { opacity: 0; }
.lightbox__cap { font-size: 0.95rem; color: rgba(250, 247, 242, 0.85); text-align: center; }
.lightbox__count { position: fixed; top: max(1.35rem, env(safe-area-inset-top)); left: 1.25rem; font-size: 0.85rem; letter-spacing: 0.12em; }
.lb-btn { position: fixed; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(250, 247, 242, 0.12); color: var(--color-cream); transition: background-color 0.2s; }
.lb-btn:hover { background: rgba(250, 247, 242, 0.25); }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev { left: 0.75rem; } .lb-next { right: 0.75rem; }
@media (max-width: 767px) { .lb-prev, .lb-next { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: none; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } }
::view-transition-group(lb-photo) { animation-duration: 0.45s; animation-timing-function: var(--ease-out); }
/* Gift voucher card */
.gift { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 900px) { .gift { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.gift__text h2 { margin-bottom: var(--space-sm); }
.gift__text p { margin-bottom: var(--space-md); }
.gift-card-wrap { perspective: 900px; }
.gift-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 440px; aspect-ratio: 1.6; margin-inline: auto; padding: clamp(1.25rem, 4vw, 1.75rem); border-radius: 22px; background: linear-gradient(135deg, #FAF7F2 0%, #E6F5EF 55%, #C6EADD 100%); box-shadow: 0 30px 60px -25px rgba(var(--color-teal-dark-rgb), 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.7); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); }
.gift-card.is-tilting { transition: transform 0.12s linear; }
.gift-card::before { content: ""; position: absolute; top: 14px; bottom: 14px; right: 30%; border-left: 2px dashed rgba(var(--color-teal-dark-rgb), 0.12); }
.gift-card__logo { align-self: flex-start; height: 34px; width: auto; aspect-ratio: 11 / 3; object-fit: cover; object-position: center; }
.gift-card__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; position: relative; }
.gift-card__flower { position: absolute; right: -36px; bottom: -40px; width: 210px; height: 210px; color: var(--color-teal-deep); opacity: 0.22; transform: rotate(-10deg); }
.gift-card__sheen { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.6), transparent 35%); transform: translate(var(--sx, 0%), var(--sy, 0%)); opacity: 0; transition: opacity 0.4s; }
.gift-card.is-tilting .gift-card__sheen { opacity: 1; }
.listing-link { margin-top: var(--space-md); text-align: center; font-size: 0.95rem; }

/* ---------- ABOUT ---------- */
.dora { display: grid; gap: var(--space-lg); align-items: start; }
.dora__media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .dora { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .dora__media { position: sticky; top: calc(var(--header-height-scrolled) + var(--notice-h) + 24px); }
  .dora__media .ph { aspect-ratio: 4 / 5; max-height: 600px; }
}
.dora__text h2 { margin-bottom: var(--space-sm); }
.pull-quote { margin-block: var(--space-md); padding-left: 1.25rem; border-left: 3px solid var(--color-pink); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.3; }
.stat { display: flex; align-items: center; gap: 1rem; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(var(--color-teal-dark-rgb), 0.12); }
.stat__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.4rem, 7vw, 4.8rem); line-height: 1; color: var(--color-teal-deep); font-variant-numeric: lining-nums tabular-nums; }
.stat__label { max-width: 15ch; font-size: 0.98rem; line-height: 1.35; }
.values { display: grid; gap: var(--space-md); padding: 0; list-style: none; }
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); box-shadow: var(--shadow-tight); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), opacity 0.6s var(--ease-out); }
.value-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-soft); }
.value-card h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.value-card p { font-size: 0.98rem; color: rgba(var(--color-teal-dark-rgb), 0.82); }
.value-icon { width: 56px; height: 56px; margin-bottom: 1rem; color: var(--color-teal-deep); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.value-icon path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.js .value-icon path { stroke-dashoffset: 1.1; transition: stroke-dashoffset 1.4s var(--ease-out) calc(0.3s + var(--i, 0) * 60ms); }
.js .reveal.is-visible .value-icon path { stroke-dashoffset: 0; }
.story-pair__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) { .story-pair__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.story-pair .story__text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: var(--space-sm); }

/* ---------- BLOG / 404 / PRIVACY ---------- */
.post-card { display: grid; overflow: hidden; max-width: 900px; margin-inline: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.post-card .ph { aspect-ratio: 4 / 3; height: 100%; }
.post-card__body { padding: clamp(1.4rem, 3vw, 2.5rem); align-self: center; }
.post-card time { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-teal-deep); }
.post-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-block: 0.5rem 0.75rem; }
@media (min-width: 768px) { .post-card { grid-template-columns: 0.9fr 1.1fr; } .post-card--text { grid-template-columns: 1fr; max-width: 760px; } }
.blog-actions { justify-content: center; margin-top: var(--space-lg); }
.nf .btn-row { justify-content: center; }
.nf { text-align: center; padding-block: calc(var(--header-height) + var(--space-xl)) var(--section-pad); }
.nf__flower { width: 150px; height: 150px; margin: 0 auto var(--space-md); color: var(--color-pink); }
.nf__flower .f-base { opacity: 0.35; }
.nf h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 4.5vw, 3.75rem); margin-bottom: var(--space-sm); }
.nf p { margin: 0 auto var(--space-md); }
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin: var(--space-lg) 0 0.6rem; }
.prose p, .prose li { margin-bottom: 0.8rem; }
.prose ul { padding-left: 1.2rem; }
.prose a { color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose .draft-note { padding: 0.8rem 1rem; border-radius: var(--radius-md); background: rgba(var(--color-pink-rgb), 0.25); font-size: 0.92rem; }

/* ---------- Cross-page transitions (progressive enhancement) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: vt-out 160ms ease-in both; }
::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- SHARED: "Review Milani" band (partials/review.html) ---------- */
.review-band { background: rgba(var(--color-teal-rgb), 0.1); position: relative; overflow: hidden; }
.review-band__inner { text-align: center; max-width: 640px; }
.review-band__flower.flower-motif { position: relative; display: block; width: 72px; height: 72px; margin: 0 auto var(--space-sm); }
.review-band__flower .f-base { opacity: 0.3; }
.review-band__flower .f-draw { opacity: 0.85; }
.review-band__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin-bottom: var(--space-sm); }
.review-band__text { margin: 0 auto var(--space-md); max-width: 46ch; }
.review-band__actions { justify-content: center; }
.review-band__actions .btn { min-height: 44px; }

/* Story rows without a photo (photo shortfall: text-only or paired text) */
.story--text, .story--pair { display: block; }
.story--text .story__text { max-width: 62ch; margin-inline: auto; text-align: center; }

/* Shorter galleries (no photo is repeated, so the tile count follows the photos available) */
.gallery--3 { grid-template-rows: clamp(220px, 24vw, 320px); grid-template-areas: "a b c"; }
.gallery--5 { grid-template-rows: repeat(2, clamp(170px, 17vw, 240px)); grid-template-areas: "a b c" "a d e"; }

/* ---------- Print (customers print the menu) ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .site-header, .mobile-nav, .loader, .cursor-dot, .cursor-ring, .cursor-label, .skip-link, .flower-field, .marquee,
  .menu-tabs, .diet-filter, .filter-status, .story, .ph, picture, .testimonial-section, .faq-section, .cta-band, .to-top, .site-notice,
  .site-footer, .page-hero__media, .hero__overlay, .intro, .fridge-note svg, .kids-card__flower, .visit-strip .btn-row,
  .visit-strip .open-badge, .petal-divider, .glyph, .lead-in p, .review-band, .no-print { display: none !important; }
  .page-hero { min-height: 0; background: none; display: block; }
  .page-hero .hero__content { padding: 0 0 6mm; color: #000; }
  .hero__headline { color: #000; font-size: 20pt; }
  .section { padding-block: 0 4mm; }
  .reveal-child, .stagger > *, .wr-w, .ph-anim { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important; }
  .dish-grid { display: block; columns: 2; column-gap: 10mm; }
  .dish, .drink-group, .kids-card, .fridge-note { break-inside: avoid; }
  .dish { padding: 1.5mm 0; margin: 0; opacity: 1 !important; }
  .dish__desc, .currency-note, .dish__extra, .drink-group__note { color: #333; }
  .menu-block + .menu-block { margin-top: 6mm; }
  #drinks { break-before: page; }
  .kids-card, .fridge-note { background: none; border: 1px solid #999; box-shadow: none; }
  .badge { border: 1px solid #000; background: none; }
  .visit-strip { background: none; border-top: 1px solid #000; padding-block: 4mm 0; break-inside: avoid; }
  .print-only { display: block; }
  [data-today-hours] { display: none !important; } /* print the full week from .print-only, not "today" */

  /* Compact two-page menu: page 1 food, page 2 drinks + address/hours */
  html { font-size: 8pt; }
  body { font-size: 8.5pt; }
  .container { max-width: none; padding-inline: 0; }
  .section--tint { background: none; }
  .page-hero .eyebrow, .page-hero .hero__subhead, .lead-in { display: none !important; }
  .page-hero .hero__content { padding: 0 0 3mm; align-items: flex-start; text-align: left; }
  .hero__headline { font-size: 15pt; }
  .hero__headline, .hero__headline .word-inner { color: #000 !important; transform: none !important; opacity: 1 !important; }
  .menu-tools { justify-items: start; margin-bottom: 2mm; }
  .menu-block__head { padding-bottom: 1mm; margin-bottom: 1mm; border-color: #000; }
  .menu-block__head :is(h2, h3) { font-size: 14pt; }
  .menu-block + .menu-block, .stories + .menu-block { margin-top: 4mm; }
  .dish { padding: 0.7mm 0 !important; }
  .dish__name { font-size: 9pt; }
  .dish__desc { margin-top: 0; font-size: 7.5pt; line-height: 1.3; }
  .dish__extra, .price-chips { margin-top: 0.5mm; }
  .price-chips li { padding: 0 1.5mm; background: none; border: 1px solid #bbb; }
  .kids-card { margin-top: 2mm; padding: 1.5mm 3mm; }
  .fridge-note { margin-top: 2mm; padding: 1.2mm 3mm; max-width: none; }
  .drinks-cols { columns: 2; column-gap: 10mm; }
  .drink-group { margin-bottom: 3mm; }
  .drink-group h3 { font-size: 10.5pt; padding-bottom: 0.5mm; margin-bottom: 0.5mm; border-color: #000; }
  .name-list { padding: 0.5mm 0; }
  .name-list li { padding: 0 1.5mm; background: none; border: 1px solid #bbb; }
  .addons { margin-top: 1mm; }
}