/* =============================================================================
   JEWEL OF INDIA — master design system
   Every future page inherits these tokens and components.
   Sections: 1 Tokens · 2 Reset/base · 3 Layout · 4 Motion · 5 Primitives
             6 Header · 7 Hero · 8 Sections · 9 Footer · 10 Responsive
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Palette — gold is an accent only, never a field */
  --emerald: #04342C;
  --emerald-deep: #022821;
  --emerald-line: #1c4b41;
  --ivory: #F4F0E7;
  --parchment: #E8E0D1;
  --ink: #171714;
  --brass: #B8860B;          /* decoration only: rules, arrows, large display italics */
  --brass-text: #7E5C07;     /* small brass text on ivory/parchment — 5.4:1 */
  --brass-text-dark: #C08F14;/* small brass text on emerald/ink — 4.7:1 */
  --white: #FFFFFF;

  /* Derived, opacity-based neutrals */
  --ink-70: rgba(23, 23, 20, .70);
  --ink-65: rgba(23, 23, 20, .65);
  --ink-40: rgba(23, 23, 20, .40);
  --ink-12: rgba(23, 23, 20, .12);
  --ink-08: rgba(23, 23, 20, .08);
  --ivory-72: rgba(244, 240, 231, .72);
  --ivory-60: rgba(244, 240, 231, .60);
  --ivory-16: rgba(244, 240, 231, .16);
  --brass-40: rgba(184, 134, 11, .40);

  /* Type families */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale — fluid between 390px and 1440px viewports */
  --fs-display: clamp(3.4rem, 1.55rem + 7.6vw, 6.75rem);   /* 54 → 108 */
  --fs-h2: clamp(2.35rem, 1.35rem + 4.1vw, 4.5rem);        /* 38 → 72  */
  --fs-h3: clamp(1.55rem, 1.25rem + 1.25vw, 2.25rem);      /* 25 → 36  */
  --fs-h4: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);          /* 19 → 24  */
  --fs-statement: clamp(2.5rem, 1.3rem + 5vw, 5.25rem);    /* 40 → 84  */
  --fs-numeral: clamp(3rem, 1.6rem + 5.6vw, 6rem);
  --fs-lede: clamp(1.0625rem, .98rem + .45vw, 1.1875rem);  /* 17 → 19  */
  --fs-body: clamp(1rem, .97rem + .18vw, 1.0625rem);       /* 16 → 17  */
  --fs-small: .875rem;
  --fs-eyebrow: .6875rem;                                  /* 11px     */

  --lh-display: .96;
  --lh-heading: 1.04;
  --lh-body: 1.62;
  --tr-display: -.028em;   /* tracking */
  --tr-eyebrow: .18em;

  /* Layout */
  --wrap: 1400px;
  --gutter: clamp(1.25rem, 1rem + 4.2vw, 6.5rem);  /* 20 → 104: margins grow on big monitors */
  --col-gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --pad-section: clamp(3.25rem, 1.5rem + 6vw, 7rem);   /* 52 → 112 */
  --pad-section-sm: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  --rule: 1px solid var(--ink-12);
  --rule-ivory: 1px solid var(--ivory-16);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-reveal: 860ms;
  --dur-media: 900ms;
  --dur-ui: 420ms;

  /* Header height, read by the hero and the mobile menu */
  --head-h: clamp(80px, 7vw, 108px);
}

/* --- 2. RESET / BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* nothing may scroll sideways */
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--emerald); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}
.on-dark :focus-visible { outline-color: var(--brass); }

.skip-link {
  position: fixed; top: 0; left: 50%; translate: -50% -120%;
  z-index: 200; padding: .85rem 1.5rem;
  background: var(--emerald); color: var(--ivory);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  transition: translate var(--dur-ui) var(--ease);
}
.skip-link:focus { translate: -50% 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. LAYOUT ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: var(--pad-section-sm); }
.section--flush-bottom { padding-bottom: 0; }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* Surfaces */
.surface-ivory { background: var(--ivory); color: var(--ink); }
.surface-parchment { background: var(--parchment); color: var(--ink); }
.surface-emerald { background: var(--emerald); color: var(--ivory); }
.surface-ink { background: var(--ink); color: var(--ivory); }
.on-dark {
  --ink-70: var(--ivory-72);
  --ink-65: var(--ivory-60);
  --ink-12: var(--ivory-16);
  --brass-text: var(--brass-text-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--ivory); }

/* --- 4. MOTION ----------------------------------------------------------- */
/* Content is hidden ONLY once app.js has actually executed and added .js to the
   root element. If the script is disabled, blocked, 404s or throws, the class is
   never added, nothing is ever hidden, and the page renders in full. The HTML is
   always the baseline; JavaScript only ever adds motion on top of it. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease) var(--reveal-delay, 0ms);
}
.js .frame { --media-scale: 1.08; }   /* resolves to 1 once the frame reveals */
[data-reveal].is-in { opacity: 1; transform: none; }

/* Without JavaScript the accordion cannot open, so answers default to expanded. */
html:not(.js) .faq__panel { grid-template-rows: 1fr; }
html:not(.js) .faq__icon { display: none; }
html:not(.js) .faq__q { cursor: default; }

/* Masked media reveal: the frame clips, the media inside moves */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--parchment);
  aspect-ratio: var(--ratio, 4 / 5);
}
.frame__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(var(--media-scale, 1));
  transition: transform var(--dur-media) var(--ease) var(--reveal-delay, 0ms);
  will-change: transform;
}
.frame.is-in { --media-scale: 1; }

