/* ==========================================================================
   NORD Pizza & Burger — Frederikssundsvej 67, 2400 København NV
   Brand colours sampled from the shop's own signage (daylight footage).
   ========================================================================== */

/* --- 0. Fonts (self-hosted) ---------------------------------------------- */
/* Served from our own folder, not Google's CDN, so no visitor data reaches
   Google just by loading the page. Both fonts are SIL Open Font License.
   The browser only downloads a latin-ext file if that range is actually used
   (æ ø å are in the basic latin file). */
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Tokens ----------------------------------------------------------- */
/* Palette: deep green + lemon (option 4).
   Variable names are historical — --blue is the deep green, --red the burnt
   orange. Changing the values here re-skins the entire site. */
:root {
  --yellow:        #F2E14C;   /* lemon — bright blocks, CTAs            */
  --yellow-deep:   #E0CD2E;   /* lemon, pressed/hover                   */
  --yellow-soft:   #FAF4C4;   /* pale lemon — notes, tab hover          */
  --blue:          #14472F;   /* deep forest green — dark blocks        */
  --blue-deep:     #0D3020;   /* deepest green — reviews block          */
  --blue-soft:     #2A6B48;
  --red:           #C4431F;   /* burnt orange — safe for small text     */
  --red-deep:      #A5360F;   /* pressed/hover                          */
  --red-bright:    #E4572E;   /* brighter orange, large display only    */
  --cream:         #FDFBF0;
  --ink:           #1A2B22;   /* near-black with a green cast           */
  --white:         #FFFFFF;

  /* Semantic */
  --bg:            var(--cream);
  --fg:            var(--ink);
  --muted:         #55645B;
  --border:        rgba(26, 43, 34, .15);
  --focus:         var(--blue);

  /* Spacing — 4pt rhythm, density 4/10 (standard) */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Section rhythm */
  --block-y: clamp(56px, 8vw, 112px);
  --gutter:  clamp(16px, 5vw, 56px);
  --maxw:    1240px;

  /* Radii & elevation */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --e-1: 0 2px 6px rgba(12,32,22,.08);
  --e-2: 0 8px 22px rgba(12,32,22,.13);
  --e-3: 0 18px 48px rgba(12,32,22,.20);

  /* Motion */
  --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  /* Layers */
  --z-base: 0; --z-raise: 10; --z-nav: 40; --z-overlay: 100; --z-modal: 1000;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On every dark surface the green ring disappears (measured 1.05–1.4:1), so
   switch to lemon. The nav carries .on-dark while it floats over the hero. */
:where(.on-dark, .drawer, .lightbox, .poster-cta) :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--yellow);
}
/* The call bar is edge-to-edge, so an outer ring would fall off-screen or onto
   the neighbouring button — draw it inside instead, in a colour each face can carry. */
.callbar a:focus-visible { outline-offset: -6px; }
.callbar a:first-child:focus-visible { outline-color: #fff; }
.callbar a:last-child:focus-visible  { outline-color: var(--ink); }

::selection { background: var(--yellow); color: var(--ink); }

/* --- 3. Typography ------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 12vw, 8.5rem); }
/* Anton sets very tight — open h2/h3 up so pairs like "VI LIGGER" stay legible */
h2 { font-size: clamp(2.25rem, 6.4vw, 4.75rem); letter-spacing: .022em; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: .015em; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; max-width: 62ch; }

/* Poster voice — heavier and more condensed than body copy, for a line that
   needs to carry like signage. Sentence case, not uppercase: Anton in caps at
   this length becomes a wall. */
.lede--poster {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;              /* Anton ships a single, already-heavy weight */
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  line-height: 1.34;
  letter-spacing: .014em;
  max-width: 30ch;
}
.body-w { max-width: 68ch; }

/* The red R — straight from the logo */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 34px; height: 3px;
  background: currentColor; border-radius: 2px; flex: none;
}

/* Tabular figures for every price */
.price, .hours-table td, .deal__price { font-variant-numeric: tabular-nums; }

