@charset "UTF-8";
/* ===========================================================================
   OJAS CAFÉ — style.css
   Design tokens, resets, type scale, core components, and the page sections
   built so far (sticky header, hero).

   Reference: CLAUDE.md. The printed menu card is the design system —
   cream page, orange headings, dotted leaders, round corners.

   Contents
   --------
   01. Tokens            08. Diet markers (veg / non-veg)
   02. Self-hosted fonts 09. Menu item rows + category headings
   03. Reset & base      10. Feature panels & bands
   04. Typography        11. Wavy frame + bite-mark texture
   05. Layout            12. Forms (search)
   06. Buttons           13. Motion
   07. Cards             14. Accessibility utilities

   Page sections
   -------------
   15. Sticky header + nav      20. Home page blocks
   16. Hero                     21. Gallery + lightbox
   17. Menu                     22. Visit — map, hours, contact
   18. Announcement popup/strip 23. Footer
   19. Mobile call bar          24. Page headers (inner pages)
   =========================================================================== */


/* ===========================================================================
   01. TOKENS
   The ONLY place a raw colour value may appear. Never hardcode a hex below.
   =========================================================================== */
:root {
  /* --- Brand palette (LOCKED — CLAUDE.md §4) ---------------------------- */
  --c-orange:      #DF3805;   /* headings, CTAs, accents, the bite mark      */
  --c-brown:       #733108;   /* item names, body text, dark bands           */
  --c-cream:       #F6EFE4;   /* default page background, all menu surfaces  */
  --c-ink:         #2B1508;   /* max-contrast body text                      */
  --c-muted:       #8A6A50;   /* leader lines, captions, descriptions        */
  --c-veg:         #1E8E3E;   /* veg marker only                             */
  --c-nonveg:      #DF3805;   /* non-veg marker only                         */

  /* Tint channels, for translucent hairlines and shadows only. */
  --t-ink:         43 21 8;
  --t-cream:       246 239 228;

  /* --- Semantic surfaces ------------------------------------------------ */
  --c-bg:          var(--c-cream);
  --c-surface:     var(--c-cream);
  --c-text:        var(--c-ink);
  --c-text-soft:   var(--c-muted);
  --c-heading:     var(--c-orange);
  --c-item:        var(--c-brown);
  --c-line:        rgb(var(--t-ink) / .14);
  --c-line-strong: rgb(var(--t-ink) / .26);

  /* On an orange or brown band, text flips to cream. */
  --c-on-brand:      var(--c-cream);
  --c-on-brand-soft: rgb(var(--t-cream) / .78);
  --c-on-brand-line: rgb(var(--t-cream) / .28);

  /* --- Typography ------------------------------------------------------- */
  /* Two fonts only. Neither has a bold weight — never faux-bold anything. */
  --font-display: "Climate Crisis", Impact, "Arial Black", sans-serif;
  --font-body:    "Akaya Kanadaka", "Trebuchet MS", system-ui, sans-serif;

  /* Display — Climate Crisis, 32px floor, tight leading. Never a paragraph. */
  --fs-d1: clamp(2.5rem, 10.5vw, 5.5rem);   /*  40 → 88  hero               */
  --fs-d2: clamp(2rem,    7vw,   3.5rem);   /*  32 → 56  section heading    */
  --fs-d3: clamp(2rem,  5.5vw,   2.5rem);   /*  32 → 40  category heading   */

  /* Body — Akaya Kanadaka. It reads thin at 16px, so 18px is the floor. */
  --fs-lead: 1.25rem;      /* 20px  intro lines, big item names             */
  --fs-body: 1.125rem;     /* 18px  default                                 */
  --fs-sm:   1rem;         /* 16px  notes, captions — never long copy       */
  --fs-xs:   .875rem;      /* 14px  uppercase labels ONLY, with tracking    */

  --lh-display: 1.05;
  --lh-tight:   1.25;
  --lh-body:    1.7;

  /* Climate Crisis has very tight sidebearings — negative tracking makes
     adjacent letters collide. Zero is the floor. */
  --ls-display: 0;
  --ls-label:   .08em;     /* uppercase emphasis, per CLAUDE.md §4          */

  /* --- Spacing — 8pt grid ----------------------------------------------- */
  --sp-1: .25rem;   /*   4 */
  --sp-2: .5rem;    /*   8 */
  --sp-3: .75rem;   /*  12 */
  --sp-4: 1rem;     /*  16 */
  --sp-5: 1.5rem;   /*  24 */
  --sp-6: 2rem;     /*  32 */
  --sp-7: 3rem;     /*  48 */
  --sp-8: 4rem;     /*  64 */
  --sp-9: 6rem;     /*  96 */
  --sp-10: 8rem;    /* 128 */

  --section-y: var(--sp-6);
  --gutter:    var(--sp-4);

  /* --- Radii — the brand is round, not sharp ---------------------------- */
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* --- Elevation — warm shadows, never neutral grey --------------------- */
  --shadow-sm: 0 1px 2px  rgb(var(--t-ink) / .05), 0 2px 8px  rgb(var(--t-ink) / .05);
  --shadow-md: 0 2px 6px  rgb(var(--t-ink) / .06), 0 8px 24px rgb(var(--t-ink) / .08);
  --shadow-lg: 0 4px 12px rgb(var(--t-ink) / .07), 0 18px 44px rgb(var(--t-ink) / .12);

  /* --- Motion ----------------------------------------------------------- */
  --ease:   cubic-bezier(.25, .1, .25, 1);
  --dur-1:  160ms;
  --dur-2:  260ms;
  --dur-3:  420ms;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1120px;
  --measure:   62ch;        /* max line length for readable copy            */
  --tap:       44px;        /* minimum touch target                         */
  --nav-h:     64px;

  /* --- Generated assets ------------------------------------------------- */
  /* Wavy "torn" orange frame. If --c-orange changes, change %23DF3805 too. */
  --img-frame-wavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M8 30 Q8 8 30 8 q7.5 -4 15 0 q7.5 4 15 0 q7.5 -4 15 0 q7.5 4 15 0 Q112 8 112 30 q4 7.5 0 15 q-4 7.5 0 15 q4 7.5 0 15 q-4 7.5 0 15 Q112 112 90 112 q-7.5 4 -15 0 q-7.5 -4 -15 0 q-7.5 4 -15 0 q-7.5 -4 -15 0 Q8 112 8 90 q-4 -7.5 0 -15 q4 -7.5 0 -15 q-4 -7.5 0 -15 q4 -7.5 0 -15 Z' fill='none' stroke='%23DF3805' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Single wave, for the divider rule. Tiles seamlessly on the x axis. */
  --img-wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 6 q7.5 -4.5 15 0 q7.5 4.5 15 0 q7.5 -4.5 15 0 q7.5 4.5 15 0' fill='none' stroke='%23DF3805' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Bite mark, brown — low-opacity watermark for cream photo placeholders. */
  --img-bite-brown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='280 280 440 440'%3E%3Cpath d='M499.999 300C513.698 300 527.075 301.377 539.999 304.001C540 337.137 566.862 364 599.998 364C604.186 364 608.273 363.569 612.219 362.753C612.069 364.482 611.992 366.232 611.992 368C611.992 401.137 638.855 428 671.992 428C676.816 428 681.507 427.429 686.001 426.354C695.033 449.146 699.998 473.992 699.998 499.999C699.998 610.456 610.456 699.999 499.999 699.999C389.542 699.999 300 610.456 300 499.999C300 389.543 389.543 300 499.999 300ZM499.999 460C477.908 460 459.999 477.908 459.999 499.999C459.999 522.09 477.908 539.999 499.999 539.999C522.09 539.999 539.999 522.09 539.999 499.999C539.999 477.908 522.09 460 499.999 460Z' fill='%23733108'/%3E%3C/svg%3E");

  /* Bite mark, cream — low-opacity texture for orange/brown panels. */
  --img-bite-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='280 280 440 440'%3E%3Cpath d='M499.999 300C513.698 300 527.075 301.377 539.999 304.001C540 337.137 566.862 364 599.998 364C604.186 364 608.273 363.569 612.219 362.753C612.069 364.482 611.992 366.232 611.992 368C611.992 401.137 638.855 428 671.992 428C676.816 428 681.507 427.429 686.001 426.354C695.033 449.146 699.998 473.992 699.998 499.999C699.998 610.456 610.456 699.999 499.999 699.999C389.542 699.999 300 610.456 300 499.999C300 389.543 389.543 300 499.999 300ZM499.999 460C477.908 460 459.999 477.908 459.999 499.999C459.999 522.09 477.908 539.999 499.999 539.999C522.09 539.999 539.999 522.09 539.999 499.999C539.999 477.908 522.09 460 499.999 460Z' fill='%23F6EFE4'/%3E%3C/svg%3E");
}

