/* ============================================================
   Campo, Direction A "Hrast" (oak board). Loaded after every other
   stylesheet. Dark surfaces are oak browns sampled from the knife-scroll
   board, light surfaces are cream, copper is the only accent and the
   garden keeps its olive. No black surface anywhere.
   ============================================================ */

:root {
  --oak-900: #4C3120;
  --oak-800: #533726;
  --oak-700: #5C3D2A;
  --oak-board: #744B34;
  --oak-500: #815942;
  --oak-400: #8A5C44;
  --copper: #C78962;
  --copper-deep: #AD7D52;
  --copper-ink: #84492A;
  --copper-glow: #F0C29C;
  --cream: #F6EDDE;
  --cream-2: #EEE1CB;
  --oak-pale: #E7D3B4;
  --line-light: #D6C0A0;
  --ink: #29180E;
  --ink-body: #4B3425;
  --ink-muted: #6E5340;
  --on-oak: #FAF2E6;
  --on-oak-muted: #E3CDB4;
  --olive: #5A6841;
  --olive-deep: #4A5636;
  --olive-pale: #DCE3C3;
  --gutter: clamp(16px, 4vw, 48px);
  --sec: clamp(72px, 9vw, 128px);
  --header-h: 80px;
  /* oiled-oak grain: long horizontal fibres, multiplied onto the wood tones */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0016 0.04' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0 1 0 1 0 1 0 1 0 1 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.11 0 0 0 0 0.06 0.9 0 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--header-h) + 8px); }
body { background: var(--cream); color: var(--ink-body); font-size: 16px; line-height: 1.6; }
img { height: auto; }
h1, h2, h3 { line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.container { max-width: 1240px; padding: 0 var(--gutter); }
.section { padding: var(--sec) 0; }
.eyebrow { font: 600 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); margin: 0 0 16px; }
.section-title { color: var(--ink); }
.section-intro { color: var(--ink-muted); }

/* wood surfaces: grain only where A uses it (hero, menu, knife story, footer) */
.oak { position: relative; isolation: isolate; background-color: var(--oak-700); color: var(--on-oak); }
.oak::before,
.scroll-story::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 1200px 700px;
  opacity: .4; mix-blend-mode: multiply;
}
.oak .eyebrow, .scroll-story .eyebrow { color: var(--copper-glow); }
.oak .section-title { color: var(--on-oak); }