/* --- 4. Layout ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.block { padding-block: var(--block-y); position: relative; }
.block--yellow { background: var(--yellow); color: var(--ink); }
.block--blue   { background: var(--blue);  color: var(--white); }
.block--deep   { background: var(--blue-deep); color: var(--white); }
.block--cream  { background: var(--cream); color: var(--ink); }
.block--white  { background: var(--white); color: var(--ink); }

.head { margin-bottom: var(--s-7); max-width: 24ch; }
.head .eyebrow { margin-bottom: var(--s-4); }
.head--wide { max-width: 34ch; }

.two-col {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); }
  .two-col--wide-left { grid-template-columns: 1.15fr .85fr; }
}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: .98rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--red    { background: var(--red);  color: #fff; box-shadow: var(--e-2); }
.btn--red:hover { background: var(--red-deep); }
.btn--yellow { background: var(--yellow); color: var(--ink); box-shadow: var(--e-2); }
.btn--yellow:hover { background: var(--yellow-deep); }
.btn--blue   { background: var(--blue); color: #fff; box-shadow: var(--e-2); }
.btn--blue:hover { background: var(--blue-deep); }
.btn--ghost  { border: 2.5px solid currentColor; }
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover span, .btn--ghost:hover svg { color: var(--blue); }
.on-dark .btn--ghost:hover span, .on-dark .btn--ghost:hover svg { color: var(--blue); }

/* --- 6. Nav -------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-block: var(--s-3);
  transition: background-color var(--t-slow) var(--ease),
              box-shadow var(--t-slow) var(--ease),
              padding var(--t-slow) var(--ease);
}
.nav__inner { display: flex; align-items: center; gap: var(--s-5); }
.nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.nav__logo picture { display: block; flex: none; }
/* .nav__mark = the round badge (real logo image in the nav, drawn one in the footer) */
.nav__mark { display: block; width: 46px; height: 46px; flex: none; transition: transform var(--t-base) var(--ease-back); }
.nav__logo:hover .nav__mark { transform: rotate(-7deg) scale(1.06); }
/* Traced wordmark: currentColor drives the black/white parts, the R stays red */
.nav__wordmark {
  display: block; height: 34px; width: auto; flex: none; color: #fff;
  transition: color var(--t-slow) var(--ease);
}
.nav__links { display: none; margin-left: auto; gap: var(--s-5); align-items: center; }
.nav__links a {
  text-decoration: none; font-weight: 600; font-size: .95rem; color: #fff;
  position: relative; padding-block: 6px;
  transition: color var(--t-base) var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2.5px; background: var(--yellow);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after {
  transform: scaleX(1); transform-origin: left;
}
.nav__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
#navCall { display: none; min-height: 44px; padding: 10px 20px; font-size: .9rem; }
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__actions { margin-left: 0; }
  #navCall { display: inline-flex; }
}

/* Scrolled state */
.nav.is-stuck {
  background: var(--cream);
  box-shadow: var(--e-2);
}
.nav.is-stuck .nav__wordmark { color: #010101; }   /* the menu's own black */
.nav.is-stuck .nav__links a { color: var(--ink); }
.nav.is-stuck .lang__btn { color: var(--ink); border-color: var(--border); }
.nav.is-stuck .burger span { background: var(--ink); }

/* Language toggle */
.lang { display: flex; border: 2px solid rgba(255,255,255,.45); border-radius: var(--r-pill); }
.nav.is-stuck .lang { border-color: var(--border); }
.lang__btn {
  padding: 7px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  color: #fff; min-height: 44px; min-width: 44px;           /* 44px touch target */
  border-radius: var(--r-pill);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.lang__btn[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }

/* Burger */
.burger { display: grid; place-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 8px; }

/* Very narrow phones (≤374px): the badge already says NORD, so drop the
   duplicate wordmark to stop the menu button being pushed off-screen. */
@media (max-width: 420px) {
  .nav__inner { gap: var(--s-3); }
  .nav__wordmark { height: 28px; }
}
@media (max-width: 374px) {
  .nav .nav__wordmark { display: none; }
  .lang__btn { padding: 7px 10px; }
}
.burger span {
  display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease),
              background-color var(--t-slow) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--blue);
  display: grid; align-content: center; justify-items: center; gap: var(--s-5);
  padding: var(--s-8) var(--gutter);
  opacity: 0; visibility: hidden;
  /* On close, stay visible until the fade ends; on open, become visible at once.
     A transitioning visibility reads as "hidden" on its first frame, which made
     focus() into the dialog silently fail. */
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.drawer.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear 0s;
}
/* :not(.btn) — otherwise the phone button inherits white text on a lemon
   background (measured 1.34:1) and turns invisible on hover */
