/* ============================================
   RESET, VARIABLES, BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {

  --gap-logo-circle: 180px;
  --gap-circle-nav: calc(var(--gap-logo-circle) / 2);

  --color-red: #f32328;
  --color-yellow: #fbcc05;
  --color-grey-dark: #1a1a1a;
  --color-grey: #2b2b2b;
  --color-grey-light: #3f3f3f;
  --color-white: #ffffff;
  --color-off-white: #f5f5f5;

  /* Soft black (7, 7, 7) used for the page sections.
     The footer, header and hero stay pure #000000. */
  --color-black-soft: #070707;

  /* Faint grey used for the footer top border and the image outlines */
  --color-line: #333333;

  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;

  --logo-size: min(90vw, 900px);

  /* ONE shared spacing value for every full-width section, so the
     gap between any two sections on the page is always identical —
     this matches the food-categories (menu) section gap. */
  --space-section-y: clamp(40px, 6vw, 72px);
  --space-section-x: 24px;

  /* Thickness of the grey outline on the diagonal image triangles */
  --edge-line: 4px;
}

/* Chinese language mode: swap fonts so Chinese characters render properly.
   Georgia and the body stack have no Chinese glyphs. */
html[lang="zh-CN"] {
  --font-heading: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
}

/* Fake italics look bad on Chinese characters */
html[lang="zh-CN"] .quote-text,
html[lang="zh-CN"] .footer-tagline,
html[lang="zh-CN"] .footer-story-col a {
  font-style: normal;
}

html {
  scroll-behavior: smooth;
  /* Keeps anchor jumps (#menu, #otimes, #find-us) from hiding under the fixed header */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1280px) {
  html {
    scroll-padding-top: 70px;
  }
}

body {
  font-family: var(--font-body);
  background-color: var(--color-grey-dark);
  color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

/* Keyboard users still get a visible focus ring */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   STICKY HEADER
   Desktop: full nav links on the right.
   1280px and below: the links turn into a dropdown
   opened by the hamburger (.site-header-toggle).
   ============================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background-color: #000000;

  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--transition-medium), opacity var(--transition-medium);
  pointer-events: none;
}

.site-header.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.site-header.compact {
  height: 90px;
}

.site-header-contact {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.site-header-contact:hover {
  color: var(--color-yellow);
}

.site-header-contact svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.site-header-contact-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Language toggle. Used in the sticky header AND inside the hero phone
   box (.hygiene-rating). Both boxes share the same top edge and height,
   so the button lands on the exact same spot in each. Sits between the
   phone number and the logo. The look comes from the btn and btn-primary
   classes on the button itself, so it matches Eat In and Our Story.
   It is centred with auto margins instead of a transform, so the btn
   pressed effect still works. */
.site-header-lang {
  position: absolute;
  left: 200px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 2;
}

.site-header-logo-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.site-header-logo {
  height: 200px;
  width: auto;
  display: block;
}

.site-header-nav {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 28px;
  z-index: 2;
}

.site-header-nav a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.site-header-nav a:hover {
  color: var(--color-yellow);
}

.site-header-nav .btn {
  height: 42px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
}

.site-header-nav .btn:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

/* Hamburger for the sticky header. Hidden on desktop. */
.site-header-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 46px;
  height: 46px;
  z-index: 3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform var(--transition-fast),
              box-shadow 0.12s ease;
}

.site-header-toggle:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);
}

.site-header-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.site-header-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header-toggle.active span:nth-child(2) {
  opacity: 0;
}

.site-header-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (hover: hover) {
  .site-header-toggle:hover span {
    background-color: var(--color-yellow);
  }
}

/* Slightly tighter nav on smaller desktops so it never touches the logo */
@media (min-width: 1281px) and (max-width: 1500px) {
  .site-header-nav {
    right: 24px;
    gap: 20px;
  }

  .site-header-nav a {
    font-size: 0.78rem;
    letter-spacing: 0.6px;
  }

  .site-header-nav .btn {
    padding: 0 14px;
  }
}

