/* ============================================
   AIHub DMV — "Cozy Garden" Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* --- Design Tokens --- */
:root {
  --sage: #A3B18A;
  --sage-light: #DAD7CD;
  --earth: #588157;
  --soil: #3A5A40;
  --linen: #FEFAE0;
  --cream: #FFFDF5;
  --terracotta: #BC6C25;
  --terracotta-dark: #a05a1e;
  --bark: #606C38;
  --bark-light: #7a8a48;
  --warm-gray: #5c5347;
  --shadow-soft: 0 4px 20px rgba(60, 60, 40, 0.08);
  --shadow-lift: 0 8px 32px rgba(60, 60, 40, 0.14);
  --shadow-polaroid: 3px 5px 18px rgba(60, 60, 40, 0.18);
  --radius-soft: 14px;
  --radius-card: 18px;
  --radius-pill: 50px;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--linen);
  color: var(--warm-gray);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Elegant botanical stencil — roses & peonies */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500' fill='none'%3E%3Cg opacity='0.05' stroke='%23606C38' stroke-width='1' stroke-linecap='round' fill='none'%3E%3C!-- Rose 1 (top-left) --%3E%3Cpath d='M90 110 C90 90,110 75,105 95 C100 75,120 70,112 92 C115 72,130 75,118 95 C125 80,138 85,122 100 C135 90,140 100,125 105 C138 100,138 112,122 110 C132 115,128 125,118 115 C122 125,112 128,110 118 C108 128,98 125,102 115 C92 122,88 115,98 110 C85 112,82 102,95 105 C80 98,82 88,95 100 C78 90,85 80,95 95' /%3E%3Ccircle cx='108' cy='102' r='4' /%3E%3Cpath d='M105 118 C103 140,100 165,102 180' stroke-width='0.9'/%3E%3Cpath d='M102 145 C92 138,82 142,78 135' /%3E%3Cpath d='M100 160 C110 152,120 156,122 150' /%3E%3Cpath d='M78 135 C75 130,80 125,85 128 C80 122,82 118,88 120' /%3E%3C!-- Peony (center-right) --%3E%3Cpath d='M370 240 C365 220,380 205,385 225 C378 208,395 198,395 218 C390 200,408 200,402 220 C400 205,415 210,405 228 C412 215,422 225,408 235 C420 230,420 242,407 240 C418 248,412 258,400 248 C405 260,392 262,392 250 C388 262,378 258,382 248 C372 255,368 245,378 240 C365 248,362 238,372 235 C358 235,360 222,370 228' /%3E%3Ccircle cx='392' cy='232' r='5' /%3E%3Cpath d='M392 258 C390 278,388 310,392 340' stroke-width='0.9'/%3E%3Cpath d='M390 290 C378 282,368 288,362 280' /%3E%3Cpath d='M391 310 C402 302,412 308,416 300' /%3E%3Cpath d='M362 280 C358 275,362 268,368 272 C364 265,368 260,374 264' /%3E%3Cpath d='M416 300 C420 295,418 288,412 292 C418 285,414 280,408 284' /%3E%3C!-- Rose bud (bottom-left) --%3E%3Cpath d='M130 400 C128 388,138 380,140 392 C136 382,148 378,145 390 C144 380,152 382,148 394 C150 386,155 392,146 398' /%3E%3Cpath d='M138 398 C136 415,135 435,138 450' stroke-width='0.9'/%3E%3Cpath d='M132 395 C128 398,124 395,126 390' /%3E%3Cpath d='M146 395 C150 398,154 395,152 390' /%3E%3Cpath d='M136 425 C126 420,118 425,114 418' /%3E%3Cpath d='M114 418 C110 414,114 408,120 412' /%3E%3C!-- Peony 2 (bottom-right) --%3E%3Cpath d='M380 420 C375 405,388 395,390 412 C384 398,398 392,396 408 C393 395,405 398,400 414 C402 402,412 408,404 418 C412 412,414 422,404 422 C412 428,406 435,398 428 C400 438,390 436,392 426 C385 432,380 425,388 422 C378 425,375 418,382 416 C372 415,374 405,382 412' /%3E%3Ccircle cx='394' cy='415' r='4' /%3E%3C!-- Scattered leaves --%3E%3Cpath d='M250 60 C260 45,280 42,275 62 C270 42,258 45,250 60' /%3E%3Cpath d='M265 52 L262 68' stroke-width='0.7'/%3E%3Cpath d='M440 140 C448 125,465 120,462 140 C458 120,446 125,440 140' /%3E%3Cpath d='M452 130 L450 148' stroke-width='0.7'/%3E%3Cpath d='M50 260 C58 245,75 242,72 262 C68 242,56 248,50 260' /%3E%3Cpath d='M62 252 L60 270' stroke-width='0.7'/%3E%3Cpath d='M260 350 C268 335,285 330,282 350 C278 332,266 338,260 350' /%3E%3Cpath d='M272 340 L270 360' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 500px 500px;
}

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

