/* ============================================================
   Greens.ly — Greenhouses  ·  Front-end stylesheet
   Single-model store: World's Most Popular Polycarbonate Greenhouse
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — industrial green + safety yellow + equipment black */
  --green-950: #142310;
  --green-900: #234D1B;
  --green-800: #2C641F;
  --green-700: #367C2B;   /* logo green */
  --green-600: #3E8C31;
  --green-cta: #367C2B;   /* action green */
  --green-cta-dark: #275A1F;
  --green-100: #EEF1EB;   /* light neutral section background */
  --green-50:  #F6F7F4;

  --gold-500: #FFDE00;    /* safety yellow */
  --gold-600: #E0C300;
  --gold-bg:  #FFF6C9;

  --red-sale: #C43D2B;
  --amber-warn: #8A7500;

  --black: #1A1C19;       /* equipment black */

  --ink-900: #1A1C19;
  --ink-700: #333F30;
  --ink-500: #5B6657;
  --ink-300: #667162;

  --paper: #FFFFFF;
  --line: #E2E5DF;

  --radius-s: 3px;
  --radius-m: 5px;
  --radius-l: 8px;

  --shadow-card: 0 2px 8px rgba(20, 35, 16, .08);
  --shadow-pop: 0 12px 34px rgba(20, 35, 16, .18);
  --shadow-offset: 0 2px 8px rgba(20, 35, 16, .08);   /* flat utility shadow */

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--green-950); line-height: 1.12; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.section { padding: 72px 0; }
.section--tint { background: var(--green-100); }
.section--dark { background: var(--black); color: #E9EAE6; }
.section--dark h2, .section--dark h3 { color: #fff; }

.slab-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 42px);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
  color: var(--ink-900);
}
.slab-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  background: var(--gold-500);
  margin: 14px auto 0;
}
.slab-title .hl {
  background: var(--gold-500);
  color: var(--black);
  padding: 1px 12px 3px;
  border-radius: 2px;
  white-space: nowrap;
}
.slab-title .hl--gold { background: var(--gold-500); color: var(--black); }
.section-sub {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 44px;
  color: var(--ink-500);
  font-size: 18px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius-m);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none !important;
}
.btn--primary {
  background: var(--green-cta);
  color: #fff;
}
.btn--primary:hover { background: var(--green-800); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); }
.btn--gold {
  background: var(--gold-500);
  color: var(--black);
}
.btn--gold:hover { background: #FFE83A; }
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.75);
}
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline {
  background: #fff;
  color: var(--green-800);
  border: 2px solid var(--green-700);
}
.btn--outline:hover { background: var(--green-50); }
.btn--lg { font-size: 21px; padding: 16px 34px; }
.btn--md { font-size: 18px; padding: 12px 24px; }
.btn--sm { font-size: 15px; padding: 8px 16px; }
.btn--block { width: 100%; }

/* ---------- Announcement bar ---------- */
.annbar {
  background: var(--black);
  color: #F2F2EF;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14.5px;
  letter-spacing: .04em;
}
.annbar__track {
  display: inline-flex;
  padding: 9px 0;
  animation: marquee 30s linear infinite;
  will-change: transform;
}
.annbar:hover .annbar__track { animation-play-state: paused; }
.annbar__half { display: inline-flex; gap: 48px; padding-right: 48px; }
.annbar__half span { display: inline-flex; align-items: center; gap: 10px; }
.annbar__half .dot { color: var(--gold-500); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .annbar__track { animation: none; }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header__in {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 12px 20px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.header__logo { flex-shrink: 0; }
.header__logo img { height: 44px; width: auto; }
.header__nav { display: flex; gap: 24px; margin-left: 4px; }
.header__nav a {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.header__nav a:hover { color: var(--green-700); text-decoration: none; }
.header__spacer { flex: 1; }
.header__phone {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green-800);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}
.header__phone:hover { text-decoration: none; }
.header__phone .ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green-100);
  display: grid;
  place-items: center;
  color: var(--green-700);
  flex-shrink: 0;
}
.header__phone small { display: block; font-weight: 500; color: var(--ink-500); font-size: 11.5px; letter-spacing: .02em; }
.header__cta { white-space: nowrap; }
.header__burger { display: none; background: none; border: 0; padding: 6px; }
.header__burger svg { width: 26px; height: 26px; color: var(--green-900); }

/* mobile nav drawer */
.mobnav { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(20,48,15,.5); }
.mobnav.open { display: block; }
.mobnav__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(330px, 90vw);
  height: 100%;
  background: #fff;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobnav__panel nav { display: flex; flex-direction: column; }
.mobnav__panel nav a {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-900);
  padding: 13px 6px;
  border-bottom: 1px solid var(--line);
}
.mobnav__close { align-self: flex-end; background: none; border: 0; font-size: 28px; color: var(--ink-500); line-height: 1; }
.mobnav__panel .btn { margin-top: 18px; }
.mobnav__phone { margin-top: 16px; text-align: center; font-weight: 700; color: var(--green-800); }

/* ---------- Pre-order status strip ---------- */
.status-strip {
  background: var(--gold-500);
  border-bottom: 0;
  font-size: 15px;
  color: var(--black);
}
.status-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 20px;
  text-align: center;
  flex-wrap: wrap;
}
.status-strip b { color: #000; }
.status-strip .pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--black);
  flex-shrink: 0;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(26,28,25,.45); }
  70% { box-shadow: 0 0 0 8px rgba(26,28,25,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,28,25,0); }
}