/* Tablet and phone header */
@media (max-width: 1280px) {
  .site-header {
    height: 70px;
    padding: 0 20px;
  }

  .site-header.compact {
    height: 70px;
  }

  /* The logo SVG has empty space around the artwork. On desktop it is 200px
     tall inside a 90px header. 150px inside a 70px header is the same
     proportion. It hangs below the bar the same way it does on desktop.
     The logo link sits under the buttons (z-index 1 against 2 and 3), so the
     phone, language and menu buttons stay clickable. */
  .site-header-logo-link {
    z-index: 1;
  }

  .site-header-logo {
    height: 150px;
    width: auto;
    max-width: max(56px, calc(100vw - 544px));
    object-fit: contain;
  }

  .site-header-contact {
    left: 20px;
  }

  .site-header .site-header-lang,
  .hygiene-rating .site-header-lang {
    left: 180px;
    height: 40px;
    padding: 0 14px;
    font-size: 0.75rem;
  }

  .site-header-toggle {
    display: flex;
  }

  /* The nav becomes a dropdown under the header */
  .site-header-nav {
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 24px;
    background-color: #000000;
    border-top: 1px solid transparent;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--transition-medium),
                padding var(--transition-medium),
                opacity var(--transition-fast),
                visibility var(--transition-medium),
                border-color var(--transition-medium);
  }

  .site-header-nav.open {
    max-height: 420px;
    max-height: min(420px, calc(100svh - 70px));
    padding: 8px 24px 22px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .site-header-nav a:not(.btn) {
    display: block;
    padding: 14px 4px;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header-nav .btn {
    width: 100%;
    height: 48px;
    margin-top: 16px;
    padding: 0 20px;
  }
}

@media (max-width: 900px) {
  .site-header-contact {
    left: 10px;
    padding: 10px;
  }

  .site-header-contact-text {
    display: none;
  }

  .site-header-contact svg {
    width: 22px;
    height: 22px;
  }

  .site-header .site-header-lang,
  .hygiene-rating .site-header-lang {
    left: 60px;
  }

  .site-header-logo {
    max-width: max(56px, calc(100vw - 210px));
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: 0 12px;
  }

  .site-header-contact {
    left: 4px;
  }

  .site-header .site-header-lang,
  .hygiene-rating .site-header-lang {
    left: 50px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
  }

  .site-header-toggle {
    right: 6px;
  }

  .site-header-logo {
    height: 150px;
    max-width: max(52px, calc(100vw - 210px));
  }

  .site-header-nav,
  .site-header-nav.open {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================
   NAV WRAP
   ============================================ */

.nav-wrap {
  position: absolute;
  top: calc(58% - 70px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* ============================================
   HERO CUISINE BAR
   ============================================ */

.hero-cuisine-bar {
  width: 100%;
  text-align: center;
  padding: 0 20px 22px;
}

.hero-cuisine-bar p {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* ============================================
   NAV BOX
   ============================================ */

.nav-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 92vw;
  border: 1px solid var(--color-yellow);
  background-color: rgba(0, 0, 0, 0.35);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  transition: border-color var(--transition-medium);
}

.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding: 10px 34px;
  position: relative;
}

.nav-actions {
  display: flex;
  gap: 14px;
}

.nav-actions.left {
  justify-content: flex-end;
}

.nav-actions.right {
  justify-content: flex-start;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast),
              transform 0.12s ease,
              box-shadow 0.12s ease;
  white-space: nowrap;
}

.btn-primary {
  color: var(--color-off-yellow);
}

.btn-primary:hover {
  color: var(--color-yellow);
}

.btn-outline {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-outline:hover {
  color: var(--color-off-white);
}

.btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);
}

.nav-toggle {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  gap: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow 0.12s ease;
}

/*  .nav-toggle:hover {
  border-color: transparent;    
}        */

.nav-toggle:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle:hover span {
  background-color: var(--color-yellow);
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   NAV DROPDOWN
   ============================================ */

.nav-overlay {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  padding: 0 32px;
  border-top: 1px solid transparent;
  opacity: 0;
  transition: grid-template-rows var(--transition-medium) ease,
              padding var(--transition-medium) ease,
              border-color var(--transition-medium) ease,
              opacity var(--transition-fast) ease;
}

.nav-overlay.open {
  grid-template-rows: 1fr;
  padding: 22px 32px 18px;
  opacity: 1;
  border-top-color: rgba(255, 255, 255, 0.12);
}

.nav-overlay-list {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  width: 100%;
}

.nav-overlay-list li a {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-white);
  position: relative;
  padding-bottom: 4px;
}

.nav-overlay-list li a:hover {
  color: var(--color-yellow);
}

/* ============================================
   HERO
   svh keeps the hero inside the visible screen on phones
   while the browser bars are showing. The 560px floor
   stops the nav from being squashed on short landscape
   phones.
   ============================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: max(100svh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  text-align: center;
  background-color: #000000;
  overflow: hidden;
  padding: 90px 20px 30px;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  animation: heroFade 84s ease-in-out infinite;
}

@keyframes heroFade {
  0%        { opacity: 0; }
  3.57%     { opacity: 0.45; }
  13.1%     { opacity: 0.45; }
  16.67%    { opacity: 0; }
  100%      { opacity: 0; }
}

.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: 14s; }
.hero-slide-3 { animation-delay: 28s; }
.hero-slide-4 { animation-delay: 42s; }
.hero-slide-5 { animation-delay: 56s; }
.hero-slide-6 { animation-delay: 70s; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Hero phone number and language toggle.
   This box copies the sticky header exactly (same top edge, same height),
   so the phone link and the language button inside it use the same left
   and top rules as the header ones and land on the exact same spots.
   z-index 4 keeps the button above the hero logo so it stays clickable. */
.hygiene-rating {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 4;
  pointer-events: none;
}

.hygiene-rating .site-header-contact,
.hygiene-rating .site-header-lang {
  pointer-events: auto;
}

@media (max-width: 1280px) {
  .hygiene-rating {
    height: 70px;
  }
}

.hygiene-image {
  width: 80px;
  height: auto;
}

.contact-info {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

.contact-link {
  font-size: 0.9rem;
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.contact-link:hover {
  color: var(--color-red);
}

.hero-content {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
}

.hero-logo-link {
  display: block;
}

.hero-logo {
  width: auto;
  height: 250px;
  max-height: 250px;
  filter:
    drop-shadow(0 0 18px rgba(243, 35, 40, 0.12))
    drop-shadow(0 0 28px rgba(251, 204, 5, 0.08));
}

/* ============================================
   HERO BADGE TEXT
   ============================================ */

.hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: clamp(280px, 60vw, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;

  opacity: 0;
  animation: badgeEntrance 1s ease-out forwards;
}

.hero-badge p {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@keyframes badgeEntrance {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
}


/* ============================================
   QUOTE + REVIEWS SECTION
   ============================================ */

.quote-section {
  width: 100%;
  background-color: var(--color-black-soft);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-section-y) var(--space-section-x);
  gap: 28px;
}

.quote-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  margin-bottom: clamp(64px, 10vw, 140px);
  gap: 56px;
  text-align: left;
}

.food-blurb {
  flex: 1 1 55%;
  max-width: 640px;
  margin-right: auto;
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.8;
  color: var(--color-white);
  text-align: left;
}

.food-blurb-image {
  flex: 0 0 40%;
  max-width: 520px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.food-blurb-image img,
.food-blurb-image video {
  width: 100%;
  height: auto;
  display: block;
}

.quote-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  line-height: 1.5;
  max-width: 780px;
  color: var(--color-white);
}

.quote-author {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
}

.quote-section .btn {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-off-white);
}

.quote-section .btn:hover {
  border-color: var(--color-red);
  color: var(--color-white);
}

@media (max-width: 900px) {
  .quote-top-row {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .food-blurb {
    flex: 0 0 auto;
    text-align: left;
    max-width: 100%;
    margin-right: 0;
  }

  .food-blurb-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .quote-text {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .quote-text {
    font-size: 1rem;
  }

  .food-blurb-image {
    max-width: 100%;
  }

  .quote-section .btn {
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 44px;
    padding: 10px 16px;
    line-height: 1.3;
  }
}



/* ============================================
   PARALLAX FOOD SECTION
   ============================================ */

.parallax-food {
  position: relative;
  width: 100%;
  min-height: 25vh;
  background-image: url('images/ytsi.jpeg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.parallax-food::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  z-index: 0;
}

.parallax-food-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: var(--space-section-y) var(--space-section-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.parallax-food-content p {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  line-height: 1.6;
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.parallax-food-content .btn {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.parallax-food-content .btn:hover {
  background-color: transparent;
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

@supports (-webkit-touch-callout: none) {
  .parallax-food {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  .parallax-food {
    min-height: 55vh;
    background-attachment: scroll;
  }

  .parallax-food-content p {
    font-size: 1rem;
  }
}

/* ============================================
   ABOUT TEASER SECTION
   ============================================ */

.about-teaser {
  width: 100%;
  background-color: var(--color-black-soft);
  color: var(--color-off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-section-y) var(--space-section-x);
  gap: 28px;
}

.about-teaser-box {
  background-color: var(--color-white);
  width: 100%;
  padding: clamp(32px, 5vw, 56px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.about-teaser-box p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.8;
  color: black;
  margin: 0;
  text-align: left;
}

.about-teaser-box p + p {
  margin-top: 18px;
}

.about-teaser-link {
  color: inherit;
  text-decoration: underline;
}

.about-teaser-link:hover {
  color: var(--color-red);
}

.about-teaser .btn {
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.about-teaser .btn:hover {
  border-color: var(--color-yellow);
  color: var(--color-grey-dark);
  background-color: var(--color-yellow);
}

#about-teaser .about-teaser-box {
  --notch: 18px;
  --inset: 16px;
   

  position: relative;
}

#about-teaser {
  padding: 20px;
}

#about-teaser .about-teaser-box::before {
  content: '';
  position: absolute;
  top: var(--inset);
  right: var(--inset);
  bottom: var(--inset);
  left: var(--inset);
  pointer-events: none;

  border: 2px solid #000;
  clip-path: polygon(
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch)),
    0 var(--notch)
  );
}

@media (max-width: 480px) {
  .about-teaser {
    padding: var(--space-section-y) var(--space-section-x);
    gap: 20px;
  }

  .about-teaser-box {
    padding: 28px 20px;
  }

  #about-teaser .about-teaser-box {
    --notch: 12px;
    --inset: 10px;
  }
}

/* ============================================
   FOOD CATEGORIES SECTION (MENU TEASER)

   Every tile floats gently up and down. Each tile
   has its own speed and its own start point, so
   they never move together. The float is small and
   slow on purpose.

   The float uses the separate "translate" property,
   so it never clashes with the hover lift, which
   uses "transform".

   Click a tile and it grows in place, inside the
   section. The others shrink a little to make room.
   The open tile stops floating so it grows cleanly.

   No shadows, no dark overlay, images at full
   brightness. The text on each photo stays readable:
   on desktop the image is fitted with object-fit
   contain, on phones the tile follows the image's own
   shape so nothing is cropped or squeezed.
   The label sits in its own strip under the image.

   script.js locks an inline height on the section
   while a tile is open. The height auto rule with
   !important below lets the section size itself.
   ============================================ */

.food-categories {
  width: 100%;
  background-color: var(--color-black-soft);
  color: var(--color-white);
  padding: var(--space-section-y) var(--space-section-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
}

.food-categories.has-active-item {
  height: auto !important;
}

.food-categories-inner {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
}

.food-categories-heading {
  text-align: left;
}

.food-categories-heading h1 {
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  line-height: 1.2;
  color: var(--color-white);
}

.food-categories-heading h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--color-white);
  margin-bottom: 6px;
}

.food-categories-heading p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.food-grid {
  /* How far each tile travels up and down. Raise it for a bigger float. */
  --float: clamp(4px, 0.6vw, 8px);

  position: relative;
  width: max-content;
  max-width: 100%;
  min-height: clamp(300px, 36vw, 400px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  padding: 28px 0;
}

@keyframes foodFloat {
  0%   { translate: 0 0; }
  50%  { translate: 0 calc(var(--float) * -1); }
  100% { translate: 0 0; }
}

.food-box {
  position: relative;
  flex: 0 0 auto;
  width: clamp(110px, 15vw, 170px);
  height: clamp(110px, 15vw, 170px);
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-black-soft);
  border: 0;
  box-shadow: none;
  animation: foodFloat 8s ease-in-out infinite;
  transition: width var(--transition-medium),
              height var(--transition-medium),
              transform var(--transition-medium);
}

/* Each tile gets its own speed and its own starting point,
   so the movement is never in sync. Negative delays mean
   every tile is already mid float when the page loads. */
.food-box:nth-child(1) { animation-duration: 7.6s; animation-delay: -0.8s; }
.food-box:nth-child(2) { animation-duration: 9.2s; animation-delay: -3.4s; }
.food-box:nth-child(3) { animation-duration: 7.3s; animation-delay: -1.9s; }
.food-box:nth-child(4) { animation-duration: 9.8s; animation-delay: -5.2s; }
.food-box:nth-child(5) { animation-duration: 8.4s; animation-delay: -2.6s; }
.food-box:nth-child(6) { animation-duration: 8.9s; animation-delay: -4.3s; }
.food-box:nth-child(7) { animation-duration: 7.7s; animation-delay: -1.2s; }
.food-box:nth-child(8) { animation-duration: 9.5s; animation-delay: -3.9s; }

/* Hover lift only on devices that really hover, so phones never get a stuck tile */
@media (hover: hover) {
  .food-box:hover {
    transform: translateY(5px);
  }
}

/* Image fills the space above the label and is never cropped */
.food-box-img {
  position: static;
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: none;
}

/* Dark overlay removed completely */
.food-box::after {
  content: none;
}

/* Label sits under the image in a solid strip, so it never covers image text */
.food-box-label {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  z-index: 2;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--color-black-soft);
}

.food-box-label span {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.food-box-label h3 {
  font-family: var(--font-heading);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1.25;
  color: var(--color-white);
}

/* ---------- OPEN STATE ----------
   The clicked tile grows in place and stops floating.
   The others shrink a little so the row still fits
   inside the section, and they keep floating. */

.food-box.active,
.food-box.active:hover {
  animation: none;
  translate: 0 0;
  transform: none;
  width: clamp(230px, 30vw, 330px);
  height: clamp(270px, 34vw, 380px);
  cursor: pointer;
}

.food-box.active .food-box-img {
  opacity: 1;
  object-fit: contain;
}

.food-box.active .food-box-label {
  padding: 12px 14px;
}

.food-box.active .food-box-label h3 {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.food-grid.has-active .food-box:not(.active) {
  width: clamp(90px, 11vw, 130px);
  height: clamp(90px, 11vw, 130px);
}

.food-box-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.food-box.active .food-box-close {
  display: flex;
}

.food-box-close:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  transform: rotate(90deg);
}

.food-box-close svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.food-categories-cta {
  align-self: flex-end;
}

.food-categories-cta .btn {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-off-white);
}

.food-categories-cta .btn:hover {
  border-color: var(--color-red);
  color: var(--color-white);
}

/* Tablets and phones: the row wraps into a grid that always fits the screen.
   Three per row here, two per row on small phones. Tiles follow the shape of
   their image, so the text on each photo is never cropped. An open tile takes
   the full row width. */
@media (max-width: 760px) {
  .food-categories-inner {
    width: 100%;
    align-items: stretch;
  }

  .food-grid {
    --float: 4px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    gap: 18px;
    padding: 24px 0;
  }

  .food-box,
  .food-grid.has-active .food-box:not(.active) {
    width: calc((100% - 36px) / 3);
    height: auto;
  }

  .food-box-img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 60vh;
  }

  .food-box-label {
    padding: 6px 6px;
  }

  .food-box.active,
  .food-box.active:hover {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
  }

  .food-box.active .food-box-img {
    max-height: 70vh;
    max-height: 70svh;
  }

  .food-categories-cta {
    align-self: center;
    width: 100%;
  }

  .food-categories-cta .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 44px;
    padding: 10px 16px;
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .food-grid {
    gap: 14px;
  }

  .food-box,
  .food-grid.has-active .food-box:not(.active) {
    width: calc((100% - 14px) / 2);
  }
}

/* People who ask their device for less motion get still tiles */
@media (prefers-reduced-motion: reduce) {
  .food-box {
    animation: none;
  }

  .food-box,
  .food-box-close {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    opacity: 0.45;
  }

  .hero-badge {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  transform: none;
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-left.is-visible {
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(50px);
}

.reveal-right.is-visible {
  transform: translateX(0);
}

.reveal-scale {
  transform: scale(0.92);
}

.reveal-scale.is-visible {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */

.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--color-grey-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-medium),
              transform var(--transition-medium),
              visibility var(--transition-medium),
              background-color var(--transition-fast);
}

.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  border-color: var(--color-yellow);
}

.scroll-top-btn:hover svg {
  stroke: var(--color-yellow);
}

.scroll-top-btn:active {
  transform: translateY(2px) scale(0.94);
}

.scroll-top-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-yellow);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition-fast);
}

