/* ==========================================================================
   Shakeel Pakwan — Catering & Decoration
   Shared design-system stylesheet.
   This file is meant to be reused, unchanged, by every page of the site
   (Home, About, Services, Menu, Gallery, Contact, Request a Quote) so the
   whole site stays visually consistent. Do not fork per-page copies —
   add new component styles here instead.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand gold, sampled directly from the Shakeel Pakwan logo. Used for
     decorative accents, borders, icon fills and section backgrounds —
     NEVER as text on a light background (fails contrast, see --gold-deep). */
  --gold-bright: #d3af37;
  --gold-bright-soft: #e7cd7c;
  /* Deep gold: passes WCAG AA (4.9:1) for normal text/links on white, and
     for white text on a gold button background. Use this for anything
     readable. */
  --gold-deep: #8a6d1d;
  --gold-deep-hover: #6f5817;

  --ink: #2b2420;        /* primary text */
  --ink-soft: #55493c;   /* secondary text */
  --paper: #fffdf8;      /* page background */
  --sand: #f6efdf;       /* alternate section background */
  --sand-line: #e7dec9;  /* borders / dividers */
  --white: #ffffff;

  --success: #2e6b3e;
  --error: #a3311f;

  /* Typography */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(43, 36, 32, 0.08);
  --shadow-md: 0 10px 30px rgba(43, 36, 32, 0.10);

  --container-max: 1160px;

  /* ---- Motion tokens -------------------------------------------------------
     One shared vocabulary for every transition/animation on the site.
     --ease-premium: a gentle "ease-out-expo" curve (decelerates smoothly,
     no bounce/overshoot) used for anything entering the screen — reveals,
     hero text, image zooms. --ease-standard is a symmetric curve for
     state changes that go both ways (hover in/out, color, shadow). */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 550ms;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-deep); }
a:hover, a:focus-visible { color: var(--gold-deep-hover); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-wrap: balance; }
h3 { font-size: 1.25rem; text-wrap: balance; }
p { margin: 0 0 var(--space-2); text-wrap: pretty; max-width: 65ch; }
ul { margin: 0; padding: 0; list-style: none; }

/* Visible, high-contrast focus ring for keyboard users everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

/* Skip-to-content link: hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: var(--space-1) var(--space-2);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section { padding: var(--space-6) 0; }
.section--sand { background: var(--sand); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  /* Identity transform at rest (see individual-transform-properties note
     above the reveal styles) so hover/active never causes a surprise
     stacking-context change. */
  translate: 0;
  scale: 1;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    translate var(--dur-fast) var(--ease-standard),
    scale var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
/* A small physical lift on hover, a small press on click — makes the
   primary calls-to-action feel tactile rather than just a color swap. */
.btn:hover, .btn:focus-visible { translate: 0 -2px; box-shadow: var(--shadow-sm); }
.btn:active { translate: 0; scale: 0.97; box-shadow: none; }
.btn-primary {
  background: var(--gold-deep);
  color: var(--white);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--gold-deep-hover); color: var(--white); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--ink); color: var(--white); }