/* Placeholder shown until real photography is dropped in */
.frame__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: .5rem;
  padding: clamp(1rem, 2vw, 1.75rem);
  background: var(--parchment);
  color: var(--ink-40);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
}
.frame__placeholder::before {
  content: ""; position: absolute; inset: clamp(.6rem, 1.4vw, 1.1rem);
  border: 1px solid rgba(23, 23, 20, .10);
}
.frame__placeholder span { position: relative; }
.frame--dark .frame__placeholder { background: #0b322a; color: var(--ivory-60); }
.frame--dark .frame__placeholder::before { border-color: var(--ivory-16); }
.frame--deep .frame__placeholder { background: #ded4c1; }

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

/* --- 5. PRIMITIVES ------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass-text);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 1px; background: var(--brass-40);
}
.eyebrow--muted { color: var(--ink-65); }
.eyebrow--plain::before { display: none; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  line-height: 1.02;
  letter-spacing: -.026em;
}
.lede { font-size: var(--fs-lede); line-height: 1.7; color: var(--ink-70); max-width: 46ch; }
.body-copy { color: var(--ink-70); max-width: 54ch; }
.body-copy + .body-copy { margin-top: 1.15em; }
.italic-accent { font-style: italic; }

.rule { height: 1px; background: var(--ink-12); border: 0; margin: 0; }
.rule--brass { background: var(--brass-40); }
.rule--short { width: clamp(3rem, 6vw, 5.5rem); }

/* Buttons */
.btn {
  --btn-bg: var(--emerald);
  --btn-fg: var(--ivory);
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.15rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
}
.btn .arrow { transition: transform var(--dur-ui) var(--ease); }
.btn:hover { --btn-bg: var(--ink); border-color: var(--ink); }
.btn:hover .arrow { transform: translateX(6px); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--ink-12);
}
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--on-dark { --btn-bg: var(--ivory); --btn-fg: var(--ink); }
.btn--on-dark:hover { --btn-bg: var(--brass); --btn-fg: var(--ink); border-color: var(--brass); }
.btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--ivory); border-color: var(--ivory-16); }
.btn--ghost-dark:hover { --btn-fg: var(--ivory); border-color: var(--ivory); --btn-bg: transparent; }

/* Text link with animated underline */
.link {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding-block: .35rem;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; opacity: .35;
  transform-origin: right; transform: scaleX(1);
  transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.link:hover::after { opacity: 1; transform-origin: left; }
.link .arrow { transition: transform var(--dur-ui) var(--ease); }
.link:hover .arrow { transform: translateX(5px); }
.arrow { display: inline-block; width: 1.1em; height: 1px; background: currentColor; position: relative; }
.arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: .38em; height: .38em; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* --- 6. HEADER ----------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 600ms var(--ease), border-color 600ms var(--ease),
              backdrop-filter 600ms var(--ease);
}
.site-head.is-stuck {
  --head-h: clamp(64px, 5vw, 76px);
  background: rgba(244, 240, 231, .94);
  backdrop-filter: saturate(120%) blur(12px);
  border-bottom-color: var(--ink-12);
}
.site-head__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  min-height: var(--head-h);
  transition: min-height 600ms var(--ease);
}

.wordmark { display: block; line-height: 1; }
.wordmark__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, .95rem + .95vw, 1.75rem);
  letter-spacing: -.01em;
}
.wordmark__sub {
  display: block; margin-top: .45rem;
  font-size: .5625rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-65);
}
.is-stuck .wordmark__sub { opacity: 0; }
.wordmark__sub { transition: opacity 400ms var(--ease); }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav__link {
  position: relative; white-space: nowrap;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding-block: .4rem;
  color: var(--ink-70);
  transition: color var(--dur-ui) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { padding: .95rem 1.5rem; white-space: nowrap; }

.nav-toggle {
  display: none; align-items: center; gap: .6rem; margin-left: auto;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding: .5rem 0;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span {
  display: block; height: 1px; background: currentColor;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}

/* Open state: bars cross, and the header inverts over the emerald overlay */
[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(3px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-3px) rotate(-45deg); }

body.is-locked .site-head {
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  color: var(--ivory);
}
body.is-locked .wordmark__name { color: var(--ivory); }
body.is-locked .wordmark__sub { color: var(--ivory-60); opacity: 1; }
body.is-locked .nav-toggle { color: var(--ivory); }

/* Full-screen mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head-h) + 2rem) var(--gutter) 3rem;
  background: var(--emerald); color: var(--ivory);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 760ms var(--ease);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__list { display: grid; gap: clamp(.35rem, 1.4vw, .9rem); }
.menu__item {
  overflow: hidden;
}
.menu__item a {
  display: block; padding-block: .35rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.2rem + 4vw, 3.25rem);
  line-height: 1.1; letter-spacing: -.02em;
  transform: translateY(110%);
  transition: transform 760ms var(--ease) var(--stagger, 0ms), color var(--dur-ui) var(--ease);
}
.menu.is-open .menu__item a { transform: translateY(0); }
.menu__item a:hover { color: var(--brass); }
.menu__foot {
  margin-top: clamp(2rem, 6vw, 3.5rem); padding-top: 1.5rem;
  border-top: var(--rule-ivory);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ivory-72);
  opacity: 0; transition: opacity 500ms var(--ease) 380ms;
}
.menu.is-open .menu__foot { opacity: 1; }
body.is-locked { overflow: hidden; }

/* --- 7. HERO -------------------------------------------------------------
   One lead photograph plus one small detail crop, both on a single row so the
   hero stays under one and a quarter screens.
   ------------------------------------------------------------------------ */
.hero { position: relative; padding-top: calc(var(--head-h) + clamp(2rem, 4vw, 3.5rem)); padding-bottom: 0; }
.hero__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: start; }

.hero__intro { grid-column: 1 / span 6; grid-row: 1; }
.hero__eyebrow { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.hero__title {
  margin-bottom: clamp(1.25rem, 2.2vw, 1.85rem);
  font-size: clamp(3rem, 1.35rem + 6.1vw, 5.5rem);
}
.hero__title .line { display: block; }
.hero__title em { font-style: italic; color: var(--emerald); }
.hero__lede { margin-bottom: clamp(1.75rem, 3vw, 2.4rem); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.hero__caption {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65);
}
.hero__caption .rule { flex: none; }

.hero__lead {
  grid-column: 9 / -1; grid-row: 1;
  align-self: start;
  margin-right: calc(var(--gutter) * -1);   /* bleeds off the right edge */
  --ratio: 4 / 5;
}

/* --- 8b. EVENT PANELS ---------------------------------------------------- */
.planning__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.5rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.planning__head .h2 { grid-column: 1 / span 6; }
.planning__head .body-copy { grid-column: 8 / -1; }

.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.panel { position: relative; display: block; color: var(--ivory); }
.panel:nth-child(even) { margin-top: clamp(2rem, 7vw, 6rem); }
.panel--tall { --ratio: 4 / 5; }
.panel--wide { --ratio: 5 / 4; }
.panel .frame { background: var(--emerald-deep); }
.panel__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 34, 28, .34);
  transition: background-color var(--dur-media) var(--ease);
}
.panel__body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  display: flex; flex-direction: column; gap: .9rem;
}
.panel__index {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  color: var(--brass-text-dark);
}
.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.05; letter-spacing: -.02em;
  transition: transform var(--dur-media) var(--ease);
}
.panel__meta {
  display: flex; align-items: center; gap: .85rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ivory-72);
  transition: transform var(--dur-media) var(--ease);
}
.panel__meta .arrow { width: 1.6em; transition: width var(--dur-media) var(--ease); }
.panel:hover .frame__media, .panel:focus-visible .frame__media { --media-scale: 1.05; }
.panel:hover .panel__scrim, .panel:focus-visible .panel__scrim { background: rgba(4, 34, 28, .5); }
.panel:hover .panel__title, .panel:focus-visible .panel__title { transform: translateY(-6px); }
.panel:hover .panel__meta, .panel:focus-visible .panel__meta { transform: translateY(-6px); }
.panel:hover .panel__meta .arrow { width: 2.6em; }

