/* ═══════════════════════════════════════════════════════════════════
   O PALMEIRAL — Visual System 2026
   Estado Novo civic typography × Campari aperitivo poster
   Palette: cream + olive + sage. Red: Book button only.
   Logo always in original colours.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Palette — sourced from brand swatches */
  --red:         #C4341A;   /* sparingly — Book button only */
  --red-dark:    #A02A14;
  --brown:       #7A4828;   /* barely */
  --noir:        #1A1A14;   /* warm near-black — text only */
  --cream:       #F5F2D0;   /* dominant background */
  --cream-2:     #EDE9C4;   /* alt sections */
  --cream-3:     #D8D4A8;   /* borders / rules */
  --olive:       #8C9B52;   /* main accent — nav, labels, active */
  --olive-dark:  #6B7840;   /* olive hover / pressed */
  --olive-deep:  #2C3418;   /* dark sections — replaces old ink bg */
  --olive-light: #E8EDD0;   /* olive tint backgrounds */
  --sage:        #88B088;   /* secondary accent */
  --sage-light:  #D8EDD8;   /* sage tint */
  --yellow:      #E8C42A;   /* highlight — use sparingly */
  --yellow-bg:   #FAF5D0;

  /* Typography */
  --ff-head: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --ff-body: 'EB Garamond', Georgia, serif;

  /* Layout */
  --max:    1080px;
  --px:     clamp(1rem, 4vw, 2rem);
  --nav-h:  56px;

  /* Rules */
  --rule:      2px solid var(--noir);
  --rule-thin: 1px solid var(--cream-3);
  --rule-olive: 2px solid var(--olive);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--noir);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ── NAV ─────────────────────────────────────────────────────────── */
/* Cream background so logo always shows in its original colours */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: var(--rule-olive);
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
}
.nav-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.nav-logo {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-right: 1px solid var(--cream-3);
  flex-shrink: 0;
}
.nav-logo img {
  height: 24px;
  width: auto;
  /* NO filter — logo stays in its original colours always */
}
.nav-links {
  display: flex;
  align-items: stretch;
  list-style: none;
  flex: 1;
}
.nav-links li { display: flex; align-items: stretch; }
.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-dark);
  border-right: 1px solid var(--cream-3);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--noir); background: var(--olive-light); }
.nav-links a.active { color: var(--olive-dark); border-bottom: 3px solid var(--olive); }
.nav-right {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}
.nav-lang {
  display: flex;
  align-items: center;
  padding: 0 1.125rem;
  font-family: var(--ff-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  border-left: 1px solid var(--cream-3);
  transition: color .15s;
}
.nav-lang:hover { color: var(--olive-dark); }
/* Book button: the one place red is used */
.nav-book {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  border-left: 1px solid var(--cream-3);
  transition: background .15s;
}
.nav-book:hover { background: var(--red-dark); }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0 1.25rem;
  background: none;
  border: none;
  border-left: 1px solid var(--cream-3);
  align-items: center;
  justify-content: center;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--olive-dark);
  transition: all .25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--cream);
  z-index: 99;
  border-top: var(--rule-olive);
  flex-direction: column;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: var(--ff-head);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--olive-dark);
  padding: 1rem var(--px);
  border-bottom: 1px solid var(--cream-3);
  transition: color .15s, background .15s;
}
.nav-mobile a:hover { background: var(--olive-light); }
.nav-mobile .nav-book {
  margin: 1.5rem var(--px);
  text-align: center;
  justify-content: center;
  padding: 1rem;
  border: 2px solid var(--red);
  border-left: 2px solid var(--red);
}
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,52,24,.35);
  z-index: 98;
}
.overlay.open { display: block; }

/* ── BREADCRUMB ─────────────────────────────────────────────────── */
.breadcrumb {
  background: var(--olive-light);
  border-bottom: 1px solid var(--cream-3);
  padding: .6rem var(--px);
}
.breadcrumb-inner {
  max-width: var(--max);
  margin: 0 auto;
  font-family: var(--ff-head);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.breadcrumb a { color: var(--olive-dark); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--cream-3); }

