/* ═══════════════════════════════════════════════════════════
   THE POUR LAB JHB — style.css
   Truly Mobile-First: 320px → 480px → 640px → 960px → 1200px+
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────── */
:root {
  /* Colours */
  --clr-bg:         #0d0b09;
  --clr-surface:    #131109;
  --clr-surface-2:  #1a1710;
  --clr-border:     rgba(212,175,100,.15);
  --clr-gold:       #d4af64;
  --clr-gold-light: #e8cb8a;
  --clr-gold-dim:   rgba(212,175,100,.35);
  --clr-cream:      #f0e8d4;
  --clr-text:       #c8bfa8;
  --clr-muted:      #7a6f5c;
  --clr-white:      #faf6ee;
  --clr-error:      #e05c5c;
  --clr-wa:         #25d366;

  /* Typography */
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;

  /* Fluid type — works on every screen with zero breakpoints */
  --fs-xs:  clamp(.72rem,  .65rem + .35vw, .875rem);
  --fs-sm:  clamp(.875rem, .8rem  + .38vw, 1rem);
  --fs-md:  clamp(1rem,    .9rem  + .5vw,  1.125rem);
  --fs-lg:  clamp(1.125rem,1rem   + .7vw,  1.375rem);
  --fs-xl:  clamp(1.4rem,  1rem   + 1.5vw, 2rem);
  --fs-2xl: clamp(1.8rem,  1rem   + 2.5vw, 3rem);
  --fs-3xl: clamp(2rem,    1rem   + 3.5vw, 4rem);
  --fs-4xl: clamp(2.6rem,  1rem   + 6vw,   7rem);

  /* Fluid spacing */
  --sp-1: clamp(.5rem,   .4rem + .5vw,  .75rem);
  --sp-2: clamp(.75rem,  .6rem + .75vw, 1rem);
  --sp-3: clamp(1rem,    .75rem + 1vw,  1.5rem);
  --sp-4: clamp(1.5rem,  1rem   + 1.5vw,2.5rem);
  --sp-5: clamp(2rem,    1rem   + 3vw,  4rem);
  --sp-6: clamp(2.5rem,  1.5rem + 4vw,  6rem);

  /* Misc */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t:    .3s var(--ease);
  --t-sl: .55s var(--ease);
  --nav-h: 60px;
}

/* ─────────────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.7;
  background: var(--clr-bg);
  color: var(--clr-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─────────────────────────────────────────────────────────
   LAYOUT HELPERS
───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  padding-inline: var(--sp-3);
  margin-inline: auto;
}

.section { padding-block: var(--sp-6); }

/* ─────────────────────────────────────────────────────────
   TYPOGRAPHY HELPERS
───────────────────────────────────────────────────────── */
.section__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: var(--sp-2);
}

.section__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-3xl);
  font-weight: 300;
  color: var(--clr-white);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.section__heading em { font-style: italic; color: var(--clr-gold-light); }

/* ─────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: .875em 1.75em;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  min-height: 48px;          /* ≥44px touch target */
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 3px; }

.btn--primary {
  background: var(--clr-gold);
  color: var(--clr-bg);
  border-color: var(--clr-gold);
}
.btn--primary:hover {
  background: var(--clr-gold-light);
  border-color: var(--clr-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,175,100,.25);
}

.btn--outline {
  background: transparent;
  color: var(--clr-gold);
  border-color: var(--clr-gold-dim);
}
.btn--outline:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold-light);
  transform: translateY(-2px);
}

.btn--full { width: 100%; }

/* ═══════════════════════════════════════════════════════
   NAV  — mobile-first (burger by default)
═══════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  /* Smooth all transitions together */
  transition:
    background    .4s var(--ease),
    border-color  .4s var(--ease),
    backdrop-filter .4s var(--ease),
    height        .4s var(--ease);
}

/* ── AT TOP: fully transparent ── */
.site-header:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}

/* ── SCROLLED: frosted glass bar, tighter height ── */
.site-header.scrolled {
  background: rgba(13,11,9,.96);
  border-bottom-color: var(--clr-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 24px rgba(0,0,0,.4);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  padding-inline: var(--sp-3);
  margin-inline: auto;
}

/* ── LOGO — always visible ── */
.nav__logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 3vw, 1.375rem);
  font-weight: 400;
  color: var(--clr-white);
  transition: color var(--t), opacity var(--t);
  z-index: 160;
}
.nav__logo:hover { color: var(--clr-gold-light); }
.nav__logo em { font-style: italic; color: var(--clr-gold); }
.nav__logo-mark { color: var(--clr-gold); font-size: .75em; }

