/* ═══════════════════════════════════════════════════════════════════════════
   Hibachi Express — Lekki Phase 1

   Every colour was sampled from their own footage, not chosen: the neon red of
   the fascia, the amber of the flame in the logo, and the near-black of the
   street at night. Their shop is a bright box on a dark road, and the page is
   built the same way — a dark ground with heat in it, and the food and the fire
   supplying every bit of colour.

   The map behind all of it is real OpenStreetMap geometry for Lekki Phase 1.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0A090C;
  --ink-2:    #121016;
  --ink-3:    #1B181F;
  --fire:     #E8382A;   /* their neon fascia */
  --fire-hi:  #FF5A3C;
  --ember:    #F5A623;   /* the flame in the mark */
  --ember-lo: #C77A16;
  --bone:     #F3EEE6;
  /* Warm neutral. A cool grey on this ground goes blue against the red. */
  --ash:      #A39A93;
  --line:     rgba(243,238,230,.14);
  --line-2:   rgba(243,238,230,.07);

  --display:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --maxw:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The header is fixed, so anchors would drop their target underneath it. */
[id]{scroll-margin-top:5.5rem}

body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.07rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--fire);color:var(--bone)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
body{caret-color:var(--ember)}
html{scrollbar-color:var(--ink-3) var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-3);border:3px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:#2a2630}
/* Kills the 300ms double-tap delay on every control. */
button,a,summary{touch-action:manipulation}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ember);color:var(--ink);padding:.8rem 1.3rem;font-weight:600}
.skip:focus{left:0}

/* ── the drive ────────────────────────────────────────────────────────────
   Real Lekki roads, fixed behind every section. Sized in JS from the layout
   viewport; no 100vw, which counts the scrollbar gutter. */
.drive{position:fixed;inset:0;z-index:0;pointer-events:none}
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(232,56,42,.10),transparent 60%),
    radial-gradient(90% 60% at 50% 100%,rgba(245,166,35,.07),transparent 65%);
}
/* Grain. Atmosphere over flat colour, and it hides banding in the dark. */
body::before{
  content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
main,.nav,.foot{position:relative;z-index:3}

/* ── type ─────────────────────────────────────────────────────────────────
   Big Shoulders is condensed and industrial — it carries at signage weight,
   which is what their fascia does. It is never set small; Figtree does that. */
h1,h2{font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.005em;margin:0;text-transform:uppercase}
h1{font-size:clamp(3.4rem,1.6rem + 9vw,9.5rem)}
h2{font-size:clamp(2.5rem,1.3rem + 5.4vw,6rem);text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--fire)}
.lede{color:var(--ash);max-width:50ch;margin:1.4rem 0 0;font-size:1.06rem}
.head{max-width:56ch;margin-bottom:clamp(2.2rem,5vw,4rem);position:relative;isolation:isolate}
/* The map runs live behind every section, and the route is a bright line that
   will eventually cross a paragraph. Each head carries its own falloff so the
   copy stays readable wherever the drive happens to be. */
.head::before{
  content:'';position:absolute;inset:-1.5rem -2rem;z-index:-1;pointer-events:none;
  background:radial-gradient(105% 130% at 12% 50%,
    rgba(10,9,12,.93) 0%,rgba(10,9,12,.8) 42%,rgba(10,9,12,0) 80%);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--bone);--fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.9rem 1.6rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bg);
  font-family:var(--body);font-weight:600;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--fire{--bg:#C41F14;--fg:#fff}   /* 5.3:1 — #E8382A with white is 4.2:1 */
.btn--fire:hover{--bg:var(--fire)}
.btn--ghost{--bg:transparent;--fg:var(--bone);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ember);color:var(--ember)}
.btn--sm{min-height:40px;padding:.6rem 1.05rem;font-size:.76rem}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.9rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s;
}
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,12,.9),transparent);
  transition:opacity .4s;
}
.nav.is-stuck{background:rgba(10,9,12,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.nav.is-stuck::before{opacity:0}
.nav__mark{
  font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1;
  letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--fire);
}
.nav__mark span{color:var(--bone);margin-left:.28em}
.nav__links{display:flex;gap:1.8rem}
.nav__links a{
  text-decoration:none;font-size:.8rem;font-weight:500;color:var(--ash);
  letter-spacing:.08em;text-transform:uppercase;transition:color .25s;
}
.nav__links a:hover{color:var(--bone)}
@media (max-width:880px){.nav__links{display:none}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:600px;min-height:100svh;min-height:100dvh;
  display:flex;align-items:flex-end;
  padding:clamp(7rem,14vh,10rem) var(--pad) clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.hero__film{position:absolute;inset:0;z-index:-1}
.hero__film video{width:100%;height:100%;object-fit:cover}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,9,12,.94) 0%,rgba(10,9,12,.72) 42%,rgba(10,9,12,.34) 72%,rgba(10,9,12,.5) 100%),
    linear-gradient(0deg,rgba(10,9,12,.95) 0%,transparent 55%);
}
@media (max-width:900px){
  .hero__veil{background:linear-gradient(0deg,rgba(10,9,12,.97) 22%,rgba(10,9,12,.72) 52%,rgba(10,9,12,.35) 100%)}
}
.hero__copy{max-width:min(660px,100%)}
.hero__title .l{display:block}
.hero__lede{color:var(--ash);max-width:38ch;margin:1.5rem 0 2rem;font-size:1.08rem}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero__cta .btn{flex:1 1 auto}
@media (min-width:600px){.hero__cta .btn{flex:0 0 auto}}