/* ---------- Hero (landing) ---------- */
.hero { background: var(--green-900); color: #fff; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  max-width: var(--wrap);
  margin: 0 auto;
}
.hero__copy { padding: 64px 40px 56px 20px; display: flex; flex-direction: column; justify-content: center; }
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.hero__title .accent { color: var(--gold-500); display: block; }
.hero__sub { font-size: 19px; color: #D9EAD4; max-width: 46ch; margin-bottom: 28px; }
.hero__sub b { color: #fff; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: 24px;
}
.hero__stat { flex: 1; text-align: center; padding: 0 12px; }
.hero__stat + .hero__stat { border-left: 1px solid rgba(255,255,255,.25); }
.hero__stat svg { width: 40px; height: 40px; margin: 0 auto 8px; color: #fff; }
.hero__stat b { display: block; font-family: var(--font-head); font-size: 19px; letter-spacing: .04em; }
.hero__stat span { font-size: 13px; color: #BCD8B4; text-transform: uppercase; letter-spacing: .08em; }
.hero__media { position: relative; min-height: 420px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; position: absolute; inset: 0; }

/* ---------- Product spotlight (landing) ---------- */
.spotlight {
  background: #fff;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.spotlight__media { position: relative; min-height: 380px; }
.spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.badge-floating {
  position: absolute;
  top: 16px; left: 16px;
  display: flex;
  gap: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pill--red { background: var(--black); color: var(--gold-500); }
.pill--gold { background: var(--gold-500); color: var(--black); }
.pill--green { background: #DCF3D4; color: var(--green-800); }
.pill--dark { background: var(--green-900); color: #fff; }
.pill--soldout { background: #EEE; color: #888; text-decoration: line-through; }
.spotlight__body { padding: 34px 36px; }
.spotlight__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.price-row .now { font-size: 32px; font-weight: 800; color: var(--green-800); }
.price-row .was { font-size: 19px; color: var(--ink-300); text-decoration: line-through; }
.save-tag {
  border: 1.5px solid var(--red-sale);
  color: var(--red-sale);
  border-radius: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  padding: 3px 10px;
}
.spotlight__desc { color: var(--ink-500); margin: 8px 0 18px; }
.spec-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: 14px;
}
.spec-strip div { padding: 13px 10px; text-align: center; }
.spec-strip div + div { border-left: 1px solid var(--line); }
.spec-strip b { display: block; font-size: 20px; color: var(--green-800); font-family: var(--font-head); letter-spacing: .03em; }
.spec-strip span { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-300); }
.spotlight__lengths { font-size: 15px; color: var(--ink-500); margin-bottom: 16px; }
.preorder-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--gold-bg);
  border: 1px solid #EFE18A;
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-size: 15px;
  color: #4A3F00;
  margin-bottom: 18px;
}
.preorder-note b { color: #332B00; }
.preorder-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ---------- Feature split (built to survive) ---------- */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.split__media { border-radius: var(--radius-m); overflow: hidden; position: relative; }
.split__media img { width: 100%; }
.split__media .img-top { border-radius: var(--radius-m) var(--radius-m) 0 0; }
.split__stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: linear-gradient(transparent, rgba(26,28,25,.94) 55%);
  padding: 52px 24px 16px;
}
.split__stats div { flex: 1; text-align: center; }
.split__stats div + div { border-left: 1px solid rgba(255,255,255,.28); }
.split__stats b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--gold-500); line-height: 1.1; }
.split__stats span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #E9EAE6; }
.feature-row { display: flex; gap: 18px; padding: 20px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row .ic {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-m);
  background: #DFEFDC;
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.feature-row .ic svg { width: 26px; height: 26px; }
.feature-row h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.feature-row p { margin: 0; color: var(--ink-500); font-size: 16px; }

/* ---------- Pre-order timeline ---------- */
.timeline { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; }
.tl-step {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 24px 22px 20px;
  position: relative;
}
.tl-step__num {
  counter-increment: step;
  position: absolute;
  top: -18px; left: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--black);
  border: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold-500);
}
.tl-step__num::before { content: counter(step); }
.tl-step h3 { font-family: var(--font-head); font-size: 20px; letter-spacing: .05em; text-transform: uppercase; margin: 8px 0 2px; }
.tl-step .dates { font-size: 14px; font-weight: 700; color: var(--green-700); margin-bottom: 8px; display: block; }
.tl-step p { font-size: 15px; color: var(--ink-500); margin: 0; }
.countdown-bar {
  margin: 40px auto 0;
  max-width: 720px;
  background: var(--black);
  color: #F2F2EF;
  border-radius: var(--radius-m);
  border-left: 6px solid var(--gold-500);
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
.countdown-bar b { color: var(--gold-500); }
.countdown-bar .clock {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .08em;
  background: rgba(255,222,0,.12);
  color: var(--gold-500);
  border-radius: 6px;
  padding: 4px 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Stat cards (365 days / 200x / 20F) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.stat-card .stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  color: var(--green-700);
  line-height: 1;
}
.stat-card .stat-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.stat-card > p { color: var(--ink-500); font-size: 15.5px; }
.stat-card img { border-radius: var(--radius-m); margin: 6px 0 16px; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.why-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); font-weight: 700; margin-bottom: 10px; }
.why-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; color: var(--ink-700); }
.why-item .chip {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #DFEFDC;
  color: var(--green-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.why-item .chip svg { width: 18px; height: 18px; }

/* ---------- Review cards ---------- */
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.stars { color: var(--green-700); font-size: 19px; letter-spacing: 2px; margin-bottom: 8px; }
.review-card h3 { font-family: var(--font-head); font-size: 19px; letter-spacing: .05em; text-transform: uppercase; }
.review-card blockquote { margin: 0 0 14px; color: var(--ink-500); font-size: 15.5px; flex: 1; }
.review-card .who b { display: block; color: var(--green-950); }
.review-card .who span { font-size: 14px; color: var(--ink-300); }
.review-card .verified { color: #1D9BF0; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Owners strip ---------- */
.owners-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 6px 20px 22px;
  scroll-snap-type: x mandatory;
}
.owners-strip::-webkit-scrollbar { height: 10px; }
.owners-strip::-webkit-scrollbar-thumb { background: #BCD8B4; border-radius: 5px; }
.owners-strip img {
  height: 300px;
  width: auto;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ---------- Dark proof section ---------- */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.proof__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 44px);
  text-transform: uppercase;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 18px;
}
.proof__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  background: var(--gold-500);
  margin-top: 16px;
}
.proof__body { color: #C6C9C2; font-size: 17px; }
.proof__chips { display: flex; flex-direction: column; gap: 16px; }
.proof-chip {
  background: #fff;
  color: var(--ink-700);
  border-radius: var(--radius-m);
  padding: 14px 18px;
  box-shadow: var(--shadow-pop);
  max-width: 480px;
}
.proof-chip:nth-child(2) { align-self: flex-end; }
.proof-chip .stars { font-size: 15px; margin-bottom: 4px; }
.proof-chip b { color: var(--ink-900); }
.proof-chip p { margin: 4px 0 0; font-size: 15px; }
.proof-chip .meta { font-size: 13px; color: var(--ink-300); margin-top: 6px; }
.big-stats { display: flex; gap: 34px; margin-top: 26px; flex-wrap: wrap; }
.big-stats div b { font-family: var(--font-display); font-size: 34px; color: var(--gold-500); display: block; line-height: 1; }
.big-stats div span { font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; color: #A9ACA4; }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  font-size: 15.5px;
}
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 14.5px;
  color: var(--ink-500);
  background: #FAFCF9;
}
.compare thead th.us { color: var(--green-800); font-weight: 700; }
.compare td.us { background: #F4FAF2; font-weight: 600; color: var(--ink-900); }
.compare .ok, .compare .no, .compare .meh {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: -6px;
  font-size: 13px;
  font-weight: 800;
}
.compare .ok { background: #DFEFE4; color: #168B54; }
.compare .no { background: #F9E3E2; color: #CC4A46; }
.compare .meh { background: #ECECEC; color: #9A9A9A; }

/* ---------- Climate cards ---------- */
.climate-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.climate-card img { aspect-ratio: 16/11; object-fit: cover; width: 100%; }
.climate-card .body { padding: 20px 22px; }
.climate-card .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-300); font-weight: 700; margin-bottom: 6px; }
.climate-card h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 22px; }
.climate-card p { color: var(--ink-500); font-size: 15.5px; margin: 0; }

/* ---------- Sizes table ---------- */
.sizes-wrap { overflow-x: auto; }
.sizes {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  font-size: 15.5px;
}
.sizes th, .sizes td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sizes tr:last-child td { border-bottom: 0; }
.sizes thead th {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 14px;
  color: var(--ink-500);
  background: #FAFCF9;
}
.sizes .len { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--green-900); white-space: nowrap; }
.sizes .len small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-300); }
.sizes tr.popular td { background: #FFFBE0; }
.sizes .price b { color: var(--green-800); font-size: 17px; }
.sizes .price s { color: var(--ink-300); font-size: 14px; margin-left: 6px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 4px 22px; color: var(--ink-500); max-width: 72ch; }

/* ---------- Need help panel ---------- */
.helpline {
  background: var(--green-50);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold-500);
  border-radius: var(--radius-m);
  text-align: center;
  padding: 52px 28px;
}
.helpline h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 38px); }
.helpline p { color: var(--ink-500); margin-bottom: 24px; }
.helpline .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.helpline .sub { font-size: 14px; color: var(--ink-300); margin: 16px 0 0; }

