@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  
  :root {
    --in-oklab: ;
    --in-oklch: ;
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }

  :root {
    
    --color-black: #090705;
    --color-charcoal: #14100d;
    --color-gold: #e6b800;
    --color-gold-bright: #ffdc66;
    --color-flame: #ff5500;
    --color-flame-light: #ff7733;
    --color-cream: #f8f5f0;
    --color-stone: #a39b92;

    --bg: var(--color-black);
    --surface: var(--color-charcoal);
    
    --surface-raised: color-mix(in oklab, var(--color-cream) 14%, var(--color-charcoal));

    --surface-lift: linear-gradient(
      to bottom var(--in-oklab),
      color-mix(in oklab, var(--color-cream) 7%, var(--surface)) 0,
      var(--surface) 10rem
    );

    --gold: var(--color-gold);
    --gold-bright: var(--color-gold-bright);
    --flame: var(--color-flame);
    --flame-light: var(--color-flame-light);

    --text: var(--color-cream);
    --text-muted: var(--color-stone);
    --text-heading: var(--color-cream);
    --text-brand: var(--color-gold);

    --on-accent: var(--color-black);

    --border: color-mix(in oklab, var(--gold) 20%, transparent);
    --border-strong: color-mix(in oklab, var(--gold) 30%, transparent);
    --border-subtle: color-mix(in oklab, var(--color-cream) 10%, transparent);
    --rule: color-mix(in oklab, var(--gold) 26%, transparent);

    --glow-flame: color-mix(in oklab, var(--flame) 15%, transparent);
    --glow-gold: color-mix(in oklab, var(--gold) 15%, transparent);

    --scrim: color-mix(in oklab, var(--bg) 82%, transparent);
    --selection-bg: color-mix(in oklab, var(--gold) 30%, transparent);

    --scrollbar-thumb: color-mix(in oklab, var(--gold) 60%, var(--bg));
    --scrollbar-thumb-hover: var(--gold);
    --scrollbar-track: var(--surface);

    --focus-ring-color: var(--gold-bright);
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;
    
    --focus-ring-space: calc(var(--focus-ring-width) + var(--focus-ring-offset));

    --icon-s: 1.125rem; 
    --icon-m: 1.25rem; 
    --icon-l: 1.375rem; 

    --font-display: "Bebas Neue", "Bebas Neue Fallback", Impact, "Arial Narrow", sans-serif;
    --font-ui: "Outfit", "Outfit Fallback", Arial, Helvetica, sans-serif;
    --font-body: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Arial, Helvetica, sans-serif;

    --fw-body: 400;
    --fw-body-strong: 500;
    --fw-ui: 500;
    --fw-ui-strong: 600;
    --fw-display: 400; 

    --fs-2xs: clamp(0.75rem, 0.7292rem + 0.1042vi, 0.8125rem); 
    --fs-xs: clamp(0.875rem, 0.8542rem + 0.1042vi, 0.9375rem); 
    --fs-s: clamp(0.9375rem, 0.9167rem + 0.1042vi, 1rem); 
    --fs-base: clamp(1rem, 0.9583rem + 0.2083vi, 1.125rem); 
    --fs-m: clamp(1.1875rem, 1.125rem + 0.3125vi, 1.375rem); 
    --fs-l: clamp(1.4375rem, 1.3333rem + 0.5208vi, 1.75rem); 
    --fs-xl: clamp(1.6875rem, 1.5208rem + 0.8333vi, 2.1875rem); 
    --fs-2xl: clamp(2rem, 1.75rem + 1.25vi, 2.75rem); 
    --fs-3xl: clamp(2.375rem, 2rem + 1.875vi, 3.5rem); 
    --fs-4xl: clamp(2.875rem, 2.3333rem + 2.7083vi, 4.5rem); 
    --fs-5xl: clamp(3.4375rem, 2.6667rem + 3.8542vi, 5.75rem); 

    --lh-display: 0.92;
    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-snug: 1.35; 
    --lh-prose: 1.55; 
    --lh-body: 1.65;
    --lh-ui: 1.4;

    --ls-display: 0.01em;
    --ls-ui: 0.02em;
    --ls-caps: 0.08em; 
    --ls-body: 0;

    --measure: 62ch;
    --measure-narrow: 46ch;

    --space-4xs: 0.125rem; 
    --space-3xs: 0.25rem; 
    --space-2xs: 0.5rem; 
    --space-xs: 0.75rem; 
    --space-s: 1rem; 
    --space-m: 1.5rem; 
    --space-l: 2rem; 
    --space-xl: 3rem; 
    --space-2xl: 4rem; 
    --space-3xl: 6rem; 
    --space-4xl: 7.5rem; 

    --space-2xs-fluid: clamp(0.5rem, 0.4167rem + 0.4167vi, 0.75rem); 
    --space-xs-fluid: clamp(0.75rem, 0.6667rem + 0.4167vi, 1rem); 
    --space-s-fluid: clamp(1rem, 0.8333rem + 0.8333vi, 1.5rem); 
    --space-m-fluid: clamp(1.5rem, 1.3333rem + 0.8333vi, 2rem); 
    --space-l-fluid: clamp(2rem, 1.6667rem + 1.6667vi, 3rem); 
    --space-xl-fluid: clamp(3rem, 2.6667rem + 1.6667vi, 4rem); 
    --space-2xl-fluid: clamp(4rem, 3.3333rem + 3.3333vi, 6rem); 
    --space-3xl-fluid: clamp(5rem, 4.1667rem + 4.1667vi, 7.5rem); 

    --container-max: 80rem; 
    --container-narrow: 46rem; 
    
    --gutter: clamp(1.25rem, 0.3333rem + 4.5833vi, 4rem); 
    --section-gap: var(--space-3xl-fluid); 
    --header-height: 4.5rem;
    
    --filters-height: 4.5rem;
    
    --scroll-offset: calc(var(--header-height) + var(--space-s));
    
    --scroll-offset-cat: calc(
      var(--header-height) + var(--space-2xs) + var(--filters-height) + var(--space-s)
    );

    --radius-ui: 4px;
    --radius-card: 8px;
    --radius-pill: 999px;
    --radius-round: 50%;

    --elevation-1: 0 1px 0 0 var(--border-subtle) inset;
    --elevation-2:
      0 1px 0 0 var(--border-subtle) inset,
      0 12px 32px -24px rgb(0 0 0 / 0.9);
    --elevation-glow: 0 0 40px -8px var(--glow-flame);
    --blur-header: 20px;

    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 380ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    --tap-min: 2.75rem; 
    --tap-min-fine: 2.25rem; 

    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100; 
    --z-header: 200;
    --z-overlay: 300; 
    --z-modal: 400;
    --z-toast: 500;
    --z-skip: 600; 
  }

  @media (width < 48rem) {
    :root {
      --header-height: 3.75rem; 
    }
  }

  @media (width >= 64rem) {
    :root {
      --filters-height: 6.25rem; 
    }
  }

  :root {
    --btn-primary-bg: linear-gradient(
      135deg var(--in-oklab),
      var(--flame),
      var(--flame-light)
    );
    --btn-primary-text: var(--on-accent); 
    --btn-secondary-border: var(--border-strong);
    --btn-secondary-text: var(--gold);

    --card-bg: var(--surface);
    --card-border: var(--border);
    --card-radius: var(--radius-card);
    --card-padding: var(--space-m-fluid);

    --badge-vega-fg: var(--gold); 
    --badge-vega-bg: color-mix(in oklab, var(--gold) 12%, transparent);
    --badge-spicy-fg: var(--flame-light); 
    --badge-spicy-bg: color-mix(in oklab, var(--flame) 14%, transparent);
    --badge-halal-fg: var(--gold-bright); 
    --badge-halal-bg: color-mix(in oklab, var(--gold-bright) 12%, transparent);
    --badge-todo-fg: var(--color-cream); 
    --badge-todo-bg: color-mix(in oklab, var(--color-cream) 14%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-instant: 1ms;
      --dur-fast: 1ms;
      --dur-base: 1ms;
      --dur-slow: 1ms;
    }
  }

  @media (forced-colors: active) {
    :root {
      --border: CanvasText;
      --border-strong: CanvasText;
      --border-subtle: CanvasText;
      --rule: CanvasText;
      --focus-ring-color: Highlight;
      
      --text-muted: CanvasText;
    }
  }
}

@layer base {
  @font-face {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/bebas-neue-400.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: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/outfit-500.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: "Outfit";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/outfit-600.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: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/plus-jakarta-sans-400.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: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/plus-jakarta-sans-500.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: "Bebas Neue Fallback";
    font-style: normal;
    font-weight: 400;
    src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 77.8%;
    ascent-override: 115.68%;
    descent-override: 38.56%;
    line-gap-override: 0%;
  }

  @font-face {
    font-family: "Outfit Fallback";
    font-style: normal;
    font-weight: 500;
    src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 100.34%;
    ascent-override: 99.67%;
    descent-override: 25.91%;
    line-gap-override: 0%;
  }

  @font-face {
    font-family: "Outfit Fallback";
    font-style: normal;
    font-weight: 600;
    src:
      local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"),
      local("Liberation Sans Bold");
    size-adjust: 94.23%;
    ascent-override: 106.13%;
    descent-override: 27.59%;
    line-gap-override: 0%;
  }

  @font-face {
    font-family: "Plus Jakarta Sans Fallback";
    font-style: normal;
    font-weight: 400;
    src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 106%;
    ascent-override: 97.92%;
    descent-override: 20.94%;
    line-gap-override: 0%;
  }

  @font-face {
    font-family: "Plus Jakarta Sans Fallback";
    font-style: normal;
    font-weight: 500;
    src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 107.11%;
    ascent-override: 96.91%;
    descent-override: 20.73%;
    line-gap-override: 0%;
  }
}

@layer reset {
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset) {
    margin: 0;
  }

  :where(ul[class], ol[class]) {
    padding-inline-start: 0;
    list-style: none;
  }

  :where(img, picture, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(img) {
    font-style: italic; 
    background-repeat: no-repeat;
    background-size: cover;
  }

  :where(iframe) {
    border: 0;
  }

  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  :where(button) {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  :where(a) {
    color: inherit;
    text-decoration-thickness: max(0.06em, 1px);
    text-underline-offset: 0.18em;
  }

  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--rule);
  }

  :where(fieldset) {
    padding: 0;
    border: 0;
  }

  :where(abbr[title]) {
    text-decoration: underline dotted;
    cursor: help;
  }

  :where([id]) {
    scroll-margin-block-start: var(--scroll-offset);
  }
}

@layer base {
  :root {
    
    color-scheme: dark;
    accent-color: var(--gold);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  @supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar {
      inline-size: 12px;
      block-size: 12px;
    }

    ::-webkit-scrollbar-track {
      background: var(--scrollbar-track);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: var(--radius-pill);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-thumb-hover);
    }
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    scrollbar-gutter: stable;
    scroll-padding-block-start: var(--scroll-offset);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-block-size: 100dvb;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    
    -webkit-font-smoothing: antialiased;
  }

  :where(h1, h2, h3) {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--text-heading);
    text-wrap: balance;
  }

  :where(h4, h5, h6) {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    line-height: var(--lh-heading);
    color: var(--text-heading);
    text-wrap: balance;
  }

  :where(p, blockquote, dd, figcaption) {
    text-wrap: pretty;
  }

  :where(strong, b) {
    font-weight: var(--fw-body-strong);
    color: var(--text);
  }

  :where(small) {
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  :where(time, address) {
    font-style: normal;
  }

  ::selection {
    background-color: var(--selection-bg);
    color: var(--color-cream);
  }

  :where(a, button, input, select, textarea, summary, [tabindex], [href]):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  :where(main p, main li, main dd) a {
    color: var(--gold-bright);
    text-decoration-color: color-mix(in oklab, var(--gold-bright) 45%, transparent);
    transition: color var(--dur-fast) var(--ease-out);

    &:hover {
      text-decoration-color: currentColor;
    }
  }
}

@layer utilities {
  
  .u-visually-hidden:not(:focus, :active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  [hidden]:where(:not([hidden="until-found" i])) {
    display: none;
  }

  [hidden="until-found" i] {
    content-visibility: hidden;
  }

  @media print {
    @page {
      margin: 14mm;
    }

    :root {
      color-scheme: light;

      --bg: #fff;
      --surface: #fff;
      --surface-raised: #fff;
      --text: #000;
      --text-heading: #000;
      --text-muted: #333;
      --text-brand: #000;
      --gold: #000;
      --gold-bright: #000;
      --flame: #000;
      --flame-light: #000;
      --border: #999;
      --border-strong: #555;
      --border-subtle: #ccc;
      --rule: #999;
      --glow-flame: transparent;
      --glow-gold: transparent;
      --elevation-1: none;
      --elevation-2: none;
      --elevation-glow: none;
      --surface-lift: none;
      --section-gap: 1.5rem;
      --gutter: 0;
    }

    body {
      background: #fff;
      color: #000;
      font-size: 10pt;
      line-height: 1.4;
      -webkit-font-smoothing: auto;
    }

    .db-header,
    .db-skip-link,
    .db-nav,
    .db-lang,
    .db-hero__media,
    .db-hero__actions,
    .db-usps,
    .db-menu__filters,
    .db-map,
    .db-social,
    .db-divider,
    .db-btn {
      display: none;
    }

    .db-menu-cat,
    .db-reviews__grid,
    .db-section {
      content-visibility: visible;
    }

    .db-menu-cat {
      break-inside: auto;
      border: 1px solid #999;
      background: none;
    }

    .db-menu-cat__head,
    .db-item {
      break-inside: avoid;
      break-after: auto;
      orphans: 2;
      widows: 2;
    }

    .db-menu-cat__title {
      break-after: avoid;
    }

    .db-menu-cat__list {
      display: block;
      columns: 2;
      column-gap: 1.5cm;
    }

    .db-menu-cat__list > * {
      break-inside: avoid;
      margin-block-end: 2mm;
    }

    .db-item__leader {
      border-block-end-style: dotted;
    }

    a[href^="http"]::after,
    a[href^="mailto"]::after,
    a[href^="tel"]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      word-break: break-all;
    }
  }
}