.filmbtn{
  /* Clear of the WhatsApp button, which is fixed in the same corner. */
  position:absolute;right:calc(var(--pad) + 68px);bottom:clamp(3rem,7vh,5rem);
  appearance:none;cursor:pointer;background:rgba(10,9,12,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--ash);
  min-height:40px;padding:.55rem 1rem;
  font-family:var(--body);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s,border-color .25s;
}
.filmbtn:hover{color:var(--bone);border-color:var(--ember)}
@media (max-width:900px){.filmbtn{display:none}}

/* ── sections ─────────────────────────────────────────────────────────── */
.section{padding:clamp(4.5rem,10vw,9rem) var(--pad);max-width:var(--maxw);margin-inline:auto}

/* ── reels ────────────────────────────────────────────────────────────────
   Their own posts, at the aspect they were shot in. Each carries its own
   control: a five-second-plus muted loop needs a way to stop it. */
/* The reels are lit tiles sitting ON the road map, not a wall built over it.
   Wide gaps and a staggered second column let the street grid run between them,
   and every tile carries an ember hairline plus a drop so it reads as lifted
   off the map rather than pasted onto it. */
.reels{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(1.4rem,3vw,2.4rem);
  padding-inline:clamp(0rem,2vw,2rem);
}
@media (max-width:620px){
  /* Inset from both edges as well, so the street grid is visible down the
     sides of the strip and not only in the gap between the columns. */
  .reels{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem;padding-inline:1.4rem}
  /* Offset the right column so the map shows through the step between them. */
  .reel:nth-child(even){transform:translateY(2.4rem)}
  .reel:nth-child(even).rev{transform:translateY(calc(2.4rem + 20px))}
  .reel:nth-child(even).rev.in{transform:translateY(2.4rem)}
  .reels{padding-bottom:2.4rem}
}
.reel{
  position:relative;margin:0;background:var(--ink-2);overflow:hidden;
  border:1px solid rgba(245,166,35,.42);
  /* Neutral elevation with a real offset. The first version added a
     zero-offset red halo, which is decoration pretending to be depth; the
     separation from the map comes from the ember hairline and the cast
     shadow instead. */
  box-shadow:
    0 0 0 1px rgba(10,9,12,.9),
    0 16px 30px -18px rgba(0,0,0,.95);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.reel:hover,.reel:focus-within{
  border-color:rgba(245,166,35,.7);
  box-shadow:
    0 0 0 1px rgba(10,9,12,.9),
    0 22px 38px -18px rgba(0,0,0,.95);
}
.reel__v{width:100%;aspect-ratio:406/720;object-fit:cover;background:var(--ink-2)}
.reel__btn{
  position:absolute;inset:0;appearance:none;cursor:pointer;
  background:transparent;border:0;
}
.reel__btn::after{
  content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(243,238,230,.7);border-radius:50%;
  background:rgba(10,9,12,.45) no-repeat center/12px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='%23F3EEE6'%3E%3Cpath d='M0 0l12 7-12 7z'/%3E%3C/svg%3E");
  transition:opacity .3s;
}
.reel.is-playing .reel__btn::after{opacity:0}
.reel.is-playing .reel__btn:hover::after,.reel__btn:focus-visible::after{opacity:1}
.reel figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.7rem .8rem;font-size:.76rem;color:var(--ash);
}
.reel figcaption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel figcaption i{font-style:normal;color:var(--ember-lo);font-variant-numeric:tabular-nums;flex:none}