/* ---- Header / primary navigation ------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--sand-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--ink);
}
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.1;
}
.brand-name span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.primary-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--gold-deep); }
.primary-nav a[aria-current="page"] {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-bright);
}
.nav-cta { margin-left: var(--space-2); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--sand-line);
    box-shadow: var(--shadow-md);
    /* Animated open/close instead of a hard display:none toggle. visibility
       is timed with `transition-delay` so the closed menu drops out of hit
       testing and the tab order only once the fade-out has finished —
       staying just as inert as display:none did, but no longer an instant
       snap. Still position:absolute (already out of normal flow), so
       neither state can shift the page layout beneath it. */
    opacity: 0;
    translate: 0 -8px;
    visibility: hidden;
    transition:
      opacity var(--dur-base) var(--ease-standard),
      translate var(--dur-base) var(--ease-premium),
      visibility 0s linear var(--dur-base);
  }
  .primary-nav[data-open="true"] {
    opacity: 1;
    translate: 0;
    visibility: visible;
    transition:
      opacity var(--dur-base) var(--ease-standard),
      translate var(--dur-base) var(--ease-premium),
      visibility 0s linear 0s;
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .primary-nav li {
    border-bottom: 1px solid var(--sand-line);
    opacity: 0;
    translate: 0 -6px;
    transition: opacity var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-premium);
  }
  /* Small stagger as the links arrive, capped at a handful of items so it
     reads as a quick ripple, not a slot-machine effect. */
  .primary-nav[data-open="true"] li { opacity: 1; translate: 0; }
  .primary-nav[data-open="true"] li:nth-child(1) { transition-delay: .03s; }
  .primary-nav[data-open="true"] li:nth-child(2) { transition-delay: .06s; }
  .primary-nav[data-open="true"] li:nth-child(3) { transition-delay: .09s; }
  .primary-nav[data-open="true"] li:nth-child(4) { transition-delay: .12s; }
  .primary-nav[data-open="true"] li:nth-child(5) { transition-delay: .15s; }
  .primary-nav[data-open="true"] li:nth-child(6) { transition-delay: .18s; }
  .primary-nav[data-open="true"] li:nth-child(7) { transition-delay: .21s; }
  .primary-nav li:last-child { border-bottom: none; }
  .primary-nav a { display: block; padding: var(--space-2) 0; transition: color var(--dur-fast) var(--ease-standard); }
  .nav-cta { margin-left: 0; margin-top: var(--space-2); }
  .nav-cta .btn { width: 100%; justify-content: center; }
}

/* ---- Page hero ------------------------------------------------------------ */
.page-hero {
  padding: var(--space-5) 0 var(--space-4);
  background:
    radial-gradient(1200px 480px at 85% -10%, rgba(211,175,55,0.14), transparent 60%),
    var(--sand);
  border-bottom: 1px solid var(--sand-line);
}
.page-hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
.page-hero .hero-copy { max-width: 46ch; }
.page-hero p.lede { color: var(--ink-soft); font-size: 1.08rem; }

/* Small feature pills so the copy column carries more than a headline +
   button — fills the column with purposeful content instead of empty
   space when it's paired with a tall portrait photo. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.hero-badges li {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.hero-actions .btn { margin: 0; }
.hero-actions a.link-inline { font-weight: 600; text-decoration: none; }
.hero-actions a.link-inline:hover, .hero-actions a.link-inline:focus-visible { text-decoration: underline; }

.page-hero figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* Cap the photo's footprint so a portrait source image can never
     stretch the whole hero row taller than the copy needs — aspect-ratio
     plus object-fit keeps it a fixed, predictable shape instead. */
  aspect-ratio: 4 / 5;
  max-block-size: 560px;
  justify-self: center;
  inline-size: 100%;
}
.page-hero figure img { block-size: 100%; inline-size: 100%; object-fit: cover; }
.page-hero figcaption {
  padding: var(--space-1) var(--space-2);
  background: var(--white);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
@media (max-width: 780px) {
  .page-hero .container { grid-template-columns: 1fr; }
  .page-hero .hero-copy { max-width: none; }
  .page-hero figure { max-block-size: 420px; }
}

/* ---- Photo highlight strip (used right under a page hero) ------------------ */
.highlight-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}
.highlight-strip figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
}
.highlight-strip img { inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1; transition: scale var(--dur-slow) var(--ease-premium); }
.highlight-strip a:hover img, .highlight-strip a:focus-visible img { scale: 1.05; will-change: scale; }
.highlight-strip figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: linear-gradient(0deg, rgba(20,16,12,0.75), rgba(20,16,12,0));
}