@layer layout {
  
  .db-container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .db-section {
    position: relative;
    padding-block: calc(var(--section-gap) / 2);
  }

  .db-section__head {
    display: grid;
    justify-items: center;
    gap: var(--space-s-fluid);
    margin-block-end: var(--space-xl-fluid);
    text-align: center;
  }

  .db-section__lead {
    max-inline-size: var(--measure);
  }

  .db-hero {
    container: hero / inline-size;
    position: relative;
    overflow: clip; 
    padding-block: clamp(3rem, 1.5rem + 7.5vi, 7rem);
  }

  .db-hero__inner {
    display: grid;
    gap: var(--space-xl-fluid);
    align-items: center;
  }

  @container hero (inline-size >= 56rem) {
    .db-hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: var(--space-2xl-fluid);
    }
  }

  
  .db-usps {
    padding-block-end: calc(var(--section-gap) / 2);
  }

  .db-usps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-s-fluid);
  }

  .db-menu__cats {
    display: grid;
    gap: var(--space-l-fluid);
  }

  .db-menu-cat {
    container: menu-cat / inline-size;
    
    content-visibility: auto;
    
    contain-intrinsic-size: auto none auto calc(6lh + var(--rows, 6) * 1.7lh);
  }

  .db-menu-cat__list {
    display: grid;
    gap: var(--space-2xs);
  }

  @container menu-cat (inline-size >= 46rem) {
    .db-menu-cat__list:has(> :nth-child(9)) {
      display: block;
      columns: 2;
      column-gap: var(--space-2xl);
      column-rule: 1px solid var(--border-subtle);
    }

    .db-menu-cat__list:has(> :nth-child(9)) > * {
      break-inside: avoid;
      margin-block-end: var(--space-2xs);
    }
  }

  
  .db-reviews__grid {
    columns: 20rem;
    column-gap: var(--space-xl-fluid);
    
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 40lh;
  }

  .db-reviews__grid > * {
    break-inside: avoid;
    margin-block-end: var(--space-l-fluid);
  }

  .db-locatie {
    container: locatie / inline-size;
  }

  .db-locatie__grid {
    display: grid;
    gap: var(--space-xl-fluid);
    align-items: start;
  }

  @container locatie (inline-size >= 52rem) {
    .db-locatie__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
  }

  .db-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-xl-fluid) var(--space-l-fluid);
  }

  .db-footer__col {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
  }
}