.drawer a:not(.btn) {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3rem); color: #fff; text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.drawer a:not(.btn):hover { color: var(--yellow); }
.drawer .btn { margin-top: var(--s-4); }
.drawer__close { position: absolute; top: 18px; right: var(--gutter); padding: 14px; }
.drawer__close svg { width: 30px; height: 30px; stroke: #fff; }

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  padding: calc(var(--s-9) + 20px) var(--gutter) var(--s-8);
}
/* Deep green underneath so there is no white flash before the poster paints */
.hero__media { position: absolute; inset: 0; z-index: -3; background: var(--blue-deep); }
.hero__media video, .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(1.12) contrast(1.04);
}
/* Light overlay so the street and shop are clearly visible. It is only heavy
   in the top band (behind the nav) and the bottom edge (into the marquee).
   Readability of the hero text no longer comes from darkening the whole
   video: the small text sits on its own frosted backgrounds (eyebrow chip,
   info card, button fill) and the wordmark gets a soft local backdrop. */
.hero__tint {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg,
      rgba(6,26,16,.80) 0%,           /* nav band: measured 3.3:1 at .70/.52 — too light */
      rgba(6,26,16,.62) 10%,
      rgba(6,26,16,.16) 26%,
      rgba(6,26,16,.14) 55%,
      rgba(6,26,16,.30) 78%,
      rgba(6,26,16,.78) 100%);
}
/* Just a whisper of brand hue. mix-blend-mode:color keeps the video's
   brightness — it tints, it doesn't darken. */
.hero__wash {
  position: absolute; inset: 0; z-index: -2;
  background: var(--blue); mix-blend-mode: color; opacity: .06;
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow diagonal light sweep — one pass every 7.5s, no strobe (WCAG 2.3.1 safe) */
.hero__sweep {
  position: absolute; inset: -40% -30%; z-index: -1; pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(104deg,
    transparent 36%,
    rgba(255,240,180,.16) 45%,
    rgba(255,255,255,.30) 50%,
    rgba(255,240,180,.16) 55%,
    transparent 64%);
  transform: translateX(-125%);
  animation: sweep 7.5s var(--ease) infinite;
}
@keyframes sweep {
  0%, 70% { transform: translateX(-125%); }
  100%    { transform: translateX(125%); }
}

/* Drifting bokeh specks — two parallax layers */
.hero__bokeh {
  position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  mix-blend-mode: screen; opacity: .6;
  background-image:
    radial-gradient(circle 5px  at 14% 26%, rgba(242,225,76,.58), transparent 62%),
    radial-gradient(circle 3px  at 31% 71%, rgba(255,255,255,.45), transparent 62%),
    radial-gradient(circle 7px  at 77% 33%, rgba(242,225,76,.38), transparent 62%),
    radial-gradient(circle 4px  at 63% 82%, rgba(255,255,255,.38), transparent 62%),
    radial-gradient(circle 6px  at 89% 61%, rgba(250,244,196,.44), transparent 62%);
  animation: drift 13s ease-in-out infinite alternate;
}
.hero__bokeh::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 3px at 22% 48%, rgba(255,255,255,.4), transparent 62%),
    radial-gradient(circle 5px at 54% 18%, rgba(242,225,76,.42), transparent 62%),
    radial-gradient(circle 4px at 92% 88%, rgba(255,255,255,.34), transparent 62%);
  animation: drift2 19s ease-in-out infinite alternate;
}
@keyframes drift  { from { transform: translate3d(0,0,0);      } to { transform: translate3d(14px,-36px,0); } }
@keyframes drift2 { from { transform: translate3d(0,0,0);      } to { transform: translate3d(-18px,26px,0); } }

