/* Landing page (index.html) only. The dark palette itself lives in theme.css,
   which every customer page loads; this file is just the landing-specific
   blocks — hero video, trust strip, offer band, picks, sticky order bar. */

.lp-display { font-family: var(--font-display); letter-spacing: -.01em; }

/* ---------------------------------------------------------------- header ---
   Over the hero the header has no bar of its own: the video runs behind it and
   a bar across the top would cut the first impression in half. It gains the
   shared dark background once the hero is out of the way (js sets .scrolled). */
.site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: linear-gradient(180deg, rgba(10, 7, 4, .72) 0%, rgba(10, 7, 4, 0) 100%);
  backdrop-filter: none;
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: rgba(20, 16, 12, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-md);
}
/* On top of video the header buttons have to read as glass, not as white boxes
   that lost their dialog. */
.site-header .btn-outline {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .28); color: #fff;
  backdrop-filter: blur(6px);
}
.site-header .btn-outline:hover { background: rgba(255, 255, 255, .18); }

/* Phones: the brand name plus three buttons do not fit in 390px, and the name
   is what breaks — it wrapped onto three lines. Keep it on one line and drop
   the header "Menu" button: the hero CTA and the sticky bar both already go
   there, so nothing is lost. "Track" stays (the guided tour points at it). */
/* The hero CTA and the sticky bar both already go to the menu, so the header's
   own Menu button is pure duplication once space is tight. (theme.css handles
   hiding the wordmark itself at 560px.) */
@media (max-width: 600px) {
  .site-header .header-actions a[href="menu.html"] { display: none; }
}

/* ------------------------------------------------------------------ hero ---
   The video is the hero — not a decorative band above it. Someone landing on a
   phone should see food moving, the name of the dish, and one button, without
   scrolling. Everything else on the page is below the fold on purpose. */
.lp-hero {
  position: relative; overflow: hidden;
  min-height: min(94svh, 860px);
  display: flex; align-items: flex-end;
  background: radial-gradient(120% 90% at 70% 0%, #3a2a18 0%, #14100c 62%);
  color: #fff;
}
.hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-video video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 42%;
}
/* Scrim. Weighted to the bottom third: the copy sits down there, the top stays
   nearly clear so the footage is actually visible rather than muddied. */
.hero-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 16, 12, .55) 0%, rgba(20, 16, 12, .18) 30%,
                            rgba(20, 16, 12, .72) 68%, rgba(20, 16, 12, .96) 100%);
}

/* Top padding keeps the copy clear of the fixed header on short landscape
   viewports, where the hero is not tall enough to separate them on its own. */