a {
  color: var(--earth);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--terracotta);
}

/* --- Utility --- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  color: var(--bark);
  line-height: 1.25;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 1.08rem;
  color: var(--warm-gray);
  max-width: 580px;
  line-height: 1.7;
}

/* Scroll fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(254, 250, 224, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(163, 177, 138, 0.2);
  padding: 16px 0;
  transition: box-shadow var(--transition);
}

.navbar.scrolled {
  box-shadow: 0 2px 16px rgba(60, 60, 40, 0.08);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-brand .leaf {
  font-size: 1.4rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--warm-gray);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--earth);
  border-radius: 2px;
  transition: width var(--transition);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:hover {
  color: var(--bark);
}

.nav-links a.nav-active {
  color: var(--bark);
  font-weight: 600;
}

.nav-links a.nav-active::after {
  width: 100%;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bark);
  border-radius: 2px;
  transition: var(--transition);
}

/* ============================================
   HERO — The Welcome Gate
   ============================================ */
.hero {
  padding: 160px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(163, 177, 138, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(188, 108, 37, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(163, 177, 138, 0.18);
  border: 1px solid rgba(163, 177, 138, 0.3);
  color: var(--soil);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--bark);
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 .accent {
  color: var(--earth);
  font-style: italic;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--warm-gray);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}

.btn-primary {
  background: var(--earth);
  color: #fff;
  box-shadow: 0 4px 14px rgba(88, 129, 87, 0.3);
}

.btn-primary:hover {
  background: var(--soil);
  color: #fff;
  box-shadow: 0 6px 20px rgba(88, 129, 87, 0.4);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--earth);
  border: 2px solid var(--sage);
}

