/* ==========================================================================
   Gardens Smoke Shop — Liquid Glass premium dark
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:           #08080a;
  --surface:      #0d0e12;
  --surface-2:    #14161d;
  --surface-3:    #1c1f28;

  /* Text */
  --text:         #f5f6f8;
  --text-2:       #a8acb6;
  --text-3:       #6b6f7b;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.08);
  --border-2:     rgba(255, 255, 255, 0.14);
  --border-3:     rgba(255, 255, 255, 0.22);

  /* Accents */
  --accent:       #dc2626;
  --accent-2:     #ef4444;
  --accent-deep:  #991b1b;
  --accent-glow:  rgba(220, 38, 38, 0.5);
  --gold:         #f5b942;

  /* Effects */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    32px;
  --shadow-1:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-glow:  0 0 60px -10px var(--accent-glow);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --nav-h:        72px;
  --container:    1240px;
  --gutter:       clamp(20px, 4vw, 48px);

  /* Motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:       180ms;
  --t-med:        320ms;
  --t-slow:       560ms;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Grain layer over everything */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   Reusable
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 16px 0 20px;
  color: var(--text);
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--text-2);
  position: relative;
  white-space: nowrap;
}
.section-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.08em;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.6;
}

.section-lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 0 32px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 12px 20px;
  border-radius: 999px;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              color var(--t-fast) var(--ease);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.btn--lg { padding: 16px 28px; font-size: 15px; }
.btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn--primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 8px 24px -8px var(--accent-glow),
              0 1px 3px rgba(0,0,0,0.4);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset,
              0 16px 36px -8px var(--accent-glow),
              0 2px 6px rgba(0,0,0,0.4);
}

.btn--ghost {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-2);
  color: var(--text);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-3);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--border-3);
  color: var(--text);
}
.btn--outline:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-2px);
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Live dot */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.dot--live {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94, 0.6);
  animation: live 2s var(--ease) infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94, 0); }
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              backdrop-filter var(--t-med) var(--ease);
}
.nav.is-scrolled {
  background: rgba(8, 8, 10, 0.7);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.nav__brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  /* Subtle warm halo around the logo so it pops off the dark nav */
  box-shadow: 0 0 18px -4px var(--accent-glow);
  flex-shrink: 0;
}
.nav__brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.nav__brand-mark svg { width: 22px; height: 22px; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nav__brand-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: 8px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255,255,255,0.04); }

.nav__cta { padding: 10px 16px; font-size: 13px; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.02);
  margin-left: auto;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  margin: 0 auto;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    padding: 16px var(--gutter);
    background: rgba(8, 8, 10, 0.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links a {
    padding: 16px;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ==========================================================================
   Hero — Dithering card
   ========================================================================== */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 48px;
  border: 1px solid var(--border-2);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(220,38,38,0.05), transparent 70%),
    linear-gradient(180deg, #0e1015 0%, #07080b 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 60px 120px -40px rgba(0,0,0,0.8),
    0 0 0 1px rgba(0,0,0,0.4);
  min-height: clamp(560px, 78vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 64px);
  isolation: isolate;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
@media (max-width: 720px) {
  .cta-card { border-radius: 32px; }
}
.cta-card:hover { border-color: var(--border-3); }

.cta-card__shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
}
.cta-card__shader canvas { display: block; width: 100%; height: 100%; }

/* Vignette so the dithering fades at the corners */
.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(7,8,11,0.7) 100%);
}

.cta-card__content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Live status badge with pulsing dot */
/* Big hero logo — first thing the visitor sees.
   The PNG itself has a circular alpha mask baked in, so we DON'T need
   border-radius/overflow:hidden on the container — which avoids the iOS
   Safari bug where overflow:hidden fails during transforms and shows the
   square image corners. */
