/* ══════════════════════════════════════════════════════════════════════════
   AL RAHATH KITCHEN & CATERING — stylesheet
   ──────────────────────────────────────────────────────────────────────────
   Palette is sampled directly from the supplied logo artwork:
     maroon #841F34 (badge border and lettering)
     cream  #FCF8CE (badge panel)
   The logo's arched badge silhouette is reused as a motif on image frames,
   which is what visually ties the page back to the brand.

   Contents
     01  Tokens
     02  Reset and base
     03  Typography helpers
     04  Buttons
     05  Header and navigation
     06  Hero
     07  Trust strip
     08  Sections and shared blocks
     09  About
     10  Services cards
     11  Cuisines
     12  Our work
     13  Process steps
     14  Contact and form
     15  Footer
     16  Floating action button
     17  Reveal animation
     18  Responsive
     19  Reduced motion and print
   ══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────── 01 Tokens ───────────────────────────────── */
:root {
  /* Brand */
  --maroon:        #7A1630;
  --maroon-mid:    #841F34;
  --maroon-bright: #A32546;
  --maroon-deep:   #4A0D1E;
  --maroon-ink:    #2A0710;

  --cream:         #FCF8CE;
  --cream-page:    #FBF7EC;
  --cream-panel:   #F6EFDD;

  --gold:          #C0972F;
  --gold-soft:     #DFC276;

  --ink:           #241318;
  --ink-soft:      #5C464C;
  --ink-faint:     #8A737A;

  --wa:            #25D366;
  --wa-dark:       #128C43;

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Space and shape */
  --shell:      1180px;
  --radius:     14px;
  --radius-sm:  9px;
  --header-h:   82px;

  --shadow-sm: 0 2px 10px rgba(42, 7, 16, .07);
  --shadow-md: 0 10px 34px rgba(42, 7, 16, .10);
  --shadow-lg: 0 24px 60px rgba(42, 7, 16, .20);

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ──────────────────────── 02 Reset and base ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding beneath it. */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--cream-page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .18vw, 1.06rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--maroon-bright); }

p { margin: 0 0 1.05em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* The sprite only carries <symbol> definitions; keep it out of the layout. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every icon is a <use> reference, so stroke styling is set once here. */
svg:not(.sprite) {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--maroon);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: .9rem;
  letter-spacing: .04em;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}


/* ─────────────────────── 03 Typography helpers ─────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .85rem;
}
.eyebrow--light { color: var(--gold-soft); }

.section__title {
  font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3.15rem);
  color: var(--maroon);
}
.section__head--light .section__title,
.section--dark .section__title { color: var(--cream); }

.section__lede {
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.section__head--light .section__lede { color: rgba(252, 248, 206, .78); }

/* Gold hairline with a diamond, echoing the flourishes inside the logo. */
.rule {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.1rem 0 1.6rem;
}
.rule::before, .rule::after {
  content: "";
  height: 1px;
  background: var(--gold);
  opacity: .55;
}
.rule::before { width: 22px; }
.rule::after  { width: 58px; }
.rule span {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.rule--center { justify-content: center; }
.rule--center::before { width: 58px; }
.rule--light::before, .rule--light::after { background: var(--gold-soft); opacity: .6; }
.rule--light span { background: var(--gold-soft); }

.tickList { margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.tickList li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-soft);
}
.tickList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}


