/* ─────────────────────────────────────────────────────────
   Lahori Lane: Manchester's first Pakistani drive-thru
   Palette and type lifted from the A3 menu artwork:
   hot pink #e83088, lime #68c048, card black #181818.
   ───────────────────────────────────────────────────────── */

:root{
  --ink:#181818;
  --ink-2:#101010;
  --ink-3:#232323;
  --ink-card:#1f1f1f;

  --pink:#e83088;
  --pink-lt:#f75ba4;
  --crimson:#c82850;
  --lime:#68c048;
  --lime-lt:#8ad86c;
  --green-dk:#2e9e3e;

  --white:#ffffff;
  --dim:#b3b3b3;
  --dim-2:#8c8c8c;

  --wrap:1200px;
  --r:16px;
  --ease:cubic-bezier(.22,.68,0,1);
  --body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Yellowtail",cursive;

  /* Social marks, used by .social__i as CSS masks. */
  --i-ig:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='5.2'/><circle cx='12' cy='12' r='4.1'/><circle cx='17.2' cy='6.8' r='1.25' fill='black' stroke='none'/></svg>");
  --i-tt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16.6 2h-3.1v13.4a2.6 2.6 0 1 1-2.2-2.57v-3.16a5.75 5.75 0 1 0 5.3 5.73V8.9a7 7 0 0 0 4 1.27V7.05A4 4 0 0 1 16.6 3.1V2Z'/></svg>");
  --i-fb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.6 21.4V13h2.85l.43-3.3h-3.28V7.6c0-.96.27-1.6 1.64-1.6h1.75V3.05a23.5 23.5 0 0 0-2.55-.13c-2.53 0-4.26 1.55-4.26 4.38V9.7H7.3V13h2.88v8.4h3.42Z'/></svg>");
  --i-sc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2.4c2.85 0 4.62 2.1 4.72 4.85.03.6.01 1.15-.02 1.7.42.16.9.06 1.3-.7.53-.18 1.05.33.86.85-.24.65-1.05 1.06-1.7 1.35-.3.13-.5.25-.5.44 0 .5 1.7 3.1 3.55 3.45.4.08.55.5.32.83-.44.62-1.7.94-2.5 1.06-.2.3-.2.82-.45 1.04-.24.22-.75.1-1.28.03-.94-.12-1.9-.1-2.72.44-.63.4-1.34 1.03-2.5 1.03s-1.87-.63-2.5-1.03c-.83-.54-1.78-.56-2.72-.44-.53.07-1.04.19-1.28-.03-.25-.22-.25-.74-.45-1.04-.8-.12-2.06-.44-2.5-1.06-.23-.33-.08-.75.32-.83C5.3 14.14 7 11.54 7 11.04c0-.19-.2-.31-.5-.44-.65-.29-1.46-.7-1.7-1.35-.19-.52.33-1.03.86-.85.4.13.88.23 1.3.07-.03-.55-.05-1.1-.02-1.7C7.04 4.5 8.81 2.4 12 2.4Z'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font:400 16px/1.65 var(--body);
  overflow-x:hidden;
}
img,iframe{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.08;font-weight:700}
p{margin:0 0 1em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:840px}

.skip{
  position:absolute;top:0;left:0;z-index:200;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--lime);color:#000;padding:12px 18px;
  font:700 14px/1 var(--body);text-decoration:none;
}
.skip:focus{width:auto;height:auto;clip-path:none;top:8px;left:8px;border-radius:8px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

.script{font:400 1.35em/1 var(--script);color:var(--lime);display:inline-block}

/* ── Lotus / chevron bands, echoing the menu border ────── */
.lotus-band{
  height:14px;
  background:
    repeating-linear-gradient(115deg,
      var(--lime) 0 14px, #ffffff 14px 20px, var(--lime) 20px 34px, transparent 34px 40px),
    var(--lime);
}
.lotus-band--top{border-bottom:3px solid var(--pink)}
.lotus-band--bottom{border-top:3px solid var(--pink)}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--pink);color:#fff;text-decoration:none;
  font:600 15px/1 var(--body);
  padding:15px 26px;border-radius:100px;border:2px solid transparent;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;
  box-shadow:0 12px 30px -14px rgba(232,48,136,.95);
  white-space:nowrap;
}
.btn:hover{background:var(--pink-lt);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:18px 34px;font-size:16px}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--ghost{background:transparent;border-color:var(--lime);color:var(--lime);box-shadow:none}
.btn--ghost:hover{background:rgba(104,192,72,.12);color:var(--lime-lt);border-color:var(--lime-lt)}

.eyebrow{
  font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin:0 0 18px;
}
.eyebrow--c{text-align:center}
.h2c{text-align:center}
.lede{max-width:640px;margin:0 auto 44px;text-align:center;color:var(--dim);font-size:17px}

/* ── Nav ───────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(24,24,24,.86);
  backdrop-filter:blur(14px);
  border-bottom:2px solid var(--pink);
}
.nav__in{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand__slot{display:block;width:44px;height:44px;flex:none}
.brand__mark{width:100%;height:100%;object-fit:contain}
.brand__word{height:34px;width:auto}
/* While the flying mark is airborne the nav's own roundel is hidden,
   so the two never appear at once. JS adds .is-flying on the <html>. */