.hero-logo {
  width: clamp(140px, 22vw, 220px);
  aspect-ratio: 1;
  margin: 0 auto clamp(28px, 4vw, 40px);
  display: block;
  /* Warm rasta-tinted glow around the seal — drop-shadow honors the PNG's
     transparent corners so the halo follows the actual circle shape. */
  filter:
    drop-shadow(0 0 24px rgba(245, 185, 66, 0.50))
    drop-shadow(0 0 60px rgba(220, 38, 38, 0.35));
  animation: hero-logo-float 6s ease-in-out infinite alternate;
}
.hero-logo img {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes hero-logo-float {
  0%   { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-6px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,0.18);
  background: rgba(220,38,38,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.hero-badge__pulse {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}
.hero-badge__pulse-ping,
.hero-badge__pulse-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-2);
}
.hero-badge__pulse-ping {
  animation: hero-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}
@keyframes hero-ping {
  0%   { transform: scale(1); opacity: 0.75; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

.cta-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 clamp(24px, 3.5vw, 36px);
}
.cta-card__title-soft {
  color: rgba(245, 246, 248, 0.55);
  font-style: italic;
  font-weight: 400;
}

.cta-card__lede {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 0 clamp(36px, 5vw, 56px);
}
.cta-card__lede strong { color: var(--text); font-weight: 600; }

.cta-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 40px;
  border-radius: 999px;
  background: var(--text);
  color: #07080b;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-fast) var(--ease);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
}
.cta-card__btn:hover {
  transform: scale(1.04);
  background: #fff;
  box-shadow: 0 16px 40px -10px rgba(220,38,38,0.4),
              0 0 0 4px rgba(220,38,38,0.18);
}
.cta-card__btn:active { transform: scale(0.97); }
.cta-card__btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}
.cta-card__btn svg {
  transition: transform var(--t-fast) var(--ease);
}
.cta-card__btn:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Stats Strip
   ========================================================================== */

.strip {
  position: relative;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  z-index: 2;
}
.strip__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.strip__item { display: flex; flex-direction: column; gap: 4px; }
.strip__num {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.strip__lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.strip__sep { width: 1px; height: 36px; background: var(--border); }
@media (max-width: 720px) {
  .strip__sep { display: none; }
  .strip__inner { justify-content: flex-start; gap: 32px 40px; }
}

/* ==========================================================================
   Vape feature (hyper-realistic with smoke)
   ========================================================================== */

.vape {
  position: relative;
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  background: #06070a;
}
.vape__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(220,38,38,0.18), transparent 60%),
    radial-gradient(ellipse 40% 60% at 30% 80%, rgba(245,185,66,0.08), transparent 60%),
    linear-gradient(180deg, transparent, rgba(8,8,10,0.5));
}

.vape__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 920px) {
  .vape__inner { grid-template-columns: 1fr; }
}

.vape__copy { max-width: 560px; }
.vape__list {
  margin: 32px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vape__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  color: var(--text-2);
}
.vape__list li svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--accent-2);
}

/* Stage: image + halo + smoke + shadow */
.vape__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  isolation: isolate;
}
@media (max-width: 920px) {
  .vape__stage { aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; }
}

.vape__halo {
  position: absolute;
  inset: 4% 4% 4% 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(220,38,38,0.45), transparent 55%),
    radial-gradient(circle at 50% 30%, rgba(245,185,66,0.18), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(168,85,247,0.22), transparent 60%);
  filter: blur(50px);
  z-index: -1;
  animation: halo 9s ease-in-out infinite alternate;
}
@keyframes halo {
  0%   { transform: scale(0.92); opacity: 0.8; }
  100% { transform: scale(1.06); opacity: 1; }
}

.vape__photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-2);
  background:
    radial-gradient(ellipse at 50% 70%, #1a1c24, #0a0b0f 80%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 100px -20px rgba(0,0,0,0.85),
    0 0 90px -20px var(--accent-glow);
  animation: float 7s ease-in-out infinite alternate;
}
@keyframes float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
.vape__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.15) brightness(0.95);
}
.vape__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(8,8,10,0.55) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(8,8,10,0.35) 100%);
  pointer-events: none;
}