/* --- 8c. STORY ----------------------------------------------------------- */
.story__grid { row-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.story__statement { grid-column: 1 / span 6; grid-row: 1; }
.story__statement .rule { margin-block: clamp(1.75rem, 3vw, 2.5rem); }
.story__copy { grid-column: 8 / -1; grid-row: 1; padding-top: clamp(.5rem, 2vw, 2.5rem); }
.story__figure {
  grid-column: 3 / span 8; grid-row: 2;
  margin-top: clamp(-2rem, -4vw, -4.5rem);
  --ratio: 16 / 9;
}
.story__stat {
  grid-column: 1 / span 2; grid-row: 2; align-self: center;
  margin-top: clamp(-1rem, -3vw, -3rem);
}
.story__stat .value {
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1;
}
.story__stat .label {
  margin-top: .6rem; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--ink-65);
}

/* --- 8d. PROCESS --------------------------------------------------------- */
.process__head { margin-bottom: clamp(3rem, 6vw, 5rem); max-width: 30ch; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.step { border-top: 1px solid var(--ink); padding-top: clamp(1.25rem, 2vw, 1.75rem); }
.step:nth-child(2) { margin-top: clamp(1rem, 2.6vw, 2.6rem); }
.step:nth-child(3) { margin-top: clamp(2rem, 5.2vw, 5.2rem); }
.step:nth-child(4) { margin-top: clamp(3rem, 7.8vw, 7.8rem); }
.step__num {
  font-family: var(--font-display); font-size: var(--fs-numeral);
  line-height: 1; letter-spacing: -.03em; color: var(--ink);
  transition: transform var(--dur-media) var(--ease), color var(--dur-media) var(--ease);
}
.step__title { margin: clamp(1.25rem, 2.4vw, 2rem) 0 .85rem; }
.step__copy { color: var(--ink-70); font-size: var(--fs-body); max-width: 34ch; }
.step:hover .step__num { transform: translateY(-6px); color: var(--brass); }

/* --- 8e. SHOWCASE -------------------------------------------------------- */
.showcase__grid { row-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.showcase__head { grid-column: 1 / span 5; }
.showcase__head .h2 { margin-block: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem); }
.showcase__hero-fig { grid-column: 1 / span 8; --ratio: 3 / 2; }
.showcase__tall {
  grid-column: 9 / -1; --ratio: 3 / 4;
  margin-top: clamp(2rem, 8vw, 8rem);
  margin-right: calc(var(--gutter) * -1);
}
.showcase__detail { grid-column: 1 / span 3; --ratio: 1 / 1; }
.showcase__note {
  grid-column: 5 / span 4; align-self: end; padding-bottom: .5rem;
  color: var(--ink-70); font-size: var(--fs-body);
}

/* --- 8f. BRAND MOMENT ---------------------------------------------------- */
.moment { position: relative; overflow: hidden; }
.moment__grid { align-items: center; row-gap: clamp(2.5rem, 5vw, 4rem); }
.moment__text { grid-column: 1 / span 7; }
.moment__text .eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.moment__text .statement { color: var(--ivory); }
.moment__text .statement em { font-style: italic; color: var(--brass); }
.moment__meta {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: var(--rule-ivory);
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ivory-60);
}
.moment__figure { grid-column: 9 / -1; --ratio: 3 / 4; }

/* --- 8g. PROOF ----------------------------------------------------------- */
.proof__grid { row-gap: clamp(2.5rem, 5vw, 4rem); }
.proof__intro { grid-column: 1 / span 4; }
.proof__numbers { grid-column: 1 / span 4; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.proof__number .value { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; letter-spacing: -.025em; }
.proof__number .label { margin-top: .65rem; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-65); }
.hairline-list {
  grid-column: 6 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: var(--rule);   /* closes the list even when the last row is short */
}
.hairline-list li {
  border-top: var(--rule); padding: clamp(1.1rem, 2vw, 1.6rem) 1rem clamp(1.1rem, 2vw, 1.6rem) 0;
  font-size: var(--fs-small); color: var(--ink-70);
  transition: color var(--dur-ui) var(--ease);
}
.hairline-list li:hover { color: var(--ink); }