.is-flying .brand__mark{opacity:0}
.nav__links{display:flex;gap:28px}
.nav__links a{
  text-decoration:none;font:500 15px/1 var(--body);color:var(--dim);
  padding:6px 0;position:relative;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--lime);transition:right .3s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{right:0}
@media(max-width:880px){.nav__links{display:none}}

/* ── Mobile nav ────────────────────────────────────────────
   Below 880px the inline links are hidden, so the burger and
   the drop-down panel below take over. Both are built by JS
   (main.js) from the existing <nav class="nav__links">, so
   every page gets them without touching its markup. */
.burger{
  display:none;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:transparent;border:2px solid rgba(255,255,255,.16);
  border-radius:12px;cursor:pointer;padding:0;
  transition:border-color .2s,background .2s;
}
.burger:hover{border-color:var(--pink)}
.burger:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.burger__box{display:block;width:20px;height:14px;position:relative}
.burger__box i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--white);
  transition:transform .28s var(--ease),opacity .18s linear;
}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:6px}
.burger__box i:nth-child(3){top:12px}
.burger[aria-expanded="true"]{border-color:var(--pink);background:rgba(232,48,136,.12)}
.burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.navdrop{
  position:absolute;left:0;right:0;top:100%;
  background:var(--ink);
  border-bottom:2px solid var(--pink);
  display:none;
  max-height:calc(100dvh - 74px);overflow-y:auto;
  overscroll-behavior:contain;
}
html.is-navopen .flymark{opacity:0;pointer-events:none;transition:opacity .2s}
.navdrop.is-open{display:block;animation:navdrop .26s var(--ease) both}
@keyframes navdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.navdrop a{
  display:block;padding:16px 4px;
  text-decoration:none;font:600 17px/1.2 var(--body);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s,padding-left .2s;
}
.navdrop a:last-child{border-bottom:0}
.navdrop a:hover,.navdrop a[aria-current="page"]{color:var(--lime);padding-left:10px}
.navdrop__call{
  display:block;margin:18px 0 24px;padding:14px;text-align:center;
  border-radius:999px;background:var(--pink);color:#fff;
  font:700 16px/1 var(--body);text-decoration:none;
}
@media (prefers-reduced-motion:reduce){
  .navdrop.is-open{animation:none}
  .burger__box i{transition:none}
}
@media(max-width:880px){
  .nav{position:sticky}
  .burger{display:flex}
}
@media(max-width:420px){
  .brand__slot{width:34px;height:34px}
  .brand__word{height:26px}
}

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  position:relative;
  background:
    radial-gradient(110% 85% at 85% 5%, rgba(232,48,136,.20), transparent 58%),
    radial-gradient(95% 80% at 5% 95%, rgba(104,192,72,.16), transparent 60%),
    var(--ink);
  overflow:hidden;
}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 10px);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
}
.hero__in{
  position:relative;
  padding:clamp(36px,5.5vw,64px) 24px clamp(32px,4.5vw,48px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:32px;align-items:center;
}
@media(max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:4px}
  .hero__slot{order:-1}
}

/* Landing area for the flying mark. Sized in aspect ratio so the
   layout does not shift while the image loads. */
.hero__slot{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;width:min(220px,40vw);justify-self:center;
}
@media(max-width:900px){.hero__slot{width:min(150px,34vw)}}
.hero__halo{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,48,136,.30),transparent 68%);
  filter:blur(26px);
  animation:halo 6s ease-in-out infinite;
}
@keyframes halo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}

/* The mark itself: fixed, and driven entirely from JS transforms. */
.flymark{
  position:fixed;top:0;left:0;z-index:120;
  width:100px;height:100px;object-fit:contain;
  transform-origin:50% 50%;
  will-change:transform;
  pointer-events:none;
  opacity:0;
}
.flymark.ready{opacity:1}
/* One full turn on arrival, before scroll takes over. */
.flymark.spin{animation:spin-in 1.5s cubic-bezier(.32,.9,.24,1) 1}
@keyframes spin-in{from{rotate:-360deg}to{rotate:0deg}}
@media (prefers-reduced-motion:reduce){
  .flymark.spin{animation:none}
  .hero__halo{animation:none}
}
/* min-width:0 lets the grid track actually shrink; without it a long
   unbreakable heading forces the column wider than its share. */
.hero__copy{min-width:0}

/* Own line, not inline, so the heading never wraps around it. */
.hero__kicker{
  display:block;width:fit-content;
  font:700 clamp(11px,1.2vw,13px)/1 var(--body);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink);margin:0 0 16px;
  padding:7px 14px;border:1px solid rgba(232,48,136,.45);border-radius:100px;
  background:rgba(232,48,136,.08);
}
/* Sized against the copy column, not the viewport, so the long
   "FOOD & DESSERT" line cannot run past the grid track. */
