/* ═══════════════════════════════════════════════════════════
   SRIVARI GREEN — FINAL COMPLETE STYLESHEET
   Premium concept-selling landing page · v3
   Mobile-first responsive · Smooth animations · Clean UI
   ═══════════════════════════════════════════════════════════ */

:root {
  --gold: #e5c66d;
  --gold-dark: #a47a2d;
  --gold-soft: rgba(229, 198, 109, 0.18);
  --black: #0d1612;
  --pearl: #f3f3ef;
  --shell: #d8d8d2;
  --graphite: #252722;
  --graphite-soft: #4a4d44;
  --white: #fffaf0;
  --ink-green: #0f3f31;
  --mint: #9bcbb9;
  --mist: #f5f5f1;
  --blue-grey: #dfe8e7;
  --champagne: #d8c77d;
  --glass: rgba(255, 250, 240, 0.5);
  --glass-strong: rgba(255, 250, 240, 0.78);
  --glass-dark: rgba(7, 19, 15, 0.5);
  --line: rgba(229, 198, 109, 0.3);
  --line-soft: rgba(37, 39, 34, 0.08);
  --shadow: 0 30px 90px rgba(7, 19, 15, 0.18);
  --shadow-soft: 0 12px 40px rgba(7, 19, 15, 0.10);
  --shadow-strong: 0 40px 120px rgba(7, 19, 15, 0.22);
  --mirror-edge: rgba(255, 250, 240, 0.66);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────── BASE RESET ─────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--graphite);
  cursor: none;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 250, 240, 0.86), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(216, 199, 125, 0.28), transparent 28%),
    radial-gradient(circle at 58% 78%, rgba(223, 232, 231, 0.72), transparent 34%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #f7f6f0 0%, #dfe8e7 48%, #d8c77d 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, button {
  cursor: none;
  font-family: inherit;
}

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

/* ─────────── CUSTOM CURSOR (Desktop only) ─────────── */

.cursor-dot, .cursor-ring {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-green);
  box-shadow: 0 0 0 4px rgba(155, 195, 191, 0.25);
}

.cursor-ring {
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(18, 63, 61, 0.66);
  border-radius: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: width 0.22s ease, height 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.cursor-ring.is-active {
  width: 42px;
  height: 42px;
  border-color: var(--mint);
  background: rgba(155, 195, 191, 0.12);
}

@media (hover: none), (max-width: 768px) {
  body, a, button { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─────────── LAYOUT BASE ─────────── */

.site-shell {
  overflow: hidden;
}

.section {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 88px 20px;
  max-width: 100%;
  overflow-x: clip;
}

/* ─────────── TYPOGRAPHY ─────────── */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  line-height: 1.15;
}

p { line-height: 1.6; }

em {
  font-style: italic;
  font-family: var(--serif);
  color: var(--gold-dark);
  font-weight: 500;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 18px;
  display: inline-block;
}

.text-gold { color: var(--gold-dark); }

/* ─────────── NAVIGATION (Fixed overflow) ─────────── */

.topbar {
  position: fixed;
  z-index: 50;
  left: 16px;
  top: 16px;
  width: calc(100% - 32px);
  max-width: 1120px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px 10px 22px;
  border: 1px solid rgba(255, 250, 240, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(216, 216, 210, 0.45)),
    rgba(37, 39, 34, 0.18);
  color: var(--graphite);
  box-shadow: 0 18px 60px rgba(37, 39, 34, 0.16);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
}

@media (min-width: 1170px) {
  .topbar {
    left: 50%;
    transform: translateX(-50%);
  }
}

.topbar.is-scrolled {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(216, 216, 210, 0.7)),
    rgba(37, 39, 34, 0.18);
  box-shadow: 0 24px 80px rgba(37, 39, 34, 0.22);
}

.brand, .topbar a {
  color: inherit;
  text-decoration: none;
}

.brand {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.brand span { color: var(--gold-dark); }

.topbar__links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar__links a {
  position: relative;
  padding: 6px 2px;
  transition: color 0.3s var(--ease);
}

.topbar__links a:not(.nav-cta):hover { color: var(--gold-dark); }

.topbar__links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold-dark);
  transition: width 0.3s var(--ease);
}

.topbar__links a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
  padding: 10px 22px;
  background: var(--black);
  color: var(--gold) !important;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.nav-cta:hover {
  transform: translateY(-2px);
  background: var(--ink-green);
}

.topbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: none;
  align-items: center;
  justify-content: center;
}

.topbar__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--graphite);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ─────────── BUTTONS ─────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  white-space: nowrap;
  position: relative;
}

.btn--gold {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(229, 198, 109, 0.35);
}

.btn--gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
  box-shadow: 0 18px 50px rgba(164, 122, 45, 0.45);
}

.btn--glass {
  background: rgba(255, 250, 240, 0.5);
  color: var(--black);
  border-color: rgba(13, 22, 18, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--glass:hover {
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(13, 22, 18, 0.12);
}

/* ─────────── REVEAL ANIMATIONS ─────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: transform, opacity;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  padding: 130px 20px 80px;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  pointer-events: none;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-card--split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.hero__content { max-width: 640px; }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 24px;
  color: var(--black);
  letter-spacing: -0.015em;
}

.hero-title em {
  font-style: italic;
  color: var(--gold-dark);
}

.hero-title__gold {
  display: block;
  color: var(--gold-dark);
  font-style: italic;
  margin-top: 6px;
}

.hero__copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--graphite-soft);
  margin-bottom: 32px;
  max-width: 560px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.hero__visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.hero__visual:hover img { transform: scale(1.04); }

.hero__visual-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(13, 22, 18, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 198, 109, 0.28);
  border-radius: 14px;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero__visual-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(229, 198, 109, 0.7);
  animation: pulseDot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* ─────────── IMPACT NUMBERS GRID (Hero) ─────────── */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
  padding: 22px;
  background: rgba(255, 250, 240, 0.68);
  border: 1px solid rgba(229, 198, 109, 0.32);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(7, 19, 15, 0.08);
}

.impact-stat {
  text-align: center;
  padding: 14px 8px;
  border-right: 1px solid rgba(37, 39, 34, 0.06);
  border-bottom: 1px solid rgba(37, 39, 34, 0.06);
  transition: transform 0.3s var(--ease);
}

.impact-stat:nth-child(3n) { border-right: none; }
.impact-stat:nth-last-child(-n+3) { border-bottom: none; }

.impact-stat:hover { transform: translateY(-3px); }

.impact-stat__number {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-dark);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.impact-stat__unit {
  font-size: 0.65em;
  font-weight: 600;
  margin-left: 1px;
}

.impact-stat__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  line-height: 1.4;
}

/* ─────────── EMI MARQUEE ─────────── */













@keyframes emi-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADING
   ═══════════════════════════════════════════════════════════ */

.section-heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}

.section-heading h2,
.concept-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--black);
}

.section-heading h2 span,
.concept-title__gold {
  color: var(--gold-dark);
  font-style: italic;
  display: block;
  margin-top: 4px;
}

.section-heading p {
  font-size: 17px;
  color: var(--graphite-soft);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 2: SIX PROMISES (3x2 grid)
   ═══════════════════════════════════════════════════════════ */

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.concept-grid--six {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.glass-card,
.value-card {
  position: relative;
  padding: 28px;
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(229, 198, 109, 0.28);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
  overflow: hidden;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(229, 198, 109, 0.55);
}

.value-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 18px;
  transition: transform 0.7s var(--ease-out);
}

.value-card:hover .value-card__image { transform: scale(1.04); }

.card-index {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.value-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--black);
  font-weight: 600;
}

.value-card p {
  font-size: 14.5px;
  color: var(--graphite-soft);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 3: LAND STORY
   ═══════════════════════════════════════════════════════════ */

.land-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 100px 20px;
  max-width: 1240px;
  margin: 0 auto;
}

.land-story__visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  aspect-ratio: 4 / 5;
}

.land-story__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.land-story__visual:hover img { transform: scale(1.04); }

.land-story__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(13, 22, 18, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 198, 109, 0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.land-story__badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.land-story__content h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  margin: 12px 0 28px;
  color: var(--black);
}

.land-story__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.land-story__copy p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--graphite-soft);
}

.land-story__copy p strong {
  color: var(--black);
  font-weight: 700;
}

.land-story__signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px !important;
  color: var(--gold-dark) !important;
  padding-top: 16px;
  border-top: 1px solid var(--gold-soft);
  line-height: 1.5 !important;
}

.land-story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 22px;
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(229, 198, 109, 0.32);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

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

.land-story__stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 4px;
  line-height: 1;
}

.land-story__stat span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  line-height: 1.3;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 4: COMPARISON SECTION
   ═══════════════════════════════════════════════════════════ */



.comparison-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1180px;
  margin: 0 auto;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: center;
  padding: 32px;
  background: rgba(255, 250, 240, 0.62);
  border: 1px solid rgba(229, 198, 109, 0.22);
  border-radius: 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.comparison-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.comparison-row--reverse .comparison-row__image { order: 2; }
.comparison-row--reverse .comparison-row__content { order: 1; }

.comparison-row__image {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-soft);
}

.comparison-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.comparison-row:hover .comparison-row__image img { transform: scale(1.05); }

.comparison-row__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comparison-number {
  position: absolute;
  top: -8px;
  right: 0;
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.comparison-column {
  padding: 18px 22px;
  border-radius: 14px;
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.3s var(--ease);
}

.comparison-column--bad {
  border-left-color: rgba(150, 150, 150, 0.6);
  opacity: 0.78;
}

.comparison-column--good {
  border-left-color: var(--gold);
  background: rgba(229, 198, 109, 0.12);
}

.comparison-column--why {
  border-left-color: var(--ink-green);
  background: rgba(15, 63, 49, 0.06);
}

.comparison-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  margin-bottom: 8px;
  font-family: var(--sans);
}

.comparison-label--gold { color: var(--gold-dark); }

.comparison-column h3 {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--black);
  font-weight: 600;
}

.comparison-column p {
  font-size: 13.5px;
  color: var(--graphite-soft);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 5: CINEMATIC
   ═══════════════════════════════════════════════════════════ */

.cinematic {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 100px 20px;
  max-width: 1240px;
  margin: 0 auto;
}

.cinematic__image {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}

.cinematic__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.cinematic__image:hover img { transform: scale(1.04); }

.cinematic__copy h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  margin: 12px 0 22px;
  color: var(--black);
}

.cinematic__copy p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--graphite-soft);
  margin-bottom: 30px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 6: PROJECT DETAILS GRID + SDG CARD
   ═══════════════════════════════════════════════════════════ */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.detail-card {
  padding: 28px;
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid rgba(229, 198, 109, 0.24);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}

.detail-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-soft);
  border-radius: 14px;
  margin-bottom: 18px;
}

.detail-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-card span {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

.detail-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--black);
}

.detail-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite-soft);
}

/* SDG card special styling */
.detail-card--sdg {
  background: linear-gradient(135deg, rgba(229, 198, 109, 0.18), rgba(155, 195, 191, 0.15));
  border-color: rgba(229, 198, 109, 0.45);
  grid-column: span 2;
}

.detail-card--sdg .detail-icon {
  background: rgba(15, 63, 49, 0.12);
}

.detail-card--sdg .detail-icon svg {
  stroke: var(--ink-green);
}

.detail-card--sdg p strong {
  color: var(--gold-dark);
  font-weight: 700;
}

.sdg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.sdg-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(13, 22, 18, 0.85);
  color: var(--gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(229, 198, 109, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   SECTION 7: CONNECTIVITY
   ═══════════════════════════════════════════════════════════ */

.connectivity-template {
  padding: 100px 20px;
}

.connectivity-heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.connectivity-heading h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  margin-bottom: 14px;
  color: var(--black);
}

.connectivity-heading h2 span {
  color: var(--gold-dark);
  font-style: italic;
}

.connectivity-heading p {
  font-size: 17px;
  color: var(--graphite-soft);
}

.connectivity-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.connectivity-map {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--white);
}

.connectivity-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.connectivity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255, 250, 240, 0.68);
  border: 1px solid rgba(229, 198, 109, 0.24);
  border-radius: 24px;
  padding: 8px 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.connectivity-row {
  display: grid;
  grid-template-columns: 1.3fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.connectivity-row:last-child { border-bottom: none; }

.connectivity-row strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
}

.connectivity-row span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
}

.connectivity-row em {
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--graphite-soft);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 8: ASSURANCE
   ═══════════════════════════════════════════════════════════ */

.assurance-section { padding: 100px 20px; }

.assurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-bottom: 36px;
}

.assurance-card {
  position: relative;
  padding: 32px 26px;
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid rgba(229, 198, 109, 0.28);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.assurance-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

.assurance-number {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
}

.assurance-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--black);
  padding-right: 36px;
}

.assurance-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite-soft);
}

.assurance-closing {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold-dark);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 9: WALKTHROUGH (with image fix)
   ═══════════════════════════════════════════════════════════ */

.walkthrough { padding: 100px 20px; }

.walk-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.plan-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(229, 198, 109, 0.22);
}

.plan-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.walk-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.walk-step {
  padding: 22px 24px;
  background: rgba(255, 250, 240, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  border-left: 3px solid transparent;
  transition: all 0.4s var(--ease);
  opacity: 0.6;
}

.walk-step.active {
  opacity: 1;
  background: rgba(229, 198, 109, 0.14);
  border-left-color: var(--gold);
  box-shadow: var(--shadow-soft);
  transform: translateX(8px);
}

.walk-step b {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}

.walk-step p {
  font-size: 14px;
  color: var(--graphite-soft);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 10: HOMES TYPES
   ═══════════════════════════════════════════════════════════ */

.homes-types { padding: 100px 20px; }

.homes-types__visual {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 36px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.homes-types__visual img { width: 100%; }

.homes-types__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 36px auto 0;
}

.home-type-card {
  padding: 32px 28px;
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(229, 198, 109, 0.28);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.home-type-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

.home-type-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px !important;
}

.home-type-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--black);
  margin-bottom: 14px;
}

.home-type-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite-soft);
  margin-bottom: 16px;
}