/* cutting-board frame with its juice groove */
.board {
  position: relative; isolation: isolate;
  background-color: var(--oak-500);
  padding: clamp(10px, 1.3vw, 16px);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,228,196,.16), 0 34px 60px -34px rgba(41,24,14,.75), 0 2px 0 rgba(41,24,14,.25);
}
.board::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: var(--grain); background-size: 900px 520px; opacity: .55; mix-blend-mode: multiply;
}
.board::after {
  content: ""; position: absolute; inset: clamp(5px, .6vw, 7px); border-radius: 8px; pointer-events: none;
  border: 1px solid rgba(41,24,14,.5);
  box-shadow: 0 1px 0 rgba(255,228,196,.14), inset 0 1px 0 rgba(255,228,196,.08);
}
.board picture { display: block; position: relative; z-index: 1; }
.board img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 4px; padding: 16px 26px; font: 600 15px/1 var(--sans); letter-spacing: .01em; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--copper, .btn--gold { background: var(--copper); color: var(--ink); border-color: var(--copper); box-shadow: inset 0 -2px 0 rgba(41,24,14,.22); }
.btn--copper:hover, .btn--gold:hover { background: #D39771; border-color: #D39771; box-shadow: inset 0 -2px 0 rgba(41,24,14,.22); }
.btn:focus-visible { outline: 2px solid var(--copper-glow); outline-offset: 3px; }

/* ---------- Header ---------- */
.header {
  background: rgba(83,55,38,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(240,194,156,.2);
  color: var(--on-oak);
}
.header.scrolled { background: rgba(83,55,38,.96); border-bottom-color: rgba(240,194,156,.2); box-shadow: 0 10px 30px -18px rgba(41,24,14,.7); }
.nav { height: var(--header-h); gap: 24px; }
.brand { flex: none; }
.brand-seal { display: block; height: 58px; width: auto; }
.nav-links { gap: clamp(16px, 2.4vw, 34px); }
.nav-links a { font: 500 15px/1 var(--sans); color: var(--on-oak); padding: 8px 0; }
.nav-links a:hover { color: var(--copper-glow); }
.nav-right { gap: 14px; }
.lang-toggle { gap: 2px; padding: 3px; border: 1px solid rgba(240,194,156,.28); border-radius: 5px; }
.lang-toggle a { font: 600 12px/1 var(--sans); letter-spacing: .08em; padding: 8px 9px; border-radius: 3px; color: var(--on-oak-muted); }
.lang-toggle a.active { background: var(--copper); color: var(--ink); }
.hamburger { width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(240,194,156,.28); border-radius: 5px; padding: 0; }
.hamburger span { width: 20px; background: var(--on-oak); }

/* ---------- Hero: full-screen film of their grill over its own first frame ---------- */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  padding-top: var(--header-h);
  overflow: clip;
  background-color: #1d120b;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img,
.hero-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; }
/* the loop fades in over the last frame of the reveal, which is the frame the loop starts on */
.hero-loop { opacity: 0; transition: opacity .18s linear; }
.hero-loop.is-visible { opacity: 1; }
/* the oak grain is for wood surfaces; over the film it multiplies into dark lines across the bright flare-up */
.hero.oak::before { content: none; }
/* warm scrim: dark behind the copy on the left, a soft foot into the ticker; strong enough to hold the copy over the flare-up */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(24,14,8,.84) 0%, rgba(24,14,8,.62) 30%, rgba(24,14,8,.26) 46%, rgba(24,14,8,0) 62%),
    linear-gradient(0deg, rgba(24,14,8,.6) 0, rgba(24,14,8,0) 26%);
}
.hero .tagline,
.hero h1,
.hero p.lede { text-shadow: 0 1px 2px rgba(24,14,8,.35), 0 2px 22px rgba(24,14,8,.6); }
.hero-grid {
  flex: 1 0 auto;
  display: grid; grid-template-columns: minmax(0, 640px);
  align-content: center;
  padding-top: clamp(32px, 4.4vw, 64px); padding-bottom: clamp(40px, 5vw, 72px);
}
.hero .tagline { margin: 0; font: italic 600 clamp(22px, 2.3vw, 32px)/1.2 var(--serif); color: var(--copper-glow); }
.hero h1 { --h1: clamp(88px, 12.2vw, 178px); margin: 14px 0 0 calc(var(--h1) * -.04); font-size: var(--h1); line-height: .86; letter-spacing: -.035em; color: var(--on-oak); }
.hero h1 .thin {
  display: flex; align-items: center; gap: 14px;
  margin: clamp(30px, 3.2vw, 46px) 0 0 calc(var(--h1) * .04);
  font: 600 12.5px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--on-oak);
}
.hero h1 .thin::before { content: ""; flex: none; width: 44px; height: 1px; background: var(--copper); }
.hero p.lede { margin: 26px 0 0; max-width: 30em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--on-oak); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.hero-call {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 0; font: 600 16px/1 var(--sans); color: var(--on-oak);
  border-bottom: 1px solid rgba(240,194,156,.5); transition: color .2s, border-color .2s;
}
.hero-call svg { width: 17px; height: 17px; color: var(--copper-glow); }
.hero-call:hover { color: var(--copper-glow); border-color: var(--copper-glow); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.hero-facts .fact {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid rgba(240,194,156,.42); border-radius: 2px;
  font: 500 13px/1 var(--sans); color: var(--on-oak); background: rgba(41,24,14,.14);
  white-space: nowrap;
}
.hero-facts .fact b { font-weight: 700; }
.hero-facts .stars { color: var(--copper-glow); letter-spacing: 1px; font-size: 12px; }
/* the count-up keeps its final width from the first frame, so the pills never re-wrap and the copy never jumps */
.hero-facts .count { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.hero-facts .count::before { content: attr(data-final); display: block; height: 0; overflow: hidden; visibility: hidden; }
@media (max-width: 768px), (orientation: portrait) {
  .hero-bg img,
  .hero-video { object-position: 50% 30%; }
  .hero::after {
    background: linear-gradient(0deg, rgba(24,14,8,.92) 0%, rgba(24,14,8,.78) 38%, rgba(24,14,8,.46) 56%, rgba(24,14,8,.12) 70%, rgba(24,14,8,0) 80%);
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-content: end; padding-bottom: 28px; }
}

/* specialties ticker: kept, now an oak band at the foot of the hero */
.hero-marquee {
  position: relative; z-index: 1; flex: none;
  display: flex; align-items: center; height: 58px; overflow: hidden;
  border-top: 1px solid rgba(240,194,156,.22);
  background: rgba(41,24,14,.2);
  pointer-events: none;
}
.hero-marquee-track { display: flex; flex: 0 0 auto; width: max-content; will-change: transform; animation: hero-marquee-scroll 34s linear infinite; }
.hero-marquee-group { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(22px, 2.5vw, 46px); padding-inline: clamp(22px, 2.5vw, 46px); }
.hero-marquee-group span { color: var(--copper-glow); font: italic 400 clamp(15px, 1.35vw, 19px)/1 var(--serif); white-space: nowrap; }
.hero-marquee-group i { color: var(--copper); font: normal 10px/1 var(--sans); }
@keyframes hero-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- About ---------- */
#about .stat-row { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: stretch; }
.stat-seal { align-self: center; padding: 18px 26px 18px 0; }
.stat-seal img { display: block; height: 86px; width: auto; }
#about .stat { padding: 22px 0 22px 24px; border-left: 1px solid var(--line-light); }
#about .stat b { font: 700 clamp(30px, 3vw, 42px)/1 var(--serif); font-variant-numeric: lining-nums; color: var(--ink); }
#about .stat b small { margin-left: 2px; font-size: .55em; color: var(--copper-ink); }
#about .stat > span { display: block; margin-top: 8px; font: 600 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
#about .about-media img { height: auto; aspect-ratio: auto; object-fit: initial; }

/* ---------- Sa žara (grill band) ---------- */
.grill { isolation: isolate; background-color: var(--oak-pale); }
.grill::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 1200px 700px; opacity: .16; mix-blend-mode: multiply; }
.grill-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.grill .section-title { margin: 0; font-size: clamp(56px, 8vw, 120px); line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.grill .section-title em { font-style: italic; font-weight: 600; color: var(--copper-ink); }
.grill-head p { margin: 0; justify-self: end; max-width: 26em; font-size: 17px; color: var(--ink-body); }
.grill-rows { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.grill-row { display: flex; gap: clamp(12px, 1.4vw, 18px); }
.grill-row figure { flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.grill-row picture { display: block; }
.grill-row img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; border-radius: 6px; }
.grill-row figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 13.5px; line-height: 1.35; color: var(--ink-body); }
.grill-row figcaption b { font-weight: 600; color: var(--copper-ink); font-variant-numeric: tabular-nums; }

/* ---------- Menu: cream card resting on the oak ---------- */
#menu.oak { background: radial-gradient(60% 50% at 50% 0%, rgba(199,137,98,.22), transparent 70%), var(--oak-700); }
#menu.oak::before { z-index: -1; opacity: .4; background-image: var(--grain); background-size: 1200px 700px; mix-blend-mode: multiply; }
.menu-seal { display: block; height: 108px; width: auto; margin: 0 auto 26px; }
#menu .section-title { margin: 14px 0 0; font-size: clamp(48px, 6.4vw, 88px); color: var(--on-oak); }
#menu .center .section-title { white-space: normal; }
#menu .campo-art { color: var(--copper-glow); }
#menu .campo-menu-board, #menu .campo-menu-wine { opacity: .5; }
#menu .menu-tools { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); margin-top: clamp(36px, 5vw, 56px); }
#menu .menu-group {
  min-height: 48px; padding: 13px 18px; border: 1px solid rgba(240,194,156,.34); border-radius: 4px;
  background: rgba(41,24,14,.16); color: var(--on-oak); font: 600 15px/1 var(--sans);
}
#menu .menu-group:hover { border-color: var(--copper-glow); color: var(--on-oak); }
#menu .menu-group[aria-pressed=true] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
#menu .menu-search input {
  height: 50px; border: 1px solid rgba(240,194,156,.38); border-radius: 4px;
  background: rgba(41,24,14,.2); color: var(--on-oak); font: 400 16px/1.2 var(--sans);
}
#menu .menu-search input::placeholder { color: var(--on-oak-muted); }
#menu .menu-search input:focus { border-color: var(--copper-glow); }
#menu .menu-search svg { top: 50%; transform: translateY(-50%); stroke: var(--copper-glow); }
#menu .menu-clear { color: var(--copper-glow); border-color: rgba(240,194,156,.38); border-radius: 4px; }
#menu .menu-group:focus-visible, #menu .menu-tab:focus-visible, #menu .menu-search input:focus-visible,
#menu .menu-category-picker select:focus-visible, #menu .menu-clear:focus-visible { outline: 2px solid var(--copper-glow); }
#menu-tabs { margin: 26px 0 0; padding: 6px 0; gap: 4px 22px; border-block: 1px solid rgba(240,194,156,.22); background: transparent; }
#menu .menu-tab { min-height: 44px; padding: 12px 0 10px; color: var(--on-oak-muted); font: 600 12px/1 var(--sans); letter-spacing: .1em; }
#menu .menu-tab::after { left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 0; background: var(--copper); transform: scaleX(0); }
#menu .menu-tab:hover, #menu .menu-tab.active { color: var(--on-oak); }
#menu .menu-tab.active::after { transform: scaleX(1); }
#menu .menu-category-picker label { color: var(--on-oak-muted); }
#menu .menu-category-picker select { background: var(--oak-800); color: var(--on-oak); border: 1px solid rgba(240,194,156,.38); border-radius: 4px; }
#menu .menu-search-count { color: var(--on-oak-muted); }
#menu .campo-menu-layout { margin-top: clamp(32px, 4vw, 48px); }
#menu-body {
  background: var(--cream); color: var(--ink-body);
  border-radius: 10px; padding: clamp(26px, 4.4vw, 60px);
  box-shadow: 0 46px 80px -44px rgba(41,24,14,.85), 0 2px 0 rgba(41,24,14,.3);
}
#menu-body::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line-light); border-radius: 6px; pointer-events: none; }
#menu-body .menu-category-kicker { color: var(--copper-ink); }
#menu-body .menu-category-title { color: var(--ink); }
#menu-body .menu-category-mark { color: var(--copper-deep); }
#menu-body .menu-category-mark i { background: linear-gradient(90deg, transparent, rgba(173,125,82,.7)); }
#menu-body .menu-note { border-color: var(--line-light); background: var(--cream-2); color: var(--ink-muted); }
#menu-body .menu-unit-note { color: var(--copper-ink); }
#menu-body .menu-item { border-bottom: 1px dashed var(--line-light); }
#menu-body .menu-item::after { background: linear-gradient(90deg, var(--copper), transparent 42%); }
#menu-body .mi-number { color: var(--ink-muted); }
#menu-body .mi-icon-wrap { border-color: rgba(173,125,82,.45); color: var(--copper-deep); }
#menu-body .menu-item:hover .mi-icon-wrap { color: var(--copper-ink); border-color: var(--copper-deep); background: rgba(199,137,98,.08); }
#menu-body .mi-name { color: var(--ink); }
#menu-body .menu-item:hover .mi-name { color: var(--copper-ink); }
#menu-body .mi-leader { border-bottom-color: var(--line-light); }
#menu-body .mi-desc { color: var(--ink-muted); }
#menu-body .mi-price { color: var(--copper-ink); }
#menu-body .mi-price::before { display: none; }
#menu-body .mi-price-icon { stroke: var(--copper); }
#menu-body .mi-amount { color: var(--ink-muted); }
#menu-body .mi-tag { border-color: rgba(132,73,42,.4); color: var(--copper-ink); }
#menu-body .menu-search-category { color: var(--copper-ink); }
#menu-body .menu-empty { color: var(--ink-muted); border-top-color: var(--line-light); }
#menu-body .campo-item-controls { border-color: var(--copper-deep); background: transparent; }
#menu-body .campo-item-controls:hover, #menu-body .campo-item-controls.has-selection { border-color: var(--copper-ink); background: rgba(199,137,98,.12); }
#menu-body .campo-item-controls button { color: var(--ink); }
#menu-body .campo-item-controls button:hover { background: rgba(199,137,98,.22); }
#menu-body .campo-item-count { color: var(--ink); }
#menu-body button:focus-visible { outline-color: var(--copper-ink); }
#menu .menu-downloads { border-top-color: rgba(240,194,156,.22); }
#menu .menu-download-intro, #menu .menu-download-label { color: var(--on-oak-muted); }
#menu .pdf-links a { border-color: rgba(240,194,156,.38); color: var(--on-oak); }
#menu .pdf-links a:hover { border-color: var(--copper-glow); color: var(--copper-glow); }
/* order slip and phone selection bar */
.campo-ledger { border-top-color: var(--copper); }
.campo-ledger-empty > span { display: block; width: 64px; height: 64px; margin: 0 auto; font-size: 0; line-height: 0; color: transparent; background: url("../assets/brand/official/campo-logo-outline-brown.svg") center / contain no-repeat; opacity: .85; }
.campo-selection-bar:not([hidden]) { background: var(--copper); color: var(--ink); border-color: var(--copper-glow); box-shadow: 0 7px 40px rgba(41,24,14,.5); }
.campo-selection-bar .campo-bar-count { border-color: var(--copper-ink); }

