/* Hero layout and decorative kitchen background. Shared colours and controls live in styles.css. */
:root {
  --nav-inset: 30px;
  --nav-top: 16px;
  --nav-h: 62px;
  --nav-r: 64px;
  --brand-x: 40px;
  --fs-nav: 24px;
  --navcta-w: 227px;
  --navcta-h: 54px;
  --navcta-inset: 4px;
  --navcta-icon: 48px;
  --hero-w: 1020px;
  --hero-gap: 72px;
  --head-gap: 16px;
  --head-bleed: 24px;
  --cta-gap: 16px;
  --btn-w: 260px;
  --btn-h: 71px;
  --btn-r: 64px;
  --fs-btn: 24px;
}

/* Glass header */
.sp-nav {
  position: absolute;
  z-index: 3;
  left: var(--nav-inset);
  right: var(--nav-inset);
  top: var(--nav-top);
  height: var(--nav-h);
  border: 1px solid #dde5ec20;
  border-radius: var(--nav-r);
  background: rgb(221 229 236 / 8%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sp-brand {
  position: absolute;
  top: 50%;
  left: var(--brand-x);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: -1px;
  gap: 8px;
}
.sp-brand img { width: 125px; }
.sp-navcta {
  position: absolute;
  top: var(--navcta-inset);
  right: var(--navcta-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-width: var(--navcta-w);
  height: var(--navcta-h);
  padding: 3px 3px 3px 18px;
  gap: 12px;
  border-radius: var(--nav-r);
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 28px #20314040;
}
.sp-disc {
  display: grid;
  place-items: center;
  width: var(--navcta-icon);
  height: var(--navcta-icon);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sand);
  color: var(--bg);
  font-size: 24px;
}

/* Introductory headline and actions */
.sp-stage { position: relative; min-height: 700px; height: 100svh; }
.sp-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, #ef929818, transparent 65%);
}
.sp-hero {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% + 0.5px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--hero-w);
  max-width: calc(100% - 2 * var(--nav-inset));
  gap: var(--hero-gap);
}
.sp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--head-gap);
  width: 100%;
  text-align: center;
}
.sp-h1, .sp-h2 {
  width: calc(100% + 2 * var(--head-bleed));
  margin: -0.22em calc(-1 * var(--head-bleed)) -0.62em;
  padding: 0.22em var(--head-bleed) 0.62em;
  font-family: var(--font-heading);
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 500;
  line-height: 1.09;
  letter-spacing: -1.5px;
  color: var(--cream);
}
.sp-h2 { white-space: nowrap; }
.sp-cta { display: flex; align-items: center; gap: var(--cta-gap); }
.sp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-w);
  height: var(--btn-h);
  padding: 3px 16px;
  border-radius: var(--btn-r);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.sp-btn-solid {
  width: max(var(--btn-w), 220px);
  padding: 0 16px;
  text-align: center;
  box-shadow: 0 8px 28px #20314040;
}
.sp-btn-solid > span { display: block; }
.sp-intro {
  max-width: 510px;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

/* Lifestyle clip follows the introduction inside a naturally sized hero. */
.sp-stage.has-story { height: auto; min-height: 0; }
.has-story .sp-hero { position: relative; left: auto; top: auto; transform: none; margin-inline: auto; padding-block: 150px 36px; gap: 36px; }
.lifestyle-story { width: min(780px, 100%); }
@media (max-width: 760px) {
  .has-story .sp-hero { padding-block: 132px 20px; gap: 28px; }
}

/* Background remains visible without JavaScript. */
.kitchen-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 5% 80%, #c5a88b15, transparent 48%),
    radial-gradient(ellipse at 95% 15%, #c5a88b12, transparent 45%),
    linear-gradient(145deg, #344456, #203140 50%, #203140);
}
.ingredient-field { position: absolute; inset: 0; }
.ingredient {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  margin-top: calc(var(--size) / -2);
  opacity: .32;
  will-change: transform;
}
.ingredient svg { width: 100%; height: 100%; transform: rotate(var(--angle)); }
.ingredient-olive { color: #a3ad70; opacity: .5; }
.ingredient-blueberry { color: #8eabdf; opacity: .55; }
.ingredient-carrot { color: #e69a52; opacity: .5; }
.ingredient-neutral { color: var(--cream); }
.ingredient-red { color: #e87980; opacity: .65; }

/* Responsive measurements retained from the reviewed design. */
@media (max-width: 1600px) {
  :root {
    --nav-h: 56px;
    --brand-x: 32px;
    --fs-nav: 20px;
    --navcta-w: 190px;
    --navcta-h: 48px;
    --navcta-icon: 42px;
    --hero-w: 860px;
    --hero-gap: 58px;
    --head-gap: 14px;
    --btn-w: 220px;
    --btn-h: 62px;
    --fs-btn: 20px;
  }
}
@media (max-width: 1280px) {
  :root {
    --nav-inset: 24px;
    --nav-top: 14px;
    --nav-h: 52px;
    --brand-x: 26px;
    --fs-nav: 18px;
    --navcta-w: 166px;
    --navcta-h: 44px;
    --navcta-icon: 38px;
    --hero-w: 720px;
    --hero-gap: 48px;
    --head-gap: 12px;
    --btn-w: 196px;
    --btn-h: 56px;
    --fs-btn: 18px;
  }
}
@media (max-width: 1024px) {
  :root {
    --fs-nav: 16px;
    --navcta-w: 148px;
    --navcta-h: 42px;
    --navcta-icon: 36px;
    --hero-w: 620px;
    --hero-gap: 40px;
    --btn-w: 176px;
    --btn-h: 52px;
    --fs-btn: 16px;
  }
}
@media (max-width: 760px) {
  :root {
    --nav-inset: 16px;
    --nav-top: 12px;
    --nav-h: 48px;
    --nav-r: 48px;
    --brand-x: 20px;
    --fs-nav: 16px;
    --navcta-w: 132px;
    --navcta-h: 40px;
    --navcta-icon: 34px;
    --head-bleed: 12px;
    --hero-w: 100%;
    --hero-gap: 36px;
    --head-gap: 10px;
    --cta-gap: 14px;
    --btn-w: 220px;
    --btn-h: 60px;
    --btn-r: 48px;
    --fs-btn: 19px;
  }
}
@media (max-width: 680px) {
  :root {
    --hero-gap: 32px;
    --head-gap: 9px;
    --btn-w: 210px;
    --btn-h: 58px;
    --fs-btn: 18px;
  }
}
@media (max-width: 600px) {
  :root {
    --hero-gap: 27px;
    --head-gap: 8px;
    --cta-gap: 12px;
    --btn-w: 195px;
    --btn-h: 56px;
    --fs-btn: 17px;
  }
}
@media (max-width: 520px) {
  :root {
    --nav-h: 44px;
    --brand-x: 16px;
    --fs-nav: 15px;
    --navcta-w: 118px;
    --navcta-h: 38px;
    --navcta-icon: 32px;
    --hero-gap: 22px;
    --head-gap: 6px;
    --btn-w: 180px;
    --btn-h: 52px;
    --fs-btn: 16px;
  }
}
@media (max-width: 440px) {
  :root {
    --hero-gap: 20px;
    --head-gap: 5px;
    --btn-w: 162px;
    --btn-h: 50px;
    --fs-btn: 15px;
  }
}
@media (max-width: 380px) {
  :root {
    --navcta-w: 108px;
    --navcta-icon: 30px;
    --hero-gap: 18px;
    --cta-gap: 10px;
    --btn-w: 144px;
    --btn-h: 48px;
    --fs-btn: 14px;
  }
}
@media (max-width: 340px) {
  :root {
    --hero-gap: 16px;
    --head-gap: 4px;
    --btn-w: 126px;
    --btn-h: 44px;
    --fs-btn: 13px;
  }
}
@media (max-height: 700px) and (min-width: 1281px) {
  :root {
    --nav-h: 56px;
    --brand-x: 32px;
    --fs-nav: 20px;
    --navcta-w: 190px;
    --navcta-h: 48px;
    --navcta-icon: 42px;
    --hero-w: 860px;
    --hero-gap: 58px;
    --head-gap: 14px;
    --btn-w: 220px;
    --btn-h: 62px;
    --fs-btn: 20px;
  }
}
@media (max-height: 560px) and (min-width: 1025px) {
  :root {
    --nav-h: 52px;
    --brand-x: 26px;
    --fs-nav: 18px;
    --navcta-w: 166px;
    --navcta-h: 44px;
    --navcta-icon: 38px;
    --hero-w: 720px;
    --hero-gap: 48px;
    --head-gap: 12px;
    --btn-w: 196px;
    --btn-h: 56px;
    --fs-btn: 18px;
  }
}
@media (max-height: 460px) and (min-width: 761px) {
  :root {
    --fs-nav: 16px;
    --navcta-w: 148px;
    --navcta-h: 42px;
    --navcta-icon: 36px;
    --hero-w: 620px;
    --hero-gap: 40px;
    --btn-w: 176px;
    --btn-h: 52px;
    --fs-btn: 16px;
  }
}
@media (max-height: 360px) and (min-width: 521px) {
  :root {
    --nav-h: 44px;
    --fs-nav: 15px;
    --navcta-w: 118px;
    --navcta-h: 38px;
    --navcta-icon: 32px;
    --hero-w: 620px;
    --hero-gap: 26px;
    --head-gap: 8px;
    --btn-w: 148px;
    --btn-h: 44px;
    --fs-btn: 14px;
  }
}

@media (max-width: 1050px) {
  .sp-h1, .sp-h2 { font-size: 58px; }
}
@media (max-width: 760px) {
  .sp-nav {
    height: auto;
    min-height: 60px;
    border-radius: 24px;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 16px;
    align-items: center;
  }
  .sp-brand { position: static; transform: none; grid-column: 1; grid-row: 1; }
  .sp-brand img { width: 95px; }
  .sp-navcta {
    position: static;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 3px 3px 3px 12px;
    gap: 10px;
    font-size: 14px;
  }
  .sp-disc { width: 32px; height: 32px; font-size: 21px; }
  .sp-hero { top: 48%; }
  .sp-h1, .sp-h2 { font-size: clamp(43px, 10vw, 65px); letter-spacing: -2px; white-space: normal; }
  .sp-intro { font-size: 14px; padding-inline: 16px; }
  .ingredient { left: var(--mobile-x, var(--x)); width: calc(var(--size) * .7); height: calc(var(--size) * .7); opacity: .28; }
  .ingredient-carrot, .ingredient-olive, .ingredient-blueberry { opacity: .5; }
  .ingredient-red { opacity: .65; }
  .ingredient-blueberry-middle { display: none; }
  .ingredient-carrot-top { --mobile-x: 55%; }
  .ingredient-tomato-left { --mobile-x: 12%; }
  .ingredient-broccoli-bottom { --mobile-x: 94%; }
  .ingredient-blueberry-bottom { --mobile-x: 46%; top: 96%; }
}
@media (max-width: 520px) {
  .sp-cta { flex-direction: column; }
  .sp-btn { width: 220px; }
  .sp-stage { min-height: 740px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sp-head, .sp-cta, .sp-intro { animation: hero-rise 1s both; }
  .sp-cta { animation-delay: .15s; }
  .sp-intro { animation-delay: .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .ingredient { will-change: auto; }
}
@keyframes hero-rise {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}