/* ── HERO ────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(68vh, 500px);
  border-bottom: var(--rule-olive);
}
/* Dark text panel — deep olive replaces pure black */
.hero-text {
  background: var(--olive-deep);
  color: var(--cream);
  padding: clamp(1.75rem, 3vw, 3.5rem) var(--px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 2px solid var(--olive);
}
.hero-kicker {
  font-family: var(--ff-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hero-kicker::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--sage);
  flex-shrink: 0;
}
.hero h1 {
  font-family: var(--ff-head);
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: .93;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 2rem;
}
.hero-sub {
  font-family: var(--ff-body);
  font-size: .9375rem;
  color: rgba(245,242,208,.7);
  line-height: 1.7;
  max-width: 44ch;
  margin-bottom: 2.5rem;
}
.hero-image {
  position: relative;
  overflow: hidden;
  background: var(--olive-light);
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .875rem 1.75rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
/* Primary = olive */
.btn-primary, .btn-ink {
  background: var(--olive-dark);
  color: var(--cream);
  border-color: var(--olive-dark);
}
.btn-primary:hover, .btn-ink:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
}
/* Red — only for book/reserve actions */
.btn-red {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
/* Outline — olive */
.btn-outline {
  background: transparent;
  color: var(--olive-dark);
  border-color: var(--olive-dark);
}
.btn-outline:hover { background: var(--olive-dark); color: var(--cream); }
/* Outline white — on dark sections */
.btn-outline-white {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245,242,208,.5);
}
.btn-outline-white:hover { background: rgba(245,242,208,.1); border-color: var(--cream); }
.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ── SECTION ─────────────────────────────────────────────────────── */
.section {
  padding: clamp(1.75rem, 3.5vw, 3rem) var(--px);
  border-bottom: var(--rule-thin);
}
.section-inner { max-width: var(--max); margin: 0 auto; }
.section-alt { background: var(--olive-light); }
/* Dark sections: deep olive, not black */
.section-ink {
  background: var(--olive-deep);
  color: var(--cream);
  border-color: rgba(136,176,136,.15);
}
.section-red {
  background: var(--red);
  color: #fff;
  border-color: var(--red-dark);
}

/* ── SECTION LABELS ─────────────────────────────────────────────── */
.section-label {
  font-family: var(--ff-head);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .875rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cream-3);
}
.section-ink .section-label { color: var(--sage); }
.section-ink .section-label::after { background: rgba(136,176,136,.2); }

/* ── HEADINGS ────────────────────────────────────────────────────── */
h1, h2.display {
  font-family: var(--ff-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .93;
  letter-spacing: -.01em;
}
h2.display { font-size: clamp(1.875rem, 3vw, 3rem); margin-bottom: 1rem; }
h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin-bottom: .75rem;
}
h3 {
  font-family: var(--ff-head);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .625rem;
}
.section-ink h2, .section-ink h3 { color: var(--cream); }
.lead {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--noir);
  max-width: 58ch;
  margin-bottom: 1rem;
}
.section-ink .lead { color: rgba(245,242,208,.75); }

/* ── RULE DIVIDERS ───────────────────────────────────────────────── */
.rule { border: none; border-top: var(--rule-olive); margin: 0; }
.rule-thin { border: none; border-top: var(--rule-thin); margin: 0; }

/* ── SERVICE STRIP ───────────────────────────────────────────────── */
.service-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--rule-olive);
  border-top: var(--rule-olive);
}
.service-block {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--cream-3);
  background: var(--cream);
  transition: background .15s;
}
.service-block:last-child { border-right: none; }
.service-block:hover { background: var(--olive-light); }
/* Highlight block: olive, not red */
.service-block.highlight {
  background: var(--olive-dark);
  color: var(--cream);
}
.service-block.highlight:hover { background: var(--olive-deep); }
.service-block-label {
  font-family: var(--ff-head);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .625rem;
}
.service-block.highlight .service-block-label { color: var(--sage); }
.service-block-title {
  font-family: var(--ff-head);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--noir);
  margin-bottom: .375rem;
}
.service-block.highlight .service-block-title { color: var(--cream); }
.service-block-time {
  font-family: var(--ff-body);
  font-size: .875rem;
  color: var(--olive);
  font-style: italic;
}
.service-block.highlight .service-block-time { color: rgba(245,242,208,.75); }
.service-block.highlight .service-block-time a { color: var(--cream); }