@layer components {
  

  
  .db-skip-link {
    position: fixed;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    z-index: var(--z-skip);
    padding: var(--space-2xs) var(--space-s);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-ui);
    background-color: var(--surface-raised);
    color: var(--text);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-s);
    text-decoration: none;
    translate: 0 calc(-100% - var(--space-l));
    transition: translate var(--dur-base) var(--ease-out);

    
    &:focus,
    &:focus-visible {
      translate: 0;
    }
  }

  
  .db-divider {
    display: grid;
    place-items: center;
    block-size: 1.5rem;
    margin-block: 0;

    &::before,
    &::after {
      content: "";
      grid-area: 1 / 1;
      pointer-events: none;
    }

    
    &::before {
      inline-size: min(64%, 30rem);
      block-size: 1px;
      background-image: linear-gradient(
        to right var(--in-oklab),
        transparent,
        var(--rule) 12%,
        color-mix(in oklab, var(--gold) 42%, transparent) 50%,
        var(--rule) 88%,
        transparent
      );
    }

    
    &::after {
      inline-size: min(80%, 34rem);
      block-size: 100%;
      background-image: radial-gradient(
        50% 30% at 50% 50%,
        var(--glow-gold),
        transparent 72%
      );
    }
  }

  
  @media (forced-colors: active) {
    .db-divider::before {
      background-image: none;
      background-color: CanvasText;
    }

    .db-divider::after {
      display: none;
    }
  }

  
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .db-divider:empty {
        animation-name: db-rise-in;
      }
    }
  }

  
  .db-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--scrim);
    border-block-end: 1px solid var(--border);

    
    transition:
      translate var(--dur-base) var(--ease-out),
      opacity var(--dur-base) var(--ease-out);

    
    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(var(--blur-header)) saturate(1.4);
    }
  }

  
  :root.js[data-header-hidden] .db-header:not(:focus-within) {
    translate: 0 -100%;
    opacity: 0;
    pointer-events: none;
  }

  
  @media (prefers-reduced-motion: reduce) {
    :root.js[data-header-hidden] .db-header:not(:focus-within) {
      translate: none;
    }
  }

  
  .db-header__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: var(--header-height);
    
    padding-block: 0;
  }

  .db-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    flex: 0 0 auto;
    text-decoration: none;
    border-radius: var(--radius-ui);

    & :where(img, svg) {
      inline-size: auto;
      block-size: clamp(2rem, 1.75rem + 1.25vi, 2.75rem);
      filter: drop-shadow(0 0 18px var(--glow-gold));
    }
  }

  
  .db-header__end {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  
  .db-nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-xs), 0.3333rem + 2.0833vi, var(--space-l));
    flex: 1 1 auto;
    min-inline-size: 0;
    
    padding-block: var(--focus-ring-space);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--space-s),
      #000 calc(100% - var(--space-s)),
      transparent 100%
    );
  }

  @media (width >= 64rem) {
    .db-nav {
      overflow-x: visible;
      mask-image: none;
    }
  }

  
  @media (width < 64rem) {
    :root:is(.js) .db-nav {
      display: none;
    }
  }


  
  @media (width < 26rem) {
    .db-header__inner {
      gap: var(--space-2xs);
    }

    .db-lang__link {
      min-inline-size: 2.25rem;
      padding-inline: var(--space-3xs);
    }

    .db-nav {
      mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--space-2xs),
        #000 calc(100% - var(--space-2xs)),
        transparent 100%
      );
    }
  }

  .db-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-block: var(--space-2xs);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);

    
    &::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      block-size: 2px;
      background-color: var(--gold);
      scale: 0 1;
      transition: scale var(--dur-base) var(--ease-out);
    }

    &:hover {
      color: var(--text);
    }

    
    &:active {
      color: var(--gold-bright);
    }
  }

  
  .db-nav__link--active,
  .db-nav__link[aria-current]:not([aria-current="false"]) {
    color: var(--gold-bright);

    &::after {
      scale: 1;
    }
  }

  
  .db-lang {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4xs);
    flex: 0 0 auto;
    padding: var(--space-4xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
  }

  .db-lang__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    transition:
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);

    &:hover {
      color: var(--text);
    }

    &:active {
      background-color: color-mix(in oklab, var(--gold) 20%, transparent);
      color: var(--gold-bright);
    }
  }

  
  .db-lang__link--active,
  .db-lang__link[aria-current]:not([aria-current="false"]) {
    background-color: color-mix(in oklab, var(--gold) 14%, transparent);
    color: var(--gold-bright);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }

  
  .db-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-round);
    background-color: transparent;
    color: var(--gold);
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

    & > svg {
      inline-size: var(--icon-m);
      block-size: var(--icon-m);
    }

    &:hover {
      border-color: var(--gold);
      background-color: color-mix(in oklab, var(--gold) 10%, transparent);
      color: var(--gold-bright);
    }

    
    &:active {
      background-color: color-mix(in oklab, var(--gold) 20%, transparent);
      color: var(--gold-bright);
    }
  }

  
  @media (width >= 64rem) {
    [data-nav-toggle] {
      display: none;
    }
  }

  
  .db-navpanel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    grid-template-rows: var(--header-height) 1fr auto;
    
    background-color: color-mix(in oklab, var(--bg) 97%, transparent);
    background-image: radial-gradient(
      90% 55% at 50% 100%,
      color-mix(in oklab, var(--flame) 13%, transparent),
      transparent 70%
    );
    opacity: 0;
    translate: 0 -0.75rem;
    
    overflow-y: auto;
    overscroll-behavior: contain;
    transition:
      opacity var(--dur-base) var(--ease-out),
      translate var(--dur-base) var(--ease-out),
      display var(--dur-base) allow-discrete;

    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(var(--blur-header)) saturate(1.2);
    }
  }

  .db-navpanel[data-open] {
    display: grid;
    opacity: 1;
    translate: none;
  }

  
  @starting-style {
    .db-navpanel[data-open] {
      opacity: 0;
      translate: 0 -0.75rem;
    }
  }

  .db-navpanel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
  }

  
  .db-navpanel__mark :where(img, svg) {
    display: block;
    inline-size: auto;
    block-size: clamp(2rem, 1.75rem + 1.25vi, 2.75rem);
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--gold) 30%, transparent));
  }

  .db-navpanel__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    gap: 0;
  }

  .db-navpanel__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    
    min-block-size: 3.5rem;
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);

    &:hover {
      color: var(--gold-bright);
    }

    &:active {
      color: var(--gold);
    }
  }

  .db-navpanel__num {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    color: var(--gold);
  }

  .db-navpanel__foot {
    display: grid;
    gap: var(--space-xs);
    align-content: end;
    padding-block-end: var(--space-xl);
  }

  .db-navpanel__call {
    inline-size: 100%;
  }

  .db-navpanel__addr {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: var(--tap-min);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-s);
    text-decoration: none;

    & > svg {
      inline-size: var(--icon-s);
      block-size: var(--icon-s);
      flex: 0 0 auto;
      color: var(--gold);
    }

    &:hover {
      color: var(--text);
    }
  }

  
  @media (prefers-reduced-motion: reduce) {
    .db-navpanel,
    .db-navpanel[data-open] {
      translate: none;
    }

    @starting-style {
      .db-navpanel[data-open] {
        translate: none;
      }
    }
  }

  
  @media (forced-colors: active) {
    .db-navpanel {
      background-color: Canvas;
      background-image: none;
    }

    .db-nav-toggle {
      border-color: ButtonText;
      color: ButtonText;
    }
  }

  
  .db-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--tap-min-fine);
    padding: var(--space-xs) var(--space-l);
    border: 1px solid transparent;
    border-radius: var(--radius-ui);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-s);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      translate var(--dur-fast) var(--ease-out);

    &:hover {
      translate: 0 -1px;
    }

    
    &:active {
      translate: 0;
      filter: brightness(0.9);
    }
  }

  .db-btn--primary {
    background-image: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    
    box-shadow: var(--elevation-glow);

    &:hover {
      box-shadow: 0 0 56px -6px var(--glow-flame);
    }
  }

  .db-btn--ghost {
    border-color: var(--btn-secondary-border);
    background-color: color-mix(in oklab, var(--gold) 6%, transparent);
    color: var(--btn-secondary-text);

    &:hover {
      border-color: var(--gold);
      background-color: color-mix(in oklab, var(--gold) 12%, transparent);
      color: var(--gold-bright);
    }
  }

  .db-btn--sm {
    padding: var(--space-2xs) var(--space-m);
    font-size: var(--fs-2xs);
  }

  
  @media (pointer: coarse) {
    .db-btn,
    .db-nav__link,
    .db-lang__link,
    .db-menu__filter,
    .db-social__link,
    .db-map__btn {
      min-block-size: var(--tap-min);
    }
  }

  
  @media (forced-colors: active) {
    .db-btn {
      border-color: ButtonText;
    }
  }

  
  .db-hero {
    
    &::before {
      content: "";
      position: absolute;
      z-index: var(--z-below);
      inset-block-start: -30%;
      inset-inline-start: 50%;
      inline-size: min(120%, 70rem);
      aspect-ratio: 1;
      translate: -50% 0;
      background-image: radial-gradient(
        closest-side,
        color-mix(in oklab, var(--gold) 9%, transparent),
        transparent 70%
      );
      pointer-events: none;
    }
  }

  .db-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-s);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklab, var(--gold) 8%, transparent);
    color: var(--gold-bright);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;

    
    & > span + span::before {
      content: "";
      display: inline-block;
      inline-size: 3px;
      block-size: 3px;
      margin-inline-end: var(--space-2xs);
      border-radius: var(--radius-round);
      background-color: currentColor;
      vertical-align: 0.25em;
    }
  }

  
  .db-hero__title {
    margin-block: var(--space-m) var(--space-s);
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: var(--lh-display);
    text-transform: uppercase;
    text-wrap: balance;
  }

  .db-hero__title-accent {
    
    display: block;
    margin-block-start: var(--space-2xs);
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-caps);
    
    color: var(--gold);

    @supports (background-clip: text) or (-webkit-background-clip: text) {
      background-image: linear-gradient(
        100deg var(--in-oklab),
        var(--gold) 10%,
        var(--gold-bright) 50%,
        var(--gold) 90%
      );
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    
    @media (forced-colors: active) {
      background-image: none;
      color: CanvasText;
    }
  }

  .db-hero__lead {
    max-inline-size: var(--measure);
    color: var(--text-muted);
    font-size: var(--fs-m);
    line-height: var(--lh-prose);
  }

  .db-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-l-fluid);
  }

  
  .db-hero__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    background-image: var(--surface-lift);
    box-shadow: var(--elevation-2);

    & :where(img, picture) {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(
        to top var(--in-oklab),
        color-mix(in oklab, var(--bg) 78%, transparent),
        transparent 55%
      );
      pointer-events: none;
    }
  }

  
  
  .db-usp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    background-image: var(--surface-lift);
    box-shadow: var(--elevation-1);
  }

  .db-usp__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-round);
    background-color: color-mix(in oklab, var(--gold) 10%, transparent);
    color: var(--gold);

    & :where(img, svg) {
      inline-size: var(--icon-l);
      block-size: var(--icon-l);
    }
  }

  .db-usp__label {
    flex: 1 1 8rem;
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-s);
    line-height: var(--lh-ui);
    color: var(--text);
    text-wrap: balance;

    
    & > strong {
      display: block;
      font-weight: var(--fw-ui-strong);
      font-size: var(--fs-base);
      line-height: var(--lh-heading);
    }

    & > p {
      margin-block-start: var(--space-3xs);
      font-family: var(--font-body);
      font-weight: var(--fw-body);
      font-size: var(--fs-xs);
      line-height: var(--lh-ui);
      color: var(--text-muted);
    }
  }

  
  .db-section__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: var(--lh-display);
    text-transform: uppercase;
    text-wrap: balance;
  }

  
  .db-section__accent {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gold);
  }

  .db-section__lead {
    color: var(--text-muted);
    font-size: var(--fs-s);
    text-wrap: pretty;
  }

  

  
  
  .db-menu__filters {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-2xs));
    z-index: var(--z-sticky);
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    margin-block-end: var(--space-l-fluid);
    background-color: var(--scrim);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scroll-padding-inline: var(--space-xs);
    scrollbar-width: thin;

    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(var(--blur-header));
    }
  }

  
  @media (width >= 64rem) {
    .db-menu__filters {
      flex-wrap: wrap;
      overflow-x: visible;
      border-radius: var(--radius-card);
    }
  }

  
  @media (pointer: coarse) {
    .db-menu__filters {
      padding-block: var(--space-2xs);
    }
  }

  
  @media (height < 34rem) {
    .db-menu__filters {
      position: static;
    }
  }

  @media (height < 26rem) {
    .db-header {
      position: static;
    }
  }

  .db-menu__filter {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: var(--space-3xs) var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--surface-raised);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

    &:hover {
      border-color: var(--border-strong);
      color: var(--text);
    }

    &:active {
      background-color: color-mix(in oklab, var(--gold) 20%, transparent);
      color: var(--gold-bright);
    }
  }

  
  .db-menu__filter--active,
  .db-menu__filter[aria-current]:not([aria-current="false"]) {
    border-color: var(--gold);
    background-color: color-mix(in oklab, var(--gold) 14%, transparent);
    color: var(--gold-bright);

    &::before {
      content: "";
      flex: 0 0 auto;
      inline-size: 0.45em;
      block-size: 0.45em;
      margin-inline-end: 0.5em;
      border-radius: var(--radius-round);
      background-color: currentColor;
    }
  }

  
  .db-menu-cat {
    
    scroll-margin-block-start: var(--scroll-offset-cat);
    padding: var(--card-padding);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background-color: var(--card-bg);
    background-image: var(--surface-lift);
    box-shadow: var(--elevation-1);
  }

  
  .db-menu-cat--featured {
    border-color: var(--gold);
    box-shadow:
      var(--elevation-1),
      0 0 32px -18px var(--glow-gold);
    background-image:
      radial-gradient(
        120% 130% at 50% 0%,
        color-mix(in oklab, var(--gold) 12%, transparent),
        transparent 62%
      ),
      var(--surface-lift);

    & .db-menu-cat__title {
      color: var(--gold-bright);
    }
  }

  .db-menu-cat__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-s);
    padding-block-end: var(--space-xs);
    margin-block-end: var(--space-s);
    border-block-end: 1px solid var(--rule);
  }

  .db-menu-cat__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    
    color: var(--text-heading);
  }

  
  .db-menu-cat__note {
    padding: var(--space-4xs) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--surface-raised);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  
  .db-item {
    display: grid;
    gap: var(--space-4xs);
    padding-block: var(--space-3xs);
    break-inside: avoid;
  }

  
  .db-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs);
  }

  .db-item__name {
    flex: 0 1 auto;
    min-inline-size: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-body-strong);
    font-size: var(--fs-s);
    line-height: var(--lh-snug);
    color: var(--text);
  }

  
  .db-item__leader {
    flex: 1 1 1.25rem;
    min-inline-size: 1.25rem;
    align-self: baseline;
    border-block-end: 1px dotted color-mix(in oklab, var(--gold) 30%, transparent);
    translate: 0 0.12em;
  }

  .db-item__price {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-s);
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    white-space: nowrap;
  }

  
  .db-item__pricenote {
    flex: 1 0 100%;
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    text-align: end;
    white-space: nowrap;
  }

  
  .db-item__desc {
    max-inline-size: var(--measure-narrow);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-prose);
    text-wrap: pretty;
  }

  .db-item__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
  }

  
  .db-item__head > .db-item__badges {
    flex: 0 0 auto;
    align-self: center;
  }

  
  .db-item__todo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-4xs) var(--space-2xs);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-ui);
    background-color: var(--badge-todo-bg);
    color: var(--badge-todo-fg);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-ui);
  }

  
  @container menu-cat (inline-size >= 34rem) {
    .db-item {
      padding-block: var(--space-2xs);
    }

    
    .db-item__name,
    .db-item__price {
      font-size: clamp(var(--fs-s), 0.86rem + 0.55cqi, var(--fs-base));
    }

    
    .db-item__pricenote {
      flex: 0 0 auto;
      text-align: start;
    }
  }

  
  .db-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15em 0.5em;
    border: 1px solid color-mix(in oklab, currentColor 35%, transparent);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .db-badge--vega {
    background-color: var(--badge-vega-bg);
    color: var(--badge-vega-fg);
  }

  .db-badge--spicy {
    background-color: var(--badge-spicy-bg);
    color: var(--badge-spicy-fg);
  }

  .db-badge--todo {
    border-style: dashed;
    background-color: var(--badge-todo-bg);
    color: var(--badge-todo-fg);
  }

  
  .db-menu__note {
    max-inline-size: var(--measure);
    margin-block-start: var(--space-s);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-xs);
    line-height: var(--lh-ui);
  }

  
  .db-menu__cats + .db-menu__note {
    margin-block-start: var(--space-xl-fluid);
  }

  
  .db-review {
    container: review / inline-size;
    display: grid;
    gap: var(--space-s);
    padding-inline-start: var(--space-m);
    border-inline-start: 1px solid var(--border-strong);
  }

  .db-review__text {
    position: relative;
    max-inline-size: var(--measure);
    font-size: clamp(var(--fs-s), 0.88rem + 0.9cqi, var(--fs-m));
    line-height: var(--lh-prose);
    color: var(--text);
    text-wrap: pretty;

    
    &::before {
      content: "“";
      content: "“" / "";
      position: absolute;
      
      inset-block-start: -0.28em;
      inset-inline-start: -0.26em;
      color: var(--gold);
      font-family: var(--font-display);
      font-size: 2.25em;
      line-height: 1;
      opacity: 0.28;
      pointer-events: none;
    }
  }

  .db-review__stars {
    color: var(--gold);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    line-height: 1;
  }

  .db-review__author {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-s);
    color: var(--text);
  }

  
  .db-review__cred,
  .db-review__date {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
  }

  
  @container review (inline-size >= 22rem) {
    .db-review__author {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-2xs);
    }
  }

  
  .db-info {
    display: grid;
    gap: var(--space-s);
  }

  .db-info__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-s);
    font-size: var(--fs-s);
    line-height: var(--lh-prose);

    & a {
      color: var(--text);
      text-decoration-color: color-mix(in oklab, var(--gold) 45%, transparent);
      transition: color var(--dur-fast) var(--ease-out);

      &:hover {
        color: var(--gold-bright);
      }
    }
  }

  .db-info__icon {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-ui);
    background-color: var(--surface-raised);
    color: var(--gold);

    & :where(img, svg) {
      inline-size: var(--icon-s);
      block-size: var(--icon-s);
    }
  }

  
  .db-hours {
    
    container: hours / inline-size;
    display: grid;
    
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs) var(--space-s);
    padding: var(--card-padding);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background-color: var(--surface);
    background-image: var(--surface-lift);
    box-shadow: var(--elevation-1);
    
    scroll-margin-block-start: var(--scroll-offset);

    & > * {
      grid-column: 1 / -1;
    }

    
    & > :is(.db-hours__title, .db-info__row):has(+ .db-hours__status:not([hidden])) {
      grid-column: 1;
    }

    & > :is(.db-hours__title, .db-info__row) + .db-hours__status {
      grid-column: 2;
      justify-self: end;
    }

    
    & :where(dd) {
      margin: 0;
    }
  }

  
  @container hours (inline-size < 17rem) {
    .db-hours > :is(.db-hours__title, .db-info__row):has(+ .db-hours__status:not([hidden])),
    .db-hours > :is(.db-hours__title, .db-info__row) + .db-hours__status {
      grid-column: 1 / -1;
      justify-self: start;
    }
  }

  .db-hours__title {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gold-bright);
  }

  
  .db-hours__status {
    --db-status-fg: var(--text-muted);

    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    justify-self: start;
    padding: 0.3em 0.75em;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--db-status-fg);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-ui);
    white-space: nowrap;

    
    &[hidden] {
      display: none;
    }
  }

  
  .db-status__dot {
    flex: 0 0 auto;
    inline-size: 0.5em;
    block-size: 0.5em;
    border: 1px solid currentColor;
    border-radius: var(--radius-round);
  }

  .db-status__text {
    min-inline-size: 0;
  }

  .db-status--open {
    
    --db-status-fg: #74c69d;

    border-color: color-mix(in oklab, var(--db-status-fg) 40%, transparent);
    background-color: color-mix(in oklab, var(--db-status-fg) 14%, transparent);

    & .db-status__dot {
      background-color: currentColor;
    }
  }

  
  @media (prefers-reduced-motion: no-preference) {
    @keyframes db-hours-pulse {
      0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--db-status-fg) 55%, transparent);
      }

      70%,
      100% {
        box-shadow: 0 0 0 0.4em transparent;
      }
    }

    .db-status--open .db-status__dot {
      animation: db-hours-pulse 2.8s var(--ease-out) infinite;
    }
  }

  
  .db-hours__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: var(--fs-s);
    line-height: 1.5rem;
    
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  .db-hours__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-s);
    
    margin-inline: calc(-1 * var(--space-2xs) - 2px);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-2xs) calc(var(--space-2xs) + 2px);
    border-inline-start: 2px solid transparent;
    border-radius: var(--radius-ui);

    & + & {
      border-block-start: 1px solid var(--border-subtle);
    }
  }

  
  @supports (grid-template-columns: subgrid) {
    .db-hours__row {
      grid-template-columns: subgrid;
    }
  }

  .db-hours__day {
    min-inline-size: 0;
    font-weight: var(--fw-ui);
    color: var(--text);
  }

  .db-hours__time {
    color: var(--text);
    text-align: end;
    
    white-space: nowrap;
  }

  
  .db-hours__row--closed :is(.db-hours__day, .db-hours__time) {
    color: var(--text-muted);
  }

  .db-hours__closed {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  
  .db-hours__row--today {
    border-inline-start-color: var(--gold);
    background-image: linear-gradient(
      to right var(--in-oklab),
      color-mix(in oklab, var(--gold) 9%, transparent),
      color-mix(in oklab, var(--gold) 4%, transparent) 55%,
      transparent
    );

    & .db-hours__day {
      font-weight: var(--fw-ui-strong);
      color: var(--gold-bright);
    }

    & .db-hours__time {
      color: var(--gold-bright);
    }
  }

  
  .db-hours__row--today.db-hours__row--closed .db-hours__time {
    color: var(--text-muted);
  }

  
  .db-hours__row.db-hours__row--today,
  .db-hours__row--today + .db-hours__row {
    border-block-start-color: transparent;
  }

  
  @media (forced-colors: active) {
    .db-hours__row--today {
      background-color: Highlight;
    }

    .db-hours__row--today :is(.db-hours__day, .db-hours__time) {
      color: HighlightText;
    }
  }

  
  .db-footer__hours {
    display: grid;
    
    gap: var(--space-2xs);
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
  }

  .db-footer__hoursDays {
    color: var(--text);
  }

  .db-footer__hoursClosed {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  
  .db-hours--pending {
    border-style: solid;
    border-color: var(--border-strong);
    background-image:
      radial-gradient(
        120% 130% at 50% 0%,
        color-mix(in oklab, var(--gold) 10%, transparent),
        transparent 65%
      ),
      var(--surface-lift);

    & .db-info__row strong {
      font-family: var(--font-ui);
      font-weight: var(--fw-ui-strong);
      font-size: var(--fs-2xs);
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
      color: var(--gold-bright);
    }

    
    & .db-btn--sm {
      margin-block-start: var(--space-2xs);
      padding: var(--space-xs) var(--space-l);
      font-size: var(--fs-s);
    }
  }

  .db-hours__notice {
    color: var(--text);
    font-size: var(--fs-s);
    line-height: var(--lh-prose);
    text-wrap: pretty;
  }

  
  .db-map {
    display: grid;
    gap: var(--space-s);
  }

  
  .db-map__placeholder {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--space-s);
    inline-size: 100%;
    block-size: auto;
    min-block-size: min(75cqi, 22rem);
    padding: var(--space-l) var(--space-m);
    border: 1px dashed var(--border-strong);
    border-radius: var(--card-radius);
    background-color: var(--surface);
    background-image:
      radial-gradient(
        100% 100% at 50% 0%,
        color-mix(in oklab, var(--gold) 6%, transparent),
        transparent 65%
      ),
      var(--surface-lift);
    text-align: center;
  }

  
  .db-map__btn {
    max-inline-size: 100%;
    border-color: var(--btn-secondary-border);
    background-image: none;
    background-color: color-mix(in oklab, var(--gold) 6%, transparent);
    color: var(--btn-secondary-text);
    box-shadow: none;

    &:hover {
      border-color: var(--gold);
      background-color: color-mix(in oklab, var(--gold) 12%, transparent);
      color: var(--gold-bright);
      box-shadow: none;
    }
  }

  .db-map__notice {
    max-inline-size: 38ch;
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    line-height: var(--lh-prose);
    text-wrap: pretty;
  }

  .db-map__frame {
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background-color: var(--surface);
    overflow: hidden;

    & :where(iframe) {
      inline-size: 100%;
      block-size: 100%;
      border: 0;
    }
  }

  
  .db-footer {
    position: relative;
    
    margin-block-start: calc(var(--section-gap) / 2);
    padding-block: var(--space-2xl-fluid) var(--space-xl);
    border-block-start: 1px solid var(--border);
    background-image: radial-gradient(
      120% 100% at 50% 0%,
      color-mix(in oklab, var(--gold) 5%, transparent),
      transparent 55%
    );
    font-size: var(--fs-s);
    color: var(--text-muted);
  }

  .db-footer__title {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gold-bright);
  }

  .db-footer__col {
    & a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color var(--dur-fast) var(--ease-out);

      &:hover {
        color: var(--gold-bright);
        text-decoration: underline;
      }
    }

    & :where(li) {
      line-height: var(--lh-body);
    }
  }

  
  .db-footer__col--brand {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: var(--space-s);
  }

  .db-footer__col--brand :where(picture) {
    display: block;
  }

  .db-footer__col--brand :where(img) {
    display: block;
    inline-size: auto;
    block-size: 2.75rem;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--gold) 30%, transparent));
  }

  .db-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .db-social__link {
    display: grid;
    place-items: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    border: 1px solid var(--border);
    border-radius: var(--radius-round);
    background-color: var(--surface);
    color: var(--text-muted);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);

    & :where(img, svg) {
      inline-size: var(--icon-m);
      block-size: var(--icon-m);
    }

    &:hover {
      border-color: var(--border-strong);
      background-color: var(--surface-raised);
      color: var(--gold-bright);
    }

    &:active {
      background-color: color-mix(in oklab, var(--gold) 20%, transparent);
      color: var(--gold-bright);
    }
  }

  
  .db-legal {
    display: grid;
    gap: var(--space-s);
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    text-wrap: pretty;

    & :where(h2) {
      margin-block-start: var(--space-l);
      font-size: var(--fs-l);
    }

    & :where(h3) {
      margin-block-start: var(--space-m);
      font-size: var(--fs-m);
    }

    
    & > :where(h2, h3):first-child {
      margin-block-start: 0;
    }

    
    & > .db-legal__updated {
      padding-block-end: var(--space-s);
      border-block-end: 1px solid var(--rule);
      color: var(--text-muted);
      font-family: var(--font-ui);
      font-size: var(--fs-xs);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & :where(ul, ol) {
      display: grid;
      gap: var(--space-2xs);
      padding-inline-start: var(--space-m);
    }

    & :where(dl) {
      display: grid;
      gap: var(--space-2xs);
    }

    & :where(dt) {
      font-weight: var(--fw-body-strong);
    }

    & :where(dd) {
      margin-inline-start: 0;
      color: var(--text-muted);
    }
  }

  .db-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    margin-block-start: var(--space-xl-fluid);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--border-subtle);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
  }
}