/* --- 8h. FAQ ------------------------------------------------------------- */
.faq__grid { row-gap: clamp(2rem, 4vw, 3rem); }
.faq__head { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / -1; }
.faq__item { border-top: var(--rule); }
.faq__item:last-child { border-bottom: var(--rule); }
.faq__q {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  text-align: left;
  font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.012em;
  transition: color var(--dur-ui) var(--ease);
}
.faq__q:hover { color: var(--brass-text); }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; translate: 0 -2px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: transform 560ms var(--ease), opacity 400ms var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
[aria-expanded="true"] .faq__icon::before { transform: rotate(180deg); }
[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); opacity: 0; }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--ease); }
.faq__panel > div { overflow: hidden; }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__answer { padding-bottom: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink-70); max-width: 62ch; }

/* --- 8i. FINAL CTA ------------------------------------------------------- */
.final { position: relative; }
.final__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: end; }
.final__text { grid-column: 1 / span 7; }
.final__text .eyebrow { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.final__text .display { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.final__aside { grid-column: 9 / -1; padding-bottom: .5rem; }
.final__aside dl { display: grid; gap: 1.4rem; }
.final__aside dt { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-65); margin-bottom: .35rem; }
.final__aside dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); }
.final__band { margin-top: clamp(3rem, 6vw, 5.5rem); --ratio: 21 / 9; }

/* --- 9. FOOTER ----------------------------------------------------------- */
.site-foot { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 3vw, 3rem); }
.site-foot__grid { row-gap: clamp(2.5rem, 5vw, 4rem); }
.site-foot__brand { grid-column: 1 / span 4; }
.site-foot__brand .wordmark__sub { color: var(--ivory-60); }
.site-foot__statement {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; color: var(--ivory);
  max-width: 24ch;
}
.foot-col { grid-column: span 2; }
.foot-col:nth-of-type(2) { grid-column: 5 / span 2; }
.foot-col__title {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass-text-dark); margin-bottom: 1.35rem;
}
.foot-col li + li { margin-top: .7rem; }
.foot-col a, .foot-col span {
  font-size: var(--fs-small); color: var(--ivory-72);
  overflow-wrap: anywhere;              /* a long address can never overflow its column */
  transition: color var(--dur-ui) var(--ease);
}
.foot-col a:hover { color: var(--ivory); }
.site-foot__bottom {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: var(--rule-ivory);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ivory-60);
}

/* --- 10. RESPONSIVE ------------------------------------------------------
   Mobile is designed, not shrunk: ratios change, offsets collapse,
   and the type scale stays dramatic.
   ------------------------------------------------------------------------ */
@media (max-width: 1300px) {
  .story__statement { grid-column: 1 / span 7; }
  .story__copy { grid-column: 8 / -1; }
  .story__figure { grid-column: 2 / span 9; }
  .showcase__head { grid-column: 1 / span 6; }
  .faq__head { grid-column: 1 / span 4; }
  .faq__list { grid-column: 5 / -1; }
  .hairline-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
  .hero__intro { grid-column: 1 / span 7; }
  .hero__lead { grid-column: 8 / -1; }

  /* The overlay menu needs JavaScript to open, so the swap only happens once
     app.js has run. Without it the primary nav stays in the page and wraps.
     Raised from 1080 to 1150 when "Full Service" joined the nav: seven items
     still fit at 1081, but only just, and the brand lockup wrapped to three
     lines to make room. */
  .js .nav { display: none; }
  .js .nav-toggle { display: inline-flex; }
  html:not(.js) .site-head { position: static; }
  html:not(.js) .site-head__inner { flex-wrap: wrap; padding-block: .9rem; min-height: 0; }
  html:not(.js) .nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: .5rem 1.1rem; padding-top: .75rem; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .menu { display: none; }
  html:not(.js) .hero { padding-top: clamp(2rem, 6vw, 3.5rem); }
  html:not(.js) .crumbs-bar { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
  .moment__text { grid-column: 1 / span 8; }
  .moment__figure { grid-column: 9 / -1; --ratio: 2 / 3; }
  .final__text { grid-column: 1 / span 8; }
  .final__aside { grid-column: 9 / -1; }
}

@media (max-width: 860px) {
  .hero { padding-top: calc(var(--head-h) + clamp(1.75rem, 6vw, 3rem)); }
  .hero__intro { grid-column: 1 / -1; grid-row: auto; }
  .hero__lead {
    grid-column: 1 / -1; grid-row: auto;
    margin-inline: calc(var(--gutter) * -1);
    --ratio: 4 / 3;
  }


  .planning__head .h2, .planning__head .body-copy { grid-column: 1 / -1; }
  .panels { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); }
  .panel:nth-child(even) { margin-top: 0; }
  .panel--tall, .panel--wide { --ratio: 4 / 3; }
  .panel:nth-child(odd) { --ratio: 5 / 6; }

  .story__statement, .story__copy { grid-column: 1 / -1; grid-row: auto; }
  .story__copy { padding-top: 0; }
  .story__figure { grid-column: 1 / -1; grid-row: auto; margin-top: 0; --ratio: 4 / 3; }
  .story__stat { grid-column: 1 / -1; grid-row: auto; margin-top: 0; display: flex; align-items: baseline; gap: 1rem; }
  .story__stat .label { margin-top: 0; }

  .steps { grid-template-columns: 1fr; row-gap: clamp(2rem, 6vw, 3rem); }
  .step { margin-top: 0 !important; }
  .step__copy { max-width: none; }

  .showcase__head { grid-column: 1 / -1; }
  .showcase__hero-fig { grid-column: 1 / -1; --ratio: 4 / 3; }
  .showcase__tall { grid-column: 1 / span 7; margin-top: 0; margin-right: 0; }
  .showcase__detail { grid-column: 8 / -1; align-self: end; }
  .showcase__note { grid-column: 1 / -1; }

  .moment__text, .moment__figure { grid-column: 1 / -1; }
  .moment__figure { --ratio: 4 / 3; }

  .proof__intro, .proof__numbers, .hairline-list { grid-column: 1 / -1; }
  .proof__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .faq__head, .faq__list { grid-column: 1 / -1; }

  .final__text, .final__aside { grid-column: 1 / -1; }
  .final__aside dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final__band { --ratio: 4 / 3; }

  .site-foot__brand { grid-column: 1 / -1; }
  .foot-col { grid-column: span 4; }
  .foot-col:nth-of-type(2) { grid-column: span 4; }
}