/* ── IMAGE GRID ──────────────────────────────────────────────────── */
.img-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--rule-olive);
  border-bottom: none;
}
.img-grid-2 > * { border-bottom: var(--rule-olive); }
.img-grid-2 > *:first-child { border-right: var(--rule-olive); }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-3-2 { aspect-ratio: 3 / 2; }
.img-4-3 { aspect-ratio: 4 / 3; }
.img-16-9 { aspect-ratio: 16 / 9; }
.img-1-1 { aspect-ratio: 1; }
.img-caption {
  font-family: var(--ff-body);
  font-size: .8125rem;
  font-style: italic;
  color: var(--olive);
  padding: .625rem 0 0;
  border-top: var(--rule-thin);
  margin-top: .5rem;
}

/* ── CONTENT + IMAGE SPLIT ───────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--rule-olive);
}
.split-text {
  padding: clamp(1.25rem, 2vw, 2rem);
  border-right: var(--rule-olive);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-image { overflow: hidden; }
.split-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split.reverse .split-text {
  border-right: none;
  border-left: var(--rule-olive);
  order: 2;
}
.split.reverse .split-image { order: 1; }

/* ── TEXT COLUMNS ────────────────────────────────────────────────── */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }

/* ── PULL QUOTE ──────────────────────────────────────────────────── */
.pullquote {
  border-left: 4px solid var(--olive);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--olive-light);
}
.pullquote p {
  font-family: var(--ff-body);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--noir);
  line-height: 1.6;
  margin: 0;
}

/* ── NOTICE BLOCK ────────────────────────────────────────────────── */
.notice {
  background: var(--yellow-bg);
  border: 2px solid var(--yellow);
  padding: 1rem 1.25rem;
  font-family: var(--ff-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--noir);
  margin-bottom: 1.5rem;
}

/* ── HOURS TABLE ─────────────────────────────────────────────────── */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-body);
  font-size: 1rem;
  border: var(--rule-olive);
}
.hours-table tr { border-bottom: var(--rule-thin); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: .625rem .875rem; }
.hours-table td:first-child {
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--olive);
  width: 45%;
  border-right: var(--rule-thin);
}
.hours-table td:last-child { font-weight: 500; }
.hours-table tr.closed td { color: var(--cream-3); }

/* ── CONTACT LIST ────────────────────────────────────────────────── */
.contact-list { list-style: none; border: var(--rule-olive); }
.contact-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: var(--rule-thin);
  font-family: var(--ff-body);
  font-size: .9375rem;
}
.contact-list li:last-child { border-bottom: none; }
.contact-label {
  font-family: var(--ff-head);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
  min-width: 72px;
}
.contact-list a { color: var(--olive-dark); transition: opacity .15s; }
.contact-list a:hover { opacity: .7; }

/* ── MENU ────────────────────────────────────────────────────────── */
.menu-tabs {
  display: flex;
  border-bottom: var(--rule-olive);
  flex-wrap: wrap;
}
.menu-tab {
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  padding: .875rem 1.25rem;
  border: none;
  border-right: var(--rule-thin);
  border-bottom: 3px solid transparent;
  background: var(--cream-2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.menu-tab:hover { color: var(--noir); background: var(--olive-light); }
.menu-tab.active {
  color: var(--olive-dark);
  background: var(--cream);
  border-bottom-color: var(--olive-dark);
}
.menu-section { display: none; padding-top: 1.5rem; }
.menu-section.active { display: block; }

.menu-subsection { margin-bottom: 1.75rem; }
.menu-cat {
  font-family: var(--ff-head);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  padding-bottom: .5rem;
  border-bottom: var(--rule-olive);
  margin-bottom: 0;
}
.menu-row {
  display: flex;
  align-items: baseline;
  padding: .6875rem 0;
  border-bottom: var(--rule-thin);
  gap: .5rem;
}
.menu-row:last-child { border-bottom: none; }
.menu-item-wrap { flex: 1; min-width: 0; }
.menu-name {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--noir);
  display: block;
}
.menu-desc {
  font-family: var(--ff-body);
  font-size: .875rem;
  font-style: italic;
  color: var(--olive);
  display: block;
  margin-top: 1px;
}
.menu-dots {
  flex: 1;
  min-width: .75rem;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--cream-3) 0, var(--cream-3) 3px,
    transparent 3px, transparent 7px
  );
  position: relative;
  top: -.5em;
}
.menu-price {
  font-family: var(--ff-head);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--olive-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-note-bar {
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--olive-dark);
  background: var(--olive-light);
  border: var(--rule-thin);
  border-left: 4px solid var(--olive);
  padding: .75rem 1rem;
  margin-bottom: 2rem;
}
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