/* ── station ──────────────────────────────────────────────────────────── */
.station{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,5vw,5rem);align-items:center}
@media (max-width:900px){.station{grid-template-columns:1fr}}
.station__shot{margin:0;border:1px solid var(--line-2)}
.station__shot img{width:100%;height:auto}
.ticks{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem}
.ticks li{position:relative;padding-left:1.6rem;color:var(--ash);font-size:.98rem}
/* A drawn mark, not a glyph. */
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--fire);
}

/* ── arrive ───────────────────────────────────────────────────────────────
   The only band that sits directly on the map, so nothing opaque may cover it
   and the copy carries its own darkening instead. */
.arrive{
  position:relative;min-height:96svh;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:1rem;padding:clamp(3rem,8vw,7rem) var(--pad);
  max-width:var(--maxw);margin-inline:auto;isolation:isolate;
}
.arrive::before{
  content:'';position:absolute;inset:-2rem -1rem;z-index:-1;pointer-events:none;
  background:radial-gradient(115% 85% at 20% 45%,rgba(10,9,12,.93) 0%,rgba(10,9,12,.8) 40%,rgba(10,9,12,0) 78%);
}
@media (max-width:900px){
  .arrive{justify-content:flex-start;padding-top:20svh}
  .arrive::before{background:linear-gradient(180deg,rgba(10,9,12,.95) 0%,rgba(10,9,12,.85) 42%,rgba(10,9,12,0) 72%)}
}
.arrive__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.facts{margin:2.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem 2rem}
.facts div{display:grid;gap:.15rem}
.facts dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-lo)}
.facts dd{margin:0;font-size:1rem}
.facts a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line)}
.facts a:hover{border-color:var(--ember);color:var(--ember)}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line-2);padding:clamp(2.2rem,5vw,3.5rem) var(--pad) 6rem;
  max-width:var(--maxw);margin-inline:auto;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:baseline;
}
.foot__mark{margin:0;font-family:var(--display);font-weight:900;font-size:1.4rem;text-transform:uppercase;color:var(--fire)}
.foot__mark span{color:var(--bone);margin-left:.28em}
.foot__fine{margin:0;font-size:.82rem;color:var(--ash)}

/* ── whatsapp ─────────────────────────────────────────────────────────── */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:54px;height:54px;display:grid;place-items:center;
  background:var(--fire);color:#fff;border-radius:50%;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9);
  transition:background .3s,transform .35s var(--ease);
}
.wa:hover{background:var(--fire-hi);transform:translateY(-3px)}

/* ── entrances ────────────────────────────────────────────────────────── */
.rev{opacity:0;transition:opacity .75s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}
.rev[data-rev=up]{transform:translateY(20px)}
.rev[data-rev=left]{transform:translateX(-26px)}
.rev[data-rev=right]{transform:translateX(26px)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .btn:hover,.wa:hover{transform:none}
}

/* ── the grill coming up to heat ──────────────────────────────────────────
   A flat top is worked at about 260°C, so the loader is the plate warming and
   the readout is degrees. The plate itself glows from cold iron to working
   temperature, driven by --heat. */
.pre{
  position:fixed;inset:0;z-index:200;
  display:grid;place-content:center;justify-items:center;gap:1.5rem;
  background:var(--ink);
  transition:opacity .8s var(--ease),visibility .8s;
}
.pre.is-done{opacity:0;visibility:hidden}
.pre__plate{
  --heat:0;
  position:relative;
  width:clamp(230px,62vw,360px);aspect-ratio:9/5;
  background:
    linear-gradient(180deg,#17151a,#0d0c10);
  border:1px solid rgba(243,238,230,.1);
  overflow:hidden;
}
/* The iron itself heating: a bloom that rises from the plate as --heat climbs. */
.pre__plate::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% 118%,
    rgba(255,120,40,calc(.85 * var(--heat))) 0%,
    rgba(190,40,25,calc(.5 * var(--heat))) 38%,
    transparent 72%);
}
.pre__plate canvas{position:absolute;inset:0;width:100%;height:100%}
.pre__temp{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(3rem,10vw,4.6rem);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--bone);
}
.pre__temp i{font-style:normal;font-size:max(1rem,.4em);color:var(--ember);margin-left:.1em}
.pre__cap{margin:0;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}