@media (max-width: 560px) {
  :root { --tr-display: -.022em; }
  .showcase__tall { grid-column: 1 / -1; --ratio: 4 / 5; }
  .showcase__detail { grid-column: 1 / span 7; }
  .proof__numbers { grid-template-columns: 1fr; }
  .hairline-list { grid-template-columns: 1fr; }
  .final__aside dl { grid-template-columns: 1fr; }
  .foot-col, .foot-col:nth-of-type(2) { grid-column: span 6; }
  .btn { width: 100%; justify-content: space-between; }
  .hero__caption { flex-direction: column; align-items: flex-start; gap: .85rem; }
}

/* =============================================================================
   11. EXTENDED COMPONENTS — added for the Bellevue site architecture.
   Same tokens, same easing, same grid. Nothing here overrides section 1–10.
   ========================================================================== */

/* --- Editorial feature split (corporate, wedding) ------------------------ */
.feature__grid { row-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.feature__figure { grid-column: 1 / span 6; grid-row: 1; --ratio: 4 / 5; }
.feature__body { grid-column: 8 / -1; grid-row: 1; }
.feature--reverse .feature__figure { grid-column: 7 / -1; }
.feature--reverse .feature__body { grid-column: 1 / span 5; }
.feature__body .eyebrow { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }
.feature__body .h2 { margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); }
.feature__body .body-copy + .btn-row,
.feature__body .use-list + .btn-row { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

/* Use-case list: hairline rows, no bullets, no cards */
.use-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: var(--rule); }
.use-list li {
  border-bottom: var(--rule);
  padding: .85rem 0;
  display: flex; align-items: baseline; gap: 1rem;
  font-size: var(--fs-body); color: var(--ink-70);
}
.use-list li::before {
  content: ""; flex: none; width: 1.1rem; height: 1px; background: var(--brass-40);
  translate: 0 -.35em;
}

/* --- Tag row (wedding contexts, dietary) -------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: .6rem .5rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.tag-row li {
  border: 1px solid var(--ink-12);
  padding: .55rem 1rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-70);
}

/* --- Service options: three hairline columns, not cards ----------------- */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.option {
  border-top: 1px solid var(--ink);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-right: var(--col-gap);
}
.option__label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass-text); margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.option__title { margin-bottom: .85rem; }
.option__copy { color: var(--ink-70); font-size: var(--fs-body); max-width: 34ch; }
.option__meta {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65);
}

/* --- Dish list (signatures) --------------------------------------------- */
.dish-list {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: var(--col-gap);
  border-top: var(--rule);
}
.dish-list li {
  border-bottom: var(--rule);
  padding: .8rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--ink);
}

/* --- Service area -------------------------------------------------------- */
.area__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.area__intro { grid-column: 1 / span 5; }
.area__list { grid-column: 7 / -1; }
.area__note { grid-column: 7 / -1; margin-top: 1.25rem; font-size: var(--fs-small); color: var(--ink-65); }

/* --- Footer service-area line ------------------------------------------- */
.site-foot__area {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: var(--rule-ivory);
  font-size: var(--fs-small);
  color: var(--ivory-72);
}
.site-foot__area-label {
  display: block; margin-bottom: .55rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass-text-dark);
}

/* --- Breadcrumbs (interior pages) ---------------------------------------- */
.crumbs-bar { padding-top: calc(var(--head-h) + clamp(1.5rem, 3vw, 2.5rem)); }
.crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65);
}
.crumbs a { color: var(--ink-65); text-decoration: none; border-bottom: 1px solid var(--ink-12); }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: .75rem; color: var(--ink-40); }
.crumbs li { display: flex; align-items: baseline; }