/* Set menus */
.set-card {
  border: var(--rule-olive);
  padding: 1.25rem;
  background: var(--cream);
}
.set-card-title {
  font-family: var(--ff-head);
  font-size: 1.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--noir);
  line-height: 1;
  margin-bottom: .375rem;
}
.set-card-price {
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .875rem;
  padding-bottom: 1rem;
  border-bottom: var(--rule-thin);
}
.set-card ul {
  list-style: none;
  font-family: var(--ff-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--noir);
}
.set-card ul li {
  padding: .1875rem 0;
  border-bottom: 1px dotted var(--cream-3);
}
.set-card ul li:last-child { border-bottom: none; }
.set-card-pairing {
  font-family: var(--ff-body);
  font-size: .8125rem;
  font-style: italic;
  color: var(--olive);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--rule-thin);
}

/* ── DRINKS ──────────────────────────────────────────────────────── */
.drinks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-item { border-bottom: var(--rule-thin); padding: 1.25rem 0; }
.faq-item:first-child { border-top: var(--rule-olive); }
.faq-q {
  font-family: var(--ff-head);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--olive-dark);
  margin-bottom: .625rem;
}
.faq-a { font-family: var(--ff-body); font-size: 1rem; color: var(--noir); line-height: 1.7; }
.faq-a a { color: var(--olive-dark); }

/* ── PRIVATE DINING ──────────────────────────────────────────────── */
.pd-callout {
  background: var(--olive-deep);
  color: var(--cream);
  border: 2px solid var(--olive);
  padding: 1.75rem 1.5rem;
  margin-top: 2rem;
}
.pd-callout h3 { color: var(--cream); margin-bottom: .75rem; }
.pd-callout p { color: rgba(245,242,208,.75); font-family: var(--ff-body); margin-bottom: 1rem; }
.pd-callout a.red { color: var(--sage); }

/* ── LOCATION ────────────────────────────────────────────────────── */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.map-frame { width: 100%; height: 340px; border: var(--rule-olive); display: block; }

/* ── PRESS ───────────────────────────────────────────────────────── */
.press-badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--olive-deep);
  color: var(--cream);
  padding: .875rem 1.25rem;
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 2px solid var(--olive);
  margin-bottom: 1.5rem;
}
.press-badge strong { color: var(--yellow); font-size: .875rem; }

/* ── ABOUT ───────────────────────────────────────────────────────── */
.about-block { margin-bottom: 2rem; }
.about-block:last-child { margin-bottom: 0; }
.about-block h2 { margin-bottom: 1rem; }

/* ── RECIPE CARDS ────────────────────────────────────────────────── */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0;
  border: var(--rule-olive);
}
.recipe-card {
  padding: 1.25rem;
  border-bottom: var(--rule-olive);
  border-right: var(--rule-olive);
}
.recipe-card:nth-child(even) { border-right: none; }
.recipe-card h2 {
  font-family: var(--ff-head);
  font-size: 1.375rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--noir);
  letter-spacing: .03em;
  margin-bottom: .25rem;
}
.recipe-card .sub {
  font-family: var(--ff-body);
  font-size: .875rem;
  font-style: italic;
  color: var(--olive);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--rule-thin);
}
.recipe-card h3 {
  font-size: .5625rem;
  letter-spacing: .18em;
  color: var(--olive);
  margin: .875rem 0 .375rem;
  text-transform: uppercase;
  font-family: var(--ff-head);
  font-weight: 700;
}
.recipe-card ul, .recipe-card ol {
  padding-left: 1.125rem;
  font-family: var(--ff-body);
  font-size: .9375rem;
  color: var(--noir);
  line-height: 1.65;
}
.recipe-card li { margin-bottom: .2rem; }