.btn-outline:hover {
  background: var(--sage);
  color: #fff;
  transform: translateY(-2px);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.harvest-form {
  display: flex;
  align-items: stretch;
  background: var(--cream);
  border: 2px solid var(--sage-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.harvest-form:focus-within {
  border-color: var(--earth);
  box-shadow: 0 0 0 3px rgba(88, 129, 87, 0.12);
}

.harvest-form input[type="email"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: transparent;
  color: var(--warm-gray);
  min-width: 0;
}

.harvest-form input[type="email"]::placeholder {
  color: var(--sage);
}

.harvest-form button {
  padding: 14px 24px;
  background: var(--earth);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.harvest-form button:hover {
  background: var(--soil);
}

.harvest-label {
  font-size: 0.82rem;
  color: var(--sage);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.harvest-success {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--earth);
  font-weight: 500;
  font-size: 0.95rem;
}

.harvest-success.show {
  display: flex;
}

/* ============================================
   HERO POLAROIDS — Static Side Stacks
   ============================================ */
.hero-content {
  position: relative;
  z-index: 2;
}

@keyframes polaroidIn {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(var(--hp-rot, 0deg));
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--hp-rot, 0deg));
  }
}

.hero-polaroid {
  position: absolute;
  background: #fff;
  padding: 6px 6px 24px;
  border-radius: 3px;
  box-shadow: 3px 5px 18px rgba(60, 60, 40, 0.15);
  pointer-events: auto;
  cursor: pointer;
  width: 130px;
  opacity: 0;
  animation: polaroidIn 0.6s ease forwards;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, z-index 0s;
}

.hero-polaroid img {
  width: 118px;
  height: 100px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.hero-polaroid-label {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.58rem;
  color: var(--warm-gray);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-polaroid:hover {
  transform: scale(1.25) rotate(0deg) !important;
  box-shadow: 0 12px 40px rgba(60, 60, 40, 0.28);
  z-index: 50 !important;
}

/* ---- Left side: outer stack ---- */
.hero-polaroid-l1 {
  --hp-rot: -12deg;
  top: 75px;
  left: 1%;
  z-index: 7;
  animation-delay: 0.1s;
}

.hero-polaroid-l2 {
  --hp-rot: 8deg;
  top: 160px;
  left: 3.5%;
  z-index: 5;
  animation-delay: 0.2s;
}

.hero-polaroid-l3 {
  --hp-rot: -5deg;
  top: 275px;
  left: 0.5%;
  z-index: 3;
  animation-delay: 0.3s;
}

.hero-polaroid-l4 {
  --hp-rot: 10deg;
  top: 380px;
  left: 4%;
  z-index: 1;
  animation-delay: 0.4s;
}

/* ---- Left side: inner stack ---- */
.hero-polaroid-l5 {
  --hp-rot: 6deg;
  top: 100px;
  left: 8%;
  z-index: 6;
  animation-delay: 0.15s;
}

.hero-polaroid-l6 {
  --hp-rot: -9deg;
  top: 210px;
  left: 10%;
  z-index: 4;
  animation-delay: 0.35s;
}

.hero-polaroid-l7 {
  --hp-rot: 11deg;
  top: 330px;
  left: 8.5%;
  z-index: 2;
  animation-delay: 0.55s;
}

/* ---- Right side: outer stack ---- */
.hero-polaroid-r1 {
  --hp-rot: 10deg;
  top: 80px;
  right: 0.5%;
  z-index: 7;
  animation-delay: 0.12s;
}

.hero-polaroid-r2 {
  --hp-rot: -7deg;
  top: 170px;
  right: 4%;
  z-index: 5;
  animation-delay: 0.22s;
}

.hero-polaroid-r3 {
  --hp-rot: 12deg;
  top: 285px;
  right: 1%;
  z-index: 3;
  animation-delay: 0.32s;
}

.hero-polaroid-r4 {
  --hp-rot: -8deg;
  top: 390px;
  right: 3.5%;
  z-index: 1;
  animation-delay: 0.42s;
}

/* ---- Right side: inner stack ---- */
.hero-polaroid-r5 {
  --hp-rot: -6deg;
  top: 110px;
  right: 9%;
  z-index: 6;
  animation-delay: 0.18s;
}

.hero-polaroid-r6 {
  --hp-rot: 9deg;
  top: 220px;
  right: 10.5%;
  z-index: 4;
  animation-delay: 0.38s;
}

.hero-polaroid-r7 {
  --hp-rot: -11deg;
  top: 340px;
  right: 8.5%;
  z-index: 2;
  animation-delay: 0.58s;
}

@media (max-width: 1100px) {
  .hero-polaroid {
    display: none;
  }
}

/* ============================================
   UPCOMING HARVEST — Featured Events
   ============================================ */
.events {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--linen) 0%, rgba(218, 215, 205, 0.25) 100%);
}

.events-header {
  text-align: center;
  margin-bottom: 56px;
}

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

.event-card {
  background: var(--cream);
  border: 2px dashed rgba(139, 119, 80, 0.25);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  transition: all var(--transition);
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(139, 119, 80, 0.12);
  border-style: solid;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(88, 129, 87, 0.08);
  padding: 20px 18px;
  min-width: 72px;
  border-right: 1px solid rgba(139, 119, 80, 0.1);
}

.event-month {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sage);
}

