.essence-page { --essence-ink: #151515; --essence-mint: #0ea14a; --essence-blueberry: #4436cc; --essence-honey: #ffcc33; --essence-strawberry: #e14b5a; }
.essence-page .project-section-heading { max-width: 12ch; }
.essence-page .project-copy { margin: 0; }
.essence-identity-copy span { display: block; }
.essence-identity-copy span + span { margin-top: 1rem; }

.essence-hero { padding: clamp(4.5rem, 7vw, 7rem) 0 clamp(5rem, 9vw, 8rem); background: var(--smoke); }
.essence-hero-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.essence-hero-copy { position: relative; z-index: 2; min-width: 0; }
.essence-hero .project-eyebrow { color: var(--cloud); }
.essence-hero .project-eyebrow::before, .essence-hero .project-eyebrow::after { content: none; }
.essence-hero h1 { max-width: 7ch; margin: 0; color: var(--raz); font-family: var(--font-display); font-size: clamp(4.5rem, 8vw, 7.5rem); font-weight: 700; letter-spacing: -.065em; line-height: .84; }
.essence-hero-art { display: flex; min-height: clamp(33rem, 51vw, 44rem); align-items: center; justify-content: flex-end; }
.essence-hero-package { margin: 0; overflow: hidden; box-shadow: 12px 12px 0 rgba(0,0,0,.22); }
.essence-hero-package img { display: block; width: 100%; height: 100%; object-fit: cover; }
.essence-hero-package--honey { width: min(86%, 36rem); aspect-ratio: 1722 / 2000; }

.essence-identity { padding: clamp(5.5rem, 9vw, 9rem) 0; background: var(--pavement); }
.essence-identity-intro, .essence-flavors-heading, .essence-package-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.essence-mark-stage { position: relative; min-height: clamp(26rem, 48vw, 40rem); margin-top: clamp(4rem, 8vw, 7rem); overflow: hidden; background: var(--smoke); }
.essence-wordmark { position: absolute; top: 18%; left: 7%; width: 72%; height: auto; }
.essence-steam-detail { position: absolute; right: 4%; bottom: -8%; width: min(40%, 28rem); }
.essence-steam-detail img { display: block; width: 100%; height: auto; opacity: .14; }
.essence-steam-detail p { position: absolute; top: 42%; left: -28%; margin: 0; color: var(--raz); font-size: .76rem; font-weight: 700; letter-spacing: .11em; line-height: 1.5; text-transform: uppercase; }
.essence-steam-detail p::after { content: ""; position: absolute; top: .55em; right: calc(100% + .75rem); width: clamp(3rem, 7vw, 6rem); height: 2px; background: var(--raz); }
.essence-steam-detail p span { color: var(--mist); font-weight: 500; letter-spacing: .06em; }

.essence-flavors { padding: clamp(5.5rem, 9vw, 9rem) 0; background: var(--cloud); }
.essence-flavors .project-section-heading, .essence-flavors .project-copy { color: var(--pavement); }
.essence-flavor-system { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(4rem, 8vw, 7rem); }
.essence-flavor { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .82fr); gap: clamp(.75rem, 1.5vw, 1.5rem); align-items: center; min-width: 0; padding: clamp(1.25rem, 2vw, 2rem); border-top: 6px solid currentColor; background: transparent; }
.essence-flavor--mint { grid-column: 1 / span 7; color: var(--essence-mint); }
.essence-flavor--blueberry { grid-column: 6 / -1; color: var(--essence-blueberry); }
.essence-flavor--honey { grid-column: 1 / span 6; color: var(--essence-honey); }
.essence-flavor--strawberry { grid-column: 5 / -1; color: var(--essence-strawberry); }
.essence-ingredient { aspect-ratio: 4 / 3; overflow: hidden; }
.essence-ingredient--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 8%, white); text-align: center; }
.essence-ingredient--placeholder span { color: var(--pavement); font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 600; }
.essence-ingredient--placeholder small { margin-top: .4rem; color: currentColor; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.essence-ingredient--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.essence-ingredient--mint img { object-fit: contain; object-position: center; mix-blend-mode: multiply; }
.essence-ingredient--blueberry img, .essence-ingredient--honey img, .essence-ingredient--strawberry img { object-fit: contain; object-position: center; }
.essence-ingredient--blueberry img, .essence-ingredient--strawberry img { transform: translateY(-10px); }
.essence-ingredient--strawberry img { width: 80%; height: 80%; margin: 10% auto; transform: translateY(-20px); }
.essence-flavor-arrow { font-size: clamp(1.25rem, 2vw, 2rem); }
.essence-form { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.essence-form img { display: block; width: min(68%, 6.5rem); max-height: 7rem; object-fit: contain; }
.essence-form p { margin: 0; color: var(--pavement); font-size: .72rem; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }

.essence-package { padding: clamp(5.5rem, 9vw, 9rem) 0; background: var(--smoke); }
.essence-package-process { display: grid; width: min(1320px, calc(100% - 3rem)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: clamp(2rem, 3vw, 3rem); align-items: center; margin-top: clamp(4rem, 8vw, 7rem); }
.essence-vector-board { position: relative; min-height: clamp(28rem, 45vw, 38rem); padding: clamp(2rem, 4vw, 4rem); border: 1px solid rgba(232,232,232,.25); background-image: linear-gradient(rgba(232,232,232,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(232,232,232,.055) 1px, transparent 1px); background-size: 32px 32px; }
.essence-process-label, .essence-vector-note { margin: 0; color: var(--mist); font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.essence-vector-wordmark { display: block; width: 86%; height: auto; margin: clamp(4rem, 8vw, 7rem) auto clamp(3rem, 6vw, 5rem); }
.essence-vector-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.essence-vector-icons img { display: block; width: 100%; height: clamp(3.5rem, 7vw, 6rem); object-fit: contain; }
.essence-vector-note { position: absolute; right: clamp(2rem, 4vw, 4rem); bottom: clamp(2rem, 4vw, 4rem); max-width: none; text-align: right; white-space: nowrap; }
.essence-package-proof { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; margin: 0; transform: translateY(7%); }
.essence-package-proof img { display: block; box-sizing: border-box; width: min(100%, 43.125rem); max-width: 100%; height: auto; border: 1px solid rgba(232,232,232,.25); }
.essence-package-proof figcaption { margin-top: .9rem; color: var(--mist); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.essence-family { padding: clamp(5.5rem, 9vw, 9rem) 0 clamp(7rem, 12vw, 11rem); background: var(--pavement); }
.essence-family-title { margin: 0; color: var(--cloud); font-family: var(--font-display); font-size: clamp(3.3rem, 7vw, 6.75rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; }
.essence-family-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: start; margin-top: clamp(4rem, 8vw, 7rem); }
.essence-family-item { margin: 0; }
.essence-family-item img { display: block; width: 100%; height: auto; }
.essence-family-item figcaption { margin-top: .75rem; color: var(--mist); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.essence-family-item--mint { grid-column: 1 / span 5; width: 107%; margin-top: 10%; }
.essence-family-item--blueberry { grid-column: 7 / -1; }
.essence-family-item--blueberry figcaption { text-align: right; }
.essence-family-item--honey { position: relative; z-index: 1; grid-column: 2 / span 6; margin-top: -12%; }
.essence-family-item--strawberry { grid-column: 9 / -1; margin-top: 18%; }

@media (max-width: 1000px) {
  .essence-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; }
  .essence-hero-art { min-height: 34rem; }
  .essence-identity-intro, .essence-flavors-heading, .essence-package-heading { gap: 3rem; }
}

@media (max-width: 900px) {
  .essence-hero-inner, .essence-identity-intro, .essence-flavors-heading, .essence-package-heading, .essence-package-process { grid-template-columns: minmax(0, 1fr); }
  .essence-hero-art { width: min(100%, 42rem); min-height: 38rem; margin: 0 auto; }
  .essence-hero-package--honey { width: min(78%, 34rem); }
  .essence-identity-intro, .essence-flavors-heading, .essence-package-heading { gap: 1.5rem; }
  .essence-flavor--mint, .essence-flavor--blueberry, .essence-flavor--honey, .essence-flavor--strawberry { grid-column: span 6; }
  .essence-package-proof { width: min(72%, 30rem); margin-left: auto; transform: none; }
}

@media (max-width: 700px) {
  .essence-hero, .essence-identity, .essence-flavors, .essence-package, .essence-family { padding: 4rem 0; }
  .essence-hero h1 { font-size: clamp(3.7rem, 17vw, 5.5rem); }
  .essence-hero-art { min-height: min(116vw, 36rem); }
  .essence-hero-package--honey { width: 82%; }
  .essence-mark-stage { min-height: 23rem; }
  .essence-wordmark { top: 20%; left: 6%; width: 88%; }
  .essence-steam-detail { right: -5%; bottom: -3%; width: 52%; }
  .essence-steam-detail p { top: 38%; left: -44%; }
  .essence-flavor-system { grid-template-columns: minmax(0, 1fr); }
  .essence-flavor--mint, .essence-flavor--blueberry, .essence-flavor--honey, .essence-flavor--strawberry { grid-column: 1; }
  .essence-flavor { grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); }
  .essence-vector-board { min-height: 28rem; }
  .essence-package-proof { width: 86%; }
  .essence-package-proof img { width: 100%; max-width: 100%; height: auto; }
  .essence-family-item--mint { grid-column: 1 / span 7; width: 100%; margin-top: 0; }
  .essence-family-item--blueberry { grid-column: 7 / -1; margin-top: 35%; }
  .essence-family-item--honey { grid-column: 1 / span 8; margin-top: -5%; }
  .essence-family-item--strawberry { grid-column: 8 / -1; margin-top: 30%; }
}

@media (max-width: 420px) {
  .essence-hero, .essence-identity, .essence-flavors, .essence-package, .essence-family { padding: 3.25rem 0; }
  .essence-hero-art { min-height: 25rem; }
  .essence-hero-package--honey { width: 88%; }
  .essence-mark-stage { min-height: 18rem; }
  .essence-steam-detail p { left: -58%; font-size: .59rem; }
  .essence-steam-detail p::after { display: none; }
  .essence-flavor { grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, .8fr); gap: .65rem; padding: 1rem; }
  .essence-form img { max-height: 5rem; }
  .essence-vector-board { min-height: 24rem; padding: 1.5rem; }
  .essence-vector-wordmark { width: 100%; margin-top: 4.5rem; }
  .essence-vector-icons { gap: .65rem; }
  .essence-vector-note { right: 1.5rem; bottom: 1.5rem; left: 1.5rem; text-align: left; white-space: normal; }
  .essence-package .project-eyebrow { --eyebrow-left: 1.5rem; --eyebrow-right: 2.25rem; gap: .5rem; font-size: .7rem; }
  .essence-package-proof { width: 100%; }
  .essence-family-grid { gap: .75rem; }
  .essence-family-item figcaption { font-size: .58rem; }
}