/* Slow diagonal sheen sweeping across the device */
.vape__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,0.08) 46%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.08) 54%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 220%;
  background-position: -120% -120%;
  mix-blend-mode: overlay;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen {
  0%, 18%   { background-position: -120% -120%; opacity: 0; }
  22%       { opacity: 0.9; }
  60%       { background-position: 120% 120%; opacity: 0.9; }
  64%, 100% { background-position: 120% 120%; opacity: 0; }
}

.vape__photo--fallback::before {
  content: "vape product";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.vape__shadow {
  position: absolute;
  bottom: -2%;
  left: 12%;
  right: 12%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%);
  filter: blur(14px);
  z-index: -2;
  animation: float-shadow 7s ease-in-out infinite alternate;
}
@keyframes float-shadow {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(0.85); opacity: 0.6; }
}

/* ==========================================================================
   Categories
   ========================================================================== */

/* ==========================================================================
   Video reel — sits between the Vape Lounge and the Categories grid.
   Copy on the left, player on the right. Video plays at its NATURAL
   aspect ratio so nothing (the floor, the ceiling) gets cropped.
   ========================================================================== */
.reel {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  background: #06070a;
}
.reel__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(220,38,38,0.14), transparent 60%),
    radial-gradient(ellipse 50% 70% at 90% 100%, rgba(245,185,66,0.10), transparent 60%),
    linear-gradient(180deg, rgba(8,8,10,0.4), transparent);
}
.reel__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 920px) {
  .reel__inner { grid-template-columns: 1fr; }
}
.reel__copy { max-width: 480px; }
.reel__player {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 40px 100px -30px rgba(0,0,0,0.85),
    0 0 80px -20px var(--accent-glow);
}
.reel__video {
  display: block;
  width: 100%;
  height: auto;
  /* Natural aspect — whole frame visible, no cropping. */
}
/* Soft animated halo behind the player so it feels alive even if the video pauses */
.reel__glow {
  position: absolute;
  inset: -30px;
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 30px);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(220,38,38,0.30), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(245,185,66,0.22), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  animation: reel-halo 9s ease-in-out infinite alternate;
}
/* Soft animated halo behind the player so it feels alive even if the video pauses */
.reel__glow {
  position: absolute;
  inset: -60px;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(220,38,38,0.28), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(245,185,66,0.20), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  animation: reel-halo 9s ease-in-out infinite alternate;
}
@keyframes reel-halo {
  0%   { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}

.cats {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.cats__head { max-width: 720px; margin-bottom: 56px; }
.cats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .cats__grid { grid-template-columns: 1fr; } }

.cat {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              background var(--t-med) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.cat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(220,38,38,0.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: -1;
}
.cat:hover {
  transform: translateY(-6px);
  border-color: var(--border-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.cat:hover::before { opacity: 1; }

.cat__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(220,38,38,0.15), transparent 70%),
    linear-gradient(135deg, #14161d, #0a0b10);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.cat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.04) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 1.2s var(--ease);
}
.cat:hover .cat__media::after { transform: translateX(100%); }
.cat__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--accent-2);
  filter: drop-shadow(0 0 16px var(--accent-glow));
}
.cat__icon svg { width: 100%; height: 100%; }

.cat__body h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.cat__body p {
  font-size: 15px;
  color: var(--text-2);
  margin: 0 0 20px;
  line-height: 1.6;
}
.cat__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  border: 1px solid rgba(245,185,66,0.25);
  border-radius: 999px;
  background: rgba(245,185,66,0.05);
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.gallery__head {
  max-width: 720px;
  margin-bottom: 48px;
}

/* CSS columns = simple masonry without JS */
/* "See all" CTA below the preview gallery on index.html */
.gallery__cta {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.gallery__see-all {
  padding: 18px 36px;
}
.gallery__see-all svg {
  transition: transform var(--t-fast) var(--ease);
}
.gallery__see-all:hover svg { transform: translateX(4px); }

/* Standalone gallery page (gallery.html) — minimal layout, no main nav */
body.page-gallery {
  background: var(--bg);
}
.page-gallery__nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.85);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.page-gallery__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.page-gallery__back:hover {
  color: var(--text);
  border-color: var(--border-3);
  background: rgba(255,255,255,0.05);
}
.page-gallery__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.page-gallery__title h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}
.page-gallery__title span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 540px) {
  .page-gallery__title span { display: none; }
}
.page-gallery__main {
  padding: 0;
}
.page-gallery__main .gallery {
  padding: clamp(32px, 4vw, 64px) var(--gutter);
}

