.zg-hero {
  position: relative;
  min-height: clamp(560px, calc(88svh - 24px), 840px);
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background: var(--zg-forest-950);
  color: #fff;
}
.zg-hero__video,
.zg-hero__poster,
.zg-hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zg-hero__poster {
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(5,18,12,.58), rgba(5,18,12,.22)),
    url('/products/hero-pack.webp') center / cover no-repeat;
  transform: scale(1.02);
}
.zg-hero__video {
  z-index: -3;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent;
  opacity: 0;
  transition: opacity .6s ease;
}
.zg-hero.is-video-ready .zg-hero__video { opacity: 1; }
.zg-hero.is-video-failed .zg-hero__video { display: none; }
.zg-hero__scrim {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5,18,12,.90) 0%, rgba(5,18,12,.76) 42%, rgba(5,18,12,.28) 72%, rgba(5,18,12,.40) 100%),
    linear-gradient(180deg, rgba(5,18,12,.15), rgba(5,18,12,.56));
}
.zg-hero::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(5,18,12,.7));
  content: '';
  pointer-events: none;
}
.zg-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 680px);
  align-items: center;
  padding-block: clamp(5.5rem, 10vw, 8.5rem);
}
.zg-hero__copy {
  text-align: left;
  max-width: 680px;
  padding: clamp(.75rem, 1.5vw, 1.15rem) 0;
  text-shadow: 0 2px 22px rgba(0,0,0,.3);
}
.zg-hero .zg-eyebrow { color: #dbe7c7; }
.zg-hero h1 {
  max-width: 13ch;
  text-wrap: balance;
  margin-bottom: 1.05rem;
  color: #fff;
  font-size: clamp(2.55rem, 5.35vw, 5.25rem);
  line-height: .97;
}
.zg-hero h1 span { color: #d8e7bd; }
.zg-hero__lead {
  text-wrap: pretty;
  max-width: 35rem;
  margin-bottom: 1.35rem;
  color: rgba(255,255,255,.84);
  font-size: clamp(.96rem, 1.1vw, 1.08rem);
}
.zg-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.65rem; }
.zg-btn--on-video {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.1);
  color: #fff;
  backdrop-filter: blur(12px);
}
.zg-btn--on-video:hover { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.18); color: #fff; }
.zg-trust-row { display: flex; flex-wrap: wrap; gap: .65rem 1.1rem; color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 750; }
.zg-trust-row span { display: inline-flex; align-items: center; gap: .45rem; }
.zg-trust-row span::before { width: 7px; height: 7px; border-radius: 50%; background: #c6d7ac; box-shadow: 0 0 0 4px rgba(198,215,172,.14); content: ''; }
.zg-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.78);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.zg-hero__scroll span { width: 1px; height: 28px; background: linear-gradient(#fff, transparent); animation: zg-hero-scroll 1.7s ease-in-out infinite; }
@keyframes zg-hero-scroll { 50% { transform: scaleY(.45); transform-origin: top; opacity: .45; } }

.zg-brand-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-block: 1px solid rgba(22,51,38,.12);
  background:
    radial-gradient(circle at 12% 50%, rgba(154,178,111,.18), transparent 28%),
    linear-gradient(135deg, #f7f4ea, #fffdf7 54%, #edf2e5);
  box-shadow: 0 18px 45px rgba(17,48,33,.08);
}
.zg-brand-marquee__viewport { overflow: hidden; padding: .95rem 0; }
.zg-brand-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 1.25rem;
  padding-inline: 1.25rem;
  color: var(--zg-forest-900);
  font-size: clamp(.74rem,1vw,.9rem);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: zg-brand-marquee 30s linear infinite;
  will-change: transform;
}
.zg-brand-marquee__track span { white-space: nowrap; }
.zg-brand-marquee__track i { color: var(--zg-olive-600); font-size: .65rem; font-style: normal; }
@keyframes zg-brand-marquee { to { transform: translateX(-50%); } }

.zg-home-featured-grid {
  grid-template-columns: repeat(18,minmax(0,1fr));
  grid-auto-rows: 1fr;
}
.zg-home-featured-grid > * { grid-column: span 6; min-width: 0; }
.zg-home-featured-grid[data-preview-count="2"] > :first-child { grid-column: 4 / span 6; }
.zg-home-featured-grid[data-preview-count="2"] > :last-child { grid-column: 10 / span 6; }
.zg-home-featured-grid[data-preview-count="1"] > :only-child { grid-column: 7 / span 6; }
.zg-featured-menu-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(1.25rem,4vw,3rem);
  margin-top: clamp(1.5rem,4vw,3rem);
  padding: clamp(1.25rem,3vw,2rem);
  border: 1px solid rgba(31,73,53,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 10%, rgba(207,225,178,.48), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,244,230,.92));
  box-shadow: 0 22px 55px rgba(17,48,33,.12), inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
}
.zg-featured-menu-cta::after {
  position: absolute;
  inset: auto -7% -62% auto;
  width: 270px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,118,80,.16), transparent 67%);
  content: '';
  pointer-events: none;
}
.zg-featured-menu-cta__copy { position: relative; z-index: 1; max-width: 650px; }
.zg-featured-menu-cta__copy h3 { margin: .45rem 0 0; font-size: clamp(1.4rem,2.4vw,2.15rem); line-height: 1.08; }
.zg-menu-portal {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: min(100%, 315px);
  grid-template-columns: minmax(0,1fr) 54px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.35rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 22px;
  background: linear-gradient(145deg,#22543b,#0f3525 62%,#0a281d);
  color: #fff;
  box-shadow:
    0 8px 0 #092419,
    0 17px 32px rgba(10,39,27,.28),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform: translateY(-4px) perspective(900px) rotateX(2deg);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  isolation: isolate;
  overflow: hidden;
}
.zg-menu-portal:hover {
  color: #fff;
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-7px) perspective(900px) rotateX(1deg) rotateY(-1deg);
  box-shadow: 0 11px 0 #092419, 0 24px 42px rgba(10,39,27,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.zg-menu-portal:active { transform: translateY(1px); box-shadow: 0 3px 0 #092419, 0 10px 22px rgba(10,39,27,.25); }
.zg-menu-portal__glow {
  position: absolute;
  inset: -80% auto auto -15%;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(211,231,177,.42),transparent 65%);
  transition: transform .3s ease;
}
.zg-menu-portal:hover .zg-menu-portal__glow { transform: translate(45px,28px) scale(1.18); }
.zg-menu-portal__label { font-size: clamp(.94rem,1.3vw,1.05rem); font-weight: 900; letter-spacing: .02em; }
.zg-menu-portal__arrow {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg,#e4edcf,#bbd09a);
  color: var(--zg-forest-950);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 16px rgba(0,0,0,.16);
  font-size: 1.35rem;
  font-weight: 900;
}