/* ──────────────────────────── 04 Buttons ───────────────────────────────── */
.btn {
  --btn-bg: var(--maroon);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  white-space: nowrap;
}
.btn svg { font-size: 1.15em; }
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--lg { padding: 1rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--whatsapp { --btn-bg: var(--wa-dark); }
.btn--whatsapp:hover { background: #0f7a3a; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(3px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: #fff; }


/* ─────────────────── 05 Header and navigation ──────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
/* Transparent over the hero, solid once the page scrolls.
   ───────────────────────────────────────────────────────────────────────────
   DO NOT add backdrop-filter, filter, transform, perspective, will-change or
   contain to this element.

   Any of those make it the containing block for `position: fixed` descendants,
   and the mobile nav panel is a fixed-position child of this header. This rule
   previously carried `backdrop-filter: blur(10px)`, which sized the open menu
   to the 70px header instead of the viewport — so the menu worked at the top of
   the page and collapsed to a sliver as soon as you scrolled.

   The blur was also doing almost nothing visually: the background is 97%
   opaque, so only 3% of the page showed through to be blurred.

   source-files/probe_nav.py measures the panel's box in both scroll states and
   will catch this if it is ever reintroduced. */
.site-header.is-stuck {
  height: 70px;
  background: rgba(251, 247, 236, .97);
  box-shadow: 0 1px 0 rgba(122, 22, 48, .12), var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand__mark {
  width: auto;
  height: 60px;
  transition: height .3s var(--ease);
  /* Lifts the badge off the darker video frames behind it. */
  filter: drop-shadow(0 2px 6px rgba(42, 7, 16, .35));
}
.is-stuck .brand__mark { height: 50px; filter: none; }

/* The wordmark is already inside the badge image, so this text label is
   hidden on the hero and only used for tight layouts where the badge shrinks. */
.brand__text { display: none; }

.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav__list { display: flex; align-items: center; gap: 1.55rem; }
.nav__list a {
  position: relative;
  color: #fff;
  font-size: .94rem;
  font-weight: 400;
  letter-spacing: .01em;
  padding: .3rem 0;
  text-shadow: 0 1px 8px rgba(42, 7, 16, .5);
  transition: color .2s var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold-soft);
  transition: width .25s var(--ease);
}
.nav__list a:hover::after,
.nav__list a.is-active::after { width: 100%; }
.is-stuck .nav__list a { color: var(--maroon); text-shadow: none; }
.is-stuck .nav__list a:hover { color: var(--maroon-bright); }
.is-stuck .nav__list a.is-active { color: var(--maroon-bright); }

.nav__cta { display: none; }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .55rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  text-shadow: 0 1px 8px rgba(42, 7, 16, .5);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.header-call:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.is-stuck .header-call {
  color: var(--maroon);
  border-color: rgba(122, 22, 48, .35);
  text-shadow: none;
}
.is-stuck .header-call:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(42, 7, 16, .28);
  backdrop-filter: blur(4px);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 19px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.is-stuck .nav-toggle { border-color: rgba(122, 22, 48, .3); background: rgba(122, 22, 48, .07); }
.is-stuck .nav-toggle__bar { background: var(--maroon); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) 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(-6.5px) rotate(-45deg); }


/* ───────────────────── 06a Loading screen ─────────────────────────────────
   Hidden unless the inline head script adds .js-intro, so a visitor without
   JavaScript is never trapped behind an intro that cannot dismiss itself. */
.intro { display: none; }

.js-intro .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background:
    radial-gradient(125% 95% at 50% 42%, #6C1229 0%, #3C0A18 58%, #1E050C 100%);
  cursor: pointer;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.js-intro.intro-done .intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Hold the page still while the intro is up. */
.js-intro:not(.intro-done) body { overflow: hidden; }

.intro__stage {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.1rem;
  padding: 2rem;
}

/* The badge is the loading screen's whole subject. It is also the header and
   footer logo, so it is already on the critical path — this screen adds no
   network cost at all. */
.intro__badge {
  position: relative;
  z-index: 2;
  width: auto;
  height: clamp(96px, 22vh, 168px);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
  /* Entrance, then a slow float takes over. The screen is up for ~3.4s, and
     without the second animation the badge would sit perfectly still for more
     than two of them. The float is listed last so it owns `transform` once it
     starts, overriding the filled end state of the entrance. */
  animation:
    badgeIn 1.1s var(--ease) both,
    badgeFloat 3.6s ease-in-out 1.1s infinite;
}
@keyframes badgeIn {
  from { opacity: 0; transform: scale(.9) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.016); }
}

/* Two arch hairlines expanding outward behind the badge — the same silhouette
   the whole site uses as its motif, here as the loading flourish. */
.intro__arch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(190px, 46vw, 330px);
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -46%);
  border: 1px solid rgba(223, 194, 118, .34);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  animation: archOut 2.6s var(--ease) infinite;
  /* Without this the two side borders stop in a hard flat edge and the shape
     reads as a box with its lid open. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 82%);
}
.intro__arch--inner { animation-delay: 1.3s; }
@keyframes archOut {
  0%   { opacity: 0;   transform: translate(-50%, -46%) scale(.82); }
  35%  { opacity: .85; }
  100% { opacity: 0;   transform: translate(-50%, -46%) scale(1.3); }
}

.intro__tagline {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(252, 248, 206, .72);
  animation: badgeIn 1.1s var(--ease) .25s both;
}

/* Decoration must never intercept the click that dismisses the intro. */
.intro__arch,
.intro__embers { pointer-events: none; }

/* Same ember treatment as the hero, so the two read as one piece of design.
   These sit behind the stage, so they are seen in the letterboxed surround. */
.intro__embers { position: absolute; inset: 0; overflow: hidden; }
.intro__embers span {
  position: absolute;
  left: var(--x);
  bottom: -5%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 7px 1px rgba(223, 194, 118, .55);
  opacity: 0;
  animation: rise var(--t) linear var(--d) infinite;
  will-change: transform, opacity;
}

/* Progress line. Fills on a CSS animation and eases toward, but never reaches,
   the end — so it cannot claim to be finished while the page still is not. The
   JS removes the whole screen the moment loading actually completes. */
.intro__meter {
  position: relative;
  z-index: 2;
  margin-top: .4rem;
  width: min(62vw, 210px);
  height: 2px;
  border-radius: 2px;
  background: rgba(252, 248, 206, .16);
  overflow: hidden;
}
.intro__meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  /* Timed to the 3.1s floor in main.js so it fills across the whole hold
     instead of finishing early and then sitting still. */
  animation: meterFill 3.1s cubic-bezier(.16, .72, .24, 1) both;
}
@keyframes meterFill {
  from { width: 0; }
  to   { width: 94%; }
}

/* ────────────────────────────── 06b Hero ───────────────────────────────────
   No video. The atmosphere is CSS: a maroon gradient base, three drifting
   glows, the logo's arch silhouette, and a field of rising gold embers.
   Everything animates on transform and opacity only, so it composites on the
   GPU and stays cheap on a phone. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;  /* accounts for mobile browser chrome */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--maroon-ink);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(168deg, #5B0F22 0%, #7A1630 38%, #480C1C 72%, #26060F 100%);
}