/* ── BURGER — mobile only ── */
.nav__burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  z-index: 160;
  flex-shrink: 0;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--clr-gold);
  transform-origin: center;
  transition: transform var(--t), opacity var(--t);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── NAV LINKS — drawer on mobile ── */
.nav__links {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 82vw);
  background: var(--clr-surface);
  border-left: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  transform: translateX(105%);
  transition: transform var(--t);
  z-index: 150;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav__links.is-open { transform: translateX(0); }

.nav__links a {
  font-size: var(--fs-lg);
  color: var(--clr-text);
  letter-spacing: .04em;
  min-height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  transition: color var(--t);
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--clr-gold);
  transition: width var(--t);
}
.nav__links a:hover,
.nav__links a.active { color: var(--clr-gold-light); }
.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }

.nav__cta {
  padding: .6em 1.4em !important;
  border: 1px solid var(--clr-gold-dim) !important;
  border-radius: var(--r-sm) !important;
  color: var(--clr-gold) !important;
}
.nav__cta:hover, .nav__cta:focus-visible {
  background: var(--clr-gold) !important;
  color: var(--clr-bg) !important;
  border-color: var(--clr-gold) !important;
}
.nav__cta::after { display: none !important; }

/* ══════════════════════════════════════════════
   DESKTOP NAV ≥ 768px
   Links VISIBLE at top, HIDDEN when scrolled
   Only logo + "Book Now" button stays visible
══════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --nav-h: 72px; }

  .nav__burger { display: none; }

  /* Reset drawer to inline row */
  .nav__links {
    position: static;
    width: auto;
    background: transparent;
    border: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-4);
    padding: 0;
    transform: none;
    overflow: visible;
    /* Fade transition for hide/show on scroll */
    transition:
      opacity   .35s var(--ease),
      transform .35s var(--ease),
      visibility .35s var(--ease);
  }
  .nav__links a { font-size: var(--fs-sm); }

  /* ── AT TOP: all links fully visible ── */
  .site-header:not(.scrolled) .nav__links {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  /* ── SCROLLED: regular links fade out, slide up slightly ── */
  .site-header.scrolled .nav__links {
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
  }

  /* ── SCROLLED: keep ONLY the Book Now CTA visible ── */
  .site-header.scrolled .nav__links .nav__cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .35s var(--ease) .1s,
                background var(--t), color var(--t), border-color var(--t);
  }

  /* When scrolled, Book Now stands alone — give it extra polish */
  .site-header.scrolled .nav__cta {
    background: transparent;
    border-color: var(--clr-gold-dim) !important;
    color: var(--clr-gold) !important;
  }
  .site-header.scrolled .nav__cta:hover {
    background: var(--clr-gold) !important;
    color: var(--clr-bg) !important;
    border-color: var(--clr-gold) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   HERO  — mobile-first
═══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + var(--sp-5)) var(--sp-3) var(--sp-5);
}

/* animated grid bg */
.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,175,100,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,100,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  will-change: transform;
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
  to { transform: translateY(60px); }
}

/* radial glow */
.hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(700px, 140vw);
  height: min(700px, 140vw);
  background: radial-gradient(circle, rgba(212,175,100,.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
}

.hero__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: var(--sp-3);
}

.hero__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-4xl);
  font-weight: 300;
  color: var(--clr-white);
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.hero__heading em {
  font-style: italic;
  color: var(--clr-gold-light);
  display: block;
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--clr-text);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}

/* CTA buttons — stacked on mobile, row on tablet+ */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.hero__actions .btn { width: 100%; max-width: 300px; }

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  .hero__actions .btn { width: auto; }
}

/* scroll hint */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--clr-muted);
  will-change: transform;
  animation: scrollBob 2.2s var(--ease) infinite;
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--clr-gold-dim), transparent);
}
@keyframes scrollBob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* hide scroll hint on very small heights */
@media (max-height: 600px) {
  .hero__scroll-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════════ */
.trust {
  padding-block: var(--sp-5);
  border-block: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-5);
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 80px;
}
.trust__num {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--clr-gold);
  line-height: 1;
}
.trust__label {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  line-height: 1.4;
}
.trust__divider {
  color: var(--clr-gold-dim);
  font-size: 1.1rem;
  /* hide on small screens — looks bad when wrapped */
  display: none;
}
@media (min-width: 640px) {
  .trust__divider { display: block; }
}