.zg-story { background: var(--zg-forest-950); color: rgba(255,255,255,.82); }
.zg-story__grid { display: grid; grid-template-columns: minmax(280px,.72fr) 1fr; align-items: center; gap: clamp(2rem,7vw,7rem); }
.zg-story__visual { position: relative; min-height: 390px; display: grid; place-items: center; }
.zg-story__visual::before { position: absolute; inset: 12% 12% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(111,141,77,.4), transparent 65%); filter: blur(18px); content: ''; }
.zg-story__visual img { position: relative; z-index: 1; width: min(76%, 280px); max-height: 360px; object-fit: contain; border-radius: 20px; box-shadow: 0 24px 55px rgba(0,0,0,.3); transform: rotate(-1.5deg); }
.zg-story h2 { color: #fff; }
.zg-story .zg-eyebrow { color: #c6d7ac; }
.zg-story__points { display: grid; gap: 1rem; margin-top: 2rem; }
.zg-story-point { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: .9rem; align-items: start; }
.zg-story-point__number { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #dce7cb; font-weight: 900; }
.zg-story-point h3 { margin-bottom: .25rem; color: #fff; font-family: var(--zg-font-ui); font-size: 1rem; letter-spacing: 0; }
.zg-story-point p { margin: 0; color: rgba(255,255,255,.64); font-size: .88rem; }

.zg-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; counter-reset: step; }
.zg-step { position: relative; padding: 1.35rem; counter-increment: step; }
.zg-step::before { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: var(--zg-forest-900); color: #fff; font-weight: 900; content: counter(step, decimal-leading-zero); }
.zg-step p { margin: 0; color: var(--zg-muted); font-size: .88rem; }
.zg-ai-cta { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--zg-radius-lg); background: linear-gradient(135deg, var(--zg-cream-200), #e3e8d8); }
.zg-ai-cta h2 { margin-bottom: .6rem; }
.zg-ai-cta p { margin: 0; color: var(--zg-muted); }

.zg-home-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.zg-home-review { padding:1.4rem; }
.zg-home-review > span { color:#94772f; letter-spacing:.08em; }
.zg-home-review p { color:var(--zg-muted); }
.zg-home-recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.zg-home-recipe { overflow:hidden; }
.zg-home-recipe img { width:100%; height:clamp(150px,18vw,210px); object-fit:cover; }
.zg-home-recipe div { padding:1rem; }
.zg-home-recipe h3 { margin-top:.7rem; }
.zg-home-recipe p { color:var(--zg-muted); }
.zg-home-faq { display:grid; gap:.65rem; }
.zg-home-faq details { padding:0 1.1rem; }
.zg-home-faq summary { padding:1rem 0; cursor:pointer; font-weight:850; }
.zg-home-faq p { color:var(--zg-muted); padding-bottom:1rem; }

@media (max-width: 900px) {
  .zg-hero { min-height: clamp(640px, 88svh, 820px); }
  .zg-hero__grid { grid-template-columns: minmax(0, 680px); }
  .zg-hero__scrim { background: linear-gradient(90deg, rgba(5,18,12,.88), rgba(5,18,12,.45)), linear-gradient(180deg, rgba(5,18,12,.12), rgba(5,18,12,.62)); }
  .zg-story__grid { grid-template-columns: 1fr; }
  .zg-story__visual { min-height: 300px; }
  .zg-story__visual img { width: min(64%, 240px); max-height: 300px; }
  .zg-steps { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 979px) {
  .zg-home-featured-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }
  .zg-home-featured-grid > * { grid-column: span 6; }
  .zg-home-featured-grid[data-preview-count="3"] > :last-child { grid-column: 4 / span 6; }
  .zg-home-featured-grid[data-preview-count="2"] > :first-child,
  .zg-home-featured-grid[data-preview-count="2"] > :last-child { grid-column: span 6; }
  .zg-home-featured-grid[data-preview-count="1"] > :only-child { grid-column: 4 / span 6; }
}
@media (max-width: 699px) {
  .zg-home-featured-grid { grid-template-columns: minmax(0,1fr); }
  .zg-home-featured-grid > *,
  .zg-home-featured-grid[data-preview-count] > * { grid-column: 1; }
  .zg-featured-menu-cta { grid-template-columns: 1fr; }
  .zg-home-review-grid,.zg-home-recipe-grid { grid-template-columns:1fr; }
  .zg-home-recipe img { height: clamp(175px,54vw,240px); }
}
@media (max-width: 560px) {
  .zg-hero { min-height: max(660px, 90svh); }
  .zg-hero__video { object-position: 60% center; }
  .zg-hero__poster { background-position: 60% center; }
  .zg-hero__scrim { background: linear-gradient(180deg, rgba(5,18,12,.34) 0%, rgba(5,18,12,.68) 40%, rgba(5,18,12,.94) 100%); }
  .zg-hero__grid { align-items: end; padding-block: 5rem 7rem; }
  .zg-hero__copy { align-self: end; text-align: left; }
  .zg-hero h1 { font-size: clamp(2.75rem, 14vw, 4.35rem); }
  .zg-hero__lead { font-size: .96rem; }
  .zg-hero__actions { display: grid; grid-template-columns: 1fr; }
  .zg-hero__actions .zg-btn { width: 100%; }
  .zg-trust-row { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .zg-hero__scroll { bottom: 1.25rem; }
  .zg-steps { grid-template-columns: 1fr; }
  .zg-featured-menu-cta { grid-template-columns: 1fr; padding: 1.2rem; }
  .zg-menu-portal { width: 100%; min-width: 0; }
  .zg-ai-cta { grid-template-columns: 1fr; }
  .zg-story__visual { min-height: 250px; }
  .zg-story__visual img { width: min(66%, 205px); max-height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  .zg-hero__video { display: none; }
  .zg-hero__poster { transform: none; }
  .zg-hero__scroll span,.zg-brand-marquee__track { animation: none; }
  .zg-brand-marquee__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .zg-brand-marquee__track [aria-hidden="true"] { display: none; }
  .zg-menu-portal { transition: none; transform: none; box-shadow: 0 8px 24px rgba(10,39,27,.24); }
}


/* Phase 18: three equal featured cards with renderer-safe wrapping. */
.zg-home-featured-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.35rem;
}
.zg-home-featured-grid > *,
.zg-home-featured-grid[data-preview-count] > * {
  grid-column: auto !important;
  min-width: 0;
}
.zg-home-featured-grid .zg-product-card {
  flex: 0 1 calc(33.333% - .9rem);
}
@media (max-width:959px) {
  .zg-home-featured-grid { gap: 1rem; }
  .zg-home-featured-grid .zg-product-card { flex-basis: calc(50% - .5rem); }
}
@media (max-width:639px) {
  .zg-home-featured-grid { display: flex !important; gap: 1.15rem; }
  .zg-home-featured-grid .zg-product-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}


/* Phase 31: compact, left-aligned hero across viewport sizes */
@media (min-width: 1500px) {
  .zg-hero__grid { grid-template-columns:minmax(0,700px); }
  .zg-hero h1 { font-size:clamp(3.5rem,4.2vw,5.35rem); }
}
@media (max-width: 900px) {
  .zg-hero { min-height:clamp(540px,82svh,720px); align-items:end; }
  .zg-hero__grid { grid-template-columns:minmax(0,620px); padding-block:clamp(5.25rem,12vw,7rem) clamp(4.8rem,10vw,6rem); }
  .zg-hero__copy { width:100%; max-width:620px; padding:0; text-align:left; }
  .zg-hero h1 { max-width:12.5ch; font-size:clamp(2.45rem,8.5vw,4.25rem); line-height:.98; }
  .zg-hero__lead { max-width:34rem; font-size:clamp(.94rem,2.4vw,1.04rem); line-height:1.58; }
  .zg-hero__scrim { background:linear-gradient(90deg,rgba(5,18,12,.9) 0%,rgba(5,18,12,.72) 62%,rgba(5,18,12,.35) 100%),linear-gradient(180deg,rgba(5,18,12,.18),rgba(5,18,12,.7)); }
}
@media (max-width: 600px) {
  .zg-hero { min-height:clamp(535px,78svh,650px); }
  .zg-hero__grid { padding-block:5.6rem 4.6rem; }
  .zg-hero__copy { max-width:100%; }
  .zg-hero .zg-eyebrow { max-width:32ch; margin-bottom:.75rem; font-size:.67rem; line-height:1.45; letter-spacing:.11em; }
  .zg-hero h1 { max-width:11.7ch; margin-bottom:.85rem; font-size:clamp(2.25rem,11.2vw,3.35rem); letter-spacing:-.04em; }
  .zg-hero__lead { max-width:31rem; margin-bottom:1.1rem; font-size:.92rem; line-height:1.52; }
  .zg-hero__actions { width:100%; gap:.6rem; margin-bottom:1.1rem; }
  .zg-hero__actions .zg-btn { min-height:44px; padding:.72rem .95rem; font-size:.78rem; }
  .zg-trust-row { gap:.45rem .75rem; font-size:.68rem; line-height:1.4; }
  .zg-hero__scroll { bottom:1.1rem; font-size:.58rem; }
}
@media (max-width: 390px) {
  .zg-hero h1 { font-size:clamp(2.05rem,10.7vw,2.65rem); }
  .zg-hero__actions { display:grid; grid-template-columns:1fr; max-width:18rem; }
  .zg-hero__actions .zg-btn { width:100%; justify-content:center; }
}