.lp-hero-body { position: relative; z-index: 1; width: 100%; padding: calc(var(--header-h) + var(--sp-4)) 0 var(--sp-6); }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--sp-3);
}
.lp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }
.lp-hero h1 {
  font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: .98; margin: 0 0 var(--sp-3);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.lp-hero h1 em { font-style: italic; color: var(--brand); display: block; }
.lp-lead {
  font-size: var(--fs-md); color: #ece0d3; max-width: 44ch; margin: 0 0 var(--sp-5);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.lp-hero-cta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lp-hero-cta .btn-primary { padding: 15px 30px; font-size: 1.05rem; box-shadow: 0 10px 28px rgba(247, 148, 29, .34); }
.lp-hero-cta .sub { font-size: var(--fs-sm); color: #d8c8b8; }

/* Nudge that there is more below. Purely decorative. */
.lp-scroll { margin-top: var(--sp-5); display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: #bfae9d; letter-spacing: .08em; text-transform: uppercase; }
.lp-scroll .line { width: 1px; height: 26px; background: linear-gradient(180deg, var(--gold), transparent); animation: lpDrop 1.9s ease-in-out infinite; }
@keyframes lpDrop { 0%, 100% { opacity: .35; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(3px); } }

/* Phones: the hero box is far taller than it is wide, so object-fit:cover on a
   16:9 clip would zoom ~2.5x into the centre and show a smeared crop. Pin the
   video to the top at a mild 5:4 crop instead — sharp, still a big block of
   food — and let the scrim carry it down into the copy underneath. */
@media (max-width: 700px) {
  .lp-hero { min-height: min(88svh, 720px); }
  .hero-video { inset: 0 0 auto 0; height: auto; aspect-ratio: 1 / 1; }
  .hero-video::after {
    background: linear-gradient(180deg, rgba(20, 16, 12, .34) 0%, rgba(20, 16, 12, .30) 45%,
                                        rgba(20, 16, 12, .86) 82%, #14100c 100%);
  }
  .lp-lead { font-size: var(--fs-sm); }
  .lp-hero-cta .btn-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lp-scroll .line { animation: none; } }

/* ------------------------------------------------------------ trust strip ---
   Four factual claims, straight under the fold. These are the reasons this
   place is different from every other shawarma counter, so they get their own
   band rather than being buried in body copy. */
.lp-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #100c09; }
.lp-strip .container { display: flex; gap: var(--sp-5); padding-top: var(--sp-4); padding-bottom: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.lp-strip .container::-webkit-scrollbar { display: none; }
.lp-strip .f { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 700; color: #e7dbcd; white-space: nowrap; }
.lp-strip .f svg { width: 20px; height: 20px; color: var(--brand); flex: 0 0 auto; }
/* Phones: a horizontal scroller here clipped the last claim mid-word, which
   reads as a layout bug rather than as "swipe me". Two by two, all visible. */
@media (max-width: 700px) {
  .lp-strip .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); overflow: visible; }
  .lp-strip .f { white-space: normal; font-size: var(--fs-xs); }
}

/* --------------------------------------------------------- section titles ---*/
.lp-head { margin-bottom: var(--sp-5); }
.lp-head .kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.lp-head h2 { font-size: clamp(1.6rem, 5.5vw, 2.4rem); margin: 6px 0 0; }
.lp-head p { color: var(--ink-2); margin: var(--sp-2) 0 0; max-width: 56ch; font-size: var(--fs-sm); }

/* ------------------------------------------------------- order-type cards ---
   Three across at every width. Stacking these on phones (the old behaviour)
   pushed the real CTA a full screen further down for no gain — the labels are
   two words, they fit. */
.ordertypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ot-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3); text-align: center; color: var(--ink);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ot-card:hover, .ot-card:focus-visible { border-color: var(--brand); transform: translateY(-3px); background: var(--surface-2); }
.ot-card .ico { color: var(--brand); }
.ot-card .ico svg { width: 30px; height: 30px; }
.ot-card .t { font-weight: 800; font-size: var(--fs-sm); }
.ot-card .d { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
@media (max-width: 420px) { .ot-card { padding: var(--sp-3) 8px; } .ot-card .ico svg { width: 24px; height: 24px; } .ot-card .d { display: none; } }

/* ------------------------------------------------------------- offer band ---*/
.lp-offer {
  background: linear-gradient(135deg, #2c1e0b 0%, #1a1209 55%, #221708 100%);
  border: 1px solid var(--gold-dim); position: relative; overflow: hidden;
  padding: var(--sp-6) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
}
.lp-offer::after {
  content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(233, 185, 73, .22), transparent 70%); pointer-events: none;
}
.lp-offer .t { position: relative; }
.lp-offer .tag { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.lp-offer h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 7vw, 2.6rem); margin: 6px 0 8px; color: #fff; line-height: 1; }
.lp-offer p { margin: 0; color: #d9c9b4; font-size: var(--fs-sm); max-width: 46ch; }
.lp-offer .btn { position: relative; flex: 0 0 auto; }

/* --------------------------------------------------------- signature list ---
   Populated from /api/menu at runtime (see index.html). No food photography
   exists yet, so this is typographic on purpose: a priced list reads as a real
   menu, whereas empty image frames read as a broken page. */
.lp-picks { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-pick {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); transition: border-color .16s ease, background .16s ease;
}
.lp-pick:hover { border-color: var(--brand); background: var(--surface-2); }
.lp-pick .n { flex: 1; min-width: 0; }
.lp-pick .nm { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
/* display:block is load-bearing: overflow/text-overflow are ignored on inline
   boxes, so as a plain <span> a long description ran straight past the card and
   widened the whole page into a horizontal scroll. */
.lp-pick .ds { display: block; font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pick .pr { font-family: var(--font-display); font-weight: 700; color: var(--gold); white-space: nowrap; text-align: right; }
/* "from" reads above the figure, not under it — under it the eye pairs it with
   the next row's name instead ("₹129 / FROM"). */
.lp-pick .pr small { display: block; font-family: var(--font); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ----------------------------------------------------------- info  cards ---*/
.lp-info { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.lp-info .card { padding: var(--sp-5); }
.lp-info .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(247, 148, 29, .14); color: var(--brand); margin-bottom: var(--sp-3); }
.lp-info .ico svg { width: 22px; height: 22px; }
.lp-info h3 { font-size: var(--fs-md); margin: 0 0 6px; }
.lp-info p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------------------------------------------------------------- closing ---*/
.lp-close { text-align: center; background: radial-gradient(90% 120% at 50% 0%, #2a1c10 0%, var(--bg) 70%); border-top: 1px solid var(--line); }
.lp-close h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); margin: 0 0 var(--sp-3); }
.lp-close p { color: var(--ink-2); margin: 0 auto var(--sp-5); max-width: 46ch; }
.lp-close .btn-primary { padding: 16px 34px; font-size: 1.05rem; box-shadow: 0 12px 30px rgba(247, 148, 29, .3); }

/* ------------------------------------------------------- sticky order bar ---
   Phones only, and only once the hero CTA has scrolled away — so there is
   always exactly one obvious way to order on screen, never two. */
.lp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 16, 12, .94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: none; align-items: center; gap: var(--sp-3);
  transform: translateY(110%); transition: transform .22s ease;
}
.lp-sticky.show { transform: translateY(0); }
.lp-sticky .t { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.3; }
.lp-sticky .t b { display: block; font-size: var(--fs-sm); color: var(--ink); }
@media (max-width: 700px) { .lp-sticky { display: flex; } body { padding-bottom: 0; } .site-footer .container { padding-bottom: calc(var(--sp-6) + 64px); } }
@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }

/* Gold CTA — used only inside the offer band. Deliberately not .btn-primary:
   saffron on saffron disappears, and the guided tour's last step targets the
   first `.section .btn-primary` on the page, which must stay the closing CTA. */
.lp-btn-gold { background: linear-gradient(180deg, var(--gold) 0%, #cf9c2c 100%); color: #241703; box-shadow: 0 8px 22px rgba(233, 185, 73, .22); }
.lp-btn-gold:hover { box-shadow: 0 10px 28px rgba(233, 185, 73, .34); }

/* ----------------------------------------------------------------- misc  ---*/
.lp-section-tight { padding-top: var(--sp-5); }
/* The closing CTA already ends the page on a dark band; the shared top margin
   would just add a gap between two identical colours. */
.site-footer { margin-top: 0; }

/* ------------------------------------------------------------ find us / faq ---
   Local-SEO block. Reuses the .lp-info card look (same .card + .ico shape) but
   needs its own grid because these three cards hold links and an <address>,
   not one line of copy each. */
.lp-visit { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.lp-visit .card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.lp-visit .ico { color: var(--brand); }
.lp-visit .ico svg { width: 26px; height: 26px; }
.lp-visit h3 { margin: 0; font-size: var(--fs-md); }
.lp-visit p, .lp-visit address {
  margin: 0; font-style: normal; font-size: var(--fs-sm);
  color: var(--ink-2); line-height: 1.55;
}
.lp-visit .muted { color: var(--ink-3); }
.lp-visit .btn { margin-top: auto; }
/* Delivery-area list. Pills rather than a bullet list: 20 areas as bullets is a
   wall, as pills it scans in one pass and each one is still plain text. */
.lp-areas { margin: var(--sp-6) 0 0; }
.lp-areas h3 { margin: 0; font-size: var(--fs-md); }
.lp-areas p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.lp-areas .note { color: var(--ink-3); max-width: 70ch; line-height: 1.6; }
.lp-area-list {
  list-style: none; margin: var(--sp-3) 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.lp-area-list li {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
}

/* <details> so the answers do not push the closing CTA off the page, while
   still being real crawlable text (required for the FAQPage rich result). */
.lp-faq { display: grid; gap: var(--sp-2); max-width: 78ch; }
.lp-faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.lp-faq details[open] { border-color: var(--brand); }
.lp-faq summary {
  cursor: pointer; padding: var(--sp-4); font-weight: 700; font-size: var(--fs-sm);
  list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--brand); font-weight: 800; flex: 0 0 auto; }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p { margin: 0; padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }