/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; }
fieldset { border: none; margin: 0; padding: 0; }
legend { padding: 0; }

/* ---------- Design tokens ---------- */
:root {
  --black: #141314;
  --charcoal: #1e1d1e;
  --cream: #f4f2ed;
  --cream-dim: #e9e5dc;
  --ink: #141314;
  --ink-soft: #52493f;
  --gold: #b3ada0;
  --gold-deep: #8a8477;
  --gold-light: #e2ddd0;
  --line-dark: rgba(179, 173, 160, 0.35);
  --line-light: rgba(26, 22, 19, 0.12);

  --font-display: 'Frank Ruhl Libre', Georgia, serif;
  --font-body: 'Heebo', Arial, sans-serif;

  /* Every section shares one width and the same distance from the screen edges */
  --container: 1700px;
  --edge: clamp(1.5rem, 4vw, 4rem);
  --radius: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.skip-link {
  position: absolute;
  right: -999px;
  top: 0;
  background: var(--gold);
  color: var(--black);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  font-weight: 700;
}
.skip-link:focus { right: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), gap .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); gap: 0.85rem; }
.btn .icon { width: 1.1em; height: 1.1em; fill: currentColor; }
.icon-arrow { stroke: currentColor; fill: none; }

/* Primary button: brand charcoal on light sections, beige on dark ones */
.btn-cta { background: var(--black); color: var(--cream); }
.btn-cta:hover { background: var(--gold-deep); }
.btn-cta-light { background: var(--gold); color: var(--black); }
.btn-cta-light:hover { background: var(--gold-light); }
.icon-line { stroke: currentColor; }
.btn .icon-line { fill: none; }

.btn-cta-ghost { background: transparent; color: var(--cream); border-color: rgba(250,246,238,0.4); }
.btn-cta-ghost:hover { border-color: var(--gold); color: var(--gold-light); }


.btn-block { width: 100%; }

/* ---------- Header ---------- */
/* Full-width bar with rounded bottom corners; the bar itself is .header-inner */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
  padding-block: 0.5rem;
  border-radius: 0 0 1.25rem 1.25rem;
  background: rgba(20,19,20,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  transition: box-shadow .35s var(--ease);
}
.site-header.is-scrolled .header-inner { box-shadow: 0 10px 32px rgba(0,0,0,0.35); }
.main-nav ul { display: flex; gap: 2rem; }
.nav-link {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding-block: 0.25rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.nav-link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--gold-light); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(250,246,238,0.3);
  color: var(--cream);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.header-icon-link:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.header-icon-link .icon { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* ---------- Hero (bright editorial, engraved-board backdrop) ---------- */
.hero {
  --hero-bg: #f5f5f2;
  --hero-reserve: 23.25rem;
  position: relative;
  background: var(--hero-bg);
  overflow: clip;
}
/* The backdrop hugs one edge of the container and the copy the other */
.hero-inner {
  position: relative;
  padding-block: calc(6rem + 17px) 3.25rem;
}
/* Backdrop runs from the viewport edge up to (and slightly under) the copy.
   Darken-blending clamps the photo's tabletop to --hero-bg, so only the
   board, knives and herbs read against the section background. */
.hero-inner::before {
  content: '';
  position: absolute;
  top: calc(2.6rem + 17px);
  left: 1.25rem;
  /* Either stop short of the copy's text, or (on wider screens) grow until
     the knife handles reach the buttons' edge. */
  width: min(1080px, max(
    min(980px, calc(100% - var(--edge) - var(--hero-reserve))),
    calc((100% - var(--edge) - 500px) / 0.93)
  ));
  aspect-ratio: 1672 / 941;
  max-height: calc(100% - 2.6rem);
  background: url('../assets/images/herobg.webp') no-repeat center / cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mix-blend-mode: darken;
  filter: brightness(1.04);
  pointer-events: none;
}
@media (max-width: 1150px) {
  .hero { --hero-reserve: 27.5rem; }
}
.hero-copy { position: relative; max-width: 30rem; }
.hero-title {
  font-family: var(--font-body);
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.hero-title-accent { color: var(--gold-deep); }
.hero-text { max-width: 46ch; color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 1.25rem; }
.hero-signature {
  display: block;
  width: 260px;
  /* drawn as a background so it can't be dragged or saved like an image */
  aspect-ratio: 796 / 320;
  background: url('../assets/images/signature-dark.png') no-repeat center / contain;
  user-select: none;
  margin-block: 0 1.5rem;
  margin-inline: auto 2.5rem;
  transform: rotate(-2deg);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Hero pair: the WhatsApp button in the brand beige, the menus link a clear outline */
.hero-actions .btn-cta { background: var(--gold); color: var(--black); }
.hero-actions .btn-cta:hover { background: var(--gold-light); }
.btn-cta-ghost-dark { background: transparent; color: var(--ink); border-color: rgba(20,19,20,0.45); }
.btn-cta-ghost-dark:hover { border-color: var(--gold-deep); background: var(--ink); color: var(--cream); }

/* Hero copy enters as soon as the page loads: each piece rises into focus in turn */
.hero-anim > * { opacity: 0; transform: translateY(34px); filter: blur(8px); animation: heroIn 1s var(--ease) forwards; }
.hero-anim > *:nth-child(1) { animation-delay: .1s; }
.hero-anim > *:nth-child(2) { animation-delay: .3s; }
.hero-anim > *:nth-child(3) { animation-delay: .5s; }
.hero-anim > *:nth-child(4) { animation-delay: .7s; }
@keyframes heroIn { to { opacity: 1; transform: none; filter: none; } }

/* Once the copy has landed, a single glint sweeps the signature from left to right.
   The highlight is masked by the signature itself, so only the ink catches it. */
.hero-signature { position: relative; }
.hero-signature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.95) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat;
  -webkit-mask: url('../assets/images/signature-dark.png') center / contain no-repeat;
  mask: url('../assets/images/signature-dark.png') center / contain no-repeat;
  animation: signatureGlint 1.3s ease-in-out 1.8s 1 both;
}
@keyframes signatureGlint { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ---------- Stats (inline editorial line) ---------- */
.stats { background: var(--black); padding-block: 1.75rem; }
.stats-line { display: flex; align-items: stretch; justify-content: center; max-width: 1100px; color: var(--cream); }
.stats-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; font-size: 0.95rem; text-align: center; }
.stats-item strong { color: var(--gold-light); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stats-item-word strong { font-size: 1.5rem; }
/* equal-width digits, so the bar doesn't shift while the numbers count up */
.stats-item [data-count] { font-variant-numeric: tabular-nums; }
.stats-rule { width: 1px; background: var(--line-dark); }

/* ---------- Section heads ---------- */
.section-eyebrow { color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; margin: 0 0 0.9rem; }
.section-title { font-family: var(--font-body); font-weight: 900; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
/* the brand's crossed knives above the About and Contact titles */
.about .section-title::before, .contact .section-title::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cg%20transform%3D%27rotate(40%2024%2026)%27%3E%3Cpath%20d%3D%27M21.6%2029V9.5c0-2.600.900-4.600%202.600-6%203.600%206.500%204.900%2015.200%203.800%2025.500z%27%2F%3E%3Crect%20x%3D%2722%27%20y%3D%2730.500%27%20width%3D%275.600%27%20height%3D%2713.500%27%20rx%3D%272.200%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(48%200)%20scale(-1%201)%20rotate(40%2024%2026)%27%3E%3Cpath%20d%3D%27M21.6%2029V9.5c0-2.600.900-4.600%202.600-6%203.600%206.500%204.900%2015.200%203.800%2025.500z%27%2F%3E%3Crect%20x%3D%2722%27%20y%3D%2730.500%27%20width%3D%275.600%27%20height%3D%2713.500%27%20rx%3D%272.200%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cg%20transform%3D%27rotate(40%2024%2026)%27%3E%3Cpath%20d%3D%27M21.6%2029V9.5c0-2.600.900-4.600%202.600-6%203.600%206.500%204.900%2015.200%203.800%2025.500z%27%2F%3E%3Crect%20x%3D%2722%27%20y%3D%2730.500%27%20width%3D%275.600%27%20height%3D%2713.500%27%20rx%3D%272.200%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(48%200)%20scale(-1%201)%20rotate(40%2024%2026)%27%3E%3Cpath%20d%3D%27M21.6%2029V9.5c0-2.600.900-4.600%202.600-6%203.600%206.500%204.900%2015.200%203.800%2025.500z%27%2F%3E%3Crect%20x%3D%2722%27%20y%3D%2730.500%27%20width%3D%275.600%27%20height%3D%2713.500%27%20rx%3D%272.200%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.section-head-center .section-title::before { margin-inline: auto; }
.section-title-light { color: var(--cream); }
.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head-center { max-width: 620px; margin-inline: auto; text-align: center; }

/* ---------- About ---------- */
.about { background: var(--cream); padding-block: 7rem; }
/* photo and copy sit together as one centred pair */
.about-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 34rem); justify-content: center; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.about-media { position: relative; }
/* shown whole, at the photo's own proportions, so nobody is cropped */
.about-portrait {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(26,22,19,0.14);
}
/* About enters as a sequence: title, photo (rising and settling into size), then the text */
.about-media.reveal { transform: translateY(40px) scale(0.94); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: .12s; }
.about-media.reveal.is-visible { transform: none; }
.about-text.reveal { transition-delay: .25s; }
.about-text.reveal + .about-text.reveal { transition-delay: .4s; }
.about-text { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 1.25rem; max-width: 60ch; }

/* ---------- Menus: tile grid ---------- */
.menus { background: var(--black); padding-block: 6rem; }
.menus .section-eyebrow { color: var(--gold-light); }
.menus-lead { color: rgba(250,246,238,0.68); font-size: 1rem; margin-top: -0.5rem; }
.menus-title-fade {
  transform: scale(0.92);
  filter: blur(16px);
  transition: opacity 1.6s ease-out, filter 1.6s ease-out, transform 1.6s ease-out;
}
.menus-title-fade.is-visible { opacity: 1; filter: blur(0); transform: scale(1); }
.menus .section-title { color: var(--cream); }

.menu-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.menu-tile { display: flex; flex-direction: column; padding: 0; background: none; border: 0; color: var(--cream); text-align: start; }
.menu-tile img {
  width: 100%;
  aspect-ratio: 1600 / 2262;
  object-fit: cover;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .35s var(--ease);
}
.menu-tile:hover img { border-color: var(--gold); transform: translateY(-4px); }
.menu-tile-scrim { display: none; }
.menu-tile-label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.9rem; }
.menu-tile-title { font-weight: 800; font-size: 1.1rem; }
.menu-tile-note { color: var(--gold); font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.menu-tile-zoom { display: flex; color: var(--gold); }
.menu-tile-zoom .icon { width: 1.15rem; height: 1.15rem; }
.menu-tile:hover .menu-tile-zoom { color: var(--gold-light); }
.menu-tile.reveal {
  transform: translateY(36px) scale(0.93);
  transition: opacity .7s cubic-bezier(.22,1.24,.4,1), transform .7s cubic-bezier(.22,1.24,.4,1);
}
.menu-tile.reveal.is-visible { transform: none; }
.menu-tile:nth-child(1) { transition-delay: 0s; }
.menu-tile:nth-child(2) { transition-delay: .12s; }
.menu-tile:nth-child(3) { transition-delay: .24s; }
.menu-tile:nth-child(4) { transition-delay: .36s; }

/* ---------- How it works ---------- */
.steps { background: var(--cream); padding-block: 6rem; }
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); max-width: 1100px; margin-inline: auto; }
.step { padding-block: 1.5rem; border-top: 1px solid var(--line-light); }
.step-num { display: block; color: var(--gold-deep); font-family: var(--font-display); font-size: 2.75rem; line-height: 1; }
.step-title { margin: 0.75rem 0 0.4rem; font-size: 1.25rem; font-weight: 800; }
.step-text { margin: 0; color: var(--ink-soft); }
.steps-cta { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: 3rem; text-align: center; }
.steps-cta-text { margin: 0; font-size: 1.35rem; font-weight: 800; }

/* ---------- Videos (Instagram embeds) ---------- */
.videos { background: var(--cream-dim); padding-block: 6rem; }
.videos-tv { display: grid; grid-template-columns: auto minmax(0, 540px); justify-content: center; align-items: center; gap: clamp(2rem, 5vw, 5rem); margin-bottom: 4rem; }
.videos-tv-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 900; line-height: 1.2; }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 300px)); justify-content: center; gap: 1.25rem; }
/* Each card shows our own poster; a click swaps in Instagram's player.
   That player is a 54px header, the video in a 4:5 window (16:9 for the TV
   clip), then its own footer, which the frame cuts off. */
.video-card { container-type: inline-size; display: flex; align-items: center; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: var(--black); box-shadow: 0 20px 45px rgba(26,22,19,0.14); }
.video-card-wide { aspect-ratio: auto; }
.video-poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.video-poster:hover img { transform: scale(1.04); }
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(20,19,20,0.72);
  color: var(--cream);
  transform: translate(-50%, -50%);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.video-play .icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.video-poster:hover .video-play { background: var(--gold); color: var(--black); }
.embed-crop { width: 100%; height: calc(54px + 125cqw); overflow: hidden; background: #fff; }
.video-card-wide .embed-crop { height: calc(54px + 56.25cqw); }
.embed-crop iframe { display: block; width: 100%; height: calc(125cqw + 360px); border: 0; }

.videos-cta { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ---------- Reviews ---------- */
.reviews {
  background: var(--black);
  color: var(--cream);
  padding-block: 6rem;
}
.reviews .section-head { margin-bottom: 1.5rem; }
.reviews .section-title { margin-bottom: 0.5rem; }
.reviews-lead { margin: 0; color: rgba(250,246,238,0.7); }
/* One quote at a time, set large; swipe or use the arrows to move sideways */
.review-mark {
  display: block;
  height: 3rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  text-align: center;
}
.reviews-track {
  display: flex;
  max-width: 860px;
  margin-inline: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  scroll-snap-align: center;
}
.review-text {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  line-height: 1.65;
  text-align: center;
}
.reviews-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.25rem; }
.reviews-count { min-width: 3.5rem; color: rgba(250,246,238,0.7); font-size: 0.9rem; letter-spacing: 0.08em; text-align: center; direction: ltr; }
.reviews-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(250,246,238,0.35); color: var(--cream);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.reviews-arrow:hover { background: var(--gold); color: var(--black); }
.reviews-arrow .icon { width: 1.1rem; height: 1.1rem; }
.reviews-arrow-prev .icon { transform: rotate(180deg); }

/* ---------- FAQ ---------- */
.faq { background: var(--cream-dim); padding-block: 6rem; }
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item:first-child { border-top: 1px solid var(--line-light); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--gold-deep); font-size: 1.6rem; font-weight: 400; line-height: 1; transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { margin: 0 0 1.25rem; max-width: 60ch; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact {
  background:
    linear-gradient(rgba(20,17,16,0.9), rgba(20,17,16,0.94)),
    url("../assets/images/wood-bg.jpg") center/cover no-repeat;
  color: var(--cream);
  padding-block: 6rem;
}
.contact .section-head { margin-bottom: 2.5rem; }
.contact .section-title { margin-bottom: 0.75rem; }
.contact-text { margin: 0; color: rgba(250,246,238,0.75); }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 1.25rem; }
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1.5rem;
  background: rgba(20,19,20,0.6);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  text-align: center;
}
.contact-card-main { border-color: var(--gold); }
.contact-card-name { margin: 0; color: var(--gold-light); font-size: 1.5rem; font-weight: 900; }
.contact-card-phone { font-size: 1.1rem; text-decoration: none; direction: ltr; }
.contact-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.1rem; }
.contact-card-actions .btn { padding: 0.8rem 1.4rem; font-size: 0.9rem; }
.contact-insta { margin: 2rem 0 0; text-align: center; }
.contact-insta a { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(250,246,238,0.75); text-decoration: none; direction: ltr; }
.contact-insta a:hover { color: var(--gold-light); }
.contact-insta .icon { width: 1.15rem; height: 1.15rem; fill: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: rgba(250,246,238,0.75); padding-block: 4rem 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); padding-bottom: 3rem; }
.footer-logo { height: 96px; width: auto; margin-bottom: 1rem; }
.footer-about { margin: 0; max-width: 30ch; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.footer-heading { margin: 0 0 0.4rem; color: var(--gold-light); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; }
.footer-col > a { text-decoration: none; }
.footer-col > a:hover { color: var(--gold-light); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
/* extra room below the last line, so the floating buttons never cover it */
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem 5.5rem; border-top: 1px solid var(--line-dark); }
.footer-copy { margin: 0; font-size: 0.8rem; opacity: 0.6; }
/* Agency credit; the logo is a mask so it takes the footer's text colour */
.site-credit { display: inline-flex; align-items: center; gap: 0.5em; direction: ltr; color: inherit; font-size: 0.75rem; text-decoration: none; opacity: 0.6; transition: opacity .2s var(--ease); }
.site-credit:hover, .site-credit:focus-visible { opacity: 1; }
.site-credit-mark {
  display: inline-block;
  height: 0.95em;
  aspect-ratio: 616 / 160;
  background-color: currentColor;
  -webkit-mask: url(https://yeye.co.il/credit/yeye.png) center / contain no-repeat;
  mask: url(https://yeye.co.il/credit/yeye.png) center / contain no-repeat;
}

/* ---------- Floating actions ---------- */
.fab-whatsapp {
  position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 50;
  transition: transform .25s var(--ease);
}
.fab-whatsapp:hover { transform: scale(1.08); }
.fab-whatsapp .icon { width: 1.7rem; height: 1.7rem; fill: currentColor; }

.back-to-top {
  position: fixed; bottom: 1.5rem; inset-inline-start: 1.5rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: var(--black); border: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 50;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top .icon { width: 1.3rem; height: 1.3rem; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(10,8,7,0.95); display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: 100; overflow: auto; }
.lightbox[hidden] { display: none; }
.lightbox-gallery { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; max-width: 100%; }
.lightbox-gallery img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-gallery.is-pair img { max-width: min(48vw, 640px); }
.lightbox-close {
  position: absolute; top: 1.25rem; inset-inline-end: 1.25rem;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(250,246,238,0.1); color: var(--cream); border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: var(--gold); color: var(--black); }
.lightbox-close .icon { width: 1.2rem; height: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* single column: the title comes first, then the photo, then the text */
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-copy { display: contents; }
  .about .section-title { order: -1; margin-bottom: 0; text-align: center; }
  .about .section-title::before { margin-inline: auto; }
  .about-text { margin: 0; }
  .steps, .videos, .faq { padding-block: 4rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 0; }
  .videos-tv { grid-template-columns: 1fr; text-align: center; }
  .videos-tv-media { width: min(540px, 100%); margin-inline: auto; }
  /* reels become a sideways-scrolling strip that bleeds to the screen edges */
  .reels {
    display: flex;
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge);
    scroll-padding-inline: var(--edge);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 min(300px, 72vw); scroll-snap-align: start; }
  .contact-cards { grid-template-columns: minmax(0, 420px); }
  /* small screens: a short centred footer. The phone numbers sit right above
     it in the contact cards, so they aren't repeated here. */
  .site-footer { padding-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 2rem; text-align: center; }
  .footer-logo { height: 72px; margin: 0 auto 0.75rem; }
  .footer-about { margin-inline: auto; }
  .footer-contact, .footer-heading { display: none; }
  .footer-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
  /* room below the last line for the floating buttons */
  .footer-bottom { flex-direction: column; gap: 0.4rem; padding-bottom: 5rem; text-align: center; }
  .about { padding-block: 3rem 5rem; }
  .about-media { max-width: 360px; margin-inline: auto; }
  .contact { padding-block: 4rem; }
  .reviews { padding-block: 4rem; }
  .hero-inner { padding-block: 4.5rem 3.5rem; }
  .hero-inner::before {
    position: static;
    display: block;
    width: auto;
    max-width: 640px;
    max-height: none;
    margin: 0 auto 1.5rem;
  }
  .hero-copy { max-width: 100%; }
}

@media (max-width: 760px) {
  /* Phone header: the three links stay visible next to the two icons */
  .header-inner { gap: 0.75rem; }
  .main-nav ul { gap: 0.9rem; }
  .nav-link { font-size: 0.85rem; white-space: nowrap; }
  .header-actions { gap: 0.5rem; }
  .header-icon-link { width: 32px; height: 32px; }
  .header-icon-link .icon { width: 1rem; height: 1rem; }

  .hero-inner { padding-block: 4.75rem 3rem; }
  .hero-inner::before { margin-inline: calc(-1 * var(--edge)); }

  .stats { padding-block: 1.4rem; }
  .stats-line { flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .stats-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.78rem; text-align: center; }
  .stats-item strong { font-size: 1.6rem; }
  .stats-rule { width: 1px; height: auto; border-radius: 0; background: var(--line-dark); }
  /* four columns on small screens: the "2 chefs" item is dropped, the word items sit centred */
  .stats-item-wide { display: none; }
  .stats-item-word { justify-content: center; }
  .stats-item.stats-item-word strong { font-size: 1.2rem; }

  .menus { padding-block: 4rem; }
  .menu-tiles { grid-template-columns: repeat(2, 1fr); }

  .lightbox-gallery.is-pair img { max-width: 100%; }
  .fab-whatsapp { width: 50px; height: 50px; bottom: 1rem; inset-inline-end: 1rem; }
  .back-to-top { width: 42px; height: 42px; bottom: 1rem; inset-inline-start: 1rem; }
}

@media (max-width: 560px) {
  /* Phone first screen, top to bottom: the copy, the two buttons, the
     signature beside the herbs, the whole board edge to edge, then the stats bar.
     Hero metrics are in vw (the header is 56px) so the copy wraps the same on
     every phone and the photo lines up with it. */
  .hero {
    --stats-h: 19vw;
    /* header bottom to the board's top corner */
    --copy-h: 92.1vw;
    min-height: calc(100vh - var(--stats-h));
    min-height: calc(100svh - var(--stats-h));
    background: linear-gradient(to right, #edeae5, #f0f0eb 50%, #f6f4f2);
  }
  .hero::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    /* the board's top corner sits 23% down the photo (40.9vw) */
    top: calc(56px + var(--copy-h) - 40.9vw);
    aspect-ratio: 941 / 1672;
    background: url('../assets/images/herobg-mobile.webp') no-repeat center / cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%);
    mask-image: linear-gradient(to bottom, transparent, #000 8%);
    pointer-events: none;
  }
  /* the bottom padding holds the board and the knife handles (23% to 78% of the photo) */
  .hero-inner { padding-block: calc(56px + 3vw) 102vw; }
  .hero-inner::before { display: none; }
  .hero-copy { display: flex; flex-direction: column; }
  .hero-title { font-size: 8.8vw; line-height: 1.1; margin-bottom: 3vw; }
  .hero-text { max-width: 84vw; margin: 0; font-size: 3.9vw; line-height: 1.45; }
  .hero-signature { order: 2; align-self: flex-start; width: 40vw; margin: 3vw 0 0; }
  .hero-actions { order: 1; flex-wrap: nowrap; gap: 2.5vw; margin-top: 5vw; }
  /* on phones the buttons come before the signature, so they enter first too */
  .hero-anim > .hero-actions { animation-delay: .5s; }
  .hero-anim > .hero-signature { animation-delay: .7s; }
  .hero-actions .btn { flex: 1; min-width: 0; height: 11vw; padding: 0 2vw; gap: 1.8vw; font-size: 3.5vw; }

  .stats { height: 19vw; padding-block: 0; display: flex; align-items: center; }
  .stats-line { width: 100%; }
  .stats-item { gap: 0.4vw; font-size: 2.9vw; }
  .stats-item strong { font-size: 5.6vw; }
  .stats-item.stats-item-word strong { font-size: 3.9vw; }
  .stats-rule { margin-block: 0.6vw; }

  /* Keep the first screen clear; the floating button appears once scrolling starts */
  .fab-whatsapp { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .25s var(--ease); }
  .site-header.is-scrolled ~ .fab-whatsapp { opacity: 1; pointer-events: auto; }
}