/* Soft colour fields that drift slowly past each other. Built from
   radial-gradient rather than filter: blur(), which would cost far more to
   paint at this size. */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.hero__glow--a {
  width: 62vw; height: 62vw;
  top: -18%; left: -12%;
  background: radial-gradient(circle, rgba(163, 37, 70, .55) 0%, rgba(163, 37, 70, 0) 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.hero__glow--b {
  width: 54vw; height: 54vw;
  bottom: -22%; right: -10%;
  background: radial-gradient(circle, rgba(192, 151, 47, .3) 0%, rgba(192, 151, 47, 0) 66%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.hero__glow--c {
  width: 44vw; height: 44vw;
  top: 26%; right: 22%;
  background: radial-gradient(circle, rgba(252, 248, 206, .16) 0%, rgba(252, 248, 206, 0) 64%);
  animation: drift-c 22s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vw, 5vh, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-8vw, -6vh, 0) scale(1); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(.95); }
  to   { transform: translate3d(-5vw, 7vh, 0) scale(1.18); }
}

/* The badge silhouette, drawn as a hairline arch and breathing gently. */
.hero__arch {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: min(50vw, 560px);
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  border: 1px solid rgba(223, 194, 118, .2);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  animation: breathe 14s ease-in-out infinite alternate;
  /* Without this the two side borders run straight off the bottom of the
     viewport and the shape reads as a box. Fading them out keeps it an arch. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
}
.hero__arch--inner {
  width: min(38vw, 430px);
  border-color: rgba(223, 194, 118, .12);
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}

@keyframes breathe {
  from { opacity: .55; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}

/* Embers. One rule, driven by the custom properties set inline per span. */
.hero__embers { position: absolute; inset: 0; overflow: hidden; }
.hero__embers span {
  position: absolute;
  left: var(--x);
  bottom: -6%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px 1px rgba(223, 194, 118, .5);
  opacity: 0;
  animation: rise var(--t) linear var(--d) infinite;
  will-change: transform, opacity;
}

@keyframes rise {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0); }
  12%  { opacity: .85; }
  70%  { opacity: .5; }
  100% { opacity: 0;   transform: translate3d(2.5vw, -108vh, 0); }
}

/* Fine grain, so the large flat gradients do not band on cheap panels. */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Eases the hero into the maroon trust strip below it. */
.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(38, 6, 15, 0) 0%, rgba(122, 22, 48, .55) 100%);
}

.hero__inner {
  position: relative;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 7rem;
  max-width: var(--shell);
}

/* Staggered entrance. --delay is set inline per element. */
.hero__in { animation: heroIn .9s var(--ease) both; animation-delay: var(--delay, 0s); }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__title {
  color: #fff;
  /* Sized so "Every celebration deserves" holds on one line at desktop
     widths; the italic phrase then takes line two. */
  font-size: clamp(2.35rem, 1.2rem + 5.2vw, 4.35rem);
  font-weight: 600;
  line-height: 1.06;
  max-width: 28ch;
  margin-bottom: .9rem;
  text-shadow: 0 2px 24px rgba(42, 7, 16, .55);
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
}

.hero__lede {
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem);
  max-width: 50ch;
  margin-bottom: 2.1rem;
  text-shadow: 0 1px 14px rgba(42, 7, 16, .6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: 1.15rem;
  border: 1px solid rgba(252, 248, 206, .35);
  border-radius: 50%;
  animation: nudge 2.4s var(--ease) infinite;
}
.hero__scroll:hover { color: #fff; border-color: var(--cream); }

@keyframes nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}


/* ───────────────────────── 07 Trust strip ─────────────────────────────── */
.trust {
  background: var(--maroon);
  color: var(--cream);
  padding: 2.4rem 0;
  position: relative;
}
.trust::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .6;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.trust__item { position: relative; }
.trust__item + .trust__item::before {
  content: "";
  position: absolute;
  left: calc(-.75rem - 1px);
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(252, 248, 206, .22);
}
.trust__icon { font-size: 1.6rem; color: var(--gold-soft); margin-bottom: .45rem; }
.trust__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  margin: 0 0 .25rem;
  color: #fff;
}
.trust__label {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(252, 248, 206, .72);
}


/* ──────────────── 08 Sections and shared blocks ───────────────────────── */
.section { padding: clamp(3.8rem, 2rem + 7vw, 7rem) 0; }
.section--cream { background: var(--cream-panel); }
.section--dark { background: var(--maroon-deep); color: rgba(252, 248, 206, .85); }

.section__head { max-width: 62ch; margin-bottom: clamp(2.2rem, 1rem + 3vw, 3.4rem); }
.section__head .rule--center { justify-content: flex-start; }

/* Centred head variant used on the cream, dark, cuisine and review sections */
.section--cream .section__head,
.section--dark .section__head,
.cuisines .section__head,
.reviews .section__head {
  margin-inline: auto;
  text-align: center;
}
.section--cream .section__head .rule--center,
.section--dark .section__head .rule--center,
.cuisines .section__head .rule--center,
.reviews .section__head .rule--center { justify-content: center; }
.section--cream .section__lede,
.section--dark .section__lede,
.cuisines .section__lede,
.reviews .section__lede { margin-inline: auto; }