/* ---------- Knife story: the same animation on the oak board ground ---------- */
.scroll-story { background-color: var(--oak-board); isolation: isolate; }
.scroll-story-sticky { background: transparent; }
/* feather every frame edge into the board so no box shows; the whole frame is drawn,
   so the side feather stays light to keep the board and its "Campo" engraving clear */
.scroll-story-canvas,
.scroll-story-fallback {
  --story-band: 0%;
  --story-fade: 13%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--story-band), #000 calc(var(--story-band) + var(--story-fade)), #000 calc(100% - var(--story-band) - var(--story-fade)), transparent calc(100% - var(--story-band)), transparent 100%), linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, transparent var(--story-band), #000 calc(var(--story-band) + var(--story-fade)), #000 calc(100% - var(--story-band) - var(--story-fade)), transparent calc(100% - var(--story-band)), transparent 100%), linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.scroll-story-fallback { object-fit: contain; }
@media (min-width: 769px) {
  .scroll-story-canvas,
  .scroll-story-fallback { --story-fade: 11%; }
}
/* doneness legend: copper wash, readable index numbers, and no static shift past the right edge */
.scroll-story-doneness li::before { background: linear-gradient(90deg, transparent, rgba(199,137,98,.06) 38%, rgba(199,137,98,.18)); }
.scroll-story-doneness li span { color: rgba(243,237,226,.74); }
/* the still fallback (reduced motion, save-data) has nothing to scroll through */
.scroll-story.is-reduced .scroll-story-copy--intro > p:last-child { display: none; }