@media (min-width: 48rem) {          /* 768px */
  :root {
    --fs-body:   1.1875rem;          /* 19px — the roomier end of 18–19     */
    --section-y: var(--sp-7);
    --gutter:    var(--sp-6);
    --nav-h:     72px;
  }
}

@media (min-width: 64rem) {          /* 1024px */
  :root { --section-y: var(--sp-8); }
}


/* ===========================================================================
   02. SELF-HOSTED FONT FALLBACK
   Google Fonts is the primary source (see the <link> tags in index.html).
   Drop the .woff2 files into ./assets/fonts/ and uncomment this block to make
   the site independent of Google — required if the café's audience is on a
   network that blocks it, or for guaranteed offline/file:// rendering.
   =========================================================================== */
/*
@font-face {
  font-family: "Climate Crisis";
  src: url("../fonts/climate-crisis.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Akaya Kanadaka";
  src: url("../fonts/akaya-kanadaka.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
*/


/* ===========================================================================
   03. RESET & BASE
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* The browser default for [hidden] is display:none, but any explicit display
   in our own rules beats it — which would leave a hidden lightbox sitting
   invisibly over the page, eating every click. Settle it once, here. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
}

body {
  min-height: 100svh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Neither brand font has a bold or italic cut. Never let the browser fake one. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--c-brown); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-orange); }

ul, ol { padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-6);
}

::selection { background: var(--c-orange); color: var(--c-cream); }


/* ===========================================================================
   04. TYPOGRAPHY
   Hierarchy comes from size, colour, case and letter-spacing — never weight.
   =========================================================================== */
.display,
h1, h2,
.t-d1, .t-d2, .t-d3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-heading);
  text-wrap: balance;
}

h1, .t-d1 { font-size: var(--fs-d1); }
h2, .t-d2 { font-size: var(--fs-d2); }
.t-d3     { font-size: var(--fs-d3); }

/* h3–h6 stay in the body font: Climate Crisis is illegible below 32px. */
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--c-item);
}
h3 { font-size: var(--fs-lead); }
h4 { font-size: var(--fs-body); }
h5, h6 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-text-soft);
}

p { max-width: var(--measure); }
p + p { margin-top: var(--sp-4); }

/* A paragraph is capped at 62ch for readability, but that box does not centre
   itself — so short centred text drifted left inside its own narrower box.
   Anywhere the text is centred, centre the box too. */
[style*="text-align: center"] > p,
.hero p, .hero__eyebrow, .hero__tags,
.instagram-panel p, .instagram-panel .t-label,
.menu-empty p, .ph-photo p { margin-inline: auto; }

.t-lead    { font-size: var(--fs-lead); color: var(--c-item); }
.t-body    { font-size: var(--fs-body); }
.t-sm      { font-size: var(--fs-sm);  color: var(--c-text-soft); line-height: 1.55; }
.t-note    { font-size: var(--fs-sm);  color: var(--c-text-soft); line-height: 1.5; }

/* Uppercase label — the only sanctioned "bold" substitute. */
.t-label {
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-text-soft);
}
.eyebrow { display: block; margin-bottom: var(--sp-3); }
/* Deliberately brown, not orange: orange on cream is 3.9:1 and only clears AA
   at 24px and up, which a 14px label never is. The uppercase and the tracking
   do the work instead. */
.eyebrow, .t-label--brand { color: var(--c-item); }

.t-orange { color: var(--c-orange); }
.t-brown  { color: var(--c-item); }
.t-muted  { color: var(--c-text-soft); }
.t-ink    { color: var(--c-text); }
.t-center { text-align: center; }

/* Tagline lockup — "Ojas. Take the Bite." Never reworded. */
.tagline {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-orange);
}


/* ===========================================================================
   05. LAYOUT
   =========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 46rem; }

.section { padding-block: var(--section-y); }

.stack > * + *      { margin-top: var(--sp-4); }
.stack-sm > * + *   { margin-top: var(--sp-2); }
.stack-lg > * + *   { margin-top: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) {
  .grid { gap: var(--sp-5); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Horizontal scroller for the highlights strip on phones. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Vertical padding is what stops the hover lift and its shadow being
     sliced off — a scroller clips both axes, not just the one it scrolls. */
  padding: var(--sp-3) var(--gutter) var(--sp-6);
  margin-inline: calc(var(--gutter) * -1);
  margin-block: calc(var(--sp-3) * -1) calc(var(--sp-6) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 48rem) { .rail { grid-auto-columns: 34%; } }


/* ===========================================================================
   06. BUTTONS
   Pill shaped, 44px minimum, one primary action per view.
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color     var(--dur-1) var(--ease),
    color            var(--dur-1) var(--ease),
    transform        var(--dur-1) var(--ease),
    box-shadow       var(--dur-2) var(--ease);
}
.btn:active { transform: scale(.97); }

/* Primary — the one loud action. */
.btn--primary {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-cream);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--c-brown);
  border-color: var(--c-brown);
  color: var(--c-cream);
  box-shadow: var(--shadow-md);
}