/* ---------- Footer ---------- */
.footer { background: #151613; color: #C6C9C2; font-size: 15.5px; }
.footer a { color: #E9EAE6; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 60px 0 40px;
}
.footer__brand img { height: 52px; margin-bottom: 16px; }
.footer__brand .tag { color: #fff; font-weight: 700; margin-bottom: 6px; }
.footer__brand p { margin: 0 0 18px; }
.footer h4 {
  color: var(--gold-500);
  font-family: var(--font-head);
  font-size: 14.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #34362F;
  border-radius: 6px;
  background: #1E201C;
  color: #fff;
}
.socials a:hover { border-color: var(--gold-500); }
.socials svg { width: 18px; height: 18px; }
.footer__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 40px; }
.footer-card {
  background: #1E201C;
  border: 1px solid #34362F;
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  padding: 22px 24px;
}
.footer-card .lbl { color: var(--gold-500); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.footer-card .lbl svg { width: 15px; height: 15px; }
.footer-card b { color: #fff; font-size: 17px; display: block; margin-bottom: 4px; }
.footer-card p { margin: 0 0 10px; font-size: 14.5px; }
.footer-card a.cta { color: var(--gold-500); font-family: var(--font-head); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; font-size: 14px; }
.footer__legal {
  border-top: 1px solid #34362F;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 30px;
  font-size: 14px;
  color: #A9ACA4;
}
.footer__legal .links { display: flex; gap: 20px; flex: 1; justify-content: center; flex-wrap: wrap; }
.footer__legal .locale {
  border: 1px solid #34362F;
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #E4EDE2;
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.breadcrumb { padding: 18px 0 4px; font-size: 15px; }
.breadcrumb a { color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; }

.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; padding: 18px 0 60px; align-items: start; }
.pdp > * { min-width: 0; }

/* gallery */
.gallery { position: sticky; top: 96px; }
.gallery__main {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  background: #F2F5F0;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__badge { position: absolute; top: 14px; left: 14px; }
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 2px solid var(--green-800);
  background: rgba(255,255,255,.92);
  color: var(--green-800);
  font-size: 20px;
  display: grid;
  place-items: center;
}
.gallery__nav.prev { left: 12px; }
.gallery__nav.next { right: 12px; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.gallery__thumbs button {
  flex-shrink: 0;
  width: 84px; height: 84px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: none;
}
.gallery__thumbs button.active { border-color: var(--green-cta); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* buy box */
.buybox .pill { margin-bottom: 12px; }
.rating { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rating .stars { margin: 0; }
.rating b { font-size: 17px; }
.buybox h1 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 10px;
}
.buybox .lede { color: var(--ink-500); margin-bottom: 18px; }
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #F4F4F0;
  border-radius: var(--radius-m);
  padding: 10px;
  gap: 8px;
  margin-bottom: 20px;
}
.trust-strip div { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.trust-strip .ic {
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--green-700);
  flex-shrink: 0;
}
.trust-strip .ic svg { width: 20px; height: 20px; }
.trust-strip b { display: block; font-size: 15px; color: var(--green-900); line-height: 1.2; }
.trust-strip span { font-size: 12.5px; color: var(--ink-300); }

.buybox .price-row { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.opt-label { font-family: var(--font-head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 15.5px; color: var(--ink-900); margin: 18px 0 10px; }
.opt-label .sel { color: var(--green-700); }

.len-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.len-opt {
  position: relative;
  border: 1.5px solid #D6D6D6;
  border-radius: var(--radius-m);
  background: #fff;
  padding: 12px 6px 10px;
  text-align: center;
}
.len-opt b { display: block; font-size: 17px; color: var(--ink-900); }
.len-opt span { font-size: 13px; color: var(--ink-300); }
.len-opt.active { border-color: var(--green-cta); background: #F0FBF4; box-shadow: 0 0 0 1px var(--green-cta); }
.len-opt .tag {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--gold-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.dims-note { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-500); margin: 12px 0 4px; }
.dims-note svg { width: 18px; height: 18px; color: var(--ink-300); }

.addons { display: flex; flex-direction: column; gap: 10px; }
.addon {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #E2E4E8;
  border-radius: var(--radius-m);
  padding: 10px 14px;
  background: #fff;
}
.addon img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; }
.addon .shield {
  width: 52px; height: 52px;
  border-radius: 9px;
  background: #111;
  color: var(--gold-500);
  display: grid;
  place-items: center;
}
.addon .shield svg { width: 26px; height: 26px; }
.addon .name { flex: 1; font-weight: 600; color: var(--green-900); font-size: 15.5px; }
.addon .name small { display: block; font-weight: 400; color: var(--ink-300); font-size: 13px; }
.addon .plus { font-weight: 700; color: var(--green-900); white-space: nowrap; }
.addon button {
  border: 1.5px solid var(--green-cta);
  color: var(--green-cta-dark);
  background: #fff;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 13.5px;
  padding: 6px 16px;
}
.addon.added { border-color: var(--green-cta); background: #F0FBF4; }
.addon.added button { background: var(--green-cta); color: #fff; }

.fulfil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fulfil {
  border: 1.5px solid #E2E4E8;
  border-radius: var(--radius-m);
  padding: 14px 16px;
  position: relative;
  background: #fff;
}
.fulfil.active { border-color: var(--green-cta); box-shadow: 0 0 0 1px var(--green-cta); background: #FDFFFD; }
.fulfil.disabled { opacity: .72; background: #FAFAF8; }
.fulfil .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fulfil .head b { font-family: var(--font-head); letter-spacing: .06em; font-size: 16.5px; text-transform: uppercase; }
.fulfil .p { font-size: 19px; font-weight: 800; color: var(--ink-900); }
.fulfil .p s { font-size: 14px; color: var(--ink-300); font-weight: 500; margin-right: 6px; }
.fulfil .est { font-size: 13.5px; color: var(--ink-500); margin-top: 2px; }
.fulfil .est b { color: var(--ink-900); font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.fulfil .note {
  margin-top: 8px;
  background: #FDF0EF;
  color: #A03B32;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 9px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.fulfil .note.green { background: #EAF7EE; color: #15803D; }
.fulfil .note svg { width: 14px; height: 14px; flex-shrink: 0; }

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0 10px;
  font-size: 16px;
  color: var(--ink-500);
}
.total-row .sum { font-size: 26px; font-weight: 800; color: var(--ink-900); }
.ship-line { text-align: center; font-size: 14.5px; color: var(--ink-500); margin-top: 12px; }
.ship-line b { color: var(--ink-900); }

.trust-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 18px 0 22px; }
.trust-pills span {
  background: #F6F6F4;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-pills svg { width: 15px; height: 15px; color: var(--green-700); }

.help-card {
  background: #FAF6EB;
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.help-card b { color: var(--green-900); font-size: 17px; }
.help-card p { font-size: 14.5px; color: var(--ink-500); margin: 4px 0 14px; }
.help-card .row { display: flex; gap: 10px; flex-wrap: wrap; }

.diff-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin-bottom: 22px;
  text-align: center;
}
.diff-card h3 { font-family: var(--font-head); letter-spacing: .1em; font-size: 16.5px; text-transform: uppercase; margin-bottom: 16px; }
.diff-card .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.diff-card .grid svg { width: 30px; height: 30px; margin: 0 auto 7px; color: var(--green-800); }
.diff-card .grid span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green-900); display: block; line-height: 1.3; }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 2px;
  font-weight: 700;
  color: var(--green-900);
  font-size: 16.5px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .chev { transition: transform .2s; }
.acc details[open] summary .chev { transform: rotate(180deg); }
.acc .body { padding: 0 2px 18px; font-size: 15.5px; color: var(--ink-500); }
.acc table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.acc table td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.acc table td:first-child { color: var(--ink-300); width: 45%; }

.mini-review {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 16px;
  margin-top: 22px;
  align-items: center;
}
.mini-review img { border-radius: 10px; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.mini-review h4 { font-family: var(--font-head); letter-spacing: .05em; text-transform: uppercase; font-size: 16px; margin: 2px 0 6px; }
.mini-review blockquote { margin: 0 0 8px; font-style: italic; color: var(--ink-500); font-size: 14.5px; }
.mini-review .who { font-size: 14px; }
.mini-review .who b { margin-right: 8px; }

/* sticky mobile CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(20,48,15,.12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 14px;
}
.sticky-cta .p { line-height: 1.15; }
.sticky-cta .p b { font-size: 19px; color: var(--ink-900); display: block; }
.sticky-cta .p span { font-size: 12.5px; color: var(--ink-500); }
.sticky-cta .btn { flex: 1; }

/* ============================================================
   WIDGETS: chat, callback modal, preorder modal, toast
   ============================================================ */
.fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gold-500);
  color: var(--black);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px 14px 16px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: 0 10px 26px rgba(26,28,25,.35);
}
.fab svg { width: 22px; height: 22px; }
.fab .unread {
  position: absolute;
  top: -4px; right: -2px;
  width: 20px; height: 20px;
  background: var(--red-sale);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
}

.chat {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 85;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20,48,15,.35);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat.open { display: flex; }
.chat__head {
  background: var(--black);
  color: #fff;
  border-bottom: 3px solid var(--gold-500);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat__head img { width: 38px; height: 38px; border-radius: 10px; background: #fff; padding: 3px; }
.chat__head b { display: block; font-size: 16px; }
.chat__head .status { font-size: 12.5px; color: #C6C9C2; display: flex; align-items: center; gap: 6px; }
.chat__head .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.chat__head button { margin-left: auto; background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F5F8F3; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.user { background: var(--green-cta); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg b { color: inherit; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; background: #F5F8F3; }
.chat__chips button {
  border: 1.5px solid var(--green-cta);
  color: var(--green-cta-dark);
  background: #fff;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
}
.chat__input { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.chat__input input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14.5px;
}
.chat__input input:focus { outline: none; border-color: var(--green-cta); }
.chat__input button {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-cta);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
}
.chat__input button svg { width: 19px; height: 19px; }

/* modal base */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20,48,15,.55);
}
.modal.open { display: flex; }
.modal__box {
  background: #fff;
  border-radius: 18px;
  width: min(480px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 30px 26px;
  position: relative;
  box-shadow: var(--shadow-pop);
}
.modal__close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: 0;
  font-size: 26px;
  color: var(--ink-300);
  line-height: 1;
}
.modal__box h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 25px; margin-bottom: 6px; }
.modal__box .sub { color: var(--ink-500); font-size: 15.5px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-700); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1.5px solid #D8DED4;
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15.5px;
  background: #fff;
  color: var(--ink-900);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-cta); }
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1;
  border: 1.5px solid #D8DED4;
  background: #fff;
  border-radius: 10px;
  padding: 10px 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-700);
}
.seg button.active { border-color: var(--green-cta); background: #F0FBF4; color: var(--green-800); }
.modal__note { font-size: 13px; color: var(--ink-300); text-align: center; margin-top: 12px; }
.success-msg { text-align: center; padding: 26px 6px 10px; display: none; }
.success-msg .tick {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #DFEFE4;
  color: #168B54;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.success-msg .tick svg { width: 30px; height: 30px; }

/* order summary modal rows */
.sum-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 15.5px; }
.sum-row.total { border-bottom: 0; font-size: 18px; font-weight: 800; color: var(--ink-900); padding-top: 14px; }
.sum-row .muted { color: var(--ink-300); }
.delivery-banner {
  background: var(--gold-bg);
  border: 1px solid #EFE18A;
  border-left: 4px solid var(--gold-500);
  color: #4A3F00;
  border-radius: var(--radius-s);
  font-size: 14px;
  padding: 10px 14px;
  margin: 14px 0;
}
.delivery-banner b { color: #332B00; }

/* toast */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green-900);
  color: #fff;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 15px;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1190px) {
  .header__nav { display: none; }
  .header__burger { display: block; }
  .header__cta { display: none; }
}
@media (max-width: 900px) {
  .section { padding: 54px 0; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: 320px; order: -1; }
  .hero__copy { padding: 40px 20px 46px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__media { min-height: 300px; }
  .card-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .proof { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__cards { grid-template-columns: 1fr; }
  body.has-sticky .sticky-cta { display: flex; }
  body.has-sticky { padding-bottom: 84px; }
  body.has-sticky .fab { bottom: 92px; }
  .fab span.lbl { display: none; }
  .fab { padding: 15px; }
  body.has-sticky .chat {
    bottom: 160px;
    height: min(560px, calc(100vh - 200px));
    height: min(560px, calc(100dvh - 200px));
  }
}
@media (max-width: 560px) {
  .header__logo img { height: 36px; }
  .header__in { gap: 14px; }
  .header__phone > span:not(.ic) { display: none; }
  .timeline { grid-template-columns: 1fr; }
  .fulfil-grid { grid-template-columns: 1fr; }
  .diff-card .grid { grid-template-columns: 1fr 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .hero__stats { flex-direction: column; gap: 18px; }
  .hero__stat + .hero__stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding-top: 16px; }
  .mini-review { grid-template-columns: 1fr; }
  .mini-review img { max-width: 200px; }
}

/* ============================================================
   MOTION & POLISH
   ============================================================ */

/* scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* hover micro-interactions */
.stat-card, .review-card, .climate-card, .tl-step, .footer-card, .proof-chip, .addon, .fulfil {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.stat-card:hover, .review-card:hover, .climate-card:hover, .tl-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(20,35,16,.13);
}
.owners-strip img { transition: transform .3s ease, box-shadow .3s ease; }
.owners-strip img:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20,35,16,.16); }
.climate-card { overflow: hidden; }
.climate-card img { transition: transform .55s ease; }
.climate-card:hover img { transform: scale(1.045); }
.spotlight__media { overflow: hidden; }
.spotlight__media img { transition: transform .6s ease; }
.spotlight:hover .spotlight__media img { transform: scale(1.03); }
.gallery__thumbs button { transition: border-color .2s ease, transform .2s ease; }
.gallery__thumbs button:hover { transform: translateY(-2px); }
#gallery-main-img { transition: opacity .28s ease; }
.fab { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.fab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(26,28,25,.4); }
.socials a { transition: border-color .2s ease, transform .2s ease; }
.socials a:hover { transform: translateY(-2px); }

/* header elevation on scroll */
.header { transition: box-shadow .3s ease; }
.header.scrolled { box-shadow: 0 4px 18px rgba(20,35,16,.10); }

/* accordion answer entrance */
.faq details[open] .answer, .acc details[open] .body { animation: fadeSlide .38s ease; }
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq summary, .acc summary { transition: color .2s ease; }
.faq summary:hover, .acc summary:hover { color: var(--green-700); }

/* chat + modal entrances */
.chat.open { animation: chatIn .3s cubic-bezier(.22,.61,.36,1); transform-origin: 100% 100%; }
@keyframes chatIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.msg { animation: msgIn .3s ease; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.modal.open { animation: overlayIn .25s ease; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal.open .modal__box { animation: boxIn .34s cubic-bezier(.22,.61,.36,1); }
@keyframes boxIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.mobnav.open .mobnav__panel { animation: drawerIn .3s cubic-bezier(.22,.61,.36,1); }
@keyframes drawerIn {
  from { transform: translateX(40px); opacity: .4; }
  to   { transform: none; opacity: 1; }
}

/* price pulse on config change */
@keyframes pricePulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.pulse-price { display: inline-block; animation: pricePulse .45s ease; }

/* sticky mobile CTA slides in after passing the buy box */
.sticky-cta { transform: translateY(110%); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
body.show-sticky .sticky-cta { transform: translateY(0); }

/* reduced motion: show everything, animate nothing */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .chat.open, .modal.open, .modal.open .modal__box, .msg,
  .faq details[open] .answer, .acc details[open] .body,
  .mobnav.open .mobnav__panel, .pulse-price { animation: none; }
  .sticky-cta { transform: none; transition: none; }
  .stat-card:hover, .review-card:hover, .climate-card:hover, .tl-step:hover,
  .owners-strip img:hover, .fab:hover { transform: none; }
}

/* ============================================================
   FULL-BLEED CINEMATIC HERO
   ============================================================ */
.hero--full {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(560px, 86vh, 800px);
  overflow: hidden;
  background: var(--green-950);
}
.hero--full .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 30%;
}
.hero--full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(83deg,
    rgba(15,22,11,.87) 0%,
    rgba(15,22,11,.62) 30%,
    rgba(15,22,11,.18) 55%,
    rgba(15,22,11,0) 72%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 90px;
  padding-bottom: 48px;
}
.hero--full .hero__title { max-width: 14ch; }
.hero--full .hero__sub { text-shadow: 0 1px 8px rgba(15,22,11,.5); }
.hero__statsbar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.22);
  background: rgba(15,22,11,.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}
.hero__statsbar-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
}
@media (max-width: 900px) {
  .hero--full { min-height: 78vh; }
  .hero--full::before {
    background: linear-gradient(to top,
      rgba(15,22,11,.92) 0%,
      rgba(15,22,11,.55) 42%,
      rgba(15,22,11,.18) 70%,
      rgba(15,22,11,.05) 100%);
  }
  .hero__inner { padding-top: 220px; }
}
@media (max-width: 560px) {
  .hero__statsbar-in { padding: 12px 8px; }
  .hero__statsbar .hero__stat svg { width: 28px; height: 28px; margin-bottom: 4px; }
  .hero__statsbar .hero__stat b { font-size: 15px; }
  .hero__statsbar .hero__stat span { font-size: 10.5px; }
  .hero__statsbar .hero__stat + .hero__stat { border-left: 1px solid rgba(255,255,255,.25); border-top: 0; padding-top: 0; }
}

/* ============================================================
   DASHBOARDS (admin + order tracking)
   ============================================================ */
.dash-body { background: var(--green-50); min-height: 100vh; }
.dash-main { max-width: var(--wrap); margin: 0 auto; padding: 34px 20px 80px; }
.dash-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); margin: 0 0 4px; }
.dash-title::after { content: ""; display: block; width: 54px; height: 5px; background: var(--gold-500); margin-top: 10px; }
.dash-sub { color: var(--ink-500); margin: 12px 0 28px; }
.admin-tag {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--black);
  color: var(--gold-500);
  border-radius: 4px;
  padding: 4px 10px;
  text-transform: uppercase;
}

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px; }
.kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.kpi .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); font-weight: 700; }
.kpi .val { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink-900); line-height: 1.15; }
.kpi .hint { font-size: 12.5px; color: var(--ink-500); }