/* ---------- Gallery: uncropped masonry ---------- */
.gallery { background: var(--cream); }
.gal-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.gallery .section-title { margin: 0; font-size: clamp(40px, 5vw, 72px); color: var(--ink); }
.gal-head > p { margin: 0; justify-self: end; max-width: 28em; font-size: 17px; color: var(--ink-body); }
#gallery .campo-gallery-signature { width: 120px; margin: 14px 0 0; color: var(--copper-deep); opacity: .8; transform: none; }
.masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.masonry-col { display: grid; gap: clamp(12px, 1.6vw, 22px); }
.masonry-col:nth-child(2) { margin-top: clamp(28px, 4.4vw, 64px); }
.masonry figure { margin: 0; border-radius: 6px; cursor: zoom-in; break-inside: avoid; }
.masonry picture { display: block; }
.masonry img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 34px -24px rgba(41,24,14,.55); transition: transform .4s ease; }
.masonry figure:hover img { transform: translateY(-3px); }
.masonry figure:focus-visible { outline: 2px solid var(--copper-ink); outline-offset: 4px; }

/* ---------- Garden: olive, existing tree and fades kept ---------- */
#garden.campo-garden {
  --fade: 150px;
  padding: 184px 0;
  background: linear-gradient(180deg, var(--cream) 0, #C9C8A9 calc(var(--fade) * .26), #8E9870 calc(var(--fade) * .56), var(--olive) var(--fade), var(--olive) calc(100% - var(--fade)), #8E9870 calc(100% - var(--fade) * .56), #C9C8A9 calc(100% - var(--fade) * .26), var(--cream) 100%);
}
.campo-garden-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.campo-garden-copy { padding: 0; }
.campo-garden .eyebrow { color: var(--olive-pale); }
.campo-garden .section-title { margin: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.04; color: var(--on-oak); }
.campo-garden .section-intro { margin-top: 22px; max-width: 26em; font-size: 17px; line-height: 1.6; color: var(--on-oak); }
.campo-garden-link { gap: 10px; min-height: 0; margin-top: 28px; padding: 0 0 8px; border-bottom-color: var(--olive-pale); color: var(--on-oak); font: 600 15px/1 var(--sans); }
.campo-garden-link svg { width: 20px; height: 20px; }
.garden-fig { margin: 0; }
.garden-fig picture { display: block; }
.garden-fig img { width: 100%; height: auto; border-radius: 6px; }
.garden-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--olive-pale); }
.garden-left .garden-fig { margin-top: clamp(36px, 5vw, 60px); }
.garden-right { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.garden-pair { display: flex; gap: clamp(14px, 1.8vw, 24px); }
.garden-pair .garden-fig { flex: var(--ar) 1 0; min-width: 0; }
.garden-pair img { aspect-ratio: var(--ar); object-fit: cover; }
/* desktop: the photos covered the tree on the right, so it stands whole in the left margin and fades out before the copy */
@media (min-width: 981px) {
  .campo-garden-tree {
    left: max(-260px, calc(50% - 980px)); right: auto; top: 20px; width: 620px; transform: none; opacity: .26;
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 92%), linear-gradient(180deg, #000 55%, transparent 88%);
    mask-image: linear-gradient(90deg, #000 45%, transparent 92%), linear-gradient(180deg, #000 55%, transparent 88%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
@media (min-width: 981px) and (max-width: 1240px) {
  .campo-garden-tree { opacity: .2; }
}

/* ---------- Reviews: the real Google numbers and a link, nothing invented ---------- */
.reviews { background: var(--cream); }
.rev-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.reviews .section-title { margin: 0; font-size: clamp(36px, 4vw, 56px); color: var(--ink); }
.rev-card {
  position: relative; display: grid; justify-items: start; gap: clamp(24px, 2.6vw, 34px);
  background: var(--cream-2); border-radius: 10px; padding: clamp(30px, 4vw, 60px);
}
.rev-card::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-light); border-radius: 6px; pointer-events: none; }
.rev-card > * { position: relative; z-index: 1; }
.rev-text { margin: 0; max-width: 22em; font: italic 600 clamp(22px, 2.3vw, 32px)/1.36 var(--serif); color: var(--ink); }
.rev-score .score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 30px; }
.rev-score .score b { font: 700 clamp(84px, 8vw, 116px)/.9 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.03em; color: var(--ink); }
.rev-score .stars { color: var(--copper-ink); font-size: 22px; letter-spacing: 3px; }
.score-meta { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 15.5px; color: var(--ink-body); }
.score-meta img { width: 20px; height: 20px; flex: none; }
.score-price { margin: 6px 0 0; font-size: 15px; color: var(--ink-muted); }
.rev-link { line-height: 1.3; text-align: left; }
.rev-link:focus-visible { outline-color: var(--copper-ink); }

/* ---------- Contact and location ---------- */
#contact { background: var(--oak-pale); }
#location { background: var(--cream); }
#location .section-intro { color: var(--ink-muted); }
.contact-card { background: var(--cream); border: 1px solid var(--line-light); border-radius: 10px; color: var(--ink-body); box-shadow: 0 30px 60px -40px rgba(41,24,14,.5); }
.contact-card h3 { color: var(--ink); }
.contact-list li { border-bottom-color: var(--line-light); }
.contact-list .lbl { color: var(--ink-muted); }
.contact-list .val { color: var(--ink); }
.contact-list a.val:hover { color: var(--copper-ink); }
/* chip rows break balanced, so no single chip is left alone on the last row */
.amenities { display: block; margin-bottom: -10px; font-size: 0; text-wrap: balance; }
.amenities span { display: inline-block; margin: 0 10px 10px 0; font-size: 13px; background: var(--cream-2); border-color: var(--line-light); color: var(--ink-body); }
#contact .amenities:first-of-type span:nth-child(-n+2) { border-color: rgba(173,125,82,.6); background: var(--oak-pale); color: var(--ink); }
.contact-list .ico { display: inline-flex; color: var(--copper-ink); }
.contact-list .ico svg { width: 20px; height: 20px; }
.payment-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.payment-logos li { border-color: var(--line-light); }
#contact .btn--ghost { border-color: var(--copper-deep); color: var(--ink); }
#contact .btn--ghost:hover { border-color: var(--copper-ink); color: var(--copper-ink); }
.map-wrap { border-color: var(--line-light); border-radius: 10px; box-shadow: 0 30px 60px -40px rgba(41,24,14,.5); }

/* ---------- Footer ---------- */
.footer.oak { background-color: var(--oak-900); border-top: 0; padding: clamp(64px, 8vw, 104px) 0 0; }
.footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-seal { display: block; height: 128px; width: auto; }
.footer .foot-brand p { margin: 22px 0 0; max-width: 22em; font-size: 15px; color: var(--on-oak-muted); }
.footer .foot-brand .tag { margin-top: 18px; font: italic 600 22px/1.2 var(--serif); color: var(--copper-glow); }
.footer h4 { margin: 0 0 18px; font: 600 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--copper-glow); }
.footer ul li { padding: 0; margin-top: 10px; font-size: 15px; color: var(--on-oak); }
.footer ul li.muted { font-size: 14px; color: var(--on-oak-muted); }
.footer ul a:hover { color: var(--copper-glow); }
.footer .fine {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; padding-bottom: 30px; border-top: 0;
  font-size: 13px; color: var(--on-oak-muted); text-align: left;
}
.footer .fine::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(240,194,156,.2); }