/* ═══════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════ */
.about {
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-surface) 100%);
}

/* Single column on mobile, two columns on desktop */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 960px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-6);
  }
}

.about__text p { margin-bottom: var(--sp-3); }
.about__text strong { color: var(--clr-cream); }

/* Venues — 2 col on mobile, 2 col on all (compact enough) */
.about__venues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
@media (max-width: 360px) {
  .about__venues { grid-template-columns: 1fr; }
}

.venue-card {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--clr-cream);
  transition: border-color var(--t), background var(--t);
  min-height: 48px;
}
.venue-card:hover {
  border-color: var(--clr-gold-dim);
  background: rgba(212,175,100,.04);
}
.venue-card__icon { font-size: 1em; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   CURRICULUM
═══════════════════════════════════════════════════════ */
.curriculum {
  background: var(--clr-surface);
  text-align: center;
}

/* 1 col → 2 col → 4 col */
.curriculum__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 560px) {
  .curriculum__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .curriculum__grid { grid-template-columns: repeat(4, 1fr); }
}

.curriculum__card {
  padding: var(--sp-5) var(--sp-4);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  text-align: left;
  position: relative;
  overflow: hidden;
  contain: layout style;
  transition: border-color var(--t), transform var(--t);
}
.curriculum__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
.curriculum__card:hover { border-color: var(--clr-gold-dim); transform: translateY(-4px); }
.curriculum__card:hover::before { opacity: 1; }

.curriculum__card-num {
  font-family: var(--ff-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(212,175,100,.07);
  line-height: 1;
  position: absolute;
  top: var(--sp-2); right: var(--sp-3);
  pointer-events: none;
}
.curriculum__card h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--clr-white);
  margin-bottom: var(--sp-2);
}
.curriculum__card p { font-size: var(--fs-sm); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════════════ */
.gallery { background: var(--clr-bg); }
.gallery .container { text-align: center; }
.gallery__intro {
  color: var(--clr-muted);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-5);
}

/*
  ── GALLERY GRID ──
  Every cell is a PERFECT SQUARE using aspect-ratio: 1/1.
  The row height is derived from the column width — so all 9
  images are identical in size on every screen, every device.
  object-fit:cover + object-position:center centres the latte
  art in frame and crops only the dead edges.

  Columns:
    mobile  (< 560px) : 2 columns
    tablet  (≥ 560px) : 3 columns
    desktop (≥ 960px) : 3 columns (larger cells)
*/
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 col — mobile default */
  gap: clamp(5px, 1.2vw, 10px);
  padding-inline: var(--sp-3);
}

@media (min-width: 560px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Item — square via aspect-ratio, no fixed heights needed */
.gallery__item {
  aspect-ratio: 1 / 1;              /* ← the magic: always a perfect square */
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
  cursor: pointer;
  position: relative;
  /* contain improves paint performance in long grids */
  contain: layout paint;
}

/* gold shimmer on hover */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(212,175,100,.10);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.gallery__item:hover::after,
.gallery__item:focus-within::after { opacity: 1; }

/* Image fills the square perfectly */
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
    center center = crops equally from all sides.
    This keeps the latte art (centre of the cup) always visible.
    Change to "center top" if your shots are taken from slightly
    above and you want to show more of the top of the cup.
  */
  object-position: center center;
  will-change: transform;
  transition: transform var(--t-sl);
}
.gallery__item:hover img { transform: scale(1.07); }

/* ═══════════════════════════════════════════════════════
   PRICING
═══════════════════════════════════════════════════════ */
.pricing { background: var(--clr-surface); text-align: center; }

