/* ============================================================================
   HalAli's Plates & Crepes  ·  halalisrva.com
   Built to DESIGN.md. Every colour and face below is declared there.
   Ported parts, all tier 1, all zero-JS:
     Magic UI  dot-pattern       -> .grain
     Cult UI   texture-card      -> .panel  (5 nested divs -> 4 inset rings)
     SmoothUI  clip-corners-btn  -> --cp chamfer, shared site-wide
     Aceternity focus-cards      -> .focusgrid  (:has sibling recede)
   ========================================================================= */

/* ---- fonts: two variable files, latin, self-hosted --------------------- */
@font-face{
  font-family:'Big Shoulders Display';
  src:url('/fonts/bigshoulders-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---- tokens ------------------------------------------------------------ */
:root{
  /* sampled from the client's own logo and boards, see DESIGN.md */
  --ground:#0B0908;
  --panel:#151110;
  --panel-hi:#1C1614;
  --cream:#F5F1E9;
  --ash:#B0A69B;
  --lemon:#F3D558;
  --gold:#ECA62C;
  --flame:#C2532B;
  --ember:#BD402A;
  --flame-deep:#6B2811;
  --leaf:#2B6037;        /* ORNAMENT ONLY, 2.7:1, never text */
  --leaf-lift:#5FB275;

  --display:'Big Shoulders Display','Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;

  --rail:26px;
  --chamfer:12px;
  --edge:clamp(18px,5vw,64px);
  --measure:min(1180px,100%);

  --quick:120ms; --std:240ms; --slow:420ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* Magic UI dot-pattern, ported: two offset radial tiles = board grain */
  --grain:
    radial-gradient(circle at 1px 1px, rgba(236,166,44,.10) 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(245,241,233,.045) 1px, transparent 1.6px);
  --grain-size:22px 22px, 37px 37px;
  --grain-pos:0 0, 11px 14px;

  /* SmoothUI clip-corners, ported: one chamfer path used everywhere */
  --cp:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--cream);
  font:400 17px/1.65 var(--body);
  overflow-x:hidden;
  padding-inline:var(--rail);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--lemon)}
:focus-visible{outline:3px solid var(--lemon);outline-offset:3px;border-radius:2px}
::selection{background:var(--flame);color:var(--cream)}

/* =========================================================================
   SIGNATURE: the board rail. Fixed down both viewport edges for the whole
   scroll, carrying the boards' notch-and-tick vocabulary. Land of Fire's
   woven selvedge, rebuilt in HalAli's own language.
   ====================================================================== */
.rail{
  position:fixed; top:0; bottom:0; width:var(--rail);
  z-index:60; pointer-events:none; opacity:.92;
  background:
    linear-gradient(var(--gold),var(--gold)) no-repeat,
    linear-gradient(rgba(236,166,44,.32),rgba(236,166,44,.32)) no-repeat,
    linear-gradient(180deg,rgba(245,241,233,.05),rgba(245,241,233,0));
  background-size:1px 100%, 1px 100%, 100% 100%;
}
.rail--l{left:0;  background-position:calc(var(--rail) - 1px) 0, calc(var(--rail) - 6px) 0, 0 0}
.rail--r{right:0; background-position:0 0, 5px 0, 0 0}
.rail::after{                       /* chamfer notches down the board frame */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ground) 0 9px, transparent 9px) repeat-y;
  background-size:100% 132px;
}

/* =========================================================================
   PORT: Magic UI dot-pattern -> board grain. No bare ground anywhere.
   ====================================================================== */
.grain{
  background-image:var(--grain);
  background-size:var(--grain-size);
  background-position:var(--grain-pos);
}

/* =========================================================================
   PORT: Cult UI texture-card. Their five nested bordered divs, collapsed
   into one element with four inset rings, in our gold.
   ====================================================================== */