@layer components {
  
  :root {
    --seam-warm: color-mix(in srgb, var(--color-flame, #ff5500) 13%, var(--bg, #090705));
  }

  
  @media (width < 64rem) {
    .db-logo :where(img, svg) {
      
      filter: drop-shadow(0 0 6px color-mix(in oklab, var(--gold) 30%, transparent));
    }

    .db-header__inner {
      
      gap: var(--space-xs);
    }

    .db-nav {
      
      padding-inline: 0.75rem 0.25rem;
      mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 0.75rem,
        #000 calc(100% - 1.5rem),
        transparent 100%
      );
      
      scroll-padding-inline: 0.75rem 1.5rem;
      scroll-behavior: smooth;
    }

    .db-lang {
      
      background-color: color-mix(in oklab, var(--bg) 92%, transparent);
      border-color: color-mix(in oklab, var(--gold) 30%, transparent);

      @supports (backdrop-filter: blur(1px)) {
        backdrop-filter: blur(10px);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .db-nav {
      scroll-behavior: auto;
    }
  }

  
  .db-header {
    background-color: color-mix(in oklab, var(--bg) 98%, transparent);

    @supports (backdrop-filter: blur(1px)) {
      
      background-color: color-mix(in oklab, var(--bg) 96%, transparent);
    }
  }

  
  .db-usps {
    position: relative;
    isolation: isolate;
  }

  .db-usps::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: -1;
    block-size: clamp(9rem, 26vw, 16rem);
    pointer-events: none;
    
    background-image: radial-gradient(
      130% 100% at 50% 0%,
      var(--seam-warm) 0,
      color-mix(in srgb, var(--color-flame, #ff5500) 5%, var(--bg, #090705)) 40%,
      var(--bg, #090705) 76%
    );
  }

  

  
  .db-section__accent {
    color: color-mix(in oklab, var(--gold) 78%, var(--color-cream));
    opacity: 0.86;
  }

  
  .db-usp__icon {
    background-color: transparent;
    border-color: color-mix(in oklab, var(--gold) 22%, transparent);
    color: color-mix(in oklab, var(--gold) 82%, var(--color-cream));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-cream) 4%, transparent);
  }

  
  .db-usp {
    align-items: start;
  }

  .db-usp__icon {
    margin-block-start: 0.1rem;
  }

  
  @media (width < 22rem) {
    .db-usp {
      align-items: center;
    }
  }

  
  .db-hours__status {
    padding: 0.45em 0.9em;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .db-status__dot {
    inline-size: 0.55em;
    block-size: 0.55em;
    border-width: 2px;
  }

  
  .db-status--open {
    border-color: color-mix(in oklab, var(--db-status-fg) 55%, transparent);
    background-color: color-mix(in oklab, var(--db-status-fg) 16%, transparent);
    box-shadow: 0 0 24px -8px color-mix(in oklab, var(--db-status-fg) 60%, transparent);
  }
}


.db-footer__halal {
  margin-inline-start: auto;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.75;
}


@media (max-width: 39.999rem) {
  .db-footer__halal {
    margin-inline-start: 0;
  }
}

@layer components {

  
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;

    --hero-chrome: calc(var(--header-height, 3.75rem) + 1px);

    min-block-size: min(calc(100vh - var(--hero-chrome)), 60rem); 
    min-block-size: min(calc(100dvh - var(--hero-chrome)), 60rem);

    display: grid;
    place-items: center;
    text-align: center;

    padding-block: 1rem 4.25rem;
    padding-inline: var(--gutter, clamp(1.25rem, 0.333rem + 4.583vw, 4rem));

    background-color: var(--bg, #090705);
  }

  @media (min-width: 48rem) {
    .hero {
      --hero-chrome: calc(var(--header-height, 4.5rem) + 1px);
      padding-block: 1.5rem 5rem;
    }
  }

  @media (max-height: 44rem) {
    .hero {
      padding-block: 0.5rem 3.5rem;
    }
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--bg, #090705);
    background-image: url("/assets/video/hero-poster.jpg");
    background-image: image-set(
      url("/assets/video/hero-poster.avif") type("image/avif"),
      url("/assets/video/hero-poster.jpg") type("image/jpeg")
    );
    background-position: 50% 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .hero__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    
    object-position: 50% 100%;
    filter: saturate(1.12) contrast(1.04);
  }

  .hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(
        68% 42% at 50% 40%,
        rgb(9 7 5 / 0.42) 0,
        rgb(9 7 5 / 0.2) 58%,
        transparent 100%
      ),
      linear-gradient(to bottom, rgb(9 7 5 / 0.82) 0, rgb(9 7 5 / 0.1) 20%, transparent 46%);
  }

  .hero__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1rem;
    inline-size: 100%;
    max-inline-size: 44rem;
  }

  .hero__logo {
    display: block;
    
    inline-size: clamp(6rem, 28vw, 11rem);
  }
  .hero__logo img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    
    filter: drop-shadow(0 0 28px rgb(230 184 0 / 0.35));
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-ui, "Outfit", Arial, sans-serif);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold, #e6b800);
  }
  .hero__eyebrow::before,
  .hero__eyebrow::after {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #e6b800));
  }
  .hero__eyebrow::after {
    background: linear-gradient(90deg, var(--gold, #e6b800), transparent);
  }

  .hero__title {
    margin: 0;
    font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
    font-weight: 400;
    font-size: clamp(3.25rem, 15.5vw, 8.5rem);
    line-height: 0.86;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cream, #f8f5f0);
    
    text-shadow: 0 2px 46px rgb(9 7 5 / 0.85);
  }

  .hero__slogan {
    margin: 0;
    font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
    font-size: clamp(1.05rem, 4.6vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-bright, #ffdc66);
    text-shadow: 0 1px 18px rgb(9 7 5 / 0.7);
  }

  .hero__lead {
    margin: 0;
    max-inline-size: 26ch;
    font-family: var(--font-body, "Plus Jakarta Sans", Arial, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cream, #f8f5f0);
    opacity: 0.92;
    text-wrap: balance;
    text-shadow: 0 1px 14px rgb(9 7 5 / 0.8);
  }
  @media (min-width: 48rem) {
    .hero__lead {
      max-inline-size: 40ch;
      font-size: 1.125rem;
    }
  }

  .hero__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0.75rem auto 0;
    inline-size: 100%;
    
    max-inline-size: 26rem;
  }

  .hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 3rem;
    padding: 0.7rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-ui, "Outfit", Arial, sans-serif);
    font-weight: 600;
    
    font-size: clamp(0.7rem, 0.24rem + 2.3vw, 0.88rem);
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 30rem) {
    .hero__btn {
      padding-inline: 1rem;
      letter-spacing: 0.08em;
    }
  }
  
  .hero__btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero__btn-icon {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: none;
  }

  .hero__btn--primary {
    background: linear-gradient(135deg, var(--flame, #ff5500), var(--flame-light, #ff7733));
    color: var(--on-accent, #090705);
    box-shadow: 0 0 44px -6px rgb(255 85 0 / 0.55);
  }
  .hero__btn--ghost {
    border: 1px solid rgb(230 184 0 / 0.45);
    color: var(--gold-bright, #ffdc66);
    background: rgb(9 7 5 / 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero__btn:hover {
    transform: translateY(-2px);
  }
  .hero__btn--primary:hover {
    box-shadow: 0 0 56px -4px rgb(255 85 0 / 0.7);
  }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.7rem;
    margin: 0.85rem 0 0;
    font-family: var(--font-ui, "Outfit", Arial, sans-serif);
    font-weight: 600;
    
    font-size: clamp(0.64rem, 0.42rem + 1.1vw, 0.72rem);
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--cream, #f8f5f0);
    text-shadow:
      0 1px 2px rgb(0 0 0 / 0.85),
      0 0 14px rgb(0 0 0 / 0.6);
  }

  .hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 1.15rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
  .hero__meta-item > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .hero__meta-icon,
  .hero__meta-g {
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
  }
  .hero__meta-icon {
    color: var(--gold, #e6b800);
  }
  
  .hero__meta-g {
    forced-color-adjust: none;
  }

  .hero__meta-score {
    color: var(--gold-bright, #ffdc66);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
  }
  .hero__meta-src {
    color: inherit;
  }

  .hero__meta-sep {
    inline-size: 1px;
    block-size: 0.85rem;
    flex: none;
    background: rgb(230 184 0 / 0.35);
  }

  .hero__meta-item--link {
    border-block-end: 1px solid transparent;
    transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero__meta-item--link:hover {
    border-block-end-color: rgb(255 220 102 / 0.55);
  }
  .hero__meta-item--link:active {
    border-block-end-color: rgb(255 220 102 / 0.8);
  }

  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    translate: -50% 0;
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    padding: 0.35rem 1rem;
    text-decoration: none;
    pointer-events: none;
    color: var(--cream, #f8f5f0);
    animation: hero-swipe-up 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .hero__scroll-label {
    font-family: var(--font-ui, "Outfit", Arial, sans-serif);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
    text-shadow:
      0 1px 2px rgb(0 0 0 / 0.9),
      0 0 10px rgb(0 0 0 / 0.55);
  }

  .hero__scroll-chevron {
    display: block;
    
    inline-size: 1.75rem;
    block-size: 1.75rem;
    stroke-width: 2.5;
    filter:
      drop-shadow(0 1px 2px rgb(0 0 0 / 0.9))
      drop-shadow(0 0 8px rgb(0 0 0 / 0.5));
  }

  @keyframes hero-swipe-up {
    0% {
      transform: translateY(5px);
      opacity: 0.35;
    }
    45% {
      opacity: 1;
    }
    100% {
      transform: translateY(-6px);
      opacity: 0.35;
    }
  }

  @media (max-height: 34rem) {
    .hero__scroll {
      display: none;
    }
  }

  .hero__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero :where(a):focus-visible {
    outline: 3px solid var(--gold-bright, #ffdc66);
    outline-offset: 3px;
    border-radius: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__video {
      display: none;
    }
    .hero__scroll {
      animation: none;
      opacity: 1;
      transform: none;
    }
    .hero__btn:hover {
      transform: none;
    }
  }

  @media (forced-colors: active) {
    .hero__meta-sep {
      background: CanvasText;
    }
    .hero__scroll-chevron {
      filter: none;
    }
  }

  
  .hero__veil {
    background:
      radial-gradient(
        68% 42% at 50% 40%,
        rgb(9 7 5 / 0.42) 0,
        rgb(9 7 5 / 0.2) 58%,
        transparent 100%
      ),
      linear-gradient(to bottom, rgb(9 7 5 / 0.82) 0, rgb(9 7 5 / 0.1) 20%, transparent 46%),
      linear-gradient(to bottom, rgb(9 7 5 / 0.82) 0, rgb(9 7 5 / 0.1) 20%, transparent 46%);
  }

  .hero__veil::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    block-size: 10%;
    pointer-events: none;
    background-image: radial-gradient(
      130% 100% at 50% 100%,
      var(--seam-warm, #291104) 0,
      color-mix(in srgb, var(--color-flame, #ff5500) 5%, var(--bg, #090705)) 40%,
      var(--bg, #090705) 76%
    );
    mask-image: linear-gradient(to bottom, transparent 0, #000 88%);
  }

  
  .hero__btn:active {
    transform: translateY(0) scale(0.985);
  }
  .hero__btn--primary:active {
    box-shadow: 0 0 30px -8px rgb(255 85 0 / 0.6);
    filter: brightness(0.94);
  }
  .hero__btn--ghost:active {
    background: rgb(230 184 0 / 0.16);
    border-color: rgb(230 184 0 / 0.7);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__btn:active {
      transform: none;
    }
  }
}



@layer components {
  .dbg {
    --dbg-rule: color-mix(in oklab, var(--gold) 20%, transparent);
    --dbg-rule-hot: color-mix(in oklab, var(--gold) 55%, transparent);
    --dbg-gap: clamp(0.625rem, 0.45rem + 0.8vi, 1rem);
  }

  .dbg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dbg-gap);
    margin: var(--space-l) 0 0;
    padding: 0;
    list-style: none;
  }

  @media (width >= 40rem) {
    .dbg-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .dbg-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  
  .dbg-tile {
    position: relative;
    min-inline-size: 0;
  }

  .dbg-tile__a {
    position: relative;
    display: block;
    block-size: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-card);
    background-color: var(--surface);
    box-shadow: inset 0 0 0 1px var(--dbg-rule);
    color: var(--color-cream);
    text-decoration: none;
    transition:
      translate var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out);
  }

  
  .dbg-tile__a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--dbg-rule);
    pointer-events: none;
    transition: box-shadow var(--dur-slow) var(--ease-out);
  }

  .dbg-tile__media,
  .dbg-tile__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .dbg-tile__media img {
    object-fit: cover;
    scale: 1.02;
    transition: scale 700ms var(--ease-out);
  }

  .dbg-tile__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to top,
        color-mix(in oklab, #000 90%, transparent) 0%,
        color-mix(in oklab, #000 55%, transparent) 30%,
        transparent 62%);
  }

  .dbg-tile__body {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: clamp(0.75rem, 0.55rem + 0.9vi, 1.125rem);
  }

  .dbg-tile__name {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.15rem + 1.3vi, 2rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .dbg-tile__spark {
    flex: none;
    color: var(--gold-bright);
    font-size: 0.6em;
  }

  .dbg-tile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    color: color-mix(in oklab, var(--color-cream) 72%, transparent);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .dbg-tile__from {
    color: var(--gold);
  }

  
  @media (width < 64rem) {
    .dbg-tile:not(.dbg-tile--lead) .dbg-tile__meta {
      flex-direction: column;
    }
  }

  
  .dbg-tile__arrow {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
    z-index: 2;
    box-sizing: content-box;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    padding: 0.5rem;
    border-radius: var(--radius-round, 50%);
    background-color: color-mix(in oklab, #000 45%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent);
    color: var(--gold);
    rotate: -45deg;
    transition:
      rotate var(--dur-base) var(--ease-out),
      background-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out);

    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(8px);
    }
  }

  
  @media (hover: hover) and (pointer: fine) {
    .dbg-tile__a:hover {
      translate: 0 -3px;
      box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--gold) 45%, transparent);
    }

    .dbg-tile__a:hover .dbg-tile__media img {
      scale: 1.08;
    }

    .dbg-tile__a:hover::after {
      box-shadow: inset 0 0 0 1px var(--dbg-rule-hot);
    }

    .dbg-tile__a:hover .dbg-tile__arrow {
      rotate: 0deg;
      background-color: var(--gold);
      color: #14100d;
    }
  }

  .dbg-tile__a:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--gold-bright));
    outline-offset: 3px;
  }

  .dbg-tile__a:active {
    translate: 0 0;
    scale: 0.985;
    transition-duration: var(--dur-fast);
  }

  
  .dbg-tile--feat .dbg-tile__a::after {
    box-shadow:
      inset 0 0 0 1px var(--dbg-rule-hot),
      inset 0 0 28px -8px color-mix(in oklab, var(--gold) 30%, transparent);
  }

  
  .dbg-tile--lead {
    grid-column: 1 / -1;
  }

  .dbg-tile--lead .dbg-tile__a {
    aspect-ratio: 4 / 3.4;
  }

  @media (width >= 40rem) {
    .dbg-tile--lead {
      grid-column: span 2;
      grid-row: span 2;
    }

    .dbg-tile--lead .dbg-tile__a {
      aspect-ratio: auto;
      min-block-size: 100%;
    }
  }

  .dbg-tile--lead .dbg-tile__veil {
    background:
      linear-gradient(to top,
        color-mix(in oklab, #000 92%, transparent) 0%,
        color-mix(in oklab, #000 62%, transparent) 38%,
        transparent 72%),
      radial-gradient(120% 80% at 0% 100%, color-mix(in oklab, var(--flame) 22%, transparent), transparent 60%);
  }

  .dbg-tile--lead .dbg-tile__body {
    gap: var(--space-2xs);
    padding: clamp(1.125rem, 0.8rem + 1.6vi, 2rem);
  }

  .dbg-lead__kicker {
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .dbg-lead__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.7rem + 3.4vi, 4.25rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .dbg-lead__text {
    max-inline-size: 30ch;
    color: color-mix(in oklab, var(--color-cream) 80%, transparent);
    font-family: var(--font-body);
    font-size: var(--fs-s);
    line-height: var(--lh-body, 1.5);
  }

  .dbg-lead__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    align-self: flex-start;
    min-block-size: var(--tap-min, 44px);
    margin-block-start: var(--space-2xs);
    padding-inline: var(--space-l);
    border-radius: var(--radius-pill);
    background-color: var(--gold);
    box-shadow: 0 0 28px -6px color-mix(in oklab, var(--gold) 45%, transparent);
    color: #14100d;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    transition: background-color var(--dur-base) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .dbg-tile--lead .dbg-tile__a:hover .dbg-lead__cta {
      background-color: var(--gold-bright);
    }
  }

  
  .dbg-tile--lead .dbg-tile__arrow {
    display: none;
  }

  
  .dbg-note {
    margin: var(--space-m) auto 0;
    color: var(--muted, var(--text-muted));
    font-size: var(--fs-2xs);
    text-align: center;
  }

  .dbg-note + .dbg-note {
    margin-block-start: var(--space-3xs);
    margin-inline: auto;
  }

  
  @media (prefers-reduced-motion: no-preference) {
    @keyframes dbg-breathe {
      from { scale: 1.02; }
      to   { scale: 1.1; }
    }

    .dbg-tile--lead .dbg-tile__media img {
      animation: dbg-breathe 18s var(--ease-in-out) infinite alternate;
    }

    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes dbg-rise {
        from {
          opacity: 0;
          translate: 0 1.25rem;
        }
      }

      .dbg-tile {
        animation: dbg-rise auto linear backwards;
        animation-timeline: view();
        animation-range: entry 0% cover 22%;
      }

      
      .dbg-tile:nth-child(2n) {
        animation-range: entry 5% cover 27%;
      }

      @media (width >= 64rem) {
        .dbg-tile:nth-child(4n + 3) {
          animation-range: entry 5% cover 27%;
        }

        .dbg-tile:nth-child(4n) {
          animation-range: entry 10% cover 32%;
        }
      }
    }
  }
}



@layer components {
  .db-reviews {
    
    --rev-radius: 1rem;
    --rev-inset: 6px;
    
    --rev-inner-rule: color-mix(in oklab, var(--gold) 15%, transparent);
    
    --rev-gap-ideal: var(--space-s-fluid);
    
    --rev-card-ideal: min(84vw, 20rem);
    
    --rev-card: var(--rev-card-ideal);
    --rev-gap: var(--rev-gap-ideal);
    
    --rev-fade: clamp(1rem, 7vw, 4.5rem);
    
    --rev-speed: 46px;
    
    --rev-lines: 8;
  }

  
  @supports (width: round(down, 3px, 2px)) {
    .db-reviews {
      --rev-card: round(down, var(--rev-card-ideal), 1px);
      --rev-gap: round(down, var(--rev-gap-ideal), 1px);
    }
  }

  
  .db-reviews .db-reviews__plate {
    position: relative;
    border-radius: var(--rev-radius);
    background-image: var(--surface-lift);
    background-color: var(--surface);
    isolation: isolate;
  }

  
  .db-reviews .db-reviews__plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(
      140deg var(--in-oklab),
      var(--border-strong),
      color-mix(in oklab, var(--gold) 8%, transparent) 46%,
      var(--border-strong)
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  
  .db-reviews .db-reviews__plate::after {
    content: "";
    position: absolute;
    inset: var(--rev-inset);
    z-index: 3;
    border: 1px solid var(--rev-inner-rule);
    border-radius: calc(var(--rev-radius) - var(--rev-inset) + 2px);
    pointer-events: none;
  }

  
  .db-reviews .db-rev-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    color: var(--gold);
  }

  .db-reviews .db-rev-stars__base,
  .db-reviews .db-rev-stars__fill {
    display: flex;
    gap: 0.14em;
  }

  .db-reviews .db-rev-stars__base {
    color: color-mix(in oklab, var(--gold) 34%, transparent);
  }

  
  .db-reviews .db-rev-stars__fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--db-rev-stars-pct, 100%);
    overflow: hidden;
    color: var(--gold-bright);
  }

  .db-reviews .db-rev-stars svg {
    flex: none;
    inline-size: 1em;
    block-size: 1em;
  }

  .db-reviews .db-rev-stars__fill svg {
    fill: currentColor;
    stroke: currentColor;
  }

  
  .db-reviews .db-reviews__scoreG,
  .db-reviews .db-review__g,
  .db-reviews .db-reviews__moreG {
    flex: none;
    aspect-ratio: 1;
    forced-color-adjust: none;
  }

  
  .db-reviews__score {
    display: grid;
    justify-items: center;
    gap: var(--space-2xs);
    max-inline-size: 26rem;
    margin-block: var(--space-l-fluid);
    margin-inline: auto;
    padding: var(--space-m) var(--space-l);
    text-align: center;
    text-decoration: none;
    color: var(--text);
  }

  .db-reviews__scoreBrand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .db-reviews .db-reviews__scoreG {
    font-size: var(--fs-base);
  }

  .db-reviews__scoreValue {
    display: flex;
    align-items: baseline;
    gap: 0.1em;
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--gold-bright);
  }

  .db-reviews__scoreMax {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-m);
    color: var(--text-muted);
  }

  .db-reviews .db-reviews__scoreStars .db-rev-stars {
    font-size: var(--fs-m);
  }

  .db-reviews__scoreCta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-2xs);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--border-subtle);
    inline-size: 100%;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gold);
    transition: color var(--dur-fast) var(--ease-out);
  }

  
  .db-reviews .db-reviews__scoreArrow {
    inline-size: 1.05em;
    block-size: 1.05em;
    transition: translate var(--dur-fast) var(--ease-out);
  }

  .db-reviews__score--link:hover {
    .db-reviews__scoreCta {
      color: var(--gold-bright);
    }

    .db-reviews__scoreArrow {
      translate: 1px -1px;
    }

    &::before {
      opacity: 1;
      background-image: linear-gradient(
        140deg var(--in-oklab),
        var(--gold),
        color-mix(in oklab, var(--gold) 30%, transparent) 46%,
        var(--gold)
      );
    }
  }

  
  .db-reviews__marquee {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    
    padding-block: var(--focus-ring-space);

    
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--rev-fade),
      #000 calc(100% - var(--rev-fade)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--rev-fade),
      #000 calc(100% - var(--rev-fade)),
      transparent 100%
    );

    
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  
  .db-reviews__marquee.is-auto {
    scroll-snap-type: none;
  }

  .db-reviews__track {
    display: flex;
    
    align-items: stretch;
    
    inline-size: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  
  .db-reviews .db-review {
    flex: 0 0 var(--rev-card);
    inline-size: var(--rev-card);
    
    margin-inline-end: var(--rev-gap);
    scroll-snap-align: center;
    display: flex;
    
    border-inline-start: 0;
    padding: 0;
  }

  
  .db-reviews .db-review__fig {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-s);
    margin: 0;
    padding: var(--space-m) var(--space-m) var(--space-s);
    inline-size: 100%;
  }

  
  .db-reviews .db-review__stars {
    flex: none;
    font-size: var(--fs-s);
    line-height: 0;
    block-size: 1em;
    
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  
  .db-reviews .db-review__score {
    line-height: 1;
    font-family: var(--font-ui);
    font-size: 0.92em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--gold, #e6b800);
    white-space: nowrap;
  }

  
  .db-reviews .db-review__text {
    
    position: static;
    
    align-self: center;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rev-lines);
    line-clamp: var(--rev-lines);
    overflow: hidden;
    margin: 0;
    max-inline-size: none;
    font-family: var(--font-body);
    font-size: var(--fs-s);
    line-height: var(--lh-prose);
    color: var(--text);
    text-wrap: pretty;

    & p {
      margin: 0;
    }

    & p + p {
      margin-block-start: var(--space-2xs);
    }

    
    &::before {
      content: "“";
      content: "“" / "";
      position: absolute;
      
      inset-inline-start: auto;
      inset-inline-end: 0.18em;
      inset-block-start: -0.04em;
      inset-block-end: auto;
      
      z-index: -1;
      font-family: var(--font-display);
      font-size: 4.5rem;
      line-height: 1;
      color: var(--gold);
      opacity: 0.18;
      pointer-events: none;
    }
  }

  .db-reviews .db-review__foot {
    display: grid;
    flex: none;
    gap: var(--space-4xs);
    margin-block-start: auto;
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--border-subtle);
  }

  
  .db-reviews .db-review__by {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    justify-self: start;
    text-decoration: none;
    color: var(--text);
  }

  .db-reviews a.db-review__by::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
  }

  .db-reviews .db-review__g {
    font-size: var(--fs-s);
  }

  .db-reviews .db-review__author {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-s);
    line-height: var(--lh-ui);
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out);
  }

  
  .db-reviews .db-review__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 var(--space-3xs);
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    line-height: var(--lh-ui);
    color: var(--text-muted);
  }

  
  .db-reviews .db-review__cred + .db-review__date::before {
    content: "·";
    content: "·" / "";
    margin-inline-end: var(--space-3xs);
    color: color-mix(in oklab, var(--text-muted) 60%, transparent);
  }

  
  .db-reviews .db-review__fig:hover {
    & .db-review__author {
      color: var(--gold-bright);
    }

    &::before {
      background-image: linear-gradient(
        140deg var(--in-oklab),
        var(--gold),
        color-mix(in oklab, var(--gold) 30%, transparent) 46%,
        var(--gold)
      );
    }
  }

  
  .db-reviews .db-review__fig:has(.db-review__by:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--rev-radius);
  }

  .db-reviews .db-review__by:focus-visible {
    outline: none;
  }

  

  
  .db-reviews__more {
    margin-block-start: var(--space-xl-fluid);
    text-align: center;
  }

  .db-reviews__moreLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    max-inline-size: 100%;
    min-block-size: var(--tap-min-fine);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-m);
    border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      scale var(--dur-base) var(--ease-out);

    &:hover {
      border-color: color-mix(in oklab, var(--gold) 60%, transparent);
      background-color: color-mix(in oklab, var(--gold) 8%, transparent);
      color: var(--gold-bright);
    }

    &:active {
      scale: 0.97;
    }
  }

  
  .db-reviews__moreLabel {
    white-space: nowrap;
  }

  
  .db-reviews .db-reviews__moreG,
  .db-reviews .db-reviews__moreArrow {
    flex: none;
    inline-size: 1.05em;
    block-size: 1.05em;
    font-size: inherit;
  }

  .db-reviews .db-reviews__moreArrow {
    transition: translate var(--dur-fast) var(--ease-out);
  }

  .db-reviews__moreLink:hover .db-reviews__moreArrow {
    translate: 2px 0;
  }

  @media (pointer: coarse) {
    .db-reviews__moreLink {
      min-block-size: var(--tap-min);
    }
  }

  
  @media (width < 26rem) {
    .db-reviews__moreLink {
      padding-inline: var(--space-xs);
      font-size: 0.6875rem;
      letter-spacing: 0.06em;
    }

    
    .db-reviews__score {
      padding-inline: var(--space-m);
    }

    .db-reviews__scoreCta {
      font-size: 0.6875rem;
      letter-spacing: 0.06em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .db-reviews__moreLink:active {
      scale: 1;
    }
  }

  .db-reviews__langNote {
    margin-block-start: var(--space-2xs);
    font-style: italic;
  }

  
  @media (width >= 48rem) {
    .db-reviews {
      --rev-card-ideal: 21rem;
      --rev-fade: clamp(3rem, 8vw, 7rem);
    }

    .db-reviews__score {
      
      grid-template-columns: auto auto;
      grid-template-areas:
        "brand brand"
        "value stars"
        "cta   cta";
      align-items: center;
      justify-items: center;
      gap: var(--space-2xs) var(--space-m);
      max-inline-size: 30rem;
      padding: var(--space-l) var(--space-xl);
    }

    .db-reviews__scoreBrand {
      grid-area: brand;
    }

    .db-reviews__scoreValue {
      grid-area: value;
    }

    .db-reviews__scoreStars {
      grid-area: stars;
    }

    .db-reviews__scoreCta {
      grid-area: cta;
    }

    .db-reviews .db-reviews__scoreStars .db-rev-stars {
      font-size: var(--fs-l);
    }
  }

  @media (width >= 64rem) {
    .db-reviews {
      --rev-card-ideal: 22rem;
    }

    .db-reviews .db-review__fig {
      padding: var(--space-m-fluid);
    }
  }

  
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes db-rev-rise {
        from {
          opacity: 0;
          transform: translateY(1.25rem);
        }
      }

      
      .db-reviews__score,
      .db-reviews__marquee,
      .db-reviews__more {
        animation: db-rev-rise auto var(--ease-out) backwards;
        animation-timeline: view();
        animation-range: entry 5% entry 60%;
      }
    }
  }

  
  @media (forced-colors: active) {
    .db-reviews .db-reviews__plate::before {
      background-image: none;
      border: 1px solid CanvasText;
      padding: 0;
      mask: none;
      -webkit-mask: none;
    }
  }
}