/* Secondary — orange outline, brown label. Orange text on cream is only
   3.9:1, so the label is brown and the orange lives in the border. */
.btn--secondary {
  background: transparent;
  border-color: var(--c-orange);
  color: var(--c-item);
}
.btn--secondary:hover {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-cream);
}

/* Ghost — tertiary, for "see all" style links. */
.btn--ghost {
  padding-inline: var(--sp-3);
  color: var(--c-item);
  border-color: transparent;
}
.btn--ghost:hover { color: var(--c-orange); background: rgb(var(--t-ink) / .05); }

/* On an orange or brown band. */
.btn--on-brand {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-item);
}
.btn--on-brand:hover { background: transparent; color: var(--c-cream); }

.btn--outline-on-brand {
  background: transparent;
  border-color: var(--c-on-brand-line);
  color: var(--c-cream);
}
.btn--outline-on-brand:hover { border-color: var(--c-cream); background: rgb(var(--t-cream) / .12); }

.btn--sm  { min-height: var(--tap); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--lg  { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-lead); }
.btn--block { display: flex; width: 100%; }

/* Filter chip / group tab. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-item);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease),
              border-color     var(--dur-1) var(--ease),
              color            var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--c-orange); }
.chip[aria-selected="true"],
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-cream);
}


/* ===========================================================================
   07. CARDS
   =========================================================================== */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.card--flat { box-shadow: none; }

/* A card is a surface, not a link label — the title carries the meaning. */
a.card { text-decoration: none; color: inherit; }

/* Only cards that link somewhere should lift. */
a.card:hover,
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card__title {
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  color: var(--c-item);
}
.card__meta { margin-top: var(--sp-2); }

/* Photo card — food and interior shots. */
.photo-card {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.photo-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-cream);
}
.photo-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.photo-card:hover .photo-card__media img { transform: scale(1.03); }
.photo-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* Photo placeholder — cream block, dish name in brand type, bite motif.
   NEVER a stock photo of a different dish (CLAUDE.md §8). */
.ph-photo {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  aspect-ratio: 4 / 5;
  padding: var(--sp-5);
  background: var(--c-cream);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  container-type: inline-size;
}
.ph-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img-bite-brown);
  background-size: 72px 72px;
  opacity: .045;
}
/* Climate Crisis has a 32px floor, which will not fit a narrow card — so the
   placeholder label starts in the body font and only switches to the display
   face once its own container is wide enough to carry it. */
.ph-photo__name {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-orange);
  text-align: center;
  overflow-wrap: break-word;
}
@container (min-width: 17rem) {
  .ph-photo__name {
    font-family: var(--font-display);
    font-size: var(--fs-d3);
    line-height: var(--lh-display);
    text-transform: none;
    letter-spacing: var(--ls-display);
    text-wrap: balance;
  }
}
.ph-photo__note {
  position: relative;
  margin-top: var(--sp-3);
  text-align: center;
}


/* ===========================================================================
   08. DIET MARKERS
   Veg = green circle in a square. Non-veg = red triangle in a square.
   Exactly as printed on the card. Always paired with visually-hidden text.
   =========================================================================== */
.diet {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.diet--veg    { color: var(--c-veg); }
.diet--nonveg { color: var(--c-nonveg); }

.diet::before { content: ""; display: block; }
.diet--veg::before {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.diet--nonveg::before {
  width: 0; height: 0;
  border-left:  4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}

.diet--lg { width: 20px; height: 20px; border-width: 2px; border-radius: 4px; }
.diet--lg.diet--veg::before { width: 10px; height: 10px; }
.diet--lg.diet--nonveg::before { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 9px; }

/* Veg / non-veg split heading inside a category. */
.diet-split {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
}
/* The label only — never the marker, which keeps its own green or red. */
.diet-split > :not(.diet) { font-size: var(--fs-xs); text-transform: uppercase;
                            letter-spacing: var(--ls-label); color: var(--c-text-soft); }


/* ===========================================================================
   09. MENU ITEM ROWS + CATEGORY HEADINGS
   Name left · dotted leader · price right — straight off the printed card.
   =========================================================================== */
.category-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.category-head__illo {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--c-orange);
}
.category-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-orange);
}
.category-foot {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}

.menu-list > li + li { border-top: 1px solid var(--c-line); }

.menu-item {
  padding-block: var(--sp-3);
}
/* Name · leader · price all sit on one baseline. Notes drop to their own line
   underneath, so a long note can never squeeze the leader out of the row. */
.menu-item__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-height: calc(var(--tap) - var(--sp-3) * 2);
}
.menu-item__main {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.menu-item__marker { position: relative; top: 2px; }
.menu-item__name {
  color: var(--c-item);
  font-size: var(--fs-body);
  line-height: 1.3;
}
.menu-item__note,
.menu-item__toppings {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-soft);
}
/* Where a row carries a veg/non-veg marker, the second line indents to sit
   under the dish name rather than under the marker. Rows without one — combos,
   drinks — stay flush left. */
.menu-item--marked :is(.menu-item__note, .menu-item__toppings, .combo-contents) {
  padding-left: calc(15px + var(--sp-2));
}

.menu-item__leader {
  flex: 1 1 var(--sp-5);
  align-self: center;
  border-bottom: 2px dotted var(--c-muted);
  opacity: .55;
  transform: translateY(-2px);
}
.menu-item__price {
  flex: none;
  color: var(--c-item);
  font-variant-numeric: tabular-nums;
}

/* Featured items — the bold ones on the printed card. Colour, not weight. */
.menu-item--featured .menu-item__name { color: var(--c-orange); }

/* Prices not finalised: main.js puts this on the list while SHOW_PRICES is
   false, so no empty leader lines dangle across the row. */
.menu-list--no-prices .menu-item__leader,
.menu-list--no-prices .menu-item__price { display: none; }

/* Combo contents. */
.combo-contents {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-soft);
}
.combo-contents li { display: flex; gap: var(--sp-2); }
.combo-contents li::before { content: "·"; color: var(--c-orange); }


/* ===========================================================================
   10. FEATURE PANELS & BANDS
   Orange and brown are for full-bleed feature panels, never long text.
   =========================================================================== */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  color: var(--c-on-brand);
}
.panel--orange { background: var(--c-orange); }
.panel--brown  { background: var(--c-brown); }
.panel--bleed  { border-radius: 0; padding-inline: var(--gutter); }

/* Faint food-line texture — the same drawing as the hero and the mobile sheet,
   so every branded surface shares one pattern. The bite mark used to tile here
   at 120px, which filled its own tile edge to edge and read as wallpaper
   blobs rather than texture. */
.panel--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pattern-cream.png");
  background-size: 280px 280px;
  opacity: .08;
}