/* ---- Menu page ------------------------------------------------------------ */
.menu-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-left: 4px solid var(--gold-bright);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}
.menu-note strong { color: var(--ink); }

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
}
.menu-jump a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
}
.menu-jump a:hover, .menu-jump a:focus-visible { background: var(--gold-bright-soft); color: var(--ink); }

.menu-category {
  padding: var(--space-6) 0;
  scroll-margin-top: 100px; /* keeps sticky header from covering the heading when jumped to */
  container-type: inline-size;
  container-name: menu-category;
}
.menu-category:nth-of-type(even) { background: var(--sand); }

.menu-category-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.menu-category-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}
.menu-category-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.menu-category-media--accent {
  background: linear-gradient(135deg, var(--sand), var(--gold-bright-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.menu-category-media::after {
  /* Gold corner flourish so every category card reads as one designed
     system, even the ones without a photo (see .menu-category-media:empty). */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 46px;
  block-size: 46px;
  border-block-start: 3px solid var(--gold-bright);
  border-inline-start: 3px solid var(--gold-bright);
  border-start-start-radius: var(--radius-lg);
  opacity: .9;
}

/* Fallback (all browsers): stack on narrow viewports, sit side-by-side
   on wide ones. Enhanced below with a container query so the same
   component adapts to the space it's actually given, not just the
   viewport. */
@media (min-width: 780px) {
  .menu-category-head { grid-template-columns: 320px 1fr; align-items: center; }
}
@supports (container-type: inline-size) {
  @container menu-category (min-width: 620px) {
    .menu-category-head { grid-template-columns: 320px 1fr; align-items: center; }
  }
}

.dish-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 var(--space-3);
}
.dish {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--sand-line);
}
.dish::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  align-self: center;
}
.dish-name { font-weight: 600; color: var(--ink); }
/* Urdu name, right-aligned in the same row via margin-inline-start: auto.
   Optional — only dishes with a .dish-name-ur span get the two-column
   look; plain English-only rows are unaffected. */
.dish-name-ur { margin-inline-start: auto; color: var(--ink-soft); font-size: 0.92em; }