@layer components {
  
  .db-reviews .db-reviews__score--link,
  .db-reviews .db-review__fig {
    transition:
      scale var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .db-reviews .db-reviews__score--link:active {
    scale: 0.99;

    & .db-reviews__scoreCta {
      color: var(--gold-bright);
    }
  }

  .db-reviews .db-review__fig:active {
    scale: 0.99;

    & .db-review__author {
      color: var(--gold-bright);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .db-reviews :is(.db-reviews__score--link, .db-review__fig):active {
      scale: 1;
    }
  }

  
  .db-reviews .db-reviews__scoreValue {
    text-shadow: 0 0 28px rgb(255 220 102 / 0.28);
  }
}



@layer components {
  
  .db-locatie {
    
    container: locatie / inline-size;

    
    --plate-rule: color-mix(in oklab, var(--gold) 30%, transparent);
    --plate-rule-dim: color-mix(in oklab, var(--gold) 16%, transparent);
    --plate-rule-faint: color-mix(in oklab, var(--gold) 9%, transparent);
    
    --plate-bg: color-mix(in oklab, var(--color-cream) 5%, var(--surface));
    --plate-radius: 1.125rem;
    
    --plate-inset: 5px;
    
    --plate-corner-inset: 10px;
    --plate-corner-size: 1rem;
    
    --plate-pad-i: clamp(2rem, 1.75rem + 1.25vi, 2.5rem); 
    --plate-pad-b: clamp(1.5rem, 1.25rem + 1.25vi, 2rem); 
    
    --plate-seal-w: 2.75rem;
    --plate-sheen: 11s;

    
    --plate-head-gap: var(--space-xs); 
    --plate-head-lead: var(--space-s); 
    --plate-head-trail: var(--space-s); 
  }

  
  .db-locatie__grid {
    display: grid;
    gap: var(--space-l-fluid);
    align-items: start;
  }

  
  .db-locatie__col {
    display: grid;
    gap: var(--space-l-fluid);
    align-content: start;
  }

  @container locatie (inline-size >= 52rem) {
    .db-locatie__grid {
      
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    }

    
    .db-locatie > .db-container > .db-locatie__grid > .db-map {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-m));
    }
  }

  
  .db-plate {
    position: relative;
    isolation: isolate;
    border-radius: var(--plate-radius);
    background-color: var(--plate-bg);
  }

  .db-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(
      100deg var(--in-oklab),
      var(--plate-rule-dim) 0 30%,
      color-mix(in oklab, var(--gold) 55%, transparent) 41%,
      var(--gold-bright) 47%,
      var(--color-cream) 50%,
      var(--gold-bright) 53%,
      color-mix(in oklab, var(--gold) 55%, transparent) 59%,
      var(--plate-rule-dim) 70% 100%
    );
    background-size: 320% 100%;
    
    background-position: 135% 0;
    
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .db-plate::after {
    content: "";
    position: absolute;
    inset: var(--plate-inset);
    z-index: 0;
    border: 1px solid var(--plate-rule-faint);
    border-radius: calc(var(--plate-radius) - var(--plate-inset) + 2px);
    pointer-events: none;
  }

  
  @media (prefers-reduced-motion: no-preference) {
    @keyframes db-plate-sheen {
      from {
        background-position: 135% 0;
      }

      to {
        background-position: -45% 0;
      }
    }

    .db-plate::before {
      animation: db-plate-sheen var(--plate-sheen) linear infinite;
    }
  }

  
  @media (forced-colors: active) {
    .db-plate {
      border: 1px solid CanvasText;
    }

    .db-plate::before {
      display: none;
    }
  }

  
  .db-plate__corner {
    position: absolute;
    z-index: 2;
    inline-size: var(--plate-corner-size);
    block-size: var(--plate-corner-size);
    border: 1px solid color-mix(in oklab, var(--gold) 34%, transparent);
    pointer-events: none;
  }

  .db-plate__corner--tl {
    inset-block-start: var(--plate-corner-inset);
    inset-inline-start: var(--plate-corner-inset);
    border-inline-end: 0;
    border-block-end: 0;
    border-start-start-radius: 0.375rem;
  }

  .db-plate__corner--tr {
    inset-block-start: var(--plate-corner-inset);
    inset-inline-end: var(--plate-corner-inset);
    border-inline-start: 0;
    border-block-end: 0;
    border-start-end-radius: 0.375rem;
  }

  .db-plate__corner--bl {
    inset-block-end: var(--plate-corner-inset);
    inset-inline-start: var(--plate-corner-inset);
    border-inline-end: 0;
    border-block-start: 0;
    border-end-start-radius: 0.375rem;
  }

  .db-plate__corner--br {
    inset-block-end: var(--plate-corner-inset);
    inset-inline-end: var(--plate-corner-inset);
    border-inline-start: 0;
    border-block-start: 0;
    border-end-end-radius: 0.375rem;
  }

  @media (forced-colors: active) {
    .db-plate__corner {
      display: none;
    }
  }

  
  .db-plate__seal {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--plate-seal-w);
    block-size: 2.25rem;
    border-radius: var(--radius-pill);
    color: var(--gold-bright);
    background-image: radial-gradient(
      120% 120% at 50% 0%,
      color-mix(in oklab, var(--gold) 13%, transparent),
      transparent 70%
    );
    box-shadow:
      0 0 0 1px var(--plate-rule),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px var(--plate-rule-faint);

    & :where(svg) {
      inline-size: var(--icon-m);
      block-size: var(--icon-m);
    }
  }

  
  .db-locatie .db-info {
    display: grid;
    gap: 0;
    padding: var(--plate-pad-b) var(--plate-pad-i);
  }

  
  .db-locatie .db-plate__head {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    
    inline-size: 100%;
    
    min-inline-size: 0;
    gap: var(--plate-head-gap);
    padding-block-end: var(--plate-head-lead);
    margin-block-end: var(--plate-head-trail);
    border-block-end: 1px solid var(--plate-rule-faint);
    text-align: center;
  }

  .db-locatie .db-plate__label {
    min-inline-size: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    
    font-size: var(--fs-m);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--text);

    
    & strong {
      font-weight: inherit;
    }
  }

  @media (width >= 23rem) {
    .db-locatie .db-plate__label {
      font-size: var(--fs-l);
    }
  }

  
  .db-locatie .db-info__row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-xs);
    font-size: var(--fs-s);
    line-height: var(--lh-prose);

    & + .db-info__row {
      border-block-start: 1px solid color-mix(in oklab, var(--color-cream) 6%, transparent);
    }

    & a {
      color: var(--text);
      text-decoration: underline;
      text-decoration-color: color-mix(in oklab, var(--gold) 45%, transparent);
      text-underline-offset: 0.18em;
      transition: color var(--dur-fast) var(--ease-out);

      &:hover {
        color: var(--gold-bright);
      }
    }

    & address {
      font-style: normal;
    }
  }

  
  .db-locatie .db-info__icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--gold);
    box-shadow:
      0 0 0 1px var(--plate-rule-dim),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px var(--plate-rule-faint);

    & :where(svg) {
      inline-size: var(--icon-s);
      block-size: var(--icon-s);
    }
  }

  .db-info__val {
    min-inline-size: 0;
  }

  
  .db-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    padding-block-start: var(--space-m);
    margin-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--plate-rule-faint);
  }

  .db-actions__go {
    
    flex: 1 1 100%;
    
    padding-inline: var(--space-m);
    text-wrap: balance;

    & :where(svg) {
      inline-size: var(--icon-s);
      block-size: var(--icon-s);
    }
  }

  .db-actions__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: 0;
  }

  
  .db-locatie .db-social__link {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    border: 0;
    background-color: transparent;
    color: var(--gold);
    box-shadow:
      0 0 0 1px var(--plate-rule-dim),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px var(--plate-rule-faint);

    &:hover {
      background-color: transparent;
      color: var(--gold-bright);
      box-shadow:
        0 0 0 1px var(--plate-rule),
        inset 0 0 0 3px var(--bg),
        inset 0 0 0 4px var(--plate-rule-dim);
    }
  }

  
  .db-locatie .db-hours {
    
    container: hours / inline-size;
    
    display: grid;
    gap: 0;
    padding: var(--plate-pad-b) var(--plate-pad-i);
    border: 0;
    border-radius: var(--plate-radius);
    background-color: var(--plate-bg);
    background-image: none;
    box-shadow: none;
  }

  
  .db-locatie .db-hours > .db-hours__status {
    justify-self: center;
    margin-block-end: var(--space-xs);
  }

  
  .db-locatie .db-hours__list {
    position: relative;
    z-index: 1;
    padding-block-start: 0;
    border-block-start: 0;
  }

  
  .db-hours__dash {
    padding-inline: 0.35em;
    color: color-mix(in oklab, var(--gold) 55%, transparent);
  }

  .db-locatie .db-hours__row--today .db-hours__dash {
    color: var(--gold-bright);
  }

  
  .db-locatie .db-hours__row {
    position: relative;
    z-index: 1;
    margin-inline: calc(-1 * var(--space-2xs));
    padding-inline: var(--space-2xs);
  }

  
  .db-locatie .db-map {
    display: grid;
    gap: var(--space-s);
    padding: var(--plate-inset);
    
    overflow: clip;
  }

  .db-locatie .db-map__placeholder {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    
    align-content: start;
    gap: var(--space-s);
    inline-size: 100%;
    
    min-block-size: clamp(18rem, 46cqi, 30rem);
    
    padding: var(--plate-pad-b) calc(var(--plate-pad-i) - var(--plate-inset));
    
    padding-block-start: calc(var(--plate-pad-b) - var(--plate-inset));
    border: 0;
    border-radius: calc(var(--plate-radius) - var(--plate-inset));
    background-color: transparent;
    background-image: radial-gradient(
      110% 90% at 50% 0%,
      color-mix(in oklab, var(--gold) 7%, transparent),
      transparent 68%
    );
    text-align: center;
  }

  
  .db-locatie .db-map__placeholder > .db-plate__head {
    margin-block-end: 0;
  }

  .db-map__address {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  
  .db-locatie .db-map__btn {
    max-inline-size: 100%;
    
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    background-image: none;
    color: var(--gold-bright);
    box-shadow:
      0 0 0 1px var(--plate-rule),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px var(--plate-rule-faint);

    &:hover {
      background-color: transparent;
      color: var(--color-cream);
      box-shadow:
        0 0 0 1px var(--gold),
        inset 0 0 0 3px var(--bg),
        inset 0 0 0 4px var(--plate-rule-dim);
    }
  }

  .db-locatie .db-map__notice {
    max-inline-size: 40ch;
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    line-height: var(--lh-prose);
    text-wrap: pretty;

    & a {
      color: var(--gold);
      text-underline-offset: 0.18em;

      &:hover {
        color: var(--gold-bright);
      }
    }
  }

  .db-map__fallback {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;

    & a {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      min-block-size: var(--tap-min-fine);
      color: var(--gold);

      &:hover {
        color: var(--gold-bright);
      }
    }
  }

  .db-map__extico {
    inline-size: 0.9em;
    block-size: 0.9em;
    opacity: 0.75;
  }

  
  .db-locatie .db-map__frame {
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: calc(var(--plate-radius) - var(--plate-inset));
  }

  
  .db-locatie .db-map > :is(.db-map__notice, .db-map__fallback) {
    position: relative;
    z-index: 1;
    justify-self: center;
    padding-inline: var(--space-m);
    text-align: center;
  }

  
  .db-locatie .db-map > :is(.db-map__notice, .db-map__fallback):last-child {
    margin-block-end: var(--space-s);
  }

  
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      @keyframes db-locatie-rise {
        from {
          opacity: 0;
          transform: translateY(1.25rem);
        }

        to {
          opacity: 1;
          transform: none;
        }
      }

      .db-locatie [data-reveal] {
        animation: db-locatie-rise linear both;
        animation-timeline: view();
        
        animation-range: entry 4% cover 24%;
      }

      
      .db-locatie .db-section__head {
        animation: db-locatie-rise linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 18%;
      }
    }
  }

  
  @media print {
    .db-locatie .db-plate {
      border: 1px solid #000;
      background: none;
    }

    .db-locatie :is(.db-plate::before, .db-plate::after, .db-plate__corner, .db-plate__seal) {
      display: none;
    }

    .db-locatie .db-map__btn {
      display: none;
    }
  }
}