.hero__inner { position: relative; display: grid; justify-items: center; gap: var(--s-5); max-width: 980px; }

/* Address chip — its own dark frosted background, so it stays readable on any frame */
.hero__eyebrow {
  color: var(--yellow);
  padding: 9px 16px; border-radius: var(--r-md);   /* not a pill: it wraps to two lines on phones */
  text-align: center; justify-content: center;
  background: rgba(6,26,16,.64);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__eyebrow::before { display: none; }

/* The real NORD wordmark (traced from the menu): white, R red */
.hero__title { position: relative; width: min(760px, 86vw); color: #fff; }
/* Soft-edged panel of shade behind the letters only — the rest of the video
   stays bright. A blurred rectangle, not an oval: an oval faded out right at
   the corners where the N's serif and the dashes sit (measured 1.8:1 there). */
.hero__title::before {
  content: ""; position: absolute; inset: -12% -9%; z-index: -1; pointer-events: none;
  background: rgba(6,26,16,.56);
  border-radius: 40px;
  filter: blur(clamp(14px, 2.4vw, 30px));
}
.hero__wordmark {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 4px 22px rgba(5,24,14,.55)) drop-shadow(0 0 26px rgba(242,225,76,.10));
  animation: glowPulse 2.8s var(--ease) infinite;
}
/* Wordmark breathe — 2.8s, no flashing */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 4px 22px rgba(5,24,14,.55)) drop-shadow(0 0 26px rgba(242,225,76,.10)); }
  50%      { filter: drop-shadow(0 4px 22px rgba(5,24,14,.55)) drop-shadow(0 0 46px rgba(242,225,76,.34)); }
}

