/* =====================================================================
   AUDIT FIXES — 17 Oct 2026 (follows tools/SITE-AUDIT-2026-10-16.md)
   Loaded LAST on index.html and franchise.html so it wins over the older
   "baked tweak" layers. Sections:
     1  Mobile nav: burger -> X, action row
     2  Compact mobile masthead
     3  One frame system for the landmark clips (+ hero video box)
     4  Phone layout bugs: Aunty cards, journey tickets, franchise form
     5  Press cards (screenshot on top, caption band below)
     6  Show-all collapse on phones (reader mail, horoscope)
     7  Franchise scoreboard (5 tiles) tidy
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · MOBILE NAV
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* burger lines -> X, driven by aria-expanded so it can never drift.
     (The `.nav` prefix out-ranks the older `.nav.is-open ... translateY` rules.) */
  .nav .nav-burger { position: relative; }
  .nav .nav-burger span {
    position: absolute; left: 9px; right: 9px; width: auto !important;
    height: 2px; margin: 0;
    transition: transform .22s ease, opacity .18s ease, top .22s ease;
  }
  .nav .nav-burger span:nth-child(1) { top: 13px; transform: none; }
  .nav .nav-burger span:nth-child(2) { top: 19px; opacity: 1; }
  .nav .nav-burger span:nth-child(3) { top: 25px; transform: none; }
  .nav .nav-burger[aria-expanded="true"] { background: var(--warm-charcoal, #2C2A25); }
  .nav .nav-burger[aria-expanded="true"] span { background: var(--ivory-cream, #F4ECD8); }
  .nav .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .nav .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav .nav-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

  .nav-mobile-menu { max-height: calc(100vh - 64px); overflow-y: auto; }
  .nav-mobile-actions {
    display: grid; gap: 10px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: rgba(44, 42, 37, .05);
    border-top: 1px solid var(--warm-charcoal, #2C2A25);
  }
  .nav-mobile-menu .nav-mobile-actions a.nm-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 12px 16px;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
    letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    border: 2px solid var(--warm-charcoal, #2C2A25);
    box-shadow: 3px 3px 0 var(--warm-charcoal, #2C2A25);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .nav-mobile-menu .nav-mobile-actions a.nm-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--warm-charcoal, #2C2A25); }
  .nm-btn--wa       { background: var(--tbc-yellow, #FCD10F); color: #2C2A25; }
  .nm-btn--diwali   { background: var(--ivory-cream, #F4ECD8); color: #2C2A25; }
  .nm-btn--franchise{ background: #2C2A25; color: #FCD10F !important; }
  .nav-mobile-menu .nav-mobile-actions a.nm-btn:last-child { border-bottom: 2px solid var(--warm-charcoal, #2C2A25); }
}
.nav-mobile-actions { display: none; }
@media (max-width: 768px) { .nav-mobile-actions { display: grid; } }

/* ---------------------------------------------------------------------
   2 · COMPACT MOBILE MASTHEAD  (<= 600px)
   Title + one tagline + issue pill; hero image reaches the first screen.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .masthead-block .local-fast,
  .masthead-block .nise-lockup,
  .masthead-cols .col-right,
  .masthead-cols .col-left .col-tag { display: none !important; }

  .hero .masthead-block { margin: 0 !important; padding-top: 4px !important; padding-bottom: 0 !important; }
  .masthead-block .row1 { padding: 14px 12px 8px !important; min-height: 0 !important; }
  .masthead-block .row1::before { top: 3px !important; }
  .masthead-block .row1::after  { bottom: 3px !important; }
  .masthead-block .masthead-title { margin: 0 !important; line-height: 1 !important; }
  .masthead-cols { gap: 6px !important; margin-top: 8px !important; padding: 0 !important; display: flex !important; flex-direction: column; align-items: center; }
  .masthead-cols .col-left strong { font-size: 12px !important; line-height: 1.25 !important; display: block; }
  .masthead-cols .col-mid { margin: 0 !important; }
  .masthead-cols .col-mid .issue-tag { display: inline-block; padding: 3px 10px !important; font-size: 10px !important; letter-spacing: .12em; }
  .hero .sub-rule { padding: 5px 10px !important; margin-top: 4px !important; }
  main { padding-top: 64px !important; }
  .brand-headline { padding: 12px 16px 8px !important; }
  .brand-headline .pv-label { margin-bottom: 6px !important; }
}

/* ---------------------------------------------------------------------
   3 · LANDMARK FRAME SYSTEM
   Every landmark clip: full width of the content column, 16:9 on desktop,
   4:5 on phones, cover edge to edge, 2px charcoal border + offset shadow,
   centred, no sideways overflow.
   --------------------------------------------------------------------- */
:root {
  --lm-ink: var(--warm-charcoal, #2C2A25);
  --lm-max: 1080px;
}
.lm-frame {
  position: relative !important;
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--lm-max) !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 9;
  overflow: hidden !important;
  background: var(--lm-ink);
  border: 2px solid var(--lm-ink);
  box-shadow: 8px 8px 0 var(--lm-ink);
  z-index: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  grid-area: auto !important;
  justify-self: center !important;
  align-self: auto !important;
}
/* Scroll-in reveal for the frames (opacity + scale only: no layout shift) */
.reveal.reveal--lm { opacity: 0; transform: scale(.97); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.reveal.reveal--lm.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal.reveal--lm { opacity: 1; transform: none; transition: none; } }

.lm-frame .arch-video-host,
.lm-frame > .arch-video-host { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lm-frame .arch-poster,
.lm-frame .arch-video {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover; object-position: center;
  mix-blend-mode: normal !important;
  transform: none !important;
  display: block;
}
.lm-frame .arch-video { background: transparent; }
.arch-video-host.is-playing .arch-poster { opacity: 0; transition: opacity .25s ease .05s; }
@media (max-width: 600px) {
  .lm-frame { aspect-ratio: 4 / 5; box-shadow: 5px 5px 0 var(--lm-ink); }
}

/* Landmark sections: one centred column; copy card above/below the frame
   (no more grid-overlap, no sideways bleed). */
.pv-arch-section--story .pv-arch-inner,
.pv-arch-section--founders .pv-arch-inner,
.pv-arch-section--press .pv-arch-inner--press,
.pv-arch-section--chaat .pv-arch-inner,
.pv-arch-section--franchise .pv-arch-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: calc(var(--lm-max) + 40px) !important;
  margin: 0 auto !important;
  padding-left: 20px !important; padding-right: 20px !important;
  box-sizing: border-box;
  min-height: 0 !important;
  overflow: visible;
}
.pv-arch-section--story .pv-arch-copy,
.pv-arch-section--founders .pv-arch-copy,
.pv-arch-section--press .pv-arch-inner--press > .pv-arch-copy,
.pv-arch-section--franchise .pv-arch-copy {
  position: relative !important;
  grid-area: auto !important;
  transform: none !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  justify-self: auto !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
.pv-arch-section--chaat .pv-arch-copy {
  transform: none !important; width: 100% !important; max-width: 760px !important; margin: 0 auto !important;
  position: relative !important;
}
.pv-arch-section--chaat { overflow: visible; }
/* Press section: the old 144px top shove existed for the overlap */
.pv-arch-section--press { padding-top: 56px !important; }
@media (max-width: 600px) {
  .pv-arch-section--story .pv-arch-inner,
  .pv-arch-section--founders .pv-arch-inner,
  .pv-arch-section--press .pv-arch-inner--press,
  .pv-arch-section--chaat .pv-arch-inner,
  .pv-arch-section--franchise .pv-arch-inner { gap: 20px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .pv-arch-section--story .pv-arch-copy,
  .pv-arch-section--founders .pv-arch-copy,
  .pv-arch-section--press .pv-arch-inner--press > .pv-arch-copy,
  .pv-arch-section--franchise .pv-arch-copy { padding: 20px 18px !important; }
}

/* Traffic-signal clip beside the enquiry form: now a full-frame clip, same frame system */
.cta-signal { --cta-signal-w: clamp(280px, 36vw, 500px); }
.cta-signal .lm-frame .arch-video-host { aspect-ratio: auto !important; }
.cta-signal .lm-frame .arch-video,
.cta-signal .lm-frame .arch-poster { object-fit: cover !important; mix-blend-mode: normal !important; }
@media (max-width: 980px) { .form-top--signal .cta-signal { --cta-signal-w: min(100%, 460px); width: min(100%, 460px); } }

/* Hero brand video: full-bleed width, height from the clip's aspect ratio */
.brand-stage--video .brand-video-wrap {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
}
.brand-stage--video .brand-video-wrap .brand-poster,
.brand-stage--video .brand-video-wrap .brand-video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover; object-position: center;
  display: block;
}
.brand-stage--video .brand-video-wrap.is-playing .brand-poster { opacity: 0; transition: opacity .25s ease .05s; }
@media (max-width: 600px) {
  .brand-stage--video .brand-video-wrap { aspect-ratio: 1 / 1; }
}
.pv-arch-section--brand .pv-arch-frame--brand { overflow: hidden !important; }

/* ---------------------------------------------------------------------
   4 · PHONE LAYOUT BUGS
   --------------------------------------------------------------------- */
/* 4a · Dear Aunty Bhukkad: the big numeral no longer sits on the
   "A. from Bur Dubai writes" line; it moves to the top of the card body as a
   corner mark, and the byline wraps underneath it. */
@media (max-width: 780px) {
  .menu-aunty .aunty-card { grid-template-columns: 78px minmax(0, 1fr); }
  .menu-aunty .aunty-card .body { padding: 14px 16px 16px !important; }
  .menu-aunty .aunty-card .pct {
    position: static !important;
    display: block; text-align: right;
    font-size: 26px !important; line-height: 1; opacity: .55;
    margin: 0 0 6px;
  }
  .menu-aunty .aunty-card .askr { display: block !important; letter-spacing: .14em !important; margin-bottom: 8px !important; line-height: 1.4; }
  .menu-aunty .aunty-card .askr::before { vertical-align: middle; margin-right: 8px; }
  .menu-aunty .aunty-card .stub { padding: 12px 4px !important; }
  .menu-aunty .aunty-card .stub .name { font-size: 11px !important; letter-spacing: .14em; }
  .menu-aunty .aunty-card .qline { font-size: 17px !important; }
  .menu-aunty .aunty-card .a { font-size: 15px !important; }
}

/* 4b · Journey tickets: keep the serial / number row inside the ticket */
@media (max-width: 600px) {
  .journey-tix { overflow-x: clip; }
  .bbt-slot { max-width: 100%; }
  .bbt-ticket, .bbt-face { max-width: 100%; box-sizing: border-box; }
  .bbt-face--front { padding-left: 10px !important; padding-right: 10px !important; }
  .bbt-serial { font-size: min(17px, 3.5vw) !important; letter-spacing: 0 !important; padding-left: 3px; padding-right: 3px; white-space: nowrap; overflow: hidden; }
  .bbt-header { padding-left: 6px !important; padding-right: 6px !important; font-size: 12px !important; }
  .bbt-cell, .bbt-lcell { font-size: 11px !important; min-width: 0; }
  .bbt-yr { font-size: 24px !important; }
  .bbt-outlet { font-size: 12px !important; }
}

/* 4c · Franchise enquiry form: the For-Hire meter was scaled with a CSS
   transform (x1.5), which grows it visually but not in layout, so it spilled
   over the "Full name" label. Size it for real instead, and keep it inside
   its own row. The email button wraps/shrinks instead of being cut off. */
.franchise-cta-block--editorial.is-form .form-top--signal .form-meter { height: auto !important; overflow: visible; }
.franchise-cta-block--editorial.is-form .form-meter .cta-meter {
  transform: none !important;
  width: 100% !important;
  height: auto !important;
}
.franchise-cta-block--editorial.is-form .form-top--signal .form-meter .meter-stage { max-width: 200px !important; width: 100%; }
@media (max-width: 980px) {
  .franchise-cta-block--editorial.is-form .form-top--signal .form-meter {
    position: relative; z-index: 0; width: 100%;
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: flex; justify-content: center;
  }
  .franchise-cta-block--editorial.is-form .form-top--signal .form-meter .meter-stage { max-width: 150px !important; margin: 0 auto !important; }
  .franchise-cta-block--editorial.is-form .form-top--signal { margin-bottom: 22px !important; row-gap: 14px !important; }
  .franchise-form { position: relative; z-index: 1; clear: both; }
}
.franchise-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.franchise-cta-row .btn-ghost,
.franchise-cta-row .btn-primary {
  flex: 1 1 220px; min-width: 0; max-width: 100%;
  box-sizing: border-box;
  white-space: normal !important; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
@media (max-width: 600px) {
  .franchise-cta-row .btn-ghost {
    font-size: min(13px, 3.3vw) !important; letter-spacing: .02em !important;
    padding-left: 10px !important; padding-right: 10px !important;
    white-space: nowrap !important;
  }
}

/* ---------------------------------------------------------------------
   5 · PRESS CARDS (homepage "Press & Films")
   screenshot (4:3) on top, caption band below
   --------------------------------------------------------------------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 560px) { .press-grid { grid-template-columns: minmax(0, 1fr); padding: 0 16px; } }
.press-card { display: block; }
.press-card__link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--ivory-cream, #F4ECD8);
  border: 2px solid var(--warm-charcoal, #2C2A25);
  box-shadow: 5px 5px 0 var(--warm-charcoal, #2C2A25);
  color: var(--warm-charcoal, #2C2A25);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.press-card__link:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--warm-charcoal, #2C2A25); }
.press-card__shot {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--warm-charcoal, #2C2A25);
  border-bottom: 2px solid var(--warm-charcoal, #2C2A25);
}
.press-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.press-card__cap { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.press-card__pub {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--terracotta, #C44B2A);
}
.press-card__title {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 800;
  font-size: 19px; line-height: 1.22; margin: 0; color: var(--warm-charcoal, #2C2A25);
  text-wrap: pretty;
}
.press-card__go {
  margin-top: auto; padding-top: 4px;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: 14px;
  color: var(--warm-charcoal, #2C2A25);
}
.press-card__link:hover .press-card__go { color: var(--terracotta, #C44B2A); }

/* ---------------------------------------------------------------------
   6 · SHOW-ALL COLLAPSE (phones): first two cards, rest behind a toggle
   --------------------------------------------------------------------- */
.show-all-toggle { display: none; }
@media (max-width: 600px) {
  .has-collapse:not(.is-open) .is-extra { display: none !important; }
  .show-all-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 46px; margin: 16px 0 4px; padding: 12px 16px;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12.5px;
    letter-spacing: .14em; text-transform: uppercase;
    background: var(--tbc-yellow, #FCD10F); color: #2C2A25;
    border: 2px solid #2C2A25; box-shadow: 3px 3px 0 #2C2A25; cursor: pointer;
  }
  .show-all-toggle[aria-expanded="true"] { background: var(--ivory-cream, #F4ECD8); }
  .show-all-toggle::after { content: "\2193"; margin-left: 10px; font-size: 15px; transition: transform .2s ease; }
  .show-all-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
}

/* ---------------------------------------------------------------------
   7 · FRANCHISE SCOREBOARD — five tiles, longer sub-lines
   --------------------------------------------------------------------- */
.franchise-scoreboard .fs-sub { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   8 · DISH LOOPS ("What's Cooking") + INSTAGRAM GRID + FRANCHISE OUTLET BLOCK
   --------------------------------------------------------------------- */
/* Dish card media: photo or loop fills the image area edge to edge */
.dish-card .photo .dish-media { position: absolute; inset: 0; display: block; }
.dish-card .photo .dish-still,
.dish-card .photo .dish-loop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 600ms var(--ease-std, cubic-bezier(.4,0,.2,1)), opacity .3s ease;
}
.dish-card .photo .dish-loop { background: transparent; }
.dish-card .photo .dish-media.is-playing .dish-still { opacity: 0; }
.dish-card:hover .photo .dish-still,
.dish-card:hover .photo .dish-loop { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .dish-card .photo .dish-loop { display: none; } }

/* Instagram: real dish photos, square, caption = dish name */
.insta-grid { gap: 12px; }
@media (max-width: 600px) { .insta-grid { gap: 8px !important; } }
.insta-grid .insta-tile:nth-child(odd),
.insta-grid .insta-tile:nth-child(even) { transform: none; }
.insta-grid .insta-tile {
  aspect-ratio: 1 / 1; padding: 0; overflow: hidden;
  background: var(--warm-charcoal, #2C2A25) !important;
  border: 2px solid var(--warm-charcoal, #2C2A25) !important;
  box-shadow: 4px 4px 0 var(--warm-charcoal, #2C2A25);
}
.insta-grid .insta-tile:hover { transform: none; z-index: 1; }
.insta-tile__link { position: absolute; inset: 0; display: block; color: #F4ECD8; text-decoration: none; }
.insta-tile .insta-tile__link img {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal;
  display: block; transition: transform 500ms var(--ease-std, cubic-bezier(.4,0,.2,1));
}
@media (hover: hover) { .insta-tile:hover .insta-tile__link img { transform: scale(1.06); } }
.insta-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 10px 8px;
  background: linear-gradient(180deg, rgba(20,18,15,0) 0%, rgba(20,18,15,.78) 100%);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  color: #F4ECD8;
}
@media (max-width: 600px) { .insta-tile__cap { font-size: 9.5px; padding: 16px 6px 6px; letter-spacing: .06em; } }

/* Franchise page: real outlet block (photo left, text right; photo on top on phones) */
.fr-outlet {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px; align-items: center; margin-top: 44px;
}
.fr-outlet__fig { margin: 0; }
.fr-outlet__frame {
  aspect-ratio: 4 / 5; overflow: hidden;
  border: 2px solid var(--warm-charcoal, #2C2A25);
  box-shadow: 8px 8px 0 var(--warm-charcoal, #2C2A25);
  background: var(--warm-charcoal, #2C2A25);
}
.fr-outlet__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 4%; display: block; }
.fr-outlet__fig figcaption {
  margin-top: 16px; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: 14px; color: var(--fg-secondary, #4a3a30);
}
.fr-outlet__label {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--terracotta, #C44B2A); margin-bottom: 8px;
}
.fr-outlet__copy h3 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 800;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; margin: 0 0 14px;
}
.fr-outlet__copy p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; max-width: 52ch; }
@media (max-width: 720px) {
  .fr-outlet { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
  .fr-outlet__frame { box-shadow: 5px 5px 0 var(--warm-charcoal, #2C2A25); }
}