@layer components {
  
  .db-locatie .db-info__val :where(a) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    
    margin-inline-start: calc(-1 * var(--space-2xs));
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-ui);
    color: var(--gold);
    text-decoration-line: underline;
    text-decoration-color: color-mix(in oklab, var(--gold) 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      text-decoration-color var(--dur-fast) var(--ease-out);

    &:hover {
      background-color: color-mix(in oklab, var(--gold) 10%, transparent);
      color: var(--gold-bright);
      text-decoration-color: currentcolor;
    }

    &:active {
      background-color: color-mix(in oklab, var(--gold) 18%, transparent);
      color: var(--gold-bright);
    }
  }

  
  .db-locatie .db-info__row:has(.db-info__val > a) {
    align-items: center;
  }

  
  .db-locatie .db-social__link {
    transition:
      box-shadow var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      scale var(--dur-fast) var(--ease-out);

    &:active {
      scale: 0.94;
      background-color: color-mix(in oklab, var(--gold) 16%, transparent);
      color: var(--gold-bright);
    }
  }

  .db-locatie .db-map__btn {
    transition:
      box-shadow var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      scale var(--dur-fast) var(--ease-out);

    &:active {
      scale: 0.98;
      background-color: color-mix(in oklab, var(--gold) 16%, transparent);
      color: var(--color-cream);
    }
  }

  .db-locatie :is(.db-map__notice, .db-map__fallback) a:active {
    color: var(--gold-bright);
  }

  @media (prefers-reduced-motion: reduce) {
    .db-locatie :is(.db-social__link, .db-map__btn):active {
      scale: 1;
    }
  }

  
  .db-locatie .db-info__icon {
    color: color-mix(in oklab, var(--gold) 76%, var(--color-cream));
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--gold) 16%, transparent),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px color-mix(in oklab, var(--gold) 7%, transparent);
  }

  
  .db-locatie .db-actions .db-social__link {
    color: color-mix(in oklab, var(--gold) 76%, var(--color-cream));
  }

  
  .db-locatie .db-map__btn {
    color: color-mix(in oklab, var(--gold) 88%, var(--color-cream));
  }
}