/* Flexbox masonry — items distributed round-robin into 4 column divs.
   Each column is a plain flex container, so children's box-shadows
   (the rasta hover glow) render freely outside their bounds — unlike
   CSS column-count which clips at column boundaries. */
.gallery__grid {
  display: flex;
  gap: 16px;
}
.gallery__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 720px) {
  .gallery__grid { gap: 10px; }
  .gallery__col { gap: 10px; }
}

.gallery__item {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* overflow:hidden moved to .gallery__item-inner so the glow can render outside */
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.gallery__item-inner {
  display: block;
  overflow: hidden;
  border-radius: inherit;
  position: relative;
}
@media (max-width: 720px) { .gallery__item { margin-bottom: 12px; } }
.gallery__item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.4);
  /* Now that overflow:hidden is on the inner wrapper, box-shadow on the
     outer item renders freely outside its bounds. */
  animation: rasta-glow 3s ease-in-out infinite;
  z-index: 5;
}
@keyframes rasta-glow {
  0%, 100% {
    box-shadow:
      0 18px 40px -16px rgba(0,0,0,0.55),
      0 0 22px 2px rgba(45,164,78, 0.55),
      0 0 60px 8px rgba(241,184,66, 0.35),
      0 0 110px 14px rgba(214,48,49, 0.22);
  }
  33% {
    box-shadow:
      0 18px 40px -16px rgba(0,0,0,0.55),
      0 0 22px 2px rgba(241,184,66, 0.55),
      0 0 60px 8px rgba(214,48,49, 0.35),
      0 0 110px 14px rgba(45,164,78, 0.22);
  }
  66% {
    box-shadow:
      0 18px 40px -16px rgba(0,0,0,0.55),
      0 0 22px 2px rgba(214,48,49, 0.55),
      0 0 60px 8px rgba(45,164,78, 0.35),
      0 0 110px 14px rgba(241,184,66, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover {
    animation: none;
    box-shadow:
      0 18px 40px -16px rgba(0,0,0,0.55),
      0 0 22px 2px rgba(241,184,66, 0.55),
      0 0 60px 8px rgba(45,164,78, 0.3),
      0 0 110px 14px rgba(214,48,49, 0.2);
  }
}
.gallery__item:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--t-slow) var(--ease);
  /* No color tweaks — pro camera shots stay as the photographer intended */
}
.gallery__item:hover img {
  transform: scale(1.04);
}

.gallery__cap {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8,8,10,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 5, 8, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  /* Comfortable middle ground — big enough to read clearly, not viewport-eating */
  width: min(78vw, 1000px);
  display: block;
  text-align: center;
}
.lightbox__figure img {
  display: block;
  width: 100%;
  height: auto;
  /* Cap the height so portrait images don't swallow the screen.
     Landscape images stay width-led and look great. */
  max-height: 72vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--surface);
  /* image-rendering removed — pro 6000×4000 sources don't need scaling hints */
  /* Rasta-tinted halo around the open photo */
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.9),
    0 0 50px 3px rgba(45, 164, 78, 0.45),
    0 0 90px 8px rgba(241, 184, 66, 0.35),
    0 0 130px 14px rgba(214, 48, 49, 0.28);
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--t-med) var(--ease-spring), opacity var(--t-med) var(--ease);
}
.lightbox__figure figcaption {
  margin-top: 18px;
}
.lightbox.is-open .lightbox__figure img { transform: scale(1); opacity: 1; }