.home-type-card span {
  display: inline-block;
  padding: 8px 16px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 11: GALLERY (with arrows)
   ═══════════════════════════════════════════════════════════ */

.gallery-strip { padding: 100px 20px; }

.gallery-rail-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto;
}

.gallery-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid rgba(229, 198, 109, 0.4);
  border-radius: 50%;
  color: var(--gold-dark);
  cursor: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
  z-index: 2;
}

.gallery-arrow:hover {
  background: var(--gold);
  color: var(--black);
  transform: scale(1.08);
}

.gallery-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gallery-arrow svg {
  width: 22px;
  height: 22px;
}

.image-rail {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 16px 8px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  -webkit-overflow-scrolling: touch;
}

.image-rail::-webkit-scrollbar { height: 6px; }
.image-rail::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 4px; }
.image-rail::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }

.image-rail img {
  flex: 0 0 auto;
  width: clamp(280px, 45vw, 480px);
  height: 320px;
  object-fit: cover;
  border-radius: 20px;
  scroll-snap-align: center;
  box-shadow: var(--shadow-soft);
  filter: brightness(0.94) saturate(0.95);
  transition: filter 0.4s var(--ease), transform 0.5s var(--ease-out);
  cursor: none;
}

.image-rail img.is-active,
.image-rail img:hover {
  filter: brightness(1) saturate(1.05);
  transform: scale(1.02);
}

.gallery-cta {
  display: block;
  margin: 32px auto 0;
  width: fit-content;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 12: FINAL CTA
   ═══════════════════════════════════════════════════════════ */

.final-cta { padding: 100px 20px; }

.final-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 48px;
  background:
    linear-gradient(140deg, rgba(255, 250, 240, 0.92), rgba(216, 199, 125, 0.45));
  border: 1px solid rgba(229, 198, 109, 0.5);
  border-radius: 32px;
  text-align: center;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.final-card h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  margin: 12px 0 18px;
  color: var(--black);
}

.final-card > p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--graphite-soft);
  margin-bottom: 36px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.unit-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  margin-bottom: 36px;
}

.unit-row > div {
  text-align: center;
}

.unit-row strong {
  display: block;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
  margin-bottom: 6px;
}

.unit-row span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite-soft);
}

.unit-row__divider {
  width: 1px;
  height: 50px;
  background: var(--gold-dark);
  opacity: 0.4;
}

