/* ============================================================
   Miguel's Garden Cafe — styles.css
   Palette: dark #0E2218 | bg-alt #162C20 | accent #3E9E94
            highlight #8EAA40 | cream #F4F1E6
   Fonts: Josefin Sans (display) · Mada (body)
   22 Sections:
   01 Reset & Custom Properties
   02 Base & Typography
   03 Utility Classes
   04 Navbar
   05 Hero
   06 Page Hero (inner pages)
   07 Features Strip
   08 Offerings Grid
   09 Brand Teaser
   10 Stats Row
   11 Reviews
   12 Social CTA
   13 Social Feed Grid
   14 Footer
   15 About Page
   16 Menu Page
   17 Gallery Page
   18 Contact Page
   19 FAQ Accordion
   20 Form Styles
   21 Buttons
   22 Animations & Media Queries
   ============================================================ */

/* ── 01 Reset & Custom Properties ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark:        #0E2218;
  --bg-alt:      #162C20;
  --accent:      #3E9E94;
  --highlight:   #8EAA40;
  --cream:       #F4F1E6;
  --cream-dim:   rgba(244,241,230,.65);
  --accent-dim:  rgba(62,158,148,.14);
  --border:      rgba(62,158,148,.22);
  --ff-display:  'Josefin Sans', sans-serif;
  --ff-body:     'Mada', sans-serif;
  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 4px 24px rgba(0,0,0,.35);
  --shadow-sm:   0 2px 12px rgba(0,0,0,.22);
  --transition:  .3s ease;
  --max-w:       1200px;
  --nav-h:       72px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--dark);
  color: var(--cream);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

ul, ol {
  list-style: none;
}

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

/* ── 02 Base & Typography ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--cream);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p {
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--cream-dim);
  line-height: 1.75;
}

strong { color: var(--cream); font-weight: 600; }

.accent-text  { color: var(--accent); }
.highlight-text { color: var(--highlight); }

.section-label {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}

.section-title {
  margin-bottom: 1rem;
}

.section-intro {
  font-size: 1.05rem;
  max-width: 600px;
  color: var(--cream-dim);
  line-height: 1.8;
}

/* ── 03 Utility Classes ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: 80px;
}

.section--alt {
  background: var(--bg-alt);
}

.text-center { text-align: center; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--highlight));
  border-radius: 2px;
  margin: 1.2rem 0 1.8rem;
}

.divider--center {
  margin-inline: auto;
}

/* ── 04 Navbar ────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(14,34,24,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
  background: rgba(14,34,24,.98);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.navbar__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.navbar__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--cream);
  line-height: 1.2;
}

.navbar__name span {
  display: block;
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--accent);
  text-transform: uppercase;
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar__link {
  font-family: var(--ff-display);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 8px 14px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--cream);
  background: var(--accent-dim);
}

.navbar__cta {
  font-family: var(--ff-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--accent);
  padding: 9px 20px;
  border-radius: 24px;
  transition: background var(--transition), transform var(--transition);
}

.navbar__cta:hover {
  background: var(--highlight);
  transform: translateY(-1px);
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile menu */
.navbar__mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(14,34,24,.98);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 28px;
  flex-direction: column;
  gap: 4px;
}

.navbar__mobile.open {
  display: flex;
}

.navbar__mobile .navbar__link {
  padding: 12px 16px;
  font-size: .9rem;
}

.navbar__mobile .navbar__cta {
  margin-top: 12px;
  text-align: center;
  padding: 13px 20px;
}

/* ── 05 Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('images/banner.jpg?v=1');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease;
}

.hero__bg.loaded {
  transform: scale(1);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(14,34,24,.82) 0%,
    rgba(14,34,24,.55) 55%,
    rgba(14,34,24,.35) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-h);
  max-width: 720px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.hero__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.hero__title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  color: var(--cream);
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__subtitle {
  font-family: var(--ff-display);
  font-size: clamp(.9rem, 2vw, 1.1rem);
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 1.4rem;
}

.hero__tagline {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--cream-dim);
  margin-bottom: 2.4rem;
  max-width: 480px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .6;
  animation: scrollBounce 2s infinite;
}

.hero__scroll span {
  font-family: var(--ff-display);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── 06 Page Hero (inner pages) ───────────────────────────── */