@media (max-width: 480px) {
  .scroll-top-btn {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ============================================
   MAIN FOOTER
   Desktop: four columns. 1100px and below: two
   columns. 700px and below: one centred column.
   Pure black, with a faint grey line on top.
   ============================================ */

.main-footer {
  background-color: #000000;
  color: var(--color-white);
  padding: var(--space-section-y) var(--space-section-x) 28px;
  position: relative;
  overflow: hidden;
  border: none;
  border-top: 1px solid var(--color-line);
}

.footer-tagline {
  max-width: none;
  width: 100%;
  margin: 0 auto 48px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--color-white);
  line-height: 1.4;
  transform: rotate(-0.6deg);
  position: relative;
  z-index: 1;
}

.footer-tagline span {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-top: 10px;
}

.footer-inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.85fr 1.2fr;
  grid-template-areas:
    "story links hours map"
    "story links hours map";
  align-items: start;
  gap: 40px;
  padding-bottom: 36px;
  position: relative;
  z-index: 1;
}

.footer-inner > * {
  min-width: 0;
}

.footer-story-col {
  grid-area: story;
}

.footer-story-col p {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-white);
  max-width: 100%;
  margin-bottom: 18px;
}

.footer-story-col a {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 15px;
  color: var(--color-white);
  padding-bottom: 3px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer-story-col a:hover {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.footer-contact-col {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-col h4 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-white);
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-contact-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.footer-contact-links a svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.footer-links-col {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-col h4 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-white);
  margin-bottom: 16px;
}

.footer-links-col a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
  width: fit-content;
}