.recipe-filters { display: flex; border: var(--rule-olive); border-bottom: none; flex-wrap: wrap; }
.recipe-filter {
  font-family: var(--ff-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  padding: .75rem 1rem;
  background: none;
  border: none;
  border-right: var(--rule-thin);
  cursor: pointer;
  transition: all .15s;
}
.recipe-filter:hover, .recipe-filter.active {
  color: var(--olive-dark);
  background: var(--olive-light);
}

/* ── ADDRESS STRIP ───────────────────────────────────────────────── */
.address-strip {
  background: var(--olive-light);
  border-top: var(--rule-olive);
  border-bottom: var(--rule-olive);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.address-strip-text {
  padding: clamp(1.25rem, 2.5vw, 2.5rem) var(--px);
  border-right: var(--rule-olive);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.address-strip-text address {
  font-family: var(--ff-body);
  font-size: 1.125rem;
  font-style: normal;
  color: var(--noir);
  line-height: 1.7;
  margin-bottom: .875rem;
}
.address-strip-text address strong {
  font-family: var(--ff-head);
  font-size: 1.375rem;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: .25rem;
}
.address-strip-map { overflow: hidden; min-height: 300px; }
.address-strip-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer {
  background: var(--olive-deep);
  color: rgba(245,242,208,.55);
  border-top: 2px solid var(--olive);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  border-bottom: 1px solid rgba(136,176,136,.15);
}
.footer-col {
  padding: 1.5rem var(--px);
  border-right: 1px solid rgba(136,176,136,.1);
}
.footer-col:last-child { border-right: none; }
.footer-brand {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--cream);
  margin-bottom: .625rem;
  display: block;
}
.footer-tagline {
  font-family: var(--ff-body);
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(245,242,208,.45);
  max-width: 22ch;
}
.footer-col h4 {
  font-family: var(--ff-head);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: .875rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.footer-col a {
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245,242,208,.55);
  transition: color .15s;
}
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  padding: .875rem var(--px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--ff-head);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,242,208,.25);
}
.footer-bottom a { color: rgba(245,242,208,.35); transition: color .15s; }
.footer-bottom a:hover { color: var(--cream); }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

/* ── LAPTOP TIGHTENING (1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { min-height: min(60vh, 440px); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image { min-height: 50vw; }
  .service-strip { grid-template-columns: 1fr 1fr; }
  .service-block { border-bottom: 1px solid var(--cream-3); }
  .service-block:nth-child(even) { border-right: none; }
  .split { grid-template-columns: 1fr; }
  .split-text { border-right: none; border-bottom: var(--rule-olive); order: 2; }
  .split-image { order: 1; min-height: 50vw; }
  .split.reverse .split-text { border-left: none; border-bottom: var(--rule-olive); }
  .menu-grid { grid-template-columns: 1fr; }
  .cols-2, .cols-3, .drinks-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .img-grid-2 { grid-template-columns: 1fr; }
  .img-grid-2 > *:first-child { border-right: none; }
  .address-strip { grid-template-columns: 1fr; }
  .address-strip-text { border-right: none; border-bottom: var(--rule-olive); }
}
@media (max-width: 640px) {
  .service-strip { grid-template-columns: 1fr; }
  .service-block { border-right: none; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-col { border-right: none; border-bottom: 1px solid rgba(136,176,136,.1); }
  .btn-row { flex-direction: column; }
  .btn { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── HIRE STRIP ──────────────────────────────────────────────────── */
.hire-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .875rem var(--px);
  background: var(--olive-deep);
  color: var(--cream);
  border-top: 2px solid var(--olive);
  border-bottom: 2px solid var(--olive);
  text-decoration: none;
  transition: background .15s;
  flex-wrap: wrap;
}
.hire-strip:hover { background: #1a1f0d; }
.hire-label {
  font-family: var(--ff-head);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
}
.hire-title {
  font-family: var(--ff-head);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cream);
  white-space: nowrap;
}
.hire-detail {
  font-family: var(--ff-body);
  font-size: .9375rem;
  color: rgba(245,242,208,.65);
  flex: 1;
}
@media (max-width: 640px) {
  .hire-strip { flex-direction: column; align-items: flex-start; gap: .5rem; }
}