/* chart cards */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 18px 20px; }
.chart-card h3 { font-family: var(--font-head); font-size: 15.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.hbar { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13.5px; }
.hbar .l { width: 52px; color: var(--ink-500); font-weight: 600; flex-shrink: 0; }
.hbar .track { display: block; flex: 1; background: var(--green-100); border-radius: 4px; height: 18px; overflow: hidden; }
.hbar .fill { display: block; height: 100%; background: var(--green-700); border-radius: 4px; min-width: 2px; transition: width .6s ease; }
.hbar .n { width: 22px; text-align: right; font-weight: 700; color: var(--ink-900); }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 8px; }
.vbars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.vbars .bar { width: 100%; max-width: 44px; background: var(--gold-500); border: 1px solid var(--gold-600); border-radius: 4px 4px 0 0; min-height: 3px; transition: height .6s ease; }
.vbars .cap { font-size: 11px; color: var(--ink-300); white-space: nowrap; }
.vbars .num { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }

/* toolbar */
.dash-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.dash-toolbar input[type="search"], .dash-toolbar select {
  border: 1.5px solid #D8DED4;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--ink-900);
}
.dash-toolbar input[type="search"] { flex: 1; min-width: 200px; }
.dash-toolbar input:focus, .dash-toolbar select:focus { outline: none; border-color: var(--green-cta); }