.panel :is(h1, h2, .t-d3, .tagline, .category-head__title) { color: var(--c-on-brand); }
.panel :is(p, .t-sm, .t-note, .t-label) { color: var(--c-on-brand-soft); }
/* Cream on orange is only 3.9:1 — never dim it further, and keep the copy on
   an orange panel short. Long paragraphs belong on cream or on brown (8.5:1). */
.panel--orange :is(p, .t-sm, .t-note, .t-label) { color: var(--c-on-brand); }
.panel a { color: var(--c-cream); }

/* Orange on brown measures 2.2:1 — unusable. Inside a brown panel the buttons
   go cream: solid for the primary action, outlined for the secondary. */
.panel--brown .btn--primary {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-brown);
}
.panel--brown .btn--primary:hover {
  background: transparent;
  color: var(--c-cream);
}
.panel--brown .btn--secondary {
  background: transparent;
  border-color: rgb(var(--t-cream) / .5);
  color: var(--c-cream);
}
.panel--brown .btn--secondary:hover {
  border-color: var(--c-cream);
  background: rgb(var(--t-cream) / .12);
}
.panel hr { border-color: var(--c-on-brand-line); }
.panel :focus-visible { outline-color: var(--c-cream); }

/* Dismissible offer strip that sits above everything. */
.offer-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  background: var(--c-brown);
  color: var(--c-cream);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.offer-bar__close {
  flex: none;
  margin-left: auto;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  color: var(--c-cream);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-1) var(--ease);
}
.offer-bar__close:hover { background: rgb(var(--t-cream) / .14); }


/* ===========================================================================
   11. WAVY FRAME + BITE TEXTURE
   The torn orange border that frames the printed card.
   =========================================================================== */
.frame-wavy {
  border: 20px solid transparent;
  border-image-source: var(--img-frame-wavy);
  border-image-slice: 30;
  border-image-repeat: round;
  padding: var(--sp-4);
}
.frame-wavy--tight { border-width: 14px; padding: var(--sp-3); }

/* Thin wavy divider between sections. */
.rule-wavy {
  height: 12px;
  border: 0;
  margin-block: var(--sp-6);
  background-image: var(--img-wave-line);
  background-position: center;
  background-size: 60px 12px;
  background-repeat: repeat-x;
  opacity: .8;
}


/* ===========================================================================
   12. FORMS — the menu search box
   =========================================================================== */
.field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-1) var(--ease),
              box-shadow   var(--dur-1) var(--ease);
}
.field:focus-within {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgb(var(--t-ink) / .06);
}
.field__icon { flex: none; width: 20px; height: 20px; color: var(--c-text-soft); }
.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-body);
  color: var(--c-text);
}
.field input::placeholder { color: var(--c-text-soft); opacity: 1; }


/* ===========================================================================
   13. MOTION
   Subtle fade / slide-up on scroll. No parallax, no libraries.
   =========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
/* Cards and tiles inside a revealed block come in just behind it, so a grid
   arrives as a group rather than all at once. */
.reveal > .card, .reveal > li > .card, .reveal > li {
  transition: opacity 520ms var(--ease) 90ms, transform 520ms var(--ease) 90ms;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   ENTRANCE
   Every page, every load: the bitten O pushes in slightly and fades away in
   the centre. Built by main.js and removed from the DOM the moment it
   finishes, so it costs nothing on any later paint and never blocks content
   for a crawler. Skipped entirely under reduced motion.
   --------------------------------------------------------------------------- */
.entrance {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--c-orange);
  animation: entrance-curtain 1150ms var(--ease) forwards;
}
.entrance__mark {
  width: min(30vmin, 180px);
  height: auto;
  transform-origin: center;
  animation: entrance-zoom 1000ms cubic-bezier(.3, .1, .3, 1) both;
}
/* The curtain holds while the O breathes, then clears with it. */
@keyframes entrance-curtain {
  0%, 62%  { opacity: 1; }
  100%     { opacity: 0; visibility: hidden; }
}
/* A small push in, then it dissolves where it stands. Deliberately restrained:
   scaling the mark up to fill the screen turned a loading moment into a
   flashbulb, which is a lot to sit through on every single page load. */
@keyframes entrance-zoom {
  0%   { transform: scale(.9);  opacity: 0; }
  22%  { opacity: 1; }
  68%  { opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}
/* Nothing should scroll underneath while the curtain is up. */
body.is-entering { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* Zero the delays too, or a staggered list still trickles in one row at a
       time — the wait is the animation as much as the movement is. */
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ===========================================================================
   14. ACCESSIBILITY UTILITIES
   =========================================================================== */
:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-4) * -6);
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-orange);
  color: var(--c-cream);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--c-cream); }

/* Marks a value that must be replaced before launch. Impossible to miss. */
.confirm {
  display: inline-block;
  padding: 0 var(--sp-2);
  border: 1px dashed var(--c-orange);
  border-radius: var(--r-sm);
  color: var(--c-orange);
  font-size: var(--fs-sm);
  line-height: 1.6;
}


/* ===========================================================================
   15. STICKY HEADER + NAV
   Logo left, anchors right. Below 768px the anchors collapse into a panel
   behind a toggle; above it they sit inline. Chrome stays quiet until you
   scroll — the hairline and shadow only appear once the page has moved.
   =========================================================================== */
/* The nav, footer and call bar are injected by main.js.

   #site-nav must not form a box of its own: a sticky element can only travel
   inside its parent, so a 73px-tall wrapper meant the header unstuck itself
   almost immediately and scrolled away. display:contents removes the wrapper
   from layout and lets the header stick against the page. */
#site-nav { display: contents; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-cream);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease),
              border-color     var(--dur-2) var(--ease),
              box-shadow       var(--dur-2) var(--ease);
}
.site-header.is-stuck {
  background: var(--c-cream);
  border-bottom-color: var(--c-line);
  box-shadow: var(--shadow-sm);
}

/* Home only: the header floats over the dark hero until you scroll. Inner
   pages keep a solid cream bar from the first pixel. */
.site-header--overlay {
  /* Takes no height in flow, so the hero band runs edge to edge behind it. */
  margin-bottom: calc(var(--nav-h) * -1);
  background: transparent;
}
.site-header--overlay.is-stuck { background: var(--c-cream); }
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--nav-h);
}
/* Two lockups stacked: the cream one reads over the dark hero, the orange one
   takes over once the header turns cream. Only the opacity changes. */
.site-header__brand {
  position: relative;
  z-index: 41;            /* above the mobile sheet, which is 40 */
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding-block: var(--sp-2);
  border-radius: var(--r-sm);
  line-height: 0;
}
.site-header__brand img {
  width: auto;
  height: 36px;
  transition: opacity var(--dur-2) var(--ease);
}
.site-header__brand .brand--cream {
  position: absolute;
  top: var(--sp-2);
  left: 0;
}
/* The cream lockup renders on every page but only shows where the bar is
   sitting on orange: over the hero, or behind the open mobile sheet. */