.hero__h1{
  font:800 clamp(30px,4.6vw,62px)/1 var(--body);
  letter-spacing:-.02em;text-transform:uppercase;
  margin:0 0 18px;
  overflow-wrap:break-word;
}
.hero__h1 .g{color:var(--lime)}
.hero__h1 .p{color:var(--pink)}
.hero__sub{max-width:560px;font-size:16.5px;color:var(--dim);margin-bottom:22px}
.hero__sub strong{color:var(--lime-lt);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.hero__pills li{
  font:600 12px/1 var(--body);
  padding:8px 14px;border-radius:100px;
  border:1px solid rgba(104,192,72,.45);color:var(--lime);
  background:rgba(104,192,72,.07);
}

/* Ticker */
.hero__ticker{
  border-top:2px solid var(--lime);
  background:var(--pink);
  overflow:hidden;padding:12px 0;
}
.ticker__track{
  display:flex;gap:40px;width:max-content;
  animation:slide 36s linear infinite;
  font:700 15px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.ticker__track span{display:flex;align-items:center;gap:40px}
.ticker__track span::after{content:"\2726";color:var(--lime-lt);font-size:13px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Strip ─────────────────────────────────────────────── */
.strip{background:var(--ink-2)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09)}
.strip__item{background:var(--ink-2);padding:28px 20px;text-align:center}
.strip__item b{display:block;font:800 25px/1 var(--body);letter-spacing:-.01em;color:var(--lime)}
.strip__item span{display:block;margin-top:6px;font-size:13px;color:var(--dim)}
@media(max-width:760px){
  .strip__in{grid-template-columns:repeat(2,1fr)}
  .wrap.strip__in{padding-left:0;padding-right:0}
}

/* ── Story ─────────────────────────────────────────────── */
.story{padding:clamp(80px,10vw,130px) 0}
.story__in{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.story__copy h2{font-size:clamp(30px,4.2vw,50px);margin-bottom:.6em}
.story__copy p{color:var(--dim);max-width:56ch}
.story__sign{
  font-weight:800!important;font-size:clamp(19px,2.3vw,26px)!important;
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--pink)!important;margin-top:1.3em!important;
}
@media(max-width:900px){
  .story__in{grid-template-columns:1fr;gap:44px}
  .story__art{order:-1}
}

/* Ogee frame lifted from the menu's centrepiece */
.story__art{display:flex;justify-content:center}
.frame{
  position:relative;width:min(340px,80vw);padding:52px 30px 46px;text-align:center;
  background:var(--ink-2);
  border:3px solid var(--lime);
  border-radius:48% 48% 48% 48%/22% 22% 30% 30%;
  box-shadow:0 0 0 8px var(--ink), 0 0 0 11px var(--pink), 0 30px 60px -30px #000;
}
.frame__mark{width:118px;margin:0 auto 18px;animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.frame__script{font:400 34px/1 var(--script);color:var(--pink);margin:0 0 10px}
.frame__sub{
  font:600 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--lime);margin:0;
}

/* ── Menu ──────────────────────────────────────────────── */
.menu{
  padding:clamp(80px,10vw,120px) 0;
  background:var(--ink-2);
  border-top:2px solid var(--pink);
  border-bottom:2px solid var(--pink);
}
.menu h2,.how h2,.faq h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;text-transform:uppercase}

/* Both filter rows travel together and stick under the nav, so the
   category list is reachable from anywhere in a long menu. */
.menufilters{
  position:sticky;top:74px;z-index:60;
  margin:0 0 40px;padding:18px 0 18px;
  /* Opaque: the fade used to sit inside the bar's own box, so a
     category heading scrolling underneath stayed half readable
     through it. The soft edge is now the ::after below the bar. */
  background:var(--ink-2);
}
/* Soft edge below the bar, so items slide out of sight rather than
   meeting a hard line, without anything showing through the chips. */
.menufilters::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:24px;
  background:linear-gradient(180deg,var(--ink-2),rgba(16,16,16,0));
  pointer-events:none;
}
@media(max-width:420px){.menufilters{top:62px}}

/* Land the section below the sticky nav when a filter scrolls to it. */
.menu{scroll-margin-top:74px}
@media(max-width:420px){.menu{scroll-margin-top:62px}}