.event-day {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--bark);
  line-height: 1;
}

.event-body {
  padding: 24px 24px 20px;
  flex: 1;
}

.event-host {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 8px;
}

.event-body h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--bark);
  margin-bottom: 8px;
  line-height: 1.3;
}

.event-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--warm-gray);
  margin-bottom: 16px;
}

.event-rsvp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--earth);
  padding: 6px 16px;
  background: rgba(88, 129, 87, 0.08);
  border: 1.5px solid rgba(88, 129, 87, 0.2);
  border-radius: var(--radius-pill);
  transition: all var(--transition);
}

.event-rsvp:hover {
  background: var(--earth);
  color: #fff;
  border-color: var(--earth);
}

/* ============================================
   THE GARDEN PATHS — Use Case Cards
   ============================================ */
.paths {
  padding: 100px 0;
  background:
    linear-gradient(180deg,
      rgba(218, 215, 205, 0.25) 0%,
      rgba(163, 177, 138, 0.1) 50%,
      var(--linen) 100%);
}

.paths-header {
  text-align: center;
  margin-bottom: 56px;
}

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

.path-card {
  background: var(--cream);
  border: 2px solid rgba(163, 177, 138, 0.25);
  border-radius: 16px;
  padding: 36px 28px 32px;
  text-align: center;
  transition: all var(--transition);
}

.path-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(88, 129, 87, 0.12);
}

.path-icon {
  font-size: 2.4rem;
  margin-bottom: 18px;
  display: block;
}

.path-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--bark);
  margin-bottom: 12px;
}

.path-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--warm-gray);
  margin-bottom: 20px;
}

.path-communities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.path-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(88, 129, 87, 0.08);
  color: var(--earth);
  border: 1px solid rgba(88, 129, 87, 0.15);
}

.path-deep-roots {
  border-color: rgba(88, 129, 87, 0.3);
}

.path-greenhouse {
  border-color: rgba(188, 108, 37, 0.25);
}

.path-human {
  border-color: rgba(163, 177, 138, 0.35);
}

.path-junction {
  border-color: rgba(96, 108, 56, 0.3);
}

.path-deep-roots:hover {
  border-color: var(--earth);
}

.path-greenhouse:hover {
  border-color: var(--terracotta);
}

.path-human:hover {
  border-color: var(--sage);
}

.path-junction:hover {
  border-color: var(--moss);
}

a.path-card {
  text-decoration: none;
  display: block;
}

.path-explore {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--earth);
  transition: gap var(--transition);
}

/* ============================================
   CULTIVATED BY — Ecosystem Badges
   ============================================ */
.ecosystem {
  padding: 70px 0;
  background: var(--linen);
}

.ecosystem-header {
  text-align: center;
  margin-bottom: 40px;
}

.ecosystem-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.eco-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  border-radius: 50px;
  background: var(--cream);
  border: 2px solid rgba(163, 177, 138, 0.2);
  transition: all var(--transition);
  text-decoration: none;
  min-width: 130px;
}

.eco-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(88, 129, 87, 0.12);
  border-color: var(--sage);
}

.eco-emoji {
  font-size: 2rem;
  display: block;
}

.eco-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bark);
  text-align: center;
  line-height: 1.3;
}

.eco-badge-hub {
  border-color: rgba(88, 129, 87, 0.35);
  background: rgba(88, 129, 87, 0.06);
}

/* ============================================
   SCRAPBOOK — The Scrapbook Wall
   ============================================ */
.scrapbook {
  padding: 100px 0;
  background: var(--sage-light);
  position: relative;
  overflow: hidden;
}

