/* ============================================================
   KOOKOOS — Master site stylesheet (loud & punchy)
   Styles every section/component used across all pages.
   Depends on: tokens.css (vars), base.css (reset/primitives/reveal)
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--orange); --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 900; font-size: 1rem; letter-spacing: .01em;
  padding: .85em 1.9em; border: 3px solid var(--char); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-hard);
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard-lg); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 0 var(--char); }
.btn-orange { --btn-bg: var(--orange); --btn-fg: #fff; }
.btn-orange:hover { --btn-bg: var(--deep); }
.btn-char  { --btn-bg: var(--char);  --btn-fg: var(--cream); }
.btn-yolk  { --btn-bg: var(--yolk);  --btn-fg: var(--char); }
.btn-cream { --btn-bg: var(--cream); --btn-fg: var(--char); }
.btn-cream:hover { --btn-bg: var(--yolk); }
.btn-ghost { --btn-bg: transparent; --btn-fg: #fff; border-color:#fff; box-shadow: 5px 5px 0 0 rgba(255,255,255,.9); }
.btn-ghost:hover { --btn-bg:#fff; --btn-fg: var(--char); box-shadow: 8px 9px 0 0 rgba(255,255,255,.9); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--char); }
.btn-outline:hover { --btn-bg: var(--char); --btn-fg: var(--cream); }

/* ---------- Header / Nav ---------- */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--orange); border-bottom: 3px solid var(--char); }
.nav { width: var(--wrap-wide); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-4); padding-block: .8rem; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 44px; width: auto; }
.nav-links { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav-link { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem;
  color: #fff; padding: .5em .85em; border-radius: var(--r-pill); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-link:hover { background: rgba(255,255,255,.18); }
.nav-link[aria-current="page"] { background: var(--char); color: var(--cream); }
.nav-cta { margin-left: .5rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem;
  color: var(--char); background: var(--yolk); border: 3px solid var(--char); border-radius: var(--r-pill); padding: .5em 1.35em;
  box-shadow: 4px 4px 0 0 var(--char); transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.nav-cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 0 var(--char); }
.nav-cta:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 0 var(--char); }
.nav-burger { display: none; width: 48px; height: 48px; border: 3px solid var(--char); border-radius: var(--r-sm); background: var(--cream); position: relative; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { content:""; position:absolute; left:50%; top:50%; width:22px; height:3px; background: var(--char); border-radius:2px; transform: translate(-50%,-50%); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-burger span::before { transform: translate(-50%,-9px); }
.nav-burger span::after  { transform: translate(-50%, 9px); }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translate(-50%,0) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { transform: translate(-50%,0) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(340px,84vw); background: var(--cream); border-left: 3px solid var(--char);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); z-index: 1100; padding: 5.5rem 2rem 2rem; display: flex; flex-direction: column; gap: .4rem; }
.mobile-menu.open { transform: none; }
.mobile-menu a { font-family: var(--font-head); text-transform: uppercase; font-size: 1.45rem; color: var(--char); padding: .5rem 0; border-bottom: var(--bd-hair); }
.mobile-menu a[aria-current="page"] { color: var(--orange); }
.menu-backdrop { position: fixed; inset: 0; background: rgba(27,27,27,.5); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); z-index: 1050; }
.menu-backdrop.open { opacity: 1; visibility: visible; }
@media (max-width: 920px) { .nav-links, .nav > .nav-cta { display: none; } .nav-burger { display: block; margin-left: auto; } }

/* ---------- Checker + Marquee ---------- */
.checker { height: 16px; background: repeating-linear-gradient(45deg, var(--char) 0 12px, transparent 0 24px), var(--orange); background-size: 34px 34px; border-block: 3px solid var(--char); }
.marquee-band { background: var(--char); color: var(--yolk); overflow: hidden; padding-block: .7rem; }
.marquee { display: flex; }
.marquee-track { display: inline-flex; align-items: center; gap: 2.4rem; white-space: nowrap; will-change: transform; animation: marquee 28s linear infinite; font-family: var(--font-head); text-transform: uppercase; font-size: 1.25rem; letter-spacing: .05em; padding-left: 2.4rem; }
.marquee-track span { display: inline-flex; align-items: center; gap: 2.4rem; }
.marquee-track i { color: var(--orange); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--char); color: var(--on-dark-soft); padding-block: var(--sp-7) var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand img { height: 46px; margin-bottom: 1rem; }
.footer-brand p { max-width: 26em; color: var(--on-dark-soft); }
.footer-col h4 { color: var(--yolk); font-size: 1.15rem; margin-bottom: .9rem; letter-spacing: .03em; }
.footer-col a { display: block; color: var(--on-dark-soft); padding: .3rem 0; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--yolk); }
.footer-bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255,246,234,.16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: var(--fs-sm); color: rgba(255,246,234,.6); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1/-1; } }