.brand--cream { opacity: 0; }
.site-header--overlay:not(.is-stuck) .brand--cream,
body.nav-open .brand--cream { opacity: 1; }
.site-header--overlay:not(.is-stuck) .brand--orange,
body.nav-open .brand--orange { opacity: 0; }

/* Toggle — mobile only. */
.nav-toggle {
  position: relative;
  z-index: 41;            /* stays clickable on top of the open sheet */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  color: var(--c-item);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.nav-toggle:hover { border-color: var(--c-orange); }
/* Over the hero, before the header turns cream — and over the open sheet. */
.site-header--overlay:not(.is-stuck) .nav-toggle,
body.nav-open .nav-toggle {
  color: var(--c-cream);
  border-color: rgb(var(--t-cream) / .45);
}
.site-header--overlay:not(.is-stuck) .nav-toggle:hover,
body.nav-open .nav-toggle:hover { border-color: var(--c-cream); }

/* The sheet is the background now, so the bar must get out of its way. */
body.nav-open { overflow: hidden; }
body.nav-open .site-header,
body.nav-open .site-header.is-stuck {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.nav-toggle__bars {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-1) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-pill);
  transition: transform var(--dur-2) var(--ease);
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top:  5px; }

/* Open state — the bars become a cross. */
.nav-toggle[aria-expanded="true"] { border-color: var(--c-orange); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   MOBILE SHEET
   Below 768px the nav is not a dropdown but a whole orange screen — the same
   ground and pattern as the hero, so opening the menu feels like staying
   inside the brand rather than dropping a grey utility panel over it.
   It sits *under* the sticky header (z-index 50) on purpose, so the logo and
   the close button stay live on top of it.
   --------------------------------------------------------------------------- */
.nav-panel {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* Bottom-weighted: the links land where a thumb already is, and the pattern
     gets the top of the screen to itself. */
  justify-content: flex-end;
  gap: var(--sp-5);
  padding: calc(var(--nav-h) + var(--sp-5)) var(--gutter) var(--sp-7);
  overflow-y: auto;
  background: var(--c-orange);
  transition: opacity var(--dur-2) var(--ease),
              visibility var(--dur-2) var(--ease);
}
.nav-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/pattern-cream.png");
  background-size: 300px 300px;
  opacity: .18;
  pointer-events: none;
}
.nav-panel > * { position: relative; }   /* above the pattern */
.nav-panel.is-open { visibility: visible; opacity: 1; }

.nav-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  /* Climate Crisis, because this is a statement and not a utility list. Cream
     on orange is 3.9:1 — fine here, nowhere near the 24px floor. */
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  line-height: 1.15;
  color: var(--c-cream);
  text-decoration: none;
  transition: opacity var(--dur-1) var(--ease);
}
.nav-link:hover { opacity: .75; }
/* The page you are already on, marked without a second colour. */
.nav-link[aria-current="page"] { opacity: .55; }

.nav-panel .btn { display: flex; width: 100%; margin-top: var(--sp-2); }

.nav-panel__meta {
  border-top: 1px solid rgb(var(--t-cream) / .3);
  padding-top: var(--sp-5);
  color: var(--c-on-brand-soft);
  font-size: var(--fs-sm);
}
.nav-panel__meta p { margin: 0 0 var(--sp-1); max-width: none; }
.nav-panel__ig {
  display: inline-block;
  margin-top: var(--sp-2);
  color: var(--c-cream);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--t-cream) / .5);
}

/* Each row arrives a beat after the one above it. Transform and opacity only,
   so nothing here can cause a reflow mid-animation. */
.nav-panel .nav-list > li,
.nav-panel .btn,
.nav-panel__meta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.nav-panel.is-open .nav-list > li,
.nav-panel.is-open .btn,
.nav-panel.is-open .nav-panel__meta {
  opacity: 1;
  transform: none;
}
.nav-panel.is-open .nav-list > li:nth-child(1) { transition-delay: 60ms; }
.nav-panel.is-open .nav-list > li:nth-child(2) { transition-delay: 110ms; }
.nav-panel.is-open .nav-list > li:nth-child(3) { transition-delay: 160ms; }
.nav-panel.is-open .nav-list > li:nth-child(4) { transition-delay: 210ms; }
.nav-panel.is-open .btn { transition-delay: 260ms; }
.nav-panel.is-open .nav-panel__meta { transition-delay: 310ms; }

@media (min-width: 48rem) {
  .site-header__brand img { height: 40px; }
  .nav-toggle { display: none; }

  .nav-panel {
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    position: static;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-panel::before { display: none; }
  .nav-panel__meta { display: none; }   /* the sheet's furniture, not the bar's */
  .nav-list { flex-direction: row; align-items: center; gap: var(--sp-5); }
  .nav-list > li + li { border-top: 0; }
  .nav-link {
    padding-inline: var(--sp-1);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--c-item);
  }
  .nav-link:hover { opacity: 1; color: var(--c-orange); }
  .nav-link[aria-current="page"] { opacity: 1; color: var(--c-orange); }
  /* No stagger up here — the links are simply always present. */
  .nav-panel .nav-list > li,
  .nav-panel .btn {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  /* Only from here up: below 768px these links sit inside the cream panel,
     where cream on cream would vanish. */
  .site-header--overlay:not(.is-stuck) .nav-link { color: var(--c-cream); }
  .site-header--overlay:not(.is-stuck) .nav-link:hover { text-decoration: underline; }
  .nav-panel .btn { display: inline-flex; width: auto; margin-top: 0; margin-left: var(--sp-4); }
}


/* ===========================================================================
   16. HERO
   Cream ground, orange everything. The brand book calls cream the default
   background and orange the accent — this leans all the way into that rather
   than sitting on a dark slab. Every text colour here clears AA:
   brown on cream 8.5:1, and the headline is orange at 40px+ where 3.9:1 passes.
   =========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 32rem;
  min-height: 78svh;
  padding-top: calc(var(--nav-h) + var(--sp-7));
  padding-bottom: var(--sp-8);
  background: var(--c-orange);
  text-align: center;
}

/* The hand-drawn food art in cream, wrapping the whole orange band. */
.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../img/pattern-cream.png");
  background-size: 300px 300px;
  opacity: .22;
}
@media (min-width: 48rem) {
  .hero__pattern { background-size: 420px 420px; opacity: .24; }
}

/* Media, if a photo or video is ever switched on. */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media > * { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
  background: rgb(var(--t-ink) / .62);
}
.hero.has-media .hero__scrim { opacity: 1; }
.hero.has-media :is(.hero__eyebrow, .hero__lead, .hero__tags) { color: var(--c-cream); }
.hero.has-media .hero__title { color: var(--c-cream); }

/* The eyebrow lives inside the <h1> so the heading a search engine reads is
   "Ojas Café · Palani, Tamil Nadu — Take the Bite!" rather than the tagline
   alone. It still looks like its own line — but it inherits the display font
   from its parent, so put the body font back. */
.hero__title .hero__eyebrow { font-family: var(--font-body); }

