/* ===== BASE / CORE ===== */

/* Self-hosted brand fonts — no dependency on Google Fonts being reachable */
@font-face{ font-family:'Jaro'; src:url('fonts/Jaro-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lexend'; src:url('fonts/Lexend-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lexend'; src:url('fonts/Lexend-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lexend'; src:url('fonts/Lexend-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lexend'; src:url('fonts/Lexend-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lexend'; src:url('fonts/Lexend-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }




/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --gm-red:   #EB0000;
  --gm-grey:  #3A3A3A;
  --gm-white: #F0EFE9;
  --gm-teal:  #00DDC2;
  --gm-paper: #FFFFFF;
  --gm-line:  rgba(58,58,58,0.16);
  --gm-line-on-dark: rgba(240,239,233,0.18);

  --f-display: 'Jaro', 'Impact', sans-serif;
  --f-body: 'Lexend', -apple-system, sans-serif;

  /* near-flat, screen-print radius scale */
  --r-0: 0px; --r-sm: 2px; --r-md: 4px;

  --pad-x: clamp(20px, 5vw, 64px);
  --max: 1440px;

  --gm-motion-fast: 160ms;
  --gm-motion-medium: 280ms;
  --gm-motion-slow: 600ms;
  --gm-ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --gm-ease-snap: cubic-bezier(0.76, 0, 0.24, 1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--f-body);
  background: var(--gm-white);
  color: var(--gm-grey);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .cassette-orbit,.cassette-spin{
    animation:none!important;
  }
}

:focus-visible{ outline:3px solid var(--gm-teal); outline-offset:3px; }

.checker-strip{
  height:12px;
  background-image:
    linear-gradient(45deg, var(--gm-grey) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gm-grey) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gm-grey) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gm-grey) 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}
.checker-strip.big{ height:22px; background-size:22px 22px; background-position:0 0,0 11px,11px -11px,-11px 0; }
.checker-strip.on-red{
  background-image:
    linear-gradient(45deg, var(--gm-white) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gm-white) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gm-white) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gm-white) 75%);
  background-color: var(--gm-red);
}

.grain{ position:relative; }
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ============================================================
   SECTION NUMBER — replaces generic "eyebrow" kickers.
   A large graphic device, not UI metadata.
   ============================================================ */
.sec-num{ display:flex; align-items:flex-end; gap:16px; margin-bottom:10px; }
.sec-num .n{ font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 5rem); line-height:0.72; color: var(--gm-teal); }
.sec-num .t{ font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; padding-bottom:10px; color: var(--gm-grey); }
.sec-num.on-dark .t{ color: var(--gm-white); }
.sec-num.on-red .n{ color: var(--gm-grey); }
.sec-num.on-red .t{ color: var(--gm-white); }

.poster-h{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; line-height:0.88; }
.poster-h em{ font-style:normal; color: var(--gm-red); }
.on-dark .poster-h, .poster-h.on-dark{ color: var(--gm-white); }

.misreg{ position:relative; display:inline-block; }
.misreg::before{ content: attr(data-text); position:absolute; left:3px; top:2px; color: var(--gm-red); z-index:-1; opacity:0.8; white-space:nowrap; }
.misreg.on-red::before{ color: var(--gm-grey); opacity:0.5; }

/* ============================================================
   NAV
   ============================================================ */
nav{
  position: fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad-x);
  background: transparent;
  transition: background var(--gm-motion-medium) var(--gm-ease-editorial), padding var(--gm-motion-medium), border-color var(--gm-motion-medium);
  border-bottom: 1px solid transparent;
}
nav.scrolled{ background: var(--gm-white); padding-top:12px; padding-bottom:12px; border-bottom-color: var(--gm-line); }
.nav-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.nav-logo-text{ font-family: var(--f-display); color: var(--gm-white); font-size:1.1rem; transition:color var(--gm-motion-medium); }
nav.scrolled .nav-logo-text{ color: var(--gm-grey); }

.nav-links{ display:flex; gap:2px; list-style:none; align-items:center; }
.nav-links a{
  color: rgba(240,239,233,0.9); text-decoration:none; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform:uppercase; padding: 10px 16px; position:relative;
  transition: color var(--gm-motion-medium);
}
nav.scrolled .nav-links a{ color: var(--gm-grey); }
.nav-links a::after{
  content:''; position:absolute; left:16px; right:16px; bottom:6px; height:2px; background: var(--gm-teal);
  transform:scaleX(0); transform-origin:left; transition: transform var(--gm-motion-fast) var(--gm-ease-snap);
}
.nav-links a:hover::after{ transform:scaleX(1); }

.hamburger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span{ width:22px; height:2px; background:var(--gm-white); display:block; transition: background var(--gm-motion-medium); }
nav.scrolled .hamburger span{ background: var(--gm-grey); }

.mobile-menu{ display:none; position:fixed; inset:0; z-index:210; background: var(--gm-red); padding: 0; flex-direction:column; }
.mobile-menu.open{ display:flex; }
.mm-top{ display:flex; justify-content:space-between; align-items:center; padding:18px var(--pad-x); border-bottom:1px solid rgba(240,239,233,0.25); }
.mm-close{ color:var(--gm-white); font-size:1.8rem; line-height:1; }
.mm-links{ flex:1; display:flex; flex-direction:column; justify-content:center; padding: 0 var(--pad-x); }
.mm-links a{
  display:flex; align-items:baseline; gap:14px; color: var(--gm-white); text-decoration:none;
  font-family: var(--f-display); font-size: clamp(2.2rem,10vw,3.2rem); text-transform:uppercase;
  padding: 12px 0; border-bottom: 1px solid rgba(240,239,233,0.22);
}
.mm-links a .mm-idx{ font-family: var(--f-body); font-size:0.8rem; color: var(--gm-white); opacity:0.6; }
.mm-foot{ padding: 22px var(--pad-x) calc(22px + env(safe-area-inset-bottom)); }
.mm-order{ display:block; text-align:center; background:var(--gm-white); color:var(--gm-red); font-family:var(--f-display); font-size:1.3rem; text-transform:uppercase; padding:16px; text-decoration:none; }

@media (max-width: 880px){
  .nav-links{ display:none; }
  nav > a.btn{ display:none; }
  .hamburger{ display:flex; }
}

/* ============================================================
   BUTTONS — signage, not software
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-body); font-size: 0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding: 15px 26px; text-decoration:none; border-radius: var(--r-0);
  transition: transform var(--gm-motion-fast) var(--gm-ease-snap), box-shadow var(--gm-motion-fast) var(--gm-ease-snap), background var(--gm-motion-fast);
}
.btn .arrow{ transition: transform var(--gm-motion-fast) var(--gm-ease-snap); }
.btn:hover .arrow{ transform: translateX(5px); }

.btn-diner{ background: var(--gm-red); color: var(--gm-white); box-shadow: 0 4px 0 var(--gm-grey); }
.btn-diner:hover{ background: var(--gm-grey); transform: translateY(-2px); box-shadow: 0 6px 0 var(--gm-grey); }
.btn-diner:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--gm-grey); }

.btn-ticket{ background: var(--gm-white); color: var(--gm-grey); border: 2px solid var(--gm-grey); }
.btn-ticket:hover{ border-color: var(--gm-teal); transform: translateY(-2px); }
.btn-ticket:active{ transform: translateY(1px); }
.btn-ticket.on-dark{ background: transparent; color: var(--gm-white); border-color: rgba(240,239,233,0.5); }
.btn-ticket.on-dark:hover{ border-color: var(--gm-teal); }

.text-cta{
  font-weight:700; font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
  color: var(--gm-grey); border-bottom:2px solid var(--gm-red); padding-bottom:4px; display:inline-flex; align-items:center; gap:8px;
  transition: color var(--gm-motion-fast);
}
.text-cta .arrow{ transition: transform var(--gm-motion-fast) var(--gm-ease-snap); }
.text-cta:hover{ color: var(--gm-red); }
.text-cta:hover .arrow{ transform: translateX(5px); }
.text-cta.on-dark{ color: var(--gm-white); border-color: var(--gm-teal); }
.text-cta.on-dark:hover{ color: var(--gm-teal); }

/* ============================================================
   HERO — a diner poster, not a SaaS banner
   ============================================================ */
.hero{ position:relative; min-height:100svh; overflow:hidden; background: var(--gm-grey); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 38%; animation: heroPhotoIn 1.3s var(--gm-ease-editorial) both; }
@keyframes heroPhotoIn{ from{ transform:scale(1.035); } to{ transform:scale(1); } }
.hero-scrim{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(26,15,10,0.72) 0%, rgba(26,15,10,0.05) 34%, transparent 55%); z-index:1; }

.hero-mark{ position:absolute; top:clamp(-90px,-8vw,-40px); right:clamp(-90px,-8vw,-30px); width:clamp(220px,30vw,440px); height:clamp(220px,30vw,440px); border-radius:50%; overflow:hidden; opacity:0.16; z-index:1; }
.hero-mark img{ width:100%; height:100%; object-fit:cover; }

.hero-plate{
  position:absolute; left:0; bottom:26%; z-index:3; background: var(--gm-red);
  padding: 22px clamp(28px,5vw,56px) 20px 24px; transform: rotate(-0.8deg); transform-origin:left bottom;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.28);
  max-width: min(94vw, 880px);
}
.hero-h{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; color: var(--gm-white); font-size: clamp(3.4rem, 9vw, 8rem); line-height:0.82; }
.hero-h .line{ overflow:hidden; display:block; }
.hero-h .line span{ display:block; transform:translateY(115%); animation: lineReveal 0.7s var(--gm-ease-editorial) forwards; }
.hero-h .line:nth-child(2) span{ animation-delay:0.1s; }
@keyframes lineReveal{ to{ transform:translateY(0); } }

.hero-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding: 22px var(--pad-x) 26px;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px;
}
.hero-sub{ font-size: 0.85rem; line-height:1.6; color: rgba(240,239,233,0.85); max-width: 360px; font-weight:300; opacity:0; animation: fadeUp 0.6s var(--gm-ease-editorial) 0.5s forwards; }
.hero-btns{ display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation: fadeUp 0.6s var(--gm-ease-editorial) 0.6s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }

.hero-cities{ position:absolute; top:96px; right:var(--pad-x); z-index:3; text-align:right; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color: rgba(240,239,233,0.55); font-weight:700; }
.hero-cities span:not(.sep){ color: rgba(240,239,233,0.92); }
.hero-cities .sep{ opacity:0.4; margin:0 6px; }

@media (max-width: 760px){
  .hero-plate{ bottom:32%; max-width:92vw; padding:16px 20px 14px 18px; }
  .hero-h{ font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero-mark{ display:none; }
  .hero-cities{ position:static; text-align:left; margin-top:14px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; padding-bottom: calc(26px + 74px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{ background: var(--gm-red); overflow:hidden; padding: 13px 0; }
.ticker-track{ display:flex; width:max-content; animation: ticker-scroll 36s linear infinite; }
.ticker-item{ font-family: var(--f-display); font-size: 1.15rem; text-transform:uppercase; color: var(--gm-white); padding: 0 1.7rem; white-space:nowrap; display:flex; align-items:center; gap:1.7rem; }
.ticker-item::after{ content:'✦'; color: var(--gm-white); font-size:0.7rem; opacity:0.65; }
.ticker-item.teal-sep::after{ color: var(--gm-teal); opacity:1; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   SIGNATURE FOOD
   ============================================================ */
.signature{ padding: 88px 0 80px; background: var(--gm-white); }
.sig-head{ padding: 0 var(--pad-x); margin-bottom: -18px; position:relative; z-index:2; }
.sig-head h2{ font-size: clamp(2.6rem, 7vw, 6rem); }

.sig-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:6px; padding: 0 var(--pad-x); }

.sig-item{ position:relative; overflow:hidden; background:var(--gm-grey); }
.sig-item img{ width:100%; height:100%; object-fit:cover; transition: transform var(--gm-motion-medium) var(--gm-ease-editorial); }
.sig-item:hover img{ transform: scale(1.03); }
.sig-item-label{
  position:absolute; left:0; right:0; bottom:0; padding: 24px; color: var(--gm-white);
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
}
.sig-item-name{ font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.5rem,3.2vw,3rem); line-height:0.95; }
.sig-item-desc{ font-size:0.76rem; color: rgba(240,239,233,0.75); margin-top:8px; max-width:34ch; line-height:1.5; }
.sig-item-price{
  position:absolute; top:16px; right:16px; background: var(--gm-white); color:var(--gm-grey); font-weight:800; font-size:0.85rem;
  padding: 6px 12px; transform: rotate(-3deg); box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
}

.sig-item.a{ grid-column: 1 / 8; grid-row: 1 / 3; aspect-ratio: 4/3; }
.sig-item.b{ grid-column: 8 / 13; grid-row: 1 / 2; aspect-ratio: 4/3.1; }
.sig-item.c{ grid-column: 8 / 13; grid-row: 2 / 3; aspect-ratio: 4/3.1; }
.sig-item.d{ grid-column: 1 / 13; aspect-ratio: 22/7; }

.window-panel{ position:absolute; top:0; bottom:0; width:52%; background: var(--gm-grey); z-index:3; transition: transform 0.85s var(--gm-ease-snap); }
.window-panel.left{ left:0; } .window-panel.right{ right:0; }
.sig-item.a.opened .window-panel.left{ transform: translateX(-100%); }
.sig-item.a.opened .window-panel.right{ transform: translateX(100%); }

.sig-more{ margin-top: 28px; text-align:right; padding: 0 var(--pad-x); }

@media (max-width: 800px){
  .sig-item.a, .sig-item.b, .sig-item.c, .sig-item.d{ grid-column: 1/13; grid-row:auto; aspect-ratio: 4/3; }
  .sig-grid{ gap:4px; }
}

/* ============================================================
   ATMOSPHERE — imagery does the talking
   ============================================================ */
.atmosphere{ background: var(--gm-grey); padding: 84px 0; color: var(--gm-white); }
.atmo-head{ padding: 0 var(--pad-x); margin-bottom:26px; }
.atmo-grid{ display:grid; grid-template-columns: 1.5fr 1fr; }
.atmo-photo{ position:relative; overflow:hidden; }
.atmo-photo img{ width:100%; height:100%; object-fit:cover; }
.atmo-photo.big{ min-height: 580px; }
.atmo-photo.small{ min-height: 268px; }
.atmo-tags{ display:flex; flex-direction:column; justify-content:center; gap:2px; background: var(--gm-red); padding: 32px clamp(20px,3vw,40px); }
.atmo-tag{ font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.5rem, 2.8vw, 2.4rem); color: rgba(240,239,233,0.4); line-height:1.18; }
.atmo-tag.on{ color: var(--gm-white); }
.atmo-tag em{ font-style:normal; color: var(--gm-grey); }
.vinyl{ width:60px; height:60px; border-radius:50%; flex-shrink:0; margin-top:16px; background: repeating-radial-gradient(circle at center,#111 0 2px,#222 2px 4px); border:3px solid var(--gm-grey); position:relative; animation: vinylSpin 18s linear infinite; }
.vinyl::after{ content:''; position:absolute; inset:24px; border-radius:50%; background: var(--gm-white); }
@keyframes vinylSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

@media (max-width: 860px){ .atmo-grid{ grid-template-columns:1fr; } .atmo-photo.big{ min-height:320px; } }

/* ============================================================
   STORY
   ============================================================ */
.story{ padding: 92px var(--pad-x); background: var(--gm-white); max-width: var(--max); margin:0 auto; }
.story-grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items:center; }
.story-text p{ font-size: 0.95rem; line-height:1.85; color:#4a4a4a; margin-bottom: 1.1rem; max-width: 60ch; }
.story-founder{ font-size:0.75rem; letter-spacing:0.04em; text-transform:uppercase; color: var(--gm-red); font-weight:700; margin-top: 1.6rem; }
.story-h{ font-size: clamp(2.4rem,5vw,4.2rem); margin-bottom:20px; }

.story-photo-wrap{ position:relative; transform: rotate(1deg); }
.story-photo{ position:relative; overflow:hidden; aspect-ratio: 4/5; box-shadow: 8px 10px 0 rgba(58,58,58,0.14); }
.story-photo img{ width:100%; height:100%; object-fit:cover; }

.brand-seal{ position:absolute; left:-34px; bottom:-34px; width:104px; height:104px; z-index:3; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.brand-seal-ring{ width:100%; height:100%; animation: sealSpin 30s linear infinite; color: var(--gm-grey); }
@keyframes sealSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.brand-seal-center{ position:absolute; inset:0; margin:auto; width:42px; height:42px; border-radius:50%; background: var(--gm-white); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid var(--gm-grey); }
.brand-seal-center img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 860px){
  .story-grid{ grid-template-columns:1fr; gap:52px; }
  .story-photo-wrap{ order:-1; }
  .story-photo{ aspect-ratio:16/9; }
}

/* ============================================================
   STAT
   ============================================================ */
.stat{ background: var(--gm-red); color: var(--gm-white); padding: 76px var(--pad-x); text-align:center; position:relative; overflow:hidden; }
.stat-num{ font-family: var(--f-display); text-transform:uppercase; font-size: clamp(4.8rem, 17vw, 13rem); line-height:0.82; position:relative; z-index:2; }
.stat-label{ font-size: 0.85rem; letter-spacing:0.24em; text-transform:uppercase; font-weight:700; margin-top:10px; color: rgba(240,239,233,0.9); }
.stat-sub{ margin-top: 32px; font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.2rem,2.8vw,2rem); color: var(--gm-grey); background:var(--gm-white); display:inline-block; padding:8px 22px; transform: rotate(-1deg); }

/* ============================================================
   MENU BOARD
   ============================================================ */
.menu-section{ background: var(--gm-grey); color: var(--gm-white); padding: 84px 0 88px; }
.menu-head{ padding: 0 var(--pad-x); }
.menu-wrap{ max-width: var(--max); margin:0 auto; padding: 0 var(--pad-x); }

.menu-tabs{ display:flex; flex-wrap:wrap; gap:0; margin: 34px 0 0; border-top:2px solid var(--gm-line-on-dark); border-left:2px solid var(--gm-line-on-dark); }
.menu-tab{
  display:flex; align-items:center; gap:8px; border-right:2px solid var(--gm-line-on-dark); border-bottom:2px solid var(--gm-line-on-dark);
  color: rgba(240,239,233,0.68); font-size: 0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding: 13px 18px; transition: all var(--gm-motion-fast); border-radius:0;
}
.menu-tab .jcode{ font-family: var(--f-display); font-size:0.85rem; color: var(--gm-teal); }
.menu-tab:hover{ background: rgba(240,239,233,0.06); color: var(--gm-white); }
.menu-tab.active{ background: var(--gm-red); color: var(--gm-white); }
.menu-tab.active .jcode{ color: var(--gm-white); }

@media (max-width: 700px){
  .menu-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; border-left:none; margin-left:calc(var(--pad-x) * -1); margin-right:calc(var(--pad-x) * -1); padding-left:var(--pad-x); }
  .menu-tab{ flex-shrink:0; border-left:2px solid var(--gm-line-on-dark); }
}

.menu-body{ display:grid; grid-template-columns: 1fr; margin-top: 30px; }

.menu-panel{ display:none; }
.menu-panel.active{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 6px 48px; align-content:start; }

.menu-note{ grid-column: 1/-1; font-size: 0.8rem; font-style:italic; color: rgba(240,239,233,0.55); margin-bottom: 4px; max-width:70ch; }

.menu-group{ margin-bottom: 24px; break-inside: avoid; }
.menu-group-title{ font-family: var(--f-display); text-transform:uppercase; font-size: 1.15rem; color: var(--gm-teal); padding-bottom:6px; margin-bottom:8px; border-bottom: 2px solid var(--gm-red); display:inline-block; }
.menu-row{ display:flex; align-items:baseline; gap: 10px; padding: 6px 0; font-size: 0.85rem; border-bottom: 1px dotted rgba(240,239,233,0.12); }
.menu-row .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-bottom:2px; }
.dot.v{ background: #4C8B57; } .dot.nv{ background: var(--gm-red); }
.menu-row .name{ flex-shrink:0; color: rgba(240,239,233,0.92); }
.menu-row .leader{ flex:1; border-bottom: 1px dotted rgba(240,239,233,0.25); transform: translateY(-4px); min-width: 16px; }
.menu-row .price{ font-weight:700; color: var(--gm-white); white-space:nowrap; flex-shrink:0; }
.menu-row.multi .name{ flex-shrink:1; color: rgba(240,239,233,0.7); font-size:0.8rem; }

.menu-preview-col{ display:none; }
@media (min-width:1024px){
  .menu-body{ grid-template-columns: 1fr 340px; gap:44px; align-items:start; }
  .menu-preview-col{ display:block; }
  .menu-preview-sticky{ position:sticky; top:96px; aspect-ratio:4/5; overflow:hidden; border:3px solid var(--gm-red); }
  .menu-preview-sticky img{ width:100%; height:100%; object-fit:cover; }
}
@media (max-width: 760px){ .menu-panel.active{ grid-template-columns: 1fr; } }

/* ============================================================
   RECEIPT
   ============================================================ */
.receipt-wrap{ display:flex; justify-content:center; padding: 44px var(--pad-x) 84px; background: var(--gm-white); }
.receipt{
  background: var(--gm-paper); color: var(--gm-grey); width:280px; padding: 26px 22px 30px;
  font-size:0.78rem; line-height:1.9; text-align:center; transform: rotate(-1.6deg);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.28);
  clip-path: polygon(0% 0%,100% 0%,100% 96%,95% 100%,90% 96%,85% 100%,80% 96%,75% 100%,70% 96%,65% 100%,60% 96%,55% 100%,50% 96%,45% 100%,40% 96%,35% 100%,30% 96%,25% 100%,20% 96%,15% 100%,10% 96%,5% 100%,0% 96%);
  overflow:hidden; opacity:0; transform-origin:top center;
}
.receipt.in{ animation: receiptIn 0.5s var(--gm-ease-snap) forwards; }
@keyframes receiptIn{ from{ opacity:0; transform: translateY(20px) rotate(-1.6deg); } to{ opacity:1; transform: translateY(0) rotate(-1.6deg); } }
.receipt-brand{ font-family: var(--f-display); font-size:1.2rem; margin-bottom:10px; }
.receipt-line{ border-top: 1px dashed rgba(58,58,58,0.32); margin: 10px 0; }
.receipt-thanks{ margin-top:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; font-size:0.68rem; }

/* ============================================================
   LOCATIONS — editorial listing, not database cards
   ============================================================ */
.locations{ padding: 84px 0; background: var(--gm-white); }
.loc-head{ padding: 0 var(--pad-x); margin-bottom:30px; }
.loc-list{ border-top: 3px solid var(--gm-grey); }
.loc-row{
  display:grid; grid-template-columns: 90px 1.5fr 1fr auto; gap:24px; align-items:center;
  padding: 26px var(--pad-x); border-bottom: 3px solid var(--gm-grey);
}
.loc-row.featured{ background: var(--gm-red); color: var(--gm-white); }
.loc-row-num{ font-family: var(--f-display); font-size: clamp(2.4rem,4vw,3.6rem); color: var(--gm-teal); line-height:1; }
.loc-row.featured .loc-row-num{ color: var(--gm-grey); }
.loc-row-tag{ font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; margin-bottom:6px; font-weight:700; }
.loc-row-name{ font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.5rem,2.6vw,2.2rem); line-height:1.05; transition: transform var(--gm-motion-fast); display:inline-block; }
.loc-row:hover .loc-row-name{ transform: translateX(3px); }
.loc-row-address{ font-size:0.82rem; line-height:1.6; opacity:0.72; }
.loc-row-links{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.loc-link{
  font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding: 10px 15px;
  text-decoration:none; background: var(--gm-grey); color: var(--gm-white); transition: background var(--gm-motion-fast), transform var(--gm-motion-fast);
}
.loc-link:hover{ background: var(--gm-red); transform: translateY(-2px); }
.loc-link.outline{ background:transparent; border:2px solid currentColor; color:inherit; }
.loc-row.featured .loc-link{ background: var(--gm-white); color: var(--gm-red); }
.loc-link.outline:hover{ border-color: var(--gm-teal); color: var(--gm-teal); }

@media (max-width: 860px){
  .loc-row{ grid-template-columns: 56px 1fr; grid-template-areas: "num name" "num addr" "links links"; row-gap:8px; }
  .loc-row-num{ grid-area:num; } .loc-row-name-wrap{ grid-area:name; }
  .loc-row-address{ grid-area:addr; } .loc-row-links{ grid-area:links; justify-content:flex-start; margin-top:10px; }
}

/* ============================================================
   SOCIAL
   ============================================================ */
.social{ padding: 84px 0; background: var(--gm-grey); border-top: 4px solid var(--gm-teal); }
.social-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; padding: 0 var(--pad-x); }
.social-strip{ display:grid; grid-template-columns: repeat(6,1fr); gap: 4px; padding: 0 var(--pad-x); }
.social-strip a{ position:relative; overflow:hidden; aspect-ratio: 3/4; display:block; }
.social-strip a:nth-child(3n+1){ aspect-ratio: 3/4.6; }
.social-strip a:nth-child(4){ transform: rotate(-1.2deg); z-index:2; box-shadow:0 10px 24px -12px rgba(0,0,0,0.5); }
.social-strip img{ width:100%; height:100%; object-fit:cover; transition: transform var(--gm-motion-medium) var(--gm-ease-editorial); }
.social-strip a:hover img{ transform:scale(1.06); }
.social-cap{ position:absolute; left:0; right:0; bottom:0; padding:9px 11px; font-size:0.6rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:700; color: var(--gm-grey); background: var(--gm-teal); transform: translateY(100%); transition: transform var(--gm-motion-fast) var(--gm-ease-snap); }
.social-strip a:hover .social-cap{ transform: translateY(0); }
@media (max-width: 860px){ .social-strip{ grid-template-columns: repeat(3,1fr); } .social-strip a:nth-child(n){ aspect-ratio:1; transform:none; } }