/* Open/closed + today's hours in one frosted card */
.hero__info {
  display: grid; justify-items: center; gap: 4px;
  padding: 10px 20px 12px; border-radius: var(--r-lg);
  background: rgba(6,26,16,.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero__info .status { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero__meta { font-size: clamp(.98rem, 2vw, 1.12rem); font-weight: 500; }
.hero__meta strong { font-weight: 700; }

/* Outline button gets a dark fill over the brighter video */
.hero .btn--ghost {
  background: rgba(6,26,16,.52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .btn--ghost:hover { background: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-3); }

/* Open / closed pill */
.status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px; border-radius: var(--r-pill);
  /* Dark, not light — a translucent white pill sat on bright footage was
     the worst-contrast element on the page. */
  background: rgba(6,26,16,.58);
  border: 1.5px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(10px);   /* Safari ≤17 */
  backdrop-filter: blur(10px);
  font-size: .9rem; font-weight: 600;
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; flex: none; }
.status__dot::after {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: inherit; animation: pulse 2.2s var(--ease) infinite;
}
.status.is-closed .status__dot { background: #F87171; }
@keyframes pulse { 0% { transform: scale(1); opacity: .85; } 70%,100% { transform: scale(2.6); opacity: 0; } }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; translate: -50% 0;
  display: grid; justify-items: center; gap: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.scroll-cue svg { width: 17px; height: 17px; animation: bob 1.9s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Phones held sideways: the hero is taller than the screen and the cue
   landed on top of the call button */
@media (max-height: 540px) { .scroll-cue { display: none; } }

/* Pause-motion control (WCAG 2.2.2): background video, light sweep, bokeh,
   glow and marquee all loop forever, so visitors need a way to stop them. */
.motion-toggle {
  position: absolute; right: var(--gutter); bottom: 22px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill);
  background: rgba(6,26,16,.58); color: #fff;
  border: 1.5px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .8rem; font-weight: 700;
  transition: background-color var(--t-base) var(--ease);
}
.motion-toggle:hover { background: rgba(6,26,16,.82); }
.motion-toggle svg { width: 16px; height: 16px; flex: none; }
.motion-toggle .i-play { display: none; }
.motion-toggle.is-paused .i-play  { display: block; }
.motion-toggle.is-paused .i-pause { display: none; }
@media (max-width: 600px) {
  .motion-toggle { bottom: 14px; padding: 8px 12px; }
  .motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

html.motion-paused .hero__sweep,
html.motion-paused .hero__bokeh,
html.motion-paused .hero__bokeh::after,
html.motion-paused .hero__wordmark,
html.motion-paused .status__dot::after,
html.motion-paused .scroll-cue svg,
html.motion-paused .marquee__track { animation-play-state: paused !important; }

/* --- 8. Marquee ---------------------------------------------------------- */
.marquee {
  background: var(--red); color: #fff; overflow: hidden;
  padding-block: 13px; border-block: 4px solid var(--ink);
}
.marquee__track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.marquee__track > span {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .1em; padding-inline: var(--s-5);
  display: inline-flex; align-items: center; gap: var(--s-5); white-space: nowrap;
}
.marquee__track > span::after { content: "★"; color: var(--yellow); font-size: .85em; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --- 9. Frokost deals ---------------------------------------------------- */
.deals { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .deals { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }

.deal {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
  display: grid; gap: var(--s-2); align-content: start;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.deal:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.deal__name { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.25rem; }
.deal__nums { font-size: .82rem; font-weight: 700; color: var(--blue); letter-spacing: .03em; }
.deal__items { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.deal__price {
  font-family: 'Anton', sans-serif; font-size: 2.4rem; color: var(--red);
  margin-top: var(--s-2);
}
.deal__incl {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.deal__incl svg { width: 14px; height: 14px; flex: none; color: var(--red); }

.quote {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: clamp(1.1rem, 3.2vw, 2rem); line-height: 1.15;
  text-align: center; margin-top: var(--s-7);
  color: var(--blue);
}

/* --- 10. Menu ------------------------------------------------------------ */
.tabs {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.tab {
  padding: 11px 20px; min-height: 46px;
  border-radius: var(--r-pill);
  border: 2.5px solid var(--ink);
  font-weight: 700; font-size: .9rem;
  background: transparent; color: var(--ink);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tab:hover { transform: translateY(-2px); background: var(--yellow-soft); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--yellow); }

.menu-grid { display: grid; gap: var(--s-5) var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 820px) { .menu-grid { grid-template-columns: 1fr 1fr; } }

.item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 2px dotted var(--border);
  align-items: baseline;
}
.item__no {
  font-family: 'Anton', sans-serif; font-size: 1rem;
  color: var(--red); min-width: 1.9em;
}
.item__name { font-weight: 700; font-size: 1.04rem; line-height: 1.3; }
.item__desc { font-size: .87rem; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.item__price { font-family: 'Anton', sans-serif; font-size: 1.12rem; white-space: nowrap; text-align: right; }
.item__price em { font-style: normal; color: var(--muted); font-size: .8em; }
/* Real element, not ::after — a CSS "V" is read aloud as just "V". The badge is
   aria-hidden and a visually-hidden "(uden kød)" carries the meaning instead. */
.item__v {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; margin-left: 7px; vertical-align: 1px;
  background: #16803D; color: #fff; border-radius: 4px;
  font-size: .6rem; font-weight: 800; font-family: 'Inter', sans-serif;
}

.menu-key {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: var(--s-5);
}
.menu-key:empty { display: none; }
.menu-key__v {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 4px;
  background: #16803D; color: #fff; border-radius: 4px;
  font-size: .6rem; font-weight: 800; vertical-align: 1px;
}
.note {
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  background: var(--yellow-soft); border-left: 5px solid var(--yellow-deep);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .89rem; line-height: 1.55;
}
.note strong { font-weight: 700; }

.poster-cta {
  margin-top: var(--s-7);
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  justify-content: space-between;
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--ink); color: #fff;
}
.poster-cta p { font-size: .95rem; max-width: 46ch; }

/* --- 11. Gallery --------------------------------------------------------- */
.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) {
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--s-4); }
  .gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery figure:nth-child(4) { grid-column: span 2; }
}
.gallery figure {
  margin: 0; overflow: hidden; border-radius: var(--r-md);
  background: var(--blue-deep); position: relative;
  aspect-ratio: 1; /* overridden on desktop by grid-auto-rows */
}
@media (min-width: 780px) { .gallery figure { aspect-ratio: auto; height: 100%; } }
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.gallery figure:hover img { transform: scale(1.06); }

/* --- 12. Reviews --------------------------------------------------------- */
.rating { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.rating__score { font-family: 'Anton', sans-serif; font-size: clamp(4.5rem, 14vw, 9rem); line-height: .85; color: var(--yellow); }
.stars { display: flex; gap: 5px; }
.stars svg { width: 30px; height: 30px; color: var(--yellow); }
/* (No per-review cards: we show the 5,0 aggregate and link to Google rather
    than reproducing individual reviews we don't have permission to republish.) */

/* --- 13. Find us --------------------------------------------------------- */
.find { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 980px) { .find { grid-template-columns: 1.05fr .95fr; gap: var(--s-7); align-items: start; } }

.map-card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-3); background: #e8e4da; }
.map-card iframe { width: 100%; height: 340px; border: 0; display: block; }
@media (min-width: 980px) { .map-card iframe { height: 420px; } }

/* Tap-to-load map: nothing is requested from Google until the visitor asks */
.map-consent {
  min-height: 340px; padding: var(--s-6) var(--s-5);
  display: grid; place-content: center; justify-items: center; gap: var(--s-4); text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(20,71,47,.05) 0 14px, transparent 14px 28px),
    #ECE8DC;
  color: var(--ink);
}
@media (min-width: 980px) { .map-consent { min-height: 420px; } }
.map-consent__pin {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--yellow); display: grid; place-items: center; box-shadow: var(--e-2);
}
.map-consent__pin svg { width: 30px; height: 30px; }
.map-consent__addr { font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.map-consent__note { font-size: .8rem; color: var(--muted); max-width: 34ch; }

.shopfront { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-3); margin-top: var(--s-4); }
.shopfront img { width: 100%; }
.shopfront figcaption {
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4);
  font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: 9px;
}
.shopfront figcaption svg { width: 16px; height: 16px; color: var(--yellow); flex: none; }

.info-list { display: grid; gap: var(--s-4); }
.info {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start; padding-bottom: var(--s-4);
  border-bottom: 1.5px solid var(--border);
}
.info__ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: grid; place-items: center; flex: none;
}
.info__ico svg { width: 21px; height: 21px; }

/* About-section feature list. Every icon sits centred in the same 72px column,
   so the three text lines start at the same x even though the halal seal is
   larger than the round yellow icons. */
.features { list-style: none; padding: 0; display: grid; gap: 18px; margin-top: var(--s-6); }
.features li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.features .info__ico { width: 40px; height: 40px; justify-self: center; }
.features__detail { opacity: .85; font-size: .94rem; }
.halal-seal { width: 72px; height: 72px; justify-self: center; }
.info dt { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.info dd { margin: 3px 0 0; font-size: 1.06rem; font-weight: 600; }
.info dd a { text-decoration: none; }
.info dd a:hover { color: var(--red); text-decoration: underline; }

.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); }
.hours-table th, .hours-table td {
  padding: 9px 0; font-size: .96rem; border-bottom: 1px solid var(--border);
  text-align: left; font-weight: 500;
}
.hours-table td { text-align: right; font-weight: 600; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--red); font-weight: 800; }
.hours-table .today-dot { margin-left: 7px; }

/* --- 14. Footer ---------------------------------------------------------- */
.footer { background: var(--ink); color: #fff; padding-block: var(--s-8) var(--s-5); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 820px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }
/* Footer logo: real badge + traced wordmark, a size up from the top bar */
.footer__logo { margin-bottom: 18px; width: fit-content; }   /* link hugs the logo, not the whole column */
.footer__logo .nav__mark { width: 56px; height: 56px; }
.footer__wordmark { display: block; height: 42px; width: auto; flex: none; color: #fff; }
.footer .footer__h {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.2; letter-spacing: .06em; margin-bottom: var(--s-4); color: var(--yellow);
}
.footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.footer a:hover { color: var(--yellow); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-size: .94rem; }
/* Day range and hours in two real columns — replaces   spacing that
   never lined up */
.footer-hours li { display: grid; grid-template-columns: 5.2em 1fr; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.socials { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.socials a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255,255,255,.28);
  font-size: .87rem; font-weight: 600; text-decoration: none;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.socials a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; flex: none; }
.footer__base {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.6);
}

/* Sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  /* visibility, not just transform: off-screen links must not be reachable by
     Tab. It flips to hidden only after the slide-out has finished. */
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.callbar.is-shown {
  transform: translateY(0); visibility: visible;
  transition: transform var(--t-slow) var(--ease), visibility 0s linear 0s;
}
.callbar a {
  padding: 15px 10px; text-align: center; text-decoration: none;
  font-weight: 700; font-size: .92rem; min-height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.callbar a svg { width: 17px; height: 17px; }
.callbar a:first-child { background: var(--red); color: #fff; }
.callbar a:last-child { background: var(--yellow); color: var(--ink); }
@media (min-width: 1000px) { .callbar { display: none; } }
/* Leave room under the footer so the call bar can't cover the last line */
@media (max-width: 999px) {
  .footer { padding-bottom: calc(var(--s-5) + 56px + env(safe-area-inset-bottom)); }
}

/* --- 15. Lightbox -------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(6, 26, 16, .95);
  display: grid; place-items: center; padding: var(--s-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);   /* see .drawer */
}
.lightbox.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear 0s;
}
.lightbox img {
  max-width: 100%; max-height: 88svh; object-fit: contain;
  border-radius: var(--r-sm); box-shadow: var(--e-3);
}
.lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
}
.lightbox__close svg { width: 26px; height: 26px; stroke: #fff; }
.lightbox__hint {
  position: absolute; bottom: 18px; left: 50%; translate: -50% 0;
  color: rgba(255,255,255,.65); font-size: .8rem;
}

/* --- 16. Scroll reveal --------------------------------------------------- */
/* Scoped to html.js (set by a one-line script in <head>). Without it, any
   JavaScript failure left every section below the hero at opacity 0 —
   measured: 19 of 19 blocks invisible with scripts disabled. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px) scale(.97); }
.js .reveal-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 440ms var(--ease-back), transform 440ms var(--ease-back);
}
.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }

/* Shown only when scripts are off: the menu and hours are built by JS */
.noscript-note {
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--yellow-soft); border-left: 5px solid var(--yellow-deep);
}
.noscript-note a { font-weight: 700; }

/* --- 17. Utilities ------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -60px; left: var(--s-4); z-index: var(--z-modal);
  background: var(--yellow); color: var(--ink); padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; text-decoration: none;
  transition: top var(--t-base) var(--ease);
}
.skip:focus { top: 0; }
[hidden] { display: none !important; }

/* --- 18. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .scroll-cue svg { animation: none; }
  /* Park the light effects out of sight rather than freezing them mid-frame */
  .hero__sweep, .hero__bokeh { opacity: 0 !important; }
  .hero__wordmark { animation: none !important; filter: drop-shadow(0 4px 22px rgba(5,24,14,.55)) !important; }
  .status__dot::after { animation: none !important; opacity: 0 !important; }
}