.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.filters--sub{
  gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09);
}
.chip{
  font:600 14px/1 var(--body);padding:12px 24px;border-radius:100px;cursor:pointer;
  background:transparent;color:var(--dim);
  border:2px solid rgba(255,255,255,.16);
  transition:all .22s var(--ease);
}
.chip:hover{color:#fff;border-color:var(--lime)}
.chip[aria-selected="true"]{background:var(--pink);border-color:var(--pink);color:#fff}

/* Second-level category chips: lighter, so the side tabs stay dominant. */
.chip--sm{
  font-size:12.5px;padding:8px 15px;border-width:1px;
  border-color:rgba(255,255,255,.14);
}
.chip--sm:hover{border-color:var(--lime);color:var(--lime)}
.chip--sm[aria-selected="true"]{
  background:transparent;border-color:var(--lime);color:var(--lime);
  box-shadow:inset 0 0 0 1px var(--lime);
}

/* Editorial layout: no boxes, no rules between items: the
   menu reads as a printed card, held together by whitespace. */
.cats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:64px 48px;align-items:start;
}
@media(max-width:520px){.cats{grid-template-columns:1fr;gap:52px}}

/* One category on its own: full width, items flowing in columns. */
.cats--single{grid-template-columns:1fr;max-width:960px;margin:0 auto}
.cats--single .items{columns:2;column-gap:48px}
.cats--single .item{break-inside:avoid}
.cats--single .cat--compact .items{columns:3;column-gap:32px}
@media(max-width:760px){
  .cats--single .items,
  .cats--single .cat--compact .items{columns:1}
}

.cat__title{
  margin:0 0 6px;padding-bottom:12px;
  font:700 15px/1.2 var(--body);letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
  border-bottom:2px solid rgba(255,255,255,.14);
  position:relative;
}
.cat__title::after{
  content:"";position:absolute;left:0;bottom:-2px;width:46px;height:2px;
  background:var(--pink);
}
.cat--feature .cat__title{color:var(--lime)}
.cat--feature .cat__title::after{background:var(--lime);width:100%}

.cat__note{
  font-size:13px;color:var(--dim-2);margin:14px 0 0;line-height:1.6;
  font-style:italic;
}

.items{list-style:none;margin:22px 0 0;padding:0}
.item{margin:0 0 22px}
.item:last-child{margin-bottom:0}
.item__name{
  margin:0;font:600 15.5px/1.35 var(--body);color:#fff;letter-spacing:.005em;
}
.item__desc{margin:5px 0 0;font-size:14px;line-height:1.6;color:var(--dim)}
.item__add{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--lime);font-weight:500}

/* Chilli rating, drawn rather than relying on emoji fonts. */
/* Spice level: one chilli icon per level, up to three. */
.chilli{display:inline-flex;gap:1px;margin-left:7px;vertical-align:-2px}
.chilli svg{
  width:15px;height:15px;display:block;
  color:var(--pink);
}

/* Name-only lists sit tighter and wrap two-up. */
.cat--compact .items{
  columns:2;column-gap:26px;margin-top:20px;
}
.cat--compact .item{
  margin:0 0 10px;break-inside:avoid;
}
.cat--compact .item__name{font-weight:500;font-size:14.5px;color:var(--dim)}
@media(max-width:380px){.cat--compact .items{columns:1}}

.menu__note{text-align:center;margin:44px auto 0;max-width:760px;font-size:14px;color:var(--dim-2)}
.menu__note a{color:var(--lime)}

/* ── How ───────────────────────────────────────────────── */
.how{padding:clamp(80px,10vw,130px) 0}
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps li{
  position:relative;padding:32px 26px 28px;
  border:2px solid rgba(255,255,255,.1);border-radius:var(--r);
  background:var(--ink-card);
  transition:border-color .3s,transform .3s var(--ease);
}
.steps li:hover{border-color:var(--pink);transform:translateY(-4px)}
.steps__n{
  display:block;font:800 34px/1 var(--body);color:var(--lime);
  margin-bottom:14px;letter-spacing:-.02em;
}
.steps h3{font-size:18px;text-transform:uppercase;letter-spacing:.01em}
.steps p{margin:0;font-size:14.5px;color:var(--dim)}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.safety{
  display:flex;gap:12px;align-items:flex-start;
  max-width:720px;margin:34px auto 0;padding:18px 22px;
  border:1px solid rgba(232,48,136,.4);border-radius:var(--r);
  background:rgba(232,48,136,.07);
  font-size:14.5px;line-height:1.6;color:var(--dim);
}
.safety span{color:var(--pink);font-size:18px;line-height:1.3;flex:none}