.footer-links-col a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.footer-hours-col {
  grid-area: hours;
}

.footer-hours-col h4 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-white);
  margin-bottom: 16px;
}

.opening-times-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.opening-times-list li {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.02em;
  padding-bottom: 3px;
  width: fit-content;
  transition: color var(--transition-fast);
}

.opening-times-list li span:first-child {
  color: var(--color-white);
  font-weight: 500;
  min-width: 76px;
}

.opening-times-list li:hover span {
  color: var(--color-yellow);
}

.footer-map-col {
  grid-area: map;
  position: relative;
  min-height: 200px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.footer-map-col iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.05);
  transition: filter var(--transition-medium);
}

.footer-map-col:hover iframe {
  filter: grayscale(0) contrast(1);
}

.footer-map-tag {
  position: absolute;
  top: 12px;
  left: -6px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px 5px 18px;
  clip-path: polygon(0% 50%, 12% 0%, 100% 0%, 100% 100%, 12% 100%);
  z-index: 2;
}

.footer-bottom {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.footer-bottom p {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-white);
  letter-spacing: 0.02em;
}

.footer-bottom .footer-credit {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.65;
  transition: opacity var(--transition-fast);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  padding: 6px 12px;
  border-radius: 2px;
  margin: 0;
}

.footer-bottom .footer-credit::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease;
  z-index: 0;
}