.final-card .hero__actions {
  justify-content: center;
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.site-footer {
  padding: 60px 20px 40px;
  background: var(--black);
  color: var(--pearl);
  margin-top: 60px;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.footer-brand .brand-mark {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.footer-brand .brand-mark span { color: var(--gold); }

.footer-tagline {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.footer-by {
  font-size: 13px;
  color: rgba(243, 243, 239, 0.6);
}

.footer-meta {
  text-align: right;
}

.footer-meta p {
  font-size: 12.5px;
  color: rgba(243, 243, 239, 0.7);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.footer-copy {
  font-size: 11.5px !important;
  color: rgba(243, 243, 239, 0.4) !important;
  letter-spacing: 0.06em !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤968px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  .section { padding: 70px 20px; }

  /* Navigation */
  .topbar {
    padding: 8px 14px 8px 18px;
    border-radius: 28px;
  }
  .topbar__links { display: none; }
  .topbar__toggle { display: flex; }

  .topbar.is-open .topbar__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 12px 4px 4px;
    border-top: 1px solid var(--line-soft);
    margin-top: 10px;
  }
  .topbar.is-open {
    border-radius: 22px;
    flex-direction: column;
    align-items: flex-start;
  }
  .topbar.is-open .topbar__links a:not(.nav-cta) {
    padding: 10px 4px;
    font-size: 14px;
  }
  .topbar.is-open .nav-cta {
    text-align: center;
    width: 100%;
  }

  /* Hero */
  .hero { padding: 110px 20px 60px; min-height: auto; }
  .hero-card--split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__visual { aspect-ratio: 4 / 3; max-height: 460px; }
  .hero__copy { font-size: 16px; }

  .impact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
  }
  .impact-stat { padding: 10px 6px; }

  /* Six promises */
  .concept-grid--six {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Land Story */
  .land-story {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 70px 20px;
  }
  .land-story__visual { aspect-ratio: 4 / 3; }
  .land-story__stats { grid-template-columns: repeat(3, 1fr); }

  /* Comparison */
  .comparison-row,
  .comparison-row--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }
  .comparison-row--reverse .comparison-row__image,
  .comparison-row--reverse .comparison-row__content {
    order: initial;
  }
  .comparison-number {
    position: static;
    align-self: flex-end;
    font-size: 48px;
    margin-bottom: -8px;
  }

  /* Cinematic */
  .cinematic {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 70px 20px;
  }
  .cinematic__image { aspect-ratio: 4 / 3; max-height: 460px; }

  /* SDG card */
  .detail-card--sdg { grid-column: span 2; }

  /* Connectivity */
  .connectivity-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .connectivity-map { max-height: 380px; }

  /* Walkthrough */
  .walk-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Homes types */
  .homes-types__grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
  .footer-meta { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤640px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body { font-size: 15px; }

  .section { padding: 56px 16px; }

  .hero { padding: 100px 16px 50px; }
  .hero-title { font-size: clamp(28px, 8vw, 38px); }
  .hero__copy { font-size: 15px; }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 14px;
  }
  .impact-stat {
    padding: 12px 6px;
  }
  .impact-stat:nth-child(3n) {
    border-right: 1px solid rgba(37, 39, 34, 0.06);
  }
  .impact-stat:nth-child(2n) { border-right: none; }
  .impact-stat:nth-last-child(-n+3) {
    border-bottom: 1px solid rgba(37, 39, 34, 0.06);
  }
  .impact-stat:nth-last-child(-n+2) { border-bottom: none; }
  .impact-stat__number { font-size: 24px; }
  .impact-stat__label { font-size: 9px; }

  
  

  .hero__actions {
    flex-direction: column;
    gap: 10px;
  }
  .btn {
    width: 100%;
    padding: 14px 22px;
    font-size: 13px;
  }

  /* Section heading */
  .section-heading { margin-bottom: 40px; }
  .section-heading h2,
  .concept-title {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
  .section-heading p { font-size: 15px; }

  /* Six promises */
  .concept-grid--six {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Land Story */
  .land-story { padding: 60px 16px; gap: 32px; }
  .land-story__content h2 { font-size: 26px; }
  .land-story__copy p { font-size: 15px; }
  .land-story__signature { font-size: 16px !important; }
  .land-story__stats {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .land-story__stat {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .land-story__stat:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  /* Comparison */
  
  .comparison-grid { gap: 32px; }
  .comparison-row { padding: 20px; gap: 22px; }
  .comparison-column { padding: 14px 16px; }
  .comparison-column h3 { font-size: 16px; }
  .comparison-column p { font-size: 13px; }

  /* Cinematic */
  .cinematic { padding: 60px 16px; gap: 32px; }
  .cinematic__copy h2 { font-size: 26px; }
  .cinematic__copy p { font-size: 15px; }

  /* Concept */
  .value-card { padding: 22px; }
  .value-card__image { height: 220px; }

  /* Detail grid */
  .detail-grid { grid-template-columns: 1fr; gap: 16px; }
  .detail-card { padding: 22px; }
  .detail-card--sdg { grid-column: span 1; }

  /* Connectivity */
  .connectivity-template { padding: 60px 16px; }
  .connectivity-list { padding: 4px 14px; }
  .connectivity-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px 0;
  }
  .connectivity-row em {
    grid-column: 2;
    font-size: 11px;
  }
  .connectivity-row strong { font-size: 14px; }

  /* Assurance */
  .assurance-section { padding: 60px 16px; }
  .assurance-grid { grid-template-columns: 1fr; gap: 16px; }
  .assurance-closing { font-size: 16px; }

  /* Walkthrough */
  .walkthrough { padding: 60px 16px; }

  /* Homes types */
  .homes-types { padding: 60px 16px; }
  .home-type-card { padding: 22px; }

  /* Gallery */
  .gallery-strip { padding: 60px 16px; }
  .gallery-arrow {
    width: 40px;
    height: 40px;
  }
  .gallery-arrow svg {
    width: 18px;
    height: 18px;
  }
  .gallery-rail-wrap {
    gap: 8px;
  }
  .image-rail img {
    width: 80vw;
    height: 240px;
  }

  /* Final CTA */
  .final-cta { padding: 60px 16px; }
  .final-card {
    padding: 40px 24px;
    border-radius: 24px;
  }
  .final-card h2 { font-size: 28px; }
  .unit-row { gap: 20px; }
  .unit-row strong { font-size: 42px; }
  .unit-row__divider { height: 38px; }

  /* Footer */
  .site-footer { padding: 40px 16px 30px; }
  .footer-brand .brand-mark { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */

@media print {
  .cursor-dot, .cursor-ring, .topbar, .btn { display: none; }
  body { background: white; cursor: auto; }
  .reveal { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════════════════════
   SRIVARI GREEN — IMAGE CONTAINER FIX (CRITICAL)
   
   Fixes:
   1. Hero side image not showing on desktop
   2. Land Story image breaking out of card
   3. Cinematic image breaking out of section
   4. Mobile responsiveness for all 3 sections
   
   PASTE THIS AT THE END of your existing site.css file.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   GLOBAL IMAGE PROTECTION
   ═══════════════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

img {
  max-width: 100% !important;
  height: auto;
}


/* ═══════════════════════════════════════════════════════════
   HERO SECTION FIX — Image visible & properly sized
   ═══════════════════════════════════════════════════════════ */

/* Force grid to actually render both columns on desktop */
@media (min-width: 969px) {
  .hero-card--split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  .hero__content {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero__visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 640px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    display: block !important;
  }

  .hero__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   LAND STORY FIX — Image fits inside card properly
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 969px) {
  .land-story {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 100px 20px !important;
    box-sizing: border-box !important;
  }

  .land-story__visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 500px !important;
    max-height: 700px !important;
    aspect-ratio: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-strong) !important;
    box-sizing: border-box !important;
  }

  .land-story__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: inherit !important;
  }

  .land-story__content {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   CINEMATIC FIX — Image fits within section container
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 969px) {
  .cinematic {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 100px 20px !important;
    box-sizing: border-box !important;
  }

  .cinematic__image {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    max-height: 640px !important;
    aspect-ratio: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    box-sizing: border-box !important;
  }

  .cinematic__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: inherit !important;
  }

  .cinematic__copy {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   TABLET RESPONSIVE (≤968px) — Stack vertically, fit images
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  
  /* HERO */
  .hero-card--split {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero__visual {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 460px !important;
    border-radius: 24px !important;
  }

  .hero__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* LAND STORY */
  .land-story {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 70px 20px !important;
    box-sizing: border-box !important;
  }

  .land-story__visual {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 460px !important;
    border-radius: 24px !important;
  }

  .land-story__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* CINEMATIC */
  .cinematic {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 70px 20px !important;
    box-sizing: border-box !important;
  }

  .cinematic__image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 460px !important;
    border-radius: 24px !important;
  }

  .cinematic__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (≤640px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  
  /* HERO */
  .hero,
  .hero.section {
    padding: 90px 14px 40px !important;
    min-height: auto !important;
  }

  .hero-card--split {
    gap: 28px !important;
  }

  .hero__visual {
    aspect-ratio: 4 / 3 !important;
    max-height: 360px !important;
    border-radius: 18px !important;
  }

  /* LAND STORY */
  .land-story {
    padding: 60px 16px !important;
    gap: 28px !important;
  }

  .land-story__visual {
    aspect-ratio: 4 / 3 !important;
    max-height: 360px !important;
    border-radius: 18px !important;
  }

  /* CINEMATIC */
  .cinematic {
    padding: 60px 16px !important;
    gap: 28px !important;
  }

  .cinematic__image {
    aspect-ratio: 4 / 3 !important;
    max-height: 360px !important;
    border-radius: 18px !important;
  }

  /* HERO IMPACT GRID — 2 columns */
  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 12px !important;
  }

  .impact-stat {
    padding: 14px 6px !important;
    border: none !important;
    border-bottom: 1px solid rgba(37, 39, 34, 0.08) !important;
  }

  .impact-stat:nth-child(odd) {
    border-right: 1px solid rgba(37, 39, 34, 0.08) !important;
  }

  .impact-stat:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  .impact-stat__number {
    font-size: 22px !important;
  }

  .impact-stat__label {
    font-size: 9.5px !important;
  }

  /* HERO CTAs */
  .hero__actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero__actions .btn {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   NAVBAR FIX — Fits within viewport always
   ═══════════════════════════════════════════════════════════ */

.topbar,
nav.topbar {
  left: 12px !important;
  right: 12px !important;
  width: calc(100vw - 24px) !important;
  max-width: 1120px !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 1170px) {
  .topbar,
  nav.topbar {
    left: 50% !important;
    right: auto !important;
    width: 1120px !important;
    transform: translateX(-50%) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LAND STORY — 4 STEP PROCESS UPDATE
   Only updates Section 3 content/card styling.
   ═══════════════════════════════════════════════════════════ */

.land-story__copy--process {
  gap: 18px;
  margin-bottom: 30px;
}

.land-story__copy--process p:first-child {
  font-size: 17px;
  color: var(--black);
}

.land-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.land-process__card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 10px 10px 18px;
  text-align: center;
  background: rgba(255, 250, 240, 0.74);
  border: 1px solid rgba(229, 198, 109, 0.28);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(7, 19, 15, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.land-process__card::after {
  content: '';
  position: absolute;
  inset: auto 16px 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(229, 198, 109, 0.65), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.land-process__card:hover {
  transform: translateY(-5px);
  border-color: rgba(229, 198, 109, 0.58);
  box-shadow: 0 20px 50px rgba(7, 19, 15, 0.13);
}

.land-process__card:hover::after { opacity: 1; }

.land-process__card img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  filter: brightness(0.96) saturate(0.92);
  transition: transform 0.65s var(--ease-out), filter 0.35s var(--ease);
}

.land-process__card:hover img {
  transform: scale(1.045);
  filter: brightness(1) saturate(1.02);
}

.land-process__card span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.land-process__card h3 {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.land-process__card p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--graphite-soft);
}

.land-story__cta {
  display: inline-flex;
  width: fit-content;
  margin-top: 30px;
  padding-bottom: 8px;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(164, 122, 45, 0.32);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.land-story__cta:hover {
  color: var(--black);
  border-color: var(--black);
  transform: translateX(4px);
}

@media (max-width: 1100px) and (min-width: 969px) {
  .land-process { gap: 10px; }
  .land-process__card { padding: 9px 8px 15px; }
  .land-process__card img { height: 94px; }
  .land-process__card h3 { font-size: 22px; }
  .land-process__card p { font-size: 11.5px; }
}

@media (max-width: 968px) {
  .land-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .land-process__card img { height: 120px; }
}

@media (max-width: 760px) {
  .land-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .land-process__card img { height: 128px; }
}

@media (max-width: 420px) {
  .land-process { grid-template-columns: 1fr; }
  .land-process__card img { height: 160px; }
  .land-story__cta { font-size: 20px; }
}


/* ═══════════════════════════════════════════════════════════════
   FINAL UPDATE — May 6 2026
   1. Hero: darker impact numbers + full-width EMI marquee + mobile fix
   2. Farmer section: prominent (larger) cards
   3. Promises section: compact (smaller) cards
   4. Comparison: 2-card layout with 6 sub-cards each + dark green bg
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1A. HERO — DARKER IMPACT NUMBERS
   Slightly darker variant of the gold-brown for highlighted feel
   ═══════════════════════════════════════════════════════════ */

.impact-stat__number {
  color: #7d5a1f !important;          /* darker than #a47a2d */
  font-weight: 700 !important;        /* slightly heavier */
  text-shadow: 0 1px 0 rgba(125, 90, 31, 0.08);
}

.impact-stat__unit {
  color: #7d5a1f !important;
}


/* ═══════════════════════════════════════════════════════════
   1B. EMI MARQUEE — FULL EDGE-TO-EDGE
   Removes the gradient mask so text scrolls all the way to edges
   ═══════════════════════════════════════════════════════════ */




/* ═══════════════════════════════════════════════════════════
   1C. HERO — MOBILE RESPONSIVE FIX (only Section 1)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  .hero,
  .hero.section {
    padding: 100px 16px 50px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .hero-card--split {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero__content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero__visual {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 460px !important;
    box-sizing: border-box !important;
  }

  .impact-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .impact-stat {
    padding: 12px 4px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .impact-stat__number {
    font-size: 22px !important;
  }

  .impact-stat__label {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  
}

@media (max-width: 640px) {
  .hero,
  .hero.section {
    padding: 88px 14px 40px !important;
  }

  .hero-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.18 !important;
  }

  .hero__copy {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 12px !important;
  }

  .impact-stat {
    border: none !important;
    border-bottom: 1px solid rgba(37, 39, 34, 0.08) !important;
    padding: 14px 6px !important;
  }

  .impact-stat:nth-child(odd) {
    border-right: 1px solid rgba(37, 39, 34, 0.08) !important;
  }

  .impact-stat:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  .impact-stat__number {
    font-size: 22px !important;
  }

  .impact-stat__label {
    font-size: 9.5px !important;
  }

  .hero__actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero__actions .btn {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .hero__visual {
    aspect-ratio: 4 / 3 !important;
    max-height: 360px !important;
  }
}

@media (max-width: 380px) {
  .hero,
  .hero.section {
    padding: 84px 10px 30px !important;
  }

  .hero-title {
    font-size: 22px !important;
  }

  .impact-stat__number {
    font-size: 19px !important;
  }

  .impact-stat__label {
    font-size: 8.5px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   2. FARMER SECTION — PROMINENT (LARGER CARDS)
   The farmer cards are now the lead story, so cards get bigger
   ═══════════════════════════════════════════════════════════ */

.farmer-section--prominent .farmer__card-inner {
  padding: 28px 24px 32px;
  border-radius: 22px;
  border-width: 1.5px;
  background: rgba(255, 250, 240, 0.85);
  box-shadow: 0 18px 44px rgba(7, 19, 15, 0.10);
}

.farmer-section--prominent .farmer__image {
  margin-bottom: 22px;
  border-radius: 14px;
}

.farmer-section--prominent .farmer__step {
  font-size: 11px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

.farmer-section--prominent .farmer__hook {
  font-size: 17px;
  margin-bottom: 8px;
}

.farmer-section--prominent .farmer__title {
  font-size: clamp(24px, 2.4vw, 32px);
  margin-bottom: 14px;
}

.farmer-section--prominent .farmer__copy {
  font-size: 14.5px;
  line-height: 1.6;
}

.farmer-section--prominent .farmer__card:hover .farmer__card-inner {
  transform: translateY(-10px);
  box-shadow: 0 28px 64px rgba(7, 19, 15, 0.16);
}

@media (max-width: 968px) {
  .farmer-section--prominent .farmer__card-inner {
    padding: 24px 20px 28px;
  }

  .farmer-section--prominent .farmer__title {
    font-size: 26px;
  }
}

@media (max-width: 640px) {
  .farmer-section--prominent .farmer__card-inner {
    padding: 22px 18px 24px;
  }

  .farmer-section--prominent .farmer__hook {
    font-size: 15px;
  }

  .farmer-section--prominent .farmer__title {
    font-size: 24px;
  }
}


/* ═══════════════════════════════════════════════════════════
   3. PROMISE SECTION — COMPACT (SMALLER CARDS)
   The 6 promise cards are now smaller, supporting the farmer story
   ═══════════════════════════════════════════════════════════ */

.concept--compact {
  padding: 70px 20px 80px;
}

.concept--compact .section-heading {
  margin-bottom: 48px;
}

.concept--compact .concept-title {
  font-size: clamp(24px, 3vw, 36px);
}

.concept--compact .concept-grid--six {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.concept--compact .value-card {
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.66);
  border-width: 1px;
  box-shadow: 0 10px 24px rgba(7, 19, 15, 0.06);
}

.concept--compact .value-card__image {
  height: 140px;
  margin-bottom: 14px;
  border-radius: 12px;
}

.concept--compact .card-index {
  font-size: 9.5px;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.concept--compact .value-card h3 {
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.concept--compact .value-card p {
  font-size: 13px;
  line-height: 1.55;
}

.concept--compact .value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(7, 19, 15, 0.10);
}

@media (max-width: 968px) {
  .concept--compact .concept-grid--six {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .concept--compact .value-card__image {
    height: 160px;
  }
}

@media (max-width: 640px) {
  .concept--compact {
    padding: 56px 16px 60px;
  }

  .concept--compact .concept-grid--six {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 460px;
  }

  .concept--compact .value-card__image {
    height: 180px;
  }

  .concept--compact .value-card h3 {
    font-size: 17px;
  }
}


/* ═══════════════════════════════════════════════════════════
   4. COMPARISON SECTION V2 — 2 cards × 6 sub-cards + GREEN BG
   ═══════════════════════════════════════════════════════════ */



/* Background image with dark glassy green tint */


/* If image fails to load, gradient still shows */


/* Position content above bg */


/* Override section-heading colors for dark bg */








/* Two main cards container */

/* Each main card */








/* Header inside main card */










/* List of 6 sub-cards inside each main card */


/* Individual sub-card */



















/* ─────────── COMPARISON V2 RESPONSIVE ─────────── */

@media (max-width: 968px) {
  

  

  
}

@media (max-width: 640px) {
  

  

  

  

  

  

  

  

  
}


/* ═══════════════════════════════════════════════════════════════
   FIXES — May 6 2026 (Round 2)
   1. Make "What six families get" section background more transparent
   2. Same dark glassy green background for project-details section
   3. Removed assurance section (HTML)
   4. EMI marquee TRULY edge-to-edge full viewport width
   5. Mobile fix for farmer section arrows (hide them when stacking)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 4: EMI MARQUEE — TRULY edge-to-edge full viewport
   The hero card has padding/width that's clipping the marquee.
   We need to break it OUT of its parent container.
   ═══════════════════════════════════════════════════════════ */





@media (max-width: 968px) {
  
}


/* ═══════════════════════════════════════════════════════════
   FIX 1 & 2: PROJECT DETAILS section — dark glassy green bg
   Same treatment as comparison section — looks unified
   ═══════════════════════════════════════════════════════════ */

.project-details {
  position: relative;
  padding: 100px 20px 120px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

.project-details::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(135deg, rgba(7, 32, 24, 0.75) 0%, rgba(15, 63, 49, 0.68) 50%, rgba(7, 32, 24, 0.78) 100%),
    url('../images/comparison-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.project-details > .section-heading,
.project-details > .detail-grid {
  position: relative;
  z-index: 1;
}

/* Lighten heading colors over the dark bg */
.project-details .section-heading .eyebrow {
  color: var(--gold) !important;
}

.project-details .section-heading h2 {
  color: var(--white, #fffaf0) !important;
}

.project-details .section-heading h2 span,
.project-details .section-heading h2 .text-gold {
  color: var(--gold, #e5c66d) !important;
}

.project-details .section-heading p {
  color: rgba(255, 250, 240, 0.78) !important;
}

/* Make detail cards more opaque/visible against the dark bg */
.project-details .detail-card {
  background: rgba(255, 250, 240, 0.94) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(229, 198, 109, 0.4) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.project-details .detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36) !important;
  border-color: var(--gold) !important;
}

/* SDG card override on dark bg */
.project-details .detail-card--sdg {
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(255, 248, 225, 0.92)) !important;
  border-color: rgba(229, 198, 109, 0.55) !important;
}


/* ═══════════════════════════════════════════════════════════
   FIX 1: COMPARISON SECTION — Make background more transparent
   So you can see the image more clearly behind the green tint
   ═══════════════════════════════════════════════════════════ */




/* ═══════════════════════════════════════════════════════════
   FIX 5: FARMER SECTION — Hide arrows on mobile/tablet
   The big black arrows shouldn't render when cards stack vertically
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  .farmer__arrow {
    display: none !important;
  }

  .farmer__path {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
}

@media (max-width: 640px) {
  .farmer__path {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 460px;
    margin: 0 auto;
  }
}


/* Also fix the giant arrow rendering — limit its size */
.farmer__arrow {
  max-width: 60px !important;
  max-height: 60px !important;
  width: 60px !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.farmer__arrow svg {
  width: 100% !important;
  height: 24px !important;
  max-width: 60px !important;
}


/* ═══════════════════════════════════════════════════════════
   GENERAL: Ensure body doesn't horizontal scroll due to marquee
   ═══════════════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}


/* ═══════════════════════════════════════════════════════════════
   ROUND 3 FIXES — May 6 2026
   1. Farmer section: dark glassy green bg + arrow render fix
   2. Project Details: force 4+3 grid (4 top, 3 bottom)
   3. Gallery auto-scroll handled in JS (no CSS change)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1A: FARMER SECTION — Dark glassy green background
   Same as comparison/details for visual consistency
   ═══════════════════════════════════════════════════════════ */

.farmer-section.farmer-section--prominent {
  position: relative;
  padding: 100px 20px 120px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.farmer-section.farmer-section--prominent::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(135deg, rgba(7, 32, 24, 0.78) 0%, rgba(15, 63, 49, 0.70) 50%, rgba(7, 32, 24, 0.80) 100%),
    url('../images/comparison-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.farmer-section.farmer-section--prominent > .farmer__heading,
.farmer-section.farmer-section--prominent > .farmer__path,
.farmer-section.farmer-section--prominent > .farmer__footer {
  position: relative;
  z-index: 1;
}

/* Lighten heading on dark bg */
.farmer-section.farmer-section--prominent .farmer__heading .eyebrow {
  color: var(--gold) !important;
}

.farmer-section.farmer-section--prominent .farmer__heading h2 {
  color: var(--white, #fffaf0) !important;
}

.farmer-section.farmer-section--prominent .farmer__heading h2 .text-gold {
  color: var(--gold, #e5c66d) !important;
}

.farmer-section.farmer-section--prominent .farmer__heading .farmer__subtitle {
  color: rgba(255, 250, 240, 0.92) !important;
}

.farmer-section.farmer-section--prominent .farmer__heading .farmer__body {
  color: rgba(255, 250, 240, 0.78) !important;
}

.farmer-section.farmer-section--prominent .farmer__heading .farmer__body em {
  color: var(--gold, #e5c66d) !important;
}

/* Cards stay light/cream against dark bg */
.farmer-section.farmer-section--prominent .farmer__card-inner {
  background: rgba(255, 250, 240, 0.96) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32) !important;
  border-color: rgba(229, 198, 109, 0.45) !important;
}

.farmer-section.farmer-section--prominent .farmer__card:hover .farmer__card-inner {
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42) !important;
  border-color: var(--gold) !important;
}

/* CTA on dark bg */
.farmer-section.farmer-section--prominent .farmer__cta {
  color: var(--gold, #e5c66d) !important;
  border-bottom-color: rgba(229, 198, 109, 0.5) !important;
}

.farmer-section.farmer-section--prominent .farmer__cta:hover {
  color: var(--white, #fffaf0) !important;
  border-bottom-color: var(--white, #fffaf0) !important;
}


/* ═══════════════════════════════════════════════════════════
   FIX 1B: FARMER ARROW — Render fix (no more giant blue arrow)
   The SVG was scaling weirdly. Lock its dimensions.
   ═══════════════════════════════════════════════════════════ */

.farmer-section .farmer__arrow {
  width: 60px !important;
  max-width: 60px !important;
  height: 24px !important;
  max-height: 24px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  color: var(--gold, #e5c66d) !important;
  opacity: 0.7 !important;
}

.farmer-section .farmer__arrow svg {
  width: 60px !important;
  height: 24px !important;
  max-width: 60px !important;
  max-height: 24px !important;
  display: block !important;
}

/* Make arrow strokes brighter on dark bg */
.farmer-section.farmer-section--prominent .farmer__arrow svg {
  color: var(--gold, #e5c66d) !important;
  stroke: var(--gold, #e5c66d) !important;
}

.farmer-section.farmer-section--prominent .farmer__arrow svg path {
  stroke: var(--gold, #e5c66d) !important;
}

/* Hide arrows on tablet/mobile (stacked layout) */
@media (max-width: 968px) {
  .farmer-section .farmer__arrow {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX 2: PROJECT DETAILS — 4 cards top, 3 cards bottom
   Force exact 4-column grid (no auto-fit)
   ═══════════════════════════════════════════════════════════ */

.project-details .detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* SDG card no longer spans 2 columns - it fits as a regular card in the 4-col grid */
.project-details .detail-card.detail-card--sdg {
  grid-column: span 1 !important;
}

/* Tablet: 2 columns × ~4 rows */
@media (max-width: 968px) {
  .project-details .detail-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .project-details .detail-card.detail-card--sdg {
    grid-column: span 2 !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .project-details .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .project-details .detail-card.detail-card--sdg {
    grid-column: span 1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX 3: GALLERY AUTO-SCROLL ANIMATION HELPER
   (Main behavior in JS, this is just visual hint)
   ═══════════════════════════════════════════════════════════ */

.gallery-rail-wrap.is-auto-scrolling {
  cursor: pointer;
}

.gallery-rail-wrap.is-paused .gallery-arrow {
  animation: gallery-pulse 2s ease-in-out infinite;
}

@keyframes gallery-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   ROUND 4 FIXES — May 6 2026
   1. Farmer section: Force 2x2 grid with proper images + arrow render
   2. Project Details: Restore card heights (auto-rows) + SDG spans 4 cols
   3. Hide arrow SVGs that aren't being styled correctly
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1: FARMER SECTION — 2×2 grid (was missing base rule)
   ═══════════════════════════════════════════════════════════ */

/* BASE: 2x2 grid on desktop (was 4x1 row, now 2x2) */
.farmer__path {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 24px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
}

/* Hide all arrows globally — they don't fit 2x2 layout cleanly */
.farmer__arrow,
.farmer-section .farmer__arrow {
  display: none !important;
}

/* Hide the trail dot too — was for horizontal flow */
.farmer__trail,
.farmer-section .farmer__trail {
  display: none !important;
}

/* Cards: ensure they fill the grid cells properly */
.farmer__card {
  width: 100% !important;
  max-width: 100% !important;
}

.farmer__card-inner {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Image height — keep consistent for all 4 cards */
.farmer-section.farmer-section--prominent .farmer__image {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--mist, #f5f5f1);
  margin-bottom: 18px !important;
}

.farmer-section.farmer-section--prominent .farmer__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Tablet: 2x2 (same as desktop) */
@media (max-width: 968px) {
  .farmer__path {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    max-width: 720px !important;
  }
}

/* Mobile: 1 column (4 stacked) */
@media (max-width: 640px) {
  .farmer__path {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 460px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX 2: PROJECT DETAILS — Restore original card heights
   Cards should be auto-height, not stretch to match tallest
   SDG spans full width on its own row (row 2)
   ═══════════════════════════════════════════════════════════ */

.project-details .detail-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  align-items: start !important;
  /* CRITICAL: Don't stretch rows — cards keep their natural height */
  grid-auto-rows: auto !important;
}

/* SDG card: spans all 3 columns of bottom row to fill the empty space */
.project-details .detail-card.detail-card--sdg {
  grid-column: 1 / -1 !important;  /* span full width */
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 24px 28px !important;
}

.project-details .detail-card.detail-card--sdg .detail-icon {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.project-details .detail-card.detail-card--sdg span {
  margin-bottom: 6px !important;
}

.project-details .detail-card.detail-card--sdg h3 {
  margin-bottom: 6px !important;
  font-size: 22px !important;
}

.project-details .detail-card.detail-card--sdg p {
  margin-bottom: 0 !important;
  font-size: 14px !important;
}

.project-details .detail-card.detail-card--sdg .sdg-badges {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  flex-direction: column !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
  width: auto !important;
}

/* Tablet: 2 cols, SDG spans 2 */
@media (max-width: 968px) {
  .project-details .detail-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .project-details .detail-card.detail-card--sdg {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .project-details .detail-card.detail-card--sdg .sdg-badges {
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
}

/* Mobile: 1 col */
@media (max-width: 640px) {
  .project-details .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .project-details .detail-card.detail-card--sdg {
    grid-column: 1 !important;
    padding: 20px !important;
  }

  .project-details .detail-card.detail-card--sdg .sdg-badges {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL REQUEST FIX — Farmer section cleanup + SDG image slots
   Edited only for:
   1. Farmer section alignment/structure on desktop and mobile
   2. Complete removal of giant farmer arrows/trail
   3. SDG card number badges replaced with 4 fixed image slots
   ═══════════════════════════════════════════════════════════════ */

/* FARMER SECTION — clean two-column desktop layout */
.farmer-section.farmer-section--prominent {
  padding: 100px 20px 120px !important;
}

.farmer__layout {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.farmer__heading {
  max-width: 500px;
  margin: 0;
}

.farmer__heading h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  margin-bottom: 18px;
}

.farmer__subtitle {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 14px;
}

.farmer__body {
  font-size: 14.5px;
  line-height: 1.75;
}

.farmer__path {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Remove the unwanted huge arrow/trail entirely */
.farmer__arrow,
.farmer-section .farmer__arrow,
.farmer__trail,
.farmer-section .farmer__trail {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.farmer__card {
  min-width: 0 !important;
  width: 100% !important;
}

.farmer-section.farmer-section--prominent .farmer__card-inner {
  height: 100% !important;
  min-height: 0 !important;
  padding: 20px 20px 22px !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
}

.farmer-section.farmer-section--prominent .farmer__step {
  width: fit-content;
  font-size: 9.5px !important;
  padding: 5px 10px !important;
  margin-bottom: 12px !important;
}

.farmer-section.farmer-section--prominent .farmer__image {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  margin: 0 0 16px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f5f5f1 !important;
}

.farmer-section.farmer-section--prominent .farmer__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.farmer-section.farmer-section--prominent .farmer__hook {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  margin-bottom: 5px !important;
}

.farmer-section.farmer-section--prominent .farmer__title {
  font-size: 25px !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
}

.farmer-section.farmer-section--prominent .farmer__copy {
  font-size: 13.2px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.farmer__footer {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin: 34px auto 0;
}

/* Farmer tablet */
@media (max-width: 968px) {
  .farmer-section.farmer-section--prominent {
    padding: 80px 18px 90px !important;
  }

  .farmer__layout {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 760px;
  }

  .farmer__heading {
    max-width: 680px;
    text-align: center;
    margin: 0 auto;
  }

  .farmer__path {
    max-width: 720px !important;
    margin: 0 auto !important;
    gap: 18px !important;
  }

  .farmer__footer {
    max-width: 720px;
    text-align: center;
  }
}

/* Farmer mobile */
@media (max-width: 640px) {
  .farmer-section.farmer-section--prominent {
    padding: 60px 14px 70px !important;
  }

  .farmer__layout {
    gap: 26px;
  }

  .farmer__heading {
    text-align: left;
  }

  .farmer__heading h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .farmer__subtitle {
    font-size: 14.5px;
  }

  .farmer__body {
    font-size: 13.5px;
  }

  .farmer__path {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
    gap: 16px !important;
  }

  .farmer-section.farmer-section--prominent .farmer__card-inner {
    padding: 18px 16px 20px !important;
  }

  .farmer-section.farmer-section--prominent .farmer__image {
    aspect-ratio: 16 / 10 !important;
  }

  .farmer__footer {
    max-width: 460px;
    margin-top: 26px;
    text-align: left;
  }
}

/* SDG CARD — replace number badges with four fixed image spaces */
.project-details .detail-card.detail-card--sdg {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 24px 28px !important;
}

.project-details .detail-card.detail-card--sdg .detail-icon {
  margin-bottom: 0 !important;
}

.sdg-content {
  min-width: 0;
}

.sdg-content span {
  margin-bottom: 6px !important;
}

.sdg-content h3 {
  margin-bottom: 6px !important;
  font-size: 22px !important;
}

.sdg-content p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Keep old badges hidden if any cached HTML still has them */
.sdg-badges,
.sdg-badge {
  display: none !important;
}

.sdg-image-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 54px) !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.sdg-image-slot {
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(229, 198, 109, 0.18), rgba(15, 63, 49, 0.12)),
    rgba(255, 250, 240, 0.8) !important;
  border: 1px solid rgba(229, 198, 109, 0.38) !important;
  box-shadow: 0 8px 18px rgba(7, 19, 15, 0.10) !important;
}

.sdg-image-slot img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* SDG tablet */
@media (max-width: 968px) {
  .project-details .detail-card.detail-card--sdg {
    grid-template-columns: auto 1fr !important;
    align-items: start !important;
  }

  .sdg-image-grid {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .sdg-image-slot {
    width: 100% !important;
    height: 70px !important;
  }
}

/* SDG mobile */
@media (max-width: 640px) {
  .project-details .detail-card.detail-card--sdg {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 20px !important;
  }

  .sdg-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .sdg-image-slot {
    height: 82px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FINAL FARMER V5 — exact image-2 layout + image-3 cards
   Requested by user:
   - match image-2 section structure
   - use image-3-inspired card design
   - keep 4 cards in one row on desktop
   - clean responsive tablet/mobile layout
   Character image to upload manually:
   assets/images/farmer-character.png
   Recommended size: 1040 × 1408 px, transparent PNG
   ═══════════════════════════════════════════════════════════ */

/* wider header so it visually matches the wider section */
.topbar,
nav.topbar {
  width: calc(100% - 40px) !important;
  max-width: 1310px !important;
}

@media (min-width: 1170px) {
  .topbar,
  nav.topbar {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

.farmer-section.farmer-section--v5 {
  width: min(100%, 1310px) !important;
  padding: 34px 22px 70px !important;
  position: relative;
  overflow: hidden;
}

.farmer-section.farmer-section--v5::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,0.06), transparent 24%),
    radial-gradient(circle at 78% 14%, rgba(229,198,109,0.08), transparent 22%),
    radial-gradient(circle at 52% 82%, rgba(255,255,255,0.04), transparent 26%),
    linear-gradient(135deg, #33584d 0%, #53786d 48%, #406358 100%);
}

.farmer-v5 {
  position: relative;
  z-index: 1;
}

.farmer-v5__top {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  margin-bottom: 26px;
}

.farmer-v5__character {
  margin: 0;
  width: min(100%, 280px);
  align-self: end;
  justify-self: start;
  pointer-events: none;
  user-select: none;
}

.farmer-v5__character img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 28px rgba(7, 19, 15, 0.14));
}

.farmer-v5__intro {
  max-width: 760px;
}

.farmer-v5__intro .eyebrow {
  margin-bottom: 12px;
  color: #f0ca6d !important;
}

.farmer-v5__intro h2 {
  max-width: 720px;
  margin-bottom: 18px;
  font-size: clamp(46px, 5.2vw, 68px);
  line-height: 0.98;
  color: rgba(255, 250, 240, 0.98);
}

.farmer-v5__intro h2 .text-gold {
  display: block;
  color: #f0ca6d !important;
}

.farmer-v5__subtitle,
.farmer-v5__body {
  max-width: 700px;
  color: rgba(255, 250, 240, 0.94);
}

.farmer-v5__subtitle {
  font-size: 15px;
  line-height: 1.56;
  font-weight: 500;
  margin-bottom: 14px;
}

.farmer-v5__body {
  font-size: 14px;
  line-height: 1.62;
  margin-bottom: 24px;
}

.farmer-v5__body em {
  color: #f0ca6d;
}

.farmer-v5__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 222px;
  min-height: 52px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #e5c66d;
  color: #0d1612;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.farmer-v5__cta:hover {
  background: #dfbe5c;
  transform: translateY(-1px);
}

.farmer-v5__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.farmer-v5-card {
  position: relative;
  min-height: 226px;
  border-radius: 28px;
  overflow: hidden;
  background: #23372f;
  box-shadow: 0 16px 36px rgba(7, 19, 15, 0.18);
  isolation: isolate;
}

.farmer-v5-card__media,
.farmer-v5-card__overlay,
.farmer-v5-card__content {
  position: absolute;
  inset: 0;
}

.farmer-v5-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.farmer-v5-card__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.08) 26%, rgba(8,12,10,0.74) 100%);
  z-index: 1;
}

.farmer-v5-card__content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  color: #fffaf0;
}

.farmer-v5-card__step {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(7px);
  color: #fffaf0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.farmer-v5-card__text {
  margin-top: auto;
}

.farmer-v5-card__hook {
  margin-bottom: 4px;
  color: rgba(255,250,240,0.90);
  font-size: 11px;
  line-height: 1.3;
}

.farmer-v5-card__title {
  margin-bottom: 6px;
  color: #fffaf0;
  font-size: 19px;
  line-height: 1.02;
}

.farmer-v5-card__copy {
  margin: 0;
  color: rgba(255,250,240,0.92);
  font-size: 11.2px;
  line-height: 1.38;
}

.farmer-section.farmer-section--v5 .farmer__footer,
.farmer-section.farmer-section--v5 .farmer__arrow,
.farmer-section.farmer-section--v5 .farmer__trail,
.farmer-section.farmer-section--v5 .farmer__cta svg,
.farmer-section.farmer-section--v5 .farmer__cta path {
  display: none !important;
}

@media (max-width: 1199px) {
  .farmer-section.farmer-section--v5 {
    padding: 34px 18px 60px !important;
  }

  .farmer-v5__top {
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    gap: 28px;
  }

  .farmer-v5__character {
    width: min(100%, 220px);
  }

  .farmer-v5__intro h2 {
    max-width: 580px;
    font-size: clamp(38px, 5vw, 56px);
  }

  .farmer-v5__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .farmer-v5-card {
    min-height: 270px;
  }

  .farmer-v5-card__title {
    font-size: 22px;
  }

  .farmer-v5-card__copy {
    font-size: 12px;
    line-height: 1.42;
  }
}

@media (max-width: 767px) {
  .topbar,
  nav.topbar {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .farmer-section.farmer-section--v5 {
    padding: 34px 14px 50px !important;
  }

  .farmer-v5__top {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 16px;
  }

  .farmer-v5__character {
    width: min(100%, 210px);
    justify-self: center;
  }

  .farmer-v5__intro {
    max-width: 100%;
  }

  .farmer-v5__intro h2 {
    max-width: 100%;
    font-size: clamp(34px, 8.8vw, 44px);
  }

  .farmer-v5__subtitle {
    font-size: 14px;
  }

  .farmer-v5__body {
    font-size: 13.5px;
    line-height: 1.58;
  }

  .farmer-v5__cta {
    min-width: 208px;
    min-height: 48px;
    padding: 14px 24px;
    font-size: 13.5px;
  }

  .farmer-v5__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .farmer-v5-card {
    min-height: 264px;
  }

  .farmer-v5-card__title {
    font-size: 22px;
  }

  .farmer-v5-card__copy {
    font-size: 12px;
    line-height: 1.42;
  }
}


/* ═══════════════════════════════════════════════════════════
   FINAL FARMER V6 — png names + full character behind cards
   Fixes:
   1. In farmer section only, character and card image names use .png
   2. Header width now matches farmer section width
   3. Character is larger/full and extends behind the cards
   ═══════════════════════════════════════════════════════════ */

/* Match topbar width exactly to farmer section width */
.topbar,
nav.topbar {
  width: calc(100% - 40px) !important;
  max-width: 1310px !important;
}

@media (min-width: 1170px) {
  .topbar,
  nav.topbar {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

.farmer-section.farmer-section--v6 {
  width: calc(100% - 40px) !important;
  max-width: 1310px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 34px 22px 70px !important;
  position: relative;
  overflow: hidden;
}

.farmer-section.farmer-section--v6::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,0.06), transparent 24%),
    radial-gradient(circle at 78% 14%, rgba(229,198,109,0.08), transparent 22%),
    radial-gradient(circle at 52% 82%, rgba(255,255,255,0.04), transparent 26%),
    linear-gradient(135deg, #33584d 0%, #53786d 48%, #406358 100%);
}

.farmer-v6 {
  position: relative;
  z-index: 1;
}

.farmer-v6__top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(265px, 360px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
  margin-bottom: 0;
  min-height: 425px;
}

.farmer-v6__character {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(100%, 355px);
  align-self: end;
  justify-self: start;
  pointer-events: none;
  user-select: none;
  margin-bottom: -145px;
}

.farmer-v6__character img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 28px rgba(7, 19, 15, 0.14));
}

.farmer-v6__intro {
  max-width: 760px;
  padding-top: 42px;
}

.farmer-v6__intro .eyebrow {
  margin-bottom: 12px;
  color: #f0ca6d !important;
}

.farmer-v6__intro h2 {
  max-width: 720px;
  margin-bottom: 18px;
  font-size: clamp(46px, 5.2vw, 68px);
  line-height: 0.98;
  color: rgba(255, 250, 240, 0.98);
}

.farmer-v6__intro h2 .text-gold {
  display: block;
  color: #f0ca6d !important;
}

.farmer-v6__subtitle,
.farmer-v6__body {
  max-width: 700px;
  color: rgba(255, 250, 240, 0.94);
}

.farmer-v6__subtitle {
  font-size: 15px;
  line-height: 1.56;
  font-weight: 500;
  margin-bottom: 14px;
}

.farmer-v6__body {
  font-size: 14px;
  line-height: 1.62;
  margin-bottom: 24px;
}

.farmer-v6__body em {
  color: #f0ca6d;
}

.farmer-v6__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 222px;
  min-height: 52px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #e5c66d;
  color: #0d1612;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.farmer-v6__cta:hover {
  background: #dfbe5c;
  transform: translateY(-1px);
}

/* cards sit above the character */
.farmer-v6__cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: -18px;
}

.farmer-v6-card {
  position: relative;
  min-height: 226px;
  border-radius: 28px;
  overflow: hidden;
  background: #23372f;
  box-shadow: 0 16px 36px rgba(7, 19, 15, 0.18);
  isolation: isolate;
}

.farmer-v6-card__media,
.farmer-v6-card__overlay,
.farmer-v6-card__content {
  position: absolute;
  inset: 0;
}

.farmer-v6-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.farmer-v6-card__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.08) 26%, rgba(8,12,10,0.74) 100%);
  z-index: 1;
}

.farmer-v6-card__content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  color: #fffaf0;
}

.farmer-v6-card__step {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(7px);
  color: #fffaf0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.farmer-v6-card__text {
  margin-top: auto;
}

.farmer-v6-card__hook {
  margin-bottom: 4px;
  color: rgba(255,250,240,0.90);
  font-size: 11px;
  line-height: 1.3;
}

.farmer-v6-card__title {
  margin-bottom: 6px;
  color: #fffaf0;
  font-size: 19px;
  line-height: 1.02;
}

.farmer-v6-card__copy {
  margin: 0;
  color: rgba(255,250,240,0.92);
  font-size: 11.2px;
  line-height: 1.38;
}

.farmer-section.farmer-section--v6 .farmer__footer,
.farmer-section.farmer-section--v6 .farmer__arrow,
.farmer-section.farmer-section--v6 .farmer__trail,
.farmer-section.farmer-section--v6 .farmer__cta svg,
.farmer-section.farmer-section--v6 .farmer__cta path {
  display: none !important;
}

@media (max-width: 1199px) {
  .farmer-section.farmer-section--v6 {
    padding: 34px 18px 60px !important;
  }

  .topbar,
  nav.topbar {
    width: calc(100% - 36px) !important;
    max-width: 1274px !important;
  }

  .farmer-section.farmer-section--v6 {
    width: calc(100% - 36px) !important;
    max-width: 1274px !important;
  }

  .farmer-v6__top {
    grid-template-columns: minmax(200px, 255px) minmax(0, 1fr);
    gap: 28px;
    min-height: 380px;
  }

  .farmer-v6__character {
    width: min(100%, 250px);
    margin-bottom: -110px;
  }

  .farmer-v6__intro {
    padding-top: 26px;
  }

  .farmer-v6__intro h2 {
    max-width: 580px;
    font-size: clamp(38px, 5vw, 56px);
  }

  .farmer-v6__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: -6px;
  }

  .farmer-v6-card {
    min-height: 270px;
  }

  .farmer-v6-card__title {
    font-size: 22px;
  }

  .farmer-v6-card__copy {
    font-size: 12px;
    line-height: 1.42;
  }
}

@media (max-width: 767px) {
  .topbar,
  nav.topbar {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .farmer-section.farmer-section--v6 {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    padding: 34px 14px 50px !important;
  }

  .farmer-v6__top {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 0;
    min-height: 0;
  }

  .farmer-v6__character {
    width: min(100%, 255px);
    justify-self: center;
    margin-bottom: -72px;
  }

  .farmer-v6__intro {
    max-width: 100%;
    padding-top: 0;
  }

  .farmer-v6__intro h2 {
    max-width: 100%;
    font-size: clamp(34px, 8.8vw, 44px);
  }

  .farmer-v6__subtitle {
    font-size: 14px;
  }

  .farmer-v6__body {
    font-size: 13.5px;
    line-height: 1.58;
  }

  .farmer-v6__cta {
    min-width: 208px;
    min-height: 48px;
    padding: 14px 24px;
    font-size: 13.5px;
  }

  .farmer-v6__cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }

  .farmer-v6-card {
    min-height: 264px;
  }

  .farmer-v6-card__title {
    font-size: 22px;
  }

  .farmer-v6-card__copy {
    font-size: 12px;
    line-height: 1.42;
  }
}


/* ═══════════════════════════════════════════════════════════
   FINAL FARMER V7 — full width + visible CTA + reduced bottom space
   Fixes requested:
   1. Farmer section full width
   2. CTA no longer hidden by cards
   3. Cards pushed a little down
   4. Bottom space reduced
   ═══════════════════════════════════════════════════════════ */

/* Keep header visually matching the farmer section content width */
.topbar,
nav.topbar {
  width: calc(100% - 40px) !important;
  max-width: 1310px !important;
}

/* full width farmer section */
.farmer-section.farmer-section--v6 {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 34px 0 40px !important;
  position: relative;
  overflow: hidden;
}

/* keep inner content aligned and centered */
.farmer-v6 {
  width: calc(100% - 40px);
  max-width: 1310px;
  margin: 0 auto;
}

.farmer-v6__top {
  min-height: 420px;
  margin-bottom: 0;
}

.farmer-v6__character {
  width: min(100%, 355px);
  margin-bottom: -122px;
}

/* CTA stays clearly above the card row */
.farmer-v6__intro {
  position: relative;
  z-index: 4;
  padding-top: 42px;
}

.farmer-v6__cta {
  position: relative;
  z-index: 5;
}

/* card row goes slightly down so CTA is visible */
.farmer-v6__cards {
  position: relative;
  z-index: 3;
  margin-top: 18px !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* slight height tune */
.farmer-v6-card {
  min-height: 214px;
}

@media (max-width: 1199px) {
  .topbar,
  nav.topbar {
    width: calc(100% - 36px) !important;
    max-width: 1274px !important;
  }

  .farmer-section.farmer-section--v6 {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 34px 0 36px !important;
  }

  .farmer-v6 {
    width: calc(100% - 36px);
    max-width: 1274px;
  }

  .farmer-v6__top {
    min-height: 372px;
  }

  .farmer-v6__character {
    width: min(100%, 248px);
    margin-bottom: -92px;
  }

  .farmer-v6__cards {
    margin-top: 22px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .farmer-v6-card {
    min-height: 258px;
  }
}

@media (max-width: 767px) {
  .topbar,
  nav.topbar {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .farmer-section.farmer-section--v6 {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 30px 0 28px !important;
  }

  .farmer-v6 {
    width: calc(100% - 24px);
    max-width: none;
  }

  .farmer-v6__top {
    min-height: 0;
    gap: 16px;
  }

  .farmer-v6__character {
    width: min(100%, 255px);
    margin-bottom: -56px;
  }

  .farmer-v6__intro {
    padding-top: 0;
  }

  .farmer-v6__cards {
    margin-top: 18px !important;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .farmer-v6-card {
    min-height: 252px;
  }
}


/* ═══════════════════════════════════════════════════════════
   FARMER CHARACTER SIZE TUNE ONLY
   User request:
   - increase the character image size
   - make the character look a little bigger
   Only necessary CSS changes
   ═══════════════════════════════════════════════════════════ */

.farmer-v6__top {
  min-height: 455px !important;
}

.farmer-v6__character {
  width: min(100%, 430px) !important;
  margin-bottom: -138px !important;
}

@media (max-width: 1199px) {
  .farmer-v6__top {
    min-height: 405px !important;
  }

  .farmer-v6__character {
    width: min(100%, 300px) !important;
    margin-bottom: -104px !important;
  }
}

@media (max-width: 767px) {
  .farmer-v6__character {
    width: min(100%, 290px) !important;
    margin-bottom: -66px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FINAL DIFFERENCE SECTION CHARACTER UPDATE
   Adds center character between comparison cards.
   Image to upload manually:
   assets/images/difference-character.png
   Recommended size: 1200 × 1400 px, transparent PNG.
   ═══════════════════════════════════════════════════════════ */



/* Make the section breathe like the reference image */



/* Existing two cards remain same content, but become side cards */






/* New center character */




/* Give character visual permission to sit between/over card edges */





/* Slightly tighten inner card rows so the character composition fits */




/* Desktop refinement */
@media (max-width: 1180px) and (min-width: 969px) {
  

  

  

  

  
}

/* Tablet: character goes between the two cards as a standalone visual */
@media (max-width: 968px) {
  

  

  

  

  
}

/* Mobile */
@media (max-width: 640px) {
  

  

  
}


/* ═══════════════════════════════════════════════════════════
   FINAL HERO FULL WIDTH UPDATE
   User request:
   - make hero section full width
   - keep responsive on desktop and mobile
   - adjust content and image size to suit full width
   - ensure the background visually fills the section
   ═══════════════════════════════════════════════════════════ */

.hero.hero--cinematic.section,
.hero.section {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 118px 0 34px !important;
  overflow: hidden !important;
  position: relative !important;
}

.hero.hero--cinematic.section::after,
.hero.section::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,250,240,0.82) 0%, rgba(255,250,240,0.56) 19%, rgba(255,250,240,0.28) 38%, rgba(255,250,240,0.18) 100%),
    radial-gradient(circle at right center, rgba(229,198,109,0.12), transparent 35%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.hero-bg {
  opacity: 0.10 !important;
}

.hero-card--split {
  position: relative !important;
  width: calc(100% - 40px) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr) !important;
  gap: clamp(36px, 4vw, 72px) !important;
  align-items: center !important;
  overflow: visible !important;
}

.hero-card--split::before {
  content: '' !important;
  position: absolute !important;
  inset: -16px -16px -12px !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(255,250,240,0.20), rgba(255,250,240,0.10)) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 20px 60px rgba(7, 19, 15, 0.05) !important;
  z-index: -1 !important;
}

.hero__content {
  width: 100% !important;
  max-width: 700px !important;
  min-width: 0 !important;
}

.hero-title {
  font-size: clamp(44px, 5vw, 66px) !important;
  line-height: 1.06 !important;
  margin-bottom: 22px !important;
}

.hero__copy {
  max-width: 620px !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
}

.impact-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 26px !important;
  padding: 22px !important;
  background: rgba(255, 250, 240, 0.74) !important;
  border: 1px solid rgba(229, 198, 109, 0.30) !important;
  box-shadow: 0 18px 50px rgba(7, 19, 15, 0.08) !important;
}

.hero__actions {
  margin-top: 26px !important;
}

.hero__visual {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 560px !important;
  max-height: 640px !important;
  aspect-ratio: auto !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-strong) !important;
}

.hero__visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.hero__visual-tag {
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
}



/* Large desktop refinement */
@media (min-width: 1440px) {
  .hero-card--split {
    max-width: 1440px !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.95fr) !important;
  }

  .hero__visual {
    min-height: 600px !important;
    max-height: 680px !important;
  }
}

/* Tablet and smaller desktop */
@media (max-width: 1100px) {
  .hero.hero--cinematic.section,
  .hero.section {
    padding: 106px 0 30px !important;
  }

  .hero-card--split {
    width: calc(100% - 32px) !important;
    max-width: 1240px !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important;
    gap: 28px !important;
  }

  .hero-title {
    font-size: clamp(38px, 5vw, 54px) !important;
  }

  .hero__copy {
    font-size: 16.5px !important;
  }

  .hero__visual {
    min-height: 500px !important;
    max-height: 560px !important;
  }

  
}

/* Mobile / tablet stack */
@media (max-width: 968px) {
  .hero.hero--cinematic.section,
  .hero.section {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 92px 0 24px !important;
  }

  .hero-card--split {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .hero-card--split::before {
    inset: -10px -8px -8px !important;
    border-radius: 28px !important;
  }

  .hero__content {
    max-width: 100% !important;
  }

  .hero-title {
    font-size: clamp(32px, 7vw, 44px) !important;
    line-height: 1.12 !important;
  }

  .hero__copy {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .impact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 16px !important;
  }

  .hero__actions {
    gap: 10px !important;
  }

  .hero__visual {
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    order: 2 !important;
  }

  
}

/* Mobile narrow */
@media (max-width: 640px) {
  .hero.hero--cinematic.section,
  .hero.section {
    padding: 86px 0 20px !important;
  }

  .hero-card--split {
    width: calc(100% - 20px) !important;
    gap: 20px !important;
  }

  .hero-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    margin-bottom: 16px !important;
  }

  .hero__copy {
    font-size: 14px !important;
  }

  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 14px !important;
  }

  .impact-stat {
    padding: 12px 6px !important;
  }

  .impact-stat__number {
    font-size: 22px !important;
  }

  .impact-stat__label {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  .hero__actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .hero__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero__visual {
    aspect-ratio: 4 / 3.25 !important;
    border-radius: 24px !important;
  }

  .hero__visual-tag {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
  }

  
}


/* ═══════════════════════════════════════════════════════════
   FINAL VISIT CTA WITH CHARACTER + HERO MARQUEE END TO END
   Updates:
   1. Final visit section redesigned like provided reference
   2. Hero banks marquee runs end-to-end and keeps scrolling
   Character image to upload manually:
   assets/images/final-cta-character.png
   Recommended size: 1200 × 1500 px transparent PNG
   ═══════════════════════════════════════════════════════════ */

/* ---------- HERO EMI MARQUEE END TO END ---------- */
.hero-card--split {
  align-items: stretch !important;
}

.hero__content,
.hero__visual {
  align-self: center !important;
}









@media (max-width: 968px) {
  

  
}

/* ---------- FINAL VISIT SECTION ---------- */
.final-cta.final-cta--with-character {
  width: min(100%, 1400px) !important;
  margin: 0 auto !important;
  padding: 92px 20px 100px !important;
}

.final-cta.final-cta--with-character .final-card {
  max-width: 1210px !important;
  min-height: 640px;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.15fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  text-align: left !important;
  overflow: hidden !important;
  border-radius: 38px !important;
  border: 1px solid rgba(229, 198, 109, 0.55) !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(235, 214, 149, 0.20), transparent 32%),
    linear-gradient(90deg, rgba(255,250,240,0.98) 0%, rgba(255,250,240,0.95) 44%, rgba(249,241,216,0.92) 100%) !important;
  box-shadow: 0 28px 60px rgba(13, 22, 18, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.final-card__media {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: 0 0 0 0;
}

.final-card__arch {
  position: absolute;
  left: -44px;
  top: 36px;
  bottom: 36px;
  width: 290px;
  border-radius: 160px 160px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.15));
  z-index: 0;
}

.final-card__media::before {
  content: '';
  position: absolute;
  left: 36px;
  bottom: 92px;
  width: 60px;
  height: 200px;
  background:
    radial-gradient(circle at 50% 12%, rgba(200, 179, 112, 0.9) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 46%, rgba(200, 179, 112, 0.66) 46% 54%, transparent 54% 100%);
  opacity: 0.35;
  border-radius: 30px;
  transform: rotate(8deg);
  z-index: 0;
  pointer-events: none;
}

.final-card__media img {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  display: block;
  margin: 0 0 0 22px;
  filter: drop-shadow(0 18px 30px rgba(13, 22, 18, 0.10));
}

.final-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px 56px 64px 32px;
  text-align: center;
}

.final-card__content .eyebrow {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--graphite) !important;
  margin-bottom: 16px !important;
}

.final-card__ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.final-card__ornament span {
  width: 58px;
  height: 1px;
  background: rgba(209, 174, 74, 0.62);
}

.final-card__ornament i {
  font-style: normal;
  color: rgba(209, 174, 74, 0.85);
  font-size: 18px;
  line-height: 1;
}

.final-card__content h2 {
  font-size: clamp(42px, 4.5vw, 64px) !important;
  line-height: 1.06 !important;
  margin: 0 0 20px !important;
  max-width: 640px;
}

.final-card__content > p {
  margin: 0 0 30px !important;
  max-width: 620px !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--graphite-soft) !important;
}

.final-cta.final-cta--with-character .unit-row {
  gap: 42px !important;
  margin-bottom: 34px !important;
}

.final-cta.final-cta--with-character .unit-row strong {
  font-size: 60px !important;
  color: var(--gold-dark) !important;
}

.final-cta.final-cta--with-character .unit-row span {
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
}

.final-cta.final-cta--with-character .final-card .hero__actions {
  justify-content: center !important;
  gap: 18px !important;
  width: 100%;
  margin-top: 0 !important;
}

.final-cta.final-cta--with-character .final-card .btn {
  min-width: 240px;
  justify-content: center;
}

@media (max-width: 1100px) {
  .final-cta.final-cta--with-character {
    padding: 82px 18px 88px !important;
  }

  .final-cta.final-cta--with-character .final-card {
    grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr) !important;
    min-height: 560px;
  }

  .final-card__media {
    min-height: 560px;
  }

  .final-card__media img {
    width: min(100%, 430px);
    margin-left: 12px;
  }

  .final-card__content {
    padding: 52px 36px 52px 18px;
  }

  .final-card__content h2 {
    font-size: clamp(36px, 4vw, 52px) !important;
  }

  .final-card__content > p {
    font-size: 16px !important;
  }
}

@media (max-width: 860px) {
  .final-cta.final-cta--with-character {
    padding: 72px 16px 80px !important;
  }

  .final-cta.final-cta--with-character .final-card {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }

  .final-card__media {
    min-height: 420px;
    justify-content: center;
    padding-top: 20px;
  }

  .final-card__arch {
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    bottom: auto;
    width: min(78vw, 280px);
    height: 300px;
    border-radius: 150px 150px 0 0;
  }

  .final-card__media::before {
    left: 10%;
    bottom: 52px;
    height: 160px;
  }

  .final-card__media img {
    width: min(100%, 360px);
    margin: 0 auto;
  }

  .final-card__content {
    padding: 18px 26px 42px;
  }

  .final-card__content h2 {
    font-size: clamp(32px, 7vw, 48px) !important;
  }

  .final-card__content > p {
    font-size: 15px !important;
    max-width: 560px !important;
  }
}

@media (max-width: 560px) {
  .final-cta.final-cta--with-character {
    padding: 62px 12px 68px !important;
  }

  .final-cta.final-cta--with-character .final-card {
    border-radius: 28px !important;
  }

  .final-card__media {
    min-height: 330px;
  }

  .final-card__arch {
    width: 220px;
    height: 238px;
  }

  .final-card__media img {
    width: min(100%, 290px);
  }

  .final-card__content {
    padding: 12px 18px 28px;
  }

  .final-card__content .eyebrow {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .final-card__ornament {
    margin-bottom: 14px;
  }

  .final-card__ornament span {
    width: 42px;
  }

  .final-card__content h2 {
    font-size: clamp(28px, 9vw, 36px) !important;
    margin-bottom: 14px !important;
  }

  .final-card__content > p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  .final-cta.final-cta--with-character .unit-row {
    gap: 22px !important;
    margin-bottom: 24px !important;
  }

  .final-cta.final-cta--with-character .unit-row strong {
    font-size: 42px !important;
  }

  .final-cta.final-cta--with-character .unit-row span {
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
  }

  .final-cta.final-cta--with-character .unit-row__divider {
    height: 44px !important;
  }

  .final-cta.final-cta--with-character .final-card .hero__actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .final-cta.final-cta--with-character .final-card .btn {
    min-width: 0;
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════
   FINAL DIFFERENCE STANDING CHARACTER UPDATE
   Updates the Difference section center character to match the
   standing character reference.
   Upload manually:
   assets/images/difference-standing-character.png
   Recommended image size: 1200 × 1700 px, transparent PNG
   ═══════════════════════════════════════════════════════════ */
















/* Optional center VS badge like the reference */








@media (max-width: 1180px) and (min-width: 969px) {
  

  

  

  

  

  

  

  

  
}

@media (max-width: 968px) {
  

  

  

  

  

  
}

@media (max-width: 640px) {
  

  

  
}


/* ═══════════════════════════════════════════════════════════
   FINAL DIFFERENCE CARD SIZE REFINEMENT
   User request:
   - reduce the card size a little smaller
   - closer to the provided reference image
   Only this section is refined
   ═══════════════════════════════════════════════════════════ */


























/* keep typography compact inside cards */




/* slightly smaller number chips */
.comparison-sub__badge {
  width: 40px !important;
  height: 40px !important;
  font-size: 12px !important;
}

/* medium screens */
@media (max-width: 1180px) and (min-width: 969px) {
  

  

  

  

  

  

  

  
}

/* stack layout stays clean on mobile/tablet */
@media (max-width: 968px) {
  

  

  

  
}

@media (max-width: 640px) {
  

  

  

  

  
}


/* ═══════════════════════════════════════════════════════════
   FINAL DIFFERENCE IMAGE SIZE INCREASE
   User request:
   - increase center character image size to match reference better
   Only necessary change for this section
   Recommended uploaded image:
   assets/images/difference-standing-character.png
   Size: 1400 × 2100 px, transparent PNG
   ═══════════════════════════════════════════════════════════ */






@media (max-width: 1180px) and (min-width: 969px) {
  

  
}

@media (max-width: 968px) {
  
}

@media (max-width: 640px) {
  
}



/* ═══════════════════════════════════════════════════════════════
   ROUND 5 FIXES — May 7 2026
   1. EMI marquee: TRULY edge-to-edge using 100vw breakout technique
   2. Comparison section: VS badge visibility + character image styling
   3. Make character image work even if PNG isn't uploaded yet
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1: EMI MARQUEE — TRULY edge-to-edge of viewport
   The previous fix used calc(100% + 40px) which only covers parent padding.
   We need 100vw breakout to extend beyond the .hero-card--split max-width.
   ═══════════════════════════════════════════════════════════ */



/* Track inside marquee should not have constraints */


/* Tablet/mobile — same breakout technique */
@media (max-width: 1100px) {
  
}

@media (max-width: 640px) {
  

  
}


/* ═══════════════════════════════════════════════════════════
   FIX 2: COMPARISON SECTION — VS badge + character image
   Position VS badge inside the gap between cards, ensure it's visible
   ═══════════════════════════════════════════════════════════ */


/* VS badge — re-position to be CENTERED VERTICALLY between cards (not above) */


/* Hide the horizontal line — not needed when VS is centered */


/* Character image — cleaner positioning */




/* If image doesn't load, show a subtle gold placeholder shape so layout doesn't break */


/* Tablet — VS badge stays smaller */
@media (max-width: 1180px) and (min-width: 969px) {
  

  
}

/* Mobile — hide character (cards stack), VS becomes a divider chip */
@media (max-width: 968px) {
  

  
}


/* ═══════════════════════════════════════════════════════════
   FIX 3: HERO PARENT MUST ALLOW MARQUEE OVERFLOW
   .hero section needs overflow-x: visible for marquee breakout to work
   ═══════════════════════════════════════════════════════════ */

.hero,
.hero.section,
.hero-card,
.hero-card--split {
  overflow-x: visible !important;
}

/* But body must still hide overflow (set elsewhere) */
body {
  overflow-x: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════
   COMPARISON SECTION — CLEAN AUTHORITATIVE RULES (v6 — May 7, 2026)
   All conflicting rules have been stripped. This is the ONE
   source of truth for the comparison section layout.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────── 3-COLUMN GRID: Card | Center | Card ─────────── */




/* ─────────── BAD CARD (Most Apartments) ─────────── */




/* ─────────── GOOD CARD (Srivari Green) ─────────── */




/* ─────────── CENTER COLUMN — woman image fills it floor-to-ceiling ─────────── */






/* ─────────── VS BADGE — clean centered pendant ─────────── */




/* ─────────── HIDE the gold horizontal line (decorative line above cards) ─────────── */




/* ═══════════════════════════════════════════════════════════
   TABLET (≤1180px and >968px) — narrower center column
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) and (min-width: 969px) {
  

  

  
}


/* ═══════════════════════════════════════════════════════════
   MOBILE (≤968px) — Stack cards vertically, hide character
   VS badge becomes a divider chip between stacked cards
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  

  

  /* Hide character on mobile — saves space */
  

  /* VS badge becomes a small chip between the two stacked cards */
  
}


/* ═══════════════════════════════════════════════════════════════
   ROOT-CAUSE FIXES — May 7 2026 (v7)
   1. EMI marquee: Was being clipped by html/body overflow-x:hidden
   2. Comparison section: leafy bg too visible — replace with clean green
   3. Make the comparison section match the reference exactly
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1: REMOVE overflow-x: hidden FROM HTML/BODY
   This was killing the EMI marquee 100vw breakout technique.
   Replace with overflow-x: clip (modern browsers) which allows
   100vw children to extend beyond parent without scrollbar.
   ═══════════════════════════════════════════════════════════ */

html {
  overflow-x: clip !important;
}

body {
  overflow-x: clip !important;
}


/* Force the marquee to be edge-to-edge using fresh CSS */


/* Ensure parent containers allow the marquee to breakout */
.hero,
.hero.section,
.hero-card,
.hero-card--split {
  overflow-x: visible !important;
}


/* ═══════════════════════════════════════════════════════════
   FIX 2: COMPARISON SECTION — Clean dark green, no leafy image
   The reference (Image 3) shows clean solid dark green.
   Currently the leaf image is showing through and making the
   section look busy. Hide the image, use solid green.
   ═══════════════════════════════════════════════════════════ */






/* ═══════════════════════════════════════════════════════════
   FIX 3: WOMAN/CHARACTER IMAGE — Make it bigger, more prominent
   Match the reference where she fills nearly full height
   ═══════════════════════════════════════════════════════════ */






/* ═══════════════════════════════════════════════════════════
   FIX 4: VS BADGE — Position higher (above woman's head area)
   In the reference, VS sits at top-third area, not dead center
   ═══════════════════════════════════════════════════════════ */




/* ═══════════════════════════════════════════════════════════
   FIX 5: COMPARISON GRID — Slightly tighter for better composition
   ═══════════════════════════════════════════════════════════ */




/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) and (min-width: 969px) {
  

  

  
}

@media (max-width: 968px) {
  

  

  

  
}


/* ═══════════════════════════════════════════════════════════════
   EMI MARQUEE — SINGLE AUTHORITATIVE RULE (v8 — May 7, 2026)
   All previous .emi-marquee rules were stripped.
   This is the ONE source of truth.
   ═══════════════════════════════════════════════════════════════ */

/* The marquee container — full viewport width edge-to-edge */
.emi-marquee {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;

  margin-top: 28px;
  padding: 14px 0;
  overflow: hidden;
  box-sizing: border-box;

  background: rgba(255, 250, 240, 0.85);
  border-top: 1px solid rgba(229, 198, 109, 0.32);
  border-bottom: 1px solid rgba(229, 198, 109, 0.32);

  /* Explicitly NO mask gradient — banks visible all the way to edges */
}

/* The scrolling track */
.emi-marquee__track {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  width: max-content;
  min-width: max-content;
  animation: emi-scroll 36s linear infinite;
  padding: 0;
}

/* Pause animation on hover */
.emi-marquee:hover .emi-marquee__track {
  animation-play-state: paused;
}

/* Individual bank items */
.emi-marquee__item {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--graphite);
  flex-shrink: 0;
}

/* Highlighted "EMI Available" text */
.emi-marquee__item strong {
  color: var(--gold-dark);
  font-weight: 800;
}

/* Separator dots */
.emi-marquee__sep {
  color: var(--gold-dark);
  font-weight: 700;
  opacity: 0.5;
  flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 968px) {
  .emi-marquee {
    margin-top: 22px;
    padding: 12px 0;
  }

  .emi-marquee__track {
    animation-duration: 28s;
  }

  .emi-marquee__item {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .emi-marquee {
    margin-top: 20px;
    padding: 11px 0;
  }

  .emi-marquee__item {
    font-size: 11.5px;
  }
}

/* CRITICAL: Allow parent containers to overflow so the 100vw marquee can extend */
.hero,
.hero.section,
.hero-card,
.hero-card--split {
  overflow-x: visible !important;
}

/* And html/body must use clip (not hidden) so children with 100vw work */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4: THE DIFFERENCE — Clean rebuild (May 7, 2026)
   Fresh CSS, no legacy conflicts.
   Layout: Solid dark green bg · 2 cards · VS badge · Character image
   ═══════════════════════════════════════════════════════════════ */


/* ─────────── SECTION CONTAINER ─────────── */

.difference {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 100px 20px 110px;
  overflow: hidden;
  isolation: isolate;

  /* SOLID dark green — no leafy image, no busy texture */
  background:
    radial-gradient(ellipse at top left, rgba(20, 80, 60, 0.45), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(7, 32, 24, 0.55), transparent 55%),
    linear-gradient(135deg, #144938 0%, #1a5742 50%, #144938 100%);
}


/* ─────────── HEADING ─────────── */

.difference__heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

.difference__heading .eyebrow {
  color: var(--gold, #e5c66d);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}

.difference__heading h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.18;
  font-weight: 600;
  color: #fffaf0;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.difference__heading-gold {
  color: var(--gold, #e5c66d);
  font-style: italic;
  display: block;
  margin-top: 4px;
}

.difference__heading p {
  font-family: var(--sans);
  font-size: 16px;
  color: rgba(255, 250, 240, 0.78);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}


/* ─────────── GRID LAYOUT (2 cards + center column for character) ─────────── */

.difference__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) minmax(0, 1fr);
  gap: 0;
  max-width: 1320px;
  margin: 0 auto;
  z-index: 2;
}


/* ─────────── CARD (left + right) ─────────── */

.difference__card {
  position: relative;
  z-index: 2;
  padding: 32px 28px;
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.97);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229, 198, 109, 0.25);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.difference__card--bad {
  grid-column: 1;
  margin-right: -20px;
}

.difference__card--good {
  grid-column: 3;
  margin-left: -20px;
  background: linear-gradient(150deg, rgba(255, 250, 240, 0.99), rgba(255, 248, 225, 0.97));
  border-color: rgba(229, 198, 109, 0.5);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(229, 198, 109, 0.18) inset;
}

.difference__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.40);
}


/* ─────────── CARD HEADER ─────────── */

.difference__card-header {
  border-bottom: 1px solid rgba(37, 39, 34, 0.10);
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.difference__card-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite-soft, #4a4d44);
  background: rgba(150, 150, 150, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.difference__card-label--gold {
  color: var(--gold-dark, #a47a2d);
  background: rgba(229, 198, 109, 0.18);
}

.difference__card-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--black, #0d1612);
  margin: 0;
  letter-spacing: -0.01em;
}

.difference__card-title--gold {
  color: #0f3f31;
}


/* ─────────── LIST OF SUB-ITEMS ─────────── */

.difference__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.difference__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  border-left: 3px solid rgba(150, 150, 150, 0.4);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.difference__card--good .difference__item {
  background: rgba(229, 198, 109, 0.10);
  border-left-color: var(--gold, #e5c66d);
}

.difference__card--good .difference__item:hover {
  background: rgba(229, 198, 109, 0.16);
  border-left-color: var(--gold-dark, #a47a2d);
}

.difference__card--bad .difference__item:hover {
  background: rgba(255, 255, 255, 0.7);
}

.difference__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--graphite-soft, #4a4d44);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  border: 1px solid rgba(37, 39, 34, 0.08);
}

.difference__card--good .difference__num {
  color: var(--gold-dark, #a47a2d);
  background: rgba(255, 250, 240, 0.95);
  border-color: rgba(229, 198, 109, 0.5);
}

.difference__body {
  flex: 1;
  min-width: 0;
}

.difference__body h4 {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--black, #0d1612);
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}

.difference__body p {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--graphite-soft, #4a4d44);
  line-height: 1.5;
  margin: 0;
}


/* ─────────── VS BADGE — sits in center column, top area ─────────── */

.difference__vs {
  position: absolute;
  left: 50%;
  top: 220px;             /* below heading, above woman's head */
  transform: translateX(-50%);
  z-index: 5;

  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 999px;

  background: rgba(13, 22, 18, 0.96);
  border: 2px solid var(--gold, #e5c66d);

  box-shadow:
    0 18px 42px rgba(7, 19, 15, 0.55),
    0 0 0 6px rgba(13, 22, 18, 0.4),
    inset 0 0 0 1px rgba(229, 198, 109, 0.3);

  pointer-events: none;
}

.difference__vs span {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold, #e5c66d);
}


/* ─────────── CHARACTER IMAGE — center column, fills bottom ─────────── */

.difference__character {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;

  width: min(420px, 32vw);
  height: auto;
  pointer-events: none;
  user-select: none;
  margin: 0;
}

.difference__character img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.45));
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1180px and >968px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) and (min-width: 969px) {
  .difference__grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
    max-width: 1100px;
  }

  .difference__vs {
    width: 70px;
    height: 70px;
    top: 200px;
  }

  .difference__vs span {
    font-size: 22px;
  }

  .difference__character {
    width: min(300px, 28vw);
  }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤968px)
   Cards stack, character hidden, VS becomes a divider chip
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  .difference {
    padding: 70px 16px 80px;
  }

  .difference__heading {
    margin-bottom: 36px;
  }

  .difference__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 640px;
  }

  .difference__card--bad,
  .difference__card--good {
    grid-column: 1;
    margin: 0;
  }

  /* Hide character on mobile */
  .difference__character {
    display: none;
  }

  /* VS becomes a smaller chip between cards */
  .difference__vs {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .difference__vs span {
    font-size: 18px;
  }
}


@media (max-width: 640px) {
  .difference {
    padding: 56px 14px 70px;
  }

  .difference__card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .difference__card-title {
    font-size: 22px;
  }

  .difference__list {
    gap: 12px;
  }

  .difference__item {
    padding: 12px 14px;
    gap: 12px;
  }

  .difference__num {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .difference__body h4 {
    font-size: 14.5px;
  }

  .difference__body p {
    font-size: 12.5px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   EMI MARQUEE — Final fix for "content gap" issue (May 7, 2026)
   The track must duplicate items + animate by exactly half its width
   so when one set scrolls off, the duplicate set is already visible.
   ═══════════════════════════════════════════════════════════════ */

@keyframes emi-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* ═══════════════════════════════════════════════════════════════
   DIFFERENCE SECTION — COMPACT TWEAKS (May 7, 2026 v10)
   1. Removed VS badge entirely (styles + HTML)
   2. Reduced section padding (was 100px → 70px)
   3. Tighter heading margin (was 60px → 36px)
   4. Tighter card padding + gap between items
   ═══════════════════════════════════════════════════════════════ */


/* Hide VS badge if any leftover styles try to render it */
.difference__vs {
  display: none !important;
}


/* Compact section padding */
.difference {
  padding: 70px 20px 80px !important;
}


/* Tighter heading */
.difference__heading {
  margin: 0 auto 36px !important;
}

.difference__heading h2 {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  margin: 0 0 12px !important;
}

.difference__heading p {
  font-size: 15px !important;
}


/* Tighter cards */
.difference__card {
  padding: 24px 22px !important;
}


/* Tighter card header */
.difference__card-header {
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}

.difference__card-title {
  font-size: clamp(20px, 2.2vw, 26px) !important;
}


/* Tighter list items */
.difference__list {
  gap: 10px !important;
}

.difference__item {
  padding: 11px 14px !important;
  gap: 12px !important;
}

.difference__num {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}

.difference__body h4 {
  font-size: 14.5px !important;
  line-height: 1.3 !important;
  margin: 0 0 3px !important;
}

.difference__body p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}


/* Character image — adjust position since VS is gone (more centered now) */
.difference__character {
  width: min(380px, 28vw) !important;
}


/* Mobile compact */
@media (max-width: 968px) {
  .difference {
    padding: 50px 16px 60px !important;
  }

  .difference__heading {
    margin-bottom: 28px !important;
  }

  .difference__card {
    padding: 20px 16px !important;
  }
}

@media (max-width: 640px) {
  .difference {
    padding: 40px 14px 50px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ROUND 11 — May 7 2026
   1. Walkthrough section: green background, full-width, mobile responsive
   2. Farmer section: replace dark green with same softer green (no image)
   3. Gallery: continuous left-scroll marquee (infinite loop)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1: WALKTHROUGH SECTION — Green bg + full-width
   Same green palette as the .difference section
   ═══════════════════════════════════════════════════════════ */

.walkthrough {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 80px 20px 90px;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  /* Same green gradient as Section 4 (.difference) */
  background:
    radial-gradient(ellipse at top left, rgba(20, 80, 60, 0.45), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(7, 32, 24, 0.55), transparent 55%),
    linear-gradient(135deg, #144938 0%, #1a5742 50%, #144938 100%);
}

/* Heading on green bg — light text */
.walkthrough .section-heading .eyebrow {
  color: var(--gold, #e5c66d) !important;
}

.walkthrough .section-heading h2 {
  color: #fffaf0 !important;
}

.walkthrough .section-heading p {
  color: rgba(255, 250, 240, 0.78) !important;
}

/* Walk grid — keep 2 columns on desktop */
.walkthrough .walk-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

/* Plan stage image — keep its frame, ensure it sits well on green */
.walkthrough .plan-stage {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  background: rgba(255, 250, 240, 0.04);
}

.walkthrough .plan-stage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Walk steps — bright glassy cards on green bg */
.walkthrough .walk-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.walkthrough .walk-step {
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(229, 198, 109, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  opacity: 0.7;
}

.walkthrough .walk-step.active {
  background: linear-gradient(150deg, rgba(255, 250, 240, 0.99), rgba(255, 248, 225, 0.97));
  border-color: rgba(229, 198, 109, 0.6);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(229, 198, 109, 0.25) inset;
  opacity: 1;
}

.walkthrough .walk-step b {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--black, #0d1612);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.walkthrough .walk-step p {
  font-size: 14px;
  color: var(--graphite-soft, #4a4d44);
  line-height: 1.55;
  margin: 0;
}


/* Mobile responsive */
@media (max-width: 968px) {
  .walkthrough {
    padding: 60px 16px 70px;
  }

  .walkthrough .walk-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 600px;
  }

  .walkthrough .plan-stage {
    border-radius: 16px;
  }

  .walkthrough .plan-stage img {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .walkthrough {
    padding: 48px 14px 56px;
  }

  .walkthrough .walk-grid {
    gap: 24px;
  }

  .walkthrough .walk-step {
    padding: 18px 20px;
    border-radius: 14px;
  }

  .walkthrough .walk-step b {
    font-size: 16px;
  }

  .walkthrough .walk-step p {
    font-size: 13px;
  }
}


/* ═══════════════════════════════════════════════════════════
   FIX 2: FARMER SECTION — Solid green (remove leaf image)
   Same color as Walkthrough + Difference sections for unity
   ═══════════════════════════════════════════════════════════ */

.farmer-section.farmer-section--prominent::before {
  /* Remove the leafy image — use only the gradient */
  background-image:
    radial-gradient(ellipse at top left, rgba(20, 80, 60, 0.45), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(7, 32, 24, 0.55), transparent 55%),
    linear-gradient(135deg, #144938 0%, #1a5742 50%, #144938 100%) !important;
  background-color: #144938 !important;
}


/* ═══════════════════════════════════════════════════════════
   FIX 3: GALLERY — Continuous left-scroll marquee
   Images keep moving left in an infinite loop
   ═══════════════════════════════════════════════════════════ */

/* Container — hide overflow, no scroll bar */
.gallery-rail-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 16px 0;
}

/* The viewport — also hides overflow */
.image-rail.image-rail--marquee {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  scroll-behavior: auto !important;
}

/* The track — flexbox, animated to scroll left infinitely */
.image-rail--marquee .image-rail__track {
  display: flex;
  gap: 18px;
  width: max-content;
  align-items: stretch;
  animation: gallery-marquee 40s linear infinite;
  will-change: transform;
}

/* Pause on hover for desktop */
.gallery-rail-wrap:hover .image-rail__track,
.image-rail--marquee:hover .image-rail__track {
  animation-play-state: paused;
}

/* Individual images — fixed size, no shrinking */
.image-rail--marquee .image-rail__track img {
  flex-shrink: 0;
  width: clamp(280px, 38vw, 540px);
  height: clamp(220px, 28vw, 380px);
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(7, 19, 15, 0.18);
  display: block;
  transition: transform 0.5s ease;
}

.image-rail--marquee .image-rail__track img:hover {
  transform: scale(1.02);
}

/* Hide the prev/next arrow buttons — not needed for auto-marquee */
.gallery-rail-wrap .gallery-arrow {
  display: none !important;
}

/* The infinite scroll keyframes */
@keyframes gallery-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* Mobile — smaller images, faster scroll */
@media (max-width: 968px) {
  .image-rail--marquee .image-rail__track {
    gap: 14px;
    animation-duration: 30s;
  }

  .image-rail--marquee .image-rail__track img {
    width: clamp(240px, 60vw, 380px);
    height: clamp(180px, 42vw, 260px);
    border-radius: 14px;
  }
}

@media (max-width: 640px) {
  .image-rail--marquee .image-rail__track {
    gap: 12px;
    animation-duration: 26s;
  }

  .image-rail--marquee .image-rail__track img {
    width: clamp(220px, 70vw, 320px);
    height: clamp(160px, 48vw, 220px);
    border-radius: 12px;
  }
}


/* Reduced motion accessibility — pause animation */
@media (prefers-reduced-motion: reduce) {
  .image-rail--marquee .image-rail__track {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ROUND 12 — May 7 2026
   1. NABL certification badge in hero side image (top-right corner)
   2. Gallery lightbox — full-screen image viewer with arrows
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   NABL BADGE — Floating in top-right of hero side image
   ═══════════════════════════════════════════════════════════ */

.hero__visual {
  position: relative;
}

.hero__nabl-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  width: clamp(72px, 9vw, 120px);
  height: auto;
  z-index: 4;

  background: rgba(255, 250, 240, 0.96);
  border-radius: 50%;
  padding: 10px;
  box-shadow:
    0 12px 28px rgba(7, 19, 15, 0.22),
    0 0 0 1px rgba(229, 198, 109, 0.32);

  /* Override any global img max-width so badge stays small */
  max-width: none !important;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero__nabl-badge:hover {
  transform: scale(1.06);
  box-shadow:
    0 16px 36px rgba(7, 19, 15, 0.30),
    0 0 0 1px rgba(229, 198, 109, 0.55);
}

@media (max-width: 968px) {
  .hero__nabl-badge {
    top: 14px;
    right: 14px;
    width: 64px;
    padding: 8px;
  }
}

@media (max-width: 640px) {
  .hero__nabl-badge {
    top: 12px;
    right: 12px;
    width: 56px;
    padding: 6px;
  }
}


/* ═══════════════════════════════════════════════════════════
   GALLERY LIGHTBOX — Full-screen image viewer
   ═══════════════════════════════════════════════════════════ */

/* Make gallery images look clickable */
.image-rail--marquee .image-rail__track img {
  cursor: zoom-in;
  user-select: none;
}


/* Lightbox container — fullscreen overlay */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(7, 19, 15, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}


/* Stage — holds the current image */
.lightbox__stage {
  position: relative;
  width: min(90vw, 1400px);
  height: min(82vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);

  /* Smooth fade-in when image changes */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox__image.is-loaded {
  opacity: 1;
}


/* Close button — top right */
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;

  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;

  background: rgba(255, 250, 240, 0.12);
  border: 1px solid rgba(229, 198, 109, 0.4);
  border-radius: 50%;
  color: #fffaf0;
  cursor: pointer;

  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.lightbox__close:hover {
  background: rgba(255, 250, 240, 0.22);
  border-color: var(--gold, #e5c66d);
  transform: rotate(90deg);
}

.lightbox__close svg {
  width: 22px;
  height: 22px;
}


/* Navigation arrows (prev / next) */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;

  background: rgba(255, 250, 240, 0.12);
  border: 1px solid rgba(229, 198, 109, 0.4);
  border-radius: 50%;
  color: #fffaf0;
  cursor: pointer;

  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.lightbox__nav:hover {
  background: rgba(255, 250, 240, 0.22);
  border-color: var(--gold, #e5c66d);
}

.lightbox__nav--prev {
  left: 24px;
}

.lightbox__nav--prev:hover {
  transform: translateY(-50%) translateX(-3px);
}

.lightbox__nav--next {
  right: 24px;
}

.lightbox__nav--next:hover {
  transform: translateY(-50%) translateX(3px);
}

.lightbox__nav svg {
  width: 26px;
  height: 26px;
}


/* Counter — bottom center */
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);

  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 250, 240, 0.85);

  background: rgba(7, 19, 15, 0.55);
  border: 1px solid rgba(229, 198, 109, 0.3);
  border-radius: 999px;
  padding: 8px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox__counter span {
  color: var(--gold, #e5c66d);
  font-weight: 700;
}


/* Pause body scroll when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}


/* Mobile lightbox adjustments */
@media (max-width: 768px) {
  .lightbox__stage {
    width: 94vw;
    height: 70vh;
  }

  .lightbox__close {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }

  .lightbox__nav {
    width: 44px;
    height: 44px;
  }

  .lightbox__nav--prev {
    left: 12px;
  }

  .lightbox__nav--next {
    right: 12px;
  }

  .lightbox__nav svg {
    width: 22px;
    height: 22px;
  }

  .lightbox__counter {
    bottom: 16px;
    font-size: 12px;
    padding: 6px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO IMPACT NUMBER FONT UPDATE
   User request: change font for ₹0, 70ft, 90%, 100%, 1000K+, 45+
   ═══════════════════════════════════════════════════════════ */

.hero .impact-stat__number,
.hero .impact-stat__number .impact-stat__unit {
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

.hero .impact-stat__number {
  font-size: clamp(24px, 2.3vw, 34px) !important;
}

@media (max-width: 640px) {
  .hero .impact-stat__number {
    font-size: 22px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ROUND 14 — COLLAPSE FIX
   1. NABL logo stays small and never covers hero family image
   2. Gallery becomes stable snap carousel + fullscreen lightbox
   3. Keeps previous hero number font update
   ═══════════════════════════════════════════════════════════ */

html,
body {
  overflow-x: hidden;
}

.hero__visual {
  position: relative !important;
  overflow: hidden !important;
}

.hero__visual .hero__family-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

.hero__visual img.hero__nabl-badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 8 !important;

  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;

  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: 1 / 1 !important;

  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 240, 0.98) !important;
  border: 1px solid rgba(229, 198, 109, 0.55) !important;
  box-shadow: 0 12px 28px rgba(7, 19, 15, 0.26) !important;
  transform: none !important;
}

.hero__visual:hover img.hero__nabl-badge {
  transform: scale(1.04) !important;
}

@media (max-width: 968px) {
  .hero__visual img.hero__nabl-badge {
    top: 14px !important;
    right: 14px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 7px !important;
  }
}

@media (max-width: 640px) {
  .hero__visual img.hero__nabl-badge {
    top: 12px !important;
    right: 12px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 6px !important;
  }
}

.gallery-rail-wrap {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  overflow: visible !important;
  padding: 18px 54px 24px !important;
}

.image-rail.image-rail--snap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.image-rail.image-rail--snap::-webkit-scrollbar {
  display: none !important;
}

.image-rail--snap .image-rail__track {
  display: flex !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: max-content !important;
  min-width: 100% !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.image-rail--snap .image-rail__track img {
  flex: 0 0 clamp(300px, 38vw, 540px) !important;
  width: clamp(300px, 38vw, 540px) !important;
  height: clamp(230px, 27vw, 380px) !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px !important;
  scroll-snap-align: center !important;
  cursor: zoom-in !important;
  box-shadow: 0 14px 36px rgba(7, 19, 15, 0.18) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.image-rail--snap .image-rail__track img:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 18px 42px rgba(7, 19, 15, 0.22) !important;
}

.gallery-rail-wrap .gallery-arrow {
  display: grid !important;
  place-items: center !important;
  z-index: 4 !important;
}

.gallery-rail-wrap .gallery-arrow:disabled {
  opacity: 0.36 !important;
  cursor: not-allowed !important;
}

@media (max-width: 968px) {
  .gallery-rail-wrap {
    padding-inline: 42px !important;
  }

  .image-rail--snap .image-rail__track {
    gap: 16px !important;
  }

  .image-rail--snap .image-rail__track img {
    flex-basis: clamp(260px, 70vw, 430px) !important;
    width: clamp(260px, 70vw, 430px) !important;
    height: clamp(190px, 48vw, 300px) !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 640px) {
  .gallery-rail-wrap {
    padding-inline: 0 !important;
    overflow: hidden !important;
  }

  .gallery-rail-wrap .gallery-arrow {
    display: none !important;
  }

  .image-rail.image-rail--snap {
    padding-inline: 18px !important;
  }

  .image-rail--snap .image-rail__track {
    gap: 14px !important;
  }

  .image-rail--snap .image-rail__track img {
    flex-basis: 82vw !important;
    width: 82vw !important;
    height: 62vw !important;
    max-height: 260px !important;
    border-radius: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SITE LOCATION SECTION — Above footer (May 18, 2026)
   Clean two-column layout: address details + embedded Google Map
   ═══════════════════════════════════════════════════════════════ */

.site-location {
  position: relative;
  width: 100%;
  padding: 80px 20px 90px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 250, 240, 0.65), transparent 38%),
    radial-gradient(circle at 78% 78%, rgba(229, 198, 109, 0.18), transparent 42%),
    linear-gradient(150deg, #f7f6f0 0%, #ece9d8 100%);
  overflow: hidden;
}

.site-location__inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* ─────────── Heading ─────────── */
.site-location__heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.site-location__heading .eyebrow {
  color: var(--gold-dark, #a47a2d);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.site-location__heading h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--black, #0d1612);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.site-location__heading p {
  font-size: 16px;
  color: var(--graphite-soft, #4a4d44);
  line-height: 1.55;
  margin: 0;
}

/* ─────────── Two-column layout ─────────── */
.site-location__content {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}

/* ─────────── Left: details card ─────────── */
.site-location__details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 28px;
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.95);
  border: 1px solid rgba(229, 198, 109, 0.32);
  box-shadow: 0 18px 44px rgba(7, 19, 15, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-location__address {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.site-location__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(229, 198, 109, 0.16);
  color: var(--gold-dark, #a47a2d);
}

.site-location__icon svg {
  width: 22px;
  height: 22px;
}

.site-location__address-text h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--black, #0d1612);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.site-location__address-text p {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--graphite-soft, #4a4d44);
  line-height: 1.55;
  margin: 0;
}

/* Buttons row */
.site-location__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.site-location__buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

/* Ghost-dark variant in case it doesn't exist */
.btn--ghost-dark {
  background: transparent;
  color: var(--black, #0d1612);
  border: 1.5px solid rgba(13, 22, 18, 0.25);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.btn--ghost-dark:hover {
  background: rgba(13, 22, 18, 0.06);
  border-color: rgba(13, 22, 18, 0.5);
  transform: translateY(-2px);
}

/* Quick info rows */
.site-location__quick-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 22, 18, 0.08);
}

.site-location__info-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.site-location__info-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-soft, #4a4d44);
  flex-shrink: 0;
}

.site-location__info-value {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black, #0d1612);
  text-align: right;
}

/* ─────────── Right: map (clickable) ─────────── */
.site-location__map {
  position: relative;
  display: block;
  min-height: 460px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(13, 22, 18, 0.04);
  box-shadow: 0 18px 44px rgba(7, 19, 15, 0.14);
  border: 1px solid rgba(229, 198, 109, 0.28);
  text-decoration: none;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.site-location__map:hover {
  box-shadow: 0 28px 60px rgba(7, 19, 15, 0.22);
  transform: translateY(-3px);
}

.site-location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Map hover overlay */
.site-location__map-overlay {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(13, 22, 18, 0.92);
  color: var(--gold, #e5c66d);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(229, 198, 109, 0.55);
  box-shadow: 0 14px 34px rgba(7, 19, 15, 0.30);
  pointer-events: none;
  transition: transform 0.4s ease;
}

.site-location__map:hover .site-location__map-overlay {
  transform: translateX(-50%) translateY(-4px);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  .site-location {
    padding: 60px 16px 70px;
  }

  .site-location__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-location__map {
    min-height: 380px;
    order: -1;
  }

  .site-location__heading {
    margin-bottom: 32px;
  }
}

@media (max-width: 640px) {
  .site-location {
    padding: 48px 14px 56px;
  }

  .site-location__details {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .site-location__address-text h3 {
    font-size: 18px;
  }

  .site-location__address-text p {
    font-size: 13.5px;
  }

  .site-location__buttons {
    flex-direction: column;
    gap: 10px;
  }

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

  .site-location__info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .site-location__info-value {
    text-align: left;
  }

  .site-location__map {
    min-height: 320px;
    border-radius: 18px;
  }

  .site-location__map-overlay {
    bottom: 16px;
    padding: 10px 18px;
    font-size: 12px;
  }
}