/* ── Visit ─────────────────────────────────────────────── */
.visit{padding:clamp(80px,10vw,120px) 0;background:var(--ink-2);border-top:2px solid var(--lime)}
.visit__in{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:stretch}
.visit__card h2{font-size:clamp(28px,3.6vw,42px);text-transform:uppercase;letter-spacing:-.01em}
.addr{font-style:normal;margin:0 0 10px;display:flex;flex-direction:column}
.addr span{color:var(--dim);line-height:1.7;font-size:15.5px}
.addr__l1{color:#fff!important;font-weight:600}
.addr__pc{color:var(--lime)!important;font-weight:600;letter-spacing:.06em}
.addr__geo{margin:0 0 26px;font-size:13px}
.addr__geo a{
  color:var(--dim-2);text-decoration:none;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  border-bottom:1px dashed rgba(255,255,255,.2);padding-bottom:2px;
}
.addr__geo a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.addr__geo a span{color:var(--pink);font-size:9px;vertical-align:middle;margin-right:4px}
.hours{margin:0 0 18px;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.hours .row{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px;
}
.hours dt{color:var(--dim);margin:0}
.hours dd{margin:0;color:#fff;font-weight:600}
.hours .row--today dt,.hours .row--today dd{color:var(--lime)}
.visit__open{
  display:inline-flex;align-items:center;gap:9px;
  font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
  padding:11px 16px;border-radius:100px;margin-bottom:24px;
}
.visit__open[data-state="open"]{background:rgba(104,192,72,.15);color:var(--lime-lt)}
.visit__open[data-state="shut"]{background:rgba(232,48,136,.15);color:var(--pink-lt)}
.visit__open::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.visit__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.visit__socials{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 8px;font-size:14px}
.visit__socials a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(104,192,72,.4);padding-bottom:2px}
.visit__socials a:hover{color:var(--lime-lt)}
.visit__handle{font:600 13px/1 var(--body);color:var(--pink);margin:0;letter-spacing:.04em}

.foot__links{
  margin:10px 0 0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  font:500 12.5px/1 var(--body);
}
.foot__links a{color:var(--dim-2);text-decoration:none}
.foot__links a:hover{color:var(--lime)}

/* -- Cookie consent ---------------------------------------
   Both choices are the same size and sit together, because the
   ICO treats a prominent accept next to a buried refuse as no
   consent at all. Fixed to the bottom rather than covering the
   page, so nothing is held hostage behind it. */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:rgba(24,24,24,.98);
  border-top:2px solid var(--pink);
  padding:16px 0;
  animation:cookie-in .3s var(--ease) both;
}
@keyframes cookie-in{from{transform:translateY(100%)}to{transform:none}}
.cookie__in{
  display:flex;align-items:center;gap:22px;
  flex-wrap:wrap;justify-content:space-between;
}
.cookie__text{
  margin:0;flex:1 1 380px;
  font:400 13.5px/1.55 var(--body);color:var(--dim);
}
.cookie__text a{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
.cookie__text a:hover{color:var(--lime-lt)}
.cookie__btns{display:flex;gap:10px;flex:none}
.cookie__btns .btn{min-width:118px;justify-content:center}
@media(max-width:560px){
  .cookie__in{gap:14px}
  .cookie__btns{width:100%}
  .cookie__btns .btn{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){.cookie{animation:none}}

/* -- Related posts ----------------------------------------
   Each article links to three others so the five posts form a
   cluster a crawler can walk, rather than five dead ends. */
.related{padding:0 0 clamp(60px,8vw,90px)}
.related--home{padding:0 0 clamp(70px,9vw,110px);background:var(--ink-2)}
.related--home .related__list{max-width:760px}
.related__h{
  margin:0 0 18px;font:700 13px/1 var(--body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);
}
.related__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.related__list li{border-bottom:1px solid rgba(255,255,255,.1)}
.related__list a{
  display:block;padding:15px 0;text-decoration:none;
  font:600 16px/1.35 var(--body);color:var(--white);
  transition:color .2s,padding-left .2s;
}
.related__list a:hover{color:var(--lime);padding-left:8px}
.related__all{margin:18px 0 0}
.related__all a{color:var(--lime);font:600 14px/1 var(--body);text-decoration:none}
.related__all a:hover{text-decoration:underline}

/* -- Social handles ---------------------------------------
   Every mention of a social account is the platform's mark
   followed by the handle, rather than the platform's name in
   words. The marks are CSS masks painted in currentColor, so
   one definition serves every page and each icon takes the
   colour and hover state of the link it sits in. */
/* The handle alone does not say which platform, so each link carries
   the platform name for screen readers only. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.social{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.social__i{
  width:1.05em;height:1.05em;flex:none;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.social__i--ig{
  -webkit-mask-image:var(--i-ig);mask-image:var(--i-ig);
}
.social__i--tt{
  -webkit-mask-image:var(--i-tt);mask-image:var(--i-tt);
}
.social__i--fb{
  -webkit-mask-image:var(--i-fb);mask-image:var(--i-fb);
}
.social__i--sc{
  -webkit-mask-image:var(--i-sc);mask-image:var(--i-sc);
}

.visit__map{
  border-radius:var(--r);overflow:hidden;min-height:420px;
  border:2px solid var(--pink);
  filter:grayscale(.3) contrast(1.05);
}
.visit__map iframe{width:100%;height:100%;min-height:420px;border:0}
@media(max-width:900px){.visit__in{grid-template-columns:1fr}}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{padding:clamp(80px,10vw,130px) 0}
.faq__list{margin-top:44px}
.faq details{border-bottom:1px solid rgba(255,255,255,.1)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font:600 17px/1.45 var(--body);color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font:400 28px/1 var(--body);color:var(--lime);
  transition:transform .3s var(--ease);flex:none;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--dim);max-width:66ch;font-size:15px}

/* ── End CTA ───────────────────────────────────────────── */
.endcta{
  padding:clamp(80px,10vw,120px) 0 0;text-align:center;
  background:
    radial-gradient(85% 100% at 50% 100%, rgba(232,48,136,.30), transparent 66%),
    var(--ink-2);
  border-top:2px solid var(--lime);
}
.endcta__in{padding-bottom:clamp(70px,9vw,110px)}
.endcta h2{font-size:clamp(36px,6.4vw,84px);letter-spacing:-.025em;text-transform:uppercase}
.endcta p{color:var(--dim);margin-bottom:32px}
.endcta .hero__cta{justify-content:center}

/* ── Footer ────────────────────────────────────────────── */
.foot{padding:44px 0;background:var(--ink)}
.foot__in{text-align:center}
.foot__logo{height:46px;width:auto;margin:0 auto 16px}
.foot p{margin:10px 0 0;font-size:13.5px;color:var(--dim)}
.foot__small{font-size:12.5px;color:var(--dim-2)}

/* ── Reveal on scroll ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── Footer serving line ───────────────────────────────────
   Keyword-bearing but genuinely useful: says what it is and
   roughly who is near it. Quiet by design, not a link farm. */
.foot__serving{
  max-width:820px;margin:0 0 28px;text-align:left;
  font-size:12.5px;line-height:1.7;color:var(--dim-2);
  padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08);
}

/* ── Exit-intent follow prompt ─────────────────────────────
   Fires once per visitor: on mouse leaving the top of the
   viewport (desktop) or a decisive scroll-up (touch). */
.exit{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.exit[hidden]{display:none}
.exit__scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);animation:fade .3s var(--ease);
}
.exit__card{
  position:relative;width:min(430px,100%);text-align:center;
  background:var(--ink-card);
  border:2px solid var(--pink);border-radius:var(--r);
  padding:34px 30px 26px;
  box-shadow:0 40px 90px -30px #000;
  animation:pop .4s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.exit__x{
  position:absolute;top:10px;right:12px;
  background:none;border:0;cursor:pointer;
  color:var(--dim-2);font-size:26px;line-height:1;padding:6px 10px;
}
.exit__x:hover{color:#fff}
.exit__mark{width:66px;margin:0 auto 14px}
.exit__kicker{
  font:700 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--lime);margin:0 0 10px;
}
.exit__title{font-size:23px;letter-spacing:-.01em;margin:0 0 10px;color:#fff}
.exit__body{font-size:14.5px;line-height:1.6;color:var(--dim);margin:0 0 22px}
.exit__cta{display:flex;flex-direction:column;gap:10px}
.exit__cta .btn{width:100%}
.exit__no{
  margin:16px 0 0;background:none;border:0;cursor:pointer;
  font:500 13px/1 var(--body);color:var(--dim-2);text-decoration:underline;
}
.exit__no:hover{color:var(--dim)}
@media (prefers-reduced-motion:reduce){
  .exit__scrim,.exit__card{animation:none}
}

/* ── Review page ───────────────────────────────────────────
   One question at a time, each step swapped in place. */
.rev{padding:clamp(48px,8vw,90px) 0 clamp(60px,8vw,100px);text-align:center}
.rev__step[hidden]{display:none}
.rev__step{animation:revin .4s var(--ease)}
@keyframes revin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rev__step{animation:none}}

.rev__mark{width:78px;margin:0 auto 22px}
.rev__emoji{font-size:44px;line-height:1;margin:0 0 14px}
.rev__h1{
  font:800 clamp(28px,5vw,46px)/1.05 var(--body);
  letter-spacing:-.02em;text-transform:uppercase;margin:0 0 14px;
}
.rev__h1:focus{outline:none}
.rev__lede{max-width:520px;margin:0 auto 34px;color:var(--dim);font-size:16.5px}
.rev__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rev__aside{margin:26px 0 0;font-size:14px;color:var(--dim-2)}
.rev__aside a{color:var(--lime)}
.rev__aside--quiet{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09)}
.rev__aside--quiet a{color:var(--dim);text-decoration:underline}
.rev__aside--quiet a:hover{color:var(--lime)}
.rev__back{
  margin:30px 0 0;background:none;border:0;cursor:pointer;
  font:500 13px/1 var(--body);color:var(--dim-2);text-decoration:underline;
}
.rev__back:hover{color:var(--dim)}

/* Thumbs */
.rev__thumbs{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.thumb{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:150px;padding:28px 18px;cursor:pointer;
  background:var(--ink-card);color:var(--dim);
  border:2px solid rgba(255,255,255,.14);border-radius:var(--r);
  transition:all .22s var(--ease);
  font:inherit;
}
.thumb__label{font:600 14px/1 var(--body)}
.thumb__icon{display:block;line-height:0}
.thumb:hover{transform:translateY(-4px)}
.thumb--up:hover{border-color:var(--lime);color:var(--lime);background:rgba(104,192,72,.08)}
.thumb--down:hover{border-color:var(--pink);color:var(--pink);background:rgba(232,48,136,.08)}
@media(max-width:420px){.thumb{width:132px;padding:22px 14px}}

/* Form */
.rev__form{max-width:520px;margin:0 auto;text-align:left}
.field{display:block;margin:0 0 16px}
.field__label{
  display:block;margin:0 0 7px;
  font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.field__label em{font-style:normal;color:var(--dim-2);letter-spacing:.04em}
.field input,.field textarea{
  width:100%;padding:13px 15px;
  background:var(--ink-2);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:10px;
  font:400 15px/1.5 var(--body);resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--lime)}
.field input::placeholder,.field textarea::placeholder{color:#5f5f5f}
.field__err{display:block;margin-top:7px;font-size:13px;color:var(--pink-lt)}
.field__err[hidden]{display:none}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field__row{grid-template-columns:1fr;gap:0}}
.field__hint{font-size:13px;color:var(--dim-2);margin:4px 0 22px}

/* Prices, only rendered when SHOW_PRICES is on in menu-data.js */
.item--priced .item__name{display:flex;align-items:baseline;gap:10px}
.item__price{margin-left:auto;flex:none;font-weight:700;color:var(--lime)}
.item__price::before{content:"\00a3";font-size:.82em;margin-right:1px;opacity:.75}

/* -- Item upgrade panels ----------------------------------
   Items that carry priced extras open on a tap, so the cost of
   a meal upgrade or a double patty sits on the item itself
   rather than in a note at the top of the section. */
.item--opts .item__name{display:block}
.item__toggle{
  display:flex;align-items:baseline;gap:10px;width:100%;
  margin:0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
.item__toggle:hover .item__caret,
.item__toggle[aria-expanded="true"] .item__caret{border-color:var(--lime)}
.item__toggle:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.item__caret{
  flex:none;width:7px;height:7px;margin-left:2px;align-self:center;
  border-right:2px solid var(--dim-2);border-bottom:2px solid var(--dim-2);
  border-radius:1px;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--ease),border-color .2s;
}
.item__toggle[aria-expanded="true"] .item__caret{transform:translateY(1px) rotate(225deg)}
/* The price already sits hard right, so the caret follows it. */
.item__toggle .item__price{margin-left:auto;order:2}
.item__toggle .item__caret{order:3}

.item__opts{
  margin:10px 0 0;padding:11px 13px;
  border:1px solid rgba(104,192,72,.22);border-radius:10px;
  background:rgba(104,192,72,.05);
}
.item__opts[hidden]{display:none}
.item__opts-h{
  margin:0 0 7px;font:700 10.5px/1 var(--body);
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim-2);
}
.item__opts ul{list-style:none;margin:0;padding:0}
.opt{display:flex;align-items:baseline;gap:12px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.opt + .opt{margin-top:5px}
.opt__p{margin-left:auto;flex:none;font-weight:700;color:var(--lime)}
.opt__p::before{content:"\00a3";font-size:.82em;margin-right:1px;opacity:.75}
@media (prefers-reduced-motion:reduce){.item__caret{transition:none}}

/* ── Open / closed pill in the nav ─────────────────────────
   Live status is the single most asked question for a late
   night place, so it sits in the bar rather than down the page. */
.navopen{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border-radius:100px;white-space:nowrap;
}
.navopen[hidden]{display:none}
.navopen[data-state="open"]{background:rgba(104,192,72,.14);color:var(--lime-lt)}
.navopen[data-state="shut"]{background:rgba(232,48,136,.14);color:var(--pink-lt)}
.navopen::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:currentColor;box-shadow:0 0 9px currentColor;
}
.navopen[data-state="open"]::before{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.navopen::before{animation:none}}
/* Below the nav-link breakpoint the pill would crowd the phone button. */
@media(max-width:620px){.navopen{display:none}}

/* ── Menu page ─────────────────────────────────────────── */
.menuhero{
  position:relative;
  background:
    radial-gradient(100% 80% at 80% 0%, rgba(232,48,136,.18), transparent 60%),
    var(--ink);
}
.menuhero__in{padding:clamp(34px,5vw,58px) 24px clamp(28px,4vw,44px)}
.menuhero__h1{
  font:800 clamp(34px,5.4vw,66px)/1 var(--body);
  letter-spacing:-.02em;text-transform:uppercase;margin:0 0 12px;
}
.menuhero__h1 .g{color:var(--lime)}
.menuhero__sub{max-width:520px;color:var(--dim);font-size:16.5px;margin-bottom:24px}
.menu--page{border-top:0}
.menu--page .menufilters{top:74px}
@media(max-width:420px){.menu--page .menufilters{top:62px}}

/* ── Pakistan motifs ───────────────────────────────────────
   Line art sitting behind the copy: Minar-e-Pakistan, Faisal
   Masjid, a markhor, truck-art panels and the menu's ogee arch.
   Purely decorative and absolutely positioned, so they never
   take layout space or add scroll distance. They drift a little
   as the section passes, driven by a CSS variable the JS sets. */
.motif{
  position:absolute;pointer-events:none;z-index:0;
  color:var(--lime);opacity:.11;
  transform:translate3d(0,calc(var(--drift,0) * 1px),0);
  will-change:transform;
}
.motif--pink{color:var(--pink);opacity:.13}
.motif svg{width:100%;height:100%;display:block}

/* Keep real content above the art. */
.story__in,.how .wrap,.visit__in,.faq .wrap,.endcta__in,.seo__in{position:relative;z-index:1}
.story,.how,.visit,.faq,.endcta,.seo{position:relative;overflow:hidden}

/* Placements, chosen to sit in the gaps beside the copy. */
.motif--minar{top:4%;right:3%;width:clamp(90px,11vw,150px);height:auto;aspect-ratio:120/200}
.motif--masjid{bottom:2%;left:-2%;width:clamp(150px,20vw,290px);aspect-ratio:200/140}
.motif--markhor{top:8%;left:2%;width:clamp(100px,12vw,170px);aspect-ratio:140/150}
.motif--arch{top:50%;right:4%;transform:translateY(-50%);width:clamp(90px,10vw,140px);aspect-ratio:120/170}
.motif--rickshaw{bottom:6%;right:4%;width:clamp(120px,15vw,210px);aspect-ratio:160/110}

/* Truck-art band: a full-width repeating rule between sections. */
.truckband{
  position:relative;height:46px;overflow:hidden;
  color:var(--pink);opacity:.22;
  background:var(--ink-2);
}
.truckband svg{position:absolute;top:0;left:0;height:100%;width:200%}

/* On small screens the art competes with the copy, so it steps back. */
@media(max-width:760px){
  .motif{opacity:.07}
  .motif--markhor,.motif--arch{display:none}
}
@media (prefers-reduced-motion:reduce){
  .motif{transform:none!important}
}

/* ── Long-form copy sections ───────────────────────────── */
.seo{padding:clamp(64px,8vw,110px) 0}
.seo--alt{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.seo h2{font-size:clamp(30px,4.6vw,54px);letter-spacing:-.02em;text-transform:uppercase;margin-bottom:34px}
.seo__in p{color:var(--dim);font-size:16.5px;line-height:1.8;margin:0 0 18px}
.seo__in p a{color:var(--lime)}
.seo__cta{margin-top:32px;text-align:center}

/* ── Blog ──────────────────────────────────────────────── */
.posts{display:flex;flex-direction:column;gap:0}
.post{padding:30px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.post:first-child{padding-top:0}
.post__meta{
  margin:0 0 10px;font:600 12px/1 var(--body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--lime);
}
.post__title{font-size:clamp(21px,2.6vw,28px);letter-spacing:-.01em;margin:0 0 10px;text-transform:none}
.post__title a{text-decoration:none;color:#fff;transition:color .2s}
.post__title a:hover{color:var(--pink)}
.post__excerpt{margin:0 0 12px;color:var(--dim);font-size:15.5px;line-height:1.7}
.post__tags{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.post__tags span{
  font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;
  background:rgba(255,255,255,.06);color:var(--dim-2);
}
.posts__empty{color:var(--dim-2);font-size:15px;text-align:center;padding:20px 0}
.posts__empty[hidden]{display:none}
.posts__empty a{color:var(--lime)}

/* Article body, used by individual post pages. */
.article{padding:clamp(40px,6vw,70px) 0 clamp(60px,8vw,100px)}
.article__body p{color:var(--dim);font-size:16.5px;line-height:1.8;margin:0 0 20px}
.article__body h2{font-size:clamp(24px,3.4vw,34px);margin:38px 0 16px;letter-spacing:-.01em}
.article__body h3{font-size:clamp(19px,2.4vw,23px);margin:30px 0 12px;text-transform:none}
.article__body ul,.article__body ol{color:var(--dim);font-size:16.5px;line-height:1.8;padding-left:22px;margin:0 0 20px}
.article__body li{margin:0 0 8px}
.article__body a{color:var(--lime)}
.article__back{
  display:inline-block;margin-bottom:22px;
  font:600 13px/1 var(--body);color:var(--dim-2);text-decoration:none;
}
.article__back:hover{color:var(--lime)}

/* ── TS build credit ──────────────────────────────────────
   House maker's mark. Its own row beneath the whole legal
   bar, deliberately quiet but legible, and never inline with
   the client's own copy. */
.foot__credit{
  margin:20px 0 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
  text-align:left;
}
.foot__credit a{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;
  font:600 .68rem/1 var(--body);letter-spacing:.28em;
  color:var(--white);opacity:.4;
  transition:opacity .25s var(--ease);
}
.foot__credit img{
  width:28px;height:28px;opacity:.7;
  transition:opacity .25s var(--ease);
}
.foot__credit a:hover{opacity:.75}
.foot__credit a:hover img{opacity:1}
@media(min-width:640px){.foot__credit{text-align:right}}

/* Four-step version of the process, one row on wide screens. */
.steps--four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.steps--four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps--four{grid-template-columns:1fr}}

/* ── Hazard light ──────────────────────────────────────────
   The dashboard warning triangle, blinking at roughly the rate
   a real hazard light does (about 90 flashes a minute). Uses
   steps() so it snaps on and off like a bulb rather than
   fading like a dimmer. Amber, because that is what the light
   actually is, and it reads as "signal" against the brand pink. */
.hazlight{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;vertical-align:-3px;margin-right:9px;
  color:#f9a825;
  animation:hazblink 1.35s steps(1,end) infinite;
}
.hazlight svg{width:19px;height:19px;display:block}
.hazlight--lg{margin-right:0}
.hazlight--lg svg{width:26px;height:26px}
@keyframes hazblink{0%,49%{opacity:1}50%,100%{opacity:.18}}
@media (prefers-reduced-motion:reduce){
  .hazlight{animation:none;opacity:1}
}
/* The safety note owns its own icon colour, so drop the old pink rule. */
.safety .hazlight{color:#f9a825}