/* ---------- Hero (home / franchise) ---------- */
.hero { position: relative; color:#fff; overflow: hidden; border-bottom: 3px solid var(--char); }
.hero-bg { position: absolute; inset: 0; background: url("/images/outlets/interior-neon.jpg") center/cover no-repeat; transform: scale(1.05); }
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, rgba(27,27,27,.86) 0%, rgba(27,27,27,.55) 46%, rgba(27,27,27,.12) 100%); }
@media (prefers-reduced-motion: no-preference) { .hero-bg { animation: kenburns 22s ease-in-out infinite alternate; } }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.16) translate(-2%,-2%); } }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--sp-6); padding-block: clamp(3.5rem,7vw,6rem); }
.hero-copy { min-width: 0; }
.hero-chip { display: inline-flex; align-items: center; gap: .55em; background: rgba(27,27,27,.74); border: 2px solid var(--yolk); color: var(--yolk);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; padding: .5em 1.2em; border-radius: var(--r-pill); margin-bottom: var(--sp-4); }
.hero-chip::before { content:"\2605"; }
.hero h1 { font-size: var(--fs-display); line-height: .88; color:#fff; text-shadow: 0 6px 30px rgba(0,0,0,.4); }
.accent { color: var(--orange); } .accent2 { color: var(--yolk); }
.hero-sub { font-size: var(--fs-lead); color: rgba(255,246,234,.92); font-weight: 600; max-width: 32em; margin-block: var(--sp-4) var(--sp-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: var(--sp-5); }
.hero-badges { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .5em; background: rgba(27,27,27,.64); border: 1.5px solid rgba(255,246,234,.5); color: var(--cream); font-weight: 800; font-size: .9rem; padding: .45em 1em; border-radius: var(--r-pill); }
.hero-badge svg { width: 18px; height: 18px; }
.hero-card { position: relative; border: 3px solid var(--char); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-hard-lg); transform: rotate(1.5deg); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.hero-card-tag { position: absolute; left: 1rem; bottom: 1rem; background: var(--yolk); color: var(--char); font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; padding: .35em .9em; border: 2.5px solid var(--char); border-radius: var(--r-pill); }
@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-card { transform: none; max-width: 380px; } }

/* hero entrance (replaces old .h-anim) */
.h-anim { opacity: 0; transform: translateY(20px); animation: heroIn .7s var(--ease) forwards; }
.h-anim.d1{animation-delay:.05s}.h-anim.d2{animation-delay:.15s}.h-anim.d3{animation-delay:.25s}.h-anim.d4{animation-delay:.35s}.h-anim.d5{animation-delay:.45s}.h-anim.d6{animation-delay:.2s}
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .h-anim { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero, .faq-hero { position: relative; overflow: hidden; color:#fff; background: var(--char); border-bottom: 3px solid var(--char); padding-block: clamp(3.5rem,7vw,5.5rem); text-align: center; }
.page-hero-bg { position: absolute; inset: 0; background: url("/images/outlets/interior-neon.jpg") center/cover no-repeat; opacity: .32; }
.page-hero .wrap, .faq-hero .wrap { position: relative; z-index: 2; }
.page-hero h1, .faq-hero h1 { font-size: var(--fs-h1); color:#fff; margin-block: var(--sp-3); }
.page-hero p, .faq-hero p { max-width: 40em; margin-inline: auto; color: rgba(255,246,234,.82); font-weight: 600; font-size: var(--fs-lead); }
.faq-hero-chip, .page-hero .hero-chip { position: relative; }

/* ---------- Section helpers ---------- */
.band-white { background: var(--white); }
.band-cream { background: var(--cream); }
.lede, .lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 40em; font-weight: 600; margin-top: var(--sp-3); }
.center-head { text-align: center; margin-bottom: var(--sp-5); }
.center-head .lede { margin-inline: auto; }
.center-head .eyebrow { justify-content: center; }
.sub-title { text-align: center; font-size: var(--fs-h3); color: var(--char); margin: var(--sp-4) 0 var(--sp-4); }
.sub-title em, .sec-title em, h2 em { font-style: normal; color: var(--orange); }

/* ---------- Story / Diff ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.story-grid p { margin-top: 1rem; color: var(--ink-soft); }
.story-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--sp-4); }
.story-photo { position: relative; }
.story-photo .frame { border: 3px solid var(--char); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-hard); }
.story-photo .frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.story-photo.flip .frame { transform: rotate(-1.5deg); }
.story-stamp { position: absolute; z-index: 3; top: -18px; right: -10px; background: var(--brick); color: var(--cream); font-family: var(--font-head); text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; padding: .5em 1em; border: 2.5px solid var(--char); border-radius: var(--r-pill); box-shadow: var(--shadow-hard); transform: rotate(4deg); }
.story-stamp.yolk { background: var(--yolk); color: var(--char); }
@media (max-width: 820px) { .story-grid { grid-template-columns: 1fr; } .story-photo.flip { order: -1; } }

/* ---------- Menu ---------- */
.menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.menu-head .sec-title { margin-bottom: 0; }
.menu-link-top { font-family: var(--font-head); text-transform: uppercase; color: var(--deep); font-size: 1.1rem; border-bottom: 3px solid var(--orange); padding-bottom: 2px; }
.menu-link-top:hover { color: var(--char); border-color: var(--char); }
.menu-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.menu-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); overflow: hidden; transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.menu-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hard-lg); }
.menu-tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-body); font-weight: 900; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color:#fff; padding: .4em .9em; border: 2px solid var(--char); border-radius: var(--r-pill); }
.tag-best{background:var(--brick)}.tag-fave{background:var(--orange)}.tag-new{background:var(--char)}.tag-loaded{background:var(--deep)}.tag-spicy{background:#C1272D}.tag-value{background:#2E7D32}.tag-fresh{background:var(--yolk);color:var(--char)}
.menu-card-img { background: radial-gradient(120% 120% at 50% 0%, var(--cream) 0%, #ffe9c9 100%); padding: 1.4rem 1rem .4rem; display: grid; place-items: center; }
.menu-card-img img { width: 100%; height: 170px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(27,27,27,.24)); transition: transform var(--dur-slow) var(--spring); }
.menu-card:hover .menu-card-img img { transform: scale(1.08) rotate(-3deg); }
.menu-card-body { padding: 1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; border-top: 3px solid var(--char); }
.menu-card-body h3 { font-size: var(--fs-h3); color: var(--char); }
.menu-card-body p { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; flex: 1; }
.menu-price { align-self: flex-start; margin-top: .4rem; background: var(--yolk); color: var(--char); font-family: var(--font-head); font-size: 1.1rem; padding: .2em .7em; border: 2.5px solid var(--char); border-radius: var(--r-sm); }
@media (max-width: 1040px) { .menu-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .menu-grid { grid-template-columns: 1fr; } }
/* combo chips */
.combo-chips { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: var(--sp-4); }
.combo-chip { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-pill); padding: .6em 1.3em; font-weight: 800; box-shadow: var(--shadow-hard); }
.combo-chip em { font-style: normal; color: var(--brick); font-family: var(--font-head); }

/* ---------- Jump nav (menu categories) ---------- */
.jump-nav { position: sticky; top: 70px; z-index: 900; background: var(--cream); border-block: 3px solid var(--char); }
.jump-scroll { width: var(--wrap-wide); margin-inline: auto; display: flex; gap: .5rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none; }
.jump-scroll::-webkit-scrollbar { display: none; }
.jump-scroll a { flex: none; font-family: var(--font-head); text-transform: uppercase; font-size: .95rem; color: var(--char); background: var(--white); border: 2.5px solid var(--char); border-radius: var(--r-pill); padding: .45em 1em; transition: background var(--dur-fast), color var(--dur-fast); }
.jump-scroll a:hover, .jump-scroll a.active { background: var(--orange); color:#fff; }

/* ---------- Photo strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4,1fr); border-block: 3px solid var(--char); }
.strip figure { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.strip figure:not(:last-child) { border-right: 3px solid var(--char); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.strip figure:hover img { transform: scale(1.09); }
@media (max-width: 720px) { .strip { grid-template-columns: repeat(2,1fr); } .strip figure { border-right: 0 !important; } }

/* ---------- Locations ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.loc-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.loc-card::before { content:""; display: block; width: 54px; height: 8px; background: var(--orange); border: 2.5px solid var(--char); border-radius: var(--r-pill); margin-bottom: .5rem; }
.loc-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hard-lg); }
.loc-card h3 { font-size: 1.45rem; color: var(--char); }
.loc-venue { font-weight: 800; color: var(--deep); margin-bottom: .3rem; }
.loc-meta { display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 1rem; }
.loc-meta li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; }
.loc-meta svg { width: 20px; height: 20px; flex: none; color: var(--orange); margin-top: 1px; }
.loc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.loc-actions a { font-family: var(--font-head); text-transform: uppercase; font-size: .82rem; padding: .5em 1em; border: 2.5px solid var(--char); border-radius: var(--r-pill); transition: transform var(--dur-fast) var(--spring); }
.loc-actions a:hover { transform: translateY(-2px); }
.la-dir{background:var(--char);color:var(--cream)}.la-call{background:var(--cream);color:var(--char)}.la-wa{background:#25D366;color:#072d15}
.loc-more { text-align: center; margin-top: var(--sp-5); }
@media (max-width: 980px) { .loc-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
/* good to know */
.know-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.know-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 1.6rem; }
.know-card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.know-card p { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 820px) { .know-grid { grid-template-columns: 1fr; } }

/* ---------- Birthdays ---------- */
.bday { background: var(--cream); }
.bday-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.bday-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bday-photos figure { border: 3px solid var(--char); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-hard); aspect-ratio: 1; }
.bday-photos img { width: 100%; height: 100%; object-fit: cover; }
.bday-cake { font-size: 3rem; }
.bday-chip { display: inline-block; background: var(--yolk); color: var(--char); border: 2.5px solid var(--char); border-radius: var(--r-pill); padding: .35em 1em; font-family: var(--font-head); text-transform: uppercase; margin-bottom: 1rem; }
.bday-copy p { margin-top: 1rem; color: var(--ink-soft); }
.bday-call { font-weight: 900; color: var(--brick) !important; }
.bday-copy .btn { margin-top: 1.4rem; }
@media (max-width: 820px) { .bday-grid { grid-template-columns: 1fr; } .bday-photos { order: -1; } }