.scrapbook::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(163, 177, 138, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(188, 108, 37, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.scrapbook-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.scrapbook-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 20px 0;
}

.polaroid {
  background: #fff;
  padding: 10px 10px 36px;
  border-radius: 4px;
  box-shadow: var(--shadow-polaroid);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  display: block;
  text-decoration: none;
  width: 220px;
}

.polaroid img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.polaroid-caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--warm-gray);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alternating rotations for organic scatter */
.polaroid:nth-child(1) {
  transform: rotate(-3deg);
}

.polaroid:nth-child(2) {
  transform: rotate(2.5deg);
  margin-top: 30px;
}

.polaroid:nth-child(3) {
  transform: rotate(-1.5deg);
  margin-top: -10px;
}

.polaroid:nth-child(4) {
  transform: rotate(3deg);
  margin-top: 20px;
}

.polaroid:nth-child(5) {
  transform: rotate(-2deg);
  margin-top: -5px;
}

.polaroid:nth-child(6) {
  transform: rotate(1.5deg);
  margin-top: 35px;
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.06) !important;
  box-shadow: 0 12px 40px rgba(60, 60, 40, 0.22);
  z-index: 10;
  margin-top: 0 !important;
}

/* ============================================
   CROSS-POLLINATION — Featured Friends
   ============================================ */
.partners {
  padding: 100px 0;
}

.partners-header {
  text-align: center;
  margin-bottom: 56px;
}

.partners-header .section-subtitle {
  margin: 0 auto;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 800px;
  margin: 0 auto;
}

.partner-card {
  background: var(--cream);
  border: 1px solid rgba(163, 177, 138, 0.2);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  transition: all var(--transition);
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.partner-emoji {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}

.partner-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--bark);
  margin-bottom: 10px;
}

.partner-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--warm-gray);
  margin-bottom: 20px;
}

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

.partner-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--earth);
  padding: 6px 14px;
  border: 1.5px solid rgba(88, 129, 87, 0.25);
  border-radius: var(--radius-pill);
  transition: all var(--transition);
}

.partner-link:hover {
  background: var(--earth);
  color: #fff;
  border-color: var(--earth);
}

/* ============================================
   JOIN THE ECOSYSTEM — Engagement Funnel
   ============================================ */
.ecosystem-funnel {
  padding: 100px 0;
  background:
    linear-gradient(180deg,
      var(--linen) 0%,
      rgba(163, 177, 138, 0.1) 40%,
      rgba(139, 119, 80, 0.06) 100%);
}

.funnel-header {
  text-align: center;
  margin-bottom: 56px;
}

.funnel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}

.funnel-card {
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 44px 36px 40px;
  text-align: center;
  transition: all var(--transition);
  border: 2px solid rgba(163, 177, 138, 0.2);
}

.funnel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(88, 129, 87, 0.12);
}

.funnel-individual {
  border-color: rgba(88, 129, 87, 0.3);
}

.funnel-org {
  border-color: rgba(188, 108, 37, 0.25);
}

.funnel-emoji {
  font-size: 2.6rem;
  display: block;
  margin-bottom: 20px;
}

.funnel-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--bark);
  margin-bottom: 14px;
}

.funnel-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--warm-gray);
  margin-bottom: 28px;
}