/* --- In-development placeholder pages ------------------------------------ */
.stub { min-height: 60vh; display: grid; align-content: center; padding-top: clamp(2rem, 4vw, 3.5rem); }
.stub .h2 { margin-block: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem); }
.stub__links { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- Responsive for the extended components ------------------------------ */
@media (max-width: 1080px) {
  .feature__figure { grid-column: 1 / span 6; }
  .feature__body { grid-column: 7 / -1; }
  .feature--reverse .feature__figure { grid-column: 7 / -1; }
  .feature--reverse .feature__body { grid-column: 1 / span 6; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); }
  .step:nth-child(n) { margin-top: 0; }
  .step:nth-child(2), .step:nth-child(4) { margin-top: clamp(1rem, 3vw, 3rem); }
  .area__intro { grid-column: 1 / span 6; }
  .area__list, .area__note { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .feature__figure, .feature__body,
  .feature--reverse .feature__figure, .feature--reverse .feature__body { grid-column: 1 / -1; }
  .feature__figure { grid-row: auto; --ratio: 4 / 3; }
  .feature__body { grid-row: auto; }
  .options { grid-template-columns: 1fr; row-gap: clamp(2rem, 5vw, 2.75rem); }
  .option { padding-right: 0; }
  .area__intro { grid-column: 1 / -1; }
  .crumbs-bar { padding-top: calc(var(--head-h) + 1.5rem); }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(n) { margin-top: 0; }
  .dish-list { grid-template-columns: 1fr; }
}

/* =============================================================================
   12. CONDENSED HOMEPAGE COMPONENTS
   Added for the shortened architecture. Same tokens, same easing, same grid.
   ========================================================================== */

/* --- Service paths: four typographic rows, one supporting photograph ------ */
.paths__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.paths__head { grid-column: 1 / span 4; }
.paths__head .h2 { margin-top: clamp(1rem, 2vw, 1.5rem); }
.paths__list { grid-column: 6 / -1; border-top: 1px solid var(--ink); }

.path {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1.15rem, 2.2vw, 1.75rem) 0;
  border-bottom: var(--rule);
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease);
}
.path__index {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  color: var(--brass-text);
}
.path__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.12; letter-spacing: -.018em; color: var(--ink);
  transition: transform var(--dur-ui) var(--ease);
}
.path__copy {
  grid-column: 2 / 3; margin-top: .4rem;
  font-size: var(--fs-body); color: var(--ink-70); max-width: 46ch;
}
.path__arrow { color: var(--ink-40); transition: transform var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.path:hover .path__title, .path:focus-visible .path__title { transform: translateX(6px); }
.path:hover .path__arrow, .path:focus-visible .path__arrow { transform: translateX(6px); color: var(--brass); }

/* --- Two-option split (lunchbox / buffet) -------------------------------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.duo__item { border-top: 1px solid var(--ink); padding-top: clamp(1rem, 1.8vw, 1.4rem); }
.duo__label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass-text); margin-bottom: .75rem;
}
.duo__title { margin-bottom: .6rem; }
.duo__copy { font-size: var(--fs-body); color: var(--ink-70); }
.duo__meta {
  margin-top: .85rem; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--ink-65);
}
.on-dark .duo__item { border-top-color: var(--ivory); }
.on-dark .duo__label { color: var(--brass-text-dark); }

/* --- Compact food showcase ----------------------------------------------- */
.menu-grid { row-gap: clamp(1.5rem, 3vw, 2.25rem); align-items: end; }
.menu-grid__head { grid-column: 1 / span 4; grid-row: 1; align-self: start; }
.menu-grid__wide { grid-column: 6 / -1; grid-row: 1 / span 2; --ratio: 3 / 2; }
.menu-grid__detail { grid-column: 1 / span 4; grid-row: 2; --ratio: 3 / 2; }
.menu-grid__list { grid-column: 6 / -1; grid-row: 3; }
.menu-grid__cta { grid-column: 1 / span 4; grid-row: 3; align-self: start; }

/* --- How it works + service area, combined ------------------------------- */
.works__grid { row-gap: clamp(2.5rem, 4.5vw, 3.5rem); }
.works__head { grid-column: 1 / -1; }
.works__steps { grid-column: 1 / span 7; }
.works__area { grid-column: 9 / -1; }
.works__area h3 {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass-text); margin-bottom: 1.1rem;
}
.area-cities { border-top: var(--rule); }
.area-cities li {
  border-bottom: var(--rule); padding: .55rem 0;
  font-size: var(--fs-body); color: var(--ink-70);
}
.area-cities li:last-child { color: var(--ink-65); }

/* Steps get a lighter treatment inside the combined section */
.works__steps .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.75rem, 3vw, 2.5rem); }
.works__steps .step { margin-top: 0 !important; }
.works__steps .step__num { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
.works__steps .step__title { margin: clamp(.75rem, 1.4vw, 1.1rem) 0 .5rem; }

/* --- Trust + FAQ, combined ----------------------------------------------- */
.trust__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.trust__intro { grid-column: 1 / span 4; }
.trust__intro .h3 { margin: clamp(1rem, 2vw, 1.4rem) 0 1rem; }
.trust__faq { grid-column: 6 / -1; }

/* --- Closing CTA on emerald ---------------------------------------------- */
.final--dark .final__grid { align-items: end; }
.final--dark .display em { color: var(--brass); }
.final__aside--plain { grid-column: 9 / -1; padding-bottom: .35rem; }
.final__aside--plain p {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ivory-60); line-height: 2;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .paths__head { grid-column: 1 / -1; }
  .paths__list { grid-column: 1 / -1; }
  .works__steps { grid-column: 1 / span 6; }
  .works__area { grid-column: 8 / -1; }
  .trust__intro { grid-column: 1 / span 4; }
  .trust__faq { grid-column: 5 / -1; }
  .menu-grid__head { grid-column: 1 / span 5; }
  .menu-grid__wide { grid-column: 6 / -1; }
  .menu-grid__detail { grid-column: 1 / span 5; }
  .menu-grid__list { grid-column: 6 / -1; }
  .menu-grid__cta { grid-column: 1 / span 5; }
}

@media (max-width: 860px) {
  .path { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .duo { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 4vw, 2rem); }
  .works__steps, .works__area { grid-column: 1 / -1; }
  .works__steps .steps { grid-template-columns: 1fr; }
  .trust__intro, .trust__faq { grid-column: 1 / -1; }
  .menu-grid__head, .menu-grid__wide, .menu-grid__detail,
  .menu-grid__list, .menu-grid__cta { grid-column: 1 / -1; grid-row: auto; }
  .menu-grid__wide { --ratio: 3 / 2; }
  .menu-grid__detail { --ratio: 4 / 3; }
  .final__aside--plain { grid-column: 1 / -1; }
}

/* =============================================================================
   13. INTERIOR PAGE COMPONENTS
   Shared by every route so the site reads as one art direction. Same tokens,
   same easing, same 12-column grid as the homepage.
   ========================================================================== */

/* --- Page hero (every interior page opens with this) --------------------- */
.page-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: var(--pad-section); }
.page-hero__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: end; }
.page-hero__text { grid-column: 1 / span 7; }
.page-hero__text .eyebrow { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }
.page-hero__title { margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem); }
.page-hero__figure { grid-column: 9 / -1; --ratio: 4 / 5; }
/* A --wide hero has no figure, so spanning only 8 of 12 columns left an
   obvious empty block to its right. Span the grid and cap the measure instead. */