.lightbox__figure figcaption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--border-3);
}
.lightbox__close:active,
.lightbox__nav:active { transform: scale(0.94); }

.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:active { transform: translateY(-50%) scale(0.94); }
.lightbox__nav--next:active { transform: translateY(-50%) scale(0.94); }
@media (max-width: 540px) {
  .lightbox__nav { width: 40px; height: 40px; }
}

/* Phones: arrows were hugging the photo edges. Move them to a centered
   pair pinned at the bottom of the screen, clear of the image. */
@media (max-width: 768px) {
  .lightbox__nav {
    top: auto;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .lightbox__nav--prev {
    left: 50%;
    right: auto;
    transform: translateX(calc(-100% - 14px));
  }
  .lightbox__nav--next {
    left: 50%;
    right: auto;
    transform: translateX(14px);
  }
  .lightbox__nav--prev:active { transform: translateX(calc(-100% - 14px)) scale(0.94); }
  .lightbox__nav--next:active { transform: translateX(14px) scale(0.94); }
}

/* ==========================================================================
   Why Gardens
   ========================================================================== */

.why {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.why::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}

.why__head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.why__head .eyebrow { margin-bottom: 16px; }
.why__head .section-title { text-align: center; }
.why__head .section-lede { margin: 0 auto; text-align: center; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 720px) { .why__grid { grid-template-columns: 1fr; } }

.feat {
  background: var(--surface);
  padding: 40px;
  position: relative;
  transition: background var(--t-med) var(--ease);
}
.feat:hover { background: var(--surface-2); }
.feat__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-bottom: 20px;
}
.feat h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.feat p {
  font-size: 15px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.65;
}

/* ==========================================================================
   Visit
   ========================================================================== */

.visit {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: linear-gradient(180deg, var(--bg), #050507);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.visit__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 920px) { .visit__inner { grid-template-columns: 1fr; } }

.visit__copy { max-width: 560px; }
.visit__rows {
  margin: 32px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visit__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.visit__row:last-child { border-bottom: 1px solid var(--border); }
.visit__lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  align-self: center;
}
.visit__row a:hover { color: var(--accent-2); }

.visit__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.visit__map {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
}
.visit__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85);
}

/* ==========================================================================
   Finale
   ========================================================================== */

.finale {
  padding: clamp(100px, 14vw, 200px) var(--gutter);
  position: relative;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(220,38,38,0.25), transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(245,185,66,0.1), transparent 60%);
}
.finale::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 70%);
}
.finale__inner {
  max-width: 880px;
  margin: 0 auto;
}
.finale h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 40px;
}
.finale h2 em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(110deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.finale__actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: #050507;
  border-top: 1px solid var(--border);
  padding: 64px var(--gutter) 28px;
}
.foot__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .foot__inner { grid-template-columns: 1fr; } }

.foot__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.foot__brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.foot__brand span { font-size: 13px; color: var(--text-3); display: block; }
.foot__site {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold, #f5b942);
  text-decoration: none;
  transition: color var(--transition, 0.3s ease), opacity var(--transition, 0.3s ease);
}
.foot__site:hover,
.foot__site:focus-visible { color: #ffd47a; opacity: 0.95; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 540px) { .foot__cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
.foot__cols h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
}
.foot__cols a, .foot__cols span {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease);
}
.foot__cols a:hover { color: var(--text); }

.foot__base {
  max-width: var(--container);
  margin: 28px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: 12px;
}

/* Hide nav links text on smaller desktop, keep CTA */
@media (max-width: 1100px) and (min-width: 881px) {
  .nav__links a { padding: 10px; font-size: 13px; }
}