/* orders table */
.dtable-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.dtable { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14.5px; }
.dtable th {
  text-align: left;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: #FAFBF8;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dtable td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr { cursor: pointer; transition: background .15s; }
.dtable tbody tr:hover { background: var(--green-50); }
.dtable .oid { font-weight: 700; color: var(--green-800); white-space: nowrap; }
.dtable .cust b { display: block; color: var(--ink-900); }
.dtable .cust span { font-size: 12.5px; color: var(--ink-300); }
.dtable .tot { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.dtable .muted { color: var(--ink-500); font-size: 13.5px; white-space: nowrap; }
.dtable-empty { padding: 40px; text-align: center; color: var(--ink-500); }

/* status pills */
.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st--confirmed   { background: #EEF1EB; color: #3E5C36; }
.st--production  { background: var(--gold-500); color: #201C00; }
.st--qc          { background: #FFF6C9; color: #6B5A00; }
.st--shipped     { background: #DFEFE4; color: #17753C; }
.st--delivered   { background: var(--black); color: #E9EAE6; }
.st--cancelled   { background: #F9E3E2; color: #A03B32; }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 95; display: none; }
.drawer.open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20,35,16,.5); }
.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(460px, 94vw);
  height: 100%;
  background: #fff;
  box-shadow: -18px 0 50px rgba(20,35,16,.25);
  display: flex;
  flex-direction: column;
  animation: drawerIn .28s cubic-bezier(.22,.61,.36,1);
}
.drawer__head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.drawer__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 0; }
.drawer__head button { margin-left: auto; background: none; border: 0; font-size: 26px; color: var(--ink-300); line-height: 1; }
.drawer__body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.drawer__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.drawer__row .k { color: var(--ink-500); }
.drawer__row .v { font-weight: 600; color: var(--ink-900); text-align: right; }
.drawer__actions { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }
.drawer h4 { font-family: var(--font-head); letter-spacing: .08em; text-transform: uppercase; font-size: 14px; margin: 18px 0 8px; }

/* vertical timeline (drawer + track) */
.vtl { list-style: none; margin: 0; padding: 0; }
.vtl li { position: relative; padding: 0 0 18px 30px; }
.vtl li::before {
  content: "";
  position: absolute;
  left: 7px; top: 18px; bottom: -2px;
  width: 2px;
  background: var(--line);
}
.vtl li:last-child::before { display: none; }
.vtl .dot {
  position: absolute;
  left: 0; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #C9CFC4;
}
.vtl li.done .dot { background: var(--green-700); border-color: var(--green-700); }
.vtl li.now .dot { background: var(--gold-500); border-color: var(--black); animation: pulse 1.6s ease-out infinite; }
.vtl b { display: block; font-size: 14.5px; color: var(--ink-900); }
.vtl li.upcoming b { color: var(--ink-300); font-weight: 600; }
.vtl span { font-size: 12.5px; color: var(--ink-500); }

/* admin gate */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(20,35,16,.88), rgba(20,35,16,.88)),
    var(--green-900);
  padding: 20px;
}
.gate__box { background: #fff; border-radius: 12px; border-top: 5px solid var(--gold-500); padding: 34px 34px 28px; width: min(400px, 100%); box-shadow: var(--shadow-pop); }
.gate__box img { height: 44px; margin-bottom: 18px; }
.gate__box h1 { font-family: var(--font-display); font-weight: 600; font-size: 24px; text-transform: uppercase; margin-bottom: 4px; }
.gate__box p { color: var(--ink-500); font-size: 14.5px; margin-bottom: 18px; }
.gate__err { color: var(--red-sale); font-size: 13.5px; font-weight: 600; margin-top: 10px; display: none; }
.gate__hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-300); text-align: center; }

/* track page */
.track-hero {
  position: relative;
  color: #fff;
  padding: 60px 0 100px;
  background:
    linear-gradient(100deg, rgba(18,38,12,.94) 0%, rgba(18,38,12,.82) 45%, rgba(24,50,16,.62) 100%),
    url("../assets/img/gallery-doors-open.jpg") center 32% / cover no-repeat,
    var(--green-900);
}
.track-hero h1 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin: 0; }
.track-hero h1::after { content: ""; display: block; width: 54px; height: 5px; background: var(--gold-500); margin-top: 12px; }
.track-hero p { color: #C6D2C0; margin: 12px 0 0; }
.lookup-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  padding: 26px 28px;
  max-width: 580px;
  margin: -64px auto 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.lookup-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lookup-err { color: var(--red-sale); font-weight: 600; font-size: 14px; margin-top: 10px; display: none; }
.lookup-hint { font-size: 12.5px; color: var(--ink-300); margin-top: 12px; }
.last-order-banner {
  margin: -26px -28px 20px;
  background: var(--gold-bg);
  border-bottom: 1px solid #EFE18A;
  padding: 13px 22px;
  font-size: 14.5px;
  color: #4A3F00;
  display: none;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* journey explainer */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.jstep {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 20px 16px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.jstep:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20,35,16,.12); }
.jstep .ic {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.jstep .ic svg { width: 22px; height: 22px; }
.jstep b {
  display: block;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 15.5px;
  color: var(--ink-900);
  margin-bottom: 3px;
}
.jstep > span:last-child { font-size: 12.5px; color: var(--ink-500); line-height: 1.45; display: block; }

/* track result */
.order-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.order-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0; }
.track-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
.track-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 22px 24px; }
.track-card + .track-card { margin-top: 22px; }
.track-card h3 { font-family: var(--font-head); font-size: 15.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }

/* horizontal progress steps */
.hsteps { display: flex; margin: 10px 0 6px; }
.hstep { flex: 1; text-align: center; position: relative; padding-top: 26px; }
.hstep::before {
  content: "";
  position: absolute;
  top: 9px; left: -50%;
  width: 100%; height: 4px;
  background: var(--line);
}
.hstep:first-child::before { display: none; }
.hstep .dot {
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #C9CFC4;
  z-index: 1;
}
.hstep.done::before { background: var(--green-700); }
.hstep.done .dot { background: var(--green-700); border-color: var(--green-700); }
.hstep.now::before { background: var(--green-700); }
.hstep.now .dot { background: var(--gold-500); border-color: var(--black); animation: pulse 1.6s ease-out infinite; }
.hstep b { display: block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-900); }
.hstep.upcoming b { color: var(--ink-300); }
.hstep span { font-size: 11.5px; color: var(--ink-500); }
.eta-banner {
  background: var(--gold-bg);
  border: 1px solid #EFE18A;
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 15px;
  color: #4A3F00;
}
.eta-banner b { color: #332B00; }
.eta-banner.green { background: #DFEFE4; border-color: #BFE0C9; border-left-color: var(--green-700); color: #17542E; }
.eta-banner.green b { color: #0F3D20; }
.eta-banner.red { background: #F9E3E2; border-color: #EFC5C2; border-left-color: var(--red-sale); color: #7C2B24; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .charts { grid-template-columns: 1fr; }
  .track-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .lookup-card .row { grid-template-columns: 1fr; }
  .hstep b { font-size: 10.5px; }
  .hstep span { display: none; }
}