.hero__inner { width: 100%; max-width: 46rem; margin-inline: auto; }

.hero__logo { width: min(13rem, 54vw); height: auto; margin-inline: auto; }

.hero__eyebrow { display: block; margin-top: var(--sp-5);
                 margin-bottom: var(--sp-3); color: var(--c-cream); }

.hero__title {
  margin-top: var(--sp-3);
  font-size: clamp(2.75rem, 12vw, 5.5rem);
  color: var(--c-cream);
}

.hero__lead {
  max-width: 30rem;
  margin-inline: auto;
  margin-top: var(--sp-4);
  /* Cream on orange is 3.9:1, which clears AA only at 24px+. These two lines
     are sized up for that reason — do not shrink them back. */
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  color: var(--c-cream);
}

.hero__tags {
  margin-top: var(--sp-3);
  font-size: 1.5rem;
  color: var(--c-cream);
}
/* Flex so the row can wrap between items — written without whitespace in the
   HTML, inline spans had no break opportunity and ran off the screen. Each
   item carries its own leading separator, so a stray "·" is never orphaned. */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0;
  row-gap: var(--sp-1);
}
.hero__tags span { white-space: nowrap; }
.hero__tags span + span::before {
  content: "·";
  margin-inline: .45em;
  opacity: .55;
}

.hero__actions { justify-content: center; margin-top: var(--sp-6); }
.hero__actions .btn { flex: 1 1 13rem; max-width: 20rem; }

@media (min-width: 48rem) {
  .hero {
    min-height: 38rem;
    min-height: 82svh;
    padding-top: calc(var(--nav-h) + var(--sp-8));
    padding-bottom: var(--sp-9);
  }
  .hero__logo { width: 16rem; }
  /* Equal basis, so the pair reads as a matched set instead of two buttons
     three pixels apart. */
  .hero__actions .btn { flex: 0 0 14rem; max-width: none; }
}

/* ===========================================================================
   17. MENU
   Twenty-two categories is far too many to scroll on a phone, so they sit
   behind five group filters with a search across all of them. Everything here
   is rendered from menu-data.js — nothing about the dishes lives in the HTML.
   =========================================================================== */
.menu-section { padding-block: var(--section-y); }

.menu-head { max-width: 40rem; }
.menu-head__intro { margin-top: var(--sp-4); }

/* Veg / non-veg key. */
.menu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.menu-legend > li { display: flex; align-items: center; gap: var(--sp-2); }
.menu-legend span:not(.diet) {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-item);
}

.menu-search { margin-top: var(--sp-5); max-width: 26rem; }
.menu-search__clear {
  flex: none;
  display: none;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--c-item);
  transition: background-color var(--dur-1) var(--ease);
}
.menu-search__clear:hover { background: rgb(var(--t-ink) / .08); }
.menu-search.has-query .menu-search__clear { display: flex; }
/* The native clear cross would sit next to ours. */
.menu-search input::-webkit-search-cancel-button { display: none; }

/* --- Group filters — pinned under the header while you scroll ------------- */
.menu-tabs {
  position: sticky;
  top: calc(var(--nav-h) - 1px);
  z-index: 40;
  margin-top: var(--sp-6);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--sp-3) var(--gutter);
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
}
.menu-tabs__rail {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-tabs__rail::-webkit-scrollbar { display: none; }
.menu-tabs__rail > .chip { flex: none; }
/* While a search is running the filters step aside — results span every group. */
.menu-tabs.is-searching .chip { opacity: .45; }
.menu-tabs.is-searching .chip[aria-pressed="true"] { opacity: .6; }

/* --- Results line + empty state ------------------------------------------ */
.menu-status {
  min-height: var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}
.menu-empty {
  margin-top: var(--sp-6);
  padding: var(--sp-6) var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  text-align: center;
}
.menu-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: var(--lh-display);
  color: var(--c-orange);
}
.menu-empty p { max-width: 28rem; margin-inline: auto; margin-top: var(--sp-3); }

/* --- Categories ----------------------------------------------------------- */
/* Categories carry their own top padding, so this only needs a hair. */
.menu-groups { margin-top: var(--sp-1); }

.menu-category {
  padding-top: var(--sp-7);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-9));
}
.menu-category + .menu-category { border-top: 1px solid var(--c-line); }

/* Line illustration beside each category heading. */
.category-head__illo {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@media (min-width: 48rem) {
  .menu-category { padding-top: var(--sp-8); }
  /* Two columns once there is room — a 133-dish menu is a long scroll
     otherwise. Only lists long enough to be worth splitting get the class,
     so a three-item category still reads as one short list. */
  .menu-list--split {
    columns: 2;
    column-gap: var(--sp-7);
  }
  .menu-list--split > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

@media (min-width: 64rem) {
  .menu-head { max-width: 44rem; }
}


/* ===========================================================================
   18. ANNOUNCEMENT — opening popup, then the strip that replaces it
   =========================================================================== */

/* Stops the page behind a modal from scrolling under it. */
body.has-modal { overflow: hidden; }

.offer-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgb(var(--t-ink) / .6);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.offer-modal.is-open { opacity: 1; }

.offer-modal__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 26rem;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  text-align: center;
  background: var(--c-cream);
  border: 2px solid var(--c-orange);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.98);
  transition: transform var(--dur-3) var(--ease);
}
.offer-modal.is-open .offer-modal__card { transform: none; }

/* Bite-mark motif, so it reads as the menu card rather than a newsletter box. */
.offer-modal__card.panel--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--img-bite-brown);
  background-size: 56px 56px;
  opacity: .035;
}

.offer-modal__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--c-item);
  transition: background-color var(--dur-1) var(--ease);
}
.offer-modal__close:hover { background: rgb(var(--t-ink) / .08); }

.offer-modal__mark { width: 56px; height: 56px; margin-inline: auto; }
.offer-modal__title {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: var(--lh-display);
  color: var(--c-orange);
}
.offer-modal__detail { margin-top: var(--sp-3); margin-inline: auto; }
.offer-modal__cta { margin-top: var(--sp-6); width: 100%; }

/* The strip that takes over after the cutoff. It pushes the page down rather
   than sitting on top of it, so nothing shifts and nothing is covered. */
#site-strip:empty { display: none; }
.offer-bar__cta {
  flex: none;
  color: var(--c-cream);
  white-space: nowrap;
}


/* ===========================================================================
   19. MOBILE CALL BAR
   Two taps, always within reach. Phone only — on a desktop the nav is enough.
   =========================================================================== */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px rgb(var(--t-ink) / .08);
  transform: translateY(100%);
  transition: transform var(--dur-2) var(--ease);
}
.stickybar__btn { flex: 1; }

@media (max-width: 47.99rem) {
  .stickybar { display: flex; }
  .stickybar.is-visible { transform: none; }
  /* Clear the bar so it never covers the last line of the footer. */
  body { padding-bottom: calc(var(--tap) + var(--sp-6)); }
}