.panel{
  position:relative;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  box-shadow:
    inset 0 0 0 1px rgba(236,166,44,.44),
    inset 0 0 0 2px rgba(11,9,8,.92),
    inset 0 0 0 3px rgba(236,166,44,.20),
    inset 0 0 0 4px rgba(245,241,233,.055);
  clip-path:var(--cp);
  padding:clamp(20px,3.4vw,38px);
}
.panel--flame{
  background:linear-gradient(180deg,var(--flame),var(--flame-deep));
  box-shadow:
    inset 0 0 0 1px rgba(243,213,88,.55),
    inset 0 0 0 2px rgba(11,9,8,.55),
    inset 0 0 0 3px rgba(243,213,88,.22),
    inset 0 0 0 4px rgba(245,241,233,.07);
}
.panel--ember{
  background:linear-gradient(180deg,var(--ember),#7A2612);
  box-shadow:
    inset 0 0 0 1px rgba(243,213,88,.5),
    inset 0 0 0 2px rgba(11,9,8,.5),
    inset 0 0 0 3px rgba(243,213,88,.2),
    inset 0 0 0 4px rgba(245,241,233,.06);
}

/* =========================================================================
   PORT: SmoothUI clip-corners-button. The chamfer is on a ::before layer
   so the element itself stays unclipped and its focus outline is never cut.
   ====================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:52px; padding:14px 26px;
  font:700 15px/1 var(--body); letter-spacing:.10em; text-transform:uppercase;
  color:var(--ground); background-color:var(--gold); border:0; cursor:pointer;
  text-decoration:none; text-align:center; white-space:nowrap;
  clip-path:var(--cp);
  transition:background-color var(--std) var(--ease), color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.btn:hover{background-color:var(--lemon)}
/* clip-path clips the focus outline too, so the chamfer is dropped while
   focused. The ring is the requirement; the corner is decoration. */
.btn:focus-visible{clip-path:none;outline:3px solid var(--lemon);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn--ghost{
  color:var(--cream);
  background-color:var(--panel-hi);
  box-shadow:inset 0 0 0 1px rgba(236,166,44,.55);
}
.btn--ghost:hover{color:var(--lemon);background-color:#221A17;box-shadow:inset 0 0 0 1px var(--gold)}
.btn--wide{width:100%}

/* chip: the boards' numbered orange squares, same chamfer language */
.chip{
  --chamfer:3px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;
  font:700 14px/1 var(--body);letter-spacing:.06em;
  color:var(--cream);background:var(--flame);clip-path:var(--cp);flex:none;
}
.chip--gold{background:var(--gold);color:var(--ground)}

/* =========================================================================
   LAYOUT
   ====================================================================== */
.wrap{width:var(--measure);margin-inline:auto;padding-inline:var(--edge)}
.field{position:relative;overflow-x:clip;overflow-y:visible;padding-block:clamp(54px,7vw,104px)}
.field > .wrap{position:relative;z-index:2}

/* section titles */
.eyebrow{
  font:700 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.h2{
  font:800 clamp(36px,6.4vw,76px)/.95 var(--display);
  letter-spacing:.005em;text-transform:uppercase;color:var(--cream);
  margin:0 0 8px;
}
/* brush underline, from the boards' green-and-gold strokes */
.h2::after{
  content:'';display:block;width:min(220px,58%);height:9px;margin-top:16px;
  background:
    linear-gradient(92deg,var(--gold) 0 62%,transparent 62%) no-repeat 0 0/100% 3px,
    linear-gradient(88deg,transparent 0 12%,var(--leaf) 12% 46%,transparent 46%) no-repeat 0 6px/100% 3px;
}
.standfirst{color:var(--ash);max-width:60ch;margin:14px 0 0;font-size:17px}
.secnum{
  font:800 13px/1 var(--body);letter-spacing:.2em;color:var(--flame);
  margin:0 0 10px;
}

/* =========================================================================
   NAV
   ====================================================================== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:12px var(--edge);
  background:rgba(11,9,8,.90);
  backdrop-filter:blur(9px);
  box-shadow:0 1px 0 rgba(236,166,44,.24);
}
.nav__mark{display:flex;align-items:center;margin-right:auto}
.nav__mark img{width:112px;height:auto}
.nav__links{display:flex;align-items:center;gap:20px}
.nav__links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font:700 14px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
}
.nav__links a:hover{color:var(--lemon)}
.nav .btn{min-height:44px;padding:11px 18px;font-size:13px}

/* =========================================================================
   HERO
   ====================================================================== */
.hero{padding-block:clamp(44px,7vw,92px) clamp(30px,5vw,60px)}
.hero__grid{
  display:grid;gap:clamp(28px,5vw,56px);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .hero__grid{grid-template-columns:1.05fr .95fr} }
.hero h1{
  font:900 clamp(48px,10.5vw,104px)/.86 var(--display);
  text-transform:uppercase;letter-spacing:.004em;margin:0;color:var(--cream);
}
.hero h1 em{font-style:normal;color:var(--lemon);display:block}
.hero__sub{color:var(--ash);max-width:46ch;margin:22px 0 0;font-size:clamp(16px,2vw,19px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__hours{
  margin:16px 0 0;font:700 13px/1.5 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
/* food sits on its own: unboxed, over a glow-pool, contact + ambient shadow */
.dish{position:relative;display:block;margin-inline:auto}
.dish::before{
  content:'';position:absolute;left:50%;top:56%;translate:-50% -50%;
  width:112%;aspect-ratio:1.5;
  background:radial-gradient(closest-side, rgba(194,83,43,.55), rgba(236,166,44,.18) 52%, transparent 78%);
  z-index:-1;
}
.dish img{
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.72)) drop-shadow(0 24px 34px rgba(0,0,0,.55));
}

/* =========================================================================
   SEAM: fields are separated by a brush band, and a dish is centred ON it
   so the boundary is crossed rather than drawn. (Land of Fire's rule.)
   ====================================================================== */
.seam{position:relative;z-index:3}
.seam__band{
  height:clamp(44px,5.4vw,68px);
  border-top:1px solid rgba(236,166,44,.34);
  border-bottom:1px solid rgba(236,166,44,.34);
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='24' viewBox='0 0 900 24' preserveAspectRatio='none'%3E%3Cpath d='M6 13C120 6 300 4 470 7c150 3 280 7 424 3-140 8-290 10-436 7C310 14 140 12 6 13Z' fill='%23ECA62C' opacity='.85'/%3E%3C/svg%3E") repeat-x 0 38%/900px 9px,
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='24' viewBox='0 0 900 24' preserveAspectRatio='none'%3E%3Cpath d='M120 10C220 5 360 4 520 6c-140 5-250 8-370 8-12 0-24-1-30-4Z' fill='%232B6037'/%3E%3Cpath d='M600 16c90-3 180-4 250-2-70 4-150 6-230 6-10 0-17-1-20-4Z' fill='%232B6037'/%3E%3C/svg%3E") repeat-x 180px 64%/900px 9px,
    linear-gradient(180deg,rgba(24,19,17,.96),rgba(11,9,8,.96));
}
.seam__dish{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(190px,30vw,360px);z-index:4;
}
.seam--right .seam__dish{left:auto;right:2%;translate:0 -50%}
.seam--left  .seam__dish{left:2%;translate:0 -50%}

/* =========================================================================
   BADGES
   ====================================================================== */
.badges{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){ .badges{grid-template-columns:repeat(3,1fr)} }
.badge{
  --chamfer:9px;
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
}
.badge__t{font:700 14px/1.2 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--cream)}
.badge svg{width:24px;height:24px;flex:none;color:var(--leaf-lift)}

.lede{margin-top:clamp(34px,5vw,60px);max-width:66ch}
.lede__kick{
  font:800 clamp(26px,4.4vw,44px)/1 var(--display);text-transform:uppercase;
  color:var(--flame);margin:0;
}
.lede__line{
  font:800 clamp(22px,3.4vw,34px)/1.15 var(--display);text-transform:uppercase;
  color:var(--lemon);margin:6px 0 18px;
}

/* =========================================================================
   VALUE PANELS
   ====================================================================== */
.values{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:clamp(38px,6vw,68px)}
@media (min-width:760px){ .values{grid-template-columns:1fr 1fr} }
.value__label{
  font:700 12px/1 var(--body);letter-spacing:.19em;text-transform:uppercase;margin:0 0 12px;
}
.panel--flame .value__label,.panel--ember .value__label{color:var(--lemon)}
.panel .value__label{color:var(--gold)}
.value__name{
  font:800 clamp(28px,4.6vw,44px)/.98 var(--display);text-transform:uppercase;margin:0;
  color:var(--cream);
}
.value__price{
  font:800 clamp(30px,5vw,50px)/1 var(--display);margin:10px 0 12px;color:var(--lemon);
}
.panel--flame .value__price{color:var(--lemon)}
.value__body{margin:0;color:var(--ash);font-size:16px}
.panel--flame .value__body,.panel--ember .value__body{color:rgba(245,241,233,.94)}

/* =========================================================================
   PORT: Aceternity focus-cards. Hover one, the siblings recede.
   A state change, not motion. Pointer devices only; :has()-gated.
   ====================================================================== */
.focusgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:600px){ .focusgrid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .focusgrid{grid-template-columns:repeat(3,1fr)} }
.item{
  --chamfer:9px;
  display:flex;align-items:baseline;gap:14px;
  padding:18px 20px;
  transition:opacity var(--std) var(--ease),filter var(--std) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .focusgrid:has(.item:hover) .item:not(:hover){opacity:.42;filter:blur(1.4px)}
}
.item__name{
  font:700 17px/1.25 var(--body);color:var(--cream);margin:0;flex:1;
}
/* the boards' dotted price leader */
.item__dots{
  flex:1 1 auto;min-width:14px;align-self:center;height:1px;
  background:repeating-linear-gradient(90deg,rgba(236,166,44,.55) 0 2px,transparent 2px 6px);
}
.item__price{
  font:700 17px/1.25 var(--body);color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.item:hover .item__price{color:var(--lemon)}
.addons{
  margin:22px 0 0;color:var(--ash);font-size:15px;letter-spacing:.02em;
}

/* stacked menu rows, for the wider sections */
.rows{list-style:none;margin:0;padding:0}
.rows li{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(236,166,44,.16);
}
.rows li:last-child{border-bottom:0}
.rows .item__desc{
  grid-column:1/-1;margin:6px 0 0;color:var(--ash);font-size:15px;line-height:1.55;
}

/* =========================================================================
   SWEETS FIELD
   ====================================================================== */
.sweets{position:relative;overflow-x:clip}
.sweets__inner{position:relative}
.sweets__panel{position:relative;overflow:hidden}
.sweets__tex{
  position:absolute;inset:0;z-index:0;
  background:url('/img/nutella-field.webp') center/cover no-repeat;
  opacity:.30;
}
.sweets__panel > *{position:relative;z-index:1}
.sweets__grid{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr;align-items:center}
@media (min-width:880px){ .sweets__grid{grid-template-columns:.8fr 1.2fr} }
.sweets__dish{width:min(100%,460px)}

/* =========================================================================
   VISIT — the page's job
   ====================================================================== */
.visit__grid{display:grid;gap:clamp(22px,4vw,44px);grid-template-columns:1fr}
@media (min-width:820px){ .visit__grid{grid-template-columns:1.1fr .9fr} }
.factlist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.factlist dt,.fact__k{
  font:700 12px/1 var(--body);letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  margin:0 0 6px;
}
.fact__v{
  font:800 clamp(22px,3.4vw,32px)/1.1 var(--display);text-transform:uppercase;
  color:var(--cream);margin:0;
}
.fact__v a{color:var(--cream);text-decoration:none}
.fact__v a:hover{color:var(--lemon)}
.visit__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.visit__note{margin:16px 0 0;color:var(--ash);font-size:15px}

/* =========================================================================
   CATERING CARTOUCHE
   ====================================================================== */
.cater{text-align:center}
.cater .panel{--chamfer:16px;max-width:820px;margin-inline:auto}
.cater .h2::after{margin-inline:auto}
.cater p{color:var(--ash);max-width:52ch;margin:16px auto 26px}

/* =========================================================================
   FOOTER
   ====================================================================== */
.foot{
  border-top:1px solid rgba(236,166,44,.24);
  padding-block:clamp(38px,6vw,64px);
}
.foot__grid{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:760px){ .foot__grid{grid-template-columns:1.2fr .8fr .8fr} }
.foot h3{
  font:700 12px/1 var(--body);letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;
}
.foot p,.foot li{color:var(--ash);font-size:15px;margin:0 0 6px}
.foot ul{list-style:none;margin:0;padding:0}
.foot img{width:150px;margin-bottom:14px}
.foot__thanks{
  margin-top:32px;padding-top:22px;border-top:1px solid rgba(236,166,44,.16);
  color:var(--gold);font:700 13px/1.5 var(--body);letter-spacing:.1em;text-transform:uppercase;
}

/* =========================================================================
   MENU PAGE — boards as artwork, click to zoom
   ====================================================================== */
.boards{display:grid;gap:clamp(18px,3vw,32px);grid-template-columns:1fr;margin-top:clamp(28px,4vw,48px)}
@media (min-width:820px){ .boards{grid-template-columns:1fr 1fr} }
.board{--chamfer:10px;padding:12px}
.board figure{margin:0}
.board a{display:block;position:relative;cursor:zoom-in}
.board img{width:100%;clip-path:var(--cp)}
.board figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;
  font:700 13px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
}
.board figcaption span:last-child{color:var(--ash);letter-spacing:.06em;text-transform:none;font-weight:500}

dialog.zoom{
  border:0;padding:0;max-width:96vw;max-height:96vh;width:auto;
  background:transparent;color:var(--cream);
}
dialog.zoom::backdrop{background:rgba(6,5,4,.94)}
dialog.zoom img{max-width:96vw;max-height:88vh;width:auto;height:auto;clip-path:var(--cp)}
dialog.zoom .zoom__close{
  position:absolute;top:10px;right:10px;min-height:44px;padding:10px 16px;font-size:13px;
}
.zoom__hint{
  margin:12px 0 0;text-align:center;color:var(--ash);
  font:500 13px/1 var(--body);letter-spacing:.08em;
}

.menugroup{margin-top:clamp(44px,6vw,80px)}
.menugroup:first-of-type{margin-top:clamp(30px,4vw,52px)}

/* =========================================================================
   MOTION
   The scroll-driven field reveal was removed 2026-09-09. It wrapped the hero
   image, so prove.js correctly failed `LCP motion`, and the brief asked for
   visual richness instead of animation. Nothing on this page animates on entry;
   all motion is hover and press state.
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important;
  }
}

/* =========================================================================
   RESPONSIVE: the rail thins so it never eats content width
   ====================================================================== */
@media (max-width:900px){
  :root{--rail:12px}
  .rail::after{background-size:100% 72px}
}
@media (max-width:560px){
  :root{--rail:4px;--chamfer:9px}
  body{font-size:16px}
  .rail{background-size:0 0,1px 100%,100% 100%}
  .rail::after{display:none}
  .nav{gap:12px;padding-inline:14px}
  .nav__mark img{width:88px}
  .nav__links{gap:14px}
  .nav__links a{font-size:12px;letter-spacing:.1em}
  .nav .btn{padding:11px 13px;font-size:11px;letter-spacing:.07em}
  .hero__cta .btn,.visit__cta .btn{width:100%}
  .seam__dish{width:min(62vw,230px)}
}
.skip{
  position:absolute;left:8px;top:8px;z-index:99;
  clip-path:inset(50%);pointer-events:none;
  padding:14px 20px;background:var(--lemon);color:var(--ground);
  font:700 14px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{clip-path:none;pointer-events:auto}
.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* sweets field carries no boxed dish: the crepe sits on the seam above it,
   and the nutella texture carries the field itself */
.sweets__grid--solo{grid-template-columns:1fr}
@media (min-width:880px){ .sweets__grid--solo{grid-template-columns:1fr;max-width:62ch} }
.sweets .panel--ember{padding-block:clamp(56px,8vw,96px)}

/* =========================================================================
   THE BOARD FRAME. The conceit has to land at first sight, so the hero
   field carries the boards' own nested gold rules around the whole thing.
   ====================================================================== */
.hero{position:relative}
.hero::before{
  content:'';position:absolute;z-index:1;pointer-events:none;
  inset:clamp(14px,2vw,28px) clamp(10px,2vw,26px);
  clip-path:var(--cp);
  box-shadow:
    inset 0 0 0 1px rgba(236,166,44,.40),
    inset 0 0 0 2px rgba(11,9,8,.9),
    inset 0 0 0 3px rgba(236,166,44,.15);
}
.hero > .wrap{padding-block:clamp(22px,3vw,40px)}

/* the mascot, at architectural scale and low opacity, anchored to the field's
   right edge. He is on all three of the client's boards; their ornament, not ours. */
.wrap--wm{position:relative}
.wrap--wm > *{position:relative;z-index:1}
.watermark{
  position:absolute;z-index:0!important;pointer-events:none;user-select:none;
  right:clamp(-70px,-4vw,-10px);top:52%;translate:0 -50%;
  width:clamp(300px,36vw,560px);opacity:.10;
}
@media (max-width:980px){ .watermark{display:none} }
.lede{margin-top:clamp(26px,3.4vw,44px)}

/* value panels want more presence than a flat block */
.panel--flame .value__name{color:var(--cream)}
.values .panel{display:flex;flex-direction:column;justify-content:center}

/* the plates grid rows were cramped at three columns */
.item{min-height:74px}
.item__name{font-size:16px}
@media (min-width:980px){ .focusgrid{grid-template-columns:1fr 1fr} }

/* --- corrections after reading the 1440 screenshots (2026-09-09) --------- */

/* chips read as octagons at 30px; the boards use squares */
.chip{--chamfer:2px}

/* the nav wordmark was illegible at 112px */
.nav__mark img{width:150px}
@media (max-width:560px){ .nav__mark img{width:104px} }

/* the sweets field had a dead right half: let the crepe texture fill it,
   masked so it fades into the ember rather than sitting in a box */
.sweets__tex{
  opacity:.55;
  background-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 34%,rgba(0,0,0,.55) 56%,#000 82%);
          mask-image:linear-gradient(90deg,transparent 0 34%,rgba(0,0,0,.55) 56%,#000 82%);
}
@media (max-width:880px){
  .sweets__tex{
    opacity:.30;
    -webkit-mask-image:linear-gradient(180deg,transparent 0 40%,#000 90%);
            mask-image:linear-gradient(180deg,transparent 0 40%,#000 90%);
  }
}

/* --- BUGFIX: --cp resolves var(--chamfer) where --cp is DECLARED, not where
   it is used. Declaring it on :root meant every local --chamfer override was
   silently dead. Each override has to redeclare --cp against its own value. */
.chip,
.badge,
.item,
.board,
.cater .panel{
  --cp:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.board img{
  --cp:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

/* the nav CTA wrapped to two lines at 375px */
@media (max-width:560px){
  .nav .btn{padding:11px 11px;font-size:10.5px;letter-spacing:.05em}
  .nav__links{gap:12px}
}

/* the seam dish overflowed 2px at 375. Clip x only, so the dish still bleeds
   vertically into the fields above and below, which is the whole point of it. */
.seam{overflow-x:clip;overflow-y:visible}

/* footer links were 27px tall: give every footer/inline link a real tap target */
.foot li a,.foot p a{display:inline-flex;align-items:center;min-height:44px}
.skip{min-height:44px;display:inline-flex;align-items:center}
.fact__v a{display:inline-flex;align-items:center;min-height:44px}

/* =========================================================================
   CONTRAST CORRECTIONS, 2026-09-09.
   `npx impeccable detect` composites the real painted backdrop, which colour
   arithmetic cannot, and it found five genuine WCAG failures that prove.js
   could not see. All five are fixed at the token level, not patched over.
   ====================================================================== */
:root{
  --flame-mid:#98401D;   /* flame darkened so cream body clears AA on a fill */
  --ember-mid:#95301B;   /* same, for the sweets field */
  --flame-lift:#D9714A;  /* flame raised to text-safe for small labels */
  --flame-hi:#D25C30;    /* top of the hero field, lifted so the photo layer can darken it */
  --flame-field:#B04A24; /* deep end of the hero field: still light enough for dark type */
}

/* 1. a:hover{color:var(--lemon)} outranked .btn, so the primary button's text
      went lemon on a lemon fill: 1:1, invisible, on every hover. Scoped so the
      ghost variant is not dragged along with it. */
.btn:not(.btn--ghost):hover,
.btn:not(.btn--ghost):active{color:var(--ground)}
.btn--ghost:hover,.btn--ghost:active{color:var(--lemon)}

/* 2. cream body on the full-strength flame fill was 4.1:1 */
.panel--flame{background:linear-gradient(180deg,var(--flame-mid),var(--flame-deep))}
.panel--ember{background:linear-gradient(180deg,var(--ember-mid),var(--flame-deep))}

/* 3. .panel .value__label came after the flame rule and forced gold onto
      orange at 2.2:1. Order corrected. */
.panel--flame .value__label,
.panel--ember .value__label,
.panel--flame .value__price,
.panel--ember .value__price{color:var(--lemon)}

/* 4. cream on a flame chip was 4.08:1 at 14px. The gold variant has to be
      restated here or this later rule silently repaints it too. */
.chip{background:var(--flame-mid);color:var(--cream)}
.chip--gold{background:var(--gold);color:var(--ground)}

/* 5. flame at 13px broke our own token rule (flame is large text and borders
      only). The small labels move to the lifted flame. */
.secnum,.lede__kick{color:var(--flame-lift)}

/* 6. the mobile nav CTA fell under the 11px functional-text floor */
@media (max-width:560px){ .nav .btn{font-size:11px} }

/* 7. .skip is an <a>, so the global a:hover{color:lemon} outranked it and put
      lemon text on the lemon skip-link fill. Same class of bug as the button. */
.skip,.skip:hover,.skip:focus,.skip:focus-visible{color:var(--ground)}

/* =========================================================================
   INLINE STYLES REMOVED, 2026-09-09.
   The CSP on this site is `style-src 'self'` with no 'unsafe-inline', which
   blocks the style ATTRIBUTE, not just <style> blocks. Every inline style was
   therefore silently dropped in production while working perfectly on a local
   server with no CSP. It cost the sweets panel its colour overrides and put
   gold on ember at 3.7:1. The CSP is correct and stays; the inline styles go.
   Nothing in this project may use a style attribute.
   ====================================================================== */
.u-flush{margin:0}
.u-bare{list-style:none;margin:0;padding:0}
.u-mt-lg{margin-top:32px}
.u-mt-md{margin-top:30px}
.u-mt-sm{margin-top:20px}

/* Panel context governs its own text, rather than each element carrying an
   override. This is what should have been written in the first place. */
.panel--ember .eyebrow,
.panel--flame .eyebrow,
.panel--ember .item__price,
.panel--flame .item__price{color:var(--lemon)}
.panel--ember .item__name,
.panel--flame .item__name{color:var(--cream)}
.panel--ember .item__desc,
.panel--flame .item__desc{color:rgba(245,241,233,.92)}
.panel--ember .rows li,
.panel--flame .rows li{border-bottom-color:rgba(243,213,88,.30)}
.panel--ember .h2,
.panel--flame .h2{color:var(--cream)}
.sweets__lede{color:rgba(245,241,233,.94);max-width:48ch}

/* Long-line fix: the burger descriptions ran 130 characters and the kids-meal
   note 140 inside the full-width panel. Reading copy gets a measure. */
.item__desc{max-width:66ch}
.addons{max-width:74ch}

/* the nav carries all three destinations on both pages; mark where you are */
.nav__links a[aria-current="page"]{color:var(--lemon)}
.nav__links a[aria-current="page"]::after{
  content:'';position:absolute;left:4px;right:4px;bottom:8px;height:2px;
  background:var(--lemon);
}
.nav__links a{position:relative}

/* The nav is a flex row with three links plus a CTA. Without this the logo is
   the only flexible item, so it gets crushed to a smear at 375px. */
.nav__mark,.nav__mark img{flex:none}
@media (max-width:560px){
  .nav__mark img{width:74px}
  .nav__links{gap:4px}
  .nav__links a{font-size:11px;letter-spacing:.06em;padding:0 6px;min-width:44px;justify-content:center}
  .nav .btn{padding:11px 10px;font-size:11px;letter-spacing:.04em}
  /* "Get directions" does not fit next to three links; the short label does */
  .nav .btn .btn__long{display:none}
}
.nav .btn .btn__short{display:none}
@media (max-width:560px){ .nav .btn .btn__short{display:inline} }


/* =========================================================================
   HERO v2, 2026-09-09. The photo hero was rebuilt after Maaz rejected it.
   This is the composition off the client's own plates board: a burnt-orange
   field graded from flame into flame-deep, a city skyline silhouette along the
   bottom, the headline at architectural scale, the three badges beside it, and
   real Google review proof. No food photograph. The plate cut-out moves to the
   seam below, where it is smaller and does not have to carry the page.
   ====================================================================== */
.hero{
  position:relative;
  background:
    linear-gradient(158deg,
      var(--flame-hi) 0%,
      var(--flame) 56%,
      var(--flame-field) 100%);
  overflow-x:clip;
}
.hero::after{                       /* the skyline band, their board's ornament */
  content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(74px,11vw,150px);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='140' viewBox='0 0 1000 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V98h26v42zM26 140V82h20v58zM46 140V110h34v30zM80 140V74h22v66zM102 140V102h30v38zM132 140V56h18v84zM150 140V88h26v52zM176 140V114h40v26zM216 140V70h24v70zM240 140V94h32v46zM272 140V44h16v96zM288 140V80h28v60zM316 140V106h36v34zM352 140V66h22v74zM374 140V96h30v44zM404 140V30h14v110zM418 140V84h26v56zM444 140V110h38v30zM482 140V72h24v68zM506 140V100h32v40zM538 140V52h18v88zM556 140V88h28v52zM584 140V108h36v32zM620 140V68h22v72zM642 140V96h30v44zM672 140V40h16v100zM688 140V82h26v58zM714 140V104h34v36zM748 140V76h24v64zM772 140V98h32v42zM802 140V54h18v86zM820 140V90h28v50zM848 140V110h36v30zM884 140V70h22v70zM906 140V94h30v46zM936 140V36h15v104zM951 140V80h26v60zM977 140V106h23v34zM300 140V22h20v118z M308 22l2-16 2 16zM700 140V34h18v106z M707 34l2-13 2 13z' fill='%23000000'/%3E%3C/svg%3E") repeat-x bottom center/auto 100%;
  opacity:.17;pointer-events:none;z-index:0;
}
.hero > .wrap{position:relative;z-index:2}
.hero .grain{background:none}

.hero__grid{
  display:grid;gap:clamp(26px,4vw,56px);align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:940px){ .hero__grid{grid-template-columns:1.35fr .65fr} }

/* the eyebrow gets its own dark chip: 13px gold on flame would not clear AA,
   and the board sets its small labels on dark ribbons for the same reason */
.hero__chip{
  display:inline-flex;align-items:center;
  --chamfer:4px;clip-path:var(--cp);
  background:var(--ground);color:var(--gold);
  padding:9px 14px;margin:0 0 22px;
  font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
}
.hero h1{
  font:900 clamp(46px,9.4vw,104px)/.86 var(--display);
  text-transform:uppercase;letter-spacing:.004em;margin:0;
  color:var(--ground);
}
.hero h1 em{font-style:normal;color:var(--cream);display:block}

.hero__tag{margin:26px 0 0}
.hero__tag b{
  display:block;
  font:800 clamp(24px,3.8vw,40px)/1 var(--display);text-transform:uppercase;
  color:var(--ground);
}
.hero__tag span{
  display:block;margin-top:6px;
  font:800 clamp(17px,2.4vw,24px)/1.2 var(--display);text-transform:uppercase;
  color:var(--cream);
}
.hero__hours{
  display:inline-flex;align-items:center;margin:26px 0 0;
  --chamfer:4px;clip-path:var(--cp);
  background:var(--ground);color:var(--lemon);
  padding:10px 14px;
  font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* badge stack, right column, sitting on the deep end of the gradient */
.hero__aside{display:grid;gap:12px;align-content:start}
.hero__badge{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;--chamfer:8px;clip-path:var(--cp);
  background:rgba(11,9,8,.72);
  box-shadow:inset 0 0 0 1px rgba(243,213,88,.34);
}
.hero__badge svg{width:22px;height:22px;flex:none;color:var(--lemon)}
.hero__badge span{
  font:700 13px/1.2 var(--body);letter-spacing:.11em;text-transform:uppercase;
  color:var(--cream);
}
.hero__proof{
  margin-top:6px;padding:15px 16px;--chamfer:8px;clip-path:var(--cp);
  background:rgba(11,9,8,.80);
  box-shadow:inset 0 0 0 1px rgba(243,213,88,.38);
}
.hero__stars{
  display:flex;align-items:center;gap:9px;
  font:800 21px/1 var(--display);color:var(--lemon);
}
.hero__stars svg{width:88px;height:16px;color:var(--lemon)}
.hero__proof p{
  margin:7px 0 0;font:500 13px/1.4 var(--body);color:var(--cream);
}
.hero__proof a{color:var(--cream);text-decoration-color:rgba(245,241,233,.45)}

@media (max-width:940px){
  .hero__aside{grid-template-columns:1fr;margin-top:4px}
  .hero::after{opacity:.16}
}
@media (max-width:560px){
  .hero__cta .btn{width:100%}
}

/* --cp resolves against the element that DECLARES it, so every local --chamfer
   override must redeclare it. Same bug as the chips earlier in this file. */
.hero__chip,.hero__hours,.hero__badge,.hero__proof{
  --cp:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

/* =========================================================================
   HERO v3, 2026-09-09. Centred stack, food large and breaking out of the
   field's bottom edge. Replaces the two-column v2 at Maaz's direction.
   ====================================================================== */
.hero--centred > .wrap{
  max-width:1000px;text-align:center;
  padding-bottom:0;
}
.hero--centred .hero__chip{margin-bottom:20px}
.hero--centred h1{
  font:900 clamp(42px,8.2vw,96px)/.90 var(--display);
  max-width:15ch;margin-inline:auto;
}
.hero--centred .hero__tag{margin-top:22px}
.hero--centred .hero__hours{margin-top:22px}
.hero--centred .hero__cta{justify-content:center;margin-top:18px}

/* badges become one centred row under the buttons */
.hero__badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  list-style:none;margin:30px 0 0;padding:0;
}
.hero__badges .hero__badge{padding:11px 15px}
.hero__badge--proof{gap:10px}
.hero__starsvg{width:78px;height:14px;flex:none;color:var(--lemon)}
.hero__badge--proof a{color:var(--cream);text-decoration-color:rgba(245,241,233,.5)}
.hero__badge--proof a:hover{color:var(--lemon)}

/* the plate: as wide as the field allows, breaking out of the bottom edge so
   it crosses into the section below. Same rule as a seam dish, larger. */
.hero__plate{
  position:relative;z-index:3;
  width:min(100%, 900px);
  margin:clamp(30px,4.5vw,56px) auto calc(-1 * clamp(56px,9vw,130px));
}
.hero__plate img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.55)) drop-shadow(0 30px 42px rgba(0,0,0,.45));
}
/* the field needs room under the text so the plate has somewhere to sit */
.hero--centred{padding-bottom:clamp(70px,10vw,150px)}
/* and the section after it needs clearance for the overlap */
.hero--centred + .seam{margin-top:clamp(56px,9vw,130px)}

@media (max-width:700px){
  .hero__badges{gap:8px}
  .hero__badges .hero__badge{padding:10px 12px}
  .hero__badge span{font-size:12px;letter-spacing:.08em}
  .hero__plate{width:min(112%,560px);margin-inline:-6%}
}

/* --- hero v3 corrections after reading the screenshots ------------------- */

/* `.hero__badge svg` (0,1,1) was beating `.hero__starsvg` (0,1,0) and squashing
   the five-star strip into a 22x22 box, so it rendered as a row of dots. */
.hero__badge svg.hero__starsvg{width:92px;height:17px}

/* the field opened with a large empty band above the headline */
.hero--centred{padding-top:clamp(30px,4vw,58px)}
.hero--centred > .wrap{padding-block:clamp(16px,2vw,26px) 0}
.hero--centred h1{max-width:none}

/* let the plate run larger and overlap further into the section below */
.hero__plate{width:min(100%,980px);margin-bottom:calc(-1 * clamp(64px,11vw,170px))}
.hero--centred + .seam{margin-top:clamp(64px,11vw,170px)}

/* pull the plate up so it is visible on a 900px laptop viewport, not just
   after a scroll. Measured before and after rather than eyeballed. */
.hero--centred{padding-top:clamp(18px,2.4vw,34px)}
.hero--centred .hero__chip{margin-bottom:14px}
.hero--centred h1{font-size:clamp(40px,7.4vw,84px)}
.hero--centred .hero__tag{margin-top:16px}
.hero--centred .hero__hours{margin-top:16px}
.hero--centred .hero__cta{margin-top:16px}
.hero__badges{margin-top:22px}
.hero__plate{margin-top:clamp(16px,2.2vw,30px)}
/* 1280x800 was missing the plate by 5px; trim the stack a little further */
.hero--centred{padding-top:clamp(14px,1.8vw,26px)}
.hero--centred h1{font-size:clamp(38px,6.9vw,78px)}
.hero--centred .hero__tag{margin-top:14px}
.hero__badges{margin-top:18px}
.hero__plate{margin-top:clamp(12px,1.6vw,22px)}

/* =========================================================================
   HERO v4, 2026-09-09. Maaz: text in the middle, and the full photograph as a
   background layer sitting BEHIND the skyline at low opacity.

   Layer order, back to front:
     0  the orange field            (.hero background)
     1  the full plate photograph   (.hero__photo)
     2  the skyline silhouette      (.hero::after)
     3  the text                    (.hero > .wrap)

   The photograph is dark, so laid over the field it drags the backdrop down and
   threatens the black headline. It is therefore blended rather than simply
   faded, and every text colour was re-measured against the composite.
   ====================================================================== */
.hero--centred{
  display:flex;align-items:center;
  min-height:min(88vh,900px);
  padding-block:clamp(40px,6vw,90px);
}
.hero--centred > .wrap{width:100%;margin-inline:auto}

.hero__photo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('/img/hero-bg.webp') center/cover no-repeat;
  opacity:.30;
  mix-blend-mode:soft-light;   /* keeps the field's luminance, adds the texture */
}
.hero::after{z-index:2}         /* skyline sits in front of the photograph */
.hero--centred > .wrap{position:relative;z-index:3}

/* the plate block is gone; the photograph is the image now */
.hero--centred + .seam{margin-top:0}
/* Measured sweep of base x blend x opacity: this is the only combination with
   real margin. Lower opacities buy almost nothing; darker bases fail outright.
   min contrast across h1 / BOLD FLAVOR / Real halal. = 3.46:1 against a 3.0 floor. */
.hero__photo{opacity:.24;mix-blend-mode:soft-light}

/* =========================================================================
   HERO v5, 2026-09-09. One idea, at scale.

   v4 was called gimmicky and it was: ten competing elements, six of them dark
   lozenges, a tinted photo layer and a decorative skyline that depicted
   nothing. The reference for this pass is The Halal Guys, the closest real
   comparison in the category. Their hero is brand colour edge to edge, one
   enormous piece of type, one real texture. Nothing else.

   Removed here: the tinted photograph layer, the skyline silhouette, the
   address chip, the hours chip, the three badge chips and the review chip.
   What is left is the headline, one line of fact, and one button.
   ====================================================================== */
.hero--bare{
  display:flex;align-items:center;
  min-height:min(84vh,860px);
  padding-block:clamp(48px,7vw,104px);
  background:linear-gradient(168deg,var(--flame-hi) 0%,var(--flame) 62%,var(--flame-field) 100%);
  overflow-x:clip;
}
.hero--bare::before{content:none}          /* the nested board frame goes too */
.hero--bare::after{                        /* the boards' own grain, and nothing else */
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,9,8,.16) 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(245,241,233,.10) 1px, transparent 1.6px);
  background-size:22px 22px, 37px 37px;
  background-position:0 0, 11px 14px;
}
.hero--bare > .wrap{position:relative;z-index:2;width:100%;text-align:center}

.hero--bare h1{
  font:900 clamp(50px,10.6vw,178px)/.84 var(--display);
  text-transform:uppercase;letter-spacing:-.005em;
  color:var(--ground);margin:0;
}
.hero--bare h1 em{font-style:normal;color:var(--cream);display:block}

.hero__where{
  margin:clamp(24px,3vw,38px) auto 0;
  font:700 clamp(12px,1.35vw,15px)/1.6 var(--body);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);            /* 15px dark on the field's deep end measured
                                    3.96:1 against a 4.5 floor; cream clears it */
}
.hero__go{margin-top:clamp(20px,2.4vw,30px)}
.hero--bare .btn{background-color:var(--ground);color:var(--lemon)}
.hero--bare .btn:hover{background-color:#1C1411;color:var(--lemon)}
.hero--bare .btn:focus-visible{outline-color:var(--ground)}

/* =========================================================================
   TRUST STRIP. One quiet line, under the hero, where these belong.
   ====================================================================== */
.strip{
  background:var(--ground);
  border-bottom:1px solid rgba(236,166,44,.22);
  padding-top:22px;padding-bottom:22px;
}
.strip__list{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px clamp(18px,3vw,44px);
  list-style:none;margin:0;padding:0;
}
.strip__list li{
  font:700 12px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ash);
}
.strip__proof{display:flex;align-items:center;gap:9px;color:var(--cream)!important}
.strip__proof svg{width:74px;height:14px;flex:none;color:var(--lemon)}
.strip__proof a{color:var(--cream);text-decoration-color:rgba(245,241,233,.45)}
.strip__proof a:hover{color:var(--lemon)}
@media (max-width:560px){
  .strip__list{gap:9px 18px}
  .strip__list li{font-size:11px;letter-spacing:.1em}
}

/* No small text can sit on the hero field. It is mid-tone orange, so 15px
   measures 4.32:1 in black and 4.08:1 in cream, and both miss the 4.5 floor.
   Colouring it differently does not fix that, so the address and hours moved
   into the strip, where a dark ground clears it comfortably. The hero is now
   the headline and one button, which is what the reference does. */
.strip__fact{color:var(--cream)!important}
.strip__fact + .strip__fact{margin-left:0}
/* On a phone the headline was stranded in empty orange, filling only 74% of
   the measure. Measured across sizes: 21vw puts the widest line at 88% of the
   available width without wrapping. Above that a line breaks and it drops to
   67%, so this is the ceiling, not a guess. */
@media (max-width:700px){
  .hero--bare h1{font-size:clamp(50px,21vw,110px)}
  .hero--bare{min-height:min(76vh,720px);padding-block:clamp(36px,7vw,64px)}
}
/* 320px (iPhone SE) overflowed at 21vw; 18vw clears it */
@media (max-width:359px){ .hero--bare h1{font-size:18vw} }

/* At 320px (iPhone SE) the logo, three links and the CTA do not fit: the page
   overflowed by 39px. The nav CTA drops there, because the hero carries a full
   width Get directions button and the address sits in the strip right under it. */
@media (max-width:359px){
  .nav .btn{display:none}
  .nav__mark img{width:66px}
  .nav__links{gap:6px}
}

/* =========================================================================
   HERO v6 — the boom sequence. CSS only, zero JavaScript.

   Timeline
     0.00s  orange field, empty
     0.10s  "Real meat."    slams in
     0.28s  "Real people."  slams in
     0.46s  "Real halal."   slams in
     1.15s  a circle opens from the centre, the cuisine photograph fills
     1.35s  the words hand over to the wordmark
     2.10s  rest: photograph, wordmark, one button

   The h1 keeps its text in the DOM throughout, so the accessible name and the
   SEO heading never depend on the animation finishing. The wordmark is
   decorative (alt=""), because the h1 already carries the words.
   ====================================================================== */
.hero--boom{
  position:relative;
  display:flex;align-items:center;
  min-height:min(84vh,860px);
  padding-block:clamp(48px,7vw,104px);
  background:linear-gradient(168deg,var(--flame-hi) 0%,var(--flame) 62%,var(--flame-field) 100%);
  overflow:clip;
}
.hero--boom::before{content:none}
.hero--boom::after{                       /* the boards' grain, over the field only */
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,9,8,.16) 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(245,241,233,.10) 1px, transparent 1.6px);
  background-size:22px 22px, 37px 37px;
  background-position:0 0, 11px 14px;
}
.hero--boom > .wrap{position:relative;z-index:4;width:100%;text-align:center}

/* the photograph, revealed by a circle opening from the middle */
.hero__photo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url('/img/hero-bg.webp') center/cover no-repeat;
  clip-path:circle(0% at 50% 50%);
  animation:openCircle 1000ms cubic-bezier(.2,.7,.2,1) 1150ms both;
}
@keyframes openCircle{ to{ clip-path:circle(78% at 50% 50%); } }