@layer components {
  
  .db-locatie :is(.db-info__icon, .db-actions__go) :where(svg) {
    stroke-width: 1.95;
  }

  
  .db-locatie .db-map__extico {
    inline-size: 1em;
    block-size: 1em;
    stroke-width: 2.9;
    opacity: 1;
  }

  
  .db-locatie .db-plate__seal :where(svg) {
    inline-size: var(--seal-glyph, var(--icon-m));
    block-size: var(--seal-glyph, var(--icon-m));
    stroke-width: var(--seal-stroke, 1.75);
  }

  .db-locatie .db-info .db-plate__seal {
    --seal-glyph: 1.3156rem; 
    --seal-stroke: 1.665;
  }

  
  .db-locatie .db-social__link :where(svg) {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
}


@layer components {
  
  .db-locatie .db-hours__row {
    align-items: center;
    min-block-size: 2.625rem; 
  }

  
  @media (width < 22.5rem) {
    .db-locatie {
      --plate-pad-i: var(--space-m); 
      --plate-corner-inset: 8px;
      --plate-corner-size: 0.875rem;
    }

    .db-locatie .db-info__row {
      column-gap: var(--space-xs);
    }

    
    .db-locatie .db-info__val :where(a) {
      margin-inline-start: 0;
      padding-inline: 0;
    }
  }

  
}

@layer components {

  .db-actions {
    
    --actions-inset: 4px;
    --actions-radius: var(--radius-card);

    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    
    flex-direction: column;
    align-items: stretch;
    margin-block-start: var(--space-m);
  }

  @media (min-width: 30rem) {
    .db-actions {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }

    .db-actions--plate,
    .db-actions--spread {
      justify-content: space-between;
    }
  }

  .db-actions--plate {
    padding: var(--space-s-fluid);
    border-radius: var(--actions-radius);
    background-image: var(--surface-lift);
    box-shadow:
      0 0 0 1px var(--border),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px color-mix(in oklab, var(--gold) 15%, transparent);
  }

  .db-actions__route {
    position: relative;
    isolation: isolate; 
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);

    min-block-size: var(--tap-min); 
    padding: var(--space-xs) var(--space-l);
    border: 0;
    border-radius: var(--radius-ui);

    background-color: color-mix(in oklab, var(--gold) 10%, var(--surface));
    color: var(--gold-bright);

    font-family: var(--font-ui);
    font-weight: var(--fw-ui-strong);
    font-size: var(--fs-s);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    box-shadow:
      0 0 0 1px var(--border-strong),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px color-mix(in oklab, var(--gold) 16%, transparent);

    transition:
      background-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

    & :where(svg, img) {
      inline-size: var(--icon-m);
      block-size: var(--icon-m);
      flex: none;
      
      color: var(--gold);
    }

    &:hover {
      background-color: color-mix(in oklab, var(--gold) 16%, var(--surface));
      color: var(--gold-bright);
      box-shadow:
        0 0 0 1px var(--gold),
        inset 0 0 0 3px var(--bg),
        inset 0 0 0 4px color-mix(in oklab, var(--gold) 26%, transparent);
    }

    &:active {
      background-color: color-mix(in oklab, var(--gold) 22%, var(--surface));
    }
  }

  @media (max-width: 29.999rem) {
    .db-actions__route {
      inline-size: 100%;
    }
  }

  .db-actions__route::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    z-index: -1;
    background-image: linear-gradient(
      90deg,
      transparent 0 30%,
      color-mix(in oklab, var(--gold) 55%, transparent) 41%,
      var(--gold-bright) 47%,
      var(--color-cream) 50%,
      var(--gold-bright) 53%,
      color-mix(in oklab, var(--gold) 55%, transparent) 59%,
      transparent 70% 100%
    );
    background-size: 220% 100%;
    background-position: 150% 0;
    opacity: 0;
    transition:
      opacity var(--dur-fast) var(--ease-out),
      background-position 900ms var(--ease-out);
  }

  .db-actions__route:hover::after,
  .db-actions__route:focus-visible::after {
    opacity: 1;
    background-position: -50% 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .db-actions__route::after {
      transition: opacity var(--dur-fast) var(--ease-out);
    }
    .db-actions__route:hover::after,
    .db-actions__route:focus-visible::after {
      background-position: 50% 0; 
    }
  }

  .db-actions__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
  }

  @media (max-width: 29.999rem) {
    .db-actions__social {
      justify-content: flex-start;
    }
  }

  .db-actions .db-social__link {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    border: 0;
    border-radius: var(--radius-ui); 
    background-color: var(--surface);
    color: var(--text-muted);
    box-shadow:
      0 0 0 1px var(--border),
      inset 0 0 0 3px var(--bg),
      inset 0 0 0 4px color-mix(in oklab, var(--gold) 9%, transparent);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

    &:hover {
      background-color: var(--surface-raised);
      color: var(--gold-bright);
      box-shadow:
        0 0 0 1px var(--border-strong),
        inset 0 0 0 3px var(--bg),
        inset 0 0 0 4px color-mix(in oklab, var(--gold) 18%, transparent);
    }

    &:active {
      background-color: color-mix(in oklab, var(--gold) 18%, var(--surface));
      color: var(--gold-bright);
    }
  }

  .db-actions--plate .db-social__link {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 14%, transparent);

    &:hover {
      box-shadow: 0 0 0 1px var(--border-strong);
    }
  }

  .db-actions__label {
    font-family: var(--font-ui);
    font-weight: var(--fw-ui);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  
  .db-actions__route:focus-visible,
  .db-actions .db-social__link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  @media (forced-colors: active) {
    .db-actions__route,
    .db-actions .db-social__link {
      border: 1px solid ButtonText;
    }
    .db-actions__route::after {
      display: none;
    }
  }

  @media print {
    .db-actions--plate {
      background-image: none;
      box-shadow: none;
      border: 1px solid #000;
    }
    .db-actions__route,
    .db-actions .db-social__link {
      background-color: transparent;
      color: #000;
      box-shadow: none;
      border: 1px solid #000;
    }
    .db-actions__route::after {
      display: none;
    }
  }
}