.page-hero--wide .page-hero__text { grid-column: 1 / -1; max-width: 62ch; }
.page-hero .btn-row { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* --- Generic two-column content block ------------------------------------ */
.split__grid { row-gap: clamp(1.75rem, 3.5vw, 2.75rem); align-items: start; }
.split__head { grid-column: 1 / span 4; }
.split__head .h2 { margin-top: clamp(.75rem, 1.6vw, 1.25rem); }
.split__body { grid-column: 6 / -1; }
.split__body > * + * { margin-top: 1.1rem; }

/* --- Format / package cards (2x2, hairline, never rounded) --------------- */
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--col-gap); }
.format { border-top: 1px solid var(--ink); padding-top: clamp(1rem, 1.8vw, 1.4rem); }
.format__label { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--brass-text); margin-bottom: .8rem; }
.format__title { margin-bottom: .7rem; }
.format__copy { color: var(--ink-70); font-size: var(--fs-body); }
.format__list { margin-top: 1rem; border-top: var(--rule); }
.format__list li { border-bottom: var(--rule); padding: .55rem 0; font-size: var(--fs-small); color: var(--ink-70); }
.format__price { margin-top: 1rem; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-65); }

/* --- Menu page ----------------------------------------------------------- */
.menu-cat { border-top: 1px solid var(--ink); padding-top: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.menu-cat__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 1.5rem; }
.menu-cat__title { font-size: var(--fs-h3); }
.menu-cat__note { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-65); }
.menu-cat__body { margin-top: clamp(.85rem, 1.6vw, 1.25rem); color: var(--ink-70); font-size: var(--fs-body); max-width: 62ch; }
.menu-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .4rem 1.5rem; margin-top: 1.25rem; }
.menu-index a {
  display: block; padding: .5rem 0; border-bottom: var(--rule);
  font-size: var(--fs-small); color: var(--ink-70); text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.menu-index a:hover { color: var(--ink); }

/* --- Development placeholder marker (never used on indexable content) ---- */
.dev-note {
  border: 1px dashed var(--ink-40);
  padding: clamp(.9rem, 2vw, 1.25rem);
  font-size: var(--fs-small); color: var(--ink-65);
  max-width: 68ch;
}
.dev-note strong { color: var(--ink); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-eyebrow); display: block; margin-bottom: .4rem; }

/* --- Gallery ------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
.gallery__item:nth-child(6n+1) { grid-column: span 7; --ratio: 3 / 2; }
.gallery__item:nth-child(6n+2) { grid-column: span 5; --ratio: 4 / 5; }
.gallery__item:nth-child(6n+3) { grid-column: span 4; --ratio: 1 / 1; }
.gallery__item:nth-child(6n+4) { grid-column: span 8; --ratio: 16 / 9; }
.gallery__item:nth-child(6n+5) { grid-column: span 5; --ratio: 4 / 3; }
.gallery__item:nth-child(6n+6) { grid-column: span 7; --ratio: 3 / 2; }

/* --- Form ---------------------------------------------------------------- */
.form { display: grid; gap: clamp(1.1rem, 2vw, 1.5rem); }
.form__row { display: grid; gap: clamp(1.1rem, 2vw, 1.5rem); align-items: start; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; align-content: start; }
.field > label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65);
}
.field .req { color: var(--brass-text); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .95rem;
  border: 1px solid var(--ink-12); border-radius: 0;
  background: var(--white); color: var(--ink);
  font: 400 var(--fs-body)/1.4 var(--font-sans);
  transition: border-color var(--dur-ui) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--emerald); outline-offset: 2px; }
.field__hint { font-size: var(--fs-small); color: var(--ink-65); }
.field__error { font-size: var(--fs-small); color: #A32B12; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #A32B12; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: 1rem 1.15rem; border: 1px solid var(--ink-12); font-size: var(--fs-body); }
.form__status[data-state="error"] { border-color: #A32B12; color: #A32B12; }
.form__status[hidden] { display: none; }
.form__aside { grid-column: 9 / -1; }
.form__aside dl { display: grid; gap: 1.25rem; border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.form__aside dt { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-65); margin-bottom: .3rem; }
.form__aside dd { margin: 0; font-size: var(--fs-body); color: var(--ink-70); }
.form-wrap { grid-column: 1 / span 7; }

/* --- Prose (About) ------------------------------------------------------- */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.15em; }
.prose h2 { margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: .9rem; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .page-hero__text { grid-column: 1 / span 7; }
  .page-hero__figure { grid-column: 8 / -1; }
  .split__head { grid-column: 1 / span 5; }
  .split__body { grid-column: 6 / -1; }
  .form-wrap { grid-column: 1 / span 7; }
  .form__aside { grid-column: 8 / -1; }
}

@media (max-width: 860px) {
  .page-hero__text, .page-hero__figure { grid-column: 1 / -1; }
  .page-hero__figure { --ratio: 4 / 3; }
  .split__head, .split__body { grid-column: 1 / -1; }
  .formats { grid-template-columns: 1fr; }
  .form-wrap, .form__aside { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item:nth-child(n) { grid-column: span 1; --ratio: 4 / 5; }
  .gallery__item:nth-child(6n+1), .gallery__item:nth-child(6n+4) { grid-column: span 2; --ratio: 3 / 2; }
}

@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item:nth-child(n) { grid-column: span 1; --ratio: 4 / 3; }
}

/* Gallery captions — context under each photograph */
.gallery__item { position: relative; }
.gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(transparent, rgba(4, 34, 28, .82) 55%);
  color: var(--ivory);
  font-size: var(--fs-small); line-height: 1.45;
}