/* ============================================================
   REVIEWS — wall quote, not testimonial card
   ============================================================ */
.reviews{ padding: 88px var(--pad-x); background: var(--gm-white); }
.review-rail{ max-width: 960px; margin: 0 auto; min-height: 200px; position:relative; }
.review-slide{ display:none; }
.review-slide.active{ display:block; animation: reviewIn 0.28s var(--gm-ease-editorial) both; }
@keyframes reviewIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.review-quote{ font-family: var(--f-display); font-weight:400; font-size: clamp(1.6rem, 4.4vw, 3.2rem); line-height:1.12; color: var(--gm-grey); text-transform:none; }
.review-quote::before{ content:'“'; color:var(--gm-red); } .review-quote::after{ content:'”'; color:var(--gm-red); }
.review-meta{ margin-top: 20px; font-size:0.78rem; letter-spacing:0.03em; text-transform:uppercase; color:#6b6259; font-weight:600; }
.review-meta a{ color: var(--gm-red); text-decoration:none; }

.review-nav{ display:flex; align-items:center; gap:20px; margin-top:30px; }
.review-arrow{ width:40px; height:40px; border:2px solid var(--gm-grey); color:var(--gm-grey); display:flex; align-items:center; justify-content:center; font-size:1rem; transition: all var(--gm-motion-fast); }
.review-arrow:hover{ background: var(--gm-grey); color: var(--gm-white); }
.review-counter{ font-weight:700; letter-spacing:0.08em; font-size:0.78rem; color: var(--gm-grey); }
.review-counter .cur{ color: var(--gm-red); }

.rating-strip{ display:flex; gap:44px; flex-wrap:wrap; margin-top: 48px; padding-top: 32px; border-top: 3px solid var(--gm-grey); max-width:960px; margin-left:auto; margin-right:auto; }
.rating-num{ font-family: var(--f-display); font-size: 2.1rem; color: var(--gm-red); display:block; }
.rating-label{ font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:#6b6259; margin-top:4px; }

/* ============================================================
   FRANCHISE
   ============================================================ */
.franchise{ background: var(--gm-grey); color: var(--gm-white); padding: 88px var(--pad-x); }
.fr-teaser{ max-width: 720px; margin-bottom: 52px; }
.fr-teaser h2{ font-size: clamp(2.4rem,5.4vw,4rem); }
.fr-teaser p{ margin-top:16px; font-size:0.95rem; color: rgba(240,239,233,0.65); max-width: 54ch; line-height:1.7; }
.fr-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.fr-perks{ display:flex; flex-direction:column; gap: 24px; }
.fr-perk-num{ font-family:var(--f-display); color: var(--gm-red); font-size:1.1rem; margin-bottom:4px; display:block; }
.fr-perk-title{ font-weight:700; font-size:0.95rem; margin-bottom:4px; }
.fr-perk-desc{ font-size:0.8rem; color: rgba(240,239,233,0.48); line-height:1.7; max-width:44ch; }
.fr-form{ background: rgba(240,239,233,0.05); border:2px solid var(--gm-line-on-dark); padding: 34px; }
.fr-form-title{ font-family:var(--f-display); text-transform:uppercase; font-size:1.5rem; margin-bottom:6px; }
.fr-form-sub{ font-size:0.82rem; color: rgba(240,239,233,0.78); margin-bottom: 24px; }
.fr-row{ display:grid; grid-template-columns:1fr 1fr; gap: 14px; }
.fr-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
/* Form labels were 9.6px at 3.47:1 — under the AA floor and hard to read on
   the site's only lead-capture surface. Larger and near-opaque. */
.fr-label{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(240,239,233,0.86); font-weight:700; }
.fr-input, .fr-select, .fr-textarea{
  background: rgba(240,239,233,0.06); border:1px solid var(--gm-line-on-dark); color: var(--gm-white);
  font-family:inherit; font-size:0.85rem; padding: 12px 14px; border-radius:0; width:100%; transition: border-color var(--gm-motion-fast);
}
.fr-input:focus, .fr-select:focus, .fr-textarea:focus{ border-color: var(--gm-teal); outline:none; }
.fr-input::placeholder, .fr-textarea::placeholder{ color: rgba(240,239,233,0.32); }
.fr-textarea{ resize:vertical; min-height:76px; }
.fr-select option{ background: var(--gm-grey); }
.fr-submit{
  width:100%; background: var(--gm-red); color:var(--gm-white); border:none; box-shadow: 0 4px 0 var(--gm-white); border-radius:0;
  font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; padding: 15px; margin-top:4px;
  transition: transform var(--gm-motion-fast), box-shadow var(--gm-motion-fast);
}
.fr-submit:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 6px 0 var(--gm-white); }
.fr-submit:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 var(--gm-white); }
/* Consent text was 9.6px at 2.09:1 — effectively invisible. This is the line
   people are agreeing to, so it needs to be legible, not decorative. */
.fr-note{ font-size:0.72rem; color: rgba(240,239,233,0.72); text-align:center; margin-top:10px; line-height:1.6; }
@media (max-width: 860px){ .fr-grid{ grid-template-columns:1fr; } .fr-row{ grid-template-columns:1fr; } }

/* ============================================================
   DINER SIGN — final CTA
   ============================================================ */
.final-cta{ background: var(--gm-red); color: var(--gm-white); padding: 90px var(--pad-x); text-align:center; }
.diner-sign{ display:inline-block; position:relative; padding: 28px clamp(24px,6vw,60px); border: 3px solid var(--gm-white); }
.sign-bulbs{ position:absolute; left:12px; right:12px; display:flex; justify-content:space-between; }
.sign-bulbs.top{ top:-6px; } .sign-bulbs.bottom{ bottom:-6px; }
.bulb{ width:6px; height:6px; border-radius:50%; background: rgba(240,239,233,0.35); }
.diner-sign.lit .bulb{ animation: bulbOn 0.4s ease forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes bulbOn{ to{ background: var(--gm-white); box-shadow: 0 0 8px 2px rgba(240,239,233,0.8); } }
.final-cta h2{ font-family: var(--f-display); text-transform:uppercase; font-size: clamp(3rem, 9vw, 7.5rem); line-height:0.9; }
.final-cta .btns{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background: var(--gm-grey); color: var(--gm-white); }
.foot-tagline{ padding: 56px var(--pad-x) 40px; text-align:center; font-size: clamp(2rem,5.5vw,4rem); border-bottom: 4px solid var(--gm-red); }
.foot-grid{ max-width: var(--max); margin:0 auto; display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; padding: 44px var(--pad-x) 34px; }
.foot-brand{ font-family:var(--f-display); font-size:1.5rem; text-transform:uppercase; margin-bottom:10px; }
.foot-tag{ font-size:0.78rem; color: rgba(240,239,233,0.5); line-height:1.8; max-width:34ch; }
.foot-parent{ font-size:0.65rem; color: rgba(240,239,233,0.26); margin-top:10px; }
.foot-col-title{ font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--gm-teal); margin-bottom:14px; font-weight:700; }
.foot-links{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot-links a{ font-size:0.8rem; color: rgba(240,239,233,0.6); text-decoration:none; transition:color var(--gm-motion-fast); }
.foot-links a:hover{ color: var(--gm-teal); }
.foot-bottom{ max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:0.66rem; color: rgba(240,239,233,0.32); padding: 0 var(--pad-x) 26px; }
.foot-social{ display:flex; gap:18px; }
.foot-social a{ color: rgba(240,239,233,0.5); text-decoration:none; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; font-size:0.64rem; transition:color var(--gm-motion-fast); }
.foot-social a:hover{ color: var(--gm-teal); }
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr; gap:30px; } .foot-bottom{ flex-direction:column; text-align:center; } }

/* ============================================================
   MOBILE STICKY BAR — flat signage strip, not app buttons
   ============================================================ */
.mobile-sticky-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:150; padding-bottom: env(safe-area-inset-bottom); }
.msb-btn{ flex:1; text-align:center; padding: 15px 10px; font-size:0.74rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; }
.msb-btn.view{ background: var(--gm-white); color: var(--gm-grey); border-top:2px solid var(--gm-grey); }
.msb-btn.order{ background: var(--gm-red); color: var(--gm-white); }
@media (max-width: 880px){
  .mobile-sticky-bar{ display:flex; }
  footer{ padding-bottom: 60px; }
}

.reveal{ opacity:0; transform: translateY(22px); transition: opacity var(--gm-motion-slow) var(--gm-ease-editorial), transform var(--gm-motion-slow) var(--gm-ease-editorial); }
.reveal.in{ opacity:1; transform:none; }



/* ================= V5 ADDITIONS / OVERRIDES ================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mm-brand{display:flex;align-items:center;gap:10px;text-decoration:none}.mm-brand img{width:38px;height:38px;border-radius:50%;object-fit:cover}
body.menu-open{overflow:hidden}

/* split advertising hero */
.hero.hero-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:100svh;background:var(--gm-white);padding-top:74px;color:var(--gm-grey)}
.hero-copy{padding:clamp(52px,8vw,110px) clamp(24px,5.5vw,86px) 58px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;border-right:4px solid var(--gm-grey)}
.hero-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:28px;border-top:3px solid var(--gm-grey);padding-top:10px;max-width:300px}
.hero-h-split{position:static;color:var(--gm-grey);font-size:clamp(4.2rem,8vw,8.4rem);line-height:.78;text-shadow:none;-webkit-text-stroke:0;margin:0;letter-spacing:-.025em}
.hero-h-split .line span{animation:lineReveal .7s var(--gm-ease-editorial) forwards}
.hero-h-split .line:nth-child(2) span{color:var(--gm-red)}
.hero-sub-split{position:static;color:#5d5752;max-width:42ch;opacity:0;animation:fadeUp .6s var(--gm-ease-editorial) .4s forwards;margin-top:30px;font-size:.9rem;line-height:1.75}
.hero-btns-split{position:static;opacity:0;animation:fadeUp .6s var(--gm-ease-editorial) .5s forwards;margin-top:28px}
.hero-city-line{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-top:40px;color:#6b6560;border-top:1px solid var(--gm-line);padding-top:14px}
.hero-photo-panel{position:relative;min-height:calc(100svh - 74px);overflow:hidden;background:var(--gm-grey)}
.hero-photo-panel>img{width:100%;height:100%;object-fit:cover;object-position:center;animation:heroPhotoIn 1.25s var(--gm-ease-editorial) both}
.hero-photo-panel::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.hero-photo-label{position:absolute;left:28px;bottom:24px;z-index:2;color:var(--gm-white);display:flex;flex-direction:column;gap:4px}
.hero-photo-label span{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}.hero-photo-label strong{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.8rem);font-weight:400}
.hero-photo-stamp{position:absolute;right:28px;top:30px;z-index:2;background:var(--gm-teal);color:var(--gm-grey);font-family:var(--f-display);font-size:clamp(1rem,2vw,1.5rem);line-height:.88;text-align:center;padding:12px 15px;transform:rotate(4deg);box-shadow:4px 4px 0 var(--gm-grey)}

@media(max-width:860px){
  .hero.hero-split{grid-template-columns:1fr;min-height:auto;padding-top:66px}
  .hero-copy{padding:50px var(--pad-x) 34px;border-right:0;border-bottom:4px solid var(--gm-grey)}
  .hero-photo-panel{min-height:58svh}
  .hero-h-split{font-size:clamp(3.6rem,16vw,6rem)}
  .hero-city-line{margin-top:28px}
}

/* MONKEY TV */
.monkey-tv-section{background:var(--gm-white);padding:92px var(--pad-x);display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);gap:clamp(42px,7vw,92px);align-items:center;max-width:var(--max);margin:0 auto}
.tv-copy p{margin-top:18px;max-width:44ch;color:#625c57;line-height:1.8;font-size:.9rem}.tv-title{font-size:clamp(3rem,7vw,6.8rem)}
.tv-channel-list{margin-top:28px;border-top:3px solid var(--gm-grey)}
.tv-channel{width:100%;display:grid;grid-template-columns:72px 1fr;gap:12px;text-align:left;padding:13px 0;border-bottom:2px solid var(--gm-grey);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gm-grey);transition:color var(--gm-motion-fast),padding-left var(--gm-motion-fast)}
.tv-channel span{font-family:var(--f-display);font-size:.88rem;color:var(--gm-teal)}.tv-channel:hover,.tv-channel.active{color:var(--gm-red);padding-left:6px}.tv-channel.active span{color:var(--gm-red)}
.crt-wrap{position:relative}.crt-tv{background:var(--gm-grey);border:4px solid var(--gm-grey);box-shadow:10px 12px 0 var(--gm-red);padding:14px 16px 18px;transform:rotate(.25deg)}
.crt-topbar,.crt-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--gm-white);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800}.crt-topbar{padding:2px 3px 11px}.crt-topbar b{color:var(--gm-teal)}
.crt-body{display:grid;grid-template-columns:1fr 112px;gap:14px;align-items:stretch}
.crt-screen{position:relative;aspect-ratio:4/3;background:#090909;border:8px solid #1c1c1c;overflow:hidden;border-radius:12% / 7%;box-shadow:inset 0 0 35px rgba(0,0,0,.65),0 0 0 3px var(--gm-white)}
.crt-screen video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.crt-scanlines{position:absolute;inset:0;pointer-events:none;opacity:.035;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.7) 0 1px,transparent 1px 4px);mix-blend-mode:screen}
.crt-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#2f2f2f;border:2px solid rgba(240,239,233,.28);padding:14px 10px}
.crt-button{width:100%;padding:10px 6px;border:2px solid var(--gm-white);color:var(--gm-white);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:background var(--gm-motion-fast),color var(--gm-motion-fast),transform var(--gm-motion-fast)}
.crt-button:hover{background:var(--gm-red);transform:translateY(-1px)}.crt-dial{width:58px;height:58px;border:4px solid var(--gm-white);border-radius:50%;display:grid;place-items:center;color:var(--gm-teal);font-family:var(--f-display);font-size:1.3rem;box-shadow:inset 0 0 0 6px #252525}
.crt-speaker{width:60px;height:72px;background:radial-gradient(circle,var(--gm-white) 0 1.2px,transparent 1.5px) 0 0/8px 8px;opacity:.45}
.crt-foot{padding:12px 3px 0;color:rgba(240,239,233,.58)}
.crt-tv.powering .crt-screen::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--gm-white);z-index:4;animation:crtPower .22s ease both}
@keyframes crtPower{0%{transform:scaleX(0);opacity:1}40%{transform:scaleX(1);opacity:1}100%{transform:scaleY(260);opacity:0}}

@media(max-width:900px){
  .monkey-tv-section{grid-template-columns:1fr;padding-top:72px;padding-bottom:72px}
  .crt-body{grid-template-columns:1fr 86px}.crt-speaker{width:46px;height:56px}
}
@media(max-width:560px){
  .crt-tv{padding:10px;box-shadow:6px 7px 0 var(--gm-red)}
  .crt-body{grid-template-columns:1fr}.crt-controls{display:grid;grid-template-columns:1fr 1fr 54px;gap:8px}.crt-speaker{display:none}.crt-dial{width:48px;height:48px}.crt-foot{font-size:.5rem}
}

/* Story poster instead of misleading food image */
.story-v5 .story-grid{grid-template-columns:1.05fr .95fr}.story-origin-poster{min-height:520px;background:var(--gm-red);position:relative;overflow:hidden;border:4px solid var(--gm-grey);box-shadow:9px 10px 0 rgba(58,58,58,.14);display:flex;align-items:flex-end}
.story-origin-poster>img{position:absolute;width:min(68%,360px);aspect-ratio:1;object-fit:cover;border-radius:50%;right:-4%;top:5%;opacity:.96}
.origin-checker{position:absolute;inset:0 0 auto;height:22px;background-image:linear-gradient(45deg,var(--gm-white) 25%,transparent 25%),linear-gradient(-45deg,var(--gm-white) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--gm-white) 75%),linear-gradient(-45deg,transparent 75%,var(--gm-white) 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
.origin-copy{position:relative;z-index:2;padding:36px;color:var(--gm-white)}.origin-copy span,.origin-copy small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}.origin-copy strong{display:block;font-family:var(--f-display);font-size:clamp(3.4rem,7vw,6.4rem);line-height:.85;font-weight:400;color:var(--gm-white);margin:8px 0 12px}
.origin-copy small{color:var(--gm-grey);background:var(--gm-teal);display:inline-block;padding:7px 9px}
@media(max-width:860px){.story-v5 .story-grid{grid-template-columns:1fr}.story-origin-poster{min-height:420px;order:-1}}

/* Unverified stats replaced by a campaign poster */
.campaign-band{background:var(--gm-red);color:var(--gm-white);padding:68px var(--pad-x);overflow:hidden}
.campaign-line{font-family:var(--f-display);font-size:clamp(4rem,12vw,10rem);line-height:.76;text-transform:uppercase;white-space:nowrap}
.campaign-line.outline{color:transparent;-webkit-text-stroke:2px var(--gm-white);transform:translateX(5vw)}