/* a scrim so the wordmark and button hold against the photograph */
.hero__veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(11,9,8,.30) 0%, rgba(11,9,8,.44) 52%, rgba(11,9,8,.60) 100%);
  opacity:0;
  animation:veilIn 700ms ease-out 1500ms both;
}
@keyframes veilIn{ to{ opacity:1 } }

/* --- the words ---------------------------------------------------------- */
.hero__title{position:relative;margin:0;display:grid;place-items:center}
.hero__words{
  grid-area:1/1;display:block;
  font:900 clamp(50px,10.6vw,178px)/.84 var(--display);
  text-transform:uppercase;letter-spacing:-.005em;color:var(--ground);
  animation:wordsOut 600ms cubic-bezier(.4,0,.6,1) 1350ms both;
}
.hero__words .boom{display:block;opacity:0;animation:boom 520ms cubic-bezier(.16,1.02,.3,1) both}
.hero__words .boom--3{color:var(--cream)}
.boom--1{animation-delay:100ms}
.boom--2{animation-delay:280ms}
.boom--3{animation-delay:460ms}
@keyframes boom{
  0%   {opacity:0;transform:scale(1.9)}
  55%  {opacity:1;transform:scale(.94)}
  78%  {transform:scale(1.03)}
  100% {opacity:1;transform:scale(1)}
}
@keyframes wordsOut{ to{ opacity:0;transform:scale(.72) } }