.footer-bottom .footer-credit:hover {
  opacity: 1;
}

.footer-bottom .footer-credit:hover::before {
  clip-path: inset(0 0 0 0);
}

.footer-bottom .footer-credit img,
.footer-bottom .footer-credit span {
  position: relative;
  z-index: 1;
}

.footer-bottom .footer-credit img {
  height: 26px;
  width: auto;
  display: block;
  filter: invert(1);
  transition: transform var(--transition-fast);
}

.footer-bottom .footer-credit:hover img {
  transform: scale(1.08) rotate(-3deg);
}

.footer-bottom .footer-credit span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.footer-bottom .footer-credit:hover span {
  color: var(--color-off-white);
}


#about-teaser-footer {
  padding: 24px;
}

/* Two columns on tablets */
@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "story links"
      "hours map";
    gap: 40px 32px;
  }

  .footer-map-col {
    min-height: 240px;
  }
}

/* One centred column on phones and small tablets */
@media (max-width: 700px) {
  .main-footer {
    padding-top: 60px;
  }

  .footer-tagline {
    text-align: center;
    transform: none;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "story"
      "links"
      "hours"
      "map";
    text-align: center;
    gap: 40px;
  }

  .footer-story-col p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links-col {
    align-items: center;
  }

  .footer-links-col a:hover {
    transform: none;
  }

  .opening-times-list li {
    justify-content: center;
    margin: 0 auto;
  }

  .footer-contact-col {
    align-items: center;
  }

  .footer-contact-links a {
    justify-content: center;
  }

  .footer-contact-links a:hover {
    transform: none;
  }

  .footer-map-col {
    width: 100%;
    min-height: 220px;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .main-footer {
    padding: var(--space-section-y) var(--space-section-x) 24px;
  }

  .footer-tagline {
    margin-bottom: 36px;
  }

  .footer-map-col {
    min-height: 180px;
  }
}


/* ============================================
   SKIP INTRO BUTTON
   Positioned bottom-left, HUD-style — out of the
   way of the header and video content, so it never
   competes with what's playing behind it.
   ============================================ */

.skip-intro-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1010;
  height: 44px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid var(--color-grey-dark); 
  border-radius: 2px;
  backdrop-filter: blur(4px);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform 0.12s ease,
              opacity var(--transition-medium),
              visibility var(--transition-medium);
}