/* ---------- Reviews ---------- */
.reviews { background: var(--char); color: var(--cream); }
.reviews .sec-title { color: #fff; }
.rev-viewport { overflow: hidden; margin-top: var(--sp-4); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rev-track { display: flex; gap: 1.5rem; width: max-content; animation: revScroll 48s linear infinite; }
.rev-track:hover { animation-play-state: paused; }
@keyframes revScroll { to { transform: translateX(calc(-50% - .75rem)); } }
.rev-card { flex: 0 0 340px; background: #262626; border: 2px solid rgba(255,246,234,.14); border-radius: var(--r-lg); padding: 1.6rem 1.5rem; position: relative; }
.rev-quote { font-family: var(--font-head); font-size: 3rem; color: var(--orange); line-height: .6; }
.rev-card p { color: var(--on-dark-soft); margin: .5rem 0 1rem; }
.rev-foot { display: flex; justify-content: space-between; align-items: center; }
.rev-name { font-weight: 900; color: #fff; }
.rev-stars { color: var(--yolk); letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) { .rev-track { animation: none; flex-wrap: wrap; width: auto; } }

/* ---------- Banner ---------- */
.banner { background: linear-gradient(120deg, var(--orange), var(--deep)); border-block: 3px solid var(--char); text-align: center; padding-block: clamp(3rem,6vw,5rem); color:#fff; }
.banner-inner h2 { font-size: var(--fs-h2); color:#fff; }
.banner-inner h2 em { font-style: normal; color: var(--yolk); }
.banner-inner p { font-weight: 700; margin: 1rem 0 1.5rem; font-size: var(--fs-lead); }

/* ---------- Instagram ---------- */
.insta-head { text-align: center; margin-bottom: var(--sp-5); }
.insta-head .sec-title span { color: var(--orange); }
.insta-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: .75rem; }
.insta-grid a { position: relative; overflow: hidden; border: 3px solid var(--char); border-radius: var(--r-md); aspect-ratio: 1; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.insta-grid a:hover img { transform: scale(1.1); }
.insta-follow { display: flex; justify-content: center; gap: 1rem; margin-top: var(--sp-5); flex-wrap: wrap; }
.social-btn { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; padding: .7em 1.4em; border: 3px solid var(--char); border-radius: var(--r-pill); box-shadow: var(--shadow-hard); transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.social-btn:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard-lg); }
.social-btn svg { width: 20px; height: 20px; }
.sb-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.sb-tt { background: var(--char); color:#fff; }
@media (max-width: 720px) { .insta-grid { grid-template-columns: repeat(3,1fr); } }

/* ---------- Final CTA ---------- */
.final { background: var(--char); color: var(--cream); text-align: center; }
.final .wrap { display: flex; flex-direction: column; align-items: center; }
.final-kicker, .final .eyebrow { color: var(--yolk); }
.final h2 { font-size: var(--fs-h2); color:#fff; }
.final h2 em { font-style: normal; color: var(--orange); }
.final p { color: var(--on-dark-soft); margin: 1rem 0 1.6rem; max-width: 40em; font-weight: 600; }
.final-ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Promises ---------- */
.prom-head { text-align: center; margin-bottom: var(--sp-5); }
.prom-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.prom-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 2rem 1.7rem; text-align: center; transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.prom-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hard-lg); }
.prom-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; background: var(--orange); border: 3px solid var(--char); border-radius: 50%; }
.prom-icon svg { width: 30px; height: 30px; }
.prom-card h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.prom-card p { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 820px) { .prom-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* ---------- Vision ---------- */
.vision { background: var(--char); color: var(--cream); }
.vision-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-6); align-items: center; }
.vision-grid h2 { font-size: var(--fs-h2); color:#fff; }
.vision-grid h2 em { font-style: normal; color: var(--yolk); }
.vision-grid p { margin-top: 1rem; color: var(--on-dark-soft); }
.vision-cities { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.city-chip { display: inline-flex; align-items: center; gap: .4em; background: #262626; border: 2px solid rgba(255,246,234,.2); color: var(--cream); border-radius: var(--r-pill); padding: .4em 1em; font-weight: 800; }
.city-chip i { color: var(--yolk); font-style: normal; }
.vision-ctas { margin-top: 1.6rem; }
.vision-photo .frame { position: relative; border: 3px solid var(--char); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-hard-lg); }
.vision-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.vision-tag { position: absolute; left: 1rem; bottom: 1rem; background: var(--yolk); color: var(--char); font-family: var(--font-head); text-transform: uppercase; padding: .35em .9em; border: 2.5px solid var(--char); border-radius: var(--r-pill); }
@media (max-width: 860px) { .vision-grid { grid-template-columns: 1fr; } }

/* ---------- Stats ---------- */
.stats { background: linear-gradient(120deg, var(--orange), var(--deep)); color:#fff; padding-block: var(--section-y); }
.stats-head { text-align: center; margin-bottom: var(--sp-5); }
.stats-head .sec-title { color:#fff; }
.stats-head .eyebrow { color:#fff; } .stats-head .eyebrow::before { background:#fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.stat-card { background: rgba(27,27,27,.18); border: 3px solid var(--char); border-radius: var(--r-lg); padding: 1.6rem 1rem; text-align: center; }
.stat-k { font-family: var(--font-head); font-size: clamp(2.4rem,4vw,3.4rem); color:#fff; line-height: 1; }
.stat-k .sub { font-size: .5em; }
.stat-v { font-weight: 800; margin-top: .4rem; }
@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Life ---------- */
.life-head { text-align: center; margin-bottom: var(--sp-5); }
.life-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 1fr; gap: 1rem; }
.life-grid figure { border: 3px solid var(--char); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-hard); aspect-ratio: 1; }
.life-grid figure.wide { grid-column: span 2; aspect-ratio: 2/1; }
.life-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .life-grid { grid-template-columns: 1fr 1fr; } .life-grid figure.wide { grid-column: span 2; } }

/* ---------- Franchise: why / opp / gets / who / invest / process / apply ---------- */
.why-grid, .gets-grid, .who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.why-grid p, .gets-copy p, .who-copy p { margin-top: 1rem; color: var(--ink-soft); }
.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.why-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 1.4rem; }
.why-card .num { font-family: var(--font-head); font-size: 2rem; color: var(--orange); }
.why-card h3 { font-size: 1.15rem; margin-top: .4rem; }
.opp { }
.opp-strong { font-weight: 900; color: var(--brick); font-size: 1.15rem; }
.opp-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: var(--sp-5); }
.opp-stat { background: var(--cream); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 1.4rem 1rem; text-align: center; }
.opp-stat .k { display: block; font-family: var(--font-head); font-size: 2.4rem; color: var(--orange); line-height: 1; }
.opp-stat .v { font-weight: 800; font-size: .9rem; margin-top: .3rem; display: block; }
.gets-list, .who-list { display: flex; flex-direction: column; gap: .8rem; }
.gets-list li, .who-list li { display: flex; align-items: center; gap: .8rem; background: var(--white); border: 3px solid var(--char); border-radius: var(--r-md); box-shadow: var(--shadow-hard); padding: 1rem 1.2rem; font-weight: 700; }
.tick { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: var(--orange); color:#fff; border: 2.5px solid var(--char); border-radius: 50%; }
.tick svg { width: 18px; height: 18px; }
.invest-card { position: relative; max-width: 620px; margin: var(--sp-5) auto 0; background: var(--char); color: var(--cream); border: 3px solid var(--char); border-radius: var(--r-xl); padding: 2.5rem 2rem; text-align: center; box-shadow: var(--shadow-hard-lg); }
.invest-stamp { position: absolute; top: -16px; right: -10px; background: var(--yolk); color: var(--char); font-family: var(--font-head); text-transform: uppercase; padding: .4em 1em; border: 2.5px solid var(--char); border-radius: var(--r-pill); transform: rotate(4deg); }
.invest-amount { display: block; font-family: var(--font-head); font-size: clamp(2.6rem,6vw,4rem); color: var(--yolk); }
.invest-note { display: block; font-weight: 800; color: var(--on-dark-soft); margin-bottom: 1rem; }
.invest-card p { color: var(--on-dark-soft); margin-top: .8rem; }
.steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; margin-top: var(--sp-5); counter-reset: step; }
.step { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 1.4rem 1.2rem; }
.step-num { display: grid; place-items: center; width: 44px; height: 44px; background: var(--orange); color:#fff; font-family: var(--font-head); font-size: 1.4rem; border: 3px solid var(--char); border-radius: 50%; margin-bottom: .7rem; }
.step h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; }
@media (max-width: 980px) { .why-grid, .gets-grid, .who-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .opp-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Forms (apply + contact) ---------- */
.frn-form, .contact-form { max-width: 760px; margin-top: var(--sp-4); }
.apply-inner { max-width: 820px; margin-inline: auto; }
.apply-req { background: var(--char); color: var(--cream); border: 3px solid var(--char); border-radius: var(--r-lg); padding: 1.6rem 1.8rem; margin-bottom: var(--sp-5); }
.apply-req h3 { color: var(--yolk); font-size: 1.3rem; margin-bottom: .6rem; }
.apply-req p { color: var(--on-dark-soft); margin-top: .4rem; }
.apply-head { text-align: center; margin-bottom: var(--sp-4); }
.fset { border: 3px solid var(--char); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; background: var(--white); }
.fset legend { font-family: var(--font-head); text-transform: uppercase; background: var(--yolk); color: var(--char); border: 2.5px solid var(--char); border-radius: var(--r-pill); padding: .25em 1em; font-size: 1rem; }
.row2, .form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gap { height: 1rem; }
label { display: block; }
.fset label, .contact-form label { font-weight: 800; font-size: .92rem; color: var(--char); }
.fset label span, .contact-form label > span { display: block; margin-bottom: .35rem; }
input, select, textarea { width: 100%; font: inherit; font-weight: 600; padding: .8em 1em; border: 2.5px solid var(--char); border-radius: var(--r-sm); background: var(--cream); color: var(--char); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.contact-form label { margin-bottom: 1rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,130,31,.25); }
textarea { resize: vertical; }
.ack { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0 1.4rem; font-weight: 700; }
.ack input { width: 22px; height: 22px; flex: none; }
.frn-submit, .form-submit { width: 100%; margin-top: .5rem; }
/* form feedback */
.form-status { margin-top: 1rem; padding: 1rem 1.2rem; border: 3px solid var(--char); border-radius: var(--r-md); font-weight: 800; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #2E7D32; color:#fff; }
.form-status.err { background: #C1272D; color:#fff; }
@media (max-width: 620px) { .row2, .form-row2 { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-6); align-items: start; }
.info-stack { display: flex; flex-direction: column; gap: 1rem; }
.info-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: 1.4rem 1.5rem; }
.info-icon { display: grid; place-items: center; width: 52px; height: 52px; background: var(--orange); color:#fff; border: 3px solid var(--char); border-radius: var(--r-md); margin-bottom: .8rem; }
.info-icon svg { width: 26px; height: 26px; }
.info-card h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.info-card p { color: var(--ink-soft); font-weight: 600; margin-bottom: .6rem; }
.info-link { font-weight: 900; color: var(--deep); border-bottom: 3px solid var(--orange); }
.info-link:hover { color: var(--char); }
.contact-social { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* map */
.map-sec { padding-block: var(--section-y); }
.map-head { text-align: center; margin-bottom: var(--sp-4); }
.map-head .sec-title span { color: var(--orange); }
.map-frame { border-block: 3px solid var(--char); line-height: 0; }
.map-frame iframe { display: block; width: 100%; border: 0; filter: saturate(1.05); }

/* ---------- FAQ accordion ---------- */
.faq-head { text-align: center; margin-bottom: var(--sp-5); }
.faqs, .faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item, .faqs details { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); overflow: hidden; }
.faq-item summary, .faqs summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; }
.faq-item summary::-webkit-details-marker, .faqs summary::-webkit-details-marker { display: none; }
.faq-q { display: flex; align-items: center; gap: .9rem; }
.faq-num { font-family: var(--font-head); color: var(--orange); font-size: 1.3rem; }
.faq-item summary h3, .faqs summary h3 { font-size: 1.15rem; }
.faq-plus, .plus { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--yolk); color: var(--char); border: 2.5px solid var(--char); border-radius: 50%; font-family: var(--font-head); font-size: 1.3rem; transition: transform var(--dur) var(--spring), background var(--dur); }
.faq-plus svg { width: 18px; height: 18px; }
.faq-item[open] .faq-plus, .faqs details[open] .plus { transform: rotate(135deg); background: var(--orange); color:#fff; }
.faq-a, .faq-item > p, .faqs details > p { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); font-weight: 600; }
.faq-a p { color: var(--ink-soft); }
.faq-a a, .faqs details a { color: var(--deep); font-weight: 800; border-bottom: 2px solid var(--orange); }

/* Swahili review styling hook (kept subtle) */
.sw { font-style: italic; }

/* ============================================================
   ENHANCEMENTS — vibrancy, separations, logo, tiles, menu bands
   ============================================================ */

/* ---- Bigger logos ---- */
.nav-logo img { height: 58px; }
.footer-brand img { height: 92px; }   /* 2x */

/* ---- Dot texture on light bands (kills the flatness) ---- */
.band-cream, .bday, .story, .promises, .know, .who, .apply, .contact-sec, .opp, .invest, .menu-sec, .loc-sec {
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(27,27,27,.05) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
}
.band-white, .faq-sec, .diff, .life, .insta {
  background-color: var(--white);
  background-image: radial-gradient(circle, rgba(27,27,27,.045) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
}

/* ---- Crisp band separators ---- */
.band-white, .band-cream, .stats, .reviews, .vision, .banner, .final,
.bday, .promises, .life, .insta, .know, .map-sec, .gets, .process, .apply, .faq-sec {
  border-top: 3px solid var(--char);
}

/* ---- Per-page hero background images (more life, less flat) ---- */
.page-hero-bg { opacity: .40; }
.page-menu .page-hero-bg      { background-image: url("/images/outlets/dining-chicken.jpg"); }
.page-about .page-hero-bg     { background-image: url("/images/outlets/one-mission.jpg"); }
.page-locations .page-hero-bg { background-image: url("/images/outlets/gsm-interior-hkt.jpg"); }
.page-contact .page-hero-bg   { background-image: url("/images/outlets/staff-fun.jpg"); }
.page-menu .page-hero, .page-about .page-hero, .page-locations .page-hero, .page-contact .page-hero {
  background: linear-gradient(120deg, #241a10, #3a2a15);
}

/* ---- Locations: clean image tiles ---- */
.loc-card:has(.loc-photo) { padding: 0; overflow: hidden; }
.loc-card:has(.loc-photo)::before { display: none; }
.loc-photo { position: relative; aspect-ratio: 16/10; overflow: hidden; border-bottom: 3px solid var(--char); }
.loc-photo img { width: 100%; height: 100%; object-fit: cover; }
.loc-num { position: absolute; top: .8rem; left: .8rem; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--orange); color: #fff; font-family: var(--font-head); font-size: 1.35rem; border: 3px solid var(--char); border-radius: 50%; box-shadow: var(--shadow-hard); }
.loc-open { position: absolute; top: .9rem; right: .9rem; background: #25D366; color: #072d15; font-family: var(--font-head);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; padding: .35em .8em; border: 2.5px solid var(--char); border-radius: var(--r-pill); }
.loc-body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.loc-card:has(.loc-photo):hover .loc-photo img { transform: scale(1.05); }
.loc-photo img { transition: transform var(--dur-slow) var(--ease); }

/* ---- Menu: column modifiers ---- */
.menu-grid.cols-1 { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
.menu-grid.cols-2 { grid-template-columns: repeat(2,1fr); max-width: 660px; margin-inline: auto; }
.menu-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 1040px) { .menu-grid.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .menu-grid.cols-2, .menu-grid.cols-3 { grid-template-columns: 1fr; } }
.menu-note { display: block; font-size: .78rem; color: var(--deep); font-weight: 800; margin-top: .2rem; }
.menu-card-img.is-icon { padding: 2rem 1rem 1rem; }
.menu-card-img.is-icon svg { width: 78px; height: 78px; filter: none; }

/* ---- Menu: Krispy Chicken pieces ---- */
.pieces-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.piece-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard);
  padding: 1.7rem 1rem; text-align: center; transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.piece-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hard-lg); }
.piece-num { font-family: var(--font-head); font-size: 3rem; line-height: 1; color: var(--orange); }
.piece-label { text-transform: uppercase; font-weight: 900; letter-spacing: .12em; color: var(--ink-soft); font-size: .78rem; margin-bottom: .7rem; }
.piece-price { display: inline-block; background: var(--yolk); color: var(--char); font-family: var(--font-head); font-size: 1.05rem;
  padding: .2em .7em; border: 2.5px solid var(--char); border-radius: var(--r-sm); }
.pieces-note { text-align: center; margin-top: 1.3rem; font-weight: 800; color: var(--deep); }
@media (max-width: 640px) { .pieces-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Menu: Drinks / Cafe / Ice Cream chips ---- */
.drinks-block { margin-bottom: var(--sp-5); }
.drinks-block:last-child { margin-bottom: 0; }
.sub-lede { text-align: center; color: var(--ink-soft); font-weight: 600; margin: -.4rem 0 1.2rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.chip-card { display: inline-flex; align-items: center; gap: .8rem; background: var(--white); border: 3px solid var(--char);
  border-radius: var(--r-pill); box-shadow: var(--shadow-hard); padding: .65em .65em .65em 1.3em;
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.chip-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard-lg); }
.chip-name { font-family: var(--font-head); text-transform: uppercase; font-size: 1rem; color: var(--char); }
.chip-price { background: var(--yolk); color: var(--char); font-weight: 900; font-size: .85rem; padding: .25em .7em;
  border: 2.5px solid var(--char); border-radius: var(--r-pill); }

/* ============================================================
   FRANCHISE — add life via colour alternation + timeline
   ============================================================ */
.why  { background-color: var(--cream); }
.opp  { background-color: var(--white); background-image: radial-gradient(circle, rgba(27,27,27,.045) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.who  { background-color: var(--cream); }
.invest { background-color: var(--white); }
/* dark contrast band for "What you get" */
.gets { background: var(--char); color: var(--cream); }
.gets .sec-title { color: #fff; }
.gets .eyebrow { color: var(--yolk); }
.gets .eyebrow::before { background: var(--yolk); }
.gets-copy p { color: var(--on-dark-soft); }
.gets-list li { background: #262626; color: var(--cream); border: 2px solid rgba(255,246,234,.16); }
/* colourful process band */
.process { background: linear-gradient(120deg, var(--orange), var(--deep)); color: #fff; }
.process .sec-title { color: #fff; }
.process .eyebrow { color: #fff; } .process .eyebrow::before { background: #fff; }
.steps { position: relative; }
.steps::before { content: ""; position: absolute; top: 52px; left: 8%; right: 8%; height: 4px; background: rgba(255,255,255,.45); border-radius: 3px; z-index: 0; }
.step { position: relative; z-index: 1; }
@media (max-width: 980px) { .steps::before { display: none; } }
/* why cards pop */
.why-card { transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.why-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hard-lg); }
.why-card .num { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--orange); color: #fff;
  border: 3px solid var(--char); border-radius: 50%; font-size: 1.4rem; margin-bottom: .5rem; }

/* ---- Fixes ---- */
/* remove default <ol> numbers on process steps */
.steps { list-style: none; padding-left: 0; }
/* Make page-hero background images clearly visible with a readable scrim */
.page-hero, .faq-hero { background: #1a120a; }
.page-hero::after, .faq-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,10,5,.4), rgba(15,10,5,.72)); }
.page-hero-bg { opacity: .7; z-index: 0; }
.page-hero .wrap, .faq-hero .wrap { position: relative; z-index: 2; }

/* ---- Page-hero images: brighter & clearly visible ---- */
.page-menu .page-hero-bg      { background-image: url("/images/outlets/staff-tray-smile.jpg"); background-position: center 35%; }
.page-about .page-hero-bg     { background-image: url("/images/outlets/gsm-interior-hkt.jpg"); }
.page-locations .page-hero-bg { background-image: url("/images/outlets/shoppers-exterior.jpg"); }
.page-contact .page-hero-bg   { background-image: url("/images/outlets/staff-fun.jpg"); }
.page-hero-bg { opacity: .85; }
.page-hero::after, .faq-hero::after { background: linear-gradient(180deg, rgba(15,10,5,.34), rgba(15,10,5,.60)); }
.page-hero h1, .faq-hero h1 { text-shadow: 0 4px 20px rgba(0,0,0,.6); }
.page-hero p, .faq-hero p { text-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* ---- Page-hero bg images applied to the SECTION (works whether or not a .page-hero-bg div exists) ---- */
.page-hero, .faq-hero { position: relative; background-color: #1a120a; background-repeat: no-repeat; background-position: center; background-size: cover; }
.page-hero-bg { display: none; }
.page-hero::after, .faq-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,10,5,.34), rgba(15,10,5,.62)); }
.page-hero .wrap, .faq-hero .wrap { position: relative; z-index: 2; }
.page-menu .page-hero      { background-image: url("/images/outlets/staff-tray-smile.jpg"); background-position: center 35%; }
.page-about .page-hero     { background-image: url("/images/outlets/gsm-interior-hkt.jpg"); }
.page-locations .page-hero { background-image: url("/images/outlets/shoppers-exterior.jpg"); }
.page-contact .page-hero   { background-image: url("/images/outlets/staff-fun.jpg"); }
.page-faq .faq-hero        { background-image: url("/images/outlets/interior-neon.jpg"); }

/* ============================================================
   REFINEMENTS v2 — logos, good-to-know, page-hero centering, final CTA
   ============================================================ */

/* ---- Bigger logos (header nav + footer) ---- */
.nav-logo img   { height: 72px; }
.footer-brand img { height: 130px; }
.jump-nav { top: 98px; }
@media (max-width: 920px) { .nav-logo img { height: 50px; } .jump-nav { top: 76px; } }

/* ---- Good to know: compact cards, contained icons ---- */
.know-card { text-align: center; padding: 1.8rem 1.6rem; }
.know-ico { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.1rem;
  background: var(--orange); color: #fff; border: 3px solid var(--char); border-radius: 50%; }
.know-ico svg { width: 32px; height: 32px; }
.know-card h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.know-card p { font-size: var(--fs-sm); }

/* ---- Page hero: force everything centered (fixes locations hero) ---- */
.page-hero-inner, .page-hero .wrap, .faq-hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-hero .hero-badges, .faq-hero .hero-badges { justify-content: center; }
.page-hero-sub { max-width: 40em; }

/* ---- Final CTA: a bold contained panel, clearly separate from the footer ---- */
.final { background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(27,27,27,.05) 1.5px, transparent 1.6px); background-size: 22px 22px;
  border-top: 3px solid var(--char); color: var(--char);
  padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.final .wrap { max-width: 1000px; margin-inline: auto;
  background: linear-gradient(125deg, var(--orange), var(--deep));
  color: #fff; border: 3px solid var(--char); border-radius: var(--r-xl);
  box-shadow: var(--shadow-hard-lg);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.5rem); }
.final h2 { color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.3); }
.final h2 em { color: var(--yolk); }
.final p { color: rgba(255,255,255,.94); }
.final .eyebrow, .final-kicker { color: var(--yolk); }
.final .eyebrow::before { background: var(--yolk); }

/* ---- Logos are square badges w/ padding: crop to a wide box so the wordmark reads ~2x bigger ---- */
.nav-logo img { height: 76px; width: 240px; object-fit: cover; object-position: center; }
.footer-brand img { height: 104px; width: 330px; object-fit: cover; object-position: center; margin-bottom: 1rem; }
.jump-nav { top: 106px; }
@media (max-width: 920px) { .nav-logo img { height: 52px; width: 168px; } .jump-nav { top: 80px; } }

/* ============================================================
   REFINEMENTS v3 — reviews contrast, gap-free grids, form CTA
   ============================================================ */

/* ---- Reviews: cream cards on dark band (fix low-contrast dark-on-dark) ---- */
.rev-card { background: var(--cream); color: var(--char); border: 3px solid var(--char); box-shadow: 6px 6px 0 0 rgba(0,0,0,.45); }
.rev-card p { color: var(--ink-soft); }
.rev-name { color: var(--char); }
.rev-quote { color: var(--orange); }
.rev-stars { color: #C77800; }

/* ---- Life gallery: clean collage, no empty cells ---- */
.life-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; grid-auto-rows: auto; }
.life-grid figure { aspect-ratio: 3/2; }
.life-grid figure:nth-child(1), .life-grid figure:nth-child(2), .life-grid figure:nth-child(3) { grid-column: span 2; }
.life-grid figure:nth-child(4), .life-grid figure:nth-child(5), .life-grid figure.wide { grid-column: span 3; aspect-ratio: 3/1.5; }
@media (max-width: 720px) {
  .life-grid { grid-template-columns: repeat(2, 1fr); }
  .life-grid figure, .life-grid figure.wide { grid-column: span 1 !important; aspect-ratio: 1 !important; }
}

/* ---- Photo strips: flex-fill so 3 or 4 images never leave a gap ---- */
.strip { display: flex; flex-wrap: wrap; }
.strip figure { flex: 1 1 0; min-width: 0; aspect-ratio: 4/3; }
.strip figure:not(:last-child) { border-right: 3px solid var(--char); }
@media (max-width: 720px) {
  .strip figure { flex: 1 1 50%; border-right: 0 !important; }
}

/* ---- Google-Form CTA card (replaces inline forms) ---- */
.form-cta { max-width: 640px; margin: var(--sp-4) auto 0; text-align: center;
  background: var(--white); border: 3px solid var(--char); border-radius: var(--r-xl);
  box-shadow: var(--shadow-hard-lg); padding: clamp(2rem, 4vw, 3rem); }
.form-cta p { color: var(--ink-soft); font-weight: 600; margin-bottom: 1.3rem; }
.form-cta-btn { font-size: 1.15rem; padding: 1em 2.2em; }
.form-cta-alt { font-size: var(--fs-sm); margin: 1.3rem 0 0 !important; }
.form-cta-alt a { color: var(--deep); font-weight: 800; border-bottom: 2px solid var(--orange); }

/* ============================================================
   REFINEMENTS v4 — process text fix, Sauced'Up sauce variety
   ============================================================ */

/* Process step titles were white-on-white (inherited band colour) */
.step h3 { color: var(--char); }
.step p  { color: var(--ink-soft); }

/* Sauced'Up — sauce variety row */
.sauce-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: var(--sp-3); }
.sauce-card { background: var(--white); border: 3px solid var(--char); border-radius: var(--r-lg); box-shadow: var(--shadow-hard);
  overflow: hidden; text-align: center; transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring); }
.sauce-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard-lg); }
.sauce-img { background: radial-gradient(120% 120% at 50% 0%, var(--cream) 0%, #ffe9c9 100%); display: grid; place-items: center; padding: 1rem .5rem .3rem; }
.sauce-img img { width: 100%; height: 118px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(27,27,27,.22)); }
.sauce-card span { display: block; background: var(--orange); color: #fff; font-family: var(--font-head); text-transform: uppercase;
  font-size: .95rem; letter-spacing: .02em; padding: .55em .35em; border-top: 3px solid var(--char); }
@media (max-width: 720px) { .sauce-row { grid-template-columns: repeat(2, 1fr); } }

/* ---- Sauce variety: graduated flavour colour bands (like the KOOKOOS sauce strip) ---- */

/* Sauce band colours tied to flavour (order-independent) */
.s-cheese   span { background:#EFAF1E; color:var(--char); }
.s-honey    span { background:#F5821F; }
.s-pilipili span { background:#C0292E; }
.s-sweetsour span { background:#DD6416; }
.s-bbq      span { background:#6E2C15; }
.s-cheese   .sauce-img { background: linear-gradient(180deg,#FFF2CC,#FFE49B); }
.s-honey    .sauce-img { background: linear-gradient(180deg,#FFE9CC,#FFD3A0); }
.s-pilipili .sauce-img { background: linear-gradient(180deg,#FBD3CE,#F0A9A2); }
.s-sweetsour .sauce-img { background: linear-gradient(180deg,#FFE0C4,#F8C08C); }
.s-bbq      .sauce-img { background: linear-gradient(180deg,#E9CBBB,#C99B7E); }