/* Jukebox */
.jukebox-section{position:relative;overflow:hidden;background:var(--gm-grey);color:var(--gm-white);padding:90px var(--pad-x);display:grid;grid-template-columns:minmax(260px,.72fr) minmax(360px,1.28fr);gap:clamp(40px,8vw,110px);align-items:center}
.jukebox-copy p{margin-top:18px;max-width:40ch;color:rgba(240,239,233,.63);font-size:.9rem;line-height:1.8}.juke-title{font-size:clamp(3rem,7vw,6.5rem);color:var(--gm-white)}.juke-title em{color:var(--gm-teal)}
.juke-now{margin-top:28px;display:grid;grid-template-columns:58px 1fr;grid-template-areas:"code title" "code sub";border-top:3px solid var(--gm-white);border-bottom:3px solid var(--gm-white);padding:14px 0}.juke-now span{grid-area:code;font-family:var(--f-display);font-size:1.5rem;color:var(--gm-teal);align-self:center}.juke-now b{grid-area:title;font-size:.76rem;letter-spacing:.08em}.juke-now small{grid-area:sub;color:rgba(240,239,233,.52);font-size:.62rem;letter-spacing:.08em;margin-top:4px}
.gm-jukebox{position:relative;max-width:620px;width:100%;aspect-ratio:4/5;margin-inline:auto;filter:drop-shadow(0 28px 30px rgba(0,0,0,.35))}
.gm-jukebox-shell{position:absolute;inset:0;border:5px solid var(--gm-white);border-radius:46% 46% 10% 10% / 30% 30% 7% 7%;background:var(--gm-red);overflow:hidden;box-shadow:inset 0 0 0 6px var(--gm-grey)}
.juke-arch{position:absolute;left:8%;right:8%;top:6%;height:44%;border:10px solid var(--gm-white);border-bottom-width:5px;border-radius:50% 50% 12% 12% / 60% 60% 10% 10%;background:radial-gradient(ellipse at 50% 100%,var(--gm-grey),#222 68%);box-shadow:0 0 0 5px var(--gm-teal)}
.juke-lights{position:absolute;left:10%;right:10%;top:3%;height:18px;background:radial-gradient(circle,var(--gm-white) 0 3px,transparent 4px) left center/10% 100% repeat-x}
.juke-columns::before,.juke-columns::after{content:"";position:absolute;top:34%;bottom:10%;width:10%;background:var(--gm-white);border:4px solid var(--gm-grey)}.juke-columns::before{left:5%}.juke-columns::after{right:5%}
.juke-speaker{position:absolute;left:22%;right:22%;top:20%;height:23%;background:radial-gradient(circle,var(--gm-teal) 0 1.5px,transparent 2px) 0 0/10px 10px;border-radius:50% 50% 10% 10% / 55% 55% 10% 10%;opacity:.72}
.juke-base{position:absolute;left:9%;right:9%;bottom:4%;height:12%;background:repeating-linear-gradient(0deg,var(--gm-white) 0 4px,var(--gm-grey) 4px 8px);border:4px solid var(--gm-grey)}
.gm-jukebox-player{position:absolute;z-index:4;left:21%;right:21%;top:49%;min-height:25%;background:var(--gm-grey);border:4px solid var(--gm-white);padding:14px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;box-shadow:0 0 0 4px var(--gm-teal)}
.juke-record{width:58px;height:58px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 3px,#303030 3px 5px);display:grid;place-items:center;border:3px solid var(--gm-white);animation:vinylSpin 18s linear infinite}.juke-record span{width:23px;height:23px;border-radius:50%;background:var(--gm-red);display:grid;place-items:center;font-family:var(--f-display);font-size:.55rem}
.juke-player-label strong,.juke-player-label small{display:block}.juke-player-label strong{font-size:.66rem;letter-spacing:.08em}.juke-player-label small{font-size:.5rem;margin-top:4px;color:var(--gm-teal);letter-spacing:.07em}
.gm-jukebox-player .mixcloud-player{grid-column:1/-1;width:100%;height:60px;border:0;background:#111}
@media(max-width:900px){.jukebox-section{grid-template-columns:1fr}.gm-jukebox{max-width:500px}}
@media(max-width:560px){.gm-jukebox-player{left:18%;right:18%;top:48%;padding:9px}.juke-record{width:42px;height:42px}.gm-jukebox-player .mixcloud-player{height:60px}}

/* Social: fewer, bigger images */
.social-strip{grid-template-columns:repeat(4,1fr)}@media(max-width:860px){.social-strip{grid-template-columns:repeat(2,1fr)}}

/* Order band */
.order-band{background:var(--gm-red);color:var(--gm-white);padding:54px var(--pad-x);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.order-code{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.order-band h2{font-family:var(--f-display);font-size:clamp(2.6rem,6vw,5.2rem);line-height:.84;text-transform:uppercase;margin-top:10px}.order-actions{display:flex;gap:12px;flex-wrap:wrap}
.franchise-teaser-home{padding-top:72px;padding-bottom:72px}.franchise-teaser-home .fr-teaser{margin-bottom:0}.fr-home-btn{margin-top:26px}

/* Subpages */
.subpage-main{padding-top:0}.page-hero{min-height:72svh;padding-top:74px;display:grid;grid-template-columns:.85fr 1.15fr;background:var(--gm-white);border-bottom:4px solid var(--gm-grey)}
.page-hero-copy{padding:clamp(62px,8vw,110px) var(--pad-x);display:flex;flex-direction:column;justify-content:center}.page-code{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;border-top:3px solid var(--gm-grey);padding-top:10px;max-width:280px}.page-title{font-size:clamp(4rem,9vw,8rem);margin-top:22px}.page-hero-copy p{max-width:42ch;margin-top:24px;color:#615c57;line-height:1.8;font-size:.88rem}.page-hero>img{width:100%;height:100%;object-fit:cover;min-height:72svh}
.menu-page-hero>img{object-position:center}.franchise-page-hero>img{object-position:center}
.menu-section#menu{padding-top:72px}.menu-section#menu .menu-head h2{font-size:clamp(2.8rem,7vw,6rem)!important}
.menu-section#menu .menu-head .sec-num{display:none}
.franchise-page-section{padding-top:78px}
.franchise-note-box{border:2px solid var(--gm-teal);padding:18px;font-size:.76rem;line-height:1.7;color:rgba(240,239,233,.68)}
.hp-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;left:-9999px!important}.form-status{margin-top:14px;min-height:1.4em;font-size:.74rem;color:var(--gm-teal);line-height:1.5}
@media(max-width:860px){.page-hero{grid-template-columns:1fr;min-height:auto}.page-hero>img{min-height:48svh}.page-hero-copy{padding-top:70px;padding-bottom:44px}}

/* Correct menu tab visual keyboard states */
.menu-tab[aria-selected="true"]{background:var(--gm-red);color:var(--gm-white)}
.menu-tab[aria-selected="true"] .jcode{color:var(--gm-white)}
.menu-panel[hidden]{display:none!important}

/* Nav foreground on light split/page heroes */
body[data-page="home"] nav:not(.scrolled) .nav-logo-text,
body[data-page="menu"] nav:not(.scrolled) .nav-logo-text,
body[data-page="franchise"] nav:not(.scrolled) .nav-logo-text{color:var(--gm-grey)}
body[data-page="home"] nav:not(.scrolled) .nav-links a,
body[data-page="menu"] nav:not(.scrolled) .nav-links a,
body[data-page="franchise"] nav:not(.scrolled) .nav-links a{color:var(--gm-grey)}
body[data-page="home"] nav:not(.scrolled) .hamburger span,
body[data-page="menu"] nav:not(.scrolled) .hamburger span,
body[data-page="franchise"] nav:not(.scrolled) .hamburger span{background:var(--gm-grey)}
body[data-page="home"] nav:not(.scrolled),
body[data-page="menu"] nav:not(.scrolled),
body[data-page="franchise"] nav:not(.scrolled){background:rgba(240,239,233,.94);border-bottom-color:var(--gm-line)}

/* Progressive enhancement: content is visible even if JS fails.
   JS applies a one-shot entrance animation when an element enters the viewport. */
.reveal{opacity:1;transform:none}

/* Small screens */
@media(max-width:520px){
  .sig-item-label{padding:18px}.sig-item-price{top:10px;right:10px}
  .campaign-band{padding-top:52px;padding-bottom:52px}.campaign-line{font-size:clamp(3.3rem,18vw,5.7rem)}
  .order-band{align-items:flex-start}.order-actions{width:100%}.order-actions .btn{flex:1;justify-content:center}
}

/* Keep anchored sections clear of the fixed navigation. */
section[id], #order{scroll-margin-top:82px}


/* Hero cassette — stationary shell with independently spinning internal reels */
.hero-cassette{display:none}
@media(min-width:1280px){
  .hero-cassette{
    display:block;
    position:absolute;
    top:clamp(30px,2.4vw,40px);
    right:clamp(22px,2.2vw,34px);
    width:clamp(150px,11.5vw,176px);
    aspect-ratio:700 / 933;
    transform:rotate(7deg);
    transform-origin:center;
    pointer-events:none;
    z-index:0;
    opacity:.97;
    filter:drop-shadow(0 15px 17px rgba(58,58,58,.18));
  }
  /* Backgrounds rather than <img>: a background declared only inside this
     media query is never fetched below 1280px, where the cassette is hidden. */
  .hero-cassette-base{
    display:block;
    width:100%;
    aspect-ratio:700 / 933;
    background:url("images/grub-monkeys-cassette.webp") no-repeat center/contain;
  }
  .hero-cassette-reel{
    position:absolute;
    display:block;
    width:19.43%;
    aspect-ratio:1;
    border-radius:50%;
    transform-origin:50% 50%;
    will-change:transform;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }
  .hero-cassette-reel-top{
    left:39.14%;
    top:21.33%;
    background-image:url("images/cassette-reel-top.webp");
    animation:heroCassetteReelSpin 3.15s linear infinite;
  }
  .hero-cassette-reel-bottom{
    left:39.00%;
    top:65.38%;
    background-image:url("images/cassette-reel-bottom.webp");
    animation:heroCassetteReelSpin 2.85s linear infinite;
  }
}
@keyframes heroCassetteReelSpin{
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .hero-cassette-reel{animation:none!important}
}

/* ===== V8 retro motion add-ons ===== */

/* 1) ON AIR neon warm-up */
.neon-sign{
  display:inline-flex;
  align-items:center;
  margin:0 0 16px;
  padding:8px 14px 9px;
  border:2px solid rgba(235,0,0,.85);
  background:#231f1f;
  box-shadow:0 0 0 3px rgba(58,58,58,.18), 8px 8px 0 rgba(58,58,58,.14);
}
.neon-face{
  font-family:var(--f-display);
  font-size:1.05rem;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
  color:#6d2525;
  text-shadow:none;
}
.neon-sign.warm .neon-face{
  animation:neonWarm 1s steps(1,end) forwards;
}
@keyframes neonWarm{
  0%{color:#5d1f1f;text-shadow:none;opacity:.45}
  10%{color:#ffb4b4;text-shadow:0 0 4px rgba(255,180,180,.45),0 0 10px rgba(235,0,0,.3);opacity:.9}
  18%{color:#742828;text-shadow:none;opacity:.55}
  34%{color:#ffd3d3;text-shadow:0 0 5px rgba(255,210,210,.55),0 0 12px rgba(235,0,0,.48),0 0 24px rgba(235,0,0,.3);opacity:1}
  42%{color:#8b3535;text-shadow:none;opacity:.72}
  55%{color:#ffe7e7;text-shadow:0 0 6px rgba(255,231,231,.72),0 0 16px rgba(235,0,0,.55),0 0 32px rgba(235,0,0,.34);opacity:1}
  100%{color:#fff4f4;text-shadow:0 0 6px rgba(255,240,240,.78),0 0 14px rgba(235,0,0,.52),0 0 28px rgba(235,0,0,.34);opacity:1}
}

/* 2) CRT channel switching burst */
.crt-screen.switching::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.14) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode:screen;
  animation:crtStatic .16s linear both;
}
@keyframes crtStatic{
  0%{opacity:0;transform:translateX(-14px) skewX(3deg)}
  15%{opacity:.95}
  100%{opacity:0;transform:translateX(12px) skewX(-3deg)}
}

/* 3) Menu board snap / wipe */
.menu-tab.kick{animation:menuTabKick .2s var(--gm-ease-snap)}
@keyframes menuTabKick{0%{transform:translateY(0)}45%{transform:translateY(2px)}100%{transform:translateY(0)}}
.menu-panel.switching{animation:menuPanelWipe .26s var(--gm-ease-snap) both;transform-origin:left center}
@keyframes menuPanelWipe{0%{opacity:.45;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
.menu-preview-sticky img.switching{animation:menuPreviewSnap .28s var(--gm-ease-editorial) both}
@keyframes menuPreviewSnap{0%{opacity:.45;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}

/* 4) Receipt printer */
.receipt-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  overflow:hidden;
}
.receipt-printer{
  position:relative;
  width:320px;
  height:56px;
  border:3px solid var(--gm-grey);
  border-bottom:none;
  background:linear-gradient(180deg,#e3dfd3 0%, #d8d2c2 100%);
  box-shadow:0 14px 24px -18px rgba(0,0,0,.25);
}
.receipt-printer-top{
  position:absolute;
  inset:9px 16px auto;
  height:10px;
  border-radius:999px;
  background:rgba(58,58,58,.18);
}
.receipt-printer-slot{
  position:absolute;
  left:22px;
  right:22px;
  bottom:10px;
  height:8px;
  background:#2a2a2a;
  border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15);
}
.receipt-printer-light{
  position:absolute;
  right:14px;
  top:16px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#8e4d4d;
}
.receipt-wrap.printing .receipt-printer-light{animation:printerLight 1.2s steps(1,end) forwards}
@keyframes printerLight{0%,20%{background:#8e4d4d;box-shadow:none}30%,44%{background:var(--gm-teal);box-shadow:0 0 8px rgba(0,221,194,.55)}50%,58%{background:#8e4d4d;box-shadow:none}65%,100%{background:var(--gm-teal);box-shadow:0 0 8px rgba(0,221,194,.55)}}
.receipt{
  margin-top:-2px;
  transform:translateY(-72px) rotate(-1.6deg);
}
.receipt.in{animation:receiptPrint .95s cubic-bezier(.22,1,.36,1) forwards}
@keyframes receiptPrint{
  0%{opacity:0;transform:translateY(-72px) rotate(-1.6deg)}
  45%{opacity:1;transform:translateY(-18px) rotate(-1.6deg)}
  100%{opacity:1;transform:translateY(0) rotate(-1.6deg)}
}

/* 5) Diner sign title warm glow */
.diner-sign h2{position:relative;color:rgba(255,255,255,.82);transition:color .2s ease,text-shadow .2s ease}
.diner-sign.lit h2{animation:signWarm .7s steps(1,end) .15s forwards}
@keyframes signWarm{
  0%{color:rgba(255,255,255,.48);text-shadow:none}
  25%{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.3)}
  40%{color:rgba(255,255,255,.68);text-shadow:none}
  70%{color:#fff; text-shadow:0 0 10px rgba(255,255,255,.48), 0 0 20px rgba(255,255,255,.24)}
  100%{color:#fff; text-shadow:0 0 12px rgba(255,255,255,.5),0 0 24px rgba(255,255,255,.26)}
}

@media(max-width:560px){
  .neon-sign{padding:7px 12px 8px;margin-bottom:12px}
  .neon-face{font-size:.9rem}
  .receipt-printer{width:min(320px,86vw)}
}

@media(prefers-reduced-motion: reduce){
  .neon-sign.warm .neon-face,
  .menu-tab.kick,
  .menu-panel.switching,
  .menu-preview-sticky img.switching,
  .receipt.in,
  .receipt-wrap.printing .receipt-printer-light,
  .diner-sign.lit h2,
  .crt-screen.switching::after{animation:none!important}
  .neon-face{color:#fff4f4;text-shadow:0 0 6px rgba(255,240,240,.78),0 0 14px rgba(235,0,0,.52),0 0 28px rgba(235,0,0,.34)}
  .receipt{opacity:1;transform:translateY(0) rotate(-1.6deg)}
}

/* ===== V9 added retro objects ===== */

/* Pull-down diner blind */
.sig-item{position:relative;overflow:hidden}
.window-blind{
  position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;background:repeating-linear-gradient(90deg,var(--gm-red) 0 34px,var(--gm-white) 34px 68px);
  transform:translateY(0);will-change:transform;box-shadow:inset 0 -8px 0 rgba(58,58,58,.18)
}
.window-blind::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--gm-grey)}
.window-blind span{background:var(--gm-grey);color:var(--gm-white);padding:7px 12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--gm-white)}
.sig-item.blind-open .window-blind{animation:blindLift .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes blindLift{0%{transform:translateY(0)}100%{transform:translateY(-105%)}}

/* Story clock + matchbook */
.story-text{position:relative}
.story-decor-row{display:flex;align-items:flex-end;gap:18px;margin-top:22px;flex-wrap:wrap}
.grub-clock{width:118px;height:118px;flex:0 0 auto}
.clock-face{position:relative;width:100%;height:100%;border-radius:50%;border:4px solid var(--gm-grey);background:radial-gradient(circle at 35% 30%,#fffaf2 0%,#f0efe9 68%,#e4dfd2 100%);box-shadow:10px 10px 0 rgba(58,58,58,.12)}
.clock-brand{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);font-family:var(--f-display);font-size:1rem;line-height:.9;text-align:center;color:var(--gm-red)}
.clock-mark{position:absolute;font-size:.8rem;font-weight:800;color:var(--gm-grey)}
.clock-mark.top{left:50%;top:10px;transform:translateX(-50%);font-size:1rem}
.clock-mark.right{right:12px;top:50%;transform:translateY(-50%)}
.clock-mark.bottom{left:50%;bottom:10px;transform:translateX(-50%)}
.clock-mark.left{left:12px;top:50%;transform:translateY(-50%)}
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% calc(100% - 10px);border-radius:999px;background:var(--gm-grey)}
.clock-hand.hour{width:6px;height:28px;margin-left:-3px}
.clock-hand.minute{width:4px;height:40px;margin-left:-2px}
.clock-hand.second{width:2px;height:46px;margin-left:-1px;background:var(--gm-teal)}
.clock-pin{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--gm-red);box-shadow:0 0 0 2px var(--gm-white)}
.matchbook-deco{position:relative;width:150px;height:96px;border:3px solid var(--gm-grey);background:var(--gm-red);transform:rotate(-8deg);box-shadow:12px 12px 0 rgba(58,58,58,.12);transition:transform .28s ease}
.matchbook-lid{position:absolute;left:-3px;right:-3px;top:-3px;height:36px;background:#f6f2e9;border:3px solid var(--gm-grey);transform-origin:top center;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.matchbook-brand{position:absolute;left:10px;right:10px;bottom:10px;font-family:var(--f-display);font-size:1rem;color:var(--gm-white);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.matchbook-inside{position:absolute;left:10px;right:10px;top:42px;display:grid;gap:6px;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gm-white)}
.matchbook-deco:hover{transform:rotate(-2deg) translateY(-2px)}
.matchbook-deco:hover .matchbook-lid{transform:rotateX(58deg)}

/* Flip board */
.flipboard-band{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:28px var(--pad-x) 38px;background:var(--gm-white)}
.flipboard-copy{display:grid;gap:6px;color:var(--gm-grey)}
.flip-kicker{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gm-red)}
.flipboard-copy strong{font-family:var(--f-display);font-size:clamp(1.3rem,2vw,1.8rem);text-transform:uppercase}
.flipboard{position:relative;min-height:86px;border:3px solid #1d1d1d;background:#202020;display:grid;place-items:center;overflow:hidden;box-shadow:10px 10px 0 rgba(58,58,58,.14)}
.flipboard::before,.flipboard::after{content:"";position:absolute;left:0;right:0;height:50%;pointer-events:none}
.flipboard::before{top:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))}
.flipboard::after{bottom:0;border-top:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.22))}
.flip-current,.flip-next{position:absolute;left:0;right:0;text-align:center;font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#f0efe9;font-size:clamp(2rem,5vw,3.4rem);line-height:1}
.flip-current{top:50%;transform:translateY(-50%)}
.flip-next{top:50%;transform:translateY(-50%) rotateX(-90deg);transform-origin:center top;opacity:0}
.flipboard.flipping .flip-current{animation:flipCurrent .6s cubic-bezier(.3,.7,.2,1) forwards}
.flipboard.flipping .flip-next{animation:flipNext .6s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes flipCurrent{0%{transform:translateY(-50%) rotateX(0);opacity:1}100%{transform:translateY(-50%) rotateX(90deg);opacity:0}}
@keyframes flipNext{0%{transform:translateY(-50%) rotateX(-90deg);opacity:.1}100%{transform:translateY(-50%) rotateX(0);opacity:1}}

/* Locations key tag */
.loc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.motel-keytag{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;width:154px;height:118px;padding-top:14px;background:var(--gm-red);color:var(--gm-white);border:3px solid var(--gm-grey);border-radius:52% 52% 48% 48% / 16% 16% 84% 84%;box-shadow:10px 10px 0 rgba(58,58,58,.12);transform-origin:50% 0}
.key-hole{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--gm-white);box-shadow:0 0 0 4px var(--gm-grey)}
.key-num{font-family:var(--f-display);font-size:2rem;line-height:1;margin-top:8px}
.key-name{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:0 8px}
.motel-keytag.swing{animation:keySwing .8s ease}
@keyframes keySwing{0%{transform:rotate(0)}20%{transform:rotate(4deg)}45%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.loc-row{cursor:pointer}
.loc-row.active-key{background:rgba(0,221,194,.08)}

/* Jukebox coin slot.
   The coin slot/token/trigger are absolutely positioned and need a positioned
   ancestor — but the player is already position:absolute above, which
   establishes a containing block just as well as relative does. The earlier
   `position:relative` override here was therefore unnecessary, and actively
   harmful: it left the player's left/right/top percentages in force while
   changing their meaning, so they stopped being insets and became a *shift*
   of 21% right (18% under 560px) and 49% down. That pushed the player's right
   edge past .jukebox-section's overflow:hidden and amputated Drop Coin, the
   A2/B2 selectors and the Mixcloud iframe on phones. Leaving the player
   absolute restores the intended overlay and keeps the coin slot anchored. */
.coin-slot-wrap{position:absolute;left:18px;top:-16px;display:grid;gap:5px;justify-items:start}
.coin-slot-label{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gm-white);background:var(--gm-grey);padding:5px 8px;border:2px solid var(--gm-white)}
.coin-slot{position:relative;width:70px;height:10px;border-radius:999px;background:#1d1d1d;box-shadow:inset 0 2px 2px rgba(255,255,255,.14)}
.coin-token{position:absolute;left:22px;top:-24px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1aa 0%,#f6cf55 36%,#d2a02f 100%);border:2px solid #7f5c12;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.coin-token::before{content:"25¢";position:absolute;inset:0;display:grid;place-items:center;font-size:.45rem;font-weight:800;color:#704b00}
.coin-trigger{position:absolute;right:12px;top:-24px;padding:7px 10px;border:2px solid var(--gm-white);background:var(--gm-red);color:var(--gm-white);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:4px 4px 0 rgba(58,58,58,.8)}
.gm-jukebox-player.coin-drop .coin-token{animation:coinDrop .8s cubic-bezier(.22,1,.36,1) forwards}
.gm-jukebox-player.coin-drop .juke-record{box-shadow:0 0 0 4px rgba(0,221,194,.14),0 0 22px rgba(0,221,194,.42)}
@keyframes coinDrop{0%{transform:translateY(0) scale(1);opacity:1}65%{transform:translateY(18px) scale(.98);opacity:1}100%{transform:translateY(30px) scale(.8);opacity:0}}

/* Social polaroids */
.social-strip{display:flex;flex-wrap:wrap;gap:18px}
.social-strip a{position:relative;display:block;background:#fffdf8;padding:10px 10px 36px;border:2px solid var(--gm-grey);box-shadow:10px 10px 0 rgba(0,0,0,.18);flex:1 1 210px;max-width:260px;transform:translateY(0) rotate(0);transition:transform .28s ease, box-shadow .28s ease}
.social-strip a img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid rgba(58,58,58,.14)}
.social-strip a .social-cap{position:absolute;left:12px;right:12px;bottom:10px;color:var(--gm-grey);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.social-strip a:nth-child(1){transform:translateY(26px) rotate(-2.4deg)}
.social-strip a:nth-child(2){transform:translateY(6px) rotate(1.7deg)}
.social-strip a:nth-child(3){transform:translateY(24px) rotate(-1.1deg)}
.social-strip a:nth-child(4){transform:translateY(8px) rotate(2.2deg)}
.social-strip.mounted a{animation:polaroidSlide .8s cubic-bezier(.22,1,.36,1) both}
.social-strip.mounted a:nth-child(1){animation-delay:.02s}.social-strip.mounted a:nth-child(2){animation-delay:.1s}.social-strip.mounted a:nth-child(3){animation-delay:.18s}.social-strip.mounted a:nth-child(4){animation-delay:.26s}
@keyframes polaroidSlide{0%{opacity:0;transform:translateY(54px) rotate(0)}100%{opacity:1}}
.social-strip a:hover{transform:translateY(0) rotate(0) scale(1.01);box-shadow:12px 12px 0 rgba(0,0,0,.2)}

/* Order bell */
.order-actions{align-items:center;flex-wrap:wrap;position:relative}
.order-bell-wrap{position:relative;display:grid;place-items:center;background:none;border:none;padding:0 0 0 18px;cursor:pointer}
.order-bell{position:relative;display:block;width:78px;height:62px}
.bell-knob{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#fcfcfc,#c8c8c8);border:2px solid #6f6f6f;z-index:2}
.bell-base{position:absolute;left:7px;right:7px;bottom:8px;height:42px;border-radius:42px 42px 16px 16px;background:linear-gradient(180deg,#fafafa 0%,#d9d9d9 50%,#b5b5b5 100%);border:2px solid #676767;box-shadow:0 8px 0 rgba(58,58,58,.28)}
.order-bell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;border-radius:999px;background:#7e7e7e}
.order-ticket{position:absolute;right:100%;top:8px;white-space:nowrap;padding:8px 10px;border:2px solid var(--gm-grey);background:var(--gm-white);color:var(--gm-red);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;transform:translateX(16px);opacity:0;pointer-events:none}
.order-bell-wrap.ring .order-bell{animation:bellPress .5s cubic-bezier(.22,1,.36,1)}
.order-bell-wrap.ring .order-ticket{animation:orderTicketPop .74s cubic-bezier(.22,1,.36,1)}
@keyframes bellPress{0%{transform:translateY(0)}30%{transform:translateY(4px)}60%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes orderTicketPop{0%{opacity:0;transform:translateX(18px)}30%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}

@media(max-width:1100px){.loc-head{align-items:flex-start}.motel-keytag{width:138px;height:108px}.coin-trigger{position:static;margin-top:10px}}
@media(max-width:900px){
  .flipboard-band{grid-template-columns:1fr;gap:14px}
  .story-decor-row{gap:14px}
  .coin-slot-wrap{left:14px;top:-12px}
  .social-strip a{max-width:none;flex:1 1 calc(50% - 18px)}
}
@media(max-width:640px){
  .grub-clock{width:96px;height:96px}.matchbook-deco{width:132px;height:84px}
  .motel-keytag{display:none}
  .social-strip a{flex-basis:100%}
  .order-bell-wrap{padding-left:0}
  .order-ticket{right:auto;left:0;top:-34px}
  .coin-slot-wrap{position:static;margin-bottom:8px}
}
@media(prefers-reduced-motion: reduce){
  .sig-item.blind-open .window-blind,
  .motel-keytag.swing,
  .gm-jukebox-player.coin-drop .coin-token,
  .social-strip.mounted a,
  .order-bell-wrap.ring .order-bell,
  .order-bell-wrap.ring .order-ticket,
  .flipboard.flipping .flip-current,
  .flipboard.flipping .flip-next{animation:none!important}
  .window-blind{transform:translateY(-105%)}
  .social-strip a{opacity:1}
  .order-ticket{opacity:1;transform:translateX(0)}
}


/* ===== V10: make retro objects visibly LIVE with CSS-driven motion ===== */

/* Chrome counter bell: periodic chrome sweep even when untouched */
.bell-base{
  overflow:hidden;
}
.bell-base::before{
  content:"";
  position:absolute;
  top:-10%;
  bottom:-10%;
  left:-45%;
  width:34%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:bellChromeSweep 6.5s ease-in-out infinite;
}
@keyframes bellChromeSweep{
  0%,70%{left:-45%;opacity:0}
  76%{opacity:1}
  90%{left:120%;opacity:.85}
  100%{left:120%;opacity:0}
}
.order-bell-wrap:hover .order-bell,
.order-bell-wrap:focus-visible .order-bell{
  animation:bellPress .5s cubic-bezier(.22,1,.36,1);
}

/* Flipboard: mechanical housing gets a tiny live indicator */
.flipboard::marker{display:none}
.flipboard-band::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gm-teal);
  box-shadow:0 0 0 3px rgba(0,221,194,.12),0 0 14px rgba(0,221,194,.5);
  animation:flipIndicator 2.4s steps(2,end) infinite;
  justify-self:end;
}
@keyframes flipIndicator{50%{opacity:.35}}

/* Motel key tag: gentle hanging sway, stronger swing on selection */
.motel-keytag{
  animation:keyIdleSway 5.4s ease-in-out infinite;
}
.motel-keytag.swing{
  animation:keySwing .8s ease;
}
@keyframes keyIdleSway{
  0%,100%{transform:rotate(-1.2deg)}
  50%{transform:rotate(1.2deg)}
}

/* Photo-booth / polaroids: subtle breathing after entrance */
.social-strip.mounted a:nth-child(odd){
  animation:
    polaroidSlide .8s cubic-bezier(.22,1,.36,1) both,
    polaroidDriftA 8s ease-in-out 1s infinite;
}
.social-strip.mounted a:nth-child(even){
  animation:
    polaroidSlide .8s cubic-bezier(.22,1,.36,1) both,
    polaroidDriftB 9s ease-in-out 1.2s infinite;
}
@keyframes polaroidDriftA{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@keyframes polaroidDriftB{
  0%,100%{translate:0 0}
  50%{translate:0 4px}
}
.social-strip a:hover{
  animation:none!important;
}

/* Wall clock: smooth live motion */
.clock-hand{
  transition:transform .18s linear;
}
.clock-hand.second{
  transition:transform .08s linear;
}
.clock-face::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px dashed rgba(58,58,58,.16);
  animation:clockHalo 6s linear infinite;
}
@keyframes clockHalo{to{transform:rotate(360deg)}}

/* Jukebox coin slot: slot and token stay visibly alive */
.coin-slot{
  animation:slotGlow 3.4s ease-in-out infinite;
}
.coin-token{
  animation:coinIdle 3.2s ease-in-out infinite;
}
.gm-jukebox-player.coin-drop .coin-token{
  animation:coinDrop .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes slotGlow{
  0%,100%{box-shadow:inset 0 2px 2px rgba(255,255,255,.14),0 0 0 rgba(0,221,194,0)}
  50%{box-shadow:inset 0 2px 2px rgba(255,255,255,.14),0 0 10px rgba(0,221,194,.35)}
}
@keyframes coinIdle{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-3px) rotate(4deg)}
}

/* Pull-down blind: small handle tremor before reveal */
.window-blind::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:8px;
  width:46px;
  height:7px;
  border-radius:999px;
  transform:translateX(-50%);
  background:var(--gm-grey);
  animation:blindHandle 1.5s ease-in-out infinite;
}
.sig-item.blind-open .window-blind::after{animation:none}
@keyframes blindHandle{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(2px)}
}

/* Matchbook: gentle flap animation, still reacts stronger on hover */
.matchbook-lid{
  animation:matchbookIdle 7.5s ease-in-out infinite;
}
.matchbook-deco:hover .matchbook-lid{
  animation:none;
  transform:rotateX(58deg);
}
@keyframes matchbookIdle{
  0%,82%,100%{transform:rotateX(0deg)}
  87%{transform:rotateX(18deg)}
  92%{transform:rotateX(4deg)}
}

/* Existing cassette reels: keep body still, animate only reels */
.hero-cassette{
  animation:none!important;
}
.hero-cassette-base{
  transform:none!important;
}
.hero-cassette-reel-top{
  animation:heroCassetteReelSpin 3.15s linear infinite!important;
}
.hero-cassette-reel-bottom{
  animation:heroCassetteReelSpinReverse 2.85s linear infinite!important;
}
@keyframes heroCassetteReelSpinReverse{
  to{transform:rotate(-360deg)}
}

/* Make diner bulbs feel electrical after the one-time chase */
.diner-sign.lit .bulb:nth-child(3n){
  animation:
    bulbOn .4s ease forwards,
    bulbBreathe 3.8s ease-in-out 1.2s infinite;
}
@keyframes bulbBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(.72)}
}

/* Explicit CSS motion fallback if JS is unavailable */
.no-js .motel-keytag{animation:keyIdleSway 5.4s ease-in-out infinite}
.no-js .coin-token{animation:coinIdle 3.2s ease-in-out infinite}
.no-js .matchbook-lid{animation:matchbookIdle 7.5s ease-in-out infinite}

@media(prefers-reduced-motion: reduce){
  .bell-base::before,
  .flipboard-band::after,
  .motel-keytag,
  .social-strip.mounted a,
  .clock-face::after,
  .coin-slot,
  .coin-token,
  .window-blind::after,
  .matchbook-lid,
  .hero-cassette-reel-top,
  .hero-cassette-reel-bottom,
  .diner-sign.lit .bulb:nth-child(3n){
    animation:none!important;
  }
}

/* ============================================================
   V11 — LAYOUT ART DIRECTION PASS
   The homepage should read like a diner campaign, not a stack
   of equal website sections. Motion stays secondary to layout.
   ============================================================ */

/* HERO — roadside poster composition */
.hero.hero-split{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.hero-copy{overflow:hidden;padding-left:clamp(54px,6.2vw,98px);padding-right:clamp(42px,5vw,76px)}
.hero-h-split{max-width:7.8ch}
.hero-sub-split{max-width:43ch}
.hero-poster-rail{position:absolute;left:14px;top:12%;bottom:12%;width:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border-left:2px solid var(--gm-grey);border-right:2px solid var(--gm-grey);padding:8px 0;color:var(--gm-grey);font-family:var(--f-display);font-size:.62rem;letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;opacity:.72}
.hero-price-ticket{position:absolute;right:clamp(24px,3.1vw,48px);bottom:clamp(26px,4vw,56px);width:148px;background:var(--gm-red);color:var(--gm-white);border:3px solid var(--gm-grey);padding:13px 13px 12px;transform:rotate(-2.2deg);box-shadow:8px 8px 0 rgba(58,58,58,.15);z-index:1}
/* Keep the city line clear of the counter-pick ticket (154px incl. border) so
   "Mysore" is never covered. Only needed between 1101px (where the ticket
   appears) and 1279px; from 1280px the KOT 069 patch takes over this corner,
   hides the ticket and constrains the city line via its own max-width rule. */
@media(min-width:1101px) and (max-width:1279px){.hero-city-line{padding-right:190px}}
.hero-price-ticket span,.hero-price-ticket small{display:block;font-size:.5rem;letter-spacing:.13em;text-transform:uppercase}
.hero-price-ticket strong{display:block;font-family:var(--f-display);font-size:1.35rem;line-height:.9;margin:7px 0}
.hero-photo-panel{border-left:0}
.hero-photo-label{max-width:75%}
.hero-photo-stamp{transform:rotate(7deg)}

/* TV — oversized physical object breaking the normal content grid */
.monkey-tv-section{max-width:none;width:100%;grid-template-columns:minmax(240px,.58fr) minmax(520px,1.42fr);padding-left:max(var(--pad-x),calc((100vw - var(--max))/2 + var(--pad-x)));padding-right:clamp(18px,2.8vw,42px);gap:clamp(34px,5vw,76px);min-height:86svh;overflow:hidden}
.tv-copy{max-width:390px}
.crt-wrap{width:min(900px,68vw);justify-self:end;margin-right:-2vw}
.crt-tv{transform:rotate(.4deg);box-shadow:14px 16px 0 var(--gm-red)}
.crt-screen{border-width:10px}

/* HALL OF FAME — magazine spread rather than equal cards */
.signature{padding-top:104px;padding-bottom:110px;overflow:hidden}
.sig-head{max-width:var(--max);margin-left:auto;margin-right:auto;margin-bottom:-10px}
.sig-grid{max-width:var(--max);margin:0 auto;gap:10px}
.sig-item.a{grid-column:1/8;grid-row:1/4;aspect-ratio:auto;min-height:720px}
.sig-item.b{grid-column:8/13;grid-row:1/2;aspect-ratio:16/10;min-height:300px}
.sig-item.c{grid-column:8/13;grid-row:2/3;aspect-ratio:16/10;min-height:300px}
.sig-item.d{grid-column:3/12;grid-row:4/5;aspect-ratio:21/7;margin-top:20px;min-height:260px}
.sig-item.a .sig-item-name{font-size:clamp(2.5rem,5vw,5.1rem)}
.sig-item.a .sig-item-label{padding:34px}
.sig-more{max-width:var(--max);margin-left:auto;margin-right:auto;padding-top:8px}

/* ATMOSPHERE — wide cinematic band */
.atmosphere{padding:100px 0 0}
.atmo-head{max-width:var(--max);margin-left:auto;margin-right:auto}
.atmo-grid{max-width:none}
.atmo-photo.big{min-height:68svh}
.atmo-tags{padding-left:clamp(34px,5vw,80px);padding-right:clamp(34px,5vw,80px)}
.atmo-tag{font-size:clamp(2rem,3.4vw,3.25rem)}
.atmosphere .atmo-grid + .atmo-grid{width:44%;margin-left:auto!important;margin-right:5vw;margin-top:-70px!important;position:relative;z-index:3;border:8px solid var(--gm-grey)}

/* NEW CSS DINER COUNTER TRANSITION */
.diner-counter{position:relative;min-height:270px;padding:58px var(--pad-x) 42px;background:var(--gm-paper);display:flex;align-items:flex-end;justify-content:center;gap:clamp(22px,4vw,62px);overflow:hidden;border-top:10px solid #c6c6c2;border-bottom:18px solid var(--gm-red)}
.counter-chrome{position:absolute;left:0;right:0;top:0;height:20px;background:linear-gradient(180deg,#fafafa 0,#b5b5b5 30%,#f4f4f4 55%,#898989 100%);border-top:2px solid var(--gm-grey);border-bottom:2px solid var(--gm-grey)}
.counter-object{position:relative;flex:0 0 auto}
.counter-napkins{width:128px;height:94px;background:linear-gradient(180deg,#d6d6d4,#9e9e9b);border:3px solid var(--gm-grey);border-radius:10px 10px 4px 4px;display:grid;place-items:center;box-shadow:8px 8px 0 rgba(58,58,58,.12)}
.counter-napkins::before{content:"";position:absolute;left:16px;right:16px;top:-20px;height:42px;background:var(--gm-white);border:2px solid var(--gm-grey);transform:skew(-3deg)}
.counter-napkins span{font-size:.6rem;letter-spacing:.12em;color:var(--gm-grey);margin-top:18px}
.condiment{width:54px;height:112px;border:3px solid var(--gm-grey);border-radius:46% 46% 16% 16%/24% 24% 12% 12%;display:grid;place-items:center;font-family:var(--f-display);font-size:1.1rem;box-shadow:6px 7px 0 rgba(58,58,58,.1)}
.condiment::before{content:"";position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:20px;height:24px;border:3px solid var(--gm-grey);border-bottom:0;background:inherit}
.ketchup{background:var(--gm-red);color:var(--gm-white)}
.mustard{background:var(--gm-teal);color:var(--gm-grey)}
.counter-ticket{width:150px;background:var(--gm-white);border:2px solid var(--gm-grey);padding:16px;text-align:center;transform:rotate(2deg);box-shadow:7px 8px 0 rgba(58,58,58,.1);clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,88% 94%,82% 100%,76% 94%,70% 100%,64% 94%,58% 100%,52% 94%,46% 100%,40% 94%,34% 100%,28% 94%,22% 100%,16% 94%,10% 100%,4% 94%,0 100%)}
.counter-ticket span,.counter-ticket small{display:block;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase}.counter-ticket strong{display:block;font-family:var(--f-display);font-size:1.1rem;line-height:1.1;padding:9px 0;border-top:1px dashed var(--gm-grey);border-bottom:1px dashed var(--gm-grey);margin:8px 0}
.counter-copy{margin-left:clamp(8px,3vw,42px);align-self:center;max-width:430px}.counter-copy span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gm-red)}.counter-copy strong{display:block;font-family:var(--f-display);font-size:clamp(2.4rem,5vw,4.9rem);line-height:.86;margin-top:8px;color:var(--gm-grey)}

/* STORY — intentional quiet space.
   max-width used to be hardcoded to 1180px here, well short of the
   site's standard 1440px container (--max) that every other home
   section uses -- menu, footer, monkey-tv, signature, locations. That
   left this one section with visibly wider empty gutters on laptop
   screens than its neighbours. Matching --max widens both grid columns
   proportionally (the ratio is untouched), so the team board actually
   gets bigger rather than shrinking. */
.story{max-width:var(--max);padding-top:120px;padding-bottom:120px}
.story-v5 .story-grid{grid-template-columns:1.18fr .82fr;gap:clamp(64px,9vw,130px)}
.story-text{padding-left:0}
.story-h{font-size:clamp(2.8rem,5.2vw,4.8rem)}
.story-origin-poster{min-height:470px}
.story-decor-row{margin-top:34px;opacity:.92}
.grub-clock{width:104px;height:104px}.matchbook-deco{width:140px;height:88px}

/* Flipboard — compact mechanical intermission */
.flipboard-band{max-width:1180px;margin:0 auto;padding-top:36px;padding-bottom:48px;grid-template-columns:240px 1fr;background:var(--gm-white)}
.flipboard{min-height:106px;max-width:760px}
.flip-current,.flip-next{font-size:clamp(2.5rem,5vw,4.4rem)}

/* LOCATIONS — roadside directory with persistent stage */
.locations{padding:112px 0 120px}
.loc-head{max-width:var(--max);margin:0 auto 40px;padding:0 var(--pad-x);position:relative}
.locations-stage{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:minmax(300px,.72fr) minmax(540px,1.28fr);gap:42px;align-items:start}
.roadside-panel{position:sticky;top:96px;border:4px solid var(--gm-grey);background:var(--gm-grey);box-shadow:10px 12px 0 var(--gm-red);overflow:hidden}
.roadside-photo{height:330px;overflow:hidden}.roadside-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.roadside-sign{padding:22px;background:var(--gm-grey);color:var(--gm-white);border-top:5px solid var(--gm-teal)}
.roadside-route{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gm-teal)}
.roadside-sign strong{display:block;font-family:var(--f-display);font-size:clamp(1.8rem,3vw,3rem);line-height:.9;text-transform:uppercase;margin:10px 0 8px}.roadside-sign small{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,239,233,.56);margin-bottom:18px}.roadside-sign a{display:inline-block;color:var(--gm-white);text-decoration:none;border-bottom:2px solid var(--gm-red);font-size:.68rem;font-weight:800;letter-spacing:.08em;padding-bottom:4px}
.loc-list{border-top:4px solid var(--gm-grey)}
.loc-row{grid-template-columns:70px 1.4fr .9fr auto;padding:22px 0;border-bottom:3px solid var(--gm-grey);transition:background .18s ease,padding-left .18s ease}
.loc-row:hover,.loc-row:focus-within,.loc-row.active-key{padding-left:10px;background:rgba(0,221,194,.08)}
.loc-row.featured{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
.motel-keytag{position:absolute;right:var(--pad-x);top:6px;transform:rotate(2deg)}
/* Keep the heading clear of the absolutely-positioned key tag (154px wide) so
   "Grub Monkeys." is never covered. Only applies where the tag is visible. */
.loc-head > .sec-num,.loc-head > h2{padding-right:186px}

/* JUKEBOX — nearly full-screen feature */
.jukebox-section{min-height:92svh;padding-top:100px;padding-bottom:100px;grid-template-columns:minmax(280px,.62fr) minmax(500px,1.38fr);gap:clamp(34px,6vw,90px);isolation:isolate}
.juke-ghost-code{position:absolute;right:-2vw;bottom:-12vh;font-family:var(--f-display);font-size:min(56vw,700px);line-height:.7;color:rgba(240,239,233,.035);z-index:-1;pointer-events:none}
.jukebox-copy{max-width:430px;align-self:center}
.juke-title{font-size:clamp(4rem,8vw,8rem)}
.gm-jukebox{max-width:680px}
.juke-now{max-width:360px}

/* SOCIAL — tabletop collage, not a social grid */
.social{padding:116px 0 140px;border-top:0;position:relative;overflow:hidden}
.social::before{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;background:repeating-linear-gradient(90deg,rgba(240,239,233,.035) 0 2px,transparent 2px 48px);pointer-events:none}
.social-head{max-width:var(--max);margin:0 auto 44px;padding:0 var(--pad-x)}
.social-strip{max-width:1120px;margin:0 auto;padding:18px 54px 60px;display:grid;grid-template-columns:repeat(12,1fr);gap:0;align-items:start;position:relative}
.social-strip a{max-width:none!important;min-width:0;aspect-ratio:auto!important;background:var(--gm-white);padding:12px 12px 48px;box-shadow:14px 16px 0 rgba(0,0,0,.19)}
.social-strip a img{aspect-ratio:4/5}
.social-strip a:nth-child(1){grid-column:1/5;grid-row:1;transform:translateY(46px) rotate(-4deg)}
.social-strip a:nth-child(2){grid-column:4/8;grid-row:1;transform:translateY(0) rotate(2deg);z-index:3}
.social-strip a:nth-child(3){grid-column:7/11;grid-row:1;transform:translateY(56px) rotate(-2deg);z-index:2}
.social-strip a:nth-child(4){grid-column:9/13;grid-row:1;transform:translateY(10px) rotate(4deg)}
.social-cap{transform:none!important;background:transparent!important;padding:0!important;left:14px!important;bottom:15px!important;color:var(--gm-grey)!important;font-family:var(--f-display);font-size:.82rem!important}

/* REVIEWS — one pinned note on a dark noticeboard */
.reviews{padding:110px var(--pad-x);background:var(--gm-grey)}
.review-board-wrap{max-width:1080px;margin:0 auto;background:#2f2f2f;border:4px solid var(--gm-white);padding:34px;position:relative;box-shadow:12px 14px 0 var(--gm-red)}
.review-board-label{position:absolute;right:20px;top:-17px;background:var(--gm-teal);color:var(--gm-grey);border:2px solid var(--gm-grey);padding:8px 12px;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;transform:rotate(1.5deg)}
.review-rail{max-width:820px;min-height:330px;background:var(--gm-paper);padding:48px 50px 40px;transform:rotate(-.6deg);box-shadow:8px 9px 0 rgba(0,0,0,.2)}
.review-rail::before,.review-rail::after{content:"";position:absolute;top:12px;width:18px;height:18px;border-radius:50%;background:var(--gm-red);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.review-rail::before{left:22px}.review-rail::after{right:22px}
.review-quote{font-size:clamp(2rem,4.5vw,4rem);line-height:1.03}

/* ORDER — counter pickup station */
.order-band{position:relative;min-height:410px;padding:92px max(var(--pad-x),calc((100vw - var(--max))/2 + var(--pad-x))) 70px;align-items:center;background:var(--gm-red);overflow:hidden}
.order-counter-edge{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,#f7f7f7 0,#aaa 24%,#f2f2f2 50%,#777 100%);border-top:3px solid var(--gm-grey);border-bottom:3px solid var(--gm-grey)}
.order-band h2{font-size:clamp(4rem,9vw,8.7rem);line-height:.78;max-width:7ch}
.order-actions{max-width:460px;justify-content:flex-end}
.order-actions .btn{min-width:190px;justify-content:center}
.order-bell-wrap{margin-left:18px}
.order-bell{transform:scale(1.15)}

/* FRANCHISE — compact strip, not a second homepage */
.franchise-teaser-home{padding:0!important;background:var(--gm-grey);border-top:2px solid rgba(240,239,233,.16)}
.franchise-teaser-home .fr-teaser{max-width:none;width:100%;padding:34px max(var(--pad-x),calc((100vw - var(--max))/2 + var(--pad-x)));display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:30px;margin:0}
.franchise-teaser-home .sec-num{display:none}.franchise-teaser-home h2{font-size:clamp(1.7rem,3.3vw,3.1rem);margin:0}.franchise-teaser-home p{display:none}.fr-home-btn{margin:0;white-space:nowrap}.fr-strip-code{font-family:var(--f-display);font-size:1.2rem;color:var(--gm-teal);border-right:2px solid rgba(240,239,233,.22);padding-right:24px}

/* FINAL SIGN — final roadside hero */
.final-cta{min-height:72svh;display:grid;place-items:center;padding:110px var(--pad-x);background:var(--gm-red)}
.diner-sign{width:min(1050px,94vw);padding:48px clamp(30px,7vw,84px);border-width:5px;box-shadow:14px 16px 0 var(--gm-grey)}
.final-cta h2{font-size:clamp(5rem,13vw,11rem)}
.final-cta .btns{margin-top:42px}

/* Reduce motion competition: major loops stay, small ambient objects become calmer */
.social-strip.mounted a:nth-child(odd),.social-strip.mounted a:nth-child(even){animation-name:polaroidSlide!important;animation-iteration-count:1!important}
.motel-keytag{animation-duration:7.5s}
.matchbook-lid{animation-duration:9s}

/* TABLET */
@media(max-width:1100px){
  .hero-price-ticket{display:none}
  .monkey-tv-section{grid-template-columns:.72fr 1.28fr}.crt-wrap{width:64vw;margin-right:0}
  .sig-item.a{min-height:clamp(400px,44vw,500px)}
  .locations-stage{grid-template-columns:300px 1fr;gap:28px}.roadside-photo{height:250px}.loc-row{grid-template-columns:60px 1fr;grid-template-areas:"num name" "num addr" "links links";row-gap:6px}.loc-row-num{grid-area:num}.loc-row-name-wrap{grid-area:name}.loc-row-address{grid-area:addr}.loc-row-links{grid-area:links;justify-content:flex-start}
  .jukebox-section{grid-template-columns:.7fr 1.3fr}
  .order-band h2{font-size:clamp(4rem,8vw,7rem)}
}

/* MOBILE / NARROW — intentionally redesigned rather than blindly stacked */
@media(max-width:860px){
  .hero.hero-split{grid-template-columns:1fr}.hero-copy{padding:48px var(--pad-x) 38px;min-height:58svh}.hero-poster-rail{display:none}.hero-h-split{font-size:clamp(4.4rem,19vw,7.1rem);max-width:6.4ch}.hero-photo-panel{min-height:52svh}
  .monkey-tv-section{grid-template-columns:1fr;min-height:auto;padding:72px var(--pad-x) 86px}.tv-copy{max-width:none}.crt-wrap{width:100%;margin:10px 0 0;justify-self:stretch}
  .signature{padding:76px 0}.sig-head{margin-bottom:22px}.sig-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:0;gap:10px}.sig-item.a,.sig-item.b,.sig-item.c,.sig-item.d{flex:0 0 84vw;min-height:0!important;aspect-ratio:4/5!important;margin:0;scroll-snap-align:start}.sig-item.d{flex-basis:88vw}.sig-item.a .sig-item-label{padding:22px}.sig-more{text-align:left}
  .atmosphere{padding-top:74px}.atmo-photo.big{min-height:52svh}.atmosphere .atmo-grid + .atmo-grid{width:78%;margin:18px 0 0 auto!important;border-width:5px}.atmo-tags{padding-top:38px;padding-bottom:38px}
  .diner-counter{min-height:210px;padding:48px 20px 30px;justify-content:flex-start;gap:16px}.counter-copy{margin-left:auto}.counter-copy strong{font-size:clamp(2.2rem,10vw,3.8rem)}.counter-ticket{display:none}.counter-napkins{width:100px;height:78px}.condiment{width:44px;height:92px}
  .story{padding:88px var(--pad-x)}.story-v5 .story-grid{grid-template-columns:1fr;gap:42px}.story-text{padding:0}.story-origin-poster{order:2;min-height:390px}.story-decor-row{margin-top:24px}
  .flipboard-band{margin:0;padding:26px var(--pad-x) 38px;grid-template-columns:1fr}.flipboard{width:100%}
  .locations{padding:84px 0}.loc-head{margin-bottom:28px}.motel-keytag{display:none}.loc-head > .sec-num,.loc-head > h2{padding-right:0}.locations-stage{display:block;padding:0}.roadside-panel{position:relative;top:auto;margin:0 var(--pad-x) 28px;display:grid;grid-template-columns:.8fr 1.2fr;box-shadow:7px 8px 0 var(--gm-red)}.roadside-photo{height:180px}.roadside-sign{padding:18px}.roadside-sign strong{font-size:1.7rem}.loc-list{margin:0}.loc-row{padding:22px var(--pad-x);grid-template-columns:52px 1fr;grid-template-areas:"num name" "num addr" "links links"}.loc-row.featured{margin:0;padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .jukebox-section{min-height:auto;grid-template-columns:1fr;padding:84px var(--pad-x)}.juke-ghost-code{font-size:90vw;right:-15vw;bottom:4vh}.gm-jukebox{max-width:560px}
  .social{padding:84px 0 96px}.social-strip{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px var(--pad-x) 48px;gap:18px}.social-strip a:nth-child(n){flex:0 0 72vw;transform:rotate(0)!important;scroll-snap-align:center}.social-strip a:nth-child(odd){transform:rotate(-1.2deg)!important}.social-strip a:nth-child(even){transform:rotate(1deg)!important}
  .reviews{padding:78px var(--pad-x)}.review-board-wrap{padding:18px;box-shadow:8px 9px 0 var(--gm-red)}.review-board-label{display:none}.review-rail{padding:38px 28px 30px;min-height:310px;transform:none}.review-quote{font-size:clamp(2rem,9vw,3.4rem)}
  .order-band{min-height:auto;padding:76px var(--pad-x) 62px;display:grid;grid-template-columns:1fr;gap:42px}.order-band h2{font-size:clamp(4.2rem,18vw,7rem);max-width:6ch}.order-actions{justify-content:flex-start;max-width:none}.order-bell-wrap{margin-left:0}
  .franchise-teaser-home .fr-teaser{grid-template-columns:1fr auto;gap:16px;padding:28px var(--pad-x)}.fr-strip-code{display:none}.franchise-teaser-home h2{font-size:clamp(1.65rem,6vw,2.4rem)}
  .final-cta{min-height:60svh;padding:82px var(--pad-x)}.diner-sign{width:100%;padding:38px 20px}.final-cta h2{font-size:clamp(4.4rem,21vw,8rem)}
}

@media(max-width:560px){
  .roadside-panel{grid-template-columns:1fr}.roadside-photo{height:170px}.roadside-sign a{font-size:.62rem}
  .counter-napkins{display:none}.counter-copy{margin:0}.diner-counter{justify-content:center}
  .franchise-teaser-home .fr-teaser{grid-template-columns:1fr}.fr-home-btn{justify-self:start}
  .order-actions .btn{width:100%;min-width:0}.order-bell-wrap{justify-self:start}
}

/* ============================================================
   GRUB MONKEYS — KOT 069 HERO PRINTER
   Pure HTML/CSS object + tiny JS state/content changes.
   No GIF, video, canvas, or image asset required.
   ============================================================ */

.kot-terminal{
  --kot-paper:#fffaf0;
  --kot-ink:#2d2d2d;
  --kot-metal-1:#f2f2ef;
  --kot-metal-2:#bcbcb8;
  width:min(228px,100%);
  position:relative;
  z-index:4;
  color:var(--gm-grey,#3A3A3A);
}

.kot-terminal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:2px solid var(--gm-grey,#3A3A3A);
  border-bottom:0;
  background:var(--gm-grey,#3A3A3A);
  color:var(--gm-white,#F0EFE9);
  font-size:.5rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kot-terminal-head b{color:var(--gm-teal,#00DDC2)}

.kot-print-button{
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:16px 1fr;
  gap:10px;
  align-items:center;
  padding:9px 11px;
  border:3px solid var(--gm-grey,#3A3A3A);
  background:var(--gm-red,#EB0000);
  color:var(--gm-white,#F0EFE9);
  box-shadow:0 5px 0 var(--gm-grey,#3A3A3A);
  cursor:pointer;
  text-align:left;
  transform:translateY(0);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.kot-print-button:hover{filter:brightness(1.04)}
.kot-print-button:focus-visible{outline:3px solid var(--gm-teal,#00DDC2);outline-offset:4px}
.kot-print-button:active,
.kot-terminal.is-printing .kot-print-button{
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--gm-grey,#3A3A3A);
}
.kot-button-light{
  width:11px;height:11px;border-radius:50%;
  background:#6f5858;
  border:2px solid rgba(240,239,233,.7);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
}
.kot-button-copy strong,.kot-button-copy small{display:block}
.kot-button-copy strong{font-family:var(--f-display,"Arial Black",sans-serif);font-size:.85rem;line-height:1;letter-spacing:.05em}
.kot-button-copy small{margin-top:4px;font-size:.48rem;letter-spacing:.14em;opacity:.76}

.kot-printer{
  position:relative;
  margin-top:12px;
  padding:11px 12px 12px;
  border:3px solid var(--gm-grey,#3A3A3A);
  background:linear-gradient(155deg,var(--kot-metal-1),#deded9 44%,var(--kot-metal-2));
  box-shadow:8px 8px 0 rgba(58,58,58,.14),inset 0 1px 0 rgba(255,255,255,.8);
}
.kot-printer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background:repeating-linear-gradient(110deg,transparent 0 8px,rgba(255,255,255,.22) 8px 9px);
}
.kot-printer-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kot-printer-brand{font-size:.48rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#575753}
.kot-status-light{width:9px;height:9px;border-radius:50%;background:#7d6767;border:1px solid #5b5555}
.kot-printer-slot{position:relative;z-index:2;height:8px;border-radius:999px;background:#242424;box-shadow:inset 0 2px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.4)}

.kot-paper-window{
  position:relative;
  z-index:1;
  width:calc(100% - 18px);
  margin:0 auto;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.kot-paper{
  position:relative;
  box-sizing:border-box;
  width:100%;
  min-height:292px;
  margin:0 auto;
  padding:18px 15px 24px;
  background:
    repeating-linear-gradient(0deg,rgba(58,58,58,.025) 0 1px,transparent 1px 4px),
    var(--kot-paper);
  color:var(--kot-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.57rem;
  line-height:1.55;
  transform:translateY(-100%);
  box-shadow:0 14px 26px -18px rgba(0,0,0,.4);
  clip-path:polygon(0 0,100% 0,100% 97%,96% 100%,92% 97%,88% 100%,84% 97%,80% 100%,76% 97%,72% 100%,68% 97%,64% 100%,60% 97%,56% 100%,52% 97%,48% 100%,44% 97%,40% 100%,36% 97%,32% 100%,28% 97%,24% 100%,20% 97%,16% 100%,12% 97%,8% 100%,4% 97%,0 100%);
}
.kot-paper-header{text-align:center;text-transform:uppercase}
.kot-paper-header strong{display:block;font-size:.83rem;letter-spacing:.06em}
.kot-paper-header span{display:block;margin-top:2px;font-size:.48rem;letter-spacing:.13em}
.kot-rule{height:1px;background:var(--kot-ink);opacity:.55;margin:10px 0}
.kot-rule.dashed{background:none;border-top:1px dashed rgba(45,45,45,.65)}
.kot-meta{display:grid;grid-template-columns:1fr;gap:2px}
.kot-meta span{display:flex;justify-content:space-between;gap:10px}
.kot-ticket-content .kot-ticket-title{display:block;font-family:inherit;font-size:.67rem;font-weight:800;margin:0 0 8px;text-transform:uppercase}
.kot-ticket-content p{margin:2px 0}
.kot-house-rule{display:block;margin-top:10px;font-size:.57rem;text-transform:uppercase}
.kot-ticket-action{display:flex;justify-content:space-between;gap:8px;color:var(--kot-ink);font-weight:900;text-decoration:none;text-transform:uppercase;letter-spacing:.02em}
.kot-ticket-action:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.kot-tear{margin-top:16px;text-align:center;font-size:.44rem;letter-spacing:.08em;opacity:.56;white-space:nowrap}
.kot-print-status{margin-top:9px;font-size:.47rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6b6560}

/* Printing sequence */
.kot-terminal.is-printing .kot-button-light,
.kot-terminal.is-printed .kot-button-light{
  background:var(--gm-teal,#00DDC2);
  box-shadow:0 0 9px rgba(0,221,194,.55);
}
.kot-terminal.is-printing .kot-status-light{
  animation:kotLightBlink .14s steps(1,end) infinite;
}
.kot-terminal.is-printed .kot-status-light{
  background:var(--gm-teal,#00DDC2);
  box-shadow:0 0 8px rgba(0,221,194,.55);
}
.kot-terminal.is-printing .kot-printer{animation:kotPrinterRattle .13s linear 7}
.kot-terminal.is-printing .kot-paper-window,
.kot-terminal.is-printed .kot-paper-window{max-height:330px}
.kot-terminal.is-printing .kot-paper{animation:kotFeedPaper 1.05s cubic-bezier(.22,1,.36,1) forwards}
.kot-terminal.is-printed .kot-paper{transform:translateY(0)}
.kot-terminal.is-resetting .kot-paper-window{max-height:0}
.kot-terminal.is-resetting .kot-paper{transform:translateY(-100%);transition:transform .28s ease}

@keyframes kotFeedPaper{
  0%{transform:translateY(-100%)}
  22%{transform:translateY(-79%)}
  42%{transform:translateY(-55%)}
  63%{transform:translateY(-32%)}
  82%{transform:translateY(-10%)}
  100%{transform:translateY(0)}
}
@keyframes kotPrinterRattle{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-1px)}
  75%{transform:translateX(1px)}
}
@keyframes kotLightBlink{
  0%,49%{background:#756060;box-shadow:none}
  50%,100%{background:var(--gm-teal,#00DDC2);box-shadow:0 0 7px rgba(0,221,194,.55)}
}

/* Desktop: tuck into the hero's lower-right negative space. */
@media(min-width:1280px){
  .hero-copy{padding-bottom:122px!important}
  .hero-city-line{max-width:calc(100% - 246px)}
  .kot-terminal{
    position:absolute;
    right:clamp(20px,2.4vw,36px);
    bottom:26px;
    width:218px;
  }
}

/* Tablet/mobile: keep it in document flow, after hero CTAs. */
@media(max-width:1279px){
  .kot-terminal{margin-top:28px;width:min(310px,100%)}
  .kot-paper{font-size:.62rem}
}
@media(max-width:560px){
  .kot-terminal{width:100%;margin-top:24px}
  .kot-printer{padding-left:10px;padding-right:10px}
  .kot-paper-window{width:calc(100% - 12px)}
}

@media(prefers-reduced-motion:reduce){
  .kot-print-button,
  .kot-paper-window,
  .kot-paper{transition:none!important}
  .kot-terminal.is-printing .kot-printer,
  .kot-terminal.is-printing .kot-status-light,
  .kot-terminal.is-printing .kot-paper{animation:none!important}
  .kot-terminal.is-printing .kot-paper,
  .kot-terminal.is-printed .kot-paper{transform:translateY(0)!important}
  .kot-terminal.is-printing .kot-paper-window,
  .kot-terminal.is-printed .kot-paper-window{max-height:330px!important}
}

/* KOT 069 integration fix — the patch places the terminal in the hero's
   lower-right negative space, which the decorative "COUNTER PICK" ticket
   already occupied; the two overlapped completely at every width >=1280px.
   The KOT is the interactive element and its first ticket already features
   Korean Kong, so the static ticket is retired only where the KOT takes
   that corner. Below 1280px the KOT falls into document flow and the
   ticket keeps its original position. */
@media(min-width:1280px){
  .hero-price-ticket{display:none}
}

/* KOT 069 integration fix #2 — the printed ticket is ~488px tall but the
   terminal is anchored bottom:26px, so it grew UPWARD over the headline,
   sub-copy and CTAs at every real desktop size (1280x720 through 1920x1080).
   Rather than permanently enlarging the hero (which would break the
   full-screen poster composition), the copy panel only reserves the extra
   room once the visitor actually prints. The hero stays exactly 100svh on
   load and expands with the paper feed. */
@media(min-width:1280px){
  .hero-copy{transition:padding-bottom .45s cubic-bezier(.22,1,.36,1)}
  .hero-copy:has(.kot-terminal.is-printing),
  .hero-copy:has(.kot-terminal.is-printed),
  .hero-copy:has(.kot-terminal.is-resetting){padding-bottom:470px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy{transition:none!important}
}

/* ============================================================
   MONKEY TV — final video pack additions.
   Only the pieces the V11 CRT did not already have: the video
   class hook, the glass vignette and the sound-button state.
   Power-on / static / scanline motion already exist above and
   are intentionally not duplicated here.
   ============================================================ */
.monkey-tv-video{width:100%;height:100%;display:block;object-fit:cover;background:#090909;color:var(--gm-white,#F0EFE9)}
.crt-glass{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center,rgba(255,255,255,0) 52%,rgba(0,0,0,.16) 79%,rgba(0,0,0,.38) 100%)}
.tv-sound-button[aria-pressed="true"]{background:var(--gm-teal,#00DDC2);color:var(--gm-grey,#3A3A3A)}

/* Unplayable reel: dim the dead controls and label the screen, so a failed
   MP4 reads as "no signal" rather than as a broken button over a still frame.
   The poster keeps showing, so the CRT is never blank. */
.crt-button:disabled{opacity:.4;cursor:not-allowed}
.tv-no-signal .crt-screen::after{
  content:"NO SIGNAL";
  position:absolute;
  inset:auto 0 12% 0;
  z-index:5;
  text-align:center;
  color:var(--gm-white,#F0EFE9);
  background:rgba(0,0,0,.62);
  padding:7px 0;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.22em;
}
/* The real reel is a 1:1 square and .crt-screen is 4:3 at every breakpoint, so
   `cover` always shows the same middle 75% band — the ceiling above and the bare
   counter below are what get trimmed, which is what we want. A centred crop is
   therefore correct at all widths; no per-breakpoint object-position is needed. */

/* Korean Kong hero crop — the photograph is a 3:2 landscape with the burger
   sitting right-of-centre and deliberate empty counter to its left. In the tall
   hero panel, bias the crop right so the burger stays whole while keeping some
   of that negative space; tighten toward the burger on phones. */
.hero-photo-panel>img{object-position:68% center}
@media(max-width:900px){ .hero-photo-panel>img{object-position:72% center} }
@media(max-width:560px){ .hero-photo-panel>img{object-position:76% center} }

/* ============================================================
   CONTRAST — WCAG AA corrections.

   Sorta White (#F0EFE9) on Monkey Red (#EB0000) measures 4.02:1, just under
   the 4.5:1 AA floor for normal-size text. Every instance below is small
   text, so none of them qualify for the 3:1 large-text allowance.

   The brand red is deliberately left untouched: pure #FFFFFF on #EB0000
   measures 4.63:1 and passes, so the correction is made on the text rather
   than by darkening the brand colour. Cream to white on red is a barely
   perceptible shift and keeps the palette intact.
   ============================================================ */
.btn-diner,
.kot-print-button,
.menu-tab.active,
.menu-tab.active .jcode,
.ticker-item,
.ticker-item::after,
.fr-submit,
.order-code,
.coin-trigger,
.gm-session-chip,
.gm-fortune-group>span,
.gm-sauce-meter__photo-label span,
.gm-sauce-meter__photo-label strong{
  color:#FFFFFF;
}

/* Monkey Teal (#00DDC2) on Sorta White measures 1.50:1 — unreadable at the
   14px used for the Monkey TV channel codes. A deepened teal reserved for
   small teal text on light surfaces measures 4.74:1. Large decorative
   numerals keep the bright brand teal. */
:root{ --gm-teal-ink:#00776A; }
.tv-channel span{ color:var(--gm-teal-ink); }

/* ============================================================
   TOUCH TARGETS — WCAG 2.5.8 (24x24 CSS px minimum).
   Inline and footer links were rendering 15-18px tall on phones.
   Padding is used rather than min-height so the text baselines and the
   existing flex/column gaps are unchanged; the gaps are reduced by the
   same amount the padding adds so vertical rhythm holds.
   ============================================================ */
@media(max-width:900px){
  .foot-links{ gap:2px; }
  .foot-links a,
  .foot-social a,
  .foot-bottom a{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 0;
  }
  .loc-row-links .loc-link,
  .text-cta,
  .kot-ticket-action,
  #roadsideDirections{
    display:inline-flex;
    align-items:center;
    min-height:24px;
  }
  .coin-trigger{ min-height:32px; display:inline-flex; align-items:center; }
}

/* Monkey Red as *text* on Sorta White is also 4.02:1. Same treatment as the
   reverse pairing: a marginally deepened red reserved for small red text on
   light surfaces (4.51:1). Large display type keeps the exact brand red. */
:root{ --gm-red-ink:#DC0000; }
.tv-channel:hover,
.tv-channel.active,
.tv-channel.active span,
.story-founder,
.clock-brand,
.flip-kicker,
.gm-fortune-copy .gm-machine-code{
  color:var(--gm-red-ink);
}
.matchbook-brand{ color:#FFFFFF; }

/* ============================================================
   VERTICAL RHYTHM COMPRESSION

   The V11 layout pass sized most sections to roughly one viewport — several
   carried min-height in svh, and section padding had grown to 200-256px
   combined. Measured before this block: 13,208px on desktop (14.7 screens)
   and 15,387px on mobile (18.2 screens), which reads as dead space rather
   than deliberate negative space.

   Two changes, applied proportionally so the asymmetric section rhythm the
   V11 direction depends on is preserved rather than flattened:

   1. Sections size to their content. The svh min-heights are released
      except where a section IS a full-bleed statement (the hero, the final
      diner sign), and those are trimmed so the next section peeks above the
      fold and signals there is more page.
   2. Section padding drops by roughly a third, on a shared clamp scale so
      it keeps tracking viewport width.
   ============================================================ */

:root{
  /* Second pass. Adjacent sections each contribute their own padding, so
     every boundary was carrying 136-170px of empty ground before any
     internal margins were added on top; the measured voids at section
     joins ran 200-285px. Roughly a third comes off again. */
  --sec-y:        clamp(30px, 3.4vw, 46px);  /* standard section padding   */
  --sec-y-tight:  clamp(22px, 2.4vw, 32px);  /* bands and strips           */
  --sec-y-loose:  clamp(36px, 4.2vw, 56px);  /* the few that carry a hero  */
}

/* --- Release the full-screen constraints --- */
.monkey-tv-section{ min-height:auto; }
.jukebox-section{ min-height:auto; }
.order-band{ min-height:auto; }
.diner-counter{ min-height:auto; }
.final-cta{ min-height:auto; }
.atmo-photo.big{ min-height:clamp(280px,42svh,420px); }

/* The hero stays a poster, but at a full 100svh the fold lands exactly on
   its bottom edge and the page looks like it ends there. Trimming it lets
   the ticker show through as a scroll cue. */
.hero.hero-split{ min-height:88svh; }

/* --- Section padding, reduced on a shared scale --- */
.signature{        padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.locations{        padding-top:var(--sec-y-loose); padding-bottom:var(--sec-y-loose); }
.social{           padding-top:var(--sec-y-loose); padding-bottom:var(--sec-y-loose); }
.reviews{          padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.story{            padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.monkey-tv-section{padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.jukebox-section{  padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.order-band{       padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.final-cta{        padding-top:var(--sec-y-loose); padding-bottom:var(--sec-y-loose); }
.campaign-band{    padding-top:var(--sec-y-tight); padding-bottom:var(--sec-y-tight); }
.franchise{        padding-top:var(--sec-y);       padding-bottom:var(--sec-y); }
.atmosphere{       padding-top:var(--sec-y);       padding-bottom:0; }
.gm-fortune-section{padding-top:var(--sec-y);      padding-bottom:var(--sec-y); }
.diner-counter{    padding-top:var(--sec-y-tight); padding-bottom:var(--sec-y-tight); }
.flipboard-band{   padding-top:var(--sec-y-tight); padding-bottom:var(--sec-y-tight); }

/* Phones were the worst case at 18.2 screens: same scale, tightened again,
   since every section is single-column there and the padding stacks up. */
@media(max-width:900px){
  :root{
    --sec-y:       clamp(26px, 5.4vw, 36px);
    --sec-y-tight: clamp(18px, 4vw, 26px);
    --sec-y-loose: clamp(30px, 6vw, 42px);
  }
  .hero.hero-split{ min-height:auto; }
  .hero-copy{ min-height:auto; }
  .atmo-photo.big{ min-height:clamp(240px,36svh,340px); }
}

/* --- Oversized content blocks -------------------------------------------
   The remaining height was content, not padding. These are the blocks that
   were scaled to fill a viewport rather than to suit their subject. The
   photography stays large — this is a photograph-led site — just no longer
   a full screen each. */

/* A single atmosphere photo occupied 68svh (648px at 900px tall). */
.atmo-photo.big{ min-height:clamp(300px, 46svh, 460px); }
.atmo-photo.small{ min-height:clamp(190px, 26svh, 250px); }

/* Hall of Fame: the tiles carry explicit min-heights from the V11 pass (the
   hero tile a hard 720px), which is what actually set the section's height —
   aspect-ratio cannot win against a larger min-height. Trimmed at source, so
   the asymmetric a/b/c/d composition is unchanged, just less tall. */
.sig-item.a{ min-height:clamp(420px, 46vw, 530px); }
.sig-item.b,
.sig-item.c{ min-height:250px; aspect-ratio:16/8.2; }
.sig-item.d{ min-height:205px; aspect-ratio:30/7; }

/* interactive-diner.css loads after styles.css, so the fortune section's own
   padding beat the shared scale above. Matched here at equal specificity. */
.gm-fortune-section.gm-fortune-section{
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}

/* ============================================================
   HALL OF FAME — fit the section within one viewport.

   It measured 1,176px against a 900px viewport: 68px padding top and
   bottom, a 152px head, and an 837px tile grid. The grid is ~71% of that,
   so the reduction comes mostly from the crops rather than from squeezing
   the type or the spacing to nothing.

   The composition is unchanged — the same a/b/c/d arrangement, the hero
   tile still spanning the left column with the two stacked tiles beside it
   and the wide tile beneath. Only the crop proportions and the padding
   change. Scoped above the mobile breakpoint, where the grid becomes a
   horizontal scroller with its own aspect ratios.
   ============================================================ */
@media(min-width:901px){
  .signature{
    padding-top:36px;
    padding-bottom:36px;
  }

  /* Drive the tile heights from the viewport rather than from crop ratios.
     Fixed aspect ratios depend on the rendered column width, which changes
     with the grid's max-width cap, so they overshoot on wide screens and
     undershoot on narrow ones. Explicit rows in svh keep the section within
     one screen at every desktop size. */
  .sig-grid{
    /* Row 3 is pinned rather than auto: it holds only the tail of the
       spanning hero tile, and as an auto row it inflated to ~91px. */
    grid-template-rows:22svh 22svh 0 18svh;
  }
  .sig-item.a,
  .sig-item.b,
  .sig-item.c,
  .sig-item.d{
    min-height:0;
    aspect-ratio:auto;
  }
  .sig-item.d{ margin-top:10px; }
  .sig-more{ margin-top:14px; padding-top:0; }
}

/* ============================================================
   REVIEWS + ORDER — compact shared desktop scene
   Keeps both sections visible together instead of spending a full viewport
   on one customer quote and then another oversized ordering panel.
   ============================================================ */
.proof-order-combo{
  background:var(--gm-grey);
  padding:clamp(52px,6vw,82px) var(--pad-x);
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);
  gap:clamp(18px,2.6vw,34px);
  align-items:stretch;
}

.proof-order-combo > .reviews,
.proof-order-combo > .order-band{
  min-height:0;
  padding:0;
  margin:0;
}

/* Customer note stays tactile, but becomes an editorial card rather than a full screen. */
.proof-order-combo > .reviews{
  background:transparent;
  display:flex;
}

.proof-order-combo .review-board-wrap{
  width:100%;
  max-width:none;
  margin:0;
  padding:22px;
  border-width:3px;
  box-shadow:8px 9px 0 var(--gm-red);
  display:flex;
  align-items:stretch;
}

.proof-order-combo .review-board-label{
  right:16px;
  top:-14px;
  padding:7px 10px;
  font-size:.52rem;
}

.proof-order-combo .review-rail{
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  padding:34px 34px 28px;
  transform:rotate(-.35deg);
  box-shadow:5px 6px 0 rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}

.proof-order-combo .review-rail .sec-num{
  margin-bottom:14px;
}

.proof-order-combo .review-slide.active{
  flex:1;
}

.proof-order-combo .review-quote{
  max-width:27ch;
  margin:0;
  font-size:clamp(1.55rem,2.5vw,2.65rem);
  line-height:1.08;
}

.proof-order-combo .review-meta{
  margin-top:16px;
  font-size:.68rem;
  line-height:1.45;
}

.proof-order-combo .review-nav{
  margin-top:20px;
  gap:14px;
}

.proof-order-combo .review-arrow{
  width:36px;
  height:36px;
}

/* Online ordering becomes the companion counter card in the same scene. */
.proof-order-combo > .order-band{
  position:relative;
  overflow:hidden;
  background:var(--gm-red);
  border:3px solid var(--gm-white);
  box-shadow:8px 9px 0 rgba(0,0,0,.22);
  padding:52px 30px 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:stretch;
  gap:24px;
  color:var(--gm-white);
}

.proof-order-combo .order-counter-edge{
  height:18px;
  border-top-width:2px;
  border-bottom-width:2px;
}

.proof-order-combo .order-code{
  font-size:.56rem;
}

.proof-order-combo .order-band h2{
  margin-top:9px;
  max-width:6ch;
  font-size:clamp(3.05rem,5.4vw,5.25rem);
  line-height:.8;
}

.proof-order-combo .order-actions{
  max-width:none;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:end;
  justify-content:stretch;
}

.proof-order-combo .order-actions .btn{
  min-width:0;
  width:100%;
  min-height:46px;
  justify-content:center;
  padding-inline:12px;
  font-size:.62rem;
}

.proof-order-combo .order-bell-wrap{
  grid-column:1 / -1;
  justify-self:start;
  margin:8px 0 0;
  padding-left:0;
}

.proof-order-combo .order-bell{
  transform:scale(.88);
  transform-origin:left bottom;
}

.proof-order-combo .order-ticket{
  right:auto;
  left:72px;
  top:10px;
}

@media(max-width:1050px){
  .proof-order-combo{
    grid-template-columns:1fr;
    padding-top:64px;
    padding-bottom:64px;
  }

  .proof-order-combo > .order-band{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr);
    align-items:center;
    gap:26px;
    padding:46px 28px 28px;
  }

  .proof-order-combo .order-actions{
    align-self:center;
  }
}

@media(max-width:700px){
  .proof-order-combo{
    padding:54px var(--pad-x);
    gap:22px;
  }

  .proof-order-combo .review-board-wrap{
    padding:14px;
    box-shadow:6px 7px 0 var(--gm-red);
  }

  .proof-order-combo .review-board-label{
    display:none;
  }

  .proof-order-combo .review-rail{
    padding:32px 22px 24px;
    transform:none;
  }

  .proof-order-combo .review-quote{
    font-size:clamp(1.7rem,7.5vw,2.45rem);
  }

  .proof-order-combo > .order-band{
    display:flex;
    padding:42px 22px 24px;
  }

  .proof-order-combo .order-band h2{
    font-size:clamp(3.2rem,14vw,5rem);
  }

  .proof-order-combo .order-actions{
    grid-template-columns:1fr;
  }

  .proof-order-combo .order-bell-wrap{
    grid-column:auto;
  }
}

/* ============================================================
   JUKEBOX — COMPACT 50% VISUAL FOOTPRINT
   Keeps the original CSS-built shell, coin interaction, vinyl,
   selector and Mixcloud player while reducing the object size.
   ============================================================ */
@media (min-width:861px){
  .jukebox-section{
    grid-template-columns:minmax(300px,1fr) minmax(360px,.82fr);
    gap:clamp(28px,4vw,60px);
  }
  .gm-jukebox{
    max-width:360px;
  }
}

.gm-jukebox{
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.32));
}

/* Preserve the same physical object, but tune fixed-pixel details so they
   remain crisp at the smaller shell size rather than looking oversized. */
.gm-jukebox-shell{
  border-width:4px;
  box-shadow:inset 0 0 0 4px var(--gm-grey);
}
.juke-arch{
  border-width:6px;
  border-bottom-width:3px;
  box-shadow:0 0 0 3px var(--gm-teal);
}
.juke-lights{
  height:12px;
  background:radial-gradient(circle,var(--gm-white) 0 2px,transparent 2.6px) left center/10% 100% repeat-x;
}
.juke-columns::before,
.juke-columns::after{
  border-width:3px;
}
.juke-speaker{
  background:radial-gradient(circle,var(--gm-teal) 0 1px,transparent 1.5px) 0 0/7px 7px;
}
.juke-base{
  border-width:3px;
  background:repeating-linear-gradient(0deg,var(--gm-white) 0 3px,var(--gm-grey) 3px 6px);
}

/* The control deck is proportionally wider inside the smaller body so all
   original functions remain legible and clickable. */
.gm-jukebox-player{
  left:10%;
  right:10%;
  top:45%;
  min-height:0;
  padding:9px;
  gap:7px;
  border-width:3px;
  box-shadow:0 0 0 3px var(--gm-teal);
}
.juke-record{
  width:44px;
  height:44px;
  border-width:2px;
}
.juke-record span{
  width:19px;
  height:19px;
  font-size:.48rem;
}
.juke-player-label strong{font-size:.6rem}
.juke-player-label small{font-size:.46rem}
.gm-jukebox-player .mixcloud-player{height:58px}

.coin-slot-wrap{
  left:10px;
  top:-14px;
  gap:3px;
}
.coin-slot-label{
  font-size:.47rem;
  padding:3px 5px;
  border-width:1px;
}
.coin-slot{
  width:54px;
  height:8px;
}
.coin-token{
  left:17px;
  top:-20px;
  width:19px;
  height:19px;
  border-width:1px;
}
.coin-token::before{font-size:.39rem}
.coin-trigger{
  right:8px;
  top:-20px;
  padding:5px 7px;
  border-width:1px;
  font-size:.52rem;
  box-shadow:3px 3px 0 rgba(58,58,58,.8);
}

/* Keep it compact on stacked layouts too, without making it narrower than
   the interactive control deck can comfortably support. */
@media (max-width:860px){
  .gm-jukebox{max-width:360px}
  .jukebox-section{gap:30px}
}

@media (max-width:420px){
  .gm-jukebox{max-width:min(340px,100%)}
  .gm-jukebox-player{left:8%;right:8%;top:44%;padding:8px}
  .juke-record{width:40px;height:40px}
  .gm-jukebox-player .mixcloud-player{height:56px}
}


/* ============================================================
   ORDER + "HUNGRY YET?" — ONE COMPACT COUNTER CARD
   The final CTA now lives inside the existing order card instead
   of spending another full section on the same conversion moment.
   Keeps Reviews + Order in one scene and removes the duplicate page.
   ============================================================ */

.proof-order-combo > .order-band{
  gap:18px;
  padding-bottom:22px;
}

.proof-order-combo .order-band__top{
  display:grid;
  gap:20px;
  min-width:0;
}

.proof-order-combo .order-band__headline{
  min-width:0;
}

.proof-order-combo .order-hungry-bridge{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  height:10px;
  border-top:2px solid var(--gm-white);
  border-bottom:2px solid var(--gm-white);
  overflow:hidden;
}

.proof-order-combo .order-hungry-bridge span{
  background:var(--gm-white);
}

.proof-order-combo .order-hungry-bridge span:nth-child(even){
  background:var(--gm-grey);
}

.proof-order-combo .diner-sign--compact{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px 18px;
  padding:22px 18px 20px;
  border:3px solid var(--gm-white);
  background:rgba(58,58,58,.12);
  box-shadow:5px 6px 0 rgba(0,0,0,.18);
  text-align:left;
  overflow:hidden;
}

.proof-order-combo .diner-sign--compact__copy{
  min-width:0;
}

.proof-order-combo .diner-sign--compact h3{
  margin:6px 0 0;
  font-family:var(--f-display);
  font-size:clamp(2.35rem,4.4vw,4.35rem);
  line-height:.82;
  text-transform:uppercase;
  color:var(--gm-white);
}

.proof-order-combo .diner-sign--compact .btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin:0;
}

.proof-order-combo .diner-sign--compact .btn{
  min-height:42px;
  padding:11px 13px;
  font-size:.58rem;
  white-space:nowrap;
}

/* The existing sign-light script still targets these bulbs. Keep them
   decorative and outside all text/CTA hit areas. */
.proof-order-combo .diner-sign--compact .sign-bulbs{
  position:absolute;
  left:10px;
  right:10px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}

.proof-order-combo .diner-sign--compact .sign-bulbs.top{
  top:6px;
}

.proof-order-combo .diner-sign--compact .sign-bulbs.bottom{
  bottom:6px;
}

.proof-order-combo .diner-sign--compact .bulb{
  width:5px;
  height:5px;
  opacity:.35;
}

.proof-order-combo .diner-sign--compact.lit .bulb{
  opacity:1;
}

/* This section no longer exists in the homepage markup. Keep this guard
   in case stale cache/partial merges leave it behind. */
.final-cta{
  min-height:0;
}

@media(min-width:1051px){
  .proof-order-combo > .order-band{
    justify-content:flex-start;
  }

  .proof-order-combo .order-band__top{
    flex:1 1 auto;
    align-content:start;
  }

  .proof-order-combo .order-actions{
    margin-top:auto;
  }
}

@media(max-width:1050px){
  .proof-order-combo > .order-band{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }

  .proof-order-combo .order-band__top{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(320px,1.12fr);
    gap:24px;
    align-items:center;
  }

  .proof-order-combo .diner-sign--compact{
    grid-template-columns:minmax(0,1fr) auto;
  }
}

@media(max-width:700px){
  .proof-order-combo .order-band__top{
    grid-template-columns:1fr;
  }

  .proof-order-combo .diner-sign--compact{
    grid-template-columns:1fr;
    padding:22px 18px 18px;
  }

  .proof-order-combo .diner-sign--compact h3{
    font-size:clamp(3rem,15vw,4.8rem);
  }

  .proof-order-combo .diner-sign--compact .btns{
    justify-content:flex-start;
  }

  .proof-order-combo .diner-sign--compact .btn{
    flex:1 1 140px;
    justify-content:center;
  }
}

@media(max-width:430px){
  .proof-order-combo .order-hungry-bridge{
    grid-template-columns:repeat(8,1fr);
  }

  .proof-order-combo .order-hungry-bridge span:nth-child(n+9){
    display:none;
  }
}


.proof-order-combo .diner-sign--compact h3{
  position:relative;
  color:rgba(255,255,255,.84);
  transition:color .2s ease,text-shadow .2s ease;
}

.proof-order-combo .diner-sign--compact.lit h3{
  animation:signWarm .7s steps(1,end) .15s forwards;
}

.proof-order-combo .diner-sign--compact h3{
  position:relative;
  color:rgba(255,255,255,.84);
  transition:color .2s ease,text-shadow .2s ease;
}

.proof-order-combo .diner-sign--compact.lit h3{
  animation:signWarm .7s steps(1,end) .15s forwards;
}


/* ============================================================
   HALL OF FAME — SQUARE DINER PHOTO FRAMES
   Full 1:1 food photography with clean retro framing.
   Text/prices live outside the image so the food stays unobstructed.
   ============================================================ */
.signature#signature{
  padding-top:clamp(54px,6vw,82px);
  padding-bottom:clamp(58px,6vw,86px);
  overflow:hidden;
}
.signature#signature .sig-head{
  max-width:1080px;
  margin:0 auto clamp(24px,3vw,36px);
  padding:0 var(--pad-x);
}
.signature#signature .sig-grid.sig-grid-square{
  max-width:1080px;
  margin:0 auto;
  padding:0 var(--pad-x);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:none;
  gap:clamp(22px,3.2vw,38px);
  overflow:visible;
}
.signature#signature .sig-item.a,
.signature#signature .sig-item.b,
.signature#signature .sig-item.c,
.signature#signature .sig-item.d{
  grid-column:auto;
  grid-row:auto;
  min-height:0;
  aspect-ratio:auto;
  margin:0;
  padding:30px 13px 13px;
  display:block;
  position:relative;
  overflow:visible;
  background:var(--gm-white);
  border:3px solid var(--gm-grey);
  box-shadow:8px 9px 0 rgba(58,58,58,.16), 12px 13px 0 var(--gm-red);
  transform:none;
}

/* Red/cream diner-check rail built into the frame, not over the food. */
.signature#signature .sig-item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:13px;
  border-bottom:2px solid var(--gm-grey);
  background:repeating-linear-gradient(90deg,var(--gm-red) 0 18px,var(--gm-white) 18px 36px);
}
.signature#signature .sig-item::after{
  position:absolute;
  top:15px;
  right:12px;
  z-index:3;
  padding:3px 7px 2px;
  background:var(--gm-grey);
  color:var(--gm-white);
  border:1px solid var(--gm-grey);
  font-size:.46rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}
.signature#signature .sig-item:nth-child(1)::after{content:"HOF / 01"}
.signature#signature .sig-item:nth-child(2)::after{content:"HOF / 02"}
.signature#signature .sig-item:nth-child(3)::after{content:"HOF / 03"}
.signature#signature .sig-item:nth-child(4)::after{content:"HOF / 04"}

.signature#signature .sig-photo-frame{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--gm-grey);
  border:3px solid var(--gm-grey);
  box-shadow:inset 0 0 0 3px var(--gm-white);
}
.signature#signature .sig-photo-frame::before,
.signature#signature .sig-photo-frame::after{
  content:"";
  position:absolute;
  z-index:4;
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid #5f5f5f;
  background:radial-gradient(circle at 35% 30%,#fff,#aaa 52%,#555);
  box-shadow:0 0 0 1px rgba(58,58,58,.25);
  pointer-events:none;
}
.signature#signature .sig-photo-frame::before{left:8px;top:8px}
.signature#signature .sig-photo-frame::after{right:8px;bottom:8px}

.signature#signature .sig-item img{
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
  display:block;
  object-fit:cover;
  transform:scale(1.001);
  filter:none;
  transition:transform var(--gm-motion-medium) var(--gm-ease-editorial), filter .2s ease;
}
.signature#signature .sig-item.a img{object-position:68% 50%}
.signature#signature .sig-item.b img{object-position:50% 49%}
.signature#signature .sig-item.c img{object-position:50% 43%}
.signature#signature .sig-item.d img{object-position:50% 50%}
.signature#signature .sig-item:hover img{transform:scale(1.025)}

/* Copy becomes a diner menu plate below the square photo — never overlays it. */
.signature#signature .sig-item-label,
.signature#signature .sig-item.a .sig-item-label{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  padding:15px 3px 2px;
  color:var(--gm-grey);
  background:none;
}
.signature#signature .sig-item-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:9px;
  border-bottom:2px solid var(--gm-grey);
}
.signature#signature .sig-item-name,
.signature#signature .sig-item.a .sig-item-name{
  min-width:0;
  font-size:clamp(1.75rem,3.1vw,3rem);
  line-height:.9;
  color:var(--gm-grey);
}
.signature#signature .sig-item-price{
  position:static;
  flex:0 0 auto;
  margin-top:1px;
  padding:5px 8px 4px;
  transform:rotate(-1.5deg);
  background:var(--gm-red);
  color:var(--gm-white);
  border:2px solid var(--gm-grey);
  box-shadow:3px 3px 0 rgba(58,58,58,.14);
  font-size:.67rem;
  line-height:1;
  white-space:nowrap;
}
.signature#signature .sig-item-desc{
  max-width:none;
  margin-top:9px;
  color:rgba(58,58,58,.78);
  font-size:.72rem;
  line-height:1.45;
}
.signature#signature .sig-more{
  max-width:1080px;
  margin:clamp(24px,3vw,36px) auto 0;
  padding:0 var(--pad-x);
  text-align:right;
}

/* Keep the old fan-favourite blind as a tiny awning label in the frame rail.
   It no longer covers the Korean Kong photograph on entry. */
.signature#signature .window-blind{
  position:absolute;
  inset:15px auto auto 14px;
  z-index:5;
  width:auto;
  height:auto;
  padding:0;
  background:none;
  transform:none!important;
  box-shadow:none;
  display:block;
  animation:none!important;
  will-change:auto;
}
.signature#signature .window-blind::before{display:none}
.signature#signature .window-blind span{
  display:block;
  padding:3px 7px 2px;
  border:1px solid var(--gm-grey);
  background:var(--gm-teal);
  color:var(--gm-grey);
  font-size:.45rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
  box-shadow:2px 2px 0 rgba(58,58,58,.12);
}
.signature#signature .sig-item.blind-open .window-blind{animation:none!important;transform:none!important}

@media(max-width:860px){
  .signature#signature{padding-top:58px;padding-bottom:66px}
  .signature#signature .sig-head{margin-bottom:22px}
  .signature#signature .sig-grid.sig-grid-square{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px;
    padding-right:var(--pad-x);
    scrollbar-width:none;
  }
  .signature#signature .sig-grid.sig-grid-square::-webkit-scrollbar{display:none}
  .signature#signature .sig-item.a,
  .signature#signature .sig-item.b,
  .signature#signature .sig-item.c,
  .signature#signature .sig-item.d{
    flex:0 0 min(78vw,430px);
    min-height:0!important;
    aspect-ratio:auto!important;
    scroll-snap-align:center;
    padding:28px 11px 11px;
  }
  .signature#signature .sig-item.a .sig-item-label{padding:14px 3px 2px}
  .signature#signature .sig-item-name,
  .signature#signature .sig-item.a .sig-item-name{font-size:clamp(1.65rem,7vw,2.4rem)}
  .signature#signature .sig-more{text-align:left;margin-top:24px}
}

@media(max-width:480px){
  .signature#signature .sig-item.a,
  .signature#signature .sig-item.b,
  .signature#signature .sig-item.c,
  .signature#signature .sig-item.d{flex-basis:84vw}
  .signature#signature .sig-item-title-row{gap:9px}
  .signature#signature .sig-item-price{font-size:.59rem;padding:5px 6px 4px}
}

/* ============================================================
   REVIEWS + COUNTER 08 — 50% HEIGHT COMPRESSION (DESKTOP)
   Keeps the same noticeboard / red counter language and every control,
   but removes the oversized vertical footprint that was bleeding into
   the following section on laptop-sized screens.
   ============================================================ */
@media (min-width:1051px){
  .proof-order-combo{
    padding-top:clamp(24px,3vw,38px);
    padding-bottom:clamp(24px,3vw,38px);
    gap:clamp(14px,2vw,24px);
  }

  .proof-order-combo .review-board-wrap{
    padding:12px;
    box-shadow:6px 7px 0 var(--gm-red);
  }

  .proof-order-combo .review-board-label{
    top:-11px;
    right:12px;
    padding:5px 8px;
    font-size:.46rem;
  }

  .proof-order-combo .review-rail{
    padding:20px 24px 18px;
    min-height:0;
    box-shadow:4px 5px 0 rgba(0,0,0,.18);
  }

  .proof-order-combo .review-rail .sec-num{
    margin-bottom:8px;
  }

  .proof-order-combo .review-rail .sec-num .n{
    font-size:clamp(2.4rem,4vw,3.7rem);
  }

  .proof-order-combo .review-rail .sec-num .t{
    font-size:.58rem;
  }

  .proof-order-combo .review-slide.active{
    flex:0 0 auto;
  }

  .proof-order-combo .review-quote{
    max-width:34ch;
    font-size:clamp(1.2rem,1.85vw,1.85rem);
    line-height:1.06;
  }

  .proof-order-combo .review-meta{
    margin-top:9px;
    font-size:.57rem;
    line-height:1.3;
  }

  .proof-order-combo .review-nav{
    margin-top:11px;
    gap:10px;
  }

  .proof-order-combo .review-arrow{
    width:30px;
    height:30px;
  }

  .proof-order-combo .review-counter{
    font-size:.62rem;
  }

  .proof-order-combo > .order-band{
    padding:26px 20px 16px;
    gap:10px;
    justify-content:flex-start;
  }

  .proof-order-combo .order-counter-edge{
    height:10px;
  }

  .proof-order-combo .order-band__top{
    gap:10px;
    flex:0 0 auto;
  }

  .proof-order-combo .order-code{
    font-size:.48rem;
  }

  .proof-order-combo .order-band h2{
    margin-top:5px;
    font-size:clamp(2.45rem,3.8vw,3.75rem);
    line-height:.78;
    max-width:6ch;
  }

  .proof-order-combo .order-actions{
    margin-top:0;
    gap:7px;
  }

  .proof-order-combo .order-actions .btn{
    min-height:36px;
    padding:8px 9px;
    font-size:.52rem;
  }

  .proof-order-combo .order-bell-wrap{
    margin-top:2px;
    min-height:44px;
    transform:scale(.8);
    transform-origin:left center;
  }

  .proof-order-combo .order-hungry-bridge{
    height:6px;
    border-top-width:1px;
    border-bottom-width:1px;
  }

  .proof-order-combo .diner-sign--compact{
    gap:8px 12px;
    padding:13px 12px 12px;
    border-width:2px;
    box-shadow:3px 4px 0 rgba(0,0,0,.18);
  }

  .proof-order-combo .diner-sign--compact h3{
    margin-top:3px;
    font-size:clamp(1.9rem,3vw,2.75rem);
    line-height:.82;
  }

  .proof-order-combo .diner-sign--compact .btns{
    gap:6px;
  }

  .proof-order-combo .diner-sign--compact .btn{
    min-height:34px;
    padding:8px 10px;
    font-size:.5rem;
  }

  .proof-order-combo .diner-sign--compact .sign-bulbs.top{
    top:3px;
  }

  .proof-order-combo .diner-sign--compact .sign-bulbs.bottom{
    bottom:3px;
  }

  .proof-order-combo .diner-sign--compact .bulb{
    width:4px;
    height:4px;
  }
}


/* =========================================================
   STORY ORIGIN — MANIPAL PHOTO
   Full-frame origin diner photo in the existing retro frame.
   ========================================================= */
.story-origin-poster.story-origin-photo{
  position:relative;
  min-height:470px;
  overflow:hidden;
  border:4px solid var(--gm-grey);
  background:var(--gm-grey);
  box-shadow:9px 10px 0 rgba(58,58,58,.14);
  display:flex;
  align-items:flex-end;
  isolation:isolate;
}

.story-origin-poster.story-origin-photo>img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  opacity:1;
}

.story-origin-poster.story-origin-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.02) 0%,
    rgba(0,0,0,.04) 52%,
    rgba(0,0,0,.72) 100%
  );
}

.story-origin-poster.story-origin-photo .origin-checker{
  z-index:3;
}

.story-origin-poster.story-origin-photo .origin-copy{
  position:relative;
  z-index:4;
  width:100%;
  padding:32px;
  color:var(--gm-white);
}

.story-origin-poster.story-origin-photo .origin-copy strong{
  text-shadow:0 3px 0 rgba(58,58,58,.35);
}

.story-origin-poster.story-origin-photo .origin-copy small{
  color:var(--gm-grey);
  background:var(--gm-teal);
}

@media(max-width:860px){
  .story-origin-poster.story-origin-photo{
    min-height:390px;
  }
}

@media(max-width:560px){
  .story-origin-poster.story-origin-photo{
    min-height:330px;
  }

  .story-origin-poster.story-origin-photo .origin-copy{
    padding:24px;
  }
}

/* ============================================================
   RE-APPLIED FIXES (the uploaded build predates them)
   ============================================================ */

/* Jukebox player: absolute at top:44-45% of a 4/5 shell leaves only the lower
   half for a control deck that is taller than that on phones, so
   .jukebox-section{overflow:hidden} clipped the B1/B2 buttons and the audio
   player. Below 700px it moves into normal flow over the machine body.
   position:relative keeps the coin slot's containing block; the inherited
   percentage offsets are cleared since on a relative box they shift rather
   than inset. */
@media(max-width:700px){
  .gm-jukebox-player{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    margin:clamp(64px, 24vw, 104px) auto 0;
  }
  .coin-slot-wrap{ top:-14px; }
}

/* Hall of Fame prices sit on red chips at ~10.7px. Sorta White on Monkey Red
   is 4.02:1; pure white is 4.63:1 and clears AA without changing the brand. */
.signature#signature .sig-item-price,
.sig-item-title-row .sig-item-price{
  color:#FFFFFF;
}

/* The combined scene pairs two equal-height cards, and the order column
   genuinely needs its height (779px of content at 1440). The noticeboard's
   content is only ~180px, so .review-rail — a flex column starting at
   flex-start — left roughly 560px of dead white below the pagination.
   Centring the group distributes that space around the pinned note instead
   of pooling it in one empty block. The cards stay the same size as each
   other; only the note's vertical position changes. */
@media(min-width:1051px){
  .review-rail{
    justify-content:center;
  }
}

/* The origin headline inherits clamp(3.4rem,7vw,6.4rem) — sized against the
   viewport while the poster is a fixed-width column, so the two diverge as
   the screen widens. "MANIPAL." overflowed the frame by 51px at 1440 and
   57px at 1920 and the poster's overflow:hidden clipped the "L." off.
   Sizing it against the frame with container units keeps it inside at any
   width; the mobile sizes were already fine and land in the same range. */
.story-origin-poster.story-origin-photo{
  container-type:inline-size;
  container-name:gmorigin;
}
.story-origin-poster.story-origin-photo .origin-copy strong{
  font-size:clamp(2.4rem, 18.5cqw, 5.4rem);
}

/* ============================================================
   STORY PANEL — FOUNDER POSTER

   The panel now holds a finished poster rather than a photograph, so it is
   shown whole. Three things follow from that:

   1. The frame takes the poster's own 1122x1402 (0.8) proportion at every
      breakpoint. The desktop frame already matched, but tablet was 1.77 and
      mobile 1.06, which would have sliced the artwork.
   2. object-fit:contain rather than cover, so the poster can never be
      cropped even if the frame rounds differently.
   3. The THE ORIGIN / MANIPAL. caption is hidden here. It is white text on
      a dark scrim, and the poster's lower third is cream — the caption
      would be close to illegible and would cover the poster's own badge
      and stripe. The poster already carries that copy in its body text.
   ============================================================ */
.story-origin-poster.story-origin-photo:has(img[src*="founder-"]){
  aspect-ratio:1122 / 1402;
  min-height:0;
  background:var(--gm-white,#F0EFE9);
}
.story-origin-poster.story-origin-photo:has(img[src*="founder-"]) > img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.story-origin-poster.story-origin-photo:has(img[src*="founder-"]) .origin-copy,
.story-origin-poster.story-origin-photo:has(img[src*="founder-"]) .origin-checker,
.story-origin-poster.story-origin-photo:has(img[src*="founder-"])::before,
.story-origin-poster.story-origin-photo:has(img[src*="founder-"])::after{
  display:none;
}

/* With a poster rather than a photograph, the panel carries real copy — the
   founder's name and the description — so it has to be readable. At the V11
   1.18fr/.82fr split with a 130px gutter it rendered at 33% of native. Give
   the poster column more width and tighten the gutter; the text column stays
   comfortably above 45 characters. */
@media(min-width:1101px){
  .story-v5 .story-grid:has(img[src*="founder-"]){
    grid-template-columns:1fr .92fr;
    gap:clamp(48px,5vw,78px);
  }
}


/* =========================================================
   FINAL UX POLISH — LIVE DINER HOURS + SESSION OUTLET
   Functional, restrained, and integrated into existing UI.
   ========================================================= */
.loc-row-name-wrap[role="button"]{cursor:pointer;outline-offset:5px}
.loc-row-name-wrap[role="button"]:focus-visible{outline:2px solid var(--gm-teal)}
.loc-live-status{
  display:flex;align-items:center;gap:6px;margin-top:7px;
  font-size:.52rem;line-height:1.15;font-weight:900;letter-spacing:.055em;text-transform:uppercase;
  color:var(--gm-grey);
}
.loc-live-status span{width:8px;height:8px;border-radius:50%;background:#8b8b88;box-shadow:0 0 0 2px rgba(58,58,58,.08)}
.loc-live-status.is-open span{background:var(--gm-teal);box-shadow:0 0 0 2px rgba(0,221,194,.14),0 0 10px rgba(0,221,194,.28)}
.loc-live-status.is-closed span{background:var(--gm-red)}
.loc-live-status.is-check span{background:#d1a600}
.loc-row.is-selected-diner{box-shadow:inset 5px 0 0 var(--gm-teal)}
.loc-row.is-selected-diner .loc-row-name-wrap::after{
  content:"YOUR DINER";display:inline-block;margin-top:8px;padding:4px 6px 3px;
  background:var(--gm-teal);color:var(--gm-grey);font-size:.43rem;font-weight:900;letter-spacing:.1em;
}
.roadside-hours{
  display:inline-flex;align-items:center;width:max-content;max-width:100%;
  margin-top:9px;padding:6px 8px 5px;border:2px solid currentColor;
  font-size:.56rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
}
.roadside-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:11px}
.roadside-actions a{font-size:.56rem;font-weight:900;letter-spacing:.06em;text-decoration:none;color:inherit}
.roadside-actions a:hover,.roadside-actions a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.counter-diner-context{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px 12px;align-items:center;
  margin:12px 0 17px;padding:9px 10px;border-top:2px solid rgba(58,58,58,.22);border-bottom:2px solid rgba(58,58,58,.22);
  font-size:.52rem;letter-spacing:.055em;text-transform:uppercase;
}
.counter-diner-context>span{font-weight:900;color:var(--gm-red)}
.counter-diner-context>strong{min-width:0;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.counter-diner-context>small{font-size:.5rem;font-weight:800;color:var(--gm-grey)}
.counter-diner-context>a{justify-self:end;color:var(--gm-grey);font-size:.48rem;font-weight:900;text-underline-offset:3px}
.counter-order-ticket.is-unavailable{display:none}
.counter-order-tickets:has(.counter-order-ticket.is-unavailable){grid-template-columns:minmax(0,1fr)}

@media(max-width:760px){
  .counter-diner-context{grid-template-columns:auto 1fr;gap:5px 9px}
  .counter-diner-context>small{grid-column:1 / -1}
  .counter-diner-context>a{grid-column:1 / -1;justify-self:start}
  .roadside-actions{gap:10px}
}


/* ===== RETRO AMBIENT ===== */
/* ============================================================
   GRUB MONKEYS — AMBIENT RETRO DETAIL SYSTEM
   Decorative only. Purpose: make negative space intentional
   without competing with the food, typography or interactions.
   ============================================================ */

:root{
  --retro-chrome-a:#767674;
  --retro-chrome-b:#f7f6f0;
  --retro-chrome-c:#a3a3a0;
}

/* Keep decorative layers non-interactive. */
.retro-spark-cluster,
.retro-halftone,
.retro-frame-glint,
.retro-upholstery,
.retro-chrome-rail,
.retro-stamp,
.route-63-marker{
  pointer-events:none;
}

/* ------------------------------------------------------------
   1. ATOMIC DINER SPARKS
   Small, sparse and only one star "winks".
   ------------------------------------------------------------ */
.retro-spark-cluster{
  position:absolute;
  z-index:2;
  width:88px;
  height:70px;
  opacity:.9;
}

.retro-spark-cluster i{
  position:absolute;
  display:block;
  width:18px;
  height:18px;
  background:var(--gm-red);
  clip-path:polygon(50% 0,58% 40%,100% 50%,58% 60%,50% 100%,42% 60%,0 50%,42% 40%);
  transform:rotate(8deg);
}

.retro-spark-cluster i:nth-child(1){left:6px;top:30px;width:12px;height:12px;background:var(--gm-teal)}
.retro-spark-cluster i:nth-child(2){left:34px;top:6px;width:22px;height:22px;animation:gmRetroSparkWink 7.2s ease-in-out infinite}
.retro-spark-cluster i:nth-child(3){right:2px;bottom:2px;width:9px;height:9px;background:var(--gm-grey)}

@keyframes gmRetroSparkWink{
  0%,82%,100%{transform:rotate(8deg) scale(1);opacity:.8}
  88%{transform:rotate(28deg) scale(1.34);opacity:1}
  93%{transform:rotate(8deg) scale(.94);opacity:.7}
}

.retro-spark-cluster--hof{right:clamp(20px,4vw,58px);top:18px}
.retro-spark-cluster--story{
  position:relative;
  right:auto;
  top:auto;
  display:inline-block;
  width:62px;
  height:42px;
  margin:12px 0 -10px 10px;
  vertical-align:middle;
}
.retro-spark-cluster--social{right:18%;top:8px}
.retro-spark-cluster--franchise{right:3%;top:7px}

/* ------------------------------------------------------------
   2. RUBBER STAMPS
   Low-density, deliberately imperfect paper marks.
   ------------------------------------------------------------ */
.retro-stamp{
  position:absolute;
  z-index:2;
  display:inline-block;
  padding:7px 9px 6px;
  border:2px solid currentColor;
  color:var(--gm-red);
  font-size:.48rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.52;
  transform:rotate(-2deg);
  mix-blend-mode:multiply;
}

.retro-stamp::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px dashed currentColor;
  opacity:.42;
}

.retro-stamp--hof{right:8%;bottom:4px}
.retro-stamp--story{
  position:relative;
  right:auto;
  top:auto;
  display:inline-block;
  margin-top:16px;
  color:var(--gm-red);
  transform:rotate(2deg);
  vertical-align:middle;
}
.retro-stamp--social{right:2%;top:18px;color:var(--gm-teal);mix-blend-mode:normal;opacity:.58}
.retro-stamp--franchise{right:6%;bottom:8px;color:var(--gm-teal);mix-blend-mode:normal;opacity:.56}

/* ------------------------------------------------------------
   3. HALFTONE CLUSTERS
   Tiny corner texture, never full-background noise.
   ------------------------------------------------------------ */
.retro-halftone{
  position:absolute;
  z-index:0;
  width:150px;
  height:110px;
  opacity:.075;
  background-image:radial-gradient(circle,var(--gm-grey) 1.4px,transparent 1.6px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000 10%,transparent 72%);
}

.retro-halftone--hof{right:2%;top:38px}
.retro-halftone--story{left:-34px;bottom:42px;width:180px;height:130px}
.retro-halftone--locations{right:18%;top:28px;width:165px;height:105px}
.retro-halftone--franchise{right:0;top:-25px;opacity:.08}

/* ------------------------------------------------------------
   4. PHOTO HARDWARE + VERY SLOW CHROME GLINT
   The photo itself stays unobstructed.
   ------------------------------------------------------------ */
.sig-photo-frame,
.atmo-photo.big,
.story-origin-poster.story-origin-photo,
.roadside-photo{
  isolation:isolate;
}

.retro-frame-glint{
  position:absolute;
  z-index:8;
  top:-24%;
  bottom:-24%;
  left:-36%;
  width:14%;
  opacity:0;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  animation:gmRetroFrameGlint 9.4s ease-in-out infinite;
}

@keyframes gmRetroFrameGlint{
  0%,72%{left:-36%;opacity:0}
  77%{opacity:.62}
  92%{left:122%;opacity:.42}
  100%{left:122%;opacity:0}
}

/* Add restrained "hardware" to photo panels that did not already have it. */
.atmo-photo.big::before,
.roadside-photo::before{
  content:"";
  position:absolute;
  z-index:9;
  left:9px;
  top:9px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid #565654;
  background:radial-gradient(circle at 35% 30%,#fff,#aaa 50%,#555);
  box-shadow:
    calc(100% - 0px) 0 0 transparent;
}

.atmo-photo.big::after,
.roadside-photo::after{
  content:"";
  position:absolute;
  z-index:9;
  right:9px;
  bottom:9px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid #565654;
  background:radial-gradient(circle at 35% 30%,#fff,#aaa 50%,#555);
}

/* ------------------------------------------------------------
   5. ROUTE 69 ROADSIDE MARKER
   One settling motion when the Locations section appears.
   ------------------------------------------------------------ */
.route-63-marker{
  position:absolute;
  z-index:4;
  right:calc(var(--pad-x) + 174px);
  top:8px;
  width:76px;
  min-height:92px;
  padding:9px 7px 11px;
  border:3px solid var(--gm-grey);
  border-radius:34px 34px 19px 19px / 19px 19px 28px 28px;
  background:var(--gm-white);
  color:var(--gm-grey);
  display:grid;
  justify-items:center;
  align-content:center;
  box-shadow:5px 6px 0 rgba(58,58,58,.14);
  transform:rotate(-3deg) translateY(-5px);
  transform-origin:50% 0;
}

.route-63-marker::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:27px;
  height:2px;
  background:var(--gm-red);
}

.route-63-marker span,
.route-63-marker small{
  font-size:.42rem;
  line-height:1;
  letter-spacing:.1em;
  font-weight:900;
}

.route-63-marker strong{
  margin:5px 0 3px;
  font-family:var(--f-display);
  font-size:2.15rem;
  line-height:.8;
  color:var(--gm-red);
  font-weight:400;
}

.route-63-marker small{
  text-align:center;
  color:var(--gm-grey);
}

.route-63-marker.is-settled{
  animation:gmRoute63Settle .74s cubic-bezier(.2,.9,.22,1.25) both;
}

@keyframes gmRoute63Settle{
  0%{transform:rotate(-9deg) translateY(-18px);opacity:0}
  56%{transform:rotate(2deg) translateY(3px);opacity:1}
  78%{transform:rotate(-1.5deg) translateY(-1px)}
  100%{transform:rotate(-3deg) translateY(-5px)}
}

/* ------------------------------------------------------------
   6. CHROME COUNTER RAILS
   Thin section punctuation instead of another content block.
   ------------------------------------------------------------ */
.retro-chrome-rail{
  position:relative;
  z-index:8;
  height:9px;
  width:100%;
  background:
    linear-gradient(
      180deg,
      #525250 0%,
      #f8f7f1 22%,
      #a5a5a2 48%,
      #f5f4ee 70%,
      #686866 100%
    );
  border-top:1px solid rgba(58,58,58,.55);
  border-bottom:1px solid rgba(58,58,58,.6);
  overflow:hidden;
}

.retro-chrome-rail::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--gm-red);
}

.retro-chrome-rail span{
  position:absolute;
  top:0;
  bottom:0;
  left:-18%;
  width:8%;
  opacity:.45;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:skewX(-18deg);
  animation:gmRailSweep 10.8s ease-in-out infinite;
}

@keyframes gmRailSweep{
  0%,74%{left:-18%;opacity:0}
  80%{opacity:.55}
  94%{left:112%;opacity:.35}
  100%{left:112%;opacity:0}
}

.retro-chrome-rail--short{
  width:min(86%,1180px);
  margin:0 auto;
}
.retro-chrome-rail--dark{border-color:#161616}
.retro-chrome-rail--subpage{height:7px}

/* ------------------------------------------------------------
   7. DINER BOOTH UPHOLSTERY STITCHING
   Extremely low contrast; texture only.
   ------------------------------------------------------------ */
.atmosphere,
.jukebox-section,
.proof-order-combo > .order-band{
  position:relative;
  isolation:isolate;
}

.retro-upholstery{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  opacity:.12;
}

.retro-upholstery::before,
.retro-upholstery::after{
  content:"";
  position:absolute;
  inset:0;
}

.retro-upholstery--dark::before{
  background:
    repeating-linear-gradient(0deg,transparent 0 86px,rgba(240,239,233,.16) 86px 87px),
    repeating-linear-gradient(90deg,transparent 0 146px,rgba(240,239,233,.07) 146px 147px);
}

.retro-upholstery--dark::after{
  background:
    radial-gradient(circle at 12% 44%,rgba(240,239,233,.16) 0 2px,transparent 2.5px),
    radial-gradient(circle at 62% 70%,rgba(240,239,233,.12) 0 2px,transparent 2.5px);
  background-size:148px 88px;
}

.retro-upholstery--red{
  opacity:.105;
}
.retro-upholstery--red::before{
  background:
    repeating-linear-gradient(0deg,transparent 0 78px,rgba(58,58,58,.23) 78px 79px),
    repeating-linear-gradient(90deg,transparent 0 132px,rgba(240,239,233,.13) 132px 133px);
}
.retro-upholstery--red::after{
  background:radial-gradient(circle,rgba(58,58,58,.22) 0 2px,transparent 2.5px);
  background-size:132px 79px;
}

/* Same exclusion as the heads above: .juke-ghost-code and the counter
   edge position themselves, so lifting them here would override that. */
.atmosphere > :not(.retro-upholstery,.juke-ghost-code,.order-counter-edge),
.jukebox-section > :not(.retro-upholstery,.juke-ghost-code,.order-counter-edge),
.proof-order-combo > .order-band > :not(.retro-upholstery,.juke-ghost-code,.order-counter-edge){
  position:relative;
  z-index:1;
}

/* ------------------------------------------------------------
   REAL "GRUB TIME" READOUT — INDIA STANDARD TIME
   Analog hands + actual digital time.
   ------------------------------------------------------------ */
.story-decor-row{
  padding-bottom:38px;
}

.clock-digital{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:-25px;
  transform:translateX(-50%);
  min-width:104px;
  padding:4px 7px 3px;
  border:2px solid var(--gm-grey);
  background:var(--gm-grey);
  color:var(--gm-white);
  font-family:var(--f-content);
  font-size:.46rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.025em;
  text-align:center;
  white-space:nowrap;
  box-shadow:4px 4px 0 rgba(58,58,58,.13);
}

.clock-zone{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:-38px;
  transform:translateX(-50%);
  font-size:.34rem;
  line-height:1;
  letter-spacing:.16em;
  font-weight:900;
  color:var(--gm-red);
}

/* ------------------------------------------------------------
   SUBPAGE DETAILS
   Carry the same restrained system into Menu + Franchise.
   ------------------------------------------------------------ */
body[data-page="menu"] .page-hero,
body[data-page="franchise"] .page-hero{
  position:relative;
  overflow:hidden;
}

body[data-page="menu"] .page-hero-copy,
body[data-page="franchise"] .page-hero-copy{
  position:relative;
  z-index:2;
}

body[data-page="menu"] .page-hero-copy::after,
body[data-page="franchise"] .page-hero-copy::after{
  position:absolute;
  right:2%;
  bottom:3%;
  padding:7px 9px 6px;
  border:2px solid currentColor;
  font-size:.46rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.11em;
  opacity:.42;
  transform:rotate(-2deg);
}

body[data-page="menu"] .page-hero-copy::after{
  content:"HOUSE MENU · GM / 69";
  color:var(--gm-red);
}

body[data-page="franchise"] .page-hero-copy::after{
  content:"OWN A DINER · GM / 69";
  color:var(--gm-teal);
}

body[data-page="menu"] .page-hero::before,
body[data-page="franchise"] .page-hero::before{
  content:"";
  position:absolute;
  z-index:1;
  left:44%;
  bottom:4%;
  width:150px;
  height:100px;
  pointer-events:none;
  opacity:.055;
  background-image:radial-gradient(circle,var(--gm-grey) 1.4px,transparent 1.6px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse,#000 8%,transparent 72%);
  mask-image:radial-gradient(ellipse,#000 8%,transparent 72%);
}

body[data-page="menu"] .page-hero > img,
body[data-page="franchise"] .page-hero > img{
  outline:3px solid var(--gm-grey);
  outline-offset:-3px;
  box-shadow:inset 0 0 0 5px var(--gm-white);
}

body[data-page="menu"] .menu-section,
body[data-page="franchise"] .franchise-page-section{
  position:relative;
}

/* ------------------------------------------------------------
   POSITIONING SAFETY / KEEP CONTENT CLEAR
   ------------------------------------------------------------ */
.signature .sig-head,
.story .story-text,
.locations .loc-head,
.social .social-head,
.franchise-teaser-home .fr-teaser{
  position:relative;
}

.signature .sig-head,
.story .story-text,
.locations .loc-head,
.social .social-head,
.franchise-teaser-home .fr-teaser{
  isolation:isolate;
}

/* Lifts the real heading content above the halftone. The exclusion list has to
   name every decorative layer that positions itself, not just the halftone:
   this is a child selector, so it outranks each decoration's own
   `position:absolute` and pulls it back into the heading flow. That unpinned
   the Route 63 marker and the motel keytag from the locations corner, and the
   stamps/sparks from the Hall of Fame, story and franchise heads. Excluded
   here so each decoration keeps its authored position and z-index. */
.signature .sig-head > :not(.retro-halftone,.retro-stamp,.retro-spark-cluster,.route-63-marker,.motel-keytag),
.story .story-text > :not(.retro-halftone,.retro-stamp,.retro-spark-cluster,.route-63-marker,.motel-keytag),
.locations .loc-head > :not(.retro-halftone,.retro-stamp,.retro-spark-cluster,.route-63-marker,.motel-keytag),
.franchise-teaser-home .fr-teaser > :not(.retro-halftone,.retro-stamp,.retro-spark-cluster,.route-63-marker,.motel-keytag){
  position:relative;
  z-index:1;
}

/* ------------------------------------------------------------
   RESPONSIVE: decorative system gets quieter on smaller screens.
   ------------------------------------------------------------ */
@media(max-width:1180px){
  .route-63-marker{
    position:relative;
    right:auto;
    top:auto;
    width:68px;
    min-height:84px;
    margin:12px 0 0 auto;
  }
}

@media(max-width:900px){
  .retro-spark-cluster--story,
  .retro-stamp--story,
  .retro-halftone--story,
  .retro-spark-cluster--social,
  .retro-stamp--social{
    display:none;
  }

  .route-63-marker{
    position:relative;
    right:auto;
    top:auto;
    width:66px;
    min-height:80px;
    margin-left:auto;
    margin-top:12px;
  }

  .retro-halftone--locations{
    right:6%;
    top:0;
  }
}

@media(max-width:700px){
  .retro-stamp--hof,
  .retro-halftone--hof,
  .retro-spark-cluster--franchise,
  .retro-halftone--franchise,
  body[data-page="menu"] .page-hero-copy::after,
  body[data-page="franchise"] .page-hero-copy::after{
    display:none;
  }

  .retro-spark-cluster--hof{
    right:6px;
    top:4px;
    transform:scale(.72);
  }

  .retro-chrome-rail{
    height:7px;
  }

  .retro-frame-glint{
    animation-duration:12s;
  }

  .clock-digital{
    font-size:.43rem;
    min-width:70px;
  }
}

@media(prefers-reduced-motion:reduce){
  .retro-spark-cluster i:nth-child(2),
  .retro-frame-glint,
  .retro-chrome-rail span,
  .route-63-marker.is-settled,
  .gm-route-settle{
    animation:none!important;
  }
}


/* Poster artwork contains real copy; keep it perfectly unobstructed. */
.story-origin-poster.story-origin-photo:has(img[src*="founder-"]) > .retro-frame-glint{
  display:none;
}

/* --- Grub Time legibility -------------------------------------------------
   The live IST readout is real information, but it rendered at 7.36px with
   the zone label at 5.44px — small enough that the feature can't be read at
   100% zoom. Nudged up while staying subordinate to the clock face.
   The zone label is also Monkey Red on Sorta White at 4.02:1, under the AA
   floor; --gm-red-ink is the deepened red already used elsewhere on the site
   for small red text on light surfaces (4.51:1). The faded rubber stamps are
   deliberately set at 0.52 opacity and are left exactly as designed. */
.clock-digital{ font-size:.68rem; letter-spacing:.06em; }
.clock-zone{ font-size:.5rem; color:var(--gm-red-ink,#DC0000); }


/* ===== MATERIAL / LIGHT ===== */
/* =============================================================
   GRUB MONKEYS — MATERIAL + LIGHT FINISHING LAYER
   A deliberately DIFFERENT visual language from the existing
   stamps, starbursts, chrome rails, halftones and diner props.

   Four ideas only:
   1. Formica surfaces
   2. Moving diner-window / venetian-blind light
   3. Oversized cropped editorial typography
   4. Projected neon reflections

   Decorative only; no content is covered or made unreadable.
   ============================================================= */

:root{
  --gm-formica-mint:#b9e4dc;
  --gm-formica-cream:#f0efe9;
  --gm-light-warm:rgba(255,235,186,.26);
}

/* -------------------------------------------------------------
   1. HALL OF FAME — FORMICA TABLETOP
   The section's blank cream floor becomes a restrained diner
   tabletop, with a chrome edge below the cards.
   ------------------------------------------------------------- */
.signature{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.signature::before{
  content:"";
  position:absolute;
  z-index:0;
  left:max(18px,calc(var(--pad-x) * .55));
  right:max(18px,calc(var(--pad-x) * .55));
  top:clamp(142px,18vw,205px);
  bottom:38px;
  border:1px solid rgba(58,58,58,.14);
  background-color:color-mix(in srgb,var(--gm-formica-mint) 27%,var(--gm-white));
  background-image:
    radial-gradient(circle at 12% 18%,rgba(58,58,58,.13) 0 .7px,transparent .9px),
    radial-gradient(circle at 61% 46%,rgba(235,0,0,.08) 0 .65px,transparent .9px),
    radial-gradient(circle at 83% 73%,rgba(58,58,58,.09) 0 .55px,transparent .8px);
  background-size:31px 27px,43px 38px,23px 29px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(58,58,58,.12);
}

.signature::after{
  content:"";
  position:absolute;
  z-index:0;
  left:max(18px,calc(var(--pad-x) * .55));
  right:max(18px,calc(var(--pad-x) * .55));
  bottom:28px;
  height:9px;
  border-top:1px solid rgba(58,58,58,.52);
  border-bottom:1px solid rgba(58,58,58,.5);
  background:
    linear-gradient(
      180deg,
      #70706e 0%,
      #faf9f4 22%,
      #aaa9a6 48%,
      #f8f7f1 70%,
      #686866 100%
    );
}

.signature > *{
  position:relative;
  z-index:1;
}

/* Keep existing square frames visually distinct from the tabletop. */
.signature .sig-photo-frame{
  box-shadow:
    7px 8px 0 rgba(58,58,58,.18),
    0 0 0 1px rgba(255,255,255,.72);
}


/* -------------------------------------------------------------
   2. BORN IN MANIPAL — WINDOW / VENETIAN LIGHT
   This is light and shadow, not another physical object.
   ------------------------------------------------------------- */
.story.story-v5{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.story.story-v5::before{
  content:"";
  position:absolute;
  z-index:0;
  width:min(56vw,760px);
  height:130%;
  right:-12%;
  top:-16%;
  transform:rotate(-11deg) translate3d(0,0,0);
  transform-origin:center;
  opacity:.33;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 27px,
      rgba(58,58,58,.095) 27px 33px,
      transparent 33px 57px
    );
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
  animation:gmWindowShadowDrift 18s ease-in-out infinite alternate;
  pointer-events:none;
}

.story.story-v5::after{
  content:"";
  position:absolute;
  z-index:0;
  width:min(34vw,460px);
  height:62%;
  right:5%;
  top:8%;
  border-radius:50%;
  opacity:.28;
  background:radial-gradient(ellipse,var(--gm-light-warm) 0%,rgba(255,235,186,.10) 48%,transparent 72%);
  filter:blur(8px);
  animation:gmWindowLightBreathe 15s ease-in-out infinite;
  pointer-events:none;
}

.story.story-v5 > *{
  position:relative;
  z-index:1;
}

@keyframes gmWindowShadowDrift{
  from{transform:rotate(-11deg) translate3d(-12px,-4px,0)}
  to{transform:rotate(-11deg) translate3d(18px,7px,0)}
}

@keyframes gmWindowLightBreathe{
  0%,100%{opacity:.19;transform:scale(.98)}
  50%{opacity:.34;transform:scale(1.035)}
}


/* -------------------------------------------------------------
   3. LOCATIONS — OVERSIZED CROPPED EDITORIAL TYPE
   Fills unused width without adding another badge or prop.
   ------------------------------------------------------------- */
.locations{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.locations::before{
  content:"KARNATAKA";
  position:absolute;
  z-index:0;
  left:-.045em;
  top:clamp(132px,16vw,210px);
  width:110%;
  color:var(--gm-grey);
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:clamp(7rem,18vw,18rem);
  line-height:.72;
  letter-spacing:-.045em;
  white-space:nowrap;
  opacity:.035;
  transform:translateX(-2.8%);
  pointer-events:none;
}

.locations::after{
  content:"DINERS · 69";
  position:absolute;
  z-index:0;
  right:-.08em;
  bottom:38px;
  color:var(--gm-red);
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:clamp(4.4rem,10vw,10rem);
  line-height:.75;
  letter-spacing:-.035em;
  white-space:nowrap;
  opacity:.035;
  transform:translateX(15%);
  pointer-events:none;
}

.locations > *{
  position:relative;
  z-index:1;
}


/* -------------------------------------------------------------
   4. JUKEBOX — PROJECTED NEON REFLECTIONS
   The light exists without introducing another neon sign.
   ------------------------------------------------------------- */
.jukebox-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.jukebox-section::before{
  content:"";
  position:absolute;
  z-index:0;
  width:min(62vw,820px);
  aspect-ratio:1.7/1;
  left:43%;
  top:44%;
  transform:translate(-50%,-50%) rotate(-9deg);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 36% 44%,rgba(235,0,0,.24) 0%,rgba(235,0,0,.085) 36%,transparent 68%),
    radial-gradient(ellipse at 72% 58%,rgba(0,221,194,.18) 0%,rgba(0,221,194,.06) 32%,transparent 68%);
  filter:blur(32px);
  opacity:.62;
  animation:gmProjectedNeon 13s ease-in-out infinite;
  pointer-events:none;
}

.jukebox-section::after{
  content:"";
  position:absolute;
  z-index:0;
  right:5%;
  top:19%;
  width:180px;
  height:330px;
  transform:rotate(8deg);
  border-radius:50%;
  background:linear-gradient(180deg,rgba(0,221,194,.09),transparent 58%);
  filter:blur(18px);
  opacity:.5;
  animation:gmProjectedNeonSide 17s ease-in-out infinite alternate;
  pointer-events:none;
}

/* Lifts the jukebox content above the section's texture layers. The
   universal child selector also caught .juke-ghost-code -- the oversized
   background wordmark, authored as position:absolute with z-index:-1 --
   and turned it into a 490px block in the grid flow, pushing the copy and
   the player down by that much and painting it in front of them rather
   than behind. Decorative layers are excluded so they keep their own
   placement. */
.jukebox-section > :not(.juke-ghost-code,.retro-upholstery){
  position:relative;
  z-index:1;
}

@keyframes gmProjectedNeon{
  0%,100%{opacity:.46;transform:translate(-50%,-50%) rotate(-9deg) scale(.98)}
  46%{opacity:.69;transform:translate(-50%,-50%) rotate(-8deg) scale(1.025)}
  68%{opacity:.55}
}

@keyframes gmProjectedNeonSide{
  from{opacity:.34;transform:rotate(8deg) translateY(-5px)}
  to{opacity:.56;transform:rotate(8deg) translateY(8px)}
}


/* -------------------------------------------------------------
   MENU PAGE — FORMICA, BUT ONLY BEHIND THE CATEGORY EXPERIENCE
   ------------------------------------------------------------- */
body[data-page="menu"] .menu-section{
  position:relative;
  isolation:isolate;
}

body[data-page="menu"] .menu-section::before{
  content:"";
  position:absolute;
  z-index:0;
  left:max(12px,calc(var(--pad-x) * .42));
  right:max(12px,calc(var(--pad-x) * .42));
  top:20px;
  bottom:26px;
  background-color:color-mix(in srgb,var(--gm-formica-mint) 18%,var(--gm-white));
  background-image:
    radial-gradient(circle,rgba(58,58,58,.09) 0 .65px,transparent .9px),
    radial-gradient(circle,rgba(235,0,0,.055) 0 .55px,transparent .8px);
  background-position:0 0,13px 17px;
  background-size:29px 31px,37px 41px;
  border:1px solid rgba(58,58,58,.10);
}

body[data-page="menu"] .menu-section > *{
  position:relative;
  z-index:1;
}


/* -------------------------------------------------------------
   FRANCHISE PAGE — WINDOW LIGHT IN THE INFORMATION AREA
   ------------------------------------------------------------- */
body[data-page="franchise"] .franchise-page-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

body[data-page="franchise"] .franchise-page-section::before{
  content:"";
  position:absolute;
  z-index:0;
  right:-10%;
  top:-8%;
  width:min(56vw,700px);
  height:120%;
  transform:rotate(-9deg);
  opacity:.22;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 30px,
      rgba(58,58,58,.085) 30px 35px,
      transparent 35px 62px
    );
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 72%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 72%,transparent);
  animation:gmFranchiseWindowDrift 21s ease-in-out infinite alternate;
  pointer-events:none;
}

body[data-page="franchise"] .franchise-page-section > *{
  position:relative;
  z-index:1;
}

@keyframes gmFranchiseWindowDrift{
  from{transform:rotate(-9deg) translateX(-8px)}
  to{transform:rotate(-9deg) translateX(20px)}
}


/* -------------------------------------------------------------
   MOBILE / TABLET
   Keep blank-space treatment, but make it quieter.
   ------------------------------------------------------------- */
@media(max-width:900px){
  .signature::before{
    top:128px;
    left:12px;
    right:12px;
  }

  .locations::before{
    top:185px;
    font-size:clamp(6rem,24vw,11rem);
    opacity:.025;
  }

  .locations::after{
    display:none;
  }

  .jukebox-section::before{
    width:92vw;
    left:50%;
    top:52%;
    opacity:.48;
  }

  .story.story-v5::before{
    width:88vw;
    right:-42%;
    opacity:.22;
  }
}

@media(max-width:620px){
  .signature::before{
    top:114px;
    bottom:26px;
    background-color:color-mix(in srgb,var(--gm-formica-mint) 15%,var(--gm-white));
  }

  .signature::after{
    bottom:18px;
    height:7px;
  }

  .locations::before{
    content:"DINER";
    left:-.08em;
    top:225px;
    font-size:31vw;
    opacity:.026;
  }

  .story.story-v5::before{
    width:110vw;
    right:-68%;
    opacity:.16;
    animation-duration:24s;
  }

  .story.story-v5::after{
    display:none;
  }

  .jukebox-section::after{
    display:none;
  }

  body[data-page="menu"] .menu-section::before{
    left:6px;
    right:6px;
  }

  body[data-page="franchise"] .franchise-page-section::before{
    right:-62%;
    width:125vw;
    opacity:.13;
    animation-duration:26s;
  }
}


/* -------------------------------------------------------------
   REDUCED MOTION
   Materials stay visible; only ambient movement stops.
   ------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .story.story-v5::before,
  .story.story-v5::after,
  .jukebox-section::before,
  .jukebox-section::after,
  body[data-page="franchise"] .franchise-page-section::before{
    animation:none!important;
  }
}


/* =============================================================
   FRANCHISE — OPTION B / VIBE CHECK MEDIA SECTION
   Added below the existing franchise hero. The hero itself is untouched.
   ============================================================= */
body[data-page="franchise"] .gm-fr-vibe{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(72px,8vw,112px) var(--pad-x) clamp(82px,9vw,124px);
  background:
    radial-gradient(circle at 14% 22%,rgba(235,0,0,.045) 0 1px,transparent 1.4px) 0 0/19px 19px,
    var(--gm-white);
  color:var(--gm-grey);
}

body[data-page="franchise"] .gm-fr-vibe::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(58,58,58,.08) 8.1% 8.22%,transparent 8.32% 100%),
    linear-gradient(180deg,transparent 0 84%,rgba(235,0,0,.08) 84.1% 84.28%,transparent 84.38% 100%);
}

body[data-page="franchise"] .gm-fr-vibe__head{
  width:min(1120px,100%);
  margin:0 auto clamp(28px,4vw,46px);
  text-align:center;
}

body[data-page="franchise"] .gm-fr-vibe__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:7px 16px 6px;
  margin-bottom:18px;
  border:2px solid var(--gm-grey);
  background:var(--gm-red);
  color:var(--gm-white);
  box-shadow:4px 4px 0 rgba(58,58,58,.13);
  font-size:.55rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body[data-page="franchise"] .gm-fr-vibe__head h2{
  max-width:12ch;
  margin:0 auto;
  font-size:clamp(2.8rem,6.8vw,6.4rem);
  line-height:.84;
  color:var(--gm-grey);
}

body[data-page="franchise"] .gm-fr-vibe__head h2 em{
  color:var(--gm-red);
}

body[data-page="franchise"] .gm-fr-vibe__head p{
  max-width:62ch;
  margin:22px auto 0;
  color:rgba(58,58,58,.72);
  font-size:.9rem;
  line-height:1.7;
}

body[data-page="franchise"] .gm-fr-vibe__frame{
  position:relative;
  width:min(1080px,100%);
  margin:0 auto;
  padding:12px;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  box-sizing:border-box;
  border:2px solid #343432;
  border-radius:32px;
  background:
    linear-gradient(180deg,#f7f6f0 0%,#999995 15%,#f3f2ec 29%,#5f5f5c 44%,#ecebe5 62%,#898985 78%,#f5f4ee 100%);
  box-shadow:
    0 0 0 4px #d7d6cf,
    0 0 0 7px #4a4a47,
    0 18px 34px rgba(58,58,58,.2);
}

body[data-page="franchise"] .gm-fr-vibe__frame::before{
  content:"";
  position:absolute;
  z-index:5;
  top:-18%;
  bottom:-18%;
  left:-28%;
  width:22%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.44),transparent);
  transform:skewX(-15deg);
  opacity:.4;
  animation:gmFrChromeSweep 7.2s ease-in-out infinite;
}

@keyframes gmFrChromeSweep{
  0%,58%{left:-28%;opacity:0}
  64%{opacity:.32}
  79%{left:116%;opacity:.22}
  84%,100%{left:116%;opacity:0}
}

body[data-page="franchise"] .gm-fr-vibe__screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  box-sizing:border-box;
  border:3px solid #151515;
  border-radius:22px 22px 14px 14px;
  background:#161616;
  box-shadow:
    inset 0 0 0 2px rgba(235,0,0,.64),
    inset 0 0 0 6px rgba(240,239,233,.06);
}

/* Wide Option-B stage while preserving the full portrait reel. */
body[data-page="franchise"] .gm-fr-vibe__screen::before{
  content:"";
  position:absolute;
  inset:-30px;
  z-index:-2;
  background:url("media/franchise-vibe-check-poster.jpg") center/cover no-repeat;
  filter:blur(20px) brightness(.42) saturate(1.12);
  transform:scale(1.08);
  opacity:.96;
}

body[data-page="franchise"] .gm-fr-vibe__screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.52),transparent 23%,transparent 77%,rgba(10,10,10,.52)),
    linear-gradient(180deg,rgba(235,0,0,.08),transparent 28%,transparent 72%,rgba(0,0,0,.24));
}

body[data-page="franchise"] .gm-fr-vibe__video{
  position:absolute;
  z-index:1;
  left:50%;
  top:0;
  width:auto;
  height:100%;
  max-width:100%;
  transform:translateX(-50%);
  object-fit:contain;
  background:#111;
  box-shadow:
    -10px 0 24px rgba(0,0,0,.22),
    10px 0 24px rgba(0,0,0,.22);
}

body[data-page="franchise"] .gm-fr-vibe__rec{
  position:absolute;
  z-index:3;
  top:18px;
  right:20px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px 5px;
  border:1px solid rgba(240,239,233,.34);
  background:rgba(20,20,20,.58);
  color:#fff;
  font-size:.52rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}

body[data-page="franchise"] .gm-fr-vibe__rec span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gm-red);
  box-shadow:0 0 7px rgba(235,0,0,.6);
}

body[data-page="franchise"] .gm-fr-vibe__screen.is-paused .gm-fr-vibe__rec{
  opacity:.46;
}

body[data-page="franchise"] .gm-fr-vibe__screen-toggle{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  padding:0;
  transform:translate(-50%,-50%);
  border:3px solid var(--gm-white);
  border-radius:50%;
  background:rgba(20,20,20,.62);
  color:var(--gm-white);
  box-shadow:0 0 0 4px rgba(235,0,0,.76),0 9px 22px rgba(0,0,0,.22);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease,background .2s ease;
}

body[data-page="franchise"] .gm-fr-vibe__screen:hover .gm-fr-vibe__screen-toggle,
body[data-page="franchise"] .gm-fr-vibe__screen-toggle:focus-visible,
body[data-page="franchise"] .gm-fr-vibe__screen.is-paused .gm-fr-vibe__screen-toggle{
  opacity:1;
}

body[data-page="franchise"] .gm-fr-vibe__screen-toggle span{
  font-family:var(--f-display);
  font-size:1.45rem;
  line-height:1;
}

body[data-page="franchise"] .gm-fr-vibe__screen-toggle:focus-visible{
  outline:3px solid var(--gm-teal);
  outline-offset:5px;
}

body[data-page="franchise"] .gm-fr-vibe__controls{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:62px;
  padding:12px 18px 10px;
  border:2px solid #4f4f4d;
  border-top:0;
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(180deg,#30302f 0%,#161616 100%);
  color:var(--gm-white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="franchise"] .gm-fr-vibe__controls::before,
body[data-page="franchise"] .gm-fr-vibe__controls::after{
  content:"";
  position:absolute;
  bottom:7px;
  width:28%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#656562,#f1f0ea,#71716e);
  opacity:.65;
}
body[data-page="franchise"] .gm-fr-vibe__controls::before{left:18px}
body[data-page="franchise"] .gm-fr-vibe__controls::after{right:18px}

body[data-page="franchise"] .gm-fr-vibe__controls-label{
  color:var(--gm-teal);
  font-size:.56rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
  white-space:nowrap;
}

body[data-page="franchise"] .gm-fr-vibe__controls-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

body[data-page="franchise"] .gm-fr-vibe__controls button{
  min-height:34px;
  padding:8px 12px 7px;
  border:1px solid rgba(240,239,233,.42);
  background:#202020;
  color:var(--gm-white);
  font:800 .52rem/1 var(--f-body);
  letter-spacing:.1em;
  cursor:pointer;
}

body[data-page="franchise"] .gm-fr-vibe__controls button:hover{
  border-color:var(--gm-teal);
}

body[data-page="franchise"] .gm-fr-vibe__controls button:focus-visible{
  outline:2px solid var(--gm-teal);
  outline-offset:2px;
}

@media(max-width:760px){
  body[data-page="franchise"] .gm-fr-vibe{
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
  }

  body[data-page="franchise"] .gm-fr-vibe__head{
    text-align:left;
  }

  body[data-page="franchise"] .gm-fr-vibe__head h2,
  body[data-page="franchise"] .gm-fr-vibe__head p{
    margin-left:0;
    margin-right:0;
  }

  body[data-page="franchise"] .gm-fr-vibe__frame{
    width:min(460px,100%);
    padding:9px;
    border-radius:26px;
  }

  body[data-page="franchise"] .gm-fr-vibe__screen{
    aspect-ratio:9/16;
    border-radius:18px 18px 10px 10px;
  }

  body[data-page="franchise"] .gm-fr-vibe__screen::before,
  body[data-page="franchise"] .gm-fr-vibe__screen::after{
    display:none;
  }

  body[data-page="franchise"] .gm-fr-vibe__video{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
  }

  body[data-page="franchise"] .gm-fr-vibe__screen-toggle{
    width:62px;
    height:62px;
  }

  body[data-page="franchise"] .gm-fr-vibe__controls{
    align-items:flex-start;
    flex-direction:column;
    padding-bottom:18px;
  }

  body[data-page="franchise"] .gm-fr-vibe__controls-buttons{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media(max-width:420px){
  body[data-page="franchise"] .gm-fr-vibe__controls button{
    flex:1 1 auto;
    min-width:92px;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="franchise"] .gm-fr-vibe__frame::before{
    animation:none!important;
    opacity:0!important;
  }

  body[data-page="franchise"] .gm-fr-vibe__screen-toggle{
    transition:none!important;
  }
}


/* =============================================================
   FRANCHISE HERO — PORTRAIT VIBE CHECK DEVICE
   Replaces only the former hero image slot.
   Existing page-hero grid, left copy, parent dimensions and nav stay intact.
   ============================================================= */

body[data-page="franchise"] .gm-fr-hero-media{
  position:relative;
  min-width:0;
  min-height:72svh;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  box-sizing:border-box;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
  padding:clamp(28px,4vw,48px);
  background:
    radial-gradient(circle at 72% 24%,rgba(235,0,0,.14),transparent 28%),
    radial-gradient(circle at 28% 72%,rgba(0,221,194,.07),transparent 26%),
    #262626;
  border-left:1px solid rgba(240,239,233,.12);
}

/* Subtle diner-wall grain; stays fully inside the existing hero media cell. */
body[data-page="franchise"] .gm-fr-hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(circle,rgba(240,239,233,.16) 0 1px,transparent 1.2px);
  background-size:17px 17px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}

body[data-page="franchise"] .gm-fr-phone{
  position:relative;
  width:min(31vw,360px);
  aspect-ratio:9/16;
  min-width:250px;
  max-height:64svh;
  padding:9px;
  overflow:hidden;
  isolation:isolate;
  box-sizing:border-box;
  border:2px solid #262625;
  border-radius:44px;
  background:
    linear-gradient(135deg,#f5f4ef 0%,#7f7f7c 11%,#ecebe5 24%,#555552 37%,#f7f6f1 52%,#898985 66%,#ededE7 82%,#5b5b58 100%);
  box-shadow:
    0 0 0 3px #b8b8b4,
    0 0 0 5px #242423,
    0 20px 38px rgba(0,0,0,.38);
}

/* Slow, restrained chrome reflection contained by the phone shell. */
body[data-page="franchise"] .gm-fr-phone::after{
  content:"";
  position:absolute;
  z-index:8;
  top:-12%;
  bottom:-12%;
  left:-44%;
  width:26%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-15deg);
  animation:gmFrPhoneChromeSweep 7.8s ease-in-out infinite;
}

@keyframes gmFrPhoneChromeSweep{
  0%,62%{left:-44%;opacity:0}
  68%{opacity:.28}
  82%{left:118%;opacity:.16}
  87%,100%{left:118%;opacity:0}
}

body[data-page="franchise"] .gm-fr-phone__hardware{
  position:absolute;
  z-index:7;
  top:14px;
  left:50%;
  width:88px;
  height:18px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.12);
  pointer-events:none;
}

body[data-page="franchise"] .gm-fr-phone__speaker{
  position:absolute;
  left:50%;
  top:7px;
  width:34px;
  height:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#555;
}

body[data-page="franchise"] .gm-fr-phone__camera{
  position:absolute;
  right:12px;
  top:5px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#202020;
  box-shadow:inset 0 0 0 2px #080808,0 0 3px rgba(0,221,194,.18);
}

body[data-page="franchise"] .gm-fr-phone__screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  border:2px solid #111;
  border-radius:36px;
  background:#111;
  box-shadow:
    inset 0 0 0 2px rgba(235,0,0,.3),
    inset 0 0 0 5px rgba(240,239,233,.035);
}

body[data-page="franchise"] .gm-fr-phone__video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#111;
}

body[data-page="franchise"] .gm-fr-phone__topline{
  position:absolute;
  z-index:3;
  top:34px;
  left:18px;
  right:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  font-size:.48rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  pointer-events:none;
}

body[data-page="franchise"] .gm-fr-phone__rec{
  display:flex;
  align-items:center;
  gap:6px;
}

body[data-page="franchise"] .gm-fr-phone__rec i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gm-red);
  box-shadow:0 0 7px rgba(235,0,0,.62);
}

body[data-page="franchise"] .gm-fr-phone__screen.is-paused .gm-fr-phone__rec{
  opacity:.46;
}

body[data-page="franchise"] .gm-fr-phone__screen-toggle{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  padding:0;
  transform:translate(-50%,-50%);
  border:2px solid rgba(240,239,233,.92);
  border-radius:50%;
  background:rgba(17,17,17,.58);
  color:#fff;
  box-shadow:
    0 0 0 3px rgba(235,0,0,.66),
    0 8px 20px rgba(0,0,0,.28);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease,background .2s ease;
}

body[data-page="franchise"] .gm-fr-phone__screen:hover .gm-fr-phone__screen-toggle,
body[data-page="franchise"] .gm-fr-phone__screen-toggle:focus-visible,
body[data-page="franchise"] .gm-fr-phone__screen.is-paused .gm-fr-phone__screen-toggle{
  opacity:1;
}

body[data-page="franchise"] .gm-fr-phone__screen-toggle span{
  font-family:var(--f-display);
  font-size:1.35rem;
  line-height:1;
}

body[data-page="franchise"] .gm-fr-phone__screen-toggle:focus-visible{
  outline:3px solid var(--gm-teal);
  outline-offset:4px;
}

body[data-page="franchise"] .gm-fr-phone__screen-label{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:24px;
  max-width:calc(100% - 44px);
  transform:translateX(-50%);
  padding:7px 10px 6px;
  border:1px solid rgba(240,239,233,.34);
  background:rgba(17,17,17,.62);
  color:var(--gm-teal);
  font-size:.48rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
  white-space:nowrap;
  pointer-events:none;
}

body[data-page="franchise"] .gm-fr-phone__homebar{
  position:absolute;
  z-index:9;
  left:50%;
  bottom:17px;
  width:82px;
  height:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(240,239,233,.74);
  pointer-events:none;
}

body[data-page="franchise"] .gm-fr-hero-controls{
  width:min(31vw,360px);
  min-width:250px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

body[data-page="franchise"] .gm-fr-hero-controls button{
  min-width:0;
  min-height:36px;
  padding:8px 6px 7px;
  border:1px solid rgba(240,239,233,.32);
  background:#1d1d1c;
  color:var(--gm-white);
  font:800 .47rem/1 var(--f-body);
  letter-spacing:.08em;
  cursor:pointer;
}

body[data-page="franchise"] .gm-fr-hero-controls button:hover{
  border-color:var(--gm-teal);
  background:#292928;
}

body[data-page="franchise"] .gm-fr-hero-controls button:focus-visible{
  outline:2px solid var(--gm-teal);
  outline-offset:2px;
}

/* Existing mobile page-hero breakpoint is preserved; only the media slot adapts. */
@media(max-width:860px){
  body[data-page="franchise"] .gm-fr-hero-media{
    min-height:auto;
    padding:34px var(--pad-x) 42px;
    border-left:0;
    border-top:1px solid rgba(240,239,233,.12);
  }

  body[data-page="franchise"] .gm-fr-phone{
    width:min(78vw,360px);
    min-width:0;
    max-height:none;
  }

  body[data-page="franchise"] .gm-fr-hero-controls{
    width:min(78vw,360px);
    min-width:0;
  }
}

@media(max-width:430px){
  body[data-page="franchise"] .gm-fr-phone{
    width:min(84vw,340px);
    border-radius:38px;
  }

  body[data-page="franchise"] .gm-fr-phone__screen{
    border-radius:31px;
  }

  body[data-page="franchise"] .gm-fr-hero-controls{
    width:min(84vw,340px);
    gap:5px;
  }

  body[data-page="franchise"] .gm-fr-hero-controls button{
    font-size:.43rem;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="franchise"] .gm-fr-phone::after{
    animation:none!important;
    opacity:0!important;
  }

  body[data-page="franchise"] .gm-fr-phone__screen-toggle{
    transition:none!important;
  }
}