.skip-intro-btn:hover {
  background-color: transparent;
  border-color: var(--color-red);
  color: var(--color-white);
}

.skip-intro-btn:active {
  transform: translateY(2px) scale(0.97);
}

.skip-intro-btn.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  .skip-intro-btn {
    bottom: 16px;
    left: 16px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.68rem;
  }
}


/* ============================================
   RESPONSIVE / MEDIA QUERIES (HERO & NAV)
   On phones the hero logo sits below the phone and
   language row, so nothing overlaps.
   ============================================ */

@media (max-width: 768px) {
  .hero {
    padding: 80px 16px 24px;
    gap: 14px;
  }

  .hygiene-image {
    width: 60px;
  }

  .contact-info {
    top: 12px;
    right: 12px;
  }

  .contact-link {
    font-size: 0.8rem;
  }

  .hero-content {
    top: calc(78px + 9vh);
  }

  .nav-wrap {
    top: calc(62% - 55px);
  }

  .hero-cuisine-bar {
    padding: 0 16px 14px;
  }

  .hero-cuisine-bar p {
    font-size: clamp(1.25rem, 6vw, 2rem);
    letter-spacing: 0.5px;
  }

  .nav-bar {
    gap: 28px;
    padding: 8px 24px;
  }

  .btn {
    height: 44px;
    padding: 0 14px;
    font-size: 0.75rem;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .nav-overlay-list {
    gap: 16px;
  }

  .nav-overlay-list li a {
    font-size: 1rem;
  }

  .hero-logo {
    max-height: 18vh;
  }
}

@media (max-width: 480px) {
  :root {
    --space-section-x: 16px;
  }

  .hero {
    padding: 70px 12px 20px;
    gap: 10px;
  }

  .hygiene-image {
    width: 50px;
  }

  .contact-info {
    top: 10px;
    right: 10px;
  }

  .contact-link {
    font-size: 0.7rem;
  }

  .hero-content {
    top: calc(78px + 8vh);
  }

  .nav-wrap {
    top: calc(64% - 45px);
  }

  .hero-cuisine-bar {
    padding: 0 10px 12px;
  }

  .hero-cuisine-bar p {
    font-size: clamp(1rem, 6.5vw, 1.5rem);
    letter-spacing: 0.3px;
  }

  .nav-bar {
    gap: 16px;
    padding: 6px 14px;
  }

  .nav-actions {
    gap: 8px;
  }

  .btn {
    height: 40px;
    padding: 0 10px;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .nav-toggle span {
    width: 18px;
  }

  .nav-overlay-list {
    gap: 12px;
    padding: 0 12px;
  }

  .nav-overlay-list li a {
    font-size: 0.9rem;
  }

  .hero-logo {
    max-height: 16vh;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   ABOUT PAGE — SCROLL SCRUB HERO
   ============================================ */

.scrub-section {
  position: relative;
  height: 300vh;
  width: 100%;
  background-color: black;
}

.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Full-bleed background video behind the scrub headings */
.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Darkens the video so the white heading text stays readable */
.scrub-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.scrub-heading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(30px);
  width: 90%;
  max-width: 900px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.2;
  color: var(--color-white);
  opacity: 0;
  z-index: 2;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.scrub-heading.active {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

@media (max-width: 480px) {
  .scrub-heading {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrub-section {
    height: auto;
  }

  .scrub-sticky {
    position: relative;
    height: auto;
    flex-direction: column;
    gap: 40px;
    padding: var(--space-section-y) var(--space-section-x);
  }

  .scrub-video {
    display: none;
  }

  .scrub-overlay {
    display: none;
  }

  .scrub-heading {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
  }
}


/* ============================================
   ABOUT PAGE — ZIGZAG TRIANGLE STORY SECTIONS

   Text/image are exactly 50/50, so the boundary
   between them always sits at the horizontal
   centre of the page, whichever side the image
   is on. Each triangle's two base corners sit
   exactly on that centre line, at its own
   section's top edge (y:0%) and bottom edge
   (y:100%) — with zero gap between sections,
   these corners land on the exact same page
   coordinate as the neighbouring section's
   corners, so they touch.

   Only the outward tip (mid-height) is inset by
   --edge-line, to let the grey wrap background
   (--color-line) show through as a thin outline
   near the point. The touching corners themselves
   are never inset, so nothing pulls them apart.
   ============================================ */

.diagonal-section {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: stretch;
  background-color: var(--color-black-soft);
  overflow: hidden;
}

.diagonal-text {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px);
}

.diagonal-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--color-white);
  margin: 0 0 20px;
}

.diagonal-text p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.8;
  color: var(--color-off-white);
  max-width: 560px;
  margin: 0;
}

.diagonal-image-wrap {
  position: relative;
  flex: 1 1 50%;
  min-height: 320px;
  overflow: hidden;
  background-color: var(--color-line);
}

.diagonal-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section 1: image on right, tip points right.
   Base corners fixed at (0%,0%) and (0%,100%) —
   the section's own top/bottom edges. */
.diagonal-section-1 .diagonal-image-wrap {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
}

.diagonal-section-1 .diagonal-image-wrap img {
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--edge-line)) 0%,
    calc(100% - var(--edge-line)) 50%,
    0% 100%
  );
  object-position: 80% center;
}