/* Arched image frame — the logo silhouette, reused. */
.arch {
  margin: 0;
  position: relative;
  padding: 10px;
  background: linear-gradient(160deg, var(--cream), #fff);
  border: 1px solid rgba(122, 22, 48, .18);
  border-radius: 46% 46% var(--radius) var(--radius) / 26% 26% var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
}
.arch img {
  border-radius: 46% 46% var(--radius-sm) var(--radius-sm) / 27% 27% var(--radius-sm) var(--radius-sm);
  width: 100%;
  object-fit: cover;
}
.arch--dark {
  background: linear-gradient(160deg, rgba(252, 248, 206, .16), rgba(252, 248, 206, .04));
  border-color: rgba(223, 194, 118, .3);
}
.arch figcaption {
  text-align: center;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: .85rem .5rem .3rem;
}
.arch--dark figcaption { color: rgba(252, 248, 206, .7); }


/* ──────────────────────────── 09 About ────────────────────────────────── */
.about__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.about__copy p { color: var(--ink-soft); }
.about__figure { align-self: center; }
/* Portrait source (720x1280), cropped to 3:4 so it sits beside the copy
   without towering over it. */
/* The ceremony photograph is already exactly 3:4, so this crops nothing. */
.about__figure img { aspect-ratio: 3 / 4; }


/* ────────────────────── 10 Services cards ─────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1rem, .6rem + 1vw, 1.6rem);
}
.card {
  background: #fff;
  border: 1px solid rgba(122, 22, 48, .12);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
  position: relative;
  overflow: hidden;
}
/* Gold sliver that grows on hover, tying the cards to the divider motif. */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--gold), var(--maroon-bright));
  transition: height .32s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(122, 22, 48, .24);
}
.card:hover::before { height: 100%; }
.card__icon {
  font-size: 2rem;
  color: var(--maroon);
  margin-bottom: 1rem;
  stroke-width: 1.3;
}
.card__title {
  font-size: 1.42rem;
  color: var(--maroon);
  margin-bottom: .35rem;
}
.card p { margin: 0; color: var(--ink-soft); font-size: .97rem; }


/* ─────────────────────────── 11 Cuisines ──────────────────────────────── */
/* Fixed at 3 columns rather than auto-fit. There are nine cuisines, and 9
   divides evenly by 3 and by 1 — so the grid never ends on a half-empty row
   showing the divider colour through an empty cell. */
.cuisineGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(122, 22, 48, .14);
  border: 1px solid rgba(122, 22, 48, .14);
  border-radius: var(--radius);
  overflow: hidden;
}
.cuisine {
  background: var(--cream-page);
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: 1.25rem 1.4rem;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.cuisine:hover { background: var(--maroon); }
.cuisine__no {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--gold);
}
.cuisine__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--maroon);
}
.cuisine:hover .cuisine__name { color: var(--cream); }
.cuisine:hover .cuisine__no { color: var(--gold-soft); }

.cuisines__foot {
  margin-top: 2.4rem;
  display: grid;
  /* Even split so all four occasion chips sit on one row. */
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.cuisines__also { margin: 0; color: var(--ink-soft); }
.cuisines__also strong { color: var(--maroon); font-weight: 500; }

.occasions__label {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .7rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  border: 1px solid rgba(122, 22, 48, .25);
  border-radius: 999px;
  padding: .35rem .95rem;
  font-size: .88rem;
  color: var(--maroon);
  background: #fff;
}


/* ─────────────────────────── 12 Our work ──────────────────────────────── */
/* Six portrait frames from the event reel, three up. The source is 9:16 and the
   tiles crop to 3:4, so 320 of the 1280 source rows are dropped.
   object-position is 27% rather than centred for a measured reason: the
   watermark's flourish starts at source row 1060, and 27% puts the crop window
   at rows 86-1046, clearing it by 14px. Centring it would slice the flourish. */
.workGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, .6rem + 1.5vw, 1.9rem);
  align-items: start;
}
.workTile img {
  aspect-ratio: 3 / 4;
  object-position: center 27%;
}
.workTile figcaption {
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
  line-height: 1.5;
}
.workTile__kicker {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: .2rem;
}
.workGrid__note {
  margin: 2rem 0 0;
  text-align: center;
  font-size: .95rem;
  color: rgba(252, 248, 206, .62);
}


/* ─────────────────────── 12b Reviews marquee ─────────────────────────────
   One continuously scrolling row. The track holds the cards twice over and
   translates by exactly -50%, which lands the duplicate set precisely where
   the original started — so the loop has no visible seam. */
.reviews { overflow: hidden; }
.reviews__head { position: relative; }

.reviews__pause {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 1.2rem auto 0;
  padding: .45rem 1rem;
  border: 1px solid rgba(122, 22, 48, .28);
  border-radius: 999px;
  background: #fff;
  color: var(--maroon);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.reviews__pause:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }

.reviews__marquee {
  margin-top: clamp(1.8rem, 1rem + 2vw, 2.8rem);
  /* Cards fade out at both edges instead of being chopped off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.reviews__track {
  display: flex;
  gap: clamp(.9rem, .5rem + 1vw, 1.5rem);
  width: max-content;
  align-items: stretch;
  animation: marquee 78s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Stop on hover, on keyboard focus, and via the button. Hover alone is not a
   sufficient mechanism — touch users cannot hover. */
.reviews__marquee:hover .reviews__track,
.reviews__marquee:focus-within .reviews__track,
.reviews__marquee.is-paused .reviews__track { animation-play-state: paused; }

.review {
  flex: 0 0 auto;
  width: clamp(268px, 74vw, 344px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.6rem 1.5rem 1.3rem;
  background: #fff;
  border: 1px solid rgba(122, 22, 48, .13);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Stars drawn in CSS, so there is no icon request and no image to misalign. */
.review__stars { display: flex; gap: .18rem; }
.review__stars span {
  width: 15px;
  height: 15px;
  background: #E8A33D;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.review blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

.review__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: auto;
}
.review__tags li {
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--maroon);
  background: rgba(122, 22, 48, .06);
  border: 1px solid rgba(122, 22, 48, .14);
  border-radius: 999px;
  padding: .2rem .6rem;
}

.review figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(122, 22, 48, .1);
}
.review cite {
  font-style: normal;
  font-weight: 500;
  font-size: .96rem;
  color: var(--maroon);
}
.review figcaption span {
  font-size: .78rem;
  color: var(--ink-faint);
  white-space: nowrap;
}


/* ─────────────────── 12c Customer reviews: form ──────────────────────────
   "Write a review" opens a dialog; approved reviews are added to the marquee
   by main.js section 07a. Unfilled stars for ratings below five. */
.review__stars span.is-off { background: rgba(122, 22, 48, .14); }
.reviews__writeWrap { margin: 1.1rem 0 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reviewDialog {
  width: min(520px, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(122, 22, 48, .15);
  border-radius: var(--radius);
  background: var(--cream-page);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}
.reviewDialog::backdrop { background: rgba(42, 7, 16, .62); }
.reviewForm { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
.reviewForm__title {
  margin: .3rem 2.2rem 1.2rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  line-height: 1.15;
  color: var(--maroon);
}
.reviewDialog__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--maroon);
  cursor: pointer;
}
.reviewDialog__close:hover { background: rgba(122, 22, 48, .08); }
.reviewDialog__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.reviewForm .field__opt { color: var(--ink-faint); font-weight: 400; }
.field__hint { margin: .35rem 0 0; font-size: .78rem; color: var(--ink-faint); }
.reviewForm__note { margin: .8rem 0 0; font-size: .8rem; text-align: center; color: var(--ink-faint); }
.reviewForm__done { text-align: center; padding: 1rem 0 .5rem; }
.reviewForm__done:focus { outline: none; }
.reviewForm__done .reviewForm__title { margin-right: 0; }
.reviewForm__done p:not(.eyebrow) { margin: 0 0 1.4rem; color: var(--ink-soft); }

/* Star picker. The radios are listed 5 → 1 and laid out right-to-left, so
   "this star and every star before it" is the CSS sibling selector ~. */
.starInput { margin: 0 0 1.1rem; padding: 0; border: 0; }
.starInput legend { margin-bottom: .4rem; font-size: .88rem; font-weight: 500; color: var(--ink); }
.starInput legend span { color: var(--maroon-bright); }
.starInput__row { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.starInput input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starInput label {
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: rgba(122, 22, 48, .16);
  clip-path: polygon(50% 4%, 61% 37%, 96% 37%, 68% 58%, 78% 92%, 50% 71%, 22% 92%, 32% 58%, 4% 37%, 39% 37%);
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.starInput input:checked ~ label,
.starInput label:hover,
.starInput label:hover ~ label { background: #E8A33D; }
.starInput label:hover { transform: scale(1.08); }
/* The visual star cannot carry an outline (clip-path cuts it off), so the
   keyboard focus ring goes around the whole row instead. */
.starInput__row:focus-within { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
.starInput[aria-invalid="true"] .starInput__row { outline: 2px solid var(--maroon-bright); outline-offset: 4px; border-radius: 8px; }
.starInput__text { margin: .25rem 0 0; min-height: 1.3em; font-size: .85rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .starInput label { transition: none; }
  .starInput label:hover { transform: none; }
}


/* ──────────────────────── 13 Process steps ────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.4rem, .8rem + 1.5vw, 2.2rem);
  counter-reset: step;
}
.step { position: relative; padding-top: .4rem; }
.step__no {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: #fff;
  color: var(--maroon);
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.step__title { font-size: 1.3rem; color: var(--maroon); margin-bottom: .3rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .97rem; }


/* ───────────────────── 14 Contact and form ────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.contact__intro p { color: var(--ink-soft); }

.contactList { margin: 1.8rem 0 2rem; display: grid; gap: 1.1rem; }
.contactList li { display: flex; align-items: flex-start; gap: .95rem; }
.contactList svg {
  font-size: 1.15rem;
  color: var(--maroon);
  margin-top: .3rem;
  padding: .55rem;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(122, 22, 48, .2);
  border-radius: 50%;
  background: #fff;
  box-sizing: content-box;
}
.contactList__label {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Block, not inline. The phone entry holds two numbers, and inline anchors
   rendered them as "8301885803 8075155479" on one line — which reads as a single
   long number and invites someone to dial the concatenation. width: fit-content
   keeps the hit area on the text rather than stretching across the column. */
.contactList a {
  display: block;
  width: fit-content;
  font-size: 1.08rem;
  font-weight: 400;
}
.contactList a + a { margin-top: .1rem; }

.mapCard {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(122, 22, 48, .18);
  box-shadow: var(--shadow-sm);
  background: var(--cream-panel);
}
.mapCard iframe { width: 100%; height: 260px; border: 0; }

.formCard {
  background: #fff;
  border: 1px solid rgba(122, 22, 48, .14);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  box-shadow: var(--shadow-md);
  position: relative;
}
.formCard::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon));
}
.formCard__title { font-size: 1.75rem; color: var(--maroon); margin-bottom: .25rem; }
.formCard__hint { font-size: .92rem; color: var(--ink-faint); margin-bottom: 1.5rem; }

.field { margin-bottom: 1.05rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .4rem;
}
.field label span { color: var(--maroon-bright); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .78rem .95rem;
  border: 1px solid rgba(122, 22, 48, .22);
  border-radius: var(--radius-sm);
  background: var(--cream-page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(122, 22, 48, .12);
}
.field input[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }

.field select {
  appearance: none;
  /* Inline chevron, so no extra image request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A1630' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}

.formError {
  margin: 0 0 1rem;
  padding: .7rem .95rem;
  border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .3);
  color: #97271A;
  font-size: .9rem;
}
.formError[hidden] { display: none; }

.formCard__alt {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .9rem;
  color: var(--ink-faint);
}


/* ─────────────────────────── 15 Footer ────────────────────────────────── */
.site-footer {
  background: var(--maroon-ink);
  color: rgba(252, 248, 206, .72);
  padding-top: clamp(2.8rem, 1.5rem + 3vw, 4.2rem);
  font-size: .96rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr .75fr 1fr;
  gap: 2.4rem;
  padding-bottom: 2.6rem;
}
.footer__brand img { height: 84px; width: auto; margin-bottom: 1.1rem; }
.footer__brand p { max-width: 42ch; margin: 0; }

/* Social links. A pill rather than a bare icon, so the handle is readable and
   the tap target clears 44px on a phone. */
.socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.05rem;
  border: 1px solid rgba(252, 248, 206, .24);
  border-radius: 999px;
  color: rgba(252, 248, 206, .82);
  font-size: .9rem;
  letter-spacing: .01em;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.socials a:hover {
  background: rgba(252, 248, 206, .1);
  border-color: var(--gold-soft);
  color: #fff;
  text-decoration: none;
}
.socials svg { font-size: 1.15rem; }

.footer__heading {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 .9rem;
}
.footer__nav ul, .footer__contact ul { display: grid; gap: .5rem; }
.site-footer a { color: rgba(252, 248, 206, .78); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__base {
  border-top: 1px solid rgba(252, 248, 206, .14);
  padding-block: 1.3rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .86rem;
  color: rgba(252, 248, 206, .52);
}
.footer__base p { margin: 0; }


/* ─────────────────── 16 Floating action button ────────────────────────── */
.fab {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.6rem);
  bottom: clamp(.9rem, 3vw, 1.6rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  background: var(--wa);
  color: #06331A;
  font-weight: 500;
  font-size: .95rem;
  box-shadow: 0 8px 26px rgba(18, 140, 67, .42);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fab svg { font-size: 1.4rem; }
.fab:hover {
  color: #06331A;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 34px rgba(18, 140, 67, .5);
}


/* ──────────────────── 17 Reveal animation ─────────────────────────────── */
/* Content is visible by default and only hidden once the inline head script
   has confirmed JS + IntersectionObserver are available. A failed or blocked
   main.js can therefore never leave the page permanently blank. */
[data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* Stagger siblings so grids cascade rather than appearing all at once. */
.cards [data-reveal]:nth-child(2),  .steps [data-reveal]:nth-child(2),
.trust__grid [data-reveal]:nth-child(2) { transition-delay: .07s; }
.cards [data-reveal]:nth-child(3),  .steps [data-reveal]:nth-child(3),
.trust__grid [data-reveal]:nth-child(3) { transition-delay: .14s; }
.cards [data-reveal]:nth-child(4),  .steps [data-reveal]:nth-child(4),
.trust__grid [data-reveal]:nth-child(4) { transition-delay: .21s; }
.cards [data-reveal]:nth-child(5) { transition-delay: .28s; }
.cards [data-reveal]:nth-child(6) { transition-delay: .35s; }
.cards [data-reveal]:nth-child(7) { transition-delay: .42s; }
.cards [data-reveal]:nth-child(8) { transition-delay: .49s; }


/* ──────────────────── 17b Gallery (gallery.html) ──────────────────────────
   Stills taken from the client's event videos; see README.md, "Gallery".
   The home-page teaser reuses .workGrid above. Tiles here are a masonry of
   CSS columns, so 4:5, 16:9 and 1:1 crops sit together without cropping
   again or leaving gaps. */
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--maroon-ink); }
.btn--gold:hover { background: var(--gold-soft); }

/* The new stills are cropped well clear of the watermark, so the old
   27% offset (needed for the reel frames) no longer applies. */
.workTile img[src*="/gallery/"] { object-position: center 30%; }
.workGrid__more { margin-top: 2.4rem; text-align: center; }
.workGrid__more .workGrid__note { margin-top: 1rem; }

.galleryHero {
  position: relative;
  padding: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem)) 0 clamp(2.6rem, 1.6rem + 3vw, 4rem);
  text-align: center;
  color: rgba(252, 248, 206, .82);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(163, 37, 70, .55), transparent 70%),
    linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  overflow: hidden;
}
/* The arch from the logo badge, as a faint outline behind the title. */
.galleryHero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(560px, 90vw);
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  border: 1px solid rgba(223, 194, 118, .22);
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  pointer-events: none;
}
.galleryHero .shell { position: relative; }
.galleryHero__title {
  margin: .4rem auto 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.05;
  color: var(--cream);
}
.galleryHero .rule { margin-block: 1.3rem; }
.galleryHero__lede { max-width: 54ch; margin: 0 auto; font-size: 1.05rem; line-height: 1.65; }

.galleryBody { background: var(--cream-page); padding-top: clamp(2rem, 1rem + 3vw, 3.2rem); }

.gFilters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-bottom: .9rem;
}
.gFilter {
  padding: .55rem 1.1rem;
  border: 1px solid rgba(122, 22, 48, .25);
  border-radius: 999px;
  background: transparent;
  color: var(--maroon);
  font: 500 .88rem/1.2 var(--font-ui);
  letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.gFilter:hover { border-color: var(--maroon); }
.gFilter[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.gFilter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gStatus {
  min-height: 1.4em;
  margin: 0 0 1.4rem;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-faint);
}

.gGrid { columns: 4 250px; column-gap: clamp(.8rem, .4rem + 1vw, 1.25rem); }
.gTile {
  break-inside: avoid;
  margin: 0 0 clamp(.8rem, .4rem + 1vw, 1.25rem);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gTile[hidden] { display: none; }
.gTile__link { position: relative; display: block; overflow: hidden; background: var(--cream-panel); }
.gTile__link img {
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease);
}
/* Gold hairline frame on hover and focus, echoing the arches elsewhere. */
.gTile__link::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(252, 248, 206, .75);
  border-radius: calc(var(--radius) - 6px);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.gTile__link:hover img { transform: scale(1.035); }
.gTile__link:hover::after,
.gTile__link:focus-visible::after { opacity: 1; }
.gTile__link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.gTile figcaption {
  padding: .75rem .95rem .9rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.gTile__cat {
  display: block;
  margin-bottom: .15rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.galleryCta {
  margin-top: clamp(2.4rem, 1.4rem + 3vw, 3.6rem);
  padding-top: 2.2rem;
  border-top: 1px solid rgba(122, 22, 48, .12);
  text-align: center;
}
.galleryCta p {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  color: var(--maroon);
}
.galleryBack {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: max-content;
  margin: 1.3rem auto 0;
  font-size: .92rem;
  color: var(--maroon);
}
.galleryBack svg { width: 1.1em; height: 1.1em; }
.galleryBack:hover { color: var(--maroon-bright); }

/* Viewer */
.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 4, 9, .96);
  color: var(--cream);
  overscroll-behavior: contain;
}
.viewer::backdrop { background: rgba(20, 4, 9, .9); }
.viewer[open] { display: grid; grid-template-rows: 1fr auto; }
.viewer__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(3.6rem, 2rem + 4vw, 4.5rem) clamp(.5rem, 4vw, 5.5rem) .5rem;
  touch-action: pan-y pinch-zoom;
}
.viewer__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transition: opacity .25s var(--ease);
}
.viewer__img.is-loading { opacity: .25; }
.viewer__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 5.5rem) max(1.1rem, env(safe-area-inset-bottom));
}
.viewer__caption { margin: 0; max-width: 62ch; font-size: .95rem; line-height: 1.5; color: rgba(252, 248, 206, .86); }
.viewer__cat {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.viewer__count { margin: 0; font-size: .85rem; letter-spacing: .08em; color: rgba(252, 248, 206, .6); white-space: nowrap; }
.viewer__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(223, 194, 118, .35);
  border-radius: 50%;
  background: rgba(42, 7, 16, .55);
  color: var(--cream);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.viewer__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewer__btn:hover { background: rgba(122, 22, 48, .85); border-color: var(--gold-soft); }
.viewer__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.viewer__close { top: max(.9rem, env(safe-area-inset-top)); right: clamp(.8rem, 3vw, 2rem); }
.viewer__prev, .viewer__next { top: 50%; transform: translateY(-50%); }
.viewer__prev { left: clamp(.5rem, 2vw, 1.6rem); }
.viewer__next { right: clamp(.5rem, 2vw, 1.6rem); }
body.viewer-open { overflow: hidden; }

@media (max-width: 560px) {
  .gGrid { columns: 2; }
  .gTile figcaption { padding: .55rem .65rem .7rem; font-size: .78rem; }
  .gFilter { padding: .5rem .9rem; font-size: .82rem; }
  /* Thumbs reach the arrows more easily at the bottom on phones. */
  .viewer__prev, .viewer__next { top: auto; bottom: 5.2rem; transform: none; }
  .viewer__bar { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gTile__link img, .viewer__img { transition: none; }
  .gTile__link:hover img { transform: none; }
}




/* ───────────────────────── 18 Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
  .about__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .about__figure { max-width: 420px; margin-inline: auto; }
  .workGrid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: flex; }
  .header-call span { display: none; }
  .header-call { padding: .6rem; width: 44px; height: 44px; justify-content: center; }
  .header-call svg { font-size: 1.15rem; }

  /* Slide-in panel */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(330px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    padding: 2rem clamp(1.4rem, 5vw, 2.2rem);
    background: var(--maroon);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav__list a {
    display: block;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1.5rem;
    padding: .55rem 0;
    text-shadow: none;
    border-bottom: 1px solid rgba(252, 248, 206, .14);
  }
  .nav__list a::after { display: none; }
  .is-stuck .nav__list a { color: var(--cream); }
  .nav__cta { display: inline-flex; }

  /* Dim the page behind the open panel. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(42, 7, 16, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* Belt and braces for the containing-block trap described above. Even if a
     filter is reintroduced on the header, neutralise it while the menu is open
     so the panel keeps sizing to the viewport. */
  body.nav-open .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    transform: none;
  }

  .trust__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .trust__item:nth-child(3)::before { display: none; }

  .cuisines__foot { grid-template-columns: 1fr; gap: 1.6rem; }
  .cuisine { padding: 1.1rem 1rem; }
  .cuisine__name { font-size: 1.18rem; }

  .hero__inner { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 8.5rem; }
  /* The arch reads as clutter behind text on a narrow screen. */
  .hero__arch--inner { display: none; }

}

@media (max-width: 560px) {
  .hero { min-height: 92svh; }
  .hero__title { max-width: 100%; }
  .hero__actions .btn { width: 100%; }

  /* One cuisine per row below this width: 9 rows, still no empty cells. */
  .cuisineGrid { grid-template-columns: 1fr; }
  .workGrid { grid-template-columns: 1fr; }
  .workTile { max-width: 380px; margin-inline: auto; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Collapse the pill to a circular icon so it does not cover content. */
  .fab { padding: .9rem; }
  .fab__label { display: none; }
  .fab svg { font-size: 1.55rem; }

  /* Reviews read better nearly full-width on a phone. */
  .review { width: min(80vw, 300px); padding: 1.35rem 1.25rem 1.15rem; }
  .review blockquote { font-size: 1.05rem; }
  /* Narrower fade, so less of the card is dimmed on a small screen. */
  .reviews__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}

/* ── Notched and rounded phones ────────────────────────────────────────────
   Keep the floating button and the footer clear of the home indicator and the
   rounded corners. */
@supports (padding: env(safe-area-inset-bottom)) {
  .fab {
    bottom: calc(clamp(.9rem, 3vw, 1.6rem) + env(safe-area-inset-bottom));
    right: calc(clamp(.9rem, 3vw, 1.6rem) + env(safe-area-inset-right));
  }
  .site-footer .footer__base { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}


/* ───────────────── 19 Reduced motion and print ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__scroll { animation: none; }

  /* The intro never runs for these visitors (the head script skips it), and
     the hero's ambient motion is stopped outright rather than merely sped up,
     so nothing drifts, rises or pulses behind the text. */
  .intro { display: none !important; }
  .hero__glow, .hero__arch, .hero__embers span { animation: none !important; }
  .hero__embers, .intro__embers { display: none; }
  .hero__in { animation: none !important; opacity: 1; transform: none; }

  /* Reviews stop scrolling and become an ordinary swipeable list, so the
     content is all still reachable without any motion at all. */
  .reviews__track {
    animation: none !important;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: clamp(1.15rem, 4vw, 2.5rem);
    -webkit-overflow-scrolling: touch;
  }
  .review { scroll-snap-align: center; }
  .reviews__pause { display: none; }
  .reviews__marquee { -webkit-mask-image: none; mask-image: none; }
}

@media print {
  .site-header, .fab, .hero__scroll, .mapCard, .intro { display: none !important; }
  .hero { min-height: auto; padding: 2rem 0; background: #fff; }
  .hero__bg { display: none; }
  .hero__title, .hero__lede { color: #000; text-shadow: none; }
  body { background: #fff; }
  .section { padding: 1.5rem 0; }
}


/* ─────────────── 19 Touch sizing (phones, tablets, touch screens) ────────
   Every tap target at least 44x44 CSS px, the size Apple and Google both
   recommend for fingers, and no visible text below 12px. Found by
   source-files/audit_mobile.py, which checks both on every page and width. */
@media (max-width: 860px), (pointer: coarse) {
  .hero__scroll { width: 44px; height: 44px; }
  .reviews__pause,
  .gFilter,
  .socials a { min-height: 44px; }
  .galleryBack { min-height: 44px; }
  .contactList a { display: flex; align-items: center; min-height: 44px; }
  .contactList a + a { margin-top: 0; }
  .footer__nav ul, .footer__contact ul { gap: 0; }
  .footer__nav a, .footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }

  .cuisine__no,
  .workTile__kicker,
  .review__tags li,
  .gTile__cat,
  .footer__heading,
  .contactList__label { font-size: .78rem; }
}