.funnel-btn {
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .funnel-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .ecosystem-funnel {
    padding: 70px 0;
  }

  .funnel-card {
    padding: 32px 24px 28px;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 56px 0 36px;
  background: var(--soil);
  color: rgba(255, 255, 255, 0.7);
}

.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.footer-brand {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-tagline {
  font-size: 0.9rem;
  max-width: 400px;
  line-height: 1.65;
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: #fff;
}

.footer-divider {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.footer-copy {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .hero h1 {
    font-size: 2.8rem;
  }

  .events-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .paths-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .partners-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .scrapbook-wall {
    gap: 10px;
  }

  .polaroid {
    width: 180px;
  }

  .polaroid img {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 130px 0 70px;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .hero-sub {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.9rem;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(254, 250, 224, 0.97);
    backdrop-filter: blur(12px);
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid rgba(163, 177, 138, 0.2);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .harvest-form {
    flex-direction: column;
    border-radius: var(--radius-soft);
  }

  .harvest-form input[type="email"] {
    text-align: center;
  }

  .harvest-form button {
    border-radius: 0 0 12px 12px;
  }

  .hero-cta-group {
    flex-direction: column;
  }

  .polaroid {
    width: 150px;
    padding: 7px 7px 28px;
  }

  .polaroid img {
    width: 136px;
    height: 136px;
  }

  .scrapbook-wall {
    gap: 8px;
  }

  .events,
  .paths,
  .scrapbook,
  .partners {
    padding: 70px 0;
  }

  .archive-hero {
    padding: 120px 0 50px;
  }

  .archive-title {
    font-size: 2rem;
  }

  .archive-grid {
    columns: 2;
  }

  .archive-grid .polaroid {
    width: 100%;
  }

  .archive-grid .polaroid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* ============================================
   TRAIL PAGE — Garden Trails
   ============================================ */
.trail-hero {
  padding: 150px 0 50px;
  text-align: center;
}

.trail-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--bark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.trail-sub {
  font-size: 1.1rem;
  color: var(--warm-gray);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

.trail-content {
  padding: 20px 0 80px;
}

.trail-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.trail-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid rgba(163, 177, 138, 0.25);
  border-radius: var(--radius-pill);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--warm-gray);
  cursor: pointer;
  transition: all var(--transition);
}

.trail-tab:hover {
  border-color: var(--sage);
  color: var(--bark);
  transform: translateY(-2px);
}

.trail-tab.active {
  background: var(--earth);
  color: #fff;
  border-color: var(--earth);
  box-shadow: 0 4px 16px rgba(88, 129, 87, 0.25);
}

.trail-tab-icon {
  font-size: 1.2rem;
}

.trail-panel {
  display: none;
}

.trail-panel.active {
  display: block;
  animation: fadeUp 0.4s ease;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.trail-intro {
  text-align: center;
  margin-bottom: 40px;
}

.trail-intro h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--bark);
  margin-bottom: 12px;
}

.trail-intro p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  max-width: 520px;
  margin: 0 auto 20px;
  line-height: 1.7;
}

.trail-communities-banner {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.trail-events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.trail-event-card {
  background: var(--cream);
  border: 2px dashed rgba(139, 119, 80, 0.25);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  transition: all var(--transition);
}

.trail-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(139, 119, 80, 0.1);
  border-style: solid;
}

@media (max-width: 640px) {
  .trail-tabs {
    gap: 8px;
  }

  .trail-tab {
    padding: 10px 18px;
    font-size: 0.85rem;
  }

  .trail-events-grid {
    grid-template-columns: 1fr;
  }

  .trail-title {
    font-size: 2rem;
  }

  .trail-hero {
    padding: 120px 0 40px;
  }
}

/* ============================================
   ARCHIVE PAGE — The Garden Archive
   ============================================ */
.archive-hero {
  padding: 150px 0 60px;
  text-align: center;
}

.archive-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--bark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.archive-sub {
  font-size: 1.1rem;
  color: var(--warm-gray);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Full archive masonry grid */
.scrapbook-archive {
  padding: 40px 0 80px;
}

.archive-grid {
  columns: 3;
  column-gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.archive-grid .polaroid {
  width: 100%;
  margin-bottom: 24px;
  break-inside: avoid;
  display: inline-block;
}

.archive-grid .polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Scrapbook teaser CTA */
.scrapbook-cta {
  text-align: center;
  margin-top: 48px;
}

/* Archive back link */
.archive-back {
  padding: 0 0 80px;
}

@media (max-width: 900px) {
  .archive-grid {
    columns: 2;
    column-gap: 16px;
  }

  .archive-grid .polaroid {
    margin-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .archive-grid {
    columns: 2;
    column-gap: 10px;
  }

  .archive-grid .polaroid {
    padding: 6px 6px 24px;
    margin-bottom: 10px;
  }

  .archive-grid .polaroid img {
    aspect-ratio: 1;
  }
}