/* --- the wordmark it hands over to -------------------------------------- */
.hero__mark{
  grid-area:1/1;
  width:min(76%,560px);height:auto;
  opacity:0;transform:scale(.62);
  animation:markIn 780ms cubic-bezier(.16,1.02,.3,1) 1420ms both;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
@keyframes markIn{ to{ opacity:1;transform:scale(1) } }

.hero--boom .hero__go{
  margin-top:clamp(22px,3vw,38px);
  opacity:0;animation:goIn 520ms ease-out 1900ms both;
  background-color:var(--lemon);color:var(--ground);
}
.hero--boom .hero__go:hover{background-color:#F8E27C}
@keyframes goIn{ to{ opacity:1 } }

@media (max-width:359px){ .hero__words{font-size:18vw} }
@media (max-width:700px){
  .hero__words{font-size:clamp(50px,21vw,110px)}
  .hero--boom{min-height:min(76vh,720px);padding-block:clamp(36px,7vw,64px)}
  .hero__mark{width:min(88%,420px)}
}

/* --- reduced motion: no sequence, the resting state paints immediately --- */
@media (prefers-reduced-motion:reduce){
  /* No sequence, and no photograph either. Measured: cream over the veiled
     photograph is 2.99:1 and the lemon line 1.70:1, both under the 3:1 floor,
     because the food has bright areas the veil cannot flatten. So reduced
     motion gets the plain field, where the same words measure 4.14:1 and
     3.89:1. The wordmark is decorative, so dropping it costs nothing. */
  .hero__photo,.hero__veil,.hero__mark{display:none}
  .hero__words{opacity:1;transform:none;animation:none;color:var(--ground)}
  .hero__words .boom{opacity:1;animation:none;transform:none}
  .hero__words .boom--3{color:var(--cream)}
  .hero--boom .hero__go{opacity:1;animation:none;background-color:var(--ground);color:var(--lemon)}
}

/* v4 left .hero__photo at opacity .24 with soft-light. In v6 the photograph is
   the subject, not a texture, so it paints at full strength. */
.hero--boom .hero__photo{opacity:1;mix-blend-mode:normal}