.page-hero {
  padding-top: var(--nav-h);
  padding-bottom: 0;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

.page-hero--about {
  background: linear-gradient(135deg, #0a1f14 0%, #1a3825 40%, #0e2e1c 100%);
}

.page-hero--menu {
  background: linear-gradient(135deg, #0d1e0e 0%, #1b3420 50%, #0e2218 100%);
}

.page-hero--gallery {
  background: linear-gradient(135deg, #102418 0%, #1e3828 50%, #0e2218 100%);
}

.page-hero--contact {
  background: linear-gradient(135deg, #0a1c11 0%, #163020 50%, #0e2218 100%);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(62,158,148,.12) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  padding-block: 60px 72px;
}

.page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.page-hero__label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.page-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: .8rem;
}

.page-hero__sub {
  font-size: 1.05rem;
  color: var(--cream-dim);
  max-width: 560px;
}

/* ── 07 Features Strip ────────────────────────────────────── */
.features {
  background: var(--bg-alt);
  padding-block: 60px;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent-dim);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

.feature-card:hover {
  border-color: var(--accent);
  background: rgba(62,158,148,.22);
  transform: translateY(-4px);
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
  flex-shrink: 0;
}

.feature-card__title {
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cream);
  line-height: 1.3;
}

.feature-card__desc {
  font-size: .83rem;
  color: var(--cream-dim);
  line-height: 1.6;
}

/* ── 08 Offerings Grid ────────────────────────────────────── */
.offerings__header {
  text-align: center;
  margin-bottom: 52px;
}

.offerings__header .section-intro {
  margin-inline: auto;
}

.offerings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.offering-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.offering-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.offering-tile:hover .offering-tile__inner {
  background: rgba(14,34,24,.88);
}

.offering-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}

.offering-tile:hover .offering-tile__bg {
  transform: scale(1.06);
}

/* Individual gradient backgrounds */
.offering-tile--starters .offering-tile__bg {
  background: linear-gradient(145deg, #1a3a1e 0%, #2d5c2a 100%);
}

.offering-tile--pizza .offering-tile__bg {
  background: linear-gradient(145deg, #1e2f18 0%, #3a5420 100%);
}

.offering-tile--mains .offering-tile__bg {
  background: linear-gradient(145deg, #12352a 0%, #225442 100%);
}

.offering-tile--pasta .offering-tile__bg {
  background: linear-gradient(145deg, #162a1e 0%, #2e4c30 100%);
}

.offering-tile--desserts .offering-tile__bg {
  background: linear-gradient(145deg, #1e2818 0%, #3c4822 100%);
}

.offering-tile--beverages .offering-tile__bg {
  background-image: url('images/menu-coffee-01.jpg');
}

.offering-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,34,24,.92) 0%, rgba(14,34,24,.3) 60%, transparent 100%);
}

.offering-tile__inner {
  position: relative;
  z-index: 2;
  padding: 24px;
  width: 100%;
  transition: background var(--transition);
}

.offering-tile__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 10px;
}

.offering-tile__label {
  font-family: var(--ff-display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.offering-tile__name {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 6px;
}

.offering-tile__desc {
  font-size: .83rem;
  color: var(--cream-dim);
  line-height: 1.5;
}

/* ── 09 Brand Teaser ──────────────────────────────────────── */
.brand-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.brand-teaser__image {
  position: relative;
  overflow: hidden;
}

.brand-teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.brand-teaser__image:hover img {
  transform: scale(1.04);
}

.brand-teaser__content {
  background: var(--bg-alt);
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-teaser__quote {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream-dim);
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 1.8rem 0;
  line-height: 1.8;
}

.brand-teaser__detail {
  font-size: .88rem;
  color: var(--cream-dim);
  line-height: 1.8;
}

/* ── 10 Stats Row ─────────────────────────────────────────── */
.stats {
  background: linear-gradient(135deg, var(--bg-alt) 0%, #1c3826 100%);
  padding-block: 64px;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 32px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent-dim);
  transition: border-color var(--transition), transform var(--transition);
}

.stat-item:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.stat-item__number {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: .4rem;
}

.stat-item__label {
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ── 11 Reviews ───────────────────────────────────────────── */
.reviews__header {
  text-align: center;
  margin-bottom: 52px;
}

.reviews__header .section-intro {
  margin-inline: auto;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}

.review-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.review-card__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  color: #f5a623;
}

.review-card__stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.review-card__quote {
  font-size: .95rem;
  color: var(--cream-dim);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 20px;
}

.review-card__quote::before {
  content: '\201C';
  font-size: 2.2rem;
  line-height: 0;
  vertical-align: -.5rem;
  color: var(--accent);
  opacity: .5;
  margin-right: 4px;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--highlight));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--dark);
  flex-shrink: 0;
}

.review-card__name {
  font-family: var(--ff-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--cream);
}

.review-card__source {
  font-size: .75rem;
  color: var(--accent);
  margin-top: 2px;
}

/* ── 12 Social CTA ────────────────────────────────────────── */
.social-cta {
  background: linear-gradient(135deg, var(--bg-alt) 0%, #133022 100%);
  padding-block: 80px;
  text-align: center;
}

.social-cta__inner {
  max-width: 640px;
  margin-inline: auto;
}

.social-cta__title {
  margin-bottom: 1rem;
}

.social-cta__text {
  margin-inline: auto;
  margin-bottom: 2.4rem;
  font-size: 1.05rem;
}

.social-cta__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 32px;
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
  transition: all var(--transition);
}

.social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.social-link:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ── 13 Social Feed Grid ──────────────────────────────────── */
.social-feed {
  padding-block: 80px;
  background: var(--dark);
}

.social-feed__header {
  text-align: center;
  margin-bottom: 40px;
}

.social-feed__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.feed-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-alt);
}