/* ===========================================================================
   20. HOME PAGE BLOCKS
   =========================================================================== */

/* --- Why Ojas ------------------------------------------------------------- */
.why-grid { margin-top: var(--sp-6); }
.why-card { text-align: left; }
.why-card__icon {
  width: 40px;
  height: 40px;
  color: var(--c-orange);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.why-card__title { margin-top: var(--sp-4); }
.why-card p { margin-top: var(--sp-2); }

/* --- Section headings ------------------------------------------------------ */
.section-head { max-width: 40rem; }
.section-head__intro { margin-top: var(--sp-3); }
.section-head + * { margin-top: var(--sp-5); }

/* --- Menu preview tiles ---------------------------------------------------- */
.group-tile { text-decoration: none; }
.group-tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.group-tile__samples { margin-top: var(--sp-2); }
.group-tiles__more { justify-content: center; margin-top: var(--sp-6); }

/* Wide crop for group and interior shots; the food cards stay portrait. */
.photo-card__media--wide { aspect-ratio: 16 / 10; }
.photo-card__media--wide .ph-photo { aspect-ratio: 16 / 10; }

/* --- Instagram ------------------------------------------------------------- */
.instagram-panel { text-align: center; }
.instagram-panel__handle {
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: var(--lh-display);
  color: var(--c-on-brand);
}
.instagram-panel .cluster { justify-content: center; margin-top: var(--sp-5); }


/* ===========================================================================
   21. GALLERY + LIGHTBOX
   =========================================================================== */
.gallery-filters { margin-top: var(--sp-5); }
.gallery-count { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-soft); }

.gallery-grid {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 48rem) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
@media (min-width: 64rem) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery-tile {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.gallery-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gallery-tile .photo-card__media { aspect-ratio: 1; }
.gallery-tile .ph-photo { aspect-ratio: 1; border: 0; border-radius: 0; }
.gallery-tile .ph-photo__name { font-size: var(--fs-body); }

.gallery-video {
  width: 100%;
  border-radius: var(--r-lg);
  background: var(--c-brown);
}

/* --- Lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  background: rgb(var(--t-ink) / .92);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__stage {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 60rem;
  max-height: 100%;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 76svh;
  border-radius: var(--r-md);
}
.lightbox__stage .ph-photo { width: min(100%, 40rem); }
.lightbox__caption {
  margin-top: var(--sp-4);
  color: var(--c-cream);
  text-align: center;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1.5px solid rgb(var(--t-cream) / .4);
  border-radius: var(--r-pill);
  color: var(--c-cream);
  transition: border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.lightbox__btn:hover { border-color: var(--c-cream); background: rgb(var(--t-cream) / .14); }
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prev  { left: var(--sp-3);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--sp-3); top: 50%; transform: translateY(-50%); }
.lightbox__btn svg { width: 18px; height: 18px; }


/* ===========================================================================
   22. VISIT — map, hours, contact
   =========================================================================== */
.map-embed {
  width: 100%;
  min-height: 20rem;
  border: 0;
  border-radius: var(--r-lg);
}
@media (min-width: 48rem) { .map-embed { min-height: 26rem; } }

.hours-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  border: 1.5px solid currentColor;
}
.hours-badge.is-open   { color: var(--c-veg); }
.hours-badge.is-closed { color: var(--c-item); }
.hours-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.hours-list { margin-top: var(--sp-4); max-width: 24rem; }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row.is-today .hours-row__day,
.hours-row.is-today .hours-row__time { color: var(--c-orange); }
.hours-row__day { color: var(--c-item); }
.hours-row__time { color: var(--c-text-soft); font-variant-numeric: tabular-nums; }

.landmark-list { margin-top: var(--sp-3); }
.landmark-list li {
  position: relative;
  padding-left: var(--sp-5);
  padding-block: var(--sp-1);
}
.landmark-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
}

/* ---------------------------------------------------------------------------
   CTA BAND
   The closing panel on the menu and visit pages. It used to stack everything
   down the left edge of a very wide box, leaving half the panel empty; this
   puts the copy and the action side by side and lets the panel breathe.
   --------------------------------------------------------------------------- */
.cta-band { padding: var(--sp-6) var(--sp-5); }
.cta-band__copy > p { color: var(--c-on-brand-soft); }
/* Address lines are a block, not separate paragraphs — no gap between them. */
.cta-band__copy p + p { margin-top: var(--sp-1); }
.cta-band__lead { margin-top: var(--sp-3); max-width: 42ch; }
/* An address is one block of lines, not a run of paragraphs — body line-height
   of 1.7 pulls it apart into two floating sentences. */
.cta-band__lead[data-contact="address"] p { line-height: 1.45; }
.cta-band .contact-actions { margin-top: var(--sp-5); }

/* On a phone the closing action gets the full width, like every other CTA. */
@media (max-width: 47.999rem) {
  .cta-band .contact-actions { flex-direction: column; align-items: stretch; }
  .cta-band .contact-actions .btn { width: 100%; justify-content: center; }
}

@media (min-width: 48rem) {
  .cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-7);
  }
  .cta-band .contact-actions { margin-top: 0; }
  .cta-band .cluster { flex-wrap: nowrap; }
}

.contact-actions { margin-top: var(--sp-5); }
.contact-actions [data-contact] { display: contents; }


/* ===========================================================================
   23. FOOTER
   =========================================================================== */
.site-footer { padding-block: var(--sp-8) var(--sp-6); }
.site-footer__inner {
  display: grid;
  gap: var(--sp-7);
}
.site-footer__brand img { width: 10rem; height: auto; }
.site-footer__signoff {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: var(--lh-display);
  color: var(--c-on-brand);
}
.site-footer__cols {
  display: grid;
  gap: var(--sp-6);
}
.site-footer__list { margin-top: var(--sp-3); }
.site-footer__list li { padding-block: var(--sp-1); }
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--c-cream);
}
.site-footer__list a:hover { color: var(--c-cream); text-decoration: underline; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-on-brand-line);
}

@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}


/* ===========================================================================
   24. PAGE HEADERS — menu, gallery, visit
   A compact cream band under the nav. The big dark hero is the home page's
   alone; repeating it on every page would flatten the difference.
   =========================================================================== */
.page-header { padding-block: var(--sp-7) var(--sp-6); }
.page-header__inner { max-width: 44rem; }
.page-header__eyebrow { color: var(--c-item); }
.page-header__intro { margin-top: var(--sp-4); }

/* Combo photo cards on menu.html — the highest-value order gets the space. */
.menu-category--combos .combo-cards { margin-top: var(--sp-5); }
.combo-card { padding: 0; }
.combo-card .combo-contents { margin-top: var(--sp-4); padding-left: 0; }
.combo-card--text .t-label { margin-top: var(--sp-2); display: block; }
.combo-card__price {
  margin-top: var(--sp-3);
  color: var(--c-orange);
  font-size: var(--fs-lead);
}