@layer components {
  .kaart {
    --k-pad: clamp(1.125rem, 0.85rem + 1.4vi, 1.75rem);
    
    --k-stage-h: calc(72dvh - var(--k-bar-h));
    --k-rule: color-mix(in oklab, var(--gold) 24%, transparent);

    position: relative;
    background-color: var(--color-bg);
  }

  @media (width >= 48rem) {
    .kaart {
      max-inline-size: 30rem;
      margin-inline: auto;
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 12%, transparent);
    }

    .kaart {
      --k-stage-h: min(calc(72dvh - var(--k-bar-h)), 34rem);
    }
  }

  .kaart-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background-color: color-mix(in oklab, var(--color-bg) 82%, transparent);
    border-block-end: 1px solid color-mix(in oklab, var(--gold) 14%, transparent);

    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(var(--blur-header, 20px)) saturate(1.2);
    }
  }

  .kaart-bar__top {
    display: grid;
    
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2xs);
    block-size: var(--k-top-h);
    padding-inline: var(--k-pad);
  }

  .kaart-rail {
    block-size: calc(var(--k-rail-h) - 1px); 
    mask-image: linear-gradient(to right, transparent, #000 var(--k-pad),
      #000 calc(100% - var(--k-pad)), transparent);
  }

  .kaart-rail__track {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    block-size: 100%;
    margin: 0;
    padding: 0 var(--k-pad) 0.375rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    list-style: none;
  }

  .kaart-rail__track::-webkit-scrollbar {
    display: none;
  }

  .kaart-rail__track > li {
    flex: none;
  }

  .kaart-rail__chip {
    display: inline-flex;
    align-items: center;
    block-size: 2rem;
    padding-inline: 0.875rem;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent);
    color: color-mix(in oklab, var(--color-cream) 82%, transparent);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }

  .kaart-rail__chip--feat {
    color: var(--gold-bright);
  }

  @media (hover: hover) and (pointer: fine) {
    .kaart-rail__chip:hover {
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent);
      color: var(--color-cream);
    }
  }

  .kaart-rail__chip[aria-current='true'] {
    background-color: var(--gold);
    box-shadow: 0 0 18px -4px color-mix(in oklab, var(--gold) 55%, transparent);
    color: #14100d;
  }

  .kaart-next {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 3.5rem;
    margin-block-start: var(--space-m);
    padding-inline: var(--space-m);
    border-radius: var(--radius-card);
    background-color: color-mix(in oklab, var(--gold) 5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent);
    color: var(--color-cream);
    text-decoration: none;
    transition: background-color var(--dur-base) var(--ease-out);
  }

  .kaart-next__k {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .kaart-next__name {
    flex: 1;
    font-family: var(--font-display);
    font-size: var(--fs-l);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .kaart-next__i {
    color: var(--gold);
    transition: translate var(--dur-base) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .kaart-next:hover {
      background-color: color-mix(in oklab, var(--gold) 10%, transparent);
    }

    .kaart-next:hover .kaart-next__i {
      translate: 3px 0;
    }
  }

  .kaart-bar__back,
  .kaart-bar__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    
    justify-content: center;
    min-inline-size: var(--tap-min, 44px);
    min-block-size: var(--tap-min, 44px);
    color: var(--color-cream);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
  }

  .kaart-bar__back-i {
    rotate: 180deg;
    color: var(--gold);
  }

  .kaart-bar__back span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .kaart-bar__now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    justify-self: center;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--tap-min, 44px);
    margin: 0;
    padding-inline: var(--space-s);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-align: center;
  }

  .kaart-bar__now-label {
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  button.kaart-bar__now {
    cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  button.kaart-bar__now:hover,
  button.kaart-bar__now:focus-visible {
    background-color: color-mix(in oklab, var(--gold) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent);
  }

  .kaart-bar__chev {
    flex: none;
    color: color-mix(in oklab, var(--gold) 80%, transparent);
    transition: rotate var(--dur-base) var(--ease-out);
  }

  button.kaart-bar__now[aria-expanded='true'] .kaart-bar__chev {
    rotate: 180deg;
  }

  .kaart-bar__back {
    justify-self: start;
  }

  .kaart-bar__lang {
    justify-self: end;
    color: var(--gold);
  }

  .kaart-bar__back span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kaart-stage {
    position: relative;
    block-size: var(--k-stage-h);
    
    scroll-snap-align: start;
    
    scroll-snap-stop: always;
  }

  .kaart-cat[data-reading] > .kaart-stage {
    scroll-snap-align: none;
    overflow: hidden;
    background-color: #000;
    isolation: isolate;
  }

  .kaart-stage > picture,
  .kaart-stage__poster,
  .kaart-stage__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .kaart-stage__video {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
  }

  .kaart-stage__video[data-playing] {
    opacity: 1;
  }

  .kaart-stage__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to bottom, color-mix(in oklab, #000 55%, transparent) 0%, transparent 26%),
      linear-gradient(to top, color-mix(in oklab, #000 88%, transparent) 0%,
        color-mix(in oklab, #000 55%, transparent) 26%, transparent 52%);
  }

  .kaart-cover {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    padding: var(--k-pad);
    padding-block-end: calc(var(--k-pad) * 1.6);
  }

  .kaart-cover__of {
    margin: 0 0 var(--space-3xs);
    color: color-mix(in oklab, var(--color-cream) 62%, transparent);
    font-family: var(--font-ui);
    font-size: var(--fs-3xs, 0.6875rem);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .kaart-cover__title {
    margin: 0;
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 1.9rem + 4.2vi, 4.5rem);
    line-height: 0.94;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .kaart-cover__title--big {
    font-size: clamp(3.25rem, 2.2rem + 5vi, 5.5rem);
  }

  .kaart-cover__spark {
    color: var(--gold-bright);
    margin-inline-end: 0.2em;
    vertical-align: 0.06em;
    font-size: 0.5em;
  }

  .kaart-cover__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 0.9em;
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .kaart-cover__count {
    color: color-mix(in oklab, var(--color-cream) 72%, transparent);
  }

  .kaart-cover__from {
    color: var(--gold);
  }

  .kaart-cover__scroll {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: var(--space-s) 0 0;
    color: color-mix(in oklab, var(--color-cream) 66%, transparent);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .kaart-cover__scroll-i {
    animation: kaart-nudge 1.8s var(--ease-in-out, ease-in-out) infinite;
  }

  @keyframes kaart-nudge {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 0.28em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kaart-cover__scroll-i {
      animation: none;
    }
  }

  .kaart-list {
    padding: var(--space-m) var(--k-pad) var(--space-xl);
    border-block-end: 1px solid color-mix(in oklab, var(--gold) 10%, transparent);
  }

  .kaart-list__note {
    display: inline-block;
    margin: 0 0 var(--space-s);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklab, var(--gold) 6%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 18%, transparent);
    color: color-mix(in oklab, var(--gold) 88%, var(--color-cream));
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .kaart-dishes {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kaart-dish {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.15rem;
    column-gap: var(--space-s);
    padding-block: var(--space-2xs);
    border-block-start: 1px solid color-mix(in oklab, var(--color-cream) 8%, transparent);
  }

  .kaart-dish:first-child {
    border-block-start: 0;
  }

  .kaart-dish__name {
    grid-column: 1;
    margin: 0;
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: var(--fs-s);
    line-height: var(--lh-tight, 1.25);
  }

  .kaart-dish__price {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: var(--fs-s);
    font-weight: var(--fw-ui-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .kaart-dish__desc,
  .kaart-dish__note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    line-height: var(--lh-body, 1.5);
  }

  .kaart-dish__note {
    color: color-mix(in oklab, var(--gold) 70%, var(--muted));
  }

  .kaart-dish__badge {
    display: inline-flex;
    margin-inline-start: 0.4em;
    vertical-align: -0.1em;
  }

  .kaart-dish__badge--vega .kaart-dish__badge-i {
    color: #7bbf6a;
  }

  .kaart-dish__badge--spicy .kaart-dish__badge-i {
    color: var(--flame, #ff5500);
  }

  .kaart-end {
    padding: var(--space-xl) var(--k-pad) calc(var(--space-2xl) + 4rem);
    text-align: center;
  }

  .kaart-end__note {
    margin: 0 0 var(--space-2xs);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    line-height: var(--lh-body, 1.5);
  }

  .kaart-end__nap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-block-start: var(--space-l);
    font-style: normal; 
  }

  .kaart-end__name {
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }

  .kaart-end__line {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    line-height: var(--lh-body, 1.5);
    text-decoration: none;
  }

  .kaart-end__tel {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min, 44px);
    color: var(--color-cream);
  }

  .kaart-end__legal {
    margin: var(--space-m) 0 0;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-3xs, 0.6875rem);
    line-height: var(--lh-body, 1.5);
  }

  .kaart-end__legal-a {
    color: var(--muted);
  }

  .kaart-end__call,
  .kaart-end__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-block-size: var(--tap-min, 44px);
    margin-block-start: var(--space-m);
    padding-inline: var(--space-l);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
  }

  .kaart-end__call {
    background-color: var(--gold);
    color: #14100d;
  }

  .kaart-end__back {
    display: flex;
    inline-size: fit-content;
    margin-inline: auto;
    color: var(--color-cream);
    box-shadow: inset 0 0 0 1px var(--k-rule);
  }

  .kaart-index {
    padding: 0 var(--k-pad) var(--space-xl);
  }

  .kaart-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kaart-index__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: var(--tap-min, 44px);
    padding-inline: var(--space-2xs);
    border-block-end: 1px solid color-mix(in oklab, var(--color-cream) 8%, transparent);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: var(--fs-m);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .kaart-index__n {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
  }

  .kaart-index[data-panel] {
    position: fixed;
    inset-block: auto 0;
    inset-inline: 0;
    z-index: 30;
    max-block-size: 72dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-m) var(--k-pad) var(--space-xl);
    background-color: color-mix(in oklab, var(--surface) 96%, transparent);
    border-block-start: 1px solid var(--k-rule);
    border-start-start-radius: var(--radius-card);
    border-start-end-radius: var(--radius-card);
    
    translate: 0 100%;
    opacity: 0;
    visibility: hidden;
    transition:
      translate var(--dur-base) var(--ease-in-out),
      opacity var(--dur-fast) var(--ease-in-out),
      visibility 0s linear var(--dur-base);
  }

  @media (width >= 48rem) {
    .kaart-index[data-panel] {
      inline-size: min(100%, 30rem);
      margin-inline: auto;
    }
  }

  .kaart-index[data-panel][data-open] {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    transition:
      translate var(--dur-slow) var(--ease-out),
      opacity var(--dur-fast) var(--ease-out),
      visibility 0s;
  }

  .kaart-index[data-panel] .kaart-index__link {
    translate: 0 0.5rem;
    opacity: 0;
    transition:
      translate var(--dur-base) var(--ease-out),
      opacity var(--dur-base) var(--ease-out);
  }

  .kaart-index[data-panel][data-open] .kaart-index__link {
    translate: 0 0;
    opacity: 1;
    transition-delay: calc(var(--i, 0) * 24ms);
  }

  .kaart-scrim {
    position: fixed;
    inset: 0;
    z-index: 29;
    background-color: color-mix(in oklab, #000 62%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-in-out), visibility 0s linear var(--dur-base);
  }

  .kaart-scrim[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
  }

  @media print {
    .kaart-bar,
    .kaart-next,
    .kaart-stage,
    .kaart-scrim,
    .kaart-end__call,
    .kaart-end__back {
      display: none;
    }

    .kaart-cat::before {
      content: attr(data-kaart-cat);
    }
  }
}

@layer components {
  html:has(.kaart) {
    
    --k-top-h: 3.25rem;
    --k-rail-h: 2.75rem;
    --k-bar-h: calc(var(--k-top-h) + var(--k-rail-h));
    scroll-snap-type: y proximity;
    background-color: var(--color-bg);

    scroll-padding-block-start: var(--k-bar-h);
  }

  @media (prefers-reduced-motion: reduce) {
    html:has(.kaart) {
      scroll-snap-type: none;
    }
  }
}

@layer components {
  .db-consent {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 60;
    padding: var(--space-2xs);
  }

  .db-consent[hidden] {
    display: none;
  }

  .db-consent__box {
    max-inline-size: 34rem;
    margin-inline: auto;
    padding: var(--space-m);
    border-radius: var(--radius-card);
    background-color: color-mix(in oklab, var(--surface) 97%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--gold) 26%, transparent),
      0 10px 34px color-mix(in oklab, #000 62%, transparent);

    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(var(--blur-header, 20px)) saturate(1.2);
    }
  }

  .db-consent__title {
    margin: 0 0 var(--space-3xs);
    color: var(--color-cream);
    font-family: var(--font-ui);
    font-size: var(--fs-s);
    font-weight: var(--fw-ui-strong);
  }

  .db-consent__text {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    line-height: var(--lh-body, 1.5);
    text-wrap: pretty;
  }

  .db-consent__link {
    color: var(--gold);
  }

  .db-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-s);
  }

  .db-consent__btn {
    flex: 1 1 9rem;
    min-block-size: var(--tap-min, 44px);
    padding-inline: var(--space-m);
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 34%, transparent);
    color: var(--color-cream);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  .db-consent__btn:hover,
  .db-consent__btn:focus-visible {
    background-color: color-mix(in oklab, var(--gold) 12%, transparent);
  }

  .db-consent__btn--yes {
    background-color: var(--gold);
    box-shadow: none;
    color: #14100d;
  }

  .db-consent__btn--yes:hover,
  .db-consent__btn--yes:focus-visible {
    background-color: var(--gold-bright);
  }

  .db-footer__consent {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

  @media print {
    .db-consent,
    .db-footer__consent {
      display: none;
    }
  }
}



@layer components {
  

  .db-actions {
    flex-wrap: nowrap;
  }

  .db-actions__go {
    flex: 0 0 auto;
  }

  @media (min-width: 30rem) {
    .db-actions {
      flex-wrap: wrap;
    }
  }

  

  .db-actions__social > .u-visually-hidden {
    position: absolute;
  }

  

  #home,
  #usps,
  #menu,
  #reviews,
  #locatie {
    scroll-margin-block-start: var(--header-height, 3.75rem);
  }

  .dbm-cat {
    scroll-margin-block-start: calc(
      var(--header-height, 3.75rem) + var(--filters-height, 4rem)
    );
  }

  

  .db-btn:not(.db-btn--sm) {
    min-block-size: 3rem;
  }

  
  .db-locatie .db-map__btn {
    padding-inline: var(--space-m);
  }

  
  @media (width < 26rem) {
    .db-locatie .db-map__btn {
      padding-inline: var(--space-s);
    }
  }

  

  .db-locatie .db-plate__seal {
    block-size: var(--plate-seal-w);
  }

  

  .db-actions .db-social__link {
    border-radius: var(--radius-round);
  }

  

  .db-header .db-lang {
    padding-block: 0;
  }

  .db-header .db-lang__link {
    min-block-size: calc(var(--tap-min) - 2px);
  }

  

  .dbm-tools .dbm-tools__btn .dbm-tools__i {
    inline-size: var(--icon-m);
    block-size: var(--icon-m);
  }

  

  @supports (padding: round(41px, 8px)) {
    .db-section {
      padding-block: round(calc(var(--section-gap) / 2), 8px);
    }

    
    .db-footer {
      margin-block-start: round(calc(var(--section-gap) / 2), 8px);
      padding-block-start: round(var(--space-2xl-fluid), 8px);
    }
  }

  
  .hero {
    padding-block-end: 4.5rem;
  }

  

  @media (width >= 23rem) {
    .db-locatie .db-map__title {
      font-size: var(--fs-l);
    }
  }

  

  @container hours (inline-size < 14rem) {
    .db-locatie .db-hours > .db-hours__head + .db-hours__status {
      margin-inline-start: 0;
      max-inline-size: 100%;
      padding-inline: 0.6em;
      letter-spacing: normal;
      white-space: normal;
      text-wrap: balance;
    }
  }
}

@layer components {
  
  :root {
    --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-press: linear(
      0, 0.106 2.6%, 0.412 6.9%, 1.038 15.5%, 1.166 18.4%, 1.219 21.3%,
      1.209 24.5%, 1.145 27.9%, 1.006 32.6%, 0.974 35.1%, 0.968 38.1%,
      0.994 45.3%, 1.007 53%, 0.999 70.5%, 1
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes db-rise-in {
        from {
          opacity: 0;
          translate: 0 1.25rem;
        }
      }

      .db-section__head,
      .db-usps__list > .db-usp,
      .db-divider,
      .db-menu__note,
      .db-reviews__score,
      .db-footer__col,
      .db-footer__bottom {
        animation: db-rise-in auto linear backwards;
        animation-timeline: view();
        animation-range: entry 0% cover 32%;
      }

      .db-usps__list > .db-usp:nth-child(2) {
        animation-range: entry 4% cover 36%;
      }
      .db-usps__list > .db-usp:nth-child(3) {
        animation-range: entry 8% cover 40%;
      }
      .db-usps__list > .db-usp:nth-child(4) {
        animation-range: entry 12% cover 44%;
      }

      @keyframes db-divider-in {
        from {
          opacity: 0;
          scale: 0.72;
          rotate: -12deg;
        }
      }

      .db-divider {
        animation: db-divider-in auto linear backwards;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
      }

      .hero,
      .hero__inner,
      .hero__title,
      .hero__logo {
        animation: none;
      }
    }
  }

  .db-btn,
  .db-menu__filter,
  .db-social__link,
  .db-lang__link,
  .db-nav__link,
  .hero__btn,
  .db-map__btn,
  .db-reviews__score--link {
    transition:
      scale var(--dur-base) var(--ease-press),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  @media (prefers-reduced-motion: no-preference) {
    .db-btn:active,
    .db-menu__filter:active,
    .db-social__link:active,
    .db-lang__link:active,
    .hero__btn:active,
    .db-map__btn:active,
    .db-reviews__score--link:active {
      scale: 0.965;
      transition-duration: var(--dur-instant);
    }

    .db-nav__link:active {
      translate: 0 1px;
      transition-duration: var(--dur-instant);
    }

    .db-social__link:active {
      scale: 0.9;
    }
  }

  .dbm-cats {
    view-transition-name: db-menu-cats;
  }

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(db-menu-cats) {
      animation: db-vt-out var(--dur-fast) var(--ease-out) both;
    }

    ::view-transition-new(db-menu-cats) {
      animation: db-vt-in var(--dur-base) var(--ease-out) both;
    }

    @keyframes db-vt-out {
      to {
        opacity: 0;
      }
    }

    @keyframes db-vt-in {
      from {
        opacity: 0;
        translate: 0 0.5rem;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  
  @media (prefers-reduced-motion: no-preference) {
    .db-nav,
    .dbm-filters__track {
      scroll-snap-type: inline proximity;
      scroll-padding-inline: var(--space-s);
    }

    .db-nav__link,
    .dbm-filters__item {
      scroll-snap-align: start;
    }
  }
}