.feed-cell__bg {
  position: absolute;
  inset: 0;
  transition: transform .4s ease;
}

.feed-cell:hover .feed-cell__bg {
  transform: scale(1.08);
}

.feed-cell__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14,34,24,.0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.feed-cell:hover .feed-cell__overlay {
  background: rgba(62,158,148,.5);
}

.feed-cell__overlay svg {
  opacity: 0;
  width: 28px;
  height: 28px;
  color: var(--cream);
  transition: opacity var(--transition);
}

.feed-cell:hover .feed-cell__overlay svg {
  opacity: 1;
}

/* Individual feed cell gradient backgrounds */
.feed-cell:nth-child(1) .feed-cell__bg { background: linear-gradient(135deg, #1a3a20 0%, #2d5c30 100%); }
.feed-cell:nth-child(2) .feed-cell__bg { background: linear-gradient(135deg, #162e24 0%, #2a5040 100%); }
.feed-cell:nth-child(3) .feed-cell__bg { background: linear-gradient(135deg, #1e3418 0%, #384e22 100%); }
.feed-cell:nth-child(4) .feed-cell__bg { background: linear-gradient(135deg, #122c20 0%, #204838 100%); }
.feed-cell:nth-child(5) .feed-cell__bg { background: linear-gradient(135deg, #1a2e16 0%, #304820 100%); }
.feed-cell:nth-child(6) .feed-cell__bg { background: linear-gradient(135deg, #10281c 0%, #1e4230 100%); }

/* ── 14 Footer ────────────────────────────────────────────── */
.footer {
  background: #080f0c;
  border-top: 1px solid var(--border);
  padding-block: 64px 32px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.footer__brand {
  max-width: 300px;
}

.footer__logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.footer__brand-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
  line-height: 1.2;
}

.footer__brand-name span {
  display: block;
  font-weight: 300;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
}

.footer__tagline {
  font-size: .88rem;
  color: var(--cream-dim);
  font-style: italic;
  margin-bottom: 20px;
  line-height: 1.7;
}

.footer__socials {
  display: flex;
  gap: 10px;
}

.footer__social-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim);
  transition: all var(--transition);
}

.footer__social-btn svg {
  width: 16px;
  height: 16px;
}

.footer__social-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.footer__col-title {
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  font-size: .88rem;
  color: var(--cream-dim);
  transition: color var(--transition);
}

.footer__links a:hover {
  color: var(--accent);
}

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__contact-item {
  display: flex;
  gap: 10px;
}

.footer__contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer__contact-item p {
  font-size: .83rem;
  color: var(--cream-dim);
  line-height: 1.55;
}

.footer__contact-item a {
  color: var(--cream-dim);
  transition: color var(--transition);
}

.footer__contact-item a:hover {
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__copy {
  font-size: .78rem;
  color: rgba(244,241,230,.35);
}

.footer__bottom-links {
  display: flex;
  gap: 20px;
}

.footer__bottom-links a {
  font-size: .78rem;
  color: rgba(244,241,230,.35);
  transition: color var(--transition);
}

.footer__bottom-links a:hover {
  color: var(--accent);
}

.footer__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__rating-stars {
  display: flex;
  gap: 2px;
  color: #f5a623;
}

.footer__rating-stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.footer__rating-text {
  font-size: .78rem;
  color: rgba(244,241,230,.45);
}

/* ── 15 About Page ────────────────────────────────────────── */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-story__image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}

.about-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  pointer-events: none;
}

.about-story__badge {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--accent);
  color: var(--dark);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.3;
  box-shadow: var(--shadow);
  z-index: 2;
}

.about-philosophy {
  background: var(--bg-alt);
  padding-block: 80px;
}

.philosophy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.philosophy-card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: border-color var(--transition), transform var(--transition);
}

.philosophy-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.philosophy-card__icon {
  width: 44px;
  height: 44px;
  color: var(--highlight);
  margin-bottom: 16px;
}

.philosophy-card__title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
}

.philosophy-card__text {
  font-size: .9rem;
  color: var(--cream-dim);
  line-height: 1.75;
}

/* Timeline */
.timeline {
  padding-block: 80px;
}

.timeline__header {
  text-align: center;
  margin-bottom: 60px;
}

.timeline__track {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}

.timeline__track::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--highlight));
  opacity: .4;
}

.timeline__item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: start;
  gap: 20px;
  margin-bottom: 48px;
}

.timeline__item:nth-child(even) .timeline__text {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

.timeline__item:nth-child(even) .timeline__dot {
  grid-column: 2;
  grid-row: 1;
}

.timeline__item:nth-child(even) .timeline__empty {
  grid-column: 3;
  grid-row: 1;
}

.timeline__text {
  padding: 24px 28px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.timeline__year {
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.timeline__event {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 8px;
}

.timeline__detail {
  font-size: .85rem;
  color: var(--cream-dim);
  line-height: 1.7;
}

.timeline__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark);
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.timeline__dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline__empty {
  min-height: 1px;
}

/* About CTA split */
.about-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-alt);
}

.about-cta__half {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.about-cta__half--dark {
  background: var(--dark);
}

.about-cta__half--accent {
  background: linear-gradient(135deg, #1b3825 0%, #274d30 100%);
}

.about-cta__half h3 {
  font-size: 1.6rem;
}

.about-cta__half p {
  font-size: .95rem;
}

/* ── 16 Menu Page ─────────────────────────────────────────── */
.menu-disclaimer {
  background: var(--accent-dim);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.menu-disclaimer__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.menu-disclaimer__inner svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.menu-disclaimer__inner p {
  font-size: .85rem;
  color: var(--cream-dim);
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: .03em;
}

/* Menu category tiles */
.menu-categories {
  padding-block: 60px 32px;
}

.menu-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.menu-cat-tile {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition);
}

.menu-cat-tile:hover {
  transform: translateY(-4px);
}

.menu-cat-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}

.menu-cat-tile:hover .menu-cat-tile__bg {
  transform: scale(1.06);
}

.menu-cat-tile--starters .menu-cat-tile__bg { background: linear-gradient(145deg, #1c3a22 0%, #305828 100%); }
.menu-cat-tile--pizza .menu-cat-tile__bg    { background: linear-gradient(145deg, #1e3218 0%, #3c5420 100%); }
.menu-cat-tile--mains .menu-cat-tile__bg    { background: linear-gradient(145deg, #143428 0%, #225240 100%); }
.menu-cat-tile--desserts .menu-cat-tile__bg { background: linear-gradient(145deg, #1e2a18 0%, #3c4a22 100%); }
.menu-cat-tile--beverages .menu-cat-tile__bg { background-image: url('images/menu-coffee-01.jpg'); }
.menu-cat-tile--pasta .menu-cat-tile__bg    { background: linear-gradient(145deg, #162e20 0%, #2c4e30 100%); }

.menu-cat-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,34,24,.88) 0%, transparent 70%);
}

.menu-cat-tile__inner {
  position: relative;
  z-index: 2;
  padding: 18px 20px;
}

.menu-cat-tile__name {
  font-family: var(--ff-display);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
}

.menu-cat-tile__count {
  font-size: .75rem;
  color: var(--accent);
  margin-top: 3px;
}

/* Menu sections */
.menu-section {
  padding-block: 60px;
  border-bottom: 1px solid var(--border);
}

.menu-section:nth-child(even) {
  background: var(--bg-alt);
}

.menu-section__header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.menu-section__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.menu-section__icon svg {
  width: 24px;
  height: 24px;
}

.menu-section__title {
  font-size: 1.8rem;
  color: var(--cream);
}

.menu-section__sub {
  font-size: .88rem;
  color: var(--cream-dim);
  margin-top: 4px;
}

.menu-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.menu-item {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: border-color var(--transition), transform var(--transition);
}

.menu-section:nth-child(even) .menu-item {
  background: var(--dark);
}

.menu-item:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.menu-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 7px;
}

.menu-item--star .menu-item__dot {
  background: var(--highlight);
}

.menu-item__body {}

.menu-item__name {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-item__star {
  width: 16px;
  height: 16px;
  color: var(--highlight);
  flex-shrink: 0;
}

.menu-item__desc {
  font-size: .85rem;
  color: var(--cream-dim);
  line-height: 1.65;
}

/* Beverages image feature */
.beverages-feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}

.beverages-feature__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.beverages-feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.beverages-feature__text {}

/* Menu CTA */
.menu-cta {
  padding-block: 80px;
  text-align: center;
  background: linear-gradient(135deg, var(--bg-alt) 0%, #132c1e 100%);
}

/* ── 17 Gallery Page ──────────────────────────────────────── */
.gallery-intro {
  padding-block: 72px;
  text-align: center;
}

.gallery-intro__inner {
  max-width: 620px;
  margin-inline: auto;
}

/* Masonry-style gallery */
.gallery-masonry {
  padding-block: 0 80px;
}

.gallery-masonry__header {
  margin-bottom: 40px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}

.gallery-item:nth-child(1) {
  grid-column: span 8;
  grid-row: span 5;
}

.gallery-item:nth-child(2) {
  grid-column: span 4;
  grid-row: span 5;
}

.gallery-item:nth-child(3) {
  grid-column: span 4;
  grid-row: span 4;
}

.gallery-item:nth-child(4) {
  grid-column: span 4;
  grid-row: span 4;
}

.gallery-item:nth-child(5) {
  grid-column: span 4;
  grid-row: span 4;
}

.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.gallery-item:hover .gallery-item__img {
  transform: scale(1.06);
}

/* Gradient placeholder items */
.gallery-item--grad-1 { background: linear-gradient(145deg, #1a3c24 0%, #2e5c38 100%); }
.gallery-item--grad-2 { background: linear-gradient(145deg, #12302a 0%, #204e40 100%); }
.gallery-item--grad-3 { background: linear-gradient(145deg, #1e341c 0%, #385428 100%); }
.gallery-item--grad-4 { background: linear-gradient(145deg, #163228 0%, #2c5040 100%); }

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,34,24,.7) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__caption {
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
}

/* Gallery CTA */
.gallery-cta {
  background: var(--bg-alt);
  padding-block: 72px;
  text-align: center;
}

/* ── 18 Contact Page ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-block: 72px;
}

.contact-branch {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color var(--transition), transform var(--transition);
}

.contact-branch:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.contact-branch--featured {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--bg-alt) 0%, #1c3828 100%);
}

.contact-branch__badge {
  display: inline-block;
  background: var(--accent);
  color: var(--dark);
  font-family: var(--ff-display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.contact-branch__name {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 8px;
}

.contact-branch__location {
  font-size: .88rem;
  color: var(--accent);
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 20px;
}

.contact-branch__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.contact-detail {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.contact-detail svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.contact-detail p, .contact-detail a {
  font-size: .87rem;
  color: var(--cream-dim);
  line-height: 1.5;
}

.contact-detail a:hover {
  color: var(--accent);
}

/* Map placeholder */
.map-section {
  padding-block: 0 72px;
}

.map-container {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}

.map-container__label {
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  text-align: center;
}

.map-container__title {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 8px;
}

.map-container__address {
  font-size: .9rem;
  color: var(--cream-dim);
  text-align: center;
  margin-bottom: 20px;
}

.map-container__pin {
  width: 56px;
  height: 56px;
  background: var(--accent-dim);
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.map-container__pin svg {
  width: 28px;
  height: 28px;
}

.map-container__bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(62,158,148,.06) 39px, rgba(62,158,148,.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(62,158,148,.06) 39px, rgba(62,158,148,.06) 40px);
  pointer-events: none;
}

/* Inquiry form section */
.inquiry-section {
  background: var(--bg-alt);
  padding-block: 80px;
}

.inquiry-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}

.inquiry-aside {
  padding-top: 8px;
}

.inquiry-aside__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

.inquiry-aside__item {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent-dim);
  transition: border-color var(--transition);
}

.inquiry-aside__item:hover {
  border-color: var(--accent);
}

.inquiry-aside__item svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.inquiry-aside__item-title {
  font-family: var(--ff-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
}

.inquiry-aside__item-text {
  font-size: .82rem;
  color: var(--cream-dim);
  line-height: 1.6;
}

/* ── 19 FAQ Accordion ─────────────────────────────────────── */
.faq-section {
  padding-block: 80px;
}

.faq-header {
  text-align: center;
  margin-bottom: 52px;
}

.faq-list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  transition: border-color var(--transition);
}

.faq-item.open {
  border-color: var(--accent);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--cream);
  transition: color var(--transition);
}

.faq-question:hover {
  color: var(--accent);
}

.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--transition);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding var(--transition);
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-answer__inner {
  padding: 0 24px 20px;
  font-size: .9rem;
  color: var(--cream-dim);
  line-height: 1.75;
}

/* Contact social CTA */
.contact-social-cta {
  background: linear-gradient(135deg, var(--dark) 0%, #112a1c 100%);
  padding-block: 72px;
  text-align: center;
}

/* ── 20 Form Styles ───────────────────────────────────────── */
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__label {
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.form__input,
.form__select,
.form__textarea {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--ff-body);
  font-size: .92rem;
  color: var(--cream);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: rgba(244,241,230,.3);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62,158,148,.15);
}

.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233E9E94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
  cursor: pointer;
}

.form__select option {
  background: var(--bg-alt);
  color: var(--cream);
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__submit {
  margin-top: 8px;
}

/* ── 21 Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 32px;
  padding: 14px 28px;
  transition: all var(--transition);
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--accent);
  color: var(--dark);
}

.btn--primary:hover {
  background: #45b0a6;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(62,158,148,.35);
}

.btn--secondary {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--border);
}

.btn--secondary:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn--highlight {
  background: var(--highlight);
  color: var(--dark);
}

.btn--highlight:hover {
  background: #9bba47;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(142,170,64,.3);
}

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(244,241,230,.25);
  padding: 12px 24px;
  font-size: .78rem;
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--lg {
  padding: 16px 36px;
  font-size: .88rem;
}

.btn--sm {
  padding: 9px 18px;
  font-size: .75rem;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* ── 22 Animations & Media Queries ────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-in {
  animation: fadeInUp .6s ease both;
}

.animate-in--delay-1 { animation-delay: .1s; }
.animate-in--delay-2 { animation-delay: .2s; }
.animate-in--delay-3 { animation-delay: .3s; }
.animate-in--delay-4 { animation-delay: .4s; }
.animate-in--delay-5 { animation-delay: .5s; }

/* Intersection Observer classes */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}

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

.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }
.reveal--delay-4 { transition-delay: .32s; }
.reveal--delay-5 { transition-delay: .40s; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-story {
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .navbar__nav,
  .navbar__cta {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .brand-teaser {
    grid-template-columns: 1fr;
  }

  .brand-teaser__image {
    min-height: 300px;
  }

  .brand-teaser__content {
    padding: 48px 32px;
  }

  .offerings__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews__grid {
    grid-template-columns: 1fr;
  }

  .social-feed__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .inquiry-grid {
    grid-template-columns: 1fr;
  }

  .about-story {
    grid-template-columns: 1fr;
  }

  .about-cta {
    grid-template-columns: 1fr;
  }

  .philosophy__grid {
    grid-template-columns: 1fr;
  }

  .menu-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-items {
    grid-template-columns: 1fr;
  }

  .beverages-feature {
    grid-template-columns: 1fr;
  }

  .timeline__track::before {
    left: 20px;
    transform: none;
  }

  .timeline__item {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .timeline__item:nth-child(even) .timeline__text {
    grid-column: 2;
    text-align: left;
  }

  .timeline__item:nth-child(even) .timeline__dot {
    grid-column: 1;
  }

  .timeline__item:nth-child(even) .timeline__empty {
    display: none;
  }

  .timeline__empty {
    display: none;
  }

  .timeline__dot {
    margin-top: 16px;
  }

  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 60px;
  }

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }

  .section { padding-block: 56px; }

  .offerings__grid {
    grid-template-columns: 1fr;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-feed__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .menu-categories__grid {
    grid-template-columns: 1fr 1fr;
  }

  .features__grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-grid {
    grid-auto-rows: 50px;
  }

  .brand-teaser__content {
    padding: 36px 24px;
  }

  .page-hero__content {
    padding-block: 40px 52px;
  }
}

@media (max-width: 480px) {
  .features__grid {
    grid-template-columns: 1fr;
  }

  .stats__grid {
    grid-template-columns: 1fr 1fr;
  }

  .social-feed__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
}