/* The key and the counter note at the foot of the menu page. */
.menu-legend-block {
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
}
.menu-legend-block .menu-legend { margin-top: var(--sp-3); }
.menu-legend-block p + p { margin-top: var(--sp-3); }

/* On a phone the side arrows sit on top of the photo. Move them down to flank
   the caption instead, where there is room for a 44px target. */
@media (max-width: 47.99rem) {
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: var(--sp-4); transform: none; }
  .lightbox__prev { left: var(--sp-4); }
  .lightbox__next { right: var(--sp-4); }
  .lightbox__caption { padding-inline: calc(var(--tap) + var(--sp-4)); }
}

/* The opening date line in the popup, above the offer wording. */
.offer-modal__opening {
  margin-top: var(--sp-2);
  color: var(--c-item);
}


/* ===========================================================================
   25. SECTION TREATMENTS
   Every block used to carry the same bite-mark texture, which flattened them
   into one another. Each surface now gets its own handling:

     hero        drifting bite marks   (the signature, unchanged)
     menu        plain cream           — the tiles carry the interest
     combos      food pattern, faint   — a band that sets it apart
     the space   plain cream
     instagram   food pattern, bold    — on orange, the loudest moment
     visit       plain brown           — dense content, no competition
     footer      plain brown
   =========================================================================== */

/* --- A cream band carrying the food pattern, very faint ------------------- */
.section--pattern {
  position: relative;
  isolation: isolate;
  border-block: 1px solid var(--c-line);
}
.section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pattern.png");
  background-size: 420px 420px;
  opacity: .07;
}
@media (min-width: 48rem) {
  .section--pattern::before { background-size: 560px 560px; opacity: .08; }
}

/* --- The food pattern on a brand panel, at full confidence ---------------- */
.panel--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pattern-cream.png");
  background-size: 300px 300px;
  opacity: .3;
}
@media (min-width: 48rem) {
  .panel--pattern::before { background-size: 400px 400px; }
}

/* Instagram panel — the one place the pattern is allowed to be loud. */
.instagram-panel { padding-block: var(--sp-8); }

/* Combo cards on the home grid sit in a list; strip the list styling. */
.combo-cards > li { display: flex; }
.combo-cards > li > .card { width: 100%; }

/* Inside a patterned band the placeholder's own bite watermark doubles up with
   the section behind it. One pattern per surface — the band wins. */
.section--pattern .ph-photo::before { display: none; }

/* Home combo cards: a shorter crop, so all five stay scannable rather than
   turning the section into a long scroll. */
#combos-rail .photo-card__media--wide,
#combos-rail .photo-card__media--wide .ph-photo { aspect-ratio: 2 / 1; }
#combos-rail .ph-photo__name { font-size: var(--fs-lead); }
@media (min-width: 48rem) {
  #combos-rail .photo-card__media--wide,
  #combos-rail .photo-card__media--wide .ph-photo { aspect-ratio: 16 / 10; }
}

/* A combo with no picture is a text card, not a card with a hole in it. */
.combo-card--text { padding: var(--sp-5); }
/* Climate Crisis has a 32px floor, and 32px will not fit a combo name inside a
   narrow card — "Fried Chicken Combo" ran to three lines on a phone. So the
   card asks how wide it actually is: body font when tight, display font once
   there is genuinely room for it. */
.combo-card--text { container-type: inline-size; }
.combo-card--text .card__title {
  color: var(--c-orange);
  font-family: var(--font-body);
  font-size: 1.375rem;
  line-height: var(--lh-tight);
}
@container (min-width: 26rem) {
  .combo-card--text .card__title {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: var(--lh-display);
  }
}

/* Climate Crisis has a 32px floor, so a combo title needs a wide card. Two
   columns, never three — at three the names ran past the card edge. */
.combo-card--text .card__title { overflow-wrap: break-word; }

/* Hold text-card titles at the 32px Climate Crisis floor rather than letting
   them scale to 40px, where the longer combo names broke onto three lines. */

/* Let each card be its own height — stretching them to match the tallest left
   a big empty gap under the shorter ones. */
.combo-cards { align-items: start; }

/* Over the orange hero an orange-filled nav button would vanish, so it goes
   cream until the header turns solid on scroll. */
/* The primary button is orange — which vanishes against the orange hero and
   against the open mobile sheet. In both places it flips to cream. */
.site-header--overlay:not(.is-stuck) .btn--primary,
body.nav-open .nav-panel .btn--primary {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-brown);
}
.site-header--overlay:not(.is-stuck) .btn--primary:hover,
body.nav-open .nav-panel .btn--primary:hover {
  background: transparent;
  color: var(--c-cream);
}

/* The hours table uses brown text, which disappears on a brown panel — only
   today's row (orange) was legible. Flip the whole table to cream in there. */
.panel--brown .hours-row__day    { color: var(--c-on-brand); }
.panel--brown .hours-row__time   { color: var(--c-on-brand-soft); }
.panel--brown .hours-row         { border-bottom-color: var(--c-on-brand-line); }
.panel--brown .hours-row.is-today .hours-row__day,
.panel--brown .hours-row.is-today .hours-row__time { color: var(--c-orange); }
.panel--brown .landmark-list li  { color: var(--c-on-brand); }
.panel--brown .hours-badge       { color: var(--c-on-brand); }


/* ===========================================================================
   26. SECTION REFINEMENTS
   =========================================================================== */

/* --- Instagram panel ------------------------------------------------------ */
.instagram-panel__mark { width: 56px; height: 56px; margin-inline: auto; }
.instagram-panel .t-label { margin-top: var(--sp-4); }
.instagram-panel__handle {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: var(--lh-display);
  color: var(--c-on-brand);
}
/* Cream on orange needs 24px+, so this line is sized for it. */
.instagram-panel__line {
  margin-top: var(--sp-3);
  margin-inline: auto;
  max-width: 26rem;
  font-size: clamp(1.5rem, 4.5vw, 1.625rem);
  line-height: 1.45;
}

/* --- Visit band ----------------------------------------------------------- */
.visit-band__grid { margin-top: var(--sp-6); align-items: start; }
.visit-band__block + .visit-band__block { margin-top: var(--sp-6); }
.visit-band__address p { margin-top: var(--sp-2); }
.visit-band__block .t-label { color: var(--c-on-brand-soft); }
.visit-band__block .hours-list { margin-top: var(--sp-3); max-width: none; }
@media (min-width: 40rem) {
  .visit-band__block + .visit-band__block { margin-top: 0; }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer__inner { gap: var(--sp-6); }
.site-footer__col .t-label { color: var(--c-on-brand-soft); }
.site-footer__list li { padding-block: 0; }
.site-footer__list a { min-height: 36px; }
.site-footer__legal { align-items: baseline; }
@media (min-width: 48rem) {
  .site-footer__inner { gap: var(--sp-8); align-items: start; }
}