/* 1 col → 3 col */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  align-items: start;
}
@media (min-width: 640px) {
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .pricing__grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing__card {
  padding: var(--sp-5) var(--sp-4);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  text-align: left;
  position: relative;
  contain: layout style;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.pricing__card:hover:not(.pricing__card--featured) {
  border-color: var(--clr-gold-dim);
  transform: translateY(-4px);
}
.pricing__card--featured {
  border-color: var(--clr-gold-dim);
  background: linear-gradient(135deg, var(--clr-bg) 0%, rgba(212,175,100,.03) 100%);
  box-shadow: 0 0 40px rgba(212,175,100,.08);
}

/* On desktop only, featured card scales slightly */
@media (min-width: 900px) {
  .pricing__card--featured { transform: scale(1.02); }
  .pricing__card--featured:hover { transform: scale(1.02) translateY(-2px); }
}

.pricing__badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--clr-gold);
  color: var(--clr-bg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.pricing__tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: var(--sp-2);
}
.pricing__price {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  font-weight: 300;
  color: var(--clr-white);
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.pricing__currency { font-size: .55em; vertical-align: super; color: var(--clr-gold); }
.pricing__unit     { font-size: .4em; color: var(--clr-muted); }

.pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}
.pricing__features li {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  padding-left: var(--sp-3);
  position: relative;
}
.pricing__features li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--clr-gold-dim);
}

/* ═══════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════ */
.contact { background: var(--clr-bg); }

/* 1 col on mobile, 2 col on tablet+ */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

.contact__intro p { margin-bottom: var(--sp-3); }

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.contact__details p {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin: 0;
}

/* Form */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
}
@media (min-width: 480px) {
  .contact__form { padding: var(--sp-5); }
}

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

.form__group label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.form__group label span { color: var(--clr-gold); }

.form__group input,
.form__group select,
.form__group textarea {
  width: 100%;
  padding: .875rem var(--sp-2);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  color: var(--clr-white);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);  /* prevents iOS zoom-in on focus */
  min-height: 48px;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form__group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af64' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.form__group input::placeholder,
.form__group textarea::placeholder { color: var(--clr-muted); }
.form__group select option { background: var(--clr-surface); }

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  border-color: var(--clr-gold-dim);
  box-shadow: 0 0 0 3px rgba(212,175,100,.1);
}
.form__group input.error,
.form__group select.error { border-color: var(--clr-error); }

.form__error {
  font-size: var(--fs-xs);
  color: var(--clr-error);
  min-height: 1.2em;
}
.form__note {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
═══════════════════════════════════════════════════════ */
.whatsapp-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--clr-wa);
  color: #fff;
  border-radius: 50px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 6px 24px rgba(37,211,102,.4);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  text-decoration: none;
  /* icon only on mobile — label revealed at 560px+ */
}
.whatsapp-fab svg { width: 26px; height: 26px; flex-shrink: 0; }
.whatsapp-fab__label { display: none; }   /* hidden on smallest screens */
.whatsapp-fab:hover {
  background: #1ebe5d;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 32px rgba(37,211,102,.5);
}
.whatsapp-fab:focus-visible {
  outline: 2px solid var(--clr-wa);
  outline-offset: 4px;
}

/* icon + circle on small screens */
@media (max-width: 559px) {
  .whatsapp-fab {
    padding: 14px;
    border-radius: 50%;
    bottom: 16px;
    right: 16px;
  }
}
/* show label on wider screens */
@media (min-width: 560px) {
  .whatsapp-fab__label { display: inline; }
  .whatsapp-fab { bottom: 28px; right: 28px; }
}

/* Inline WhatsApp link */
.whatsapp-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-wa);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-top: 4px;
  transition: color var(--t);
  min-height: 44px;
}
.whatsapp-inline:hover { color: #1ebe5d; }
.whatsapp-inline svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.footer__logo {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: color var(--t);
}
.footer__logo:hover { color: var(--clr-gold-light); }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.footer__nav a {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  transition: color var(--t);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer__nav a:hover { color: var(--clr-gold-light); }
.footer__copy {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
═══════════════════════════════════════════════════════ */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  .65s var(--ease) var(--delay, 0s),
    transform .65s var(--ease) var(--delay, 0s);
}
[data-animate].is-visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox.is-open { opacity: 1; pointer-events: all; }

.lightbox__img {
  max-width: min(740px, 100%);
  max-height: 90svh;
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  will-change: transform;
  transform: scale(.9);
  transition: transform var(--t);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__close {
  position: fixed;
  top: var(--sp-3); right: var(--sp-3);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  color: var(--clr-gold);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.lightbox__close:hover { background: var(--clr-gold); color: var(--clr-bg); }
.lightbox__close:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-animate] { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════ */
@media print {
  .site-header, .hero__scroll-hint, .lightbox,
  .nav__burger, .hero__bg-grid,
  .whatsapp-fab { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: ' (' attr(href) ')'; }
}