/* =============================================================================
   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 h2 {
  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. */
  .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; }

/* --- 11. KENT: phone in the header, five-field quote section --------------
   Kent buyers call as often as they type, so the number is a tap target on
   every screen, and every money page carries the short form inline.
   ------------------------------------------------------------------------ */
.head-phone {
  white-space: nowrap;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .08em;
  padding: .5rem 0;
  color: var(--ink);
  border-bottom: 1px solid var(--brass-40);
  transition: border-color var(--dur-ui) var(--ease);
}
.head-phone:hover { border-bottom-color: var(--brass); }
.head-phone__call { display: none; }
body.is-locked .head-phone { color: var(--ivory); }

/* Kent: the header also carries the phone number, so the overlay menu takes
   over at 1280 rather than 1150. Measured: wordmark 200 + five links and the
   CTA ~750 + phone 96 + gaps and gutters needs ~1265px. Nav is capped at five
   links for the same reason ("Full Service" lives on the homepage and footer). */
@media (max-width: 1280px) {
  .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); }
  .js .head-phone { margin-left: auto; }
  .js .nav-toggle { margin-left: 0; }
  .head-phone__call { display: inline; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); }
}
@media (max-width: 560px) {
  /* Too narrow for the number beside the wordmark: a square "Call" button
     that dials it. The number itself is in the menu and on the page. */
  .head-phone {
    border: 1px solid var(--ink); padding: .6rem .8rem;
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .head-phone__num { display: none; }
  body.is-locked .head-phone { border-color: var(--ivory-60); }
}

.quick__grid { row-gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.quick__text { grid-column: 1 / span 5; }
.quick__text .eyebrow { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.quick__text .h2 { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.quick__phone {
  display: inline-block; margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1;
  border-bottom: 1px solid var(--brass);
}
.quick__phone small {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-sans); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-65);
}
.quick__form { grid-column: 7 / -1; }
.quick__submit { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.surface-parchment .field input, .surface-parchment .field select { background: var(--white); }

@media (max-width: 1080px) {
  .quick__text { grid-column: 1 / span 5; }
  .quick__form { grid-column: 6 / -1; }
}
@media (max-width: 860px) {
  .quick__text, .quick__form { grid-column: 1 / -1; }
}

/* Short bullet list for Kent pages: one line per item, hairline between. */
.ticks { display: grid; gap: 0; border-top: var(--rule); max-width: 46rem; }
.ticks li {
  position: relative; padding: .95rem 0 .95rem 1.6rem; border-bottom: var(--rule);
  font-size: var(--fs-lede); line-height: 1.45;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: .7rem; height: 1px; background: var(--brass);
}
.ticks strong { font-weight: 600; }

/* City names as a plain, scannable row. */
.cities { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: clamp(1rem, 2vw, 1.5rem); }
.cities li { font-family: var(--font-display); font-size: var(--fs-h4); }
.cities a { border-bottom: 1px solid var(--brass-40); }
.cities a:hover { border-bottom-color: var(--brass); }