/* ---------- Lightbox ---------- */
.lightbox .lb-close, .lightbox .lb-nav { background: rgba(250,242,230,.08); border-color: rgba(240,194,156,.3); }
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: var(--copper); color: var(--ink); }
.lightbox img { box-shadow: 0 30px 80px rgba(41,24,14,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14px; }
}
@media (max-width: 980px) {
  .rev-grid { grid-template-columns: 1fr; }
  .campo-garden-grid { grid-template-columns: 1fr; }
  .garden-left .garden-fig { max-width: 640px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav-links { background: var(--oak-800); border-left-color: rgba(240,194,156,.2); }
  /* closed drawer leaves the tab order; visibility flips after the slide-out */
  .nav-links { visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  .nav-links.open { visibility: visible; transition: transform .3s ease, visibility 0s; }
  .nav-links a { font-size: 18px; padding: 10px 0; }
  #garden.campo-garden { --fade: 120px; padding: 148px 0 142px; }
  .campo-garden-copy { padding: 0 0 8px; }
}
@media (max-width: 720px) {
  .grill-head, .gal-head { grid-template-columns: 1fr; }
  .grill-head p, .gal-head > p { justify-self: start; }
  .grill-row { flex-wrap: wrap; }
  .grill-row .solo { flex: 0 0 100%; }
  .masonry { display: block; columns: 2; column-gap: 12px; }
  .masonry-col { display: contents; }
  .masonry figure { margin-bottom: 12px; }
  .masonry-col:nth-child(2) { margin-top: 0; }
  #about .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stat-seal { grid-column: 1 / -1; padding: 22px 0 6px; }
  .stat-seal img { height: 76px; }
  #about .stat { padding: 18px 0 20px 14px; }
  #about .stat-row .stat:nth-child(2) { border-left: 0; padding-left: 0; }
  #about .stat b { font-size: clamp(26px, 7vw, 30px); }
  #about .stat > span { font-size: 11px; letter-spacing: .08em; }
  #menu .menu-tools { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .menu-seal { height: 88px; margin-bottom: 20px; }
  #menu .menu-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #menu .menu-group { padding: 12px 6px; gap: 6px; font-size: 13px; }
  #garden.campo-garden { --fade: 100px; padding: 126px 0 116px; }
}
/* portrait tablets: the phone film overflows the box vertically here, so seat its foot on the hero's
   foot and the steak rises into the space above the copy */
@media (min-width: 481px) and (orientation: portrait) {
  .hero-bg img,
  .hero-video { object-position: 50% 100%; }
}
@media (max-width: 480px) {
  :root { --header-h: 70px; }
  .nav { gap: 10px; }
  .nav-links { top: 70px; height: calc(100vh - 70px); }
  .brand-seal { height: 50px; }
  .lang-toggle a { padding: 8px 7px; font-size: 11.5px; }
  /* the copy stacks at the foot so the steak stays visible above it */
  /* lift the steak above the stacked copy: the film's dark top goes under the header and the
     layer's foot fades into the hero base colour, so the gap it leaves at the bottom never shows */
  .hero-bg { top: -30%; bottom: 20%; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .hero .tagline { font-size: 19px; }
  .hero h1 { --h1: 68px; }
  .hero h1 .thin { gap: 10px; margin-top: 18px; font-size: 11.5px; letter-spacing: .18em; }
  .hero h1 .thin::before { width: 28px; }
  .hero p.lede { margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .hero-cta { gap: 6px 20px; margin-top: 20px; }
  .hero-facts { gap: 6px; margin-top: 18px; }
  .hero-facts .fact { padding: 7px 9px; font-size: 12px; }
}
@media (max-width: 380px) {
  .hero h1 { --h1: 62px; }
  .lang-toggle a { padding: 8px 6px; }
}
@media (min-width: 601px) {
  /* category tabs break into balanced rows instead of leaving one tab alone */
  #menu-tabs { display: block; text-align: center; text-wrap: balance; }
  #menu .menu-tab { display: inline-block; margin: 0 11px; vertical-align: top; }
}
@media (max-width: 600px) {
  .pdf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdf-links a { justify-content: center; }
  .payment-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .scroll-story-doneness { right: max(24px, calc((100vw - var(--maxw)) / 2 - 144px)); transform: none; }
}
@media (max-width: 768px) {
  .scroll-story-copy--intro > p:last-child { text-shadow: 0 1px 14px rgba(41,24,14,.8), 0 0 3px rgba(41,24,14,.45); }
}
@media (min-width: 901px) {
  /* the olive branch moves off the copy and rests behind the photo board */
  .campo-about-branch { left: auto; right: max(-40px, calc(50% - 760px)); top: -70px; width: 440px; opacity: .2; transform: rotate(14deg); }
}
@media (min-width: 901px) and (max-width: 1140px) {
  /* two-column About: the seal takes its own row so the three labels keep room */
  #about .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-seal { grid-column: 1 / -1; padding: 22px 0 6px; }
  .stat-seal img { height: 76px; }
  #about .stat-row .stat:nth-child(2) { border-left: 0; padding-left: 0; }
}
@media (max-width: 380px) {
  #about .stat { padding-left: 10px; }
  #about .stat > span { font-size: 10px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; transform: none; }
  .hero-marquee-group:nth-child(2) { display: none; }
  .masonry img { transition: none; }
  .masonry figure:hover img { transform: none; }
}