/* ── the board ────────────────────────────────────────────────────────────
   A menu board, not a pricing table: name left, price right, and a leader
   running between them so the eye tracks across a long line without losing the
   row. Prices are tabular so the column stacks true. Every row is a link that
   opens WhatsApp with the order already written, which is the whole reason the
   menu is on the page rather than in a PDF. */
.board__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.2rem,2.5vw,2rem);
}
.card{
  background:linear-gradient(170deg,rgba(27,24,31,.82),rgba(10,9,12,.88));
  border:1px solid var(--line-2);
  padding:clamp(1.3rem,2.6vw,2rem);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.card__h{
  margin:0 0 1.1rem;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);line-height:1;
  text-transform:uppercase;color:var(--ember);
}
.card__sub{
  margin:-.5rem 0 1.1rem;font-size:.82rem;color:var(--ash);
  font-variant-numeric:tabular-nums;
}

.menu{list-style:none;margin:0;padding:0;display:grid}
.menu__i + .menu__i{border-top:1px solid rgba(243,238,230,.06)}
.menu__i a{
  display:flex;align-items:baseline;gap:.5rem;
  min-height:48px;padding:.7rem 0;text-decoration:none;
  transition:color .22s;
}
.menu__n{flex:0 1 auto;min-width:0;font-size:1rem;font-weight:400}
/* The leader. Drawn with a repeating dot mask rather than typed periods, so it
   never reaches a screen reader and never wraps. */
.menu__d{
  flex:1 1 auto;height:1px;min-width:1.2rem;
  background:radial-gradient(circle,rgba(243,238,230,.32) 0 1px,transparent 1px) 0 0/6px 1px repeat-x;
  transform:translateY(-.25em);
}
.menu__p{
  flex:none;font-variant-numeric:tabular-nums;font-weight:500;
  font-size:.98rem;color:var(--bone);
}
.menu__i a:hover .menu__n,.menu__i a:focus-visible .menu__n{color:var(--ember)}
.menu__i a:hover .menu__p{color:var(--ember)}

/* Their headline item, and the one the reels are about. */
.menu__i.is-hero a{
  margin:.4rem -.7rem 0;padding:.9rem .7rem;
  background:rgba(232,56,42,.13);
  border:1px solid rgba(232,56,42,.42);
}
.menu__i.is-hero .menu__n{font-weight:600}
.menu__i.is-hero a:hover{background:rgba(232,56,42,.2)}

/* Seven flavours at one price: chips, not seven repeated rows. */
.flavours{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.flavours a{
  display:inline-flex;align-items:center;min-height:40px;
  padding:.5rem .85rem;text-decoration:none;
  border:1px solid var(--line);font-size:.88rem;color:var(--ash);
  transition:border-color .22s,color .22s,background .22s;
}
.flavours a:hover,.flavours a:focus-visible{
  border-color:var(--ember);color:var(--ink);background:var(--ember);
}
.board__note{
  margin:1.6rem 0 0;font-size:.82rem;color:var(--ash);
  /* Sits on the live map like the section heads do, so it carries the same
     falloff rather than fighting the route line for legibility. */
  position:relative;isolation:isolate;width:max-content;max-width:100%;
}
.board__note::before{
  content:'';position:absolute;inset:-.7rem -1.4rem;z-index:-1;pointer-events:none;
  background:radial-gradient(100% 160% at 20% 50%,
    rgba(10,9,12,.92) 0%,rgba(10,9,12,.72) 45%,rgba(10,9,12,0) 82%);
}

/* ── open right now ───────────────────────────────────────────────────────
   Live, in Lagos time. For a place that trades until 2am this is the single
   most useful thing the page can tell someone standing outside at 1am. */
.openstate{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;
  padding:.5rem .9rem;border:1px solid var(--line);
  background:rgba(10,9,12,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);
}
.openstate i{width:7px;height:7px;border-radius:50%;background:var(--ash);flex:none}
.openstate.is-open{color:var(--bone);border-color:rgba(245,166,35,.45)}
.openstate.is-open i{background:var(--ember)}