.cta-banner {
  text-align: center;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-3);
}
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: #e7ddc9; max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #e7ddc9;
  padding: var(--space-5) 0 var(--space-3);
}
.site-footer a { color: var(--gold-bright-soft); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.footer-grid h3 { color: var(--white); font-size: 1rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.footer-grid p, .footer-grid li { color: #d8cdb4; font-size: 0.95rem; margin-bottom: 0.4rem; }
.social-links { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #55493c;
  color: var(--white);
  text-decoration: none;
}
.footer-bottom {
  border-top: 1px solid #453a2c;
  padding-top: var(--space-2);
  font-size: 0.85rem;
  color: #b6a988;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
}

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

/* ==========================================================================
   Homepage (index.html) — hero, sections and animation.
   Reuses every token/component above; nothing here is forked per-page.
   ========================================================================== */

/* ---- Sticky header, scrolled state -----------------------------------------
   A 1px sentinel sits right after <header>. When it scrolls out of view,
   main.js adds .is-scrolled to the header for a shadowed bar with a
   slightly smaller mark. The header's own box height never changes (only
   box-shadow, a paint-only property, and the logo's `scale`, which is
   GPU-composited) so this never reflows the page beneath it — a compact-
   on-scroll effect with zero layout shift. Kept as a plain class toggle
   (IntersectionObserver-driven) rather than CSS `scroll-state()`/
   `animation-timeline`, since both of those still lack Firefox and/or
   Safari support. */
.site-header { transition: box-shadow var(--dur-base) var(--ease-standard); }
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}
.brand img { scale: 1; transition: scale var(--dur-base) var(--ease-standard); }
.site-header.is-scrolled .brand img { scale: 0.82; }
[data-header-sentinel] { position: relative; block-size: 1px; margin-top: -1px; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* A slow, one-time zoom — plays once on load and stops (not a looping
     effect). Purely decorative, GPU-composited (scale only), and clipped
     by .hero's overflow:hidden, so it never affects layout or LCP timing
     (LCP is measured at first paint, before this animation starts moving
     the pixels). A subtle, restrained touch common on premium hospitality
     sites — not a parallax or "gamey" effect. */
  scale: 1;
  animation: heroZoom 16s var(--ease-premium) forwards;
}
@keyframes heroZoom {
  to { scale: 1.06; }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(20,16,12,0.88) 0%, rgba(20,16,12,0.55) 45%, rgba(20,16,12,0.22) 75%, rgba(20,16,12,0.35) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: var(--space-6) var(--space-5);
  max-width: 52ch;
}
.hero .eyebrow { color: var(--gold-bright-soft); }
.hero h1 { color: var(--white); font-size: clamp(2.1rem, 5vw, 3.25rem); }
.hero .lede { color: #f1ead9; font-size: 1.1rem; max-width: 48ch; }
.hero-call { font-size: 0.95rem; color: #e7ddc9; margin-top: var(--space-2); }
.hero-call a { color: var(--white); text-decoration: underline; }
.btn-on-dark.btn-secondary { border-color: var(--white); color: var(--white); }
.btn-on-dark.btn-secondary:hover, .btn-on-dark.btn-secondary:focus-visible { background: var(--white); color: var(--ink); }

/* Sequential hero text entrance. Each element carries a --d custom property
   (set inline) as its animation-delay, so eyebrow / heading / lede / actions
   arrive in order rather than all at once. The "ease-out-expo" curve
   decelerates smoothly with no bounce, which is what makes this read as
   restrained rather than "the text jumped in". prefers-reduced-motion
   already zeroes animation-duration globally, which collapses this to an
   instant, fully-visible state — no separate reduced-motion override
   needed here. */
.hero-anim {
  opacity: 0;
  translate: 0 14px;
  animation: heroReveal var(--dur-slow) var(--ease-premium) both;
  animation-delay: var(--d, 0s);
}
@keyframes heroReveal {
  to { opacity: 1; translate: 0; }
}

/* ---- Scroll-reveal (generic) -----------------------------------------------
   Progressive enhancement: [data-reveal] elements only start hidden once
   the page has confirmed JS is running (html.js, set synchronously in
   <head>). With JS disabled, content is visible immediately — nothing is
   ever hidden behind a script that didn't run. main.js adds .is-visible via
   IntersectionObserver as each element scrolls into view, and removes it
   again after the transition finishes (see main.js) so `will-change` never
   sits on off-screen elements indefinitely. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition: opacity var(--dur-slow) var(--ease-premium), translate var(--dur-slow) var(--ease-premium);
}
.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0;
}
/* Stagger direct children of a reveal group by nth-child order. */
.js [data-reveal-group] > *:nth-child(1) { transition-delay: 0s; }
.js [data-reveal-group] > *:nth-child(2) { transition-delay: .07s; }
.js [data-reveal-group] > *:nth-child(3) { transition-delay: .14s; }
.js [data-reveal-group] > *:nth-child(4) { transition-delay: .21s; }
.js [data-reveal-group] > *:nth-child(5) { transition-delay: .28s; }
.js [data-reveal-group] > *:nth-child(6) { transition-delay: .35s; }
.js [data-reveal-group] > *:nth-child(7) { transition-delay: .42s; }
.js [data-reveal-group] > *:nth-child(8) { transition-delay: .49s; }

/* ---- Section heading + generic link ---------------------------------------- */
.section-head { max-width: 62ch; margin: 0 0 var(--space-4); }
.section-head p:last-child { color: var(--ink-soft); }
.section-head--dark h2 { color: var(--white); }
.section-head--dark p { color: #d8cdb4; }
.eyebrow--on-dark { color: var(--gold-bright-soft); }
.section-cta { margin-top: var(--space-4); }
.link-inline { font-weight: 600; text-decoration: none; }
.link-inline:hover, .link-inline:focus-visible { text-decoration: underline; }

/* ---- About section ----------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
}
.about-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.about-figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.about-copy { max-width: 56ch; }
.about-quote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--gold-bright);
  background: var(--sand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 780px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---- Cards grid (services / why-choose-us) --------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}
.service-card {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  translate: 0;
  transition: translate var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.service-card:hover, .service-card:focus-within {
  translate: 0 -6px;
  box-shadow: var(--shadow-md);
  border-color: var(--sand-line);
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--gold-deep);
  margin-bottom: var(--space-2);
  transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
/* A small "considered" detail: the icon fills solid gold with a white
   glyph on hover, rather than the card just lifting on its own. */
.service-card:hover .service-icon, .service-card:focus-within .service-icon {
  background: var(--gold-deep);
  color: var(--white);
}
.service-card p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0; }

.section--dark { background: var(--ink); }
.cards-grid--dark .feature-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  translate: 0;
  transition: translate var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.cards-grid--dark .feature-card:hover, .cards-grid--dark .feature-card:focus-within {
  translate: 0 -6px;
  background: rgba(255,255,255,0.09);
}
.cards-grid--dark h3 { color: var(--white); font-size: 1.05rem; }
.cards-grid--dark p { color: #d8cdb4; font-size: 0.95rem; margin-bottom: 0; }

/* ---- Featured menu dish cards ----------------------------------------------- */
.dish-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}
.dish-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.dish-card:hover, .dish-card:focus-visible { box-shadow: var(--shadow-md); }
.dish-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.dish-card img { inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1; transition: scale var(--dur-slow) var(--ease-premium); }
.dish-card:hover img, .dish-card:focus-visible img { scale: 1.05; will-change: scale; }
.dish-card-name {
  display: block;
  padding: 0.65rem var(--space-2);
  font-weight: 600;
  background: var(--white);
  border-top: 1px solid var(--sand-line);
}

/* ---- Gallery + lightbox ------------------------------------------------ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery-item {
  display: block;
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--sand);
}
.gallery-item img { inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1; transition: scale var(--dur-slow) var(--ease-premium); display: block; }
.gallery-item:hover img, .gallery-item:focus-visible img { scale: 1.05; will-change: scale; }
/* A faint darkening on hover/focus — a quiet affordance that the photo is
   clickable, without adding any extra icon or label. */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,16,12,0.12);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }

/* ---- Gallery slider (gallery.html) --------------------------------------
   A horizontally-scrolling variant of the grid above, for pages that want
   a curated, no-repeat set of photos browsed a few at a time rather than
   dumped in one long grid. Reuses .gallery-item for the tile itself so the
   hover/lightbox styling stays identical to the grid version. */
.slider { position: relative; }
.gallery-slider {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 auto;
  inline-size: min(260px, 70vw);
  scroll-snap-align: start;
}
.gallery-slide .gallery-item { inline-size: 100%; block-size: auto; }
/* Centers the track's contents when they're narrower than the container
   (e.g. only a handful of video tiles) instead of leaving them pinned to
   the left with empty space on the right. "safe" is the key part: once the
   tiles DO overflow (small screens), it falls back to start-alignment so
   the first tile stays reachable at scrollLeft 0 instead of being clipped
   off the left edge by the centering. */
/* Plain "center" first as a baseline every browser understands, then the
   safer "safe center" as a progressive enhancement — older WebKit/Safari
   versions that don't recognize the safe/unsafe keywords treat that whole
   declaration as invalid and ignore it, leaving the plain center above in
   effect, instead of falling back to unstyled (left-aligned) flex-start. */
.gallery-slider--center { justify-content: center; justify-content: safe center; }
/* Video slides (From our past events) are portrait phone clips shot at
   ~9:16 — match the tile box to that same ratio so object-fit: cover has
   nothing to crop and there's no top/bottom letterboxing. Kept noticeably
   wider than a photo tile: native <video controls> needs roughly 240px+
   of width before the browser's own control bar (play/timeline/volume/
   fullscreen) has room to lay out without icons overlapping or vanishing. */
.gallery-slide--video { inline-size: min(260px, 68vw); }
.gallery-video {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  object-fit: cover;
  object-position: center;
  display: block;
}
.slider-nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 1px solid var(--sand-line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.slider-nav:hover, .slider-nav:focus-visible { background: var(--sand); }
.slider-nav:disabled { opacity: 0; pointer-events: none; }
.slider-nav--prev { inset-inline-start: 4px; }
.slider-nav--next { inset-inline-end: 4px; }
@media (max-width: 640px) {
  /* Buttons would sit awkwardly close to the tiles at this width — swipe
     scrolling on the track itself is the natural interaction here. */
  .slider-nav { display: none; }
}

.lightbox {
  border: 0;
  padding: 0;
  max-width: min(92vw, 1000px);
  max-height: 88vh;
  background: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.lightbox::backdrop { background: rgba(20,16,12,0.82); }
.lightbox img { display: block; max-width: min(92vw, 1000px); max-height: 76vh; inline-size: auto; block-size: auto; margin: 0 auto; }
.lightbox-caption {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: #e7ddc9;
  font-size: 0.9rem;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255,255,255,0.3); }

/* ---- Follow / social proof (testimonial alternative) ------------------------
   No third-party review quotes are invented here — this links out to the
   business's own real social profiles instead. */
.follow-inner { text-align: center; max-width: 60ch; margin: 0 auto; }
.social-links--large { justify-content: center; margin-top: var(--space-3); }
.social-links--large a {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  gap: 0.5rem;
  border: 1px solid var(--sand-line);
  color: var(--ink);
}
.social-links--large a:hover, .social-links--large a:focus-visible { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ==========================================================================
   Shared across about / services / gallery / contact / request-quote.
   ========================================================================== */

/* ---- Feature row (alternating image + copy — services.html) ---------------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row--reverse .feature-row-media { order: 2; }
.feature-row-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.feature-row-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.feature-row-copy h2 { margin-bottom: var(--space-1); }
.feature-row-copy > p:first-of-type { color: var(--ink-soft); }
.check-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.check-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.45rem;
  color: var(--ink);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-deep);
  font-weight: 700;
}
@media (max-width: 780px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--reverse .feature-row-media { order: 0; }
}

/* ---- Contact layout + map embed --------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-body); color: var(--ink-soft); margin-bottom: 0.4rem; }
.contact-card .contact-line { margin-bottom: var(--space-3); }
.contact-card .contact-line:last-child { margin-bottom: 0; }
.contact-card a.contact-value { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-card a.contact-value:hover, .contact-card a.contact-value:focus-visible { color: var(--gold-deep); }
.contact-card .social-links a { color: var(--ink); border-color: var(--sand-line); }
.contact-card .social-links a:hover, .contact-card .social-links a:focus-visible { background: var(--ink); color: var(--white); border-color: var(--ink); }
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 11;
  border: 1px solid var(--sand-line);
}
.map-embed iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* ---- Forms ------------------------------------------------------------------ */
.form-card {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.form-field .form-hint { font-size: 0.8rem; color: var(--ink-soft); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.form-field textarea { min-height: 130px; resize: vertical; font-family: inherit; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(138, 109, 29, 0.15);
}
.checkbox-field {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.checkbox-field input { margin-top: 0.25rem; width: 18px; height: 18px; flex: none; accent-color: var(--gold-deep); }
.checkbox-field label { font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; }
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.form-note { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.form-status {
  grid-column: 1 / -1;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--sand-line);
  background: var(--sand);
  font-size: 0.9rem;
  display: none;
}
.form-status[data-visible="true"] { display: block; }

.cta-banner--large { padding: var(--space-6) var(--space-3); }