/* Section 2: image on left, tip points left.
   Base corners fixed at (100%,0%) and (100%,100%). */
.diagonal-section-2 {
  flex-direction: row-reverse;
}

.diagonal-section-2 .diagonal-image-wrap {
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.diagonal-section-2 .diagonal-image-wrap img {
  clip-path: polygon(
    100% 0%,
    calc(0% + var(--edge-line)) 50%,
    100% 100%
  );
  object-position: 20% center;
}

/* Section 3: image on right, tip points right. Same as section 1. */
.diagonal-section-3 .diagonal-image-wrap {
  clip-path: polygon(0% 0%, 100% 50%, 100% 100%, 0% 100%);
}

.diagonal-section-3 .diagonal-image-wrap img {
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--edge-line)) 50%,
    calc(100% - var(--edge-line)) 100%,
    0% 100%
  );
  object-position: 80% center;
}

/* Tablets and phones: the sections stack, text on top and image below.
   Sections 1 and 3 use a slanted top edge. Section 2 is left out of the
   clip path rules on purpose, so it keeps its triangle from above. */
@media (max-width: 900px) {
  .diagonal-section,
  .diagonal-section-2 {
    flex-direction: column;
  }

  .diagonal-text {
    align-self: stretch;
    padding: clamp(20px, 5vw, 36px) var(--space-section-x);
  }

  .diagonal-image-wrap {
    min-height: 260px;
  }

  .diagonal-section-1 .diagonal-image-wrap,
  .diagonal-section-3 .diagonal-image-wrap {
    clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 100%);
  }

  .diagonal-section-1 .diagonal-image-wrap img,
  .diagonal-section-3 .diagonal-image-wrap img {
    clip-path: polygon(
      var(--edge-line) calc(8% + var(--edge-line)),
      calc(100% - var(--edge-line)) var(--edge-line),
      calc(100% - var(--edge-line)) calc(100% - var(--edge-line)),
      var(--edge-line) calc(100% - var(--edge-line))
    );
    object-position: center;
  }
}