/* Menu category photo sits alongside the dish list on wider screens */
@media (min-width: 861px) {
  .menu-cat { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; column-gap: var(--col-gap); }
  .menu-cat__head, .menu-cat__body, .menu-cat .dish-list { grid-column: 1; }
  .menu-cat__photo { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: .25rem; }
}
.menu-cat__photo { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* Full-width image band closing a section.
   These are inserted inside .grid12 wrappers, so they must be told to span the
   whole grid — otherwise they collapse to a single ~78px column. */
.section-band { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 3.25rem); }
.section-band__cap { grid-column: 1 / -1; }
.pair { grid-column: 1 / -1; }
.section-band figcaption {
  margin-top: .85rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65);
}
.on-dark .section-band figcaption { color: var(--ivory-60); }
/* Paired images inside a split body */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }

/* =============================================================================
   14. TRAYS — price table, estimate builder, collapsible menu
   ========================================================================== */

/* --- price table ---------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.price-table th, .price-table td {
  padding: .9rem .75rem; text-align: left; border-bottom: var(--rule);
  font-size: var(--fs-small); vertical-align: baseline;
}
.price-table thead th {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65); font-weight: 500; border-bottom-color: var(--ink);
}
.price-table .th-sub {
  display: block; margin-top: .25rem; text-transform: none; letter-spacing: 0;
  font-size: var(--fs-small); color: var(--ink-65);
}
.price-table tbody th { font-weight: 500; }
.price-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }

/* --- estimate builder ----------------------------------------------------- */
.calc { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 1200px) { .calc { grid-template-columns: minmax(0, 1fr) 21rem; } }

.calc__build { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.calc__row {
  display: grid; gap: .9rem var(--col-gap); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
/* The picker never goes wider than three selects. A five-up row looks tidier in
   a mockup, but once the estimate panel is beside it each select is too narrow
   for a dish name like "Chicken Tikka Masala", and a native <select> clips
   rather than wrapping. Three up, then quantity and the button beneath. */
.calc__build > .calc__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Category labels are the longest text in the picker ("Paneer & Premium
   Vegetarian"), and a native <select> clips rather than wrapping, so that one
   always takes a row of its own. Dish names do the same on a phone. */
.field--cat { grid-column: 1 / -1; }
.field--dish { grid-column: 1 / -1; }
@media (min-width: 640px) { .field--dish { grid-column: auto; } }
@media (min-width: 640px) {
  .calc__build > .calc__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field--qty input { text-align: center; }
.field--action { align-self: start; grid-column: 1 / -1; }
.field--action .field__spacer { display: none; }
.field--action .btn { width: 100%; justify-content: center; }
@media (min-width: 640px) {
  .field--qty { max-width: 7rem; }
  .field--action { grid-column: span 2; }
  .field--action .btn { width: auto; }
}

.calc__items { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.calc__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 2rem;
  align-items: baseline; gap: .75rem;
  padding: .8rem 0; border-bottom: var(--rule);
}
.calc__item-name { font-size: var(--fs-small); }
.calc__item-meta { display: block; margin-top: .2rem; color: var(--ink-65); font-size: var(--fs-small); }
.calc__item-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__remove {
  justify-self: end; width: 1.75rem; height: 1.75rem; padding: 0;
  border: 1px solid var(--ink-12); background: transparent; color: var(--ink-65);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.calc__remove:hover { border-color: var(--ink); color: var(--ink); }
.calc__empty {
  padding: .9rem 0; border-bottom: var(--rule);
  color: var(--ink-65); font-size: var(--fs-small);
}

.calc__opts { margin: 0; padding: 0; border: 0; }
.calc__opts legend {
  padding: 0 0 .9rem; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--ink-65);
}

.calc__total {
  padding: clamp(1.5rem, 3vw, 2rem); background: var(--white); border: var(--rule);
  position: sticky; top: calc(var(--head-h) + 1.25rem);
}
.surface-parchment .calc__total { background: var(--white); }
.calc__lines { margin: 1.25rem 0 0; }
.calc__line {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; font-size: var(--fs-small);
}
.calc__line dt { color: var(--ink-65); }
.calc__line dd { margin: 0; font-variant-numeric: tabular-nums; }
.calc__grand {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ink);
}
.calc__grand span {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--ink-65);
}
.calc__grand strong {
  font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2rem)/1 var(--font-serif);
  font-variant-numeric: tabular-nums;
}
.calc__serves { margin-top: .5rem; font-size: var(--fs-small); color: var(--brass-text); min-height: 1.3em; }
@media (max-width: 1199px) { .calc__total { position: static; } }

/* --- collapsible tray menu ------------------------------------------------ */
.tray-cats { border-top: 1px solid var(--ink); }
.tray-cat { border-bottom: var(--rule); }
.tray-cat > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.15rem 2rem 1.15rem 0; cursor: pointer; list-style: none;
  position: relative;
}
.tray-cat > summary::-webkit-details-marker { display: none; }
.tray-cat > summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%;
  width: .55rem; height: .55rem; margin-top: -.42rem;
  border-right: 1px solid var(--ink-65); border-bottom: 1px solid var(--ink-65);
  transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease);
}
.tray-cat[open] > summary::after { transform: rotate(-135deg); margin-top: -.14rem; }
.tray-cat > summary:hover .tray-cat__name { color: var(--emerald); }
.tray-cat__name {
  font: 400 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.2 var(--font-serif);
  transition: color var(--dur-ui) var(--ease);
}
.tray-cat__price { font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--ink-65); white-space: nowrap; }
.tray-cat__body { padding: 0 0 1.5rem; }
.tray-cat__meta { font-size: var(--fs-small); color: var(--ink-65); margin-bottom: 1rem; }

/* =============================================================================
   15. BRAND MARK
   The supplied logo is white line art. logo-white.png is for ink and emerald
   surfaces; logo-emerald.png is for ivory and parchment. Never put the white
   one on a light background, it disappears.
   ========================================================================== */
.site-foot__mark {
  display: block; width: auto; height: clamp(3.5rem, 6vw, 4.75rem);
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}
.brand-mark {
  display: block; width: auto; height: clamp(5.5rem, 10vw, 8.75rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.brand-mark--center { margin-inline: auto; }